/*
 * CRYOFAST PLUNGE — mobile-optimize.css
 *
 * Passe d'optimisation MOBILE globale (v0.12.20). Fichier additif chargé
 * EN DERNIER dans la cascade CSS pour surcharger proprement les autres
 * feuilles sans les modifier. Aucun impact desktop : toutes les règles
 * sont bornées par des media queries `max-width: 900px` (ou plus étroit).
 *
 * Objectifs (§ Cahier des charges mobile) :
 *   1. Typographies mobile recalibrées : titres Cormorant harmonieux,
 *      corps lisible, boutons confortables (clamp() bornés).
 *   2. Hero home mobile peaufiné : vidéo cover propre, texte + CTA
 *      lisibles, hauteur svh équilibrée qui invite au scroll.
 *   3. Grilles multi-col qui restaient debout en ≤480px passées en 1col.
 *   4. Anti-débordement horizontal renforcé (safety net global).
 *   5. Boutons/zones tactiles ≥ 44px partout.
 *
 * Chaque bloc précise sa cible et son motif. La cascade est garantie
 * par l'enregistrement en dernier dans inc/enqueue.php.
 *
 * Snazzy Digital Agency.
 */

/* =====================================================================
 * 1) TYPOGRAPHIE MOBILE — recalibrage global.
 *
 * Motif : les titres Cormorant héritaient de clamp() dont la borne min
 * (34px pour h1, 28px pour h2) restait trop grosse à 375px et rendait
 * les mots-clés à cheval sur deux lignes. On repasse en clamp() plus
 * doux SOUS 900px uniquement.
 * ===================================================================== */

@media (max-width: 900px) {
	/* Titres globaux — les valeurs desktop restent intactes (media query
	 * en max-width, donc les règles dans base.css servent au-dessus). */
	h1 {
		font-size: clamp(26px, 6.4vw, 34px);
		line-height: 1.12;
		letter-spacing: -.3px;
		margin-bottom: 12px;
	}
	h2 {
		font-size: clamp(22px, 5.4vw, 30px);
		line-height: 1.14;
		letter-spacing: -.2px;
		margin-bottom: 10px;
	}
	h3 {
		font-size: clamp(17px, 4.2vw, 22px);
		line-height: 1.22;
	}

	/* Sous-titres et paragraphes de sections : ni trop gros, ni maigres. */
	.hsub,
	.pro-lead,
	.body {
		font-size: 14px;
		line-height: 1.65;
	}
	.hbw-sub {
		font-size: 13.5px;
		line-height: 1.6;
	}

	/* Eyebrow / lbl — resserré et centré quand isolé. */
	.lbl,
	.htag {
		font-size: 9.5px;
		letter-spacing: 2px;
	}

	/* Boutons génériques : padding et taille de texte confortables mais
	 * pas oversized. La couverture tactile 44px est déjà garantie par
	 * responsive.css (.btn { min-height: 44px }). */
	.btn {
		font-size: 12.5px;
		padding: 13px 20px;
		letter-spacing: .3px;
	}

	/* Titres spécifiques aux pages (hero-page, blog, contact, etc.) qui
	 * avaient un clamp() très agressif (jusqu'à 72-80px desktop). */
	.cf-hero-page h1,
	.cf-blog-page .ph-title,
	.cf-contact-page .ph-title,
	.cf-evt-page .ph-title,
	.cf-sm-page .ph-title,
	.cf-histoire-page .cfh-hero-title,
	.cf-legal-title {
		font-size: clamp(28px, 7.2vw, 40px) !important;
		line-height: 1.1;
		letter-spacing: -.3px;
	}

	.cf-blog-page .fa-title,
	.cf-blog-page .cf-single-title,
	.cf-single-content h2,
	.cf-evt-page h2,
	.cf-sm-page h2,
	.cf-histoire-page .cfh-h2 {
		font-size: clamp(22px, 5.4vw, 28px);
		line-height: 1.18;
	}

	/* Panneau « Mon compte » — clamp desktop très agressif (jusqu'à 54px).
	 * On borne à 32px max sur mobile pour respirer. */
	.cf-account-title {
		font-size: clamp(26px, 6.4vw, 32px) !important;
		line-height: 1.14;
	}
	.cf-account-title-sm,
	.cf-dash-hello-title,
	.cf-dash-section-title {
		font-size: clamp(20px, 5vw, 26px) !important;
	}
	.cf-order-num {
		font-size: clamp(22px, 5.6vw, 30px) !important;
	}

	/* PDP sauna : les clamp() poussaient à 50px max sur des noms de
	 * modèle assez longs (« Sauna Extérieur Panoramique »). */
	.cf-pdp-sauna .cfs-p-name {
		font-size: clamp(26px, 6.5vw, 36px) !important;
		line-height: 1.14;
	}
	.cf-pdp-sauna .ob-title {
		font-size: clamp(22px, 5.4vw, 30px) !important;
	}

	/* Nom produit PDP WooCommerce : le clamp() base tirait déjà bien mais
	 * la borne min 32px reste trop grosse sous 380px. */
	.p-name {
		font-size: clamp(24px, 6.4vw, 34px) !important;
		line-height: 1.12 !important;
	}
	.p-price {
		font-size: 32px !important;
	}
	.p-price del { font-size: 18px !important; }
}

