/* MeloProd — feuille de style du site, reprise telle quelle du site de Marco Poingt (mêmes polices, couleurs, sections et animations).
   Barre de menu reprise d'Un Violon sur le Sable / Symphonie d'été ; règles iPhone Safari (iOS 26) de ../PROMPT-iphone-safari.md. */
:root{
  /* noir et blanc, accents rouges (la lumière de scène des photos de Marco) */
  --bg:#0b0b0b; --bg-2:#151515; --card:#121212; --fg:#f4f3f1; --fg-2:#cfcdca; --muted:#8e8b87; --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.26);
  --accent:#e1251b; --accent-2:#ff4a3d; --sand:#e1251b; --ink:#000; --ink-2:#0f0f0f; --ink-3:#1c1c1c; --ink-fg:#f4f3f1; --ink-muted:#8e8b87; --ink-line:rgba(255,255,255,.13);
  --menu-bg:rgba(8,8,8,.86); --menu-solid:#0b0b0b; --hdr-bg:rgba(8,8,8,.94);
  /* la police de Louis Vuitton est réservée à la marque : Jost (Futura) en est la plus proche, libre */
  --display:"Jost","Futura","Century Gothic",system-ui,sans-serif; --body:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --nav-h:74px; --hdr:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  --gut:clamp(20px,5vw,64px); --gut-r:var(--gut); --max:1320px; --r:0; --r-lg:0;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
/* une section claire, pour rythmer le noir */
.light{--bg:#f3f2ef; --bg-2:#e6e4e0; --card:#fff; --fg:#0b0b0b; --fg-2:#2e2c2a; --muted:#6f6b67; --line:rgba(0,0,0,.12); --line-2:rgba(0,0,0,.24); --accent:#c81d14; color-scheme:light;
  background:var(--bg);color:var(--fg)}
@media (max-width:760px), (pointer:coarse) and (max-height:500px){:root{--nav-h:62px}}
/* iPhone à l'horizontale : le contenu s'écarte de l'encoche */
@media (orientation:landscape) and (pointer:coarse) and (max-height:500px){:root{--gut:max(64px, calc(env(safe-area-inset-left,0px) + 20px));--gut-r:max(64px, calc(env(safe-area-inset-right,0px) + 20px))}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
html,body{background:var(--bg)}
html:has(body.menu-open),body.menu-open,html:has(body.cart-open){overflow:hidden}
body{margin:0;color:var(--fg);font:400 17px/1.6 var(--body);font-weight:350;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p,figure,blockquote,ol,ul,dl,dd{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--sand);color:#171412}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:8px}
.skip:focus{left:12px}
.wrap{width:100%;max-width:calc(var(--max) + var(--gut) + var(--gut-r));margin-inline:auto;padding-left:var(--gut);padding-right:var(--gut-r)}
main{display:block;padding-top:var(--hdr);background:var(--bg)}
section{position:relative}
.ic{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.muted{color:var(--muted)}
.center{text-align:center}
.kicker{font:500 12.5px/1.2 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.02}
h2{font-size:clamp(38px,5.2vw,72px)}
h3{font-size:clamp(25px,2.3vw,32px);line-height:1.1}
.h-sm{font-size:clamp(30px,3.4vw,44px);margin:clamp(48px,7vw,90px) 0 22px}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--fg-2);max-width:62ch}
.empty{padding:28px;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--muted);text-align:center}
.notice{padding:14px 18px;border-radius:var(--r);background:var(--bg-2);margin-bottom:22px}

/* ---------- boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);
  font:500 13.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);background:var(--accent);border-color:var(--accent);color:#fff}
.btn .ic{width:18px;height:18px}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-light{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-light:hover{background:#fff;color:#000;border-color:#fff}
.btn-light em{font-style:normal;opacity:.75;margin-left:4px;text-transform:none;letter-spacing:.02em}
.btn-glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-glass:hover{background:#fff;color:#171412;border-color:#fff}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-buy{width:100%;min-height:56px;font-size:16px}
.more{display:inline-flex;align-items:center;gap:8px;font:500 15px/1.3 var(--body);text-decoration:none;color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:3px;white-space:nowrap;transition:gap .2s,border-color .2s}
.more:hover{gap:12px;border-color:currentColor}
.more .ic{width:16px;height:16px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--line-2);font:500 14px/1 var(--body);text-decoration:none;transition:background .2s,color .2s}
.chip:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.streams{display:flex;flex-wrap:wrap;gap:8px}
.streams.mini .chip{padding:7px 12px;font-size:13px}
.socials{display:flex;gap:6px;flex-wrap:wrap}
.socials a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);color:inherit;transition:background .2s,color .2s,border-color .2s}
.socials a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.socials .ic{width:18px;height:18px}
.socials.big a{width:56px;height:56px}.socials.big .ic{width:22px;height:22px}

/* ---------- barre de menu (comme Un Violon sur le Sable) : blanche et opaque dès l'arrivée */
.site-header{position:fixed;left:0;right:0;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--fg);border-bottom:1px solid var(--line)}
.site-header::before{content:"";position:absolute;left:0;right:0;top:0;z-index:-1;height:calc(100% + 1px + var(--mh,0px));pointer-events:none;background:var(--hdr-bg);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);transition:height .42s var(--ease)}
/* Safari sur ordinateur : en-tête collant (il ne disparaît pas pendant le rebond) */
@supports (font:-apple-system-body){@media (pointer:fine){.site-header{position:sticky}main{padding-top:0}
  body.menu-open .site-header{position:fixed}body.menu-open main{padding-top:var(--hdr)}}}
