/* =========================================================
   AuxiFashion — Design System
   Noir / Blanc / Or — minimalisme éditorial, fil d'or signature
   ========================================================= */

:root{
  --header-h:76px;
  --noir:#0f0f0f;
  --noir-soft:#1a1a1a;
  --blanc:#ffffff;
  --or:#d4af37;
  --or-clair:#e8c766;
  --or-dim:#7a6428;
  --gris-clair:#f5f4f1;
  --gris:#8c8c8c;
  --gris-fonce:#4a4a4a;
  --line:rgba(15,15,15,0.08);
  --line-inv:rgba(255,255,255,0.14);
  --glass-bg:rgba(255,255,255,0.55);
  --glass-bg-dark:rgba(15,15,15,0.55);
  --glass-border:rgba(255,255,255,0.35);
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ff-display:'Bodoni Moda', 'Times New Roman', serif;
  --ff-body:'Manrope', -apple-system, sans-serif;
  --ff-mono:'Space Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-body);
  color:var(--noir);
  background:var(--blanc);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input,select,textarea{font-family:inherit; font-size:1rem;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:2px solid var(--or); outline-offset:3px;}

.container{max-width:1320px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .container{padding:0 20px;} }

.eyebrow{
  font-family:var(--ff-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--or-dim);
  display:inline-flex;
  align-items:center;
  gap:10px;

}


h1,h2,h3,h4{font-family:var(--ff-display); font-weight:600; line-height:1.05; letter-spacing:-.01em;}
h1{font-size:clamp(2.6rem,6vw,5.2rem);}
h2{font-size:clamp(1.9rem,4vw,3.1rem);}
h3{font-size:clamp(1.2rem,2vw,1.6rem);}
p{line-height:1.7; color:var(--gris-fonce);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 34px;
  font-family:var(--ff-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:var(--radius);
  transition:all .45s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--noir); color:var(--blanc); border:1px solid var(--noir);}
.btn-primary:hover{background:var(--or); border-color:var(--or); color:var(--noir);}
.btn-outline{background:transparent; color:var(--noir); border:1px solid var(--noir);}
.btn-outline:hover{background:var(--noir); color:var(--blanc);}
.btn-outline.inv{color:var(--blanc); border-color:var(--line-inv);}
.btn-outline.inv:hover{background:var(--blanc); color:var(--noir);}
.btn-gold{background:var(--or); color:var(--noir); border:1px solid var(--or);}
.btn-gold:hover{background:var(--or-clair); border-color:var(--or-clair);}

/* ---------- Fil d'or — signature divider ---------- */
.fil-or{
  position:relative;
  height:64px;
  display:flex; align-items:center;
  overflow:hidden;
}
.fil-or::before{
  content:'';
  position:absolute; left:0; right:0; top:50%;
  height:1px;
  background:var(--line);
}
.fil-or__thread{
  position:absolute; top:50%; left:0;
  width:46px; height:1px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, var(--or) 40%, var(--or-clair));
  animation:fil-glide 7s linear infinite;
}
.fil-or__thread::after{
  content:''; position:absolute; right:-3px; top:50%; width:7px; height:7px;
  background:var(--or); border-radius:50%; transform:translateY(-50%);
  box-shadow:0 0 10px rgba(212,175,55,.7);
}
@keyframes fil-glide{
  0%{left:-46px;}
  100%{left:100%;}
}
.fil-or.dark::before{background:var(--line-inv);}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:200;
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  background:var(--glass-bg);
  border-bottom:1px solid var(--glass-border);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.navbar.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.06);}
.navbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
  gap:24px;
}
.logo{
  font-family:var(--ff-display);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:.02em;
  display:flex; align-items:baseline; gap:2px;
}
.logo em{
  font-style:normal; color:var(--or);
}
.nav-links{
  display:flex; align-items:center; gap:34px;
  font-family:var(--ff-mono);
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nav-links a{position:relative; padding:6px 0; transition:color .3s;}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--or); transition:width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--or-dim);}

.navbar__tools{display:flex; align-items:center; gap:18px;}
.tool-btn{
  position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .3s;
}
.tool-btn:hover{background:rgba(15,15,15,.06);}
.tool-btn svg{width:19px; height:19px; stroke:var(--noir); fill:none; stroke-width:1.6;}
.badge-count{
  position:absolute; top:-2px; right:-2px;
  background:var(--or); color:var(--noir);
  font-family:var(--ff-mono); font-size:.6rem; font-weight:700;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* Language switch */
.lang-switch{position:relative;}
.lang-btn{
  display:flex; align-items:center; gap:6px;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 12px; border:1px solid var(--line); border-radius:20px;
  transition:border-color .3s;
}
.lang-btn:hover{border-color:var(--or);}
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0;
  background:var(--blanc); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  min-width:190px; padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all .3s var(--ease);
  z-index:50;
}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-option{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:6px; font-size:.85rem;
  transition:background .2s;
}
.lang-option:hover{background:var(--gris-clair);}
.lang-option.active{color:var(--or-dim); font-weight:700;}
.lang-option small{color:var(--gris); font-weight:400;}

.nav-toggle{display:none; width:30px; height:20px; position:relative;}
.nav-toggle span{
  position:absolute; left:0; height:2px; border-radius:2px; background:var(--noir);
  transition:all .4s var(--ease), width .35s var(--ease), background .3s;
}
.nav-toggle span:nth-child(1){top:0; width:100%;}
.nav-toggle span:nth-child(2){top:9px; width:65%;}
.nav-toggle span:nth-child(3){top:18px; width:100%;}
.nav-toggle:hover span{background:var(--or);}
.nav-toggle:hover span:nth-child(2){width:100%;}
.nav-toggle.open span{background:var(--or);}
.nav-toggle.open span:nth-child(1){top:9px; width:100%; transform:rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0; width:0;}
.nav-toggle.open span:nth-child(3){top:9px; width:100%; transform:rotate(-45deg);}

@media (max-width:1023px){
  .nav-links{
    position:fixed; inset:var(--header-h,76px) 0 0 0; height:calc(100vh - var(--header-h,76px));
    background:linear-gradient(165deg, #141414, #0a0a0a);
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    padding:38px 30px 30px;
    gap:0; font-size:1rem;
    transform:translateX(100%); transition:transform .55s cubic-bezier(.19,1,.22,1);
    overflow-y:auto;
    counter-reset:navlink;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{
    counter-increment:navlink;
    display:flex; align-items:center; gap:16px;
    font-family:var(--ff-display); font-size:clamp(1.7rem,7vw,2.3rem); font-weight:600;
    text-transform:none; letter-spacing:0; color:var(--blanc);
    padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1);
    opacity:0; transform:translateX(28px);
    transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
  }
  .nav-links a::before{
    content:counter(navlink,decimal-leading-zero);
    font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.05em;
    color:var(--or); opacity:.75;
  }
  .nav-links a::after{display:none;}
  .nav-links a:hover, .nav-links a.active{color:var(--or-clair); padding-left:6px;}
  .nav-links.open a{opacity:1; transform:translateX(0);}
  .nav-links.open a:nth-child(1){transition-delay:.08s;}
  .nav-links.open a:nth-child(2){transition-delay:.13s;}
  .nav-links.open a:nth-child(3){transition-delay:.18s;}
  .nav-links.open a:nth-child(4){transition-delay:.23s;}
  .nav-links.open a:nth-child(5){transition-delay:.28s;}
  .nav-links.open a:nth-child(6){transition-delay:.33s;}
  .nav-links.open a:nth-child(7){transition-delay:.38s;}
  .nav-links.open a:nth-child(8){transition-delay:.43s;}
  .nav-links__foot{
    margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:18px;
    opacity:0; transition:opacity .6s var(--ease) .5s;
  }
  .nav-links.open .nav-links__foot{opacity:1;}
  .nav-links__social{display:flex; gap:12px;}
  .nav-links__social a{
    width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
    display:flex; align-items:center; justify-content:center; color:var(--blanc); transition:all .3s;
  }
  .nav-links__social a:hover{background:var(--or); border-color:var(--or); color:var(--noir);}
  .nav-links__social svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6;}
  .nav-links__contact{font-family:var(--ff-mono); font-size:.74rem; color:rgba(255,255,255,.55); letter-spacing:.04em;}
  .nav-links__contact a{color:var(--or-clair);}
  .nav-toggle{display:block;}
  .navbar__tools .search-inline{display:none;}
}
@media (min-width:1024px){ .nav-links__foot{display:none;} }

/* ---------- Search (navbar — pill + bouton rond) ---------- */
.search-inline{
  position:relative; display:flex; align-items:center;
  border:1px solid var(--line); border-radius:999px; background:var(--blanc);
  padding-left:14px; transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.search-inline:focus-within{border-color:var(--or); box-shadow:0 0 0 4px rgba(212,175,55,.15);}
.search-inline svg.search-inline__icon{width:14px; height:14px; stroke:var(--gris); fill:none; stroke-width:2; flex-shrink:0; transition:stroke .3s var(--ease);}
.search-inline:focus-within svg.search-inline__icon{stroke:var(--or);}
.search-inline input{
  width:150px; padding:9px 6px; border:none; background:transparent; font-size:.82rem;
  transition:width .4s var(--ease);
}
.search-inline:focus-within input{width:196px;}
.search-inline__btn{
  width:28px; height:28px; margin:3px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--noir); color:var(--blanc);
  transition:background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.search-inline__btn:hover{background:var(--or); color:var(--noir); transform:scale(1.08);}
.search-inline__btn:active{transform:scale(.9);}
.search-inline__btn svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2;}

