/* =========================================================================
   Magasiner — rayons, page de rayon, recherche, circulaire
   S’appuie sur app.css (jetons et composants). Préfixe : mg-
   ========================================================================= */

.mg-main { --mg-studio: #111113; }
/* Puces partagées : cible tactile de 44 px sur cette page */
.mg-main .chip { min-height: 44px; }
/* Pas de mot orphelin en fin de paragraphe (« on s’occupe du / reste. ») */
.mg-main :is(p, .mg-garage__s, .mg-dept__blurb) { text-wrap: pretty; }
/* L’élément qui reçoit le focus au clavier n’est jamais masqué par la barre d’onglets fixe */
html { scroll-padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); }

/* ---------- Cartes produit (productCard) ----------
   Chaque carte est un conteneur : sa mise en page suit sa largeur réelle (grille, rail, bureau).
   Les pastilles qui ne tiennent pas sur une ligne sont masquées (plutôt que de s’empiler sur la photo),
   et la note reste sur une ligne. */
.mg-main .pcard { container: mg-card / inline-size; }
.mg-main .pcard__badges { right: 10px; max-height: 24px; overflow: hidden; }
.mg-main .pcard__badges .badge { display: inline-block; max-width: 100%; line-height: 24px; overflow: hidden; text-overflow: ellipsis; }
.mg-main .pcard__meta { white-space: nowrap; min-width: 0; }
/* Dimension du pneu : sur sa propre ligne, collée sous le nom (dans le nom, elle était coupée par les deux lignes permises).
   Le bloc titre réserve deux lignes de nom + la dimension ; l’espace libre éventuel passe sous la dimension. */
.mg-main .pcard__title:has(> .mg-dim) { display: flex; flex-direction: column; overflow: visible; min-height: calc(2.6em + 1.25rem); }
.mg-main .pcard__title:has(> .mg-dim) > a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mg-dim { display: block; margin-top: 3px; font-size: 0.76rem; line-height: 1.4; font-weight: 700; letter-spacing: 0.01em; color: var(--muted); }
/* Argent CT : le triangle reste aligné sur la première ligne quand le texte passe à la ligne */
.mg-main .ctmoney { align-items: flex-start; line-height: 1.3; }
.mg-main .ctmoney__tri { margin-top: 0.2em; }

/* Carte étroite (téléphone, 2 colonnes) : pastilles, note et Argent CT plus compacts */
@container mg-card (max-width: 199px) {
  .mg-main .pcard__badges { top: 8px; left: 8px; right: 8px; gap: 3px; max-height: 22px; }
  .mg-main .pcard__badges .badge { height: 22px; line-height: 22px; padding: 0 6px; font-size: 0.64rem; font-stretch: 100%; letter-spacing: 0.01em; }
  .mg-main .pcard__meta { gap: 5px; font-size: 0.74rem; }
  .mg-main .pcard__meta .stars { width: 60px; height: 11px; }
  .mg-main .ctmoney { font-size: 0.7rem; }
}
/* Carte très étroite (moins de 170 px : écrans de 320 à 375 px) : le prix prend toute la ligne
   et le bouton + reste en bas à droite, à côté du prix régulier. Rien ne déborde de la carte. */
@container mg-card (max-width: 169px) {
  .mg-main .pcard__body { padding-inline: 10px; }
  /* 4e rangée souple : la hauteur du bouton ne disperse pas le prix régulier et « par pneu » */
  .mg-main .pcard__foot { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto auto 1fr; column-gap: 6px; row-gap: 0; align-items: start; }
  .mg-main .pcard__foot > .price { display: contents; }
  .mg-main .pcard__foot .price__now { grid-column: 1 / -1; }
  .mg-main .pcard__foot .price__was, .mg-main .pcard__foot .price__unit { grid-column: 1; }
  .mg-main .pcard__add { grid-column: 2; grid-row: 2 / -1; align-self: center; }
  /* Mention de stock sur deux lignes : l’icône reste sur la première */
  .mg-main .pcard__stock { align-items: flex-start; }
  .mg-main .pcard__stock .icon { margin-top: 0.15em; }
  /* Nom sur trois lignes (deux suffisaient à peine : « Ensemble perceuse-… ») ; un pneu garde deux lignes + sa dimension */
  .mg-main .pcard__title:not(:has(> .mg-dim)) { -webkit-line-clamp: 3; min-height: 3.9em; }
}

