/* ==========================================================================
   ATELIBOX — COMPOSANTS UI ATOMIQUES (charte §4)
   Classes préfixées `ab-`, CSS natif, jetons de theme.css uniquement.
   À charger APRÈS fonts.css, theme.css et base.css.

   Les états hover / focus / active sont aussi exposés par les classes d'aperçu
   `.is-hover`, `.is-focus`, `.is-active` (utilisées par /dev/styleguide pour les montrer
   statiquement ; elles appliquent exactement les mêmes règles que les pseudo-classes).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Jetons de composant
   Valeurs propres au light mode quand la charte les fixe en HEX (badges, danger…),
   avec leur variante dark sous [data-theme='dark']. Contrastes texte/fond ≥ 4.5:1
   Ratios WCAG calculés (texte / fond), light puis dark :
     paid 8.09 / 9.33 · pending 6.98 / 8.82 · late 9.99 / 9.09 · draft 6.27 / 9.86 · info 9.03 / 8.53
     danger (bouton) 6.05 / 9.09 · toast 14.96 / 13.45 · tooltip 14.56 / 15.70
   Écarts assumés à la charte (a11y §9 prime) : texte danger #B42318 au lieu de #D92D20 (4.44:1),
   bordure de contrôle #948A7A (3.40:1) au lieu de #D6CEBF (1.56:1), placeholder = --text-muted
   (4.71:1) au lieu de #ADA291 (2.51:1). Bouton primary light : blanc sur #D35C27 = 3.94:1 < 4.5:1,
   donc fond brand-600 #B9491A au repos (5.21:1), brand-700 au survol, brand-800 à l'appui.
   -------------------------------------------------------------------------- */
:root {
  /* Badges de statut (§4.7) ; réutilisés par les alertes */
  --ab-badge-paid-bg: #ECFDF3;    --ab-badge-paid-fg: #0E5832;    --ab-badge-paid-border: #A6F4C5;    --ab-badge-paid-dot: #16894E;
  --ab-badge-pending-bg: #FFF8E6; --ab-badge-pending-fg: #7E4902; --ab-badge-pending-border: #FEDF89; --ab-badge-pending-dot: #C87808;
  --ab-badge-late-bg: #FEF3F2;    --ab-badge-late-fg: #7A140D;    --ab-badge-late-border: #FECDCA;    --ab-badge-late-dot: #D92D20;
  --ab-badge-draft-bg: #F3EFE9;   --ab-badge-draft-fg: #605649;   --ab-badge-draft-border: #D6CEBF;   --ab-badge-draft-dot: #7D7263;
  --ab-badge-info-bg: #EFF8FF;    --ab-badge-info-fg: #0B4773;    --ab-badge-info-border: #B2DDFF;    --ab-badge-info-dot: #1774B8;

  /* Danger : texte / bordure forte / bouton (le #D92D20 de la charte donne 4.44:1 sur #FEF3F2) */
  --ab-danger: #B42318;
  --ab-danger-ring: rgba(217, 45, 32, 0.15);
  --ab-btn-danger-bg: #FEF3F2;
  --ab-btn-danger-border: #FECDCA;
  --ab-btn-danger-hover-bg: #B42318;
  --ab-btn-danger-hover-fg: #FFFFFF;

  /* Boutons (§4.1) */
  --ab-btn-primary-bg: var(--color-brand-600);
  --ab-btn-primary-hover-bg: var(--color-brand-700);
  --ab-btn-primary-active-bg: var(--color-brand-800);
  --ab-btn-primary-fg: var(--text-inverted);
  --ab-btn-primary-shadow: 0 1px 3px rgba(211, 92, 39, 0.25);
  --ab-btn-primary-shadow-hover: 0 4px 8px rgba(211, 92, 39, 0.35);
  --ab-ghost-hover-bg: rgba(214, 206, 191, 0.25);
  --ab-active-bg: var(--color-neutral-100);
  --ab-disabled-bg: var(--color-neutral-200);
  --ab-disabled-fg: var(--color-neutral-400);

  /* Champs (§4.2) : bordure de contrôle ≥ 3:1 sur fond (le #D6CEBF de la charte ne donne que 1.56:1) */
  --ab-control-border: #948A7A;
  --ab-control-border-hover: var(--color-neutral-500);
  --ab-field-bg: var(--bg-surface);
  --ab-field-ring: rgba(211, 92, 39, 0.15);
  --ab-placeholder: var(--text-muted);
  --ab-switch-knob: #FFFFFF;
  --ab-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23605649'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --ab-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23FFFFFF'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");

  /* Cartes, tables (§4.3, §4.4) */
  --ab-card-shadow: 0 1px 3px rgba(46, 40, 34, 0.04), 0 4px 12px rgba(46, 40, 34, 0.03);
  --ab-card-hover-shadow: 0 6px 18px rgba(211, 92, 39, 0.08);
  --ab-card-divider: var(--color-neutral-100);
  --ab-th-bg: var(--color-neutral-50);
  --ab-th-fg: var(--color-neutral-600);
  --ab-row-hover: var(--color-brand-50);
  --ab-row-selected: rgba(211, 92, 39, 0.08);

  /* Overlay des modales (§4.6) */
  --ab-overlay: rgba(26, 22, 18, 0.6);
  --ab-modal-shadow: 0 20px 40px rgba(26, 22, 18, 0.2);

  /* Toasts (§4.8) : fond sombre dans les deux thèmes, icônes colorées */
  --ab-toast-bg: #1E1B18;
  --ab-toast-border: #36302A;
  --ab-toast-fg: #F3EFE9;
  --ab-toast-success: #6FDBA0;
  --ab-toast-warning: #F0B85A;
  --ab-toast-danger: #FFA79F;
  --ab-toast-info: #7CC4F2;

  /* Tooltip (§4.9) */
  --ab-tooltip-bg: var(--color-neutral-800);
  --ab-tooltip-fg: #FFFFFF;
}

