/* ============================================================
   LARSEN KOLLEKTIV — style.css
   Rouge / noir. Brut, mécanique, underground.
   ============================================================ */

:root{
  /* --- NOIRS --- */
  --ink:      #050505;
  --ink-2:    #0a0908;
  --panel:    #0e0d0d;
  --panel-2:  #141212;
  --line:     #5a2420;   /* trait franc, lisible sur le noir */
  --line-hot: #9c1313;   /* rouge assume, plus de brun timide */

  /* --- ROUGE : la signature --- */
  --red:      #e31616;
  --red-hot:  #ff2929;
  --red-deep: #8c0d0d;
  --red-ash:  #5c1010;

  /* --- TEXTE : os / cendre --- */
  --bone:     #f2efe9;
  --ash:      #a09892;
  --dim:      #6e6560;

  --mono: "Share Tech Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --disp: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --sans: Arial, "Helvetica Neue", sans-serif;

  --ease: cubic-bezier(.8,0,.2,1);
  --snap: steps(4,end);
}

*{ box-sizing:border-box; }
/* fond posé aussi sur html : sinon celui de body part sur le canevas et,
   body restant isolé par son animation d'apparition, les textures en
   soft-light n'ont plus rien sous elles et ressortent en gris brut */
html{ scroll-behavior:smooth; background:var(--ink); }

::selection{ background:var(--red); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--red-ash); border:3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   FONDS ANIMÉS — 3 couches fixes, sous tout le contenu
   ============================================================ */
.bg-layer{ position:fixed; inset:0; pointer-events:none; z-index:0; }

/* 1. trame sérigraphie — points d'encre rouge, statique (zéro coût CPU).
   Remplace l'ancienne lueur dégradée animée : on veut de l'imprimé,
   pas une ambiance. Deux trames décalées = bavure de repérage. */
.bg-halftone{
  opacity:.9;
  background-image:
    radial-gradient(circle at center, rgba(227,22,22,.30) 1.6px, transparent 1.7px),
    radial-gradient(circle at center, rgba(140,13,13,.22) 2.4px, transparent 2.5px);
  background-size:13px 13px, 19px 19px;
  background-position:0 0, 5px 7px;
  -webkit-mask-image:linear-gradient(168deg, #000 0%, rgba(0,0,0,.35) 46%, #000 100%);
          mask-image:linear-gradient(168deg, #000 0%, rgba(0,0,0,.35) 46%, #000 100%);
}

/* 2. scanlines + quadrillage technique */
.bg-grid{
  opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(227,22,22,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,22,22,.05) 1px, transparent 1px);
  background-size:100% 3px, 68px 68px, 68px 68px;
  /* plus de dérive : les scanlines qui défilaient en continu faisaient
     bouger tout le bord de l'écran */
}

/* 3. vraie texture de papier (images/tex-papier.webp, générée localement :
   fibres + froissé). Statique : l'ancien grain se décalait toutes les
   0,3 s et découvrait une bande qui clignotait au bord gauche. */
.bg-grain{
  opacity:.32; mix-blend-mode:soft-light;
  background:url("images/tex-papier.webp") 0 0 / 512px 512px repeat;
}

/* barre rouge de progression de scroll */
#scroll-bar{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--red-deep),var(--red-hot));
  z-index:200; pointer-events:none;
}

/* Profondeur — la mascotte doit pouvoir passer DEVANT et DERRIÈRE.
   Les sections gardent position:relative mais PAS de z-index : sinon
   elles enfermeraient leurs cartes dans leur propre contexte
   d'empilement et la mascotte ne pourrait plus s'intercaler. */
section, footer.site{ position:relative; }
.ticker{ position:relative; z-index:6; }
.card{ z-index:4; }
.wall-wrap{ position:relative; z-index:2; flex:1 1 300px; min-width:0; }
.wall-wrap svg{ display:block; width:100%; height:auto; }

.wrap{ max-width:1060px; margin:0 auto; padding:0 26px; }

/* ============================================================
   LIENS
   ============================================================ */
a{ color:var(--red-hot); text-decoration:none; transition:color .08s; }
a:hover{ color:#fff; }

/* soulignement qui se déploie */
.prose a, .section-sub a, .card p a{
  background-image:linear-gradient(var(--red),var(--red));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .14s var(--snap), color .08s;
}
.prose a:hover, .section-sub a:hover, .card p a:hover{ background-size:100% 1px; }

/* liens écrits dans les textes de l'admin ([texte](adresse)) : toujours
   soulignés, pour qu'on voie qu'on peut cliquer, même dans un grand titre */
a.lk-lien, .prose a.lk-lien, .section-sub a.lk-lien, .card p a.lk-lien{ background-image:none; text-decoration:underline; text-decoration-thickness:1px;
           text-underline-offset:.18em; text-decoration-color:var(--red); }
.hero h1 a.lk-lien{ color:inherit; text-decoration-thickness:.06em; }
/* bandeau défilant : fond rouge, le lien garde le blanc du texte */
.ticker a.lk-lien{ color:inherit; text-decoration-color:currentColor; }

/* ============================================================
   HEADER
   ============================================================ */
header.site{
  position:sticky; top:0; z-index:100;
  border-bottom:2px solid var(--line-hot);
  background:var(--ink);
}
header.site::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  opacity:.75;
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px; flex-wrap:wrap; gap:12px;
}

.logo{
  font-family:var(--mono); font-weight:800; font-size:1.05rem;
  letter-spacing:.04em; color:var(--bone); position:relative;
}
.logo .dot{ color:var(--red); }
.logo:hover{ color:var(--bone); }
.logo:hover .dot{ animation:blink .12s steps(2) 3; }
@keyframes blink{ 50%{ opacity:.15; } }

nav.main{ display:flex; gap:6px; font-family:var(--mono); font-size:.78rem; flex-wrap:wrap; }
nav.main a, nav.main summary{
  color:var(--ash); text-transform:uppercase; letter-spacing:.1em;
  padding:7px 12px; position:relative; overflow:hidden;
  display:inline-flex; align-items:center; cursor:pointer; list-style:none;
}
nav.main summary::-webkit-details-marker{ display:none; }
nav.main summary::after{ content:"▾"; margin-left:6px; font-size:.7em; opacity:.7; }
.nav-group[open] > summary::after{ content:"▴"; }
nav.main a::before, nav.main summary::before{
  content:""; position:absolute; inset:auto 0 0 0; height:100%;
  background:var(--red); transform:translateY(101%);
  transition:transform .12s var(--snap); z-index:-1;
}
nav.main a:hover, nav.main summary:hover{ color:#fff; }
nav.main a:hover::before, nav.main summary:hover::before{ transform:translateY(0); }
nav.main a.active, nav.main summary.active{ color:var(--bone); }
nav.main a.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background:var(--red);
}

/* SHOP / MUSIC / COLLECTIF : menus déroulants natifs (<details>), sans JS */
.nav-group{ position:relative; }
.nav-group .nav-drop{
  position:absolute; top:100%; left:0; margin-top:2px;
  display:flex; flex-direction:column; min-width:170px;
  background:var(--ink); border:1px solid var(--line-hot); z-index:10;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:96px 0 68px; border-bottom:1px solid var(--line); }

.hero .kicker{
  display:inline-block; font-family:var(--mono); color:var(--red-hot);
  text-transform:uppercase; letter-spacing:.24em; font-size:.72rem;
  margin-bottom:22px; padding:5px 11px;
  border:2px solid var(--line-hot); background:rgba(227,22,22,.07);
}
.hero .kicker::before{ content:"■ "; color:var(--red); animation:blink .1s steps(2) 4 .35s; }

.hero h1{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2.4rem,7vw,5rem); line-height:.94;
  text-transform:uppercase; letter-spacing:.005em;
  margin:0 0 24px; color:var(--bone);
  position:relative;
}
/* décalage d'impression (sérigraphie mal calée) + glitch ponctuel :
   une seule salve au survol ou déclenchée par larsen-fx.js (.lk-glitch),
   jamais en boucle. text-shadow plutôt qu'un calque attr() : ça suit les <br> */
.hero h1, .radio-word{ text-shadow:3px 0 0 rgba(140,13,13,.9); }
.hero h1:hover, .radio-word:hover, .lk-glitch{ animation:glitch .24s 1; }
@keyframes glitch{
  0%  { transform:translate(0,0);    text-shadow:3px 0 0 rgba(140,13,13,.9);  animation-timing-function:steps(1,end); }
  20% { transform:translate(-4px,0); text-shadow:8px 0 0 rgba(227,22,22,.9);  animation-timing-function:steps(1,end); }
  45% { transform:translate(3px,1px) skewX(-6deg); text-shadow:-5px 0 0 rgba(140,13,13,.95); animation-timing-function:steps(1,end); }
  70% { transform:translate(-1px,0); text-shadow:3px 0 0 var(--bone);         animation-timing-function:steps(1,end); }
  100%{ transform:translate(0,0);    text-shadow:3px 0 0 rgba(140,13,13,.9); }
}

