/* Mouvement de la page d'accueil (version 1.51) : prestations (focus vidéo, volets), 10 commandements, avis Google en cascade, en-tête
   (entrée en scène, projecteur), chiffres, bandeau défilant, onde sonore. Les réglages viennent de Pages › Accueil › Modifier
   (inc/accueil-mouvement.php) sous forme d'attributs « data-… » ; les états animés sont ajoutés par assets/js/accueil.js. Sans script
   ou avec « réduire les animations », la page est celle d'avant. */

/* ---------- Prestations : décors masqués par défaut ---------- */
.service-card__glare, .service-card__n, .service-card__vt, .service-card__prog { display: none; }

/* ----- Focus vidéo : la vignette au centre de l'écran s'anime, les autres sont en noir et blanc à l'arrêt ----- */
.services-preview[data-mode="focus"] .service-card { position: relative; transition: box-shadow 0.5s ease, transform 0.25s ease-out; will-change: transform; }
.services-preview[data-mode="focus"] .service-card__media img,
.services-preview[data-mode="focus"] .service-card__media video { filter: grayscale(0.9) brightness(0.74); transform: scale(1.06); transition: filter 0.8s ease, transform 1.6s ease; }
.services-preview[data-mode="focus"] .service-card.is-on .service-card__media img,
.services-preview[data-mode="focus"] .service-card.is-on .service-card__media video { filter: none; transform: none; }
.services-preview[data-mode="focus"] .service-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.7s ease; pointer-events: none; }
.services-preview[data-mode="focus"] .service-card.is-on::after { transform: scaleX(1); }
.services-preview[data-mode="focus"] .service-card.is-on { box-shadow: 0 24px 54px -26px rgba(201, 162, 75, 0.7); }
.services-preview[data-mode="focus"] .service-card.is-on .service-card__more { transform: translateX(7px); }
.services-preview[data-mode="focus"] .service-card__glare { display: block; position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.26), transparent 55%); }
.services-preview[data-mode="focus"] .service-card.is-tilting .service-card__glare { opacity: 1; }

