@font-face{font-family:"Bodoni Moda";src:url("/themes/piotr/fonts/bodoni-moda.woff2") format("woff2-variations");font-weight:400 900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/themes/piotr/fonts/inter-tight.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
:root{
  --void:#000000;
  --ink:#0B0B0B;
  --ink-2:#161615;
  --paper:#E9E7E2;
  --paper-2:#D4D1CA;
  --grey:#83817B;
  --hair:rgba(233,231,226,.16);
  --hair-d:rgba(11,11,11,.18);
  --display:"Bodoni Moda",serif;
  --body:"Inter Tight",system-ui,sans-serif;
  --gut:clamp(18px,4vw,64px);
  --ease:cubic-bezier(.16,.84,.28,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--body);font-weight:700;
  font-size:clamp(14px,.92vw,17px);line-height:1.42;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--paper);color:var(--ink)}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;
  opacity:.34;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 5s steps(4) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px var(--gut);
  background:rgba(5,5,5,.76);
  backdrop-filter:blur(20px) saturate(.55);
  -webkit-backdrop-filter:blur(20px) saturate(.55);
  border-bottom:1px solid rgba(233,231,226,.13);
  color:var(--paper);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .6s var(--ease);
}
/* Pour rétablir la nav claire sur les sections claires, décommenter :
.nav[data-theme="light"]{background:rgba(233,231,226,.82);color:var(--ink);
  border-bottom-color:var(--hair-d)}
*/
.nav.hidden{transform:translateY(-101%)}
.nav__mark{display:flex;align-items:center;flex:0 0 auto;line-height:0}
.nav__mark svg{height:clamp(30px,3.1vw,42px);width:auto;fill:currentColor;overflow:visible}
.nav__mark text{font-weight:780}
.nav__side{display:flex;gap:clamp(14px,2.4vw,34px);
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.nav__side--l{justify-content:flex-end}
.nav__side--r{justify-content:flex-start}
.nav__mark{justify-self:center;margin:0 clamp(26px,4.4vw,72px)}
.nav__side a{position:relative;padding-bottom:2px;opacity:.72;transition:opacity .3s}
.nav__side a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav__side a:hover,.nav__side a:focus-visible{opacity:1}
.nav__side a:hover::after,.nav__side a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav__cart{position:absolute;right:calc(var(--gut) - 8px);top:50%;
  transform:translateY(-50%);display:grid;place-items:center;
  width:40px;height:40px;color:inherit;transition:opacity .3s}
.nav__cart svg{width:21px;height:21px}
.nav__cart:hover,.nav__cart:focus-visible{opacity:.72}
.nav__cart .count{position:absolute;top:1px;right:0;min-width:16px;height:16px;
  display:grid;place-items:center;padding:0 4px;
  background:var(--paper);color:var(--ink);
  font-size:9px;font-weight:800;line-height:1}
.nav__prog{position:absolute;left:0;bottom:-1px;height:1px;background:currentColor;width:0}
.burger{display:none;position:absolute;right:calc(var(--gut) - 9px);top:50%;
  transform:translateY(-50%);width:42px;height:42px;padding:0;
  background:none;border:0;color:inherit;cursor:pointer}
.burger span{position:absolute;left:9px;right:9px;height:1.5px;background:currentColor;
  transition:transform .4s var(--ease),opacity .3s}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;
  justify-content:center;gap:6px;padding:0 var(--gut);
  background:rgba(5,5,5,.94);
  backdrop-filter:blur(26px) saturate(.5);-webkit-backdrop-filter:blur(26px) saturate(.5);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.menu.open{opacity:1;visibility:visible;transition-delay:0s}
.menu a{font-family:var(--display);font-weight:600;font-size:clamp(34px,11vw,58px);
  line-height:1.06;letter-spacing:.02em;text-transform:uppercase;color:var(--paper);
  transform:scaleX(.62) translateY(14px);transform-origin:left center;opacity:0;
  transition:transform .55s var(--ease) var(--d,0ms),opacity .55s var(--ease) var(--d,0ms)}
.menu.open a{transform:scaleX(.62) translateY(0);opacity:1}
body.locked{overflow:hidden}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(90px,13vh,170px) var(--gut);isolation:isolate}
.sec--light{background:var(--paper);color:var(--ink)}
.sec--dark{background:var(--ink);color:var(--paper)}
.sec--void{background:var(--void);color:var(--paper)}

