/*
	Bloc d'appel à l'abonnement, posé dans le corps des articles.
	Voir inc/bloc-formation.php pour ce qui décide de son affichage.

	Le bloc interrompt une lecture : il doit se distinguer du texte sans le repousser.
	D'où l'aplat marine, qui tranche franchement sur le fond clair de l'article, plutôt
	qu'une carte claire bordée qui se confondrait avec un encadré éditorial.

	⚠️ Aucune ombre portée : c'est une signature de la marque, la profondeur vient des
	aplats. Et aucun texte or sur fond clair (2:1, illisible) : ici l'or n'apparaît que
	sur le marine, où il contraste à 7,7:1.
*/

.ps-formation {
	margin: var(--ps-space-lg) 0;
	padding: var(--ps-space-md) var(--ps-space-md) calc(var(--ps-space-md) - 4px);
	border-radius: var(--ps-radius);
	background-color: var(--ps-navy);
	color: var(--ps-text-invert);
	font-family: var(--ps-font-display);
	box-shadow: none;
}

/* Or sur marine : 7,7:1. L'espacement et les capitales font le sur-titre, pas la taille. */
.ps-formation__surtitre {
	margin: 0 0 var(--ps-space-xs);
	color: var(--ps-gold);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
	Mis en forme comme un titre, mais c'est un paragraphe : le bloc est un aparté dans
	l'article, il n'a pas à entrer dans le plan du document. Voir bloc-formation.php.

	Pas de `text-transform: uppercase` ici, contrairement aux titres de section de la
	charte : la ligne porte le nom exact d'un module, et « COMPOSITION D'UN CHANT DE
	LOUANGE » en 900 se lit moins bien qu'en casse normale. Le sur-titre au-dessus tient
	déjà le rôle des capitales.
*/
.ps-formation__titre {
	margin: 0 0 var(--ps-space-xs);
	color: var(--ps-white);
	font-size: 20px;
	font-weight: 900;
	line-height: 1.25;
}

.ps-formation__detail {
	margin: 0 0 var(--ps-space-md);
	color: var(--ps-text-invert);
	font-size: 15px;
	line-height: 1.5;
}

.ps-formation__action {
	margin: 0;
}

/* Encre marine sur l'aplat or, jamais du blanc : le blanc sur or tombe à 2:1. */
.ps-formation__bouton {
	display: inline-block;
	padding: 12px 32px;
	border-radius: var(--ps-radius);
	background-color: var(--ps-gold);
	color: var(--ps-navy);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.2s ease;
}

.ps-formation__bouton:hover,
.ps-formation__bouton:focus {
	background-color: var(--ps-cream);
	color: var(--ps-navy);
	text-decoration: none;
}

/* Le focus doit rester visible sur l'aplat marine, où un contour marine disparaîtrait. */
.ps-formation__bouton:focus-visible {
	outline: 3px solid var(--ps-white);
	outline-offset: 3px;
}

@media screen and (min-width: 768px) {
	.ps-formation {
		padding: var(--ps-space-lg);
	}

	.ps-formation__titre {
		font-size: 22px;
	}
}

/* Le bouton pleine largeur sur mobile : à 32 px de marge intérieure, il déborderait. */
@media screen and (max-width: 480px) {
	.ps-formation__bouton {
		display: block;
		padding-inline: var(--ps-space-sm);
		text-align: center;
	}
}