/* ==========================================================================
   Skeleton loader — générique, réutilisable sur n'importe quelle page.

   Usage : ajouter la classe `.sk` à un élément pour lui donner l'effet de
   chargement "shimmer", puis une classe de forme pour définir sa taille :
     .sk-text[.w-25|.w-40|.w-60|.w-75|.w-100]  → ligne de texte
     .sk-title                                  → titre / gros texte
     .sk-circle                                 → avatar / logo rond
     .sk-btn                                    → bouton / pastille
     .sk-img                                    → image / vignette
   Combiner librement avec vos propres dimensions (width/height inline ou
   via une classe dédiée) : `.sk` ne fixe que le fond animé et le radius.
   ========================================================================== */

:root {
  --sk-base: #eef0f6;
  --sk-shine: #f8f9fc;
}

@keyframes sk-shimmer {
  0%   { background-position: -450px 0; }
  100% { background-position: 450px 0; }
}

.sk {
  position: relative;
  display: block;
  background-color: var(--sk-base);
  background-image: linear-gradient(90deg, var(--sk-base) 0px, var(--sk-shine) 60px, var(--sk-base) 120px);
  background-size: 450px 100%;
  background-repeat: no-repeat;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.sk-text  { height: 13px; width: 100%; margin: 0 0 8px; border-radius: 4px; }
.sk-title { height: 20px; width: 55%; margin: 0 0 14px; border-radius: 5px; }
.sk-circle { border-radius: 50%; }
.sk-btn   { display: inline-block; height: 34px; width: 96px; border-radius: 30px; }
.sk-img   { border-radius: 10px; }

.sk-text.w-25  { width: 25%; }
.sk-text.w-40  { width: 40%; }
.sk-text.w-60  { width: 60%; }
.sk-text.w-75  { width: 75%; }
.sk-text.w-100 { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background-image: none; }
}

/* --------------------------------------------------------------------------
   Vitrine partenaires : pastilles de catégories, cartes commerces, carte.
   -------------------------------------------------------------------------- */
.pk-filter-pills .sk-pill { height: 34px; width: 92px; border-radius: 24px; }

.pk-card-skeleton {
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px 0 rgba(219, 219, 219, .3);
}
.pk-card-skeleton .pk-skel-thumb { height: 210px; border-radius: 0; }
.pk-card-skeleton .pk-skel-body { padding: 22px 26px 24px; }
.pk-card-skeleton .pk-skel-body .sk-text:last-child { margin-bottom: 0; }

.pk-skel-map {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  border-radius: 0;
}