#scale-name-display {
    font-size: 1.4em;
    color: #ffd700;
    font-weight: bold;
    margin-bottom: 28px;
    /* Default spacing, increase as needed */
    margin-top: 8px;
    letter-spacing: 1px;
    min-height: 1.5em;
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: #222;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Réserve la place de la barre de menu fixe du haut (à-propos/reset/aide
       à top:12px + la rangée clavier/micro/volume juste en dessous à
       top:54px, jusqu'à ~88px ; le logo watermark à gauche descend jusqu'à
       ~72px) : sans cette marge, la 1ère fenêtre du flux normal démarrait
       quasiment au ras du haut de la fenêtre (2vh ne suffisait pas sur la
       plupart des résolutions) et passait SOUS cette barre fixe, qui la
       recouvre visuellement (z-index plus élevé). Valeur fixe, pas vh : doit
       rester suffisante même sur un écran bas, où vh rétrécit d'autant.
       Marge ajustée (100 -> 150 -> 350 -> 250px) pour un espace confortable
       entre la barre fixe et la 1ère fenêtre.
    */
    padding-top: 250px;
    box-sizing: border-box;
    color: white;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove all focus outlines/glows */
*:focus,
*:active,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

#app-container {
    width: 90%;
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    box-shadow: none !important;
    outline: none !important;
}

/* Logo watermark — top-right like TV */
#logo-watermark {
    position: fixed;
    top: 12px;
    left: 16px;
    height: 60px;
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    /* Don't block clicks */
}

h1 {
    color: #ccc;
    font-weight: 300;
    margin-bottom: 40px;
    letter-spacing: 2px;
}



/* --- HEADER CONTAINER --- */
#header-container {
    width: 100%;
    height: 120px;
    margin-bottom: 30px;
    position: relative;
    overflow: visible;
    user-select: none;
    /* Prevent text selection during drag */
    /* Allow cursor circle to extend beyond container */
}

/* --- THE NECK (TUBE) --- */
#neck-container {
    position: relative;
    width: 100%;
    /* Plus haut que Loutar Didact (151px, 4 cordes) : 6 chœurs ont besoin de
       plus de place verticale pour que les notes posées ne se chevauchent pas.
       Mode 4 cordes (bouton 6/4) : hauteur ramenée à celle de Loutar Didact
       (voir .manche-4-cordes ci-dessous) — même rapport largeur/hauteur. */
    height: 220px;
    margin: 30px auto;
    /* overflow: hidden; */
    /* Keep commented to allow buttons at -6% */
    box-sizing: border-box;
    transition: transform 0.1s ease-out;
}

/* --- FRET CALCULATOR --- */
#fret-calc-section {
    position: relative;
    width: 100%;
    margin: -18px auto 0;
    box-sizing: border-box;
}

#diapason-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-right: 4%;
    margin-bottom: 2px;
    font-size: 12px;
    color: #aaa;
}

#diapason-input {
    width: 64px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    color: #f0c14b;
    font-size: 12px;
    padding: 2px 6px;
    text-align: center;
}

#diapason-input:hover,
#diapason-input:focus {
    border-color: #f0c14b;
    outline: none;
}

.mm-unit {
    color: #666;
    font-size: 11px;
}

/* --- SCALE LIBRARY CONTEXT MENU --- */
#scale-lib-menu,
#scale-lib-sub {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #1e2226;
    border: 1px solid #2a2e33;
    border-radius: 8px;
    min-width: 180px;
    padding: 4px 0;
    box-shadow: 0 6px 24px rgba(0,0,0,.8);
}

#scale-lib-sub {
    z-index: 10000;
    min-width: 210px;
    max-height: 400px;
    overflow-y: auto;
}

.scale-lib-header {
    padding: 7px 14px 5px;
    font-size: 12px;
    color: #c9962e;
    font-weight: 600;
    letter-spacing: .5px;
    border-bottom: 1px solid #2a2e33;
    margin-bottom: 2px;
    pointer-events: none;
}

.scale-lib-cat {
    padding: 7px 14px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
}

.scale-lib-cat:hover {
    background: rgba(0,204,204,.12);
    color: #c9962e;
}

.scale-lib-scale {
    padding: 6px 14px;
    font-size: 13px;
    color: #bbb;
    cursor: pointer;
    user-select: none;
}

.scale-lib-scale:hover {
    background: rgba(255,215,0,.12);
    color: #ffd700;
}

.scale-lib-cat-sep {
    height: 1px;
    background: #2a2e33;
    margin: 2px 0;
}

#fret-reset-btn {
    background: none;
    border: 1px solid #444;
    border-radius: 4px;
    color: #888;
    font-size: 11px;
    padding: 2px 6px;
    cursor: pointer;
    line-height: 1;
}

#fret-reset-btn:hover {
    border-color: #ff6666;
    color: #ff6666;
}

#fret-ruler-svg {
    display: block;
    overflow: visible;
}

#bottom-container {
    position: relative;
    width: 100%;
    margin: 20px auto;
    box-sizing: border-box;
    transition: transform 0.1s ease-out;
}

#webcam-container,
#synth-container {
    position: relative;
    margin: 30px auto;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s ease-out, border-color 0.3s;
}

#webcam-container {
    width: 320px;
    aspect-ratio: 16 / 9;
    background: #000;
    min-width: 160px;
}

#synth-container {
    width: 100%;
    position: relative;
    margin: 20px auto;
    overflow: visible;
    box-shadow: none;
    box-sizing: border-box;
    padding: 10px 12px 12px;
    transition: transform 0.1s ease-out;
}

#webcam-container:hover,
#synth-container:hover {
    border-color: #ffd700;
}

.piano-keyboard {
    height: 140px;
    display: flex;
    position: relative;
    /* Espace au-dessus des touches pour les flèches de gamme + leur champ
       d'altération (.scale-arrow à -30px, .scale-arrow-offset à -54px,
       tailles doublées) — sans cette marge, ils chevauchaient les curseurs
       ADSR juste au-dessus (.synth-controls). */
    margin-top: 65px;
    overflow: visible;
}

.white-key {
    flex: 1;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: linear-gradient(180deg, #fff 0%, #ddd 100%);
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 5px solid #999;
    border-radius: 0 0 4px 4px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.05s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 6px;
}

.key-label {
    font-size: 11px;
    font-weight: bold;
    color: #333;
    pointer-events: none;
    user-select: none;
    text-transform: uppercase;
}

.white-key:active,
.white-key.playing {
    background: linear-gradient(180deg, #ffe566 0%, #ffd700 100%);
    transform: translateY(3px);
    border-bottom: 2px solid #b8960a;
}

.black-key {
    position: absolute;
    top: 0;
    width: 3%;
    height: 60%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #555 0%, #111 100%);
    border: 1px solid #000;
    border-bottom: 3px solid #000;
    border-radius: 0 0 3px 3px;
    z-index: 2;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 4px;
}

.black-key-label {
    font-size: 7px;
    font-weight: bold;
    color: rgba(255, 210, 60, 0.9);
    pointer-events: none;
    user-select: none;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}

.black-key:active,
.black-key.playing {
    background: linear-gradient(180deg, #ffcc00 0%, #ff9900 100%);
    transform: translateY(3px);
}

.black-key:active .black-key-label,
.black-key.playing .black-key-label {
    color: rgba(0, 0, 0, 0.6);
}

/* --- TUNING ROOT HIGHLIGHT (RED) --- */
.white-key.tuning-root {
    background: linear-gradient(180deg, #ffaaaa 0%, #ff5555 100%);
    border-color: #aa1111;
}

.black-key.tuning-root {
    background: linear-gradient(180deg, #aa2222 0%, #660000 100%);
    border-color: #880000;
}

.white-key.tuning-root.playing,
.white-key.tuning-root:active {
    background: #ff6666;
}

.black-key.tuning-root.playing,
.black-key.tuning-root:active,
.black-key.tuning-root.mic-playing {
    background: #ff8888;
}

/* --- MIC HIGHLIGHT --- */
.white-key.mic-playing {
    background: #ffd700;
    transform: translateY(2px);
    border-bottom: 1px solid #999;
}

.black-key.mic-playing {
    background: #ffaa00;
    transform: translateY(4px);
}

.synth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.synth-header span {
    font-weight: bold;
    color: #ffd700;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#synth-scale-name {
    color: #7fffb0 !important;
    font-style: italic;
}

/* Petites flèches au-dessus des touches (blanches et noires) indiquant les
   notes de la gamme active — voir renderKeyboard()/getGammeActivePourClavier()
   dans app.js. Blanche = degré à la hauteur tempérée exacte de la touche ;
   rouge + décalage en cents = degré microtonal (ex. Mi -50 du Saba), pour que
   l'écart soit visible d'un coup d'œil plutôt que deviné à l'oreille. */
.scale-arrow {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px; /* réduit d'1/3 par rapport à 22px (doublé depuis 11px) */
    line-height: 1;
    color: #ffffff;
    pointer-events: none;
    user-select: none;
    z-index: 3;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.scale-arrow.altered {
    color: #ff4444;
}

.scale-arrow-offset {
    position: absolute;
    top: -54px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px; /* doublé (était 8px) */
    font-weight: normal; /* moins gras (demandé) */
    color: #ff4444;
    white-space: nowrap;
    pointer-events: auto; /* modifiable : glisser haut/bas, ou flèches clavier une fois sélectionné */
    user-select: none;
    z-index: 4;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    cursor: ns-resize;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    padding: 0 2px;
}

/* Flèche blanche (degré non altéré) : affiche "00" au lieu du décalage, en
   blanc au lieu du rouge réservé aux degrés altérés. */
.scale-arrow-offset.zero {
    color: #ffffff;
}

.scale-arrow-offset:focus {
    outline: 1px solid #ffd700;
    background: rgba(0, 0, 0, 0.6);
}

#instrument-select {
    background: #222;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.85em;
    cursor: pointer;
}

#midi-scale-mode {
    background: #1a2a1a;
    color: #88ff88;
    border: 1px solid #448844;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.85em;
    cursor: pointer;
}

#synth-reset-btn {
    background: #2a1a1a;
    color: #ff8888;
    border: 1px solid #884444;
    border-radius: 4px;
    padding: 4px 9px;
    font-size: 0.9em;
    line-height: 1;
    cursor: pointer;
}

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

.synth-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.adsr-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.adsr-slider label {
    font-size: 0.75em;
    color: #888;
}

.adsr-slider input[type="range"] {
    /* Horizontal (au lieu de vertical) : les 4 curseurs A-D-S-R restent en
       ligne, juste sous la bande de menus du synthé (.synth-header),
       glissement gauche/droite plutôt que haut/bas. */
    width: 100%;
    height: 18px;
    cursor: ew-resize;
    accent-color: #ffd700;
}

#webcam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #111;
}

.resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, transparent 50%, rgba(255, 215, 0, 0.6) 50%);
    cursor: nwse-resize;
    z-index: 10;
}

#neck-tube {
    width: 100%;
    height: 100%;
    border-radius: 3px;

    /* Suit la forme tracée par les cordes (window.leftSpreadStart/End=5/95 à
       x=0%, rightSpreadStart/End=20/80 à la cardelette x=96% — app.js,
       valeurs INCHANGÉES par rapport à Loutar Didact) avec une petite marge
       (4%) au-delà de la 1ère/6ème corde, au lieu d'un simple rectangle. Ne
       touche qu'à ce <div> (fond + sillet) : les cordes/notes du SVG ne sont
       pas concernées. */
    clip-path: polygon(
        0% 1%,
        96% 16%,
        100% 16%,
        100% 84%,
        96% 84%,
        0% 99%
    );

    /* Contrairement au Loutar (manche arrondi façon tube, reflet clair au
       milieu), le manche de l'Oud est PLAT : seuls ses bords haut et bas sont
       arrondis (pour ne pas blesser le joueur). D'où deux REFLETS fins et
       nets, un sur chaque bord (sans plongée dans l'ombre juste après, qui
       les rendait trop discrets), sur une base plus claire qu'avant. Surface
       du MILIEU unie, sans dégradé, pour l'impression de plat. Empilés en
       plusieurs background : tous suivent le clip-path (contrairement à
       box-shadow), donc restent bien à l'intérieur de la forme du manche. */
    background:
        /* Reflet fin du bord HAUT (chant arrondi qui capte la lumière) */
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0) 6%
        ),
        /* Reflet fin du bord BAS, symétrique */
        linear-gradient(to top,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0) 6%
        ),
        /* Surface du milieu : couleur UNIE, éclaircie (pas de dégradé) */
        #3a5c4a;

    /* drop-shadow (pas box-shadow) : suit la forme découpée par clip-path,
       contrairement à box-shadow qui reste basée sur la boîte rectangulaire
       d'origine sous Chromium — c'est ce qui donnait l'impression que le
       manche restait rectangulaire malgré le clip-path. */
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.45));
}

/* Mode 4 cordes (violon/banjo ténor, bouton 6/4) : même rapport largeur/
   hauteur que le manche de Loutar Didact — trop épais avec la hauteur du
   manche Oud (220px, pensée pour 6 chœurs). */
#neck-container.manche-4-cordes {
    height: 151px;
}

/* Apparence du manche de Loutar Didact — fond aluminium émeraude, rectangle
   simple (pas de taillage trapézoïdal, propre au manche Oud). Uniquement
   l'apparence : taille/design du reste (accordages, menus) inchangés. */
#neck-container.manche-4-cordes #neck-tube {
    clip-path: none;
    border-radius: 10px;
    background: linear-gradient(to bottom,
        #2e4a3d 0%,
        #8fbc8f 40%,
        #507d6a 60%,
        #204030 100%
    );
    filter: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* --- SVG OVERLAY --- */
#strings-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Base height */
    pointer-events: none;
    overflow: visible;
    /* CRITICAL: Allow buttons below neck to be seen */
    z-index: 10;
}


/* ... existing styles ... */

/* SVG Text Styles */
text.note-label {
    fill: #ffffff;
    /* White */
    font-family: 'Segoe UI', sans-serif;
    font-size: 21px;
    font-weight: bold;
    text-anchor: start;
    /* Align left */
    dominant-baseline: middle;
    /* Vertically center on the Y coordinate */
    pointer-events: auto;
    cursor: pointer;
    /* Stronger shadow for contrast against background if needed */
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.9));
    user-select: none;
}

rect.dark-interval {
    fill: rgba(0, 0, 0, 0.4);
    /* Ombre ~40% opacité, fonctionne sur n'importe quel fond */
}

rect.headstock-tint {
    /* Couleur de Loutar Didact reprise pour le moment (à la demande). */
    fill: rgba(210, 80, 20, 0.55);
}

line.string {
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5));
    /* Shadow for 3D feel */
}

circle.open-note-marker {
    fill: #ffd700;
    /* Gold/Yellow */
    stroke: #b8860b;
    /* Darker border */
    stroke-width: 1px;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5));
    cursor: pointer;
    pointer-events: auto;
    /* Enable clicks! */
}

/* --- NECK NOTE MARKERS (Interactive Groups) --- */
.neck-note-group {
    cursor: pointer;
    pointer-events: auto;
}

.neck-note-group circle {
    fill: #ffd700;
    opacity: 0;
    stroke: none;
    transition: opacity 0.2s ease;
}

.neck-note-group text {
    opacity: 0;
    /* Hidden by default */
    pointer-events: none;
    /* Let clicks pass to group/circle */
    user-select: none;
    font-family: 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
    /* Centered in circle */
}

/* Hover effect for invisible markers (optional helper) */
.neck-note-group:hover circle {
    opacity: 0.3;
    stroke: rgba(255, 215, 0, 0.4);
    r: 1.2%;
    /* Slightly larger target */
}

/* --- ACTIVE STATE (Visible) --- */
.neck-note-group.active circle {
    opacity: 1;
    stroke: #b8860b;
    stroke-width: 1px;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5));
}

.neck-note-group.active text {
    opacity: 1;
    /* Show Text */
    fill: black;
}

/* --- DYNAMIC NECK GLOW --- */
.neck-glow {
    pointer-events: none;
    transition: opacity 0.8s ease-out;
    opacity: 1;
}

.neck-glow circle {
    animation: neckGlowPulse 0.4s infinite alternate ease-in-out;
}

@keyframes neckGlowPulse {
    0% {
        opacity: 0.5;
        transform: scale(0.85);
        transform-origin: center;
    }

    100% {
        opacity: 1;
        transform: scale(1.15);
        transform-origin: center;
    }
}

.neck-glow.fading {
    opacity: 0;
}

line.nut-tie {
    stroke: #d2b48c;
    /* Tan/Rope color */
    stroke-width: 6;
    /* Thicker than strings */
    stroke-linecap: round;
    filter: drop-shadow(2px 0px 3px rgba(0, 0, 0, 0.6));
}

line.fret-line {
    stroke: rgba(0, 0, 0, 0.5);
    /* Fine dark line */
    stroke-width: 1;
    /* Thin "finement" */
    vector-effect: non-scaling-stroke;
    /* Keep thin even if resized */
}

/* Repères de 1/4 de ton : traits blancs très fins, entre chaque frette de
   demi-ton (Loutar comme Oud) — plus discrets que .fret-line (opacité
   réduite, épaisseur minimale) pour ne pas rivaliser avec les frettes. */
line.quarter-tone-line {
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 0.5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* --- FRETS --- */
#frets-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fret {
    position: absolute;
    top: 0;
    height: 100%;
    width: 8px;
    /* Fret width */
    background: linear-gradient(to right, #111, #444, #111);
    /* Dark metal ring */
    opacity: 0.9;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    /* Highlight on fret edge */
}

/* --- STRINGS --- */
#strings-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* Spread strings evenly */
    padding: 10px 0;
    /* Margin from top/bottom of neck */
    box-sizing: border-box;
    pointer-events: none;
    /* Let clicks pass through */
}

.string {
    width: 100%;
    height: 2px;
    /* String thickness */
    background: #ffffff;
    /* Nylon White */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    /* Shadow cast by string on neck */
    position: relative;
}

/* SVG Text Styles */
text.note-label {
    fill: rgb(210, 80, 20);
    /* "Headstock Orange" - Solid for readability */
    font-family: 'Segoe UI', sans-serif;
    font-size: 21px;
    font-weight: normal;
    text-anchor: start;
    dominant-baseline: middle;
    pointer-events: auto;
    cursor: pointer;
    /* Dark shadow for contrast against dark background */
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.8));
    user-select: none;
}

.notation-toggle-group {
    pointer-events: auto;
    /* Enable clicks on the group */
    cursor: pointer;
}

.control-button {
    pointer-events: auto;
    /* Enable clicks on the OK button */
    cursor: pointer;
}



/* --- MODAL STYLES --- */
.preset-modal-overlay {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    /* Dark overlay */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* Above everything */
}

.preset-modal {
    background: #2a2a2a;
    /* Dark gray background */
    border-radius: 10px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    color: white;
}

.preset-modal h3 {
    margin: 0 0 20px 0;
    text-align: center;
    color: #ffd700;
    /* Gold color */
    font-size: 24px;
}

.preset-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    max-height: 300px;
    overflow-y: auto;
}

.preset-list li {
    padding: 12px;
    margin: 5px 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
}

.preset-list li:hover {
    background: rgba(255, 215, 0, 0.3);
    /* Gold hover */
}

.preset-close {
    width: 100%;
    padding: 12px;
    background: #ffd700;
    /* Gold button */
    border: none;
    border-radius: 5px;
    color: black;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.preset-close:hover {
    background: #ffed4e;
    /* Lighter gold on hover */
}

.preset-close:active {
    transform: scale(0.98);
}

/* --- DISPO CONTROLS (Layout Snapshots) --- Même style/carrés que les 6
   cadenas (.lock-btn) juste en dessous, en continuité directe (même largeur
   de colonne, même espacement). --- */
#dispo-controls {
    position: fixed;
    /* 6 cadenas retirés : chaque ligne ne mesure plus que 32px (l'œil, seul
       élément restant) au lieu de 36px — recalculé pour rester en continuité
       directe avec eye-toggles (18 + 6*32 + 5*12 = 270, +12 d'écart = 282). */
    bottom: 282px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.dispo-btn {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: #888;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.dispo-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ccc;
}

.dispo-btn:active {
    transform: scale(0.95);
}

.dispo-btn.active-slot {
    color: #2ee6a0;
    background: rgba(46, 230, 160, 0.18);
}

.dispo-btn[data-filled] {
    color: #2ee6a0;
}

.dispo-btn.saved {
    background: #44cc44 !important;
    color: black !important;
}

/* --- PROGRAMMES (Pr1-Pr8) : bord droit, même carré/couleurs que les Dispos
   du bord gauche — appui long = sauvegarder, clic = charger/décharger. --- */
#programme-controls {
    position: fixed;
    bottom: 18px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.programme-btn {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: #888;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.programme-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ccc;
}

.programme-btn:active {
    transform: scale(0.95);
}

.programme-btn[data-filled] {
    color: #ffd700;
}

/* Lueur permanente selon l'instrument sauvegardé dans le slot (voir
   data-instrument, posé au moment de la sauvegarde) : jaune pour le Oud (6
   cordes), verte pour le Loutar (4 cordes) — reconnaissable d'un coup d'œil
   sans avoir à survoler le bouton. */
.programme-btn[data-instrument="oud"] {
    box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.65);
    border: 1px solid rgba(255, 215, 0, 0.5);
}

.programme-btn[data-instrument="loutar"] {
    box-shadow: 0 0 8px 2px rgba(68, 204, 68, 0.65);
    border: 1px solid rgba(68, 204, 68, 0.5);
}

.programme-btn.active-slot {
    color: #ffaa00;
    background: rgba(255, 170, 0, 0.15);
}

