/* Overlay plein écran */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #0000008c; /* fond semi-transparent */
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* pour empiler loader + texte */
    transition: opacity 0.4s ease;
}

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

/* Nouveau loader inspiré de ton snippet */
.site-loader {
  width: 48px; /* taille adaptée à ton ancien loader */
  aspect-ratio: 1;
  --c: linear-gradient(#fff 0 0); /* blanc comme ton ancien spinner */
  --m: radial-gradient(farthest-side, var(--bs-primary, #0d6efd) 90%, #0000); /* couleur bootstrap */
  background: var(--c), var(--m), var(--c);
  background-size: 16px 8px, 10px 10px;
  background-repeat: no-repeat;
  animation: 
    l19-1 .5s infinite alternate,
    l19-2 4s infinite linear .5s;
  margin: auto;
  border-radius: 50%;
}

/* Texte en dessous du loader */
.loader-content {
    margin-top: 20px;
    text-transform: capitalize;
    color: #fff;
    font-weight: 800;
    font-size: 26px;
}

/* Animations */
@keyframes l19-1 {
  0%,10%   {background-position: calc(50% - 8px) 50%, 50% 10%, calc(50% + 8px) 50%}
  80%,100% {background-position: -20px 50%, 50% 50%, calc(100% + 20px) 50%}
}
@keyframes l19-2 {
  0%,24.99% {transform: rotate(0)}
  25%,49.99% {transform: rotate(90deg)}
  50%,74.99% {transform: rotate(180deg)}
  75%,100%   {transform: rotate(270deg)}
}