/*
 * `blog/archive` — l'en-tete, l'article a la une, la grille filtrable.
 *
 * La carte (`.ivy-blog__card`) est aussi celle de `blog/lies` : ses regles
 * sont repetees dans sa feuille, chaque produit ne chargeant que la sienne.
 *
 * Les titres balises (H1 de l'archive, H2 de l'article a la une et de la
 * grille, H3 des cartes) prennent la taille du kit : aucune taille ici.
 * Le runtime publie `hidden` et `aria-pressed` ; tout le reste est ici.
 */
.ivy-blog--archive {
	display: grid;
	gap: clamp( 2rem, 4vw, 3.5rem );
	color: var( --ivy-ink, currentColor );
}

.ivy-blog--archive .ivy-blog__head {
	display: grid;
	gap: 1.125rem;
	justify-items: start;
}

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

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

.ivy-blog--archive .ivy-blog__lead {
	font-size: var( --ivy-font-lead );
	color: var( --ivy-lead-color, var( --ivy-ink, currentColor ) );
}

.ivy-blog--archive .ivy-blog__lead > * {
	margin: 0;
}

/* --- L'article a la une --- */
.ivy-blog--archive .ivy-blog__featured {
	display: grid;
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
	gap: clamp( 1.5rem, 4vw, 3.5rem );
	align-items: center;
	padding: 0.75rem;
	border: 1px solid var( --ivy-line, currentColor );
	border-radius: var( --ivy-radius-surface, 1.5rem );
	background-color: var( --ivy-surface, transparent );
	color: inherit;
	text-decoration: none;
	transition: box-shadow 300ms ease;
}

.ivy-blog--archive .ivy-blog__featured:hover {
	box-shadow: 0 1.5rem 3rem -1.5rem rgb( 0 0 0 / 0.25 );
}

.ivy-blog--archive .ivy-blog__featured-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	border-radius: var( --ivy-radius-surface, 1.25rem );
}

.ivy-blog--archive .ivy-blog__featured-media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ivy-blog--archive .ivy-blog__featured-body {
	display: grid;
	gap: 1rem;
	justify-items: start;
	padding: clamp( 0.5rem, 2vw, 1.5rem );
}

.ivy-blog--archive .ivy-blog__featured-label {
	font-size: var( --ivy-font-label );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ivy-featured_label-color, var( --ivy-accent, currentColor ) );
}

.ivy-blog--archive .ivy-blog__featured-title {
	margin: 0;
	color: var( --ivy-featured_title-color, var( --ivy-ink, currentColor ) );
	transition: color 200ms ease;
}

.ivy-blog--archive .ivy-blog__featured:hover .ivy-blog__featured-title {
	color: var( --ivy-accent, currentColor );
}

.ivy-blog--archive .ivy-blog__featured-meta {
	font-size: var( --ivy-font-label );
	color: var( --ivy-muted, currentColor );
}

.ivy-blog--archive .ivy-blog__featured-read,
.ivy-blog--archive .ivy-blog__card-read {
	font-weight: 700;
	color: var( --ivy-card_read-color, var( --ivy-accent, currentColor ) );
}

.ivy-blog--archive .ivy-blog__featured-read::after,
.ivy-blog--archive .ivy-blog__card-read::after {
	content: ' →';
	display: inline-block;
	transition: transform 250ms ease;
}

.ivy-blog--archive a:hover .ivy-blog__featured-read::after,
.ivy-blog--archive a:hover .ivy-blog__card-read::after {
	transform: translateX( 0.25rem );
}

/* --- La barre : titre, puces, recherche --- */
.ivy-blog--archive .ivy-blog__list {
	display: grid;
	gap: 1.75rem;
}

.ivy-blog--archive .ivy-blog__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}

.ivy-blog--archive .ivy-blog__grid-title {
	margin: 0;
	color: var( --ivy-grid_title-color, var( --ivy-ink, currentColor ) );
}

.ivy-blog--archive .ivy-blog__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.ivy-blog--archive .ivy-blog__tools[hidden] {
	display: none;
}

.ivy-blog--archive .ivy-blog__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ivy-blog--archive .ivy-blog__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.75rem;
	padding: 0 1rem;
	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-body );
	font-weight: 650;
	color: var( --ivy-chip-color, var( --ivy-ink, currentColor ) );
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.ivy-blog--archive .ivy-blog__chip-count {
	font-size: var( --ivy-font-label );
	color: var( --ivy-muted, currentColor );
}

.ivy-blog--archive .ivy-blog__chip[aria-pressed='true'],
.ivy-blog--archive .ivy-blog__chip[aria-current='page'] {
	border-color: var( --ivy-ink, currentColor );
	background-color: var( --ivy-ink, currentColor );
	color: var( --ivy-surface, canvas );
}

.ivy-blog--archive .ivy-blog__chip[aria-pressed='true'] .ivy-blog__chip-count {
	color: inherit;
	opacity: 0.7;
}

.ivy-blog--archive .ivy-blog__search {
	inline-size: min( 21.25rem, 100% );
	min-block-size: 2.75rem;
	padding: 0 1.125rem;
	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-body );
	color: var( --ivy-search-color, var( --ivy-ink, currentColor ) );
}

.ivy-blog--archive .ivy-blog__search:focus-visible {
	outline: 2px solid var( --ivy-accent, currentColor );
	outline-offset: 2px;
}

/* --- La grille et ses cartes --- */
.ivy-blog--archive .ivy-blog__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ivy-blog--archive .ivy-blog__card[hidden] {
	display: none;
}

