:root{--mvt-courbe:cubic-bezier(.2,.7,.2,1);--mvt-distance:40px;--mvt-opacite-min:.35;--mvt-cascade:.08;--mvt-parallaxe:.3}
@media (width<768px){:root{--mvt-distance:24px}}

h1 .mot-accent,h2 .mot-accent,h1 .ville{position:relative;display:inline-block}
h1 .mot-accent::after,h2 .mot-accent::after,h1 .ville::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:3px;border-radius:2px;background:currentColor;transform-origin:left;transform:scaleX(var(--t,1))}
.compteur-valeur{position:relative;display:inline-block}
.compteur-valeur::after{content:"";position:absolute;left:15%;right:15%;bottom:-6px;height:2px;background:#f2a46c;transform-origin:left;transform:scaleX(var(--t,1))}
.compteur-anime{display:inline-block;font-variant-numeric:tabular-nums;text-align:center}

.entete::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:#a8552a;transform-origin:left;transform:translateY(var(--mvt-serre,0px)) scaleX(var(--lecture,0));pointer-events:none}
html.mvt .entete{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
html.mvt .entete::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(250,247,244,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid #e4ddd6;transition:transform 200ms var(--mvt-courbe),box-shadow 200ms}
html.mvt .entete>.conteneur{transition:transform 200ms var(--mvt-courbe)}
html.mvt .entete .logo{transform-origin:left center;transition:transform 200ms var(--mvt-courbe)}
html.mvt .entete.mvt-serre{--mvt-serre:-16px}
html.mvt .entete.mvt-serre::before{transform:translateY(-16px);box-shadow:0 6px 18px rgba(36,36,39,.12)}
html.mvt .entete.mvt-serre>.conteneur{transform:translateY(-8px)}
html.mvt .entete.mvt-serre .logo{transform:scale(.9)}

.flottant:hover{transform:none}

html.mvt [data-mvt]{--p:0;--t:0;opacity:calc(var(--mvt-opacite-min) + (1 - var(--mvt-opacite-min)) * var(--p));translate:0 calc((1 - var(--p)) * var(--mvt-distance))}
html.mvt [data-mvt=texte]{translate:0 calc((1 - var(--p)) * 16px)}
html.mvt [data-mvt=pastille]{translate:calc((1 - var(--p)) * -24px) 0}

html.mvt [data-mvt=titre]{opacity:1;translate:none}
html.mvt [data-mvt=titre] .phrase{opacity:calc(.35 + .65 * var(--p))}
html.mvt [data-mvt=titre] .mot-accent,html.mvt [data-mvt=titre] .faite{--t:var(--p)}
html.mvt [data-mvt=titre] .faite path{stroke-dasharray:80;stroke-dashoffset:calc(80 * (1 - var(--p)))}
html.mvt [data-mvt=image]{opacity:1;translate:none;clip-path:inset(0 calc((1 - var(--p)) * 60%) 0 0)}
html.mvt [data-mvt=image].mvt-droite{clip-path:inset(0 0 0 calc((1 - var(--p)) * 60%))}
html.mvt [data-mvt=bande],html.mvt [data-mvt=processus],html.mvt [data-mvt=frise],html.mvt [data-mvt=cadre],html.mvt [data-mvt=compteurs]{opacity:1;translate:none}

html.mvt [data-glisse]{position:relative;overflow:hidden}
html.mvt [data-glisse]>img,html.mvt [data-glisse]>picture>img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;translate:0 var(--g,0%)}

@keyframes mvt-recul{from{scale:1.08}to{scale:1}}
@keyframes mvt-fondu{from{opacity:.35}to{opacity:1}}
@keyframes mvt-trait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.mvt [data-mvt-hero] img{animation:mvt-recul 1.6s var(--mvt-courbe) both}
html.mvt [data-mvt-hero] h1{animation:mvt-fondu 300ms ease-out both}
html.mvt [data-mvt-hero] h1 .mot-accent::after,html.mvt [data-mvt-hero] h1 .ville::after{animation:mvt-trait 700ms var(--mvt-courbe) 300ms both}
html.mvt [data-mvt-hero] .badge,html.mvt [data-mvt-hero] .entete-page-icone{animation:mvt-fondu 300ms ease-out 100ms both}
html.mvt [data-mvt-hero] .hero-phrase,html.mvt [data-mvt-hero] .entete-page-phrase{animation:mvt-fondu 300ms ease-out 200ms both}
html.mvt [data-mvt-hero] .preuves{animation:mvt-fondu 300ms ease-out 300ms both}
html.mvt [data-mvt-hero] .hero-texte,html.mvt [data-mvt-hero] .entete-page-texte{translate:0 var(--h-y,0px);opacity:var(--h-o,1)}
@media (width>=768px){html.mvt [data-mvt-hero]>picture img,html.mvt [data-mvt-hero]>.entete-page-image img{top:-30%;height:130%;translate:0 var(--h-img,0px)}}

html.mvt [data-mvt=bande]{position:relative;isolation:isolate;background:#86421f}
html.mvt [data-mvt=bande]::before{content:"";position:absolute;inset:0;z-index:-1;background:#a8552a;transform-origin:left;transform:scaleX(calc(.15 + .85 * var(--p)))}
html.mvt [data-mvt=bande]>.conteneur{opacity:calc(.35 + .65 * var(--p));translate:calc((1 - var(--p)) * -24px) 0}
@keyframes mvt-onde{from{box-shadow:0 0 0 0 rgba(168,85,42,.5)}to{box-shadow:0 0 0 18px rgba(168,85,42,0)}}
@keyframes mvt-onde-clair{from{box-shadow:0 0 0 0 rgba(235,162,126,.5)}to{box-shadow:0 0 0 18px rgba(235,162,126,0)}}
html.mvt .mvt-pose [data-onde]{animation:mvt-onde 900ms ease-out 1}
html.mvt .sur-sombre.mvt-pose [data-onde],html.mvt .mvt-pose.sur-accent [data-onde],html.mvt .sur-accent .mvt-pose [data-onde],html.mvt .sur-sombre .mvt-pose [data-onde]{animation-name:mvt-onde-clair}

html.mvt [data-mvt] .carte-icone,html.mvt [data-mvt] .carte-icone-carre{transition:background-color 400ms,color 400ms}
html.mvt [data-mvt].mvt-pose .carte-icone,html.mvt [data-mvt].mvt-pose .carte-icone-carre{background:#a8552a;color:#fff}
html.mvt [data-mvt] .puces .icone path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 300ms ease-out}
html.mvt [data-mvt].mvt-pose .puces .icone path{stroke-dashoffset:0}
html.mvt [data-mvt].mvt-pose .puces li:nth-child(2) .icone path{transition-delay:120ms}
html.mvt [data-mvt].mvt-pose .puces li:nth-child(3) .icone path{transition-delay:240ms}
html.mvt [data-mvt].mvt-pose .puces li:nth-child(4) .icone path{transition-delay:360ms}

.etapes::before,.frise::before{content:"";position:absolute;z-index:0;background:#a8552a;transform-origin:left top}
.etapes::before{top:31px;height:2px;left:calc((100% - 72px) / 8);right:calc((100% - 72px) / 8);transform:scaleX(var(--p,1))}
.etape-rond{position:relative;z-index:1;background:#a8552a;color:#fff}
@keyframes mvt-rebond{50%{scale:1.08}}
html.mvt .etape .etape-rond{background:#f5e8e0;color:#a8552a;transition:background-color 300ms,color 300ms}
html.mvt .etape>:not(.etape-rond){opacity:.35;transition:opacity 300ms}
html.mvt .etape.mvt-allume .etape-rond{background:#a8552a;color:#fff;animation:mvt-rebond 300ms ease-out 1}
html.mvt .etape.mvt-allume>:not(.etape-rond){opacity:1}
.frise::before{left:-2px;top:8px;bottom:8px;width:2px;transform:scaleY(var(--p,1))}
html.mvt .frise-date{background:#f5e8e0;color:#a8552a;transition:background-color 300ms,color 300ms}
html.mvt .frise li>:not(.frise-date){opacity:.35;transition:opacity 300ms}
html.mvt .frise li.mvt-allume .frise-date{background:#a8552a;color:#fff;animation:mvt-rebond 300ms ease-out 1}
html.mvt .frise li.mvt-allume>:not(.frise-date){opacity:1}
@media (width<768px){.etapes::before{left:23px;right:auto;width:2px;height:auto;top:24px;bottom:var(--rail-fin,60px);transform:scaleY(var(--p,1))}}

html.mvt .reflexe-rond{background:#f5e8e0;color:#a8552a;transition:background-color 300ms,color 300ms}
html.mvt .mvt-pose .reflexe-rond{background:#a8552a;color:#fff}

html.mvt [data-mvt] .avis-carte .etoiles{display:inline-block;align-self:flex-start;background:linear-gradient(90deg,#a8552a 50%,#e4ddd6 50%) 100% 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
html.mvt [data-mvt].mvt-pose .avis-carte .etoiles{background-position:0 0;transition:background-position 300ms steps(5,end)}
html.mvt [data-mvt] .compteur-valeur{--t:var(--p)}
html.mvt [data-mvt] blockquote::before{translate:-8px 0;transition:translate 500ms var(--mvt-courbe)}
html.mvt [data-mvt].mvt-pose blockquote::before{translate:0 0}

.cadre-trace{position:relative}
.cadre-trace::after{content:"";position:absolute;inset:-8px;border:2px solid rgba(168,85,42,.55);border-radius:18px;pointer-events:none;clip-path:inset(0 calc((1 - var(--p,1)) * 100%) calc((1 - var(--p,1)) * 100%) 0)}
.sur-accent .cadre-trace::after{border-color:rgba(255,255,255,.7)}

html.mvt .faq-reponse{animation:mvt-fondu 300ms var(--mvt-courbe) both}

html.mvt [data-mvt]:focus-within{opacity:1!important;transform:none!important;translate:none!important;clip-path:none!important}
@media (prefers-reduced-motion:reduce){html.mvt [data-mvt]{--p:1!important}}