/**
 * Widget « Portrait hero ».
 *
 * Repère : chaque flèche est un SVG en viewBox 0 0 200 200, arc de centre (100,100)
 * et de rayon 100. Le viewBox part de 0 pour que transform-origin: 50% 50% désigne
 * bien le centre du cercle (un viewBox à coordonnées négatives casse la rotation).
 * L'attribut pathLength="360" fait que toutes les longueurs de tirets s'expriment
 * en degrés — donc indépendantes de la taille d'affichage.
 *
 * Le sens de lecture : le masque découpe l'arc à la longueur voulue, le cercle
 * masqué porte le style (plein ou pointillé), et le SVG entier porte l'orientation.
 */

.ep-hero {
	--ep-hero-size: 200px;
	--ep-reach-left: 1;
	--ep-reach-right: 1;
	--ep-reach-top: 1;
	--ep-reach-bottom: 1;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * La reserve est asymetrique : un arc qui ne balaie qu'un demi-tour ne deborde que de
 * son cote. La reserver en carre centrerait la photo dans un encombrement qu'elle
 * n'occupe pas — 35 px de decalage sur le motif de la maquette. Les quatre variables
 * viennent de Hero_Arcs::extents(), en rayons de photo : un cote a 1 ne reserve rien.
 */
.ep-hero-reserve-yes .ep-hero {
	padding:
		calc(var(--ep-hero-size) / 2 * (var(--ep-reach-top) - 1))
		calc(var(--ep-hero-size) / 2 * (var(--ep-reach-right) - 1))
		calc(var(--ep-hero-size) / 2 * (var(--ep-reach-bottom) - 1))
		calc(var(--ep-hero-size) / 2 * (var(--ep-reach-left) - 1));
}

.ep-hero__stage {
	position: relative;
	width: var(--ep-hero-size);
	aspect-ratio: 1;
}

.ep-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 50%;
}

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

/* --- Flèches ---------------------------------------------------------- */

.ep-hero__arrow {
	--ep-arrow-ratio: 1.211;
	--ep-arrow-angle: 270deg;
	--ep-arrow-sweep: 180;
	--ep-arrow-gap: 2.68;
	--ep-arrow-width: 1.09;
	--ep-arrow-color: #fff;
	--ep-arrow-opacity: 1;
	--ep-arrow-dash: none;
	--ep-arrow-cap: butt;
	--ep-head-start: none;
	--ep-head-end: none;

	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--ep-hero-size) * var(--ep-arrow-ratio) * var(--ep-motif-scale, 1));
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ep-hero__spin {
	width: 100%;
	height: 100%;
}

.ep-hero__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	color: var(--ep-arrow-color);
	opacity: var(--ep-arrow-opacity);
	transform: rotate(calc(-90deg + var(--ep-arrow-angle) + var(--ep-motif-rotation, 0deg)));
}

/* Le masque : un trait épais dont la longueur vaut l'angle de l'arc. */
.ep-hero__wedge {
	fill: none;
	stroke: #fff;
	stroke-width: 40;
	stroke-dasharray: var(--ep-arrow-sweep) 360;
}

.ep-hero__ring {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ep-arrow-width);
	stroke-dasharray: var(--ep-arrow-dash);
	stroke-linecap: var(--ep-arrow-cap);
}

.ep-hero__head {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ep-arrow-width);
	stroke-linecap: round;
	stroke-linejoin: round;
	transform-box: view-box;
	transform-origin: 50% 50%;
}

.ep-hero__head--start {
	display: var(--ep-head-start);
}

.ep-hero__head--end {
	display: var(--ep-head-end);
	transform: rotate(calc(var(--ep-arrow-sweep) * 1deg));
}

/* --- Grappe de portraits ---------------------------------------------- */

/*
 * Le cadre porte le format ; chaque portrait est place en pourcentage de ce cadre.
 * --ep-hero-size vaut 100% sur le portrait : les arcs, dimensionnes en
 * calc(var(--ep-hero-size) * ...), se calent donc sur la boite du portrait et
 * la CSS des arcs est partagee telle quelle avec le widget « Portrait hero ».
 */
.ep-cluster {
	--ep-cluster-ratio: 0.9964;

	position: relative;
	width: 100%;
	margin-inline: auto;
	aspect-ratio: var(--ep-cluster-ratio);
}

.ep-cluster__item {
	--ep-hero-size: 100%;
	--ep-portrait-size: 20%;
	--ep-portrait-x: 50%;
	--ep-portrait-y: 50%;

	position: absolute;
	top: var(--ep-portrait-y);
	left: var(--ep-portrait-x);
	width: var(--ep-portrait-size);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
}

/* Reperes de calage, coupes en production. */
.ep-cluster-outline-yes .ep-cluster {
	outline: 1px dashed rgba(255, 255, 255, .45);
}

.ep-cluster-outline-yes .ep-cluster__item::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
	.ep-hero[data-reduce="1"] .ep-hero__spin,
	.ep-cluster[data-reduce="1"] .ep-hero__spin {
		animation: none !important;
	}
}