/* FAC — Applications
   Toutes les valeurs viennent des variables émises sur la section.
   Pour surcharger depuis le thème : .fac-app { --fac-accent: #B4121C; } */

.fac-app {
	background: var(--fac-fond, #111214);
	color: var(--fac-texte, rgba(255, 255, 255, .68));
	padding-block: var(--fac-padding, clamp(60px, 8vw, 104px));
	font-family: var(--fac-p-texte, sans-serif);
}

.fac-app__contenu {
	width: min(var(--fac-largeur, 1220px), 100%);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 64px);
}

/* --- en-tête de section --- */
.fac-app__surtitre {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--fac-p-mono, monospace);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fac-chapeau, rgba(255, 255, 255, .66));
}

.fac-app__surtitre::before {
	content: "";
	flex: none;
	width: 26px;
	height: 2px;
	background: var(--fac-accent, #D91F2A);
}

.fac-app__titre {
	margin: 0;
	font-family: var(--fac-p-titre, sans-serif);
	font-size: var(--fac-t-titre, clamp(30px, 4.6vw, 54px));
	font-weight: 700;
	line-height: .95;
	letter-spacing: .005em;
	text-transform: var(--fac-casse, uppercase);
	color: var(--fac-titre, #fff);
}

.fac-app__chapeau {
	max-width: 62ch;
	margin: 14px 0 0;
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.6;
	color: var(--fac-chapeau, rgba(255, 255, 255, .66));
}

/* --- grille --- */
.fac-app__grille {
	display: grid;
	grid-template-columns: var(--fac-colonnes, repeat(auto-fit, minmax(238px, 1fr)));
	gap: var(--fac-gap, 1px);
	margin-top: 48px;
}

.fac-app__carte {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 30px 26px 32px;
	background: var(--fac-carte, #111214);
	text-decoration: none;
	color: inherit;
	transition: background .2s ease;
}

.fac-app__carte:hover,
.fac-app__carte:focus-visible {
	background: var(--fac-survol, #1B1D20);
}

a.fac-app__carte:focus-visible {
	outline: 3px solid var(--fac-accent, #D91F2A);
	outline-offset: -3px;
}

/* --- photo --- */
.fac-app__photo {
	overflow: hidden;
	width: var(--fac-photo, 106px);
	height: var(--fac-photo, 106px);
	flex: none;
}

.fac-app__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fac-app--photo-ronde .fac-app__photo {
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--fac-filet, rgba(255, 255, 255, .2));
}

.fac-app--photo-angle .fac-app__photo {
	border-radius: 42px 0 0 0;
}

.fac-app--photo-aucune .fac-app__photo {
	width: calc(100% + 52px);
	height: auto;
	aspect-ratio: 4 / 3;
	margin: -30px -26px 4px;
}

/* --- textes de carte --- */
.fac-app__nom {
	margin: 0;
	font-family: var(--fac-p-titre, sans-serif);
	font-size: var(--fac-t-carte, clamp(20px, 2.4vw, 27px));
	font-weight: 700;
	line-height: 1.05;
	text-transform: var(--fac-casse, uppercase);
	color: var(--fac-titre, #fff);
}

.fac-app__texte {
	font-size: var(--fac-t-texte, 15.4px);
	line-height: 1.55;
	color: var(--fac-texte, rgba(255, 255, 255, .68));
}

.fac-app__texte p {
	margin: 0 0 .7em;
}

.fac-app__texte p:last-child {
	margin-bottom: 0;
}

/* --- étiquettes matière --- */
.fac-app__etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: auto 0 0;
	padding-top: 6px;
}

.fac-app__etiquette {
	padding: 4px 9px;
	border: 1px solid var(--fac-filet, rgba(255, 255, 255, .26));
	font-family: var(--fac-p-mono, monospace);
	font-size: var(--fac-t-etiq, 10.5px);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fac-etiquette, rgba(255, 255, 255, .8));
}

/* --- bouton --- */
.fac-app__action {
	margin: 34px 0 0;
}

.fac-app__bouton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: var(--fac-accent, #D91F2A);
	color: #fff;
	font-family: var(--fac-p-titre, sans-serif);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter .18s ease;
}

.fac-app__bouton:hover {
	filter: brightness(.86);
}

.fac-app__bouton:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* --- message d'administration --- */
.fac-app-vide {
	padding: 18px 20px;
	border: 1px dashed #b9bcc0;
	color: #5F666C;
}

@media (max-width: 640px) {
	.fac-app__grille {
		grid-template-columns: 1fr;
		margin-top: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fac-app *,
	.fac-app *::before {
		transition-duration: .001ms !important;
	}
}