/* ÉTANCHÉI-D — intro « goutte et ondes » + hero vidéo (préfixe ei-). À charger APRÈS /assets/eco/css/site.css.
   Accueil seulement : le rideau html.ei-pre et la scène #ei-intro n'existent que là (classe posée à la main sur <html>).
   Tout ce qui est caché l'est par une classe que intro.js retire, ou par une animation CSS qui se retire seule :
   sans JS, en mouvement réduit ou si le script plante, le site reste identique. Transform / opacity d'abord.
   Palette : eau profonde #07303a (dérivée de l'accent #2d9c9b), goutte = accent + reflets clairs. */

:root{--ei-eau:#07303a;--ei-acc:#2d9c9b;--ei-clair:#bff0ee;--ei-ease:cubic-bezier(.2,.8,.2,1);--ei-y:52%}

/* r = rayon (horizontal) de l'onde : @property pour pouvoir l'animer. Sans support : repli en fondu (classe ei-fade). */
@property --ei-r{syntax:'<length>';inherits:true;initial-value:1px}
@property --ei-r2{syntax:'<length>';inherits:true;initial-value:1px}
@property --ei-r3{syntax:'<length>';inherits:true;initial-value:1px}

/* ---------- 0. Rideau dès le premier affichage (évite le flash du site avant l'intro) ----------
   Trois sorties : intro.js retire la classe, l'animation le retire seule à 2,6 s, et il n'existe pas
   sans JS ni en mouvement réduit. */
@media (prefers-reduced-motion:no-preference){
  html.ei-pre::after{content:'';position:fixed;inset:0;z-index:99998;background:var(--ei-eau);pointer-events:none;animation:eiCover .01s linear 2.6s forwards}
}
@media (scripting:none){html.ei-pre::after{display:none}}
@keyframes eiCover{to{opacity:0;visibility:hidden}}

/* ---------- 1. INTRO « goutte et ondes » ----------
   Chronologie (ms) : 80 la goutte part du haut · 500 elle touche l'eau : éclaboussures, 1re onde, logo qui émerge ·
   620 / 740 ondes suivantes · 500→1500 les ondes s'ouvrent et dévoilent le site (le titre démarre à 950) ·
   1000→1250 le logo s'efface · 1560 la scène est retirée. Garde-fou CSS : retrait forcé à 2600 ms. */
#ei-intro{position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;contain:strict;
  animation:eiR 1s cubic-bezier(.5,0,.3,1) .5s both,eiR2 1s cubic-bezier(.5,0,.3,1) .64s both,eiR3 1s cubic-bezier(.5,0,.3,1) .78s both,eiGone .01s linear 2.6s forwards}
@keyframes eiR{from{--ei-r:1px}to{--ei-r:150vmax}}
@keyframes eiR2{from{--ei-r2:1px}to{--ei-r2:150vmax}}
@keyframes eiR3{from{--ei-r3:1px}to{--ei-r3:150vmax}}
@keyframes eiGone{to{opacity:0;visibility:hidden}}
#ei-intro.ei-out{opacity:0;transition:opacity .25s ease;animation:none}