/* ---------- Search panel (pages boutique) — grand format ---------- */
.search-panel{margin-bottom:34px;}
.search-panel__form{
  position:relative; display:flex; align-items:center;
  background:var(--blanc); border:1px solid var(--line); border-radius:999px;
  padding:6px 6px 6px 22px;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .2s var(--ease);
}
.search-panel__form:focus-within{
  border-color:var(--or);
  box-shadow:0 0 0 5px rgba(212,175,55,.14), 0 16px 36px rgba(15,15,15,.08);
}
.search-panel__icon{width:18px; height:18px; stroke:var(--gris); fill:none; stroke-width:1.8; flex-shrink:0; transition:stroke .3s var(--ease);}
.search-panel__form:focus-within .search-panel__icon{stroke:var(--or); animation:aux-search-pulse .5s var(--ease);}
@keyframes aux-search-pulse{ 0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);} }
.search-panel__input{flex:1; min-width:0; border:none; background:transparent; padding:13px 12px; font-size:.95rem;}
.search-panel__clear{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--gris);
  opacity:0; transform:scale(.6) rotate(-45deg); pointer-events:none;
  transition:all .3s var(--ease);
}
.search-panel__clear.show{opacity:1; transform:scale(1) rotate(0deg); pointer-events:auto;}
.search-panel__clear:hover{background:rgba(15,15,15,.06); color:var(--noir);}
.search-panel__clear svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2;}
.search-panel__submit{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  background:var(--noir); color:var(--blanc); border-radius:999px; padding:13px 24px;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.search-panel__submit:hover{background:var(--or); color:var(--noir);}
.search-panel__submit:active{transform:scale(.96);}
.search-panel__submit svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2;}
@media (max-width:600px){
  .search-panel__submit span{display:none;}
  .search-panel__submit{padding:0; width:44px; height:44px; justify-content:center;}
  .search-panel__input{font-size:.88rem;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:flex-end;
  color:var(--blanc);
  overflow:hidden;
}
.hero__bg{position:absolute; inset:0; z-index:0;}
.hero__bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation:hero-zoom 14s ease-out forwards;}
@keyframes hero-zoom{to{transform:scale(1);}}
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,15,15,.15) 0%, rgba(15,15,15,.35) 55%, rgba(15,15,15,.88) 100%);
}
.hero__content{position:relative; z-index:1; padding:0 0 90px;}
.hero__content .eyebrow{color:var(--or-clair);}
.hero__content .eyebrow::before{background:var(--or-clair);}
.hero h1{margin:20px 0 24px; max-width:820px; opacity:0; animation:rise .9s .2s var(--ease) forwards;}
.hero p.lead{max-width:480px; color:rgba(255,255,255,.82); margin-bottom:36px; opacity:0; animation:rise .9s .4s var(--ease) forwards;}
.hero__actions{display:flex; gap:16px; flex-wrap:wrap; opacity:0; animation:rise .9s .6s var(--ease) forwards;}
@keyframes rise{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);}}
.hero__scroll{
  position:absolute; right:32px; bottom:36px; z-index:1;
  writing-mode:vertical-rl; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.2em;
  color:rgba(255,255,255,.7); display:flex; align-items:center; gap:14px;
}
.hero__scroll::after{content:''; width:1px; height:50px; background:linear-gradient(var(--or), transparent);}

/* Smaller page hero — centré, même esprit que le hero de l'accueil */
.page-hero{
  position:relative; min-height:56vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--blanc); overflow:hidden;
}
.page-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.06); animation:hero-zoom 12s ease-out forwards;}
.page-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,15,15,.45) 0%, rgba(15,15,15,.35) 40%, rgba(15,15,15,.82) 100%); z-index:0;}
.page-hero__content{
  position:relative; z-index:1; padding:56px 20px;
  display:flex; flex-direction:column; align-items:center;
  max-width:760px; margin:0 auto;
}
.page-hero .eyebrow{justify-content:center;}
.page-hero h1{margin:16px 0 0;}
.breadcrumb{
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.65); margin-bottom:14px;
}
.breadcrumb span{color:var(--or-clair);}

/* Bas de hero en forme de vague (au lieu d'une coupe horizontale nette) */
.page-hero__wave{
  position:absolute; left:-1%; right:-1%; bottom:-1px; z-index:1;
  width:102%; height:clamp(34px,8vw,86px); line-height:0; pointer-events:none;
}
.page-hero__wave svg{width:100%; height:100%; display:block;}
.page-hero__wave path{fill:var(--blanc);}

/* ---------- Section scaffolding ---------- */
section{padding:110px 0;}
@media (max-width:768px){ section{padding:70px 0;} }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:56px; flex-wrap:wrap;
}
.section-head h2{margin-top:14px;}
.reveal{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Category cards ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--noir);}
.cat-card{position:relative; aspect-ratio:3/4; overflow:hidden; display:flex; align-items:flex-end; color:var(--blanc);}
.cat-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.cat-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(15,15,15,.85));}
.cat-card:hover img{transform:scale(1.09);}
.cat-card__label{position:relative; z-index:1; padding:26px; width:100%; display:flex; justify-content:space-between; align-items:center;}
.cat-card__label h3{font-family:var(--ff-display);}
.cat-card__label svg{width:20px; height:20px; stroke:var(--or-clair); fill:none; stroke-width:1.6; transition:transform .4s var(--ease);}
.cat-card:hover .cat-card__label svg{transform:translateX(6px);}
@media (max-width:1023px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:767px){ .cat-grid{grid-template-columns:1fr;} }

/* ---------- Product grid (style marketplace: dense, badges, prix) ---------- */
.product-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-bottom:36px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.chip-row{display:flex; gap:10px; flex-wrap:wrap;}
.chip{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--line); border-radius:20px; transition:all .3s;
}
.chip:hover, .chip.active{background:var(--noir); color:var(--blanc); border-color:var(--noir);}
.sort-select{
  border:1px solid var(--line); padding:9px 14px; border-radius:20px; font-size:.8rem; background:var(--blanc);
}

.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
@media (max-width:1023px){ .product-grid{grid-template-columns:repeat(3,1fr); gap:18px;} }
@media (max-width:767px){ .product-grid{grid-template-columns:repeat(2,1fr); gap:12px;} }
@media (max-width:374px){ .product-grid{gap:9px;} }

.product-card{position:relative;}
.product-card__img{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--gris-clair);}
.product-card__img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.product-card:hover .product-card__img img{transform:scale(1.06);}
.product-badges{position:absolute; top:10px; left:10px; z-index:2; display:flex; flex-direction:column; gap:6px;}
.product-badges:empty{display:none;}
.badge{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:2px;
}
.badge.new{background:var(--noir); color:var(--blanc);}
.badge.promo{background:var(--or); color:var(--noir);}
.badge.stock{background:var(--blanc); color:var(--noir); border:1px solid var(--line);}
.fav-toggle{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s;
}
.fav-toggle:hover{transform:scale(1.1);}
.fav-toggle svg{width:16px; height:16px; stroke:var(--noir); fill:none; stroke-width:1.6; transition:.25s;}
.fav-toggle.active svg{fill:var(--or); stroke:var(--or);}
.quick-add{
  position:absolute; left:10px; right:10px; bottom:-46px; z-index:2;
  background:var(--noir); color:var(--blanc);
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  padding:11px; text-align:center; transition:bottom .35s var(--ease);
}
.product-card:hover .quick-add{bottom:10px;}
.quick-add{transition:background .35s var(--ease), color .35s var(--ease), bottom .35s var(--ease);}
.quick-add.added{background:var(--or); color:var(--noir);}
.product-card__img img[data-open-product]{cursor:pointer;}
.product-card__info{padding:16px 2px 0;}
.product-card__cat{font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris);}
.product-card__name{font-size:.95rem; font-weight:600; margin:5px 0 8px; overflow-wrap:break-word;}
.product-card__price{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:.9rem;}
.price-old{color:var(--gris); text-decoration:line-through; font-size:.78rem;}
.price-new{color:var(--noir); font-weight:700;}
.price-promo{color:var(--or-dim); font-weight:700;}
.stars{display:flex; align-items:center; gap:2px; margin-top:6px;}
.stars svg{width:12px; height:12px; fill:var(--line); stroke:none;}
.stars svg.is-filled{fill:var(--or);}
.stars__count{font-family:var(--ff-mono); font-size:.68rem; color:var(--gris); margin-left:5px;}

