/* Circle — photo ronde et arcs de couleur. */
.epm-plist.epm-pt-circle .epm-ci {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.epm-plist.epm-pt-circle .epm-ci__ring {
	position: relative;
	width: var(--epm-pp-photo, 220px);
	max-width: 100%;
	margin-bottom: 18px;
	padding: 20px;
}

.epm-plist.epm-pt-circle .epm-ci__ring::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 20deg, var(--epm-pp-accent) 0 27%, transparent 27% 34%, color-mix(in srgb, var(--epm-pp-accent) 75%, #fff) 34% 62%, transparent 62% 69%, var(--epm-pp-accent) 69% 93%, transparent 93%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
	transition: transform .8s ease;
}

.epm-plist.epm-pt-circle .epm-ci:hover .epm-ci__ring::before {
	transform: rotate(60deg);
}

.epm-plist.epm-pt-circle .epm-pp__media {
	border: 5px solid var(--epm-pp-card, #fff);
	box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .35);
}

.epm-plist.epm-pt-circle .epm-ci__name {
	color: var(--epm-pp-name, var(--epm-pp-accent));
	font-size: var(--epm-pp-name-size, 22px);
	font-weight: 500;
}

.epm-plist.epm-pt-circle .epm-ci__role {
	color: var(--epm-pp-role, #6b7280);
	font-size: var(--epm-pp-role-size, 16px);
}

.epm-plist.epm-pt-circle .epm-ci__org {
	color: var(--epm-pp-org, var(--epm-pp-text, #9ca3af));
	font-size: 14px;
}