/* ---------- Squelette initial (avant le module JS) ---------- */
.mg-sk__hero { background: var(--night); padding: 30px 0 34px; }
.mg-sk__hero .skeleton {
  display: block; border-radius: 10px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.06) 25%, rgb(255 255 255 / 0.14) 50%, rgb(255 255 255 / 0.06) 75%);
  background-size: 200% 100%;
}
.mg-sk__line { height: 14px; width: 40%; margin-bottom: 14px; }
.mg-sk__line--l { height: 64px; width: 82%; margin-bottom: 20px; }
.mg-sk__pill { height: 58px; border-radius: 999px !important; }
[data-mg='promo'] .mg-sk__hero { background: var(--red-700); }
[data-mg='q'] .mg-sk__hero { background: transparent; padding-top: 12px; }
[data-mg='q'] .mg-sk__hero .skeleton { background: linear-gradient(90deg, var(--well) 25%, #f8f6f2 50%, var(--well) 75%); background-size: 200% 100%; }
[data-mg='q'] .mg-sk__line--l { height: 54px; width: 100%; border-radius: 16px; }
[data-mg='q'] .mg-sk__pill { height: 28px; width: 60%; border-radius: 10px !important; }
.mg-sk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 18px; }
.mg-sk__grid .skeleton { aspect-ratio: 3 / 4.4; }
.mg-noscript { display: grid; gap: 4px; margin-top: 12px; }
.mg-noscript a { display: flex; align-items: center; min-height: 48px; font-weight: 700; }

/* ---------- Éléments communs ---------- */
.mg-eyebrow { color: var(--red-600); }
.mg-eyebrow .icon { color: currentColor; }
.mg-k { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.mg-linkbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  font-weight: 700; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; color: var(--ink);
}
.mg-q { color: var(--red-600); overflow-wrap: anywhere; }

.mg-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: var(--fs-sm); }
.mg-crumbs li { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.mg-crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding-right: 2px; font-weight: 650; color: var(--muted); text-decoration: none; }
@media (hover: hover) { .mg-crumbs a:hover { text-decoration: underline; color: var(--ink); } }
.mg-crumbs [aria-current] { font-weight: 750; color: var(--ink); }
.mg-crumbs .icon { color: var(--muted-2); }
.mg-crumbs--light a { color: rgb(255 255 255 / 0.72); }
@media (hover: hover) { .mg-crumbs--light a:hover { color: #fff; } }
.mg-crumbs--light [aria-current] { color: #fff; }
.mg-crumbs--light .icon { color: rgb(255 255 255 / 0.45); }

.mg-notice {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius-sm); background: var(--amber-50); color: var(--amber);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
}
.mg-notice .icon { flex: none; margin-top: 1px; }
.mg-notice b { color: var(--ink); }

/* Rangées de puces : toujours à la largeur du contenu (la règle .rail des grands écrans l’écrase sinon) */
.mg-main .rail--chips { --rail-col: max-content; }

/* Flèches des carrousels (bureau) */
.mg-railnav { display: none; gap: 6px; flex: none; }
.section-head > .link-more + .mg-railnav { margin-left: 4px; }
.section-head:has(.mg-railnav) > .link-more { margin-left: auto; }
.mg-railnav .icon-btn { background: var(--card); box-shadow: var(--shadow-1); }
@media (hover: hover) { .mg-railnav .icon-btn:hover { background: var(--ink); color: #fff; } }
.mg-railnav .icon-btn:disabled { opacity: 0.35; pointer-events: none; }

/* Rails de cartes produit */
.mg-prail { --rail-col: 62%; }
.mg-prail > [role='listitem'] { display: flex; min-width: 0; }
.mg-prail .pcard { flex: 1; min-width: 0; }

/* =========================================================================
   VUE 1 — Tous les rayons
   ========================================================================= */
.mg-lhero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 26px 0 22px; background: var(--night); color: #fff;
}
.mg-lhero__glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 80% at 105% -10%, rgb(227 25 31 / 0.55), rgb(227 25 31 / 0) 70%),
    radial-gradient(60% 70% at -10% 110%, rgb(40 70 160 / 0.4), rgb(40 70 160 / 0) 70%);
}
.mg-lhero::after {
  content: ''; position: absolute; z-index: -1; right: -70px; top: -46px; width: 250px; height: 220px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0));
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform: rotate(-8deg);
}
.mg-lhero__eyebrow { color: rgb(255 255 255 / 0.72); }
.mg-lhero__art { display: none; }
.mg-lhero__title { font-size: clamp(2.15rem, 1.3rem + 4vw, 3.9rem); margin: 10px 0 20px; max-width: 13ch; }
/* 320 px : « Qu’est-ce qu’on » tient sur une ligne (titre sur trois lignes au lieu de quatre) */
@media (max-width: 359px) { .mg-lhero__title { font-size: 2.02rem; max-width: none; } }