/* Fine-tune sous 480px : encore plus resserré (iPhone SE, portrait étroit). */
@media (max-width: 480px) {
	h1 {
		font-size: clamp(24px, 7vw, 30px);
	}
	h2 {
		font-size: clamp(20px, 5.6vw, 26px);
	}
	h3 {
		font-size: clamp(16px, 4.2vw, 20px);
	}
	.hsub,
	.pro-lead,
	.body {
		font-size: 13.5px;
		line-height: 1.6;
	}
	.hbw-sub {
		font-size: 13px;
	}

	/* Titres de pages hero (blog / contact / évts / histoire / sm / légal). */
	.cf-hero-page h1,
	.cf-blog-page .ph-title,
	.cf-contact-page .ph-title,
	.cf-evt-page .ph-title,
	.cf-sm-page .ph-title,
	.cf-histoire-page .cfh-hero-title,
	.cf-legal-title {
		font-size: clamp(26px, 7.8vw, 34px) !important;
	}

	/* Boutons : padding et taille encore un peu réduits. */
	.btn {
		font-size: 12px;
		padding: 12px 16px;
	}
}


/* =====================================================================
 * 2) HERO HOME — peaufinage mobile.
 *
 * Points corrigés :
 *  - Hauteur : svh + min-height plus bas pour appareils très courts, on
 *    doit apercevoir la section suivante (invite au scroll).
 *  - Titre : nettement plus doux qu'avant (le responsive.css forçait 34px
 *    dur — on repasse en clamp fluide).
 *  - Eyebrow : longueur volontairement réduite via letter-spacing/format
 *    pour éviter le retour à la ligne moche sur 375px.
 *  - CTAs : empilés dès 480px, largeur bornée, respiration.
 *  - Overlay : renforcé bas pour lisibilité + halo doux haut.
 *  - Stats : masquées dans le hero (déjà par responsive.css) et repassées
 *    proprement dans .hero-below.
 * ===================================================================== */