[data-theme='dark'] {
  --ab-badge-paid-bg: #12261C;    --ab-badge-paid-fg: #6FDBA0;    --ab-badge-paid-border: #1F5A3A;    --ab-badge-paid-dot: #6FDBA0;
  --ab-badge-pending-bg: #2B2110; --ab-badge-pending-fg: #F0B85A; --ab-badge-pending-border: #5E4515; --ab-badge-pending-dot: #F0B85A;
  --ab-badge-late-bg: #2E1613;    --ab-badge-late-fg: #FFA79F;    --ab-badge-late-border: #6B2A24;    --ab-badge-late-dot: #FFA79F;
  --ab-badge-draft-bg: #282420;   --ab-badge-draft-fg: #D6CEBF;   --ab-badge-draft-border: #453E34;   --ab-badge-draft-dot: #ADA291;
  --ab-badge-info-bg: #11222F;    --ab-badge-info-fg: #7CC4F2;    --ab-badge-info-border: #1F4562;    --ab-badge-info-dot: #7CC4F2;

  --ab-danger: #FFA79F;
  --ab-danger-ring: rgba(255, 167, 159, 0.25);
  --ab-btn-danger-bg: #2E1613;
  --ab-btn-danger-border: #6B2A24;
  --ab-btn-danger-hover-bg: #FFA79F;
  --ab-btn-danger-hover-fg: #2E1613;

  --ab-btn-primary-bg: var(--color-brand-500);       /* #DF8053 en dark, texte sombre : 6.4:1 */
  --ab-btn-primary-hover-bg: var(--color-brand-600);
  --ab-btn-primary-active-bg: var(--color-brand-200);
  --ab-btn-primary-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --ab-btn-primary-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.5);
  --ab-ghost-hover-bg: rgba(214, 206, 191, 0.12);
  --ab-active-bg: var(--bg-surface-elevated);
  --ab-disabled-bg: #282420;
  --ab-disabled-fg: #7D7263;

  --ab-control-border: var(--color-neutral-500);
  --ab-control-border-hover: var(--color-neutral-400);
  --ab-field-bg: var(--bg-app);
  --ab-field-ring: rgba(223, 128, 83, 0.3);
  --ab-switch-knob: #F3EFE9;
  --ab-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ADA291'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --ab-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23141210'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");

  --ab-card-shadow: var(--shadow-sm);
  --ab-card-hover-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  --ab-card-divider: var(--border-subtle);
  --ab-th-bg: var(--bg-app);
  --ab-th-fg: var(--text-muted);
  --ab-row-hover: rgba(223, 128, 83, 0.07);
  --ab-row-selected: rgba(223, 128, 83, 0.14);

  --ab-overlay: rgba(10, 8, 6, 0.7);
  --ab-modal-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

  --ab-toast-bg: #282420;
  --ab-toast-border: #453E34;

  --ab-tooltip-bg: #F3EFE9;
  --ab-tooltip-fg: #1A1612;
}

