/* ==========================================================
   OIM THUG — DESIGN SYSTEM
   Palette : noir profond / rouge sang / ambre / sable / os
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --black:#0B0908;
  --black-2:#120E0C;
  --black-3:#1A1513;
  --red:#E63A2B;          /* accent : textes, filets, halos */
  --red-solid:#C42A1C;    /* surfaces pleines portant du texte (contraste 5.01) */
  --red-deep:#A3261B;
  --amber:#C2703A;
  --sand:#E7C9A8;
  --bone:#F5F0E9;

  /* Le noir froid : il ne sert jamais d aplat, uniquement dans les degrades.
     C est l ecart de temperature avec le noir chaud qui cree la profondeur. */
  --night:#080A0F;
  --ember:#5E1206;

  --muted:rgba(245,240,233,.56);
  --line:rgba(245,240,233,.18);
  --line-strong:rgba(245,240,233,.30);

  --display:'Archivo Black','Arial Black',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;

  --pad:clamp(20px,5vw,80px);
  --maxw:1400px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
/* Le décalage d'entrée des blocs (translateX) déborde tant qu'ils ne sont
   pas révélés : on verrouille le défilement horizontal des deux côtés. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%}
body{
  margin:0;background:var(--black);color:var(--bone);
  font-family:var(--body);font-size:16px;line-height:1.65;font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--red);color:var(--bone)}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--black-3);border-left:1px solid var(--line)}
::-webkit-scrollbar-thumb:hover{background:var(--red-deep)}

/* ==========================================================
   GRAIN + VIGNETTE (ambiance)
   ========================================================== */
.grain{
  position:fixed;inset:-150%;z-index:9998;pointer-events:none;opacity:.32;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;mix-blend-mode:overlay;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-6%,-3%)} 20%{transform:translate(-12%,4%)}
  30%{transform:translate(6%,-9%)}  40%{transform:translate(-3%,12%)}
  50%{transform:translate(-9%,6%)}  60%{transform:translate(9%,0)}
  70%{transform:translate(0,9%)}    80%{transform:translate(3%,12%)}
  90%{transform:translate(-6%,6%)}
}
.vignette{
  position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,0,0,.55) 100%);
}

/* ==========================================================
   CURSEUR PERSONNALISÉ
   ========================================================== */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:38px;height:38px;border:1px solid rgba(245,240,233,.7);transition:width .35s var(--ease),height .35s var(--ease),background .35s,opacity .3s;margin:-19px 0 0 -19px}
.cursor-dot{width:5px;height:5px;background:var(--bone);margin:-2.5px 0 0 -2.5px}
.cursor.is-hover{width:74px;height:74px;background:rgba(230,58,43,.22);border-color:transparent;margin:-37px 0 0 -37px}
@media (hover:none),(max-width:900px){.cursor,.cursor-dot{display:none}}

/* ==========================================================
   PRELOADER
   ========================================================== */
#preloader{
  position:fixed;inset:0;z-index:10001;background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .7s var(--ease),visibility .7s;
}
#preloader.done{opacity:0;visibility:hidden}
.pre-logo{display:grid;place-items:center;font-family:var(--display);font-size:clamp(48px,11vw,140px);line-height:.86;letter-spacing:-.03em;text-align:center}
.pre-logo span{display:block}
.pre-logo span:last-child{color:var(--red)}
.pre-logo svg{width:auto;height:clamp(150px,26vh,215px)}
.pre-bar{width:min(320px,60vw);height:2px;background:var(--line);overflow:hidden}
.pre-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .25s linear}
.pre-num{font-size:11px;letter-spacing:.4em;color:var(--muted)}

/* ==========================================================
   HEADER
   ========================================================== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:background .45s var(--ease),padding .45s var(--ease),border-color .45s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{background:rgba(11,9,8,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:12px var(--pad);border-bottom-color:var(--line)}
.header.is-hidden{transform:translateY(-100%);transition:transform .5s var(--ease)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:15px;letter-spacing:.02em;line-height:1}
.brand em{font-style:normal;color:var(--red)}
.brand svg{display:block;flex:none;transition:transform .45s var(--ease),filter .45s}
.brand:hover svg{transform:scale(1.09) rotate(-3deg);filter:drop-shadow(0 0 12px rgba(230,58,43,.55))}
.brand-txt{display:block}
@media(max-width:420px){.brand-txt{display:none}}

.nav{display:flex;align-items:center;gap:6px}
.nav a{
  position:relative;padding:9px 14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);transition:color .3s;
}
.nav a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover,.nav a.active{color:var(--bone)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}

.header-cta{display:flex;align-items:center;gap:10px}
.cart-btn{position:relative;display:flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line-strong);font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:border-color .3s,background .3s}
.cart-btn:hover{border-color:var(--red);background:rgba(230,58,43,.08)}
.cart-count{min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;background:var(--red);border-radius:10px;font-size:10px;font-weight:700;letter-spacing:0}
.cart-count.zero{opacity:.28;background:var(--black-3)}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line-strong);place-items:center}
.burger span{display:block;width:18px;height:1px;background:var(--bone);position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:1px;background:var(--bone);transition:.3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger.open span{background:transparent}
.burger.open span::before{top:0;transform:rotate(45deg)}
.burger.open span::after{top:0;transform:rotate(-45deg)}

/* menu plein écran mobile */
.mobile-nav{
  position:fixed;inset:0;z-index:890;background:var(--black);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);gap:4px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
}
.mobile-nav.open{clip-path:inset(0 0 0 0)}
.mobile-nav a{
  font-family:var(--display);font-size:clamp(30px,9vw,58px);line-height:1.06;letter-spacing:-.02em;
  padding:6px 0;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.mobile-nav.open a{opacity:1;transform:none}
.mobile-nav a:hover{color:var(--red)}
.mobile-nav .m-foot{margin-top:34px;font-size:12px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;font-family:var(--body)}

.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:950;transition:width .1s linear}

@media(max-width:1080px){
  .nav{display:none}
  .burger{display:grid}
}

/* ==========================================================
   LAYOUT
   ========================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(80px,11vw,170px) 0;position:relative}
.section--tight{padding:clamp(56px,7vw,100px) 0}
/* halo rouge de section */
.section--glow{position:relative;overflow:hidden}
.section--glow::before{
  content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(1100px,120%);height:520px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(230,58,43,.16),transparent 70%);
}
.section--glow>*{position:relative}
/* filet rouge séparateur */
.rule-red{height:2px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--red) 22%,var(--amber) 50%,var(--red) 78%,transparent)}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,64px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;font-size:10px;letter-spacing:.38em;text-transform:uppercase;
  color:var(--red);font-weight:600;
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--red)}
.eyebrow--sand{color:var(--sand)}
.eyebrow--sand::before{background:var(--sand)}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.025em;line-height:.94;margin:0}
.h-xl{font-size:clamp(52px,12.5vw,190px);line-height:.85}
.h-lg{font-size:clamp(34px,6.4vw,88px)}
.h-md{font-size:clamp(26px,3.4vw,46px)}
.h-sm{font-size:clamp(19px,2.1vw,27px)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.lead{font-size:clamp(16px,1.55vw,21px);line-height:1.72;color:rgba(245,240,233,.78);max-width:62ch;font-weight:300}
.muted{color:var(--muted)}
.red{color:var(--red)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ==========================================================
   BOUTONS
   ========================================================== */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:17px 30px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line-strong);overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s;
}
.btn::before{content:'';position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1}
.btn:hover{border-color:var(--red);color:var(--bone)}
.btn:hover::before{transform:translateY(0)}
.btn--solid{background:var(--red);border-color:var(--red)}
.btn--solid::before{background:var(--bone)}
.btn--solid:hover{color:var(--black)}
.btn--ghost{border-color:var(--line)}
.btn--sm{padding:12px 20px;font-size:10px;letter-spacing:.2em}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}