@media (max-width: 900px) {
	.hero {
		/* Un peu plus court que 82svh : on aperçoit mieux le contenu
		 * suivant. min-height plus bas pour iPhone SE / paysage tél. */
		height: 78svh;
		min-height: 480px;
		max-height: 720px;
	}

	/* Colonne texte : padding vertical resserré (v0.12.20) pour compacter
	 * l'ensemble tag + titre + accroche + boutons sans rien coller au bord.
	 * responsive.css posait calc(header + 24px) 22px 64px ; on descend la
	 * respiration haute à +16px et le bas à 48px pour libérer de la place. */
	.hero .hl {
		padding: calc(var(--header-height, 56px) + 16px) 22px 48px;
	}

	/* Titre hero : Cormorant fluide 28→40px selon largeur, line-height
	 * légèrement resserré (1.05) pour compacter la 1re ligne « Cold Plunge »
	 * et le retour à la ligne avant l'accroche italique <em>. */
	.hero .hl h1 {
		font-size: clamp(28px, 7.2vw, 40px);
		line-height: 1.05;
		letter-spacing: -.4px;
		margin-bottom: 10px;
		max-width: 22ch;
	}

	/* Accroche italique DANS le h1 — « Performance. Conception. Excellence. »
	 * (v0.12.20). Volontairement plus PETITE que la partie principale du
	 * titre : ~60% de sa taille → clairement secondaire, élégante, lisible.
	 * Le letter-spacing revient à 0 pour l'italique (les glyphes penchés
	 * n'ont pas besoin du serrage du titre principal), line-height doux
	 * pour un retour à la ligne propre entre « Performance. » et
	 * « Excellence. » (structure PHP : <em>Performance. Conception.<br>
	 * Excellence.</em>). */
	.hero .hl h1 em {
		font-size: .6em;
		line-height: 1.15;
		letter-spacing: 0;
		display: inline-block;
		margin-top: 4px;
	}

	/* Eyebrow : taille plus discrète mobile pour ne pas voler la vedette
	 * au titre. Marge inférieure réduite (v0.12.20) pour resserrer le
	 * bloc avec le h1. */
	.hero .htag {
		font-size: 9px;
		letter-spacing: 2.2px;
		margin-bottom: 6px;
		max-width: 26ch;
		text-align: center;
	}

	/* Overlay renforcé : plus sombre en bas où vivent le texte et les CTA
	 * pour un contraste clair quelle que soit la vidéo. Retouché plus
	 * doux en haut pour ne pas écraser l'image. */
	.hero .hr-ov {
		background: linear-gradient(
			180deg,
			rgba(15, 14, 12, .35) 0%,
			rgba(15, 14, 12, .28) 28%,
			rgba(15, 14, 12, .55) 62%,
			rgba(15, 14, 12, .88) 100%
		);
	}

	/* Vidéo : recadrage centré (au lieu de « center 5% » desktop qui
	 * coupait le haut sur mobile portrait). */
	.hero .hr video {
		object-position: center 30%;
	}

	/* CTAs mobile : bornés à 360px, respiration franche. Le hbtns hero
	 * ne wrap plus (deux boutons côte à côte) — sous 480px on empile.
	 * margin-top réduit (v0.12.20) pour resserrer avec le bloc titre. */
	.hero .hbtns {
		max-width: 360px;
		gap: 10px;
		margin-top: 14px;
	}
	.hero .hbtns .btn {
		font-size: 12px;
		padding: 13px 16px;
		min-height: 48px;
	}

	/* Bandeau réassurance sous le hero (hero-below) — passage en flex
	 * column existant, on renforce le padding et la hiérarchie visuelle. */
	.hero-below {
		padding: 22px 22px !important;
	}
	.hbw-stats {
		width: 100%;
		justify-content: space-between;
		gap: 10px;
	}
	.hbw-item { text-align: center; flex: 1; min-width: 0; }
	.hbw-val { font-size: 20px; }
	.hbw-lab { font-size: 8.5px; letter-spacing: 1.4px; }
}

/* ≤480 : hero encore plus resserré + CTA empilés (déjà géré par
 * responsive.css, on ajoute juste la borne max-width et une hauteur
 * un poil plus courte pour bien voir le hero-below). */
@media (max-width: 480px) {
	.hero {
		height: 76svh;
		min-height: 460px;
	}
	/* Padding vertical bien plus resserré (v0.12.20) : on gagne ~28px sur
	 * la hauteur totale du hero pour que titre + accroche + boutons +
	 * chevron tiennent proprement même sur iPhone SE portrait. */
	.hero .hl {
		padding: calc(var(--header-height, 56px) + 12px) 20px 52px !important;
	}
	.hero .hl h1 {
		font-size: clamp(26px, 8vw, 34px);
		margin-bottom: 8px;
	}
	/* Accroche italique <em> encore plus discrète en ≤480 : ~58% du h1
	 * (soit ~15-20px selon largeur). Reste parfaitement lisible. */
	.hero .hl h1 em {
		font-size: .58em;
	}
	.hero .htag { margin-bottom: 4px; }
	.hero .hbtns {
		flex-direction: column;
		max-width: 300px;
		gap: 8px;
		margin-top: 12px;
	}
	.hero .hbtns .btn {
		width: 100%;
		white-space: normal;
	}

	/* Bandeau réassurance : stats plus lisibles empilées. */
	.hero-below {
		padding: 18px 18px !important;
	}
	.hbw-stats { gap: 6px; }
	.hbw-val { font-size: 18px; }
}