.nav{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
.site-header .nav>*{position:relative}
.brand{display:grid;gap:3px;text-decoration:none;margin-right:auto;min-width:0}
.brand-name{font:500 clamp(17px,1.5vw,20px)/1 var(--display);letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
.brand-sub{font:500 10.5px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.menu{display:flex;align-items:center;gap:2px;margin:0;list-style:none;padding:0}
.menu>li{position:relative}
.menu>li>a,.menu>li>button{position:relative;display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:9px;color:var(--fg-2);text-decoration:none;font:500 15.5px/1 var(--body);background:none;border:0}
.menu>li>a::after,.menu>li>button::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1.5px;background:currentColor;transform:scaleX(0);transition:transform .25s ease}
.menu>li>a:hover,.menu>li>button:hover,.menu>li.active>button,.menu>li.active>a,.menu>li.hover>button{color:var(--fg)}
.menu>li.active>a::after,.menu>li.active>button::after{transform:none;background:var(--accent)}
.menu>li>a:hover::after,.menu>li>button:hover::after,.menu>li.hover>button::after{transform:none}
.menu .caret{width:10px;height:10px;opacity:.6;transition:transform .25s}
.menu>li.hover .caret{transform:rotate(180deg)}
.drop{display:none}
.mega{position:absolute;left:0;right:0;top:100%;height:0;overflow:hidden;visibility:hidden;transition:height .42s var(--ease),visibility 0s linear .42s}
.mega.open{visibility:visible;transition:height .42s var(--ease),visibility 0s}
.mega-in{display:block;padding-block:20px 40px}
.mega-col{display:grid;align-content:start;justify-items:start;gap:6px;width:max-content;max-width:100%;margin-left:var(--mx,0px);opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease}
.mega.show .mega-col{opacity:1;transform:none;transition:opacity .35s ease .08s,transform .45s var(--ease) .04s}
.mega-col a{display:grid;font-family:var(--display);font-size:clamp(28px,2.4vw,36px);line-height:1.15;color:var(--fg);text-decoration:none;padding-block:3px}
.mega-col a small{font-family:var(--body);font-size:14px;color:var(--muted);line-height:1.3}
.mega-col a:hover{color:var(--accent)}
.mega-veil{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s ease}
.mega-veil.on{opacity:1}
.hdr-shop{display:inline-flex;align-items:center;margin-left:8px;padding:10px 4px;color:var(--accent);font:600 15.5px/1 var(--body);text-decoration:none;white-space:nowrap}
.hdr-shop:hover,.hdr-shop[aria-current]{text-decoration:underline;text-underline-offset:5px}
.cart-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:none;color:var(--fg);flex:none}
.cart-btn:hover{background:var(--bg-2)}
.cart-btn .ic{width:23px;height:23px}
.cart-n{position:absolute;top:3px;right:1px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font:600 11px/19px var(--body);text-align:center}
.cart-n.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
/* la lecture en cours : une pastille dans la barre (jamais en bas de l'écran) */
.np{display:inline-flex;align-items:center;gap:9px;max-width:230px;height:38px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font:500 13px/1 var(--body)}
.np-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-eq{display:flex;align-items:flex-end;gap:2px;height:14px;flex:none}
.np-eq i{width:3px;background:var(--accent);border-radius:2px;height:40%;animation:eq 1s ease-in-out infinite}
.np-eq i:nth-child(2){animation-delay:-.35s}.np-eq i:nth-child(3){animation-delay:-.7s}
.np.paused .np-eq i{animation:none;height:35%}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}
.burger{display:none;width:44px;height:44px;border-radius:10px;border:0;background:none;color:var(--fg);position:relative;flex:none;margin-right:-8px}
.burger:focus{outline:none}
.burger svg{position:absolute;inset:0;margin:auto;width:26px;height:26px;transition:opacity .18s ease,transform .18s ease}
.burger .ic-close{opacity:0;transform:rotate(-90deg)}
.burger[aria-expanded="true"] .ic-menu{opacity:0;transform:rotate(90deg)}
.burger[aria-expanded="true"] .ic-close{opacity:1;transform:none}
.mobile-nav,.mnav-tail{display:none}
@media (max-width:1060px){
  .mega,.mega-veil,.menu,.hdr-shop{display:none}
  .burger{display:inline-flex}
  .np{max-width:150px}
  .mobile-nav{position:fixed;left:0;right:0;top:var(--hdr);height:calc(100svh - var(--hdr) - 8px);height:calc(100dvh - var(--hdr) - 8px);z-index:60;overflow-y:auto;overscroll-behavior:contain;
    padding:10px var(--gut-r) 28px var(--gut);flex-direction:column}
  .mobile-nav.open{display:flex}
  /* la surface floutée du menu descend jusque sous la barre de Safari : un élément ordinaire, placé au défilement (pas un fixe en bas) */
  body.menu-open .mnav-tail{display:block;position:absolute;left:0;right:0;height:calc(100lvh + 220px);z-index:49;pointer-events:none;background:var(--menu-bg);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
  .mobile-nav .grp{border-bottom:1px solid var(--line);padding-block:16px;display:grid}
  .mobile-nav .grp p{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
  .mobile-nav a{color:var(--fg);text-decoration:none;font-family:var(--display);font-size:32px;line-height:1.15;padding:4px 0}
  .mobile-nav .m-shop{display:flex;align-items:center;gap:10px;color:var(--accent)}
  .mobile-nav .m-shop .ic{width:24px;height:24px}
  .mobile-nav .mnav-socials{margin-top:auto;padding-top:28px;gap:10px}
  .mobile-nav .mnav-socials a{width:46px;height:46px;padding:0;font-size:0}
  .mobile-nav .mnav-socials .ic{width:19px;height:19px}
}
@media (max-width:420px){.brand-sub{display:none}.np{display:none!important}}

/* ---------- accueil : la grande photo */
.hero{position:relative;height:calc(100svh - var(--hdr));min-height:540px;max-height:1100px;overflow:hidden;background:#000;color:#fff;display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);transform:scale(1.04);animation:heroIn 2.2s var(--ease) both}
@keyframes heroIn{from{transform:scale(1.12);opacity:.3}to{transform:scale(1.04);opacity:1}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.6) 74%,rgba(0,0,0,.9) 100%),linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 60%)}
.hero-in{position:relative;z-index:2;padding-bottom:clamp(36px,6vh,72px)}
.hero .kicker{color:#fff;display:flex;align-items:center;gap:12px}.hero .kicker::before{content:"";width:28px;height:2px;background:var(--accent)}
.hero-name{display:grid;font-size:clamp(58px,11vw,190px);font-weight:500;line-height:.88;letter-spacing:.02em;text-transform:uppercase;margin-left:-.04em}
.hero-name span{display:block;animation:rise 1.2s var(--ease) both}
.hero-name span+span{animation-delay:.12s;-webkit-text-stroke:1.5px #fff;color:transparent}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.hero-tag{margin-top:22px;font:500 13px/1.3 var(--body);letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-socials{position:absolute;z-index:2;right:var(--gut-r);bottom:clamp(36px,6vh,72px);flex-direction:column}
.hero-socials a{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-socials a:hover{background:#fff;color:#171412;border-color:#fff}
.hero-credit.c-mob{display:none}@media (max-width:760px){.hero-credit.c-desk{display:none}.hero-credit.c-mob{display:block}}
.hero-credit{position:absolute;z-index:2;right:var(--gut-r);top:18px;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.55)}
@media (max-width:760px){
  .hero{min-height:0}
  .hero-bg{object-position:var(--pos-m)}
  .hero-socials{display:none}
  .hero-cta .btn{flex:1 1 auto}
}
/* écran tactile (Safari iPhone) : la photo descend 80 px sous 100lvh, le texte remonte d'autant au-dessus de la barre flottante */
@media (pointer:coarse){
  .hero{height:calc(100lvh + 80px - var(--hdr));max-height:none}
  .hero-in{padding-bottom:calc(100lvh - 100svh + 80px + 28px)}
}

/* ---------- accueil : en quelques mots */
.intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:end;padding-block:clamp(70px,10vw,140px)}
.intro-lead{font:400 clamp(27px,3vw,42px)/1.22 var(--display);letter-spacing:-.005em;margin-bottom:34px;text-wrap:pretty}
.intro-facts,.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.intro-facts div,.facts div{background:var(--bg);padding:26px 22px;display:grid;gap:6px;align-content:start}
.intro-facts b,.facts b{font:400 clamp(34px,3.4vw,48px)/1 var(--display);color:var(--accent)}
.intro-facts span,.facts span{font-size:14px;line-height:1.4;color:var(--muted)}
@media (max-width:900px){.intro{grid-template-columns:1fr}}

/* ---------- sections sombres, en-têtes de section */
.dark{background:var(--ink);color:var(--ink-fg)}
.dark .kicker{color:var(--sand)}
.dark .more{color:var(--ink-fg);border-color:var(--ink-line)}
.dark .muted{color:var(--ink-muted)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}

/* ---------- carrousels : défilement horizontal au doigt, flèches à la souris */
.slider{position:relative}
.sl-track{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:max(var(--gut), calc((100vw - var(--max)) / 2));scroll-padding-inline:max(var(--gut), calc((100vw - var(--max)) / 2));padding-bottom:6px;touch-action:pan-x pan-y}
.sl-track::-webkit-scrollbar{display:none}
.sl-track>*{scroll-snap-align:start;flex:none}
.sl-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.sl-nav button{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:none;transition:background .2s,color .2s,opacity .2s}
.dark .sl-nav button{border-color:var(--ink-line);color:var(--ink-fg)}
.sl-nav button:hover:not(:disabled){background:var(--fg);color:var(--bg)}
.dark .sl-nav button:hover:not(:disabled){background:var(--ink-fg);color:var(--ink)}
.sl-nav button:disabled{opacity:.3;cursor:default}
.sl-nav .ic{width:20px;height:20px}
.sl-prev .ic{transform:rotate(180deg)}
@media (pointer:coarse){.sl-nav{display:none}}

/* ---------- expéditions */
.xsec{padding-block:clamp(70px,9vw,130px)}
.xcard{position:relative;width:clamp(290px,31vw,440px);aspect-ratio:4/5.2;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-3);isolation:isolate}
.xcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);z-index:-2}
.xcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.82))}
.xcard:hover img{transform:scale(1.06)}
.xc-in{position:absolute;inset:auto 0 0;padding:clamp(22px,2.4vw,32px);display:grid;gap:6px}
.alt{font:300 clamp(54px,5.6vw,88px)/.9 var(--display);letter-spacing:-.03em;color:#fff}
.xcard h3{font-size:clamp(26px,2.3vw,32px);color:#fff}
.xc-meta{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand)}
.xc-txt{font-size:15px;line-height:1.5;color:rgba(255,255,255,.8);margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xc-play{display:inline-flex;align-items:center;gap:10px;justify-self:start;margin-top:12px;padding:10px 16px 10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;font:500 14px/1 var(--body);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.xc-play:hover{background:#fff;color:#171412}
.xc-play .ic{width:16px;height:16px}

/* ---------- agenda + écoute */
.duo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);padding-block:clamp(70px,9vw,130px);align-items:start}
.duo .sec-head{margin-bottom:22px}
.duo h2{font-size:clamp(36px,4vw,56px)}
.listen{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.5vw,34px)}
.lst-top{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center;margin-bottom:18px}
.lst-top .cover{border-radius:10px}
.lst-top h2{margin-bottom:4px}
.lst-top .streams{margin-top:12px}
.lst-act{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:20px}
@media (max-width:960px){.duo{grid-template-columns:1fr}}
.cover{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r);box-shadow:0 20px 40px -24px rgba(0,0,0,.5);background:var(--ink-2)}
.cover-blank{display:grid;place-content:center;text-align:center;gap:6px;color:#fff;background:radial-gradient(circle at 30% 20%,#7a120c,#000 70%)}
.cover-blank span{font:400 clamp(22px,3vw,40px)/1 var(--display)}
.cover-blank small{font-size:12px;letter-spacing:.2em;color:var(--sand)}

/* ---------- concerts */
.clist{display:grid;border-top:1px solid var(--line)}
.concert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.cdate{display:grid;justify-items:center;width:84px;padding:12px 0;border-radius:var(--r);background:var(--bg-2);line-height:1}
.cdate b{font:400 40px/1 var(--display)}
.cdate b small{font-size:.55em}
.cdate span{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.cdate i{font-style:normal;font-size:12px;color:var(--muted);margin-top:5px}
.c-when{font-size:13px;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.c-main h3{font-size:clamp(24px,2.2vw,30px)}
.c-where{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--fg-2);font-size:15px}
.c-where .ic{width:15px;height:15px;color:var(--accent)}
.c-note{margin-top:8px;font-size:15px;color:var(--muted)}
.c-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.st{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff;font:600 11px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.st.big{font-size:14px;padding:8px 14px}
.concert.past .cdate{background:transparent;border:1px solid var(--line)}
.concert.past .c-main h3{color:var(--fg-2)}
.agenda .concert{grid-template-columns:auto minmax(0,1fr) auto;padding:18px 0}
.agenda .c-act .btn-ghost{min-height:40px;padding:0 12px}
.agenda .c-act .btn-ghost span{display:none}
@media (max-width:700px){
  .concert{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .cdate{width:68px}.cdate b{font-size:32px}
  .c-act{grid-column:2;justify-content:flex-start}
}
.csec{padding-bottom:clamp(70px,9vw,120px)}
.csec .h-sm:first-child{margin-top:clamp(36px,5vw,60px)}

/* ---------- titres à écouter */
.tracks{list-style:none;padding:0;display:grid;counter-reset:t}
.tracks li{border-top:1px solid var(--line)}
.tracks li:last-child{border-bottom:1px solid var(--line)}
.trk{display:grid;grid-template-columns:28px 34px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:11px 4px;border:0;background:none;text-align:left;font-size:15.5px;border-radius:8px}
.trk.off{grid-template-columns:28px minmax(0,1fr);color:var(--muted);cursor:default}
button.trk:hover{background:var(--bg-2)}
.trk .n{font-size:13px;color:var(--muted);text-align:right}
.trk .pp{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--fg);color:var(--bg)}
.trk .pp .ic{width:14px;height:14px}
.trk .i-pa,.trk.playing .i-pl{display:none}
.trk.playing .i-pa{display:block}
.trk.playing .t{color:var(--accent);font-weight:500}
.trk .tm{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.trk{position:relative}
.trk.playing::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--p,0%);background:var(--accent);border-radius:2px}

/* ---------- vidéos */
.vsec{padding-block:clamp(70px,9vw,120px);background:var(--bg-2)}
.dark{background:#000}
.vcard{display:grid;gap:14px;width:clamp(280px,36vw,560px);border:0;background:none;padding:0;text-align:left}
.v-img{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.v-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.vcard:hover .v-img img{transform:scale(1.04)}
.v-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.92);color:#171412;border:0;transition:transform .3s var(--ease)}
.v-play .ic{width:24px;height:24px;margin-left:3px}
.vcard:hover .v-play{transform:translate(-50%,-50%) scale(1.08)}
.v-title{font:400 clamp(21px,1.8vw,26px)/1.2 var(--display)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:34px 26px}
.vgrid .vcard{width:auto}

/* ---------- citations */
.qsec{padding-block:clamp(64px,8vw,120px);text-align:center}
.quotes{display:grid}
.q{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s;display:grid;gap:30px;justify-items:center}
.q.on{opacity:1;visibility:visible;transition:opacity .8s ease .2s}
.q blockquote{font:300 clamp(26px,3.4vw,48px)/1.2 var(--display);max-width:28ch;text-wrap:balance}
.q blockquote[lang]{font-size:clamp(23px,2.6vw,38px);max-width:34ch;font-style:italic}
.q figcaption{display:flex;align-items:center;gap:14px;text-align:left}
.q figcaption img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.q figcaption span{display:grid;font-weight:500;letter-spacing:.04em}
.q figcaption small{font-weight:400;font-size:13px;color:var(--ink-muted)}
.q-dots{display:flex;justify-content:center;gap:10px;margin-top:44px}
.q-dots button{width:34px;height:3px;padding:0;border:0;border-radius:2px;background:var(--ink-line);position:relative;overflow:hidden}
.q-dots button::before{content:"";position:absolute;inset:-12px 0}
.q-dots button[aria-selected="true"]{background:var(--sand)}

/* ---------- presse : bandeau qui défile */
.press-band{padding-block:clamp(56px,7vw,90px) clamp(40px,5vw,70px);border-bottom:1px solid var(--line)}
.press-band .sec-head{margin-bottom:24px}
.press-band .sec-head .kicker{margin:0}
.marquee{display:block;overflow:hidden;text-decoration:none;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 60s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{font:400 clamp(30px,4vw,56px)/1.1 var(--display);white-space:nowrap;padding-inline:.6em;display:flex;align-items:center;gap:1.2em}
.mq-track span::after{content:"";width:.18em;height:.18em;border-radius:50%;background:var(--accent);margin-left:1.2em}
.mq-track span{text-transform:uppercase;letter-spacing:.04em;font-weight:500}.mq-track span:nth-child(odd){color:transparent;-webkit-text-stroke:1px var(--fg)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation-duration:240s}}

/* ---------- boutique : cartes */
.shop-teaser{padding-block:clamp(70px,9vw,120px)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:30px 22px}
.pgrid.big{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:40px 28px;padding-block:clamp(40px,5vw,60px) 20px}
@media (max-width:560px){.pgrid{grid-template-columns:1fr 1fr;gap:26px 14px}}
.pcard{position:relative;display:grid;gap:14px;align-content:start}
.pc-img{position:relative;display:block;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pcard:hover .pc-img img{transform:scale(1.04)}
.tag{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:999px;background:var(--fg);color:var(--bg);font:600 11.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.pc-kind{font:600 11.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pc-txt h3{font-size:clamp(22px,1.9vw,27px);margin-top:6px}
.pc-txt h3 a{text-decoration:none}
.pc-price{margin-top:6px;font-weight:500}
.pc-add{position:absolute;right:10px;top:calc((100% - 0px) * 0);margin-top:10px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--card);color:var(--fg);box-shadow:0 6px 20px -8px rgba(0,0,0,.35);transition:transform .2s,background .2s,color .2s}
.pc-add:hover{background:var(--fg);color:var(--bg);transform:scale(1.06)}
.pc-add .ic{width:20px;height:20px}
.pc-add.ok{background:var(--accent);color:#fff}
.ship-info{display:grid;grid-template-columns:1fr 1fr;gap:20px 60px;padding-bottom:clamp(60px,8vw,110px)}
.ship-info .h-sm{margin-top:40px;font-size:30px}
.ship{list-style:none;padding:0;display:grid}
.ship li{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.ship li span{color:var(--muted)}
@media (max-width:760px){.ship-info{grid-template-columns:1fr}}

/* ---------- fiche produit */
.product{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);padding-block:clamp(26px,4vw,50px) clamp(60px,8vw,110px);align-items:start}
.crumbs{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--fg)}
.crumbs .ic{width:12px;height:12px}
.pr-gal{position:sticky;top:calc(var(--hdr) + 24px);display:grid;gap:12px}
.pr-main{aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2)}
.pr-main img{width:100%;height:100%;object-fit:cover}
.pr-thumbs{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
.pr-thumbs button{flex:none;width:78px;aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none}
.pr-thumbs button[aria-current]{border-color:var(--fg)}
.pr-thumbs img{width:100%;height:100%;object-fit:cover}
.pr-info h1{font-size:clamp(46px,5.4vw,78px);line-height:.98}
.pr-info>.muted{margin-top:10px}
.pr-price{font:400 36px/1 var(--display);margin:24px 0}
.buy{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-bottom:28px}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;height:56px}
.qty button{display:grid;place-items:center;width:46px;height:100%;border:0;background:none}
.qty .ic{width:18px;height:18px}
.qty input{width:34px;border:0;background:none;text-align:center;font:500 16px var(--body);color:inherit;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc summary{display:flex;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;list-style:none;font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ic{transition:transform .25s}
.acc[open] summary .ic{transform:rotate(45deg)}
.acc>:not(summary){margin-bottom:18px}
.pr-info .prose{margin:6px 0 26px}
@media (max-width:860px){.product{grid-template-columns:1fr}.pr-gal{position:static}.buy{grid-template-columns:1fr}.qty{justify-self:start}}

/* ---------- en-tête des pages intérieures */
.phead{padding-block:clamp(56px,8vw,110px) clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(46px,8vw,128px);font-weight:500;line-height:.92;letter-spacing:.01em;text-transform:uppercase}
.phead .lead{margin-top:22px}
.phead .lead a{color:inherit}
.phead.has-img{position:relative;overflow:hidden;color:#fff;background:#000;border:0;padding-block:clamp(120px,22vw,300px) clamp(40px,5vw,70px)}
.phead.has-img .phead-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phead.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 30%,rgba(0,0,0,.85))}
.phead.has-img .phead-in{position:relative;z-index:1}
.phead.has-img .kicker{color:var(--sand)}
.phead.has-img .lead{color:rgba(255,255,255,.85)}

/* ---------- biographie */
.bio{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,110px);padding-block:clamp(60px,8vw,120px);align-items:start}
.bio-pic{position:sticky;top:calc(var(--hdr) + 28px)}
.bio-pic img{width:100%;border-radius:var(--r-lg);aspect-ratio:4/5.4;object-fit:cover}
.bio-pic figcaption{font-size:12.5px;color:var(--muted);margin-top:10px}
.bio-lead{font:400 clamp(30px,3.2vw,46px)/1.15 var(--display);margin-bottom:34px;text-wrap:balance}
.prose{max-width:68ch}
.prose p,.prose ul,.prose ol{margin-bottom:1.1em}
.prose p:last-child{margin-bottom:0}
.prose h2{font-size:clamp(30px,3vw,40px);margin:1.4em 0 .5em}
.prose h3{margin:1.2em 0 .4em}
.prose a{color:var(--accent)}
.bio .prose>p:first-child::first-letter,.bio .prose>div>p:first-child::first-letter{float:left;font:400 5.2em/.78 var(--display);margin:.06em .1em 0 0;color:var(--accent)}
.pull{margin-top:44px;padding:30px 0 0;border-top:1px solid var(--line-2);font:italic 400 clamp(25px,2.4vw,34px)/1.25 var(--display);color:var(--fg-2)}
.facts{grid-template-columns:repeat(4,1fr);margin-bottom:clamp(60px,8vw,110px)}
@media (max-width:900px){.bio{grid-template-columns:1fr}.bio-pic{position:static;max-width:460px}.facts{grid-template-columns:1fr 1fr}}
.xline{display:grid;gap:clamp(40px,6vw,90px)}
.xrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.xrow:nth-child(even) .xr-img{order:2}
.xr-img{position:relative;aspect-ratio:16/10.5;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-3)}
.xr-img img{width:100%;height:100%;object-fit:cover}
.xr-txt .alt{font-size:clamp(66px,8.5vw,136px);color:var(--accent)}
.xr-txt h3{font-size:clamp(34px,3.6vw,52px);margin:10px 0 6px}
.xr-txt>p:last-child{margin-top:16px;color:rgba(244,238,231,.82);max-width:46ch}
@media (max-width:860px){.xrow{grid-template-columns:1fr}.xrow:nth-child(even) .xr-img{order:0}}
.tsec{padding-block:clamp(70px,9vw,120px)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,40px);display:grid;gap:26px;align-content:space-between}
.tcard blockquote{font:italic 400 clamp(22px,2vw,28px)/1.3 var(--display)}
.tcard figcaption{display:flex;align-items:center;gap:14px}
.tcard img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.tcard figcaption span{display:grid;font-weight:500}
.tcard small{font-weight:400;color:var(--muted);font-size:13.5px}
.tcard a{text-decoration:none}

/* ---------- musique */
.covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,190px),1fr));gap:26px 18px;padding-block:clamp(40px,5vw,64px) 30px}
.covers a{display:grid;gap:12px;text-decoration:none}
.covers .cover{transition:transform .5s var(--ease)}
.covers a:hover .cover{transform:translateY(-6px) rotate(-1deg)}
.covers span{display:grid;font:400 22px/1.15 var(--display)}
.covers small{font:500 12px/1.4 var(--body);letter-spacing:.14em;color:var(--muted)}
.streams-all{padding-bottom:20px}
.album{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,90px);padding-block:clamp(56px,7vw,100px);border-top:1px solid var(--line);align-items:start}
.al-cover{position:sticky;top:calc(var(--hdr) + 24px)}
.album h2{font-size:clamp(46px,5vw,76px)}
.album h2 em{font-size:.5em;color:var(--muted);letter-spacing:0}
.al-txt>p{margin-top:12px;max-width:58ch}
.al-txt .tracks{margin-top:28px}
.al-act{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}
@media (max-width:820px){.album{grid-template-columns:1fr}.al-cover{position:static;max-width:380px}}

