/* ============ PRELOADER PROSOFT ACADEMY ============ */
#preloader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:
    radial-gradient(60vmax 60vmax at 15% 10%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(55vmax 55vmax at 90% 95%, rgba(29,79,168,.18), transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#eef4ff 100%);
  border-radius:0;
  transition:transform .95s cubic-bezier(.77,0,.18,1), border-radius .95s ease;
  will-change:transform; overflow:hidden;
}
#preloader::before{ /* trame de points */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(29,79,168,.16) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
          mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
}
.pl-center{position:relative; display:flex; flex-direction:column; align-items:center; gap:22px; width:min(86vw,360px); text-align:center}

.pl-stage{position:relative; width:220px; height:220px; display:grid; place-items:center}
.pl-halo{position:absolute; inset:18px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,201,.22), transparent 68%); animation:plBreath 2.4s ease-in-out infinite}
.pl-ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.pl-ring .track{fill:none; stroke:rgba(29,79,168,.12); stroke-width:3}
.pl-ring .bar{fill:none; stroke:url(#plGrad); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:571.8; stroke-dashoffset:571.8; filter:drop-shadow(0 0 6px rgba(56,189,248,.55))}

/* 4 satellites = les 4 projets (couleurs des logos) */
.pl-orbit{position:absolute; inset:0; animation:plSpin 6s linear infinite}
.pl-orbit i{position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px;
  border-radius:50%; background:var(--c); box-shadow:0 0 0 4px #fff, 0 6px 14px -2px var(--c);
  transform:rotate(var(--a)) translateY(-110px)}
.pl-orbit i:nth-child(1){--a:0deg;  --c:#F58A07}
.pl-orbit i:nth-child(2){--a:90deg; --c:#12285a}
.pl-orbit i:nth-child(3){--a:180deg;--c:#1ea0ff}
.pl-orbit i:nth-child(4){--a:270deg;--c:#D9151B}

.pl-logo{position:relative; width:104px; height:auto; z-index:2;
  animation:plPop .9s cubic-bezier(.2,.9,.3,1.2) both, plFloat 3s ease-in-out .9s infinite;
  filter:drop-shadow(0 14px 18px rgba(29,79,168,.28))}
.pl-shine{position:absolute; width:104px; height:104px; z-index:3; overflow:hidden; border-radius:24px; pointer-events:none;
  -webkit-mask:url(/assets/img/logos/prosoft-mark.png) center/contain no-repeat; mask:url(/assets/img/logos/prosoft-mark.png) center/contain no-repeat}
.pl-shine::after{content:""; position:absolute; top:-20%; bottom:-20%; width:40%; left:-60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); transform:skewX(-18deg);
  animation:plShine 2.2s ease-in-out .8s infinite}

.pl-brand{font:800 1.5rem/1 "Sora","Inter",system-ui,sans-serif; letter-spacing:.02em; color:#0a1b3d;
  opacity:0; animation:plUp .7s .35s ease both}
.pl-brand span{display:block; margin-top:8px; font-weight:600; font-size:.78rem; letter-spacing:.5em; color:#1d4fa8; padding-left:.5em}
.pl-bar{width:100%; height:5px; border-radius:99px; background:rgba(29,79,168,.12); overflow:hidden; opacity:0; animation:plUp .7s .5s ease both}
.pl-bar i{display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg,#1d4fa8,#38bdf8 70%,#f59e0b); box-shadow:0 0 12px rgba(56,189,248,.6)}
.pl-meta{display:flex; justify-content:space-between; align-items:baseline; width:100%;
  font:600 .82rem/1 "Inter",system-ui,sans-serif; color:#5b6b88; opacity:0; animation:plUp .7s .6s ease both}
.pl-pct{font:800 1.35rem/1 "Sora","Inter",sans-serif; color:#1d4fa8; font-variant-numeric:tabular-nums}

/* sortie */
html.pl-exit .pl-center{transform:translateY(-14px) scale(.96); opacity:0; transition:transform .45s ease, opacity .4s ease}
html.pl-exit #preloader{transform:translateY(-101%); transition-delay:.35s; border-radius:0 0 50% 50% / 0 0 14vh 14vh}
html.pl-done #preloader, html.pl-skip #preloader{display:none}
html:not(.pl-done):not(.pl-skip) body{overflow:hidden}

@keyframes plSpin{to{transform:rotate(360deg)}}
@keyframes plBreath{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes plPop{from{opacity:0; transform:scale(.4) rotate(-12deg)}to{opacity:1; transform:none}}
@keyframes plFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes plUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@keyframes plShine{0%{left:-60%}60%,100%{left:130%}}

@media (prefers-reduced-motion:reduce){
  .pl-orbit,.pl-halo,.pl-logo,.pl-shine::after{animation:none}
  #preloader{transition-duration:.01s}
}