/* ── TOKENS ── */
    :root {
      --bg:     #060403;
      --bg1:    #0d0905;
      --bg2:    #161009;
      --bg3:    #221710;
      --gold:   #d4a028;
      --gold2:  #f0c84a;
      --glow:   rgba(212,160,40,.18);
      --cream:  #fff5e0;
      --text:   #f0e4c8;
      --muted:  rgba(240,228,200,.70);
      --dim:    rgba(240,228,200,.42);
      --line:   rgba(200,150,30,.14);
      --lineB:  rgba(212,160,40,.28);
      --glass:  rgba(255,240,200,.06);
      --glassB: rgba(255,240,200,.11);
      --r1: 30px; --r2: 20px; --r3: 12px; --r4: 8px;
      --max: 1220px;
      --ease: cubic-bezier(.22,.68,0,1.2);
    }
    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; font-size:16px; }
    body {
      font-family:'Inter', ui-sans-serif, sans-serif;
      background:var(--bg); color:var(--text);
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    a { color:inherit; text-decoration:none; }
    img, video { display:block; max-width:100%; }
    p { line-height:1.8; text-wrap:pretty; }

    /* grain */
    body::after {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
      opacity:.03;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size:256px;
    }

    /* progress bar */
    #bar {
      position:fixed; top:0; left:0; height:2px; width:0;
      background:linear-gradient(90deg,var(--gold),var(--gold2));
      z-index:1001; transition:width .1s linear;
      box-shadow:0 0 10px var(--gold);
    }

    .wrap { width:min(var(--max), calc(100% - 48px)); margin:0 auto; }

    /* ── UTILITIES ── */
    .kicker {
      display:inline-flex; align-items:center; gap:8px;
      font-size:10.5px; font-weight:700; letter-spacing:.22em;
      text-transform:uppercase; color:var(--gold);
    }
    .kicker::before { content:''; width:18px; height:1px; background:var(--gold); flex-shrink:0; }
    .serif { font-family:'Libre Baskerville',Georgia,serif; }
    h2 {
      font-family:'Libre Baskerville',Georgia,serif;
      font-size:clamp(2rem,4.2vw,3.4rem);
      line-height:1.06; font-weight:700; color:var(--cream);
      margin-top:14px;
    }
    .reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s var(--ease); }
    .reveal.vis { opacity:1; transform:none; }
    .d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

    .btn {
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 26px; border-radius:999px;
      font-size:13px; font-weight:700; letter-spacing:.04em;
      cursor:pointer; border:none; white-space:nowrap;
      transition:transform .2s var(--ease), box-shadow .2s, opacity .2s;
    }
    .btn:hover { transform:translateY(-2px); }
    .btn-gold {
      background:linear-gradient(135deg,var(--gold2),var(--gold));
      color:var(--bg); box-shadow:0 4px 22px rgba(212,160,40,.28);
    }
    .btn-gold:hover { box-shadow:0 8px 32px rgba(212,160,40,.46); }
    .btn-ghost {
      background:var(--glass); border:1px solid var(--lineB); color:var(--text);
    }
    .btn-ghost:hover { background:var(--glassB); border-color:var(--gold); }

    /* ── TOPBAR ── */
    #nav {
      position:fixed; top:0; left:0; right:0; z-index:100;
      transition:background .35s, border-color .35s, backdrop-filter .35s;
    }
    #nav.solid {
      background:rgba(6,4,3,.92);
      backdrop-filter:blur(20px) saturate(1.4);
      -webkit-backdrop-filter:blur(20px) saturate(1.4);
      border-bottom:1px solid var(--line);
    }
    .nav-inner {
      height:68px; display:flex; align-items:center;
      justify-content:space-between; gap:16px;
    }
    .brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
    .brand-img {
      width:38px; height:38px; border-radius:10px; overflow:hidden;
      border:1px solid var(--lineB); flex-shrink:0;
    }
    .brand-img img { width:100%; height:100%; object-fit:cover; }
    .brand-name {
      font-family:'Libre Baskerville',serif;
      font-size:17px; letter-spacing:.06em; color:var(--cream);
    }
    .brand-sub { font-size:11px; color:var(--dim); letter-spacing:.07em; margin-top:2px; }
    nav { display:flex; gap:2px; }
    nav a {
      padding:8px 12px; border-radius:var(--r4);
      font-size:13px; font-weight:500; color:var(--muted);
      transition:color .2s, background .2s;
    }
    nav a:hover, nav a.active { color:var(--cream); background:var(--glass); }
    .nav-cta { flex-shrink:0; }

    /* Hamburger */
    .nav-burger {
      display:none; background:none; border:1px solid var(--line);
      border-radius:var(--r4); color:var(--cream);
      cursor:pointer; padding:9px 10px; line-height:0;
      transition:border-color .2s, background .2s;
    }
    .nav-burger:hover { border-color:var(--gold); background:var(--glass); }

    /* ── MOBILE NAV OVERLAY ── */
    .mobile-nav {
      display:none; position:fixed; inset:0; z-index:200;
      background:rgba(6,4,3,.97);
      backdrop-filter:blur(24px) saturate(1.3);
      -webkit-backdrop-filter:blur(24px) saturate(1.3);
      flex-direction:column; align-items:center; justify-content:center; gap:4px;
    }
    .mobile-nav.open { display:flex; }
    body.nav-open { overflow:hidden; }
    .mobile-nav-close {
      position:absolute; top:20px; right:20px;
      background:var(--glass); border:1px solid var(--line);
      border-radius:var(--r4); color:var(--muted);
      font-size:20px; cursor:pointer; padding:9px 12px; line-height:1;
      transition:color .2s, border-color .2s;
    }
    .mobile-nav-close:hover { color:var(--cream); border-color:var(--gold); }
    .mobile-nav a {
      font-family:'Libre Baskerville',serif;
      font-size:clamp(1.6rem,5.5vw,2.4rem);
      font-weight:700; color:var(--muted);
      padding:11px 0;
      transition:color .2s;
      text-align:center;
    }
    .mobile-nav a:hover { color:var(--gold2); }
    .mobile-nav-foot {
      position:absolute; bottom:32px;
      display:flex; gap:12px; flex-wrap:wrap; justify-content:center; padding:0 24px;
    }

    /* ── HERO ── */
    .hero {
      position:relative; min-height:100svh;
      display:flex; align-items:center; overflow:hidden;
      background:var(--bg);
    }
    .hero-art {
      position:absolute; right:0; top:0; bottom:0; width:62%; z-index:0;
    }
    .hero-art img {
      width:100%; height:100%; object-fit:cover; object-position:center 8%;
      filter:saturate(1.05) brightness(.80);
    }
    .hero-art::after {
      content:''; position:absolute; inset:0;
      background:
        linear-gradient(to right, var(--bg) 0%, rgba(6,4,3,.78) 32%, rgba(6,4,3,.05) 70%),
        linear-gradient(to bottom, rgba(6,4,3,.35) 0%, transparent 18%, transparent 78%, var(--bg) 100%);
    }
    .hero-name-zero { position:relative; display:inline; }
    .hero-name-zero::after {
      content:''; position:absolute;
      right:-16px; top:4%; width:2px; height:92%;
      background:linear-gradient(to bottom, transparent, var(--gold2) 25%, var(--gold) 75%, transparent);
    }
    .hero-panel {
      position:relative; z-index:1;
      max-width:560px;
      padding:150px 0 120px;
      display:flex; flex-direction:column; justify-content:center;
    }
    .hero-eyebrow {
      display:flex; align-items:center; gap:14px;
      font-size:10.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
      color:var(--gold); margin-bottom:28px;
    }
    .hero-eyebrow::before { content:''; width:28px; height:1px; background:var(--gold); flex-shrink:0; }
    .hero-name {
      font-family:'Libre Baskerville',Georgia,serif;
      font-size:clamp(4.5rem,9vw,8.5rem);
      line-height:.88; font-weight:700; color:var(--cream);
      letter-spacing:-.025em; margin:0;
    }
    .hero-divider {
      width:64px; height:2px;
      background:linear-gradient(90deg,var(--gold2),var(--gold));
      margin:36px 0;
    }
    .hero-members {
      font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
      color:var(--dim); font-weight:600; margin-bottom:40px;
    }
    .hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px; }
    .hero-platforms { display:flex; gap:8px; flex-wrap:wrap; }
    .pill {
      display:inline-flex; align-items:center; gap:6px;
      padding:7px 13px; border-radius:999px;
      font-size:11.5px; font-weight:600; color:var(--cream);
      background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
      transition:background .2s, border-color .2s, transform .2s var(--ease);
    }
    .pill:hover { background:var(--glow); border-color:var(--gold); transform:translateY(-2px); }
    .hero-scroll {
      position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
      z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
      color:var(--dim); font-size:9px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
    }
    .hero-scroll-line {
      width:1px; height:48px;
      background:linear-gradient(to bottom,var(--gold),transparent);
      animation:scrollpulse 2.4s ease-in-out infinite;
    }
    @keyframes scrollpulse {
      0%,100%{ opacity:.25; transform:scaleY(.5); transform-origin:top; }
      50%{ opacity:1; transform:scaleY(1); transform-origin:top; }
    }

    /* ── MARQUEE ── */
    .marquee-wrap {
      border-top:1px solid var(--line); border-bottom:1px solid var(--line);
      background:var(--bg1); overflow:hidden; padding:14px 0;
    }
    .marquee-track {
      display:flex; gap:52px; white-space:nowrap;
      animation:mq 32s linear infinite;
    }
    @keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    .mq-item {
      display:flex; align-items:center; gap:14px; flex-shrink:0;
      font-size:11px; font-weight:700; letter-spacing:.2em;
      text-transform:uppercase; color:var(--dim);
    }
    .mq-item::before { content:'◆'; color:var(--gold); font-size:7px; }

    /* ── SERVICES / PRESTATIONS ── */
    .services { background:var(--bg2); padding:96px 0; border-top:1px solid var(--line); }
    .services-intro { margin-bottom:56px; }
    .services-intro p {
      margin-top:20px; font-size:16px; color:var(--muted);
      max-width:540px; line-height:1.85;
    }
    .services-grid {
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:22px;
    }
    .svc-card {
      padding:36px 32px 32px;
      border-radius:var(--r2);
      border:1px solid var(--line);
      background:var(--glass);
      display:flex; flex-direction:column; gap:14px;
      transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
    }
    .svc-card:hover {
      border-color:var(--lineB);
      transform:translateY(-6px);
      box-shadow:0 28px 64px rgba(0,0,0,.44);
    }
    .svc-icon {
      width:54px; height:54px; border-radius:var(--r3);
      background:var(--glow); border:1px solid rgba(212,160,40,.22);
      display:flex; align-items:center; justify-content:center;
      color:var(--gold2); flex-shrink:0;
    }
    .svc-title {
      font-family:'Libre Baskerville',serif;
      font-size:22px; font-weight:700; color:var(--cream); line-height:1.15;
    }
    .svc-desc {
      font-size:14.5px; color:var(--muted); line-height:1.82; flex:1;
    }
    .svc-tag {
      margin-top:8px;
      display:inline-flex; align-items:center; gap:6px;
      padding:5px 13px; border-radius:999px;
      font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
      background:var(--bg3); border:1px solid var(--line); color:var(--dim);
      width:fit-content;
      transition:border-color .2s, color .2s;
    }
    a.svc-tag:hover { border-color:var(--gold); color:var(--gold2); }
    /* Dernière carte seule si nombre impair */
    .svc-lone {
      grid-column: 1 / -1;
      width: calc(50% - 11px);
      justify-self: center;
    }

    /* ── EYES SECTION ── */
    .eyes-section {
      position:relative; height:60vh; min-height:340px;
      overflow:hidden; display:flex; align-items:center; justify-content:center;
    }
    .eyes-bg {
      position:absolute; inset:0;
      background:url('../images/image13.png') center/cover no-repeat;
      animation:eyes-breathe 28s ease-in-out infinite;
    }
    @keyframes eyes-breathe {
      0%   { transform:scale(1.10); }
      50%  { transform:scale(1.42); }
      100% { transform:scale(1.10); }
    }
    .eyes-overlay {
      position:absolute; inset:0;
      background:
        linear-gradient(to bottom, var(--bg) 0%, transparent 18%, transparent 80%, var(--bg) 100%),
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(6,4,3,.15), rgba(6,4,3,.55));
    }
    .eyes-content { position:relative; z-index:1; text-align:center; padding:0 24px; }
    .eyes-content .kicker { justify-content:center; }
    .eyes-content .kicker::before { display:none; }
    .eyes-content h2 { max-width:14ch; margin:14px auto 0; text-align:center; }
    .eyes-content p {
      margin-top:18px; font-size:16px; color:var(--muted);
      max-width:480px; margin-left:auto; margin-right:auto;
    }

    /* ── ABOUT ── */
    .about { background:var(--bg1); padding:96px 0; border-top:1px solid var(--line); }
    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
    .about-img-card {
      position:relative; border-radius:var(--r1); overflow:hidden;
      border:1px solid var(--lineB); box-shadow:0 24px 64px rgba(0,0,0,.5);
      aspect-ratio:3/4;
    }
    .about-img-card img { width:100%; height:100%; object-fit:cover; object-position:center top; }
    .about-img-overlay {
      position:absolute; inset:0;
      background:linear-gradient(180deg, transparent 40%, rgba(6,4,3,.75) 100%);
    }
    .about-img-label { position:absolute; bottom:0; left:0; right:0; padding:28px; }
    .about-img-label .tag {
      display:inline-flex; padding:5px 12px; border-radius:999px;
      font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
      background:var(--glow); border:1px solid rgba(212,160,40,.28); color:var(--gold2);
      margin-bottom:10px;
    }
    .about-img-label .name {
      font-family:'Libre Baskerville',serif; font-size:20px; color:var(--cream); font-weight:700;
    }
    .about-text { padding:8px 0; }
    .about-text h2 { margin-bottom:28px; }
    .about-bio { display:flex; flex-direction:column; gap:22px; }
    .bio-block {
      padding:24px 26px; border-radius:var(--r2);
      border:1px solid var(--line); background:var(--glass);
      transition:border-color .3s, transform .3s var(--ease);
    }
    .bio-block:hover { border-color:var(--lineB); transform:translateY(-3px); }
    .bio-name {
      font-family:'Libre Baskerville',serif;
      font-size:17px; font-weight:700; color:var(--cream); margin-bottom:10px;
      display:flex; align-items:center; gap:10px;
    }
    .bio-name span { font-size:13px; color:var(--dim); font-family:'Inter',sans-serif; font-weight:400; }
    .bio-block p { font-size:15px; color:var(--muted); line-height:1.85; }

    /* ── RELEASES ── */
    .releases { background:var(--bg); padding:96px 0; border-top:1px solid var(--line); }
    .releases-intro { margin-bottom:56px; }
    .releases-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
    /* Dernière carte seule si nombre impair de sorties */
    .rel-lone {
      grid-column: 1 / -1;
      width: calc(50% - 13px);
      justify-self: center;
    }
    .rel-card {
      position:relative; border-radius:var(--r2); overflow:hidden;
      border:1px solid var(--line); background:var(--bg2);
      box-shadow:0 8px 32px rgba(0,0,0,.35);
      cursor:pointer;
      transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
    }
    .rel-card:hover { transform:translateY(-7px) scale(1.005); border-color:var(--lineB); box-shadow:0 28px 70px rgba(0,0,0,.55); }
    .rel-thumb {
      position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--bg3);
    }
    .rel-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
    .rel-card:hover .rel-thumb img { transform:scale(1.05); }
    .rel-thumb-ov {
      position:absolute; inset:0;
      background:linear-gradient(180deg, transparent 35%, rgba(6,4,3,.72) 100%);
    }
    .play-icon {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%) scale(.8);
      width:56px; height:56px; border-radius:50%;
      background:rgba(212,160,40,.88); backdrop-filter:blur(4px);
      display:flex; align-items:center; justify-content:center;
      opacity:0; transition:opacity .3s, transform .3s var(--ease);
    }
    .play-icon svg { margin-left:4px; }
    .rel-card:hover .play-icon { opacity:1; transform:translate(-50%,-50%) scale(1); }
    .rel-meta { padding:20px 22px 24px; }
    .rel-genre { font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
    .rel-title { font-family:'Libre Baskerville',serif; font-size:20px; color:var(--cream); font-weight:700; line-height:1.2; }
    .rel-desc { font-size:13px; color:var(--dim); margin-top:6px; line-height:1.6; }
    .rel-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
    .rel-link {
      padding:7px 14px; border-radius:999px;
      font-size:12px; font-weight:600; color:var(--muted);
      background:var(--glass); border:1px solid var(--line);
      transition:background .2s, border-color .2s, color .2s;
    }
    .rel-link:hover { background:var(--glow); border-color:var(--gold); color:var(--gold2); }
    .rel-link.main {
      background:linear-gradient(135deg,var(--gold2),var(--gold));
      color:var(--bg); border:none; font-weight:700;
    }
    .rel-link.main:hover { box-shadow:0 4px 18px rgba(212,160,40,.38); }
    .platforms-band {
      grid-column:1/-1; margin-top:8px;
      padding:28px 32px; border-radius:var(--r2);
      border:1px solid var(--line); background:var(--glass);
      display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    }
    .platforms-band h3 { font-family:'Libre Baskerville',serif; font-size:19px; color:var(--cream); margin-bottom:6px; }
    .platforms-band p { font-size:14px; color:var(--muted); }
    .platform-btns { display:flex; gap:10px; flex-wrap:wrap; }

    /* ── MAKING OF ── */
    .making { background:var(--bg1); padding:96px 0; border-top:1px solid var(--line); }
    .making-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
    .making-visual { position:relative; }
    .making-img {
      border-radius:var(--r1); overflow:hidden;
      border:1px solid var(--lineB); box-shadow:0 32px 80px rgba(0,0,0,.55);
      aspect-ratio:3/4;
    }
    .making-img img { width:100%; height:100%; object-fit:cover; object-position:center top; }
    .making-glow { position:absolute; inset:-20%; z-index:-1; background:radial-gradient(circle at 50% 60%, rgba(212,160,40,.14), transparent 60%); }
    .making-text { padding:8px 0; }
    .making-text h2 { margin-bottom:22px; }
    .making-text p { font-size:16px; color:var(--muted); line-height:1.9; }
    .making-text p + p { margin-top:16px; }
    .making-detail {
      margin-top:32px; padding:22px 26px; border-radius:var(--r2);
      border:1px solid var(--line); background:var(--glass);
    }
    .making-detail-name { font-family:'Libre Baskerville',serif; font-size:16px; color:var(--gold2); margin-bottom:8px; }
    .making-detail p { font-size:14px; color:var(--muted); }

    /* ── VIDEO ── */
    .video-s { background:var(--bg); padding:96px 0; border-top:1px solid var(--line); }
    .video-main-grid { display:grid; grid-template-columns:1.65fr 1fr; gap:20px; margin-bottom:36px; }
    .video-side { display:grid; grid-template-rows:1fr 1fr; gap:20px; }
    .video-label { font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-top:12px; }
    .video-box {
      border-radius:var(--r2); overflow:hidden;
      border:1px solid var(--lineB); box-shadow:0 16px 48px rgba(0,0,0,.5); background:var(--bg);
    }
    .video-box video { width:100%; aspect-ratio:16/9; display:block; }
    .video-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }

    /* ── PRESS ── */
    .press { background:var(--bg1); padding:96px 0; border-top:1px solid var(--line); }
    .press-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
    .press-lone { grid-column:1/-1; width:calc(50% - 12px); justify-self:center; }
    .press-card {
      padding:36px; border-radius:var(--r2);
      border:1px solid var(--line); background:var(--glass);
      display:flex; flex-direction:column;
      transition:border-color .3s, transform .3s var(--ease);
    }
    .press-card:hover { border-color:var(--lineB); transform:translateY(-4px); }
    .press-head { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
    .press-logo {
      width:48px; height:48px; border-radius:var(--r3);
      background:var(--bg3); border:1px solid var(--line);
      display:flex; align-items:center; justify-content:center;
      font-size:20px; flex-shrink:0;
    }
    .press-src { font-weight:700; font-size:16px; color:var(--cream); }
    .press-date { font-size:12px; color:var(--dim); margin-top:3px; }
    .press-quote { font-size:17px; font-style:italic; color:var(--muted); line-height:1.82; flex:1; border-left:2px solid var(--gold); padding-left:18px; }
    .press-foot { margin-top:26px; }
    .trust {
      margin-top:30px; padding:20px 28px; border-radius:var(--r2);
      background:var(--glass); border:1px solid var(--line);
      display:flex; align-items:center; gap:32px; flex-wrap:wrap;
    }
    .trust-item { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--muted); }
    .trust-item svg { color:var(--gold); flex-shrink:0; }

    /* ── CONTACT ── */
    .contact { background:var(--bg2); padding:96px 0; border-top:1px solid var(--line); }
    .contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
    .contact-lone { grid-column:1/-1; width:calc(50% - 14px); justify-self:center; }
    .contact-card {
      padding:40px; border-radius:var(--r2);
      border:1px solid var(--line); background:var(--glass);
    }
    .contact-card h3 { font-family:'Libre Baskerville',serif; font-size:24px; color:var(--cream); margin-top:14px; margin-bottom:16px; }
    .contact-card p { font-size:15px; color:var(--muted); line-height:1.88; }
    .contact-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
    .info-list { margin-top:20px; display:grid; gap:0; }
    .info-row { padding:14px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
    .info-row:last-child { border-bottom:none; }
    .info-row .lbl { font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
    .info-row .val { font-size:14px; color:var(--muted); }

    /* ── FOOTER ── */
    footer { background:var(--bg); border-top:1px solid var(--line); padding:56px 0 44px; }
    .footer-grid {
      display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px;
      padding-bottom:40px; border-bottom:1px solid var(--line);
    }
    .footer-desc { font-size:14px; color:var(--dim); line-height:1.8; max-width:300px; margin-top:14px; }
    .footer-col h4 { font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
    .footer-links { display:flex; flex-direction:column; gap:10px; }
    .footer-links a { font-size:13.5px; color:var(--dim); transition:color .2s; }
    .footer-links a:hover { color:var(--cream); }
    .footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:28px; flex-wrap:wrap; }
    .footer-copy { font-size:13px; color:var(--dim); }
    .socials { display:flex; gap:10px; }
    .social {
      width:36px; height:36px; border-radius:var(--r4);
      background:var(--glass); border:1px solid var(--line);
      display:flex; align-items:center; justify-content:center; color:var(--dim);
      transition:background .2s, border-color .2s, color .2s, transform .2s var(--ease);
    }
    .social:hover { background:var(--glow); border-color:var(--gold); color:var(--gold2); transform:translateY(-3px); }

    /* ════════════════════════════════════════════
       RESPONSIVE — TABLET 1024px
    ════════════════════════════════════════════ */
    @media(max-width:1024px) {
      /* Nav */
      nav { display:none; }
      .nav-cta { display:none; }
      .nav-burger { display:flex; }

      /* Hero */
      .hero-art { width:100%; }
      .hero-art::after { background:rgba(6,4,3,.80); }
      .hero-panel { max-width:100%; padding:130px 0 90px; }

      /* Services */
      .services-grid { grid-template-columns:1fr 1fr; }

      /* About / Making */
      .about-grid, .making-layout, .contact-layout { grid-template-columns:1fr; }
      .making-visual { max-width:320px; }
      .contact-lone { grid-column:auto; width:100%; justify-self:auto; }

      /* Releases */
      .releases-grid { grid-template-columns:1fr; }
      .rel-lone { grid-column:auto; width:100%; justify-self:auto; }

      /* Video */
      .video-main-grid { grid-template-columns:1fr; }
      .video-side { grid-template-rows:auto; grid-template-columns:1fr 1fr; }

      /* Footer */
      .footer-grid { grid-template-columns:1fr 1fr; }
      .footer-grid > div:first-child { grid-column:1/-1; }
    }

    /* ════════════════════════════════════════════
       RESPONSIVE — MOBILE 768px
    ════════════════════════════════════════════ */
    @media(max-width:768px) {
      .wrap { width:calc(100% - 36px); }

      /* Hero */
      .hero-panel { padding:100px 0 70px; }
      .hero-name { font-size:clamp(3.4rem,13vw,5rem); }
      .hero-members { font-size:11px; }
      .hero-divider { margin:26px 0; }
      .hero-scroll { display:none; }

      /* Services */
      .services-grid { grid-template-columns:1fr; gap:16px; }
      .svc-card { padding:26px 22px 22px; }
      .svc-title { font-size:19px; }
      .svc-lone { grid-column:auto; width:100%; justify-self:auto; }

      /* Eyes */
      .eyes-section { height:50vh; min-height:280px; }

      /* About */
      .about-img-card { aspect-ratio:4/3; }

      /* Releases */
      .releases-grid { gap:16px; }

      /* Video */
      .video-side { grid-template-columns:1fr; }

      /* Press */
      .press-grid { grid-template-columns:1fr; gap:16px; }
      .press-card { padding:26px; }
      .press-quote { font-size:15px; }

      /* Contact */
      .contact-layout { grid-template-columns:1fr; gap:16px; }
      .contact-card { padding:26px; }
      .contact-card h3 { font-size:20px; }

      /* Platforms */
      .platforms-band { flex-direction:column; align-items:flex-start; gap:18px; }
      .platform-btns { gap:8px; }

      /* Trust */
      .trust { gap:16px; padding:18px 20px; }
      .trust-item { font-size:12px; }

      /* Footer */
      .footer-grid { grid-template-columns:1fr; gap:28px; }
      .footer-grid > div:first-child { grid-column:auto; }
      .footer-bottom { flex-direction:column; align-items:flex-start; gap:14px; }
    }

    /* ════════════════════════════════════════════
       RESPONSIVE — SMALL MOBILE 480px
    ════════════════════════════════════════════ */
    @media(max-width:480px) {
      .wrap { width:calc(100% - 28px); }
      .hero-name { font-size:clamp(3rem,15vw,4.2rem); }
      .hero-name-zero::after { display:none; }
      .hero-cta { flex-direction:column; }
      .hero-cta .btn { width:100%; }
      h2 { font-size:clamp(1.75rem,7vw,2.4rem); }
      .btn { padding:11px 20px; font-size:12.5px; }
      .bio-block { padding:20px 18px; }
      .svc-card { padding:22px 18px 20px; }
      .svc-icon { width:44px; height:44px; }
    }

/* ══════════════════════════════════════════════════════════════════
   LECTEUR INLINE (section sorties)
══════════════════════════════════════════════════════════════════ */
.yt-inline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 3;
  background: #000;
}
.yt-stop {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 4;
  background: rgba(0,0,0,.72);
  border: none;
  border-radius: 50%;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
  transition: background .2s;
}
.yt-stop:hover { background: rgba(220,50,50,.85); }
.rel-card.playing .play-icon { opacity:1; transform:translate(-50%,-50%) scale(1); z-index:5; }
.rel-card.playing .rel-thumb-ov,
.rel-card.playing .rel-thumb img { opacity:0; pointer-events:none; }

/* ══════════════════════════════════════════════════════════════════
   EFFET LIVRE — overlay entre sections
══════════════════════════════════════════════════════════════════ */
#book-flip-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  perspective: 1600px;
  transform-style: preserve-3d;
}

