/* ==========================================================================
   1. Réinitialisation et Styles de Base
   ========================================================================== */

   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.link-container {
    text-align: center;
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.music-link {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background-color: #4285f4;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
}
.music-link:hover {
    background-color: #3367d6;
}
.music-icon {
    margin-right: 10px;
}
.description {
    margin-top: 20px;
    color: #666;
    font-size: 14px;
}

body {
    font-family: Arial, sans-serif;
    max-width: 100vw;
    overflow-x: hidden; /* Empêche le scroll horizontal global par défaut */
    padding-left: 0;
    height: auto;
    min-height: 100vh;
    /* Espace sous le contenu pour ne pas passer sous la bottom bar fixe */
    padding-bottom: var(--bottom-bar-height, 75px);
    /* Supprimé padding-top: 0; car la barre sticky gère l'espace */
}

/* En mode iframe (paramètre ref= présent), supprimer le min-height qui génère un espace blanc en pied de page */
html.is-embedded body {
    min-height: 0 !important;
    height: auto !important;
}

/* Style général des boutons */
button {
    padding: 10px 15px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
   /* background-color: #007BFF;*/
    color: #333;
    transition: background-color 0.3s, transform 0.2s;
    -webkit-tap-highlight-color: transparent; /* Désactiver le highlight sur tap */
}

button:hover:not([disabled]):not(.mode-seg):not(.pp-play-btn):not(.pp-hand-btn):not(.practice-mode-tab) {
    background-color: #e0e0e0;
    opacity: 1;
}

button:active:not([disabled]) {
    transform: scale(0.98);
}

button:disabled:not(.pp-play-btn) {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #cccccc !important; /* Style plus clair pour disabled */
    color: #666666 !important;
    pointer-events: none;
}

/* Style spécifique pour input range */
input[type="range"] {
    width: 100%;
}

/* Styles pour les barres de défilement (WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/* ==========================================================================
   2. Structure et Mise en Page Principale
   ========================================================================== */
/* Pour la barre de contrôle principale */
#top-controls-bar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 4px 0 0 0;
    z-index: 1000;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
    height: auto;
}
/* Style pour le audio-container en liseret */
#audio-container {
    position: relative;
    width: 100%;
    height: 3px; /* Encore plus fin */
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Empêche le débordement */
}
  
  /* Pour tous les contrôles */
  #controls {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-bottom: 0px; /* Réduit de 10px à 2px */
    margin-bottom: 0; /* S'assure qu'il n'y a pas de marge */
}

/* ── Harmonisation espacement toolbar ──
   Tous les enfants directs de #controls doivent avoir
   des marges nulles pour laisser gap gérer l'espacement */
#controls > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Le conteneur métronome ne doit pas casser le flux flex */
#controls .metronome-icon-container {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

/* Conteneur audio très fin */
.slim-audio-container {
    position: relative;
    width: 100%;
    height: 2px !important; /* Force la hauteur à être très fine */
    background-color: transparent !important; /* Masque le fond */
    border-bottom: none !important; /* Supprime la bordure */
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Contrôle du temps optimisé */
.slim-time-control {
    flex: 1;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    order: 100;
    margin-top: 4px !important;
    height: 24px !important;
    padding: 0 8px !important;
}

/* Slider audio optimisé */
.slim-slider {
    width: 200px;
    margin: 0 10px;
    height: 3px !important; /* Hauteur très fine pour le track */
    -webkit-appearance: none !important; /* Reset l'apparence par défaut */
    appearance: none !important;
    background: rgba(155, 155, 155, 0.2) !important; /* Couleur de fond subtile */
    outline: none !important;
    border-radius: 1.5px !important;
    padding: 0 !important; /* Supprime tout padding */
    border: none !important; /* Supprime toute bordure */
}

/* Style du "thumb" (poignée du slider) */
.slim-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #007BFF !important;
    cursor: pointer !important;
    border: none !important;
    margin-top: -3.5px !important; /* Centre le thumb (10px) sur le track (3px) */
}

/* Track WebKit — requis pour que margin-top du thumb soit appliqué */
.slim-slider::-webkit-slider-runnable-track {
    height: 3px !important;
    background: rgba(0,0,0,0.2) !important;
    border-radius: 1.5px !important;
}

.slim-slider::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #007BFF !important;
    cursor: pointer !important;
    border: none !important;
}

/* Hover sur le thumb */
.slim-slider::-webkit-slider-thumb:hover {
    background: #0056b3 !important;
}

.slim-slider::-moz-range-thumb:hover {
    background: #0056b3 !important;
}
  
  /* Pour le contrôle de temps et défilement automatique */
  #combined-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-top: 0 !important;
  }
  
  #time-control {
    flex: 1;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    order: 100;
    margin-top: 4px;
    height: 24px;
    margin-left: 0;
    padding: 0 8px;
}
  
  /* Pour l'affichage du temps et le contrôle de défilement */
  #time-display {
    white-space: nowrap;
    margin-right: 10px;
    font-size: 0.85em !important;
    line-height: 1 !important;
}
  
#autoScrollControl {
    margin-left: 0 !important;
    white-space: nowrap;
    height: 20px; /* Hauteur fixe */
    display: flex;
    align-items: center;
}

#autoScrollControl label {
    display: flex;
    align-items: center;
    font-size: 0.9em; /* Texte plus petit */
}
   
  .control-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 5px;
    white-space: nowrap;
  }
  
  .control-group label {
    margin-right: 5px;
    margin-bottom: 0;
    white-space: nowrap;
  }
  
  .bpm-control-always-visible {
    margin: 0 !important; /* Supprime les marges */
    transition: opacity 0.3s ease;
    padding: 0 !important; /* Supprime les paddings */
}

  /* Optimisation de l'espace pour les métronomes */
.metronome-icon-container {
    cursor: pointer;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    padding: 0 !important;
}
  
 /* Ajuste le slider lui-même */
#timeSlider {
    width: 70%;
    margin: 0 10px;
    height: 3px; /* Hauteur très fine pour le track */
    -webkit-appearance: none; /* Reset l'apparence par défaut */
    appearance: none;
    background: linear-gradient(to right,
        #ff9900 var(--ts-pct, 0%),
        #c8bfb0 var(--ts-pct, 0%)
    ) !important; /* Partie écoulée orange, reste gris chaud */
    outline: none;
    border-radius: 2px;
}

/* Style du "thumb" (poignée du slider) */
#timeSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #ff9900 !important;
    cursor: pointer !important;
    transition: background .2s;
    margin-top: -4.5px !important;
}

/* Track WebKit — requis pour que margin-top du thumb soit appliqué */
#timeSlider::-webkit-slider-runnable-track {
    height: 3px !important;
    background: linear-gradient(to right,
        #ff9900 var(--ts-pct, 0%),
        #c8bfb0 var(--ts-pct, 0%)
    ) !important; /* Partie écoulée orange, reste gris chaud */
    border-radius: 2px !important;
}

/* Firefox — partie écoulée nativement colorable */
#timeSlider::-moz-range-progress {
    background: #ff9900;
    height: 3px;
    border-radius: 2px;
}

#timeSlider::-moz-range-track {
    background: #c8bfb0;
    height: 3px;
    border-radius: 2px;
}

#timeSlider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #ff9900 !important;
    cursor: pointer !important;
    border: none !important;
    transition: background .2s;
}

/* ── Rail + thumb plus épais au survol — facilite la prise du curseur ── */

/* Transition douce sur le track WebKit */
#timeSlider::-webkit-slider-runnable-track {
    transition: height 0.15s ease, border-radius 0.15s ease;
}

/* Transition douce sur le thumb */
#timeSlider::-webkit-slider-thumb {
    transition: width 0.15s ease, height 0.15s ease, margin-top 0.15s ease, background 0.2s !important;
}

/* Survol du slider : rail 3px→6px, thumb reste 12px
   recentrage thumb(12) sur track(6) : (12-6)/2 = 3px */
#timeSlider:hover::-webkit-slider-runnable-track {
    height: 6px !important;
    border-radius: 3px !important;
}

#timeSlider:hover::-webkit-slider-thumb {
    margin-top: -3px !important;
}

/* Survol direct du thumb : grossit 12px→17px, couleur foncée
   recentrage thumb(17) sur track(6) : (17-6)/2 = 5.5px
   ⚠ Cette règle DOIT être après :hover::-webkit-slider-thumb pour l'écraser */
#timeSlider::-webkit-slider-thumb:hover {
    background: #e68a00 !important;
    width: 17px !important;
    height: 17px !important;
    margin-top: -5.5px !important;
}

/* Firefox */
#timeSlider::-moz-range-thumb:hover {
    background: #e68a00 !important;
    width: 17px !important;
    height: 17px !important;
}

#timeSlider:hover::-moz-range-track {
    height: 6px;
    border-radius: 3px;
}

#timeSlider:hover::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
}
  
  /* Pour le zoom */
  #zoom-out, #zoom-in {
    display: inline-flex;
  }
  
  #zoom-value {
    display: inline-block;
    white-space: nowrap;
  }
  
/* Ajustements responsifs */
@media (max-width: 992px) {
    #top-controls-bar {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    /* modified */#timeSlider {
      width: 60%;
    }
  }
  
  @media (max-width: 768px) {
    /* modified */#timeSlider {
      width: 60%;
    }
    
    #time-display {
      font-size: 0.9em;
    }
    
    #autoScrollControl span {
      font-size: 0.9em;
    }
  }












/* Groupes de boutons dans la barre supérieure */
.main-buttons {
    display: flex;
    gap: 10px;
    margin-left: 60px; /* Espace pour le hamburger */
}

.mode-button {
    margin-right: 10px; /* Réduit */
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 10px; /* Réduit */
}

/* Boutons spécifiques dans la barre supérieure */
#top-controls-bar button {
    padding: 0px 5px 0px 5px; /* Padding ajusté */
    font-weight: bold;
    transition: background-color 0.2s;
     /* Taille minimale tactile */
     min-height: 35px;
     min-width: 35px;
}

/* ═══════════════════════════════════════════════════════
   Segmented control MP3 | MIDI
   ──────────────────────────────────────────────────────
   #mode-switcher [data-active=mp3|midi]
     #seg-mp3 .mode-seg  (.seg-active | .seg-inactive)
     .mode-seg-divider
     #seg-midi .mode-seg (.seg-active | .seg-inactive)
   ══════════════════════════════════════════════════════ */

#mode-switcher {
    display: inline-flex;
    align-items: stretch;
    border-radius: 7px;
    overflow: hidden;
    border: 1.5px solid #b0b0b0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.13);
    height: 35px;
    flex-shrink: 0;
}

/* ── Segment commun ── */
.mode-seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 0;
    padding: 0 14px;
    font-weight: 600;
    font-size: 0.88em;
    cursor: pointer;
    height: 100%;
    min-width: 60px;
    user-select: none;
    transition: filter 0.15s, background-color 0.15s;
}

/* ── Segment ACTIF ── */
.mode-seg.seg-active {
    color: #fff;
    background-color: #ff9900; /* MP3 → vert */
}
#seg-midi.seg-active {
    background-color: #1976d2; /* MIDI → bleu */
}
.mode-seg.seg-active:hover { filter: brightness(1.08); }

/* ── Segment INACTIF ── */
.mode-seg.seg-inactive {
    background-color: #ebebeb;
    color: #666;
}
.mode-seg.seg-inactive:hover:not([disabled]) {
    background-color: #ddd;
    color: #333;
}

/* ── Segment désactivé (pas de MP3 dispo) ── */
.mode-seg.no-audio,
.mode-seg.seg-unavailable,
.mode-seg[disabled] {
    background-color: #e3e3e3 !important;
    color: #bbb !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}
/* Segment actif mais indisponible (ex: mode MP3 sans MP3 = ne devrait pas arriver,
   mais au cas où : garder la couleur de base avec opacité réduite) */
.mode-seg.seg-active.no-audio,
.mode-seg.seg-active.seg-unavailable {
    background-color: #a5d6a7 !important; /* vert pâle pour MP3, indique indisponible */
    color: #eee !important;
}
#seg-midi.seg-active.seg-unavailable {
    background-color: #90caf9 !important; /* bleu pâle pour MIDI */
}
.mode-seg.no-audio .seg-label { text-decoration: line-through; }

/* ── Icônes dans le segment actif ── */
.seg-icon {
    flex-shrink: 0;
    display: inline-block;
}

/* Play ▶ */
.seg-icon.icon-play {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent currentColor;
}
/* Sur segment inactif : pas d'icône */
.mode-seg.seg-inactive .seg-icon { display: none; }

/* Pause ⏸ */
.seg-icon.icon-pause {
    width: 9px;
    height: 12px;
    background:
        linear-gradient(to right,
            currentColor 0px,    currentColor 3px,
            transparent  3px,    transparent  6px,
            currentColor 6px,    currentColor 9px);
}

/* Loading ⟳ */
.seg-icon.icon-loading {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: seg-spin 0.7s linear infinite;
}
@keyframes seg-spin { to { transform: rotate(360deg); } }

/* ── Séparateur vertical ── */
.mode-seg-divider {
    width: 1.5px;
    background-color: #b0b0b0;
    flex-shrink: 0;
    align-self: stretch;
}

/* ── Bouton Stop ── */
#stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff3300;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0 12px;
    height: 35px;
    cursor: pointer;
    font-weight: bold;
}

/* Mobile compact */
@media (max-width: 480px) {
    .mode-seg {
        min-width: 48px;
        padding: 0 10px;
        font-size: 0.82em;
        gap: 5px;
    }
}


/* --- Menu Latéral --- */
/* ── Info overlay panel (ex-menu latéral) ── */
#menu-container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 24px 28px 20px;
    z-index: 10101;
    width: 90vw;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    font-family: inherit;
    /* Animation d'apparition */
    opacity: 0;
    transition: opacity 0.18s ease;
}

#menu-container.open {
    display: flex;
    opacity: 1;
}

/* Backdrop semi-transparent */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 10100; /* Juste en dessous du panel */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
}

body.menu-open #menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Éléments dans le menu latéral */
#metadata, #controls, #time-control, #page-navigation {
    width: 100%;
    flex-shrink: 0; /* Empêche le rétrécissement */
}

/* Styles de base pour admin-controls */
.admin-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  
  /* Force les control-group à s'afficher horizontalement dans admin-controls */
  .admin-controls .control-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 5px !important;
  }
  

  /* Assure que les inputs ont une taille raisonnable */
  .admin-controls .control-group input {
    width: 60px !important;
  }
  
  /* Ajuste le positionnement des tooltips */
  .admin-controls .control-group .tooltip_xml {
    top: 100% !important;
    left: 0 !important;
  }
  
  /* Pour les écrans plus petits (mobile et tablette) */
  @media (max-width: 768px) {
    .admin-controls {
      flex-wrap: wrap !important; /* Permet de passer à la ligne */
    }
    
    .admin-controls .control-group {
      margin: 5px !important; /* Espace autour de chaque groupe */
    }
  }
  
  /* Pour les très petits écrans (petits mobiles) */
  @media (max-width: 480px) {
    .admin-controls {
      flex-direction: column !important; /* Empile les éléments */
      align-items: flex-start !important;
    }
    
    .admin-controls .control-group {
      width: 100% !important;
      margin: 5px 0 !important;
    }
  }

/* ==========================================================================
   3. Affichage de la Partition (SVG Output)
   ========================================================================== */

#svg_output {
    width: 100%;
    max-width: 100%; /* Empêche le dépassement */
    overflow-x: hidden; /* PAS de scroll horizontal par défaut (mode vertical) */
    overflow-y: visible; /* Pour scroll vertical */
    box-sizing: border-box;
    margin-top: 70px  !important;
    padding-top: 20px;
    padding: 0.8rem; /* Padding standard */
    padding-bottom: 60px; /* Espace en bas par défaut */
    cursor: default; /* Curseur par défaut */
    scroll-behavior: smooth;
    transition: padding-bottom 0.3s ease;
    -webkit-overflow-scrolling: touch; /* Améliore scroll iOS */
    /* Nécessaire pour que position:absolute de .upload-prompt fonctionne */
    position: relative;
    /* Hauteur minimale = viewport moins la barre fixe :
       sans ça, top:50% = 50% de 0px = formulaire collé en haut, caché par la barre */
    min-height: calc(100vh - var(--top-bar-height, 70px));
}

/* ── Zoom : fondu avant re-render Verovio ── */
#svg_output.zoom-committing {
    transition: opacity 0.1s ease-out, padding-bottom 0.3s ease;
    opacity: 0;
}

/* ── Zoom : retour après re-render ── */
#svg_output.zoom-restoring {
    transition: opacity 0.15s ease-in, padding-bottom 0.3s ease;
    opacity: 1;
}

/* SVG interne */
#svg_output svg {
    display: block; /* Empêche espace blanc en dessous */
    width: 100%; /* Prend la largeur du conteneur */
    height: auto; /* Maintient le ratio */
    max-width: 100%; /* Sécurité */
    overflow: visible !important; /* Permet au contenu de déborder si nécessaire (mode horizontal) */
    touch-action: manipulation; /* Optimisation tactile */
    margin-bottom: 20px !important; /* Espace en bas du SVG */
}

/* Éléments de la partition */
#svg_output svg .system {
    margin-bottom: 15px !important; /* Espacement vertical entre systèmes */
    /* padding-bottom retiré, margin-bottom est mieux */
}

#svg_output svg .staff {
    /* stroke-width: 1.2; */ /* Peut rendre trop épais sur mobile */
    margin-bottom: 8px !important; /* Espacement vertical entre portées */
}

#svg_output svg .staff-line {
    stroke-width: 0.8px !important; /* Lignes fines mais visibles */
}

#svg_output svg .note,
#svg_output svg .rest,
#svg_output svg .clef,
#svg_output svg .accid {
    fill: #000;
    stroke: none; /* Généralement pas de contour */
}

/* Zones cliquables et mise en évidence */
.measure {
    cursor: pointer;
}

.click-area {
    pointer-events: all;
    fill: transparent; /* Invisible mais cliquable */
    -webkit-tap-highlight-color: transparent;
}


/* .highlight {
    pointer-events: none; 
    fill: rgba(255, 255, 0, 0.3); 
    stroke: none;
    animation: highlightPulse 1.5s infinite alternate; 
}
*/

.highlight {
    pointer-events: none;
    will-change: opacity;
    transform: translate3d(0,0,0); /* Force GPU acceleration */
    animation: pulse 1.5s infinite alternate;
    animation-timing-function: ease-in-out;
}

@keyframes highlightPulse {
    0% { opacity: 0.3; }
    100% { opacity: 0.6; }
}

/* --- Mode Continu Vertical --- */
#svg_output[data-continuous-mode="true"] {
    overflow-y: auto !important;
    overflow-x: hidden !important; /* IMPORTANT: Pas de scroll X */
    height: calc(100vh - 160px) !important; /* Ajuster selon hauteur barres */
    padding: 0.5rem !important;
    padding-bottom: 50px !important;
    scrollbar-width: thin; /* Barre de scroll fine */
    margin: 0 auto !important;
}

#svg_output[data-continuous-mode="true"] svg {
    /* Les styles width/height auto sont hérités */
    margin-bottom: 20px !important;
}

#svg_output[data-continuous-mode="true"] .system {
    margin-bottom: 15px !important;
}

#svg_output[data-continuous-mode="true"] .staff {
    margin-bottom: 8px !important;
}

/* --- Mode Horizontal (sans sauts de ligne) --- */
#svg_output.no-breaks-mode {
    overflow-x: auto !important; /* Scroll horizontal OBLIGATOIRE */
    overflow-y: hidden; /* Pas de scroll vertical */
    white-space: nowrap; /* Empêche le retour à la ligne des systèmes */
    height: auto; /* Hauteur basée sur le contenu */
    padding: 0.5rem;
    padding-bottom: 20px !important; /* Espace bas réduit */
    cursor: grab !important;
    user-select: none;
    -webkit-user-select: none;
}

#svg_output.no-breaks-mode svg {
    width: max-content; /* Largeur du contenu */
    height: auto;
    display: inline-block; /* Pour que nowrap fonctionne */
    vertical-align: top;
    margin-bottom: 0 !important; /* Pas de marge en bas */
    padding-right: 30px !important; /* Espace à droite pour ne pas couper */
}

#svg_output.no-breaks-mode .system {
    display: inline-flex !important; /* Systèmes en ligne */
    flex-direction: column !important; /* Portées en colonne */
    flex-wrap: nowrap !important;
    width: auto !important; /* Largeur auto */
    margin-right: 15px; /* Espacement horizontal */
    vertical-align: top;
    margin-bottom: 0 !important; /* Pas de marge verticale */
    padding-bottom: 0 !important;
}

#svg_output.no-breaks-mode .staff {
    margin-bottom: 4px !important; /* Espacement vertical réduit entre portées */
    /* stroke-width: 1.5; */ /* Optionnel: Lignes plus épaisses ? */
}

#svg_output.no-breaks-mode .measure,
#svg_output.no-breaks-mode .click-area {
    cursor: inherit !important; /* Hérite le curseur grab/grabbing */
}

#svg_output.no-breaks-mode.grabbing {
    cursor: grabbing !important;
}

/* --- Mode Paginé --- */
#svg_output[data-continuous-mode="false"]:not(.no-breaks-mode) {
    overflow: hidden !important; /* Pas de scroll interne normalement */
    height: auto; /* La hauteur est déterminée par le SVG */
    padding: 1rem;
    padding-bottom: 20px; /* Espace sous la page */
}

#svg_output[data-continuous-mode="false"]:not(.no-breaks-mode) svg {
     /* width/height auto hérités */
     margin-bottom: 0 !important; /* Pas de marge en bas */
}

/* Animations de transition de page (si mode paginé) */
#svg_output.slide-out-left { transform: translateX(-100%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; }
#svg_output.slide-in-right { transform: translateX(100%); opacity: 0; }
#svg_output.slide-out-right { transform: translateX(100%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; }
#svg_output.slide-in-left { transform: translateX(-100%); opacity: 0; }
#svg_output.slide-in-active { transform: translateX(0); opacity: 1; transition: transform 0.4s ease, opacity 0.4s ease; }

/* ==========================================================================
   PAGE TURN ANTICIPATOR (PTA)
   Panneau gauche qui révèle la page suivante avant le changement de page.
   L'overlay est fixed (par-dessus tout) ; le panneau gauche grandit de 0→50%
   lors de l'anticipation, puis de 50%→100% lors du changement effectif.
   ========================================================================== */

