/* =============================================================================
   MDN Archive (catégorie / shop) — Styles
   Version: 1.0.0
   Couleurs : vert #279b31, brun #502311, gris #f8f8f8 / #e0e0e0
   ============================================================================= */

:root {
	--mdn-green: #279b31;
	--mdn-brown: #502311;
	--mdn-grey-bg: #f8f8f8;
	--mdn-grey-border: #e0e0e0;
	--mdn-grey-text: #777;
	--mdn-radius: 6px;
}

/* ---------------------------------------------------------------------------
   Page wrapper : on étend la zone de contenu sur les archives produit
   --------------------------------------------------------------------------- */
.archive.woocommerce .page-header,
.tax-product_cat .page-header {
	display: none !important;
}

/* On force le wrapper du thème parent à laisser 100% pour qu'on gère
   la largeur sur nos propres conteneurs. */
.archive.woocommerce .page-content,
.tax-product_cat .page-content,
body.archive.woocommerce main,
body.tax-product_cat main {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* Masquer toute breadcrumb externe (thème parent, Elementor, plugin SEO, …)
   sur les pages d'archive — la breadcrumb officielle est rendue dans notre
   bandeau hero (.mdn-archive-hero__breadcrumb). */
body.archive.woocommerce .breadcrumb,
body.archive.woocommerce .breadcrumbs,
body.archive.woocommerce .woo-breadcrumbs,
body.archive.woocommerce .woocommerce-breadcrumb,
body.tax-product_cat .breadcrumb,
body.tax-product_cat .breadcrumbs,
body.tax-product_cat .woo-breadcrumbs,
body.tax-product_cat .woocommerce-breadcrumb {
	display: none !important;
}

/* Re-show la breadcrumb dans notre hero (override des règles précédentes). */
.mdn-archive-hero,
.mdn-archive-hero .mdn-archive-hero__breadcrumb,
.mdn-archive-hero .breadcrumb,
.mdn-archive-hero .breadcrumbs,
.mdn-archive-hero .woocommerce-breadcrumb,
.mdn-archive-hero .mdn-bc {
	display: flex !important;
}

.mdn-archive-hero {
	display: block !important; /* le hero lui-même reste un block */
}

/* ---------------------------------------------------------------------------
   Bandeau titre + fil d'ariane (bandeau brun)
   --------------------------------------------------------------------------- */
.mdn-archive-hero {
	background-color: var(--mdn-brown);
	color: #fff;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	padding: 20px 5%;
	box-sizing: border-box;
	margin-bottom: 24px;
}

.mdn-archive-hero__inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.mdn-archive-hero__title {
	color: #fff;
	margin: 0;
	font-size: 28px;
	font-weight: 700;
}

.mdn-archive-hero__breadcrumb {
	font-size: 13px;
	opacity: 0.9;
}

.mdn-archive-hero__breadcrumb .mdn-bc,
.mdn-archive-hero__breadcrumb .woocommerce-breadcrumb {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	color: #fff;
}

.mdn-archive-hero__breadcrumb a {
	color: #fff;
	text-decoration: none;
	opacity: 0.9;
}

.mdn-archive-hero__breadcrumb a:hover {
	opacity: 1;
	text-decoration: underline;
}

.mdn-archive-hero__breadcrumb .mdn-bc-sep {
	margin: 0 6px;
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Intro SEO (sous le hero, contient le shortcode [mon_intro_seo])
   Sur mobile : collapse à ~6 lignes avec fade et bouton "En savoir plus"
   --------------------------------------------------------------------------- */
.mdn-archive-intro-seo {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto 24px;
	position: relative;
}

.mdn-archive-intro-seo__inner {
	font-size: 14px;
	line-height: 1.6;
	color: #333;
}

.mdn-archive-intro-seo__inner p {
	margin: 0 0 8px;
}
.mdn-archive-intro-seo__inner p:last-child {
	margin-bottom: 0;
}

/* Le collapse / toggle est géré par le shortcode lui-même
   (.seo-read-more / .seo-intro-content) — on ne re-binde rien en JS.
   On stylise juste le bouton pour être cohérent avec le reste du site. */
.mdn-archive-intro-seo .seo-read-more,
.mdn-archive-intro-seo .seo-read-more:hover,
.mdn-archive-intro-seo .seo-read-more:focus,
.mdn-archive-intro-seo .seo-read-more:focus-visible,
.mdn-archive-intro-seo .seo-read-more:active,
.mdn-archive-intro-seo .seo-read-more:visited {
	display: inline-block;
	background: transparent !important;
	border: 0 !important;
	padding: 6px 0 0 !important;
	margin: 0 !important;
	color: var(--mdn-brown) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	text-decoration: underline !important;
	cursor: pointer;
	box-shadow: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* ---------------------------------------------------------------------------
   Séparateur entre la grille et la description longue de catégorie
   --------------------------------------------------------------------------- */
.mdn-archive-separator {
	width: 90%;
	max-width: 1400px;
	margin: 40px auto 32px;
	border: 0;
	border-top: 1px solid var(--mdn-grey-border);
}

/* ---------------------------------------------------------------------------
   Description longue de catégorie (sous la grille)
   --------------------------------------------------------------------------- */
.mdn-archive-description {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto 40px;
}

.mdn-archive-description__inner {
	font-size: 14px;
	line-height: 1.6;
	color: #333;
}

.mdn-archive-description__inner p {
	margin: 0 0 12px;
}
.mdn-archive-description__inner p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Layout 2 colonnes : sidebar | grille
   --------------------------------------------------------------------------- */
.mdn-archive-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: start;
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.mdn-archive-layout {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Sidebar : filtres
   --------------------------------------------------------------------------- */
.mdn-archive-sidebar {
	background: #fff;
}

.mdn-archive-sidebar__title {
	font-size: 24px !important;
	font-weight: 700;
	margin: 0 0 8px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--mdn-grey-border);
	color: var(--mdn-brown);
}

.mdn-archive-filters {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mdn-filter {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mdn-filter__legend {
	font-size: 14px;
	font-weight: 700;
	color: #222;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mdn-filter__count-active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	background: var(--mdn-brown);
	color: #fff;
	font-size: 11px;
	padding: 0 6px;
}

/* Options en liste (coloris) */
.mdn-filter--checkboxes .mdn-filter__options {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mdn-filter__option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #444;
	cursor: pointer;
	padding: 4px 0;
}

.mdn-filter__option input[type="checkbox"] {
	margin: 0;
	flex-shrink: 0;
}

.mdn-filter__swatch {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--mdn-grey-border);
	background-color: #eee;
	flex-shrink: 0;
}

.mdn-filter__swatch--img {
	width: 40px;
	height: 40px;
	border: 0;
	object-fit: cover;
	background: transparent;
	padding: 0;
}

.mdn-filter__label {
	flex: 1;
}

.mdn-filter__count {
	color: var(--mdn-grey-text);
	font-size: 12px;
}

/* Options en dropdown (largeur, type de bois, etc.) */
.mdn-filter__details {
	border: 1px solid var(--mdn-grey-border);
	border-radius: var(--mdn-radius);
	background: #fff;
}

.mdn-filter__details[open] {
	box-shadow: 0 0 0 2px rgba(80, 35, 17, 0.08);
}

.mdn-filter__summary {
	list-style: none;
	cursor: pointer;
	padding: 4px 12px;
	font-size: 13px;
	color: #555;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	user-select: none;
}

.mdn-filter__summary::-webkit-details-marker {
	display: none;
}

.mdn-filter__caret {
	transition: transform 0.15s ease;
	color: var(--mdn-grey-text);
}

.mdn-filter__details[open] .mdn-filter__caret {
	transform: rotate(180deg);
}

.mdn-filter--select .mdn-filter__options {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 260px;
	overflow-y: auto;
	padding: 8px 12px 12px;
	border-top: 1px solid var(--mdn-grey-border);
}

/* Actions du formulaire de filtre */
.mdn-archive-filters__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Neutralisation des états interactifs sur tous les boutons MDN
   Aucun changement visuel au hover / focus / active / tap mobile
   --------------------------------------------------------------------------- */
.mdn-archive-mobile-filter-cta,
.mdn-archive-mobile-filter-cta:hover,
.mdn-archive-mobile-filter-cta:focus,
.mdn-archive-mobile-filter-cta:focus-visible,
.mdn-archive-mobile-filter-cta:active,
.mdn-archive-mobile-filter-cta:visited,
.mdn-archive-filters__submit,
.mdn-archive-filters__submit:hover,
.mdn-archive-filters__submit:focus,
.mdn-archive-filters__submit:focus-visible,
.mdn-archive-filters__submit:active,
.mdn-archive-filters__submit:visited,
.mdn-archive-filters__reset,
.mdn-archive-filters__reset:hover,
.mdn-archive-filters__reset:focus,
.mdn-archive-filters__reset:focus-visible,
.mdn-archive-filters__reset:active,
.mdn-archive-filters__reset:visited,
.mdn-archive-sidebar__close,
.mdn-archive-sidebar__close:hover,
.mdn-archive-sidebar__close:focus,
.mdn-archive-sidebar__close:focus-visible,
.mdn-archive-sidebar__close:active,
.mdn-archive-sidebar__close:visited,
.mdn-archive-main .woocommerce-pagination a:hover,
.mdn-archive-main .woocommerce-pagination a:focus,
.mdn-archive-main .woocommerce-pagination a:focus-visible,
.mdn-archive-main .woocommerce-pagination a:active {
	box-shadow: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* Garder la couleur de fond / texte du state par défaut au lieu du défaut WP/WC */
.mdn-archive-filters__submit:hover,
.mdn-archive-filters__submit:focus,
.mdn-archive-filters__submit:focus-visible,
.mdn-archive-filters__submit:active {
	background: var(--mdn-brown) !important;
	color: #fff !important;
}

.mdn-archive-filters__reset:hover,
.mdn-archive-filters__reset:focus,
.mdn-archive-filters__reset:focus-visible,
.mdn-archive-filters__reset:active {
	color: var(--mdn-grey-text) !important;
	background: transparent !important;
}

.mdn-archive-mobile-filter-cta:hover,
.mdn-archive-mobile-filter-cta:focus,
.mdn-archive-mobile-filter-cta:focus-visible,
.mdn-archive-mobile-filter-cta:active {
	color: var(--mdn-brown) !important;
	background: transparent !important;
}

.mdn-archive-sidebar__close:hover,
.mdn-archive-sidebar__close:focus,
.mdn-archive-sidebar__close:focus-visible,
.mdn-archive-sidebar__close:active {
	background: transparent !important;
	color: #333 !important;
}

.mdn-archive-main .woocommerce-pagination a:hover,
.mdn-archive-main .woocommerce-pagination a:focus,
.mdn-archive-main .woocommerce-pagination a:focus-visible,
.mdn-archive-main .woocommerce-pagination a:active {
	background: #fff !important;
	color: #444 !important;
	border-color: var(--mdn-grey-border) !important;
}

.mdn-archive-filters__submit {
	background: var(--mdn-brown) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--mdn-radius) !important;
	padding: 10px 18px !important;
	font-weight: 600 !important;
	cursor: pointer;
}


.mdn-archive-filters__reset {
	font-size: 13px;
	color: var(--mdn-grey-text);
	text-decoration: underline;
}


.mdn-archive-filters__empty {
	font-size: 13px;
	color: var(--mdn-grey-text);
}

/* ---------------------------------------------------------------------------
   Toolbar (résultat + tri)
   --------------------------------------------------------------------------- */
.mdn-archive-toolbar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	min-height: 36px;
}

.mdn-archive-toolbar .woocommerce-result-count {
	margin: 0;
	font-size: 13px;
	color: var(--mdn-grey-text);
	flex: 1;
}

.mdn-archive-toolbar .woocommerce-ordering {
	margin: 0;
}

.mdn-archive-toolbar select {
	border: 1px solid var(--mdn-grey-border);
	border-radius: var(--mdn-radius);
	padding: 8px 12px;
	font-size: 13px;
	background: #fff;
	min-width: 200px;
}

/* ---------------------------------------------------------------------------
   Grille produit
   On force display:grid et on reset les styles legacy de WC (float/width/clear)
   --------------------------------------------------------------------------- */
.mdn-archive-main ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Neutralise les pseudo-éléments clearfix legacy de WC qui deviendraient
   des items de grille fantômes (et créent une case vide en haut à gauche). */
.mdn-archive-main ul.products::before,
.mdn-archive-main ul.products::after {
	display: none !important;
	content: none !important;
}

@media (max-width: 1100px) {
	.mdn-archive-main ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* On reste à 2 colonnes même sur petit mobile */
@media (max-width: 600px) {
	.mdn-archive-main ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
}

/* Carte produit — on reset le styling float/width hérité de WC */
.mdn-archive-main ul.products li.product.mdn-product-card,
.mdn-archive-main ul.products li.mdn-product-card {
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff;
	/* border: 1px solid var(--mdn-grey-border); */
	border-radius: var(--mdn-radius);
	overflow: hidden;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
	box-sizing: border-box;
}

.mdn-product-card:hover {
	border-color: #d0d0d0;
}

.mdn-product-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.mdn-product-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--mdn-grey-bg);
	aspect-ratio: 1 / 1;
	width: 100%;
}

.mdn-product-card__media img,
.mdn-product-card__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
}

.mdn-product-card__sale-flash {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--mdn-green);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 4px;
	text-transform: uppercase;
}

