/**
 * SecGram — responsive.css
 * Ajustements par palier. Chargé en DERNIER : peut affiner tout ce qui
 * précède. Paliers alignés sur ceux de Divi (980 / 767 / 479) + un
 * palier très petit écran (359) testé à 320 px.
 *
 * Les tailles de titres n'ont pas besoin d'ajustement ici :
 * les clamp() de base.css gèrent la fluidité.
 */

/* ---- ≤ 980 px (tablette, bascule menu mobile Divi) ------------------- */
@media (max-width: 980px) {
	:root {
		--sg-anchor-offset: 90px;
		--sg-space-3xl: 4.5rem;
	}

	.sg-grid {
		gap: var(--sg-space-md);
	}
}

/* ---- ≤ 767 px (mobile large) ----------------------------------------- */
@media (max-width: 767px) {
	:root {
		--sg-space-2xl: 3rem;
	}

	/* Bandeaux CTA : padding réduit pour préserver la largeur utile. */
	.sg-cta-band {
		padding: var(--sg-space-lg);
	}

	.sg-card {
		padding: var(--sg-space-md);
	}

	/* Métadonnées d'étude de cas : empilement vertical lisible. */
	.sg-meta-list {
		gap: var(--sg-space-md);
	}

	/* 404 : moins de vide vertical sur mobile. */
	.sg-404 {
		padding-block: var(--sg-space-2xl);
	}

	/* Formulaire de recherche : empilé, bouton pleine largeur. */
	.sg-search-form {
		flex-direction: column;
	}
}

/* ---- ≤ 479 px (mobile) ----------------------------------------------- */
@media (max-width: 479px) {
	:root {
		--sg-anchor-offset: 80px;
	}

	/* Problème Divi : la rangée par défaut fait 80 % de large, ce qui
	   laisse ~64 px perdus de chaque côté d'un écran de 375 px.
	   90 % rend une largeur utile correcte. Les rangées dont la largeur
	   est personnalisée dans Divi (CSS plus spécifique ou inline)
	   conservent leur réglage. */
	.et_pb_row {
		width: 90%;
	}

	/* Boutons du 404 : pleine largeur, plus simples à toucher. */
	.sg-404__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ---- ≤ 359 px (très petits écrans, test 320 px) ---------------------- */
@media (max-width: 359px) {
	/* Base légèrement réduite : tout le dimensionnement en rem suit,
	   ce qui évite les débordements sans règle spécifique. */
	:root {
		font-size: 15px;
	}

	.sg-badge {
		font-size: 0.75rem;
	}
}