/*
 * [egmam-plans] — les cartes de plans de la page publique (`/premium/`, `/abonnements/`).
 *
 * 729/PREM — LA GÉOMÉTRIE DE `#/subscription` (`subscription-model.css`, `.sub-plan*`) : tête
 * pastille + nom + badge, gros prix + « par mois », ligne de contexte, filet, fonctionnalités,
 * bouton pleine largeur ; grille `auto-fit` 260 px. Les couleurs sont celles du site public
 * (violet de l'offre Premium), et celles d'Access Master › « Cartes d'abonnement » quand un style
 * y est enregistré (`.is-styled`, variables posées par le serveur) — même règle que le Hub.
 *
 * Tout vit sous `.egmam-plans` : ⛔ aucune règle sur `:root`, `body` ou un élément nu.
 */
.egmam-plans {
	--egmam-ink: #1f1d2b;
	--egmam-muted: #6b6878;
	--egmam-line: #ebe7df;
	--egmam-card: #ffffff;
	--egmam-accent: #7c3aed;
	--egmam-accent-ink: #6d28d9;
	--egmam-accent-soft: #f3edff;
	--egmam-radius: 16px;
	color: var(--egmam-ink);
	font-size: 15px;
	line-height: 1.45;
	scroll-margin-top: 96px;
}

.egmam-plans *,
.egmam-plans *::before,
.egmam-plans *::after {
	box-sizing: border-box;
}

/* ── Tête de section : « Plans et tarifs » + bascule Mensuel / Annuel ─────────────────────── */
.egmam-plans__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin: 0 0 18px;
}

.egmam-plans__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--egmam-ink);
}

.egmam-plans__seg {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: #f1eee7;
	border: 1px solid var(--egmam-line);
}

.egmam-plans__segbtn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--egmam-muted);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	min-height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.egmam-plans__segbtn:hover {
	color: var(--egmam-ink);
}

.egmam-plans__segbtn.is-on {
	background: var(--egmam-card);
	color: var(--egmam-ink);
	box-shadow: 0 1px 3px rgba(31, 29, 43, 0.12);
}

.egmam-plans__segbtn:focus-visible {
	outline: 2px solid var(--egmam-accent);
	outline-offset: 2px;
}

/* ── Grille ───────────────────────────────────────────────────────────────────────────────── */
.egmam-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

@media (max-width: 719px) {
	.egmam-plans__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Carte ────────────────────────────────────────────────────────────────────────────────── */
.egmam-plans__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px 22px 22px;
	background: var(--egmam-card);
	border: 1px solid var(--egmam-line);
	border-radius: var(--egmam-radius);
	box-shadow: 0 1px 2px rgba(31, 29, 43, 0.04), 0 8px 24px -16px rgba(31, 29, 43, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.egmam-plans__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 2px rgba(31, 29, 43, 0.05), 0 16px 32px -18px rgba(31, 29, 43, 0.28);
}

.egmam-plans__card.is-highlight {
	border-color: var(--egmam-accent);
	box-shadow: 0 0 0 1px var(--egmam-accent), 0 16px 32px -18px rgba(124, 58, 237, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.egmam-plans__card,
	.egmam-plans__card:hover {
		transition: none;
		transform: none;
	}
}

.egmam-plans__cardhead {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.egmam-plans__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--egmam-accent-soft);
	color: var(--egmam-accent-ink);
}

.egmam-plans__chip img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: inherit;
	display: block;
}

.egmam-plans__name {
	margin: 0;
	font-size: 17px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--egmam-ink);
}

.egmam-plans__badge {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background: #fff4dc;
	color: #9a5b00;
	border: 1px solid #f6dfae;
}

.egmam-plans__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.egmam-plans__amount {
	font-size: 38px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--egmam-ink);
	font-variant-numeric: tabular-nums;
}

.egmam-plans__per {
	font-size: 13px;
	color: var(--egmam-muted);
}

.egmam-plans__lede {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--egmam-muted);
	text-wrap: pretty;
}

.egmam-plans__rule {
	height: 1px;
	background: var(--egmam-line);
	margin: 16px -22px 4px;
}

.egmam-plans__nofeat {
	margin: 0;
	padding: 9px 0;
	font-size: 13px;
	color: var(--egmam-muted);
}

.egmam-plans__features {
	list-style: none;
	margin: 0;
	padding: 0;
}

.egmam-plans__features li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 9px 0;
	border-top: 1px solid var(--egmam-line);
	font-size: 13.5px;
}

.egmam-plans__features li:first-child {
	border-top: 0;
}

.egmam-plans__features svg {
	flex: none;
	margin-top: 2px;
	color: var(--egmam-accent-ink);
}

.egmam-plans__features span {
	flex: 1;
	min-width: 0;
}

/* Le bouton descend en pied de carte : des cartes de hauteurs inégales alignent leurs boutons. */
.egmam-plans__btnwrap {
	margin-top: auto;
	padding-top: 18px;
}

.egmam-plans__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--egm-ctl-h, 38px);
	padding: 6px 16px;
	border-radius: 10px;
	border: 1px solid var(--egmam-accent);
	background: var(--egmam-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.egmam-plans__cta:hover,
.egmam-plans__cta:focus-visible {
	color: #fff;
	filter: brightness(1.08);
	text-decoration: none;
}

.egmam-plans__cta:focus-visible {
	outline: 2px solid var(--egmam-accent);
	outline-offset: 2px;
}

/* ── Le style réglé dans Access Master (`card_config`, seulement s'il est ENREGISTRÉ) ─────── */
.egmam-plans__card.is-styled .egmam-plans__amount {
	color: var(--egmam-plan-price, var(--egmam-ink));
}

.egmam-plans__card.is-styled .egmam-plans__chip {
	background: color-mix(in srgb, var(--egmam-plan-price, var(--egmam-accent)) 14%, transparent);
	color: var(--egmam-plan-price, var(--egmam-accent-ink));
}

.egmam-plans__card.is-styled .egmam-plans__badge {
	background: var(--egmam-plan-badge-bg, #fff4dc);
	color: var(--egmam-plan-badge-ink, #9a5b00);
	border-color: transparent;
}

.egmam-plans__card.is-styled .egmam-plans__features svg {
	color: var(--egmam-plan-feat-icon, var(--egmam-accent-ink));
}

.egmam-plans__card.is-styled .egmam-plans__cta {
	background: var(--egmam-plan-cta-bg, var(--egmam-accent));
	color: var(--egmam-plan-cta-ink, #fff);
	border-color: var(--egmam-plan-cta-border, var(--egmam-plan-cta-bg, var(--egmam-accent)));
}

/* ── Aucun plan ───────────────────────────────────────────────────────────────────────────── */
.egmam-plans__empty {
	padding: 24px;
	border: 1px dashed var(--egmam-line);
	border-radius: var(--egmam-radius);
	background: var(--egmam-card);
	color: var(--egmam-muted);
	text-align: center;
}

/* 👆 R9-bis (831 ; ⚖️ D1 : 44 px au doigt, la souris garde 32 / 38) — mesurés à 390 tactile sur
   `/premium/` : segments Mensuel/Annuel 32, appels des offres 38. `--egm-tap-min` = jeton public
   de la cible tactile (repli 44 = la valeur servie). En FIN de feuille : à spécificité égale, la
   dernière règle gagne (les cotes de souris sont déclarées plus haut). */
@media (pointer: coarse) {
	.egmam-plans__segbtn,
	.egmam-plans__cta {
		min-height: var(--egm-tap-min, 44px);
	}
}