/* ------------------------------------------------------------------
 * Desinsect13000 Anthropic — cross-cutting responsive fixes.
 *
 * Small overrides only. Audit catches: horizontal scroll, hero
 * stacking, CTA tap targets ≥44px, text overflow, mega-menu mobile.
 * Layered after templates.css and nav-mega.css.
 * ------------------------------------------------------------------ */

/* ====== 1. Global overflow guard ====== */
html, body { overflow-x: hidden; max-width: 100%; }
body { min-width: 320px; }

/* Any container/grid child that escapes its parent gets clamped. */
img, video, picture, figure, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Long URL / unbreakable strings in prose blocks. */
.prose, .page__prose, .pillar__body, .pillar__prose { word-wrap: break-word; overflow-wrap: anywhere; }

/* ====== 2. CTA tap target — ensure ≥44px on mobile ====== */
@media (max-width: 720px) {
	.btn, .btn--sm, .pillar__hero-ctas .btn,
	.cta-band .btn, .site-header .btn,
	a.btn, button.btn {
		min-height: 44px;
	}
	.btn--sm { padding: 12px 18px; min-height: 44px; }
}

/* ====== 3. Pillar / inner-page hero stacks cleanly on mobile ====== */
@media (max-width: 1024px) {
	.pillar__hero-grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.pillar__hero-text { max-width: 100% !important; }
	.pillar__hero-figure { aspect-ratio: 16/10 !important; }
}
@media (max-width: 720px) {
	.pillar__hero-title {
		font-size: clamp(32px, 8vw, 44px) !important;
		line-height: 1.05 !important;
	}
	.pillar__hero-lede { font-size: 16px !important; }
}

/* ====== 4. Page (page.php) hero on mobile ====== */
@media (max-width: 720px) {
	.page__title { font-size: clamp(32px, 8vw, 48px) !important; line-height: 1.05 !important; }
	.page__lede { font-size: 16px !important; }
	.page__hero { padding-block: 48px 24px !important; }
}

/* ====== 5. Tarifs grid — let cards wrap on mobile, no overflow ====== */
@media (max-width: 720px) {
	.tarif-grid, .tarifs-grid, .pricing-grid, .tarif-cards {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.tarif-card, .tarifs__card { padding: 20px !important; }
	/* Long pricing rows */
	.tarif-row { flex-wrap: wrap; gap: 8px; }
}

/* ====== 6. Mega-menu — ensure proper hide on tablet/mobile ====== */
@media (max-width: 1080px) {
	.d13a-nav { display: none !important; }
	.d13a-mega { display: none !important; }
	.mobile-drawer__toggle, .d13a-burger, .site-header__burger { display: inline-flex !important; }
}
@media (min-width: 1081px) {
	.mobile-drawer { display: none; }
}

/* ====== 7. Site header — header chrome on mobile ====== */
@media (max-width: 720px) {
	.site-header__inner { gap: 12px; padding-block: 10px; }
	.site-header__brand { font-size: 16px; }
	.site-header__brand .mark { width: 28px; height: 28px; font-size: 12px; }
	.site-header .btn--primary, .site-header .btn { padding: 10px 14px; font-size: 13px; }
}

/* ====== 8. Footer dense links wrap ====== */
@media (max-width: 720px) {
	.site-footer__inner, .site-footer__cols, .footer-cols, .footer__grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 24px 16px !important;
	}
	.site-footer__brandcol {
		grid-column: 1 / -1;
		margin-bottom: 24px;
	}
	.pests__grid {
		grid-template-columns: 1fr !important;
	}
}
@media (max-width: 420px) {
	.site-footer__inner, .site-footer__cols, .footer-cols, .footer__grid {
		grid-template-columns: 1fr !important;
	}
}

/* ====== 9. Tables in prose / archives ====== */
.prose table, .page__prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ====== 10. Archive grid stack on mobile ====== */
@media (max-width: 720px) {
	.archive__grid, .archive-grid, .post-grid, .articles-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

/* ====== 11. Long heading words break ====== */
h1, h2, h3 { overflow-wrap: break-word; word-break: normal; }

/* ====== 12. Forminator forms — no horizontal scroll ====== */
.forminator-ui, .forminator-custom-form {
	max-width: 100%;
	overflow: hidden;
}
.forminator-ui input, .forminator-ui textarea, .forminator-ui select {
	max-width: 100%;
}
@media (max-width: 720px) {
	.forminator-ui input, .forminator-ui textarea, .forminator-ui select {
		min-height: 44px;
		font-size: 16px !important; /* prevent iOS zoom-on-focus */
	}
}

/* ====== 13. Service / vertical CTAs band on mobile ====== */
@media (max-width: 720px) {
	.cta-band__inner, .cta-band {
		text-align: center;
	}
	.cta-band__inner { padding-block: 40px !important; }
	.cta-band__btns, .cta-band__cta {
		flex-direction: column;
		align-items: stretch;
	}
	.cta-band .btn { width: 100%; justify-content: center; }
}

/* ====== 14. FAQ accordions (page-level FAQ) ====== */
.faq-list summary, .faq-item summary { min-height: 56px; padding: 18px 8px; cursor: pointer; }

/* ====== 15. Plan-du-site archive lists ====== */
@media (max-width: 720px) {
	.plan-du-site__cols, .sitemap__cols, .sitemap-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ====== 16. Quartier / arrondissement hero band ====== */
@media (max-width: 720px) {
	.zone__hero, .quartier__hero { padding-block: 40px 24px; }
	.zone__hero h1, .quartier__hero h1 { font-size: clamp(30px, 8vw, 44px); }
}

/* ====== 17. Single article — eyebrow, title, body ====== */
@media (max-width: 720px) {
	.single-article__title, .post__title { font-size: clamp(28px, 7.5vw, 40px) !important; line-height: 1.1 !important; }
	.single-article__body, .post__body { font-size: 16px; }
}

/* ====== 18. Case study layout ====== */
@media (max-width: 720px) {
	.case-study__grid, .case__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
	.case-study__metric, .case__metric { padding: 16px !important; }
}

/* ====== 19. Mega-panel inside drawer can't be wider than viewport ====== */
.mobile-drawer__panel, .mobile-drawer { max-width: 100vw; box-sizing: border-box; }

/* ====== 20. Padding sanity at <420px ====== */
@media (max-width: 420px) {
	:root { --gutter: 18px; }
	.container { padding-inline: 18px; }
}