/**
 * Le bloc des articles liés, sur le site.
 *
 * Les couleurs viennent de l'ambiance posée dans ET Astra, lues avec un repli.
 * Le repli n'est pas une couleur de secours choisie au hasard : il emprunte
 * `currentColor`, c'est-à-dire la couleur du texte autour. Un bloc qui
 * imposerait un gris fixe deviendrait illisible sur la moitié des thèmes, et
 * le défaut ne se verrait que chez ceux qui ont l'autre moitié.
 */

.etb-related {
	margin: 48px 0 0;
	padding-top: 28px;
	/* Le repli precede le calcul, et sous le meme nom : la forme abregee
	   pose deja une couleur, celle-ci ne fait que l'affiner. */
	border-top: 1px solid var(--wia-line, currentColor);
	border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}

.etb-related-title {
	margin: 0 0 20px;
	color: var(--wia-txt, currentColor);
	font-size: 1.25rem;
	line-height: 1.25;
}

.etb-cards {
	display: grid;
	gap: 18px;
}

/*
 * La grille se remplit d'elle-même : « auto-fit » avec une largeur minimale
 * donne trois cartes sur un écran large et une sur un téléphone, sans qu'aucun
 * point de rupture ne soit écrit. Fixer trois colonnes obligerait à les
 * défaire à chaque largeur, et la carte du milieu resterait seule sur sa ligne
 * dans les cas qu'on n'aurait pas prévus.
 */
