/*
Bibliotheque de composants AZUFA -- migration design system "Korridor v5",
etape 3/8 (COMPOSANTS). Depend uniquement des tokens definis dans
design-tokens.css (charger ce fichier APRES) ; aucune valeur en dur
(couleur, espacement, rayon, ombre) n'est introduite ici -- uniquement des
var(--azufa-*) deja existants (y compris le bloc fondation ajoute a
l'etape 2/8 : --azufa-font-size-*, --azufa-line-height-*, --azufa-z-*).

Convention de nommage -- reprise a l'identique de design-tokens.css /
cockpit-components.css : classes plates `.azufa-composant`, elements en
`__element`, variantes en `--variante` (ou suffixe `-variante` quand un
precedent existant l'utilise deja, ex. `.azufa-btn-primary`), etats en
`.is-active` / `.is-open` / `.is-disabled` / `.is-loading`.

IMPORTANT -- anti-doublon : ce fichier n'introduit AUCUNE classe qui existe
deja ailleurs dans le systeme. Avant d'ecrire, grep effectue sur
design-tokens.css, cockpit-components.css et apps/(tous)/templates/(tous)/(tous).html.
Composants deja presents ailleurs et donc volontairement NON redefinis ici
(cf. rapport de mission) : .azufa-btn(-primary/-secondary/-ghost/-danger),
.azufa-card, .azufa-accent-card(+variantes), .azufa-badge(+variantes),
.azufa-badge-info, .azufa-label, .azufa-input (styles de base), .azufa-skeleton(+text/title/card),
.azufa-empty-state(+icon/title/desc), .azufa-filter-chip(+.is-active),
.azufa-drawer(+-overlay) (tiroir de navigation mobile), .azufa-stepper
(progression d'assistant), .azufa-mobile-tabs, .azufa-vtabs, .azufa-subtabs,
.azufa-sidenav, .azufa-kanban*, .azufa-view-toggle, .azufa-icon(-btn).
Ce fichier ne fait qu'ETENDRE .azufa-btn et .azufa-input avec des etats
manquants (focus-visible/active/disabled/loading, etc.) sans redeclarer
leurs regles de base.

Ce fichier ne touche AUCUN template dans cette etape -- composants
purement structurels, non appliques encore (etapes 4-7).
*/

/* ==========================================================================
   1. Bouton -- extension d'etats sur .azufa-btn existant (design-tokens.css)
   ========================================================================== */
.azufa-btn:focus-visible {
  outline: 2px solid var(--azufa-green);
  outline-offset: 2px;
}
.azufa-btn:active { filter: brightness(0.88); transform: translateY(1px); }
.azufa-btn:disabled,
.azufa-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: none;
  transform: none;
  pointer-events: none;
}
/* Etat chargement -- spinner CSS pur (pas de JS ici), le texte du bouton
   reste dans le DOM (lu par les lecteurs d'ecran) mais visuellement cache
   derriere le spinner pour ne pas annoncer un libelle trompeur. */
.azufa-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.azufa-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: azufa-spin 0.7s linear infinite;
}
.azufa-btn-ghost.is-loading::after,
.azufa-btn-secondary.is-loading::after {
  border-color: rgba(var(--azufa-green-rgb), 0.25);
  border-top-color: var(--azufa-green);
}
@keyframes azufa-spin { to { transform: rotate(360deg); } }

/* Bouton icone seule -- carre, zone tactile 44px (reprend .azufa-icon-btn),
   fond transparent par defaut. */
.azufa-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--azufa-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--azufa-green);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.azufa-btn-icon svg { width: 20px; height: 20px; }
.azufa-btn-icon:hover { background: var(--azufa-pearl); }
.azufa-btn-icon:focus-visible { outline: 2px solid var(--azufa-green); outline-offset: 2px; }
.azufa-btn-icon:disabled,
.azufa-btn-icon.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.azufa-btn-icon--outline { border-color: var(--azufa-card-border); }