/* Retour visuel pendant l'appui long (avant que le seuil de sauvegarde soit atteint). */
.programme-btn.pressing {
    background: rgba(255, 170, 0, 0.35);
    color: #fff;
}

.programme-btn.saved {
    background: #44cc44 !important;
    color: black !important;
}

#dispo-context-menu {
    position: fixed;
    display: none;
    flex-direction: column;
    background: #1e1e1e;
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 6px;
    overflow: hidden;
    z-index: 99999;
    min-width: 150px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

#dispo-context-menu div {
    padding: 9px 14px;
    font-size: 13px;
    color: #eee;
    cursor: pointer;
    user-select: none;
}

#dispo-context-menu div:hover {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
}

/* --- MENUS FLOTTANTS « clavier » (MIDI externe + disposition AZERTY/QWERTY)
   ET « micro » (périphérique audio d'entrée) — même clic droit, même style. --- */
#clavier-menu,
#mic-menu,
#octave-menu {
    position: fixed;
    display: none;
    flex-direction: column;
    background: #000;
    border: 1px solid rgba(0, 204, 102, 0.5);
    border-radius: 6px;
    overflow: hidden;
    z-index: 99999;
    min-width: 220px;
    max-width: 300px;
    padding: 4px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

#clavier-menu .cm-titre,
#mic-menu .cm-titre,
#octave-menu .cm-titre {
    padding: 8px 14px 4px;
    font-size: 11px;
    color: #00cc66;
    font-weight: 700;
    letter-spacing: .5px;
}

#clavier-menu .cm-liste,
#mic-menu .cm-liste,
#octave-menu .cm-liste {
    display: flex;
    flex-direction: column;
}

/* Vert sur noir partout (pas seulement au survol/actif) — meilleure
   lisibilité que le gris clair précédent sur ce fond très sombre. */
#clavier-menu .cm-item,
#mic-menu .cm-item,
#octave-menu .cm-item {
    padding: 7px 14px;
    font-size: 13px;
    color: #7dffb0;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#clavier-menu .cm-item:hover,
#mic-menu .cm-item:hover,
#octave-menu .cm-item:hover {
    background: rgba(0, 204, 102, 0.25);
    color: #baffd8;
}

#clavier-menu .cm-item.cm-actif,
#mic-menu .cm-item.cm-actif,
#octave-menu .cm-item.cm-actif {
    color: #00ff88;
    font-weight: 700;
}

#clavier-menu .cm-vide,
#mic-menu .cm-vide,
#octave-menu .cm-vide {
    padding: 7px 14px;
    font-size: 12px;
    color: #4a9;
    font-style: italic;
}

#clavier-menu .cm-sep,
#mic-menu .cm-sep,
#octave-menu .cm-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

/* --- EYE TOGGLE PANEL (bottom-left) --- */
#eye-toggles {
    position: fixed;
    bottom: 18px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Cadenas retirés (les Dispos verrouillent déjà les positions des fenêtres) :
   les yeux prennent le même carré (taille, coins arrondis) qu'eux, seule leur
   couleur reste propre à la visibilité (or = visible, gris = masqué). */
.eye-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffd700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    user-select: none;
}

.eye-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.eye-btn:not(.active) {
    color: #666;
    opacity: 0.5;
}

/* Icône réduite à la taille du texte des boutons Dispo (font-size: 10px, voir
   .dispo-btn) — plus discrète, l'œil de 28px détonnait dans un carré 32px. */
.eye-btn svg {
    width: 20px;
    height: 20px;
}

/* Rangée horizontale, SOUS à-propos/reset/aide (2e rangée, alignée sur le
   même bord droit à 16px) plutôt qu'accolée dans la même rangée — sinon la
   rangée du haut s'étirait très loin vers la gauche, déséquilibrant les
   marges gauche/droite par rapport à la colonne étroite de gauche
   (Dispos/yeux). Même style (cercle 34px) que les 3 boutons du dessus. */
#volume-panel {
    position: fixed;
    top: 54px;
    right: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 10000;
}

#midi-btn,
#mic-btn,
#capture-son-btn,
#jins-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #14181c;
    border: 1px solid #2a6666;
    color: #c9962e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    user-select: none;
}

#generaliser-btn, #tonique-btn, #muet-btn {
    width: 34px; height: 34px; border-radius: 50%; background: #14181c; border: 1px solid #2a6666; color: #c9962e;
    display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none;
    font: 700 16px "Segoe UI", Arial, sans-serif; transition: background 0.2s, color 0.2s;
}
#generaliser-btn:active { background: rgba(0, 204, 102, 0.2); color: #00cc66; }
#tonique-btn { color: #ff5a5a; }
#tonique-btn:active { background: rgba(255, 0, 0, 0.2); color: #ff3030; }
#g-menu { position: fixed; z-index: 30000; min-width: 260px; padding: 4px 0; background: #14181c; border: 1px solid #2a6666; border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.6); font: 600 13px "Segoe UI", Arial, sans-serif; color: #e8f3ee; }
#g-menu .g-menu-item { padding: 7px 16px; cursor: pointer; white-space: nowrap; }
#g-menu .g-menu-item:hover { background: #1b2a2a; color: #4fd8d8; }
#muet-btn { color: #9fb3c8; }
#muet-btn.active { color: #fff; background: #b8432f; border-color: #ff7a5a; box-shadow: 0 0 10px rgba(255, 90, 60, 0.45); }
#midi-btn:hover,
#mic-btn:hover,
#capture-son-btn:hover,
#generaliser-btn:hover,
#tonique-btn:hover,
#muet-btn:not(.active):hover,
#jins-btn:hover {
    background: #1b2a2a;
    color: #4fd8d8;
}

#midi-btn.active {
    color: #00cc66;
    background: rgba(0, 204, 102, 0.15);
    box-shadow: 0 0 10px rgba(0, 204, 102, 0.4);
}

#mic-btn.active {
    color: #ff3333;
    background: rgba(255, 51, 51, 0.15);
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.4);
    animation: micPulse 1.5s infinite alternate;
}

/* --- Analyse de jins au micro (analyse-jins.js) --- */
#jins-btn { font-size: 17px; }
#jins-btn.active {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}
#jins-panel {
    --jp-zoom: 1;
    position: fixed;
    display: none;
    flex-direction: column;
    top: 112px; /* sous la barre du haut (micro, 〰, magnétisme restent accessibles) */
    right: 20px;
    width: 400px;
    min-width: 320px;
    min-height: 180px;
    max-width: 100vw;
    max-height: calc(100vh - 20px);
    z-index: 20001;
    background: #14181c;
    border: 1px solid #2a6666;
    border-radius: 8px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .75);
    color: #cfe;
    font-size: 12px;
}
#jins-panel .jp-tete {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 6px 8px 6px 12px;
    border-bottom: 1px solid #2a3838;
    color: #ffd700;
    font-weight: bold;
    cursor: move;
    user-select: none;
}
#jins-panel .jp-titre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#jins-panel .jp-tete button {
    background: none; border: 1px solid transparent; border-radius: 4px; color: #9bb;
    font-size: 12px; min-width: 26px; height: 24px; padding: 0 5px; cursor: pointer; font-weight: normal;
}
#jins-panel .jp-tete button:hover { color: #fff; border-color: #2a6666; background: rgba(79, 216, 216, .08); }
#jins-panel .jp-tete .jp-reset { color: #ffb08a; }
#jins-panel .jp-tete .jp-reset:hover { background: #6a2a20; border-color: #c85a40; }
#jins-panel .jp-tete .jp-fermer { color: #ff8888; font-size: 14px; }
#jins-panel .jp-tete .jp-fermer:hover { background: #c84040; border-color: #c84040; color: #fff; }
/* Corps : défile seul ; la taille du texte suit A− / A+ */
#jins-panel .jp-corps { padding: 8px 12px 12px; flex: 1; min-height: 0; overflow-y: auto; zoom: var(--jp-zoom); }
/* Plein écran : toute la fenêtre de l'appli */
#jins-panel.jp-plein-ecran { left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; max-width: none; max-height: none; border-radius: 0; }
#jins-panel.jp-plein-ecran .jp-poignee { display: none; }
#jins-panel.jp-plein-ecran .jp-corps { padding: 14px 24px 20px; }
/* Poignées de redimensionnement (bords et coins) */
#jins-panel .jp-poignee { position: absolute; z-index: 2; }
#jins-panel .jp-poignee[data-bord="n"]  { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
#jins-panel .jp-poignee[data-bord="s"]  { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
#jins-panel .jp-poignee[data-bord="w"]  { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
#jins-panel .jp-poignee[data-bord="e"]  { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
#jins-panel .jp-poignee[data-bord="nw"] { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
#jins-panel .jp-poignee[data-bord="ne"] { top: -3px; right: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
#jins-panel .jp-poignee[data-bord="sw"] { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
#jins-panel .jp-poignee[data-bord="se"] { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, #5a8a8a 50%, #5a8a8a 58%, transparent 58%, transparent 70%, #5a8a8a 70%, #5a8a8a 78%, transparent 78%); }
#jins-panel .jp-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
#jins-panel .jp-ligne label { color: #9bb; }
#jins-panel select,
#jins-panel button {
    background: #0d1014;
    color: #cfe;
    border: 1px solid #2a6666;
    border-radius: 5px;
    padding: 5px 9px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
#jins-panel button:disabled { opacity: .4; cursor: default; }
#jins-panel button.jp-actif { background: rgba(255, 157, 46, .2); border-color: #ff9d2e; color: #ffcc88; }
#jins-panel .jp-attente { color: #ff9d2e; }
#jins-panel .jp-passer { color: #4fd8d8; font-size: 11px; }
#jins-panel .jp-compte { color: #789; font-size: 11px; }
#jins-panel .jp-graphe { margin: 6px 0 2px; }
#jins-panel .jp-aide { color: #8aa; line-height: 1.5; }
#jins-panel .jp-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
#jins-panel .jp-table th { color: #9bb; font-weight: normal; text-align: left; border-bottom: 1px solid #2a3838; padding: 3px 4px; }
#jins-panel .jp-table td { padding: 3px 4px; border-bottom: 1px solid #1c2626; }
#jins-panel .jp-liste { margin: 2px 0 6px 16px; padding: 0; line-height: 1.5; }
#jins-panel .jp-premier { color: #ffd700; }
#jins-panel .jp-motif { color: #789; }

/* Mode « Manche cap » : les curseurs A D S R règlent l'enveloppe des sons réels captés */
.synth-controls.adsr-son-reel .adsr-slider label {
    color: #ff9d2e;
}

/* Commutateur « Capture du son avec ESPACE » (capture-son.js) — orange quand activé */
#capture-son-btn.active {
    color: #ff9d2e;
    background: rgba(255, 157, 46, 0.15);
    box-shadow: 0 0 10px rgba(255, 157, 46, 0.4);
}

@keyframes micPulse {
    0% {
        box-shadow: 0 0 5px rgba(255, 51, 51, 0.2);
    }

    100% {
        box-shadow: 0 0 15px rgba(255, 51, 51, 0.6);
    }
}

/* Magnétisme du micro (Sans/1/2/1/4/1/8) — même style compact que les
   anciens sélecteurs de périphérique (clavier/micro, retirés : leur choix se
   fait désormais par clic droit sur #midi-btn/#mic-btn, voir #clavier-menu
   et #mic-menu). Toujours affiché, libellés courts : pas besoin de s'élargir
   au survol comme les anciens sélecteurs (noms de périphériques, eux, longs). */
#mic-snap-select {
    background: #000;
    border: 1px solid rgba(0, 204, 102, 0.4);
    color: #7dffb0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 2px;
    border-radius: 6px;
    cursor: pointer;
    /* Assez large pour le plus long libellé ("1/32", "1/64") sans coupure —
       l'ancienne largeur (40px) tronquait déjà "1/4", illisible. */
    width: 60px;
    outline: none;
    transition: color 0.2s, border-color 0.2s;
}

#mic-snap-select:hover,
#mic-snap-select:focus {
    background: #000;
    border-color: rgba(0, 204, 102, 0.8);
    color: #00ff88;
}

/* La LISTE déroulante (au clic) suit le rendu natif de l'OS et ignore
   souvent le style du <select> fermé — vert sur noir explicite sur chaque
   <option> pour rester lisible (Chromium en tient compte, contrairement à
   d'autres moteurs). */
#mic-snap-select option {
    background: #000;
    color: #7dffb0;
}

/* Horizontale (rangée du haut, à côté de clavier/micro), au lieu de
   verticale (ancien emplacement en bas à gauche). */
#volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 90px;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffd700;
    border: 2px solid rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

#volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffd700;
    border: 2px solid rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

#volume-slider::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

#volume-icon {
    color: #ffd700;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- DRAWING CANVAS --- */
#drawing-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Assez haut pour rester au-dessus de tout le contenu de l'application
       (manche, synthé, timeline...) une fois le calque actif, quel que soit
       l'empilement local de tel ou tel panneau. */
    z-index: 8000;
    pointer-events: none;
}
/* Le curseur seulement : le blocage des clics (pointer-events) est décidé
   UNIQUEMENT par .layer-active ci-dessous — sinon choisir un outil rendait le
   canvas cliquant tout seul, et retirer le calque ensuite ne suffisait plus à
   redonner la main à l'application tant qu'un outil restait sélectionné. */
#drawing-canvas.draw-pencil {
    cursor: crosshair;
}
#drawing-canvas.draw-eraser {
    cursor: cell;
}
#drawing-canvas.draw-rect,
#drawing-canvas.draw-ellipse {
    cursor: crosshair;
}
#drawing-canvas.draw-plume {
    cursor: copy;
}
/* Calque activé (draw-layer-toggle) : bloque TOUS les clics sur l'appli,
   qu'un outil crayon/gomme soit choisi ou non — pour dessiner/pointer
   librement sans risquer d'actionner un bouton en dessous. */
#drawing-canvas.layer-active {
    pointer-events: all;
    cursor: crosshair;
}
/* Crayon / gomme : le pointeur est remplacé par un rond à la taille réelle
   du trait (#draw-cursor, voir app.js — comme dans Photoshop). */
#drawing-canvas.layer-active.curseur-rond {
    cursor: none;
}
#draw-cursor {
    position: fixed;
    display: none;
    box-sizing: border-box;
    border: 1.5px solid #ff8c00;
    border-radius: 50%;
    /* Ombre sombre de part et d'autre du contour : visible sur tous les fonds */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 8001;
}
/* Point central : repère précis, même pour les très petites tailles */
#draw-cursor::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 2px;
    margin: -1px 0 0 -1px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
#draw-cursor.gomme {
    border-style: dashed;
}

/* --- DRAWING TOOLS PANEL --- Rangée horizontale en haut, à gauche du bouton
   clavier (#midi-btn) — positionnée dynamiquement en JS (voir
   positionnerOutilsDessin dans app.js) pour rester juste à sa gauche quelle
   que soit la largeur variable de la rangée clavier/micro/volume. Même style
   rond (34px) que les autres boutons du haut (clavier, micro, à propos...). */
#drawing-tools {
    position: fixed;
    top: 12px;
    right: 400px; /* repli avant le premier calcul JS */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 10000;
}

.draw-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #14181c;
    border: 1px solid #2a6666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #c9962e;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    user-select: none;
}
.draw-btn:hover {
    background: #1b2a2a;
    color: #4fd8d8;
}
.draw-btn.active {
    background: rgba(255, 215, 0, 0.18);
    border-color: rgba(255, 215, 0, 0.6);
    color: #ffd700;
}

/* Horizontale, comme le reste de la rangée du haut. */
#draw-size {
    width: 68px;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    cursor: ns-resize;
}
#draw-size::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffd700;
    cursor: pointer;
    border: none;
}
#draw-size::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffd700;
    cursor: pointer;
    border: none;
}

/* Taille de l'icône clavier (20px, voir le SVG dans #midi-btn) plutôt que
   celle des boutons ronds (34px) : ce n'est qu'un indicateur de couleur, pas
   un bouton principal de la rangée. */
#draw-color-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    transition: border-color 0.15s, transform 0.15s;
}
#draw-color-btn:hover {
    border-color: #fff;
    transform: scale(1.1);
}

#draw-palette {
    position: absolute;
    /* Ouvre vers le BAS (la rangée est maintenant en haut de l'écran — vers
       le haut, le nuancier sortirait de la fenêtre). */
    top: calc(100% + 6px);
    right: 0;
    display: none;
    grid-template-columns: repeat(4, 26px);
    gap: 5px;
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9px;
    padding: 9px;
    z-index: 10000;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
#draw-palette.open {
    display: grid;
}

.palette-swatch {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: transform 0.12s, border-color 0.12s;
}
.palette-swatch:hover {
    transform: scale(1.2);
    border-color: rgba(255, 255, 255, 0.7);
}
.palette-swatch.selected {
    border: 2px solid #fff;
    transform: scale(1.15);
}
/* ==================== FENÊTRE 6 : TIMELINE AUDIO ==================== */
#timeline-container {
    width: 100%;
    position: relative;
    margin: 20px auto;
    box-sizing: border-box;
    /* Marge à gauche : réservée pour #tl-side-actions (boutons Lisser/Jouer
       la gamme/etc., empilés verticalement) — PAS pour #volume-panel
       (clavier/micro/volume), qui est maintenant en haut à droite. */
    padding: 10px 12px 12px 165px;
    background: rgba(15, 18, 22, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    transition: transform 0.1s ease-out, border-color 0.3s;
}

#timeline-container:hover {
    border-color: rgba(0, 204, 204, 0.45);
}

.tl-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tl-header button {
    background: #1a1e22;
    color: #c9962e;
    border: 1px solid #2a6666;
    border-radius: 5px;
    padding: 4px 9px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.tl-header button:hover {
    background: #004444;
    border-color: #c9962e;
}

#tl-filename {
    margin-left: 8px;
    font-size: 0.78rem;
    color: #8fc0c0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tl-canvas {
    display: block;
    width: 100%;
    height: 130px;
    background: #0d1014;
    border: 1px solid #2a3030;
    border-radius: 6px;
    cursor: text;
}

/* Boutons d'action sur les échantillons (Lisser/Jouer la gamme/Vers la
   ligne du ton/Vers le synthé/Original-Boucle) — dans la bande de gauche
   réservée par le padding-left de #timeline-container (165px), empilés
   verticalement plutôt que mêlés à la rangée des échantillons de #tl-bank. */
#tl-side-actions {
    position: absolute;
    left: 12px;
    top: 48px;
    width: 145px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}
#tl-side-actions > button {
    width: 100%;
    background: #1a1e22;
    color: #c9962e;
    border: 1px solid #2a6666;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 0.74rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
#tl-side-actions > button:hover { background: #004444; border-color: #c9962e; }
#tl-side-actions > button.actif { background: #253; border-color: #7dffb0; color: #7dffb0; }

#tl-loop.actif { background: #253; border-color: #7dffb0; color: #7dffb0; }

#tl-scrollbar {
    position: relative;
    height: 10px;
    margin-top: 5px;
    background: #12181c;
    border: 1px solid #232d2d;
    border-radius: 5px;
    cursor: pointer;
}

#tl-scroll-thumb {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0;
    width: 100%;
    background: #2a6666;
    border-radius: 4px;
    pointer-events: none;
}

#tl-info {
    margin-top: 6px;
    font-size: 0.76rem;
    color: #c9962e;
    font-family: 'Consolas', monospace;
    min-height: 1.1em;
}

/* ==================== DÉCALAGE DE LA GAMME (sous la ligne de l'octave) ==================== */
#octave-shift-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
    user-select: none;
}

#octave-shift-bar button {
    background: rgba(20, 26, 30, 0.9);
    color: #c9962e;
    border: 1px solid #2a6666;
    border-radius: 6px;
    width: 40px;
    height: 26px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#octave-shift-bar button:hover {
    background: #004444;
    border-color: #f0c14b;
    color: #f0c14b;
}

#octave-shift-bar button:active {
    background: #006666;
    transform: translateY(1px);
}

#octave-line-note-lock-btn.locked {
    color: #44ff44;
    border-color: #44ff44;
    background: rgba(68, 255, 68, 0.12);
}

#oct-shift-label {
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: #557777;
    min-width: 38px;
    text-align: center;
}


/* ==================== RAPPORT D ANALYSE ==================== */
#tl-report {
    margin-top: 10px;
    max-height: 340px;
    overflow-y: auto;
    background: #0d1014;
    border: 1px solid #2a3030;
    border-radius: 6px;
}

#tl-report-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 12px;
    background: #141b1f;
    border-bottom: 1px solid #2a3030;
    color: #c9962e; font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase;
}

#tl-report-close {
    background: #1a1e22; color: #ff8888; border: 1px solid #994444;
    border-radius: 5px; padding: 2px 8px; cursor: pointer; font-size: 0.8rem;
}
#tl-report-close:hover { background: #552222; color: #ffaaaa; }

#tl-report-body { padding: 10px 14px 16px; color: #c8d4d4; font-size: 0.78rem; }
#tl-report-body h2 {
    color: #c9962e; font-size: 0.84rem; font-weight: 500;
    margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #223030;
}
#tl-report-body h2:first-child { margin-top: 2px; }
#tl-report-body table { border-collapse: collapse; width: 100%; margin: 4px 0 8px; }
#tl-report-body th, #tl-report-body td {
    border: 1px solid #223030; padding: 3px 7px; text-align: left; font-variant-numeric: tabular-nums;
}
#tl-report-body thead th { background: #141b1f; color: #7fd0d0; font-weight: 600; }
#tl-report-body table.rp-info th { background: #101619; color: #8aa; width: 34%; font-weight: 600; }
#tl-report-body td.rp-micro { color: #ff8866; font-weight: 600; }
#tl-report-body .rp-note { font-size: 0.72rem; color: #557777; font-style: italic; margin: 2px 0 8px; }
#tl-report-body .rp-vide { color: #ff8866; }
#tl-analyse, #tl-pdf { white-space: nowrap; }
#tl-pdf:disabled { opacity: 0.4; cursor: default; }
#tl-pdf:disabled:hover { background: #1a1e22; border-color: #2a6666; color: #c9962e; }