#pta-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 90;          /* au-dessus du contenu, en-dessous des barres UI */
    display: none;
    overflow: hidden;
}
#pta-overlay.pta-visible {
    display: block;
}

/* Panneau gauche : contient le SVG de la page suivante */
#pta-left-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    will-change: width;
    /* Transition d'ouverture : lente et fluide (1.8s) */
    transition: width 1.8s cubic-bezier(0.22, 0.8, 0.32, 1);
}
#pta-left-panel.pta-open {
    width: 50%;
}
#pta-left-panel.pta-complete {
    /* Transition de fermeture : rapide (0.5s) */
    width: 100%;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wrapper SVG interne : même mise en page que svg_output */
.pta-svgwrap {
    position: absolute;
    top: 0;
    /* left + width + padding définis via JS pour coller exactement svg_output */
    background: #fff;
    box-sizing: border-box;
}
.pta-svgwrap svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Séparateur vertical entre les deux pages */
#pta-divider {
    position: absolute;
    top: 0;
    left: 0;            /* position animée via JS class */
    height: 100%;
    width: 0;
    pointer-events: none;
    opacity: 0;
    /* Même timing que le panneau */
    transition: left 1.8s cubic-bezier(0.22, 0.8, 0.32, 1),
                opacity 0.4s ease;
}
#pta-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 100px;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.0)  0%,
        rgba(255, 255, 255, 0.70) 30%,
        rgba(255, 255, 255, 1.00) 50%,
        rgba(255, 255, 255, 0.70) 70%,
        rgba(255, 255, 255, 0.0) 100%
    );
    filter: blur(8px);
}
/* Petit label "page suivante" au-dessus du séparateur */
#pta-divider::after {
    content: '▶';
    position: absolute;
    top: calc(var(--top-bar-height, 70px) + 8px);
    left: -14px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 10px;
    color: #fff;
    background: rgba(60,60,60,0.45);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#pta-divider.pta-open {
    left: 50%;
    opacity: 1;
}
#pta-divider.pta-complete {
    left: 100%;
    opacity: 0;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}




/* --- Bouton Hamburger --- */
#hamburger {
    position: fixed;
    top: 6px;
    left: 5px;
    z-index: 2000;
    padding: 1px 3px;
    background-color: #ffffff;
    color: #555;
    border: 1px solid #cccccc;
    border-radius: 5px;
    cursor: pointer;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
    user-select: none;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s, border-color 0.2s, opacity 0.35s;
}
#hamburger:hover {
    background-color: #f0f0f0;
    border-color: #999;
}
#hamburger:active,
#hamburger.active {
    background-color: #e0e0e0;
    border-color: #777;
    transform: scale(0.97);
}
#hamburger svg {
    width: 15px;
    height: 15px;
    stroke: #555;
}

/* ── Bouton Upload (bleu, au-dessus du bouton info) ── */
#upload-icon-btn {
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 2000;
    padding: 1px 3px;
    background-color: #ffffff;
    color: #2196F3;
    border: 1px solid #90CAF9;
    border-radius: 5px;
    cursor: pointer;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
    user-select: none;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s, border-color 0.2s;
}

#upload-icon-btn:hover {
    background-color: #E3F2FD;
    border-color: #42A5F5;
}

#upload-icon-btn:active,
#upload-icon-btn.active {
    background-color: #BBDEFB;
    border-color: #1E88E5;
    transform: scale(0.97);
}

#upload-icon-btn svg {
    stroke: #2196F3;
}

/* ── Bouton Mode Immersif (expand, sous le bouton info) ── */
#immersive-btn {
    position: fixed;
    top: 46px;
    left: 5px;
    z-index: 2000;
    padding: 1px 3px;
    background-color: #ffffff;
    color: #555;
    border: 1px solid #cccccc;
    border-radius: 5px;
    cursor: pointer;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
    user-select: none;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s, border-color 0.2s, opacity 0.35s;
}
#immersive-btn:hover {
    background-color: #f0f0f0;
    border-color: #999;
}
#immersive-btn:active,
#immersive-btn.active {
    background-color: #e0e0e0;
    border-color: #777;
    transform: scale(0.97);
}
#immersive-btn svg {
    stroke: #555;
}

/* ══════════════════════════════════════════════════════════════
 * MODE IMMERSIF — Masque tout le chrome UI, ne laisse que la partition
 * ══════════════════════════════════════════════════════════════ */

body.immersive-mode #top-controls-bar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

body.immersive-mode #upload-icon-btn,
body.immersive-mode #hamburger,
body.immersive-mode #immersive-btn,
body.immersive-mode #mobile-pause-fab,
body.immersive-mode #mobile-stop-fab,
body.immersive-mode #back-btn-wrapper {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease !important;
}

body.immersive-mode #top-title-right {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease !important;
}

body.immersive-mode #page-navigation {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease !important;
}

body.immersive-mode #svg_output {
    margin-top: 5px !important;
}

/* ══════════════════════════════════════════════════════════════
 * PAGINATION ÉPURÉE — Mode immersif uniquement
 * Boutons circulaires semi-transparents sur les côtés
 * ══════════════════════════════════════════════════════════════ */

#immersive-pagination {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;   /* laisse passer les clics sauf sur les boutons */
    z-index: 2500;
}

.immersive-page-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(90, 130, 200, 0.35);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;    /* réactive les clics sur le bouton */
    opacity: 0.5;
    transition: opacity 0.25s ease, background 0.25s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    z-index: 2501;
    padding: 0;
}
.immersive-page-btn:hover {
    opacity: 0.85;
    background: rgba(66, 133, 244, 0.6);
}
.immersive-page-btn:active {
    opacity: 1;
    transform: translateY(-50%) scale(0.92);
}
.immersive-page-btn:disabled {
    opacity: 0.12;
    cursor: default;
    pointer-events: none;
}
.immersive-page-btn svg {
    stroke: #fff;
    flex-shrink: 0;
}

/* Positionnement gauche / droite */
.immersive-prev { left: 10px; }
.immersive-next { right: 10px; }

/* Mobile : boutons un peu plus petits, plus bas */
@media (max-width: 768px) {
    .immersive-page-btn {
        width: 38px;
        height: 38px;
        top: auto;
        bottom: 30px;
        transform: none;
    }
    .immersive-page-btn:active {
        transform: scale(0.92);
    }
    .immersive-prev { left: 16px; }
    .immersive-next { right: 16px; }
}

/* Transitions fluides pour l'entrée/sortie */
#top-controls-bar {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#upload-icon-btn,
#hamburger,
#immersive-btn,
#page-navigation {
    transition: opacity 0.35s ease;
}

/* ── Bouton Langue / Drapeau (inline dans #controls) ── */
#lang-btn {
    padding: 2px 4px;
    background: none;
    color: #555;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    gap: 3px;
    align-items: center;
    touch-action: manipulation;
    user-select: none;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s, transform 0.2s;
    opacity: 0.7;
    line-height: 1;
}
#lang-btn:hover {
    opacity: 1;
}
#lang-btn:active {
    transform: scale(0.93);
    opacity: 1;
}
#lang-btn .lang-flag-icon {
    display: block;
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.15);
}
#lang-btn .lang-code-label {
    font-size: 10px;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.3px;
    line-height: 1;
}
#lang-btn svg {
    width: 16px;
    height: 16px;
}

/* ── Upload Overlay ── */
.upload-overlay-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10600;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.upload-overlay-bg.upload-overlay-visible {
    opacity: 1;
    pointer-events: auto;
}

.upload-overlay-panel {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px 18px;
    width: 360px;
    max-width: 92vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    transform: translateY(12px);
    transition: transform 0.2s ease;
}

.upload-overlay-bg.upload-overlay-visible .upload-overlay-panel {
    transform: translateY(0);
}

.upload-overlay-dropzone {
    border: 2px dashed #B0BEC5;
    border-radius: 10px;
    padding: 24px 16px 16px;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
    background: #FAFAFA;
    cursor: pointer;
}

.upload-overlay-dropzone.dragover {
    border-color: #2196F3;
    background: #E3F2FD;
}

.upload-overlay-icon {
    margin-bottom: 8px;
}

.upload-overlay-label {
    margin: 0 0 4px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

.upload-overlay-sublabel {
    margin: 0;
    font-size: 11px;
    color: #999;
    letter-spacing: 0.5px;
}

body.menu-open #hamburger {
    background-color: #e0e0e0;
    border-color: #777;
}

.button-content { /* Contenu dans le hamburger */
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.hamburger-icon {
    font-size: 1.2em;
    line-height: 1;
    margin-bottom: 2px;
}

.xml-text {
    font-size: 0.7em;
    line-height: 1;
}

/* --- Section Métadonnées --- */
.metadata-section { /* Conteneur général (peut-être dans le menu) */
    max-height: 250px; /* Augmenté légèrement */
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 15px; /* Espace en dessous */
}

.metadata-section div { /* Ligne de métadonnée */
    margin-bottom: 8px;
    padding-bottom: 8px; /* Ajout padding bas */
    border-bottom: 1px solid #eee;
    font-size: 0.95em;
    color: #555;
}
.metadata-section div:last-child {
    border-bottom: none; /* Pas de bordure pour le dernier */
    margin-bottom: 0;
}

.metadata-group { /* Groupement thématique */
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 5px;
    background-color: #f9f9f9; /* Répété ? Peut-être retirer si .metadata-section est le parent */
}

.metadata-group h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

#work-title { /* Style spécifique titre */
    font-size: 1.1em; /* Légèrement réduit */
    font-weight: bold;
    margin-bottom: 15px;
    color: #222; /* Plus foncé */
}
#work-title b { /* Non nécessaire si #work-title est déjà bold */
    font-weight: normal; /* Ou retirer ce sélecteur */
}

/* Masquer groupes vides */
.metadata-group:empty,
.metadata-group:has(> h3:only-child) {
    display: none;
}

/* Barre de scroll pour metadata */
.metadata-section::-webkit-scrollbar { width: 6px; }
.metadata-section::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.metadata-section::-webkit-scrollbar-thumb { background: #aaa; border-radius: 3px; }
.metadata-section::-webkit-scrollbar-thumb:hover { background: #888; }

/* --- Section Upload --- */
.upload-section {
    margin: 15px 0; /* Augmenté */
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border: 1px dashed #ccc;
    text-align: center; /* Centrer le contenu */
}

.file-upload-container {
    display: flex;
    flex-direction: column; /* Aligner verticalement */
    align-items: center; /* Centrer horizontalement */
    gap: 10px;
    margin-top: 10px; /* Espace au-dessus */
}

.custom-file-upload { /* Bouton Upload */
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Espace icône/texte */
    padding: 10px 18px; /* Plus grand */
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px; /* Légèrement plus grand */
    transition: background-color 0.3s, transform 0.1s;
}

.custom-file-upload:hover {
    background-color: #0b7dda;
}
.custom-file-upload:active {
    transform: scale(0.98);
}

.custom-file-upload svg {
    width: 18px; /* Icône un peu plus grande */
    height: 18px;
    stroke: white;
    stroke-width: 2; /* Lignes plus épaisses */
}

.filename-display { /* Nom du fichier uploadé */
    color: #666;
    font-size: 13px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%; /* Prend presque toute la largeur */
    margin-top: 5px; /* Espace au-dessus */
}

.upload-status { /* Statut (chargement, succès, erreur) */
    font-size: 0.85em;
    margin-top: 5px;
    min-height: 1.2em; /* Un peu plus d'espace */
    font-weight: bold;
}

#file-upload { /* Input caché */
    display: none; /* Caché, activé par le bouton */
}

/* État chargement du bouton upload */
.custom-file-upload.loading {
    background-color: #9e9e9e;
    pointer-events: none; /* Non cliquable */
}

.custom-file-upload.loading::after { /* Spinner */
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}







/* Conteneur pour contrôles alignés (ex: zoom) */
.control-group .controls-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%; /* Prend toute la largeur */
}

/* Tooltip (aide contextuelle) */
/* Pour afficher les tooltips au survol */
.tooltip_xml {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255, 255, 255);
    padding: 15px;
    border-radius: 3px;
    font-size: 12px;
    z-index: 99999;
    top: 150%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 200px;
}

.control-group:hover .tooltip_xml {
    display: block;
}

/* Contrôles spécifiques (Tempo, Latence, Zoom) */
#syncTempo, #globalTempo, #midiBPM {
    border: 1px solid #ccc; /* Bordure standard */
    padding: 5px;
    border-radius: 3px;
}
#syncTempo:focus, #globalTempo:focus, #midiBPM:focus {
    border-color: #4682B4;
    outline: none;
}

#tempo, #latency, #midiBPM { /* Inputs numériques */
    width: 70px; /* Largeur fixe */
    text-align: center;
}

.zoom-btn { /* Boutons +/- Zoom */
    padding: 6px; /* Plus petit */
    border: 1px solid #aaa;
    border-radius: 5px;
    background: #e0e0e0; /* Gris clair */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
}
.zoom-btn:hover {
    background: #d0d0d0;
    border-color: #888;
    opacity:0.5;
}
.zoom-btn:active {
    background: #c0c0c0;
}
/* Bouton Mode Apprentissage actif (chapeau de bachelier) */
#practice-mode-topbtn.pk-on {
    color: #4a90e2;
    background: rgba(74,144,226,0.10);
}
#practice-mode-topbtn.pk-on svg rect,
#practice-mode-topbtn.pk-on svg path {
    stroke: #4a90e2;
}
/* Crosshair : garde sa couleur #1976D2 même quand pk-on est actif */
#practice-mode-topbtn.pk-on svg circle,
#practice-mode-topbtn.pk-on svg line {
    stroke: #1976D2;
    fill: #1976D2;
}

/* ── Pastille notification rouge sur bouton Apprentissage ── */
#practice-mode-topbtn .notif-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #e24b4a;
    border-radius: 50%;
    border: 2px solid #464646;
    pointer-events: none;
    z-index: 1;
}

/* ── Quick-bar mode pratique (Recommencer + Éditer) ── */
#practice-quickbar {
    align-items: stretch;
    border-left: 1px solid rgba(74,144,226,0.30);
    margin-left: 3px;
    padding-left: 3px;
    gap: 0;
}
#practice-quickbar-restart,
#practice-quickbar-edit {
    color: #4a90e2;
    padding: 4px 6px;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
#practice-quickbar-restart:hover,
#practice-quickbar-edit:hover {
    background: rgba(74,144,226,0.12);
    color: #2a6abf;
}
#practice-quickbar-restart svg,
#practice-quickbar-edit svg {
    stroke: #4a90e2;
    flex-shrink: 0;
}
#practice-quickbar-restart:hover svg,
#practice-quickbar-edit:hover svg {
    stroke: #2a6abf;
}
#practice-quickbar-modename {
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zoom-btn svg {
    width: 18px;
    height: 18px;
    fill: #ffffff; /* Couleur icône */
}
/* Mixer MIDI — l'icône est en stroke uniquement, pas fill */
#midi-mixer-btn {
    display: none; /* caché par défaut, affiché en mode MIDI via JS */
    align-items: center;
    justify-content: center;
}
#midi-mixer-btn svg {
    fill: none !important;
    stroke: #555;
    stroke-width: 2;
    width: 18px;
    height: 18px;
}
/* Retrait des styles spécifiques barre haute */
/* #top-controls-bar .zoom-btn { ... } */

#zoom-value { /* Affichage % Zoom */
    margin: 0 8px;
    min-width: 45px;
    text-align: center;
    font-weight: bold;
    font-size: 0.95em;
}
/* Retrait des styles spécifiques barre haute */
/* #top-controls-bar #zoom-value { ... } */

#zoom-slider { /* Slider Zoom */
    width: 100%;
    max-width: 180px; /* Plus large */
    margin-top: 5px; /* Espace au-dessus si seul */
}
.controls-row #zoom-slider {
     flex-grow: 1; /* Prend l'espace restant */
     margin-top: 0;
}




/* Navigation Inter-Pages */
#page-navigation {
    display: flex; /* Affiché par défaut, masqué par JS si mode non paginé */
    justify-content: center; /* Centrer les boutons */
    gap: 1rem; /* Espace entre boutons */
    width: 100%;
    padding: 10px;
    background-color: rgba(240, 240, 240, 0.95); /* Couleur du menu */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Ombre en haut */
    border-top: 1px solid #ddd; /* Ligne de séparation */
    /* Positionnement géré dans la section responsive/menu */
    z-index: 950; /* Au-dessus du contenu, sous la barre haute */
}
#page-navigation button {
    padding: 8px 12px; /* Taille adaptée */
    font-size: 0.9em;
}
#pageInfo {
    font-size: 0.9em;
    font-weight: bold;
    align-self: center; /* Centrer verticalement */
    color: #555;
}

/* Contrôles Mute */
#mute-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px; /* Espacement ligne/colonne */
    padding: 10px;
    background: #e9e9e9; /* Fond légèrement différent */
    border-radius: 5px;
    border: 1px solid #ddd;
}

#mute-controls label {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    cursor: pointer;
}

#mute-controls input[type="checkbox"] {
    margin-right: 6px;
    width: 16px; /* Taille checkbox */
    height: 16px;
    cursor: pointer;
}

/* Boutons de Mode de Layout */
.layout-buttons-container {
    margin: 15px 0;
}

.layout-buttons {
    display: flex;
    border: 1px solid #ccc; /* Bordure plus visible */
    border-radius: 4px;
    overflow: hidden; /* Pour les coins arrondis */
}

.layout-btn {
    flex: 1; /* Prend largeur égale */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background-color: #f0f0f0; /* Fond par défaut */
    border: none;
    border-right: 1px solid #ccc; /* Séparateur */
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 5px;
    color: #333; /* Couleur texte par défaut */
}
.layout-btn:last-child {
    border-right: none; /* Pas de bordure pour le dernier */
}

.layout-btn.active {
    background-color: #ff9900; /* Vert si actif */
    color: white;
    font-weight: bold;
}

.layout-btn:not(.active):hover {
    background-color: #e0e0e0; /* Hover plus subtil */
}
.layout-btn svg {
    width: 18px;
    height: 18px;
}
.layout-btn.active svg {
    stroke: white; /* Icône blanche si actif */
}

/* Menus Déroulants Personnalisés (Select) */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%; /* Prend toute la largeur dispo */
    max-width: 220px; /* Limite largeur */
}

.custom-select {
    position: relative;
    cursor: pointer;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}

.custom-select .selected-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    position: relative;
}
/* Flèche déroulante */
.custom-select .selected-option::after {
    content: '▼'; /* Utilisation caractère unicode */
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #555;
    transition: transform 0.2s ease;
}
.custom-select.open .selected-option::after {
    transform: translateY(-50%) rotate(180deg); /* Flèche inversée si ouvert */
}

.custom-select .options { /* Liste déroulante */
    position: absolute;
    display: none; /* Caché par défaut */
    top: calc(100% + 2px); /* Juste en dessous */
    left: 0;
    right: 0;
    background: white;
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Ombre plus prononcée */
    z-index: 1100; /* Au-dessus de la plupart des éléments */
    max-height: 200px;
    overflow-y: auto;
}

.custom-select.open .options {
    display: block; /* Affiché si ouvert */
}

.custom-select .options li {
    padding: 10px 12px; /* Plus de padding vertical */
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.1s ease;
}

.custom-select .options li:hover {
    background-color: #f0f0f0; /* Hover */
}

.custom-select .options li.active {
    background-color: #e0e0e0; /* Sélectionné */
    font-weight: bold;
}

.custom-select svg { /* Icônes dans le select */
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

 /* --- Overlay et Barre de Chargement --- */
        /* Styles existants améliorés pour l'overlay de chargement */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center; /* Centré verticalement par défaut (desktop) */
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .loading-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            padding: 30px;
            width: 85%;
            max-width: 400px;
            text-align: center;
        }

        /* Styles responsifs pour mobile */
        @media (max-width: 768px) {
            #loading-overlay {
            /*   align-items: flex-start; /* Aligner en haut sur mobile */
            /*   padding-top: 80px; /* Espace depuis le haut de l'écran */
            }
            
            .loading-container {
                padding: 20px; /* Réduire légèrement le padding */
                width: 90%; /* Légèrement plus large */
            }

            .loading-title {
                font-size: 1.2em; /* Titre légèrement plus petit */
                margin-bottom: 15px; /* Espace réduit */
            }
        }

        /* Très petits écrans */
        @media (max-width: 480px) {
            #loading-overlay {
        /*     padding-top: 60px; /* Moins d'espace en haut */
            }
            
            .loading-container {
                padding: 15px; /* Padding encore plus petit */
                width: 92%; /* Presque toute la largeur */
            }
        }

        /* Orientation paysage sur mobile */
        @media (max-width: 768px) and (orientation: landscape) {
            #loading-overlay {
            /*  padding-top: 20px; /* Moins d'espace en haut en mode paysage */
            }
        }

        /* Ajout du style pour le SVG rotatif */
        .loading-svg {
            width: 45px;
            height: 45px;
            margin: 0 auto 4px;
            display: block;
            border-radius: 10px;
            overflow: hidden;
            transform-origin: center center; /* Définit le point central pour la rotation */
            animation: rotate 2s linear infinite;
        }
        .loading-brand {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 2px 0 18px;
            gap: 4px;
        }
        .loading-brand-name {
            font-family: 'Corbel', 'Candara', 'Calibri', 'Segoe UI', sans-serif;
            font-weight: 700;
            font-size: 28px;
            letter-spacing: 0.5px;
            line-height: 1;
        }
        .loading-brand-tagline {
            font-size: 10px;
            font-weight: 700;
            color: rgba(0,0,0,.38);
            letter-spacing: 1.8px;
            text-transform: uppercase;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* Styles pour la barre de progression */
        .progress-container {
            width: 100%;
            height: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
            margin: 15px 0;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background-color: #0066B3;
            width: 0%;
            transition: width 0.5s ease;
        }

        .progress-text {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .loading-status {
            font-size: 14px;
            color: #555;
        }

        .loading-title {
            margin-top: 0;
        }

/* --- Bouton Plein Écran --- */
#fullscreen-button svg {
    transition: transform 0.3s ease;
}
#fullscreen-button:hover svg {
    transform: scale(1.2);
}
/* Styles spécifiques au mode fullscreen */
body.fullscreen-mode {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Cache les barres de scroll du body */
}
body.fullscreen-mode #fullscreen-button svg {
    transform: rotate(180deg); /* Icône inversée ? */
}
/* Styles pour l'iframe en mode fullscreen (si utilisé) */
.fullscreen-iframe .highslide-html {
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #fff;
}
.fullscreen-iframe .highslide-header {
    display: none;
}
.fullscreen-iframe .highslide-body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

