/**
 * 40-article.css — Article : en-tête sur papier, colonne de lecture, exergues,
 * signature, partage, suggestions.
 *
 * L'ancien gabarit posait le titre en blanc sur la photo de une : illisible dès
 * que la photo est claire. Ici l'en-tête est sur papier, l'image en dessous.
 *
 * @package Tresor_Sublime
 */

.ts-article {
	margin: 0;
}

/* ==============================================================
 * EN-TÊTE
 * ============================================================ */

.ts-article__entete {
	max-width: var(--ts-mesure);
	margin-inline: auto;
	margin-bottom: var(--ts-4);
	text-align: center;
}

.ts-article__entete .ts-ariane ol,
.ts-article__entete .ts-meta,
.ts-article__entete .ts-etiquettes {
	justify-content: center;
}

.ts-article__titre {
	margin: var(--ts-2) 0 var(--ts-3);
	font-size: var(--ts-t-6);
	line-height: 1.08;
}

.ts-article__chapeau {
	max-width: 54ch;
	margin: 0 auto var(--ts-3);
	font-size: var(--ts-t-1);
	font-style: italic;
	color: var(--ts-encre-douce);
}

.ts-article__filet {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ts-2);
	margin: var(--ts-3) 0;
	color: var(--ts-filet-fort);
}

.ts-article__filet::before,
.ts-article__filet::after {
	content: "";
	width: 3rem;
	height: 1px;
	background-color: currentColor;
}

/* Image de une : à sa vraie échelle, sous l'en-tête. */
.ts-article__image {
	margin: 0 0 var(--ts-4);
}

.ts-article__image img {
	width: 100%;
	max-height: 34rem;
	object-fit: cover;
	border-radius: var(--ts-rayon);
}

.ts-article__image figcaption {
	text-align: center;
}

/* ==============================================================
 * CORPS DE TEXTE
 * ============================================================ */

.ts-contenu {
	max-width: var(--ts-mesure);
	margin-inline: auto;
	font-size: 1.08rem;
	line-height: 1.75;
}

.ts-contenu > * + * {
	margin-top: 1.15em;
}

.ts-contenu h2 {
	margin-top: 2.2em;
	margin-bottom: 0.55em;
	font-size: var(--ts-t-3);
}

.ts-contenu h3 {
	margin-top: 1.9em;
	margin-bottom: 0.5em;
	font-size: var(--ts-t-2);
}

.ts-contenu h4 {
	margin-top: 1.7em;
	margin-bottom: 0.45em;
	font-family: var(--ts-rubr);
	font-size: var(--ts-t-0);
	font-weight: 600;
	letter-spacing: 0.03em;
}

/* Lettrine sur le premier paragraphe. */
.ts-contenu > p:first-of-type::first-letter {
	float: left;
	padding: 0.06em 0.12em 0 0;
	font-family: var(--ts-titre);
	font-size: 3.5em;
	line-height: 0.84;
	color: var(--ts-vert);
}

.ts-contenu a {
	text-decoration: underline;
	text-decoration-color: var(--ts-laiton);
}

/* Exergue : le filet de laiton, pas un fond gris. */
.ts-contenu blockquote {
	margin-block: var(--ts-3);
}

/* Images pleine largeur dans le texte. */
.ts-contenu .alignwide {
	width: min(100vw - 2 * var(--ts-gouttiere), 1000px);
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--ts-gouttiere), 500px));
}

.ts-contenu .alignfull {
	width: calc(100vw - (var(--ts-gouttiere) * 2));
	max-width: none;
	margin-inline: calc(50% - ((100vw - (var(--ts-gouttiere) * 2)) / 2));
}

/* Citation arabe : Amiri gère le naskh dans la même fonte que les titres. */
.ts-contenu [lang="ar"],
.ts-contenu .ts-arabe {
	direction: rtl;
	text-align: right;
	font-family: var(--ts-titre);
	font-size: 1.5em;
	line-height: 2.1;
}

/* ==============================================================
 * PIED D'ARTICLE
 * ============================================================ */

.ts-article__pied {
	max-width: var(--ts-mesure);
	margin: var(--ts-5) auto 0;
	padding-top: var(--ts-3);
	border-top: 1px solid var(--ts-filet);
}

.ts-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-etiquettes a {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--ts-filet-fort);
	border-radius: var(--ts-rayon);
	font-family: var(--ts-rubr);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--ts-encre-douce);
	transition: border-color var(--ts-transit), color var(--ts-transit);
}

.ts-etiquettes a:hover,
.ts-etiquettes a:focus {
	border-color: var(--ts-vert);
	color: var(--ts-vert);
}

/* --- Partage ------------------------------------------------ */

.ts-partage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--ts-3);
}

.ts-partage__label {
	margin-right: 0.3rem;
	font-family: var(--ts-rubr);
	font-size: 0.665rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ts-laiton);
}

.ts-partage a,
.ts-partage button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--ts-filet-fort);
	border-radius: 50%;
	background: none;
	color: var(--ts-encre-douce);
	cursor: pointer;
	transition: background-color var(--ts-transit), color var(--ts-transit), border-color var(--ts-transit);
}

