/* widget-pebbles.css — DP Galets (image + texte) */

.dp-pb {
	/* Variables locales (override Elementor) → fallback charte */
	--dp-pb-title: var(--dp-color-text, #3c3c3b);
	--dp-pb-text: var(--dp-color-text-muted, #6b7280);

	/* Mise en page */
	--dp-pb-img-size: 320px;
	--dp-pb-row-gap: 64px;
	--dp-pb-col-gap: 48px;

	/* Effet teinte */
	--dp-pb-blend: multiply;
	--dp-pb-overlay-opacity: 0.85;
	--dp-pb-img-filter: none;

	display: flex;
	flex-direction: column;
	gap: var(--dp-pb-row-gap);
	font-family: var(--dp-font-base, inherit);
}

/* ── Ligne ──────────────────────────────────────────────────────────── */

.dp-pb__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	column-gap: var(--dp-pb-col-gap);
	row-gap: 24px;
}

/* Image à droite (desktop) : on inverse l'ordre des colonnes. */
.dp-pb__row--right .dp-pb__media {
	order: 2;
}

.dp-pb__row--right .dp-pb__content {
	order: 1;
}

/* ── Média / galet ──────────────────────────────────────────────────── */

.dp-pb__media {
	display: flex;
	justify-content: center;
}

/* Alignement de l'image dans sa colonne — s'inverse selon le côté de l'image. */
.dp-pb-ia-center .dp-pb__media {
	justify-content: center;
}

.dp-pb-ia-outer .dp-pb__row--left .dp-pb__media,
.dp-pb-ia-inner .dp-pb__row--right .dp-pb__media {
	justify-content: flex-start;
}

.dp-pb-ia-outer .dp-pb__row--right .dp-pb__media,
.dp-pb-ia-inner .dp-pb__row--left .dp-pb__media {
	justify-content: flex-end;
}

.dp-pb__shape {
	position: relative;
	width: var(--dp-pb-img-size);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: transparent;
}

.dp-pb__shape img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Teinte (effet duotone) — n'apparaît que si une couleur est définie. */
.dp-pb__shape.is-tinted img {
	filter: var(--dp-pb-img-filter);
}

.dp-pb__shape.is-tinted::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--dp-pb-tint, transparent);
	mix-blend-mode: var(--dp-pb-blend);
	opacity: var(--dp-pb-overlay-opacity);
	pointer-events: none;
}

/* ── Formes de galets (décoratives → arrondis figés, cf. charte §3c) ─── */

.dp-pb__shape--blob1 {
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
}

.dp-pb__shape--blob2 {
	border-radius: 63% 37% 30% 70% / 50% 48% 52% 50%;
}

.dp-pb__shape--blob3 {
	border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
}

.dp-pb__shape--blob4 {
	border-radius: 50% 50% 33% 67% / 55% 38% 62% 45%;
}

.dp-pb__shape--circle {
	border-radius: 50%;
}

/* Forme d'origine : photo rectangulaire, ratio naturel conservé, léger arrondi. */
.dp-pb__shape--none {
	aspect-ratio: auto;
	border-radius: var(--dp-pb-shape-radius, var(--dp-radius-lg, 16px));
}

.dp-pb__shape--none img {
	height: auto;
	object-fit: contain;
}

/* ── Contenu ────────────────────────────────────────────────────────── */

.dp-pb__content {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dp-pb__title {
	margin: 0;
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: var(--dp-font-heading-weight, 700);
	line-height: 1.2;
	color: var(--dp-pb-title);
	font-family: var(--dp-font-heading, inherit);
}

.dp-pb__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--dp-pb-text);
}

.dp-pb__text p {
	margin: 0 0 1em;
}

.dp-pb__text p:last-child {
	margin-bottom: 0;
}

/* ── Mobile : image TOUJOURS au-dessus du texte, quel que soit le desktop ── */

@media (max-width: 767px) {
	.dp-pb__row,
	.dp-pb__row--right {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.dp-pb__row .dp-pb__media,
	.dp-pb__row--right .dp-pb__media {
		order: 0 !important;
		width: 100%;
		justify-content: center !important;
	}

	.dp-pb__row .dp-pb__content,
	.dp-pb__row--right .dp-pb__content {
		order: 1 !important;
		width: 100%;
	}
}