/* ==========================================================================
   Metrohm Records — feuille de style partagée des pages artistes
   Même charte que index.html : noir & blanc, Archivo + Inter.
   ========================================================================== */
:root{
  --black:#000; --ink:#0a0a0a; --panel:#0f0f0f;
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.07);
  --white:#fff; --grey:#8f8f8f; --grey-2:#c9c9c9;
  --d:'Archivo',Helvetica,Arial,sans-serif; --b:'Inter',Helvetica,Arial,sans-serif;

  /* ======================================================================
     LA COULEUR
     Detroit, c'est le néon sur la tôle : un cyan électrique et un cuivre
     chaud. Deux accents, pas trois, et toujours sur fond noir — le contraste
     ne bouge pas, c'est la température qui change. Le cyan porte l'action
     (lecture, liens, survol), le cuivre porte le vinyle et le rare.
     ====================================================================== */
  --acc:#3fe0ff; --acc-d:#12a9c9; --acc-soft:rgba(63,224,255,.14);
  --warm:#ff8a4c; --warm-soft:rgba(255,138,76,.13);
  --nav-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{background:var(--black);color:var(--white);font-family:var(--b);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ==========================================================================
   LE FOND
   Le noir pur écrase tout et fatigue l'œil sur une longue page. On garde le
   noir — c'est un label techno, pas un blog — mais on y pose trois nappes très
   basses : un bleu nuit froid en haut à gauche, un cuivre chaud plus bas, et
   une trame de grille à peine visible. Rien qui se voie franchement, tout qui
   donne de la profondeur. Le texte reste sur du noir, donc le contraste ne
   bouge pas d'un poil.
   ========================================================================== */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(80vw 60vh at 12% -8%, rgba(58,86,150,.20), transparent 62%),
    radial-gradient(70vw 55vh at 92% 22%, rgba(150,74,42,.14), transparent 60%),
    radial-gradient(90vw 70vh at 50% 108%, rgba(38,74,92,.16), transparent 65%),
    linear-gradient(#000,#000);
}
/* la grille : l'espacement des sillons d'un 12 pouces, en très discret */
.wrap{position:relative}
main::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(120vw 90vh at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120vw 90vh at 50% 30%, #000 20%, transparent 78%);
}
@media (prefers-reduced-motion:reduce){body::before{background:#000}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:#000}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{width:min(1240px,92vw);margin-inline:auto}
.eyebrow{font-family:var(--d);font-size:.7rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--grey)}
h2.sec{font-family:var(--d);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(1.7rem,4.5vw,3rem);margin:.3em 0 .7em}
.lead{color:var(--grey-2);font-weight:300;font-size:clamp(1rem,1.6vw,1.13rem);max-width:66ch}
.lead + .lead{margin-top:18px}
section{padding:clamp(52px,7vw,96px) 0;border-top:1px solid var(--line-soft)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(16px,4vw,40px);background:rgba(0,0,0,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--d);font-weight:900;letter-spacing:.22em;
  text-transform:uppercase;font-size:.8rem}
.brand img.wordmark{width:auto;height:19px;aspect-ratio:1308/196}
.brand img.mark{width:26px;height:26px;aspect-ratio:1/1}
.menu{display:flex;gap:clamp(12px,2vw,28px);align-items:center}
.menu a{font-family:var(--d);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);transition:color .2s}
.menu a:hover,.menu a[aria-current]{color:#fff}
@media(max-width:700px){.menu a:nth-child(n+4){display:none}}

/* hero artiste */
.a-hero{padding:calc(var(--nav-h) + clamp(46px,8vw,90px)) 0 clamp(40px,6vw,70px);border-top:0}
.a-hero .wrap{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(26px,4vw,60px);
  align-items:center}
@media(max-width:860px){.a-hero .wrap{grid-template-columns:1fr}}
.portrait{aspect-ratio:1/1;border:1px solid var(--line-soft);background:var(--panel);overflow:hidden;
  display:grid;place-items:center;position:relative}
.portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(1.06) contrast(1.02)}
.portrait .mono{font-family:var(--d);font-weight:900;font-size:clamp(3.4rem,9vw,6rem);letter-spacing:-.04em;
  color:#fff;opacity:.13;line-height:1}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 2px,transparent 2px 11px)}
.portrait .pcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));
  font-family:var(--d);font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey)}
