/* Les effets de survol sont enfermes dans @media (hover:hover) : sur un
   ecran tactile, l'etat survol se colle apres un appui et ne part qu'au
   tap suivant, ailleurs. Un bouton restait fonce, une carte agrandie. */
:root{
  --rose:#CC5874;      /* rose Jenny (site actuel) */
  --rose-d:#B04462;    /* fonds a texte clair : 5,20:1 avec le papier */
  --rose-f:#D4607C;    /* grands aplats a texte fonce : 4,66:1 avec l'encre */
  --rose-dd:#96384F;   /* survol de ces fonds */
  --rose-l:#F3D9E0;
  --lilas:#EEEBF0;     /* gris lilas (site actuel), les murs de la boutique */
  --lilas-d:#DED7E3;
  --ink:#2A1622;       /* aubergine, à la place du noir */
  --ink-2:#5B4553;
  --paper:#FBF9FA;
  --f:"Archivo",system-ui,sans-serif;
  --pad:clamp(16px,2.6vw,40px);
  --r:18px;
  --hh:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x sur html ET body : posé sur le seul body, Safari sur iPhone ne le
   reporte pas toujours au viewport, et la page entière glissait de côté, le
   contenu sortant de l'écran alors que l'en-tête restait en place.
   « clip » plutôt que « hidden » : hidden ferait d'html une zone défilante et
   casserait le position:sticky de la barre de filtres. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--rose-d);color:var(--paper)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:calc(var(--hh) + 20px)}
.h2{font-stretch:125%;font-weight:800;letter-spacing:-.03em;font-size:clamp(34px,5vw,78px);line-height:.92}
.h2 em{font-style:italic;font-weight:300;color:var(--rose)}
.kick{font-stretch:68%;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px;display:flex;align-items:center;gap:10px;margin-bottom:18px}
/* Le petit trait qui précédait les surtitres a été retiré : il se lisait
   comme un tiret long. Le surtitre se tient très bien sans lui. */
.pill{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 24px;border-radius:999px;font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:13px;transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.pill:active{transform:scale(.97)}
.pill.ink{background:var(--ink);color:var(--paper)}@media (hover:hover){.pill.ink:hover{background:var(--rose-d)}}
.pill.line{box-shadow:inset 0 0 0 1.5px currentColor}@media (hover:hover){.pill.line:hover{background:var(--ink);color:var(--paper);box-shadow:none}}
.arr{width:16px;height:10px;flex:none}

/* ---------- disque de taille (le cavalier qu'on accroche sur le portant) ---------- */
.disc{--c:var(--paper);--t:var(--ink);--d:64px;width:var(--d);height:var(--d);border-radius:50%;background:var(--c);color:var(--t);position:relative;display:grid;place-items:center;flex:none;font-style:normal;
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent calc(var(--d)*.1),#000 calc(var(--d)*.1 + .5px));mask:radial-gradient(circle at 50% 50%,transparent calc(var(--d)*.1),#000 calc(var(--d)*.1 + .5px));
  transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .25s,color .25s}
.disc::before{content:"";position:absolute;left:50%;top:-1px;width:calc(var(--d)*.07);height:calc(var(--d)*.42);transform:translateX(-50%);background:var(--slot,var(--rose))}
.disc b{font-stretch:110%;font-weight:800;font-size:calc(var(--d)*.22);letter-spacing:-.02em;margin-top:calc(var(--d)*.4);line-height:1}

/* ---------- étiquette prix ---------- */
.tag{display:inline-flex;flex-direction:column;align-items:flex-start;background:var(--paper);color:var(--ink);padding:7px 12px 7px 22px;position:relative;line-height:1.05;
  clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);border-radius:0 6px 6px 0}
