/* =====================================================================
   Effets visuels — thème Sophie Bousquet (version allégée, 1.28.0)
   Couche indépendante : désactivable dans Personnaliser › Contenu du site › Effets visuels.
   Principe : des fondus courts et discrets, rien qui tourne en continu, aucun flou ni filtre,
   rien qui change la taille de la page pendant le défilement.
   Tout mouvement est coupé si l'appareil ou le panneau d'accessibilité demande moins d'animations.
   ===================================================================== */

/* ---------- En-tête collé en haut (fond plein, sans flou) ---------- */
.entete {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 80;
	background: rgba(238, 240, 231, .97);
	transition: box-shadow .3s ease;
}
.entete--defile { box-shadow: 0 8px 24px -18px rgba(29, 42, 34, .4); }
.nav__liste a::before {
	content: ""; position: absolute; left: .8em; right: .8em; bottom: .35em; height: 2px; border-radius: 2px;
	background: var(--terre); transform: scaleX(0); transform-origin: right; transition: transform .3s ease;
}
.nav__liste a:hover::before { transform: scaleX(1); transform-origin: left; }
.nav__rdv a::before { display: none; }

/* ---------- Barre de progression de lecture ---------- */
.fx-progression {
	position: fixed; left: 0; top: 0; z-index: 95; height: 3px; width: 100%;
	background: var(--rideau);
	transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* ---------- Boutons : léger soulèvement ---------- */
.bouton { transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.bouton:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(29, 42, 34, .55); }

/* ---------- Ouverture : lueurs douces fixes, apparition en fondu ---------- */
.ouverture { isolation: isolate; }
.ouverture::before, .ouverture::after {
	content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
	width: 52vmax; height: 52vmax;
}
.ouverture::before { left: -16vmax; top: -22vmax; background: radial-gradient(closest-side, rgba(169, 191, 166, .45), transparent 72%); }
.ouverture::after { right: -18vmax; bottom: -28vmax; background: radial-gradient(closest-side, rgba(227, 185, 95, .24), transparent 72%); }

html.fx .ouverture__grille > div { animation: fx-monte .7s ease-out both; }
html.fx .ouverture__image { animation: fx-fondu .8s ease-out .15s both; }
@keyframes fx-monte { from { opacity: 0; transform: translateY(10px); } }
@keyframes fx-fondu { from { opacity: 0; } }

/* ---------- Bandeau défilant des accompagnements (lent, se met en pause au survol) ---------- */
.fx-bandeau { position: relative; background: var(--feuillage); color: var(--papier); overflow: hidden; padding-block: 1.1rem; }
.fx-bandeau__piste { display: flex; width: max-content; animation: fx-defile 70s linear infinite; }
.fx-bandeau:hover .fx-bandeau__piste, .fx-bandeau:focus-within .fx-bandeau__piste { animation-play-state: paused; }
.fx-bandeau ul { display: flex; list-style: none; margin: 0; padding: 0; }
.fx-bandeau li { display: flex; align-items: center; font-family: var(--titre); font-size: clamp(1.25rem, 2.4vw, 1.75rem); white-space: nowrap; }
.fx-bandeau li::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rideau); margin-inline: 1.6em; }
@keyframes fx-defile { to { transform: translateX(-50%); } }

/* ---------- Apparition à l'arrivée, sur les pages intérieures et le blog ---------- */
html.fx :is(.ariane, .page-titre h1, .page-titre p) { animation: fx-monte .6s ease-out both; }

/* ---------- Titres de section : trait moutarde qui se dessine ---------- */
/* (l'apparition des titres au défilement est réglée dans inc/effets.php) */
.section h2, .page-titre h1 { position: relative; }
.seances__intro h2::after, .cabinet__texte h2::after, .avis-accueil__tete h2::after {
	content: ""; display: block; width: 3.5rem; height: 3px; border-radius: 3px; margin-top: .7rem;
	background: var(--rideau); transform: scaleX(0); transform-origin: left; transition: transform .7s ease-out .2s;
}
.fx-vu::after, h2.fx-vu::after { transform: scaleX(1); }
html:not(.fx) .seances__intro h2::after, html:not(.fx) .cabinet__texte h2::after, html:not(.fx) .avis-accueil__tete h2::after { transform: none; }

/* ---------- Survols discrets ---------- */
.seances__table tr { transition: background-color .25s ease; }
.seances__table th { transition: color .25s ease; }
.seances__table tr:hover { background: linear-gradient(90deg, rgba(227, 185, 95, .14), transparent 70%); }
.seances__table tr:hover th, .seances__table tr:hover .prix { color: var(--feuillage); }

.section--feuillage { position: relative; overflow: hidden; }
.cabinet__photos img { transition: transform .3s ease; }
.cabinet__photos img:hover { transform: translateY(-3px); }

.billet { transition: transform .3s ease; }
.billet:hover { transform: translateY(-3px); }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

/* ---------- Mouvement réduit : tout s'arrête, rien ne se cache ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fx-bandeau__piste { animation: none !important; width: auto; flex-wrap: wrap; }
	.fx-bandeau ul[aria-hidden="true"] { display: none; }
}

/* Même chose quand le visiteur coupe les animations dans le panneau d'accessibilité. */
html.a11y-calme { scroll-behavior: auto; }
html.a11y-calme .fx-bandeau__piste { animation: none !important; width: auto; flex-wrap: wrap; }
html.a11y-calme .fx-bandeau ul[aria-hidden="true"] { display: none; }
html.a11y-calme .fx-progression { display: none; }