/* ==========================================================================
   Grilles responsives partagées — Contact (284) et FAQ (286)
   GenerateBlocks gère les styles via ses attributs natifs (couleurs, espacements,
   typo, mises en page). Les points de rupture responsives des grilles restent
   en CSS classique : le panneau de style ne les couvre pas de façon fiable
   sans repasser par l'éditeur visuel pour chaque bloc.
   ========================================================================== */

@media (max-width: 900px) {
	.bifl-grid-2col,
	.bifl-grid-4col {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.bifl-grid-3col {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 560px) {
	.bifl-grid-2col,
	.bifl-grid-4col,
	.bifl-grid-3col {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   Marges horizontales des blocs GB natifs (Accueil, FAQ, Contact) — chaque
   bloc a une valeur de padding fixe (généralement pensée pour desktop, ex.
   24-56px), le panneau de style GB n'a jamais été réglé avec une variante
   mobile distincte. Résultat : sur petit écran, ça s'additionne au padding
   natif de `.inside-article` (30px ≤768px) et resserre le texte beaucoup
   trop (ex. le H1 du hero FAQ se retrouvait indenté de 86px de chaque côté
   sur un écran de 375px de large).

   Règle en 2 temps : d'abord tout le monde à 0 (seul le padding de
   `.inside-article` compte, comme sur toutes les autres pages du site), PUIS
   on redonne un peu d'air (20px) aux blocs qui sont visuellement des cartes
   (fond de couleur et/ou coins arrondis — repéré via un script en direct dans
   le navigateur : `getComputedStyle().backgroundColor`/`.borderRadius`), sinon
   leur texte touche directement leurs propres bords. Une première passe à
   16px partout s'est révélée encore trop généreuse pour les simples wrappers
   de section (retour direct de Julie) tout en étant insuffisante pour ce
   qu'on voulait garder confortable — d'où cette distinction plutôt qu'une
   valeur unique. Ne touche que le padding gauche/droite (pas le padding
   vertical, ni les boutons `gb-text-*`, non ciblés par ce sélecteur).
   ========================================================================== */
@media (max-width: 768px) {
	body.home .entry-content [class*="gb-element-dth"],
	.page-id-286 .entry-content [class*="gb-element-ab"],
	.page-id-284 .entry-content [class*="gb-element-ab"] {
		padding-left: 0;
		padding-right: 0;
	}

	/* Accueil : cartes stats (dth10/13/16), cartes catégorie (dth21/25/29/33), panneau méthode (dth59). */
	body.home .entry-content .gb-element-dth10,
	body.home .entry-content .gb-element-dth13,
	body.home .entry-content .gb-element-dth16,
	body.home .entry-content .gb-element-dth21,
	body.home .entry-content .gb-element-dth25,
	body.home .entry-content .gb-element-dth29,
	body.home .entry-content .gb-element-dth33,
	body.home .entry-content .gb-element-dth59,
	/* FAQ : panneau méthode (ab00003e), pastilles badges (ab000041...50), carte CTA finale (ab000059). */
	.page-id-286 .entry-content .gb-element-ab00003e,
	.page-id-286 .entry-content .gb-element-ab000041,
	.page-id-286 .entry-content .gb-element-ab000044,
	.page-id-286 .entry-content .gb-element-ab000047,
	.page-id-286 .entry-content .gb-element-ab00004a,
	.page-id-286 .entry-content .gb-element-ab00004d,
	.page-id-286 .entry-content .gb-element-ab000050,
	.page-id-286 .entry-content .gb-element-ab000059,
	/* Contact : carte formulaire (ab000005), carte "nous écrire" (ab00000d) + son encart interne (ab000006). */
	.page-id-284 .entry-content .gb-element-ab000005,
	.page-id-284 .entry-content .gb-element-ab00000d,
	.page-id-284 .entry-content .gb-element-ab000006 {
		padding-left: 20px;
		padding-right: 20px;
	}
}