/* ==========================================================================
   Photos des sections : forme découpée, au bout de la section (une fois par page au plus).
   Chargée après decor.css (voir inc/titres.php). En fin de fichier : les triangles (accueil seulement).

   Sur grand écran, une photo placée à côté du texte dans une section claire (blanche ou crème) occupe tout
   le bout de la section : toute la hauteur, jusqu'au bord de l'écran. Son côté tourné vers le texte suit
   l'une des découpes de la charte (fichiers Vector 1, 2 et 3), soulignée d'un filet rouge.
   Seuls les 5e, 6e et 8e blocs de la page sont concernés, hors sections sombres et hors sections « empilées »
   (dont la colonne photo porte aussi du contenu) : sur les pages actuelles, cela fait une photo au plus.
   Les autres photos gardent leur cadre arrondi. En dessous de 1000 px, rien ne change.
   ========================================================================== */

@media (min-width: 1000px) {
	.pc-blocs > :is(.pc-section--img-droite, .pc-section--img-gauche):not(.pc-section--pile, .pc-section--sombre):is(:nth-child(5), :nth-child(6), :nth-child(8)) .pc-section__media--cote {
		position: absolute;
		grid-area: auto; /* sinon la zone de grille sert de repère : le repère doit être toute la grille */
		top: 0;
		bottom: 0;
		width: auto;
		height: auto;
		margin: 0;
		border-radius: 0;
		background: linear-gradient(to bottom, #ff3b40, #d7141a 50%, #7a0408);
		clip-path: var(--pc-forme);
	}
	.pc-blocs > :is(.pc-section--img-droite, .pc-section--img-gauche):not(.pc-section--pile, .pc-section--sombre):is(:nth-child(5), :nth-child(6), :nth-child(8)) .pc-section__media--cote .pc-section__img { clip-path: var(--pc-forme-img); }
	/* La photo sort de la grille : le texte reste dans sa colonne (sinon il glisserait sous la photo). */
	.pc-blocs > :is(.pc-section--img-droite, .pc-section--img-gauche):not(.pc-section--pile, .pc-section--sombre):is(:nth-child(5), :nth-child(6), :nth-child(8)) .pc-section__corps { grid-column: tete; }
	.pc-blocs > .pc-section--img-droite:not(.pc-section--pile, .pc-section--sombre):is(:nth-child(5), :nth-child(6), :nth-child(8)) .pc-section__media--cote { left: 50%; right: calc(-1 * max(0px, (100vw - 1240px) / 2)); }
	.pc-blocs > .pc-section--img-gauche:not(.pc-section--pile, .pc-section--sombre):is(:nth-child(5), :nth-child(6), :nth-child(8)) .pc-section__media--cote { right: 50%; left: calc(-1 * max(0px, (100vw - 1240px) / 2)); }

	/* 5e bloc : grande pointe ; 6e : encoches en escalier ; 8e : double pointe en éclair. */
	.pc-blocs > .pc-section--img-droite:nth-child(5) { --pc-forme: polygon(63.18% 0%, 100% 0%, 100% 100%, 47.02% 100%, 0% 59.29%); --pc-forme-img: polygon(64.38% 0%, 100% 0%, 100% 100%, 48.22% 100%, 1.2% 59.29%); }
	.pc-blocs > .pc-section--img-gauche:nth-child(5) { --pc-forme: polygon(36.82% 0%, 0% 0%, 0% 100%, 52.98% 100%, 100% 59.29%); --pc-forme-img: polygon(35.62% 0%, 0% 0%, 0% 100%, 51.78% 100%, 98.8% 59.29%); }
	.pc-blocs > .pc-section--img-droite:nth-child(6) { --pc-forme: polygon(100% 100%, 100% 0%, 15.58% 0%, 15.58% 10.09%, 28.77% 30.03%, 0% 56.7%, 21.89% 100%); --pc-forme-img: polygon(100% 100%, 100% 0%, 16.6% 0%, 16.6% 10.09%, 29.79% 30.03%, 1.02% 56.7%, 22.91% 100%); }
	.pc-blocs > .pc-section--img-gauche:nth-child(6) { --pc-forme: polygon(0% 100%, 0% 0%, 84.42% 0%, 84.42% 10.09%, 71.23% 30.03%, 100% 56.7%, 78.11% 100%); --pc-forme-img: polygon(0% 100%, 0% 0%, 83.4% 0%, 83.4% 10.09%, 70.21% 30.03%, 98.98% 56.7%, 77.09% 100%); }
	.pc-blocs > .pc-section--img-droite:nth-child(8) { --pc-forme: polygon(100% 0%, 24.66% 0%, 0% 37.84%, 33.09% 37.84%, 4.87% 76.43%, 24.66% 100%, 100% 100%); --pc-forme-img: polygon(100% 0%, 25.86% 0%, 1.2% 37.84%, 34.29% 37.84%, 6.07% 76.43%, 25.86% 100%, 100% 100%); }
	.pc-blocs > .pc-section--img-gauche:nth-child(8) { --pc-forme: polygon(0% 0%, 75.34% 0%, 100% 37.84%, 66.91% 37.84%, 95.13% 76.43%, 75.34% 100%, 0% 100%); --pc-forme-img: polygon(0% 0%, 74.14% 0%, 98.8% 37.84%, 65.71% 37.84%, 93.93% 76.43%, 74.14% 100%, 0% 100%); }
}

/* ==========================================================================
   Triangles acier et rouge : seulement sur l'accueil, deux en tout, petits, qui se baladent lentement.
   Partout ailleurs, les touches de decor.css sur les 4e, 6e, 7e, 8e et 11e blocs (duo de triangles, trame de
   points) sont retirées. Sélecteurs de même poids que ceux de decor.css : ceux-ci passent devant.
   ========================================================================== */
.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(6), :nth-child(7), :nth-child(8), :nth-child(11))::after { content: none; }