/* --------------------------------------------------------------------------
   1. Utilitaires et icônes
   -------------------------------------------------------------------------- */
.ab-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ab-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
  vertical-align: middle;
}
.ab-icon--16 { width: 16px; height: 16px; }
.ab-icon--20 { width: 20px; height: 20px; }
.ab-icon--24 { width: 24px; height: 24px; }
.ab-icon--32 { width: 32px; height: 32px; }

/* --------------------------------------------------------------------------
   2. Boutons (§4.1)
   -------------------------------------------------------------------------- */
.ab-btn {
  --ab-btn-h: 42px;
  --ab-btn-px: 18px;
  --ab-btn-fs: 14px;
  --ab-btn-r: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--ab-btn-h);
  padding: 0 var(--ab-btn-px);
  border: 1.5px solid transparent;
  border-radius: var(--ab-btn-r);
  font-family: var(--font-body);
  font-size: var(--ab-btn-fs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.ab-btn--sm { --ab-btn-h: 34px; --ab-btn-px: 12px; --ab-btn-fs: 13px; --ab-btn-r: var(--radius-sm); }
.ab-btn--md { --ab-btn-h: 42px; --ab-btn-px: 18px; --ab-btn-fs: 14px; --ab-btn-r: var(--radius-md); }
.ab-btn--lg { --ab-btn-h: 50px; --ab-btn-px: 24px; --ab-btn-fs: 16px; --ab-btn-r: 10px; }
.ab-btn--block { display: flex; width: 100%; }

.ab-btn:is(:focus-visible, .is-focus) {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* Primary */
.ab-btn--primary {
  background: var(--ab-btn-primary-bg);
  color: var(--ab-btn-primary-fg);
  box-shadow: var(--ab-btn-primary-shadow);
}
.ab-btn--primary:is(:hover, .is-hover) {
  background: var(--ab-btn-primary-hover-bg);
  box-shadow: var(--ab-btn-primary-shadow-hover);
  transform: translateY(-1px);
}
.ab-btn--primary:is(:active, .is-active) {
  background: var(--ab-btn-primary-active-bg);
  transform: translateY(0);
}
.ab-btn--primary:is(:focus-visible, .is-focus) {
  box-shadow: var(--ab-btn-primary-shadow), var(--focus-ring);
}

/* Secondary */
.ab-btn--secondary {
  background: var(--bg-surface);
  color: var(--text-body);
  border-color: var(--border-strong);
}
.ab-btn--secondary:is(:hover, .is-hover) {
  background: var(--bg-app);
  border-color: var(--ab-control-border-hover);
  color: var(--text-heading);
}
.ab-btn--secondary:is(:active, .is-active) {
  background: var(--ab-active-bg);
}

/* Ghost */
.ab-btn--ghost {
  background: transparent;
  color: var(--text-body);
}
.ab-btn--ghost:is(:hover, .is-hover) {
  background: var(--ab-ghost-hover-bg);
  color: var(--text-heading);
}
.ab-btn--ghost:is(:active, .is-active) {
  background: var(--ab-active-bg);
}

/* Danger */
.ab-btn--danger {
  background: var(--ab-btn-danger-bg);
  color: var(--ab-danger);
  border-color: var(--ab-btn-danger-border);
  border-width: 1px;
}
.ab-btn--danger:is(:hover, .is-hover) {
  background: var(--ab-btn-danger-hover-bg);
  color: var(--ab-btn-danger-hover-fg);
  border-color: var(--ab-btn-danger-hover-bg);
}
.ab-btn--danger:is(:active, .is-active) {
  filter: brightness(0.92);
}
.ab-btn--danger:is(:focus-visible, .is-focus) {
  outline-color: var(--ab-danger);
  box-shadow: 0 0 0 3px var(--ab-danger-ring);
}

/* Désactivé : placé en dernier pour l'emporter sur hover/active */
.ab-btn:is(:disabled, [aria-disabled='true']) {
  background: var(--ab-disabled-bg);
  color: var(--ab-disabled-fg);
  border-color: transparent;
  box-shadow: none;
  transform: none;
  filter: none;
  cursor: not-allowed;
}

/* Icône seule : cible ≥ 44px */
.ab-btn--icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
}

/* Cibles tactiles ≥ 44px sur mobile / écran tactile (§9) */
@media (max-width: 767px), (pointer: coarse) {
  .ab-btn { min-height: max(var(--ab-btn-h), 44px); }
}

/* --------------------------------------------------------------------------
   3. Champs de formulaire (§4.2)
   -------------------------------------------------------------------------- */
.ab-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ab-label {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading);
  line-height: 1.3;
}
.ab-label--required::after {
  content: ' *';
  color: var(--ab-danger);
}
.ab-help {
  margin: 0;
  font-size: var(--font-size-body-sm);
  color: var(--text-muted);
  line-height: 1.4;
}
.ab-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--ab-danger);
  line-height: 1.4;
}

