/*
 * Cartes d'accès aux simulateurs de planning, posées dans un article ou une
 * page. Volontairement autonome du CSS du questionnaire, bien plus lourd.
 *
 * Typographie et couleurs reprises du thème fsut62.fr : aucune police n'est
 * chargée ici.
 */

.fppa-liens {
	--fppa-l-encre: #151515;
	--fppa-l-douce: #596068;
	--fppa-l-bleu: #307baa;
	--fppa-l-bleu-fonce: #256187;
	--fppa-l-vert: #3f7a28;
	--fppa-l-vert-clair: #6aac4b;
	--fppa-l-papier: #f7f8f9;
	--fppa-l-trame: #e2e4e7;

	--fppa-l-titre: "Barlow Condensed", "Arial Narrow", sans-serif;

	margin: 2rem 0;
}

.fppa-liens *,
.fppa-liens *::before,
.fppa-liens *::after {
	box-sizing: border-box;
}

.fppa-liens__intro {
	margin: 0 0 0.9rem;
	font-weight: 600;
}

.fppa-liens__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem;
}

.fppa-liens__carte {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.1rem;
	background: #fff;
	border: 1px solid var(--fppa-l-trame);
	border-left: 5px solid var(--fppa-l-bleu);
	border-radius: 8px;
	text-decoration: none;
	color: var(--fppa-l-encre);
	box-shadow: 0 1px 2px rgba(21, 21, 21, 0.05);
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.fppa-liens__carte[data-accent="vert"] {
	border-left-color: var(--fppa-l-vert-clair);
}

.fppa-liens__carte:hover,
.fppa-liens__carte:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(21, 21, 21, 0.1);
	text-decoration: none;
}

.fppa-liens__carte:focus-visible {
	outline: 2px solid var(--fppa-l-encre);
	outline-offset: 3px;
}

.fppa-liens__pictogramme {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	background: #eaf3f8;
	color: var(--fppa-l-bleu-fonce);
}

.fppa-liens__carte[data-accent="vert"] .fppa-liens__pictogramme {
	background: #eef6ea;
	color: var(--fppa-l-vert);
}

.fppa-liens__corps {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.fppa-liens__metier {
	font-family: var(--fppa-l-titre);
	font-weight: 800;
	font-size: 1.4rem;
	line-height: 1.1;
	letter-spacing: 0.01em;
}

.fppa-liens__lieu {
	font-size: 0.9375rem;
	color: var(--fppa-l-douce);
}

/* La flèche indique le déplacement sans dépendre d'une police d'icônes. */
.fppa-liens__action {
	margin-top: 0.35rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--fppa-l-bleu-fonce);
}

.fppa-liens__carte[data-accent="vert"] .fppa-liens__action {
	color: var(--fppa-l-vert);
}

.fppa-liens__action::after {
	content: " \2192";
	display: inline-block;
	transition: transform 160ms ease;
}

.fppa-liens__carte:hover .fppa-liens__action::after {
	transform: translateX(3px);
}

.fppa-liens__mention {
	margin: 0.8rem 0 0;
	font-size: 0.875rem;
	color: var(--fppa-l-douce);
}

/* Carte unique : elle occupe toute la largeur plutôt que la moitié. */
.fppa-liens[data-solo] .fppa-liens__grille {
	grid-template-columns: 1fr;
}

@media (max-width: 34rem) {
	.fppa-liens__grille {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fppa-liens__carte,
	.fppa-liens__action::after {
		transition: none;
	}

	.fppa-liens__carte:hover,
	.fppa-liens__carte:focus-visible {
		transform: none;
	}
}