/* La "page" qui tourne — visible seulement pendant l'animation */
#book-flip-front {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d0b09 0%, #1a1410 50%, #0d0b09 100%);
  transform-origin: left center;
  opacity: 0;
  backface-visibility: hidden;
  box-shadow: 8px 0 40px rgba(0,0,0,.8), inset -4px 0 20px rgba(0,0,0,.5);
}

/* Logo visible au milieu du flip */
#book-flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
#book-flip-back-content {
  text-align: center;
  transform: scaleX(-1);  /* corrige le mirroring de la backface */
}

/* Déclenché par JS .flipping */
#book-flip-overlay.flipping #book-flip-front {
  animation: bookTurn 1s cubic-bezier(.4,0,.2,1) forwards;
}
/* Logo apparaît au milieu */
#book-flip-overlay.show-logo #book-flip-back {
  animation: logoFlash .4s ease forwards;
}

@keyframes bookTurn {
  0%   { opacity:1; transform: rotateY(0deg); }
  20%  { opacity:1; transform: rotateY(-30deg); }
  50%  { opacity:1; transform: rotateY(-90deg); }
  80%  { opacity:.6; transform: rotateY(-150deg); }
  100% { opacity:0; transform: rotateY(-180deg); }
}

@keyframes logoFlash {
  0%   { opacity:0; }
  30%  { opacity:1; }
  70%  { opacity:1; }
  100% { opacity:0; }
}