.ab-input,
.ab-textarea,
.ab-select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--ab-control-border);
  border-radius: var(--radius-md);
  background-color: var(--ab-field-bg);
  color: var(--text-heading);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.4;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.ab-textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}
.ab-select {
  appearance: none;
  padding-right: 40px;
  background-image: var(--ab-select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  cursor: pointer;
}
.ab-input::placeholder,
.ab-textarea::placeholder {
  color: var(--ab-placeholder);
  opacity: 1;
}
:is(.ab-input, .ab-textarea, .ab-select):is(:hover, .is-hover) {
  border-color: var(--ab-control-border-hover);
}
:is(.ab-input, .ab-textarea, .ab-select):is(:focus, :focus-visible, .is-focus) {
  outline: 2px solid transparent; /* visible en mode contraste forcé */
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 3px var(--ab-field-ring);
}
:is(.ab-input, .ab-textarea, .ab-select):is(.ab-input--invalid, [aria-invalid='true']) {
  border-color: var(--ab-danger);
  box-shadow: 0 0 0 3px var(--ab-danger-ring);
}
:is(.ab-input, .ab-textarea, .ab-select):is(:disabled, [aria-disabled='true']) {
  background-color: var(--ab-disabled-bg);
  border-color: transparent;
  color: var(--ab-disabled-fg);
  box-shadow: none;
  cursor: not-allowed;
}

/* Case à cocher, radio, interrupteur : la cible de 44px est portée par le label .ab-choice */
.ab-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  cursor: pointer;
  color: var(--text-body);
  font-size: var(--font-size-body);
}
.ab-choice:has(:disabled) {
  cursor: not-allowed;
  color: var(--ab-disabled-fg);
}

.ab-check,
.ab-radio {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--ab-control-border);
  background-color: var(--ab-field-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: inherit;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.ab-check { border-radius: var(--radius-sm); }
.ab-radio { border-radius: var(--radius-full); }
:is(.ab-check, .ab-radio):is(:hover, .is-hover) {
  border-color: var(--ab-control-border-hover);
}
.ab-check:checked {
  background-color: var(--color-brand-500);
  border-color: var(--color-brand-500);
  background-image: var(--ab-check-mark);
}
.ab-check:indeterminate {
  background-color: var(--color-brand-500);
  border-color: var(--color-brand-500);
  background-image: linear-gradient(var(--text-inverted), var(--text-inverted));
  background-size: 10px 2px;
}
.ab-radio:checked {
  background-color: var(--color-brand-500);
  border-color: var(--color-brand-500);
  box-shadow: inset 0 0 0 4px var(--bg-surface);
}
:is(.ab-check, .ab-radio):is(:focus-visible, .is-focus) {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}
:is(.ab-check, .ab-radio):disabled {
  background-color: var(--ab-disabled-bg);
  border-color: var(--ab-disabled-bg);
  box-shadow: none;
}
:is(.ab-check, .ab-radio):disabled:checked {
  opacity: 0.6;
}
:is(.ab-check, .ab-radio):is(.ab-input--invalid, [aria-invalid='true']) {
  border-color: var(--ab-danger);
}

.ab-switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 48px;
  height: 26px;
  margin: 0;
  border-radius: var(--radius-full);
  background-color: var(--ab-control-border);
  cursor: inherit;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.ab-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--ab-switch-knob);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-spring);
}
.ab-switch:checked {
  background-color: var(--color-brand-500);
}
.ab-switch:checked::before {
  transform: translateX(22px);
  background: var(--text-inverted);
}
.ab-switch:is(:focus-visible, .is-focus) {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}
.ab-switch:disabled {
  background-color: var(--ab-disabled-bg);
}
.ab-switch:disabled::before {
  background: var(--ab-disabled-fg);
  box-shadow: none;
}

