/* ════════════════════════════════════════════════════
   JNMFO-26 — preloader.css
   Écran de préchargement : portes coulissantes + animations
   ════════════════════════════════════════════════════ */

/* Voile immédiat (posé par js/preloader.js dès le <head>) : évite tout flash du site */
html.pl-on{overflow:hidden}
html.pl-on::before{content:"";position:fixed;inset:0;z-index:2147483000;background:var(--b900)}
html.pl-on.pl-built::before{display:none}
/* pas de fondu de page pendant le préchargeur (l'ouverture des portes fait l'entrée) */
html.pl-played body{animation:none!important}

#pl{
  --pl-gold:#e2b93b;--pl-gold2:#f3d77a;--pl-ease:cubic-bezier(.77,0,.18,1);
  position:fixed;inset:0;z-index:2147483001;overflow:hidden;
  font-family:'DM Sans',system-ui,sans-serif;color:#fff;
  -webkit-font-smoothing:antialiased;direction:ltr;
}
#pl *{box-sizing:border-box;margin:0;padding:0}
.pl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── PORTES ── */
.pl-door{
  position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:var(--b900);
  transition:transform 1.2s var(--pl-ease);will-change:transform;
}
.pl-l{left:0}
.pl-r{right:0}
#pl.pl-open .pl-l{transform:translate3d(-101%,0,0)}
#pl.pl-open .pl-r{transform:translate3d(101%,0,0)}
/* arête centrale : filet doré + biseau */
.pl-door::after{content:"";position:absolute;top:0;bottom:0;width:3px;z-index:3;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 2px,rgba(226,185,59,.75) 2px)}
.pl-l::after{right:0}
.pl-r::after{left:0;transform:scaleX(-1)}
#pl.pl-open .pl-door{box-shadow:0 0 80px rgba(0,0,0,.55)}

/* chaque porte contient la scène entière (200 % de sa largeur) : elle s'ouvre donc en deux moitiés */
.pl-stage{
  position:absolute;top:0;bottom:0;width:200%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%,rgba(var(--b500-rgb),.38) 0%,rgba(var(--b500-rgb),0) 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,
    radial-gradient(ellipse at 50% 45%,var(--b750) 0%,var(--b800) 45%,var(--b900) 80%,var(--b950) 100%);
}
.pl-l .pl-stage{left:0}
.pl-r .pl-stage{right:0}
/* vignettage */
.pl-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.45) 100%)}

/* ── DÉCOR ── */
.pl-corner{position:absolute;width:34px;height:34px;border:0 solid rgba(226,185,59,.55);opacity:0;animation:plFade .9s .5s ease forwards}
.pl-c1{top:26px;left:26px;border-top-width:1px;border-left-width:1px}
.pl-c2{top:26px;right:26px;border-top-width:1px;border-right-width:1px}
.pl-c3{bottom:26px;left:26px;border-bottom-width:1px;border-left-width:1px}
.pl-c4{bottom:26px;right:26px;border-bottom-width:1px;border-right-width:1px}

.pl-sym{position:absolute;font-family:'Playfair Display',Georgia,serif;color:rgba(226,185,59,.2);
  line-height:1;user-select:none;opacity:0;animation:plFade 1.2s ease forwards,plFloat var(--t,10s) ease-in-out var(--d,0s) infinite}
@keyframes plFloat{50%{transform:translateY(-18px) rotate(7deg)}}

.pl-curves{position:absolute;left:0;width:100%;top:50%;height:42vh;transform:translateY(-50%);pointer-events:none;overflow:visible}
.pl-curves path{fill:none;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round}
.pl-cv1{stroke:rgba(226,185,59,.4);stroke-width:1.3;animation:plDraw 2.8s .2s cubic-bezier(.5,.1,.2,1) forwards}
.pl-cv2{stroke:rgba(255,255,255,.2);stroke-width:1;animation:plDraw 3.2s .5s cubic-bezier(.5,.1,.2,1) forwards}
@keyframes plDraw{to{stroke-dashoffset:0}}