/* ==========================================================
   MARQUEE
   ========================================================== */
.marquee{
  overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;background:var(--black-2);
}
.marquee--red{background:var(--red);border-color:var(--red)}
.marquee-track{display:inline-flex;gap:44px;animation:marq 32s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--display);font-size:clamp(18px,2.6vw,34px);letter-spacing:.01em;display:inline-flex;align-items:center;gap:44px}
.marquee span::after{content:'✦';color:var(--red);font-size:.5em}
.marquee--red span::after{color:var(--black)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================
   HERO
   ========================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-bottom:clamp(40px,7vw,90px)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg video,.hero-bg img{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(1.15) contrast(1.08);
}
.hero-bg::after{
  content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(11,9,8,.90) 0%,rgba(11,9,8,.46) 40%,rgba(11,9,8,.97) 100%),
             linear-gradient(90deg,rgba(11,9,8,.86) 0%,rgba(11,9,8,.30) 55%,transparent 100%),
             radial-gradient(70% 55% at 72% 38%,rgba(230,58,43,.22),transparent 70%);
}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-title{position:relative}
.hero-title .ln{display:block;overflow:hidden;perspective:900px}
.hero-title .ln>span{
  display:block;transform-origin:top center;
  transform:translateY(105%) rotateX(-62deg);
  animation:riseIn3D 1.25s var(--ease) forwards;
}
.hero-title .ln:nth-child(2)>span{animation-delay:.13s}
@keyframes riseIn3D{to{transform:translateY(0) rotateX(0deg)}}

/* titres de section qui se redressent au scroll */
.r3d{transform-origin:50% 100%;will-change:transform}

/* ---------- LE TITRE DEVIENT LE LOGO AU SURVOL ----------
   display:block + width:max-content : le conteneur épouse le titre
   sans ajouter l'espace fantôme sous la ligne de base d'un inline-block. */
.hero-morph{position:relative;display:block;width:max-content;max-width:100%;cursor:pointer}
.hero-morph .hero-title{
  transition:opacity .45s var(--ease),transform .6s var(--ease),filter .45s var(--ease);
}
.hero-morph.on .hero-title{opacity:0;transform:scale(.9) translateY(6px);filter:blur(7px)}
.hero-logo{
  position:absolute;left:0;top:50%;z-index:2;pointer-events:none;
  opacity:0;transform:translateY(-50%) scale(.72) rotate(-5deg);
  transition:opacity .5s var(--ease),transform .75s var(--ease);
}
.hero-morph.on .hero-logo{opacity:1;transform:translateY(-50%) scale(1) rotate(0deg)}
.hero-logo svg{
  height:clamp(150px,26vw,300px);width:auto;
  filter:drop-shadow(0 0 46px rgba(230,58,43,.42));
}
@media(hover:none),(max-width:900px){
  .hero-logo{display:none}
  .hero-morph{cursor:default}
}
.hero-title .ln:nth-child(2){color:var(--red)}
.hero-sub{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand)}
.hero-sub i{width:5px;height:5px;background:var(--red);border-radius:50%;display:inline-block}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-scroll{position:absolute;right:var(--pad);bottom:clamp(40px,7vw,90px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl}
.hero-scroll::after{content:'';width:1px;height:60px;background:linear-gradient(var(--red),transparent);animation:scrolly 2s var(--ease-in-out) infinite}
@keyframes scrolly{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:900px){.hero-scroll{display:none}}

/* glitch */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-txt);position:absolute;inset:0;opacity:0}
.glitch:hover::before{opacity:.85;color:var(--red);transform:translate(-3px,-2px);clip-path:inset(0 0 62% 0)}
.glitch:hover::after{opacity:.85;color:var(--amber);transform:translate(3px,2px);clip-path:inset(58% 0 0 0)}

/* ==========================================================
   REVEAL
   ========================================================== */
[data-reveal]{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-28px)}
[data-reveal="right"]{transform:translateX(28px)}
[data-reveal="clip"]{opacity:1;clip-path:inset(0 100% 0 0);transform:none;transition:clip-path 1.1s var(--ease)}
[data-reveal="clip"].in{clip-path:inset(0 0 0 0)}

/* ==========================================================
   UNIVERS / BIO
   ========================================================== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:980px){.split{grid-template-columns:1fr}}

/* La question porte le texte : la photo reste le second rôle. */
.split--question{grid-template-columns:1.2fr .8fr;align-items:center}
@media(max-width:980px){.split--question{grid-template-columns:1fr}}

.frame{position:relative;overflow:hidden;background:var(--black-2)}
.frame img{width:100%;transition:transform 1.3s var(--ease);filter:grayscale(.15) contrast(1.06)}
.frame:hover img{transform:scale(1.05)}
.frame::after{content:'';position:absolute;inset:0;background:linear-gradient(200deg,transparent 45%,rgba(230,58,43,.22));pointer-events:none}
.frame-tag{position:absolute;left:0;bottom:0;background:var(--red);padding:9px 15px;font-size:9px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;z-index:2}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stat{padding:30px 22px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);position:relative;overflow:hidden}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-size:clamp(30px,4.6vw,60px);line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:9px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.stat::before{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:width .6s var(--ease)}
.stat:hover::before{width:100%}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2n){border-right:0}}

/* ==========================================================
   DISCOGRAPHIE — LISTE
   ========================================================== */