/* Suppression de l'ancien floating player (remplacé) */
#float-player { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   REFONTE ARTISTIQUE GARB'0 — Dark Frequency Edition
════════════════════════════════════════════════════════════════════ */

/* ── Nouveaux tokens ── */
:root {
  --electric:   #f5d060;
  --glow-hard:  rgba(212,160,40,.55);
  --crimson:    rgba(200,55,55,.5);
  --violet:     rgba(115,70,210,.42);
}

/* ── Vignette de profondeur ── */
html::before {
  content:''; position:fixed; inset:0;
  pointer-events:none; z-index:9997;
  background:radial-gradient(ellipse at 50% 40%, transparent 48%, rgba(3,2,1,.42) 100%);
}

/* ── Shimmer gradient sur tous les titres h2 ── */
h2 {
  background:linear-gradient(128deg, var(--cream) 8%, var(--gold2) 44%, var(--cream) 82%);
  background-size:220% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:text-shimmer 9s linear infinite;
}
@keyframes text-shimmer {
  0%   { background-position:220% center; }
  100% { background-position:-220% center; }
}

/* ── Orbs ambiants — atmosphère cinématique ── */
.ambient-orbs {
  position:fixed; inset:0;
  pointer-events:none; z-index:0; overflow:hidden;
}
.orb {
  position:absolute; border-radius:50%;
  filter:blur(100px); animation:orb-float ease-in-out infinite;
}
.orb-1 {
  width:700px; height:700px; top:-18%; right:-14%;
  background:radial-gradient(circle at center, rgba(212,160,40,.17), transparent 68%);
  animation-duration:28s;
}
.orb-2 {
  width:500px; height:500px; top:38%; left:-20%;
  background:radial-gradient(circle at center, rgba(110,55,205,.11), transparent 68%);
  animation-duration:21s; animation-delay:-9s;
}
.orb-3 {
  width:380px; height:380px; bottom:6%; right:10%;
  background:radial-gradient(circle at center, rgba(212,160,40,.09), transparent 68%);
  animation-duration:17s; animation-delay:-5s;
}
@keyframes orb-float {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(38px,-48px) scale(1.055); }
  66%      { transform:translate(-24px,26px) scale(0.945); }
}

