/* ==========================================================
   John P. Web — animations
   Fichier séparé : il s'ajoute au design existant sans le modifier.
   Tout est désactivé si le visiteur a demandé "réduire les animations".
   ========================================================== */

/* ---------- 1. Arrivée du haut de page ---------- */
.hero-texte > * { animation: jp-monte .7s cubic-bezier(.2,.8,.2,1) both; }
.hero-texte > :nth-child(1) { animation-delay: .05s; }
.hero-texte > :nth-child(2) { animation-delay: .15s; }
.hero-texte > :nth-child(3) { animation-delay: .28s; }
.hero-texte > :nth-child(4) { animation-delay: .40s; }
.hero-texte > :nth-child(5) { animation-delay: .52s; }

.hero-visuel .telephone { animation: jp-telephone .9s cubic-bezier(.2,.8,.2,1) .25s both, jp-flotte 6s ease-in-out 1.4s infinite; }

@keyframes jp-monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes jp-telephone { from { opacity: 0; transform: translateY(60px) rotate(8deg); } to { opacity: 1; transform: rotate(2deg); } }
@keyframes jp-flotte { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-10px); } }

/* ---------- 2. Démo de réservation en boucle dans le téléphone ---------- */
.ecran { position: relative; }
.ecran-creneaux span { transition: background-color .25s, color .25s, border-color .25s, transform .2s; }
.ecran-bouton { transition: transform .15s, filter .15s; }
.ecran-bouton.jp-appui { transform: scale(.94); filter: brightness(.85); }

/* le doigt qui tape */
.jp-doigt {
  position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: rgba(20,32,30,.28); border: 2px solid rgba(255,255,255,.9);
  pointer-events: none; opacity: 0; transform: scale(.4);
  transition: left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1), opacity .25s, transform .25s;
}
.jp-doigt.jp-visible { opacity: 1; transform: scale(1); }
.jp-doigt.jp-tape { transform: scale(.7); background: rgba(20,32,30,.45); }

/* la notification revient à chaque réservation */
.notif { animation: none; transition: opacity .35s, transform .45s cubic-bezier(.3,1.4,.5,1); }
.anim-pret .notif { opacity: 0; transform: translateY(18px) scale(.94); }
.anim-pret .notif.jp-montre { opacity: 1; transform: none; }

/* ---------- 3. En-tête qui prend une ombre au défilement ---------- */
.entete { transition: box-shadow .25s, background-color .25s; }
.entete.jp-defile { box-shadow: 0 8px 24px -16px rgba(20,32,30,.45); }

/* ---------- 4. Apparition des blocs au défilement ---------- */
.anim-pret .jp-revele { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--jp-delai, 0s); }
.anim-pret .jp-revele.jp-vu { opacity: 1; transform: none; }
/* la formule mise en avant garde son léger décalage vers le haut */
.anim-pret .formule.vedette.jp-revele.jp-vu { transform: translateY(-10px); }

/* ---------- 5. Étapes : les numéros s'allument l'un après l'autre ---------- */
.anim-pret .etapes-liste li::before { transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1); transition-delay: var(--jp-delai, 0s); }
.anim-pret .etapes-liste li.jp-vu::before { transform: scale(1); }

/* ---------- 6. Survols ---------- */
.bouton { transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
.bouton:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(20,32,30,.5); }
.formule, .projet { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, opacity .7s cubic-bezier(.2,.8,.2,1); }
.formule:hover { transform: translateY(-6px) !important; box-shadow: 0 24px 40px -24px rgba(20,32,30,.35); }
.projet:hover { transform: translateY(-6px) !important; box-shadow: 0 24px 40px -24px rgba(20,32,30,.35); }
.projet-vignette span { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.projet:hover .projet-vignette span { transform: scale(1.06); }
.metier { transition: transform .25s; }
.metier:hover { transform: translateX(6px); }

/* ---------- 7. Bouton "Appeler" sur mobile : petite onde régulière ---------- */
.appel-mobile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--brie, #F0C75E);
  animation: jp-onde 2.8s ease-out 2s infinite; pointer-events: none;
}
@keyframes jp-onde { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35); } }

/* ---------- Réduire les animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-texte > *, .hero-visuel .telephone, .appel-mobile::after { animation: none !important; }
  .anim-pret .jp-revele, .anim-pret .notif { opacity: 1 !important; transform: none !important; transition: none !important; }
  .anim-pret .etapes-liste li::before { transform: none !important; }
  .jp-doigt { display: none; }
  .bouton:hover, .formule:hover, .projet:hover, .metier:hover { transform: none !important; }
}
@media (max-width: 900px) { .anim-pret .formule.vedette.jp-revele.jp-vu { transform: none; } }