/* KVH INTÉRIEUR — intro « un coup de rouleau de peinture » + hero vivant (titre mot par mot, parallaxe, fines gouttelettes de peinture, pastilles). Préfixe : ki-. À charger APRÈS /assets/eco/css/site.css. Tout ce qui est caché ici l'est par une classe posée par un mini-script du (html.ki-pre / html.ki-wait) ou par intro.js (html.ki-hide) ; chaque cache se retire seul par animation CSS : sans JS ou en mouvement réduit, le site reste identique. Écrit le 16/10/2026 sur le squelette des intros V3 du parc (rideau, scène, garde-fous), geste différent. CHRONOLOGIE de l'intro (ms depuis l'insertion de l'overlay, dès le chargement de la page) : 0 écran crème (le même que le rideau posé par le ), bande verte et rouleau hors champ 60–900 UN COUP DE ROULEAU : le rouleau (axe vertical, poignée derrière lui) traverse l'écran de gauche à droite en 840 ms (ease cubic-bezier(.5,.05,.25,1)) ; la bande de peinture verte, de la hauteur du rouleau, se dépose derrière lui (clip-path synchronisé sur le même easing : le front de peinture est exactement sous le rouleau) ; le logo KVH (blanc) est dans la bande : il n'apparaît que là où la peinture est passée 900 le rouleau a quitté l'écran ; le logo est entier (pose de 180 ms, léger tassement) 1100 l'écran s'ouvre : les deux panneaux crème (au-dessus et au-dessous de la bande) filent vers le haut et vers le bas en 450 ms ; les mots du titre démarrent ; fin de l'ouverture à 1550 ms 1250–1550 la bande et le logo s'effacent (opacité, léger agrandissement) 1600 retrait de l'overlay 2600 garde-fous CSS : l'overlay et le rideau disparaissent seuls si le JS est mort 3600/3900 garde-fous CSS : titre / pastilles réapparaissent seuls Contrastes (calculés le 16/10/2026) : logo blanc sur la bande #507f6c = 4,57:1 ; sur le haut du dégradé léger (+7 % de blanc) = 4,01:1 (grand logo : seuil 3:1). Hero, PIRE CAS (photo entièrement BLANCHE sous le voile, donc plus sévère que n'importe quelle photo) : bureau, voile .84 → blanc 11,89:1, sur-titre #b4dccf 7,97:1, paragraphe blanc 88 % 9,62:1, pastille (verre blanc 20 %) 6,38:1 ; mobile, haut du voile .76 → blanc 8,85:1, sur-titre 5,93:1, paragraphe 7,31:1, pastille 5,08:1. Bouton principal : #467060 sur blanc 5,60:1. */ :root{--ki-cream:#f6f3ee;--ki-bande:#507f6c;--ki-ease:cubic-bezier(.2,.8,.2,1);--ki-roule:cubic-bezier(.5,.05,.25,1)} /* ---------- 0. Rideau crème dès le premier affichage (évite le flash du hero avant l'intro) ---------- Posé par le mini-script du (1re visite de la session seulement). Sorties de secours : intro.js retire la classe, l'animation le fait disparaître seule à 2,6 s, et il n'existe pas sans JS. */ @media (prefers-reduced-motion:no-preference){ html.ki-pre::after{content:'';position:fixed;inset:0;z-index:99998;background:var(--ki-cream);pointer-events:none;animation:kiCover .01s linear 2.6s forwards} } @media (scripting:none){html.ki-pre::after{display:none}} @keyframes kiCover{to{opacity:0;visibility:hidden}} /* ---------- 1. INTRO : un coup de rouleau ---------- */ #ki-intro{position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;contain:strict; --bh:clamp(190px,36vh,300px);--rh:calc(var(--bh) * 1.2);--rw:calc(var(--rh) * .4); animation:kiGone .01s linear 2.6s forwards} @keyframes kiGone{to{opacity:0;visibility:hidden;pointer-events:none}} @media (scripting:none){#ki-intro{display:none}} /* trois pièces crème : panneau du haut, panneau du bas, et la bande du milieu (sous la peinture, qui la recouvre entièrement à 900 ms) */ .ki-pan,.ki-mid{position:absolute;left:0;right:0;background:var(--ki-cream);will-change:transform} .ki-pt{top:0;bottom:calc(50% + var(--bh) / 2 - 1px);transition:transform .45s cubic-bezier(.7,0,.2,1)} .ki-pb{bottom:0;top:calc(50% + var(--bh) / 2 - 1px);transition:transform .45s cubic-bezier(.7,0,.2,1)} .ki-mid{top:50%;height:var(--bh);margin-top:calc(var(--bh) / -2)} .ki-open .ki-pt{transform:translateY(-101%)} .ki-open .ki-pb{transform:translateY(101%)} .ki-fast .ki-pan{transition-duration:.3s} .ki-open .ki-mid{opacity:0} .ki-scene{position:absolute;inset:0;transition:opacity .3s ease .15s,transform .45s ease .1s} .ki-open .ki-scene{opacity:0;transform:scale(1.04)} .ki-fast .ki-scene{transition-duration:.2s;transition-delay:0s} /* la bande de peinture : dévoilée de gauche à droite (clip-path), du bord gauche jusqu'à 200 px AU-DELÀ du bord droit (le rouleau, large de ~110 px, a alors fini de sortir). Léger dégradé et stries horizontales du rouleau. */ .ki-band{position:absolute;left:0;right:0;top:50%;height:var(--bh);margin-top:calc(var(--bh) / -2); background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 35%,rgba(0,0,0,.08)), repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 2px,rgba(0,0,0,0) 2px 7px),var(--ki-bande); display:grid;place-items:center; clip-path:inset(0 100% 0 0);animation:kiPaint .84s var(--ki-roule) .06s forwards} @keyframes kiPaint{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -200px 0 0)}} .ki-logo{display:block;width:min(60vw,300px);height:auto;aspect-ratio:400/251;opacity:1;animation:kiPose .3s cubic-bezier(.2,.9,.3,1.2) .72s backwards} @keyframes kiPose{0%{transform:scale(.94)}100%{transform:none}} /* le rouleau : même durée et même easing que la bande ; son centre (axe du cylindre, à 75 % de sa largeur) suit le front de peinture. Le front = progression × (100vw + 200 px) ; la poignée est derrière (à gauche). */ .ki-roll{position:absolute;left:0;top:50%;width:var(--rw);height:var(--rh);margin-top:calc(var(--rh) / -2); transform:translateX(calc(var(--rw) * -.75));will-change:transform; filter:drop-shadow(0 8px 10px rgba(17,17,17,.28)); animation:kiRoll .84s var(--ki-roule) .06s forwards} @keyframes kiRoll{from{transform:translateX(calc(var(--rw) * -.75))}to{transform:translateX(calc(100vw + 200px - var(--rw) * .75))}} .ki-roll svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:75% 50%;animation:kiTremble .84s ease-in-out .06s both} @keyframes kiTremble{0%{transform:rotate(-3deg)}35%{transform:rotate(1.4deg)}70%{transform:rotate(-1deg)}100%{transform:rotate(0deg)}} /* si le logo manque, la bande seule reste (pas d'écran vide) */ .ki-nologo .ki-logo{display:none} @media (max-width:480px){ #ki-intro{--bh:clamp(170px,30vh,250px)} .ki-logo{width:66vw} } /* ---------- 2. HERO : titre mot par mot, parallaxe, gouttelettes de peinture ---------- */ .ki-w{display:inline-block} .ki-w>i{display:inline-block;font-style:normal;transition:opacity .7s var(--ki-ease),transform .85s var(--ki-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.ki-hide .ki-w>i{opacity:0;transform:translateY(.55em);filter:blur(6px);animation:kiShow .01s linear 3.6s forwards} @keyframes kiShow{to{opacity:1;transform:none;filter:none}} /* avant que le script ait découpé le titre (visites suivantes, sans rideau) : pas de flash du titre plein. Le mini-script du pose ki-wait ; intro.js le retire dès que le titre est découpé ; sinon 3,6 s. */ html.ki-wait h1,html.ki-wait .ki-garanties{opacity:0;animation:kiWaitOut .01s linear 3.6s forwards} @keyframes kiWaitOut{to{opacity:1}} .ki-par{scale:1.06;will-change:translate} .ki-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block} /* photos du hero sous 768 px : le style inline impose background-position:center, d'où !important. */ @media (max-width:767px){ [data-hero-slide]{background-position:55% center!important} } /* voile du hero sur mobile : le texte occupe toute la largeur → voile vertical plus dense en bas (là où est le texte), plus léger en haut */ @media (max-width:767px){ .ki-voile{background:linear-gradient(0deg,rgba(var(--overlay-rgb),.92) 0%,rgba(var(--overlay-rgb),.84) 55%,rgba(var(--overlay-rgb),.76) 100%)!important} } /* sur-titre du hero (V1 : « Maubeuge & environs ») : vert d'eau très clair #b4dccf sur le voile */ .ki-sur{display:block;font-size:13px;font-weight:700;color:#b4dccf;text-transform:uppercase;letter-spacing:.14em} /* boutons du hero : le vert #507f6c ne se lit pas sur le voile → bouton principal BLANC, texte vert foncé #467060 (5,60:1) */ .ki-btn-p{background:#fff!important;color:var(--accent-fonce)!important} .ki-btn-p:hover{background:#f1efea!important} /* ---------- 3. HERO : pastilles (verre léger + icône SVG), en cascade après le titre ---------- Même déclencheur que les mots du titre : html.ki-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. */ .ki-garanties{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;list-style:none} .ki-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,.2),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.3); -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,.55),inset 0 1px 0 rgba(255,255,255,.22);text-shadow:0 1px 2px rgba(0,0,0,.35); transition:opacity .7s var(--ki-ease),transform .85s var(--ki-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} .ki-g-ico{display:flex;flex:none;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%; background:rgba(124,176,155,.3);border:1px solid rgba(160,205,186,.7);color:#e6f4ee} .ki-g-ico svg{display:block} .ki-garanties li:hover{background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.12));border-color:rgba(160,205,186,.85)} html.ki-hide .ki-garanties li{opacity:0;transform:translateY(16px) scale(.96);filter:blur(5px);transition:none;animation:kiShow .01s linear 3.9s forwards} @media (max-width:480px){ .ki-garanties{gap:8px} .ki-garanties li{font-size:13px;padding:6px 14px 6px 6px;gap:8px} .ki-g-ico{width:26px;height:26px} .ki-g-ico svg{width:16px;height:16px} } /* ---------- Mouvement réduit : tout est coupé ---------- */ @media (prefers-reduced-motion:reduce){ html.ki-pre::after{display:none!important} #ki-intro{display:none!important} .ki-w>i{transition:none!important} html.ki-hide .ki-w>i{opacity:1!important;transform:none!important;filter:none!important;animation:none!important} html.ki-wait h1,html.ki-wait .ki-garanties{opacity:1!important;animation:none!important} .ki-dust{display:none!important} html.ki-hide .ki-garanties li{opacity:1!important;transform:none!important;filter:none!important;animation:none!important} .ki-garanties li{transition:none!important} .ki-par{scale:1;translate:none!important} }