.etb-related.is-grid .etb-cards {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/*
 * Le retrait du trait est forcé, et c'est le seul endroit où ce mot se
 * justifie. Le bloc est ajouté à la fin du contenu, donc dans le corps de
 * texte : la règle du thème qui souligne les liens de paragraphe vise « tout
 * lien du corps », et une carte n'en est pas un. Le thème d'ici ouvre une
 * exception nommée, mais l'extension doit tenir sur un thème qu'on ne connaît
 * pas, où cette exception n'existe pas.
 *
 * Le soulignement se pose sur le lien et descend dans tout ce qu'il contient :
 * le retirer sur le titre ou sur la date n'y ferait rien, il faut le prendre
 * à la racine.
 */
.etb-card,
.etb-card:hover,
.etb-card:focus-visible,
.etb-card:visited {
	text-decoration: none !important;
}

.etb-card {
	display: block;
	color: inherit;
	border-radius: var(--wia-radius, 12px);
	transition: transform .18s, background-color .18s;
}

.etb-card-title,
.etb-card-date,
.etb-card-excerpt { text-decoration: inherit; }

.etb-card:hover,
.etb-card:focus-visible {
	/* Le repli precede le calcul : un navigateur qui ignore `color-mix`
	   laisse la carte sans fond, et c'est le titre qui dit le survol. */
	background: transparent;
	background: color-mix(in srgb, currentColor 6%, transparent);
	transform: translateY(-2px);
}

/*
 * Le mouvement se coupe si on le demande ; le fond au survol reste, parce que
 * c'est lui qui dit que la carte se clique.
 */
@media (prefers-reduced-motion: reduce) {

	.etb-card,
	.etb-card:hover,
	.etb-card:focus-visible {
		transform: none;
		transition: background-color .18s;
	}
}

.etb-card-body {
	display: block;
	padding: 10px;
}

/*
 * La boîte porte elle-même ses proportions, et l'image les remplit. Les poser
 * sur l'image laissait les cartes sans image sans hauteur du tout : dans une
 * rangée mêlant les deux, leur titre commençait en haut pendant que celui des
 * autres descendait de toute la hauteur d'une image.
 */
.etb-card-media {
	display: block;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: var(--wia-radius, 12px);
	aspect-ratio: 16 / 10;
	background: transparent;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.etb-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Une surface neutre plutôt qu'un cadre vide : elle tient la rangée droite
 * sans prétendre montrer quelque chose. Le trait oblique dit qu'il n'y a pas
 * d'image, là où un rectangle uni se lirait comme une image qui n'a pas
 * chargé.
 */
.etb-card-media.is-empty {
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0 9px,
		color-mix(in srgb, currentColor 7%, transparent) 9px 10px
	);
}

.etb-card-title {
	display: block;
	margin-bottom: 6px;
	color: var(--wia-txt, currentColor);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
}

.etb-card:hover .etb-card-title,
.etb-card:focus-visible .etb-card-title {
	color: var(--wia-orange, currentColor);
}

.etb-card-date,
.etb-card-excerpt {
	display: block;
	color: var(--wia-muted, currentColor);
	font-size: .875rem;
	line-height: 1.5;
}

.etb-card-date {
	margin-bottom: 6px;
	font-size: .8125rem;
	letter-spacing: .01em;
}

/* --- La disposition en liste --- */

.etb-related.is-list .etb-cards { gap: 10px; }

/*
 * La colonne de l'image n'est reservee que si la carte en porte une, et c'est
 * le PHP qui le dit par une classe. Le deduire du balisage avec `:has()`
 * marcherait presque partout — et la ou il manque, le texte des cartes sans
 * image commencerait a quatre-vingt-seize pixels du bord, decale par rapport
 * a ses voisines.
 */
.etb-related.is-list .etb-card-body {
	display: grid;
	gap: 14px;
	align-items: center;
}

.etb-related.is-list .etb-card.has-media .etb-card-body {
	grid-template-columns: 96px 1fr;
}

.etb-related.is-list .etb-card-media {
	margin-bottom: 0;
	align-self: start;
}

.etb-related.is-list .etb-card-media img { aspect-ratio: 1 / 1; }

@media (max-width: 480px) {
	.etb-related.is-list .etb-card.has-media .etb-card-body { grid-template-columns: 72px 1fr; }
}

/* --- Le defilement horizontal --- */

.etb-slider { position: relative; }

/*
 * Le defilement natif, pas une piste deplacee par transformation : les gestes
 * du doigt, du pave tactile et du clavier marchent alors sans une ligne de
 * script, et les fleches ne font que s'y ajouter.
 */
.etb-related.is-slider .etb-cards {
	--etb-gap: 18px;
	display: flex;
	gap: var(--etb-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	/*
	 * La barre est cachee : ce sont les fleches qui disent qu'il y a une
	 * suite. Elles sont donc visibles a toutes les largeurs — les masquer sur
	 * un ecran etroit, comme le faisait la regle d'en dessous, laisserait une
	 * piste qui defile sans que rien ne l'annonce.
	 *
	 * Trois ecritures pour une seule intention : la premiere est la regle
	 * standard, la deuxieme sert aux anciens Edge, la troisieme aux moteurs
	 * WebKit et Blink, qui ne suivent ni l'une ni l'autre.
	 */
	scrollbar-width: none;
	-ms-overflow-style: none;

	/*
	 * Le soulevement au survol depasse d'un pixel ou deux, et `overflow-x`
	 * rogne aussi en hauteur : sans cette marge, la carte serait coupee net
	 * au moment ou elle se souleve.
	 */
	padding: 3px 0 5px;
}

.etb-related.is-slider .etb-cards::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
	.etb-related.is-slider .etb-cards { scroll-behavior: auto; }
}

/*
 * Combien de cartes tiennent dans le cadre.
 *
 * La valeur posee en ligne est lue, pas appliquee : appliquee, elle donnerait
 * quatre colonnes de soixante pixels sur un telephone, et aucune media query
 * ne pourrait la corriger — un style en ligne les bat toutes. Declaree ici,
 * elle devient une valeur que la feuille peut borner.
 *
 * `min()` et non une valeur fixe : qui a demande deux cartes n'en veut pas
 * trois sur une tablette parce que la regle des tablettes en impose deux.
 */
.etb-related.is-slider .etb-cards { --etb-shown: var(--etb-per-view, 3); }

@media (max-width: 1100px) {
	.etb-related.is-slider .etb-cards { --etb-shown: min(3, var(--etb-per-view, 3)); }
}

@media (max-width: 820px) {
	.etb-related.is-slider .etb-cards { --etb-shown: min(2, var(--etb-per-view, 3)); }
}

@media (max-width: 560px) {
	.etb-related.is-slider .etb-cards { --etb-shown: 1; }
}

/*
 * La carte ne se retrecit ni ne s'etire : une largeur calculee garde le pas du
 * defilement constant. L'ecart est retire une fois de moins qu'il n'y a de
 * cartes — trois cartes n'ont que deux ecarts entre elles, et le compter trois
 * fois laisserait paraitre un morceau de la quatrieme.
 */
.etb-related.is-slider .etb-card {
	flex: 0 0 calc(
		(100% - (var(--etb-shown) - 1) * var(--etb-gap)) / var(--etb-shown)
	);
	scroll-snap-align: start;
}

/*
 * Le bord de fuite dit qu'il y a une suite. Sans lui, une carte coupee net au
 * bord du cadre se lit comme un defaut d'affichage, pas comme une invitation a
 * faire defiler.
 */
.etb-related.is-slider .etb-cards::after {
	content: "";
	flex: 0 0 1px;
}

.etb-slider-arrow {
	position: absolute;
	top: calc(50% - 20px);
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--wia-line, currentColor);
	border-radius: 999px;
	background: var(--wia-bg, #fff);
	color: var(--wia-txt, currentColor);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6);
}

/* Posees par le script : la ou il ne s'execute pas, elles n'existent pas. */
.etb-slider.has-arrows .etb-slider-arrow { display: block; }

/* Un bouton qui ne mene nulle part disparait plutot que de s'eteindre : une
   fleche grisee au bout de la course invite encore a cliquer. */
.etb-slider-arrow[hidden] { display: none; }

.etb-slider-arrow.is-prev { left: -8px; }
.etb-slider-arrow.is-next { right: -8px; }

.etb-slider-arrow:hover {
	border-color: var(--wia-orange, currentColor);
	color: var(--wia-orange, currentColor);
}

/*
 * Sur un ecran etroit, elles se posent a l'interieur du cadre : dehors, elles
 * sortiraient de la fenetre et provoqueraient le defilement horizontal de
 * toute la page.
 */
@media (max-width: 700px) {
	.etb-slider-arrow.is-prev { left: 4px; }
	.etb-slider-arrow.is-next { right: 4px; }
}