/* ════════════════════════════════════════════════════════════════════════
   LA MUSIQUE EN PARTIE — maquette validée : brandnew/drafts/musique-en-jeu-3.html
   Le bouton : mêmes mesures que `.react-fab` (brutal.css) — coin bas droit,
   42 px, bordure 3, ombre dure 3, dépliage horizontal vers la gauche.
   Ouvert, il ne recouvre RIEN : le corps du jeu se décale de 72 px
   (body.mus-ouvert). Fermé, il ne coûte rien. Construit par js/musique.js.
   ════════════════════════════════════════════════════════════════════════ */
body.mus-ouvert [data-s2] .s2-gbody { padding-bottom: 72px; }

.mus-fab { position: fixed; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 62px); z-index: 55;
  display: none; flex-direction: row-reverse; align-items: center; gap: 7px; max-width: calc(100vw - 20px); }
.mus-fab.show { display: flex; }
.mus-tog { flex: none; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; padding: 0;
  border: 3px solid #0A0A0A; background: var(--cyan, #5BD8E5); box-shadow: 3px 3px 0 #0A0A0A; border-radius: 0; }
.mus-fab.open .mus-tog { background: var(--red, #FF5252); }
.mus-fab.veille .mus-tog { background: var(--gray, #C8C8C8); }
.mus-tog .note { position: relative; width: 16px; height: 16px; display: block; }
/* la note est DESSINÉE, pas un glyphe ♪ */
.mus-tog .note::before { content: ''; position: absolute; right: 3px; top: 0; width: 3px; height: 12px; background: #0A0A0A; }
.mus-tog .note::after { content: ''; position: absolute; right: 0; bottom: 0; width: 9px; height: 7px; box-sizing: content-box;
  border: 3px solid #0A0A0A; border-radius: 50%; }
.mus-fab.open .mus-tog .note::before, .mus-fab.open .mus-tog .note::after { background: #FFFEF7; border-color: #FFFEF7; }
.mus-fab.open .mus-tog .note::before { transform: rotate(-45deg); height: 16px; right: 6px; top: 0; }
.mus-fab.open .mus-tog .note::after { border: none; background: #FFFEF7; width: 16px; height: 3px; border-radius: 0; right: 0; bottom: 6.5px; transform: rotate(-45deg); }

/* le panneau déplié : précédent, pause, le titre (qu'on peut balayer), suivant */
.mus-pop { display: none; align-items: center; gap: 6px; padding: 3px; }
.mus-fab.open .mus-pop { display: flex; }
.mus-b { flex: none; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; padding: 0; border-radius: 0;
  border: 3px solid #0A0A0A; background: #FFFEF7; box-shadow: 2px 2px 0 #0A0A0A; }
.mus-b.ok { background: var(--yellow, #FFD600); }
.mus-slide { flex: none; display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 8px; box-sizing: border-box;
  border: 3px solid #0A0A0A; background: #0A0A0A; color: #FFFEF7; box-shadow: 2px 2px 0 var(--magenta, #FF2E93);
  max-width: 168px; overflow: hidden; touch-action: pan-y; cursor: grab; }
.mus-slide .art { width: 26px; height: 26px; flex: none; border: 2px solid #FFFEF7; background: var(--magenta, #FF2E93) center / cover no-repeat; box-sizing: border-box; }
.mus-slide .t { font-family: var(--font-d, 'Anton', sans-serif); font-size: 12px; letter-spacing: .3px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-slide .dots { display: flex; gap: 3px; flex: none; }
.mus-slide .dots i { width: 5px; height: 5px; background: #FFFEF7; opacity: .35; }
.mus-slide .dots i.on { opacity: 1; background: var(--cyan, #5BD8E5); }

.mus-fab .ic { position: relative; width: 13px; height: 13px; display: block; }
.mus-fab .ic.pause::before, .mus-fab .ic.pause::after { content: ''; position: absolute; top: 0; width: 4px; height: 13px; background: #0A0A0A; }
.mus-fab .ic.pause::before { left: 1px; } .mus-fab .ic.pause::after { right: 1px; }
.mus-fab .ic.play::before { content: ''; position: absolute; left: 2px; top: 0; border-left: 11px solid #0A0A0A; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.mus-fab .ic.next::before, .mus-fab .ic.prev::before { content: ''; position: absolute; left: 0; top: 0; border-left: 9px solid #0A0A0A; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.mus-fab .ic.next::after, .mus-fab .ic.prev::after { content: ''; position: absolute; right: 0; top: 0; width: 3px; height: 13px; background: #0A0A0A; }
.mus-fab .ic.prev { transform: scaleX(-1); }

/* LE TOAST du changement : il monte, il s'efface. Rien à toucher. */
.mus-toast { position: fixed; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 116px); z-index: 56; display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border: 3px solid #0A0A0A; background: #0A0A0A; color: #FFFEF7; pointer-events: none;
  box-shadow: 4px 4px 0 var(--cyan, #5BD8E5); max-width: 260px; animation: mus-monte 220ms cubic-bezier(.2, .9, .3, 1.2); transition: opacity 400ms; }
.mus-toast .art { width: 30px; height: 30px; flex: none; border: 2px solid #FFFEF7; background: var(--yellow, #FFD600) center / cover no-repeat; box-sizing: border-box; }
.mus-toast .tx { min-width: 0; display: flex; flex-direction: column; }
.mus-toast .tx .t { display: block; font-family: var(--font-d, 'Anton', sans-serif); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-toast .tx .a { display: block; font-family: var(--font-m, 'IBM Plex Mono', monospace); font-size: 8px; font-weight: 800; letter-spacing: 1.2px; opacity: .72; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-toast.part { opacity: 0; }
@keyframes mus-monte { from { transform: translateY(14px); opacity: 0; } }

/* BLIND TEST : la musique se tait, le joueur est prévenu */
.mus-coupe { position: fixed; left: 14px; right: 66px; bottom: calc(env(safe-area-inset-bottom) + 60px); z-index: 56; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 3px solid #0A0A0A; background: var(--yellow, #FFD600); color: #0A0A0A; box-shadow: 4px 4px 0 #0A0A0A; pointer-events: none; }
.mus-coupe b { font-family: var(--font-d, 'Anton', sans-serif); font-size: 13px; font-weight: 400; flex: none; }
.mus-coupe span { font-family: var(--font-m, 'IBM Plex Mono', monospace); font-size: 9px; font-weight: 800; letter-spacing: 1.1px; min-width: 0; }

@media (prefers-reduced-motion: reduce) { .mus-toast { animation: none; } }

/* Réglages › Gameplay : la note dessinée dans sa case, et le volume grisé quand la musique est éteinte */
.mus-ico { display: grid; place-items: center; }
.mus-ico .note { position: relative; width: 16px; height: 16px; display: block; }
.mus-ico .note::before { content: ''; position: absolute; right: 3px; top: 0; width: 3px; height: 12px; background: #0A0A0A; }
.mus-ico .note::after { content: ''; position: absolute; right: 0; bottom: 0; width: 9px; height: 7px; box-sizing: content-box; border: 3px solid #0A0A0A; border-radius: 50%; }
.s2-off { opacity: .4; pointer-events: none; }
body.mus-ouvert #soloStage .so-body { padding-bottom: 72px; }
/* le SOLO est un calque plein écran (z-index 2000) : la musique passe au-dessus */
body:has(#sec-solo.active) :is(.mus-fab, .mus-toast, .mus-coupe) { z-index: 2001; }
/* NÉON : jamais d'ombre noire sur fond sombre — les ombres passent en couleur */
html[data-skin="neon"] .mus-tog, html[data-skin="neon"] .mus-b { box-shadow: 3px 3px 0 var(--magenta, #FF2E93); }
html[data-skin="neon"] .mus-coupe { box-shadow: 4px 4px 0 var(--magenta, #FF2E93); }
html[data-skin="neon"] .mus-slide { border-color: #FFFEF7; }
html[data-skin="neon"] .mus-toast { border-color: #FFFEF7; }

/* ORDINATEUR : le bouton logé dans la barre du haut (musique.js › ancrer) ;
   le panneau s'ouvre vers la gauche PAR-DESSUS la barre, le toast et le bandeau
   passent en haut à droite — rien ne tombe sur les cartes du jeu */
.mus-fab.dock { position: relative; right: auto; bottom: auto; z-index: 60; flex: none; margin: 0 8px; max-width: none; }
.mus-fab.dock .mus-pop { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); background: var(--paper, #FFFEF7); padding: 4px; border: 3px solid #0A0A0A; box-shadow: 4px 4px 0 #0A0A0A; }
html[data-skin="neon"] .mus-fab.dock .mus-pop { box-shadow: 4px 4px 0 var(--magenta, #FF2E93); }
@media (min-width: 1024px) {
  .mus-toast { bottom: auto; top: 86px; right: 24px; z-index: 2147482000; }
  .mus-coupe { bottom: auto; top: 86px; left: auto; right: 24px; width: 440px; z-index: 2147482000; }
}
/* RAFALE est aussi un calque plein écran (z-index 2000) */
body:has(#sec-rafale.active) :is(.mus-fab, .mus-toast, .mus-coupe) { z-index: 2001; }
body.mus-ouvert #sec-rafale .rf-card { padding-bottom: 72px; }
/* RAFALE a sa barre de pied (série + carte suivante) : le bouton se pose au-dessus */
body:has(#sec-rafale.active) .mus-fab:not(.dock) { bottom: calc(env(safe-area-inset-bottom) + 112px); }
body:has(#sec-rafale.active) .mus-toast { bottom: calc(env(safe-area-inset-bottom) + 166px); }
body:has(#sec-rafale.active) .mus-coupe { bottom: calc(env(safe-area-inset-bottom) + 110px); }