/* ==========================================================================
   2. Champs de formulaire -- wrapper + variantes, extension de .azufa-input
   (base deja definie dans design-tokens.css : padding/border/radius/focus)
   ========================================================================== */
.azufa-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--azufa-space-4); }

.azufa-field-label {
  font-size: var(--azufa-font-size-sm);
  font-weight: 600;
  color: var(--azufa-text);
}
.azufa-field-label .azufa-field-required { color: var(--azufa-danger-text); margin-left: 2px; }

.azufa-field-help {
  font-size: var(--azufa-font-size-xs);
  color: var(--azufa-text-muted);
  line-height: var(--azufa-line-height-normal);
}

/* Etat erreur -- jamais la couleur seule : icone + libelle texte obligatoires
   dans le markup consommateur (cf. commentaire plus bas), la bordure rouge
   n'est qu'un renfort visuel secondaire. */
.azufa-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--azufa-font-size-xs);
  font-weight: 600;
  color: var(--azufa-danger-text);
  line-height: var(--azufa-line-height-normal);
}
.azufa-field-error::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--azufa-danger-text);
  color: var(--azufa-white);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.azufa-field.is-invalid .azufa-input,
.azufa-field.is-invalid .azufa-textarea,
.azufa-field.is-invalid .azufa-select,
.azufa-input.is-invalid,
.azufa-textarea.is-invalid,
.azufa-select.is-invalid {
  border-color: var(--azufa-danger-text);
  background: var(--azufa-danger-bg);
}
.azufa-field.is-invalid .azufa-input:focus,
.azufa-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(184, 21, 21, 0.12);
}

.azufa-input:hover:not(:disabled) { border-color: var(--azufa-text-muted); }
.azufa-input:disabled,
.azufa-input.is-disabled {
  background: var(--azufa-pearl);
  color: var(--azufa-text-muted);
  cursor: not-allowed;
}

.azufa-textarea {
  width: 100%;
  min-height: 110px;
  padding: 10px 12px;
  font-size: var(--azufa-font-size-base);
  font-family: var(--azufa-font-body);
  line-height: var(--azufa-line-height-normal);
  color: var(--azufa-text);
  background: var(--azufa-white);
  border: 1px solid var(--azufa-card-border);
  border-radius: var(--azufa-radius-sm);
  resize: vertical;
}
.azufa-textarea:focus {
  outline: none;
  border-color: var(--azufa-green);
  box-shadow: 0 0 0 3px rgba(var(--azufa-green-rgb), 0.15);
}
.azufa-textarea:hover:not(:disabled) { border-color: var(--azufa-text-muted); }
.azufa-textarea:disabled { background: var(--azufa-pearl); color: var(--azufa-text-muted); cursor: not-allowed; }

.azufa-select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: var(--azufa-font-size-base);
  font-family: var(--azufa-font-body);
  color: var(--azufa-text);
  background: var(--azufa-white);
  border: 1px solid var(--azufa-card-border);
  border-radius: var(--azufa-radius-sm);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.azufa-select:focus {
  outline: none;
  border-color: var(--azufa-green);
  box-shadow: 0 0 0 3px rgba(var(--azufa-green-rgb), 0.15);
}
.azufa-select:disabled { background-color: var(--azufa-pearl); color: var(--azufa-text-muted); cursor: not-allowed; }

/* ==========================================================================
   3. Checkbox / Radio / Switch -- input natif masque visuellement (jamais
   display:none, toujours accessible au clavier/lecteur d'ecran) + label
   stylise. Anneau de focus sur l'input, pas seulement au survol de la souris.
   ========================================================================== */
.azufa-checkbox,
.azufa-radio,
.azufa-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--azufa-font-size-base);
  color: var(--azufa-text);
  user-select: none;
}

