/**
 * Widget Cercles interactifs : structure et états.
 *
 * NOTE SUR LA SPECIFICITE
 * -----------------------
 * Tous les selecteurs sont prefixes par `.myria-cercles` (0-2-0). Elementor
 * applique ses styles globaux via des selecteurs du type
 * `.elementor-kit-XX button`, soit 0-1-1 : une classe seule serait ecrasee
 * silencieusement, et seules les proprietes qu'Elementor ne declare pas
 * passeraient.
 *
 * NOTE SUR LES MODES
 * ------------------
 * La disposition est pilotee par data-mode, pose par le script :
 *
 *   bureau : la description se place sous son propre cercle
 *   commun : la description occupe toute la largeur sous la grille
 *
 * Des que les cercles passent sur plusieurs lignes, le mode commun est le seul
 * tenable : une description ancree sous un cercle de la premiere ligne
 * recouvrirait la seconde.
 */

.myria-cercles {
	--myria-cercles-cols: 4;
	--myria-cercles-taille: 190px;
	--myria-cercles-gouttiere: 24px;

	--myria-cercles-fond-1: #016978;
	--myria-cercles-fond-2: #6FAEB6;
	--myria-cercles-libelle-marge: 18%;

	--myria-cercles-arc-c: #FFDF00;
	--myria-cercles-arc-e: 7px;
	--myria-cercles-arc-ecart: 4px;
	--myria-cercles-arc-gain: 12;
	--myria-cercles-arc-bout: round;
	--myria-cercles-arc-len: 30;
	--myria-cercles-arc-rot: 0deg;

	--myria-cercles-zone: 170px;
	--myria-cercles-texte-l: 330px;
	--myria-cercles-texte-marge: 30px;
	--myria-cercles-duree: .35s;

	position: relative;
	padding-bottom: var(--myria-cercles-zone);
}

.myria-cercles,
.myria-cercles *,
.myria-cercles *::before,
.myria-cercles *::after {
	box-sizing: border-box;
}

.myria-cercles .myria-cercles__liste {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--myria-cercles-cols), minmax(0, 1fr));
	gap: var(--myria-cercles-gouttiere);
	justify-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.myria-cercles .myria-cercles__item {
	position: relative;
	width: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
}

/*
 * Reinitialisation complete du bouton : sans elle, la tete herite du style de
 * bouton global d'Elementor (fond de couleur, padding, coins arrondis,
 * majuscules forcees).
 */
.myria-cercles .myria-cercles__tete {
	display: block;
	width: var(--myria-cercles-taille);
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	font: inherit;
	color: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	min-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.myria-cercles .myria-cercles__tete:hover,
.myria-cercles .myria-cercles__tete:focus,
.myria-cercles .myria-cercles__tete:active {
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: inherit;
}

/* ---------- Le cercle ---------- */

.myria-cercles .myria-cercles__cercle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	padding: var(--myria-cercles-libelle-marge);
	border-radius: 50%;
	background: var(--myria-cercles-fond, var(--myria-cercles-fond-1));
	transition: background-color var(--myria-cercles-duree) ease;
}

/* Alternance par defaut, surchargeable cercle par cercle. */
.myria-cercles .myria-cercles__item:nth-child(even) .myria-cercles__cercle {
	background: var(--myria-cercles-fond, var(--myria-cercles-fond-2));
}

.myria-cercles .myria-cercles__libelle {
	position: relative;
	z-index: 1;
	display: block;
	text-align: center;
	transition: color var(--myria-cercles-duree) ease;
}

.myria-cercles .myria-cercles__libelle a {
	color: inherit;
	text-decoration: none;
}

/* ---------- L'arc ---------- */

/*
 * L'arc deborde du cercle de la valeur d'ecart : le SVG est donc etendu au-dela
 * des limites du cercle par des valeurs d'inset negatives.
 */
.myria-cercles .myria-cercles__arc {
	position: absolute;
	top: calc(-1 * (var(--myria-cercles-arc-ecart) + var(--myria-cercles-arc-e)));
	right: calc(-1 * (var(--myria-cercles-arc-ecart) + var(--myria-cercles-arc-e)));
	bottom: calc(-1 * (var(--myria-cercles-arc-ecart) + var(--myria-cercles-arc-e)));
	left: calc(-1 * (var(--myria-cercles-arc-ecart) + var(--myria-cercles-arc-e)));
	overflow: visible;
	pointer-events: none;
	transform: rotate(var(--myria-cercles-arc-rot));
}