.tag::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--lilas-d);transform:translateY(-50%)}
.tag b{font-stretch:90%;font-weight:800;font-size:16px}
.tag s{font-size:11px;color:var(--ink-2);font-stretch:80%}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;height:var(--hh);z-index:50;display:flex;align-items:center;gap:22px;padding:0 var(--pad);transition:background .3s,box-shadow .3s}
.hd.solid{background:rgba(251,249,250,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(42,22,34,.08)}
.logo{display:flex;align-items:center;gap:10px;line-height:.8}
.logo small{display:block;font-stretch:68%;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;margin-bottom:3px}
.logo span{display:block;font-stretch:125%;font-weight:900;font-size:25px;letter-spacing:-.04em}
.logo .disc{--d:30px;--c:var(--ink);--slot:transparent}
.hd.solid .logo .disc{--c:var(--rose)}
.burger{display:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);place-items:center}
.burger i{display:block;width:16px;height:1.5px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
.nav{display:flex;gap:4px;margin-left:18px}
.nav a{font-stretch:80%;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;padding:8px 12px;border-radius:999px;transition:background .2s}
@media (hover:hover){.nav a:hover{background:rgba(251,249,250,.45)}}
@media (hover:hover){.hd.solid .nav a:hover{background:var(--lilas)}}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.srch{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:rgba(251,249,250,.55);width:230px;transition:background .3s}
.hd.solid .srch{background:var(--lilas)}
.srch svg{width:15px;height:15px;flex:none}
.srch input{border:0;background:transparent;outline:0;width:100%;font-size:14px}
.srch input::placeholder{color:var(--ink-2)}
.live-b{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rose);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- menu mobile ---------- */
.menu{position:fixed;inset:0;z-index:70;background:var(--rose-f);color:var(--ink);padding:calc(var(--hh) + 10px) var(--pad) var(--pad);display:flex;flex-direction:column;transform:translateY(-100%);transition:transform .55s cubic-bezier(.7,0,.2,1);overflow:auto}
.menu.open{transform:none}
.menu-x{position:absolute;top:12px;right:var(--pad);width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:20px;line-height:40px}
/* Recherche du menu : elle n'existe que sur les écrans où celle de l'en-tête
   ne tient plus. Mêmes couleurs que le reste du menu, rien de nouveau. */
.srch-m{display:none}
.menu .srch-m{display:flex;align-items:center;gap:10px;background:var(--paper);
  border-radius:999px;padding:0 6px 0 18px;height:52px;margin-bottom:22px}
.menu .srch-m svg{width:17px;height:17px;flex:none;color:var(--ink-2)}
.menu .srch-m input{flex:1;min-width:0;border:0;background:transparent;outline:0;
  font-size:16px;color:var(--ink)}
.menu .srch-m button{flex:none;height:40px;padding:0 18px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-stretch:85%;font-weight:700;
  font-size:13px;text-transform:uppercase;letter-spacing:.04em}

.menu a.big,.menu summary.big{display:flex;justify-content:space-between;align-items:baseline;font-stretch:125%;font-weight:800;letter-spacing:-.03em;font-size:clamp(30px,8vw,44px);padding:8px 0;border-bottom:1px solid rgba(42,22,34,.2)}
.menu a.big small,.menu summary.big small{font-stretch:70%;font-weight:600;font-size:13px;letter-spacing:.06em}
.menu-f{margin-top:auto;padding-top:24px;font-size:14px;display:grid;gap:4px}

/* ---------- hero ---------- */
.hero{background:var(--rose-f);min-height:100svh;padding:calc(var(--hh) + 28px) var(--pad) 0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:1fr auto;gap:0 var(--pad);position:relative;overflow:hidden}
.hero-t{align-self:center;padding-bottom:40px;position:relative;z-index:2;min-width:0}
.hero h1{font-stretch:125%;font-weight:900;letter-spacing:-.045em;font-size:clamp(64px,10.4vw,188px);line-height:.82;color:var(--paper)}
.hero h1 span{display:block}
.hero h1 em{font-style:italic;font-weight:300;color:var(--ink)}
.hero-p{max-width:440px;margin:28px 0 30px;font-size:17px;line-height:1.5}
.hero-p b{font-weight:700}
.hero-c{display:flex;flex-wrap:wrap;gap:10px}
.cab{position:relative;min-width:0;background:var(--lilas);border-radius:calc(var(--r)*1.6) calc(var(--r)*1.6) 0 0;margin-top:6px;overflow:hidden;min-height:460px}
.cab-l{position:absolute;left:22px;top:20px;right:22px;display:flex;justify-content:space-between;font-stretch:70%;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12px;z-index:3}
.slide{position:absolute;inset:56px 9% 92px;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(30px) rotate(1.5deg);transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
.slide.out{opacity:0;transform:translateX(-30px) rotate(-1.5deg)}
.slide img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 22px 26px rgba(42,22,34,.16))}
.slide .tag{position:absolute;right:0;top:8%;transform-origin:0 50%;animation:swing 4s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(42,22,34,.12))}
@keyframes swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}}
.cab-b{position:absolute;left:22px;right:22px;bottom:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;z-index:3}
.cab-b h2{font-weight:700;font-size:16px;line-height:1.25}
.cab-b p{font-size:13px;color:var(--ink-2)}
.cab-nav{display:flex;gap:6px}
.cab-nav button{width:42px;height:42px;border-radius:50%;background:var(--paper);display:grid;place-items:center;transition:background .2s,color .2s}
@media (hover:hover){.cab-nav button:hover{background:var(--ink);color:var(--paper)}}
/* le portant */
.rail{grid-column:1/-1;position:relative;min-width:0;margin:0 calc(var(--pad)*-1);padding:0 var(--pad) 26px;background:var(--rose-f);z-index:4}
.rail::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--ink)}
.rail ul{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;max-width:1100px;min-width:0;margin:0 auto;position:relative;top:-4px}
.rail a{display:flex;flex-direction:column;align-items:center;gap:6px}
.rail a .disc{transform-origin:50% 0}
@media (hover:hover){.rail a:hover .disc{transform:rotate(-10deg)}}
.rail .disc{--d:clamp(52px,6vw,78px);--c:var(--paper);--slot:var(--ink)}
.rail small{font-stretch:70%;font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,10vw,150px) var(--pad)}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* tailles */
.sz{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);align-items:end;margin-bottom:56px}
.sz p{font-size:17px;max-width:470px;justify-self:end;color:var(--ink-2)}
.sz-l{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.sz-l button{display:flex;flex-direction:column;align-items:center;gap:12px}
.sz-l .disc{--slot:var(--paper)}
@media (hover:hover){.sz-l button:hover .disc{transform:translateY(-8px) rotate(-6deg)}}
.sz-l span{font-stretch:75%;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;text-align:center}
.sz-l span b{display:block;font-stretch:110%;font-size:22px;font-weight:800;letter-spacing:-.02em}
.sz-n{margin-top:26px;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--lilas-d);padding-top:14px}

