/*
   Page "Fidélité" — contenu en dur, repris de la maquette Lovable (fidelite.tsx)
   La bannière hero est un composant partagé, voir hero-banner.css et
   partials/hero-banner/hero-banner.php.
   Media queries : voir fidelite-responsive.css.
*/

.fid-bareme {
	padding: 64px 0;
}

.fid-bareme__heading {
	text-align: center;
}

.fid-bareme__script {
	color: var(--sunny);
	font-size: 1.5rem;
}

.fid-bareme__title {
	margin-top: 8px;
	color: var(--forest);
	font-size: 2rem;
}

.fid-bareme__grid {
	margin-top: 40px;
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

.fid-bareme__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 1px solid color-mix(in srgb, var(--forest) 10%, transparent);
	background: color-mix(in srgb, var(--forest) 5%, transparent);
	border-radius: 24px;
	padding: 24px;
}

.fid-bareme__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--forest);
	color: var(--cream);
}

.fid-bareme__card-label {
	margin-top: 8px;
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--foreground) 75%, transparent);
}

.fid-bareme__card-value {
	margin-top: 8px;
	color: var(--forest);
	font-size: 1.5rem;
}

.fid-bareme__footnote {
	margin-top: 32px;
	text-align: center;
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--foreground) 60%, transparent);
}

.fid-divider {
	border: none;
	border-top: 1px solid color-mix(in srgb, var(--forest) 15%, transparent);
}

.fid-recompense {
	padding: 64px 0;
}

.fid-recompense__grid {
	display: grid;
	align-items: stretch;
	overflow: hidden;
	border-radius: 32px;
	gap: 24px;
}

.fid-recompense__title {
	color: var(--forest);
	font-size: 2rem;
	white-space: pre-line;
}

.fid-recompense__body {
	margin-top: 16px;
	color: color-mix(in srgb, var(--foreground) 75%, transparent);
}

.fid-recompense__notice {
	margin-top: 24px;
	font-size: 0.875rem;
}

.fid-recompense__notice strong {
	color: var(--forest);
}

.fid-recompense__img {
	width: 100%;
	height: 100%;
	min-height: 200px;
	object-fit: cover;
	border-radius: 32px;
}