/* ==========================================================================
   Mouvement (voir inc/motion.php et assets/js/motion.js).
   Les états cachés n'existent que sous html.pc-anim, posée seulement si le visiteur
   n'a pas demandé à réduire les animations : sans JavaScript, tout reste visible.
   La photo du hero n'est jamais animée (élément LCP), le titre H1 ne fait que glisser.
   ========================================================================== */

/* ---------- Apparition au défilement ---------- */
.pc-anim :is(.pc-section__num, .pc-section__titre, .pc-cartes__titre, .pc-col__titre, .pc-chiffres__titre, .pc-logos__titre, .pc-temo__titre, .pc-tetapes__titre, .pc-blog__h2,
	.pc-cartes__grille > *, .pc-col__grille > *, .pc-section__grille > *, .pc-section__cartes > *, .pc-blog__grille > *, .pc-temo__grille > *,
	.pc-chiffres__grille > *, .pc-qencart__in > *, .pc-tetapes__liste > *, .pc-tetapes__media, .pc-logos__liste > *, .pc-faq-bloc__liste > *,
	.pc-portrait__carte, .pc-blog__cta, .pc-contact__in > *):not(.is-vu) {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
}
.pc-anim :is(.pc-section__num, .pc-section__titre, .pc-cartes__titre, .pc-col__titre, .pc-chiffres__titre, .pc-logos__titre, .pc-temo__titre, .pc-tetapes__titre, .pc-blog__h2,
	.pc-cartes__grille > *, .pc-col__grille > *, .pc-section__grille > *, .pc-section__cartes > *, .pc-blog__grille > *, .pc-temo__grille > *,
	.pc-chiffres__grille > *, .pc-qencart__in > *, .pc-tetapes__liste > *, .pc-tetapes__media, .pc-logos__liste > *, .pc-faq-bloc__liste > *,
	.pc-portrait__carte, .pc-blog__cta, .pc-contact__in > *):not(.is-fini) {
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--pc-delai, 0ms);
}

/* Chiffres : largeur stable pendant le comptage */
.pc-chiffres__item dd,
.pc-qencart__grille dd { font-variant-numeric: tabular-nums; }

