/* Accueil Ureshima : la bande des licences sous le hero, le dôme des beats (pochettes en ronds qu'on fait glisser,
   qu'on zoome et qu'on ouvre en grand), l'univers de l'île sous le dôme, et un hero qui garde l'écran du téléphone. */

/* Le hero remplit l'écran du téléphone : la suite ne passe plus sous le lecteur et le dock. */
@media (max-width: 1023px) {
  .hero-in,
  .hero .hero-in {
    min-height: calc(100svh + 4px);
    padding-bottom: calc(var(--dock-h, 64px) + var(--barre-h, 72px) + 44px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── La bande des licences ── */
.bande-licences { padding: 22px 0 4px; }
.bande-licences .bl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bl-carte {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 14px 12px;
  border: 1px solid var(--ligne); border-radius: 18px; background: rgba(255, 255, 255, .035);
  color: inherit; text-decoration: none; transition: border-color .2s, transform .2s;
}
.bl-carte:hover { border-color: var(--cyan, #38d6e8); transform: translateY(-2px); }
.bl-nom { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-clair, #7de7f3); }
.bl-prix { font-size: clamp(16px, 4.4vw, 22px); font-weight: 800; line-height: 1.15; color: var(--txt, #f0eaf2); }
.bl-prix small { display: block; font-size: .62em; font-weight: 600; color: var(--txt2, #a89bb0); }
.bl-plus { font-size: 12.5px; line-height: 1.35; color: var(--txt2, #a89bb0); }
.bl-lien {
  display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--txt, #f0eaf2);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.bl-lien span { display: inline-block; margin-left: 6px; text-decoration: none; }
@media (max-width: 420px) {
  .bande-licences .bl { gap: 7px; }
  .bl-carte { padding: 11px 9px 10px; border-radius: 15px; }
  .bl-nom { font-size: 9.5px; letter-spacing: .12em; }
  .bl-plus { font-size: 11px; }
}

/* ── Sans JavaScript : une rangée de quatre qu'on fait défiler ── */
#beats .grille:not(.dome-on) {
  display: grid; grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: minmax(190px, calc((100% - 48px) / 4)); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px;
}
#beats .grille:not(.dome-on) > .carte { scroll-snap-align: start; }
@media (max-width: 640px) { #beats .grille:not(.dome-on) { grid-auto-columns: 46%; } }

/* ── Le dôme ── */
.dome-vue {
  --d: 80px;
  position: relative; height: clamp(380px, 60svh, 600px); margin: 8px 0 0; overflow: hidden;
  border-radius: 30px; border: 1px solid var(--ligne);
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(56, 214, 232, .10), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 120%, rgba(255, 95, 162, .10), transparent 70%),
    var(--fond2, #0f0f1a);
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dome-vue.zoome { touch-action: none; }
.dome-vue.glisse { cursor: grabbing; }
#beats .dome-vue .grille.dome-on { display: block; position: absolute; inset: 0; margin: 0; padding: 0; overflow: visible; }
#beats .grille.dome-on > .carte.beat {
  position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); margin: 0; padding: 0;
  border-radius: 50%; overflow: hidden; transform-origin: 50% 50%; will-change: transform;
  background: #111; border: 0; box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .09);
}
#beats .grille.dome-on > .carte.beat[hidden] { display: none; }
#beats .grille.dome-on > .carte.beat.joue { box-shadow: 0 0 0 3px var(--cyan, #38d6e8), 0 0 34px rgba(56, 214, 232, .55); }
#beats .grille.dome-on .carte-img { position: absolute; inset: 0; margin: 0; border-radius: 50%; aspect-ratio: auto; }
#beats .grille.dome-on .carte-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; -webkit-user-drag: none; }
#beats .grille.dome-on .carte-voile { display: none; }
#beats .grille.dome-on .carte-bas {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#beats .grille.dome-on > .carte.beat:focus-within { outline: 3px solid var(--cyan, #38d6e8); outline-offset: 3px; }
.dome-entree .grille.dome-on .carte-img { animation: dome-pop .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 16ms); }
@keyframes dome-pop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }

.dome-aide, .dome-legende {
  position: absolute; left: 50%; transform: translateX(-50%); margin: 0; z-index: 120; pointer-events: none;
  font-size: 12px; letter-spacing: .08em; color: var(--txt2, #a89bb0); white-space: nowrap;
}
.dome-aide { top: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(7, 7, 13, .62); transition: opacity .4s; }
.dome-vue.touche .dome-aide { opacity: 0; }
.dome-legende {
  bottom: 14px; max-width: calc(100% - 120px); overflow: hidden; text-overflow: ellipsis;
  font-size: 13.5px; letter-spacing: .02em; color: var(--txt, #f0eaf2); font-weight: 600;
  padding: 7px 14px; border-radius: 999px; background: rgba(7, 7, 13, .7); backdrop-filter: blur(6px);
}
.dome-zoom { position: absolute; right: 12px; bottom: 10px; z-index: 121; display: flex; flex-direction: column; gap: 8px; }
.dome-z {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne); cursor: pointer;
  background: rgba(7, 7, 13, .72); color: var(--txt, #f0eaf2); font-size: 21px; line-height: 1; padding: 0;
}
.dome-z:hover { border-color: var(--cyan, #38d6e8); }

/* ── Le vinyle ouvert en grand ── */
body.dome-ouvert { overflow: hidden; }
.dome-vinyle { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; }
.dome-vinyle[hidden] { display: none; }
.dv-fond { position: absolute; inset: 0; background: rgba(5, 6, 14, .78); backdrop-filter: blur(8px); opacity: 0; transition: opacity .22s; }
.dv-boite {
  position: relative; width: min(420px, 100%); text-align: center; padding: 26px 20px 22px;
  border-radius: 30px; border: 1px solid var(--ligne); background: linear-gradient(180deg, #15111f, #0b0a13);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); transform: translateY(18px) scale(.96); opacity: 0;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .22s;
}
.dome-vinyle.on .dv-fond { opacity: 1; }
.dome-vinyle.on .dv-boite { transform: none; opacity: 1; }
.dv-x {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ligne); background: rgba(255, 255, 255, .05); color: var(--txt, #f0eaf2); font-size: 22px; line-height: 1;
}
.dv-disque {
  position: relative; width: min(64vw, 270px); aspect-ratio: 1; margin: 6px auto 18px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 6px #050508, 0 0 0 7px rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .65), 0 0 60px rgba(56, 214, 232, .25);
  animation: dv-tourne 7s linear infinite; animation-play-state: paused;
}
.dome-vinyle.joue .dv-disque { animation-play-state: running; }
.dv-disque img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-sillons {
  position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: overlay; opacity: .55;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .35) 0 1px, transparent 1px 4px),
    conic-gradient(from 210deg, transparent 0 20%, rgba(255, 255, 255, .22) 28%, transparent 36% 70%, rgba(255, 255, 255, .14) 78%, transparent 86%);
}
.dv-trou {
  position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #050508 0 18%, #1b1626 19% 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .14);
}
@keyframes dv-tourne { to { transform: rotate(360deg); } }
.dv-titre { margin: 0 0 6px; font-size: 24px; line-height: 1.15; }
.dv-meta { margin: 0 0 18px; font-size: 14px; color: var(--txt2, #a89bb0); }
.dv-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dv-play {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ligne); background: rgba(255, 255, 255, .06); color: var(--txt, #f0eaf2); font: inherit; font-weight: 700;
}
.dv-ico { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.dome-vinyle.joue .dv-ico { width: 11px; height: 14px; border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.dv-pack { cursor: pointer; font: inherit; font-weight: 700; }
.dv-fiche {
  display: inline-block; margin-top: 16px; font-size: 14px; color: var(--txt2, #a89bb0);
  text-decoration: underline; text-underline-offset: 4px;
}

/* ── L'univers sous le dôme ── */
.univers { display: grid; justify-items: center; gap: 18px; margin: 4px auto 30px; }
.univers-nom {
  margin: 0; font-size: clamp(46px, 13vw, 118px); font-weight: 900; letter-spacing: .08em; line-height: 1;
  background: linear-gradient(100deg, var(--cyan-clair, #7de7f3), #a78bfa, var(--violet, #ff5fa2), var(--cyan-clair, #7de7f3));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(56, 214, 232, .35)); animation: univers-flux 9s linear infinite, univers-neon 4.8s ease-in-out infinite;
}
@keyframes univers-flux { to { background-position: 300% 0; } }
@keyframes univers-neon { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 48% { opacity: .55; } 50% { opacity: 1; } 52% { opacity: .7; } 54% { opacity: 1; } }
.univers-pads {
  margin: 0; width: min(78vw, 360px); border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(125, 231, 243, .22), 0 18px 60px -14px rgba(56, 214, 232, .6);
  animation: univers-pouls 2.6s ease-in-out infinite;
}
.univers-pads img { display: block; width: 100%; height: auto; }
@keyframes univers-pouls { 50% { box-shadow: 0 0 0 1px rgba(125, 231, 243, .4), 0 18px 76px -8px rgba(56, 214, 232, .85); } }

@media (prefers-reduced-motion: reduce) {
  .univers-nom, .univers-pads, .dv-disque, .dome-entree .grille.dome-on .carte-img { animation: none; }
  .dv-boite, .dv-fond, .bl-carte { transition: none; }
}
#beats .grille.dome-on .carte:not(.joue) .carte-img img{filter:brightness(1.12) saturate(1.12)}