/* ── CONTENU ── */
.pl-fg{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 20px;transition:opacity .8s .08s ease-in,transform 1s var(--pl-ease)}
#pl.pl-open .pl-fg{opacity:0;transform:scale(1.05)}

.pl-top{position:absolute;top:clamp(34px,7vh,70px);left:0;right:0;z-index:2;display:flex;justify-content:center;text-align:center;padding:0 clamp(40px,22%,200px);line-height:1.8;
  font-size:clamp(.58rem,1.2vw,.72rem);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);
  opacity:0;animation:plFade 1s .6s ease forwards;transition:opacity .5s ease}
#pl.pl-open .pl-top,#pl.pl-open .pl-foot{opacity:0!important}

/* emblème : anneau de progression + médaillon */
.pl-emblem{--E:clamp(176px,31vmin,250px);position:relative;width:var(--E);height:var(--E);
  opacity:0;animation:plPop 1s .1s var(--pl-ease) forwards}
@keyframes plPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.pl-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pl-ring circle{fill:none}
.pl-track{stroke:rgba(255,255,255,.14);stroke-width:1.5}
.pl-arc{stroke:var(--pl-gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 5px rgba(226,185,59,.8))}
.pl-ticks{stroke:rgba(226,185,59,.5);stroke-width:5;stroke-dasharray:1.2 7.8;transform-origin:110px 110px;animation:plSpin 40s linear infinite reverse}
.pl-dash{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:2 5;transform-origin:110px 110px;animation:plSpin 24s linear infinite}
@keyframes plSpin{to{transform:rotate(360deg)}}

.pl-medal{position:absolute;inset:15%;border-radius:50%;background:#fff;overflow:hidden;
  box-shadow:0 0 0 4px rgba(255,255,255,.1),0 14px 40px rgba(0,0,0,.45),0 0 60px rgba(var(--b500-rgb),.35)}
.pl-medal img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04)}
.pl-medal::after{content:"";position:absolute;inset:-20%;
  background:linear-gradient(105deg,transparent 42%,rgba(226,185,59,.38) 50%,transparent 58%);
  transform:translateX(-120%);animation:plShine 2.8s 1s ease-in-out infinite}
@keyframes plShine{60%,100%{transform:translateX(120%)}}
/* halo pulsé */
.pl-emblem::before{content:"";position:absolute;inset:12%;border-radius:50%;
  box-shadow:0 0 0 0 rgba(226,185,59,.35);animation:plPulse 2.4s 1s ease-out infinite}
@keyframes plPulse{to{box-shadow:0 0 0 34px rgba(226,185,59,0)}}
#pl.pl-ready .pl-emblem{animation:plPop 1s .1s var(--pl-ease) forwards,plFlash .7s ease}
@keyframes plFlash{40%{filter:drop-shadow(0 0 28px rgba(226,185,59,.95)) brightness(1.12)}}

/* titre */
.pl-title{margin-top:clamp(28px,5vh,46px);overflow:hidden;padding:.06em .1em .12em;
  font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(2.3rem,7.2vw,4.4rem);
  letter-spacing:.07em;line-height:1.08;display:flex;justify-content:center}
.pl-title span{display:inline-block;transform:translateY(115%);animation:plRise .85s var(--pl-ease) forwards;
  animation-delay:calc(.75s + var(--i)*.07s)}
