/* Centre toute la section au milieu de l'écran */
#download{
  display: grid;
  place-items: center;       /* centre horizontal + vertical */
  padding: 56px 20px;        /* espace respirant */
  min-height: clamp(260px, 40vh, 420px);
}

/* Centre le contenu et aligne les éléments */
#download .container{
  display: grid;
  justify-items: center;     /* centre les enfants horizontalement */
  text-align: center;        /* texte centré */
  gap: 14px;                 /* espace entre les éléments */
}

/* Assure que le bouton est bien centré et joli */
#download .btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px auto 0;
}

            /* Étire les colonnes du hero à la même hauteur */
    .hero .grid { align-items: stretch; }

    /* Carte contenant le viewer */
    .hero-card{
    position: relative;
    padding: 0;                 /* pas d’espace interne, le 3D couvre tout */
    border-radius: var(--radius, 16px);
    overflow: hidden;
    background: var(--bg-elev, #12151a);
    border: 1px solid color-mix(in oklab, var(--fg, #e7ecf3) 14%, transparent);
    box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.35));

    /* hauteur adaptable + garde-fou responsive */
    min-height: clamp(360px, 48vh, 640px);
    }

    /* Le custom element doit être block et occuper toute la carte */
    .hero-card > spline-viewer{
    display: block;
    position: absolute;
    inset: 0;            /* top/right/bottom/left: 0 */
    width: 100%;
    height: 100%;
    }

    /* Optionnel : imposer une proportion quand l’écran est très large */
    @supports (aspect-ratio: 16 / 10) {
    .hero-card { aspect-ratio: 16 / 10; min-height: unset; }
    }


    :root{
      --bg:#0b0d10; --bg-elev:#12151a; --fg:#e7ecf3; --muted:#a3adba;
      --brand:#3aa6ff; --brand2:#7c4dff; --ring:0 0 0 8px rgb(58 166 255 / 14%);
      --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    @media (prefers-color-scheme: light){
      :root{ --bg:#f7f9fc; --bg-elev:#ffffff; --fg:#0f1723; --muted:#5b6470; --shadow:0 10px 30px rgba(2,6,23,.08); }
    }
    /* Bridge for explicit class toggling via JS */
    body.dark-mode{ --bg:#0b0d10; --bg-elev:#12151a; --fg:#e7ecf3; --muted:#a3adba; }
    body.light-mode{ --bg:#f7f9fc; --bg-elev:#ffffff; --fg:#0f1723; --muted:#5b6470; }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--fg);
      background: radial-gradient(1200px 600px at 110% 10%, rgba(58,166,255,.16), transparent 70%),
                  radial-gradient(1200px 600px at 10% -10%, rgba(124,77,255,.16), transparent 70%), var(--bg); }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}

    .container{max-width:1120px; margin-inline:auto; padding:16px 20px}

    header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(6px);
      background:color-mix(in oklab, var(--bg) 82%, transparent); border-bottom:1px solid color-mix(in oklab, var(--fg) 12%, transparent)}
    .row{display:flex; align-items:center; gap:12px}
    .logo{font-weight:800; letter-spacing:.5px}
    .spacer{flex:1}

    .nav-menu{display:flex; gap:16px}
    .menu-toggle{display:none; height:40px; width:40px; border-radius:999px; border:1px solid color-mix(in oklab, var(--fg) 14%, transparent); background:var(--bg-elev); color:var(--fg)}
    .selector, .theme-chip{height:40px; border-radius:999px; border:1px solid color-mix(in oklab, var(--fg) 14%, transparent); background:var(--bg-elev); color:var(--fg); padding:0 14px}

    @media (max-width: 900px){
      .nav-menu{display:none}
      .nav-menu.show{display:flex; position:absolute; right:20px; top:60px; flex-direction:column; gap:12px; background:var(--bg-elev); border:1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius:16px; padding:12px; width:min(92vw,340px)}
      .menu-toggle{display:inline-grid; place-items:center}
    }

    .hero{padding:68px 20px 36px}
    .grid{display:grid; grid-template-columns:1.2fr .9fr; gap:28px; align-items:center}
    @media (max-width:980px){.grid{grid-template-columns:1fr}}
    .eyebrow{display:inline-flex; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid color-mix(in oklab, var(--fg) 16%, transparent)}
    .title{font-size:clamp(2rem,4vw+1rem,3.6rem); line-height:1.05; margin:14px 0 10px; font-weight:800}
    .lead{color:var(--muted); max-width:60ch}
    .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-weight:600; border:1px solid transparent}
    .btn-primary{background:linear-gradient(120deg, var(--brand), var(--brand2)); color:#fff}
    .btn-secondary{border:1px solid color-mix(in oklab, var(--fg) 18%, transparent)}

    .hero-card{border:1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius:16px; background:var(--bg-elev); box-shadow:var(--shadow); padding:18px}
    spline-viewer{width:100%; min-height:440px; border-radius:12px; overflow:hidden}

    section{padding:56px 20px}
    .section-title{font-size:2rem; margin:0 0 10px}
    .section-sub{color:var(--muted); max-width:70ch}

    .features{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
    @media (max-width:980px){.features{grid-template-columns:1fr 1fr}}
    @media (max-width:620px){.features{grid-template-columns:1fr}}
    .card{background:var(--bg-elev); border:1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
    .icon-wrap{width:56px; height:56px; border-radius:14px; display:grid; place-items:center; background:color-mix(in oklab, var(--brand) 18%, transparent)}

    /* ======= Audio Image Grid ======= */
    .image-grid{display:grid; gap:16px; grid-template-columns:repeat(4,1fr)}
    @media (max-width:980px){.image-grid{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:700px){.image-grid{grid-template-columns:repeat(2,1fr)}}
    .image-item{position:relative; border-radius:16px; overflow:hidden; border:1px solid color-mix(in oklab, var(--fg) 14%, transparent); background:var(--bg-elev); box-shadow:var(--shadow)}
    .image-item img{aspect-ratio:1/1; object-fit:cover; width:100%}
    .image-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px}
    .track-title{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .music-button{position:absolute; inset:auto 10px 62px auto; transform:translateZ(0); border:none; border-radius:50%; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(0,0,0,.55)}
    body.light-mode .music-button{background:rgba(0,0,0,.55)}
    .progress{position:absolute; left:0; right:0; bottom:0; height:6px; background:color-mix(in oklab, var(--fg) 12%, transparent)}
    .progress > span{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--brand), var(--brand2))}

    footer{padding:36px 20px; border-top:1px solid color-mix(in oklab, var(--fg) 14%, transparent); background:color-mix(in oklab, var(--bg-elev) 70%, transparent)}