/* SNEAKERS HEAT · LE MUR DE LA BOUTIQUE (08/11/2026) — la présentation de la variante blanche du mur. Voir README.md et mur-boutique.js.
   TOUT est limité au mur : chaque règle commence par .mur-boutique (le conteneur et « la salle », la couche de la caméra), les classes
   et les animations portent le préfixe mb-. La seule exception : html.mb-verrou, qui bloque le défilement de la page pendant la fiche.
   Le test node --test snkrs/boutique/tests/boutique.test.js le vérifie.
   Unités : dans une paire, tout est en cqw (1 cqw = 1 % de la largeur de sa case) : la paire et l'étagère grandissent ensemble, et la
   caméra (une transformation du mur entier) n'a qu'à agrandir. */

.mur-boutique {
  --mb-fond: #fff;
  --mb-texte: #141210;
  --mb-doux: #5d5850;
  --mb-pale: #746e65;
  --mb-trait: rgba(20, 18, 16, .13);
  --mb-chaleur: #f5a029;
  --mb-orange-grand: #f5a029;     /* LE MÊME orange que le logo Sneakers Heat (relevé sur le logo, 08/11/2026 : « c'est deux oranges différents ») */
  --mb-orange-texte: var(--mb-texte);   /* trop clair sur blanc pour un petit texte : le petit texte reste foncé, souligné en orange */
  --mb-titre: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --mb-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --mb-camera: cubic-bezier(.66, .02, .16, 1);
  --mb-sortie: cubic-bezier(.16, 1, .3, 1);
  --mb-marge: clamp(16px, 4.4vw, 56px);
  --mb-largeur: 1760px;
  color-scheme: light;
  background: var(--mb-fond);
  color: var(--mb-texte);
  font-family: var(--mb-titre);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Le thème met des marges et des styles sur les éléments nus : on repart de zéro à l'intérieur du mur. */
.mur-boutique, .mur-boutique *, .mur-boutique *::before, .mur-boutique *::after { box-sizing: border-box; }
/* La classe doublée : le thème met 1,25rem de marge entre les éléments de ses blocs de texte (.prose:not(.prose--tight) …). */
.mur-boutique.mur-boutique * { margin: 0; padding: 0; letter-spacing: inherit; }
.mur-boutique .mb-mono { font-family: var(--mb-mono); }
.mur-boutique button, .mur-boutique select { font: inherit; color: inherit; }
.mur-boutique a { color: inherit; }
.mur-boutique :focus-visible { outline: 2px solid var(--mb-orange-grand); outline-offset: 3px; border-radius: 6px; }
.mur-boutique [hidden] { display: none !important; }

/* ------------------------------------------------------------------ le haut du mur : le titre et le filtre */
.mur-boutique .mb-section { position: relative; display: block; }
.mur-boutique .mb-intro {
  width: 100%; max-width: calc(var(--mb-largeur) + 2 * var(--mb-marge)); margin: 0 auto; padding: clamp(28px, 4.4vw, 60px) var(--mb-marge) 0;
}
.mur-boutique .mb-sur-titre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
  font: 500 11px/1.3 var(--mb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mb-doux);
}
.mur-boutique .mb-pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--mb-chaleur); box-shadow: 0 0 8px 1px rgba(245, 160, 41, .55); }
.mur-boutique .mb-accroche {
  margin: 12px 0 0; max-width: 18ch; color: var(--mb-texte); text-transform: none;
  font: 800 clamp(30px, 3.6vw, 52px)/.98 var(--mb-titre); font-stretch: 112%; letter-spacing: -.02em;
}
.mur-boutique .mb-accroche em { font-style: normal; color: var(--mb-orange-grand); }

