/*
Theme Name: Maquina
Theme URI: https://maquina.agency
Author: Joachim Marie Tardon
Description: Thème sur-mesure de Maquina Agency (booking / production / diffusion — musiques électroniques). Cloné à l'identique depuis la version Webflow, rendu éditable via CMS.
Version: 1.8.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: maquina
*/

/* ============================= FONTS ============================= */
@font-face{
  font-family:"Dela Gothic One";
  src:url('assets/fonts/DelaGothicOne-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Good Times";
  src:url('assets/fonts/GoodTimesRg-Regular.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ============================= TOKENS ============================= */
:root{
  --bg:#ffffff;
  --ink:#0b0b0b;
  --ui:#f4efe6;
  --gold:#C9A96E;
  --font-display:"Dela Gothic One","Arial Narrow",sans-serif;
  --font-ui:"Good Times",sans-serif;
  --font-home:"Bebas Neue",sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

/* Base = pages internes (fond sombre) ; la home surcharge plus bas */
html,body{
  width:100%;
  min-height:100%;
  background:var(--ink);
  font-family:var(--font-display);
  overflow-x:hidden;
  color:var(--ui);
}

/* ============================= NAV / CHROME ============================= */
nav.mq-nav{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; padding:28px 48px;
}
/* Exclusion sur les liens du haut uniquement (pas sur le panneau déroulant). */
.mq-nav .nav-links > li > a,.mq-nav .nav-hamburger{mix-blend-mode:exclusion;}
.mq-nav .nav-links{display:flex; gap:48px; list-style:none;}
.mq-nav .nav-links a,.mq-nav .nav-hamburger{
  color:var(--ui); text-decoration:none; font-family:var(--font-ui);
  font-size:15px; letter-spacing:.1em; text-transform:uppercase;
  transition:opacity .3s ease;
}
.mq-nav .nav-links a:hover{opacity:.6;}
.mq-nav .nav-hamburger{font-size:24px; cursor:pointer; display:none;}
/* Sous-menu déroulant (ex. onglet « Music ») */
.mq-nav .nav-links li{position:relative;}
.mq-nav .nav-links .menu-item-has-children > a{cursor:default;}
.mq-nav .nav-links .sub-menu{position:absolute; top:100%; left:-16px; min-width:236px; margin:0; padding:12px 0; list-style:none; display:flex; flex-direction:column; background:#101012; border:1px solid rgba(244,239,230,.15); border-radius:12px; box-shadow:0 22px 46px rgba(0,0,0,.6); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s ease, transform .22s ease; z-index:60;}
.mq-nav .nav-links li:hover > .sub-menu{opacity:1; visibility:visible; transform:translateY(0);}
.mq-nav .nav-links .sub-menu a{display:block; padding:10px 26px; white-space:nowrap; color:var(--ui); font-family:var(--font-ui); font-size:14px; letter-spacing:.1em; text-transform:uppercase; opacity:.72; text-decoration:none; transition:opacity .2s ease, padding .2s ease;}
.mq-nav .nav-links .sub-menu a:hover{opacity:1; padding-left:32px;}

/* Vinyle (logo animé) */
.vinyl-wrap{
  position:fixed; top:14px; right:28px; z-index:40; width:88px; height:88px;
  display:block; transition:transform .3s cubic-bezier(.25,1,.5,1);
}
.vinyl{width:100%; height:100%; display:block; animation:vinyl-spin 5s linear infinite; transform-origin:50% 50%;}
@keyframes vinyl-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.vinyl-wrap:hover{transform:scale(1.08);}
.vinyl-wrap:hover .vinyl{animation-duration:1.5s;}

/* Menu mobile plein écran */
.mobile-menu-overlay{
  position:fixed; inset:0; background:var(--ink); z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s ease; mix-blend-mode:normal;
}
.mobile-menu-overlay.is-open{opacity:1; pointer-events:auto;}
.mobile-menu-close{position:absolute; top:24px; left:20px; font-size:32px; color:var(--ui); cursor:pointer; font-family:sans-serif; line-height:1; padding:10px; transition:opacity .3s;}
.mobile-menu-close:hover{opacity:.6;}
.mobile-menu-links{list-style:none; text-align:center; display:flex; flex-direction:column; gap:48px; align-items:center;}
.mobile-menu-links li{width:100%;}
.mobile-menu-links a{color:var(--ui); text-decoration:none; font-family:var(--font-ui); font-size:clamp(20px,6vw,36px); text-transform:uppercase; letter-spacing:.08em; transition:opacity .3s ease;}
.mobile-menu-links a:hover{opacity:.5;}

/* Footer partagé */
footer.mq-footer{
  position:relative; z-index:30; padding:20px 48px;
  display:flex; justify-content:space-between; align-items:flex-end; background:var(--ink);
}
footer.mq-footer span{color:var(--ui); font-family:var(--font-ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.72;}
/* Crédit dev — effet glitch rétro + aberration chromatique au survol. */
.footer-credit{color:var(--ui); font-family:var(--font-ui); font-size:9px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; opacity:.35; padding:6px 12px; transition:opacity .3s ease; border:1px solid transparent; margin-bottom:-2px; order:3; position:relative; display:inline-block;}
.footer-credit:hover{opacity:1; animation:glitch .4s steps(2) infinite;}
.footer-credit:hover::before,
.footer-credit:hover::after{content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; padding:6px 12px; pointer-events:none;}
.footer-credit:hover::before{color:#ff00ff; transform:translate(-2px,-1px); mix-blend-mode:screen; animation:glitch-1 .3s steps(2) infinite;}
.footer-credit:hover::after{color:#00ffff; transform:translate(2px,1px); mix-blend-mode:screen; animation:glitch-2 .3s steps(2) infinite;}
@keyframes glitch{0%,100%{transform:translate(0);}20%{transform:translate(-1px,1px);}40%{transform:translate(1px,-1px);}60%{transform:translate(-1px,-1px);}80%{transform:translate(1px,1px);}}
@keyframes glitch-1{0%,100%{transform:translate(-2px,-1px);}50%{transform:translate(-3px,1px);}}
@keyframes glitch-2{0%,100%{transform:translate(2px,1px);}50%{transform:translate(3px,-1px);}}

/* ============================= HOMEPAGE (ROSTER) ============================= */
/* Fidèle à l'original Webflow. Le fond blanc est peint par .bg-layer (fixed,
   plein écran) ; les noms sont en crème sous mix-blend-mode:exclusion sur le
   <main>. Sur fond blanc ils paraissent noirs ; au survol la photo de l'artiste
   remplit le fond et l'exclusion inverse les couleurs (effet "reverse"). */
body.home{background:var(--bg); font-family:var(--font-display); overflow:hidden; color:var(--ink); cursor:auto;}
body.home #cursor{display:none;}                 /* pas de curseur custom dans l'original */
.bg-layer{position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--bg);}
.bg-img{position:absolute; inset:0; background-size:cover; background-position:center 20%; opacity:0; transform:scale(1.02); transition:opacity .3s ease, transform .9s ease;}
.bg-img.active{opacity:1; transform:scale(1);}
.bg-overlay{display:none;}                        /* pas d'overlay sombre dans l'original */
.home main{position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:112px 48px 72px; mix-blend-mode:exclusion;}
.artist-list{list-style:none; text-align:center;}
.artist-item{position:relative; padding:0;}
.artist-name{display:inline-block; position:relative; color:var(--ui); font-family:var(--font-display); font-size:clamp(40px,9.8vh,160px); line-height:.85; letter-spacing:0; text-transform:uppercase; text-decoration:none; transition:opacity .25s ease, transform .25s ease;}
body.home.hovering .artist-item:not(.is-active) .artist-name{opacity:.45;}
.artist-item.is-active .artist-name{opacity:1; transform:scale(1.02);}
.scroll-hint{position:fixed; right:48px; top:50%; transform:translateY(-50%); z-index:30; writing-mode:vertical-rl; font-family:var(--font-ui); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ui); opacity:.58;}
/* Footer de la home : fixé en bas (sinon, main étant en position:fixed, le
   footer relatif remonte en haut et recouvre le menu). Fond blanc -> on utilise
   la variante claire : texte foncé, et le crédit se remplit en noir au survol
   (effet d'origine, propre — pas d'exclusion ici qui casserait le remplissage). */
body.home footer.mq-footer{position:fixed; bottom:0; left:0; right:0; z-index:30; background:transparent;}
body.home footer.mq-footer span{color:var(--ink);}
/* Home = fond blanc : texte du crédit foncé pour être lisible, et les fantômes
   glitch passent en "multiply" (screen serait invisible sur blanc ; multiply
   conserve le magenta/cyan). L'effet reste identique sur les pages sombres. */
body.home .footer-credit{color:var(--ink);}
body.home .footer-credit:hover::before,
body.home .footer-credit:hover::after{mix-blend-mode:multiply;}

/* ============================= PAGE ARTISTE ============================= */
.single-artiste{color:var(--ui);}
.artist-page{display:grid; grid-template-columns:1fr 1fr; min-height:100vh;}
.artist-bio{padding:120px 60px 80px 48px; display:flex; flex-direction:column;}
.artist-hero-name{font-family:var(--font-display); font-size:clamp(44px,7vw,112px); line-height:.85; text-transform:uppercase; margin-bottom:16px; color:var(--ui); transition:color .8s ease;}
.artist-meta{font-family:var(--font-ui); font-size:14px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-bottom:8px;}
.artist-style{font-family:var(--font-ui); font-size:16px; letter-spacing:.08em; margin-bottom:48px;}
.artist-style span{color:var(--ui); transition:color .8s ease;}
.artist-description{font-family:"Arial Narrow",sans-serif; font-size:17px; line-height:1.65; margin-bottom:48px; max-width:640px;}
.artist-description p{margin-bottom:20px;}
.artist-video{position:relative; display:block; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; text-decoration:none; margin-bottom:48px;}
.artist-video-img{width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.2); transition:transform .5s cubic-bezier(.25,1,.5,1),filter .5s ease;}
.artist-video-overlay{position:absolute; inset:0; background:linear-gradient(to top,rgba(11,11,11,.9) 0%,rgba(11,11,11,0) 60%); padding:24px; display:flex; flex-direction:column; justify-content:flex-end; color:var(--ui);}
.artist-video-title{font-family:var(--font-display); font-size:clamp(18px,2vw,28px); line-height:1.1; text-transform:uppercase; margin-bottom:4px;}
.artist-video-sub{font-family:var(--font-ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.7;}
.artist-video .play-stamp{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.5); font-family:var(--font-display); font-size:clamp(40px,6vw,80px); color:var(--ui); text-transform:uppercase; opacity:0; transition:all .4s cubic-bezier(.25,1,.5,1); pointer-events:none; text-shadow:0 0 40px rgba(0,0,0,.8);}
.artist-video:hover .artist-video-img{transform:scale(1.05); filter:grayscale(0%) contrast(1);}
.artist-video:hover .artist-video-overlay{background:rgba(11,11,11,.6);}
.artist-video:hover .play-stamp{opacity:1; transform:translate(-50%,-50%) scale(1);}
.artist-releases{margin:0 0 44px;}
.artist-release-link{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid rgba(244,239,230,.15); text-decoration:none; color:var(--ui); transition:opacity .25s ease, padding .25s ease;}
.artist-release-link:first-of-type{border-top:1px solid rgba(244,239,230,.15);}
.artist-release-link:hover{opacity:.72; padding-left:6px;}
.arl-title{font-family:var(--font-display); font-size:clamp(16px,1.7vw,21px); text-transform:uppercase; line-height:1;}
.arl-label{font-family:var(--font-ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.55;}
.arl-arrow{margin-left:auto; display:flex; opacity:.6;}
.arl-arrow svg{width:17px; height:17px; display:block;}
.artist-socials{display:flex; gap:32px; align-items:center; margin-bottom:40px; flex-wrap:wrap;}
.social-link{color:var(--ui); text-decoration:none; font-family:var(--font-ui); font-size:13px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; transition:opacity .3s ease; display:flex; align-items:center; gap:8px;}
.social-link:hover{opacity:1;}
.social-icon{width:22px; height:22px; fill:currentColor;}
.cta-book{display:inline-flex; align-items:center; justify-content:center; padding:20px 40px; border:1px solid var(--ui); color:var(--ui); text-decoration:none; font-family:var(--font-ui); font-size:14px; letter-spacing:.12em; text-transform:uppercase; transition:all .3s ease; align-self:flex-start;}
.cta-book:hover{background:var(--ui); color:var(--ink);}
/* Photo : remplit toute sa colonne et défile avec le contenu (plus de sticky
   qui laissait un vide noir en bas quand la bio est plus longue que 100vh). */
.artist-photo{position:relative; overflow:hidden; min-height:100vh;}
.artist-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(30%) contrast(1.05); transition:filter .6s ease;}
.artist-photo:hover img{filter:grayscale(0%) contrast(1);}

/* ============================= RADIO ============================= */
.page-radio main,.post-type-archive-radio main{position:relative; z-index:10; padding:120px 0 120px; background:var(--bg); color:var(--ink);}
.page-radio,.post-type-archive-radio{background:var(--bg); color:var(--ink);}
.radio-header{padding:0 48px; margin-bottom:40px;}
.page-title{font-family:var(--font-display); font-size:min(7.4vw,116px); line-height:.82; text-transform:uppercase; color:var(--ink); margin-left:-.04em; white-space:nowrap;}
.marquee-container{width:100vw; overflow:hidden; background:var(--ink); color:var(--ui); padding:16px 0; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); margin-bottom:80px; display:flex; white-space:nowrap;}
.marquee-content{display:inline-block; font-family:var(--font-ui); font-size:20px; letter-spacing:.1em; text-transform:uppercase; animation:marquee 15s linear infinite;}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-picto{display:inline-block; height:22px; width:auto; vertical-align:middle; margin:0 24px; color:currentColor;}
.section-label{padding:0 48px; margin:60px 0 32px;}
.section-label h2{font-family:var(--font-ui); font-size:clamp(12px,1.5vw,16px); letter-spacing:.2em; text-transform:uppercase; color:var(--ink); opacity:.5; border-top:1px solid rgba(11,11,11,.15); padding-top:20px;}
.radio-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:20px; padding:0 48px;}
.radio-item{position:relative; display:block; aspect-ratio:1/1; background:var(--ink); overflow:hidden; text-decoration:none; border:1px solid rgba(11,11,11,.1);}
.radio-image{width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.2); transition:transform .5s cubic-bezier(.25,1,.5,1),filter .5s ease;}
.radio-overlay{position:absolute; inset:0; background:linear-gradient(to top,rgba(11,11,11,.9) 0%,rgba(11,11,11,0) 60%); padding:32px; display:flex; flex-direction:column; justify-content:flex-end; color:var(--ui);}
.radio-show-title{font-family:var(--font-display); font-size:clamp(24px,3vw,40px); line-height:1; text-transform:uppercase; margin-bottom:8px;}
.radio-show-date{font-family:var(--font-ui); font-size:14px; letter-spacing:.1em; text-transform:uppercase;}
.radio-item .play-stamp{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.5); font-family:var(--font-display); font-size:clamp(60px,8vw,120px); color:var(--ui); text-transform:uppercase; opacity:0; transition:all .4s cubic-bezier(.25,1,.5,1); pointer-events:none; text-shadow:0 0 40px rgba(0,0,0,.8);}
.radio-item:hover .radio-image{transform:scale(1.05); filter:grayscale(0%) contrast(1);}
.radio-item:hover .radio-overlay{background:rgba(11,11,11,.6);}
.radio-item:hover .play-stamp{opacity:1; transform:translate(-50%,-50%) scale(1);}

/* ============================= CONTACT ============================= */
.page-contact{background:var(--bg); color:var(--ink);}
.page-contact main{padding:160px 48px 120px;}
.contact-hero{max-width:1100px; margin-bottom:80px;}
.contact-title{font-family:var(--font-display); font-size:clamp(28px,4vw,56px); line-height:1.1; text-transform:none;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
.section-title{font-family:var(--font-ui); font-size:14px; letter-spacing:.15em; text-transform:uppercase; opacity:.55; margin-bottom:20px;}
.text-body{font-family:"Arial Narrow",sans-serif; font-size:17px; line-height:1.65; margin-bottom:32px; max-width:560px;}
.pillar-box{margin-bottom:24px;}
.pillar-box h3{font-family:var(--font-display); font-size:22px; text-transform:uppercase; margin-bottom:6px;}
.contact-right{container-type:inline-size;}
/* Liens (email/insta/soundcloud) : taille auto-adaptée à la largeur de la colonne
   (le plus long = l'email) → tiennent toujours sur une ligne, quel que soit l'écran. */
.contact-link{display:block; font-family:var(--font-display); font-size:min(30px, calc(100cqw / 22)); white-space:nowrap; text-decoration:none; text-transform:uppercase; color:var(--ink); transition:transform .3s ease,opacity .3s ease; transform-origin:left; margin-bottom:12px;}
.contact-link:hover{transform:scale(1.05); opacity:.8;}
.pdf-downloads{display:flex; flex-direction:column; gap:20px; margin-top:32px;}
.download-btn{display:inline-flex; align-items:center; justify-content:space-between; padding:20px 24px; border:1px solid var(--ink); color:var(--ink); text-decoration:none; font-family:var(--font-ui); font-size:14px; letter-spacing:.1em; text-transform:uppercase; transition:all .3s ease;}
.download-btn:hover{background:var(--ink); color:var(--bg);}
.download-btn::after{content:'↓'; font-size:18px; font-family:sans-serif;}

/* ============================= PROGRAMMATION ============================= */
.page-programmation{background:var(--bg); color:var(--ink);}
.page-programmation main{padding:120px 0 120px;}
/* Titre : "PROGRAMMATION" est long -> plus petit que "ON AIR" pour éviter le débordement. */
.page-programmation .radio-header{padding:0 48px; margin-bottom:48px;}
/* Titre prog : même échelle que ON AIR (règle .page-title de base). */
.prog-list{padding:0 48px; border-top:1px solid rgba(11,11,11,.15);}
.prog-row{display:grid; grid-template-columns:300px 1fr auto; gap:44px; align-items:center; padding:36px 0; border-bottom:1px solid rgba(11,11,11,.15);}
.prog-flyer-wrap{width:100%;}
.prog-flyer{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--ink);}
.prog-name{font-family:var(--font-display); font-size:clamp(24px,3vw,44px); text-transform:uppercase; line-height:1; margin-bottom:14px;}
.prog-desc{font-family:"Arial Narrow",sans-serif; font-size:15px; line-height:1.55; max-width:600px; opacity:.85;}
.prog-desc p{margin-bottom:8px;}
.prog-meta{display:flex; flex-direction:column; align-items:flex-end; gap:18px; text-align:right; white-space:nowrap;}
.prog-date{font-family:var(--font-ui); font-size:13px; letter-spacing:.1em; text-transform:uppercase;}
.prog-tix{display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border:1px solid var(--ink); color:var(--ink); text-decoration:none; font-family:var(--font-ui); font-size:13px; letter-spacing:.1em; text-transform:uppercase; transition:all .3s ease;}
.prog-tix:hover{background:var(--ink); color:var(--bg);}
.prog-tix-soon{font-family:var(--font-ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.4;}
/* Événements passés : archivés, grisés, sans lien billetterie. */
.prog-past-label{padding:0 48px; margin:72px 0 4px;}
.prog-list--past{border-top:1px solid rgba(11,11,11,.15);}
.prog-row.is-past{opacity:.5;}
.prog-row.is-past .prog-flyer{filter:grayscale(100%);}

/* ============================= PAGE LABEL (Maquina Tracks) ============================= */
.label-hero{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 24px; color:var(--ui);}
.label-title{color:var(--ui); font-size:min(11vw,140px); line-height:.9; white-space:normal; margin-bottom:28px;}
.label-body{font-family:var(--font-ui); font-size:clamp(13px,1.5vw,18px); letter-spacing:.12em; text-transform:uppercase; opacity:.65; max-width:620px; line-height:1.7;}
.label-body p{margin-bottom:8px;}

/* ============================= MUSIC / SORTIES (vinyles custom) ============================= */
.music-page{color:var(--ui); max-width:1120px; margin:0 auto; padding:120px 32px 110px;}
.music-head{text-align:center; margin-bottom:72px;}
.music-head .label-title{color:var(--ui); font-size:min(10vw,108px); line-height:.9; white-space:normal;}
.release-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:56px 40px; justify-items:center;}
.release{display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; max-width:260px;}
.release-flip{position:relative; width:200px; height:200px; margin-bottom:24px; perspective:1100px;}
.release-flip-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.25,1,.35,1);}
.release-flip.is-flipped .release-flip-inner{transform:rotateY(180deg);}
.release-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.release-face--back{transform:rotateY(180deg); border-radius:6px; overflow:hidden; box-shadow:0 22px 55px rgba(0,0,0,.55);}
.release-cover{width:100%; height:100%; object-fit:cover; display:block;}
.release-flip-btn{position:absolute; bottom:2px; left:2px; width:40px; height:40px; border-radius:50%; background:#0b0b0b; color:var(--ui); border:1px solid rgba(244,239,230,.32); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:4; box-shadow:0 5px 14px rgba(0,0,0,.45); transition:transform .2s ease, background .2s ease, color .2s ease;}
.release-flip-btn:hover{transform:scale(1.09); background:var(--ui); color:#0b0b0b;}
.release-flip-btn svg{width:18px; height:18px;}
.release-disc{position:relative; width:100%; height:100%; padding:0; border:0; background:none; cursor:default; display:block;}
.release-disc.has-audio{cursor:pointer;}
.release-vinyl{width:100%; height:100%; display:block; border-radius:50%; box-shadow:0 22px 55px rgba(0,0,0,.55); animation:vinyl-spin 6s linear infinite; animation-play-state:paused; transition:box-shadow .3s ease;}
.release.is-playing .release-vinyl{animation-play-state:running; box-shadow:0 26px 70px rgba(0,0,0,.7);}
/* bras de lecture : parqué, se pose sur le disque pendant la lecture */
.release-arm{position:absolute; top:0; right:6px; width:9px; height:112px; border-radius:6px; background:linear-gradient(180deg,#3a3a3a,#1c1c1c); box-shadow:0 3px 8px rgba(0,0,0,.5); transform-origin:5px 6px; transform:rotate(-14deg); transition:transform .55s cubic-bezier(.25,1,.5,1); z-index:2; pointer-events:none;}
.release-arm::before{content:""; position:absolute; top:-8px; left:-8px; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#4a4a4a,#222); box-shadow:inset 0 0 0 2px rgba(244,239,230,.22);}
.release-arm::after{content:""; position:absolute; bottom:-5px; left:-4px; width:17px; height:13px; border-radius:3px; background:#f4efe6;}
.release.is-playing .release-arm{transform:rotate(30deg);}
/* badge play / pause */
.release-play{position:absolute; bottom:2px; right:2px; width:42px; height:42px; border-radius:50%; background:var(--ui); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:14px; padding-left:2px; z-index:3; box-shadow:0 5px 14px rgba(0,0,0,.45); transition:transform .2s ease; pointer-events:none;}
.release-disc.has-audio:hover .release-play{transform:scale(1.09);}
.release.is-playing .release-play{padding-left:0;}
.release-artist{font-family:var(--font-ui); font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.6; margin-bottom:5px;}
.release-title{font-family:var(--font-display); font-size:23px; text-transform:uppercase; line-height:1; margin-bottom:9px;}
.release-sub{font-family:var(--font-ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.5; margin-bottom:18px;}
.release-links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.release-links a{font-family:var(--font-ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ui); text-decoration:none; padding:8px 15px; border:1px solid rgba(244,239,230,.32); transition:all .25s ease;}
.release-links a:hover{background:var(--ui); color:var(--ink);}
@keyframes vinyl-spin{to{transform:rotate(360deg);}}

/* ============================= LIGHTBOX VIDÉO (in-site) ============================= */
body.mq-noscroll{overflow:hidden;}
.mq-lightbox{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .3s ease;}
.mq-lightbox.is-open{opacity:1; pointer-events:auto;}
.mq-lightbox-inner{position:relative; width:min(1100px,92vw); aspect-ratio:16/9;}
.mq-lightbox-frame{position:absolute; inset:0;}
.mq-lightbox-frame iframe{width:100%; height:100%; border:0; display:block;}
.mq-lightbox-close{position:fixed; top:18px; right:26px; z-index:2; background:none; border:0; color:#f4efe6; font-size:40px; line-height:1; cursor:pointer; font-family:sans-serif; padding:6px 12px; transition:opacity .2s ease;}
.mq-lightbox-close:hover{opacity:.6;}

/* ============================= RESPONSIVE ============================= */
@media(max-width:900px){
  .mq-nav{padding:24px 20px;}
  .mq-nav .nav-hamburger{display:block;}
  .mq-nav .nav-links{display:none;}
  /* Menu mobile : liste alignée à gauche, numérotée, avec accordéon pour Music */
  .mobile-menu-overlay{align-items:stretch; justify-content:center;}
  .mobile-menu-links{align-items:stretch; text-align:left; gap:0; width:100%; padding:0 30px; counter-reset:mqm;}
  .mobile-menu-links > li{width:100%; border-top:1px solid rgba(244,239,230,.13);}
  .mobile-menu-links > li:last-child{border-bottom:1px solid rgba(244,239,230,.13);}
  .mobile-menu-links > li > a{display:flex; align-items:center; gap:12px; padding:21px 2px; font-size:clamp(18px,5.7vw,38px); line-height:1;}
  .mobile-menu-links > li > a::before{counter-increment:mqm; content:counter(mqm,decimal-leading-zero); font-family:var(--font-ui); font-size:11px; letter-spacing:.08em; opacity:.4; min-width:20px;}
  .mobile-menu-links .menu-item-has-children > a::after{content:"+"; margin-left:auto; font-family:sans-serif; font-weight:400; font-size:30px; line-height:1; opacity:.55; transition:transform .3s ease;}
  .mobile-menu-links .menu-item-has-children.is-open > a::after{transform:rotate(45deg);}
  .mobile-menu-links .sub-menu{list-style:none; margin:0; padding:0 0 0 42px; max-height:0; overflow:hidden; transition:max-height .35s ease; display:block;}
  .mobile-menu-links .menu-item-has-children.is-open > .sub-menu{max-height:260px;}
  .mobile-menu-links .sub-menu a{display:block; padding:0 0 20px; font-size:clamp(15px,4.6vw,20px); opacity:.65; letter-spacing:.1em;}
  .mobile-menu-links .sub-menu li:first-child a{padding-top:4px;}
  .vinyl-wrap{top:10px; right:16px; width:62px; height:62px;}
  .artist-name{font-size:clamp(34px,14vw,80px);}
  .home main{padding:64px 14px 88px; align-items:center;}
  .scroll-hint{display:none;}
  .artist-page{grid-template-columns:1fr;}
  .artist-photo{position:relative; height:70vh; min-height:auto; order:-1;}
  .artist-bio{padding:40px 20px 60px;}
  .artist-hero-name{font-size:clamp(40px,14vw,80px);}
  .cta-book{width:100%;}
  .page-contact main{padding:120px 20px 80px;}
  .contact-grid{grid-template-columns:minmax(0,1fr); gap:40px;}
  .contact-title{font-size:clamp(26px,7vw,42px);}
  .text-body{max-width:none;}
  .radio-grid{grid-template-columns:repeat(2,1fr); gap:8px; padding:0 12px;}
  .radio-overlay{padding:16px;}
  .radio-show-title{font-size:16px;}
  /* Titres mobile : une seule ligne (jamais de coupure de "PROGRAMMATION"),
     à la plus grande taille qui tient — marges latérales réduites pour gagner
     de la place — et rapprochés du header. */
  .radio-header,.page-programmation .radio-header{padding:0 20px;}
  .page-title{font-size:min(7vw,44px); line-height:.9; letter-spacing:-.01em; white-space:nowrap;}
  .page-radio main,.post-type-archive-radio main{padding-top:84px;}
  .page-programmation main{padding:84px 0 72px;}
  .page-programmation .radio-header,.radio-header{margin-bottom:28px;}
  /* Lignes d'événement : tout empilé, plein largeur, rien qui déborde. */
  .prog-list{padding:0 20px;}
  .prog-row{grid-template-columns:1fr; gap:16px; padding:28px 0;}
  .prog-name{font-size:clamp(24px,6.5vw,36px);}
  .prog-desc{max-width:none;}
  .prog-meta{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; width:100%; white-space:normal; text-align:left;}
  footer.mq-footer{padding:20px; flex-direction:column; align-items:center; gap:12px; text-align:center;}
  .footer-credit{font-size:8px; padding:4px 8px;}
}