.loader {
  width: 80px;
  height: 80px;
  position: relative;
  margin: 0 auto;
  perspective: 1200px; /* Augmenté pour plus de profondeur 3D */
}

.loader::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #64b5f6 0%, #e6f0fa 100%);
  border: 3px solid #ffffff;
  border-radius: 10px; /* Légèrement plus arrondi pour un look moderne */
  box-shadow: 
      0 0 10px rgba(0, 0, 0, 0.2), /* Ombre externe */
      inset 0 0 15px rgba(255, 255, 255, 0.5); /* Lueur interne */
  animation: rotateBox 2.5s infinite ease-in-out;
}

.loader::after {
  content: '\f073'; /* Icône calendrier FontAwesome */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px; /* Légèrement réduit pour mieux s'intégrer */
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  animation: pulseIcon 2.5s infinite ease-in-out;
}

/* Ombre sous le loader pour simuler une élévation */
.loader {
  filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.2));
  animation: shadowPulse 2.5s infinite ease-in-out;
}

/* Animation de rotation du box */
@keyframes rotateBox {
  0% {
      transform: rotateX(45deg) rotateY(45deg);
  }
  25% {
      transform: rotateX(60deg) rotateY(135deg); /* Ajout d'une variation sur X */
  }
  50% {
      transform: rotateX(45deg) rotateY(225deg);
  }
  75% {
      transform: rotateX(30deg) rotateY(315deg); /* Variation inverse sur X */
  }
  100% {
      transform: rotateX(45deg) rotateY(405deg);
  }
}

/* Animation de l'icône avec pulsation et légère rotation */
@keyframes pulseIcon {
  0%, 100% {
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
      opacity: 0.8;
  }
  25% {
      transform: translate(-50%, -50%) scale(1.1) rotate(10deg); /* Petite rotation */
      opacity: 1;
  }
  50% {
      transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
      opacity: 1;
  }
  75% {
      transform: translate(-50%, -50%) scale(1.1) rotate(-10deg); /* Rotation inverse */
      opacity: 1;
  }
}

/* Animation de l'ombre pour accompagner le mouvement */
@keyframes shadowPulse {
  0%, 100% {
      filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.2));
  }
  50% {
      filter: drop-shadow(0 15px 8px rgba(0, 0, 0, 0.3));
  }
}