/* le voile d'eau : un trou en ellipse (vue de dessus, en perspective) s'agrandit depuis l'impact */
.ei-veil{position:absolute;inset:0;background:var(--ei-eau);
  -webkit-mask-image:radial-gradient(ellipse var(--ei-r) calc(var(--ei-r)*.62) at 50% var(--ei-y),transparent calc(100% - 56px),#000 100%);
  mask-image:radial-gradient(ellipse var(--ei-r) calc(var(--ei-r)*.62) at 50% var(--ei-y),transparent calc(100% - 56px),#000 100%)}
/* reflet doux sur l'eau, autour du point d'impact */
.ei-glow{position:absolute;inset:0;pointer-events:none;opacity:0;animation:eiGlow .5s ease-out .15s forwards;
  background:radial-gradient(ellipse 46vmax 26vmax at 50% var(--ei-y),rgba(45,156,155,.42) 0,rgba(45,156,155,.12) 45%,transparent 72%)}
@keyframes eiGlow{to{opacity:1}}

/* trois ondes concentriques : fines lignes claires, la 1re colle au bord du trou */
.ei-rings{position:absolute;inset:0;pointer-events:none;animation:eiRingsOut .5s ease-in 1.05s forwards;
  background:
    radial-gradient(ellipse var(--ei-r) calc(var(--ei-r)*.62) at 50% var(--ei-y),transparent calc(100% - 10px),rgba(95,208,205,.3) calc(100% - 6px),rgba(226,253,251,.95) calc(100% - 2px),rgba(95,208,205,0) 100%),
    radial-gradient(ellipse var(--ei-r2) calc(var(--ei-r2)*.62) at 50% var(--ei-y),transparent calc(100% - 8px),rgba(95,208,205,.25) calc(100% - 4px),rgba(226,253,251,.7) calc(100% - 1.5px),rgba(95,208,205,0) 100%),
    radial-gradient(ellipse var(--ei-r3) calc(var(--ei-r3)*.62) at 50% var(--ei-y),transparent calc(100% - 6px),rgba(95,208,205,.2) calc(100% - 3px),rgba(226,253,251,.5) calc(100% - 1px),rgba(95,208,205,0) 100%)}
@keyframes eiRingsOut{to{opacity:0}}

/* la goutte : accent + reflet clair, tombe du haut, s'étire, s'écrase dans l'eau */
.ei-drop{position:absolute;left:50%;top:var(--ei-y);width:clamp(22px,3.6vmin,34px);height:auto;translate:-50% -100%;pointer-events:none;
  transform:translateY(calc(-52vh - 70px));animation:eiFall .42s cubic-bezier(.5,0,.9,.55) .08s forwards;transform-origin:50% 100%}
@keyframes eiFall{0%{transform:translateY(calc(-52vh - 70px)) scaleY(1.2);opacity:1}88%{transform:translateY(0) scaleY(1.2);opacity:1}100%{transform:translateY(0) scale(1.1,.15);opacity:0}}

/* éclaboussures : six gouttelettes qui jaillissent et retombent */
.ei-sp{position:absolute;left:50%;top:var(--ei-y);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff 0,var(--ei-clair) 38%,var(--ei-acc) 100%);animation:eiSplash .55s cubic-bezier(.2,.7,.4,1) .5s both}
.ei-sp:nth-of-type(1){--dx:-64px;--up:-58px;width:6px;height:6px}
.ei-sp:nth-of-type(2){--dx:-34px;--up:-84px}
.ei-sp:nth-of-type(3){--dx:-12px;--up:-96px;width:5px;height:5px}
.ei-sp:nth-of-type(4){--dx:14px;--up:-90px;width:5px;height:5px}
.ei-sp:nth-of-type(5){--dx:38px;--up:-78px}
.ei-sp:nth-of-type(6){--dx:68px;--up:-54px;width:6px;height:6px}
@keyframes eiSplash{0%{opacity:1;transform:translate(0,0)}45%{opacity:1;transform:translate(calc(var(--dx)*.7),var(--up))}100%{opacity:0;transform:translate(var(--dx),6px)}}

/* plaquette claire derrière le logo (le logo est noir/teal sur fond clair) : elle émerge de l'impact */
.ei-plate{position:absolute;left:50%;top:var(--ei-y);translate:-50% -50%;display:none;background:#fbfcfd;border-radius:22px;
  padding:clamp(16px,2.6vw,28px) clamp(20px,3.4vw,40px);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.6),0 0 44px rgba(95,208,205,.4)}
.ei-ok .ei-plate{display:block;animation:eiPop .36s cubic-bezier(.2,.9,.3,1.25) .52s both,eiPlateOut .26s ease-in 1s forwards}
.ei-plate img{display:block;width:clamp(230px,36vw,440px);height:auto}
@keyframes eiPop{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:none}}
@keyframes eiPlateOut{to{opacity:0;transform:scale(1.06)}}

