/**
 * ============================================================================
 * Fichier : /qcm.gypaete-parapente.ch/css/qcm_loader.css
 * Créé le : 2026-03-04 13:27 (Europe/Zurich)
 *
 * Loader QCM - version "logo + anneau" (sans rectangle)
 * - Logo : /images/logo/gypaetepetit.png
 * - Anneau conic-gradient en rotation autour du logo
 * - Respecte prefers-reduced-motion
 * ============================================================================
 */

/* Overlay plein écran */
#qcmLoaderOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;

  /* Fond : même esprit que ton UI, mais plus "propre" */
  background:
    radial-gradient(1200px 600px at 50% 18%, rgba(120,70,255,0.22), transparent 62%),
    radial-gradient(800px 420px at 80% 75%, rgba(255,255,255,0.06), transparent 60%),
    rgba(8, 10, 16, 0.62);

  backdrop-filter: blur(3px);
}

#qcmLoaderOverlay.is-visible {
  display: flex;
}

/* Conteneur central (PAS de rectangle) */
.qcmLoaderStage {
  width: min(520px, calc(100vw - 28px));
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 6px 0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,0.92);
  text-align: center;

  animation: qcmStageIn .25s ease-out both;
}

@keyframes qcmStageIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Brand : logo + anneau */
.qcmLoaderBrand {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.qcmLoaderLogoWrap {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}

.qcmLoaderLogo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
  transform: translateZ(0);

  /* petit flottement "vol" */
  animation: qcmFloat 1.9s ease-in-out infinite;
}

@keyframes qcmFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Anneau (conic-gradient) qui tourne autour */
.qcmLoaderRing {
  position: absolute;
  inset: 0;
  border-radius: 999px;

  /* Anneau : conic + masque (donut) */
  background: conic-gradient(
    rgba(255,255,255,0.00) 0deg,
    rgba(255,255,255,0.75) 40deg,
    rgba(120,70,255,0.95) 95deg,
    rgba(255,255,255,0.20) 140deg,
    rgba(255,255,255,0.00) 360deg
  );

  /* Découpe en anneau */
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%);
          mask: radial-gradient(circle, transparent 54%, #000 56%);

  filter: drop-shadow(0 10px 20px rgba(120,70,255,0.22));
  animation: qcmSpin 1.05s linear infinite;
}

@keyframes qcmSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Halo doux */
.qcmLoaderLogoWrap::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(120,70,255,0.20), transparent 62%);
  filter: blur(6px);
  animation: qcmPulse 1.25s ease-in-out infinite;
  pointer-events: none;
}

@keyframes qcmPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.05); }
}

/* Badge + timer (pill) */
.qcmLoaderMeta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(20, 22, 34, 0.38);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.qcmLoaderBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.92);
}

.qcmDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow:
    0 0 0 3px rgba(120,70,255,0.22),
    0 0 18px rgba(120,70,255,0.45);
}

.qcmLoaderTimer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 13px;
  opacity: 0.92;
}

/* Message */
.qcmLoaderQuestion {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .1px;
  text-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* "Choix" (A/B/C) sans rectangle */
.qcmChoices {
  width: min(440px, calc(100vw - 44px));
  display: grid;
  gap: 10px;
}

.qcmChoice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;

  /* subtil, pas un gros rectangle */
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(2px);
}

.qcmChoiceKey {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(120,70,255,0.22);
  border: 1px solid rgba(120,70,255,0.38);
}

.qcmChoiceText {
  text-align: left;
  font-size: 14px;
  opacity: 0.92;
}

/* Progress bar */
.qcmProgressWrap {
  width: min(440px, calc(100vw - 44px));
}

.qcmProgressBar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
}

.qcmProgressFill {
  height: 100%;
  width: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(120,70,255,0.95), rgba(255,255,255,0.75));
  animation: qcmFill 1.15s ease-in-out infinite;
}

@keyframes qcmFill {
  0%   { transform: translateX(-55%); }
  50%  { transform: translateX(35%); }
  100% { transform: translateX(120%); }
}

.qcmLoaderText {
  font-size: 13px;
  opacity: 0.80;
}

/* Accessibilité : réduction des animations */
@media (prefers-reduced-motion: reduce) {
  .qcmLoaderStage,
  .qcmLoaderLogo,
  .qcmLoaderRing,
  .qcmLoaderLogoWrap::after,
  .qcmProgressFill {
    animation: none !important;
  }
}
#qcm-loader {
    position: fixed;
    inset: 0;
    background: rgba(15,15,20,0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.loader-logo {
    position: relative;
    width: 120px;
    height: 120px;
}

.loader-logo img {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 20px;
    left: 20px;
}

.loader-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 4px solid transparent;
    border-top: 4px solid #7c5cff;
    border-radius: 50%;
    animation: qcmSpin 1s linear infinite;
}

@keyframes qcmSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}