.hero p.lead{ max-width:600px; color:var(--ash); font-size:1.06rem; }
.hero .cta-row{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  --b:var(--red);
  display:inline-block; position:relative; overflow:hidden;
  font-family:var(--mono); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em;
  padding:14px 26px; border:1px solid var(--b); color:var(--bone);
  background:transparent; cursor:pointer;
  transition:color .08s, border-color .08s, box-shadow .08s, transform .08s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; background:var(--b);
  transform:scaleX(0); transform-origin:left; transition:transform .14s var(--snap);
}
.btn:hover{ color:#fff; transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--red-deep); }
.btn:hover::before{ transform:scaleX(1); }
.btn:active{ transform:translate(1px,1px); box-shadow:none; transition-duration:0s; }

.btn.solid{ background:var(--red); border-color:var(--red); color:#fff; font-weight:800; }
.btn.solid::before{ background:#fff; }
.btn.solid:hover{ color:var(--ink); }

.btn.ghost{ --b:var(--line-hot); color:var(--ash); }
.btn.ghost:hover{ --b:var(--red); color:#fff; }

/* ============================================================
   BANDEAU DÉFILANT
   ============================================================ */
.ticker{
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  background:var(--red); overflow:clip; contain:layout paint; padding:9px 0;
}
.ticker-track{ display:flex; width:100%; animation:roll 26s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.hp-intel{ background:linear-gradient(135deg,#120b0b,#080707); border-block:1px solid var(--line); }.intel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}.intel-card{min-height:156px;display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--line);background:#0c0a0a;color:var(--ash);text-decoration:none;transition:.15s var(--ease)}.intel-card:hover{color:var(--bone);border-color:var(--red);transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--red-deep)}.intel-card b,.intel-card i{font-family:var(--mono);text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;color:var(--red-hot)}.intel-card i{margin-top:auto;font-style:normal;color:var(--bone)}.wall-intro{display:flex;justify-content:space-between;align-items:end;gap:20px}.home-wall-scene .dj-booth{margin-bottom:4px}.contrib-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}.contrib-tabs a{border:1px solid var(--line);color:var(--ash);padding:9px 12px;text-decoration:none;font-family:var(--mono);font-size:.72rem;text-transform:uppercase}.contrib-tabs a:hover,.contrib-tabs a.active{color:#fff;background:var(--red);border-color:var(--red)}.contrib-form{max-width:640px}.lk-hp{position:absolute;left:-9999px}@media(max-width:760px){.intel-grid{grid-template-columns:1fr 1fr}.wall-intro{align-items:flex-start;flex-direction:column}.home-wall-scene{gap:4px}.home-wall-scene .dj-booth{width:120px}}@media(max-width:440px){.intel-grid{grid-template-columns:1fr}}
.ticker span{
  font-family:var(--mono); font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.22em; color:#fff;
  padding:0 26px; white-space:nowrap; flex:0 0 auto;
}
@keyframes roll{ to{ transform:translateX(calc(-1 * var(--ticker-shift, 50%))); } }

/* ============================================================
   SECTIONS
   ============================================================ */
section{ padding:76px 0; border-bottom:2px solid var(--line); }
section:last-of-type{ border-bottom:none; }

/* Titres de section : affiche, pas étiquette. Bebas Neue en gros, os sur noir,
   barre rouge pleine qui pousse jusqu'au bord du bloc. */
section h2{
  font-family:var(--disp); font-weight:400;
  text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.9rem,5.2vw,3.1rem); line-height:.96;
  color:var(--bone); margin:0 0 18px;
  display:flex; align-items:center; gap:18px;
}
section h2::after{
  content:""; flex:1; height:6px; min-width:40px;
  background:var(--red);
}
section .section-sub{ color:var(--ash); margin:0 0 40px; max-width:660px; }

/* ============================================================
   CARTES
   ============================================================ */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:20px; }

.card{
  position:relative; isolation:isolate;
  border:2px solid var(--line); background:var(--panel);
  padding:28px; display:flex; flex-direction:column; gap:12px;
  transition:border-color .08s, transform .1s var(--ease), box-shadow .1s var(--ease);
}
/* texture de photocopie (toner, traînées du copieur) collée sur la carte.
   isolation:isolate + z-index:-1 : elle se fond dans le fond de la carte,
   sous le texte. */
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("images/tex-photocopie.webp") 0 0 / 512px 512px repeat;
  mix-blend-mode:soft-light; opacity:.85;
}
/* coin rouge */
.card::after{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 22px 22px 0;
  border-color:transparent var(--line-hot) transparent transparent;
  transition:border-color .08s;
}
.card:hover{ border-color:var(--red); transform:translate(-3px,-3px); box-shadow:4px 4px 0 var(--red-deep); }
.card:hover::after{ border-right-color:var(--red); }

.card h3{ margin:0; font-family:var(--disp); font-weight:400; font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em; }
.card p{ margin:0; color:var(--ash); font-size:.94rem; }
.card .meta{
  font-family:var(--mono); font-size:.7rem; color:var(--dim);
  text-transform:uppercase; letter-spacing:.13em;
}
.card-artist{ font-size:.82rem; }
.card-artist a{ color:var(--ash); }
.card-artist a:hover{ color:var(--red-hot); }
.card .actions{ margin-top:auto; padding-top:12px; }

/* ============================================================
   RELEASES — les cartes produit
   ------------------------------------------------------------
   Une pochette de disque, pas une carte de dashboard : artwork
   carré dominant, catalogue, titre massif, bandeau d'achat.
   Les autres .card (artistes, avis) ne sont pas concernées.
   ============================================================ */
.card.release{
  padding:0; gap:0; overflow:hidden;
  border-color:var(--line-hot);
  transition:border-color .18s;
}
/* pas de halo à la souris, pas de coin décoratif : l'artwork suffit */
.card.release::before,
.card.release::after{ display:none; }
/* ni décollage ni ombre premium — la carte ne bouge pas, elle s'allume */
.card.release:hover{
  transform:none; box-shadow:none; border-color:var(--red);
}

/* --- ARTWORK ------------------------------------------------ */
.rel-art{
  position:relative; aspect-ratio:1/1; width:100%;
  border-bottom:2px solid var(--line-hot);
  background:var(--ink); overflow:hidden;
  transition:border-color .18s;
}
.card.release:hover .rel-art{ border-color:var(--red); }

.rel-img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:filter .18s;
}
.card.release:hover .rel-img{ filter:contrast(1.1) brightness(1.03); }
/* photocopie : noir et blanc dur, activable par pochette dans l'admin */
.rel-img.bw{ filter:grayscale(1) contrast(1.75) brightness(.9); }
.card.release:hover .rel-img.bw{ filter:grayscale(1) contrast(2.1) brightness(1); }
/* encre rouge en surimpression, comme une deuxième passe mal calée */
.rel-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--red); mix-blend-mode:multiply;
  opacity:0; transition:opacity .18s;
}
.card.release:hover .rel-art::after{ opacity:.55; }

/* Sans visuel enregistré : plaque typographique tramée. On n'invente
   aucune image, on imprime l'initiale de la release. */
.rel-plate{
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  background-color:var(--ink-2);
  background-image:
    radial-gradient(circle at center, rgba(227,22,22,.55) 1.4px, transparent 1.5px),
    repeating-linear-gradient(135deg, rgba(242,239,233,.05) 0 2px, transparent 2px 9px);
  background-size:9px 9px, auto;
}
.rel-plate-ini{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(4rem,17vw,7.5rem); line-height:1;
  color:var(--bone); -webkit-text-stroke:2px var(--ink);
  text-shadow:5px 5px 0 var(--red);
  transition:text-shadow .18s;
}
.card.release:hover .rel-plate-ini{ text-shadow:5px 5px 0 var(--red-hot); }

/* numéro de catalogue — étiquette collée dans l'angle */
.rel-cat{
  position:absolute; left:0; bottom:0; z-index:2;
  font-family:var(--mono); font-size:.66rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); background:var(--ink);
  border-top:2px solid var(--red); border-right:2px solid var(--red);
  padding:5px 10px;
}
.card.release:hover .rel-cat{ background:var(--red); color:#fff; }

/* le badge passe sur l'artwork, angle opposé */
.card.release .badge{
  position:absolute; top:0; right:0; z-index:2;
  border-width:2px; border-right:none; border-top:none;
}

/* --- CORPS -------------------------------------------------- */
.rel-body{
  display:flex; flex-direction:column; gap:10px;
  padding:20px 20px 0; flex:1;
}
.card.release h3{
  font-size:clamp(1.45rem,3.4vw,2rem); line-height:1.04;
  letter-spacing:.005em; overflow-wrap:anywhere;
}
.card.release h3 a{ color:var(--bone); }
.card.release:hover h3 a{ color:var(--red-hot); }
.card.release .meta{ font-size:.66rem; letter-spacing:.16em; color:var(--ash); }
.card.release .rel-body > p{ font-size:.9rem; }

/* --- BANDEAU D'ACHAT ---------------------------------------- */
.rel-buy{
  margin-top:auto; margin-left:-20px; margin-right:-20px;
  padding:14px 20px; border-top:2px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.rel-buy .price{ margin:0 !important; }
.rel-buy .price-now,
.rel-buy .price-free{ font-size:1.35rem; }
.card.release .actions{ margin-top:0; padding-top:0; }
.rel-buy .btn{ border-width:2px; padding:11px 20px; }

/* Fiche d'un sample pack : la même pochette et les mêmes prix que le catalogue. */
.pack-detail{ padding:44px 0 64px; }
.pack-detail-grid{ display:grid; grid-template-columns:minmax(220px,380px) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.pack-detail-art{ border:2px solid var(--line-hot); }
.pack-detail-info{ min-width:0; }
.pack-detail-info h1{ overflow-wrap:anywhere; }
.pack-detail-meta{ color:var(--ash); font-family:var(--mono); letter-spacing:.08em; margin-bottom:24px; }
.pack-detail-info a:not(.btn){ color:var(--red-hot); }
.pack-detail-price{ margin-top:24px !important; }
.pack-detail-note{ color:var(--dim); font-size:.78rem; }
.pack-preview{ max-width:700px; margin:0 0 32px; }
.pack-preview h3{ margin:0 0 14px; }
.pack-preview audio{ display:block; width:100%; }
@media (max-width:680px){ .pack-detail-grid{ grid-template-columns:1fr; } .pack-detail-art{ max-width:380px; } }

/* sous 380px la ligne prix + bouton se casse proprement en deux */
@media (max-width:379px){
  .rel-buy{ flex-direction:column; align-items:flex-start; }
  .rel-buy .actions{ width:100%; }
  .rel-buy .btn{ display:block; text-align:center; }
}

/* secousse quand la mascotte percute une carte */
.card.hit{ animation:hit .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes hit{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-7px,3px) rotate(-.6deg); }
  40%{ transform:translate(6px,-3px) rotate(.5deg); }
  60%{ transform:translate(-4px,2px); }
  80%{ transform:translate(3px,-1px); }
}

/* badges */
.badge{
  display:inline-block; width:fit-content;
  font-family:var(--mono); font-size:.63rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  padding:4px 9px; border:1px solid var(--red);
  color:#fff; background:var(--red);
}
.badge::before{ content:"● "; }
.badge.soon{
  background:transparent; color:var(--ash);
  border-color:var(--line-hot); border-style:dashed;
}
.badge.soon::before{ content:"○ "; color:var(--red); }

/* ============================================================
   TEXTE
   ============================================================ */
.prose{ max-width:700px; color:var(--ash); }
.prose strong{ color:var(--bone); }
.prose p+p{ margin-top:14px; }
.prose ul{ padding-left:0; list-style:none; }
.prose li{ padding-left:20px; position:relative; margin-bottom:7px; }
.prose li::before{ content:"▸"; position:absolute; left:0; color:var(--red); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-list{ list-style:none; padding:0; margin:0; font-family:var(--mono); }
.contact-list li{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line); padding:18px 12px;
  flex-wrap:wrap; gap:8px; position:relative;
  transition:background .08s, padding-left .12s var(--snap);
}
.contact-list li::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--red); transform:scaleY(0); transform-origin:bottom;
  transition:transform .12s var(--snap);
}
.contact-list li:hover{ background:var(--panel); padding-left:22px; }
.contact-list li:hover::before{ transform:scaleY(1); }
.contact-list .label{ color:var(--dim); text-transform:uppercase; font-size:.7rem; letter-spacing:.13em; }
.contact-list a{ font-size:1rem; }

/* ============================================================
   RADIO
   ============================================================ */
.radio-stage{ text-align:center; padding:30px 0 10px; }
.radio-word{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(3rem,13vw,9rem); line-height:.86; color:var(--bone); margin:0;
}
.radio-soon{
  font-family:var(--disp); text-transform:uppercase;
  font-size:clamp(1.6rem,6vw,3.4rem); line-height:1; margin:6px 0 0;
  color:var(--red);
  animation:pulse-soon 5s steps(1,end) infinite;
}
@keyframes pulse-soon{ 0%,90%{ opacity:1; } 91%,93%{ opacity:.15; } 94%,96%{ opacity:1; } 97%,98%{ opacity:.15; } 99%,100%{ opacity:1; } }

/* barres d'égaliseur */
.eq{ display:flex; align-items:flex-end; justify-content:center; gap:5px; height:76px; margin:38px 0 8px; }
.eq i{ width:6px; background:linear-gradient(180deg,var(--red-hot),var(--red-deep)); animation:eqb 1.1s steps(6,end) infinite; }
@keyframes eqb{ 0%,100%{ height:12%; } 50%{ height:100%; } }

