/* ============================================================
   Loader Anthony IT Solutions
   Anneau de progression + drapeaux des langues du site en orbite.
   Utilisé par les écrans de chargement de route (loading.tsx).
   ============================================================ */

.ais-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  min-height: 60vh;
  padding: 3rem 1rem;
  text-align: center;
}

.ais-loader--inline {
  min-height: 0;
  padding: 2rem 1rem;
}

.ais-loader__ring {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
}

/* Piste + arc qui tourne (masque conique : pas d'image, pas de SVG) */
.ais-loader__ring::before,
.ais-loader__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.ais-loader__ring::before {
  border: 3px solid rgba(22, 58, 114, 0.12);
}

.ais-loader__ring::after {
  border: 3px solid transparent;
  border-top-color: #163a72;
  border-right-color: rgba(22, 58, 114, 0.45);
  animation: ais-loader-spin 1.1s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}

/* Orbite de drapeaux, à l'intérieur de l'anneau */
.ais-loader__orbit {
  --ais-loader-flags: 6;
  --ais-loader-flag: 18px;
  --ais-loader-radius: 38px;
  position: absolute;
  inset: 0;
  animation: ais-loader-orbit 9s linear infinite;
}

.ais-loader__flag {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ais-loader-flag);
  height: var(--ais-loader-flag);
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 39, 73, 0.18);
  /* Drapeaux ronds : pas de contre-rotation nécessaire. */
  transform: translate(-50%, -50%)
    rotate(calc(var(--i) * 360deg / var(--ais-loader-flags)))
    translate(var(--ais-loader-radius))
    rotate(calc(var(--i) * -360deg / var(--ais-loader-flags)));
}

.ais-loader__flag .fi {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.ais-loader__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ais-loader__label strong {
  color: #0f2749;
  font-size: 0.98rem;
  font-weight: 800;
}

.ais-loader__label span {
  color: #64748b;
  font-size: 0.84rem;
}

/* Barre de progression indéterminée sous le texte */
.ais-loader__bar {
  position: relative;
  width: 160px;
  height: 4px;
  border-radius: 999px;
  background: rgba(22, 58, 114, 0.12);
  overflow: hidden;
}

.ais-loader__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  border-radius: 999px;
  background: #163a72;
  animation: ais-loader-slide 1.3s ease-in-out infinite;
}

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

@keyframes ais-loader-orbit {
  to { transform: rotate(360deg); }
}

@keyframes ais-loader-slide {
  0% { left: -45%; }
  100% { left: 100%; }
}

/* Mode sombre */
[data-theme="dark"] .ais-loader__ring::before,
[data-style="dark"] .ais-loader__ring::before {
  border-color: rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .ais-loader__ring::after,
[data-style="dark"] .ais-loader__ring::after {
  border-top-color: #3b82f6;
  border-right-color: rgba(59, 130, 246, 0.45);
}

[data-theme="dark"] .ais-loader__label strong,
[data-style="dark"] .ais-loader__label strong { color: #e2e8f0; }

[data-theme="dark"] .ais-loader__label span,
[data-style="dark"] .ais-loader__label span { color: #94a3b8; }

[data-theme="dark"] .ais-loader__bar,
[data-style="dark"] .ais-loader__bar { background: rgba(148, 163, 184, 0.2); }

[data-theme="dark"] .ais-loader__bar::after,
[data-style="dark"] .ais-loader__bar::after { background: #3b82f6; }

/* Sur fond bleu (app mobile, bandeaux hero) */
.ais-loader--on-dark .ais-loader__ring::before { border-color: rgba(255, 255, 255, 0.2); }
.ais-loader--on-dark .ais-loader__ring::after {
  border-top-color: #fff;
  border-right-color: rgba(255, 255, 255, 0.5);
}
.ais-loader--on-dark .ais-loader__label strong { color: #fff; }
.ais-loader--on-dark .ais-loader__label span { color: rgba(255, 255, 255, 0.72); }
.ais-loader--on-dark .ais-loader__bar { background: rgba(255, 255, 255, 0.18); }
.ais-loader--on-dark .ais-loader__bar::after { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .ais-loader__ring::after,
  .ais-loader__orbit,
  .ais-loader__bar::after {
    animation: none;
  }
  .ais-loader__bar::after { left: 0; width: 100%; opacity: 0.5; }
}