/* --- Bouton Retour Haut de Page --- */
#scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 8px 12px; /* Taille adaptée */
    background-color: rgba(51, 51, 51, 0.8); /* Semi-transparent */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: none; /* Caché par défaut */
    z-index: 900; /* Au-dessus du contenu mais sous le menu */
    transition: opacity 0.3s, background-color 0.3s;
}
#scroll-to-top.visible {
    display: block; /* Affiché par JS */
}
#scroll-to-top:hover {
    background-color: rgba(51, 51, 51, 1); /* Opaque au hover */
}


/* ==========================================================================
   5. Styles Utilitaires / Divers
   ========================================================================== */

.container_turnstile { /* Si utilisé pour Captcha */
  display:none;
}

.piece-load-btn { /* Boutons de chargement de morceau (si utilisés) */
    padding: 6px 12px;
    background-color: #ff9900;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s;
}
.piece-load-btn:hover {
    background-color: #45a049;
}
.piece-load-btn:active {
    background-color: #3e8e41;
}


/* ==========================================================================
   6. Styles Responsifs (Media Queries)
   ========================================================================== */

/* --- Tablettes et grands mobiles (max 1200px) --- */
@media (max-width: 1200px) {
    #hamburger {
        display: flex; /* Assure que le hamburger est visible */
    }
}

/* --- Mobiles (max 768px) --- */
@media (max-width: 768px) {
    /* Masquer le contrôle volume sur tablette / mobile */
    #volume-ctrl-main { display: none !important; }

    /* Ajustements généraux */
    body {
        /* Forcer le non-débordement horizontal */
        overflow-x: hidden;
    }

    /* Barre supérieure */
    #top-controls-bar {
        padding: 5px; /* Moins de padding */
        min-height: 44px;
    }
    .main-buttons {
        margin-left: 50px; /* Moins d'espace pour hamburger */
        gap: 5px;
    }
    .zoom-controls {
        gap: 3px;
        margin-left: 5px;
    }
    #top-controls-bar button {
        padding: 6px 8px; /* Boutons plus petits */
        font-size: 0.9em;
        min-height: 40px;
        min-width: 40px;
    }
    #zoom-value {
        min-width: 40px;
        margin: 0 5px;
    }

     /* Zone tactile étendue pour hamburger (debug) */
     /* #hamburger::before { ... } /* Style déjà défini */

    /* Affichage SVG */
    #svg_output {
        padding: 0.5rem;
        padding-bottom: 60px !important; /* Plus d'espace en bas */
        margin-top: 110px !important;/* valeur de secours si JS non encore exécuté */
    padding-top: 20px;
    }

    #svg_output {
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
        transform: translate3d(0,0,0);
    }

    /* Optimiser les mesures surlignées */
[data-was-active="true"] {
    will-change: fill, stroke;
    transform: translate3d(0,0,0);
}

    /* Mode Continu Vertical sur Mobile */
    #svg_output[data-continuous-mode="true"] {
        height: calc(100vh - 60px) !important; /* Moins de hauteur */
        padding: 0.5rem !important;
        padding-bottom: 60px !important;
    }
    #svg_output[data-continuous-mode="true"] .system {
        margin-bottom: 12px !important; /* Moins d'espace */
    }
    #svg_output[data-continuous-mode="true"] .staff {
        margin-bottom: 6px !important; /* Moins d'espace */
    }
     /* Forcer le retour à la ligne des mesures sur mobile (peut nécessiter ajustement options Verovio) */
    /* #svg_output[data-continuous-mode="true"] .system { flex-wrap: wrap !important; } */
    /* #svg_output[data-continuous-mode="true"] .measure { min-width: 95% !important; margin-bottom: 5px !important; } */

    /* Mode Horizontal sur Mobile */
     #svg_output.no-breaks-mode {
        padding: 0.25rem;
        padding-bottom: 15px !important;
    }
    #svg_output.no-breaks-mode .system {
         margin-right: 10px; /* Moins d'espace entre systèmes */
    }

    /* Navigation de Page */
    #page-navigation {
        padding: 8px 5px; /* Moins de padding */
        gap: 0.3rem;
    }
     #page-navigation button {
        padding: 6px 8px;
        font-size: 0.85em;
    }

    /* Optimisation Barres de Scroll Tactiles */
    #svg_output::-webkit-scrollbar {
        width: 12px; /* Plus larges pour toucher */
        height: 12px;
    }

    /* Éléments partition plus visibles */
    #svg_output svg .staff-line { stroke-width: 0.9px !important; }
    #svg_output svg .note
    .highlight { opacity: 0.5 !important; } /* Highlight plus visible */
}

/* --- Petits Mobiles (max 480px) --- */
@media (max-width: 480px) {
    /* Barre supérieure encore plus compacte */
    #top-controls-bar {
        padding: 4px 3px;
    }
     .main-buttons { margin-left: 45px; gap: 3px; }
     #top-controls-bar button { padding: 5px 6px; font-size: 0.8em; min-height: 36px; min-width: 36px; }
     #zoom-value { min-width: 35px; margin: 0 3px; font-size: 0.9em; }

     /* Affichage SVG */
    #svg_output {
        padding: 0.3rem;
        padding-bottom: 60px !important;
    }

    /* Mode Continu */
    #svg_output[data-continuous-mode="true"] {
        height: calc(100vh - 160px) !important; /* Encore moins de hauteur */
        padding: 0.3rem !important;
        padding-bottom: 50px !important;
    }

    /* Navigation de Page */
    #page-navigation {
        padding: 5px;
    }
    #page-navigation button {
        padding: 5px 7px !important;
        font-size: 0.8em !important;
    }
    #pageInfo {
        font-size: 0.8em;
    }


}

/* --- Très Petits Mobiles (max 375px) --- */
@media (max-width: 375px) {
     #top-controls-bar { padding: 3px 2px !important; }
     #svg_output { padding: 3px !important; padding-bottom: 50px !important; }
     #page-navigation { padding: 4px !important; }
     #page-navigation button { padding: 4px 6px !important; font-size: 0.75em !important; }
}

/* --- Orientation Paysage sur Mobile (max 768px width) --- */
@media (max-width: 768px) and (orientation: landscape) {
    /* Mode Continu : maximise hauteur */
    #svg_output[data-continuous-mode="true"] {
        height: calc(100vh - 60px) !important; /* Ajuster hauteur barre */
    }
    #top-controls-bar {
        padding: 4px 8px !important; /* Padding adapté */
         /* Pas besoin de flex-wrap ici normalement */
    }

    /* Espacement vertical réduit en paysage */
    #svg_output[data-continuous-mode="true"] .system { margin-bottom: 10px !important; }
    #svg_output[data-continuous-mode="true"] .staff { margin-bottom: 4px !important; }
}


/* --- Styles spécifiques après réorganisation (ex: Turnstile) --- */
.container_turnstile {
  display: none;
}

#playAudio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff9900; /* Vert comme dans votre image */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
    gap: 8px; /* Espace entre l'icône et le texte */
  }
  
  #playAudio:hover {
    border-color: transparent transparent transparent #CCC;  /* Change la couleur de l'icône au survol, pas le fond */
    
  }
  
  /* Play triangle icon */
  .play-icon-audio {
    width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px 0 6px 10px; /* Taille légèrement réduite */
      border-color: transparent transparent transparent #FFF;
      transition: border-color 0.3s;
      margin-top: 1px; /* Légère correction verticale */
      align-items: center;
  }

  #stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff3300;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0 12px;
    height: 35px;
    cursor: pointer;
    font-weight: bold;
  }
  
  /* Stop square icon */
  .stop-icon {
    width: 16px;
    height: 16px;
    position: relative;
    background-color: #FFF;
    transition: background-color 0.3s;
    display: flex;
    justify-content: space-between; /* Espace égal entre les barres */
    align-items: center;
    margin: 0 auto; /* Centre horizontalement */

  }
  
  #stop:hover .stop-icon {
    background-color: #FFF;
  }

   /* Pause icon - utilise deux rectangles verticaux */
   .pause-icon-audio {
    width: 16px;
    height: 16px;
    position: relative;
    display: flex;
    justify-content: space-between; /* Espace égal entre les barres */
    align-items: center;
    margin: 0 auto; /* Centre horizontalement */
}

.pause-icon-audio:before, 
.pause-icon-audio:after {
    content: "";
    position: static; /* Changer de absolute à static */
    background-color: #FFF;
    width: 5px;
    height: 16px;
    display: inline-block; /* Afficher comme blocs inline */
}
  
  .pause-icon-audio:before {
    left: 0;
  }
  
  .pause-icon-audio:after {
    right: 0;
  }
  
  /* Hover pour l'icône pause */
  #pauseAudio:hover .pause-icon-audio:before,
  #pauseAudio:hover .pause-icon-audio:after {
    background-color: #CCC;
  }
  
    /* Conteneur play (legacy - gardé pour compatibilité JS externe) */
  .play-container {
      display: inline-flex;
      align-items: center;
      gap: 6px;
  }

/* IFRAME XML */
      #iframeContainer {
        margin-top: 20px;
      }
      iframe {
        width: 100%;
        height: 800px;
        border: 1px solid #ccc;
      }
      
      /* Style pour le séparateur (liseret gris) en bas de l'iframe */
      .iframe-isolation-wrapper::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: #cccccc;
        margin-top: 10px;
        margin-bottom: 20px;
      }
      
      #loadIframeLink {
          display: flex;
          align-items: center; /* Centre verticalement */
          gap: 8px; /* Espace entre l'image et le texte */
          text-decoration: none; /* Optionnel : supprime le soulignement */
      }
      
      #loadIframeLink img {
          vertical-align: middle; /* Sécurité pour anciens navigateurs */
      }
      /* FIN IFRAME XML */


/* Style pour le conteneur de l'icône du métronome */
.metronome-icon-container {
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
    transition: opacity 0.3s ease;
}

/* Animation de transition pour un affichage/masquage fluide */
.metronome-icon-container.hidden {
    opacity: 0;
    visibility: hidden;
    width: 0;
    margin: 0;
    overflow: hidden;
}
    
    /* Nouvelle icône de métronome triangulaire */
    .metronome-icon {
        display: inline-block;
        width: 18px;
        height: 28px;
        position: relative;
        transition: transform 0.3s ease;
    }
    
    /* Triangle principal */
    .metronome-icon:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 28px solid #444;
    }
    
    /* Pendule du métronome */
    .metronome-icon:after {
        content: '';
        position: absolute;
        top: 2px;
        left: 9px;
        width: 1px;
        height: 20px;
        background-color: #fff;
        transform-origin: bottom center;
        transform: rotate(15deg);
        transition: transform 0.3s ease;
    }
    
    /* Animation du pendule lors de l'activation */
    .metronome-icon.active:after {
        transform: rotate(-15deg);
    }
    
    /* Base du métronome */
    .metronome-icon:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 28px solid #444;
    }
    
    /* Petite base en dessous du métronome - supprimée */
    .metronome-icon:after {
        content: none; /* Suppression de la barre horizontale noire */
    }
    
    /* Pendule du métronome en tant qu'élément supplémentaire */
    .metronome-icon span {
        position: absolute;
        top: 2px;
        left: 9px;
        width: 1px;
        height: 20px;
        background-color: #fff;
        transform-origin: bottom center;
        transform: rotate(15deg);
        transition: transform 0.3s ease;
        z-index: 1;
    }
    
    .metronome-icon.active span {
        transform: rotate(-15deg);
    }
    
/* S'assurer que le conteneur du BPM est caché correctement en mode MIDI */
.bpm-control-hidden {
    opacity: 0;
    width: 0;
    margin: 0;
    overflow: hidden;
    visibility: hidden;
}

    
    .bpm-control-always-visible {
        display: inline-block;
        vertical-align: middle;
        transition: all 0.3s ease;
    }


    
         

     /* Styles améliorés pour l'affichage continu */
        #svg_output[data-continuous-mode="true"] {
            overflow-y: auto !important;
            overflow-x: auto !important;
            scrollbar-width: thin;
            padding: 0 !important;
            margin: 0 auto !important;
            max-width: 100% !important;
        }
        
        /* Hauteur par défaut pour le mode normal */
        #svg_output[data-continuous-mode="true"] {
            height: 90% !important;
        }
        
        /* Hauteur spécifique pour l'iframe étendue (largeur > 1280px) */
        @media (min-width: 1280px) {
            #svg_output[data-continuous-mode="true"] {
                height: calc(100vh - 160px) !important;
              
            }
        }
        
        #svg_output[data-continuous-mode="true"] svg {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 auto !important;
            display: block !important;
        }
        
        /* Amélioration de l'espacement des portées */
        #svg_output[data-continuous-mode="true"] .system {
            margin-bottom: 20px !important;
        }
        
        #svg_output[data-continuous-mode="true"] .staff {
            margin-bottom: 10px !important;
        }
        
        /* Cacher les contrôles de pagination en mode continu */
        #svg_output[data-continuous-mode="true"] ~ #pagination-controls {
            display: none !important;
        }
        
        /* Style pour la mise en évidence des mesures actives */
        .highlight {
            pointer-events: none;
            animation: pulse 1.5s infinite alternate;
        }
        
        @keyframes pulse {
            0% { opacity: 0.2; }
            100% { opacity: 0.5; }
        }
        
        /* Amélioration des barres de défilement */
        #svg_output::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        
        #svg_output::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        
        #svg_output::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        
        #svg_output::-webkit-scrollbar-thumb:hover {
            background: #555;
        }



        /* Styles pour le contrôle de mise en évidence des notes */
#highlightNotesControl {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    padding: 5px 8px;
    margin-top: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease;
}

#highlightNotesControl:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

#highlightNotesControl label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    user-select: none;
}

#highlightNotesControl input[type="checkbox"] {
    margin-right: 5px;
}

#highlightNotesControl .small-text {
    font-size: 11px;
}

/* Styles pour l'animation d'affichage/masquage */
#highlightNotesControl.fade-in {
    animation: fadeIn 0.3s forwards;
}

#highlightNotesControl.fade-out {
    animation: fadeOut 0.3s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

/* S'assurer que le contrôle a la même apparence que celui du défilement automatique */
#highlightNotesControl {
    position: relative;
    z-index: 100;
}

/* Optimisations pour les appareils mobiles */
@media (max-width: 768px) {
    #highlightNotesControl {
        padding: 4px 6px;
    }
    
    #highlightNotesControl .small-text {
        font-size: 10px;
    }
}


.bouton_submit_menu_jaune {
    display: block;
    width: auto;
    padding: 4px 4px 6px;
    position: relative;
    color: #333333;
font-size: clamp(9pt, 2vw, 10pt); 
    text-decoration: none;
    font-family: 'luciole';
line-height: 20px;
}

.bouton_submit_menu_jaune:hover {
    background-color: #FF8A00;
    color: #FFFFFF;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   STYLES MIGRÉS DEPUIS player-xml-fs_V8-12.js
   ========================================================================== */

/* --- Upload prompt (formulaire de téléchargement central) --- */
.upload-prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    max-width: 500px;
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* ── Bouton langue sur la page upload (top-right) ── */
.upload-lang-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    transition: background 0.2s, box-shadow 0.2s;
    z-index: 10;
}
.upload-lang-btn:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.upload-lang-btn .lang-flag-icon {
    display: block;
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.15);
}
.upload-lang-btn .lang-code-label {
    font-size: 10px;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.3px;
    line-height: 1;
}

/* ── Layout body : formulaire + mascotte côte à côte ── */
.upload-prompt-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
}
.upload-prompt-form {
    flex: 1;
    min-width: 0;
}

/* ── Mascotte chef d'orchestre (sous le bouton upload) ── */
.upload-prompt-mascot {
    display: flex;
    justify-content: center;
    margin: 16px auto 4px;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.2s;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
.upload-prompt-mascot:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.22));
}
.upload-prompt-mascot:active {
    transform: scale(0.97);
}
/* Label sous la mascotte */
.upload-mascot-label {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin: 4px auto 8px;
    letter-spacing: 0.3px;
}
/* Tooltip bulle au survol */
.upload-prompt-mascot::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.78);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.upload-prompt-mascot:hover::after {
    opacity: 1;
}

/* Sur mobile : réduction du padding et de la largeur */
@media (max-width: 768px) {
    .upload-prompt {
        width: 90%;
        padding: 20px;
    }
    /* Mascotte : réduite sur mobile */
    .upload-prompt-mascot .fsm-mascot svg {
        width: 90px !important;
        height: auto !important;
    }
}
/* Tablette : ajuster la mascotte */
@media (max-width: 1024px) and (min-width: 769px) {
    .upload-prompt-mascot .fsm-mascot svg {
        width: 110px !important;
        height: auto !important;
    }
}

.upload-prompt h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
}

.upload-prompt p {
    margin-bottom: 25px;
    color: #666;
    font-size: 16px;
    line-height: 1.5;
}

.upload-prompt .upload-section {
    margin: 0 auto;
    max-width: 400px;
    text-align: center;
}

.upload-prompt .file-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.upload-prompt .button-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
}

.upload-prompt .custom-file-upload {
    padding: 12px 24px;
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
}

.upload-prompt .custom-file-upload:hover {
    background-color: #3367d6;
    transform: translateY(-2px);
}

.upload-prompt .custom-file-upload:active {
    transform: translateY(0);
}

.upload-prompt .filename-display {
    display: block;
    margin-top: 12px;
    font-style: italic;
    color: #666;
}

.upload-prompt .upload-status {
    margin-top: 8px;
    font-size: 14px;
    color: #4caf50;
}

/* --- Surlignage des notes en cours de lecture --- */
.note-playing use,
.note-playing path {
    fill: var(--vs-note-color, #ff7b7b) !important;
    stroke: var(--vs-note-color, #ff7b7b) !important;
    transition: fill 0.08s ease-out, stroke 0.08s ease-out;
}

/* --- Zone cliquable des mesures --- */
.click-area {
    fill: transparent !important;
    stroke: none !important;
    opacity: 0 !important;
    pointer-events: all !important;
}

/* --- Transition du container de partition --- */
#svg_output {
    transition: all 0.3s ease;
}

/* --- Mode petit écran --- */
#svg_output.small-screen-mode svg {
    transform-origin: top left;
}

#svg_output.small-screen-mode .system {
    margin-bottom: 24px !important;
}

#svg_output.small-screen-mode .staff {
    margin-bottom: 8px !important;
}

#svg_output.small-screen-mode .measure {
    break-inside: avoid !important;
}

@media (max-width: 768px) {
    #svg_output[data-continuous-mode="true"] svg .system {
        max-width: 100% !important;
        flex-wrap: wrap !important;
        display: flex !important;
    }

    #svg_output[data-continuous-mode="true"] svg .measure {
        min-width: 90% !important;
        margin-bottom: 5px !important;
    }

    #svg_output[data-continuous-mode="true"] .staff {
        width: 100% !important;
    }
}

/* --- Espacement mode continu (spacing) --- */
#svg_output[data-continuous-mode="true"] svg .system {
    margin-bottom: 15px !important;
}

#svg_output[data-continuous-mode="true"] svg .staff {
    margin-bottom: 6px !important;
}

#svg_output[data-continuous-mode="true"] svg .note {
    visibility: visible !important;
}

/* --- Animations de chargement (spin) --- */
.loading-icon,
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Overlay de chargement audio (fade-out) --- */
#audio-loading-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* --- Overlay de chargement de la partition --- */
#loading-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 80%;
    max-width: 400px;
    text-align: center;
}

.loading-content h3 {
    margin-top: 0;
    color: #333;
    font-size: 18px;
}

.progress-container {
    height: 12px;
    background-color: #f0f0f0;
    border-radius: 6px;
    overflow: hidden;
    margin: 15px 0;
}

.progress-bar {
    height: 100%;
    background-color: #4285f4;
    width: 0%;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.status-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    min-height: 20px;
}

.loading-tip {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

/* --- Navigation de pages (mode paginé) --- */
#page-navigation {
    visibility: visible !important;
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 10px 20px;
    border-radius: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: opacity 0.3s ease;
    width: auto;
    animation: slideUp 0.3s ease-out;
}

#svg_output[data-continuous-mode="false"] ~ #page-navigation,
body.paged-mode #page-navigation {
    display: flex !important;
    align-items: center;
    gap: 15px;
}

#svg_output[data-continuous-mode="true"] ~ #page-navigation {
    display: none !important;
}

#page-navigation button {
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-navigation button:hover {
    background-color: #3367d6;
    transform: scale(1.1);
}

#page-navigation button:active {
    transform: scale(0.95);
}

#page-navigation button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.5;
}

#pageInfo {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    min-width: 100px;
    text-align: center;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* --- Sélecteur MP3 play-along --- */
.mp3-selector-container {
    display: inline-block;
    margin: 0 10px;
    padding: 4px;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #ddd;
    vertical-align: middle;
    position: relative;
}

.mp3-selector-toggle {
    cursor: pointer;
    padding: 5px;
    font-size: 14px;
    color: #333;
    user-select: none;
    display: flex;
    align-items: center;
}

.mp3-selector-toggle:hover {
    color: #007bff;
}

.toggle-icon {
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.2s;
}

.mp3-selector-content {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0px;
    min-width: 60px;
    z-index: 100;
}

.mp3-selector-title {
    font-size: 14px;
    margin-bottom: 5px;
    color: #555;
}

.mp3-selector {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
}

.playalong_icone {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

/* --- Espacement horizontal (mode horizontal, base statique) --- */
#svg_output.horizontal-mode svg .system {
    margin-bottom: 0px !important;
}

#svg_output.horizontal-mode svg .staff {
    margin-bottom: 0px !important;
}

#svg_output.horizontal-mode svg .system .staff + .staff {
    margin-top: -15px !important;
}

@media (max-width: 767px) {
    #svg_output.horizontal-mode svg .system .staff + .staff {
        margin-top: -20px !important;
    }
}

/* --- Visibilité du sélecteur MP3 selon le mode actif --- */
#mode-switcher[data-active="midi"] ~ #mp3-type-selector,
#mode-switcher-wrap:has(#mode-switcher[data-active="midi"]) ~ #mp3-type-selector {
    display: none !important;
}

