/*! * NSC Motion — feuille de styles des animations * Conventions : * - classes publiques : mfx-in-*, mfx-split-*, mfx-text-*, mfx-hover-*, mfx-loop-*, mfx-sc-*, mfx-mouse-*, mfx-bg-*, mfx-fx-* * - états (ajoutés par JS) : mfx-is-visible, mfx-is-animating, mfx-is-done * - éléments internes : mfx--* * - Les états « cachés » ne s'appliquent que si porte .mfx-js (JS actif, mouvement autorisé). */ :root { --mfx-duration: 900ms; --mfx-delay: 0ms; --mfx-ease: cubic-bezier(.22, 1, .36, 1); --mfx-distance: 50px; --mfx-stagger: 90ms; --mfx-text-stagger: 28ms; --mfx-word-stagger: 70ms; --mfx-line-stagger: 140ms; --mfx-accent: #6c5ce7; --mfx-accent-2: #00d2d3; --mfx-hover-duration: .45s; --mfx-hover-ease: cubic-bezier(.2, .8, .2, 1); --mfx-cur-dot: 8px; --mfx-cur-ring: 38px; --mfx-cur-hover: 64px; --mfx-cur-label: 90px; --mfx-cur-down: 28px; --mfx-cur-border: 1.5px; --mfx-cur-glow: 300px; } /* ========================================================================== 1. ENTRÉES (mfx-in-*) ========================================================================== */ html.mfx-js [class*="mfx-in-"]:not(.mfx-is-visible) { opacity: 0; } html.mfx-js .mfx-is-animating { transition-property: opacity, transform, filter, clip-path; transition-duration: var(--mfx-duration); transition-timing-function: var(--mfx-ease); transition-delay: var(--mfx-delay); will-change: opacity, transform; } /* Fondus */ html.mfx-js .mfx-in-fade-up:not(.mfx-is-visible) { transform: translate3d(0, var(--mfx-distance), 0); } html.mfx-js .mfx-in-fade-down:not(.mfx-is-visible) { transform: translate3d(0, calc(var(--mfx-distance) * -1), 0); } html.mfx-js .mfx-in-fade-left:not(.mfx-is-visible) { transform: translate3d(var(--mfx-distance), 0, 0); } html.mfx-js .mfx-in-fade-right:not(.mfx-is-visible) { transform: translate3d(calc(var(--mfx-distance) * -1), 0, 0); } html.mfx-js .mfx-in-fade-up-big:not(.mfx-is-visible) { transform: translate3d(0, calc(var(--mfx-distance) * 4), 0); } html.mfx-js .mfx-in-fade-down-big:not(.mfx-is-visible) { transform: translate3d(0, calc(var(--mfx-distance) * -4), 0); } html.mfx-js .mfx-in-fade-left-big:not(.mfx-is-visible) { transform: translate3d(calc(var(--mfx-distance) * 4), 0, 0); } html.mfx-js .mfx-in-fade-right-big:not(.mfx-is-visible) { transform: translate3d(calc(var(--mfx-distance) * -4), 0, 0); } html.mfx-js .mfx-in-fade-up-left:not(.mfx-is-visible) { transform: translate3d(var(--mfx-distance), var(--mfx-distance), 0); } html.mfx-js .mfx-in-fade-up-right:not(.mfx-is-visible) { transform: translate3d(calc(var(--mfx-distance) * -1), var(--mfx-distance), 0); } /* Zooms */ html.mfx-js .mfx-in-zoom-in:not(.mfx-is-visible) { transform: scale(.6); } html.mfx-js .mfx-in-zoom-out:not(.mfx-is-visible) { transform: scale(1.3); } html.mfx-js .mfx-in-zoom-in-up:not(.mfx-is-visible) { transform: translate3d(0, var(--mfx-distance), 0) scale(.6); } html.mfx-js .mfx-in-zoom-in-down:not(.mfx-is-visible) { transform: translate3d(0, calc(var(--mfx-distance) * -1), 0) scale(.6); } html.mfx-js .mfx-in-zoom-in-left:not(.mfx-is-visible) { transform: translate3d(var(--mfx-distance), 0, 0) scale(.6); } html.mfx-js .mfx-in-zoom-in-right:not(.mfx-is-visible) { transform: translate3d(calc(var(--mfx-distance) * -1), 0, 0) scale(.6); } html.mfx-js .mfx-in-zoom-out-up:not(.mfx-is-visible) { transform: translate3d(0, var(--mfx-distance), 0) scale(1.3); } html.mfx-js .mfx-in-zoom-big:not(.mfx-is-visible) { transform: scale(2.2); } /* Glissements (100 % de la taille de l'élément) */ html.mfx-js .mfx-in-slide-up:not(.mfx-is-visible) { transform: translate3d(0, 100%, 0); } html.mfx-js .mfx-in-slide-down:not(.mfx-is-visible) { transform: translate3d(0, -100%, 0); } html.mfx-js .mfx-in-slide-left:not(.mfx-is-visible) { transform: translate3d(100%, 0, 0); } html.mfx-js .mfx-in-slide-right:not(.mfx-is-visible) { transform: translate3d(-100%, 0, 0); } /* Flips 3D */ html.mfx-js .mfx-in-flip-up:not(.mfx-is-visible) { transform: perspective(1200px) rotateX(75deg); } html.mfx-js .mfx-in-flip-down:not(.mfx-is-visible) { transform: perspective(1200px) rotateX(-75deg); } html.mfx-js .mfx-in-flip-left:not(.mfx-is-visible) { transform: perspective(1200px) rotateY(-75deg); } html.mfx-js .mfx-in-flip-right:not(.mfx-is-visible) { transform: perspective(1200px) rotateY(75deg); } html.mfx-js .mfx-in-perspective-up:not(.mfx-is-visible) { transform: perspective(1200px) translate3d(0, calc(var(--mfx-distance) * 2), 0) rotateX(35deg); } html.mfx-js .mfx-in-perspective-up:not(.mfx-is-done) { transform-origin: 50% 100%; } html.mfx-js .mfx-in-unfold:not(.mfx-is-visible) { transform: perspective(1200px) rotateX(-90deg); } html.mfx-js .mfx-in-unfold:not(.mfx-is-done) { transform-origin: 50% 0; } html.mfx-js .mfx-in-depth-in:not(.mfx-is-visible) { transform: perspective(1000px) translate3d(0, 0, -700px); filter: blur(6px); } html.mfx-js .mfx-in-table-in:not(.mfx-is-visible) { transform: perspective(1200px) translate3d(0, calc(var(--mfx-distance) * 3), -200px) rotateX(55deg) rotateZ(-8deg); } /* Rotations */ html.mfx-js .mfx-in-rotate-in:not(.mfx-is-visible) { transform: rotate(-120deg) scale(.5); } html.mfx-js .mfx-in-rotate-left:not(.mfx-is-visible) { transform: translate3d(0, var(--mfx-distance), 0) rotate(-8deg); } html.mfx-js .mfx-in-rotate-right:not(.mfx-is-visible) { transform: translate3d(0, var(--mfx-distance), 0) rotate(8deg); } html.mfx-js .mfx-in-rotate-left:not(.mfx-is-done) { transform-origin: 0 100%; } html.mfx-js .mfx-in-rotate-right:not(.mfx-is-done) { transform-origin: 100% 100%; } html.mfx-js .mfx-in-roll-in:not(.mfx-is-visible) { transform: translate3d(-100%, 0, 0) rotate(-120deg); } html.mfx-js .mfx-in-spin-in:not(.mfx-is-visible) { transform: rotate(360deg) scale(0); } html.mfx-js .mfx-in-skew-in:not(.mfx-is-visible) { transform: translate3d(calc(var(--mfx-distance) * -2), 0, 0) skewX(25deg); } html.mfx-js .mfx-in-back-up:not(.mfx-is-visible) { transform: translate3d(0, calc(var(--mfx-distance) * 2), 0) scale(.9); } html.mfx-js .mfx-in-back-up.mfx-is-animating { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); } /* Flous */ html.mfx-js .mfx-in-blur-in:not(.mfx-is-visible) { filter: blur(20px); } html.mfx-js .mfx-in-blur-up:not(.mfx-is-visible) { filter: blur(12px); transform: translate3d(0, var(--mfx-distance), 0); } html.mfx-js .mfx-in-blur-zoom:not(.mfx-is-visible) { filter: blur(16px); transform: scale(1.25); } html.mfx-js .mfx-in-blur-left:not(.mfx-is-visible) { filter: blur(12px); transform: translate3d(var(--mfx-distance), 0, 0); } /* Révélations par masque (clip-path) — l'élément reste opaque, c'est le masque qui s'ouvre */ html.mfx-js [class*="mfx-in-reveal-"]:not(.mfx-is-visible) { opacity: 1; } html.mfx-js [class*="mfx-in-reveal-"].mfx-is-visible:not(.mfx-is-done) { clip-path: inset(0 0 0 0); } html.mfx-js .mfx-in-reveal-left:not(.mfx-is-visible) { clip-path: inset(0 100% 0 0); } html.mfx-js .mfx-in-reveal-right:not(.mfx-is-visible) { clip-path: inset(0 0 0 100%); } html.mfx-js .mfx-in-reveal-up:not(.mfx-is-visible) { clip-path: inset(100% 0 0 0); } html.mfx-js .mfx-in-reveal-down:not(.mfx-is-visible) { clip-path: inset(0 0 100% 0); } html.mfx-js .mfx-in-reveal-center-x:not(.mfx-is-visible) { clip-path: inset(0 50% 0 50%); } html.mfx-js .mfx-in-reveal-center-y:not(.mfx-is-visible) { clip-path: inset(50% 0 50% 0); } html.mfx-js .mfx-in-reveal-inset:not(.mfx-is-visible) { clip-path: inset(18% 18% 18% 18% round 40px); transform: scale(1.15); } html.mfx-js .mfx-in-reveal-circle:not(.mfx-is-visible) { clip-path: circle(0% at 50% 50%); } html.mfx-js .mfx-in-reveal-circle.mfx-is-visible:not(.mfx-is-done) { clip-path: circle(75% at 50% 50%); } html.mfx-js .mfx-in-reveal-diamond:not(.mfx-is-visible) { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } html.mfx-js .mfx-in-reveal-diamond.mfx-is-visible:not(.mfx-is-done) { clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%); } html.mfx-js .mfx-in-reveal-corner:not(.mfx-is-visible) { clip-path: polygon(0 0, 0 0, 0 0); } html.mfx-js .mfx-in-reveal-corner.mfx-is-visible:not(.mfx-is-done) { clip-path: polygon(0 0, 200% 0, 0 200%); } html.mfx-js .mfx-in-reveal-blinds:not(.mfx-is-visible) { clip-path: polygon(0 0%, 100% 0%, 100% calc(0% + 0%), 0 calc(0% + 0%), 0 20%, 100% 20%, 100% calc(20% + 0%), 0 calc(20% + 0%), 0 40%, 100% 40%, 100% calc(40% + 0%), 0 calc(40% + 0%), 0 60%, 100% 60%, 100% calc(60% + 0%), 0 calc(60% + 0%), 0 80%, 100% 80%, 100% calc(80% + 0%), 0 calc(80% + 0%)); } html.mfx-js .mfx-in-reveal-blinds.mfx-is-visible:not(.mfx-is-done) { clip-path: polygon(0 0%, 100% 0%, 100% calc(0% + 20.5%), 0 calc(0% + 20.5%), 0 20%, 100% 20%, 100% calc(20% + 20.5%), 0 calc(20% + 20.5%), 0 40%, 100% 40%, 100% calc(40% + 20.5%), 0 calc(40% + 20.5%), 0 60%, 100% 60%, 100% calc(60% + 20.5%), 0 calc(60% + 20.5%), 0 80%, 100% 80%, 100% calc(80% + 20.5%), 0 calc(80% + 20.5%)); } html.mfx-js .mfx-in-reveal-bars:not(.mfx-is-visible) { clip-path: polygon(0% 0, 0% 100%, calc(0% + 0%) 100%, calc(0% + 0%) 0, 20% 0, 20% 100%, calc(20% + 0%) 100%, calc(20% + 0%) 0, 40% 0, 40% 100%, calc(40% + 0%) 100%, calc(40% + 0%) 0, 60% 0, 60% 100%, calc(60% + 0%) 100%, calc(60% + 0%) 0, 80% 0, 80% 100%, calc(80% + 0%) 100%, calc(80% + 0%) 0); } html.mfx-js .mfx-in-reveal-bars.mfx-is-visible:not(.mfx-is-done) { clip-path: polygon(0% 0, 0% 100%, calc(0% + 20.5%) 100%, calc(0% + 20.5%) 0, 20% 0, 20% 100%, calc(20% + 20.5%) 100%, calc(20% + 20.5%) 0, 40% 0, 40% 100%, calc(40% + 20.5%) 100%, calc(40% + 20.5%) 0, 60% 0, 60% 100%, calc(60% + 20.5%) 100%, calc(60% + 20.5%) 0, 80% 0, 80% 100%, calc(80% + 20.5%) 100%, calc(80% + 20.5%) 0); } /* Rideaux : un bloc de couleur balaie l'élément puis découvre le contenu */ :where([class*="mfx-in-curtain-"]) { position: relative; } html.mfx-js [class*="mfx-in-curtain-"]:not(.mfx-is-visible) { opacity: 1; } html.mfx-js [class*="mfx-in-curtain-"]:not(.mfx-is-visible) > :not(.mfx--curtain) { opacity: 0; } html.mfx-js [class*="mfx-in-curtain-"].mfx-is-visible:not(.mfx-is-done) > :not(.mfx--curtain) { animation: mfx-curtain-content var(--mfx-duration) linear var(--mfx-delay) both; } .mfx--curtain { position: absolute; inset: 0; z-index: 20; pointer-events: none; background: var(--mfx-curtain, var(--mfx-accent)); clip-path: inset(0 100% 0 0); } .mfx-is-visible:not(.mfx-is-done) > .mfx--curtain { animation: mfx-curtain-l var(--mfx-duration) var(--mfx-ease) var(--mfx-delay) both; } .mfx-in-curtain-right.mfx-is-visible:not(.mfx-is-done) > .mfx--curtain { animation-name: mfx-curtain-r; } .mfx-in-curtain-up.mfx-is-visible:not(.mfx-is-done) > .mfx--curtain { animation-name: mfx-curtain-u; } .mfx-in-curtain-down.mfx-is-visible:not(.mfx-is-done) > .mfx--curtain { animation-name: mfx-curtain-d; } @keyframes mfx-curtain-content { 0%, 50% { opacity: 0; } 50.01%, 100% { opacity: 1; } } @keyframes mfx-curtain-l { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } } @keyframes mfx-curtain-r { 0% { clip-path: inset(0 0 0 100%); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } } @keyframes mfx-curtain-u { 0% { clip-path: inset(100% 0 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } } @keyframes mfx-curtain-d { 0% { clip-path: inset(0 0 100% 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } } /* Entrées à keyframes (rebonds, élastique…) */ html.mfx-js .mfx-in-bounce-in.mfx-is-visible:not(.mfx-is-done) { animation: mfx-bounce-in var(--mfx-duration) cubic-bezier(.215, .61, .355, 1) var(--mfx-delay) both; } html.mfx-js .mfx-in-bounce-up.mfx-is-visible:not(.mfx-is-done) { animation: mfx-bounce-up var(--mfx-duration) cubic-bezier(.215, .61, .355, 1) var(--mfx-delay) both; } html.mfx-js .mfx-in-elastic-in.mfx-is-visible:not(.mfx-is-done) { animation: mfx-elastic-in var(--mfx-duration) ease-out var(--mfx-delay) both; } html.mfx-js .mfx-in-swing-in.mfx-is-visible:not(.mfx-is-done) { animation: mfx-swing-in var(--mfx-duration) ease-out var(--mfx-delay) both; transform-origin: 50% 0; } html.mfx-js .mfx-in-drop-in.mfx-is-visible:not(.mfx-is-done) { animation: mfx-drop-in var(--mfx-duration) ease-out var(--mfx-delay) both; } html.mfx-js .mfx-in-light-speed.mfx-is-visible:not(.mfx-is-done) { animation: mfx-light-speed var(--mfx-duration) ease-out var(--mfx-delay) both; } html.mfx-js .mfx-in-jello-in.mfx-is-visible:not(.mfx-is-done) { animation: mfx-jello-in var(--mfx-duration) ease-out var(--mfx-delay) both; } html.mfx-js .mfx-in-newspaper.mfx-is-visible:not(.mfx-is-done) { animation: mfx-newspaper var(--mfx-duration) var(--mfx-ease) var(--mfx-delay) both; } html.mfx-js .mfx-in-glitch-in.mfx-is-visible:not(.mfx-is-done) { animation: mfx-glitch-in var(--mfx-duration) linear var(--mfx-delay) both; } html.mfx-js .mfx-in-heartbeat-in.mfx-is-visible:not(.mfx-is-done) { animation: mfx-heartbeat-in var(--mfx-duration) ease-in-out var(--mfx-delay) both; } @keyframes mfx-bounce-in { 0% { opacity: 0; transform: scale(.3); } 20% { transform: scale(1.1); } 40% { transform: scale(.9); } 60% { opacity: 1; transform: scale(1.03); } 80% { transform: scale(.97); } 100% { opacity: 1; transform: none; } } @keyframes mfx-bounce-up { 0% { opacity: 0; transform: translate3d(0, calc(var(--mfx-distance) * 6), 0) scaleY(2); } 60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.92); } 75% { transform: translate3d(0, 10px, 0) scaleY(.97); } 90% { transform: translate3d(0, -5px, 0); } 100% { opacity: 1; transform: none; } } @keyframes mfx-elastic-in { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.15); } 70% { transform: scale(.94); } 82% { transform: scale(1.04); } 92% { transform: scale(.99); } 100% { opacity: 1; transform: none; } } @keyframes mfx-swing-in { 0% { opacity: 0; transform: perspective(800px) rotateX(-90deg); } 50% { opacity: 1; transform: perspective(800px) rotateX(20deg); } 75% { transform: perspective(800px) rotateX(-8deg); } 100% { opacity: 1; transform: none; } } @keyframes mfx-drop-in { 0% { opacity: 0; transform: translate3d(0, calc(var(--mfx-distance) * -4), 0); } 60% { opacity: 1; transform: translate3d(0, 10px, 0); } 80% { transform: translate3d(0, -5px, 0); } 100% { opacity: 1; transform: none; } } @keyframes mfx-light-speed { 0% { opacity: 0; transform: translate3d(100%, 0, 0) skewX(-30deg); } 60% { opacity: 1; transform: skewX(20deg); } 80% { transform: skewX(-5deg); } 100% { opacity: 1; transform: none; } } @keyframes mfx-jello-in { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; transform: scale(1.05) skew(-12.5deg, -12.5deg); } 40% { transform: skew(6.25deg, 6.25deg); } 50% { transform: skew(-3.125deg, -3.125deg); } 65% { transform: skew(1.56deg, 1.56deg); } 80% { transform: skew(-.78deg, -.78deg); } 100% { opacity: 1; transform: none; } } @keyframes mfx-newspaper { 0% { opacity: 0; transform: rotate(-720deg) scale(0); } 100% { opacity: 1; transform: none; } } @keyframes mfx-heartbeat-in { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scale(1.12); } 45% { transform: scale(.95); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } } @keyframes mfx-glitch-in { 0% { opacity: 0; clip-path: inset(40% 0 61% 0); transform: translate(-20px, 0); } 10% { opacity: 1; clip-path: inset(92% 0 1% 0); transform: translate(20px, 0); } 20% { clip-path: inset(43% 0 1% 0); transform: translate(-10px, 0); } 30% { clip-path: inset(25% 0 58% 0); transform: translate(10px, 0); } 40% { clip-path: inset(54% 0 7% 0); transform: translate(-6px, 0); } 50% { clip-path: inset(58% 0 43% 0); transform: translate(6px, 0); } 60% { clip-path: inset(10% 0 30% 0); transform: translate(-3px, 0); } 75% { clip-path: inset(0 0 12% 0); transform: translate(2px, 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } } /* Parent « cascade » : il reste visible, ce sont ses enfants qui s'animent */ html.mfx-js .mfx-stagger.mfx-is-visible { opacity: 1; } /* ========================================================================== 2. TEXTE DÉCOUPÉ (mfx-split-*) ========================================================================== */ html.mfx-js [class*="mfx-split-"]:not(.mfx--split) { opacity: 0; } .mfx--w { display: inline-block; white-space: nowrap; } .mfx--wi { display: inline-block; } .mfx--c { display: inline-block; } /* Masques (le mot sert de fenêtre) */ .mfx-split-chars-up .mfx--w, .mfx-split-words-up .mfx--w, .mfx-split-lines-up .mfx--w { overflow: hidden; vertical-align: top; padding: .14em 0; margin: -.14em 0; } /* Transitions : niveau caractère */ [class*="mfx-split-chars-"] .mfx--c { transition: transform var(--mfx-duration) var(--mfx-ease), opacity var(--mfx-duration) var(--mfx-ease), filter var(--mfx-duration) var(--mfx-ease); transition-delay: calc(var(--mfx-delay) + var(--mfx-ci, 0) * var(--mfx-text-stagger)); } .mfx-split-chars-random .mfx--c { transition-delay: calc(var(--mfx-delay) + var(--mfx-cr, 0) * var(--mfx-text-stagger)); } /* Niveau mot */ [class*="mfx-split-words-"] .mfx--w, .mfx-split-words-up .mfx--wi { transition: transform var(--mfx-duration) var(--mfx-ease), opacity var(--mfx-duration) var(--mfx-ease), filter var(--mfx-duration) var(--mfx-ease); transition-delay: calc(var(--mfx-delay) + var(--mfx-wi, 0) * var(--mfx-word-stagger)); } /* Niveau ligne */ [class*="mfx-split-lines-"] .mfx--w, .mfx-split-lines-up .mfx--wi { transition: transform var(--mfx-duration) var(--mfx-ease), opacity var(--mfx-duration) var(--mfx-ease), filter var(--mfx-duration) var(--mfx-ease); transition-delay: calc(var(--mfx-delay) + var(--mfx-li, 0) * var(--mfx-line-stagger)); } html.mfx-js .mfx-split-chars-up:not(.mfx-is-visible) .mfx--c { transform: translate3d(0, 115%, 0); } html.mfx-js .mfx-split-chars-fade:not(.mfx-is-visible) .mfx--c { opacity: 0; transform: translate3d(0, .35em, 0); } html.mfx-js .mfx-split-chars-blur:not(.mfx-is-visible) .mfx--c { opacity: 0; filter: blur(10px); transform: scale(1.4); } html.mfx-js .mfx-split-chars-rotate:not(.mfx-is-visible) .mfx--c { opacity: 0; transform: perspective(500px) rotateX(-90deg); transform-origin: 50% 100%; } html.mfx-js .mfx-split-chars-flip:not(.mfx-is-visible) .mfx--c { opacity: 0; transform: perspective(500px) rotateY(90deg); } html.mfx-js .mfx-split-chars-scale:not(.mfx-is-visible) .mfx--c { opacity: 0; transform: scale(0); } html.mfx-js .mfx-split-chars-drop:not(.mfx-is-visible) .mfx--c { opacity: 0; transform: translate3d(0, -1.2em, 0); } .mfx-split-chars-drop .mfx--c { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); } html.mfx-js .mfx-split-chars-random:not(.mfx-is-visible) .mfx--c { opacity: 0; transform: translate3d(0, .2em, 0); filter: blur(4px); } html.mfx-js .mfx-split-chars-wave:not(.mfx-is-visible) .mfx--c { opacity: 0; transform: translate3d(0, .6em, 0); } .mfx-split-chars-wave.mfx-is-done .mfx--c { animation: mfx-wave 1.8s ease-in-out infinite; animation-delay: calc(var(--mfx-ci, 0) * 70ms); } @keyframes mfx-wave { 0%, 60%, 100% { transform: none; } 30% { transform: translate3d(0, -.25em, 0); } } html.mfx-js .mfx-split-words-up:not(.mfx-is-visible) .mfx--wi { transform: translate3d(0, 115%, 0); } html.mfx-js .mfx-split-words-fade:not(.mfx-is-visible) .mfx--w { opacity: 0; transform: translate3d(0, .5em, 0); } html.mfx-js .mfx-split-words-blur:not(.mfx-is-visible) .mfx--w { opacity: 0; filter: blur(12px); } html.mfx-js .mfx-split-words-rotate:not(.mfx-is-visible) .mfx--w { opacity: 0; transform: perspective(600px) rotateX(-80deg); transform-origin: 50% 100%; } html.mfx-js .mfx-split-words-slide:not(.mfx-is-visible) .mfx--w { opacity: 0; transform: translate3d(-1em, 0, 0); } html.mfx-js .mfx-split-words-scale:not(.mfx-is-visible) .mfx--w { opacity: 0; transform: scale(.4); } html.mfx-js .mfx-split-lines-up:not(.mfx-is-visible) .mfx--wi { transform: translate3d(0, 115%, 0); } html.mfx-js .mfx-split-lines-fade:not(.mfx-is-visible) .mfx--w { opacity: 0; transform: translate3d(0, .6em, 0); } html.mfx-js .mfx-split-lines-blur:not(.mfx-is-visible) .mfx--w { opacity: 0; filter: blur(10px); transform: translate3d(0, .3em, 0); } /* ========================================================================== 3. EFFETS DE TEXTE (mfx-text-*) ========================================================================== */ /* Dégradé animé */ .mfx-text-gradient .mfx--tt, .mfx-text-gradient.mfx--tt { background-image: linear-gradient(90deg, var(--mfx-g1, #6c5ce7), var(--mfx-g2, #00d2d3), var(--mfx-g3, #fd79a8), var(--mfx-g1, #6c5ce7)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mfx-gradient-flow var(--mfx-g-speed, 6s) linear infinite; } @keyframes mfx-gradient-flow { to { background-position: 300% 0; } } /* Reflet brillant qui passe sur le texte */ .mfx-text-shine .mfx--tt, .mfx-text-shine.mfx--tt { background-image: linear-gradient(110deg, currentColor 40%, var(--mfx-shine, #fff) 50%, currentColor 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mfx-text-shine var(--mfx-shine-speed, 3s) linear infinite; } @keyframes mfx-text-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } } /* Glitch permanent */ .mfx-text-glitch .mfx--tt, .mfx-text-glitch.mfx--tt { position: relative; } .mfx-text-glitch .mfx--tt::before, .mfx-text-glitch .mfx--tt::after, .mfx-text-glitch.mfx--tt::before, .mfx-text-glitch.mfx--tt::after { content: attr(data-mfx-text); position: absolute; inset: 0; pointer-events: none; } .mfx-text-glitch .mfx--tt::before, .mfx-text-glitch.mfx--tt::before { text-shadow: -2px 0 var(--mfx-glitch-1, #ff00c1); animation: mfx-glitch-a 2.5s infinite linear alternate-reverse; } .mfx-text-glitch .mfx--tt::after, .mfx-text-glitch.mfx--tt::after { text-shadow: 2px 0 var(--mfx-glitch-2, #00fff9); animation: mfx-glitch-b 3s infinite linear alternate-reverse; } @keyframes mfx-glitch-a { 0% { clip-path: inset(20% 0 60% 0); transform: translate(-2px); } 20% { clip-path: inset(60% 0 10% 0); transform: translate(2px); } 40% { clip-path: inset(40% 0 43% 0); } 60% { clip-path: inset(80% 0 5% 0); transform: translate(-1px); } 80% { clip-path: inset(10% 0 85% 0); } 100% { clip-path: inset(50% 0 30% 0); transform: translate(1px); } } @keyframes mfx-glitch-b { 0% { clip-path: inset(65% 0 13% 0); transform: translate(2px); } 25% { clip-path: inset(15% 0 70% 0); } 50% { clip-path: inset(90% 0 2% 0); transform: translate(-2px); } 75% { clip-path: inset(30% 0 50% 0); } 100% { clip-path: inset(5% 0 80% 0); transform: translate(1px); } } /* Néon */ .mfx-text-neon .mfx--tt, .mfx-text-neon.mfx--tt { color: #fff; text-shadow: 0 0 4px #fff, 0 0 10px var(--mfx-neon, #0ff), 0 0 22px var(--mfx-neon, #0ff), 0 0 44px var(--mfx-neon, #0ff); animation: mfx-neon 4s infinite; } @keyframes mfx-neon { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .45; text-shadow: none; } } /* Surlignage / soulignement qui se dessinent à l'apparition */ .mfx--hl { -webkit-box-decoration-break: slice; box-decoration-break: slice; background-repeat: no-repeat; transition: background-size var(--mfx-hl-duration, 1.1s) var(--mfx-ease) calc(var(--mfx-delay) + 200ms); } .mfx-text-highlight .mfx--hl { background-image: linear-gradient(var(--mfx-hl, rgba(253, 203, 110, .75)), var(--mfx-hl, rgba(253, 203, 110, .75))); background-position: 0 88%; background-size: 100% 38%; } .mfx-text-highlight-full .mfx--hl { background-image: linear-gradient(var(--mfx-hl, rgba(253, 203, 110, .75)), var(--mfx-hl, rgba(253, 203, 110, .75))); background-position: 0 50%; background-size: 100% 100%; } .mfx-text-underline .mfx--hl { background-image: linear-gradient(var(--mfx-hl, currentColor), var(--mfx-hl, currentColor)); background-position: 0 100%; background-size: 100% var(--mfx-hl-h, 3px); } html.mfx-js .mfx-text-highlight:not(.mfx-is-visible) .mfx--hl { background-size: 0% 38%; } html.mfx-js .mfx-text-highlight-full:not(.mfx-is-visible) .mfx--hl { background-size: 0% 100%; } html.mfx-js .mfx-text-underline:not(.mfx-is-visible) .mfx--hl { background-size: 0% var(--mfx-hl-h, 3px); } /* Texte contour qui se remplit */ .mfx-text-stroke .mfx--hl { -webkit-text-stroke: var(--mfx-stroke-w, 1px) currentColor; -webkit-text-fill-color: transparent; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; transition-duration: var(--mfx-hl-duration, 1.6s); } html.mfx-js .mfx-text-stroke:not(.mfx-is-visible) .mfx--hl { background-size: 0% 100%; } /* Machine à écrire */ html.mfx-js .mfx-text-typewriter:not(.mfx--tw) { opacity: 0; } html.mfx-js .mfx--tw .mfx--c { opacity: 0; } html.mfx-js .mfx--tw .mfx--c.mfx--on { opacity: 1; } .mfx--tw .mfx--c { position: relative; } .mfx--caret::after { content: ""; position: absolute; right: -.08em; top: .1em; bottom: .1em; width: .08em; background: var(--mfx-caret, currentColor); animation: mfx-blink 1s steps(1) infinite; } @keyframes mfx-blink { 50% { opacity: 0; } } /* Déchiffrement */ html.mfx-js .mfx-text-scramble:not(.mfx-is-visible) { opacity: 0; } /* Rotateur de mots : "Nous créons des [sites|boutiques|apps]" */ .mfx--rot { display: inline-grid; vertical-align: baseline; overflow: clip; overflow-clip-margin: .15em; color: var(--mfx-rot-color, inherit); transition: width .5s var(--mfx-ease); } .mfx--rw { grid-area: 1 / 1; justify-self: start; white-space: nowrap; opacity: 0; transform: translate3d(0, 105%, 0); transition: transform .65s var(--mfx-ease), opacity .65s var(--mfx-ease); } .mfx--rw.is-on { opacity: 1; transform: none; } .mfx--rw.is-off { opacity: 0; transform: translate3d(0, -105%, 0); } .mfx--rot-type { color: var(--mfx-rot-color, inherit); position: relative; white-space: pre; } .mfx--rot-type::after { content: ""; display: inline-block; width: .08em; height: 1em; margin-left: .05em; vertical-align: -.1em; background: currentColor; animation: mfx-blink 1s steps(1) infinite; } /* ========================================================================== 4. SURVOL (mfx-hover-*) ========================================================================== */ [class*="mfx-hover-"] { transition: transform var(--mfx-hover-duration) var(--mfx-hover-ease), box-shadow var(--mfx-hover-duration) var(--mfx-hover-ease), filter var(--mfx-hover-duration) var(--mfx-hover-ease); } /* Transformations */ .mfx-hover-grow:hover { transform: scale(1.06); } .mfx-hover-shrink:hover { transform: scale(.94); } .mfx-hover-float:hover { transform: translate3d(0, -8px, 0); } .mfx-hover-sink:hover { transform: translate3d(0, 8px, 0); } .mfx-hover-forward:hover { transform: translate3d(8px, 0, 0); } .mfx-hover-backward:hover { transform: translate3d(-8px, 0, 0); } .mfx-hover-rotate:hover { transform: rotate(4deg); } .mfx-hover-grow-rotate:hover { transform: scale(1.08) rotate(4deg); } .mfx-hover-skew:hover { transform: skew(-8deg); } .mfx-hover-skew-forward:hover { transform: skewX(-12deg); transform-origin: 0 100%; } .mfx-hover-lift-3d:hover { transform: perspective(900px) rotateX(10deg) translate3d(0, -6px, 0); } .mfx-hover-shadow:hover { transform: translate3d(0, -8px, 0); box-shadow: 0 22px 45px -15px rgba(0, 0, 0, .35); } .mfx-hover-shadow-grow:hover { box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .3); } .mfx-hover-glow:hover { box-shadow: 0 0 32px var(--mfx-glow, rgba(108, 92, 231, .65)); } .mfx-hover-ring:hover { box-shadow: 0 0 0 6px var(--mfx-glow, rgba(108, 92, 231, .35)); } .mfx-hover-dim:hover { filter: brightness(.85); } .mfx-hover-brighten:hover { filter: brightness(1.12) saturate(1.1); } /* Animations déclenchées au survol */ .mfx-hover-pulse:hover { animation: mfx-l-pulse 1s ease-in-out infinite; } .mfx-hover-pulse-grow:hover { animation: mfx-h-pulse-grow .5s ease-in-out infinite alternate; } .mfx-hover-push:hover { animation: mfx-h-push .35s linear; } .mfx-hover-pop:hover { animation: mfx-h-pop .35s linear; } .mfx-hover-bob:hover { animation: mfx-h-bob-float .3s ease-out forwards, mfx-h-bob 1.5s .3s ease-in-out infinite alternate; } .mfx-hover-hang:hover { animation: mfx-h-hang-sink .3s ease-out forwards, mfx-h-hang 1.5s .3s ease-in-out infinite alternate; } .mfx-hover-buzz:hover { animation: mfx-h-buzz .15s linear infinite; } .mfx-hover-buzz-out:hover { animation: mfx-h-buzz-out .75s linear; } .mfx-hover-wobble:hover { animation: mfx-l-wobble .9s ease-in-out; } .mfx-hover-wobble-v:hover { animation: mfx-h-wobble-v .9s ease-in-out; } .mfx-hover-wobble-skew:hover { animation: mfx-h-wobble-skew .9s ease-in-out; } .mfx-hover-jello:hover { animation: mfx-l-jello .9s; } .mfx-hover-rubber:hover { animation: mfx-l-rubber .9s; } .mfx-hover-swing:hover { animation: mfx-l-swing .9s ease-in-out; transform-origin: 50% 0; } .mfx-hover-tada:hover { animation: mfx-l-tada .9s; } .mfx-hover-shake:hover { animation: mfx-l-shake .6s; } .mfx-hover-heartbeat:hover { animation: mfx-l-heartbeat 1.2s ease-in-out infinite; } .mfx-hover-spin:hover { animation: mfx-h-spin .7s var(--mfx-hover-ease); } .mfx-hover-flip:hover { animation: mfx-h-flip .8s var(--mfx-hover-ease); } @keyframes mfx-h-pulse-grow { to { transform: scale(1.08); } } @keyframes mfx-h-push { 50% { transform: scale(.85); } 100% { transform: scale(1); } } @keyframes mfx-h-pop { 50% { transform: scale(1.18); } } @keyframes mfx-h-bob-float { 100% { transform: translate3d(0, -8px, 0); } } @keyframes mfx-h-bob { 0% { transform: translate3d(0, -8px, 0); } 50% { transform: translate3d(0, -4px, 0); } 100% { transform: translate3d(0, -8px, 0); } } @keyframes mfx-h-hang-sink { 100% { transform: translate3d(0, 8px, 0); } } @keyframes mfx-h-hang { 0% { transform: translate3d(0, 8px, 0); } 50% { transform: translate3d(0, 4px, 0); } 100% { transform: translate3d(0, 8px, 0); } } @keyframes mfx-h-buzz { 50% { transform: translateX(3px) rotate(2deg); } 100% { transform: translateX(-3px) rotate(-2deg); } } @keyframes mfx-h-buzz-out { 10% { transform: translateX(3px) rotate(2deg); } 20% { transform: translateX(-3px) rotate(-2deg); } 30% { transform: translateX(3px) rotate(2deg); } 40% { transform: translateX(-3px) rotate(-2deg); } 50% { transform: translateX(2px) rotate(1deg); } 60% { transform: translateX(-2px) rotate(-1deg); } 70% { transform: translateX(2px) rotate(1deg); } 80% { transform: translateX(-2px) rotate(-1deg); } 90% { transform: translateX(1px); } 100% { transform: none; } } @keyframes mfx-h-wobble-v { 16.65% { transform: translateY(8px); } 33.3% { transform: translateY(-6px); } 49.95% { transform: translateY(4px); } 66.6% { transform: translateY(-2px); } 83.25% { transform: translateY(1px); } 100% { transform: none; } } @keyframes mfx-h-wobble-skew { 16.65% { transform: skew(-12deg); } 33.3% { transform: skew(10deg); } 49.95% { transform: skew(-6deg); } 66.6% { transform: skew(4deg); } 83.25% { transform: skew(-2deg); } 100% { transform: none; } } @keyframes mfx-h-spin { to { transform: rotate(360deg); } } @keyframes mfx-h-flip { to { transform: perspective(800px) rotateY(360deg); } } /* Images (zoom, filtres) */ [class*="mfx-hover-img-"] { overflow: hidden; } [class*="mfx-hover-img-"] img { transition: transform .8s var(--mfx-ease), filter .6s var(--mfx-ease); } .mfx-hover-img-zoom:hover img { transform: scale(1.1); } .mfx-hover-img-zoom-out img { transform: scale(1.12); } .mfx-hover-img-zoom-out:hover img { transform: scale(1); } .mfx-hover-img-zoom-rotate:hover img { transform: scale(1.18) rotate(3deg); } .mfx-hover-img-pan img { transform: scale(1.15) translate3d(3%, 0, 0); } .mfx-hover-img-pan:hover img { transform: scale(1.15) translate3d(-3%, 0, 0); } .mfx-hover-img-color img { filter: grayscale(1); } .mfx-hover-img-color:hover img { filter: none; } .mfx-hover-img-gray:hover img { filter: grayscale(1); } .mfx-hover-img-blur:hover img { filter: blur(3px); transform: scale(1.04); } .mfx-hover-img-unblur img { filter: blur(4px); } .mfx-hover-img-unblur:hover img { filter: none; } .mfx-hover-img-bright img { filter: brightness(.7); } .mfx-hover-img-bright:hover img { filter: none; } .mfx-hover-img-dark:hover img { filter: brightness(.6); } .mfx-hover-img-sepia img { filter: sepia(.9); } .mfx-hover-img-sepia:hover img { filter: none; } .mfx-hover-img-hue:hover img { filter: hue-rotate(90deg) saturate(1.4); } /* Boutons : remplissage animé */ [class*="mfx-hover-fill-"] :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance), [class*="mfx-hover-fill-"]:is(a, button) { position: relative; isolation: isolate; overflow: hidden; transition: color .4s var(--mfx-hover-ease), background-color .4s; } [class*="mfx-hover-fill-"] :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance)::before, [class*="mfx-hover-fill-"]:is(a, button)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--mfx-fill, rgba(0, 0, 0, .22)); transition: transform .5s var(--mfx-hover-ease), clip-path .6s var(--mfx-hover-ease); } .mfx-hover-fill-left :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance)::before, .mfx-hover-fill-left:is(a, button)::before { transform: scaleX(0); transform-origin: 0 50%; } .mfx-hover-fill-right :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance)::before, .mfx-hover-fill-right:is(a, button)::before { transform: scaleX(0); transform-origin: 100% 50%; } .mfx-hover-fill-up :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance)::before, .mfx-hover-fill-up:is(a, button)::before { transform: scaleY(0); transform-origin: 50% 100%; } .mfx-hover-fill-down :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance)::before, .mfx-hover-fill-down:is(a, button)::before { transform: scaleY(0); transform-origin: 50% 0; } .mfx-hover-fill-center :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance)::before, .mfx-hover-fill-center:is(a, button)::before { transform: scaleX(0); } .mfx-hover-fill-circle :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance)::before, .mfx-hover-fill-circle:is(a, button)::before { clip-path: circle(0% at 50% 50%); } .mfx-hover-fill-diagonal :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance)::before, .mfx-hover-fill-diagonal:is(a, button)::before { inset: 0 -25%; transform: translate3d(-105%, 0, 0) skewX(-25deg); } /* Traversant : entre par un côté, ressort par l'autre (l'origine bascule instantanément) */ .mfx-hover-fill-sweep :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance)::before, .mfx-hover-fill-sweep:is(a, button)::before { transform: scaleX(0); transform-origin: 100% 50%; } .mfx-hover-fill-sweep :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance):is(:hover, :focus-visible)::before, .mfx-hover-fill-sweep:is(a, button):hover::before { transform-origin: 0 50%; } .mfx-hover-fill-sweep-up :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance)::before, .mfx-hover-fill-sweep-up:is(a, button)::before { transform: scaleY(0); transform-origin: 50% 0; } .mfx-hover-fill-sweep-up :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance):is(:hover, :focus-visible)::before, .mfx-hover-fill-sweep-up:is(a, button):hover::before { transform-origin: 50% 100%; } [class*="mfx-hover-fill-"] :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance):is(:hover, :focus-visible)::before, [class*="mfx-hover-fill-"]:is(a, button):hover::before { transform: none; } .mfx-hover-fill-circle :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance):is(:hover, :focus-visible)::before, .mfx-hover-fill-circle:is(a, button):hover::before { clip-path: circle(75% at 50% 50%); } .mfx-hover-fill-diagonal :is(.elementor-button, a.button, button, .wp-block-button__link, .wp-element-button, .jet-button__instance):is(:hover, :focus-visible)::before, .mfx-hover-fill-diagonal:is(a, button):hover::before { transform: translate3d(0, 0, 0) skewX(-25deg); } /* Reflet (span injecté par JS) */ .mfx--shine-host { overflow: hidden; } /* position relative ajoutée en JS seulement si l'élément est « static » */ .mfx--shine { position: absolute; top: 0; left: -80%; width: 50%; height: 100%; z-index: 3; pointer-events: none; background: linear-gradient(120deg, transparent, var(--mfx-shine, rgba(255, 255, 255, .5)), transparent); transform: skewX(-25deg); } .mfx-hover-shine .mfx--shine-host:hover .mfx--shine, .mfx-hover-shine.mfx--shine-host:hover .mfx--shine { animation: mfx-shine-sweep .85s var(--mfx-hover-ease); } @keyframes mfx-shine-sweep { to { left: 140%; } } /* Soulignements animés (texte enveloppé par JS dans .mfx--hl) */ [class*="mfx-hover-underline-"] .mfx--hl, .mfx-hover-overline .mfx--hl { background-image: linear-gradient(var(--mfx-line, currentColor), var(--mfx-line, currentColor)); background-repeat: no-repeat; background-size: 0% var(--mfx-line-h, 2px); transition: background-size .45s var(--mfx-hover-ease); } .mfx-hover-underline-left .mfx--hl { background-position: 0 100%; } .mfx-hover-underline-right .mfx--hl { background-position: 100% 100%; } .mfx-hover-underline-center .mfx--hl { background-position: 50% 100%; } .mfx-hover-overline .mfx--hl { background-position: 0 0; } [class*="mfx-hover-underline-"]:hover .mfx--hl, .mfx-hover-overline:hover .mfx--hl { background-size: 100% var(--mfx-line-h, 2px); } .mfx-hover-underline-reveal .mfx--hl { background-position: 100% 100%; background-size: 100% var(--mfx-line-h, 2px); } .mfx-hover-underline-reveal:hover .mfx--hl { animation: mfx-underline-reveal .7s var(--mfx-hover-ease); } @keyframes mfx-underline-reveal { 0% { background-size: 100% var(--mfx-line-h, 2px); background-position: 100% 100%; } 49% { background-size: 0% var(--mfx-line-h, 2px); background-position: 100% 100%; } 50% { background-size: 0% var(--mfx-line-h, 2px); background-position: 0 100%; } 100% { background-size: 100% var(--mfx-line-h, 2px); background-position: 0 100%; } } /* Texte du bouton qui tourne et réaffiche le même texte (mfx-btxt-*) Copie dessinée par text-shadow : aucun doublon dans le DOM ni pour les lecteurs d'écran. */ .mfx--roll { display: inline-block; vertical-align: top; overflow: hidden; padding: .15em 0; margin: -.15em 0; } .mfx--roll-in { display: inline-block; text-shadow: 0 var(--mfx-roll-gap, 1.6em) currentColor; transition: transform var(--mfx-roll-duration, .5s) var(--mfx-roll-ease, cubic-bezier(.7, 0, .2, 1)); } .mfx-btxt-roll-down .mfx--roll-in { text-shadow: 0 calc(var(--mfx-roll-gap, 1.6em) * -1) currentColor; } .mfx-btxt-slide .mfx--roll { padding: .15em .05em; margin: -.15em -.05em; } .mfx-btxt-slide .mfx--roll-in { text-shadow: calc(var(--mfx-roll-gap, 4em) * -1) 0 currentColor; } .mfx-btxt-roll-chars .mfx--roll-in { transition: none; } .mfx-btxt-roll-chars .mfx--c { transition: transform var(--mfx-roll-duration, .5s) var(--mfx-roll-ease, cubic-bezier(.7, 0, .2, 1)); transition-delay: calc(var(--mfx-ci, 0) * var(--mfx-roll-stagger, 22ms)); } .mfx-btxt-roll .mfx--hh:is(:hover, :focus-visible) .mfx--roll-in, .mfx-btxt-roll.mfx--hh:is(:hover, :focus-within) .mfx--roll-in { transform: translate3d(0, calc(var(--mfx-roll-gap, 1.6em) * -1), 0); } .mfx-btxt-roll-down .mfx--hh:is(:hover, :focus-visible) .mfx--roll-in, .mfx-btxt-roll-down.mfx--hh:is(:hover, :focus-within) .mfx--roll-in { transform: translate3d(0, var(--mfx-roll-gap, 1.6em), 0); } .mfx-btxt-slide .mfx--hh:is(:hover, :focus-visible) .mfx--roll-in, .mfx-btxt-slide.mfx--hh:is(:hover, :focus-within) .mfx--roll-in { transform: translate3d(var(--mfx-roll-gap, 4em), 0, 0); } .mfx-btxt-roll-chars .mfx--hh:is(:hover, :focus-visible) .mfx--c, .mfx-btxt-roll-chars.mfx--hh:is(:hover, :focus-within) .mfx--c { transform: translate3d(0, calc(var(--mfx-roll-gap, 1.6em) * -1), 0); } /* Icônes */ :is(.mfx-hover-icon-forward, .mfx-hover-icon-spin, .mfx-hover-icon-bounce) :is(.elementor-button-icon, .elementor-icon, .elementor-icon-list-icon, .jet-button__icon) { display: inline-flex; transition: transform .4s var(--mfx-hover-ease); } .mfx-hover-icon-forward:hover :is(.elementor-button-icon, .elementor-icon, .elementor-icon-list-icon, .jet-button__icon) { transform: translate3d(6px, 0, 0); } .mfx-hover-icon-spin:hover :is(.elementor-button-icon, .elementor-icon, .elementor-icon-list-icon, .jet-button__icon) { transform: rotate(360deg); } .mfx-hover-icon-bounce:hover :is(.elementor-button-icon, .elementor-icon, .elementor-icon-list-icon, .jet-button__icon) { animation: mfx-l-bounce .8s; } /* ========================================================================== 5. BOUCLES (mfx-loop-*) — démarrent après l'entrée éventuelle ========================================================================== */ html.mfx-js [class*="mfx-loop-"]:is(:not([class*="mfx-in-"]), .mfx-is-done) { animation-duration: var(--mfx-loop-duration, var(--mfx-ld, 2s)); animation-timing-function: var(--mfx-le, ease-in-out); animation-delay: var(--mfx-loop-delay, 0s); animation-iteration-count: infinite; } .mfx-loop-pulse { animation-name: mfx-l-pulse; } .mfx-loop-heartbeat { animation-name: mfx-l-heartbeat; --mfx-ld: 1.4s; } .mfx-loop-breathe { animation-name: mfx-l-breathe; --mfx-ld: 5s; } .mfx-loop-bounce { animation-name: mfx-l-bounce; } .mfx-loop-float { animation-name: mfx-l-float; --mfx-ld: 4s; } .mfx-loop-float-x { animation-name: mfx-l-float-x; --mfx-ld: 4s; } .mfx-loop-float-rotate { animation-name: mfx-l-float-rotate; --mfx-ld: 6s; } .mfx-loop-spin { animation-name: mfx-l-spin; --mfx-ld: 6s; --mfx-le: linear; } .mfx-loop-spin-reverse { animation-name: mfx-l-spin; animation-direction: reverse; --mfx-ld: 6s; --mfx-le: linear; } .mfx-loop-swing { animation-name: mfx-l-swing; transform-origin: 50% 0; } .mfx-loop-pendulum { animation-name: mfx-l-pendulum; transform-origin: 50% 0; --mfx-ld: 3s; } .mfx-loop-wobble { animation-name: mfx-l-wobble; } .mfx-loop-shake { animation-name: mfx-l-shake; } .mfx-loop-jello { animation-name: mfx-l-jello; } .mfx-loop-rubber { animation-name: mfx-l-rubber; } .mfx-loop-tada { animation-name: mfx-l-tada; --mfx-ld: 2.5s; } .mfx-loop-nudge { animation-name: mfx-l-nudge; --mfx-ld: 4s; } .mfx-loop-flash { animation-name: mfx-l-flash; } .mfx-loop-wiggle { animation-name: mfx-l-wiggle; --mfx-ld: 2.5s; } .mfx-loop-ping { animation-name: mfx-l-ping; --mfx-le: ease-out; } .mfx-loop-glow { animation-name: mfx-l-glow; } .mfx-loop-blob { animation-name: mfx-l-blob; --mfx-ld: 8s; overflow: hidden; } .mfx-loop-rainbow { animation-name: mfx-l-rainbow; --mfx-ld: 6s; --mfx-le: linear; } .mfx-loop-flicker { animation-name: mfx-l-flicker; --mfx-ld: 3s; --mfx-le: linear; } .mfx-loop-orbit { animation-name: mfx-l-orbit; --mfx-ld: 6s; --mfx-le: linear; } .mfx-loop-sway-3d { animation-name: mfx-l-sway-3d; --mfx-ld: 5s; } .mfx-loop-ken-burns { animation-name: mfx-l-ken-burns; --mfx-ld: 18s; animation-direction: alternate; } .mfx-loop-morph { animation-name: mfx-l-morph; --mfx-ld: 6s; } @keyframes mfx-l-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes mfx-l-heartbeat { 0%, 28%, 70%, 100% { transform: scale(1); } 14%, 42% { transform: scale(1.12); } } @keyframes mfx-l-breathe { 0%, 100% { transform: scale(.97); opacity: .9; } 50% { transform: scale(1.03); opacity: 1; } } @keyframes mfx-l-bounce { 0%, 20%, 53%, 100% { transform: none; animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 40%, 43% { transform: translate3d(0, -22px, 0) scaleY(1.08); animation-timing-function: cubic-bezier(.755, .05, .855, .06); } 70% { transform: translate3d(0, -11px, 0) scaleY(1.04); } 80% { transform: translate3d(0, 0, 0) scaleY(.96); } 90% { transform: translate3d(0, -4px, 0); } } @keyframes mfx-l-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } } @keyframes mfx-l-float-x { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(14px, 0, 0); } } @keyframes mfx-l-float-rotate { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 33% { transform: translate3d(6px, -12px, 0) rotate(4deg); } 66% { transform: translate3d(-6px, -6px, 0) rotate(-3deg); } } @keyframes mfx-l-spin { to { transform: rotate(360deg); } } @keyframes mfx-l-swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0); } } @keyframes mfx-l-pendulum { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } } @keyframes mfx-l-wobble { 0%, 100% { transform: none; } 15% { transform: translate3d(-20%, 0, 0) rotate(-5deg); } 30% { transform: translate3d(15%, 0, 0) rotate(3deg); } 45% { transform: translate3d(-10%, 0, 0) rotate(-3deg); } 60% { transform: translate3d(7%, 0, 0) rotate(2deg); } 75% { transform: translate3d(-4%, 0, 0) rotate(-1deg); } } @keyframes mfx-l-shake { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-8px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(8px, 0, 0); } } @keyframes mfx-l-jello { 0%, 11.1%, 100% { transform: none; } 22.2% { transform: skew(-12.5deg, -12.5deg); } 33.3% { transform: skew(6.25deg, 6.25deg); } 44.4% { transform: skew(-3.125deg, -3.125deg); } 55.5% { transform: skew(1.56deg, 1.56deg); } 66.6% { transform: skew(-.78deg, -.78deg); } 77.7% { transform: skew(.39deg, .39deg); } } @keyframes mfx-l-rubber { 0%, 100% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, .75, 1); } 40% { transform: scale3d(.75, 1.25, 1); } 50% { transform: scale3d(1.15, .85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } } @keyframes mfx-l-tada { 0%, 60%, 100% { transform: none; } 6%, 12% { transform: scale3d(.9, .9, .9) rotate(-3deg); } 18%, 30%, 42%, 54% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 24%, 36%, 48% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } } @keyframes mfx-l-nudge { 0%, 80%, 100% { transform: none; } 84%, 92% { transform: translate3d(-6px, 0, 0) rotate(-2deg); } 88%, 96% { transform: translate3d(6px, 0, 0) rotate(2deg); } } @keyframes mfx-l-flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: .2; } } @keyframes mfx-l-wiggle { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(-8deg); } 70% { transform: rotate(7deg); } 80% { transform: rotate(-5deg); } 90% { transform: rotate(3deg); } } @keyframes mfx-l-ping { 0% { box-shadow: 0 0 0 0 var(--mfx-ping, rgba(108, 92, 231, .6)); } 80%, 100% { box-shadow: 0 0 0 22px transparent; } } @keyframes mfx-l-glow { 0%, 100% { box-shadow: 0 0 6px var(--mfx-glow, rgba(108, 92, 231, .4)); } 50% { box-shadow: 0 0 34px var(--mfx-glow, rgba(108, 92, 231, .8)); } } @keyframes mfx-l-blob { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 50% { border-radius: 50% 60% 50% 70% / 50% 40% 60% 50%; } 75% { border-radius: 70% 30% 50% 50% / 30% 50% 70% 60%; } } @keyframes mfx-l-rainbow { to { filter: hue-rotate(360deg); } } @keyframes mfx-l-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .3; } } @keyframes mfx-l-orbit { from { transform: rotate(0) translateX(12px) rotate(0); } to { transform: rotate(360deg) translateX(12px) rotate(-360deg); } } @keyframes mfx-l-sway-3d { 0%, 100% { transform: perspective(900px) rotateY(-14deg) rotateX(4deg); } 50% { transform: perspective(900px) rotateY(14deg) rotateX(-4deg); } } @keyframes mfx-l-ken-burns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-2%, -2%, 0); } } @keyframes mfx-l-morph { 0%, 100% { border-radius: 24px; transform: rotate(0); } 50% { border-radius: 50%; transform: rotate(180deg); } } /* ========================================================================== 6. EFFETS AU SCROLL (mfx-sc-*) — variables mises à jour par JS : --mfx-progress 0→1 (traversée), --mfx-pc -1→1 (centré), --mfx-enter 0→1 (entrée), --mfx-exit 0→1 (sortie par le haut) Les effets composent entre eux via translate / rotate / scale / filter. ========================================================================== */ :is(.mfx-sc-parallax, .mfx-sc-parallax-x, .mfx-sc-slide-in-left, .mfx-sc-slide-in-right, .mfx-mouse-move) { --mfx-tx: 0px; --mfx-ty: 0px; --mfx-mx: 0px; --mfx-my: 0px; } .mfx-sc-parallax { --mfx-ty: calc(var(--mfx-pc, 0) * var(--mfx-parallax, 80) * 1px); } .mfx-sc-parallax-x { --mfx-tx: calc(var(--mfx-pc, 0) * var(--mfx-parallax-x, 120) * 1px); } .mfx-sc-slide-in-left { --mfx-tx: calc((1 - var(--mfx-enter, 1)) * var(--mfx-slide, 300) * -1px); } .mfx-sc-slide-in-right { --mfx-tx: calc((1 - var(--mfx-enter, 1)) * var(--mfx-slide, 300) * 1px); } :is(.mfx-sc-parallax, .mfx-sc-parallax-x, .mfx-sc-slide-in-left, .mfx-sc-slide-in-right, .mfx-mouse-move) { translate: calc(var(--mfx-tx) + var(--mfx-mx)) calc(var(--mfx-ty) + var(--mfx-my)); } .mfx-sc-rotate { rotate: calc(var(--mfx-pc, 0) * var(--mfx-rotate, 25) * 1deg); } .mfx-sc-scale { scale: calc(var(--mfx-scale-from, .7) + (1 - var(--mfx-scale-from, .7)) * var(--mfx-enter, 1)); } .mfx-sc-zoom-exit { scale: calc(1 + var(--mfx-exit, 0) * var(--mfx-zoom, .35)); } .mfx-sc-shrink-exit { scale: calc(1 - var(--mfx-exit, 0) * .25); } :is(.mfx-sc-fade, .mfx-sc-fade-out) { --mfx-o-in: 1; --mfx-o-out: 1; } .mfx-sc-fade { --mfx-o-in: var(--mfx-enter, 1); } .mfx-sc-fade-out { --mfx-o-out: calc(1 - var(--mfx-exit, 0)); } :is(.mfx-sc-fade, .mfx-sc-fade-out) { opacity: calc(var(--mfx-o-in) * var(--mfx-o-out)); } :is(.mfx-sc-blur, .mfx-sc-grayscale, .mfx-sc-blur-out) { --mfx-f-blur: 0px; --mfx-f-gray: 0; } .mfx-sc-blur { --mfx-f-blur: calc((1 - var(--mfx-enter, 1)) * var(--mfx-blur, 12) * 1px); } .mfx-sc-blur-out { --mfx-f-blur: calc(var(--mfx-exit, 0) * var(--mfx-blur, 12) * 1px); } .mfx-sc-grayscale { --mfx-f-gray: calc(1 - var(--mfx-enter, 1)); } :is(.mfx-sc-blur, .mfx-sc-grayscale, .mfx-sc-blur-out) { filter: blur(var(--mfx-f-blur)) grayscale(var(--mfx-f-gray)); } .mfx-sc-clip { clip-path: inset(calc((1 - var(--mfx-enter, 1)) * 18%) calc((1 - var(--mfx-enter, 1)) * 18%) round calc((1 - var(--mfx-enter, 1)) * 48px)); } .mfx-sc-clip-left { clip-path: inset(0 calc((1 - var(--mfx-enter, 1)) * 100%) 0 0); } .mfx-sc-clip-up { clip-path: inset(calc((1 - var(--mfx-enter, 1)) * 100%) 0 0 0); } .mfx-sc-tilt-in { rotate: calc((1 - var(--mfx-enter, 1)) * var(--mfx-tilt-in, -8) * 1deg); transform-origin: 0 100%; } .mfx-sc-stretch { scale: 1 calc(1 + var(--mfx-va, 0) * var(--mfx-stretch, .25)); transform-origin: 50% 0; } .mfx-sc-spread { letter-spacing: calc((1 - var(--mfx-enter, 1)) * var(--mfx-spread, .6) * 1em); } .mfx-sc-clip-circle { clip-path: circle(calc(15% + var(--mfx-enter, 1) * 60%) at 50% 50%); } .mfx-sc-3d { transform: perspective(1200px) rotateX(calc((1 - var(--mfx-enter, 1)) * 38deg)); transform-origin: 50% 100%; } .mfx-sc-3d-y { transform: perspective(1200px) rotateY(calc(var(--mfx-pc, 0) * -25deg)); } .mfx-sc-skew { transform: skewY(calc(var(--mfx-vel, 0) * var(--mfx-skew, 6) * 1deg)); } .mfx-sc-img-parallax { overflow: hidden; } .mfx-sc-img-parallax img { scale: 1.25; translate: 0 calc(var(--mfx-pc, 0) * -9%); } .mfx-sc-bg-parallax { background-position: 50% calc(50% + var(--mfx-pc, 0) * var(--mfx-parallax, 80) * 1px) !important; } /* Remplissage du texte mot à mot pendant le scroll */ .mfx-sc-text-fill .mfx--w { opacity: clamp(var(--mfx-fill-min, .18), calc(var(--mfx-fill, 0) * var(--mfx-wn, 1) - var(--mfx-wi, 0)), 1); transition: opacity .15s linear; } /* ========================================================================== 7. SOURIS (mfx-mouse-*) ========================================================================== */ .mfx-mouse-tilt { transform: perspective(var(--mfx-perspective, 1000px)) rotateX(var(--mfx-rx, 0deg)) rotateY(var(--mfx-ry, 0deg)) scale(var(--mfx-ts, 1)); transition: transform .6s var(--mfx-hover-ease); transform-style: preserve-3d; } .mfx-mouse-tilt.mfx--tilting { transition: transform .12s linear; } :where(.mfx-mouse-glare) { position: relative; } .mfx-mouse-glare { overflow: hidden; } .mfx--glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; border-radius: inherit; background: radial-gradient(circle at var(--mfx-gx, 50%) var(--mfx-gy, 50%), rgba(255, 255, 255, var(--mfx-glare, .35)), transparent 60%); transition: opacity .4s; } .mfx--tilting .mfx--glare, .mfx-mouse-glare:hover .mfx--glare { opacity: 1; } .mfx-mouse-magnetic { transform: translate3d(var(--mfx-mgx, 0px), var(--mfx-mgy, 0px), 0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); } .mfx-mouse-trail { overflow: hidden; } .mfx--trail-src { display: none !important; } .mfx--trail-img { position: absolute; z-index: 5; width: var(--mfx-trail-size, 220px); height: auto; max-width: none; pointer-events: none; border-radius: var(--mfx-trail-radius, 12px); translate: -50% -50%; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .45); } @property --mfx-rv-r { syntax: ""; inherits: false; initial-value: 0px; } html.mfx-js:not(.mfx-touch) .mfx-mouse-reveal { -webkit-mask-image: radial-gradient(circle var(--mfx-rv-r) at var(--mfx-spx, 50%) var(--mfx-spy, 50%), #000 60%, transparent 100%); mask-image: radial-gradient(circle var(--mfx-rv-r) at var(--mfx-spx, 50%) var(--mfx-spy, 50%), #000 60%, transparent 100%); transition: --mfx-rv-r .5s var(--mfx-hover-ease); } html.mfx-js:not(.mfx-touch) .mfx-mouse-reveal:hover { --mfx-rv-r: var(--mfx-reveal-size, 200px); } :where(.mfx-mouse-spotlight) { position: relative; isolation: isolate; } .mfx--spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .5s; background: radial-gradient(var(--mfx-spot-size, 380px) circle at var(--mfx-spx, 50%) var(--mfx-spy, 50%), var(--mfx-spot, rgba(108, 92, 231, .35)), transparent 70%); } .mfx-mouse-spotlight:hover .mfx--spot { opacity: 1; } /* ========================================================================== 8. FONDS IMMERSIFS (mfx-bg-*) — calque injecté en premier enfant ========================================================================== */ :where([class*="mfx-bg-"]) { position: relative; isolation: isolate; } .mfx--layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; } .mfx--layer canvas { display: block; width: 100%; height: 100%; } .mfx--layer-gradient { background: linear-gradient(-45deg, var(--mfx-c1, #ee7752), var(--mfx-c2, #e73c7e), var(--mfx-c3, #23a6d5), var(--mfx-c4, #23d5ab)); background-size: 400% 400%; animation: mfx-bg-pan var(--mfx-bg-speed, 15s) ease infinite; } @keyframes mfx-bg-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .mfx--layer-aurora span { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .7; mix-blend-mode: var(--mfx-aurora-blend, normal); animation: mfx-aurora var(--mfx-bg-speed, 18s) ease-in-out infinite alternate; } .mfx--layer-aurora span:nth-child(1) { background: var(--mfx-c1, #6c5ce7); top: -20%; left: -10%; } .mfx--layer-aurora span:nth-child(2) { background: var(--mfx-c2, #00d2d3); bottom: -30%; right: -10%; animation-delay: -6s; animation-duration: calc(var(--mfx-bg-speed, 18s) * 1.3); } .mfx--layer-aurora span:nth-child(3) { background: var(--mfx-c3, #fd79a8); top: 20%; left: 30%; width: 45%; animation-delay: -12s; animation-duration: calc(var(--mfx-bg-speed, 18s) * .8); } @keyframes mfx-aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(20%, 15%, 0) scale(1.2); } 66% { transform: translate3d(-15%, 10%, 0) scale(.85); } 100% { transform: translate3d(10%, -15%, 0) scale(1.1); } } .mfx--layer-grain::after { content: ""; position: absolute; inset: -100%; opacity: var(--mfx-grain, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: mfx-grain .8s steps(6) infinite; } @keyframes mfx-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, -8%); } 40% { transform: translate(-12%, 4%); } 60% { transform: translate(8%, -12%); } 80% { transform: translate(-4%, 12%); } 100% { transform: translate(6%, 5%); } } .mfx--layer-grid { perspective: 400px; } .mfx--layer-grid::before { content: ""; position: absolute; left: -50%; right: -50%; top: 35%; bottom: -60%; background-image: linear-gradient(var(--mfx-c1, rgba(108, 92, 231, .55)) 1px, transparent 1px), linear-gradient(90deg, var(--mfx-c1, rgba(108, 92, 231, .55)) 1px, transparent 1px); background-size: 48px 48px; transform: rotateX(62deg); animation: mfx-grid 3s linear infinite; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%); mask-image: linear-gradient(to bottom, transparent, #000 40%); } @keyframes mfx-grid { to { background-position: 0 48px; } } .mfx--layer-waves svg { position: absolute; left: 0; bottom: 0; width: 200%; height: var(--mfx-wave-h, 140px); } .mfx--layer-waves svg:nth-child(1) { fill: var(--mfx-c1, rgba(108, 92, 231, .35)); animation: mfx-wave-x 14s linear infinite; } .mfx--layer-waves svg:nth-child(2) { fill: var(--mfx-c2, rgba(0, 210, 211, .3)); animation: mfx-wave-x 9s linear infinite reverse; bottom: -10px; } .mfx--layer-waves svg:nth-child(3) { fill: var(--mfx-c3, rgba(253, 121, 168, .25)); animation: mfx-wave-x 20s linear infinite; bottom: -20px; } @keyframes mfx-wave-x { to { transform: translate3d(-50%, 0, 0); } } .mfx--layer-bubbles span { position: absolute; bottom: -80px; border-radius: 50%; background: var(--mfx-c1, rgba(255, 255, 255, .25)); animation: mfx-bubble linear infinite; } @keyframes mfx-bubble { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(var(--mfx-bx, 0px), calc(-100vh - 100px), 0); opacity: 0; } } .mfx--layer-beams::before { content: ""; position: absolute; left: -50%; right: -50%; top: -30%; height: 160%; background: repeating-conic-gradient(from 160deg at 50% 0%, transparent 0deg 7deg, var(--mfx-c1, rgba(162, 155, 254, .35)) 9deg, transparent 12deg 20deg); filter: blur(14px); transform-origin: 50% 0; -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 85%); mask-image: linear-gradient(to bottom, #000 10%, transparent 85%); animation: mfx-beams var(--mfx-bg-speed, 12s) ease-in-out infinite alternate; } @keyframes mfx-beams { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } } /* ========================================================================== 9. MISES EN PAGE IMMERSIVES (mfx-fx-*) ========================================================================== */ /* Défilement horizontal épinglé */ .mfx--hs-sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center; align-self: stretch; } .mfx--hs-track { display: flex; flex-wrap: nowrap; gap: var(--mfx-hs-gap, 30px); padding: 0 var(--mfx-hs-pad, 5vw); will-change: transform; } .mfx--hs-track > * { flex-shrink: 0 !important; } .mfx--hs-native .mfx--hs-sticky { position: relative; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .mfx--hs-native .mfx--hs-track { transform: none !important; } .mfx--hs-native .mfx--hs-track > * { scroll-snap-align: start; } /* Scènes épinglées (expand, zoom-through, steps) — --mfx-pin-p : 0 → 1 */ .mfx--pin { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; align-self: stretch; } .mfx--pin-stage { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mfx-pin-gap, 20px); } .mfx-fx-expand .mfx--pin-stage { clip-path: inset(calc((1 - var(--mfx-pin-p, 0)) * var(--mfx-expand-y, 22%)) calc((1 - var(--mfx-pin-p, 0)) * var(--mfx-expand-x, 28%)) round calc((1 - var(--mfx-pin-p, 0)) * var(--mfx-expand-radius, 40px))); } .mfx-fx-expand .mfx--pin-stage > :first-child { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; z-index: 0; scale: calc(1.3 - var(--mfx-pin-p, 0) * .3); } .mfx-fx-expand .mfx--pin-stage > :first-child :is(img, video, iframe, picture, figure, .elementor-widget-container, .elementor-image, .elementor-video, .e-hosted-video) { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; margin: 0; border-radius: 0; } .mfx-fx-expand .mfx--pin-stage > :not(:first-child) { position: relative; z-index: 1; opacity: clamp(0, calc(var(--mfx-pin-p, 0) * 3 - 1.8), 1); translate: 0 calc((1 - var(--mfx-pin-p, 0)) * 40px); } .mfx-fx-zoom-through .mfx--pin-stage { scale: calc(1 + var(--mfx-pin-p, 0) * var(--mfx-pin-p, 0) * var(--mfx-zoom-max, 12)); opacity: clamp(0, calc(1.7 - var(--mfx-pin-p, 0) * 1.7), 1); transform-origin: var(--mfx-zoom-origin, 50% 50%); } .mfx-fx-steps .mfx--pin-stage { display: grid; place-items: center; } .mfx-fx-steps .mfx--pin-stage > * { grid-area: 1 / 1; opacity: var(--mfx-a, 0); translate: 0 calc((1 - var(--mfx-a, 0)) * var(--mfx-a-dir, 1) * 50px); filter: blur(calc((1 - var(--mfx-a, 0)) * 6px)); } .mfx--steps-dots { position: absolute; right: 24px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 10px; z-index: 3; } .mfx--steps-dots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity .3s, scale .3s; } .mfx--steps-dots i.is-on { opacity: 1; scale: 1.5; } /* Section recouverte par la suivante */ .mfx--cover-shade { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: var(--mfx-cover-color, #000); opacity: calc(var(--mfx-cover-p, 0) * var(--mfx-cover-dim, .55)); } .mfx-fx-cover > :not(.mfx--cover-shade) { scale: calc(1 - var(--mfx-cover-p, 0) * var(--mfx-cover-scale, .06)); transform-origin: 50% 100%; } /* Cartes empilées (sticky stack) */ .mfx--stack-item { position: sticky !important; top: calc(var(--mfx-stack-top, 100px) + var(--mfx-si, 0) * var(--mfx-stack-gap, 18px)); transform-origin: 50% 0; scale: calc(1 - var(--mfx-stack-p, 0) * var(--mfx-stack-scale, .08)); filter: brightness(calc(1 - var(--mfx-stack-p, 0) * var(--mfx-stack-dim, .3))); } /* Défilement infini (marquee) */ .mfx-fx-marquee { overflow: hidden; } .mfx--mq-track { display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; } .mfx--mq-group { display: flex; flex-wrap: nowrap; flex-shrink: 0; align-items: center; gap: var(--mfx-mq-gap, 40px); padding-right: var(--mfx-mq-gap, 40px); } .mfx--mq-group > * { flex-shrink: 0 !important; } .mfx-fx-marquee.mfx-mq-fade { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } /* ========================================================================== 9 bis. MENUS & MODALES ========================================================================== */ /* --- Icône hamburger (injectée par JS dans le bouton / lien / toggle) --- */ .mfx--burger-host :is(i, svg, img, .elementor-button-icon, .elementor-menu-toggle__icon--open, .elementor-menu-toggle__icon--close) { display: none !important; } .mfx--burger { --t: var(--mfx-burger-t, 2px); position: relative; display: inline-block; flex: none; vertical-align: middle; width: var(--mfx-burger-w, 28px); height: var(--mfx-burger-h, 20px); color: var(--mfx-burger-color, currentColor); } .mfx--burger b { position: absolute; left: 0; width: 100%; height: var(--t); border-radius: var(--t); background: currentColor; transition: top .25s .25s cubic-bezier(.7, 0, .2, 1), transform .25s cubic-bezier(.7, 0, .2, 1), opacity .2s .2s, width .3s; } .mfx--burger b:nth-child(1) { top: 0; } .mfx--burger b:nth-child(2) { top: calc(50% - var(--t) / 2); } .mfx--burger b:nth-child(3) { top: calc(100% - var(--t)); } .mfx--is-open .mfx--burger b { transition: top .25s cubic-bezier(.7, 0, .2, 1), transform .3s .25s cubic-bezier(.7, 0, .2, 1), opacity .2s, width .3s; } .mfx--is-open .mfx--burger b:nth-child(1), .mfx--is-open .mfx--burger b:nth-child(3) { top: calc(50% - var(--t) / 2); } /* Croix */ .mfx-burger-x .mfx--is-open .mfx--burger b:nth-child(1), .mfx-burger-spin .mfx--is-open .mfx--burger b:nth-child(1), .mfx-burger-elastic .mfx--is-open .mfx--burger b:nth-child(1), .mfx-burger-slide .mfx--is-open .mfx--burger b:nth-child(1) { transform: rotate(45deg); } .mfx-burger-x .mfx--is-open .mfx--burger b:nth-child(3), .mfx-burger-spin .mfx--is-open .mfx--burger b:nth-child(3), .mfx-burger-elastic .mfx--is-open .mfx--burger b:nth-child(3), .mfx-burger-slide .mfx--is-open .mfx--burger b:nth-child(3) { transform: rotate(-45deg); } .mfx--is-open .mfx--burger b:nth-child(2) { opacity: 0; } /* Rotation de l'ensemble */ .mfx-burger-spin .mfx--burger { transition: transform .6s cubic-bezier(.7, 0, .2, 1); } .mfx-burger-spin .mfx--is-open .mfx--burger { transform: rotate(180deg); } /* Élastique */ .mfx-burger-elastic .mfx--is-open .mfx--burger b { transition: top .2s cubic-bezier(.7, 0, .2, 1), transform .5s .2s cubic-bezier(.34, 1.8, .64, 1), opacity .2s; } /* Ligne du milieu qui glisse */ .mfx-burger-slide .mfx--burger { overflow: visible; } .mfx-burger-slide .mfx--burger b:nth-child(2) { transition: transform .35s cubic-bezier(.7, 0, .2, 1), opacity .35s; } .mfx-burger-slide .mfx--is-open .mfx--burger b:nth-child(2) { transform: translate3d(120%, 0, 0); } /* Flèche */ .mfx-burger-arrow .mfx--is-open .mfx--burger b:nth-child(2) { opacity: 1; } .mfx-burger-arrow .mfx--is-open .mfx--burger b:nth-child(1), .mfx-burger-arrow .mfx--is-open .mfx--burger b:nth-child(3) { width: 55%; transform-origin: calc(var(--t) / 2) 50%; } .mfx-burger-arrow .mfx--is-open .mfx--burger b:nth-child(1) { transform: rotate(-40deg); } .mfx-burger-arrow .mfx--is-open .mfx--burger b:nth-child(3) { transform: rotate(40deg); } /* Tiret */ .mfx-burger-minus .mfx--is-open .mfx--burger b:nth-child(2) { opacity: 1; } /* --- Ouverture du menu mobile (widget Menu Elementor Pro) --- */ [class*="mfx-menu-overlay"] :is(.elementor-menu-toggle, .e-n-menu-toggle) { position: relative; z-index: 100001; } [class*="mfx-menu-overlay"] .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; transform: none !important; z-index: 100000; overflow-y: auto !important; display: grid; align-content: center; background: var(--mfx-menu-bg, #0f0d1a) !important; visibility: hidden; transition: clip-path var(--mfx-open-d, 750ms) cubic-bezier(.77, 0, .175, 1), opacity calc(var(--mfx-open-d, 750ms) * .7) ease, translate var(--mfx-open-d, 750ms) cubic-bezier(.77, 0, .175, 1), scale var(--mfx-open-d, 750ms) cubic-bezier(.77, 0, .175, 1), rotate var(--mfx-open-d, 750ms) cubic-bezier(.22, 1, .36, 1), filter var(--mfx-open-d, 750ms) ease, border-radius var(--mfx-open-d, 750ms) ease, visibility 0s linear var(--mfx-open-d, 750ms) !important; --mfx-items-wait: calc(var(--mfx-open-d, 750ms) * .45); } [class*="mfx-menu-overlay"].mfx--is-open .elementor-nav-menu--dropdown.elementor-nav-menu__container { visibility: visible; transition-delay: 0s !important; } .mfx-menu-overlay-fade:not(.mfx--is-open) .elementor-nav-menu--dropdown.elementor-nav-menu__container { opacity: 0; } .mfx-menu-overlay-circle .elementor-nav-menu--dropdown.elementor-nav-menu__container { clip-path: circle(0 at var(--mfx-ox, 90%) var(--mfx-oy, 40px)); } .mfx-menu-overlay-circle.mfx--is-open .elementor-nav-menu--dropdown.elementor-nav-menu__container { clip-path: circle(150% at var(--mfx-ox, 90%) var(--mfx-oy, 40px)); } .mfx-menu-overlay-curtain .elementor-nav-menu--dropdown.elementor-nav-menu__container { clip-path: inset(0 0 100% 0); } .mfx-menu-overlay-curtain.mfx--is-open .elementor-nav-menu--dropdown.elementor-nav-menu__container { clip-path: inset(0 0 0 0); } .mfx-menu-overlay-side .elementor-nav-menu--dropdown.elementor-nav-menu__container { left: auto !important; width: var(--mfx-menu-w, min(420px, 88vw)) !important; box-shadow: -20px 0 60px rgba(0, 0, 0, .35); } .mfx-menu-overlay-side:not(.mfx--is-open) .elementor-nav-menu--dropdown.elementor-nav-menu__container { translate: 100% 0; } .mfx-menu-overlay-side-left .elementor-nav-menu--dropdown.elementor-nav-menu__container { right: auto !important; width: var(--mfx-menu-w, min(420px, 88vw)) !important; box-shadow: 20px 0 60px rgba(0, 0, 0, .35); } .mfx-menu-overlay-side-left:not(.mfx--is-open) .elementor-nav-menu--dropdown.elementor-nav-menu__container { translate: -100% 0; } [class*="mfx-menu-overlay"] .elementor-nav-menu--dropdown .elementor-nav-menu { padding: 80px 24px; } [class*="mfx-menu-overlay"] .elementor-nav-menu--dropdown :is(a.elementor-item, a.elementor-sub-item) { justify-content: center; text-align: center; background: transparent !important; border: 0 !important; color: var(--mfx-menu-color, #fff) !important; font-size: var(--mfx-menu-size, clamp(26px, 6vw, 46px)); line-height: 1.25; padding: .3em 0 !important; } :is(.mfx-menu-overlay-side, .mfx-menu-overlay-side-left) .elementor-nav-menu--dropdown :is(a.elementor-item, a.elementor-sub-item) { justify-content: flex-start; text-align: left; font-size: var(--mfx-menu-size, 26px); } [class*="mfx-menu-overlay"] .elementor-nav-menu--dropdown a.elementor-sub-item { font-size: .6em; opacity: .8; } html.mfx-lock, html.mfx-lock body { overflow: hidden !important; } /* --- Fenêtres modales & panneaux (mfx-modal-*) --- */ .mfx--modal { perspective: 1600px; position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; padding: var(--mfx-modal-pad, 20px); visibility: hidden; pointer-events: none; overflow: hidden; } .mfx--modal.is-open, .mfx--modal.is-closing { visibility: visible; } .mfx--modal.is-open { pointer-events: auto; } .mfx--modal-bg { position: absolute; inset: 0; opacity: 0; cursor: pointer; background: var(--mfx-backdrop, rgba(10, 10, 20, .6)); -webkit-backdrop-filter: blur(var(--mfx-backdrop-blur, 6px)); backdrop-filter: blur(var(--mfx-backdrop-blur, 6px)); transition: opacity var(--mfx-modal-d, 600ms) ease; } .mfx--modal.is-open .mfx--modal-bg { opacity: 1; } .mfx--modal-box { position: relative !important; z-index: 1; max-width: 100%; max-height: 100%; overflow: auto; overscroll-behavior: contain; transition: transform var(--mfx-modal-d, 600ms) var(--mfx-modal-ease, cubic-bezier(.22, 1, .36, 1)), translate var(--mfx-modal-d, 600ms) cubic-bezier(.77, 0, .175, 1), scale var(--mfx-modal-d, 600ms) var(--mfx-modal-ease, cubic-bezier(.22, 1, .36, 1)), rotate var(--mfx-modal-d, 600ms) cubic-bezier(.22, 1, .36, 1), opacity var(--mfx-modal-d, 600ms) ease, clip-path var(--mfx-modal-d, 600ms) cubic-bezier(.77, 0, .175, 1), filter var(--mfx-modal-d, 600ms) ease, border-radius var(--mfx-modal-d, 600ms) ease; --mfx-items-wait: calc(var(--mfx-modal-d, 600ms) * .45); } .mfx--modal-box:focus { outline: none; } .mfx--modal-x { position: absolute; top: 12px; right: 12px; z-index: 5; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center; background: var(--mfx-close-bg, rgba(0, 0, 0, .06)); color: var(--mfx-close-color, currentColor); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .3s; } .mfx--modal-x:hover { transform: rotate(90deg); background: var(--mfx-close-bg-hover, rgba(0, 0, 0, .12)); } .mfx--modal-x::before, .mfx--modal-x::after { content: ""; position: absolute; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); } .mfx--modal-x::after { transform: rotate(-45deg); } .mfx--modal:not(.is-open) .mfx-modal-zoom { opacity: 0; transform: scale(.88); } .mfx--modal:not(.is-open) .mfx-modal-elastic { opacity: 0; transform: scale(.55); } .mfx--modal.is-open .mfx-modal-elastic { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1), ease, ease, ease; } .mfx--modal:not(.is-open) .mfx-modal-fade { opacity: 0; } .mfx--modal:not(.is-open) .mfx-modal-slide-up { opacity: 0; transform: translate3d(0, 70px, 0); } .mfx--modal:not(.is-open) .mfx-modal-slide-down { opacity: 0; transform: translate3d(0, -70px, 0); } .mfx--modal:not(.is-open) .mfx-modal-flip { opacity: 0; transform: perspective(1200px) rotateX(-70deg); } .mfx-modal-flip { transform-origin: 50% 0; } .mfx--modal:not(.is-open) .mfx-modal-blur { opacity: 0; filter: blur(22px); transform: scale(1.12); } .mfx-modal-circle, .mfx-modal-fullscreen-circle { clip-path: circle(150% at var(--mfx-cx, 50%) var(--mfx-cy, 50%)); } .mfx--modal:not(.is-open) :is(.mfx-modal-circle, .mfx-modal-fullscreen-circle) { clip-path: circle(0% at var(--mfx-cx, 50%) var(--mfx-cy, 50%)); } .mfx--modal--side-left, .mfx--modal--side-right, .mfx--modal--top, .mfx--modal--fullscreen, .mfx--modal--fullscreen-circle { padding: 0; } .mfx--modal--side-left { place-items: stretch start; } .mfx--modal--side-right { place-items: stretch end; } .mfx--modal--top { place-items: start stretch; } .mfx--modal--fullscreen, .mfx--modal--fullscreen-circle { place-items: stretch; } .mfx-modal-side-left, .mfx-modal-side-right { height: 100vh; height: 100dvh; max-height: none; width: var(--mfx-modal-w, min(420px, 88vw)) !important; box-shadow: 0 0 60px rgba(0, 0, 0, .3); } .mfx--modal:not(.is-open) .mfx-modal-side-left { transform: translate3d(-100%, 0, 0); } .mfx--modal:not(.is-open) .mfx-modal-side-right { transform: translate3d(100%, 0, 0); } .mfx-modal-top { width: 100% !important; max-height: 90vh; } .mfx--modal:not(.is-open) .mfx-modal-top { transform: translate3d(0, -100%, 0); } .mfx-modal-fullscreen, .mfx-modal-fullscreen-circle { width: 100% !important; height: 100vh; height: 100dvh; max-height: none; clip-path: inset(0 0 0 0); } .mfx--modal:not(.is-open) .mfx-modal-fullscreen { clip-path: inset(0 0 100% 0); } .mfx--modal.is-closing .mfx-modal-fullscreen { clip-path: inset(100% 0 0 0); } .mfx--modal:is(.is-open, .is-closing) .mfx-modal-fullscreen-circle { clip-path: circle(150% at var(--mfx-cx, 50%) var(--mfx-cy, 50%)); } .mfx--modal:not(.is-open) .mfx-modal-fullscreen-circle { clip-path: circle(0% at var(--mfx-cx, 50%) var(--mfx-cy, 50%)); } /* --- Animation d'ouverture du conteneur (data-mfx-open, posé par JS) : modales ET menu mobile --- Remplace l'animation par défaut du type de modale / menu. Propriétés individuelles (translate, scale, rotate) pour ne pas entrer en conflit avec les transform imposés par Elementor. */ .mfx--modal .mfx--modal-box[data-mfx-open], [class*="mfx-menu-"] .elementor-nav-menu__container.mfx--anim-target[data-mfx-open] { opacity: 1; clip-path: none; filter: none; transform: none; translate: none; scale: none; rotate: none; } .mfx--anim-target.mfx--anim-target[data-mfx-open="fade"]:not(.mfx--open) { opacity: 0; } .mfx--anim-target.mfx--anim-target[data-mfx-open="zoom"]:not(.mfx--open) { opacity: 0; scale: .85; } .mfx--anim-target.mfx--anim-target[data-mfx-open="elastic"]:not(.mfx--open) { opacity: 0; scale: .5; } .mfx--anim-target.mfx--anim-target[data-mfx-open="elastic"].mfx--open { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1) !important; } .mfx--anim-target.mfx--anim-target[data-mfx-open="blur"]:not(.mfx--open) { opacity: 0; filter: blur(24px); scale: 1.1; } .mfx--anim-target.mfx--anim-target[data-mfx-open="flip"]:not(.mfx--open) { opacity: 0; rotate: x -75deg; transform-origin: 50% 0; } .mfx--anim-target.mfx--anim-target[data-mfx-open="from-bottom"]:not(.mfx--open) { translate: 0 100vh; } .mfx--anim-target.mfx--anim-target[data-mfx-open="from-top"]:not(.mfx--open) { translate: 0 -100vh; } .mfx--anim-target.mfx--anim-target[data-mfx-open="from-left"]:not(.mfx--open) { translate: -100vw 0; } .mfx--anim-target.mfx--anim-target[data-mfx-open="from-right"]:not(.mfx--open) { translate: 100vw 0; } .mfx--anim-target.mfx--anim-target[data-mfx-open="circle"]:not(.mfx--open) { clip-path: circle(0% at var(--mfx-ox, 50%) var(--mfx-oy, 50%)); } .mfx--anim-target.mfx--anim-target[data-mfx-open="circle"].mfx--open { clip-path: circle(150% at var(--mfx-ox, 50%) var(--mfx-oy, 50%)); } .mfx--anim-target.mfx--anim-target[data-mfx-open="circle-center"]:not(.mfx--open) { clip-path: circle(0% at 50% 50%); } .mfx--anim-target.mfx--anim-target[data-mfx-open="circle-center"].mfx--open { clip-path: circle(75% at 50% 50%); } .mfx--anim-target.mfx--anim-target[data-mfx-open="grow"]:not(.mfx--open) { scale: 0; border-radius: 50%; transform-origin: var(--mfx-ox, 50%) var(--mfx-oy, 50%); } .mfx--anim-target.mfx--anim-target[data-mfx-open="grow"].mfx--open { transform-origin: var(--mfx-ox, 50%) var(--mfx-oy, 50%); } .mfx--anim-target.mfx--anim-target[data-mfx-open="morph"]:not(.mfx--open) { opacity: 0; } .mfx--anim-target.mfx--anim-target[data-mfx-open="curtain-down"]:not(.mfx--open) { clip-path: inset(0 0 100% 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="curtain-down"].mfx--open { clip-path: inset(0 0 0 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="curtain-up"]:not(.mfx--open) { clip-path: inset(100% 0 0 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="curtain-up"].mfx--open { clip-path: inset(0 0 0 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="curtain-right"]:not(.mfx--open) { clip-path: inset(0 100% 0 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="curtain-right"].mfx--open { clip-path: inset(0 0 0 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="curtain-left"]:not(.mfx--open) { clip-path: inset(0 0 0 100%); } .mfx--anim-target.mfx--anim-target[data-mfx-open="curtain-left"].mfx--open { clip-path: inset(0 0 0 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="split"]:not(.mfx--open) { clip-path: inset(0 50% 0 50%); } .mfx--anim-target.mfx--anim-target[data-mfx-open="split"].mfx--open { clip-path: inset(0 0 0 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="split-v"]:not(.mfx--open) { clip-path: inset(50% 0 50% 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="split-v"].mfx--open { clip-path: inset(0 0 0 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="diagonal"]:not(.mfx--open) { clip-path: polygon(100% 0, 100% 0, 100% 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="diagonal"].mfx--open { clip-path: polygon(100% 0, 100% 200%, -100% 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="blinds"]:not(.mfx--open) { clip-path: polygon(0 0%, 100% 0%, 100% calc(0% + 0%), 0 calc(0% + 0%), 0 20%, 100% 20%, 100% calc(20% + 0%), 0 calc(20% + 0%), 0 40%, 100% 40%, 100% calc(40% + 0%), 0 calc(40% + 0%), 0 60%, 100% 60%, 100% calc(60% + 0%), 0 calc(60% + 0%), 0 80%, 100% 80%, 100% calc(80% + 0%), 0 calc(80% + 0%)); } .mfx--anim-target.mfx--anim-target[data-mfx-open="blinds"].mfx--open { clip-path: polygon(0 0%, 100% 0%, 100% calc(0% + 20.5%), 0 calc(0% + 20.5%), 0 20%, 100% 20%, 100% calc(20% + 20.5%), 0 calc(20% + 20.5%), 0 40%, 100% 40%, 100% calc(40% + 20.5%), 0 calc(40% + 20.5%), 0 60%, 100% 60%, 100% calc(60% + 20.5%), 0 calc(60% + 20.5%), 0 80%, 100% 80%, 100% calc(80% + 20.5%), 0 calc(80% + 20.5%)); } .mfx--anim-target.mfx--anim-target[data-mfx-open="bars"]:not(.mfx--open) { clip-path: polygon(0% 0, 0% 100%, calc(0% + 0%) 100%, calc(0% + 0%) 0, 20% 0, 20% 100%, calc(20% + 0%) 100%, calc(20% + 0%) 0, 40% 0, 40% 100%, calc(40% + 0%) 100%, calc(40% + 0%) 0, 60% 0, 60% 100%, calc(60% + 0%) 100%, calc(60% + 0%) 0, 80% 0, 80% 100%, calc(80% + 0%) 100%, calc(80% + 0%) 0); } .mfx--anim-target.mfx--anim-target[data-mfx-open="bars"].mfx--open { clip-path: polygon(0% 0, 0% 100%, calc(0% + 20.5%) 100%, calc(0% + 20.5%) 0, 20% 0, 20% 100%, calc(20% + 20.5%) 100%, calc(20% + 20.5%) 0, 40% 0, 40% 100%, calc(40% + 20.5%) 100%, calc(40% + 20.5%) 0, 60% 0, 60% 100%, calc(60% + 20.5%) 100%, calc(60% + 20.5%) 0, 80% 0, 80% 100%, calc(80% + 20.5%) 100%, calc(80% + 20.5%) 0); } /* --- Animation des liens / du contenu (data-mfx-items) --- */ .mfx--item { transition: opacity .45s ease, translate .65s cubic-bezier(.22, 1, .36, 1), scale .65s cubic-bezier(.22, 1, .36, 1), rotate .65s cubic-bezier(.22, 1, .36, 1), filter .5s ease, clip-path .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1); } .mfx--anim-target.mfx--open .mfx--item { transition-delay: calc(var(--mfx-items-wait, 250ms) + var(--mfx-i, 0) * var(--mfx-items-stagger, 70ms)); } .mfx--anim-target:not(.mfx--open) .mfx--item { transition-delay: 0s; } [data-mfx-items="none"] .mfx--item { transition: none !important; } [data-mfx-items="mask"] .mfx--item { clip-path: inset(-15% -15% -15% -15%); } .mfx--anim-target[data-mfx-items="fade-up"]:not(.mfx--open) .mfx--item { opacity: 0; translate: 0 28px; } .mfx--anim-target[data-mfx-items="fade-down"]:not(.mfx--open) .mfx--item { opacity: 0; translate: 0 -28px; } .mfx--anim-target[data-mfx-items="fade-left"]:not(.mfx--open) .mfx--item { opacity: 0; translate: 50px 0; } .mfx--anim-target[data-mfx-items="fade-right"]:not(.mfx--open) .mfx--item { opacity: 0; translate: -50px 0; } .mfx--anim-target[data-mfx-items="zoom"]:not(.mfx--open) .mfx--item { opacity: 0; scale: .7; } .mfx--anim-target[data-mfx-items="blur"]:not(.mfx--open) .mfx--item { opacity: 0; filter: blur(12px); } .mfx--anim-target[data-mfx-items="flip"]:not(.mfx--open) .mfx--item { opacity: 0; rotate: x -90deg; transform-origin: 50% 100%; } .mfx--anim-target[data-mfx-items="mask"]:not(.mfx--open) .mfx--item { clip-path: inset(0 0 100% 0); translate: 0 70%; } .mfx--anim-target[data-mfx-items="skew"]:not(.mfx--open) .mfx--item { opacity: 0; translate: 0 34px; transform: skewY(7deg); } .mfx--anim-target[data-mfx-items="rotate"]:not(.mfx--open) .mfx--item { opacity: 0; translate: 0 30px; rotate: -7deg; transform-origin: 0 100%; } /* Avant l'initialisation JS, une modale ne doit pas apparaître dans la page */ html.mfx-front [class*="mfx-modal-"]:not(.mfx--modal-box) { display: none !important; } html:not(.mfx-js) :is(.mfx--modal-box, .mfx--modal-bg, .mfx--item, .mfx--burger b, .mfx--burger, .elementor-nav-menu__container) { transition: none !important; } /* Repère visuel dans l'éditeur Elementor */ body.elementor-editor-active [class*="mfx-modal-"] { outline: 2px dashed rgba(108, 92, 231, .6); outline-offset: -2px; } /* ========================================================================== 10. INTERFACE GLOBALE (curseur, barre de progression, retour en haut, ripple…) ========================================================================== */ .mfx-progress { position: fixed; top: 0; left: 0; right: 0; height: var(--mfx-progress-h, 3px); z-index: 999997; pointer-events: none; } .mfx-progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--mfx-progress-color, linear-gradient(90deg, var(--mfx-accent), var(--mfx-accent-2))); } body.admin-bar .mfx-progress { top: 32px; } @media (max-width: 782px) { body.admin-bar .mfx-progress { top: 46px; } } /* Bouton « retour en haut » — entièrement piloté par variables (réglages NSC Motion) */ html body .mfx-totop { position: fixed !important; top: auto; left: auto; margin: 0; z-index: 99990; box-sizing: border-box; bottom: calc(var(--mfx-tt-bottom, 24px) + env(safe-area-inset-bottom, 0px)); right: var(--mfx-tt-side, 24px); min-width: var(--mfx-tt-size, 52px); height: var(--mfx-tt-size, 52px); padding: 0; border: var(--mfx-tt-bw, 0px) solid var(--mfx-tt-bc, transparent); border-radius: var(--mfx-tt-radius, 999px); background: var(--mfx-totop-bg, #111); color: var(--mfx-totop-color, #fff); display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 600 var(--mfx-tt-font, 14px)/1 inherit; letter-spacing: .02em; text-transform: none; cursor: pointer; box-shadow: var(--mfx-tt-shadow, 0 10px 30px -10px rgba(0, 0, 0, .5)); -webkit-backdrop-filter: blur(var(--mfx-tt-blur, 0px)); backdrop-filter: blur(var(--mfx-tt-blur, 0px)); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s, transform .5s var(--mfx-hover-ease), background-color .3s, color .3s, border-color .3s; } html body .mfx-totop.mfx-totop--text { padding: 0 calc(var(--mfx-tt-size, 52px) * .38); } html body .mfx-totop.mfx-totop--left { right: auto; left: var(--mfx-tt-side, 24px); } html body .mfx-totop.mfx-totop--center { right: auto; left: 50%; translate: -50% 0; } html body .mfx-totop.is-on { opacity: 1; visibility: visible; transform: none; } html body .mfx-totop:hover { background: var(--mfx-totop-bg-hover, var(--mfx-totop-bg, #111)); color: var(--mfx-totop-color-hover, var(--mfx-totop-color, #fff)); border-color: var(--mfx-tt-bc-hover, var(--mfx-tt-bc, transparent)); } html body .mfx-totop:focus-visible { outline: 2px solid var(--mfx-tt-ring, var(--mfx-accent)); outline-offset: 3px; } /* Apparition */ html body .mfx-totop.mfx-totop--in-fade-up:not(.is-on) { transform: translate3d(0, 20px, 0) scale(.9); } html body .mfx-totop.mfx-totop--in-zoom:not(.is-on) { transform: scale(.2); } html body .mfx-totop.mfx-totop--in-slide:not(.is-on) { transform: translate3d(calc(100% + var(--mfx-tt-side, 24px) + 10px), 0, 0); } html body .mfx-totop.mfx-totop--in-slide.mfx-totop--left:not(.is-on) { transform: translate3d(calc(-100% - var(--mfx-tt-side, 24px) - 10px), 0, 0); } html body .mfx-totop.mfx-totop--in-slide.mfx-totop--center:not(.is-on) { transform: translate3d(0, calc(100% + var(--mfx-tt-bottom, 24px) + 10px), 0); } html body .mfx-totop.mfx-totop--in-rotate:not(.is-on) { transform: rotate(-180deg) scale(.3); } /* Survol */ html body .mfx-totop.mfx-totop--hover-lift.is-on:hover { transform: translate3d(0, -4px, 0); } html body .mfx-totop.mfx-totop--hover-grow.is-on:hover { transform: scale(1.1); } html body .mfx-totop.mfx-totop--hover-bounce:hover .mfx-totop__icon { animation: mfx-tt-bounce .8s ease-in-out infinite; } html body .mfx-totop.mfx-totop--hover-rocket:hover .mfx-totop__icon { animation: mfx-tt-rocket .6s cubic-bezier(.5, 0, .5, 1) infinite; } @keyframes mfx-tt-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes mfx-tt-rocket { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-120%); opacity: 0; } 55% { transform: translateY(120%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* Icône & texte */ .mfx-totop__icon { display: inline-flex; overflow: visible; flex: none; } .mfx-totop__icon svg { width: var(--mfx-tt-icon, 18px); height: var(--mfx-tt-icon, 18px); display: block; } .mfx-totop__text { white-space: nowrap; } html body .mfx-totop.mfx-totop--hover-rocket { overflow: hidden; } /* Anneau de progression (fonctionne avec toutes les formes) */ html body .mfx-totop::before { content: ""; position: absolute; inset: calc(var(--mfx-tt-bw, 0px) * -1); border-radius: inherit; pointer-events: none; padding: var(--mfx-tt-ring-w, 3px); background: conic-gradient(from 0deg, var(--mfx-tt-ring, var(--mfx-accent)) calc(var(--mfx-p, 0) * 1turn), var(--mfx-tt-track, rgba(255, 255, 255, .15)) 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } html body .mfx-totop.mfx-totop--no-ring::before { display: none; } @media (max-width: 767px) { html body .mfx-totop.mfx-totop--no-mobile { display: none !important; } } /* Aperçu dans les réglages */ html body .mfx-totop.mfx-totop--preview { position: absolute !important; z-index: 1; } html.mfx-cursor-on.mfx-cursor-native-off, html.mfx-cursor-on.mfx-cursor-native-off * { cursor: none !important; } .mfx-cursor, .mfx-cursor-ring { position: fixed; top: 0; left: 0; z-index: 1000000; pointer-events: none; border-radius: 50%; opacity: 0; box-sizing: border-box; transition: opacity .3s, width .35s var(--mfx-hover-ease), height .35s var(--mfx-hover-ease), margin .35s var(--mfx-hover-ease), background-color .3s, border-color .3s; } html.mfx-cursor-visible .mfx-cursor, html.mfx-cursor-visible .mfx-cursor-ring { opacity: 1; } .mfx-cursor { width: var(--mfx-cur-dot); height: var(--mfx-cur-dot); margin: calc(var(--mfx-cur-dot) / -2) 0 0 calc(var(--mfx-cur-dot) / -2); background: var(--mfx-cursor-color, #111); } .mfx-cursor-ring { width: var(--mfx-cur-ring); height: var(--mfx-cur-ring); margin: calc(var(--mfx-cur-ring) / -2) 0 0 calc(var(--mfx-cur-ring) / -2); border: var(--mfx-cur-border) solid var(--mfx-cursor-ring-color, var(--mfx-cursor-color, #111)); display: grid; place-items: center; } .mfx-cursor-ring b { font: 600 var(--mfx-cur-font, 11px)/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mfx-cursor-text-color, #fff); opacity: 0; transition: opacity .25s; white-space: nowrap; } html.mfx-cursor-hover .mfx-cursor-ring { width: var(--mfx-cur-hover); height: var(--mfx-cur-hover); margin: calc(var(--mfx-cur-hover) / -2) 0 0 calc(var(--mfx-cur-hover) / -2); background: var(--mfx-cursor-hover-fill, color-mix(in srgb, var(--mfx-cursor-ring-color, var(--mfx-cursor-color, #111)) 12%, transparent)); } html.mfx-cursor-hover .mfx-cursor { width: calc(var(--mfx-cur-dot) / 2); height: calc(var(--mfx-cur-dot) / 2); margin: calc(var(--mfx-cur-dot) / -4) 0 0 calc(var(--mfx-cur-dot) / -4); } html.mfx-cursor-label .mfx-cursor-ring { width: var(--mfx-cur-label); height: var(--mfx-cur-label); margin: calc(var(--mfx-cur-label) / -2) 0 0 calc(var(--mfx-cur-label) / -2); background: var(--mfx-cursor-ring-color, var(--mfx-cursor-color, #111)); } html.mfx-cursor-label .mfx-cursor-ring b { opacity: 1; } html.mfx-cursor-label .mfx-cursor { opacity: 0; } html.mfx-cursor-down .mfx-cursor-ring { width: var(--mfx-cur-down); height: var(--mfx-cur-down); margin: calc(var(--mfx-cur-down) / -2) 0 0 calc(var(--mfx-cur-down) / -2); } /* Variante « blend » : disque en mode différence (taille = anneau / survol) */ html.mfx-cursor--blend .mfx-cursor { display: none; } html.mfx-cursor--blend .mfx-cursor-ring { border: 0; background: #fff; mix-blend-mode: difference; } html.mfx-cursor--blend.mfx-cursor-hover .mfx-cursor-ring { background: #fff; } /* Variante « glow » : halo lumineux */ html.mfx-cursor--glow .mfx-cursor-ring { width: var(--mfx-cur-glow); height: var(--mfx-cur-glow); margin: calc(var(--mfx-cur-glow) / -2) 0 0 calc(var(--mfx-cur-glow) / -2); border: 0; background: radial-gradient(circle, color-mix(in srgb, var(--mfx-cursor-ring-color, var(--mfx-cursor-color, #6c5ce7)) 30%, transparent), transparent 65%); z-index: 1; } html.mfx-cursor--glow.mfx-cursor-hover .mfx-cursor-ring { width: calc(var(--mfx-cur-glow) * 1.25); height: calc(var(--mfx-cur-glow) * 1.25); margin: calc(var(--mfx-cur-glow) * -.625) 0 0 calc(var(--mfx-cur-glow) * -.625); } .mfx--ripple-host { overflow: hidden; } /* position relative ajoutée en JS seulement si l'élément est « static » */ .mfx--ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .35; background: var(--mfx-ripple, currentColor); animation: mfx-ripple .65s ease-out forwards; } @keyframes mfx-ripple { to { transform: scale(1); opacity: 0; } } /* ========================================================================== 11. TRANSITIONS DE PAGE & PRÉCHARGEUR ========================================================================== */ html:not(.mfx-js) .mfx-pt, html:not(.mfx-js) .mfx-preloader, html.mfx-no-pl .mfx-preloader { display: none !important; } .mfx-pt { position: fixed; inset: 0; z-index: 999998; pointer-events: none; display: grid; place-items: center; --mfx-pt-d: 700ms; } .mfx-pt__p { position: absolute; inset: 0; background: var(--mfx-pt-color, #111); } .mfx-pt__inner { position: relative; z-index: 2; color: var(--mfx-pt-text, #fff); font: 600 clamp(18px, 3vw, 34px)/1.2 system-ui, sans-serif; letter-spacing: .02em; transition: opacity .3s; } .mfx-pt__inner img { max-width: 160px; max-height: 90px; } .mfx-pt.is-out .mfx-pt__inner { opacity: 0; } .mfx-pt.is-in { pointer-events: all; } .mfx-pt.is-in .mfx-pt__inner { opacity: 0; animation: mfx-fade-in .3s calc(var(--mfx-pt-d) * .6) forwards; } .mfx-pt:not(.is-in):not(.is-out) { animation: mfx-pt-failsafe .4s 6s forwards; } .mfx-pt.is-done { visibility: hidden; } @keyframes mfx-pt-failsafe { to { opacity: 0; visibility: hidden; } } @keyframes mfx-fade-in { to { opacity: 1; } } /* Split : deux portes */ .mfx-pt--split .mfx-pt__p:nth-child(1) { right: 50%; } .mfx-pt--split .mfx-pt__p:nth-child(2) { left: 50%; } /* Bandes */ .mfx-pt--stripes .mfx-pt__p { width: 20.2%; transform-origin: 50% 0; } .mfx-pt--stripes .mfx-pt__p:nth-child(1) { left: 0; } .mfx-pt--stripes .mfx-pt__p:nth-child(2) { left: 20%; } .mfx-pt--stripes .mfx-pt__p:nth-child(3) { left: 40%; } .mfx-pt--stripes .mfx-pt__p:nth-child(4) { left: 60%; } .mfx-pt--stripes .mfx-pt__p:nth-child(5) { left: 80%; } .mfx-pt .mfx-pt__p { animation-duration: var(--mfx-pt-d); animation-timing-function: cubic-bezier(.77, 0, .175, 1); animation-fill-mode: both; } .mfx-pt--fade.is-out .mfx-pt__p { animation-name: mfx-pt-fade-out; } .mfx-pt--fade.is-in .mfx-pt__p { animation-name: mfx-pt-fade-in; } .mfx-pt--slide-up.is-out .mfx-pt__p { animation-name: mfx-pt-up-out; } .mfx-pt--slide-up.is-in .mfx-pt__p { animation-name: mfx-pt-up-in; } .mfx-pt--slide-left.is-out .mfx-pt__p { animation-name: mfx-pt-left-out; } .mfx-pt--slide-left.is-in .mfx-pt__p { animation-name: mfx-pt-left-in; } .mfx-pt--split.is-out .mfx-pt__p:nth-child(1) { animation-name: mfx-pt-left-out; } .mfx-pt--split.is-out .mfx-pt__p:nth-child(2) { animation-name: mfx-pt-right-out; } .mfx-pt--split.is-in .mfx-pt__p:nth-child(1) { animation-name: mfx-pt-left-in-r; } .mfx-pt--split.is-in .mfx-pt__p:nth-child(2) { animation-name: mfx-pt-left-in; } .mfx-pt--circle.is-out .mfx-pt__p { animation-name: mfx-pt-circle-out; } .mfx-pt--circle.is-in .mfx-pt__p { animation-name: mfx-pt-circle-in; } .mfx-pt--stripes.is-out .mfx-pt__p { animation-name: mfx-pt-stripe-out; } .mfx-pt--stripes.is-in .mfx-pt__p { animation-name: mfx-pt-stripe-in; } .mfx-pt--stripes .mfx-pt__p:nth-child(2) { animation-delay: calc(var(--mfx-pt-d) * .06); } .mfx-pt--stripes .mfx-pt__p:nth-child(3) { animation-delay: calc(var(--mfx-pt-d) * .12); } .mfx-pt--stripes .mfx-pt__p:nth-child(4) { animation-delay: calc(var(--mfx-pt-d) * .18); } .mfx-pt--stripes .mfx-pt__p:nth-child(5) { animation-delay: calc(var(--mfx-pt-d) * .24); } @keyframes mfx-pt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes mfx-pt-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes mfx-pt-up-out { from { transform: none; } to { transform: translate3d(0, -100%, 0); } } @keyframes mfx-pt-up-in { from { transform: translate3d(0, 100%, 0); } to { transform: none; } } @keyframes mfx-pt-left-out { from { transform: none; } to { transform: translate3d(-100%, 0, 0); } } @keyframes mfx-pt-right-out { from { transform: none; } to { transform: translate3d(100%, 0, 0); } } @keyframes mfx-pt-left-in { from { transform: translate3d(100%, 0, 0); } to { transform: none; } } @keyframes mfx-pt-left-in-r { from { transform: translate3d(-100%, 0, 0); } to { transform: none; } } @keyframes mfx-pt-circle-out { from { clip-path: circle(150% at var(--mfx-pt-x, 50%) var(--mfx-pt-y, 50%)); } to { clip-path: circle(0% at var(--mfx-pt-x, 50%) var(--mfx-pt-y, 50%)); } } @keyframes mfx-pt-circle-in { from { clip-path: circle(0% at var(--mfx-pt-x, 50%) var(--mfx-pt-y, 50%)); } to { clip-path: circle(150% at var(--mfx-pt-x, 50%) var(--mfx-pt-y, 50%)); } } @keyframes mfx-pt-stripe-out { from { transform: scaleY(1); transform-origin: 50% 0; } to { transform: scaleY(0); transform-origin: 50% 0; } } @keyframes mfx-pt-stripe-in { from { transform: scaleY(0); transform-origin: 50% 100%; } to { transform: scaleY(1); transform-origin: 50% 100%; } } .mfx-preloader { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; background: var(--mfx-pl-bg, #0f0f14); color: var(--mfx-pl-color, #fff); transition: opacity .7s var(--mfx-ease), visibility .7s, clip-path .9s cubic-bezier(.77, 0, .175, 1); clip-path: inset(0 0 0 0); } .mfx-preloader.is-done { opacity: 0; visibility: hidden; } .mfx-preloader--curtain.is-done { opacity: 1; clip-path: inset(0 0 100% 0); } .mfx-preloader:not(.is-done) { animation: mfx-pt-failsafe .5s 9s forwards; } .mfx-pl__spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid color-mix(in srgb, currentColor 20%, transparent); border-top-color: var(--mfx-pl-accent, var(--mfx-accent)); animation: mfx-l-spin .8s linear infinite; } .mfx-pl__dots { display: flex; gap: 10px; } .mfx-pl__dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--mfx-pl-accent, var(--mfx-accent)); animation: mfx-pl-dot 1s ease-in-out infinite; } .mfx-pl__dots i:nth-child(2) { animation-delay: .15s; } .mfx-pl__dots i:nth-child(3) { animation-delay: .3s; } @keyframes mfx-pl-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-12px); opacity: 1; } } .mfx-pl__bar { width: min(260px, 60vw); height: 3px; background: color-mix(in srgb, currentColor 15%, transparent); overflow: hidden; border-radius: 3px; } .mfx-pl__bar i { display: block; height: 100%; background: var(--mfx-pl-accent, var(--mfx-accent)); transform-origin: 0 50%; transform: scaleX(var(--mfx-pl-p, 0)); transition: transform .3s; } .mfx-pl__count { font: 700 clamp(48px, 10vw, 120px)/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.04em; } .mfx-pl__logo img { max-width: 180px; max-height: 120px; animation: mfx-l-breathe 1.8s ease-in-out infinite; } .mfx-pl__text { font: 600 clamp(20px, 4vw, 40px)/1 system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; } .mfx-pl__text span { display: inline-block; animation: mfx-pl-dot 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * 80ms); } /* View Transitions natives (navigateurs compatibles) — la règle @view-transition est ajoutée en ligne si activée */ html.mfx-vt::view-transition-old(root) { animation: mfx-vt-out .45s cubic-bezier(.4, 0, .2, 1) both; } html.mfx-vt::view-transition-new(root) { animation: mfx-vt-in .55s cubic-bezier(.22, 1, .36, 1) both; } @keyframes mfx-vt-out { to { opacity: 0; transform: scale(.98); } } @keyframes mfx-vt-in { from { opacity: 0; transform: translate3d(0, 24px, 0); } } /* ========================================================================== 12. WOOCOMMERCE ========================================================================== */ .mfx-woo-thumb { position: relative; overflow: hidden; display: block; border-radius: inherit; } .mfx-woo-thumb img { display: block; width: 100%; transition: transform .9s var(--mfx-ease), opacity .6s var(--mfx-ease), filter .6s; } .mfx-woo-thumb .mfx-swap-img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; margin: 0 !important; } :is(ul.products li.product, .wc-block-grid__product, .jet-woo-products__item) { transition: transform .5s var(--mfx-hover-ease), box-shadow .5s var(--mfx-hover-ease); } body.mfx-woo-card-lift :is(ul.products li.product, .wc-block-grid__product, .jet-woo-products__item):hover { transform: translate3d(0, -8px, 0); box-shadow: 0 25px 45px -20px rgba(0, 0, 0, .3); } body.mfx-woo-card-zoom :is(ul.products li.product, .wc-block-grid__product):hover .mfx-woo-thumb img:first-child, body.mfx-woo-card-zoom .jet-woo-products__item:hover .jet-woo-product-thumbnail img { transform: scale(1.08); } body.mfx-woo-card-zoom .jet-woo-product-thumbnail { overflow: hidden; } body.mfx-woo-swap :is(li.product, .wc-block-grid__product):hover .mfx-woo-thumb.has-swap img:first-child { opacity: 0; } body.mfx-woo-swap :is(li.product, .wc-block-grid__product):hover .mfx-swap-img { opacity: 1; transform: scale(1.04); } body.mfx-woo-atc-pulse .single_add_to_cart_button:not(:hover) { animation: mfx-l-pulse 2s ease-in-out infinite; } body.mfx-woo-atc-nudge .single_add_to_cart_button:not(:hover) { animation: mfx-l-nudge 4s ease-in-out infinite; } body.mfx-woo-atc-glow .single_add_to_cart_button:not(:hover) { animation: mfx-l-ping 2s ease-out infinite; } body.mfx-woo-sale-pulse .onsale { animation: mfx-l-pulse 1.8s ease-in-out infinite; } body.mfx-woo-sale-wiggle .onsale { animation: mfx-l-wiggle 2.5s ease-in-out infinite; } .mfx--fly { position: fixed; z-index: 1000001; pointer-events: none; object-fit: cover; border-radius: 14px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .45); margin: 0; } .mfx-cart-bump { animation: mfx-cart-bump .7s cubic-bezier(.34, 1.56, .64, 1); } @keyframes mfx-cart-bump { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(.92) rotate(4deg); } 100% { transform: scale(1); } } .added_to_cart { animation: mfx-fade-in .5s both; } /* ========================================================================== 13. UTILITAIRES (Gutenberg, classes CSS manuelles) ========================================================================== */ .mfx-dur-200 { --mfx-duration: 200ms; } .mfx-dur-300 { --mfx-duration: 300ms; } .mfx-dur-400 { --mfx-duration: 400ms; } .mfx-dur-500 { --mfx-duration: 500ms; } .mfx-dur-600 { --mfx-duration: 600ms; } .mfx-dur-800 { --mfx-duration: 800ms; } .mfx-dur-1000 { --mfx-duration: 1000ms; } .mfx-dur-1200 { --mfx-duration: 1200ms; } .mfx-dur-1500 { --mfx-duration: 1500ms; } .mfx-dur-2000 { --mfx-duration: 2000ms; } .mfx-dur-3000 { --mfx-duration: 3000ms; } .mfx-delay-100 { --mfx-delay: 100ms; } .mfx-delay-200 { --mfx-delay: 200ms; } .mfx-delay-300 { --mfx-delay: 300ms; } .mfx-delay-400 { --mfx-delay: 400ms; } .mfx-delay-500 { --mfx-delay: 500ms; } .mfx-delay-600 { --mfx-delay: 600ms; } .mfx-delay-800 { --mfx-delay: 800ms; } .mfx-delay-1000 { --mfx-delay: 1000ms; } .mfx-delay-1500 { --mfx-delay: 1500ms; } .mfx-delay-2000 { --mfx-delay: 2000ms; } .mfx-dist-20 { --mfx-distance: 20px; } .mfx-dist-50 { --mfx-distance: 50px; } .mfx-dist-100 { --mfx-distance: 100px; } .mfx-dist-200 { --mfx-distance: 200px; } .mfx-ease-smooth { --mfx-ease: cubic-bezier(.22, 1, .36, 1); } .mfx-ease-expo { --mfx-ease: cubic-bezier(.16, 1, .3, 1); } .mfx-ease-back { --mfx-ease: cubic-bezier(.34, 1.56, .64, 1); } .mfx-ease-inout { --mfx-ease: cubic-bezier(.65, 0, .35, 1); } .mfx-ease-linear { --mfx-ease: linear; } /* ========================================================================== 14. ACCESSIBILITÉ — mouvement réduit ========================================================================== */ @media (prefers-reduced-motion: reduce) { html.mfx-rm [class*="mfx-loop-"], html.mfx-rm [class*="mfx-text-"] .mfx--tt, html.mfx-rm .mfx--layer *, html.mfx-rm .mfx--layer::before, html.mfx-rm .mfx--layer::after { animation: none !important; } html.mfx-rm [class*="mfx-hover-"]:hover { animation: none !important; } } html.mfx-off [class*="mfx-loop-"] { animation: none !important; }