/* ---------- Marquee / promo banner ---------- */
.promo-banner{
  background:linear-gradient(90deg, var(--noir), #1c1a12, var(--noir));
  color:var(--blanc); overflow:hidden;
  padding:24px 0;
  border-top:1px solid rgba(212,175,55,.35);
  border-bottom:1px solid rgba(212,175,55,.35);
  position:relative;
}
.marquee{display:flex; width:max-content; white-space:nowrap; animation:marquee 26s linear infinite;}
.marquee span{
  font-family:var(--ff-display); font-size:clamp(1.2rem,3vw,2rem); font-weight:500;
  padding:0 34px; display:flex; align-items:center; gap:16px;
  letter-spacing:.01em;
}
.marquee span::after{
  content:'✦'; color:var(--or); font-size:.7em; opacity:.7;
}
.marquee span em{color:var(--or-clair); font-style:normal;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Testimonials ---------- */
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:860px){ .review-grid{grid-template-columns:1fr;} }
.review-card{
  padding:32px; border:1px solid var(--line); border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(245,244,241,.5));
  backdrop-filter:blur(10px);
}
.review-card .stars{margin-bottom:16px;}
.review-card p{font-style:italic; margin-bottom:20px;}
.review-author{display:flex; align-items:center; gap:12px;}
.review-avatar{width:42px; height:42px; border-radius:50%; overflow:hidden;}
.review-avatar img{width:100%; height:100%; object-fit:cover;}
.review-name{font-weight:700; font-size:.88rem;}
.review-loc{font-size:.76rem; color:var(--gris);}

/* ---------- USP strip ---------- */
.usp-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.usp-item{
  padding:34px 24px; text-align:center; border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.usp-item:last-child{border-right:none;}
.usp-item svg{width:26px; height:26px; stroke:var(--or); fill:none; stroke-width:1.4;}
.usp-item h4{font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; font-family:var(--ff-mono); font-weight:700;}
.usp-item p{font-size:.8rem; margin:0;}
@media (max-width:860px){ .usp-strip{grid-template-columns:repeat(2,1fr);} .usp-item{border-bottom:1px solid var(--line);} }

/* ---------- Newsletter ---------- */
.newsletter{
  background:var(--noir); color:var(--blanc); text-align:center; position:relative; overflow:hidden;
}
.newsletter::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(212,175,55,.18), transparent 60%);
}
.newsletter__inner{position:relative; max-width:600px; margin:0 auto;}
.newsletter .eyebrow{color:var(--or-clair); justify-content:center;}
.newsletter h2{margin:18px 0 16px;}
.newsletter p{color:rgba(255,255,255,.7); margin-bottom:36px;}
.newsletter-form{display:flex; gap:10px; max-width:440px; margin:0 auto;}
.newsletter-form input{
  flex:1; padding:15px 18px; background:transparent; border:1px solid var(--line-inv); color:var(--blanc); border-radius:2px;
}
.newsletter-form input::placeholder{color:rgba(255,255,255,.5);}
.newsletter-form input:focus{border-color:var(--or);}
@media (max-width:560px){ .newsletter-form{flex-direction:column;} }

/* ---------- Footer ---------- */
footer{background:var(--gris-clair); padding-top:80px;}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:60px;
}
@media (max-width:960px){ .footer-grid{grid-template-columns:repeat(2,1fr);} }
.footer-brand .logo{margin-bottom:16px;}
.footer-brand p{max-width:260px; font-size:.88rem;}
.social-row{display:flex; gap:12px; margin-top:20px;}
.social-row a{
  width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.social-row a:hover{background:var(--noir); border-color:var(--noir); color:var(--blanc);}
.social-row svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6;}
.footer-col h4{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:20px; color:var(--gris-fonce);
}
.footer-col ul{display:flex; flex-direction:column; gap:12px;}
.footer-col a{font-size:.88rem; color:var(--noir); transition:color .3s;}
.footer-col a:hover{color:var(--or-dim);}
.pay-icons{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.pay-icons span{
  font-family:var(--ff-mono); font-size:.62rem; padding:6px 9px; border:1px solid var(--line); border-radius:3px; background:var(--blanc);
}
.footer-bottom{
  border-top:1px solid var(--line); padding:22px 0; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--gris);
  font-family:var(--ff-mono);
}
.footer-bottom .legal-links{display:flex; gap:20px;}

/* ---------- Cart / Favorites drawer ---------- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(15,15,15,.5); z-index:400;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease);
}
.drawer-overlay.open{opacity:1; visibility:visible;}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--blanc); z-index:401;
  transform:translateX(100%); transition:transform .45s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.open{transform:translateX(0);}
.drawer__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 26px 20px; border-bottom:1px solid var(--line);
}
.drawer{overflow-x:hidden;}
.drawer__close svg{width:20px; height:20px; stroke:var(--noir); fill:none; stroke-width:1.6;}
.drawer__body{flex:1; overflow-y:auto; overflow-x:hidden; padding:20px 26px; -webkit-overflow-scrolling:touch;}
.drawer__empty{color:var(--gris); font-size:.9rem; text-align:center; padding:60px 0;}
.drawer-item{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); max-width:100%;}
.drawer-item img{width:64px; height:80px; object-fit:cover; border-radius:var(--radius-sm,8px); flex-shrink:0;}
.drawer-item__info{flex:1; min-width:0;}
.drawer-item__info h5{font-size:.86rem; margin-bottom:4px; overflow-wrap:break-word; word-break:break-word;}
.drawer-item__info span{font-family:var(--ff-mono); font-size:.78rem; color:var(--gris);}
.drawer-item__variant{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-family:var(--ff-mono); font-size:.72rem; color:var(--gris-fonce); margin:2px 0 6px;
}
.drawer-item__swatch{width:10px; height:10px; border-radius:50%; border:1px solid var(--line); flex-shrink:0;}
.drawer-item__dot{color:var(--gris); margin:0 2px;}
.drawer-item__price{display:block; margin-bottom:10px;}
.drawer-item__row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.qty-control{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:20px; padding:4px 6px; flex-shrink:0;}
.qty-btn{
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-size:.9rem; color:var(--noir); transition:all .2s;
}
.qty-btn:hover{background:var(--noir); color:var(--blanc);}
.qty-value{font-family:var(--ff-mono); font-size:.82rem; min-width:14px; text-align:center;}
.drawer-item__trash{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; border-radius:50%; color:#b23b3b;
  transition:background .25s, color .25s, transform .2s;
}
.drawer-item__trash:hover{background:rgba(178,59,59,.12); transform:scale(1.06);}
.drawer-item__trash:active{transform:scale(.92);}
.drawer-item__trash svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.drawer__checkout-fields{padding:4px 26px 0; display:flex; flex-direction:column; gap:12px; max-width:100%;}
.drawer__checkout-fields input{
  width:100%; max-width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius-sm,8px);
  font-size:.88rem; transition:border-color .3s;
}
.drawer__checkout-fields input:focus{border-color:var(--or);}
.drawer__checkout-fields input.field-error{border-color:#c0392b; animation:aux-shake .4s;}
@keyframes aux-shake{ 20%,60%{transform:translateX(-4px);} 40%,80%{transform:translateX(4px);} }
.js-cart-whatsapp{display:flex; align-items:center; justify-content:center; gap:10px;}
.drawer__foot{padding:20px 26px; border-top:1px solid var(--line);}
@media (max-width:374px){
  .drawer__body{padding:18px 16px;}
  .drawer__checkout-fields{padding:4px 16px 0;}
  .drawer__foot{padding:16px 16px;}
  .drawer-item img{width:54px; height:68px;}
  .drawer-item{gap:10px;}
  .qty-control{padding:3px 4px; gap:6px;}
}

/* ---------- Misc pages: about / contact ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:36px;} }
.split img{border-radius:4px; width:100%; aspect-ratio:4/5; object-fit:cover;}
.stat-row{display:flex; gap:44px; margin-top:36px; flex-wrap:wrap;}
.stat-row div strong{display:block; font-family:var(--ff-display); font-size:2rem; color:var(--or-dim);}
.stat-row div span{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gris);}

.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);}
.value-card{background:var(--blanc); padding:44px 34px;}
.value-card svg{width:28px; height:28px; stroke:var(--or); fill:none; stroke-width:1.4; margin-bottom:18px;}
@media (max-width:860px){ .value-grid{grid-template-columns:1fr;} }

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
@media (max-width:520px){ .form-row{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.field label{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-fonce);}
.field input, .field select, .field textarea{
  padding:14px 16px; border:1px solid var(--line); border-radius:2px; transition:border-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--or);}
.contact-info-card{background:var(--noir); color:var(--blanc); padding:44px; border-radius:4px;}
.contact-info-row{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-inv);}
.contact-info-row:last-of-type{border-bottom:none;}
.contact-info-row svg{width:20px; height:20px; stroke:var(--or); fill:none; stroke-width:1.5; flex-shrink:0;}
.contact-info-row h5{font-size:.86rem; margin-bottom:4px;}
.contact-info-row span{font-size:.84rem; color:rgba(255,255,255,.65);}
.map-embed{width:100%; aspect-ratio:16/10; border:0; margin-top:26px; filter:grayscale(1) contrast(1.1);}

.promo-hero{
  background:var(--noir); color:var(--blanc); text-align:center; padding:90px 0 70px; position:relative; overflow:hidden;
}
.promo-hero::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0, rgba(212,175,55,.18), transparent 55%);}
.countdown{display:flex; gap:16px; justify-content:center; margin-top:36px; position:relative;}
.countdown__box{
  background:rgba(255,255,255,.06); border:1px solid var(--line-inv); border-radius:4px;
  padding:18px 20px; min-width:78px; text-align:center;
}
.countdown__box strong{display:block; font-family:var(--ff-display); font-size:2rem; color:var(--or-clair);}
.countdown__box span{font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6);}

.filter-bar{
  display:flex; gap:24px; flex-wrap:wrap; padding:24px; background:var(--gris-clair); border-radius:4px; margin-bottom:40px;
}
.filter-group{display:flex; flex-direction:column; gap:8px; flex:1 1 180px; min-width:150px;}
.filter-group label{font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-fonce);}
.swatches{display:flex; gap:8px;}
.swatch{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  padding:0; background-clip:padding-box; transition:transform .2s, outline-color .2s; flex-shrink:0;
}
.swatch:hover{transform:scale(1.08);}
.swatch.active{outline:2px solid var(--or); outline-offset:2px;}

/* Pagination */
.pagination{display:flex; justify-content:center; gap:8px; margin-top:56px;}
.pagination a{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); font-family:var(--ff-mono); font-size:.78rem; border-radius:50%; transition:all .3s;
}
.pagination a.active, .pagination a:hover{background:var(--noir); color:var(--blanc); border-color:var(--noir);}

