/* Module Divi « Portrait équipe »
   La photo détourée est plus haute que le cadre : elle est calée en bas du
   cadre et son haut dépasse de --mfc-overflow au-dessus. */

.mfc-portrait {
	--mfc-frame: #fde0e6;
	--mfc-footer: #ffffff;
	--mfc-overflow: 80px;
	--mfc-ratio: 118;          /* hauteur du cadre en % de sa largeur */
	--mfc-radius: 32px;
	--mfc-radius-br: 0px;      /* coin inférieur droit */
	--mfc-overlay: rgba(0, 0, 0, 0.45);

	display: block;
	position: relative;
	padding-top: var(--mfc-overflow); /* réserve la place du débordement */
	color: inherit;
	text-decoration: none;
}

/* Cadre coloré : la photo s'y appuie et en dépasse par le haut */
.mfc-portrait__frame {
	display: block;
	position: relative;
	aspect-ratio: 100 / var(--mfc-ratio);
	background: var(--mfc-frame);
	border-radius: var(--mfc-radius) var(--mfc-radius) 0 0;
}

/* Conteneur de la photo : aussi large que le cadre, il monte de --mfc-overflow
   au-dessus. Le clip-path coupe les côtés et le bas aux bords du cadre mais
   laisse le haut libre : le zoom au survol reste dans le cadre. */
.mfc-portrait__media {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: block;
	height: calc(100% + var(--mfc-overflow));
	clip-path: inset(-100vh 0 0 0);
}

.mfc-portrait .mfc-portrait__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;    /* garde la tête, recadre le bas si besoin */
	transform-origin: 50% 0;   /* le zoom part du haut : la tête ne monte pas */
	transition: transform 0.4s ease;
}

/* Dégradé pour la lisibilité du nom */
.mfc-portrait__frame::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 45%;
	background: linear-gradient(to top, var(--mfc-overlay), transparent);
	pointer-events: none;
}
.mfc-portrait--no-overlay .mfc-portrait__frame::after {
	display: none;
}

.mfc-portrait .mfc-portrait__name {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 3;
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1em;
}

/* Pied blanc avec le lien */
.mfc-portrait__footer {
	display: block;
	padding: 20px;
	background: var(--mfc-footer);
	border-radius: 0 0 var(--mfc-radius-br) var(--mfc-radius);
}
.mfc-portrait .mfc-portrait__link {
	color: #1d6fe8;
	font-size: 15px;
	line-height: 1.4em;
}
a.mfc-portrait:hover .mfc-portrait__link,
a.mfc-portrait:focus-visible .mfc-portrait__link {
	text-decoration: underline;
}

/* Sans lien : le cadre se ferme lui-même en bas */
.mfc-portrait--no-footer .mfc-portrait__frame {
	border-radius: var(--mfc-radius) var(--mfc-radius) var(--mfc-radius-br) var(--mfc-radius);
}
.mfc-portrait--no-footer .mfc-portrait__frame::after {
	border-radius: 0 0 var(--mfc-radius-br) var(--mfc-radius);
}
.mfc-portrait--no-footer .mfc-portrait__media {
	clip-path: inset(-100vh 0 0 0 round 0 0 var(--mfc-radius-br) var(--mfc-radius));
}

/* Survol : zoom découpé par le cadre */
.mfc-portrait--lift:hover .mfc-portrait__img,
.mfc-portrait--lift:focus-visible .mfc-portrait__img {
	transform: scale(1.06);
}
a.mfc-portrait:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.mfc-portrait__img {
		transition: none;
	}
}