/* Page de marque (exemple : MOBIA) — tableau en blocs, esprit VooX : titres Oxanium,
   textes Inter, carbone. Les visuels des cartes sont des cadrages de --mq-visuel. */

.mq{
  --mq-board:#ECEEF1;
  --mq-ink:var(--voox-title,#0B0F14);
  --mq-soft:#5F6B78;
  --mq-line:rgba(11,15,20,.08);
  --mq-mist:#CDD5DE;
  --mq-carbon:#161B22;
  --mq-cognac:#C46A26;
  --mq-cognac-2:#E4914F;
  --mq-r:26px;
  padding:30px 0 72px;
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(196,106,38,.12), transparent 62%),
    radial-gradient(700px 380px at -5% 30%, rgba(0,209,255,.06), transparent 60%),
    linear-gradient(#fff, #F4F5F7);
}
.mq [hidden]{display:none!important}
.mq-wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* --- Tableau ------------------------------------------------------------ */
.mq-board{
  margin-top:16px;padding:22px;border-radius:34px;background:var(--mq-board);
  box-shadow:0 50px 90px -50px rgba(11,15,20,.45), inset 0 1px 0 #fff;
}

.mq-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mq-logo{display:flex;flex-direction:column;padding:2px 12px 2px 6px}
.mq-logo-mark{font-family:var(--voox-font-title);font-size:23px;font-weight:700;line-height:1;letter-spacing:.32em;color:var(--mq-ink)}
.mq-logo-sign{margin-top:6px;font-family:var(--voox-font-title);font-size:9.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--mq-cognac)}