[data-i18n], [data-i18n-ph]{transition:opacity .2s;}

/* =========================================================
   AuxiFashion v2 — Mobile-first responsive system
   Breakpoints testés : 320 / 375 / 425 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================= */

/* ---------- Global overflow safety ---------- */
html, body{max-width:100%; overflow-x:hidden;}
* {min-width:0;}
img, video, svg{max-width:100%; height:auto;}
.container{width:100%;}

/* Fluid container width across very large screens */
@media (min-width:1440px){ .container{max-width:1400px;} }
@media (min-width:1920px){ .container{max-width:1600px; padding:0 48px;} }

/* Fluid section rhythm */
section{padding:clamp(52px,9vw,110px) 0;}

/* ---------- HERO CAROUSEL ---------- */
.hero{
  min-height:calc(100svh - var(--header-h, 76px));
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding-top:0; padding-bottom:0;
}
.hero__bg{position:absolute; inset:0; z-index:0;}
.hero__slide{position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease);}
.hero__slide.active{opacity:1;}
.hero__slide img{width:100%; height:100%; object-fit:cover;}
.hero__slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,15,15,.55) 0%, rgba(15,15,15,.25) 35%, rgba(15,15,15,.75) 100%);
}
.hero__content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  max-width:820px; margin:0 auto; padding:0 20px;
}
.hero__content .eyebrow{justify-content:center;}
.hero h1{margin:18px 0 20px;}
.hero p.lead{max-width:520px; margin:0 auto 30px; text-align:center;}
.hero__actions{justify-content:center;}
.hero__scroll{display:none;}
.hero__dots{
  position:absolute; z-index:2; bottom:clamp(18px,4vh,40px); left:50%; transform:translateX(-50%);
  display:flex; gap:10px;
}
.hero__dot{
  width:26px; height:3px; background:rgba(255,255,255,.35); border-radius:2px; transition:all .35s var(--ease); cursor:pointer;
}
.hero__dot.active{background:var(--or);}
.hero__credit{
  position:absolute; z-index:2; right:14px; bottom:14px;
  font-family:var(--ff-mono); font-size:.62rem; color:rgba(255,255,255,.55);
}
.hero__credit a{color:rgba(255,255,255,.75); text-decoration:underline; text-underline-offset:2px;}

@media (min-width:768px){
  .hero h1{max-width:700px;}
}
@media (min-width:1024px){
  .hero{min-height:calc(100vh - var(--header-h, 76px)); padding-top:0;}
}

/* ---------- Generic horizontal carousel (scroll-snap) ---------- */
.carousel{position:relative;}
.carousel__track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 18px; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--or) transparent;
}
.carousel__track::-webkit-scrollbar{height:5px;}
.carousel__track::-webkit-scrollbar-thumb{background:var(--or); border-radius:6px;}
.carousel__track > *{scroll-snap-align:start; flex:0 0 auto;}
.carousel__nav{
  display:flex; gap:10px;
}
.carousel__btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:all .3s;
  flex-shrink:0;
}
.carousel__btn:hover{background:var(--noir); border-color:var(--noir); color:var(--blanc);}
.carousel__btn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7;}

/* Category carousel: peek cards on mobile/tablet, grid on desktop */
.cat-carousel-track{
  display:flex; gap:2px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding-bottom:4px;
}
.cat-carousel-track::-webkit-scrollbar{display:none;}
.cat-carousel-track .cat-card{
  scroll-snap-align:start; flex:0 0 78%; aspect-ratio:3/4;
}
@media (min-width:425px){ .cat-carousel-track .cat-card{flex:0 0 62%;} }
@media (min-width:768px){ .cat-carousel-track .cat-card{flex:0 0 42%;} }
@media (min-width:1024px){
  .cat-carousel-track{overflow:visible; display:grid; grid-template-columns:repeat(4,1fr);}
  .cat-carousel-track .cat-card{flex:none;}
}

/* Product carousel (manual, non-animated — arrows + swipe only) */
.product-carousel-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:4px 4px 22px;
}
.product-carousel-track::-webkit-scrollbar{height:5px;}
.product-carousel-track::-webkit-scrollbar-thumb{background:var(--or); border-radius:6px;}
.product-carousel-track .product-card{
  scroll-snap-align:start; flex:0 0 68%;
}
@media (min-width:425px){ .product-carousel-track .product-card{flex:0 0 52%;} }
@media (min-width:768px){ .product-carousel-track .product-card{flex:0 0 32%;} }
@media (min-width:1024px){ .product-carousel-track .product-card{flex:0 0 23.5%;} }

/* ---------- Auto-scrolling image gallery (gauche → droite, animée) ---------- */
.img-marquee{overflow:hidden; padding:0;}
.img-marquee__track{
  display:flex; gap:14px; width:max-content;
  animation:img-marquee-scroll 32s linear infinite;
}
.img-marquee:hover .img-marquee__track{animation-play-state:paused;}
.img-marquee__track img{
  width:clamp(160px,26vw,300px); height:clamp(200px,32vw,380px); object-fit:cover; border-radius:2px;
  flex-shrink:0;
}
@keyframes img-marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Filter drawer trigger (mobile) ---------- */
.filter-toggle{
  display:none;
  align-items:center; gap:10px;
  width:100%; justify-content:center;
  padding:15px 20px; border:1px solid var(--noir); border-radius:2px;
  font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:22px;
}
.filter-toggle svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6;}
.filter-bar__head, .filter-bar__apply{display:none;}
@media (max-width:767px){
  .filter-toggle{display:flex;}
  .filter-bar{
    position:fixed; inset:auto 0 0 0; z-index:410;
    background:var(--blanc); border-radius:14px 14px 0 0;
    padding:22px 20px calc(22px + env(safe-area-inset-bottom));
    transform:translateY(110%); transition:transform .4s var(--ease);
    max-height:80vh; overflow-y:auto;
    box-shadow:0 -20px 50px rgba(0,0,0,.25);
    flex-direction:column; gap:22px;
  }
  .filter-bar .filter-group{flex:none; min-width:0;}
  .filter-bar.open{transform:translateY(0);}
  .filter-bar__head{display:flex; justify-content:space-between; align-items:center;}
  .filter-bar__head .drawer__close{display:block;}
  .filter-bar__apply{display:block; width:100%;}
}

/* ---------- Buttons: bigger touch targets on mobile ---------- */
@media (max-width:767px){
  .btn{width:100%; padding:16px 22px; font-size:.8rem;}
  .hero__actions{flex-direction:column; width:100%;}
  .hero__actions .btn{width:100%;}
  .product-toolbar .btn, .chip, .sort-select{width:auto;}
  .quick-add{font-size:.62rem;}
}

/* ---------- Footer accordion (mobile) ---------- */
@media (max-width:767px){
  .footer-grid{grid-template-columns:1fr; gap:0;}
  .footer-brand{padding-bottom:26px; margin-bottom:6px; border-bottom:1px solid var(--line);}
  .footer-col{border-bottom:1px solid var(--line);}
  .footer-col summary{
    list-style:none; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 0; margin-bottom:0;
  }
  .footer-col summary::-webkit-details-marker{display:none;}
  .footer-col summary::after{
    content:'+'; font-family:var(--ff-mono); font-size:1.1rem; color:var(--or-dim); transition:transform .3s;
  }
  .footer-col[open] summary::after{content:'–';}
  .footer-col ul{padding-bottom:18px; gap:14px;}
}
@media (min-width:768px){
  .footer-col summary{pointer-events:none; margin-bottom:20px; padding:0;}
  .footer-col summary::after{display:none;}
}

/* ---------- Precise breakpoint refinements ---------- */

/* Header mobile-first : le logo et les outils ne débordent plus jamais */
.navbar__inner{gap:10px;}
.logo{font-size:clamp(1.15rem,4.6vw,1.5rem); white-space:nowrap; flex-shrink:0;}
.navbar__tools{gap:8px; flex-shrink:0;}
.lang-btn span.lang-btn__code{display:inline;}
@media (max-width:767px){
  :root{ --header-h:66px; }
  .navbar__inner{height:66px; gap:6px;}
  .logo{font-size:clamp(1.3rem,6vw,1.5rem);}
  .navbar__tools{gap:6px;}
  .navbar__tools .lang-switch{display:none;} /* langue déplacée dans le menu hamburger */
  .tool-btn{width:42px; height:42px;}
  .tool-btn svg{width:21px; height:21px;}
  .badge-count{width:18px; height:18px; font-size:.64rem; top:-3px; right:-3px;}
  .nav-toggle{width:28px; height:20px; margin-left:0;}
}
@media (max-width:374px){
  .navbar__inner{gap:2px;}
  .tool-btn{width:40px; height:40px;}
}

