/* Texte et image - dubost-concept/texte-image */

.dc-texte-image__grille {
	display: grid;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.dc-texte-image__titre {
	font-size: clamp(1.4rem, 2.15vw, 2.05rem);
	line-height: 1;
}

.dc-texte-image__corps {
	max-width: 34rem;
	margin-top: 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.dc-texte-image__points {
	margin-top: 2rem;
}

.dc-texte-image__photo {
	order: -1;
	aspect-ratio: 4 / 5;
}

.dc-texte-image--paysage .dc-texte-image__photo {
	aspect-ratio: 4 / 3;
}

.dc-texte-image__photo .bc-attente {
	min-height: 0;
}

/* Sur un fond voile, la surface d'attente se détache sur du blanc. */
.dc-fond--voile .dc-texte-image__photo {
	background: var(--dc-blanc);
}

/* Sur téléphone et tablette, la photo passe au-dessus du texte, en paysage. */
@media (max-width: 899.98px) {
	.dc-texte-image__photo,
	.dc-texte-image--paysage .dc-texte-image__photo {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 599.98px) {
	.dc-texte-image__photo {
		border-radius: var(--dc-rayon-s);
	}
}

@media (min-width: 900px) {
	.dc-texte-image__grille {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: clamp(1rem, 2.2vw, 2rem);
	}

	/* La photo sur six colonnes, le texte sur cinq, une colonne d'air entre. */
	.dc-texte-image__photo {
		order: 0;
		grid-row: 1;
	}

	.dc-texte-image--droite .dc-texte-image__texte {
		grid-column: 1 / span 5;
	}

	.dc-texte-image--droite .dc-texte-image__photo {
		grid-column: 7 / -1;
	}

	.dc-texte-image--gauche .dc-texte-image__photo {
		grid-column: 1 / span 6;
	}

	.dc-texte-image--gauche .dc-texte-image__texte {
		grid-column: 8 / -1;
		grid-row: 1;
	}

	/* En paysage, la photo garde de la hauteur à côté d'un long texte. */
	.dc-texte-image--paysage .dc-texte-image__photo {
		align-self: stretch;
		min-height: 26rem;
		aspect-ratio: auto;
	}
}