/* ==========================================================================
   Marketplace v2 — accueil marketplace d'après la maquette client du 16/08/2026
   (docs/design/marketplace-v2/maquette-marketplace.png, 1536×1024).
   Toutes les valeurs (couleurs, tailles, espacements, radius) sont mesurées
   sur la maquette : conteneur 1300 px, hero 260 px, cartes animaux 172×80,
   panneau produits 1001 px + colonne services 272 px, etc.
   Préfixe .mk-  — feuille chargée uniquement sur les pages marketplace.
   ========================================================================== */
:root {
    --mk-green: #189B5D;
    --mk-green-dark: #13824E;
    --mk-green-soft: #E8F6EE;
    --mk-ink: #111827;
    --mk-ink-2: #1F2937;
    --mk-text: #4B5563;
    --mk-muted: #6B7280;
    --mk-faint: #9CA3AF;
    --mk-line: #EEF0F3;
    --mk-line-2: #E5E7EA;
    --mk-page: #F9FAFC;
    --mk-star: #F5B400;
    --mk-navy: #1F3D5C;
}
.mk-page { background: var(--mk-page); font-family: "Inter", sans-serif; color: var(--mk-ink); -webkit-font-smoothing: antialiased; }
/* Le fond de page de la maquette (#F9FAFC) court jusqu'au pied de page (marge du footer comprise) */
body:has(.mk-home), body:has(.mk-simple) { background: var(--mk-page); }
body:has(.mk-home) .content-wrapper, body:has(.mk-simple) .content-wrapper { background: var(--mk-page); }
.mk-page *, .mk-page *::before, .mk-page *::after { box-sizing: border-box; }
.mk-page a { text-decoration: none; }
.mk-wrap { max-width: 1332px; margin: 0 auto; padding: 0 16px; }
.mk-svg { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ---------- Bandeau marketplace : recherche / favoris / panier ---------- */
.mk-bar { background: #fff; }
.mk-bar__top { border-bottom: 1px solid #F0F2F4; }
.mk-bar__top .mk-wrap { display: flex; align-items: center; gap: 30px; height: 82px; }
.mk-search { display: flex; flex: 1 1 auto; max-width: 677px; height: 44px; margin: 0; }
.mk-search__input { flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid var(--mk-line-2); border-inline-end: 0; border-start-start-radius: 8px; border-end-start-radius: 8px; padding: 0 18px; font: 500 12px/1 "Inter", sans-serif; color: var(--mk-ink); background: #fff; outline: none; }
.mk-search__input::placeholder { color: var(--mk-faint); font-weight: 400; }
.mk-search__input:focus { border-color: var(--mk-green); }
.mk-search__btn { width: 45px; height: 44px; border: 0; border-start-end-radius: 8px; border-end-end-radius: 8px; background: var(--mk-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; padding: 0; }
.mk-search__btn:hover { background: var(--mk-green-dark); }
.mk-bar__actions { display: flex; align-items: center; gap: 30px; margin-inline-start: auto; }
.mk-bar__link { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 "Inter", sans-serif; color: #374151; position: relative; }
.mk-bar__link:hover { color: var(--mk-green); }
.mk-bar__link .mk-svg { font-size: 20px; color: #374151; }
.mk-bar__count { position: absolute; top: -11px; right: -12px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--mk-green); color: #fff; font: 700 10px/20px "Inter", sans-serif; text-align: center; display: none; }
.mk-bar__count.is-on { display: inline-block; }
[dir="rtl"] .mk-bar__count { right: auto; left: -12px; }

/* ---------- Navigation catégories ---------- */
.mk-bar__nav { border-bottom: 1px solid #ECEDEF; }
.mk-bar__nav .mk-wrap { display: flex; align-items: center; height: 50px; gap: 0; }
.mk-nav__all { position: relative; flex: 0 0 auto; }
.mk-nav__btn { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px 0 15px; border: 0; border-radius: 8px; background: var(--mk-green); color: #fff; font: 600 13px/1 "Inter", sans-serif; cursor: pointer; }
.mk-nav__btn:hover, .mk-nav__btn[aria-expanded="true"] { background: var(--mk-green-dark); color: #fff; }
.mk-nav__btn .mk-svg { font-size: 18px; }
.mk-nav__btn .mk-svg--chev { font-size: 14px; margin-inline-start: -2px; }
.mk-nav__menu { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 1030; min-width: 260px; max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(17, 24, 39, .10); padding: 8px; display: none; }
.mk-nav__all.is-open .mk-nav__menu { display: block; }
.mk-nav__menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; font: 500 13px/1.2 "Inter", sans-serif; color: var(--mk-text); }
.mk-nav__menu a:hover { background: var(--mk-green-soft); color: var(--mk-green); }
.mk-nav__menu a span { font-size: 12px; color: var(--mk-faint); }
/* Barre des catégories : une seule ligne, défilement horizontal */
.mk-nav__scroller { position: relative; flex: 1 1 auto; min-width: 0; margin-inline-start: 35px; display: flex; align-items: center; }
.mk-nav__links { display: flex; align-items: center; gap: 28px; flex: 1 1 auto; min-width: 0; white-space: nowrap;
    overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.mk-nav__links::-webkit-scrollbar { display: none; }
/* Fondu aux bords : les libellés s'estompent au lieu d'être coupés net */
.mk-nav__links.has-next { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); }
.mk-nav__links.has-prev { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%); }
.mk-nav__links.has-prev.has-next { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); }
.mk-nav__links a { flex: 0 0 auto; font: 500 12px/1 "Inter", sans-serif; color: var(--mk-text); padding: 17px 0; position: relative; }
.mk-nav__links a:hover { color: var(--mk-green); }
/* Catégorie courante : couleur + soulignement, repérable d'un coup d'œil */
.mk-nav__links a.is-active { color: var(--mk-green); font-weight: 600; }
.mk-nav__links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px; background: var(--mk-green); }
/* Flèches — affichées seulement s'il reste du contenu de ce côté */
.mk-nav__arrow { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 1px solid var(--mk-line-2); border-radius: 50%; background: #fff; color: var(--mk-text);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: 0 2px 8px rgba(17, 24, 39, .08); }
.mk-nav__arrow[hidden] { display: none; }
.mk-nav__arrow:hover { border-color: var(--mk-green); color: var(--mk-green); }
.mk-nav__arrow .mk-svg { font-size: 14px; }
.mk-nav__arrow--prev { margin-inline-end: 8px; }
.mk-nav__arrow--prev .mk-svg { transform: rotate(90deg); }
.mk-nav__arrow--next { margin-inline-start: 8px; }
.mk-nav__arrow--next .mk-svg { transform: rotate(-90deg); }
[dir="rtl"] .mk-nav__arrow--prev .mk-svg { transform: rotate(-90deg); }
[dir="rtl"] .mk-nav__arrow--next .mk-svg { transform: rotate(90deg); }
.mk-nav__sell { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 "Inter", sans-serif; color: var(--mk-green); white-space: nowrap; }
.mk-nav__sell .mk-svg { font-size: 18px; }
.mk-nav__sell:hover { color: var(--mk-green-dark); }

/* ---------- Corps de page ---------- */
.mk-home { padding-top: 24px; padding-bottom: 24px; }

/* Hero */
.mk-hero { position: relative; height: 260px; border-radius: 16px; overflow: hidden; background: #E0F4E9; padding: 27px 38px 0; --mk-hero-size: auto 260px; --mk-hero-pos: right center; }
/* La photo (fond de la maquette, badge effacé) est peinte dans un pseudo-élément
   pour pouvoir être retournée en RTL (animaux à gauche, texte à droite). */
.mk-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../assets/img/marketplace-v2/hero-fond.webp") no-repeat var(--mk-hero-pos) / var(--mk-hero-size); }
[dir="rtl"] .mk-hero::before { transform: scaleX(-1); }
.mk-hero > * { position: relative; z-index: 1; }
.mk-hero__title { margin: 0; font: 700 28.5px/38px "Inter", sans-serif; letter-spacing: -0.2px; color: var(--mk-ink); }
.mk-hero__title span { display: block; }
.mk-hero__sub { margin: 12px 0 0; font: 400 13px/24px "Inter", sans-serif; color: var(--mk-text); }
.mk-hero__sub span { display: block; }
.mk-hero__cta { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 20px 0 21px; margin-top: 22px; border-radius: 999px; background: var(--mk-green); color: #fff; font: 600 12px/1 "Inter", sans-serif; }
.mk-hero__cta .mk-svg { font-size: 16px; }
.mk-hero__cta:hover { background: var(--mk-green-dark); color: #fff; }
.mk-hero__badge { position: absolute; z-index: 1; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px 0 8px; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(17, 24, 39, .10); }
[dir="rtl"] .mk-hero__badge { right: auto; left: 16px; padding: 0 8px 0 16px; }
.mk-hero__badge-ic { width: 34px; height: 34px; border-radius: 50%; background: #3FAA8E; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.mk-hero__badge b { display: block; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-hero__badge small { display: block; font: 400 11px/16px "Inter", sans-serif; color: var(--mk-text); }

/* Cartes animaux */
.mk-animals { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.mk-animal { display: flex; align-items: center; gap: 12px; height: 80px; padding: 0 4px 0 12px; background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; }
.mk-animal:hover { border-color: #CFE9DB; }
.mk-animal img { width: 50px; height: 50px; border-radius: 50%; flex: 0 0 auto; display: block; }
.mk-animal > span > b { display: block; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); white-space: nowrap; }
.mk-animal > span > span { display: block; margin-top: 4px; font: 500 11px/14px "Inter", sans-serif; color: var(--mk-green); }

/* Produits populaires + colonne services */
.mk-main { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 24px; margin-top: 18px; align-items: start; }
.mk-panel { background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; padding: 12px 22px 15px; }
.mk-panel__head { display: flex; align-items: center; height: 22px; }
.mk-panel__title { display: flex; align-items: center; gap: 11px; margin: 0; font: 700 15px/22px "Inter", sans-serif; color: var(--mk-ink); }
.mk-panel__title::before { content: ""; width: 3px; height: 22px; border-radius: 2px; background: var(--mk-green); }
.mk-panel__more { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 "Inter", sans-serif; color: var(--mk-green); }
.mk-panel__more .mk-svg { font-size: 14px; }
.mk-panel__more:hover { color: var(--mk-green-dark); }
.mk-products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 11px; }

/* Blocs par catégorie : même panneau, pleine largeur, 6 cartes par ligne */
.mk-panel--cat { margin-top: 12px; }
.mk-products--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Carte produit */
.mk-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #EFF1F3; border-radius: 10px; padding: 12px 12px 14px; min-height: 235px; }
.mk-card:hover { border-color: #CFE9DB; box-shadow: 0 6px 16px rgba(17, 24, 39, .05); }
.mk-card__media { display: flex; align-items: center; justify-content: center; height: 130px; margin-bottom: 0; }
.mk-card__media img { max-width: 100%; max-height: 128px; width: auto; height: auto; object-fit: contain; display: block; }
.mk-card__promo { position: absolute; top: 15px; left: 13px; z-index: 1; padding: 0 8px; height: 16px; border-radius: 5px; background: #33B52A; color: #fff; font: 700 10px/16px "Inter", sans-serif; }
[dir="rtl"] .mk-card__promo { left: auto; right: 13px; }
.mk-card__fav { position: absolute; top: 12px; right: 12px; z-index: 1; width: 26px; height: 26px; border: 0; background: transparent; padding: 0; color: var(--mk-muted); font-size: 20px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
[dir="rtl"] .mk-card__fav { right: auto; left: 12px; }
.mk-card__fav:hover { color: #E11D48; }
.mk-card__fav.is-on { color: #E11D48; }
.mk-card__fav .mk-svg--full { display: none; }
.mk-card__fav.is-on .mk-svg--full { display: inline-block; }
.mk-card__fav.is-on .mk-svg--line { display: none; }
.mk-card__name { display: block; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card__name:hover { color: var(--mk-green); }
.mk-card__sub { margin-top: 0; font: 400 11px/16px "Inter", sans-serif; color: var(--mk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card__price { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; white-space: nowrap; }
.mk-card__price b { font: 700 13px/18px "Inter", sans-serif; color: var(--mk-ink); }
.mk-card__price.is-promo b { color: var(--mk-green); }
.mk-card__price i { font: 600 9px/1 "Inter", sans-serif; font-style: normal; color: var(--mk-ink); }
.mk-card__price.is-promo i { color: var(--mk-green); }
.mk-card__price s { font: 400 9px/1 "Inter", sans-serif; color: var(--mk-faint); }
.mk-card__off { display: inline-block; padding: 0 5px; height: 14px; border-radius: 4px; background: var(--mk-green-soft); color: var(--mk-green); font: 600 9px/14px "Inter", sans-serif; }
.mk-card__rating { display: flex; align-items: center; gap: 4px; margin-top: 7px; margin-bottom: 0; font: 600 11px/14px "Inter", sans-serif; color: #374151; }
.mk-card__rating .mk-svg { font-size: 11px; color: var(--mk-star); }
.mk-card__rating span { font-weight: 400; color: var(--mk-faint); }
.mk-card__rating--none { color: var(--mk-faint); font-weight: 400; }

/* Bouton « Ajouter au panier » (hors maquette, demande du propriétaire 16/08) */
.mk-card__cart { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--mk-green); border-radius: 8px; background: var(--mk-green-soft); color: var(--mk-green); font: 600 11px/1 "Inter", sans-serif; cursor: pointer; }
.mk-card__cart:hover { background: var(--mk-green); color: #fff; }
.mk-card__cart .mk-svg { font-size: 14px; }
.mk-card__cart[disabled] { opacity: .75; cursor: default; }
.mk-card__cart.is-done { background: var(--mk-green); border-color: var(--mk-green); color: #fff; }
.mk-card__rating + .mk-card__cart, .mk-card__price + .mk-card__cart { margin-top: 10px; }

/* Colonne services */
.mk-services { display: grid; gap: 12px; padding-top: 3px; }
.mk-service { display: flex; align-items: center; gap: 18px; height: 85px; padding: 0 16px 0 21px; border-radius: 12px; }
.mk-service--green { background: #EBF7F0; }
.mk-service--orange { background: #FCF2E7; }
.mk-service--violet { background: #F0EDFB; }
.mk-service__ic { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.mk-service--green .mk-service__ic { background: #D8F0E4; color: var(--mk-green); }
.mk-service--orange .mk-service__ic { background: #FAE4D6; color: #F0743A; }
.mk-service--violet .mk-service__ic { background: #DFDBF7; color: #4C5FBF; }
.mk-service > div > b { display: block; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); margin-bottom: 4px; }
.mk-service > div > span { display: block; font: 400 11px/18px "Inter", sans-serif; color: var(--mk-muted); }

/* Vendeurs à la une */
.mk-vendors { margin-top: 12px; background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; padding: 13px 22px 15px; }
.mk-vendors__head { display: flex; align-items: center; height: 22px; }
.mk-vendors__title { margin: 0; font: 700 15px/22px "Inter", sans-serif; color: var(--mk-ink); }
.mk-vendors__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.mk-vendor { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mk-vendor__logo { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--mk-line-2); background: #fff; object-fit: cover; flex: 0 0 auto; }
.mk-vendor__name { display: block; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-vendor__name:hover { color: var(--mk-green); }
.mk-vendor__meta { display: flex; align-items: center; gap: 5px; margin-top: 4px; font: 600 11px/16px "Inter", sans-serif; color: #374151; white-space: nowrap; }
.mk-vendor__meta .mk-svg { font-size: 11px; color: var(--mk-star); }
.mk-vendor__meta span { font-weight: 400; color: var(--mk-faint); }
.mk-vendor__pro { margin-inline-start: 6px; display: inline-block; height: 16px; padding: 0 8px; border: 1px solid #C4B5FD; border-radius: 999px; background: #F5F3FF; color: #7C3AED; font: 600 10px/14px "Inter", sans-serif; }

/* Bandeau de confiance */
.mk-trust { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #EEF3F1; border: 1px solid #E5ECE8; border-radius: 12px; padding: 15px 0; }
.mk-trust__item { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; padding-inline-start: 42px; }
.mk-trust__ic { width: 38px; height: 38px; border-radius: 50%; background: #E2F4EC; color: var(--mk-green); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.mk-trust__item > div > b { display: block; font: 600 12px/17px "Inter", sans-serif; color: var(--mk-ink); }
.mk-trust__item > div > span { display: block; margin-top: 2px; font: 400 11px/17px "Inter", sans-serif; color: var(--mk-muted); }

/* Pages secondaires (favoris, marques) — même langage que l'accueil */
.mk-simple { padding-top: 24px; padding-bottom: 32px; }
.mk-simple__title { margin: 0 0 6px; font: 700 22px/28px "Inter", sans-serif; color: var(--mk-ink); }
.mk-simple__intro { margin: 0 0 18px; font: 400 14px/20px "Inter", sans-serif; color: var(--mk-muted); }
.mk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.mk-empty { background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; padding: 48px 24px; text-align: center; }
.mk-empty .mk-svg { font-size: 40px; color: #CBD5E1; }
.mk-empty b { display: block; margin-top: 12px; font: 600 16px/22px "Inter", sans-serif; color: var(--mk-ink); }
.mk-empty p { margin: 6px 0 0; font: 400 14px/20px "Inter", sans-serif; color: var(--mk-muted); }
.mk-brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.mk-brand { display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 16px; background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; min-width: 0; }
.mk-brand:hover { border-color: #CFE9DB; }
.mk-brand img, .mk-brand__initial { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--mk-line-2); object-fit: contain; background: #fff; flex: 0 0 auto; }
.mk-brand__initial { display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 "Inter", sans-serif; color: var(--mk-green); background: var(--mk-green-soft); border-color: transparent; }
.mk-brand > span > b { display: block; font: 600 14px/18px "Inter", sans-serif; color: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-brand > span > span { display: block; font: 400 12px/16px "Inter", sans-serif; color: var(--mk-muted); }

/* ---------- Responsive : mêmes composants, empilement adapté ---------- */
@media (max-width: 1200px) {
    .mk-animals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mk-main { grid-template-columns: minmax(0, 1fr); }
    .mk-services { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0; }
    .mk-products, .mk-products--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mk-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mk-vendors__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
    .mk-nav__scroller { margin-inline-start: 22px; }
    .mk-nav__links { gap: 24px; }
}
@media (max-width: 992px) {
    .mk-bar__top .mk-wrap { gap: 18px; height: 70px; }
    .mk-search { max-width: none; }
    .mk-bar__actions { gap: 20px; }
    .mk-nav__sell { padding-inline-start: 22px; }
    .mk-products, .mk-products--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; padding: 15px 16px; }
    .mk-trust__item { padding-inline-start: 8px; }
    .mk-hero { padding: 24px 24px 0; --mk-hero-pos: 70% center; }
    .mk-hero__title { font-size: 26px; line-height: 32px; }
}
@media (max-width: 640px) {
    /* Ligne 1 : bouton Marketplace + Vendre ; ligne 2 : catégories défilantes */
    .mk-bar__nav .mk-wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 2px; }
    .mk-nav__scroller { order: 3; flex: 1 0 100%; margin-inline-start: 0; }
    .mk-nav__links a { padding: 12px 0; }
    .mk-nav__links a.is-active::after { bottom: 5px; }
    .mk-nav__sell { padding-inline-start: 0; }
    .mk-home { padding-top: 16px; }
    .mk-bar__link span { display: none; }
    .mk-bar__link { gap: 0; }
    .mk-bar__count { right: -10px; }
    [dir="rtl"] .mk-bar__count { left: -10px; }
    .mk-hero { height: auto; padding: 22px 20px 190px; --mk-hero-size: auto 180px; --mk-hero-pos: right bottom; }
    /* fondu entre l'aplat vert et le haut de la photo (le ciel derrière la vache) */
    .mk-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 120px; height: 70px; z-index: 0; background: linear-gradient(to bottom, #E0F4E9 0%, rgba(224, 244, 233, 0) 100%); pointer-events: none; }
    .mk-hero__title { font-size: 24px; line-height: 30px; }
    .mk-hero__title span, .mk-hero__sub span { display: inline; }
    .mk-hero__sub { font-size: 14px; line-height: 21px; }
    .mk-hero__badge { height: 44px; padding-inline-end: 12px; }
    .mk-hero__badge b { font-size: 12px; }
    .mk-hero__badge small { font-size: 11px; }
    .mk-animals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
    .mk-animal { padding-inline-start: 14px; gap: 12px; height: 72px; }
    .mk-main { margin-top: 12px; gap: 12px; }
    .mk-panel { padding: 12px 14px 14px; }
    .mk-products, .mk-products--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mk-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mk-services { grid-template-columns: minmax(0, 1fr); }
    .mk-vendors { padding: 14px 14px 16px; }
    .mk-vendors__list { grid-template-columns: minmax(0, 1fr); }
    .mk-vendors__head { flex-wrap: wrap; height: auto; gap: 6px; }
    .mk-trust { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; row-gap: 14px; }
    .mk-trust__item { padding-inline-start: 0; }
}

/* Flèches directionnelles retournées en arabe */
[dir="rtl"] .mk-hero__cta .mk-svg, [dir="rtl"] .mk-panel__more .mk-svg { transform: scaleX(-1); }

/* Message court (erreur d'ajout au panier) */
.mk-toast { position: fixed; z-index: 1080; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: 90vw; padding: 10px 18px; border-radius: 999px; background: #111827; color: #fff; font: 500 13px/1.4 "Inter", sans-serif; box-shadow: 0 10px 24px rgba(17, 24, 39, .25); }
.mk-toast--err { background: #B91C1C; }

/* ==========================================================================
   Pages catégorie / catalogue : mêmes composants que l'accueil
   ========================================================================== */
/* Hero avec image de contenu (photo de la catégorie) */
.mk-hero--media { background: #E0F4E9; }
/* Image de la catégorie : moitié droite, fondue dans l'aplat vert */
.mk-hero--media::before { inset: 0 0 0 auto; width: 58%; background: var(--mk-hero-img) no-repeat center center / cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%); mask-image: linear-gradient(to right, transparent 0%, #000 26%); }
[dir="rtl"] .mk-hero--media::before { inset: 0 auto 0 0; transform: none;
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 26%); mask-image: linear-gradient(to left, transparent 0%, #000 26%); }
.mk-hero--media .mk-hero__title, .mk-hero--media .mk-hero__sub { max-width: 640px; }
.mk-hero--media .mk-hero__sub span { display: inline; }

/* Rangée d'animaux défilante (nombre variable selon la catégorie) */
.mk-animals--scroll { display: flex; overflow-x: auto; gap: 16px; padding-bottom: 4px; scrollbar-width: thin; }
.mk-animals--scroll .mk-animal { flex: 0 0 172px; }
.mk-animal__emoji { width: 50px; height: 50px; border-radius: 50%; background: var(--mk-green-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; flex: 0 0 auto; }

/* Barre de filtres horizontale */
.mk-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.mk-filters__count { font: 500 12px/1 "Inter", sans-serif; color: var(--mk-muted); margin-inline-end: 4px; white-space: nowrap; }
.mk-filters__field { height: 34px; min-width: 0; max-width: 190px; padding: 0 10px; border: 1px solid var(--mk-line-2); border-radius: 8px; background: #fff; font: 500 12px/1 "Inter", sans-serif; color: var(--mk-ink); }
.mk-filters__field:focus { outline: none; border-color: var(--mk-green); }
.mk-filters__field--search { flex: 1 1 180px; max-width: 260px; }
.mk-filters__field--price { width: 88px; }
.mk-filters__btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--mk-green); color: #fff; font: 600 12px/1 "Inter", sans-serif; cursor: pointer; }
.mk-filters__btn:hover { background: var(--mk-green-dark); }
.mk-filters__reset { font: 500 12px/1 "Inter", sans-serif; color: var(--mk-muted); }
.mk-filters__reset:hover { color: var(--mk-green); }

/* Pagination dans un panneau */
.mk-pagination { display: flex; justify-content: center; margin-top: 16px; }
.mk-pagination .pagination { margin: 0; gap: 4px; }
.mk-pagination .page-link { border: 1px solid var(--mk-line-2); border-radius: 8px; color: var(--mk-text); font: 500 12px/1 "Inter", sans-serif; padding: 8px 12px; }
.mk-pagination .page-item.active .page-link { background: var(--mk-green); border-color: var(--mk-green); color: #fff; }
.mk-pagination .page-link:hover { background: var(--mk-green-soft); color: var(--mk-green); }

@media (max-width: 640px) {
    .mk-hero--media { padding-bottom: 150px; }
    .mk-hero--media::before { inset: auto 0 0 0; width: 100%; height: 165px;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%); mask-image: linear-gradient(to bottom, transparent 0%, #000 32%); }
    .mk-filters__field, .mk-filters__field--search { max-width: none; flex: 1 1 130px; }
}

/* Hero sans image de contenu : le texte ne doit pas courir sous la photo */
.mk-hero__title, .mk-hero__sub { max-width: 640px; }

/* ==========================================================================
   DESIGN SYSTEM MARKETPLACE — composants partagés (panier, checkout,
   boutiques, boutique). Mêmes tokens que l'accueil : vert #189B5D, radius
   8/10/12, bordures #EEF0F3, typo Inter 12/11/15.
   ========================================================================== */
/* En-tête de page simple : titre + action à droite */
.mk-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mk-page-head .mk-simple__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.mk-page-head .mk-simple__title .mk-svg { font-size: 22px; color: var(--mk-green); }
.mk-svg--back { transform: scaleX(-1); }
[dir="rtl"] .mk-svg--back { transform: none; }

/* Boutons */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent; font: 600 12px/1 "Inter", sans-serif; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; white-space: nowrap; }
.mk-btn .mk-svg { font-size: 16px; }
.mk-btn--primary { background: var(--mk-green); color: #fff; }
.mk-btn--primary:hover { background: var(--mk-green-dark); color: #fff; }
.mk-btn--ghost { background: #fff; color: var(--mk-text); border-color: var(--mk-line-2); }
.mk-btn--ghost:hover { border-color: var(--mk-green); color: var(--mk-green); }
.mk-btn--soft { background: var(--mk-green-soft); color: var(--mk-green); border-color: transparent; }
.mk-btn--soft:hover { background: var(--mk-green); color: #fff; }
.mk-btn--danger { background: #DC2626; color: #fff; }
.mk-btn--danger:hover { background: #B91C1C; color: #fff; }
.mk-btn--block { width: 100%; }
.mk-btn--sm { height: 32px; padding: 0 12px; font-size: 11px; }
.mk-btn--icon { width: 40px; padding: 0; }
.mk-btn[disabled], .mk-btn.disabled { opacity: .6; cursor: default; pointer-events: none; }
.mk-btn:focus-visible { outline: 2px solid var(--mk-green); outline-offset: 2px; }

/* Étiquettes et encarts */
.mk-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 10px/1 "Inter", sans-serif; }
.mk-tag--green { background: var(--mk-green-soft); color: var(--mk-green); }
.mk-tag--gray { background: #F1F3F5; color: var(--mk-muted); }
.mk-tag--blue { background: #EAF0FB; color: #3B6FD4; }
.mk-tag--red { background: #FDECEC; color: #C93B3B; }
.mk-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; font: 400 11px/16px "Inter", sans-serif; color: var(--mk-text); background: #F6F8FA; }
.mk-hint .mk-svg { font-size: 14px; flex: 0 0 auto; margin-top: 1px; }
.mk-hint--gift { background: var(--mk-green-soft); color: var(--mk-green-dark); }
.mk-hint--gift .mk-svg { color: var(--mk-green); }

/* Alertes : on restyle AUSSI les .alert Bootstrap injectées par les scripts existants */
.mk-page .alert { display: flex; align-items: flex-start; gap: 10px; border: 1px solid transparent; border-radius: 10px; padding: 12px 14px; font: 400 12px/17px "Inter", sans-serif; margin-bottom: 14px; }
.mk-page .alert > .mk-svg { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.mk-page .alert strong { font-weight: 600; }
.mk-page .alert-success, .mk-alert--success { background: var(--mk-green-soft); border-color: #CFE9DB; color: var(--mk-green-dark); }
.mk-page .alert-info, .mk-alert--info { background: #EAF0FB; border-color: #D3DFF5; color: #274C8F; }
.mk-page .alert-danger, .mk-alert--danger { background: #FDECEC; border-color: #F5C6C6; color: #B42318; }
.mk-page .alert-warning { background: #FDF3E7; border-color: #F5DEC0; color: #9A5B00; }
.mk-page .alert .btn-close { margin-inline-start: auto; font-size: 10px; }

/* Modals existantes, restylées */
.mk-modal .modal-content { border: 1px solid var(--mk-line); border-radius: 14px; box-shadow: 0 24px 60px rgba(17, 24, 39, .18); overflow: hidden; font-family: "Inter", sans-serif; }
.mk-modal .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--mk-line); }
.mk-modal .modal-title { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/20px "Inter", sans-serif; color: var(--mk-ink); }
.mk-modal__ic { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.mk-modal__ic--warn { background: #FDECEC; color: #DC2626; }
.mk-modal__ic--ok { background: var(--mk-green-soft); color: var(--mk-green); }
.mk-modal .modal-body { padding: 18px 20px; }
.mk-modal__text { margin: 0 0 12px; font: 400 13px/19px "Inter", sans-serif; color: var(--mk-text); }
.mk-modal__preview { background: var(--mk-page); border: 1px solid var(--mk-line); border-radius: 10px; padding: 12px; font-family: "Inter", sans-serif; }
.mk-modal .modal-footer { padding: 14px 20px; border-top: 1px solid var(--mk-line); gap: 8px; }
.mk-modal .btn-close { font-size: 11px; }
.mk-modal.fade .modal-dialog { transform: translateY(12px) scale(.98); transition: transform .2s ease-out; }
.mk-modal.show .modal-dialog { transform: none; }
.mk-modal .modal-dialog { max-width: 460px; }
@media (max-width: 640px) { .mk-modal .modal-dialog { margin: 12px; } }

/* Contrôle de quantité − n + */
.mk-qty { display: inline-flex; align-items: center; border: 1px solid var(--mk-line-2); border-radius: 8px; overflow: hidden; background: #fff; }
.mk-qty__btn { width: 32px; height: 34px; border: 0; background: #fff; color: var(--mk-text); font: 600 16px/1 "Inter", sans-serif; cursor: pointer; }
.mk-qty__btn:hover { background: var(--mk-green-soft); color: var(--mk-green); }
.mk-qty__input { width: 46px; height: 34px; border: 0; border-inline: 1px solid var(--mk-line-2); border-radius: 0; text-align: center; font: 600 12px/1 "Inter", sans-serif; color: var(--mk-ink); padding: 0; box-shadow: none; -moz-appearance: textfield; }
.mk-qty__input::-webkit-outer-spin-button, .mk-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mk-qty__input:focus { outline: none; box-shadow: none; border-color: var(--mk-line-2); }

/* Champs de formulaire */
.mk-field { display: block; margin-bottom: 14px; }
.mk-field__label { display: block; margin-bottom: 6px; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-field__label .req { color: #DC2626; }
.mk-page .mk-input, .mk-page .mk-input.form-control { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--mk-line-2); border-radius: 8px; background: #fff; font: 500 12px/1.4 "Inter", sans-serif; color: var(--mk-ink); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.mk-page .mk-input:focus { outline: none; border-color: var(--mk-green); box-shadow: 0 0 0 3px rgba(24, 155, 93, .15); }
.mk-page .mk-input.is-invalid { border-color: #DC2626; background-image: none; }
.mk-page .mk-input.is-valid { border-color: var(--mk-green); background-image: none; }
.mk-page textarea.mk-input { min-height: 88px; resize: vertical; }
.mk-field__hint { margin-top: 5px; font: 400 11px/15px "Inter", sans-serif; color: var(--mk-muted); }
.mk-page .validation-error, .mk-page .invalid-feedback.d-block { display: flex; align-items: center; gap: 6px; margin-top: 5px; font: 500 11px/15px "Inter", sans-serif; color: #DC2626; }
.mk-page .shake { animation: mkShake .4s; }
@keyframes mkShake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }

/* ---------- Panier ---------- */
.mk-cart__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.mk-cart__cols { display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px 120px 44px; gap: 12px; padding: 12px 0 8px; margin-top: 4px; border-bottom: 1px solid var(--mk-line); font: 600 11px/1 "Inter", sans-serif; color: var(--mk-muted); text-transform: uppercase; letter-spacing: .3px; }
.mk-cart__cols span:nth-child(n+2) { text-align: center; }
.mk-cart .mk-cart__row.row { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px 120px 44px; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--mk-line); }
.mk-cart .mk-cart__row.row > * { width: auto; padding: 0; flex: none; }
.mk-cart__row:last-child { border-bottom: 0; }
.mk-cart .cart-item-details { display: contents; }
.mk-cart__product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mk-cart__thumb { flex: 0 0 auto; width: 64px; height: 64px; border: 1px solid var(--mk-line); border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mk-cart__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mk-cart__info { min-width: 0; }
.mk-cart__name { margin: 0 0 4px; font: 600 13px/17px "Inter", sans-serif; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk-cart__name a { color: var(--mk-ink-2); }
.mk-cart__name a:hover { color: var(--mk-green); }
.mk-cart__shop { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1 "Inter", sans-serif; color: var(--mk-muted); }
.mk-cart__shop .mk-svg { font-size: 12px; }
.mk-cart__cell { text-align: center; }
.mk-cart__label { display: none; font: 600 10px/1 "Inter", sans-serif; color: var(--mk-muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.mk-cart .price-badge { display: inline-block; font: 600 12px/1 "Inter", sans-serif; color: var(--mk-text); }
.mk-cart .price-badge small { font-size: 10px; font-weight: 600; }
.mk-cart__subtotal { font: 700 13px/1 "Inter", sans-serif; color: var(--mk-ink); }
.mk-cart__subtotal small { font-size: 10px; font-weight: 600; margin-inline-start: 2px; }
.mk-cart .mk-cart__remove { width: 34px; height: 34px; padding: 0; border: 1px solid var(--mk-line-2); border-radius: 8px; background: #fff; color: var(--mk-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.mk-cart .mk-cart__remove:hover { border-color: #F5C6C6; background: #FDECEC; color: #DC2626; }
.mk-cart .cart-item-row.opacity-50, .mk-cart .cart-item-row .opacity-75 { opacity: .6; }
/* Résumé */
.mk-cart__summary { position: sticky; top: 90px; }
.mk-cart .mk-summary { padding: 8px 0 0 !important; }
.mk-summary__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font: 500 12px/16px "Inter", sans-serif; color: var(--mk-text); }
.mk-summary__row .summary-label { display: inline-flex; align-items: center; gap: 6px; }
.mk-summary__row .summary-value { font-weight: 600; color: var(--mk-ink); }
.mk-summary__row--sep { border-top: 1px dashed var(--mk-line-2); margin-top: 8px; padding-top: 12px; }
.mk-summary__h { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-summary__shop { padding: 10px 12px; border: 1px solid var(--mk-line); border-radius: 10px; margin-bottom: 8px; background: var(--mk-page); }
.mk-summary__shop-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-summary__shop-name { display: block; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-summary__shop-count { display: block; font: 400 11px/14px "Inter", sans-serif; color: var(--mk-muted); }
.mk-summary__shop-cost { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 "Inter", sans-serif; color: var(--mk-ink); }
.mk-summary__total { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 14px 0 4px; border-top: 1px solid var(--mk-line); }
.mk-summary__total .summary-label { font: 600 13px/1 "Inter", sans-serif; color: var(--mk-ink); }
.mk-summary__total .summary-value { font: 700 18px/1 "Inter", sans-serif; color: var(--mk-green); }
.mk-summary__actions { display: grid; gap: 10px; margin-top: 16px; }
/* Lignes injectées par le script existant (Bootstrap) : mêmes réglages */
.mk-cart .mk-summary .d-flex.justify-content-between.mb-3 { padding: 9px 0; margin-bottom: 0 !important; font: 500 12px/16px "Inter", sans-serif; color: var(--mk-text); }
.mk-cart .mk-summary .d-flex.justify-content-between.mb-3 .fw-semibold, .mk-cart .mk-summary .d-flex.justify-content-between.mb-3 .fw-bold { color: var(--mk-ink); }
/* État vide */
.mk-empty--cart { padding: 56px 24px; }
.mk-empty--cart .mk-btn { margin-top: 18px; }
/* Barre fixe mobile (existante) */
.mk-sticky { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background: #fff; border-top: 1px solid var(--mk-line); box-shadow: 0 -8px 24px rgba(17, 24, 39, .08); }
.mk-sticky__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.mk-sticky__label { display: block; font: 500 10px/1 "Inter", sans-serif; color: var(--mk-muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.mk-sticky__value { display: block; font: 700 15px/1 "Inter", sans-serif; color: var(--mk-green); }
.mk-sticky__ship { display: block; font: 400 10px/1 "Inter", sans-serif; color: var(--mk-muted); margin-top: 3px; }
.mk-sticky .mk-btn { height: 42px; }
@media (max-width: 1100px) {
    .mk-cart__layout { grid-template-columns: minmax(0, 1fr); }
    .mk-cart__summary { position: static; }
}
@media (max-width: 760px) {
    .mk-cart__cols { display: none; }
    .mk-cart .mk-cart__row.row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .mk-cart .cart-item-details { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; padding-inline-start: 76px; }
    .mk-cart__cell { text-align: start; }
    .mk-cart__label { display: block; }
    .mk-cart .mk-summary__actions .mk-btn--primary { display: none; }   /* la barre fixe reprend l'action */
    .mk-sticky { display: block; }
    .mk-cart .mk-simple { padding-bottom: 96px; }
}
@media (max-width: 480px) {
    .mk-cart .cart-item-details { grid-template-columns: 1fr 1fr; padding-inline-start: 0; }
    .mk-cart__cell--remove { justify-self: end; }
}

/* ---------- Checkout ---------- */
.mk-steps { display: inline-flex; align-items: center; gap: 8px; }
.mk-steps__s { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 "Inter", sans-serif; color: var(--mk-faint); }
.mk-steps__s i { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 "Inter", sans-serif; font-style: normal; background: #EEF0F3; color: var(--mk-muted); }
.mk-steps__s.is-done, .mk-steps__s.is-current { color: var(--mk-ink); }
.mk-steps__s.is-done i, .mk-steps__s.is-current i { background: var(--mk-green); color: #fff; }
.mk-steps__sep { width: 26px; height: 1px; background: var(--mk-line-2); }
.mk-checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.mk-checkout__form { display: grid; gap: 16px; }
.mk-panel__ic { font-size: 16px; color: var(--mk-green); }
.mk-checkout__body { padding-top: 14px; }
.mk-checkout .guest-alert { margin-bottom: 14px; }
/* Mode de paiement (option unique existante) */
.mk-pay { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--mk-line-2); border-radius: 10px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; margin: 0; }
.mk-pay.selected, .mk-pay:hover { border-color: var(--mk-green); background: var(--mk-green-soft); }
.mk-pay__radio { margin: 0; flex: 0 0 auto; accent-color: var(--mk-green); width: 16px; height: 16px; }
.mk-pay__ic { width: 38px; height: 38px; border-radius: 10px; background: #fff; border: 1px solid var(--mk-line); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--mk-green); flex: 0 0 auto; }
.mk-pay__info { min-width: 0; }
.mk-pay__title { margin: 0; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-pay__desc { margin: 2px 0 0; font: 400 11px/15px "Inter", sans-serif; color: var(--mk-muted); }
/* Récapitulatif */
.mk-checkout__summary { position: sticky; top: 90px; }
.mk-checkout .mk-summary { padding-top: 6px; }
.mk-co-items { display: grid; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--mk-line); }
.mk-co-item { display: flex; align-items: center; gap: 10px; }
.mk-co-item__thumb { width: 44px; height: 44px; border: 1px solid var(--mk-line); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.mk-co-item__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mk-co-item__info { min-width: 0; flex: 1 1 auto; }
.mk-co-item__name { font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-co-item__qty { font: 400 11px/14px "Inter", sans-serif; color: var(--mk-muted); }
.mk-co-item__price { font: 600 12px/1 "Inter", sans-serif; color: var(--mk-ink); white-space: nowrap; }
.mk-co-shipping { padding: 6px 0 2px; }
.mk-co-shipping .mk-summary__shop-line { padding: 6px 0; }
.mk-co-shipping .mk-summary__shop-name { display: inline-flex; align-items: center; gap: 6px; }
.mk-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font: 500 11px/1 "Inter", sans-serif; color: var(--mk-muted); }
.mk-secure .mk-svg { font-size: 14px; color: var(--mk-green); }
/* Bouton de soumission en cours (spinner injecté par le script) */
.mk-btn .spinner-border { width: 14px; height: 14px; border-width: 2px; }
@media (max-width: 1100px) {
    .mk-checkout__layout { grid-template-columns: minmax(0, 1fr); }
    .mk-checkout__summary { position: static; }
}
@media (max-width: 760px) {
    .mk-steps { display: none; }
    .mk-checkout .mk-summary__actions .btn-checkout { display: none; }   /* la barre fixe reprend l'action */
    .mk-checkout .mk-sticky { display: block; }
    .mk-checkout .mk-simple { padding-bottom: 96px; }
}

/* ---------- Boutiques (liste) ---------- */
.mk-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }
.mk-shop-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mk-shop-card:hover { border-color: #CFE9DB; box-shadow: 0 8px 20px rgba(17, 24, 39, .06); transform: translateY(-2px); }
.mk-shop-card__cover { position: relative; display: block; height: 150px; background: #F3F6F4; overflow: hidden; }
.mk-shop-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-shop-card__cover--empty { background: linear-gradient(135deg, #DFF4E9 0%, #EAF7F0 100%); }
.mk-shop-card__cover--empty::after { content: ""; position: absolute; inset: 0; background: url("../assets/img/marketplace-v2/hero-fond.webp") no-repeat right center / auto 150px; opacity: .55; }
.mk-shop-card__verified { position: absolute; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; background: #fff; color: var(--mk-green); font: 600 10px/1 "Inter", sans-serif; box-shadow: 0 2px 8px rgba(17, 24, 39, .1); }
.mk-shop-card__verified .mk-svg { font-size: 12px; }
.mk-shop-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px; }
.mk-shop-card__id { display: flex; align-items: center; gap: 12px; }
.mk-shop-card__logo { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--mk-line-2); background: #fff; object-fit: contain; padding: 4px; flex: 0 0 auto; margin-top: -38px; position: relative; box-shadow: 0 2px 8px rgba(17, 24, 39, .08); }
.mk-shop-card__who { min-width: 0; }
.mk-shop-card__name { margin: 0; font: 600 13px/17px "Inter", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-shop-card__name a { color: var(--mk-navy); }
.mk-shop-card__name a:hover { color: var(--mk-green); }
.mk-shop-card__owner { margin: 2px 0 0; font: 400 11px/14px "Inter", sans-serif; color: var(--mk-muted); }
.mk-shop-card__bio { margin: 10px 0 0; font: 400 11px/16px "Inter", sans-serif; color: var(--mk-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-shop-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 12px; }
.mk-shop-card__stat { text-align: center; padding: 8px 6px; border: 1px solid var(--mk-line); border-radius: 8px; background: var(--mk-page); }
.mk-shop-card__stat b { display: block; font: 700 12px/16px "Inter", sans-serif; color: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-shop-card__stat span { display: block; font: 400 10px/14px "Inter", sans-serif; color: var(--mk-muted); }
.mk-shop-card .mk-btn { margin-top: auto; }
/* Bouton de filtre flottant + tiroir (mobile) */
/* z-index 1030 : SOUS les offcanvas Bootstrap (1045) — 1050 flottait
   par-dessus le menu du site ouvert (constat propriétaire 20/08). */
.mk-fab-filter { position: fixed; bottom: 80px; inset-inline-end: 16px; z-index: 1030; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--mk-green); color: #fff; font: 600 12px/1 "Inter", sans-serif; box-shadow: 0 12px 30px rgba(24, 155, 93, .3); cursor: pointer; }
.mk-fab-filter .mk-svg { font-size: 16px; }
.mk-offcanvas { height: 80vh; border-radius: 16px 16px 0 0; font-family: "Inter", sans-serif; }
.mk-offcanvas .offcanvas-header { padding: 14px 18px; border-bottom: 1px solid var(--mk-line); }
.mk-offcanvas .offcanvas-title { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/20px "Inter", sans-serif; color: var(--mk-ink); }
.mk-offcanvas .offcanvas-title .mk-svg { font-size: 16px; color: var(--mk-green); }
.mk-offcanvas .offcanvas-body { overflow-y: auto; padding: 16px 18px 28px; }
.mk-offcanvas .form-label { font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-offcanvas .form-control, .mk-offcanvas .form-select { min-height: 40px; border-radius: 8px; border-color: var(--mk-line-2); font: 500 12px/1.4 "Inter", sans-serif; }
.mk-offcanvas .form-control:focus, .mk-offcanvas .form-select:focus { border-color: var(--mk-green); box-shadow: 0 0 0 3px rgba(24, 155, 93, .15); }
.mk-offcanvas .btn-primary { background: var(--mk-green); border-color: var(--mk-green); border-radius: 8px; font: 600 12px/1 "Inter", sans-serif; height: 40px; }
.mk-offcanvas .btn-primary:hover { background: var(--mk-green-dark); border-color: var(--mk-green-dark); }
.mk-offcanvas .btn-outline-secondary, .mk-offcanvas .btn-outline-primary { border-radius: 8px; font: 600 12px/1 "Inter", sans-serif; height: 40px; border-color: var(--mk-line-2); color: var(--mk-text); }
.mk-offcanvas .btn-outline-secondary:hover, .mk-offcanvas .btn-outline-primary:hover { background: #fff; border-color: var(--mk-green); color: var(--mk-green); }
@media (max-width: 1100px) { .mk-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .mk-filters--desktop { display: none; } }
@media (max-width: 640px) { .mk-shop-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* ---------- Boutique (page individuelle) ---------- */
.mk-shop-hero { height: auto; min-height: 260px; padding: 26px 30px 24px; }
.mk-shop-hero__id { display: flex; align-items: flex-start; gap: 22px; }
.mk-shop-hero__avatar-wrap { position: relative; flex: 0 0 auto; text-align: center; }
.mk-shop-hero__avatar { width: 108px; height: 108px; border-radius: 50%; border: 4px solid #fff; background: #fff; object-fit: contain; padding: 6px; box-shadow: 0 8px 22px rgba(17, 24, 39, .12); }
.mk-shop-hero__verified { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; height: 22px; padding: 0 9px; border-radius: 999px; background: #fff; color: var(--mk-green); font: 600 10px/1 "Inter", sans-serif; box-shadow: 0 2px 8px rgba(17, 24, 39, .1); }
.mk-shop-hero__verified .mk-svg { font-size: 12px; }
.mk-shop-hero__text { min-width: 0; flex: 1 1 auto; }
.mk-shop-hero__title { margin-top: 8px; }
.mk-shop-hero__desc { max-width: 680px; }
.mk-shop-hero__desc.collapsed .full-text { display: none; }
.mk-shop-hero__desc.expanded .short-text { display: none; }
.mk-shop-hero__desc .toggle-text { margin-inline-start: 6px; font-weight: 600; color: var(--mk-green); text-decoration: underline; }
.mk-shop-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mk-shop-hero__actions #contactPhoneBtn.btn-outline-light { background: #fff; color: var(--mk-green); border-color: var(--mk-green); }
.mk-shop-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mk-shop-hero__badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(24, 155, 93, .18); font: 500 11px/1 "Inter", sans-serif; color: var(--mk-text); }
.mk-shop-hero__badge .mk-svg { font-size: 13px; color: var(--mk-green); }
.mk-shop-hero__announce { margin: 14px 0 0; max-width: 680px; }
.mk-shop-hero.mk-hero--media .mk-shop-hero__text > *, .mk-shop-hero.mk-hero--media .mk-shop-hero__avatar-wrap { position: relative; z-index: 1; }
/* Services de la boutique : mêmes cartes que l'accueil, sur une ligne */
.mk-services--row { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; padding-top: 0; }
/* Colonne filtres + produits */
.mk-shop-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; margin-top: 18px; align-items: start; }
.mk-shop-side { display: grid; gap: 16px; position: sticky; top: 90px; }
.mk-shop-side__form { padding-top: 12px; }
.mk-shop-side .form-label { font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-shop-side .form-control, .mk-shop-side .form-select { min-height: 38px; border-radius: 8px; border-color: var(--mk-line-2); font: 500 12px/1.4 "Inter", sans-serif; }
.mk-shop-side .form-control:focus, .mk-shop-side .form-select:focus { border-color: var(--mk-green); box-shadow: 0 0 0 3px rgba(24, 155, 93, .15); }
.mk-shop-side .mb-4 { margin-bottom: 12px !important; }
.mk-shop-side .btn-primary { background: var(--mk-green); border-color: var(--mk-green); border-radius: 8px; height: 38px; font: 600 12px/1 "Inter", sans-serif; }
.mk-shop-side .btn-primary:hover { background: var(--mk-green-dark); border-color: var(--mk-green-dark); }
.mk-shop-side .btn-outline-secondary { border-radius: 8px; height: 38px; font: 600 12px/1 "Inter", sans-serif; border-color: var(--mk-line-2); color: var(--mk-text); }
.mk-shop-side .btn-outline-secondary:hover { background: #fff; border-color: var(--mk-green); color: var(--mk-green); }
.mk-shop-about__text { margin: 10px 0 8px; font: 400 12px/17px "Inter", sans-serif; color: var(--mk-muted); }
.mk-shop-about__line { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 400 11px/15px "Inter", sans-serif; color: var(--mk-text); }
.mk-shop-about__line .mk-svg { font-size: 13px; color: var(--mk-green); }
.mk-shop-about__line strong { color: var(--mk-ink); }
.mk-shop-about__line--ok { color: var(--mk-green-dark); }
.mk-shop-products__head { align-items: flex-start; height: auto; flex-wrap: wrap; gap: 10px; }
.mk-shop-products__count { margin: 4px 0 0; font: 400 12px/16px "Inter", sans-serif; color: var(--mk-muted); }
.mk-shop-sort { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.mk-shop-sort__label { font: 500 11px/1 "Inter", sans-serif; color: var(--mk-muted); margin: 0; }
.mk-shop-grid-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
/* Cartes produit de la boutique = partial existant (product-card + modal de quantite), habille au design system */
.mk-shop-page .product-card { border: 1px solid #EFF1F3 !important; border-radius: 10px !important; box-shadow: none !important; overflow: hidden; font-family: "Inter", sans-serif; }
.mk-shop-page .product-card:hover { border-color: #CFE9DB !important; box-shadow: 0 6px 16px rgba(17, 24, 39, .05) !important; transform: none !important; }
.mk-shop-page .product-card .card-img-top { height: 170px; object-fit: contain; padding: 12px; background: #fff; }
.mk-shop-page .product-card .card-body { padding: 12px 14px 14px; }
.mk-shop-page .product-card .card-title { font: 600 12px/16px "Inter", sans-serif; }
.mk-shop-page .product-card .card-title a { color: var(--mk-ink-2) !important; }
.mk-shop-page .product-card .card-title a:hover { color: var(--mk-green) !important; }
.mk-shop-page .product-card .text-muted, .mk-shop-page .product-card .small { font-size: 11px !important; }
.mk-shop-page .product-card .badge { font: 600 10px/1 "Inter", sans-serif; border-radius: 6px; padding: 4px 7px; }
.mk-shop-page .product-card .badge.bg-light { background: var(--mk-green-soft) !important; color: var(--mk-green) !important; }
.mk-shop-page .product-card .badge.bg-secondary { background: #F1F3F5 !important; color: var(--mk-muted) !important; }
.mk-shop-page .product-card .h5.text-primary, .mk-shop-page .product-card .text-primary { color: var(--mk-green) !important; font: 700 14px/1 "Inter", sans-serif; }
.mk-shop-page .product-card .text-decoration-line-through { font-size: 10px !important; color: var(--mk-faint) !important; }
.mk-shop-page .product-card .btn-primary.add-to-cart-btn { background: var(--mk-green-soft); border: 1px solid var(--mk-green); color: var(--mk-green); border-radius: 8px; height: 34px; font: 600 11px/1 "Inter", sans-serif; }
.mk-shop-page .product-card .btn-primary.add-to-cart-btn:hover { background: var(--mk-green); color: #fff; }
.mk-shop-page .product-card .btn-outline-secondary[disabled] { border-radius: 8px; height: 34px; font: 600 11px/1 "Inter", sans-serif; }
/* Modal quantite (existante) : le script remet le style inline du bouton a sa fermeture, on force par l ID */
.mk-modal--qty .modal-body { padding: 22px 20px 6px; }
.mk-modal__qty-title { margin: 12px 0 10px; font: 700 15px/20px "Inter", sans-serif; color: var(--mk-ink); }
.mk-qty--lg { height: 42px; }
.mk-qty--lg .mk-qty__btn { width: 42px; height: 42px; font-size: 18px; }
.mk-qty--lg .mk-qty__input { width: 70px; height: 42px; font-size: 14px; }
.mk-modal__ic--big { width: 64px; height: 64px; font-size: 32px; margin: 4px auto 6px; }
.mk-modal__btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mk-modal__btns.d-flex { display: flex !important; }
#quantityModal #confirm-add-to-cart { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px !important; border-radius: 8px !important; border: 0 !important; background: var(--mk-green) !important; color: #fff !important; font: 600 12px/1 "Inter", sans-serif !important; box-shadow: none !important; transform: none !important; }
#quantityModal #confirm-add-to-cart:hover { background: var(--mk-green-dark) !important; }
#quantityModal #confirm-add-to-cart[disabled] { opacity: .7; }
#quantityModal .mk-modal__preview .text-primary { color: var(--mk-green) !important; }
@media (max-width: 1100px) {
    .mk-services--row { grid-template-columns: minmax(0, 1fr); }
    .mk-shop-layout { grid-template-columns: minmax(0, 1fr); }
    .mk-shop-side { position: static; }
    .mk-shop-grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) { .mk-shop-side .filters-sidebar { display: none !important; } }
@media (max-width: 760px) {
    .mk-shop-hero { padding: 20px 18px 20px; }
    .mk-shop-hero__id { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .mk-shop-hero__actions, .mk-shop-hero__badges { justify-content: center; }
    .mk-shop-grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mk-shop-products__head { flex-direction: column; }
    .mk-shop-sort { margin-inline-start: 0; }
}
@media (max-width: 480px) { .mk-shop-grid-products { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fiche produit : overlays fonctionnels conservés tels quels (lightbox, vidéo, protection vidéo) ---------- */
:root { --product-primary: #189B5D; --product-secondary: #13824E; --product-accent: #189B5D; --product-success: #189B5D; }

/* Video Modal */
.video-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.video-modal-overlay.active {
    display: flex;
}

.video-modal-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    padding: 15px;
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.video-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.video-modal-content video {
    width: 100%;
    max-height: 70vh;
    display: block;
    border-radius: 10px;
    background: #000;
}

.video-modal-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    margin-top: 12px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.video-modal-close-btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
}


/* ========== IMAGE LIGHTBOX MODAL ========== */
.image-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
}

.image-lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-container {
    display: flex;
    max-width: 900px;
    max-height: 80vh;
    width: 90%;
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.3);
    overflow: hidden;
}

.lightbox-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    background: #f8fafc;
}

.lightbox-image-wrapper {
    position: relative;
    max-width: 100%;
    max-height: calc(80vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    padding: 10px;
}

.lightbox-image {
    max-width: 100%;
    max-height: calc(80vh - 120px);
    object-fit: contain;
    border-radius: 8px;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #374151;
    transition: all 0.2s ease;
    z-index: 10;
}

.lightbox-nav:hover {
    background: #f3f4f6;
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav.prev {
    left: 10px;
}

.lightbox-nav.next {
    right: 10px;
}

.lightbox-counter {
    margin-top: 12px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: white;
    border: none;
    color: var(--product-primary, #3b82f6);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    z-index: 20;
}

.lightbox-close:hover {
    background: #f3f4f6;
    color: var(--product-secondary, #2563eb);
}

.lightbox-thumbnails {
    width: 140px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 100%;
    background: white;
    border-left: 1px solid #e5e7eb;
}

.lightbox-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    background: #f8fafc;
}

.lightbox-thumb:hover {
    border-color: #e5e7eb;
    transform: scale(1.02);
}

.lightbox-thumb.active {
    border-color: var(--product-primary, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ========== PROTECTED VIDEO ========== */
.protected-video-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.protected-video {
    display: block;
    pointer-events: auto;
}

.video-protection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px; /* Laisser les contrôles accessibles */
    background: transparent;
    z-index: 1;
    pointer-events: none;
}


@media (max-width: 991px) {
    .lightbox-container {
        flex-direction: column;
        max-height: 85vh;
        width: 95%;
    }
    
    .lightbox-thumbnails {
        width: 100%;
        flex-direction: row;
        max-height: 80px;
        padding: 10px;
        order: 2;
        border-left: none;
        border-top: 1px solid #e5e7eb;
    }
    
    .lightbox-thumb {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }
    
    .lightbox-main {
        order: 1;
        flex: 1;
        padding: 15px;
    }
    
    .lightbox-image-wrapper {
        max-height: calc(85vh - 160px);
    }
    
    .lightbox-image {
        max-height: calc(85vh - 180px);
    }
    
    .lightbox-nav {
        width: 36px;
        height: 36px;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

/* ---------- Fiche produit ---------- */
.mk-product__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.mk-product__gallery { position: sticky; top: 90px; }
.mk-gallery__main { position: relative; display: flex; align-items: center; justify-content: center; height: 440px; border: 1px solid var(--mk-line); border-radius: 12px; background: #fff; overflow: hidden; cursor: zoom-in; }
.mk-gallery__main img.main-image { max-width: 100%; max-height: 100%; object-fit: contain; display: block; padding: 16px; }
.mk-gallery__main--mobile { height: 300px; cursor: default; }
.mk-gallery__badges { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 2; }
.mk-gallery__badges .mk-card__promo { position: static; }
.mk-gallery__price { display: inline-block; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--mk-line-2); color: var(--mk-green); font: 700 12px/24px "Inter", sans-serif; box-shadow: 0 2px 8px rgba(17, 24, 39, .08); }
.mk-thumbs { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.mk-thumbs__nav { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1px solid var(--mk-line-2); border-radius: 50%; background: #fff; color: var(--mk-text); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.mk-thumbs__nav:hover { border-color: var(--mk-green); color: var(--mk-green); }
.mk-thumbs__track { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; flex: 1 1 auto; min-width: 0; padding: 2px; }
.mk-thumbs__track::-webkit-scrollbar { display: none; }
.mk-thumbs__track--mobile { margin-top: 10px; }
.mk-thumbs__item { flex: 0 0 auto; width: 62px; height: 62px; border: 2px solid var(--mk-line); border-radius: 10px; background: #fff; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.mk-thumbs__item img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.mk-thumbs__item:hover { border-color: #CFE9DB; }
.mk-thumbs__item.active { border-color: var(--mk-green); }
.mk-product__video { margin-top: 14px; }
.mk-product__video-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-product__video-title .mk-svg { color: var(--mk-green); font-size: 14px; }
/* Informations */
.mk-product__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mk-product__tags .mk-tag { height: 22px; font-size: 11px; }
.mk-product__title { margin: 0 0 8px; font: 700 20px/26px "Inter", sans-serif; color: var(--mk-ink); }
.mk-product__rating-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-stars-row { display: inline-flex; align-items: center; gap: 6px; }
.mk-stars { display: inline-flex; gap: 1px; font-size: 14px; line-height: 1; }
.mk-stars .star { color: var(--mk-star); }
.mk-stars .star.empty { color: #E5E7EA; }
.mk-stars--lg { font-size: 18px; }
.mk-stars--sm { font-size: 12px; }
.mk-stars-row__val { font: 700 12px/1 "Inter", sans-serif; color: var(--mk-ink); }
.mk-stars-row__count { font: 500 12px/1 "Inter", sans-serif; color: var(--mk-muted); }
.mk-stars-row__count:hover { color: var(--mk-green); }
.mk-product__short { font: 400 12px/18px "Inter", sans-serif; color: var(--mk-text); margin-bottom: 12px; }
.mk-product__more { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font: 600 12px/1 "Inter", sans-serif; color: var(--mk-green); }
.mk-gallery-mobile { margin: 6px 0 12px; }
/* Prix */
.mk-price { padding: 14px; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-page); margin-bottom: 12px; }
.mk-price__line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mk-price__val { font: 700 26px/1 "Inter", sans-serif; color: var(--mk-green); }
.mk-price__cur { font: 700 12px/1 "Inter", sans-serif; color: var(--mk-green); }
.mk-price__old { font: 400 12px/1 "Inter", sans-serif; color: var(--mk-faint); text-decoration: line-through; margin-inline-start: 4px; }
.mk-price .savings-badge { margin-top: 10px; }
.mk-price__ship { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font: 500 11px/16px "Inter", sans-serif; color: var(--mk-text); }
.mk-price__ship .mk-svg { font-size: 15px; color: var(--mk-green); }
.mk-price__ship .shipping-threshold { color: var(--mk-muted); }
.mk-price__pay { display: grid; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mk-line-2); }
.mk-price__pay .payment-info-item { display: flex; align-items: center; gap: 6px; font: 400 11px/15px "Inter", sans-serif; color: var(--mk-text); }
.mk-price__pay .mk-svg { font-size: 14px; color: var(--mk-green); flex: 0 0 auto; }
/* Stock */
.mk-stock { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 11px/1 "Inter", sans-serif; margin-bottom: 12px; }
.mk-stock .mk-svg { font-size: 13px; }
.mk-stock--ok { background: var(--mk-green-soft); color: var(--mk-green-dark); }
.mk-stock--low { background: #FDF3E7; color: #9A5B00; }
.mk-stock--out { background: #FDECEC; color: #B42318; }
/* Achat */
.mk-buy { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 12px; border: 1px solid var(--mk-line); border-radius: 12px; background: #fff; margin-bottom: 12px; }
.mk-buy__label { display: block; margin-bottom: 5px; font: 600 11px/1 "Inter", sans-serif; color: var(--mk-muted); }
.mk-buy__actions { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; }
.mk-buy__actions .mk-btn--primary { flex: 1 1 auto; }
.mk-buy .spinner-border { width: 14px; height: 14px; border-width: 2px; }
/* Barre d achat collante (bureau) : le script pose .sticky quand le bloc sort de l ecran */
@media (min-width: 992px) {
    .mk-buy.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--mk-line); box-shadow: 0 -8px 24px rgba(17, 24, 39, .08); padding: 10px calc((100% - 1300px) / 2 + 16px); }
    .mk-buy.sticky .mk-buy__qty { display: flex; align-items: center; gap: 8px; }
    .mk-buy.sticky .mk-buy__label { margin: 0; }
}
/* Garantie */
.mk-guarantee { padding: 12px 14px; border: 1px solid #CFE9DB; border-radius: 12px; background: var(--mk-green-soft); margin-bottom: 12px; }
.mk-guarantee__title { display: flex; align-items: center; gap: 6px; font: 700 11px/1 "Inter", sans-serif; letter-spacing: .4px; color: var(--mk-green-dark); margin-bottom: 8px; }
.mk-guarantee__title .mk-svg { font-size: 15px; }
.mk-guarantee__item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 400 12px/18px "Inter", sans-serif; color: var(--mk-text); }
.mk-guarantee__item + .mk-guarantee__item { margin-top: 4px; }
.mk-guarantee__item > .mk-svg { font-size: 14px; color: var(--mk-green); flex: 0 0 auto; }
.mk-guarantee__item .mk-btn { margin-inline-start: auto; }
/* Boutique */
.mk-product__shop { padding: 10px 12px; border: 1px solid var(--mk-line); border-radius: 12px; background: #fff; margin-bottom: 12px; }
.mk-product__shop .mk-vendor__name { display: inline-flex; align-items: center; gap: 4px; }
.mk-product__shop .mk-btn { margin-inline-start: auto; flex: 0 0 auto; }
/* Partage */
.mk-share { display: flex; align-items: center; gap: 8px; }
.mk-share__label { font: 600 11px/1 "Inter", sans-serif; color: var(--mk-muted); }
.mk-share__btn { width: 32px; height: 32px; padding: 0; border: 1px solid var(--mk-line-2); border-radius: 50%; background: #fff; color: var(--mk-text); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.mk-share__btn:hover { border-color: var(--mk-green); color: var(--mk-green); }
/* Description, caractéristiques, engagement, avis */
.mk-product__desc, .mk-product__engage, .mk-product .reviews-section { margin-top: 24px; }
.mk-product__desc-text { margin-top: 12px; font: 400 13px/21px "Inter", sans-serif; color: var(--mk-text); }
.mk-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.mk-spec { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--mk-line); border-radius: 10px; background: var(--mk-page); }
.mk-spec__ic { width: 34px; height: 34px; border-radius: 50%; background: var(--mk-green-soft); color: var(--mk-green); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; }
.mk-spec__label { font: 500 10px/14px "Inter", sans-serif; color: var(--mk-muted); text-transform: uppercase; letter-spacing: .3px; }
.mk-spec__val { font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-product__engage { padding-top: 12px; }
.mk-reviews__head { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-page); }
.mk-reviews__summary { display: flex; align-items: center; gap: 14px; }
.mk-reviews__big { font: 700 34px/1 "Inter", sans-serif; color: var(--mk-ink); }
.mk-reviews__count { font: 400 12px/16px "Inter", sans-serif; color: var(--mk-muted); margin-top: 3px; }
.mk-reviews__list { display: grid; gap: 10px; margin-top: 12px; }
.mk-review { padding: 12px 14px; border: 1px solid var(--mk-line); border-radius: 12px; background: #fff; }
.mk-review__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mk-review__who { display: flex; align-items: center; gap: 10px; }
.mk-review__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mk-green-soft); color: var(--mk-green); display: inline-flex; align-items: center; justify-content: center; font: 700 14px/1 "Inter", sans-serif; }
.mk-review__name { font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-review__date { font: 400 11px/14px "Inter", sans-serif; color: var(--mk-muted); }
.mk-review__meta { display: flex; align-items: center; gap: 8px; }
.mk-review__text { margin: 10px 0 0; font: 400 12px/18px "Inter", sans-serif; color: var(--mk-text); }
/* Modals produit */
.mk-modal--wide .modal-dialog { max-width: 900px; }
.mk-modal__sub { display: block; font: 400 12px/16px "Inter", sans-serif; color: var(--mk-muted); }
.mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Barre fixe mobile */
.mk-sticky--product .mk-sticky__in { gap: 8px; }
@media (max-width: 1100px) {
    .mk-product__top { grid-template-columns: minmax(0, 1fr); }
    .mk-product__gallery { position: static; }
    .mk-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .mk-product .desktop-actions .mk-buy__actions .purchase-action-btn { display: none; }   /* la barre fixe reprend achat/panier */
    .mk-product .mk-sticky { display: block; }
    .mk-product .mk-home { padding-bottom: 96px; }
    .mk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-specs { grid-template-columns: minmax(0, 1fr); }
    .mk-product__title { font-size: 18px; line-height: 24px; }
}

/* ==========================================================================
   Page contact (site) — refonte 16/08/2026 sur le design system .mk-
   ========================================================================== */
.mk-contact__hero { padding-right: 38px; }
.mk-contact__hero .mk-hero__sub { max-width: 560px; }
.mk-contact__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: 18px; align-items: start; }
.mk-contact__hint { margin: 10px 0 14px; font: 400 12px/18px "Inter", sans-serif; color: var(--mk-muted); }
/* Motifs */
.mk-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-subject { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--mk-line-2); border-radius: 12px; background: #fff; cursor: pointer; margin: 0; transition: border-color .15s, box-shadow .15s, background .15s; }
.mk-subject input { position: absolute; opacity: 0; pointer-events: none; }
.mk-subject:hover { border-color: #CFE9DB; }
.mk-subject.is-selected { border-color: var(--mk-green); background: var(--mk-green-soft); box-shadow: 0 0 0 3px rgba(24, 155, 93, .12); }
.mk-subject:focus-within { outline: 2px solid var(--mk-green); outline-offset: 2px; }
.mk-subject__ic { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 auto; }
.mk-subject--green .mk-subject__ic { background: #D8F0E4; color: var(--mk-green); }
.mk-subject--blue .mk-subject__ic { background: #EAF0FB; color: #3B6FD4; }
.mk-subject--orange .mk-subject__ic { background: #FAE4D6; color: #F0743A; }
.mk-subject--violet .mk-subject__ic { background: #DFDBF7; color: #4C5FBF; }
.mk-subject__txt { min-width: 0; flex: 1 1 auto; }
.mk-subject__txt b { display: block; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-subject__txt small { display: block; margin-top: 2px; font: 400 11px/15px "Inter", sans-serif; color: var(--mk-muted); }
.mk-subject__check { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--mk-line-2); color: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; background: #fff; }
.mk-subject.is-selected .mk-subject__check { border-color: var(--mk-green); color: var(--mk-green); }
.mk-subjects.shake { animation: mkShake .4s; }
.mk-contact__advice { margin-top: 12px; }
.mk-contact__advice .mk-hint { margin-top: 0; font-size: 12px; line-height: 17px; }
.mk-contact__advice-link { display: inline-block; margin-inline-start: 6px; font-weight: 600; color: var(--mk-green); }
/* Champs */
.mk-contact__form { margin-top: 4px; }
.mk-contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin-top: 16px; }
.mk-contact__grid .mk-field { margin-bottom: 12px; }
.mk-field--phone { grid-column: 1 / -1; }
.mk-field--phone.is-featured .mk-input { border-color: var(--mk-green); background: var(--mk-green-soft); }
.mk-contact__counter { text-align: end; }
.mk-contact__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.mk-contact__actions .mk-btn { min-width: 220px; height: 44px; }
.mk-contact__delay { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 "Inter", sans-serif; color: var(--mk-muted); }
.mk-contact__delay .mk-svg { font-size: 14px; color: var(--mk-green); }
/* Succès */
.mk-contact__success { text-align: center; padding: 28px 12px 12px; }
.mk-contact__success .mk-modal__ic--big { margin: 0 auto 12px; }
.mk-contact__success-title { margin: 0 0 6px; font: 700 20px/26px "Inter", sans-serif; color: var(--mk-ink); }
.mk-contact__success-text { margin: 0 0 18px; font: 400 13px/19px "Inter", sans-serif; color: var(--mk-text); }
.mk-contact__success .mk-btn { margin: 4px; }
/* Colonne */
.mk-contact__side { padding-top: 0; }
.mk-contact__side a.mk-service:hover { box-shadow: 0 6px 16px rgba(17, 24, 39, .06); }
.mk-contact__side .mk-service > div > span { word-break: break-all; }
@media (max-width: 1100px) {
    .mk-contact__layout { grid-template-columns: minmax(0, 1fr); }
    .mk-contact__side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .mk-subjects { grid-template-columns: minmax(0, 1fr); }
    .mk-contact__grid { grid-template-columns: minmax(0, 1fr); }
    .mk-contact__side { grid-template-columns: minmax(0, 1fr); }
    .mk-contact__actions .mk-btn { width: 100%; }
    .mk-contact__hero { padding-right: 20px; }
}

/* ==========================================================================
   Fiche adoption (site) — refonte 17/08/2026 sur le design system .mk-
   ========================================================================== */
.mk-adopt__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.mk-adopt__gallery { position: sticky; top: 90px; }
.mk-adopt__media { position: relative; height: 460px; border-radius: 12px; overflow: hidden; background: #F3F6F4; border: 1px solid var(--mk-line); }
.mk-adopt__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.1); transform: scale(1.15); opacity: .55; }
.mk-adopt__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.mk-adopt__badges { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.mk-adopt__badge { height: 24px; font-size: 11px; background: #fff; box-shadow: 0 2px 8px rgba(17, 24, 39, .1); }
.mk-adopt__badge--star { background: #F5B940; color: #3D2A00; }
.mk-adopt__thumbs { margin-top: 12px; }
.mk-adopt__thumb { position: relative; padding: 0; width: 72px; height: 72px; }
.mk-adopt__thumb img { object-fit: cover; padding: 0; }
.mk-adopt__thumb.is-on { border-color: var(--mk-green); }
.mk-adopt__thumb-plus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(17, 24, 39, .55); color: #fff; font: 700 13px/1 "Inter", sans-serif; }
/* Identité */
.mk-adopt__title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 26px/32px "Inter", sans-serif; color: var(--mk-ink); }
.mk-adopt__title-heart { font-size: 22px; color: var(--mk-green); }
.mk-adopt__tagline { margin: 0 0 14px; font: 400 13px/19px "Inter", sans-serif; color: var(--mk-text); }
.mk-adopt__facts { display: grid; gap: 8px; }
.mk-adopt__fact { display: flex; align-items: center; gap: 10px; font: 400 12px/16px "Inter", sans-serif; color: var(--mk-muted); }
.mk-adopt__fact-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--mk-green-soft); color: var(--mk-green); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.mk-adopt__fact-l { min-width: 88px; }
.mk-adopt__fact b { font-weight: 600; color: var(--mk-ink); }
.mk-adopt__health { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mk-adopt__health .mk-tag { height: 24px; font-size: 11px; gap: 5px; }
/* Carte de contact */
.mk-adopt__contact { margin-top: 16px; padding: 14px; border: 1px solid #CFE9DB; border-radius: 12px; background: var(--mk-green-soft); display: grid; gap: 8px; }
.mk-adopt__contact-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font: 700 13px/18px "Inter", sans-serif; color: var(--mk-ink); }
.mk-adopt__contact-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--mk-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
.mk-adopt__contact .mk-btn--soft, .mk-adopt__contact .mk-btn--ghost { background: #fff; }
.mk-adopt__coords { margin-top: 0; background: #fff; }
/* Coordonnées dévoilées après « Je suis intéressé » : bref surlignage pour guider l'œil (23/08/2026) */
.mk-adopt__coords { transition: box-shadow .4s; }
#contactInfo.is-revealed .mk-adopt__coords { animation: mkCoordsPulse 1.6s ease-out 1; }
@keyframes mkCoordsPulse { 0% { box-shadow: 0 0 0 0 rgba(14,159,85,.55); } 100% { box-shadow: 0 0 0 14px rgba(14,159,85,0); } }
.mk-adopt__coords b { display: block; font-weight: 600; color: var(--mk-ink); }
.mk-adopt__coords a { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-weight: 600; color: var(--mk-green); }
.mk-adopt__share { margin: 2px 0; }
.mk-adopt__trust { margin-top: 4px; justify-content: flex-start; text-align: start; }
/* Publicité maison sous la carte de contact (17/08). Rayon 12px = celui de
   .mk-adopt__contact juste au-dessus. line-height:0 sur le lien supprime
   l'espace fantôme sous l'image en ligne ; max-width:100% + height:auto
   garantissent l'absence de débordement horizontal sur petit écran. */
.mk-adopt__promo { display: block; margin-top: 16px; border-radius: 12px; overflow: hidden; line-height: 0; cursor: pointer; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.mk-adopt__promo img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; border-radius: 12px; }
/* Survol réservé au bureau ET aux périphériques qui survolent réellement :
   sur tactile, :hover reste collé après le tap. */
@media (hover: hover) and (pointer: fine) {
    .mk-adopt__promo:hover { transform: scale(1.012); filter: brightness(1.03); box-shadow: 0 8px 20px rgba(32, 62, 160, .12); }
}
.mk-adopt__promo:focus-visible { outline: 2px solid var(--mk-green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .mk-adopt__promo { transition: none; }
    .mk-adopt__promo:hover { transform: none; }
}
/* Sections */
.mk-adopt__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-top: 24px; align-items: start; }
.mk-adopt__text { margin: 12px 0 0; font: 400 13px/21px "Inter", sans-serif; color: var(--mk-text); }
.mk-adopt__addr { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font: 400 12px/16px "Inter", sans-serif; color: var(--mk-muted); }
.mk-adopt__addr .mk-svg { color: var(--mk-green); }
.mk-adopt__quote { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--mk-green-soft); font: 500 12px/18px "Inter", sans-serif; color: var(--mk-green-dark); }
.mk-adopt__quote-mark { font: 700 26px/1 Georgia, serif; color: var(--mk-green); }
.mk-adopt__stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font: 400 11px/1 "Inter", sans-serif; color: var(--mk-muted); }
.mk-adopt__stats > span { display: inline-flex; align-items: center; gap: 5px; }
.mk-adopt__stats .mk-svg { font-size: 13px; }
.mk-adopt__engage { margin-top: 12px; }
.mk-adopt__infos { margin-top: 10px; }
.mk-adopt__row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--mk-line-2); font: 400 12px/16px "Inter", sans-serif; color: var(--mk-muted); }
.mk-adopt__row:last-child { border-bottom: 0; }
.mk-adopt__row i { color: var(--mk-green); font-size: 14px; }
.mk-adopt__row b { font-weight: 600; color: var(--mk-ink); text-align: end; }
.mk-adopt__why { display: grid; gap: 10px; margin-top: 12px; }
.mk-adopt__why-card { height: auto; padding: 12px 14px; }
.mk-adopt__map { height: 220px; border-radius: 10px; overflow: hidden; margin-top: 12px; border: 1px solid var(--mk-line); background: var(--mk-page); }
.mk-adopt__map--empty { display: flex; align-items: center; justify-content: center; font: 500 12px/1 "Inter", sans-serif; color: var(--mk-muted); }
.mk-adopt__map--empty span { display: inline-flex; align-items: center; gap: 6px; }
.mk-adopt__vets { margin-top: 12px; }
/* Autres animaux (Swiper conservé) */
.mk-adopt__others { margin-top: 24px; }
.mk-adopt__swiper-wrap { position: relative; margin-top: 12px; }
.mk-adopt__nav { position: absolute; top: 40%; z-index: 3; width: 32px; height: 32px; }
.mk-adopt__nav--prev { inset-inline-start: -8px; }
.mk-adopt__nav--next { inset-inline-end: -8px; }
.mk-adopt__nav[disabled] { opacity: .35; pointer-events: none; }
.mk-adopt__mini { display: flex; flex-direction: column; height: 100%; border: 1px solid #EFF1F3; border-radius: 10px; overflow: hidden; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.mk-adopt__mini:hover { border-color: #CFE9DB; box-shadow: 0 6px 16px rgba(17, 24, 39, .05); }
.mk-adopt__mini-media { display: block; height: 150px; background: #F3F6F4; }
.mk-adopt__mini-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-adopt__mini-body { display: block; padding: 10px 12px 12px; }
.mk-adopt__mini-body b { display: block; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink-2); }
.mk-adopt__mini-body small { display: flex; align-items: center; gap: 4px; margin-top: 2px; font: 400 11px/15px "Inter", sans-serif; color: var(--mk-muted); }
/* CTA */
.mk-adopt__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; padding: 22px 26px; border-radius: 16px; background: linear-gradient(120deg, var(--mk-green) 0%, #12875A 100%); color: #fff; }
.mk-adopt__cta-ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; flex: 0 0 auto; }
.mk-adopt__cta-txt { flex: 1 1 260px; }
.mk-adopt__cta-txt h2 { margin: 0 0 4px; font: 700 17px/22px "Inter", sans-serif; color: #fff; }
.mk-adopt__cta-txt p { margin: 0; font: 400 12px/18px "Inter", sans-serif; color: rgba(255, 255, 255, .9); }
.mk-adopt__cta-btn { background: #fff; color: var(--mk-green); border-radius: 999px; height: 44px; padding: 0 22px; }
.mk-adopt__cta-btn:hover { background: #F1FBF6; color: var(--mk-green-dark); }
/* Barre fixe mobile */
.mk-adopt__sticky { display: none; }
.mk-adopt__sticky-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--mk-green); font: 700 11px/1 "Inter", sans-serif; }
.mk-adopt__sticky .mk-btn.done { background: var(--mk-green-dark); }
@media (max-width: 1100px) {
    .mk-adopt__top { grid-template-columns: minmax(0, 1fr); }
    .mk-adopt__gallery { position: static; }
    .mk-adopt__cols { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
}
@media (max-width: 760px) {
    .mk-adopt__media { height: 320px; }
    .mk-adopt__title { font-size: 22px; line-height: 28px; }
    .mk-adopt__sticky { display: block; }
    .mk-adopt .mk-home { padding-bottom: 90px; }
    .mk-adopt__cta { padding: 18px; }
    .mk-adopt__cta-btn { width: 100%; }
    .mk-adopt__nav { display: none; }
}

/* Fiche adoption : navigation annonce precedente / suivante (17/08) */
.mk-adopt__pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-adopt__pn--desktop { margin-top: 16px; }
.mk-adopt__pn-btn { justify-content: center; }
.mk-adopt__pn-btn.is-off { opacity: .45; cursor: default; pointer-events: none; }
[dir="rtl"] .mk-adopt__pn-fwd { transform: scaleX(-1); }
.mk-adopt__pn--mobile { display: none; padding: 8px 16px 0; }
@media (max-width: 760px) {
    .mk-adopt__pn--desktop { display: none; }
    .mk-adopt__pn--mobile { display: grid; }
    .mk-adopt__pn--mobile .mk-adopt__pn-btn { height: 38px; font-size: 11px; }
    .mk-adopt .mk-home { padding-bottom: 140px; }
}

/* ==========================================================================
   Centre d'aide (site) — refonte 17/08/2026 sur le design system .mk-
   ========================================================================== */
.mk-help__hero { display: flex; flex-direction: column; justify-content: center; height: 220px; padding-inline-end: 260px; }
.mk-help__hero .mk-hero__title { font-size: 26px; line-height: 34px; }
.mk-help__hero .mk-hero__sub { margin-top: 8px; }
.mk-help__hero-img { position: absolute; inset-inline-end: 26px; bottom: 0; z-index: 1; width: auto; height: 200px; object-fit: contain; }
[dir="rtl"] .mk-help__hero-img { transform: scaleX(-1); }
.mk-help__layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; margin-top: 18px; align-items: start; }
.mk-help__layout--reverse { grid-template-columns: minmax(0, 1fr) 320px; }
.mk-help__topics { position: sticky; top: 90px; }
/* Sujets */
.mk-help__topiclist { display: grid; gap: 8px; margin-top: 10px; }
.mk-help__topic { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--mk-line); border-radius: 10px; background: #fff; text-decoration: none; transition: border-color .15s, background .15s; }
.mk-help__topic:hover { border-color: #CFE9DB; background: #FBFEFC; }
.mk-help__topic.active { border-color: var(--mk-green); background: var(--mk-green-soft); }
.mk-help__topic-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--mk-green-soft); color: var(--mk-green); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
.mk-help__topic.active .mk-help__topic-ic { background: var(--mk-green); color: #fff; }
.mk-help__topic-txt { min-width: 0; }
.mk-help__topic-txt b { display: block; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-ink); }
.mk-help__topic-txt small { display: block; margin-top: 2px; font: 400 11px/15px "Inter", sans-serif; color: var(--mk-muted); }
/* Questions */
.mk-help__count { margin-inline-start: auto; font: 500 11px/1 "Inter", sans-serif; color: var(--mk-muted); }
.mk-help__faqs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.mk-help__faq { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--mk-line); border-radius: 10px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mk-help__faq:hover { border-color: #CFE9DB; box-shadow: 0 6px 16px rgba(17, 24, 39, .05); }
.mk-help__faq-q { flex: 1 1 auto; min-width: 0; font: 500 13px/19px "Inter", sans-serif; color: var(--mk-ink-2); }
.mk-help__faq:hover .mk-help__faq-q { color: var(--mk-green); }
.mk-help__faq-go { flex: 0 0 auto; font-size: 15px; color: var(--mk-green); }
[dir="rtl"] .mk-help__faq-go { transform: scaleX(-1); }
.mk-help__faqs--side .mk-help__faq { padding: 10px 12px; }
.mk-help__faqs--side .mk-help__faq-q { font-size: 12px; line-height: 17px; }
/* Réponse */
.mk-help__answer-tag { margin-inline-start: auto; height: 24px; font-size: 11px; gap: 5px; }
.mk-help__prose { margin-top: 14px; font: 400 13.5px/22px "Inter", sans-serif; color: var(--mk-text); }
.mk-help__prose > *:first-child { margin-top: 0; }
.mk-help__prose p { margin: 0 0 12px; }
.mk-help__prose h2, .mk-help__prose h3, .mk-help__prose h4 { margin: 20px 0 8px; font: 700 15px/21px "Inter", sans-serif; color: var(--mk-ink); }
.mk-help__prose ul, .mk-help__prose ol { margin: 0 0 12px; padding-inline-start: 20px; }
.mk-help__prose li { margin-bottom: 6px; }
.mk-help__prose li::marker { color: var(--mk-green); }
.mk-help__prose a { color: var(--mk-green); font-weight: 600; text-decoration: none; }
.mk-help__prose a:hover { text-decoration: underline; }
.mk-help__prose img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.mk-help__prose blockquote { margin: 12px 0; padding: 12px 14px; border-inline-start: 3px solid var(--mk-green); border-radius: 0 10px 10px 0; background: var(--mk-green-soft); color: var(--mk-green-dark); }
.mk-help__prose table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12.5px; }
.mk-help__prose th, .mk-help__prose td { border: 1px solid var(--mk-line-2); padding: 8px 10px; text-align: start; }
.mk-help__prose th { background: var(--mk-page); font-weight: 600; color: var(--mk-ink); }
.mk-help__prose code { padding: 2px 6px; border-radius: 6px; background: var(--mk-page); font-size: 12px; }
.mk-help__back { margin-top: 18px; }
.mk-help__side { display: grid; gap: 16px; }
/* Appel à l'action */
.mk-help__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; padding: 20px 24px; border-radius: 16px; background: linear-gradient(120deg, var(--mk-green) 0%, #12875A 100%); color: #fff; }
.mk-help__cta-ic { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.mk-help__cta-txt { flex: 1 1 240px; }
.mk-help__cta-txt h2 { margin: 0 0 3px; font: 700 16px/21px "Inter", sans-serif; color: #fff; }
.mk-help__cta-txt p { margin: 0; font: 400 12px/18px "Inter", sans-serif; color: rgba(255, 255, 255, .9); }
.mk-help__cta-btn { background: #fff; color: var(--mk-green); border-radius: 999px; height: 42px; padding: 0 22px; }
.mk-help__cta-btn:hover { background: #F1FBF6; color: var(--mk-green-dark); }
[dir="rtl"] .mk-help__cta-btn .mk-svg { transform: scaleX(-1); }
@media (max-width: 1100px) {
    .mk-help__layout, .mk-help__layout--reverse { grid-template-columns: minmax(0, 1fr); }
    .mk-help__topics { position: static; }
}
@media (max-width: 760px) {
    .mk-help__hero { height: auto; padding-inline-end: 20px; padding-bottom: 150px; }
    .mk-help__hero .mk-hero__title { font-size: 22px; line-height: 29px; }
    .mk-help__hero-img { height: 145px; inset-inline-end: 10px; }
    .mk-help__cta { padding: 18px; }
    .mk-help__cta-btn { width: 100%; }
}

/* ==========================================================================
   Texte SEO de bas de page des catégories (18/08/2026)
   Bloc de lecture, sous la grille. Il ne doit ressembler ni à un champ de
   saisie ni à un pavé : colonne bornée, interligne aéré, sous-titres
   rythmés par le même filet vert que les titres de panneau.
   ========================================================================== */
.mk-cat-seo { margin-top: 12px; }
.mk-cat-seo__body {
    max-width: 74ch;
    padding-top: 16px;
    font: 400 14.5px/1.8 "Inter", sans-serif;
    color: var(--mk-text);
}
/* Le premier paragraphe sert de chapeau : un ton plus soutenu, pour donner
   un point d'entrée au lieu d'un mur de texte uniforme. */
.mk-cat-seo__body > p:first-child {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--mk-ink-2);
}
.mk-cat-seo__body p { margin: 0 0 16px; }
.mk-cat-seo__body p:last-child { margin-bottom: 0; }
.mk-cat-seo__body h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 28px 0 10px;
    font: 600 15px/22px "Inter", sans-serif;
    color: var(--mk-ink);
}
/* Même filet vert que .mk-panel__title : le bloc appartient visiblement au
   même système, il n'a pas l'air rapporté. */
.mk-cat-seo__body h3::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--mk-green);
}
.mk-cat-seo__body h3:first-child { margin-top: 0; }

/* RTL : `max-width` sur une colonne alignée au début fonctionne dans les deux
   sens, mais la colonne doit partir de la DROITE en arabe. */
[dir="rtl"] .mk-cat-seo__body { margin-inline-start: 0; }
[dir="rtl"] .mk-cat-seo__body h3 { flex-direction: row; }

@media (max-width: 640px) {
    .mk-cat-seo__body { padding-top: 12px; font-size: 14px; line-height: 1.72; }
    .mk-cat-seo__body > p:first-child { font-size: 14.5px; }
    .mk-cat-seo__body h3 { margin-top: 22px; font-size: 14.5px; }
}

/* ==========================================================================
   PAGE « A PROPOS » (/{locale}/a-propos) - 19/08/2026
   Reprend les tokens et les composants du design system : mk-panel, mk-btn,
   mk-tag, mk-svg. Rien n'est redefini ici qui existe deja ailleurs.
   RAPPEL : toujours minmax(0, 1fr) et jamais 1fr seul, sinon une colonne
   refuse de retrecir sous son contenu et la page part en defilement lateral.
   ========================================================================== */

.mk-about .mk-panel { margin-top: 18px; }

/* ---------- Teintes d'icones (reprises des cartes de service) ---------- */
.mk-about__ic--green { background: #D8F0E4; color: var(--mk-green); }
.mk-about__ic--blue { background: #EAF0FB; color: #3B6FD4; }
.mk-about__ic--orange { background: #FAE4D6; color: #F0743A; }
.mk-about__ic--violet { background: #DFDBF7; color: #4C5FBF; }

/* ---------- 1. En-tete ---------- */
.mk-about__hero { height: auto; min-height: 260px; padding: 30px 38px 32px; }
.mk-about__hero::before {
    background-image: none;
    background: radial-gradient(120% 140% at 100% 0%, #CFEEDD 0%, rgba(224, 244, 233, 0) 62%);
}
.mk-about__eyebrow {
    display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px;
    background: #fff; color: var(--mk-green);
    font: 600 11px/1 "Inter", sans-serif; letter-spacing: .3px; text-transform: uppercase;
}
.mk-about__title { max-width: 760px; }
.mk-about__lead { max-width: 700px; }
.mk-about__lead span { display: inline; }
.mk-about__hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mk-about__hero-cta .mk-btn { height: 42px; }

/* ---------- 2. Chiffres ---------- */
.mk-about__stats {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px; margin: 14px 0 0; padding: 0; list-style: none;
}
.mk-about__stat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 14px; border: 1px solid var(--mk-line); border-radius: 12px; background: #fff;
}
.mk-about__stat-ic {
    width: 34px; height: 34px; border-radius: 9px; font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mk-green-soft); color: var(--mk-green);
}
.mk-about__stat-num { font: 700 22px/26px "Inter", sans-serif; color: var(--mk-ink); }
.mk-about__stat-lbl { font: 400 11px/15px "Inter", sans-serif; color: var(--mk-muted); }
.mk-about__stats-note { margin: 12px 0 0; font: 400 11px/16px "Inter", sans-serif; color: var(--mk-faint); }

/* ---------- 3. Mission ---------- */
.mk-about__mission-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 24px; margin-top: 12px; align-items: start;
}
.mk-about__prose { margin: 0; font: 400 13px/22px "Inter", sans-serif; color: var(--mk-text); }
.mk-about__prose p { margin: 0 0 12px; }
.mk-about__prose p:last-child { margin-bottom: 0; }
.mk-about__pillars { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.mk-about__pillar {
    display: flex; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-page);
}
.mk-about__pillar-ic {
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center;
}
.mk-about__pillar b { display: block; font: 600 13px/18px "Inter", sans-serif; color: var(--mk-ink); }
.mk-about__pillar span { display: block; margin-top: 3px; font: 400 12px/17px "Inter", sans-serif; color: var(--mk-muted); }

/* ---------- 4 et 7. Cartes (poles du site, engagements) ---------- */
.mk-about__hint { margin: 8px 0 0; font: 400 12px/18px "Inter", sans-serif; color: var(--mk-muted); }
.mk-about__cards {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px; margin: 16px 0 0; padding: 0; list-style: none;
}
.mk-about__card {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 16px; border: 1px solid var(--mk-line); border-radius: 12px; background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.mk-about__card:hover {
    border-color: #CFE9DB; box-shadow: 0 6px 16px rgba(17, 24, 39, .06); transform: translateY(-2px);
}
.mk-about__card-ic {
    width: 40px; height: 40px; border-radius: 10px; font-size: 19px; margin-bottom: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.mk-about__card-title { margin: 0 0 6px; font: 700 14px/19px "Inter", sans-serif; color: var(--mk-ink); }
.mk-about__card-text { margin: 0; font: 400 12px/18px "Inter", sans-serif; color: var(--mk-text); }
.mk-about__card-more {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font: 600 12px/1 "Inter", sans-serif; color: var(--mk-green);
}
a.mk-about__card:hover .mk-about__card-more { gap: 9px; }
.mk-about__card--static { cursor: default; }

/* ---------- 5. Veterinaires ---------- */
.mk-about__vets .mk-panel__head { justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.mk-about__sub { margin: 18px 0 0; font: 700 14px/20px "Inter", sans-serif; color: var(--mk-ink); }
.mk-about__checks {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none;
}
.mk-about__checks li { display: flex; gap: 9px; font: 400 12px/18px "Inter", sans-serif; color: var(--mk-text); }
.mk-about__checks .mk-svg { flex: 0 0 auto; margin-top: 1px; font-size: 15px; color: var(--mk-green); }
.mk-about__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mk-about__actions .mk-btn { height: 42px; }

/* ---------- 6. Application ---------- */
.mk-about__app { background: linear-gradient(180deg, #F4FBF7 0%, #fff 60%); }
.mk-about__app-body { display: flex; align-items: center; gap: 24px; }
.mk-about__app-body > div:first-child { min-width: 0; flex: 1 1 auto; }
.mk-about__app-ic {
    flex: 0 0 auto; width: 120px; height: 120px; border-radius: 24px; font-size: 58px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--mk-green); box-shadow: 0 10px 26px rgba(17, 24, 39, .07);
}
.mk-about__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.mk-about__chips li {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
    border-radius: 999px; background: #fff; border: 1px solid var(--mk-line-2);
    font: 500 11px/1 "Inter", sans-serif; color: var(--mk-ink-2);
}
.mk-about__chips .mk-svg { font-size: 14px; color: var(--mk-green); }

/* ---------- 8. FAQ ---------- */
.mk-about__faq-list { margin-top: 12px; border-top: 1px solid var(--mk-line); }
.mk-about__faq-item { border-bottom: 1px solid var(--mk-line); }
.mk-about__faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 2px; cursor: pointer; list-style: none;
    font: 600 13px/19px "Inter", sans-serif; color: var(--mk-ink);
}
.mk-about__faq-item > summary::-webkit-details-marker { display: none; }
.mk-about__faq-item > summary:hover { color: var(--mk-green); }
.mk-about__faq-chev { flex: 0 0 auto; font-size: 17px; color: var(--mk-faint); transition: transform .18s; }
.mk-about__faq-item[open] .mk-about__faq-chev { transform: rotate(180deg); }
.mk-about__faq-item > p { margin: 0; padding: 0 2px 16px; font: 400 12px/19px "Inter", sans-serif; color: var(--mk-text); }

/* ---------- 9. Contact ---------- */
.mk-about__contact { background: var(--mk-green-soft); border-color: #CFE9DB; }
.mk-about__contact-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mk-about__contact-body > div:nth-child(2) { flex: 1 1 320px; min-width: 0; }
.mk-about__contact-ic {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; font-size: 23px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--mk-green);
}
.mk-about__contact-title { margin: 0; font: 700 16px/22px "Inter", sans-serif; color: var(--mk-ink); }
.mk-about__contact-text { margin: 4px 0 0; font: 400 12px/18px "Inter", sans-serif; color: var(--mk-text); }
.mk-about__contact .mk-about__actions { margin-top: 0; }

/* ---------- RTL ---------- */
[dir="rtl"] .mk-about__hero::before { background: radial-gradient(120% 140% at 0% 0%, #CFEEDD 0%, rgba(224, 244, 233, 0) 62%); }
[dir="rtl"] .mk-about__stat { align-items: flex-start; }

/* ---------- Responsive (paliers du design system) ---------- */
@media (max-width: 1200px) {
    .mk-about__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-about__mission-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 992px) {
    .mk-about__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-about__hero { padding: 26px 24px 28px; }
    .mk-about__app-ic { width: 96px; height: 96px; font-size: 46px; }
}

@media (max-width: 760px) {
    .mk-about__checks { grid-template-columns: minmax(0, 1fr); }
    .mk-about__app-body { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
    .mk-about__app-ic { width: 76px; height: 76px; font-size: 36px; border-radius: 18px; }
}

@media (max-width: 640px) {
    .mk-about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-about__cards { grid-template-columns: minmax(0, 1fr); }
    .mk-about__hero { padding: 22px 18px 24px; min-height: 0; }
    .mk-about__hero-cta .mk-btn,
    .mk-about__actions .mk-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .mk-about__stat-num { font-size: 19px; line-height: 23px; }
}

/* ============================================================
   Confirmation de commande (mk-confirm) — 21/08/2026
   Rev. 2 (retour propriétaire : « trop petit, pas pro ») : gabarit
   GÉNÉREUX — colonne resserrée façon reçu, typo et blancs agrandis,
   total affirmé. Le vocabulaire (tokens, tags, boutons) reste mk-*.
   ============================================================ */
.mk-confirm .mk-wrap{max-width:920px}
.mk-confirm__hero{text-align:center;padding:44px 0 14px}
.mk-confirm__check{display:inline-flex;width:92px;height:92px;border-radius:50%;background:var(--mk-green-soft);color:var(--mk-green);align-items:center;justify-content:center;font-size:44px;margin-bottom:20px;box-shadow:0 10px 26px rgba(24,155,93,.16)}
.mk-confirm__title{font-size:30px;font-weight:700;color:var(--mk-ink);margin:0 0 10px;letter-spacing:-.3px}
.mk-confirm__sub{font-size:15.5px;line-height:1.6;color:var(--mk-muted);margin:0 auto;max-width:600px}
.mk-confirm__multi{margin:20px auto 0;max-width:640px;text-align:start;font-size:13.5px;display:flex;flex-direction:column;gap:5px}
.mk-confirm__refs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.mk-confirm__order{margin-top:26px;padding:26px 32px 30px}
.mk-confirm__order .mk-panel__head{margin-bottom:18px}
.mk-confirm__order .mk-panel__title{font-size:18px}
.mk-confirm__order .mk-tag{font-size:13px;padding:6px 14px}
.mk-confirm__shopline{font-size:13px;font-weight:600;color:var(--mk-muted);margin-inline-start:10px}
.mk-confirm__meta{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 32px;margin:0}
.mk-confirm__meta > div{display:flex;flex-direction:column;gap:5px;min-width:0}
.mk-confirm__meta dt{font-size:12px;color:var(--mk-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.mk-confirm__meta dd{font-size:15.5px;color:var(--mk-ink);margin:0;font-weight:600;overflow-wrap:anywhere}
.mk-confirm__wide{grid-column:1 / -1}
.mk-confirm__item{display:flex;align-items:center;gap:18px;padding:18px 0;border-top:1px solid var(--mk-line)}
.mk-confirm__item:first-child{border-top:0;padding-top:4px}
.mk-confirm__item img{width:72px;height:72px;flex:none;object-fit:contain;background:var(--mk-page);border-radius:10px;padding:6px;border:1px solid var(--mk-line)}
.mk-confirm__iinfo{min-width:0;flex:1}
.mk-confirm__iname{font-size:15.5px;font-weight:600;color:var(--mk-ink);line-height:1.35}
.mk-confirm__iseller{font-size:13px;color:var(--mk-muted);margin-top:2px}
.mk-confirm__iqty{font-size:13.5px;color:var(--mk-text);margin-top:5px}
.mk-confirm__iprice{font-size:16px;font-weight:700;color:var(--mk-ink);white-space:nowrap;margin-inline-start:auto}
.mk-confirm__totals{margin-top:20px;border-top:1px solid var(--mk-line-2);padding-top:16px;display:flex;flex-direction:column;gap:10px;max-width:380px;margin-inline-start:auto}
.mk-confirm__trow{display:flex;justify-content:space-between;gap:20px;font-size:15px;color:var(--mk-text)}
.mk-confirm__trow--total{font-size:21px;font-weight:700;color:var(--mk-ink);border-top:2px solid var(--mk-ink);padding-top:14px;margin-top:4px}
.mk-confirm__trow--total span:last-child{color:var(--mk-green-dark)}
.mk-confirm__free{color:var(--mk-green);font-weight:600}
.mk-confirm__bank{margin-top:20px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.55}
.mk-confirm__actions{display:flex;justify-content:center;gap:14px;margin:36px 0 14px;flex-wrap:wrap}
.mk-confirm__actions .mk-btn{height:48px;padding:0 26px;font-size:14.5px}
@media (max-width:640px){
  .mk-confirm__hero{padding-top:30px}
  .mk-confirm__check{width:76px;height:76px;font-size:36px}
  .mk-confirm__title{font-size:24px}
  .mk-confirm__order{padding:20px 18px 24px}
  .mk-confirm__meta{grid-template-columns:1fr;gap:14px}
  .mk-confirm__totals{max-width:none}
  .mk-confirm__item img{width:60px;height:60px}
  .mk-confirm__actions .mk-btn{flex:1 1 100%;justify-content:center}
}

/* ==========================================================================
   Fiche adoption — carrousel « Acheter pour lui » (22/08/2026)
   Remplace l'image publicitaire statique sous la carte de contact.
   ========================================================================== */
.mk-adopt__shop { margin-top: 16px; border: 1px solid var(--mk-line); border-radius: 12px; background: #fff; padding: 14px 14px 12px; }
.mk-adopt__shop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mk-adopt__shop-head > b { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/18px "Inter", sans-serif; color: var(--mk-ink); }
.mk-adopt__shop-heart { color: #E24A6F; font-size: 15px; }
.mk-adopt__shop-head > a { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/16px "Inter", sans-serif; color: var(--mk-green); }
.mk-adopt__shop-head > a:hover { color: var(--mk-green-dark); }
.mk-adopt__shop-wrap { position: relative; }
.mk-adopt__shop-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.mk-adopt__shop-track::-webkit-scrollbar { display: none; }
.mk-adopt__shop-card { flex: 0 0 128px; min-width: 0; scroll-snap-align: start; border: 1px solid var(--mk-line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: #fff; transition: box-shadow .15s ease, transform .15s ease; }
.mk-adopt__shop-card:hover { box-shadow: 0 6px 16px rgba(17, 24, 39, .08); transform: translateY(-1px); }
.mk-adopt__shop-img { display: block; height: 84px; border-radius: 8px; overflow: hidden; background: #F7F8FA; }
.mk-adopt__shop-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mk-adopt__shop-name { font: 600 11.5px/15px "Inter", sans-serif; color: var(--mk-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 30px; }
.mk-adopt__shop-price { font: 700 12px/14px "Inter", sans-serif; color: var(--mk-green-dark); }
.mk-adopt__shop-price s { font-weight: 400; color: var(--mk-faint); font-size: 10.5px; margin-inline-start: 4px; }
.mk-adopt__shop-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--mk-line-2); background: #fff; color: var(--mk-ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(17, 24, 39, .10); }
.mk-adopt__shop-nav:hover { color: var(--mk-green); border-color: var(--mk-green); }
.mk-adopt__shop-nav--prev { inset-inline-start: -10px; }
.mk-adopt__shop-nav--next { inset-inline-end: -10px; }
.mk-adopt__shop-nav .mk-svg { font-size: 13px; }
@media (max-width: 760px) {
    .mk-adopt__shop-nav { display: none; }
}
/* Fiche adoption : « Proposer mon animal » (23/08/2026) — bouton de colonne sur
   desktop, bouton flottant à droite sur mobile (ne recouvre pas la barre de
   contact : calé au-dessus, bord droit). */
.mk-adopt__propose { margin-top: 10px; }
.mk-adopt__propose-fab { position: fixed; right: 0; top: 34%; z-index: 1029; display: none; align-items: center; gap: 8px; padding: 14px 9px; border-radius: 0 999px 999px 0; background: #0E9F55; color: #fff; font: 700 12px/1.1 "Inter", sans-serif; letter-spacing: .2px; text-decoration: none; box-shadow: 0 6px 18px rgba(14,159,85,.35); writing-mode: vertical-rl; transform: rotate(180deg); max-height: 60vh; white-space: nowrap; }
.mk-adopt__propose-fab .mk-svg { width: 16px; height: 16px; flex-shrink: 0; transform: rotate(90deg); }
.mk-adopt__propose-fab:hover, .mk-adopt__propose-fab:focus { color: #fff; background: #0b8446; }
@media (max-width: 991.98px) {
    .mk-adopt__propose { display: none; }
    .mk-adopt__propose-fab { display: inline-flex; }
}

/* Colonne de contact : le fond blanc forcé des boutons soft/ghost l'emportait
   sur le survol générique → texte blanc sur fond blanc au survol de
   « Proposer mon animal » et « Contacter » (constat propriétaire 23/08/2026). */
.mk-adopt__contact .mk-btn--soft:hover, .mk-adopt__contact .mk-btn--soft:focus-visible { background: var(--mk-green); color: #fff; }
.mk-adopt__contact .mk-btn--ghost:hover, .mk-adopt__contact .mk-btn--ghost:focus-visible { background: #fff; color: var(--mk-green); border-color: var(--mk-green); }