#tl-report-body .rp-ton-btn {
    background: #1a1e22; color: #c9962e; border: 1px solid #2a6666;
    border-radius: 4px; padding: 1px 7px; font-size: 0.68rem; cursor: pointer;
}
#tl-report-body .rp-ton-btn:hover { background: #004444; border-color: #f0c14b; color: #f0c14b; }
#tl-report-body .rp-ton { color: #ffd700; font-size: 0.7rem; font-weight: 600; }

#tl-selclear:disabled { opacity: 0.4; cursor: default; }
#tl-selclear:disabled:hover { background: #1a1e22; border-color: #2a6666; color: #c9962e; }

/* ---- Banque d'échantillons (fenêtre timeline) ---- */
#tl-bank {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(68, 255, 136, 0.06);
    border: 1px solid rgba(68, 255, 136, 0.25);
    border-radius: 4px;
}
#tl-bank .smp-titre { color: #7dffb0; font-size: 11px; font-weight: bold; margin-right: 4px; }
#tl-bank .smp-aide  { color: #6a8; font-size: 10px; margin-left: 6px; }
.smp-puce {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px 2px 2px;
    background: #1a2420;
    border: 1px solid rgba(68, 255, 136, 0.35);
    border-radius: 3px;
    font-size: 11px;
    color: #cfe;
}
.smp-puce kbd {
    background: #2c3a34;
    border: 1px solid #4a6;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    color: #7dffb0;
}
.smp-puce b { color: #ffd700; }
.smp-puce button,
#tl-bank > button {
    background: #223;
    color: #9cf;
    border: 1px solid #456;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    padding: 1px 5px;
}
.smp-puce button:hover,
#tl-bank > button:hover { background: #345; color: #fff; }

#smp-boucle { border-color: #684; color: #cb6; }
#smp-boucle.actif { background: #253; border-color: #7dffb0; color: #7dffb0; }

.smp-puce { cursor: pointer; }
.smp-puce.actif { background: #1e3a2c; border-color: #7dffb0; box-shadow: 0 0 0 1px #7dffb0; }
.smp-puce i { color: #6a9; font-style: normal; font-size: 10px; }

.smp-puce { flex-direction: column; align-items: stretch; gap: 2px; }
.smp-ligne { display: flex; align-items: center; gap: 3px; }
.smp-puce em { color: #6a9; font-style: normal; font-size: 10px; }
.smp-vars { display: flex; gap: 3px; justify-content: center; padding-top: 1px; }
.smp-vars i {
    width: 7px; height: 7px; border-radius: 50%;
    background: #2c3a34; border: 1px solid #4a6;
    cursor: pointer; display: inline-block;
}
.smp-vars i.on { background: #ff9d2e; border-color: #ffc27a; box-shadow: 0 0 4px #ff9d2e; }
.smp-vars i:hover { border-color: #7dffb0; }

#smp-synthe { background: #2a2340; border-color: #75f; color: #cbf; }
#smp-synthe:hover { background: #3a3160; color: #fff; }
#tl-reset { background: #3a2424; border-color: #955; color: #fbb; }

/* ==================== JOUER LA GAMME — pads ==================== */
#tl-scales {
    margin-top: 10px;
    max-height: 340px;
    overflow-y: auto;
    background: #0d1014;
    border: 1px solid #2a4030;
    border-radius: 6px;
}
#tl-scales-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    background: #121f17;
    border-bottom: 1px solid #2a4030;
    color: #7dffb0; font-size: 0.8rem; letter-spacing: .5px;
}
#tl-scales-head span { flex: 1; }
#tl-scales-head button {
    background: #1a2a20; color: #7dffb0; border: 1px solid #3a5a44;
    border-radius: 5px; padding: 2px 9px; cursor: pointer; font-size: 0.78rem;
}
#tl-scales-head button:hover { background: #24402f; color: #fff; }

#tl-scales-body { padding: 8px 12px 14px; }
.tl-sc-cat {
    color: #7fd0d0; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 1px; margin: 10px 0 5px;
}
.tl-sc-cat:first-child { margin-top: 2px; }
.tl-sc-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tl-sc-item {
    background: #16201a; color: #cfe; border: 1px solid #34503f;
    border-radius: 5px; padding: 5px 10px; cursor: pointer; font-size: 0.78rem;
}
.tl-sc-item:hover { background: #24402f; border-color: #7dffb0; color: #fff; }

#tl-pads {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 12px;
}
.tl-pad {
    width: 62px; height: 62px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    background: linear-gradient(#1c2a22, #14201a);
    border: 1px solid #3a5a44; border-radius: 7px;
    color: #cfe; cursor: pointer;
    user-select: none; -webkit-user-select: none;
    transition: transform .04s, background .08s;
}
.tl-pad:hover { border-color: #7dffb0; }
.tl-pad.on {
    background: linear-gradient(#ff9d2e, #e07a10);
    border-color: #ffc27a; color: #201004;
    transform: translateY(1px);
}
.tl-pad.tonique { border-color: #7dffb0; box-shadow: inset 0 0 0 1px #7dffb0; }
.tl-pad .pad-deg { font-size: 1.05rem; font-weight: 700; }
.tl-pad .pad-nom { font-size: 0.66rem; opacity: .85; }
.tl-pad .pad-key {
    font-size: 0.6rem; background: #0d1a12; border: 1px solid #3a5a44;
    border-radius: 3px; padding: 0 4px; color: #7dffb0;
}
.tl-pad.on .pad-key { background: #fff3; border-color: #201004; color: #201004; }
.tl-pads-aide { padding: 0 12px 12px; color: #6a9; font-size: 0.72rem; }

#smp-gamme { background: #1f3320; border-color: #4a7; color: #bfc; }
#smp-gamme:hover { background: #2f5030; color: #fff; }

/* ==================== BOUTON REC (capture micro) ==================== */
.tl-rec {
    background: #3a1414 !important;
    border: 1px solid #a33 !important;
    color: #ff6b6b !important;
    font-weight: 700;
}
.tl-rec:hover { background: #521c1c !important; color: #ff9090 !important; }
.tl-rec.rec-on {
    background: #d02020 !important;
    border-color: #ff6b6b !important;
    color: #fff !important;
    animation: recpulse 1s ease-in-out infinite;
}
@keyframes recpulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 60, 60, 0); }
}

#smp-toline { background: #1f2b33 !important; border-color: #4a7a8a !important; color: #bfe !important; }
#smp-toline:hover { background: #2b3f4a !important; color: #fff !important; }

/* ==================== AIDE / PRISE EN MAIN ==================== */
#help-btn {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 10000;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #2a6666;
    background: #14181c;
    color: #c9962e;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
#help-btn:hover { background: #1b2a2a; color: #4fd8d8; }

#about-btn {
    position: fixed;
    top: 12px;
    right: 100px;
    z-index: 10000;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #2a6666;
    background: #14181c;
    color: #c9962e;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
#about-btn:hover { background: #1b2a2a; color: #4fd8d8; }

#app-reset-btn {
    position: fixed;
    top: 12px;
    right: 58px;
    z-index: 10000;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #663333;
    background: #14181c;
    color: #ff6666;
    font-size: 1.05rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
#app-reset-btn:hover { background: #2a1414; color: #ff9999; }

#help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
#help-overlay.hidden { display: none; }

#help-box {
    width: 100%;
    max-width: 860px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #14181c;
    border: 1px solid #2a6666;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

#help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #171d21;
    border-bottom: 1px solid #253535;
    flex: 0 0 auto;
}
#help-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c9962e;
}
#help-close {
    background: #1a1e22;
    color: #ff8888;
    border: 1px solid #994444;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.9rem;
}
#help-close:hover { background: #552222; color: #ffaaaa; }

/* « À propos » réutilise l'habillage #help-overlay/#help-box, seul le
   contenu interne a ses propres id (about-head/about-close/about-body). */
#about-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #171d21;
    border-bottom: 1px solid #253535;
    flex: 0 0 auto;
}
#about-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c9962e;
}
#about-close {
    background: #1a1e22;
    color: #ff8888;
    border: 1px solid #994444;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.9rem;
}
#about-close:hover { background: #552222; color: #ffaaaa; }
#about-body {
    padding: 18px 24px 26px;
    overflow-y: auto;
    color: #c8d4d4;
    font-size: 0.86rem;
    line-height: 1.65;
}
#about-body h3 {
    color: #c9962e;
    font-size: 0.98rem;
    font-weight: 500;
    margin: 22px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #223030;
}
#about-body b { color: #e6f0f0; font-weight: 600; }

#help-body {
    padding: 18px 24px 26px;
    overflow-y: auto;
    color: #c8d4d4;
    font-size: 0.86rem;
    line-height: 1.65;
}
#help-body .help-intro {
    color: #9fc4c4;
    background: #101619;
    border-left: 3px solid #c9962e;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 18px;
}
#help-body h3 {
    color: #c9962e;
    font-size: 0.98rem;
    font-weight: 500;
    margin: 22px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #223030;
}
#help-body h4 {
    color: #7fd0d0;
    font-size: 0.86rem;
    font-weight: 600;
    margin: 14px 0 6px;
}
#help-body ul, #help-body ol { margin: 6px 0 10px; padding-left: 22px; }
#help-body li { margin: 4px 0; }
#help-body ul ul { margin: 4px 0; }
#help-body b { color: #e6f0f0; font-weight: 600; }
#help-body i { color: #a8bcbc; }
#help-body sup { font-size: 0.7em; }
#help-body kbd {
    display: inline-block;
    padding: 1px 6px;
    background: #1a1e22;
    border: 1px solid #2a3838;
    border-radius: 3px;
    font-size: 0.76rem;
    color: #8fc0c0;
    margin: 0 1px;
}
.help-mono {
    font-family: 'Consolas', monospace;
    color: #c9962e;
    background: #101619;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.82em;
}
table.help-keys { border-collapse: collapse; margin: 8px 0; width: 100%; }
table.help-keys td {
    border: 1px solid #223030;
    padding: 5px 10px;
    vertical-align: top;
}
table.help-keys td:first-child { white-space: nowrap; width: 1%; background: #101619; }

/* Annexe · Classification des gammes par intervalles */
table.help-scale-table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 0.85rem; }
table.help-scale-table th,
table.help-scale-table td {
    border: 1px solid #223030;
    padding: 5px 10px;
    vertical-align: top;
    text-align: left;
}
table.help-scale-table th { background: #14181c; color: #c9962e; }
table.help-scale-table td:first-child { white-space: nowrap; width: 1%; background: #101619; color: #7fd8b0; font-family: monospace; }

/* pads du mode PAD (ligne du ton) */
#sl-pads button:active { filter: brightness(1.7); }

/* Curseur de sensibilité (détail) dans l'en-tête de la timeline */
#tl-detail-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #1a1e22;
    border: 1px solid #2a6666;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 0.8rem;
    color: #c9962e;
}
#tl-detail {
    width: 84px;
    accent-color: #c9962e;
    cursor: pointer;
    margin: 0;
}
#tl-detail-val {
    min-width: 52px;
    color: #7fd0d0;
    font-size: 0.74rem;
}

/* ==================== POINTEURS DE PRÉSENTATION (curseurs.js) ==================== */
#curseur-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: #14181c; border: 1px solid #2a6666; color: #c9962e;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; user-select: none; transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
#curseur-btn:hover { background: #1b2a2a; color: #4fd8d8; }
#curseur-btn.active { color: #ffd400; background: rgba(255, 212, 0, 0.14); box-shadow: 0 0 10px rgba(255, 212, 0, 0.45); }

/* Le curseur système est caché quand le pointeur le remplace (flèches, main, laser) */
html.curseur-cache, html.curseur-cache * { cursor: none !important; }

#curseur-calque { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; overflow: hidden; }
#curseur-calque .cc-dessin { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
#curseur-calque .cc-dessin svg { display: block; }
#curseur-calque .cc-voile { position: absolute; inset: 0; display: none; }
/* Laser : point rouge lumineux + traînée */
#curseur-calque .cc-laser {
    width: calc(16px * var(--cc-k)); height: calc(16px * var(--cc-k)); border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #fff 0, #ff4040 30%, #e00000 60%, rgba(255, 0, 0, 0) 72%);
    box-shadow: 0 0 calc(14px * var(--cc-k)) calc(5px * var(--cc-k)) rgba(255, 30, 30, 0.75);
}
#curseur-calque .cc-traine {
    position: absolute; left: 0; top: 0; opacity: 0;
    width: calc(9px * var(--cc-k)); height: calc(9px * var(--cc-k)); margin: calc(-4.5px * var(--cc-k)) 0 0 calc(-4.5px * var(--cc-k));
    border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 8px 3px rgba(255, 30, 30, 0.6);
}
/* Halo : anneau jaune lumineux autour du curseur (le curseur normal reste visible) */
#curseur-calque .cc-halo {
    width: calc(64px * var(--cc-k)); height: calc(64px * var(--cc-k)); border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 212, 0, 0.22);
    border: calc(3px * var(--cc-k)) solid rgba(255, 212, 0, 0.95);
    box-shadow: 0 0 18px rgba(255, 212, 0, 0.55);
}
#curseur-calque.cc-halo .cc-dessin, #curseur-calque.cc-projecteur .cc-dessin { filter: none; }
/* Onde à chaque clic */
#curseur-calque .cc-onde {
    position: absolute; width: calc(70px * var(--cc-k)); height: calc(70px * var(--cc-k));
    margin: calc(-35px * var(--cc-k)) 0 0 calc(-35px * var(--cc-k));
    border-radius: 50%; border: calc(4px * var(--cc-k)) solid #ffd400;
    animation: cc-onde 0.6s ease-out forwards;
}
#curseur-calque .cc-onde-laser { border-color: #ff3030; }
#curseur-calque .cc-onde-fleche-blanche { border-color: #ffffff; }
@keyframes cc-onde { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* Menu de choix */
#curseur-menu {
    display: none; position: fixed; z-index: 2147482000; width: 270px;
    background: #14181c; border: 1px solid #2a6666; border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.75); padding: 8px; color: #cfe; font-size: 13px;
}
#curseur-menu .cm-titre { color: #ffd700; font-weight: bold; padding: 2px 6px 6px; }
#curseur-menu .cm-style {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: 1px solid transparent; border-radius: 5px; color: #cfe;
    padding: 6px 8px; font: inherit; cursor: pointer;
}
#curseur-menu .cm-style:hover { background: rgba(79, 216, 216, 0.1); }
#curseur-menu .cm-style.actif { border-color: #ffd400; background: rgba(255, 212, 0, 0.12); color: #ffe680; }
#curseur-menu .cm-icone { width: 22px; text-align: center; font-size: 16px; }
#curseur-menu .cm-sep { height: 1px; background: #2a3838; margin: 6px 0; }
#curseur-menu .cm-ligne { display: flex; align-items: center; gap: 4px; padding: 4px 6px; color: #9bb; flex-wrap: wrap; }
#curseur-menu .cm-taille { background: #0d1014; color: #cfe; border: 1px solid #2a6666; border-radius: 4px; padding: 3px 7px; font: inherit; font-size: 12px; cursor: pointer; }
#curseur-menu .cm-taille.actif { border-color: #ffd400; color: #ffe680; }
#curseur-menu .cm-coche { cursor: pointer; }
#curseur-menu .cm-aide { color: #789; font-size: 11px; padding: 4px 6px 2px; }

/* ==================== AFFICHAGE DU MANCHE : 6 LED (affichage-manche.js) ==================== */
/* Colonne au-dessus des boutons D1–D5 (#dispo-controls : bottom 282px,
   5 boutons de 32px + 4 écarts de 12px = 208px → haut à 490px). */
#led-affichage {
    position: fixed;
    left: 16px;
    bottom: 504px;
    width: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;            /* 10 LED : même hauteur de colonne qu'avec 9 */
    z-index: 9999;
}
#led-affichage .led-aff {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    background: #2a2f33;
    border: 1px solid #44505a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
    transition: background 0.15s, box-shadow 0.15s;
}
#led-affichage .led-aff.allumee {
    background: var(--led);
    border-color: var(--led);
    box-shadow: none;
}
#led-affichage .led-aff:hover { transform: scale(1.2); }
#led-affichage .led-num {
    position: absolute;
    left: 19px;
    top: -1px;
    font-size: 10px;
    line-height: 14px;
    color: #6f7d85;
    pointer-events: none;
    user-select: none;
}
#led-affichage .led-aff.allumee .led-num { color: #b8c4ca; }

/* Éléments masqués (classe posée sur <html>) */
html.masque-ligne #strings-svg .playable-interval { display: none; }
html.masque-cordes #strings-svg line.string { display: none; }
html.masque-quarts #strings-svg .quarter-tone-line,
html.masque-quarts #strings-svg .fret-line { display: none; }
html.masque-sillet #strings-svg #cordelette-nut,
html.masque-sillet #strings-svg .tie-line { display: none; }
html.masque-accordage #strings-svg text[id^="label-string-"],
html.masque-accordage #accordage-arrow-btn { visibility: hidden; }
html.masque-calculateur #fret-calc-section { visibility: hidden; }
/* LED 10 : la description (« Proche de »…) disparaît, le nom de la gamme reste */
html.masque-description #scale-match-display { display: none; }

/* ==================== VISIONNEUSE (fenêtre webcam : visionneuse.js) ==================== */
/* La fenêtre garde sa largeur réglable (poignée en bas à droite) ; la barre
   est au-dessus, l'écran garde le format 16:9. */
#webcam-container {
    aspect-ratio: auto;
    flex-direction: column;
    width: 420px;
    container-type: inline-size;
}
#visio-barre {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px 6px;
    background: #14181c;
    border-bottom: 1px solid #2a3838;
    flex: none;
}
#visio-barre button {
    background: #0d1014;
    color: #cfe;
    border: 1px solid #2a6666;
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
    white-space: nowrap;
}
#visio-barre button:hover { background: #1b2a2a; color: #fff; }
#visio-barre .visio-mode.actif { background: rgba(255, 215, 0, 0.16); border-color: #ffd700; color: #ffe680; }
#visio-barre .visio-txt { display: none; font-size: 12px; }
@container (min-width: 560px) { #visio-barre .visio-txt { display: inline; } }
#visio-barre .visio-nav { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
#visio-barre .visio-outils { display: inline-flex; gap: 4px; }
#visio-barre.sans-fichiers .visio-nav,
#visio-barre.sans-fichiers #visio-ouvrir { display: none; }
#visio-barre.sans-fichiers .visio-outils { margin-left: auto; }
#visio-pos { color: #9bb; font-size: 12px; min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }

#visio-ecran {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}
#visio-ecran > video, #visio-ecran > img, #visio-audio { display: none; }
#visio-ecran[data-mode="webcam"] #webcam-video { display: block; }
#visio-ecran[data-mode="photo"] #visio-image[src] { display: block; }
#visio-ecran[data-mode="video"] #visio-video { display: block; }
#visio-ecran[data-mode="audio"] #visio-audio { display: flex; }
#visio-image, #visio-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
#visio-audio {
    position: absolute; inset: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: radial-gradient(circle at 50% 40%, #1d2a2a 0, #0a0d10 70%);
    padding: 12px;
}
#visio-audio .visio-audio-icone { font-size: 46px; line-height: 1; opacity: 0.85; }
#visio-audio .visio-audio-titre { color: #ffd700; font-size: 15px; text-align: center; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#visio-audio audio { width: 88%; }
#visio-message {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center; text-align: center;
    padding: 14px; color: #9bb; font-size: 12px; line-height: 1.5; white-space: pre-line;
    background: rgba(0, 0, 0, 0.75);
}
#visio-legende {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 3px 8px; font-size: 11px; color: #cfe; text-align: left;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#visio-ecran[data-mode="webcam"] #visio-legende,
#visio-ecran[data-mode="video"] #visio-legende,
#visio-ecran[data-mode="audio"] #visio-legende { display: none; }

/* Plein écran : la barre reste en haut, l'écran prend tout le reste */
#webcam-container.visio-plein-ecran {
    position: fixed !important; inset: 0; z-index: 30000;
    width: 100vw !important; height: 100vh; margin: 0; border: none; border-radius: 0;
    display: flex !important; transform: none !important; background: #000;
}
#webcam-container.visio-plein-ecran #visio-ecran { flex: 1; aspect-ratio: auto; height: auto; }
#webcam-container.visio-plein-ecran .resize-handle { display: none; }
#webcam-container.visio-plein-ecran #visio-legende { font-size: 14px; padding: 6px 14px; }
#webcam-container.visio-plein-ecran .visio-txt { display: inline; }

