:root {
    --bg: #14181a;
    --panel: #1c2226;
    --border: #2a3438;
    --accent: #4ed99a;
    --accent-2: #d9954e;
    --text: #e8e8e0;
    --text-dim: #8a9498;
    --paper: #f3f0e8;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
}

body {
    display: flex;
    flex-direction: column;
}

#app-header {
    padding: 14px 20px 8px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

#app-header h1 {
    margin: 0;
    color: var(--accent);
}

#app-header .subtitle {
    margin: 2px 0 0;
    color: var(--text-dim);
    font-size: 13px;
}

#app-header .header-btn {
    position: absolute;
    top: 14px;
    background: rgba(255,255,255,0.06);
    color: var(--accent-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}

#app-header .header-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent-2);
}

#btn-settings {
    right: 20px;
    font-size: 16px;
    padding: 6px 10px;
    line-height: 1;
}

#btn-reset {
    right: 66px;
    color: #ff8888 !important;
}

#btn-reset:hover {
    background: #3a2020 !important;
    border-color: #ff8888 !important;
}

#btn-about {
    right: 184px;
}

#btn-help {
    right: 272px;
}

#btn-figures {
    right: 376px;
}

#btn-pdf {
    right: 470px;
}
#btn-dictee {
    right: 548px;
}
#btn-fichier {
    right: 640px;
}
#btn-video {
    right: 730px;
}

/* Panneau réglages (clavier MIDI, micro/carte son) — voir settings.js. Même
   idiome que les menus contextuels (.zaman-context-menu) : ancré sous le
   bouton ⋮, se ferme au clic extérieur, mais contient des <select> plutôt
   que des boutons d'action. */
.zaman-dropdown {
    position: fixed;
    z-index: 20001;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 260px;
}
.zaman-dropdown.hidden {
    display: none;
}
.zaman-dropdown h4 {
    margin: 0 0 4px;
    color: var(--accent);
    font-size: 13px;
}
.zaman-dropdown label {
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 4px;
}
.zaman-dropdown select {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
}

/* ==================== Barre d'outils ==================== */

#toolbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    flex-wrap: wrap;
}

#toolbar .group {
    display: flex;
    align-items: center;
    gap: 6px;
}

#toolbar label {
    color: var(--text-dim);
    font-size: 12px;
}

#toolbar button, #toolbar select, #toolbar input {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
}

#toolbar button.active {
    background: var(--accent);
    color: #10221a;
    border-color: var(--accent);
    font-weight: 600;
}

#toolbar button:hover {
    border-color: var(--accent);
}

#toolbar input[type="number"] {
    width: 60px;
    cursor: text;
}

#btn-play {
    color: var(--accent);
    font-size: 16px;
    padding: 6px 14px;
}

/* Lecture directe de la figure correspondant à la quantification choisie
   (ronde/blanche/noire...) — fond noir/texte vert façon afficheur, entre les
   champs Quantification et Mesure, plutôt qu'à deviner depuis la fraction. */
#toolbar button#btn-capture.capture-on,
#toolbar button#btn-capture-pc.capture-on,
#toolbar button#btn-capture-mic.capture-on {
    background: #b3261e;
    color: #fff;
    border-color: #ff8888;
    font-weight: 600;
}
.capture-status {
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
    max-width: 320px;
}

/* Jauge de niveau (Son du PC / Micro) : confirme que la source audio est bien
   captée, indépendamment de la détection d'attaque (qui peut rester muette
   un moment sans que ça veuille dire que rien n'est entendu). Cachée hors
   écoute d'une source externe — la capture aux pads/clavier/MIDI a déjà son
   propre retour immédiat (voir capture.js). */
.capture-meter {
    display: inline-block;
    width: 70px;
    height: 10px;
    border-radius: 5px;
    background: #0a0d0e;
    border: 1px solid var(--border);
    overflow: hidden;
    vertical-align: middle;
}
.capture-meter.hidden {
    display: none;
}
#capture-meter-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 5px 0 0 5px;
    /* transition courte : la jauge suit le son sans clignoter à chaque bloc FFT (~12 ms) */
    transition: width 60ms linear;
}

.figure-readout {
    background: #0a0d0e;
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    min-width: 64px;
    text-align: center;
}