/* Le filtre reste sous la main en descendant le mur : il colle juste sous l'en-tête du thème. */
.mur-boutique .mb-barre {
  position: sticky; top: var(--sticky-area-height, 0px); z-index: 2; margin-top: clamp(16px, 2vw, 24px);
  background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mur-boutique .mb-filtres {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  width: 100%; max-width: calc(var(--mb-largeur) + 2 * var(--mb-marge)); margin: 0 auto; padding: 8px var(--mb-marge);
}
.mur-boutique .mb-filtres::-webkit-scrollbar { display: none; }
.mur-boutique .mb-filtre {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid var(--mb-trait); border-radius: 999px;
  background: #fff; color: var(--mb-texte); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
  font: 500 13.5px/1 var(--mb-titre);
}
.mur-boutique .mb-filtre-n { font: 400 11px/1 var(--mb-mono); color: var(--mb-pale); transition: color .2s; }
.mur-boutique .mb-filtre[aria-pressed="true"] { background: var(--mb-texte); border-color: var(--mb-texte); color: #fff; }
.mur-boutique .mb-filtre[aria-pressed="true"] .mb-filtre-n { color: #f5a029; }
@media (hover: hover) and (pointer: fine) {
  .mur-boutique .mb-filtre:not([aria-pressed="true"]):hover { border-color: var(--mb-chaleur); }
}
.mur-boutique .mb-etat {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-height: 1.4em;
  width: 100%; max-width: calc(var(--mb-largeur) + 2 * var(--mb-marge)); margin: 4px auto 0; padding: 0 var(--mb-marge);
  font: 400 12px/1.4 var(--mb-mono); letter-spacing: .02em; color: var(--mb-pale);
}
.mur-boutique a.mb-collection { color: var(--mb-orange-texte); font-weight: 500; text-decoration: underline; text-decoration-color: #f5a029; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .mur-boutique a.mb-collection:hover { color: var(--mb-texte); } }

/* ------------------------------------------------------------------ le mur */
/* overflow-anchor : quand la fiche s'ouvre, le mur passe dans la salle ; sans ça, Chrome fait défiler la page pour « suivre » une
   paire qui part, et la page saute (412 px : 1090 → 622, relevé par le banc le 10/11/2026). */
.mur-boutique .mb-scene { position: relative; overflow: hidden; overflow: clip; overflow-anchor: none; }
.mur-boutique .mb-mur { position: relative; padding: 26px var(--mb-marge) 48px; transform-origin: 0 0; transition: transform 1.25s var(--mb-camera); }
.mur-boutique .mb-grille {
  position: relative; display: grid; list-style: none; margin: 0 auto; padding: 0; width: 100%;
  /* 340 px au plus par colonne : un filtre qui laisse deux paires ne les fait pas géantes, et le mur reste centré */
  max-width: min(var(--mb-largeur), calc(var(--mb-cols, 4) * 340px));
  grid-template-columns: repeat(var(--mb-cols, 4), minmax(0, 1fr));
  column-gap: clamp(14px, 2.8vw, 46px); row-gap: clamp(22px, 3.2vw, 52px);
}
.mur-boutique .mb-grille.mb-bascule { animation: mb-bascule .45s var(--mb-sortie); }
@keyframes mb-bascule { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ une paire sur son étagère */
/* isolation : la paire est un groupe à elle seule. Le mélange de sa photo reste entre elle et son étagère, et ses z-index ne passent
   jamais devant la barre du filtre (container-type ne crée pas ce groupe dans les navigateurs récents). */
.mur-boutique .mb-paire { position: relative; display: block; margin: 0; padding: 0; list-style: none; container-type: inline-size; isolation: isolate; transition: opacity .6s ease; }
.mur-boutique .mb-paire-btn {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; text-align: center; text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mur-boutique .mb-paire-btn:focus-visible { outline: none; }
.mur-boutique .mb-paire-btn:focus-visible .mb-etiquette-nom { text-decoration: underline; text-decoration-color: var(--mb-chaleur); text-underline-offset: 4px; }
.mur-boutique .mb-vitrine { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 54cqw; }
/* multiply : le blanc de la photo laisse voir l'étagère et l'ombre derrière elle ; aucune frange, aucun rectangle */
.mur-boutique .mb-photo {
  position: relative; z-index: 2; display: block; width: 78cqw; aspect-ratio: var(--mb-ar, 1.7); overflow: hidden; margin-bottom: -2.3cqw;
  mix-blend-mode: multiply; transform-origin: 50% 100%; transition: opacity .7s ease, transform .9s var(--mb-sortie);
}
.mur-boutique .mb-paire:not(.mb-prete) .mb-photo { opacity: 0; transform: translateY(2.4cqw); }
/* brightness : quelques photos gardent un cadre presque blanc (253, 255, 255 le 08/11/2026 : les Air Force 1 What The LA et Supreme Box
   Logo). 1,2 % de lumière le ramène au blanc pur, sans que la paire change à l'œil. */
.mur-boutique .mb-photo img {
  position: absolute; display: block; max-width: none; height: auto; margin: 0 !important; border-radius: 0; user-select: none; -webkit-user-drag: none; pointer-events: none;
  filter: brightness(1.012);
}
.mur-boutique .mb-ombre { /* l'ombre de contact sous la paire */
  position: absolute; z-index: 1; left: 13cqw; right: 13cqw; bottom: -2.9cqw; height: 3.4cqw; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(30, 24, 16, .34), rgba(30, 24, 16, 0) 72%);
}
.mur-boutique .mb-etagere { position: relative; display: block; width: 93cqw; height: 7.4cqw; margin: 0 auto; }
.mur-boutique .mb-planche, .mur-boutique .mb-planche-lueur {
  position: absolute; left: 0; right: 0; top: 0; height: 4.6cqw; clip-path: polygon(3.2% 0, 96.8% 0, 100% 100%, 0 100%);
}
.mur-boutique .mb-planche { z-index: 1; background: linear-gradient(180deg, #efece7 0, #e9e6e0 55%, #dfdbd4 100%); }
.mur-boutique .mb-planche-lueur { z-index: 1; opacity: 0; transition: opacity .45s ease; background: linear-gradient(0deg, rgba(245, 160, 41, .5), rgba(245, 160, 41, .12) 70%, rgba(245, 160, 41, 0)); }
.mur-boutique .mb-tranche, .mur-boutique .mb-led { position: absolute; left: 0; right: 0; top: 4.6cqw; height: 1.05cqw; border-radius: .3cqw; }
.mur-boutique .mb-tranche {
  z-index: 2;
  background: linear-gradient(90deg, #cfcac2, #e6e2dc 20%, #f1eee9 50%, #e6e2dc 80%, #cfcac2);
  box-shadow: 0 .5cqw 1.2cqw rgba(40, 30, 20, .2);
}
.mur-boutique .mb-led {
  z-index: 3; opacity: 0; transition: opacity .45s ease;
  background: linear-gradient(90deg, #f7b04f, #f5a029 18%, #fbc777 50%, #f5a029 82%, #f7b04f);
  box-shadow: 0 0 1cqw .2cqw rgba(245, 160, 41, .75), 0 0 4cqw .8cqw rgba(245, 160, 41, .3);
}
.mur-boutique .mb-ombre-mur { /* l'ombre de l'étagère sur le mur */
  position: absolute; z-index: 0; left: 5%; right: 5%; top: 5.65cqw; height: 9cqw; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, rgba(40, 30, 20, .17), rgba(40, 30, 20, 0) 72%);
}
.mur-boutique .mb-halo { /* l'orange qui baigne le mur autour de l'étagère allumée */
  position: absolute; z-index: -1; left: -30%; right: -30%; top: -30cqw; height: 66cqw; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(44% 34% at 50% 50%, rgba(245, 160, 41, .2), rgba(245, 160, 41, .07) 55%, rgba(245, 160, 41, 0) 78%);
}
.mur-boutique .mb-etiquette { display: flex; flex-direction: column; align-items: center; gap: .35em; margin-top: 3.4cqw; padding: 0 4cqw; transition: opacity .4s ease; }
.mur-boutique .mb-etiquette-nom { font: 500 clamp(11.5px, 5.4cqw, 14px)/1.25 var(--mb-titre); color: var(--mb-texte); text-wrap: balance; }
.mur-boutique .mb-etiquette-prix { font: 400 clamp(10.5px, 4.6cqw, 12px)/1.2 var(--mb-mono); color: var(--mb-doux); letter-spacing: .03em; }
.mur-boutique .mb-paire.mb-epuisee .mb-photo { filter: grayscale(.7); opacity: .6; }
.mur-boutique .mb-paire.mb-epuisee .mb-etiquette-prix { color: var(--mb-orange-texte); }

/* allumée : survol, focus clavier, paire ouverte */
.mur-boutique .mb-paire.mb-allumee .mb-led, .mur-boutique .mb-paire.mb-allumee .mb-halo, .mur-boutique .mb-paire.mb-allumee .mb-planche-lueur,
.mur-boutique .mb-paire-btn:focus-visible .mb-led, .mur-boutique .mb-paire-btn:focus-visible .mb-halo, .mur-boutique .mb-paire-btn:focus-visible .mb-planche-lueur { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .mur-boutique .mb-paire-btn:hover .mb-led, .mur-boutique .mb-paire-btn:hover .mb-halo, .mur-boutique .mb-paire-btn:hover .mb-planche-lueur { opacity: 1; }
  .mur-boutique .mb-paire-btn:hover .mb-photo { transform: scale(1.025); }
}

/* le chargement : des étagères vides qui attendent leurs paires */
.mur-boutique .mb-paire.mb-fantome .mb-vitrine::after {
  content: ''; position: absolute; left: 22cqw; right: 22cqw; bottom: 6cqw; height: 22cqw; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(40, 30, 20, .06), rgba(40, 30, 20, 0) 70%);
  animation: mb-attente 1.6s ease-in-out infinite alternate;
}
.mur-boutique .mb-paire.mb-fantome .mb-etiquette { visibility: hidden; }
@keyframes mb-attente { from { opacity: .3; } to { opacity: 1; } }
.mur-boutique .mb-paire:not(.mb-prete) .mb-etiquette { opacity: 0; }
/* la paire arrive : son étagère s'allume un instant */
.mur-boutique .mb-paire.mb-balaye .mb-led, .mur-boutique .mb-paire.mb-balaye .mb-halo { animation: mb-balayage 1.7s ease .1s both; }
@keyframes mb-balayage { 0% { opacity: 0; } 24% { opacity: 1; } 100% { opacity: 0; } }

.mur-boutique .mb-erreur { position: relative; text-align: center; padding: 48px 0 24px; color: var(--mb-doux); }
.mur-boutique .mb-btn-ligne {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; margin: 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mb-trait); background: #fff; font: 500 13px var(--mb-mono); text-decoration: none; color: var(--mb-texte);
}

/* ------------------------------------------------------------------ le rangement par modèle (data-rangement="modele", 10/11/2026) */
/* Une étagère par modèle, comme dans un magasin. Les étagères se suivent sur les rangées (flex-wrap) ; chacune fait --mb-k colonnes
   du mur (le JavaScript le règle : le nombre de ses paires, au plus le nombre de colonnes), écart compris. Toutes les paires restent
   ainsi sur les mêmes colonnes, de la même taille que sur le mur d'origine. Le 0,1 px de moins : l'arrondi ne fait jamais passer une
   étagère à la ligne. */
.mur-boutique .mb-grille.mb-rayons {
  --mb-ecart: clamp(14px, 2.8vw, 46px);
  display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--mb-ecart); row-gap: clamp(34px, 4.2vw, 68px);
}
.mur-boutique .mb-rayon {
  flex: none; display: block; margin: 0; padding: 0; list-style: none;
  width: calc(var(--mb-k, 1) * (100% - (var(--mb-cols, 4) - 1) * var(--mb-ecart)) / var(--mb-cols, 4) + (var(--mb-k, 1) - 1) * var(--mb-ecart) - .1px);
}
/* L'étiquette de l'étagère : la marque et le nombre de paires, puis le modèle, sur une seule ligne chacun (les étagères d'une même
   rangée gardent ainsi leurs planches à la même hauteur). Un trait gris, et un petit trait orange au début, comme une réglette. */
.mur-boutique .mb-rayon-titre {
  display: block; margin: 0 0 clamp(4px, .8vw, 12px); padding: 0 0 9px; text-align: left; text-transform: none; color: var(--mb-texte);
  font: 400 15px/1.2 var(--mb-titre); letter-spacing: normal;
  background: linear-gradient(var(--mb-orange-grand), var(--mb-orange-grand)) 0 100% / 28px 2px no-repeat;
  border-bottom: 1px solid var(--mb-trait);
  transition: opacity .4s ease;
}
.mur-boutique .mb-rayon-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.mur-boutique .mb-rayon-marque {
  flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 500 10.5px/1.4 var(--mb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mb-doux);
}
.mur-boutique .mb-rayon-n { flex: none; font: 400 11px/1.4 var(--mb-mono); letter-spacing: .02em; color: var(--mb-pale); white-space: nowrap; }
.mur-boutique .mb-rayon-nom {
  display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 800 clamp(17px, 1.5vw, 22px)/1.15 var(--mb-titre); font-stretch: 112%; letter-spacing: -.01em;
}
.mur-boutique .mb-rayon-paires {
  display: grid; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(var(--mb-k, 1), minmax(0, 1fr));
  column-gap: var(--mb-ecart); row-gap: clamp(22px, 3.2vw, 52px);
}
.mur-boutique.mb-salle.mb-focus .mb-rayon-titre { opacity: 0; }
/* Les deux parties du mur rangé (10/11/2026) : « Nouveautés » puis « Tous les modèles », chacune sur toute la largeur. */
.mur-boutique .mb-partie { flex: 0 0 100%; margin: 0; padding: 0; list-style: none; transition: opacity .4s ease; }
.mur-boutique .mb-partie-autres { margin-top: clamp(12px, 2.2vw, 34px); padding-top: clamp(26px, 3.4vw, 52px); border-top: 1px solid var(--mb-trait); }
.mur-boutique .mb-partie-titre {
  display: block; margin: 0; text-align: left; text-transform: none; color: var(--mb-texte);
  font: 800 clamp(26px, 3.1vw, 44px)/1.05 var(--mb-titre); font-stretch: 112%; letter-spacing: -.02em;
}
.mur-boutique .mb-partie-sous {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  font: 500 11px/1.4 var(--mb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mb-doux); font-stretch: normal;
}
.mur-boutique.mb-salle.mb-focus .mb-partie { opacity: 0; }
@media (max-width: 719px) {
  .mur-boutique .mb-grille.mb-rayons { --mb-ecart: 14px; row-gap: 30px; }
  .mur-boutique .mb-rayon-paires { row-gap: 26px; }
  .mur-boutique .mb-rayon-titre { padding-bottom: 7px; }
  .mur-boutique .mb-rayon-marque { font-size: 9.5px; letter-spacing: .1em; }
  .mur-boutique .mb-rayon-nom { font-size: 15.5px; }
  .mur-boutique .mb-rayon-n { font-size: 10px; }
}

/* ------------------------------------------------------------------ la salle : la couche de la caméra, sous l'en-tête du thème (z-index 4) */
/* Sur html seulement, comme le .lock du thème : verrouiller aussi body le ferait défiler à part, et l'en-tête collant quitterait l'écran. */
html.mb-verrou { overflow: hidden; overscroll-behavior: none; }
.mur-boutique.mb-salle {
  position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 3; overflow: hidden; overflow: clip;
  background-color: rgba(255, 255, 255, 0); transition: background-color .45s ease .75s;
}
.mur-boutique.mb-salle.mb-focus { background-color: #fff; touch-action: none; transition: background-color .4s ease; }
.mur-boutique.mb-salle > .mb-mur { position: absolute; margin: 0; }
.mur-boutique.mb-salle.mb-focus .mb-etiquette { opacity: 0; }
.mur-boutique.mb-salle.mb-glisse .mb-mur { transition-duration: .85s; }
.mur-boutique.mb-salle.mb-instant .mb-mur { transition: none !important; }

/* ------------------------------------------------------------------ la fiche */
.mur-boutique .mb-fiche { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; pointer-events: none; }
.mur-boutique .mb-fiche > * { pointer-events: auto; }
.mur-boutique .mb-fiche-titre, .mur-boutique .mb-fiche-achat, .mur-boutique .mb-fiche-nav, .mur-boutique .mb-astuce {
  opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .35s ease, transform .5s var(--mb-sortie), visibility 0s linear .35s;
}
.mur-boutique .mb-fiche.mb-visible .mb-fiche-titre, .mur-boutique .mb-fiche.mb-visible .mb-fiche-achat,
.mur-boutique .mb-fiche.mb-visible .mb-fiche-nav, .mur-boutique .mb-fiche.mb-visible .mb-astuce {
  opacity: 1; transform: none; visibility: visible; transition: opacity .35s ease, transform .5s var(--mb-sortie), visibility 0s;
}
.mur-boutique .mb-fiche.mb-visible .mb-fiche-titre { transition-delay: .5s; }
.mur-boutique .mb-fiche.mb-visible .mb-fiche-achat { transition-delay: .62s; }
.mur-boutique .mb-fiche.mb-visible .mb-fiche-nav, .mur-boutique .mb-fiche.mb-visible .mb-astuce { transition-delay: .74s; }
.mur-boutique .mb-fiche.mb-change .mb-fiche-titre, .mur-boutique .mb-fiche.mb-change .mb-fiche-achat .mb-achat-ligne { opacity: 0; transition-duration: .15s; transition-delay: 0s; }

.mur-boutique .mb-fiche-titre { position: absolute; left: var(--mb-marge); top: 20px; max-width: min(46vw, 640px); }
.mur-boutique .mb-retour {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; margin-bottom: 14px; border: 1px solid var(--mb-trait); border-radius: 999px;
  background: #fff; cursor: pointer; color: var(--mb-texte); font: 500 12px/1 var(--mb-mono); letter-spacing: .06em; text-transform: uppercase; transition: border-color .2s;
}
.mur-boutique .mb-sep { color: var(--mb-pale); }
.mur-boutique .mb-fiche-nom {
  margin: 12px 0 0; color: var(--mb-texte); font: 800 clamp(26px, 2.75vw, 46px)/.98 var(--mb-titre); font-stretch: 110%; letter-spacing: -.012em;
  text-transform: uppercase; text-wrap: balance; outline: none;
}
.mur-boutique .mb-fiche-sous { margin: 12px 0 0; font: 400 13px/1.4 var(--mb-mono); color: var(--mb-doux); }

.mur-boutique .mb-fiche-achat {
  position: absolute; right: var(--mb-marge); top: 20px; width: 304px; max-height: calc(100% - 40px); overflow-y: auto; padding: 16px 16px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .88); border: 1px solid var(--mb-trait); box-shadow: 0 18px 50px -24px rgba(20, 18, 16, .35);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
}
.mur-boutique .mb-achat-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; transition: opacity .3s ease; }
.mur-boutique .mb-achat-ligne.mb-mono { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-doux); padding-bottom: 10px; border-bottom: 1px solid var(--mb-trait); }
.mur-boutique .mb-achat-prix { margin: 12px 0 16px; }
.mur-boutique .mb-fiche-coloris { font-size: 13px; color: var(--mb-doux); line-height: 1.35; }
.mur-boutique .mb-fiche-prix { font: 700 22px/1 var(--mb-titre); font-stretch: 105%; white-space: nowrap; letter-spacing: -.01em; color: var(--mb-texte); }
.mur-boutique .mb-achat-label { display: block; margin-bottom: 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-doux); }
.mur-boutique .mb-champ { position: relative; }
.mur-boutique .mb-champ select {
  display: block; width: 100%; height: auto; min-height: 46px; padding: 0 40px 0 14px; border-radius: 10px; cursor: pointer; box-shadow: none; outline-offset: 0;
  appearance: none; -webkit-appearance: none; background: #fff; border: 1px solid rgba(20, 18, 16, .24);
  font: 500 13.5px var(--mb-mono); color: var(--mb-texte);
}
.mur-boutique .mb-champ select:focus-visible { outline: none; border-color: var(--mb-orange-grand); box-shadow: 0 0 0 3px rgba(245, 160, 41, .22); }
.mur-boutique .mb-champ.mb-manque select { border-color: var(--mb-orange-grand); animation: mb-secousse .4s; }
@keyframes mb-secousse { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mur-boutique .mb-champ svg { position: absolute; display: block; right: 15px; top: 50%; width: 12px; height: 8px; margin-top: -4px; pointer-events: none; color: var(--mb-doux); }
.mur-boutique .mb-btn-ajout {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; width: 100%; min-height: 50px; padding: 0 6px 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mb-texte); color: #fff; font: 600 14px/1 var(--mb-titre); letter-spacing: .01em; text-transform: none;
  transition: background .25s, box-shadow .35s, transform .2s, color .25s;
}
.mur-boutique .mb-btn-ajout i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--mb-chaleur); color: #141210; font-style: normal; }
.mur-boutique .mb-btn-ajout svg { display: block; width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .mur-boutique .mb-btn-ajout:not(:disabled):hover { box-shadow: 0 10px 30px -10px rgba(245, 160, 41, .75); }
}
.mur-boutique .mb-btn-ajout:active { transform: scale(.985); }
.mur-boutique .mb-btn-ajout[aria-busy="true"] { opacity: .7; cursor: progress; }
.mur-boutique .mb-btn-ajout:disabled { cursor: default; background: #d7d3cc; color: #5d5850; box-shadow: none; }
.mur-boutique .mb-btn-ajout:disabled i { background: #c4bfb6; color: #5d5850; }
.mur-boutique .mb-btn-ajout.mb-ajoute { background: var(--mb-chaleur); color: #1a0d03; }
.mur-boutique .mb-btn-ajout.mb-ajoute i { background: #141210; color: #fff; }
.mur-boutique .mb-aide { margin: 8px 2px 0; min-height: 1.2em; font: 400 12px/1.4 var(--mb-mono); color: var(--mb-doux); }
.mur-boutique .mb-aide:empty { margin: 0; min-height: 0; }
.mur-boutique .mb-aide.mb-aide-erreur { color: var(--mb-orange-texte); font-weight: 500; }
.mur-boutique a.mb-lien-fiche { display: inline-block; margin-top: 10px; font-size: 11px; letter-spacing: .06em; color: var(--mb-doux); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .mur-boutique a.mb-lien-fiche:hover { color: var(--mb-texte); text-decoration: underline; text-underline-offset: 3px; }
  .mur-boutique .mb-retour:hover { border-color: var(--mb-chaleur); }
}

.mur-boutique .mb-fiche-nav { position: absolute; left: 50%; bottom: 22px; margin-left: -96px; width: 192px; display: flex; align-items: center; justify-content: space-between; }
.mur-boutique .mb-fiche-nav button {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .85); border: 1px solid var(--mb-trait); color: var(--mb-texte); transition: border-color .2s, background .2s;
}
@media (hover: hover) and (pointer: fine) {
  .mur-boutique .mb-fiche-nav button:hover { border-color: var(--mb-chaleur); background: rgba(245, 160, 41, .1); }
}
.mur-boutique .mb-fiche-nav svg { display: block; width: 20px; height: 20px; }
.mur-boutique .mb-fiche-pos { font-size: 12px; letter-spacing: .12em; color: var(--mb-doux); }
.mur-boutique .mb-astuce { position: absolute; left: var(--mb-marge); bottom: 36px; margin: 0; font: 400 10.5px/1 var(--mb-mono); letter-spacing: .06em; color: var(--mb-pale); }

/* ------------------------------------------------------------------ tablette */
@media (max-width: 1023px) {
  .mur-boutique .mb-fiche-achat { width: 280px; }
  .mur-boutique .mb-astuce { display: none; }
}

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 719px) {
  .mur-boutique { font-size: 14px; }
  .mur-boutique .mb-accroche { font-size: clamp(28px, 8.4vw, 40px); }
  .mur-boutique .mb-mur { padding-top: 20px; }
  .mur-boutique .mb-grille { column-gap: 14px; row-gap: 26px; }
  .mur-boutique .mb-etiquette-nom { font-size: clamp(11.5px, 6.6cqw, 14px); }
  .mur-boutique .mb-etiquette-prix { font-size: clamp(10.5px, 5.6cqw, 12px); }
  /* les boutons du filtre défilent de côté, à l'intérieur de leur barre : la page, elle, ne défile jamais de côté */
  .mur-boutique .mb-filtres { padding-right: 36px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }

  .mur-boutique .mb-fiche-titre { left: 16px; right: 16px; top: 10px; max-width: none; }
  .mur-boutique .mb-retour { min-height: 36px; padding: 0 12px; margin-bottom: 10px; }
  .mur-boutique .mb-fiche-nom { font-size: clamp(22px, 6.6vw, 30px); margin-top: 8px; }
  .mur-boutique .mb-fiche-sous { margin-top: 8px; font-size: 12px; }
  /* La bulle de chat de la boutique (50 px, à 20 px du coin, par-dessus tout) reste à côté du lien, sous le bouton d'achat, sans le couvrir. */
  .mur-boutique .mb-fiche-achat {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 72%; border-radius: 20px 20px 0 0; border-width: 1px 0 0;
    padding: 14px 16px calc(26px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); box-shadow: 0 -14px 40px -24px rgba(20, 18, 16, .35);
  }
  .mur-boutique a.mb-lien-fiche { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; margin-top: 0; }
  .mur-boutique .mb-achat-prix { margin: 10px 0 12px; }
  .mur-boutique .mb-fiche-nav { bottom: calc(var(--mb-feuille, 260px) + 10px); width: 164px; margin-left: -82px; }
  .mur-boutique .mb-fiche-nav button { width: 40px; height: 40px; }
  .mur-boutique.mb-salle.mb-focus .mb-paire:not(.mb-allumee) { opacity: 0; }
}

/* petit téléphone : on enlève le secondaire pour laisser sa place à la paire */
@media (max-width: 719px) and (max-height: 740px) {
  .mur-boutique .mb-fiche-sous, .mur-boutique .mb-achat-label, .mur-boutique .mb-achat-ligne.mb-mono { display: none; }
  .mur-boutique .mb-retour { margin-bottom: 6px; }
  .mur-boutique .mb-fiche-nom { font-size: 20px; margin-top: 4px; }
  .mur-boutique .mb-achat-prix { margin: 0 0 8px; }
  .mur-boutique .mb-btn-ajout { margin-top: 8px; }
}

/* écran peu haut (téléphone couché) : le titre plus petit, la navigation sur le côté du titre */
@media (min-width: 720px) and (max-height: 560px) {
  .mur-boutique .mb-fiche-titre { top: 8px; }
  .mur-boutique .mb-retour { min-height: 34px; margin-bottom: 6px; }
  .mur-boutique .mb-fiche-nom { font-size: 20px; margin-top: 4px; }
  .mur-boutique .mb-fiche-sous, .mur-boutique .mb-achat-label { display: none; }
  .mur-boutique .mb-fiche-achat { top: 8px; max-height: calc(100% - 16px); padding: 10px 12px; }
  .mur-boutique .mb-fiche-nav { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mur-boutique *, .mur-boutique *::before, .mur-boutique *::after, .mur-boutique.mb-salle {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important;
  }
}