/* ==========================================================================
   Modula — Skeleton shimmer partagé (parité avec le mobile Flutter)
   Chargé APRÈS le calque *-premium.css : purement visuel, aucun JS requis.
   Le shimmer reprend les couleurs du mobile (grey300 -> grey100, ~1.2s).
   Tokens préfixés --sk-* pour ne JAMAIS entrer en collision avec styles.css
   ni avec les *-premium.css (navy/or de la marque).
   ========================================================================== */
:root {
  /* Cohérent avec ShimmerWidget (Flutter) : base grey[300], highlight grey[100] */
  --sk-base:      #E2E8F0;   /* gris clair (teinté navy très léger)             */
  --sk-highlight: #F4F7FB;   /* gris très clair                                 */
  --sk-speed:     1.2s;      /* identique au mobile (1200 ms)                   */
  --sk-radius:    10px;
  --sk-radius-sm: 6px;
  --sk-radius-lg: 14px;
}

/* --------------------------------------------------------------------------
   Brique de base : tout élément .sk reçoit le dégradé animé (shimmer)
   -------------------------------------------------------------------------- */
.sk {
  position: relative;
  overflow: hidden;
  background-color: var(--sk-base);
  background-image: linear-gradient(
    90deg,
    var(--sk-base) 0%,
    var(--sk-base) 28%,
    var(--sk-highlight) 50%,
    var(--sk-base) 72%,
    var(--sk-base) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  border-radius: var(--sk-radius);
  animation: sk-shimmer var(--sk-speed) ease-in-out infinite;
  /* Évite que le texte/contenu fantôme soit sélectionnable ou lu */
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

@keyframes sk-shimmer {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

/* Accessibilité : on coupe l'animation si l'utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background-image: none; }
}

/* --------------------------------------------------------------------------
   Primitives réutilisables
   -------------------------------------------------------------------------- */

/* Ligne de texte (titre, paragraphe, méta…) */
.sk-line {
  height: 12px;
  border-radius: var(--sk-radius-sm);
  margin: 0 0 9px;
}
.sk-line:last-child { margin-bottom: 0; }
.sk-line.xs   { height: 9px; }
.sk-line.sm   { height: 11px; }
.sk-line.lg   { height: 16px; }
.sk-line.xl   { height: 22px; }
.sk-line.w90  { width: 90%; }
.sk-line.w80  { width: 80%; }
.sk-line.w70  { width: 70%; }
.sk-line.w60  { width: 60%; }
.sk-line.w50  { width: 50%; }
.sk-line.w40  { width: 40%; }
.sk-line.w30  { width: 30%; }

/* Avatar / pastille ronde */
.sk-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.sk-avatar.sm { width: 32px; height: 32px; }
.sk-avatar.lg { width: 64px; height: 64px; }

/* Vignette / cover (16:9 par défaut) */
.sk-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--sk-radius);
}
.sk-thumb.square { aspect-ratio: 1 / 1; }
.sk-thumb.tall   { aspect-ratio: 4 / 5; }

/* Pastille / chip / petit badge */
.sk-chip {
  height: 22px;
  width: 84px;
  border-radius: 999px;
}

/* Bouton fantôme */
.sk-btn {
  height: 40px;
  width: 130px;
  border-radius: var(--sk-radius-sm);
}

/* Carte complète (vignette + lignes) — imite une carte de cours */
.sk-card {
  background: #FFFFFF;
  border: 1px solid #E5EBF3;
  border-radius: var(--sk-radius-lg);
  padding: 14px;
  box-shadow: 0 2px 6px rgba(15, 27, 45, .06), 0 1px 2px rgba(15, 27, 45, .05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sk-card .sk-card-body { padding: 4px 2px 2px; }
.sk-card .sk-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

/* Carte « ligne » (liste horizontale : avatar + texte) */
.sk-row {
  background: #FFFFFF;
  border: 1px solid #E5EBF3;
  border-radius: var(--sk-radius-lg);
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(15, 27, 45, .06), 0 1px 2px rgba(15, 27, 45, .05);
  display: flex;
  align-items: center;
  gap: 14px;
}
.sk-row .sk-row-text { flex: 1 1 auto; min-width: 0; }

/* Bloc statistique (dashboards) */
.sk-stat {
  background: #FFFFFF;
  border: 1px solid #E5EBF3;
  border-radius: var(--sk-radius-lg);
  padding: 18px;
  box-shadow: 0 2px 6px rgba(15, 27, 45, .06), 0 1px 2px rgba(15, 27, 45, .05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   Conteneurs de mise en page
   -------------------------------------------------------------------------- */

/* Grille de cartes (responsive, calque la course-grid réelle) */
.sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.sk-grid.cols-stats {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* Pile verticale (listes, outline de cours) */
.sk-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Utilitaire : masquer proprement un bloc de skeleton */
.sk-hidden { display: none !important; }