/**
 * Responsive — ajustements propres aux composants du design system
 * --------------------------------------------------------------------
 * La majorité de la fluidité (typographie, espacements, marges de
 * conteneur) est déjà assurée par les clamp() de variables.css : ce fichier
 * ne couvre que ce que clamp() ne peut pas faire (nombre de colonnes,
 * empilement, largeur des boutons).
 *
 * Points de rupture : la maquette ne précise pas de breakpoints chiffrés.
 * Nous reprenons donc les points de rupture par défaut de Divi (Hypothèse,
 * signalée dans le brief) :
 *   - Desktop : > 980px
 *   - Tablette : 767px – 980px
 *   - Mobile : ≤ 767px
 */

/* ==========================================================
   Tablette (≤ 980px)
   ========================================================== */
@media (max-width: 980px) {
	.maef-grid {
		--maef-grid-columns: 2;
	}

	.maef-form__row {
		grid-template-columns: 1fr 1fr;
	}

	.maef-cta {
		padding: var(--space-md) var(--container-padding);
	}
}

/* ==========================================================
   Mobile (≤ 767px)
   ========================================================== */
@media (max-width: 767px) {
	.maef-grid {
		--maef-grid-columns: 1;
	}

	.maef-form__row {
		grid-template-columns: 1fr;
	}

	/* Boutons d'appel à l'action principaux (hero, CTA de bas de page) :
	   pleine largeur sur mobile, conformément à la maquette "Homepage - mobile".
	   Classe à ajouter en complément de .maef-button--primary/… sur les CTA
	   principaux uniquement — les boutons de liste ("Voir le projet") restent
	   en largeur automatique. */
	.maef-button--block-mobile {
		display: flex;
		width: 100%;
	}

	/* Rayon des grandes courbes légèrement réduit : à 40px la courbe est
	   proportionnellement très marquée sur une largeur de ~375px.
	   Hypothèse esthétique, non chiffrée dans la maquette mobile. */
	.maef-section--curved-top,
	.maef-section--curved-bottom {
		--border-radius-lg-mobile: 2rem;
	}

	.et_pb_section.maef-section--curved-top,
	.et_pb_row.maef-section--curved-top {
		border-top-left-radius: 2rem;
		border-top-right-radius: 2rem;
	}

	.et_pb_section.maef-section--curved-bottom,
	.et_pb_row.maef-section--curved-bottom {
		border-bottom-left-radius: 2rem;
		border-bottom-right-radius: 2rem;
	}

	.maef-cta {
		padding: var(--space-md) var(--container-padding);
		border-radius: 2rem;
	}

	.maef-card,
	.maef-card--logo {
		min-height: auto;
	}
}