/* HODY CONSTRUCT — intro « Truelle » + hero vivant (titre mot par mot, parallaxe, poussière de mortier). Préfixe hi-.
   Écrit le 13/10/2026 sur le moule V3 commun (intro.css). À charger APRÈS /assets/eco/css/site.css, accueil seulement.
   Tout ce qui est caché ici l'est par une classe posée par intro.js (ou par le rideau html.hi-pre, qui se retire tout seul) :
   sans JS ou en mouvement réduit, le site reste identique. Transform / opacity / clip-path uniquement.

   CHRONOLOGIE DE L'INTRO (ms, depuis le chargement) — durée ≈ 1,5 s, passable au clic / toucher / touche, une seule fois par session :
        0   écran noir (#000 = fond du logo)
       50   le trait de mortier (or, rugueux) apparaît au centre, en 180 ms
      180   la truelle entre par la gauche et lisse le trait : 500 ms de glissement, le trait devient net derrière elle
            (4 miettes de mortier tombent pendant le passage, 330 → 560)
      680   la truelle sort (240 ms, vers le haut à droite) ; le trait « s'ouvre » et révèle le logo de bas en haut et de haut en bas
            depuis son milieu (340 ms) ; halo doré ; le trait se fond (740 → 960)
     1150   le rideau s'ouvre en deux (haut vers le haut, bas vers le bas, 350 ms), les mots du titre démarrent
     1500   fin de l'ouverture, retrait de l'overlay. Garde-fous : rideau CSS retiré seul à 2 600 ms (html.hi-pre), overlay JS retiré à 2 600 ms,
            titre jamais caché au-delà de 3 600 ms (animation CSS hiShow). */

:root{--hi-noir:#000;--hi-or:#EBC24F;--hi-or-clair:#F3D983;--hi-or-fonce:#D4A832;--hi-ease:cubic-bezier(.2,.8,.2,1)}

/* ---------- 0. Rideau noir dès le premier affichage (évite le flash du hero avant l'intro) ----------
   Classe hi-pre posée par un petit script en ligne dans le <head> de l'accueil (seulement si l'intro va se jouer : accueil, pas de
   mouvement réduit, pas déjà vue dans la session). Trois sorties de secours : intro.js retire la classe, l'animation le fait
   disparaître seule au bout de 2,6 s, et sans JS la classe n'est jamais posée. */
@media (prefers-reduced-motion:no-preference){
  html.hi-pre::after{content:'';position:fixed;inset:0;z-index:99998;background:var(--hi-noir);pointer-events:none;animation:hiCover .01s linear 2.6s forwards}
}
@media (scripting:none){html.hi-pre::after{display:none}}
@keyframes hiCover{to{opacity:0;visibility:hidden}}

/* ---------- 1. INTRO « Truelle » ---------- */
#hi-intro{position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;background:var(--hi-noir);contain:strict}
#hi-intro.hi-open{background:transparent}
.hi-half{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--hi-noir);will-change:transform;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.hi-top{top:0}
.hi-bot{bottom:0}
.hi-open .hi-top{transform:translateY(-101%)}
.hi-open .hi-bot{transform:translateY(101%)}
.hi-fast .hi-half{transition-duration:.25s}
/* chaque moitié porte une copie complète de la scène (hauteur 200 % de la moitié) : le logo se coupe en deux à l'ouverture */
.hi-in{position:absolute;left:0;right:0;height:200%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,#17130a 0,#000 55%)}
.hi-top .hi-in{top:0}
.hi-bot .hi-in{bottom:0}
/* liseré doré à la jointure, visible seulement pendant l'ouverture */
.hi-half::after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--hi-or-clair);box-shadow:0 0 14px 2px rgba(235,194,79,.8);opacity:0;transition:opacity .15s}
.hi-top::after{bottom:0}
.hi-bot::after{top:0}
.hi-open .hi-half::after{opacity:1}

