/* Spinner unifié « comète » (V3) pour tout le site.
   Anneau en dégradé conique avec traîne courte + tête ronde (pseudo-élément ::after).
   Réglages par variables CSS :
   - --spinner-size   : diamètre (28px par défaut, 36px dans l'overlay) ;
   - --spinner-stroke : épaisseur du trait (par défaut proportionnelle à la taille, min 3px) ;
   - --spinner-color  : couleur (marque par défaut, blanc dans les boutons pleins). */

:root {
  --spinner-size: 28px;
  --spinner-color: var(--brand, #004777);
}

/* Visuel comète partagé — s'applique aussi aux spinners annexes : toasts,
   auto-save, tableaux (tet), practice-room (prp) et boutons.
   Le garde :empty distingue le `.btn-spinner` porteur direct du spinner
   (span vide) du wrapper admin `.btn-spinner` qui CONTIENT un `.spinner`. */
.spinner,
.loading-spinner,
.toast-spinner,
.auto-save-spinner,
.tet-spinner,
.prp-spinner,
.btn .btn-spinner:empty,
/* Renforcer la spécificité pour éviter les overrides hérités (style avec nav.css) */
body .spinner,
body .loading-spinner,
html body .spinner,
html body .loading-spinner {
  --_stroke: var(--spinner-stroke, max(3px, calc(var(--spinner-size) * 0.14)));
  position: relative;
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: 0; /* neutralise les anciens spinners à bordure */
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 22%,
    color-mix(in srgb, var(--spinner-color) 10%, transparent) 38%,
    var(--spinner-color) 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_stroke)), #000 calc(100% - var(--_stroke) + 0.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--_stroke)), #000 calc(100% - var(--_stroke) + 0.5px));
  animation: spin .9s linear infinite;
  box-shadow: none; /* pas d'ombre portée */
}

/* Disposition historique des spinners « bloc » (centrés).
   Les annexes (toast, boutons…) gardent leur disposition inline dans leur CSS. */
.spinner,
.loading-spinner,
body .spinner,
body .loading-spinner,
html body .spinner,
html body .loading-spinner {
  display: block;
  margin: 8px auto; /* espace haut/bas */
}

/* Tête ronde de la comète (dans la bande visible du mask) */
.spinner::after,
.loading-spinner::after,
.toast-spinner::after,
.auto-save-spinner::after,
.tet-spinner::after,
.prp-spinner::after,
.btn .btn-spinner:empty::after,
html body .spinner::after,
html body .loading-spinner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--_stroke);
  height: var(--_stroke);
  margin-left: calc(var(--_stroke) / -2);
  border-radius: 50%;
  background: var(--spinner-color);
}

/* Spinners d'overlay un peu plus grands par défaut */
.loading-content .loading-spinner { --spinner-size: 36px; }

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

/* Accessibilité : sans rotation, simple respiration d'opacité */
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .loading-spinner,
  .toast-spinner,
  .auto-save-spinner,
  .tet-spinner,
  .prp-spinner,
  .btn .btn-spinner:empty,
  html body .spinner,
  html body .loading-spinner {
    animation: spinner-breathe 2s ease-in-out infinite;
  }
}

@keyframes spinner-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}


/* Réactiver les flèches des inputs numériques (retour au comportement natif) */
.form-input[type="number"],
input[type="number"] {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}