.azufa-checkbox__input,
.azufa-radio__input,
.azufa-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.azufa-checkbox__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--azufa-card-border);
  border-radius: 5px;
  background: var(--azufa-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.azufa-checkbox__box::after {
  content: '';
  width: 10px;
  height: 7px;
  border-left: 2px solid var(--azufa-white);
  border-bottom: 2px solid var(--azufa-white);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.1s ease;
}
.azufa-checkbox__input:checked + .azufa-checkbox__box {
  background: var(--azufa-green);
  border-color: var(--azufa-green);
}
.azufa-checkbox__input:checked + .azufa-checkbox__box::after { transform: rotate(-45deg) scale(1); }
.azufa-checkbox__input:focus-visible + .azufa-checkbox__box,
.azufa-radio__input:focus-visible + .azufa-radio__circle,
.azufa-switch__input:focus-visible + .azufa-switch__track {
  outline: 2px solid var(--azufa-green);
  outline-offset: 2px;
}
.azufa-checkbox__input:disabled + .azufa-checkbox__box { opacity: 0.5; cursor: not-allowed; }

.azufa-radio__circle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--azufa-card-border);
  border-radius: 50%;
  background: var(--azufa-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.azufa-radio__circle::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--azufa-green);
  transform: scale(0);
  transition: transform 0.1s ease;
}
.azufa-radio__input:checked + .azufa-radio__circle { border-color: var(--azufa-green); }
.azufa-radio__input:checked + .azufa-radio__circle::after { transform: scale(1); }
.azufa-radio__input:disabled + .azufa-radio__circle { opacity: 0.5; cursor: not-allowed; }

/* Switch -- piste + poignee. L'etat est double code (position ET couleur),
   et le texte "Active/Inactive" porte par .azufa-switch__state dans le
   markup consommateur (non genere ici) complete le cue visuel. */
.azufa-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: var(--azufa-radius-full);
  background: var(--azufa-card-border);
  transition: background 0.15s ease;
}
.azufa-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--azufa-white);
  box-shadow: var(--azufa-shadow-xs);
  transition: transform 0.15s ease;
}
.azufa-switch__input:checked + .azufa-switch__track { background: var(--azufa-green); }
.azufa-switch__input:checked + .azufa-switch__track::after { transform: translateX(18px); }
.azufa-switch__input:disabled + .azufa-switch__track { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   4. Carte -- extension de .azufa-card (base deja definie), + carte stat
   generique (distincte de .azufa-card-kpi deja existante dans le cockpit
   employeur -- celle-ci est la version publique/generique, meme langage
   visuel, bordure haute en moins pour rester sobre hors cockpit).
   ========================================================================== */
.azufa-card-hover {
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.azufa-card-hover:hover {
  box-shadow: var(--azufa-shadow-card-hover);
  border-color: var(--azufa-card-border-hover);
  transform: translateY(-2px);
}
.azufa-card-hover:focus-visible {
  outline: 2px solid var(--azufa-green);
  outline-offset: 2px;
}

.azufa-stat-card {
  background: var(--azufa-white);
  border: 1px solid var(--azufa-card-border);
  border-radius: var(--azufa-radius-md);
  box-shadow: var(--azufa-shadow-xs);
  padding: var(--azufa-space-4);
}
.azufa-stat-card__label {
  font-size: var(--azufa-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--azufa-text-muted);
  margin: 0 0 var(--azufa-space-1);
}
.azufa-stat-card__value {
  font-family: var(--azufa-font-heading);
  font-weight: 800;
  font-size: var(--azufa-font-size-3xl);
  line-height: var(--azufa-line-height-tight);
  color: var(--azufa-green);
  margin: 0;
}
.azufa-stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--azufa-font-size-xs);
  font-weight: 600;
  margin-top: var(--azufa-space-1);
  color: var(--azufa-text-muted);
}
.azufa-stat-card__trend--up { color: var(--azufa-success-text); }
.azufa-stat-card__trend--down { color: var(--azufa-danger-text); }

/* ==========================================================================
   5. Alerte / Toast -- .azufa-alert distinct du `.alert` local non prefixe
   trouve dans account_settings.html / account_delete.html (styles inline,
   hors systeme -- non touche a cette etape, a migrer en etape 4-7).
   ========================================================================== */
