/* ══════════════════════════════════════════════════════════════════════════
   VERSANT — direction artistique « métal froid »
   Fond nuit, lumière rasante, un seul accent : le reflet bleuté de l'aluminium.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* Extrêmes volontairement rentrés : charbon plutôt que noir absolu,
     ivoire froid plutôt que blanc pur. Le contraste reste très élevé
     (15,4:1) mais l'écart de luminance ne brûle plus la rétine sur mobile. */
  --nuit:#15191B; --graphite:#1C2123;
  --acier:#8F999F; --brume:#C4CBCF; --papier:#E6E5E0;
  --acc:#A9BCC6;          /* accent sur fond sombre */
  --acc-clair:#4E626D;    /* accent sur fond clair — 5,6:1 sur l'ivoire */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --texte:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(1.15rem,4vw,5rem);
  --e:cubic-bezier(.22,.61,.36,1);
  --fg:var(--papier); --bg:var(--nuit);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--texte);
  font-size:clamp(1rem,.95rem+.25vw,1.1rem);line-height:1.6;overflow-x:hidden;
  transition:background .35s ease-out,color .35s ease-out}
body.clair{--fg:var(--nuit);--bg:var(--papier)}
img,svg{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,.dsp{font-family:var(--display);font-weight:600;font-stretch:118%;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(3rem,1rem+10.5vw,9.5rem);line-height:.86;text-transform:uppercase;font-weight:700}
h2{font-size:clamp(1.9rem,1rem+3.6vw,4.4rem);line-height:.98;text-transform:uppercase}
h3{font-size:clamp(1rem,.95rem+.4vw,1.25rem);letter-spacing:0;font-stretch:100%;text-transform:none;font-weight:600}
p{margin:0 0 1em}
.sur{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.sur::after{content:"";height:1px;flex:1;background:currentColor;opacity:.3}
.lede{font-size:clamp(1.1rem,1rem+.75vw,1.65rem);line-height:1.38;max-width:32ch;font-weight:300}
.mn{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em}
.att{opacity:.62}
.wrap{max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:clamp(4.5rem,10vw,11rem);position:relative}

.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.3;mix-blend-mode:overlay}
.grain svg{width:100%;height:100%}

.rideau{position:fixed;inset:0;z-index:300;background:var(--nuit);display:grid;place-items:center;transition:opacity .7s var(--e),visibility .7s}
.rideau.parti{opacity:0;visibility:hidden}
.rideau__mot{font-family:var(--display);font-weight:700;font-stretch:125%;letter-spacing:.5em;font-size:.9rem;color:var(--papier);text-transform:uppercase;padding-left:.5em}
.rideau__barre{width:min(240px,50vw);height:1px;background:#242A2E;margin-top:1.4rem;overflow:hidden}
.rideau__barre i{display:block;height:100%;width:0;background:var(--acc);animation:charge 1.1s var(--e) forwards}
@keyframes charge{to{width:100%}}

.hd{position:fixed;top:0;left:0;right:0;z-index:120;transition:background .5s var(--e)}
.hd::after{content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;background:currentColor;opacity:0;transition:opacity .5s}
.hd.dur{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px) saturate(1.2)}
.hd.dur::after{opacity:.14}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1rem,2vw,1.7rem) var(--gut);transition:padding .5s var(--e)}
.hd.dur .hd__in{padding-block:.85rem}
.logo{font-family:var(--display);font-weight:700;font-stretch:125%;font-size:.95rem;letter-spacing:.42em;text-transform:uppercase;text-decoration:none;padding-left:.4em}
.hd__nav{display:none;gap:2.2rem}
@media(min-width:1000px){.hd__nav{display:flex}}
.hd__nav a{font-family:var(--display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;position:relative;padding-block:.4rem;opacity:.78;transition:opacity .3s}
.hd__nav a:hover{opacity:1}
.hd__nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e)}
.hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd__act{display:flex;align-items:center;gap:.4rem}
.ib{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .9rem;background:none;border:1px solid transparent;color:inherit;cursor:pointer;font-family:var(--display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;transition:border-color .3s}
.ib:hover{border-color:color-mix(in srgb,currentColor 30%,transparent)}
.pastille{min-width:1.3rem;height:1.3rem;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--nuit);font-family:var(--mono);font-size:.66rem}
.pastille[hidden]{display:none}
@media(min-width:1000px){.ib--menu{display:none}}