/* watermark title (Fabrice stand-in, condensé via SVG) */
.wmwrap{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.wm{position:sticky;top:10vh;display:block;width:auto;
  height:clamp(270px,60vh,640px);
  margin-left:calc(var(--gut) * -.3);
  opacity:.12;will-change:transform;overflow:visible}
.sec--light .wm{fill:var(--ink);opacity:.085}
.sec--dark .wm,.sec--void .wm{fill:var(--paper)}
.wm text{font-family:var(--display);font-weight:660}
.sectitle{display:none;margin:0 0 clamp(24px,4vh,40px)}
.sectitle svg{height:clamp(58px,15vw,110px);max-width:86%}
.ttl{display:block;width:auto;height:clamp(66px,12vw,175px);max-width:100%;fill:currentColor;overflow:visible}
.ttl text{font-family:var(--display);font-weight:660}

.inner{position:relative;z-index:2;max-width:1440px;margin:0 auto}

/* reveal */
.js .rv{position:relative;transform:translateY(20px);
  transition:transform 1s var(--ease) var(--d,0ms)}
.js .rv::after{content:"";position:absolute;inset:-1px -1px -1px -1px;z-index:9;
  pointer-events:none;background:var(--curtain,var(--ink));transform-origin:50% 100%;
  transition:transform 1s var(--ease) var(--d,0ms)}
.js .rv.in{transform:none}
/* Sur fond photographique, le rideau (opaque, couleur de section) apparaît
   comme une bande noire pendant la transition : on bascule sur un fondu. */
.js .pagehead .rv::after,.js .hero .rv::after,
.js .live__head::after,.js .duo .rv::after{display:none}
.js .pagehead .rv,.js .hero .rv,.js .live__head,.js .duo .rv{
  opacity:0;transition:transform 1s var(--ease) var(--d,0ms),
                       opacity .9s var(--ease) var(--d,0ms)}
.js .pagehead .rv.in,.js .hero .rv.in,
.js .live__head.in,.js .duo .rv.in{opacity:1}
.js .rv.in::after{transform:scaleY(0);visibility:hidden;
  transition:transform 1s var(--ease) var(--d,0ms),visibility 0s linear calc(var(--d,0ms) + 1s)}
.sec--light{--curtain:var(--paper)}
.sec--dark{--curtain:var(--ink)}
.sec--void,.duo,.hero{--curtain:var(--void)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  background:var(--void)}
.hero__media{position:relative;overflow:hidden;grid-column:2}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.22) brightness(.82);
  transform:scale(1.14);animation:heroZoom 2.6s var(--ease) .15s forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--void) 2%,rgba(0,0,0,.42) 34%,transparent 72%)}
.hero__body{grid-column:1;grid-row:1;z-index:3;align-self:end;
  padding:0 0 clamp(34px,7vh,80px) var(--gut);width:min(150%,1180px)}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey);margin-bottom:clamp(16px,3vh,32px)}
.tagwrap{margin-bottom:clamp(12px,2.2vh,26px)}
.hline{display:block;width:auto;height:clamp(112px,25vh,300px);max-width:100%;
  fill:var(--paper);overflow:visible}
.hline text{font-family:var(--display);font-weight:660}
.tag{width:min(52vw,540px);transform:rotate(-2.4deg);transform-origin:left bottom;
  filter:drop-shadow(0 0 34px rgba(0,0,0,.9))}
.hero__meta{margin-top:clamp(22px,4vh,46px);padding-top:clamp(18px,2.6vh,26px);
  border-top:1px solid var(--hair)}
.hero__now{font-size:clamp(17px,1.65vw,25px);font-weight:700;line-height:1.24;
  letter-spacing:-.018em;max-width:22ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(16px,2.6vh,26px)}
.btn{display:inline-block;padding:13px 26px;font-size:11px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;line-height:1;
  background:var(--paper);color:var(--ink);border:1px solid var(--paper);
  transition:background .3s var(--ease),color .3s var(--ease)}
.btn--ghost{background:none;color:var(--paper)}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--paper);color:var(--ink)}
.scrollcue{position:absolute;right:var(--gut);bottom:clamp(20px,4vh,40px);z-index:4;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);
  writing-mode:vertical-rl;opacity:.55;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(10px);opacity:.75}}

/* ---------- typo blocs ---------- */
.lede{font-size:clamp(19px,2.15vw,31px);line-height:1.24;letter-spacing:-.022em;
  font-weight:700;max-width:19ch}
.lede+.prose{margin-top:clamp(20px,3vh,34px)}
.prose{max-width:46ch;display:grid;gap:1.05em;font-size:clamp(14px,1.02vw,16.5px);line-height:1.5}
.prose--tight{max-width:40ch}
.kicker{font-size:10px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  color:var(--grey);margin-bottom:14px}