.mg-searchbtn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 8px 0 18px;
  border-radius: 999px; background: #fff; color: var(--ink); text-align: left; font-size: 1.05rem;
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.35), 0 0 0 6px rgb(255 255 255 / 0.08);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2);
}
@media (hover: hover) { .mg-searchbtn:hover { box-shadow: 0 14px 34px rgb(0 0 0 / 0.35), 0 0 0 6px rgb(255 255 255 / 0.16); } }
.mg-searchbtn:active { transform: scale(0.985); }
.mg-searchbtn > .icon { color: var(--ink); }
.mg-searchbtn__hint { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
/* inline-block (pour l’animation), mais avec ses propres points de suspension si la suggestion est trop longue */
.mg-searchbtn__hint span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
@media (max-width: 359px) { .mg-searchbtn { gap: 10px; padding-left: 14px; font-size: 0.95rem; } }
.mg-searchbtn__go { flex: none; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--red); color: #fff; }

.mg-trend { margin-top: 18px; }
.mg-trend__lbl {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px;
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.62);
}
.mg-trend__lbl .icon { color: #ff7a5c; }
.mg-trend__chips { padding-bottom: 2px; }
.mg-gchip {
  background: rgb(255 255 255 / 0.1); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (hover: hover) { .mg-gchip:hover { background: rgb(255 255 255 / 0.18); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); } }

/* Bandeau Circulaire */
.mg-flyer-wrap { padding-top: 16px; }
.mg-flyer {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px;
  min-height: 176px; padding: 18px 0 18px 18px; border-radius: var(--radius-lg);
  color: #fff; text-decoration: none;
  background: radial-gradient(120% 140% at 100% 0%, #ff4549 0%, var(--red) 38%, var(--red-700) 100%);
  box-shadow: 0 16px 36px rgb(227 25 31 / 0.28);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.mg-flyer::before {
  content: ''; position: absolute; z-index: -1; right: -40px; bottom: -70px; width: 240px; height: 210px;
  background: #fff; opacity: 0.12; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: rotate(14deg);
}
@media (hover: hover) { .mg-flyer:hover { box-shadow: 0 20px 44px rgb(227 25 31 / 0.36); } }
.mg-flyer:active { transform: scale(0.985); }
.mg-flyer__txt { min-width: 0; }
.mg-flyer__eyebrow { grid-column: 1 / -1; color: rgb(255 255 255 / 0.92); padding-right: 18px; }
.mg-flyer__title {
  display: block;
  font-size: clamp(1.45rem, 0.9rem + 2.6vw, 2.4rem); font-weight: 850; font-stretch: 115%; letter-spacing: -0.02em; line-height: 1;
  text-wrap: balance;
}
.mg-flyer__sub { display: block; margin-top: 8px; font-size: 0.84rem; line-height: 1.35; color: rgb(255 255 255 / 0.86); }
/* Téléphone : le nombre d’aubaines et l’échéance sur deux lignes (jamais coupées au milieu) */
.mg-flyer__sub > span { display: block; }
.mg-flyer__sub > span:first-child { font-weight: 800; color: #fff; }
.mg-flyer__sub > .mg-flyer__sep { display: none; }
@media (min-width: 600px) { .mg-flyer__sub > span, .mg-flyer__sub > .mg-flyer__sep { display: inline; } }
.mg-flyer__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: #fff; color: var(--red-700); font-weight: 800; font-size: var(--fs-sm); white-space: nowrap;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.16);
  transition: transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) { .mg-flyer:hover .mg-flyer__cta { transform: translateX(3px); } }
.mg-flyer__cta { position: relative; z-index: 4; }
.mg-flyer__fan { position: relative; align-self: stretch; width: 140px; min-height: 140px; margin-right: 4px; }
.mg-flyer__item {
  position: absolute; top: 50%; right: 14px; width: 96px; height: 96px; margin-top: -48px; border-radius: 20px; background: #fff;
  display: grid; place-items: center; box-shadow: 0 14px 28px rgb(60 0 0 / 0.34);
  animation: mg-float 5.5s var(--ease-in-out) infinite alternate; animation-delay: calc(var(--n) * -1.8s);
}
.mg-flyer__item img { width: 80%; height: 80%; object-fit: contain; }
.mg-flyer__item b {
  position: absolute; top: -10px; right: -10px; white-space: nowrap;
  padding: 4px 8px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 0.74rem; font-weight: 850; font-stretch: 108%; box-shadow: 0 6px 14px rgb(0 0 0 / 0.25);
}
.mg-flyer__item:nth-child(1) { z-index: 3; rotate: 4deg; }
.mg-flyer__item:nth-child(2) { z-index: 2; width: 78px; height: 78px; margin-top: -76px; right: 58px; rotate: -14deg; opacity: 0.96; }
.mg-flyer__item:nth-child(3) { z-index: 1; width: 74px; height: 74px; margin-top: 2px; right: 62px; rotate: -4deg; opacity: 0.92; }
@keyframes mg-float { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
@media (max-width: 379px) {
  .mg-flyer { padding-left: 16px; }
  .mg-flyer__title { font-size: 1.36rem; }
  .mg-flyer__cta { padding: 0 14px; gap: 4px; font-size: 0.84rem; }
  .mg-flyer__fan { width: 118px; }
  .mg-flyer__item { width: 84px; height: 84px; margin-top: -42px; right: 8px; }
  .mg-flyer__item:nth-child(2) { width: 68px; height: 68px; margin-top: -68px; right: 48px; }
  .mg-flyer__item:nth-child(3) { width: 64px; height: 64px; right: 50px; }
  /* La pastille du rabais reste dans le bandeau (sinon rognée par son bord arrondi) */
  .mg-flyer__item b { right: -4px; }
}
/* 320 px : éventail plus compact, « Jusqu’à 50 % » et l’échéance tiennent chacun sur une ligne */
@media (max-width: 359px) {
  .mg-flyer__title { font-size: 1.3rem; }
  .mg-flyer__fan { width: 100px; }
  .mg-flyer__item { width: 74px; height: 74px; margin-top: -37px; right: 6px; border-radius: 16px; }
  .mg-flyer__item:nth-child(2) { width: 58px; height: 58px; margin-top: -62px; right: 40px; }
  .mg-flyer__item:nth-child(3) { width: 54px; height: 54px; margin-top: 4px; right: 42px; }
  .mg-flyer__item b { top: -8px; right: -2px; padding: 3px 7px; font-size: 0.68rem; }
}

/* Rangées de rayons */
.mg-depts { display: grid; gap: 10px; }
.mg-dept {
  border-radius: var(--radius); background: var(--mg-studio); color: #fff; overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-2);
}
.mg-dept.is-open { box-shadow: var(--shadow-2); }
.mg-dept__row { display: flex; align-items: center; }
.mg-dept__link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 104px;
  color: inherit; text-decoration: none; border-radius: var(--radius) 0 0 var(--radius);
}
.mg-dept__link:focus-visible { outline-offset: -3px; }
/* Le visuel occupe toute la hauteur de la rangée, même quand le texte passe sur plusieurs lignes */
.mg-dept__img { position: relative; flex: none; align-self: stretch; width: 104px; min-height: 104px; overflow: hidden; }
.mg-dept__img picture { position: absolute; inset: 0; }
.mg-dept__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 900ms var(--ease-out); }
.mg-dept__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(17 17 19 / 0) 55%, var(--mg-studio)); }
@media (hover: hover) { .mg-dept__link:hover .mg-dept__img img { transform: scale(1.24); } }
.mg-dept__link:active .mg-dept__img img { transform: scale(1.08); transition-duration: 200ms; }
.mg-dept__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 12px 0; }
.mg-dept__name { font-size: 1.22rem; font-weight: 850; font-stretch: 115%; letter-spacing: -0.01em; line-height: 1.1; }
/* Description sur deux lignes au besoin (jamais tronquée au milieu d’un mot sur téléphone) */
.mg-dept__blurb {
  font-size: 0.82rem; line-height: 1.3; color: rgb(255 255 255 / 0.68);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.mg-dept__meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 0.74rem; font-weight: 700; color: rgb(255 255 255 / 0.86); white-space: nowrap; }
.mg-dept__meta .icon { color: rgb(255 255 255 / 0.6); }
.mg-live { width: 7px; height: 7px; border-radius: 99px; background: #35d07f; box-shadow: 0 0 0 3px rgb(53 208 127 / 0.2); flex: none; }
.mg-dept__toggle {
  flex: none; width: 48px; height: 48px; margin: 0 10px 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); color: #fff;
  transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
@media (hover: hover) { .mg-dept__toggle:hover { background: rgb(255 255 255 / 0.16); } }
.mg-dept__toggle:active { transform: scale(0.9); }
.mg-dept__toggle .icon { transition: transform var(--dur-3) var(--spring); }
.mg-dept.is-open .mg-dept__toggle { background: #fff; color: var(--ink); box-shadow: none; }
.mg-dept.is-open .mg-dept__toggle .icon { transform: rotate(180deg); }
.mg-dept__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 440ms var(--ease-out); }
.mg-dept.is-open .mg-dept__panel { grid-template-rows: 1fr; }
.mg-dept__inner { min-height: 0; overflow: hidden; }
.mg-dept__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 14px 16px; border-top: 1px solid rgb(255 255 255 / 0.08); }
.mg-schip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); color: #fff;
  font-size: var(--fs-sm); font-weight: 650; text-decoration: none; white-space: nowrap;
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out), background-color var(--dur-2);
}
.mg-dept.is-open .mg-schip { opacity: 1; transform: none; transition-delay: calc(var(--k, 0) * 28ms + 60ms), calc(var(--k, 0) * 28ms + 60ms), 0ms; }
@media (hover: hover) { .mg-schip:hover { background: rgb(255 255 255 / 0.16); } }
.mg-dept.is-open .mg-schip:active { transform: scale(0.96); transition-delay: 0ms; }
.mg-schip--all { background: #fff; color: var(--ink); box-shadow: none; font-weight: 750; }
@media (hover: hover) { .mg-schip--all:hover { background: #f1efeb; } }
.mg-schip__n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--red); color: #fff; font-size: 0.7rem; font-weight: 800;
}
.mg-schip__store { display: inline-flex; color: rgb(255 255 255 / 0.55); }
/* 320 à 375 px : visuel et bouton plus compacts, le texte garde de la place (nom, description, compte) */
@media (max-width: 379px) {
  .mg-dept__link { gap: 12px; min-height: 100px; }
  .mg-dept__img { width: 88px; min-height: 100px; }
  .mg-dept__name { font-size: 1.14rem; }
  .mg-dept__toggle { width: 44px; height: 44px; margin: 0 8px 0 4px; }
}

/* Aide */
.mg-help {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: start;
  padding: 18px; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-1);
}
.mg-help__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--red-50); color: var(--red-600); }
.mg-help__txt p { margin-top: 2px; font-size: var(--fs-sm); }
.mg-help__ctas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.mg-help__ctas .btn { flex: 1 1 auto; }

