/* ============================================================
   EchoFirst — habillage « V6 » partagé pour les pages intérieures
   (Formations, Actualités, Témoignages, Équipe).
   À charger APRÈS echofirst.css + pages.css.
   Apporte : logo sonar animé, entrée de la nav, et le « v6hero »
   (photo plein cadre + flou progressif + titre révélé lettre par lettre).
   ============================================================ */

/* =====================================================================
   1. Marque sonar (ondes qui se tracent) + entrée de la barre de nav
   ===================================================================== */
.brand{gap:11px;}
.brand .sonar{display:flex;align-items:center;flex-shrink:0;}
.brand .sonar svg{width:24px;height:22px;overflow:visible;display:block;}
.sonar__dot{transform-origin:4px 12px;transform:scale(0);opacity:0;
  animation:sonarDot .5s var(--ease-back) .15s forwards;}
.sonar__w1,.sonar__w2{stroke-dasharray:60;stroke-dashoffset:60;opacity:0;}
.sonar__w1{animation:sonarDraw .6s var(--ease-out) .42s forwards;}
.sonar__w2{animation:sonarDraw .6s var(--ease-out) .62s forwards;}
@keyframes sonarDot{to{transform:scale(1);opacity:1;}}
@keyframes sonarDraw{to{stroke-dashoffset:0;opacity:1;}}

.brand img{opacity:0;filter:blur(8px) brightness(0) invert(1);transform:translateX(14px);
  animation:wordmarkIn 1.4s var(--ease-out) .55s forwards;}
.ef-nav.scrolled .brand img,.ef-nav.light .brand img{filter:blur(0) none;}
@keyframes wordmarkIn{to{opacity:1;filter:blur(0) brightness(0) invert(1);transform:translateX(0);}}

.ef-nav .nav-shell{opacity:0;transform:translateY(-14px);
  animation:navShellIn .8s var(--ease-out) .1s forwards;}
@keyframes navShellIn{to{opacity:1;transform:translateY(0);}}

/* tant que la choré n'est pas lancée, on fige à l'état caché — seulement avec JS
   (html.js) : sans JS, is-ready n'arrive jamais et les animations `forwards`
   doivent s'autolancer pour rendre nav et logo visibles */
:where(html.js) body:not(.is-ready) .sonar__dot,:where(html.js) body:not(.is-ready) .sonar__w1,
:where(html.js) body:not(.is-ready) .sonar__w2,:where(html.js) body:not(.is-ready) .brand img,
:where(html.js) body:not(.is-ready) .ef-nav .nav-shell{animation-play-state:paused!important;}

/* =====================================================================
   2. v6hero — bandeau photo plein cadre, flou progressif en bas,
      titre révélé lettre par lettre. Remplace .page-hero.
   ===================================================================== */
.v6hero{--page-pad:clamp(26px,3.6vw,58px);
  position:relative;overflow:hidden;background:var(--navy-dark);color:#fff;
  min-height:clamp(560px,82vh,768px);display:flex;flex-direction:column;}

/* fond : copie floue qui remplit + photo nette dézoomée */
.v6hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.v6hero__back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  transform:scale(1.18);filter:blur(26px) brightness(.6) saturate(1.08);z-index:0;}
.v6hero__photo{position:absolute;top:0;bottom:0;left:50%;display:block;width:60%;height:100%;object-fit:cover;object-position:50% 36%;
  z-index:1;transform:translateX(-50%) scale(1.06);transition:transform 16s var(--ease-out);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);}
body.is-ready .v6hero__photo{transform:translateX(-50%) scale(1);}
@media(max-width:900px){.v6hero__photo{width:100%;-webkit-mask-image:none;mask-image:none;}}

/* voiles navy : lisibilité + ambiance (renforcés en bas) */
.v6hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,42,82,.78) 0%,rgba(11,42,82,.42) 28%,rgba(8,26,52,.56) 60%,rgba(8,26,52,.96) 100%);}
.v6hero__veil::after{content:'';position:absolute;inset:0;
  background:linear-gradient(80deg,rgba(8,26,52,.92) 0%,rgba(8,26,52,.72) 42%,rgba(8,26,52,.30) 68%,rgba(8,26,52,.02) 90%,rgba(8,26,52,0) 100%);}