@media (max-width: 767px) {
  .ab-input,
  .ab-textarea,
  .ab-select {
    font-size: 16px; /* évite le zoom automatique d'iOS au focus */
  }
}

/* --------------------------------------------------------------------------
   4. Cartes (§4.3) et KPI
   -------------------------------------------------------------------------- */
.ab-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--ab-card-shadow);
  color: var(--text-body);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}
.ab-card__header,
.ab-card__footer {
  padding: 16px 20px;
}
.ab-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--ab-card-divider);
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
}
.ab-card__body {
  flex: 1;
  padding: 20px;
}
.ab-card__footer {
  border-top: 1px solid var(--ab-card-divider);
}
.ab-card--clickable {
  cursor: pointer;
  text-decoration: none;
}
.ab-card--clickable:is(:hover, .is-hover, :focus-visible, .is-focus) {
  border-color: var(--color-brand-500);
  box-shadow: var(--ab-card-hover-shadow);
  transform: translateY(-2px);
}

.ab-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--ab-card-shadow);
}
.ab-kpi__label {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}
.ab-kpi__value {
  font-family: var(--font-numbers);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums lining-nums;
}
.ab-kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
}
.ab-kpi__trend--up { color: var(--ab-badge-paid-fg); }
.ab-kpi__trend--down { color: var(--ab-badge-late-fg); }

/* --------------------------------------------------------------------------
   5. Tables de données (§4.4)
   -------------------------------------------------------------------------- */
.ab-table-wrap {
  overflow-x: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}
.ab-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--text-body);
}
.ab-table th {
  height: 42px;
  padding: 0 16px;
  background: var(--ab-th-bg);
  border-bottom: 1.5px solid var(--border-subtle);
  color: var(--ab-th-fg);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.ab-table td {
  height: 56px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.ab-table tbody tr:last-child td {
  border-bottom: 0;
}
.ab-table td.num,
.ab-table th.num,
.ab-num {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  white-space: nowrap;
}
.ab-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-out);
}
.ab-table tbody tr:is(:hover, .is-hover) {
  background: var(--ab-row-hover);
}
.ab-table tbody tr[aria-selected='true'] {
  background: var(--ab-row-selected);
}
.ab-table tbody tr[aria-selected='true'] > :first-child {
  box-shadow: inset 3px 0 0 var(--color-brand-500);
}

/* --------------------------------------------------------------------------
   6. Badges de statut (§4.7)
   -------------------------------------------------------------------------- */
.ab-badge {
  --ab-badge-bg: var(--ab-badge-draft-bg);
  --ab-badge-fg: var(--ab-badge-draft-fg);
  --ab-badge-border: var(--ab-badge-draft-border);
  --ab-badge-dot: var(--ab-badge-draft-dot);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--ab-badge-border);
  border-radius: var(--radius-full);
  background: var(--ab-badge-bg);
  color: var(--ab-badge-fg);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
}
.ab-badge::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--ab-badge-dot);
}
.ab-badge--paid { --ab-badge-bg: var(--ab-badge-paid-bg); --ab-badge-fg: var(--ab-badge-paid-fg); --ab-badge-border: var(--ab-badge-paid-border); --ab-badge-dot: var(--ab-badge-paid-dot); }
.ab-badge--pending { --ab-badge-bg: var(--ab-badge-pending-bg); --ab-badge-fg: var(--ab-badge-pending-fg); --ab-badge-border: var(--ab-badge-pending-border); --ab-badge-dot: var(--ab-badge-pending-dot); }
.ab-badge--late { --ab-badge-bg: var(--ab-badge-late-bg); --ab-badge-fg: var(--ab-badge-late-fg); --ab-badge-border: var(--ab-badge-late-border); --ab-badge-dot: var(--ab-badge-late-dot); }
.ab-badge--draft { --ab-badge-bg: var(--ab-badge-draft-bg); --ab-badge-fg: var(--ab-badge-draft-fg); --ab-badge-border: var(--ab-badge-draft-border); --ab-badge-dot: var(--ab-badge-draft-dot); }
.ab-badge--info { --ab-badge-bg: var(--ab-badge-info-bg); --ab-badge-fg: var(--ab-badge-info-fg); --ab-badge-border: var(--ab-badge-info-border); --ab-badge-dot: var(--ab-badge-info-dot); }