.mdn-product-card__body {
	padding: 8px 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	min-width: 0;
	flex: 1; /* le body prend toute la hauteur restante de la card */
}

/* Aligne en bas le trio rating / prix / stockline.
   On pousse le 1er des 3 vers le bas, les suivants suivent via le gap. */
.mdn-product-card__body > .mdn-product-card__rating,
.mdn-product-card__body > .mdn-product-card__title + .mdn-product-card__price {
	margin-top: auto;
}

.mdn-product-card__title {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #222;
	overflow-wrap: break-word;
	word-break: normal;
	min-width: 0;

	/* Clamp à 3 lignes max + hauteur fixée à 3 lignes
	   (min + max = identique → tous les titres prennent exactement 3 lignes,
	   trio aligné, et plus aucune ligne 4 ne déborde). */
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	line-clamp: 3;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	min-height: calc(1.4em * 3);
	max-height: calc(1.4em * 3);
}

.mdn-product-card__title a {
	display: inline !important;
	color: inherit;
	text-decoration: none;
}

.mdn-product-card__title a {
	color: inherit;
	text-decoration: none;
}

.mdn-product-card__title a:hover {
	color: var(--mdn-brown);
}

/* Rating */
.mdn-product-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
}

.mdn-product-card__rating .star-rating {
	font-size: 12px;
	margin: 0 !important;
}

