/* ============================================================
   SKELETON LOADING — auto-détection des box dans main#content
   Exclut : sidebar, topbar, footer, offcanvas
   ============================================================ */

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

:root,
[data-bs-theme="light"] {
  --sk-base:  rgba(0, 0, 0, 0.07);
  --sk-shine: rgba(0, 0, 0, 0.13);
}
[data-bs-theme="dark"] {
  --sk-base:  rgba(255, 255, 255, 0.055);
  --sk-shine: rgba(255, 255, 255, 0.11);
}

/* Masquage précoce de main#content avant injection des squelettes */
.sk-main-hidden main#content { opacity: 0; }
main#content { transition: opacity 0.22s ease; }

/* ── Overlay positionné sur la box parente ── */
.sk-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: inherit;
  background: var(--bs-card-bg, var(--bg-card, #fff));
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.sk-overlay.sk-fade { opacity: 0; }

/* ── Bloc shimmer de base ── */
.sk-sh {
  background: linear-gradient(
    90deg,
    var(--sk-base)  25%,
    var(--sk-shine) 50%,
    var(--sk-base)  75%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s infinite linear;
  border-radius: 4px;
  flex-shrink: 0;
}
.sk-sh-circle  { border-radius: 50% !important; }
.sk-sh-rounded { border-radius: 8px !important; }
.sk-sh-pill    { border-radius: 20px !important; }