/* =====================================================================
   v2-skin.css — habillage « Murat studios » (thème v2) pour le blog et les articles.
   Chargé EN DERNIER dans le <head> : il surcharge les variables et les composants
   des anciens articles (CSS inline) sans toucher à leur contenu.
   Retour en arrière : node scripts/apply-v2-skin.mjs --remove
   ===================================================================== */
/* Les polices (Outfit, Inter, JetBrains Mono) sont chargées par <link> dans le <head> des pages (voir apply-v2-skin.mjs). */

:root{
  --bg:#050506; --surface:#0b0b0e; --surface-2:#121217;
  --text:#f4f2ee; --text-dim:rgba(244,242,238,.74); --text-mute:rgba(244,242,238,.45);
  --accent:#ffa23d; --original:#ff5a1f; --gold:#ffa23d;
  --border:rgba(255,255,255,.1); --border2:rgba(255,255,255,.18);
  --display:'Outfit',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ember:#ff5a1f; --ember2:#ffa23d;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);cursor:auto;-webkit-font-smoothing:antialiased}
a,button{cursor:pointer}
.cursor,.cursor-ring{display:none!important}
/* accessibilité : focus visible au clavier */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ember2)!important;outline-offset:3px}

/* ----- titres : Outfit, casse normale ----- */
h1,h2,h3,.article-title,.hero-title,.related-track,.article-card-title{font-family:var(--display);text-transform:none;font-weight:700;letter-spacing:-.025em}
h1,.article-title,.hero-title{font-weight:800;letter-spacing:-.035em;line-height:1.02}
.accent{color:transparent;background:linear-gradient(100deg,var(--ember),var(--ember2));-webkit-background-clip:text;background-clip:text}
.hero-tag,.articles-label,.meta-tag,.breadcrumb,.listen-bar-label,.related-title,.gear-callout-eyebrow,.dk-eyebrow,.newsletter-tag,.spotify-promo-eyebrow,.article-card-meta,.article-meta{font-family:var(--mono);letter-spacing:.16em}