/* ── Sidebar sociale flottante (desktop) ── */
.social-sidebar {
  position:fixed; right:22px; top:50%;
  transform:translateY(-50%); z-index:50;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.social-sidebar::before,
.social-sidebar::after {
  content:''; width:1px; height:68px;
  background:linear-gradient(to bottom, transparent, var(--lineB));
}
.social-sidebar::after { background:linear-gradient(to top, transparent, var(--lineB)); }
.social-sidebar a {
  display:flex; align-items:center; justify-content:center;
  color:rgba(240,228,200,.72); transition:color .2s, transform .22s var(--ease);
  filter:drop-shadow(0 0 6px rgba(212,160,40,.18));
}
.social-sidebar a:hover { color:var(--gold2); transform:scale(1.32); filter:drop-shadow(0 0 10px rgba(240,200,74,.55)); }
.social-sidebar svg { width:19px; height:19px; }
@media(max-width:1280px) { .social-sidebar { display:none; } }

/* ── Fondu sur les bords du marquee ── */
.marquee-wrap { position:relative; }
.marquee-wrap::before,
.marquee-wrap::after {
  content:''; position:absolute;
  top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.marquee-wrap::before { left:0;  background:linear-gradient(to right, var(--bg1), transparent); }
.marquee-wrap::after  { right:0; background:linear-gradient(to left, var(--bg1), transparent); }

/* ── Séparateurs lumineux entre sections ── */
.about, .releases, .video-s, .press, .contact { position:relative; }
.about::before, .releases::before, .video-s::before,
.press::before, .contact::before {
  content:''; position:absolute;
  top:0; left:18%; right:18%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,160,40,.46), transparent);
  z-index:3;
}