.azufa-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--azufa-space-3) var(--azufa-space-4);
  border-radius: var(--azufa-radius-sm);
  border: 1px solid transparent;
  font-size: var(--azufa-font-size-sm);
  line-height: var(--azufa-line-height-normal);
}
.azufa-alert__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.azufa-alert__title { font-weight: 700; margin: 0 0 2px; }
.azufa-alert__text { margin: 0; }

.azufa-alert--info { background: var(--azufa-blue-pale); color: var(--azufa-blue-pale-text); border-color: rgba(44, 82, 130, 0.25); }
.azufa-alert--success { background: var(--azufa-success-bg); color: var(--azufa-success-text); border-color: rgba(20, 108, 46, 0.25); }
.azufa-alert--warning { background: var(--azufa-warning-bg); color: var(--azufa-warning-text); border-color: rgba(138, 97, 0, 0.25); }
.azufa-alert--error { background: var(--azufa-danger-bg); color: var(--azufa-danger-text); border-color: rgba(163, 21, 21, 0.25); }

/* Toast -- empile en bas/droite, au-dessus des modales (z-toast > z-modal). */
.azufa-toast-container {
  position: fixed;
  right: var(--azufa-space-5);
  bottom: var(--azufa-space-5);
  z-index: var(--azufa-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--azufa-space-2);
  max-width: 360px;
}
.azufa-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--azufa-space-3) var(--azufa-space-4);
  border-radius: var(--azufa-radius-md);
  background: var(--azufa-green);
  color: var(--azufa-white);
  box-shadow: var(--azufa-shadow-lg);
  font-size: var(--azufa-font-size-sm);
  animation: azufa-toast-in 0.2s ease;
}
@keyframes azufa-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.azufa-toast--success { background: #146C2E; }
.azufa-toast--warning { background: #8A6100; }
.azufa-toast--error { background: var(--azufa-danger-text); }
.azufa-toast__close {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
  padding: 2px;
}
.azufa-toast__close:hover { opacity: 1; }
.azufa-toast__close:focus-visible { outline: 2px solid var(--azufa-white); outline-offset: 2px; }

/* ==========================================================================
   6. Table -- bordures fines, option zebre, wrapper scroll horizontal.
   ========================================================================== */
.azufa-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--azufa-card-border);
  border-radius: var(--azufa-radius-md);
}
.azufa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--azufa-font-size-sm);
  background: var(--azufa-white);
}
.azufa-table th,
.azufa-table td {
  padding: 10px var(--azufa-space-4);
  text-align: left;
  border-bottom: 1px solid var(--azufa-card-border);
  vertical-align: middle;
}
.azufa-table th {
  font-weight: 700;
  font-size: var(--azufa-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--azufa-text-muted);
  background: var(--azufa-pearl);
  white-space: nowrap;
}
.azufa-table tbody tr:last-child td { border-bottom: none; }
.azufa-table tbody tr:hover { background: rgba(var(--azufa-green-rgb), 0.03); }
.azufa-table--zebra tbody tr:nth-child(even) { background: var(--azufa-pearl); }
.azufa-table--zebra tbody tr:nth-child(even):hover { background: rgba(var(--azufa-green-rgb), 0.05); }
.azufa-table a { color: var(--azufa-green); }
.azufa-table caption {
  text-align: left;
  padding: var(--azufa-space-3) var(--azufa-space-4);
  font-size: var(--azufa-font-size-xs);
  color: var(--azufa-text-muted);
}

/* ==========================================================================
   7. Pagination -- distincte du `.pagination` local non prefixe trouve dans
   employers/talent_search.html (styles inline hex, hors systeme, non
   touche a cette etape).
   ========================================================================== */