.mdn-product-card__rating-count {
	color: var(--mdn-grey-text);
}

/* Prix */
.mdn-product-card__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 16px;
	font-weight: 700;
	color: #222;
}

.mdn-product-card__price .price,
.mdn-product-card__price ins {
	font-weight: 700;
	color: #222;
	text-decoration: none;
}

.mdn-product-card__price del {
	font-weight: 400;
	font-size: 13px;
	color: var(--mdn-grey-text);
	margin-right: 4px;
}

.mdn-price-suffix {
	font-size: 12px;
	font-weight: 500;
	color: var(--mdn-grey-text);
}

/* Stockline (snippet date-de-reapro) dans la carte produit */
.mdn-product-card .mdn-stockline {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.3;
}

.mdn-product-card .mdn-stockline .mdn-dot {
	width: 10px;
	height: 10px;
	flex-basis: 10px;
	margin-top: 4px;
}

.mdn-product-card .mdn-stockline strong {
	font-weight: 600;
}

/* Stock badge (ancien, laissé pour compat) */
.mdn-product-card__stock {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	margin-top: 2px;
}

.mdn-product-card__stock-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mdn-product-card__stock--in .mdn-product-card__stock-dot {
	background: var(--mdn-green);
}

.mdn-product-card__stock--in .mdn-product-card__stock-label {
	color: var(--mdn-green);
}