/* ── Hero eyebrow — badge pill pulsant ── */
.hero-eyebrow {
  padding:6px 16px 6px 12px; border-radius:999px;
  background:rgba(212,160,40,.1); border:1px solid rgba(212,160,40,.26);
  width:fit-content; align-items:center; gap:10px;
}
.hero-eyebrow::before { display:none; }
.hero-eyebrow .dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--gold2);
  animation:dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%,100% { opacity:1; transform:scale(1);   box-shadow:0 0 0 0 rgba(240,200,74,.55); }
  50%      { opacity:.6; transform:scale(.7); box-shadow:0 0 0 5px rgba(240,200,74,0); }
}

/* ── Barres waveform animées ── */
.waveform {
  display:flex; align-items:center; gap:3px;
  height:32px; margin:24px 0;
}
.waveform span {
  display:block; width:3px; border-radius:2px;
  background:linear-gradient(to top, var(--gold), var(--gold2));
  animation:wave-bar 1.65s ease-in-out infinite;
  transform-origin:bottom center;
}
.waveform span:nth-child(1)  { height:22%; animation-delay:0s; }
.waveform span:nth-child(2)  { height:54%; animation-delay:.11s; }
.waveform span:nth-child(3)  { height:80%; animation-delay:.22s; }
.waveform span:nth-child(4)  { height:100%; animation-delay:.33s; }
.waveform span:nth-child(5)  { height:64%; animation-delay:.44s; }
.waveform span:nth-child(6)  { height:90%; animation-delay:.55s; }
.waveform span:nth-child(7)  { height:46%; animation-delay:.66s; }
.waveform span:nth-child(8)  { height:72%; animation-delay:.77s; }
.waveform span:nth-child(9)  { height:34%; animation-delay:.88s; }
.waveform span:nth-child(10) { height:58%; animation-delay:.99s; }
@keyframes wave-bar {
  0%,100% { transform:scaleY(.28); opacity:.5; }
  50%      { transform:scaleY(1);   opacity:1;  }
}

/* ── Boutons — glow renforcé au hover ── */
.btn-gold:hover {
  box-shadow:0 8px 40px rgba(212,160,40,.65), 0 0 60px rgba(212,160,40,.18);
  transform:translateY(-3px);
}
.btn-ghost:hover {
  box-shadow:0 0 0 1px rgba(212,160,40,.5), inset 0 0 24px rgba(212,160,40,.04);
}

/* ── Underline animé sur les liens nav ── */
nav a { position:relative; }
nav a::after {
  content:''; position:absolute;
  bottom:3px; left:12px; right:12px;
  height:1px; background:var(--gold2);
  transform:scaleX(0); transform-origin:center;
  transition:transform .26s var(--ease);
}
nav a:hover::after, nav a.active::after { transform:scaleX(1); }