/* Sélecteur de langue déplacé dans le menu hamburger (mobile) */
.nav-links__langs{
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1);
}
.nav-links__langs .lang-option{
  color:rgba(255,255,255,.8); padding:13px 4px; border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.08); font-size:.9rem;
}
.nav-links__langs .lang-option:last-child{border-bottom:none;}
.nav-links__langs .lang-option:hover{background:rgba(255,255,255,.06);}
.nav-links__langs .lang-option.active{color:var(--or-clair); font-weight:700;}
.nav-links__langs .lang-option small{color:rgba(255,255,255,.4);}
@media (min-width:1024px){ .nav-links__langs{display:none;} }

/* ---------- Audit petits appareils : cartes, filtres, vague de hero ---------- */
@media (max-width:767px){
  .value-card{padding:34px 22px;}
  .contact-info-card{padding:30px 24px;}
  .contact-info-row{gap:12px;}
  .filter-bar{padding:22px 18px calc(22px + env(safe-area-inset-bottom));}
  .swatches{flex-wrap:wrap;}
  .page-hero__wave{height:clamp(24px,7vw,50px);}
}
@media (max-width:374px){
  .value-card{padding:28px 18px;}
  .contact-info-card{padding:24px 18px;}
  .swatch{width:24px; height:24px;}
  .chip{padding:8px 13px; font-size:.68rem;}
}


@media (max-width:374px){
  :root{ --header-h:60px; }
  .container{padding:0 14px;}
  h1{font-size:2rem;}
  h2{font-size:1.7rem;}
  .btn{padding:14px 18px; font-size:.7rem;}
  .navbar__inner{height:60px;}
  .countdown{gap:8px;}
  .countdown__box{min-width:60px; padding:12px 10px;}
  .countdown__box strong{font-size:1.4rem;}
}
/* 375–424 */
@media (min-width:375px) and (max-width:424px){
  .container{padding:0 16px;}
}
/* 425–767 : mobile large */
@media (min-width:425px) and (max-width:767px){
  .container{padding:0 22px;}
}
/* 768–1023 : tablette */
@media (min-width:768px) and (max-width:1023px){
  .container{padding:0 28px;}
  .split, .contact-grid{grid-template-columns:1fr; gap:44px;}
  .value-grid{grid-template-columns:repeat(3,1fr);}
}
/* 1024–1279 : petit desktop */
@media (min-width:1024px) and (max-width:1279px){
  .product-grid{grid-template-columns:repeat(4,1fr);}
}
/* 1280–1439 : desktop confort */
@media (min-width:1280px){
  .product-grid{grid-template-columns:repeat(4,1fr);}
}
/* 1440+ : grand écran */
@media (min-width:1440px){
  h1{font-size:clamp(3.4rem,5.2vw,5.6rem);}
}

/* =========================================================
   AuxiFashion v3 — Glass nav adaptif, coins arrondis, micro-interactions
   ========================================================= */

/* ---------- Verrouillage du scroll (menu mobile / tiroirs ouverts) ---------- */
html.aux-lock, html.aux-lock body{overflow:hidden; height:100%;}

/* ---------- Navbar : blanc, glass léger, TOUJOURS visible (position fixed) ----------
   position:fixed est utilisé plutôt que sticky : plus fiable, insensible aux
   éventuels effets de bord d'un ancêtre avec overflow (ex. overflow-x:hidden),
   qui peuvent désactiver "sticky" dans certains navigateurs. */
body{padding-top:var(--header-h, 76px);}
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:250;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 18px rgba(15,15,15,.09);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
.navbar.scrolled{
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 34px rgba(15,15,15,.12);
}
.navbar .logo{color:var(--noir);}
.navbar .logo em{color:var(--or);}
@media (min-width:1024px){
  .navbar .nav-links a{color:var(--noir);}
  .navbar .nav-links a::after{background:var(--or);}
}
.navbar .tool-btn svg{stroke:var(--noir); stroke-width:2;}
.navbar .search-inline svg.search-inline__icon, .navbar .lang-btn svg{stroke-width:2;}
.navbar .tool-btn:hover{background:rgba(15,15,15,.06);}
.navbar .lang-btn{color:var(--noir); border-color:var(--line);}
.navbar .search-inline input{color:var(--noir);}
.navbar .search-inline input::placeholder{color:var(--gris);}
.navbar .nav-toggle span{background:var(--noir);}
.badge-count{box-shadow:0 0 0 2px var(--blanc);}

/* ---------- Coins arrondis + transitions enrichies pour les visuels ---------- */
:root{ --radius-sm:8px; --radius-md:14px; --radius-lg:22px; }

.product-card__img{border-radius:var(--radius-md); overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04);}
.product-card{transition:transform .5s var(--ease);}
.product-card:hover{transform:translateY(-6px);}
.product-card:hover .product-card__img{box-shadow:0 22px 46px -18px rgba(15,15,15,.35);}
.product-card__img img{transition:transform .8s var(--ease), filter .8s var(--ease);}
.product-card:hover .product-card__img img{transform:scale(1.08); filter:saturate(1.08);}
.fav-toggle{transition:transform .35s var(--ease), background .3s;}
.fav-toggle:hover{transform:scale(1.14) rotate(-4deg);}
.fav-toggle.pop{animation:aux-fav-pop .55s var(--ease);}
@keyframes aux-fav-pop{
  0%{transform:scale(1);}
  35%{transform:scale(1.5) rotate(-8deg);}
  60%{transform:scale(.88) rotate(4deg);}
  100%{transform:scale(1) rotate(0);}
}
.fav-toggle.active svg{animation:aux-fav-fill .4s var(--ease);}
@keyframes aux-fav-fill{ from{filter:drop-shadow(0 0 0 rgba(212,175,55,0));} to{filter:drop-shadow(0 0 6px rgba(212,175,55,.6));} }

.cat-card{border-radius:var(--radius-lg); overflow:hidden;}
.cat-card img{transition:transform 1s var(--ease), filter .6s;}
.cat-card:hover img{transform:scale(1.12); filter:brightness(.92);}
.cat-card__label svg{transition:transform .45s var(--ease);}

.drawer-item img{border-radius:var(--radius-sm);}
.review-avatar{border-radius:50%; box-shadow:0 0 0 2px var(--or-dim), 0 0 0 4px var(--blanc);}
.review-card{border-radius:var(--radius-md); transition:transform .5s var(--ease), box-shadow .5s var(--ease);}
.review-card:hover{transform:translateY(-5px); box-shadow:0 24px 46px -26px rgba(15,15,15,.35);}
.value-card{transition:background .4s;}
.value-card:hover{background:var(--gris-clair);}
.contact-info-card{border-radius:var(--radius-md);}
.countdown__box{border-radius:var(--radius-sm); transition:transform .3s;}
.countdown__box:hover{transform:translateY(-3px);}
.chip{border-radius:24px; transition:all .35s var(--ease);}
.btn{border-radius:var(--radius-sm); position:relative; overflow:hidden;}
.btn::after{
  content:''; position:absolute; inset:0; background:rgba(255,255,255,.25);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); pointer-events:none;
}
.btn:hover::after{transform:scaleX(1);}
.btn-outline::after, .btn-outline.inv::after{background:rgba(15,15,15,.06);}

/* ---------- Hero : coin de l'image + transitions de slide plus douces ---------- */
.hero__slide{transition:opacity 1.6s var(--ease), transform 6s linear;}
.hero__slide.active img{animation:aux-hero-kenburns 9s ease-in-out forwards;}
@keyframes aux-hero-kenburns{ from{transform:scale(1.06);} to{transform:scale(1);} }
.hero__credit{transition:opacity .4s;}
@media (max-width:767px){ .hero__credit{display:none;} }

/* ---------- Typewriter (hero) ---------- */
.js-hero-typewriter{position:relative; display:inline-block; min-height:1.2em;}
.js-hero-typewriter::after{
  content:''; display:inline-block; width:2px; height:.95em; margin-left:4px;
  background:var(--or-clair); vertical-align:-2px;
  animation:aux-caret-blink 1s step-end infinite;
}

/* ---------- Galerie « défilement gauche→droite » : carousel plus riche ---------- */
.img-marquee{position:relative; padding:0 0 8px;}
.img-marquee::before, .img-marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:min(120px,10vw); z-index:2; pointer-events:none;
}
.img-marquee::before{left:0; background:linear-gradient(90deg, var(--blanc), transparent);}
.img-marquee::after{right:0; background:linear-gradient(270deg, var(--blanc), transparent);}
.img-marquee__track{animation-duration:38s;}
.img-marquee__track img{
  border-radius:var(--radius-lg);
  box-shadow:0 20px 40px -22px rgba(15,15,15,.35);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), filter .6s var(--ease);
}
.img-marquee__track img:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 30px 54px -20px rgba(15,15,15,.45);
  filter:saturate(1.12);
}

/* ---------- Carousels : coins arrondis + transitions cartes ---------- */
.cat-carousel-track .cat-card, .product-carousel-track .product-card{transition:transform .4s var(--ease);}
.carousel__btn{transition:transform .3s var(--ease), background .3s, border-color .3s;}
.carousel__btn:hover{transform:scale(1.08);}