/* bio */
.bio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,6vw,90px);align-items:start;padding-left:clamp(0px,17vw,300px)}
.bio__figure{position:relative}
.bio__figure img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.prose.clamped{max-height:9.4em;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0 52%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 0 52%,transparent 97%)}
.prose.clamped.open{max-height:none;-webkit-mask-image:none;mask-image:none}
.prose.folded{display:none}
.more{display:block;margin-top:22px;padding:0;background:none;border:0;
  color:inherit;font-family:var(--body);font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;opacity:.72;
  border-bottom:1px solid currentColor;transition:opacity .3s}
.more:hover,.more:focus-visible{opacity:1}
.credit{margin-top:9px;font-size:9px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey)}
.duo__photo .credit{margin-top:11px}
.figcap{margin-top:10px;font-size:10px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey)}

/* actu */
.actu{padding-left:clamp(0px,17vw,300px);display:grid;gap:clamp(30px,5vh,60px)}
.actu__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(16px,4vw,54px);
  border-bottom:1px solid var(--hair);padding-bottom:clamp(18px,3vh,34px)}
.release{height:clamp(76px,14vw,205px)}
.feature{display:grid;grid-template-columns:clamp(150px,20vw,290px) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;
  padding-bottom:clamp(26px,4vh,44px);border-bottom:1px solid var(--hair)}
.feature__art img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.14)}
.actu__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(22px,3.4vw,54px);align-items:start}
.actu__grid img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.14)}

/* duo — glass */
.duo{position:relative;display:grid;place-items:center;
  padding:clamp(90px,14vh,170px) var(--gut);overflow:hidden}
.duo__inner{position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;
  width:100%;max-width:1120px}
.duo__photo{position:relative;z-index:4}
.duo__photo img{width:100%;max-width:420px;aspect-ratio:328/466;object-fit:cover;
  filter:grayscale(1) contrast(1.12);box-shadow:0 40px 100px rgba(0,0,0,.6)}
.duo__bg{position:absolute;inset:0;z-index:0}
.duo__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:grayscale(1) blur(46px) brightness(.34) contrast(1.15);transform:scale(1.25)}
.glass{position:relative;z-index:5;max-width:min(560px,88vw);margin-left:clamp(-90px,-5vw,0px);
  padding:clamp(24px,3.4vw,46px);
  background:rgba(10,10,10,.34);
  backdrop-filter:blur(22px) saturate(.6) contrast(1.05);
  -webkit-backdrop-filter:blur(22px) saturate(.6) contrast(1.05);
  border:1px solid rgba(233,231,226,.2);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.duo__lede{font-size:clamp(15px,1.35vw,19px);line-height:1.28;letter-spacing:-.015em;max-width:34ch;margin-bottom:1.5em}
.glass h3{margin-bottom:.5em;line-height:0}
.glass h3 svg{height:clamp(110px,16vw,230px)}

/* projets */
.rel{display:grid;grid-template-columns:clamp(96px,13vw,190px) minmax(0,1fr);
  gap:clamp(20px,3.4vw,52px);padding:clamp(30px,5vh,58px) 0;
  border-top:1px solid var(--hair-d);align-items:start}
.sec--dark .rel,.sec--void .rel{border-top-color:var(--hair)}
.rel:last-of-type{border-bottom:1px solid var(--hair-d)}
.sec--dark .rel:last-of-type,.sec--void .rel:last-of-type{border-bottom-color:var(--hair)}
.rel__art img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.16)}
.rel__title{height:clamp(60px,9.8vw,146px);margin-bottom:.22em}
.rel__meta{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);margin-bottom:1.1em}
.projets{padding-left:clamp(0px,17vw,300px)}
.linkmore{margin-top:clamp(30px,5vh,54px)}
.linkmore a{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid currentColor;
  opacity:.8;transition:opacity .3s}
.linkmore a::after{content:" →"}
.linkmore a:hover,.linkmore a:focus-visible{opacity:1}
.rel .prose{max-width:60ch}

/* boutique */
.boutique{padding-left:clamp(0px,17vw,300px)}
.shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(20px,3vw,46px);margin-top:clamp(28px,5vh,52px)}
.card{display:block;color:inherit}
.card__art{position:relative;overflow:hidden;aspect-ratio:1;background:var(--ink-2)}
.card__art img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12);transition:transform .9s var(--ease)}
.card__art--tee{display:grid;place-items:center;background:var(--void)}
.card__art--empty{display:grid;place-items:center;background:none;
  border:1px solid var(--hair)}
.sec--light .card__art--empty{border-color:var(--hair-d)}
.card__art--empty span{font-size:10px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey)}
.card__art--tee img{width:66%;height:auto;object-fit:contain;filter:none}
.card:hover .card__art img,.card:focus-visible .card__art img{transform:scale(1.05)}
.card__name{margin-top:14px;font-size:clamp(15px,1.25vw,19px);font-weight:800;
  letter-spacing:-.015em;line-height:1.2}