@keyframes pc-tri-balade {
	0%, 100% { translate: 0 0; rotate: var(--r, 0deg); }
	20% { translate: -110px 40px; rotate: calc(var(--r, 0deg) + 25deg); }
	45% { translate: -60px -50px; rotate: calc(var(--r, 0deg) - 15deg); }
	70% { translate: 50px 30px; rotate: calc(var(--r, 0deg) + 40deg); }
	85% { translate: 20px -40px; rotate: calc(var(--r, 0deg) + 10deg); }
}
.page-id-42 .pc-blocs > section:is(.pc-cartes):is(:nth-child(4), :nth-child(8))::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto;
	width: clamp(56px, 5vw, 90px);
	aspect-ratio: 100 / 88;
	rotate: var(--r, 0deg);
	-webkit-mask-image: none;
	mask-image: none;
	filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.16));
	pointer-events: none;
}
/* Vos clients (4e bloc) : petit triangle rouge, en haut à droite, qui se balade. */
.page-id-42 .pc-blocs > section:is(.pc-cartes):nth-child(4)::after {
	--r: 12deg;
	top: clamp(60px, 10%, 120px);
	right: clamp(40px, 8vw, 180px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88'%3E%3Cdefs%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='1,1 99,1 50,87' fill='url%28%23b%29'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: pc-tri-balade 28s ease-in-out infinite;
}
/* Cas clients (8e bloc) : petit triangle acier, en bas à gauche, qui se balade à son rythme. */
.page-id-42 .pc-blocs > section:is(.pc-cartes):nth-child(8)::after {
	--r: -10deg;
	bottom: clamp(50px, 10%, 120px);
	left: clamp(40px, 7vw, 160px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88'%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%3C/defs%3E%3Cpolygon points='1,87 50,1 99,87' fill='url%28%23a%29'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: pc-tri-balade 34s ease-in-out -12s infinite reverse;
}
@media (prefers-reduced-motion: reduce) {
	.page-id-42 .pc-blocs > section:is(.pc-cartes):is(:nth-child(4), :nth-child(8))::after { animation: none; }
}