/* ====================================================================
   CAP SUR L'AFRIQUE — États de chargement
   ==================================================================== */

/* ── Barre de progression globale ────────────────────────────────── */
.top-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--emeraude), #00b377);
  z-index: 9999; box-shadow: 0 0 10px rgba(0,135,90,.6);
  transition: width .2s ease, opacity .3s ease; opacity: 0;
}
.top-progress.actif { opacity: 1; }

/* ── Spinner boutons (RÉPARÉ) ────────────────────────────────────── */
.btn .btn-label { 
  display: inline-flex; /* Garde l'icône et le texte sur la même ligne */
  align-items: center; 
  gap: .5rem; 
  transition: opacity .25s ease, transform .25s ease; 
}
.btn .btn-spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-label { opacity: 0; transform: translateY(6px); }
.btn.is-loading .btn-spinner { display: flex; }
.btn.is-success .btn-label { opacity: 0; }
.btn.is-success .btn-check { display: flex; }
.btn .btn-check { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }

.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.spinner-emeraude { border-color: rgba(0,135,90,.25); border-top-color: var(--emeraude); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Skeletons avec shimmer ──────────────────────────────────────── */
.skeleton {
  position: relative; overflow: hidden; background: #e8edf2; border-radius: 10px;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-line { height: 12px; margin-bottom: 10px; }
.skeleton-line.w-60 { width: 60%; } .skeleton-line.w-40 { width: 40%; } .skeleton-line.w-80 { width: 80%; }
.skeleton-avatar { width: 56px; height: 56px; border-radius: 50%; }
.skeleton-card { height: 220px; border-radius: var(--rayon-lg); }

/* ── Overlay loader (Le conteneur) ───────────────────────────────── */
.overlay-loader {
  position: fixed; inset: 0; z-index: 9998; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem;
  background: rgba(250,250,248,.85); backdrop-filter: blur(8px);
}
.overlay-loader.actif { display: flex; animation: fadeIn .25s ease; }

/* ── Africa Puzzle Loader (ULTRA-FLUIDE & CONTINU) ───────────────── */
.africa-puzzle-loader {
  position: relative;
  width: 120px;
  height: 130px;
  filter: drop-shadow(0 8px 16px rgba(0, 135, 90, 0.15));
}
.africa-puzzle-loader svg {
  width: 100%;
  height: 100%;
}

/* Style de base des pièces */
.puzzle-piece {
  transform-origin: center;
  stroke: #fafaf8;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  /* Utilisation de 'alternate' pour que le puzzle fasse des aller-retours fluides */
  animation: buildPuzzle 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}

/* Couleurs, points de départ et délais en cascade */
.region-central { 
  fill: #34d399; 
  --startX: 0px; --startY: 30px; 
  animation-delay: 0s; 
}
.region-west { 
  fill: #fcd34d; 
  --startX: -40px; --startY: -20px; 
  animation-delay: 0.15s; 
}
.region-north { 
  fill: #a3d95d; 
  --startX: 0px; --startY: -50px; 
  animation-delay: 0.3s; 
}
.region-east { 
  fill: #f87171; 
  --startX: 40px; --startY: -30px; 
  animation-delay: 0.45s; 
}
.region-south { 
  fill: #fb923c; 
  --startX: 0px; --startY: 50px; 
  animation-delay: 0.6s; 
}
.region-madagascar { 
  fill: #c084fc; 
  --startX: 40px; --startY: 40px; 
  animation-delay: 0.75s; 
}

/* L'animation de construction fluide et infinie */
@keyframes buildPuzzle {
  0% {
    /* État éclaté */
    opacity: 0;
    transform: translate(var(--startX), var(--startY)) scale(0.7) rotate(-15deg);
  }
  25% {
    /* Apparition progressive */
    opacity: 1;
  }
  75%, 100% {
    /* État assemblé (maintien sur la fin de l'animation pour voir la carte) */
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

/* Texte animé sous le puzzle */
.africa-loader-text {
  font-family: 'Poppins', sans-serif; font-size: 0.85rem; font-weight: 700;
  color: var(--emeraude); letter-spacing: 1.5px; text-transform: uppercase;
  animation: textPulse 2s ease-in-out infinite alternate;
}
@keyframes textPulse { 0% { opacity: 0.4; } 100% { opacity: 1; } }

/* ── État "assemblé" — déclenché par JS au beforeunload ─────────────── */
/* Toutes les pièces se placent instantanément (transition rapide) puis restent. */
.africa-puzzle-loader.assembled .puzzle-piece {
  animation: none !important;
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) rotate(0deg) !important;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Chaque pièce prend un micro-délai de stagger pour un snap en cascade beau. */
.africa-puzzle-loader.assembled .region-central  { transition-delay: 0s; }
.africa-puzzle-loader.assembled .region-west     { transition-delay: 0.04s; }
.africa-puzzle-loader.assembled .region-north    { transition-delay: 0.08s; }
.africa-puzzle-loader.assembled .region-east     { transition-delay: 0.12s; }
.africa-puzzle-loader.assembled .region-south    { transition-delay: 0.16s; }
.africa-puzzle-loader.assembled .region-madagascar { transition-delay: 0.20s; }

/* Le texte se fige aussi */
.africa-puzzle-loader.assembled ~ .africa-loader-text {
  animation: none !important;
  opacity: 1 !important;
}