/* =====================================================================
   Composants réutilisables
   ===================================================================== */

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--cible-min);
  padding: 0 var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree), border-color var(--duree), color var(--duree);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primaire { background: var(--c-primaire); color: var(--c-sur-primaire); }
.btn-primaire:hover:not(:disabled) { background: var(--c-primaire-fort); color: var(--c-sur-primaire); }

.btn-secondaire { background: var(--c-surface); color: var(--c-texte); border-color: var(--c-trait-fort); }
.btn-secondaire:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-texte); }

.btn-danger { background: var(--c-surface); color: var(--c-danger); border-color: var(--c-danger-fond); }
.btn-danger:hover:not(:disabled) { background: var(--c-danger-fond); }

.btn-discret { background: transparent; color: var(--c-texte-2); }
.btn-discret:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-texte); }

.btn-large { min-height: 56px; font-size: var(--t-md); border-radius: var(--r-md); }
.btn-bloc { width: 100%; }

/* Indicateur de chargement dans un bouton */
.btn[aria-busy="true"]::before {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r-rond);
  animation: tourner 0.8s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

/* ---------- Champs ---------- */
.champ { display: flex; flex-direction: column; gap: var(--e-2); }
.champ label { font-size: var(--t-sm); font-weight: 600; color: var(--c-texte-2); }
.champ .aide { font-size: var(--t-xs); color: var(--c-texte-doux); }

.saisie {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--e-4);
  border: 1px solid var(--c-trait-fort);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-texte);
  font-size: var(--t-md);
  transition: border-color var(--duree), box-shadow var(--duree);
}
.saisie::placeholder { color: var(--c-texte-doux); }
.saisie:focus { outline: none; border-color: var(--c-primaire); box-shadow: 0 0 0 4px var(--c-primaire-doux); }
.saisie[aria-invalid="true"] { border-color: var(--c-danger); }

/* Code à 6 chiffres (MFA) */
.saisie-code {
  min-height: 64px;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  padding-left: 0.5em; /* compense l'espacement du dernier chiffre */
  font-variant-numeric: tabular-nums;
}

/* ---------- Cartes ---------- */
.carte {
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-md);
  padding: var(--e-5);
  box-shadow: var(--ombre);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 2px 10px;
  border-radius: var(--r-rond);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge-succes    { background: var(--c-succes-fond);    color: var(--c-succes-texte); }
.badge-attention { background: var(--c-attention-fond); color: var(--c-attention-texte); }
.badge-danger    { background: var(--c-danger-fond);    color: var(--c-danger-texte); }
.badge-neutre    { background: var(--c-surface-2);      color: var(--c-texte-2); }
.badge-primaire  { background: var(--c-primaire-doux);  color: var(--c-primaire-texte); }

/* ---------- Messages ---------- */
.message {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
}
.message-erreur { background: var(--c-danger-fond);    color: var(--c-danger-texte); }
.message-info   { background: var(--c-primaire-doux);  color: var(--c-primaire-texte); }
.message-succes { background: var(--c-succes-fond);    color: var(--c-succes-texte); }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  max-width: min(420px, calc(100vw - 2rem));
}
.toast {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-sm);
  background: var(--c-texte);
  color: var(--c-fond);
  font-size: var(--t-sm);
  font-weight: 500;
  box-shadow: var(--ombre-haute);
  animation: apparaitre var(--duree) ease-out;
}
.toast-erreur { background: var(--c-danger); color: #FFFFFF; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Écran de chargement ---------- */
.chargement {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-texte-doux);
  font-size: var(--t-sm);
}

/* ---------- Onglets ---------- */
.onglets {
  display: flex; flex-wrap: wrap; gap: var(--e-1);
  border-bottom: 1px solid var(--c-trait);
}
.onglet {
  min-height: var(--cible-min);
  padding: 0 var(--e-4);
  border: 0; border-bottom: 3px solid transparent;
  background: none;
  color: var(--c-texte-doux);
  font-size: var(--t-sm); font-weight: 600;
  cursor: pointer;
}
.onglet:hover { color: var(--c-texte); }
.onglet[aria-selected="true"] { color: var(--c-primaire-texte); border-bottom-color: var(--c-primaire); }

/* ---------- Tableaux ---------- */
.tableau-boite { overflow-x: auto; border: 1px solid var(--c-trait); border-radius: var(--r-md); background: var(--c-surface); }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tableau th {
  text-align: left; font-weight: 600; font-size: var(--t-xs);
  color: var(--c-texte-doux); background: var(--c-surface-2);
  padding: var(--e-3) var(--e-4); white-space: nowrap;
}
.tableau td { padding: var(--e-3) var(--e-4); border-top: 1px solid var(--c-trait); vertical-align: middle; }
.tableau tbody tr:hover { background: var(--c-surface-2); }
.tableau .actions { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }
.tableau .actions .btn { min-height: 36px; padding: 0 var(--e-3); }
.tableau-vide { padding: var(--e-8); text-align: center; color: var(--c-texte-doux); }

/* ---------- Formulaires en grille ---------- */
.formulaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-4); align-items: end; }
.formulaire .formulaire-actions { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.case { display: flex; align-items: center; gap: var(--e-2); min-height: 48px; font-size: var(--t-sm); font-weight: 600; color: var(--c-texte-2); }
.case input { width: 20px; height: 20px; accent-color: var(--c-primaire); }
select.saisie { padding-right: var(--e-8); }

/* ---------- Barre d'outils ---------- */
.barre { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: end; justify-content: space-between; }
.barre-filtres { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: end; }
.barre-filtres .champ { min-width: 200px; }
.pagination { display: flex; gap: var(--e-2); align-items: center; justify-content: flex-end; font-size: var(--t-sm); color: var(--c-texte-doux); }

/* ---------- Boîtes de dialogue ---------- */
dialog.dialogue {
  width: min(560px, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--c-trait);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-texte);
  box-shadow: var(--ombre-haute);
}
dialog.dialogue::backdrop { background: rgba(15, 23, 42, 0.55); }
.dialogue-contenu { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-5); }
.dialogue-pied { display: flex; justify-content: flex-end; gap: var(--e-2); flex-wrap: wrap; }

/* ---------- Cases à cocher dans les tableaux ---------- */
.tableau .col-case { width: 48px; }
.tableau input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--c-primaire); }
.vignette {
  width: 36px; height: 44px; border-radius: 6px; object-fit: cover;
  background: var(--c-surface-2); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); color: var(--c-texte-doux);
}
.rapport { max-height: 220px; overflow: auto; font-size: var(--t-sm); margin: 0; padding-left: var(--e-5); }
.apercu-csv { font-size: var(--t-sm); }