/* ── Cartes prestation — numéro décoratif ── */
.svc-card { position:relative; overflow:hidden; }
.svc-num {
  position:absolute; top:12px; right:16px;
  font-family:'Libre Baskerville',serif;
  font-size:58px; font-weight:700; line-height:1;
  color:rgba(212,160,40,.065);
  pointer-events:none; user-select:none;
  transition:color .45s, transform .45s var(--ease);
}
.svc-card:hover .svc-num { color:rgba(212,160,40,.14); transform:translateY(-4px); }
.svc-card:hover {
  box-shadow:0 28px 64px rgba(0,0,0,.46),
             0 0 0 1px rgba(212,160,40,.18),
             inset 0 0 40px rgba(212,160,40,.025);
}

/* ── Guillemet décoratif sur les citations presse ── */
.press-quote { position:relative; padding-top:6px; }
.press-quote::before {
  content:'"';
  position:absolute; left:8px; top:-34px;
  font-size:92px; font-family:'Libre Baskerville',serif;
  color:var(--gold2); opacity:.12;
  line-height:1; pointer-events:none;
}
.press-card:hover {
  box-shadow:0 14px 44px rgba(0,0,0,.32),
             0 0 0 1px rgba(212,160,40,.14);
}
.press-logo { color:var(--gold); }

/* ── Blocs bio — hover enrichi ── */
.bio-block:hover {
  border-color:rgba(212,160,40,.4);
  box-shadow:0 4px 26px rgba(0,0,0,.28), inset 0 0 20px rgba(212,160,40,.02);
}

/* ── Badge NOUVEAU pulsant ── */
.badge-new {
  display:inline-flex; align-items:center;
  padding:2px 9px; border-radius:999px;
  font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  background:linear-gradient(135deg, var(--gold2), var(--gold));
  color:var(--bg); vertical-align:middle; margin-left:8px;
  animation:badge-pulse 3s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(212,160,40,.58); }
  50%      { box-shadow:0 0 0 7px rgba(212,160,40,0); }
}

/* ── Couleurs de genre par style ── */
.rel-genre.g-dub     { color:var(--gold2); }
.rel-genre.g-rock    { color:#93c5fd; }
.rel-genre.g-electro { color:#c4b5fd; }
.rel-genre.g-dark    { color:#fca5a5; }

/* ── Icône play agrandie + glow ── */
.play-icon { width:64px; height:64px; box-shadow:0 0 48px rgba(212,160,40,.44); }

/* ── Video box — hover glow ── */
.video-box {
  box-shadow:0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(212,160,40,.1);
  transition:box-shadow .3s;
}
.video-box:hover {
  box-shadow:0 20px 60px rgba(0,0,0,.62),
             0 0 0 1px rgba(212,160,40,.28),
             0 0 32px rgba(212,160,40,.08);
}

/* ── Mobile nav — underline au hover ── */
.mobile-nav a { position:relative; display:inline-block; }
.mobile-nav a::after {
  content:''; position:absolute;
  bottom:2px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold2), transparent);
  transform:scaleX(0); transition:transform .35s var(--ease);
}
.mobile-nav a:hover::after { transform:scaleX(.75); }

/* ── Image making / Skull Princess ── */
.making-img { transition:box-shadow .4s; }
.making-img:hover {
  box-shadow:0 32px 80px rgba(0,0,0,.62), 0 0 50px rgba(212,160,40,.14);
}

/* ── About image card ── */
.about-img-card {
  transition:box-shadow .4s;
}
.about-img-card:hover {
  box-shadow:0 32px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(212,160,40,.22);
}

/* ── Contact card hover ── */
.contact-card {
  transition:border-color .3s, box-shadow .3s;
}
.contact-card:hover {
  border-color:rgba(212,160,40,.28);
  box-shadow:0 8px 36px rgba(0,0,0,.26), inset 0 0 30px rgba(212,160,40,.02);
}

/* ── Eyes section ── */
.eyes-section { cursor:default; }
.eyes-bg {
  background-position:center 35% !important;
}

/* ── Scroll margin pour nav fixe ── */
section[id] { scroll-margin-top:68px; }

/* ── About — manifesto épilogue artistique ── */
.about--has-manifesto { padding-bottom:0; }
.about-manifesto { margin-top:64px; }
.about-quote {
  font-family:'Libre Baskerville',serif;
  font-size:clamp(1.2rem,2.6vw,1.75rem);
  font-weight:400; font-style:italic;
  color:var(--cream); line-height:1.58;
  margin:0 0 26px; text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.about-quote-line {
  width:44px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);
  margin:0 auto 16px;
}
.about-quote-credit {
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); font-weight:600; margin-bottom:32px;
}

/* ── Veil de transition entre sections ── */
.section-veil {
  position:fixed; inset:0; z-index:9990;
  background:radial-gradient(ellipse at center, rgba(3,2,1,.62) 0%, rgba(3,2,1,.38) 100%);
  opacity:0; pointer-events:none;
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}
.section-veil.active {
  pointer-events:all;
  animation:veil-flash .38s cubic-bezier(.4,0,.2,1) forwards;
}
.section-veil::after {
  content:''; position:absolute;
  left:-100%; right:-100%; height:1px; top:50%;
  background:linear-gradient(90deg, transparent 0%, rgba(240,200,74,.95) 50%, transparent 100%);
  opacity:0;
}
.section-veil.active::after { animation:veil-sweep .38s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes veil-flash {
  0%   { opacity:0; }
  28%  { opacity:1; }
  65%  { opacity:1; }
  100% { opacity:0; }
}
@keyframes veil-sweep {
  0%   { transform:translateX(-60%); opacity:0; }
  35%  { opacity:1; }
  65%  { opacity:1; }
  100% { transform:translateX(60%); opacity:0; }
}

/* ── Grille vidéo uniforme — 3 colonnes égales ── */
.video-uniform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.video-item {}
/* Vidéo seule (nb non multiple de 3) : placée en colonne du milieu */
.vid-lone { grid-column: 2; }

/* ── Skull Princess — Grande section identité visuelle ── */
.skull-showcase {
  position: relative;
  border-radius: var(--r1);
  overflow: hidden;
  border: 1px solid var(--lineB);
  box-shadow: 0 32px 80px rgba(0,0,0,.60);
  display: grid;
  grid-template-columns: 420px 1fr;
  min-height: 520px;
}

/* Zone image avec effet halo + flou */
.skull-showcase-img {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 36px;
  background: var(--bg3);
}

/* Couche floutée — même image en fond, fortement blurée */
.skull-blur-layer {
  position: absolute;
  inset: -15%;
  background-size: cover;
  background-position: center top;
  filter: blur(52px) brightness(0.38) saturate(1.6);
  z-index: 0;
  transform: scale(1.1);
  border-radius: 50%;
  transition: filter 1s ease;
}
.skull-showcase:hover .skull-blur-layer {
  filter: blur(44px) brightness(0.48) saturate(1.8);
}

/* Anneau de glow doré derrière l'image */
.skull-glow-ring {
  position: absolute;
  width: 340px; height: 420px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(212,160,40,.30) 0%,
    rgba(160,100,210,.14) 38%,
    transparent 68%
  );
  filter: blur(22px);
  z-index: 1;
  pointer-events: none;
  animation: skull-pulse 5s ease-in-out infinite;
}
@keyframes skull-pulse {
  0%,100% { opacity:.7; transform:translate(-50%,-50%) scale(1); }
  50%      { opacity:1;  transform:translate(-50%,-50%) scale(1.08); }
}

