@font-face{font-family:Futura;src:url(/assets/fonts/DysonFutura-Light.woff2) format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Futura;src:url(/assets/fonts/DysonFutura-Book.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Futura;src:url(/assets/fonts/DysonFutura-Medium.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

/* Couleurs relevées au pixel sur les captures de _data/ref : le vert d'appel à l'action,
   le bleu des prix remisés et des étiquettes, l'or des étoiles, le gris des filets. */
:root{
  --ink:#000; --paper:#fff; --wash:#f2f2f2; --page:#fbfbfb; --line:#dcdcdc;
  --grey:#6a6a6a; --soft:#8f8f8f;
  --acc:#79b928; --acc-d:#6aa622; --violet:#7b2fbf;
  --blue:#0066cc; --gold:#ffcc00; --new:#ac5d00; --sale:#0066cc;
  --font:Futura,"Helvetica Neue",Arial,sans-serif;
  --maxw:1360px; --head:104px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Un enfant de grille ou de flex vaut `min-width:auto` par défaut : sa largeur mini de contenu
   devient un plancher qui élargit toute la page. C'est ce qui rendait la fiche produit large de
   670 px sur un téléphone de 390 px. On remet ce plancher à zéro partout où on empile. */
.pdp>*,.grid>*,.grid--3>*,.grid--2>*,.rail>*,.tiles>*,.trip>*,.box>*,.spec>*,.feat>*,
.split>*,.tech>*,.serv__in>*,.foot__g>*,.card,.card__t,.bar>*{min-width:0}
.card__n,.crumb,.buy h1,.prose{overflow-wrap:break-word}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:300;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
/* Un `height` en attribut HTML est un indice de présentation : il fixe la hauteur et rend
   `aspect-ratio` inopérant. Toute image à rapport imposé doit donc porter `height:auto`. */
img[width][height]{height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-weight:300;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.2vw,52px);line-height:1.08}
h2{font-size:clamp(24px,2.9vw,38px);line-height:1.14}
h3{font-size:19px;line-height:1.3}
p{margin:0 0 14px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- barre d'annonce ---------- */
.ann{background:var(--ink);color:#fff;font-size:13.5px;text-align:center;position:relative;
  height:38px;overflow:hidden}
.ann__msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
  opacity:0;transition:opacity .45s;padding:0 14px}
.ann__msg.is-on{opacity:1}
.ann b{font-weight:500}
.cd{font-variant-numeric:tabular-nums;font-weight:500}
.ann__s{display:none}
@media(max-width:700px){.ann__l{display:none}.ann__s{display:inline}}

/* ---------- barre pays, au-dessus de tout, comme la source ---------- */
.ctry{background:var(--wash);font-size:12.5px;color:#333}
.ctry__in{max-width:var(--maxw);margin:0 auto;padding:7px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.ctry__b{display:flex;align-items:center;gap:8px;border:1px solid #c8c8c8;background:#fff;
  padding:5px 10px;border-radius:2px;font-size:12.5px;font-family:inherit}
.ctry__f{width:17px;height:12px;flex:0 0 auto;border-radius:1px}
.ctry__x{background:none;border:0;font-size:17px;line-height:1;color:#555;padding:0 2px}
@media(max-width:700px){.ctry{display:none}}

/* ---------- en-tete ---------- */
.top{background:var(--ink);color:#fff;position:sticky;top:0;z-index:60}
.top__u{display:flex;align-items:center;justify-content:flex-end;gap:22px;font-size:12.5px;
  padding:7px 22px;max-width:var(--maxw);margin:0 auto;color:#cfcfcf}
.top__u a:hover{color:#fff}
.top__m{display:flex;align-items:center;gap:26px;padding:0 22px 12px;max-width:var(--maxw);margin:0 auto}
.mark{display:block;width:104px;color:#fff}
.mark svg{width:100%;height:auto;display:block}
.nav{display:flex;gap:22px;font-size:14.5px;flex:1}
.nav>li{list-style:none;position:relative}
.nav a{padding:10px 0;display:block;color:#e9e9e9}
.nav a:hover,.nav .is-on>a{color:#fff;box-shadow:inset 0 -2px 0 #fff}
.tools{display:flex;align-items:center;gap:14px;margin-left:auto}
.srch{display:flex;align-items:center;gap:8px;background:#fff;border-radius:22px;padding:6px 14px;
  width:230px}
.srch input{border:0;outline:0;font-family:inherit;font-size:14px;width:100%;background:none}
.icon{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6}
.ibtn{background:none;border:0;color:#fff;padding:6px;position:relative;display:grid;place-items:center}
.badge{position:absolute;top:0;right:0;background:var(--acc);color:#000;font-size:10.5px;
  min-width:16px;height:16px;border-radius:9px;display:none;place-items:center;font-weight:500;padding:0 4px}
.burger{display:none}
/* menu deroulant */
.mega{position:absolute;left:0;top:100%;background:#fff;color:#000;min-width:260px;padding:16px 0;
  box-shadow:0 18px 40px rgba(0,0,0,.16);display:none;z-index:70}
.nav>li:hover .mega{display:block}
.mega a{color:#111;padding:8px 22px;font-size:14.5px;white-space:nowrap}
.mega a:hover{background:var(--wash);box-shadow:none}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  padding:13px 26px;font-size:15px;font-weight:400;border-radius:2px;transition:.16s;line-height:1}
.btn--go{background:var(--acc);color:#000;border-color:var(--acc)}
.btn--go:hover{background:var(--acc-d);border-color:var(--acc-d)}
.btn--dark{background:#000;color:#fff;border-color:#000}
.btn--dark:hover{background:#222}
.btn--line{background:#fff;color:#000;border-color:#b9b9b9}
.btn--line:hover{border-color:#000}
.btn--light{background:#fff;color:#000;border-color:#fff}
.btn--wide{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- hero ---------- */
.hero{position:relative;background:#111;color:#fff;min-height:520px;display:flex;align-items:center;
  overflow:hidden}
.hero img,.hero picture{position:absolute;inset:0;width:100%;height:100%}
.hero img{object-fit:cover;object-position:center}
.hero:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 46%,rgba(0,0,0,0) 72%)}
.hero--light:before{background:linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.4) 50%,
  rgba(255,255,255,0) 76%)}
.hero__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:52px 22px;width:100%}
.hero__c{max-width:540px}
.hero h1{margin-bottom:14px}
.hero p{font-size:18px;max-width:430px;color:#ededed}
.hero__k{display:inline-block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;font-weight:500}
.hero--light{color:#000}
.hero--light p{color:#333}
@media(max-width:860px){.hero{min-height:430px}.hero__in{padding:36px 22px}
  .hero:before{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,.82) 100%)}
  .hero--light:before{background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.3) 40%,
    rgba(255,255,255,.9) 100%)}}

/* ---------- banniere de gamme ---------- */
.hero--sky{min-height:610px}
.hero--sky img{object-position:center 46%}
.hero--sky .hero__k{color:#5a5a5a}
.hero--line img{object-position:center 58%}
.hero--line{min-height:560px}
/* La bannière ne s'empile (image puis texte) qu'à partir du téléphone. Entre 701 et 860 px
   la tablette garde le recadrage large et le texte par-dessus : sinon l'image mange l'écran
   entier et le titre passe sous la ligne de flottaison. */
@media(max-width:860px) and (min-width:701px){
  .hero--sky{min-height:440px}
  .hero--sky:before{background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.42) 46%,rgba(255,255,255,.12) 100%)}
  .hero--line{min-height:440px}
}
@media(max-width:700px){
  .hero--sky{min-height:0;display:block;background:#f3ece7}
  .hero--sky picture{position:relative;height:auto;display:block}
  .hero--sky img{position:relative;height:auto;width:100%;object-fit:contain}
  .hero--sky:before{background:none}
  .hero--sky .hero__in{padding:26px 18px 34px}
  .hero--line{min-height:0;display:block;background:#0d0e11}
  .hero--line picture{position:relative;height:auto;display:block}
  .hero--line img{position:relative;height:auto;width:100%;object-fit:contain;object-position:center}
  .hero--line:before{background:none}
  .hero--line .hero__in{padding:30px 18px 6px}
  .hero--line .hero__c{max-width:none}
}

/* ---------- section visuelle intercalee ---------- */
.band{position:relative;min-height:420px;display:flex;align-items:center;overflow:hidden;color:#fff}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.42) 44%,rgba(0,0,0,.05) 74%)}
.band__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:46px 22px;width:100%}
.band__c{max-width:520px}
.band__c p{color:#e8e8e8;font-size:16.5px;margin:12px 0 0}
.band--tall{min-height:520px}
.band--light{color:#000}
.band--light:before{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 26%,
  rgba(255,255,255,.55) 46%,rgba(255,255,255,0) 72%)}
.band--light .band__c p{color:#333}
.band--light .hero__k{color:#5c5c5c}
@media(max-width:860px){
  .band{min-height:360px}
  .band:before{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.25) 35%,rgba(0,0,0,.86) 100%)}
  .band--light:before{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.35) 32%,
    rgba(255,255,255,.94) 100%)}
  .band__in{padding:32px 18px}
}

/* ---------- sections ---------- */
.sec{padding:56px 0}
.sec--wash{background:var(--wash)}
.sec--ink{background:#000;color:#fff}
.sec__h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.sec__h p{color:var(--grey);margin:6px 0 0;font-size:15.5px;max-width:640px}
.sec--ink .sec__h p{color:#bdbdbd}
.lnk{font-size:14.5px;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
/* La source centre les titres de section et pose le lien sous le titre, pas à sa droite. */
.sec__h--mid{display:block;text-align:center;margin-bottom:30px}
.sec__h--mid h2{font-weight:300}
.sec__h--mid p{margin:8px auto 0;max-width:620px}

/* ---------- titre de page centré, comme les pages de gamme de la source ---------- */
.ptitle{text-align:center;padding:40px 0 6px}
.ptitle h1{font-size:clamp(28px,3.4vw,40px)}
.ptitle p{color:var(--grey);margin:10px 0 0;font-size:16px}

/* ---------- « Explore by category » : photo, puis libellé SOUS la photo ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.cat{display:block}
.cat img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--wash)}
.cat b{display:block;text-align:center;font-weight:400;font-size:15.5px;padding:14px 4px 0}
.cat:hover b{text-decoration:underline}
@media(max-width:900px){.cats{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(max-width:600px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ---------- « Meet the range » : diapositive claire puis diapositive noire ---------- */
.range{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:var(--wash);
  min-height:420px;overflow:hidden}
.range__c{padding:48px 56px}
.range__c h3{font-size:clamp(21px,2.4vw,30px);font-weight:300;line-height:1.2}
.range__c p{margin:14px 0 0;color:#444;font-size:16px;max-width:460px}
.range img{width:100%;height:100%;object-fit:cover;min-height:420px}
.range--ink{background:#000;color:#fff}
.range--ink p{color:#c9c9c9}
.range--ink .range__c{order:2}
.range--ink img{order:1}
@media(max-width:860px){
  .range,.range--ink{grid-template-columns:1fr}
  .range__c{padding:30px 18px;order:2}
  .range img{order:1;min-height:0;aspect-ratio:16/10}
}

/* ---------- bande d'assistance, en violet comme la source ---------- */
.own{background:var(--violet);color:#fff;padding:26px 0 30px}
.own h4{font-weight:300;font-size:22px;margin:0 0 18px}
.own__g{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.own__c{display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.own__c svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.3}
.own__c span{border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;align-self:flex-start}
@media(max-width:820px){.own__g{grid-template-columns:repeat(2,1fr);gap:18px}}

/* ---------- bande « Contact us » ---------- */
.cont{background:var(--page);border-top:1px solid var(--line);padding:26px 0 34px}
.cont h4{font-weight:300;font-size:22px;margin:0 0 18px}
.cont__g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:820px}
.cont__c{display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:#333}
.cont__c svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.3}
@media(max-width:700px){.cont__g{grid-template-columns:1fr;gap:16px}}

/* ---------- notes de bas de page, en très petit comme la source ---------- */
.fnote{font-size:11.5px;color:#767676;line-height:1.7;padding:26px 0 8px}
.fnote sup{font-size:9px}

/* ---------- grilles et rails ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:14px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}
  .grid--row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.grid,.grid--3{grid-template-columns:repeat(2,1fr);gap:12px}}
/* sur mobile : defilement horizontal, jamais d'empilement */
@media(max-width:700px){
  /* la gouttière du rail doit égaler celle de .wrap (18px sous 700px) */
  .rail{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:10px;margin:0 -18px;padding-left:18px;padding-right:18px}
  .rail>*{flex:0 0 74%;scroll-snap-align:start}
  .rail--s>*{flex:0 0 46%}
  .rail::-webkit-scrollbar{height:3px}
  .rail::-webkit-scrollbar-thumb{background:#c9c9c9}
}

/* ---------- carte produit : anatomie relevée sur la source ----------
   étiquette bleue débordant en haut à gauche, packshot sur blanc, mention NEW orange,
   titre, note sur cinq, nombre d'accessoires, pastilles de finition, filet, puis le bloc
   prix (bleu quand remisé) et le bouton vert pleine largeur. */
.card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
  position:relative;transition:border-color .18s}
.card:hover{border-color:#9a9a9a}
.card__i{position:relative;background:#fff;aspect-ratio:1/1;overflow:hidden}
.card__i img{width:100%;height:100%;object-fit:contain;padding:18px;transition:transform .3s}
.card:hover .card__i img{transform:scale(1.03)}
.card__t{padding:0 18px 16px;display:flex;flex-direction:column;flex:1;gap:8px}
.card__new{color:var(--new);font-size:13px;font-weight:500;letter-spacing:.02em}
.card__n{font-size:16px;font-weight:400;line-height:1.35}
.card__f{font-size:13px;color:var(--grey)}
.card__sw{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.card__sw span{width:26px;height:26px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.card__sw span:first-child{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 1.5px #000}
.card__pb{border-top:1px solid var(--line);padding:14px 18px 18px;margin-top:auto}
.card__p{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.card__p b{font-size:23px;font-weight:400;color:var(--blue)}
.card__p b.is-full{color:var(--ink)}
.card__was{color:var(--grey);text-decoration:line-through;font-size:14px}
.card__save{color:var(--blue);font-size:14px}
.card__b{margin-top:14px}
.card__b .btn{width:100%;padding:12px 18px}
/* étiquette : elle déborde au-dessus du bord de la carte, comme sur la source */
.tag{position:absolute;top:-13px;left:16px;background:var(--blue);color:#fff;font-size:13px;
  padding:4px 12px;font-weight:500;z-index:2;border-radius:2px}
.tag--new{background:#000}
.tag--out{background:#7a7a7a}
.rate{display:flex;align-items:center;gap:7px;font-size:14px;color:#333}
.stars{color:var(--gold);letter-spacing:2px;font-size:14px}

/* ---------- tuiles de rayon ---------- */
.tile{position:relative;display:block;overflow:hidden;background:var(--wash);aspect-ratio:4/3}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.tile:hover img{transform:scale(1.05)}
.tile__c{position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0))}
.tile__c b{font-size:21px;font-weight:400;display:block}
.tile__c span{font-size:13.5px;color:#e3e3e3}
.tile--tall{aspect-ratio:3/2}
/* rangée de tuiles de rayon : douze colonnes, chaque tuile porte sa largeur */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:300px;gap:18px}
.tiles>.tile{grid-column:span var(--span,4);aspect-ratio:auto;height:100%}
@media(max-width:1080px){.tiles{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}
  .tiles>.tile{grid-column:span 1}}

/* ---------- bandeau technologie ---------- */
.tech{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px}
.tech img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:860px){.tech img{aspect-ratio:16/10}}
.tech__c{padding:8px 0}
.tech__c h2{margin-bottom:12px}
.tech__c p{color:#c9c9c9;font-size:16.5px}
.sec--ink .lnk{color:#fff}
@media(max-width:860px){.tech{grid-template-columns:1fr;gap:20px}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.split__i{background:var(--wash);min-height:380px}
.split__i img{width:100%;height:100%;object-fit:cover}
.split__c{padding:46px;display:flex;flex-direction:column;justify-content:center;background:var(--wash)}
@media(max-width:860px){.split{grid-template-columns:1fr}.split__c{padding:30px 22px}}

/* ---------- arguments ---------- */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.feat__i{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.3;margin-bottom:12px}
.feat b{display:block;font-weight:400;font-size:16.5px;margin-bottom:5px}
.feat p{font-size:14px;color:var(--grey);margin:0}
.sec--ink .feat p{color:#b5b5b5}
@media(max-width:820px){.feat{grid-template-columns:repeat(2,1fr);gap:20px}}

/* ---------- reassurance ---------- */
.serv{border-top:1px solid var(--line);background:var(--wash)}
.serv__in{display:grid;grid-template-columns:auto repeat(3,1fr);gap:26px;align-items:center;
  padding:26px 22px;max-width:var(--maxw);margin:0 auto}
.serv h4{font-weight:400;font-size:17px;margin:0}
.serv__c{display:flex;gap:12px;align-items:flex-start}
.serv__c b{display:block;font-weight:400;border-bottom:1px solid currentColor;padding-bottom:1px}
.serv__c span{font-size:13.5px;color:var(--grey)}
.serv svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.3;flex:0 0 auto}
@media(max-width:900px){.serv__in{grid-template-columns:1fr;gap:16px}}

/* ---------- avis ---------- */
.rev{background:#fff;border:1px solid var(--line);padding:22px}
.rev p{font-size:15px}
.rev b{font-weight:400;font-size:14px}
.rev small{color:var(--grey);font-size:13px}

/* ---------- fiche produit ---------- */
.pdp{display:grid;grid-template-columns:1.25fr .75fr;gap:46px;padding:26px 0 0;align-items:start}
.gal__m{background:var(--wash);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.gal__m img{width:100%;height:100%;object-fit:contain;padding:20px}
.gal__m.is-life img{object-fit:cover;padding:0}
.gal__t{display:flex;gap:10px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.gal__t button{flex:0 0 84px;height:84px;background:var(--wash);border:1px solid transparent;padding:0;
  overflow:hidden}
.gal__t button.is-on{border-color:#000}
.gal__t img{width:100%;height:100%;object-fit:contain}
.buy{position:sticky;top:calc(var(--head) + 14px)}
.buy h1{font-size:clamp(23px,2.5vw,31px);margin-bottom:10px}
.crumb{font-size:12.5px;color:var(--grey);margin-bottom:12px}
.crumb a:hover{text-decoration:underline}
.buy__p{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:16px 0 4px}
.buy__p b{font-size:31px;font-weight:400}
.buy__p .card__was{font-size:17px}
.save{background:#e8f1fc;color:#0b4fa0;font-size:13px;padding:4px 9px;font-weight:400}
.buy__vat{font-size:12.5px;color:var(--grey);margin-bottom:18px}
.bul{margin:14px 0 18px;padding:0 0 0 18px;font-size:15px;color:#2c2c2c}
.bul li{margin-bottom:6px}
.sw{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
.sw a{border:1px solid var(--line);padding:5px;width:62px;height:62px;display:grid;place-items:center;
  background:var(--wash)}
.sw a.is-on{border-color:#000}
.sw img{width:100%;height:100%;object-fit:contain}
.lab{font-size:13.5px;color:var(--grey);margin-bottom:6px;display:block}
.acc{border-top:1px solid var(--line)}
.acc__b{width:100%;background:none;border:0;text-align:left;padding:16px 0;font-size:15.5px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:400}
.acc__b:after{content:"";width:9px;height:9px;border-right:1.4px solid #000;border-bottom:1.4px solid #000;
  transform:rotate(45deg) translateY(-3px);transition:.2s;flex:0 0 auto}
.acc.is-on .acc__b:after{transform:rotate(225deg) translateY(-1px)}
.acc__p{display:none;padding:0 0 18px;font-size:14.5px;color:#3a3a3a}
.acc.is-on .acc__p{display:block}
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.spec b{display:block;font-size:23px;font-weight:400}
.spec span{font-size:13px;color:var(--grey)}
@media(max-width:820px){.spec{grid-template-columns:repeat(2,1fr)}}
.box{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.box div{background:var(--wash);aspect-ratio:1/1;display:grid;place-items:center;padding:8px}
@media(max-width:820px){.box{grid-template-columns:repeat(3,1fr)}}
.trip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.trip img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
@media(max-width:820px){.trip{grid-template-columns:repeat(3,1fr);gap:8px}}
.buy__desc>p{margin-top:12px}
.buy__acc{margin-top:26px}
@media(max-width:900px){
  .pdp{grid-template-columns:1fr;gap:24px}
  .buy{position:static;display:flex;flex-direction:column}
  /* mobile : titre, avis, finition, PRIX, achat, PUIS la description (consigne 08/08) */
  .buy__head{order:1}
  .buy__opt{order:2}
  .buy__buy{order:3}
  .buy__desc{order:4;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
  .buy__desc>p{margin-top:0}
  .buy__acc{order:5}
}
/* barre d'achat collante mobile */
.stick{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:10px 16px;display:none;align-items:center;gap:14px;z-index:55;
  box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.stick.is-on{display:flex}
.stick b{font-size:18px;font-weight:500;white-space:nowrap}
.stick .btn{flex:1}
@media(min-width:901px){.stick{display:none!important}}

/* ---------- listing ---------- */
.lban{position:relative;min-height:300px;display:flex;align-items:flex-end;background:#111;color:#fff;
  overflow:hidden}
.lban img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lban:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.22) 34%,rgba(0,0,0,.9) 100%)}
.lban__c{position:relative;z-index:2;padding:34px 22px;max-width:var(--maxw);margin:0 auto;width:100%}
.lban h1{margin-bottom:8px;text-shadow:0 1px 24px rgba(0,0,0,.5)}
.lban p{color:#fff;max-width:560px;margin:0;font-size:16.5px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.bar select{font-family:inherit;font-size:14.5px;padding:9px 12px;border:1px solid var(--line);
  background:#fff;border-radius:2px}
.chips{display:flex;gap:9px;overflow-x:auto;padding:16px 0}
.chips a{border:1px solid var(--line);padding:8px 15px;font-size:14px;white-space:nowrap;border-radius:2px}
.chips a.is-on{border-color:#000;background:#000;color:#fff}

/* ---------- tiroirs ---------- */
.veil{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:.22s;z-index:80}
.veil.is-on{opacity:1;pointer-events:auto}
.draw{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:#fff;z-index:90;
  transform:translateX(102%);transition:transform .26s;display:flex;flex-direction:column}
.draw.is-on{transform:none}
.draw--l{left:0;right:auto;transform:translateX(-102%);width:340px}
.draw__h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  border-bottom:1px solid var(--line)}
.draw__h b{font-weight:400;font-size:17px}
.draw__b{overflow-y:auto;padding:18px 20px;flex:1}
.draw__f{border-top:1px solid var(--line);padding:16px 20px}
.x{background:none;border:0;font-size:24px;line-height:1;padding:0 4px}
/* ---------- lignes de panier, tiroir et page ---------- */
.bl{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.bl__i{flex:0 0 88px;background:var(--wash);display:block}
.bl__i img{width:88px;height:88px;object-fit:contain;padding:6px}
.bl__c{flex:1;min-width:0}
.bl__n{display:block;font-size:15px;line-height:1.35;overflow-wrap:break-word}
.bl__n:hover{text-decoration:underline}
.bl__f{display:block;color:var(--grey);font-size:13px;margin:3px 0 10px}
.bl__r{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bl__p{text-align:right;white-space:nowrap}
.bl__p b{font-weight:500;font-size:16px}
.bl__p span{display:block;color:var(--grey);font-size:12.5px;margin-top:2px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.qty button{width:32px;height:32px;background:none;border:0;font-size:16px}
.qty span{min-width:30px;text-align:center;font-size:14.5px}
.rm{background:none;border:0;font-size:13px;color:var(--grey);text-decoration:underline;padding:0}
.rm:hover{color:#000}

/* page panier : articles à gauche, récapitulatif collant à droite */
.bskt{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:start}
.bskt__h{font-size:14px;color:var(--grey);padding-bottom:6px;border-bottom:1px solid var(--line)}
.bskt__s{border:1px solid var(--line);padding:22px;position:sticky;top:calc(var(--head) + 14px)}
.bskt__s h2{font-size:20px;margin-bottom:14px}
.bskt__s .btn{margin-top:16px}
.bskt__t{list-style:none;padding:0;margin:18px 0 0;font-size:13px;color:#444}
.bskt__t li{padding:5px 0 5px 20px;position:relative}
.bskt__t li:before{content:"";position:absolute;left:0;top:11px;width:9px;height:5px;
  border-left:1.6px solid var(--acc-d);border-bottom:1.6px solid var(--acc-d);transform:rotate(-45deg)}
.bskt__pay{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.bskt__pay span{border:1px solid var(--line);font-size:10px;padding:4px 6px;color:#666;letter-spacing:.04em}
@media(max-width:900px){
  .bskt{grid-template-columns:1fr;gap:26px}
  .bskt__s{position:static}
}

/* panier vide */
.empty{text-align:center;padding:44px 0;color:var(--grey)}
.empty svg{width:38px;height:38px;stroke:#b6b6b6;fill:none;stroke-width:1.3;margin:0 auto 14px}
.empty b{display:block;color:#000;font-size:19px;font-weight:400;margin-bottom:8px}
.empty p{max-width:340px;margin:0 auto 20px;font-size:14.5px}

.sum{display:flex;justify-content:space-between;font-size:14.5px;padding:6px 0}
.sum__vat{font-size:12.5px;color:var(--grey);margin:6px 0 0}
.sum--t{font-size:18px;font-weight:500;border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.urg{background:#e8f1fc;color:#0b4fa0;font-size:13.5px;padding:10px 13px;margin:14px 0}
.xs{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.xs h4{font-size:14.5px;font-weight:400;margin:0 0 10px}
.xs__l{display:flex;gap:11px;align-items:center;padding:8px 0}
.xs__l img{width:52px;height:52px;object-fit:contain;background:var(--wash)}
.xs__l b{display:block;font-size:13.5px;font-weight:400}
.xs__l span{font-size:13px;color:var(--grey)}
.xs__l button{margin-left:auto;background:none;border:1px solid var(--line);padding:7px 13px;font-size:13px}
.mnav a{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.mnav .sub a{padding-left:14px;font-size:14.5px;color:#444}
.mnav .sub{display:none}
.mnav .sub.is-on{display:block}
.mnav button{width:100%;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;
  padding:13px 0;font-size:16px;display:flex;justify-content:space-between;font-family:inherit}

/* ---------- pied de page ---------- */
.foot{background:#000;color:#c7c7c7;padding:46px 0 0;font-size:14px;margin-top:0}
.foot__g{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.foot h4{color:#fff;font-size:14.5px;font-weight:500;margin:0 0 14px}
.foot a{display:block;padding:5px 0}
.foot a:hover{color:#fff}
.foot__b{border-top:1px solid #262626;margin-top:36px;padding:18px 0;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#8d8d8d}
.pay{display:flex;gap:7px;flex-wrap:wrap}
.pay span{background:#151515;border:1px solid #2a2a2a;font-size:10.5px;padding:4px 7px;letter-spacing:.05em}
.foot .mark{color:#fff;width:92px;margin-bottom:16px}
@media(max-width:820px){
  .foot__g{grid-template-columns:1fr}
  .foot__col{border-bottom:1px solid #262626}
  .foot__col h4{padding:14px 0;margin:0;display:flex;justify-content:space-between;cursor:pointer}
  .foot__col h4:after{content:"+";font-weight:300;font-size:18px}
  .foot__col.is-on h4:after{content:"\2212"}
  .foot__col div{display:none;padding-bottom:12px}
  .foot__col.is-on div{display:block}
}


/* ---------- page de gamme : bannière muette, titre centré, barre d'outils ---------- */
.lban--mute{min-height:0;display:block;background:var(--wash)}
.lban--mute img{position:relative;width:100%;height:auto;aspect-ratio:24/10;object-fit:cover}
.lban--mute:before{display:none}
.shopall{text-align:center;font-size:clamp(21px,2.4vw,28px);font-weight:300;margin:34px 0 6px}
.bar__l{flex:1}
.bar__n{color:#333;font-size:14.5px}
.bar label{flex:1;text-align:right}
.faq.faq--wide{max-width:none}
.faq--wide .acc__b{font-size:16px;padding:18px 0}
@media(max-width:700px){
  .lban--mute img{aspect-ratio:16/10}
  .bar__l{display:none}
  .bar label{text-align:left}
}

/* ---------- doigts : toute commande atteint 44 px sous 820 px ----------
   Le pouce ne vise pas au pixel. On agrandit la zone cliquable sans grossir le dessin :
   soit par le remplissage, soit par un pseudo-élément qui étend la surface sensible. */
@media(max-width:820px){
  .x{width:44px;height:44px;display:grid;place-items:center;padding:0;margin-right:-8px}
  .ibtn{padding:11px}
  .qty button{width:40px;height:40px;font-size:17px}
  .qty span{min-width:34px;font-size:15px}
  .rm{position:relative;padding:12px 0 12px 12px}
  .chips a{padding:11px 15px}
  .bar select{padding:12px 12px}
  .xs__l button{padding:12px 14px}
  /* Le rembourrage vaut mieux qu'un pseudo-élément : la zone est réelle, donc mesurable.
     Le trait passe en soulignement, sinon il se détache du texte de onze pixels. */
  .lnk{display:inline-block;padding:11px 0;border-bottom:0;text-decoration:underline;
    text-underline-offset:5px}
  /* titre, accroche et lien empilés : côte à côte, la colonne de droite étranglait le texte */
  .sec__h{flex-direction:column;align-items:flex-start;gap:4px}
  .sec__h--mid{align-items:center}
  .acc__b{padding:18px 0}
  .foot__col h4{padding:16px 0}
  .mnav a,.mnav button{padding:15px 0}
  .sw a{width:56px;height:56px}
  .gal__t button{flex:0 0 72px;height:72px}
  .ctry__x{width:44px;height:44px}
}

/* ---------- divers ---------- */
.note{font-size:12px;color:var(--soft);line-height:1.5}
.prose{max-width:820px}
.prose h2{margin:30px 0 10px;font-size:24px}
.prose h3{margin:22px 0 8px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:6px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);background:#000;color:#fff;
  padding:13px 22px;font-size:14.5px;opacity:0;pointer-events:none;transition:.24s;z-index:120}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.faq{max-width:900px}
@media(max-width:1020px){
  :root{--head:96px}
  .nav{display:none}
  .burger{display:grid}
  .srch{width:180px}
}
@media(max-width:700px){
  .srch{display:none}
  .top__u{display:none}
  /* logo au centre : trois colonnes dont les deux extrêmes se partagent l'espace restant,
     le wordmark reste centré sur la page quelle que soit la largeur des icônes */
  .top__m{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0}
  .burger{justify-self:start}
  .mark{justify-self:center}
  .tools{justify-self:end;margin-left:0}
  .sec{padding:38px 0}
  .top__m{padding:12px 18px}
  .wrap{padding:0 18px}
  :root{--head:62px}
}