/* ============================================================
   FORMULAIRES (radio + newsletter)
   ============================================================ */
.lk-form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.lk-form input[type=email],
.lk-form input[type=text],
.lk-form textarea{
  flex:1; min-width:230px;
  background:var(--ink-2); border:1px solid var(--line);
  color:var(--bone); font-family:var(--mono); font-size:.86rem;
  padding:14px 16px; outline:none; resize:vertical;
  transition:border-color .06s, box-shadow .06s, background .06s;
}
.lk-form input[type=email]::placeholder,
.lk-form input[type=text]::placeholder,
.lk-form textarea::placeholder{ color:var(--dim); }
.lk-form input[type=email]:focus,
.lk-form input[type=text]:focus,
.lk-form textarea:focus{
  border-color:var(--red); background:var(--panel);
  box-shadow:0 0 0 3px rgba(227,22,22,.16);
}
.lk-note{ font-family:var(--mono); font-size:.7rem; color:var(--dim); margin-top:12px; letter-spacing:.05em; }
.lk-ok{
  margin-top:16px; padding:16px; border:1px solid var(--red);
  background:rgba(227,22,22,.09); font-family:var(--mono); font-size:.84rem;
}
.lk-ok b{ color:var(--red-hot); letter-spacing:.14em; font-size:1.05rem; }

/* ============================================================
   POPUP NEWSLETTER
   ============================================================ */
#lk-pop{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(3,3,3,.9);
  opacity:0; visibility:hidden; transition:opacity .12s steps(3,end), visibility .12s;
}
#lk-pop.on{ opacity:1; visibility:visible; }
#lk-pop .box{
  position:relative; width:min(470px,100%);
  background:var(--panel); border:1px solid var(--red);
  padding:38px 32px 32px;
  box-shadow:0 0 0 1px rgba(227,22,22,.2), 0 34px 90px rgba(0,0,0,.85);
  transform:translate(0,8px); transition:transform .14s var(--ease);
}
#lk-pop.on .box{ transform:none; }
#lk-pop .box::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--red-deep),var(--red-hot),var(--red-deep));
}
#lk-pop h3{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:2rem; line-height:.95; margin:0 0 8px; color:var(--bone);
}
#lk-pop .tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--red-hot); margin-bottom:14px;
}
#lk-pop p{ color:var(--ash); font-size:.92rem; margin:0 0 18px; }
#lk-pop .x{
  position:absolute; top:10px; right:12px;
  background:none; border:none; color:var(--dim); cursor:pointer;
  font-family:var(--mono); font-size:1.2rem; line-height:1; padding:6px;
  transition:color .06s;
}
#lk-pop .x:hover{ color:var(--red-hot); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{
  padding:44px 0 70px; color:var(--dim);
  font-family:var(--mono); font-size:.74rem;
  border-top:1px solid var(--line);
}
footer.site .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer.site a{ color:var(--ash); }
footer.site a:hover{ color:var(--red-hot); }

/* ============================================================
   RÉVÉLATIONS AU SCROLL
   ============================================================ */
[data-rv]{ opacity:0; transform:translateY(8px); transition:opacity .16s steps(3,end), transform .16s var(--ease); }
[data-rv].in{ opacity:1; transform:none; }
[data-rv="l"]{ transform:translateX(-10px); }
[data-rv="l"].in{ transform:none; }
/* cartes : elles tombent comme un tampon (léger zoom, petit rebond) */
[data-rv="s"]{ transform:translateY(10px) scale(1.03);
  transition:opacity .18s steps(3,end), transform .34s cubic-bezier(.2,1.45,.35,1); }
[data-rv="s"].in{ transform:none; }
/* une fois arrivée, la carte retrouve son survol d'origine
   (sinon .in, plus loin dans le fichier, écrase le décalage du survol) */
.card[data-rv].fin{ transition:border-color .08s, transform .1s var(--ease), box-shadow .1s var(--ease); }
.card[data-rv].fin:hover{ transform:translate(-3px,-3px); }
/* Le texte reste lisible : un titre entièrement rogné n'intersecte jamais
   le viewport et empêche sa propre révélation. Seul le pinceau s'anime. */
[data-rv="t"]{ opacity:1; transform:none; clip-path:none; transition:none; }
[data-rv="t"].in{ clip-path:none; }
[data-rv="t"].fin{ clip-path:none; }
[data-rv="t"]::after{ transform:scaleX(0); transform-origin:left center;
  transition:transform .45s .38s cubic-bezier(.6,0,.2,1); }
[data-rv="t"].in::after{ transform:none; }

/* ============================================================
   TRANSITION DE PAGE
   ============================================================ */
#lk-wipe{
  position:fixed; inset:0; z-index:400; pointer-events:none;
  background:var(--red); transform:scaleY(0); transform-origin:bottom;
}
#lk-wipe.out{ transform:scaleY(1); transform-origin:bottom; transition:transform .22s var(--snap); }
#lk-wipe.in{ transform:scaleY(0); transform-origin:top; transition:transform .22s var(--snap); }
body{ animation:fade-in .18s steps(3,end) both; }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* ============================================================
   MASCOTTE + PROJECTILES
   ============================================================ */
/* ============================================================
   MASCOTTE — trois plans de profondeur
   Le dessin n'est jamais recoloré : son apparence d'origine prime.
   Seules la taille, l'ombre et la luminosité changent avec la
   distance, comme pour n'importe quel objet qui s'éloigne.
   ============================================================ */
#lk-whale{
  position:fixed; left:0; top:0; z-index:60;
  line-height:0;                       /* taille et point de pivot : posés par le script */
  will-change:transform; pointer-events:none;
  transition:filter .6s ease;
}
/* la toile de la marionnette ne capte rien : seule la « prise » (torse + tête) s'attrape */
#lk-whale canvas{ display:block; pointer-events:none; }
#lk-whale .lk-prise{ position:absolute; pointer-events:auto; cursor:grab; touch-action:none; user-select:none; }
#lk-whale.grabbed .lk-prise{ cursor:grabbing; }

/* au fond : derrière les cartes et les caissons, assombrie et floutée */
#lk-whale.far{
  z-index:3;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.85)) brightness(.58) saturate(.75) blur(.4px);
}
/* plan intermédiaire : devant les cartes, derrière le bandeau et le header */
#lk-whale.mid{
  z-index:5;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.8)) brightness(.82);
}
/* premier plan : devant tout le contenu, sauf le header et les popups */
#lk-whale.near{
  z-index:60;
  filter:drop-shadow(0 7px 11px rgba(0,0,0,.75));
}
#lk-whale.gone{ transition:opacity .34s, transform .34s cubic-bezier(.6,0,.9,.4); opacity:0; }

/* le matos qu'elle transporte : il suit son plan de profondeur,
   sinon un vinyle flotterait devant le contenu pendant qu'elle est au fond */
#lk-gear{
  position:fixed; left:0; top:0; z-index:59;
  transform-origin:center center;
  pointer-events:none; opacity:0; line-height:0;
  transition:opacity .3s; will-change:transform;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.7));
}
#lk-gear.far{ z-index:2; filter:brightness(.58) saturate(.75); }
#lk-gear.mid{ z-index:4; filter:brightness(.82); }
#lk-gear.near{ z-index:59; }

.lk-bubble{
  position:fixed; z-index:96; pointer-events:none;
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  background:var(--red); color:#fff; padding:6px 10px; white-space:nowrap;
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .2s, transform .35s var(--ease);
}
.lk-bubble.on{ opacity:1; transform:translate(-50%,-50%) translateY(-9px); }
.lk-bubble::after{
  content:""; position:absolute; left:50%; bottom:-5px; margin-left:-5px;
  border:5px solid transparent; border-top-color:var(--red); border-bottom:0;
}

.lk-shard{ position:fixed; left:0; top:0; z-index:94; pointer-events:none;
  font-family:var(--mono); font-weight:700; will-change:transform; }
.lk-bubble-dot{
  position:fixed; left:0; top:0; z-index:94; pointer-events:none;
  border-radius:50%; border:2px solid rgba(227,22,22,.75); background:rgba(227,22,22,.12);
  will-change:transform;
}
#lk-trail{ position:fixed; inset:0; z-index:2; pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  #lk-whale, #lk-trail{ display:none; }
  .mb, .stack, .cable, .wall-glow, .st-queue{ animation:none !important; }
  .bg-grain{ animation:none !important; }
}

/* ============================================================
   La mascotte ne doit JAMAIS bloquer un bouton ou un lien :
   seul le dessin lui-même capte le pointeur, pas son cadre.
   ============================================================ */

/* cartes produit entièrement cliquables */
.card.has-link{ cursor:pointer; }
.card-link{ color:inherit; }
.card-link:hover{ color:var(--red-hot); }
.card.has-link:hover .card-link{ color:var(--red-hot); }

/* ============================================================
   MUR DE SON — caissons, membranes, câbles
   ============================================================ */