.menu{position:fixed;inset:0;z-index:115;background:var(--nuit);color:var(--papier);display:grid;grid-template-rows:auto 1fr auto;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e);visibility:hidden}
.menu.ouvert{clip-path:inset(0 0 0 0);visibility:visible}
.menu__liens{align-self:center;padding:var(--gut);display:grid;gap:.2rem}
.menu__liens a{font-family:var(--display);font-weight:600;font-stretch:118%;font-size:clamp(2rem,9vw,4.5rem);line-height:1.08;text-transform:uppercase;text-decoration:none;opacity:0;transform:translateY(30px);transition:opacity .6s var(--e),transform .6s var(--e),color .3s}
.menu.ouvert .menu__liens a{opacity:1;transform:none}
.menu__liens a:hover{color:var(--acc)}
.menu__pied{padding:var(--gut);display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.55}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:56px;padding:1rem 2rem;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-family:var(--display);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:color .45s var(--e),border-color .45s}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--acc);transform:translateY(101%);transition:transform .45s var(--e)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--nuit);border-color:var(--acc)}
.btn--vide{background:transparent;color:var(--fg)}
.btn--vide:hover{color:var(--nuit)}
.btn--large{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn--ok{background:var(--acc);border-color:var(--acc);color:var(--nuit)}
.btn--ok::before{transform:translateY(0)}
@keyframes bat{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
.pastille.bat{animation:bat .45s var(--e)}
.gal__mini button{transition:border-color .3s var(--e),transform .3s var(--e)}
.gal__mini button:hover{transform:translateY(-2px)}
.carte{cursor:default}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.hero{min-height:100svh;display:grid;align-items:end;padding-block:clamp(7rem,14vh,11rem) clamp(2rem,5vh,4rem);position:relative;overflow:hidden}
.hero__halo{position:absolute;width:120vmax;height:120vmax;left:var(--mx,58%);top:var(--my,42%);translate:-50% -50%;background:radial-gradient(circle,rgba(169,188,198,.12),transparent 42%);pointer-events:none;transition:left .9s var(--e),top .9s var(--e)}
.hero__grid{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;position:relative}
@media(min-width:960px){.hero__grid{grid-template-columns:1.1fr .9fr}}
.hero h1{position:relative;z-index:2}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l i{display:block;font-style:normal;transform:translateY(105%);transition:transform 1.1s var(--e)}
.pret .hero h1 .l i{transform:none}
.hero h1 .l:nth-child(2) i{transition-delay:.09s}
.hero h1 .fin{font-weight:200;font-stretch:75%;font-family:var(--texte);text-transform:none;letter-spacing:-.01em}
.hero__bas{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end;justify-content:space-between;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);opacity:0;transform:translateY(20px);transition:opacity .9s .5s var(--e),transform .9s .5s var(--e)}
.pret .hero__bas{opacity:1;transform:none}
.prix{font-family:var(--display);font-size:clamp(1.4rem,1.1rem+1vw,2rem);font-weight:600;font-stretch:118%}
.hero__cta{display:flex;gap:.7rem;flex-wrap:wrap}
.hero__objet{position:relative;opacity:0;transform:scale(.94);transition:opacity 1.3s .2s var(--e),transform 1.4s .2s var(--e)}
.hero__media{margin:0;aspect-ratio:4/5;max-width:480px;margin-inline:auto;overflow:hidden;background:var(--graphite);
  border:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media .objet{width:70%;margin:auto}
.hero__points{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.5rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;opacity:.72}
.hero__points li{padding-left:1.1rem;position:relative}
.hero__points li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:1px;background:var(--acc)}
@media(min-width:960px){.hero{align-items:center}.hero__media{aspect-ratio:3/4}}
.pret .hero__objet{opacity:1;transform:none}
.defile{position:absolute;bottom:1.2rem;left:var(--gut);font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;opacity:.5;display:flex;align-items:center;gap:.7rem}
.defile i{display:block;width:34px;height:1px;background:currentColor;transform-origin:left;animation:tire 2.4s var(--e) infinite}
@keyframes tire{0%,100%{transform:scaleX(.2)}50%{transform:scaleX(1)}}

.ticker{border-block:1px solid color-mix(in srgb,currentColor 14%,transparent);padding-block:.9rem;overflow:hidden;white-space:nowrap}
.ticker__in{display:inline-flex;gap:3.5rem;animation:glisse 46s linear infinite;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.62}
@keyframes glisse{to{transform:translateX(-50%)}}
.ticker b{color:var(--acc);font-weight:400}

.objet{width:100%;position:relative;filter:drop-shadow(0 30px 45px rgba(0,0,0,.6))}
.hero__objet .objet{max-width:min(360px,72%);margin-inline:auto}
.objet svg{width:100%;height:auto}

.duo{display:grid;gap:clamp(1.6rem,4vw,4.5rem)}
@media(min-width:880px){.duo{grid-template-columns:.85fr 1.15fr}}
.bloc-photo{margin:2rem 0 0;aspect-ratio:1;max-width:380px;overflow:hidden;background:#EDEEEC;
  border:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.bloc-photo img{width:100%;height:100%;object-fit:cover}

.seq{height:165vh;background:linear-gradient(var(--bg),var(--nuit) 14vh);color:var(--papier);padding:0}
.seq__scene{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.seq__objet{position:absolute;width:min(46vmin,380px);transform:scale(var(--z,1)) translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0deg));transition:transform .12s linear}
.seq__txt{position:relative;z-index:2;text-align:center;padding-inline:var(--gut);pointer-events:none}
.seq__txt .p{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(92vw,720px);opacity:0;transform:translateY(24px);transition:opacity .55s var(--e),transform .55s var(--e)}
.seq__txt .p.on{opacity:1;transform:none}
.seq__txt h2{text-shadow:0 4px 44px rgba(0,0,0,.85)}
.seq__prog{position:absolute;left:var(--gut);bottom:2rem;right:var(--gut);height:1px;background:rgba(255,255,255,.14)}
.seq__prog i{display:block;height:100%;width:var(--p,0%);background:var(--acc)}

.rail{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gut);margin-inline:calc(var(--gut)*-1);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.carte{flex:0 0 min(78vw,360px);scroll-snap-align:start;border:1px solid color-mix(in srgb,currentColor 14%,transparent);padding:clamp(1.4rem,3vw,2.3rem);display:flex;flex-direction:column;gap:.7rem;min-height:270px;transition:background .4s}
.carte:hover{background:color-mix(in srgb,var(--acc) 7%,transparent)}
.carte__n{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--acc)}
.carte p{margin:0;font-size:.96rem;opacity:.8}