/* ============================================
   FREE-SCORES CTA BANNER
   À ajouter dans style-xml.css
   ============================================ */

   .freescores-cta {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.freescores-cta-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #f0d060;
    border-radius: 10px;
    text-decoration: none !important;
    color: #333 !important;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.freescores-cta-link:hover {
    background: linear-gradient(135deg, #fff3cd, #ffe9a0);
    border-color: #e0b830;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.freescores-cta-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.freescores-cta-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(200, 150, 0, 0.12);
    border-radius: 50%;
    color: #b8860b;
}

.freescores-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.freescores-cta-title {
    font-size: 14px;
    font-weight: 600;
    color: #8a6500;
    line-height: 1.3;
}

.freescores-cta-sub {
    font-size: 12px;
    color: #888;
    line-height: 1.3;
}

.freescores-cta-arrow {
    flex-shrink: 0;
    color: #c8a000;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.freescores-cta-link:hover .freescores-cta-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* --- Responsive mobile --- */
@media (max-width: 480px) {
    .freescores-cta-link {
        padding: 12px 14px;
        gap: 10px;
    }
    .freescores-cta-icon {
        width: 36px;
        height: 36px;
    }
    .freescores-cta-icon svg {
        width: 18px;
        height: 18px;
    }
    .freescores-cta-title {
        font-size: 13px;
    }
    .freescores-cta-sub {
        font-size: 11px;
    }
}

/* ============================================
   MOBILE : Marge supérieure pour les jeux
   NoteBlitz et RunChords (Android)
   ============================================ */
@media (max-width: 768px) {
    /* Panneaux de jeux — ajout d'un padding-top pour dégager le header */
    #noteblitz-panel,
    #noteblitz-container,
    [id*="noteblitz"],
    #runchords-panel,
    #runchords-container,
    [id*="runchords"] {
        margin-top: 48px !important;
    }

    /* Headers des jeux — s'assurer qu'ils ne sont pas coupés */
    #noteblitz-panel > :first-child,
    #noteblitz-container > :first-child,
    #runchords-panel > :first-child,
    #runchords-container > :first-child {
        padding-top: 8px;
    }
}

/* Icône Pratiquer : fill="none" sur le SVG root, fill="white" sur les touches blanches en inline */
#practice-mode-topbtn svg {
    overflow: visible; /* permet au crosshair de déborder légèrement du viewBox */
}


/* ============================================================
 * HORIZONTAL PAGED MODE — Pagination horizontale lazy-loading
 * Ajouter à la fin de style-xml.css
 * ============================================================ */

/* --- Conteneur principal en mode horizontal paginé --- */
#svg_output.horizontal-paged-mode {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto; /* smooth géré par JS pour plus de contrôle */
    gap: 0; /* pas d'espace, les pages s'enchaînent */
    align-items: flex-start;
    padding: 0.5rem !important;
    padding-bottom: 20px !important;
    /* PAS de cursor:grab → le curseur par défaut invite au clic */
    /* Le grabbing n'apparaît QUE pendant un vrai drag (via JS) */
    user-select: none;
    -webkit-user-select: none;
    /* GPU compositing hints */
    will-change: scroll-position;
    transform: translate3d(0, 0, 0);
}

/* Curseur grabbing UNIQUEMENT quand un drag est en cours (classe ajoutée par JS) */
#svg_output.horizontal-paged-mode.grabbing {
    cursor: grabbing !important;
}
#svg_output.horizontal-paged-mode.grabbing * {
    cursor: grabbing !important;
}

/* --- Slot (conteneur d'une page/segment) --- */
#svg_output.horizontal-paged-mode .hp-slot {
    flex: 0 0 auto; /* ne pas rétrécir ni grandir */
    position: relative;
    /* Pas de séparateur visible entre segments pour un enchaînement fluide */
    /* Transition douce à l'apparition */
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

#svg_output.horizontal-paged-mode .hp-slot.hp-rendered {
    opacity: 1;
}

/* Placeholder non-rendu : indicateur discret */
#svg_output.horizontal-paged-mode .hp-slot:not(.hp-rendered) {
    background: rgba(0, 0, 0, 0.02);
    opacity: 0.3;
}

/* --- SVG à l'intérieur de chaque slot --- */
#svg_output.horizontal-paged-mode .hp-slot svg {
    display: block;
    height: auto;
    width: auto; /* Laisser les dimensions pixel natives de Verovio (svgViewBox:false) */
    max-height: none;
    overflow: visible !important;
    vertical-align: top;
}

/* --- Systems & staves dans les segments --- */
#svg_output.horizontal-paged-mode .system {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#svg_output.horizontal-paged-mode .staff {
    margin-bottom: 2px !important;
}

/* --- Clic sur mesures : curseur pointer pour inviter au clic --- */
#svg_output.horizontal-paged-mode .measure {
    cursor: pointer;
}

/* --- Scrollbar personnalisée (desktop) --- */
#svg_output.horizontal-paged-mode::-webkit-scrollbar {
    height: 6px;
}
#svg_output.horizontal-paged-mode::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}
#svg_output.horizontal-paged-mode::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}
#svg_output.horizontal-paged-mode::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

/* ─── Mode sombre ─── */
.dark-mode #svg_output.horizontal-paged-mode .hp-slot:not(.hp-rendered) {
    background: rgba(255, 255, 255, 0.02);
}
.dark-mode #svg_output.horizontal-paged-mode::-webkit-scrollbar-track {
    background: #333;
}
.dark-mode #svg_output.horizontal-paged-mode::-webkit-scrollbar-thumb {
    background: #555;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    #svg_output.horizontal-paged-mode {
        padding: 0.25rem !important;
        padding-bottom: 15px !important;
        gap: 0;
    }

    #svg_output.horizontal-paged-mode .hp-slot {
        /* Sur mobile, on veut que chaque segment soit proche de la largeur écran */
        min-width: 60vw; /* placeholder sizing */
    }

    #svg_output.horizontal-paged-mode::-webkit-scrollbar {
        height: 4px;
    }
}

/* ─── Masquer la pagination en mode horizontal-paged-mode (ancienne version) ─── */
/* Note : format-scroll-horizontal (v3) affiche la pagination normalement */
#svg_output.horizontal-paged-mode + #page-navigation {
    display: none !important;
}

/* ─── Masquer la pagination pendant la lecture ─── */
body.is-playing #page-navigation {
    display: none !important;
}
/* ============================================================
 * PRACTICE PANEL — RESPONSIVE OVERRIDES
 * ============================================================
 * Cible : les écrans de PRÉSENTATION des 3 jeux dans le
 *         #practice-panel (la modale avant le lancement)
 *
 * 1. Grand écran (≥1024px) : panneau + contenu beaucoup plus gros
 * 2. Mobile paysage : layout deux colonnes côte à côte
 *
 * À ajouter À LA FIN de style-xml.css
 * ============================================================ */


/* ╔══════════════════════════════════════════════════════════╗
 * ║  1. GRAND ÉCRAN — Panneau de présentation plus gros     ║
 * ╚══════════════════════════════════════════════════════════╝ */

@media (min-width: 1024px) {

    /* ─── Le panneau lui-même : 380px → 660px ─── */
    .practice-panel.practice-panel--modal {
        width: 660px !important;
    }

    /* ─── Tab bar ─── */
    .nb-tab-bar .nb-tab {
        padding: 13px 12px !important;
        font-size: 14px !important;
    }

    /* ─── Mascottes : 52px → 80px ─── */
    .pp-intro-icon .fsm-mascot svg,
    .nb-intro-icon .fsm-mascot svg,
    .rc-intro-icon .fsm-mascot svg {
        width: 80px !important;
        height: 67px !important; /* 80 × 72/86 */
    }

    /* ─── Intro header Mode Pratique (grande version) ─── */
    .pp-intro-header {
        padding: 28px 24px 22px !important;
    }
    .pp-intro-icon {
        font-size: 44px !important;
        margin-bottom: 8px !important;
    }
    .pp-intro-title {
        font-size: 28px !important;
    }
    .pp-intro-tagline {
        font-size: 14.5px !important;
        margin-top: 6px !important;
    }

    /* ─── Intro headers NoteBlitz & RunChords : layout compact flex-row ─── */
    .nb-intro-header,
    .rc-intro-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 20px 0 !important;
        text-align: left !important;
    }
    .nb-intro-icon,
    .rc-intro-icon {
        flex: 0 0 auto !important;
        font-size: 32px !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }
    .nb-intro-icon .fsm-mascot svg,
    .rc-intro-icon .fsm-mascot svg {
        width: 52px !important;
        height: 44px !important;
    }
    .nb-intro-title,
    .rc-intro-title {
        flex: 1 1 auto !important;
        font-size: 20px !important;
        margin: 0 !important;
        min-width: 0 !important;
        align-self: center !important;
    }
    .nb-intro-tagline,
    .rc-intro-tagline {
        flex: 0 0 100% !important;
        font-size: 11.5px !important;
        opacity: 0.8 !important;
        margin: -8px 0 0 0 !important;
        padding-left: calc(52px + 12px) !important;
        padding-bottom: 6px !important;
    }

    /* ─── Rules ─── */
    .nb-intro-rules {
        padding: 16px 20px !important;
    }
    .nb-rule {
        padding: 9px 0 !important;
        font-size: 14px !important;
        gap: 12px !important;
    }
    .nb-rule-num {
        width: 26px !important;
        height: 26px !important;
        font-size: 13px !important;
    }

    /* ─── Settings ─── */
    .nb-intro-settings {
        padding: 16px 20px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
    }
    .nb-setting-group {
        flex: 1 1 45% !important;
        margin-bottom: 4px !important;
    }
    .nb-setting-label {
        font-size: 12px !important;
        margin-bottom: 7px !important;
    }
    .nb-opt-btn {
        padding: 10px 8px !important;
        font-size: 13.5px !important;
        border-radius: 10px !important;
    }
    .nb-btn-group {
        gap: 7px !important;
    }
    .nb-toggle-row {
        font-size: 14px !important;
        padding: 6px 0 !important;
        gap: 10px !important;
    }
    .nb-toggle-row input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
    }

    /* ─── Best score badge ─── */
    .nb-best-badge {
        margin: 12px 20px !important;
        padding: 10px 16px !important;
        font-size: 14.5px !important;
        border-radius: 12px !important;
    }

    /* ─── Launch buttons ─── */
    .nb-intro-actions {
        padding: 14px 20px 22px !important;
    }
    .nb-launch-btn,
    .rc-launch-btn {
        padding: 18px !important;
        font-size: 18px !important;
        border-radius: 14px !important;
    }

    /* ─── Practice tab : Mode Pratique ─── */
    .pp-connect-hint {
        padding: 12px 20px !important;
        font-size: 13.5px !important;
    }
    .pp-connect-hint--hidden { display: none !important; }
    .practice-mode-tabs {
        gap: 8px !important;
    }
    .practice-mode-tab {
        padding: 16px 12px 14px !important;
    }
    .practice-mode-tab__text {
        font-size: 14px !important;
    }
    .practice-mode-tab__desc {
        font-size: 11px !important;
        max-width: 160px !important;
    }
    .practice-mode-tab__icon svg {
        width: 26px !important;
        height: 26px !important;
    }
    .pp-controls-row {
        padding: 18px 20px 8px !important;
        gap: 16px !important;
    }
    .pp-play-btn {
        width: 64px !important;
        height: 64px !important;
    }
    .pp-hand-btn {
        width: 48px !important;
        height: 48px !important;
    }
    .pp-main-controls {
        padding: 12px 20px !important;
    }

    /* Toggles & collapsible sections */
    .pp-toggles-row {
        padding: 0 20px !important;
    }
    .pp-toggle-btn {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }
    .practice-section {
        padding: 14px 20px !important;
    }
    .practice-toggle-row {
        font-size: 13.5px !important;
        gap: 10px !important;
    }
    .practice-stats {
        gap: 8px !important;
    }
    .practice-stat {
        padding: 10px 8px !important;
        border-radius: 12px !important;
    }
    .practice-stat__value {
        font-size: 24px !important;
    }
    .practice-stat__label {
        font-size: 10.5px !important;
    }

    /* Score banner */
    .practice-score-banner {
        padding: 10px 16px !important;
        border-radius: 12px !important;
    }
    .practice-score-banner__text {
        font-size: 14.5px !important;
    }

    /* Header */
    .practice-panel__header-content {
        padding: 14px 20px !important;
    }
    .practice-panel__title {
        font-size: 17px !important;
    }

    /* ─── Barre connexion MIDI : plus grande ─── */
    .practice-midi-indicator {
        padding: 6px 14px 6px 10px !important;
        font-size: 13px !important;
        gap: 7px !important;
        border-radius: 24px !important;
    }
    .practice-midi-dot {
        width: 10px !important;
        height: 10px !important;
    }
    .practice-midi-device-name {
        font-size: 13px !important;
        max-width: 200px !important;
    }
    .practice-midi-indicator__arrow {
        width: 12px !important;
        height: 12px !important;
    }
    /* Drawer déroulé */
    .practice-midi-drawer__inner {
        padding: 10px 20px 12px !important;
    }
    .practice-midi-drawer__row {
        font-size: 13px !important;
        gap: 8px !important;
    }
    .practice-select {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
    .practice-midi-status {
        font-size: 13px !important;
    }
}

/* ─── Très grand écran (≥1440px) : encore plus large ─── */
@media (min-width: 1440px) {
    .practice-panel.practice-panel--modal {
        width: 780px !important;
    }
    /* ─── Mascottes : 80px → 100px (Mode Pratique seulement) ─── */
    .pp-intro-icon .fsm-mascot svg {
        width: 100px !important;
        height: 84px !important; /* 100 × 72/86 */
    }
    .pp-intro-header {
        padding: 34px 30px 26px !important;
    }
    .pp-intro-icon {
        font-size: 52px !important;
    }
    .pp-intro-title {
        font-size: 32px !important;
    }
    /* NoteBlitz & RunChords : rester compact à 1440px aussi */
    .nb-intro-header,
    .rc-intro-header {
        padding: 10px 24px 0 !important;
        gap: 16px !important;
    }
    .nb-intro-icon .fsm-mascot svg,
    .rc-intro-icon .fsm-mascot svg {
        width: 60px !important;
        height: 51px !important;
    }
    .nb-intro-title,
    .rc-intro-title {
        font-size: 22px !important;
    }
    .nb-intro-tagline,
    .rc-intro-tagline {
        padding-left: calc(60px + 16px) !important;
        font-size: 13px !important;
    }
    .nb-rule {
        font-size: 15px !important;
    }
    .nb-opt-btn {
        padding: 12px 10px !important;
        font-size: 14.5px !important;
    }
    .nb-launch-btn,
    .rc-launch-btn {
        padding: 20px !important;
        font-size: 20px !important;
    }
    .pp-play-btn {
        width: 72px !important;
        height: 72px !important;
    }
    .pp-hand-btn {
        width: 52px !important;
        height: 52px !important;
    }

    /* ─── Barre connexion MIDI : encore plus grande ─── */
    .practice-midi-indicator {
        padding: 8px 16px 8px 12px !important;
        font-size: 14px !important;
        gap: 8px !important;
    }
    .practice-midi-dot {
        width: 12px !important;
        height: 12px !important;
    }
    .practice-midi-device-name {
        font-size: 14px !important;
        max-width: 240px !important;
    }
}


/* ╔══════════════════════════════════════════════════════════╗
 * ║  2. MOBILE PAYSAGE — Panneau en layout horizontal       ║
 * ║  Détecté par : orientation:landscape + max-height:500px ║
 * ╚══════════════════════════════════════════════════════════╝ */

@media (orientation: landscape) and (max-height: 500px) {

    /* ─── Le panneau : large et peu haut ─── */
    .practice-panel.practice-panel--modal {
        width: 96vw !important;
        max-width: 800px !important;
        max-height: 94vh !important;
    }
    .practice-panel.practice-panel--modal.practice-panel--hidden {
        transform: translate(-50%, -45%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* ─── Header compact ─── */
    .practice-panel__header-content {
        padding: 5px 12px !important;
    }
    .practice-panel__title {
        font-size: 13px !important;
    }

    /* ─── Tab bar compact ─── */
    .nb-tab-bar .nb-tab {
        padding: 6px 6px !important;
        font-size: 11px !important;
    }

    /* ═══════════════════════════════════════
     *  NoteBlitz & RunChords tabs :
     *  Intro-header à gauche, Rules+Settings+Launch à droite
     * ═══════════════════════════════════════ */

    /* Conteneur des onglets NoteBlitz et RunChords en flex row */
    #nb-tab-noteblitz-content,
    #rc-tab-content {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-y: auto !important;
        max-height: calc(94vh - 80px) !important;
    }
    #nb-tab-noteblitz-content.nb-tab-content--active,
    #rc-tab-content.nb-tab-content--active {
        display: flex !important;
    }
    #nb-tab-noteblitz-content:not(.nb-tab-content--active),
    #rc-tab-content:not(.nb-tab-content--active) {
        display: none !important;
    }

    /* Colonne gauche : l'intro header */
    #nb-tab-noteblitz-content > .nb-intro-header,
    #rc-tab-content > .rc-intro-header {
        width: 35% !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 12px !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
    }
    /* Mascottes en paysage : 52px → 44px (compact) */
    .pp-intro-icon .fsm-mascot svg,
    .nb-intro-icon .fsm-mascot svg,
    .rc-intro-icon .fsm-mascot svg {
        width: 44px !important;
        height: 37px !important; /* 44 × 72/86 */
    }
    #nb-tab-noteblitz-content > .nb-intro-header .nb-intro-icon,
    #rc-tab-content > .rc-intro-header .rc-intro-icon {
        font-size: 36px !important;
        margin-bottom: 6px !important;
    }
    #nb-tab-noteblitz-content > .nb-intro-header .nb-intro-title,
    #rc-tab-content > .rc-intro-header .rc-intro-title {
        font-size: 20px !important;
    }
    #nb-tab-noteblitz-content > .nb-intro-header .nb-intro-tagline,
    #rc-tab-content > .rc-intro-header .rc-intro-tagline {
        font-size: 11px !important;
    }

    /* Colonne droite : tout le reste (rules, settings, badge, launch) */
    #nb-tab-noteblitz-content > .nb-intro-rules,
    #nb-tab-noteblitz-content > .nb-intro-settings,
    #nb-tab-noteblitz-content > .nb-best-badge,
    #nb-tab-noteblitz-content > .nb-intro-actions,
    #rc-tab-content > .nb-intro-rules,
    #rc-tab-content > .nb-intro-settings,
    #rc-tab-content > .nb-best-badge,
    #rc-tab-content > .nb-intro-actions {
        width: 65% !important;
        margin-left: auto !important;
    }

    /* Rules compactes */
    #nb-tab-noteblitz-content > .nb-intro-rules,
    #rc-tab-content > .nb-intro-rules {
        padding: 6px 10px !important;
    }
    #nb-tab-noteblitz-content .nb-rule,
    #rc-tab-content .nb-rule {
        padding: 3px 0 !important;
        font-size: 11px !important;
        gap: 6px !important;
    }
    #nb-tab-noteblitz-content .nb-rule-num,
    #rc-tab-content .nb-rule-num {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
    }

    /* Settings : 2 colonnes horizontales */
    #nb-tab-noteblitz-content > .nb-intro-settings,
    #rc-tab-content > .nb-intro-settings {
        padding: 6px 10px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #nb-tab-noteblitz-content .nb-setting-group,
    #rc-tab-content .nb-setting-group {
        flex: 1 1 45% !important;
        margin-bottom: 2px !important;
    }
    #nb-tab-noteblitz-content .nb-opt-btn,
    #rc-tab-content .nb-opt-btn {
        padding: 5px 3px !important;
        font-size: 11px !important;
    }
    #nb-tab-noteblitz-content .nb-setting-label,
    #rc-tab-content .nb-setting-label {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }
    #nb-tab-noteblitz-content .nb-toggle-row,
    #rc-tab-content .nb-toggle-row {
        font-size: 11.5px !important;
        padding: 2px 0 !important;
    }

    /* Best badge compact */
    #nb-tab-noteblitz-content > .nb-best-badge,
    #rc-tab-content > .nb-best-badge {
        margin: 4px 10px !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    /* Launch buttons compact */
    #nb-tab-noteblitz-content > .nb-intro-actions,
    #rc-tab-content > .nb-intro-actions {
        padding: 4px 10px 8px !important;
    }
    #nb-tab-noteblitz-content .nb-launch-btn,
    #rc-tab-content .rc-launch-btn {
        padding: 10px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }


    /* ═══════════════════════════════════════
     *  Practice tab (Mode Pratique) :
     *  Intro à gauche, contrôles à droite
     * ═══════════════════════════════════════ */

    #nb-tab-practice-content {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-y: auto !important;
        max-height: calc(94vh - 80px) !important;
        position: relative !important;
    }
    #nb-tab-practice-content.nb-tab-content--active {
        display: flex !important;
    }
    #nb-tab-practice-content:not(.nb-tab-content--active) {
        display: none !important;
    }

    /* Colonne gauche : intro header */
    #nb-tab-practice-content > .pp-intro-header {
        width: 35% !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 10px !important;
        border-radius: 0 !important;
        flex-shrink: 0 !important;
    }
    #nb-tab-practice-content > .pp-intro-header .pp-intro-icon {
        font-size: 30px !important;
        margin-bottom: 4px !important;
    }
    #nb-tab-practice-content > .pp-intro-header .pp-intro-title {
        font-size: 18px !important;
    }
    #nb-tab-practice-content > .pp-intro-header .pp-intro-tagline {
        font-size: 10.5px !important;
    }

    /* Colonne droite : tout le reste (sauf connect-hint) */
    #nb-tab-practice-content > .pp-main-controls,
    #nb-tab-practice-content > .pp-toggles-row,
    #nb-tab-practice-content > #practice-settings-body,
    #nb-tab-practice-content > #practice-stats-body {
        width: 65% !important;
        margin-left: auto !important;
    }

    /* Connect hint → colonne gauche, sous la mascotte */
    #nb-tab-practice-content > .pp-connect-hint {
        position: absolute !important;
        left: 0 !important;
        bottom: 6px !important;
        width: 35% !important;
        margin-left: 0 !important;
        text-align: center !important;
        font-size: 9px !important;
        padding: 4px 6px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
        opacity: .85 !important;
    }
    #nb-tab-practice-content > .pp-connect-hint--hidden { display: none !important; }

    /* Main controls compact */
    #nb-tab-practice-content .pp-main-controls {
        padding: 6px 10px !important;
    }
    #nb-tab-practice-content .practice-mode-tab {
        padding: 10px 6px 9px !important;
    }
    #nb-tab-practice-content .practice-mode-tab__text {
        font-size: 12px !important;
    }
    #nb-tab-practice-content .practice-mode-tab__desc {
        font-size: 9.5px !important;
    }
    #nb-tab-practice-content .pp-controls-row {
        padding: 8px 10px 2px !important;
        gap: 8px !important;
    }
    #nb-tab-practice-content .pp-play-btn {
        width: 44px !important;
        height: 44px !important;
    }
    #nb-tab-practice-content .pp-hand-btn {
        width: 36px !important;
        height: 36px !important;
    }

    /* Toggles compact */
    #nb-tab-practice-content .pp-toggles-row {
        padding: 0 10px !important;
    }
    #nb-tab-practice-content .pp-toggle-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* Stats en ligne */
    #nb-tab-practice-content .practice-stats {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 3px !important;
    }
    #nb-tab-practice-content .practice-stat {
        padding: 4px 3px !important;
    }
    #nb-tab-practice-content .practice-stat__value {
        font-size: 15px !important;
    }
    #nb-tab-practice-content .practice-stat__label {
        font-size: 8px !important;
    }
    #nb-tab-practice-content .practice-section {
        padding: 6px 10px !important;
    }
    #nb-tab-practice-content .practice-toggle-row {
        font-size: 11.5px !important;
        margin-bottom: 3px !important;
    }

    /* ─── Annuler les margin-top Android en paysage ─── */
    #noteblitz-panel,
    #noteblitz-container,
    [id*="noteblitz"],
    #runchords-panel,
    #runchords-container,
    [id*="runchords"] {
        margin-top: 0 !important;
    }

    /* ══════════════════════════════════════════════════════════
     *  ROW VITESSE + SON — MOBILE PAYSAGE
     *
     *  Même problème qu'en portrait :
     *    • max-height + overflow:hidden injectés par le JS masquent
     *      le #pp-listen-seg quand il ne tient pas sur une ligne
     *    • margin-left:auto colle #pp-listen-seg à droite hors écran
     *
     *  Fix : flex-wrap + max-height élargi + margin-left neutralisé
     *  Les boutons sont compactés pour tenir dans la hauteur réduite.
     * ══════════════════════════════════════════════════════════ */

    /* Conteneur : autoriser le wrap sur 2 lignes */
    #nb-tab-practice-content #practice-flow-speed-row,
    #nb-tab-practice-content .practice-flow-speed-row:not(.practice-flow-speed-row--hidden) {
        flex-wrap: wrap !important;
        max-height: 80px !important;   /* 2 lignes de ~32px + row-gap */
        overflow: visible !important;
        row-gap: 5px !important;
        padding-bottom: 6px !important;
        align-items: center !important;
    }

    /* Label "VITESSE :" : reste sur la 1re ligne */
    #nb-tab-practice-content #practice-flow-speed-row > .practice-label,
    #nb-tab-practice-content .practice-flow-speed-row > .practice-label {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 10px !important;
    }

    /* Boutons vitesse : restent sur la 1re ligne */
    #nb-tab-practice-content .practice-speed-btns {
        flex: 1 1 auto !important;
        display: flex !important;
        gap: 3px !important;
    }
    #nb-tab-practice-content .practice-speed-btn {
        padding: 3px 7px !important;
        font-size: 10px !important;
    }

    /* Boutons son : passent sur la 2e ligne complète
       — neutralise le margin-left:auto injecté par le JS
       — tous les boutons visibles (Silence, MP3, Acc.MIDI, Solo MIDI…) */
    #nb-tab-practice-content #pp-listen-seg,
    #nb-tab-practice-content .pp-listen-seg {
        flex: 0 0 100% !important;        /* pleine largeur → 2e ligne */
        margin-left: 0 !important;        /* annule margin-left:auto du JS */
        display: flex !important;
        flex-wrap: wrap !important;       /* sécurité si 4+ boutons étroits */
        gap: 4px !important;
        justify-content: flex-start !important;
    }
    #nb-tab-practice-content .pp-listen-btn {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   SETTINGS OVERLAY — Styles
   Extrait de xmlmusic-player.php pour une meilleure maintenabilité.
   Contient : overlay principal, mixer, instrument picker, transposition,
   groove, paramètres visuels, sections collapsibles.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Overlay fond ────────────────────────────────── */
