.layout-preloader-container {
  width: 100%;
  min-height: 100%;
  background-color: var(--primary-color);
  position: absolute;
  inset: 0;
}

.layout-preloader-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* plus besoin de flex colonne, on centre juste le bloc spinner */
}

/* Wrapper du cercle + logo */
.spinner-wrap {
  position: relative;
  width: 120px;
  /* = taille du SVG */
  height: 120px;
  display: inline-block;
}

/* Le cercle (spinner) remplit le wrapper */
.spinner-ring {
  position: absolute;
  inset: 0;
  animation: rotator 1.4s linear infinite;
}

/* Logo centré au milieu du cercle */
.spinner-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  /* ajustez selon le rendu souhaité */
  height: auto;
  display: block;
  pointer-events: none;
  /* optionnel */
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(270deg);
  }
}

.layout-preloader-path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
    dash 1.4s ease-in-out infinite,
    colors 5.6s ease-in-out infinite;
}

@keyframes colors {
  0% {
    stroke: #4285F4;
  }

  25% {
    stroke: #DE3E35;
  }

  50% {
    stroke: #F7C223;
  }

  75% {
    stroke: #1B9A59;
  }

  100% {
    stroke: #4285F4;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }

  50% {
    stroke-dashoffset: 93.5;
    transform: rotate(135deg);
  }

  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}