/* ==========================================================================
   Éléments de la charte Prev'Concept placés par touches : effets des blocs sombres, touches des sections
   claires, slogan, mascotte. Les photos découpées sont dans formes.css.
   Chargée après titres.css (voir inc/titres.php). La sphère du logo et le titre chromé sont dans titres.css.
   ========================================================================== */

:root {
	--pc-slogan: url("/wp-content/uploads/2026/10/prevconcept-slogan-sur-mesure.webp");
	--pc-mascotte: url("/wp-content/uploads/2026/10/prevconcept-mascotte-poulpe.webp");
}

/* ---------- Blocs sombres : lumières (calques créés par motion.js dans .pc-etincelles--bloc) ---------- */

/* Les blocs sans calque positionné reçoivent un repère, et leur contenu passe devant les effets. */
.pc-col--sombre,
.pc-logos--noir { position: relative; overflow: hidden; }
.pc-col--sombre > .pc-col__in,
.pc-logos--noir > .pc-logos__in { position: relative; z-index: 1; }

/* Étincelles qui montent, comme dans l'en-tête de l'accueil. */
.pc-vivant .pc-en-vue > .pc-etincelles--bloc { opacity: 1; }
.pc-vivant .pc-en-vue > .pc-etincelles--bloc .pc-etincelle { animation: pc-etincelle var(--d, 7s) linear var(--delai, 0s) infinite; }

/* Halo rouge qui respire, placé d'un côté puis de l'autre selon le bloc. */
.pc-etincelles--bloc::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 45% 70% at var(--hx, 85%) var(--hy, 30%), rgba(215, 20, 26, 0.24), transparent 70%);
}
.pc-vivant .pc-en-vue > .pc-etincelles--bloc::before { animation: pc-halo 6s ease-in-out infinite alternate; }

/* Coins acier brossé et rouge (comme sur les supports imprimés), un bloc sombre sur deux :
   en haut à droite et en bas à gauche ; un reflet de lumière parcourt l'acier de temps en temps. */
.pc-coin {
	position: absolute;
	width: clamp(90px, 14vw, 300px);
	aspect-ratio: 1;
	filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.7));
}
.pc-coin--hd { top: 0; right: 0; }
.pc-coin--bg { bottom: 0; left: 0; width: clamp(70px, 10vw, 220px); rotate: 180deg; }
.pc-coin::before,
.pc-coin::after {
	content: "";
	position: absolute;
	inset: 0;
}
/* Bande d'acier brossé. */
.pc-coin::before {
	clip-path: polygon(22% 0, 50% 0, 100% 50%, 100% 78%);
	background:
		linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.9) 48%, transparent 58%) 100% 0 / 300% 100% no-repeat,
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0.06) 1px 3px),
		linear-gradient(135deg, #4b4d50 0%, #c9cbce 26%, #7d8084 46%, #eceef0 62%, #8e9195 80%, #3d3f42 100%);
}
/* Triangle rouge brillant, séparé de l'acier par un filet noir. */
.pc-coin::after {
	clip-path: polygon(54% 0, 100% 0, 100% 46%);
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.28), transparent 40%),
		linear-gradient(135deg, #ff3b40 0%, #d7141a 45%, #7a0408 100%);
}
@keyframes pc-coin-reflet {
	0%, 55% { background-position: 100% 0, 0 0, 0 0; }
	100% { background-position: 0% 0, 0 0, 0 0; }
}
.pc-vivant .pc-en-vue .pc-coin::before { animation: pc-coin-reflet 7s ease-in-out infinite; }
.pc-vivant .pc-en-vue .pc-coin--bg::before { animation-delay: 3.5s; }