.disco{border-top:1px solid var(--line)}
.trk{
  display:grid;grid-template-columns:64px 1fr 150px 130px 190px;align-items:center;gap:20px;
  padding:20px 14px;border-bottom:1px solid var(--line);position:relative;transition:background .4s,padding .4s var(--ease);
}
.trk::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(0);transition:transform .4s var(--ease)}
.trk:hover{background:rgba(230,58,43,.05);padding-left:24px}
.trk:hover::before{transform:scaleY(1)}
.trk.playing{background:rgba(230,58,43,.09)}
.trk.playing::before{transform:scaleY(1)}
.trk-no{font-family:var(--display);font-size:15px;color:var(--muted)}
.trk-main{display:flex;align-items:center;gap:16px;min-width:0}
.trk-cover{width:56px;height:56px;object-fit:cover;flex:none;background:var(--black-3)}
.trk-t{font-family:var(--display);font-size:clamp(16px,1.9vw,23px);line-height:1.1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk-g{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.trk-meta{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.badge{display:inline-block;padding:5px 11px;border:1px solid var(--line-strong);font-size:9px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.badge--red{border-color:var(--red);color:var(--red)}
.badge--sand{border-color:rgba(231,201,168,.4);color:var(--sand)}
.trk-actions{display:flex;gap:8px;justify-content:flex-end}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line-strong);transition:.3s var(--ease)}
.icon-btn:hover{border-color:var(--red);background:var(--red);color:var(--bone)}
.icon-btn[disabled]{opacity:.25;pointer-events:none}
.icon-btn svg{width:15px;height:15px;fill:currentColor}
@media(max-width:1080px){
  .trk{grid-template-columns:40px 1fr auto;gap:14px;padding:16px 10px}
  .trk-meta,.trk-status{display:none}
}

/* ==========================================================
   GRILLES / CARTES
   ========================================================== */
.grid{display:grid;gap:clamp(16px,2vw,28px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{position:relative;background:var(--black-2);border:1px solid var(--line);overflow:hidden;transition:border-color .4s,transform .5s var(--ease)}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.card-media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--black-3)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.card:hover .card-media img{transform:scale(1.07)}
.card-body{padding:24px}
.card-cat{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--red);font-weight:600}
.card-title{font-family:var(--display);font-size:clamp(17px,1.7vw,22px);line-height:1.15;letter-spacing:-.02em;margin:12px 0 10px}
.card-ex{font-size:14px;color:var(--muted);line-height:1.66}
.card-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.card-link::after{content:'';position:absolute;inset:0}

/* ==========================================================
   ÉVÉNEMENTS
   ========================================================== */
.ev{display:grid;grid-template-columns:200px 1fr 300px;gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(22px,3vw,38px) 0;border-bottom:1px solid var(--line)}
.ev:first-child{border-top:1px solid var(--line)}
.ev-date{display:flex;flex-direction:column;gap:4px}
.ev-day{font-family:var(--display);font-size:clamp(42px,5.4vw,74px);line-height:.86;letter-spacing:-.04em}
.ev-mon{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--red);font-weight:600}
.ev-yr{font-size:10px;letter-spacing:.26em;color:var(--muted)}
.ev-title{font-family:var(--display);font-size:clamp(22px,2.7vw,38px);line-height:1.06;letter-spacing:-.025em}
.ev-sub{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--sand);margin-top:8px}
.ev-info{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ev-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ev-from{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ev-from b{font-family:var(--display);font-size:24px;letter-spacing:-.02em;color:var(--bone);display:block;margin-top:5px}
@media(max-width:980px){.ev{grid-template-columns:1fr;gap:18px}.ev-date{flex-direction:row;align-items:baseline;gap:12px}}

/* tiers (billetterie) */
.tiers{display:grid;gap:14px;margin-top:26px}
.tier{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;
  padding:20px 22px;border:1px solid var(--line);background:var(--black-2);transition:border-color .35s,background .35s;
}
.tier:hover{border-color:var(--line-strong)}
.tier.soldout{opacity:.4}
.tier-n{font-family:var(--display);font-size:19px;letter-spacing:-.02em}
.tier-d{font-size:13px;color:var(--muted);margin-top:5px}
.tier-p{font-family:var(--display);font-size:clamp(19px,2.1vw,27px);letter-spacing:-.02em;white-space:nowrap}
.tier-p small{font-size:11px;font-family:var(--body);color:var(--muted);letter-spacing:.16em;margin-left:6px}
.qty{display:flex;align-items:center;border:1px solid var(--line-strong)}
.qty button{width:38px;height:42px;display:grid;place-items:center;font-size:16px;transition:background .25s,color .25s}
.qty button:hover{background:var(--red)}
.qty input{width:46px;height:42px;text-align:center;background:transparent;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);font-weight:600;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:720px){.tier{grid-template-columns:1fr;gap:14px}.tier-actions{display:flex;gap:12px;align-items:center;justify-content:space-between}}

/* ==========================================================
   CAISSE / PANIER
   ========================================================== */
.checkout{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(24px,4vw,60px);align-items:start}
@media(max-width:1000px){.checkout{grid-template-columns:1fr}}
.cart-line{display:grid;grid-template-columns:76px 1fr auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.cart-line img{width:76px;height:76px;object-fit:cover;background:var(--black-3)}
.cart-t{font-family:var(--display);font-size:17px;letter-spacing:-.02em;line-height:1.2}
.cart-s{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.cart-rm{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.cart-rm:hover{color:var(--red)}
@media(max-width:640px){.cart-line{grid-template-columns:60px 1fr;gap:14px}.cart-line img{width:60px;height:60px}}

.panel{border:1px solid var(--line);background:var(--black-2);padding:clamp(22px,3vw,34px)}
.panel--red{border-color:rgba(230,58,43,.4)}
.sum-line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;font-size:14px;color:var(--muted)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:18px;margin-top:10px;border-top:1px solid var(--line-strong)}
.sum-total b{font-family:var(--display);font-size:clamp(24px,3vw,36px);letter-spacing:-.03em}

.field{display:block;margin-bottom:18px}
.field span{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;background:var(--black);border:1px solid var(--line);
  transition:border-color .3s,background .3s;font-size:15px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:var(--black-3)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.pay-methods{display:grid;gap:10px;margin-bottom:22px}
.pay{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--line);cursor:pointer;transition:border-color .3s,background .3s}
.pay:hover{border-color:var(--line-strong)}
.pay input{accent-color:var(--red);width:16px;height:16px}
.pay.sel{border-color:var(--red);background:rgba(230,58,43,.07)}
.pay b{font-size:14px;font-weight:600}
.pay small{display:block;color:var(--muted);font-size:12px;margin-top:3px}

/* ticket généré */
.ticket{position:relative;border:1px solid var(--red);background:linear-gradient(150deg,var(--black-2),var(--black));padding:clamp(24px,3vw,38px);overflow:hidden}
.ticket::before{content:'';position:absolute;top:0;right:0;width:180px;height:180px;background:radial-gradient(circle,rgba(230,58,43,.28),transparent 70%)}
.ticket-code{font-family:var(--display);font-size:clamp(24px,4vw,40px);letter-spacing:.06em;color:var(--red);margin:14px 0}
.ticket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin-top:24px;padding-top:24px;border-top:1px dashed var(--line-strong)}
.ticket-grid div span{display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.ticket-grid div b{font-size:15px;font-weight:600}

.empty{padding:70px 20px;text-align:center;border:1px dashed var(--line);color:var(--muted)}

/* ==========================================================
   BRANDING
   ========================================================== */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line)}
@media(max-width:900px){.swatches{grid-template-columns:repeat(2,1fr)}}
.sw{padding:0;border-right:1px solid var(--line);transition:transform .4s var(--ease)}
.sw:last-child{border-right:0}
.sw-chip{height:clamp(120px,17vw,210px);transition:height .5s var(--ease)}
.sw:hover .sw-chip{height:clamp(140px,19vw,240px)}
.sw-info{padding:18px}
.sw-info b{display:block;font-family:var(--display);font-size:15px;letter-spacing:-.01em}
.sw-info code{display:block;margin:7px 0;font-size:12px;letter-spacing:.14em;color:var(--red)}
.sw-info small{display:block;font-size:11px;color:var(--muted);line-height:1.55}

.type-row{display:grid;grid-template-columns:1fr 1.5fr;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.type-row:first-child{border-top:1px solid var(--line)}
.type-name{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.type-role{font-size:13px;color:var(--muted);margin-top:8px}
.type-sample{font-size:clamp(24px,3.6vw,46px);line-height:1.1}
@media(max-width:720px){.type-row{grid-template-columns:1fr;gap:12px}}

.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line)}
@media(max-width:720px){.rules{grid-template-columns:1fr}}
.rule-cell{padding:22px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.rule-cell:nth-child(2n){border-right:0}
.rule-cell b{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:14px}
.rule-do b{background:rgba(90,190,120,.16);color:#6fd493}
.rule-dont b{background:rgba(230,58,43,.16);color:var(--red)}
.rule-cell p{margin:0;font-size:14px;line-height:1.6}

.dl{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);transition:padding .35s var(--ease)}
.dl:first-of-type{border-top:1px solid var(--line)}
.dl:hover{padding-left:14px}
.dl-t{font-family:var(--display);font-size:clamp(17px,1.9vw,23px);letter-spacing:-.02em}
.dl-d{font-size:13px;color:var(--muted);margin-top:6px}

/* ==========================================================
   ARTICLE
   ========================================================== */
.article{max-width:760px;margin:0 auto}
.article p{font-size:17px;line-height:1.85;color:rgba(245,240,233,.82);margin:0 0 24px}
.article h3{font-family:var(--display);font-size:clamp(21px,2.4vw,30px);letter-spacing:-.02em;margin:44px 0 18px}
.article blockquote{margin:36px 0;padding:26px 30px;border-left:2px solid var(--red);background:var(--black-2);font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,26px);line-height:1.5;color:var(--sand)}
.article-hero{position:relative;aspect-ratio:21/9;overflow:hidden;margin-bottom:44px;background:var(--black-2)}
.article-hero img{width:100%;height:100%;object-fit:cover}

/* ==========================================================
   MOTEUR 3D & EFFETS
   ========================================================== */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:0;transition:opacity 1.6s var(--ease)}
