html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* pas de mise à l'échelle auto du texte (Brave Android : réglage « taille du texte » / font boosting → textes agrandis, mise en page cassée) */
/* Extracted CSS from fret-theory-2026-06-15-bugfix2.html */
/* ── Seuil desktop/mobile ──────────────────────────────────────────────────────────────────────────────
Toutes les media queries de layout desktop de ce fichier utilisent min-width:1024px (7 occurrences,
cf. grep "@media(min-width:1024px)"). Doit rester strictement synchronisé avec DESKTOP_BREAKPOINT dans
app.js (~30 tests window.innerWidth en JS) — CSS n'a aucun moyen natif de faire lire une media query
depuis une custom property, donc cette synchronisation reste manuelle : pour changer le seuil, remplacer
1150 par la nouvelle valeur aux deux endroits (grep "1150px" ici, DESKTOP_BREAKPOINT dans app.js).
Abaissé de 1300 à 1150 (2026-07-25) : sur écran haute définition avec mise à l'échelle Windows élevée
(ex. 14" 2560×1440 à 200%), la largeur CSS effective chute sous l'ancien seuil malgré un grand écran
physique, faisant disparaître la sidebar desktop (bug rapporté). Quelques commentaires isolés plus loin
dans ce fichier mentionnent encore "1300px" dans leur texte descriptif (non fonctionnels, non corrigés
par souci de ne pas modifier des zones non liées à ce fix) — seules les valeurs de @media ci-dessus et
DESKTOP_BREAKPOINT dans app.js font foi. */
/* ── Polices auto-hébergées (vendor/fonts/) ──────────────────────────────────────────────────────────
Anciennement chargées depuis fonts.googleapis.com/fonts.gstatic.com (CDN Google Fonts) — téléchargées
en local pour ne plus dépendre d'un service externe. DM Sans 400 sert aussi pour les poids 500/600 :
Google Fonts publie les mêmes fichiers .woff2 pour ces 3 poids (vérifié dans le CSS généré par
fonts.googleapis.com), donc un seul jeu de fichiers couvre les trois font-weight utilisés ici (400/
500/600). Seuls les sous-ensembles latin + latin-ext sont conservés (pas vietnamese) : suffisant pour
le contenu FR/EN de l'app, évite de télécharger un 3e jeu de fichiers inutile. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('vendor/fonts/dmsans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('vendor/fonts/dmsans-400-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/spacemono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/spacemono-400-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/fonts/spacemono-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/fonts/spacemono-700-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* Symboles musicaux (bloc Unicode U+1D100-1D1FF : 𝅝 𝅗𝅥 𝅘𝅥𝅯 𝄻 𝄽…) — sous-ensemble de Noto Music (OFL, cf.
vendor/fonts/NotoMusic-OFL.txt), 15 Ko, chargé seulement si un de ces caractères est affiché. Audit perf
2026-09-28 : sans police qui les contient en tête de pile, le navigateur cherchait une police de secours à
CHAQUE affichage de la palette de dictée d'Eartrain (mise en page 28 -> 3 ms à CPU ×4). */
@font-face{font-family:'FT Music';font-style:normal;font-weight:400;font-display:block;src:url('vendor/fonts/notomusic-subset.woff2') format('woff2');unicode-range:U+1D100-1D1FF;}
/* ── Polices système en attendant le chargement async ── */
/* Le suffixe commun (Apple Color Emoji...Noto Sans Symbols) sert de repli pour les
glyphes musicaux/symboles (♩♪♫𝅗𝅥⌕◈⊟...) utilisés partout dans l'app en Unicode brut :
sans lui, DM Sans/Segoe UI/Helvetica Neue ne couvrent pas ces blocs et macOS (Safari
et Chrome) affiche des rectangles vides à la place (bug rapporté, absent sur Windows
où les polices système par défaut couvrent ces plages par coïncidence). */
:root{
--fsym:'FT Music','Apple Color Emoji','Segoe UI Symbol','Segoe UI Emoji','Noto Sans Symbols','Noto Sans Symbols 2',system-ui;
--fd:'DM Sans','Trebuchet MS','Arial Black',var(--fsym),sans-serif;
--fm:'Space Mono','Courier New',var(--fsym),monospace;
--fb:'DM Sans','Segoe UI','Helvetica Neue',Arial,var(--fsym),sans-serif;
}
/* Sous-menu au survol (Progressions : Catalogue/Texte/Pool ; Harmony : Accords/Notes/Mélodie), sur les DEUX
barres d'onglets (sidebar desktop verticale #sidebarTabs ET barre horizontale #mainTabs, visible aussi en
desktop large en plus du mode mobile) — hors media query desktop pour s'appliquer aux deux contextes.
.tab-flyout est un FRÈRE du bouton .tab (pas un enfant) : setLang() (cf. app.js) réécrit btn.textContent
sur tous les .tab[data-tab] à chaque changement de langue/chargement, ce qui effacerait silencieusement
un flyout imbriqué comme enfant du bouton. position:fixed (pas absolute) : la sidebar a overflow-x:hidden
(pour son propre scroll vertical), qui coupait/masquait silencieusement un flyout en absolute dès qu'il
dépassait sa largeur (bug constaté : le sous-menu ne s'affichait jamais malgré un état "open" correct en
JS). En fixed, le positionnement (left/top) est calculé dynamiquement par _tabFlyoutInit() en coordonnées
viewport — à droite du bouton pour la sidebar verticale, en dessous pour la barre horizontale (cf. JS).
Affiché/masqué via mouseenter/mouseleave (couvre bouton + flyout) plutôt qu'un simple :hover CSS, pour
tolérer la petite zone morte entre les deux éléments ; un seul flyout ouvert à la fois (_openTabFlyout,
cf. app.js) pour éviter toute superposition en glissant rapidement d'un bouton à l'autre. */
.tab-flyout{
display:none;position:fixed;min-width:150px;z-index:1001;
background:var(--sf);border:1px solid var(--bd);border-radius:0 var(--rl) var(--rl) 0;
box-shadow:2px 2px 10px var(--sh);flex-direction:column;padding:4px;
}
.tab-flyout.tab-flyout-below{border-radius:0 0 var(--rl) var(--rl)}
.tab-flyout.open{display:flex}
.tab-flyout a{
display:block;width:100%;padding:8px 10px;border-radius:5px;background:transparent;
color:var(--tx2);text-align:left;font-family:var(--fb);font-size:.72rem;font-weight:400;cursor:pointer;
transition:all var(--tr);box-sizing:border-box;text-decoration:none;
}
.tab-flyout a:hover{background:var(--s2);color:var(--tx)}
.tab-flyout a:visited{color:var(--tx2)}
/* Module Accords (Chords) : .chords-cols regroupe #voicingGrid + #chStackBuilder — colonne simple par
défaut (mobile/tablette <1150px), passe en 2 colonnes côte à côte au-delà (cf. override dans le bloc
desktop juste en dessous). Règle de base placée ICI, AVANT le bloc @media(min-width:1024px), volontai-
rement : elle doit rester déclarée avant tout override desktop du même sélecteur — sans ça, à spécificité
CSS égale (0-1-0 des deux côtés), la règle la plus TARDIVE dans le fichier gagne la cascade quelle que
soit la largeur d'écran réelle, rendant l'override desktop totalement inopérant (bug constaté : la règle
se trouvait avant à la fin du fichier, après le bloc media — flex-direction:column s'appliquait donc
TOUJOURS, même en desktop large, empêchant les 2 colonnes de jamais s'activer). #chStackBuilder passe en
position:fixed à <1150px (règle dédiée plus bas, inchangée) — cohabite normalement avec ce flux colonne. */
.chords-cols{display:flex;flex-direction:column;gap:10px;min-width:0}
/* ═══ DESKTOP SIDEBAR LAYOUT ═══ */
@media(min-width:1024px){
:root{font-size:26px}
.tg-row-desktop{display:flex!important}
.tg-row-mobile{display:none!important}
/* Subbar Groovebox : jamais de scrollbar visible sur desktop (bug rapporté : "défileurs alors que la
place nécessaire existe" — confirmé par mesure, aucun débordement réel même à 1150px, le seuil desktop
le plus étroit). overflow-x:auto (posé en JS, cf. grooveInitPage) reste nécessaire pour le scroll
tactile en dessous de ce seuil (sidebar en tiroir, largeur potentiellement bien plus étroite) — !important
nécessaire pour surpasser le style inline, seul moyen de désactiver ce comportement UNIQUEMENT au-delà
du breakpoint sans dupliquer toute la construction JS de la barre en 2 variantes. */
#grooveToolbarWrap .subbar,#grooveToolbarWrap .subbar>div{overflow:visible!important}
.pages-container{
flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch;
width:100%;margin:0;padding:0;box-sizing:border-box;
height:100%;gap:0;
}
.page > div:first-child,.page > .sticky-toolbar{
position:sticky;top:0;z-index:100;background:var(--sf);
width:100%;max-width:none;margin:0;border-top:none;
}
.page > *:not(div:first-child):not(.sticky-toolbar){
max-width:1600px;width:100%;margin:0 auto;box-sizing:border-box;
flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
/* Séquenceur (#page-melodie) exempté du plafond 1600px : c'est un piano-roll scrollable, pas un
diagramme de largeur fixe (fretboard/tableau) — la grille de notes garde de toute façon sa
largeur réelle (mesures×zoom, cf. app.js melResize), seul le CONTENEUR (toolbar déjà pleine
largeur, zone de grille, panneau du bas) doit s'étirer jusqu'au bord pour éviter le décalage
visuel toolbar-pleine-largeur / reste-du-module-plus-étroit-et-centré (bug rapporté : "sur
desktop, utiliser toute la largeur disponible"). */
#page-melodie > .sq-body{max-width:none;margin:0;overflow-y:auto;display:block}
/* SURFACE (#page-play) : exemption du plafond 1600px devenue un RÉGLAGE (demande explicite : "fais-en un
paramètre réglable... une option pour toute la surface, une option pour la même taille qu'avant") — au
lieu d'exempter #gsGridWrap/#gsHexGridWrap en permanence comme #page-melodie ci-dessus, l'exemption ne
s'applique plus que sous body.gs-full-width (posée/retirée par gsSetFullWidth, app.js). Sans la classe,
la règle générique juste au-dessus (max-width:1600px) continue de s'appliquer normalement : c'est le
comportement d'ORIGINE, gardé comme valeur par défaut (gsFullWidth=false). */
body.gs-full-width #page-play > #gsGridWrap,body.gs-full-width #page-play > #gsHexGridWrap{max-width:none;margin:0}
body{display:flex;flex-direction:column;height:100vh;height:100dvh}
body>.app-row{display:flex;flex-direction:row;flex:1;min-height:0}
.topbar{position:relative;height:auto;width:100%;z-index:1000;flex-direction:column;flex-shrink:0}
.tb1{flex-direction:row}
.tb2{display:flex}
/* Indice visuel de scroll horizontal sur #mainTabs (même principe que #triadsHeader::after en mobile) :
avec les modules ajoutés au fil du temps, la barre d'onglets déborde dès qu'on tombe sous ~1450px de
large (ex. 2560×1440 zoomé à 200% ≈ 1280px logiques) — .tabs masque déjà volontairement sa propre
scrollbar (cf. .tabs::-webkit-scrollbar), ce qui rendait ce débordement totalement invisible/muet
(perçu comme une mise en page cassée plutôt qu'une liste scrollable). Toujours affiché plutôt que
calculé dynamiquement (JS aurait dû réévaluer à chaque resize/ajout de module) : sans débordement réel,
le dégradé retombe simplement sur le fond identique, donc invisible. */
.tb2{position:relative}
.tb2::after{
content:'';position:absolute;top:0;right:0;bottom:0;width:26px;
background:linear-gradient(to right,transparent,var(--sf));pointer-events:none;
}
/* Réglages "Navigation desktop" (Paramètres > Général) : masque la barre horizontale d'onglets (.tb2) et/ou
la sidebar verticale (.sidebar-desktop) — au moins une reste toujours affichée, cf. setDesktopNavVisibility.
Scopé à ce media query : ces classes n'ont aucun sens en dessous de 1300px, où seule la topbar mobile existe. */
body.hide-topbar-tabs .tb2{display:none}
body.hide-sidebar-tabs .sidebar-desktop{display:none}
/* .desktop-root-row/#desktopRootRowWrap (demande explicite : "un paramètre réglable qui choisit sa
position, topbar ou barre dédiée") : masquée par défaut (le défaut reste .topbar-root-row/
#topbarRootRowWrap dans la topbar), affichée uniquement si l'utilisateur choisit 'dedicated' (cf.
APP_SETTINGS.rootSelectorPosition/setRootSelectorPosition dans app.js, body.root-sel-dedicated posée
par applySettings). Classe DIFFÉRENTE de .topbar-root-row (pas une réutilisation) : les 2 lignes
doivent basculer INDÉPENDAMMENT l'une de l'autre, une classe partagée les aurait fait apparaître/
disparaître ensemble au lieu de s'exclure mutuellement.
Alignée à GAUCHE (demande explicite, contrairement à .topbar-root-row qui reste centrée dans l'espace
restreint de la topbar) : cette ligne lui appartient entièrement, aucune contrainte de partage d'espace
avec #topbarStatus/.tbr ici.
Masquée par défaut en dessous de 1150px via la règle de base (cf. .desktop-root-row{display:none} juste
après .topbar-root-row, plus haut dans ce fichier — BUG CORRIGÉ : cette règle de base manquait
initialement, le
restait display:block par défaut et s'affichait EN PLUS de .tb3 sur mobile,
rapporté avec capture : "double sélecteur de tonalité"). */
.desktop-root-row{display:none}
body.root-sel-dedicated .desktop-root-row{
display:flex;align-items:center;gap:4px;padding:6px 12px;border-bottom:1px solid var(--bd);background:var(--sf);
}
/* Sidebar avec onglets */
.sidebar-desktop{
position:fixed;left:0;top:var(--topbar-h,120px);width:190px;height:calc(100vh - var(--topbar-h,120px));
background:var(--sf);border-right:1px solid var(--bd);overflow-y:auto;overflow-x:hidden;
z-index:999;display:flex;flex-direction:column;gap:0;padding:8px 0;
font-size:.75rem;
}
/* #sidebarTabs (id="sidebarTabs") réutilise la classe .tabs, pensée pour la barre horizontale mobile
(overflow-x:auto, scrollbar-width:none — un swipe n'a pas besoin d'indice visuel). En desktop, ce même
élément devient l'unique wrapper vertical de tous les onglets de la sidebar : sans ce reset, il devenait
LUI-MÊME un 2e scroll container (overflow-y hérité, hauteur figée à celle du parent) empilé sous
.sidebar-desktop — le débordement réel restait scrollable au clavier/molette mais totalement invisible
(pas de scrollbar, pas de fade), lu comme "les derniers onglets ont disparu" sur les hauteurs de fenêtre
réduites (haut zoom Windows sur petit écran haute def, tablette en petite hauteur). En repassant ce
wrapper en hauteur naturelle (overflow:visible), c'est .sidebar-desktop (scrollbar visible, cf. ci-dessus)
qui redevient le seul et unique conteneur de scroll de la sidebar. */
.sidebar-desktop .tabs{overflow:visible;height:auto;flex:none}
.sidebar-desktop .tab{
/* Icônes rapprochées du bord gauche de l'écran (demande explicite, réduit une 2e fois : 8px→4px→2px de
padding gauche) — le padding droit (8px) reste inchangé pour laisser respirer le raccourci clavier
aligné à droite (cf. .tab-kbd-hint, margin-left:auto plus bas). Espacement vertical entre entrées
réduit une 3e fois (demande explicite : "rapproche encore légèrement les noms de modules
(verticalement)") — padding vertical 10px→7px→5px→3px, marge 1px→0 (hauteur totale d'une entrée
~37px→~33px, tout en restant une cible cliquable raisonnable au clavier/à la souris). */
width:100%;padding:3px 8px 3px 2px;border:none;border-left:3px solid transparent;border-radius:0;
background:transparent;color:var(--tx2);text-align:left;font-size:.75rem;
transition:all var(--tr);justify-content:flex-start;gap:6px;height:auto;margin:0;
/* .tab de base a white-space:nowrap — sans overflow:hidden ici, libellé+hint qui dépassent les 190px
de la sidebar débordaient hors du conteneur au lieu d'être contenus (constaté : le hint se faisait
couper à mi-mot, ex. "BACK" pour "Retour"). */
overflow:hidden;
}
.sidebar-desktop .tab.active{
background:var(--s2);border-left-color:var(--c-root);color:var(--tx);font-weight:600;
}
.sidebar-desktop .tab:hover,.sidebar-desktop .tab.nav-hover{background:var(--s2);color:var(--tx)}
/* Colonnes icône/libellé (cf. setLang() dans app.js, qui construit .tab-icon/.tab-label à partir du texte
"icône libellé" existant) — demande explicite : la 1ère lettre de chaque libellé de module doit
s'aligner verticalement sur toute la sidebar, quelle que soit la largeur visuelle du glyphe d'icône
(≋/♪/⬡/〜/𝅗𝅥... n'ont pas tous le même encombrement). .tab-icon prend une largeur fixe et centre son
glyphe dedans ; .tab-label démarre donc toujours au même x sur toutes les lignes. gap existant du
parent .tab (6px, cf. ci-dessus) reste le seul espacement entre les deux colonnes. */
.sidebar-desktop .tab-icon{width:16px;flex-shrink:0;text-align:center}
.sidebar-desktop .tab-label{overflow:hidden;text-overflow:ellipsis}
/* Raccourci clavier associé au module, discret — cf. _syncSidebarShortcutLabels(). Aligné à droite
via margin-left:auto (le .tab parent est déjà display:flex, cf. .tab de base). Couleur plus sombre
que --tx2 (déjà utilisé par le libellé lui-même) pour rester clairement secondaire. max-width+ellipsis
plutôt que flex-shrink:0 seul : un libellé de touche spéciale un peu long (malgré les abréviations de
_kbdBindingLabel) se tronque proprement au lieu de forcer le libellé du module à rétrécir ou de
déborder hors de la sidebar. */
/* min-width:0 nécessaire pour que overflow/text-overflow fassent effet : .tab-kbd-hint est un flex-item
(parent .tab en display:flex), qui reçoit min-width:auto par défaut — ce minimum implicite empêchait
l'ellipsis de s'appliquer (le texte se coupait net sans "…", constaté). */
.tab-kbd-hint{margin-left:auto;padding-left:8px;flex-shrink:0;min-width:0;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fm);font-size:max(10px,.56rem);color:var(--tx3);letter-spacing:.02em}
.sidebar-desktop .tab-sep{display:none}
/* Main content area */
.main-content{
flex:1 1 0;width:auto;min-width:0;
display:flex;flex-direction:column;height:100%;min-height:0;gap:0;
}
.sidebar-desktop{position:relative;top:0;height:100%;flex-shrink:0}
/* Mixeur global (Paramètres > Général > Panneau desktop) — flex sibling de .sidebar-desktop/.main-content
dans .app-row, PAS position:fixed (comportement volontairement différent de .nav-popup, le tiroir
mobile) : masquer/afficher ce panneau (body.hide-mixer-panel) fait regagner/perdre sa largeur à
.main-content automatiquement, sans recalcul JS, même mécanisme que la sidebar. Rempli par
mixerRenderPanel() (cf. app.js). */
body.hide-mixer-panel .mixer-desktop{display:none}
.mixer-desktop{
width:170px;flex-shrink:0;height:100%;background:var(--sf);border-right:1px solid var(--bd);
overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;
padding:10px 8px;font-size:.72rem;box-sizing:border-box;
}
.mixer-desktop .mixer-channel{display:flex;flex-direction:column;gap:3px}
.mixer-desktop .mixer-channel-label{color:var(--tx2);font-size:.62rem;text-transform:uppercase;letter-spacing:.02em}
.mixer-desktop .mixer-channel-val{color:var(--tx3);font-size:.6rem;text-align:right}
/* Lecture par canal (demande explicite : "remplacer le bouton play/stop par un double clic sur le nom du
module") — plus de bouton dédié, le libellé lui-même porte le geste (double-clic, cf.
mixerRenderPanel/_mixerWheelGuard) et l'indicateur visuel (classe .playing, recalée par
_mixerSyncPlayButtons). Point-avant coloré façon "pastille active" plutôt qu'un fond inversé complet
(réservé aux boutons topbar ▶/■ eux-mêmes) — le libellé reste un texte, pas un bouton carré. */
.mixer-desktop .mixer-channel-label.playing{color:var(--c-root)}
.mixer-desktop .mixer-channel-label.playing::before{
content:'●';display:inline-block;margin-right:4px;font-size:max(10px,.55rem);
}
/* Pistes individuelles (Groovebox/Accompagnement, cf. MIXER_CHANNELS.getSubTracks) — dépliées par clic
SUR LA FLÈCHE ▾/▸ uniquement (bug corrigé, signalé : "le simple clic prend du temps avant d'agir...
remplacer par un clic sur la flèche de dépliage, ne plus attendre un double clic") — zone distincte du
libellé (double-clic = Play/Stop, cf. .mixer-channel-label.playing plus haut), jamais superposée. */
.mixer-desktop .mixer-channel-head{display:flex;align-items:center;gap:4px}
.mixer-desktop .mixer-channel-arrow{cursor:pointer;user-select:none;color:var(--tx3);flex-shrink:0;width:12px;text-align:center}
.mixer-desktop .mixer-channel-arrow:hover{color:var(--tx)}
.mixer-desktop .mixer-subtracks{
display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-left:8px;border-left:2px solid var(--bd);
}
.mixer-desktop .mixer-subtrack{display:flex;flex-direction:column;gap:2px}
.mixer-desktop .mixer-subtrack-label{color:var(--tx3);font-size:max(10px,.58rem)}
/* Mixeur intégré à la sidebar (mode "Dans la sidebar", cf. setMixerMode) — mêmes canaux que .mixer-desktop
ci-dessus mais tout en bas de #sidebarTabs, dans la colonne de 190px déjà existante plutôt qu'un panneau
séparé. body.hide-inline-mixer masque aussi le séparateur juste au-dessus (#sidebarMixerSep, cf.
index.html) pour ne pas laisser un simple trait orphelin quand ce mode n'est pas actif. Règles pour
.mixer-inline lui-même déplacées HORS de ce media query (cf. plus bas dans le fichier) : ce panneau a
aussi un équivalent MOBILE (#navMixer, tiroir de navigation, cf. index.html), qui doit rester stylé
sous ce seuil de 1150px — seul body.hide-mixer-panel/.mixer-desktop restent desktop-only ici. */
.page{max-width:100%;width:100%;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.topbar .tbr{display:flex;gap:4px}
.topbar{margin:0;padding:0}
.topbar .ibtn{padding:6px 8px;font-size:.8rem}
/* .logo n'a pas de hauteur de boîte propre (juste du texte centré par .tb1{align-items:center}). Le .82rem
de base (pensé pour le root desktop à 26px, ~21px de corps de police) écrasait visuellement les boutons
ronds/carrés de 28px à côté (cf. .ibtn) — corrigé une première fois à .62rem (~16px), jugé ensuite trop
petit (le logo ne fait plus la hauteur des boutons voisins). .72rem (~19px) vise un compromis : plus
proche des 28px de boîte des boutons sans retomber dans le poids visuel excessif du .82rem d'origine.
Réduit uniquement ici, sur le seuil desktop — le .82rem de base reste inchangé pour mobile/tablette,
où le root plus petit (18px, cf. html{font-size:} en tête de fichier) ne posait pas ce problème. */
.topbar .logo{font-size:.72rem}
/* Canvas/diagram scaling on desktop */
.fbcard{max-width:none !important;width:auto !important;}
#scaleFb,#scalePianoCanvas,#cofCanvas,#azPianoCanvas,#ivFb{
max-width:100%;
height:auto;
}
#strCanvas{max-width:none;}
.page>style{display:none!important}
#page-metro .play-btn{font-size:14px!important;height:34px;min-width:70px}
/* Scopé à l'état "PLAY" uniquement (:not(.beat1)...:not(.beat12)) — cette règle (ID, donc plus spécifique
que toute règle .metro-beatcount même !important) écrasait TOUJOURS la taille des chiffres de temps
(1/2/3/4...) posée par les règles .beatN plus haut, quelle que soit leur valeur, réduisant même un
"8rem" explicite à 20px fixe. Le confinement à "PLAY" (le seul texte pour lequel ce plafond a un sens,
cf. le commentaire équivalent en mobile plus bas) restaure l'agrandissement demandé des chiffres tout en
gardant "PLAY" à sa taille voulue. */
#beatCount:not(.beat1):not(.beat2):not(.beat3):not(.beat4):not(.beat5):not(.beat6):not(.beat7):not(.beat8):not(.beat9):not(.beat10):not(.beat11):not(.beat12){font-size:20px!important;}
#globalMetroBtn{font-size:22px!important;line-height:1;display:flex;align-items:center;justify-content:center}
/* !important nécessaire : la règle de base .vgrid (hors media query, plus bas dans ce fichier — cascade
par ordre d'apparition, pas de conflit de spécificité) fixe minmax(160px,...) pour mobile et gagnait
silencieusement ICI aussi malgré ce bloc desktop, plafonnant les cartes à ~235px de large sur un grand
écran quel que soit le plafond du canvas dans drawVoicing() côté JS (bug constaté : les diagrammes ne
grandissaient pas malgré l'augmentation du plafond JS, cf. son commentaire 380→460).
3 colonnes FIXES (pas auto-fit) — demande explicite : avec auto-fit, le nombre de colonnes qui tiennent
réellement dépend du nombre de cartes ET de leur largeur, donc change d'une qualité d'accord à l'autre
(ex. 3 voicings pour un accord maj, 5 pour un accord m7) — chaque diagramme changeait alors de position
visuelle au clic sur une autre qualité, rendant impossible de suivre un intervalle précis (ex. la tierce)
d'un voicing à l'autre. Un nombre de colonnes fixe garde la même position quel que soit le nombre de
cartes (les qualités avec moins de voicings laissent simplement des cases vides en fin de grille). */
.vgrid{grid-template-columns:repeat(3,1fr)!important}
.vcard{max-width:480px}
.vcard.expanded{max-width:none}
/* Empileur d'intervalles agrandi sur desktop — même retour explicite que les diagrammes ci-dessus (trop
petit à 100% de zoom navigateur sur grand écran). Élargit la tour + sa légende (nom d'étage/sélecteur de
crans) proportionnellement, pour rester lisible sans avoir à monter le zoom du navigateur. */
.ch-stack-col{max-width:620px}
.ch-stack-tower-row{min-height:46px}
.ch-stack-key{width:58px;font-size:.95rem}
.ch-stack-tier-lbl{width:104px;font-size:max(10px,.58rem)}
.ch-stack-cran{padding:4px 9px;font-size:.68rem}
.ch-stack-result{font-size:1.2rem}
/* 2 colonnes desktop : diagrammes à gauche, empileur d'intervalles à droite, chacun avec son propre
scroll indépendant. Remplace un 1er essai (grille seule limitée en hauteur, empileur en flux juste en
dessous) qui réglait bien le "saut" de l'empileur au changement d'empilement, mais créait un nouveau
problème signalé par l'utilisateur : l'empileur déplié pouvait occuper toute la hauteur visible,
masquant complètement les diagrammes au-dessus (les deux partageaient la même colonne verticale, donc
le même budget d'espace total). Deux colonnes séparées : chacune a sa propre hauteur disponible, l'une
ne peut plus jamais grignoter l'espace de l'autre. .chords-cols wrapper ajouté dans le HTML (autour de
#voicingGrid et #chStackBuilder uniquement, PAS #crHeader qui reste pleine largeur au-dessus). */
.chords-cols{flex-direction:row;align-items:flex-start}
#voicingGrid{max-height:calc(100vh - 200px);overflow-y:auto;flex:1;min-width:0}
#chStackBuilder{width:340px;flex-shrink:0;max-height:calc(100vh - 200px);overflow-y:auto;margin-top:0}
/* .diat-play exclu : ce bouton vit dans une rangée normale (pas une .vcard), position:static forcé plus
bas dans le fichier (cf. .vcard-play.diat-play) — top/right n'auraient de toute façon aucun effet sur
un élément static, mais l'exclusion documente explicitement l'intention plutôt que de compter sur ce
comportement implicite. */
.vcard-play:not(.vcard-midi):not(.vcard-png):not(.vcard-clear-centered):not(.diat-play){top:30px!important;right:10px!important}
/* Symétrique du bouton ♪ ci-dessus (même top/inset, juste left au lieu de right) — sans cette règle,
.vcard-zoom gardait sa position de base (top:26px;left:5px, pensée pour le mobile) alors que .vcard-play
était décalé à top:30px;right:10px ici en desktop uniquement : les deux boutons n'étaient donc PAS
désalignés en soi, mais leur désalignement changeait de sens/ampleur entre desktop et mobile — chacun
réagissant à une règle différente (constaté en usage : cohérent sur desktop, décalé sur mobile). */
.vcard-zoom{top:30px!important;left:10px!important}
#voicingGrid{
justify-items:start;
}
/* Rythme desktop : cellules rectangulaires horizontales, hauteur fixe cohérente avec la largeur fixe de
97px posée par JS (rhRenderGrid) — ~48px = même ratio 2/1 que la règle de base (styles.css ~2137),
hauteur fixe plutôt qu'aspect-ratio ici pour ne pas dépendre de la largeur réellement calculée par la
grille (peut différer légèrement de 97px en cas d'arrondi navigateur). */
#page-rhythm .rh-cell{aspect-ratio:unset!important;height:48px;}
#page-rhythm .rh-cell .rh-arrow{font-size:16px!important;}
#page-rhythm .rh-cell .rh-lbl{font-size:9px!important;}
#page-rhythm .rh-play-btn{height:36px;min-width:52px;font-size:14px!important;display:flex;align-items:center;justify-content:center;line-height:1;}
#page-rhythm .rh-tempo{font-size:18px!important;}
#page-rhythm .rh-wrap{max-width:1600px;width:100%;margin-left:auto;margin-right:auto;}
#page-metro .wrap{max-width:1600px;width:100%;margin-left:auto;margin-right:auto;}
/* Cercle du métronome agrandi sur desktop : le wrapper .metro-ring-outer est passé à width:100% (cf.
index.html, plafonné à max-width:560px) pour remplir quasiment toute la largeur de sa colonne au lieu
d'une taille fixe sous-dimensionnée. Le SVG (anneau + aiguille) suit automatiquement via width:100%/
height:100% sur ce wrapper. Le disque central .metro-circle et la police du compteur sont en % du
conteneur (cqw, cf. metro-circle-wrapper container-type plus bas) pour rester proportionnels à la
taille réelle de l'anneau plutôt que fixes en px, qui paraissaient soit trop petits soit trop grands
selon la largeur d'écran réelle entre 1300px et le plafond de 1600px.
Plafond réduit ~20% (560px→440px, 56vh→44vh, demande explicite : "Métronome et Drone moins cohérents
avec le reste de l'app à 100% de zoom que les autres modules") — l'inline style d'origine
(min(100%,560px,56vh)) reste la valeur de base pour mobile, cette règle ne s'applique qu'à
.metro-ring-outer sous ce media query desktop. */
#page-metro .metro-ring-outer{width:min(100%,440px,44vh)!important;}
#page-metro .metro-circle-wrapper{container-type:inline-size}
/* container-type:size (pas seulement inline-size) posé ICI, sur .metro-circle lui-même — les chiffres de
temps (.metro-beatcount.beatN, cqw ci-dessous) doivent suivre la taille RÉELLE du disque après clamp
(min/max-width 110-160px), pas celle du wrapper englobant (jusqu'à 440px) dont ils dérivaient jusqu'ici
via l'ancien container sur .metro-circle-wrapper : le disque étant presque toujours bloqué sur son
plafond de 160px (rarement les 35cqw bruts du wrapper), une taille de police calculée en % du wrapper
produisait un texte bien plus grand que le disque qui le contient (bug rapporté : chiffres énormes,
débordant largement du cercle, illisibles). Un container dédié sur .metro-circle avec container-type:size
(pas inline-size seul : nécessaire pour qu'un width/height CLAMPÉ, pas juste défini, serve de référence
aux cqw internes) résout ce décalage à la source. */
#page-metro .metro-circle{width:35cqw;height:35cqw;min-width:110px;max-width:160px;min-height:110px;max-height:160px;container-type:size;}
/* !important nécessaire : la règle de base #page-metro .metro-beatcount.beatN{font-size:8rem} (hors media
query, plus bas dans ce fichier) a la MÊME spécificité que celle-ci — une media query ne modifie QUE la
condition d'application d'une règle, jamais sa spécificité ; la cascade normale départage alors par ordre
d'apparition dans le fichier, et la règle de base (déclarée après celle-ci) gagnait silencieusement même
ici, à l'intérieur du media query desktop actif (même mécanisme que #page-metro .play-btn/#beatCount
juste au-dessus dans ce même bloc, qui utilisent déjà !important pour la même raison). */
#page-metro .metro-beatcount{font-size:26cqmin!important;}
#page-metro .metro-beatcount.beat1,#page-metro .metro-beatcount.beat2,#page-metro .metro-beatcount.beat3,#page-metro .metro-beatcount.beat4,#page-metro .metro-beatcount.beat5,#page-metro .metro-beatcount.beat6,#page-metro .metro-beatcount.beat7,#page-metro .metro-beatcount.beat8,#page-metro .metro-beatcount.beat9,#page-metro .metro-beatcount.beat10,#page-metro .metro-beatcount.beat11,#page-metro .metro-beatcount.beat12{font-size:58cqmin!important;}
/* .az-wrap n'a plus besoin d'un override ici : la règle générique ci-dessus (".page > *:not(div:first-
child):not(.sticky-toolbar)") lui donne déjà max-width/centrage/overflow:hidden identiques à ce qu'on
veut désormais — .az-wrap ne scrolle plus lui-même, c'est .az-rescard (résultats) qui a sa propre
région de scroll pendant que le manche/clavier restent verrouillés au-dessus (cf. .az-wrap/.az-rescard
dans ce fichier). Un override existait ici quand .az-wrap devait scroller globalement (bug historique
"module analyseur n'est pas scrollable") — devenu redondant avec ce changement de structure. */
#page-drone .drone-wrap{max-width:1600px;width:100%;margin-left:auto;margin-right:auto;}
/* Plafonné sur .rd-wrap (le conteneur commun) plutôt que séparément sur .rd-sticky-player et
.rd-scroll-body — une divergence de calcul entre marge externe (sticky-player) et padding interne
(scroll-body, cf. règle de base plus bas) faisait que les deux n'atteignaient PAS la même largeur
finale malgré des formules en apparence équivalentes (bug rapporté : décalage gauche/droite entre le
titre+BPM et les cartes en dessous). Plafonner une seule fois le parent, laisser les deux enfants
hériter de width:100% (déjà leur comportement par défaut, cf. règles de base), élimine toute
divergence par construction — même stratégie que #page-metro .wrap/#page-drone .drone-wrap ci-dessus. */
#page-eartraining .rd-wrap{max-width:1600px;width:100%;margin-left:auto;margin-right:auto;}
/* Accords : même écrasement pour .chords-main (conteneur scrollable réel du module, cf. plus bas dans ce
fichier) — resté invisible tant que la barre d'empilement des intervalles était en position:sticky
(elle restait à l'écran même sans vrai scroll fonctionnel derrière), mais devenu bloquant une fois le
sticky retiré : la barre partait alors hors champ, inatteignable, sans aucun moyen de scroller jusqu'à
elle (overflow:hidden empêche tout scroll malgré un scrollHeight > clientHeight réel). */
#page-chords .chords-main{overflow:auto!important;}
#page-rhythm .rh-sticky-player{max-width:none;margin-left:0;margin-right:0;}
#page-rhythm .rh-scroll-body{max-width:none;}
/* Cercle des quintes : layout horizontal desktop, bloc centré */
#page-circle .cof-page{
flex-direction:row;
align-items:flex-start;
justify-content:center;
gap:16px;
}
#page-circle .cof-canvas-wrap{
width:50%;
/* Plafond proportionnel (clamp), pas une valeur fixe : un max-width:440px codé en dur convenait au
cas d'origine (2560×1440 zoomé à 200% ≈ 1280px logiques) mais bridait le cercle à cette même taille
sur un écran plus large non zoomé (ex. 3440×1440 à 100% ≈ 1650-1700px logiques disponibles pour
cette colonne) — bug rapporté explicitement ("le cercle est trop petit"). clamp(360px, 32vw, 620px) :
plancher proche de l'ancien plafond (reste raisonnable sur petit écran zoomé), grandit avec la
largeur réelle de viewport au lieu de rester figé, plafonné à 620px pour ne jamais affamer
.cof-right (grille d'accords diatoniques) même sur un très grand écran.
*/
max-width:clamp(360px,32vw,620px);
flex-shrink:0;
}
#page-circle #cofCanvas{
width:100%!important;
height:auto!important;
}
#page-circle .cof-right{
flex:1 1 480px;
max-width:900px;
min-width:0;
display:flex;
flex-direction:column;
gap:8px;
padding-top:8px;
}
#page-circle .cof-deg-table{gap:10px;padding:12px 8px 8px}
#page-circle .cof-deg-row{gap:10px}
#page-circle .cof-deg-label{font-size:.6rem;width:56px}
#page-circle .cof-deg-cell{width:68px;height:68px}
/* #cofDegTable (index.html) est capé à max-width:480px en base (dimensionné pour les cellules 42px
mobile) — jamais relevé quand les cellules sont passées à 68px + label à 56px sur ce breakpoint
desktop, donc la rangée (56 + 7×68 + 8 gaps ≈ 612px) débordait son propre conteneur des deux côtés
(centrage flex sur contenu plus large que la boîte). Le débordement à gauche recouvrait le canvas du
cercle, qui interceptait alors tous les clics sur le label "▶ Maj/Min" (cf. cofPlayRow) — le bouton
semblait ne rien faire alors que sa logique JS fonctionnait (vérifié par appel direct). */
#page-circle .cof-deg-table{max-width:620px}
/* Palier 1024-1279px (audit 2026-10-02) : la colonne à droite du cercle n'offre que ~430px — la rangée de
612px était coupée des deux côtés (labels ▶ Maj/Min et 7e degré). Cellules et écarts réduits pour tenir. */
@media (max-width:1279px){
#page-circle .cof-deg-table,#page-circle .cof-deg-row{gap:5px}
#page-circle .cof-deg-label{width:40px}
#page-circle .cof-deg-cell{width:50px;height:50px}
}
/* Structures : canvas pleine largeur, éditeur en dessous aligné à gauche.
BUG CORRIGÉ (rapporté : "énorme espace vide au-dessus du player" en vue Backing Vidéo) : ce sélecteur
ciblait #page-structures > div:last-child, qui visait #strNativeView tant qu'il était le dernier enfant
direct de la page — l'ajout de #strYoutubeView APRÈS lui (Phase 8, YouTubeBacking) en a fait le nouveau
:last-child, donc height:100%/max-width:none/etc. s'appliquaient désormais à la vue Vidéo (contenu
compact) au lieu de la vue Native (canvas+timeline, censée remplir toute la hauteur) — d'où le grand
vide sous le player. Fix : cibler #strNativeView explicitement par id plutôt que par position DOM. */
#page-structures #strNativeView{
max-width:none;
flex-direction:column !important;
align-items:stretch;
gap:12px;
overflow-y:auto;
overflow-x:hidden;
height:100%;
}
/* Bloc canvas + timeline : pleine largeur */
#page-structures .str-canvas-col{
flex-shrink:0;width:100%;
display:flex;flex-direction:column;gap:8px;
}
/* Timeline : reste horizontale sous le canvas */
#page-structures #strTimeline{
flex-direction:row !important;
/* overflow-y:visible (pas hidden) : le scroll voulu ici est HORIZONTAL uniquement (navigation entre
sections, largeur de bloc fixe) — overflow-y:hidden tronquait le bas des blocs dont les pastilles
d'accords wrappent sur plusieurs lignes (accords nombreux/noms longs dépassant min-height:145px de
.str-block), signalé explicitement par capture. visible laisse chaque bloc dicter sa propre hauteur
réelle au conteneur flex plutôt que de couper ce qui dépasse une hauteur implicite. */
overflow-x:auto;overflow-y:visible;
width:auto;max-width:none;
flex-shrink:0;
scrollbar-width:thin;
padding-bottom:8px;
padding-left:32px;padding-right:32px;
scroll-behavior:smooth;
}
#page-structures .str-timeline-row{flex-shrink:0}
#page-structures #strTimeline::-webkit-scrollbar{height:8px}
#page-structures #strTimeline::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:4px}
#page-structures #strTimeline::-webkit-scrollbar-track{background:transparent}
#page-structures .str-tl-nav{
display:flex!important;align-items:center;justify-content:center;
position:absolute;top:0;bottom:8px;width:26px;z-index:5;
border:1px solid var(--bd);border-radius:var(--r);
background:var(--sf);color:var(--tx2);cursor:pointer;font-size:1rem;
opacity:.85;transition:opacity var(--tr),color var(--tr);
}
#page-structures .str-tl-nav:hover{opacity:1;color:var(--tx)}
#page-structures .str-tl-nav-l{left:0}
#page-structures .str-tl-nav-r{right:0}
/* Contrôles multipiste : LARGEUR RÉDUITE, alignée sur l'éditeur de section (demande explicite :
"uniformiser la largeur des corps sur desktop... controle multipiste et editeur section sur une
largeur réduite [comme actuellement l'editeur de section]") — #strTrackRows héritait jusqu'ici du
même comportement pleine largeur que le canvas/les blocs de section (mesuré : 1714px sur un viewport
1920px, contre 1600px pour #strSectionEditor juste en dessous) alors que canvas et contrôles par piste
n'ont pas la même vocation : le canvas/la frise bénéficient de tout l'espace pour la lecture temporelle,
les lignes de contrôle par piste (curseurs, menus) restent plus lisibles resserrées, comme le panneau
d'édition de section qui les suit. Même max-width/align-self que #strSectionEditor pour un alignement
visuel cohérent entre les 2 blocs. */
#page-structures #strTrackRows{
width:100%;
max-width:1600px;
align-self:center;
}
/* Éditeur : sous le canvas/timeline, aligné à gauche, toujours visible */
#page-structures #strSectionEditor{
width:100%;
max-width:1600px;
align-self:center;
flex-shrink:0;
overflow-y:visible;
display:flex!important;
background:var(--sf);
border:1px solid var(--bd);
border-radius:var(--r);
padding:12px;
gap:10px;
flex-direction:column;
}
/* Structures topbar : sélecteur template limité */
#page-structures #strTemplateSelect{max-width:180px;}
/* Harmony : pills mode plus petites */
.hn-mode-row .hn-mpill{font-size:12px!important;}
/* Drone : layout 2 colonnes sur desktop, cartes uniformisées avec le reste de l'app.
flex-wrap (pas grid à remplissage automatique) : l'ancienne grille alternait gauche/droite dans l'ordre
du DOM sans notion de section, désalignant les cartes dès que "Drone tonal" et "Bruit ambiant/Focus"
n'avaient pas le même nombre de cartes chacun (bug rapporté — pas de séparation visuelle claire à
droite, cartes en face à face décalées). .drone-col (cf. index.html #droneToneCol/#droneFocusCol)
regroupe désormais chaque section dans son propre bloc : "Fréquence" + "Slider Hz" gardent width:100%
pour occuper toute la rangée en premier (pleine largeur, comme avant), puis les deux .drone-col
(largeur naturelle ~50% chacun via flex:1) se placent l'un à côté de l'autre sur la rangée suivante et
empilent CHACUN ses propres cartes verticalement, indépendamment du nombre de cartes en face. */
#page-drone > div:first-child{
display:flex!important;
/* flex-direction:row!important nécessaire : .drone-wrap porte flex-direction:column en style inline
(index.html), jamais contesté ici avant ce correctif (display:grid n'était pas concerné par cette
propriété). Avec column+wrap, flexbox empile les enfants qui débordent en NOUVELLES COLONNES
côte à côte plutôt qu'en nouvelles lignes — d'où le bug rapporté : 3 "colonnes" avec scroll
horizontal au lieu d'une ligne pleine largeur suivie de 2 vraies colonnes. */
flex-direction:row!important;
flex-wrap:wrap;
align-items:flex-start!important;
/* 1600px (pas 900px) : alignée sur #page-metro .wrap, le module le plus large de l'app — le Drone était
nettement plus étroit que tous les autres modules desktop sans raison particulière (demande
utilisateur). */
max-width:1600px;
margin:0 auto;
padding:1rem 1.5rem;
gap:10px!important;
}
/* Fréquence + Slider Hz : pleine largeur (1600px, pas de plafond propre) comme les 2 colonnes en dessous —
forment ensemble une seule "rangée pleine largeur" alignée sur le reste du module plutôt qu'un bloc
centré isolé avec du vide de chaque côté (essai précédent écarté par l'utilisateur). Leur contenu
interne reste centré (text-align:center/justify-content:center déjà en place dans le HTML), donc rien
ne s'étire de façon disproportionnée malgré la carte plus large. */
#page-drone > div:first-child > div:nth-child(1),
#page-drone > div:first-child > div:nth-child(2){
width:100%;
max-width:none!important;
}
#page-drone > div:first-child > .drone-col{
display:flex;flex-direction:column;gap:4px;
flex:1 1 0;min-width:280px;max-width:none!important;
}
/* max-width:400px inline sur chaque .drone-card (utile en mobile, une seule colonne centrée) doit être
neutralisé une fois niché dans .drone-col — sinon les cartes restent plafonnées à 400px même dans une
colonne desktop plus étroite ou plus large que ça, cassant l'alignement visé par ce layout. */
#page-drone > div:first-child > div{max-width:none!important;}
#page-drone > div:first-child .drone-col > *{max-width:none!important;}
#page-drone .drone-card{
background:var(--sf);
border:1px solid var(--bd);
border-radius:var(--rl);
padding:0.4rem 0.7rem;
}
#droneOctRow{flex-wrap:nowrap!important;}
#droneOctRow .pill{font-size:.62rem!important;padding:6px 8px!important;}
/* Bouton ▶ du Drone : 44px de base (cf. index.html) paraît disproportionné à côté des boutons ibtn/pill
du reste de l'app (28px, cf. .ibtn) une fois sur desktop — signalé explicitement ("Métronome et Drone
moins cohérents avec le reste de l'app à 100% de zoom que les autres modules"). ~36px (-18%) desktop
uniquement, mobile inchangé (44px reste une cible tactile appropriée là où le zoom navigateur n'entre
pas en jeu). */
#dronePlayBtn{width:36px!important;height:36px!important;font-size:.95rem!important}
}
/* Mixeur intégré (mode "Dans la sidebar", cf. setMixerMode) — NON scopé à un media query, contrairement à
.mixer-desktop plus haut : ce panneau a 2 emplacements possibles, #sidebarMixer (desktop, dans
.sidebar-desktop) ET #navMixer (mobile, dans le tiroir #navSheet, cf. index.html) — mixerRenderPanel()
choisit dynamiquement lequel remplir selon window.innerWidth, jamais les deux en même temps (cf. son
commentaire dans app.js). Ces règles doivent donc rester actives des 2 côtés du breakpoint 1150px.
body.hide-inline-mixer masque le panneau ET son séparateur (#sidebarMixerSep desktop, #navMixerSep
mobile) quand mixerMode n'est pas 'inline' — un seul point de contrôle CSS pour les 2 emplacements. */
body.hide-inline-mixer #sidebarMixerSep,body.hide-inline-mixer #navMixerSep,body.hide-inline-mixer .mixer-inline{display:none}
.mixer-inline{display:flex;flex-direction:column;gap:8px;padding:6px 10px 4px;font-size:.72rem}
.mixer-inline .mixer-channel{display:flex;flex-direction:column;gap:2px}
.mixer-inline .mixer-channel-label{color:var(--tx2);font-size:.6rem;text-transform:uppercase;letter-spacing:.02em}
.mixer-inline .mixer-channel-val{color:var(--tx3);font-size:max(10px,.58rem);text-align:right}
.mixer-inline .mixer-channel-label.playing{color:var(--c-root)}
.mixer-inline .mixer-channel-label.playing::before{content:'●';display:inline-block;margin-right:4px;font-size:max(10px,.55rem)}
.mixer-inline .mixer-channel-head{display:flex;align-items:center;gap:4px}
.mixer-inline .mixer-channel-arrow{cursor:pointer;user-select:none;color:var(--tx3);flex-shrink:0;width:12px;text-align:center}
.mixer-inline .mixer-channel-arrow:hover{color:var(--tx)}
.mixer-inline .mixer-subtracks{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-left:8px;border-left:2px solid var(--bd)}
.mixer-inline .mixer-subtrack{display:flex;flex-direction:column;gap:2px}
.mixer-inline .mixer-subtrack-label{color:var(--tx3);font-size:max(10px,.58rem)}
/* Mixeur SIDEBAR (desktop) ET tiroir mobile en rangée de faders verticaux (demande explicite : "dans la
sidebar, plutôt utiliser des sliders verticaux. Afficher le texte du module lié au slider DANS le
slider, verticalement, roté à 90° antihoraire" puis étendue : "les ajustements du mixeur doivent aussi
s'appliquer à la sidebar mobile") — .mixer-inline-vertical posé sur #sidebarMixer ET #navMixer (cf.
mixerRenderPanel, mode 'inline' commun aux deux, seul le conteneur cible change selon la largeur réelle
de la fenêtre) ; #desktopMixer (panneau séparé, mode 'mixer'/'both') garde seul le layout .mixer-inline
d'origine ci-dessus, jamais concerné par cette demande.
flex-wrap:wrap plutôt qu'un overflow-x:auto : 7 canaux à ~26px chacun tiennent difficilement sur 190px de
large en une seule rangée sans dépasser — un retour à la ligne (2 rangées de faders) reste plus lisible
qu'un défilement horizontal caché, y compris dans le tiroir mobile plus large mais pas illimité. */
/* BUG CORRIGÉ (rapporté : "la sidebar mobile affiche 5 et 3 sliders au lieu de 4 et 4") — flex-wrap laissait
le nombre de faders par rangée dépendre de la largeur RÉELLE du conteneur, qui diffère entre la sidebar
desktop et le tiroir mobile (#navMixer, cf. .nav-popup, largeur variable 140-200px selon le contenu) :
plus de largeur disponible => la 5e colonne passait avant le retour à la ligne. grid à 4 colonnes FIXES
garantit le même découpage (4 puis 4) quel que soit le conteneur, les 2 partageant maintenant cette
même classe (cf. mixerRenderPanel/isVertical). */
.mixer-inline-vertical{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 10px;justify-items:center}
.mixer-channel-v{display:flex;flex-direction:column;align-items:center;gap:3px;width:26px;flex-shrink:0}
/* Hauteur fixe (pas flex:1 sur toute la sidebar) : une hauteur de fader qui varie avec le nombre de canaux
affichés serait déroutante d'une session à l'autre (Backing/SURFACE apparaissent seulement une fois des
sections existent, cf. _syncGlobalStrPlayBtn) — 120px est un compromis lisible sans dominer toute la
colonne de navigation au-dessus de laquelle ce mixeur est empilé. */
/* border ICI (pas seulement sur .mixer-slider-v, cf. plus bas) — BUG CORRIGÉ (rapporté avec screenshot :
"petit bug d'affichage sur les sliders qui n'ont pas été bougés", les faders à 100% de valeur initiale
apparaissaient comme des blocs gris plats sans aucun contour, contrairement à ceux <100% où le vide
au-dessus du remplissage laissait deviner la bordure de l'input en dessous) — le contour du track ne doit
pas dépendre du remplissage qui le recouvre entièrement à 100%, d'où une bordure portée par le track
LUI-MÊME, toujours visible quelle que soit la valeur du fader. */
.mixer-fader-track{position:relative;width:100%;height:120px;border-radius:4px;overflow:hidden;border:1px solid var(--bd);contain:layout paint style}
/* writing-mode:vertical-lr tout seul écrit le texte de haut en bas (comme .mel-zoom-v ci-dessus, pensé
pour un curseur qu'on lit indifféremment) — "roté à 90° antihoraire" veut dire l'inverse : le début du
texte en BAS, qui se lit en tournant la tête vers la GAUCHE. rotate(180deg) après vertical-lr renverse
l'ordre de lecture sans changer l'axe (toujours vertical), obtenant exactement cette orientation. */
.mixer-slider-v{
/* BUG CORRIGÉ (rapporté : "rendre leur apparence précédente aux sliders (bloc rectangulaire coins
arrondis) plutôt qu'un slider étroit") — appearance:slider-vertical (utilisé au 1er jet, même recette
que .mel-zoom-v ci-dessus) déclenche le rendu natif ANCIEN STYLE du navigateur pour un slider vertical,
un système de dessin ENTIÈREMENT différent de celui utilisé par MIXER_SLIDER_CSS (les faders
horizontaux, jamais touchés par cette demande) — celui-ci pose appearance:none, ce qui laisse
accent-color peindre le même bloc rectangulaire à bords arrondis que sur les faders horizontaux,
seulement tourné de 90°. writing-mode:vertical-lr ne sert plus ici qu'à donner l'AXE de glisser
(vertical), pas l'apparence — d'où appearance:none combiné à lui, plutôt que slider-vertical seul.
DEMANDE SUIVANTE : "remplacer le bouton du slider par un remplissage translucide couleur d'accent" —
le curseur natif (thumb rond, accent-color) est retiré ci-dessous ; le remplissage est désormais un
VRAI ÉLÉMENT séparé (.mixer-fader-fill, cf. plus bas), positionné par JS à chaque changement de valeur
— accent-color seul ne permet pas la translucidité demandée (il peint un thumb opaque, jamais un
dégradé de remplissage), d'où ce chemin entièrement custom plutôt qu'une variante d'accent-color. */
-webkit-appearance:none;-moz-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;
/* -moz-orient:vertical : BUG CORRIGÉ (rapporté avec screenshot Firefox : "pas du tout translucide" — un
bloc gris uni couvrait tout le fader quel que soit le % réel). writing-mode:vertical-lr seul ne fait
tourner que la BOÎTE de l'input sous Firefox, pas la géométrie interne que le moteur utilise pour
calculer/peindre ::-moz-range-track et ::-moz-range-progress — ceux-ci restaient calculés comme si le
slider était HORIZONTAL et pleine largeur, d'où le thème natif gris repeint par-dessus nos overrides
transparent (perdants face au fallback du thème dans cet état). -moz-orient:vertical donne à Firefox la
vraie orientation native du slider, seul moyen fiable d'obtenir un ::-moz-range-track qui respecte
enfin nos règles transparent ci-dessous (confirmé sur Chrome/WebKit sans ce correctif, jamais concerné
par cette propriété non standard, propre à Firefox). */
-moz-orient:vertical;
/* border retirée d'ici (posée dorénavant sur .mixer-fader-track lui-même, cf. son commentaire) — la
garder ICI EN PLUS aurait dessiné 2 contours superposés (2px visibles au lieu d'1) puisque l'input
occupe déjà toute la surface du track (width/height:100%). */
width:100%;height:100%;border:none;background:transparent;border-radius:4px;
cursor:pointer;margin:0;position:relative;z-index:2;
}
/* Piste ET curseur natifs rendus invisibles (le remplissage custom ci-dessous les remplace visuellement),
tout en gardant l'input RÉELLEMENT fonctionnel par-dessus (z-index:2 ci-dessus, au-dessus du fill) :
c'est lui qui reçoit le clic/glisser, jamais le fill (cf. pointer-events:none dessus). */
.mixer-slider-v::-webkit-slider-runnable-track{background:transparent}
.mixer-slider-v::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:transparent;border:none;box-shadow:none}
.mixer-slider-v::-moz-range-track{background:transparent!important;border:none}
.mixer-slider-v::-moz-range-thumb{width:1px;height:1px;background:transparent;border:none;box-shadow:none;opacity:0}
.mixer-slider-v::-moz-focus-outer{border:0}
.mixer-slider-v::-moz-range-progress{background:transparent!important}
/* Remplissage — translucide, couleur d'accent, ANCRÉ EN BAS (une valeur de mixeur qui monte remplit vers le
haut, comme un vrai fader physique). Hauteur posée en style inline par JS (cf. _mixerSetFillV dans
app.js), jamais en CSS pur : un input[type=range] ne calcule sa progression via aucune pseudo-classe/
variable CSS accessible ici (::-moz-range-progress existe mais son équivalent WebKit n'a pas d'API
fiable équivalente) — measurer/écrire la hauteur en JS à chaque 'input' reste la seule méthode qui
fonctionne identiquement sur les 2 moteurs. pointer-events:none : ne doit jamais intercepter le glisser,
qui reste géré par l'input (relevé au-dessus en z-index). */
.mixer-fader-fill{
position:absolute;left:0;bottom:0;width:100%;height:0%;
/* BUG CORRIGÉ 3x (rapporté avec screenshots Chrome desktop ET Firefox : "pas du tout translucide") —
2 pistes essayées et rejetées : (1) opacity:.16 en background simple restait perçu comme un aplat gris
pâle, pas comme un "voile" ; (2) mix-blend-mode:overlay sur fond déjà très sombre (--s3) n'éclaircit
presque rien (overlay a un effet minimal sur des couleurs proches du noir), rendant le remplissage
quasi invisible — pire que le problème initial. Solution retenue : dégradé (pas un aplat) + une bordure
HAUTE nette (border-top) qui matérialise le niveau du fader comme une VRAIE ligne de niveau (repère
visuel qu'un simple aplat ne donne pas), combinés à une opacité modérée qui reste nettement plus claire
que le fond du track SANS atteindre le blanc plein — la juxtaposition dégradé+ligne de crête est ce qui
lit visuellement comme "translucide" plutôt que color:blanc à un %. */
background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.1));
border-top:1px solid rgba(255,255,255,.55);
pointer-events:none;z-index:1;
/* pas de transition : elle retardait chaque pas de 50 ms (glisser en retard sur le doigt, surtout WebView2) */
will-change:height;
}
/* Libellé SUPERPOSÉ au fader (position:absolute, même boîte que .mixer-fader-track), pas à côté ni
au-dessus — c'est la demande explicite : le texte doit apparaître DANS le slider. pointer-events:none
impératif : sans lui, le texte intercepterait le glisser du curseur au lieu de laisser l'input en
dessous le recevoir. rotate(-90deg) : lecture de bas en haut (antihoraire), cf. commentaire ci-dessus —
indépendant de l'orientation du writing-mode du input, qui ne sert ici qu'à donner sa géométrie verticale
au track, pas à orienter ce texte-ci.
ALIGNEMENT (demande explicite : "texte dans les sliders, aligné à gauche (donc en bas)") — le texte
n'est plus centré dans le track mais ANCRÉ EN BAS : left:6px place le bord GAUCHE du texte NON tourné à
6px du bord gauche du track, transform-origin:left center fait pivoter autour de CE bord (pas du centre
du texte) — après rotate(-90deg), ce point d'ancrage se retrouve près du BAS du track (l'axe X devient
l'axe Y), et le texte "part" de là vers le haut, exactement l'équivalent visuel d'un texte aligné à
gauche une fois remis à la verticale. bottom (pas top) + transform pour positionner ce point d'ancrage :
translateY(-50%) recentre seulement sur la LARGEUR du texte tourné (qui devient sa largeur visuelle
verticale), sans quoi le texte entier serait décalé au lieu d'être simplement callé à gauche. */
.mixer-channel-label-v{
/* BUG CORRIGÉ (rapporté : "le texte n'est pas du tout lisible, même à 0%" — donc indépendant du
remplissage, cf. .mixer-fader-fill juste au-dessus) — vérifié via getBoundingClientRect() : le texte
rendait à x:21-41 alors que le track fait x:35-61, quasi tout le texte tombait HORS du track (qui a
overflow:hidden) et était donc rogné, peu importe la couleur/opacité du remplissage. Cause : left:6px
positionne le bord gauche du texte NON tourné à 6px du bord gauche du track, mais rotate(-90deg) pivote
autour de ce point SANS le garder à l'intérieur du track — la largeur du texte (~77px pour "Métronome")
part alors presque entièrement vers la gauche, hors la boîte de 26px de large. Fix : ancrer avec
bottom:0/left:50% (centre horizontal du track, qui devient l'axe de rotation) et ne décaler qu'après
coup avec translate(-50%,-8px) rotate(-90deg) — translate AVANT rotate s'applique dans les coordonnées
non tournées (centre du track), rotate ensuite fait pivoter le texte autour de ce point désormais
correctement à l'intérieur du track. */
/* Rotation d'un texte dont la largeur (non tournée) dépasse largement les 26px du track : la seule
méthode fiable est de placer le POINT DE PIVOT exact où on veut que le texte apparaisse (ici : centré
horizontalement dans le track, ancré près du bas), puis de faire tourner le texte AUTOUR de ce point en
utilisant transform-origin sur ce même point relatif au texte lui-même (0 = bord gauche du texte non
tourné, qui devient son bord BAS une fois tourné à -90°) — width:max-content nécessaire pour que le
texte garde sa largeur naturelle malgré position:absolute (qui sinon le réduirait à la largeur du
parent, 26px, et le ferait retourner à la ligne malgré white-space:nowrap). */
/* Alignement à gauche (demande explicite : "aligne bien à gauche (en bas)") — vérifié par mesure : changer
`left` seul ne déplace PAS le texte horizontalement dans le track (la position visuelle horizontale est
fixée par transform-origin/bottom, pas par left, une fois le texte tourné) — le centrage restait
identique quel que soit left. Le vrai levier pour "aligné à gauche, donc en bas" (texte qui part du bas
du track plutôt que d'être centré verticalement dans sa hauteur) est `bottom` : ramené de 10px à 2px
pour caler le début du texte tout en bas du track plutôt qu'à mi-hauteur. left repassé à 50% (centre du
track, seule valeur confirmée ne PAS faire sortir le texte de la zone overflow:hidden). */
position:absolute;left:50%;bottom:2px;width:max-content;transform-origin:0 50%;
transform:rotate(-90deg);
white-space:nowrap;pointer-events:none;
font-family:var(--fm);font-size:max(10px,.52rem);text-transform:uppercase;letter-spacing:.02em;
/* Couleur adoucie (demande explicite : "réduis légèrement sa couleur de blanc pur à gris léger") —
var(--tx) est blanc quasi pur dans ce thème ; var(--tx2) (gris clair intermédiaire du projet, déjà
utilisé ailleurs pour un texte secondaire toujours lisible) apporte la nuance demandée sans retomber
dans l'illisibilité du contraste initial qui avait motivé var(--tx) ici. Ombre portée conservée
(nécessaire contre le remplissage translucide, cf. .mixer-fader-fill). */
color:var(--tx2);text-shadow:0 0 3px var(--s3),0 0 3px var(--s3);z-index:3;
max-width:106px;overflow:hidden;text-overflow:ellipsis;
}
.mixer-channel-label-v.playing{color:var(--c-root)}
.mixer-channel-val-v{color:var(--tx3);font-size:max(10px,.56rem);font-variant-numeric:tabular-nums;min-height:1.2em}
@media(max-width:1023px){
:root{font-size:18px}
/* .metro-circle fait 108px fixe en mobile (règle de base non scopée par media query, cf. plus bas) —
.metro-beatcount{font-size:4.2rem} (75.6px à 18px de racine) déborde largement ce cercle pour le texte
"PLAY". Taille réduite pour tenir dans le cercle. */
/* Scopé à l'état "PLAY" uniquement (:not(.beat1)...:not(.beat12), même correctif que la règle desktop
équivalente ci-dessus) — écrasait aussi les chiffres de temps en mobile, pas seulement "PLAY". */
#beatCount:not(.beat1):not(.beat2):not(.beat3):not(.beat4):not(.beat5):not(.beat6):not(.beat7):not(.beat8):not(.beat9):not(.beat10):not(.beat11):not(.beat12){font-size:1.6rem!important}
/* Chiffres de temps (1/2/3/4...) en mobile — bug signalé : "coupé par le cercle intérieur du métronome".
Cause distincte du correctif "PLAY" ci-dessus (volontairement non couvert à l'époque, cf. son
commentaire) : la règle de base .metro-beatcount.beatN{font-size:8rem} (règle hors media query, cf. plus
bas dans ce fichier) vaut 144px à 18px de racine mobile, dans un disque .metro-circle fixé à 108px —
débordement mécanique quel que soit le nombre de temps. !important nécessaire : même spécificité que la
règle de base, gagnée sinon par l'ordre d'apparition dans le fichier (même mécanisme déjà documenté sur
la règle desktop équivalente plus haut). ~42px choisi pour tenir confortablement dans les 108px du
disque avec une marge, cohérent avec le rapport déjà retenu pour "PLAY" ci-dessus (28.8px/108px) tout en
restant plus grand qu'un mot de 4 lettres puisqu'un seul chiffre est plus étroit. */
#page-metro .metro-beatcount.beat1,#page-metro .metro-beatcount.beat2,#page-metro .metro-beatcount.beat3,#page-metro .metro-beatcount.beat4,#page-metro .metro-beatcount.beat5,#page-metro .metro-beatcount.beat6,#page-metro .metro-beatcount.beat7,#page-metro .metro-beatcount.beat8,#page-metro .metro-beatcount.beat9,#page-metro .metro-beatcount.beat10,#page-metro .metro-beatcount.beat11,#page-metro .metro-beatcount.beat12{font-size:2.35rem!important}
/* Indice visuel de scroll horizontal sur la subbar Triades (contrôles nombreux, overflow-x:auto sans indice sinon) */
#triadsHeader::after{
content:'';position:absolute;top:0;left:0;height:44px;right:0;width:22px;margin-left:auto;
background:linear-gradient(to right,transparent,var(--sf));pointer-events:none;
}
.sidebar-desktop{display:none}
.mixer-desktop{display:none}
.main-content{margin-left:0;padding-top:0;width:100%}
.pages-container{max-width:100%;margin:0;padding:0}
/* #rhAudioSourceSeg (sélecteur source audio Strum : Voix/Synthétique/Échantillon/Échantillon muet, cf.
index.html) déborde du viewport en mobile depuis l'ajout d'un 4e bouton — bug rapporté par capture.
.pg est partagé par d'autres groupes de pastilles ailleurs dans l'app (flex-shrink:0, pensé pour une
seule ligne compacte) : override scopé ICI plutôt que sur .pg lui-même, pour ne pas changer le
comportement des autres groupes qui n'ont pas ce problème. Passe sur 2 lignes de 2 boutons (demande
explicite) plutôt qu'un scroll horizontal — même pattern déjà utilisé pour .str-track-row-l2 (trop de
contrôles sur une ligne étroite), height:auto nécessaire car .pg fixe height:26px pour le cas 1 ligne. */
/* !important nécessaire : #rhAudioSourceSeg porte un style inline flex-shrink:0 (cf. index.html), plus
spécifique que toute règle de feuille de style — sans !important, cette règle mobile serait purement et
simplement ignorée (constaté : le débordement persistait malgré cette règle avant l'ajout des !important). */
#rhAudioSourceSeg{flex-wrap:wrap!important;height:auto!important;flex-shrink:1!important}
#rhAudioSourceSeg button.pill{flex:1 1 calc(50% - 2px)}
/* .spark-result-row déborde en mobile — cf. les règles mobiles dédiées juste après sa déclaration de base
(grep ".spark-result-row{flex-wrap:wrap" plus bas dans ce fichier) : regroupées là-bas, pas ici, pour
rester APRÈS la règle de base #page-spark .spark-result-chips-mini{flex:1...} dans l'ordre du fichier —
à spécificité égale (#page-spark .classname), la règle la PLUS TARDIVE dans le fichier l'emporte quel
que soit l'ordre d'écriture d'une media query ; les poser ici (avant la base, plus haut dans le fichier)
les aurait rendues silencieusement inopérantes malgré le media query correspondant bien à l'écran
(bug constaté : flex-basis:100% ici n'avait aucun effet, la base flex:1 gagnait toujours). */
/* BUG CORRIGÉ / évolution (demande explicite : "remettre le bouton recherche (T) dans la topbar pour un
accès rapide") — #cmdPaletteTopbarBtn était masqué ici depuis un correctif antérieur ("pour faire de la
place dans la topbar", la loupe vivait alors uniquement dans le tiroir via #cmdPaletteDrawerBtn) ;
restauré en topbar sur demande explicite ultérieure, la copie du tiroir reste en place en plus (aucune
des deux ne porte d'état propre, cmdPaletteOpen() est la même fonction partagée). */
/* Switch de synchro inter-modules : DÉPLACÉ dans Paramètres > Général (demande explicite, cf.
#setGlobalSync dans index.html) — #globalSyncBtn (topbar) reste desktop-only (>=600px, cf.
_syncBtnFitTopbar dans app.js, simplifiée en un simple seuil de largeur depuis ce déplacement), plus de
copie mobile dans le tiroir (#globalSyncDrawerBtn, retirée) à mesurer/basculer. */
.tg-row-desktop{display:none!important}
.tg-row-mobile{display:flex!important}
#page-rhythm.page.active{
position:fixed;left:0;right:0;bottom:0;top:var(--rh-top,0px);
z-index:5;overflow:hidden;
}
/* Structures — pistes du multipiste en 2 lignes sur mobile (demande explicite : "donner 2 lignes par
piste pour la gestion du multipiste") au lieu de tasser 9 colonnes fixes (cf. STR_TRACK_ROW_COLS/
strRenderTrackRows dans app.js) dans une largeur insuffisante. .str-track-row passe de grid (1 ligne,
colonnes fixes desktop) à flex column ; ses 2 groupes internes (.str-track-row-l1 = titre/A/S/P/volume,
.str-track-row-l2 = densité/instrument/octave/pattern) passent de display:contents (invisibles en tant
que conteneurs, enfants directs du grid desktop) à display:flex pour redevenir de vraies lignes
empilées. grid-template-columns neutralisé (sinon persiste sans effet visible mais fausserait tout
recalcul de layout). */
/* Séparation fine mais lisible entre pistes empilées sur 2 lignes (demande explicite) — en plus du
border-bottom existant (1px, var(--bd), déjà sur .str-track-row en desktop comme en mobile) : sur 2
lignes, la limite entre pistes est moins évidente au premier coup d'œil qu'en 1 ligne dense, d'où un
renfort visuel dédié au mobile (marge + bordure légèrement plus contrastée) plutôt que de changer le
border-bottom partagé avec le desktop. */
/* align-items:stretch (pas center, hérité de la règle desktop align-items:center posée en JS sur .str-
track-row — cf. strRenderTrackRows) : avec align-items:center, .str-track-row-l1/-l2 se comportent
comme des flex-items qui RÉTRÉCISSENT à leur contenu puis se centrent horizontalement, chacun à une
largeur DIFFÉRENTE selon son contenu (nom de piste plus ou moins long) — cause exacte du désalignement
signalé par capture (le groupe A/S/P/volume flottait à des positions différentes d'une piste à
l'autre, jamais collé au même bord droit). stretch force l1/l2 à occuper toute la largeur de la ligne,
rendant le margin-left:auto sur le bouton A enfin fiable (bord droit identique sur toutes les pistes). */
.str-track-row{display:flex!important;flex-direction:column;align-items:stretch!important;grid-template-columns:none!important;gap:6px!important;padding-bottom:10px!important;margin-bottom:2px;border-bottom:1px solid var(--bd2)!important}
.str-track-row-l1,.str-track-row-l2{display:flex!important;align-items:center;gap:6px}
/* Ligne 1 (titre/A/S/P/volume) — demande explicite : nom de piste à gauche, A/S/P + slider volume à
droite, alignement IDENTIQUE sur toutes les pistes. Premier essai (flex-wrap:wrap + min-width sur
chaque élément) cassait la ligne différemment selon la longueur du nom de piste ("Rythmique 2" plus
long que "Basse"/"Lead" faisait passer le groupe droit à la ligne suivante sur certaines pistes
seulement — signalé par capture, alignements incohérents d'une piste à l'autre). Fix : flex-wrap
retiré sur cette ligne (jamais de retour à la ligne, largeur totale fixe et connue : 3 boutons 22px +
slider), titre avec overflow:hidden/text-overflow:ellipsis pour absorber toute variation de longueur
de nom SANS pousser le groupe droit — ellipsis déjà en place sur le span interne du titre (cf.
strRenderTrackRows), il suffit que le span.first-child lui-même se limite plutôt que de s'étirer selon
son contenu. margin-left:auto sur le bouton A (1er du groupe droit) plaque A/S/P/volume au bord droit. */
.str-track-row-l1{flex-wrap:nowrap}
.str-track-row-l1>span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.str-track-row-l1>button:nth-child(2){margin-left:auto;flex-shrink:0}
.str-track-row-l1>button{flex-shrink:0}
.str-track-row-l1>input[type="range"]{flex:0 0 110px;width:110px}
/* Ligne 2 (densité/instrument/octave/pattern) : le groupe densité (rateWrap, width:100% en JS pour tenir
dans sa colonne de grid fixe en desktop) est contraint à sa largeur naturelle ici (assez large pour que
½/×1/×2 restent lisibles — un 1er essai plus étroit rognait leur texte), pour tenir sur la même sous-
ligne que le sélecteur d'instrument plutôt que de s'étirer seul sur toute la largeur ; le select de
pattern (dernier enfant, minmax(110px,1fr) en desktop) prend le reste de la largeur. Cette ligne 2 GARDE
flex-wrap:wrap (contrairement à la ligne 1) — 4 contrôles de largeur variable, un passage à la ligne
occasionnel y reste acceptable/attendu (pas de risque d'incohérence puisqu'il n'y a rien à "pousser
à droite" ici, contrairement à la ligne 1). */
.str-track-row-l2{flex-wrap:wrap}
.str-track-row-l2>div:first-child{flex:0 0 auto;width:auto!important;min-width:110px}
.str-track-row-l2>select:not(:last-child){flex:1 1 120px;min-width:90px}
.str-track-row-l2>select:last-child{flex:1 1 140px;min-width:110px}
}
/* Tablette en portrait (700-1023px, audit 2026-10-02) : la 2e ligne de chaque piste se repliait sur 3 lignes
(4 lignes par piste au total) alors que la largeur suffit pour une seule — densité, instrument, octave,
égrenage et motif restent sur la même ligne, le motif prenant la place restante. */
@media (min-width:700px) and (max-width:1023px){
.str-track-row-l2{flex-wrap:nowrap!important}
.str-track-row-l2>*{flex:0 1 auto!important;min-width:0!important;width:auto!important}
.str-track-row-l2>div:first-child{flex:0 0 auto!important;min-width:110px!important}
.str-track-row-l2>select:not(:last-child){flex:0 1 150px!important}
.str-track-row-l2>:last-child{flex:1 1 160px!important}
}
:root{--r:8px;--rl:14px;--tr:.16s ease;--c-root:#ff6b00;color-scheme:dark light}
[data-accent="default"]{--c-root:#ff6b00 !important}
[data-accent="cyan"]{--c-root:#00d9ff !important}
[data-accent="magenta"]{--c-root:#ff006e !important}
[data-accent="lime"]{--c-root:#39ff14 !important}
[data-accent="gold"]{--c-root:#ffd700 !important}
[data-accent="pink"]{--c-root:#ff1493 !important}
[data-accent="red"]{--c-root:#ff3333 !important}
[data-accent="green"]{--c-root:#00ff66 !important}
[data-accent="purple"]{--c-root:#cc33ff !important}
[data-accent="orange"]{--c-root:#ff9933 !important}
[data-accent="teal"]{--c-root:#00ffcc !important}
[data-accent="violet"]{--c-root:#ee82ee !important}
[data-accent="white"]{--c-root:#ffffff !important}
/* input[type=color] rond façon pastille de thème : Chrome/Edge dessinent le swatch via des pseudo-éléments
internes (padding/bordure propres) que les styles inline ne peuvent pas atteindre. */
#setAccentCustom::-webkit-color-swatch-wrapper{padding:0;border-radius:50%}
#setAccentCustom::-webkit-color-swatch{border:none;border-radius:50%}
#setAccentCustom::-moz-color-swatch{border:none;border-radius:50%}
[data-theme="dark"]{--bg:#121218;--sf:#1c1c26;--s2:#242432;--s3:#2c2c3c;--bd:#383850;--bd2:#4a4a60;--tx:#f4f4fc;--tx2:#b0b0cc;--tx3:#8a8aae;--sh:rgba(0,0,0,.55);--pbg:#242432;--phov:#2c2c3c;--ov:rgba(6,6,12,.9);}
/* Palette sombre "Deep" (proche OLED) — alternative à la palette sombre par défaut. */
[data-theme="dark"][data-palette="deep"]{--bg:#000000;--sf:#0a0a0e;--s2:#121218;--s3:#1a1a22;--bd:#2a2a38;--bd2:#3a3a4c;--tx:#f0f0f8;--tx2:#a8a8c8;--tx3:#7d7da6;--sh:rgba(0,0,0,.7);--pbg:#121218;--phov:#1a1a22;--ov:rgba(0,0,0,.94);}
/* Palette sombre "Monochrome" — mêmes NIVEAUX DE LUMINANCE que le thème sombre par défaut ([data-theme=
"dark"] ci-dessus) mais désaturée (R=G=B sur chaque variable, teinte bleue du défaut retirée) : demande
explicite ("garde les nuances du thème sombre par défaut, mais sans la teinte bleue... comme par défaut,
mais désaturé"), distincte de "Deep" (quasi-noir/OLED, jugé trop foncé pour cet usage). Pas plus foncée ni
plus claire que le défaut, seulement neutralisée chromatiquement. */
[data-theme="dark"][data-palette="mono"]{--bg:#141414;--sf:#202020;--s2:#282828;--s3:#303030;--bd:#404040;--bd2:#525252;--tx:#f6f6f6;--tx2:#b8b8b8;--tx3:#929292;--sh:rgba(0,0,0,.55);--pbg:#282828;--phov:#303030;--ov:rgba(8,8,8,.9);}
/* Palette sombre "Monochrome froid" — même principe que "Monochrome" ci-dessus (désaturée, pas de teinte
bleue franche comme le défaut) mais avec un très léger virage froid (B très légèrement > R, quelques
valeurs de moins par canal, à peine perceptible comme couleur mais lisible comme "froid" plutôt que
"chaud") ET légèrement plus sombre que Monochrome/le défaut — sans aller jusqu'au quasi-noir de "Deep"
(--bg #000000). Demande explicite : "une nouvelle palette, monochrome froid, légèrement plus froide et
sombre, mais pas aussi sombre que la profonde". */
[data-theme="dark"][data-palette="monoCold"]{--bg:#0e1012;--sf:#181b1e;--s2:#1f2226;--s3:#272b30;--bd:#383d44;--bd2:#4a5058;--tx:#f0f2f4;--tx2:#a8afb8;--tx3:#828a94;--sh:rgba(0,0,0,.6);--pbg:#1f2226;--phov:#272b30;--ov:rgba(4,5,6,.92);}
/* Palette sombre "mono2" — inspirée de dev/colors.png (capture de panneaux de voies Ableton Live) : gris
neutre-froid façon logiciel audio pro, avec un contraste marqué entre le fond (quasi-noir, très légèrement
bleu-gris) et les surfaces de panneau (nettement plus claires, comme les "channel strips" de la capture)
plutôt que la progression douce des autres palettes mono — vise le look "console de studio" plutôt qu'un
simple gris désaturé. Nom temporaire "mono2" en attendant un nom définitif si l'utilisateur la valide. */
[data-theme="dark"][data-palette="mono2"]{--bg:#131416;--sf:#232529;--s2:#2b2e33;--s3:#34373d;--bd:#454951;--bd2:#585c66;--tx:#e4e6ea;--tx2:#a4a8b0;--tx3:#94969b;--sh:rgba(0,0,0,.6);--pbg:#2b2e33;--phov:#34373d;--ov:rgba(6,7,9,.92);}
/* Palette sombre "Midnight" (bleu marine profond) — 3e option sombre, distincte de Deep (quasi noir/neutre)
par une teinte bleue nette plutôt qu'une simple variation de luminosité. --tx3 vérifié ≈4.8:1 sur --sf. */
[data-theme="dark"][data-palette="midnight"]{--bg:#0a0e1a;--sf:#121a2c;--s2:#182238;--s3:#1e2a44;--bd:#2c3a58;--bd2:#3c4d70;--tx:#eef2fc;--tx2:#a8b4d0;--tx3:#7e8eb0;--sh:rgba(0,0,10,.65);--pbg:#182238;--phov:#1e2a44;--ov:rgba(4,6,16,.94);}
/* Palette sombre "Forêt" (vert profond) — 4e option sombre, teinte verte distincte de Midnight (bleue) et
Deep (neutre). --tx3 vérifié ≈4.6:1 sur --sf. */
[data-theme="dark"][data-palette="forest"]{--bg:#0a140e;--sf:#101e16;--s2:#16281c;--s3:#1c3224;--bd:#2c4a36;--bd2:#3c6048;--tx:#eefcf2;--tx2:#a8ccb0;--tx3:#78a084;--sh:rgba(0,10,4,.65);--pbg:#16281c;--phov:#1c3224;--ov:rgba(4,12,8,.94);}
/* Palette sombre "Vin" (bordeaux profond) — 5e option sombre, seule teinte rouge/pourpre du groupe. --tx3
vérifié ≈4.5:1 sur --sf. */
[data-theme="dark"][data-palette="wine"]{--bg:#160a0e;--sf:#221217;--s2:#2c181e;--s3:#382026;--bd:#54303a;--bd2:#6c3e4a;--tx:#fcecf0;--tx2:#ccaab4;--tx3:#a57e8c;--sh:rgba(10,0,4,.65);--pbg:#2c181e;--phov:#382026;--ov:rgba(12,4,8,.94);}
/* Palette sombre "Violette" (pourpre profond) — 6e option sombre, distincte de Vin (rouge) et Midnight
(bleu) par une teinte violette nette. --tx3 vérifié ≈4.5:1 sur --sf. */
[data-theme="dark"][data-palette="violet"]{--bg:#120a1a;--sf:#1c1228;--s2:#241834;--s3:#302044;--bd:#4a3266;--bd2:#5e4280;--tx:#f4ecfc;--tx2:#c0accc;--tx3:#9484a8;--sh:rgba(8,0,16,.65);--pbg:#241834;--phov:#302044;--ov:rgba(8,4,16,.94);}
/* Sliders de volume par piste (Structures multipiste) — agrandis ×1.5 (demande explicite) via les pseudo-
éléments natifs plutôt que transform:scale, qui grandit le RENDU sans agrandir la BOÎTE de layout et
déborde dans les contrôles voisins d'une grid dense (constaté par capture sur le bouton "½" adjacent).
Tailles de référence : piste/thumb natifs Chrome/Firefox ≈4px/16px — visées ici ≈8px/28px (×1.5-1.75,
un 1er essai plus proche de ×1.4 était passé inaperçu — retour explicite "n'ont pas changé de taille").
overflow:visible sur le conteneur nécessaire : le thumb (28px) dépasse la boîte de l'input (24px) via
margin-top négatif, comme tout slider natif — un overflow:hidden hérité l'aurait rogné. */
.str-vol-slider{-webkit-appearance:none;appearance:none;height:24px;background:transparent;cursor:pointer;overflow:visible}
.str-vol-slider::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:var(--bd)}
.str-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--c-root);margin-top:-10px;border:3px solid var(--sf);box-shadow:0 1px 3px var(--sh)}
.str-vol-slider::-moz-range-track{height:8px;border-radius:4px;background:var(--bd)}
.str-vol-slider::-moz-range-progress{height:8px;border-radius:4px;background:var(--c-root)}
.str-vol-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--c-root);border:3px solid var(--sf);box-shadow:0 1px 3px var(--sh)}
*{box-sizing:border-box;margin:0;padding:0}
/* Désactive la sélection de texte (surbrillance bleue au clic-glisse) sur toute l'app — interface
d'instrument/outil, pas un document à copier. Exception explicite pour les champs éditables
(input/textarea/contenteditable) : y couper/copier/coller doit rester possible. */
*{user-select:none;-webkit-user-select:none}
input,textarea,[contenteditable="true"]{user-select:text;-webkit-user-select:text}
html{font-size:18px;-webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior:none} /* pas d'effet élastique en butée de scroll (WebView Android : la page et la topbar se déformaient) */
body{background:var(--bg);color:var(--tx);font-family:var(--fb);min-height:100vh;display:flex;flex-direction:column;forced-color-adjust:none}
/* Masque toute l'app tant que l'auth n'est pas résolue (cf. auth.js, ftBootAfterAuth) — cible tous les
enfants directs de body SAUF #authScreen, plutôt que d'envelopper l'app existante dans un nouveau
conteneur (aurait risqué de casser des règles CSS qui supposent .topbar/.pages-container enfants
directs de body). Retirée (classe enlevée de body) une fois la session résolue, dev ou réelle. */
body.ft-auth-pending>:not(#authScreen){display:none!important}
/* Masque le HTML statique jusqu'à la fin du boot d'app.js (retirée sur window 'load', cf. app.js) — opacity
et non display/visibility : la mise en page reste calculée (mesures du boot justes) et aucun descendant
ne peut réapparaître par un visibility:visible propre. Filet : retirée aussi après 6 s (index.html). */
body.ft-booting>:not(#authScreen){opacity:0!important}
/* TOPBAR */
.topbar{display:flex;flex-direction:column;border-bottom:1px solid var(--bd);background:var(--sf);position:sticky;top:0;z-index:200;flex-shrink:0}
/* Texture d'interface (topbar/sidebar/ligne dédiée du sélecteur de tonalité/subbars) — demande explicite :
"la barre derrière le sélecteur de tonalité"/"les subbar doivent aussi être affectées", puis "une
continuité de l'image entre les différents éléments". VALIDÉ PAR TEST RÉEL (Playwright, cf. capture) :
un calque UNIQUE ::before sur .ui-bg-enabled, position:fixed;inset:0, SANS transform:scale — les
tentatives précédentes qui gardaient transform:scale(1.06) (utile sur un calque local en inset:-5% pour
masquer le bord flouté d'une boîte, cf. .module-bg-enabled::before plus haut) cassaient le rendu une fois
appliquées à un calque plein-viewport ; sans transform, aucun souci. Chaque barre devient une simple
fenêtre transparente sur ce calque commun : plus de recadrage indépendant par boîte (chacune réétirait
l'image entière sur sa propre largeur avec background-size:cover, d'où la "duplication" visible entre
topbar/subbar de largeurs différentes). */
/* #uiBgRotateLayer :
réel (ajouté dans index.html, juste avant TOPBAR), seul à porter transform:rotate
— un ::before de (cf. calque partagé ci-dessus) ne peut pas avoir lui-même de pseudo-élément
enfant, d'où ce vrai
intermédiaire pour porter la rotation par pas de 90° sans la poser sur le calque
partagé lui-même (qui doit rester sans transform, cf. commentaire ci-dessus sur le calque partagé). Vérifié
pixel par pixel (lecture directe du buffer PNG, capture d'écran trompeuse à l'œil nu sur une photo faible
opacité/désaturée/floutée) : s'affiche correctement, aucun bug d'empilement malgré une fausse piste
initiale (z-index négatif sur un enfant direct de body suspecté à tort). */
#uiBgRotateLayer{display:none;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ui-bg-enabled #uiBgRotateLayer{display:block}
#uiBgRotateLayer::before{content:"";position:absolute;inset:0;
background-image:linear-gradient(rgba(0,0,0,var(--ui-bg-scrim)),rgba(0,0,0,var(--ui-bg-scrim))),var(--ui-bg-image);
background-size:cover;background-position:var(--ui-bg-pos,center);
filter:blur(var(--ui-bg-blur)) saturate(calc(var(--ui-bg-saturation) * 2));opacity:var(--ui-bg-opacity);
transform:scale(var(--ui-bg-zoom,1)) rotate(var(--ui-bg-rotate,0deg));
}
.ui-bg-enabled .topbar,.ui-bg-enabled .sidebar-desktop,.ui-bg-enabled .subbar,body.ui-bg-enabled.root-sel-dedicated .desktop-root-row{isolation:isolate;background:transparent}
.ui-bg-enabled .topbar>.tb1,.ui-bg-enabled .topbar>.tb2,.ui-bg-enabled .topbar>.tb3,.ui-bg-enabled .sidebar-desktop>*{position:relative;z-index:1;background:rgba(0,0,0,.08)}
.ui-bg-enabled .desktop-root-row{position:relative}
.ui-bg-enabled .desktop-root-row>*,.ui-bg-enabled .subbar>*{position:relative;z-index:1}
.tb1{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-bottom:1px solid var(--bd)}
/* Sur très petit écran, la rangée logo+métronome+groovebox+BPM+drone+sélecteur G/C+plein écran ne tient
pas dans 390px de large avec les espacements/largeurs desktop — le bouton plein écran (le seul enfant
sans flex-shrink:0, cf. .tbr plus bas) se faisait pousser hors du viewport et devenait invisible/
inaccessible sur les modules où le sélecteur G/C est affiché (bug constaté en audit). Resserre gap et
largeur du champ BPM plutôt que de masquer un élément — l'app reste utilisable en plein écran depuis
le tiroir de navigation de toute façon, mais le garder ici aussi n'imposait pas de vrai compromis une
fois la place regagnée. */
@media(max-width:480px){
.tb1{gap:2px;padding:0 2px}
#globalBpmInput{width:40px!important;padding:0!important}
/* ⌕/?/⛶ doivent garder la même taille (28px, cf. .ibtn) que les autres boutons de la topbar (▶⠿〜) —
règle explicite : ne jamais rétrécir des boutons topbar pour gagner de la place. Le sélecteur G/C
(2×28px, seul élément aussi large que le logo/BPM après le déplacement de la loupe à côté du logo)
reste le seul candidat de rétrécissement ; gaps/padding/BPM resserrés au maximum ci-dessus pour
compenser le retour de ⌕/?/⛶ à leur taille pleine. */
#gcGuitar,#gcPiano{width:24px!important;height:24px!important;padding:0!important}
.tbr{gap:1px!important}
/* Cellules Strum inclicables sur mobile étroit (signalé explicitement, PLUSIEURS fois — "toujours
complètement inutilisable" même après un premier passage de correctifs) — rhRenderGrid réduit déjà le
nombre de colonnes par ligne sous 480px (cf. app.js _rhNarrowMobile) pour élargir chaque cellule, mais
l'aspect-ratio:2/1 hérité de la règle de base laissait la hauteur suivre passivement, retombant parfois
sous le minimum tactile utilisable (~44px) selon la résolution affichée. Plancher explicite ici.
Bug trouvé (cause racine du signalement répété) : aspect-ratio:unset SANS !important perdait contre la
règle de base #page-rhythm .rh-cell{aspect-ratio:2/1} déclarée PLUS LOIN dans ce fichier (styles.css
~2360) — à spécificité CSS égale, c'est l'ordre dans le FICHIER qui tranche, pas la présence d'un media
query correspondant à l'écran (même piège déjà rencontré et corrigé cette session pour Spark). Résultat
mesuré : aspect-ratio restait "2/1" sur mobile malgré cette règle, forçant une largeur de cellule
MINIMALE de 88px (44×2) quel que soit le nombre de colonnes demandé par gridCols — 6 colonnes × 88px
dépassait largement les ~340px réellement disponibles, débordant hors du conteneur grid (qui ne rogne
pas ses propres pistes en trop par défaut). !important ajouté pour gagner la cascade sans réorganiser
tout le fichier — même technique déjà en place sur la règle desktop jumelle juste au-dessus (~ligne 267,
aspect-ratio:unset!important). */
#page-rhythm .rh-cell{aspect-ratio:unset!important;min-height:44px}
/* #rhClearAllBtn ("vider toute la grille", ✕✕) retiré sur mobile (demande explicite : "gagner une ligne")
— remplace l'ancien fix flex-wrap (le bouton passait sur sa propre ligne faute de place à côté de
#rhColClearRow, qui occupe déjà toute la largeur de la grille sur mobile étroit) : plus la peine de lui
trouver une ligne puisqu'il n'est plus affiché du tout ici. Reste inchangé sur desktop (assez de place à
côté de la grille, cf. règle de base #page-rhythm .rh-col-clear-header{display:flex}). Vider une
colonne individuelle reste possible via #rhColClearRow (✕ par colonne), ou en repassant en Simple/en
rechargeant un pattern — pas de perte de fonctionnalité irréversible, juste un raccourci en moins. */
#page-rhythm #rhClearAllBtn{display:none}
/* Scroll global du module sur mobile (signalé : "le module strum est toujours complètement inutilisable
(mise en page)... la matrice empêche de lire les patterns dans la bibliothèque"). Cause : la règle de
base (styles.css ~2239) découpe .rh-wrap en deux zones flex — .rh-sticky-player (titre+switchs+grille,
flex-shrink:0, jamais rétréci) au-dessus d'une .rh-scroll-body (bibliothèque de patterns) qui hérite
seule de tout l'espace restant et scrolle. Pensé pour desktop, où la grille tient dans une hauteur
raisonnable ; sur mobile, la grille (switchs empilés + N lignes de cellules) mesure couramment 400px+
dans un viewport de ~600-700px de haut, ne laissant que ~100px à .rh-scroll-body — la bibliothèque
devient quasi illisible/inutilisable alors que .rh-sticky-player, non scrollable par construction
(overflow:hidden hérité de .rh-wrap), ne peut pas non plus être réduite. Fix : sur mobile, .rh-wrap
devient LUI-MÊME le conteneur de scroll (une seule colonne, grille + bibliothèque scrollent ensemble)
plutôt que deux zones à comportement différent — .rh-sticky-player perd son flex-shrink:0 (n'a plus de
raison d'être épinglé), .rh-scroll-body perd son propre overflow-y:auto (un seul scroll, pas deux
imbriqués, qui aurait capturé le geste de scroll de façon imprévisible selon la position du doigt). */
/* !important nécessaire : la règle de base #page-rhythm .rh-wrap{overflow:hidden} (styles.css ~2239) est
déclarée PLUS LOIN dans ce fichier — même piège de cascade déjà rencontré et corrigé plusieurs fois
cette session (Spark, .rh-cell aspect-ratio ci-dessus) : à spécificité égale, l'ordre dans le fichier
l'emporte sur la correspondance media query. Vérifié : sans !important, overflow-y restait "hidden"
sur mobile malgré cette règle. */
#page-rhythm .rh-wrap{overflow-y:auto!important;overflow-x:hidden!important}
#page-rhythm .rh-sticky-player{flex-shrink:1!important}
#page-rhythm .rh-scroll-body{overflow-y:visible!important;flex:0 1 auto!important}
}
/* En dessous de 390px (iPhone SE/8 = 375px), la marge ci-dessus ne suffit plus : le sélecteur G/C
(dernier candidat de rétrécissement compatible avec la contrainte tactile, cf. commentaire ci-dessus)
descend encore un peu et perd son gap interne — ⌕/?/⛶ restent à 28px, jamais rétrécis. */
@media(max-width:375px){
#gcGuitar,#gcPiano{width:16px!important;height:16px!important;font-size:max(10px,.55rem)!important}
#gcSelector{gap:0!important}
}
/* Caché par défaut (mobile) — .tb3 garde son rôle de ligne dédiée sous ce seuil (cf. son commentaire dans
le media query desktop juste plus bas). Affiché en display:flex UNIQUEMENT au-delà de 1150px (règle
desktop juste après ce bloc de base) — même principe que .topbar-status, un mécanisme de bascule déjà
établi plutôt qu'un nouveau. DOIT rester ICI, avant la règle desktop qui la surcharge : la cascade CSS
départage par ordre d'apparition à spécificité égale — la poser après aurait à son tour écrasé le
display:flex desktop, cachant le sélecteur MÊME au-delà de 1150px (même bug de cascade que .tb3 lui-même
juste en dessous, cf. son propre commentaire). */
.topbar-root-row{display:none}
/* BUG CORRIGÉ (rapporté avec capture : "sur mobile, j'ai un double sélecteur de tonalité") — cette règle
de base (mobile) manquait entièrement : .desktop-root-row n'avait de display:none QUE dans le media
query desktop (cf. son commentaire un peu plus haut, "toujours masqué en dessous de 1150px" y était
affirmé à tort, sans règle réelle pour l'appliquer) — un
est display:block par défaut, donc
#desktopRootRow (peuplé par le même buildRootRows() que #globalRootRow, cf. app.js) s'affichait EN PLUS
de .tb3 sur mobile, où il n'a jamais eu de rôle. Même principe que .topbar-root-row juste au-dessus :
masqué ICI par défaut, la règle desktop (body.root-sel-dedicated .desktop-root-row) reste inchangée et
continue de le réafficher normalement au-delà de 1150px quand ce réglage est choisi. */
.desktop-root-row{display:none}
.tb2{display:flex;align-items:center;height:36px;padding:0 14px}
.tb3{display:flex;align-items:center;gap:4px;height:32px;padding:0 6px;border-top:1px solid var(--bd);background:var(--sf);overflow-x:auto;overflow-y:hidden;flex-shrink:0;scrollbar-width:none}
.tb3::-webkit-scrollbar{display:none}
/* BUG CORRIGÉ (rapporté avec capture : "le sélecteur n'a pas bougé") — ce bloc desktop DOIT venir APRÈS
la règle de base .tb3{display:flex} ci-dessus : à spécificité égale (même sélecteur simple .tb3), la
cascade CSS départage par ordre d'APPARITION dans le fichier, jamais par la présence d'un media query —
un 1er jet plaçait .tb3{display:none} dans le tout premier bloc @media(min-width:1024px) du fichier
(tout en haut), avant cette règle de base, qui la réécrasait donc silencieusement à display:flex malgré
le media query actif. Déplacé ici, physiquement après, pour que ce display:none gagne réellement. */
@media(min-width:1024px){
/* .tb3 (sélecteur de tonalité + mini-accordeur) masqué en desktop — demande explicite : "déplacer le
sélecteur de tonalité global dans la barre supérieure pour libérer de la hauteur" — remplacé par
#topbarRootRowWrap directement dans .tb1, cf. .topbar-root-row plus bas. Reste affiché tel quel en
mobile (hors de ce media query), où il garde son rôle historique de ligne dédiée sous les onglets. */
.tb3{display:none}
/* min-width:0 (pas overflow-x ici : .rrow interne à #topbarRootRow a déjà son propre overflow-x:auto +
scrollbar masquée, cf. .rrow/.rrow::-webkit-scrollbar plus bas dans ce fichier) — filet de sécurité si
la fenêtre desktop est juste au-dessus du seuil 1150px et que l'espace restant entre #topbarStatus et
.tbr devient trop étroit pour les 12 pastilles + le bouton accordeur : sans min-width:0, ce wrapper
(flex item comme les autres enfants de .tb1) ne rétrécirait jamais sous sa largeur intrinsèque,
empêchant .rrow de scroller et débordant plutôt toute la topbar. */
.topbar-root-row{display:flex;align-items:center;gap:4px;flex-shrink:1;min-width:0;margin:0 auto}
/* Bascule inverse de .desktop-root-row/#desktopRootRowWrap (cf. son propre commentaire, plus haut dans
ce fichier) — les 2 présentations ne doivent jamais coexister. DOIT rester après la règle display:flex
ci-dessus (même sélecteur simple .topbar-root-row, cascade CSS départagée par ordre d'apparition à
spécificité égale, cf. le bug déjà documenté pour .tb3 un peu plus haut dans ce fichier). */
body.root-sel-dedicated .topbar-root-row{display:none}
/* #topbarStatus (flex:1 1 auto par défaut, cf. règle de base plus bas) grandirait pour occuper TOUT
l'espace à sa gauche avant que .topbar-root-row n'ait la moindre chance d'utiliser margin:0 auto pour
se centrer symétriquement — le sélecteur se retrouverait alors collé juste après lui, pas "centré
dans l'espace disponible" comme demandé. flex-grow:0 ici (flex-shrink:1 gardé, pour que l'ellipsis
du texte long continue de fonctionner si jamais l'espace vient à manquer) laisse le VRAI espace
restant être réparti symétriquement par le margin:auto du sélecteur. */
#topbarStatus{flex-grow:0}
}
/* Repliée sur les modules sans fondamentale (Métronome, Dictée, cf. switchTab) — gagne les 32px+bordure
de hauteur qu'occupait la rangée de sélection de tonalité, sans effet ici. Scopé au mobile : en desktop
la sidebar laisse largement la place, pas besoin de récupérer cet espace. */
@media(max-width:1023px){
.tb3.tb3-hidden{height:0;padding:0;border-top:none;overflow:hidden}
}
.logo{font-family:var(--fd);font-weight:800;font-size:.82rem;white-space:nowrap;color:var(--tx);letter-spacing:.04em;flex-shrink:0}
.logo em{color:var(--c-root);font-style:normal}
.ctx-badge{display:flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;border:1px solid var(--bd);background:var(--s2);font-family:var(--fm);font-size:max(10px,.55rem);color:var(--tx2);cursor:pointer;transition:all var(--tr);flex-shrink:0}
.ctx-badge:hover{border-color:var(--c-root);color:var(--c-root)}
.ctx-root{font-weight:700;color:var(--tx)}
.tsep{width:1px;background:var(--bd);align-self:stretch;margin:6px 3px;flex-shrink:0}
.tabs{display:flex;overflow-x:auto;flex:1;border-left:1px solid var(--bd);padding-left:8px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs::-webkit-scrollbar{height:3px}
.tabs::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}
.tab{padding:0 13px;height:100%;display:flex;align-items:center;gap:5px;border:none;background:transparent;color:var(--tx2);font-family:var(--fb);font-size:.8rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:all var(--tr);white-space:nowrap;flex-shrink:0;-webkit-tap-highlight-color:transparent;text-decoration:none;user-select:none;-webkit-user-select:none}
.tab:visited{color:var(--tx2)}
@media(hover:hover){.tab:hover{color:var(--tx);background:var(--s2)}} /* :hover gardé (pas de survol collé au tap) */
.tab.nav-hover{color:var(--tx);background:var(--s2)}
.tab.active{color:var(--c-root);border-bottom-color:var(--c-root);font-weight:600}
/* Audit perf 2026-09-26 : `transition:all` + font-weight différent à l'état .active => le navigateur INTERPOLE
la graisse (500->600/700) pendant --tr : une mise en page complète du document à CHAQUE image pendant 160 ms
après chaque clic (mesuré : ~17 layouts, 73 ms par changement d'onglet ; 2 ms avec ce correctif). Les
propriétés visuelles restent animées, la graisse et les dimensions changent d'un coup. */
.tab,.sidebar-desktop .tab,.rbtn,.rbtn-underline,.pill,.scale-pill,.cti,.crb,.caged-badge,.settings-seg button{transition-property:color,background-color,border-color,box-shadow,opacity,transform}
/* Audit perf 2026-09-28 : même les couleurs des 2 onglets concernés (ancien/nouveau actif) repeignaient la barre
d'onglets à chaque image pendant 160 ms — ~35 peintures par changement d'onglet contre 2 sans. Onglets :
changement d'état instantané. */
.tab,.sidebar-desktop .tab{transition:none}
/* Pulsation "ce module émet du son" — posée/retirée par _syncNavPulse (cf. app.js), sur le TEXTE de l'onglet
(pas un halo autour du bouton, demande explicite) dans les deux barres (#mainTabs/#sidebarTabs partagent
le même data-tab par onglet, cf. switchTab). animation-duration posée dynamiquement en JS = 60/tempo
secondes pour les modules cadencés (métronome/structures/rythmique/mélodie), durée fixe pour le drone
(pas de tempo pertinent) — cf. _syncNavPulse. */
/* Intensité seule (opacité) — pas de changement de taille (retour explicite : "seulement highlight
d'intensité, pas de mouvement de changement de taille"), pour rester discret et ne jamais faire "sauter"
le texte ou décaler ses voisins dans la barre. */
.tab.tab-pulsing{animation:tabPulse 0.6s ease-in-out infinite}
#mainTabs .tab.tab-pulsing,#sidebarTabs .tab.tab-pulsing{color:var(--c-root)}
@keyframes tabPulse{0%,100%{opacity:1}50%{opacity:.5}}
.tab-sep{width:1px;background:var(--bd);align-self:stretch;margin:8px 4px;flex-shrink:0}
/* flex-shrink:0 explicite : sans lui (valeur implicite 1), .tbr était le SEUL enfant de .tb1 non protégé
contre le rétrécissement — sur mobile (≤480px), quand le sélecteur G/C est visible (modules Gammes,
Accords...), la rangée ne tenait pas sur une largeur d'écran et .tbr (donc le bouton plein écran qu'il
contient) se faisait pousser hors du viewport, devenant invisible/inaccessible (bug constaté en audit).
Le vrai fix de largeur est côté @media(max-width:480px) ci-dessous (BPM/gaps réduits) ; ce flex-shrink:0
garantit qu'à l'avenir un débordement résiduel pousse un AUTRE élément plutôt que de faire disparaître
silencieusement le bouton plein écran sans qu'aucun indice visuel ne le signale. */
.tbr{margin-left:auto;display:flex;gap:4px;align-items:center;flex-shrink:0}
/* Résumé d'état desktop (gamme active / section Structures en cours) — occupe l'espace libre entre les
boutons de transport et .tbr (qui a margin-left:auto et se pousse déjà tout à droite), tronqué avec
ellipsis plutôt que de forcer un retour à la ligne ou de pousser .tbr hors du viewport. Masqué sous
900px (pas de place réaliste à côté des onglets/BPM sur petit écran, cf. média-requête ci-dessous). */
.topbar-status{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--fm);font-size:.62rem;color:var(--tx3);padding:0 6px;user-select:none}
@media(max-width:900px){.topbar-status{display:none!important}}
/* Horloge + chrono de la topbar (desktop, si la place le permet — _tbClockFit dans app.js pose
style.display:none quand la rangée déborde). */
.tb-clock,.tb-chrono{font-family:var(--fm);font-size:.72rem;color:var(--tx2);font-variant-numeric:tabular-nums;white-space:nowrap;user-select:none;flex-shrink:0}
.tb-clock{padding:0 4px}
.tb-chrono{height:28px;padding:0 8px;border-radius:7px;border:1px solid var(--bd);background:var(--pbg);cursor:pointer;line-height:1;transition:all var(--tr)}
.tb-chrono:hover{border-color:var(--bd2);color:var(--tx);background:var(--phov)}
.tb-chrono.on{border-color:#fff}
.tb-chrono.on:hover{color:var(--tx2)}
@media(max-width:900px){.tb-clock,.tb-chrono{display:none!important}}
.ibtn{width:28px;height:28px;border-radius:7px;border:1px solid var(--bd);background:var(--pbg);color:var(--tx2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tr);font-size:.75rem;flex-shrink:0;user-select:none;line-height:1}
/* Couleur active passée de var(--c-root) à blanc (demande explicite : "bouton metronome dans topbar : blanc
au lieu de couleur d'accent") — bordure gardée en var(--c-root) (non concernée par la demande, sert
toujours de repère "actif" même si la couleur du glyphe change). */
#globalMetroBtn.on{background:transparent;color:#fff;border-color:var(--c-root)}
/* font-size:1.1rem ICI (mobile, hors media query desktop) : le glyphe ♩ rend visuellement petit dans son
cadre .ibtn de 28px au .75rem de base des autres icônes topbar (bug signalé initialement, cf. la règle
desktop équivalente #globalMetroBtn{font-size:22px!important} sous @media(min-width:1024px) plus haut
dans ce fichier) — mais 2.1rem (l'ancienne valeur inline HTML, pensée uniquement pour être écrasée par
ce !important desktop) débordait franchement le bouton sur mobile, où RIEN ne l'écrase (signalé : "sur
mobile, l'icône métronome est trop grande" — même défaut de comportement mobile/desktop déjà rencontré
sur les boutons du Cercle des quintes). Retiré l'inline style HTML correspondant : cette règle CSS de
base est désormais la SEULE source pour la taille mobile.
*/
#globalMetroBtn{line-height:1;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
@media(hover:hover){.ibtn:hover{border-color:var(--bd2);color:var(--tx);background:var(--phov)}}
.ibtn.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
/* PAGE SYSTEM */
.page{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0}
/* Fond opaque explicite quand la texture d'interface est active (.ui-bg-enabled, cf. son commentaire dans
TOPBAR plus haut) mais pas le fond de module (.module-bg-enabled, règle suivante, gère déjà son propre cas
avec sa propre image) — sans lui, le calque UNIQUE position:fixed de la texture d'interface (posé sur
, derrière tout le contenu) traversait la zone de contenu du module, qui n'a normalement aucun fond
propre (rapporté avec capture : l'image de la texture d'interface débordait dans le contenu).
isolation:isolate ici crée un nouveau contexte d'empilement LOCAL à .page : ça empêche structurellement le
calque body-level de traverser un enfant transparent de .page, y compris .subbar (constaté avec capture :
un simple z-index ne suffit PAS à percer une isolation — affirmation erronée du commentaire précédent).
.subbar reçoit donc ici son PROPRE calque ::before local (pour rester affectée par la texture malgré
l'isolation de son parent .page) mais avec background-attachment:fixed — l'image se positionne par rapport
au VIEWPORT, pas à la boîte locale, donc elle tombe exactement sur la même portion que le calque partagé
de topbar/sidebar (demande explicite : "il faut matcher", décalage visible sinon). Contrairement aux
tentatives précédentes de calque UNIQUE qui combinaient (à tort) background-attachment:fixed avec
transform/filter SUR LE MÊME ÉLÉMENT (ce qui neutralise l'ancrage viewport, cf. historique dans TOPBAR
plus haut), ce calque-ci n'a PAS de transform, seulement filter — sans transform, aucun conflit constaté.
var(--ui-bg-pos) partagée avec le calque body/#uiBgRotateLayer pour rester cohérent visuellement si le
cadrage est ajusté (Paramètres > position X/Y) ; PAS de rotation ici en revanche (var(--ui-bg-rotate)) —
elle casserait l'ancrage fixed de ce calque local par le même mécanisme. Limitation acceptée : avec une
rotation active, seules topbar/sidebar/ligne de tonalité (calque body, #uiBgRotateLayer) tournent ; la
subbar reste non tournée dans ce cas précis (fond de module désactivé + rotation réglée). */
.ui-bg-enabled .page:not(.module-bg-enabled){position:relative;isolation:isolate;background:var(--bg)}
.ui-bg-enabled .page:not(.module-bg-enabled) .subbar{position:relative;isolation:isolate;background:transparent}
.ui-bg-enabled .page:not(.module-bg-enabled) .subbar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(0,0,0,var(--ui-bg-scrim)),rgba(0,0,0,var(--ui-bg-scrim))),var(--ui-bg-image);background-size:cover;background-position:var(--ui-bg-pos,center);background-attachment:fixed;filter:blur(var(--ui-bg-blur)) saturate(calc(var(--ui-bg-saturation) * 2));opacity:var(--ui-bg-opacity)}
.ui-bg-enabled .page:not(.module-bg-enabled) .subbar>*{position:relative;z-index:1}
.page.module-bg-enabled{position:relative;isolation:isolate;background:var(--bg)}
.page.module-bg-enabled::before{
content:"";position:absolute;inset:-7%;z-index:-1;pointer-events:none;
background-image:linear-gradient(rgba(0,0,0,var(--module-bg-scrim)),rgba(0,0,0,var(--module-bg-scrim))),var(--module-bg-image);
background-size:cover;background-position:var(--module-bg-pos,center);background-repeat:no-repeat;
opacity:var(--module-bg-opacity);filter:blur(var(--module-bg-blur)) saturate(calc(var(--module-bg-saturation) * 2));transform:scale(calc(1.08 * var(--module-bg-zoom,1))) rotate(var(--module-bg-rotate,0deg));
}
/* Fond unique : le calque d'interface plein viewport traverse les pages (motif continu, aucun recadrage par module) */
body.single-bg .page.module-bg-enabled{background:transparent}
body.single-bg .page.module-bg-enabled::before{display:none}
.page.module-bg-enabled>.sticky-toolbar,
.page.module-bg-enabled>.scales-body,
#page-metro.module-bg-enabled>.wrap,
/* Harmonie/Drone/Strum/Inspiration/Eartrain n'ont pas de .sticky-toolbar dédiée : leur PREMIER enfant direct
de .page est le wrapper de TOUT le contenu du module (.hn-app, .drone-wrap, .rh-wrap, .spark-wrap,
.rd-wrap), pas une simple barre d'outils — la règle générique ".page>div:first-child{background:var(--sf);
position:sticky;z-index:100}" (pensée pour une vraie barre sticky comme #page-metro/#page-groove) le
rendait donc opaque en entier, masquant le fond de module ET empêchant tout effet de verre sur les cartes
à l'intérieur, même avec .rcard/.drone-card/etc. correctement transparents (bug rapporté : "toujours
opaques" malgré l'image de fond visible). */
.page.module-bg-enabled>.hn-app,
.page.module-bg-enabled>.drone-wrap,
.page.module-bg-enabled>.rh-wrap,
.page.module-bg-enabled>.spark-wrap,
.page.module-bg-enabled>.rd-wrap{position:relative;z-index:1;background:transparent;border:0;box-shadow:none}
/* Même bug que ci-dessus, variante "en-tête" : #triadsHeader/#azHeader/#intervallesHeader/#strHeader/
.chords-top sont eux aussi le PREMIER enfant direct de leur .page, avec en plus leur PROPRE fond opaque
inline (background:var(--sf)) qui s'ajoute par-dessus — un simple ajout à la liste de verre ne suffit pas
ici, il faut !important pour battre l'inline. Rendus transparents comme .sticky-toolbar (même rôle : une
barre d'en-tête, pas le contenu du module) ; le verre visible vient de la barre interne qu'ils enveloppent
(.subbar/.triads-subbar-scroll/.chords-top .rrow, cf. liste de verre plus bas). */
.page.module-bg-enabled>#triadsHeader,
.page.module-bg-enabled>#azHeader,
.page.module-bg-enabled>#intervallesHeader,
.page.module-bg-enabled>.chords-top{background:transparent!important;border-color:transparent}
/* #strHeader (Backing) enveloppe 2 rangées SANS classe .subbar propre (contrairement à triads/az/intervalles
qui enveloppent une vraie barre interne à glasser séparément) : le verre est donc posé directement sur ce
conteneur plutôt que de le rendre transparent, sans quoi les 2 rangées internes resteraient sans aucun
fond (juste la photo brute, pas l'effet verre dépoli). */
.page.module-bg-enabled>#strHeader{
background:color-mix(in srgb,var(--sf) var(--glass-opacity,84%),transparent)!important;
border-color:transparent;
position:relative!important;z-index:1!important;
}
/* #page-circle et #page-progressions n'ont ni .sticky-toolbar ni wrapper d'en-tête dédié : leur .subbar EST
le premier enfant direct de .page, donc directement soumis à la règle générique ".page>div:first-child"
(styles.css ~ligne 99, spécificité 0 ID/2 classes-pseudo/1 élément) qui bat la règle de verre générique
".page.module-bg-enabled .subbar" (0 ID/2 classes/0 élément) à spécificité égale de classes mais avec un
élément en plus — !important nécessaire ici pour rétablir le verre (même famille de bug que .hn-app/
.drone-wrap/etc. plus haut, mais sur une VRAIE barre d'outils cette fois, donc verre direct plutôt que
transparence). */
.page.module-bg-enabled>.subbar{
background:color-mix(in srgb,var(--sf) var(--glass-opacity,84%),transparent)!important;
}
/* .insp-toolbar (Progressions, mode Banque) a un background inline (background:var(--sf), index.html) —
!important nécessaire, une classe seule ne bat jamais un style inline. */
.page.module-bg-enabled .insp-toolbar{
background:color-mix(in srgb,var(--sf) var(--glass-opacity,84%),transparent)!important;
}
#page-metro.module-bg-enabled>.wrap>.card{border-color:transparent;box-shadow:none}
.page.module-bg-enabled .scale-fs{z-index:9000}
#page-scales.scale-fs-page-active{position:fixed;inset:0;z-index:10000;width:100vw;height:100vh;display:flex;background:var(--bg)}
/* Effet "verre dépoli" appliqué à toutes les cartes/subbars quand un fond de module est actif — généralisé
depuis l'effet initialement propre au métronome (#page-metro), désormais retiré au profit de cette règle
commune (demande explicite : "étendre la transparence aux autres modules"). Sans fond de module actif,
.card/.subbar restent opaques (var(--sf) plein) comme avant : ces règles ne s'appliquent qu'à l'intérieur
de .module-bg-enabled.
BUG CORRIGÉ (rapporté : "effet verre dépoli uniquement actif sur le module métronome") — le sélecteur ne
ciblait QUE la classe exacte .card, mais la plupart des autres modules utilisent leur propre variante
(.rh-card, .rd-card, .spark-card, .drone-card, .fbcard, .insp-card, .prog-preview-card...), jamais captée.
2e tentative [class$="-card"] (sélecteur d'attribut, testait la fin littérale de la chaîne class="...")
ABANDONNÉE : ne matche que si "-card" est la DERNIÈRE classe de l'élément — échoue silencieusement dès
qu'une 2e classe suit (ex. class="rh-card rh-sticky-player", qui se termine par "-player", pas "-card" —
constaté avec Playwright sur #page-rhythm .rh-sticky-player, toujours opaque malgré la règle). Liste
explicite ci-dessous à la place : plus verbeuse mais fiable, sans piège de correspondance partielle. Une
nouvelle classe carte ajoutée plus tard devra être ajoutée ici à la main.
Intensité réglable (demande explicite : "permettre à l'utilisateur de régler les paramètres de l'effet") —
--glass-opacity (0-100, opacité du fond var(--sf) sous les cartes) et --glass-blur (px, flou du fond
derrière) posés globalement sur par applyModuleBackgroundSettings() (cf. app.js), avec les mêmes
valeurs par défaut (84%, 12px) que l'ancien réglage fixe propre au métronome. saturate(0) reste fixe (pas
un réglage exposé) : c'est ce qui empêche une image en couleur de teinter les cartes, un choix de design
plutôt qu'un curseur d'intensité. */
.page.module-bg-enabled .card,
.page.module-bg-enabled .rh-card,
.page.module-bg-enabled .rd-card,
.page.module-bg-enabled .spark-card,
.page.module-bg-enabled .drone-card,
.page.module-bg-enabled .fbcard,
.page.module-bg-enabled .az-fbcard,
.page.module-bg-enabled .az-rescard,
.page.module-bg-enabled .insp-card,
.page.module-bg-enabled .prog-preview-card,
.page.module-bg-enabled .prog-block-card,
.page.module-bg-enabled .vcard,
.page.module-bg-enabled .rcard,
.page.module-bg-enabled .metro-feat-item,
.page.module-bg-enabled .diat-row,
.page.module-bg-enabled .ref-table-panel,
.page.module-bg-enabled .scales-left,
.page.module-bg-enabled .scales-drawer-handle,
.page.module-bg-enabled #chStackBuilder,
.page.module-bg-enabled .hn-scroll,
.page.module-bg-enabled .hn-input-a,
.page.module-bg-enabled .hn-input-b,
.page.module-bg-enabled .hn-timeline,
.page.module-bg-enabled .hn-results,
.page.module-bg-enabled .hn-sec,
.page.module-bg-enabled .hn-mode-row,
.page.module-bg-enabled .hn-mel-beat,
.page.module-bg-enabled .hn-note-grid,
.page.module-bg-enabled .hn-qual-grid,
.page.module-bg-enabled .hn-pool-grid,
.page.module-bg-enabled .hn-prog-strip,
.page.module-bg-enabled .ch-stack-key-empty,
.page.module-bg-enabled .ch-stack-legend,
.page.module-bg-enabled .triads-subbar-scroll,
.page.module-bg-enabled .mel-toolbar,
.page.module-bg-enabled .subbar{
background:color-mix(in srgb,var(--sf) var(--glass-opacity,84%),transparent);
box-shadow:0 10px 30px rgba(0,0,0,var(--glass-shadow-opacity,.22));
}
/* Wrappers internes opaques: laisser apparaître le fond du module derrière eux et réserver le verre aux
unités de contenu réellement lisibles. */
.page.module-bg-enabled#page-harmony .hn-left,
.page.module-bg-enabled#page-harmony .hn-right{background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.page.module-bg-enabled#page-harmony .hn-sec,
.page.module-bg-enabled#page-harmony .hn-mode-row,
.page.module-bg-enabled#page-harmony .hn-timeline,
.page.module-bg-enabled#page-harmony .hn-results,
.page.module-bg-enabled#page-harmony .hn-prog-strip,
.page.module-bg-enabled#page-harmony .hn-mel-beat,
.page.module-bg-enabled#page-harmony .hn-np,
.page.module-bg-enabled#page-drone .drone-card,
.page.module-bg-enabled#page-rhythm .rh-card,
.page.module-bg-enabled#page-eartraining .rd-card{
background:color-mix(in srgb,var(--sf) var(--glass-opacity,84%),transparent)!important;
box-shadow:0 10px 30px rgba(0,0,0,var(--glass-shadow-opacity,.22));
}
.groove-track-rows-host{background:var(--s2)}
.str-track-row{background:var(--s2)}
/* Groovebox/Backing (Structures) : le conteneur de pistes et chaque ligne avaient un fond uni (var(--s2))
posé en plus de la .card/.str-canvas-col parente, masquant son verre dans les interstices entre pistes
(séparateurs, padding) — seules les cellules de pas (.groove-track-grid, verre plus bas) ou rien
(Backing, aucune règle) étaient dépolies, jamais l'espace autour ("groovebox en partie [...] derrière les
pistes", signalé). Rendus transparents ici sur fond de module actif pour laisser apparaître le verre du
parent à la place. */
.page.module-bg-enabled .groove-track-rows-host,
.page.module-bg-enabled .str-track-rows-host{background:transparent}
.page.module-bg-enabled .str-track-row{
background:color-mix(in srgb,var(--sf) var(--glass-opacity,84%),transparent)!important;
}
/* Ces modules gardent leur verre même sans image de fond de module. La Groovebox applique le verre au fond
de chaque piste, jamais à la grille de cellules. */
#page-harmony .hn-left,
#page-harmony .hn-right{background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
#page-harmony .hn-sec,
#page-harmony .hn-mode-row,
#page-harmony .hn-timeline,
#page-harmony .hn-results,
#page-harmony .hn-prog-strip,
#page-harmony .hn-mel-beat,
#page-harmony .hn-np,
#page-drone .drone-card,
#page-rhythm .rh-card,
#page-eartraining .rd-card,
:is(#page-groove,.gsz-gb) .groove-track-grid{
background:color-mix(in srgb,var(--sf) var(--glass-opacity,84%),transparent)!important;
box-shadow:0 10px 30px rgba(0,0,0,var(--glass-shadow-opacity,.22));
}
/* Cas texture d'interface + fond de module actifs ENSEMBLE sur la même page : .subbar est à l'intérieur de
.page.module-bg-enabled, qui a isolation:isolate (nécessaire pour empiler son propre fond d'image) — ça
empêche structurellement le calque body-level de la texture d'interface (position:fixed, TOPBAR plus
haut) de traverser un enfant transparent de .page, quel que soit le z-index. Contournement testé et
abandonné (rendait la subbar transparente vers le fond du module, pas vers la texture interface — pas le
résultat voulu). Décision (demande explicite) : dans ce cas combiné, le fond de MODULE reste prioritaire
sur la subbar (règle "verre dépoli" ci-dessus, cohérent avec les .card du même module juste en dessous) ;
seules topbar/sidebar/ligne de tonalité dédiée (hors .page) montrent la texture d'interface. */
.page.active{display:flex;animation:pageIn 150ms ease both}
@keyframes rootWave{
0%{transform:scale(0);opacity:.6}
100%{transform:scale(1);opacity:0}
}
.root-wave{
position:fixed;
border-radius:50%;
pointer-events:none;
z-index:8000;
transform:scale(0);
animation:rootWave 600ms cubic-bezier(.1,.7,.3,1) forwards;
}
@keyframes chordPulse{0%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes dronePulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.18);opacity:.3}}
@keyframes dronePulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.18);opacity:.3}}
/* sealPulse : anneau pulsant en transform+opacity (compositable GPU) plutôt que box-shadow animé (cf. audit
performance — box-shadow force un repaint complet à 60fps en continu tant que le bouton est actif, un
anneau expansif via ::after + transform:scale/opacity obtient le même effet visuel sans repaint). */
@keyframes sealPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.35);opacity:0}}
#droneSealBtn.active,#droneWhiteNoiseBtn.active,#dronePinkNoiseBtn.active{position:relative;border-color:rgba(255,255,255,.6)}
#droneSealBtn.active::after,#droneWhiteNoiseBtn.active::after,#dronePinkNoiseBtn.active::after{
content:'';position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(255,255,255,.5);
pointer-events:none;animation:sealPulse 1.5s ease-in-out infinite;
}
#droneHzSlider.playing{animation:droneTrackPulse 2s ease-in-out infinite}
.str-chord-active{border-bottom:2px solid currentColor}
/* SHARED ATOMS */
.rrow{display:flex;gap:2px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.rrow::-webkit-scrollbar{height:0}
.rbtn{min-width:26px;height:26px;padding:0 4px;border-radius:5px;border:1px solid var(--bd);background:var(--pbg);color:var(--tx2);font-family:var(--fm);font-size:.75rem;cursor:pointer;transition:all var(--tr);display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media(hover:hover){.rbtn:hover{border-color:var(--c-root);color:var(--tx)}}
.rbtn.active{background:var(--c-root);border-color:var(--c-root);color:#111;font-weight:700}
.pg{display:flex;align-items:center;gap:2px;background:var(--s2);border:1px solid var(--bd);border-radius:7px;padding:2px;height:26px;box-sizing:border-box;flex-shrink:0}
.pill{display:flex;align-items:center;justify-content:center;height:100%;box-sizing:border-box;padding:0 9px;border-radius:5px;border:1px solid transparent;background:transparent;color:var(--tx2);font-family:var(--fm);font-size:.62rem;cursor:pointer;transition:all var(--tr);white-space:nowrap}
@media(hover:hover){.pill:hover{color:var(--tx)}}
.pill.active{border-color:rgba(255,255,255,.6);color:var(--tx);font-weight:700;box-shadow:0 1px 3px var(--sh)}
select.st{padding:4px 7px;border-radius:var(--r);border:1px solid var(--bd);background:var(--s2);color:var(--tx);font-family:var(--fm);font-size:.65rem;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none}
.tog{width:30px;height:17px;border-radius:999px;background:var(--s3);border:1px solid var(--bd);position:relative;cursor:pointer;transition:background var(--tr);flex-shrink:0}
.tog.on{background:var(--c-root);border-color:var(--c-root)}
.tog::after{content:'';position:absolute;width:11px;height:11px;border-radius:50%;background:var(--sf);top:2px;left:2px;transition:left var(--tr);box-shadow:0 1px 2px var(--sh)}
.tog.on::after{left:15px;background:#111}
.togrow{display:flex;align-items:center;justify-content:space-between;padding:2px 0}
.toglbl{font-size:.7rem;color:var(--tx2)}
.ic{padding:3px 10px;border-radius:999px;border:1px solid var(--bd);font-family:var(--fm);font-size:.63rem;color:var(--tx2);background:var(--s2)}
.ic strong{color:var(--tx)}
/* LAYOUT */
.abody{flex:1;display:flex;overflow:hidden;min-height:0}
.abody.portrait{flex-direction:column}
.sidebar{width:280px;flex-shrink:0;border-right:1px solid var(--bd);background:var(--sf);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;transition:width var(--tr),opacity var(--tr)}
.sidebar.closed{width:0;overflow:hidden;opacity:0;border:none}
.abody.portrait .sidebar{width:100%;max-height:200px;border-right:none;border-bottom:1px solid var(--bd);overflow-y:auto;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:10px;padding:10px}
.abody.portrait .sidebar.closed{max-height:0;padding:0;overflow:hidden}
.asec{border-bottom:1px solid var(--bd)}
.ahead{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;cursor:pointer;user-select:none;font-family:var(--fm);font-size:max(10px,.52rem);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);transition:background var(--tr)}
.ahead:hover,.ahead.open{background:var(--s2);color:var(--tx2)}
.ahead .arr{font-size:max(10px,.45rem);transition:transform .14s}
.ahead.open .arr{transform:rotate(90deg)}
.abody2{display:none;padding:6px 10px 8px;flex-direction:column;gap:5px}
.abody2.open{display:flex}
.trow{display:flex;align-items:center;gap:3px}
.tlbl{font-size:max(10px,.55rem);font-family:var(--fm);color:var(--tx3);white-space:nowrap}
.tval{flex:1;text-align:center;font-family:var(--fm);font-size:.6rem;color:var(--tx2)}
.tbtn{width:20px;height:20px;border-radius:4px;border:1px solid var(--bd);background:var(--s2);color:var(--tx);font-family:var(--fm);font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tr);flex-shrink:0}
@media(hover:hover){.tbtn:hover{background:var(--s3);border-color:var(--bd2)}}
.ti{display:flex;flex-direction:column;gap:2px}
.srow-t{display:flex;align-items:center;gap:3px}
.slbl{font-family:var(--fm);font-size:max(10px,.52rem);color:var(--tx3);width:12px;text-align:right;flex-shrink:0}
.snb{flex:1;padding:3px 4px;border-radius:4px;border:1px solid var(--bd);background:var(--s2);color:var(--tx);font-family:var(--fm);font-size:.6rem;cursor:pointer;text-align:center;transition:all var(--tr)}
.snb:hover{border-color:var(--bd2);background:var(--s3)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.ci{display:flex;flex-direction:column;gap:2px}
.cl{font-family:var(--fm);font-size:max(10px,.5rem);color:var(--tx3)}
.csr{display:flex;align-items:center;gap:3px}
input[type="color"]{width:22px;height:22px;border-radius:5px;border:1px solid var(--bd);background:transparent;cursor:pointer;padding:1px}
.chex{font-family:var(--fm);font-size:max(10px,.52rem);color:var(--tx2)}
.caged-row{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.caged-badge{display:flex;align-items:center;justify-content:center;height:26px;box-sizing:border-box;padding:0 6px;border-radius:3px;border:1px solid var(--bd);background:var(--pbg);font-family:var(--fm);font-size:max(10px,.58rem);color:var(--tx3);cursor:pointer;transition:all var(--tr)}
.caged-badge.active{border-color:var(--c-root);color:var(--c-root);background:var(--s2);font-weight:700}
.main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;padding:2px;overflow-y:auto;overflow-x:hidden;gap:2px}
.inforow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex-shrink:0}
/* Bouton info générique + popover — cf. infoBtn()/toggleInfoPopover() dans app.js. Composant unique
réutilisé par Gammes et Accords (et tout futur module) plutôt qu'une bulle par module. */
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--bd);background:var(--pbg);color:var(--tx3);font-family:var(--fm);font-size:max(10px,.56rem);font-weight:700;cursor:pointer;flex-shrink:0;transition:all var(--tr);-webkit-tap-highlight-color:transparent;position:relative}
.info-btn:hover,.info-btn.active{border-color:var(--c-root);color:var(--c-root);background:var(--s2)}
/* max-height+overflow-y:auto : filet de sécurité pour un texte d'aide plus long que le viewport n'est haut
(ex. #azInfoBtn de l'Analyseur, ~672px de contenu déjà rencontré) — le JS (toggleInfoPopover) clampe déjà
la position dans les bornes du viewport, mais un popover qui dépasserait quand même 90% de la hauteur
d'écran scrolle désormais en interne plutôt que de continuer à déborder hors champ. */
/* z-index:60 → 150 : bug trouvé (rapporté "les boutons i n'ouvrent rien") — un module dont le PREMIER
enfant de sa .page sert de conteneur pleine page (ex. #page-spark > .spark-wrap) hérite malencontreusement
de la règle générique ".page>div:first-child{position:sticky;z-index:100}" pensée pour une vraie barre
d'outils collante (cf. commentaire existant sur ce même piège pour #page-metro plus bas dans ce fichier),
ce qui plafonne tout descendant en-dessous de z-index:100 — le popover (attaché au , donc visible en
DOM/coordonnées correctes) se retrouvait donc visuellement RECOUVERT par .spark-wrap malgré tout, aucune
erreur JS pour le signaler. 150 reste sous les vrais overlays/modales (900+) tout en dépassant n'importe
quel z-index:100 hérité de cette règle générique. */
.info-popover{position:absolute;z-index:150;max-width:260px;max-height:90vh;overflow-y:auto;padding:8px 10px;border-radius:var(--r);border:1px solid var(--bd);background:var(--sf);box-shadow:0 4px 16px var(--sh);font-family:var(--fb);font-size:.62rem;line-height:1.45;color:var(--tx2);text-align:left;white-space:normal}
.info-popover strong{color:var(--tx)}
/* Bouton "i" de fin de liste (Gammes/Accords) + modal catalogue — cf. catalogInfoBtn()/showCatalogModal()
dans app.js. Même famille visuelle que .info-btn mais légèrement plus grand car isolé en bout de liste
plutôt qu'accolé à un libellé. */
.info-btn-catalog{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--bd);background:var(--pbg);color:var(--tx3);font-family:var(--fm);font-size:.6rem;font-weight:700;cursor:pointer;flex-shrink:0;transition:all var(--tr);-webkit-tap-highlight-color:transparent;margin-left:2px}
.info-btn-catalog:hover{border-color:var(--c-root);color:var(--c-root);background:var(--s2)}
/* z-index 10600 : doit pouvoir s'ouvrir par-dessus .settings-modal (9999, bouton "?" de Modules visibles)
en plus de son usage historique dans Gammes/Accords (contenu de page normal) — donc au-dessus de tout. */
.catalog-modal-ov{position:fixed;inset:0;z-index:10600;background:var(--ov);display:flex;align-items:center;justify-content:center;padding:20px}
.catalog-modal{width:100%;max-width:560px;max-height:80vh;display:flex;flex-direction:column;border-radius:var(--rl);border:1px solid var(--bd);background:var(--sf);box-shadow:0 8px 32px var(--sh)}
.catalog-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bd);flex-shrink:0}
.catalog-modal-hd strong{font-size:.8rem;color:var(--tx)}
/* .modal-close-btn : style commun aux boutons de fermeture ronds ("✕") des popups/modales de l'app —
auparavant dupliqué à l'identique sous .catalog-modal-close/.settings-close/.tuner-popup-close (même
composant visuel, trois définitions séparées, découvert en corrigeant un bug similaire sur .diat-play/
.vcard-play : une dérive silencieuse entre les trois était possible sans qu'on s'en rende compte). Modif.
.modal-close-btn-sm (24px, cf. .catalog-modal-close/.tuner-popup-close) réservé aux popups plus petites
que Réglages (28px, taille par défaut). Chaque classe d'origine reste posée dans le HTML/JS pour ne rien
casser (sélecteurs existants comme .tuner-popup-close utilisé aussi pour le bouton "détacher" ⇱, pas
seulement fermer) — elles ne portent plus elles-mêmes aucune propriété visuelle. */
.modal-close-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--tr)}
.modal-close-btn:hover{border-color:var(--c-root);color:var(--c-root)}
.modal-close-btn-sm{width:24px;height:24px;font-size:.7rem}
.catalog-modal-close{background:var(--pbg)}
.catalog-modal-body{overflow-y:auto;padding:8px 16px 16px;display:flex;flex-direction:column;gap:10px}
.catalog-modal-item{padding-bottom:10px;border-bottom:1px solid var(--bd)}
.catalog-modal-item:last-child{border-bottom:none;padding-bottom:0}
/* Desktop large : le modal suit le plafond de largeur du corps de module (1600px, cf. .wrap) plutôt que
les 560px pensés pour mobile/tablette. Au-delà de ~700px de large, une seule colonne de texte devient
illisible (lignes trop longues) — passage en grille multi-colonnes de cartes à la place. */
@media(min-width:900px){
.catalog-modal{max-width:1600px}
.catalog-modal-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px 20px;align-content:start}
.catalog-modal-item{border-bottom:none;padding-bottom:0;padding:10px;border-radius:var(--r);background:var(--pbg)}
}
/* Variante ouverte par-dessus .settings-modal (bouton "?" de Modules visibles, cf. showModuleInfo() dans
app.js) : reprend exactement les largeurs de .settings-box pour rester visuellement dans le cadre de la
fenêtre Paramètres plutôt que de s'étaler en pleine largeur d'écran comme l'usage catalogue normal. Une
seule carte affichée → pas besoin de la grille multi-colonnes desktop, une colonne reste lisible. */
.catalog-modal--settings{max-width:480px}
@media(min-width:1024px){
.catalog-modal--settings{max-width:640px}
}
.catalog-modal--settings .catalog-modal-body{display:flex;flex-direction:column}
.catalog-modal-item-name{font-family:var(--fm);font-size:.68rem;font-weight:700;color:var(--tx);display:block;margin-bottom:2px}
.catalog-modal-item-desc{font-family:var(--fb);font-size:.64rem;line-height:1.5;color:var(--tx2)}
.catalog-modal-item-desc em{color:var(--tx3)}
/* Palette de commande (raccourci T) — cf. cmdPaletteOpen()/cmdPaletteSearch() dans app.js. z-index 10500 :
sous le modal catalogue (10600, cf. plus haut) mais au-dessus de l'onboarding global/tour guidé
(10000-10003), pour rester utilisable même si l'utilisateur l'ouvre pendant un tour (cas limite mais
jamais bloquant). */
.cmdp-ov{position:fixed;inset:0;z-index:10500;background:var(--ov);display:flex;align-items:flex-start;justify-content:center;padding:80px 16px 16px}
.cmdp-box{width:100%;max-width:560px;max-height:70vh;display:flex;flex-direction:column;border-radius:var(--rl);border:1px solid var(--bd);background:var(--sf);box-shadow:0 16px 48px var(--sh);overflow:hidden}
.cmdp-input-row{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--bd);flex-shrink:0}
.cmdp-input-icon{font-family:var(--fm);color:var(--tx3);font-size:.8rem;flex-shrink:0}
.cmdp-input{flex:1;border:none;background:transparent;color:var(--tx);font-family:var(--fb);font-size:.85rem;outline:none;min-width:0}
.cmdp-input::placeholder{color:var(--tx3)}
.cmdp-hint{font-family:var(--fm);font-size:max(10px,.56rem);color:var(--tx3);border:1px solid var(--bd);border-radius:4px;padding:1px 5px;flex-shrink:0;white-space:nowrap}
.cmdp-results{overflow-y:auto;padding:6px}
.cmdp-group-label{font-family:var(--fm);font-size:max(10px,.56rem);font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px 4px}
.cmdp-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cmdp-item:hover,.cmdp-item.active{background:var(--s2)}
.cmdp-item-icon{font-family:var(--fm);font-size:.75rem;color:var(--tx3);width:20px;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.cmdp-item-label{font-family:var(--fb);font-size:.72rem;color:var(--tx);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdp-item-sub{font-family:var(--fm);font-size:max(10px,.58rem);color:var(--tx3);flex-shrink:0}
.cmdp-empty{padding:20px 14px;text-align:center;font-family:var(--fb);font-size:.68rem;color:var(--tx3)}
.cmdp-item-label mark{background:transparent;color:var(--c-root);font-weight:700}
.legstrip{display:flex;gap:8px;flex-wrap:wrap;padding:7px 11px;border-radius:var(--r);border:1px solid var(--bd);background:var(--sf);align-items:center;flex-shrink:0}
.li{display:flex;align-items:center;gap:4px;font-size:.62rem;color:var(--tx2)}
.ld{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:max(10px,.44rem);font-weight:700;font-family:var(--fm);flex-shrink:0}
/* position:relative ici plutôt qu'en style inline sur #scaleFbCard (index.html) : un style inline a
toujours priorité sur une règle de classe externe quelle que soit sa spécificité, donc ce
position:relative écrasait le position:fixed de .fbcard.scale-fs (cf. juste plus bas) — le manche
"s'agrandissait dans une box" au lieu de passer en vrai plein écran (bug rapporté). Ici, la classe
.fbcard.scale-fs (2 classes = spécificité plus forte que .fbcard seule) reprend normalement la main. */
.fbcard{position:relative;background:var(--sf);border:1px solid var(--bd);border-radius:var(--rl);padding:2px;overflow-x:auto;flex:1;min-width:0;display:flex;align-items:flex-start}
/* Triades desktop : légende compacte quand fusionnée dans la subbar, pour égaler la hauteur d'Intervalles */
#triadsInfoRow{display:flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap}
#triadsInfoRow .inforow,#triadsInfoRow .legstrip{flex-wrap:nowrap;margin:0;padding:0}
#triadsInfoRow .legstrip{border:0;background:transparent}
#triadsInfoRow .ic{white-space:nowrap}
@media(min-width:1024px){
/* Triades/Intervalles : manche + piano toujours affichés ensemble, chacun à hauteur fixe (~500px) — pas d'étirement/centrage créant du vide */
#page-triads .fbcard,#page-intervalles .fbcard{flex:0 0 auto!important}
#page-triads #fb,#page-intervalles #ivFb{align-self:flex-start!important}
/* Gammes : manche à hauteur fixe (~420px) — pas d'étirement créant du vide */
#page-scales .fbcard{flex:0 0 auto!important}
}
#page-scales #scaleFb{align-self:flex-start!important}
.fbcard.scale-fs{position:fixed;inset:0;z-index:9000;border-radius:0;border:none;padding:8px;background:var(--bg);flex-direction:column;justify-content:center;cursor:zoom-out;overflow:auto}
.fbcard.scale-fs canvas{flex-shrink:0}
/* Mini-canvas "progression en cours" en plein écran manche (cf. #scaleFbCardWrap dans index.html,
toggleScaleFullscreen() dans app.js qui ne touche que .scale-fs sur #scaleFbCard lui-même, jamais sur ce
wrapper — repositionné ici via un sélecteur frère plutôt que de risquer de modifier cette logique de
plein écran déjà éprouvée). #scaleFbCard.scale-fs passe en position:fixed;inset:0 et sort du flux normal
de #scaleFbCardWrap ; sans cette règle, le mini-canvas (resté en flux normal, sous le manche désormais
fixed) se retrouverait cadré au même endroit qu'avant le passage en plein écran — visuellement perdu/mal
positionné derrière le manche agrandi plutôt que de rester une bande fine tout en bas du plein écran
(demande explicite : "y compris en mode zoom plein écran du fretboard"). */
#scaleFbCardWrap:has(.fbcard.scale-fs){position:fixed;inset:0;z-index:9001;display:flex;flex-direction:column;background:var(--bg);padding:8px;gap:6px}
#scaleFbCardWrap:has(.fbcard.scale-fs)>.fbcard.scale-fs{flex:1;min-height:0;position:relative;inset:auto;z-index:auto;padding:0}
#scaleFbCardWrap:has(.fbcard.scale-fs)>#strMiniCanvasWrap{flex-shrink:0}
canvas{display:block;cursor:pointer;height:auto;width:auto}
.subbar{display:flex;align-items:center;gap:4px;padding:4px;border-bottom:1px solid var(--bd);background:var(--sf);flex-wrap:wrap;flex-shrink:0;min-height:36px;box-sizing:border-box}
/* SCALES */
.scales-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
/* Tiroir repliable de la liste des gammes : avec les catégories ajoutées au fil du temps (modes grecs,
symétriques, exotiques...), la liste dépliée peut occuper 4-5 lignes et pousser le manche/piano hors de
vue sur les écrans bas en hauteur (petit portable, grand écran zoomé). "Déplié" par défaut (repris tel
quel, l'ergonomie actuelle ne change pas tant qu'on n'y touche pas) — l'état est un choix explicite de
l'utilisateur parmi 3 modes clairement nommés (data-mode="expanded|collapsed|auto", cf. toggleScalesDrawer/
APP_SETTINGS.scalesDrawerMode dans app.js), persisté plutôt que recalculé, pour ne pas changer tout seul
sous l'utilisateur en cours de session au moindre resize. La poignée reste toujours visible, affiche la
gamme active même repliée, et son état courant est écrit en toutes lettres (pas juste un chevron) pour
rester compréhensible sans avoir à deviner ce qu'un simple picto signifie. */
.scales-drawer-handle{
display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
padding:3px 8px;border:none;border-bottom:1px solid var(--bd);background:var(--sf);
color:var(--tx2);font-family:var(--fm);font-size:max(10px,.58rem);cursor:pointer;
-webkit-tap-highlight-color:transparent;box-sizing:border-box;
}
.scales-drawer-handle:hover{color:var(--tx);background:var(--s2)}
/* Fond de module actif : sans ce correctif, :hover (même spécificité que la règle de verre générique,
déclarée plus tard dans le fichier) regagnait la main et repassait la poignée en fond uni au survol. */
.page.module-bg-enabled .scales-drawer-handle:hover{
background:color-mix(in srgb,var(--sf) var(--glass-opacity,84%),transparent);
}
/* display:flex (pas juste overflow/ellipsis en bloc simple) — nécessaire depuis que le bouton "i" (cf.
_syncScalesDrawerLabel dans app.js, demande explicite : "déplacer le bouton i à côté du nom de la gamme")
vit ICI, en frère du de texte tronqué : sans flex, ce texte (display inline par défaut)
n'aurait pas cédé de largeur au bouton "i" qui le suit, qui se serait retrouvé poussé hors de la zone
visible (min-width:0 sur le span texte permet à son overflow:hidden/ellipsis de jouer son rôle DANS un
flex item, un span sans ça grandirait à son contenu plein malgré tout). */
.scales-drawer-current{display:flex;align-items:center;min-width:0;overflow:hidden}
.scales-drawer-current>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scales-drawer-state-pill{display:flex;align-items:center;gap:4px;flex-shrink:0;padding:2px 7px;border-radius:999px;border:1px solid var(--bd);background:var(--s2);color:var(--tx2)}
.scales-drawer-chevron{flex-shrink:0;transition:transform var(--tr);line-height:1}
.scales-drawer-state{white-space:nowrap}
/* Rotation du chevron + couleur de la pastille : un renfort visuel redondant avec le texte (jamais la
seule source d'info) — le mot Déplié/Replié/Auto reste la référence en cas de doute. */
.scales-drawer[data-mode="expanded"] .scales-drawer-chevron{transform:rotate(0deg)}
.scales-drawer[data-mode="collapsed"] .scales-drawer-chevron{transform:rotate(-90deg)}
.scales-drawer[data-mode="auto"] .scales-drawer-chevron{transform:rotate(-90deg)}
.scales-drawer[data-mode="auto"] .scales-drawer-state-pill{border-color:var(--c-root);color:var(--c-root)}
/* max-height généreux (600px) plutôt qu'une valeur ajustée au contenu actuel : sert uniquement de cible
d'animation pour la transition ouverture/fermeture (comme #chStackBuilder.expanded .ch-stack-body déjà
dans ce fichier) — la liste dépliée n'est JAMAIS rognée par cette valeur en usage réel, seuls les modes
"collapsed"/"auto" (max-height:0 au repos) contraignent réellement la hauteur. */
.scales-drawer[data-mode="collapsed"] .scales-left,
.scales-drawer[data-mode="auto"] .scales-left{max-height:0;padding-top:0;padding-bottom:0;border-bottom:none;overflow:hidden}
/* Mode "auto" uniquement : dépliage temporaire au survol (souris uniquement — @media(hover:hover) exclut
le tactile, où :hover resterait "collé" après un tap et bloquerait le tiroir ouvert en permanence). Ne
change pas le mode persisté, juste un aperçu borné (scroll interne si besoin) qui se referme dès que la
souris quitte. Le mode "collapsed" volontaire, lui, ne réagit jamais au survol — replié veut dire replié. */
@media(hover:hover){
.scales-drawer[data-mode="auto"]:hover .scales-left{max-height:220px;padding-top:3px;padding-bottom:3px;border-bottom:1px solid var(--bd);overflow-y:auto}
}
.scales-left{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--bd);padding:3px 4px;overflow-y:hidden;overflow-x:hidden;background:var(--sf);flex-shrink:0;width:100%;align-content:flex-start;max-height:600px;transition:max-height var(--tr),padding var(--tr);box-sizing:border-box}
.scales-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.scale-cat{font-family:var(--fm);font-size:max(10px,.47rem);letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);padding:2px 4px 0;white-space:nowrap;align-self:center}
.scale-pill{padding:2px 7px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--tx2);font-family:var(--fb);font-size:.6rem;cursor:pointer;transition:all var(--tr);text-align:center;display:inline-block;white-space:nowrap;flex-shrink:0}
.scale-pill:hover{background:var(--s2);color:var(--tx)}
.scale-pill.active{background:var(--s2);border-color:var(--c-root);color:var(--c-root);font-weight:600}
.scales-main{flex:1;display:flex;flex-direction:column;padding:2px;overflow:auto;gap:6px;min-height:0}
/* Empilement d'intervalles interactif (module Accords, sous la grille de voicings) — un slider à crans
discrets par étage (3ce/Sus, 5te, 6te/7e, Extension), reflète ET modifie l'accord sélectionné. Colonne
lue de bas en haut (fondamentale en bas, non slidable) : column-reverse sur un HTML écrit dans l'ordre de
lecture naturel (fondamentale d'abord, puis 3ce→5te→7e→extension, cf. app.js _chStackComputeHtml) —
column-reverse place le PREMIER enfant du DOM en BAS visuellement, donc la fondamentale écrite en
premier atterrit bien en bas. (Un essai avec flex-direction:column normale + fondamentale toujours
première dans le DOM avait produit l'inverse : premier enfant du DOM = haut par défaut sans reverse.)
Les crans non atteignables (aucun type catalogué ne matche compte tenu des 3 autres étages) restent
visibles mais grisés — jamais masqués, cf. topo validé. */
.ch-stack-title{font-family:var(--fm);font-size:max(10px,.52rem);font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
/* Même contour que .vcard (bordure pleine var(--bd), fond var(--sf), radius var(--r)) — avant ce correctif
#chStackBuilder n'avait qu'un border-top 1px (simple séparateur), visuellement plus "clair"/moins défini
qu'une carte de diagramme. gap:10px identique à .vgrid pour que l'espacement vers la grille au-dessus
soit cohérent avec l'espacement entre cartes de diagrammes. */
/* margin-top:0 (pas 10px) : en layout 2-colonnes (#voicingGrid/#chStackBuilder côte à côte, cf. .chords-cols
plus haut), un margin-top résiduel désalignait le haut de cette carte par rapport aux cartes de
diagrammes de la colonne voisine (bug rapporté : l'empileur démarrait plus bas que les diagrammes). Les
deux colonnes partagent déjà .chords-cols{align-items:flex-start}, donc un simple margin-top:0 suffit à
les faire démarrer exactement à la même hauteur — l'ancien 10px n'avait de sens qu'en flux vertical
(espace entre grille et empileur empilés), plus pertinent une fois les deux côte à côte. */
#chStackBuilder{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);margin-top:0;box-sizing:border-box}
/* "Tous les accords" (S.chordAll) : l'empileur reste visible et cliquable (jamais pointer-events:none —
c'est justement en interagissant depuis cet état grisé qu'on quitte "Tous" et sélectionne un accord
concret, cf. chStackPick→pickChordType qui repasse S.chordAll à false), juste visuellement atténué pour
signaler qu'aucun accord unique n'est actuellement sélectionné. Demande explicite (remplace l'ancien
comportement où le panneau disparaissait entièrement en mode "Tous"). PAS d'opacity (ancien effet, retiré
suite à un rapport explicite : sur mobile, #chStackBuilder est en position:fixed par-dessus le contenu de
page — cf. règle @media(max-width:1023px) plus bas — et l'opacity y laissait deviner ce contenu à travers
le panneau, rendu jugé indésirable ; retiré aussi sur desktop pour un comportement cohérent des deux
côtés). Le signal visuel passe maintenant par une bordure en tirets + un texte légèrement assourdi,
jamais par une transparence qui expose ce qu'il y a derrière. */
#chStackBuilder.ch-stack-disabled{border-style:dashed;color:var(--tx3)}
#chStackBuilder.ch-stack-disabled:hover{color:var(--tx2)}
/* Desktop : PAS de position:sticky. Déplié par défaut (cf. S.chStackExpanded=window.innerWidth>=1300 dans
app.js), le bloc peut dépasser 350px de haut pour un accord riche en extensions — en sticky, il pouvait
alors occuper plus de la moitié d'une fenêtre de hauteur modeste, ne laissant presque plus de place
visible pour le dernier clavier même après avoir scrollé au maximum (bug constaté : le 3e clavier
restait coupé, la barre semblait "cacher" le clavier alors qu'il n'y avait techniquement aucun
chevauchement de pixels — juste plus assez d'espace visible pour les deux en même temps). Flux normal :
le bloc apparaît simplement après le dernier clavier, on scrolle à travers comme n'importe quel contenu. */
/* Mobile (<1300px) : c'est le document/.pages-container qui scrolle, pas .chords-main (aucune règle mobile
ne lui donne une hauteur contrainte + overflow:auto) — un position:sticky sur #chStackBuilder n'a donc
aucun ancêtre scrollable pertinent et reste inerte : au fil du scroll de page, il défile comme n'importe
quel autre bloc et sort de l'écran dès que le nombre de diagrammes (donc la hauteur de page) change.
position:fixed ancré au viewport règle ça (même stratégie que #page-rhythm.page.active plus haut dans ce
fichier) : le bloc reste à l'écran quel que soit le nombre de diagrammes au-dessus. .chords-main reçoit un
padding-bottom compensatoire pour que le dernier diagramme ne soit jamais masqué derrière. */
@media(max-width:1023px){
#chStackBuilder{position:fixed;left:8px;right:8px;bottom:8px;z-index:50;box-shadow:0 4px 16px var(--sh);max-height:70vh;overflow-y:auto}
/* Avec une image de fond de module, la règle générique de verre dépoli gagne sur le background opaque
défini plus haut pour #chStackBuilder. C'est souhaitable en desktop, où l'empileur est une carte dans le
flux, mais pas ici : en position:fixed il survole les diagrammes et leur contenu restait visible à travers
la poignée et le panneau déplié. Conserver un fond plein sur ce seul overlay mobile et retirer son blur ;
les sous-blocs semi-transparents continuent alors de se composer sur var(--sf), jamais sur les diagrammes. */
.page.module-bg-enabled #chStackBuilder{background:var(--sf);-webkit-backdrop-filter:none;backdrop-filter:none}
}
.ch-stack-handle{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:8px 12px}
.ch-stack-chevron{font-family:var(--fm);font-size:.7rem;color:var(--tx3);transition:transform var(--tr);flex-shrink:0}
#chStackBuilder.expanded .ch-stack-chevron{transform:rotate(180deg)}
.ch-stack-body{overflow:hidden;max-height:0;transition:max-height var(--tr);padding:0 12px}
/* max-height:2000px (pas 400px) : un plafond fixe trop bas tronquait la dernière ligne ("fondamentale", en
bas de la colonne column-reverse) dès que le contenu réel (titre + 4 étages + fondamentale) dépassait
400px de haut — bug rapporté. 2000px est un plafond très généreux, jamais atteint par ce contenu, qui ne
sert plus qu'à permettre l'animation d'ouverture (transition max-height) ; #chStackBuilder lui-même a son
propre plafond réaliste (max-height:calc(100vh-200px);overflow-y:auto, cf. règle desktop dédiée) qui
prend le relais comme véritable limite visuelle avec scroll interne si le contenu est vraiment trop haut
pour l'écran — cette valeur ici n'a plus vocation à contraindre quoi que ce soit en pratique. */
#chStackBuilder.expanded .ch-stack-body{max-height:2000px;padding:0 12px 12px}
.ch-stack-col{display:flex;flex-direction:column-reverse;gap:3px;max-width:460px;padding-top:8px}
/* Tour d'intervalles empilés : chaque étage = une "touche" colorée (la note réelle obtenue, cf.
NOTE_COLORS) à gauche + sa légende (nom de l'étage, sélecteur de crans) à droite — reprend la métaphore
demandée d'un empilement fondamentale-en-bas/extension-en-haut avec la légende sur le côté, plutôt que
l'ancienne rangée uniforme texte+pilules+note. Toutes les lignes (fondamentale incluse) partagent la
même hauteur — min-height fixe plutôt qu'un padding qui varie avec le nombre de lignes de
.ch-stack-tier-lbl (ex. "Sixte / Septième" sur 2 lignes), pour que la tour ait un contour régulier. */
.ch-stack-tower-row{display:flex;align-items:stretch;gap:0;min-height:38px;box-sizing:border-box}
.ch-stack-key{width:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:.8rem;border:1px solid;border-radius:var(--r) 0 0 var(--r);box-sizing:border-box}
.ch-stack-key-empty{background:var(--s2);border-color:var(--bd);color:var(--tx3);font-weight:400;font-size:.72rem}
.ch-stack-legend{flex:1;display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:0 var(--r) var(--r) 0;background:var(--s2);border:1px solid var(--bd);border-left:none;min-width:0}
.ch-stack-tier-lbl{font-family:var(--fm);font-size:max(10px,.5rem);color:var(--tx3);text-transform:uppercase;letter-spacing:.04em;width:88px;flex-shrink:0;line-height:1.25}
.ch-stack-rail{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.ch-stack-cran{padding:3px 7px;border-radius:999px;border:1px solid var(--bd);background:transparent;color:var(--tx2);font-family:var(--fb);font-size:.6rem;cursor:pointer;transition:background-color var(--tr),border-color var(--tr),color var(--tr);white-space:nowrap}
.ch-stack-cran:hover:not(.disabled):not(.active){background:var(--s3);color:var(--tx)}
/* Repli neutre (gris) pour les crans "Aucune" qui n'ont pas de couleur d'intervalle propre (IV_COL) — les
crans avec une hauteur/qualité réelle reçoivent leur couleur d'intervalle en style inline (cf.
chStackRenderSlider), qui prévaut sur ce repli. */
.ch-stack-cran.active{background:var(--tx2);border-color:var(--tx2);color:var(--bg);font-weight:700}
.ch-stack-cran.disabled{opacity:.3;cursor:not-allowed}
.ch-stack-result{font-family:var(--fd);font-size:1.05rem;font-weight:800;display:flex;align-items:baseline;gap:8px}
.ch-stack-result-qual{font-family:var(--fm);font-size:.62rem;font-weight:400;color:var(--tx3)}
/* Diatonic panel */
.diat-title{font-family:var(--fm);font-size:max(10px,.55rem);font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;padding:4px 2px 2px}
.diat-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--r);border:1px solid var(--bd);background:var(--sf);cursor:pointer;transition:all var(--tr);-webkit-tap-highlight-color:transparent}
.diat-row:hover{border-color:var(--bd2);background:var(--s2)}
/* width fixe (pas seulement min-width) : "vii°" est plus large que les autres degrés (I, ii, V, vi...) et
débordait de l'ancien min-width:28px, décalant tout ce qui suit dans le flux flex (bouton play, nom...) sur
cette seule ligne — width fixe + text-align:center garantit un alignement identique sur toutes les lignes. */
/* width:40px (au lieu de 32px) : les degrés altérés (bIII, bVII...) débordaient de la boîte de 32px sur
desktop (racine 26px, .62rem ≈ 16px de police réelle contre ~11px en mobile) — le débordement de
contenu n'est pas contenu par le gap:6px du parent flex (.diat-row), donc le texte venait toucher
visuellement le bouton ♪ malgré cet espacement déclaré (bug rapporté). */
.diat-roman{font-family:var(--fm);font-size:.62rem;font-weight:700;width:40px;flex-shrink:0;text-align:center;color:var(--tx3)}
.diat-name{font-family:var(--fd);font-size:.88rem;font-weight:800;flex:1}
.diat-quality{font-family:var(--fm);font-size:max(10px,.52rem);color:var(--tx3);min-width:32px;text-align:right}
.diat-fn{font-family:var(--fm);font-size:max(10px,.48rem);padding:1px 5px;border-radius:3px;border:1px solid}
.diat-fn.T{border-color:#3d9e7888;color:#3d9e78}
.diat-fn.SD{border-color:#e0a03088;color:#e0a030}
.diat-fn.D{border-color:#e0505088;color:#e05050}
/* Alias de .vcard-play (module Accords, cf. index.html #genActions/vcards) : même bouton rond ♪ partout
dans l'appli (diagrammes d'accords, accords diatoniques du module Gammes...), une seule définition de
style pour les deux — auparavant dupliquée à l'identique ici, ce qui obligeait à répercuter tout
ajustement de lisibilité aux deux endroits séparément (risque d'oubli). .diat-play n'ajoute donc plus
qu'un correctif : .vcard-play est positionné en absolute (pensé pour flotter dans le coin d'une .vcard),
alors que le bouton diatonique vit dans le flux normal d'une rangée (row.appendChild, pas de .vcard
parent) — sans ce override, il hérite du position:absolute et disparaît du flux (bug constaté : bouton
introuvable après la fusion des deux classes).
Sélecteur .vcard-play.diat-play (spécificité 0-2-0, pas 0-1-0) : nécessaire pour battre .vcard-play seul
(styles.css ~ligne 1199, spécificité égale mais déclarée APRÈS ce bloc-ci — au cascade tie, la règle la
plus tardive gagne, donc un simple .diat-play{position:static} ici était silencieusement écrasé). Voir
aussi la media query desktop plus haut (.vcard-play:not(...){top:8px!important;right:10px!important})
qui matche aussi .diat-play via sa classe vcard-play partagée — exclue explicitement là-bas. */
.vcard-play.diat-play{position:static}
/* Glyphe ⊞ (bouton "Voir dans Accords" des accords diatoniques, cf. app.js buildDiatonicPanel) — HISTORIQUE :
plusieurs correctifs successifs de transform:translate en em sur un texte (décalage signalé "trop
bas", puis "haut-droite" à 100% zoom, puis "haut-gauche" après correction, donc un décalage qui inversait
de sens selon le zoom navigateur). Aucune valeur em/px fixe ne peut compenser ça de façon stable : c'est
un problème de rendu de police (hinting/subpixel dépendant plateforme+zoom), pas un simple offset constant
— chaque correctif ne faisait que déplacer le problème plutôt que le résoudre. Remplacé par un