/*
 * Section « Problème / Solution ».
 * Fond crème, texte à gauche, visuel carré à droite à partir de 1000px.
 */

.probleme { background: var(--creme); padding: 56px 0; }

/* Une seule colonne par défaut ; le texte précède l'image dans le flux, donc rien à réordonner. */
.probleme__in { display: grid; gap: 32px; align-items: center; }

.probleme__titre { text-align: left; margin: 0 0 20px; }

.probleme__blocs { list-style: none; margin: 0; padding: 0; }

/* Filet clair entre les deux blocs seulement : pas de trait avant le premier ni après le dernier. */
.probleme__bloc { padding: 22px 0; }
.probleme__bloc + .probleme__bloc { border-top: 1px solid var(--ligne); }

.probleme__intitule {
	margin: 0 0 8px;
	font-size: 11px; font-weight: 700; line-height: 1.4;
	text-transform: uppercase; letter-spacing: .18em;
	color: var(--sauge);
}

.probleme__para { margin: 0; font-size: 15px; line-height: 1.75; color: var(--gris); }

.probleme__cta { margin-top: 18px; }
.probleme__cta:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; }

.probleme__media { margin: 0; }

/* Carré recadré : la hauteur suit le ratio, quelle que soit la taille native du fichier. */
.probleme__img {
	width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
	border-radius: var(--rayon-carte);
}

@media (min-width: 700px) {
	.probleme { padding: 80px 0; }
	.probleme__para { font-size: 16px; }
	.probleme__bloc { padding: 26px 0; }
}

@media (min-width: 1000px) {
	.probleme { padding: 110px 0; }
	.probleme__in { grid-template-columns: 1fr 1fr; gap: 70px; }
	/* Mesure bornée : au-delà, les lignes de titre deviennent trop longues à lire. */
	.probleme__titre { max-width: 13em; margin-bottom: 26px; }
}