/* femme / homme */
.duo{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;padding:0 var(--pad)}
.dc{border-radius:calc(var(--r)*1.6);padding:clamp(24px,3vw,44px);position:relative;overflow:hidden;min-height:640px;display:flex;flex-direction:column}
.dc.f{background:var(--lilas)}
.dc.h{background:var(--ink);color:var(--paper)}
.dc h3{font-stretch:125%;font-weight:900;letter-spacing:-.045em;font-size:clamp(60px,8vw,132px);line-height:.85;position:relative;z-index:2}
.dc h3 sup{font-stretch:80%;font-weight:600;font-size:15px;letter-spacing:.02em;vertical-align:top;margin-left:6px;position:relative;top:.5em}
.dc ul{list-style:none;margin-top:auto;position:relative;z-index:2;width:52%}
.dc li button{width:100%;display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid currentColor;font-size:16px;font-weight:500;text-align:left;transition:padding .25s,color .25s}
.dc li:last-child button{border-bottom:1px solid currentColor}
@media (hover:hover){.dc li button:hover{padding-left:8px;color:var(--rose)}}
.dc li em{font-style:normal;font-stretch:80%;opacity:.6}
.dc .im{position:absolute;right:4%;bottom:6%;top:22%;width:44%;display:flex;align-items:flex-end;justify-content:center;z-index:1}
.dc .im img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(42,22,34,.18))}

