/* Animations de l'accueil. Tout est désactivé si l'utilisateur demande moins de mouvement. */

@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes letterIn{from{opacity:0;transform:translateY(.7em) rotateX(-70deg)}to{opacity:1;transform:none}}
@keyframes spread{from{letter-spacing:.04em;opacity:0}to{letter-spacing:.42em;opacity:1}}
@keyframes artIn{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes halo{0%,100%{outline-color:rgba(197,160,89,.9);outline-offset:8px}50%{outline-color:rgba(197,160,89,.15);outline-offset:20px}}
@keyframes sun{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.85)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}
@keyframes drawArch{to{stroke-dashoffset:0}}
@keyframes archGlow{0%,100%{stroke:#C5A059}50%{stroke:#F3E2B3}}
@keyframes waveBack{to{background-position-x:600px}}
@keyframes waveFront{to{background-position-x:-600px}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes shine{0%,55%{transform:translateX(-140%) skewX(-20deg)}100%{transform:translateX(320%) skewX(-20deg)}}
@keyframes nowPulse{0%,100%{box-shadow:0 0 0 0 rgba(197,160,89,.65)}60%{box-shadow:0 0 0 14px rgba(197,160,89,0)}}

/* ---------- Héros : structure ---------- */
.hero .dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-grid,.colonnade,.sea{position:relative;z-index:1}
.hero h1 .sub{display:block;color:var(--gold);letter-spacing:.42em;font-size:.58em;margin-top:.35em}
.hero h1 .l{display:inline-block}
.hero-art{
  transition:none !important;
  transform:none !important;
}
.hero-arch{position:relative}
.hero-arch::before{content:"";position:absolute;left:50%;top:46%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(197,160,89,.55),rgba(197,160,89,0) 68%);transform:translate(-50%,-50%)}
.hero-arch img{position:relative}

/* ---------- Colonnade dessinée arche par arche ---------- */
.js .colonnade{background:none;animation:none;display:flex;justify-content:center;overflow:hidden}
.colonnade svg{flex:none}
.colonnade path{stroke-dasharray:1;stroke-dashoffset:0}

/* ---------- Mer : deux vagues qui glissent ---------- */
.sea{height:40px;background:var(--navy);margin-top:-1px}
.sea::before,.sea::after{content:"";position:absolute;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='40' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C100 0 200 0 300 20S500 40 600 20V40H0Z' fill='%23005C7A'/%3E%3C/svg%3E") repeat-x 0 100%/600px 100%}
.sea::before{height:34px;opacity:.5;background-position-x:-200px}
.sea::after{height:26px}

/* ---------- Bandeau défilant ---------- */
.marquee{background:var(--sand);overflow:hidden;border-bottom:1px solid var(--line)}
.marquee .track{display:flex;width:max-content}
.marquee .grp{display:flex;flex:none}
.marquee span{font-family:var(--display);font-weight:600;padding:1rem 0 1rem 3.2rem;white-space:nowrap;position:relative}
.marquee span::before{content:"";position:absolute;left:1.35rem;top:50%;width:9px;height:9px;background:var(--gold);transform:translateY(-50%) rotate(45deg)}
.marquee:hover .track{animation-play-state:paused}

/* ---------- Bouton principal : reflet ---------- */
.hero .btn-gold{position:relative;overflow:hidden}
.hero .btn-gold::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}

/* ---------- Apparition au défilement ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.rv-arch{transform:scaleY(.5) translateY(40px);transform-origin:bottom}
.rv-arch.in{transition:opacity .8s ease var(--d,0ms),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms),background .3s}
.rv-slide{transform:translateX(34px)}
.rv-pop{transform:scale(.8)}
.rv-line{opacity:1;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.rv-line.in{transform:scaleX(1)}

/* Survols */
.arch-card{transition:background .3s,transform .4s}
.arch-card.in:hover{background:var(--teal);transform:translateY(-10px)}
.tile{transition:transform .35s}
.tile.in:hover{transform:translateY(-8px)}
.prize-list li{transition:padding .25s,border-color .25s}
.prize-list li.in:hover{padding-left:1.5rem;border-color:var(--teal)}

/* ---------- Séquence d'entrée du héros ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .hero .kicker{animation:fadeUp .9s .1s both}
  .js .hero h1 .l{animation:letterIn .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--i) * 60ms)}
  .js .hero h1 .sub{animation:spread 1.6s 1.1s cubic-bezier(.2,.7,.2,1) both}
  .js .hero .tagline{animation:fadeUp .9s 1.5s both}
  .js .hero .when{animation:fadeUp .9s 1.7s both}
  .js .hero .actions{animation:fadeUp .9s 1.9s both}
  .js .hero .count{animation:fadeUp .9s 2.1s both}

  .js .hero-arch{animation:artIn 1.2s .5s cubic-bezier(.2,.8,.2,1) both,float 7s 1.8s ease-in-out infinite,halo 5s 1.8s ease-in-out infinite}
  .hero-arch::before{animation:sun 4.5s ease-in-out infinite}

  .colonnade path{stroke-dashoffset:1;
    animation:drawArch 1.3s cubic-bezier(.4,.1,.2,1) forwards,archGlow 5s ease-in-out infinite;
    animation-delay:calc(.9s + var(--d) * 110ms),calc(3s + var(--d) * 300ms)}

  .sea::before{animation:waveBack 16s linear infinite}
  .sea::after{animation:waveFront 10s linear infinite}

  .marquee .track{animation:marquee 45s linear infinite}
  .hero .btn-gold::after{animation:shine 4.5s 3s infinite}
  .editions li.now{animation:nowPulse 2.6s ease-out infinite}
}

@media (prefers-reduced-motion:reduce){
  .hero .dust{display:none}
  .marquee{overflow-x:auto}
}

/* =========================
   Animation scène Hero
   ========================= */
@keyframes heroPhotoIn{
  from{opacity:0;transform:translateY(-50%) translateX(70px) scale(1.08)}
  to{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}
}
@keyframes tileFloatA{
  0%,100%{transform:translate3d(0,0,0) rotate(17deg)}
  50%{transform:translate3d(-10px,-20px,0) rotate(11deg)}
}
@keyframes tileFloatB{
  0%,100%{transform:translate3d(0,0,0) rotate(-18deg)}
  50%{transform:translate3d(12px,-24px,0) rotate(-10deg)}
}
@keyframes tileFloatC{
  0%,100%{transform:translate3d(0,0,0) rotate(-12deg)}
  50%{transform:translate3d(-8px,18px,0) rotate(-20deg)}
}
@keyframes tileFloatD{
  0%,100%{transform:translate3d(0,0,0) rotate(27deg)}
  50%{transform:translate3d(10px,-14px,0) rotate(20deg)}
}
@keyframes glowPulse{
  0%,100%{opacity:.35;transform:scale(.9)}
  50%{opacity:.85;transform:scale(1.12)}
}

@media (prefers-reduced-motion:no-preference){
  .js .hero-photo{animation:heroPhotoIn 1.35s cubic-bezier(.18,.78,.2,1) .2s both}
  .js .tile-a{animation:tileFloatA 5.5s ease-in-out 1.1s infinite}
  .js .tile-b{animation:tileFloatB 6.5s ease-in-out 1.5s infinite}
  .js .tile-c{animation:tileFloatC 5.8s ease-in-out 1.3s infinite}
  .js .tile-d{animation:tileFloatD 7s ease-in-out 1.8s infinite}
  .js .floating-glow{animation:glowPulse 4.5s ease-in-out 1s infinite}
}

@media (prefers-reduced-motion:reduce){
  .floating-tile{animation:none!important}
}

/* Désactiver tout mouvement du halo bleu au survol */
.hero-blue-glow,
.hero-blue-reflection {
  transform: none !important;
  animation: none !important;
}
.floating-glow {
  animation: none !important;
  transform: none !important;
}