/*
 * 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) — version IMMERSIVE mobile :
	 * vidéo de fond + texte/boutons superposés. Hauteur volontairement
	 * sous le plein écran (~82svh) pour qu'on aperçoive le début de la
	 * section suivante et qu'on comprenne qu'il faut scroller. svh/dvh
	 * pour éviter la coupure due à la barre d'URL mobile. Aucun impact
	 * desktop (cf. .hero règles initiales > 900px). */
	.hero {
		position: relative;
		flex-direction: column;
		height: 82vh;         /* fallback navigateurs anciens */
		height: 82svh;        /* viewport "small" — n'inclut pas la barre d'URL */
		min-height: 520px;    /* sécurité écrans très bas (paysage tél., iPhone SE) */
		overflow: hidden;
		background: var(--charcoal);
	}
	/* Colonne texte : superposée par-dessus la vidéo, centrée verticalement,
	 * padding-top calé sous le header fixe via la variable thème ; padding
	 * bas un peu plus généreux pour laisser respirer l'indicateur de scroll. */
	.hl {
		position: absolute;
		inset: 0;
		z-index: 3;
		background: transparent;
		padding: calc(var(--header-height, 56px) + 22px) 22px 56px;
		justify-content: center;
		flex: none;
	}
	.hl::after { display: none; }
	/* Colonne média : remplit toute la zone, en arrière-plan. */
	.hr {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		min-height: 0;
	}
	/* Voile dégradé renforcé : assez sombre EN BAS (où vit le texte et
	 * les boutons) pour un contraste franc, plus léger en haut pour ne
	 * pas écraser l'image. Reste cohérent avec la charte (charcoal). */
	.hero .hr-ov {
		background: linear-gradient(
			180deg,
			rgba(20, 18, 16, .45) 0%,
			rgba(20, 18, 16, .35) 30%,
			rgba(20, 18, 16, .65) 70%,
			rgba(20, 18, 16, .85) 100%
		);
	}
	/* Renfort de lisibilité : ombre portée DOUCE sur les textes clairs —
	 * discrète, ne crée aucun bloc opaque, juste un halo sombre qui
	 * détache typo + chiffres du fond vidéo en toutes circonstances. */
	.hero .htag { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
	.hero .htag::before { background: rgba(255, 255, 255, .65); }
	.hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35); }
	.hero .hsub { color: rgba(255, 255, 255, .94); max-width: 100%; margin-bottom: 20px; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
	.hero .hstats { border-top-color: rgba(255, 255, 255, .25); margin-top: 18px; padding-top: 14px; gap: 20px; }
	.hero .hsn { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
	.hero .hsl { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
	/* Boutons : le secondaire (outline charcoal) devient illisible sur
	 * fond sombre → on bascule en outline blanc uniquement ici. Le
	 * primaire (navy plein) reste inchangé, il contraste très bien. */
	.hero .hbtns .btn-s {
		background: transparent;
		color: #fff;
		border: 1px solid rgba(255, 255, 255, .55);
	}
	.hero .hbtns .btn-s:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

	/* Indicateur de scroll : petit chevron blanc translucide animé,
	 * pour signaler qu'il y a du contenu sous le hero. Pseudo-élément
	 * → zéro impact sur le markup PHP. Désactivé si l'utilisateur a
	 * activé prefers-reduced-motion. */
	.hero::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 18px;
		width: 11px;
		height: 11px;
		border-right: 2px solid rgba(255, 255, 255, .75);
		border-bottom: 2px solid rgba(255, 255, 255, .75);
		transform: translate(-50%, 0) rotate(45deg);
		z-index: 4;
		pointer-events: none;
		animation: cf-hero-scroll-hint 2.2s ease-in-out infinite;
		filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5));
	}
	@keyframes cf-hero-scroll-hint {
		0%, 100% { transform: translate(-50%, 0) rotate(45deg);   opacity: .55; }
		50%      { transform: translate(-50%, 6px) rotate(45deg); opacity: 1; }
	}
	@media (prefers-reduced-motion: reduce) {
		.hero::after { animation: none; opacity: .7; }
	}

	h1 { font-size: 34px; }

	/* 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; }