/* ==========================================================================
   MF Operator Card — Carte opérateur Gutenberg (autonome)
   Palette neutre par défaut + variables CSS dynamiques injectées par le bloc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables locales : palette neutre par défaut (overridable par inline-style)
   -------------------------------------------------------------------------- */

.mf-card {
	/* Couleurs personnalisables — overridées par render.php via style="--mfoc-*: ..." */
	--mfoc-card-bg:        #ffffff;
	--mfoc-card-border:    #0a0a0a;
	--mfoc-rank-bg:        #0a0a0a;
	--mfoc-rank-text:      #ffffff;
	--mfoc-badge-bg:       rgba(10, 10, 10, 0.06);
	--mfoc-badge-border:   rgba(10, 10, 10, 0.25);
	--mfoc-badge-text:     #0a0a0a;
	--mfoc-star:           #F59E0B;
	--mfoc-star-empty:     #E5E5E5;
	--mfoc-bonus:          #0a0a0a;
	--mfoc-cta-bg:         #0a0a0a;
	--mfoc-cta-text:       #ffffff;
	--mfoc-feature-check:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%2310B981' d='M13.78 3.97a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06 0L1.97 9.28a.75.75 0 1 1 1.06-1.06l3.22 3.22 6.97-6.97a.75.75 0 0 1 1.06 0z'/></svg>");

	/* Dimensions personnalisables — overridées par render.php */
	--mfoc-padding-y:      19px;
	--mfoc-padding-x:      23px;
	--mfoc-radius:         0px;
	--mfoc-border-width:   1px;
	--mfoc-border-style:   solid;
	--mfoc-shadow:         0 4px 16px rgba(0, 0, 0, .08);

	/* Tokens internes (non personnalisables) */
	--mfoc-ink:            #0a0a0a;
	--mfoc-ink-2:          #404040;
	--mfoc-ink-3:          #525252;
	--mfoc-ink-4:          #737373;
	--mfoc-border-light:   #E5E5E5;
	--mfoc-radius-sm:      6px;
	--mfoc-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Carte : grille 6 colonnes  RANG · LOGO · INFO · BONUS · FEATURES · ACTION
   -------------------------------------------------------------------------- */

.mf-card {
	display: grid;
	grid-template-columns: 36px 92px minmax(180px, 1fr) 150px 175px 175px;
	gap: 18px;
	align-items: center;
	background: var(--mfoc-card-bg);
	color: var(--mfoc-ink);
	border: var(--mfoc-border-width) var(--mfoc-border-style) var(--mfoc-card-border);
	border-radius: var(--mfoc-radius);
	padding: var(--mfoc-padding-y) var(--mfoc-padding-x);
	margin: 14px 0;
	box-shadow: var(--mfoc-shadow);
	transition: transform .15s, box-shadow .2s;
}
.mf-card:hover {
	transform: translateY(-1px);
}

/* Si pas de rang, on passe en 5 colonnes */
.mf-card:not(:has(.mf-card__rank)) {
	grid-template-columns: 92px 1fr 160px 180px 180px;
}

/* RANG */
.mf-card__rank {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mfoc-rank-bg);
	color: var(--mfoc-rank-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
}

/* LOGO 92×92 */
.mf-card__media {
	display: flex;
	justify-content: center;
	align-items: center;
}
.mf-card__media img {
	max-width: 92px;
	max-height: 92px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--mfoc-radius-sm);
}

/* INFO */
.mf-card__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.mf-card__title {
	font-size: 1.25rem;
	margin: 0;
	color: var(--mfoc-ink);
	font-weight: 800;
	letter-spacing: -.015em;
}

/* Badge (pilule outline + point) */
.mf-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	width: fit-content;
	background: var(--mfoc-badge-bg);
	border: 1px solid var(--mfoc-badge-border);
	color: var(--mfoc-badge-text);
	text-transform: uppercase;
	font-family: var(--mfoc-font);
	white-space: nowrap;
}
.mf-badge::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* Étoiles + score */
.mf-card__info-top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.mf-stars {
	display: inline-flex;
	gap: 2px;
	font-size: 16px;
	line-height: 1;
}
.mf-stars .star { color: var(--mfoc-star-empty); }
.mf-stars .star--filled { color: var(--mfoc-star); }

.mf-card__score {
	display: inline-flex;
	align-items: center;
	background: rgba(0, 0, 0, .05);
	color: var(--mfoc-ink-2);
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
}
.mf-card__score-slash {
	margin: 0 3px;
	opacity: .7;
}

/* BONUS */
.mf-card__bonus {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mf-card__bonus-label {
	font-size: 12px;
	color: var(--mfoc-ink-4);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.mf-card__bonus-amount {
	font-size: 30px;
	color: var(--mfoc-bonus);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}
.mf-card__bonus-extra {
	font-size: 12px;
	color: var(--mfoc-ink-3);
}

/* FEATURES */
.mf-card__features ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.mf-card__features li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--mfoc-ink-2);
	margin: 0;
}
.mf-card__features li::before {
	content: "";
	width: 16px; height: 16px;
	flex-shrink: 0;
	background: var(--mfoc-feature-check) center / contain no-repeat;
}

