/* ═══════════════════════════════════════════════════════════════════════════
   12 — VENDRE SOUS VOTRE MARQUE

   Bande lin (`.fmt-section--lin`). Deux grandes cartes côte à côte, rayon
   12 px, sans trait ni ombre : elles se détachent de la bande par leur teinte.
   La marque blanche prend la surface relevée, la marque privée l'ivoire clair
   — les deux jetons que la bande lin redéfinit. Elles passent l'une sous
   l'autre sous 900 px. Chaque carte est cliquable en entier, sans être un
   lien.

   Les composants partagés — `.fmt-section`, `.fmt-section--lin`, `.fmt-chip`,
   `.fmt-display` — viennent de style.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La navigation pointe `#offres` : la section ne doit pas s'arrêter collée
   sous la barre de navigation. */
.fmt-offres {
	scroll-margin-block-start: var(--fmt-nav-h);
}

.fmt-offres > *,
.fmt-offres .wp-block-group > * {
	margin-block: 0;
}

/* ─── En-tête de section ─────────────────────────────────────────────────── */

/* Titre de section du kit : 48 px au bureau, sans descendre sous 30 px. */
.fmt-offres .fmt-offres__titre {
	max-inline-size: 50rem;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

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

.fmt-offres .fmt-offres__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-16);
	margin-block-start: var(--space-32);
}

@media (min-width: 900px) {
	.fmt-offres .fmt-offres__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-24);
		margin-block-start: var(--space-48);
	}
}

/* ─── Une carte ──────────────────────────────────────────────────────────── */

.fmt-offres .fmt-offres__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
	border-radius: var(--radius-12);
	padding: clamp(var(--space-24), 4vw, var(--space-48));
	transition: transform var(--dur-ui) var(--ease-soft);
}

.fmt-offres .fmt-offres__carte--blanche {
	background: var(--surface-contenant);
}

.fmt-offres .fmt-offres__carte--privee {
	background: var(--surface-contenant-survol);
}

/* Au survol, la carte monte d'un pixel et sa pastille fonce ; la teinte de
   fond ne change pas — éclaircie d'un cran, la carte blanche prendrait
   exactement celle de sa voisine, et la distinction entre les deux offres se
   perdrait sous le pointeur. */
.fmt-offres .fmt-offres__carte:hover {
	transform: translateY(var(--lift-hover));
}

.fmt-offres .fmt-offres__carte:active {
	transform: translateY(var(--lift-hover)) scale(var(--scale-press));
}

/* Le focus est rendu par la carte entière : c'est elle qui est la cible. Même
   halo que le reste du site, au clavier seulement. */
.fmt-offres .fmt-offres__carte:has(.fmt-offres__lien:focus-visible) {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Sur la carte blanche, la puce garde le lin de `.fmt-chip` : un beige plus
   foncé que la carte, sans contour. Sur la carte privée, `.fmt-chip--accent`
   la passe en pétrole plein. */

/* Titre de carte en Fraunces : 28 px au téléphone, 40 px au bureau. */
.fmt-offres .fmt-offres__nom {
	font-size: clamp(var(--wp--preset--font-size--h-3), 3.4vw, 2.5rem);
	line-height: var(--lh-subsection);
	letter-spacing: var(--track-subsection);
}

/* Texte discret : 6,05:1 sur la surface relevée, 6,37:1 sur l’ivoire clair. */
.fmt-offres .fmt-offres__texte {
	max-inline-size: 28rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--lh-lead);
	color: var(--text-muted);
	text-wrap: pretty;
}

/* ─── Les trois faits ────────────────────────────────────────────────────── */

/* La liste reste une liste pour les lecteurs d'écran ; les puces du
   navigateur et le retrait disparaissent, remplacés par un point cuivre — un
   repère, donc rond, et du décor : le cuivre ne porte jamais de texte. */
.fmt-offres .fmt-offres__faits {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin-block-start: var(--space-8);
	padding-inline-start: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--lh-ui);
	color: var(--text-body);
}

.fmt-offres .fmt-offres__faits > li {
	display: flex;
	align-items: baseline;
	gap: var(--space-12);
}

.fmt-offres .fmt-offres__faits > li::before {
	content: "";
	flex: none;
	inline-size: 5px;
	block-size: 5px;
	border-radius: var(--radius-pill);
	background: var(--cuivre);
	transform: translateY(-2px);
}

/* ─── L'appel à l'action ─────────────────────────────────────────────────── */

/* `margin-block-start: auto` colle l'appel au bas de la carte : les deux
   cartes n'ont pas la même quantité de texte, mais leurs deux flèches
   s'alignent sur la même ligne. */
.fmt-offres .fmt-offres__action {
	margin-block-start: auto;
	padding-block-start: var(--space-24);
}

.fmt-offres .fmt-offres__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--space-12);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--track-ui);
	color: var(--petrole);
	text-decoration: none;
}

/* Lien étiré : le libellé porte le lien, le pseudo-élément couvre la carte.
   Aucun autre élément de la carte n'est cliquable, il n'y a pas de conflit. */
.fmt-offres .fmt-offres__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* L'anneau de focus est déjà porté par la carte : on évite le doublon. */
.fmt-offres .fmt-offres__lien:focus-visible {
	outline: none;
}

/* La pastille ronde de la flèche : lin sur la carte blanche, pétrole plein sur
   la carte privée. Au survol de la carte, elle fonce d'un cran. */
.fmt-offres .fmt-offres__pastille {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--radius-pill);
	background: var(--lin);
	color: var(--petrole);
	transition: background-color var(--dur-quick) var(--ease-soft);
}

.fmt-offres .fmt-offres__carte:hover .fmt-offres__pastille {
	background: var(--lin-survol);
}

.fmt-offres .fmt-offres__carte--privee .fmt-offres__pastille {
	background: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-offres .fmt-offres__carte--privee:hover .fmt-offres__pastille {
	background: var(--petrole-survol);
}

/* La flèche file d'un cran dans sa direction au survol de la carte. Un seul
   geste, joué une fois : aucune animation permanente. */
.fmt-offres .fmt-offres__fleche {
	display: block;
	inline-size: 16px;
	block-size: 16px;
	transition: transform var(--dur-ui) var(--ease-soft);
}

.fmt-offres .fmt-offres__carte:hover .fmt-offres__fleche {
	transform: translate(2px, -2px);
}