/* =========================================================================
   VUE 2 — Page de rayon
   ========================================================================= */
.mg-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; min-height: 318px;
  background: var(--mg-studio); color: #fff;
}
.mg-hero__media { position: absolute; z-index: -2; top: -6px; right: -22%; width: 92%; aspect-ratio: 1; }
.mg-hero__media picture, .mg-hero__media img { width: 100%; height: 100%; }
.mg-hero__media img { object-fit: cover; animation: mg-kb 1.6s var(--ease-out) both; }
@keyframes mg-kb { from { transform: scale(1.12); opacity: 0; } }
.mg-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease-out); }
.mg-hero__video.is-playing { opacity: 1; }
.mg-hero .motion-toggle { top: 10px; right: 10px; }
.mg-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--mg-studio) 6%, rgb(17 17 19 / 0.55) 46%, rgb(17 17 19 / 0) 72%),
    linear-gradient(0deg, var(--mg-studio) 2%, rgb(17 17 19 / 0) 48%),
    linear-gradient(180deg, rgb(17 17 19 / 0.7) 0%, rgb(17 17 19 / 0) 24%);
}
.mg-hero__in { width: 100%; padding-top: 4px; padding-bottom: 24px; }
.mg-hero__title { font-size: clamp(3rem, 1.6rem + 7vw, 5.4rem); margin-top: 26px; }
.mg-hero__blurb { margin-top: 8px; max-width: 24ch; color: rgb(255 255 255 / 0.78); font-size: var(--fs-lg); line-height: 1.35; }
.mg-hero__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.mg-hero__facts li {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.8rem; font-weight: 650; color: rgb(255 255 255 / 0.9);
}
.mg-hero__facts b { color: #fff; font-weight: 850; }

/* Raccourci véhicule */
.mg-garage-wrap { padding-top: 16px; }
.mg-garage {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px;
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-1);
  color: var(--ink); text-decoration: none; text-align: left;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2);
}
@media (hover: hover) { .mg-garage:hover { box-shadow: var(--shadow-2); } }
.mg-garage:active { transform: scale(0.985); }
.mg-garage__ico { width: 48px; height: 48px; border-radius: 14px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.mg-garage__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mg-garage__k { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-600); }
.mg-garage__txt b { font-size: 0.98rem; line-height: 1.25; text-wrap: balance; }
.mg-garage__s { font-size: 0.8rem; color: var(--muted); }
.mg-garage > .icon:last-child { color: var(--muted); }

/* Facettes + barre d’outils collante */
.mg-facets-wrap { padding-top: 16px; }
/* position: relative : le texte .sr-only des compteurs reste dans la puce (sinon il élargit la page depuis le rail) */
.mg-chip { position: relative; gap: 8px; }
.mg-chip__n { font-size: 0.74rem; font-weight: 750; color: var(--muted); }
.mg-chip[aria-pressed='true'] .mg-chip__n { color: rgb(255 255 255 / 0.62); }
/* Facette sans résultat avec les filtres actifs : en retrait, mais lisible (contraste AA, pas d’opacité) */
.mg-chip.is-zero { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }

/* Collée sous l’en-tête ; se retire avec lui quand on fait défiler vers le bas (rien ne masque la lecture),
   revient dès qu’on remonte. */