/* ----- barre de navigation ----- */
nav{background:rgba(5,5,6,.82)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)!important}
nav.breadcrumb{position:static!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;padding:0!important;z-index:auto!important;margin-bottom:32px;justify-content:flex-start!important}
.breadcrumb a:hover{color:var(--ember2)!important}
.nav-logo{display:block;width:150px;height:46px;background:url(/images/brand/logo-murat-studios-white-transparent.png) left center/contain no-repeat;flex:none}
.nav-logo img{display:none!important}
.nav-logo-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-logo-mark{display:none!important}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-link{font-family:var(--display)!important;font-weight:500;letter-spacing:.02em!important;text-transform:none!important;color:var(--text-dim)!important;text-decoration:none}
.nav-link:hover,.nav-link.active{color:var(--text)!important}
.nav-back{font-family:var(--display)!important;font-weight:500;letter-spacing:.02em!important;text-transform:none!important;color:var(--text-dim)}
.nav-back:hover{color:var(--text)!important}
.lang-switch{border:1px solid var(--border);border-radius:30px;padding:3px;gap:2px;display:inline-flex}
.lang-opt{border-radius:30px!important;font-family:var(--mono)!important;font-size:11px!important;color:var(--text-mute);border:0!important;padding:6px 10px!important}
.lang-opt.active{background:var(--text)!important;color:#0a0a0a!important}

/* ----- accueil du blog ----- */
.hero-tag{color:var(--ember2)}
.hero-tag-dot{background:var(--ember2)!important;box-shadow:0 0 10px var(--ember)!important}
.hero-title{letter-spacing:-.04em}
.hero-sub{font-family:var(--body);color:var(--text-dim)}
.articles-label{color:var(--ember2)}
.article-card{border-radius:20px!important;overflow:hidden;background:var(--surface)!important;border:1px solid var(--border)!important;transition:transform .35s,border-color .35s}
.article-card:hover{transform:translateY(-6px);border-color:#ffffff45!important}
.article-card-title{font-size:24px}
.article-card-excerpt{color:var(--text-dim);font-family:var(--body)}
.article-card-cta{font-family:var(--display)!important;font-weight:600;letter-spacing:.02em!important;color:var(--ember2)}
.article-card-tag{border-radius:30px!important;backdrop-filter:blur(8px);font-family:var(--mono)!important}

/* ----- article ----- */
.article-body,.article-body p,.article-body li{font-family:var(--body);color:var(--text-dim)}
.article-body h2{color:var(--text);font-size:clamp(28px,3.4vw,40px)}
.article-sub{font-family:var(--body);color:var(--text-dim)}
blockquote{border-left:3px solid var(--ember)!important;background:linear-gradient(90deg,#ff5a1f14,transparent)!important;border-radius:0 14px 14px 0;font-family:var(--display)}
.article-body a{color:var(--ember2);text-decoration-color:#ffa23d66}
.meta-tag{border-radius:30px!important}
.audio-player,.audio-embed,.gear-callout,.copyright-notice,.related-card,.dk-callout,.spotify-promo,.newsletter-cta{border-radius:20px!important}
.audio-embed iframe{border-radius:20px}
.platform-btn{border-radius:40px!important;font-family:var(--mono)!important}
.platform-btn:hover{border-color:var(--ember2)!important;color:var(--text)!important}
.gear-callout{background:linear-gradient(160deg,#1c0e08,#0b0b0e)!important;border:1px solid #ff5a1f55!important}
.gear-callout-link,.dk-link,.spotify-promo-cta,.newsletter-cta button,.newsletter-cta [type=submit]{border-radius:40px!important;font-family:var(--display)!important;font-weight:700;letter-spacing:.03em!important}
.related-card{transition:transform .3s,border-color .3s}.related-card:hover{transform:translateY(-4px)}
.newsletter-cta input[type=email]{border-radius:40px}
footer{border-top:1px solid var(--border)!important;background:var(--surface)!important}
footer a:hover{color:var(--ember2)!important}

/* ----- restes de cyan en dur (rgba/hex) dans les anciens CSS : remplacés par la braise ----- */
.hero-tag{border-color:#ffa23d55!important;background:#ffa23d12!important;color:var(--ember2)!important}
.newsletter-tag,.track-num,.track-play,.product-icon{color:var(--ember2)!important}
.newsletter-cta{background:linear-gradient(160deg,#1c0e08,#0b0b0e)!important;border-color:#ff5a1f55!important}
.newsletter-cta-form button:hover,.newsletter-btn:hover,.btn-primary:hover{background:var(--ember2)!important;color:#1a0a02!important;border-color:var(--ember2)!important}
.newsletter-input:focus,.newsletter-cta-form input:focus{border-color:var(--ember2)!important;outline:none}
.audio-player{border-color:var(--border)!important}
.gear-callout::before{background:radial-gradient(circle,#ff5a1f22,transparent 70%)!important}
.gear-callout-link:hover{background:#ffa23d1a!important;border-color:var(--ember2)!important;color:var(--text)!important}
.related-card:hover,.track-card:hover,.product-card:hover{border-color:#ffa23d66!important}
.track-row.playing{border-color:#ffa23d66!important;background:#ff5a1f12!important}
.track-row.playing .track-cover-play{background:var(--ember)!important;color:#1a0a02!important}
.track-platforms a:hover{border-color:var(--ember2)!important;color:var(--text)!important;background:#ffa23d12!important}
.sp-progress-fill{background:linear-gradient(90deg,var(--ember),var(--ember2))!important}
.equalizer span{background:var(--ember2)!important}
/* ----- page Gear : produits sur « table de studio » claire, photos fondues (fond blanc Amazon → multiply) ----- */
.product-card{border-radius:24px!important;padding:18px 18px 24px!important;background:linear-gradient(180deg,#101015,#0a0a0d)!important;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .4s!important}
.product-card:hover{transform:translateY(-6px)!important;border-color:#ffa23d66!important;box-shadow:0 30px 70px #000a,0 0 0 1px #ff5a1f22!important}
.product-card>*:not(.product-image){margin-left:6px;margin-right:6px}
.product-image{aspect-ratio:1/1!important;border:0!important;border-radius:18px!important;margin-bottom:22px!important;background:radial-gradient(120% 90% at 50% 18%,#fbf9f5 0%,#ece8e0 55%,#d7d2c8 100%)!important;box-shadow:inset 0 0 0 1px #ffffff55,inset 0 -40px 60px #00000014}
.product-image::before{display:none!important}
.product-image::after{content:""!important;display:block!important;position:absolute!important;left:12%!important;right:12%!important;bottom:8%!important;top:auto!important;width:auto!important;height:9%!important;border-radius:50%!important;background:radial-gradient(ellipse,#0000002b,transparent 70%)!important;filter:blur(8px)!important;z-index:1!important}
.product-photo{mix-blend-mode:multiply;padding:11%!important;filter:none!important;transition:transform .6s cubic-bezier(.16,1,.3,1)!important}
.product-card:hover .product-photo{transform:scale(1.07) translateY(-2%)!important;filter:none!important}
.product-mark,.product-mark-meta{color:#3b362e!important;opacity:.85}
.product-mark::before{background:var(--ember)!important;box-shadow:none!important}
.product-name{font-size:25px!important}
.product-link{font-family:var(--display)!important;text-transform:none!important;letter-spacing:.02em!important;font-weight:600;font-size:14px!important;padding:10px 18px;border:1px solid var(--border);border-radius:40px}
.product-link:hover{background:var(--text);color:#0a0a0a!important;border-color:var(--text);transform:none!important}
.product-price{font-family:var(--display)!important;font-weight:600;font-size:15px!important;letter-spacing:0!important;color:var(--text)!important}
.products-grid{gap:26px!important}
.hero::before{background:radial-gradient(60% 55% at 50% 0%,#ff5a1f26,transparent 70%)!important}
.playlist-cta,.playlist-cta::before{border-color:#ff5a1f66!important}
.playlist-cta{background:linear-gradient(160deg,#1c0e08,#0b0b0e)!important;border-radius:22px!important}
.track-card,.featured-project,.faq-question{border-radius:18px}

/* ----- lecteur global (global-player.js) ----- */
body .mk-gp{left:16px;right:16px;bottom:16px;max-width:1100px;margin:0 auto;height:72px;padding:0 22px 0 12px;gap:16px;grid-template-columns:52px minmax(0,1fr) auto auto;border-radius:60px;border:1px solid var(--border);background:rgba(11,11,14,.84);box-shadow:0 24px 70px #000c,inset 0 1px 0 #ffffff12;-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);font-family:Inter,system-ui,sans-serif;color:var(--text)}
body .mk-gp::before{display:none}
body .mk-gp-progress{left:30px;right:30px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ember),var(--ember2))}
body .mk-gp-cover{width:52px;height:52px;border-radius:50%;border:1px solid var(--border)}
body .mk-gp-cover.mk-playing::after{background:radial-gradient(circle,#ff5a1f55,transparent 70%)}
body .mk-gp-eyebrow{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--ember2)}
body .mk-gp-eyebrow::before{background:var(--ember2);box-shadow:0 0 8px var(--ember)}
body .mk-gp-title{font:600 18px Outfit,sans-serif;letter-spacing:-.01em;color:var(--text)}
body .mk-gp-title .mk-gp-artists{font:400 14px Inter,sans-serif;color:var(--text-mute)}
body .mk-gp-title .mk-gp-sep{color:#ffffff40}
body .mk-gp-btn{color:#f4f2eeb3}
body .mk-gp-btn:hover{color:var(--ember2)}
body .mk-gp-play{width:44px;height:44px;background:linear-gradient(135deg,var(--ember),var(--ember2));color:#1a0a02}
body .mk-gp-play:hover{background:linear-gradient(135deg,var(--ember),var(--ember2));color:#1a0a02;box-shadow:0 8px 22px #ff5a1f66;transform:translateY(-1px) scale(1.05)}
body .mk-gp-open{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;border-radius:40px;padding:10px 18px;border:1px solid var(--border);background:#ffffff08;color:var(--text)}
body .mk-gp-open:hover{color:#1a0a02;background:var(--text);border-color:var(--text)}
body .mk-gp-close{top:-10px;right:26px;background:var(--surface-2);border-color:var(--border);color:var(--text)}
body .mk-gp-close:hover{color:var(--ember2);border-color:var(--ember2)}
body .mk-gp.mk-attention{animation:none}
body.mk-gp-active{padding-bottom:104px}
@media(max-width:640px){body .mk-gp{left:8px;right:8px;bottom:8px;height:62px;padding:0 12px 0 8px;gap:10px;grid-template-columns:44px minmax(0,1fr) auto;border-radius:40px}body .mk-gp-cover{width:44px;height:44px}body .mk-gp-title{font-size:15px}body .mk-gp-play{width:40px;height:40px}body .mk-gp-progress{left:22px;right:22px}body.mk-gp-active{padding-bottom:84px}.nav-logo{width:104px;height:34px}nav{padding:12px 14px!important;gap:8px}.nav-right{gap:12px}.nav-link,.nav-back{font-size:13px!important}.lang-opt{padding:5px 7px!important;font-size:10px!important}}
@media(max-width:480px){.nav-right .nav-link:not(.active){display:none}}