.fx-live .fx-canvas{opacity:1}
.fx-live video{opacity:.34;mix-blend-mode:screen;filter:contrast(1.2) saturate(1.3)}
.fx-trail{position:fixed;inset:0;z-index:9996;pointer-events:none;mix-blend-mode:screen;opacity:.9}

/* scanlines CRT */
.scanlines{position:fixed;inset:0;z-index:9995;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(180deg,rgba(230,58,43,.16) 0 1px,transparent 1px 3px)}

/* glitch piloté par la vitesse de scroll (--vel) */
.velocity{
  text-shadow:calc(var(--vel,0) * -7px) 0 rgba(230,58,43,.85),
              calc(var(--vel,0) * 7px) 0 rgba(194,112,58,.7);
  transition:text-shadow .12s linear;
}

/* éclat rouge qui suit le curseur */
[data-spot]{position:relative;isolation:isolate}
.spot-light{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(520px circle at var(--x,50%) var(--y,50%),rgba(230,58,43,.15),transparent 62%);
}
[data-spot]>*:not(.spot-light){position:relative;z-index:1}

/* tilt 3D */
[data-tilt]{transform-style:preserve-3d;transition:transform .55s var(--ease);will-change:transform}
.tilt-glare{position:absolute;inset:0;pointer-events:none;z-index:3;transition:background .35s;mix-blend-mode:screen}

/* ==========================================================
   BOUTIQUE
   ========================================================== */
.merch .rel-media{aspect-ratio:3/4}
.merch-price{font-family:var(--display);font-size:clamp(20px,2.2vw,27px);letter-spacing:-.02em;margin:4px 0 18px}
.sizes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.size{
  min-width:46px;padding:10px 12px;border:1px solid var(--line-strong);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:.28s var(--ease);
}
.size:hover:not(:disabled){border-color:var(--red)}
.size.on{background:var(--red);border-color:var(--red)}
.size.out,.size:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.merch-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.merch-actions .qty{flex:none}
.merch-actions .btn{flex:1;justify-content:center}

/* ==========================================================
   TRANSITION DE PAGE — RIDEAU ROUGE
   ========================================================== */
.page-wipe{position:fixed;inset:0;z-index:9999;pointer-events:none;display:flex}
/* Rideau sombre : c'est le logo qui éclaire, pas l'aplat.
   Un aplat rouge plein écran à chaque clic était trop agressif. */
.page-wipe i{
  flex:1;position:relative;
  background:linear-gradient(180deg,#15100E 0%,#0B0908 70%);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .52s var(--ease-in-out);
}
.page-wipe i::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  box-shadow:0 0 18px rgba(230,58,43,.55);
}
.page-wipe i:nth-child(1){transition-delay:0ms}
.page-wipe i:nth-child(2){transition-delay:55ms}
.page-wipe i:nth-child(3){transition-delay:110ms}
.page-wipe i:nth-child(4){transition-delay:165ms}
.page-wipe i:nth-child(5){transition-delay:220ms}
.page-wipe.cover i{transform:scaleY(1);transform-origin:bottom}
.page-wipe.reveal-start i{transform:scaleY(1);transform-origin:top;transition:none}
.page-wipe.reveal i{transform:scaleY(0);transform-origin:top}
.page-wipe.fini{visibility:hidden}
.page-wipe.fini.cover{visibility:visible}
.page-wipe .wipe-mark{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  font-family:var(--display);font-size:clamp(28px,6vw,68px);line-height:.88;letter-spacing:-.03em;
  color:var(--bone);text-align:center;
  opacity:0;transform:scale(.86);
  transition:opacity .34s var(--ease),transform .5s var(--ease);
}
.page-wipe .wipe-mark svg{
  width:auto;height:clamp(84px,13vh,132px);
  filter:drop-shadow(0 0 28px rgba(230,58,43,.40));
}
/* visible pendant les deux phases : sinon on ne le voyait jamais */
.page-wipe.cover .wipe-mark{opacity:1;transform:scale(1);transition-delay:.16s}
/* Elle s'efface avec le rideau : sinon elle reste collée au milieu de
   l'écran pendant toute la visite, par-dessus les titres et les photos. */
.page-wipe.reveal .wipe-mark{
  opacity:0;transform:scale(1.05);
  transition:opacity .38s var(--ease) .14s,transform .5s var(--ease) .14s;
}
.page-wipe.reveal-start .wipe-mark{opacity:1;transform:scale(1);transition:none}

/* ==========================================================
   DISTORSION WEBGL AU SURVOL
   ========================================================== */
.dz{position:relative;overflow:hidden}
.dz canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.dz.dz-live img{opacity:0}
.dz .frame-tag{z-index:4}
.frame.dz::after{z-index:3}

/* ==========================================================
   CARROUSEL 3D — ANNEAU DE COVERS
   ========================================================== */
.ring3d{
  position:relative;height:clamp(340px,44vw,540px);
  perspective:1500px;perspective-origin:50% 50%;
  cursor:grab;user-select:none;-webkit-user-select:none;
}
.ring3d.is-grabbing{cursor:grabbing}
.ring3d::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(760px,90%);height:min(760px,90%);pointer-events:none;
  background:radial-gradient(circle,rgba(230,58,43,.20),transparent 65%);
}
.ring3d-stage{position:absolute;inset:0;transform-style:preserve-3d}
.ring-card{
  position:absolute;left:50%;top:50%;width:clamp(180px,21vw,280px);
  transform-style:preserve-3d;
  transition:opacity .5s var(--ease),filter .5s var(--ease);
  opacity:.4;filter:grayscale(.55) brightness(.5);
}
.ring-card.is-active{opacity:1;filter:none}

