/**
 * Bloc ACF « Collage & texte (CTA) » (front + éditeur).
 */

.ctx-section {
	--ctx-green: var(--ppe-green, #00430f);
	--ctx-orange: var(--ppe-orange, #e85c22);
	--ctx-grey: var(--ppe-grey, #696969);
	color: var(--ctx-grey);
	font-size: 1rem;
	line-height: 1.6;
	box-sizing: border-box;
	padding-block: clamp(2.25rem, 5vw, 3.75rem);
	background: #fff;
}

.ctx-section *,
.ctx-section *::before,
.ctx-section *::after {
	box-sizing: inherit;
}

.ctx-col--content {
	padding-top: clamp(0.5rem, 2vw, 1rem);
}

@media print, screen and (min-width: 64em) {
	.ctx-col--content {
		padding-left: clamp(1rem, 3vw, 2.25rem);
		padding-top: 0;
	}
}

/* Collage décalé */
.ctx-collage-wrap {
	position: relative;
	margin-inline: auto;
	max-width: 34rem;
}

@media print, screen and (min-width: 64em) {
	.ctx-collage-wrap {
		max-width: none;
		margin-inline: 0 auto;
		min-height: clamp(22rem, 38vw, 30rem);
	}
}

.ctx-collage {
	position: relative;
	min-height: clamp(18rem, 58vw, 26rem);
}

@media print, screen and (min-width: 64em) {
	.ctx-collage {
		min-height: clamp(22rem, 38vw, 30rem);
	}
}

/* Points décoratifs derrière la grande image */
.ctx-collage__dots {
	position: absolute;
	top: -1.65rem;
	right: 0;
	width: 9rem;
	height: 9rem;
	z-index: 0;
	opacity: 0.20;
	pointer-events: none;
	background-image: radial-gradient(circle at center, color-mix(in srgb, var(--ppe-orange) 72%, transparent) 1.5px, transparent 1.5px);
	background-size: 9px 9px;
	border-radius: 2px;
}

.ctx-collage__photo {
	position: absolute;
	margin: 0;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(0, 67, 15, 0.12);
	z-index: 1;
	background: #f4f4f4;
}

.ctx-collage__img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.ctx-collage__photo--1 {
	top: 0;
	right: 2%;
	width: min(74%, 20rem);
	z-index: 2;
}

.ctx-collage__photo--2 {
	top: 36%;
	left: 0;
	width: min(48%, 13.5rem);
	z-index: 4;
}

.ctx-collage__photo--3 {
	bottom: -2%;
	right: 14%;
	width: min(56%, 16rem);
	z-index: 3;
}

@media print, screen and (min-width: 64em) {

	.ctx-collage__photo--1 {
		width: 60%;
		right: 5%;
	}

	.ctx-collage__photo--2 {
		width: 44%;
		top: 34%;
	}

	.ctx-collage__photo--3 {
		width: 52%;
		right: 8%;
		bottom: 0;
	}
}

@media screen and (max-width: 63.99875em) {
	.ctx-collage {
		margin-bottom: 80px;
	}
}

/* Mobile : collage en quinconce (effet superpositions maîtrisé) */
@media screen and (max-width: 39.99875em) {
	.ctx-collage-wrap {
		margin-bottom: clamp(1.5rem, 4vw, 2rem);
		padding-inline: clamp(0.15rem, 1.5vw, 0.35rem);
		max-width: min(100%, 22.5rem);
	}

	.ctx-collage {
		min-height: 0;
		padding-bottom: 0.35rem;
		margin-bottom: 1.5rem;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.ctx-collage__dots {
		right: -0.25rem;
		left: auto;
		top: -0.75rem;
		width: 6.5rem;
		height: 6.5rem;
		opacity: 0.16;
	}

	.ctx-collage__photo {
		position: relative;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		border-radius: 6px;
		box-shadow:
			0 2px 4px rgba(0, 67, 15, 0.05),
			0 14px 32px -8px rgba(0, 67, 15, 0.18);
	}

	/* Image principale : pleine largeur de la zone collage */
	.ctx-collage__photo--1 {
		z-index: 1;
		width: 100% !important;
		margin: 0 0 clamp(-2.35rem, -9vw, -1.6rem) -25%;
	}

	/* Photo intermédiaire : resserrée à droite, au-dessus de la 1 */
	.ctx-collage__photo--2 {
		z-index: 2;
		align-self: flex-end;
		width: min(82%, 16.25rem) !important;
		margin: -57% 0 clamp(-2rem, -7vw, -1.35rem);
	}

	/* Photo bas : ancrée à gauche, au-dessus de la 2 */
	.ctx-collage__photo--3 {
		z-index: 3;
		align-self: flex-start;
		width: min(50%, 18.5rem) !important;
		margin: -16% 0 0 0;
	}
}

/* Colonne texte */
.ctx-title {
	font-family: "futura-pt", sans-serif;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 400;
	color: var(--ctx-green);
	line-height: 1.25;
	margin: 0 0 1.1rem;
	letter-spacing: -0.02em;
}

.ctx-body {
	margin-bottom: 1.35rem;
	font-size: 16px;
}

.ctx-body p {
	margin: 0 0 1em;
}

.ctx-body p:last-child {
	margin-bottom: 0;
}

.ctx-cta-wrap {
	margin: 0;
}

.ctx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.55rem 1.65rem;
	background: var(--ctx-orange);
	color: #fff !important;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border-radius: 2px;
	transition: background 0.2s ease, transform 0.15s ease;
	box-shadow: 0 4px 14px rgba(232, 92, 34, 0.28);
}

.ctx-btn:hover,
.ctx-btn:focus-visible {
	background: var(--ppe-orange-dark, #cf4b14);
	color: #fff;
	text-decoration: none;
}

.ctx-btn:focus-visible {
	outline: 2px solid var(--ctx-green);
	outline-offset: 2px;
}

.block-editor-block-list__layout .ctx-section .dgsc-acf-block-inner {
	max-width: none;
}

/* Maquette Bilger : texte a gauche, photo a droite */
@media print, screen and (min-width: 64em) {
	.ctx-section .ctx-col--media { order: 2; }
	.ctx-section .ctx-col--content { order: 1; }
}

/* Maquette Bilger : ombre marine sur le bouton */
.ctx-btn, .ctx-btn:hover, .ctx-btn:focus {
	box-shadow: 0 6px 18px rgba(27, 40, 118, 0.28);
}

/* == Tokens Bilger : typo/couleurs + chevron CTA == */
.ctx-section .ctx-title {
	font-family: var(--dgs-font-titres);
	font-size: var(--dgs-fs-col);
	color: var(--dgs-c-titre);
	line-height: 1.3;
}
.ctx-section .ctx-body {
	font-family: var(--dgs-font-texte);
	font-size: var(--dgs-fs-texte-sm);
	color: var(--dgs-c-texte);
}
.ctx-section .ctx-btn::after {
	content: "\203A";
	margin-left: 12px;
	font-size: 1.2em;
	line-height: 1;
	transform: translateY(-1px);
}

/* Fix Bilger : neutralise la marge verticale globale des images (.entry-content img
   { margin:1.5em auto }) à l'intérieur du collage. Sans cela, le conteneur figure
   dépasse l'image en haut/bas et son ombre + fond gris forment une bande visible.
   L'image remplit ainsi exactement son conteneur (l'ombre épouse la photo). */
.ctx-collage__photo .ctx-collage__img {
	margin: 0 !important;
}


/* Variante « image a gauche » (alternance sur les pages piliers).
   Ajouter la classe CSS "ctx-section--media-left" au bloc pour inverser. */
@media print, screen and (min-width: 64em) {
	.ctx-section--media-left .ctx-col--media { order: 1; }
	.ctx-section--media-left .ctx-col--content {
		order: 2;
		padding-left: 0;
		padding-right: clamp(1rem, 3vw, 2.25rem);
	}
}


/* Encarts uniformes pleine largeur (pages piliers) : classe "ctx-section--tile".
   - occupe toute la largeur de .entry-content (retire le plafond 1200px de l'inner) ;
   - largeur ET hauteur d'image identiques partout : les conteneurs intermediaires
     (wrap / collage) sont repasses en display:block sinon, etant des flex items,
     ils se dimensionnent sur l'image et la largeur varie d'un bloc a l'autre ;
   - prefixe "html" pour battre les regles !important du style.css compile. */
html .ctx-section--tile .dgsc-acf-block-inner { max-width: none; }

html .ctx-section--tile .ctx-collage-wrap,
html .ctx-section--tile .ctx-collage {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

html .ctx-section--tile .ctx-collage__photo,
html .ctx-section--tile .ctx-collage__photo--1,
html .ctx-section--tile .ctx-collage__photo--2,
html .ctx-section--tile .ctx-collage__photo--3 {
	position: static !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	aspect-ratio: 3 / 2;
}

html .ctx-section--tile .ctx-collage__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	margin: 0 !important;
}

/* Fond gris clair optionnel (piloté par la case ACF « Fond gris clair »)
   pour démarquer visuellement un encart. */
.ctx-section.ctx-section--bg { background: #f4f5f4; }


/* Variante « document à télécharger » : classe "ctx-section--download".
   Le bouton porte une flèche de téléchargement à la place du chevron, et le
   titre est précédé d'une pastille qui annonce le type de document. */
html .ctx-section--download .ctx-title::before {
	content: "Fiche produit PDF";
	display: block;
	width: max-content;
	max-width: 100%;
	margin-bottom: 0.85rem;
	padding: 0.3em 0.85em;
	border-radius: 999px;
	background: rgba(27, 40, 118, 0.07);
	color: var(--dgs-c-titre, #1b2876);
	font-family: var(--dgs-font-texte);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.4;
	text-transform: uppercase;
}

html .ctx-section--download .ctx-btn::after {
	content: "";
	width: 0.95em;
	height: 0.95em;
	margin-left: 12px;
	transform: translateY(1px);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.17l3.59-3.58L17 11l-5 5-5-5 1.41-1.41L12 13.17V3h0zM5 19h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.17l3.59-3.58L17 11l-5 5-5-5 1.41-1.41L12 13.17V3h0zM5 19h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* L'aperçu du document se lit mieux en entier : pas de recadrage agressif. */
html .ctx-section--download .ctx-collage__img {
	object-fit: contain;
	background: #f7f8fb;
}