/* ==========================================================================
   WES'SPA — Animations, révélations au défilement et ornements
   ========================================================================== */

/* Apparition progressive des blocs (piloté par main.js / IntersectionObserver) */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
html.js .reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .09s; }
.reveal-d2 { transition-delay: .18s; }
.reveal-d3 { transition-delay: .27s; }
.reveal-d4 { transition-delay: .36s; }
.reveal-d5 { transition-delay: .45s; }

@keyframes apparait { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pulsation { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

/* Ornement décoratif : filet doré + losange */
.separateur { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 34px; max-width: 260px; }
.separateur::before, .separateur::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--or-clair)); }
.separateur::after { background: linear-gradient(90deg, var(--or-clair), transparent); }
.separateur span { width: 8px; height: 8px; background: var(--or); transform: rotate(45deg); }

/* Ornement circulaire façon logo (cercles entrelacés) */
.ornement { position: absolute; pointer-events: none; opacity: .5; z-index: 0; }

/* Étiquettes animées */
.hero-etiquette { animation: flotte 6s ease-in-out infinite; }
.flottant-wa { animation: pulsation 3.2s infinite; }

/* Toast de confirmation (formulaires AJAX) */
.toast-zone { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 300; display: grid; gap: 10px; width: min(92vw, 420px); }
.toast {
  background: var(--brun-fonce); color: var(--sur-brun); border-radius: 14px;
  padding: 14px 18px; font-size: .89rem; box-shadow: var(--ombre-forte);
  animation: apparait .35s ease both; border-left: 4px solid var(--or);
}
.toast.succes { border-color: #25D366; }
.toast.erreur { border-color: var(--rouge); }

/* Bandeau défilant de réassurance */
.defilement { overflow: hidden; background: var(--brun); color: var(--sur-brun); padding: 12px 0; }
.defilement-piste { display: flex; gap: 46px; width: max-content; animation: defile 34s linear infinite; }
.defilement-piste span { display: inline-flex; align-items: center; gap: 12px; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.defilement-piste span::before { content: "✦"; color: var(--or-clair); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Survols d'images */
.zoom-cadre { overflow: hidden; border-radius: var(--rayon); }
.zoom-cadre img { transition: transform .8s cubic-bezier(.2,.6,.3,1); }
.zoom-cadre:hover img { transform: scale(1.05); }

/* Champ de recherche de la galerie / tarifs */
.recherche {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--bord-fort); border-radius: 999px; padding: 10px 18px; min-width: 210px;
}
.tarifs-barre .recherche { min-width: 300px; }
.recherche input { border: 0; background: transparent; font-family: var(--sans); font-size: .9rem; flex: 1; outline: none; color: var(--texte); }
.recherche .ico { color: var(--or); }

/* Ligne de prix en pointillés (carte imprimable) */
.pointilles { border-bottom: 1px dotted var(--bord-fort); flex: 1; margin: 0 12px 6px; }