/* pochette en volume : 4 faces + tranche */
.sleeve{position:relative;width:100%;aspect-ratio:1;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.ring-card.is-active .sleeve{animation:float3d 6s var(--ease-in-out) infinite}
@keyframes float3d{
  0%,100%{transform:translateY(0) rotateY(0deg) rotateX(0deg)}
  50%{transform:translateY(-12px) rotateY(9deg) rotateX(-4deg)}
}
.sleeve-face{position:absolute;inset:0;backface-visibility:hidden}
.sleeve-front{transform:translateZ(11px);border:1px solid var(--line);overflow:hidden}
.sleeve-front img{width:100%;height:100%;object-fit:cover;display:block}
.ring-card.is-active .sleeve-front{border-color:var(--red);box-shadow:0 0 0 1px rgba(230,58,43,.55),0 30px 80px rgba(230,58,43,.34)}
.sleeve-back{
  transform:rotateY(180deg) translateZ(11px);
  background:linear-gradient(150deg,var(--black-3),var(--black));border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--display);font-size:15px;color:var(--red);
  letter-spacing:.06em;line-height:1;text-align:center;
}
.sleeve-edge{
  position:absolute;top:0;height:100%;width:22px;left:50%;margin-left:-11px;
  background:linear-gradient(90deg,#191312,#2c221e 45%,#0f0c0b);
}
.sleeve-edge--l{transform:rotateY(-90deg) translateZ(var(--hw,120px))}
.sleeve-edge--r{transform:rotateY(90deg) translateZ(var(--hw,120px))}
.sleeve-cap{
  position:absolute;left:0;width:100%;height:22px;top:50%;margin-top:-11px;
  background:linear-gradient(180deg,#251d19,#120f0d);
}
.sleeve-cap--t{transform:rotateX(90deg) translateZ(var(--hw,120px))}
.sleeve-cap--b{transform:rotateX(-90deg) translateZ(var(--hw,120px))}
/* reflet au sol */
.ring-card::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:46%;
  background:linear-gradient(180deg,rgba(230,58,43,.16),transparent 72%);
  filter:blur(9px);opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
}
.ring-card.is-active::after{opacity:1}
.ring-card figcaption{
  margin-top:20px;text-align:center;font-family:var(--display);font-size:14px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ring-card small{display:block;margin-top:5px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-family:var(--body)}
.ring-nav{display:flex;gap:10px;justify-content:center;margin-top:26px}
.ring-hint{text-align:center;margin-top:14px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

/* ==========================================================
   SORTIES / LIENS PLATEFORMES
   ========================================================== */
.rel{position:relative;background:var(--black-2);border:1px solid var(--line);overflow:hidden;transition:border-color .45s}
.rel:hover{border-color:rgba(230,58,43,.55)}
.rel-media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--black-3)}
.rel-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.rel:hover .rel-media img{transform:scale(1.06)}
.rel-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,9,8,.92));pointer-events:none}
.rel-no{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--display);font-size:13px;color:var(--red)}
.rel-badge{position:absolute;top:12px;right:12px;z-index:2}
.rel-head{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.rel-t{font-family:var(--display);font-size:clamp(17px,1.8vw,22px);line-height:1.1;letter-spacing:-.02em}
.rel-m{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);margin-top:8px}
.rel-body{padding:20px}
.rel-note{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 16px}

.plats{display:flex;flex-wrap:wrap;gap:8px}
.plat{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line-strong);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;transition:.32s var(--ease);
}
.plat:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.plat i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.plat:hover i{background:var(--bone)}
.plat--soon{opacity:.42;pointer-events:none;border-style:dashed}
.plat--smart{background:var(--red);border-color:var(--red)}
.plat--smart i{background:var(--bone)}
.plat--smart:hover{background:var(--bone);border-color:var(--bone);color:var(--black)}
.plat--smart:hover i{background:var(--red)}

/* photo dans un article */
.art-fig{margin:38px 0;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--black-2)}
.art-fig img{width:100%;display:block}
.art-fig figcaption{position:static;background:none;padding:10px 0 0;color:var(--muted);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;font-weight:600}

.release-panel{
  border:1px solid rgba(230,58,43,.42);background:linear-gradient(155deg,var(--black-2),var(--black));
  padding:clamp(24px,3.4vw,42px);position:relative;overflow:hidden;
}
.release-panel::before{content:'';position:absolute;top:-40%;right:-10%;width:420px;height:420px;
  background:radial-gradient(circle,rgba(230,58,43,.22),transparent 68%);pointer-events:none}
