/* YORU — effets : intro, lettres, scan, bandeaux, diaporama, épinglage, descente, zoom, carrousels (maquettes v4–v6) */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}

/* Barre de progression LED (haut de page) */
.progression{position:fixed;left:0;top:0;width:100%;height:3px;z-index:70;transform-origin:0 50%;transform:scaleX(var(--doc,0));background:linear-gradient(90deg,var(--cobalt),var(--elec));box-shadow:0 0 12px var(--elec)}

/* Intro : sceau qui s'allume, volets qui s'ouvrent */
.intro{position:fixed;inset:0;z-index:100;pointer-events:none}.intro .volet{position:absolute;left:0;right:0;height:50.2%;background:var(--abysse);transition:transform 1.1s cubic-bezier(.8,0,.15,1)}.intro .volet.h{top:0}.intro .volet.b{bottom:0}.intro .sceau{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:#fff url(/assets/img/logo.png) center/134px no-repeat;animation:allume 1.2s steps(1) both;transition:opacity .45s,transform .8s cubic-bezier(.7,0,.2,1)}.intro .neon{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--display);font-size:clamp(64px,10vw,150px);color:#eafcff;animation:clignote 1.2s steps(1) both;transition:opacity .4s}body.ouvre .intro .volet.h{transform:translateY(-101%)}body.ouvre .intro .volet.b{transform:translateY(101%)}body.ouvre .intro .sceau{opacity:0;transform:scale(.5)}body.ouvre .intro .neon{opacity:0}
@keyframes allume{0%{box-shadow:none;opacity:.15}15%{box-shadow:0 0 0 2px #3fd7ff,0 0 30px #3fd7ff;opacity:1}24%{box-shadow:none;opacity:.4}36%,100%{box-shadow:0 0 0 3px #3fd7ff,0 0 40px #3fd7ff,0 0 110px #3fd7ff88;opacity:1}}
@keyframes clignote{0%{opacity:.08;text-shadow:none}10%{opacity:1;text-shadow:0 0 6px #fff,0 0 18px #3fd7ff,0 0 50px #3fd7ff}16%{opacity:.15;text-shadow:none}26%,100%{opacity:1;text-shadow:0 0 6px #fff,0 0 18px #3fd7ff,0 0 50px #3fd7ff,0 0 100px #1c9ad6}}

/* Titres lettre par lettre */
.split .m{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .14em;margin:-.04em 0 -.14em}.split .l{display:inline-block;animation:lettre 1.05s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*26ms + var(--d,0ms))}
@keyframes lettre{from{transform:translateY(112%) rotate(7deg);opacity:0}}html.js body:not(.pret) .split .l,html.js .split-vue:not(.vu) .l{animation-play-state:paused}
/* Éléments du hero qui entrent après le titre */
.entre{animation:entre 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes entre{from{opacity:0;transform:translateY(30px)}}html.js body:not(.pret) .entre{animation-play-state:paused}html:not(.js) .entre,html:not(.js) .split .l{animation:none}html:not(.js) .intro{display:none}

/* Bouton : reflet qui traverse au survol */
.btn{position:relative;overflow:hidden;isolation:isolate}.btn::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,#fff0 35%,#ffffff8c 50%,#fff0 65%);transform:translateX(-110%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}.btn:hover::after{transform:translateX(110%)}

/* Bordure LED qui tourne (survol des cartes) */
.trace{position:relative}.trace::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--ang),#3fd7ff00 0 62%,#3fd7ff 80%,#fff 86%,#3fd7ff00 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;filter:drop-shadow(0 0 6px #3fd7ff)}.trace:hover::before,.trace:focus-visible::before{opacity:1;animation:tour 2.6s linear infinite}
@keyframes tour{to{--ang:360deg}}

/* Image qui se dévoile avec une ligne LED qui la balaie */
.scan{position:relative;overflow:hidden}.scan>img{transition:clip-path 1.5s cubic-bezier(.65,0,.25,1)}html.js .scan>img{clip-path:inset(0 0 100% 0)}.scan::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#3fd7ff00 calc(100% - 46px),#3fd7ff33 calc(100% - 14px),#3fd7ff calc(100% - 2px),#3fd7ff00);transform:translateY(-100%);opacity:0}html.js .scan.vu>img{clip-path:inset(0 0 0 0)}.scan.vu::after{animation:balayage 1.5s cubic-bezier(.65,0,.25,1) both}
@keyframes balayage{0%{opacity:1;transform:translateY(-100%)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}

/* Mots qui s'allument au défilement */
.scrub span{opacity:.16;transition:opacity .35s,color .35s,text-shadow .35s}.scrub span.on{opacity:1}

/* Bandeau qui défile */
.defile{overflow:hidden;padding:28px 0;position:relative;z-index:2}.defile-piste{display:flex;width:max-content;white-space:nowrap;will-change:transform}.defile-piste span{display:flex;align-items:center;gap:40px;padding-right:40px;font-family:var(--display);font-size:46px;line-height:1}.defile-piste span::after{content:"夜";font-family:var(--kanji);font-size:26px;color:var(--elec);text-shadow:0 0 12px var(--elec)}.defile--contour{background:#000;border-block:1px solid #3fd7ff55}.defile--contour span{color:transparent;-webkit-text-stroke:1.2px #eafcff}.defile--contour span:nth-child(odd){color:#eafcff;-webkit-text-stroke:0;text-shadow:0 0 18px #3fd7ff}

/* Hero à diapositives liquides */.diapos{position:absolute;z-index:2;right:max(40px,calc((100vw - 84rem)/2 + 40px));bottom:46px;display:flex;gap:18px;list-style:none}.diapos li{width:150px;font-size:15px;font-weight:500;color:#ffffff8c;transition:color .4s}.diapos li.on{color:#fff}.diapos i{display:block;height:2px;background:#ffffff38;margin-bottom:12px;overflow:hidden}.diapos i::after{content:"";display:block;height:100%;background:var(--elec);box-shadow:0 0 8px var(--elec);transform:scaleX(0);transform-origin:0 50%}.diapos li.on i::after{animation:remplit var(--duree,6.5s) linear forwards}.fige .diapos li.on i::after{transform:scaleX(.35)}
@keyframes remplit{to{transform:scaleX(1)}}
@keyframes goutte{from{top:-16px}to{top:46px}}

/* Section épinglée : piste horizontale */
.pin{position:relative}.pin .colle{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.piste-h{display:flex;gap:34px;width:max-content;padding:0 max(40px,calc((100vw - 84rem)/2 + 40px));will-change:transform}

/* Descente / remontée d'étage */
.descente{position:relative;height:260vh;background:#000;color:#fff}.descente .colle{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}.descente .photo{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;transform:scale(calc(1.3 - var(--p,0)*.3));filter:brightness(calc(.35 + var(--p,0)*.4)) saturate(1.1)}.descente .voile{position:absolute;inset:0;background:radial-gradient(ellipse at center,#0004,#000d 78%)}.descente .etage{position:absolute;z-index:3;left:max(40px,calc((100vw - 84rem)/2 + 40px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font-size:14px;font-weight:700;letter-spacing:.1em;color:#cfe3f5}.descente .fenetre{width:118px;height:118px;border-radius:50%;border:1.5px solid #3fd7ff;box-shadow:0 0 22px #3fd7ff88,inset 0 0 22px #3fd7ff55;overflow:hidden;background:#000a}.descente .col{transition:transform .2s linear}.descente .col b{display:flex;align-items:center;justify-content:center;height:118px;font-family:var(--display);font-weight:400;font-size:42px;color:#eafcff;text-shadow:0 0 14px #3fd7ff}.descente .contenu{position:relative;z-index:2;padding:0 20px}html.js .descente .contenu{opacity:calc(var(--p,0)*3 - .5);transform:translateY(calc((1 - min(1,var(--p,0)*2.2))*60px))}.descente .petit{font-size:20px;color:#cfe3f5;margin-bottom:10px}.descente .enseigne{font-family:var(--display);font-size:clamp(64px,10vw,160px);line-height:.95;color:transparent;-webkit-text-stroke:1.2px #ffffff52;transition:color .2s,text-shadow .2s}.descente.allume .enseigne{color:#eafcff;-webkit-text-stroke:0;animation:clignote 1.3s steps(1) both}.descente p.txt{font-size:20px;color:#d6e4f2;margin:22px auto 34px;max-width:42ch}.fige .descente .contenu{opacity:1;transform:none}

/* Rangée « Le lieu » */
.galerie .rang{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(40px,calc((100vw - 84rem)/2 + 40px)) 18px;scrollbar-width:none}.galerie .rang::-webkit-scrollbar{display:none}.galerie figure{flex:0 0 min(34vw,480px);scroll-snap-align:start}.galerie .cadre{overflow:hidden;border-radius:18px;aspect-ratio:3/4}.galerie img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);will-change:transform}.galerie figcaption{margin-top:16px;font-family:var(--display);font-size:26px}.galerie figcaption small{display:block;font-family:var(--texte);font-size:16px;opacity:.7}.fleches{display:flex;gap:10px}.fleches button{width:58px;height:58px;border-radius:50%;border:1.5px solid currentColor;background:none;color:inherit;font-size:22px;cursor:pointer;transition:background .3s,color .3s}.fleches button:hover{background:var(--abysse);color:#fff;border-color:var(--abysse)}

/* Captures (?fige) : tout à l'état final */
.fige *,.fige *::before,.fige *::after{animation:none!important;transition:none!important}

@media (max-width:900px){.diapos{display:none}.defile{padding:18px 0}.defile-piste span{font-size:30px;gap:26px;padding-right:26px}.pin .colle{position:static;height:auto;padding:76px 0}.piste-h{overflow-x:auto;width:auto;padding:0 20px 10px;gap:16px;scroll-snap-type:x mandatory;scrollbar-width:none}.descente{height:auto}.descente .colle{position:relative;height:72svh}.descente .photo{transform:none;filter:brightness(.55)}.descente .contenu{opacity:1;transform:none}.descente .etage{display:none}.descente .enseigne{font-size:52px;color:#eafcff;-webkit-text-stroke:0;text-shadow:0 0 6px #fff,0 0 18px #3fd7ff,0 0 50px #3fd7ff}.descente p.txt{font-size:17px}.galerie .rang{padding:0 20px 10px}.galerie figure{flex-basis:72%}.galerie figcaption small,.fleches{display:none}
  /* les rangées à glisser gardent leur marge gauche une fois aimantées */
.tuiles,.pile,.affiches,.panneaux,.etapes .rail,.piste-h,.galerie .rang{scroll-padding-inline:20px}.pied li{white-space:normal;overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){.scan>img{clip-path:none}.scrub span{opacity:1}}

/* Diaporama en fondu, étiquettes d'étage, enseigne néon (v5) */
.vues{position:absolute;inset:0;overflow:hidden;background:#000}.vues img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.4s ease,transform 8s linear}.vues img.on{opacity:1;transform:scale(1)}.diapos li{cursor:pointer}.niveau{display:inline-flex;align-items:center;gap:12px;font-size:17px;font-weight:700;padding:11px 22px;border-radius:999px;border:1px solid #3fd7ff99;background:#000a;backdrop-filter:blur(8px);box-shadow:0 0 24px #3fd7ff44;margin-bottom:26px}.niveau i{font-style:normal;color:var(--elec);display:inline-block;animation:fleche 1.6s ease-in-out infinite}.niveau--haut i{animation-name:fleche-haut}
@keyframes fleche{50%{transform:translateY(5px)}}
@keyframes fleche-haut{50%{transform:translateY(-5px)}}

/* YORU v6 — base v4 améliorée : photos en fondu propre, enseigne toujours lisible, étages légendés */.diapos li{cursor:pointer}
/* mots qui s'allument : jamais illisibles */
.scrub span{opacity:.34}
/* plats : rotation légère */
@keyframes glisse{50%{transform:translateX(6px)}}
/* descente : enseigne allumée dès le départ (clignote en arrivant), étages légendés */
@media (min-width:901px){.descente{height:210vh}}.descente .enseigne{color:#eafcff;-webkit-text-stroke:0;text-shadow:0 0 6px #fff,0 0 18px #3fd7ff,0 0 50px #3fd7ff,0 0 100px #1c9ad6}.descente.remonte .enseigne{color:#fff;text-shadow:0 4px 40px #000,0 0 30px #3fd7ff66}html.js .descente .contenu{opacity:calc(.25 + var(--p,0)*2.2)}.descente .col b{flex-direction:column;line-height:1}.descente .col b small{font-family:var(--texte);font-size:13px;font-weight:700;letter-spacing:.06em;color:#9fdcf2;margin-top:6px;text-shadow:none}.descente .niveau{margin-bottom:22px}
@media (max-width:900px){.descente .niveau{font-size:14px;padding:9px 16px;white-space:nowrap}
}
/* diaporama du hero plus rapide : 3,5 s par photo, fondu court */

/* Mobile vivant : rangées en carrousel, points LED, descente et zoom de la piste rétablis */
@media (min-width:901px){.points{display:none}}
@media (max-width:900px){.vivant>:not(#z){transition:transform .22s ease-out,opacity .22s ease-out;transform-origin:50% 60%}.points{display:flex;justify-content:center;gap:8px;margin-top:20px}.points i{width:8px;height:8px;border-radius:99px;background:currentColor;opacity:.28;transition:width .35s,opacity .35s,background .35s}.points i.on{width:28px;opacity:1;background:var(--elec);box-shadow:0 0 10px var(--elec)}
  /* descente vers le club : épinglée aussi sur mobile, plus courte */
.descente{height:170vh}.descente .colle{position:sticky;top:0;height:100svh}.descente .photo{transform:scale(calc(1.3 - var(--p,0)*.3));filter:brightness(calc(.4 + var(--p,0)*.35))}html.js .descente .contenu{opacity:calc(.25 + var(--p,0)*2.2)}.descente .etage{display:flex;left:50%;top:96px;transform:translateX(-50%);gap:8px}.descente .fenetre{width:84px;height:84px}.descente .col b{height:84px;font-size:28px}.descente .col b small{font-size:11px}
}