/* ---------- Entrée du hero ---------- */
@keyframes pc-monte { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes pc-glisse { from { transform: translate3d(0, 14px, 0); } to { transform: none; } }
@keyframes pc-halo { from { opacity: 0.55; } to { opacity: 1; } }
.pc-anim .pc-hero__texte > * { animation: pc-monte 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.pc-anim .pc-hero__texte > .pc-hero__titre { animation-name: pc-glisse; }
.pc-anim .pc-hero__texte > :nth-child(2) { animation-delay: 0.08s; }
.pc-anim .pc-hero__texte > :nth-child(3) { animation-delay: 0.16s; }
.pc-anim .pc-hero__texte > :nth-child(4) { animation-delay: 0.24s; }
.pc-anim .pc-hero__texte > :nth-child(5) { animation-delay: 0.32s; }
.pc-anim .pc-hero__texte > :nth-child(n+6) { animation-delay: 0.4s; }
/* Halo rouge de l'accueil : respiration lente */
.pc-anim .pc-hero--accueil::after { animation: pc-halo 6s ease-in-out 1s infinite alternate; }

/* ---------- Survols (écrans avec souris, mouvement accepté) ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pc-carte__img,
	.pc-carte-art__img,
	.pc-fcarte__img,
	.pc-tetapes__img { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
	a.pc-carte:hover .pc-carte__img,
	.pc-carte-art:hover .pc-carte-art__img,
	.pc-fcarte:hover .pc-fcarte__img { transform: scale(1.045); }
	.pc-arrow { transition: transform 0.25s ease; }
	a:hover .pc-arrow,
	a:focus-visible .pc-arrow { transform: translateX(4px); }
}

/* ---------- Menu : soulignement qui se déploie (bureau) ---------- */
@media (min-width: 1101px) {
	.pc-nav__list > li > a { position: relative; }
	.pc-nav__list > li > a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
		height: 2px;
		background: var(--pc-red);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	.pc-nav__list > li > a:hover::after,
	.pc-nav__list > li:focus-within > a::after { transform: scaleX(1); }
}

/* ---------- Header au défilement : ombre et logo réduit (sans changer sa hauteur) ---------- */
.pc-header { transition: box-shadow 0.3s ease; }
.pc-header.is-defile { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.pc-header .pc-logo { transition: transform 0.3s ease; transform-origin: left center; }
.pc-header.is-defile .pc-logo { transform: scale(0.86); }

@media (prefers-reduced-motion: reduce) {
	.pc-header,
	.pc-header .pc-logo,
	.pc-nav__list > li > a::after { transition: none; }
}

/* ==========================================================================
   Site vivant : mouvements lents et permanents sur quelques points précis.
   Démarrent après le chargement complet (html.pc-vivant) et ne tournent que
   lorsque leur bloc est à l'écran (.pc-en-vue). Coupés en mouvement réduit
   (pc-anim n'est jamais posée dans ce cas).
   ========================================================================== */

/* 1. Hero de l'accueil : la photo avance très lentement (après l'affichage, sans effet sur le LCP). */
.pc-hero__cadre { position: absolute; inset: 0; overflow: hidden; border-radius: var(--pc-radius-lg); }
.pc-hero__cadre .pc-hero__img { border-radius: 0; transform-origin: 60% 45%; }
@keyframes pc-approche { from { transform: none; } to { transform: scale(1.07) translate3d(-1%, -1%, 0); } }
.pc-vivant .pc-hero--accueil.pc-en-vue .pc-hero__cadre .pc-hero__img { animation: pc-approche 22s ease-in-out infinite alternate; }

/* 2. Reflet doré sur les fonds géométriques : une bande de lumière traverse les facettes. */
.pc-reflet {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: url("images/bandeau-fond.webp") center / cover no-repeat;
	background-position: inherit;
	filter: brightness(1.8) saturate(1.15);
	-webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
	mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
	-webkit-mask-size: 300% 100%;
	mask-size: 300% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
}
@keyframes pc-reflet {
	0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
	55%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
.pc-vivant .pc-en-vue .pc-reflet { animation: pc-reflet 10s cubic-bezier(0.45, 0, 0.55, 1) 1s infinite; }
.pc-vivant .pc-en-vue .pc-bandeau__decor > .pc-reflet { opacity: 1; }
.pc-vivant .pc-en-vue .pc-bandeau__decor--d > .pc-reflet { animation-delay: 1.6s; }
.pc-vivant .pc-en-vue > .pc-reflet { opacity: 0.4; }

/* 4a. Étapes (bandeau) : les numéros s'allument l'un après l'autre, une ligne rouge se remplit au défilement. */
.pc-etapes { position: relative; }
.pc-etapes::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--pc-red);
	transform: scaleX(var(--pc-progres, 0));
	transform-origin: left center;
	transition: transform 0.25s linear;
	pointer-events: none;
}
.pc-etapes__n { display: inline-block; }
@keyframes pc-etape {
	0%, 22%, 100% { transform: none; text-shadow: none; }
	9% { transform: scale(1.14); text-shadow: 0 0 18px rgba(215, 20, 26, 0.35); }
}
.pc-vivant .pc-etapes.pc-en-vue .pc-etapes__n { animation: pc-etape 8s ease-in-out infinite; }
.pc-vivant .pc-etapes.pc-en-vue .pc-etapes__item:nth-child(2) .pc-etapes__n { animation-delay: 2s; }
.pc-vivant .pc-etapes.pc-en-vue .pc-etapes__item:nth-child(3) .pc-etapes__n { animation-delay: 4s; }
.pc-vivant .pc-etapes.pc-en-vue .pc-etapes__item:nth-child(4) .pc-etapes__n { animation-delay: 6s; }

/* 4b. Texte et étapes : une ligne verticale relie les étapes et se remplit au défilement. */
.pc-tetapes__liste { position: relative; }
.pc-tetapes__liste::before,
.pc-tetapes__liste::after {
	content: "";
	position: absolute;
	left: 73px;
	top: 26px;
	bottom: 26px;
	width: 1px;
	background: var(--pc-line);
	pointer-events: none;
}
.pc-tetapes--sombre .pc-tetapes__liste::before { background: rgba(255, 255, 255, 0.14); }
.pc-tetapes__liste::after {
	width: 2px;
	left: 72px;
	background: var(--pc-red);
	transform: scaleY(var(--pc-progres, 0));
	transform-origin: center top;
	transition: transform 0.25s linear;
}

/* 7. Boutons de lecture des vidéos : une onde se diffuse. */
.pc-temo__play::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--pc-red);
	opacity: 0;
	pointer-events: none;
}
@keyframes pc-onde { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.75); opacity: 0; } }
.pc-vivant .pc-en-vue .pc-temo__play::before { animation: pc-onde 2.8s ease-out infinite; }

/* 8. Bouton principal : un reflet le traverse de temps en temps (header et hero). */
.pc-header__cta,
.pc-hero .pc-actions > .pc-btn--red:first-child { position: relative; overflow: hidden; isolation: isolate; }
.pc-header__cta::after,
.pc-hero .pc-actions > .pc-btn--red:first-child::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: translateX(-130%) skewX(-20deg);
	pointer-events: none;
}
@keyframes pc-brille { 0% { transform: translateX(-130%) skewX(-20deg); } 16%, 100% { transform: translateX(330%) skewX(-20deg); } }
.pc-vivant .pc-header.pc-en-vue .pc-header__cta::after { animation: pc-brille 7s ease-in-out 2s infinite; }
.pc-vivant .pc-hero.pc-en-vue .pc-actions > .pc-btn--red:first-child::after { animation: pc-brille 7s ease-in-out 5.5s infinite; }