/*
 * `blog/article` — la page d'un article.
 *
 * Le H1 (titre de l'article) prend la taille du kit. Les titres DU TEXTE
 * suivent les roles du socle, un cran sous ceux d'une section : un H2
 * d'article est un intertitre, pas un titre de page (`--ivy-font-h3`).
 * Le runtime publie `--ivy-progress`, `.ivy-spy-current` et
 * `.ivy-copy-done` ; tout le dessin est ici.
 */
.ivy-blog--article {
	display: grid;
	gap: clamp( 2.5rem, 5vw, 4.5rem );
	color: var( --ivy-ink, currentColor );
}

/* --- La barre de lecture --- */
.ivy-blog--article .ivy-blog__progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: 70;
	block-size: 3px;
	pointer-events: none;
}

.ivy-blog--article .ivy-blog__progress span {
	display: block;
	block-size: 100%;
	background-color: var( --ivy-progress-color, var( --ivy-accent, currentColor ) );
	transform: scaleX( var( --ivy-progress, 0 ) );
	transform-origin: left;
}

/* --- L'en-tete --- */
.ivy-blog--article .ivy-blog__head {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
}

.ivy-blog--article .ivy-blog__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: var( --ivy-font-label );
	font-weight: 650;
	color: var( --ivy-muted, currentColor );
}

.ivy-blog--article .ivy-blog__breadcrumb a {
	color: var( --ivy-breadcrumb-color, var( --ivy-accent, currentColor ) );
	text-decoration: none;
}

.ivy-blog--article .ivy-blog__breadcrumb a:hover {
	text-decoration: underline;
}

.ivy-blog--article .ivy-blog__title {
	margin: 0;
	color: var( --ivy-title-color, var( --ivy-ink, currentColor ) );
}

.ivy-blog--article .ivy-blog__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.125rem;
	margin: 0;
	font-size: var( --ivy-font-label );
	color: var( --ivy-meta-color, var( --ivy-muted, currentColor ) );
}

.ivy-blog--article .ivy-blog__author {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 700;
	color: var( --ivy-ink, currentColor );
}

.ivy-blog--article .ivy-blog__author-logo {
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
}

.ivy-blog--article .ivy-blog__cover-wide {
	inline-size: 100%;
	margin-block-start: 0.75rem;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	border-radius: var( --ivy-radius-surface, 1.5rem );
}

.ivy-blog--article .ivy-blog__cover-wide > img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* La couverture dessinee, sans photo (meme dessin que les cartes). */
.ivy-blog--article .ivy-blog__cover--drawn {
	position: relative;
	display: grid;
	align-content: end;
	gap: 0.625rem;
	block-size: 100%;
	padding: clamp( 1.25rem, 3vw, 2.5rem );
	isolation: isolate;
	background-color: var( --ivy-surface-soft, var( --ivy-surface, transparent ) );
}

.ivy-blog--article .ivy-blog__cover--drawn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient( 80% 90% at 100% 0%, rgb( 255 255 255 / 0.45 ), transparent 60% );
}

.ivy-blog--article .ivy-blog__cover-mono {
	position: absolute;
	inset-block-start: clamp( 1rem, 2vw, 1.5rem );
	inset-inline-end: clamp( 1rem, 2vw, 1.5rem );
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 50%;
}

.ivy-blog--article .ivy-blog__cover-cat {
	font-size: var( --ivy-font-label );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ivy-accent, currentColor );
}

.ivy-blog--article .ivy-blog__cover-words {
	font-family: var( --ivy-hl-font-family, inherit );
	font-size: var( --ivy-font-display );
	line-height: 1.15;
}

/* --- Le texte, le sommaire et le partage --- */
.ivy-blog--article .ivy-blog__layout {
	display: grid;
	grid-template-columns: minmax( 0, 3fr ) minmax( 0, 8fr ) minmax( 0, 1fr );
	gap: clamp( 1.5rem, 4vw, 4rem );
}

.ivy-blog--article .ivy-blog__layout--seul {
	grid-template-columns: minmax( 0, 1fr );
}

.ivy-blog--article .ivy-blog__layout--seul .ivy-blog__side {
	display: none;
}

.ivy-blog--article .ivy-blog__side {
	position: sticky;
	inset-block-start: 7.5rem;
	align-self: start;
	display: grid;
	gap: 1.75rem;
}

.ivy-blog--article .ivy-blog__side-label {
	margin: 0 0 0.625rem;
	font-size: var( --ivy-font-label );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ivy-muted, currentColor );
}

.ivy-blog--article .ivy-blog__toc ol {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	border-inline-start: 2px solid var( --ivy-line, currentColor );
	list-style: none;
}

