/* ==========================================================================
   Retouches de mise en page, chargées en dernier (voir inc/titres.php).
   ========================================================================== */

/* Section sombre « Des formations sur mesure » de l'accueil : pas de sphère (ni derrière la photo, ni à côté
   du titre). */
.pc-tetapes .pc-tetapes__texte:has(> .pc-tetapes__media:last-child)::after { content: none; }

/* Contact : plus de mascotte accrochée à l'encart « Bon à savoir » (elle reste sur la page introuvable). */
.pc-contact__bons::after { content: none; }
.pc-contact__bons { margin-bottom: 0; }

/* Nos formations : pas de ligne rouge qui se remplit sous le bandeau d'étapes (01, 02, 03). */
.page-id-45 .pc-etapes::after { content: none; }

/* Vos besoins : « Votre secteur n'apparaît pas ? » (3e bloc) devient un bandeau compact : moins de hauteur,
   le titre à gauche, le texte et les boutons à droite sur la même ligne. */
.page-id-43 .pc-blocs > .pc-section:nth-child(3) .pc-section__grille { padding-top: 64px; padding-bottom: 64px; row-gap: 20px; align-items: center; }
@media (min-width: 900px) {
	.page-id-43 .pc-blocs > .pc-section:nth-child(3) .pc-section__tete { grid-column: 1; grid-row: 1; }
	.page-id-43 .pc-blocs > .pc-section:nth-child(3) .pc-section__corps { grid-column: 2; grid-row: 1; }
}

/* Audit et conseils : la section « Planifions votre audit » (7e bloc) passe sur le rouge pâle du site
   (celui des pastilles des fiches formation), pour qu'elle ressorte entre les sections blanches. */
.page-id-57 .pc-blocs > .pc-section:nth-child(7) { background-color: #FDE8E8; }

/* ---------- Listes d'étapes des sections claires (sans photo, 5 étapes ou plus) ---------- */
/* Numéros dans des pastilles rouges brillantes, comme la sphère du logo ; grande sphère du logo en
   filigrane derrière les étapes, qui tourne très lentement. (Audit et conseils, Certifications et qualité…) */

@keyframes pc-tourne { to { rotate: 360deg; } }

.pc-section:not(.pc-section--sombre):not(:has(.pc-section__media)):has(.pc-section__liste > li:nth-child(5)) .pc-section__n {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #ff6b6e 0, #d7141a 48%, #7a0408 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 6px 14px rgba(215, 20, 26, 0.28);
}
.pc-section:not(.pc-section--sombre):not(:has(.pc-section__media)):has(.pc-section__liste > li:nth-child(5)) .pc-section__item { align-items: center; }
.pc-section:not(.pc-section--sombre):not(:has(.pc-section__media)):has(.pc-section__liste > li:nth-child(5)) .pc-section__liste { position: relative; isolation: isolate; }
.pc-section:not(.pc-section--sombre):not(:has(.pc-section__media)):has(.pc-section__liste > li:nth-child(5)) .pc-section__liste::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: min(640px, 90%);
	aspect-ratio: 1;
	translate: -50% -50%;
	background: var(--pc-sphere) center / contain no-repeat;
	opacity: 0.09;
	animation: pc-tourne 90s linear infinite;
	pointer-events: none;
}
/* Grandes listes (9 étapes) : sur deux colonnes. */
@media (min-width: 900px) {
	.pc-section:not(.pc-section--sombre):not(:has(.pc-section__media)) .pc-section__liste:has(> li:nth-child(9)) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(5, auto);
		grid-auto-flow: column;
		column-gap: clamp(40px, 5vw, 96px);
	}
}
/* Audit et conseils, « Processus de solutions de formations » (5e bloc) : la petite sphère du bord est retirée. */
.page-id-57 .pc-blocs > section:nth-child(5)::before { content: none; }

/* ---------- Audit et conseils, « Audit spécifique » (6e bloc) : les étapes gravitent autour de la sphère ---------- */
/* Sur grand écran, la sphère du logo (légèrement transparente) occupe le centre, entourée d'une orbite ronde en
   pointillés rouges qui l'épouse. Les 9 étapes ont leur pastille posée sur l'orbite, le texte vers l'extérieur.
   Au défilement, la sphère reste à l'écran (épinglée) le temps que les étapes en sortent une à une pour prendre
   leur place ; une fois les 9 en place, la page reprend son défilement normal. (Navigateurs qui gèrent les
   animations liées au défilement ; sinon les étapes sont simplement affichées, toujours épinglées.) */