/* ---------- Animation « voler vers le panier » ---------- */
.aux-flyer{
  position:fixed; z-index:500; object-fit:cover; pointer-events:none;
  border-radius:var(--radius-md);
  box-shadow:0 18px 38px rgba(0,0,0,.28);
  transition:left .62s cubic-bezier(.3,.05,.2,1), top .62s cubic-bezier(.3,.05,.2,1),
             width .62s cubic-bezier(.3,.05,.2,1), height .62s cubic-bezier(.3,.05,.2,1),
             opacity .5s ease .15s, border-radius .5s ease;
}
.tool-btn.bump{animation:aux-bump .5s var(--ease);}
@keyframes aux-bump{
  0%{transform:scale(1);}
  30%{transform:scale(1.28) rotate(-6deg);}
  55%{transform:scale(.92) rotate(4deg);}
  100%{transform:scale(1) rotate(0);}
}
.badge-count{animation:none;}
.js-cart-count, .js-fav-count{transition:transform .3s var(--ease);}

/* ---------- Toast de confirmation ---------- */
.aux-toast{
  position:fixed; left:50%; bottom:28px; z-index:600;
  display:flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:30px;
  background:var(--noir); color:var(--blanc);
  font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.04em;
  box-shadow:0 20px 40px rgba(0,0,0,.3);
  transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.aux-toast.show{transform:translate(-50%, 0); opacity:1;}
.aux-toast svg{width:16px; height:16px; stroke:var(--or-clair); fill:none; stroke-width:2; flex-shrink:0;}

/* ---------- Drawer : transitions plus riches ---------- */
.drawer{transition:transform .5s cubic-bezier(.22,.9,.32,1);}
.drawer-item{animation:aux-fade-in .4s var(--ease) both;}
@keyframes aux-fade-in{ from{opacity:0; transform:translateX(10px);} to{opacity:1; transform:translateX(0);} }
.drawer-overlay{transition:opacity .5s var(--ease), backdrop-filter .5s var(--ease);}
.drawer-overlay.open{backdrop-filter:blur(3px);}

/* ---------- Reveal : easing plus premium ---------- */
.reveal{transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);}

/* ---------- WhatsApp : micro-interaction hover ---------- */

/* ---------- FAQ accordion ---------- */
.faq{display:flex; flex-direction:column; gap:2px; margin-top:20px;}
.faq details{
  background:var(--gris-clair); border-radius:var(--radius-sm); overflow:hidden;
  transition:background .3s;
}
.faq details[open]{background:var(--blanc); box-shadow:0 1px 0 var(--line), 0 20px 40px -30px rgba(15,15,15,.3);}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 24px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-weight:700; font-size:.95rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+'; font-family:var(--ff-mono); font-size:1.2rem; color:var(--or-dim);
  transition:transform .35s var(--ease); flex-shrink:0;
}
.faq details[open] summary::after{transform:rotate(135deg);}
.faq__body{padding:0 24px 22px; color:var(--gris-fonce); font-size:.9rem; line-height:1.7;}

/* =========================================================
   AuxiFashion — Barre de recherche premium (section post-hero)
   Pilule blanche + bouton rond noir, glow or au focus, suggestions live
   ========================================================= */
.searchbar-section{
  padding:clamp(40px,6vw,64px) 0 clamp(28px,4vw,40px);
}
.searchbar-section .section-head{margin-bottom:26px;}
.aux-searchbar{
  position:relative; max-width:720px; margin:0 auto;
}
.aux-searchbar__field{
  position:relative; display:flex; align-items:center;
  background:var(--blanc); border:1px solid var(--line);
  border-radius:999px; padding:6px 6px 6px 26px;
  box-shadow:0 10px 30px rgba(15,15,15,.06);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.aux-searchbar__field:focus-within{
  border-color:var(--or);
  box-shadow:0 0 0 4px rgba(212,175,55,.16), 0 14px 36px rgba(15,15,15,.1);
}
.aux-searchbar__icon{width:18px; height:18px; stroke:var(--gris); fill:none; stroke-width:1.8; flex-shrink:0; transition:stroke .3s;}
.aux-searchbar__field:focus-within .aux-searchbar__icon{stroke:var(--or-dim);}
.aux-searchbar__input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  padding:14px 12px; font-family:var(--ff-body); font-size:1rem; color:var(--noir);
}
.aux-searchbar__input::placeholder{color:var(--gris);}
.aux-searchbar__clear{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--gris);
  opacity:0; transform:scale(.6) rotate(-90deg); pointer-events:none;
  transition:all .3s var(--ease);
}
.aux-searchbar__clear.show{opacity:1; transform:scale(1) rotate(0); pointer-events:auto;}
.aux-searchbar__clear:hover{background:var(--gris-clair); color:var(--noir);}
.aux-searchbar__clear svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2;}
.aux-searchbar__submit{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:var(--noir); color:var(--blanc);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s var(--ease), transform .25s var(--ease), box-shadow .35s var(--ease);
}
.aux-searchbar__submit:hover{background:var(--or); color:var(--noir); box-shadow:0 8px 22px rgba(212,175,55,.4);}
.aux-searchbar__submit:active{transform:scale(.92);}
.aux-searchbar__submit svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2;}

/* Suggestions live */
.aux-searchbar__suggestions{
  position:absolute; left:0; right:0; top:calc(100% + 12px); z-index:60;
  background:var(--blanc); border-radius:var(--radius-md,14px);
  box-shadow:0 24px 60px rgba(15,15,15,.14); border:1px solid var(--line);
  overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all .3s var(--ease);
}
.aux-searchbar__suggestions.open{opacity:1; visibility:visible; transform:translateY(0);}
.aux-suggestion{
  display:flex; align-items:center; gap:14px; padding:12px 20px;
  border-bottom:1px solid var(--line); transition:background .2s;
}
.aux-suggestion:last-child{border-bottom:none;}
.aux-suggestion:hover, .aux-suggestion.is-active{background:var(--gris-clair);}
.aux-suggestion img{width:44px; height:54px; object-fit:cover; border-radius:8px; flex-shrink:0;}
.aux-suggestion__info{flex:1; min-width:0;}
.aux-suggestion__info h6{font-size:.86rem; font-weight:700; margin-bottom:2px; overflow-wrap:break-word;}
.aux-suggestion__info span{font-family:var(--ff-mono); font-size:.76rem; color:var(--gris);}
.aux-suggestion__cat{font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--or-dim);}
.aux-searchbar__empty{padding:22px 20px; text-align:center; color:var(--gris); font-size:.86rem;}
.aux-searchbar__hint{
  text-align:center; margin-top:14px; font-family:var(--ff-mono); font-size:.7rem;
  letter-spacing:.06em; color:var(--gris);
}
.aux-searchbar__hint button{
  color:var(--or-dim); text-decoration:underline; text-underline-offset:2px; margin:0 3px;
  transition:color .2s;
}
.aux-searchbar__hint button:hover{color:var(--or);}

@media (max-width:767px){
  .aux-searchbar__field{padding:5px 5px 5px 20px;}
  .aux-searchbar__input{padding:12px 8px; font-size:.92rem;}
  .aux-searchbar__submit{width:42px; height:42px;}
  .aux-suggestion img{width:38px; height:48px;}
  .aux-suggestion{padding:10px 14px; gap:10px;}
}

/* =========================================================
   AuxiFashion — Fiche produit (quick view modal)
   ========================================================= */
.pdp-overlay{
  position:fixed; inset:0; z-index:520; background:rgba(15,15,15,.6);
  backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease);
}
.pdp-overlay.open{opacity:1; visibility:visible;}
.pdp-modal{
  position:fixed; z-index:521; left:50%; top:50%;
  width:min(1080px,92vw); max-height:88vh;
  transform:translate(-50%,-48%) scale(.97); opacity:0; pointer-events:none;
  background:var(--blanc); border-radius:var(--radius-lg,22px);
  box-shadow:0 40px 100px rgba(0,0,0,.35);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  overflow:hidden;
}
.pdp-modal.open{transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto;}
.pdp-scroll{max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.pdp-close{
  position:absolute; top:18px; right:18px; z-index:5;
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.12); transition:transform .25s, background .25s;
}
.pdp-close:hover{background:var(--noir); transform:rotate(90deg);}
.pdp-close svg{width:16px; height:16px; stroke:var(--noir); fill:none; stroke-width:1.8;}
.pdp-close:hover svg{stroke:var(--blanc);}