.ivy-blog--article .ivy-blog__toc a {
	display: grid;
	grid-template-columns: 1.625rem minmax( 0, 1fr );
	gap: 0.375rem;
	margin-inline-start: -2px;
	padding: 0.4375rem 0 0.4375rem 0.875rem;
	border-inline-start: 2px solid transparent;
	font-size: var( --ivy-font-label );
	line-height: 1.4;
	color: var( --ivy-toc-color, var( --ivy-ink, currentColor ) );
	text-decoration: none;
	transition: color 200ms ease, border-color 200ms ease;
}

.ivy-blog--article .ivy-blog__toc-num {
	font-weight: 700;
	color: var( --ivy-muted, currentColor );
	font-variant-numeric: tabular-nums;
}

.ivy-blog--article .ivy-blog__toc a.ivy-spy-current {
	border-inline-start-color: var( --ivy-accent, currentColor );
	font-weight: 650;
}

.ivy-blog--article .ivy-blog__toc a.ivy-spy-current .ivy-blog__toc-num {
	color: var( --ivy-accent, currentColor );
}

.ivy-blog--article .ivy-blog__share-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.ivy-blog--article .ivy-blog__share-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.375rem;
	padding: 0 0.875rem;
	border: 1px solid var( --ivy-line, currentColor );
	border-radius: var( --ivy-radius-action, 999px );
	background-color: var( --ivy-surface, transparent );
	font: inherit;
	font-size: var( --ivy-font-label );
	font-weight: 650;
	color: var( --ivy-share-color, var( --ivy-ink, currentColor ) );
	text-decoration: none;
	cursor: pointer;
}

.ivy-blog--article .ivy-blog__share-link[hidden] {
	display: none;
}

.ivy-blog--article .ivy-blog__share-link:hover {
	border-color: var( --ivy-ink, currentColor );
}

.ivy-blog--article .ivy-blog__copy-done,
.ivy-blog--article .ivy-copy-done .ivy-blog__copy-idle {
	display: none;
}

.ivy-blog--article .ivy-copy-done .ivy-blog__copy-done {
	display: inline;
}

.ivy-blog--article .ivy-blog__body {
	display: grid;
	gap: 1.75rem;
	min-inline-size: 0;
}

.ivy-blog--article .ivy-blog__prose {
	display: grid;
	gap: 1.125rem;
	font-size: var( --ivy-font-lead );
	line-height: 1.75;
	color: var( --ivy-prose-color, var( --ivy-ink, currentColor ) );
}

.ivy-blog--article .ivy-blog__prose > * {
	margin: 0;
}

.ivy-blog--article .ivy-blog__prose h2 {
	margin-block-start: 1.75rem;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var( --ivy-line, currentColor );
	font-size: var( --ivy-font-h3 );
	line-height: 1.2;
	scroll-margin-block-start: 7.5rem;
}

.ivy-blog--article .ivy-blog__prose > h2:first-child {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.ivy-blog--article .ivy-blog__prose h3 {
	margin-block-start: 0.625rem;
	font-size: var( --ivy-font-h4 );
	line-height: 1.3;
}

.ivy-blog--article .ivy-blog__prose h4 {
	font-size: var( --ivy-font-h5 );
}

.ivy-blog--article .ivy-blog__prose a {
	color: var( --ivy-accent, currentColor );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ivy-blog--article .ivy-blog__prose :is( ul, ol ) {
	display: grid;
	gap: 0.625rem;
	padding: 0;
	list-style: none;
}

.ivy-blog--article .ivy-blog__prose ul > li {
	position: relative;
	padding-inline-start: 1.75rem;
}

.ivy-blog--article .ivy-blog__prose ul > li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0.25rem;
	inset-block-start: 0.72em;
	inline-size: 0.5625rem;
	block-size: 0.5625rem;
	border-radius: 50%;
	background-color: var( --ivy-accent, currentColor );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --ivy-accent, currentColor ) 18%, transparent );
}

.ivy-blog--article .ivy-blog__prose ol {
	counter-reset: ivy-article;
}

.ivy-blog--article .ivy-blog__prose ol > li {
	position: relative;
	padding-inline-start: 2.5rem;
	counter-increment: ivy-article;
}

.ivy-blog--article .ivy-blog__prose ol > li::before {
	content: counter( ivy-article );
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.15em;
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	background-color: var( --ivy-surface-soft, var( --ivy-line, transparent ) );
	font-size: var( --ivy-font-label );
	font-weight: 700;
	line-height: 1;
	color: var( --ivy-deep, currentColor );
}

.ivy-blog--article .ivy-blog__prose blockquote {
	padding: 1.25rem 1.5rem;
	border-inline-start: 3px solid var( --ivy-accent, currentColor );
	border-radius: var( --ivy-radius-surface, 0.75rem );
	background-color: color-mix( in srgb, var( --ivy-accent, currentColor ) 8%, transparent );
}

.ivy-blog--article .ivy-blog__prose table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var( --ivy-font-body );
}