/* ----- Volets : quatre volets côte à côte (ordinateur), accordéon vertical (téléphone) ----- */
.services-preview[data-mode="volets"] { display: flex; gap: 10px; }
.services-preview[data-mode="volets"] .service-card { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border: 0; background: var(--night); color: #fff; cursor: pointer; transition: flex 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), flex-basis 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); }
.services-preview[data-mode="volets"] .service-card.is-on { cursor: default; }
.services-preview[data-mode="volets"] .service-card__media { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.services-preview[data-mode="volets"] .service-card__media img,
.services-preview[data-mode="volets"] .service-card__media video { width: 100%; height: 100%; object-fit: cover; transition: filter 0.6s ease, transform 1.4s ease; }
.services-preview[data-mode="volets"] .service-card:not(.is-on) .service-card__media img,
.services-preview[data-mode="volets"] .service-card:not(.is-on) .service-card__media video { filter: grayscale(0.7) brightness(0.55); transform: scale(1.08); }
.services-preview[data-mode="volets"] .service-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(28, 25, 22, 0.1) 30%, rgba(28, 25, 22, 0.88)); pointer-events: none; }
.services-preview[data-mode="volets"] .service-card__n { display: block; position: absolute; left: 20px; top: 16px; z-index: 2; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 40px; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--gold); }
.services-preview[data-mode="volets"] .service-card__vt { display: block; position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--serif); font-size: 20px; line-height: 1; white-space: nowrap; transition: opacity 0.3s ease; }
.services-preview[data-mode="volets"] .service-card.is-on .service-card__vt { opacity: 0; }
.services-preview[data-mode="volets"] .service-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: block; padding: 0 28px 26px; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.services-preview[data-mode="volets"] .service-card.is-on .service-card__body { opacity: 1; transform: none; transition: opacity 0.6s ease 0.3s, transform 0.7s ease 0.3s; pointer-events: auto; }
.services-preview[data-mode="volets"] .service-card h3 { font-size: clamp(24px, 3vw, 32px); color: #fff; }
.services-preview[data-mode="volets"] .service-card p { max-width: 38ch; margin-bottom: 14px; color: #E7DFD0; }
.services-preview[data-mode="volets"] .service-card__more { display: inline-block; color: var(--gold); }
.services-preview[data-mode="volets"] .service-card__prog { display: block; position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.services-preview[data-mode="volets"] .service-card.is-on .service-card__prog.is-run { animation: djb-prog var(--dur, 4.5s) linear forwards; }
@keyframes djb-prog { to { transform: scaleX(1); } }
@media (min-width: 701px) {
	.services-preview[data-mode="volets"] { height: clamp(380px, 46vw, 560px); }
	.services-preview[data-mode="volets"] .service-card.is-on { flex: 4.4 1 0; }
}
@media (max-width: 700px) {
	.services-preview[data-mode="volets"] { flex-direction: column; height: auto; gap: 8px; }
	.services-preview[data-mode="volets"] .service-card { flex: 0 0 74px; }
	.services-preview[data-mode="volets"] .service-card.is-on { flex: 0 0 340px; }
	.services-preview[data-mode="volets"] .service-card__n { top: 14px; font-size: 32px; }
	.services-preview[data-mode="volets"] .service-card__vt { left: 74px; top: 50%; bottom: auto; margin-top: -11px; transform: none; writing-mode: horizontal-tb; }
	.services-preview[data-mode="volets"] .service-card__body { padding: 0 20px 20px; }
}

/* ---------- 10 commandements : arrivée au rythme du défilement ---------- */
.commandments-card[data-motion] { overflow: hidden; }
.commandments-card[data-motion] .commandment { transition: none; will-change: transform, opacity; }
.commandments-card[data-motion] .commandment__num { display: inline-block; transform-origin: left center; }
.commandments-card[data-motion] .commandment__text em { display: inline-block; }
.approach__item[data-scrub] { will-change: transform, opacity; }

/* ---------- Derniers avis Google : cascade ---------- */
.home-reviews.is-ready { overflow-x: hidden; }
@supports (overflow: clip) {
	.home-reviews.is-ready { overflow-x: clip; }
}
.home-reviews.is-ready .review-card[data-from] { opacity: 0; transition: opacity 0.8s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease; }
.home-reviews.is-ready .review-card[data-from="left"] { transform: translate3d(-90px, 0, 0) rotate(-3deg); }
.home-reviews.is-ready .review-card[data-from="bottom"] { transform: translate3d(0, 70px, 0); }
.home-reviews.is-ready .review-card[data-from="diag"] { transform: translate3d(80px, 80px, 0) rotate(3deg); }
.home-reviews.is-ready .review-card[data-from="right"] { transform: translate3d(90px, 0, 0) rotate(3deg); }
.home-reviews.is-ready .review-card.is-in { opacity: 1; transform: none; }
.home-reviews.is-ready .review-card.is-in:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 22px 44px -22px rgba(201, 162, 75, 0.55); transition-delay: 0s; }
.review-card__stars i { font-style: normal; display: inline-block; }
.home-reviews.is-ready .review-card__stars i.is-full { color: rgba(201, 162, 75, 0.25); transform: scale(0.6); transition: color 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.6); }
.home-reviews.is-ready .review-card.is-lit .review-card__stars i.is-full { color: var(--accent); transform: none; }
@media (max-width: 700px) {
	.home-reviews.is-ready .review-card[data-from="left"] { transform: translate3d(-40px, 30px, 0) rotate(-2deg); }
	.home-reviews.is-ready .review-card[data-from="diag"] { transform: translate3d(36px, 50px, 0) rotate(2deg); }
	.home-reviews.is-ready .review-card[data-from="right"] { transform: translate3d(40px, 30px, 0) rotate(2deg); }
}

/* ---------- En-tête : entrée en scène, projecteur ---------- */
.hero__spot { position: absolute; left: 0; top: 0; z-index: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 75, 0.2), transparent 64%); pointer-events: none; opacity: 0; transition: opacity 0.6s ease; will-change: transform; }
.hero.has-spot .hero__spot { opacity: 1; }
@keyframes djb-rise { from { transform: translateY(112%); } to { transform: none; } }
@keyframes djb-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes djb-unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes djb-unzoom { from { transform: scale(1.22); } to { transform: none; } }
@keyframes djb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes djb-corner-tl { from { opacity: 0; transform: translate(14px, 14px); } to { opacity: 1; transform: none; } }
@keyframes djb-corner-br { from { opacity: 0; transform: translate(-14px, -14px); } to { opacity: 1; transform: none; } }
/* Les trois lignes du titre de l'accueil restent chacune sur leur ligne, avec ou sans animation (sinon, avec « réduire les animations », elles se collaient : « soirée ason histoire », 1.148) */
.hero__title .hero__ln { display: block; }
@media (prefers-reduced-motion: no-preference) {
	.hero[data-intro] .hero__logo { animation: djb-fade-up 0.9s ease 0.05s both; }
	.hero[data-intro] .eyebrow { animation: djb-fade 1s ease 0.2s both; }
	.hero[data-intro] .hero__ln { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
	.hero[data-intro] .hero__ln > span { display: block; animation: djb-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.25s + var(--k) * 0.14s); }
	.hero[data-intro] .hero__lead { animation: djb-fade-up 0.9s ease 0.95s both; }
	.hero[data-intro] .btn-row { animation: djb-fade-up 0.9s ease 1.15s both; }
	.hero[data-intro] .hero__media .hero__photo { animation: djb-unveil 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
	.hero[data-intro] .hero__media .hero__video { animation: djb-unveil 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
	.hero[data-intro] .hero__media img { animation: djb-unveil 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both, djb-unzoom 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
	.hero[data-intro] .hero__media::before { animation: djb-fade 1.6s ease 0.5s both; }
	.hero[data-intro] .corner--tl { animation: djb-corner-tl 0.8s ease 1.1s both; }
	.hero[data-intro] .corner--br { animation: djb-corner-br 0.8s ease 1.1s both; }
}

/* ---------- Chiffres : cascade et filet doré ---------- */
.stats-band[data-anim] { position: relative; }
.stats-band[data-anim]::before { content: ""; position: absolute; left: 50%; top: 0; width: min(520px, 70%); height: 2px; margin-left: calc(min(520px, 70%) / -2); background: var(--gold); transform: scaleX(1); transform-origin: center; }
.stats-band[data-anim].is-ready::before { transform: scaleX(0); transition: transform 1.2s ease; }
.stats-band[data-anim].is-ready.is-in::before { transform: scaleX(1); }
.stats-band[data-anim].is-ready .stats__item { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.stats-band[data-anim].is-ready.is-in .stats__item { opacity: 1; transform: none; }
.stats-band[data-anim].is-ready.is-in .stats__item:nth-child(2) { transition-delay: 0.12s; }
.stats-band[data-anim].is-ready.is-in .stats__item:nth-child(3) { transition-delay: 0.24s; }
.stats-band[data-anim].is-ready.is-in .stats__item:nth-child(4) { transition-delay: 0.36s; }

/* ---------- Onde sonore ---------- */
.wave { padding: 24px 0; text-align: center; } /* 1.110 : marges réduites (64 px avant) */
.wave:has(.wave__title), .wave:has(.wave__text) { padding: 44px 0; } /* avec un titre ou une phrase : un peu plus d'air */
.wave__title { max-width: 18ch; margin: 0 auto 10px; font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.12; color: var(--cream); text-wrap: balance; }
.wave__text { max-width: 46ch; margin: 0 auto; padding: 0 20px; color: var(--muted); }
.wave__bars { display: flex; align-items: center; justify-content: center; gap: 4px; height: 120px; max-width: 1100px; margin: 8px auto 0; padding: 0 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wave__title + .wave__bars, .wave__text + .wave__bars { margin-top: 32px; }
.wave__bars i { flex: 1 1 0; max-width: 10px; height: 100%; border-radius: 99px; background: linear-gradient(180deg, #E5C677, #C9A24B 55%, #7E6226); transform: scaleY(0.32); will-change: transform; }
.wave-band { padding: 8px 0; margin: 40px calc(50% - 50vw); }
.wave-band.sec--sable { background: var(--alt); }
.wave-band.sec--ivoire { background: var(--black); }
.wave-band.sec--nuit { background: var(--night); }
@media (max-width: 700px) {
	.wave { padding: 16px 0; }
	.wave:has(.wave__title), .wave:has(.wave__text) { padding: 36px 0; }
	.wave__bars { height: 90px; gap: 3px; }
}

/* ---------- Mouvement réduit : tout est affiché tel quel ---------- */
@media (prefers-reduced-motion: reduce) {
	.services-preview[data-mode] .service-card, .services-preview[data-mode] .service-card__media img, .services-preview[data-mode] .service-card__media video, .services-preview[data-mode] .service-card__body, .services-preview[data-mode] .service-card__vt { transition: none !important; }
	.home-reviews.is-ready .review-card[data-from] { opacity: 1; transform: none; transition: none; }
}