.card__meta{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 16px;
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.card:hover .card__name,.card:focus-visible .card__name{text-decoration:underline;text-underline-offset:4px}

/* live */
.live{position:relative;overflow:hidden;padding:clamp(90px,13vh,170px) 0}
.live__bg{position:absolute;inset:0;z-index:0}
.live__bg img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.2) brightness(.42)}
.live__head .ttl{height:clamp(76px,14vw,205px);fill:var(--paper)}
.live__head{position:relative;z-index:3;padding:0 var(--gut) clamp(28px,5vh,56px);
  padding-left:clamp(var(--gut),17vw,300px)}
.mq{position:relative;z-index:3;display:flex;gap:0;overflow:hidden;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:clamp(8px,1.3vh,15px) 0;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq+.mq{border-top:0}
.mq__scale{display:flex;transform:scaleX(.30);transform-origin:left center;width:334%}
.mq__track{display:flex;flex:0 0 auto;align-items:center;
  animation:mqrun var(--dur,44s) linear infinite;animation-direction:var(--dir,normal)}
.live:hover .mq__track{animation-play-state:paused}
@keyframes mqrun{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.mq__item{display:inline-flex;align-items:baseline;padding:0 clamp(60px,9vw,170px);
  font-family:var(--display);font-weight:660;font-size:clamp(26px,4.2vw,62px);line-height:1;
  text-transform:uppercase;letter-spacing:-.01em}
.mq__cities{position:relative;z-index:3;margin-top:0;
  padding:clamp(26px,4vh,46px) var(--gut) 0;padding-left:clamp(var(--gut),17vw,300px)}

/* newsletter */
.news{padding-left:clamp(0px,17vw,300px)}
.news__title svg{height:clamp(64px,11vw,150px)}
.news__title{margin-bottom:clamp(18px,3vh,32px)}
.news__form{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;
  margin-top:clamp(26px,4vh,44px);max-width:620px}
.news__form input{flex:1 1 260px;min-width:0;background:none;border:0;
  border-bottom:1px solid var(--hair-d);color:inherit;font:inherit;
  font-size:clamp(15px,1.3vw,19px);padding:10px 0;letter-spacing:-.01em}
.news__form input::placeholder{color:var(--grey);font-weight:700}
.news__form input:focus{outline:0;border-bottom-color:currentColor}
.news__form button{flex:0 0 auto;background:var(--ink);color:var(--paper);border:0;
  padding:14px 26px;font-family:var(--body);font-size:11px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:opacity .3s}
.news__form button:hover,.news__form button:focus-visible{opacity:.82}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* contact — stickers */
.contact{padding-left:clamp(0px,17vw,300px)}
.stickers{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,22px);
  margin:clamp(26px,4.6vh,54px) 0;max-width:760px}
.sticker{background:var(--paper);color:var(--ink);
  padding:.5em .85em;font-size:clamp(14px,1.5vw,21px);font-weight:800;letter-spacing:-.015em;
  transform:rotate(var(--r,0deg));transition:transform .35s var(--ease),background .35s;
  box-shadow:0 6px 22px rgba(0,0,0,.28)}
.sec--light .sticker{background:var(--ink);color:var(--paper)}
.sticker:hover,.sticker:focus-visible{transform:rotate(0deg) translateY(-3px) scale(1.03)}
.sticker i{font-style:italic;font-weight:700}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(22px,3vw,50px);border-top:1px solid var(--hair-d);padding-top:clamp(20px,3vh,36px)}
.sec--dark .cols{border-top-color:var(--hair)}
.cols h4{font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grey);margin-bottom:.9em}
.cols a{border-bottom:1px solid transparent;transition:border-color .3s}
.cols a:hover{border-bottom-color:currentColor}
.foot{margin-top:clamp(40px,7vh,90px);padding-top:18px;border-top:1px solid var(--hair-d);
  display:flex;flex-wrap:wrap;gap:8px 24px;font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:100svh}
  .hero__media{grid-column:1;grid-row:1;position:absolute;inset:0}
  .hero__media::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 40%,var(--void) 96%)}
  .hero__body{grid-column:1;grid-row:1;width:auto;align-self:center;
    text-align:center;padding:0 var(--gut) 0;display:flex;flex-direction:column;align-items:center}
  .hero__media img{object-position:50% 16%}
  .hero__media::after{background:
    linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.30) 26%,rgba(0,0,0,.62) 62%,var(--void) 99%)}
  .tagwrap{display:flex;justify-content:center}
  .tag{transform:rotate(-2.4deg);transform-origin:center}
    .hero__meta{width:100%;text-align:center;margin-top:clamp(22px,4vh,40px)}
  .hero__now{max-width:none;margin:0 auto;font-size:19px}
  .hero__cta{justify-content:center}
  .btn{padding:14px 24px}
  .scrollcue{display:none}
  .tag{width:min(82vw,400px)}
  .hline{--align:center;margin:0 auto;max-width:100%;height:clamp(60px,13vh,130px)}
    .bio{grid-template-columns:1fr;padding-left:0}
  .bio__figure{order:-1}
  .actu,.projets,.contact,.live__head{padding-left:0}
  .live__head{padding-left:var(--gut)}
  /* les filigranes sont illisibles en colonne étroite : on passe à de vrais titres */
  .wmwrap{display:none}
  .sectitle{display:block;margin-bottom:clamp(28px,5vh,46px)}
  .sectitle svg{height:clamp(112px,40vw,190px)}
  .release{height:clamp(94px,26vw,150px)}
  .rel__title{height:clamp(76px,21vw,120px)}
  .live__head .ttl{height:clamp(104px,37vw,180px)}
  .contact .kicker{display:none}
  .rel{grid-template-columns:1fr;gap:20px}
  .rel__art img{aspect-ratio:1;max-width:min(74vw,330px)}
  .actu,.contact,.boutique,.news{padding-left:0}
  .news__title svg{height:clamp(84px,26vw,130px)}
  .news__form button{width:100%}
  .shop{grid-template-columns:1fr 1fr;gap:18px}
  .card__name{font-size:15px}
  /* respiration : le texte du presskit est écrit pour du A4 paysage,
     il faut plus d'interligne et d'espace inter-paragraphe en colonne étroite */
  body{font-size:15.5px;line-height:1.6;letter-spacing:0}
  .prose{font-size:15.5px;line-height:1.66;gap:1.55em;max-width:none;font-weight:600}
  .prose--tight{max-width:none}
  .lede{font-size:21px;line-height:1.24;max-width:none}
  .lede+.prose{margin-top:clamp(26px,4vh,40px)}
  .sec{padding:clamp(76px,11vh,130px) var(--gut)}
  .bio{gap:clamp(30px,6vh,50px)}
  .bio__figure img{aspect-ratio:4/5}
  .actu{gap:clamp(28px,5vh,48px)}
  .actu__grid{gap:clamp(30px,5vh,48px)}
  .rel{padding:clamp(34px,5vh,56px) 0;gap:18px}
  .rel .prose{max-width:none}
  .duo{padding:clamp(70px,10vh,130px) var(--gut)}
  .duo__inner{grid-template-columns:1fr;gap:0}
  .duo__photo img{max-width:none;width:100%;aspect-ratio:4/5}
  .glass{margin-left:0;margin-top:-46px;max-width:none;width:100%;
    padding:clamp(22px,6vw,34px)}
  .glass h3 svg{height:clamp(150px,45vw,230px)}
  .duo__lede{font-size:18px;line-height:1.26;max-width:none}
  .stickers{gap:10px}
  .cols{gap:26px}
  .nav{grid-template-columns:1fr}
  .nav__cart{right:calc(var(--gut) + 30px)}
  .nav__side{display:none}
  .burger{display:block}
  .nav__mark{margin:0}
  .nav__mark svg{height:30px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{transform:none}
  .js .rv::after{display:none}
  .grain{animation:none}
}