.mg-bar {
  position: sticky; top: calc(var(--header-h) + var(--safe-top)); z-index: 40;
  background: rgb(244 242 238 / 0.88);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-2), background-color var(--dur-2);
}
.mg-bar.is-stuck { background: rgb(244 242 238 / 0.94); box-shadow: 0 1px 0 var(--line), 0 12px 24px rgb(20 21 24 / 0.07); }
body:has(.site-header.is-hidden) .mg-bar.is-stuck:not(:focus-within) { transform: translateY(calc(-100% - var(--header-h) - var(--safe-top) - 8px)); box-shadow: none; }
/* Au clavier, la barre reste visible (collée en haut de l’écran) même quand l’en-tête se retire */
body:has(.site-header.is-hidden) .mg-bar.is-stuck:focus-within { transform: translateY(calc(-1 * var(--header-h))); }
.mg-bar__in { display: flex; align-items: center; gap: 8px; min-height: 64px; }
.mg-bar__count { display: none; flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-bar__count b { color: var(--ink); font-size: 1.1rem; font-weight: 850; font-stretch: 106%; }
.mg-pill {
  position: relative; flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 0 14px; border-radius: 999px; background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 750; font-size: var(--fs-sm); white-space: nowrap;
  transition: box-shadow var(--dur-2), transform var(--dur-1) var(--ease-out), background-color var(--dur-2);
}
.mg-pill--sort { flex-grow: 1.35; }
@media (hover: hover) { .mg-pill:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); } }
.mg-pill:active { transform: scale(0.96); }
.mg-pill__k { color: var(--muted); font-weight: 650; }
/* Écran étroit : « Trier » reste dans le nom accessible, mais n’est plus affiché */
@media (max-width: 379px) {
  .mg-pill__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mg-pill { padding-inline: 12px; gap: 6px; }
}
/* « Filtres » et sa pastille restent toujours entiers (c’est le libellé du tri qui cède la place au besoin) */
.mg-pill:not(.mg-pill--sort) { min-width: max-content; }
.mg-pill__lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mg-pill__chev { color: var(--muted); margin-left: -2px; }
.mg-pill__n {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 800;
}
.mg-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; padding-bottom: 6px; }
.mg-achip { gap: 8px; padding-inline: 14px 12px; background: var(--ink); color: #fff; box-shadow: none; }
@media (hover: hover) { .mg-achip:hover { background: var(--ink-2); box-shadow: none; } }
.mg-achip .icon { color: rgb(255 255 255 / 0.7); }
.mg-achip .icon:first-child { color: var(--gold); fill: var(--gold); }

.mg-results { padding-top: 6px; }
.mg-grid > .pcard { view-transition-class: mg-card; }
::view-transition-group(*.mg-card) { animation-duration: 460ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
.mg-grid.mg-enter > * { animation: mg-in 620ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
.mg-grid.mg-fade > * { animation: mg-fade 280ms ease-out both; }
@keyframes mg-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes mg-fade { from { opacity: 0.3; } }

.mg-none { display: grid; justify-items: center; gap: 6px; padding: 36px 16px 24px; text-align: center; }
.mg-none__ico { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow-1); color: var(--ink); margin-bottom: 8px; }
.mg-none__t { font-weight: 800; font-size: 1.12rem; font-stretch: 106%; }
.mg-none .muted { max-width: 34ch; font-size: var(--fs-sm); }
.mg-none .btn { margin-top: 12px; }

/* Plan du magasin : sous-rayons (allées) */
.mg-aisles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mg-aisle {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 6px; min-height: 136px; padding: 14px;
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-1);
}
.mg-aisle__sign {
  display: inline-flex; flex-direction: column; align-items: center; align-self: flex-start;
  min-width: 52px; padding: 6px 8px 5px; border-radius: 10px; background: var(--red); color: #fff; line-height: 1;
  box-shadow: 0 6px 14px rgb(227 25 31 / 0.25);
}
.mg-aisle__sign small { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.mg-aisle__sign b { margin-top: 3px; font-size: 1.45rem; font-weight: 850; font-stretch: 112%; letter-spacing: -0.02em; }
/* Mots longs (« électroménagers ») : césure aux traits d’union conditionnels posés par le script, sinon coupure */
.mg-aisle__name { margin-top: auto; font-weight: 800; font-stretch: 106%; font-size: 1rem; line-height: 1.2; text-wrap: balance; overflow-wrap: break-word; }
.mg-aisle__where { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--muted); font-weight: 650; }
.mg-aisles--lg .mg-aisle {
  min-height: 176px; padding: 16px; color: #fff;
  background: radial-gradient(120% 90% at 100% 100%, #23252b 0%, #141518 60%, #0f1013 100%);
  box-shadow: var(--shadow-2);
}
.mg-aisles--lg .mg-aisle::after {
  content: attr(data-n); position: absolute; z-index: -1; right: -4px; bottom: -30px;
  font-size: 7.2rem; font-weight: 900; font-stretch: 125%; letter-spacing: -0.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.1);
}
.mg-aisles--lg .mg-aisle__name { font-size: 1.12rem; }
@media (max-width: 379px) {
  .mg-aisle { padding: 14px 12px; }
  .mg-aisles--lg .mg-aisle { padding: 14px 12px; }
  .mg-aisles--lg .mg-aisle__name { font-size: 1.02rem; }
}
.mg-aisles--lg .mg-aisle:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 150px; }
@media (min-width: 600px) and (max-width: 899px) { .mg-aisles--lg .mg-aisle:last-child:nth-child(odd) { grid-column: auto; min-height: 176px; } }
.mg-aisles--lg .mg-aisle__where { color: rgb(255 255 255 / 0.62); }
/* Deux colonnes : un nombre impair d’allées se termine par une tuile pleine largeur (pas de trou) */
@media (max-width: 599px) { .mg-aisles .mg-aisle:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.mg-aisle.is-focus { box-shadow: 0 0 0 3px var(--red), var(--shadow-2); animation: mg-ping 1.2s 700ms var(--ease-out) 2; }
@keyframes mg-ping { 50% { box-shadow: 0 0 0 8px rgb(227 25 31 / 0.25), var(--shadow-2); } }

/* Note « catalogue de démonstration » */
.mg-demo {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px;
  border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
}
.mg-demo__ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; flex: none; }
.mg-demo p > b { display: block; font-size: 0.95rem; line-height: 1.3; }
.mg-demo p > span { display: block; margin-top: 3px; font-size: 0.85rem; color: var(--muted); line-height: 1.4; }

.mg-cats { --rail-col: 42%; }
/* Tuiles de rayons de cette page : la description passe sur deux lignes plutôt que d’être coupée (« Électriques, à m… ») */
.mg-cats .cat-tile__blurb, .mg-ecats .cat-tile__blurb {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; margin-top: 2px; text-wrap: balance;
}

/* =========================================================================
   VUE 3 — Recherche
   ========================================================================= */
.mg-shead { padding-bottom: 4px; }
.mg-sform { display: flex; gap: 8px; }
.mg-sform__field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 4px 0 14px;
  border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: box-shadow var(--dur-2);
}
.mg-sform__field:focus-within { box-shadow: inset 0 0 0 2px var(--ink), 0 8px 22px rgb(20 21 24 / 0.08); }
.mg-sform__field > .icon { color: var(--muted); }
.mg-sform__field input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.mg-sform__field input:focus, .mg-sform__field input:focus-visible { outline: none; }
.mg-sform__field input::-webkit-search-cancel-button { display: none; }
.mg-sform__field input::placeholder { color: var(--muted-2); font-weight: 500; }
.mg-sform__clear { flex: none; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); }
@media (hover: hover) { .mg-sform__clear:hover { background: var(--well); color: var(--ink); } }
.mg-sform__go { flex: none; width: 54px; min-height: 54px; padding: 0; border-radius: 16px; }
.mg-sform__golbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mg-rhead { padding-top: 16px; }
.mg-rtitle { font-size: var(--fs-xl); font-weight: 800; font-stretch: 108%; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
.mg-places { margin-top: 12px; }
.mg-places__lbl { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.mg-place {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 5px 16px 5px 5px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow-1); text-decoration: none; font-weight: 750; font-size: var(--fs-sm); white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2);
}
@media (hover: hover) { .mg-place:hover { box-shadow: var(--shadow-2); } }
.mg-place:active { transform: scale(0.97); }
.mg-place picture { flex: none; }
.mg-place img { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; }
.mg-place span { display: flex; flex-direction: column; line-height: 1.15; }
.mg-place small { font-size: 0.68rem; color: var(--muted); font-weight: 650; }

/* Recherche vide */
.mg-idle { padding-top: 20px; }
.mg-idle > .muted { margin-top: 6px; font-size: var(--fs-sm); }
.mg-idle__block { margin-top: 24px; }
.mg-idle__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-idle__head .mg-k { margin-bottom: 0; }
.mg-idle__head + .chips { margin-top: 6px; }
.mg-minicats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
.mg-minicat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; font-size: 0.8rem; font-weight: 700; text-align: center; }
.mg-minicat picture { width: 100%; }
.mg-minicat img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 18px; object-fit: cover; box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-out); }
.mg-minicat:active img { transform: scale(0.95); }

