/* ============================================================
   ÉCRIN D'AVENTURES — Animations globales
   Reveal au scroll + textes + effets hover
   ============================================================ */

/* ============================================================
   ENTRÉE DE PAGE
   ============================================================ */
.ea-page-enter {
  opacity: 0;
  transform: translateY(6px);
}
.ea-page-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity  480ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    transform 480ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}

/* ============================================================
   MOT PAR MOT — .ea-w
   ============================================================ */
.ea-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition:
    opacity   600ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    transform 600ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
  will-change: opacity, transform;
}

/* Déclenchement */
.ea-words-visible .ea-w {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   EYEBROW — lettre-espacement + fondu
   ============================================================ */
.ea-eyebrow {
  opacity: 0;
  letter-spacing: 0.45em;
  transition:
    opacity       550ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    letter-spacing 550ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.ea-eyebrow.ea-words-visible {
  opacity: 1;
  letter-spacing: var(--ls-wider, 0.18em);
}

/* ============================================================
   PARAGRAPHES — fondu + glissement
   ============================================================ */
.ea-para {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   600ms 120ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    transform 600ms 120ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.ea-para.ea-words-visible {
  opacity: 1;
  transform: none;
}

/* ---- REVEAL DE BASE (pages qui ne chargent pas home.css) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  var(--duration-slow, 500ms) var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    transform var(--duration-slow, 500ms) var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}

/* Direction : gauche */
[data-reveal="left"]  { transform: translateX(-32px); }

/* Direction : droite */
[data-reveal="right"] { transform: translateX(32px); }

/* Direction : fondu seul */
[data-reveal="fade"]  { transform: none; }

/* Direction : zoom léger */
[data-reveal="scale"] { transform: scale(0.96); }

/* État visible — réinitialise toutes les directions */
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Délais échelonnés */
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.18s; }
[data-reveal-delay="3"] { transition-delay: 0.28s; }
[data-reveal-delay="4"] { transition-delay: 0.38s; }
[data-reveal-delay="5"] { transition-delay: 0.48s; }
[data-reveal-delay="6"] { transition-delay: 0.58s; }


/* ============================================================
   HOVER — Cartes de service
   ============================================================ */
.service-card {
  transition:
    transform 320ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    box-shadow 320ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.09);
}

/* ============================================================
   HOVER — Blocs tarifaires
   ============================================================ */
.tarif-block {
  transition:
    transform 320ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    box-shadow 320ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.tarif-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   HOVER — Cartes témoignages
   ============================================================ */
.testimonial-card {
  transition: transform 320ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.testimonial-card:hover {
  transform: translateY(-4px);
}

/* ============================================================
   HOVER — Universe cards (home)
   ============================================================ */
.universe-card {
  transition:
    background var(--duration-base, 320ms) var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    transform  var(--duration-base, 320ms) var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.universe-card:hover {
  transform: translateY(-4px);
}

/* ============================================================
   HOVER — Items avec icône coche (itinéraire, inclus)
   ============================================================ */
.citytour-include-item,
.include-item {
  transition: transform 250ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.citytour-include-item:hover,
.include-item:hover {
  transform: translateX(5px);
}

/* ============================================================
   HOVER — Formulaires : focus ring doré
   ============================================================ */
.form-input,
.form-select,
.form-textarea {
  transition: border-color 200ms, box-shadow 200ms;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(181, 151, 74, 0.18);
}

/* ============================================================
   HOVER — Photo strip
   ============================================================ */
.photo-strip {
  overflow: hidden;
}
.photo-strip img {
  transition: transform 1.4s var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.photo-strip:hover img {
  transform: scale(1.04);
}

/* ============================================================
   HOVER — Séparateur décoratif
   ============================================================ */
.separator__symbol {
  display: inline-block;
  transition: transform 500ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.section-header:hover .separator__symbol {
  transform: rotate(72deg) scale(1.15);
}

/* ============================================================
   HOVER — Partenaires / logos
   ============================================================ */
.partenaire-logo,
.partenaire-item,
.partner-item {
  transition: transform 300ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)), opacity 300ms;
}
.partenaire-logo:hover,
.partenaire-item:hover,
.partner-item:hover {
  transform: translateY(-3px);
  opacity: 1 !important;
}

/* ============================================================
   HOVER — Bouton primary : légère lueur dorée
   ============================================================ */
.btn-primary {
  transition:
    background  var(--duration-fast, 180ms) var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    box-shadow  var(--duration-fast, 180ms) var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    transform   var(--duration-fast, 180ms) var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(181, 151, 74, 0.28);
}
.btn-primary:active {
  transform: translateY(0);
}

/* ============================================================
   HOVER — Boutons secondaires
   ============================================================ */
.btn-secondary,
.btn-gold,
.btn-ghost {
  transition:
    color       var(--duration-fast, 180ms) var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    border-color var(--duration-fast, 180ms) var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1)),
    transform   var(--duration-fast, 180ms) var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.btn-secondary:hover,
.btn-gold:hover {
  transform: translateY(-2px);
}

/* ============================================================
   HOVER — Split block visual (renforce l'existant)
   ============================================================ */
.split-block__visual {
  transition: box-shadow 500ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.split-block:hover .split-block__visual {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
}

/* ============================================================
   HOVER — Page subnav links (renforce l'existant)
   ============================================================ */
.page-subnav__link::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--ea-gold, #B5974A);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-gold, cubic-bezier(0.25, 0.1, 0.25, 1));
}
.page-subnav__link:hover::after,
.page-subnav__link.is-active::after {
  transform: scaleX(1);
}

/* ============================================================
   RESPONSIVE — Désactiver translate sur mobile (évite overflow)
   ============================================================ */
@media (max-width: 480px) {
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(20px);
  }
}