/* Tampon « Facture payée » (§7.2) : à poser avec .is-stamped */
.ab-badge.is-stamped {
  animation: ab-stamp var(--duration-deliberate) var(--ease-spring);
}
@keyframes ab-stamp {
  0% { transform: scale(1.25); opacity: 0; }
  55% { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   7. Alertes (messages flash)
   -------------------------------------------------------------------------- */
.ab-alert {
  --ab-badge-bg: var(--ab-badge-info-bg);
  --ab-badge-fg: var(--ab-badge-info-fg);
  --ab-badge-border: var(--ab-badge-info-border);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 12px 16px;
  border: 1px solid var(--ab-badge-border);
  border-radius: var(--radius-md);
  background: var(--ab-badge-bg);
  color: var(--ab-badge-fg);
  font-size: var(--font-size-body);
  line-height: 1.45;
}
.ab-alert > .ab-icon { margin-top: 2px; }
.ab-alert__body { flex: 1; min-width: 0; }
.ab-alert__title { display: block; font-weight: var(--font-weight-semibold); }
.ab-alert--success { --ab-badge-bg: var(--ab-badge-paid-bg); --ab-badge-fg: var(--ab-badge-paid-fg); --ab-badge-border: var(--ab-badge-paid-border); }
.ab-alert--warning { --ab-badge-bg: var(--ab-badge-pending-bg); --ab-badge-fg: var(--ab-badge-pending-fg); --ab-badge-border: var(--ab-badge-pending-border); }
.ab-alert--danger { --ab-badge-bg: var(--ab-badge-late-bg); --ab-badge-fg: var(--ab-badge-late-fg); --ab-badge-border: var(--ab-badge-late-border); }
.ab-alert--info { --ab-badge-bg: var(--ab-badge-info-bg); --ab-badge-fg: var(--ab-badge-info-fg); --ab-badge-border: var(--ab-badge-info-border); }

/* --------------------------------------------------------------------------
   8. Toasts (§4.8)
   -------------------------------------------------------------------------- */
.ab-toasts {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(380px, calc(100vw - 2 * var(--space-4)));
  pointer-events: none;
}
.ab-toast {
  --ab-toast-accent: var(--ab-toast-info);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 12px 8px 12px 16px;
  border: 1px solid var(--ab-toast-border);
  border-radius: var(--radius-md);
  background: var(--ab-toast-bg);
  color: var(--ab-toast-fg);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-body);
  line-height: 1.45;
  pointer-events: auto;
  animation: ab-toast-in var(--duration-deliberate) var(--ease-spring) both;
}
.ab-toast > .ab-icon { margin-top: 2px; color: var(--ab-toast-accent); }
.ab-toast__text { flex: 1; min-width: 0; padding-top: 4px; overflow-wrap: anywhere; }
.ab-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ab-toast-fg);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.ab-toast__close:is(:hover, .is-hover) { background: rgba(243, 239, 233, 0.14); }
.ab-toast__close:focus-visible { outline: 2px solid var(--ab-toast-fg); outline-offset: 0; }
.ab-toast--success { --ab-toast-accent: var(--ab-toast-success); }
.ab-toast--warning { --ab-toast-accent: var(--ab-toast-warning); }
.ab-toast--danger { --ab-toast-accent: var(--ab-toast-danger); }
.ab-toast--info { --ab-toast-accent: var(--ab-toast-info); }
.ab-toast.is-leaving {
  animation: ab-toast-out var(--duration-normal) var(--ease-exit) both;
}
@keyframes ab-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes ab-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@media (max-width: 767px) {
  .ab-toasts {
    top: var(--space-4);
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .ab-toast { animation-name: ab-toast-in-top; }
  .ab-toast.is-leaving { animation-name: ab-toast-out-top; }
  @keyframes ab-toast-in-top {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }
  @keyframes ab-toast-out-top {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-8px) scale(0.98); }
  }
}

