/* ============================================================================
   KIT — parts/squelette.css        Dépend de : tokens.css, motion.css

   Le chargement montre la FORME FINALE, pas un tourniquet : la page ne
   sursaute pas quand les données arrivent, parce qu'elle occupait déjà la
   bonne place.

     <div class="grille-jeux" aria-hidden="true">
       <div class="squelette-carte"></div> ×6
     </div>
   ========================================================================= */

.squelette {
  position: relative;
  overflow: hidden;
  background: var(--fond-creux);
  border-radius: var(--r-sm);
  /* Ni texte ni contenu : on réserve juste l'espace. */
  color: transparent;
  user-select: none;
}

/* Le miroitement : une bande claire traverse la forme. Un seul dégradé
   translaté, donc aucune recomposition coûteuse.                            */
.squelette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 20%,
    color-mix(in srgb, var(--surface) 70%, transparent) 45%,
    transparent 70%);
  transform: translateX(-100%);
  animation: squelette-passer 1.5s var(--doux) infinite;
}
@keyframes squelette-passer {
  to { transform: translateX(100%); }
}

/* ── Formes prêtes à l'emploi ────────────────────────────────────────────── */
.squelette.ligne   { height: 0.85em; border-radius: var(--r-xs); }
.squelette.ligne.courte { width: 45%; }
.squelette.ligne.moyenne { width: 70%; }
.squelette.titre   { height: 1.25em; width: 55%; border-radius: var(--r-xs); }
.squelette.plaque  { width: 50px; height: 50px; border-radius: 12px; }
.squelette.pastille { width: 5.5rem; height: 1.5rem; border-radius: var(--r-pilule); }

/* La carte de jeu en attente : exactement la silhouette de la vraie. */
.squelette-carte {
  display: flex;
  flex-direction: column;
  gap: var(--pas-3);
  padding: var(--pas-4);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  min-height: 12.5rem;
}
.squelette-carte::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--fond-creux);
}
.squelette-carte::after {
  content: "";
  display: block;
  height: 4.2em;
  border-radius: var(--r-xs);
  background: var(--fond-creux);
}

/* Le miroitement se joue une fois pour toute la grille, décalé par carte,
   plutôt qu'une animation indépendante par élément.                         */
.squelette-carte { position: relative; overflow: hidden; }
.squelette-carte > .lueur {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 20%,
    color-mix(in srgb, var(--fond) 60%, transparent) 45%,
    transparent 70%);
  transform: translateX(-100%);
  animation: squelette-passer 1.5s var(--doux) infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
  pointer-events: none;
}

/* Mouvement réduit : plus de balayage, juste une pulsation d'opacité douce. */
@media (prefers-reduced-motion: reduce) {
  .squelette::after,
  .squelette-carte > .lueur { display: none; }
  .squelette,
  .squelette-carte::before,
  .squelette-carte::after { opacity: 0.7; }
}