/* =========================================================================
   Section « Projection » — le pont entre la promesse du hero et le parcours.
   Fond navy pour prolonger le monde du hero, une seule vidéo 16:9 comme centre
   de gravité, et le mot IMMERSION en particules repris du hero 1 comme décor :
   il flotte au-dessus du cadre et passe derrière lui, sans jamais lui voler la
   vedette. Styles isolés sous .pj — rien n'est partagé avec #neuform-hero.
   ========================================================================= */

.pj{
  position:relative;
  overflow:hidden;                 /* le mot peut déborder sans créer de scroll */
  background:#0B1D33;
  color:#F3F1ED;
  padding:clamp(104px,calc(9.4vw + 54px),190px) 0 clamp(84px,10vw,136px);
  isolation:isolate;
}

/* halo très doux, dans l'axe de la vidéo */
.pj::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(62% 48% at 50% 58%,rgba(31,54,86,.55) 0%,rgba(11,29,51,0) 72%);
  pointer-events:none;
  z-index:0;
}

.pj__wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding-inline:clamp(24px,4.2vw,60px);
}

/* ---------- la seule ligne de texte : la transition, après la vidéo ---------- */

.pj__outro{
  margin:clamp(56px,7vw,104px) auto 0;
  max-width:820px;
  text-align:center;
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;
  font-size:clamp(26px,2.6vw,40px);
  line-height:1.14;
  letter-spacing:-.02em;
  color:#ECE9E3;
  text-wrap:balance;
}

/* ---------- scène : le mot en particules + la vidéo ---------- */

.pj__stage{
  position:relative;
  margin-top:0;
}

/* le mot IMMERSION, décor et rien d'autre */
.pj__word{
  position:absolute;
  left:50%;
  top:0;
  width:min(1320px,94vw);
  aspect-ratio:3.9;
  transform:translate(-50%,-64%);   /* ~78 % du mot reste au-dessus du cadre */
  opacity:.52;
  pointer-events:none;
  z-index:0;
  /* les points se dissolvent avant de rencontrer le haut de la vidéo */
  -webkit-mask-image:linear-gradient(to bottom,#000 0 62%,rgba(0,0,0,.5) 74%,transparent 85%);
  mask-image:linear-gradient(to bottom,#000 0 62%,rgba(0,0,0,.5) 74%,transparent 85%);
}
.pj__word canvas{
  display:block;
  width:100%;
  height:100%;
}
/* repli sans JS / sans canvas */
.pj__word-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Instrument Serif",Georgia,serif;
  font-size:clamp(46px,8.4vw,132px);
  line-height:1;
  letter-spacing:.02em;
  color:rgba(243,241,237,.5);
  white-space:nowrap;
}
.pj__word.is-ready .pj__word-fallback{display:none}

/* ---------- le cadre vidéo ---------- */

.pj__frame{
  position:relative;
  z-index:1;
  margin:0 auto;
  max-width:min(1000px,92%);
  padding:1px;                       /* le filet dégradé */
  border-radius:19px;
  background:linear-gradient(135deg,rgba(201,119,90,.72),rgba(243,241,237,.14) 45%,rgba(167,183,174,.3));
  box-shadow:0 46px 90px -44px rgba(0,0,0,.85);
}

.pj__frame-inner{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  aspect-ratio:16/9;
  background:#081526;
}

.pj__poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* La miniature finale est déjà étalonnée aux couleurs d'Immersion : aucun
     filtre ne vient la ternir. Elle respire légèrement au survol. */
  transform:scale(1);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}

/* texture d'échiquier, très discrète, et vignettage pour asseoir le bouton */
.pj__grain,
.pj__vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* La miniature porte déjà son propre damier : le calque décoratif disparaît. */
.pj__grain{display:none}
/* Un simple voile de pied, juste assez pour asseoir la ligne de cadre. Les
   deux tiers hauts — le titre à gauche, le portrait à droite — restent nets. */
.pj__vignette{
  background:linear-gradient(to top,
    rgba(8,21,38,.62) 0%,
    rgba(8,21,38,.16) 20%,
    rgba(8,21,38,0) 40%);
}

/* affordance de lecture — décor tant que le vrai teaser n'est pas branché ;
   projection.js la transforme en vrai bouton dès que data-video-src est rempli */
/* Disque de verre sombre au repos, triangle terracotta plein. Au survol il
   se remplit de terracotta et le triangle passe en ivoire : l'état change
   franchement, sans clignoter. Il reste centré, dans l'espace laissé libre
   entre le titre et le portrait de la miniature. */