/*
 * LONGUEUR DE L'ARC : POURQUOI CE CALCUL
 *
 * Le reglage de l'editeur est un pourcentage du tour. Il faut donc le convertir
 * en unites de trace.
 *
 * La solution elegante consistait a poser pathLength="100" sur le cercle, ce
 * qui normalise la longueur du trace a 100 : le pourcentage aurait alors ete
 * utilisable tel quel. Mais lorsque cet attribut n'est pas honore, la longueur
 * reelle reprend le dessus (2 x PI x 48, soit environ 301 unites) : le motif de
 * tirets, plus court que le tour, SE REPETE et dessine plusieurs arcs au lieu
 * d'un seul.
 *
 * On calcule donc explicitement, sans dependre de pathLength :
 *   un pour cent du tour = 2 x PI x 48 / 100 = 3.015929 unites
 *
 * Le vide de 1000 unites sert de garde-fou : quelle que soit la longueur reelle
 * du trace, le motif ne peut jamais se repeter, donc jamais afficher un second
 * arc.
 */
.myria-cercles {
	--myria-cercles-pourcent: 3.015929;
}

.myria-cercles .myria-cercles__trace {
	fill: none;
	stroke: var(--myria-cercles-arc-c);
	stroke-width: var(--myria-cercles-arc-e);
	stroke-linecap: var(--myria-cercles-arc-bout);
	vector-effect: non-scaling-stroke;
	stroke-dasharray:
		calc(var(--myria-cercles-arc-len) * var(--myria-cercles-pourcent))
		1000;
	transition: stroke-dasharray var(--myria-cercles-duree) ease;
}

/*
 * Au survol comme sur le cercle actif, l'arc s'allonge du gain configure. Le
 * min() plafonne a 100 % du tour : au-dela, les deux extremites se
 * chevaucheraient.
 */
.myria-cercles .myria-cercles__item:hover .myria-cercles__trace,
.myria-cercles .myria-cercles__item.est-actif .myria-cercles__trace {
	stroke-dasharray:
		calc(
			min( 100, var(--myria-cercles-arc-len) + var(--myria-cercles-arc-gain) )
			* var(--myria-cercles-pourcent)
		)
		1000;
}

.myria-cercles .myria-cercles__tete:focus-visible .myria-cercles__cercle {
	outline: 3px solid var(--myria-cercles-arc-c);
	outline-offset: calc(var(--myria-cercles-arc-ecart) + var(--myria-cercles-arc-e));
}

/* ---------- Descriptions ---------- */

/*
 * Position absolue sous le cercle : toutes les descriptions demarrent a la meme
 * hauteur, quelle que soit leur longueur, et le passage de l'une a l'autre ne
 * provoque aucun deplacement du contenu qui suit.
 */
.myria-cercles .myria-cercles__desc {
	position: absolute;
	top: calc(100% + var(--myria-cercles-texte-marge));
	left: 50%;
	transform: translateX(-50%);
	width: var(--myria-cercles-texte-l);
	max-width: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--myria-cercles-duree) ease,
		visibility 0s linear var(--myria-cercles-duree);
}

.myria-cercles .myria-cercles__item.est-actif .myria-cercles__desc {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity var(--myria-cercles-duree) ease,
		visibility 0s linear 0s;
}

.myria-cercles.recale-bords .myria-cercles__item:first-child .myria-cercles__desc {
	left: 0;
	transform: none;
}

.myria-cercles.recale-bords .myria-cercles__item:last-child .myria-cercles__desc {
	left: auto;
	right: 0;
	transform: none;
}

/* =====================================================================
 * MODE COMMUN
 *
 * Le cercle repasse en position statique : la description se cale alors sur la
 * liste, et non plus sur sa colonne. Elle occupe ainsi toute la largeur et
 * s'affiche au meme endroit pour tous les cercles, sous la grille entiere.
 * ================================================================== */

.myria-cercles[data-mode="commun"] .myria-cercles__item {
	position: static;
}

.myria-cercles[data-mode="commun"] .myria-cercles__desc,
.myria-cercles[data-mode="commun"].recale-bords .myria-cercles__item:first-child .myria-cercles__desc,
.myria-cercles[data-mode="commun"].recale-bords .myria-cercles__item:last-child .myria-cercles__desc {
	left: 0;
	right: 0;
	width: auto;
	transform: none;
	top: calc(100% + var(--myria-cercles-texte-marge));
}

@media (prefers-reduced-motion: reduce) {
	.myria-cercles .myria-cercles__desc,
	.myria-cercles .myria-cercles__trace,
	.myria-cercles .myria-cercles__cercle,
	.myria-cercles .myria-cercles__libelle {
		transition: none;
	}
}