/* bonnes affaires */
.deal{background:var(--ink);color:var(--paper);overflow:hidden}
.deal .h2 em{color:var(--rose)}
.deal-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:0 var(--pad);margin-bottom:40px}
.deal-hd p{max-width:380px;color:rgba(251,249,250,.7);font-size:15px}
.strip{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;padding:0 var(--pad) 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.dl{flex:none;width:clamp(220px,21vw,290px);scroll-snap-align:start;cursor:pointer}
.dl .ph{background:var(--lilas);border-radius:var(--r);aspect-ratio:4/5;position:relative;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:16% 14% 12%;overflow:hidden}
.dl .ph img{max-height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.dl:hover .ph img{transform:scale(1.05) rotate(-1deg)}}
.dl .tag{position:absolute;left:12px;top:14px}
.dl .pc{position:absolute;right:12px;top:14px;background:var(--rose-d);color:var(--paper);border-radius:999px;padding:5px 10px;font-stretch:80%;font-weight:700;font-size:12px}
.dl h4{margin-top:12px;font-weight:500;font-size:15px;line-height:1.3}
.dl p{font-size:13px;color:rgba(251,249,250,.6)}
.strip-c{display:flex;gap:8px;padding:24px var(--pad) 0}
.strip-c button{width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(251,249,250,.5);display:grid;place-items:center;transition:background .2s,color .2s}
@media (hover:hover){.strip-c button:hover{background:var(--paper);color:var(--ink)}}

/* catalogue */
.cat-hd{margin-bottom:28px}
/* overflow-x:clip : les deux rangées de filtres défilent chacune de leur
   côté, mais leur contenu rendait la barre large de 910 px pour un écran
   de 360, et toute la page du catalogue défilait latéralement. 'clip'
   plutôt que 'hidden' pour ne pas créer de contexte de défilement, qui
   casserait le position:sticky. */
.bar{position:sticky;top:var(--hh);z-index:20;background:rgba(251,249,250,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin:0 calc(var(--pad)*-1);padding:12px var(--pad);border-bottom:1px solid var(--lilas-d);overflow-x:clip}
.row{display:flex;gap:8px;align-items:center;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.row+.row{margin-top:10px}
.chip{flex:none;height:38px;padding:0 16px;border-radius:999px;background:var(--lilas);font-size:14px;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s}
.chip sup{font-size:10px;opacity:.6;font-stretch:80%}
@media (hover:hover){.chip:hover{background:var(--lilas-d)}}
.chip.on{background:var(--ink);color:var(--paper)}
.chip.sub{height:32px;font-size:13px;background:transparent;box-shadow:inset 0 0 0 1px var(--lilas-d)}
.chip.sub.on{background:var(--rose-d);color:var(--paper);box-shadow:none}
.sep{flex:none;width:1px;height:24px;background:var(--lilas-d);margin:0 6px}
.mini{--d:40px;--slot:var(--paper);--c:var(--lilas-d)}
.mini b{font-size:9.5px}
.mini.on{--c:var(--rose-d);--t:var(--paper)}
@media (hover:hover){.mini:hover{transform:rotate(-10deg)}}
.sort{flex:none;height:38px;border:0;border-radius:999px;background:var(--lilas);padding:0 14px;font-size:13px;cursor:pointer}
#tri{border:0;background:transparent;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 14px;margin-top:26px}
.card{cursor:pointer;min-width:0;text-align:left;display:block;width:100%}
/* grid-template-rows:minmax(0,1fr) : sans lui, la rangée se dimensionne sur
   l'attribut height de la photo (525 px) au lieu de la hauteur de la carte.
   max-height:100% ne limitait alors rien et la photo débordait, coupée. */
.card .ph{background:var(--lilas);border-radius:var(--r);aspect-ratio:4/5;position:relative;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:14% 12% 16%;overflow:hidden;transition:border-radius .4s}
.card .ph img{max-height:100%;max-width:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.card:hover .ph img{transform:scale(1.05)}}
@media (hover:hover){.card:hover .ph{border-radius:calc(var(--r)*2)}}
.card .tag{position:absolute;left:10px;bottom:12px}
.card .br{position:absolute;right:10px;top:10px;font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px;background:var(--paper);border-radius:999px;padding:4px 9px}
.card h3{font-weight:500;font-size:15px;line-height:1.3;margin-top:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .zz{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.card .zz i{font-style:normal;font-stretch:80%;font-weight:600;font-size:11.5px;padding:2px 7px;border-radius:999px;background:var(--lilas)}
.card .zz i.hit{background:var(--rose-d);color:var(--paper)}
.card .dd{font-size:12.5px;color:var(--ink-2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.more{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:56px}
.more .meter{width:200px;height:3px;background:var(--lilas-d);border-radius:3px;overflow:hidden}
.more .meter i{display:block;height:100%;background:var(--rose)}
.more small{font-size:13px;color:var(--ink-2)}
.empty{grid-column:1/-1;background:var(--lilas);border-radius:var(--r);padding:60px 30px;text-align:center}
.empty h4{font-stretch:120%;font-weight:800;font-size:26px;letter-spacing:-.02em;margin-bottom:8px}

/* live */
.live{background:var(--rose-f);display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);align-items:center}
.live .h2{font-size:clamp(76px,12vw,210px);line-height:.8;color:var(--paper)}
.live .h2 em{color:var(--ink)}
.live .kick .dot{background:var(--paper)}
.steps{list-style:none;counter-reset:s;display:grid;gap:10px}
.steps li{background:var(--paper);border-radius:var(--r);padding:22px 24px 22px 90px;position:relative;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:22px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-stretch:110%;font-weight:800;font-size:18px}
.steps strong{display:block;font-stretch:110%;font-weight:800;font-size:19px;letter-spacing:-.01em}
.steps span{font-size:14px;color:var(--ink-2)}
.live .pill{margin-top:12px;justify-content:space-between;width:100%}

/* maison */
.why-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:50px}
.why-g div{background:var(--lilas);border-radius:var(--r);padding:30px 28px 34px;min-height:300px;display:flex;flex-direction:column}
.why-g .disc{--d:72px;--c:var(--rose-d);--t:var(--paper);--slot:var(--lilas)}
.why-g .disc b{font-size:13px}
.why-g h3{font-stretch:115%;font-weight:800;font-size:24px;letter-spacing:-.02em;margin:auto 0 8px;padding-top:40px}
.why-g p{font-size:15px;color:var(--ink-2)}

/* boutique */
.shop{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;padding:0 var(--pad) clamp(80px,10vw,150px)}
.shop-l{background:var(--lilas);border-radius:calc(var(--r)*1.6);padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;gap:40px;min-height:600px}
.addr{font-stretch:125%;font-weight:900;letter-spacing:-.045em;font-size:clamp(46px,6vw,100px);line-height:.86;margin-top:auto}
.addr em{font-style:italic;font-weight:300;color:var(--rose)}
.coords{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:6px 44px}
.coords dt{font-stretch:70%;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12px;color:var(--ink-2)}
.coords dd a{font-size:16px;font-weight:500;border-bottom:1.5px solid var(--rose)}
.form{background:var(--ink);color:var(--paper);border-radius:calc(var(--r)*1.6);padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column}
.form h3{font-stretch:120%;font-weight:800;font-size:32px;letter-spacing:-.025em;line-height:1}
.form>p{color:rgba(251,249,250,.65);margin:10px 0 28px}
.f{display:block;margin-bottom:14px}
.f span{display:block;font-stretch:70%;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12px;margin-bottom:6px;color:rgba(251,249,250,.65)}
.f input,.f textarea{width:100%;border:0;border-radius:12px;background:rgba(251,249,250,.08);padding:14px 16px;font-size:15px;outline:0;resize:none;color:var(--paper)}
.f input:focus,.f textarea:focus{background:rgba(251,249,250,.14);box-shadow:inset 0 0 0 1.5px var(--rose)}
.f textarea::placeholder{color:rgba(251,249,250,.4)}
.chk{display:flex;gap:10px;font-size:12.5px;color:rgba(251,249,250,.6);margin:6px 0 24px;line-height:1.45}
.chk input{accent-color:var(--rose);margin-top:3px}
.form .pill{margin-top:auto;justify-content:space-between;background:var(--rose-d);color:var(--paper)}
@media (hover:hover){.form .pill:hover{background:var(--paper);color:var(--ink)}}

/* footer */
.ft{background:var(--rose-f);padding:clamp(50px,6vw,80px) var(--pad) 0;overflow:hidden;border-radius:calc(var(--r)*1.6) calc(var(--r)*1.6) 0 0}
.ft-g{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad)}
.ft-g h2{font-stretch:70%;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px;margin-bottom:12px}
.ft-g a,.ft-g p{display:block;font-size:15px;line-height:1.9}
@media (hover:hover){.ft-g a:hover{color:var(--paper)}}
/* Le grand mot en filigrane : un tracé, pas un bloc de texte. Il occupe
   toute la largeur du pied, bord à bord, sans jamais être coupé. */
.ft-wm{display:block;width:calc(100% + var(--pad)*2);height:auto;
  margin:clamp(28px,4vw,56px) calc(var(--pad)*-1) clamp(6px,.8vw,14px);
  overflow:hidden;user-select:none}
.ft-wm text{fill:var(--paper);font-family:var(--f);font-weight:900;
  font-stretch:125%;letter-spacing:-.04em;font-size:1000px}
.ft-b{display:flex;justify-content:space-between;padding:16px 0 20px;font-size:12.5px;border-top:1px solid rgba(42,22,34,.2);position:relative;background:var(--rose-f)}

/* ---------- responsive ---------- */
@media (max-width:1180px){.nav{margin-left:6px}.nav a{padding:8px 9px;font-size:12px}.srch{width:170px}}
@media (max-width:900px){.nav{display:none}.burger{display:grid}}
@media (max-width:980px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
  :root{--hh:58px}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;padding-top:calc(var(--hh) + 22px)}
  .hero-t{padding-bottom:28px}
  .cab{min-height:64svh}
  .rail ul{justify-content:flex-start;gap:10px;overflow-x:auto;scrollbar-width:none;padding-top:4px;top:-8px}
  .sz,.live,.shop{grid-template-columns:minmax(0,1fr)}
  .sz p{justify-self:start}
  .sz-l{overflow-x:auto;padding:14px 0 6px;scrollbar-width:none;justify-content:flex-start;gap:18px}
  .duo{grid-template-columns:minmax(0,1fr)}
  /* Sur une colonne, la photo et la liste se chevauchaient : les compteurs des
     rayons disparaissaient derrière le vêtement. Plutôt que de rogner l'une ou
     l'autre, on arrête de les superposer : titre, photo, liste, l'un sous
     l'autre. La superposition reste la mise en page du grand écran. */
  .dc{min-height:0}
  .dc .im{position:static;width:100%;height:auto;margin:20px 0 26px;align-items:center}
  /* La hauteur est portée par l'image, en vh : sur un parent de hauteur
     automatique, un max-height en pourcentage ne se résout pas et la photo
     gardait ses 1100 px, débordant derrière le titre et la liste. */
  .dc .im img{max-height:44vh}
  .dc ul{width:100%;margin-top:0}
  .deal-hd{flex-direction:column;align-items:flex-start}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px}
  .why-g{grid-template-columns:minmax(0,1fr)}
  .why-g div{min-height:0}
  .coords{grid-template-columns:1fr}
  .ft-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:30px}
  .srch{width:auto;flex:1;max-width:190px}
}
@media (max-width:560px){
  /* Sans direct en cours, le bouton n'a ni pastille ni place pour son mot :
     il s'efface, l'entrée « Les lives » reste dans le menu. */
  .live-b:not(.on){display:none}
  .live-b.on span{display:inline}
  .srch{display:none}
  .card h3{font-size:14px}
  .card .tag b{font-size:14px}
  .qv-ph{height:44vh}
  .steps li{padding-left:80px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* filtre couleur */
.rl{flex:none;font-stretch:70%;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12px;color:var(--ink-2);margin-right:4px}
.swc{flex:none;height:34px;padding:0 12px 0 5px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--lilas-d);transition:box-shadow .2s,background .2s}
.swc i{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(42,22,34,.14)}
.swc sup{font-size:10px;opacity:.55}
@media (hover:hover){.swc:hover{background:var(--lilas)}}
.swc.on{box-shadow:inset 0 0 0 2px var(--ink);background:var(--paper)}
.card .zz .dotc{width:14px;height:14px;border-radius:50%;align-self:center;box-shadow:inset 0 0 0 1px rgba(42,22,34,.16);margin-right:2px}

/* taille seule : pas de trou ni de fente, juste la taille */
.disc.plain{-webkit-mask:none;mask:none}
.disc.plain::before{display:none}
.disc.plain b{margin-top:0;font-size:calc(var(--d)*.3)}
.mini.plain b{font-size:11px}
.disc.plain.long b{font-size:calc(var(--d)*.2);letter-spacing:-.03em}

/* ================= navigation façon grande boutique ================= */
/* menu déroulant */
.nav a{position:relative}
.nav a.on{background:var(--lilas)}
.hd.mmo{background:var(--paper);box-shadow:0 1px 0 rgba(42,22,34,.08)}
.hd.mmo .srch{background:var(--lilas)}
.hd.mmo .logo .disc{--c:var(--rose)}
.mm{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--lilas-d);box-shadow:0 30px 40px -20px rgba(42,22,34,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.mm.open{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1)}
.mm-in{display:grid;grid-template-columns:minmax(200px,1fr) minmax(200px,1fr) 2fr;gap:clamp(24px,3vw,56px);padding:34px var(--pad) 40px;max-width:1500px}
.mm-col h5{font-stretch:70%;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--ink-2);margin-bottom:14px}
.mm-col>a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:7px 0;font-size:17px;font-weight:500;transition:color .2s,padding .25s}
.mm-col>a em{font-style:normal;font-size:12px;color:var(--ink-2);font-stretch:80%}
@media (hover:hover){.mm-col>a:hover{color:var(--rose);padding-left:6px}}
.mm-col>a.mm-all{font-weight:700}
.mm-col>a.mm-deal{color:var(--rose-d);margin-top:8px;border-top:1px solid var(--lilas-d);padding-top:14px}
.mm-z{display:flex;flex-wrap:wrap;gap:8px}
.mm-z a{min-width:52px;height:44px;padding:0 12px;border-radius:999px;background:var(--lilas);display:grid;place-items:center;font-stretch:100%;font-weight:700;font-size:14px;transition:background .2s,color .2s}
@media (hover:hover){.mm-z a:hover{background:var(--ink);color:var(--paper)}}
.mm-n{font-size:13px;color:var(--ink-2);margin-top:16px;max-width:240px}
.mm-feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;align-content:start}
.mm-card .ph{background:var(--lilas);border-radius:var(--r);aspect-ratio:4/5;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:12%;position:relative;overflow:hidden}
.mm-card .ph img{max-height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.mm-card:hover .ph img{transform:scale(1.05)}}
.mm-card .tag{position:absolute;left:8px;bottom:10px}
.mm-card span{display:block;margin-top:8px;font-size:14px;font-weight:500}
.mm-veil{position:fixed;inset:0;z-index:45;background:rgba(42,22,34,.22);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.mm-veil.open{opacity:1;visibility:visible;transition:opacity .25s}
@media (max-width:900px){.mm,.mm-veil{display:none}}
@media (max-width:1180px){.mm-in{grid-template-columns:1fr 1fr 1.4fr}}
/* menu mobile : sous-rayons */
.msub summary{list-style:none;cursor:pointer}
.msub summary::-webkit-details-marker{display:none}
.msub>div{display:grid;padding:6px 0 14px}
.msub>div a{display:flex;justify-content:space-between;padding:8px 0 8px 4px;font-size:18px;font-weight:500}
.msub>div a em{font-style:normal;font-size:13px;opacity:.7}

/* Barre du catalogue : un groupe de filtres par ligne.
   Les quatre groupes tenaient sur une seule ligne, sans retour possible : ils
   se partageaient la largeur et chacun rognait le suivant, « Homme » finissait
   coupé en deux. Empilés, ils se lisent d'un coup d'oeil et rien ne se mange.
   Même organisation au téléphone et sur ordinateur. */
.bar{display:block;padding:16px var(--pad) 18px}
.bar .row{flex-wrap:wrap;overflow:visible;row-gap:8px}
.bar .row-subs,.bar .row-tailles{margin-top:14px;padding-top:14px;
  border-top:1px solid var(--lilas-d)}
.bar .row-couleurs{margin-top:10px}
.bar .sep{display:none}
.sort{display:flex;align-items:center}
.bar-t{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:22px 0 0}
.bar-t h2{font-stretch:110%;font-weight:800;font-size:20px;letter-spacing:-.02em}
.bar-t__d{display:flex;align-items:center;gap:14px}
.bar-t h3{font-stretch:115%;font-weight:800;letter-spacing:-.02em;font-size:20px;white-space:nowrap}
.bar-t span{font-size:13px;color:var(--ink-2);white-space:nowrap}
.tabs{display:flex;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;flex:1;min-width:0;mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);padding-right:30px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;font-size:15px;font-weight:500;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
@media (hover:hover){.tabs button:hover{color:var(--ink)}}
.tabs button.on{color:var(--ink);border-color:var(--rose)}
.tabs button.back{font-size:17px;color:var(--ink)}
.fbtn{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;transition:background .2s,color .2s}
@media (hover:hover){.fbtn:hover{background:var(--ink);color:var(--paper)}}
@media (hover:hover){.fbtn:hover svg circle{fill:var(--ink)}}
.fbtn b:not(:empty){display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--rose-d);color:var(--paper);font-size:11px;font-stretch:100%}
.act{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.act:empty{display:none}
.act button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:500}
.act button i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px rgba(251,249,250,.4)}
.act button.clr{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* panneau Filtrer et trier */
/* Même correction que pour le tiroir panier : sans overflow:hidden, le
   panneau rangé à droite par translateX(102%) élargit la page. */
.fd{position:fixed;inset:0;z-index:85;pointer-events:none;overflow:hidden}
.fd-bg{position:absolute;inset:0;background:rgba(42,22,34,.35);opacity:0;transition:opacity .35s}
.fd-p{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);transform:translateX(102%);transition:transform .5s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column}
.fd.open{pointer-events:auto}.fd.open .fd-bg{opacity:1}.fd.open .fd-p{transform:none}
.fd-h{display:flex;justify-content:space-between;align-items:center;padding:20px 26px;border-bottom:1px solid var(--lilas-d)}
.fd-h h3{font-stretch:115%;font-weight:800;font-size:22px;letter-spacing:-.02em}
.fd-x{width:40px;height:40px;border-radius:50%;background:var(--lilas);font-size:20px}
.fd-b{flex:1;overflow:auto;padding:6px 26px 20px}
.fd-b section{padding:22px 0;border-bottom:1px solid var(--lilas-d)}
.fd-b h4{font-stretch:70%;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--ink-2);margin-bottom:14px}
.srt{display:grid;gap:4px}
.srt label{display:flex;align-items:center;gap:12px;padding:6px 0;cursor:pointer;font-size:15px}
.srt input{accent-color:var(--ink);width:18px;height:18px}
.fz{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fz button{height:52px;border-radius:14px;background:var(--lilas);font-weight:700;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;transition:background .2s,color .2s}
.fz button sup{font-size:10.5px;font-weight:500;opacity:.6;margin-top:2px}
@media (hover:hover){.fz button:hover{background:var(--lilas-d)}}
.fz button.on{background:var(--ink);color:var(--paper)}
.fz button[disabled]{opacity:.3;cursor:not-allowed}
.fd-n{font-size:12.5px;color:var(--ink-2);margin-top:12px}
.fc{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 12px}
.fc button{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;font-size:14.5px;text-align:left;transition:background .2s}
@media (hover:hover){.fc button:hover{background:var(--lilas)}}
.fc button i{width:24px;height:24px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(42,22,34,.15)}
.fc button span{flex:1}
.fc button sup{font-size:11px;color:var(--ink-2)}
.fc button.on{background:var(--lilas)}
.fc button.on i{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.tg{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;cursor:pointer;align-items:center}
.tg input{accent-color:var(--rose);width:20px;height:20px;grid-row:span 2}
.tg span{font-size:15px;font-weight:600}
.tg em{font-style:normal;font-size:13px;color:var(--ink-2)}
.fd-f{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:16px 26px 22px;border-top:1px solid var(--lilas-d)}
.fd-f .pill{justify-content:center}
@media (max-width:860px){
  .bar{flex-wrap:wrap;gap:10px 16px}
  .bar-t{flex:1}
  .tabs{order:3;flex-basis:100%}
  .fbtn{height:40px;padding:0 14px}
}

/* ---------- très petits écrans (iPhone SE et assimilés) ----------
   À 320 px, l'en-tête et les grands titres dépassaient de 30 px.
   On resserre les écarts, on ne change rien d'autre. */
@media (max-width:360px){
  :root{--pad:12px}
  .hd{gap:10px}
  .hd-r{gap:6px}
  .logo span{font-size:21px}
  .logo small{font-size:8.5px}
  .icon-b,.burger,.live-b{width:38px;height:38px}
  .live-b{padding:0}
  .dc h3{font-size:clamp(44px,13vw,132px)}
  .dc h3 sup{font-size:12px;margin-left:4px}
}

/* =======================================================================
   Barre de filtres au téléphone
   Relevé le 22/10/2026 : « Homme » restait coupé au bord droit, et surtout la
   rangée des tailles partait de côté dès qu'on posait le doigt dessus pour
   faire défiler la page. Elle mêlait 8 tailles et 26 couleurs sur trois mètres
   de ruban. Tailles et couleurs sont désormais séparées, et plus rien ne
   défile horizontalement : tout revient à la ligne.
   ======================================================================= */
/* Sur grand écran, l'enveloppe du dépliant s'efface : les rangées des tailles
   et des couleurs redeviennent enfants directs de la barre, qui les range
   côte à côte sur une seule ligne comme avant. Sans display:contents, cette
   enveloppe non compressible écrasait les rayons et les sous-rayons à zéro. */
.fcol,.fcol-c{display:contents}
.fcol-b{display:none}
.fcol-b b,.fcol-b em{font-style:normal;font-weight:inherit}

@media (max-width:860px){
  /* Plus aucune rangée ne défile de côté : tout revient à la ligne. Un ruban
     horizontal sous le pouce se laisse toujours emporter quand le doigt veut
     en réalité faire défiler la page, et aucun réglage de overscroll ou de
     touch-action n'y change rien tant que la rangée peut glisser. */
  .bar .row{gap:8px}

  /* Au téléphone, taille et couleur sont repliées derrière un bouton : le
     filet se place donc avant ce bouton, et non avant les tailles. */
  .bar .fcol{margin-top:16px;padding-top:16px;border-top:1px solid var(--lilas-d)}
  .bar .row-tailles{margin-top:0;padding-top:0;border-top:0}

  .bar .chip{height:34px;padding:0 14px;font-size:13.5px}
  .bar .chip.sub{height:30px;font-size:13px;padding:0 12px}
  .bar .mini{--d:34px}
  .bar .mini b{font-size:9px}
  .bar .rl{font-size:11px;margin-right:4px}
  .bar .sep{display:none}

  /* Trop haute pour coller utilement : collée, elle mangerait le tiers de
     l'écran pendant tout le défilement du catalogue. Elle défile avec la page. */
  .bar{position:static;backdrop-filter:none;-webkit-backdrop-filter:none}

  /* Les couleurs : la pastille seule. Le nom tenait sur 102 px par couleur,
     soit huit lignes pour le nuancier. Il reste lisible au toucher long et
     pour les lecteurs d'écran, par title et aria-label. */
  .row-couleurs .swc{padding:0;width:34px;justify-content:center}
  .row-couleurs .swc span,.row-couleurs .swc sup{display:none}
  .row-couleurs .swc i{width:26px;height:26px}

  /* Replié par défaut : le bouton seul tient sur une ligne. */
  .fcol{display:block;width:100%}
  .fcol-c{display:none}
  .fcol input:checked ~ .fcol-c{display:block}
  .fcol-c .row+.row{margin-top:8px}
  .fcol-b em{display:none}
  .fcol input:checked ~ .fcol-b b{display:none}
  .fcol input:checked ~ .fcol-b em{display:inline}
  .fcol-b{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;
    border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;
    background:var(--lilas);color:var(--ink)}
  .fcol-b::after{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;
    border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
  .fcol input:checked ~ .fcol-b::after{transform:rotate(-135deg) translate(-3px,-3px)}
  .fcol input:focus-visible ~ .fcol-b{outline:2px solid var(--ink);outline-offset:2px}
}

/* =======================================================================
   Champs de saisie au téléphone
   Sous 16 px, Safari sur iPhone agrandit la page dès qu'on touche un champ,
   et elle ne revient jamais toute seule : la mise en page part de travers
   pour le reste de la visite. Les champs du site étaient entre 13 et 15 px.
   On force 16 px sur petit écran, l'apparence sur ordinateur ne bouge pas.
   La liste est détaillée parce que chaque champ a sa propre règle ailleurs,
   plus spécifique qu'un simple sélecteur d'élément.
   ======================================================================= */
@media (max-width:900px){
  input,select,textarea,
  body .champ input,body .champ select,body .champ textarea,
  body .outils input[type=search],body .outils select,
  body .srch input,body .srch-m input,
  body .f input,body .f textarea,
  body #tri{font-size:16px}
}