.mdn-product-card__stock--out .mdn-product-card__stock-dot {
	background: #c0392b;
}

.mdn-product-card__stock--out .mdn-product-card__stock-label {
	color: #c0392b;
}

/* ---------------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------------- */
.mdn-archive-main .woocommerce-pagination {
	margin-top: 32px;
	text-align: center;
}

.mdn-archive-main .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 6px;
	border: 0;
	list-style: none;
	padding: 0;
}

.mdn-archive-main .woocommerce-pagination ul.page-numbers li {
	border: 0;
}

.mdn-archive-main .woocommerce-pagination ul.page-numbers a,
.mdn-archive-main .woocommerce-pagination ul.page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--mdn-grey-border);
	border-radius: var(--mdn-radius);
	color: #444;
	text-decoration: none;
	background: #fff;
	font-size: 13px;
}


.mdn-archive-main .woocommerce-pagination ul.page-numbers span.current {
	background: var(--mdn-brown);
	border-color: var(--mdn-brown);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   État vide
   --------------------------------------------------------------------------- */
.mdn-archive-empty {
	padding: 40px;
	text-align: center;
	background: var(--mdn-grey-bg);
	border-radius: var(--mdn-radius);
	color: var(--mdn-grey-text);
}

/* ---------------------------------------------------------------------------
   Hint visuel pendant le chargement (prépare l'AJAX)
   --------------------------------------------------------------------------- */
.mdn-archive-main.is-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s;
}

