/* ========================================
   CARTE PAGE LOADER
   Loader avec background orange et logo Monsieur Spoon
   ======================================== */

@keyframes carteLoaderFadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes logoScale {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Conteneur du loader */
.carte-loader-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FF4A16;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: carteLoaderFadeOut 2s ease-out forwards;
  animation-delay: 1s;
}

/* Conteneur du logo */
.carte-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
}

/* Logo Monsieur Spoon */
.carte-loader-logo {
  width: 150px;
  height: 150px;
  object-fit: contain;
  animation: logoScale 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
}

/* Responsive */
@media screen and (max-width: 767px) {
  .carte-loader-container {
    width: 150px;
    height: 150px;
  }

  .carte-loader-logo {
    width: 100px;
    height: 100px;
  }
}

@media screen and (max-width: 479px) {
  .carte-loader-container {
    width: 120px;
    height: 120px;
  }

  .carte-loader-logo {
    width: 80px;
    height: 80px;
  }
}