/* ============================================================
   ANIMATIONS
   ============================================================

   Toutes sont enfermées dans « prefers-reduced-motion:
   no-preference » : elles ne s'exécutent que si la personne n'a pas
   demandé à son système de réduire les animations. C'est un réglage
   que certaines personnes activent par nécessité, pas par goût.

   Principe suivi partout : de petits mouvements courts, jamais en
   boucle sur du texte, et rien qui retarde la lecture.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

/* ── Le dragon du logo respire ────────────────────────────── */
@keyframes flotte {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-3px) rotate(-2deg); }
}
.marque__logo { animation: flotte 4s ease-in-out infinite; }
.marque:hover .marque__logo { animation-play-state: paused; }

/* ── Les pastilles de chapeau font un clin d'œil à l'entrée ── */
@keyframes surgit {
    from { opacity: 0; transform: translateY(8px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
.apparait.vu .chapeau { animation: surgit 500ms cubic-bezier(.2,.8,.3,1) both; }

/* ── Le soulignement des titres se déploie ─────────────────── */
@keyframes deploie {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.apparait.vu .section-titre::after,
.section-tete.vu .section-titre::after {
    transform-origin: left center;
    animation: deploie 650ms cubic-bezier(.2,.8,.3,1) 120ms both;
}
.section-tete--centre .section-titre::after { transform-origin: center; }

/* ── Les cartes arrivent en cascade ────────────────────────
   Chacune part un peu après la précédente : l'œil suit le mouvement
   au lieu de tout recevoir d'un coup. Le décalage s'arrête à la
   sixième, au-delà l'attente deviendrait sensible. */
.zones .apparait:nth-child(1),
.formules .apparait:nth-child(1),
.avis .apparait:nth-child(1) { transition-delay: 0ms; }
.zones .apparait:nth-child(2),
.formules .apparait:nth-child(2),
.avis .apparait:nth-child(2) { transition-delay: 70ms; }
.zones .apparait:nth-child(3),
.formules .apparait:nth-child(3),
.avis .apparait:nth-child(3) { transition-delay: 140ms; }
.zones .apparait:nth-child(4),
.formules .apparait:nth-child(4),
.avis .apparait:nth-child(4) { transition-delay: 210ms; }
.zones .apparait:nth-child(5),
.formules .apparait:nth-child(5),
.avis .apparait:nth-child(5) { transition-delay: 280ms; }
.zones .apparait:nth-child(n+6),
.formules .apparait:nth-child(n+6),
.avis .apparait:nth-child(n+6) { transition-delay: 350ms; }

/* ── L'image d'une carte avance quand on la survole ───────── */
.zone__image, .formule__image {
    transition: transform 420ms cubic-bezier(.2,.7,.3,1);
}
.zone:hover .zone__image,
.formule:hover .formule__image { transform: scale(1.06); }

/* ── Les pastilles d'âge tressautent au survol de leur carte ─ */
@keyframes sursaut {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(-4px); }
    65%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}
.zone:hover .age { animation: sursaut 450ms ease-out; }

/* ── Les repères glissent un par un ────────────────────────── */
@keyframes glisse {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: none; }
}
.apparait.vu .reperes li { animation: glisse 480ms cubic-bezier(.2,.8,.3,1) both; }
.apparait.vu .reperes li:nth-child(1) { animation-delay: 60ms; }
.apparait.vu .reperes li:nth-child(2) { animation-delay: 150ms; }
.apparait.vu .reperes li:nth-child(3) { animation-delay: 240ms; }
.apparait.vu .reperes li:nth-child(4) { animation-delay: 330ms; }

/* Leur pictogramme pivote légèrement au survol */
.reperes i { transition: transform 260ms cubic-bezier(.2,.7,.3,1); }
.reperes li:hover i { transform: rotate(-8deg) scale(1.1); }

/* ── Les étoiles des avis s'allument ───────────────────────── */
@keyframes scintille {
    from { opacity: 0; transform: scale(.4) rotate(-25deg); }
    to   { opacity: 1; transform: none; }
}
.apparait.vu .avis__etoiles { animation: scintille 520ms cubic-bezier(.2,1.4,.4,1) 180ms both; }

/* ── L'initiale d'un avis pivote au survol ─────────────────── */
.avis__initiale { transition: transform 300ms cubic-bezier(.2,1.5,.4,1); }
.avis__carte:hover .avis__initiale { transform: rotate(-10deg) scale(1.12); }

/* ── Les photos de restauration ondulent légèrement ────────── */
.mosaique img { transition: transform 380ms cubic-bezier(.2,.7,.3,1), box-shadow 380ms; }
.mosaique img:hover { transform: scale(1.04) rotate(-1deg); box-shadow: var(--ombre-nette); }

/* ── La flèche du bouton de recherche avance ───────────────── */
.bouton i { transition: transform 260ms cubic-bezier(.2,.7,.3,1); }
.bouton:hover i { transform: translateX(3px); }
.bouton--fantome:hover i { transform: translateX(3px); }

/* ── Les liens du pied de page ─────────────────────────────── */
.pied h3::before { transition: transform 300ms cubic-bezier(.2,1.5,.4,1); }
.pied h3:hover::before { transform: rotate(-12deg) scale(1.15); }

/* ── La passerelle Adventure Valley pulse doucement ─────────
   Un néon qui respire, très lentement : elle annonce une ouverture
   à venir, un peu de vie convient. */
@keyframes neon {
    0%, 100% { opacity: .75; }
    50%      { opacity: 1; }
}
.av-passerelle::before,
.av-passerelle::after { animation: neon 3.5s ease-in-out infinite; }
.av-passerelle::after { animation-delay: .4s; }

/* ── Les pictogrammes d'infos pratiques ────────────────────── */
.pratique__item img { transition: transform 300ms cubic-bezier(.2,1.4,.4,1); }
.pratique__item:hover img { transform: scale(1.15) rotate(6deg); }

/* ── Les points du carrousel ───────────────────────────────── */
.accroche__point { transition: background 260ms, width 320ms cubic-bezier(.2,.8,.3,1); }

/* ── Le bandeau d'annonce descend à l'ouverture ────────────── */
@keyframes descend {
    from { transform: translateY(-100%); }
    to   { transform: none; }
}
.annonce { animation: descend 520ms cubic-bezier(.2,.8,.3,1) both; }

/* ── Le rappel de date signale ce qui vient de changer ─────
   Après un clic dans le calendrier, la page remonte au formulaire :
   ce clignotement dit lequel des champs a bougé. */
@keyframes signale {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in oklab, var(--dragon-400) 60%, transparent); }
    35%  { transform: scale(1.03); box-shadow: 0 0 0 8px color-mix(in oklab, var(--dragon-400) 22%, transparent); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.dispo__date-valeur--signale { animation: signale 900ms ease-out; }

/* ── Le bloc de date signale le changement ─────────────────
   Après un clic dans le calendrier, la page remonte : ce battement
   dit ce qui vient d'être mis à jour. */
@keyframes changeDate {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in oklab, var(--dragon-400) 55%, transparent); }
    40%  { transform: scale(1.02); box-shadow: 0 0 0 10px color-mix(in oklab, var(--dragon-400) 0%, transparent); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}
.reserve__date--change { animation: changeDate 800ms ease-out; }

/* ── L'accroche apparaît en fondu ──────────────────────────── */
@keyframes monte {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
.accroche__contenu > .enveloppe > * { animation: monte 700ms cubic-bezier(.2,.8,.3,1) both; }
.accroche__contenu > .enveloppe > *:nth-child(1) { animation-delay: 100ms; }
.accroche__contenu > .enveloppe > *:nth-child(2) { animation-delay: 200ms; }
.accroche__contenu > .enveloppe > *:nth-child(3) { animation-delay: 300ms; }
.accroche__contenu > .enveloppe > *:nth-child(4) { animation-delay: 400ms; }

}