/* ==========================================================================
   EverSharp — mobile.css
   Écrit en même temps que l'export, pas après la mise en ligne (consignes §4).
   Chargé APRÈS main.css : aucun !important n'est nécessaire, les styles ne
   sont plus inline. Si un !important devient nécessaire ici, c'est le signe
   qu'un style inline est revenu dans le HTML — le corriger là, pas ici.
   Points de rupture : 1080 / 980 / 960 / 900 / 620 / 400
   ========================================================================== */

/* --- 1080 : USP en 2 colonnes ------------------------------------------- */
@media (max-width: 1080px) {
	.ev-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- 980 : cartes en 2 colonnes ----------------------------------------- */
@media (max-width: 980px) {
	.ev-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* --- 960 : le menu passe en hamburger ---------------------------------- */
@media (max-width: 960px) {
	.ev-header-nav { display: none; }
	.ev-burger { display: flex; }
	.ev-logo-tefal { height: 46px; }
	.ev-logo-es { height: 30px; }
	.ev-header-rule { height: 36px; }
}

/* --- 900 : les compositions superposées se démontent ------------------- */
@media (max-width: 900px) {
	.ev-grid-2,
	.ev-grid-2--wide,
	.ev-grid-2--rev { grid-template-columns: 1fr; }

	/* Le bloc produit de la lame 2 était en position absolue avec un
	   margin-top négatif : il recouvrait le titre. Il redevient un visuel
	   normal, au-dessus du texte. */
	.ev-fond-product {
		position: static;
		display: block;
		width: min(100%, 520px);
		margin: -20px auto 24px;
		filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .3));
	}
	.ev-fond { padding-top: clamp(64px, 10vh, 96px); }

	/* Le macaron flottant sortait du cadre et passait sous le texte. */
	.ev-macaron--float {
		position: static;
		display: block;
		width: 140px;
		margin: -46px auto 0;
	}
	.ev-macaron--hero { width: 120px; right: 16px; bottom: 16px; }

	.ev-head-split { align-items: flex-start; }
}

/* --- 620 : base mobile -------------------------------------------------- */
@media (max-width: 620px) {
	:root { --ev-header-h: 72px; }

	body.ev-body {
		/* encoches iPhone + place pour la barre d'achat fixe */
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
		padding-bottom: 92px;
	}

	.ev-section { padding: clamp(56px, 9vh, 80px) 18px; }
	.ev-band, .ev-final, .ev-footer { padding-left: 18px; padding-right: 18px; }
	.ev-hero-inner { padding-left: 18px; padding-right: 18px; }

	.ev-grid-3, .ev-grid-4, .ev-grid-prod { grid-template-columns: 1fr; }

	/* Nav : le CTA texte laisse la place au hamburger, le switch reste. */
	.ev-nav-cta { display: none; }
	.ev-header { padding: 10px 14px; }

	/* Hero : le CTA principal doit rester au-dessus de la ligne de flottaison
	   sur iPhone SE (375 × 667). Titre et sous-titre resserrés pour ça. */
	.ev-hero { min-height: calc(100vh - var(--ev-header-h)); }
	.ev-hero-inner { padding-top: calc(var(--ev-header-h) + 20px); padding-bottom: 130px; }
	.ev-hero-badge { margin-bottom: 16px; font-size: 12px; padding: 7px 13px; }
	.ev-hero-logo { height: 58px; margin-bottom: 12px; }
	.ev-hero-frame { padding: 18px 22px; }
	.ev-hero-title { font-size: clamp(28px, 8.6vw, 38px); }
	.ev-hero-sub {
		margin: 16px 0 20px;
		font-size: 15px;
		line-height: 1.45;
		/* 4 lignes suffisent au-dessus du pli ; le reste est lisible au scroll */
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.ev-hero-actions { gap: 10px; }
	.ev-hero-actions .ev-btn { flex: 1 1 100%; }
	.ev-hero-trust { gap: 14px; margin-top: 24px; }
	.ev-hero-trust .ev-trust-rule { display: none; }
	.ev-macaron--hero { width: 96px; bottom: 96px; right: 12px; }

	.ev-h2 { font-size: clamp(30px, 8.6vw, 40px); }
	.ev-h2-big { font-size: clamp(32px, 9.4vw, 44px); }
	.ev-kicker--xl { font-size: 26px; }
	.ev-final-title { font-size: clamp(32px, 10vw, 46px); }
	.ev-final-sub { font-size: 20px; }
	.ev-final-logo { height: 56px; }
	.ev-band-inner { flex-direction: column; align-items: flex-start; }
	.ev-band-txt { font-size: 22px; }

	.ev-step { padding: 20px; gap: 16px; }
	.ev-step-num { font-size: 30px; }
	.ev-usp { min-height: 0; padding: 24px 22px; }
	.ev-usp-num { margin-bottom: 14px; font-size: 36px; }
	.ev-authbox { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
	.ev-card-body, .ev-prod-body, .ev-review { padding: 20px; }
	.ev-faq-q { padding: 18px 20px; }
	.ev-faq-a { padding: 0 20px 18px; }
	.ev-knife-mark { width: 26px; height: 26px; font-size: 14px; }

	/* Le bloc d'achat flottant desktop n'existe pas dans cet export :
	   seule la barre pleine largeur est prévue (décision du 15/09). */
	.ev-buybar.is-visible {
		display: flex;
		position: fixed;
		left: 10px; right: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom));
		z-index: 110;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 12px 10px 16px;
		border-radius: 16px;
		background: #fff;
		border: 1px solid var(--ev-line);
		box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .45);
		color: var(--ev-ink);
		text-decoration: none;
	}
	.ev-buybar-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
	.ev-buybar-txt strong { font-family: var(--ev-cond); font-weight: 900; font-size: 18px; text-transform: uppercase; }
	.ev-buybar-txt span { font-size: 11.5px; color: var(--ev-muted); }
	.ev-buybar-cta {
		flex: none;
		display: inline-flex; align-items: center; gap: 8px;
		min-height: 44px;
		padding: 11px 16px;
		border-radius: 999px;
		background: var(--ev-red); color: #fff;
		font-size: 13.5px; font-weight: 800;
		white-space: nowrap;
	}
}

/* --- 400 : très petits écrans ------------------------------------------ */
@media (max-width: 400px) {
	.ev-buybar-txt span { display: none; }
	.ev-buybar-cta { padding: 11px 14px; font-size: 13px; }
	.ev-prod-price strong { font-size: 28px; }
}