/*
 * /premium/ — le gabarit du site, sans colonne latérale (729/PREM).
 *
 * Mêmes valeurs et mêmes raisons que `/catalogue` (`catalogue-rail.css`, `main.egmtheme-catalogue`
 * et `.egmtheme-catalogue-shell`) :
 *   - le fond chaud `#FAF9F5` pleine largeur (un fond froid sous des surfaces chaudes se lit
 *     comme une erreur d'assemblage) ;
 *   - `margin-block-start: 0` retire la bande vide que `--wp--style--block-gap` pose sous le menu ;
 *   - la colonne unique du site, `var(--egm-page-max, 1360px)` et `padding: 24px 16px`.
 * Portée : la page des offres SEULE (classe posée par `EGMtheme_Premium_Page::body_class()`).
 */
body.egmtheme-premium-page main.egmtheme-content {
	background: #FAF9F5;
	margin-block-start: 0;
}

body.egmtheme-premium-page .egm-layout-v2 {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	max-width: var(--egm-page-max, 1360px);
	margin: 0 auto;
	padding: 24px 16px 64px;
	box-sizing: border-box;
}

/*
 * ⚖️ Chaque section de la mise en page V2 porte sa largeur EN LIGNE (`style="max-width:1200px"`
 * pour une section « boxed ») : dans la colonne du site, c'est la colonne qui borne, ⛔ plus la
 * section — sans quoi la grille des plans s'arrêterait 128 px avant le bandeau qui la précède.
 * `!important` est le seul moyen de passer devant un style en ligne ; il reste confiné à cette page.
 */
body.egmtheme-premium-page .egm-layout-v2 > .egm-section > .egm-section__inner {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Le bandeau Premium CTA garde sa marge haute réglée dans l'admin ailleurs sur le site ; ici la
   colonne donne déjà la respiration du haut (24 px) : une seconde marge creuserait un vide. */
body.egmtheme-premium-page .egm-layout-v2 > .egm-section:first-child [data-egm-app="premium-cta"] > * {
	margin-top: 0 !important;
}

/*
 * 📌 765/R8 — la barre d'offre collante du téléphone (`assets/js/premium-page.js`).
 * Elle n'existe que sous 720 px (même seuil que `StickyCta` de dashboard-shared) ; au-dessus,
 * barre et cale en `display: none`. Les couleurs du bouton sont COPIÉES de la carte relayée
 * par le script (réglables dans l'admin des plans), ⛔ pas redites ici.
 * 📏 Loi S484 : le bouton tient 38 px en `min-height`. 🚸 zone sûre du bas (R4).
 */
.egm-premium-sticky,
.egm-premium-sticky-spacer {
	display: none;
}

@media (max-width: 719.98px) {
	body.egmtheme-premium-page .egm-premium-sticky-spacer {
		display: block;
		height: calc(72px + env(safe-area-inset-bottom, 0px));
	}

	body.egmtheme-premium-page .egm-premium-sticky {
		display: flex;
		align-items: center;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		box-sizing: border-box;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid #e7e3da;
		background: #fff;
		box-shadow: 0 -6px 20px rgba(13, 16, 36, 0.1);
	}

	body.egmtheme-premium-page .egm-premium-sticky[hidden] {
		display: none;
	}

	/* 📱 824/R7 — la barre d'onglets basse publique tient déjà le bas (et la zone sûre) : la barre
	   d'offre se pose au-dessus d'elle, et sa cale ne compte plus la zone sûre. */
	html.egm-has-bottom-nav body.egmtheme-premium-page .egm-premium-sticky {
		bottom: var(--egm-bottom-nav-h, 0px);
		padding-bottom: 10px;
	}

	html.egm-has-bottom-nav body.egmtheme-premium-page .egm-premium-sticky-spacer {
		height: 72px;
	}

	.egm-premium-sticky__summary {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.egm-premium-sticky__name {
		overflow: hidden;
		font-size: 14px;
		font-weight: 700;
		color: #1f1d2b;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.egm-premium-sticky__price {
		font-size: 13px;
		color: #5b6275;
		font-variant-numeric: tabular-nums;
	}

	.egm-premium-sticky__cta {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-height: var(--egm-ctl-h, 38px);
		padding: 6px 16px;
		border: 1px solid #7c3aed;
		border-radius: 10px;
		background: #7c3aed;
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}

	.egm-premium-sticky__cta:focus-visible {
		outline: 2px solid #1f1d2b;
		outline-offset: 2px;
	}
}

/* 👆 R9-bis (831 ; ⚖️ D1 : 44 px au doigt) — l'appel de la barre collante mesurait 38 à 390 tactile
   (`--egm-ctl-h` n'est pas servi en public : le repli 38 ÉTAIT la valeur). */
@media (pointer: coarse) {
	.egm-premium-sticky__cta {
		min-height: var(--egm-tap-min, 44px);
	}
}