/**
 * Widget Parcours à puces : structure et états.
 *
 * NOTE SUR LA SPECIFICITE
 * -----------------------
 * Tous les selecteurs sont prefixes par `.myria-parcours` (0-2-0) et non
 * ecrits en classe seule (0-1-0). Elementor applique en effet ses styles
 * globaux via des selecteurs du type `.elementor-kit-XX button` ou
 * `.elementor img`, soit 0-1-1 : une classe seule est systematiquement
 * ecrasee, silencieusement.
 *
 * NOTE SUR LES MODES
 * ------------------
 * La disposition est pilotee par l'attribut data-mode, pose par le script en
 * fonction de la largeur ET des reglages du widget :
 *
 *   bureau  : rangee horizontale, texte centre sous sa puce
 *   incline : rangee conservee, libelles inclines, textes au meme endroit
 *   empile  : etapes empilees, texte dans le flux
 *
 * Passer par un attribut plutot que par des media queries evite de dupliquer
 * chaque bloc de regles une fois par point de rupture.
 */

.myria-parcours {
	--myria-parcours-zone: 190px;
	--myria-parcours-texte-l: 340px;
	--myria-parcours-texte-marge: 34px;
	--myria-parcours-ecart: 18px;
	--myria-parcours-duree: .25s;

	--myria-parcours-puce: 26px;
	--myria-parcours-puce-bord: 2px;
	--myria-parcours-puce-bord-c: #016978;
	--myria-parcours-puce-bord-ca: #016978;
	--myria-parcours-puce-fond: transparent;
	--myria-parcours-puce-fond-a: #fff;
	--myria-parcours-point: 45%;
	--myria-parcours-point-c: #016978;

	--myria-parcours-trait-c: #016978;
	--myria-parcours-trait-e: 2px;
	--myria-parcours-trait-m: 14px;

	--myria-parcours-angle: -45deg;
	--myria-parcours-etiquette-h: 130px;

	position: relative;
	/*
	 * La reserve de hauteur du texte est portee ici, et non par la liste : la
	 * liste sert de reference de positionnement aux descriptions en mode
	 * incline, sa hauteur doit donc s'arreter sous les puces.
	 */
	padding-bottom: var(--myria-parcours-zone);
}

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

.myria-parcours .myria-parcours__liste {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.myria-parcours .myria-parcours__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

/*
 * Reinitialisation complete du bouton.
 *
 * Sans elle, la tete d'etape herite du style de bouton global d'Elementor :
 * fond de couleur, padding genereux, coins arrondis, majuscules forcees. Le
 * padding horizontal retrecit en outre la zone du libelle, ce qui fausse toute
 * la mise en page.
 */
.myria-parcours .myria-parcours__tete {
	position: relative;
	display: block;
	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-align: center;
	text-decoration: none;
	min-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

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

.myria-parcours .myria-parcours__libelle {
	display: block;
	margin-bottom: var(--myria-parcours-ecart);
	transition: color var(--myria-parcours-duree) ease;
}

.myria-parcours .myria-parcours__libelle a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Puce et trait ---------- */

.myria-parcours .myria-parcours__rail {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--myria-parcours-puce);
}

/*
 * Le trait est decoupe en deux moities portees par des pseudo-elements : la
 * gauche relie la puce precedente, la droite la suivante. Les moities
 * exterieures sont supprimees aux extremites. Aucun calcul de position en
 * JavaScript, donc rien a resynchroniser au redimensionnement.
 */
.myria-parcours .myria-parcours__rail::before,
.myria-parcours .myria-parcours__rail::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: var(--myria-parcours-trait-e);
	background: var(--myria-parcours-trait-c);
}

.myria-parcours .myria-parcours__rail::before {
	left: 0;
	right: calc(50% + var(--myria-parcours-puce) / 2 + var(--myria-parcours-trait-m));
}

.myria-parcours .myria-parcours__rail::after {
	left: calc(50% + var(--myria-parcours-puce) / 2 + var(--myria-parcours-trait-m));
	right: 0;
}

.myria-parcours .myria-parcours__item:first-child .myria-parcours__rail::before,
.myria-parcours .myria-parcours__item:last-child .myria-parcours__rail::after {
	content: none;
}

.myria-parcours .myria-parcours__puce {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--myria-parcours-puce);
	height: var(--myria-parcours-puce);
	border-radius: 50%;
	border: var(--myria-parcours-puce-bord) solid var(--myria-parcours-puce-bord-c);
	background: var(--myria-parcours-puce-fond);
	transition:
		border-color var(--myria-parcours-duree) ease,
		background-color var(--myria-parcours-duree) ease;
}