/* Bandeau "note jouée" (figure + nom + octave + durée) — poussé à droite de
   la barre d'outils (#toolbar est déjà flex). Hauteur RÉSERVÉE en permanence
   (min-height, pas seulement quand un glyphe est affiché) : sinon la barre
   d'outils entière change de hauteur à chaque survol/fin de survol d'une
   note, ce qui fait sauter la grille juste en dessous. */
.now-playing {
    margin-left: auto;
    min-width: 240px;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
}

/* Nom de la note jouée (Ré#4, Sol 4 +50¢, ou instrument de batterie), en doré, à gauche de la figure. */
.now-playing-note {
    color: #f0c040;
    font-size: 20px;
    font-weight: 700;
    min-width: 76px;
    text-align: right;
    white-space: nowrap;
}

/* Signe musical SEUL — caractère de la police Bravura (SMuFL), pas de rendu
   VexFlow/portée/fond : voir figures-view.js. Hérite naturellement la
   couleur du texte environnant (pas besoin de plaque claire dessous, un
   glyphe de police se colore comme n'importe quel texte). */
.now-playing-glyph {
    font-family: 'Bravura', serif;
    font-size: 34px;
    line-height: 1;
}

/* ==================== Panneau "Figures de durée" ==================== */

.figures-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.figure-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 66px;
}

.figure-glyph {
    font-family: 'Bravura', serif;
    font-size: 44px;
    line-height: 1.3;
    color: var(--text);
}

.figure-label {
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
}

.figure-fraction {
    color: var(--accent);
    font-size: 10px;
    text-align: center;
    margin-top: 1px;
}

/* Figures de groupement irrégulier (duolet/triolet/quartolet) : rendues via
   VexFlow (têtes + hampes + ligature + crochet), pas un caractère Bravura
   isolé (aucun glyphe SMuFL unique ne représente un groupe de notes) — même
   fond "papier" que la portée pour rester lisible (VexFlow dessine en noir). */
.figure-tuplet-cell {
    width: auto;
    min-width: 104px;
}
.figure-tuplet-svg {
    background: var(--paper);
    color: #111;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    min-height: 66px;
}

/* ==================== Palette de symboles (portée interactive) ==================== */

#notation-palette {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.12);
}

.palette-category {
    margin-bottom: 12px;
}

.palette-favorites h4 {
    color: var(--accent-2);
}

.palette-favorites-empty {
    margin: 0;
    font-size: 11.5px;
    color: #8a8478;
    font-style: italic;
    max-width: 480px;
}

/* Bascule "Autres figures" — les 19 catégories complètes restent masquées
   par défaut (seuls les favoris sont immédiatement visibles à l'ouverture). */
.palette-toggle-btn {
    display: block;
    margin: 4px 0 16px;
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.18);
    color: #3a3530;
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
}

.palette-toggle-btn:hover {
    background: rgba(0,0,0,0.1);
}

.palette-category h4 {
    margin: 0 0 6px;
    color: #6b6459;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.palette-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.palette-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    color: #3a3530;
    padding: 2px;
    position: relative;
    z-index: 1;
}

.palette-cell:hover {
    z-index: 20;
}

/* Survol : une bulle agrandie (fond noir, texte blanc) apparaît par-dessus la
   case — glyphe + nom + définition complète. Position absolute + centrée sur
   la case d'origine : elle se superpose sans jamais pousser les cases
   voisines (pas de saut de mise en page), et peut dépasser largement la
   petite case de départ pour que le texte de définition reste lisible. */
.palette-hover-detail {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    transform: translate(-50%, -50%) scale(0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    background: #000;
    color: #fff;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.palette-cell:hover .palette-hover-detail {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.palette-hover-glyph {
    font-family: 'Bravura', serif;
    font-size: 34px;
    line-height: 1;
}

.palette-hover-glyph.palette-glyph-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
}

.palette-hover-glyph.palette-glyph-icon svg {
    width: 36px;
    height: 26px;
}

.palette-hover-name {
    font-weight: 700;
    font-size: 12px;
}

.palette-hover-desc {
    font-size: 10.5px;
    line-height: 1.4;
    font-weight: 400;
    color: #e8e8e0;
}

