/* v8 : animations sobres. Tout est coupé par prefers-reduced-motion ; rien n'est caché sans la classe .js */
@keyframes v8-kb{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes v8-in{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes v8-sheen{0%,62%{transform:translateX(-140%) skewX(-20deg)}100%{transform:translateX(340%) skewX(-20deg)}}

/* 1. ouverture : zoom très lent (26 s), puis texte en fondu décalé */
.h5-media img{transform-origin:42% 55%;animation:v8-kb 26s cubic-bezier(.3,.1,.4,1) both;will-change:transform}
.js .h5-in>*,.js .hp-in>*{animation:v8-in 1.2s var(--ease) both}
.js .h5-in>:nth-child(1),.js .hp-in>:nth-child(1){animation-delay:.3s}
.js .h5-in>:nth-child(2),.js .hp-in>:nth-child(2){animation-delay:.55s}
.js .h5-in>:nth-child(3),.js .hp-in>:nth-child(3){animation-delay:.8s}
.js .h5-in>:nth-child(4),.js .hp-in>:nth-child(4){animation-delay:1.05s}
.js .h5-in>:nth-child(5),.js .hp-in>:nth-child(5){animation-delay:1.25s}
.js .h5-in>:nth-child(n+6),.js .hp-in>:nth-child(n+6){animation-delay:1.4s}
/* le média déborde vers le haut pour le parallaxe des ouvertures */
.h5-media,.hp-media{inset:-10% 0 0 0;will-change:transform}

/* 2. défilement : fondu + légère montée, en décalé */
.js .r{transform:translate3d(0,26px,0);transition-duration:1.1s}
.js .r.g,.js .r.dr{transform:translate3d(0,26px,0)}
.js .a8{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1.1s var(--ease) var(--d8,0s),transform 1.1s var(--ease) var(--d8,0s)}
.js .a8.vu8{opacity:1;transform:none}

/* 3. cartes et galeries : zoom doux + filet or qui se dessine */
.pg-i img,.gal .gi img{transition:transform 1.3s var(--ease)}
.pg-n b,.gal figcaption b,.md5 h3{position:relative}
.pg-n b:after,.gal figcaption b:after,.md5 h3:after{content:"";display:block;width:0;height:1px;margin-top:.5rem;background:var(--or-grad);transition:width .8s var(--ease)}
.md5 h3:after{margin-top:.6rem}
@media(hover:hover){
 .pg-c:hover .pg-i img,.pg-c:focus-visible .pg-i img,.gal figure:hover .gi img{transform:scale(1.06)}
 .pg-c:hover .pg-n b:after,.pg-c:focus-visible .pg-n b:after,.gal figure:hover figcaption b:after,.md5:hover h3:after{width:2.6rem}
}
@media(hover:none){.pg-n b:after,.gal figcaption b:after,.md5 h3:after{width:1.6rem}}

/* 4. menu : se compacte au défilement */
.entete .in{transition:padding .5s var(--ease)}
.entete .logo img{transition:height .5s var(--ease),filter .4s var(--ease)}
.entete.fond .in{padding-top:.5rem;padding-bottom:.5rem}
.entete.fond .logo img{height:28px}

/* 5. boutons : transition douce, reflet or sur « Mon étude gratuite » */
.btn,.btn.or{transition:background-position .7s var(--ease),background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease),box-shadow .6s var(--ease)}
.btn.or{position:relative;overflow:hidden;isolation:isolate}
.btn.or:after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,244,205,.75),transparent);transform:translateX(-140%) skewX(-20deg);animation:v8-sheen 6.5s ease-in-out 2.5s infinite}
.btn.or:hover:after{animation:v8-sheen 1.1s ease-out 1}

@media(prefers-reduced-motion:reduce){
 .h5-media img,.js .h5-in>*,.js .hp-in>*,.btn.or:after{animation:none!important}
 .js .h5-in>*,.js .hp-in>*{opacity:1;transform:none}
 .js .a8,.js .r{opacity:1!important;transform:none!important;transition:none!important}
 .pg-i img,.gal .gi img,.pg-n b:after,.gal figcaption b:after,.md5 h3:after,.entete .in,.entete .logo img,.btn{transition:none!important}
 .pg-c:hover .pg-i img,.gal figure:hover .gi img{transform:none!important}
 .h5-media,.hp-media{transform:none!important}
}