/* ---------------------------------------------------------------------------
   Sidebar : header (titre + bouton fermeture mobile)
   --------------------------------------------------------------------------- */
.mdn-archive-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.mdn-archive-sidebar__close {
	display: none; /* visible seulement quand sidebar = panneau mobile */
	background: transparent;
	border: 0;
	padding: 6px;
	cursor: pointer;
	color: #333;
	border-radius: 4px;
}


/* ---------------------------------------------------------------------------
   CTA mobile : "Filtrer les produits"
   --------------------------------------------------------------------------- */
.mdn-archive-mobile-filter-cta {
	display: none; /* masqué desktop */
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	padding: 8px 0;
	margin: 0 auto 12px;
	width: 90%;
	max-width: 1400px;
	color: var(--mdn-brown);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	text-decoration: underline;
}

.mdn-archive-mobile-filter-cta svg {
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Backdrop (mobile uniquement)
   --------------------------------------------------------------------------- */
.mdn-archive-sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* ---------------------------------------------------------------------------
   Responsive : sidebar en panneau coulissant à partir de 900px
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.mdn-archive-mobile-filter-cta {
		display: inline-flex;
		padding: 4px 0;
		margin-bottom: 6px;
	}

	/* Resserrer l'espacement vertical mobile entre intro SEO / CTA / toolbar */
	.mdn-archive-intro-seo {
		margin-bottom: 8px;
	}

	.mdn-archive-intro-seo__toggle {
		padding: 2px 0 0 !important;
		font-size: 13px;
	}

	.mdn-archive-toolbar {
		margin-bottom: 10px;
		gap: 10px;
		min-height: 0;
		flex-wrap: wrap;
	}

	.mdn-archive-toolbar .woocommerce-result-count {
		font-size: 12px;
		line-height: 1.3;
	}

	.mdn-archive-toolbar select {
		min-width: 0;
		padding: 6px 10px;
		font-size: 12px;
	}

	/* On enlève la sidebar de la grille — elle devient un panneau fixe */
	.mdn-archive-layout {
		grid-template-columns: 1fr;
	}

	.mdn-archive-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 85%;
		max-width: 360px;
		z-index: 9999;
		background: #fff;
		padding: 20px;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		box-shadow: 4px 0 18px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
	}

	.mdn-archive-sidebar__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* État ouvert */
	body.mdn-filters-open {
		overflow: hidden;
	}

	body.mdn-filters-open .mdn-archive-sidebar {
		transform: translateX(0);
	}

	body.mdn-filters-open .mdn-archive-sidebar-backdrop {
		display: block;
		opacity: 1;
	}
}