/* Cases OUTIL (durées, silences, altérations, liaisons, nuances,
   articulations — ce que le modèle de données actuel peut vraiment poser sur
   la portée) : curseur "petit crayon" au survol (SVG inline en data-URI, pas
   de fichier image à fournir), pointe du crayon au point chaud. */
.palette-cell-interactive {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><g transform='rotate(45 14 14)'><rect x='12' y='3' width='4' height='15' fill='%234ed99a' stroke='%23222' stroke-width='0.5'/><rect x='12' y='1' width='4' height='3' fill='%23333'/><polygon points='12,18 16,18 14,23' fill='%23d9954e' stroke='%23222' stroke-width='0.5'/></g></svg>") 4 24, pointer;
}

.palette-cell-interactive.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #10221a;
}

/* Cases RÉFÉRENCE (les 13 autres catégories : structure de la portée, clés,
   mesures, groupements, ornements, reprises, octaves, tempo, respiration,
   signes par instrument, harmonie, autres) : présentes, expliquées (voir la
   bulle de survol), mais pas encore un outil qu'on arme — bordure pointillée
   pour les distinguer visuellement, sans jamais les cacher. */
.palette-cell-reference {
    border-style: dashed;
    cursor: help;
    opacity: 0.82;
}

.palette-cell-reference:hover {
    opacity: 1;
}

.palette-glyph {
    font-family: 'Bravura', serif;
    font-size: 26px;
    line-height: 1;
}

.palette-glyph-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.palette-glyph-icon svg {
    display: block;
}

.palette-glyph-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
}

.palette-label {
    font-size: 8px;
    text-align: center;
    line-height: 1.15;
    margin-top: 2px;
    max-width: 54px;
}

/* Rectangle de sélection multiple sur la portée (glisser sur une zone vide
   pour entourer plusieurs figures) — même vert que le reste des sélections. */
.notation-marquee {
    position: absolute;
    border: 1px dashed #4ed99a;
    background: rgba(78,217,154,0.15);
    pointer-events: none;
    z-index: 15;
}

/* ==================== Vues ==================== */

#views {
    padding: 20px;
    flex: 1;
    min-height: 0;
    display: flex;
}

#grid-view-container, #notation-view-container {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 220px;
    flex: 1;
    min-width: 0;
}

/* Pas de padding sur #grid-view-container : un élément position:absolute se
   positionne par rapport à la boîte de PADDING de son parent, pas sa boîte de
   contenu — un padding ici décalerait tout ce qui est en absolu à l'intérieur
   (la ligne microtonale, le curseur de lecture) par rapport au canvas, qui lui
   est en flux normal. La marge visuelle est gérée dans les coordonnées du
   canvas lui-même (LANE_TOP, GUTTER_WIDTH, etc. dans grid-view.js). */
#grid-view-container {
    padding: 0;
}

#notation-view-container {
    background: var(--paper);
    padding: 16px;
    overflow-y: auto;
}

.hidden {
    display: none !important;
}

#notation-header {
    color: #3a3530;
    font-size: 13px;
    font-weight: 600;
    padding: 0 4px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    margin-bottom: 10px;
}

/* La portée elle-même défile horizontalement (morceaux longs) — séparé du
   conteneur global pour que la palette de symboles sous la portée reste,
   elle, toujours entièrement visible sans scroll horizontal. */
#notation-staff-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

/* ==================== Ligne microtonale (réplique de Nabra, verticale) ==================== */

.mtl-bottom-controls {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
}

.mtl-lock {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
    padding: 2px 5px;
    cursor: pointer;
}

.mtl-lock:hover {
    background: rgba(255,255,255,0.12);
}

.mtl-lock-on {
    border-color: var(--accent-2);
}

.mtl-field {
    position: relative;
    height: 100%;
}

/* Fond clavier de piano (mode piano, voir renderPianoBackground) — touches
   blanches pleine largeur, touches noires plus courtes (n'atteignent pas le
   bord gauche), superposées PAR-DESSUS les blanches à la frontière de la
   case suivante, comme un vrai clavier vu de haut. Les repères/étiquettes/
   champs existants se dessinent ensuite par-dessus, inchangés. */
