/* Overlay global */
#page-loader[hidden]{display:none!important;}
#page-loader{
  position:fixed; inset:0; z-index:2147483647;
}
#page-loader .loader-backdrop{
  position:absolute; inset:0;
  background:rgba(20,6,0,0.06);
  backdrop-filter:blur(2px);
  opacity:0; transition:opacity .2s ease;
}
#page-loader.is-visible .loader-backdrop{ opacity:1; }

#page-loader .loader-shell{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transition:opacity .2s ease;
}
#page-loader.is-visible .loader-shell{ opacity:1; }

/* Loader circulaire + lettres */
.loader-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 500;
    color: #fff;
    user-select: none;
}

.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: transparent;
  animation: loader-rotate 2s linear infinite;
  z-index: 0;
}

@keyframes loader-rotate {
  0% {
    transform: rotate(90deg);
    box-shadow:
      0 10px 20px 0 #fff inset,
      0 20px 30px 0 #ff9b6c inset,
      0 60px 60px 0 #fa682e inset;
  }
  50% {
    transform: rotate(270deg);
    box-shadow:
      0 10px 20px 0 #fff inset,
      0 20px 10px 0 #ffb18b inset,
      0 40px 60px 0 #d4551a inset;
  }
  100% {
    transform: rotate(450deg);
    box-shadow:
      0 10px 20px 0 #fff inset,
      0 20px 30px 0 #ff9b6c inset,
      0 60px 60px 0 #fa682e inset;
  }
}

.loader-letter {
  display: inline-block;
  opacity: 0.4;
  transform: translateY(0);
  animation: loader-letter-anim 2s infinite;
  z-index: 1;
}

.loader-letter:nth-child(1) { animation-delay: 0s; }
.loader-letter:nth-child(2) { animation-delay: 0.05s; }
.loader-letter:nth-child(3) { animation-delay: 0.1s; }
.loader-letter:nth-child(4) { animation-delay: 0.15s; }
.loader-letter:nth-child(5) { animation-delay: 0.2s; }
.loader-letter:nth-child(6) { animation-delay: 0.25s; }
.loader-letter:nth-child(7) { animation-delay: 0.3s; }
.loader-letter:nth-child(8) { animation-delay: 0.35s; }
.loader-letter:nth-child(9) { animation-delay: 0.4s; }
.loader-letter:nth-child(10){ animation-delay: 0.45s; }
.loader-letter:nth-child(11){ animation-delay: 0.5s; }
.loader-letter:nth-child(12){ animation-delay: 0.55s; }
.loader-letter:nth-child(13){ animation-delay: 0.6s; }

@keyframes loader-letter-anim {
  0%,100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(1.15);
  }
  40% {
    opacity: 0.7;
    transform: translateY(0);
  }
}


/* Overlay global, toujours au-dessus */
#page-loader[hidden]{display:none!important;}
#page-loader{
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* au-dessus de tout */
}

/* Voile sombre – compatible .loader-backdrop et .pixs-backdrop */
#page-loader .loader-backdrop,
#page-loader .pixs-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4) !important; /* noir 40% */
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 0;
}

/* Quand le loader est visible, on fade-in le voile */
#page-loader.is-visible .loader-backdrop,
#page-loader.is-visible .pixs-backdrop{
  opacity: 1;
}

/* Le contenu du loader au-dessus du voile */
#page-loader .loader-shell,
#page-loader .pixs-shell{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  opacity: 1;
}

/* Tes modifs validées : texte blanc + disque noir 10% derrière le cercle */
#page-loader .pixs-letters,
#page-loader .loader-letters{
  color: #fff !important;
}

#page-loader .pixs-loader-wrapper,
#page-loader .loader-wrapper{
  background: rgba(0,0,0,0.10) !important;
  border-radius: 50% !important;
}