/* ==================== VISIONNEUSE : TABLEAU + DESSIN EN PLEIN ÉCRAN ==================== */
#visio-fond { display: none; background: #0d1014; color: #cfe; border: 1px solid #2a6666; border-radius: 5px; padding: 3px 5px; font-size: 12px; }
#visio-barre.mode-tableau #visio-fond { display: inline-block; }
#visio-barre.mode-tableau #visio-dossier { display: none; }
#visio-tableau { display: none; position: absolute; inset: 0; }
#visio-ecran[data-mode="tableau"] #visio-tableau { display: block; }
#visio-ecran[data-mode="tableau"] #visio-legende { display: none; }
#visio-tableau[data-fond="blanc"] { background: #fbfbf8; }
#visio-tableau[data-fond="noir"] { background: #121416; }
#visio-tableau[data-fond="vert"] { background: radial-gradient(ellipse at 50% 40%, #2f5a45 0, #234536 70%, #1d3a2d 100%); }
#visio-tableau[data-fond="quadrille"] {
    background-color: #fbfbf8;
    background-image: linear-gradient(#cfdbe6 1px, transparent 1px), linear-gradient(90deg, #cfdbe6 1px, transparent 1px);
    background-size: 24px 24px;
}
/* Portée : groupes de 5 lignes (interligne 12 px), un groupe tous les 112 px */
#visio-tableau[data-fond="portee"] {
    background-color: #fbfbf8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='112'%3E%3Cg stroke='%23555' stroke-width='1'%3E%3Cline x1='0' y1='28.5' x2='8' y2='28.5'/%3E%3Cline x1='0' y1='40.5' x2='8' y2='40.5'/%3E%3Cline x1='0' y1='52.5' x2='8' y2='52.5'/%3E%3Cline x1='0' y1='64.5' x2='8' y2='64.5'/%3E%3Cline x1='0' y1='76.5' x2='8' y2='76.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-position: 0 0;
}

/* Plein écran de la visionneuse : la toile et les outils de dessin, le
   pointeur et son menu passent AU-DESSUS (la visionneuse est à 30000) ;
   les outils descendent sous la barre de la visionneuse. */
html.visio-plein #drawing-canvas { z-index: 30010; }
html.visio-plein #draw-cursor { z-index: 30030 !important; }
html.visio-plein #drawing-tools { z-index: 30020; top: 44px !important; }
html.visio-plein #curseur-menu { z-index: 30040; }
html.visio-plein #drawing-tools { background: rgba(20, 24, 28, 0.88); padding: 4px 10px; border-radius: 24px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }

/* Raccourcis clavier (raccourcis.js) : petit message en bas de l'écran */
#raccourci-msg {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
    z-index: 2147482500; pointer-events: none;
    padding: 6px 14px; border-radius: 6px; font-size: 13px;
    background: #14181c; color: #cfe; border: 1px solid #2a6666;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    opacity: 0; transition: opacity 0.25s;
}
#raccourci-msg.visible { opacity: 1; }
table.help-keys th { text-align: left; padding: 10px 6px 4px; color: #ffd700; font-size: 13px; border-bottom: 1px solid #2a3838; }

/* Visionneuse active : elle reçoit les flèches ← → du clavier */
#webcam-container.visio-active { border-color: #ffd700; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.5); }

/* ==================== OBJETS DE DESSIN + MANIPULATEUR (objets-dessin.js) ==================== */
#calque-objets { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 8000; pointer-events: none; overflow: visible; }
#calque-objets.od-manip { pointer-events: all; cursor: default; }
#calque-objets .od-prise { pointer-events: none; }
#calque-objets.od-manip .od-prise { pointer-events: all; cursor: move; }
#calque-objets .od-cadre { fill: none; stroke: #1e90ff; stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
#calque-objets .od-lien { stroke: #1e90ff; stroke-width: 1.2; pointer-events: none; }
#calque-objets .od-poignee { fill: #fff; stroke: #1e90ff; stroke-width: 1.5; pointer-events: all; }
#calque-objets .od-rotation { fill: #1e90ff; stroke: #fff; stroke-width: 1.5; pointer-events: all; cursor: grab; }
html.visio-plein #calque-objets { z-index: 30012; }
#draw-manip.active { color: #1e90ff; }

/* Grille magnétique du tableau (menu Tableau de la visionneuse) */
#visio-grille { display: none; position: absolute; inset: 0; pointer-events: none; }   /* (plus de fond « fixe » : très coûteux à redessiner) */
#visio-barre .visio-grille-l, #visio-barre #visio-maille, #visio-barre #visio-maille-v { display: none; }
#visio-barre.mode-tableau .visio-grille-l { display: inline-flex; align-items: center; gap: 3px; color: #cfe; font-size: 12px; cursor: pointer; }
#visio-barre.mode-tableau.grille-on #visio-maille { display: inline-block; width: 80px; accent-color: #ffd700; }
#visio-barre.mode-tableau.grille-on #visio-maille-v { display: inline-block; color: #9bb; font-size: 11px; min-width: 38px; }

/* Outil texte (objets-dessin.js) : zone de saisie posée sur le dessin */
.od-saisie {
    position: fixed; z-index: 8100; margin: 0; padding: 0;
    background: rgba(255, 255, 255, 0.04); border: 1px dashed #1e90ff; outline: none;
    resize: none; overflow: hidden; white-space: pre; caret-color: #1e90ff;
}
html.visio-plein .od-saisie { z-index: 30015; }
#drawing-canvas.draw-texte { cursor: text; }
#draw-texte.active { color: #1e90ff; }

/* Outil texte : police et taille (palette de dessin), symboles musicaux SMuFL */
#texte-reglages { display: none; align-items: center; gap: 4px; position: relative; }
#texte-reglages select, #texte-reglages input {
    background: #0d1014; color: #cfe; border: 1px solid #2a6666; border-radius: 5px;
    font-size: 12px; height: 26px; padding: 0 4px;
}
#texte-reglages select { max-width: 150px; }
#texte-reglages input { width: 52px; }
#texte-symboles {
    width: 30px; height: 30px; border-radius: 50%; background: #14181c; border: 1px solid #2a6666;
    color: #ffd700; font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
}
#texte-grille-symboles {
    display: none; position: absolute; top: 40px; left: 0; z-index: 2;
    width: 352px; padding: 6px; gap: 4px; flex-wrap: wrap;
    background: #14181c; border: 1px solid #2a6666; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
#texte-grille-symboles.ouvert { display: flex; }
#texte-grille-symboles button {
    width: 38px; height: 46px; background: #fbfbf8; color: #111; border: 1px solid #44525a; border-radius: 4px;
    font-size: 26px; line-height: 46px; padding: 0; cursor: pointer; overflow: visible; font-family: inherit;
}
#texte-grille-symboles button:hover { background: #ffe680; }

/* Monocorde dans le tableau de la visionneuse (monocorde.js) */
#visio-barre #visio-mono { display: none; }
#visio-barre.mode-tableau #visio-mono { display: inline-flex; align-items: center; }
#visio-barre #visio-mono.actif { background: rgba(46, 230, 160, 0.18); color: #2ee6a0; border-color: #2ee6a0; }
#monocorde { display: none; position: absolute; inset: 0; }
#visio-ecran[data-mode="tableau"] #monocorde.on { display: block; }
#monocorde .mc-champ { position: absolute; display: inline-flex; align-items: center; gap: 6px; font: 600 13px "Segoe UI", Arial, sans-serif;
    color: #e8f3ee; background: rgba(13, 20, 24, 0.84); border: 1px solid #2a6666; border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
#monocorde .mc-champ .mc-titre { min-width: 0; color: #bcd; }
#monocorde .mc-champ input, #monocorde .mc-champ select { background: #0d1014; color: #ffd700; border: 1px solid #2a6666; border-radius: 4px;
    padding: 2px 6px; font: 700 14px "Segoe UI", Arial, sans-serif; }
#monocorde .mc-champ input { width: 78px; }
#monocorde .mc-champ input[readonly] { color: #9fe8c8; border-color: #23484a; }
#monocorde .mc-note input { width: 118px; color: #2ee6a0; }
#monocorde .mc-champ .mc-cents { color: #9bb; font-size: 12px; min-width: 34px; }
#monocorde .mc-champ.mc-vide { opacity: .6; }
#monocorde.mc-manip .mc-champ { outline: 1px dashed #1e90ff; outline-offset: 2px; cursor: move; }
#monocorde.mc-manip .mc-champ * { pointer-events: none; }
#monocorde .mc-champ.mc-deplace { box-shadow: 0 0 0 2px #1e90ff; }

#monocorde .mc-pdf button { background: #0d1014; color: #cfe; border: 1px solid #2a6666; border-radius: 4px; padding: 2px 8px; font: 700 13px "Segoe UI", Arial, sans-serif; cursor: pointer; }
#monocorde .mc-pdf button:hover { background: #1b2a2a; }
#monocorde .mc-pdf .mc-pdf-on.on { background: #7a1616; color: #fff; border-color: #ff5a5a; }
#monocorde .mc-pdf .mc-pdf-nb { color: #9bb; font-size: 12px; }
#monocorde .mc-aff select { width: auto; }
#monocorde .mc-pyth { flex-wrap: wrap; max-width: 560px; white-space: normal; }
#monocorde .mc-pyth button { background: #0d1014; color: #ffd700; border: 1px solid #2a6666; border-radius: 4px; padding: 3px 10px; font: 700 13px "Segoe UI", Arial, sans-serif; cursor: pointer; }
#monocorde .mc-pyth button:hover { background: #1b2a2a; }
#monocorde .mc-pyth button.attente { background: #7a4a00; color: #fff; border-color: #ffb347; }
#monocorde .mc-pyth .mc-py-msg { flex-basis: 100%; font-weight: 500; font-size: 13px; color: #e8f3ee; line-height: 1.35; }
#monocorde .mc-pyth .mc-py-nom { cursor: pointer; color: #ffd700; text-decoration: underline dotted; pointer-events: all; }
#monocorde .mc-pyth .mc-py-nom:hover { color: #2ee6a0; }

/* Graduation turque (bouton « 53 ») : 53 commas au lieu des 1/2 et 1/4 de ton */
line.comma-line { display: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 0.5; vector-effect: non-scaling-stroke; pointer-events: none; }
line.comma-line.comma-ton { stroke: rgba(0, 0, 0, 0.45); stroke-width: 1; }
html.grille-turque #strings-svg .fret-line,
html.grille-turque #strings-svg .quarter-tone-line { display: none; }
html.grille-turque #strings-svg .comma-line { display: inline; }
#grille-turque-btn { margin-left: 6px; padding: 1px 7px; background: #0d1014; color: #c9962e; border: 1px solid #2a6666; border-radius: 4px; font: 700 12px "Segoe UI", Arial, sans-serif; cursor: pointer; }
#grille-turque-btn.active { background: rgba(46, 230, 160, 0.18); color: #2ee6a0; border-color: #2ee6a0; }
html.masque-bandes #strings-svg .dark-interval { display: none; }

/* Liste des catégories de gammes : défile (plus de 25 groupes culturels) */
#scale-lib-menu { max-height: calc(100vh - 40px); overflow-y: auto; }

/* Fiche didactique de la visionneuse (légende .txt du même nom) */
#visio-fiche { display: none; position: absolute; left: 3%; right: 3%; bottom: 4%; max-height: 42%; overflow-y: auto; z-index: 3;
    padding: 10px 16px; border-radius: 8px; background: rgba(10, 18, 16, 0.82); border: 1px solid rgba(46, 230, 160, 0.5);
    color: #e8f3ee; font: 13px/1.45 "Segoe UI", Arial, sans-serif; pointer-events: auto; }
#visio-fiche[data-mode="video"] { bottom: auto; top: 3%; }
#visio-fiche .visio-fiche-titre { font-weight: 700; font-size: 15px; color: #2ee6a0; margin-bottom: 4px; }
#visio-fiche .visio-fiche-texte { white-space: pre-line; }
#webcam-container.visio-plein-ecran #visio-fiche { font-size: 17px; padding: 14px 22px; max-width: 1100px; margin: 0 auto; }
#webcam-container.visio-plein-ecran #visio-fiche .visio-fiche-titre { font-size: 21px; }
#visio-barre #visio-fiche-btn.actif { color: #2ee6a0; }

/* Index des vidéos de la visionneuse : texte jaune sur fond vert */
#visio-index { display: none; flex-direction: column; position: absolute; left: 2%; top: 3%; bottom: 3%; width: min(380px, 42%); z-index: 4;
    background: #1d5236; border: 1px solid #2ee6a0; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.6); overflow: hidden; }
#visio-index .visio-index-tete { display: flex; align-items: center; gap: 8px; padding: 10px; background: #153f29; border-bottom: 1px solid rgba(255,215,0,.35); }
#visio-index-q { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 6px; border: 1px solid #ffd700; background: #0f2f1f; color: #ffd700; font: 600 14px "Segoe UI", Arial, sans-serif; }
#visio-index-q::placeholder { color: rgba(255,215,0,.55); }
#visio-index-nb { color: rgba(255,215,0,.75); font-size: 12px; white-space: nowrap; }
#visio-index-liste { flex: 1; overflow-y: auto; padding: 4px 0 10px; }
#visio-index .visio-index-lettre { color: #ffd700; font: 800 13px "Segoe UI", Arial, sans-serif; padding: 8px 14px 2px; opacity: .7; border-bottom: 1px solid rgba(255,215,0,.2); margin: 0 10px; }
#visio-index .visio-index-item { color: #ffd700; font: 600 15px "Segoe UI", Arial, sans-serif; padding: 7px 18px; cursor: pointer; }
#visio-index .visio-index-item:hover { background: rgba(255,215,0,.16); }
#visio-index .visio-index-item.courant { background: rgba(255,215,0,.24); }
#visio-index .visio-index-vide { color: rgba(255,215,0,.7); padding: 12px 18px; font-style: italic; }
#webcam-container.visio-plein-ecran #visio-index .visio-index-item { font-size: 18px; padding: 9px 22px; }
#visio-barre #visio-index-btn.actif { color: #ffd700; }

#jins-panel .jp-registre { color: #2ee6a0; font-size: 0.92em; }
#jins-panel .jp-cordes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
#jins-panel .jp-cordes button { min-width: 64px; }
#jins-panel .jp-cordes button.jp-mesuree { border-color: #2ee6a0; color: #2ee6a0; }
#jins-panel .jp-leds { gap: 14px; }
#jins-panel .jp-led { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; color: #9bb; }
#jins-panel .jp-led i { width: 12px; height: 12px; border-radius: 50%; background: #2a3438; border: 1px solid #4a5a5e; box-shadow: none; }
#jins-panel .jp-led.allumee { color: #e8f3ee; }
#jins-panel .jp-led.allumee i { background: #2ee6a0; border-color: #2ee6a0; box-shadow: 0 0 6px #2ee6a0; }