.myria-parcours .myria-parcours__puce::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--myria-parcours-point);
	height: var(--myria-parcours-point);
	border-radius: 50%;
	background: var(--myria-parcours-point-c);
	transform: translate(-50%, -50%) scale(0);
	transition: transform var(--myria-parcours-duree) ease;
}

.myria-parcours .myria-parcours__item.est-actif .myria-parcours__puce {
	border-color: var(--myria-parcours-puce-bord-ca);
	background: var(--myria-parcours-puce-fond-a);
}

.myria-parcours .myria-parcours__item.est-actif .myria-parcours__puce::after {
	transform: translate(-50%, -50%) scale(1);
}

.myria-parcours .myria-parcours__tete:focus-visible .myria-parcours__puce {
	outline: 2px solid var(--myria-parcours-puce-bord-ca);
	outline-offset: 3px;
}

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

/*
 * Position absolue sous la puce : 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. La largeur est independante de celle de la
 * colonne.
 */
.myria-parcours .myria-parcours__desc {
	position: absolute;
	top: calc(100% + var(--myria-parcours-texte-marge));
	left: 50%;
	transform: translateX(-50%);
	width: var(--myria-parcours-texte-l);
	max-width: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--myria-parcours-duree) ease,
		visibility 0s linear var(--myria-parcours-duree);
}

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

/*
 * Aux extremites, un texte centre sur sa puce deborderait du bloc. On le recale
 * sur le bord correspondant.
 */
.myria-parcours.recale-bords .myria-parcours__item:first-child .myria-parcours__desc {
	left: 0;
	transform: none;
}

.myria-parcours.recale-bords .myria-parcours__item:last-child .myria-parcours__desc {
	left: auto;
	right: 0;
	transform: none;
}

/* =====================================================================
 * MODE INCLINE
 *
 * La rangee de puces est conservee, mais les libelles n'ont plus la place de
 * tenir a l'horizontale : on les incline et on les ancre sur le centre de leur
 * puce. Les descriptions quittent leur colonne pour occuper toute la largeur,
 * au meme endroit quelle que soit l'etape.
 * ================================================================== */

.myria-parcours[data-mode="incline"] .myria-parcours__liste {
	/* Reserve la place occupee par les libelles inclines. */
	padding-top: var(--myria-parcours-etiquette-h);
}

/*
 * Le libelle est sorti du flux et pivote autour de son coin inferieur gauche,
 * place au centre de la puce. C'est ce point d'ancrage qui garantit que
 * l'inclinaison part toujours de la puce, quelle que soit la longueur du mot.
 */
.myria-parcours[data-mode="incline"] .myria-parcours__libelle {
	position: absolute;
	bottom: calc(100% + var(--myria-parcours-ecart));
	left: 50%;
	margin: 0;
	white-space: nowrap;
	text-align: left;
	transform-origin: 0 100%;
	transform: rotate(var(--myria-parcours-angle));
}

/*
 * L'etape repasse en position statique : la description se cale alors sur la
 * liste, et non plus sur sa colonne. C'est ce qui lui permet de prendre toute
 * la largeur et de s'afficher au meme endroit pour toutes les etapes.
 */
.myria-parcours[data-mode="incline"] .myria-parcours__item {
	position: static;
}

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

/* =====================================================================
 * MODE EMPILE
 *
 * Pour les ecrans trop etroits pour une rangee, meme inclinee.
 * ================================================================== */

.myria-parcours[data-mode="empile"] {
	padding-bottom: 0;
}

.myria-parcours[data-mode="empile"] .myria-parcours__liste {
	display: block;
}

.myria-parcours[data-mode="empile"] .myria-parcours__item + .myria-parcours__item {
	margin-top: 22px;
}

.myria-parcours[data-mode="empile"] .myria-parcours__rail::before,
.myria-parcours[data-mode="empile"] .myria-parcours__rail::after {
	content: none;
}

.myria-parcours[data-mode="empile"] .myria-parcours__desc {
	position: static;
	transform: none;
	width: auto;
	display: none;
	margin-top: 14px;
}

.myria-parcours[data-mode="empile"] .myria-parcours__item.est-actif .myria-parcours__desc {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.myria-parcours .myria-parcours__desc,
	.myria-parcours .myria-parcours__puce,
	.myria-parcours .myria-parcours__puce::after,
	.myria-parcours .myria-parcours__libelle {
		transition: none;
	}
}