/* ProAdmin : l'animation d'attente (assets/js/attente.js). Une comète verte qui
   tourne vite avec sa traînée, et des traits de vitesse au centre. */

.pa-attente {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 140px; padding: 24px 12px; color: var(--vert, #4cb81a);
}
.pa-attente--pleine { min-height: 46vh; }
.pa-attente--compacte { min-height: 0; padding: 10px 0; }
.pa-attente--compacte .pa-comete { width: 30px; height: 30px; }

.pa-comete { width: 58px; height: 58px; overflow: visible; }
.pa-g1 { stop-color: var(--citron, #b4f21a); }
.pa-g2 { stop-color: var(--vert, #4cb81a); }
.pa-piste { fill: none; stroke: var(--neutre, #eef2ea); stroke-width: 4; }
.pa-tete, .pa-trainee { fill: none; stroke-width: 4; stroke-linecap: round; }
/* L'arc et sa traînée finissent au même point (18 % du cercle) : la tête mène. */
.pa-tete { stroke-dasharray: 18 82; }
.pa-trainee { stroke: var(--vert, #4cb81a); }
.pa-trainee--pres { opacity: .38; stroke-dasharray: 30 70; stroke-dashoffset: 12; }
.pa-trainee--loin { opacity: .14; stroke-dasharray: 48 52; stroke-dashoffset: 30; }
.pa-point { fill: var(--citron, #b4f21a); filter: drop-shadow(0 0 3px var(--citron, #b4f21a)); }

.pa-tourne { transform-origin: 24px 24px; animation: pa-tour .7s linear infinite; }
.pa-vitesse path { fill: none; stroke: var(--vert-fonce, #2f8a12); stroke-width: 2.4; stroke-linecap: round;
  animation: pa-souffle .7s cubic-bezier(.4, 0, .2, 1) infinite; }
.pa-vitesse path:nth-child(2) { animation-delay: .12s; }
.pa-vitesse path:nth-child(3) { animation-delay: .24s; }

@keyframes pa-tour { to { transform: rotate(360deg); } }
@keyframes pa-souffle {
  0% { transform: translateX(-6px); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(7px); opacity: 0; }
}

.pa-legende { color: var(--doux, #66755f); font-weight: 600; font-size: .92rem; text-align: center; }
.pa-lu { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Dans un bouton : à la couleur du texte du bouton. */
.pa-mini { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pa-comete--mini { width: 18px; height: 18px; flex: none; }
.pa-mini .pa-piste { stroke: currentColor; opacity: .22; }
.pa-mini .pa-tete, .pa-mini .pa-trainee { stroke: currentColor; }
.pa-mini .pa-g1, .pa-mini .pa-g2 { stop-color: currentColor; }
.pa-mini .pa-point { fill: currentColor; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .pa-tourne { animation-duration: 2.4s; }
  .pa-vitesse path { animation: none; opacity: .55; }
}