/* Aucun résultat */
.mg-empty { display: grid; justify-items: center; padding-top: 30px; text-align: center; }
.mg-empty__art {
  position: relative; width: 96px; height: 96px; border-radius: 999px; display: grid; place-items: center;
  background: var(--card); box-shadow: var(--shadow-2); color: var(--ink);
}
.mg-empty__art > span { position: absolute; inset: -12px; border-radius: 999px; border: 1.5px dashed var(--line-2); animation: mg-spin 24s linear infinite; }
.mg-empty__art .icon { width: 36px; height: 36px; }
@keyframes mg-spin { to { transform: rotate(360deg); } }
.mg-empty__t { margin-top: 22px; max-width: 22ch; font-size: var(--fs-xl); font-weight: 850; font-stretch: 108%; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
.mg-dym { margin-top: 10px; font-size: var(--fs-md); }
.mg-dym a { display: inline-block; padding: 10px 2px; margin: -10px -2px; font-weight: 800; color: var(--red-600); }
.mg-tips { display: grid; gap: 8px; max-width: 36ch; margin: 18px auto 0; text-align: left; font-size: var(--fs-sm); color: var(--ink-3); }
.mg-tips li { display: flex; gap: 8px; }
.mg-tips .icon { flex: none; margin-top: 3px; color: var(--green); }
.mg-empty__chips { margin-top: 24px; }
.mg-empty__chips .chips { justify-content: center; }

/* =========================================================================
   VUE 4 — Circulaire
   ========================================================================= */
.mg-phero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-bottom: 56px;
  background: radial-gradient(120% 120% at 100% 0%, #ff3b40 0%, var(--red) 36%, var(--red-700) 100%);
}
.mg-phero__tri { position: absolute; z-index: -1; right: -70px; top: -50px; width: 280px; height: 250px; background: #fff; opacity: 0.13; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: rotate(-8deg); }
.mg-phero__tri--2 { right: auto; left: -130px; top: auto; bottom: -150px; width: 320px; height: 280px; opacity: 0.07; transform: rotate(12deg); }
.mg-phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; margin-top: 4px; }
.mg-phero__eyebrow { grid-column: 1 / -1; color: rgb(255 255 255 / 0.9); }
.mg-phero__title { font-size: clamp(2.3rem, 1.4rem + 4.4vw, 4.4rem); margin-top: 2px; }
/* Fil d’Ariane sur fond rouge : contraste AA */
.mg-phero .mg-crumbs--light a { color: rgb(255 255 255 / 0.9); }
.mg-phero .mg-crumbs--light .icon { color: rgb(255 255 255 / 0.7); }
.mg-phero__sub { margin-top: 12px; max-width: 40ch; color: rgb(255 255 255 / 0.9); font-size: var(--fs-md); line-height: 1.45; }
.mg-phero__sub b { color: #fff; }
.mg-stamp {
  display: grid; place-content: center; width: 94px; height: 94px; margin-top: 8px; border-radius: 999px;
  background: #fff; color: var(--red-600); text-align: center; line-height: 0.9;
  box-shadow: 0 14px 30px rgb(80 0 0 / 0.3), inset 0 0 0 4px #fff, inset 0 0 0 5.5px rgb(227 25 31 / 0.25);
  rotate: 10deg; animation: mg-stamp 900ms var(--spring) 250ms both;
}
.mg-stamp small { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.mg-stamp b { margin-top: 3px; font-size: 2rem; font-weight: 900; font-stretch: 112%; letter-spacing: -0.04em; white-space: nowrap; }
.mg-stamp b span { font-size: 0.95rem; letter-spacing: 0; }
@keyframes mg-stamp { from { opacity: 0; transform: scale(0.4) rotate(-40deg); } }
/* 320 px : le titre et le tampon ne se touchent pas */
@media (max-width: 359px) {
  .mg-phero__title { font-size: 2.1rem; }
  .mg-phero__grid { column-gap: 8px; }
  .mg-stamp { width: 80px; height: 80px; }
  .mg-stamp small { font-size: 0.54rem; }
  .mg-stamp b { font-size: 1.7rem; }
  .mg-stamp b span { font-size: 0.8rem; }
}

.mg-cd { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-top: 20px; }
.mg-cd__cell {
  min-width: 62px; padding: 9px 6px 7px; border-radius: 14px; text-align: center; overflow: hidden;
  background: rgb(0 0 0 / 0.2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}
.mg-cd__num { display: block; font-size: 1.55rem; font-weight: 850; font-stretch: 110%; line-height: 1; font-variant-numeric: tabular-nums; }
.mg-cd__lbl { display: block; margin-top: 4px; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 0.75); }
.mg-cd__note { flex-basis: 100%; margin-top: 2px; font-size: 0.8rem; font-weight: 600; color: rgb(255 255 255 / 0.86); }

.mg-star-wrap { position: relative; z-index: 1; margin-top: -34px; }
.mg-star { display: grid; overflow: hidden; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-2); }
.mg-star__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10;
  background: radial-gradient(110% 90% at 50% 40%, #fbfaf8 0%, var(--well) 100%);
}
.mg-star__media picture { display: contents; }
.mg-star__media img { width: 64%; height: 90%; object-fit: contain; filter: drop-shadow(0 18px 22px rgb(20 21 24 / 0.2)); }
.mg-star__body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.mg-star__name { font-size: 1.25rem; font-weight: 800; font-stretch: 106%; letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; }
.mg-star__name a { text-decoration: none; }
@media (hover: hover) { .mg-star__name a:hover { text-decoration: underline; } }
.mg-star__price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.mg-star__price .price__now { font-size: 2rem; }
.mg-star__save {
  display: inline-flex; align-items: center; min-height: 28px; margin-bottom: 4px; padding: 0 10px; border-radius: 8px;
  background: var(--red-50); color: var(--red-700); font-weight: 800; font-size: 0.8rem;
}
.mg-star__ctas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 4px; }
.mg-star__add.is-done { --btn-bg: var(--green); box-shadow: 0 6px 18px rgb(11 122 59 / 0.3); }
.mg-star__more { width: 48px; padding: 0; }
.mg-star__morelbl { display: none; }
/* Libellé « Voir le produit » seulement quand la carte vedette a la place (pas en tablette, où elle est en deux colonnes) */
@media (min-width: 420px) and (max-width: 599px), (min-width: 900px) {
  .mg-star__more { width: auto; padding: 0 20px; }
  .mg-star__more .icon { display: none; }
  .mg-star__morelbl { display: inline; }
}

.mg-sticker {
  position: absolute; z-index: 1; bottom: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 999px;
  background: var(--red); color: #fff; font-stretch: 112%; line-height: 1;
  box-shadow: 0 8px 18px rgb(227 25 31 / 0.35); rotate: -8deg;
}
.mg-sticker b { font-size: 1.22rem; font-weight: 900; letter-spacing: -0.03em; }
.mg-sticker small { font-size: 0.72rem; font-weight: 850; }
.mg-sticker--lg { top: 14px; right: 14px; bottom: auto; width: 92px; height: 92px; }
.mg-sticker--lg b { font-size: 2rem; }
.mg-sticker--lg small { font-size: 1rem; }
.mg-save { display: flex; align-items: flex-start; gap: 5px; font-size: 0.76rem; font-weight: 800; line-height: 1.3; color: var(--red-700); }
.mg-save .icon { flex: none; margin-top: 1px; }
/* Carte très étroite : pastille du rabais plus petite (la photo reste visible) */
@container mg-card (max-width: 169px) {
  .mg-sticker { width: 50px; height: 50px; right: 6px; bottom: 6px; }
  .mg-sticker b { font-size: 1.05rem; }
  .mg-sticker small { font-size: 0.64rem; }
  .mg-save { font-size: 0.72rem; }
  .mg-save .icon { display: none; }
}
.mg-nw { white-space: nowrap; }
[data-mg-mode='promo'] .mg-grid .pcard__badges .badge--red { display: none; }

.mg-legal { display: flex; gap: 8px; margin-top: 22px; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
.mg-legal .icon { flex: none; margin-top: 3px; }

/* =========================================================================
   Feuilles : tri et filtres
   ========================================================================= */
#sheet-tri .sheet__body { padding-bottom: calc(18px + var(--safe-bottom)); }
.mg-sort { display: grid; gap: 4px; }
.mg-sort__opt {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 8px 10px;
  border-radius: 16px; text-align: left;
  transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
@media (hover: hover) { .mg-sort__opt:hover { background: var(--well); } }
.mg-sort__opt:active { transform: scale(0.985); }
.mg-sort__opt[aria-pressed='true'] { background: var(--ink); color: #fff; }
.mg-sort__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--well); flex: none; transition: background-color var(--dur-2); }
.mg-sort__opt[aria-pressed='true'] .mg-sort__ico { background: rgb(255 255 255 / 0.12); }
.mg-sort__txt { flex: 1; min-width: 0; }
.mg-sort__txt b { display: block; font-weight: 750; }
.mg-sort__txt small { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.3; }
.mg-sort__opt[aria-pressed='true'] small { color: rgb(255 255 255 / 0.68); }
.mg-sort__check { flex: none; opacity: 0; transform: scale(0.5); transition: opacity var(--dur-2), transform var(--dur-2) var(--spring); }
.mg-sort__opt[aria-pressed='true'] .mg-sort__check { opacity: 1; transform: none; }

.mg-ff { display: grid; gap: 4px; }
.mg-fg { margin: 0; padding: 12px 0 16px; border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.mg-fg:last-child { border-bottom: 0; }
.mg-fg__t { float: left; padding: 0; margin-bottom: 10px; line-height: 22px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mg-range { clear: both; display: grid; gap: 2px; }
.mg-range__out { float: right; font-size: 0.95rem; line-height: 22px; font-weight: 800; letter-spacing: -0.01em; }
.mg-range__ends { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); }
.mg-range input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.mg-range input[type='range']::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--ink) var(--p, 100%), var(--line-2) var(--p, 100%)); }
.mg-range input[type='range']::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line-2); }
.mg-range input[type='range']::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--ink); }
.mg-range input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 99px; border: 0;
  background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 4px 12px rgb(20 21 24 / 0.2);
  transition: transform var(--dur-1) var(--ease-out);
}
.mg-range input[type='range']:active::-webkit-slider-thumb { transform: scale(1.14); }
.mg-range input[type='range']::-moz-range-thumb { width: 28px; height: 28px; border-radius: 99px; border: 0; background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 4px 12px rgb(20 21 24 / 0.2); }
.mg-range input[type='range']:focus { outline: none; }
.mg-range input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus), 0 4px 12px rgb(20 21 24 / 0.2); }

