:root {
  --loader-bg: var(--wp--preset--color--base);
  --spinner-size: 50px;
  --spinner-border: 5px;
  --spinner-track: var(--wp--preset--color--contrast);
  --spinner-color: var(--wp--preset--color--accent-1);
}

/* Assure que main est positionné pour enfant absolu */
#main-content {
  position: relative;
}

/* Masquer le loader si JS n'est pas activé */
html:not(.js-enabled) #page-loader {
  opacity: 0;
  pointer-events: none;
}

/* Loader limité à main-content */
#page-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--loader-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}

#page-loader.hidden {
  opacity: 0;
}

/* Spinner */
.spinner {
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: var(--spinner-border) solid var(--spinner-track);
  border-top-color: var(--spinner-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  position: relative;
}

/* Visually hidden pour l'accessibilité */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --loader-bg: var(--wp--preset--color--contrast);
    --spinner-color: var(--wp--preset--color--base);
    --spinner-track: var(--wp--preset--color--accent-1);
  }
}

/* Mobile */
@media (max-width: 480px) {
  :root {
    --spinner-size: 30px;
    --spinner-border: 3px;
  }
}