/* ── Backdrop : gère le scroll global de l'overlay ── */
#mixer-overlay-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10100;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 0 32px;
}
#mixer-overlay-bg.visible {
    display: flex;
}

/* ── Panneau : position dans le flux ── */
#mixer-overlay-panel {
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    padding: 22px 28px 20px;
    z-index: 10101;
    min-width: 300px;
    max-width: 440px;
    width: 92vw;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    margin: auto;
}
#mixer-overlay-panel h3 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    letter-spacing: 0.03em;
    text-align: center;
    flex-shrink: 0;
}
#mixer-tracks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Ligne d'un instrument ───────────────────────── */
.mixer-track {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #f7f8fa;
    border-radius: 10px;
    transition: background 0.15s;
}
.mixer-track.muted { background: #f0f0f0; opacity: 0.6; }
.mixer-track-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.mixer-track.muted .mixer-track-name { color: #999; }

/* Bouton mute */
.mixer-mute-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1.5px solid #ccc;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
}
.mixer-mute-btn:hover { background: #eee; }
.mixer-mute-btn.is-muted {
    background: #e74c3c;
    border-color: #e74c3c;
}
.mixer-mute-btn.is-muted svg { stroke: #fff; }

/* Bouton visibilité piste (œil) */
.mixer-eye-btn {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 6px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    color: #4a7fa5;
    padding: 0;
    margin-left: 2px;
}
.mixer-eye-btn:hover { background: #eef4fa; border-color: #4a7fa5; }
.mixer-eye-btn.is-hidden {
    background: #6c757d;
    border-color: #6c757d;
}
.mixer-eye-btn.is-hidden svg { stroke: #fff; }
/* Nom barré quand la piste est cachée visuellement */
.mixer-track.staff-hidden .mixer-track-name {
    text-decoration: line-through;
    color: #aaa;
}

/* Slider de volume */
.mixer-vol-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 110px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.mixer-vol-slider::-webkit-slider-runnable-track {
    height: 5px; border-radius: 3px; background: transparent;
}
.mixer-vol-slider::-moz-range-track {
    height: 5px; border-radius: 3px; background: transparent;
}
.mixer-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background: #5b9bd5;
    box-shadow: 0 1px 4px rgba(91,155,213,0.5);
    cursor: pointer;
    border: 2.5px solid #fff;
}
.mixer-vol-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #5b9bd5;
    cursor: pointer;
    border: 2.5px solid #fff;
}
.mixer-vol-label {
    flex-shrink: 0;
    font-size: 11px;
    color: #888;
    width: 30px;
    text-align: right;
}

/* Bouton fermer */
#mixer-overlay-close {
    margin-top: 16px;
    flex-shrink: 0;
    background: #f0f3f7;
    border: none;
    border-radius: 8px;
    padding: 9px 28px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: background 0.15s;
    align-self: center;
}
#mixer-overlay-close:hover { background: #e0e6ee; }
#midi-mixer-btn.active {
    background: rgba(91,155,213,0.15);
    color: #5b9bd5;
}

/* ── Bouton de sélection de son (par piste, mode MIDI) ─── */
.mixer-sound-btn {
    flex-shrink: 0;
    height: 26px;
    min-width: 26px;
    border: 1.5px solid #c8d5e8;
    border-radius: 6px;
    background: #f0f5fb;
    color: #4a7fa5;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 5px;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    max-width: 90px;
}
.mixer-sound-btn:hover { background: #ddeaf8; border-color: #4a7fa5; }
.mixer-sound-btn .sound-icon { font-size: 13px; line-height: 1; }
.mixer-sound-btn .sound-label {
    font-size: 10px;
    font-weight: 500;
    color: #4a6fa5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60px;
}
.mixer-sound-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* ── Panneau picker d'instrument ─────────────────────── */
#inst-picker-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10200;
}
#inst-picker-bg.visible { display: block; }

#inst-picker-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    padding: 0;
    z-index: 10201;
    width: min(520px, 96vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    overflow: hidden;
}

/* Header du picker */
#inst-picker-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    background: #f8fafc;
    border-radius: 16px 16px 0 0;
}
#inst-picker-title {
    font-size: 14px;
    font-weight: 700;
    color: #334;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}
#inst-picker-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
    border: 1.5px solid #d1d9e8;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
#inst-picker-search:focus { border-color: #5b9bd5; }

/* Corps scrollable */
#inst-picker-body {
    overflow-y: auto;
    flex: 1;
    padding: 10px 14px 14px;
}

/* Section "Variations" */
.inst-picker-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a9bbf;
    margin: 12px 0 6px 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.inst-picker-section-title:first-child { margin-top: 4px; }

/* Row de variations */
.inst-picker-variations-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.inst-picker-var-btn {
    padding: 5px 10px;
    border: 1.5px solid #c8d5e8;
    border-radius: 7px;
    background: #f0f5fb;
    color: #4a6fa5;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.inst-picker-var-btn:hover  { background: #ddeaf8; border-color: #5b9bd5; }
.inst-picker-var-btn.active { background: #5b9bd5; border-color: #5b9bd5; color: #fff; }
.inst-picker-var-btn.loading { opacity: 0.55; pointer-events: none; }

/* Grille des instruments */
.inst-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 5px;
    margin-top: 4px;
}
.inst-picker-item {
    padding: 7px 10px;
    border: 1.5px solid #e4eaf4;
    border-radius: 8px;
    background: #fafbfd;
    font-size: 12px;
    color: #334;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
}
.inst-picker-item:hover  { background: #eef4fb; border-color: #5b9bd5; }
.inst-picker-item.active { background: #5b9bd5; border-color: #5b9bd5; color: #fff; }
.inst-picker-item.loading { opacity: 0.55; pointer-events: none; }
.inst-picker-item-icon { font-size: 14px; flex-shrink: 0; }
.inst-picker-item-name { flex: 1; }

/* Footer */
#inst-picker-footer {
    padding: 12px 20px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
}
#inst-picker-status {
    font-size: 12px;
    color: #888;
    flex: 1;
}
#inst-picker-close {
    background: #f0f3f7;
    border: none;
    border-radius: 8px;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: background 0.15s;
}
#inst-picker-close:hover { background: #e0e6ee; }

@media (max-width: 480px) {
    .inst-picker-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    #inst-picker-panel { max-height: 92vh; }
}

/* Mobile */
@media (max-width: 480px) {
    #mixer-overlay-bg.visible { padding: 12px 0 20px; }
    #mixer-overlay-panel { padding: 18px 14px 16px; }
    .mixer-vol-slider { flex: 0 0 80px; }
}

/* ── Titres de section du mixer ──────────────────── */
.mixer-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a9bbf;
    margin: 0 0 8px 2px;
}
.mixer-section-title:not(:first-child) {
    margin-top: 16px;
}

/* ── Collapsible section titles ─────────────────── */
.mixer-section-title.collapsible {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    -webkit-user-select: none;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.mixer-section-title.collapsible:hover {
    background: rgba(74,127,212,0.07);
}
.mixer-section-title.collapsible::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-right: 2px solid #8a9bbf;
    border-bottom: 2px solid #8a9bbf;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 8px;
}
.mixer-section-title.collapsible.collapsed::after {
    transform: rotate(-45deg);
}
.collapsible-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    max-height: 600px;
    opacity: 1;
}
.collapsible-body.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── Visual Settings Section ────────────────────── */
#visual-settings-section {
    background: #f7f8fa;
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
}
.visual-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid #eceef2;
    gap: 8px;
    flex-wrap: wrap;
}
.visual-toggle-label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.visual-toggle-cb {
    width: 16px; height: 16px;
    accent-color: #4a7fd4;
    margin: 0;
    cursor: pointer;
}
.visual-toggle-text {
    font-size: 12.5px;
    color: #444;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Groove Section ────────────────────────────── */
#groove-settings-section {
    background: #f7f8fa;
    border-radius: 12px;
    padding: 10px 12px 6px;
    display: flex;
    flex-direction: column;
}
.groove-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #eceef2;
    gap: 10px;
}
.groove-row-last {
    border-bottom: none;
    padding-bottom: 2px;
}
.groove-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #444;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 95px;
}
.groove-label svg {
    color: #7a8ba8;
    flex-shrink: 0;
}
.groove-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.groove-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to right, #4a7fd4 0%, #4a7fd4 var(--gr-pct, 0%), #dce1e8 var(--gr-pct, 0%), #dce1e8 100%);
    outline: none;
    cursor: pointer;
}
.groove-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #4a7fd4;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    cursor: pointer;
}
.groove-slider::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #4a7fd4;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    cursor: pointer;
}
.groove-slider-val {
    font-size: 11px;
    font-weight: 600;
    color: #4a7fd4;
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.groove-select {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #333;
    cursor: pointer;
    outline: none;
    font-weight: 500;
}
.groove-select:focus {
    border-color: #4a7fd4;
    box-shadow: 0 0 0 2px rgba(74,127,212,0.15);
}
.groove-select-sm {
    padding: 3px 6px;
    font-size: 11.5px;
}
.vs-color-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    max-width: 118px; /* 6 pastilles × (16px + 4px gap) → 2 rangées de 6 */
    justify-content: flex-end;
}
.vs-color-btn {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s, transform 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.vs-color-btn:hover { transform: scale(1.18); }
.vs-color-btn.selected {
    border-color: #333;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(66,133,244,0.55);
}

/* ── Section Transposition ────────────────────────── */
#transpose-section {
    flex-shrink: 0;
    background: #f0f4fb;
    border-radius: 12px;
    padding: 12px 14px 10px;
    margin-bottom: 12px;
    border: 1px solid #dde4f0;
}
#transpose-section .transpose-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
#transpose-section .transpose-title {
    font-size: 13px;
    font-weight: 600;
    color: #4a6fa5;
    display: flex;
    align-items: center;
    gap: 6px;
}
#transpose-key-display {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #4a7fa5;
    border-radius: 6px;
    padding: 2px 9px;
    letter-spacing: 0.04em;
    min-width: 60px;
    text-align: center;
    transition: background 0.2s;
}
#transpose-key-display.transposed {
    background: #e67e22;
}
.transpose-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.transpose-label-min, .transpose-label-max {
    font-size: 10px;
    color: #aab;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}
#transpose-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
#transpose-slider::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px; background: transparent;
}
#transpose-slider::-moz-range-track {
    height: 6px; border-radius: 3px; background: transparent;
}
#transpose-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: #4a7fa5;
    box-shadow: 0 1px 5px rgba(74,127,165,0.45);
    cursor: pointer;
    border: 3px solid #fff;
    transition: background 0.15s;
}
#transpose-slider.transposed::-webkit-slider-thumb { background: #e67e22; }
#transpose-slider::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #4a7fa5;
    cursor: pointer;
    border: 3px solid #fff;
}
.transpose-steps-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: #4a6fa5;
    width: 36px;
    text-align: center;
    background: #fff;
    border: 1.5px solid #c8d5e8;
    border-radius: 6px;
    padding: 2px 0;
    letter-spacing: 0.02em;
}
.transpose-steps-badge.transposed { color: #e67e22; border-color: #e67e22; }
#transpose-reset-btn {
    display: none;
    margin-top: 8px;
    width: 100%;
    background: #fff;
    border: 1.5px solid #c8d5e8;
    border-radius: 7px;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 500;
    color: #e67e22;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
#transpose-reset-btn:hover { background: #fff8f0; border-color: #e67e22; }
#transpose-section .transpose-orig-key {
    font-size: 11px;
    color: #8899bb;
    text-align: center;
    margin-top: 7px;
}

/* ══════════════════════════════════════════════════════
   Transposition par portée
   ══════════════════════════════════════════════════════ */
#transpose-staff-section {
    margin-top: 11px;
    border-top: 1px solid #dde4f0;
    padding-top: 10px;
}
.transpose-staff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    padding: 2px 3px;
    transition: background .15s;
}
.transpose-staff-header:hover {
    background: rgba(74, 111, 165, 0.07);
}
.transpose-staff-header.collapsed {
    margin-bottom: 0;
}
.transpose-staff-title {
    font-size: 11.5px;
    font-weight: 600;
    color: #4a6fa5;
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}
.transpose-staff-title svg:first-child { opacity: .7; flex-shrink: 0; }
.transpose-staff-chevron {
    opacity: .55;
    flex-shrink: 0;
    transition: transform .25s ease;
    margin-left: 2px;
}
.transpose-staff-header.collapsed .transpose-staff-chevron {
    transform: rotate(-90deg);
}
.transpose-staff-reset-all {
    font-size: 10px;
    font-weight: 500;
    color: #9aadcc;
    background: none;
    border: 1px solid #d0daea;
    border-radius: 5px;
    padding: 2px 7px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.transpose-staff-reset-all:hover {
    background: #fff3e8;
    border-color: #e67e22;
    color: #c0662a;
}
.transpose-staff-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* Override max-height pour la liste (peut contenir beaucoup de portées) */
#transpose-staff-body.collapsible-body {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 0;
    padding-top: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease;
}
#transpose-staff-body.collapsible-body:not(.collapsed) {
    margin-top: 8px;
}
/* Spécificité suffisante pour écraser le max-height ci-dessus */
#transpose-staff-body.collapsible-body.collapsed {
    max-height: 0 !important;
    overflow: hidden;
    margin-top: 0;
}
.transpose-staff-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 7px;
    border-radius: 7px;
    background: #f7f9fd;
    border: 1px solid #e3e9f3;
    transition: background .15s, border-color .15s;
}
.transpose-staff-row.has-offset {
    background: #fff8f0;
    border-color: #f0c090;
}
.transpose-staff-name {
    font-size: 11.5px;
    color: #3a4f6a;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    flex: 1;
}
.transpose-staff-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.transpose-staff-btn {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1.5px solid #cdd6e8;
    background: #fff;
    color: #5577aa;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .13s, border-color .13s, color .13s;
}
.transpose-staff-btn:hover:not(:disabled) {
    background: #eef2f9;
    border-color: #8aaad0;
    color: #2a4a7a;
}
.transpose-staff-btn:active:not(:disabled) { transform: scale(.93); }
.transpose-staff-btn:disabled {
    opacity: .35;
    cursor: default;
}
.transpose-staff-badge {
    min-width: 28px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #8899bb;
    background: #eef2fa;
    border: 1.5px solid #dde4f0;
    border-radius: 5px;
    padding: 1px 4px;
    transition: color .15s, background .15s, border-color .15s;
}
.transpose-staff-badge.active {
    color: #c0662a;
    background: #fff0e0;
    border-color: #e8a060;
}

/* ── Instruments transposeurs compatibles ── */
#transpose-instruments-list {
    margin-top: 9px;
}
.transpose-compat-label {
    font-size: 10.5px;
    color: #8899bb;
    text-align: center;
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.transpose-compat-scroll {
    max-height: 70px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c8d5e8 transparent;
}
.transpose-compat-scroll::-webkit-scrollbar {
    width: 3px;
}
.transpose-compat-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.transpose-compat-scroll::-webkit-scrollbar-thumb {
    background: #c8d5e8;
    border-radius: 3px;
}
.transpose-compat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 4px;
    border-bottom: 1px solid #f0f3f8;
    line-height: 1.3;
}
.transpose-compat-row:last-child { border-bottom: none; }
.transpose-compat-name {
    font-size: 11px;
    font-weight: 500;
    color: #4a6fa5;
}
.transpose-compat-acc {
    font-size: 10.5px;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: 6px;
}
.transpose-compat-acc.easy { color: #27ae60; }
.transpose-compat-acc.ok   { color: #e67e22; }
.transpose-compat-acc.hard { color: #b0bcd0; }

/* ── Toggle mode : Chromatique / Intervalle ── */
.transpose-mode-toggle {
    display: flex;
    gap: 6px;
    margin: 10px 0 12px;
}
.transpose-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 0;
    background: #f5f7fa;
    border: 1.5px solid #dde3ea;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 500;
    color: #7a8899;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.transpose-mode-btn:hover {
    background: #eef2f7;
    border-color: #b8c4d0;
    color: #4a6070;
}
.transpose-mode-btn.active {
    background: #fff8f0;
    border-color: #e67e22;
    color: #c0662a;
    font-weight: 600;
}
.transpose-mode-btn svg { opacity: .65; flex-shrink: 0; }
.transpose-mode-btn.active svg { opacity: 1; }

/* ── Pane diatonique — animation d'apparition ── */
#transpose-diat-pane {
    animation: _tr_fadeIn 0.18s ease;
}
@keyframes _tr_fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ── Direction : Monter / Descendre ── */
.transpose-diat-dir-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.transpose-diat-dir-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 0;
    background: #f5f7fa;
    border: 1.5px solid #dde3ea;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #7a8899;
    cursor: pointer;
    transition: background .13s, border-color .13s, color .13s;
}
.transpose-diat-dir-btn:hover {
    background: #eef2f7;
    border-color: #b8c4d0;
    color: #4a6070;
}
.transpose-diat-dir-btn.active {
    background: #eaf3fb;
    border-color: #3d9bd4;
    color: #2176ae;
    font-weight: 600;
}

/* ── Grille des intervalles (4 colonnes) ── */
.transpose-diat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 9px;
}
.transpose-diat-interval-btn {
    padding: 7px 2px 6px;
    background: #f5f7fa;
    border: 1.5px solid #dde3ea;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    color: #566070;
    cursor: pointer;
    text-align: center;
    line-height: 1.15;
    transition: background .13s, border-color .13s, color .13s, transform .08s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.transpose-diat-interval-btn:hover {
    background: #eef2f7;
    border-color: #b8c4d0;
    color: #3a5068;
}
.transpose-diat-interval-btn.active {
    background: #fff3e6;
    border-color: #e67e22;
    color: #c0601a;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(230,126,34,.18);
}
.transpose-diat-interval-btn:active { transform: scale(.96); }

/* Décime — signalée comme cas spécial guitare */
.transpose-diat-interval-special {
    font-size: 10.5px;
    border-style: dashed;
    border-color: #c5d0db;
    color: #7a8899;
    background: #fafbfc;
}
.transpose-diat-interval-special:hover {
    border-color: #e67e22;
    border-style: solid;
    background: #fff8f2;
    color: #c0601a;
}
.transpose-diat-interval-special.active { border-style: solid; }

/* ── Info qualité + demi-tons ── */
.transpose-diat-quality-info {
    min-height: 18px;
    font-size: 11px;
    color: #8a9bb0;
    text-align: center;
    margin-bottom: 6px;
    font-style: italic;
    transition: color .2s;
}
.transpose-diat-quality-info:not(:empty) {
    color: #c0662a;
    font-style: normal;
    font-weight: 500;
}

/* Badge élargi pour "Quinte ↑" en mode diatonique */
#transpose-steps-badge {
    min-width: 38px;
    max-width: 72px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════════
   CHANGEMENT DE CLEF PAR PORTÉE — bouton dans les rows du mixer
   ════════════════════════════════════════════════════════════════════ */

/* Bouton clef dans la row du mixer */
.mixer-clef-btn {
    flex-shrink: 0;
    position: relative;
    width: 32px;
    height: 30px;
    border: 1.5px solid #c8d5e8;
    border-radius: 7px;
    background: #fff;
    color: #4a6fa5;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .13s, border-color .13s, color .13s;
    font-family: serif;
}
.mixer-clef-btn:hover {
    background: #eef4fa;
    border-color: #4a7fa5;
}
.mixer-clef-btn.is-overridden {
    background: #fff8f0;
    border-color: #e67e22;
    color: #c0601a;
}

/* Pastille orange "modifié" */
.mixer-clef-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e67e22;
    display: block;
}

