/* ==========================================================================
   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 > *, .pc-section__media, .pc-galerie__titre, .pc-galerie__grille > *):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 > *, .pc-section__media, .pc-galerie__titre, .pc-galerie__grille > *):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.12) translate3d(-2%, -1.5%, 0); } }
.pc-vivant .pc-hero.pc-en-vue .pc-hero__cadre .pc-hero__img { animation: pc-approche 11s ease-in-out infinite alternate; }
/* Images des sections : zoom très lent tant qu'elles sont à l'écran. */
@keyframes pc-approche-douce { from { transform: none; } to { transform: scale(1.08); } }
.pc-vivant .pc-section.pc-en-vue .pc-section__img { animation: pc-approche-douce 16s 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; }

/* 3. Étincelles dorées dans le hero de l'accueil : elles montent et s'éteignent (créées par motion.js). */
.pc-etincelles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-out; }
/* Apparition en fondu : créées après le chargement, les étincelles ne surgissent pas d'un coup en plein vol. */
.pc-vivant .pc-hero.pc-en-vue .pc-etincelles { opacity: 1; }
.pc-etincelle {
	position: absolute;
	bottom: -12px;
	left: var(--x, 50%);
	width: var(--t, 3px);
	height: var(--t, 3px);
	border-radius: 50%;
	background: #FFD98A;
	box-shadow: 0 0 8px 2px rgba(255, 190, 90, 0.9), 0 0 20px 5px rgba(215, 20, 26, 0.45);
	opacity: 0;
}
@keyframes pc-etincelle {
	0% { transform: translate3d(0, 0, 0); opacity: 0; }
	12% { opacity: var(--o, 0.9); }
	70% { opacity: calc(var(--o, 0.9) * 0.6); }
	100% { transform: translate3d(var(--dx, 0px), var(--dy, -420px), 0); opacity: 0; }
}
.pc-vivant .pc-hero.pc-en-vue .pc-etincelle { animation: pc-etincelle var(--d, 7s) linear var(--delai, 0s) infinite; }

/* ==========================================================================
   Menus déroulants du header : ouverture animée.
   ========================================================================== */
/* Bureau : le sous-menu descend, ses liens arrivent en cascade. */
@media (min-width: 1101px) {
	.pc-site .pc-nav__list .sub-menu {
		transform: translateY(12px);
		transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.25s;
	}
	.pc-site .pc-nav__list > li:hover > .sub-menu,
	.pc-site .pc-nav__list > li:focus-within > .sub-menu,
	.pc-site .pc-nav__list > li.is-open > .sub-menu {
		transform: none;
		transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
	}
	.pc-site .pc-nav__list .sub-menu > li { opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.25s ease; }
	.pc-site .pc-nav__list > li:hover > .sub-menu > li,
	.pc-site .pc-nav__list > li:focus-within > .sub-menu > li,
	.pc-site .pc-nav__list > li.is-open > .sub-menu > li { opacity: 1; transform: none; }
	.pc-site .pc-nav__list .sub-menu > li:nth-child(2) { transition-delay: 0.04s; }
	.pc-site .pc-nav__list .sub-menu > li:nth-child(3) { transition-delay: 0.08s; }
	.pc-site .pc-nav__list .sub-menu > li:nth-child(4) { transition-delay: 0.12s; }
	.pc-site .pc-nav__list .sub-menu > li:nth-child(5) { transition-delay: 0.16s; }
	.pc-site .pc-nav__list .sub-menu > li:nth-child(n+6) { transition-delay: 0.2s; }
}
/* Mobile : les sous-menus se déplient en accordéon, le panneau glisse plus doucement. */
@media (max-width: 1100px) {
	.pc-site .pc-nav { transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.38s; }
	.pc-site .pc-nav__list > li > .sub-menu,
	.pc-site .pc-nav__list > li:hover > .sub-menu,
	.pc-site .pc-nav__list > li:focus-within > .sub-menu {
		display: flex;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		padding-bottom: 0;
		margin-bottom: 0;
		transition: max-height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease, padding 0.35s ease, margin 0.35s ease, visibility 0s linear 0.35s;
	}
	.pc-site .pc-nav__list > li.is-open > .sub-menu {
		max-height: var(--pc-sm-h, 640px);
		opacity: 1;
		visibility: visible;
		padding-bottom: 12px;
		margin-bottom: 12px;
		transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease 0.05s, padding 0.35s ease, margin 0.35s ease, visibility 0s;
	}
	.pc-site .pc-nav__toggle svg { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
}
@media (prefers-reduced-motion: reduce) {
	.pc-site .pc-nav,
	.pc-site .pc-nav__list .sub-menu,
	.pc-site .pc-nav__list .sub-menu > li,
	.pc-site .pc-nav__toggle svg { transition: none !important; }
}

/* ==========================================================================
   Boutons : transitions douces, léger soulèvement, remplissage du bouton ligne.
   ========================================================================== */
body.pc-site .pc-btn {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	body.pc-site .pc-btn--red:hover,
	body.pc-site .pc-btn--noir:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(20, 20, 20, 0.18); }
	body.pc-site .pc-btn--red:hover { box-shadow: 0 12px 24px rgba(215, 20, 26, 0.28); }
	body.pc-site .pc-btn--ghost-light:hover { transform: translateY(-2px); }
	/* Bouton ligne : le fond se remplit de gauche à droite. */
	body.pc-site .pc-btn--ligne { position: relative; isolation: isolate; overflow: hidden; }
	body.pc-site .pc-btn--ligne::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--pc-ink);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	body.pc-site .pc-btn--ligne:hover { background: transparent; }
	body.pc-site .pc-btn--ligne:hover::before { transform: scaleX(1); }
	body.pc-site .pc-btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; }
}
@media (prefers-reduced-motion: reduce) {
	body.pc-site .pc-btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
}

/* ---------- FAQ ---------- */
/* Le signe « + » pivote d'un demi-tour en devenant « − » ; la question rougit au survol (déploiement : nav.js). */
@media (prefers-reduced-motion: no-preference) {
	.pc-faq__signe { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
	.pc-faq__signe::before,
	.pc-faq__signe::after { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
	.pc-faq__item[open] .pc-faq__signe { transform: rotate(180deg); }
	.pc-faq__q { transition: color 0.25s ease; }
	.pc-faq__q:hover { color: var(--pc-red); }
}