.hi-stage{position:relative;width:min(74vw,340px);aspect-ratio:425/398;flex:none}
/* halo doré derrière le logo */
.hi-halo{position:absolute;left:50%;top:50%;width:min(110vmin,640px);aspect-ratio:1;margin:calc(min(110vmin,640px) / -2) 0 0 calc(min(110vmin,640px) / -2);border-radius:50%;
  background:radial-gradient(circle,rgba(235,194,79,.3) 0,rgba(212,168,50,.1) 38%,transparent 66%);opacity:0;pointer-events:none;animation:hiHalo .7s ease-out .66s both}
@keyframes hiHalo{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:0;transform:scale(1.35)}}

/* le logo : fond noir pur, fondu dans la scène par « lighten » ; il s'ouvre depuis le trait de mortier (clip-path depuis le milieu) */
.hi-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;display:none;clip-path:inset(50% 0 50% 0)}
.hi-ok .hi-logo{display:block;animation:hiLogo .34s var(--hi-ease) .68s forwards}
@keyframes hiLogo{to{clip-path:inset(0 0 0 0)}}

/* le trait de mortier : rugueux (SVG) puis lisse (barre) ; même durée et même courbe que la truelle, donc ils avancent ensemble */
.hi-line{position:absolute;left:0;right:0;top:50%;height:0;animation:hiLineOut .22s ease-in .74s forwards}
@keyframes hiLineOut{to{opacity:0}}
.hi-rough{position:absolute;left:0;top:-13px;width:100%;height:26px;display:block;overflow:visible;
  clip-path:inset(0 0 0 0);opacity:0;animation:hiBeadIn .18s ease-out .05s forwards,hiRoughOut .5s cubic-bezier(.45,.05,.35,1) .18s forwards}
.hi-rough path{fill:var(--hi-or-fonce)}
.hi-rough .hi-hl{fill:var(--hi-or);opacity:.9}
@keyframes hiBeadIn{from{opacity:0;transform:scaleX(.88)}to{opacity:1;transform:none}}
@keyframes hiRoughOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
.hi-lisse{position:absolute;left:0;right:0;top:-3px;height:6px;border-radius:3px;background:linear-gradient(var(--hi-or-clair),var(--hi-or-fonce));box-shadow:0 0 16px rgba(235,194,79,.55);
  clip-path:inset(0 100% 0 0);animation:hiLisse .5s cubic-bezier(.45,.05,.35,1) .18s forwards}
@keyframes hiLisse{to{clip-path:inset(0 0 0 0)}}

/* miettes de mortier qui tombent derrière la truelle */
.hi-miette{position:absolute;left:var(--x);top:-3px;width:5px;height:4px;border-radius:1px;background:var(--hi-or-fonce);opacity:0;animation:hiMiette .5s ease-in var(--d) forwards}
@keyframes hiMiette{0%{opacity:0;transform:translate(0,0)}15%{opacity:.95}100%{opacity:0;transform:translate(var(--dx,6px),24px) rotate(110deg)}}

