/* Proposition d'animations pour l'accueil de Pornic (26/10/2026) — dans l'esprit des autres sites TDB,
   avec l'identité de Pornic : le fluo qui se trace, les vagues qui se dessinent, les blocs qui montent.
   Tout part de la classe `pa-anim` posée sur <html> par animations.js : sans script, ou si le visiteur a demandé
   moins d'animations, rien n'est caché et rien ne bouge. Aucune animation ne change la place d'un élément
   (seulement opacité, transformations et fonds) : la mise en page validée reste au pixel une fois l'animation jouée. */

/* 1. Les blocs montent légèrement en apparaissant, l'un après l'autre */
/* `translate` et non `transform` : les photos inclinées gardent leur propre rotation */
html.pa-anim .pa-monte{opacity:0;translate:0 24px}
html.pa-anim .pa-monte.pa-vu{opacity:1;translate:0 0;
  transition:opacity .65s ease,translate .65s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--pa-i,0) * 90ms)}

/* 2. Le souligné fluo des titres se trace de gauche à droite */
html.pa-anim .pa-titre .c-title-highlight{background-repeat:no-repeat;background-size:0% 100%;
  transition:background-size .9s cubic-bezier(.6,0,.2,1) .15s}
html.pa-anim .pa-titre.pa-vu .c-title-highlight{background-size:100% 100%}

/* 3. Le surligné fluo (c-title-block) reste fixe : son remplissage animé est retiré (Virginie, 26/10 :
   « je n'aime pas cette animation »). */

/* 4. Les vagues hachurées se dessinent */
html.pa-anim .pa-vague path{stroke-dasharray:320;stroke-dashoffset:320}
html.pa-anim .pa-vague.pa-vu path{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
html.pa-anim .pa-vague.pa-vu path+path{transition-delay:.25s}

/* 5. Les boutons de réservation respirent : un halo fluo toutes les 2,8 s (pas celui de l'en-tête) */
html.pa-anim .pa-halo{position:relative}
html.pa-anim .pa-halo::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation:pa-halo 2.8s cubic-bezier(.3,.6,.4,1) 1s infinite}
@keyframes pa-halo{0%{box-shadow:0 0 0 0 rgb(217 255 37 / .75)}70%,100%{box-shadow:0 0 0 16px rgb(217 255 37 / 0)}}

/* 5 bis. Drainage : l'escalier monte de bas en haut (1,6 s), la rampe suit, le panneau « Pôle santé » se pose */
html.pa-anim .pa-escalier path{stroke-dasharray:var(--pa-long);stroke-dashoffset:var(--pa-long)}
/* La rampe monte EN MÊME TEMPS que les marches, à vitesse constante (Virginie, 26/10) */
html.pa-anim .pa-escalier.pa-vu path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s linear .2s}
html.pa-anim .pa-panneau{opacity:0;translate:0 -18px}
/* Le panneau se pose à l'instant où la rampe le touche : délai calculé par animations.js */
html.pa-anim .pa-panneau.pa-vu{opacity:1;translate:0 0;transition:opacity .3s ease var(--pa-panneau-delai,.8s),
  translate .5s cubic-bezier(.3,1.5,.5,1) var(--pa-panneau-delai,.8s)}

/* 5 ter. Première visite : la ligne de la frise descend (2 s), chaque moment apparaît quand elle l'atteint */
html.pa-anim .pa-frise::before{clip-path:inset(0 0 100% 0)}
html.pa-anim .pa-frise.pa-vu::before{clip-path:inset(0);transition:clip-path 2s linear .1s}
html.pa-anim .pa-frise > *{opacity:0;translate:0 18px}
html.pa-anim .pa-frise.pa-vu > *{opacity:1;translate:0 0;
  transition:opacity .5s ease,translate .6s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--pa-j,0) * .65s + .2s)}

/* 6. Remise en forme : « Commencer à votre niveau » arrive juste après la dernière ligne barrée (1,1 s → 0,6 s) */
html.pa-anim .rf-strike-yes{transition-delay:.6s}

/* Au focus clavier, le bloc se montre tout de suite : ni délai ni lenteur (relecture Codex, 26/10) */
html.pa-anim .pa-direct,html.pa-anim .pa-direct > *{transition-delay:0s!important;transition-duration:.15s!important}

/* À l'impression, tout est montré, même ce qui n'a pas encore défilé (relecture Codex, 26/10) */
@media print{
  html.pa-anim .pa-monte,html.pa-anim .pa-frise > *,html.pa-anim .pa-panneau{opacity:1!important;translate:none!important}
  html.pa-anim .pa-escalier path,html.pa-anim .pa-vague path{stroke-dashoffset:0!important}
  html.pa-anim .pa-frise::before{clip-path:none!important}
  html.pa-anim .pa-titre .c-title-highlight{background-size:100% 100%!important}
}

@media (prefers-reduced-motion:reduce){
  html.pa-anim .pa-monte,html.pa-anim .pa-titre *,html.pa-anim .pa-vague path,html.pa-anim .pa-halo::before,
  html.pa-anim .pa-escalier path,html.pa-anim .pa-panneau,html.pa-anim .pa-frise > *{
    opacity:1!important;translate:none!important;transition:none!important;animation:none!important;
    background-size:100% 100%!important;stroke-dashoffset:0!important}
  html.pa-anim .pa-frise::before{clip-path:none!important;transition:none!important}
}