.mtl-piano-key {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
}
.mtl-piano-key {
    cursor: pointer;
}
.mtl-piano-key:not(.mtl-piano-key-disabled):hover {
    filter: brightness(1.12);
}
.mtl-piano-key-disabled {
    opacity: 0.32;
    cursor: not-allowed;
}
.mtl-field-pad .mtl-piano-key-label {
    font-size: 10px;
    letter-spacing: 0;
}
.mtl-piano-key-white {
    background: linear-gradient(to bottom, #e8e8e0, #d7d7cd);
    border-bottom: 1px solid #9a9a90;
}
.mtl-piano-key-black {
    right: 34%;
    background: linear-gradient(to bottom, #2a2a28, #101010);
    border: 1px solid #000;
    border-radius: 0 0 2px 2px;
    z-index: 1;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Nom de chaque touche, à son extrémité GAUCHE (contrairement aux étiquettes
   du mode ligne, à droite) — gamme chromatique standard fixe, une par touche. */
.mtl-piano-key-label {
    position: absolute;
    left: 4px;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: #14181a;
    pointer-events: none;
    z-index: 2;
}
.mtl-piano-key-label-black {
    color: #e8e8e0;
}

.mtl-step {
    position: absolute;
    left: 0;
    width: 32px;
    transform: translateY(-50%);
}

.mtl-step-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 9px;
    text-align: center;
    padding: 1px 0;
}

.mtl-step-input:disabled {
    opacity: 0.5;
}

.mtl-transpose-arrows {
    position: absolute;
    left: 36px;
    width: 16px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 2;
}

/* Même bouton (.mtl-transpose-btn), mais en ligne dans .mtl-bottom-controls
   (mode piano — voir renderBottomControls) au lieu d'ancré près de "Do",
   qui ne se dessine plus en mode piano. */
.mtl-transpose-arrows-inline {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mtl-transpose-btn {
    width: 16px;
    height: 14px;
    line-height: 1;
    padding: 0;
    background: rgba(255,255,255,0.07);
    color: var(--accent-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 8px;
    cursor: pointer;
}

.mtl-transpose-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: var(--accent-2);
}

.mtl-transpose-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Couleurs inversées par rapport à un premier essai : les naturelles (Do Ré
   Mi...) doivent ressortir nettement, les dièses restent discrets et plus
   petits — pour mettre en évidence les degrés de la gamme, pas les altérations. */

.mtl-natural {
    position: absolute;
    right: 6px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--accent-2);
    cursor: ns-resize;
    z-index: 1;
}

.mtl-natural[tabindex]:focus {
    outline: 2px solid #fff;
}

.mtl-sharp {
    position: absolute;
    right: 8.5px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.6;
    cursor: default;
}

.mtl-sharp-unlocked {
    width: 11px;
    height: 11px;
    right: 7px;
    margin-top: -5.5px;
    opacity: 1;
    cursor: ns-resize;
    z-index: 1;
}

.mtl-label {
    position: absolute;
    right: 26px;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-2);
    white-space: nowrap;
    pointer-events: none;
}

.mtl-label-sharp {
    color: var(--text-dim);
    font-size: 8px;
    font-weight: 400;
}

.mtl-editor {
    position: fixed;
    z-index: 30000;
    display: none;
    align-items: center;
    gap: 3px;
    background: var(--panel);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 3px 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.mtl-editor-input {
    width: 60px;
    background: rgba(255,255,255,0.08);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
}

.mtl-editor-unit {
    color: var(--text-dim);
    font-size: 12px;
}

/* Un seul hôte SVG continu désormais (voir notation-view.js, refonte N1) —
   plus un <div> par mesure : position:relative pour le curseur de lecture
   (une ligne unique en X absolu), pas de wrap (défilement horizontal géré
   par #notation-staff-scroll). */
#notation-measures {
    position: relative;
    display: inline-block;
}

/* ==================== Modales ==================== */

.zaman-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zaman-modal-inner {
    position: relative;
    max-width: 720px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}

.zaman-modal-inner h2 {
    margin: 0 0 14px;
    color: var(--accent);
}

.zaman-modal-inner h3 {
    margin: 18px 0 6px;
    color: var(--accent-2);
    font-size: 14px;
}

.zaman-modal-inner p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
}