/* Le « :is(.pc-section, #pc-orbite) » donne à ces règles le poids d'un identifiant : elles passent devant les
   règles générales des listes d'étapes ci-dessus, plus lourdes. */
@media (min-width: 1100px) {
	/* « clip » et non « hidden » : la section ne doit pas devenir un conteneur de défilement, sinon
	   l'épinglage et l'animation liée au défilement ne fonctionnent pas. */
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) { overflow: clip; }
	/* Le bloc de texte est allongé : c'est la course pendant laquelle la sphère reste épinglée. */
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__corps {
		height: 2000px;
		view-timeline-name: --pc-orbite;
	}
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__liste {
		display: block;
		position: sticky;
		top: max(90px, calc(50vh - 380px));
		height: 820px;
		margin-top: 30px;
	}
	/* Écrans peu hauts : l'ensemble est réduit pour tenir entièrement à l'écran pendant l'épinglage. */
	@media (max-height: 900px) {
		.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__liste { zoom: 0.82; }
	}
	@media (max-height: 760px) {
		.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__liste { zoom: 0.72; }
	}
	/* La sphère, moins transparente que le filigrane des autres listes. */
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__liste::before {
		top: 410px;
		width: 470px;
		opacity: 0.42;
		animation: pc-tourne 120s linear infinite;
	}
	/* L'orbite : un cercle qui épouse la sphère. */
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__liste::after {
		content: "";
		position: absolute;
		z-index: -1;
		left: calc(50% - 280px);
		top: 130px;
		width: 560px;
		height: 560px;
		border: 2px dashed rgba(215, 20, 26, 0.35);
		border-radius: 50%;
		pointer-events: none;
	}
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item {
		--tx: -20px;
		--ty: -50%;
		position: absolute;
		left: calc(50% + var(--x));
		top: calc(410px + var(--y));
		width: 270px;
		translate: var(--tx) var(--ty);
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 0;
		border: 0;
		text-align: left;
		background: none;
	}
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item::before,
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item::after { display: none; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__n { flex-shrink: 0; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__it { font-size: 15px; line-height: 1.5; }
	/* Étapes de gauche : texte à gauche de la pastille. */
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(n+6) { --tx: calc(-100% + 20px); flex-direction: row-reverse; text-align: right; }
	/* Première étape, en haut : texte au-dessus de la pastille. */
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(1) { --tx: -50%; --ty: calc(-100% + 20px); width: 300px; flex-direction: column-reverse; gap: 10px; text-align: center; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(1) { --x: 0px; --y: -280px; --i: 0; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(2) { --x: 180px; --y: -214px; --i: 1; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(3) { --x: 276px; --y: -49px; --i: 2; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(4) { --x: 242px; --y: 140px; --i: 3; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(5) { --x: 96px; --y: 263px; --i: 4; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(6) { --x: -96px; --y: 263px; --i: 5; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(7) { --x: -242px; --y: 140px; --i: 6; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(8) { --x: -276px; --y: -49px; --i: 7; }
	.page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item:nth-child(9) { --x: -180px; --y: -214px; --i: 8; }

	/* Au défilement, pendant l'épinglage : chaque étape part du centre de la sphère et rejoint sa place. */
	@keyframes pc-orbite-entree {
		from { opacity: 0; translate: calc(var(--tx) - var(--x)) calc(var(--ty) - var(--y)); scale: 0.3; }
		to { opacity: 1; translate: var(--tx) var(--ty); scale: 1; }
	}
	@supports (animation-timeline: view()) {
		.pc-anim .page-id-57 .pc-blocs > .pc-section:nth-child(6):is(.pc-section, #pc-orbite) .pc-section__item {
			animation: pc-orbite-entree linear both;
			animation-timeline: --pc-orbite;
			animation-range: contain calc(4% + var(--i) * 9%) contain calc(14% + var(--i) * 9%);
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	.pc-section .pc-section__liste::before { animation: none; }
}