.pl-title .g{color:var(--pl-gold2);background:linear-gradient(180deg,#f7e08f,#d9a91f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes plRise{to{transform:translateY(0)}}

.pl-sub{margin-top:clamp(8px,1.6vh,14px);display:flex;align-items:center;gap:16px;max-width:92vw;
  font-size:clamp(.6rem,1.35vw,.82rem);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.pl-sub::before,.pl-sub::after{content:"";flex:0 0 clamp(18px,5vw,56px);height:1px;background:linear-gradient(90deg,transparent,var(--pl-gold));
  transform:scaleX(0);animation:plLine 1s 1.5s var(--pl-ease) forwards}
.pl-sub::before{transform-origin:right}
.pl-sub::after{transform-origin:left;background:linear-gradient(90deg,var(--pl-gold),transparent)}
@keyframes plLine{to{transform:scaleX(1)}}
.pl-sub b{font-weight:500;display:inline-block;opacity:0;animation:plWord .8s ease forwards;animation-delay:calc(1.3s + var(--i)*.09s)}
@keyframes plWord{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* barre de progression */
.pl-prog{margin-top:clamp(22px,4.5vh,42px);width:min(460px,76vw);opacity:0;animation:plFade .9s 1.7s ease forwards}
.pl-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.pl-num{font-family:'Playfair Display',Georgia,serif;font-size:1.35rem;letter-spacing:.04em;color:var(--pl-gold2);font-variant-numeric:tabular-nums}
.pl-num small{font-size:.65em;opacity:.75;margin-left:2px}
.pl-bar{position:relative;height:2px;background:rgba(255,255,255,.16);border-radius:2px}
.pl-bar i{position:absolute;inset:0;border-radius:2px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--b500),var(--pl-gold2));box-shadow:0 0 12px rgba(226,185,59,.7)}

.pl-foot{position:absolute;bottom:clamp(34px,7vh,70px);left:0;right:0;z-index:2;display:flex;justify-content:center;align-items:center;gap:14px;
  flex-wrap:wrap;padding:0 20px;font-size:clamp(.58rem,1.2vw,.72rem);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.6);
  opacity:0;animation:plFade 1s 1.2s ease forwards;transition:opacity .5s ease}
.pl-foot i{width:5px;height:5px;background:var(--pl-gold);transform:rotate(45deg);display:inline-block}
.pl-foot b{font-weight:500}

@keyframes plFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── RAYON CENTRAL (apparaît quand tout est prêt) ── */
.pl-beam{position:absolute;left:50%;top:50%;width:2px;height:0;margin-left:-1px;transform:translateY(-50%);z-index:5;pointer-events:none;
  background:linear-gradient(180deg,transparent,#fff 18%,var(--pl-gold2) 50%,#fff 82%,transparent);
  box-shadow:0 0 18px 3px rgba(226,185,59,.85),0 0 60px 12px rgba(226,185,59,.4);opacity:0}
#pl.pl-ready .pl-beam{animation:plBeam .75s ease forwards}
@keyframes plBeam{0%{height:0;opacity:0}60%{height:100%;opacity:1}100%{height:100%;opacity:1}}
#pl.pl-open .pl-beam{animation:plBeamOut .6s ease forwards}
@keyframes plBeamOut{0%{height:100%;opacity:1;width:2px}100%{height:100%;opacity:0;width:22px;margin-left:-11px}}

/* ── Révélation de la page sous les portes ── */
html.pl-opening .hero-content{animation:plHero 1.2s .3s cubic-bezier(.2,.9,.2,1) both}
@keyframes plHero{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
html.pl-opening nav#navbar{animation:plNav .9s .35s cubic-bezier(.2,.9,.2,1) both}
@keyframes plNav{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}

/* ── Mobile ── */
@media(max-width:560px){
  .pl-top{padding:0 18%}
  .pl-sub{letter-spacing:.16em;gap:10px}
  .pl-corner{width:22px;height:22px}
  .pl-c1,.pl-c2{top:16px}.pl-c3,.pl-c4{bottom:16px}
  .pl-c1,.pl-c3{left:16px}.pl-c2,.pl-c4{right:16px}
  .pl-foot{gap:8px;letter-spacing:.16em}
}
@media(max-height:560px){
  .pl-top,.pl-foot{display:none}
  .pl-emblem{--E:clamp(120px,36vh,170px)}
}

/* Mouvement réduit (souvent activé sur téléphone / économie d'énergie).
   Le site (style.css) coupe alors TOUTES les animations avec « * {animation:none!important} » :
   on affiche donc le préchargeur dans son état final, et seules les portes gardent une transition. */