/* Picker inline (inséré après la .mixer-track) */
.mixer-clef-picker {
    background: #fff;
    border: 1.5px solid #dde3ea;
    border-radius: 10px;
    padding: 10px 10px 8px;
    margin: -6px 0 4px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    animation: _tr_fadeIn 0.14s ease;
}
.mixer-clef-picker-label {
    font-size: 11px;
    font-weight: 600;
    color: #7a8899;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.mixer-clef-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 6px;
}
.mixer-clef-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 4px 6px;
    background: #f5f7fa;
    border: 1.5px solid #dde3ea;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.mixer-clef-opt:hover {
    background: #eef2f7;
    border-color: #b8c4d0;
}
.mixer-clef-opt.active {
    background: #fff3e6;
    border-color: #e67e22;
}
/* Indique la clef d'origine de la portée */
.mixer-clef-opt.is-orig::after {
    content: '●';
    font-size: 6px;
    color: #aab;
    line-height: 0;
    display: block;
    margin-top: 1px;
}
.mixer-clef-opt.active.is-orig::after { color: #e67e22; }
.mixer-clef-opt-sym {
    font-family: serif;
    font-size: 18px;
    line-height: 1;
    color: #3a5068;
}
.mixer-clef-opt.active .mixer-clef-opt-sym { color: #c0601a; }
.mixer-clef-opt-name {
    font-size: 9.5px;
    font-weight: 500;
    color: #7a8899;
    text-align: center;
    white-space: nowrap;
}
.mixer-clef-opt.active .mixer-clef-opt-name { color: #c0601a; font-weight: 600; }

/* Bouton reset clef */
.mixer-clef-reset {
    width: 100%;
    padding: 5px 0;
    background: none;
    border: 1px solid #e8cbb0;
    border-radius: 6px;
    font-size: 11px;
    color: #c0662a;
    cursor: pointer;
    transition: background .12s;
    text-align: center;
}
.mixer-clef-reset:hover { background: #fff8f2; }

/* Wrapper reset pour insertion dynamique */
.mixer-clef-reset-wrap { margin-top: 2px; }

/* Séparateur entre clef et octave */
.mixer-clef-picker-sep {
    height: 1px;
    background: #edf0f4;
    margin: 8px 0;
}

/* Badge octave sur le bouton de la row */
.mixer-clef-oct-badge {
    font-family: sans-serif;
    font-size: 8px;
    font-weight: 700;
    color: #2176ae;
    vertical-align: super;
    margin-left: 1px;
    line-height: 1;
}

/* Ligne de boutons octave */
.mixer-clef-oct-row {
    display: flex;
    gap: 5px;
    margin-bottom: 7px;
}
.mixer-clef-oct-btn {
    flex: 1;
    padding: 5px 2px;
    background: #f5f7fa;
    border: 1.5px solid #dde3ea;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 500;
    color: #566070;
    cursor: pointer;
    text-align: center;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}
.mixer-clef-oct-btn:hover {
    background: #eef2f7;
    border-color: #b8c4d0;
    color: #3a5068;
}
.mixer-clef-oct-btn.active {
    background: #eaf3fb;
    border-color: #3d9bd4;
    color: #2176ae;
    font-weight: 700;
}

/* Hint contextuel guitare */
.mixer-clef-oct-hint {
    font-size: 10.5px;
    color: #5d8a6a;
    background: #f0f8f2;
    border: 1px solid #c3dfc9;
    border-radius: 6px;
    padding: 5px 8px;
    margin-bottom: 6px;
    line-height: 1.4;
    display: none;
}
.transpose-step-btn {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid #c8d5e8;
    background: #fff;
    color: #4a6fa5;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
    -webkit-user-select: none;
    padding: 0;
}
.transpose-step-btn:hover:not(:disabled) {
    background: #e8f0fe;
    border-color: #4a7fa5;
    color: #2a5f85;
}
.transpose-step-btn:active:not(:disabled) {
    background: #d0e4f5;
}
.transpose-step-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════
 * MOBILE/TABLETTE : Rétraction du menu pendant la lecture
 * ══════════════════════════════════════════════════════════════
 * Quand la lecture est active (body.mobile-playback-active),
 * la barre supérieure glisse vers le haut et disparaît.
 * Un bouton pause flottant semi-transparent reste visible.
 * ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    /* ── Transition fluide sur la barre ── */
    #top-controls-bar {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Rétraction quand lecture active ── */
    body.mobile-playback-active #top-controls-bar {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }

    /* ── Masquer aussi les boutons fixes (hors barre) pendant la lecture ── */
    /* #hamburger et #immersive-btn restent visibles pendant la lecture */
    body.mobile-playback-active #upload-icon-btn,
    body.mobile-playback-active #back-btn-wrapper {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.35s ease !important;
    }

    /* ── Récupérer l'espace : svg_output remonte ── */
    #svg_output {
        transition: margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    body.mobile-playback-active #svg_output {
        margin-top: 5px !important;
    }

    /* ── Bouton Pause flottant (filigrane) ── */
    #mobile-pause-fab {
        position: fixed;
        top: 37px;
        left: 5px;
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 5px;
        border: 1.5px solid rgba(80, 80, 80, 0.18);
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        color: #333;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease 0.15s,
                    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
                    background 0.2s;
        -webkit-tap-highlight-color: transparent;
        transform: translateY(-10px);
    }

    body.mobile-playback-active #mobile-pause-fab {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    #mobile-pause-fab:active {
        background: rgba(0, 0, 0, 0.18);
        transform: scale(0.92);
    }

    #mobile-pause-fab svg {
        width: 14px;
        height: 14px;
    }

    /* ── Bouton Stop flottant (filigrane, tout en haut) ── */
    #mobile-stop-fab {
        position: fixed;
        top: 5px;
        left: 5px;
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 5px;
        border: 1.5px solid rgba(200, 50, 30, 0.25);
        background: rgba(255, 51, 0, 0.7);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        color: #fff;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease 0.2s,
                    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                    background 0.2s;
        -webkit-tap-highlight-color: transparent;
        transform: translateY(-10px);
    }

    body.mobile-playback-active #mobile-stop-fab {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    #mobile-stop-fab:active {
        background: rgba(200, 30, 0, 0.85);
        transform: scale(0.92);
    }

    #mobile-stop-fab svg {
        width: 12px;
        height: 12px;
    }

    /* ── Bouton Quitter mode immersif (visible uniquement lecture + immersif) ── */
    #mobile-exit-immersive-fab {
        position: fixed;
        top: 69px;
        left: 5px;
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 5px;
        border: 1.5px solid rgba(80, 80, 80, 0.18);
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        color: #333;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease 0.25s,
                    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.25s,
                    background 0.2s;
        -webkit-tap-highlight-color: transparent;
        transform: translateY(-10px);
    }

    /* Visible uniquement pendant la lecture EN mode immersif */
    body.mobile-playback-active.immersive-mode #mobile-exit-immersive-fab {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        top: 5px;
    }

    #mobile-exit-immersive-fab:active {
        background: rgba(0, 0, 0, 0.18);
        transform: scale(0.92);
    }

    #mobile-exit-immersive-fab svg {
        width: 14px;
        height: 14px;
    }

    /* ── Masquer la pagination épurée immersive pendant la lecture ── */
    body.mobile-playback-active #immersive-pagination {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }
}

/* ── Desktop : jamais visible ── */
@media (min-width: 1025px) {
    #mobile-pause-fab {
        display: none !important;
    }
    #mobile-stop-fab {
        display: none !important;
    }
    #mobile-exit-immersive-fab {
        display: none !important;
    }
}

/* ── FABs stop/pause : masqués sur tous les écrans (boutons redondants avec la bottom bar) ── */
#mobile-pause-fab,
#mobile-stop-fab {
    display: none !important;
}




/* ╔══════════════════════════════════════════════════════════════════════╗
 * ║  FIX ERGONOMIE PRACTICE PANEL — 2025-03 v3                         ║
 * ║  Structure DOM confirmée via practice-engine.js :                   ║
 * ║                                                                      ║
 * ║  .pp-intro-header                                                    ║
 * ║    .pp-intro-icon   (.fsm-mascot svg OU emoji 🎹)                   ║
 * ║    .pp-intro-title                                                   ║
 * ║    .pp-intro-tagline                                                 ║
 * ║    #pp-no-score-hint  (liens upload + browse — DANS le header)      ║
 * ║                                                                      ║
 * ║  .pp-connect-hint   (hors header)                                   ║
 * ║  .pp-main-controls  (mode tabs Wait/Flow)                           ║
 * ║  #practice-flow-speed-row                                           ║
 * ║    label.practice-label  "VITESSE :"                                ║
 * ║    .practice-speed-btns  [30%][50%][75%][100%]                      ║
 * ║    #pp-listen-seg        [Silence][MP3][Acc.MIDI]  ← margin-left:auto║
 * ╚══════════════════════════════════════════════════════════════════════╝ */


/* ══════════════════════════════════════════════════════════
 *  1. HEADER — DESKTOP & TABLETTE (≥601px)
 *     Layout flex-row : mascotte à gauche, texte à droite
 *     #pp-no-score-hint passe en dessous (flex: 0 0 100%)
 * ══════════════════════════════════════════════════════════ */

@media (min-width: 601px) {

    .pp-intro-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;        /* noscore passe à la ligne */
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 20px 0 !important;
        text-align: left !important;
    }

    /* Mascotte : fixe, ne rétrécit pas */
    .pp-intro-icon {
        flex: 0 0 auto !important;
        font-size: 32px !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }
    .pp-intro-icon .fsm-mascot svg {
        width: 52px !important;
        height: 44px !important;
    }

    /* Titre : prend l'espace restant sur la ligne 1 */
    .pp-intro-title {
        flex: 1 1 auto !important;
        font-size: 20px !important;
        margin: 0 !important;
        min-width: 0 !important;
        align-self: center !important;
    }

    /* Tagline : monte sur la même ligne que le titre (via order) */
    .pp-intro-tagline {
        flex: 0 0 100% !important;         /* pleine largeur → ligne 2 */
        font-size: 11.5px !important;
        opacity: 0.8 !important;
        margin: -8px 0 0 0 !important;
        padding-left: calc(52px + 12px) !important; /* aligne sous le titre */
        padding-bottom: 6px !important;
    }

    /* Noscore candy cards : pleine largeur dans le header flex */
    #pp-no-score-hint,
    .pp-no-score-hint {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 4px !important;
        box-sizing: border-box !important;
    }

    /* Grand écran */
    @media (min-width: 1024px) {
        .pp-intro-header { padding: 12px 24px 0 !important; gap: 16px !important; }
        .pp-intro-icon .fsm-mascot svg { width: 60px !important; height: 51px !important; }
        .pp-intro-title { font-size: 24px !important; }
        .pp-intro-tagline {
            padding-left: calc(60px + 16px) !important;
            font-size: 13px !important;
        }
    }
}


/* ══════════════════════════════════════════════════════════
 *  2. HEADER — MOBILE PORTRAIT (≤600px)
 *     Layout colonne compact : pas de flex-row
 *     Tagline masquée, mascotte 36px, padding minimal
 * ══════════════════════════════════════════════════════════ */

@media (max-width: 600px) and (orientation: portrait) {

    .pp-intro-header {
        /* On garde la colonne mais on compacte */
        display: block !important;
        padding: 8px 12px 0 !important;
        text-align: center !important;
    }

    /* Ligne icon + titre côte à côte via inline-flex */
    .pp-intro-icon {
        display: inline-flex !important;
        vertical-align: middle !important;
        font-size: 22px !important;
        margin-bottom: 0 !important;
        margin-right: 8px !important;
    }
    .pp-intro-icon .fsm-mascot svg {
        width: 34px !important;
        height: 29px !important;
    }
    .pp-intro-title {
        display: inline !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        vertical-align: middle !important;
        letter-spacing: 0.5px !important;
    }

    /* Tagline masquée → économise ~22px */
    .pp-intro-tagline {
        display: none !important;
    }

    /* Noscore candy cards — compact mobile */
    #pp-no-score-hint,
    .pp-no-score-hint {
        margin-top: 6px !important;
        padding: 10px 8px 6px !important;
    }
    .pp-nsh-card {
        padding: 10px 10px !important;
        gap: 10px !important;
        border-radius: 12px !important;
        margin-bottom: 6px !important;
    }
    .pp-nsh-card-icon {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }
    .pp-nsh-card-icon img {
        width: 24px !important;
        height: 24px !important;
    }
    .pp-nsh-card-h {
        font-size: 13px !important;
    }
    .pp-nsh-card-sub {
        font-size: 10.5px !important;
    }
    .pp-nsh-title {
        font-size: 10px !important;
        margin-bottom: 8px !important;
    }

    /* Hint MIDI : compact */
    .pp-connect-hint {
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
    .pp-connect-hint--hidden { display: none !important; }
}


/* ══════════════════════════════════════════════════════════
 *  3. ROW VITESSE + SON — MOBILE PORTRAIT (≤600px)
 *
 *  Structure réelle (confirmée practice-engine.js L.3804) :
 *    #practice-flow-speed-row.practice-flow-speed-row
 *      label.practice-label          "VITESSE :"
 *      .practice-speed-btns          [30%][50%][75%][100%]
 *      #pp-listen-seg.pp-listen-seg  [Silence][MP3][Acc.MIDI]
 *
 *  Problèmes injectés par JS :
 *    • max-height: 50px  → coupe le 2e rang si wrap
 *    • overflow: hidden  → masque ce qui dépasse
 *    • #pp-listen-seg : margin-left: auto  → colle à droite, hors écran
 *
 *  Fix : wrap + max-height élargi + margin-left neutralisé
 * ══════════════════════════════════════════════════════════ */

@media (max-width: 600px) and (orientation: portrait) {

    /* Conteneur : autoriser 2 lignes */
    #practice-flow-speed-row,
    .practice-flow-speed-row:not(.practice-flow-speed-row--hidden) {
        flex-wrap: wrap !important;
        max-height: 90px !important;      /* assez pour 2 lignes de ~36px */
        overflow: visible !important;
        row-gap: 6px !important;
        padding-bottom: 10px !important;
        align-items: center !important;
    }

    /* Label "VITESSE :" : reste sur la 1ère ligne */
    #practice-flow-speed-row > .practice-label,
    .practice-flow-speed-row > .practice-label {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    /* Boutons vitesse : restent sur la 1ère ligne, flex fill */
    .practice-speed-btns {
        flex: 1 1 auto !important;
        display: flex !important;
        gap: 4px !important;
    }
    .practice-speed-btn {
        padding: 4px 9px !important;
        font-size: 11px !important;
    }

    /* Boutons son : passent sur la 2ème ligne complète */
    #pp-listen-seg,
    .pp-listen-seg {
        flex: 0 0 100% !important;        /* pleine largeur → 2ème ligne */
        margin-left: 0 !important;        /* annule margin-left:auto du JS */
        display: flex !important;
        gap: 5px !important;
        justify-content: flex-start !important;
    }
    .pp-listen-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   NOTE NAMES PANEL — panneau noms des notes en cours de lecture
   ═══════════════════════════════════════════════════════════════════ */

#note-names-panel {
    position: fixed;
    right: 10px;
    top: 80px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    pointer-events: none;
    transition: opacity 0.2s ease;
    max-height: 80vh;
    overflow: hidden;
}

#note-names-panel.note-names-panel--hidden {
    display: none !important;
}

.note-name-chip {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--vs-note-color, #4285f4);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    line-height: 1;
    letter-spacing: -0.3px;
    text-align: center;
    padding: 2px;
    animation: noteChipIn 0.12s ease-out;
    flex-shrink: 0;
}

.note-name-chip--sharp {
    font-size: 10px;
}

.note-name-chip--solfege {
    font-size: 10.5px;
}

@keyframes noteChipIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}



/* Masquer le panneau quand mobile en mode playback (optionnel, peut interférer) */
@media (max-width: 480px) {
    #note-names-panel {
        right: 4px;
    }
    .note-name-chip {
        width: 32px;
        height: 32px;
        font-size: 11px;
        border-radius: 6px;
    }
    .note-name-chip--sharp {
        font-size: 9px;
    }
    .note-name-chip--solfege {
        font-size: 9px;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   NOUVELLE ARCHITECTURE BARRE INFÉRIEURE — free-scores.com player
   ═══════════════════════════════════════════════════════════════════ */

/* ── Top Controls Bar (thin title strip) ── */
#top-controls-bar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    z-index: 1000;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    height: auto;
    min-height: unset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ── Top Title Row ── */
#top-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    gap: 8px;
    min-height: 42px;
}

#top-title-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#top-title-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: 6px;
    min-width: 0;
}

#top-title-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

/* ── Upload button (top left) ── */
#upload-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #555;
    padding: 0;
    transition: background 0.15s, color 0.15s;
    min-height: unset;
    min-width: unset;
}
#upload-icon-btn:hover {
    background: rgba(0,0,0,0.07);
    color: #222;
}
#upload-icon-btn:active {
    background: rgba(0,0,0,0.12);
}

/* ── Top Gear Icon ── */
.top-gear-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #555;
    padding: 0;
    transition: background 0.15s, color 0.15s, transform 0.2s;
    min-height: unset;
    min-width: unset;
}
.top-gear-icon:hover {
    background: rgba(0,0,0,0.07);
    color: #222;
    transform: rotate(30deg);
}
.top-gear-icon.active {
    background: rgba(0,0,0,0.1);
    color: #e91e63;
    transform: rotate(60deg);
}

/* ── Top Close Icon (partition interne : retour à la landing /opus) ──
   Rendu côté serveur dans opus.php uniquement quand une partition interne
   est chargée (?p=… ou ?c=…). Pour les partitions privées, la croix est
   injectée dynamiquement par score-manager_V2.js — un handler JS sur
   l'événement 'scoreLoaded' masque cette croix server-rendered si une
   partition privée est ouverte en cours de session (évite le doublon). */

/* Quand mon bouton de fermeture est présent, empiler verticalement
   gear + X dans #top-title-right (l'emporte sur display:flex / display:block
   du parent grâce à !important + :has()). */
#top-title-right:has(#top-close-btn) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px;
}

.top-close-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    cursor: pointer;
    color: #555;
    padding: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
    min-height: unset;
    min-width: unset;
}
.top-close-icon:hover {
    background: #fff5f5;
    border-color: #e57373;
    color: #c62828;
}
.top-close-icon:active {
    transform: scale(0.94);
}

/* ── Top Gear Dropdown Menu ── */
.top-gear-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 10200;
    min-width: 180px;
    padding: 6px 0;
    animation: gearMenuFadeIn 0.15s ease;
}

@keyframes gearMenuFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gear-menu-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px !important;
    background: none !important;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    text-align: left;
    transition: background 0.12s;
    min-height: unset !important;
    min-width: unset !important;
}
.gear-menu-item:hover {
    background: #f5f5f5 !important;
}
.gear-menu-item svg { flex-shrink: 0; opacity: 0.7; }
.gear-menu-item .lang-flag-icon { border-radius: 2px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.15); }
.gear-menu-item .lang-code-label { font-size: 11px; font-weight: 600; color: #555; }

/* ── Bottom Controls Bar ── */
#bottom-controls-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #f8f8f8;
    border-top: none;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.11);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    gap: 6px;
    height: auto;
    min-height: 58px;
}

/* ── Bottom Bar Sections ── */
#bbar-left,
#bbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#bbar-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* ── Bottom Bar generic button style ── */
.bbar-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    width: 40px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #444;
    padding: 4px 2px;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    min-height: unset !important;
    min-width: unset !important;
    font-size: 10px;
}
.bbar-btn:hover {
    background: rgba(0,0,0,0.06);
    color: #111;
}
.bbar-btn:active {
    background: rgba(0,0,0,0.12);
    transform: scale(0.94);
}
.bbar-btn.active {
    color: #4a90e2;
    background: rgba(74,144,226,0.10);
}
.bbar-btn-label {
    font-size: 9px;
    font-weight: 600;
    color: inherit;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
}

/* ── Sous-titres des boutons du bas (desktop uniquement) ── */
.bbar-btn-subtitle {
    display: block;
    font-size: 8.5px;
    font-weight: 400;
    color: #999;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: inherit;
    pointer-events: none;
    margin-top: 1px;
}

/* Hauteur légèrement augmentée pour loger le sous-titre */
.bbar-btn:has(.bbar-btn-subtitle) {
    height: 50px;
    width: 44px;
}
.bbar-btn:has(.bbar-btn-subtitle):hover .bbar-btn-subtitle {
    color: #555;
}

/* Groupe zoom : wrapper flex-column pour aligner le sous-titre centré */
#zoom-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
#zoom-group .zoom-controls-row {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
#zoom-group .bbar-zoom-subtitle {
    display: block;
    font-size: 8.5px;
    font-weight: 400;
    color: #999;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: inherit;
    pointer-events: none;
}

/* Override top-controls-bar button styles in bottom bar */
#bottom-controls-bar button {
    min-height: unset;
    min-width: unset;
    padding: 4px 2px;
    font-weight: normal;
}

/* ── Score Format Selector in bottom bar ── */
#bbar-left #score-format-selector {
    position: relative;
}
#bbar-left #score-format-btn {
    display: inline-flex !important;
    align-items: center;
    flex-direction: column;
    gap: 2px;
    width: 40px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #444;
    padding: 4px 2px;
    transition: background 0.15s;
    min-height: unset !important;
    min-width: unset !important;
}
#bbar-left #score-format-btn:hover { background: rgba(0,0,0,0.06); color: #111; }
#bbar-left #score-format-label {
    font-size: 9px;
    font-weight: 600;
    color: inherit;
    letter-spacing: 0.3px;
}
#bbar-left #score-format-dropdown {
    bottom: 100% !important;
    top: auto !important;
    left: 0 !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
}