/* --------------------------------------------------------------------------
   9. Tooltip (§4.9) : CSS seul, [data-ab-tooltip="texte"], délai 200ms
   -------------------------------------------------------------------------- */
[data-ab-tooltip] {
  position: relative;
}
[data-ab-tooltip]::after {
  content: attr(data-ab-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 1050;
  max-width: 240px;
  width: max-content;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--ab-tooltip-bg);
  color: var(--ab-tooltip-fg);
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    visibility 0s linear var(--duration-fast);
}
[data-ab-tooltip]:is(:hover, :focus-visible, .is-hover)::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 200ms;
}

/* --------------------------------------------------------------------------
   10. Modales et drawers (§4.6) sur <dialog>
   Sortie : JS ajoute .is-closing, attend la fin de l'animation, puis dialog.close().
   -------------------------------------------------------------------------- */
body:has(dialog.ab-modal[open], dialog.ab-drawer[open]) {
  overflow: hidden;
}

.ab-modal,
.ab-drawer {
  padding: 0;
  border: 0;
  background: var(--bg-surface-elevated);
  color: var(--text-body);
  box-shadow: var(--ab-modal-shadow);
  overflow: hidden;
}
.ab-modal::backdrop,
.ab-drawer::backdrop {
  background: var(--ab-overlay);
  backdrop-filter: blur(4px); /* écran uniquement, jamais dans les PDF */
  -webkit-backdrop-filter: blur(4px);
}
.ab-modal[open]::backdrop,
.ab-drawer[open]::backdrop { animation: ab-fade-in var(--duration-normal) var(--ease-out) both; }
.ab-modal.is-closing::backdrop,
.ab-drawer.is-closing::backdrop { animation: ab-fade-out var(--duration-normal) var(--ease-exit) both; }

.ab-modal {
  width: min(560px, calc(100% - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  border-radius: var(--radius-xl);
}
.ab-modal--lg { width: min(840px, calc(100% - 2 * var(--space-4))); }
.ab-modal[open] { display: flex; flex-direction: column; animation: ab-modal-in var(--duration-deliberate) var(--ease-spring) both; }
.ab-modal.is-closing { animation: ab-modal-out var(--duration-normal) var(--ease-exit) both; }

.ab-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(480px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.ab-drawer[open] { display: flex; flex-direction: column; animation: ab-drawer-in var(--duration-deliberate) var(--ease-spring) both; }
.ab-drawer.is-closing { animation: ab-drawer-out var(--duration-normal) var(--ease-exit) both; }

.ab-modal__header,
.ab-modal__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 24px;
}
.ab-modal__header {
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
}
.ab-modal__title {
  margin: 0;
  font-size: var(--font-size-h4);
}
.ab-modal__body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}
.ab-modal__footer {
  justify-content: flex-end;
  border-top: 1px solid var(--border-subtle);
}

@keyframes ab-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ab-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ab-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes ab-modal-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes ab-drawer-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}
@keyframes ab-drawer-out {
  from { transform: none; }
  to { transform: translateX(100%); }
}

@media (max-width: 767px) {
  .ab-drawer { border-radius: 0; }
  .ab-modal__header,
  .ab-modal__footer { padding: 12px 16px; }
  .ab-modal__body { padding: 16px; }
  .ab-modal__footer { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   11. Fil d'Ariane et pagination (§4.9)
   -------------------------------------------------------------------------- */
.ab-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-body-sm);
  color: var(--text-muted);
}
.ab-breadcrumbs li {
  display: inline-flex;
  align-items: center;
}
.ab-breadcrumbs li + li::before {
  content: '/';
  padding: 0 var(--space-2);
  color: var(--text-muted);
}
.ab-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-muted);
  text-decoration: none;
}
.ab-breadcrumbs a:is(:hover, .is-hover) {
  color: var(--text-heading);
  text-decoration: underline;
}
.ab-breadcrumbs [aria-current='page'] {
  color: var(--text-heading);
  font-weight: var(--font-weight-semibold);
}
@media (max-width: 767px), (pointer: coarse) {
  .ab-breadcrumbs a { min-height: 44px; }
}

