/* Version: 20-09-2026-16-46 */
/* Version: 02-09-2026-save-loader-stop */
#loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 790;
  background-color: var(
    --portfolios-theme-bg-main,
    var(--portfolios-bg-main-color, var(--portfolios-color-bg-main, #fafafa))
  );
  color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
  font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif) !important;
  background-image: none;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}

.portfolio-editor #webpage-simulation,
.portfolio-editor #theme-visualiser {
  position: relative;
}

/*
 * En admin, le loader couvre le cadre de visionnage (#webpage-simulation),
 * pas toute la hauteur du portfolio (sinon le spinner part hors écran).
 * position:fixed est contenu par le transform du cadre.
 */
body.customizer-page #loader,
body.customizer-page #theme-visualiser #loader,
body.customizer-page #webpage-simulation #loader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.portfolio-editor:not(.customizer-page) #webpage-simulation #loader,
body.portfolio-editor:not(.customizer-page) #theme-visualiser #loader {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 860;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(
    --portfolios-theme-bg-main,
    var(--portfolios-bg-main-color, var(--portfolios-color-bg-main, #fafafa))
  ) !important;
}

#loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: inherit;
  background-image: none;
  pointer-events: none;
  transition: opacity 420ms ease, background 420ms ease;
}

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

.ark-loader {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  pointer-events: none;
  color: var(--portfolios-icon-color, var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit)));
}

.ark-loader-mark {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ark-loader-pulse {
  position: absolute;
  inset: 4px;
  border-radius: var(--portfolios-border-radius-full, 50%);
  background: currentColor;
  opacity: 0.08;
  animation: ark-loader-pulse 1.6s ease-in-out infinite;
}

.ark-loader-ring {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: block;
  animation: ark-loader-spin 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.ark-loader-ring-track,
.ark-loader-ring-arc {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

.ark-loader-ring-track {
  opacity: 0.16;
}

.ark-loader-ring-arc {
  stroke-linecap: round;
  stroke-dasharray: 56 80;
}

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

@keyframes ark-loader-pulse {
  0%,
  100% {
    transform: scale(0.72);
    opacity: 0.05;
  }

  50% {
    transform: scale(1);
    opacity: 0.12;
  }
}

.ark-loader-label {
  color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
  font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif) !important;
  font-size: var(--portfolios-font-size-base);
  font-weight: 400;
  letter-spacing: var(--portfolios-letter-spacing, 0.4px);
  line-height: var(--portfolios-text-line-height, 1.2);
  text-align: center;
  opacity: 0.88;
}

.sr-only {
  position: absolute;
  left: -9999px;
}

#loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Header / footer restent visibles au-dessus du loader ; seul le contenu est masqué */
html:not(.ark-page-ready) #portfolio_page,
html:not(.ark-page-ready) #theme-visualiser #portfolio_page {
  opacity: 1;
  visibility: visible;
  z-index: auto;
}

html:not(.ark-page-ready) #portfolio_page > :is(header, #header, footer, #footer, #legal) {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 820;
}

html:not(.ark-page-ready) #portfolio_page > :not(header):not(#header):not(footer):not(#footer):not(#legal):not(#loader),
html:not(.ark-page-ready) .page-content {
  opacity: 0;
}

html.ark-page-ready #portfolio_page,
html.ark-page-ready .page-content {
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* En aperçu admin, le loader est recadré sur #webpage-simulation ; le cadre
   reste visible pour que le voile ne disparaisse pas avant le fade-out. */
html:not(.ark-page-ready) body.portfolio-editor #portfolio_page {
  opacity: 1;
  visibility: visible;
  transition: none;
}

html:not(.ark-page-ready) body.portfolio-editor #portfolio_page > :not(#loader):not(header):not(#header):not(footer):not(#footer):not(#legal) {
  opacity: 0;
}

html.ark-page-ready body.portfolio-editor #portfolio_page > :not(#loader) {
  opacity: 1;
  visibility: visible;
  transition: none;
}

@media (max-width: 600px) {
  .ark-loader-mark {
    width: 48px;
    height: 48px;
  }

  .ark-loader-ring {
    width: 40px;
    height: 40px;
  }

  .ark-loader-label {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #loader {
    transition: opacity 160ms linear, visibility 0s linear 160ms;
  }

  #loader::before {
    transition: opacity 160ms linear;
  }

  .ark-loader-pulse,
  .ark-loader-ring {
    animation: none;
  }

  .ark-loader-ring-arc {
    stroke-dasharray: 70 44;
    opacity: 0.85;
  }

  .ark-loader-pulse {
    opacity: 0.08;
    transform: none;
  }
}