/* ── Auto-scroll toggle ── */
.bbar-autoscroll {
    display: flex;
    align-items: center;
    font-size: 0.78em;
    color: #666;
    white-space: nowrap;
    gap: 3px;
    margin-left: 2px;
}
.bbar-autoscroll input[type="checkbox"] {
    accent-color: #e91e63;
    width: 13px;
    height: 13px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Stop button in bottom bar ── */
#bbar-center #stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff3300;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    flex-shrink: 0;
    min-height: unset;
    min-width: unset;
    transition: background 0.15s, transform 0.1s;
}
#bbar-center #stop:hover { background-color: #cc2900; }
#bbar-center #stop:active { transform: scale(0.92); }
#bbar-center .stop-icon {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 1px;
}

/* ── Mode Switcher (main round play button) in bottom bar ── */
#bbar-center #mode-switcher {
    display: inline-flex;
    align-items: stretch;
    border-radius: 28px;
    overflow: hidden;
    border: 2px solid #e91e63;
    box-shadow: 0 3px 12px rgba(233,30,99,0.20);
    height: auto !important;      /* Annule le height:35px hérité du sélecteur général */
    min-height: 46px;
}

#bbar-center #mode-switcher .mode-seg {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px !important;        /* Annule padding:4px 2px de #bottom-controls-bar button */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 46px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    min-height: unset !important;
    min-width: unset !important;
    letter-spacing: 0.3px;
    line-height: 1 !important;         /* Empêche la hauteur de ligne de décentrer */
    box-sizing: border-box !important;
}

#bbar-center .mode-seg.seg-active {
    background: #e91e63;
    color: #fff;
}
#bbar-center #seg-midi.seg-active {
    background: #1565C0;
    border-color: #1565C0;
}
#bbar-center #mode-switcher:has(#seg-midi.seg-active) {
    border-color: #1565C0;
    box-shadow: 0 3px 12px rgba(21,101,192,0.20);
}
#bbar-center .mode-seg.seg-inactive {
    background: #fff;
    color: #888;
}
#bbar-center .mode-seg.seg-inactive:hover {
    background: #fce4ec;
    color: #e91e63;
}
#bbar-center .mode-seg-divider {
    width: 1.5px;
    background: #e91e63;
    flex-shrink: 0;
    align-self: stretch;
}
#bbar-center #mode-switcher:has(#seg-midi.seg-active) .mode-seg-divider {
    background: #1565C0;
}

/* ══════════════════════════════════════════════════════════════
   Pas de MP3 disponible : seg-mp3 + séparateur masqués,
   #seg-midi prend toute la place de l'ovale (pilule + desktop)
   ══════════════════════════════════════════════════════════════ */
   #bbar-center #mode-switcher:has(#seg-mp3:is(.no-audio, .seg-unavailable, [disabled])) #seg-mp3,
   #bbar-center #mode-switcher:has(#seg-mp3:is(.no-audio, .seg-unavailable, [disabled])) .mode-seg-divider {
       display: none !important;
   }

#bbar-center .seg-icon.icon-play {
    border-width: 6px 0 6px 11px;
}
#bbar-center .seg-icon.icon-pause {
    width: 9px;
    height: 12px;
}

/* ── MP3 Type Selector in bottom bar (playalong) ── */
#bbar-center #mp3-type-selector {
    flex-shrink: 0;
    max-width: 140px;
    align-self: center;   /* ← force le centrage vertical indépendamment du mode-switcher ovale */
    display: flex;        /* ← garantit que le contenu injecté par le player est flex */
    align-items: center;
}

/* ── Practice exit hint ── */
#bbar-center #practice-exit-hint {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10px;
    color: #ff3300;
    pointer-events: none;
}
#bbar-center {
    position: relative;
}

/* ── Wrapper du mode-switcher : CSS Grid pour superposition parfaite ── */
#mode-switcher-wrap {
    display: inline-grid;  /* Grid : les deux enfants partagent la même cellule */
    align-items: stretch;
}
/* Les deux enfants (mode-switcher + overlay) occupent exactement la même cellule */
#mode-switcher-wrap > #mode-switcher,
#mode-switcher-wrap > #practice-play-overlay {
    grid-area: 1 / 1;
}

/* ── Overlay "Pratique active" : même empreinte que la pilule MP3/MIDI ── */
#practice-play-overlay {
    display: none;
    z-index: 20;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 6px 0 12px;
    background: rgba(18, 18, 36, 0.93);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 28px;
    border: 2px solid rgba(255, 80, 80, 0.50);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: system-ui, sans-serif;
    white-space: normal;
    cursor: default;
    user-select: none;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.40);
    animation: ppo-in 0.22s ease;
    overflow: hidden;
}

/* ── OVERLAY : dimensions forcées pour correspondre exactement à la pilule ── */
#mode-switcher-wrap {
    align-items: stretch;
}
#mode-switcher-wrap > #mode-switcher,
#mode-switcher-wrap > #practice-play-overlay {
    grid-area: 1 / 1;
    min-width: 0; /* empêche l'overflow de contenu de gonfler la cellule */
}
/* ── Overlay : colle pixel-perfect sur la pilule ── */
#mode-switcher-wrap > #practice-play-overlay {
    align-self: stretch;      /* hauteur = celle de la pilule (grid cell) */
    justify-self: stretch;    /* largeur = celle de la pilule */
    min-width: 0;             /* empêche le contenu de gonfler la cellule grid */
    box-sizing: border-box;   /* border 2px comptée dans les dimensions */
}

.ppo__label {
    white-space: nowrap;      /* ici c'est nécessaire pour text-overflow:ellipsis */
    /* overflow:hidden + text-overflow:ellipsis + min-width:0 déjà présents */
    max-width: 120px;         /* cap : "Mode Déchiffrage" = ~13ch, 120px suffit */
}

/* Bouton stop : proportion cohérente avec la hauteur 52px des mode-seg */
#bbar-buttons-row .ppo__stop {
    width: 34px;
    height: 34px;
}

#practice-play-overlay {
    align-self: stretch !important;   /* forcer le stretch en hauteur */
    justify-self: stretch !important; /* forcer le stretch en largeur */
    min-height: 46px;                 /* hauteur mini = même que mode-switcher */
}



/* Dans le layout bbar-buttons-row : hauteur 52px comme les mode-seg */
#bbar-buttons-row #practice-play-overlay {
    min-height: 52px !important;
}

body.practice-running #practice-play-overlay {
    display: flex;
}

/* ── Overlay pratique : couleur selon le mode ── */

/* Mode Déchiffrage (wait) — bleu #006699 */
body.practice-running--wait #practice-play-overlay {
    border-color: rgba(0, 102, 153, 0.65);
}
body.practice-running--wait .ppo__dot {
    background: #006699;
    box-shadow: 0 0 6px rgba(0, 102, 153, 0.75);
}

/* Mode Fluide (flow) — turquoise #00897b */
body.practice-running--flow #practice-play-overlay {
    border-color: rgba(0, 137, 123, 0.65);
}
body.practice-running--flow .ppo__dot {
    background: #00897b;
    box-shadow: 0 0 6px rgba(0, 137, 123, 0.75);
}
@keyframes ppo-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}
.ppo__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ff4444;
    flex-shrink: 0;
    animation: practice-badge-pulse 1.2s ease-in-out infinite;
}
.ppo__label {
    min-width: 0;
    max-width: 160px;       /* cap si texte très long */
    overflow: hidden;
    text-overflow: ellipsis;
}
.ppo__stop {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 30px; height: 30px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
@media (hover: hover) {
    .ppo__stop:hover { background: rgba(255, 70, 70, 0.55); }
}

/* ── Adjustments for the score area ── */
#svg_output {
    padding-bottom: calc(var(--bottom-bar-height, 65px) + 10px) !important;
}
body {
    padding-bottom: var(--bottom-bar-height, 65px);
}

/* ── Immersive mode: hide bottom bar, show FABs ── */
body.immersive-mode #bottom-controls-bar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: opacity 0.3s, transform 0.3s;
}
body.immersive-mode #top-controls-bar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity 0.3s, transform 0.3s;
}

/* ── Transitions ── */
#bottom-controls-bar {
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
}

/* ── Mobile responsive ── */
@media (max-width: 600px) {
    #bottom-controls-bar {
        padding: 4px 6px;
        gap: 3px;
    }
    .bbar-btn {
        width: 34px;
        height: 40px;
    }
    /* Masquer les sous-titres sur mobile */
    .bbar-btn-subtitle,
    .bbar-zoom-subtitle {
        display: none !important;
    }
    /* Reset hauteur boutons sur mobile */
    .bbar-btn:has(.bbar-btn-subtitle) {
        height: 40px;
        width: 34px;
    }
    #bbar-center .mode-seg {
        padding: 0 10px;
        height: 40px;
        font-size: 12px;
    }
    .bbar-autoscroll span {
        display: none; /* hide label text on very small screens */
    }
}

@media (max-width: 400px) {
    #bbar-left .bbar-autoscroll { display: none; }
}

/* ── Set CSS variable for bottom bar height ── */
:root {
    --bottom-bar-height: 65px;
    --top-bar-height: 58px;
}


/* ═══════════════════════════════════════════════════════════════
   CORRECTIFS v2 — bottom bar restructured
   ═══════════════════════════════════════════════════════════════ */

/* ── Top bar: ultra-thin, white, no old grey ── */
#top-controls-bar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
#top-controls-bar > div:first-child { /* hidden-play-btns etc */ }

/* Remove any leftover grey from old #controls inside top bar */
#top-controls-bar #controls { display: none !important; }

/* ── Bottom bar: flex-column layout (progress strip on top, buttons row below) ── */
#bottom-controls-bar {
    flex-direction: column !important;
    padding: 0 !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* ── Progress strip ── */
#bbar-progress-strip {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f8f8;
    padding: 0;
    border: none;
}
#bbar-buttons-row {
    border-top: none !important;
}
#bbar-progress-strip #audio-container {
    height: 2px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#bbar-progress-strip #time-control {
    display: flex !important;
    align-items: center;
    padding: 3px 10px 2px !important;
    gap: 8px;
    height: 26px !important;
    margin: 0 !important;
    order: unset !important;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}
#bbar-progress-strip /* modified */#timeSlider {
    flex: 1;
    height: 3px !important;
    margin: 0 !important;
}
#bbar-progress-strip #time-display {
    font-size: 11px;
    color: #555;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Buttons row ── */
#bbar-buttons-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Bottom bar scrollable horizontalement sur tous écrans ── */
/* scroll universel → voir correctif en fin de fichier (section PATCH) */

/* ── Reset bbar-left/center/right since they're now inside bbar-buttons-row ── */
#bbar-buttons-row #bbar-left,
#bbar-buttons-row #bbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: unset;
}
#bbar-buttons-row #bbar-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    position: relative;
}

/* ── Bottom bar height update ── */
:root {
    --bottom-bar-height: 78px; /* progress strip ~28px + buttons ~50px */
}

/* ── FIX: Page navigation must clear the bottom bar ── */
#page-navigation {
    bottom: calc(var(--bottom-bar-height, 78px) + 10px) !important;
    z-index: 1100 !important;
}

/* ── FIX: Piano désancré — remonter la pagination au-dessus du piano ──
   Spécificité (1,2,1) > (1,0,0) → écrase la règle précédente quand pk-open est actif.
   --pk-panel-h est posé sur :root par piano-keyboard.js.                          */
body.pk-open:not(.pk-anchor-active) #page-navigation {
    bottom: calc(var(--pk-panel-h, 130px) + 10px) !important;
}

/* ── Bottom bar et top bar au-dessus du contenu normal ──
   Note : le score-format-dropdown est porté dans <body> par JS (portal pattern)
   pour échapper au stacking context de la bottom bar → z-index CSS suffit. */
#bottom-controls-bar {
    z-index: 1050 !important;
}
#top-controls-bar {
    z-index: 1050 !important;
}

/* ── FIX: Format dropdown opens UPWARD from bottom bar ── */
#bbar-buttons-row #score-format-dropdown {
    position: absolute !important;
    bottom: calc(100% + 4px) !important;
    top: auto !important;
    left: 0 !important;
    z-index: 10200 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
#bbar-buttons-row #score-format-selector {
    position: relative;
}

/* ── FIX: Volume control in bbar-right (extrême droite) ── */
.bbar-vol-ctrl,
#volume-ctrl-main.bbar-vol-ctrl {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    margin-left: auto;             /* Pousse le volume à l'extrême droite de bbar-right */
}
#volume-ctrl-main.bbar-vol-ctrl .mute-toggle-btn {
    /* Identique aux .bbar-btn pour un rendu homogène */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column;
    width: 40px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #444;
    padding: 4px 2px !important;
    min-height: unset !important;
    min-width: unset !important;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    font-size: 10px;
}
#volume-ctrl-main.bbar-vol-ctrl .mute-toggle-btn:hover {
    background: rgba(0,0,0,0.06);
    color: #111;
}
#volume-ctrl-main.bbar-vol-ctrl .volume-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    top: auto !important;
    left: auto !important;
    z-index: 10300;
}

/* ── FIX: Don't let top-bar position:relative interfere ── */
#top-controls-bar {
    position: fixed !important;
}

/* ── Score/SVG area: correct padding for new bar heights ── */
#svg_output {
    margin-top: var(--top-bar-height, 44px) !important;
    padding-bottom: calc(var(--bottom-bar-height, 78px) + 10px) !important;
}

/* ── Immersive mode: adjust ── */
body.immersive-mode #bottom-controls-bar,
body.immersive-mode #top-controls-bar {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.immersive-mode #top-controls-bar {
    transform: translateY(-100%) !important;
}


/* ═══════════════════════════════════════════════════════════════
   CORRECTIFS v3
   ═══════════════════════════════════════════════════════════════ */

/* ── FIX 1: Play MP3 button → original green ── */
#bbar-center .mode-seg.seg-active {
    background: #ff9900 !important;
    color: #fff !important;
}
#bbar-center #seg-midi.seg-active {
    background: #1976d2 !important;
}
#bbar-center #mode-switcher {
    border-color: #ff9900 !important;
    box-shadow: 0 3px 12px rgba(76,175,80,0.22) !important;
}
#bbar-center #mode-switcher:has(#seg-midi.seg-active) {
    border-color: #1976d2 !important;
    box-shadow: 0 3px 12px rgba(25,118,210,0.22) !important;
}
#bbar-center #mode-switcher:has(#seg-midi.seg-active) .mode-seg-divider {
    background: #1976d2 !important;
}
#bbar-center .mode-seg-divider {
    background: #ff9900 !important;
}
#bbar-center .mode-seg.seg-inactive:hover {
    background: #e8f5e9 !important;
    color: #388e3c !important;
}

/* ── FIX 2: Score format dropdown → centered modal ── */
#score-format-dropdown {
    /* Override absolute positioning — render as centered fixed modal */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 10300 !important;
    min-width: 220px !important;
    max-width: 90vw !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10) !important;
    background: #fff !important;
}
/* also make sure the bbar override doesn't fight */
#bbar-buttons-row #score-format-dropdown {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
}

/* ── FIX 3: Upload moved into gear menu ── */
#top-title-left { display: none !important; }

/* Gear menu separator */
.gear-menu-separator {
    height: 1px;
    background: #efefef;
    margin: 4px 10px;
}

/* ── FIX 4: Remove white top bar entirely ── */
/* The top-controls-bar itself remains (JS uses it) but is made invisible */
#top-controls-bar {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: transparent !important;
}
/* But allow the gear dropdown to still show */
#top-title-row {
    display: none !important;
}
/* Move gear to a floating button top-right */
#top-title-right {
    display: block !important;
    position: fixed !important;
    top: 6px !important;
    right: 8px !important;
    z-index: 2000 !important;
}
/* Score area: no top margin needed */
#svg_output {
    margin-top: 0 !important;
}
/* Adjust CSS variable */
:root {
    --top-bar-height: 0px !important;
}

/* ── FIX 5: Zoom +/- direct buttons shown ── */
#zoom-out,
#zoom-in,
#zoom-value {
    display: inline-flex !important;
}
#zoom-value {
    display: inline-block !important;
    font-size: 10px;
    color: #666;
    min-width: 30px;
    text-align: center;
    white-space: nowrap;
    line-height: 44px;
    align-self: center;
}
/* Zoom out/in styling as bbar buttons */
#zoom-out,
#zoom-in {
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 40px !important;
}


/* ═══════════════════════════════════════════════════════════════
   CORRECTIFS v4 — Piano + Upload + Double bouton
   ═══════════════════════════════════════════════════════════════ */

/* ── FIX UPLOAD: Override position:fixed when inside gear menu ── */
#top-gear-menu #upload-icon-btn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    background: none !important;
    border: none !important;
    color: #333 !important;
    min-width: unset !important;
    min-height: unset !important;
    padding: 9px 14px !important;
    border-radius: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    transition: background 0.12s !important;
    transform: none !important;
    justify-content: flex-start !important;
    touch-action: manipulation;
}
#top-gear-menu #upload-icon-btn:hover {
    background: #f5f5f5 !important;
}
#top-gear-menu #upload-icon-btn svg {
    stroke: #555 !important;
    flex-shrink: 0;
    opacity: 0.75;
}

/* ── FIX PIANO: Hide the auto-injected pk-toggle-btn (duplicate) ── */
#pk-toggle-btn {
    display: none !important;
}

/* ── FIX PIANO POSITION: pk-panel above bottom bar ── */
#pk-panel {
    bottom: var(--bottom-bar-height, 78px) !important;
    z-index: 1200 !important;
    /* Transition sur bottom pour que le piano glisse en douceur
       quand la barre du bas apparaît / disparaît (mode immersif) */
    transition: bottom 0.3s cubic-bezier(.4,0,.2,1) !important;
}

/* ── Mode immersif : la barre du bas disparaît → piano descend à bottom:0 ── */
body.immersive-mode #pk-panel {
    bottom: 0 !important;
}

/* ══════════════════════════════════════════════════
   LAYOUT FIXES: zoom left, volume right, play centré
   ══════════════════════════════════════════════════ */

/* bbar-buttons-row : flex avec left/right en flex:1
   → les groupes flanquent le centre sans s'étirer aux extrêmes */
#bbar-buttons-row {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    gap: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* bbar-left : flex:1, contenu poussé à droite (vers le centre) */
#bbar-buttons-row #bbar-left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    flex: 1 1 0;
    min-width: 0;
    padding-right: 36px;
    z-index: 1;
}

/* bbar-center : taille fixe au contenu, absolument centré */
#bbar-buttons-row #bbar-center {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    z-index: 2;
}

/* bbar-right : flex:1, contenu poussé à gauche (vers le centre) */
#bbar-buttons-row #bbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    flex: 1 1 0;
    min-width: 0;
    padding-left: 36px;
    z-index: 1;
}

/* Zoom dans bbar-left : même style que bbar-btn */
#bbar-left #zoom-out,
#bbar-left #zoom-in {
    width: 34px;
    height: 40px;
}
#bbar-left #zoom-value {
    min-width: 30px;
    font-size: 10px;
    color: #666;
    text-align: center;
}

/* Play MP3/MIDI button : plus grand + contenu centré verticalement */
#bbar-center #mode-switcher .mode-seg {
    height: 52px !important;
    min-height: 52px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}
#bbar-center #mode-switcher {
    align-items: stretch !important;
    overflow: hidden !important;
}
/* Triangle play : forcer affichage block centré (évite décalage baseline) */
#bbar-center .seg-icon.icon-play {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-width: 6px 0 6px 11px !important;
    border-style: solid !important;
    border-color: transparent transparent transparent currentColor !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    top: 0 !important;
}
#bbar-center .seg-icon.icon-pause {
    display: block !important;
    align-self: center !important;
    width: 9px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
}
#bbar-center .seg-label {
    display: block !important;
    line-height: 1 !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Scroll auto : toujours masqué (option reste active en arrière-plan) */
#autoScrollControl,
.bbar-autoscroll {
    display: none !important;
    visibility: hidden !important;
}

/* ══════════════════════════════════════════════════
   FIX SYNTHESIA : décaler au-dessus du piano virtuel
   ══════════════════════════════════════════════════ */

/* Le pk-panel est positionné à bottom: var(--bottom-bar-height, 78px).
   L'overlay synthesia doit être au-dessus du piano + de la barre.
   La valeur --pk-synthesia-bottom est mise à jour par JS (voir PHP).
   En mode immersif, la barre est masquée → JS recalcule avec bbarH=0. */
#pk-didactic-overlay {
    bottom: var(--pk-synthesia-bottom, 208px) !important;
    /* Même transition que pk-panel pour un glissement synchronisé */
    transition: bottom 0.3s cubic-bezier(.4,0,.2,1) !important;
}
/* ══════════════════════════════════════════════════
   PORTRAIT MOBILE : ajustement gaps/paddings bottom bar
   (scroll horizontal activé universellement dans la section PATCH)
   ══════════════════════════════════════════════════ */
@media (max-width: 600px) and (orientation: portrait) {
    #bbar-buttons-row {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        padding: 5px 6px !important;
        touch-action: pan-x !important;
    }
    /* scrollbar masquée via @media(hover:none) dans la section PATCH */
    /* iOS : laisser passer le geste horizontal vers le parent scrollable */
    #bbar-buttons-row .bbar-btn,
    #bbar-buttons-row button {
        touch-action: pan-x !important;
    }
    #bbar-buttons-row #bbar-left {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        padding-right: 4px !important;
        min-width: unset !important;
    }
    #bbar-buttons-row #bbar-center {
        flex: 0 0 auto !important;
        padding: 0 4px !important;
    }
    #bbar-buttons-row #bbar-right {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        padding-left: 4px !important;
        min-width: unset !important;
    }
}
/* ══════════════════════════════════════════════════════════════
   TABLETTE : ajustement gaps/paddings bottom bar
   (601px – 1366px — couvre portrait ET paysage jusqu'à iPad Pro 12.9".
    Scroll horizontal activé universellement dans la section PATCH.)
   ══════════════════════════════════════════════════════════════ */
   @media (min-width: 601px) and (max-width: 1366px) {
    #bbar-buttons-row {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 5px 8px !important;
        /* iOS Safari : indique que ce conteneur défile horizontalement.
           Sans ça, touch-action:manipulation sur les boutons enfants
           bloque la propagation du geste de pan vers ce parent. */
        touch-action: pan-x !important;
    }
    /* scrollbar masquée via @media(hover:none) dans la section PATCH */
    /* Override touch-action sur tous les boutons enfants :
       iOS doit laisser passer le geste horizontal vers le parent scrollable */
    #bbar-buttons-row .bbar-btn,
    #bbar-buttons-row button {
        touch-action: pan-x !important;
    }
    #bbar-buttons-row #bbar-left {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        padding-right: 6px !important;
        min-width: unset !important;
    }
    #bbar-buttons-row #bbar-center {
        flex: 0 0 auto !important;
        padding: 0 6px !important;
    }
    #bbar-buttons-row #bbar-right {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        padding-left: 6px !important;
        min-width: unset !important;
    }
}

