/* Mouvement partagé : les contenus restent visibles sans JavaScript. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--sun,var(--red,#b23a22));transform:scaleX(0);transform-origin:left;z-index:50;pointer-events:none}
.motion-pending{opacity:0;transform:translateY(26px)}
.client.motion-pending{transform:translateX(-48px)}
.motion-pending:focus-within{opacity:1;transform:none}
.btn,.btn-submit,.btn-outline,.socials a,.side-link{transition:transform .3s var(--motion-ease),box-shadow .3s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.btn:active,.btn-submit:active,.btn-outline:active{transform:translateY(1px) scale(.98)}
.top nav a:not(.btn){position:relative}
.top nav a:not(.btn)::after{content:"";position:absolute;bottom:3px;left:0;right:0;height:2px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--motion-ease)}
.top nav a:hover::after,.top nav a:focus-visible::after{transform:scaleX(1)}
.top nav.open{animation:menu-arrive .3s var(--motion-ease) both}
.hero::before{content:"";position:absolute;width:min(55vw,600px);aspect-ratio:1;right:-18%;top:-35%;border-radius:50%;background:radial-gradient(circle,rgba(255,198,41,.09),transparent 68%);pointer-events:none;animation:halo-drift 9s ease-in-out 2 alternate}
.hero>.wrap{position:relative}
.svc .ico,.channels .ic,.stops .pin,.step-num,.client .tile img,.photo img{transition:transform .45s var(--motion-ease)}
.topic{transition:background-color .3s ease}
.form input,.form textarea,.form select{transition:border-color .2s ease,box-shadow .2s ease}
.form input:focus,.form textarea:focus,.form select:focus{box-shadow:0 0 0 4px rgba(36,80,74,.12)}
.success:not([hidden]) .success-icon{animation:success-arrive .7s var(--motion-ease) both}
.success-icon path{stroke-dasharray:30;stroke-dashoffset:0;animation:check-draw .7s ease .2s both}
@media(hover:hover) and (pointer:fine){
  .btn:hover,.btn-submit:not(:disabled):hover,.btn-outline:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(19,48,43,.14)}
  .socials a:hover,.side-link:hover{transform:translateY(-3px)}
  .stops li:hover .pin{transform:translateY(-7px) rotate(-7deg)}
  .svc:hover .ico,.channels li:hover .ic{transform:rotate(-7deg) scale(1.07)}
  .client .tile:hover img{transform:scale(1.045)}
  .photo:hover img{transform:rotate(-2deg) scale(1.025)}
  .topic:hover{background:var(--pine-3)}
  .steps li:hover .step-num{transform:rotate(-10deg) scale(1.08)}
  .chip:hover span{transform:translateY(-2px)}
}
@keyframes menu-arrive{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes halo-drift{from{transform:translate(0,0) scale(.9)}to{transform:translate(-12%,20%) scale(1.15)}}
@keyframes success-arrive{from{opacity:0;transform:scale(.65) rotate(-15deg)}to{opacity:1;transform:none}}
@keyframes check-draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .motion-pending,.client.motion-pending{opacity:1;transform:none}
  .reading-progress{display:none}
  .map .draw{stroke-dashoffset:0}
  .map .stop{opacity:1}
}

/* Accents de mouvement : un rythme plus expressif, dans les couleurs du site. */
@media(prefers-reduced-motion:no-preference){
  h2.motion-revealed::after{content:"";display:block;width:68px;height:5px;margin-top:18px;border-radius:4px;background:var(--sun,var(--red,#b23a22));transform-origin:left;animation:accent-open .8s var(--motion-ease) .2s both}
  .btn,.btn-submit,.btn-outline{position:relative;overflow:hidden;isolation:isolate}
  .btn::before,.btn-submit::before,.btn-outline::before{content:"";position:absolute;inset:-50% auto -50% -50%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-250%) skewX(-20deg);pointer-events:none}
  .btn:hover::before,.btn:focus-visible::before,.btn-submit:hover::before,.btn-submit:focus-visible::before,.btn-outline:hover::before,.btn-outline:focus-visible::before{animation:button-sheen .75s ease-out}
  .hero .actions .btn-sun{animation:cta-arrive .8s var(--motion-ease) .65s both}
  .map .home circle:nth-child(2){transform-box:fill-box;transform-origin:center;animation:home-ripple 2.5s ease-out 1s 3}
  .fund.motion-revealed .stamp{animation:stamp-turn 1.4s var(--motion-ease) .25s both}
  .client .tile,.fund,.side-dark{transition:translate .25s ease-out,rotate .35s ease-out,transform .3s var(--motion-ease)}
  .topic h3,.svc h3,.client .site,.btn-arrow,.side-link svg{transition:transform .35s var(--motion-ease)}
  .field label,.field .label{transition:color .25s ease,transform .25s var(--motion-ease);transform-origin:left}
  .field:focus-within>label,.field:focus-within>.label{color:var(--pine-3,var(--ink));transform:translateX(3px)}
  .chip input:checked+span{animation:chip-select .35s var(--motion-ease)}
  @media(hover:hover) and (pointer:fine){
    .topic:hover h3,.svc:hover h3,.client .site:hover{transform:translateX(5px)}
    .btn-submit:hover .btn-arrow,.side-link:hover svg{transform:translateX(5px)}
    .socials a:hover svg{animation:social-nod .5s ease}
  }
}
@keyframes accent-open{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes button-sheen{from{transform:translateX(0) skewX(-20deg)}to{transform:translateX(650%) skewX(-20deg)}}
@keyframes cta-arrive{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes home-ripple{0%{transform:scale(.8);opacity:.65}100%{transform:scale(2.2);opacity:0}}
@keyframes stamp-turn{from{transform:rotate(-65deg) scale(.65);opacity:0}to{transform:rotate(0) scale(1);opacity:.14}}
@keyframes chip-select{0%{transform:scale(.95)}60%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes social-nod{30%{transform:rotate(-12deg)}70%{transform:rotate(8deg)}100%{transform:rotate(0)}}