/* FIN DU SITE · scène finale de l'accueil (2026-11-11)
   Choix de Steeve : garder l'expérience et la rendre riche. Le tunnel est plus
   court et lisible, la scène finale montre Steeve, la phrase dite par sa voix
   s'écrit tout de suite, deux actions. Le balisage vient de js/beyond.js ; les
   sélecteurs sont préfixés par body pour passer devant les styles que ce
   script injecte après le chargement. Transform et opacity seulement. */

/* Le tunnel : un écran au lieu d'un et demi, et un texte qu'on lit. */
body .phantom-descent{height:105vh}
body .phantom-descent__text{
  font-family:'Anton',Impact,'Oswald',sans-serif;font-weight:400;
  font-size:clamp(2.6rem,8vw,6.5rem);line-height:.95;letter-spacing:.01em;
  color:#f5f1e9;text-transform:uppercase;text-align:center
}
body .phantom-descent__sub{
  font-family:'AS Nav','Montserrat',sans-serif;font-size:13px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(233,227,216,.62);margin-top:1.2rem;text-align:center
}

/* La scène finale. */
body .phantom.phantom--scene{
  display:block;height:auto;min-height:100vh;padding:0;perspective:none;transform-style:flat;
  position:relative;overflow:hidden;background:#070707;isolation:isolate
}
.phantom--scene .phantom__fond{
  position:absolute;inset:0;z-index:-1;
  background:#070707 url('/assets/img/fin/steeve-vestiaire.webp') 72% 30%/cover no-repeat;
  transform:scale(1.06);transition:transform 6s cubic-bezier(.16,1,.3,1)
}
.phantom--scene.is-vue .phantom__fond{transform:scale(1)}
.phantom--scene .phantom__fond::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#070707 0%,rgba(7,7,7,.94) 34%,rgba(7,7,7,.55) 58%,rgba(7,7,7,.1) 100%),
             linear-gradient(180deg,#0a0a0a 0%,rgba(10,10,10,0) 18%,rgba(10,10,10,0) 78%,#070707 100%)
}
.phantom--scene .phantom__contenu{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  min-height:100vh;max-width:1360px;margin:0 auto;padding:clamp(96px,12vh,140px) clamp(20px,5vw,72px) clamp(64px,10vh,110px)
}
.phantom--scene .phantom__kicker{
  margin:0 0 18px;font-family:'AS Nav','Montserrat',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:#cda85c
}
body .phantom--scene .phantom__counter{
  margin:0 0 14px;font-family:'AS Nav','Montserrat',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.24em;color:rgba(233,227,216,.5)
}
body .phantom--scene .phantom__text{
  max-width:min(22ch,100%);min-height:3.6em;margin:0;text-align:left;
  font-family:'Anton',Impact,'Oswald',sans-serif;font-weight:400;font-size:clamp(1.9rem,4.4vw,3.6rem);
  line-height:1.08;letter-spacing:.005em;text-transform:uppercase;color:#f5f1e9;
  border-right:3px solid #ae0000;padding-right:.15em
}
.phantom--scene .phantom__voix{display:flex;align-items:center;gap:14px;margin-top:26px}
body .phantom--scene .phantom__voice-icon{width:40px;height:40px;margin:0;color:rgba(174,0,0,.75);border:1px solid rgba(174,0,0,.45);border-radius:50%}
body .phantom--scene .phantom__voice-icon svg{width:18px;height:18px}
.phantom--scene .phantom__ecouter{
  border:0;background:none;padding:8px 0;cursor:pointer;
  font-family:'AS Nav','Montserrat',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(233,227,216,.8);text-decoration:underline;text-decoration-color:rgba(233,227,216,.3);text-underline-offset:5px
}
.phantom--scene .phantom__ecouter:hover{color:#fff;text-decoration-color:#ae0000}
.phantom--scene .phantom__ecouter:focus-visible,.phantom--scene .phantom__ligne:focus-visible{outline:2px solid #cda85c;outline-offset:4px}
body .phantom--scene .phantom__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px}
.phantom--scene .phantom__ligne{
  border:1px solid rgba(233,227,216,.28);background:rgba(7,7,7,.5);padding:15px 20px;cursor:pointer;
  font-family:'AS Nav','Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#f5f1e9;
  transition:border-color .2s,background .2s
}
.phantom--scene .phantom__ligne:hover{border-color:#cda85c;background:rgba(205,168,92,.08)}
body .phantom--scene .phantom__hint{margin-top:44px;font-family:'AS Nav','Montserrat',sans-serif;font-size:10.5px;letter-spacing:.42em;color:rgba(233,227,216,.3)}

@media (max-width:768px){
  body .phantom-descent{height:90vh}
  body .phantom.phantom--scene{min-height:auto}
  .phantom--scene .phantom__fond{background-position:78% 20%}
  .phantom--scene .phantom__fond::after{
    background:linear-gradient(180deg,rgba(7,7,7,.2) 0%,rgba(7,7,7,.55) 34%,rgba(7,7,7,.94) 58%,#070707 100%)
  }
  .phantom--scene .phantom__contenu{min-height:auto;justify-content:flex-end;padding-top:46vh;padding-bottom:132px}
  body .phantom--scene .phantom__text{font-size:clamp(1.7rem,8vw,2.4rem);max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .phantom--scene .phantom__fond{transform:none;transition:none}
}