.edito{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.edito{grid-template-columns:.8fr 1.2fr}}
.edito__img{margin:0;aspect-ratio:4/3;max-width:640px;overflow:hidden;background:#EDEEEC;
  border:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.edito__img img{width:100%;height:100%;object-fit:cover}
.cotes{width:100%;max-width:620px;margin-inline:auto}
.cotes text{font-family:var(--mono);font-size:15px;fill:currentColor}
.cotes .l{stroke:currentColor;stroke-width:1;opacity:.45}

.fiche{display:grid;gap:clamp(1.6rem,4vw,4rem)}
@media(min-width:1000px){.fiche{grid-template-columns:1.1fr .9fr;align-items:start}}
.gal__vue{background:radial-gradient(120% 100% at 30% 15%,#20262A,#15191B 70%);aspect-ratio:1;max-width:620px;display:grid;place-items:center;overflow:hidden;position:relative;border:1px solid color-mix(in srgb,currentColor 12%,transparent)}
body.clair .gal__vue{background:radial-gradient(120% 100% at 30% 15%,#E4E7E8,#C6CDD1 70%)}
.gal__vue .objet{width:56%;transform:scale(var(--vz,1));transition:transform .6s var(--e)}
.gal__vue img{width:100%;height:100%;object-fit:cover;
  transform-origin:var(--cx,50%) var(--cy,50%);
  transform:scale(calc(var(--cs,1) * var(--vz,1)));transition:transform .6s var(--e)}
.gal__vue.zoom img{transform:scale(calc(var(--cs,1) * 1.45))}
.gal__vue--photo{background:#EDEEEC}
body.clair .gal__vue--photo{background:#EDEEEC}
.gal__mini button{padding:0;background:#EDEEEC;overflow:hidden}
.gal__mini img{width:100%;height:100%;object-fit:cover;transform-origin:var(--cx,50%) var(--cy,50%);transform:scale(var(--cs,1))}
.gal__mini .objet{padding:10%;background:var(--nuit)}
.gal__vue.zoom .objet{transform:scale(calc(var(--vz,1) * 1.6))}
.gal__mini{display:flex;gap:.5rem;margin-top:.5rem}
.gal__mini button{flex:1;aspect-ratio:1;max-width:92px;border:1px solid color-mix(in srgb,currentColor 14%,transparent);background:color-mix(in srgb,var(--fg) 5%,transparent);cursor:pointer;padding:10%;display:grid;place-items:center;transition:border-color .3s}
.gal__mini button[aria-current=true]{border-color:var(--acc)}
@media(min-width:1000px){.achat{position:sticky;top:11vh}}
fieldset{border:0;padding:0;margin:0 0 1.7rem}
legend,.lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;padding:0;margin-bottom:.7rem;display:block}
.opts{display:flex;gap:.5rem;flex-wrap:wrap}
.opt{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.05rem;min-height:48px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);cursor:pointer;font-size:.92rem;transition:border-color .3s,background .3s;position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.opt:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
.pt{width:15px;height:15px;border-radius:50%;border:1px solid rgba(150,160,165,.5)}
.qte{display:inline-flex;border:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.qte button{width:48px;height:48px;background:none;border:0;color:inherit;font-family:var(--mono);font-size:1rem;cursor:pointer}
.qte input{width:56px;border:0;border-inline:1px solid color-mix(in srgb,currentColor 18%,transparent);background:none;color:inherit;text-align:center;font-family:var(--mono);-moz-appearance:textfield}
.qte input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
details.acc{border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
details.acc:last-of-type{border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.acc summary{list-style:none;cursor:pointer;padding-block:1.15rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--mono)}
.acc[open] summary::after{content:"–"}
.acc__c{padding-bottom:1.4rem;font-size:.95rem}
.specs{margin:0;display:grid;gap:0}
@media(min-width:620px){.specs{grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,4vw,3rem)}}
.specs__item{padding-block:1.05rem;border-top:1px solid color-mix(in srgb,currentColor 13%,transparent)}
.specs__item:first-child,.specs__item:nth-child(2){border-top:0}
@media(max-width:619px){.specs__item:nth-child(2){border-top:1px solid color-mix(in srgb,currentColor 13%,transparent)}}
.specs dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc);margin-bottom:.45rem}
.specs dd{margin:0;font-family:var(--display);font-weight:600;font-stretch:110%;
  font-size:clamp(1.02rem,.97rem+.3vw,1.2rem);line-height:1.2;letter-spacing:-.01em}
.specs__note{display:block;margin-top:.4rem;font-family:var(--texte);font-weight:400;
  font-stretch:normal;font-size:.9rem;line-height:1.45;opacity:.62;letter-spacing:0}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-family:var(--display);font-weight:500;font-stretch:100%;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.58;padding:.55rem 1rem .55rem 0;vertical-align:top}
td{padding:.55rem 0;font-family:var(--mono);font-size:.8rem;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.chip{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.2em .5em;border:1px solid currentColor;margin-left:.5rem;vertical-align:middle}
.chip--ok{color:var(--acc)}
.chip--no{color:#C98A6B}
.chip--src{color:var(--acier)}

.faits{display:grid;gap:1px;background:color-mix(in srgb,currentColor 14%,transparent);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fait{background:var(--bg);padding:clamp(1.3rem,2.5vw,2rem)}
.fait h3{font-family:var(--display);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem}
.fait p{margin:0;font-size:.93rem;opacity:.75}

.voile{position:fixed;inset:0;z-index:130;background:rgba(5,8,9,.62);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .5s var(--e)}
.voile.on{opacity:1;pointer-events:auto}
.panier{position:fixed;inset:0 0 0 auto;z-index:140;width:min(430px,100%);background:var(--graphite);color:var(--papier);display:flex;flex-direction:column;translate:100% 0;transition:translate .55s var(--e)}
.panier.on{translate:0 0}
.panier__t{display:flex;justify-content:space-between;align-items:center;padding:1.3rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.12)}
.panier__c{flex:1;overflow-y:auto;padding:1.2rem 1.4rem}
.panier__p{padding:1.3rem 1.4rem;border-top:1px solid rgba(255,255,255,.12)}
.ligne{display:grid;grid-template-columns:66px 1fr auto;gap:1rem;padding-block:1.1rem;border-bottom:1px solid rgba(255,255,255,.1)}
.ligne__v{background:#15191B;padding:7px;border:1px solid rgba(255,255,255,.1);display:grid;place-items:center}
.nu{background:none;border:0;padding:0;color:inherit;cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-decoration:underline}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.3rem}
.tot strong{font-family:var(--display);font-size:1.3rem}

.pied{background:linear-gradient(var(--bg),var(--nuit) 9rem);color:var(--brume);padding:clamp(3rem,6vw,5rem) 0 1.6rem}
.pied a{opacity:.75;text-decoration:none}
.pied a:hover{opacity:1;text-decoration:underline}
.pied__g{display:grid;gap:2rem clamp(1.5rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
@media(min-width:900px){.pied__g{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.pied__marque{grid-column:1/-1}
@media(min-width:900px){.pied__marque{grid-column:auto}}
.pied h3{font-family:var(--display);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acier);margin-bottom:1rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.92rem}
.pied__b{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;opacity:.6}

.rev{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rev.vu{opacity:1;transform:none}
.alerte{border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-left:2px solid var(--acc);padding:1rem 1.2rem;font-size:.9rem;margin-block:1rem}
.saut{position:absolute;left:1rem;top:-4rem;z-index:400;background:var(--papier);color:var(--nuit);padding:.7rem 1rem;transition:top .2s}
.saut:focus{top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ruban{position:fixed;left:0;right:0;bottom:0;z-index:125;background:var(--acc);color:var(--nuit);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.55rem var(--gut);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ruban button{background:none;border:0;cursor:pointer;font:inherit;text-decoration:underline}
.blocage{position:fixed;inset:0;z-index:500;background:#7A1F12;color:#fff;display:grid;place-items:center;padding:2rem;text-align:center;font-family:var(--mono);font-size:.9rem;line-height:1.8}

@media(max-width:860px){
  .seq{height:135vh}
  .hero{min-height:auto;padding-block:6.5rem 3rem}
  .hero__media{aspect-ratio:1}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 100%}
  .panier__p{padding-bottom:calc(1.3rem + env(safe-area-inset-bottom))}
  .ruban{font-size:.6rem;padding:.45rem 1rem}
  .edito__img{aspect-ratio:4/3}
  .seq__objet{width:min(58vmin,300px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rev{opacity:1;transform:none}
  .hero h1 .l i{transform:none}
  .hero__bas,.hero__objet{opacity:1;transform:none}
  .seq__objet{transform:none!important}
  .grain{display:none}
}