/* Cap Glisse : rapide et brut, le vent. Seulement transform et opacity. */
:root{--ease:cubic-bezier(.7,0,.2,1);--rv-d:.45s;--rv-st:70ms}
html,body{overflow-x:clip}

/* Bande défilante : CSS pur, le JS ne fait que changer la vitesse et le sens */
.ze-bande{overflow:clip;position:relative}
.ze-bande-piste{display:flex;width:max-content;animation:zeVent 22s linear infinite}
.ze-bande-piste>*{flex:none}
@keyframes zeVent{to{transform:translateX(-50%)}}   /* le contenu est doublé dans le HTML (2e copie en aria-hidden) */
.ze-bande:hover .ze-bande-piste,.ze-bande.ze-pause .ze-bande-piste,.ze-bande.ex-off .ze-bande-piste{animation-play-state:paused}
.ze-pause-btn{position:absolute;right:8px;top:50%;translate:0 -50%;min-width:44px;min-height:44px}

/* Barre de réservation mobile : se cache quand le formulaire est à l'écran (fixe : aucun décalage) */
.ze-barre{transition:transform .3s var(--ease)}
.ze-barre.ze-cache{transform:translateY(110%)}

@media (prefers-reduced-motion:no-preference){
  /* Héros (ordinateur) : les 3 mots glissent de la gauche, 90 ms de décalage, 0,5 s */
  @media (min-width:761px){
    .ex-anim .ze-hero-mot{display:inline-block;animation:zeEntre .5s var(--ease) both;animation-delay:calc(150ms + var(--i,0) * 90ms)}
    @keyframes zeEntre{from{opacity:0;transform:translateX(-60px)}}
  }
  /* En quittant le héros, les mots s'écartent comme sur une affiche qu'on déchire (tous écrans) */
  @supports (animation-timeline:view()){
    .ex-anim .ze-hero-ligne{animation:zeEcarte linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .ze-hero-ligne:nth-child(2n){--x:12vw}.ze-hero-ligne:nth-child(2n+1){--x:-12vw}
    @keyframes zeEcarte{to{transform:translateX(var(--x))}}
    /* « Saute ! » : le mot géant grossit de 0,86 à 1 en traversant l'écran */
    .ex-anim .ze-saute-mot{animation:zeSaut linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    @keyframes zeSaut{from{transform:scale(.86) translateY(8%)}}
    /* Sécurité : la section blanche arrive en biais (les barres du logo) puis se redresse */
    .ex-anim .ze-secu{animation:zeBiais linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    @keyframes zeBiais{from{clip-path:polygon(0 14%,100% 0,100% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
  }
  /* Révélations nerveuses */
  .ex-anim [data-rv="claque"]{transform:translateY(32px)}
  .ex-anim [data-rv="affiche"]{transform:scale(1.06)}
  .ex-anim [data-rv="gauche"]{transform:translateX(-48px)}
  .ex-anim [data-rv="droite"]{transform:translateX(48px)}

  /* Jauge de niveau : les cases se remplissent l'une après l'autre */
  .ex-anim .ze-jauge i{transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease);transition-delay:calc(250ms + var(--i,0) * 110ms)}
  .ex-anim .is-in .ze-jauge i,.ex-anim .ze-jauge.is-in i{transform:none}

  /* Barre de progression du formulaire en étapes */
  .ze-progres i{transform-origin:0 50%;transition:transform .4s var(--ease)}
  /* Filtres : les cartes qui restent arrivent vite */
  .ze-carte.ze-filtre{animation:zeFiltre .3s var(--ease) both}
  @keyframes zeFiltre{from{opacity:0;transform:translateY(12px)}}
}
.ze-jauge i{display:block}
.ze-jauge i.vide{background:transparent}

/* Cartes d'activités au survol (souris) : la photo remplit la carte, le nom monte */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ze-carte{position:relative;overflow:clip}
  .ze-carte-photo{clip-path:inset(0 0 45% 0);transition:clip-path .45s var(--ease)}
  .ze-carte:hover .ze-carte-photo,.ze-carte:focus-within .ze-carte-photo{clip-path:inset(0)}
  .ze-carte-nom{transition:transform .45s var(--ease)}
  .ze-carte:hover .ze-carte-nom,.ze-carte:focus-within .ze-carte-nom{transform:translateY(-16px)}
}
/* Activités (ordinateur) : colonne de faits collante */
@media (min-width:1024px){.ze-faits{position:sticky;top:88px;align-self:start}}
/* Chiffres qui comptent : largeur fixe, donc aucun décalage */
.ze-compte{display:inline-block;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.ze-bande-piste{animation:none!important}.ze-pause-btn{display:none}}