/**
 * Abonnements Pricing — styles du tableau de prix comparatif
 * Chargé via wp_enqueue_style() dans le plugin.
 *
 * Pour surcharger depuis votre thème, ciblez les mêmes sélecteurs
 * dans votre style.css — la spécificité est volontairement basse.
 */

/* ─── Grille principale ─────────────────────────────────────── */

.abonnements-pricing {
	display: grid;
	grid-template-columns: repeat(var(--ap-columns, 4), minmax(0, 1fr));
	gap: 1.25rem;
	padding: 1.5rem 0;
}

@media (max-width: 900px) {
	.abonnements-pricing {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.abonnements-pricing {
		grid-template-columns: 1fr;
	}
}

/* ─── Carte ─────────────────────────────────────────────────── */

.abonnements-pricing__card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	margin-top: 1.5rem;
}

.abonnements-pricing__card--featured {
	border: 2px solid var(--eevm-accent, #8a5f31);
	margin-top: 0;
}

/* ─── Badge "Le plus populaire" ─────────────────────────────── */

.abonnements-pricing__badge {
	display: inline-block;
	background: var(--eevm-accent, #8a5f31);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 20px;
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(138, 95, 49, 0.35);
}

/* ─── Icône ─────────────────────────────────────────────────── */

.abonnements-pricing__icon {
	font-size: 36px;
	line-height: 1;
	margin: 0 0 12px;
	text-align: center;
	display: block;
}

/* ─── Nom & accroche ────────────────────────────────────────── */

.abonnements-pricing__name {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 4px;
	color: #111;
}

.abonnements-pricing__tagline {
	font-size: 13px;
	color: #666;
	margin: 0 0 14px;
}

/* ─── Prix ──────────────────────────────────────────────────── */

.abonnements-pricing__price {
	margin: 0 0 2px;
}

.abonnements-pricing__price-amount {
	font-size: 28px;
	font-weight: 700;
	color: #111;
}

.abonnements-pricing__price-currency {
	font-size: 14px;
	font-weight: 400;
	color: #888;
}

.abonnements-pricing__billing {
	font-size: 12px;
	color: #888;
	margin: 0 0 16px;
}

/* ─── Séparateur ────────────────────────────────────────────── */

.abonnements-pricing__divider {
	border: none;
	border-top: 1px solid #f0f0f0;
	margin: 0 0 14px;
}

/* ─── Liste des features ────────────────────────────────────── */

.abonnements-pricing__features {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	flex: 1;
}

.abonnements-pricing__feature {
	font-size: 13px;
	color: #555;
	padding: 6px 0;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	border-bottom: 1px solid #f5f5f5;
}

.abonnements-pricing__feature:last-child {
	border-bottom: none;
}

.abonnements-pricing__feature-icon {
	font-size: 13px;
	flex-shrink: 0;
	margin-top: 1px;
	font-weight: 700;
}

.abonnements-pricing__feature.is-included .abonnements-pricing__feature-icon {
	color: #1D9E75;
}

.abonnements-pricing__feature.is-excluded .abonnements-pricing__feature-icon {
	color: #D85A30;
}

.abonnements-pricing__feature.is-excluded {
	color: #aaa;
}

/* ─── Bouton CTA ────────────────────────────────────────────── */

.abonnements-pricing__cta {
	display: block;
	text-align: center;
	padding: 11px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid #ccc;
	background: transparent;
	color: #111;
	text-decoration: none;
	margin-top: auto;
	transition: background 0.15s, border-color 0.15s;
}

.abonnements-pricing__cta:hover {
	background: #f5f5f5;
	text-decoration: none;
	color: #111;
}

.abonnements-pricing .abonnements-pricing__cta--primary,
.abonnements-pricing .abonnements-pricing__cta--primary:visited {
	background: var(--eevm-accent, #8a5f31);
	color: #fff;
	border-color: var(--eevm-accent, #8a5f31);
}

.abonnements-pricing .abonnements-pricing__cta--primary:hover,
.abonnements-pricing .abonnements-pricing__cta--primary:focus {
	background: var(--eevm-accent-dk, #6f4b25);
	border-color: var(--eevm-accent-dk, #6f4b25);
	color: #fff;
}

.abonnements-pricing .abonnements-pricing__cta,
.abonnements-pricing .abonnements-pricing__cta:hover {
	color: #111;
}

/* ─── État vide ─────────────────────────────────────────────── */

.abonnements-pricing__empty {
	color: #888;
	font-style: italic;
}

/* ─── Toggle Mensuel / Annuel ───────────────────────────────── */

.ap-toggle {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 12px 0 10px;
}

.ap-toggle__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	user-select: none;
}

.ap-toggle__option:hover {
	border-color: var(--eevm-accent, #8a5f31);
	background: var(--eevm-cream, #f7f2ea);
}

.ap-toggle__option--selected {
	border-color: var(--eevm-accent, #8a5f31);
	background: var(--eevm-cream, #f7f2ea);
}

.ap-toggle__radio {
	accent-color: var(--eevm-accent, #8a5f31);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	cursor: pointer;
}

.ap-toggle__label {
	font-size: 13px;
	font-weight: 600;
	color: #111;
	min-width: 52px;
}

.ap-toggle__price {
	font-size: 14px;
	font-weight: 700;
	color: #111;
	margin-left: auto;
	text-align: right;
	line-height: 1.3;
}

.ap-toggle__price small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: #888;
}

/* ─── Encadre contextuel (sans engagement / economie) ───────── */

.ap-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 10px;
	line-height: 1.4;
}

.ap-notice__icon {
	font-size: 14px;
	flex-shrink: 0;
}

.ap-notice--neutral {
	background: #f3f3f3;
	color: #555;
	border: 1px solid #e0e0e0;
}

.ap-notice--savings {
	background: #eaf6f0;
	color: #0f6e56;
	border: 1px solid #9fe1cb;
}

.ap-notice--savings strong {
	font-weight: 700;
}

/* ─── Responsive mobile ─────────────────────────────────────── */

@media (max-width: 560px) {
	.ap-toggle__price {
		font-size: 13px;
	}

	.ap-toggle__option {
		padding: 9px 10px;
	}
}
/* ─── Offres spéciales (sous-catégorie, au-dessus des abonnements) ─── */

.abonnements-pricing-special {
	margin: 0 0 2rem;
}

.abonnements-pricing-special__title {
	text-align: center;
	margin: 0 0 0.5rem;
}

.abonnements-pricing--special {
	grid-template-columns: repeat(var(--ap-columns, 1), minmax(0, 360px));
	justify-content: center;
}

@media (max-width: 560px) {
	.abonnements-pricing--special {
		grid-template-columns: 1fr;
	}
}

.abonnements-pricing__special-desc {
	font-size: 13px;
	color: #555;
	margin: 0 0 1.25rem;
}

.abonnements-pricing__special-desc p {
	margin: 0 0 0.5em;
}

/* ─── Gel temporaire : cartes grisées, non cliquables ───────── */

.abonnements-pricing__notice-frozen {
	text-align: center;
	background: var(--eevm-cream, #f7f2ea);
	border: 1px solid var(--eevm-accent, #8a5f31);
	border-radius: 8px;
	padding: 12px 16px;
	margin: 0 0 1rem;
}

.abonnements-pricing__card--disabled > *:not(.abonnements-pricing__cta) {
	opacity: 0.55;
}

.abonnements-pricing__card--disabled {
	background: #fafafa;
}

.abonnements-pricing .abonnements-pricing__cta--disabled,
.abonnements-pricing .abonnements-pricing__cta--disabled:hover {
	background: #e9e9e9;
	border-color: #ddd;
	color: #888;
	cursor: not-allowed;
	pointer-events: none;
}
/* Texte blanc sur les boutons principaux (précommande + offre recommandée) */
.abonnements-pricing a.abonnements-pricing__cta--primary,
.abonnements-pricing a.abonnements-pricing__cta--primary:visited,
.abonnements-pricing a.abonnements-pricing__cta--primary:hover,
.abonnements-pricing a.abonnements-pricing__cta--primary:focus {
	color: #fff;
}