/* Curseur Attaque ⟷ Release (micro), à droite du volume */
#release-slider { -webkit-appearance: none; appearance: none; width: 80px; height: 6px; background: rgba(46, 230, 160, 0.18); border-radius: 3px; outline: none; cursor: pointer; }
#release-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #2ee6a0; border: 2px solid rgba(0, 0, 0, 0.3); cursor: pointer; }
.release-lbl { color: #2ee6a0; font: 600 10px "Segoe UI", Arial, sans-serif; opacity: 0.8; user-select: none; }

/* Menu des gammes : en-tête de famille de maqamat */
.scale-lib-famille { padding: 6px 12px 3px; margin-top: 4px; font: 700 11px "Segoe UI", Arial, sans-serif; color: #ff9d6b; letter-spacing: .3px; border-top: 1px solid #2a3a3a; cursor: default; }
.scale-lib-famille:first-child { margin-top: 0; border-top: none; }

/* Description au-dessus du manche : noms de gammes cliquables (mêmes intervalles) */
.gamme-cliquable:hover { fill: #ffffff; text-decoration: underline; }

/* Monocorde : « Quintes et octaves » (12 quintes ≈ 7 octaves) */
#monocorde .mc-qo { flex-direction: column; align-items: stretch; white-space: normal; width: 360px; gap: 4px; padding: 6px 10px 8px; }
#monocorde .mc-qo-titre { color: #ffd700; font-weight: 700; }
#monocorde .mc-qo-titre span { color: #9bb; font-weight: 600; font-size: 11px; }
#monocorde .mc-qo-cols { display: flex; gap: 8px; }
#monocorde .mc-qo-col { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#monocorde .mc-qo-tc { color: #9fe8c8; font-size: 12px; }
#monocorde .mc-qo-q, #monocorde .mc-qo-o { max-height: 118px; overflow-y: auto; font: 500 12px "Segoe UI", Arial, sans-serif; color: #dfe; }
#monocorde .mc-qo-l { padding: 1px 0; white-space: nowrap; }
#monocorde .mc-qo-l b { color: #ffd700; }
#monocorde .mc-qo-l span { color: #9bb; font-size: 11px; }
#monocorde .mc-qo-rouge, #monocorde .mc-qo-l.mc-qo-rouge b, #monocorde .mc-qo-l.mc-qo-rouge span { color: #ff5f5f !important; font-weight: 700; }
#monocorde .mc-qo button { background: #0d1014; color: #ffd700; border: 1px solid #2a6666; border-radius: 4px; padding: 3px 8px; font: 700 12px "Segoe UI", Arial, sans-serif; cursor: pointer; }
#monocorde .mc-qo button:disabled { opacity: .35; cursor: default; }
#monocorde .mc-qo-msg { font-size: 12px; color: #cde; line-height: 1.35; }
#monocorde .mc-qo-bas { display: flex; gap: 6px; }

/* Bouton △ Pythagore (à droite de 🎻 Monocorde, mode Tableau) */
#visio-barre #visio-pyth { display: none; }
#visio-barre.mode-tableau #visio-pyth { display: inline-flex; align-items: center; }
#visio-barre #visio-pyth.actif { background: rgba(255, 215, 0, 0.16); color: #ffd700; border-color: #ffd700; }

/* « Pythagore » dans le tableau (pythagore.js) — encre foncée, ou craie sur fond vert / noir */
#pythagore { display: none; position: absolute; inset: 0; box-sizing: border-box; padding: 60px 4% .8em; flex-direction: column; gap: .6em;
    --encre: #1c2a33; --doux: #4a5d68; --acc: #0b6e4f; --chiffre: #9a5b00; --rouge: #d0202a;
    color: var(--encre); font: 600 16px "Segoe UI", Arial, sans-serif; overflow: hidden; }
#pythagore.py-craie { --encre: #eef5f0; --doux: #b9cbc3; --acc: #9fe8c8; --chiffre: #ffd700; --rouge: #ff6b6b; }
#visio-ecran[data-mode="tableau"] #pythagore.on { display: flex; }
#pythagore .py-tete { display: flex; align-items: center; justify-content: center; position: relative; }
#pythagore .py-titre { font-size: 1.45em; font-weight: 700; color: var(--chiffre); }
#pythagore .py-fermer { position: absolute; right: 0; top: 0; }
#pythagore .py-cols { flex: 1; min-height: 0; display: flex; gap: 6%; }
#pythagore .py-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4em; }
#pythagore .py-tc { color: var(--acc); font-size: 1.2em; text-align: center; border-bottom: 2px solid var(--acc); padding-bottom: .2em; }
#pythagore .py-q, #pythagore .py-o { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#pythagore .py-l { display: grid; grid-template-columns: 1fr 4.2em 8.4em 3.6em; align-items: baseline; column-gap: .4em; padding: .06em 0; white-space: nowrap; font-weight: 500; }
#pythagore .py-l .py-op { text-align: right; }
#pythagore .py-l b { color: var(--chiffre); font-size: 1.08em; }
#pythagore .py-l .py-hz { color: var(--doux); text-align: right; font-size: .9em; }
#pythagore .py-l i { color: var(--acc); font-style: normal; font-weight: 700; }
#pythagore .py-rouge, #pythagore .py-l.py-rouge b, #pythagore .py-l.py-rouge i, #pythagore .py-l.py-rouge .py-hz, #pythagore .py-l.py-rouge .py-op { color: var(--rouge) !important; font-weight: 700; }
#pythagore button { background: #0d1014; color: #ffd700; border: 1px solid #2a6666; border-radius: 6px; padding: .25em .9em; font: 700 .85em "Segoe UI", Arial, sans-serif; cursor: pointer; }
#pythagore button:hover:not(:disabled) { border-color: #ffd700; }
#pythagore button:disabled { opacity: .35; cursor: default; }
#pythagore .py-col > button { align-self: center; min-width: 9em; }
#pythagore .py-msg { font-size: .85em; line-height: 1.4; min-height: 2.8em; color: var(--encre); }
#pythagore { --doux: #4a5d68; }
#pythagore.py-craie { --doux: #b9cbc3; }
/* l'octave 8 vue deux fois : Do8 (7 octaves) et Si#8 (12 quintes) — le comma en rouge */
#pythagore .py-comma { display: none; height: 7.2em; flex: 0 0 auto; cursor: pointer; }
#pythagore .py-comma svg { width: 100%; height: 100%; display: block; }
#pythagore .py-comma text { font-family: "Segoe UI", Arial, sans-serif; }
#pythagore .py-bas { display: flex; gap: .6em; justify-content: center; }
#pythagore .py-l .py-hz, #pythagore .py-l i { cursor: pointer; border-radius: 4px; }
#pythagore .py-l .py-hz:hover, #pythagore .py-l i:hover { text-decoration: underline; background: rgba(127, 127, 127, .15); }
#pythagore .py-l .py-hz small { font-size: .8em; color: var(--acc); }
#pythagore .py-l.py-norm .py-hz { color: var(--acc); font-weight: 700; }

/* Bouton ♩ Temps (à droite de △ Pythagore, mode Tableau) */

/* « Le temps en musique » dans le tableau (temps.js) — même habillage que le monocorde :
   la portée est écrite SUR le tableau (encre foncée, ou craie sur fond vert / noir),
   les commandes sont dans de petits panneaux déplaçables avec le manipulateur ✥ */
/* LEDs du métronome : grises au repos, verte sur le temps joué (sans lueur) ; accent = bord doré, muet = estompé */
/* la portée, sur le tableau */
/* barre de défilement de la portée : fine, invisible tant que la souris ne survole pas la portée */
/* largeur réglable : poignée au bord droit des panneaux */
/* panneau vertical de LEDs : afficher / masquer les autres panneaux */

/* ---- Temps : mode batterie (kit-percussions.js) ---- */

/* ==================== ⏱ Durées (durees.js) ==================== */
#visio-barre #visio-durees { display: none; }
#visio-barre.mode-tableau #visio-durees { display: inline-flex; align-items: center; }
#visio-barre #visio-durees.actif { background: rgba(255, 215, 106, 0.16); color: #ffd76a; border-color: #ffd76a; }
#durees { display: none; position: absolute; inset: 0; box-sizing: border-box; padding: 58px 1.5% 10px; flex-direction: column; gap: 8px;
    --encre: #1c2a33; --doux: #4a5d68; --acc: #0b6e4f; --or: #9a5b00; --rouge: #d0202a; --eteinte: #c9d2d6; --blanc: #ffffff; --bord: #2a3a44;
    font: 600 13px "Segoe UI", Arial, sans-serif; color: var(--encre); }
#durees.du-craie { --encre: #eef5f0; --doux: #b9cbc3; --acc: #2ee6a0; --or: #ffd76a; --rouge: #ff4d4d; --eteinte: #33423d; --blanc: #ffffff; --bord: #6f8a80; }
#visio-ecran[data-mode="tableau"] #durees.on { display: flex; }
#durees .du-champ { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: #e8f3ee; background: rgba(13, 20, 24, 0.84);
    border: 1px solid #2a6666; border-radius: 6px; padding: 5px 10px; align-self: flex-start; }
#durees .du-titre { color: #ffd76a; font-weight: 700; }
#durees .du-lbl { color: #9fe8c8; }
#durees .du-sep { width: 1px; align-self: stretch; background: #2a6666; margin: 0 2px; }
#durees button, #durees select, #durees input { background: #0d1014; color: #ffd700; border: 1px solid #2a6666; border-radius: 4px; padding: 2px 8px; font: 700 13px "Segoe UI", Arial, sans-serif; cursor: pointer; }
#durees button:hover { background: #1b2a2a; }
#durees button.actif { background: #7a1616; color: #fff; border-color: #ff5a5a; }
#durees select option { background: #3a3f44; color: #fff; }
#durees .du-corps { flex: 1; min-height: 0; display: flex; gap: 2%; align-items: stretch; }
/* gauche : les trois colonnes de signatures */
#durees .du-gauche { flex: 0 0 auto; width: 300px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
#durees .du-colonnes { display: flex; gap: 8px; }
#durees .du-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
#durees .du-col-titre { color: var(--or); font-weight: 700; text-align: center; padding-bottom: 4px; border-bottom: 2px solid var(--or); margin-bottom: 2px; }
#durees .du-sig { padding: 6px 4px; font-size: 16px; line-height: 1.1; color: #e8f3ee; }
#durees .du-sig small { display: block; font-size: 11px; color: #9fe8c8; font-weight: 600; }
#durees .du-sig.actif { background: #0b6e4f; border-color: #2ee6a0; color: #fff; }
#durees .du-sig.actif small { color: #fff; }
#durees .du-type { color: var(--doux); font-weight: 600; line-height: 1.4; }
#durees .du-un-temps { color: var(--encre); line-height: 1.5; }
#durees .du-un-temps b { color: var(--or); }
/* milieu : rangée de LEDs + cercle des secondes */
#durees .du-milieu { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#durees .du-rangee { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 30px; }
#durees .du-hleds { display: flex; gap: 14px; justify-content: center; align-items: flex-end; }
#durees .du-hcol { display: flex; flex-direction: column; align-items: center; width: 30px; }
#durees .du-hgl { font-family: 'Bravura', serif; font-weight: normal; font-size: 30px; height: 46px; line-height: 64px; color: var(--encre); visibility: hidden; overflow: visible; }
#durees .du-hcol.joue .du-hgl { visibility: visible; }
#durees .du-hcol.joue:first-child .du-hgl { color: var(--rouge); }
#durees .du-hled { width: 24px; height: 24px; border-radius: 50%; background: var(--eteinte); border: 2px solid var(--bord); box-sizing: border-box; }
#durees .du-hled.on.rouge { background: var(--rouge); border-color: var(--rouge); }
#durees .du-hled.on.blanc { background: var(--blanc); border-color: var(--blanc); }
#durees .du-hled.on.pale { background: #b8c4c0; border-color: #b8c4c0; }
#durees .du-rond { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; }
#durees .du-cercle { height: 100%; max-width: 100%; aspect-ratio: 1; display: block; }
#durees .du-cadran { fill: none; }
#durees .du-trait { fill: none; stroke: var(--bord); stroke-width: 1.2; }
#durees .du-grad { fill: var(--doux); font: 600 8.5px "Segoe UI", Arial, sans-serif; }
#durees .du-grad.cinq { fill: var(--encre); font-size: 12.5px; font-weight: 700; }
#durees .du-cercle .du-led { fill: var(--eteinte); stroke: var(--bord); stroke-width: 1.2; }
#durees .du-cercle .du-led.on.blanc { fill: var(--blanc); stroke: var(--blanc); }
#durees .du-cercle .du-led.on.rouge { fill: var(--rouge); stroke: var(--rouge); }
#durees .du-cercle .du-led.on.pale { fill: #b8c4c0; stroke: #b8c4c0; }
#durees .du-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
#durees .du-unite { color: var(--or); font-size: 22px; font-weight: 700; }
#durees .du-tempo { display: flex; align-items: center; gap: 6px; }
#durees .du-tempo button { width: 34px; height: 34px; padding: 0; font-size: 22px; line-height: 1; border-radius: 50%; }
#durees .du-bpm { width: 92px; font-size: 34px !important; text-align: center; padding: 2px 4px !important; }
#durees .du-nom-tempo { color: var(--acc); font-size: 15px; font-weight: 700; }
#durees .du-chrono { color: var(--doux); font-size: 13px; min-height: 16px; }
/* droite : figures et silences = durée */
#durees .du-droite { flex: 0 0 auto; min-width: 330px; overflow: auto; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
#durees .du-entete { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-bottom: 2px solid var(--or); }
#durees .du-e-ligne { display: flex; align-items: center; gap: 10px; min-height: 52px; }
#durees .du-e-lbl { color: var(--doux); font-size: 14px; }
#durees .du-e-sig { display: inline-flex; flex-direction: column; align-items: center; font: 700 26px/0.95 "Times New Roman", Georgia, serif; color: var(--encre); }
#durees .du-e-noire { font-size: 34px; height: 52px; line-height: 70px; width: auto; color: var(--encre); }
#durees .du-e-egal { color: var(--or); font-size: 24px; font-weight: 700; }
#durees .du-e-unite { color: var(--doux); font-size: 13px; }
#durees .du-figures { display: flex; flex-direction: column; gap: 2px; width: 100%; }
#durees .du-fig { display: grid; grid-template-columns: 38px 38px 20px 78px 64px 1fr; align-items: center; height: 40px; padding: 0 8px; border-radius: 6px; }
#durees .du-fig.unite { background: rgba(255, 215, 106, 0.14); outline: 1px solid var(--or); }
#durees .du-gl { font-family: 'Bravura', serif; font-weight: normal; font-size: 26px; height: 40px; line-height: 52px; color: var(--encre); text-align: center; overflow: visible; }
#durees .du-gl.du-sil { color: var(--doux); }
#durees .du-eg { color: var(--or); font-size: 20px; font-weight: 700; text-align: center; }
#durees .du-val { color: var(--or); font-size: 17px; font-weight: 700; text-align: right; }
#durees .du-ms { color: var(--doux); font-size: 12px; text-align: right; }
#durees .du-fnom { color: var(--doux); font-size: 11px; line-height: 1.2; padding-left: 12px; }
#durees .du-fnom i { opacity: 0.8; }

/* --- Capture vidéo de l'écran (capture-ecran.js) --- */
#capture-btn.actif { color: #ffd76a; }
#capture-btn.rec .cap-pt { animation: cap-cl 1s steps(2) infinite; }
@keyframes cap-cl { 50% { opacity: 0.2; } }
#capture-panneau { display: none; position: fixed; top: 90px; right: 16px; z-index: 30050; width: 390px; max-height: calc(100vh - 110px); overflow: auto;
    background: #14191d; color: #e8f3ee; border: 1px solid #2a6666; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    font: 600 12.5px "Segoe UI", Arial, sans-serif; padding: 0 10px 10px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #2a6666 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 -10px 8px; padding: 7px 10px;
    background: #0d1014; border-bottom: 1px solid #2a6666; color: #ffd76a; font-weight: 700; font-size: 14px; cursor: move; }
#capture-panneau button, #capture-panneau select, #capture-panneau input[type=number] { background: #0d1014; color: #ffd700; border: 1px solid #2a6666; border-radius: 4px;
    padding: 3px 8px; font: 700 12.5px "Segoe UI", Arial, sans-serif; cursor: pointer; }
#capture-panneau select { max-width: 100%; }
#capture-panneau select option { background: #3a3f44; color: #fff; }
#capture-panneau button:hover { background: #1b2a2a; }
#capture-panneau button:disabled { opacity: 0.45; cursor: default; }
#capture-panneau input[type=number] { width: 64px; }
#capture-panneau fieldset { border: 1px solid #2a4a4a; border-radius: 6px; margin: 8px 0 0; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 5px; }
#capture-panneau legend { color: #9fe8c8; padding: 0 4px; }
#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 #2a4a4a; border-radius: 4px; display: flex; justify-content: center; align-items: center; height: 190px; margin-bottom: 6px; }
#capture-panneau .cp-apercu video { max-width: 100%; max-height: 100%; display: block; }
#capture-panneau .cp-taille { color: #9fe8c8; font-size: 11.5px; }
#capture-panneau .cp-detail { color: #9fe8c8; font-size: 11.5px; }
#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; }
#capture-panneau .cp-reglage .cp-micro-voie { grid-column: span 1; }
#capture-panneau .cp-micro-voie-auto { color: #9fe8c8 !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: #8aa79b; font-size: 11px; font-weight: 600; }
#capture-panneau .cp-reglage b { color: #ffd76a; text-align: right; font-size: 11.5px; }
#capture-panneau .cp-vu { height: 6px; background: #0a0d10; border-radius: 3px; overflow: hidden; margin: -1px 0 3px; }
#capture-panneau .cp-vu i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2ee6a0 0 70%, #ffd76a 70% 90%, #ff4d4d 90%); background-size: 390px 100%; }
#capture-panneau .cp-vu i.sature { background: #ff4d4d; }
#capture-panneau .cp-dossier { flex: 1; min-width: 0; color: #cfe; font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
#capture-panneau .cp-rec { width: 100%; margin-top: 10px; padding: 9px; font-size: 15px; background: #3a0d0d; color: #fff; border-color: #ff5a5a; }
#capture-panneau .cp-rec:hover { background: #561414; }
#capture-panneau .cp-rec.actif { background: #7a1616; }
#capture-panneau .cp-raccourcis { color: #8aa79b; font-size: 11px; margin-top: 6px; line-height: 1.4; }
#capture-panneau .cp-raccourcis b { color: #cfe; }
#capture-panneau .cp-msg { color: #ffd76a; background: rgba(255, 215, 106, 0.08); border: 1px solid #6b5a22; border-radius: 4px; padding: 5px 8px; 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: 8px; padding: 7px 8px; border: 1px solid #2ee6a0; border-radius: 6px; background: rgba(46, 230, 160, 0.07); display: flex; flex-direction: column; gap: 5px; }
#capture-panneau .cp-chemin { color: #9fe8c8; font-size: 11px; word-break: break-all; }
#capture-cadre { position: fixed; z-index: 30040; pointer-events: none; border: 2px dashed #ffd76a; border-radius: 3px; box-sizing: border-box; }
#capture-cadre.rec { border-color: #ff4d4d; }
#capture-voile { position: fixed; inset: 0; z-index: 30060; cursor: crosshair; background: rgba(0, 0, 0, 0.35); }
#capture-voile .cv-aide { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #14191d; color: #ffd76a; border: 1px solid #2a6666; border-radius: 6px; padding: 6px 12px; font: 600 13px "Segoe UI", Arial, sans-serif; pointer-events: none; }
#capture-voile .cv-rect { display: none; position: absolute; border: 2px solid #ffd76a; background: rgba(255, 215, 106, 0.08); color: #ffd76a; font: 700 12px "Segoe UI", Arial, sans-serif; padding: 3px 6px; box-sizing: border-box; }

/* --- 𝄞 Portée : la portée de Zaman dans le tableau (portee.js, dossier portee/) --- */
#visio-barre #visio-portee { display: none; }
#visio-barre.mode-tableau #visio-portee { display: inline-flex; align-items: center; }
#visio-barre #visio-portee.actif { background: rgba(78, 217, 154, 0.16); color: #4ed99a; border-color: #4ed99a; }
#portee { display: none; position: absolute; inset: 0; padding-top: 52px; box-sizing: border-box; }
#visio-ecran[data-mode="tableau"] #portee.on { display: block; }
#portee iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }

/* --- Accordeur des cordes, sur le manche (accordeur-cordes.js) --- */
#accordeur-bout { display: none; position: absolute; z-index: 50; height: 5px; border-radius: 3px; pointer-events: none; transform-origin: 0 50%;
    transition: top 0.12s linear, background-color 0.2s; }
#accordeur-ecart { display: none; position: absolute; z-index: 51; pointer-events: none; transform: translateX(-100%); font: 700 12px "Segoe UI", Arial, sans-serif;
    white-space: nowrap; text-shadow: 0 0 3px #000, 0 0 3px #000; }

/* --- 🎹 Harmonie : initiation aux accords (harmonie.js) --- */
#visio-barre #visio-harmonie { display: none; }
#visio-barre.mode-tableau #visio-harmonie { display: inline-flex; align-items: center; }
#visio-barre #visio-harmonie.actif { background: rgba(255, 215, 106, 0.16); color: #ffd76a; border-color: #ffd76a; }
#harmonie { display: none; position: absolute; inset: 0; box-sizing: border-box; padding: 58px 1.5% 10px; flex-direction: column; gap: 10px;
    --encre: #1c2a33; --doux: #4a5d68; --or: #9a5b00; --r1: #e0402f; --r3: #e0b000; --r5: #11a36a; --bord: #2a3a44;
    font: 600 13px "Segoe UI", Arial, sans-serif; color: var(--encre); }