/* la truelle (dessin SVG, de profil) : le conteneur .hi-balai fait la largeur du trait, la pointe de la lame est son bord droit */
.hi-balai{position:absolute;left:0;top:50%;width:100%;height:0;animation:hiBalai .5s cubic-bezier(.45,.05,.35,1) .18s both}
@keyframes hiBalai{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.hi-truelle{position:absolute;right:-2px;bottom:3px;width:min(46vw,200px);aspect-ratio:160/66;transform-origin:100% 100%;rotate:-3deg;opacity:0;
  animation:hiTruelleIn .12s ease-out .12s forwards,hiTruelleOut .24s cubic-bezier(.5,0,.8,.4) .68s forwards}
.hi-truelle svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
@keyframes hiTruelleIn{to{opacity:1}}
@keyframes hiTruelleOut{from{opacity:1;transform:none}to{opacity:0;transform:translate(46px,-34px) rotate(-12deg)}}

/* ---------- 2. HERO : titre mot par mot, parallaxe, poussière de mortier ---------- */
.hi-hero{position:relative;min-height:clamp(640px,calc(100svh - 118px),820px);display:flex;align-items:flex-end;overflow:hidden;background:rgb(var(--overlay-rgb))}
.hi-hero [data-hero-slide]{background-size:cover;background-position:center}
.hi-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--overlay-rgb),.93) 0%,rgba(var(--overlay-rgb),.72) 45%,rgba(var(--overlay-rgb),.32) 100%)}
.hi-voile-bas{position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(0deg,rgba(var(--overlay-rgb),.88),transparent)}
.hi-hero-in{position:relative;max-width:1240px;width:100%;margin:0 auto;padding:120px 24px 56px}
.hi-hero-txt{max-width:760px;display:flex;flex-direction:column;gap:22px;color:#fff}
.hi-pill{display:inline-flex;align-self:flex-start;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:40px;padding:9px 18px;font-size:13px;font-weight:700;letter-spacing:.14em;color:#fff}
.hi-hero h1{font-size:clamp(30px,5vw,64px);font-weight:700;line-height:1.04;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.hi-hero-txt>p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.88);max-width:600px}
.hi-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hi-w{display:inline-block;white-space:nowrap}
.hi-w>i{display:inline-block;font-style:normal;transition:opacity .7s var(--hi-ease),transform .85s var(--hi-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.hi-hide .hi-w>i{opacity:0;transform:translateY(.55em);filter:blur(6px);animation:hiShow .01s linear 3.6s forwards}
@keyframes hiShow{to{opacity:1;transform:none;filter:none}}
.hi-par{scale:1.06;will-change:translate}
.hi-poussiere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}

/* photos du hero : sur mobile le sujet est vers 65 % de la largeur, on recadre vers la droite */
@media (max-width:767px){
  .hi-hero [data-hero-slide]{background-position:65% center}
  .hi-hero-in{padding:96px 20px 40px}
  .hi-hero-txt>p{font-size:16px}
}

/* ---------- 3. HERO : pastilles de garanties (verre léger + icône SVG), en cascade après le titre ----------
   Même déclencheur que les mots du titre : html.hi-hide (posée par intro.js, retirée à l'ouverture de l'intro).
   Garde-fou : sans JS ou si le script plante, elles apparaissent seules à 3,9 s. */
.hi-garanties{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;list-style:none}
.hi-garanties li{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 8px;border-radius:40px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18);
  transition:opacity .7s var(--hi-ease),transform .85s var(--hi-ease),filter .7s ease,background .3s,border-color .3s;
  transition-delay:calc(.75s + var(--i,0)*.14s),calc(.75s + var(--i,0)*.14s),calc(.75s + var(--i,0)*.14s),0s,0s}
.hi-g-ico{display:flex;flex:none;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:rgba(235,194,79,.2);border:1px solid rgba(235,194,79,.55);color:var(--hi-or-clair)}
.hi-g-ico svg{display:block}
.hi-garanties li:hover{background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.1));border-color:rgba(235,194,79,.7)}
html.hi-hide .hi-garanties li{opacity:0;transform:translateY(16px) scale(.96);filter:blur(5px);transition:none;animation:hiShow .01s linear 3.9s forwards}
@media (max-width:480px){
  .hi-garanties{gap:8px}
  .hi-garanties li{font-size:13px;padding:6px 14px 6px 6px;gap:8px}
  .hi-g-ico{width:26px;height:26px}
  .hi-g-ico svg{width:16px;height:16px}
}

/* ---------- Mouvement réduit : tout est coupé ---------- */
@media (prefers-reduced-motion:reduce){
  html.hi-pre::after{display:none!important}
  #hi-intro{display:none!important}
  .hi-w>i{transition:none!important}
  html.hi-hide .hi-w>i{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .hi-poussiere{display:none!important}
  html.hi-hide .hi-garanties li{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .hi-garanties li{transition:none!important}
  .hi-par{scale:1;translate:none!important}
}