/**
 * Article.
 *
 * Géométrie relevée sur la maquette (cadre de 1920 px) :
 *   hero       eyebrow y 308, titre y 350 (64px), auteur y 447, filet y 561
 *   contenu    x 324, largeur 846
 *   sidebar    à droite, colonne restante ; contenu + sidebar = 318 → 1612 (1294)
 */

.single {
	background-color: var(--anidjar-fond);
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

.single-hero {
	position: relative;
	overflow-x: clip;
}

.single-hero__watermark {
	position: absolute;
	top: 5.9375vw; /* 140 − padding header ≈ ; relatif au frame : 140/1920 */
	left: -11.4063vw; /* −219 / 1920 */
	z-index: 0;
	width: 38.75vw; /* 744 / 1920 */
	color: var(--anidjar-or);
	opacity: 0.1;
	pointer-events: none;
}

.single-hero__watermark svg {
	display: block;
	width: 100%;
	height: auto;
}

.single-hero__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 1612px; /* 318 de retrait + 1294 de contenu */
	margin-inline: auto; /* centré au-delà de 1612 (sinon collé à gauche) */
	padding-left: clamp(var(--anidjar-gouttiere), 16.5625vw, 318px); /* 318 / 1920 */
	padding-right: var(--anidjar-gouttiere);

	/* Le header flotte au-dessus : on laisse la place de la pilule (135) + l'espace
	   de la maquette jusqu'au suptitre (308). */
	padding-top: clamp(7rem, 16.04vw, 308px);
}

/* Surtitre en <h1> : police et graisse redéclarées pour neutraliser la règle
   `h1, h2, h3` de style.css (police titre, graisse 700), qui changerait sinon
   son rendu. L'interligne est déjà fixé plus bas. */
