/* ============================================================
   Hospitalité Digital — couche de mouvement
   Reproduction du système de fhoke.com : des attributs data-animate
   basculés au défilement, aucune bibliothèque.
   Tout est conditionné par .animations-enabled, posé par le script.
   Sans JavaScript, la page s'affiche complète et fixe.
   ============================================================ */

/* ---------- Fondu simple ---------- */
.animations-enabled [data-animate="fade"]{transition:opacity .6s var(--e)}
.animations-enabled [data-animate="fade"]:not([data-animated]){opacity:0}
.animations-enabled [data-animate="fade"][data-animated]{opacity:1}

/* ---------- Fondu montant ---------- */
.animations-enabled [data-animate="fade-up"]{transition:transform .6s var(--e),opacity .6s var(--e)}
.animations-enabled [data-animate="fade-up"]:not([data-animated]){transform:translateY(30px);opacity:0}
.animations-enabled [data-animate="fade-up"][data-animated]{transform:none;opacity:1}

/* ---------- Titre : révélation ligne par ligne sous masque ----------
   Le script découpe le titre en lignes. Chaque ligne devient un span
   en overflow:hidden qui contient un span bloc, lequel remonte. */
.animations-enabled [data-animate="heading"],
.animations-enabled [data-animate="heading-large"]{line-height:.95}
/* Le masque doit déborder vers le haut, sinon il rogne les accents des
   capitales françaises. La marge négative annule le décalage de mise en page :
   le texte ne bouge pas, seule la zone visible du masque s'agrandit. */
.animations-enabled [data-animate="heading"] > span,
.animations-enabled [data-animate="heading-large"] > span{
  display:block;overflow:hidden;
  padding-top:.18em;margin-top:-.18em;
}
.animations-enabled [data-animate="heading"] > span > span,
.animations-enabled [data-animate="heading-large"] > span > span{
  display:block;
  transition:transform .82s var(--e2),opacity .82s var(--e2);
}
.animations-enabled [data-animate^="heading"]:not([data-animated]) > span > span{
  transform:translateY(105%);opacity:0;
}
.animations-enabled [data-animate^="heading"][data-animated] > span > span{
  transform:none;opacity:1;
}
/* cascade : chaque ligne part légèrement après la précédente */
.animations-enabled [data-animate^="heading"] > span:nth-child(1) > span{transition-delay:0s}
.animations-enabled [data-animate^="heading"] > span:nth-child(2) > span{transition-delay:.09s}
.animations-enabled [data-animate^="heading"] > span:nth-child(3) > span{transition-delay:.18s}
.animations-enabled [data-animate^="heading"] > span:nth-child(4) > span{transition-delay:.27s}
.animations-enabled [data-animate^="heading"] > span:nth-child(5) > span{transition-delay:.36s}
.animations-enabled [data-animate^="heading"] > span:nth-child(6) > span{transition-delay:.45s}

/* ---------- Image : dévoilement par masque, avec léger zoom ---------- */
.animations-enabled [data-animate="img"]{overflow:hidden}
.animations-enabled [data-animate="img"] img,
.animations-enabled [data-animate="img"] .ph{
  transition:transform 1.15s var(--e2),clip-path 1.15s var(--e2);
}
.animations-enabled [data-animate="img"]:not([data-animated]) img,
.animations-enabled [data-animate="img"]:not([data-animated]) .ph{
  transform:scale(1.12);clip-path:inset(0 0 100% 0);
}
.animations-enabled [data-animate="img"][data-animated] img,
.animations-enabled [data-animate="img"][data-animated] .ph{
  transform:none;clip-path:inset(0 0 0 0);
}

/* ---------- Cascade générique, posée par le script ---------- */
.animations-enabled [data-stagger]{transition-delay:calc(var(--i,0) * .07s)}

/* ---------- Bandeau défilant des services ---------- */
.tick{overflow:hidden;display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.ink .tick{border-color:var(--line-i)}
.tick-run{display:flex;flex-shrink:0;animation:tickRun 42s linear infinite}
.tick:hover .tick-run{animation-play-state:paused}
.tick-run span{
  display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,34px);white-space:nowrap;
  padding:0 clamp(18px,2.4vw,34px);
  font-size:clamp(15px,1.5vw,19px);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-variation-settings:'wdth' 90,'wght' 600;
}
.tick-run span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex-shrink:0}
@keyframes tickRun{to{transform:translateX(-100%)}}

/* ---------- Transitions entre les pages ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s ease-in both}
::view-transition-new(root){animation:vtIn .4s ease-out both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* ---------- Respect des préférences système ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .animations-enabled [data-animate]{transition:none!important}
  .animations-enabled [data-animate]:not([data-animated]),
  .animations-enabled [data-animate]:not([data-animated]) > span > span,
  .animations-enabled [data-animate]:not([data-animated]) img,
  .animations-enabled [data-animate]:not([data-animated]) .ph{
    opacity:1!important;transform:none!important;clip-path:none!important;
  }
  .tick-run{animation:none}
}