.a-hero h1{font-family:var(--d);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(2.4rem,8vw,5.2rem);line-height:.88;margin:.18em 0 .28em}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tag{display:inline-block;font-family:var(--d);font-size:.6rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;border:1px solid var(--line);padding:6px 12px;color:var(--grey)}
.tag.hot{border-color:#fff;color:#fff}

/* boutons / liens */
.btn{display:inline-block;font-family:var(--d);font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;padding:13px 22px;border:1px solid var(--line);color:#fff;
  transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:#fff;color:#000;border-color:#fff}
.btn.solid{background:#fff;color:#000;border-color:#fff}
.btn.solid:hover{background:transparent;color:#fff;border-color:var(--line)}
.links{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}

/* discographie
   La mise en page vit plus bas, dans « la discographie d'une page artiste ».
   Ici on ne garde que le cadre : la liste elle-même. Une ancienne règle
   poussait l'année à droite avec margin-left:auto ; depuis que le titre et
   l'année sont réunis dans .dl-txt, ce même span emportait tout le bloc de
   texte contre le bord droit. */
.disco{list-style:none;max-width:900px;font-size:.97rem}

/* players */
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.players iframe{width:100%;border:0;background:var(--panel)}
.bc{height:472px}
.sp{height:152px}
.sc{height:300px}

/* façade Bandcamp : la pochette d'abord, le lecteur au clic */
.bc-facade{position:relative;background:var(--panel);border:1px solid var(--line-soft);
  aspect-ratio:1/1;overflow:hidden}
.bc-facade img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.03);
  transition:filter .4s,transform .6s}
.bc-facade:hover img{filter:saturate(1.18) contrast(1.05);transform:scale(1.02)}
.bc-play{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:default;background:none;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;
  font-family:var(--d);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;padding:20px;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.05) 45%,rgba(0,0,0,.18) 100%)}
.bc-play em{font-style:normal;line-height:1.35}
.bc-play .tri{width:0;height:0;border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #fff;transition:transform .2s;
  filter:drop-shadow(0 0 12px rgba(0,0,0,.6))}
.bc-play:hover .tri{transform:none}
.bc-facade{animation:bcpulse 1.6s ease-in-out infinite}
@keyframes bcpulse{0%,100%{opacity:1}50%{opacity:.82}}
.bc-facade.is-playing{animation:none}
.bc-facade.is-playing{aspect-ratio:auto;border:0;background:none}
.bc-facade.is-playing img,.bc-facade.is-playing .bc-play{display:none}
.bc-facade.is-playing iframe{width:100%;height:472px;border:0;display:block}

/* blockquote */
blockquote{border-left:2px solid #fff;padding:6px 0 6px 22px;margin:26px 0;font-family:var(--d);font-weight:600;
  font-size:clamp(1rem,1.9vw,1.3rem);line-height:1.45;max-width:60ch}