.mq-search{
  flex:1 1 320px;display:flex;align-items:center;gap:8px;min-width:0;
  padding:6px 6px 6px 22px;border-radius:999px;background:#fff;transition:box-shadow .2s;
}
.mq-search:focus-within{box-shadow:0 0 0 3px rgba(0,209,255,.35)}
.mq-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 14px var(--voox-font-text);color:var(--mq-ink)}
.mq-search input::-webkit-search-cancel-button{cursor:pointer}
.mq-search button{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:0;border-radius:999px;cursor:pointer;
  background:var(--mq-carbon);color:#fff;font:600 13px var(--voox-font-title);letter-spacing:.02em;
}
.mq-search button:hover{background:#000}

.mq-actions{display:flex;gap:8px}
.mq-pill{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;
  background:#fff;color:var(--mq-ink);font:600 13px var(--voox-font-title);text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
a.mq-pill:hover,button.mq-pill:hover{transform:translateY(-1px);box-shadow:0 10px 20px -14px rgba(11,15,20,.5)}
.mq-pill-fav{cursor:default;color:var(--voox-rose,#FF2D9B)}
.mq-pill-fav [data-mq-compte]{color:var(--mq-ink);min-width:1ch}

/* --- Catégories --------------------------------------------------------- */
.mq-cats{display:flex;align-items:center;gap:8px;margin:18px 0 20px;overflow-x:auto;scrollbar-width:none}
.mq-cats::-webkit-scrollbar{display:none}
.mq-cats-label{margin-right:10px;font:600 15px var(--voox-font-title);color:var(--mq-ink);white-space:nowrap}
.mq-cat{
  flex:0 0 auto;height:42px;padding:0 24px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.72);color:var(--mq-ink);font:500 13.5px var(--voox-font-text);transition:background .2s;
}
.mq-cat:hover{background:#fff}
.mq-cat.is-active{background:var(--mq-mist)}
.mq-cat:focus-visible,.mq-round:focus-visible,.mq-pill:focus-visible,.mq-slider button:focus-visible{outline:3px solid rgba(0,209,255,.55);outline-offset:2px}

/* --- Blocs -------------------------------------------------------------- */
.mq-bento{
  display:grid;gap:14px;
  grid-template-columns:1.05fr 1.4fr 1fr;
  grid-template-areas:"new deal custom" "new pop pop";
}
.mq-card{position:relative;overflow:hidden;padding:22px;border-radius:var(--mq-r);background:#fff;animation:mq-in .7s cubic-bezier(.2,.7,.2,1) both}
.mq-card h2,.mq-popular h2{font-family:var(--voox-font-title);font-weight:600;color:var(--mq-ink);letter-spacing:-.02em}

.mq-crop{
  background-color:#D3D9E0;background-image:var(--mq-visuel);background-repeat:no-repeat;
  background-size:var(--zoom,cover);background-position:var(--pos,center);border-radius:18px;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}

.mq-rate{
  display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;
  background:#fff;color:var(--mq-ink);font:600 12px var(--voox-font-text);box-shadow:0 6px 16px -8px rgba(11,15,20,.3);
}
.mq-rate svg{color:#F5B301}

.mq-round{
  display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--mq-ink);text-decoration:none;box-shadow:0 10px 22px -12px rgba(11,15,20,.5);
  transition:transform .2s ease, color .2s ease;
}
.mq-round:hover{transform:scale(1.07)}
.mq-round.is-soft{background:rgba(255,255,255,.75);backdrop-filter:blur(8px)}
[data-mq-fav][aria-pressed="true"]{color:var(--voox-rose,#FF2D9B)}
[data-mq-fav][aria-pressed="true"] svg path{fill:currentColor}
[data-mq-fav].is-pop svg{animation:mq-pop .35s ease}

/* Nouveautés */
.mq-new{grid-area:new;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff 55%,#F2F3F5)}
.mq-new h2{font-size:30px;line-height:1.05}
.mq-new-track{flex:1;display:flex;touch-action:pan-y}
.mq-new-slide{position:relative;flex:1;display:flex;flex-direction:column;margin-top:20px;min-height:360px;animation:mq-fade .45s ease both}
.mq-price{margin:0;font:700 30px/1 var(--voox-font-title);color:var(--mq-ink)}
.mq-price span{display:block;margin-top:7px;font:500 13px var(--voox-font-text);color:var(--mq-soft)}
.mq-new-slide .mq-rate{position:absolute;top:0;right:0}
.mq-new-slide .mq-crop{flex:1;min-height:240px;margin-top:18px}
.mq-new-btns{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.mq-slider{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:6px;border-radius:999px;background:#F1F2F4}
.mq-slider span{font-size:13px;color:var(--mq-ink)}
.mq-slider button{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;background:#fff;color:var(--mq-ink);transition:transform .2s}
.mq-slider button:hover{transform:scale(1.06)}
.mq-slider button.is-dark{background:var(--mq-carbon);color:#fff}

/* Offre */
.mq-deal{
  grid-area:deal;display:grid;grid-template-columns:1fr 1.15fr;min-height:260px;animation-delay:.08s;
  background:linear-gradient(120deg,#fff 40%,#F6ECE3);
}
.mq-deal h2{font-size:30px;line-height:1.05}
.mq-deal p{max-width:22ch;margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--mq-soft)}
.mq-deal-img{margin:-22px -22px -22px 0;border-radius:0}
.mq-chip{
  position:absolute;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;
  background:#fff;color:var(--mq-ink);font:700 14px var(--voox-font-title);box-shadow:0 12px 26px -14px rgba(11,15,20,.45);
}
.mq-chip i{width:9px;height:9px;border-radius:50%;background:var(--mq-cognac);box-shadow:0 0 0 4px rgba(196,106,38,.2)}

/* Sur mesure */
.mq-custom{grid-area:custom;display:flex;flex-direction:column;gap:12px;animation-delay:.16s}
.mq-custom h2{max-width:14ch;font-size:19px;line-height:1.15}
.mq-custom .mq-crop{flex:1;min-height:110px}
.mq-go{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 6px 6px 20px;border-radius:999px;
  background:#F1F2F4;color:var(--mq-ink);font:600 13.5px var(--voox-font-title);text-decoration:none;
}
.mq-go span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--mq-carbon);color:#fff;transition:transform .3s ease}
.mq-go:hover span{transform:rotate(45deg)}
.mq-card:hover .mq-crop{transform:scale(1.015)}

/* Les plus aimés */
.mq-popular{grid-area:pop;animation:mq-in .7s .24s cubic-bezier(.2,.7,.2,1) both}
.mq-popular-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 2px 14px}
.mq-popular h2{font-size:30px;line-height:1.05}
.mq-products{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mq-product{
  --ton:linear-gradient(160deg,#C9D3DE,#AEB9C6);--encre:var(--mq-ink);
  position:relative;display:flex;flex-direction:column;min-height:236px;padding:14px;border-radius:22px;overflow:hidden;
  background:var(--ton);color:var(--encre);animation:mq-fade .4s ease both;
}
.mq-ton-cognac{--ton:linear-gradient(160deg,#DE8E4E,#B45B1F);--encre:#fff}
.mq-ton-carbon{--ton:linear-gradient(160deg,#2B313A,#10141A);--encre:#fff}
.mq-ton-sable{--ton:linear-gradient(160deg,#F1E9DF,#DDCDBA)}
.mq-product header{display:flex;align-items:center;gap:8px}
.mq-product h3{flex:1;min-width:0;margin:0;font:500 13px var(--voox-font-text);color:inherit;letter-spacing:0}
.mq-product .mq-rate{padding:4px 8px;font-size:11px;background:rgba(255,255,255,.22);color:inherit;box-shadow:none;backdrop-filter:blur(6px)}
.mq-product .mq-round{width:32px;height:32px;box-shadow:none}
.mq-product .mq-crop{flex:1;min-height:120px;margin:12px 0;border-radius:16px;box-shadow:0 20px 30px -20px rgba(0,0,0,.6)}
.mq-product:hover .mq-crop{transform:translateY(-3px) scale(1.02)}
.mq-buy{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:5px 5px 5px 14px;border-radius:999px;
  background:rgba(255,255,255,.2);color:inherit;font:600 12px var(--voox-font-text);text-decoration:none;backdrop-filter:blur(6px);
}
.mq-buy b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--mq-ink)}
.mq-ton-brume .mq-rate,.mq-ton-sable .mq-rate,.mq-ton-brume .mq-buy,.mq-ton-sable .mq-buy{background:rgba(255,255,255,.55)}
.mq-empty{margin:4px 2px 0;padding:22px;border-radius:22px;background:#fff;text-align:center;color:var(--mq-soft)}
.mq-empty button{margin-left:6px;border:0;background:none;color:var(--mq-ink);font:600 14px var(--voox-font-title);text-decoration:underline;cursor:pointer}

/* --- Signature ---------------------------------------------------------- */
.mq-signature{
  display:grid;grid-template-columns:1.2fr 1fr;margin-top:26px;border-radius:34px;overflow:hidden;
  background:linear-gradient(90deg,#000,#161B22);color:#F8FAFC;
}
.mq-signature-img{min-height:380px;background:var(--mq-visuel) center/cover no-repeat,#1C2128}
.mq-signature-text{display:flex;flex-direction:column;justify-content:center;padding:46px}
.mq-eyebrow{margin:0 0 14px;font:600 11.5px var(--voox-font-title);letter-spacing:.32em;text-transform:uppercase;color:var(--mq-cognac-2)}
.mq-signature h2{margin:0;font-size:34px;line-height:1.08;color:#fff}
.mq-signature p:not(.mq-eyebrow){margin:16px 0 26px;font-size:15px;line-height:1.65;color:rgba(248,250,252,.72)}
.mq-go-light{align-self:flex-start;background:#fff}

/* --- Mouvement ---------------------------------------------------------- */
@keyframes mq-in{from{opacity:0;transform:translateY(16px)}}
@keyframes mq-fade{from{opacity:0}}
@keyframes mq-pop{50%{transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){
  .mq *,.mq *::before,.mq *::after{animation:none!important;transition:none!important}
}

/* --- Écrans ------------------------------------------------------------- */
@media (max-width:1080px){
  .mq-bento{grid-template-columns:1fr 1fr;grid-template-areas:"new deal" "new custom" "pop pop"}
}
@media (max-width:760px){
  .mq-wrap{padding:0 16px}
  .mq-board{padding:14px;border-radius:26px}
  .mq-actions{width:100%}
  .mq-actions .mq-pill:first-child{flex:1;justify-content:center}
  .mq-bento{grid-template-columns:1fr;grid-template-areas:"new" "deal" "custom" "pop"}
  .mq-new h2,.mq-deal h2,.mq-popular h2{font-size:25px}
  .mq-new-slide{min-height:320px}
  .mq-deal{grid-template-columns:1fr}
  .mq-deal-img{min-height:190px;margin:18px -22px -22px}
  .mq-products{grid-template-columns:1fr 1fr}
  .mq-signature{grid-template-columns:1fr;border-radius:26px}
  .mq-signature-img{min-height:240px}
  .mq-signature-text{padding:28px 22px}
  .mq-signature h2{font-size:27px}
}
@media (max-width:460px){
  .mq-search{padding-left:16px}
  .mq-search button{padding:11px 14px}
  .mq-products{grid-template-columns:1fr}
}

/* Les visuels des pièces mènent au Store : en lien, ils gardent leur boîte. */
a.mq-crop{display:block}