/* ---------- pages internes ---------- */
.pagehead{position:relative;padding:calc(clamp(96px,15vh,170px) + 62px) var(--gut) clamp(50px,8vh,96px);
  background:var(--ink);color:var(--paper);overflow:clip}
.pagehead--light{background:var(--paper);color:var(--ink)}
.pagehead__inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;
  padding-left:clamp(0px,17vw,300px)}
.pagehead__title svg{height:clamp(96px,17vw,260px);fill:currentColor}
.pagehead__lede{margin-top:clamp(20px,3vh,34px);font-size:clamp(17px,1.7vw,26px);
  font-weight:700;line-height:1.24;letter-spacing:-.018em;max-width:26ch}
.pagehead__media{position:absolute;inset:0;z-index:0}
.pagehead__media img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  filter:grayscale(1) contrast(1.15) brightness(.4)}

.biopage{position:relative;overflow:clip;background:var(--ink)}
.biopage__bg{position:absolute;inset:0;z-index:0}
.biopage__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:brightness(.46)}
.pagehead--plain{background:none}
.biosec{position:relative;background:none}
.biosec .inner,.pagehead--plain .pagehead__inner{position:relative;z-index:2}
/* la page a peu de contenu : on resserre le rythme vertical */
.biopage .pagehead{padding-top:calc(clamp(64px,9vh,118px) + 62px);
  padding-bottom:clamp(26px,3.5vh,52px)}