.azufa-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--azufa-space-5);
  list-style: none;
  padding: 0;
}
.azufa-pagination__item { display: flex; }
.azufa-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--azufa-radius-sm);
  border: 1px solid var(--azufa-card-border);
  background: var(--azufa-white);
  color: var(--azufa-text);
  font-size: var(--azufa-font-size-sm);
  font-weight: 600;
  text-decoration: none;
}
.azufa-pagination__link:hover { border-color: var(--azufa-green); color: var(--azufa-green); }
.azufa-pagination__link:focus-visible { outline: 2px solid var(--azufa-green); outline-offset: 2px; }
.azufa-pagination__link.is-active {
  background: var(--azufa-green);
  border-color: var(--azufa-green);
  color: var(--azufa-white);
  cursor: default;
}
.azufa-pagination__link.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   8. Modal / Drawer lateral -- utilisent --azufa-z-modal.
   NOTE IMPORTANTE (hors perimetre CSS) : tout template qui instancie
   .azufa-modal ou .azufa-side-drawer doit porter aria-modal="true",
   role="dialog", aria-labelledby, et implementer son propre petit
   focus-trap JS (focus initial + Tab/Shift-Tab boucles + fermeture sur
   Echap) -- cette feuille ne fournit que l'habillage visuel, jamais la
   logique d'interaction.
   `.azufa-side-drawer` (et non `.azufa-drawer`) : le nom `.azufa-drawer`
   est deja pris par le tiroir de navigation mobile de
   cockpit-components.css (panneau sidebar gauche, z-index fixe 90/91) --
   reutiliser ce nom aurait silencieusement ecrase son comportement pour
   tout gabarit qui charge les deux feuilles (base_employer.html). Celui-ci
   est un tiroir de CONTENU generique (fiche detail, filtre avance, etc.),
   ancre a droite par defaut.
   ========================================================================== */
.azufa-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--azufa-z-modal);
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--azufa-space-4);
}
.azufa-modal-backdrop.is-open { display: flex; }

.azufa-modal {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--azufa-white);
  border-radius: var(--azufa-radius-lg);
  box-shadow: var(--azufa-shadow-lg);
  padding: var(--azufa-space-5);
}
.azufa-modal--sm { max-width: 400px; }
.azufa-modal--lg { max-width: 760px; }
/* Variante danger (confirmation destructrice) -- accent visuel uniquement,
   le bouton d'action principal doit utiliser la classe .azufa-btn-danger
   existante (cockpit-components.css), jamais .azufa-btn-primary ici. */
.azufa-modal--danger { border-top: 4px solid var(--azufa-danger-text); }

.azufa-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--azufa-space-3);
  margin-bottom: var(--azufa-space-4);
}
.azufa-modal__title {
  font-family: var(--azufa-font-heading);
  font-weight: 700;
  font-size: var(--azufa-font-size-xl);
  color: var(--azufa-green);
  margin: 0;
}
.azufa-modal__body {
  font-size: var(--azufa-font-size-base);
  line-height: var(--azufa-line-height-normal);
  color: var(--azufa-text);
}
.azufa-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--azufa-space-3);
  margin-top: var(--azufa-space-5);
}

/* Tiroir de contenu generique, ancre a droite. */
.azufa-side-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--azufa-z-modal);
  background: rgba(15, 23, 42, 0.45);
  display: none;
}
.azufa-side-drawer-backdrop.is-open { display: block; }
.azufa-side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--azufa-z-modal) + 1);
  width: 420px;
  max-width: 92vw;
  background: var(--azufa-white);
  box-shadow: var(--azufa-shadow-lg);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.azufa-side-drawer.is-open { transform: translateX(0); }
.azufa-side-drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.azufa-side-drawer--left.is-open { transform: translateX(0); }
.azufa-side-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--azufa-space-3);
  padding: var(--azufa-space-4) var(--azufa-space-5);
  border-bottom: 1px solid var(--azufa-card-border);
}
.azufa-side-drawer__title {
  font-family: var(--azufa-font-heading);
  font-weight: 700;
  font-size: var(--azufa-font-size-lg);
  color: var(--azufa-green);
  margin: 0;
}
.azufa-side-drawer__body { padding: var(--azufa-space-5); flex: 1; }
.azufa-side-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--azufa-space-3);
  padding: var(--azufa-space-4) var(--azufa-space-5);
  border-top: 1px solid var(--azufa-card-border);
}

