/* =========================================================
   EEP – À Propos (mosaïque) — Version: 1.2.0
   Le sur-titre, le titre et le texte portent aussi les classes du thème
   (pxl-item--subtitle / --title / --subtext) quand l'héritage est activé :
   dans ce cas le plugin n'impose ni taille ni graisse, la typographie du
   site s'applique. Sinon, les valeurs ci-dessous font foi.
   Texte enrichi + mosaïque d'images décalée + pastille chiffrée
   Palette Landscop : vert anis #97b545 · vert foncé #0f3714
   ========================================================= */

.eep-ab [hidden] { display: none !important; }

.eep-ab {
	--eep-primary: #97b545;
	--eep-dark: #0f3714;
	--eep-texte: #5b6b5d;
	--eep-badge-c1: #0f3714;
	--eep-badge-c2: #2f6b2f;

	--eep-col: 42%;
	--eep-col-gap: 50px;
	--eep-pad-x: 0px;
	--eep-img-gap: 18px;
	--eep-img-radius: 18px;
	--eep-decal: 60px;
	--eep-badge: 180px;
	--eep-leaf: 30px;

	display: grid;
	grid-template-columns: var(--eep-col) minmax(0, 1fr);
	gap: var(--eep-col-gap);
	align-items: center;
	padding-left: var(--eep-pad-x);
	padding-right: var(--eep-pad-x);
	max-width: 100%;
}

.eep-ab *,
.eep-ab *::before,
.eep-ab *::after { box-sizing: border-box; }

/* Ordre par défaut : texte puis mosaïque */
.eep-ab__texte-col { order: 1; }
.eep-ab__media { order: 2; }

/* Colonnes inversées : la mosaïque passe à gauche */
.eep-ab--inverse { grid-template-columns: minmax(0, 1fr) var(--eep-col); }
.eep-ab--inverse .eep-ab__texte-col { order: 2; }
.eep-ab--inverse .eep-ab__media { order: 1; }

/* ---------------------------------------------------------
   COLONNE TEXTE
   --------------------------------------------------------- */
.eep-ab__texte-col { min-width: 0; }

.eep-ab__leaf {
	display: block;
	width: var(--eep-leaf);
	height: var(--eep-leaf);
	color: var(--eep-primary);
	margin: 0 0 16px 0;
}

/* Contre les thèmes qui imposent svg { height: auto } */
.eep-ab__leaf svg,
.eep-ab__leaf img,
.eep-ab__leaf i {
	width: 100%;
	max-width: 100%;
	height: 100% !important;
	object-fit: contain;
	font-size: calc(var(--eep-leaf) * .9);
	line-height: 1 !important;
	display: block;
}

.eep-ab__leaf svg { fill: currentColor; }

.eep-ab__eyebrow {
	text-transform: none;
	color: var(--eep-dark);
	margin: 0 0 16px 0;
}

.eep-ab:not(.eep-ab--herite) .eep-ab__eyebrow {
	font-family: 'Dancing Script', 'Brush Script MT', cursive;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.eep-ab__eyebrow.is-badge {
	display: inline-block;
	background-color: #eef1e8;
	border-radius: 60px;
	padding: 8px 28px;
}

.eep-ab__eyebrow.is-simple { display: block; }

.eep-ab__titre {
	color: var(--eep-dark);
	text-transform: none;
	margin: 0 0 18px 0;
	overflow-wrap: break-word;
}

.eep-ab:not(.eep-ab--herite) .eep-ab__titre {
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.01em;
}

.eep-ab__hl { color: var(--eep-primary); }

.eep-ab__chapo {
	color: var(--eep-texte);
	text-align: center;
	margin: 0 0 20px 0;
}

.eep-ab:not(.eep-ab--herite) .eep-ab__chapo {
	font-size: 16px;
	line-height: 1.7;
}

.eep-ab__texte {
	color: var(--eep-texte);
}

.eep-ab:not(.eep-ab--herite) .eep-ab__texte {
	font-size: 16px;
	line-height: 1.75;
}

.eep-ab__texte p { margin: 0 0 18px 0; }
.eep-ab__texte p:last-child { margin-bottom: 0; }

.eep-ab__texte strong,
.eep-ab__texte b {
	color: var(--eep-dark);
	font-weight: 700;
}

/* ---------------------------------------------------------
   MOSAÏQUE
   --------------------------------------------------------- */
.eep-ab__media {
	position: relative;
	min-width: 0;
}

.eep-ab__mosaique {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--eep-img-gap);
	align-items: start;
}