/* Image nette par-dessus le flou */
.skull-showcase-img > img {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 280px;
  max-height: 400px;
  object-fit: contain;
  object-position: center top;
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(212,160,40,.28),
    0 12px 50px rgba(0,0,0,.65),
    0 0 70px rgba(212,160,40,.20),
    0 0 130px rgba(212,160,40,.07);
  filter: drop-shadow(0 0 28px rgba(212,160,40,.25));
  transition: transform .8s var(--ease), filter .8s ease;
}
.skull-showcase:hover .skull-showcase-img > img {
  transform: scale(1.04) translateY(-4px);
  filter: drop-shadow(0 0 44px rgba(212,160,40,.42));
}

/* Fondu sur le bord droit vers le texte */
.skull-showcase-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 62%, var(--bg1) 100%);
  z-index: 3;
  pointer-events: none;
}

.skull-showcase-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 52px;
  background: var(--bg1);
  position: relative;
  z-index: 1;
}
.skull-showcase-title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--cream);
  font-weight: 700;
  line-height: 1.15;
  margin: 14px 0 0;
}
.skull-showcase-divider {
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  margin: 22px 0 20px;
}
.skull-showcase-text p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.9;
}

@media(max-width:1024px) {
  .video-uniform-grid { grid-template-columns: repeat(2, 1fr); }
  .vid-lone { grid-column: 1/-1; width: calc(50% - 10px); justify-self: center; }
  .skull-showcase { grid-template-columns: 1fr 1fr; }
}
@media(max-width:768px) {
  .vid-lone { grid-column: auto; width: 100%; justify-self: auto; }
  .press-lone { grid-column: auto; width: 100%; justify-self: auto; }
}
@media(max-width:768px) {
  .video-uniform-grid { grid-template-columns: 1fr; }
  .skull-showcase {
    grid-template-columns: 1fr;
  }
  .skull-showcase-img {
    min-height: 360px;
    padding: 40px 24px;
  }
  .skull-showcase-img::after {
    background: linear-gradient(to bottom, transparent 65%, var(--bg1) 100%);
  }
  .skull-showcase-text { padding: 36px 28px; }
  .skull-glow-ring { width: 260px; height: 320px; }
}

/* ══════════════════════════════════════════════════════════════════
   SKULL PRINCESS — Section cinématique pleine largeur
══════════════════════════════════════════════════════════════════ */
.skull-hero {
  position: relative;
  overflow: hidden;
  padding: 90px 24px 100px;
  text-align: center;
  margin-top: 0;
}
.skull-hero-blur-bg {
  position: absolute;
  inset: -20%;
  background-size: cover;
  background-position: center top;
  filter: blur(80px) brightness(0.22) saturate(1.8);
  transform: scale(1.2);
  z-index: 0;
}
.skull-hero-vignette {
  position: absolute;
  inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 50%, transparent 28%, rgba(6,4,3,.72) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 12%, transparent 88%, var(--bg) 100%);
}
.skull-hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
.skull-hero-stage {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 36px 0 44px;
}
/* Anneaux de glow concentriques */
.skull-ring {
  position: absolute; border-radius: 50%;
  animation: skull-ring-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
.skull-ring-1 {
  width: 400px; height: 400px;
  border: 1px solid rgba(212,160,40,.26);
  background: radial-gradient(circle, rgba(212,160,40,.10) 0%, transparent 62%);
  animation-delay: 0s;
}
.skull-ring-2 {
  width: 560px; height: 560px;
  border: 1px solid rgba(212,160,40,.12);
  animation-delay: .7s;
}
.skull-ring-3 {
  width: 720px; height: 720px;
  border: 1px solid rgba(212,160,40,.05);
  animation-delay: 1.4s;
}
@keyframes skull-ring-pulse {
  0%,100% { opacity:.35; transform:scale(.96); }
  50%      { opacity:1;   transform:scale(1.04); }
}
/* Spotlight depuis le haut */
.skull-spotlight {
  position: absolute;
  top: -220px; left: 50%; transform: translateX(-50%);
  width: 280px; height: 520px;
  background: linear-gradient(180deg, rgba(212,160,40,.14) 0%, rgba(212,160,40,.04) 60%, transparent 100%);
  filter: blur(18px);
  pointer-events: none; z-index: 0;
}
/* L'image — grande, nette, avec glow */
.skull-hero-stage > img {
  position: relative; z-index: 3;
  width: auto;
  max-width: min(400px, 85vw);
  max-height: 80vh;
  object-fit: contain;
  object-position: center top;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(212,160,40,.32),
    0 24px 70px rgba(0,0,0,.80),
    0 0 90px rgba(212,160,40,.24),
    0 0 180px rgba(212,160,40,.09);
  filter: drop-shadow(0 0 40px rgba(212,160,40,.30));
  transition: max-width 0.5s ease, transform 1.4s var(--ease), filter 1.4s ease, box-shadow 1.4s ease;
}
.skull-hero:hover .skull-hero-stage > img {
  transform: scale(1.06) translateY(-10px);
  filter: drop-shadow(0 0 65px rgba(212,160,40,.50));
  box-shadow:
    0 0 0 1px rgba(212,160,40,.45),
    0 32px 90px rgba(0,0,0,.85),
    0 0 120px rgba(212,160,40,.34),
    0 0 240px rgba(212,160,40,.12);
}
.skull-hero-content { max-width: 560px; padding: 0 20px; }
.skull-hero-title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cream); font-weight: 700; margin: 0 0 0;
}
.skull-hero-divider {
  width: 52px; height: 2px;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  margin: 20px auto 22px;
}
.skull-hero-desc {
  font-size: 15.5px; color: var(--muted); line-height: 1.9; margin: 0;
}
.skull-hero-sub {
  font-size: 13.5px; color: var(--dim); line-height: 1.85; margin-top: 14px;
}
@media(max-width:768px) {
  .skull-ring-1 { width: 300px; height: 300px; }
  .skull-ring-2 { width: 420px; height: 420px; }
  .skull-ring-3 { width: 540px; height: 540px; }
  .skull-hero-stage > img { max-height: 65vh; }
  .skull-hero { padding: 70px 20px 80px; }
}