/* ---------- photos : mosaïque sans trou (positions calculées par site.js) */
.grid-photos{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,16vw,240px);grid-auto-flow:dense;gap:10px;padding-bottom:clamp(60px,8vw,110px)}
.grid-photos .ph{display:block;border-radius:10px;overflow:hidden;background:var(--bg-2)}
.grid-photos img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.grid-photos .ph:hover img{transform:scale(1.04)}
@media (max-width:700px){.grid-photos{grid-template-columns:repeat(2,1fr);grid-auto-rows:42vw;gap:6px}}
#videos{padding-bottom:10px}

/* ---------- presse */
.tabs{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding:clamp(30px,4vw,50px) 0 24px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:11px 18px;border-radius:999px;border:1px solid var(--line-2);background:none;font:500 15px/1 var(--body)}
.tab[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.plist{display:grid;border-top:1px solid var(--line);margin-bottom:clamp(60px,8vw,110px)}
.pitem{display:grid;grid-template-columns:minmax(150px,.32fr) minmax(0,1fr) auto;gap:8px 30px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s,padding .3s var(--ease)}
.pitem:hover{background:var(--card);padding-inline:14px}
.p-media{font:600 13px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.p-title{font:400 clamp(21px,1.8vw,26px)/1.25 var(--display)}
.p-meta{grid-column:2;font-size:13.5px;color:var(--muted)}
.p-go{grid-row:1;grid-column:3;width:20px;height:20px;color:var(--muted)}
@media (max-width:700px){.pitem{grid-template-columns:minmax(0,1fr) auto}.p-media,.p-title,.p-meta{grid-column:1}.p-go{grid-row:1/span 3;grid-column:2;align-self:center}}

/* ---------- contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-block:clamp(40px,6vw,80px) 10px}
.ct-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,46px);display:grid;gap:14px;align-content:start}
.ct-card h2{font-size:clamp(38px,4vw,56px);margin-bottom:10px}
.ct-card h2 a{text-decoration:none}
.ct-line{display:flex;align-items:center;gap:14px;font:400 clamp(22px,2vw,28px)/1.2 var(--display);text-decoration:none;padding:10px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.ct-line .ic{width:22px;height:22px;color:var(--accent)}
.ct-line:hover{color:var(--accent)}
@media (max-width:760px){.contact{grid-template-columns:1fr}}
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(44%,150px),1fr));gap:12px;padding-bottom:clamp(50px,7vw,100px)}
.partners>*{display:grid;place-items:center;aspect-ratio:3/2;background:#fff;padding:14px;border:1px solid var(--line);filter:grayscale(1);transition:transform .3s var(--ease)}
.partners>a:hover{transform:translateY(-3px);filter:none}
.partners img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.partners span{font:400 20px/1.1 var(--display);color:#171412;text-align:center}
.narrow{max-width:calc(820px + var(--gut) * 2);padding-block:clamp(40px,6vw,80px)}
.thanks{padding-block:clamp(80px,12vw,180px);display:grid;gap:22px;justify-items:start}
.thanks h1{font-size:clamp(70px,11vw,160px)}
.thanks .btn{margin-right:8px}

/* ---------- pied de page */
.site-footer{background:#000;color:var(--ink-fg);padding-top:clamp(60px,8vw,110px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px 80px;padding-bottom:clamp(50px,6vw,80px);border-bottom:1px solid var(--ink-line)}
.site-footer .kicker{color:var(--sand)}
.foot-big{font:500 clamp(36px,5.4vw,84px)/.98 var(--display);letter-spacing:.01em;text-transform:uppercase}
.foot-big a{text-decoration:none}
.foot-big .ic{width:.55em;height:.55em;margin-left:.2em;vertical-align:.05em;transition:transform .3s var(--ease)}
.foot-big a:hover .ic{transform:translateX(8px)}
.foot-prod{margin-top:20px;color:var(--ink-muted)}
.foot-lines{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px}
.foot-lines a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:17px}
.foot-lines .ic{width:18px;height:18px;color:var(--sand)}
.foot-lines a:hover{color:var(--sand)}
.foot-nav ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-bottom:28px}
.foot-nav a{text-decoration:none;color:var(--ink-muted)}
.foot-nav a:hover{color:var(--ink-fg)}
.foot-socials a{border-color:var(--ink-line)}
.foot-socials a:hover{background:var(--ink-fg);color:var(--ink);border-color:var(--ink-fg)}
.foot-partners{padding-top:44px}
.foot-partners .partners{padding-bottom:44px;grid-template-columns:repeat(auto-fill,minmax(min(30%,120px),1fr))}
.foot-partners .partners>*{border:0}
.legal{display:flex;flex-wrap:wrap;gap:8px 24px;padding-block:24px calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ink-line);font-size:13.5px;color:var(--ink-muted)}
.legal a{text-decoration:none}.legal a:hover{color:var(--ink-fg)}
.legal .admin-link{margin-left:auto;padding:4px 12px;border:1px solid var(--ink-line);border-radius:999px}
@media (max-width:860px){.foot-top{grid-template-columns:1fr}}