.eep-ab__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Décalage vertical qui donne l'effet mosaïque */
.eep-ab__col--1 { margin-top: var(--eep-decal); }

.eep-ab__img + .eep-ab__img { margin-top: var(--eep-img-gap) !important; }

.eep-ab__img {
	position: relative;
	overflow: hidden;
	border-radius: var(--eep-img-radius);
	background-color: #eef1e8;
	margin: 0;
	padding: 0;
}

.eep-ab__img--courte  { aspect-ratio: 4 / 3; }
.eep-ab__img--moyenne { aspect-ratio: 1 / 1; }
.eep-ab__img--haute   { aspect-ratio: 3 / 4; }

.eep-ab__img img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.eep-ab--zoom .eep-ab__img:hover img { transform: scale(1.06); }

/* ---------------------------------------------------------
   PASTILLE CHIFFRÉE
   --------------------------------------------------------- */
.eep-ab__badge {
	position: absolute;
	z-index: 3;
	width: var(--eep-badge);
	height: var(--eep-badge);
	border-radius: 50%;
	border: 8px solid #ffffff;
	background-image: linear-gradient(150deg, var(--eep-badge-c1) 0%, var(--eep-badge-c2) 100%);
	background-color: var(--eep-badge-c1);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 10px;
	box-shadow: 0 18px 40px rgba(15, 55, 20, .28);
}

.eep-ab__badge--centre       { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.eep-ab__badge--haut-gauche  { top: 4%;  left: 4%; }
.eep-ab__badge--bas-gauche   { bottom: 4%; left: 4%; }
.eep-ab__badge--haut-droite  { top: 4%;  right: 4%; }
.eep-ab__badge--bas-droite   { bottom: 4%; right: 4%; }

.eep-ab__badge-num {
	font-size: calc(var(--eep-badge) * .3);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	display: block;
}

.eep-ab__badge-suf { font-size: .62em; }

.eep-ab__badge-label {
	display: block;
	margin-top: 6px;
	font-size: calc(var(--eep-badge) * .085);
	font-weight: 500;
	line-height: 1.3;
	opacity: .95;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1024px) {
	.eep-ab {
		grid-template-columns: 1fr;
		--eep-decal: 34px;
	}
	.eep-ab--inverse { grid-template-columns: 1fr; }

	/* Ordre une fois les colonnes empilées.
	   « suivre » ne pose aucune règle : l'ordre défini plus haut s'applique. */
	.eep-ab--mob-texte .eep-ab__texte-col { order: 1; }
	.eep-ab--mob-texte .eep-ab__media     { order: 2; }
	.eep-ab--mob-media .eep-ab__texte-col { order: 2; }
	.eep-ab--mob-media .eep-ab__media     { order: 1; }

	/* Le texte reprend de l'air quand la mosaïque passe au-dessus */
	.eep-ab--mob-media .eep-ab__texte-col,
	.eep-ab--inverse.eep-ab--mob-suivre .eep-ab__texte-col { margin-top: 8px; }

	.eep-ab__badge { --eep-badge: 150px; }
}

@media (max-width: 767px) {
	.eep-ab {
		--eep-img-gap: 12px;
		--eep-decal: 0px;
	}
	.eep-ab:not(.eep-ab--herite) .eep-ab__eyebrow { font-size: 25px; }
	.eep-ab__eyebrow.is-badge { padding: 6px 20px; }
	.eep-ab:not(.eep-ab--herite) .eep-ab__chapo,
	.eep-ab:not(.eep-ab--herite) .eep-ab__texte { font-size: 15px; }
	.eep-ab__badge {
		border-width: 6px;
		--eep-badge: 120px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eep-ab__img img { transition: none; }
	.eep-ab--zoom .eep-ab__img:hover img { transform: none; }
}