/* ==========================================================================
   9. Tabs / Accordion / Breadcrumb / Dropdown -- structurels, sans machine
   a etats JS. L'etat actif suit la convention `.is-active` deja en usage
   (azufa-subtabs, azufa-filter-chip, azufa-mobile-tabs, azufa-vtabs) pour
   qu'un futur script generique puisse cibler .is-active partout a la fois.
   ========================================================================== */
.azufa-tabs__list {
  display: flex;
  gap: var(--azufa-space-2);
  border-bottom: 1px solid var(--azufa-card-border);
  overflow-x: auto;
}
.azufa-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--azufa-space-4);
  font-size: var(--azufa-font-size-sm);
  font-weight: 600;
  color: var(--azufa-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.azufa-tabs__tab:hover { color: var(--azufa-green); }
.azufa-tabs__tab:focus-visible { outline: 2px solid var(--azufa-green); outline-offset: 2px; }
.azufa-tabs__tab.is-active { color: var(--azufa-green); border-bottom-color: var(--azufa-green); }
.azufa-tabs__panel { display: none; padding-top: var(--azufa-space-4); }
.azufa-tabs__panel.is-active { display: block; }

/* Accordeon -- <details>/<summary> natifs (pas de JS requis), meme
   vocabulaire de chevron rotatif que .azufa-sidenav__subgroup existant. */
.azufa-accordion { border: 1px solid var(--azufa-card-border); border-radius: var(--azufa-radius-md); overflow: hidden; }
.azufa-accordion-item { border-bottom: 1px solid var(--azufa-card-border); }
.azufa-accordion-item:last-child { border-bottom: none; }
.azufa-accordion-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--azufa-space-3);
  padding: var(--azufa-space-4);
  font-weight: 600;
  font-size: var(--azufa-font-size-base);
  color: var(--azufa-text);
  cursor: pointer;
  list-style: none;
  background: var(--azufa-white);
}
.azufa-accordion-item__trigger::-webkit-details-marker { display: none; }
.azufa-accordion-item__trigger:focus-visible { outline: 2px solid var(--azufa-green); outline-offset: -2px; }
.azufa-accordion-item__icon {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--azufa-text-muted);
  border-bottom: 2px solid var(--azufa-text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.azufa-accordion-item[open] .azufa-accordion-item__icon { transform: rotate(-135deg); }
.azufa-accordion-item__content {
  padding: 0 var(--azufa-space-4) var(--azufa-space-4);
  font-size: var(--azufa-font-size-sm);
  color: var(--azufa-text-muted);
  line-height: var(--azufa-line-height-normal);
}

/* Breadcrumb */
.azufa-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 var(--azufa-space-4); }
.azufa-breadcrumb__item { display: flex; align-items: center; gap: 6px; font-size: var(--azufa-font-size-xs); color: var(--azufa-text-muted); }
.azufa-breadcrumb__item:not(:last-child)::after { content: '/'; color: var(--azufa-card-border); margin-left: 6px; }
.azufa-breadcrumb__link { color: var(--azufa-text-muted); text-decoration: none; }
.azufa-breadcrumb__link:hover { color: var(--azufa-green); text-decoration: underline; }
.azufa-breadcrumb__link:focus-visible { outline: 2px solid var(--azufa-green); outline-offset: 2px; }
.azufa-breadcrumb__item--current { color: var(--azufa-text); font-weight: 600; }

/* Dropdown -- menu flottant generique. Toggle `.is-open` sur le wrapper
   (meme pattern que .org-dropdown/.open local de
   partners/_module_topbar.html, non touche, mais convention renommee en
   `.is-open` pour rester alignee sur le reste du systeme). */