.mg-seg { clear: both; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mg-seg__opt { position: relative; }
.mg-seg__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mg-seg__box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 4px;
  border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1);
}
.mg-seg__v { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: var(--fs-sm); white-space: nowrap; }
.mg-seg__v .icon { color: var(--gold); fill: var(--gold); }
.mg-seg__box small { font-size: 0.72rem; font-weight: 650; color: var(--muted); }
.mg-seg__opt input:checked + .mg-seg__box { background: var(--ink); color: #fff; box-shadow: none; }
.mg-seg__opt input:checked + .mg-seg__box small { color: rgb(255 255 255 / 0.62); }
.mg-seg__opt input:focus-visible + .mg-seg__box { outline: 3px solid var(--focus); outline-offset: 2px; }
.mg-seg__opt:active .mg-seg__box { transform: scale(0.96); }
.mg-seg__opt.is-zero .mg-seg__box { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.mg-seg__opt.is-zero .mg-seg__v .icon { color: var(--line-2); fill: var(--line-2); }

.mg-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mg-switchrow label { cursor: pointer; min-width: 0; }
.mg-switchrow label b { display: block; font-weight: 750; }
.mg-switchrow label > span { display: block; font-size: 0.82rem; color: var(--muted); }
.mg-switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; margin: 0; width: 60px; height: 44px; border-radius: 99px; background: transparent; cursor: pointer; }
.mg-switch::before { content: ''; position: absolute; top: 5px; left: 2px; width: 56px; height: 34px; border-radius: 99px; background: var(--line-2); transition: background-color var(--dur-2); }
.mg-switch::after { content: ''; position: absolute; top: 8px; left: 5px; width: 28px; height: 28px; border-radius: 99px; background: #fff; box-shadow: 0 2px 6px rgb(20 21 24 / 0.25); transition: transform var(--dur-2) var(--spring); }
.mg-switch:checked::before { background: var(--green); }
.mg-switch:checked::after { transform: translateX(22px); }
.mg-switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }

.mg-ffoot { display: flex; gap: 10px; }
.mg-ffoot .btn--ghost { flex: none; }
.mg-ffoot__go { flex: 1; min-width: 0; }
.mg-ffoot__go span { overflow: hidden; text-overflow: ellipsis; }

/* =========================================================================
   Tablette et bureau
   ========================================================================= */
@media (min-width: 600px) {
  .mg-bar__count { display: block; }
  .mg-pill, .mg-pill--sort { flex: none; }
  .mg-sform__go { width: auto; padding: 0 22px; }
  .mg-sform__golbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .mg-sform__go .icon { display: none; }
  .mg-aisles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-prail { --rail-col: 38%; }
  .mg-cats { --rail-col: 28%; }
  .mg-flyer__fan { width: 230px; }
  .mg-flyer__item:nth-child(2) { right: 104px; margin-top: -58px; }
  .mg-flyer__item:nth-child(3) { right: 176px; margin-top: -30px; rotate: 6deg; }
  .mg-help { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .mg-help__ctas { grid-column: auto; flex-wrap: nowrap; }
  .mg-cd__note { flex-basis: auto; align-self: center; max-width: 20ch; margin: 0 0 0 8px; }
  .mg-minicats { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .mg-star { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mg-star__media { aspect-ratio: auto; min-height: 300px; }
  .mg-star__body { align-content: center; padding: 28px; }
  /* Héros de rayon : le visuel entier, centré à droite (sur téléphone, il est volontairement recadré) */
  .mg-hero { min-height: 380px; }
  .mg-hero__media {
    top: 50%; right: 0; width: min(54%, 420px); translate: 0 -50%;
    -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  }
}
@media (min-width: 720px) {
  .mg-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
}

@media (min-width: 900px) {
  .mg-lhero { padding: 64px 0 56px; }
  .mg-railnav { display: flex; }
  .mg-lhero__art {
    display: block; position: absolute; z-index: 0; top: 50%; right: max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter)));
    width: 460px; height: 400px; translate: 0 -50%;
  }
  .mg-lhero__art > span {
    position: absolute; width: 210px; height: 210px; overflow: hidden; border-radius: 28px;
    box-shadow: 0 24px 50px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.08);
    animation: mg-float 7s var(--ease-in-out) infinite alternate;
  }
  .mg-lhero__art img { width: 100%; height: 100%; object-fit: cover; }
  .mg-lhero__art > span:nth-child(1) { top: 0; right: 0; width: 240px; height: 240px; rotate: 4deg; z-index: 2; }
  .mg-lhero__art > span:nth-child(2) { top: 40px; right: 250px; rotate: -6deg; animation-delay: -2s; }
  .mg-lhero__art > span:nth-child(3) { bottom: 0; right: 40px; width: 190px; height: 190px; rotate: -3deg; z-index: 3; animation-delay: -4s; }
  .mg-lhero__art > span:nth-child(4) { bottom: 10px; right: 236px; width: 170px; height: 170px; rotate: 7deg; z-index: 1; animation-delay: -5s; }
  .mg-lhero__in { position: relative; z-index: 1; }
  .mg-lhero::after { width: 420px; height: 370px; right: 6%; top: -80px; }
  .mg-lhero__title { max-width: 15ch; margin-bottom: 28px; }
  .mg-searchbtn { max-width: 660px; min-height: 66px; font-size: 1.15rem; }
  .mg-trend { max-width: 640px; }
  .mg-trend__chips { display: flex; flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .mg-flyer-wrap { padding-top: 28px; }
  .mg-flyer { min-height: 230px; padding: 32px 0 32px 36px; }
  .mg-flyer__fan { width: 420px; margin-right: 36px; }
  .mg-flyer__item { width: 144px; height: 144px; margin-top: -72px; border-radius: 28px; right: 20px; }
  .mg-flyer__item:nth-child(2) { width: 124px; height: 124px; margin-top: -78px; right: 160px; rotate: -8deg; }
  .mg-flyer__item:nth-child(3) { width: 112px; height: 112px; margin-top: -48px; right: 290px; rotate: 6deg; }
  .mg-flyer__item b { font-size: 0.95rem; padding: 6px 10px; }
  .mg-depts { gap: 14px; }
  .mg-dept__link { min-height: 128px; }
  .mg-dept__img { width: 140px; height: 128px; }
  .mg-dept__name { font-size: 1.4rem; }
  .mg-prail { --rail-col: calc((100% - 36px) / 4.3); }
  .mg-cats { --rail-col: calc((100% - 48px) / 5.4); }

  .mg-hero { min-height: 460px; }
  .mg-hero__media {
    top: 50%; right: max(2%, calc((100vw - var(--content-max)) / 2)); width: min(42%, 480px); translate: 0 -50%;
    -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  }
  .mg-hero::after {
    background:
      linear-gradient(90deg, var(--mg-studio) 30%, rgb(17 17 19 / 0) 60%),
      linear-gradient(0deg, var(--mg-studio) 0%, rgb(17 17 19 / 0) 30%);
  }
  .mg-hero__in { padding-bottom: 44px; }
  .mg-hero__title { margin-top: 40px; }
  .mg-aisles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .mg-aisles--lg .mg-aisle { min-height: 200px; }
  .mg-demo { max-width: 760px; }

  .mg-shead { padding-top: 8px; }
  .mg-sform { max-width: 760px; }
  .mg-rtitle { font-size: var(--fs-2xl); }
  .mg-idle, .mg-rhead { padding-top: 24px; }
  .mg-idle > * { max-width: 900px; }

  .mg-phero { padding-bottom: 80px; }
  .mg-phero__in { padding-top: 8px; }
  .mg-phero__grid { margin-top: 18px; }
  .mg-stamp { width: 150px; height: 150px; margin-right: 4%; }
  .mg-stamp small { font-size: 0.8rem; }
  .mg-stamp b { font-size: 3.3rem; }
  .mg-stamp b span { font-size: 1.4rem; }
  .mg-cd__cell { min-width: 76px; padding: 12px 8px 9px; }
  .mg-cd__num { font-size: 2rem; }
  .mg-star-wrap { margin-top: -48px; }
  .mg-star { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .mg-star__media { min-height: 360px; }
  .mg-star__body { padding: 36px 40px; }
  .mg-star__name { font-size: 1.6rem; }
  .mg-star__ctas { max-width: 440px; }
  .mg-sticker { width: 64px; height: 64px; }
  .mg-sticker--lg { width: 110px; height: 110px; top: 22px; right: 22px; bottom: auto; }
  .mg-sticker--lg b { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-schip { opacity: 1; transform: none; }
  .mg-flyer__item, .mg-empty__art > span { animation: none; }
}