#harmonie.hm-craie { --encre: #eef5f0; --doux: #b9cbc3; --or: #ffd76a; --r1: #ff5a5a; --r3: #ffd76a; --r5: #2ee6a0; --bord: #6f8a80; }
#visio-ecran[data-mode="tableau"] #harmonie.on { display: flex; }
:is(#harmonie, #hm-dock) .hm-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: #e8f3ee; background: rgba(13, 20, 24, 0.84);
    border: 1px solid #2a6666; border-radius: 6px; padding: 5px 10px; align-self: flex-start; }
:is(#harmonie, #hm-dock) .hm-titre { color: #ffd76a; font-weight: 700; }
:is(#harmonie, #hm-dock) .hm-lbl { color: #9fe8c8; }
:is(#harmonie, #hm-dock) .hm-sep { width: 1px; align-self: stretch; background: #2a6666; margin: 0 2px; }
:is(#harmonie, #hm-dock) button, :is(#harmonie, #hm-dock) select, :is(#harmonie, #hm-dock) input { background: #0d1014; color: #ffd700; border: 1px solid #2a6666; border-radius: 4px; padding: 3px 8px; font: 700 13px "Segoe UI", Arial, sans-serif; cursor: pointer; }
:is(#harmonie, #hm-dock) select option { background: #3a3f44; color: #fff; }
:is(#harmonie, #hm-dock) button:hover { background: #1b2a2a; }
:is(#harmonie, #hm-dock) .hm-corps { flex: 1; min-height: 0; display: flex; gap: 2%; }
:is(#harmonie, #hm-dock) .hm-gauche { width: 210px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; }
:is(#harmonie, #hm-dock) .hm-col-titre { color: var(--or); font-weight: 700; border-bottom: 2px solid var(--or); padding-bottom: 4px; text-align: center; }
:is(#harmonie, #hm-dock) .hm-type { display: flex; flex-direction: column; align-items: center; padding: 7px; color: #e8f3ee; }
:is(#harmonie, #hm-dock) .hm-type b { font-size: 15px; }
:is(#harmonie, #hm-dock) .hm-type small { color: #9fe8c8; font-weight: 600; font-size: 11px; }
:is(#harmonie, #hm-dock) .hm-type.actif { background: #0b6e4f; border-color: #2ee6a0; color: #fff; }
:is(#harmonie, #hm-dock) .hm-type.actif small { color: #fff; }
:is(#harmonie, #hm-dock) .hm-aide { color: var(--doux); font-weight: 600; font-size: 12px; line-height: 1.4; margin: 4px 0 0; }
:is(#harmonie, #hm-dock) .hm-milieu { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
:is(#harmonie, #hm-dock) .hm-titre-accord { font-size: 28px; font-weight: 700; color: var(--encre); }
:is(#harmonie, #hm-dock) .hm-sym { color: var(--or); font-size: 22px; margin-left: 10px; }
:is(#harmonie, #hm-dock) .hm-notes { font-size: 18px; }
:is(#harmonie, #hm-dock) .hm-n { font-weight: 700; }
:is(#harmonie, #hm-dock) .hm-n.r1 { color: var(--r1); } :is(#harmonie, #hm-dock) .hm-n.r3 { color: var(--r3); } :is(#harmonie, #hm-dock) .hm-n.r5 { color: var(--r5); }
:is(#harmonie, #hm-dock) .hm-piano { position: relative; width: min(92%, 760px); aspect-ratio: 4 / 1; display: flex; margin-top: 6px; user-select: none; }
:is(#harmonie, #hm-dock) .hm-b-accord, :is(#harmonie, #hm-dock) .hm-b-intervalles { display: flex; flex-direction: column; align-items: center; gap: 6px; }
:is(#harmonie, #hm-dock) .hm-b-piano { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
:is(#harmonie, #hm-dock) .hm-b-degres { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* ✥ disposition libre : blocs en position absolue (en % du tableau) */
#harmonie.hm-libre .hm-bloc { position: absolute; margin: 0; box-sizing: border-box; }
#harmonie.hm-libre .hm-b-piano .hm-piano { width: 100%; }
#harmonie.hm-libre .hm-b-degres .hm-degres, #harmonie.hm-libre .hm-cadences { justify-content: center; }
:is(#harmonie, #hm-dock) .hm-poignee { display: none; }
#harmonie.hm-organiser .hm-bloc { outline: 2px dashed #6cb8ff; outline-offset: 3px; cursor: move; }
#harmonie.hm-organiser .hm-bloc > *:not(.hm-poignee) { pointer-events: none; }
#harmonie.hm-organiser .hm-barre > .hm-orga, #harmonie.hm-organiser .hm-barre > .hm-raz { pointer-events: auto; }
#harmonie.hm-organiser .hm-bloc.hm-saisi { outline-color: #ffd76a; z-index: 5; }
#harmonie.hm-organiser .hm-poignee { display: block; position: absolute; right: -9px; top: 50%; width: 10px; height: 34px; margin-top: -17px; border-radius: 5px;
    background: #6cb8ff; cursor: ew-resize; pointer-events: auto; }
:is(#harmonie, #hm-dock) .hm-raz { display: none; }
#harmonie.hm-organiser .hm-raz { display: inline-block; }
:is(#harmonie, #hm-dock) .hm-orga.actif { background: #1e4f7a; color: #fff; border-color: #6cb8ff; }
:is(#harmonie, #hm-dock) .hm-touche { position: relative; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 6px; }
:is(#harmonie, #hm-dock) .hm-touche.blanche { flex: 1; background: #f4f1e8; border: 1px solid #555; border-radius: 0 0 6px 6px; color: #222; }
:is(#harmonie, #hm-dock) .hm-touche.noire { position: absolute; top: 0; width: 5.2%; height: 60%; background: #1b1d20; border: 1px solid #000; border-radius: 0 0 4px 4px; z-index: 2; color: #fff; }
:is(#harmonie, #hm-dock) .hm-touche.r1 { background: var(--r1); } :is(#harmonie, #hm-dock) .hm-touche.r3 { background: var(--r3); } :is(#harmonie, #hm-dock) .hm-touche.r5 { background: var(--r5); }
:is(#harmonie, #hm-dock) .hm-touche.r1, :is(#harmonie, #hm-dock) .hm-touche.r3, :is(#harmonie, #hm-dock) .hm-touche.r5 { color: #111; }
:is(#harmonie, #hm-dock) .hm-touche.joue { animation: hm-appui 0.45s ease-out; }
@keyframes hm-appui { 0% { filter: brightness(1.6); transform: translateY(3px); } 100% { filter: none; transform: none; } }
:is(#harmonie, #hm-dock) .hm-nom { font-size: 13px; font-weight: 700; }
:is(#harmonie, #hm-dock) .hm-role { font-size: 11px; font-weight: 700; opacity: 0.8; }
:is(#harmonie, #hm-dock) .hm-touche.noire .hm-nom { font-size: 10.5px; }
:is(#harmonie, #hm-dock) .hm-legende { display: flex; gap: 16px; font-size: 12px; }
:is(#harmonie, #hm-dock) .hm-intervalles { color: var(--encre); line-height: 1.6; text-align: center; font-weight: 600; }
:is(#harmonie, #hm-dock) .hm-intervalles b { color: var(--or); }
:is(#harmonie, #hm-dock) .hm-explication { color: var(--doux); text-align: center; max-width: 640px; }
:is(#harmonie, #hm-dock) .hm-bas { display: flex; flex-direction: column; gap: 6px; align-items: center; }
:is(#harmonie, #hm-dock) .hm-gamme-titre { color: var(--doux); font-size: 12px; }
:is(#harmonie, #hm-dock) .hm-degres { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
:is(#harmonie, #hm-dock) .hm-degre { display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 5px 6px; color: #e8f3ee; }
:is(#harmonie, #hm-dock) .hm-degre b { font-size: 18px; font-family: Georgia, serif; }
:is(#harmonie, #hm-dock) .hm-degre span { font-size: 13px; }
:is(#harmonie, #hm-dock) .hm-degre i { font-size: 10.5px; color: #9fe8c8; font-style: normal; min-height: 13px; }
:is(#harmonie, #hm-dock) .hm-degre.actif { background: #0b6e4f; border-color: #2ee6a0; color: #fff; }
:is(#harmonie, #hm-dock) .hm-cadences { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; }
:is(#harmonie, #hm-dock) .hm-touche.tenu { background: #6cb8ff; color: #111; }
:is(#harmonie, #hm-dock) .hm-pc { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; opacity: 0.45; }
:is(#harmonie, #hm-dock) .hm-touche.noire .hm-pc { color: #ddd; }
/* ligne de l'accord (cents, tons, degrés) */
:is(#harmonie, #hm-dock) .hm-b-ligne { width: 100%; display: flex; justify-content: center; }
:is(#harmonie, #hm-dock) .hm-ligne { width: min(46%, 380px); height: auto; aspect-ratio: 1000 / 150; overflow: visible; }
#harmonie.hm-libre .hm-b-ligne .hm-ligne { width: 100%; }
:is(#harmonie, #hm-dock) .hm-l-axe { stroke: var(--bord); stroke-width: 3; }
:is(#harmonie, #hm-dock) .hm-l-cran { stroke: var(--bord); stroke-width: 1.5; }
:is(#harmonie, #hm-dock) .hm-l-seg { stroke-width: 9; stroke-linecap: round; }
:is(#harmonie, #hm-dock) .hm-l-seg.s0 { stroke: var(--r3); } :is(#harmonie, #hm-dock) .hm-l-seg.s1 { stroke: var(--r5); } :is(#harmonie, #hm-dock) .hm-l-seg.s2 { stroke: var(--r1); opacity: 0.55; }
:is(#harmonie, #hm-dock) .hm-l-pt { stroke: #111; stroke-width: 1.5; }
:is(#harmonie, #hm-dock) .hm-l-pt.r1 { fill: var(--r1); } :is(#harmonie, #hm-dock) .hm-l-pt.r3 { fill: var(--r3); } :is(#harmonie, #hm-dock) .hm-l-pt.r5 { fill: var(--r5); }
:is(#harmonie, #hm-dock) .hm-l-pt.oct { opacity: 0.6; }
:is(#harmonie, #hm-dock) .hm-l-cents { fill: var(--or); font: 700 32px "Segoe UI", Arial, sans-serif; text-anchor: middle; }
:is(#harmonie, #hm-dock) .hm-l-tons { fill: var(--doux); font: 600 26px "Segoe UI", Arial, sans-serif; text-anchor: middle; }
:is(#harmonie, #hm-dock) .hm-l-nom { font: 700 32px "Segoe UI", Arial, sans-serif; text-anchor: middle; }
:is(#harmonie, #hm-dock) .hm-l-nom.r1 { fill: var(--r1); } :is(#harmonie, #hm-dock) .hm-l-nom.r3 { fill: var(--r3); } :is(#harmonie, #hm-dock) .hm-l-nom.r5 { fill: var(--r5); }
:is(#harmonie, #hm-dock) .hm-l-deg { fill: var(--doux); font: 600 26px "Segoe UI", Arial, sans-serif; text-anchor: middle; }

/* --- ✥ organiser les blocs (organiser-blocs.js) — Métronome --- */
.ob-libre .ob-bloc { position: absolute !important; margin: 0 !important; box-sizing: border-box; }
.ob-poignee { display: none; }
.ob-organiser .ob-bloc { outline: 2px dashed #6cb8ff; outline-offset: 3px; cursor: move; }
.ob-organiser .ob-bloc > *:not(.ob-poignee) { pointer-events: none; }
.ob-organiser .ob-bloc.ob-saisi { outline-color: #ffd76a; z-index: 5; }
.ob-organiser .ob-poignee { display: block; position: absolute; right: -9px; top: 50%; width: 10px; height: 34px; margin-top: -17px; border-radius: 5px;
    background: #6cb8ff; cursor: ew-resize; pointer-events: auto; }
#durees .du-raz { display: none; }
#durees.ob-organiser .du-raz { display: inline-block; }
#durees.ob-organiser .du-barre > .du-orga, #durees.ob-organiser .du-barre > .du-raz { pointer-events: auto; }
#durees .du-orga.actif { background: #1e4f7a; color: #fff; border-color: #6cb8ff; }
#durees .du-infos { display: flex; flex-direction: column; gap: 10px; }
/* disposition libre : le cercle prend la largeur de son bloc (carré), les listes la leur */
#durees.ob-libre .du-rond { height: auto; }
#durees.ob-libre .du-rond .du-cercle { width: 100%; height: auto; max-width: none; }
#durees.ob-libre .du-figures, #durees.ob-libre .du-entete { width: auto; }
/* colonnes du Métronome : toutes les mesures de Zaman (listes plus longues) */
#durees .du-col { gap: 4px; }
#durees .du-sig { padding: 4px 3px; font-size: 14px; }
#durees .du-sig small { font-size: 10px; }
#durees .du-met { font-family: 'Bravura', serif; font-weight: normal; font-size: 26px; line-height: 0; vertical-align: -3px; }
/* Métronome : une seule LED qui tourne (le cadran = 1 minute fixe) */
#durees .du-curseur { fill: #ffffff; stroke: none; opacity: 0.85; }
#durees .du-trace { fill: #000; }
#durees .du-trace.blanc { fill: #ffffff; }
#durees .du-compte { fill: #111; font: 700 8px "Segoe UI", Arial, sans-serif; pointer-events: none; }
#durees .du-compte.c2 { font-size: 7px; }
#durees .du-compte.c3 { font-size: 5.6px; letter-spacing: -0.3px; }
#durees .du-curseur.rouge { fill: #ff3b3b; }
#durees .du-curseur.pale { fill: #b8c4c0; }
#durees .du-curseur.flash { animation: du-clignote 0.35s ease-out; }
@keyframes du-clignote { 0% { opacity: 1; } 40% { opacity: 0.35; } 100% { opacity: 0.85; } }
/* Métronome, mesures asymétriques : une LED par temps, espacée selon sa durée (court / long) */
#durees .du-croches { color: #9fe8c8; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
#durees .du-rangee.du-aksak .du-hcol-2 { margin-right: 26px; }
#durees .du-rangee.du-aksak .du-hcol-3 { margin-right: 46px; }
#durees .du-rangee.du-aksak .du-hgl { visibility: visible; opacity: 0.45; }
#durees .du-rangee.du-aksak .du-hcol.joue .du-hgl { opacity: 1; }
/* Métronome : nombre de mesures, pause, signature modifiable */
#durees .du-nbmes { width: 46px; text-align: center; }
#durees .du-pause:disabled { opacity: 0.4; cursor: default; }
#durees .du-pause.actif { background: #1e4f7a; color: #fff; border-color: #6cb8ff; }
#durees .du-e-sig { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
#durees .du-e-sig input, #durees .du-e-sig select { width: 54px; text-align: center; font: 700 22px "Times New Roman", Georgia, serif !important; padding: 0 2px !important;
    background: transparent; color: var(--encre); border: 1px dashed var(--bord); border-radius: 4px; }
#durees .du-e-sig select option { background: #3a3f44; color: #fff; font-size: 15px; }
#durees .du-e-g { width: 92px; text-align: center; background: transparent; color: var(--encre); border: 1px dashed var(--bord); border-radius: 4px; font: 600 14px "Segoe UI", Arial, sans-serif; }
/* Métronome : pas à pas et compteur du centre */
#durees .du-recul, #durees .du-avance { padding: 2px 9px; }
#durees .du-c-compte { color: var(--or); font: 700 26px "Segoe UI", Arial, sans-serif; white-space: nowrap; }
#durees .du-c-compte:empty { display: none; }
#durees .du-calcul { color: #9fe8c8; font-weight: 600; white-space: nowrap; }
#durees .du-calcul.inexact { color: #ffb347; }
#durees .du-cmes { color: var(--encre); font: 600 14px "Segoe UI", Arial, sans-serif; min-height: 18px; display: flex; align-items: center; gap: 6px; }
#durees .du-cmes b { color: var(--or); font-size: 16px; }
#durees .du-cmes-pt { width: 9px; height: 9px; border-radius: 50%; background: #000; display: inline-block; }
#durees .du-cmes-pt.blanc { background: #fff; }

/* Métronome, centre du cadran : plus de fond noir ni de ronds — « 58 / 120 » à la même taille */
#durees .du-tempo button, #durees .du-tempo button:hover, #durees .du-bpm { background: transparent; border: none; box-shadow: none; }
#durees .du-tempo button { width: auto; height: auto; padding: 0 4px; font-size: 34px; }
#durees .du-tempo button:hover { filter: brightness(1.4); }
#durees .du-c-compte { font-size: 34px; }
#durees .du-bpm { width: 80px; padding: 0 !important; outline: none; }
#durees .du-bpm::-webkit-inner-spin-button, #durees .du-bpm::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Métronome : 🥁 Mon rythme (taper le rythme au clavier PC / MIDI) */
#durees .du-rythme { display: flex; flex-direction: column; gap: 6px; color: #e8f3ee; background: rgba(13, 20, 24, 0.84); border: 1px solid #2a6666; border-radius: 6px; padding: 6px 8px; }
#durees .du-r-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
#durees .du-r-titre { color: #ffd76a; font-weight: 700; margin-right: auto; }
#durees .du-r-pad { background: #3a2a14; color: #ffd76a; border-color: #a07a3a; }
#durees .du-r-pad.tape { animation: du-r-tape 0.15s ease-out; }
@keyframes du-r-tape { 0% { background: #ffd76a; color: #111; } 100% { background: #3a2a14; color: #ffd76a; } }
#durees .du-r-mes { width: 44px; }
#durees .du-r-sub { max-width: 150px; }
#durees .du-r-jouer-l { color: #9fe8c8; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
#durees .du-r-nom { flex: 1; min-width: 70px; cursor: text; }
#durees .du-r-biblio { max-width: 100%; flex: 1 1 100%; }
#durees .du-r-etat { color: #9fe8c8; font-weight: 600; font-size: 12px; line-height: 1.35; }
#durees .du-r-etat b { color: #ffd76a; }
#durees .du-r-grille { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
#durees .du-r-mesure { display: flex; gap: 2px; padding: 3px; border-left: 2px solid #9fe8c8; border-right: 2px solid #9fe8c8; }
#durees .du-r-pas { flex: 1; display: flex; gap: 1px; }
#durees .du-r-pas.debut { margin-left: 4px; }
#durees .du-r-pas.debut:first-child { margin-left: 0; }
#durees .du-r-case { flex: 1; height: 16px; min-width: 4px; background: #26333a; border-radius: 2px; }
#durees .du-r-case.temps { background: #3b4c55; }
#durees .du-r-case.on { background: #ffd76a; }
#durees .du-r-case.cur { outline: 2px solid #2ee6a0; outline-offset: -1px; }
#durees .du-r-case:hover { filter: brightness(1.35); }
#durees .du-r-fig { color: #fff; font-size: 26px; line-height: 1.6; min-height: 0; word-break: break-word; }
#durees .du-r-fig .du-gl { margin: 0 1px; }
#durees .du-r-barre { color: #9fe8c8; margin: 0 4px; font-size: 22px; }
#durees .du-r-lie { color: #ffd76a; font-size: 16px; }
#durees .du-r-tri { color: #ffd76a; font-size: 11px; margin-left: -2px; }
/* Métronome : curseur en rond + flèche (image curseur01) — la flèche pointe sur le point qui se crée */
#durees .du-curseur { fill: #ffffff; opacity: 1; }
#durees .du-c-tige { stroke: #ffffff; stroke-width: 1.4; }
#durees .du-c-fleche { fill: #ffffff; }
#durees .du-compte { fill: #6b7080; font: 800 10.5px "Segoe UI", Arial, sans-serif; letter-spacing: 0.2px; }
#durees .du-curseur.rouge { fill: #ff3b3b; }
#durees .du-curseur.rouge + .du-compte { fill: #ffffff; }
#durees .du-curseur.flash { animation: du-c-flash 0.35s ease-out; }
@keyframes du-c-flash { 0% { opacity: 0.45; } 100% { opacity: 1; } }
/* 📷 Capture d'image : voile et rectangle de sélection */
#ci-voile { position: fixed; inset: 0; z-index: 2147483000; cursor: crosshair; background: rgba(0, 0, 0, 0.18); }
#ci-voile.trace { background: transparent; }
#ci-voile .ci-aide { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(13, 20, 24, 0.92); color: #ffd76a;
    border: 1px solid #2a6666; border-radius: 6px; padding: 6px 14px; font: 700 14px "Segoe UI", Arial, sans-serif; pointer-events: none; }
#ci-voile .ci-cadre { position: absolute; display: none; border: 2px dashed #fff; outline: 1px solid #000; box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.35); pointer-events: none; }
#ci-voile .ci-cadre::after { content: attr(data-taille); position: absolute; right: 0; bottom: -22px; color: #fff; background: rgba(0, 0, 0, 0.7);
    font: 600 12px "Segoe UI", Arial, sans-serif; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
#ci-message { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2147483001; background: rgba(13, 20, 24, 0.94); color: #9fe8c8;
    border: 1px solid #2a6666; border-radius: 6px; padding: 8px 16px; font: 600 13px "Segoe UI", Arial, sans-serif; opacity: 0; pointer-events: none; transition: opacity 0.3s; max-width: 80vw; }
#ci-message.on { opacity: 1; }
#ci-message.erreur { color: #ff8a8a; border-color: #a33; }
/* Harmonie : accords étoffés (septièmes, couleurs, extensions), piano 3 octaves, démos */
#harmonie { --r7: #3d8bff; --r9: #b46cff; --r2: #ff8c2e; --r6: #19b8c9; }
#harmonie.hm-craie { --r7: #6cb0ff; --r9: #d29bff; --r2: #ffab5e; --r6: #4fd8e6; }
:is(#harmonie, #hm-dock) .hm-gauche { width: 230px; gap: 4px; overflow: auto; }
:is(#harmonie, #hm-dock) .hm-types-g { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
:is(#harmonie, #hm-dock) .hm-g-p { grid-template-columns: 1fr 1fr; }
:is(#harmonie, #hm-dock) .hm-types-g .hm-type { padding: 4px 3px; }
:is(#harmonie, #hm-dock) .hm-types-g .hm-type b { font-size: 13px; }
:is(#harmonie, #hm-dock) .hm-types-g .hm-type small { font-size: 9.5px; text-align: center; line-height: 1.15; }
:is(#harmonie, #hm-dock) .hm-col-titre { margin-top: 4px; }
:is(#harmonie, #hm-dock) .hm-piano { width: min(96%, 1040px); aspect-ratio: 6 / 1; }
:is(#harmonie, #hm-dock) .hm-touche.noire { width: 3.5%; }
:is(#harmonie, #hm-dock) .hm-touche .hm-nom { font-size: 11px; }
:is(#harmonie, #hm-dock) .hm-touche.noire .hm-nom { font-size: 8.5px; }
:is(#harmonie, #hm-dock) .hm-touche.r7 { background: var(--r7); } :is(#harmonie, #hm-dock) .hm-touche.r9, :is(#harmonie, #hm-dock) .hm-touche.r11, :is(#harmonie, #hm-dock) .hm-touche.r13 { background: var(--r9); }
:is(#harmonie, #hm-dock) .hm-touche.r2, :is(#harmonie, #hm-dock) .hm-touche.r4 { background: var(--r2); } :is(#harmonie, #hm-dock) .hm-touche.r6 { background: var(--r6); }
:is(#harmonie, #hm-dock) .hm-touche.r7, :is(#harmonie, #hm-dock) .hm-touche.r9, :is(#harmonie, #hm-dock) .hm-touche.r11, :is(#harmonie, #hm-dock) .hm-touche.r13, :is(#harmonie, #hm-dock) .hm-touche.r2, :is(#harmonie, #hm-dock) .hm-touche.r4, :is(#harmonie, #hm-dock) .hm-touche.r6 { color: #111; }
:is(#harmonie, #hm-dock) .hm-n.r7 { color: var(--r7); } :is(#harmonie, #hm-dock) .hm-n.r9, :is(#harmonie, #hm-dock) .hm-n.r11, :is(#harmonie, #hm-dock) .hm-n.r13 { color: var(--r9); }
:is(#harmonie, #hm-dock) .hm-n.r2, :is(#harmonie, #hm-dock) .hm-n.r4 { color: var(--r2); } :is(#harmonie, #hm-dock) .hm-n.r6 { color: var(--r6); }
:is(#harmonie, #hm-dock) .hm-l-pt.r7 { fill: var(--r7); } :is(#harmonie, #hm-dock) .hm-l-pt.r9, :is(#harmonie, #hm-dock) .hm-l-pt.r11, :is(#harmonie, #hm-dock) .hm-l-pt.r13 { fill: var(--r9); }
:is(#harmonie, #hm-dock) .hm-l-pt.r2, :is(#harmonie, #hm-dock) .hm-l-pt.r4 { fill: var(--r2); } :is(#harmonie, #hm-dock) .hm-l-pt.r6 { fill: var(--r6); }
:is(#harmonie, #hm-dock) .hm-l-nom.r7 { fill: var(--r7); } :is(#harmonie, #hm-dock) .hm-l-nom.r9, :is(#harmonie, #hm-dock) .hm-l-nom.r11, :is(#harmonie, #hm-dock) .hm-l-nom.r13 { fill: var(--r9); }
:is(#harmonie, #hm-dock) .hm-l-nom.r2, :is(#harmonie, #hm-dock) .hm-l-nom.r4 { fill: var(--r2); } :is(#harmonie, #hm-dock) .hm-l-nom.r6 { fill: var(--r6); }
:is(#harmonie, #hm-dock) .hm-l-cents.petit, :is(#harmonie, #hm-dock) .hm-l-tons.petit { font-size: 80%; }
:is(#harmonie, #hm-dock) .hm-legende { flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
:is(#harmonie, #hm-dock) .hm-intervalles { display: flex; gap: 22px; flex-wrap: wrap; }
:is(#harmonie, #hm-dock) .hm-intervalles i { color: var(--doux); font-style: normal; }
:is(#harmonie, #hm-dock) .hm-gamme-l { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
:is(#harmonie, #hm-dock) .hm-demos { display: flex; flex-direction: column; gap: 6px; color: #e8f3ee; background: rgba(13, 20, 24, 0.84); border: 1px solid #2a6666; border-radius: 6px; padding: 6px 10px; }
:is(#harmonie, #hm-dock) .hm-demo-l { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
:is(#harmonie, #hm-dock) .hm-demo-l label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
:is(#harmonie, #hm-dock) .hm-demo-vit { width: 80px; }
:is(#harmonie, #hm-dock) .hm-demo-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
:is(#harmonie, #hm-dock) .hm-demo-ac { display: inline-flex; flex-direction: column; align-items: center; padding: 3px 7px; border: 1px solid #2a6666; border-radius: 5px; background: #0d1014; }
:is(#harmonie, #hm-dock) .hm-demo-ac b { color: #ffd76a; font-size: 14px; }
:is(#harmonie, #hm-dock) .hm-demo-ac i { color: #9fe8c8; font-style: normal; font-size: 11px; font-family: Georgia, serif; }
:is(#harmonie, #hm-dock) .hm-demo-ac.joue { background: #0b6e4f; border-color: #2ee6a0; }
:is(#harmonie, #hm-dock) .hm-demo-ac.joue b { color: #fff; }
:is(#harmonie, #hm-dock) .hm-demo-fl { color: #6f8a80; }
:is(#harmonie, #hm-dock) .hm-demo-expl { color: #b9cbc3; font-size: 12px; line-height: 1.35; max-width: 640px; }
/* Métronome LÉGER (PC modeste) : ce qui bouge est dans son propre calque, plus d'animation de clignotement */
#durees .du-rond { position: relative; }
#durees .du-cercle-anim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform; overflow: visible; }
#durees.ob-libre .du-rond .du-cercle-anim { width: 100%; height: 100%; }
#durees .du-centre { z-index: 2; }
#durees .du-curseur.flash { animation: none; }
/* 🔇 Bruit du PC (debruiteur.js) */
#tl-bruit.actif { color: #4ed99a !important; border-color: #4ed99a !important; }
#db-panneau { display: none; position: absolute; z-index: 60; width: 420px; background: #1c2226; border: 1px solid #2a6666; border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.6); color: #e8f3ee; font: 13px 'Segoe UI', sans-serif; padding: 8px 12px 10px; }
#db-panneau.ouvert { display: block; }
#db-panneau .db-tete { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #ffd76a; margin-bottom: 6px; }
#db-panneau .db-empreinte { flex: 1; font-weight: 600; font-size: 12px; color: #ff9a9a; }
#db-panneau .db-empreinte.ok { color: #4ed99a; }
#db-panneau .db-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
#db-panneau button { background: #232b2f; color: #e8f3ee; border: 1px solid #2a6666; border-radius: 5px; padding: 3px 9px; cursor: pointer; font: inherit; }
#db-panneau button:hover:not(:disabled) { border-color: #4ed99a; }
#db-panneau button:disabled { opacity: .45; cursor: wait; }
#db-panneau .db-fermer { padding: 0 6px; background: transparent; border-color: transparent; }
#db-panneau .db-force { width: 130px; accent-color: #4ed99a; }
#db-panneau small { color: #8a9498; }
#db-panneau .db-etat { margin-top: 6px; color: #9fe8c8; font-size: 12px; line-height: 1.35; }
/* capture vidéo : bruit du PC retiré en direct */
.cp-debruit-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-debruit-l button { padding: 2px 8px; }
.cp-debruit-etat { font-size: 11.5px; color: #4ed99a; margin: 2px 0 4px; }
/* Harmonie ➜ Manche : les touches de l'accord marquées sur le clavier du synthé */
#keyboard .accord-guide { box-shadow: inset 0 -14px 0 var(--accord-coul, #ffd76a), 0 0 0 2px var(--accord-coul, #ffd76a); }
#keyboard .accord-guide::after { content: attr(data-accord-role); position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 700 11px 'Segoe UI', sans-serif; color: var(--accord-coul, #ffd76a); pointer-events: none; }
:is(#harmonie, #hm-dock) .hm-manche { color: #2ee6a0; }
:is(#harmonie, #hm-dock) .hm-direct.actif { background: #0b6e4f; border-color: #2ee6a0; color: #fff; }
/* ⇩ Manche : bandeau horizontal d'Harmonie sous le manche */
#harmonie-container { position: relative; margin: 4px 0 6px; }
#hm-dock { position: relative; z-index: 5; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; max-height: 46vh;
    background: #16261f; border: 1px solid #2e6b52; border-radius: 8px; box-shadow: 0 8px 26px rgba(0,0,0,0.55);
    --encre: #eef5f0; --doux: #b9cbc3; --or: #ffd76a; --r1: #ff5a5a; --r3: #ffd76a; --r5: #2ee6a0; --bord: #6f8a80;
    --r7: #6cb0ff; --r9: #d29bff; --r2: #ffab5e; --r6: #4fd8e6;
    font: 600 13px "Segoe UI", Arial, sans-serif; color: var(--encre); }
#hm-dock .hmd-tete { display: flex; align-items: center; gap: 10px; padding: 4px 10px; cursor: default; user-select: none; border-bottom: 1px solid #2e6b52; color: #ffd76a; }
#hm-dock .hmd-tete small { color: #9fe8c8; font-weight: 600; flex: 1; }
#hm-dock .hmd-rangee { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; padding: 8px 10px; overflow-x: auto; overflow-y: auto; }
#hm-dock .hm-bloc { position: relative !important; left: auto !important; top: auto !important; flex: none; max-height: 40vh; overflow: auto;
    background: rgba(13, 20, 24, 0.55); border: 1px solid #2e6b52; border-radius: 6px; padding: 22px 8px 6px; box-sizing: border-box; }
/* chaque bloc mis en largeur */
#hm-dock .hm-gauche { width: auto; max-width: 720px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; }
#hm-dock .hm-gauche .hm-col-titre { width: 100%; margin-top: 0; }
#hm-dock .hm-gauche .hm-types-g { grid-template-columns: repeat(6, auto); }
#hm-dock .hm-gauche .hm-aide { display: none; }
#hm-dock .hm-b-piano { width: 640px; }
#hm-dock .hm-b-piano .hm-piano { width: 100%; }
#hm-dock .hm-b-ligne { width: 420px; }
#hm-dock .hm-b-intervalles { width: 460px; }
#hm-dock .hm-b-degres .hm-degres { flex-wrap: nowrap; }
#hm-dock .hm-demos { width: 620px; }
#hm-dock .hm-barre { flex-wrap: wrap; max-width: 760px; }
#hm-dock .hm-cadences { flex-wrap: nowrap; }
/* le bouton ⇩ Manche de chaque bloc */
.hm-dock-btns { position: absolute; top: 2px; right: 4px; z-index: 3; display: flex; gap: 3px; }
.hm-dock-btns .hm-dock-prec, .hm-dock-btns .hm-dock-suiv { display: none; }
.hm-dans-dock > .hm-dock-btns .hm-dock-prec, .hm-dans-dock > .hm-dock-btns .hm-dock-suiv { display: inline-block; }
.hm-dock-btns button { padding: 0 6px !important; font-size: 11px !important; line-height: 18px;
    background: rgba(11, 110, 79, 0.85) !important; color: #fff !important; border: 1px solid #2ee6a0 !important; border-radius: 4px; cursor: pointer; opacity: 0.8; }
.hm-dock-btns button:hover { opacity: 1; }
.hm-dock-btn-ancien { position: absolute; top: 2px; right: 4px; z-index: 3; padding: 0 6px !important; font-size: 11px !important; line-height: 18px;
    background: rgba(11, 110, 79, 0.85) !important; color: #fff !important; border: 1px solid #2ee6a0 !important; border-radius: 4px; cursor: pointer; opacity: 0.75; }
.hm-dock-btn:hover { opacity: 1; }
:is(#harmonie, #hm-dock) .hm-bloc { position: relative; }

/* 7 yeux (avec 🎹 Harmonie sous le manche) : colonne resserrée pour ne pas monter sur les boutons D1–D5 */
#eye-toggles { gap: 6px; }
.eye-btn { width: 30px; height: 30px; }
.eye-btn svg { width: 26px; height: 26px; }
/* Harmonie sous le manche : la note du manche s'allume quand elle sonne (arpèges, enchaînements) */
.anchored-note.hm-joue circle { animation: hm-manche-joue 0.5s ease-out; }
@keyframes hm-manche-joue {
    0% { stroke: #ffffff; stroke-width: 7px; stroke-opacity: 1; filter: brightness(1.9); }
    60% { stroke: #ffffff; stroke-width: 3px; stroke-opacity: 0.6; filter: brightness(1.3); }
    100% { stroke-width: 0; stroke-opacity: 0; filter: none; }
}
/* outil « pointeur » de la palette de dessin : pas de curseur système, le pointeur de présentation le remplace */
#drawing-canvas.draw-pointeur { cursor: default; }

/* ==================== 〰 FRÉQUENCES (frequences.js) ==================== */
#frequences { display: none; position: absolute; inset: 0; box-sizing: border-box; padding: 58px 1.5% 10px; flex-direction: column; gap: 6px;
    --encre: #1c2a33; --doux: #4a5d68; --or: #9a5b00; --vert: #0b6e4f; --bleu: #1d6fa5; --violet: #6b3fa0;
    font: 600 13px "Segoe UI", Arial, sans-serif; color: var(--encre); }
#frequences.fq-craie { --encre: #eef5f0; --doux: #b9cbc3; --or: #ffd76a; --vert: #2ee6a0; --bleu: #7cc4f0; --violet: #c9a3ff; }
#visio-ecran[data-mode="tableau"] #frequences.on { display: flex; }
#frequences .fq-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: #e8f3ee; background: rgba(13, 20, 24, 0.84);
    border: 1px solid #2a6666; border-radius: 6px; padding: 5px 10px; align-self: flex-start; }
#frequences .fq-titre { color: #ffd76a; font-weight: 700; }
#frequences .fq-lbl { color: #9fe8c8; display: inline-flex; align-items: center; gap: 4px; }
#frequences button, #frequences select, #frequences input { background: #0d1014; color: #ffd700; border: 1px solid #2a6666; border-radius: 4px; padding: 2px 8px; font: 700 13px "Segoe UI", Arial, sans-serif; cursor: pointer; }
#frequences button:hover { background: #1b2a2a; }
#frequences button.actif { background: #0b6e4f; border-color: #2ee6a0; color: #fff; }
#frequences .fq-entree { width: 80px; cursor: text; }
#frequences .fq-vol { width: 90px; }
#frequences .fq-etat { color: #ffd76a; min-width: 160px; }
#frequences .fq-svg { flex: 1; min-height: 0; width: 100%; cursor: ew-resize; }
#frequences .fq-zone-infra { fill: var(--violet); opacity: 0.12; }
#frequences .fq-zone-ultra { fill: var(--bleu); opacity: 0.12; }
#frequences .fq-zone-t { font: 800 15px "Segoe UI", sans-serif; text-anchor: middle; letter-spacing: 1px; }
#frequences .fq-zone-t.infra { fill: var(--violet); } #frequences .fq-zone-t.ultra { fill: var(--bleu); } #frequences .fq-zone-t.audible { fill: var(--vert); font-size: 14px; }
#frequences .fq-zone-s { font: 600 11px "Segoe UI", sans-serif; text-anchor: middle; fill: var(--doux); }
#frequences .fq-ligne { stroke: var(--vert); stroke-width: 5; stroke-linecap: round; }
#frequences .fq-ligne.hors { stroke: var(--doux); stroke-dasharray: 8 6; stroke-width: 3; }
#frequences .fq-cran { stroke: var(--encre); stroke-width: 1.5; }
#frequences .fq-hz { font: 700 12px "Segoe UI", sans-serif; text-anchor: middle; fill: var(--encre); }
#frequences .fq-la { fill: var(--or); } #frequences .fq-la.diap { fill: #ff5a5a; }
#frequences .fq-la-t { font: 700 11px "Segoe UI", sans-serif; text-anchor: middle; fill: var(--or); } #frequences .fq-la-t.diap { fill: #ff5a5a; font-size: 12px; }
#frequences .fq-bande { stroke-width: 6; stroke-linecap: round; opacity: 0.75; }
#frequences .fq-bande.piano { stroke: #c9962e; } #frequences .fq-bande.voix { stroke: #ff8fb0; } #frequences .fq-bande.loutar { stroke: #2ee6a0; } #frequences .fq-bande.sensible { stroke: #ffd76a; }
#frequences .fq-bande-t { font: 600 11px "Segoe UI", sans-serif; text-anchor: middle; fill: var(--encre); }
#frequences .fq-c-trait { stroke: #ffffff; stroke-width: 2; }
#frequences .fq-c-rond { fill: #ffffff; stroke: #111; stroke-width: 2; cursor: grab; }
#frequences .fq-c-boite { fill: rgba(13, 20, 24, 0.92); stroke: #ffd76a; stroke-width: 1.5; }
#frequences .fq-c-note { font: 800 17px "Segoe UI", sans-serif; text-anchor: middle; fill: #ffd76a; }
#frequences .fq-c-hz { font: 700 14px "Segoe UI", sans-serif; text-anchor: middle; fill: #ffffff; }
#frequences .fq-c-440 { font: 800 15px "Segoe UI", sans-serif; fill: #ff5a5a; }
#frequences .fq-bas { display: flex; gap: 12px; max-height: 34%; min-height: 0; }
#frequences .fq-vie { flex: 0 0 360px; display: flex; flex-direction: column; gap: 4px; overflow: auto; background: rgba(13, 20, 24, 0.84); border: 1px solid #2a6666; border-radius: 6px; padding: 6px 8px; }
#frequences .fq-vie-t { color: #ffd76a; font-weight: 700; margin-bottom: 2px; }
#frequences .fq-ex { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; padding: 4px 8px; }
#frequences .fq-ex b { color: #ffd76a; } #frequences .fq-ex small { color: #b9cbc3; font-weight: 500; font-size: 11.5px; }
#frequences .fq-expl { flex: 1; overflow: auto; color: var(--encre); line-height: 1.4; font-weight: 500; column-width: 290px; column-gap: 18px; text-align: left; }
#frequences .fq-vie, #frequences .fq-ex { text-align: left; }
#frequences .fq-expl h4 { margin: 2px 0 2px; color: var(--or); font-size: 13.5px; break-after: avoid; }
#frequences .fq-expl p { margin: 0 0 6px; break-inside: avoid; }

/* ==================== 💾 INSTRUMENTS PERSONNELS (instruments-perso.js) ==================== */
#g-menu .g-menu-sep { height: 1px; margin: 4px 0; background: #2a6666; }
#inst-perso-fen { display: none; position: fixed; inset: 0; z-index: 40000; background: rgba(0,0,0,0.45); align-items: center; justify-content: center; }
#inst-perso-fen.ouvert { display: flex; }
#inst-perso-fen .ip-boite { width: min(520px, 94vw); background: #14181c; border: 1px solid #2a6666; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,0.7);
    color: #e8f3ee; font: 500 13.5px "Segoe UI", Arial, sans-serif; padding: 0 16px 14px; }
#inst-perso-fen .ip-tete { display: flex; align-items: center; justify-content: space-between; margin: 0 -16px 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid #2a6666;
    color: #ffd76a; font-weight: 700; font-size: 15px; }
#inst-perso-fen button { background: #0d1014; color: #e8f3ee; border: 1px solid #2a6666; border-radius: 6px; padding: 5px 12px; cursor: pointer; font: 600 13px "Segoe UI", Arial, sans-serif; }
#inst-perso-fen button:hover:not(:disabled) { background: #1b2a2a; color: #4fd8d8; }
#inst-perso-fen button:disabled { opacity: .4; cursor: default; }
#inst-perso-fen .ip-fermer { padding: 2px 8px; }
#inst-perso-fen .ip-info { line-height: 1.45; margin-bottom: 10px; color: #c9d6cf; }
#inst-perso-fen .ip-info b { color: #ffd76a; }
#inst-perso-fen .ip-l { display: flex; flex-direction: column; gap: 4px; color: #9fe8c8; font-weight: 600; }
#inst-perso-fen .ip-nom { background: #0d1014; color: #fff; border: 1px solid #c9962e; border-radius: 6px; padding: 7px 10px; font: 600 14px "Segoe UI", Arial, sans-serif; }
#inst-perso-fen .ip-btns { display: flex; gap: 8px; justify-content: flex-end; margin: 10px 0 12px; }
#inst-perso-fen .ip-ok { background: #0b6e4f; border-color: #2ee6a0; color: #fff; }
#inst-perso-fen .ip-liste-t { color: #9fe8c8; font-weight: 600; border-top: 1px solid #2a6666; padding-top: 10px; margin-bottom: 6px; }
#inst-perso-fen .ip-ligne { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
#inst-perso-fen .ip-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#inst-perso-fen .ip-vide { color: #8a9a94; font-style: italic; }

/* ==================== 🎬 VISITES GUIDÉES (visite-guidee.js) ==================== */
#visite-btn { position: fixed; top: 12px; right: 142px; z-index: 10000; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #2a6666;
    background: #14181c; color: #c9962e; font-size: 1rem; cursor: pointer; line-height: 1; padding: 0; }
#visite-btn:hover { background: #1b2a2a; }
#vg-menu { position: fixed; top: 52px; right: 100px; z-index: 30000; width: 330px; padding: 8px 0; background: #14181c; border: 1px solid #2a6666; border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6); color: #e8f3ee; font: 500 13px "Segoe UI", Arial, sans-serif; }
#vg-menu .vg-m-tete { padding: 2px 14px 6px; color: #ffd76a; font-weight: 700; }
#vg-menu .vg-m-aide { padding: 0 14px 8px; color: #9fb3c8; font-size: 12px; line-height: 1.4; border-bottom: 1px solid #2a6666; margin-bottom: 4px; }
#vg-menu .vg-m-item { padding: 7px 14px; cursor: pointer; font-weight: 600; }
#vg-menu .vg-m-item:hover { background: #1b2a2a; color: #4fd8d8; }
#vg-menu .vg-m-bientot { padding: 6px 14px 2px; color: #6f8580; font-style: italic; font-size: 12px; }
#vg-souris { position: fixed; z-index: 60000; left: -100px; top: -100px; width: 30px; height: 30px; pointer-events: none; display: none;
    transition-property: left, top; transition-timing-function: ease-in-out; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
#vg-halo { position: fixed; z-index: 59000; pointer-events: none; border: 3px solid #ffd76a; border-radius: 10px; opacity: 0; display: none;
    box-shadow: 0 0 18px rgba(255,215,106,0.65), inset 0 0 12px rgba(255,215,106,0.25); transition: all 0.5s ease; }
#vg-texte { position: fixed; z-index: 60000; left: 50%; bottom: 64px; transform: translateX(-50%); max-width: min(980px, 90vw); display: none;
    padding: 12px 22px; border-radius: 10px; background: rgba(8,10,12,0.86); color: #fff; font: 600 21px/1.4 "Segoe UI", Arial, sans-serif;
    text-align: center; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
#vg-texte.cache { visibility: hidden; }
#vg-texte.vg-apparait { animation: vg-fondu 0.5s ease; }
@keyframes vg-fondu { from { opacity: 0; } to { opacity: 1; } }
#vg-barre { position: fixed; z-index: 60001; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 8px; background: rgba(20,24,28,0.9); border: 1px solid #2a6666; color: #c9d6cf; font: 600 12px "Segoe UI", Arial, sans-serif; opacity: 0.55; transition: opacity 0.2s; }
#vg-barre:hover { opacity: 1; }
#vg-barre .vg-titre { color: #ffd76a; margin-right: 6px; white-space: nowrap; }
#vg-barre .vg-etape { white-space: nowrap; }
#vg-barre .vg-etape { margin-right: 6px; color: #9fb3c8; }
#vg-barre button, #vg-barre select { background: #0d1014; color: #e8f3ee; border: 1px solid #2a6666; border-radius: 5px; padding: 2px 8px; cursor: pointer; font: 600 12px "Segoe UI", Arial, sans-serif; }
#vg-barre button.actif { background: #0b6e4f; border-color: #2ee6a0; }
body.vg-en-cours #vg-souris, body.vg-en-cours #vg-halo, body.vg-en-cours #vg-texte { display: block; }
body.vg-en-cours #vg-barre { display: flex; }
.vg-onde { position: fixed; z-index: 59999; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 3px solid #ffd76a; pointer-events: none;
    animation: vg-onde 0.6s ease-out forwards; }
@keyframes vg-onde { to { width: 54px; height: 54px; margin: -27px 0 0 -27px; opacity: 0; } }
/* 🎙 enregistrer sa voix pour une visite */
#vg-menu .vg-m-rec { font-weight: 500; color: #9fe8c8; padding-left: 28px; }
#vg-rec-barre { position: fixed; z-index: 60001; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 10px; background: rgba(20,24,28,0.96); border: 1px solid #c83a3a; color: #c9d6cf; font: 600 13px "Segoe UI", Arial, sans-serif; white-space: nowrap; }
body.vg-rec #vg-rec-barre { display: flex; }
body.vg-rec #vg-barre, body.vg-rec #vg-souris { display: none !important; }
#vg-rec-barre .vg-titre { color: #ffd76a; margin-right: 6px; }
#vg-rec-barre .vg-etape { color: #9fb3c8; margin-right: 6px; }
#vg-rec-barre button { background: #0d1014; color: #e8f3ee; border: 1px solid #2a6666; border-radius: 6px; padding: 4px 10px; cursor: pointer; font: 600 13px "Segoe UI", Arial, sans-serif; }
#vg-rec-barre button:disabled { opacity: .35; cursor: default; }
#vg-rec-barre .vg-rec-btn { color: #ff6b5a; border-color: #c83a3a; }
#vg-rec-barre .vg-rec-btn.actif { background: #c83a3a; color: #fff; animation: vg-clign 1s steps(2) infinite; }
@keyframes vg-clign { 50% { background: #7a2020; } }
#vg-rec-barre .vg-statut { min-width: 170px; color: #9fb3c8; }
#vg-rec-barre .vg-statut.vert { color: #4ed99a; } #vg-rec-barre .vg-statut.rouge { color: #ff6b5a; }
/* 🎥 filmer une visite : écran-titre au-dessus du manche (1re image = miniature), barre cachée */
#vg-carte { position: fixed; z-index: 60002; left: 50%; top: 110px; transform: translateX(-50%); display: none; text-align: center;
    padding: 18px 48px 20px; border-radius: 14px; background: rgba(12,15,18,0.88); border: 2px solid #c9962e; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
body.vg-carte-on #vg-carte { display: block; }
#vg-carte .vg-c-nom { font: 800 58px/1.1 Georgia, "Times New Roman", serif; color: #f2d27a; letter-spacing: 2px; }
#vg-carte .vg-c-titre { font: 700 28px "Segoe UI", Arial, sans-serif; color: #f5f1e8; margin-top: 6px; }
#vg-carte .vg-c-auteur { font: 600 20px "Segoe UI", Arial, sans-serif; color: #9fe8c8; margin-top: 6px; }
body.vg-film #vg-barre { display: none !important; }

/* ==================== 🔗 LIENS (liens.js) ==================== */
#visio-liens.actif { background: #0b6e4f; border-color: #2ee6a0; color: #fff; }
#liens { display: none; position: absolute; inset: 0; z-index: 50; background: #0d1014; color: #e8f3ee; font: 500 14px "Segoe UI", Arial, sans-serif; }
#liens.on { display: flex; }
#liens .ln-cote { width: clamp(140px, 30%, 250px); flex: none; display: flex; flex-direction: column; border-right: 1px solid #2a6666; background: #14181c; min-height: 0; }
#liens .ln-tete { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #2a6666; color: #ffd76a; font-weight: 700; font-size: 15px; }
#liens .ln-plus { width: 30px; height: 30px; border-radius: 50%; background: #0b6e4f; border: 1px solid #2ee6a0; color: #fff; font: 700 20px/1 "Segoe UI", Arial, sans-serif; cursor: pointer; padding: 0; }
#liens .ln-plus:hover { background: #0e8a63; }
#liens .ln-liste { flex: 1; overflow: auto; padding: 6px 0; }
#liens .ln-aucun { color: #8a9a94; font-style: italic; padding: 14px; text-align: center; line-height: 1.5; }
#liens .ln-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; border-left: 3px solid transparent; }
#liens .ln-item:hover { background: #1b2a2a; }
#liens .ln-item.actif { background: #1b2a2a; border-left-color: #ffd76a; color: #ffd76a; }
#liens .ln-ico { color: #ff6b5a; width: 16px; text-align: center; flex: none; }
#liens .ln-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#liens .ln-form { display: none; flex-direction: column; gap: 6px; padding: 10px; border-top: 1px solid #2a6666; background: #101417; }
#liens .ln-form.ouvert { display: flex; }
#liens .ln-form label { display: flex; flex-direction: column; gap: 3px; color: #9fe8c8; font-weight: 600; font-size: 12.5px; }
#liens .ln-form input { background: #0d1014; color: #fff; border: 1px solid #2a6666; border-radius: 5px; padding: 6px 8px; font: 500 13px "Segoe UI", Arial, sans-serif; }
#liens .ln-form input:focus { border-color: #c9962e; outline: none; }
#liens .ln-f-btns { display: flex; gap: 6px; }
#liens .ln-f-btns button { flex: 1; background: #0d1014; color: #e8f3ee; border: 1px solid #2a6666; border-radius: 6px; padding: 5px 8px; cursor: pointer; font: 600 13px "Segoe UI", Arial, sans-serif; }
#liens .ln-f-btns .ln-ok { background: #0b6e4f; border-color: #2ee6a0; color: #fff; }
#liens .ln-f-info { color: #ff8a7a; font-size: 12.5px; min-height: 0; }
#liens .ln-lecteur { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background: #000; min-width: 0; }
#liens .ln-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#liens .ln-vide { color: #9fb3c8; text-align: center; line-height: 1.6; padding: 20px; }
#liens .ln-vide small { color: #6f8580; }
#liens .ln-note { position: absolute; left: 10px; right: 10px; bottom: 8px; color: #9fb3c8; font-size: 12px; text-align: center; pointer-events: none; }
#ln-menu { position: fixed; z-index: 30000; min-width: 250px; padding: 4px 0; background: #14181c; border: 1px solid #2a6666; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.6); font: 600 13px "Segoe UI", Arial, sans-serif; color: #e8f3ee; }
#ln-menu .ln-m-item { padding: 7px 16px; cursor: pointer; }
#ln-menu .ln-m-item:hover { background: #1b2a2a; color: #4fd8d8; }
#ln-menu .ln-m-sup:hover { background: #c83a3a; color: #fff; }

/* ==================== D0–D9 à gauche, yeux à droite ==================== */
/* Colonne de gauche : les 10 boutons de disposition D0 → D9 prennent la place
   des yeux (18 + 10*32 + 9*12 = 446px), les 10 LED juste au-dessus. */
#dispo-controls { bottom: 18px; }
#led-affichage { bottom: 460px; }
/* Colonne de droite : les 7 yeux, toujours en colonne, au-dessus de Pr1–Pr8
   (#programme-controls : 18 + 8*32 + 7*12 = 358px, +12 d'écart = 370px). */
#eye-toggles { left: auto; right: 16px; bottom: 370px; align-items: center; width: 32px; }
/* Espace net entre les yeux et Pr1 (≈ 36px) : yeux un peu plus serrés pour ne pas monter sur la barre du haut */
#eye-toggles { bottom: 394px; gap: 4px; }
#eye-toggles .eye-btn { width: 28px; height: 28px; }
#eye-toggles .eye-btn svg { width: 24px; height: 24px; }

/* ==================== ⏺ Capture vidéo : fenêtre réglable + 🎞 montage (montage-video.js) ==================== */
#capture-panneau { width: 1180px; height: calc(100vh - 110px); max-height: none; overflow: hidden; padding: 0; min-width: 380px; min-height: 320px; }
#capture-panneau.on { display: flex; flex-direction: column; }
#capture-panneau.plein { inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0; }
#capture-panneau .cp-tete { margin: 0; flex: none; }
#capture-panneau .cp-tete-btns { display: flex; gap: 6px; }
#capture-panneau .cp-plein.actif { background: #0b6e4f; color: #fff; border-color: #2ee6a0; }
#capture-panneau .cp-corps { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 8px 10px 10px; }
#capture-panneau .cp-montage { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#capture-panneau .cp-reglages { width: 360px; flex: none; overflow: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #2a6666 transparent; }
#capture-panneau .cp-reglages > fieldset:first-of-type { margin-top: 0; }
#capture-panneau .cp-apercu { position: relative; flex: 1; min-height: 150px; height: auto; margin: 0; overflow: hidden; }
#capture-panneau .cp-apercu video, #capture-panneau .cp-apercu img { max-width: 100%; max-height: 100%; display: none; object-fit: contain; }
#capture-panneau .cp-apercu.direct video.cp-direct { display: block; }
#capture-panneau .cp-apercu:not(.direct).mv-a-seq .mv-lecteur { display: block; width: 100%; height: 100%; }
#capture-panneau .cp-apercu:not(.direct).mv-a-img .mv-img { display: block; }
#capture-panneau .cp-apercu .mv-vide { display: none; color: #8aa79b; padding: 20px; text-align: center; line-height: 1.6; }
#capture-panneau .cp-apercu:not(.direct).mv-a-vide .mv-vide { display: block; }
#capture-panneau .cp-montage .cp-rec { width: auto; margin: 0; padding: 4px 14px; font-size: 13.5px; }
#capture-panneau .cp-poignee { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 3;
    background: linear-gradient(135deg, transparent 0 50%, #2a6666 50% 58%, transparent 58% 70%, #2a6666 70% 78%, transparent 78%); }
#capture-panneau.plein .cp-poignee { display: none; }
/* fenêtre étroite : tout en une colonne qui défile */
#capture-panneau.etroit .cp-corps { flex-direction: column; overflow: auto; }
#capture-panneau.etroit .cp-reglages { width: auto; overflow: visible; }
#capture-panneau.etroit .cp-apercu { flex: none; height: 200px; }
/* timeline de rognage */
.mv-tl { display: flex; flex-direction: column; gap: 4px; }
.mv-tl-barre { position: relative; height: 54px; background: #0a0d10; border: 1px solid #2a4a4a; border-radius: 4px; overflow: hidden; cursor: crosshair; user-select: none; }
.mv-tl-barre.inactive { cursor: default; opacity: 0.5; }
.mv-film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mv-couches { position: absolute; inset: 0; pointer-events: none; }
.mv-coupe { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(255, 77, 77, 0.75) 0 6px, rgba(20, 10, 10, 0.85) 6px 12px); border-left: 1px solid #ff5a5a; border-right: 1px solid #ff5a5a; }
.mv-sel { display: none; position: absolute; top: 0; bottom: 0; background: rgba(255, 215, 106, 0.28); border: 2px solid #ffd76a; box-sizing: border-box; pointer-events: none;
    color: #ffd76a; font: 700 11px "Segoe UI", Arial, sans-serif; text-shadow: 0 0 3px #000; padding: 1px 3px; white-space: nowrap; overflow: hidden; }
.mv-tete { display: none; position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 4px #000; pointer-events: none; }
.mv-tl-cmd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mv-pos { font: 700 12px Consolas, "Courier New", monospace; color: #fff; min-width: 120px; }
.mv-info { color: #9fe8c8; font-size: 11.5px; }
#capture-panneau .mv-couper:not(:disabled) { color: #fff; background: #5a1414; border-color: #ff5a5a; }
/* bande des 10 conteneurs */
.mv-bande { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.mv-slot { position: relative; aspect-ratio: 16 / 10; min-height: 46px; border: 1px dashed #2a6666; border-radius: 5px; background: #0d1014; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; }
.mv-slot.plein { border-style: solid; cursor: pointer; }
.mv-slot.plein[draggable="true"] { cursor: grab; }
.mv-slot.actif { border: 2px solid #ffd76a; box-shadow: 0 0 6px rgba(255, 215, 106, 0.5); }
.mv-slot.cible { border: 2px solid #2ee6a0; background: rgba(46, 230, 160, 0.12); }
.mv-slot.glisse { opacity: 0.4; }
.mv-slot.manquant { border-color: #7a1616; }
.mv-slot-img { border-color: #6b5a22; }
.mv-slot img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mv-num { position: absolute; top: 2px; left: 3px; z-index: 1; min-width: 14px; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, 0.7); color: #ffd76a; font: 700 10px/14px "Segoe UI", Arial, sans-serif; text-align: center; padding: 0 2px; }
.mv-d { position: absolute; right: 2px; bottom: 2px; background: rgba(0, 0, 0, 0.75); color: #fff; font: 700 10px "Segoe UI", Arial, sans-serif; padding: 0 4px; border-radius: 3px; }
.mv-lib { color: #6f8580; font-size: 10.5px; text-align: center; line-height: 1.25; padding: 2px; }
.mv-lib small { color: #8a7a40; }
.mv-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mv-bas label { color: #9fe8c8; display: flex; align-items: center; gap: 5px; }
.mv-total { color: #ffd76a; font-size: 12px; margin-right: auto; }
#capture-panneau .mv-export { background: #0b6e4f; color: #fff; border-color: #2ee6a0; padding: 5px 14px; font-size: 13.5px; }
#capture-panneau .mv-export:hover { background: #0e8a63; }
#capture-panneau .mv-export.actif { background: #7a1616; border-color: #ff5a5a; }
.mv-etat { color: #9fe8c8; background: rgba(46, 230, 160, 0.07); border: 1px solid #2a6666; border-radius: 4px; padding: 4px 8px; font-size: 12px; }
.mv-etat.erreur { color: #ff8a8a; border-color: #7a1616; background: rgba(255, 77, 77, 0.08); }
#mv-menu { position: fixed; z-index: 30100; min-width: 280px; padding: 4px 0; background: #14181c; border: 1px solid #2a6666; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.6); font: 600 13px "Segoe UI", Arial, sans-serif; color: #e8f3ee; }
#mv-menu .mv-m-item { padding: 7px 16px; cursor: pointer; }
#mv-menu .mv-m-item:hover { background: #1b2a2a; color: #4fd8d8; }
#capture-panneau .cp-reglages { overflow-x: hidden; }
#capture-panneau .cp-reglage > * { min-width: 0; }

/* ==================== TIMELINE : PISTES (comme dans un DAW) ==================== */
#tl-piste-plus { position: absolute; left: 12px; top: 10px; width: 145px; z-index: 3; background: #0b3d2e; color: #7dffb0; border: 1px solid #2ee6a0; border-radius: 5px;
    padding: 4px 8px; font: 700 0.8rem "Segoe UI", Arial, sans-serif; cursor: pointer; }
#tl-piste-plus:hover { background: #0e5a42; }
#tl-pistes { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px -153px; }
.tl-piste { display: flex; gap: 8px; align-items: stretch; cursor: pointer; }
.tl-p-tete { width: 145px; flex: none; box-sizing: border-box; background: #14191d; border: 1px solid #2a4444; border-radius: 5px; padding: 3px 5px; display: flex; flex-direction: column; gap: 3px; }
.tl-piste.active .tl-p-tete { border-color: #ffd76a; box-shadow: 0 0 5px rgba(255, 215, 106, 0.35); }
.tl-piste.muette .tl-p-tete { opacity: 0.6; }
.tl-p-l1 { display: flex; align-items: center; gap: 4px; }
.tl-p-nom { flex: 1; min-width: 0; color: #e8f3ee; font: 700 0.74rem "Segoe UI", Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-piste.active .tl-p-nom { color: #ffd76a; }
.tl-p-l2 { display: flex; gap: 4px; }
.tl-p-tete button { background: #0d1014; color: #c9962e; border: 1px solid #2a6666; border-radius: 4px; font: 700 0.72rem "Segoe UI", Arial, sans-serif; cursor: pointer; padding: 1px 0; line-height: 1.3; }
.tl-p-l2 button { flex: 1; }
.tl-p-tete button:disabled { opacity: 0.35; cursor: default; }
.tl-p-sup { padding: 0 4px !important; font-size: 0.66rem !important; }
.tl-p-m.on { background: #6b5a22; color: #fff; border-color: #ffd76a; }
.tl-p-s.on { background: #1f4f7a; color: #fff; border-color: #6cc4ff; }
.tl-p-e.on { background: #0b6e4f; color: #fff; border-color: #2ee6a0; }
.tl-p-r { color: #ff6b6b !important; }
.tl-p-r.on { background: #a01818; color: #fff !important; border-color: #ff5a5a; animation: tl-rec-cl 1s steps(2) infinite; }
@keyframes tl-rec-cl { 50% { opacity: 0.55; } }
.tl-p-onde { flex: 1; min-width: 0; height: 44px; background: #0d1014; border: 1px solid #2a3030; border-radius: 5px; display: block; }
.tl-piste.active .tl-p-onde { border-color: #6b5a22; }

/* ==================== ◯ CERCLE DES RYTHMES (cercle-rythmes.js) ==================== */
#cercle-rythmes { display: none; position: absolute; inset: 0; box-sizing: border-box; padding: 58px 1.5% 10px; flex-direction: column; gap: 8px;
    --encre: #1c2a33; --doux: #4a5d68; --acc: #0b6e4f; --or: #b07a00; --rouge: #d0202a; --vide: #ffffff; --bord: #2a3a44; --poly: #c9962e;
    font: 600 13px "Segoe UI", Arial, sans-serif; color: var(--encre); }
#cercle-rythmes.cr-craie { --encre: #eef5f0; --doux: #b9cbc3; --acc: #2ee6a0; --or: #ffd76a; --rouge: #ff4d4d; --vide: transparent; --bord: #6f8a80; --poly: #ffd76a; }
#visio-ecran[data-mode="tableau"] #cercle-rythmes.on { display: flex; }
#cercle-rythmes .cr-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: #e8f3ee; background: rgba(13, 20, 24, 0.84);
    border: 1px solid #2a6666; border-radius: 6px; padding: 5px 10px; align-self: flex-start; }
#cercle-rythmes .cr-titre { color: #ffd76a; font-weight: 700; }
#cercle-rythmes .cr-lbl { color: #9fe8c8; display: inline-flex; align-items: center; gap: 4px; }
#cercle-rythmes .cr-sep { width: 1px; align-self: stretch; background: #2a6666; margin: 0 2px; }
#cercle-rythmes button, #cercle-rythmes select, #cercle-rythmes input[type=number], #cercle-rythmes input[type=text] { background: #0d1014; color: #ffd700; border: 1px solid #2a6666; border-radius: 4px;
    padding: 2px 8px; font: 700 13px "Segoe UI", Arial, sans-serif; cursor: pointer; }
#cercle-rythmes input[type=number] { width: 54px; }
#cercle-rythmes input[type=text] { cursor: text; color: #fff; flex: 1; min-width: 0; }
#cercle-rythmes select option { background: #fff; color: #000; }
#cercle-rythmes button:hover { background: #1b2a2a; }
#cercle-rythmes button.actif { background: #7a1616; color: #fff; border-color: #ff5a5a; }
#cercle-rythmes .cr-corps { flex: 1; min-height: 0; display: flex; gap: 1.5%; }
#cercle-rythmes .cr-gauche, #cercle-rythmes .cr-droite { flex: 0 0 auto; width: 270px; display: flex; flex-direction: column; gap: 6px; overflow: auto; min-height: 0;
    background: rgba(13, 20, 24, 0.84); color: #e8f3ee; border: 1px solid #2a6666; border-radius: 6px; padding: 8px; box-sizing: border-box; scrollbar-width: thin; }
#cercle-rythmes .cr-droite { width: 300px; }
#cercle-rythmes .cr-col-t { color: #ffd76a; font-weight: 700; font-size: 14px; border-bottom: 2px solid #ffd76a; padding-bottom: 3px; }
#cercle-rythmes .cr-cat-t { cursor: pointer; color: #9fe8c8; font-weight: 700; padding: 4px 2px; border-bottom: 1px solid #2a4444; }
#cercle-rythmes .cr-cat-t small { color: #6f8a80; font-weight: 600; }
#cercle-rythmes .cr-cat-l { display: none; flex-direction: column; padding: 3px 0 4px 8px; }
#cercle-rythmes .cr-cat.ouv .cr-cat-l { display: flex; }
#cercle-rythmes .cr-item { padding: 3px 6px; border-radius: 4px; cursor: pointer; color: #e8f3ee; font-weight: 600; }
#cercle-rythmes .cr-item:hover { background: #1b2a2a; color: #4fd8d8; }
#cercle-rythmes .cr-item.actif { background: #0b6e4f; color: #fff; }
#cercle-rythmes .cr-suppr { color: #ff8a8a; margin-left: 4px; }
#cercle-rythmes .cr-vide { color: #8aa79b; font-style: italic; font-size: 12px; padding: 3px 4px; }
#cercle-rythmes .cr-ligne { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
#cercle-rythmes .cr-kn b, #cercle-rythmes .cr-temps-v { min-width: 26px; text-align: center; color: #ffd76a; font-size: 18px; }
#cercle-rythmes .cr-kn .cr-lbl { width: 86px; }
#cercle-rythmes .cr-an-n { color: #ffd76a; flex: 1; text-align: center; }
#cercle-rythmes .cr-muet.actif { background: #6b5a22; border-color: #ffd76a; color: #fff; }
#cercle-rythmes .cr-aide { color: #8aa79b; font-size: 11.5px; }
#cercle-rythmes .cr-fiche { border: 1px solid #2a4444; border-radius: 5px; padding: 6px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.35; }
#cercle-rythmes .cr-f-e { color: #ffd76a; font-weight: 700; }
#cercle-rythmes .cr-motif { font-family: Consolas, "Courier New", monospace; letter-spacing: 1px; color: #9fe8c8; word-break: break-all; }
#cercle-rythmes .cr-f-info { color: #b9cbc3; font-style: italic; }
#cercle-rythmes .cr-milieu { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#cercle-rythmes .cr-zone { flex: 1; min-height: 0; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
#cercle-rythmes .cr-svg { width: 100%; height: 100%; max-height: 100%; overflow: visible; }
#cercle-rythmes .cr-rond { fill: none; stroke: var(--encre); stroke-width: 2; opacity: 0.75; }
#cercle-rythmes .cr-anneau.sel .cr-rond { stroke: var(--or); stroke-width: 3; opacity: 1; }
#cercle-rythmes .cr-anneau.muet { opacity: 0.35; }
#cercle-rythmes .cr-poly { fill: none; stroke: var(--poly); stroke-width: 2; stroke-linejoin: round; opacity: 0.9; }
#cercle-rythmes .cr-pt { fill: var(--vide); stroke: var(--encre); stroke-width: 2; cursor: pointer; transform-box: fill-box; transform-origin: center; }
#cercle-rythmes .cr-pt:hover { stroke: var(--acc); stroke-width: 3; }
#cercle-rythmes .cr-pt.plein { fill: #d4a64a; stroke: #8a6a20; }
#cercle-rythmes .cr-pt.s-D { fill: #9a5b00; stroke: #5a3500; }
#cercle-rythmes .cr-pt.s-T { fill: #e8c06a; stroke: #8a6a20; }
#cercle-rythmes .cr-pt.s-K { fill: #f3e0b0; stroke: #8a6a20; }
#cercle-rythmes .cr-pt.joue { animation: cr-joue 0.35s ease-out; }
@keyframes cr-joue { 0% { transform: scale(1.45); filter: drop-shadow(0 0 7px #2ee6a0); } 100% { transform: scale(1); filter: none; } }
#cercle-rythmes .cr-sym { fill: #fff; font-weight: 800; text-anchor: middle; pointer-events: none; font-family: "Segoe UI", Arial, sans-serif; }
#cercle-rythmes .cr-pt.s-T + .cr-sym, #cercle-rythmes .cr-pt.s-K + .cr-sym { fill: #3a2600; }
#cercle-rythmes .cr-temps { stroke: var(--doux); stroke-width: 2; }
#cercle-rythmes .cr-temps.un { stroke: var(--rouge); stroke-width: 4; }
#cercle-rythmes .cr-temps-n { fill: var(--doux); font-size: 13px; text-anchor: middle; font-weight: 700; }
#cercle-rythmes .cr-aig-l { stroke: var(--rouge); stroke-width: 3; stroke-linecap: round; }
#cercle-rythmes .cr-aig-c { fill: var(--rouge); }
#cercle-rythmes .cr-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; max-width: 22%; }
#cercle-rythmes .cr-c-nom { font-size: 13px; font-weight: 700; color: var(--encre); }
#cercle-rythmes .cr-c-e { font: 700 26px "Cambria Math", "Times New Roman", serif; color: var(--or); }
#cercle-rythmes .cr-c-tag { font-size: 13px; font-weight: 800; color: #3a7ad0; letter-spacing: 1px; }
#cercle-rythmes.cr-craie .cr-c-tag { color: #6cc4ff; }
#cercle-rythmes .cr-legende { flex: none; max-width: 92%; background: rgba(13, 20, 24, 0.9); color: #e8f3ee;
    border: 1px solid #ffd76a; border-radius: 8px; padding: 8px 14px; text-align: center; font-size: 15px; line-height: 1.45; z-index: 2; }
#cercle-rythmes .cr-legende b { color: #ffd76a; font-size: 18px; }
#cercle-rythmes .cr-leg-e { color: #6cc4ff; font-size: 13px; }
#cercle-rythmes .cr-leg-n { color: #8aa79b; font-size: 11px; }
/* la métamorphose ⏱ ↔ ◯ */
#durees.cr-morph-out, #cercle-rythmes.cr-morph-out { animation: cr-out 0.28s ease-in forwards; }
#durees.cr-morph-in, #cercle-rythmes.cr-morph-in { animation: cr-in 0.45s ease-out; }
@keyframes cr-out { to { opacity: 0; transform: scale(0.82) rotate(-12deg); filter: blur(3px); } }
@keyframes cr-in { from { opacity: 0; transform: scale(0.82) rotate(12deg); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
#durees .du-vers-rythmes { background: #0b3d2e !important; color: #7dffb0 !important; border-color: #2ee6a0 !important; }
#cercle-rythmes .cr-nom { flex: 1 1 100% !important; }
#cercle-rythmes .cr-cat-sauver { flex: 1; min-width: 0; }