.ivy-blog--archive .ivy-blog__card-link {
	display: grid;
	grid-template-rows: auto 1fr;
	block-size: 100%;
	padding: 0.625rem;
	border: 1px solid var( --ivy-line, currentColor );
	border-radius: var( --ivy-radius-surface, 1.25rem );
	background-color: var( --ivy-surface, transparent );
	color: inherit;
	text-decoration: none;
	transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.ivy-blog--archive .ivy-blog__card-link:hover {
	transform: translateY( -0.375rem );
	box-shadow: 0 1.25rem 2.5rem -1.5rem rgb( 0 0 0 / 0.25 );
	border-color: transparent;
}

.ivy-blog--archive .ivy-blog__cover {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var( --ivy-radius-surface, 1rem );
}

.ivy-blog--archive .ivy-blog__cover:not( .ivy-blog__cover--drawn ) img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ivy-blog--archive .ivy-blog__card-body {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	padding: 1.125rem 0.875rem 0.75rem;
}

.ivy-blog--archive .ivy-blog__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	overflow: hidden;
	font-size: var( --ivy-font-label );
	color: var( --ivy-card_meta-color, var( --ivy-muted, currentColor ) );
}

/* Le point vit dans l'espace qui precede chaque detail : en debut de ligne,
 * il tombe hors de la boite et se coupe. Aucun point n'ouvre une ligne. */
.ivy-blog--archive .ivy-blog__card-meta > *::before {
	content: '·';
	margin-inline: -0.625rem 0.375rem;
}

.ivy-blog--archive .ivy-blog__card-cat {
	font-weight: 700;
	color: var( --ivy-card_category-color, var( --ivy-accent, currentColor ) );
}

.ivy-blog--archive .ivy-blog__card-title {
	margin: 0;
	color: var( --ivy-card_title-color, var( --ivy-ink, currentColor ) );
	transition: color 200ms ease;
}

.ivy-blog--archive .ivy-blog__card-link:hover .ivy-blog__card-title {
	color: var( --ivy-accent, currentColor );
}

.ivy-blog--archive .ivy-blog__card-excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: var( --ivy-font-body );
	color: var( --ivy-card_excerpt-color, currentColor );
}

/* --- La couverture dessinee, sans photo --- */
.ivy-blog--archive .ivy-blog__cover--drawn {
	position: relative;
	display: grid;
	align-content: end;
	gap: 0.625rem;
	padding: clamp( 1.125rem, 2.4vw, 1.75rem );
	isolation: isolate;
}

.ivy-blog--archive .ivy-blog__featured-media .ivy-blog__cover--drawn {
	block-size: 100%;
	aspect-ratio: auto;
}

.ivy-blog--archive .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--archive .ivy-blog__cover--v0 {
	background-color: var( --ivy-surface-soft, var( --ivy-surface, transparent ) );
	color: var( --ivy-ink, currentColor );
}

.ivy-blog--archive .ivy-blog__cover--v1 {
	background-color: color-mix( in srgb, var( --ivy-accent, currentColor ) 12%, var( --ivy-surface, transparent ) );
	color: var( --ivy-ink, currentColor );
}

.ivy-blog--archive .ivy-blog__cover--v2 {
	background-color: var( --ivy-deep, currentColor );
	color: var( --ivy-on-deep, canvas );
}

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

.ivy-blog--archive .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--archive .ivy-blog__cover--v2 .ivy-blog__cover-cat {
	color: var( --ivy-accent-on-deep, currentColor );
}

.ivy-blog--archive .ivy-blog__cover-words {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-family: var( --ivy-hl-font-family, inherit );
	font-size: var( --ivy-font-step );
	line-height: 1.15;
}

/* --- Voir plus, et rien a montrer --- */
.ivy-blog--archive .ivy-blog__more-wrap {
	display: flex;
	justify-content: center;
}

.ivy-blog--archive .ivy-blog__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 3rem;
	padding: 0 1.5rem;
	border: 1px solid var( --ivy-ink, currentColor );
	border-radius: var( --ivy-radius-action, 999px );
	background-color: transparent;
	font: inherit;
	font-weight: 700;
	color: var( --ivy-more-color, var( --ivy-ink, currentColor ) );
	cursor: pointer;
}

.ivy-blog--archive .ivy-blog__more[hidden] {
	display: none;
}

.ivy-blog--archive .ivy-blog__empty {
	display: none;
	margin: 0;
	padding: 2.5rem 0;
	text-align: center;
}

.ivy-blog--archive.ivy-filter-empty .ivy-blog__empty {
	display: block;
}

.ivy-blog--archive .ivy-blog__reset {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var( --ivy-accent, currentColor );
	text-decoration: underline;
	cursor: pointer;
}

@media ( max-width: 1024px ) {
	.ivy-blog--archive .ivy-blog__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 800px ) {
	.ivy-blog--archive .ivy-blog__featured {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 640px ) {
	.ivy-blog--archive .ivy-blog__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ivy-blog--archive .ivy-blog__tools,
	.ivy-blog--archive .ivy-blog__search-label,
	.ivy-blog--archive .ivy-blog__search {
		inline-size: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ivy-blog--archive .ivy-blog__card-link,
	.ivy-blog--archive .ivy-blog__featured,
	.ivy-blog--archive .ivy-blog__featured-read::after,
	.ivy-blog--archive .ivy-blog__card-read::after {
		transition: none;
	}
}

/* L'extrait de l'article a la une : sa couleur suit la partie `featured_excerpt`. */
.ivy-blog--archive .ivy-blog__featured-excerpt { color: var( --ivy-featured_excerpt-color, var( --ivy-muted, currentColor ) ); }