/* ================================================================
   LOADER — réutilisable sur n'importe quelle page
   Usage : ajouter <div id="page-loader"></div> avant </body>
   Le loader se cache automatiquement quand la page est prête
   ================================================================ */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(160deg, #120b22 0%, #1b1230 60%, #0f0f15 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#page-loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Anneaux statiques pulsants */
.loader-ring-bg {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(124,58,237,0.18);
  animation: loaderGlowPulse 2.4s ease-in-out infinite;
}
.loader-ring-bg:nth-child(1) { width: 130px; height: 130px; animation-delay: 0s; }
.loader-ring-bg:nth-child(2) { width: 166px; height: 166px; animation-delay: .4s; }
.loader-ring-bg:nth-child(3) { width: 200px; height: 200px; animation-delay: .8s; }

/* Anneaux qui s'expandent */
.loader-ring-expand {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(124,58,237,0.55);
  width: 110px;
  height: 110px;
  animation: loaderRingFade 2.2s ease-out infinite;
}
.loader-ring-expand:nth-child(4) { animation-delay: 0s; }
.loader-ring-expand:nth-child(5) { animation-delay: 1.1s; }

/* Logo central */
.loader-logo {
  position: relative;
  z-index: 10;
  animation: loaderLogoPulse 2.4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 14px rgba(124,58,237,0.8))
    drop-shadow(0 0 28px rgba(167,139,250,0.4));
}

/* Orbes en orbite */
.loader-orb,
.loader-orb-trail {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  margin: -4px;
}
.loader-orb       { width: 8px; height: 8px; }
.loader-orb-trail { width: 4px; height: 4px; opacity: 0.4; margin: -2px; }

.loader-orb1       { background: #a68dff; box-shadow: 0 0 8px #a68dff, 0 0 16px rgba(166,141,255,.5); animation: loaderOrbit1 2.8s linear infinite; }
.loader-orb2       { background: #c4b5fd; box-shadow: 0 0 8px #c4b5fd, 0 0 16px rgba(196,181,253,.5); animation: loaderOrbit2 2.8s linear infinite; }
.loader-orb3       { background: #7c3aed; box-shadow: 0 0 8px #7c3aed, 0 0 16px rgba(124,58,237,.5);  animation: loaderOrbit3 2.8s linear infinite; }
.loader-orb-trail1 { background: #a68dff; animation: loaderOrbit1 2.8s linear infinite; animation-delay: -.15s; }
.loader-orb-trail2 { background: #c4b5fd; animation: loaderOrbit2 2.8s linear infinite; animation-delay: -.15s; }
.loader-orb-trail3 { background: #7c3aed; animation: loaderOrbit3 2.8s linear infinite; animation-delay: -.15s; }

/* Keyframes */
@keyframes loaderOrbit1 {
  from { transform: rotate(0deg)   translateX(54px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(54px) rotate(-360deg); }
}
@keyframes loaderOrbit2 {
  from { transform: rotate(120deg) translateX(54px) rotate(-120deg); }
  to   { transform: rotate(480deg) translateX(54px) rotate(-480deg); }
}
@keyframes loaderOrbit3 {
  from { transform: rotate(240deg) translateX(54px) rotate(-240deg); }
  to   { transform: rotate(600deg) translateX(54px) rotate(-600deg); }
}
@keyframes loaderLogoPulse {
  0%,100% { transform: scale(1);    opacity: .9; }
  50%      { transform: scale(1.08); opacity: 1;  }
}
@keyframes loaderRingFade {
  0%   { transform: scale(.6); opacity: .7; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes loaderGlowPulse {
  0%,100% { opacity: .3; }
  50%      { opacity: .7; }
}

/* ================================================================
   MINI LOADER — modal vidéo
   ================================================================ */
.modal-video-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #08031a;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.mvl-inner {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mvl-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(124,58,237,0.4);
  animation: loaderRingFade 2s ease-out infinite;
}
.mvl-ring1 { width: 50px; height: 50px; animation-delay: 0s; }
.mvl-ring2 { width: 50px; height: 50px; animation-delay: 1s; }

.mvl-orb {
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  margin: -2.5px;
}
.mvl-orb1 { background: #a68dff; box-shadow: 0 0 6px #a68dff; animation: loaderOrbit1 2.2s linear infinite; }
.mvl-orb2 { background: #c4b5fd; box-shadow: 0 0 6px #c4b5fd; animation: loaderOrbit2 2.2s linear infinite; }
.mvl-orb3 { background: #7c3aed; box-shadow: 0 0 6px #7c3aed; animation: loaderOrbit3 2.2s linear infinite; }

.mvl-logo {
  position: relative;
  z-index: 2;
  animation: loaderLogoPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(124,58,237,0.7));
}

/* ================================================================
   LOADER CASE PRODUIT
   ================================================================ */
.card-media-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,8,26,0.85);
  border-radius: 8px;
  transition: opacity 0.25s ease;
}

.cml-ring {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(166,141,255,0.5);
  animation: loaderRingFade 1.8s ease-out infinite;
}
.cml-ring2 { animation-delay: 0.9s; }

.cml-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  margin: -2.5px;
}
.cml-dot1 { background: #a68dff; box-shadow: 0 0 5px #a68dff; animation: loaderOrbit1 2s linear infinite; }
.cml-dot2 { background: #c4b5fd; box-shadow: 0 0 5px #c4b5fd; animation: loaderOrbit2 2s linear infinite; }
.cml-dot3 { background: #7c3aed; box-shadow: 0 0 5px #7c3aed; animation: loaderOrbit3 2s linear infinite; }

/* Fallback vidéo si extraction miniature échoue */
.product-video-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0820;
}