.biosec{padding-top:clamp(34px,4.5vh,64px);padding-bottom:clamp(44px,6vh,84px)}
.biosec .bio{align-items:center;gap:clamp(26px,4vw,64px)}
.biosec .bio__figure img{aspect-ratio:5/6}
.biosec .bio__figure{margin-top:calc(clamp(40px,6vh,90px) * -1)}
.biosec .bio__figure img{box-shadow:0 30px 90px rgba(0,0,0,.55)}
@media (max-width:900px){
  .biopage .pagehead{padding-top:calc(clamp(52px,8vh,92px) + 56px);padding-bottom:clamp(22px,3vh,40px)}
  .biosec{padding-top:clamp(28px,4vh,48px);padding-bottom:clamp(38px,5vh,64px)}
  .biosec .bio{gap:24px}
  .biosec .bio__figure{margin-top:calc(clamp(24px,3.5vh,50px) * -1)}
  .biosec .bio__figure img{aspect-ratio:1}
}
.js .biosec .rv::after{display:none}
.js .biosec .rv{opacity:0;transition:transform 1s var(--ease) var(--d,0ms),
  opacity .9s var(--ease) var(--d,0ms)}
.js .biosec .rv.in{opacity:1}
@media (max-width:900px){
  .biopage__bg img{object-position:50% 18%}
}

.crumb{margin-bottom:clamp(16px,2.6vh,26px);font-size:10px;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.crumb a{border-bottom:1px solid transparent}
.crumb a:hover{border-bottom-color:currentColor}

/* filtres boutique */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,4vh,46px)}
.filters button{background:none;border:1px solid var(--hair);color:inherit;
  font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;padding:11px 20px;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s}
.sec--light .filters button{border-color:var(--hair-d)}
.filters button[aria-pressed="true"]{background:currentColor;border-color:currentColor}
.sec--light .filters button[aria-pressed="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.filters button[aria-pressed="true"] span{color:var(--ink)}
.sec--light .filters button[aria-pressed="true"] span{color:var(--paper)}
.card.hide{display:none}
.card__tag{margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey)}
.soldout .card__art::after{content:"Épuisé";position:absolute;inset:auto 0 0 0;
  background:var(--ink);color:var(--paper);padding:8px;text-align:center;
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}

/* dates live */
.dates{border-top:1px solid var(--hair)}
.sec--light .dates{border-top-color:var(--hair-d)}
.date{display:grid;grid-template-columns:clamp(84px,10vw,140px) minmax(0,1fr) auto;
  gap:clamp(14px,2.6vw,40px);align-items:baseline;
  padding:clamp(20px,3vh,30px) 0;border-bottom:1px solid var(--hair)}
.sec--light .date{border-bottom-color:var(--hair-d)}
.date__day{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.date__where{font-size:clamp(16px,1.6vw,23px);font-weight:700;letter-spacing:-.018em}
.date__where span{display:block;margin-top:4px;font-size:10px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.date__cta a{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:3px;white-space:nowrap}
.date--past{opacity:.5}
.empty{padding:clamp(30px,5vh,54px) 0;font-size:clamp(16px,1.5vw,21px);
  font-weight:700;letter-spacing:-.015em;color:var(--grey)}

/* archive des salles */
.venues{columns:3;column-gap:clamp(24px,4vw,70px);margin-top:clamp(20px,3vh,32px)}
.venues p{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--hair);
  font-size:clamp(14px,1.15vw,17px);font-weight:700}
.sec--light .venues p{border-bottom-color:var(--hair-d)}
.venues em{font-style:normal;font-weight:800;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-left:8px}

/* panier */
[hidden]{display:none!important}
.cart{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,.85fr);
  gap:clamp(30px,5vw,84px);align-items:start}
.lines{border-top:1px solid var(--hair-d)}
.line{display:grid;grid-template-columns:clamp(72px,8vw,110px) minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,34px);padding:clamp(20px,3vh,30px) 0;
  border-bottom:1px solid var(--hair-d);align-items:start}
.line__art{aspect-ratio:1;overflow:hidden;background:var(--paper-2);
  display:grid;place-items:center}
.line__art img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12)}
.line__art--tee{background:var(--void)}
.line__art--tee img{width:72%;height:auto;object-fit:contain;filter:none}
.line__art--empty{background:none;border:1px solid var(--hair-d)}
.line__art--empty span{font-size:9px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);text-align:center;padding:6px}
.line__name{font-size:clamp(15px,1.3vw,19px);font-weight:800;letter-spacing:-.015em;line-height:1.2}
.line__meta{margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey)}
.qty{display:inline-flex;align-items:center;margin-top:14px;border:1px solid var(--hair-d)}
.qty button{width:34px;height:34px;background:none;border:0;color:inherit;
  font-family:var(--body);font-size:15px;font-weight:700;cursor:pointer;line-height:1}
