/* ==========================================================================
   base.css — règles transverses du back-office (chargé après les <style> des pages)
   Lot 1 de l'audit design : focus clavier visible, retour au clic, mouvement réduit.
   Ne pas utiliser sur login / verify-2fa / setup-2fa (pages sensibles, traitées à part).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Focus clavier visible
   Contour discret sur les boutons, liens et éléments cliquables.
   Les champs (input, select, textarea) en sont exclus : les pages leur donnent
   déjà une bordure accent au focus, un contour en plus ferait double liseré.
   Le !important garantit que le contour reste visible si une page déclare
   « outline: none » avec une spécificité supérieure.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible,
[role="button"]:focus-visible {
  outline: 1px solid rgba(4, 95, 218, 0.7) !important;
  outline-offset: 1px !important;
}

/* Interrupteurs : l'input réel est invisible (opacity 0, taille 0),
   on reporte donc le contour sur le curseur visible qui le suit */
.toggle input:focus-visible + .toggle-slider {
  outline: 1px solid rgba(4, 95, 218, 0.7);
  outline-offset: 1px;
}

/* Zones d'upload : l'input fichier est transparent et couvre la zone,
   on reporte le contour sur la zone elle-même */
.upload-zone:has(input:focus-visible) {
  outline: 1px solid rgba(4, 95, 218, 0.7);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   2. Retour visuel immédiat au clic
   On utilise la propriété « scale » (et non « transform ») : elle se combine
   avec un éventuel transform existant au lieu de l'écraser.
   Pas de transition : le retour doit être instantané à l'appui.
   -------------------------------------------------------------------------- */
button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="button"]:not(:disabled):active,
[role="button"]:active,
.btn:active,
[class*="btn-"]:not(:disabled):active,
.vis-btn:not(:disabled):active {
  scale: 0.98;
}

/* --------------------------------------------------------------------------
   3. Mouvement réduit
   Si l'utilisateur l'a demandé au niveau du système, les transitions et
   animations deviennent quasi instantanées (l'état final reste appliqué).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. Messages (composant unique pour erreur, succès, info)
   Masqué par défaut, affiché avec la classe .show.
   Accessibilité : role="alert" sur les erreurs, role="status" sur succès et info.
   L'espacement autour du message reste défini par chaque page.
   -------------------------------------------------------------------------- */
.msg {
  display: none;
  padding: 11px 14px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid transparent;
}
.msg.show { display: block; }

.msg--error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.msg--success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
.msg--info {
  background: rgba(4, 95, 218, 0.08);
  border-color: rgba(4, 95, 218, 0.3);
  color: #7eb8ff;
}

/* --------------------------------------------------------------------------
   5. Champ obligatoire manquant (validation des formulaires)
   !important : doit rester visible même quand le champ a le focus
   (les pages colorent la bordure en accent sur :focus).
   -------------------------------------------------------------------------- */
.field-missing {
  border-color: rgba(239, 68, 68, 0.6) !important;
}

/* --------------------------------------------------------------------------
   6. Titres de page
   Définition unique pour toutes les pages qui chargent base.css.
   -------------------------------------------------------------------------- */
h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}