/* ACTION : code promo + bouton */
.mf-card__action {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Bouton CTA */
.mf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	font-size: .875rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	transition: transform .12s, box-shadow .15s, filter .15s;
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
	font-family: var(--mfoc-font);
}
.mf-btn:hover { transform: translateY(-1px); }
.mf-btn:active { transform: translateY(0); }

.mf-btn--primary {
	background: var(--mfoc-cta-bg);
	color: var(--mfoc-cta-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	position: relative;
}
.mf-btn--primary:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}
.mf-btn--primary:active {
	transform: translateY(0);
	filter: brightness(.96);
}

/* Bouton copier le code promo */
.mf-copy.mf-card__promo,
.mf-card__promo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #f5f5f5;
	border: 1.5px solid var(--mfoc-border-light);
	border-radius: var(--mfoc-radius-sm);
	padding: 8px 12px;
	width: 100%;
	cursor: pointer;
	font-family: inherit;
	color: var(--mfoc-ink-2);
	position: relative;
	transition: background .15s, border-color .15s, transform .12s;
	-webkit-tap-highlight-color: transparent;
}
.mf-copy.mf-card__promo:hover {
	background: #efefef;
	border-color: #cfcfcf;
	color: var(--mfoc-ink);
}
.mf-copy.mf-card__promo:active { transform: scale(.98); }
.mf-copy.mf-card__promo:focus-visible {
	outline: 2px solid #cfcfcf;
	outline-offset: 2px;
}

.mf-card__promo-code {
	color: var(--mfoc-ink);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .05em;
	font-family: inherit;
}

/* Icônes : copy par défaut, check sur is-copied */
.mf-copy__icon-copy,
.mf-copy__icon-done {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: opacity .2s, transform .2s;
}
.mf-copy__icon-done {
	position: absolute;
	right: 12px;
	opacity: 0;
	transform: scale(.6);
	color: var(--mfoc-ink-3);
}
.mf-copy.is-copied .mf-copy__icon-copy {
	opacity: 0;
	transform: scale(.6);
}
.mf-copy.is-copied .mf-copy__icon-done {
	opacity: 1;
	transform: scale(1);
}

/* Feedback "Copié !" */
.mf-copy__feedback {
	position: absolute;
	top: -32px;
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--mfoc-ink);
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.mf-copy__feedback::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	transform: translateX(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	background: var(--mfoc-ink);
}
.mf-copy.is-copied .mf-copy__feedback {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.mf-copy.is-copied {
	background: #efefef;
	border-color: #cfcfcf;
	border-style: solid;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.mf-card {
		grid-template-columns: 36px 80px 1fr 140px 180px;
		gap: 16px;
		grid-template-areas:
			"rank logo info bonus action"
			". . features features features";
	}
	.mf-card__features {
		grid-area: features;
		margin-top: 4px;
	}
	.mf-card__features ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 18px;
	}
	.mf-card:not(:has(.mf-card__rank)) {
		grid-template-columns: 80px 1fr 140px 180px;
		grid-template-areas:
			"logo info bonus action"
			". features features features";
	}
}

@media (max-width: 800px) {
	.mf-card {
		grid-template-columns: 36px 80px 1fr;
		grid-template-areas:
			"rank logo info"
			". bonus bonus"
			". features features"
			". action action";
		gap: 14px 16px;
	}
	.mf-card:not(:has(.mf-card__rank)) {
		grid-template-columns: 80px 1fr;
		grid-template-areas:
			"logo info"
			"bonus bonus"
			"features features"
			"action action";
	}
	.mf-card__rank   { grid-area: rank; }
	.mf-card__media  { grid-area: logo; }
	.mf-card__info   { grid-area: info; }
	.mf-card__bonus  { grid-area: bonus; flex-direction: row; align-items: baseline; gap: 8px; }
	.mf-card__features { grid-area: features; }
	.mf-card__features ul {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	.mf-card__action { grid-area: action; }
}

@media (max-width: 500px) {
	.mf-card {
		grid-template-columns: 1fr;
		grid-template-areas: "rank" "logo" "info" "bonus" "features" "action";
		text-align: center;
	}
	.mf-card__rank { margin: 0 auto; }
	.mf-card__media { justify-content: center; }
	.mf-card__info { align-items: center; }
	.mf-card__info-top { justify-content: center; }
	.mf-card__bonus { align-items: center; flex-direction: column; }
	.mf-card__features ul {
		align-items: flex-start;
		text-align: left;
		max-width: 280px;
		margin: 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mf-card,
	.mf-btn,
	.mf-copy,
	.mf-copy__icon-copy,
	.mf-copy__icon-done,
	.mf-copy__feedback {
		transition: none !important;
	}
	.mf-btn:hover,
	.mf-card:hover {
		transform: none !important;
	}
}