/* =====================================================================
 * 3) HERO PAGES INTERNES (cf-hero-page) — paddings & lisibilité.
 *
 * Motif : le hero-page.php a un padding-top calculé + un contenu qui
 * peut se retrouver collé aux bords latéraux quand aucune classe .sec
 * n'entoure. On rajoute un padding latéral cohérent en mobile.
 * ===================================================================== */

@media (max-width: 900px) {
	.cf-hero-page {
		padding-left: var(--sec-pad-x-mob) !important;
		padding-right: var(--sec-pad-x-mob) !important;
		min-height: 46vh !important;
	}
	.cf-hero-page p {
		font-size: 13.5px !important;
		line-height: 1.6 !important;
	}
}


/* =====================================================================
 * 4) SECTIONS GÉNÉRIQUES — padding et espacements mobile.
 *
 * On borne les paddings latéraux des sections et bandes CTA pour
 * garantir un rythme visuel régulier sur toutes les pages ACF/Snazzy.
 * ===================================================================== */

@media (max-width: 900px) {
	/* Bandes CTA sur pages (gamme, pro, PDP, etc.) — padding cohérent. */
	.gband,
	.pband {
		padding: 22px 22px !important;
		gap: 14px !important;
	}
	.gbandbtns,
	.pbandbtns,
	.gbr { gap: 10px !important; }
	.gbandbtns .btn,
	.pbandbtns .btn,
	.gbr .btn { flex: 1 1 auto; min-width: 0; }

	/* Titres de bandes réduits pour ne pas déborder. */
	.gbl p:first-child,
	.pbandt { font-size: 17px !important; }

	/* Cartes produit (gamme, dropdown) : titres plus doux. */
	.pname { font-size: 15px; }
	.pdesc { font-size: 10.5px; min-height: 0; }
	.pprice { font-size: 13px; }

	/* Cartes "sv" (services pro) : titres plus doux. */
	.svt { font-size: 13px; }
	.svb { font-size: 11.5px; line-height: 1.55; }

	/* Lifestyle panels : titres plus doux. */
	.ltitle { font-size: 18px; }
	.ltext { font-size: 11px; }

	/* Bienfaits : bloc numéro + titre + texte plus compact. */
	.bft { font-size: 13.5px; }
	.bfb { font-size: 12px; }
}

/* Espacement sections < 480px : on resserre encore un peu. */
@media (max-width: 480px) {
	:root {
		--sec-pad-y-mob: 32px;
		--sec-pad-x-mob: 18px;
	}
	.gband,
	.pband { padding: 20px 18px !important; }
}


/* =====================================================================
 * 5) GRILLES — collapse propre en ≤480 pour les cas oubliés.
 *
 * La plupart des grilles collapsent déjà via responsive.css, mais
 * certaines pages (blog, evt, histoire, sur-mesure, my-account) ont
 * des cas en 2 colonnes qui restent debout sous 480. On les force
 * en 1 colonne quand le contenu ne respire pas.
 * ===================================================================== */

@media (max-width: 480px) {
	/* Blog + Contact : grilles restantes. */
	.cf-blog-page .articles-grid,
	.cf-blog-page .testi-grid,
	.cf-blog-page .featured-article,
	.cf-contact-page .contact-grid,
	.cf-contact-page .form-row {
		grid-template-columns: 1fr !important;
	}
	/* Évts sportifs + sur-mesure : dernier récalcitrant. */
	.cf-evt-page .flex-event-grid,
	.cf-evt-page .refs-grid,
	.cf-evt-page .gallery-grid,
	.cf-evt-page .evt-contact-grid,
	.cf-sm-page .contact-grid,
	.cf-sm-page .pro-grid,
	.cf-sm-page .real-grid,
	.cf-sm-page .form-row {
		grid-template-columns: 1fr !important;
	}
	/* Histoire : grilles restantes. */
	.cf-histoire-page .cfh-two-col,
	.cf-histoire-page .cfh-real-grid {
		grid-template-columns: 1fr !important;
	}
	/* PDP sauna : la config 2 col → 1 col pour respirer sur mobile. */
	.cf-pdp-sauna .two-col,
	.cf-pdp-sauna .tech-config,
	.cf-pdp-sauna .ct-band,
	.cf-pdp-sauna .outdoor-band,
	.cf-pdp-sauna .dyn-specs {
		grid-template-columns: 1fr !important;
	}
	/* Compte : dashboard + adresses en 1 col strict. */
	.cf-account-shell,
	.cf-dash-quick,
	.cf-order-bottom-grid,
	.woocommerce-Addresses {
		grid-template-columns: 1fr !important;
	}
}


