/**
 * Le fil d'Ariane.
 *
 * Aucune couleur n'est decidee ici : la feuille lit les jetons du theme, et
 * les trois reglages de couleur — quand ils sont remplis — arrivent en
 * variables par une regle en ligne. Un fil pose sur un site sombre doit rester
 * lisible sans qu'on ait a le rerégler.
 *
 * Les valeurs de repli sont litterales : `var(--x, var(--y, #ccc))` reste
 * valide si personne ne definit ni x ni y, la ou une reference seule rendrait
 * la declaration invalide et ferait retomber la couleur sur l'heritage.
 */

.eta-ariane {
	--eta-ariane-taille: 13px;
	--eta-ariane-haut: 14px;
	--eta-ariane-bas: 14px;
	--eta-ariane-encre: var(--wia-muted, #6b7280);
	--eta-ariane-encre-actif: var(--wia-txt, #1d2327);
	--eta-ariane-fond: transparent;

	padding: var(--eta-ariane-haut) 0 var(--eta-ariane-bas);
	font-size: var(--eta-ariane-taille);
	line-height: 1.5;
	color: var(--eta-ariane-encre);
	background: var(--eta-ariane-fond);
}

/*
 * Dans un bandeau, seule la marge basse compte.
 *
 * Celle du haut est deja posee par le bandeau lui-meme, et empiler les deux
 * repoussait le titre d'une demi-hauteur. Celle du bas, en revanche, est
 * exactement l'ecart entre le fil et le titre qu'il annonce : c'est le seul
 * reglage qui ait un sens ici, et il garde le sien.
 */
.wia-page-hero .eta-ariane,
.etf-hero .eta-ariane,
.eta-home .eta-ariane {
	padding: 0 0 var(--eta-ariane-bas);
	background: none;
}

/*
 * Sur un bandeau illustre, l'encre change de camp.
 *
 * Le bandeau d'une fiche pose un voile sombre sur une photo : le gris de
 * texte secondaire du theme, calcule pour du blanc, y descend sous le seuil
 * de lecture. Le bandeau du theme, lui, garde le fond de la page — ses jetons
 * restent bons, il n'est pas dans la liste.
 *
 * Une couleur choisie dans l'ecran repasse devant : sa regle en ligne porte
 * la classe doublee et arrive apres celle-ci.
 */
.etf-hero .eta-ariane,
.eta-home .eta-ariane {
	--eta-ariane-encre: rgba(255, 255, 255, .82);
	--eta-ariane-encre-actif: #fff;
}

/*
 * L'enveloppe est celle du theme, `.wia-wrap` : le fil se cale sur la meme
 * colonne que le contenu qu'il annonce, et suivra la largeur reglee dans ET
 * Astra sans avoir a la recopier.
 *
 * Dans un bandeau, le bandeau porte deja son enveloppe : la garder ici
 * emboiterait deux marges et decalerait le fil par rapport au titre, de la
 * largeur d'une gouttiere.
 */
.eta-ariane__wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.wia-page-hero .eta-ariane__wrap,
.etf-hero .eta-ariane__wrap,
.eta-home .eta-ariane__wrap {
	max-width: none;
	padding: 0;
}

.eta-ariane__liste {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eta-ariane__prefixe {
	margin-right: 8px;
	font-weight: 600;
}

.eta-ariane__item {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

/*
 * Le separateur appartient au maillon qu'il precede, pas a l'espace entre
 * deux : cache un maillon, son separateur part avec lui. C'est ce qui permet
 * au mode court de ne pas laisser un chevron orphelin en tete de ligne.
 */
.eta-ariane__sep {
	margin: 0 8px;
	opacity: .6;
	user-select: none;
}

.eta-ariane a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}

.eta-ariane a:hover,
.eta-ariane a:focus-visible {
	color: var(--wia-orange, var(--wia-accent, #ff8800));
	border-bottom-color: currentColor;
}

/*
 * Le maillon courant se distingue par l'encre et la graisse, pas par un
 * soulignement : il n'est pas cliquable, et rien ne doit le laisser croire.
 */
.eta-ariane__item.is-courant {
	font-weight: 600;
	color: var(--eta-ariane-encre-actif);
}

.eta-ariane__maison {
	display: block;
	margin-block: -1px;
}

/* ───────── Alignement ───────── */

.eta-ariane--centre .eta-ariane__liste {
	justify-content: center;
}

.eta-ariane--droite .eta-ariane__liste {
	justify-content: flex-end;
}

/* ───────── Casse ───────── */

/*
 * Petites capitales : la taille baisse en meme temps que la casse monte.
 * `text-transform: uppercase` seul donne un pave gris qui pese autant que le
 * titre — l'interligne et l'espacement font le reste du travail.
 */
.eta-ariane--capitales {
	font-size: calc(var(--eta-ariane-taille) - 1px);
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ───────── Sur telephone ───────── */

@media (max-width: 600px) {

	/*
	 * Le mode court garde les deux derniers maillons : le parent et la page
	 * courante. Un chemin de cinq niveaux occupe trois lignes sur un
	 * telephone, pour une information dont seule la fin sert a se situer.
	 */
	.eta-ariane--court .eta-ariane__item:not(:nth-last-child(-n+2)) {
		display: none;
	}

	/*
	 * Le premier maillon visible perd son separateur : il n'a plus rien
	 * devant lui.
	 */
	.eta-ariane--court .eta-ariane__item:nth-last-child(2) .eta-ariane__sep {
		display: none;
	}

	.eta-ariane--masque {
		display: none;
	}

	/*
	 * Sur telephone, les deux marges se resserrent d'un tiers : la place y
	 * vaut plus cher, et un fil qui respire autant que sur un ecran large
	 * repousse le contenu sous la ligne de flottaison.
	 */
	.eta-ariane {
		padding-top: calc(var(--eta-ariane-haut) * .7);
		padding-bottom: calc(var(--eta-ariane-bas) * .7);
	}

	/*
	 * La regle des bandeaux porte deux classes : elle l'emporte sur celle du
	 * dessus quelle que soit leur place dans la feuille. Le resserrement doit
	 * donc y etre reecrit, sinon la marge basse resterait seule a taille
	 * pleine, sous un fil deja colle au haut du bandeau.
	 */
	.wia-page-hero .eta-ariane,
	.etf-hero .eta-ariane,
	.eta-home .eta-ariane {
		padding: 0 0 calc(var(--eta-ariane-bas) * .7);
	}
}