.ab-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.ab-pagination__info {
  font-size: var(--font-size-body-sm);
  color: var(--text-muted);
}
.ab-pagination__actions {
  display: flex;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   12. État vide
   -------------------------------------------------------------------------- */
.ab-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.ab-empty__img {
  width: min(280px, 80%);
  height: auto;
  margin-bottom: var(--space-2);
}

/* Illustrations : variante affichée selon le thème (macro illustration() de _ui.html) */
.ab-illus { display: block; max-width: 100%; height: auto; }
.ab-illus--dark { display: none; }
[data-theme='dark'] .ab-illus--light { display: none; }
[data-theme='dark'] .ab-illus--dark { display: block; }
.ab-empty__title {
  margin: 0;
  font-size: var(--font-size-h3);
}
.ab-empty__text {
  margin: 0;
  color: var(--text-muted);
}
.ab-empty .ab-btn { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   13. Chips (filtres à jetons)
   -------------------------------------------------------------------------- */
.ab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  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);
}
.ab-chip:is(:hover, .is-hover) {
  border-color: var(--ab-control-border-hover);
  color: var(--text-heading);
}
.ab-chip[aria-pressed='true'] {
  background: var(--ab-row-selected);
  border-color: var(--color-brand-500);
  color: var(--text-heading);
}
.ab-chip:is(:focus-visible, .is-focus) {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}
.ab-chip:disabled {
  background: var(--ab-disabled-bg);
  border-color: transparent;
  color: var(--ab-disabled-fg);
  cursor: not-allowed;
}
@media (max-width: 767px), (pointer: coarse) {
  .ab-chip { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   14. Mouvement réduit (§7.2) : pas de translation, fondu bref
   (base.css neutralise déjà les durées ; ici on retire aussi les transformations)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ab-btn,
  .ab-card--clickable {
    transform: none !important;
  }
  .ab-toast,
  .ab-modal[open],
  .ab-drawer[open] {
    animation-name: ab-fade-in;
  }
  .ab-toast.is-leaving,
  .ab-modal.is-closing,
  .ab-drawer.is-closing {
    animation-name: ab-fade-out;
  }
  .ab-badge.is-stamped { animation: ab-fade-in 100ms linear !important; }
}

/* --------------------------------------------------------------------------
   15. Micro-interactions (§7.2) : coche SIRET animée, fondu bref (mouvement réduit)
   -------------------------------------------------------------------------- */
.ab-siret-status { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: var(--space-2); }
.ab-siret-check { width: 24px; height: 24px; fill: none; stroke: var(--ab-badge-paid-dot); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.ab-siret-check circle { stroke-dasharray: 63; stroke-dashoffset: 63; }
.ab-siret-check path { stroke-dasharray: 20; stroke-dashoffset: 20; }
.ab-siret-status.is-valid .ab-siret-check { visibility: visible; }
.ab-siret-status.is-valid .ab-siret-check circle { animation: ab-draw var(--duration-normal) var(--ease-spring) forwards; }
.ab-siret-status.is-valid .ab-siret-check path { animation: ab-draw var(--duration-normal) var(--ease-spring) 120ms forwards; }
@keyframes ab-draw { to { stroke-dashoffset: 0; } }
.ab-fade-100 { animation: ab-fade-in 100ms linear; }
@media (prefers-reduced-motion: reduce) {
  .ab-fade-100 { animation: ab-fade-in 100ms linear !important; }
  .ab-siret-status.is-valid .ab-siret-check circle,
  .ab-siret-status.is-valid .ab-siret-check path { animation: none; stroke-dashoffset: 0; }
  .ab-siret-status.is-valid .ab-siret-check { animation: ab-fade-in 100ms linear !important; }
}