.pj__play{
  position:absolute;
  left:50%;
  /* Au centre de la composition : c'est là que l'œil cherche la commande de
     lecture. Le halo ci-dessous creuse une poche sombre sous le disque pour
     que le recouvrement du titre soit lu comme voulu, et non comme un accident. */
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:5.6rem;
  height:5.6rem;
  border-radius:50%;
  background:rgba(8,21,38,.58);
  border:1.5px solid rgba(243,241,237,.66);
  backdrop-filter:blur(4px) saturate(1.15);
  box-shadow:0 20px 48px -18px rgba(0,0,0,.9),
             0 0 0 8px rgba(8,21,38,.16);
  transition:transform .55s cubic-bezier(.16,1,.3,1),
             background-color .45s ease,
             border-color .45s ease,
             box-shadow .45s ease;
}
.pj__play svg{
  width:28px;
  height:28px;
  color:#C9775A;
  transform:translateX(2px);        /* le triangle est optiquement centré */
  transition:color .45s ease;
}
/* Poche de lumière sombre : elle assied le disque sur la miniature sans
   assombrir le reste du cadre. */
.pj__play::before{
  content:"";
  position:absolute;
  inset:-46px;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(8,21,38,.46),rgba(8,21,38,0) 76%);
  pointer-events:none;
  z-index:-1;
}
.pj__play::after{                    /* onde lente */
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  border:1px solid rgba(201,119,90,.45);
  animation:pj-ping 4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pj-ping{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.34);opacity:0}
  100%{transform:scale(1.34);opacity:0}
}
.pj__frame:hover .pj__play,
.pj__play:hover,
.pj__play:focus-visible{
  transform:translate(-50%,-50%) scale(1.06);
  background:#C9775A;
  border-color:rgba(243,241,237,.9);
  box-shadow:0 24px 54px -18px rgba(0,0,0,.92),
             0 0 0 10px rgba(201,119,90,.18);
}
.pj__frame:hover .pj__play svg,
.pj__play:focus-visible svg{color:#F3F1ED}
.pj__frame:hover .pj__poster{transform:scale(1.015)}
.pj__play:focus-visible{outline:none}
/* Quand projection.js remplace la pastille par un vrai bouton. */
button.pj__play{padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* La vidéo prend exactement la place de la façade, sans saut de mise en page. */
.pj__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#081526;
  border-radius:inherit;
}
/* Le cadre ne devient cliquable que lorsqu'une vidéo est réellement branchée. */
.pj__frame[data-video-src]:not([data-video-src=""]){cursor:pointer}

/* marqueurs de cadre */
.pj__meta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(16px,1.7vw,22px) clamp(14px,1.5vw,20px);
  font:500 11px/1 "Inter Tight",Arial,sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(243,241,237,.58);
}
.pj__dot{
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:#C9775A;
}

/* ---------- arrivée au scroll ---------- */

.pj__outro,
.pj__frame{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1),
             transform 1.05s cubic-bezier(.16,1,.3,1);
}
.pj__frame{
  transform:translateY(26px) scale(.985);
  transition-delay:.14s;
}
.pj__outro{transition-delay:.24s}
.pj.is-in .pj__outro{opacity:1;transform:none}
.pj.is-in .pj__frame{opacity:1;transform:none}
/* si le JS ne tourne pas, rien ne doit rester caché */
.pj.no-js .pj__outro,
.pj.no-js .pj__frame{opacity:1;transform:none}

/* ---------- mobile ---------- */

@media(max-width:767px){
  .pj{padding:96px 0 76px}
  .pj__outro{margin-top:56px;font-size:clamp(22px,6.4vw,28px)}
  .pj__stage{margin-top:0}
  .pj__word{
    width:min(560px,100vw);
    aspect-ratio:3.9;
    transform:translate(-50%,-70%);
    opacity:.44;
  }
  .pj__frame{border-radius:15px}
  .pj__frame-inner{border-radius:14px}
  .pj__play{width:4.25rem;height:4.25rem;box-shadow:0 14px 34px -16px rgba(0,0,0,.88),0 0 0 6px rgba(8,21,38,.16)}
  .pj__play svg{width:22px;height:22px}
  .pj__play::before{inset:-32px}
  .pj__meta{font-size:9px;letter-spacing:.2em}
}

/* ---------- mouvement réduit ---------- */

@media(prefers-reduced-motion:reduce){
  .pj__outro,
  .pj__frame{opacity:1;transform:none;transition:none}
  .pj__play,
  .pj__play::after{animation:none;transition:none}
}