/* ── Bouton play intégré au hero (à côté de la waveform) ── */
.hero-audio {
  display:flex; align-items:center; gap:14px;
  margin:24px 0;
}
.hero-play-btn {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:rgba(212,160,40,.12); border:1px solid rgba(212,160,40,.32);
  color:var(--gold2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .22s, border-color .22s, transform .22s var(--ease), box-shadow .22s;
}
.hero-play-btn:hover {
  background:rgba(212,160,40,.22); border-color:rgba(212,160,40,.58);
  transform:scale(1.1);
}
.hero-play-btn.playing {
  background:rgba(212,160,40,.18); border-color:rgba(212,160,40,.55);
  box-shadow:0 0 18px rgba(212,160,40,.28);
}

/* ════════════════════════════════════════════════════════════════════
   SAFE AREA — iPhone notch / Dynamic Island / Android cutout
════════════════════════════════════════════════════════════════════ */
#nav {
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.wrap {
  padding-left:max(0px, env(safe-area-inset-left));
  padding-right:max(0px, env(safe-area-inset-right));
}
footer {
  padding-bottom:max(44px, calc(env(safe-area-inset-bottom) + 44px));
}

/* ════════════════════════════════════════════════════════════════════
   TOUCH — cibles min 44px (Apple HIG / Android guidelines)
════════════════════════════════════════════════════════════════════ */
.btn { min-height:44px; min-width:44px; }
nav a { min-height:44px; display:inline-flex; align-items:center; }
.nav-burger { min-height:44px; min-width:44px; }
.mobile-nav-close { min-height:44px; min-width:44px; }
.mobile-nav a { min-height:52px; display:inline-flex; align-items:center; justify-content:center; }
.pill { min-height:36px; }
.rel-link { min-height:36px; }
.hero-play-btn { min-height:44px; min-width:44px; }

/* ════════════════════════════════════════════════════════════════════
   TABLET AMÉLIORÉ — 900px
════════════════════════════════════════════════════════════════════ */
@media(max-width:900px) {
  .skull-showcase { grid-template-columns:1fr; }
  .skull-showcase-img { min-height:320px; }
  .skull-showcase-img::after {
    background:linear-gradient(to bottom, transparent 62%, var(--bg1) 100%);
  }
  .skull-showcase-text { padding:36px 28px 40px; }
  .making-layout { grid-template-columns:1fr; }
  .making-visual { max-width:300px; margin:0 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE AMÉLIORÉ — 768px
════════════════════════════════════════════════════════════════════ */
@media(max-width:768px) {
  /* Hero platforms — scroll horizontal si nécessaire */
  .hero-platforms { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .hero-platforms::-webkit-scrollbar { height:2px; }
  .hero-platforms::-webkit-scrollbar-thumb { background:var(--lineB); border-radius:1px; }

  /* Nav inner — pas de débordement */
  .nav-inner { gap:8px; }
  .brand-sub { display:none; }

  /* Hero panel — plus de padding top pour la nav */
  .hero-panel { padding:90px 0 60px; }

  /* Orbs réduits sur mobile */
  .orb-1 { width:300px; height:300px; right:-10%; top:-8%; }
  .orb-2 { width:220px; height:220px; left:-12%; top:30%; }
  .orb-3 { width:160px; height:160px; bottom:4%; right:5%; }

  /* Skull rings — éviter overflow */
  .skull-ring-1 { width:280px; height:280px; }
  .skull-ring-2 { width:380px; height:380px; }
  .skull-ring-3 { width:480px; height:480px; }
  .skull-hero { overflow:hidden; }

  /* Making */
  .making-visual { max-width:260px; margin:0 auto; }
  .making-text { padding:0; }
  .making-detail { margin-top:24px; }

  /* Bande plateformes sorties */
  .platforms-band { padding:22px 20px; text-align:center; }
  .platform-btns { justify-content:center; }

  /* Contact */
  .contact-lone { grid-column:auto; width:100%; justify-self:auto; }

  /* Video actions */
  .video-actions { gap:8px; }
  .video-actions .btn { flex:1; justify-content:center; font-size:12px; padding:10px 12px; }

  /* Trust band */
  .trust { justify-content:center; text-align:center; }
  .trust-item { flex-direction:column; gap:6px; text-align:center; }

  /* Section padding réduit */
  .services, .about, .releases, .video-s, .press, .contact, .making {
    padding:72px 0;
  }
  .skull-hero { padding:60px 16px 70px; }
}

/* ════════════════════════════════════════════════════════════════════
   SMALL MOBILE — 480px (iPhone SE 2/3, Galaxy A série)
════════════════════════════════════════════════════════════════════ */
@media(max-width:480px) {
  /* Hero */
  .hero-panel { padding:84px 0 56px; }
  .hero-eyebrow { font-size:9.5px; padding:5px 12px 5px 10px; }
  .hero-cta { gap:8px; }
  .hero-audio { margin:18px 0; }
  .waveform { height:26px; margin:0; }

  /* Sorties — meta */
  .rel-meta { padding:16px 16px 18px; }
  .rel-title { font-size:17px; }

  /* Presse — quote */
  .press-quote { font-size:14.5px; }
  .press-head { gap:10px; }
  .press-src { font-size:14px; }

  /* Bio blocks */
  .bio-name { font-size:15px; }

  /* Buttons hero pleine largeur */
  .hero-cta .btn { width:100%; }

  /* Contact cards */
  .contact-actions { flex-direction:column; }
  .contact-actions .btn { width:100%; justify-content:center; }

  /* Skull showcase */
  .skull-showcase-text { padding:28px 20px 32px; }
  .skull-showcase-title { font-size:1.6rem; }
}

/* ════════════════════════════════════════════════════════════════════
   VERY SMALL — 360px (Galaxy S old, iPhone SE 1st gen)
════════════════════════════════════════════════════════════════════ */
@media(max-width:360px) {
  .wrap { width:calc(100% - 24px); }
  .hero-name { font-size:clamp(2.8rem,15vw,3.8rem); }
  .hero-name-zero::after { display:none; }
  h2 { font-size:clamp(1.6rem,8vw,2.2rem); }
  .btn { font-size:12px; padding:10px 16px; }
  .svc-card { padding:18px 16px; }
  .svc-title { font-size:17px; }
  .svc-desc { font-size:13.5px; }
  .press-card, .contact-card { padding:22px 16px; }
  .bio-block { padding:18px 14px; }

  /* Nav brand — plus compact */
  .brand-name { font-size:15px; }
  .brand-img { width:32px; height:32px; }

  /* Skulls rings encore plus petits */
  .skull-ring-1 { width:220px; height:220px; }
  .skull-ring-2 { width:300px; height:300px; }
  .skull-ring-3 { width:380px; height:380px; }
}

/* ════════════════════════════════════════════════════════════════════
   iOS SAFARI — correctifs spécifiques
════════════════════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {
  /* Désactive le tap highlight bleu sur iOS */
  * { -webkit-tap-highlight-color: transparent; }

  /* Évite le rebond sur le body */
  body { -webkit-overflow-scrolling: auto; }

  /* ios: min-height:100svh est déjà utilisé pour le hero — OK */

  /* Boutons : éviter le style natif iOS */
  .btn, .btn-login, .nav-burger, .mobile-nav-close, .hero-play-btn {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PRINT — si quelqu'un imprime la page
════════════════════════════════════════════════════════════════════ */
@media print {
  #nav, .social-sidebar, .ambient-orbs, #bar, .mobile-nav,
  .hero-scroll, .section-veil, .waveform { display:none !important; }
  body { background:#fff; color:#000; }
  .hero { min-height:auto; padding:40px 0; }
}