/* Barre d'info sticky : nom, catégorie, prix — apparaît au défilement, comme une navigation */
.pdp-stickybar{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 70px 16px 26px; min-height:66px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line); box-shadow:0 8px 24px rgba(15,15,15,.06);
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
  pointer-events:none;
}
.pdp-stickybar.show{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s;
}
.pdp-stickybar__text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.pdp-stickybar__cat{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gris);
}
.pdp-stickybar__name{
  font-family:var(--ff-display); font-weight:600; font-size:1rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pdp-stickybar__price{
  font-family:var(--ff-mono); font-size:.92rem; font-weight:700; flex-shrink:0;
  display:flex; align-items:center; gap:8px;
}
@media (max-width:640px){
  .pdp-stickybar{padding:13px 58px 13px 18px; min-height:56px;}
  .pdp-stickybar__name{font-size:.86rem;}
  .pdp-stickybar__price{font-size:.8rem;}
}

.pdp-top{display:grid; grid-template-columns:1.1fr 1fr; gap:0;}
@media (max-width:860px){ .pdp-top{grid-template-columns:1fr;} }

.pdp-gallery{padding:0; background:var(--gris-clair);}
.pdp-gallery__main{aspect-ratio:4/5; overflow:hidden;}
.pdp-gallery__main img{width:100%; height:100%; object-fit:cover; transition:opacity .3s;}
.pdp-gallery__thumbs{display:flex; gap:10px; padding:14px 20px 20px; overflow-x:auto;}
.pdp-thumb{
  width:60px; height:74px; border-radius:8px; overflow:hidden; flex-shrink:0;
  border:2px solid transparent; opacity:.6; transition:all .25s var(--ease);
}
.pdp-thumb img{width:100%; height:100%; object-fit:cover;}
.pdp-thumb:hover{opacity:1;}
.pdp-thumb.active{border-color:var(--or); opacity:1;}

.pdp-info{padding:38px 40px 30px;}
@media (max-width:640px){ .pdp-info{padding:26px 22px 24px;} }
.pdp-cat{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris);}
.pdp-info h2{font-size:clamp(1.4rem,2.6vw,1.9rem); margin:8px 0 12px;}
.pdp-rating{display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.pdp-stars{display:flex; gap:2px;}
.pdp-stars svg{fill:var(--line); stroke:none;}
.pdp-stars svg.is-filled{fill:var(--or);}
.pdp-rating-num{font-family:var(--ff-mono); font-size:.82rem; font-weight:700;}
.pdp-rating-link{font-family:var(--ff-mono); font-size:.78rem; color:var(--gris); text-decoration:underline; text-underline-offset:2px; transition:color .2s;}
.pdp-rating-link:hover{color:var(--or-dim);}
.pdp-price{font-family:var(--ff-mono); font-size:1.3rem; display:flex; gap:10px; align-items:center; margin-bottom:12px;}
.pdp-badges{display:flex; gap:8px; margin-bottom:20px;}
.pdp-badges:empty{display:none;}

.pdp-option-group{margin-bottom:20px;}
.pdp-option-group label{
  display:block; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gris-fonce); margin-bottom:10px;
}
.pdp-option-group label span{color:var(--noir); font-weight:700; text-transform:none;}
.pdp-colors{display:flex; gap:10px;}
.pdp-color{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  cursor:pointer; position:relative; transition:transform .2s;
}
.pdp-color:hover{transform:scale(1.08);}
.pdp-color.active::after{
  content:''; position:absolute; inset:-4px; border:2px solid var(--or); border-radius:50%;
}
.pdp-sizes{display:flex; gap:8px; flex-wrap:wrap;}
.pdp-sizes--alert{animation:aux-shake .4s;}
.pdp-size{
  min-width:44px; height:40px; padding:0 12px; border:1px solid var(--line); border-radius:8px;
  font-family:var(--ff-mono); font-size:.78rem; transition:all .25s;
}
.pdp-size:hover{border-color:var(--noir);}
.pdp-size.active{background:var(--noir); color:var(--blanc); border-color:var(--noir);}
.pdp-qty-control{width:fit-content;}

.pdp-desc-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; border:1px solid var(--line); border-radius:10px; margin-bottom:0;
  transition:border-color .3s, background .3s;
}
.pdp-desc-toggle:hover{border-color:var(--noir);}
.pdp-desc-toggle.open{border-color:var(--or); background:rgba(212,175,55,.05); border-radius:10px 10px 0 0;}
.pdp-desc-toggle__left{display:flex; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700;}
.pdp-desc-toggle__left svg{width:18px; height:18px; stroke:var(--or-dim); fill:none; stroke-width:1.6;}
.pdp-desc-toggle__chevron{width:16px; height:16px; stroke:var(--gris); fill:none; stroke-width:1.8; transition:transform .35s var(--ease);}
.pdp-desc-toggle.open .pdp-desc-toggle__chevron{transform:rotate(180deg);}
.pdp-desc-panel{
  display:grid; grid-template-rows:0fr; opacity:0;
  border:1px solid var(--line); border-top:none; border-radius:0 0 10px 10px;
  transition:grid-template-rows .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
}
.pdp-desc-panel.open{grid-template-rows:1fr; opacity:1;}
.pdp-desc-inner{grid-row:1; overflow:hidden; min-height:0;}
.pdp-desc-inner p{padding:0 18px; margin-top:16px; margin-bottom:14px; font-size:.9rem;}
.pdp-trust{padding:0 18px;}
.pdp-trust li{
  display:flex; align-items:center; gap:10px; padding:9px 0; font-size:.82rem; color:var(--gris-fonce);
  border-top:1px dashed var(--line);
}
.pdp-trust li:first-child{border-top:none;}
.pdp-trust svg{width:16px; height:16px; stroke:var(--or); fill:none; stroke-width:1.5; flex-shrink:0;}

.pdp-actions{display:flex; gap:12px; margin-top:24px;}
.pdp-fav-full{
  position:static; width:100%; margin-top:12px; padding:14px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid var(--line); border-radius:2px;
  background:transparent; backdrop-filter:none;
  font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  transition:border-color .3s, background .3s;
}
.pdp-fav-full:hover{border-color:var(--noir); background:var(--gris-clair);}
.pdp-fav-full svg{width:17px; height:17px; flex-shrink:0;}
.pdp-fav-full.active{border-color:var(--or); color:var(--or-dim);}

.pdp-reviews{padding:36px 40px;}
@media (max-width:640px){ .pdp-reviews{padding:26px 22px;} }
.pdp-reviews h3{margin-bottom:24px;}
.pdp-reviews__summary{display:flex; gap:40px; align-items:center; margin-bottom:30px; flex-wrap:wrap;}
.pdp-reviews__score-block{text-align:center; flex-shrink:0;}
.pdp-reviews__score{font-family:var(--ff-display); font-size:3rem; font-weight:700; line-height:1;}
.pdp-reviews__stars{display:flex; gap:2px; justify-content:center; margin:8px 0;}
.pdp-reviews__stars svg{fill:var(--line); stroke:none;}
.pdp-reviews__stars svg.is-filled{fill:var(--or);}
.pdp-reviews__count{font-family:var(--ff-mono); font-size:.76rem; color:var(--gris);}
.pdp-reviews__bars{flex:1; min-width:200px; display:flex; flex-direction:column; gap:6px;}
.pdp-bar-row{display:flex; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:.72rem; color:var(--gris-fonce);}
.pdp-bar-track{flex:1; height:6px; background:var(--gris-clair); border-radius:6px; overflow:hidden;}
.pdp-bar-fill{height:100%; background:var(--or); border-radius:6px; transition:width .6s var(--ease);}
.pdp-bar-pct{width:32px; text-align:right; color:var(--gris);}

.pdp-reviews__list{display:flex; flex-direction:column; gap:0; margin-bottom:32px;}
.pdp-review{padding:20px 0; border-bottom:1px solid var(--line);}
.pdp-review:first-child{padding-top:0;}
.pdp-review__head{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.pdp-review__avatar{
  width:38px; height:38px; border-radius:50%; background:var(--noir); color:var(--blanc);
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-weight:700; flex-shrink:0;
}
.pdp-review__author{font-weight:700; font-size:.88rem;}
.pdp-review__stars{display:flex; gap:1px; margin-top:2px;}
.pdp-review__stars svg{fill:var(--line); stroke:none;}
.pdp-review__stars svg.is-filled{fill:var(--or);}
.pdp-review__text{font-size:.9rem; color:var(--gris-fonce); line-height:1.7;}
.pdp-reviews__empty{color:var(--gris); font-size:.88rem; padding:10px 0 24px;}

.pdp-review-form{background:var(--gris-clair); border-radius:var(--radius-md,14px); padding:26px;}
.pdp-review-form h4{margin-bottom:14px;}
.pdp-star-picker{display:flex; gap:4px; margin-bottom:16px;}
.pdp-star-pick{width:26px; height:26px;}
.pdp-star-pick svg{width:100%; height:100%; fill:var(--line); stroke:none; transition:fill .2s, transform .2s;}
.pdp-star-pick:hover svg{transform:scale(1.15);}
.pdp-star-pick.is-filled svg{fill:var(--or);}
.pdp-review-form__row{margin-bottom:12px;}
.pdp-review-form__row input, .pdp-review-form__row textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:8px;
  font-family:var(--ff-body); font-size:.88rem; resize:vertical; transition:border-color .3s;
}
.pdp-review-form__row input:focus, .pdp-review-form__row textarea:focus{border-color:var(--or);}

.pdp-related{padding:10px 40px 44px;}
@media (max-width:640px){ .pdp-related{padding:6px 22px 32px;} }
.pdp-related h3{margin-bottom:20px;}
.pdp-related__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:767px){ .pdp-related__grid{grid-template-columns:repeat(2,1fr);} }
.pdp-related-card{text-align:left; transition:transform .25s var(--ease);}
.pdp-related-card:hover{transform:translateY(-3px);}
.pdp-related-card__img{display:block; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius-sm,8px); margin-bottom:10px;}
.pdp-related-card__img img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.pdp-related-card:hover .pdp-related-card__img img{transform:scale(1.06);}
.pdp-related-card__name{display:block; font-size:.82rem; font-weight:600; margin-bottom:4px;}
.pdp-related-card__price{display:flex; gap:6px; font-family:var(--ff-mono); font-size:.8rem; flex-wrap:wrap;}

