/* skeletons.css — placeholders animés pendant le chargement async
 * Version : v0.23 (initial)
 *
 * Pattern : remplace les loaders 3-dot pour les pages denses (dashboard, stats, qcm).
 * Animation : pulse 1.5s. Respecte prefers-reduced-motion.
 */

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.skeleton {
    display: block;
    background: var(--color-surface-container);
    border-radius: var(--radius-md);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton--text {
    height: 0.95em;
    width: 80%;
    border-radius: var(--radius-sm);
    margin: 0.35em 0;
}
.skeleton--text:last-child { width: 60%; }

.skeleton--title {
    height: 1.5rem;
    width: 50%;
    border-radius: var(--radius-sm);
    margin: 0 0 var(--space-3);
}

.skeleton--bar {
    height: 8px;
    width: 100%;
    border-radius: var(--radius-pill);
    margin: var(--space-2) 0;
}

.skeleton--circle {
    border-radius: 50%;
}

.skeleton--card {
    height: 96px;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-3);
}

.skeleton--hero {
    height: 160px;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-5);
    background: linear-gradient(135deg, var(--color-surface-container), var(--color-surface-container-high));
}

.skeleton--gauge {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto var(--space-4);
}

@media (max-width: 360px) {
    .skeleton--gauge { width: 110px; height: 110px; }
    .skeleton--hero { height: 140px; }
}

/* Grille skeleton pour stat-cards (2x2) */
.skeleton-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.skeleton-stat-grid .skeleton--card { height: 80px; margin: 0; }

@media (max-width: 360px) {
    .skeleton-stat-grid { grid-template-columns: 1fr; }
}

/* Désactive l'animation si l'utilisateur a demandé moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; opacity: 0.7; }
}