.cab-box   { fill:#151211; stroke:#000; stroke-width:3.5; }
.cab-in    { fill:#1d1918; stroke:#3d2020; stroke-width:2.2; }
.cab-corner{ fill:#3d2020; stroke:#000; stroke-width:1.5; }
.cab-grip  { fill:#4d2828; }
.cab-ring  { fill:none; stroke:#6b2a2a; stroke-width:3.5; }
.cab-dust  { fill:#e31616; }
.cab-screw { fill:#5a2626; }
.cab-horn  { fill:#241f1e; stroke:#6b2a2a; stroke-width:2.8; }
.cab-horn-l{ stroke:#6b2a2a; stroke-width:2.2; }
.cab-tw    { fill:#241f1e; stroke:#6b2a2a; stroke-width:2.2; }
.cab-mesh  { fill:none; stroke:rgba(227,22,22,.14); stroke-width:1; stroke-dasharray:2 4; }

/* textures du revêtement : le gris neutre disparaît en hard-light,
   seuls les grains clairs et sombres ressortent sur le caisson */
.cab-tex{ fill:url(#lk-tolex); mix-blend-mode:hard-light; opacity:.75; pointer-events:none; }

/* tempo commun à tout le mur : un kick toutes les --tempo (~160 BPM) */
.wall-wrap{ --tempo:.375s; }
/* synchronisation totale : toutes les membranes battent ensemble */
.wall-wrap .mb{ animation-delay:0s !important; }

/* membranes : attaque sèche sur le kick, puis retour lent */
.mb{
  fill:#262120; stroke:#6b2a2a; stroke-width:3;
  transform-box:fill-box; transform-origin:center;
  animation:pump var(--tempo,.94s) cubic-bezier(.2,0,.3,1) infinite;
}
.cab-dust.mb{ fill:#e31616; stroke:none; }
.cab-tw.mb  { animation-duration:calc(var(--tempo,.94s) / 2); }
@keyframes pump{
  0%,100%{ transform:scale(1); }
  7%     { transform:scale(1.13); }
  28%    { transform:scale(.958); }
  56%    { transform:scale(1.008); }
}

/* les piles encaissent le même kick, avec un léger retard chacune */
.stack{
  transform-box:fill-box; transform-origin:bottom center;
  animation:rumble var(--tempo,.94s) ease-out infinite;
}
.stack:nth-of-type(2){ animation-delay:.03s; }
.stack:nth-of-type(3){ animation-delay:.06s; }
@keyframes rumble{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  7%     { transform:translate(calc(var(--sway,1) * 1.1px), -2.2px) rotate(calc(var(--sway,1) * .12deg)); }
  30%    { transform:translate(calc(var(--sway,1) * -.6px), .8px); }
  56%    { transform:translate(0, -.3px); }
}

/* halo rouge au sol : bat au même tempo que les membranes */
.wall-glow{
  fill:#8c0d0d; opacity:.18;
  filter:blur(18px);
  transform-box:fill-box; transform-origin:center;
  animation:wall-pulse var(--tempo,.375s) ease-out infinite;
}
@keyframes wall-pulse{
  0%,100%{ opacity:.14; transform:scaleY(1) scaleX(1); }
  7%     { opacity:.62; transform:scaleY(1.55) scaleX(1.14); }
  30%    { opacity:.28; transform:scaleY(1.1) scaleX(1.03); }
}

/* câbles qui pendouillent */
.cable{
  fill:none; stroke:#3d2020; stroke-width:5.5; stroke-linecap:round;
  transform-box:fill-box; transform-origin:top center;
  animation:cable-sway 3.4s ease-in-out infinite;
}
.cable.c2{ animation-duration:4.1s; animation-delay:-.7s; }
.cable.c3{ animation-duration:3.8s; animation-delay:-1.4s; }
.cable.c4{ animation-duration:4.4s; animation-delay:-.4s; }
.cable.c5{ animation-duration:3.1s; animation-delay:-2s; }
.cable.c6{ animation-duration:4.7s; animation-delay:-1.1s; }
@keyframes cable-sway{
  0%,100%{ transform:rotate(-1.1deg); }
  50%    { transform:rotate(1.4deg); }
}

/* sangles à cliquet lâches : bande orange sourde bordée de noir, couture, boucle en acier */
.st-bord  { fill:none; stroke:#1a0c06; stroke-width:10.4; stroke-linejoin:round; }
.st-band  { fill:none; stroke:#9a4a1d; stroke-width:8; stroke-linejoin:round; }
.st-stitch{ fill:none; stroke:#e3a56e; stroke-width:.9; stroke-dasharray:3 2.5; opacity:.65; }
/* les bouts libres pendouillent comme les câbles */
.st-queue { transform-box:fill-box; transform-origin:top center; animation:cable-sway 3.4s ease-in-out infinite; }
.st-hook  { fill:none; stroke:#8e959b; stroke-width:3; stroke-linecap:round; }
.rt-body  { fill:#5f656a; stroke:#0d0d0d; stroke-width:1.3; }
.rt-spool { fill:#8a9096; stroke:#1a1a1a; stroke-width:2.4; stroke-dasharray:1.6 1.6; }
.rt-bolt  { fill:#24272a; }
.rt-lever { fill:#a3a9af; stroke:#0d0d0d; stroke-width:1.2; stroke-linejoin:round; }
.rt-grip  { fill:#c41414; stroke:#000; stroke-width:1; }
.ratchet  { transform-box:fill-box; transform-origin:center; }
.wall-floor{ fill:#2a1414; }

/* le mur encaisse quand la mascotte lui rentre dedans */
.wall-wrap.boom .stack{ animation:boom .5s cubic-bezier(.36,.07,.19,.97); }
.wall-wrap.boom .ratchet{ animation:rattle .5s steps(6); }
.wall-wrap.boom .st-queue{ animation:rattle .6s ease-out; }
@keyframes rattle{
  0%,100%{ transform:rotate(0deg); }
  25%    { transform:rotate(-7deg); }
  50%    { transform:rotate(5deg); }
  75%    { transform:rotate(-3deg); }
}
@keyframes boom{
  0%,100%{ transform:translate(0,0); }
  20%    { transform:translate(-5px,3px) rotate(-.5deg); }
  50%    { transform:translate(4px,-3px) rotate(.4deg); }
  75%    { transform:translate(-2px,1px); }
}

@media (prefers-reduced-motion:reduce){
  .mb, .stack, .cable, .wall-glow, .st-queue, .ratchet{ animation:none !important; }
  #lk-whale, #lk-trail, #lk-gear{ display:none !important; }
  .platter, .tonearm{ animation:none !important; }
  .bg-grain{ animation:none !important; }
  .bg-grid, body, .logo .dot, .hero .kicker::before, .hero h1, .radio-word,
  .lk-glitch, .radio-soon, .eq i, .badge.b-hot{ animation:none !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; transition:none !important; clip-path:none !important; }
  [data-rv]::after{ transform:none !important; transition:none !important; }
  .hero .lk-tag-hero, .hero > .lk-fond{ translate:none !important; }
  .btn:hover, .card:hover, .art-link:hover, .art-link:hover .art-link-go{ transform:none !important; }
  #lk-wipe{ display:none !important; }
}

/* ============================================================
   COIN DJ (page Web Radio) — mur de son + platines côte à côte
   ============================================================ */
.wall-scene{
  display:flex; align-items:flex-end; justify-content:center;
  gap:28px; flex-wrap:nowrap;
}
.dj-booth{ position:relative; z-index:2; width:200px; flex:0 0 auto; }
.dj-booth svg{ display:block; width:100%; height:auto; }

.platter{
  fill:#1d1918; stroke:#3d2020; stroke-width:2.2;
  transform-box:fill-box; transform-origin:center;
  animation:spin-platter 1.8s linear infinite;
}
@keyframes spin-platter{ to{ transform:rotate(360deg); } }

.tonearm{
  stroke:#5a2626; stroke-width:3; stroke-linecap:round;
  transform-box:fill-box; transform-origin:left center;
  animation:tonearm-scratch 2.6s ease-in-out infinite;
}
@keyframes tonearm-scratch{
  0%,100%{ transform:rotate(0deg); }
  50%    { transform:rotate(-4deg); }
}

/* ============================================================
   BADGES PRODUIT — administrables
   Tout reste dans la famille rouge + blanc-os : on différencie
   par le remplissage et le contour, pas par un arc-en-ciel.
   ============================================================ */
.badge.b-promo,
.badge.b-best  { background:var(--red); border-color:var(--red); color:#fff; }
.badge.b-best  { box-shadow:2px 2px 0 var(--red-deep); }
.badge.b-hot   { background:var(--red-hot); border-color:var(--red-hot); color:#fff;
                 animation:badge-pulse 4s steps(1,end) infinite; }
@keyframes badge-pulse{ 0%,92%{ background:var(--red-hot); color:#fff; } 93%,96%{ background:var(--bone); color:var(--ink); } 97%,100%{ background:var(--red-hot); color:#fff; } }
.badge.b-free  { background:var(--bone); border-color:var(--bone); color:var(--ink); }
.badge.b-excl  { background:transparent; border-color:var(--bone); color:var(--bone); }
.badge.b-new   { background:transparent; border-color:var(--red); color:var(--red-hot); }
.badge.b-limited{ background:transparent; border-color:var(--red); color:var(--red-hot);
                  border-style:dashed; }
.badge.b-beta,
.badge.b-soon  { background:transparent; border-color:var(--line-hot); color:var(--ash);
                 border-style:dashed; }
.badge.b-live  { background:var(--red); border-color:var(--red); color:#fff; }

/* ============================================================
   PRIX SUR LES CARTES
   ============================================================ */
.price{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); margin:2px 0 4px !important;
}
.price-now{ font-size:1.15rem; font-weight:800; color:var(--bone); letter-spacing:.02em; }
.price-was{ font-size:.9rem; color:var(--dim); text-decoration:line-through; }
.price-off{
  font-size:.66rem; font-weight:800; letter-spacing:.1em;
  background:var(--red); color:#fff; padding:3px 7px;
}
.price-free{
  font-size:1.15rem; font-weight:800; letter-spacing:.06em;
  color:var(--bone); text-transform:uppercase;
}

/* ============================================================
   ACCUEIL — boutons du hero, liens "voir tout"
   ============================================================ */
.hero-cta{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;
}
.section-more{ margin-top:26px; }
.section-more a{
  font-family:var(--mono);
  font-size:.82rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  color:var(--red-hot);
  border-bottom:1px solid var(--line-hot); padding-bottom:3px;
}
.section-more a:hover{ color:var(--bone); border-bottom-color:var(--bone); }

/* ============================================================
   ARTISTES — grille du kollektif et page de liens
   Même vocabulaire que le reste : noir, rouge, mono, angles vifs.
   ============================================================ */

/* --- icônes de plateformes (SVG dessinés dans layout.php) --- */
.pf-ico{
  width:20px; height:20px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --- la photo : carrée, coin coupé, liseré rouge au survol --- */
.art-photo{
  width:74px; height:74px; flex:none; overflow:hidden;
  border:1px solid var(--line-hot); background:var(--panel-2);
  transition:border-color .08s;
}
.art-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.art-photo.empty{ display:flex; align-items:center; justify-content:center; }
.art-photo.empty span{
  font-family:var(--disp); font-size:2rem; line-height:1; color:var(--red);
}
.artist-card:hover .art-photo{ border-color:var(--red); }

/* --- carte d'un artiste dans la grille --- */
.artist-card .art-head{ display:flex; align-items:center; gap:16px; color:inherit; }
.artist-card .art-head:hover{ color:inherit; }
.artist-card .art-id{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.artist-card .art-id h3{ word-break:break-word; }
.artist-card:hover .art-id h3{ color:var(--red-hot); }
.artist-card .art-id .meta{
  font-family:var(--mono); font-size:.68rem; color:var(--dim);
  text-transform:uppercase; letter-spacing:.13em;
}

/* pastilles de liens sur la carte */
.art-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.art-chip{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--ink-2); color:var(--ash);
  transition:border-color .06s, color .06s, background .06s;
}
.art-chip:hover{ border-color:var(--red); color:#fff; background:var(--red); }

/* ------------------------------------------------------------
   PAGE D'UN ARTISTE — le bloc de liens
   ------------------------------------------------------------ */
.art-hero{ padding:44px 0 64px; }
.art-back{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 28px;
}
.art-back a{ color:var(--dim); }
.art-back a:hover{ color:var(--red-hot); }

.art-profile{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.art-photo.big{ width:158px; height:158px; border-color:var(--red); box-shadow:5px 5px 0 var(--red-deep); }
.art-photo.big.empty span{ font-size:4rem; }

.art-name{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.1rem,7vw,3.6rem); line-height:.98; letter-spacing:.01em;
  margin:6px 0 0; word-break:break-word;
}
.art-genre{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--red-hot); margin:0;
}
.art-genre::before{ content:"■ "; color:var(--red); }
.art-bio{ max-width:560px; color:var(--ash); font-size:.98rem; margin:6px 0 0; }
.art-bio p{ margin:0; }
.art-bio p + p{ margin-top:12px; }

/* les boutons de liens : pleine largeur, empilés, très cliquables */
.art-links{
  max-width:560px; margin:44px auto 0;
  display:flex; flex-direction:column; gap:12px;
}
.art-link{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; min-height:58px;
  border:1px solid var(--line-hot); background:var(--panel);
  color:var(--bone); font-family:var(--mono); font-size:.86rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .08s, color .08s, transform .08s var(--ease);
}
/* le rouge qui balaie le bouton, comme les .btn du site */
.art-link::before{
  content:""; position:absolute; inset:0; background:var(--red); z-index:0;
  transform:scaleX(0); transform-origin:left; transition:transform .14s var(--snap);
}
.art-link > *{ position:relative; z-index:1; }
.art-link:hover{
  color:#fff; border-color:var(--red); transform:translateX(3px);
}
.art-link:hover::before{ transform:scaleX(1); }
.art-link:active{ transform:translateX(1px); transition-duration:0s; }

.art-link-ico{ display:flex; align-items:center; justify-content:center; color:var(--red-hot); transition:color .08s; }
.art-link:hover .art-link-ico{ color:#fff; }
.art-link-ico .pf-ico{ width:22px; height:22px; }
.art-link-txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.art-link-go{ color:var(--dim); transition:color .08s, transform .1s var(--snap); }
.art-link:hover .art-link-go{ color:#fff; transform:translateX(3px); }

.art-empty{
  max-width:560px; margin:38px auto 0; text-align:center;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim);
}

/* --- mobile --- */
@media (max-width:560px){
  .art-photo.big{ width:124px; height:124px; }
  .art-photo.big.empty span{ font-size:3rem; }
  .art-link{ padding:15px 15px; font-size:.8rem; letter-spacing:.08em; }
  .artist-card .art-head{ gap:13px; }
  .art-photo{ width:64px; height:64px; }

  .wall-scene{ flex-direction:column; align-items:center; gap:18px; }
  .wall-wrap{ width:100%; max-width:320px; flex:0 0 auto; }
  .dj-booth{ width:160px; }
}

/* ============================================================
   REJOINS LE MOUVEMENT — bloc collectif renforcé
   ------------------------------------------------------------
   Bandeau plein cadre (trame diagonale + double filet rouge,
   même recette que .hp-bleed) derrière un contenu qui reste
   dans sa colonne : le collectif déborde, le texte non.
   Les deux liens passent en côte à côte et en plus gros —
   ce ne sont plus des liens de fiche artiste, ce sont les
   deux portes d'entrée du mouvement.
   ============================================================ */
/* ============================================================
   BANDEAUX PROMO (pack gratuit, offre Discord) — accroche rapide
   posée juste sous le hero : image + texte + bouton, ou texte seul.
   ============================================================ */
.promo-box{
  display:flex; flex-wrap:wrap; align-items:center; gap:28px;
  border:2px solid var(--line-hot); background:var(--panel);
  padding:26px 30px;
}
.promo-art{ display:block; flex:0 0 140px; width:140px; aspect-ratio:1/1; overflow:hidden; border:2px solid var(--line); }
.promo-art img{ display:block; width:100%; height:100%; object-fit:cover; }
.promo-copy{ flex:1 1 280px; min-width:0; }
.promo-copy h2{ margin:10px 0 8px; }
.promo-copy p{ margin:0 0 14px; color:var(--ash); }
.promo-code{ font-family:var(--mono); color:var(--bone); }
.promo-code strong{ color:var(--red-hot); letter-spacing:.06em; }
.promo-discord .promo-box{ border-color:var(--red); }

.community{
  position:relative;
  background-color:var(--panel);
  background-image:repeating-linear-gradient(135deg,
    rgba(242,239,233,.035) 0 2px, transparent 2px 10px);
  border-top:3px solid var(--red);
  border-bottom:3px solid var(--red);
}
.community-kicker{
  display:inline-block; font-family:var(--mono); color:var(--red-hot);
  text-transform:uppercase; letter-spacing:.2em; font-size:.72rem;
  margin:0 0 16px; padding:5px 11px;
  border:2px solid var(--line-hot); background:rgba(227,22,22,.07);
}
/* spécificité relevée (body[data-page] + 2 classes) pour passer devant
   la règle générique « 7. LIENS COMMUNAUTÉ » de la composition d'accueil,
   qui cible aussi .hp-links sur ce même bloc */
body[data-page="index"] .community .community-links{ margin:34px 0 0; max-width:640px; gap:14px; }
.community-links .art-link{
  min-height:72px; padding:19px 22px; font-size:.92rem; border-width:2px;
}
.community-links .art-link-ico .pf-ico{ width:26px; height:26px; }
@media (min-width:640px){
  body[data-page="index"] .community .community-links{ flex-direction:row; }
  .community-links .art-link{ flex:1; }
}

/* ============================================================
   LE PROCESS — la note passe en carte affiche, pas en paragraphe
   nu posé dans le bandeau. Même recette que .card (grain toner,
   coin rouge découpé), pour que le texte pèse autant que le
   cadre qui l'entoure. L'annotation Sherman vient se coller
   dessus après coup, à cheval sur le coin — un post-it, pas une
   illustration bien rangée.
   ============================================================ */
.process-note{
  position:relative; isolation:isolate;
  background:var(--panel); border:2px solid var(--line);
  padding:30px 30px 26px;
}
.process-note::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("images/tex-photocopie.webp") 0 0 / 512px 512px repeat;
  mix-blend-mode:soft-light; opacity:.85;
}
.process-note::after{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 26px 26px 0;
  border-color:transparent var(--line-hot) transparent transparent;
}
/* lettrine : la première lettre porte le paragraphe comme un
   tampon, pas comme un retrait de traitement de texte */
.process-note p::first-letter{
  font-family:var(--disp); font-weight:400; color:var(--red);
  font-size:2.5em; line-height:.78; float:left;
  margin:.04em .1em 0 -.02em;
}
/* l'annotation vient se coller sur le coin bas de la note */
.process .lk-annot{ position:relative; z-index:1; margin-top:-22px; }
@media (max-width:480px){
  .process .lk-annot{ margin-top:-14px; }
}

/* ============================================================
   ACCUEIL — COMPOSITION
   ------------------------------------------------------------
   Tout est porté par body[data-page="index"] : aucune autre page
   n'est atteinte. Le principe tient en quatre réglages combinés
   section par section — rythme vertical, colonne décalée, titre
   qui déborde, bandeau pleine largeur. Les colonnes restent
   alignées à gauche et la largeur de lecture ne change pas :
   c'est la page qui respire de travers, pas le texte.
   Sous 760px tout revient dans la colonne : un flyer ne se lit
   pas de travers sur un téléphone.
   ============================================================ */

/* --- 1. RYTHME VERTICAL : trois respirations, jamais la même deux
       fois de suite, pour casser la scansion régulière --- */
body[data-page="index"] .hp-sec        { padding:60px 0; }
body[data-page="index"] .hp-sec.hp-tight { padding:40px 0 46px; }
body[data-page="index"] .hp-sec.hp-tall  { padding:104px 0 90px; }
body[data-page="index"] .hp-sec.hp-bleed { padding:74px 0; }

/* --- 2. HERO : zigzag. Accroche à gauche, titre qui sort de la
       colonne, chapô repoussé à droite, boutons de retour à
       gauche. La diagonale fait le travail, rien ne bouge du
       contenu. --- */
body[data-page="index"] .hp-hero{ padding:58px 0 46px; border-bottom-width:2px; }
body[data-page="index"] .hp-hero h1{
  font-size:clamp(2.5rem,9.4vw,6rem); margin-bottom:26px;
}
@media (min-width:860px){
  body[data-page="index"] .hp-hero p.lead{ margin-left:auto; }
  body[data-page="index"] .hp-hero .hero-cta{ margin-top:38px; }
}

/* --- 3. TITRES QUI DÉBORDENT : le h2 (et le h1 du hero) sort de
       la colonne par la gauche, la barre rouge va chercher le
       bord. Le décalage est fixe et calculé pour ne jamais passer
       sous le bord de l'écran — pas de débordement subi. --- */
@media (min-width:760px){
  body[data-page="index"] .hp-out,
  body[data-page="index"] .hp-hero h1{ margin-left:-18px; }
}
@media (min-width:1160px){
  body[data-page="index"] .hp-out,
  body[data-page="index"] .hp-hero h1{ margin-left:-54px; }
}

/* --- 4. COLONNE DÉCALÉE : la section entière glisse vers la
       droite, la barre du titre file dans la gouttière. Le bord
       gauche de la page devient irrégulier d'une section à
       l'autre — c'est là que se joue l'asymétrie. --- */
@media (min-width:860px){
  body[data-page="index"] .hp-indent > .wrap{ padding-left:112px; }
  body[data-page="index"] .hp-indent > .wrap > h2{ margin-right:-26px; }
}

/* --- 5. BANDEAU PLEINE LARGEUR : le process sort de la grille,
       trame diagonale et double filet rouge. Le texte, lui, reste
       dans une largeur lisible et part à droite. --- */
body[data-page="index"] .hp-bleed{
  background-color:var(--panel);
  background-image:repeating-linear-gradient(135deg,
    rgba(242,239,233,.035) 0 2px, transparent 2px 10px);
  border-top:3px solid var(--red);
  border-bottom:3px solid var(--red);
}
/* mur de son : fond encore plus sombre, son enfonce davantage */
body[data-page="index"] .mur-son.hp-bleed{
  background-color:var(--ink-2);
  border-top-width:4px;
  border-bottom-width:4px;
}
/* mur de son : bords gauche et droit arrondis */
.mur-son .wall-wrap{
  border-radius:8px;
  overflow:hidden;
}
/* le chien du tekos marche en dehors du cadre : le temps de sa
   traversée, on ne rogne plus le mur (sinon il se fait couper) */
.mur-son .wall-wrap.avec-chien{
  overflow:visible;
}
body[data-page="index"] .hp-bleed > .wrap{
  max-width:none;
  padding-left:clamp(26px,6vw,116px); padding-right:clamp(26px,6vw,116px);
}
@media (min-width:860px){
  body[data-page="index"] .hp-bleed .prose{ max-width:720px; margin-left:auto; }
}

/* --- 6. CARTES DÉCALÉES : les releases ne s'alignent pas au
       cordeau. Décalage en `top` et non en `transform` : la
       révélation au scroll et le survol gardent le leur, et la
       hauteur des cartes ne bouge pas (les bandeaux d'achat
       restent alignés entre eux). --- */
@media (min-width:880px){
  body[data-page="index"] .hp-stagger .grid > *:nth-child(2){ top:30px; }
  body[data-page="index"] .hp-stagger .grid > *:nth-child(3){ top:12px; }
  /* le lien "voir tout" reprend la main sous les cartes décalées */
  body[data-page="index"] .hp-stagger .section-more{ margin-top:62px; }
}
/* une seule section renvoie son lien à droite : ça suffit à rompre
   la répétition des deux blocs de cartes */
@media (min-width:760px){
  body[data-page="index"] .hp-tall .section-more{ text-align:right; }
}

/* --- 7. LIENS COMMUNAUTÉ : décollés du centre, calés à gauche de
       leur colonne (elle-même déjà décalée). --- */
body[data-page="index"] .hp-links{ margin:34px auto 0 0; max-width:520px; }

/* ============================================================
   RESPONSIVE MOBILE
   ------------------------------------------------------------
   Rien ici ne touche au desktop : tout est rangé dans des
   max-width. Sur téléphone on ne rétrécit pas le flyer, on le
   recompose — une seule colonne, titres massifs, cibles
   tactiles de 44px, aucun décalage qui mange la largeur.
   ============================================================ */

/* --- <= 900px : tablette / petit portable --- */
@media (max-width:900px){
  /* le logo prend sa ligne, la navigation file dessous sur toute la largeur */
  header.site .wrap{ padding-top:12px; padding-bottom:12px; gap:8px; }
  nav.main{ width:100%; gap:2px; }
  nav.main a{ padding:11px 12px; }

  /* titres qui débordent : à cette largeur ils frôlent le bord, on les rentre */
  body[data-page="index"] .hp-out,
  body[data-page="index"] .hp-hero h1{ margin-left:0; }

  /* liens "voir tout" et pied de page : zones tactiles agrandies sans changer le trait */
  .section-more a{ display:inline-block; padding:14px 0 7px; }
  footer.site a{ display:inline-block; padding:13px 0; }

  section{ padding:60px 0; }
  .hero{ padding:64px 0 52px; }
}

/* --- <= 760px : téléphone grand format / tablette portrait --- */
@media (max-width:760px){
  /* HEADER — compact et collant : une ligne logo, une bande de nav
     qui défile au doigt (jamais la page), fondue vers la droite */
  header.site .wrap{ padding-top:10px; padding-bottom:0; gap:4px; }
  .logo{ font-size:1rem; padding:6px 0; }
  nav.main{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    margin:0 -26px; width:calc(100% + 52px); padding:0 44px 0 26px;
    border-top:1px solid var(--line);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  }
  nav.main::-webkit-scrollbar{ display:none; }
  nav.main a, nav.main summary{
    flex:none; white-space:nowrap;
    display:flex; align-items:center; min-height:44px;
    padding:0 12px; font-size:.72rem;
  }
  nav.main > :first-child{ margin-left:-12px; }
  nav.main a.active, nav.main summary.active{ color:#fff; }
  nav.main a.active::after{ bottom:0; height:3px; }

  /* le bandeau défilant coupait le panneau déroulant pour deux raisons :
     overflow-x:auto (clippe tout ce qui dépasse la bande) et surtout le
     mask-image du fondu droit (un masque force TOUT le sous-arbre, y
     compris .nav-drop en position:absolute, à rester dans la boîte de
     nav.main - testé et confirmé). On désactive donc les deux tant qu'un
     menu est ouvert. .nav-group reste position:relative (règle de base) :
     le panneau reste un petit menu ancré comme sur desktop, juste avec
     les tailles tactiles ci-dessus. */
  nav.main:has(.nav-group[open]){
    overflow:visible;
    -webkit-mask-image:none; mask-image:none;
  }

  /* HERO — pas de zigzag, tout calé à gauche, le titre porte la page */
  .hero, body[data-page="index"] .hp-hero{ padding:40px 0 44px; }
  .hero .kicker{ font-size:.64rem; letter-spacing:.18em; margin-bottom:18px; max-width:100%; }
  .hero h1, body[data-page="index"] .hp-hero h1{
    font-size:clamp(2.55rem,11.2vw,4.4rem); line-height:.92; margin-bottom:22px;
    overflow-wrap:break-word;
  }
  .hero p.lead{ font-size:1rem; line-height:1.6; }
  .hero .cta-row, .hero-cta{ margin-top:30px; gap:12px; }

  /* BOUTONS — cibles tactiles franches */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:48px; padding:12px 22px; text-align:center;
  }
  .rel-buy .btn{ min-height:46px; padding:10px 20px; }

  /* TICKER — plus serré, reste lisible */
  .ticker{ padding:8px 0; }
  .ticker span{ font-size:.66rem; letter-spacing:.18em; padding:0 16px; }

  /* SECTIONS — respirations resserrées, même alternance */
  section{ padding:52px 0; }
  body[data-page="index"] .hp-sec          { padding:48px 0; }
  body[data-page="index"] .hp-sec.hp-tight { padding:36px 0 42px; }
  body[data-page="index"] .hp-sec.hp-tall  { padding:60px 0 54px; }
  body[data-page="index"] .hp-sec.hp-bleed { padding:52px 0; }

  /* TITRES DE SECTION — plus gros qu'en réduction, barre rouge conservée */
  section h2{ font-size:clamp(2.1rem,10.4vw,2.9rem); line-height:.94; gap:14px; margin-bottom:16px; }
  section h2::after{ height:5px; min-width:28px; }
  section .section-sub{ margin-bottom:28px; }

  /* GRILLES */
  .grid{ gap:18px; }

  /* CARTES RELEASE — la pochette reste carrée et domine */
  .card.release h3{ font-size:clamp(1.6rem,7.4vw,2rem); }
  .rel-cat{ font-size:.62rem; }

  .section-more{ margin-top:22px; }

  /* MUR DE SON de l'accueil : pleine largeur, centré (la règle
     560px plus haut le bridait à 320px, calé à gauche). Ciblé via
     .mur-son car le mur est maintenant dans une section dédiée,
     plus un enfant direct de body. */
  .mur-son .wall-wrap{ max-width:none; width:100%; margin:0 auto; padding:0 10px; }

  /* FORMULAIRES — 16px pour éviter le zoom automatique d'iOS */
  .lk-form input[type=email],
  .lk-form input[type=text],
  .lk-form textarea{ font-size:16px; min-width:0; }

  /* FOOTER — empilé, liens tapables */
  footer.site{ padding:34px 0 44px; }
  footer.site .wrap{ flex-direction:column; gap:6px; }

  /* POPUP — bouton de fermeture tapable */
  #lk-pop .x{ top:4px; right:4px; width:44px; height:44px; padding:0; }
}

/* --- <= 640px : téléphone --- */
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  nav.main{ margin:0 -20px; width:calc(100% + 40px); padding-left:20px; }

  /* boutons du hero : empilés pleine largeur, le rouge d'abord */
  .hero .cta-row, .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero .cta-row .btn, .hero-cta .btn{ width:100%; }

  /* bandeau process : même gouttière que le reste */
  body[data-page="index"] .hp-bleed > .wrap{ padding-left:20px; padding-right:20px; }

  /* formulaires : le bouton passe sous le champ, pleine largeur */
  .lk-form .btn{ flex:1 1 100%; }

  .rel-body{ padding:18px 18px 0; }
  .rel-buy{ margin-left:-18px; margin-right:-18px; padding:14px 18px; }

  #lk-pop{ padding:16px; }
  #lk-pop .box{ padding:34px 20px 24px; }
  #lk-pop h3{ font-size:1.7rem; }
}

/* --- <= 480px : petit téléphone --- */
@media (max-width:480px){
  .wrap{ padding:0 16px; }
  nav.main{ margin:0 -16px; width:calc(100% + 32px); padding-left:16px; }
  body[data-page="index"] .hp-bleed > .wrap{ padding-left:16px; padding-right:16px; }

  .hero .kicker{ letter-spacing:.14em; padding:5px 9px; }
  section h2{ gap:10px; }
  .rel-buy .btn{ display:flex; }
  .hero-cta{ width:100%; }
  .hero-cta .btn{
    max-width:100%;
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:center;
  }
  /* Payhip injecte une règle content-box en !important après notre CSS.
     On garde le bouton dans la gouttière mobile sans toucher au paiement. */
  .hero-cta .payhip-buy-button{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .contact-list li{ padding:16px 4px; }
}

/* ============================================================
   SYSTÈME TYPO — familles Larsen autorisées
   ------------------------------------------------------------
   Bebas Neue : grands titres et cartes.
   Sedgwick Ave Display : tags, labels et annotations.
   Share Tech Mono : navigation, données et éléments techniques.
   Arial : texte courant lisible, tant que les fichiers Brothers et
   Larsen Kollektiv ne sont pas disponibles au format web.
   ============================================================ */

/* Bebas Neue — titres principaux */
.hero h1, section h2, .radio-word, .art-name{
  font-family:"Bebas Neue", var(--disp);
}

/* Sedgwick Ave Display — tags / labels (ECL-003, GABBER, TEKNO...) */
.rel-cat, .badge, .ticker span, .hero .kicker, #lk-pop .tag,
.art-genre, .artist-card .art-id .meta{
  font-family:"Sedgwick Ave Display", var(--mono);
}

/* Sedgwick Ave Display — annotations et signatures */
.logo, .lk-note, .card .meta, footer.site .wrap > span:first-child{
  font-family:"Sedgwick Ave Display", var(--mono);
}

body{ font-family:var(--sans); }
button, input, select, textarea{ font-family:inherit; }
.card h3, #lk-pop h3{ font-family:var(--disp); }

/* ============================================================
   ÉLÉMENTS GRAPHIQUES — découpés de la planche typo (images/)
   Fond déjà transparent. Collés de travers, comme un sticker.
   ============================================================ */
.lk-tag-hero{
  display:block; width:clamp(200px,42vw,440px); height:auto;
  margin:-26px 0 10px -8px; transform:rotate(-3deg);
  pointer-events:none; user-select:none;
}
.lk-signature{
  display:block; width:clamp(170px,30vw,280px); height:auto;
  margin:34px 0 0 auto; transform:rotate(-2deg);
  opacity:.9; pointer-events:none; user-select:none;
}
.lk-annot{
  display:block; width:clamp(120px,18vw,170px); height:auto;
  margin:18px 0 0 auto; transform:rotate(4deg);
  pointer-events:none; user-select:none;
}
@media (max-width:480px){
  .lk-tag-hero{ margin-top:-10px; }
  .lk-signature, .lk-annot{ margin-right:4px; }
}

/* ============================================================
   TOUCHES PLANCHE — le minimum tiré des planches typo :
   papier déchiré, coup de pinceau, étiquettes collées de travers.
   Rien de structurel : on retire ce bloc, le site redevient
   comme avant.
   ============================================================ */

/* bandeau rouge : bords de papier déchiré */
.ticker{ clip-path:polygon(0.0% 1.6px,2.8% 0.8px,5.6% 3.3px,8.3% 0.4px,11.1% 2.7px,13.9% 1.8px,16.7% 0.3px,19.4% 2.5px,22.2% 0.2px,25.0% 2.2px,27.8% 0.3px,30.6% 0.5px,33.3% 2.1px,36.1% 4.1px,38.9% 0.6px,41.7% 1.1px,44.4% 3.1px,47.2% 4.7px,50.0% 2.9px,52.8% 2.0px,55.6% 4.9px,58.3% 0.2px,61.1% 4.3px,63.9% 1.4px,66.7% 0.7px,69.4% 0.6px,72.2% 1.5px,75.0% 4.1px,77.8% 0.9px,80.6% 2.9px,83.3% 3.2px,86.1% 1.9px,88.9% 2.7px,91.7% 0.3px,94.4% 0.3px,97.2% 1.0px,100.0% 3.4px,100.0% calc(100% - 2.1px),97.2% calc(100% - 1.6px),94.4% calc(100% - 2.9px),91.7% calc(100% - 2.3px),88.9% calc(100% - 1.5px),86.1% calc(100% - 4.0px),83.3% calc(100% - 3.5px),80.6% calc(100% - 1.2px),77.8% calc(100% - 2.9px),75.0% calc(100% - 2.6px),72.2% calc(100% - 4.4px),69.4% calc(100% - 3.6px),66.7% calc(100% - 1.4px),63.9% calc(100% - 4.9px),61.1% calc(100% - 0.6px),58.3% calc(100% - 2.1px),55.6% calc(100% - 3.8px),52.8% calc(100% - 0.8px),50.0% calc(100% - 2.4px),47.2% calc(100% - 0.2px),44.4% calc(100% - 3.3px),41.7% calc(100% - 3.8px),38.9% calc(100% - 2.9px),36.1% calc(100% - 4.4px),33.3% calc(100% - 1.6px),30.6% calc(100% - 3.5px),27.8% calc(100% - 3.0px),25.0% calc(100% - 2.9px),22.2% calc(100% - 2.3px),19.4% calc(100% - 4.2px),16.7% calc(100% - 4.7px),13.9% calc(100% - 2.4px),11.1% calc(100% - 3.3px),8.3% calc(100% - 0.3px),5.6% calc(100% - 3.5px),2.8% calc(100% - 3.2px),0.0% calc(100% - 5.0px)); padding:11px 0; }

/* barre des titres de section : coup de pinceau, pas un rectangle */
section h2::after{
  height:9px;
  clip-path:polygon(0 45%,2% 10%,18% 30%,41% 0,63% 25%,82% 5%,100% 40%,99% 90%,77% 70%,52% 100%,30% 75%,9% 100%,1% 80%);
}

/* tags au marqueur : la police graffiti ne supporte ni l'espacement
   large ni le faux gras des anciennes étiquettes mono */
.rel-cat, .badge, .ticker span, .hero .kicker, #lk-pop .tag, .art-genre{
  font-weight:400; letter-spacing:.04em;
}
.rel-cat{ font-size:.86rem; }
.badge{ font-size:.8rem; }
.ticker span{ font-size:.98rem; }

/* étiquettes collées de travers, comme sur la planche */
.rel-cat{ transform:rotate(-2deg); transform-origin:left bottom; }
.card.release .badge{ transform:rotate(2deg); transform-origin:right top; }

/* ============================================================
   IMAGES DE FOND — emplacements derrière le texte (admin → Images)
   Vide = rien. Photo passée en noir et blanc contrasté, comme une
   photocopie de flyer, et fondue vers la gauche pour garder le
   texte lisible.
   Pas de z-index ici : les sections n'en ont pas (voir la mascotte
   plus haut). Le fond est positionné et passe avant le .wrap dans
   le HTML ; le .wrap, positionné lui aussi, se peint donc par-dessus.
   ============================================================ */
.lk-fond{
  position:absolute; inset:0; pointer-events:none;
  background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.3);
  opacity:.28;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.25) 0%, #000 65%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,.25) 0%, #000 65%);
}
.lk-fond ~ .wrap{ position:relative; }
/* parallaxe (--py posé par larsen-fx.js) : la photo et le tag restent en arrière */
.hero > .lk-fond{ translate:0 min(calc(var(--py,0px) * .3), 70px); }
.hero .lk-tag-hero{ translate:0 min(calc(var(--py,0px) * .2), 50px); }

/* ============================================================
   VRAIES TEXTURES — bitmaps générés localement (images/tex-*.webp)
   papier (fond global, plus haut), photocopie (cartes, haut de page,
   bandeau), béton (mur de son, pied de page), tolex (caissons, dans
   le SVG du mur). Tuiles raccordables en niveaux de gris neutres :
   soft-light / multiply les posent sur la couleur sans la changer.
   ============================================================ */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("images/tex-photocopie.webp") 0 0 / 512px 512px repeat;
  mix-blend-mode:soft-light; opacity:.9;
}
.hero > .wrap{ position:relative; }

/* bandeau rouge : le toner du copieur par-dessus, texte compris */
.ticker::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("images/tex-photocopie.webp") 0 0 / 512px 512px repeat;
  mix-blend-mode:multiply; opacity:.55;
}

/* mur de son : un pan de béton taché derrière les piles */
.wall-wrap::before{
  content:""; position:absolute; inset:-4% -3% 0; z-index:-1; pointer-events:none;
  background:url("images/tex-beton.webp") 0 0 / 512px 512px repeat;
  mix-blend-mode:soft-light; opacity:.9;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 70%, #000 35%, transparent 100%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 70%, #000 35%, transparent 100%);
}

footer.site::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("images/tex-beton.webp") 0 0 / 512px 512px repeat;
  mix-blend-mode:soft-light; opacity:.8;
}
footer.site .wrap{ position:relative; }

/* ============================================================
   VISUELS SCOTCHÉS — images nettes réglées dans l'admin
   (onglet Images, type « Visuel »), affichées par lk_visuel().
   Tirage papier légèrement de travers, deux bandes de scotch,
   grain de photocopie par-dessus. Rien n'est affiché si
   l'emplacement est vide.
   ============================================================ */
.lk-visuel{
  position:relative; margin:0; padding:10px 10px 14px;
  background:var(--bone); box-shadow:6px 8px 0 rgba(0,0,0,.55);
  rotate:-1.2deg;
}
.lk-visuel img{ display:block; width:100%; height:auto; filter:contrast(1.08) saturate(.9); }
/* toner du copieur sur la photo */
.lk-visuel::after{
  content:""; position:absolute; inset:10px 10px 14px; pointer-events:none;
  background:url("images/tex-photocopie.webp") 0 0 / 512px 512px repeat;
  mix-blend-mode:multiply; opacity:.35;
}
/* bande de scotch en haut, un peu de travers */
.lk-visuel::before{
  content:""; position:absolute; z-index:1; top:-11px; left:50%; width:96px; height:24px;
  translate:-50% 0; rotate:3deg;
  background:rgba(236,226,196,.62); border-left:1px dashed rgba(0,0,0,.18); border-right:1px dashed rgba(0,0,0,.18);
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
/* bannière de l'accueil : pleine largeur, presque droite */
.lk-visuel.banniere{ rotate:-.4deg; max-width:1100px; margin:0 auto; }
.lk-visuel.banniere img{ max-height:420px; object-fit:cover; }
/* planches des graphistes : galerie de tirages punaisés en vrac */
.planches{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:42px 32px; padding-top:14px; }
.lk-visuel.planche:nth-child(3n+2){ rotate:1.6deg; }
.lk-visuel.planche:nth-child(3n){ rotate:-.5deg; }
.lk-visuel.planche img{ aspect-ratio:4 / 5; object-fit:cover; }
.lk-visuel.planche{ transition:rotate .25s var(--ease), scale .25s var(--ease); }
.lk-visuel.planche:hover{ rotate:0deg; scale:1.03; z-index:2; }
/* page radio : le visuel à côté du lecteur / du formulaire */
.lk-duo{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 340px); gap:40px; align-items:center; }
.lk-visuel.cote{ rotate:2deg; }
@media (max-width:760px){
  .lk-duo{ grid-template-columns:1fr; }
  .lk-visuel.cote{ max-width:340px; }
}
@media (prefers-reduced-motion:reduce){
  .lk-visuel.planche{ transition:none; }
}

/* ============================================================
   SECRETS — easter eggs et événements rares (voir larsen-fx.js, section 10)
   Rien n'est signalé : pas de curseur main, pas d'indice visuel.
   ============================================================ */
.wall{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.hero .lk-tag-hero{ pointer-events:auto; -webkit-tap-highlight-color:transparent; }

/* toast « secret trouvé » */
#lk-toast{
  position:fixed; left:50%; bottom:22px; z-index:420; max-width:calc(100vw - 32px);
  padding:10px 16px; background:#0b0a0a; border:1px solid var(--red); box-shadow:4px 4px 0 var(--red-deep);
  font-family:var(--mono); color:var(--bone); text-align:center; line-height:1.35;
  transform:translate(-50%, 160%); opacity:0; transition:transform .35s var(--ease), opacity .35s;
  pointer-events:none;
}
#lk-toast.on{ transform:translate(-50%, 0); opacity:1; }
#lk-toast b{ display:block; font-weight:400; color:var(--red-hot); }
#lk-toast span{ display:block; font-size:.8em; color:var(--ash); }

/* HP : il pompe sous les clics, chauffe, puis explose */
.lk-cab.tape .mb{ animation:hp-tape .28s cubic-bezier(.2,0,.3,1); }
@keyframes hp-tape{
  0%,100%{ transform:scale(1); }
  25%    { transform:scale(1.22); }
  60%    { transform:scale(.94); }
}
.lk-cab.chauffe .mb{ stroke:var(--red-hot); }
.lk-cab.chauffe{ transform-box:fill-box; transform-origin:center; animation:hp-tremble .12s steps(2) infinite; }
@keyframes hp-tremble{
  0%,100%{ transform:translate(0,0); }
  50%    { transform:translate(1.2px,-.8px); }
}
.lk-cab.mort .mb{ visibility:hidden; animation:none; }
.hp-trou{ fill:#030202; stroke:#3a1a12; stroke-width:1.6; stroke-linejoin:bevel; }
.hp-flash{ fill:#fff1c2; transform-box:fill-box; transform-origin:center; animation:hp-flash .45s ease-out forwards; }
@keyframes hp-flash{
  0%  { opacity:.95; transform:scale(.4); }
  100%{ opacity:0;   transform:scale(1.7); }
}
.hp-etin{ stroke:#ffcf5a; stroke-width:2; stroke-linecap:round; animation:hp-etin .7s ease-out forwards; }
@keyframes hp-etin{ to{ transform:translate(var(--dx),var(--dy)); opacity:0; } }
.hp-fumee circle{
  fill:#241f1d; opacity:0; transform-box:fill-box; transform-origin:center;
  animation:hp-fumee 3.3s ease-out infinite;
}
.hp-fumee.leger{ opacity:.4; transition:opacity 3s; }
@keyframes hp-fumee{
  0%  { opacity:.8; transform:translate(0,0) scale(.6); }
  100%{ opacity:0;  transform:translate(12px,-95px) scale(2.4); }
}

/* cliquet qui claque */
.ratchet.clac{ animation:rattle .35s steps(5); }

/* larsen : clic maintenu, les membranes s'affolent */
.wall-wrap.larsen .mb{ animation-duration:.11s; }
.wall-wrap.larsen .stack{ animation:hp-tremble .09s steps(2) infinite; }
.lk-tampon{
  position:absolute; left:50%; top:38%; z-index:5; pointer-events:none;
  padding:4px 14px; border:3px solid var(--red-hot); color:var(--red-hot);
  font-family:var(--disp); font-size:clamp(28px,6vw,64px); line-height:1; letter-spacing:.04em;
  background:rgba(5,5,5,.55); transform:translate(-50%,-50%) rotate(-8deg);
  animation:lk-tampon 1.9s var(--ease) forwards;
}
@keyframes lk-tampon{
  0%  { opacity:0; transform:translate(-50%,-50%) rotate(-8deg) scale(1.8); }
  12% { opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scale(1); }
  80% { opacity:1; }
  100%{ opacity:0; }
}

/* mot « larsen » tapé : les piles sautent, le bandeau s'emballe */
.wall-wrap.saute .stack{ animation:lk-saute .6s cubic-bezier(.3,0,.3,1); }
@keyframes lk-saute{
  0%,100%{ transform:translateY(0); }
  30%    { transform:translateY(-14px); }
  60%    { transform:translateY(2px) scaleY(.98); }
}
.ticker.vite .ticker-track{ animation-duration:5s; }

/* mur en pause (keufs, saut d'aiguille) */
.wall-wrap.pause .mb, .wall-wrap.pause .stack, .wall-wrap.pause .cable,
.wall-wrap.pause .st-queue, .wall-wrap.pause .wall-glow,
body.lk-keufs .platter, body.lk-keufs .tonearm, body.lk-keufs .ticker-track{ animation-play-state:paused !important; }

/* tag du hero : coups de bombe, puis coulures */
.hero .lk-tag-hero.pschit{ animation:lk-pschit .3s steps(3); }
@keyframes lk-pschit{ 50%{ transform:rotate(-1deg) scale(1.03); } }
.lk-coulures{
  position:absolute; pointer-events:none; transform:rotate(-3deg);
  translate:0 min(calc(var(--py,0px) * .2), 50px);
}
.lk-coulures i{
  position:absolute; width:6px; height:0; margin-left:-3px;
  background:var(--red); border-radius:0 0 3px 3px;
  animation:lk-coule 2.8s cubic-bezier(.4,0,.6,1) forwards;
}
.lk-coulures i::after{
  content:""; position:absolute; left:-1.5px; bottom:-4px;
  width:9px; height:9px; border-radius:50%; background:inherit;
}
@keyframes lk-coule{ to{ height:var(--h); } }

/* logo de l'entête : 3 clics rapides, courte surtension */
header.site .logo.surtension .dot{ animation:lk-surtension .5s steps(3); }
@keyframes lk-surtension{
  0%,100%{ color:var(--red); text-shadow:none; }
  50%    { color:#fff; text-shadow:0 0 10px var(--red-hot), 0 0 22px var(--red-hot); }
}

/* coin DJ : scratch et saut d'aiguille */
.platter.scratch{ animation:lk-scratch .5s ease-in-out; }
@keyframes lk-scratch{
  0%  { transform:rotate(0deg); }
  35% { transform:rotate(-140deg); }
  70% { transform:rotate(40deg); }
  100%{ transform:rotate(0deg); }
}
.tonearm.saute{ animation:lk-saute-bras .4s steps(4); }
@keyframes lk-saute-bras{
  0%,100%{ transform:rotate(0deg); }
  30%    { transform:rotate(-9deg); }
  60%    { transform:rotate(3deg); }
}
.dj-booth.secoue{ animation:boom .4s cubic-bezier(.36,.07,.19,.97); }

/* code Konami : mode teuf (lasers et halo doux, pas de stroboscope) */
#lk-lasers{ position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden; mix-blend-mode:screen; }
#lk-lasers b{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 100%, rgba(227,22,22,.32), transparent 65%);
  animation:lk-halo .47s ease-out infinite;
}
@keyframes lk-halo{ 0%{ opacity:.9; } 100%{ opacity:.35; } }
#lk-lasers i{
  position:absolute; left:50%; bottom:-10px; width:2px; height:140vh;
  background:linear-gradient(to top, rgba(255,41,41,.95), rgba(255,41,41,0));
  box-shadow:0 0 8px 1px rgba(255,41,41,.55);
  transform-origin:bottom center; transform:rotate(var(--a));
  animation:lk-laser 3.2s ease-in-out infinite alternate;
}
@keyframes lk-laser{
  from{ transform:rotate(calc(var(--a) - 18deg)); }
  to  { transform:rotate(calc(var(--a) + 18deg)); }
}
body.lk-teuf .ticker-track{ animation-duration:9s; }

/* les keufs : gyrophare bleu/rouge doux, le son se coupe */
#lk-gyro{ position:fixed; inset:0; z-index:150; pointer-events:none; transition:opacity 1.2s; }
#lk-gyro::before, #lk-gyro::after{
  content:""; position:absolute; inset:0;
  animation:lk-gyro 1.1s ease-in-out infinite alternate;
}
#lk-gyro::before{ background:radial-gradient(circle at 0 0, rgba(40,90,255,.34), transparent 55%); }
#lk-gyro::after { background:radial-gradient(circle at 100% 0, rgba(227,22,22,.3), transparent 55%); animation-direction:alternate-reverse; }
@keyframes lk-gyro{ from{ opacity:.15; } to{ opacity:1; } }
#lk-gyro span{
  position:absolute; left:50%; top:18px; z-index:1; transform:translateX(-50%);
  max-width:calc(100vw - 32px); padding:8px 14px;
  background:rgba(5,5,5,.85); border:1px solid #3b63ff; color:var(--bone);
  font-family:var(--mono); font-size:14px; text-align:center;
}
#lk-gyro.fin{ opacity:0; transition-delay:.4s; }

/* le chien du tekos traverse devant le mur */
#lk-chien{ position:absolute; left:0; right:0; height:110px; overflow:hidden; pointer-events:none; z-index:4; }
#lk-chien.sur-mur{ bottom:6%; }
#lk-chien.en-bas{ position:fixed; bottom:0; z-index:95; }
.ch-corps{
  position:absolute; bottom:0; left:-160px; width:136px; pointer-events:auto;
  display:block; padding:0; margin:0; border:0; background:none; color:inherit; line-height:1; cursor:pointer;
  animation:lk-promene 14s linear forwards;
}
.ch-corps.wouf,.ch-corps:focus-visible,.ch-corps:hover{ animation-play-state:paused; }
.ch-corps:focus-visible{ outline:2px dashed var(--bone); outline-offset:-2px; border-radius:8px; }
.ch-corps svg{ display:block; width:100%; height:auto; overflow:visible; }
@keyframes lk-promene{ to{ left:100%; } }
.ch-poil{ fill:#b88c5e; stroke:#38281f; stroke-width:1.7; stroke-linejoin:round; }
.ch-selle{ fill:#604b3b; }
.ch-poitrail,.ch-museau{ fill:#ead9b9; }
.ch-oreille{ fill:#644936; stroke:#38281f; stroke-width:1.6; stroke-linejoin:round; }
.ch-truffe{ fill:#0d0d0d; }
.ch-bandana{ fill:var(--red); stroke:#0d0d0d; stroke-width:1.2; }
.ch-queue{ fill:#b88c5e; stroke:#38281f; stroke-width:1.6; stroke-linejoin:round; transform-box:fill-box; transform-origin:bottom right; animation:lk-queue .4s ease-in-out infinite alternate; }
.ch-patte{ fill:#c59c6c; stroke:#38281f; stroke-width:1.5; stroke-linejoin:round; transform-box:fill-box; transform-origin:top center; animation:lk-patte .42s ease-in-out infinite alternate; }
.ch-patte.ch-loin{ fill:#816044; }
.ch-patte.p2{ animation-direction:alternate-reverse; }
.ch-corps.wouf .ch-patte,.ch-corps:hover .ch-patte,.ch-corps:focus-visible .ch-patte{ animation-play-state:paused; }
@keyframes lk-queue{ from{ transform:rotate(-14deg); } to{ transform:rotate(12deg); } }
@keyframes lk-patte{ from{ transform:rotate(-16deg); } to{ transform:rotate(16deg); } }
.ch-corps em{
  position:absolute; right:-18px; top:-6px; padding:1px 7px;
  background:var(--bone); color:#0d0d0d; font-family:var(--disp); font-style:normal; font-size:14px;
  border:2px solid #0d0d0d; transform:rotate(6deg) scale(0); transition:transform .15s var(--ease);
}
.ch-corps.wouf em{ transform:rotate(6deg) scale(1); }

/* Récompense consultable après la découverte des quatorze secrets. */
.lk-reward-link{ flex-shrink:0; }
.lk-reward-earned{ flex-wrap:wrap; }
#lk-reward{ width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; margin:auto; padding:28px; border:2px solid var(--red); background:#111; color:var(--bone); box-shadow:8px 8px 0 #650909; font:16px/1.6 Arial,sans-serif; }
#lk-reward::backdrop{ background:rgba(0,0,0,.82); }
#lk-reward h2{ font-size:clamp(25px,6vw,42px); margin:18px 0; }
#lk-reward p{ line-height:1.7; }
#lk-reward form{ display:flex; justify-content:flex-end; margin:0 0 20px; }
.lk-reward-close{ padding:8px; border:1px solid #777; background:none; color:var(--bone); font:inherit; cursor:pointer; }
#lk-reward label{ display:block; margin-top:20px; font:14px/1.5 Arial,sans-serif; }
#lk-reward [hidden]{ display:none !important; }
#lk-reward-code{ display:block; box-sizing:border-box; width:100%; margin:10px 0 18px; padding:14px; border:1px dashed var(--red); border-radius:0; background:#1b1414; color:#fff; font:700 clamp(16px,4vw,24px)/1.5 "Share Tech Mono",monospace; text-align:center; }
.lk-reward-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.lk-reward-actions .btn{ flex:1 1 180px; }
.lk-reward-status{ min-height:24px; font-size:14px; }
@media(max-width:600px){ .footer-manifest.lk-reward-earned{ align-items:stretch; } #lk-reward{ padding:20px; } }

/* flyer qui tombe du ciel */
#lk-flyer{ position:fixed; top:0; z-index:120; width:78px; cursor:pointer; animation:lk-chute 12s linear forwards; }
@keyframes lk-chute{
  from{ transform:translateY(-140px); }
  to  { transform:translateY(calc(100vh + 20px)); }
}
.fl-mini{
  padding:9px 6px; background:#e9e3d6; color:#0d0d0d; text-align:center;
  box-shadow:2px 3px 0 rgba(0,0,0,.5); font-family:var(--disp); line-height:1.1;
  animation:lk-balance 2.3s ease-in-out infinite alternate;
}
@keyframes lk-balance{
  from{ transform:translateX(-24px) rotate(-18deg); }
  to  { transform:translateX(24px) rotate(16deg); }
}
.fl-mini b, .fl-papier b{ display:block; font-weight:400; color:var(--red-deep); }
.fl-mini b{ font-size:15px; }
.fl-mini i, .fl-mini small{ display:block; font-style:normal; font-size:9px; }
#lk-flyer-grand{
  position:fixed; inset:0; z-index:410; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.72); cursor:pointer;
}
.fl-papier{
  width:min(340px, 100%); padding:28px 22px; background:#e9e3d6; color:#0d0d0d; text-align:center;
  font-family:var(--disp); line-height:1.25; transform:rotate(-2deg);
  box-shadow:8px 8px 0 var(--red-deep); animation:lk-ouvre .35s var(--ease);
}
@keyframes lk-ouvre{ from{ transform:rotate(-14deg) scale(.3); opacity:0; } }
.fl-papier b{ font-size:34px; line-height:1; }
.fl-papier i{ display:block; font-style:normal; letter-spacing:.3em; margin:4px 0 16px; }
.fl-papier p{ margin:0 0 6px; }
.fl-papier small{ display:block; margin-top:16px; font-size:12px; }

@media (prefers-reduced-motion:reduce){
  .lk-cab.tape .mb, .lk-cab.chauffe, .wall-wrap.larsen .mb, .wall-wrap.larsen .stack,
  .wall-wrap.saute .stack, .ratchet.clac, .platter.scratch, .tonearm.saute, .dj-booth.secoue,
  .hero .lk-tag-hero.pschit, .lk-tampon, header.site .logo.surtension .dot{ animation:none !important; }
  #lk-lasers, .hp-fumee{ display:none !important; }
  .lk-coulures i{ animation:none; height:var(--h); }
  #lk-toast{ transition:none; }
  .ch-corps{ animation:none; left:calc(50% - 68px); }
  .ch-patte,.ch-queue{ animation:none; }
}