/**
 * Les pages du blog : la barre latérale, ses blocs, la progression de lecture.
 *
 * Tout passe par les jetons du thème : la barre prend l'ambiance du site et la
 * suit quand elle change. Rien n'est posé tant que la barre est éteinte — sans
 * la classe `wia-blog--barre`, l'article garde sa mise en page d'origine.
 *
 * @package ET_Astra
 */

/* ─────────── La mise en page ─────────── */

@media (min-width: 960px) {

	/*
	 * La colonne du texte prend le reste, et `minmax(0, 1fr)` y est
	 * indispensable : une colonne `1fr` a pour minimum le contenu le plus
	 * large, et un tableau ou un bloc de code dans l'article l'aurait fait
	 * pousser la barre hors de l'écran.
	 *
	 * La barre ne dépasse jamais 40 % du contenu, quelle que soit la largeur
	 * réglée : 520 px convient à 1 400 px d'écran, mais à 960 px ils
	 * laisseraient à l'article une colonne de journal.
	 */
	.wia-blog.wia-blog--barre {
		display: grid;
		grid-template-columns: minmax(0, 1fr) min(var(--eta-blog-barre, 300px), 40%);
		gap: var(--eta-blog-ecart, 56px);
		align-items: start;
	}

	.wia-blog.wia-blog--barre-gauche {
		grid-template-columns: min(var(--eta-blog-barre, 300px), 40%) minmax(0, 1fr);
	}

	.wia-blog--barre-gauche .wia-blog__barre {
		order: -1;
	}

	/*
	 * Collante, sans ascenseur à elle : une barre qui défile dans la page
	 * se lit comme un cadre étranger à l'article.
	 *
	 * Tant qu'elle tient dans l'écran, elle se colle sous l'en-tête. Plus
	 * haute, le script la fait suivre le sens de la lecture : `--eta-blog-haut`
	 * négatif la colle par le bas, `is-libre` la laisse défiler avec la page,
	 * décalée dans sa colonne. Sans script, elle se colle sous l'en-tête, et
	 * sa fin paraît au bout de l'article.
	 */
	.wia-blog--collante .wia-blog__barre {
		position: sticky;
		top: var(--eta-blog-haut, calc(var(--wia-header-h, 72px) + 24px));
	}

	/* Le décalage relatif ne change pas la hauteur de la colonne : rien ne bouge autour. */
	.wia-blog--collante .wia-blog__barre.is-libre {
		position: relative;
		top: var(--eta-blog-decalage, 0px);
	}

}

.wia-blog__principal {
	min-width: 0;
}

.wia-blog__barre {
	display: flex;
	flex-direction: column;
	gap: 34px;
	min-width: 0;
	font-size: .94rem;
}

@media (max-width: 959px) {

	/* Au téléphone et à la tablette, la barre suit l'article. */
	.wia-blog.wia-blog--barre .wia-blog__barre {
		margin-top: 48px;
		padding-top: 32px;
		border-top: 1px solid var(--wia-line, rgba(128, 128, 128, .25));
	}

	.wia-blog.wia-blog--mobile-masquee .wia-blog__barre {
		display: none;
	}

}

/*
 * Dans une liste d'articles, la barre prend la place d'une colonne de cartes :
 * trois cartes à côté d'elle se réduisent à des vignettes où le titre se coupe
 * mot par mot. Deux colonnes restent lisibles.
 *
 * Deux classes sur la grille, et c'est ce qu'il faut : `.wia-grid.wia-g3` du
 * thème enfant pèse autant, et il est chargé après l'extension.
 */
@media (min-width: 960px) {

	.wia-blog--barre .wia-grid.wia-g3.wia-g3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* ─────────── Les blocs ─────────── */

.wia-blog__barre .eta-blog-bloc__titre {
	margin: 0 0 14px;
	padding-bottom: 10px;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wia-txt, inherit);
	border-bottom: 2px solid var(--wia-orange, currentColor);
}

/*
 * Nos listes ne sont pas des listes à puces : le thème habille les `ul` du
 * corps de page, et la barre n'en fait pas partie, mais une règle générale
 * sur les listes suffirait à rendre un retrait et des puces. On les retire
 * explicitement, avec deux classes.
 */
