/* =========================================================
   FOND ANIMÉ DU HEADER — derrière le header actuel (même taille)
   3 fonds : or liquide (WebGL), vitrine vidéo, aurore royale (léger)
   ========================================================= */
.top{isolation:isolate}
.hd-fond{position:absolute;z-index:-1;top:0;bottom:-10px;left:calc(50% - 50vw);width:100vw;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.hd-fond > *{position:absolute;inset:0}
.hd-fond canvas{width:100%;height:100%;display:block}
/* voile : le logo et le texte restent lisibles */
.hd-fond:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07070aa8 0%,#07070a40 40%,#07070a14 70%,#07070a70 100%)}
/* liseré doré qui court sous le header */
.hd-fil{position:absolute;left:0;right:0;bottom:10px;top:auto!important;height:1px;background:linear-gradient(90deg,transparent,#ffd65a 45%,#fff8dc 50%,#ffd65a 55%,transparent);background-size:220% 100%;animation:hdFil 3.2s linear infinite;opacity:.8;z-index:2}
@keyframes hdFil{from{background-position:110% 0}to{background-position:-110% 0}}

/* --- vitrine vidéo --- */
.hd-vids{display:flex;gap:6px;width:max-content;height:100%;padding:4px 0;animation:hdDefile 40s linear infinite}
.hd-vids video{height:100%;aspect-ratio:9/12;object-fit:cover;border-radius:10px;flex:none;filter:saturate(1.2) brightness(.8)}
@keyframes hdDefile{to{transform:translateX(-50%)}}
.hd-reflet{background:linear-gradient(105deg,transparent 38%,#ffd65a30 48%,#fff6 50%,#ffd65a30 52%,transparent 62%);background-size:300% 100%;animation:hdReflet 5s ease-in-out infinite;mix-blend-mode:screen;z-index:1}
@keyframes hdReflet{0%,30%{background-position:120% 0}80%,100%{background-position:-120% 0}}

/* --- aurore royale (CSS seul) --- */
.hd-aurore{background:
  radial-gradient(60% 140% at 15% 120%,#f5b40055,transparent 60%),
  radial-gradient(50% 160% at 85% -30%,#2aabee44,transparent 60%),
  radial-gradient(40% 120% at 55% 130%,#9b5cff33,transparent 60%),#07070a;
  background-size:160% 160%;animation:hdAurore 12s ease-in-out infinite alternate}
@keyframes hdAurore{0%{background-position:0% 50%,100% 0%,50% 100%}100%{background-position:100% 50%,0% 100%,30% 0%}}
.hd-rayons{background:repeating-linear-gradient(100deg,transparent 0 46px,#ffd65a14 52px 60px,transparent 66px 120px);background-size:240px 100%;animation:hdRayons 9s linear infinite;mix-blend-mode:screen}
@keyframes hdRayons{to{background-position:240px 0}}

/* --- le sélecteur pour comparer (temporaire : ?fonds dans l'adresse) --- */
.hd-choix{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:90;display:flex;gap:6px;padding:6px;border-radius:99px;background:#0b0a0fe6;border:1px solid #f5b40055;box-shadow:0 10px 30px #000a}
.hd-choix button{padding:9px 13px;border-radius:99px;font:800 12.5px Manrope,system-ui,sans-serif;color:#e9e1c8;background:transparent;border:0;white-space:nowrap}
.hd-choix button.on{background:linear-gradient(135deg,#fff1b8,#ffd65a 25%,#f5b400 55%,#b07a00);color:#1a1200}

body.busy .hd-fond *,body.en-jeu .hd-fond *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.hd-fond *{animation:none!important}}