/* flou progressif (8 couches empilées) en bas du bandeau */
.v6hero__blur{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:3;pointer-events:none;}
.v6hero__blur-layer{position:absolute;inset:0;}
.v6hero__blur-layer:nth-child(1){backdrop-filter:blur(.6px);-webkit-backdrop-filter:blur(.6px);mask-image:linear-gradient(to bottom,transparent 0%,#000 12%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%);}
.v6hero__blur-layer:nth-child(2){backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);mask-image:linear-gradient(to bottom,transparent 12%,#000 25%);-webkit-mask-image:linear-gradient(to bottom,transparent 12%,#000 25%);}
.v6hero__blur-layer:nth-child(3){backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);mask-image:linear-gradient(to bottom,transparent 25%,#000 37%);-webkit-mask-image:linear-gradient(to bottom,transparent 25%,#000 37%);}
.v6hero__blur-layer:nth-child(4){backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);mask-image:linear-gradient(to bottom,transparent 37%,#000 50%);-webkit-mask-image:linear-gradient(to bottom,transparent 37%,#000 50%);}
.v6hero__blur-layer:nth-child(5){backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);mask-image:linear-gradient(to bottom,transparent 50%,#000 62%);-webkit-mask-image:linear-gradient(to bottom,transparent 50%,#000 62%);}
.v6hero__blur-layer:nth-child(6){backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);mask-image:linear-gradient(to bottom,transparent 62%,#000 75%);-webkit-mask-image:linear-gradient(to bottom,transparent 62%,#000 75%);}
.v6hero__blur-layer:nth-child(7){backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);mask-image:linear-gradient(to bottom,transparent 75%,#000 87%);-webkit-mask-image:linear-gradient(to bottom,transparent 75%,#000 87%);}
.v6hero__blur-layer:nth-child(8){backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);mask-image:linear-gradient(to bottom,transparent 87%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 87%,#000 100%);}
.v6hero__blur::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,rgba(8,26,52,.30) 40%,rgba(8,26,52,.60) 70%,rgba(8,26,52,.85) 100%);}

/* contenu : titre en haut, description/stats en bas (dans la zone floutée) */
.v6hero__inner{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:36px;
  padding-top:clamp(150px,19vh,196px);padding-bottom:clamp(40px,6vh,72px);}

.v6hero__eyebrow{color:var(--teal-vif);font-size:clamp(12px,1.05vw,14px);font-weight:700;letter-spacing:2px;text-transform:uppercase;
  opacity:0;transform:translateY(12px);animation:v6FadeUp .7s var(--ease-out) .28s forwards;}
.v6hero__heading{margin-top:16px;width:100%;max-width:min(96vw,1000px);
  font-size:clamp(32px,4.3vw,64px);line-height:1.1;font-weight:600;letter-spacing:-.02em;}
.v6hero__heading em{font-style:italic;font-weight:700;color:var(--teal-vif);}
.v6-line{display:block;overflow:hidden;line-height:1.16;}
.v6-line-inner{display:inline-block;white-space:normal;}
.v6-char{display:inline-block;transform:translateY(112%);opacity:0;
  animation:v6CharReveal .68s var(--ease-out) forwards;}

.v6hero__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(28px,4vw,64px);flex-wrap:wrap;}
.v6hero__lead{max-width:clamp(340px,42vw,560px);
  color:rgba(255,255,255,.80);font-size:clamp(15px,1.2vw,18px);font-weight:300;line-height:1.6;
  opacity:0;transform:translateY(12px);animation:v6FadeUp .7s var(--ease-out) .5s forwards;}
.v6hero__lead strong{color:#fff;font-weight:600;}
.v6hero__lead .v6-num{display:block;margin-bottom:14px;font-size:clamp(12px,1.05vw,14px);font-weight:700;letter-spacing:.06em;color:var(--teal-vif);}

/* stats : reprend .ph-stats de pages.css mais avec entrée */
.v6hero__meta{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end;
  opacity:0;transform:translateY(12px);animation:v6FadeUp .7s var(--ease-out) .64s forwards;}
.v6hero__meta .ph-stat .n{font-size:clamp(24px,2.4vw,30px);}
.v6hero__cta{display:inline-flex;opacity:0;transform:scale(0);
  animation:v6Pop .9s var(--ease-out) .68s forwards;}

body:not(.is-ready) .v6hero__eyebrow,body:not(.is-ready) .v6hero__lead,
body:not(.is-ready) .v6hero__meta,body:not(.is-ready) .v6hero__cta,
body:not(.is-ready) .v6-char{animation-play-state:paused!important;opacity:0;}

@keyframes v6FadeUp{to{opacity:1;transform:translateY(0);}}
@keyframes v6CharReveal{to{transform:translateY(0);opacity:1;}}
@keyframes v6Pop{0%{transform:scale(0);opacity:0;}60%{transform:scale(1.04);opacity:1;}100%{transform:scale(1);opacity:1;}}

/* responsive */
@media(max-width:900px){
  .v6hero{min-height:0;}
  .v6hero__inner{padding-top:clamp(130px,22vh,160px);gap:28px;}
  .v6hero__blur{height:52%;}
  .v6hero__bottom{flex-direction:column;align-items:flex-start;gap:24px;}
}

/* état figé une fois la choré terminée (repos propre + captures fiables) */
body.anim-done .v6-char,body.anim-done .v6hero__eyebrow,body.anim-done .v6hero__lead,
body.anim-done .v6hero__meta,body.anim-done .v6hero__cta,
body.anim-done .ef-nav .nav-shell,body.anim-done .brand img,
body.anim-done .sonar__dot{animation:none!important;opacity:1!important;transform:none!important;}
body.anim-done .brand img{filter:blur(0) brightness(0) invert(1)!important;}
body.anim-done .sonar__w1,body.anim-done .sonar__w2{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;}
body.anim-done .sonar__w2{opacity:.7!important;}

/* dès la 2e page de la session, la nav apparaît sans rejouer son entrée */
body.nav-seen .ef-nav .nav-shell,
body.nav-seen .brand img{animation:none!important;opacity:1!important;transform:none!important;}
body.nav-seen .brand img{filter:blur(0) brightness(0) invert(1)!important;}

/* correctif intégration : sur nav claire (scrolled/light), le wordmark doit
   redevenir sombre — sinon l'animation (fill forwards) le laisse en blanc */
.ef-nav.scrolled .brand img,.ef-nav.light .brand img,
body.anim-done .ef-nav.scrolled .brand img,body.anim-done .ef-nav.light .brand img{
  animation:none!important;filter:none!important;opacity:1!important;transform:none!important;}

@media (prefers-reduced-motion: reduce){
  .v6-char,.v6hero__eyebrow,.v6hero__lead,.v6hero__meta,.v6hero__cta,
  .brand img,.sonar__dot,.sonar__w1,.sonar__w2,.ef-nav .nav-shell{
    animation:none!important;opacity:1!important;transform:none!important;filter:none!important;stroke-dashoffset:0!important;}
  .brand img{filter:brightness(0) invert(1)!important;}
  .v6hero__photo{transform:translateX(-50%) scale(1)!important;}
}