/* =========================================================================
   VooX — Store en place de marché (accueil, rayons, marques, recherche).
   Blanc, net, des photos sur fond clair, la marque au-dessus du produit,
   le prix bien lisible. S'ajoute à voox-store.css sans le modifier.
   ========================================================================= */

/* --- Accueil : recherche et chiffres -------------------------------------- */
.vm-accueil{background:linear-gradient(180deg,#FFF5FA 0%,#fff 100%);border-bottom:1px solid var(--voox-line,rgba(11,15,20,.12))}
.vm-accueil .vs-wrap{padding-top:22px;padding-bottom:34px}
.vm-accueil h1{font-family:var(--voox-font-title,'Oxanium',sans-serif);font-size:clamp(30px,4.2vw,50px);line-height:1.05;margin:6px 0 12px;max-width:820px}
.vm-surtitre{margin:18px 0 0;font:700 12.5px/1 var(--voox-font-text,'Inter',sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--voox-brand-ink,#B8286E)}
.vm-chapeau{max-width:680px;margin:0;color:var(--voox-text,#46536A);font-size:17px;line-height:1.55}
.vm-chiffres{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none}
.vm-chiffres li{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--voox-line,rgba(11,15,20,.12));font-size:14px;color:var(--voox-text,#46536A)}
.vm-chiffres strong{color:var(--voox-title,#0B0F14)}

.vm-recherche{
  display:flex;align-items:center;gap:10px;max-width:760px;margin:24px 0 0;padding:7px 7px 7px 18px;
  background:#fff;border:1px solid var(--voox-line,rgba(11,15,20,.12));border-radius:999px;
  box-shadow:0 10px 30px rgba(11,15,20,.07);color:var(--voox-text,#46536A);
}
.vm-recherche:focus-within{border-color:var(--voox-title,#0B0F14)}
.vm-recherche input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:500 16px/1.2 var(--voox-font-text,'Inter',sans-serif);color:var(--voox-title,#0B0F14);padding:10px 0}
.vm-recherche .voox-btn{flex:0 0 auto;border-radius:999px}

/* --- Promesses -------------------------------------------------------------- */
.vm-promesses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:26px 0 30px;padding:0;list-style:none}
.vm-promesses li{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;background:var(--voox-soft,#F2F5F9);font-size:13.5px;line-height:1.45;color:var(--voox-text,#46536A)}
.vm-promesses li > span{flex:0 0 34px;height:34px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--voox-title,#0B0F14)}
.vm-promesses strong{display:block;font-size:14.5px;color:var(--voox-title,#0B0F14);margin-bottom:2px}

/* --- Sections ------------------------------------------------------------- */
.vm-section{display:block;padding:44px 0 0}
.vm-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.vm-tete h2{font-family:var(--voox-font-title,'Oxanium',sans-serif);font-size:26px;margin:0}
.vm-tete p{margin:4px 0 0;color:var(--voox-text,#46536A);font-size:14.5px}
.vm-tete a{font-size:14.5px;color:var(--voox-title,#0B0F14);text-decoration:none;font-weight:600;white-space:nowrap}
.vm-tete a:hover{text-decoration:underline}
.vm-titre{display:block;padding:22px 0 6px}
.vm-titre h1{font-family:var(--voox-font-title,'Oxanium',sans-serif);font-size:clamp(28px,3.4vw,40px);margin:10px 0 8px}

/* Une rangée qui défile d'un geste, comme les carrousels des places de marché. */
.vm-defile{grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:minmax(220px,1fr);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.vm-defile > *{scroll-snap-align:start}
.vm-marques.vm-defile{grid-auto-columns:minmax(260px,300px)}

/* --- Cartes produit --------------------------------------------------------- */
.vm-produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px 18px}
.vm-produit{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.vm-produit-media{
  position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  border-radius:14px;overflow:hidden;background:#F6F6F4;
}
.vm-produit-media > img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.vm-produit:hover .vm-produit-media > img{transform:scale(1.04)}
.vm-produit-media.est-sans-photo{background:linear-gradient(135deg,#FFF0F7 0%,#F1EEFF 100%)}
.vm-badge{position:absolute;top:10px;left:10px;padding:5px 9px;border-radius:999px;background:#fff;color:var(--voox-title,#0B0F14);font:700 11.5px/1 var(--voox-font-text,'Inter',sans-serif);box-shadow:0 2px 8px rgba(11,15,20,.08)}
.vm-badge.est-promo{left:auto;right:10px;background:var(--voox-rose,#FF2D9B);color:#fff}
.vm-produit-voir{
  position:absolute;left:10px;right:10px;bottom:10px;padding:10px;border-radius:999px;text-align:center;
  background:var(--voox-title,#0B0F14);color:#fff;font:600 13px/1 var(--voox-font-text,'Inter',sans-serif);
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;
}
.vm-produit:hover .vm-produit-voir,.vm-produit:focus-visible .vm-produit-voir{opacity:1;transform:none}
.vm-produit-corps{display:flex;flex-direction:column;gap:4px;padding:12px 2px 0}
.vm-produit-marque{font:700 11.5px/1.2 var(--voox-font-text,'Inter',sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--voox-text,#46536A)}
.vm-produit-nom{
  font:500 15px/1.35 var(--voox-font-text,'Inter',sans-serif);color:var(--voox-title,#0B0F14);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;
}
.vm-produit-prix{margin-top:2px;font:700 16px/1.2 var(--voox-font-text,'Inter',sans-serif);color:var(--voox-title,#0B0F14)}
.vm-produit-prix small{font-weight:500;font-size:12px;color:var(--voox-text,#46536A)}
.vm-produit-prix.est-ferme{font-weight:600;font-size:13.5px;color:var(--voox-brand-ink,#B8286E)}
.vm-code{align-self:flex-start;margin-top:4px;padding:3px 8px;border-radius:6px;background:#FFF0F7;color:var(--voox-brand-ink,#B8286E);font-size:12px;font-weight:600}

/* --- Cartes marque ---------------------------------------------------------- */
.vm-marques{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.vm-marque{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid var(--voox-line,rgba(11,15,20,.12));transition:transform .2s,box-shadow .2s;
}
.vm-marque:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,15,20,.10)}
.vm-marque-couv{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#F6F6F4;overflow:hidden}
.vm-marque-couv img{width:100%;height:100%;object-fit:cover}
.vm-marque-couv.est-sans-photo{background:linear-gradient(135deg,#0B0F14 0%,#2A1F2E 100%)}
.vm-marque-couv.est-sans-photo span{font:700 26px/1.1 var(--voox-font-title,'Oxanium',sans-serif);color:#fff;padding:0 18px;text-align:center}
.vm-marque-corps{position:relative;display:flex;flex-direction:column;gap:6px;padding:34px 18px 18px}
.vm-marque-logo{
  position:absolute;top:-28px;left:18px;width:56px;height:56px;border-radius:14px;background:#fff;overflow:hidden;
  border:1px solid var(--voox-line,rgba(11,15,20,.12));box-shadow:0 4px 14px rgba(11,15,20,.10);
  display:flex;align-items:center;justify-content:center;font:700 22px/1 var(--voox-font-title,'Oxanium',sans-serif);color:var(--voox-title,#0B0F14);
}
.vm-marque-logo img{width:100%;height:100%;object-fit:contain}
.vm-marque-nom{font:700 17px/1.2 var(--voox-font-title,'Oxanium',sans-serif);color:var(--voox-title,#0B0F14)}
.vm-marque-accroche{font-size:14px;line-height:1.45;color:var(--voox-text,#46536A);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vm-marque-pieds{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.vm-marque-pieds span{padding:4px 9px;border-radius:999px;background:var(--voox-soft,#F2F5F9);font-size:12px;font-weight:600;color:var(--voox-text,#46536A)}

/* --- Rayons ----------------------------------------------------------------- */
.vm-rayons{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.vm-rayon{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
.vm-rayon-media{display:block;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#FFE3F1 0%,#E6E1FF 100%);margin-bottom:8px;transition:transform .25s}
.vm-rayon:hover .vm-rayon-media{transform:scale(1.03)}
.vm-rayon-media img{width:100%;height:100%;object-fit:cover}
.vm-rayon-nom{font:700 15px/1.25 var(--voox-font-title,'Oxanium',sans-serif);color:var(--voox-title,#0B0F14);text-align:center}
.vm-rayon-sous{font-size:12.5px;line-height:1.4;color:var(--voox-text,#46536A);text-align:center}

/* --- Bandeau Store Pro ------------------------------------------------------ */
.vm-pro{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:52px 0 0;padding:34px 38px;
  border-radius:22px;background:var(--voox-dark-gradient,linear-gradient(90deg,#000 0%,#161B22 100%));color:#fff;
}
.vm-pro h2{font-family:var(--voox-font-title,'Oxanium',sans-serif);font-size:28px;margin:6px 0 8px;color:#fff}
.vm-pro p{margin:0;max-width:620px;color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.5}
.vm-pro .vm-surtitre{margin:0;color:var(--voox-rose-soft,#FF7ABC)}
.vm-pro .voox-btn{background:#fff;color:#0B0F14}

/* --- Rayon : filtres + résultats -------------------------------------------- */
.vm-catalogue{display:grid;grid-template-columns:240px minmax(0,1fr);gap:34px;align-items:start;padding-top:14px}
.vm-filtres{position:sticky;top:calc(var(--voox-groupbar-h,34px) + var(--voox-header-h,60px) + 70px);display:flex;flex-direction:column;gap:22px}
.vm-filtre-titre{margin:0 0 10px;font:700 12.5px/1 var(--voox-font-text,'Inter',sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--voox-title,#0B0F14)}
.vm-filtres .vs-sous{flex-direction:column;align-items:stretch;gap:4px;margin:0}
.vm-filtres .vs-sous a,.vm-filtre-liste a{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:10px;text-decoration:none;font-size:14px;color:var(--voox-text,#46536A);border:0;background:none}
.vm-filtres .vs-sous a:hover,.vm-filtre-liste a:hover{background:var(--voox-soft,#F2F5F9);color:var(--voox-title,#0B0F14)}
.vm-filtres .vs-sous a.is-active,.vm-filtre-liste a.is-active{background:var(--voox-title,#0B0F14);color:#fff}
.vm-filtre-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.vm-filtre-liste span{opacity:.7;font-size:12.5px}
.vm-filtres .vs-sous a span{opacity:.7;font-size:12.5px}
.vm-sous-groupe{margin:14px 12px 4px;font:700 11px/1 var(--voox-font-text,'Inter',sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--voox-brand-ink,#B8286E)}
.vm-barre{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--voox-line,rgba(11,15,20,.12))}
.vm-barre p{margin:0;font-size:15px;color:var(--voox-text,#46536A)}
.vm-barre strong{color:var(--voox-title,#0B0F14)}
.vm-tri{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--voox-text,#46536A)}
.vm-tri select{padding:9px 12px;border-radius:10px;border:1px solid var(--voox-line,rgba(11,15,20,.12));background:#fff;font:500 14px var(--voox-font-text,'Inter',sans-serif);color:var(--voox-title,#0B0F14)}

/* --- Page d'une marque -------------------------------------------------------- */
.vm-banniere{margin-top:14px;height:clamp(160px,24vw,300px);border-radius:22px;overflow:hidden;background:#F6F6F4}
.vm-banniere img{width:100%;height:100%;object-fit:cover}
.vm-banniere.est-sans-photo{background:linear-gradient(120deg,#0B0F14 0%,#2A1F2E 60%,#5B2346 100%)}
.vm-entete{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap;margin:0;padding:16px 26px 0}
.vm-entete-logo{
  flex:0 0 112px;height:112px;margin-top:-62px;border-radius:24px;background:#fff;overflow:hidden;position:relative;
  border:4px solid #fff;box-shadow:0 8px 26px rgba(11,15,20,.14);
  display:flex;align-items:center;justify-content:center;font:700 40px/1 var(--voox-font-title,'Oxanium',sans-serif);
}
.vm-entete-logo img{width:100%;height:100%;object-fit:contain}
.vm-entete-id{flex:1 1 320px;min-width:0;padding-bottom:4px}
.vm-entete-id h1{font-family:var(--voox-font-title,'Oxanium',sans-serif);font-size:clamp(28px,3.4vw,40px);margin:0 0 4px}
.vm-entete-id p{margin:0;color:var(--voox-text,#46536A);font-size:16px}
.vm-entete-chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0;padding:0;list-style:none}
.vm-entete-chips li{padding:5px 11px;border-radius:999px;background:var(--voox-soft,#F2F5F9);font-size:13px;font-weight:600;color:var(--voox-text,#46536A)}
.vm-entete-chips a{color:inherit;text-decoration:none}
.vm-entete .vs-entete-actions{padding-top:6px}
.vm-onglets{
  position:sticky;top:calc(var(--voox-groupbar-h,34px) + var(--voox-header-h,60px) + 58px);z-index:20;
  display:flex;gap:8px;overflow-x:auto;margin:30px 0 0;padding:10px 0;background:#fff;border-bottom:1px solid var(--voox-line,rgba(11,15,20,.12));scrollbar-width:none;
}
.vm-onglets a{flex:0 0 auto;padding:9px 15px;border-radius:999px;border:1px solid var(--voox-line,rgba(11,15,20,.12));text-decoration:none;font-size:14px;font-weight:600;color:var(--voox-title,#0B0F14)}
.vm-onglets a:hover{background:var(--voox-title,#0B0F14);color:#fff}
.vm-onglets span{opacity:.6;font-weight:500;margin-left:4px}

/* --- Téléphone ---------------------------------------------------------------- */
@media (max-width:980px){
  .vm-promesses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vm-catalogue{grid-template-columns:1fr;gap:18px}
  .vm-filtres{position:static;flex-direction:row;gap:12px;overflow-x:auto}
  .vm-filtre{flex:0 0 auto}
  .vm-filtres .vs-sous,.vm-filtre-liste{flex-direction:row;flex-wrap:nowrap}
  .vm-sous-groupe{display:none}
  .vm-filtres .vs-sous a,.vm-filtre-liste a{white-space:nowrap;border:1px solid var(--voox-line,rgba(11,15,20,.12));border-radius:999px}
}
@media (max-width:640px){
  .vm-promesses{grid-template-columns:1fr}
  .vm-produits{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .vm-defile{grid-auto-columns:46%}
  .vm-marques.vm-defile{grid-auto-columns:80%}
  .vm-rayons{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .vm-recherche .voox-btn{padding-inline:14px}
  .vm-entete{padding:12px 6px 0}
  .vm-entete-logo{flex-basis:84px;height:84px;margin-top:-48px}
  .vm-pro{padding:26px 22px}
}

/* --- Produit sans photo : une étiquette plutôt qu'un visuel générique ------- */
.vm-etiquette{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 18px 22px;text-align:left}
.vm-etiquette-marque{align-self:flex-start;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.75);font:700 11px/1 var(--voox-font-text,'Inter',sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--voox-title,#0B0F14)}
.vm-etiquette-nom{overflow-wrap:anywhere;font:700 clamp(17px,1.6vw,21px)/1.15 var(--voox-font-title,'Oxanium',sans-serif);color:var(--voox-title,#0B0F14);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.est-teinte-0{background:linear-gradient(140deg,#FFE3F1,#FFF6FA)}
.est-teinte-1{background:linear-gradient(140deg,#E3ECFF,#F6F9FF)}
.est-teinte-2{background:linear-gradient(140deg,#E2F6EC,#F5FCF8)}
.est-teinte-3{background:linear-gradient(140deg,#FFF0D9,#FFFAF2)}
.est-teinte-4{background:linear-gradient(140deg,#ECE5FF,#F8F5FF)}
.est-teinte-5{background:linear-gradient(140deg,#E0F4F8,#F4FBFD)}
.vm-produit-media.est-sans-photo{background:none}

/* Tout le rayon : rangé par groupe, puis par catégorie. */
.vm-groupe + .vm-groupe{margin-top:44px;padding-top:32px;border-top:1px solid var(--voox-line,rgba(11,15,20,.1))}
.vm-groupe-titre{margin:0 0 18px;font:700 26px/1.15 var(--voox-font-title,'Oxanium',sans-serif);color:var(--voox-title,#0B0F14)}
.vm-categorie + .vm-categorie{margin-top:30px}
.vm-categorie-tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px}
.vm-categorie-tete h3{margin:0;font:600 17px/1.3 var(--voox-font-text,'Inter',sans-serif);color:var(--voox-title,#0B0F14)}
.vm-categorie-tete a{font-size:14px;font-weight:600;color:var(--voox-title,#0B0F14);text-decoration:none;white-space:nowrap}
.vm-categorie-tete a:hover{color:var(--voox-brand-ink,#B8286E)}

/* Le bandeau du programme d'affiliation, sous celui du Store Pro. */
.vm-affiliation{margin-top:16px;background:linear-gradient(120deg,#B8286E 0%,#7C5CFF 100%)}
.vm-affiliation .vm-surtitre{color:rgba(255,255,255,.8)}