/* ==========================================================================
   Santé Solid'R : animations au défilement
   Chargé après main.css. Les effets ne s'activent que si motion.js a posé
   la classe .motion sur <html> (donc jamais sans JS ni en « moins d'animations »).
   ========================================================================== */

:root {
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-soft: cubic-bezier(.33, 1, .68, 1);
}

/* ---------- Barre de lecture ---------- */

.scroll-bar {
	position: fixed; inset: 0 0 auto 0; z-index: 120; height: 3px;
	background: linear-gradient(90deg, var(--peche) 0%, var(--peche-vif, #F28C3A) 100%);
	transform: scaleX(0); transform-origin: 0 50%;
	pointer-events: none;
}
.admin-bar .scroll-bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .scroll-bar { top: 46px; } }

/* ---------- En-tête flottant : il revient dès qu'on remonte ---------- */

.site-header.is-floating {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	background: rgba(18, 58, 79, .94);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55);
	transform: translateY(-110%);
	transition: transform .45s var(--ease-out);
}
.site-header.is-floating.is-shown { transform: none; }
.site-header.is-floating .site-header__bar { padding-block: 10px; }
.site-header.is-floating .site-logo { height: 46px; }
.admin-bar .site-header.is-floating { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header.is-floating { top: 46px; } }
.site-logo { transition: height .3s var(--ease-soft); }

/* ---------- Bouton « remonter » ---------- */

.back-top {
	border: 0; padding: 0; cursor: pointer; font: inherit;
	position: fixed; right: 22px; bottom: 22px; z-index: 90;
	width: 52px; height: 52px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--petrole); color: var(--blanc);
	box-shadow: 0 12px 28px -12px rgba(18, 58, 79, .7);
	opacity: 0; visibility: hidden; translate: 0 14px; scale: .9;
	transition: opacity .3s, visibility .3s, translate .4s var(--ease-out), scale .4s var(--ease-out), background-color .2s;
}
.back-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
.back-top:hover, .back-top:focus-visible { background: var(--peche); color: var(--nuit); }
.back-top:hover svg { translate: 0 -2px; }
.back-top svg { transition: translate .25s var(--ease-out); }
@media (max-width: 600px) { .back-top { right: 14px; bottom: 14px; width: 46px; height: 46px; } }

/* ---------- Apparitions ---------- */

.motion .rv {
	opacity: 0;
	transition: opacity .8s var(--ease-soft), translate 1s var(--ease-out), scale 1s var(--ease-out), clip-path 1.1s var(--ease-out);
}
.motion .rv--up { translate: 0 34px; }
.motion .rv--tile { translate: 0 26px; scale: .94; }
.motion .rv--photo { translate: 0 26px; clip-path: inset(0 0 100% 0); }
.motion .rv.is-in { opacity: 1; translate: 0 0; scale: 1; }
.motion .rv--photo.is-in { clip-path: inset(-40px -40px -40px -40px); }

/* La photo décalée : le carré pêche glisse en place après l'image. */
.motion .rv--photo .photo-offset::before,
.motion .photo-offset.rv--photo::before { transform: translate(0, 0); transition: transform 1s var(--ease-out) .35s; }
.motion .rv--photo.is-in .photo-offset::before,
.motion .photo-offset.rv--photo.is-in::before { transform: translate(18px, -18px); }

/* Les tuiles de réalisations : l'image se « pose » doucement. */
.motion .rv--tile img { scale: 1.12; transition: scale 1.4s var(--ease-out), transform .45s, opacity .3s; }
.motion .rv--tile.is-in img { scale: 1; }

/* Titres de section : un trait pêche se dessine dessous. */
.motion .rv-line { position: relative; }
.motion .rv-line::after {
	content: ""; position: absolute; left: 0; bottom: -12px;
	width: 56px; height: 4px; border-radius: 4px; background: var(--peche);
	transform: scaleX(0); transform-origin: 0 50%;
	transition: transform .9s var(--ease-out) .25s;
}
.motion .rv-line.rv-line--c::after { left: 50%; margin-left: -28px; transform-origin: 50% 50%; }
.motion .rv-line.is-in::after,
.motion .is-in > .rv-line::after,
.motion .is-in .rv-line::after { transform: scaleX(1); }

/* Barres de collecte et compteurs. */
.motion .progress__bar span { transition: width 1.6s var(--ease-out); }
.stat__value { font-variant-numeric: tabular-nums; }

/* ---------- Entrée du héro (au chargement) ---------- */

@keyframes ssr-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes ssr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssr-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ssr-drop { from { opacity: 0; scale: 1.18; } 60% { opacity: 1; } to { opacity: 1; scale: 1; } }
@keyframes ssr-offset { from { transform: translate(0, 0); } to { transform: translate(18px, -18px); } }

.motion .hero__text > *,
.motion .page-hero__text > * { animation: ssr-rise .9s var(--ease-out) backwards; }
.motion .hero__text > :nth-child(1), .motion .page-hero__text > :nth-child(1) { animation-delay: .05s; }
.motion .hero__text > :nth-child(2), .motion .page-hero__text > :nth-child(2) { animation-delay: .15s; }
.motion .hero__text > :nth-child(3), .motion .page-hero__text > :nth-child(3) { animation-delay: .27s; }
.motion .hero__text > :nth-child(4), .motion .page-hero__text > :nth-child(4) { animation-delay: .39s; }
.motion .hero__text > :nth-child(5), .motion .page-hero__text > :nth-child(5) { animation-delay: .51s; }
.motion .hero__text > :nth-child(6), .motion .page-hero__text > :nth-child(6) { animation-delay: .63s; }

.motion .hero__photo img,
.motion .page-hero__media img { animation: ssr-wipe 1.2s var(--ease-out) .2s backwards; }
.motion .hero__photo::before,
.motion .page-hero__media::before { animation: ssr-offset 1s var(--ease-out) .9s backwards; }
.motion .hero__polaroid { animation: ssr-drop 1s var(--ease-out) .75s backwards; }
.motion .page-hero__aside { animation: ssr-rise 1s var(--ease-out) .35s backwards; }
.motion .site-header__bar { animation: ssr-fade .6s ease backwards; }

/* Le parallaxe s'appuie sur la propriété « translate » posée par le script. */
[data-parallax] { will-change: translate; }

/* ---------- Petits plus au survol ---------- */

.card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.motion .card.rv { transition: opacity .8s var(--ease-soft), translate 1s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -26px rgba(18, 58, 79, .45); }
.btn--don { position: relative; overflow: hidden; isolation: isolate; }
.btn--don::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
	translate: -120% 0; transition: translate .7s var(--ease-out);
}
.btn--don:hover::after { translate: 120% 0; }

/* ---------- Respect du réglage « moins d'animations » ---------- */

@media (prefers-reduced-motion: reduce) {
	.motion .rv { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; }
	.site-header.is-floating { transition: none; }
	.scroll-bar { display: none; }
	[data-parallax] { translate: none !important; }
}

@media print {
	.scroll-bar, .back-top { display: none !important; }
	.motion .rv { opacity: 1 !important; translate: none !important; clip-path: none !important; }
	.site-header.is-floating { position: static; transform: none; }
}