/* ---------- visionneuses : photo, vidéo */
dialog{max-width:none;max-height:none;border:0;padding:0}
.lb,.vbox{width:100vw;height:100vh;height:100dvh;margin:0;background:rgba(0,0,0,.97);color:#fff;overscroll-behavior:contain}
.lb::backdrop,.vbox::backdrop{background:rgba(8,7,6,.9)}
.lb[open]{display:grid;place-items:center}
.lb figure{display:grid;gap:10px;justify-items:center;padding:60px 16px 100px}
.lb img{max-width:min(92vw,1600px);max-height:calc(100dvh - 180px);object-fit:contain;border-radius:6px}
.lb figcaption{font-size:13px;color:rgba(255,255,255,.6)}
.lb-bar{position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:center;gap:22px}
.lb-nav{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff}
.lb-nav.prev .ic{transform:rotate(180deg)}
.lb-count{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7)}
.lb-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff}
.lb-x .ic{width:22px;height:22px}
.vbox[open]{display:grid;place-items:center}
.vbox-in{width:min(92vw,calc((100dvh - 160px) * 16 / 9),1400px)}
.vbox-frame{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.vbox-frame iframe{width:100%;height:100%;border:0;display:block}
.vbox-t{margin-top:14px;font:400 22px/1.2 var(--display);color:rgba(255,255,255,.85)}

/* ---------- panier : un tiroir à droite (une boîte de dialogue : rien n'est posé en bas de l'écran quand il est fermé) */
.cart{position:fixed;inset:0 0 0 auto;width:min(460px,100vw);height:100%;max-height:none;margin:0 0 0 auto;background:var(--bg);color:var(--fg);box-shadow:-30px 0 60px -30px rgba(0,0,0,.4)}
.cart::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cart[open]{animation:slideIn .45s var(--ease)}
@keyframes slideIn{from{transform:translateX(100%)}}
.cart-in{display:flex;flex-direction:column;height:100%;padding:calc(18px + env(safe-area-inset-top,0px)) 22px calc(22px + env(safe-area-inset-bottom,0px))}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cart-head h2{font-size:40px}
.cart-x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--bg-2)}
.cart-x .ic{width:20px;height:20px}
.cart-items{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-block:6px}
.ci{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.ci img{width:76px;height:76px;object-fit:cover;border-radius:10px;background:var(--bg-2)}
.ci-t{font:400 21px/1.15 var(--display)}
.ci-t a{text-decoration:none}
.ci-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ci .qty{height:38px;margin-top:8px;width:max-content}
.ci .qty button{width:34px}
.ci .qty span{min-width:22px;text-align:center;font-weight:500}
.ci-p{font-weight:500;align-self:start;white-space:nowrap}
.ci-rm{grid-column:3;justify-self:end;border:0;background:none;color:var(--muted);font-size:13px;text-decoration:underline;padding:4px 0}
.cart-empty{padding:50px 10px;text-align:center;color:var(--muted)}
.cart-empty .btn{margin-top:18px}
.cart-foot{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:14px}
.cart-zone{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.cart-zone select{height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);color:var(--fg);font:400 16px var(--body)}
.cart-sum{display:grid;gap:6px}
.cart-sum div{display:flex;justify-content:space-between;font-size:15px}
.cart-sum dt{color:var(--muted)}
.cart-sum .tot{font-size:19px;font-weight:600;padding-top:8px;border-top:1px solid var(--line)}
.cart-sum .tot dt{color:var(--fg)}
.cart-note{font-size:12.5px;color:var(--muted);text-align:center}
.cart-note.err{color:#b8321f}
.cart-note a{color:inherit}

/* ---------- apparition douce au défilement */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}

/* ---------- carré partout : un rendu plus industriel */
*,*::before,*::after{border-radius:0!important}
.intro-lead,.bio-lead,.lead{font-weight:300}
h2{font-weight:400}
.sec-head h2,.duo h2{text-transform:uppercase;letter-spacing:.01em;font-weight:500;font-size:clamp(34px,4.6vw,64px);line-height:.98}
.st{background:var(--accent)}
.cart-n{background:var(--accent)}
.trk .pp{background:var(--accent);color:#fff}
.hdr-shop{color:#fff;background:var(--accent);padding:11px 16px;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.hdr-shop:hover,.hdr-shop[aria-current]{text-decoration:none;background:#fff;color:#000}
.menu>li>a,.menu>li>button{font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.v-play{background:var(--accent);color:#fff}
.q-dots button[aria-selected="true"]{background:var(--accent)}
.intro-facts b,.facts b{color:var(--fg);font-weight:300}
.intro-facts div:nth-child(3) b,.facts div:nth-child(3) b{color:var(--accent)}

/* ---------- retouches : menu du téléphone compact (tout tient sans défiler), boutons secondaires en texte souligné */
@media (max-width:1060px){
  .mobile-nav{padding-top:4px;padding-bottom:20px}
  .mobile-nav .grp{padding-block:10px}
  .mobile-nav .grp p{font-size:11px;margin-bottom:2px}
  .mobile-nav a{font-size:21px;line-height:1.25;padding:3px 0}
  .mobile-nav .m-shop .ic{width:18px;height:18px}
  .mobile-nav .mnav-socials{padding-top:16px;gap:4px}
  .mobile-nav .mnav-socials a{width:40px;height:40px}
}
.intro-facts,.facts{background:none;border:0;gap:0 28px;overflow:visible}
.intro-facts div,.facts div{background:none;border-top:1px solid var(--line);padding:18px 0 14px}
.btn-ghost,.btn-glass{min-height:0;padding:6px 0;border:0;background:none!important;color:inherit;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn-ghost:hover,.btn-glass:hover{color:var(--accent)!important;transform:none}
.c-act .btn-ghost{min-height:0}
.socials a{border:0;width:38px;height:38px;background:none}
.socials a:hover{background:none;color:var(--accent)}
.hero-socials a{border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero-socials a:hover{background:none;color:var(--accent)}
.foot-socials a:hover{background:none;color:var(--accent)}
.chip{border:0;padding:4px 0;margin-right:10px;text-decoration:underline;text-underline-offset:5px}
.chip:hover{background:none;color:var(--accent)}
.sl-nav button{border:0}
.xc-play{border:0;background:none;padding:6px 0;text-decoration:underline;text-underline-offset:5px;-webkit-backdrop-filter:none;backdrop-filter:none}
.xc-play:hover{background:none;color:var(--accent)}
.legal{align-items:center}
.legal .admin-link{margin-left:auto;padding:0;border:0;text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.legal .admin-link{margin-left:0}}

/* ---------- textes un cran plus petits partout */
body{font-size:16px}
h2{font-size:clamp(30px,4vw,54px)}
h3{font-size:clamp(21px,1.9vw,27px)}
.h-sm{font-size:clamp(24px,2.6vw,34px)}
.lead{font-size:clamp(16px,1.3vw,18px)}
.kicker{font-size:11.5px}
.sec-head h2,.duo h2{font-size:clamp(26px,3.4vw,46px)}
.hero-name{font-size:clamp(48px,8.6vw,150px)}
.hero-tag{font-size:12px}
.intro-lead{font-size:clamp(20px,2.1vw,30px);line-height:1.3}
.intro-facts b,.facts b{font-size:clamp(28px,2.6vw,38px)}
.intro-facts span,.facts span{font-size:13px}
.alt{font-size:clamp(42px,4.4vw,70px)}
.xcard h3{font-size:clamp(21px,1.8vw,26px)}
.xc-txt{font-size:14px}
.xr-txt .alt{font-size:clamp(50px,6.4vw,104px)}
.xr-txt h3{font-size:clamp(26px,2.8vw,40px)}
.c-main h3{font-size:clamp(19px,1.7vw,24px)}
.cdate b{font-size:32px}
.v-title{font-size:clamp(17px,1.4vw,21px)}
.q blockquote{font-size:clamp(21px,2.6vw,38px)}
.q blockquote[lang]{font-size:clamp(18px,2vw,30px)}
.mq-track span{font-size:clamp(24px,3.2vw,44px)}
.pc-txt h3{font-size:clamp(18px,1.5vw,22px)}
.phead h1{font-size:clamp(38px,6.4vw,100px)}
.bio-lead{font-size:clamp(22px,2.4vw,34px)}
.pull{font-size:clamp(20px,1.9vw,27px)}
.tcard blockquote{font-size:clamp(18px,1.6vw,22px)}
.album h2{font-size:clamp(34px,3.8vw,58px)}
.covers span{font-size:18px}
.p-title{font-size:clamp(17px,1.5vw,21px)}
.pr-info h1{font-size:clamp(36px,4.2vw,60px)}
.pr-price{font-size:28px}
.ct-card h2{font-size:clamp(28px,3vw,42px)}
.ct-line{font-size:clamp(18px,1.6vw,22px)}
.foot-big{font-size:clamp(28px,4vw,62px)}
.brand-name{font-size:clamp(15px,1.3vw,18px)}
.thanks h1{font-size:clamp(52px,8vw,120px)}
.cart-head h2{font-size:30px}
.ci-t{font-size:18px}
@media (max-width:760px){
  body{font-size:15.5px}
  .hero-name{font-size:clamp(44px,13vw,64px)}
  .intro-lead{font-size:19px}
  .sec-head h2,.duo h2{font-size:28px}
  .phead h1{font-size:36px}
  .bio-lead{font-size:21px}
  .foot-big{font-size:30px}
  .q blockquote{font-size:21px}
  .q blockquote[lang]{font-size:18px}
  .mq-track span{font-size:24px}
  .alt{font-size:46px}
}

/* ---------- croix et flèches sans cadre */
.lb-nav,.lb-x,.cart-x{border:0!important;background:none!important}
.lb-nav .ic{width:26px;height:26px}
.lb-x .ic,.cart-x .ic{width:24px;height:24px}
/* visionneuse ouverte : la page derrière ne bouge plus */
html:has(body.lb-open){overflow:hidden}
.lb,.vbox{touch-action:none}
.vbox-frame{touch-action:auto}

/* dates sur plusieurs jours : de l'air autour */
.cdate{min-width:84px;width:auto;padding:12px 12px}
.cdate.range b{font-size:24px;white-space:nowrap}
.cdate.range span{font-size:10.5px;white-space:nowrap}
@media (max-width:700px){.cdate{min-width:68px;padding:10px 8px}.cdate.range b{font-size:20px}}
.psec{padding-block:clamp(40px,6vw,80px) 0}
@media (max-width:1060px){.mobile-nav .mnav-socials{justify-content:center}}

/* ======================================================================
   Refonte 3 : contenu resserré au centre, menu flouté, album sur la grande photo, lecteur en barre
   ====================================================================== */
:root{--max:1120px;--gut:clamp(20px,6vw,104px);--gut-r:var(--gut);--taupe:#cdaa92;--menu-bg:rgba(10,10,10,.62);--hdr-bg:rgba(10,10,10,.58)}
@media (orientation:landscape) and (pointer:coarse) and (max-height:500px){:root{--gut:max(64px, calc(env(safe-area-inset-left,0px) + 20px));--gut-r:max(64px, calc(env(safe-area-inset-right,0px) + 20px))}}
/* menu : transparence et flou */
.site-header{border-bottom-color:rgba(255,255,255,.08)}
.site-header::before{background:var(--hdr-bg);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6)}
@media (max-width:1060px){body.menu-open .mnav-tail{background:var(--menu-bg);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5)}}
.brand-sub{display:none}
.mobile-nav .mnav-links{margin-top:auto;padding-top:20px;display:grid;gap:6px;justify-items:center}
.mobile-nav .mnav-links .links a{width:40px;height:40px;font-size:0;padding:0}

/* listes de liens (plateformes, réseaux, liens d'un album) : une icône, parfois son nom */
.links{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.links a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:14px;transition:color .2s}
.links a:hover{color:var(--taupe)}
.links .ic{width:19px;height:19px}
.links.big{gap:12px 24px}
.links.big a{font-size:16px}
.links.big .ic{width:22px;height:22px}

/* grande photo (ou vidéo) : carrée, recadrée à chaque écran, avec effet de profondeur au défilement */
.hero-media{position:absolute;inset:-8% 0 0;will-change:transform}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:none;animation:heroIn 2s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@media (max-width:760px){.hero-bg{object-position:35% 40%}}
.hero-in{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;width:100%}
.hero-txt{min-width:0}
.hero-album{display:grid;gap:14px;width:min(280px,26vw);flex:none;color:#fff}
.ha-cover{display:block}
.ha-cover .cover{box-shadow:0 30px 60px -20px rgba(0,0,0,.8);transition:transform .5s var(--ease)}
.ha-cover:hover .cover{transform:translateY(-4px)}
.ha-k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
.ha-t{font-size:20px;font-weight:400;margin-top:2px}
.ha-t a{text-decoration:none}
.ha-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.ha-play{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;color:#fff;font:500 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.ha-play .ic{width:20px;height:20px}
.ha-play:hover{color:var(--taupe)}
.ha-play.on .ic{color:var(--taupe)}
.ha-buy{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--accent);color:#fff;padding:10px 14px;font:500 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.ha-buy:hover{background:#fff;color:#000}
.ha-buy .ic{width:16px;height:16px}
@media (max-width:900px){
  .hero-in{flex-direction:column;align-items:flex-start;gap:22px}
  .hero-album{width:auto;grid-template-columns:64px auto;align-items:center;gap:14px;justify-items:start}
  .hero-album .ha-act{margin-top:6px}
  .ha-t{font-size:17px}
}
.hero-cta,.hero-socials,.hero-credit{display:none!important}

/* boutons lecture : une flèche blanche, sans fond */
.trk .pp{background:none!important;color:var(--fg);width:26px;height:26px}
.trk .pp .ic{width:16px;height:16px}
.trk.playing .pp{color:var(--taupe)}
.v-play{background:none!important;color:#fff;width:72px;height:72px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.v-play .ic{width:46px;height:46px;margin:0}
.vcard:hover .v-play{color:var(--taupe)}

/* agenda de l'accueil : les prochains en couleur, puis quelques concerts passés */
.agenda{padding-block:clamp(60px,8vw,110px)}
.concert.up .cdate{background:none;border:1px solid var(--taupe)}
.concert.up .cdate b,.concert.up .cdate span,.concert.up h3,.concert.up .c-when{color:var(--taupe)}
.concert.past{opacity:.75}

/* presse : les logos des médias, en petit */
.marquee{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{align-items:center;gap:clamp(40px,5vw,72px);padding-right:clamp(40px,5vw,72px);animation-duration:45s}
.mq-track img{height:clamp(18px,1.8vw,26px);width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.75;flex:none}
.mq-track span{display:none}

/* citations : côte à côte sur ordinateur, l'une après l'autre sur téléphone */
@media (min-width:761px){
  .quotes{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;text-align:left}
  .q{grid-area:auto;opacity:1;visibility:visible;justify-items:start;gap:22px;align-content:space-between}
  .q blockquote,.q blockquote[lang]{font-size:clamp(17px,1.5vw,21px);max-width:none;line-height:1.45;font-style:normal}
  .q-dots{display:none}
}

/* biographie : le texte, « Lire plus », puis le portrait */
.bio{grid-template-columns:1fr;max-width:calc(760px + var(--gut) * 2);gap:44px}
.bio-pic{position:static;max-width:560px}
.bio-pic img{aspect-ratio:auto}
.read-more{display:inline-flex;align-items:center;gap:8px;margin-top:6px;border:0;background:none;padding:6px 0;color:var(--taupe);font:500 13px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.read-more .ic{width:12px;height:12px;transition:transform .3s}
.read-more[aria-expanded="true"] .ic{transform:rotate(180deg)}
.bio-more{margin-top:1.1em}
.bio .prose>p:first-child::first-letter{color:var(--taupe)}

/* discographie : les pochettes ; un album ouvert en détail, avec « retour » */
.disco{padding-block:clamp(36px,5vw,60px) clamp(50px,7vw,90px)}
.covers{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px;padding:0}
@media (max-width:900px){.covers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}}
.covers small{color:var(--muted)}
.disco.open .covers{display:none}
.album{display:block;padding:0;border:0}
.back{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;color:inherit;text-decoration:none;font:500 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.back .ic{transform:rotate(180deg);width:16px;height:16px}
.back:hover{color:var(--taupe)}
.al-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,70px);align-items:start}
.al-cover{position:sticky;top:calc(var(--hdr) + 24px)}
.al-act{margin-top:22px}
.al-links{margin-top:20px}
.al-txt .tracks{margin-top:26px}
@media (max-width:820px){.al-in{grid-template-columns:1fr}.al-cover{position:static;max-width:360px}}
.ship-info{border-top:1px solid var(--line)}

/* infos pratiques : la carte */
.contact .ct-line{border-top:1px solid var(--line)}
.map{padding-bottom:clamp(50px,7vw,90px)}
.map-frame{aspect-ratio:16/7;background:var(--bg-2);border:1px solid var(--line)}
@media (max-width:760px){.map-frame{aspect-ratio:4/3.4}}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) invert(.92) contrast(.9)}
.map-act{margin-top:16px}

/* partenaires : chaque logo centré sur un carré blanc */
.partners{grid-template-columns:repeat(auto-fill,minmax(min(44%,170px),1fr));gap:14px}
.partners>*{aspect-ratio:1;padding:16%;filter:none}

/* pied de page : centré, plus fourni */
.site-footer{padding-top:clamp(56px,7vw,90px);text-align:center}
.foot-in{display:grid;justify-items:center;gap:28px;padding-bottom:clamp(40px,5vw,60px)}
.foot-brand{font:500 clamp(20px,2.4vw,30px)/1 var(--display);letter-spacing:.3em;text-transform:uppercase;text-decoration:none;margin-right:-.3em}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.foot-nav a{text-decoration:none;color:var(--ink-muted);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.foot-nav a:hover{color:var(--ink-fg)}
.foot-row{display:grid;justify-items:center;gap:12px}
.foot-row .kicker{margin:0;color:var(--taupe)}
.foot-links{justify-content:center}
.foot-links a{color:var(--ink-fg)}
.foot-contact{font-size:14px;color:var(--ink-muted);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px}
.foot-contact a{text-decoration:none}.foot-contact a:hover{color:var(--ink-fg)}
.foot-contact i{font-style:normal;opacity:.5}
.legal{justify-content:center;flex-wrap:nowrap;gap:18px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.legal .admin-link{margin-left:0!important}
@media (max-width:420px){.legal{gap:12px;font-size:12.5px}}

/* le lecteur : une barre en bas de l'écran, la musique continue d'une page à l'autre */
.player{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:48px minmax(0,1fr) auto auto auto;align-items:center;gap:14px;
  padding:10px max(var(--gut),16px) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(12,12,12,.92);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);border-top:1px solid rgba(255,255,255,.1);color:#fff}
.player[hidden]{display:none}
.pl-cover{width:48px;height:48px;object-fit:cover;background:#222}
.pl-txt{display:grid;min-width:0;line-height:1.3}
.pl-txt b{font-weight:500;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-txt small{font-size:12.5px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-ctrl{display:flex;align-items:center;gap:4px}
.pl-ctrl button,.pl-x{display:grid;place-items:center;width:40px;height:40px;border:0;background:none;color:#fff}
.pl-ctrl button:hover,.pl-x:hover{color:var(--taupe)}
.pl-ctrl .ic{width:18px;height:18px}
.pl-pp .ic{width:26px;height:26px}
.pl-pp .i-pa,.player.on .pl-pp .i-pl{display:none}
.player.on .pl-pp .i-pa{display:block}
.pl-x .ic{width:18px;height:18px}
.pl-time{font-size:12px;color:var(--ink-muted);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.pl-bar{position:absolute;left:0;right:0;top:-1px;height:3px;cursor:pointer;background:rgba(255,255,255,.08)}
.pl-bar::before{content:"";position:absolute;inset:-8px 0}
.pl-bar i{display:block;height:100%;width:0;background:var(--taupe)}
body.has-player .site-footer{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
@media (max-width:560px){.player{grid-template-columns:44px minmax(0,1fr) auto auto;gap:10px}.pl-cover{width:44px;height:44px}.pl-time,#plPrev{display:none}}
.np{display:none!important}
.mq-track img{filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;opacity:.85}
.map-ad{display:flex;align-items:center;gap:8px;margin:-8px 0 18px;color:var(--fg-2)}.map-ad .ic{color:var(--taupe)}
.partners>*{position:relative;aspect-ratio:1;overflow:hidden;padding:0}
.partners img{position:absolute;inset:16%;width:68%;height:68%;max-width:none;max-height:none;object-fit:contain}
.partners span{padding:16%}
/* citations : un carrousel dans la largeur du contenu, 3 / 2 / 1 citations visibles selon l'écran */
.qsec{text-align:left}
.q-track{--n:3;--gap:28px;gap:var(--gap);padding-inline:0;scroll-padding-inline:0}
.q-track .q{grid-area:auto;opacity:1;visibility:visible;flex:0 0 calc((100% - var(--gap) * (var(--n) - 1)) / var(--n));display:grid;align-content:space-between;justify-items:start;gap:24px;
  padding:clamp(22px,2.4vw,32px);border:1px solid var(--ink-line)}
.q-track .q blockquote,.q-track .q blockquote[lang]{font-size:clamp(16px,1.35vw,19px);line-height:1.5;max-width:none;font-style:normal;font-weight:300}
.q-track .q figcaption{text-align:left}
@media (max-width:1000px){.q-track{--n:2}}
@media (max-width:640px){.q-track{--n:1;--gap:14px}.q-track .q{flex-basis:86%}}
.qsec .sl-nav{margin-top:20px}
@media (pointer:coarse){.qsec .sl-nav{display:none}}

/* ---------- fonds : plus de blanc, une alternance gris / noir */
:root{--gray:#1a1a1a}
.light{--bg:#1a1a1a;--bg-2:#232323;--card:#202020;--fg:#f4f3f1;--fg-2:#cfcdca;--muted:#8e8b87;--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.26);--accent:#e1251b;color-scheme:dark;background:var(--gray);color:var(--fg)}
.xsec,.dark{background:#0b0b0b}
.vsec{background:#0b0b0b}
.qsec{background:#0b0b0b}
.press-band{border-bottom:0}
/* l'agenda de l'accueil : un fond gris sur toute la largeur */
.agenda{background:var(--gray);box-shadow:0 0 0 100vmax var(--gray);clip-path:inset(0 -100vmax)}
.agenda .cdate{background:none}
/* les logos de presse, en clair sur le gris */
.mq-track img{filter:grayscale(1) invert(1) contrast(1.1);mix-blend-mode:screen;opacity:.8}

/* ---------- discographie : pas d'animation au survol ; un bouton panier sur chaque disque en vente */
.covers a:hover .cover{transform:none}
.cv{position:relative}
.cv>a{display:grid;gap:12px;text-decoration:none}
.cv-add{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:40px;height:40px;border:0;background:rgba(0,0,0,.62);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s}
.cv-add:hover,.cv-add.ok{background:var(--accent)}
.cv-add .ic{width:19px;height:19px}

/* ======================================================================
   Mode clair automatique (réglage clair de l'appareil) : le même site, en blanc cassé et gris clair
   ====================================================================== */
:root{--s-main:#0b0b0b;--s-alt:#1a1a1a;--foot-bg:var(--s-main);--pl-bg:rgba(12,12,12,.92);--pl-fg:#fff}
.xsec,.dark,.vsec,.qsec{background:var(--s-main)}
.agenda{background:var(--s-alt);box-shadow:0 0 0 100vmax var(--s-alt)}
.site-footer{background:var(--foot-bg)}
.xr-txt>p:last-child{color:var(--fg-2)}
.player{background:var(--pl-bg);color:var(--pl-fg)}
.pl-ctrl button,.pl-x{color:var(--pl-fg)}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f5f2; --bg-2:#ebe9e5; --card:#fff; --fg:#121110; --fg-2:#3a3835; --muted:#6c6863; --line:rgba(0,0,0,.11); --line-2:rgba(0,0,0,.24);
    --accent:#c81d14; --taupe:#9a7356; --ink-fg:#121110; --ink-muted:#6c6863; --ink-line:rgba(0,0,0,.12);
    --menu-bg:rgba(246,245,242,.72); --menu-solid:#f6f5f2; --hdr-bg:rgba(246,245,242,.74);
    --s-main:#e9e7e3; --s-alt:#f6f5f2; --gray:#e9e7e3; --foot-bg:var(--s-main);   /* comme en sombre : s-main est la teinte la plus foncée (crème), celle du bas de page */ --pl-bg:rgba(246,245,242,.92); --pl-fg:#121110;
    color-scheme:light;
  }
  .light{--bg:#e9e7e3;--bg-2:#dedbd6;--card:#f6f5f2;--fg:#121110;--fg-2:#3a3835;--muted:#6c6863;--line:rgba(0,0,0,.12);--line-2:rgba(0,0,0,.24);--accent:#c81d14;color-scheme:light;background:#e9e7e3}
  .site-header{border-bottom-color:rgba(0,0,0,.08)}
  .mq-track img{filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;opacity:.8}
  .map-frame iframe{filter:grayscale(1)}
  .q-track .q{border-color:var(--line)}
  .pl-txt small{color:var(--muted)}
  .pl-bar{background:rgba(0,0,0,.08)}
  ::selection{background:var(--taupe);color:#fff}
}
/* accueil : « Acheter le CD » comme « Écouter » (texte blanc, sans fond), sur la même ligne */
.ha-act{flex-wrap:nowrap;gap:22px}
.ha-buy{background:none;padding:6px 0;color:#fff;font-size:12.5px;letter-spacing:.16em;white-space:nowrap}
.ha-buy:hover,.ha-buy.ok{background:none;color:var(--taupe)}
.ha-buy .ic{width:18px;height:18px}
@media (max-width:380px){.ha-act{gap:14px}.ha-play,.ha-buy{letter-spacing:.1em}}
@media (max-width:600px){.ha-act{gap:16px}.ha-play,.ha-buy{font-size:12px;letter-spacing:.06em}.ha-play .ic,.ha-buy .ic{width:16px;height:16px}}
@media (max-width:360px){.ha-act{flex-wrap:wrap;row-gap:2px}}
/* vidéos : 3 côte à côte sur ordinateur, 2 sur tablette et téléphone, 1 seulement sur les écrans très étroits */
.v-track{--n:3;--gap:22px;gap:var(--gap);padding-inline:0;scroll-padding-inline:0}
.v-track .vcard{width:auto;flex:0 0 calc((100% - var(--gap) * (var(--n) - 1)) / var(--n))}
.vgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
.v-title{font-size:clamp(14px,1.2vw,17px);line-height:1.35}
.v-play{width:56px;height:56px}.v-play .ic{width:36px;height:36px}
@media (max-width:900px){.v-track{--n:2;--gap:16px}.vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}}
@media (max-width:600px){.v-track{--gap:12px}.vgrid{gap:20px 12px}.v-title{font-size:13.5px}.v-play{width:44px;height:44px}.v-play .ic{width:28px;height:28px}}
@media (max-width:359px){.v-track{--n:1}.v-track .vcard{flex-basis:84%}.vgrid{grid-template-columns:1fr}}

/* ---------- titres : ils grandissent jusqu'à une largeur d'ordinateur courante, puis ne bougent plus */
.phead h1{font-size:clamp(32px,4.2vw,52px)}
.phead{padding-block:clamp(40px,5vw,64px) clamp(26px,3vw,40px)}
.sec-head h2,.duo h2{font-size:clamp(24px,2.8vw,36px)}
h2{font-size:clamp(26px,3vw,38px)}
.h-sm{font-size:clamp(20px,2vw,26px)}
.p-title{font-size:clamp(16px,1.3vw,18px)}
.alt{font-size:clamp(40px,4vw,58px)}
.xr-txt .alt{font-size:clamp(46px,5vw,76px)}
.xr-txt h3{font-size:clamp(22px,2vw,30px)}
.album h2{font-size:clamp(28px,3vw,42px)}
.pr-info h1{font-size:clamp(30px,3.2vw,44px)}
.bio-lead{font-size:clamp(20px,2vw,28px)}
.intro-lead{font-size:clamp(19px,1.8vw,24px)}
.ct-card h2{font-size:clamp(24px,2.4vw,32px)}
.foot-big{font-size:clamp(26px,3vw,44px)}
.intro-facts b,.facts b{font-size:clamp(26px,2.2vw,32px)}
.thanks h1{font-size:clamp(44px,5vw,72px)}
.hero-name{font-size:clamp(48px,8vw,128px)}
/* sous-menus de l ordinateur : une taille de texte normale */
.mega-col{gap:2px}
.mega-col a{font-size:clamp(16px,1.2vw,19px);line-height:1.35;padding-block:4px}
.mega-in{padding-block:14px 26px}
/* une seule couleur d accent sur tout le site : le rouge (survols, concerts à venir, lecture en cours…) */
:root{--taupe:var(--accent)}
/* citations : sans cadre */
.q-track .q,.q-track .q:hover{border:0;padding:0}
/* concerts : « En savoir plus » à la hauteur du titre du concert */
.concert{align-items:start}
.cdate{align-self:start}
@media (min-width:701px){.c-act{align-self:start;margin-top:calc(13px * 1.6 + 4px);min-height:calc(1.1em + 6px);display:flex;align-items:center}.c-act .btn-ghost{padding-block:0;min-height:28px}}
/* toutes les dates de la même largeur : les titres des concerts sont alignés */
.cdate{width:96px;min-width:0;padding-inline:6px}
.cdate.range b{font-size:22px}
@media (max-width:700px){.cdate{width:74px}.cdate.range b{font-size:18px}.cdate.range span{font-size:9.5px;letter-spacing:.08em}}
/* accueil : la discographie en carrousel ; les fonds alternent gris / noir d'une section à l'autre */
.dsec{padding-block:clamp(60px,8vw,110px)}
.d-track .cv{width:clamp(180px,20vw,260px)}
.d-track .cv>a span{display:grid;font:400 17px/1.2 var(--display)}
.d-track .cv small{font:400 12px/1.4 var(--body);letter-spacing:.14em;color:var(--muted)}
.agenda,.agenda{box-shadow:none;clip-path:none;background:none}
.agenda-sec{padding-block:clamp(60px,8vw,110px)}
.agenda-sec .agenda{padding-block:0}
/* accueil : deux fonds seulement, en alternance, en commençant par le plus foncé ; le bas de page reprend le plus foncé */
body.page-index main>section:nth-child(even){background:var(--s-main)}
body.page-index main>section:nth-child(odd):not(.hero){background:var(--s-alt)}
/* accueil : la biographie en quelques lignes et le portrait de Marco */
.intro-sec{padding-block:clamp(60px,8vw,110px)}
.intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"txt pic" "btn pic";column-gap:clamp(36px,6vw,90px);align-items:end;padding-block:0}
.intro-card{display:contents}
.intro-pic{grid-area:pic;width:100%;max-width:440px;justify-self:end;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.intro-txt{grid-area:txt;align-self:end}
.intro-lead{margin-bottom:0}
.intro>.btn{grid-area:btn;justify-self:start;align-self:start;margin-top:30px}
@media (max-width:760px){
  .intro{display:block}
  .intro-card{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:#000}
  .intro-pic{position:absolute;inset:0;width:100%;height:100%;max-width:none}
  .intro-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.88))}
  .intro-txt{position:absolute;inset:auto 0 0;z-index:1;padding:22px 20px;color:#fff}
  .intro-txt .kicker{color:#fff}
  .intro-lead{font-size:16.5px;line-height:1.45;color:#fff}
  .intro>.btn{margin-top:20px}
}
@media (max-width:760px){.intro-card{aspect-ratio:3/4.3}.intro-pic{object-position:50% 6%}}
/* biographie de l accueil : le bouton sous le texte (sur la photo, sur téléphone) */
.intro{grid-template-areas:"txt pic"}
.intro-txt .btn{margin-top:30px}
@media (max-width:760px){.intro-txt .btn{margin-top:16px;min-height:44px;padding:0 18px;background:#fff;color:#000;border-color:#fff}.intro-card{aspect-ratio:3/4.6}}
/* bandeau presse : il continue de défiler au survol (la pause faisait sauter le bandeau sur Safari) */
.marquee:hover .mq-track{animation-play-state:running}
.mq-track{will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.mq-track img{transition:none}
/* l'album de la grande photo reste à droite jusqu'à 560 px de large, sa pochette rétrécit avec l'écran */
@media (min-width:561px) and (max-width:900px){
  .hero-in{flex-direction:row;align-items:flex-end;gap:24px}
  .hero-album{display:grid;grid-template-columns:none;width:clamp(150px,27vw,240px);gap:10px;justify-items:stretch}
  .ha-t{font-size:16px}
  .ha-act{flex-wrap:wrap;gap:6px 16px;margin-top:4px}
  .ha-play,.ha-buy{font-size:11.5px;letter-spacing:.1em}
}
/* biographie de l'accueil, téléphone : la photo est rognée par le bas, le texte remonte (le bloc suit la hauteur du texte) */
@media (max-width:760px){
  .intro-card{aspect-ratio:auto}
  .intro-pic{object-position:50% 4%}
  .intro-txt{position:relative;inset:auto;padding:min(46vw,260px) 20px 22px}
  .intro-card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) min(28vw,150px),rgba(0,0,0,.85) min(62vw,340px),rgba(0,0,0,.92))}
}
@media (max-width:760px){
  .intro-pic{inset:0 0 auto 0;height:min(72vw,320px);object-position:50% 18%}
  .intro-card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) min(34vw,150px),#000 min(72vw,320px))}
  .intro-txt{padding-top:min(54vw,240px)}
  .intro-lead{font-size:15.5px}
}
/* biographie de l'accueil, téléphone : une photo carrée, le texte sur le bas du carré */
@media (max-width:760px){
  .intro-card{container-type:inline-size}
  .intro-pic{inset:0 0 auto 0;height:auto;aspect-ratio:1;object-position:50% 15%}
  .intro-card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 40cqw,#000 100cqw)}
  .intro-txt{padding-top:66cqw}
}
/* album de la grande photo : « Écouter » et « Acheter » toujours côte à côte */
.hero-album .ha-act{flex-wrap:nowrap!important;gap:18px}
.ha-play,.ha-buy{white-space:nowrap}
@media (max-width:900px){.ha-act{gap:14px!important}}
@media (min-width:561px) and (max-width:900px){.hero-album{min-width:0;width:clamp(200px,27vw,240px)}.ha-cover .cover{width:100%;height:auto}}
/* l'album de la grande photo apparaît comme le nom : il monte en fondu, élément après élément */
.ha-cover,.ha-k,.ha-t,.ha-act{animation:rise 1.2s var(--ease) both}
.ha-cover{animation-delay:.2s}
.ha-k{animation-delay:.32s}
.ha-t{animation-delay:.4s}
.ha-act{animation-delay:.5s}
.hero-tag{animation:rise 1.2s var(--ease) .24s both}
@media (prefers-reduced-motion:reduce){.ha-cover,.ha-k,.ha-t,.ha-act,.hero-tag{animation:none}}
/* biographie de l accueil, ordinateur : le texte en haut, à la hauteur du haut de la photo */
@media (min-width:761px){.intro{align-items:start}.intro-txt{align-self:start}}
/* pied de page : une fine ligne au-dessus, sur la largeur du contenu */
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(var(--max),calc(100% - var(--gut) * 2));height:1px;background:var(--line-2)}
.site-footer::before{top:clamp(26px,3.4vw,44px)}
/* biographie de l accueil, ordinateur : photo carrée (moins haute) */
@media (min-width:761px){.intro-pic{aspect-ratio:1;max-width:400px;object-position:50% 22%}}
/* page Biographie, ordinateur : le texte à gauche, le portrait à droite (il reste en vue pendant la lecture) */
@media (min-width:901px){
  .bio{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);max-width:calc(var(--max) + var(--gut) * 2);align-items:start;gap:clamp(40px,5vw,80px)}
  .bio-pic{position:sticky;top:calc(var(--hdr) + 28px);max-width:none}
  .bio-pic img{aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
}
/* pochettes : au survol, la pochette grossit doucement dans son cadre (comme les expéditions et les vidéos) */
.cv-img{display:block;overflow:hidden;line-height:0}
.cv-img .cover{transition:transform .8s var(--ease)}
.cv>a:hover .cv-img .cover,.cv>a:focus-visible .cv-img .cover{transform:scale(1.06)}
@media (hover:none){.cv>a:hover .cv-img .cover{transform:none}}
/* menu de l ordinateur : un peu plus grand, en gras */
.menu>li>a,.menu>li>button{font-size:14px;font-weight:600;letter-spacing:.14em}
.menu>li>a,.menu>li>button{font-weight:500}
/* photo carrée de la biographie (accueil) : la tête un peu plus haut dans le cadre */
@media (min-width:761px){.intro-pic{object-position:50% 34%}}
@media (max-width:760px){.intro-pic{object-position:50% 28%}}
/* sous-menus de l ordinateur : la taille de Symphonie d ete (adaptée à Jost) */
.mega-col a{font-size:clamp(20px,1.7vw,24px);line-height:1.3;padding-block:5px}
/* page Médias : les expéditions dans la même grille que les vidéos */
.xvcard .v-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.7))}
.x-alt{position:absolute;left:14px;bottom:10px;z-index:1;font:300 clamp(24px,2.4vw,34px)/1 var(--display);letter-spacing:-.02em;color:#fff}
.xvcard .v-play{z-index:1}
.xvcard .v-title small{display:block;margin-top:4px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.x-txt{display:block;font-size:14px;line-height:1.5;color:var(--fg-2);margin-top:-4px}
#expeditions{padding-bottom:clamp(50px,7vw,90px)}
@media (max-width:600px){.x-alt{font-size:20px;left:10px;bottom:8px}.x-txt{font-size:13px}}

/* album de la grande photo : « Écouter » et « Acheter » soulignés, la flèche alignée sur le titre ;
   sur téléphone, le texte ne dépasse pas la pochette */
.ha-play span,.ha-buy span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.ha-play .ic{margin-left:calc(var(--pi,20px) * -8 / 24);width:var(--pi,20px)!important;height:var(--pi,20px)!important}
@media (max-width:600px){.ha-play{--pi:16px}}
@media (max-width:560px){
  .hero-album{grid-template-columns:auto auto;align-items:stretch}
  .ha-cover{width:84px;align-self:start}
  .ha-cover .cover{width:84px;height:84px}
  .ha-txt{display:flex;flex-direction:column;justify-content:space-between;height:84px}
  .ha-k{line-height:1;margin:0}
  .ha-t{line-height:1.15;margin:0}
  .hero-album .ha-act{margin:0;line-height:1}
  .ha-play,.ha-buy{padding:0}
}

/* menu du téléphone : les icônes au centre de leur case ; pendant l'écoute, le menu s'arrête au-dessus du lecteur */
.mobile-nav .links a{justify-content:center}
.mobile-nav .mnav-socials,.mobile-nav .mnav-streams{gap:4px 14px}
@media (max-width:1060px){body.has-player .mobile-nav{height:calc(100svh - var(--hdr) - var(--plh,66px));height:calc(100dvh - var(--hdr) - var(--plh,66px))}}

/* le studio : la photo à droite de la carte sur ordinateur, au-dessus sur téléphone */
.map-grid.has-pic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,2vw,20px)}
.map-grid.has-pic .studio-pic{order:2;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.map-grid.has-pic .map-frame{aspect-ratio:3/2}
@media (max-width:760px){.map-grid.has-pic{grid-template-columns:1fr}.map-grid.has-pic .studio-pic{order:0}.map-grid.has-pic .map-frame{aspect-ratio:4/3.4}}
.map-act{display:flex;flex-wrap:wrap;gap:10px 28px}
/* bas de page : moins de vide sous le téléphone et l'e-mail */
.foot-in{padding-bottom:clamp(20px,2.4vw,28px)}
/* pas de concert à venir : seul l'encadré en pointillé, sans la ligne de la liste vide au-dessus */
.clist:empty,.clist:not(:has(> :not([hidden]))){border-top:0}
/* écran tactile : pas de cadre rouge autour du bouton ou du menu touché (il ne sert qu'au clavier) */
@media (hover:none){:focus-visible{outline:none}}
/* menu déroulant de la livraison : sa propre flèche, à distance du bord */
.cart-zone select{-webkit-appearance:none;appearance:none;padding:0 44px 0 14px;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/16px 16px}
/* téléphone : le panier couvre tout l'écran ; sans voile derrière, la bande sous la barre de Safari prend la couleur du panier */
@media (max-width:560px){.cart::backdrop{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}.cart{height:auto;bottom:0;min-height:100%}}

/* à l'arrivée sur l'accueil, les éléments de la barre apparaissent en fondu */
.hdr-in .nav>*{animation:hdrFade 1.2s ease both}
@keyframes hdrFade{from{opacity:0}to{opacity:1}}
.hdr-in .nav>:nth-child(2){animation-delay:.08s}.hdr-in .nav>:nth-child(3){animation-delay:.16s}.hdr-in .nav>:nth-child(4){animation-delay:.24s}.hdr-in .nav>:nth-child(5){animation-delay:.32s}
@media (prefers-reduced-motion:reduce){.hdr-in .nav>*{animation:none}}
/* logos de presse : chacun mène à son article, mis en valeur un instant sur la page Presse */
.mq-track>a{display:flex;align-items:center;flex:none;text-decoration:none}
.pitem{position:relative}
.pitem.flash::after{content:"";position:absolute;inset:-1px -12px;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);pointer-events:none;animation:pflash 2.8s .4s var(--ease) both}
@keyframes pflash{0%{opacity:0}10%,72%{opacity:1}100%{opacity:0}}
/* téléphone : le titre de l'album se rapproche de « Album », les boutons restent alignés sur le bas de la pochette */
@media (max-width:560px){.ha-txt{justify-content:flex-start}.ha-t{margin-top:7px}.hero-album .ha-act{margin-top:auto}}
/* logo envoyé depuis l'admin (plateforme ou réseau « Autre ») */
.ic-img{object-fit:contain;display:inline-block}
/* menu du téléphone : les lignes respirent (sur un petit écran, le menu défile plutôt que de se tasser) */
@media (max-width:1060px){
  .mobile-nav .grp{padding-block:13px}
  .mobile-nav .grp p{margin-bottom:5px}
  .mobile-nav a{line-height:1.28;padding-block:5px}
  .mobile-nav .mnav-links{margin-top:0;padding-top:8px;gap:2px}   /* juste sous les rubriques, pas collés en bas */
  .mobile-nav .mnav-links .links a{height:36px}
}
/* téléphone : le texte de l'album forme un bloc compact (année, titre, boutons), centré à côté de la pochette */
@media (max-width:560px){
  .hero-album{align-items:center}
  .ha-txt{height:auto;align-self:center;justify-content:center;gap:0}
  .ha-k{line-height:1.2}
  .ha-t{margin-top:4px;line-height:1.2}
  .hero-album .ha-act{margin-top:12px}
}
/* grande photo : l'effet de profondeur suit directement le défilement (aussi sur iPhone, sans à-coups) */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    [data-parallax] .hero-media{animation:heroPar linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    @keyframes heroPar{from{transform:none}to{transform:translate3d(0,32vh,0)}}
  }
}
/* logos de presse : deux lignes, la seconde défile vers la droite */
.mq-track.rev{animation-direction:reverse}
.marquee+.marquee{margin-top:clamp(18px,2.4vw,30px)}
/* écran tactile : derrière la photo ou la vidéo ouverte, un fond noir plein (la bande sous la barre de Safari est noire, pas grise) */
@media (pointer:coarse){.lb::backdrop,.vbox::backdrop,.lb,.vbox{background:#000}}
/* téléphone : pas de zoom au double-tap (menu, boutons, pages) ; le zoom à deux doigts reste possible */
html,.mobile-nav,.cart{touch-action:manipulation}
/* page Médias : une mosaïque plus serrée (plus de colonnes, des cases plus basses), toujours sans trou */
.grid-photos{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(90px,10.5vw,160px);gap:8px}
@media (max-width:1000px){.grid-photos{grid-template-columns:repeat(4,1fr);grid-auto-rows:17vw;gap:6px}}
@media (max-width:600px){.grid-photos{grid-template-columns:repeat(3,1fr);grid-auto-rows:27vw;gap:4px}}

/* menu du téléphone : il s'ouvre et se ferme en fondu, ses rubriques descendent l'une après l'autre */
@media (max-width:1060px){
  .mobile-nav{display:flex;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .4s}
  .mobile-nav.open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .35s ease}
  .mobile-nav>*{opacity:0;transform:translateY(-12px);transition:opacity .25s ease,transform .3s ease}
  .mobile-nav.open>*{opacity:1;transform:none;transition:opacity .45s ease,transform .6s var(--ease)}
  .mobile-nav.open>:nth-child(2){transition-delay:.04s}.mobile-nav.open>:nth-child(3){transition-delay:.08s}
  .mobile-nav.open>:nth-child(4){transition-delay:.12s}.mobile-nav.open>:nth-child(5){transition-delay:.16s}
  .mobile-nav.open>:nth-child(6){transition-delay:.2s}
  .mnav-tail{display:block;position:absolute;left:0;right:0;height:calc(100lvh + 220px);z-index:49;pointer-events:none;background:var(--menu-bg);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .4s}
  body.menu-open .mnav-tail{opacity:1;visibility:visible;transition:opacity .35s ease}
  .site-header::before{transition:height .42s var(--ease),background-color .35s ease}
}
@media (max-width:1060px) and (prefers-reduced-motion:reduce){.mobile-nav>*{transform:none}}
/* menu du téléphone ouvert : un seul calque flouté (ordinaire, pas fixe : un élément fixe jusqu'en bas fait apparaître la bande opaque
   de Safari) couvre la barre et tout l'écran. Sa partie sous la barre est visible tout de suite (identique au fond de la barre, qui
   s'efface au même instant : rien ne change à l'œil) ; le reste apparaît en fondu. À la fermeture, l'inverse. */
@property --mfade{syntax:'<number>';inherits:false;initial-value:0}
@media (max-width:1060px){
  .mnav-tail,body.menu-open .mnav-tail{display:block;position:absolute;left:0;right:0;z-index:49;pointer-events:none;opacity:1;
    background:var(--hdr-bg);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
    -webkit-mask:linear-gradient(#000,#000) 0 0/100% calc(60px + var(--hdr) + 1px) no-repeat,linear-gradient(rgba(0,0,0,var(--mfade)),rgba(0,0,0,var(--mfade)));
    mask:linear-gradient(#000,#000) 0 0/100% calc(60px + var(--hdr) + 1px) no-repeat,linear-gradient(rgba(0,0,0,var(--mfade)),rgba(0,0,0,var(--mfade)))}
  .mnav-tail{height:0;visibility:hidden;--mfade:0;transition:--mfade .35s ease,visibility 0s linear .35s,height 0s linear .35s}
  body.menu-open .mnav-tail{height:calc(100lvh + 220px);visibility:visible;--mfade:1;transition:--mfade .35s ease,visibility 0s,height 0s}
  .site-header::before{transition:height .42s var(--ease),background-color 0s linear .35s,-webkit-backdrop-filter 0s linear .35s,backdrop-filter 0s linear .35s}
  body.menu-open .site-header::before{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:height .42s var(--ease)}
  .site-header{transition:border-color 0s linear .35s}
  body.menu-open .site-header{border-bottom-color:transparent;transition:none}
}
/* pages intérieures : toute la page (titre compris) sur un seul fond (gris en sombre, blanc en clair) ; le bas de page sur le plus foncé (gris foncé, crème) */
body:not(.page-index) main{--bg:#1a1a1a;--bg-2:#232323;--card:#202020;background:var(--s-alt)}
@media (prefers-color-scheme: light){body:not(.page-index) main{--bg:#f6f5f2;--bg-2:#ebe9e5;--card:#fff}}
/* barre du haut et menus : un fond plein, sans flou ni transparence */
:root{--hdr-bg:var(--menu-solid);--menu-bg:var(--menu-solid)}
@media (prefers-color-scheme: light){:root{--hdr-bg:var(--menu-solid);--menu-bg:var(--menu-solid)}}
.site-header::before,body.menu-open .site-header::before,.mnav-tail,body.menu-open .mnav-tail,.mega-veil{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* bas de page compact : le nom, les plateformes puis les réseaux ; sous la ligne, le téléphone et l'e-mail avec les mentions */
.site-footer{padding-top:clamp(34px,4vw,52px)}
.site-footer::before{display:none}
.foot-in{gap:16px;padding-bottom:clamp(26px,3vw,36px)}
.foot-in .foot-brand{margin-bottom:6px}
.foot-bottom{border-top:1px solid var(--ink-line);padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;gap:8px}
.foot-bottom .legal{border:0;padding:0}
/* logos de presse : dans leurs couleurs d'origine (ni gris, ni inversés), dans les deux modes */
.mq-track img,.press-band .mq-track img{filter:none!important;mix-blend-mode:normal!important;opacity:1!important}
/* mode sombre : les deux logos au texte noir sur fond transparent (France 3, Radio France) passent en blanc, comme leurs versions officielles sur fond sombre */
@media (prefers-color-scheme: dark){.mq-track img:is([src$="france-3.png"],[src$="radio-france.png"]){filter:brightness(0) invert(1)!important}}
/* accueil, vidéos : comme la discographie et les expéditions, la rangée déborde à droite (on voit qu'elle continue) ;
   trois vidéos (deux sur tablette) tiennent dans la largeur du contenu */
.v-track{--cw:min(var(--max),calc(100vw - var(--gut) * 2));padding-inline:max(var(--gut),calc((100vw - var(--max)) / 2));scroll-padding-inline:max(var(--gut),calc((100vw - var(--max)) / 2))}
.v-track .vcard{flex:0 0 calc((var(--cw) - var(--gap) * (var(--n) - 1)) / var(--n))}

/* accueil : « POINGT » plein, en blanc comme « MARCO » */
.hero-name span+span{-webkit-text-stroke:0;color:#fff}
/* Discographie : la rangée « Boutique » (ce qui n'est pas un album), coins carrés comme le reste */
.shop-row{padding-block:clamp(48px,6vw,80px) 0}
.shop-row .pgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
@media (max-width:560px){.shop-row .pgrid{grid-template-columns:1fr 1fr}}
.shop-row .pc-img,.shop-row .pc-add,.shop-row .tag{border-radius:0}
.mq-track img.sq{height:clamp(30px,3vw,42px)}
/* accueil : la rangée « Boutique », des cartes de la taille des pochettes */
.shsec{padding-block:clamp(60px,8vw,110px)}
.sh-track .pcard{width:clamp(180px,20vw,260px);flex:none}
.sh-track .pc-img,.sh-track .pc-add,.sh-track .tag{border-radius:0}
.sh-track .pc-txt h3{font:400 17px/1.2 var(--display);margin-top:4px}


/* ======================================================================
   MeloProd : ce que le site ajoute à la feuille de Marco Poingt (mêmes variables, mêmes polices)
   ====================================================================== */
/* une section d'une page intérieure : son titre et son texte à gauche, sa liste à droite, ses photos dessous */
.sec{padding-bottom:clamp(8px,2vw,24px)}
.sec:last-of-type{padding-bottom:clamp(48px,7vw,90px)}
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.cols>div{display:grid;gap:18px;align-content:start}
.cols>div:last-child{padding-top:clamp(48px,7vw,90px)}
.cols .h-sm{margin-bottom:0}
main .h-sm{text-transform:uppercase;font-weight:500;letter-spacing:.01em;line-height:1.1}
.cols .kicker{margin-bottom:-6px}
@media (max-width:860px){.cols{grid-template-columns:minmax(0,1fr);gap:18px}.cols>div:last-child{padding-top:0}}
.sec-lead{margin-bottom:clamp(24px,3vw,40px)}
.sec .grid-photos,.sec .vgrid{margin-top:clamp(28px,4vw,52px)}
.sec>.h-sm+.vgrid{margin-top:0}
.sec .pull{max-width:30ch}
.after{margin-top:clamp(26px,3vw,40px)}
.btns{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.btn .ic{width:16px;height:16px}
/* les listes du studio : une ligne par élément, son intitulé en petit au-dessus */
.lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lines li{display:grid;gap:3px;padding:13px 0;border-bottom:1px solid var(--line);color:var(--fg-2)}
.lines .lk{font:500 11.5px/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lines.travel{max-width:420px;margin-bottom:clamp(24px,3vw,40px)}
.lines.travel li{grid-template-columns:1fr auto;align-items:baseline}
.lines.travel .lk{font:400 17px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--fg)}
/* peu de photos : une simple rangée (la mosaïque est faite pour une série) */
.grid-photos.few{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:10px}
.grid-photos.few .ph{aspect-ratio:3/2;grid-column:auto!important;grid-row:auto!important}
.grid-photos.few.n1{grid-template-columns:minmax(0,1fr)}.grid-photos.few.n1 .ph{aspect-ratio:21/9}
.grid-photos.few.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-photos.few.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.grid-photos.few:not(.n1){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* une personne sans photo : son initiale dans le carré */
.cover.ini{display:grid;place-items:center;width:100%;aspect-ratio:1;background:var(--ink-3);color:var(--muted);font:500 clamp(40px,5vw,72px)/1 var(--display)}
/* la fiche d'une personne : son rôle au-dessus du nom ; sans portrait, le texte prend la largeur */
.phead .kicker{margin-bottom:14px}
.bio.no-pic{display:block}
.bio .links.big{margin-top:30px}
/* accueil : les cartes du studio mènent à une page (un lien, pas une vidéo) */
a.xc-play{text-decoration:none}
/* accueil : les logos des partenaires défilent, en couleur, chacun sur une étiquette blanche (comme sur la page Nos partenaires) */
.press-band .mq-track img{height:58px;width:auto;max-width:190px;object-fit:contain;box-sizing:border-box;padding:9px 14px;background:#fff;filter:none!important;mix-blend-mode:normal!important;opacity:1!important}
/* accueil : rien à sélectionner ni à copier (pas de menu à l'appui long sur iPhone) */
.page-index,.page-index *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.page-index img{-webkit-user-drag:none}
/* mentions légales, confidentialité */
.legal-page{padding-top:clamp(36px,5vw,64px)}
/* l'annonce (bandeau en haut des pages) et la note d'arrivée */
.site-alert{background:var(--ink-3);border-bottom:1px solid var(--line);color:var(--fg)}
.site-alert.warn{background:#7d1f15;color:#fff}
.alert-in{display:flex;align-items:flex-start;gap:12px;padding-block:13px;font-size:15px;line-height:1.5}
.alert-in .ic{margin-top:3px}
.site-popup{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;width:min(380px,calc(100vw - 36px));display:grid;gap:10px;padding:24px 26px;background:var(--card);border:1px solid var(--line-2);color:var(--fg);box-shadow:0 18px 60px rgba(0,0,0,.55)}
.site-popup h2{font-size:22px}
.site-popup p{font-size:15.5px;color:var(--fg-2)}
.site-popup .x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:24px;line-height:1;color:var(--muted)}
.site-popup.warn{border-color:var(--accent)}
/* la barre : le logo dessiné devant le nom */
.brand{display:flex;align-items:center;gap:12px}
.brand-mk{flex:none;height:34px;width:auto}
@media (max-width:760px){.brand{gap:10px}.brand-mk{height:28px}}
/* accueil : le nom en un seul mot, sur une ligne */
.hero-name{font-size:clamp(34px,8.5vw,100px);white-space:nowrap}
/* la fiche d'un artiste ou d'un membre : son portrait carré, comme sur les listes */
.bio-pic img{aspect-ratio:1!important;object-fit:cover;object-position:50% 25%}
/* toutes les photos carrées, sur une grille régulière (une photo seule reste en bandeau) */
.grid-photos{grid-auto-rows:auto!important}
.grid-photos .ph{aspect-ratio:1;grid-column:auto!important;grid-row:auto!important}
.grid-photos.few .ph{aspect-ratio:1}
.grid-photos.few.n2,.grid-photos.few.n3{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-photos.few.n1 .ph{aspect-ratio:21/9}
@media (max-width:700px){.grid-photos.few.n2,.grid-photos.few.n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* mode clair (celui de Marco Poingt) : le logo de la barre en noir, les logos des partenaires en sombre sur le fond clair */
@media (prefers-color-scheme: light){
  .brand-mk{filter:invert(1)}
}
/* accueil : toute la carte du studio est le lien (le lien « Découvrir » s'étend sur la carte entière) */
.xcard{cursor:pointer}
.xc-in{inset:0;align-content:end}
a.xc-play::after{content:"";position:absolute;inset:0}
.xcard:hover .xc-play{color:var(--accent)}
/* l'annonce « information » : bandeau ambre, texte sombre (lisible en clair comme en sombre) ; le pop-up laisse la place de sa croix */
.site-alert.info{background:#f0bf4c;border-bottom-color:transparent;color:#171412}
.site-alert.info a{color:inherit}
.site-popup{padding-right:52px}
.site-popup .x{width:36px;height:36px;top:6px;right:6px;cursor:pointer}
/* lien de retour : l'icône est déjà une flèche vers la gauche (ne pas la retourner) */
.back .ic{transform:none}
/* visionneuse : toutes les photos en largeur dans un même cadre 3:2, à la même taille (un léger recadrage au besoin) */
.lb img.wide{width:min(92vw,1600px,calc((100dvh - 180px) * 1.5));height:auto;max-width:none;max-height:none;aspect-ratio:3/2;object-fit:cover}
/* carré partout */
*,*::before,*::after{border-radius:0}