/* =====================================================================
 * 6) HEADER + MENU BURGER — resserre légèrement pour libérer le viewport.
 *
 * Le padding latéral 18px + logo 24px du responsive.css est déjà bien
 * calé, on borne juste la CTA et l'icône compte en ≤ 480px.
 * ===================================================================== */

@media (max-width: 480px) {
	header {
		padding: 0 14px !important;
	}
	.logo img { height: 22px !important; }
	.cart { width: 32px !important; height: 32px !important; }
	.cf-account-icon {
		width: 32px !important;
		height: 32px !important;
	}
	/* Compact : évite le débordement quand la CTA « Se connecter » est
	 * accompagnée du panier + burger sur un écran 320-360px. */
	header > nav > .cf-account-icon svg { width: 16px; height: 16px; }
	header > nav { gap: 2px !important; }
}


/* =====================================================================
 * 7) CHECKOUT SNAZZY + PANIER — resserre paddings mobile.
 *
 * Le snazzy-checkout.css passe déjà en 1 col @ 999px. On corrige la
 * respiration des paddings latéraux + resserre la typo mobile.
 * ===================================================================== */

@media (max-width: 900px) {
	.snazzy-main-inner,
	.snazzy-summary-inner {
		padding: 24px 20px 40px !important;
		max-width: 100% !important;
	}
	.snazzy-section h2 { font-size: 16px; }
	/* Panier : items resserrés. */
	.woocommerce-cart .cart_totals h2,
	.woocommerce-cart .cross-sells h2 {
		font-size: clamp(20px, 5vw, 24px) !important;
	}
}
@media (max-width: 480px) {
	.snazzy-main-inner,
	.snazzy-summary-inner {
		padding: 20px 16px 32px !important;
	}
}


/* =====================================================================
 * 8) FOOTER — compact et propre en mobile.
 *
 * responsive.css passe déjà en 2 col + centré @ 900px. On resserre la
 * typo et on garantit qu'aucun lien ne déborde à 320px.
 * ===================================================================== */

@media (max-width: 900px) {
	.fg { gap: 16px !important; padding-bottom: 14px !important; }
	.flinks a { font-size: 12px; }
	.fct { font-size: 9.5px; letter-spacing: 1.6px; }
	.ftag { max-width: 100%; }
}


/* =====================================================================
 * 9) ANTI-DÉBORDEMENT — safety net global mobile renforcé.
 *
 * Complète la règle globale de responsive.css (`html, body { overflow-x:
 * hidden }`) en s'assurant que les tableaux, code, et longues chaînes
 * (ex. tokens de commande) ne cassent pas la mise en page.
 * ===================================================================== */

@media (max-width: 900px) {
	.cf-legal-content pre,
	.cf-legal-content code,
	.cf-single-content pre,
	.cf-single-content code {
		white-space: pre-wrap;
		word-wrap: break-word;
		overflow-wrap: anywhere;
	}
	table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}
	/* Longs mots-URL (rare, tokens) : break si nécessaire. */
	.cf-single-content,
	.cf-legal-content,
	.cf-account-content { overflow-wrap: anywhere; word-break: normal; }

	/* Coup de filet ultime : aucune section ne peut déborder. */
	section,
	.sec,
	.cf-pdp,
	.cf-account { max-width: 100vw; }
}


/* =====================================================================
 * 10) TOUCH TARGETS — garantir ≥ 44px sur tous les liens/CTA interactifs.
 *
 * responsive.css les couvre déjà pour .btn, .shop-cta, .nl, .cart.
 * On étend à quelques cas oubliés (liens dropdowns, tags catégories).
 * ===================================================================== */

@media (max-width: 900px) {
	.di,
	.cf-nav-sublink,
	.cf-blog-page .cat-link,
	.cf-blog-page .tag-link,
	.woocommerce-tabs .tabs a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}