/* ══════════════════════════════════════════════════════════════════════════ KCMH RÉNOVATIONS — COUCHE « FX » (effet waouh) Se charge APRÈS kcmh.css. Tous les sélecteurs sont préfixés .fx (classe posée sur par kcmh-fx.js) : sans JavaScript, le site reste 100% identique à la version d'origine. Respecte prefers-reduced-motion. ══════════════════════════════════════════════════════════════════════════ */ :root{ --fx-gold:linear-gradient(105deg,#F5C400 0%,#FFE98A 30%,#F5C400 55%,#D9A900 80%,#F5C400 100%); } /* ── 1. BARRE DE PROGRESSION DE LECTURE ────────────────────────────────── */ .fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1500;pointer-events:none} .fx-progress span{ display:block;height:100%; background:linear-gradient(90deg,#D9A900,#F5C400 60%,#FFE98A); box-shadow:0 0 14px rgba(245,196,0,.85); transform:scaleX(var(--p,0));transform-origin:0 50%; } /* ── 2. GRAIN CINÉMA (texture film, très subtile) ──────────────────────── */ .fx-grain{ position:fixed;inset:-60%;z-index:1200;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:fxGrain 8s steps(10) infinite; will-change:transform; } @keyframes fxGrain{ 0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,2%)}20%{transform:translate(2%,-3%)} 30%{transform:translate(-2%,-2%)}40%{transform:translate(3%,2%)}50%{transform:translate(-3%,1%)} 60%{transform:translate(2%,3%)}70%{transform:translate(-1%,-3%)}80%{transform:translate(3%,-2%)}90%{transform:translate(-2%,3%)} } /* ── 3. INTRO CINÉMATIQUE (1 fois par session, ~1,8 s) ─────────────────── */ body.fx-lock{overflow:hidden} .fx-intro{ position:fixed;inset:0;z-index:3000;display:grid;place-items:center; background:var(--ink); transition:transform .65s cubic-bezier(.7,0,.2,1); } .fx-intro::after{ /* liseré chevron sous le rideau quand il remonte */ content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px; background:repeating-linear-gradient(135deg,var(--yellow) 0 14px,#0a0a0a 14px 28px); } .fx-intro.is-done{transform:translateY(-104%)} .fx-intro__in{display:grid;justify-items:center;gap:.9rem;text-align:center} .fx-intro__in img{width:60px;height:60px;border-radius:14px;animation:fxIntroLogo .7s var(--e-out) both} @keyframes fxIntroLogo{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}} .fx-intro__word{ font-family:var(--font-display);font-weight:900;letter-spacing:.04em; font-size:clamp(3rem,11vw,5.5rem);line-height:1;display:flex; } .fx-intro__word span{ display:inline-block; background:var(--fx-gold);background-size:220% auto; -webkit-background-clip:text;background-clip:text;color:transparent; transform:translateY(110%);opacity:0; animation:fxIntroChar .65s var(--e-out) forwards,fxSheen 3.2s linear infinite; animation-delay:calc(.12s + var(--i,0)*80ms),0s; } @keyframes fxIntroChar{to{transform:none;opacity:1}} .fx-intro__sub{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase; color:var(--on-dark-mute);animation:fxIntroSub .6s .55s var(--e-out) both; } @keyframes fxIntroSub{from{opacity:0;letter-spacing:.6em}to{opacity:1}} .fx-intro__bar{width:min(240px,55vw);height:2px;background:var(--ink-line);border-radius:99px;overflow:hidden;margin-top:.4rem} .fx-intro__bar span{display:block;height:100%;background:var(--yellow);box-shadow:0 0 10px var(--yellow);transform-origin:0 50%;animation:fxIntroBar 1.15s .15s var(--e-soft) both} @keyframes fxIntroBar{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ── 4. CURSEUR HALO (desktop uniquement) ──────────────────────────────── */ .fx-cursor{ position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%; border:1.5px solid rgba(245,196,0,.85); box-shadow:0 0 18px rgba(245,196,0,.35),inset 0 0 8px rgba(245,196,0,.12); z-index:2600;pointer-events:none;opacity:0; transition:width .25s var(--e-out),height .25s var(--e-out),background .25s,opacity .35s,border-color .25s; margin:-17px 0 0 -17px; } .fx-cursor.is-vis{opacity:1} .fx-cursor.is-act{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(245,196,0,.1);border-color:var(--yellow)} .fx-cursor.is-down{width:24px;height:24px;margin:-12px 0 0 -12px;background:rgba(245,196,0,.25)} /* ── 5. HERO CINÉMATIQUE ───────────────────────────────────────────────── */ .fx .hero__bg{animation:fxKB 20s var(--e-soft) both;will-change:transform} @keyframes fxKB{from{transform:scale(1.13) translateY(-1.6%)}to{transform:scale(1.005)}} .fx .hero__content{position:relative;z-index:2;will-change:transform,opacity} .fx .hero{--mx:72%;--my:28%} .fx .hero::after{ /* projecteur doré qui suit la souris */ content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0; background:radial-gradient(620px circle at var(--mx) var(--my),rgba(245,196,0,.14),transparent 62%); mix-blend-mode:screen;transition:opacity .6s; } .fx .hero.fx-spot::after{opacity:1} .fx-embers{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen} /* Titre découpé mot à mot (rideau par mot) */ .fx .hero h1.fx-split{opacity:1!important;transform:none!important;animation:none!important} .fx-w{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em} .js .fx-wi{display:inline-block;transform:translateY(118%) rotate(3deg)} body.is-ready .fx-wi{animation:fxWord .9s var(--e-out) forwards;animation-delay:calc(140ms + var(--i,0)*80ms)} body.is-ready .hl .fx-wi{ animation:fxWord .9s var(--e-out) forwards,fxSheen 5.5s linear infinite; animation-delay:calc(140ms + var(--i,0)*80ms),0s; } @keyframes fxWord{to{transform:none}} /* Indicateur de scroll */ .fx-cue{ position:absolute;left:50%;bottom:1.6rem;z-index:2;transform:translateX(-50%); width:30px;height:48px;border:2px solid rgba(245,196,0,.55);border-radius:99px; display:flex;justify-content:center;padding-top:9px; transition:opacity .4s,border-color .25s; } .fx-cue:hover{border-color:var(--yellow)} .fx-cue span{width:4px;height:9px;border-radius:99px;background:var(--yellow);animation:fxCue 1.8s var(--e-soft) infinite} @keyframes fxCue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{opacity:0}} @media(max-width:640px){.fx-cue{display:none}} /* ── 6. OR LIQUIDE — les mots-clés jaunes scintillent ──────────────────── */ .fx .hero .hl:not(.fx-has-words), .fx .band--dark .hl,.fx .band--soft .hl, .fx .hl .fx-wi{ background:var(--fx-gold);background-size:220% auto; -webkit-background-clip:text;background-clip:text;color:transparent; } .fx .hero .hl:not(.fx-has-words), .fx .band--dark .hl:not(.fx-has-words),.fx .band--soft .hl:not(.fx-has-words){ animation:fxSheen 5.5s linear infinite; } .fx .band--light .hl,.fx .band--yellow .hl{background:none;color:inherit;animation:none;-webkit-text-fill-color:currentColor} @keyframes fxSheen{to{background-position:220% center}} /* ── 7. BANDEAU DÉFILANT (marquee) ─────────────────────────────────────── */ .fx-marquee{ overflow:hidden;background:var(--ink);position:relative; border-block:1px solid var(--ink-line);padding:1.05rem 0; } .fx-marquee::before,.fx-marquee::after{ content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none; } .fx-marquee::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)} .fx-marquee::after{right:0;background:linear-gradient(-90deg,var(--ink),transparent)} .fx-marquee__track{display:flex;width:max-content;animation:fxMarquee 30s linear infinite} .fx-marquee:hover .fx-marquee__track{animation-play-state:paused} .fx-marquee__grp{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem} .fx-marquee__grp span{ font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.02em; font-size:clamp(1.3rem,2.6vw,2rem);white-space:nowrap;line-height:1.2; color:transparent;-webkit-text-stroke:1px rgba(245,196,0,.6); } .fx-marquee__grp span.is-fill{color:var(--yellow);-webkit-text-stroke:0;text-shadow:0 0 24px rgba(245,196,0,.35)} .fx-marquee__star{font-style:normal;color:var(--yellow);font-size:1rem;opacity:.7;animation:fxSpin 6s linear infinite} @keyframes fxMarquee{to{transform:translateX(-50%)}} @keyframes fxSpin{to{transform:rotate(360deg)}} /* ── 8. CARTES 3D (tilt + reflet qui suit la souris) ───────────────────── */ .fx-tilt{position:relative;will-change:transform;transform-style:preserve-3d} .fx .fx-tilt,.fx .fx-tilt:hover{ transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); transition:transform .18s var(--e-out),border-color var(--t) var(--e-out),box-shadow var(--t) var(--e-out); } .fx .fx-tilt:hover{--lift:-6px} .fx-tilt::after{ /* reflet lumineux */ content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; background:radial-gradient(440px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 46%); transition:opacity .35s;border-radius:inherit; } .fx-tilt:hover::after{opacity:1} /* ── 9. BOUTONS — balayage lumineux + aimantation ──────────────────────── */ .fx .btn--primary{position:relative;overflow:hidden} .fx .btn--primary::after{ content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:42%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-220%) skewX(-18deg); animation:fxShine 5.5s ease-in-out infinite;pointer-events:none; } @keyframes fxShine{0%{transform:translateX(-220%) skewX(-18deg)}30%,100%{transform:translateX(460%) skewX(-18deg)}} .fx .fx-mag,.fx .fx-mag:hover{ transform:translate3d(var(--tx,0px),var(--ty,0px),0); transition:transform .22s var(--e-out),background var(--t-fast),box-shadow var(--t) var(--e-out); } /* ── 10. BOUTON D'APPEL FLOTTANT — ondes radar ─────────────────────────── */ .fx .float-call::before{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; background:var(--yellow);animation:fxPulse 2.3s ease-out infinite; } @keyframes fxPulse{0%{transform:scale(1);opacity:.55}75%,100%{transform:scale(1.5);opacity:0}} /* ── 11. PHOTOS — balayage lumineux au survol ──────────────────────────── */ .fx .shot::before,.fx .pcard__img::before,.fx .acard__img::before,.fx .split__media::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%); transform:translateX(-130%);transition:transform .85s var(--e-out); } .fx .shot:hover::before,.fx .pcard:hover .pcard__img::before, .fx .acard:hover .acard__img::before,.fx .split__media:hover::before{transform:translateX(130%)} .fx .pcard__img,.fx .acard__img{position:relative} /* ── 12. AURORES DORÉES dans les bandes sombres ────────────────────────── */ .fx .band--dark::before,.fx .band--soft::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(46% 40% at 10% 6%,rgba(245,196,0,.075),transparent 62%), radial-gradient(40% 36% at 92% 94%,rgba(245,196,0,.055),transparent 62%); animation:fxAurora 12s ease-in-out infinite alternate; } @keyframes fxAurora{from{opacity:.45}to{opacity:1}} /* ── 13. RÉVÉLATIONS AMÉLIORÉES (flou cinétique) ───────────────────────── */ .js.fx .reveal{ opacity:0;transform:translateY(34px);filter:blur(10px); transition:opacity .85s var(--e-out),transform .85s var(--e-out),filter .85s var(--e-out); } .js.fx .reveal.is-in{opacity:1;transform:none;filter:none} /* ── 14. MICRO-DÉTAILS ─────────────────────────────────────────────────── */ .fx .svc--star{animation:fxStarGlow 3.4s ease-in-out infinite alternate} @keyframes fxStarGlow{from{box-shadow:0 18px 44px -16px rgba(245,196,0,.30)}to{box-shadow:0 24px 64px -14px rgba(245,196,0,.55)}} .fx .step__n{transition:transform .3s var(--e-out),box-shadow .3s} .fx .step:hover .step__n{transform:rotate(-8deg) scale(1.12);box-shadow:0 10px 26px -8px rgba(245,196,0,.5)} .fx .compare__grip{animation:fxGrip 2.6s ease-in-out infinite} @keyframes fxGrip{0%,100%{box-shadow:0 4px 18px rgba(0,0,0,.5)}50%{box-shadow:0 4px 18px rgba(0,0,0,.5),0 0 0 10px rgba(245,196,0,.14)}} .fx .media-badge{animation:fxBadge 3s ease-in-out infinite} @keyframes fxBadge{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-2deg)}} /* ── 15. ACCESSIBILITÉ & MOBILE ────────────────────────────────────────── */ @media(pointer:coarse){ .fx-cursor,.fx-grain{display:none} } @media(prefers-reduced-motion:reduce){ .fx-cursor,.fx-grain,.fx-embers,.fx-intro,.fx-cue{display:none!important} .fx-marquee__track{animation:none!important} .fx-wi{transform:none!important} .js.fx .reveal{opacity:1!important;transform:none!important;filter:none!important} }