/* ============================================================
   PRELOADER — écran d'accueil avec logo (durée : --preloader-time = 3 s ; le logo « plonge » vers l'écran à 1,1 s)
   100 % CSS pour le timing → fonctionne même si le JS échoue.
   Le JS (js/preloader.js) ne fait que : bouton « Passer », verrou du
   défilement, nettoyage du DOM, et « une seule fois par session ».
   ============================================================ */
.preloader{
  --preloader-time:3s;            /* ← durée totale d'affichage */
  --preloader-fade:.5s;          /* ← durée du fondu de sortie (inclus dans le total) */
  --preloader-grow-at:1.1s;      /* ← moment où la plongée démarre */
  --preloader-grow-time:1.5s;    /* ← durée de la plongée (finit à 2,6 s) */
  --preloader-grow-scale:6;      /* ← facteur de zoom final (le logo source est net jusqu'à ≈ ×2,3 : le reste est masqué par le mouvement + le fondu) */
  --logo-w:min(172px,42vw);      /* largeur du logo au repos (hauteur = largeur × 0.813) */
  position:fixed;inset:0;z-index:99999;
  display:grid;place-items:center;
  background:transparent;        /* fond d'accueil (canvas WebGL animé) laissé visible */
  color:var(--text,#14192B);
  animation:preloaderOut var(--preloader-fade) ease calc(var(--preloader-time) - var(--preloader-fade)) forwards;
}
.preloader.is-leaving{animation:preloaderOut .3s ease forwards}
.preloader-skip .preloader{display:none}
html.is-preloading{overflow:hidden}
/* Sans JS (pas de classe is-preloading) : fond plein de secours pour masquer le contenu */
html:not(.is-preloading) .preloader{background:var(--bg,#FAF9F6)}
/* Pendant l'écran d'accueil : on masque le CONTENU (header, sections, HUD…) mais on garde
   le canvas WebGL + son voile, pour que l'animation de fond reste visible derrière le logo. */
html.is-preloading body > :not(.preloader):not(#webgl_canvas){visibility:hidden}
/* Révélation douce du contenu quand l'écran d'accueil se termine */
/* Le JS ajoute .preloader-reveal ~0,5 s AVANT la fin : le contenu apparaît pendant que le logo se dissout
   (fondu enchaîné), avec un léger contre-zoom (1.06 → 1) = on « traverse » le logo pour entrer dans le site. */
html.preloader-reveal body > :not(.preloader):not(#webgl_canvas){
  visibility:visible;transform-origin:50% 35%;
  animation:preloaderReveal .9s cubic-bezier(.16,1,.3,1) both;
}
html.preloader-reveal{overflow-x:hidden}   /* le contre-zoom ne doit pas créer de barre de défilement */
@keyframes preloaderReveal{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
/* Halo très léger derrière le logo : lisibilité du texte sans masquer l'animation */
.preloader::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 460px 380px at 50% 50%,color-mix(in srgb,var(--bg,#FAF9F6) 55%,transparent),transparent 100%);
}

/* Éclat doré qui jaillit derrière le logo pendant la plongée (sensation de lumière / vitesse) */
.preloader::after{
  content:"";position:absolute;inset:0;margin:auto;z-index:-1;pointer-events:none;
  width:min(90vmin,720px);height:min(90vmin,720px);border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold,#C8961E) 55%,transparent),transparent 65%);
  opacity:0;
  animation:preloaderBloom calc(var(--preloader-grow-time) * .9) ease-out calc(var(--preloader-grow-at) + var(--preloader-grow-time) * .2) forwards;
}

@keyframes preloaderOut{to{opacity:0;visibility:hidden}}

.preloader__inner{
  display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:24px;text-align:center;position:relative;
}
.preloader__logo{
  display:block;width:var(--logo-w);height:auto;
  filter:drop-shadow(0 10px 28px color-mix(in srgb,var(--gold,#C8961E) 35%,transparent));
  animation:
    preloaderPop .8s cubic-bezier(.2,.9,.3,1.2) both,
    preloaderFloat 2.6s ease-in-out .8s infinite;
}
.preloader__logo-wrap{
  display:block;transform-origin:center;
  /* ease-in : départ lent puis accélération = effet de caméra qui fonce vers le logo.
     2e animation : le logo se fond sur les 40 % finaux (cache la perte de netteté). */
  animation:
    preloaderGrow var(--preloader-grow-time) cubic-bezier(.5,0,.85,.4) var(--preloader-grow-at) forwards,
    preloaderLogoOut calc(var(--preloader-grow-time) * .4) ease-in calc(var(--preloader-grow-at) + var(--preloader-grow-time) * .6) forwards;
}
/* Le texte (marque, ville, barre) se dissout dès le début de la plongée, en grossissant légèrement */
.preloader__text{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:preloaderTextOut .45s ease-out var(--preloader-grow-at) forwards;
}
.preloader__brand{
  margin:6px 0 0;
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:800;
  font-size:1.5rem;letter-spacing:.14em;white-space:nowrap;
  animation:preloaderUp .7s ease .35s both;
}
.preloader__brand span{
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--text,#14192B) 22%,transparent)); /* lisibilité du jaune sur fond clair */
}
.preloader__b1{background-image:linear-gradient(90deg,#FFD21F,#FF7A00)}    /* BADARA  : jaune → orange */
.preloader__b2{background-image:linear-gradient(90deg,#38BDF8,#1D4ED8)}    /* DIGITAL : bleu ciel → bleu foncé */
.preloader__loc{
  margin:0;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted,#5B6275);
  animation:preloaderUp .7s ease .5s both;
}
.preloader__bar{
  width:min(220px,60vw);height:4px;border-radius:99px;overflow:hidden;margin-top:10px;
  background:color-mix(in srgb,var(--text,#14192B) 10%,transparent);
  animation:preloaderUp .7s ease .6s both;
}
.preloader__bar span{
  display:block;height:100%;border-radius:inherit;transform-origin:left;
  background:linear-gradient(90deg,var(--gold,#C8961E),var(--terra,#D4623B));
  animation:preloaderFill calc(var(--preloader-time) - var(--preloader-fade)) linear forwards;
}
.preloader__skip{
  position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  padding:10px 16px;min-height:44px;min-width:44px;       /* cible tactile WCAG 2.5.8 */
  font:600 .85rem/1 'Inter',system-ui,sans-serif;color:inherit;
  background:color-mix(in srgb,var(--text,#14192B) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--text,#14192B) 18%,transparent);
  border-radius:99px;cursor:pointer;
  opacity:0;animation:preloaderUp .4s ease .5s forwards;    /* attribut hidden retiré par le JS : sans JS, pas de bouton inutile */
}
.preloader__skip:hover{background:color-mix(in srgb,var(--text,#14192B) 12%,transparent)}
.preloader__skip:focus-visible{outline:3px solid var(--gold,#C8961E);outline-offset:3px}
.preloader__skip[hidden]{display:none}

.sr-only-preloader{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@keyframes preloaderPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes preloaderFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes preloaderUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes preloaderGrow{to{transform:scale(var(--preloader-grow-scale))}}
@keyframes preloaderLogoOut{to{opacity:0}}
@keyframes preloaderTextOut{to{opacity:0;transform:scale(1.25)}}
@keyframes preloaderBloom{0%{opacity:0;transform:scale(.4)}45%{opacity:.7}100%{opacity:0;transform:scale(2.2)}}
@keyframes preloaderFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Mouvement réduit : logo statique, la barre reste lisible mais sans animation de flottement */
@media(prefers-reduced-motion:reduce){
  .preloader__logo,.preloader__logo-wrap,.preloader__text,.preloader__brand,.preloader__loc,.preloader__bar{animation:none!important;opacity:1!important;transform:none!important}
  .preloader::after{display:none}
  html.preloader-reveal body > :not(.preloader):not(#webgl_canvas){animation:none!important}
  .preloader__bar span{animation:none!important;transform:scaleX(1)}
  .preloader__skip{animation:none!important;opacity:1!important}
}