blockquote cite{display:block;margin-top:12px;font-family:var(--b);font-style:normal;font-weight:400;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

/* citations DJ */
.quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
blockquote.q{border:1px solid var(--line-soft);background:var(--panel);padding:24px;margin:0;
  display:flex;flex-direction:column;gap:18px;transition:background .25s,border-color .25s}
blockquote.q:hover{background:#151515;border-color:var(--line)}
blockquote.q p{font-family:var(--d);font-weight:600;font-size:1rem;line-height:1.4}
blockquote.q cite{font-style:normal;margin-top:auto;display:flex;flex-direction:column;gap:4px}
blockquote.q cite strong{font-family:var(--d);font-weight:900;text-transform:uppercase;letter-spacing:.04em;
  font-size:.84rem}
blockquote.q cite span{font-family:var(--d);font-size:.58rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey)}

/* grille roster */
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.r-card{border:1px solid var(--line-soft);background:var(--panel);padding:22px;display:flex;
  flex-direction:column;gap:8px;min-height:170px;transition:background .25s,border-color .25s,transform .25s}
.r-card:hover{background:#151515;border-color:var(--line);transform:translateY(-3px)}
.r-card b{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:1.25rem;line-height:1.05;
  letter-spacing:-.01em}
.r-card small{font-family:var(--d);font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grey)}
.r-card p{color:var(--grey-2);font-size:.86rem;font-weight:300;margin-top:auto}

/* footer */
footer{border-top:1px solid var(--line-soft);padding:52px 0 38px;background:var(--ink)}
.f-top{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{font-family:var(--d);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line);padding:9px 13px;color:var(--grey);transition:.2s}
.socials a:hover{background:#fff;color:#000;border-color:#fff}
.f-artists{margin-top:34px;display:flex;gap:7px;flex-wrap:wrap}
.f-artists a{font-family:var(--d);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);border-bottom:1px solid transparent;padding-bottom:2px}
.f-artists a:hover{color:#fff;border-color:#fff}
.f-artists span{color:#3a3a3a}
.copy{margin-top:34px;font-size:.7rem;letter-spacing:.1em;color:#5c5c5c;text-transform:uppercase;font-family:var(--d)}

.note{font-size:.8rem;color:#6f6f6f;font-style:italic;margin-top:14px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   Pages DJ support et Le label
   ========================================================================== */
.camp-head{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(24px,4vw,54px);
  align-items:start;margin-bottom:clamp(30px,4vw,48px)}
@media(max-width:820px){.camp-head{grid-template-columns:1fr}}
.camp-head img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line-soft);
  filter:saturate(1.08) contrast(1.03);transition:filter .4s,transform .5s}
.camp-head img:hover{filter:saturate(1.2);transform:scale(1.015)}
.artist-line{font-family:var(--d);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  font-size:.76rem;color:var(--grey);margin-top:-.4em}
.camp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:16px;margin-top:26px}
.camp-stats div{border-top:1px solid var(--line);padding-top:12px}
.camp-stats b{display:block;font-family:var(--d);font-weight:900;font-size:1.6rem;line-height:1}
.camp-stats span{font-family:var(--d);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.topvotes{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.topvotes li{border:1px solid var(--line-soft);padding:7px 12px;font-size:.8rem;display:flex;gap:8px;
  align-items:baseline;background:var(--panel)}
.topvotes b{font-family:var(--d);font-weight:700;font-size:.78rem}
.topvotes span{font-family:var(--d);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(18px,3vw,40px);
  margin:clamp(30px,4vw,50px) 0}
.stats div{border-top:1px solid var(--line)}
.stats b{display:block;font-family:var(--d);font-weight:900;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1;
  padding-top:14px}
.stats span{font-family:var(--d);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grey)}

.faq{display:grid;gap:2px;max-width:900px}
.faq-item{border:1px solid var(--line-soft);background:var(--panel);padding:clamp(20px,3vw,28px)}
.faq-item h3{font-family:var(--d);font-weight:800;font-size:1.02rem;line-height:1.3;margin-bottom:10px}
.faq-item p{color:var(--grey-2);font-weight:300;font-size:.97rem}

/* accessibilité et confort */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:#000;padding:12px 18px;
  font-family:var(--d);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}
@media(max-width:700px){
  .menu{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:66vw;
    justify-content:flex-end}
  .menu::-webkit-scrollbar{display:none}
  .menu a:nth-child(n+4){display:inline-block}
  .menu a{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.bc-facade{animation:none}}

/* TikTok */
.tiktok-box{min-height:560px;display:flex;align-items:center;justify-content:center}
.tiktok-embed{max-width:100%!important;min-width:220px!important;margin:0!important}

/* hero artiste contenant un lecteur Bandcamp jouable */
.portrait.is-player{aspect-ratio:auto;border:0;background:none;display:block;overflow:visible}
.portrait.is-player::after{display:none}
.portrait.is-player .bc-facade{aspect-ratio:1/1;border:1px solid var(--line-soft)}
.portrait.is-player .bc-facade.is-playing{aspect-ratio:auto;border:0}
.portrait.is-player .bc-facade.is-playing iframe{height:472px}

/* bandeau : la dernière sortie sur le label, sous le hero */
.strip{padding:0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:var(--panel)}
.strip-row{display:flex;align-items:center;gap:clamp(14px,2vw,24px);padding:14px 0}
.strip-row img{width:66px;height:66px;flex:0 0 auto;object-fit:cover;border:1px solid var(--line-soft);
  filter:saturate(1.08)}
.strip-txt{flex:0 1 auto;min-width:0}
.strip-txt .eyebrow{display:block;font-size:.58rem;letter-spacing:.28em}
.strip-txt b{display:block;font-family:var(--d);font-weight:900;text-transform:uppercase;
  font-size:clamp(.95rem,1.6vw,1.2rem);line-height:1.15;letter-spacing:-.01em;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-strip{flex:1 1 260px;min-width:200px;height:42px;border:0;background:transparent}
.strip-row .btn{flex:0 0 auto;padding:11px 18px;font-size:.62rem}
@media(max-width:720px){
  .strip-row{flex-wrap:wrap;padding:16px 0}
  .strip-txt{flex:1 1 auto}
  .bc-strip{flex:1 1 100%;order:3}
  .strip-row .btn{order:4}
}

/* avatars des cartes artiste */
.av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:grid;
  place-items:center;background:#1a1a1a;border:1px solid var(--line-soft);margin-bottom:4px}
.av img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08)}
.av-mono{font-family:var(--d);font-weight:900;font-size:1.05rem;letter-spacing:.02em;color:var(--grey)}
.r-card{align-items:flex-start}
.r-card:hover .av{border-color:var(--line)}
.r-card:hover .av img{filter:saturate(1.2)}

/* bouton vinyle du bandeau : distingué du bouton d'achat numérique */
.vinyl-btn{border-color:rgba(255,255,255,.45)}
.vinyl-btn:hover{background:#fff;color:#000}

/* retours DJ : au-delà de 12, on déplie */
blockquote.q-hid{display:none}
.quotes.q-open blockquote.q-hid{display:flex}
.btn.q-more{margin-top:22px}

/* la discographie d'une page artiste : le bouton, puis le titre et l'année,
   collés l'un à l'autre et alignés à gauche. Le texte occupe le reste de la
   ligne (flex:1) pour que rien ne dérive vers la droite. */
.disco li{display:flex;gap:16px;align-items:center;text-align:left;
  padding:12px 0;border-bottom:1px solid var(--line-soft)}
.disco li:first-child{border-top:1px solid var(--line-soft)}
.disco .dl-play{width:34px;height:34px;flex:0 0 34px;margin:0}
.disco .dl-play .tri{border-left-width:10px;border-top-width:6px;border-bottom-width:6px}
.disco .dl-sp{display:block;width:34px;height:34px;flex:0 0 34px;margin:0;
  border:1px solid var(--line-soft);border-radius:50%;opacity:.35}
.disco .dl-txt{display:block;flex:1 1 auto;min-width:0;margin:0}
.disco .dl-txt b{display:block;font-family:var(--d);font-weight:700;line-height:1.25;
  letter-spacing:.02em;margin:0}
.disco .dl-txt span{display:block;color:var(--grey);font-size:.66rem;
  font-family:var(--d);letter-spacing:.16em;text-transform:uppercase;
  margin:4px 0 0}

/* ==========================================================================
   AILLEURS : la discographie hors Metrohm
   Une liste dense et sobre, repliée quand elle est longue. Ce n'est pas le
   catalogue du label, ça ne doit donc pas lui voler la vedette — mais un
   artiste qui a cinquante disques ailleurs, ça se dit.
   ========================================================================== */
.ae{border-top:1px solid var(--line-soft)}
.ae summary{list-style:none;cursor:pointer;padding:16px 2px;display:flex;align-items:center;gap:12px;
  font-family:var(--d);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey);transition:color .2s}
.ae summary::-webkit-details-marker{display:none}
.ae summary:hover{color:#fff}
.ae summary::after{content:"+";margin-left:auto;font-size:1.1rem;line-height:1}
.ae[open] summary::after{content:"–"}
.ae-list{list-style:none;border-top:1px solid var(--line-soft);
  columns:2;column-gap:clamp(20px,3vw,44px)}
@media(max-width:760px){.ae-list{columns:1}}
.ae-list li{break-inside:avoid;border-bottom:1px solid var(--line-soft)}
.ae-list a{display:block;padding:11px 2px;transition:background .2s}
.ae-list a:hover{background:rgba(255,255,255,.04)}
.ae-t{display:block;font-size:.9rem;line-height:1.3}
.ae-m{display:block;margin-top:3px;font-family:var(--d);font-size:.56rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

/* les labels où l'artiste paraît ailleurs qu'ici */
.ae-labels{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ae-labels li{font-family:var(--d);font-size:.62rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;border:1px solid var(--line);padding:8px 14px;color:var(--grey-2)}

/* la liste des sorties hors label : titre à gauche, les trois sorties à droite */
.ae-list{list-style:none;border-top:1px solid var(--line-soft);margin-top:18px}
.ae-i{display:flex;align-items:center;gap:16px;padding:11px 2px;
  border-bottom:1px solid var(--line-soft);transition:background .2s}
.ae-i:hover{background:rgba(255,255,255,.035)}
.ae-tx{flex:1 1 auto;min-width:0}
.ae-tx b{display:block;font-size:.9rem;line-height:1.3;font-weight:500}
.ae-tx span{display:block;margin-top:2px;font-family:var(--d);font-size:.55rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.ae-go{display:flex;gap:6px;flex:0 0 auto}
.ae-go a{font-family:var(--d);font-size:.54rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;border:1px solid var(--line-soft);padding:6px 10px;color:var(--grey);
  transition:background .2s,color .2s,border-color .2s}
.ae-go a:hover{background:#fff;color:#000;border-color:#fff}
@media(max-width:620px){
  .ae-i{flex-wrap:wrap;gap:8px}
  .ae-go{width:100%}
}

/* ==========================================================================
   LA COULEUR, POUR DE BON
   Le premier essai était trop timide pour se voir. Ici les accents portent
   vraiment : le cyan sur tout ce qui s'actionne, le cuivre sur le vinyle et
   les raretés. Le texte courant reste blanc sur noir — on ne touche pas à
   la lisibilité, on colore les gestes.
   ========================================================================== */

/* le fond : trois fois plus présent qu'avant */
body::before{
  background:
    radial-gradient(75vw 58vh at 8% -10%, rgba(20,120,165,.42), transparent 60%),
    radial-gradient(60vw 50vh at 96% 14%, rgba(190,78,32,.28), transparent 58%),
    radial-gradient(85vw 65vh at 46% 106%, rgba(30,96,140,.34), transparent 62%),
    linear-gradient(#000,#000) !important;
}

/* les sur-titres : c'est eux qui rythment la page */
.eyebrow{color:var(--acc)}

/* liens dans le texte courant */
.lead a, blockquote a, p a:not(.btn){color:var(--acc);
  border-bottom:1px solid rgba(63,224,255,.35);transition:border-color .2s}
.lead a:hover, p a:not(.btn):hover{border-bottom-color:var(--acc)}

/* boutons : le plein passe en cyan, le contour s'allume au survol */
.btn.solid{background:var(--acc);color:#001318;border-color:var(--acc);
  box-shadow:0 0 0 0 rgba(63,224,255,.5);transition:box-shadow .3s,background .25s,color .25s}
.btn.solid:hover{background:transparent;color:var(--acc);border-color:var(--acc);
  box-shadow:0 0 22px -6px rgba(63,224,255,.55)}
.btn:hover{background:var(--acc);color:#001318;border-color:var(--acc)}

/* étiquettes : la première en cuivre, elle porte la ville ou le rôle */
.tag.hot{border-color:var(--warm);color:var(--warm);background:var(--warm-soft)}
.meta .tag:first-child{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}

/* le triangle de lecture, partout */
.row-play .tri, .trk-b .tri, .cc-play .tri, .dl-play .tri, .mini-play .tri,
.bc-play .tri{border-left-color:var(--acc)}
.row-play{border-color:rgba(63,224,255,.4)}
.row-play:hover:not(:disabled){background:var(--acc);border-color:var(--acc);
  box-shadow:0 0 18px -4px rgba(63,224,255,.6)}
.row-play:hover:not(:disabled) .tri{border-left-color:#001318}
.row-play.is-off{border-color:var(--line-soft)}
.row-play.is-off .tri{border-left-color:var(--grey)}

/* une ligne de morceau au survol : liseré cyan à gauche */
.trk{border-left:2px solid transparent;transition:background .2s,border-color .2s}
.trk:hover{background:rgba(63,224,255,.07);border-left-color:var(--acc)}
.trk.is-playing{background:rgba(63,224,255,.11);border-left-color:var(--acc)}
.trk:hover .trk-b{background:var(--acc);border-color:var(--acc)}
.trk:hover .trk-b .tri{border-left-color:#001318}

/* la platine : la barre de progression prend la couleur */
.dk-fill{background:linear-gradient(90deg,var(--acc-d),var(--acc)) !important}
.dk-buf{background:rgba(63,224,255,.22) !important}
.dk-head{background:var(--acc) !important;box-shadow:0 0 12px rgba(63,224,255,.8)}

/* la navigation : la page courante est marquée */
.menu a:hover,.menu a[aria-current]{color:var(--acc)}

/* les pochettes : elles rayonnent au survol, c'est là qu'est la couleur */
.disco-list li .cover img, .cc img, .pw-i img, .rel-cov{
  transition:filter .35s,box-shadow .35s,transform .35s}
.disco-list li:hover .cover img, .cc:hover img, .pw-i a:hover img{
  filter:saturate(1.25) contrast(1.06);
  box-shadow:0 10px 34px -12px rgba(63,224,255,.5)}
.pw-i a:hover img{border-color:var(--acc)}

/* le vinyle, c'est le cuivre */
.press-note{border-color:rgba(255,138,76,.28);
  background:linear-gradient(100deg,var(--warm-soft),transparent 62%),var(--panel)}
.press-note .dot{background:var(--warm);box-shadow:0 0 0 4px rgba(255,138,76,.2)}
.press-note .lead-t{color:var(--warm)}
.press-note .btn:hover{background:var(--warm);border-color:var(--warm);color:#180a03}

/* les cartes : un liseré qui s'allume plutôt qu'un gris qui s'éclaircit */
blockquote.q{border-left:2px solid transparent}
blockquote.q:hover{border-color:var(--line);border-left-color:var(--acc);
  background:rgba(63,224,255,.045)}
.r-card:hover{border-color:var(--acc);box-shadow:0 12px 32px -18px rgba(63,224,255,.55)}
.ae-go a:hover{background:var(--acc);color:#001318;border-color:var(--acc)}
.ae-labels li{border-color:rgba(255,138,76,.3);color:var(--warm)}

/* exergue */
blockquote{border-left-color:var(--acc)}

/* sélection et focus */
::selection{background:var(--acc);color:#001318}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* les chiffres : ce sont des arguments, ils méritent d'être vus */
.stats b, .camp-stats b, .facts b{color:var(--acc)}

/* ==========================================================================
   LE FOND : UN SILLON
   Un vrai motif plutôt qu'un dégradé de plus — mais le motif du label, pas
   une texture achetée : le sillon d'un 12 pouces, immense, décentré, fixe.
   Il ne défile pas avec la page, donc on le devine sans jamais le lire. À
   3 % d'opacité il n'entre en concurrence avec rien, et il remplace la
   grille carrée d'avant, qui était générique.

   L'image est une SVG écrite à la main, quelques kilo-octets, nette sur
   écran Retina et sans un seul aller-retour réseau.
   ========================================================================== */
main::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200'%3E%3Ccircle cx='600' cy='600' r='46' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='59' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='72' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='85' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='98' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='111' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='124' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='137' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='150' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='163' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='176' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='189' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='202' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='215' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='228' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='241' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='254' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='267' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='280' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='293' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='306' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='319' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='332' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='345' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='358' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='371' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='384' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='397' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='410' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='423' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='436' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='449' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='462' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='475' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='488' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='501' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='514' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='527' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='540' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='553' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='566' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='579' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='592' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='34' fill='none' stroke='%23fff' stroke-width='2' opacity='.16'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:118% -18% !important;
  background-size:min(155vh,1500px) auto !important;
  opacity:.5 !important;
  mask-image:none !important;
  -webkit-mask-image:none !important;
}
/* un second sillon en bas à gauche, plus petit : la page respire */
main::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.36;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200'%3E%3Ccircle cx='600' cy='600' r='46' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='59' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='72' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='85' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='98' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='111' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='124' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='137' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='150' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='163' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='176' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='189' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='202' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='215' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='228' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='241' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='254' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='267' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='280' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='293' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='306' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='319' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='332' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='345' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='358' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='371' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='384' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='397' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='410' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='423' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='436' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='449' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='462' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='475' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='488' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='501' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='514' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='527' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='540' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='553' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='566' fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.1'/%3E%3Ccircle cx='600' cy='600' r='579' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='592' fill='none' stroke='%23fff' stroke-width='0.9' opacity='0.055'/%3E%3Ccircle cx='600' cy='600' r='34' fill='none' stroke='%23fff' stroke-width='2' opacity='.16'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:-26% 116%;
  background-size:min(105vh,1000px) auto;
}
@media (max-width:760px){
  main::after{display:none}
  main::before{background-position:135% -6%;opacity:.34 !important}
}
@media (prefers-reduced-motion:reduce){main::after{display:none}}