.ivy-blog--article .ivy-blog__prose :is( th, td ) {
	padding: 0.625rem 0.75rem;
	border-block-end: 1px solid var( --ivy-line, currentColor );
	text-align: start;
}

.ivy-blog--article .ivy-blog__prose img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var( --ivy-radius-surface, 0.75rem );
}

/* --- L'encart d'appel --- */
.ivy-blog--article .ivy-blog__callout {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 1.125rem 1.375rem;
	padding: 1.5rem 1.625rem;
	border-radius: var( --ivy-radius-surface, 1.25rem );
	background-color: var( --ivy-deep, currentColor );
	color: var( --ivy-callout-color, var( --ivy-on-deep-muted, var( --ivy-on-deep, canvas ) ) );
}

.ivy-blog--article .ivy-blog__callout-logo {
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
}

.ivy-blog--article .ivy-blog__callout-heading {
	margin: 0 0 0.25rem;
	font-size: var( --ivy-font-lead );
	font-weight: 700;
	color: var( --ivy-on-deep, currentColor );
}

.ivy-blog--article .ivy-blog__callout-text > * {
	margin: 0;
}

.ivy-blog--article .ivy-blog__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-block-size: 2.75rem;
	padding: 0.375rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var( --ivy-radius-action, 999px );
	background-color: var( --ivy-accent, currentColor );
	font-size: var( --ivy-font-label );
	font-weight: 700;
	color: var( --ivy-cta-color, var( --ivy-on-accent, canvas ) );
	text-decoration: none;
	white-space: nowrap;
}

.ivy-blog--article .ivy-blog__cta.ivy-button--icon {
	padding-inline-end: 0.375rem;
}

/* --- Mots-cles et voisins --- */
.ivy-blog--article .ivy-blog__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 1.5rem 0 0;
	border-block-start: 1px solid var( --ivy-line, currentColor );
	list-style: none;
}

.ivy-blog--article .ivy-blog__tag {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.25rem;
	padding: 0 0.875rem;
	border-radius: var( --ivy-radius-action, 999px );
	background-color: var( --ivy-surface-soft, transparent );
	font-size: var( --ivy-font-label );
	font-weight: 650;
	color: var( --ivy-tags-color, var( --ivy-ink, currentColor ) );
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}

.ivy-blog--article .ivy-blog__tag:hover {
	background-color: var( --ivy-accent, currentColor );
	color: var( --ivy-on-accent, canvas );
}

.ivy-blog--article .ivy-blog__pager {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.75rem;
}

.ivy-blog--article .ivy-blog__pager-link {
	display: grid;
	gap: 0.375rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid var( --ivy-line, currentColor );
	border-radius: var( --ivy-radius-surface, 0.75rem );
	background-color: var( --ivy-surface, transparent );
	font-weight: 650;
	line-height: 1.4;
	color: var( --ivy-pager-color, var( --ivy-ink, currentColor ) );
	text-decoration: none;
	transition: border-color 200ms ease;
}

.ivy-blog--article .ivy-blog__pager-link:hover {
	border-color: var( --ivy-ink, currentColor );
}

.ivy-blog--article .ivy-blog__pager-label {
	font-size: var( --ivy-font-label );
	color: var( --ivy-accent, currentColor );
}

.ivy-blog--article .ivy-blog__pager-link--next {
	text-align: end;
}

@media ( max-width: 1100px ) {
	.ivy-blog--article .ivy-blog__layout {
		grid-template-columns: minmax( 0, 3fr ) minmax( 0, 8fr );
	}
}

@media ( max-width: 900px ) {
	.ivy-blog--article .ivy-blog__layout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ivy-blog--article .ivy-blog__side {
		position: static;
	}

	.ivy-blog--article .ivy-blog__toc {
		padding: 1.125rem 1.25rem;
		border-radius: var( --ivy-radius-surface, 0.75rem );
		background-color: var( --ivy-surface-soft, transparent );
	}

	.ivy-blog--article .ivy-blog__toc ol {
		border-inline-start: 0;
	}

	.ivy-blog--article .ivy-blog__callout {
		grid-template-columns: auto minmax( 0, 1fr );
	}

	.ivy-blog--article .ivy-blog__callout .ivy-blog__cta {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.ivy-blog--article .ivy-blog__cover-wide {
		aspect-ratio: 16 / 10;
	}
}

@media ( max-width: 640px ) {
	.ivy-blog--article .ivy-blog__prose {
		font-size: var( --ivy-font-body );
	}

	.ivy-blog--article .ivy-blog__pager {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ivy-blog--article .ivy-blog__pager-link--next {
		text-align: start;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ivy-blog--article .ivy-blog__toc a,
	.ivy-blog--article .ivy-blog__tag,
	.ivy-blog--article .ivy-blog__pager-link {
		transition: none;
	}
}