/* Éclats de lumière dorés (comme sur le fond des en-têtes), l'autre bloc sombre sur deux. */
.pc-eclat {
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	width: var(--t, 100px);
	aspect-ratio: 1;
	translate: -50% -50%;
	opacity: 0;
	background:
		radial-gradient(circle, rgba(255, 240, 200, 0.95) 0 3%, rgba(255, 190, 90, 0.5) 8%, transparent 24%),
		linear-gradient(90deg, transparent, rgba(255, 210, 140, 0.75) 50%, transparent) center / 100% 2px no-repeat,
		linear-gradient(0deg, transparent, rgba(255, 210, 140, 0.6) 50%, transparent) center / 2px 70% no-repeat;
	mix-blend-mode: screen;
}
@keyframes pc-eclat {
	0%, 100% { opacity: 0; scale: 0.5; rotate: 0deg; }
	45%, 55% { opacity: 1; scale: 1; rotate: 25deg; }
}
.pc-vivant .pc-en-vue .pc-eclat { animation: pc-eclat var(--d, 6s) ease-in-out var(--delai, 0s) infinite; }

/* ---------- Sections claires : une touche de charte par section, jamais la même partout ---------- */
/* Selon la place du bloc dans la page : coin noir, rouge et acier (2 fois au plus), duo de triangles acier
   et rouge qui flotte (comme sur les affiches), ou trame de points rouges qui s'estompe. Derrière le contenu.
   Les autres blocs restent nets (la sphère, dans titres.css, occupe les 2e, 5e et 9e). */
