/*
 * CRYOFAST PLUNGE — responsive.css
 *
 * §13 du cahier des charges — responsive complet sur tout le site :
 *  - 1280+   : Desktop large (rendu maquette).
 *  - 1024-1279 : Laptop (ajustements paddings).
 *  - 768-1023  : Tablette (grilles produits en 2-3 col, hero possiblement empilé).
 *  - 480-767   : Mobile (tout empilé, grilles 1 col, burger).
 *  - <480      : Petit mobile (finitions, hbtns column).
 *
 * Toutes les zones tactiles ≥ 44px sous 900px. Aucun débordement horizontal.
 */

/* =====================================================================
 * 1024-1279 — Laptop : ajustements paddings + grilles.
 * ===================================================================== */
@media (max-width: 1279px) and (min-width: 1024px) {
	.sec { padding: calc(var(--sec-pad-y) * .8) calc(var(--sec-pad-x) * .7); }
	footer { padding: 24px 48px 14px; }
}

/* =====================================================================
 * 768-1023 — Tablette : compactage modéré.
 * ===================================================================== */
@media (max-width: 1023px) and (min-width: 768px) {
	.gg { grid-template-columns: repeat(3, 1fr); }
	.svs { grid-template-columns: repeat(2, 1fr); }
	.bfl { grid-template-columns: 1fr 240px; gap: 32px; }
}

/* =====================================================================
 * ≤900 — Breakpoint majeur (maquette).
 * ===================================================================== */
@media (max-width: 900px) {
	header { padding: 0 18px; height: 56px; }
	.logo img { height: 24px; }

	/* Nav desktop masquée : burger prend le relais (cf. mobile-nav.css). */
	nav .nl { display: none; }
	.shop-cta { font-size: 10px; padding: 6px 12px; margin-left: 0; }
	.shop-cta { display: inline-flex !important; }

	/* Hero home (front-page) */
	.hero { flex-direction: column; height: auto; }
	.hl { padding: 72px 20px 28px; flex: none; }
	.hl::after { display: none; }
	h1 { font-size: 34px; }
	.hr { width: 100%; height: 50vw; min-height: 200px; }

	/* Particuliers / lifestyle */
	.lg { grid-template-columns: 1fr; }
	.lp { min-height: 240px; }

	/* Bienfaits */
	.bfl { grid-template-columns: 1fr; }
	.side { display: none; }

	/* Gamme — 2 col tablet, dernière card pleine largeur */
	.gg { grid-template-columns: repeat(2, 1fr); }
	.gg .pc:last-child { grid-column: 1 / -1; }

	/* Pro solutions */
	.pro-top { grid-template-columns: 1fr; }
	.svs { grid-template-columns: 1fr 1fr; }
	.pband { flex-direction: column; align-items: flex-start; }

	/* Footer */
	.fg { grid-template-columns: 1fr 1fr; gap: 20px; }
	footer { padding: 22px 20px 14px; }
	.fbot { flex-direction: column; gap: 4px; text-align: center; }

	/* Sections génériques */
	.sec { padding: var(--sec-pad-y-mob) var(--sec-pad-x-mob); }
	.gband { flex-direction: column; align-items: flex-start; }
	.gbr { width: 100%; }
	.gbr .btn { flex: 1; min-width: 0; }

	/* Marquee masqué en mobile (maquette) */
	.mq { display: none; }

	/* Zones tactiles ≥ 44px pour boutons et liens header */
	.shop-cta, .cart, .nl, .btn { min-height: 44px; }
	.btn { padding: 12px 22px; }

	/* Footer : socials + links plus aérés */
	.flinks a { padding: 4px 0; min-height: 40px; display: inline-flex; align-items: center; }
	.fs { width: 36px; height: 36px; }
}

/* =====================================================================
 * ≤480 — Mobile : tout empilé.
 * ===================================================================== */
@media (max-width: 480px) {
	.gg { grid-template-columns: 1fr; }
	.gg .pc:last-child { grid-column: auto; }
	.svs { grid-template-columns: 1fr; }
	.pts { grid-template-columns: 1fr; }
	.fg { grid-template-columns: 1fr; }
	.hbtns { flex-direction: column; }
	.hbtns .btn { width: 100%; min-height: 48px; }

	.gband, .pband { padding: 22px 20px; }
	.gband p:first-child, .pband > div > div:first-child { font-size: 18px; }

	/* Layouts génériques pages */
	.cf-cols-2,
	.cf-cols-3,
	.cf-cols-4 { grid-template-columns: 1fr; }
}

/* =====================================================================
 * Laptop intermédiaire (1024-1279) : layouts génériques + bloc produits.
 * ===================================================================== */
@media (max-width: 900px) {
	/* Layouts génériques pages — collapse 3/4 col en 2 col tablet */
	.cf-cols-3,
	.cf-cols-4 { grid-template-columns: repeat(2, 1fr); }

	/* Bloc produits — 3/4/5 col → 2 col tablet */
	.gg.gg-cols-3,
	.gg.gg-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
 * Utilitaires de visibilité — réglages communs des sections ACF.
 * ===================================================================== */
@media (min-width: 901px) {
	.cryofast-hide-desktop { display: none !important; }
}
@media (max-width: 900px) {
	.cryofast-hide-mobile { display: none !important; }
}

/* =====================================================================
 * Anti-débordement horizontal — global safety net.
 * ===================================================================== */
html, body { overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; height: auto; }