/* repli sans @property : pas d'ondes qui s'ouvrent, le voile fond simplement */
#ei-intro.ei-fade{animation:eiGone .01s linear 2.6s forwards}
.ei-fade .ei-veil{-webkit-mask-image:none;mask-image:none;animation:eiVeilOut .5s ease .75s forwards}
.ei-fade .ei-rings{display:none}
@keyframes eiVeilOut{to{opacity:0}}

/* ---------- 2. HERO vidéo ---------- */
.ei-hero{isolation:isolate}
.ei-media{position:absolute;inset:0;z-index:0;background:rgb(var(--overlay-rgb))}
.ei-poster,.ei-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block;max-width:none}
.ei-video{opacity:0;transition:opacity .9s ease}
.ei-video.ei-joue{opacity:1}
/* voile sombre : fort à gauche sous le texte, plus léger à droite, renforcé en bas (contraste mesuré, voir rapport) */
.ei-voile{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(var(--overlay-rgb),.72) 0%,rgba(var(--overlay-rgb),0) 48%),
    linear-gradient(90deg,rgba(var(--overlay-rgb),.9) 0%,rgba(var(--overlay-rgb),.78) 46%,rgba(var(--overlay-rgb),.4) 100%)}
.ei-hero .eco-entree{text-shadow:0 1px 14px rgba(var(--overlay-rgb),.55)}
.ei-hero .ei-contenu{position:relative;z-index:2}

/* bouton pause / lecture : en haut à droite (la bulle d'appel du thème occupe le bas), visible seulement si la vidéo joue */
.ei-pause{position:absolute;right:24px;top:24px;z-index:3;width:44px;height:44px;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:rgba(var(--overlay-rgb),.7);color:#fff;border:1.5px solid rgba(255,255,255,.7);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.ei-pause:hover{background:rgba(var(--overlay-rgb),.92);transform:scale(1.06)}
.ei-pause:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ei-pause svg{width:18px;height:18px;fill:currentColor;display:block}
.ei-pause .ei-i-lire{display:none}
.ei-pause[aria-pressed="true"] .ei-i-pause{display:none}
.ei-pause[aria-pressed="true"] .ei-i-lire{display:block}
.ei-hero.ei-video-actif .ei-pause{display:flex}

/* titre mot par mot */
.ei-w{display:inline-block}
.ei-w>i{display:inline-block;font-style:normal;transition:opacity .7s var(--ei-ease),transform .85s var(--ei-ease),filter .7s ease;transition-delay:calc(var(--i,0)*70ms)}
/* garde-fou CSS : même si le JS plante, les mots se montrent seuls au bout de 3,6 s */
html.ei-hide .ei-w>i{opacity:0;transform:translateY(.55em);filter:blur(6px);animation:eiShow .01s linear 3.6s forwards}
@keyframes eiShow{to{opacity:1;transform:none;filter:none}}

/* la vidéo est en 16:9 : sur mobile le sujet est à ~65 % de la largeur, on recadre vers la droite */
@media (max-width:767px){
  .ei-poster,.ei-video{object-position:65% 50%}
  .ei-voile{background:linear-gradient(0deg,rgba(var(--overlay-rgb),.9) 0%,rgba(var(--overlay-rgb),.78) 55%,rgba(var(--overlay-rgb),.66) 100%)}
  .ei-pause{right:16px;top:16px}
}

/* ---------- Mouvement réduit : pas d'intro, pas d'autoplay (poster seul), titre d'un bloc ---------- */
@media (prefers-reduced-motion:reduce){
  html.ei-pre::after{display:none!important}
  #ei-intro{display:none!important}
  .ei-video{display:none!important}
  .ei-pause{display:none!important}
  .ei-w>i{transition:none!important}
  html.ei-hide .ei-w>i{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
}