/* ============================================================
   SITE LOADER — écran de chargement futuriste (zoom logo)
   Commun aux 5 sites. Couleurs/logo pilotés par window.SITE_LOADER
   (voir site-loader.js). Ne pas éditer les couleurs ici : elles
   sont injectées en inline-style par site.
   ============================================================ */

#site-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sl-bg,#05070a);
  transition:opacity .5s ease, visibility .5s ease;
}
#site-loader.sl-hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* grille de fond façon HUD */
#site-loader .sl-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--sl-line,rgba(255,255,255,.07)) 1px, transparent 1px),
    linear-gradient(90deg, var(--sl-line,rgba(255,255,255,.07)) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:0;
  animation:sl-gridIn 1.1s ease-out forwards;
}
@keyframes sl-gridIn{
  0%{opacity:0; transform:scale(1.08);}
  100%{opacity:1; transform:scale(1);}
}

#site-loader .sl-core{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}

/* anneaux qui convergent */
#site-loader .sl-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid var(--sl-accent,#67E8F9);
  opacity:0;
}
#site-loader .sl-ring.r1{ width:380px; height:380px; animation:sl-ringIn 1.5s cubic-bezier(.16,.8,.2,1) forwards; }
#site-loader .sl-ring.r2{ width:260px; height:260px; animation:sl-ringIn 1.5s .1s cubic-bezier(.16,.8,.2,1) forwards; }
#site-loader .sl-ring.r3{ width:160px; height:160px; animation:sl-ringIn 1.5s .2s cubic-bezier(.16,.8,.2,1) forwards; }
@keyframes sl-ringIn{
  0%{ transform:scale(2.2); opacity:0; }
  55%{ opacity:.55; }
  100%{ transform:scale(1); opacity:.22; }
}

/* ligne de scan horizontale */
#site-loader .sl-scan{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--sl-accent,#67E8F9), transparent);
  opacity:.75;
  animation:sl-scan 1.7s .35s ease-in-out infinite;
}
@keyframes sl-scan{
  0%{ top:-10%; }
  100%{ top:110%; }
}

/* logo : zoom + glow pulsé */
#site-loader .sl-mark{
  position:relative;
  width:var(--sl-mark-size,84px);
  height:var(--sl-mark-size,84px);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:scale(2.4);
  animation:
    sl-zoom 1s .2s cubic-bezier(.19,1,.22,1) forwards,
    sl-pulse 2.2s 1.2s ease-in-out infinite;
}
#site-loader .sl-mark img,
#site-loader .sl-mark svg{
  width:100%; height:100%; object-fit:contain; display:block;
}
@keyframes sl-zoom{
  0%{ opacity:0; transform:scale(2.4); }
  55%{ opacity:1; }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes sl-pulse{
  0%,100%{ filter:drop-shadow(0 0 4px var(--sl-accent,#67E8F9)); }
  50%{ filter:drop-shadow(0 0 20px var(--sl-accent,#67E8F9)); }
}

/* libellé */
#site-loader .sl-label{
  opacity:0;
  color:var(--sl-accent,#67E8F9);
  font-family:'IBM Plex Mono','JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  animation:sl-labelIn .6s 1s forwards;
}
@keyframes sl-labelIn{ to{ opacity:.85; } }
#site-loader .sl-label .sl-dots::after{
  content:'';
  animation:sl-dots 1.2s steps(4,end) infinite;
}
@keyframes sl-dots{
  0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';}
}

@media (prefers-reduced-motion:reduce){
  #site-loader{ transition:opacity .2s ease; }
  #site-loader *{ animation:none !important; }
  #site-loader .sl-grid{ opacity:1; }
  #site-loader .sl-ring{ opacity:.22; transform:none; }
  #site-loader .sl-mark{ opacity:1; transform:none; }
  #site-loader .sl-label{ opacity:.85; }
}

@media (max-width:520px){
  #site-loader .sl-ring.r1{ width:260px; height:260px; }
  #site-loader .sl-ring.r2{ width:180px; height:180px; }
  #site-loader .sl-ring.r3{ width:110px; height:110px; }
}