/* Mk Précommandes : couleurs et polices du thème (Flatsome / flatkar) */
.mk-pre { --mk-ink: #222831; --mk-muted: #777; --mk-line: #e2e6ea; --mk-teal: #00adb5; --mk-teal-ink: #00777d; --mk-red: #ff524a; }

/* En-tête : titre de la page + une phrase (le texte de la catégorie est en bas de page) */
.mk-pre-head { margin: 0 0 16px; }
.mk-pre .mk-pre-h1 { font-size: 26px; line-height: 1.25; margin: 0 0 4px; color: var(--mk-ink); }
.mk-pre-lead { font-size: 15px; line-height: 1.5; color: #555; margin: 0; }
.mk-pre-lead a { color: var(--mk-teal-ink); text-decoration: underline; white-space: nowrap; }

/* Gammes : onglets compacts (nom + nombre de modèles, fourchette de prix dessous) */
.mk-pre-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.mk-pre-tier { position: relative; margin: 0; text-align: left; text-transform: none; letter-spacing: 0; line-height: 1.3; min-height: 0; background: #fff; border: 1px solid var(--mk-line); border-radius: 4px; padding: 7px 12px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count" "range range"; column-gap: 8px; align-items: baseline; color: var(--mk-ink); transition: border-color .15s, background .15s; }
.mk-pre-tier:hover { border-color: var(--mk-ink); }
.mk-pre-tier-name { grid-area: name; font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pre-tier-range { grid-area: range; font-weight: 700; font-size: 16px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pre-tier-short { display: none; }
.mk-pre-tier-count { grid-area: count; font-size: 11.5px; font-weight: 700; color: var(--mk-teal-ink); white-space: nowrap; }
.mk-pre-tier[aria-pressed="true"] { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; }
.mk-pre-tier[aria-pressed="true"] .mk-pre-tier-name { color: #c5ccd3; }
.mk-pre-tier[aria-pressed="true"] .mk-pre-tier-count { color: #7fe3e8; }

/* Barre fabricants + outils */
.mk-pre-bar { display: flex; gap: 10px 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--mk-line); }
.mk-pre-fabs-wrap { position: relative; flex: 1 1 100%; min-width: 0; }
.mk-pre-fabs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mk-pre-fabs-nav { display: none; }
.mk-pre-fabs-dd[hidden] { display: none; }
/* Ordinateur : une seule rangée (le script range ceux qui dépassent dans « Autres fabricants ») */
@media (min-width: 850px) {
	.mk-pre-fabs-wrap { display: flex; align-items: flex-start; gap: 6px; }
	.mk-pre-fabs { flex: 0 1 auto; max-height: 31px; overflow: hidden; padding-top: 1px; }
	.mk-pre-fabs-dd { flex: 0 0 auto; padding-top: 1px; }
	.mk-pre-fabs-dd .mk-pre-dd-btn { height: 29px; line-height: 27px; border-radius: 999px; }
	.mk-pre-fabs-dd .mk-pre-dd-panel { left: auto; right: 0; }
}
.mk-pre-chip { flex: 0 0 auto; margin: 0; min-height: 0; line-height: 1.3; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--mk-ink); background: #fff; border: 1px solid var(--mk-line); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.mk-pre-chip small { color: var(--mk-muted); font-size: 11px; margin-left: 2px; }
.mk-pre-chip:hover { border-color: var(--mk-ink); }
.mk-pre-chip[aria-pressed="true"] { background: var(--mk-teal); border-color: var(--mk-teal); color: #fff; }
.mk-pre-chip[aria-pressed="true"] small { color: #d9f6f7; }
.mk-pre-chip[disabled] { opacity: .4; cursor: default; }
.mk-pre-tools { flex: 1 1 100%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mk-pre-tools .mk-pre-sort { margin-left: auto; }
.mk-pre-dd { position: relative; }
.mk-pre-dd-btn, .mk-pre-sort select { margin: 0; min-height: 0; height: 32px; line-height: 30px; padding: 0 28px 0 12px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--mk-ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23222831' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid var(--mk-line); border-radius: 4px; box-shadow: none; }
.mk-pre-dd.is-active .mk-pre-dd-btn { border-color: var(--mk-teal); color: var(--mk-teal-ink); font-weight: 700; }
.mk-pre-dd-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: max-content; max-width: min(420px, 86vw); max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid var(--mk-line); border-radius: 4px; box-shadow: 0 8px 24px rgba(34, 40, 49, .12); padding: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.mk-pre-dd-panel[hidden] { display: none; }
.mk-pre-sort { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; color: var(--mk-muted); white-space: nowrap; }
.mk-pre-sort select { width: auto; -webkit-appearance: none; appearance: none; }
.mk-pre-search { margin: 0; }
.mk-pre .mk-pre-search input[type="search"] { margin: 0; width: 200px; height: 32px; min-height: 0; padding: 0 10px 0 32px; font-size: 13px; color: var(--mk-ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.6' fill='none' stroke='%23777' stroke-width='1.5'/%3E%3Cpath d='M9.5 9.5l3.2 3.2' stroke='%23777' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 10px center; border: 1px solid var(--mk-line); border-radius: 4px; box-shadow: none; }
.mk-pre .mk-pre-search input[type="search"]:focus { border-color: var(--mk-teal); box-shadow: none; }
.mk-pre-status { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 0 0; font-size: 13px; color: var(--mk-muted); min-height: 30px; }
.mk-pre-active { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-pre-active:empty { display: none; }
.mk-pre-pill { margin: 0; min-height: 0; height: 26px; line-height: 24px; padding: 0 8px 0 10px; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--mk-teal-ink); background: #e8f7f8; border: 1px solid #bfe9eb; border-radius: 999px; }
.mk-pre-pill::after { content: "\00d7"; margin-left: 6px; font-size: 15px; line-height: 1; color: var(--mk-teal-ink); }
.mk-pre-pill:hover { border-color: var(--mk-teal); }
.mk-pre-clear, .mk-pre-clear-2 { margin: 0; padding: 0; min-height: 0; line-height: 1.4; background: none; border: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--mk-teal-ink); text-decoration: underline; }
/* Rappel sur les dates (texte complet en bas de page) */
.mk-pre .mk-pre-note { margin-left: auto; font-size: 12.5px; color: var(--mk-muted); text-decoration: none; }
.mk-pre .mk-pre-note::before { content: "\24D8"; margin-right: 5px; }
.mk-pre .mk-pre-note:hover { color: var(--mk-ink); text-decoration: underline; }
.mk-pre .mk-pre-note[hidden], .mk-pre-eta-note[hidden] { display: none; }
.mk-pre-eta-note { margin: 12px auto 0; max-width: 72ch; padding: 8px 14px; text-align: center; font-size: 13px; line-height: 1.5; color: #555; background: #f4f6f7; border-radius: 4px; }

/* Grille */
.mk-pre-grid { margin-top: 12px; }
.mk-pre-later, .mk-pre-off { display: none !important; }
.mk-pre-card .out-of-stock-label[hidden], .mk-pre-card .badge[hidden] { display: none; }
/* Cartes qui apparaissent : fondu */
@keyframes mkPreIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mk-pre-card.mk-pre-in { animation: mkPreIn .45s ease-out both; }
/* Titres de mois (tri « Arrivée la plus proche ») sur toute la largeur, comme sur l'ancienne page */
.mk-pre-grid > .mk-pre-group { flex-basis: 100% !important; max-width: 100% !important; width: 100%; text-align: center; padding-top: 24px; }
.mk-pre-group .section-title { margin-bottom: 6px; }
.mk-pre-group .section-title-main { color: rgb(16, 173, 180); text-transform: capitalize; }
.mk-pre-group p { font-size: 13px; font-weight: 700; color: var(--mk-muted); margin: 0 auto 18px; max-width: 60ch; }

/* Versions sur la carte */
.mk-pre-sw { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 6px 0 2px; }
.mk-pre-sw-a { display: block; width: 40px; height: 26px; border: 1px solid var(--mk-line); border-radius: 3px; overflow: hidden; position: relative; background: #f3f5f6; }
.mk-pre-sw-a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-pre-sw-a.is-on { border: 2px solid var(--mk-teal); }
.mk-pre-sw-a.is-full img { opacity: .35; filter: grayscale(1); }
.mk-pre-sw-a.is-full::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; border-top: 1px solid #888; transform: rotate(-30deg); }
.mk-pre-sw:not(.is-open) .mk-pre-sw-a:nth-child(n+7) { display: none; }
.mk-pre-sw-more { margin: 0; min-height: 0; height: 26px; line-height: 24px; padding: 0 7px; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--mk-muted); background: #fff; border: 1px solid var(--mk-line); border-radius: 3px; }
.box-text p.mk-pre-vlabel { font-size: 12px; color: var(--mk-muted); margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-text p.mk-pre-vlabel:empty { display: none; }
.mk-pre-eta { font-size: 11px; line-height: 1.4; color: #777; margin: 6px 0 0; }
.mk-pre-eta:empty { display: none; }
.box-text p.mk-pre-eta { margin: 9px 0 0; }
.mk-pre-eta--soon { color: var(--mk-teal-ink); font-weight: 700; }
.mk-pre-eta--stock { color: #2e7d32; font-weight: 700; }

.mk-pre-eta--last { color: #c62828; }

/* Boutique et catégories : bouton Promotions (même gabarit que les menus), texte d'introduction de la boutique */
.mk-pre-promo { margin: 0; min-height: 0; height: 32px; line-height: 30px; padding: 0 12px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--mk-ink); background: #fff; border: 1px solid var(--mk-line); border-radius: 4px; box-shadow: none; white-space: nowrap; }
.mk-pre-promo small { color: var(--mk-muted); font-size: 11px; margin-left: 2px; }
.mk-pre-promo:hover { border-color: var(--mk-ink); }
.mk-pre-promo[aria-pressed="true"] { background: var(--mk-red); border-color: var(--mk-red); color: #fff; font-weight: 700; }
.mk-pre-promo[aria-pressed="true"] small { color: #ffe1df; }
.mk-pre-lead p { margin: 0; }

.mk-pre-more { text-align: center; padding: 16px 0 30px; }
.mk-pre-more[hidden], .mk-pre-empty[hidden] { display: none; }
.mk-pre-empty { text-align: center; padding: 40px 0; color: var(--mk-muted); }

/* Texte de la catégorie, sous la grille (référencement + explications pour les clients) */
.mk-pre-about { scroll-margin-top: 120px; max-width: 860px; margin: 10px auto 20px; padding-top: 28px; border-top: 1px solid var(--mk-line); font-size: 15px; line-height: 1.6; color: #444; }
.mk-pre-about h2 { font-size: 22px; line-height: 1.3; margin: 0 0 10px; color: var(--mk-ink); }
.mk-pre-about h3 { font-size: 16.5px; line-height: 1.35; margin: 22px 0 6px; color: var(--mk-ink); }
.mk-pre-about p { margin: 0 0 10px; }
.mk-pre-about a { color: var(--mk-teal-ink); text-decoration: underline; }

/* Fiche produit : toutes les versions (en-tête blanc, sous les étiquettes) */
.mk-pre-versions { --mk-ink: #222831; --mk-line: #e2e6ea; --mk-teal: #00adb5; --mk-teal-ink: #00777d; --mk-red: #ff524a; margin: 26px 0 6px; text-align: center; }
.mk-pre-versions-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #777; margin-bottom: 12px; }
.mk-pre-versions-row { --mk-cols: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; max-width: calc(var(--mk-cols) * 150px + (var(--mk-cols) - 1) * 14px); margin: 0 auto; }
.mk-pre-v { flex: 0 0 150px; display: flex; flex-direction: column; gap: 2px; text-align: center; color: inherit; font-size: 13px; line-height: 1.35; }
.mk-pre-v-media { display: block; border: 2px solid transparent; border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.mk-pre-v-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.mk-pre-v:hover .mk-pre-v-media { border-color: var(--mk-line); }
.mk-pre-v.is-current .mk-pre-v-media { border-color: var(--mk-teal); }
.mk-pre-v-media .out-of-stock-label { font-size: 11px; }
.mk-pre-v-label { color: var(--mk-ink); }
.mk-pre-v-price { font-weight: 700; color: var(--mk-ink); }
.mk-pre-versions .mk-pre-eta { margin-top: 2px; }
.mk-pre-versions-more { margin-top: 16px; }
.mk-pre-versions-more > summary { display: inline-block; cursor: pointer; font-size: 13px; color: #777; text-decoration: underline; margin-bottom: 12px; list-style: none; }
.mk-pre-versions-more > summary::-webkit-details-marker { display: none; }
.mk-pre-versions-more[open] > summary { margin-bottom: 14px; }
@media (max-width: 549px) {
	.mk-pre-versions-row { max-width: none; }
	.mk-pre-v { flex-basis: calc(50% - 7px); }
}

@media (max-width: 849px) {
	.mk-pre-fabs-dd { display: none; }
	.mk-pre-fabs-wrap { flex: 1 1 100%; }
	.mk-pre-fabs { flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 0; }
	.mk-pre-fabs::-webkit-scrollbar { display: none; }
	/* Fondu + flèche du côté où il reste des fabricants */
	.mk-pre-fabs-wrap.has-next .mk-pre-fabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
	.mk-pre-fabs-wrap.has-prev .mk-pre-fabs { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); }
	.mk-pre-fabs-wrap.has-prev.has-next .mk-pre-fabs { -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
	.mk-pre-fabs-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--mk-line); background: #fff; color: var(--mk-ink); box-shadow: 0 2px 8px rgba(34, 40, 49, .15); align-items: center; justify-content: center; }
	.mk-pre-fabs-nav svg { display: block; }
	.mk-pre-fabs-nav.is-prev { left: 0; }
	.mk-pre-fabs-nav.is-next { right: 0; }
	.mk-pre-fabs-wrap.has-prev .mk-pre-fabs-nav.is-prev, .mk-pre-fabs-wrap.has-next .mk-pre-fabs-nav.is-next { display: flex; }
}
@media (max-width: 549px) {
	.mk-pre .mk-pre-h1 { font-size: 21px; }
	.mk-pre-lead { font-size: 13.5px; }
	.mk-pre-head { margin-bottom: 12px; }
	/* Gammes sur une rangée : fourchette courte + nombre (nom et fourchette complète gardés pour les lecteurs d'écran) */
	.mk-pre-tiers { gap: 6px; }
	.mk-pre-tier { padding: 6px 2px 7px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "short" "count"; justify-items: center; text-align: center; }
	.mk-pre-tier-name, .mk-pre-tier-range { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.mk-pre-tier-short { display: block; grid-area: short; font-weight: 700; font-size: 13px; line-height: 1.3; white-space: nowrap; }
	.mk-pre-tier-count { font-size: 10.5px; font-weight: 400; }
	.mk-pre .mk-pre-note { flex-basis: 100%; margin-left: 0; font-size: 12px; }
	.mk-pre-sw-a { width: 34px; height: 22px; }
	/* Listes marque / échelle sur toute la largeur, sous les boutons */
	.mk-pre-tools { position: relative; }
	.mk-pre-dd { position: static; }
	.mk-pre-dd-panel { right: 0; width: auto; max-width: none; }
	/* Marque, Échelle et tri sur une seule rangée */
	.mk-pre-tools .mk-pre-sort { margin-left: 0; flex: 1 1 0; min-width: 0; }
	.mk-pre-sort > span { display: none; }
	.mk-pre-sort select { width: 100%; min-width: 0; text-overflow: ellipsis; }
	.mk-pre:not(.mk-pre--pre) .mk-pre-tools .mk-pre-sort { flex-basis: 130px; }
	.mk-pre-search { flex: 1 1 100%; }
	.mk-pre .mk-pre-search input[type="search"] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mk-pre-tier { transition: none; } .mk-pre-card.mk-pre-in { animation: none; } }