.qty button:hover{background:var(--ink);color:var(--paper)}
.qty span{min-width:30px;text-align:center;font-size:12px;font-weight:800}
.line__right{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.line__price{font-size:clamp(15px,1.3vw,19px);font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.line__remove{background:none;border:0;padding:0 0 2px;color:var(--grey);
  font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;border-bottom:1px solid currentColor}
.line__remove:hover{color:inherit}
.summary{position:sticky;top:96px;border:1px solid var(--hair-d);
  padding:clamp(22px,2.4vw,32px)}
.summary h2{font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grey);margin-bottom:clamp(14px,2vh,22px)}
.sumline{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  font-size:13px;font-weight:700;letter-spacing:-.01em}
.sumline span:last-child{white-space:nowrap}
.sumline--total{border-top:1px solid var(--hair-d);margin-top:10px;padding-top:16px;
  font-size:clamp(17px,1.5vw,22px);font-weight:800}
.promo{display:flex;margin-top:18px}
.promo input{flex:1 1 auto;min-width:0;background:none;border:1px solid var(--hair-d);
  border-right:0;padding:12px;font-family:var(--body);font-size:12px;font-weight:700;color:inherit}
.promo input:focus{outline:0;border-color:currentColor}
.promo button{flex:0 0 auto;background:none;border:1px solid var(--hair-d);
  padding:0 16px;font-family:var(--body);font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:inherit;cursor:pointer}
.btn--full{display:block;width:100%;text-align:center;margin-top:18px;
  background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--full:hover,.btn--full:focus-visible{background:none;color:var(--ink)}
.note{margin-top:14px;font-size:10px;font-weight:700;letter-spacing:.04em;
  line-height:1.6;color:var(--grey)}
.cart__empty{padding:clamp(30px,6vh,70px) 0}
.cart__empty p{font-size:clamp(17px,1.6vw,23px);font-weight:700;letter-spacing:-.015em}

@media (max-width:900px){
  .cart{grid-template-columns:1fr;gap:34px}
  .summary{position:static}
  .line{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .line__right{grid-column:2;flex-direction:row;align-items:center;
    justify-content:space-between;width:100%;text-align:left}
}

@media (max-width:900px){
  .pagehead{padding:calc(clamp(70px,11vh,120px) + 56px) var(--gut) clamp(38px,6vh,64px)}
  .pagehead__inner{padding-left:0}
  .pagehead__title svg{height:clamp(112px,40vw,190px)}
  .pagehead__lede{font-size:19px;max-width:none}
  .venues{columns:1}
  .date{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .date__cta{margin-top:6px}
  .shop{grid-template-columns:1fr 1fr;gap:18px}
}

/* ================================================================
   Ajouts du thème — équivalents génériques des classes des maquettes
   ----------------------------------------------------------------
   Les maquettes nomment chaque section par son contenu (.actu, .boutique,
   .projets, .contact, .news, .biopage) alors que plusieurs partagent les
   mêmes règles. Le CMS produisant des sections génériques, on réexpose ici
   ces règles sous des noms neutres. Les valeurs sont reprises telles quelles.
   ================================================================ */

/* ----------------------------------------------------------------
   Navigation agrandie — écart assumé par rapport aux maquettes.
   La barre étant fixe, sa hauteur sert de repère aux en-têtes de page
   qui se placent dessous : on la centralise dans --navh pour que les
   deux restent en phase si on retouche encore les tailles.

   La marque est cadrée au plus près des lettres (data-tight, voir app.js) :
   sa hauteur CSS est donc la hauteur réelle des capitales, et non celle d'un
   gabarit réservant la place d'un jambage.
   ---------------------------------------------------------------- */
:root{--navh:76px} /* 16 + 44 + 16 de padding, + le filet du bas */
.nav{padding-top:16px;padding-bottom:16px}
.nav__mark svg{height:clamp(32px,3.4vw,44px)}
.nav__side{font-size:15px;letter-spacing:.13em}
.nav__cart svg{width:26px;height:26px}
.nav__cart .count{min-width:18px;height:18px;font-size:10px}
.pagehead{padding-top:calc(clamp(96px,15vh,170px) + var(--navh))}
.secwrap>.pagehead{padding-top:calc(clamp(64px,9vh,118px) + var(--navh))}
.summary{top:calc(var(--navh) + 14px)}

/* Signature du studio : seul lien de la ligne de crédits, qui hérite sinon du
   gris du texte qui l'entoure et ne se lirait pas comme cliquable. */
.foot a{border-bottom:1px solid currentColor;transition:color .3s}
.foot a:hover,.foot a:focus-visible{color:var(--paper)}
.sec--light .foot a:hover,.sec--light .foot a:focus-visible{color:var(--ink)}

/* Retrait gauche — identique à .actu / .boutique / .projets / .contact / .news */
.inner--indent{padding-left:clamp(0px,17vw,300px)}

/* .bio porte déjà ce même retrait dans les maquettes (il y était la seule
   source) : imbriqué dans une section générique, il le doublerait. */
.inner--indent .bio{padding-left:0}

/* Section « en grille » — mêmes réglages que .actu__grid des maquettes.
   Les éléments larges (en-tête de section, mise en avant, lien de fin)
   reprennent toute la largeur ; textes et images se répartissent en colonnes. */
.inner--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(22px,3.4vw,54px);align-items:start}
.inner--grid>.sectitle,.inner--grid>.kicker,.inner--grid>.feature,
.inner--grid>.linkmore,.inner--grid>.bio,.inner--grid>.dates,
.inner--grid>.shop,.inner--grid>.filters{grid-column:1/-1}
.inner--grid img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.14)}
.inner--grid .feature__art img{aspect-ratio:1}
.inner--grid figure{margin:0}

/* Image de fond de section — même traitement que .live__bg / .biopage__bg */
.sec__bg{position:absolute;inset:0;z-index:0}
.sec__bg img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.46)}