.wia-blog__barre .eta-blog-derniers.eta-blog-derniers,
.wia-blog__barre .eta-blog-categories.eta-blog-categories,
.wia-blog__barre .eta-blog-etiquettes.eta-blog-etiquettes,
.wia-blog__barre .eta-blog-sommaire.eta-blog-sommaire {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wia-blog__barre .eta-blog-derniers > li,
.wia-blog__barre .eta-blog-categories > li,
.wia-blog__barre .eta-blog-etiquettes > li,
.wia-blog__barre .eta-blog-sommaire > li {
	margin: 0;
	list-style: none;
}

/* ── Derniers articles ── */

.eta-blog-derniers {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.eta-blog-derniers__article {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.eta-blog-derniers__article.has-image {
	grid-template-columns: 64px minmax(0, 1fr);
}

/* Deux classes : la remise à zéro des images du thème pèse une classe et un élément. */
.eta-blog-derniers__article .eta-blog-derniers__image.eta-blog-derniers__image {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--wia-radius, 6px);
}

.eta-blog-derniers__texte {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.wia-blog__barre .eta-blog-derniers__lien {
	font-weight: 600;
	line-height: 1.35;
	color: var(--wia-txt, inherit);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.wia-blog__barre .eta-blog-derniers__lien:hover {
	color: var(--wia-orange, currentColor);
}

.eta-blog-derniers__date {
	font-size: .8rem;
	color: var(--wia-muted, inherit);
	opacity: .85;
	font-variant-numeric: tabular-nums;
}

/* ── Catégories ── */

.eta-blog-categories {
	display: flex;
	flex-direction: column;
}

.wia-blog__barre .eta-blog-categories > li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--wia-line, rgba(128, 128, 128, .2));
}

.wia-blog__barre .eta-blog-categories > li:last-child {
	border-bottom: 0;
}

.wia-blog__barre .eta-blog-categories a {
	color: var(--wia-txt, inherit);
	text-decoration: none;
}

.wia-blog__barre .eta-blog-categories a:hover {
	color: var(--wia-orange, currentColor);
}

.eta-blog-categories__compte {
	min-width: 26px;
	padding: 1px 8px;
	font-size: .76rem;
	font-weight: 600;
	text-align: center;
	color: var(--wia-muted, inherit);
	background: var(--wia-veil-1, rgba(128, 128, 128, .1));
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
}

/* ── Étiquettes ── */

.eta-blog-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.wia-blog__barre .eta-blog-etiquettes a {
	display: inline-block;
	padding: 4px 11px;
	font-size: .8rem;
	color: var(--wia-txt, inherit);
	text-decoration: none;
	border: 1px solid var(--wia-line, rgba(128, 128, 128, .3));
	border-radius: 999px;
}

.wia-blog__barre .eta-blog-etiquettes a:hover {
	color: var(--wia-orange, currentColor);
	border-color: var(--wia-orange, currentColor);
}

/* ── Recherche ── */

.eta-blog-recherche {
	display: flex;
	gap: 8px;
}

.eta-blog-recherche input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	font: inherit;
	color: var(--wia-txt, inherit);
	background: transparent;
	border: 1px solid var(--wia-line, rgba(128, 128, 128, .35));
	border-radius: var(--wia-radius, 6px);
}

.eta-blog-recherche button {
	flex: 0 0 auto;
	padding: 9px 14px;
	font: inherit;
	font-weight: 600;
	color: var(--wia-on-accent, #fff);
	cursor: pointer;
	background: var(--wia-orange, #333);
	border: 0;
	border-radius: var(--wia-btn-radius, var(--wia-radius, 6px));
}

/* ── Sommaire ── */

.eta-blog-sommaire {
	display: flex;
	flex-direction: column;
	gap: 2px;
	counter-reset: eta-sommaire;
}

/*
 * L'encre du corps, et non la grise : `--wia-muted` tombe si bas dans cette
 * ambiance que le sommaire se lisait comme une liste désactivée. La section
 * courante se distingue par le filet d'accent et l'encre forte, pas par
 * l'effacement des autres.
 */
.wia-blog__barre .eta-blog-sommaire a {
	display: block;
	padding: 6px 0 6px 12px;
	line-height: 1.35;
	color: var(--wia-txt-body, inherit);
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.wia-blog__barre .eta-blog-sommaire .is-niveau-3 a {
	padding-left: 26px;
	font-size: .88rem;
}

.wia-blog__barre .eta-blog-sommaire a:hover,
.wia-blog__barre .eta-blog-sommaire a.is-courant {
	color: var(--wia-txt, inherit);
	border-left-color: var(--wia-orange, currentColor);
}

/*
 * Les intertitres visés par le sommaire ne passent pas sous l'en-tête collé :
 * sans cette marge, un clic posait le titre derrière le menu.
 */
.wia-blog .wia-entry h2[id],
.wia-blog .wia-entry h3[id] {
	scroll-margin-top: calc(var(--wia-header-h, 72px) + 24px);
}

/* ── Widgets posés par l'administrateur ── */

.eta-blog-bloc--widget > :last-child {
	margin-bottom: 0;
}

/* ─────────── La progression de lecture ─────────── */

.eta-blog-progression {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 3px;
	pointer-events: none;
	background: transparent;
}

.eta-blog-progression__barre {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--wia-orange, currentColor);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {

	.wia-blog__barre .eta-blog-sommaire a {
		transition: none;
	}

}