.azufa-dropdown { position: relative; display: inline-block; }
.azufa-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.azufa-dropdown__trigger:focus-visible { outline: 2px solid var(--azufa-green); outline-offset: 2px; }
.azufa-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  z-index: var(--azufa-z-dropdown);
  background: var(--azufa-white);
  border: 1px solid var(--azufa-card-border);
  border-radius: var(--azufa-radius-md);
  box-shadow: var(--azufa-shadow-md);
  padding: 6px;
  display: none;
}
.azufa-dropdown.is-open .azufa-dropdown__menu { display: block; }
.azufa-dropdown__menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--azufa-radius-sm);
  font-size: var(--azufa-font-size-sm);
  color: var(--azufa-text);
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.azufa-dropdown__menu-item:hover { background: var(--azufa-pearl); }
.azufa-dropdown__menu-item:focus-visible { outline: 2px solid var(--azufa-green); outline-offset: -2px; }
.azufa-dropdown__divider { height: 1px; background: var(--azufa-card-border); margin: 6px 0; }

/* ==========================================================================
   10. Loading / Error state -- completent Empty state et Skeleton deja
   existants (cockpit-components.css), meme gabarit centre.
   ========================================================================== */
.azufa-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--azufa-space-7) var(--azufa-space-4);
  color: var(--azufa-text-muted);
}
.azufa-loading-state__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--azufa-card-border);
  border-top-color: var(--azufa-green);
  border-radius: 50%;
  margin-bottom: var(--azufa-space-4);
  animation: azufa-spin 0.8s linear infinite;
}
.azufa-loading-state__text { font-size: var(--azufa-font-size-sm); margin: 0; }

.azufa-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--azufa-space-7) var(--azufa-space-4);
  color: var(--azufa-text-muted);
}
.azufa-error-state__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--azufa-radius-full);
  background: var(--azufa-danger-bg);
  color: var(--azufa-danger-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--azufa-space-4);
}
.azufa-error-state__icon svg { width: 26px; height: 26px; }
.azufa-error-state__title {
  font-family: var(--azufa-font-heading);
  font-weight: 700;
  font-size: var(--azufa-font-size-lg);
  color: var(--azufa-text);
  margin: 0 0 var(--azufa-space-2);
}
.azufa-error-state__desc { font-size: var(--azufa-font-size-sm); max-width: 380px; margin: 0 0 var(--azufa-space-4); }

/* ==========================================================================
   11. Numerotation en bandeau ("so funktioniert's", reference Korridor) --
   DISTINCT de .azufa-stepper existant (cockpit-components.css : progression
   active/done d'un assistant multi-etapes, avec etats is-active/is-done).
   Celui-ci est un bandeau EXPLICATIF statique (marketing, "comment ca
   marche" en 3-4 etapes), sans etat actif -- usage et semantique differents,
   d'ou le nom distinct.
   ========================================================================== */
.azufa-step-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--azufa-space-5);
}
.azufa-step {
  display: flex;
  flex-direction: column;
  gap: var(--azufa-space-2);
}
.azufa-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--azufa-radius-full);
  background: var(--azufa-green);
  color: var(--azufa-white);
  font-family: var(--azufa-font-heading);
  font-weight: 800;
  font-size: var(--azufa-font-size-lg);
  margin-bottom: 4px;
}
.azufa-step__title {
  font-family: var(--azufa-font-heading);
  font-weight: 700;
  font-size: var(--azufa-font-size-lg);
  color: var(--azufa-green);
  margin: 0;
}
.azufa-step__desc {
  font-size: var(--azufa-font-size-sm);
  line-height: var(--azufa-line-height-normal);
  color: var(--azufa-text-muted);
  margin: 0;
}

/* ==========================================================================
   12. Filter chip / pill-nav -- NON RECREE ICI.
   `.azufa-filter-chip` (+ `.is-active`) existe DEJA dans
   cockpit-components.css et couvre exactement ce besoin (pilule filtrable,
   meme langage visuel que le mockup Korridor). Ajouter un second systeme
   `.azufa-chip` aurait fragmente la bibliotheque en deux composants
   visuellement identiques -- volontairement omis, cf. rapport de mission.
   ========================================================================== */