/* ══════════════════════════════════════════════════════════════
 * FIX MOBILE — Icônes info + immersif affichés ensemble par défaut
 * Le #hamburger (info ℹ) doit toujours être visible sur mobile
 * aux côtés de #immersive-btn, sans icône immersif solo au départ.
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    #hamburger {
        display: flex !important;
    }
}

/* ══════════════════════════════════════════════════════════════
 * DESKTOP — Agrandissement icônes + textes du menu bas
 * (n'affecte pas le toggle MP3/MIDI ni le mobile)
 * ══════════════════════════════════════════════════════════════ */
@media (min-width: 601px) {

    /* Boutons génériques bbar */
    .bbar-btn {
        width: 52px;
        height: 56px;
        gap: 3px;
    }
    .bbar-btn:has(.bbar-btn-subtitle) {
        width: 58px;
        height: 66px;
    }

    /* Labels sous les icônes */
    .bbar-btn-subtitle,
    .bbar-zoom-subtitle {
        font-size: 10.5px;
    }
    .bbar-btn-label {
        font-size: 11px;
    }

    /* Icônes SVG et images dans les boutons */
    .bbar-btn svg,
    .bbar-btn img {
        width: 26px !important;
        height: 26px !important;
    }

    /* Zoom value */
    #bbar-left #zoom-value {
        font-size: 12px;
        min-width: 36px;
    }

    /* Zoom in/out */
    #bbar-left #zoom-out,
    #bbar-left #zoom-in {
        width: 40px !important;
        height: 50px !important;
    }

    /* Score format button */
    #bbar-left #score-format-btn {
        width: 52px;
        height: 56px;
    }

    /* Hauteur de la barre */
    #bottom-controls-bar {
        min-height: 72px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH — Effet bombé + bouton ovale central
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Scroll horizontal sur TOUTES les tailles d'écran ── */
#bbar-buttons-row {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
    justify-content: flex-start !important;
    position: relative;
}

/* Touch : masquer la scrollbar (geste swipe suffit) */
@media (hover: none) {
    #bbar-buttons-row {
        scrollbar-width: none !important;
    }
    #bbar-buttons-row::-webkit-scrollbar { display: none; }
}

/* Souris : scrollbar fine visible au hover */
@media (hover: hover) {
    #bbar-buttons-row {
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.25) transparent;
    }
    #bbar-buttons-row::-webkit-scrollbar {
        height: 4px;
    }
    #bbar-buttons-row::-webkit-scrollbar-track {
        background: transparent;
    }
    #bbar-buttons-row::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 2px;
    }
    #bbar-buttons-row::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,0.35);
    }
}

/* ── 2 & 3. Dome neutralisé ── */
#bbar-buttons-row::before,
#bbar-buttons-row::after {
    content: none;
}

/* ── 4. bbar-center ── */
#bbar-buttons-row #bbar-center {
    position: relative;
    z-index: 10;
    transform: none !important;
    gap: 8px;
}

/* ── 5. Stop button ── */
#bbar-center #stop {
    position: relative;
    z-index: 15;
}

/* ══════════════════════════════════════════════════════════════
   11. DESKTOP — Stop button repositionné dans l'ovale
   • Sous "MP3" (moitié gauche) quand MP3 est actif
   • Sous "MIDI" (moitié droite) quand MIDI est actif
   • Retiré du flux flex → ne décale plus le menu
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

     /* Aligner le sélecteur playalong sur la ligne de base de la barre, 
       pas sur le wrap du mode-switcher qui est décalé vers le haut */
       #bbar-center #mp3-type-selector {
        align-self: center;
        position: relative;
        top: 0;           /* neutralise tout décalage hérité */
    }

        /* === L'overlay doit suivre exactement le décalage de la pilule === */
        #bbar-center #practice-play-overlay {
            position: relative;
            top: -22px;
            margin-bottom: -36px;
            width: 130px !important;
            height: 58px !important;
            border-radius: 55px / 48px !important;
            /* Texte tronqué : contraindre la largeur dispo pour le label */
            overflow: hidden;
        }
    
        /* Label tronqué dans 130px - dot(7) - gap(8) - stop(30) - paddings(18) */
        #bbar-center #practice-play-overlay .ppo__label {
            max-width: 55px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /* Ovale : position:relative requis pour que le stop
       soit référencé par rapport au mode-switcher via bbar-center */
    #bbar-center #mode-switcher {
        position: relative;
    }

    /* Stop hors flux flex, centré horizontalement sous l'ovale */
    #bbar-center #stop {
        position: absolute !important;
        /* Centre horizontal : ovale 130px → left = (130 - 26) / 2 = 52px */
        left: 52px;
        /* Descend dans la partie basse de l'ovale */
        top: 20px;
        width: 26px  !important;
        height: 26px !important;
        border-radius: 5px !important;
        z-index: 20;
    }
}

/* ══════════════════════════════════════════════════════════════
   6–9. Bouton ovale + segments : DESKTOP UNIQUEMENT
   Sur mobile/tablette → pilule d'origine conservée intacte
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    /* ── 6. mode-switcher ovale remonté ── */
    #bbar-center #mode-switcher {
        position: relative;
        top: -22px;
        margin-bottom: -36px;
        width: 130px !important;
        height: 58px  !important;
        min-height: unset !important;
        border-radius: 55px / 48px !important;
        overflow: hidden;
        box-shadow:
            0 4px 14px rgba(255, 153, 0, 0.28),
            0 2px 4px  rgba(0, 0, 0, 0.08),
            0 0 0 0px  #f8f8f8 !important;
    }

    #bbar-center #mode-switcher:has(#seg-midi.seg-active) {
        box-shadow:
            0 4px 14px rgba(25, 118, 210, 0.28),
            0 2px 4px  rgba(0, 0, 0, 0.08),
            0 0 0 0px  #f8f8f8 !important;
    }

    /* ── 7. Segments équilibrés ── */
    #bbar-center #mode-switcher .mode-seg {
        flex: 1 1 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        padding: 0 !important;
        gap: 5px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        min-width: 0 !important;
    }

    /* ── 8. Segment inactif ── */
    #bbar-center .mode-seg.seg-inactive {
        background: #fff !important;
        color: #888 !important;
    }
    #bbar-center .mode-seg.seg-inactive:hover {
        background: #f0f0f0 !important;
        color: #555 !important;
    }

    /* ── 9. Icône play ── */
    #bbar-center .seg-icon.icon-play {
        border-width: 7px 0 7px 12px !important;
    }

     /* ── 10. Segment inactif/indisponible : fond blanc opaque ── */
    /* opacity:0.7 du .mode-seg.no-audio rendait le fond semi-transparent */
    #bbar-center #mode-switcher .mode-seg.seg-inactive,
    #bbar-center #mode-switcher .mode-seg.no-audio,
    #bbar-center #mode-switcher .mode-seg.seg-unavailable,
    #bbar-center #mode-switcher .mode-seg[disabled] {
        background: #fff !important;
        opacity: 1 !important;        /* ← le vrai fix */
        color: #aaa !important;       /* gris clair pour garder l'aspect "inactif" */
    }
}


/* ── Slider temporel : bleu en mode MIDI (même bleu que #seg-midi.seg-active) ── */
#bottom-controls-bar:has(#mode-switcher[data-active="midi"]) #timeSlider {
    background: linear-gradient(to right,
        #1976d2 var(--ts-pct, 0%),
        #c8bfb0 var(--ts-pct, 0%)
    ) !important;
}
#bottom-controls-bar:has(#mode-switcher[data-active="midi"]) #timeSlider::-webkit-slider-thumb {
    background: #1976d2 !important;
}
#bottom-controls-bar:has(#mode-switcher[data-active="midi"]) #timeSlider::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
        #1976d2 var(--ts-pct, 0%),
        #c8bfb0 var(--ts-pct, 0%)
    ) !important;
}
#bottom-controls-bar:has(#mode-switcher[data-active="midi"]) #timeSlider::-moz-range-progress {
    background: #1976d2;
}
#bottom-controls-bar:has(#mode-switcher[data-active="midi"]) #timeSlider::-moz-range-thumb {
    background: #1976d2 !important;
}
#bottom-controls-bar:has(#mode-switcher[data-active="midi"]) #timeSlider::-webkit-slider-thumb:hover {
    background: #1565c0 !important;
}
#bottom-controls-bar:has(#mode-switcher[data-active="midi"]) #timeSlider::-moz-range-thumb:hover {
    background: #1565c0 !important;
}
/* ══════════════════════════════════════════════════════════════════
 * FIX : Masquer page-navigation en mode landing
 *  — html.is-landing  : page chargée sans $c / $p (aucune partition)
 *  — data-landing-active="true" : displayUploadForm() actif
 *  Ces deux gardes neutralisent toute règle display:flex !important
 *  qui proviendrait de data-continuous-mode="false" ou body.paged-mode.
 * ══════════════════════════════════════════════════════════════════ */
html.is-landing #page-navigation,
#svg_output[data-landing-active="true"] ~ #page-navigation {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* ── FIX : bottom-controls-bar masqué tant qu'aucune partition n'est chargée.
   Dès qu'une partition est ouverte (gestionnaire ou upload), le JS retire
   is-landing de <html> et force bbar.style.display = '' → la barre réapparaît. ── */
html.is-landing #bottom-controls-bar {
    display: none !important;
}
/* =========================================================================
 * Pinch-to-zoom – état transitoire pendant le geste 2 doigts
 * =========================================================================
 * Pas de transition CSS sur transform : on veut un feedback instantané.
 * La transition opacity est gérée par applyZoomWithTransition au re-render.
 * ========================================================================= */

#svg_output.pinching {
    will-change: transform;
    cursor: zoom-in;
    /* CRITIQUE : désactive toute gestion tactile native (zoom browser) */
    touch-action: none !important;
}

/* Au repos : scroll normal autorisé, zoom natif bloqué */
#svg_output {
    touch-action: pan-x pan-y;
}

/* =========================================================================
 * Pinch-to-zoom – overlay % de zoom centré à l'écran
 * ========================================================================= */

#pinch-zoom-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 32px 16px;
    border-radius: 16px;

    background: rgba(15, 15, 15, 0.72);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);

    color: #fff;
    font-family: inherit;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#pinch-zoom-overlay.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Icône SVG loupe minimaliste */
#pinch-zoom-overlay .pinch-zoom-icon {
    display: block;
    width: 22px;
    height: 22px;
    opacity: 0.55;
}

/* Valeur numérique */
#pinch-zoom-overlay .pinch-zoom-pct {
    font-size: 1.65rem;
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1;
    min-width: 4ch;
    text-align: center;
}

/* Label discret sous le % */
#pinch-zoom-overlay .pinch-zoom-label {
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.4;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════
   FIX iOS Safari "100vh bug" — Paysage tablette (iPad)
   position:fixed bottom bar glisse sous le viewport visible
   car 100vh > innerHeight quand la barre Safari est visible
   ══════════════════════════════════════════════════════════════ */
   @media (max-width: 1024px) and (orientation: landscape) {
    html {
        /* -webkit-fill-available = hauteur du viewport visuel réel */
        height: -webkit-fill-available;
        height: 100dvh; /* fallback moderne (iOS 15.4+) */
    }
    body {
        min-height: unset !important; /* annule min-height: 100vh */
        height: -webkit-fill-available;
        height: 100dvh;
        overflow: hidden; /* body non-scrollable : la partition utilise son propre scroll */
    }
}

/* ══════════════════════════════════════════════════════════════════
   PLAYHEAD BAR — Barre verticale de lecture
   Positionnée en absolute dans #svg_output (position:relative).
   Le glissement fluide est entièrement géré par une transition CSS
   sur `left` ; le JS ne fait que mettre à jour la coordonnée.
   ══════════════════════════════════════════════════════════════════ */
#vs-playhead-bar {
    position: absolute;
    width: 16px;
    background: color-mix(in srgb, var(--vs-playhead-color, #ff6600) 22%, transparent);
    box-shadow: none;
    pointer-events: none;
    z-index: 15;
    border-radius: 6px;
    opacity: 1;
    display: none;

    /* left positionné directement à chaque frame rAF — pas de transition CSS */
    transition:
        top    100ms ease-out,
        height 100ms ease-out;
}



/* Désactiver toute transition lors des sauts de page */
#vs-playhead-bar.no-transition {
    transition: none !important;
}


/* ════════════════════════════════════════════════════════
   score-annotations.css  v3.0
   Free-scores XML Player — Annotations partitions privées
   ════════════════════════════════════════════════════════ */

/* ── Wrapper autour de #svg_output ─────────────────────── */
#fs-annot-wrap {
    position: relative;
    display: block;
}

/* ── Overlay (sibling de #svg_output) ──────────────────── */
#fs-annot-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    overflow: hidden;
}
#fs-annot-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* ── Sélection visuelle ─────────────────────────────────── */
.fs-annot-sel {
    outline: 2px dashed rgba(52,152,219,.75) !important;
    outline-offset: 2px;
    border-radius: 3px;
}
path.fs-annot-sel {
    outline: none;
    filter: drop-shadow(0 0 3px rgba(52,152,219,.9));
}


/* ════════════════════════════════════════════════════════
   PANNEAU D'OUTILS
   — flottant au-dessus du bouton bbar, style cohérent
     avec les autres overlays du player
   ════════════════════════════════════════════════════════ */

#fs-annot-panel {
    position: fixed;
    z-index: 10200;
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px 8px;
    box-shadow:
        0 8px 32px rgba(0,0,0,.16),
        0 2px 8px  rgba(0,0,0,.08),
        0 0 0 1px  rgba(0,0,0,.06);
    min-width: 280px;
    animation: fapIn .15s ease;
    font-family: system-ui, -apple-system, sans-serif;
}
@keyframes fapIn {
    from { opacity: 0; transform: translateY(6px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Ligne principale : outils + séparateurs + couleur + save */
.fap-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Groupe des 5 outils */
.fap-tools {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Bouton d'outil */
.fap-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #555;
    cursor: pointer;
    transition: background .12s, color .12s, transform .1s;
    padding: 0;
    outline: none;
    flex-shrink: 0;
}
.fap-tool svg { display: block; pointer-events: none; }
.fap-tool:hover  { background: #f0f1f3; color: #111; transform: scale(1.06); }
.fap-tool:active { transform: scale(.94); }
.fap-tool.active {
    background: #1e293b;
    color: #fff;
    border-radius: 8px;
}
.fap-tool.active:hover { background: #334155; }

/* Séparateur vertical */
.fap-sep {
    width: 1px;
    height: 24px;
    background: #e5e7eb;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Bouton pastille couleur */
.fap-colorbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background .12s, transform .1s;
    padding: 0;
    outline: none;
    flex-shrink: 0;
}
.fap-colorbtn:hover  { background: #f0f1f3; transform: scale(1.06); }
.fap-colorbtn:active { transform: scale(.94); }

.fap-dot {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 1.5px #bbb;
    pointer-events: none;
    transition: box-shadow .15s;
}
.fap-colorbtn:hover .fap-dot {
    box-shadow: 0 0 0 2px #3498db;
}

/* Bouton sauvegarder */
.fap-savebtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #555;
    cursor: pointer;
    position: relative;
    transition: background .12s, color .12s, transform .1s;
    padding: 0;
    outline: none;
    flex-shrink: 0;
}
.fap-savebtn svg { display: block; pointer-events: none; }
.fap-savebtn:hover  { background: #f0f1f3; color: #111; transform: scale(1.06); }
.fap-savebtn:active { transform: scale(.94); }
.fap-savebtn.fap-saved {
    background: #dcfce7;
    color: #16a34a;
}

/* Badge "non sauvegardé" */
.fap-save-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    border: 1.5px solid #fff;
    pointer-events: none;
}

/* Hint texte sous les outils */
.fap-hint {
    margin-top: 7px;
    font-size: 10.5px;
    color: #9ca3af;
    text-align: center;
    min-height: 14px;
    letter-spacing: 0.1px;
}


/* ════════════════════════════════════════════════════════
   MENU CONTEXTUEL (couleur / style / suppression)
   — s'ouvre au clic droit sur une annotation
     ou sur la pastille couleur du panneau
   ════════════════════════════════════════════════════════ */

.fs-annot-ctx {
    position: fixed;
    z-index: 10300;
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px 10px;
    box-shadow:
        0 10px 40px rgba(0,0,0,.18),
        0 2px  10px rgba(0,0,0,.08),
        0 0 0 1px   rgba(0,0,0,.06);
    min-width: 230px;
    animation: fapIn .12s ease;
    font-family: system-ui, -apple-system, sans-serif;
}

.fac-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 6px;
}

/* Palette couleurs */
.fac-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 2px;
}
.fac-swatch {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    border: 2.5px solid transparent;
    box-sizing: border-box;
    transition: transform .1s, border-color .1s;
    flex-shrink: 0;
}
.fac-swatch:hover { transform: scale(1.2); }
.fac-swatch.on    { border-color: #1e293b; }

/* Chips taille / style / épaisseur */
.fac-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 2px;
}
.fac-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    cursor: pointer;
    color: #374151;
    font-size: 11px;
    border: 1.5px solid transparent;
    transition: background .1s, border-color .1s;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
}
.fac-chip:hover      { background: #f3f4f6; }
.fac-chip.on         { background: #1e293b; color: #fff; border-color: #1e293b; }
.fac-chip--bold      { font-weight: 700; }

/* Curseur opacité */
.fac-range {
    width: 100%;
    margin-top: 4px;
    accent-color: #3498db;
    cursor: pointer;
}

/* Séparateur + bouton suppression */
.fac-hr {
    border: none;
    border-top: 1px solid #f1f3f5;
    margin: 8px 0 6px;
}
.fac-del {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    border: none;
    background: none;
    color: #ef4444;
    font-size: 12px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background .1s;
    font-family: inherit;
}
.fac-del:hover { background: #fef2f2; }
/* ════════════════════════════════════════════════════════════════
   Annotations — ancrage du panel en bas-à-droite
   Le bouton est maintenant à l'extrémité droite de #bbar-right,
   juste à gauche du haut-parleur (#volume-ctrl-main).
   On force le panel à s'ouvrir vers le haut et aligné à droite
   pour qu'il ne déborde jamais hors écran.
   ════════════════════════════════════════════════════════════════ */
#fs-annot-panel {
    right: 10px !important;
    left: auto !important;
    bottom: calc(var(--bottom-bar-height, 78px) + 10px) !important;
    top: auto !important;
    transform: none !important;
}

/* Supprimer l'animation translateY (incompatible avec ancrage bottom) */
@keyframes fapIn {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* Bouton stylo : dimensions homogènes avec les autres .bbar-btn */
#annot-bbar-btn.annot-edge-btn {
    height: 44px;
}

/* Caché par défaut — s'affiche uniquement pour les partitions privées */
#annot-bbar-btn {
    display: none !important;
}
#annot-bbar-btn.annot-visible {
    display: inline-flex !important;
}

.lp-mode-icon--audio2chords { background:linear-gradient(135deg,#006699,#3b8fb8); color:#fff; }


/* ===================================================================
   OVERFLOW MENU "Plus" - barre du bas (mobile/tablette)
   Garde visibles : zoom, play MP3/MIDI, tempo, boucle, bouton +.
   Le reste de #bbar-left / #bbar-right est deplace par JS dans
   #bbar-overflow-panel. Bouton + masque en desktop.
   =================================================================== */

/* Bouton "+" masque par defaut (desktop : tous les boutons tiennent) */
#bbar-more-btn { display: none !important; position: relative; }

/* Panneau : ancre au-dessus de la barre, masque par defaut */
#bbar-overflow-panel {
    display: none;
    position: fixed;      /* porte dans <body> par JS -> contexte racine */
    /* Au-dessus de la barre, et au-dessus du piano quand il est ouvert
       (--pk-panel-h pose sur :root par piano-keyboard.js ; 0px sinon). */
    bottom: calc(var(--bottom-bar-height, 78px) + var(--pk-panel-h, 0px) + 12px);
    right: 8px;
    z-index: 20050;       /* > #page-navigation (1100) ET #pk-panel (20000) */
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.22);
    padding: 8px;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    max-width: min(92vw, 320px);
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#bbar-overflow-panel.open { display: grid; }

/* Boutons a l'interieur : meme langage visuel, largeur souple */
#bbar-overflow-panel .bbar-btn {
    width: 100% !important;
    height: auto !important;
    min-height: 56px;
    padding: 8px 4px !important;
    border-radius: 10px;
}
#bbar-overflow-panel .bbar-btn .bbar-btn-subtitle {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    margin-top: 2px;
    font-size: 11px;
    white-space: nowrap;
}
/* Selecteur de format (div wrapper) deplace dans le panneau */
#bbar-overflow-panel #score-format-selector { width: 100%; position: relative; }
#bbar-overflow-panel #score-format-btn {
    width: 100% !important;
    height: auto !important;
    min-height: 56px;
    display: inline-flex !important;
    flex-direction: column;
    gap: 2px;
}

/* Pastille "outil actif" sur le bouton + (ex. metronome en cours) */
.bbar-more-dot {
    display: none;
    position: absolute;
    top: 6px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff9900;
    box-shadow: 0 0 0 2px #f8f8f8;
}
#bbar-more-btn.has-active .bbar-more-dot { display: block; }

/* --- Activation mobile/tablette --- */
@media (max-width: 1024px) {
    /* Le bouton + reste epingle au bord droit, toujours visible/cliquable
       meme quand Stop apparait et que la barre deborde (plus de troncature). */
    #bbar-more-btn {
        display: inline-flex !important;
        position: sticky;
        right: 0;
        z-index: 5;
        background: #f8f8f8;
        box-shadow: -10px 0 10px -6px rgba(0,0,0,0.14);
    }
    /* Contenu reduit : on repartit les sections (override des regles
       flex-start anterieures, gagne par ordre source car ajoute en fin). */
    #bbar-buttons-row { justify-content: space-around !important; }
}