@media (max-width:767px){
  .pdp-modal{width:100vw; height:100vh; max-height:100vh; top:0; left:0; transform:translateY(100%); border-radius:0;}
  .pdp-modal.open{transform:translateY(0);}
  .pdp-scroll{max-height:100vh;}
  .pdp-actions{flex-direction:column;}
  .pdp-fav-full{height:48px;}
}

/* =========================================================
   AUXILIAIRE WEB AGENCY — Couche démonstration commerciale
   ========================================================= */
:root{
  --demo-banner-h:40px;
}
@media (max-width:767px){ :root{ --demo-banner-h:34px; } }

/* ---------- Bandeau de démonstration (droite → gauche, boucle infinie) ---------- */
.demo-banner{
  position:fixed; top:0; left:0; right:0; z-index:260;
  height:var(--demo-banner-h); overflow:hidden;
  background:var(--noir);
  border-bottom:1px solid rgba(212,175,55,.35);
  display:flex; align-items:center;
}
.demo-banner__track{
  display:flex; white-space:nowrap;
  animation:demo-banner-scroll 28s linear infinite;
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
}
.demo-banner__group{display:flex; flex-shrink:0;}
.demo-banner__track span{
  display:inline-flex; align-items:center; gap:10px; flex-shrink:0;
  padding:0 30px; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.04em;
  color:rgba(255,255,255,.88);
}
.demo-banner__track span em{color:var(--or-clair); font-style:normal; font-weight:700;}
.demo-banner__track span::before{content:'•'; color:var(--or); font-size:1.85em; margin-right:2px;}
@keyframes demo-banner-scroll{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .demo-banner__track{ animation:none; }
}
@media (max-width:767px){ .demo-banner__track span{ padding:0 18px; font-size:.62rem; gap:8px; } }

/* Décale la nav fixe et le contenu de la page sous le bandeau */
.navbar{ top:var(--demo-banner-h); }
body{ padding-top:calc(var(--header-h,76px) + var(--demo-banner-h)); }
@media (max-width:1023px){
  .nav-links{
    /* .navbar utilise backdrop-filter, ce qui en fait le bloc contenant de ses
       enfants position:fixed (.nav-links) : leur "top" se mesure donc depuis le
       HAUT DE LA NAVBAR elle-même, pas depuis le haut de l'écran. Le décalage du
       bandeau est déjà appliqué à la navbar (position fixed, top:banner-h) —
       il ne doit donc pas être ajouté une seconde fois ici. */
    top:var(--header-h,66px) !important;
    height:calc(100vh - var(--header-h,66px) - var(--demo-banner-h)) !important;
  }
}

/* ---------- Overlay commun aux fenêtres de démonstration ---------- */
.demo-overlay{
  position:fixed; inset:0; z-index:700; background:rgba(15,15,15,.62);
  backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease);
}
.demo-overlay.open{opacity:1; visibility:visible;}

.demo-popup, .demo-contact-modal, .demo-whatsapp-fallback{
  position:fixed; z-index:701; left:50%; top:50%;
  width:min(460px,90vw); max-height:88vh; overflow-y:auto;
  background:var(--blanc); border-radius:var(--radius-lg,22px);
  box-shadow:0 40px 100px rgba(0,0,0,.35);
  padding:40px 34px 34px;
  transform:translate(-50%,-48%) scale(.94); opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.demo-popup.open, .demo-contact-modal.open, .demo-whatsapp-fallback.open{
  transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto;
}
@media (max-width:520px){
  .demo-popup, .demo-contact-modal, .demo-whatsapp-fallback{ padding:34px 22px 26px; width:92vw; }
}

.demo-popup__close{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--gris-clair);
  font-size:1.1rem; line-height:1; color:var(--noir); transition:background .25s, transform .25s;
}
.demo-popup__close:hover{background:var(--noir); color:var(--blanc); transform:rotate(90deg);}

.demo-popup .eyebrow{margin-bottom:14px;}
.demo-popup h3{font-size:clamp(1.25rem,3vw,1.6rem); margin-bottom:14px; line-height:1.25;}
.demo-popup h3 strong{color:var(--or-dim);}
.demo-popup p{font-size:.9rem; margin-bottom:12px;}
.demo-popup__actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.demo-popup__actions .btn{flex:1; min-width:150px;}
.demo-popup__dismiss{
  display:block; margin:16px auto 0; font-family:var(--ff-mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gris); text-decoration:underline;
  text-underline-offset:3px; transition:color .2s;
}
.demo-popup__dismiss:hover{color:var(--noir);}

/* ---------- Fenêtre de choix WhatsApp / Email ---------- */
.demo-contact-modal h3{font-size:1.25rem; margin-bottom:8px;}
.demo-contact-modal > p{font-size:.86rem; color:var(--gris-fonce); margin-bottom:22px;}
.demo-contact-modal__options{display:flex; flex-direction:column; gap:12px;}
.demo-contact-option{
  display:flex; align-items:center; gap:16px; text-align:left;
  padding:16px 18px; border:1px solid var(--line); border-radius:12px;
  transition:border-color .3s, background .3s, transform .2s;
}
.demo-contact-option:hover{border-color:var(--or); background:rgba(212,175,55,.06); transform:translateY(-2px);}
.demo-contact-option__icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--noir); color:var(--blanc);
}
.demo-contact-option__icon svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8;}
.demo-contact-option[data-channel="whatsapp"] .demo-contact-option__icon{background:#1fb855;}
.demo-contact-option__icon svg path.filled{fill:currentColor; stroke:none;}
.demo-contact-option strong{display:block; font-size:.94rem; margin-bottom:2px;}
.demo-contact-option__desc{font-size:.78rem; color:var(--gris);}
.demo-contact-modal__cancel{
  display:block; margin:20px auto 0; font-family:var(--ff-mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gris);
}
.demo-contact-modal__cancel:hover{color:var(--noir);}

/* ---------- Repli WhatsApp : message copiable ---------- */
.demo-whatsapp-fallback h3{font-size:1.15rem; margin-bottom:8px;}
.demo-whatsapp-fallback p{font-size:.86rem; color:var(--gris-fonce); margin-bottom:16px;}
#demo-wa-message{
  width:100%; min-height:170px; padding:14px 16px; border:1px solid var(--line); border-radius:10px;
  font-family:var(--ff-mono); font-size:.78rem; line-height:1.6; resize:vertical; color:var(--noir);
  background:var(--gris-clair);
}
.demo-whatsapp-fallback__actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.demo-whatsapp-fallback__actions .btn{flex:1; min-width:150px; text-align:center;}
#demo-wa-copy.is-copied{background:var(--or); color:var(--noir); border-color:var(--or);}

/* ---------- Badge flottant "Démo" ---------- */
.demo-badge{
  position:fixed; left:22px; bottom:26px; z-index:300;
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px;
  background:var(--noir); color:var(--blanc);
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.demo-badge__dot{
  width:7px; height:7px; border-radius:50%; background:var(--or);
  box-shadow:0 0 0 0 rgba(212,175,55,.6); animation:demo-badge-pulse 2.2s ease-in-out infinite;
}
@keyframes demo-badge-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.55);}
  50%{box-shadow:0 0 0 6px rgba(212,175,55,0);}
}
.demo-badge:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.3);}
@media (max-width:640px){ .demo-badge{left:14px; bottom:16px; padding:9px 13px; font-size:.62rem;} }

/* ---------- Section CTA agence avant le footer ---------- */
.demo-cta-section{
  background:var(--noir); color:var(--blanc); text-align:center; position:relative; overflow:hidden;
  padding:clamp(56px,8vw,96px) 0;
}
.demo-cta-section::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(212,175,55,.16), transparent 60%);
}
.demo-cta-section__inner{position:relative; max-width:640px; margin:0 auto;}
.demo-cta-section .eyebrow{justify-content:center; color:var(--or-clair);}
.demo-cta-section .eyebrow::before{background:var(--or-clair);}
.demo-cta-section h2{margin:16px 0 16px;}
.demo-cta-section p{color:rgba(255,255,255,.72); margin-bottom:14px;}
.demo-cta-section__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px;}
.demo-cta-section__quote{
  display:inline-block; margin-top:18px; font-family:var(--ff-mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6);
  text-decoration:underline; text-underline-offset:3px; transition:color .2s;
}
.demo-cta-section__quote:hover{color:var(--or-clair);}
@media (max-width:520px){ .demo-cta-section__actions{flex-direction:column;} .demo-cta-section__actions .btn{width:100%;} }

/* ---------- Bloc agence dans le footer ---------- */
.footer-agency{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:32px 0; margin-top:8px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.footer-agency__text h4{font-size:1.05rem; margin-bottom:6px;}
.footer-agency__text p{font-size:.86rem; max-width:440px;}
@media (max-width:640px){ .footer-agency{flex-direction:column; align-items:flex-start; text-align:left;} .footer-agency .btn{width:100%;} }

.footer-poweredby{
  display:flex; align-items:center; gap:6px;
  font-family:var(--ff-mono); font-size:.72rem; color:var(--gris);
}
.footer-poweredby a{color:var(--or-dim); font-weight:700; transition:color .2s;}
.footer-poweredby a:hover{color:var(--or);}

@media (max-width:767px){
  .demo-popup, .demo-contact-modal, .demo-whatsapp-fallback{max-height:82vh;}
}