/* =====================================================================
   DESTOCKLAOTIE — feuille de style unique
   ===================================================================== */
*{box-sizing:border-box}
:root{
  --red:#E2231A; --red-dark:#B81810; --ink:#2B2B2B; --gray:#6E6E6E;
  --line:#E4E4E4; --tile:#F5F5F5; --bar:#F7F7F7; --green:#1C7A3E; --amber:#9A6400;
  color-scheme:light only;
}
html{background:#fff;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:'Lato',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}
a{text-decoration:none;color:inherit}
button{font:inherit;border:0;cursor:pointer;background:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wrap{max-width:1600px;margin:0 auto;padding:0 clamp(16px,2vw,40px)}
@media(prefers-color-scheme:dark){html,body{background:#fff!important;color:#2B2B2B!important}
  input,select,textarea,button{background-color:#fff;color:#2B2B2B}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- bandeau promo ---------- */
.promobar{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap}
.promobar .run{display:inline-block;padding:9px 0;font-size:12.5px;animation:promoslide 60s linear infinite;will-change:transform}
.promobar:hover .run{animation-play-state:paused}
.promobar .run i{font-style:normal;padding:0 30px;display:inline-block}
.promobar .run b{font-weight:700;background:rgba(255,255,255,.2);padding:2px 9px;letter-spacing:.6px}
.promobar .run em{font-style:normal;opacity:.55;padding:0 2px}
@keyframes promoslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- barre utilitaire ---------- */
.utilbar{background:var(--bar);border-bottom:1px solid var(--line);font-size:12.5px;color:#3A3A3A;font-weight:700}
.utilbar .wrap{display:flex;justify-content:flex-end;align-items:center;gap:22px;height:34px}
.utilbar a{font-weight:700}
.utilbar a:hover{color:var(--red)}
.utilbar .ic{display:inline-flex;align-items:center;gap:6px}
.utilbar svg{width:16px;height:16px;stroke:#3A3A3A;fill:none;stroke-width:1.9}
.count{background:var(--red);color:#fff;border-radius:50%;min-width:17px;height:17px;padding:0 4px;font-size:10.5px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.acct{display:inline-flex;align-items:center;gap:5px}
.acct i{font-style:normal;color:#c9c9c9;font-weight:400}

/* ---------- en-tête ---------- */
.header{border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;gap:34px;height:74px}
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:44px;width:auto}
.mainnav{display:flex;gap:32px;font-size:15.5px}
.mainnav a{padding:6px 0;border-bottom:2px solid transparent;font-weight:700;color:#1A1A1A;letter-spacing:-.1px}
.mainnav a:hover,.mainnav a.on{color:var(--red);border-bottom-color:var(--red)}
.search{margin-left:auto;display:flex;width:290px;border:1px solid #cfcfcf}
.search input{flex:1;border:0;padding:9px 12px;font:inherit;font-size:13px;outline:0;min-width:0}
.search button{padding:0 12px;border-left:1px solid #eee}
.search svg{width:16px;height:16px;stroke:#555;fill:none;stroke-width:2}
.search{position:relative}
.suggestions{display:none;position:absolute;top:calc(100% + 4px);left:-1px;right:-1px;background:#fff;
  border:1px solid var(--line);box-shadow:0 18px 40px -22px rgba(0,0,0,.45);z-index:60;max-height:70vh;overflow:auto}
.suggestions.open{display:block}
.suggestions a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid #f2f2f2}
.suggestions a:last-child{border-bottom:0}
.suggestions a:hover,.suggestions a.on{background:#FAFAFA}
.suggestions .pic{width:46px;height:46px;flex:none;border:1px solid #ededed;display:flex;align-items:center;justify-content:center;padding:3px}
.suggestions .pic img{width:100%;height:100%;object-fit:contain}
.suggestions .txt{min-width:0;flex:1}
.suggestions .txt b{display:block;font-size:12.5px;font-weight:400;color:#3a3a3a;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suggestions .txt span{font-size:13px;font-weight:700;color:var(--red)}
.suggestions .txt s{font-size:11.5px;color:#a5a5a5;font-weight:400;margin-left:6px}
.suggestions .vide{padding:14px 12px;font-size:13px;color:#8a8a8a}
.suggestions .tous{display:block;text-align:center;padding:11px;font-size:13px;font-weight:700;color:var(--red);background:#FAFAFA;border-top:1px solid var(--line)}

/* menu mobile */
.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:22px;height:2px;background:#1A1A1A;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#1A1A1A}
.burger span::before{top:-7px}.burger span::after{top:7px}
.drawer{position:fixed;inset:0;z-index:90;display:none}
.drawer.open{display:block}
.drawer .veil{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);background:#fff;overflow:auto;padding:18px 20px 30px}
.drawer .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.drawer .close{width:38px;height:38px;font-size:24px;color:#6E6E6E}
.drawer nav a{display:block;padding:13px 0;font-size:16px;font-weight:700;border-bottom:1px solid #EFEFEF}
.drawer .sub{margin-top:20px;border-top:1px solid #EFEFEF;padding-top:14px}
.drawer .sub a{display:block;padding:10px 0;font-size:14.5px;color:#4a4a4a;font-weight:400}
.drawer .sub a.hi{color:var(--red);font-weight:700}

/* ---------- bannière ---------- */
.sitebanner{display:block;margin:18px 0 10px;overflow:hidden;background:#0B0B0B;width:100%;aspect-ratio:3/1}
.sitebanner img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.sitebanner:hover img{transform:scale(1.01)}

/* ---------- messages ---------- */
.flash{margin:16px 0;padding:12px 15px;font-size:13.5px;border:1px solid}
.flash.ok{background:#EAF6EE;border-color:#C7E6D2;color:var(--green)}
.flash.err{background:#FFEDEC;border-color:#F3D4D2;color:#7a2b26}
.flash.info{background:#EEF4FF;border-color:#CBD9F5;color:#28457C}

/* ---------- fil d'ariane et titres ---------- */
.crumb{font-size:13px;color:#6a6a6a;padding:18px 0 12px}
.crumb i{font-style:normal;color:#bdbdbd;margin:0 7px}
h1{font-size:25px;font-weight:700;margin:0 0 6px}
.sub{color:var(--gray);font-size:13.5px;margin:0 0 18px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.pagehead .res{color:var(--gray);font-size:13px;font-weight:400;margin-left:10px}
.sortbox{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gray)}
.sortbox select{font:inherit;font-size:13px;padding:8px 10px;border:1px solid #cfcfcf;background:#fff}

/* ---------- accueil : hero atelier ---------- */
.hero{
  position:relative;overflow:hidden;
  background:#0F1114;
  color:#fff;
  border-bottom:1px solid #000;
}
/* traînées de vitesse, reprises de la bannière */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(115deg,
      rgba(226,35,26,.16) 0 2px, transparent 2px 12px),
    radial-gradient(120% 90% at 82% 45%, rgba(226,35,26,.20) 0%, transparent 62%);
  opacity:.85;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--red) 0 26%,#25282D 26%);
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:56px;padding:64px clamp(16px,2vw,40px) 60px}

.hero-copy .eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;
  font-size:11.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:#B9BEC6}
.hero-copy .eyebrow i{display:block;width:42px;height:2px;background:var(--red);flex:none}
.hero-copy h1{
  font-family:'Barlow Condensed','Lato',Arial,sans-serif;
  font-size:clamp(38px,4.6vw,68px);font-weight:800;font-style:italic;
  line-height:.98;letter-spacing:-.5px;text-transform:uppercase;margin:0 0 20px;color:#fff}
.hero-copy h1 em{font-style:italic;color:var(--red)}
.hero-copy .lede{color:#A5ABB4;font-size:15px;line-height:1.75;margin:0 0 30px;max-width:48ch}
.hero-copy .cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.hero-copy .btn{background:var(--red);color:#fff;font-weight:700;font-size:13.5px;letter-spacing:1.2px;
  text-transform:uppercase;padding:15px 30px}
.hero-copy .btn:hover{background:#fff;color:#0F1114}
.hero-copy .btn-ghost{border:1px solid #3A3F46;color:#E7E9EC;font-weight:700;font-size:13.5px;
  letter-spacing:1.2px;text-transform:uppercase;padding:14px 26px}
.hero-copy .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.hero-copy .facts{list-style:none;margin:0;padding:20px 0 0;border-top:1px solid #24272C;
  display:flex;flex-wrap:wrap;gap:10px 34px}
.hero-copy .facts li{position:relative;padding-left:16px;font-family:'Barlow Condensed','Lato',sans-serif;
  font-size:16px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#CBD0D6}
.hero-copy .facts li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--red)}

/* diaporama */
.showcase{position:relative}
.diapo{position:relative;min-height:472px}
.diapo .slide{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:1fr 214px;
  align-items:end;gap:0;opacity:0;visibility:hidden;transition:opacity .45s ease}
.diapo .slide.on{position:relative;opacity:1;visibility:visible}
.diapo .plate{position:relative;display:flex;align-items:center;justify-content:center;
  background:#fff;aspect-ratio:1/1;padding:18px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.diapo .plate img{width:100%;height:100%;object-fit:contain;transition:transform .6s ease}
.diapo .plate svg{width:110%;max-width:none;color:#3C4147}
.diapo .slide:hover .plate img{transform:scale(1.06)}
.diapo .cut{position:absolute;top:0;left:0;background:var(--red);color:#fff;
  font-family:'Barlow Condensed','Lato',sans-serif;font-size:17px;font-weight:700;font-style:italic;
  letter-spacing:.5px;padding:5px 14px 4px;z-index:2}
.diapo .out{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(20,20,20,.86);color:#fff;font-size:13px;letter-spacing:1.4px;
  text-transform:uppercase;padding:9px 20px;z-index:2}

.diapo .meta{background:#16181C;border-left:2px solid var(--red);padding:20px 20px 22px;
  margin-left:-46px;margin-bottom:26px;position:relative;z-index:3;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.95)}
.diapo .nom{display:block;font-family:'Barlow Condensed','Lato',sans-serif;font-size:20px;
  font-weight:700;font-style:italic;text-transform:uppercase;line-height:1.1;color:#fff}
.diapo .specs{display:block;margin:9px 0 14px;padding-bottom:13px;border-bottom:1px solid #262A2F;
  font-family:'Barlow Condensed','Lato',sans-serif;font-size:14px;letter-spacing:.6px;
  text-transform:uppercase;color:#8E959D}
.diapo .specs b{color:#E7E9EC;font-weight:700;font-size:16px}
.diapo .specs i{font-style:normal;color:#3E434A;padding:0 6px}
.diapo .tarif b{display:block;font-family:'Barlow Condensed','Lato',sans-serif;color:var(--red);
  font-size:34px;font-weight:800;font-style:italic;line-height:1;letter-spacing:-.5px}
.diapo .tarif s{display:inline-block;color:#6E747C;font-size:13.5px;margin-top:5px}
.diapo .voir{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:#fff;border-bottom:1px solid var(--red);padding-bottom:3px}
.diapo .slide:hover .voir{color:var(--red)}

/* jauge : index des modèles */
.diapo .jauge{display:flex;align-items:center;gap:14px;margin-top:22px}
.diapo .ticks{display:flex;align-items:flex-end;gap:5px;flex:1;height:22px}
.diapo .puce{flex:1;height:9px;background:#2C3037;padding:0;transition:height .2s,background .2s}
.diapo .puce:hover{background:#575E67;height:14px}
.diapo .puce.on{background:var(--red);height:22px}
.diapo .fleche{width:38px;height:38px;border:1px solid #2F343A;background:transparent;flex:none;
  display:flex;align-items:center;justify-content:center}
.diapo .fleche svg{width:17px;height:17px;stroke:#B9BEC6;fill:none;stroke-width:2}
.diapo .fleche:hover{border-color:var(--red);background:var(--red)}
.diapo .fleche:hover svg{stroke:#fff}

/* ---------- réassurance ---------- */
.trust{border-bottom:1px solid var(--line);background:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0 clamp(16px,2vw,40px)}
.trust div{display:flex;gap:13px;align-items:center;justify-content:center;padding:20px;
  border-right:1px solid var(--line);min-height:78px}
.trust div:last-child{border-right:0}
.trust svg{width:25px;height:25px;stroke:var(--red);fill:none;stroke-width:1.5;flex:none}
.trust b{display:block;font-size:12px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;line-height:1.3}
.trust span{display:block;color:var(--gray);font-size:12.5px;line-height:1.45;margin-top:2px}

/* ---------- sections ---------- */
.sec{padding:52px 0 10px}
.sec-head{margin-bottom:30px;display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px}
.sec-head h2{font-family:'Barlow Condensed','Lato',sans-serif;font-size:30px;font-weight:700;
  font-style:italic;text-transform:uppercase;letter-spacing:-.2px;margin:0;line-height:1}
.sec-head p{color:var(--gray);margin:0;font-size:13.5px}
.tabpane,.seo{max-width:980px}
.more{text-align:center;margin:36px 0 6px}
.brands{border-top:1px solid var(--line);margin-top:52px;padding:30px 0}
.brands ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px 40px;font-family:'Barlow Condensed','Lato',sans-serif;color:#9a9a9a;font-size:19px;
  font-weight:600;font-style:italic;letter-spacing:.6px;text-transform:uppercase}
.brands li:hover{color:var(--red)}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:44px;padding:48px clamp(16px,2vw,40px) 52px}
  .diapo{min-height:0}
  .diapo .slide{position:absolute;inset:0}
  .diapo .slide.on{position:relative}
  .showcase{max-width:560px}
}
@media(max-width:700px){
  .diapo .slide{grid-template-columns:1fr}
  .diapo .meta{margin-left:0;margin-top:-30px;margin-bottom:0;margin-right:22px}
  .diapo .plate{aspect-ratio:4/3}
  .hero-copy .facts{gap:8px 22px}
  .hero-copy .btn,.hero-copy .btn-ghost{flex:1;text-align:center}
  .trust .wrap{grid-template-columns:1fr}
  .trust div{border-right:0;border-bottom:1px solid var(--line);justify-content:flex-start}
  .trust div:last-child{border-bottom:0}
}
@media(max-width:520px){
  .diapo .tarif b{font-size:28px}
  .diapo .nom{font-size:17px}
  .sec-head h2{font-size:24px}
}

/* ---------- grille produits ---------- */
.layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:44px;padding:22px 0 60px;align-items:start}
.side.filters{border:1px solid var(--line);padding:20px 22px 6px;background:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{position:relative}
.thumb{position:relative;background:#fff;padding:10px;overflow:hidden;display:flex;align-items:center;
  justify-content:center;aspect-ratio:1/1;cursor:pointer}
.card:hover .thumb{background:var(--tile)}
.thumb img.sc{width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.thumb svg.sc{width:112%;height:auto;max-width:none;transition:transform .35s ease}
.card:hover .thumb img.sc,.card:hover .thumb svg.sc{transform:scale(1.07)}
.wish{position:absolute;top:8px;right:8px;width:24px;height:24px;stroke:#b0b0b0;fill:none;stroke-width:1.6;z-index:2}
.wish:hover,.wish.on{stroke:var(--red)}
.wish.on{fill:var(--red)}
.flag{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;z-index:2}
.flag.gray{background:#4A4F55}
.sold{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(90,90,90,.82);
  color:#fff;font-size:14px;padding:8px 22px;z-index:2}
.title{display:block;font-size:13.5px;line-height:1.45;margin:10px 0 6px;color:#3a3a3a;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.title:hover{color:var(--red)}
.price{color:var(--red);font-size:18px;font-weight:700}
.price s{color:#a5a5a5;font-size:13px;font-weight:400;margin-left:8px}
.card.out .thumb img.sc,.card.out .thumb svg.sc{opacity:.55}
.card.out .price{color:#9a9a9a}
.subline{font-size:12px;color:#9a9a9a;margin-top:3px}
.addcart{display:block;width:100%;margin-top:12px;border:1px solid #cfcfcf;padding:10px;font-size:13px;
  font-weight:700;text-align:center;background:#fff}
.addcart:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.addcart.off{color:#9a9a9a;border-color:#e4e4e4;pointer-events:none}
.card-body{padding:2px 2px 6px}
.brandline{font-size:11.5px;color:#9a9a9a;letter-spacing:1.2px;text-transform:uppercase}
.attrs{font-size:12.5px;color:var(--gray);margin-bottom:11px}

/* ---------- filtres ---------- */
.clearall{width:100%;border:1px solid #cfcfcf;padding:11px;font-size:13px;color:var(--gray);
  margin-bottom:24px;text-align:center;display:block;background:#fff}
.clearall:hover{border-color:var(--ink);color:var(--ink)}
.fgroup{border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:18px}
.fgroup summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  font-weight:700;font-size:14.5px;padding:2px 0 12px}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary .sign{width:13px;height:13px;position:relative;flex:none}
.fgroup summary .sign::before,.fgroup summary .sign::after{content:"";position:absolute;background:#7a7a7a}
.fgroup summary .sign::before{left:0;top:6px;width:13px;height:1.4px}
.fgroup summary .sign::after{left:6px;top:0;width:1.4px;height:13px;opacity:0}
.fgroup:not([open]) summary .sign::after{opacity:1}
.fopt{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:13.5px;color:#4a4a4a;cursor:pointer}
.fgroup:last-of-type{border-bottom:0;margin-bottom:6px}
.fopt input{width:15px;height:15px;accent-color:var(--red);margin:0;flex:none}
.fopt .n{color:#a5a5a5;font-size:12.5px;margin-left:auto}
.fopt:hover{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fafafa;
  font-size:12.5px;padding:6px 10px;color:#4a4a4a}
.chip b{color:#9a9a9a}
.filterbtn{display:none}
.empty{border:1px solid var(--line);padding:50px 20px;text-align:center;color:var(--gray)}
.empty a{color:var(--red);font-weight:700;text-decoration:underline}
.seo{border-top:1px solid var(--line);padding:26px 0 0;max-width:900px}
.seo h2{font-size:17px;margin:0 0 10px}
.seo p{color:var(--gray);font-size:13.5px;line-height:1.75;margin:0 0 10px}

/* ---------- fiche produit ---------- */
.product{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;padding-bottom:20px}
.gallery{display:grid;grid-template-columns:96px 1fr;gap:18px}
.thumbs{display:flex;flex-direction:column;gap:6px}
.gthumb{width:84px;height:84px;border:1px solid #e8e8e8;padding:5px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;overflow:hidden;background:#fff}
.gthumb.on{border:2px solid var(--red);padding:4px}
.gthumb img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease}
.gthumb:hover img{transform:scale(1.1)}
.stage{border:1px solid #e8e8e8;padding:26px;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;overflow:hidden}
.stage img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease}
.stage:hover img{transform:scale(1.12)}
.info h1{font-size:23px;font-weight:400;line-height:1.45;margin:6px 0 12px;color:#1f1f1f}
.variant{color:#9a9a9a;font-size:14px;margin:0 0 14px}
.rating{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.rating svg{width:16px;height:16px;fill:var(--red)}
.rating a{font-size:13px;color:#6a6a6a;text-decoration:underline}
.pricebox{margin-bottom:22px}
.pricebox .now{color:var(--red);font-size:31px;font-weight:700;letter-spacing:-.5px}
.pricebox .was{color:#9a9a9a;font-size:17px;text-decoration:line-through;margin-left:12px}
.pricebox .off{background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;margin-left:10px;vertical-align:5px}
.pricebox .vat{display:block;font-size:12.5px;color:#9a9a9a;margin-top:6px}
.row{display:flex;gap:16px;margin-bottom:16px;font-size:14px}
.row>.lab{width:96px;flex:none;color:#4a4a4a}
.row .val b{font-weight:700}
.row .val .muted{color:#9a9a9a}
.qty{display:inline-flex;border:1px solid #d8d8d8;align-items:center}
.qty button{width:36px;height:38px;color:#6a6a6a;font-size:17px}
.qty button:hover{color:var(--red)}
.qty input{width:52px;height:38px;border:0;border-left:1px solid #ededed;border-right:1px solid #ededed;
  text-align:center;font:inherit;font-size:15px;outline:0}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0 14px}
.btn-cart{background:var(--red);color:#fff;font-weight:700;font-size:14.5px;letter-spacing:.6px;
  text-transform:uppercase;padding:15px 38px;min-width:230px;text-align:center}
.btn-cart:hover{background:var(--red-dark)}
.btn-cart.off{background:#9a9a9a;pointer-events:none}
.btn-buy{background:#2B2B2B;color:#fff;font-weight:700;font-size:14.5px;letter-spacing:.6px;
  text-transform:uppercase;padding:15px 38px;min-width:230px;text-align:center;display:inline-block}
.btn-buy:hover{background:#000}
.wishlink{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#4a4a4a}
.wishlink svg{width:18px;height:18px;stroke:#4a4a4a;fill:none;stroke-width:1.7}
.pack{border:1px solid var(--line);margin:24px 0 0}
.pack h3{font-size:13px;margin:0;padding:11px 15px;border-bottom:1px solid var(--line);background:#FAFAFA;
  letter-spacing:.3px;text-transform:uppercase;color:#4a4a4a}
.pack ul{list-style:none;margin:0;padding:10px 15px 12px}
.pack li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:13.5px;color:#3a3a3a}
.pack li svg{width:15px;height:15px;flex:none;margin-top:3px;stroke:var(--green);fill:none;stroke-width:2.6}
.pack .box-info{border-top:1px solid #f1f1f1;padding:10px 15px;font-size:12.5px;color:#8a8a8a}
.acc{border:1px solid var(--line);margin:26px 0 0}
.acc h2{font-size:14px;margin:0;padding:13px 16px;border-bottom:1px solid var(--line);background:#FAFAFA;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.acc h2 em{font-style:normal;font-size:12px;color:#8a8a8a;font-weight:400}
.acc .list{padding:4px 16px}
.acc label{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #f1f1f1;cursor:pointer}
.acc label:last-child{border-bottom:0}
.acc input{width:17px;height:17px;accent-color:var(--red);margin:0;flex:none}
.acc .pic{width:52px;height:52px;flex:none;border:1px solid #ededed;padding:4px;display:flex;align-items:center;justify-content:center}
.acc .pic img{width:100%;height:100%;object-fit:contain}
.acc .txt{min-width:0;flex:1}
.acc .an{display:block;font-size:13.5px;font-weight:700;line-height:1.35}
.acc .fit{font-size:11.5px;color:#8a8a8a}
.acc .fit b{color:var(--red)}
.acc .ap{margin-left:auto;text-align:right;white-space:nowrap}
.acc .ap b{font-size:14px}
.acc .sum{border-top:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;background:#FAFAFA;font-size:13.5px}
.acc .sum b{font-size:17px;color:var(--red)}
.acc .none{font-size:12.5px;color:#8a8a8a;padding:0 16px 14px}
.hint{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;font-size:13.5px;color:#4a4a4a}
.hint p{margin:0 0 8px}
.hint .warn{color:#9a5b00;background:#FFF7E8;border:1px solid #F3E2BE;padding:10px 12px;font-size:13px}
.tabs{border-bottom:1px solid var(--line);margin-top:48px;display:flex;gap:52px;overflow-x:auto}
.tabs a{padding:14px 0;font-size:15px;color:#4a4a4a;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a.on{color:var(--red);font-weight:700;border-bottom-color:var(--red)}
.tabpane{padding:30px 0 60px;max-width:920px}
.tabpane h2{font-size:18px;margin:26px 0 10px}
.tabpane h2:first-child{margin-top:0}
.tabpane p,.tabpane li{color:#4a4a4a;line-height:1.8}
table.spec{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
table.spec th{text-align:left;font-weight:700;background:#FAFAFA;padding:10px 14px;border:1px solid var(--line);width:230px}
table.spec td{padding:10px 14px;border:1px solid var(--line);color:#4a4a4a}

/* ---------- panier et tunnel ---------- */
table.cart{width:100%;border-collapse:collapse}
table.cart th{text-align:left;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#8a8a8a;
  font-weight:700;padding:0 12px 12px;border-bottom:1px solid var(--line)}
table.cart th.c,table.cart td.c{text-align:center}
table.cart th.r,table.cart td.r{text-align:right}
table.cart td{padding:20px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.item{display:flex;gap:16px}
.item .pic{width:118px;flex:none;border:1px solid #ededed;padding:6px}
.item .pic img{width:100%;object-fit:contain}
.item .meta a{font-size:14.5px;font-weight:700;line-height:1.4;display:block;margin-bottom:6px}
.item .meta p{margin:0 0 4px;font-size:12.5px;color:#8a8a8a}
.item .meta .ok{color:var(--green)}
.item .meta .rm{font-size:12.5px;color:#8a8a8a;text-decoration:underline;margin-top:8px;display:inline-block}
.unit{font-size:14.5px;font-weight:700}
.unit s{display:block;color:#a5a5a5;font-size:12.5px;font-weight:400}
.lineamt{font-size:16px;font-weight:700;color:var(--red)}
.cartfoot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:20px 12px 0}
.promo{display:flex;border:1px solid #d8d8d8}
.promo input{border:0;padding:11px 13px;font:inherit;font-size:13.5px;outline:0;width:200px}
.promo button{background:#2B2B2B;color:#fff;font-weight:700;font-size:13px;padding:0 18px}
.keep{font-size:13.5px;text-decoration:underline;color:#4a4a4a}
.summary{border:1px solid var(--line);padding:22px}
.summary h2{font-size:16px;margin:0 0 16px;letter-spacing:.3px;text-transform:uppercase}
.sline{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:#4a4a4a}
.sline.free{color:var(--green)}
.stotal{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);
  margin-top:12px;padding-top:14px}
.stotal span{font-weight:700;font-size:15px}
.stotal b{color:var(--red);font-size:25px}
.vat{font-size:12px;color:#9a9a9a;text-align:right;margin:2px 0 0}
.gate{background:#FFF6F5;border:1px solid #F3D4D2;padding:14px;margin:18px 0 0;font-size:13px;color:#7a2b26;line-height:1.6}
.checkout{display:block;width:100%;background:var(--red);color:#fff;font-weight:700;font-size:15.5px;
  text-transform:uppercase;letter-spacing:.5px;padding:15px;text-align:center;margin-top:14px}
.checkout:hover{background:var(--red-dark)}
.paylist{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.paylist span{background:#f4f4f4;border:1px solid #e8e8e8;font-size:11.5px;color:#6a6a6a;padding:5px 10px}
.steps{display:flex;justify-content:center;padding:26px 0 20px;font-size:13px;color:#9a9a9a;flex-wrap:wrap}
.steps span{display:flex;align-items:center;gap:9px;padding:0 20px}
.steps b{width:23px;height:23px;border-radius:50%;background:#e8e8e8;color:#8a8a8a;display:flex;
  align-items:center;justify-content:center;font-size:12.5px}
.steps .on{color:var(--ink);font-weight:700}
.steps .on b{background:var(--red);color:#fff}
.steps .past b{background:var(--ink);color:#fff}
.steps em{width:40px;height:1px;background:#e0e0e0;align-self:center;font-size:0}
.box{border:1px solid var(--line);margin-bottom:22px;background:#fff}
.box h2{font-size:15px;margin:0;padding:14px 18px;border-bottom:1px solid var(--line);background:#FAFAFA}
.box .in{padding:18px}
.pick{display:grid;gap:12px}
.pick label{display:flex;gap:12px;border:1px solid var(--line);padding:14px 16px;cursor:pointer;align-items:flex-start}
.pick label:hover{border-color:#bdbdbd}
.pick input{accent-color:var(--red);width:16px;height:16px;margin:2px 0 0;flex:none}
.pick label:has(input:checked){border-color:var(--red);background:#FFFAFA}
.pick .txt b{display:block;margin-bottom:3px}
.pick .txt p{margin:0;color:#5a5a5a;font-size:13.5px;line-height:1.6}
.next{background:var(--red);color:#fff;font-weight:700;font-size:15.5px;text-transform:uppercase;
  letter-spacing:.5px;padding:15px 34px}
.next:hover{background:var(--red-dark)}
.back{font-size:13.5px;color:#8a8a8a;text-decoration:underline;margin-right:20px}
.foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.done{text-align:center;padding:40px 20px 20px}
.done .tick{width:64px;height:64px;border-radius:50%;background:#EAF6EE;display:flex;align-items:center;
  justify-content:center;margin:0 auto 18px}
.done .tick svg{width:30px;height:30px;stroke:var(--green);fill:none;stroke-width:2.4}
.done h1{font-size:26px}
.done p{color:#5a5a5a;margin:0 auto 8px;max-width:56ch}
.done .num{font-size:15px;font-weight:700;margin:16px 0 24px}
.done .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.done .acts a{border:1px solid #cfcfcf;padding:13px 26px;font-weight:700;font-size:14px}
.done .acts a.p{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- formulaires ---------- */
.form{max-width:640px}
.f{margin-bottom:16px}
.f label{display:block;font-size:12.5px;font-weight:700;color:#4a4a4a;margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;border:1px solid #d8d8d8;padding:11px 12px;font:inherit;
  font-size:14px;outline:0;background:#fff}
.f input:focus,.f select:focus,.f textarea:focus{border-color:#9a9a9a}
.f .help{font-size:12px;color:#9a9a9a;margin-top:5px;line-height:1.6}
.f input.bad,.f select.bad{border-color:var(--red);background:#FFFBFB}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checkline{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#5a5a5a;margin-bottom:12px;line-height:1.55}
.checkline input{width:15px;height:15px;accent-color:var(--red);margin:2px 0 0;flex:none}
.checkline a{text-decoration:underline}
.radios{display:flex;gap:20px;font-size:14px}
.radios label{display:flex;gap:7px;align-items:center}
.radios input{width:15px;height:15px;accent-color:var(--red)}
.save{background:var(--red);color:#fff;font-weight:700;font-size:14.5px;padding:13px 32px}
.save:hover{background:var(--red-dark)}
.telbox{display:flex;border:1px solid #d8d8d8;background:#fff}
.telbox select{border:0;border-right:1px solid #ededed;padding:11px 8px;font:inherit;font-size:14px;
  outline:0;background:#fff;flex:none;width:104px}
.telbox input{border:0;padding:11px 12px;font:inherit;font-size:14px;outline:0;flex:1;min-width:0}
.telbox.bad{border-color:var(--red);background:#FFFBFB}
.pf{border:1px solid #d8d8d8;padding:12px 13px;display:flex;align-items:center;gap:10px;margin-bottom:12px;background:#fff}
.pf input{border:0;outline:0;font:inherit;font-size:14.5px;width:100%;letter-spacing:.4px}
.pfrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.authbox{max-width:430px;margin:40px auto 60px;border:1px solid var(--line);padding:32px 30px}
.authtabs{display:flex;justify-content:center;gap:50px;margin-bottom:26px}
.authtabs a{font-size:15px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#1a1a1a;
  padding-bottom:7px;border-bottom:2px solid transparent}
.authtabs a.on{color:var(--red);border-bottom-color:var(--red)}
.msubmit{width:100%;background:var(--red);color:#fff;font-weight:700;font-size:15.5px;padding:14px}
.msubmit:hover{background:var(--red-dark)}
.forgot{display:block;text-align:right;font-size:12.5px;color:#4a4a4a;text-decoration:underline;margin:0 0 18px}

/* ---------- espace client ---------- */
.account{display:grid;grid-template-columns:246px 1fr;gap:40px;padding-bottom:70px;align-items:start}
.side{border:1px solid var(--line)}
.side .id{padding:18px;border-bottom:1px solid var(--line);background:#FAFAFA}
.side .id b{display:block;font-size:15px}
.side .id span{font-size:12.5px;color:#8a8a8a}
.side p{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#9a9a9a;margin:16px 18px 6px;font-weight:700}
.side a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 18px;
  font-size:14px;color:#3f3f3f;border-left:3px solid transparent}
.side a:hover{color:var(--red)}
.side a.on{border-left-color:var(--red);background:#FFF6F5;font-weight:700;color:var(--ink)}
.side .out{border-top:1px solid var(--line);margin-top:16px;padding:12px 18px;font-size:13.5px;color:#8a8a8a}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.stats div{border:1px solid var(--line);padding:16px}
.stats b{display:block;font-size:26px;font-weight:700;line-height:1.15}
.stats span{font-size:12px;color:#8a8a8a;letter-spacing:.4px;text-transform:uppercase}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{text-align:left;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:#8a8a8a;
  padding:0 12px 10px;border-bottom:1px solid var(--line)}
table.data td{padding:14px 12px;border-bottom:1px solid #f0f0f0;vertical-align:middle}
table.data .lk{color:var(--red);font-weight:700;font-size:13px}
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 9px;white-space:nowrap}
.tag.ok{background:#EAF6EE;color:var(--green)}
.tag.go{background:#FFEDEC;color:var(--red)}
.tag.wait{background:#F3F3F3;color:#6a6a6a}
.tag.prep{background:#FFF6E6;color:var(--amber)}
.track{display:flex;margin:6px 0 18px}
.track .st{flex:1;position:relative;padding-top:26px;font-size:12.5px;color:#9a9a9a;text-align:center}
.track .st::before{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:13px;
  height:13px;border-radius:50%;background:#e0e0e0}
.track .st::after{content:"";position:absolute;top:11px;left:50%;width:100%;height:2px;background:#e8e8e8}
.track .st:last-child::after{display:none}
.track .st.done{color:var(--ink);font-weight:700}
.track .st.done::before,.track .st.done::after{background:var(--red)}
.addr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.addrcard{border:1px solid var(--line);padding:18px;position:relative}
.addrcard.def{border-color:var(--red)}
.addrcard .badge{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 9px}
.addrcard p{margin:0;color:#5a5a5a;font-size:13.5px;line-height:1.6}
.addrcard .acts{margin-top:14px;display:flex;gap:16px;font-size:13px}
.addrcard .acts a{text-decoration:underline;color:#6a6a6a}

/* ---------- pied de page ---------- */
.footer{background:#2B2B2B;color:#9f9f9f;font-size:12.5px;padding:34px 0 18px;margin-top:20px}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:26px}
.footer h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin:0 0 14px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:8px}
.footer a:hover{color:#fff}
.footer .about p{margin:0 0 14px;line-height:1.7;color:#a9a9a9}
.footer .about img{height:38px;margin-bottom:12px}
.footer .payline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  padding:0 0 14px;border-bottom:1px solid #3d3d3d;margin-bottom:14px;border-top:1px solid #3d3d3d;padding-top:14px}
.footer .payline span{background:#3c3c3c;border-radius:3px;padding:5px 11px;font-size:11px;color:#ddd}
.footer .payline em{font-style:normal;color:#8f8f8f;font-size:11.5px;margin-right:6px}
.footer .legalrow{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center}
.footer .legalrow ul{display:flex;gap:16px}
.chat{position:fixed;right:22px;bottom:22px;background:var(--red);width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -8px rgba(226,35,26,.8);z-index:50}
.chat svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8}

/* ---------- responsive ---------- */
@media(max-width:1180px){.grid,.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1050px){
  .account{grid-template-columns:1fr;gap:24px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .addr,.frow{grid-template-columns:1fr}
}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .side.filters{display:none}
  .side.filters.open{display:block;border:1px solid var(--line);padding:16px;margin-bottom:18px}
  .filterbtn{display:block;border:1px solid #cfcfcf;padding:12px 16px;font-size:13.5px;font-weight:700;
    margin-bottom:16px;width:100%;background:#fff}
  .grid,.products{grid-template-columns:repeat(2,1fr)}
  .product{grid-template-columns:1fr;gap:34px}
  .hero .wrap{grid-template-columns:1fr}
  .trust .wrap{grid-template-columns:1fr}
  .trust div{border-right:0;border-bottom:1px solid var(--line);justify-content:flex-start}
  .trust div:last-child{border-bottom:0}
  .footer .cols{grid-template-columns:1fr 1fr}
  table.cart thead{display:none}
  table.cart td{display:block;border:0;padding:8px 0}
  table.cart tr{display:block;border-bottom:1px solid var(--line);padding:16px 0}
  table.cart td.c,table.cart td.r{text-align:left}
}
@media(max-width:820px){
  .burger{display:flex}
  .mainnav,.search{display:none}
  .header .wrap{position:relative;justify-content:center;gap:0;height:64px}
  .header .logo{position:absolute;left:50%;transform:translateX(-50%)}
  .header .logo img{height:34px}
  .burger{position:absolute;left:6px}
  .utilbar .wrap{gap:14px;height:36px;font-size:12px;justify-content:space-between}
  .promobar .run{font-size:11.5px}
  .promobar .run i{padding:0 18px}
  .wrap{padding:0 16px}
  .sitebanner{aspect-ratio:2/1}
}
@media(max-width:620px){
  .grid,.products{grid-template-columns:1fr}
  .hero h1{font-size:26px}
  .info h1{font-size:19px;line-height:1.4}
  .pricebox .now{font-size:26px}
  .btn-cart,.btn-buy{width:100%;min-width:0;padding:15px 10px}
  .btn,.btn-out{display:block;text-align:center;margin:0 0 10px}
  .footer .cols{grid-template-columns:1fr}
  .acc label{flex-wrap:wrap}
  .acc .ap{width:100%;text-align:left;padding-left:30px;margin-left:0}
  .steps span{padding:0 6px;font-size:11.5px}
  .steps em{width:10px}
  .next,.save{width:100%}
  table.spec th{width:auto;display:block;border-bottom:0}
  table.spec td{display:block;border-top:0}
  .tblwrap{overflow-x:auto}
}
@media(max-width:520px){
  .utilbar .acct i,.utilbar .acct .creer{display:none}
  .utilbar .ic span:not(.count){display:none}
}