/* ==========================================================================
   AFPC - finitions CSS
   Ce qui ne se fait pas (proprement) via theme.json / réglages de blocs.
   ========================================================================== */

/* --- Eyebrow "Bienvenue à l'AFPC" : pilule arrondie --- */
.afpc-eyebrow {
	display: inline-block;
	border-radius: 999px;
	width: fit-content;
}

/* --- Carte portrait : image + bandeau nom superposé, coins arrondis --- */
.afpc-portrait {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 20px 45px rgba(13, 115, 119, 0.18);
	line-height: 0; /* évite l'espace sous l'image */
}

.afpc-portrait__img,
.afpc-portrait__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Bandeau nom en bas de la carte, dégradé pour lisibilité */
.afpc-portrait__caption {
	position: absolute;
	inset: auto 0 0 0;
	line-height: 1.3;
	background: linear-gradient(
		to top,
		rgba(10, 46, 61, 0.92) 0%,
		rgba(10, 46, 61, 0.55) 60%,
		rgba(10, 46, 61, 0) 100%
	);
}

.afpc-portrait__caption p {
	margin: 0;
}

/* --- Cartes vision / mission / ambition --- */
.afpc-card {
	height: 100%;
}

.afpc-card h3 {
	position: relative;
	padding-left: 3.25rem;
	min-height: 2.5rem;
	display: flex;
	align-items: center;
}

/* Pastille ronde décorative devant chaque titre de carte.
   Remplaçable par une vraie icône plus tard (bloc image / SVG). */
.afpc-card h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(13, 115, 119, 0.2);
}

/* --- Responsive : empile proprement le hero sur mobile --- */
@media (max-width: 781px) {
	.afpc-portrait {
		margin-top: 2rem;
	}
}