/* ═══════════════════════════════════════════════════════════════════════════
   08 — L'APPEL FINAL

   Partagé par `fmt/appel` (marque blanche) et `fmt/privee-appel` (marque
   privée). C'est la seule bande pétrole de chaque page : `.fmt-section`,
   `.fmt-section--petrole` et `.fmt-invert` (style.css) posent le fond, les
   rembourrages, le texte ivoire et les deux boutons — principal en ivoire,
   second en voile ivoire, sans contour. On ne règle ici que la grille, les
   tailles et le sillage.

   La bande touche le pied de page, pétrole lui aussi, sans trait : c'est le
   sillage posé à son pied qui fait la transition.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Le sillage est posé en absolu au pied de la bande, sur toute sa largeur :
 * le rembourrage bas de la bande s'allonge de sa hauteur, si bien que le
 * texte garde tout le calme du rythme commun au-dessus de la courbe. La
 * hauteur est celle de `.fmt-sillage` (style.css), reprise ici pour que les
 * deux restent liées. Deux classes : la règle l'emporte sur le rembourrage
 * de `.fmt-section` quel que soit l'ordre des feuilles.
 */
.fmt-section.fmt-appel {
	--appel-sillage-h: 72px;

	position: relative;
	padding-block-end: calc(var(--bande-y) + var(--appel-sillage-h));
}

.fmt-appel .fmt-appel__sillage {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--appel-sillage-h);
}

/*
 * core/columns impose `align-items: normal !important` et une marge basse de
 * 1,75 em : on centre chaque colonne par `align-self`, que rien ne force, et
 * on rend la marge au rembourrage de la bande.
 */
.fmt-appel .fmt-appel__grille.wp-block-columns {
	justify-content: space-between;
	gap: var(--space-32) var(--space-64);
	margin-block: 0;
}

.fmt-appel .fmt-appel__grille > .wp-block-column {
	align-self: center;
}

.fmt-appel .fmt-appel__grille > .fmt-appel__texte {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	max-inline-size: 40rem;
}

/* La colonne d'actions ne s'étire pas : 280 px. Écrit ici plutôt que dans
   l'attribut `width` du bloc, qui produirait un style en ligne. Le repli
   mobile de core/columns reste prioritaire (flex-basis: 100% !important). */
.fmt-appel .fmt-appel__grille > .fmt-appel__cote {
	flex-basis: 280px;
	flex-grow: 0;
}

.fmt-appel .fmt-appel__texte > * {
	margin-block: 0;
}

/* La prise de parole de la page : 36 px au téléphone, 56 px au bureau.
   `.fmt-invert` la passe en ivoire. */
.fmt-appel .fmt-appel__titre {
	font-size: var(--wp--preset--font-size--h-1);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

/* Ivoire à 64 % : 5,36:1 sur le pétrole. */
.fmt-appel .fmt-appel__accroche {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--lh-lead);
	color: var(--text-on-inverse-muted);
	text-wrap: pretty;
}

/* Deux classes : la mise en page « flex » de core/buttons pose son propre écart
   avec la même spécificité, dans une feuille dont l'ordre n'est pas garanti. */
.fmt-appel .fmt-appel__actions {
	gap: var(--space-12);
}

.fmt-appel .fmt-appel__actions .wp-block-button {
	width: 100%;
}

@media (max-width: 781px) {
	.fmt-appel .fmt-appel__actions {
		gap: var(--space-8);
	}
}