.zaman-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
}

#zaman-shortcuts {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#zaman-shortcuts td, #zaman-shortcuts th {
    border-bottom: 1px solid var(--border);
    padding: 4px 8px;
    text-align: left;
}

/* ==================== Menu contextuel (clic droit sur la portée) ==================== */

.zaman-context-menu {
    position: fixed;
    z-index: 30000;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.zaman-context-menu-item {
    background: none;
    border: none;
    color: var(--text);
    text-align: left;
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
}

.zaman-context-menu-item:hover {
    background: var(--accent);
    color: #10221a;
}


/* ==================== Export PDF (fenêtre imprimée) ==================== */

#print-root { display: none; }

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body.printing { background: #fff !important; color: #222 !important; overflow: visible !important; height: auto !important; }
    body.printing > *:not(#print-root) { display: none !important; }
    body.printing #print-root { display: block; background: #fff; color: #222; font-family: 'Segoe UI', Arial, sans-serif; }
    #print-root .print-title h1 { margin: 0 0 2mm; font-size: 20pt; color: #1b7f57; }
    #print-root .print-title p { margin: 0 0 6mm; font-size: 10pt; color: #555; }
    #print-root .print-line { display: flex; width: 100%; margin-bottom: 6mm; break-inside: avoid; }
    #print-root svg { color: #000; }
    #print-root .print-library { break-before: page; }
    #print-root .print-library h2 { border: 0; padding: 0; margin: 0 0 1mm; font-size: 16pt; color: #1b7f57; }
    #print-root .print-note { margin: 0 0 4mm; font-size: 9pt; color: #666; }
    #print-root .print-cat { margin-bottom: 4mm; }
    #print-root .print-cat h3 { margin: 0 0 2mm; font-size: 10pt; text-transform: uppercase; letter-spacing: 0.04em; color: #6b6459; border-bottom: 0.3mm solid #ccc; break-after: avoid; }
    #print-root .print-sym { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 6mm; }
    #print-root .print-item { display: flex; gap: 3mm; align-items: flex-start; break-inside: avoid; }
    #print-root .print-glyph { flex: none; width: 11mm; text-align: center; font-size: 20pt; color: #000; }
    #print-root .print-glyph.palette-glyph-text { font-size: 10pt; }
    #print-root .print-text { font-size: 8pt; line-height: 1.3; color: #222; }
}


/* Mode Pad : 8 pads pleins, sans espaces, vert émeraude, texte noir. */
.mtl-pad-key {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 8px;
    background: #4ed99a;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, 0.45);
    cursor: pointer;
    user-select: none;
}
.mtl-pad-key:hover { filter: brightness(1.1); }
.mtl-pad-key:active { filter: brightness(0.85); }

/* Pad désactivé "pour les captures" (menu clic droit) : reste jouable
   normalement (voir capture.js), juste écarté visuellement en gris pour ne
   pas laisser croire qu'il compte dans la prochaine capture. */
.mtl-pad-key-capture-off {
    background: #4a4f52;
    color: #cfd4d6;
}

/* Listes déroulantes : le choix s'affichait en blanc sur blanc (le fond
   presque transparent des <select> laissait Windows peindre la liste en
   blanc) — texte blanc sur fond gris, option survolée/choisie en vert. */
select option, select optgroup {
    background-color: #3a4048;
    color: #ffffff;
}
select option:checked {
    background-color: #2f6b52;
    color: #ffffff;
}

/* ==================== Fond de la portée (comme le tableau de Loutar Didact) ==================== */
#notation-header { display: flex; align-items: center; gap: 12px; }
#notation-header-texte { flex: 1; }
.nh-reglages { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: 12px; opacity: .85; }
.nh-reglages:hover { opacity: 1; }
.nh-reglages label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nh-reglages select { background: rgba(0,0,0,0.06); color: inherit; border: 1px solid rgba(0,0,0,0.2); border-radius: 5px; padding: 2px 6px; font-size: 12px; }
.nh-reglages input[type=range] { width: 90px; accent-color: #4ed99a; }
#notation-zoom-val { min-width: 36px; font-variant-numeric: tabular-nums; }
#notation-view-container[data-fond="blanc"] { background: #ffffff; }
#notation-view-container[data-fond="vert"] { background: radial-gradient(ellipse at 50% 35%, #2f5a45 0, #234536 70%, #1d3a2d 100%); --encre: #eef5f0; }
#notation-view-container[data-fond="noir"] { background: #121416; --encre: #eef5f0; }
/* craie : la portée (dessinée en noir par VexFlow) prend l'encre claire */
#notation-view-container.fond-sombre #notation-measures svg { fill: var(--encre); }
#notation-view-container.fond-sombre #notation-measures svg [stroke="#000"],
#notation-view-container.fond-sombre #notation-measures svg [stroke="#000000"],
#notation-view-container.fond-sombre #notation-measures svg [stroke="black"],
#notation-view-container.fond-sombre #notation-measures svg [stroke="#444"],
#notation-view-container.fond-sombre #notation-measures svg [stroke="#999999"] { stroke: var(--encre); }
#notation-view-container.fond-sombre #notation-measures svg [fill="#000"],
#notation-view-container.fond-sombre #notation-measures svg [fill="#000000"],
#notation-view-container.fond-sombre #notation-measures svg [fill="black"] { fill: var(--encre); }
#notation-view-container.fond-sombre #notation-header { color: #dcebe3; border-bottom-color: rgba(255,255,255,0.15); }
#notation-view-container.fond-sombre .nh-reglages select { background: #24342c; color: #eef5f0; border-color: rgba(255,255,255,0.25); }
#notation-view-container.fond-sombre #notation-palette { border-top-color: rgba(255,255,255,0.15); }
#notation-view-container.fond-sombre .palette-cell { background: rgba(243,240,232,0.94); }
#notation-view-container.fond-sombre .palette-category h4,
#notation-view-container.fond-sombre .palette-favorites h4,
#notation-view-container.fond-sombre .palette-favorites-empty { color: #ffd76a; }
#notation-view-container.fond-sombre .palette-category > button,
#notation-view-container.fond-sombre #notation-palette > button { color: #eef5f0; }
/* barre de défilement de la portée : discrète, visible au survol */
#notation-staff-scroll::-webkit-scrollbar { height: 6px; }
#notation-staff-scroll::-webkit-scrollbar-track { background: transparent; }
#notation-staff-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
#notation-staff-scroll:hover::-webkit-scrollbar-thumb { background: rgba(120, 140, 135, .5); }
#notation-staff-scroll::-webkit-scrollbar-thumb:hover { background: rgba(78, 217, 154, .8); }

/* ↶ ↷ 🗑 de l'en-tête de la partition */
.nh-actions { display: inline-flex; gap: 4px; }
.nh-actions button { background: rgba(0,0,0,0.06); color: inherit; border: 1px solid rgba(0,0,0,0.2); border-radius: 5px; padding: 1px 8px; font-size: 14px; line-height: 20px; cursor: pointer; }
.nh-actions button:hover:not(:disabled) { border-color: #ffd76a; }
.nh-actions button:disabled { opacity: .35; cursor: default; }
#notation-view-container.fond-sombre .nh-actions button { background: #24342c; color: #eef5f0; border-color: rgba(255,255,255,0.25); }
/* Figure choisie dans la palette : contour JAUNE (bien visible sur le fond vert) */
.palette-cell-interactive.active {
    border: 2px solid #ffd76a !important;
    box-shadow: 0 0 0 2px #ffd76a, 0 0 8px rgba(255, 215, 106, 0.55);
}

/* Infobulle de la palette : AU-DESSUS de la figure survolée (elle ne la cache plus) */
.palette-hover-detail {
    top: auto !important;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 4px) scale(0.92) !important;
}
.palette-cell:hover .palette-hover-detail {
    transform: translate(-50%, 0) scale(1) !important;
}
.palette-hover-detail::after {
    content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: #000;
}
body.palette-glisse .palette-hover-detail { display: none; }
/* Favoris : glisser-déposer */
.palette-fav-row .palette-cell { cursor: grab; }
.palette-fav-row .palette-cell.fav-glissee { opacity: .35; }
.palette-fav-row .palette-cell.fav-insere-avant { box-shadow: -5px 0 0 -1px #ffd76a; }
.palette-fav-row .palette-cell.fav-insere-apres { box-shadow: 5px 0 0 -1px #ffd76a; }

/* --- Fichier, options de lecture, dictée rythmique --- */
#projet-nom { margin-left: 10px; color: var(--accent); font-weight: 600; }
#fichier-panel button { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: rgba(255,255,255,0.04);
    color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-size: 13px; cursor: pointer; }
#fichier-panel button:hover { border-color: var(--accent); }
#fichier-panel kbd { color: var(--text-dim); font: 11px inherit; }
#fichier-panel .pj-recent { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#btn-play-options { min-width: 0; padding-left: 5px; padding-right: 5px; margin-left: -4px; border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 11px; }
#btn-play-options.active { background: var(--accent); color: #0d1f17; }
#lecture-panel { width: 300px; }
#lecture-panel .lo-case { display: flex; gap: 8px; align-items: flex-start; color: var(--text); cursor: pointer; line-height: 1.35; }
#lecture-panel .lo-case b { color: var(--accent); }
#lecture-panel .lo-prog { color: var(--text-dim); font-size: 12px; line-height: 2; padding-left: 22px; }
#lecture-panel .lo-prog.inactif { opacity: 0.4; pointer-events: none; }
#lecture-panel input[type=number] { width: 52px; background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 2px 4px; }
#lecture-panel .lo-note { margin: 2px 0 0; color: var(--text-dim); font-size: 11px; }
#dictee-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin: 0 0 6px; border: 1px solid var(--accent);
    border-radius: 8px; background: rgba(78, 217, 154, 0.08); }
#dictee-barre.hidden { display: none; }
#dictee-barre .dc-titre { color: var(--accent); font-weight: 700; margin-right: 4px; }
#dictee-barre select, #dictee-barre button { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; font-size: 13px; cursor: pointer; }
#dictee-barre select option { background: #3a3f44; color: #fff; }
#dictee-barre button:hover { border-color: var(--accent); }
#dictee-barre button:disabled { opacity: 0.4; cursor: default; }
#dictee-barre .dc-ecouter { border-color: var(--accent); color: var(--accent); font-weight: 600; }
#dictee-barre .dc-quitter { margin-left: auto; }
#dictee-barre .dc-resultat { flex-basis: 100%; color: var(--text-dim); font-size: 13px; min-height: 0; }
#dictee-barre .dc-resultat:empty { display: none; }
#dictee-barre .dc-resultat.ok { color: var(--accent); font-weight: 700; }

/* --- ⏺ Vidéo : capture de l'écran (capture-video.js), aux couleurs de Zaman --- */
#btn-video.active { color: var(--accent); border-color: var(--accent); }
#btn-video.rec { color: #ff5a5a; border-color: #ff5a5a; animation: cap-cl 1s steps(2) infinite; }
@keyframes cap-cl { 50% { opacity: 0.45; } }
#capture-panneau { display: none; position: fixed; top: 64px; right: 16px; z-index: 20050; width: 390px; max-height: calc(100vh - 84px); overflow: auto;
    background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    font-size: 13px; padding: 0 12px 12px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#capture-panneau.on { display: block; }
#capture-panneau.cache { display: none !important; }
#capture-panneau .cp-tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -12px 10px; padding: 9px 12px;
    background: var(--panel); border-bottom: 1px solid var(--border); color: var(--accent); font-weight: 700; font-size: 14px; cursor: move; }
#capture-panneau button, #capture-panneau select, #capture-panneau input[type=number] { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 9px; font-size: 13px; cursor: pointer; }
#capture-panneau select { max-width: 100%; }
#capture-panneau select option { background: #3a3f44; color: #fff; }
#capture-panneau button:hover { border-color: var(--accent); }
#capture-panneau button:disabled { opacity: 0.45; cursor: default; }
#capture-panneau input[type=number] { width: 64px; }
#capture-panneau input[type=range] { accent-color: var(--accent); }
#capture-panneau input[type=checkbox], #capture-panneau input[type=radio] { accent-color: var(--accent); }
#capture-panneau fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 10px 0 0; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
#capture-panneau legend { color: var(--accent); padding: 0 4px; font-weight: 600; }
#capture-panneau label { color: var(--text); }
#capture-panneau .cp-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#capture-panneau .cp-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#capture-panneau .cp-apercu { background: #000; border: 1px solid var(--border); border-radius: 6px; display: flex; justify-content: center; align-items: center; height: 190px; margin-bottom: 8px; }
#capture-panneau .cp-apercu video { max-width: 100%; max-height: 100%; display: block; }
#capture-panneau .cp-taille, #capture-panneau .cp-detail { color: var(--text-dim); font-size: 12px; }
#capture-panneau .cp-reglage { display: grid; grid-template-columns: 100px 1fr 46px; align-items: center; gap: 6px; }
#capture-panneau .cp-reglage select { grid-column: span 2; min-width: 0; width: 100%; text-overflow: ellipsis; }
#capture-panneau { overflow-x: hidden; }
#capture-panneau fieldset { min-width: 0; }
#capture-panneau fieldset > select { width: 100%; min-width: 0; text-overflow: ellipsis; }
#capture-panneau .cp-reglage { min-width: 0; }
#capture-panneau .cp-reglage .cp-micro-voie { grid-column: span 1; }
#capture-panneau .cp-micro-voie-auto { color: var(--accent) !important; font-weight: 600; font-size: 10.5px !important; text-align: left !important; white-space: nowrap; }
#capture-panneau .cp-reglage .cp-note { grid-column: span 2; color: var(--text-dim); font-size: 11.5px; }
#capture-panneau .cp-reglage > span { color: var(--text-dim); }
#capture-panneau .cp-reglage b { color: var(--accent-2); text-align: right; font-size: 12px; }
#capture-panneau .cp-vu { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; margin: -2px 0 4px; }
#capture-panneau .cp-vu i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent) 0 70%, var(--accent-2) 70% 90%, #ff5a5a 90%); background-size: 390px 100%; }
#capture-panneau .cp-vu i.sature { background: #ff5a5a; }
#capture-panneau .cp-dossier { flex: 1; min-width: 0; color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
#capture-panneau .cp-rec { width: 100%; margin-top: 12px; padding: 10px; font-size: 15px; font-weight: 700; background: var(--accent); color: #0d1f17; border-color: var(--accent); }
#capture-panneau .cp-rec:hover { filter: brightness(1.1); }
#capture-panneau .cp-rec.actif { background: #7a1616; color: #fff; border-color: #ff5a5a; }
#capture-panneau .cp-raccourcis { color: var(--text-dim); font-size: 11.5px; margin-top: 8px; line-height: 1.45; }
#capture-panneau .cp-raccourcis b { color: var(--text); }
#capture-panneau .cp-msg { color: var(--accent-2); background: rgba(217, 149, 78, 0.08); border: 1px solid rgba(217, 149, 78, 0.45); border-radius: 6px; padding: 6px 9px; white-space: pre-line; margin: 4px 0; }
#capture-panneau .cp-msg.erreur { color: #ff8a8a; border-color: #7a1616; background: rgba(255, 77, 77, 0.08); }
#capture-panneau .cp-resultat { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 8px; background: rgba(78, 217, 154, 0.08); display: flex; flex-direction: column; gap: 6px; }
#capture-panneau .cp-chemin { color: var(--text-dim); font-size: 11.5px; word-break: break-all; }
#capture-cadre { position: fixed; z-index: 20040; pointer-events: none; border: 2px dashed var(--accent); border-radius: 4px; box-sizing: border-box; }
#capture-cadre.rec { border-color: #ff5a5a; }
#capture-voile { position: fixed; inset: 0; z-index: 20060; cursor: crosshair; background: rgba(0, 0, 0, 0.35); }
#capture-voile .cv-aide { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--panel); color: var(--accent); border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; font-size: 13px; pointer-events: none; }
#capture-voile .cv-rect { display: none; position: absolute; border: 2px solid var(--accent); background: rgba(78, 217, 154, 0.08); color: var(--accent); font-size: 12px; font-weight: 700; padding: 3px 6px; box-sizing: border-box; }

/* indication métronomique (figure du temps de la mesure, police Bravura) */
.tempo-glyphe { font-family: 'Bravura', serif; font-size: 20px; line-height: 0; vertical-align: -2px; font-weight: normal; }