.ts-partage a:hover,
.ts-partage a:focus,
.ts-partage button:hover,
.ts-partage button:focus {
	background-color: var(--ts-vert);
	border-color: var(--ts-vert);
	color: var(--ts-papier-haut);
}

.ts-partage__copier.est-copie {
	background-color: var(--ts-vert);
	border-color: var(--ts-vert);
	color: var(--ts-papier-haut);
}

.ts-partage svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Signature de l'auteur ---------------------------------- */

.ts-signature {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--ts-2);
	align-items: start;
	max-width: var(--ts-mesure);
	margin: var(--ts-4) auto 0;
	padding: var(--ts-3);
	border: 1px solid var(--ts-filet);
	border-left: 2px solid var(--ts-laiton);
	border-radius: var(--ts-rayon);
	background-color: var(--ts-papier-haut);
}

.ts-signature img {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.ts-signature__nom {
	margin: 0 0 0.3rem;
	font-size: var(--ts-t-1);
}

.ts-signature__bio {
	margin: 0;
	font-size: 0.94rem;
	color: var(--ts-encre-douce);
}

@media (max-width: 560px) {
	.ts-signature {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==============================================================
 * SUGGESTIONS
 * ============================================================ */

.ts-suggestions {
	margin-top: var(--ts-6);
	padding-top: var(--ts-4);
	border-top: 1px solid var(--ts-filet);
}

.ts-suggestions__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--ts-4);
	margin-top: var(--ts-3);
}

.ts-suggestion__vignette {
	display: block;
	overflow: hidden;
	margin-bottom: var(--ts-2);
	border-radius: var(--ts-rayon);
	background-color: var(--ts-papier-bas);
	aspect-ratio: 16 / 10;
}

.ts-suggestion__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ts-suggestion:hover .ts-suggestion__vignette img {
	transform: scale(1.04);
}

.ts-suggestion__titre {
	margin: 0.35rem 0 0.3rem;
	font-size: var(--ts-t-1);
	line-height: 1.28;
}

.ts-suggestion__titre a {
	color: var(--ts-encre);
	text-decoration: none;
}

.ts-suggestion__titre a:hover,
.ts-suggestion__titre a:focus {
	color: var(--ts-vert);
	text-decoration: underline;
	text-decoration-color: var(--ts-laiton);
}

/* ==============================================================
 * SOMMAIRE DE L'ARTICLE (généré si l'article a des titres h2)
 * ============================================================ */

.ts-sommaire {
	max-width: var(--ts-mesure);
	margin: 0 auto var(--ts-4);
	padding: var(--ts-2) var(--ts-3);
	border: 1px solid var(--ts-filet);
	border-radius: var(--ts-rayon);
	background-color: var(--ts-papier-haut);
}

.ts-sommaire > summary {
	font-family: var(--ts-rubr);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ts-laiton);
	cursor: pointer;
	list-style: none;
}

.ts-sommaire > summary::-webkit-details-marker {
	display: none;
}

.ts-sommaire > summary::after {
	content: "+";
	float: right;
	font-family: var(--ts-mono);
}

.ts-sommaire[open] > summary::after {
	content: "–";
}

.ts-sommaire ol {
	margin: var(--ts-2) 0 0;
	padding-left: 1.3em;
	font-size: 0.94rem;
}

.ts-sommaire li {
	margin-bottom: 0.35em;
}

.ts-sommaire a {
	color: var(--ts-encre-douce);
	text-decoration: none;
}

.ts-sommaire a:hover,
.ts-sommaire a:focus {
	color: var(--ts-vert);
	text-decoration: underline;
}

/* --------------------------------------------------------------
 * Téléphone
 * ----------------------------------------------------------- */

@media (max-width: 640px) {
	.ts-article__entete {
		margin-bottom: var(--ts-3);
	}

	.ts-article__titre {
		margin-block: var(--ts-1) var(--ts-2);
	}

	.ts-contenu {
		font-size: 1.04rem;
		line-height: 1.72;
	}

	/* Une lettrine de 3,5 em mange une demi-colonne sur 390 px. */
	.ts-contenu > p:first-of-type::first-letter {
		font-size: 2.9em;
	}

	.ts-contenu blockquote {
		padding-left: var(--ts-2);
	}

	/* 1,5 em d'arabe déborde d'un écran de 390 px. */
	.ts-contenu [lang="ar"],
	.ts-contenu .ts-arabe {
		font-size: 1.28em;
		line-height: 1.95;
	}

	.ts-article__image img {
		max-height: 22rem;
	}

	.ts-signature {
		padding: var(--ts-2);
	}

	.ts-suggestions {
		margin-top: var(--ts-4);
	}

	/* Le partage : des cibles confortables au pouce. */
	.ts-partage a,
	.ts-partage button {
		width: 44px;
		height: 44px;
	}

	.ts-partage__label {
		width: 100%;
		margin-bottom: 0.2rem;
	}
}

/* Ancrage sous l'en-tête collant. */
.ts-contenu h2[id],
.ts-contenu h3[id] {
	scroll-margin-top: calc(var(--ts-entete-h) + var(--ts-3));
}