/* Apparition en fondu plutôt qu'au rideau.

   Le rideau est un rectangle OPAQUE peint à la couleur de la section, qui se
   rétracte pour découvrir le bloc. Il ne passe inaperçu que sur un aplat : dès
   qu'un décor occupe l'arrière-plan — photo de fond ou filigrane géant — il le
   masque le temps de la transition et se lit comme une bande noire qui tranche
   l'image. On bascule alors sur un fondu, exactement ce que font les maquettes
   pour .hero, .pagehead, .duo et .biosec, dont les valeurs sont reprises ici. */
.js .sec--fade .rv::after{display:none}
.js .sec--fade .rv{opacity:0;
  transition:transform 1s var(--ease) var(--d,0ms),
             opacity .9s var(--ease) var(--d,0ms)}
.js .sec--fade .rv.in{opacity:1}

/* Section embarquant son propre en-tête : le fond (couleur ou photo) court
   derrière l'en-tête ET le contenu. Équivalent générique de .biopage, dont
   les valeurs de rythme vertical sont reprises à l'identique. */
.secwrap{position:relative;overflow:clip;padding:0}
.secwrap>.sec{background:none;color:inherit;
  padding-top:clamp(34px,4.5vh,64px);padding-bottom:clamp(44px,6vh,84px)}
.secwrap>.pagehead{background:none;
  padding-top:calc(clamp(64px,9vh,118px) + 62px);
  padding-bottom:clamp(26px,3.5vh,52px)}

/* Portrait d'une section à en-tête intégré : remonté sur l'en-tête et un peu
   plus haut que large. Reprise des règles .biosec des maquettes. */
.secwrap>.sec .bio{align-items:center;gap:clamp(26px,4vw,64px)}
.secwrap>.sec .bio__figure{margin-top:calc(clamp(40px,6vh,90px) * -1)}
.secwrap>.sec .bio__figure img{aspect-ratio:5/6;box-shadow:0 30px 90px rgba(0,0,0,.55)}

@media (max-width:900px){
  /* Nav agrandie, version mobile (cf. --navh plus haut) */
  :root{--navh:65px}
  .nav__mark svg{height:32px}
  /* Les maquettes laissent les boîtes du panier et du burger se chevaucher de
     quelques pixels : on écarte le panier pour que les deux cibles soient
     distinctes au doigt. */
  .nav__cart{right:calc(var(--gut) + 40px)}
  .pagehead{padding-top:calc(clamp(70px,11vh,120px) + var(--navh))}
  .secwrap>.pagehead{padding-top:calc(clamp(52px,8vh,92px) + var(--navh))}

  .inner--indent{padding-left:0}
  /* Surtitre redondant avec le titre de section : le titre est masqué en
     desktop (seul le filigrane subsiste) mais réapparaît en mobile — on masque
     alors le surtitre pour ne pas afficher deux fois le même mot.
     Cf. « .contact .kicker » dans les maquettes. */
  .kicker--dup{display:none}
  .secwrap>.pagehead{padding-top:calc(clamp(52px,8vh,92px) + 56px);
    padding-bottom:clamp(22px,3vh,40px)}
  .secwrap>.sec{padding-top:clamp(28px,4vh,48px);padding-bottom:clamp(38px,5vh,64px)}
  .secwrap>.sec .bio{gap:24px}
  .secwrap>.sec .bio__figure{margin-top:calc(clamp(24px,3.5vh,50px) * -1)}
  .secwrap>.sec .bio__figure img{aspect-ratio:1}
}