.release-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;margin:26px 0}
.release-grid div span{display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.release-grid div b{font-family:var(--display);font-size:clamp(17px,2vw,24px);letter-spacing:-.02em}

/* compte à rebours */
.countdown{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.cd-cell{min-width:74px;padding:14px 12px;border:1px solid var(--line);background:rgba(11,9,8,.6);text-align:center}
.cd-cell b{display:block;font-family:var(--display);font-size:clamp(22px,3vw,34px);line-height:1;letter-spacing:-.03em;color:var(--red)}
.cd-cell span{display:block;margin-top:8px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
@media(max-width:560px){
  .countdown{gap:8px;flex-wrap:nowrap}
  .cd-cell{min-width:0;flex:1;padding:12px 4px}
  .cd-cell span{font-size:8px;letter-spacing:.1em;margin-top:6px}
}

/* ==========================================================
   CONTACT / FOOTER
   ========================================================== */
.contact-huge{font-family:var(--display);font-size:clamp(40px,9vw,140px);line-height:.88;letter-spacing:-.035em;display:inline-block;transition:color .4s}
.contact-huge:hover{color:var(--red)}

.footer{border-top:1px solid var(--line);padding:clamp(50px,7vw,90px) 0 40px;background:var(--black-2)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-mark{margin-bottom:18px}
.foot-mark svg{display:block}
.foot-logo{font-family:var(--display);font-size:clamp(34px,5vw,56px);line-height:.88;letter-spacing:-.035em}
.foot-logo em{font-style:normal;color:var(--red)}
.foot-devise{margin-top:12px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--red);font-weight:600}
.foot-h{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--red);margin-bottom:18px;font-weight:600}
.foot-list{display:flex;flex-direction:column;gap:11px;font-size:14px;color:var(--muted)}
.foot-list a{transition:color .3s,padding-left .3s}
.foot-list a:hover{color:var(--bone);padding-left:6px}
.foot-bot{margin-top:clamp(40px,6vw,70px);padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ==========================================================
   TOASTS
   ========================================================== */
.toasts{position:fixed;right:20px;bottom:96px;z-index:960;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  padding:15px 20px;background:var(--black-3);border:1px solid var(--red);border-left-width:3px;
  font-size:13px;max-width:330px;animation:toastIn .5s var(--ease);box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.toast b{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.toast.out{opacity:0;transform:translateX(40px);transition:.4s var(--ease)}

/* ==========================================================
   PAGE HEAD (sous-pages)
   ========================================================== */
.page-head{padding:clamp(130px,17vw,220px) 0 clamp(40px,6vw,80px);position:relative;overflow:hidden}
.page-head::before{
  content:'';position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(230,58,43,.16),transparent 65%);pointer-events:none;
}
.page-head .h-lg{position:relative}
.crumb{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.crumb a:hover{color:var(--red)}

/* filtres */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.chip{padding:10px 18px;border:1px solid var(--line);font-size:10px;letter-spacing:.2em;text-transform:uppercase;transition:.3s var(--ease)}
.chip:hover{border-color:var(--line-strong)}
.chip.on{background:var(--red);border-color:var(--red)}

/* ==========================================================
   ACCESSIBILITÉ
   ========================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero-title .ln>span{transform:none}
  .grain{display:none}
}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================
   LA QUESTION — le concept du projet
   ========================================================== */
.question{max-width:900px}
.q-fon{
  font-family:var(--display);font-size:clamp(44px,9vw,120px);line-height:.92;
  letter-spacing:-.035em;color:var(--red);margin:22px 0 6px;
  text-shadow:0 0 60px rgba(230,58,43,.35);
}
.q-fr{
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,3.2vw,38px);
  color:var(--sand);line-height:1.25;
}
.q-intro{margin-top:28px}
.q-vote{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.q-choice{flex:0 1 auto}
.q-after{margin-top:34px;animation:qIn .7s var(--ease)}
@keyframes qIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.q-verdict{
  font-family:var(--display);font-size:clamp(19px,2.6vw,30px);line-height:1.25;
  letter-spacing:-.02em;margin:0 0 26px;max-width:26ch;
}
.q-prov{
  margin:0 0 24px;padding:24px 28px;border-left:2px solid var(--red);background:var(--black-2);
}
.q-prov span{
  display:block;font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,2.2vw,25px);color:var(--bone);line-height:1.4;
}
.q-prov small{
  display:block;margin-top:12px;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.q-refus{
  font-family:var(--display);font-size:clamp(16px,2vw,22px);color:var(--red);
  letter-spacing:-.01em;margin:0 0 22px;
}

/* ==========================================================
   COTONOU — les quartiers
   ========================================================== */
.quartiers{border-top:1px solid var(--line)}
.quartier{
  display:grid;grid-template-columns:56px 1fr 1.1fr;align-items:baseline;gap:18px;
  padding:22px 10px;border-bottom:1px solid var(--line);
  transition:background .4s,padding .4s var(--ease);
}
.quartier:hover{background:rgba(230,58,43,.05);padding-left:22px}
.quartier .q-no{font-family:var(--display);font-size:13px;color:var(--red)}
.quartier b{font-family:var(--display);font-size:clamp(22px,3.4vw,44px);letter-spacing:-.03em;line-height:1}
.quartier small{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.8vw,21px);color:var(--sand)}
.q-note{margin-top:22px;font-size:13px}
@media(max-width:720px){
  .quartier{grid-template-columns:40px 1fr;gap:10px}
  .quartier small{grid-column:2}
}

/* ==========================================================
   LE LEXIQUE
   ========================================================== */
.lexique{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.lex{
  position:relative;padding:22px;border:1px solid var(--line);background:var(--black);
  transition:border-color .35s,transform .45s var(--ease);
}
.lex:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.lex b{display:block;font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.lex small{display:block;margin-top:9px;font-size:14px;color:var(--muted);line-height:1.5}
.lex span{
  display:inline-block;margin-top:16px;padding:4px 10px;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line-strong);
}
.lex--rue{border-color:rgba(230,58,43,.45)}
.lex--rue b{color:var(--red)}
.lex--rue span{border-color:var(--red);color:var(--red)}
.lex--fon b{color:var(--sand)}

/* ==========================================================
   LES PHRASES
   ========================================================== */
.punchs{columns:2;column-gap:clamp(16px,2.4vw,30px)}
@media(max-width:820px){.punchs{columns:1}}
.punch{
  break-inside:avoid;margin:0 0 clamp(16px,2.4vw,26px);padding:26px 28px;
  border:1px solid var(--line);background:var(--black-2);position:relative;
  font-family:var(--display);font-size:clamp(19px,2.3vw,29px);line-height:1.2;
  letter-spacing:-.02em;transition:border-color .4s,background .4s,transform .5s var(--ease);
}
.punch:hover{border-color:var(--red);background:rgba(230,58,43,.06);transform:translateY(-4px)}
.punch-no{
  display:block;font-family:var(--body);font-size:10px;letter-spacing:.28em;
  color:var(--red);margin-bottom:14px;font-weight:600;
}

/* ==========================================================
   LE CREW
   ========================================================== */
.crew-intro{
  font-family:var(--display);font-size:clamp(44px,7vw,90px);line-height:.9;
  letter-spacing:-.04em;color:var(--red);margin-bottom:24px;
}
.crew-m{
  padding:24px 0;border-bottom:1px solid var(--line);
  transition:padding .35s var(--ease);
}
.crew-m:first-child{border-top:1px solid var(--line)}
.crew-m:hover{padding-left:14px}
.crew-m b{font-family:var(--display);font-size:clamp(21px,2.6vw,30px);letter-spacing:-.02em;display:block}
.crew-m span{display:block;margin-top:8px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--red)}
.crew-m small{display:block;margin-top:10px;font-size:14px;color:var(--muted)}

/* ==========================================================
   LE PARCOURS — Afagnan · Godomey · Calavi · Cotonou
   ========================================================== */
.parcours{
  /* auto-fit : le bloc s adapte au nombre d etapes, 3 aujourd hui */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.etape{
  position:relative;padding:32px 24px 34px;border-right:1px solid var(--line);
  transition:background .45s var(--ease);
}
.etape:last-child{border-right:0}
.etape:hover{background:rgba(230,58,43,.05)}
.etape::before{
  content:'';position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--red);
  transition:width .6s var(--ease);
}
.etape:hover::before{width:100%}
.etape-role{
  display:block;font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--red);font-weight:600;margin-bottom:16px;
}
.etape b{
  display:block;font-family:var(--display);font-size:clamp(21px,2.7vw,34px);
  line-height:1;letter-spacing:-.03em;
}
.etape-zone{
  display:block;margin-top:9px;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.etape small{
  display:block;margin-top:18px;font-family:var(--serif);font-style:italic;
  font-size:clamp(14px,1.5vw,17px);line-height:1.5;color:var(--sand);
}
/* la flèche du parcours */
.etape:not(:last-child)::after{
  content:'→';position:absolute;right:-9px;top:34px;z-index:2;
  font-size:13px;color:var(--red);background:var(--black);padding:0 3px;
}
@media(max-width:900px){
  .parcours{grid-template-columns:repeat(2,1fr)}
  .etape:nth-child(2n){border-right:0}
  .etape:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .etape:nth-child(2)::after{display:none}
}
@media(max-width:560px){
  .parcours{grid-template-columns:1fr}
  .etape{border-right:0;border-bottom:1px solid var(--line)}
  .etape:last-child{border-bottom:0}
  .etape::after{display:none}
}

/* ==========================================================
   RÉVISION — PROFONDEUR, RYTHME, ÉMOTION
   Ce bloc corrige trois défauts mesurés : contraste insuffisant
   sur les surfaces pleines, absence d'écart de température dans
   les noirs, et rythme de sections irrégulier.
   ========================================================== */

/* ---------- 1. Le fond respire ----------
   Un noir strictement plat est mort. On glisse du noir froid au
   noir chaud : l'œil perçoit la profondeur sans nommer la cause. */
body{
  background:
    radial-gradient(120% 70% at 50% 0%, #10131A 0%, transparent 55%),
    linear-gradient(180deg, var(--black) 0%, #0C0A09 60%, var(--night) 100%);
  background-attachment:fixed;
}

/* ---------- 2. Les surfaces pleines deviennent lisibles ----------
   Le rouge de marque reste #E63A2B partout où il est décoratif.
   Dès qu'il porte du texte, il passe à --red-solid. */
.btn--solid{background:var(--red-solid);border-color:var(--red-solid)}
.btn--solid:hover{color:var(--black)}
.plat--smart{background:var(--red-solid);border-color:var(--red-solid)}
.size.on{background:var(--red-solid);border-color:var(--red-solid)}
.chip.on{background:var(--red-solid);border-color:var(--red-solid)}
.frame-tag,.shot-tag,.art-fig figcaption{background:var(--red-solid)}
.cart-count{background:var(--red-solid)}

/* ---------- 3. Rythme des sections ----------
   Trois respirations seulement, choisies — plus de valeurs au hasard. */
.section--xl{padding:clamp(110px,15vw,230px) 0}
.section--quiet{padding:clamp(56px,8vw,120px) 0;opacity:.96}

/* ---------- 4. La lumière ----------
   Un halo directionnel plutôt qu'un cercle centré : ça imite une
   source réelle et donne une direction au regard. */
.section--glow::before{
  background:
    radial-gradient(70% 100% at 18% 0%, rgba(230,58,43,.16), transparent 70%),
    radial-gradient(50% 80% at 85% 20%, rgba(194,112,58,.10), transparent 72%);
}

/* ---------- 5. Les ombres prennent le froid ----------
   Une ombre neutre aplatit. Une ombre bleutée sous un objet chaud
   creuse l'image. */
.card,.rel,.panel{box-shadow:0 22px 50px -30px rgba(8,10,15,.9)}
.card:hover,.rel:hover{box-shadow:0 34px 70px -34px rgba(8,10,15,.95),0 0 0 1px rgba(230,58,43,.14)}
.mo,.frame{box-shadow:0 30px 70px -34px rgba(8,10,15,.9)}

/* ---------- 6. Le murmure ----------
   Il faut du silence pour qu'un cri s'entende. */
.whisper{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.breathe{max-width:44ch;margin-inline:auto;text-align:center}

/* ---------- 7. Le logo du hero ne déborde plus ----------
   Sa hauteur était liée à la fenêtre (26vw) alors que le titre suit
   une autre courbe : entre 900 et 1400px il mordait sur le texte.
   Il épouse maintenant la boîte du titre. */
.hero-logo{top:0;transform:scale(.72) rotate(-5deg);transform-origin:left center;height:100%}
.hero-morph.on .hero-logo{transform:scale(1) rotate(0deg)}
.hero-logo svg{height:100%;width:auto;max-height:100%}

/* ---------- 8. Les filets se voient ----------
   .12 d'opacité donnait 1.30 de contraste : invisible. */
hr.rule{background:var(--line)}

/* ==========================================================
   LECTURE À LA DEMANDE — respect de la data
   ========================================================== */
.clip-wrap{position:relative}
.clip-play{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(60% 60% at 50% 50%,rgba(11,9,8,.34),rgba(11,9,8,.72));
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:background .45s var(--ease);
}
.clip-play:hover{background:radial-gradient(60% 60% at 50% 50%,rgba(196,42,28,.24),rgba(11,9,8,.78))}
.clip-ico{
  width:clamp(64px,8vw,88px);height:clamp(64px,8vw,88px);border-radius:50%;
  display:grid;place-items:center;background:var(--red-solid);color:var(--bone);
  font-size:clamp(20px,2.4vw,26px);padding-left:5px;
  box-shadow:0 0 0 1px rgba(245,240,233,.18),0 18px 50px -18px rgba(196,42,28,.9);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.clip-play:hover .clip-ico{transform:scale(1.08);box-shadow:0 0 0 1px rgba(245,240,233,.3),0 24px 60px -16px rgba(196,42,28,1)}
.clip-txt{font-family:var(--display);font-size:clamp(15px,1.8vw,20px);letter-spacing:-.01em}
.clip-poids{
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.clip-poids::before{content:'télécharge '}

/* ==========================================================
   ÉCRAN D'ATTENTE — la page existe, elle n'est pas ouverte
   ========================================================== */
.attente{max-width:660px;margin-inline:auto;text-align:center}
.attente-mark{display:grid;place-items:center;margin-bottom:34px}
.attente-mark svg{
  height:clamp(130px,20vw,190px);width:auto;
  filter:drop-shadow(0 0 44px rgba(230,58,43,.35));
}
.attente-mot{
  font-family:var(--display);font-size:clamp(48px,10vw,124px);line-height:.9;
  letter-spacing:-.04em;color:var(--red);margin:18px 0 26px;
  text-shadow:0 0 70px rgba(230,58,43,.32);
}
.attente-txt{margin:0 auto 22px}
.attente-note{
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.2vw,24px);
  color:var(--sand);line-height:1.45;margin:0 0 38px;
}
.attente-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* la vignette sur l'accueil */
.attente-mini{border-color:rgba(230,58,43,.35)}
.attente-mini .attente-mot{margin:0}


/* ---------- LE BOUTON SON ----------
   Quatre barres qui bougent quand ça joue, figées quand c'est coupé.
   Aucun navigateur n'autorise le son sans geste : le bouton est donc
   la commande, et le premier clic sur la page fait aussi l'affaire. */
.son-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:9px 14px;font-family:var(--body);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.son-btn:hover{border-color:var(--red);color:var(--bone)}
.son-btn.on{border-color:var(--red);color:var(--bone);background:rgba(230,58,43,.10)}
.son-barres{display:flex;align-items:flex-end;gap:2px;height:12px}
.son-barres i{display:block;width:2px;height:3px;background:currentColor;transition:height .3s var(--ease)}
.son-btn.on .son-barres i{animation:sonBarre .9s ease-in-out infinite}
.son-btn.on .son-barres i:nth-child(2){animation-delay:.15s}
.son-btn.on .son-barres i:nth-child(3){animation-delay:.30s}
.son-btn.on .son-barres i:nth-child(4){animation-delay:.45s}
@keyframes sonBarre{0%,100%{height:3px}50%{height:12px}}
@media(prefers-reduced-motion:reduce){
  .son-btn.on .son-barres i{animation:none;height:8px}
}
@media(max-width:640px){
  .son-btn .son-txt{display:none}
  .son-btn{padding:9px 11px;min-width:44px;min-height:44px;justify-content:center}
}

/* ---------- SES PHOTOS ----------
   Rien par-dessus : ni logo, ni étiquette, ni dégradé rouge.
   La photo seule, et le mouvement (assets/js/photos.js). */
.ph{position:relative;margin:0;overflow:hidden;background:var(--black-2);
  aspect-ratio:var(--ar,3/4);max-height:720px;width:100%}
.ph img{display:block;width:100%;height:100%;object-fit:cover;
  will-change:transform;transform-origin:50% 45%}
/* Le rideau d'entrée — seulement si photos.js tourne. */
.ph-anim .ph[data-ph]{clip-path:inset(100% 0 0 0);transition:clip-path 1.25s var(--ease)}
.ph-anim .ph[data-ph].vu{clip-path:inset(0 0 0 0)}
/* La bande : une photo pleine largeur qui occupe les respirations noires
   entre deux sections. Rien n'est écrit dessus — ses photos ne portent
   ni texte ni logo. C'est le mouvement qui les fait vivre. */
.ph--bande{aspect-ratio:auto;height:min(66vh,660px);max-height:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ph--bande::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--black) 0%,rgba(11,9,8,0) 24%,
             rgba(11,9,8,0) 76%,var(--black) 100%)}
/* Deux photos dans la même bande : la seconde arrive en descendant. */
.ph[data-ph="duo"] img{position:absolute;inset:0}
.ph[data-ph="duo"] img+img{opacity:0}
@media(max-width:720px){.ph--bande{height:min(52vh,420px)}}

.split .ph{justify-self:center;max-width:460px;max-height:560px}
@media(max-width:980px){.split .ph{max-height:560px;max-width:100%;margin-top:30px}}
.split--boutique{grid-template-columns:.8fr 1.2fr}
.split--boutique #homeMerch{grid-template-columns:1fr}
@media(max-width:980px){.split--boutique{grid-template-columns:1fr}}

/* ---------- LA SÉQUENCE ----------
   La scène se fige pendant qu'on défile : la flamme laisse place à la
   fumée. Aucune légende — l'image raconte seule. */
.sequence{position:relative;height:230vh;background:var(--black)}
.sequence-scene{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.sequence-cadre{position:absolute;inset:0;overflow:hidden;background:var(--black-2)}
.sequence-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;will-change:transform,opacity;transform-origin:50% 40%}
/* Un voile en haut et en bas : le texte des sections voisines ne doit pas
   buter sur l'image, et l'écran ne doit pas devenir une photo pleine page. */
.sequence-scene::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,var(--black) 0%,rgba(11,9,8,0) 18%,
             rgba(11,9,8,0) 82%,var(--black) 100%)}
.sequence-cadre .s2{opacity:0}
@media(max-width:640px){.sequence{height:200vh}}
@media(prefers-reduced-motion:reduce){
  .sequence{height:auto;padding:clamp(40px,8vw,90px) 0}
  .sequence-scene{position:relative;height:min(70vh,620px)}
  .sequence-cadre .s2{display:none}
}
/* ---------- LES CHOIX EN BOUTIQUE ----------
   Chaque pièce s'imprime à la commande : le client choisit la taille,
   la forme du logo, son emplacement et sa dimension. Quatre rangées de
   boutons, chacune annoncée par son intitulé — sinon on ne sait plus
   ce qu'on choisit. */
.choix{margin:18px 0}
.choix-t{display:block;margin-bottom:9px;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.choix .sizes{margin:0}
.merch-cmd{margin:8px 0 0;font-size:12px;color:var(--muted);font-style:italic}

/* ---------- LE MUR DE L'UNIVERS ----------
   Les photos gardent leur format d'origine : aucune n'est recadrée,
   et rien ne s'écrit par-dessus. Elles s'empilent en colonnes, donc
   un portrait et un paysage cohabitent sans se déformer. Ajouter une
   photo ne demande aucune retouche de mise en page. */
.univers-mur{columns:3;column-gap:18px}
.univers-mur .ph--libre{break-inside:avoid;margin:0 0 18px;
  aspect-ratio:auto;max-height:none;border:1px solid var(--line)}
.univers-mur .ph--libre img{height:auto;transform:none}
@media (max-width:900px){.univers-mur{columns:2;column-gap:14px}
  .univers-mur .ph--libre{margin-bottom:14px}}
@media (max-width:560px){.univers-mur{columns:1}}

/* ---------- LA PRÉSENTATION EN MOUVEMENT ----------
   La vidéo est verticale, comme elle le sera sur les réseaux. On la
   pose au centre dans son propre format plutôt que de la recadrer. */
.presentation-cadre{aspect-ratio:9/16;max-width:min(420px,78vw);margin:0 auto;
  display:grid;place-items:center;background:var(--black)}
.presentation-cadre video{display:block;border-radius:2px}

/* ============================================================
   24.10.2026 — LA PAGE ÉCOUTER, LE LABEL, LA PROCHAINE SORTIE
   ============================================================ */
.listen-btn{border-color:var(--red);background:rgba(230,58,43,.14)}
.listen-btn:hover{background:var(--red)}
.listen-btn{white-space:nowrap}
@media(max-width:560px){
  .header-cta{gap:6px}
  .listen-btn{padding:10px 11px;font-size:10px;letter-spacing:.12em}
  .cart-btn:not(.listen-btn){font-size:0;padding:10px 11px;gap:0}
  .cart-btn:not(.listen-btn)::before{content:"🛒";font-size:13px;margin-right:6px}
  .cart-btn:not(.listen-btn) .cart-count{font-size:10px}
}
@media(max-width:380px){.son-btn{display:none}}
/* le menu du haut tient sur une ligne : serré jusqu'à 1680 px, burger sous 1320 px */
@media(max-width:1680px){
  .header{gap:14px}
  .nav{gap:0}
  .nav a{padding:9px 9px;letter-spacing:.14em}
  .nav a::after{left:9px;right:9px}
  .son-btn .son-txt{display:none}
  .son-btn{padding:9px 11px}
}
@media(max-width:1320px){
  .nav{display:none}
  .burger{display:grid}
}
.next-line{margin-top:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.next-line span{color:var(--red);margin-right:6px}
.next-line b{color:var(--bone);font-weight:600}
.foot-label{display:inline-flex;align-items:center;gap:12px;color:inherit}
.foot-label img{width:120px;height:auto;opacity:.85}
.foot-label:hover{color:var(--bone)}
.foot-label:hover img{opacity:1}

/* la page Écouter */
.ec-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:900px){.ec-hero{grid-template-columns:1fr}}
.ec-cover{margin:0;position:relative}
.ec-cover img{width:100%;height:auto;display:block;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px var(--line)}
.ec-cover::after{content:'';position:absolute;inset:auto -12px -12px auto;width:58%;height:58%;border:2px solid var(--red);z-index:-1}
.ec-t{margin:18px 0 6px}
.ec-a{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone);display:flex;flex-wrap:wrap;gap:6px 16px}
.ec-a span{color:var(--muted)}
.ec-choix{margin:34px 0 14px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ec-plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:520px){.ec-plats{grid-template-columns:1fr}}
.ec-plat{--pc:var(--red);display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line-strong);background:rgba(245,240,233,.03);transition:border-color .3s,background .3s,transform .3s var(--ease)}
.ec-plat:hover,.ec-plat:focus-visible{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent);transform:translateY(-2px);outline:none}
.ec-ic{width:34px;height:34px;flex:none;color:var(--pc);display:grid;place-items:center}
.ec-ic svg{width:30px;height:30px;fill:currentColor}
.ec-plat b{font-weight:600;font-size:16px;flex:1}
.ec-go{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ec-plat b{min-width:0;line-height:1.25}
@media(max-width:1180px) and (min-width:521px){.ec-go-t{display:none}}
.ec-plat:hover .ec-go{color:var(--bone)}
.ec-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ec-tabs .chip{display:inline-flex;align-items:center;gap:8px}
.ec-tabs .chip svg{width:16px;height:16px;fill:currentColor}
.ec-player{min-height:152px;border:1px solid var(--line);padding:clamp(14px,2vw,22px);display:grid;place-items:center;background:var(--black-2)}
.ec-player iframe{width:100%;border:0;display:block;border-radius:12px}
.ec-yt{position:relative;width:100%;aspect-ratio:16/9}
.ec-yt iframe{position:absolute;inset:0;height:100%;border-radius:0}
.ec-paroles{columns:2 320px;column-gap:clamp(30px,5vw,70px);font-size:17px;line-height:1.8;color:rgba(245,240,233,.86)}
.ec-paroles p{break-inside:avoid;margin:0 0 24px}
.ec-cred{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ec-cred div{background:var(--black);padding:18px 20px}
.ec-cred dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ec-cred dd{margin:8px 0 0;font-size:16px}
.ec-autres{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ec-autre{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);transition:border-color .3s}
.ec-autre:hover{border-color:var(--red)}
.ec-autre img{width:64px;height:64px;object-fit:cover;flex:none}
.ec-autre b{display:block;font-size:15px}
.ec-autre small{display:block;margin-top:4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* Thugland : le label */
.tl-label{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,90px);align-items:center}
@media(max-width:900px){.tl-label{grid-template-columns:1fr}}
.tl-logo{margin:0;padding:clamp(24px,4vw,56px);border:1px solid var(--line);background:radial-gradient(circle at 70% 20%,rgba(255,138,92,.10),transparent 60%),var(--black-2)}
.tl-logo img{width:100%;height:auto;display:block}
.tl-devise{margin-top:28px;font-family:var(--display);font-size:clamp(22px,3vw,34px);letter-spacing:.08em;text-transform:uppercase;color:#FF8A5C}
.tl-cat{margin-top:clamp(46px,7vw,90px)}
.tl-cat-row{display:grid;grid-template-columns:110px 1fr auto auto;align-items:center;gap:18px;padding:18px 4px;border-top:1px solid var(--line);transition:background .3s}
.tl-cat-row:last-of-type{border-bottom:1px solid var(--line)}
.tl-cat-row:hover{background:rgba(245,240,233,.04)}
.tl-cat-no{font-size:11px;letter-spacing:.24em;color:#FF8A5C}
.tl-cat-row b{font-family:var(--display);font-size:clamp(20px,2.4vw,30px);font-weight:400;letter-spacing:.02em}
.tl-cat-d{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media(max-width:620px){.tl-cat-row{grid-template-columns:80px 1fr;row-gap:8px}.tl-cat-d{grid-column:2}}
.tl-branches{margin-top:18px;font-size:10px;letter-spacing:.3em}