.single-hero__eyebrow {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-family: var(--anidjar-police-texte);
	font-size: var(--anidjar-fs-sm);
	font-weight: var(--anidjar-graisse-texte);
	line-height: normal;
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.single-hero__title {
	margin: 19px 0 0; /* 350 − (308 + 23) */
	max-width: 1004px;
	font-size: var(--anidjar-fs-xl);
	line-height: 1.21875;
}

.single-hero__author {
	display: flex;
	align-items: center;
	gap: 22px; /* 399 − (315 + 55) − ... */
	margin-top: 37px; /* 447 − (350 + 60) */
}

.single-hero__avatar {
	display: block;
	width: 55px;
	height: 55px;
	overflow: hidden;
	border-radius: 50%;
	flex: 0 0 auto;
}

.single-hero__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-hero__author-name {
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-sm);
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

/* Filet du bas du hero, sur toute la largeur des deux colonnes (324 → 1612). */
.single-hero__line {
	display: block;
	box-sizing: border-box;
	max-width: 1612px;
	margin-top: clamp(2rem, 4vw, 77px);
	margin-inline: auto; /* centré avec le hero et les colonnes */
	padding-left: clamp(var(--anidjar-gouttiere), 16.875vw, 324px); /* aligné aux colonnes */
	padding-right: 0;
}

.single-hero__line::before {
	content: "";
	display: block;
	height: 1px;
	background-color: var(--anidjar-filet-fonce);

	/* « Tracé » de gauche à droite : la variable --line-draw (0 → 1) est animée
	   par animations.js sur l'élément parent, dont hérite ce ::before. */
	transform: scaleX(var(--line-draw, 1));
	transform-origin: left center;
}

/* ---------------------------------------------------------------------------
 * Deux colonnes
 * ------------------------------------------------------------------------ */

.single-layout {
	display: grid;
	grid-template-columns: 65.4172% 29.3663%; /* 846 / 380 sur 1294 */
	justify-content: space-between; /* écart de 68 déduit */
	box-sizing: border-box;

	/* Centré au-delà de 1612 (comme le hero), avec le même retrait gauche de 324. */
	max-width: 1612px;
	margin-inline: auto;
	padding-block: clamp(2.5rem, 4.84vw, 93px) clamp(3rem, 6vw, 116px);
	padding-left: clamp(var(--anidjar-gouttiere), 16.875vw, 324px); /* 324 / 1920 */
	padding-right: 0;
}

.single-article {
	min-width: 0;
}

/* La typographie du corps est partagée avec le WYSIWYG des catégories
   (.cat-content__body). Le filet du hero est désormais dans le hero. */
.single-article__body {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Sidebar sticky
 * ------------------------------------------------------------------------ */

.single-aside {
	min-width: 0;
}

.single-aside__sticky {
	position: sticky;
	top: 120px; /* sous le header réduit */
	display: flex;
	flex-direction: column;
	gap: var(--anidjar-espace-md);
}

.single-toc {
	padding: var(--anidjar-espace-lg);
	border-radius: var(--anidjar-rayon-carte);
	background-color: var(--anidjar-surface-carte);
	box-shadow: var(--anidjar-ombre-carte);
}

.single-toc__title {
	margin: 0 0 var(--anidjar-espace-sm);
	font-family: var(--anidjar-police-titre);
	font-size: 1.25rem;
	font-weight: var(--anidjar-graisse-titre);
}

.single-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-toc__list li {
	margin: 0;
}

.single-toc__list a {
	display: block;
	padding: 6px 0;
	color: var(--anidjar-texte);
	font-size: var(--anidjar-fs-xs);
	line-height: 1.5;
	text-decoration: none;
	border-left: 2px solid transparent;
	padding-left: var(--anidjar-espace-sm);
	transition: color var(--anidjar-transition), border-color var(--anidjar-transition);
}

.single-toc__list a:hover,
.single-toc__list a.is-active {
	color: var(--anidjar-texte-accent);
	border-color: var(--anidjar-or);
}

.single-toc__list .is-sub a {
	padding-left: var(--anidjar-espace-lg);
	font-size: 0.8125rem;
}

.single-aside__card {
	padding: var(--anidjar-espace-lg);
	border-radius: var(--anidjar-rayon-carte);
	background-color: var(--anidjar-fond-sombre);
	color: var(--anidjar-texte-inverse);
}

.single-aside__card-title {
	margin: 0;
	font-family: var(--anidjar-police-titre);
	font-size: 1.5rem;
	font-weight: var(--anidjar-graisse-titre);
	line-height: 1.2;
}

.single-aside__card-text {
	margin: var(--anidjar-espace-sm) 0 var(--anidjar-espace-md);
	font-size: var(--anidjar-fs-sm);
	line-height: var(--anidjar-interligne-texte);
}

/* ---------------------------------------------------------------------------
 * Mobile et tablette
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.single-hero__inner {
		padding-inline: var(--anidjar-gouttiere);
	}

	.single-hero__line {
		padding-inline: var(--anidjar-gouttiere); /* aligné au contenu mobile */
	}

	.single-hero__title {
		max-width: none;
	}

	.single-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--anidjar-espace-2xl);
		padding-inline: var(--anidjar-gouttiere);
		padding-right: var(--anidjar-gouttiere);
	}

	.single-aside__sticky {
		position: static;
	}

	.single-toc {
		display: none; /* le sommaire n'a pas d'intérêt sticky sur mobile */
	}
}

/* ---------------------------------------------------------------------------
 * Modèle de document — bouton de téléchargement dans le hero + carte sidebar
 * ------------------------------------------------------------------------ */

.single-hero__download {
	margin-top: 37px; /* même position que la boîte d'auteur */
}

.single-hero__download-type,
.single-aside__card-meta {
	display: inline-block;
	margin-left: var(--anidjar-espace-2xs);
	padding: 2px 8px;
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.25);
	font-family: var(--anidjar-police-texte);
	font-size: 0.75rem;
	font-weight: var(--anidjar-graisse-texte);
	letter-spacing: 0.08em;
	vertical-align: middle;
}

/* Carte de téléchargement dans la sidebar (variante claire de la carte contact). */
.single-aside__card--download {
	background-color: var(--anidjar-surface-carte);
	color: var(--anidjar-texte);
	box-shadow: var(--anidjar-ombre-carte);
}

.single-aside__card--download .single-aside__card-title {
	color: var(--anidjar-texte-accent);
	font-family: var(--anidjar-police-texte);
	font-size: var(--anidjar-fs-xs);
	font-weight: var(--anidjar-graisse-texte);
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.single-aside__card--download .single-aside__card-text {
	color: var(--anidjar-texte);
	font-family: var(--anidjar-police-titre);
	font-size: var(--anidjar-fs-md);
	font-weight: var(--anidjar-graisse-titre);
}

.single-aside__card--download .single-aside__card-meta {
	background-color: var(--anidjar-creme);
	color: var(--anidjar-texte);
}