.pc-blocs > section:is(.pc-section--blanc, .pc-section--creme, .pc-cartes, .pc-col--blanc, .pc-col--transparent, .pc-faq-bloc, .pc-galerie, .pc-temo--clair, .pc-formations, .pc-contact, .pc-chiffres--encart) {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}
.pc-blocs > section:is(.pc-section--blanc, .pc-section--creme, .pc-cartes, .pc-col--blanc, .pc-col--transparent, .pc-faq-bloc, .pc-galerie, .pc-temo--clair, .pc-formations, .pc-contact, .pc-chiffres--encart):is(:nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(10), :nth-child(11))::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}
/* A. Coin noir, rouge et acier, en haut à droite : 3e et 10e bloc. */
.pc-blocs > section:is(.pc-section--blanc, .pc-section--creme, .pc-cartes, .pc-col--blanc, .pc-col--transparent, .pc-faq-bloc, .pc-galerie, .pc-temo--clair, .pc-formations, .pc-contact, .pc-chiffres--encart):is(:nth-child(3), :nth-child(10))::after {
	top: 0;
	right: 0;
	width: clamp(70px, 9vw, 170px);
	aspect-ratio: 1;
	background: linear-gradient(to bottom left, #111 0 19%, #d7141a 19% 27%, transparent 27% 30%, #f4f5f6 30%, #a7aaae 34%, #eef0f1 37%, #7c7f83 40%, transparent 40%);
}
/* B. Duo de triangles acier et rouge qui flotte : 4e et 11e bloc à droite en haut, 7e à gauche en bas. */
.pc-blocs > section:is(.pc-section--blanc, .pc-section--creme, .pc-cartes, .pc-col--blanc, .pc-col--transparent, .pc-faq-bloc, .pc-galerie, .pc-temo--clair, .pc-formations, .pc-contact, .pc-chiffres--encart):is(:nth-child(4), :nth-child(7), :nth-child(11))::after {
	top: clamp(44px, 9%, 110px);
	right: clamp(18px, 6vw, 150px);
	width: clamp(58px, 5.5vw, 100px);
	aspect-ratio: 100 / 46;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 46'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fbfbfc'/%3E%3Cstop offset='.45' stop-color='%23a7aaae'/%3E%3Cstop offset='.7' stop-color='%23eef0f1'/%3E%3Cstop offset='1' stop-color='%236f7276'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff4a4f'/%3E%3Cstop offset='.5' stop-color='%23d7141a'/%3E%3Cstop offset='1' stop-color='%237a0408'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='2,44 24,4 46,44' fill='url%28%23a%29'/%3E%3Cpolygon points='54,4 98,4 76,44' fill='url%28%23b%29'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
	animation: pc-sphere-flotte 8s ease-in-out infinite;
}
.pc-blocs > section:is(.pc-section--blanc, .pc-section--creme, .pc-cartes, .pc-col--blanc, .pc-col--transparent, .pc-faq-bloc, .pc-galerie, .pc-temo--clair, .pc-formations, .pc-contact, .pc-chiffres--encart):nth-child(7)::after {
	top: auto;
	right: auto;
	bottom: clamp(44px, 9%, 110px);
	left: clamp(18px, 6vw, 150px);
	animation-delay: -3s;
}
/* C. Trame de points rouges qui s'estompe : 6e bloc en bas à gauche, 8e en haut à droite. */
.pc-blocs > section:is(.pc-section--blanc, .pc-section--creme, .pc-cartes, .pc-col--blanc, .pc-col--transparent, .pc-faq-bloc, .pc-galerie, .pc-temo--clair, .pc-formations, .pc-contact, .pc-chiffres--encart):is(:nth-child(6), :nth-child(8))::after {
	left: 0;
	bottom: 0;
	width: clamp(160px, 18vw, 300px);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(215, 20, 26, 0.32) 0 1.6px, transparent 2.2px) 0 0 / 14px 14px;
	-webkit-mask-image: radial-gradient(circle at 0 100%, #000 0, transparent 70%);
	mask-image: radial-gradient(circle at 0 100%, #000 0, transparent 70%);
}
.pc-blocs > section:is(.pc-section--blanc, .pc-section--creme, .pc-cartes, .pc-col--blanc, .pc-col--transparent, .pc-faq-bloc, .pc-galerie, .pc-temo--clair, .pc-formations, .pc-contact, .pc-chiffres--encart):nth-child(8)::after {
	left: auto;
	bottom: auto;
	right: 0;
	top: 0;
	-webkit-mask-image: radial-gradient(circle at 100% 0, #000 0, transparent 70%);
	mask-image: radial-gradient(circle at 100% 0, #000 0, transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
	.pc-blocs > section:is(.pc-section--blanc, .pc-section--creme, .pc-cartes, .pc-col--blanc, .pc-col--transparent, .pc-faq-bloc, .pc-galerie, .pc-temo--clair, .pc-formations, .pc-contact, .pc-chiffres--encart)::after { animation: none; }
}

/* Section sombre de l'accueil : coin haut gauche de la photo coupé en biais, souligné de rouge et d'acier
   (la sphère occupe le coin bas droit). */
.pc-tetapes__media::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	width: clamp(80px, 30%, 200px);
	aspect-ratio: 1;
	background: linear-gradient(to bottom right, #0A0A0A 0 34%, #d7141a 34% 40%, transparent 40% 43%, #f4f5f6 43%, #a7aaae 47%, #eef0f1 50%, #7c7f83 53%, transparent 53%);
	pointer-events: none;
}

/* ---------- Slogan « des formations sur-mesure pour une vie + sûre » ---------- */

/* Pied de page (toutes les pages) : le slogan signe la colonne du logo. */
.pc-footer__id::after {
	content: "";
	display: block;
	width: clamp(170px, 16vw, 230px);
	aspect-ratio: 924 / 443;
	margin-top: 26px;
	background: var(--pc-slogan) left center / contain no-repeat;
}

/* ---------- Mascotte (le poulpe) ---------- */

@keyframes pc-mascotte {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	50% { translate: 0 -10px; rotate: -3deg; }
}

/* Contact : la mascotte s'accroche au coin de l'encart « Bon à savoir ». */
.pc-contact__bons { position: relative; }
.pc-contact__bons::after {
	content: "";
	position: absolute;
	right: -34px;
	bottom: -58px;
	width: clamp(120px, 10vw, 160px);
	aspect-ratio: 640 / 451;
	background: var(--pc-mascotte) center / contain no-repeat;
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.18));
	transform-origin: 50% 90%;
	animation: pc-mascotte 5s ease-in-out infinite;
	pointer-events: none;
}
@media (max-width: 900px) {
	.pc-contact__bons { margin-bottom: 56px; }
	.pc-contact__bons::after { right: 8px; }
}

/* Page introuvable : la mascotte accueille le visiteur au-dessus de la recherche. */
.error404 .pc-blog::before {
	content: "";
	display: block;
	width: clamp(150px, 18vw, 230px);
	aspect-ratio: 640 / 451;
	margin: 0 auto 28px;
	background: var(--pc-mascotte) center / contain no-repeat;
	transform-origin: 50% 90%;
	animation: pc-mascotte 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.pc-contact__bons::after,
	.error404 .pc-blog::before { animation: none; }
}