/* MM Coloris — pastilles (listing) et miniatures (fiche produit). Aperçu 28/09/2026. */

/* ---------- LISTING : pastilles rondes sous le nom ---------- */
.mm-sw-loop{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow:hidden;
  margin:12px 0 4px; line-height:1;
}
.mm-sw-pastille{
  display:inline-block; width:52px; height:52px; border-radius:50%;
  /* 28/09/2026 : sans flex:0 0 auto, le conteneur ecrase les pastilles en OVALES
     et le calcul du « +N » compte alors trop de pastilles. */
  flex:0 0 auto; min-width:52px; aspect-ratio:1/1;
  overflow:hidden; background:#ede8e1; padding:0; cursor:pointer;
  border:1px solid rgba(200,168,130,.55);
  box-shadow:0 1px 3px rgba(44,41,37,.10);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mm-sw-pastille img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.mm-sw-pastille:hover{ transform:translateY(-2px); border-color:#c8a882; }
.mm-sw-pastille.mm-sw-vu{
  border-color:#2c2925;
  box-shadow:0 0 0 2px #fff inset, 0 0 0 2px #c8a882;
}
  .mm-sw-reste{ flex:0 0 auto; }
.mm-sw-reste{
  font:600 12px/1 Jost, Helvetica, Arial, sans-serif;
  letter-spacing:.04em; color:#8b6b4a; padding-left:2px;
}

/* ---------- FICHE PRODUIT : une ligne discrète, pas un bloc ---------- */
.mm-sw{ margin:2px 0 18px; }
.mm-sw-titre{
  font:400 12px/1.4 Jost, Helvetica, Arial, sans-serif;
  letter-spacing:.02em; color:#6b5f52; margin-bottom:9px;
}
.mm-sw-titre b{
  font:600 10px/1 Jost, Helvetica, Arial, sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:#8b6b4a;
}
.mm-sw-actuel{ color:#2c2925; }
.mm-sw-rangee{ display:flex; flex-wrap:wrap; gap:9px; }
.mm-sw-vignette{
  width:46px; height:46px; padding:0; border-radius:50%;
  background:#f7f4f0; overflow:hidden; cursor:pointer;
  border:1px solid #e8e0d5; outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mm-sw-vignette img{ width:100%; height:100%; object-fit:cover; display:block; }
.mm-sw-vignette:hover{ border-color:#c8a882; transform:translateY(-1px); }
.mm-sw-vignette:focus-visible{ box-shadow:0 0 0 3px rgba(200,168,130,.45); }
.mm-sw-vignette.mm-sw-choisi{
  border-color:#2c2925;
  box-shadow:0 0 0 2px #fff inset, 0 0 0 2px #c8a882;
}
.mm-sw-vignette.mm-sw-epuise{ opacity:.42; }

/* le menu déroulant d'origine reste dans la page, hors écran :
   si le script échoue, il reprend la main et l'ajout au panier fonctionne. */
.mm-sw-cache{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* Ordinateur : les pastilles se rapprochent du nom du produit (28/09/2026). */
@media (min-width:1025px){
  body.mm-grid-v1 ul.products li.product .astra-shop-summary-wrap > .mm-sw-loop{ margin-top:2px; }
  .mm-sw-loop{ margin-top:2px; }
}
@media (max-width:1024px){
  .mm-sw-pastille{ width:46px; height:46px; min-width:46px; }
}
@media (max-width:600px){
  .mm-sw-vignette{ width:42px; height:42px; }
  /* Mobile : 40 px et TROIS pastilles maximum. La carte offre 150 px de large
     (mesure du 28/09/2026) : 3x40 + 2x5 d'ecart = 130, il reste 20 px pour le
     « +N », d'ou son ecriture resserree juste en dessous. */
  .mm-sw-pastille{ width:40px; height:40px; min-width:40px; }
  .mm-sw-loop{ gap:5px; }
  .mm-sw-reste{ font-size:11px; letter-spacing:0; padding-left:0; }

}

/* PLAFOND DE TROIS PASTILLES, SANS JAVASCRIPT.
   WP Rocket differe tout le JavaScript jusqu'au premier geste de la visiteuse
   (delay_js) : sur un telephone, la page s'affiche donc AVANT que le script
   n'ait pu masquer quoi que ce soit — on voyait une 4e pastille coupee.
   Le rendu par defaut est donc entierement porte par le CSS ; il s'applique a
   toutes les largeurs : trois pastilles suffisent partout. */
.mm-sw-loop .mm-sw-pastille:nth-of-type(n+4){ display:none !important; }
.mm-sw-loop .mm-sw-reste[data-plus]:not([data-plus=""]){
  display:inline !important;
}
.mm-sw-loop .mm-sw-reste[data-plus]:not([data-plus=""])::after{
  content:attr(data-plus);
}

/* la ligne du coloris, posée hors du cadre d'achat */
.mm-sw{ margin:0 0 16px; }

/* ---------- Place dans la grille de la carte catalogue ----------
   .astra-shop-summary-wrap est une GRILLE a 3 lignes (marque / titre / pied)
   definie par mm-grid-catalogue.css. Un enfant sans grid-row assigne se loge
   dans la premiere cellule libre, c'est-a-dire AVANT la marque : mesure du
   28/09/2026. On ouvre donc une 4e ligne pour les pastilles, entre le titre
   et le pied, et on y repousse le pied. */
body.mm-grid-v1 ul.products li.product .astra-shop-summary-wrap:has(> .mm-sw-loop){
  grid-template-rows:minmax(21px,auto) auto auto 1fr !important;
}
body.mm-grid-v1 ul.products li.product .astra-shop-summary-wrap > .mm-sw-loop{
  grid-column:1/-1; grid-row:3; align-self:start;
}
body.mm-grid-v1 ul.products li.product .astra-shop-summary-wrap:has(> .mm-sw-loop) > .mmg-foot{
  grid-row:4;
}