/* CVX.IO mouvements.css v1 01/11/2026. Va avec mouvements.js (pose html.mv : sans JS tout reste visible). Mouvement réduit : état final.
Réglages --mv-force parallaxe, --mv-t couleur. Effets du JS : voir mouvements.js.
Sur une figure avec une img, ex. <figure class="mv-masque"><img> :
 .mv-masque masque bas→haut · .mv-rideau rideau qui se retire · .mv-kenburns zoom lent
 .mv-zoom-defile l'image se pose au défilement · .mv-parallaxe parallaxe douce
Sur un bloc, ex. <p class="mv-flou"> : .mv-flou flou qui se dissipe · .mv-glisse-g / -d de gauche, de droite · .mv-echelle 94→100 %
.mv-souligne trait à l'arrivée, .mv-souligne-survol au survol <a class="mv-souligne-survol">
.mv-trace SVG tracé au défilement <svg class="mv-trace"><path pathLength="1">
.mv-couleur teinte qui bascule <section class="mv-couleur" style="--mv-de:#E8E9E4;--mv-a:#121C23">
.mv-epingle scène épinglée, --mv-p 0→1 <div class="mv-epingle"><div class="mv-scene">
.mv-progression barre de lecture <div class="mv-progression">
.mv-rangee rangée au pouce <div class="mv-rangee"><figure>
.mv-defile(--inverse) bandeau lent <div class="mv-defile"><div><span>A</span><span>B</span></div></div>
.mv-lumiere halo sous la souris <div class="tuile mv-lumiere">
.mv-accordeon <details class="mv-accordeon"><summary>Q</summary><p>R</p></details>
.mv-entree apparition @starting-style <div popover class="mv-entree">
.mv-respire point « en ligne » <span class="mv-respire"></span> */
@property --mv-p{syntax:'<number>';inherits:true;initial-value:0}
:root{--me:cubic-bezier(.16,1,.3,1);--mv-t:#5B969B}
@keyframes mv-p{from{--mv-p:0}to{--mv-p:1}}
.mv-masque,.mv-rideau,.mv-kenburns,.mv-zoom-defile,.mv-parallaxe{overflow:hidden}
.mv .mv-masque{clip-path:inset(100% 0 0);transition:clip-path .9s var(--me)}
.mv-masque>img{transition:transform 1.4s var(--me)}
.mv .mv-masque:not(.mv-vu)>img{transform:scale(1.1)}
.mv .mv-masque.mv-vu{clip-path:inset(0)}
.mv-rideau{position:relative}
.mv .mv-rideau::after{content:'';position:absolute;inset:0;background:var(--mv-rideau,#121C23);transform-origin:100%;transition:transform .9s var(--me) .1s}
.mv-rideau.mv-vu::after{transform:scaleX(0)}
.mv :is(.mv-flou,.mv-glisse-g,.mv-glisse-d,.mv-echelle){opacity:0;transition:opacity .9s,transform .9s var(--me),filter .9s}
.mv .mv-flou{filter:blur(12px)}
.mv .mv-glisse-g{transform:translateX(-34px)}.mv .mv-glisse-d{transform:translateX(34px)}
.mv .mv-echelle{transform:scale(.94)}
.mv .mv-vu:is(.mv-flou,.mv-glisse-g,.mv-glisse-d,.mv-echelle){opacity:1;transform:none;filter:none}
.mv .mv-cascade>*,.mv .mv-m{opacity:0;transform:translateY(.4em);transition:opacity .7s,transform .7s var(--me);transition-delay:calc(var(--i,0)*var(--mv-pas,80ms))}
.mv .mv-cascade.mv-vu>*,.mv .mv-vu .mv-m{opacity:1;transform:none}
.mv-mots{--mv-pas:45ms}.mv-lignes{--mv-pas:140ms}.mv-m{display:inline-block}
.mv-souligne,.mv-souligne-survol{background:linear-gradient(var(--mv-t),var(--mv-t)) 0 100%/0 2px no-repeat;padding-bottom:2px;text-decoration:none}
html:not(.mv) .mv-souligne,.mv-souligne.mv-vu{background-size:100% 2px;transition:background-size 1.1s var(--me) .2s}
.mv-souligne-survol{background-position:100% 100%;transition:background-size .5s var(--me)}
.mv-souligne-survol:is(:hover,:focus-visible){background-size:100% 2px;background-position:0 100%}
.mv-kenburns>img{animation:mv-kb 26s ease-in-out infinite alternate}
.mv-hors>*{animation-play-state:paused!important}
@keyframes mv-kb{to{transform:scale(1.08)}}
.mv-zoom-defile>img{transform:scale(calc(1.12 - .12*min(1,var(--mv-p)*2)))}
.mv-parallaxe>img{transform:translateY(calc((var(--mv-p) - .5)*var(--mv-force,48px))) scale(1.12)}
.mv-trace *{stroke-dasharray:1;stroke-dashoffset:calc(1 - min(1,var(--mv-p)*2.2))}
.mv-couleur{--k:clamp(0,(var(--mv-p) - .12)*4,1);background:color-mix(in srgb,var(--mv-a,#121C23) calc(var(--k)*100%),var(--mv-de,#E8E9E4));color:color-mix(in srgb,var(--mv-ta,#E8E9E4) calc(var(--k)*100%),var(--mv-tde,#121C23))}
.mv-epingle{min-height:var(--mv-hauteur,250vh)}
.mv-scene{position:sticky;top:0;min-height:100svh}
.mv-progression{position:fixed;inset:0 0 auto;height:3px;background:var(--mv-t);transform-origin:0;transform:scaleX(var(--mv-p));z-index:60;pointer-events:none}
@supports (animation-timeline:view()){
:is(.mv-zoom-defile,.mv-parallaxe,.mv-trace,.mv-couleur,.mv-epingle){animation:mv-p linear both;animation-timeline:view()}
.mv-epingle{animation-range:contain}
.mv-progression{animation:mv-p linear both;animation-timeline:scroll(root)}}
.mv-incline{transition:transform .6s var(--me)}
.mv-aimant{translate:var(--mv-tx,0) var(--mv-ty,0);transition:translate .5s var(--me)}
.mv-lumiere{position:relative;isolation:isolate}
.mv-lumiere::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(400px circle at var(--mv-x,50%) var(--mv-y,50%),#5B969B2E,#0000 60%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:-1}
.mv-lumiere:hover::before{opacity:1}
.mv-rangee{display:grid;grid-auto-flow:column;grid-auto-columns:min(80%,380px);gap:21px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.mv-rangee>*{scroll-snap-align:start}
.mv-defile{overflow:hidden;mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000)}
.mv-defile>div{display:flex;width:max-content;animation:mv-defile var(--mv-vitesse,60s) linear infinite}
.mv-defile--inverse>div{animation-direction:reverse}
.mv-defile>div>*{margin-right:var(--mv-ecart,55px)}
.mv-defile:is(:hover,:focus-within)>div{animation-play-state:paused}
@keyframes mv-defile{to{transform:translateX(-50%)}}
.mv-accordeon{interpolate-size:allow-keywords}
.mv-accordeon summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px}
.mv-accordeon summary::-webkit-details-marker{display:none}
.mv-accordeon summary::after{content:'+';transition:rotate .4s var(--me)}
.mv-accordeon[open] summary::after{rotate:45deg}
.mv-accordeon::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .5s var(--me),opacity .5s,content-visibility .5s allow-discrete}
.mv-accordeon[open]::details-content{block-size:auto;opacity:1}
.mv-onglets [role=tablist]{position:relative;display:flex;gap:34px;overflow-x:auto}
.mv-onglets [role=tab]{min-height:48px;background:none;border:0;font:inherit;color:inherit;opacity:.62}
.mv-onglets [aria-selected=true]{opacity:1}
.mv-onglets [role=tablist]::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:var(--mv-w,0);translate:var(--mv-x,0);background:var(--mv-t)}
.mv-onglets .mv-pret::after{transition:translate .5s var(--me),width .5s var(--me)}
.mv-avant-apres{position:relative;overflow:hidden;--pos:50%;touch-action:pan-y;cursor:ew-resize;user-select:none}
.mv-avant-apres>img{width:100%;pointer-events:none}
.mv-avant-apres>img+img{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 0 0 var(--pos))}
.mv-avant-apres::after{content:'';position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#E8E9E4}
.mv-avant-apres input{position:absolute;inset:auto 0 0;width:100%;margin:0;opacity:0}
.mv-avant-apres:has(input:focus-visible){outline:3px solid var(--mv-t)}
.mv-entree{transition:opacity .45s,translate .45s var(--me)}
@starting-style{.mv-entree{opacity:0;translate:0 10px}}
.mv-respire{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--mv-t);animation:mv-respire 3.2s ease-in-out infinite}
@keyframes mv-respire{50%{opacity:.45;scale:.8}}
img.mv-charge{transition:opacity .8s}.mv img.mv-attend{opacity:0}
@media (prefers-reduced-motion:reduce){
.mv :is([class*=mv-]:not(.mv-progression),.mv-m,[class*=mv-]>*),.mv .mv-rideau::after{transition:none!important;animation:none!important}
:is(.mv-zoom-defile,.mv-parallaxe,.mv-trace,.mv-couleur,.mv-epingle){--mv-p:1!important}
.mv-parallaxe>img,.mv-zoom-defile>img{transform:none}
.mv-defile{overflow-x:auto}.mv-accordeon::details-content{transition:none}}