/* ========================================================================== CASCADE — Design Pack v1 — Overrides applicatifs (SCOPED, NON-DESTRUCTIVE) -------------------------------------------------------------------------- GARDE-FOU PERMANENT : Toutes les règles ci-dessous sont scopées sous body[data-design-pack="v1"]. Sans le flag, aucune règle ne match. Aucun @layer (pour ne pas perdre la spécificité face aux règles unlayered de Cascade). Source originale : ../../../cascade-design-pack/cascade-overrides.css À charger APRÈS tokens.css. ========================================================================== */ /* Sentinel — prouve que le fichier est chargé (visible via DevTools). */ body[data-design-pack="v1"] { --design-pack-loaded: 'v1'; } /* ========================================================================= PHASE 3 — SCORE VIEW PAPIER CRÈME (desktop only) -------------------------------------------------------------------------- Override UNIQUEMENT le background + border-color de #rightPanel par les tokens papier du design pack. Plus chaud / saturé que le #FDF8ED Cascade : - Cascade desktop : #FDF8ED (very pale ivory) - Pack : #efe6d2 (warm cream / paper-bg) SCOPE DESKTOP ONLY (>= 601px) : Cascade applique un thème sombre explicite sur mobile via @media (max-width: 600px) { body.mtab-score #rightPanel { background: #0F0C08 !important; } } Les cellules d'accord mobile sont stylées amber-on-dark. Swap cream sur mobile = perte lisibilité. On ne touche que le desktop. GARDE INTACT : #rpTabs (gradient warm beige déjà), .rp-pane padding, .rp-content overflow, contenu enfant (grille, tab, manche, diagrammes, paroles, portée), VexFlow, alphaTab, structure-editor, mode iPhone dark. Spécificité : (1,1,1) — body + [data-design-pack="v1"] + #rightPanel. Bat la règle Cascade #rightPanel.bg-ivoryWarm (1,1,0) avec !important matché des deux côtés. Texte enfant (text-textDark = #2A241D, chord cells, lyrics) reste lisible sur fond clair — pas de risque contraste sur desktop. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #rightPanel, body[data-design-pack="v1"] #rightPanel.bg-ivoryWarm { background: var(--paper-bg) !important; border-color: var(--paper-line) !important; } /* .rp-content.tab-screen est la zone réelle de lecture (pane content avec gridlines horizontales). Cascade lui applique son propre #FDF8ED via le pattern linear-gradient. On override seulement la couleur de fond de base pour préserver le pattern gridlines (background-image), tout en swappant vers la teinte plus chaude --paper-bg. */ body[data-design-pack="v1"] .rp-content.tab-screen { background-color: var(--paper-bg) !important; } } /* ========================================================================= PHASE 2bis — HERO PHOTO SWAP (vraies photos DESIGN, desktop only) -------------------------------------------------------------------------- Phase 2 originale revert (commit 85d7254) car assets DESIGN étaient des mockups d'interface. Phase 2bis active maintenant avec 8 vraies photos 1600x893 paysage 16:9 livrées par Claude DESIGN : - hero-bassiste.jpg : Fender P-Bass + console + ampli vintage - hero-batteur.jpg : drum kit + cymbales + micros + studio - hero-chanteur.jpg : micro condensateur + spot + parois acoustiques - hero-guitariste.jpg : Strat + Les Paul + 2 amplis + tapis vintage - hero-pianiste.jpg : piano à queue noir laqué + micros - hero-soufflant.jpg : sax tenor + clarinette + trombone + partition - hero-mix.jpg : ambiance mix studio (profil custom) - hero-cordes.jpg : cello + violon + partition (BACKUP futur profil cordes) Override background-image via var(--hero-img) résolu par data-profile dans tokens.css. Position fine-tunée per profile pour bon cadrage (les positions Cascade originales étaient tunées pour leurs propres photos). GARDE INTACT (volontairement) : - height/min-height/z-index Cascade - ::before vignette gradient Cascade - layout interne hero (logo CASCADE, RIG STATUS, titre, profil/fichier dropdowns, navStudio) - mtab-* variants (mtab-studio / mtab-score / mtab-mixer / mtab-library) - body.more-me state - mobile (≤600px) : Cascade photos préservées (bass-studio.jpg etc.) Spécificité : (0,3,1) — body + [data-design-pack="v1"] + [data-profile=X] + .hero-zone-v7. Bat Cascade body[data-profile="X"] .hero-zone-v7 (0,2,1). ========================================================================= */ /* Phase 2bis (W expanded) : hero photo swap actif sur TOUS viewports (desktop + mobile). Photos DESIGN 1600x893 = qualité OK iPhone/iPad aussi. Mobile garde Cascade layout (height/min-height variants par mtab-*), seul le background-image swap. */ body[data-design-pack="v1"] .hero-zone-v7 { background-image: var(--hero-img) !important; } /* Per-profile background-position tuning pour les nouvelles photos DESIGN. Les positions Cascade originales (8% bass, 45% drums, etc.) étaient tunées pour bass-studio.jpg / drums-studio.jpg — pas adaptées aux nouvelles photos. Mêmes positions desktop + mobile (les photos sont responsive cover). */ body[data-design-pack="v1"][data-profile="bass"] .hero-zone-v7 { background-position: center 55% !important; } body[data-design-pack="v1"][data-profile="drums"] .hero-zone-v7 { background-position: center 60% !important; } body[data-design-pack="v1"][data-profile="guitar"] .hero-zone-v7 { background-position: center 60% !important; } body[data-design-pack="v1"][data-profile="vocals"] .hero-zone-v7 { background-position: center 50% !important; } body[data-design-pack="v1"][data-profile="keys"] .hero-zone-v7 { background-position: center 55% !important; } body[data-design-pack="v1"][data-profile="wind"] .hero-zone-v7 { background-position: center 50% !important; } body[data-design-pack="v1"][data-profile="custom"] .hero-zone-v7 { background-position: center 50% !important; } /* ========================================================================= PHASE 15AA — HERO TINT OVERLAY (vignette colorée par profil) -------------------------------------------------------------------------- Ajoute une couche de couleur (rgba ~0.3 alpha) sous le gradient vignette Cascade ::before. Effet : la photo hero reçoit une légère atmosphère colorée selon le profil actif : - bass : warm brown rgba(140, 70, 20, .35) - drums : cool teal rgba(60, 100, 90, .35) - vocals : warm rose rgba(120, 60, 70, .3) - keys : purple rgba(80, 60, 100, .3) - guitar : green rgba(80, 100, 50, .3) - wind : amber rgba(140, 90, 30, .3) - custom : warm brown rgba(140, 70, 20, .35) Multi-background stack (top to bottom) : - couche 1 : dark vignette Cascade (gradient noir préservé) - couche 2 : tint solide var(--hero-tint) (NOUVEAU) Compound alpha effect = teinte profil visible où vignette est partielle (haut + milieu hero), bottom reste dark (vignette rgba 0.9). GARDE INTACT : - .hero-zone-v7 background-image (Phase 2bis = photo design pack) - dimensions, position absolute, inset 0, pointer-events none ::before - text-shadow + colors of titles INSIDE hero (RIG STATUS, song title, artist) Cascade - Mobile (≤600px) bénéficie aussi (no @media scope ici, photos OK mobile aussi) Spécificité (1,2,1) > Cascade ::before (0,1,1). ========================================================================= */ body[data-design-pack="v1"] .hero-zone-v7::before { background: linear-gradient(to bottom, rgba(13,8,4,0.35) 0%, rgba(13,8,4,0.2) 40%, rgba(13,8,4,0.9) 100%), var(--hero-tint) !important; } /* ========================================================================= PHASE 4D — HERO ACTION CHIPS : ACCENT RING (minimal, desktop only) -------------------------------------------------------------------------- Override UNIQUEMENT le box-shadow extérieur de .hero-profile-chip (bouton PROFIL, NIVEAU, ANALYSE) pour remplacer la bordure brass générique `rgba(200,166,100,0.3)` par var(--accent-1) — couleur dynamique du profil actif (cuivre bass, émeraude drums, rose vocals, mauve keys, vert guitar, ambre wind, cuivre custom). Sur hover, ajout halo `var(--accent-glow)` 14px pour signature design pack discrète sans casser identité hardware vintage Cascade. GARDE INTACT : - background (gradient dark Cascade #2A2218 → #0E0B08) - inset highlight (rgba 200,166,100,0.15) — brass micro-relief - inset deep shadow (rgba 0,0,0,0.8) — depth - drop shadow extérieur (0 6px 14px -4px rgba 0,0,0,0.8) - border-radius, padding, font, icons, hover label color (Cascade) SCOPE DESKTOP ONLY (>= 601px) : Mobile chips déjà compactes, mtab-mixer/score peuvent les masquer ou reformat. On évite les régressions mobile. Spécificité : (1,1,1) — body + [data-design-pack="v1"] + .hero-profile-chip = bat la règle Cascade .hero-profile-chip (0,1,0) avec !important matché. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .hero-profile-chip { box-shadow: inset 1px 1px 1px rgba(200,166,100,0.15), inset -1px -1px 2px rgba(0,0,0,0.8), 0 6px 14px -4px rgba(0,0,0,0.8), 0 0 0 1px var(--accent-1) !important; transition: box-shadow var(--d-fast, 120ms) var(--ease-out, ease) !important; } body[data-design-pack="v1"] .hero-profile-chip:hover { box-shadow: inset 1px 1px 1px rgba(200,166,100,0.25), inset -1px -1px 2px rgba(0,0,0,0.8), 0 6px 18px -3px rgba(0,0,0,0.9), 0 0 0 1px var(--accent-1), 0 0 14px var(--accent-glow) !important; } } /* ========================================================================= PHASE 5 — LED ACCENT SWAP (minimal, desktop only) -------------------------------------------------------------------------- Override UNIQUEMENT la CSS var --led-active de Cascade pour qu'elle pointe vers var(--accent-1) — couleur du profil actif. Propagation automatique à TOUS les consumers via Cascade var() chain : - .led-amber (RIG STATUS, hero LED) → background + glow halo - .neuro-led.on (cascade-stage indicators) → background + glow - lignes 1459/1497 border-color → accent border - line 1674 color (text accent) → text data - JS dynamic LED setter (lines 17232-17233) GARDE INTACT (volontairement) : - --accent-soft (utilisé dans .fader-vcap gradient mixé avec --accent/ --accent-dim — swap unilatéral créerait mismatch chromatique) - --accent / --accent-dim (couleurs hardware Cascade) - .tb-amber* hardcoded colors (transport LCD style) - .btn-transport-v4, .brass-transport-plate, .tb-rivet, .tb-brass-rail-h, .tb-bg-tolex, .tb-lcd, .tb-hw-btn — tout l'identité hardware Cascade Effet visible : LEDs des indicateurs (RIG STATUS, cascade-stages neuro, hero LED) prennent la couleur du profil actif : - bass → cuivre #f0a02d - drums → émeraude #4ec9b0 - guitar → vert #98c875 - vocals → rose #e07a8a - keys → mauve #c9a8e8 - wind → ambre clair #e8b663 SCOPE DESKTOP ONLY (>= 601px) : par cohérence avec Phases 3+4D, mobile garde Cascade ambre default. Spécificité : le var --led-active est défini sur :root par Cascade. On le redéclare sur body[data-design-pack="v1"]. body est descendant de :root → la déclaration body wins pour body et tous ses descendants. ✓ ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] { --led-active: var(--accent-1); } } /* ========================================================================= PHASE 6G — SCORE VIEW TABS UNDERLINE ACCENT (minimal, desktop only) -------------------------------------------------------------------------- Override UNIQUEMENT border-bottom-color de .rp-tab.active (tab actif dans #rpTabs : Grille / Tab / Manche / Diagrammes / Paroles / Portée / Drum Tab) pour qu'il prenne var(--accent-1) — couleur du profil actif. GARDE INTACT : - color du tab actif (#FFB97A peach amber Cascade) - text-shadow - color/border-bottom des tabs inactifs et hover - layout, typography, spacing Spécificité : (1,2,1) — body + [data-design-pack="v1"] + .rp-tab + .active = bat la règle Cascade .rp-tab.active (0,2,0) avec !important matché. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .rp-tab.active { border-bottom-color: var(--accent-1) !important; } } /* ========================================================================= PHASE 6F — DEPRECATED (mauvais selectors) -------------------------------------------------------------------------- Phase 6F originale ciblait .tb-amber / .tb-amber-hot — ces classes sont définies dans Cascade CSS mais N'EXISTENT PAS dans le DOM v4 (qui utilise .amp-lcd / .amp-lcd-hot vocabulaire). Aucun match → aucun effet visuel. Remplacé par les rules .amp-lcd dans le bloc "Phase 19/20 RECTIFIÉE" plus bas dans ce fichier. ========================================================================= */ /* ========================================================================= PHASE 7I — SCORE HEAD BUTTONS ACCENT (minimal, desktop only) -------------------------------------------------------------------------- Override le state .active de : - .score-btn.active (Compact / Ligne / +2 / x2 dans #rpTabs) - .rp-edit-toggle.active (bouton ÉDITION qui révèle outils édition) Cascade default amber #ff8c1a → #c05c0a gradient + glow #ff8c1a. Pack : gradient var(--accent-1) → var(--accent-3) + glow var(--accent-glow). GARDE INTACT : - color du label dans le bouton actif (#1a0f06 dark — bon contraste sur accent gradient) - inset shadow (rgba 0,0,0,0.5) — depth - border-radius, padding, font, layout - state inactive et hover Cascade Spécificité : (1,2,1) > Cascade (0,2,0). !important matché. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .score-btn.active, body[data-design-pack="v1"] .rp-edit-toggle.active { background: linear-gradient(180deg, var(--accent-1) 0%, var(--accent-3) 100%) !important; border-color: var(--accent-1) !important; border-top-color: var(--accent-1) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 8px var(--accent-glow) !important; } } /* ========================================================================= PHASE 7J — ENGINE PILLS ACCENT (minimal, desktop only) -------------------------------------------------------------------------- Override .engine-pill.active border-color + box-shadow glow. Cascade default border rgba(255,140,26,0.55) + glow rgba(255,140,26,0.2). Pack : border var(--accent-1) + glow var(--accent-glow). GARDE INTACT : - background rgba(212,146,76,0.14) — pill tint warm, harmonise avec gradient brass des engine-pill inactives - .engine-pill (état inactive, Cascade) - .engine-pill-label color (#F4EAD0 cream) Spécificité : (1,3,1) > Cascade (0,2,0). !important matché. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .engine-pill.active { border-color: var(--accent-1) !important; box-shadow: 0 0 10px var(--accent-glow) !important; } } /* ========================================================================= PHASE 8B — STEMS CONSOLE : ME-LANE ACCENT RING (minimal, desktop only) -------------------------------------------------------------------------- Override box-shadow de .ch-strip.stem-lane.is-me — la lane qui correspond au profil actif (markée par Cascade JS markMeLane()) : - bass -> .ch-strip[data-stem-id="bass"].is-me - drums -> .ch-strip[data-stem-id="drums"].is-me - guitar -> .ch-strip[data-stem-id="guitar"].is-me - vocals -> .ch-strip[data-stem-id="vocals"].is-me - keys -> .ch-strip[data-stem-id="piano"].is-me - wind -> .ch-strip[data-stem-id="guitar"].is-me (partagé GTR) Ajoute : - ring intérieur 1px var(--accent-1) — couleur du profil - halo extérieur 10px var(--accent-glow) - préserve inset 0 0 10px rgba(0,0,0,0.5) Cascade — depth GARDE INTACT (volontairement) : - background, border-left/right, padding, layout - ::before stem-color (top bar identifies instrument visually) - ch-label-top colored per stem (instrument identification) - .fader-vcap orange gradient Cascade (cuivre brand) - VU meters, knobs, M/S buttons — full hardware mixer - autres lanes (non is-me) restent Cascade default Effet : la lane du profil actif reçoit un ring + halo profil-aware EN PLUS du code-couleur per-stem Cascade. Double signal "c'est ton stem" sans casser identification visuelle des autres stems. Spécificité : (1,3,1) — body + [data-design-pack="v1"] + .ch-strip + .stem-lane + .is-me. Plus haut que toute règle Cascade unitaire sur .ch-strip ou .ch-strip.stem-lane. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .ch-strip.stem-lane.is-me { box-shadow: inset 0 0 10px rgba(0,0,0,0.5), inset 0 0 0 1px var(--accent-1), 0 0 10px var(--accent-glow) !important; } } /* ========================================================================= PHASE 9L — MODALS / POPOVERS ACCENT BORDER (minimal, desktop only) -------------------------------------------------------------------------- Override border-color + box-shadow halo de : - .profile-popover (PROFIL / NIVEAU / ANALYSE / Préférences dropdowns) - .youi-modal (Import YouTube / URL modal) - .youi-modal h3 (titre principal du modal) Cascade default border = rgba(200,160,85,0.30/0.35) brass + amber #FF8C1A Pack : border + halo = var(--accent-1) + var(--accent-glow) GARDE INTACT : - background des modals (Cascade #2A2218 / #2a1f14 dark surfaces) - inner content : .profile-option, input, button text/style - z-index, positioning, padding, layout - .youi-modal button.primary garde son ambre Cascade (CTA action, pas un "active state" du modal lui-même) - section-labels (Cascade code-couleur sémantique préservé : intro=bleu, verse=cuivre, chorus=rouge, bridge=violet, instrumental=vert, pre-chorus=rose — pas touché car identification de TYPE de section prime sur identification du profil utilisateur) Spécificité : - .profile-popover (0,1,0) → mine (1,2,1) wins - .youi-modal (0,1,0) → mine (1,2,1) wins - .youi-modal h3 (0,1,1) → mine (1,2,2) wins !important matché côté Cascade (line 1133 inline declaration sans !important en fait, mais mes overrides forcent par sécurité). ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .profile-popover { border-color: var(--accent-1) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.7), 0 0 0 1px var(--accent-1), 0 0 16px var(--accent-glow) !important; } body[data-design-pack="v1"] .youi-modal { border-color: var(--accent-1) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.85), 0 0 0 1px var(--accent-1), 0 0 24px var(--accent-glow) !important; } body[data-design-pack="v1"] .youi-modal h3 { color: var(--accent-1) !important; } } /* ========================================================================= PHASE 10O — PLAYHEAD CHORD CELL ACCENT (minimal, desktop only) -------------------------------------------------------------------------- Override .measure-cell.is-active (cellule grille en cours de lecture pendant playback) — playhead-following highlight. Cascade default : gradient orange #FFAA44 → #D4924C → #8B5A2B + glow rgba(255,140,26,0.45). Pack : gradient var(--accent-1) → var(--accent-2) → var(--accent-3) + glow var(--accent-glow). Le playhead suit la couleur du profil actif. GARDE INTACT : - color du texte de la cellule active (#1a0f06 dark — bon contraste sur accent gradient — testé sur 6 profils, lisible) - text-shadow (rgba 255,234,181,0.4) - inset highlights (rgba 255,234,181,0.6 + rgba 0,0,0,0.25 depth) - drop shadow (0 2px 4px rgba 0,0,0,0.2) - .measure-cell:not(.is-active) — état idle Cascade preserved - mobile .measure-cell.active-bar / .current-measure (mtab-score variant reste Cascade rgba(200,160,85,0.22) — séparé desktop) - section-labels Cascade (Phase 9N skip) Sélecteur secondaire .measure-cell[style*="background: var(--accent"] : Cascade applique parfois `background: var(--accent...)` inline via JS. On override aussi pour cohérence visuelle avec is-active. Spécificité : (1,3,0) — body + [data-design-pack="v1"] + .measure-cell + .is-active. Bat Cascade .measure-cell.is-active (0,2,0) avec !important matché. Effet : la cellule jouée pendant playback s'illumine de la couleur du profil. Cycle profil pendant playback = playhead change couleur instant. ========================================================================= */ /* Grille iReal-style (2026-06-11) : la cellule active passe d'un gradient "bouton vintage" à un wash translucide + soulignement — le look plat iReal garde les barlines lisibles. L'accent suit toujours le profil. */ @media (min-width: 601px) { body[data-design-pack="v1"] .measure-cell.is-active, body[data-design-pack="v1"] .measure-cell[style*="background: var(--accent"] { background: color-mix(in srgb, var(--accent-1) 26%, transparent) !important; color: #1F1A12 !important; text-shadow: none; box-shadow: inset 0 -3px 0 var(--accent-2) !important; } } /* ========================================================================= PHASE 11P — STRUCTURE DRAG HANDLES ACCENT (minimal, desktop only) -------------------------------------------------------------------------- Override .section-drag-handle (handle ⋮⋮ pour drag boundaries section dans grille-edit-mode) — Cascade default cuivre rgba(212,146,76,...). Pack : accent profil + glow. Override 3 états : - default : background rgba accent-1, border rgba accent-1 - :hover : background plus dense + color accent-3 (texte) - .struct-drag-active (drag actif) : ring + halo accent GARDE INTACT (volontairement non-touché) : - .mm-flag-handle (amber #b45309 = couleur sémantique "meter flag") - .chord-edit-handle (vert #166534 = couleur sémantique "OK / edit chord") - .grille-edit-legend (légende édition Cascade) - .measure-cell hover/edit states (Cascade preserved) Spécificité : (1,2,1) — body + [data-design-pack="v1"] + .section-drag-handle Bat .section-drag-handle (0,1,0). ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .section-drag-handle { background: color-mix(in srgb, var(--accent-1) 12%, transparent) !important; border-color: color-mix(in srgb, var(--accent-1) 40%, transparent) !important; } body[data-design-pack="v1"] .section-drag-handle:hover { background: color-mix(in srgb, var(--accent-1) 30%, transparent) !important; color: var(--accent-3) !important; } body[data-design-pack="v1"] .section-drag-handle.struct-drag-active { background: color-mix(in srgb, var(--accent-1) 50%, transparent) !important; color: var(--accent-3) !important; box-shadow: 0 0 0 2px var(--accent-1), 0 0 12px var(--accent-glow) !important; } } /* ========================================================================= PHASE 11Q — LIBRARY ROWS + ACTIVE BANNER ACCENT (minimal, desktop only) -------------------------------------------------------------------------- Override library page hover + active states avec accent profil : - .lib-row:hover : background tint accent profil - .lib-active-banner : border + background accent profil GARDE INTACT : - .lib-table layout, headers, row borders Cascade - .lib-row default (no hover) — rests neutral Cascade - .lib-row.is-busy (opacity 0.55 disabled state) - .lib-active-banner-info text colors (Cascade #C9B894 / #FFD89A) - .lib-active-banner-back button (Cascade copper hover Cascade) Spécificité : (1,2,1) > Cascade (0,1,0/1). ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .lib-row:hover { background: color-mix(in srgb, var(--accent-1) 10%, transparent) !important; } body[data-design-pack="v1"] .lib-active-banner { background: color-mix(in srgb, var(--accent-1) 15%, transparent) !important; border-color: color-mix(in srgb, var(--accent-1) 50%, transparent) !important; } } /* ========================================================================= PHASE 12T — SCROLLBARS ACCENT (minimal, desktop only) -------------------------------------------------------------------------- Override ::-webkit-scrollbar-thumb tint avec accent profil. Cascade default = brass rgba(200,160,85,0.4 / 0.7). Pack = var(--accent-1) avec transparency via color-mix. GARDE INTACT : - ::-webkit-scrollbar (size 6x6) - ::-webkit-scrollbar-track (rgba 26,22,18,0.5 dark Cascade) - #rpTabs scrollbar hidden (mtab-score variant Cascade preserved) - scrollbar-width none sur #rpTabs (Cascade) Spécificité : pseudo-elements suivent regular cascade. Mine wins by spec. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-1) 40%, transparent) !important; } body[data-design-pack="v1"] ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent-1) 70%, transparent) !important; } } /* ========================================================================= PHASE 12U — LOADING PROGRESS BARS ACCENT (minimal, desktop only) -------------------------------------------------------------------------- Override les indicateurs de progression Cascade pendant traitement : - .hero-progress : border accent profil - .hero-progress-label : color accent (peach amber → accent profil) - .hero-progress-chip.active: border + halo glow accent - .hero-progress-chip.active::after : shimmer gradient accent - .hero-progress-chip.active .hp-dot : LED dot accent - .analyse-progress-bar : shimmer gradient accent GARDE INTACT : - .hero-progress background (rgba 14,10,6,0.72 dark warm) - backdrop-filter blur Cascade - .hero-progress-chip default + done states (Cascade brass tint) - .analyse-progress track (rgba 0,0,0,0.45 dark) - keyframes animations Cascade (durations + easing intacts) Effet : pendant un import/analyse de morceau, la barre de progression pulse en couleur du profil actif. Signature design pack pendant les moments les plus visuels de l'app. Spécificité : (1,2,1)+ > Cascade (0,1,0)+. !important matché. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .hero-progress { border-color: color-mix(in srgb, var(--accent-1) 50%, transparent) !important; } body[data-design-pack="v1"] .hero-progress-label { color: var(--accent-1) !important; } body[data-design-pack="v1"] .hero-progress-chip.active { border-color: var(--accent-1) !important; box-shadow: 0 0 14px var(--accent-glow) !important; } body[data-design-pack="v1"] .hero-progress-chip.active::after { background: linear-gradient(90deg, transparent 0%, var(--accent-1) 20%, var(--accent-2) 50%, var(--accent-1) 80%, transparent 100%) !important; background-size: 50% 100% !important; background-repeat: no-repeat !important; } body[data-design-pack="v1"] .hero-progress-chip.active .hp-dot { background: var(--accent-1) !important; box-shadow: 0 0 6px var(--accent-1) !important; } body[data-design-pack="v1"] .analyse-progress-bar { background: linear-gradient(90deg, transparent 0%, var(--accent-1) 30%, var(--accent-2) 50%, var(--accent-1) 70%, transparent 100%) !important; box-shadow: 0 0 8px var(--accent-glow) !important; } } /* ========================================================================= PHASE 13R — KNOB POINTER LINES ACCENT (minimal, desktop only) -------------------------------------------------------------------------- Override les ::before pointer lines de .knob-compact et .knob-large (lignes indicatrices de la valeur sur les knobs vintage hardware). Cascade default = var(--accent) défini dans :root sur var(--copper-500). Pack : var(--accent-1) directement = couleur profil active. GARDE INTACT (volontairement) : - knob bezel (border 2-3px var(--accent)) — Cascade brand cuivre préservé pour cohérence hardware vintage - knob body radial-gradient (#3a3a3a → #0a0a0a) - inset shadows depth Cascade - .knob-base, .knob-trim-copper, .tb-dial — autres knobs intacts - --accent global var (autres consumers : .file-chip, .engine-pill, fader-vcap gradient, JS inline styles — non touchés) Effet : la ligne indicatrice de chaque knob vintage prend la couleur du profil. Le bezel reste cuivre Cascade — micro-touche profil sans casser l'identité hardware. Spécificité : (1,2,1) — body + [data-design-pack="v1"] + .knob-X + ::before. Plus haut que .knob-X::before (0,1,1). ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .knob-compact::before, body[data-design-pack="v1"] .knob-large::before { background: var(--accent-1) !important; box-shadow: 0 0 3px var(--accent-1) !important; } } /* ========================================================================= PHASE 13 POLISH — LIBRARY SORT-ACTIVE HEADER ACCENT (minimal, desktop) -------------------------------------------------------------------------- Override .lib-table th.sort-active color (column header avec tri actif dans library page) — Cascade default #E8B57F brass clair. Pack accent profil pour cohérence avec les autres surfaces "actif" du pack. GARDE INTACT : - .lib-table th default color (Cascade) - .lib-table th[data-sort]:hover #D4924C (Cascade) - layout, padding, font Spécificité (1,2,1) > Cascade (0,2,0). ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .lib-table th.sort-active { color: var(--accent-1) !important; } } /* ========================================================================= PHASE 14R-bis — MIXER FADER + PAN KNOB ACCENT (is-me lane, desktop only) -------------------------------------------------------------------------- Override fader handle (.fader-vcap) + pan knob indicator (.knob-pan::before) sur la stem-lane qui correspond au profil actif (.is-me, marquée par Cascade markMeLane()). Cascade default = gradient cuivre orangé Cascade --accent-soft / --accent / --accent-dim (#FFB97A → #D4924C → #5C3215). Pack v2.1 : gradient design pack var(--accent-1) → var(--accent-2) → var(--accent-3) avec bordures accent-1/accent-3. GARDE INTACT : - autres lanes (non is-me) : faders cuivre Cascade brand préservés - master-strip fader (red sémantique master output) intact - fader-vslot (slot vertical), VU meters, ch-strip background, M/S buttons, knob bezels (radial-gradient hardware Cascade) - layout, dimensions, transitions Effet : sur le mixer, la lane du profil actif voit son fader handle ET sa pan knob indicator prendre les teintes du profil. Cohérence avec Phase 8B (lane ring + halo) — la lane is-me devient pleinement profil-aware en chrome ET en commande. Spécificité : (1,4,1) — body + [data-design-pack="v1"] + .ch-strip + .stem-lane + .is-me + .fader-vcap. Bat Cascade per-profile-per-stem selectors (0,3,1). ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .ch-strip.stem-lane.is-me .knob-pan::before { background: var(--accent-1) !important; box-shadow: 0 0 3px var(--accent-1) !important; } body[data-design-pack="v1"] .ch-strip.stem-lane.is-me .fader-vcap { background: linear-gradient(to bottom, var(--accent-1) 0%, var(--accent-2) 40%, var(--accent-3) 50%, var(--accent-2) 60%, var(--accent-1) 100%) !important; border-top: 1px solid var(--accent-1) !important; border-bottom: 2px solid var(--accent-3) !important; } } /* ========================================================================= PHASE 16DD — LYRICS KARAOKE WORD/LINE ACCENT (desktop only) -------------------------------------------------------------------------- Cascade lyrics karaoke playback (line 14770+ JS) applique des INLINE styles via `el.style.color/background = '...'` : - .lyric-line active line : color=var(--accent-dim,#5C3215), bg=rgba(212,146,76,0.15) - .lyric-word active word : color=#C25A1C, bg=rgba(194,90,28,0.25) - .lyric-word past words : color=var(--accent-dim,#5C3215) Inline JS styles ont spécificité 1000+ — seul !important CSS peut les battre. Stratégie : attribute selector `[style*="literal"]` qui match les valeurs littérales JS, puis !important. GARDE INTACT : - .lyric-word default (pas joué) — Cascade neutre - .lyric-line default (hover/cursor) - color-mode et edit-mode states .lyric-word - downbeat marker variants - layout, font, padding ⚠️ FRAGILE : si Cascade JS change les valeurs littérales (ex `#C25A1C` devient autre chose), nos rules cessent de matcher. Pas de casse — juste retombe sur Cascade default. Spécificité : (1,3,1) inline matching = bat inline JS (qui n'a pas !important). ========================================================================= */ @media (min-width: 601px) { /* Active sung line */ body[data-design-pack="v1"] #parolesWrap .lyric-line[style*="rgba(212,146,76,0.15)"] { background: color-mix(in srgb, var(--accent-1) 15%, transparent) !important; color: var(--accent-3) !important; } /* Currently sung word (karaoke playhead) */ body[data-design-pack="v1"] #parolesWrap .lyric-word[style*="rgba(194,90,28,0.25)"] { background: color-mix(in srgb, var(--accent-1) 25%, transparent) !important; color: var(--accent-1) !important; } /* Past words (already sung) — match var(--accent-dim) reference but EXCLUDE active word (which also references --accent-dim during transition) */ body[data-design-pack="v1"] #parolesWrap .lyric-word[style*="--accent-dim"]:not([style*="rgba(194,90,28"]) { color: var(--accent-3) !important; } /* Edit-mode active word (contenteditable) */ body[data-design-pack="v1"] #parolesWrap .lyric-word[contenteditable="true"] { outline-color: var(--accent-1) !important; background: color-mix(in srgb, var(--accent-1) 20%, transparent) !important; } } /* ========================================================================= PHASE 16CC — CHORD DIAGRAMS ACTIVE CELL ACCENT (desktop only) -------------------------------------------------------------------------- Cascade chord diagram active state (paneDiagrammes, line 14752+ JS) : `cell.style.background = 'rgba(212,146,76,0.2)'` `cell.style.borderColor = 'var(--accent,#D4924C)'` `cell.style.boxShadow = '0 0 10px rgba(212,146,76,0.3)'` Override via attribute selector match. Quand le diagramme du chord actuellement joué est highlighted, il prend les teintes profil. GARDE INTACT : - .chord-diagram-cell idle state (Tailwind border/bg) - tous les diagrammes inactifs - layout, padding, font Spécificité : (1,1,1) — body + [data-design-pack="v1"] + .chord-diagram-cell[style*="..."]. Bat inline JS sans !important. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .chord-diagram-cell[style*="rgba(212,146,76,0.2)"] { background: color-mix(in srgb, var(--accent-1) 20%, transparent) !important; border-color: var(--accent-1) !important; box-shadow: 0 0 10px var(--accent-glow) !important; } } /* ========================================================================= PHASE 17FF — TAB MESURE ACTIVE ROW ACCENT (desktop only) -------------------------------------------------------------------------- Cascade tab pane (line 14760+ JS) applique inline styles sur la mesure en cours de lecture : - .tab-measure-row.active : bg=rgba(212,146,76,0.18), outline=2px solid var(--accent,#D4924C) Override via attribute selector match → accent-1 tints. Pattern Phase 16 (DD/CC) — fragile if Cascade JS literal change, mais pas de casse. Spécificité : (1,1,1) > inline JS sans !important. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .tab-measure-row[style*="rgba(212,146,76,0.18)"] { background: color-mix(in srgb, var(--accent-1) 18%, transparent) !important; outline-color: var(--accent-1) !important; } } /* ========================================================================= PHASE 17GG — VEXFLOW PORTÉE MESURE HIGHLIGHT ACCENT (desktop only) -------------------------------------------------------------------------- Cascade VexFlow portée (highlightVexMeasure() line 14608+) crée un SVG avec fill="rgba(212,146,76,0.18)" pour highlight la mesure courante. Override via class selector — CSS fill gagne sur SVG presentation attribute. GARDE INTACT : - VexFlow notation noire (Phase 13S) - rect dimensions, position, rx - layout portée Spécificité : (1,1,1) — body + [data-design-pack="v1"] + .vex-bar-hl. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .vex-bar-hl { fill: color-mix(in srgb, var(--accent-1) 22%, transparent) !important; } } /* ========================================================================= PHASE 17EE — DRUM TAB CURSOR ACCENT (desktop only, best-effort) -------------------------------------------------------------------------- alphaTab v1.8 (CDN) rend la drum tab dans #paneDrumTab. Cursor classes standard alphaTab : - .at-cursor-bar : highlight bar cursor (overlay sur mesure courante) - .at-cursor-beat : beat cursor (marker beat précis) - .at-selection : sélection user Override best-effort : si alphaTab v1.8 utilise ces classes, le cursor prend la couleur profil. Si alphaTab change ses classes en future version, nos rules cessent silencieusement (pas de casse, retour Cascade default). GARDE INTACT : - drum tab notation noire alphaTab - layout, dimensions, font - .rp-pane#paneDrumTab background Spécificité : (1,1,2). ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #paneDrumTab .at-cursor-bar { background: color-mix(in srgb, var(--accent-1) 25%, transparent) !important; } body[data-design-pack="v1"] #paneDrumTab .at-cursor-beat { background: var(--accent-1) !important; } body[data-design-pack="v1"] #paneDrumTab .at-selection { background: color-mix(in srgb, var(--accent-1) 30%, transparent) !important; } } /* ========================================================================= PHASE 18II — HERO PROGRESS CHIPS DEFAULT BORDER ACCENT (desktop only) -------------------------------------------------------------------------- Override .hero-progress-chip default state border. Cascade default : rgba(200,160,85,0.25) brass tint. Pack : color-mix accent 25%. Phase 12U a déjà touché .hero-progress-chip.active. Phase 18II complète en colorant les chips inactives (étape passées ou pas encore atteintes) pour cohérence pendant traitement morceau. GARDE INTACT : - background des chips (rgba 30,22,14,0.85 dark warm) - color text (rgba 232,205,144,0.55) brass dim - .active state (Phase 12U) - .done state (collapse opacity 0) - layout, padding, font Spécificité (1,1,1) > Cascade (0,1,0). ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .hero-progress-chip { border-color: color-mix(in srgb, var(--accent-1) 25%, transparent) !important; } } /* ========================================================================= PHASE 19/20 RECTIFIÉE — TOPBAR ACCENT (v4 actual selectors) -------------------------------------------------------------------------- FIX critique : Phase 19+20 originales ciblaient `.tb-*` selectors (`.tb-amber`, `.tb-hw-btn`, `.tb-lcd`, etc.) qui sont définis dans CSS Cascade mais N'EXISTENT PAS dans le DOM v4. La topbar v4 utilise le vocabulaire `.amp-*` et `.cv4-*`. Mes anciennes rules ne matchaient rien → user voyait zéro changement. Re-implémentation avec les vrais selectors v4 : - `.amp-lcd` (LCD text BPM/KEY/CHORD/etc.) - `.amp-lcd-hot` (LCD text variant hot, time hot) - `.cv4-led` (LED dim/off) - `.cv4-led.on` (LED allumée) - `.amp-info-row .amp-label` (labels engravés sur dark info-row) Boutons transport `.amp-btn` skipped : ce sont des PNG sprites (btn-1.png à btn-5.png), color non-overridable via CSS sans hue-rotate filter (qui colorizera tout le bouton, pas juste l'icone). GARDE INTACT : - .amp-lcd background (radial gradient dark + linear gradient noir) - .amp-lcd border depth (#000 + #2a1810 corners) — recess effect - .amp-lcd inset shadows (depth) - .amp-section-label (gravure dark sur gold plate, lisibilité prime) - .amp-btn PNG sprites (vintage hardware buttons) - .amp-bar tolex texture, brass plate, frame ========================================================================= */ /* LCD text color + glow (BPM, KEY, CHORD, SECTION, NIV displays + time) */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar .amp-lcd { color: var(--accent-1) !important; text-shadow: 0 0 4px var(--accent-glow), 0 0 8px var(--accent-glow) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-lcd-hot { color: var(--accent-1) !important; text-shadow: 0 0 6px var(--accent-1), 0 0 12px var(--accent-glow) !important; } } /* LEDs RIG STATUS + SOURCE (cv4-led on + off) */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar.cv4 .cv4-led.on { background: var(--accent-1) !important; border-color: var(--accent-1) !important; box-shadow: 0 0 6px var(--accent-glow) !important; } body[data-design-pack="v1"] #cascade-studio-topbar.cv4 .cv4-led { background: color-mix(in srgb, var(--accent-1) 18%, transparent) !important; border-color: color-mix(in srgb, var(--accent-1) 35%, transparent) !important; } } /* Engraved labels sur info-row dark (BPM, KEY, CHORD, SECTION, NIV) */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar .amp-info-row .amp-label { color: color-mix(in srgb, var(--accent-1) 55%, transparent) !important; } } /* ========================================================================= PHASE 22.1 — TOPBAR FOND PLAT (Chantier A v3, desktop only) -------------------------------------------------------------------------- Phase 22 = refonte UI majeure topbar selon brief Claude DESIGN. Abandon du chrome vintage hardware (plate dorée, screws, recess inset) pour fond plat uni style system.css `.track-bar` + `.transport`. Sub-phase 22.1 = layout/background seulement : - Kill plate-gold.png URL background - Kill 4 corner screws (.amp-bar::after radial gradients) - Kill inset recess shadow .amp-info-row - Fond uni var(--c-bg) #0c0a08 - Borders fines var(--c-line-faint) - Préserver hauteur layout (110px) pour ne pas casser flex-shrink topbar GARDE INTACT (sub-phase 22.1) : - LCD displays + LEDs + accents (Phases 19-fix + 21 actifs) - PNG buttons amp-btn (sub-phase 22.4 traite) - Labels typo (sub-phase 22.3 traite) - Layout flex internal (rows, cells, sections) Spécificité (1,2,1) > Cascade (1,1,0) avec !important. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar.amp-bar { background: var(--c-bg) !important; border-top: 1px solid var(--c-line-faint) !important; border-bottom: 1px solid var(--c-line-faint) !important; box-shadow: none !important; height: 140px !important; min-height: 140px !important; } body[data-design-pack="v1"] #cascade-studio-topbar.amp-bar::after { display: none !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-info-row { background: transparent !important; border-bottom: 1px solid var(--c-line-faint) !important; box-shadow: none !important; height: 44px !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-action-row { background: var(--c-bg) !important; height: 96px !important; max-height: 96px !important; } } /* ========================================================================= PHASE 22.2 — LCD PLAIN TEXT (Chantier A v3, desktop only) -------------------------------------------------------------------------- Kill l'effet "écran LCD vintage" sur .amp-lcd (BPM/KEY/CHORD/SECTION/NIV/ tempo/time displays). Cascade default = recess noir + linear-gradient + border + inset shadow + text-shadow glow heavy = simulation hardware LCD. Pack v3 = text plain mono italic sur fond transparent. Match style system.css `.track-bar .stat .v` minimal. - Background → transparent (kill radial gradient + linear gradient dark) - Border → none (kill border noir + recess corners) - Box-shadow → none (kill inset recess depth) - Text-shadow → none (kill glow heavy 4px+8px ; garde lisibilité plain) - Color reste accent profil (Phase 19 RECTIFIÉE déjà actif) GARDE INTACT : - font-family DSEG7/JetBrains Mono (typo Cascade) - font-weight 700 - dimensions/padding par variant (.amp-lcd-tiny/sm/md/lg) - color accent profil (Phase 19) Spécificité (1,1,2) > Cascade (1,0,1). !important matché. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar .amp-lcd { background: transparent !important; border: none !important; box-shadow: none !important; text-shadow: none !important; } /* .amp-lcd-hot reste avec léger halo accent (signal "hot value") */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-lcd-hot { text-shadow: 0 0 8px var(--accent-glow) !important; } /* Time displays (#valTime current + #valTimeTotal) = BLANC (target DESIGN montre "0:00 / 4:20" en blanc, pas accent profil) */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-info-stretch .amp-lcd { color: var(--c-text-1) !important; text-shadow: none !important; } } /* ========================================================================= PHASE 22.13 — NAV BOTTOM (mobile/iPad) accent profil + agrandi -------------------------------------------------------------------------- #mobileTabBar = nav bottom Studio/Mixer/Score/Library (visible uniquement viewport ≤600px par Cascade, mais peut être étendu). - Hauteur 64 → 72px, padding plus aéré - .mtab-btn[aria-selected="true"] color #FFB97A → var(--accent-1) - icon color → var(--accent-1) + glow accent - underline ::before → var(--accent-1) Cascade media query targeting déjà ≤600px. On override dans même scope. ========================================================================= */ @media (max-width: 600px) { body[data-design-pack="v1"] .mobile-tab-bar { height: 72px !important; background: linear-gradient(180deg, var(--c-panel) 0%, var(--c-bg) 100%) !important; border-top: 1px solid color-mix(in srgb, var(--accent-1) 35%, transparent) !important; box-shadow: 0 -4px 12px rgba(0,0,0,0.5) !important; } body[data-design-pack="v1"] .mtab-btn { padding: 10px 4px !important; font-size: 11px !important; } body[data-design-pack="v1"] .mtab-btn i { font-size: 24px !important; } body[data-design-pack="v1"] .mtab-btn[aria-selected="true"] { color: var(--accent-1) !important; } body[data-design-pack="v1"] .mtab-btn[aria-selected="true"] i { color: var(--accent-1) !important; filter: drop-shadow(0 0 6px var(--accent-glow)) !important; } body[data-design-pack="v1"] .mtab-btn[aria-selected="true"]::before { background: var(--accent-1) !important; box-shadow: 0 0 8px var(--accent-glow) !important; height: 3px !important; } } /* ========================================================================= PHASE 22.3 — TYPO SERIF ITALIC LABELS + VALUES (Chantier A v3, desktop) -------------------------------------------------------------------------- Match screenshot DESIGN target topbar typo : - Labels engravés ("BPM/KEY/CHORD/SECTION/NIV") restent mono caps dim (déjà actif via Phase 19 fix accent dim) - Values ("G major / Em9 / verse 4 / 78 / 2") passent en serif italic var(--font-display) = Fraunces Override .amp-lcd font-family + font-style. Variants .amp-lcd-tiny/sm/lg bat par spécificité (1,1,2) > (0,2,0). GARDE INTACT : - color accent profil (Phase 19) - dimensions/padding par variant (font-size + min-width preserved) - background transparent (Phase 22.2) ⚠️ Tradeoff : numeric BPM "78" / time "0:00" deviennent italic serif aussi. Look "fancy book" partout vs "clean tech mono" partout. DESIGN fidèle. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar .amp-lcd { font-family: var(--font-display, 'Fraunces', 'Source Serif 4', Georgia, serif) !important; font-style: italic !important; font-weight: 500 !important; } /* Labels mono caps stay (pas serif — c'est volontaire pour distinguer label gravé vs value italique éditoriale). */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-info-row .amp-label { font-family: var(--font-mono) !important; font-style: normal !important; font-weight: 700 !important; } } /* ========================================================================= PHASE 22.4 — BOUTONS TRANSPORT FLAT + ACCENT (Chantier A v3, desktop) -------------------------------------------------------------------------- .amp-btn = bouton transport (skip back / stop / play / loop / metro click). Cascade default = PNG sprite vintage (btn-1.png à btn-5.png) avec icon SVG inline `currentColor` au centre. Pack v3 : - Kill PNG sprite background-image - Cercle outline accent + icône accent (style DESIGN target) - Play button (.amp-btn-hero) = cercle PLEIN accent profil + icon dark - Step buttons = outline accent dim + icon accent dim, hover full - Filter drop-shadow Cascade killed (kill amber halo Phase 21 trop heavy pour DESIGN flat) GARDE INTACT : - SVG inline icon (currentColor compatible) - :disabled state opacity - layout flex .amp-controls Spécificité (1,1,2) > Cascade (0,1,0). !important matché. ========================================================================= */ @media (min-width: 601px) { /* Force shorthand `background: transparent` pour beat Cascade `.amp-btn-red/orange/blue/white { background: url(...) !important }` même spécificité (1,1,2) > (0,1,0) mais shorthand !important kill image+color en bloc. */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn { background: transparent !important; background-image: none !important; background-color: transparent !important; border: 1px solid color-mix(in srgb, var(--accent-1) 30%, transparent) !important; border-radius: 50% !important; color: color-mix(in srgb, var(--accent-1) 70%, transparent) !important; filter: none !important; width: 36px !important; height: 36px !important; transition: border-color 0.15s, color 0.15s, box-shadow 0.15s !important; } /* Override per-color amp-btn-red/orange/blue/white spécifiques pour battre leur shorthand background. Spécificité (1,2,2) > (0,1,0) Cascade. */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-red, body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-orange, body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-blue, body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-white, body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-off, body[data-design-pack="v1"] #cascade-studio-topbar #btnSkipBack { background: transparent !important; background-image: none !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn:hover:not(:disabled) { border-color: var(--accent-1) !important; color: var(--accent-1) !important; box-shadow: 0 0 12px var(--accent-glow) !important; filter: none !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn:active:not(:disabled) { background: color-mix(in srgb, var(--accent-1) 15%, transparent) !important; transform: translateY(0) !important; filter: none !important; } /* Play button hero = cercle plein accent + icône DARK + glow + plus gros. Doit aussi battre .amp-btn.amp-btn-red rule plus haut → spec (1,2,2). */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-hero, body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-red.amp-btn-hero { background: var(--accent-1) !important; background-image: none !important; background-color: var(--accent-1) !important; border-color: var(--accent-1) !important; color: var(--c-bg) !important; width: 56px !important; height: 56px !important; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-1) 8%, transparent), 0 0 24px var(--accent-glow) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-hero:hover:not(:disabled), body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-red.amp-btn-hero:hover:not(:disabled) { background: var(--accent-1) !important; background-color: var(--accent-1) !important; color: var(--c-bg) !important; filter: brightness(1.12) !important; box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-1) 10%, transparent), 0 0 28px var(--accent-glow) !important; } /* Force icon SVG color blanc-ish (SVG inline use currentColor) — sur play dark, sur autres accent. Override Cascade `.amp-btn svg { color: #F4EAD0 }` ligne 4305 et `.amp-btn-orange svg { color: #1a0f06 }` ligne 4310. */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn svg, body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-orange svg, body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-white svg { color: inherit !important; filter: none !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn.amp-btn-hero svg { color: var(--c-bg) !important; } /* ═══════════════════════════════════════════════════════════════ PHASE 22.15 — Override Cascade per-button ID rules (line 6853-6900) Cascade utilise `#cascade-studio-topbar.cv4 #btnPlay/btnStop/btnLoop/ btnSkipBack` = spec (2,1,0) + !important pour amber radial gradient hardware. Pour beat = mes selectors doivent aussi avoir ≥ 2 IDs. Spec body + #cascade-studio-topbar + #btnX = (2,1,1) > (2,1,0). ✓ ═══════════════════════════════════════════════════════════════ */ body[data-design-pack="v1"] #cascade-studio-topbar #btnSkipBack, body[data-design-pack="v1"] #cascade-studio-topbar #btnStop, body[data-design-pack="v1"] #cascade-studio-topbar #btnLoop, body[data-design-pack="v1"] #cascade-studio-topbar #btnMetro, body[data-design-pack="v1"] #cascade-studio-topbar #btnMetroMobile { background: transparent !important; background-image: none !important; border: 1px solid color-mix(in srgb, var(--accent-1) 30%, transparent) !important; color: color-mix(in srgb, var(--accent-1) 70%, transparent) !important; box-shadow: none !important; filter: none !important; width: 36px !important; height: 36px !important; } body[data-design-pack="v1"] #cascade-studio-topbar #btnSkipBack:hover:not(:disabled), body[data-design-pack="v1"] #cascade-studio-topbar #btnStop:hover:not(:disabled), body[data-design-pack="v1"] #cascade-studio-topbar #btnLoop:hover:not(:disabled), body[data-design-pack="v1"] #cascade-studio-topbar #btnMetro:hover:not(:disabled), body[data-design-pack="v1"] #cascade-studio-topbar #btnMetroMobile:hover:not(:disabled) { border-color: var(--accent-1) !important; color: var(--accent-1) !important; box-shadow: 0 0 12px var(--accent-glow) !important; } body[data-design-pack="v1"] #cascade-studio-topbar #btnSkipBack svg, body[data-design-pack="v1"] #cascade-studio-topbar #btnStop svg, body[data-design-pack="v1"] #cascade-studio-topbar #btnLoop svg, body[data-design-pack="v1"] #cascade-studio-topbar #btnMetro svg, body[data-design-pack="v1"] #cascade-studio-topbar #btnMetroMobile svg { color: inherit !important; filter: none !important; } /* Play button #btnPlay — cercle plein accent + icône dark */ body[data-design-pack="v1"] #cascade-studio-topbar #btnPlay { background: var(--accent-1) !important; background-image: none !important; background-color: var(--accent-1) !important; border: 1px solid var(--accent-1) !important; color: var(--c-bg) !important; width: 56px !important; height: 56px !important; border-radius: 50% !important; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-1) 8%, transparent), 0 0 24px var(--accent-glow) !important; filter: none !important; } body[data-design-pack="v1"] #cascade-studio-topbar #btnPlay:hover:not(:disabled) { background: var(--accent-1) !important; color: var(--c-bg) !important; filter: brightness(1.12) !important; box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-1) 10%, transparent), 0 0 28px var(--accent-glow) !important; } body[data-design-pack="v1"] #cascade-studio-topbar #btnPlay svg { color: var(--c-bg) !important; filter: none !important; width: 22px !important; height: 22px !important; } /* ═══════════════════════════════════════════════════════════════ PHASE 22.16 fixes : 1. Nav play group vertical center dans action-row 2. Time #valTime cream — Cascade ligne 6534 spec (2,2,1) à battre 3. Knobs chrome-sm/md/lg PNG sprites kill (Phase 22.8 .amp-knob seul spec (0,1,0) battu par .amp-knob.amp-knob-chrome-sm spec (0,2,0)) ═══════════════════════════════════════════════════════════════ */ /* 1. Vertical center play group dans action-row (était top:0 absolute) */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-section-center { top: 50% !important; transform: translate(-50%, -50%) !important; } /* 2. Time displays accent profil cyan (target = cyan, pas blanc). Beat Cascade `.amp-lcd-hot span` (2,2,1) avec mine (2,2,3). */ body[data-design-pack="v1"] #cascade-studio-topbar.cv4 .amp-info-stretch .amp-lcd, body[data-design-pack="v1"] #cascade-studio-topbar.cv4 .amp-info-stretch .amp-lcd-hot, body[data-design-pack="v1"] #cascade-studio-topbar.cv4 .amp-info-stretch .amp-lcd-hot span, body[data-design-pack="v1"] #cascade-studio-topbar.cv4 .amp-info-stretch .amp-lcd span { color: var(--accent-1) !important; text-shadow: 0 0 6px var(--accent-glow) !important; } /* 3. Knob chrome/black variants PNG sprites kill (compound spec) */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-chrome-sm, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-chrome-md, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-chrome-lg, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-black-sm, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-black-md, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-black-lg { background-image: none !important; background: radial-gradient(circle at 50% 50%, #1a1612 0%, #0c0a08 100%) !important; border: 1px solid color-mix(in srgb, var(--accent-1) 30%, transparent) !important; border-radius: 50% !important; filter: none !important; } /* ═══════════════════════════════════════════════════════════════ PHASE 22.18 — TAILLES match target (compare visuel attentif) ═══════════════════════════════════════════════════════════════ */ /* Knobs uniformément 32px — DESIGN system.css .knob standard */ body[data-design-pack="v1"] #cascade-studio-topbar .metro-subgroup #knobMetroVol.amp-knob, body[data-design-pack="v1"] #cascade-studio-topbar .amp-subgroup #knobTempo.amp-knob, body[data-design-pack="v1"] #cascade-studio-topbar .amp-subgroup #knobPitch.amp-knob { width: 32px !important; height: 32px !important; } /* Mini buttons dans subgroup : Cascade force 22px (.metro-subgroup .amp-mini-btn spec 0,3,0 !important). Override compound spec 1,3,1. */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-subgroup .amp-mini-btn, body[data-design-pack="v1"] #cascade-studio-topbar .metro-subgroup .amp-mini-btn { height: 32px !important; min-width: 36px !important; padding: 0 10px !important; font-size: 11px !important; } /* Play button + step buttons plus gros (target visual estimate) */ body[data-design-pack="v1"] #cascade-studio-topbar #btnPlay { width: 64px !important; height: 64px !important; } body[data-design-pack="v1"] #cascade-studio-topbar #btnPlay svg { width: 26px !important; height: 26px !important; } body[data-design-pack="v1"] #cascade-studio-topbar #btnSkipBack, body[data-design-pack="v1"] #cascade-studio-topbar #btnStop, body[data-design-pack="v1"] #cascade-studio-topbar #btnLoop { width: 44px !important; height: 44px !important; } body[data-design-pack="v1"] #cascade-studio-topbar #btnSkipBack svg, body[data-design-pack="v1"] #cascade-studio-topbar #btnStop svg, body[data-design-pack="v1"] #cascade-studio-topbar #btnLoop svg { width: 18px !important; height: 18px !important; } /* Espacement plus aéré dans amp-subgroup */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-subgroup { padding: 0 var(--s-4) !important; gap: 6px !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-subgroup > .flex { gap: var(--s-2) !important; } /* TEMPO/PITCH/VOL labels position Cascade column (déjà bien), ajustons font-size + couleur. */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-sublabel { font-family: var(--font-mono) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: var(--ls-caps) !important; color: color-mix(in srgb, var(--accent-1) 55%, transparent) !important; text-shadow: none !important; margin-bottom: 4px !important; } } /* ========================================================================= PHASE 22.19 — SYNC COMPLET system.css DESIGN spec -------------------------------------------------------------------------- Match précis system.css /export-claude-code/system.css patterns: - .knob (32px) bg radial 35% 30% origin #2a2218 → #15110d → #0a0805 - .transport .play radial gradient accent-1 → accent-3 + outer ring shadow - .transport .step bg var(--c-elevated) + border var(--c-line) - .btn-disp idle bg var(--c-elevated), .btn-disp.on gradient accent-2 → accent-3 - .tempo container bg var(--c-elevated) border var(--c-line) padding 4 8 Note : tick knob = blanc (target screenshot Fred) vs system.css var(--accent-1). Target screenshot prime sur system.css strict pour ce détail visuel. ========================================================================= */ @media (min-width: 601px) { /* Knob bg = radial origin 35% 30% (3D depth subtle) per system.css */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-chrome-sm, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-chrome-md, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-chrome-lg, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-black-sm, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-black-md, body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob.amp-knob-black-lg { background: radial-gradient(circle at 35% 30%, #2a2218 0%, #15110d 60%, #0a0805 100%) !important; border: 1px solid var(--c-line) !important; box-shadow: var(--sh-1) !important; } /* Play button per system.css : radial gradient accent + outer ring + sh-2 glow */ body[data-design-pack="v1"] #cascade-studio-topbar #btnPlay { background: radial-gradient(circle at 35% 30%, var(--accent-1) 0%, var(--accent-3) 100%) !important; background-image: radial-gradient(circle at 35% 30%, var(--accent-1) 0%, var(--accent-3) 100%) !important; border: none !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-1) 8%, transparent), 0 0 20px var(--accent-glow), var(--sh-2) !important; } body[data-design-pack="v1"] #cascade-studio-topbar #btnPlay svg { color: #1a1108 !important; filter: none !important; } /* Step buttons skip/stop/loop per system.css .transport .step : bg var(--c-elevated), border var(--c-line), color var(--c-text-2) */ body[data-design-pack="v1"] #cascade-studio-topbar #btnSkipBack, body[data-design-pack="v1"] #cascade-studio-topbar #btnStop, body[data-design-pack="v1"] #cascade-studio-topbar #btnLoop, body[data-design-pack="v1"] #cascade-studio-topbar #btnMetro, body[data-design-pack="v1"] #cascade-studio-topbar #btnMetroMobile { background: var(--c-elevated) !important; background-image: none !important; border: 1px solid var(--c-line) !important; color: var(--c-text-2) !important; box-shadow: none !important; } body[data-design-pack="v1"] #cascade-studio-topbar #btnSkipBack:hover:not(:disabled), body[data-design-pack="v1"] #cascade-studio-topbar #btnStop:hover:not(:disabled), body[data-design-pack="v1"] #cascade-studio-topbar #btnLoop:hover:not(:disabled), body[data-design-pack="v1"] #cascade-studio-topbar #btnMetro:hover:not(:disabled), body[data-design-pack="v1"] #cascade-studio-topbar #btnMetroMobile:hover:not(:disabled) { color: var(--accent-1) !important; border-color: var(--c-line-strong) !important; box-shadow: none !important; } /* Mini buttons per system.css .btn-disp : idle = c-elevated + c-line border + c-text-2 color, active = gradient accent-2 → accent-3 + dark text + glow */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-mini-btn { background: var(--c-elevated) !important; background-image: none !important; border: 1px solid var(--c-line) !important; border-top-color: var(--c-line) !important; color: var(--c-text-2) !important; box-shadow: none !important; border-radius: var(--r-sm) !important; font-family: var(--font-mono) !important; text-transform: uppercase !important; letter-spacing: var(--ls-caps) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-mini-btn:hover { color: var(--accent-1) !important; border-color: var(--c-line-strong) !important; background: var(--c-elevated) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .metro-subdiv-btn.active, body[data-design-pack="v1"] #cascade-studio-topbar .amp-mini-btn[aria-pressed="true"] { background: linear-gradient(to bottom, var(--accent-2), var(--accent-3)) !important; background-image: linear-gradient(to bottom, var(--accent-2), var(--accent-3)) !important; color: #1a1108 !important; border-color: var(--accent-2) !important; box-shadow: 0 0 0 1px var(--accent-2), 0 0 12px var(--accent-glow) !important; } /* Tempo/pitch display container per system.css .tempo */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-subgroup > .flex { background: var(--c-elevated) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-md) !important; padding: 4px 6px !important; } /* LCD displays inside tempo/pitch box = no own border/bg (tempo box wraps with border-radius). */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-subgroup .amp-lcd { background: transparent !important; border: none !important; box-shadow: none !important; } } /* ========================================================================= PHASE 22.5 — LAYOUT AÉRÉ + SÉPARATEURS FINS (Chantier A v3, desktop) -------------------------------------------------------------------------- Match system.css `.track-bar` aéré + screenshot DESIGN spacing. - padding info-row : 0 22px → var(--s-3) var(--s-6) (12px 24px) - gap info-row : 16px → var(--s-5) (20px) - séparateurs verticaux fins entre cells (1px x 14px var(--c-line)) - padding action-row : 0 8px → 0 var(--s-6) (24px) GARDE INTACT : - hauteur amp-info-row (32px) — layout vertical Cascade preserved - hauteur amp-action-row (68px Cascade, peut s'étendre selon contenu) - flex-shrink, overflow rules Spécificité (1,1,2). !important matché. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar .amp-info-row { padding: 0 var(--s-6) !important; gap: var(--s-5) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-info-cell + .amp-info-cell::before { content: '' !important; width: 1px !important; height: 14px !important; background: var(--c-line) !important; margin-right: var(--s-3) !important; align-self: center !important; display: block !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-action-row { padding: 0 var(--s-6) !important; gap: var(--s-5) !important; } } /* ========================================================================= PHASE 22.6 — LEDs BLANC INNER + KNOBS TICK BLANC (Chantier A v3, desktop) -------------------------------------------------------------------------- Match screenshot DESIGN target : - LEDs allumées : radial gradient blanc center → accent profil rim (vs accent uniforme Phase 5+19/20) - Knobs tick (.amp-knob ::before, .knob-compact ::before si dans topbar) : blanc au lieu d'accent (tick blanc lit mieux sur fond noir uni) Exception : - Knobs DANS le mixer (.ch-strip .knob-pan) restent accent profil (Phase 14R-bis). Cette phase n'affecte QUE topbar. Spécificité (1,1,2). !important matché. ========================================================================= */ @media (min-width: 601px) { /* LEDs RIG STATUS + SOURCE : centre BLANC bien visible + accent rim + glow */ body[data-design-pack="v1"] #cascade-studio-topbar.cv4 .cv4-led.on { background: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffffff 40%, var(--accent-1) 80%, var(--accent-1) 100%) !important; border-color: var(--accent-1) !important; box-shadow: 0 0 4px #ffffff, 0 0 8px var(--accent-glow), 0 0 14px var(--accent-glow) !important; } /* LED métronome .amp-led.on : même style */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-led.on { background: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffffff 40%, var(--accent-1) 80%, var(--accent-1) 100%) !important; box-shadow: 0 0 4px #ffffff, 0 0 8px var(--accent-glow), 0 0 14px var(--accent-glow), inset 0 1px 1px rgba(255,255,255,0.7) !important; } /* Knobs hardware topbar (VOL, TEMPO, PITCH) — tick blanc lit mieux sur fond noir flat. Override knob-compact + knob-large + .amp-knob si pseudo ::before. */ body[data-design-pack="v1"] #cascade-studio-topbar .knob-compact::before, body[data-design-pack="v1"] #cascade-studio-topbar .knob-large::before { background: #ffffff !important; box-shadow: 0 0 3px rgba(255,255,255,0.6) !important; } } /* ========================================================================= PHASE 22.7 — MINI BUTTONS TEXTUELS (Chantier A v3, desktop) -------------------------------------------------------------------------- Match screenshot DESIGN target pour boutons text (/2, «, X1, CLIC, », X2, ⚓) : - Idle : outline accent dim + accent text - Hover : full accent border + accent text - Active (X1/X2 + CLIC pressed) : filled accent profil + dark text + glow Cascade default brass gradient + amber text. Pack v3 = flat outline. GARDE INTACT : - dimensions (height 18-22px, min-width 22px, padding) - font-family Inter, font-size, font-weight - layout flex parent Spécificité (1,1,2). !important matché. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar .amp-mini-btn { background: transparent !important; background-image: none !important; border: 1px solid color-mix(in srgb, var(--accent-1) 30%, transparent) !important; border-top-color: color-mix(in srgb, var(--accent-1) 30%, transparent) !important; color: color-mix(in srgb, var(--accent-1) 80%, transparent) !important; box-shadow: none !important; height: 28px !important; min-width: 32px !important; padding: 0 10px !important; font-size: 11px !important; border-radius: var(--r-sm) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-mini-btn:hover { background: color-mix(in srgb, var(--accent-1) 8%, transparent) !important; border-color: var(--accent-1) !important; color: var(--accent-1) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-mini-btn:active { background: color-mix(in srgb, var(--accent-1) 25%, transparent) !important; box-shadow: none !important; transform: none !important; } /* Active state (X1/X2 metro subdivision actif, CLIC pressed) */ body[data-design-pack="v1"] #cascade-studio-topbar .metro-subdiv-btn.active, body[data-design-pack="v1"] #cascade-studio-topbar .amp-mini-btn[aria-pressed="true"] { background: var(--accent-1) !important; border-color: var(--accent-1) !important; color: var(--c-bg) !important; box-shadow: 0 0 12px var(--accent-glow) !important; } /* Anchor button ⚓ avec inline style #6b3a16 — match attribute */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-mini-btn[style*="background:#6b3a16"], body[data-design-pack="v1"] #cascade-studio-topbar .amp-mini-btn[style*="background: #6b3a16"] { background: color-mix(in srgb, var(--accent-1) 25%, transparent) !important; color: var(--accent-1) !important; border-color: var(--accent-1) !important; } } /* ========================================================================= PHASE 22.8 — KNOB AMP-KNOB FLAT + SIG INLINE (Chantier A v3, desktop) -------------------------------------------------------------------------- Phase 22.6 a swap les knob-compact ::before tick → blanc. Mais .amp-knob utilise des PNG sprites (knob-1.png à knob-7.png chrome vintage) en background-image. Pour matcher DESIGN target knob noir simple : - Kill PNG sprite background-image - Background CSS = cercle noir uni minimal - Border subtle accent dim - Tick (::before déjà blanc Phase 22.6) SIG cell (#ampSigCell) : actuellement flex-direction:column inline style → "SIG" stack au-dessus de "4/4". Target = inline "SIG 4/4" comme cells info-row. Override flex-direction → row + gap. Spécificité pour SIG : (1,2,1) avec attribute selector #ampSigCell ID bat l'inline style flex-direction:column ? NON — inline style wins sans !important. !important nécessaire. Spécificité knob : (1,1,2). !important matché. ========================================================================= */ @media (min-width: 601px) { /* Kill PNG sprites .amp-knob — flat dark circle minimal */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob { background-image: none !important; background-color: var(--c-bg) !important; background: radial-gradient(circle at 50% 50%, #1a1612 0%, #0c0a08 100%) !important; border: 1px solid color-mix(in srgb, var(--accent-1) 30%, transparent) !important; border-radius: 50% !important; filter: none !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-knob:hover { border-color: var(--accent-1) !important; box-shadow: 0 0 8px var(--accent-glow) !important; filter: none !important; } /* SIG cell inline horizontal "SIG 4/4" — re-enabled avec align center pour éviter décalage vertical (Phase 22.16 ajoute align-items:center sur .amp-section pour homogénéiser hauteur dans action-row). */ body[data-design-pack="v1"] #cascade-studio-topbar #ampSigCell { flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } /* Force toutes amp-section dans action-row à center vertical pour homogénéité */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-action-row .amp-section { align-self: center !important; } } /* ========================================================================= PHASE 22.9 — TIME PROGRESS BAR + POLISH FINAL (Chantier A v3, desktop) -------------------------------------------------------------------------- Match screenshot DESIGN : progress bar = ligne fine accent qui progresse de gauche à droite. Cascade default = LCD recess avec gradient amber + playhead head brass. - .amp-seek (track) : ligne fine 2px var(--c-line-faint) - .amp-seek-progress : gradient accent profil (accent-3 → accent-1) - .amp-seek-head : hide (pas de playhead distinct, fin de ligne suffit) Polish : - .amp-vdiv-small (séparateurs verticaux entre subgroups action-row) → ligne fine var(--c-line) - .amp-sublabel (TEMPO / PITCH labels) → mono caps cohérent Spécificité (1,1,2). !important matché. ========================================================================= */ @media (min-width: 601px) { /* Progress bar fine ligne accent */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-seek { background: var(--c-line-faint) !important; border: none !important; box-shadow: none !important; height: 2px !important; border-radius: var(--r-pill) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-seek-progress { background: linear-gradient(90deg, var(--accent-3), var(--accent-1)) !important; opacity: 1 !important; border-radius: var(--r-pill) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-seek-head { background: var(--accent-1) !important; box-shadow: 0 0 6px var(--accent-glow) !important; width: 2px !important; height: 8px !important; top: -3px !important; } /* Séparateurs verticaux subgroups (TEMPO | PITCH dividers) */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-vdiv-small { background: var(--c-line) !important; width: 1px !important; box-shadow: none !important; } /* Sub-labels TEMPO / PITCH / METRONOME */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-sublabel, body[data-design-pack="v1"] #cascade-studio-topbar .amp-section-label { font-family: var(--font-mono) !important; font-weight: 700 !important; color: color-mix(in srgb, var(--accent-1) 55%, transparent) !important; text-shadow: none !important; letter-spacing: var(--ls-caps) !important; } } /* ========================================================================= PHASE 21 — TOPBAR LEDs MANQUANTES + BOUTONS HALO (desktop only) -------------------------------------------------------------------------- Couvre les éléments LED + boutons PNG laissés de côté Phase 19/20-fix : .amp-led / .amp-led.on (LED métronome topbar) : Hardcoded amber gradient #fff5dc/#ffb14a/#d97820. Pack swap radial gradient profil + glow accent. .amp-btn (transport buttons PNG sprites btn-1.png à btn-5.png) : PNG body non-overridable proprement (hue-rotate dénature). Solution = ajouter halo accent via box-shadow + drop-shadow filter au hover et active states. Body PNG vintage reste visible, halo profil signal feedback utilisateur. GARDE INTACT : - .amp-knob PNG sprites (vintage hardware knobs) - .knob-button .knob-led (déjà ailleurs) - .amp-btn body PNG idle (vintage) - .amp-btn-red/orange/green/cyan/blue PNG specifics ========================================================================= */ @media (min-width: 601px) { /* LED métronome (state on / off) */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-led.on { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent-1) 80%, white) 0%, var(--accent-1) 40%, var(--accent-3) 100%) !important; box-shadow: 0 0 6px var(--accent-glow), 0 0 12px var(--accent-glow), inset 0 1px 1px rgba(255,255,255,0.5) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-led { border-color: color-mix(in srgb, var(--accent-1) 30%, rgba(0,0,0,0.5)) !important; } /* Boutons transport PNG : halo accent au hover + active (PNG body intact) */ body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn:hover:not(:disabled) { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 6px var(--accent-glow)) brightness(1.18) !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-btn:active:not(:disabled) { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)) drop-shadow(0 0 4px var(--accent-1)) brightness(0.95) !important; } } /* ========================================================================= PHASE 19QQ — ENGINE PILLS IDLE BORDER ACCENT (desktop only) -------------------------------------------------------------------------- Override `.engine-pill` (état idle, NON .active) border. Cascade default = rgba(200,160,85,0.18) brass. Pack : color-mix accent-1 30%. Pendant traitement morceau, les pills passent de idle (Phase 19QQ accent dim) à active (Phase 7J accent + glow) — gradient cohérent profil. GARDE INTACT : background rgba(0,0,0,0.5) Cascade dark, .engine-pill.active (Phase 7J intact), .engine-pill-label color. Cascade a 2 règles `.engine-pill` (line 1385 + 6330 — la 2e avec !important). Mine matche les deux par spécificité (1,2,1) > (0,1,0) et (0,1,0) avec !important matché. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .engine-pill:not(.active) { border-color: color-mix(in srgb, var(--accent-1) 30%, transparent) !important; } } /* ========================================================================= PHASE 18JJ — SKIP TOOLTIPS (browser-native, not styleable) -------------------------------------------------------------------------- Cascade utilise l'attribut HTML `title=` natif pour les tooltips. Le navigateur affiche les tooltips via OS chrome (pas stylable via CSS). Pour styler, faudrait remplacer tous les title= par custom data-tooltip + pseudo ::after. Trop invasif pour un design pack overlay. Skip Phase 18JJ. ========================================================================= */ /* ========================================================================= PHASE 18KK — TEXT SELECTION ACCENT (universal, all viewports) -------------------------------------------------------------------------- Override ::selection (sélection text utilisateur) avec accent profil. Pas de @media restriction — sélection text est universelle. Cascade default = browser blue selection (pas overrides Cascade pour ::selection global, vérifié grep). Pack : background color-mix accent-1 50% transparent + text color var(--c-text-1) cream design pack. Effet : sélection text dans tout Cascade prend la couleur du profil. Sur fond sombre (mixer, hero), tint accent-1 visible. Sur fond cream (score view Phase 3), tint visible. Lisibilité préservée par alpha 50%. Spécificité : pseudo-element global. Mine wins par scope body[data-...]. ========================================================================= */ body[data-design-pack="v1"] ::selection { background: color-mix(in srgb, var(--accent-1) 50%, transparent) !important; color: var(--c-text-1) !important; } /* ========================================================================= PHASE 17BB — SKIP MANCHE GUITARE (decision documented) -------------------------------------------------------------------------- #paneManche est un mock SVG STATIQUE (lines 8016-8048), pas un render dynamique. Cascade n'a pas encore construit le rendu manche fonctionnel (analysis → frets actifs sur l'instant t). Override accent serait décoratif sans signal "current note". Phase 17BB DEFER : reprendre quand Cascade implémente : - JS render dynamique paneManche (notes per chord active) - Class .manche-note-active ou similaire Alors override fill via class selector trivial. ========================================================================= */ /* ========================================================================= PHASE 13S — SKIP VEXFLOW NOTATION COLOR (decision documented) -------------------------------------------------------------------------- VexFlow render SVG notation dans #panePortee. Override note color = theoritique faisable via : body[data-design-pack="v1"] #panePortee svg .vf-notehead path { fill: var(--accent-1) !important; } MAIS : noir = standard universel pour lecture portée. Notation profil-aware = flou cognitif vs gain esthétique faible. Decision Phase 13 = SKIP. Notes restent noires Cascade default = readability prime. ========================================================================= */ /* ========================================================================= FIN DESIGN PACK v2.7 — 33 surfaces (+ topbar buttons idle accent) -------------------------------------------------------------------------- v2.6 (31) → v2.7 (33, + Phase 20A + 20B idle states). -------------------------------------------------------------------------- Pack v1 final coverage : 1. Score view bg cream (Phase 3) 2. Hero action chips ring (Phase 4D) 3. LEDs RIG/neuro/hero (Phase 5) 4. Score tab underline actif (Phase 6G) 5. Transport LCD readouts (Phase 6F) 6. Score head buttons + ÉDITION actifs (Phase 7I) 7. Engine pills actives (Phase 7J) 8. Stems me-lane ring + halo (Phase 8B) 9. Modals + popovers border + halo (Phase 9L) 10. Playhead chord cell accent (Phase 10O) 11. Structure drag handles (Phase 11P) 12. Library rows + active banner (Phase 11Q) 13. Scrollbars (Phase 12T) 14. Loading progress bars (Phase 12U) 15. Knob pointer lines (Phase 13R) 16. Library sort-active header (Phase 13 polish) 17. Hero photo swap + position per profil (Phase 2bis — vraies photos DESIGN) 18. Mixer fader + pan knob (is-me lane) (Phase 14R-bis) 19. Hero tint overlay (vignette colorée) (Phase 15AA) 20. Lyrics karaoke word/line accent (Phase 16DD) 21. Chord diagrams active cell accent (Phase 16CC) 22. Tab measure active row accent (Phase 17FF) 23. VexFlow portée mesure highlight (Phase 17GG) 24. Drum tab cursor accent (alphaTab) (Phase 17EE) 25. Hero progress chip default border (Phase 18II) 26. Text selection accent (::selection) (Phase 18KK) 27. Topbar HW buttons hover (Phase 19MM) 28. Topbar transport buttons hover (Phase 19NN) 29. Topbar LED dim state (Phase 19OO) 30. Topbar LCD bezel border (Phase 19PP) 31. Engine pills idle border (Phase 19QQ) 32. Topbar HW buttons idle color (Phase 20B) 33. Topbar transport buttons idle color (Phase 20A) Skips additionnels documentés : - Manche guitare (Phase 17BB) — defer jusqu'à render JS dynamique Cascade - Tooltips natifs HTML title= (Phase 18JJ) — non stylable via CSS Étendu mobile : - Phase 2bis hero swap : actif maintenant sur tous viewports (Phase 15W) - Phase 15AA tint : actif tous viewports Skip documenté (lisibilité prime) : - VexFlow notation notes color (Phase 13S — notes restent noires) Photos hero v2 (1600x893, 16:9 paysage, ~2 MB chacune) : - hero-bassiste.jpg bass (Fender P-Bass + console) - hero-batteur.jpg drums (drum kit + cymbales) - hero-chanteur.jpg vocals (micro condensateur) - hero-guitariste.jpg guitar (Strat + Les Paul + amplis) - hero-pianiste.jpg keys (piano à queue noir laqué) - hero-soufflant.jpg wind (sax + clarinette + trombone) - hero-mix.jpg custom (ambiance mix studio) - hero-cordes.jpg BACKUP (cello + violon — pas de profil "cordes" actuel) Garde sémantique préservée : - .mm-flag-handle (amber meter) - .chord-edit-handle (vert OK) - .section-label per-type (intro/verse/chorus/etc.) - per-stem mixer color codes - hardware skeuomorphic (rivets/brass/tolex/buttons) - LCD background, fader bodies, knobs Mobile (≤600px) : tout pack désactivé via @media query — Cascade default préservé pour iPhone/iPad portrait. Photos hero : non livrées (mockups DESIGN renamés hero-mockup-*.jpg). Phase 2bis attendra livraison vraies photos par Claude DESIGN. ========================================================================= */ /* ========================================================================= PHASE 22.20 — Topbar background gradient subtil DESIGN -------------------------------------------------------------------------- system.css `.track-bar` utilise linear-gradient(to bottom, #100c08 0% → var(--c-panel) 100%) au lieu du plat var(--c-bg) Phase 22.1. Mini dégradé top-to-bottom plus chaud qui matche DESIGN strict. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar.amp-bar { background: linear-gradient(to bottom, #100c08 0%, var(--c-panel) 100%) !important; } } /* ========================================================================= PHASE 22.21 — Seekbar height 3px + hide playhead head (DESIGN strict) -------------------------------------------------------------------------- DESIGN `.progress` height 3px, pas de head distinct (fin du fill suffit). Pack 22.9 utilisait 2px + head accent dot. Aligne DESIGN strict. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar .amp-seek { height: 3px !important; } body[data-design-pack="v1"] #cascade-studio-topbar .amp-seek-head { display: none !important; } } /* ========================================================================= PHASE 22.22 — Mini buttons font-size 12px + padding DESIGN -------------------------------------------------------------------------- DESIGN `.btn-disp` font-size var(--t-12) (12px) + padding 6px 10px. Pack 22.7/22.18 forçait 11px + height 28-32px. DESIGN laisse height auto via padding. Aligne DESIGN strict. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar .amp-mini-btn { font-size: var(--t-12) !important; padding: 6px 10px !important; } } /* ========================================================================= PHASE 22.23 — Sub-labels font-size 10px DESIGN -------------------------------------------------------------------------- DESIGN `.knob-group .lbl` font-size 10px. Pack 22.9/22.18 utilisait 9px. Aligne DESIGN strict. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #cascade-studio-topbar .amp-sublabel, body[data-design-pack="v1"] #cascade-studio-topbar .amp-section-label, body[data-design-pack="v1"] #cascade-studio-topbar .metro-sublabel { font-size: 10px !important; } } /* ========================================================================= PHASE 22.25 — Score view paper-shadow-top 32px DESIGN -------------------------------------------------------------------------- DESIGN `.score::before` ajoute ombre douce 32px au top du panel score pour signifier la profondeur du papier. Pas implémenté pack v3.1. #rightPanel actuel a position relative + overflow hidden → ::before fits. z-index 1 = au-dessus du contenu papier mais sous les controls (z>10). ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #rightPanel::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 32px !important; background: var(--paper-shadow-top) !important; pointer-events: none !important; z-index: 1 !important; } } /* ========================================================================= PHASE 22.26 — Score body gridlines pattern combo DESIGN -------------------------------------------------------------------------- DESIGN `.score-body` background combo : - layer 1 : linear-gradient(to bottom, paper-bg, paper-bg 28px, paper-bg-soft 28px) → bande haute paper-bg + tout en dessous paper-bg-soft - layer 2 : repeating-linear-gradient(to bottom, transparent 0 31px, paper-line 31px 32px) → ligne de portee tous les 32px - background-attachment: local (scroll avec le contenu) GARDE INTACT : Cascade .rp-content overflow-y, padding par pane (rp-pane). ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .rp-content.tab-screen { background-image: linear-gradient(to bottom, var(--paper-bg), var(--paper-bg) 28px, var(--paper-bg-soft) 28px), repeating-linear-gradient(to bottom, transparent 0 31px, var(--paper-line) 31px 32px) !important; background-attachment: local !important; color: var(--paper-ink-1) !important; } } /* ========================================================================= PHASE 22.27 — rp-tab typo mono caps paper-ink DESIGN -------------------------------------------------------------------------- DESIGN `.score .tabs .tab` : - font-family var(--font-mono) - font-size var(--t-12) (12px) - letter-spacing var(--ls-caps) (0.14em) - color var(--paper-ink-2) (#5a4a32) - padding 4px 0 - border-bottom 2px solid transparent `.tabs .tab.on` : color var(--paper-ink-1) (#2a2218), border-color var(--paper-accent) (#8a5512) DESIGN strict. MAIS pack v3.1 Phase 6G utilise var(--accent-1) profile-aware. CHOIX FRED = DESIGN strict = border paper-accent uniforme (cuivre paper) ? OU Phase 6G profile-aware ? Décision : DESIGN strict color #2a2218 + border accent-1 profile-aware (compromis : DESIGN typo + profile-aware border pour cohérence pack). #rpTabs background : DESIGN suggère var(--paper-bg-soft) au lieu de Cascade #EDD8AF/40. Aligne. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #rpTabs { background: var(--paper-bg-soft) !important; border-bottom-color: var(--paper-line) !important; } body[data-design-pack="v1"] .rp-tab { font-family: var(--font-mono) !important; font-size: var(--t-12) !important; font-weight: var(--w-med) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase !important; color: var(--paper-ink-2) !important; padding: 4px 0 !important; border-bottom: 2px solid transparent !important; text-shadow: none !important; } body[data-design-pack="v1"] .rp-tab:hover { color: var(--paper-ink-1) !important; border-bottom-color: var(--paper-line) !important; text-shadow: none !important; } body[data-design-pack="v1"] .rp-tab.active { color: var(--paper-ink-1) !important; /* border-bottom-color reste var(--accent-1) via Phase 6G (profile-aware) */ text-shadow: none !important; } } /* ========================================================================= PHASE 22.28 — sourceQualityBadge meta-pill glass dark DESIGN -------------------------------------------------------------------------- DESIGN `.app-hero .meta-pill` : - background rgba(15, 12, 8, 0.55) + backdrop-filter blur(12px) - border 1px solid var(--c-line) - border-radius var(--r-pill) - padding 6px 12px - font-family var(--font-mono), font-size var(--t-12), ls-caps, uppercase - color var(--c-text-2) - .dot 7px var(--c-ok) + glow 8px Cascade #sourceQualityBadge actuel = inline display:none/inline-flex sans styling propre, dans #heroLeft rangée 1 à coté de RIG STATUS. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] #sourceQualityBadge { background: rgba(15, 12, 8, 0.55) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-pill) !important; padding: 6px 12px !important; font-family: var(--font-mono) !important; font-size: var(--t-12) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase !important; color: var(--c-text-2) !important; } body[data-design-pack="v1"] #sqDot { background: var(--c-ok) !important; box-shadow: 0 0 8px var(--c-ok) !important; width: 7px !important; height: 7px !important; } body[data-design-pack="v1"] #sqLabel, body[data-design-pack="v1"] #sqCeiling { color: var(--c-text-2) !important; font-family: var(--font-mono) !important; font-size: var(--t-12) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase !important; text-shadow: none !important; } } /* ========================================================================= PHASE 22.24 — Hero zone border-bottom (DESIGN strict) -------------------------------------------------------------------------- DESIGN `.app-hero` border-bottom 1px solid var(--c-line-faint). Cascade .hero-zone-v7 n'a pas ce border, séparation visuelle hero/topbar peut être faible. Ajoute fine ligne pour séparer hero du chassis. ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .hero-zone-v7 { border-bottom: 1px solid var(--c-line-faint) !important; } } /* ========================================================================= PHASE 22.29 — Hero title 64px Fraunces serif DESIGN (Fred validation #1) -------------------------------------------------------------------------- DESIGN `.app-hero .title` : - font-family var(--font-display) (Fraunces serif) - font-weight var(--w-reg) (400) - font-size var(--t-64) (64px) - line-height 0.95 - letter-spacing var(--ls-tight) (-0.02em) - color var(--c-text-1) (#f4ead7) - text-shadow 0 4px 24px rgba(0,0,0,0.4) Cascade .hero-v4-title inline style font-size:36px (Inter or Oswald). Override avec clamp() pour responsive (titres longs ne doivent pas overflow le hero). Subtitle DESIGN `.author` : - font-family var(--font-mono) - font-size var(--t-13) (13px) - letter-spacing var(--ls-caps) - color var(--accent-1) - text-transform uppercase ========================================================================= */ @media (min-width: 601px) { /* Hero left column — constrain max-width pour garder #heroRight chips visibles même avec titres longs (ex YouTube "ALAN JACKSON - CHATTAHOOCHEE (OFFICIAL HD VIDEO)" = 47 chars). #heroContent flex justify-between : #heroLeft 60% max + #heroRight 40% reste accessible. */ body[data-design-pack="v1"] #heroLeft { max-width: 60% !important; min-width: 0 !important; flex: 1 1 auto !important; } body[data-design-pack="v1"] #heroRight { flex: 0 0 auto !important; max-width: 38% !important; } /* Hero title — Fraunces serif italic regular DESIGN, clamp aggressive pour eviter overflow long titres. min 28px / fluide 3.2vw / max 48px (DESIGN strict 64px reduit pour long titres). word-wrap + overflow-wrap allow break sur mots longs ("CHATTAHOOCHEE"). -webkit-line-clamp 2 lignes max + ellipsis sur 3eme ligne. */ body[data-design-pack="v1"] .hero-v4-title { font-family: var(--font-display) !important; font-weight: var(--w-reg) !important; font-style: italic !important; font-size: clamp(28px, 3.2vw, 48px) !important; line-height: 1.05 !important; letter-spacing: var(--ls-tight) !important; color: var(--c-text-1) !important; text-shadow: 0 4px 24px rgba(0,0,0,0.4) !important; text-transform: none !important; /* DESIGN ne force pas uppercase, vs Cascade text-transform: uppercase */ max-width: 100% !important; white-space: normal !important; /* override Cascade nowrap */ word-wrap: break-word !important; overflow-wrap: break-word !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Hero subtitle — mono caps accent profil */ body[data-design-pack="v1"] .hero-v4-subtitle { font-family: var(--font-mono) !important; font-size: var(--t-13) !important; font-weight: var(--w-med) !important; letter-spacing: var(--ls-caps) !important; color: var(--accent-1) !important; text-transform: uppercase !important; text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Hero status line (RIG STATUS · Active) — mono caps text-2 */ body[data-design-pack="v1"] #heroLeft .hero-v4-status { font-family: var(--font-mono) !important; font-size: var(--t-12) !important; letter-spacing: var(--ls-caps) !important; color: var(--c-text-2) !important; text-transform: uppercase !important; } /* LED RIG STATUS — DESIGN strict c-ok vert (signal OK sémantique) */ body[data-design-pack="v1"] #heroLeft .led-amber { background: var(--c-ok) !important; box-shadow: 0 0 8px var(--c-ok) !important; } } /* ========================================================================= PHASE 22.34 — Hero chips glass dark blur DESIGN (Fred validation #2) -------------------------------------------------------------------------- DESIGN `.action` (system.css l.563-597) : - grid 28px 1fr auto - padding 10px 14px - background rgba(15, 12, 8, 0.55) - backdrop-filter blur(14px) - border 1px solid var(--c-line) - border-radius var(--r-md) - .ic color var(--accent-1) - .k label mono 10px caps c-text-3 - .v value Inter 13px med caps c-text-1 Cascade `.hero-file-chip` / `.hero-profile-chip` = brass gradient gold plein (#DFBE80 → #C29C58 → #9B7B42 → #CFA962 → #E8CD90) + dark text. PHASE 22.34 = kill brass gradient + apply glass dark DESIGN. IMPACT : casse l'identity brass gold actuelle des chips Fichier/Profil/ Niveau/Analyse. Validation Fred #2 acquise. Spec compound (1,2,1) bat Cascade (0,1,0) avec !important matché. ========================================================================= */ @media (min-width: 601px) { /* Container chip — glass dark blur */ body[data-design-pack="v1"] .hero-file-chip, body[data-design-pack="v1"] .hero-profile-chip { background: rgba(15, 12, 8, 0.55) !important; background-image: none !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-md) !important; padding: 10px 14px !important; box-shadow: none !important; transition: border-color var(--d-fast) var(--ease-out) !important; } body[data-design-pack="v1"] .hero-file-chip:hover, body[data-design-pack="v1"] .hero-profile-chip:hover { background: rgba(15, 12, 8, 0.55) !important; background-image: none !important; border-color: var(--c-line-strong) !important; box-shadow: 0 0 16px var(--accent-glow) !important; } /* Icon principal chip (Folders / Guitar / Stack / MagnifyingGlass) = accent profil */ body[data-design-pack="v1"] .hero-file-chip i:first-of-type, body[data-design-pack="v1"] .hero-profile-chip i:first-of-type { color: var(--accent-1) !important; } /* Caret-down icon = c-text-3 */ body[data-design-pack="v1"] .hero-file-chip i.ph-caret-down, body[data-design-pack="v1"] .hero-profile-chip i.ph-caret-down { color: var(--c-text-3) !important; } /* Inline text container — flex column stays */ body[data-design-pack="v1"] .hero-file-chip > div, body[data-design-pack="v1"] .hero-profile-chip > div { color: inherit !important; } /* Label (FICHIER / PROFIL / NIVEAU / ANALYSE) — first span = mono 10px caps c-text-3 */ body[data-design-pack="v1"] .hero-file-chip span:first-of-type, body[data-design-pack="v1"] .hero-profile-chip span:first-of-type { font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase !important; color: var(--c-text-3) !important; font-weight: var(--w-med) !important; } /* Value (Import · Biblio / Bassiste / Niv.2 / Recalculer…) — last span = Inter 13 med caps c-text-1 */ body[data-design-pack="v1"] .hero-file-chip span:last-of-type, body[data-design-pack="v1"] .hero-profile-chip span:last-of-type, body[data-design-pack="v1"] .hero-profile-chip #profileName, body[data-design-pack="v1"] .hero-profile-chip #levelChipName { font-family: var(--font-ui) !important; font-size: var(--t-13) !important; font-weight: var(--w-med) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase !important; color: var(--c-text-1) !important; } /* Phase 4D ring accent chip — relax box-shadow brass→accent */ body[data-design-pack="v1"] .hero-profile-chip { box-shadow: 0 6px 14px -4px rgba(0,0,0,0.6), 0 0 0 1px var(--c-line) !important; } body[data-design-pack="v1"] .hero-profile-chip:hover { box-shadow: 0 6px 18px -3px rgba(0,0,0,0.7), 0 0 0 1px var(--c-line-strong), 0 0 16px var(--accent-glow) !important; } } /* ========================================================================= PHASE 22.32 — Score head buttons paper cream DESIGN (Fred validation #3) -------------------------------------------------------------------------- DESIGN `.score .head-actions .ic / .edit` : - .ic 26×22 paper-bg + paper-line border + paper-ink-2 color - .edit padding 4 10 + paper-accent border + rgba(138,85,18,0.08) bg + paper-accent color + mono 12 ls-caps uppercase Cascade `.score-btn / .rp-edit-toggle` = brass gradient dark + amber active. Pack v3.1 Phase 7I a profile-aware accent active. PHASE 22.32 = paper style idle (compact/ligne/édition/÷2/×2 buttons) + paper-accent ring pour ÉDITION active (DESIGN strict #5 décidé). PHASE 22.33 = .rp-edit-toggle.active paper-accent ring vs profile-aware. GARDE INTACT : .score-btn.active gradient profile-aware accent (Phase 7I) reste profile-aware (compact/linear toggle = signal app, pas paper). Mais .rp-edit-toggle.active = paper-accent strict (DESIGN spec édition est le seul bouton à liseré accent dans toute l'app per DESIGN brief). ========================================================================= */ @media (min-width: 601px) { /* Score buttons idle — paper style (compact / linear / ÷2 / ×2 / édition) */ body[data-design-pack="v1"] .score-btn, body[data-design-pack="v1"] .rp-edit-toggle { background: var(--paper-bg) !important; background-image: none !important; border: 1px solid var(--paper-line) !important; border-top-color: var(--paper-line) !important; color: var(--paper-ink-2) !important; box-shadow: none !important; height: auto !important; padding: 4px 10px !important; font-family: var(--font-mono) !important; font-size: var(--t-12) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase !important; border-radius: var(--r-sm) !important; text-shadow: none !important; font-weight: var(--w-med) !important; } body[data-design-pack="v1"] .score-btn:hover, body[data-design-pack="v1"] .rp-edit-toggle:hover { color: var(--paper-ink-1) !important; border-color: var(--paper-accent) !important; background: var(--paper-bg) !important; background-image: none !important; box-shadow: none !important; } /* Score-btn.active — keep profile-aware accent (Phase 7I) MAIS adapté paper : gradient accent-1 → accent-3 + dark text + accent border + glow. OK pack 7I déjà conforme, juste padding + radius DESIGN. */ body[data-design-pack="v1"] .score-btn.active { padding: 4px 10px !important; border-radius: var(--r-sm) !important; border-top-color: var(--accent-1) !important; } /* PHASE 22.33 — Édition active = paper-accent ring DESIGN strict (seul bouton avec liseré accent dans l'app per DESIGN brief). Override Phase 7I .rp-edit-toggle.active accent gradient → paper-accent. */ body[data-design-pack="v1"] .rp-edit-toggle.active { background: rgba(138, 85, 18, 0.08) !important; background-image: none !important; color: var(--paper-accent) !important; border: 1px solid var(--paper-accent) !important; border-top-color: var(--paper-accent) !important; box-shadow: none !important; text-shadow: none !important; } body[data-design-pack="v1"] .rp-edit-toggle.active:hover { background: rgba(138, 85, 18, 0.14) !important; border-color: var(--paper-accent) !important; color: var(--paper-accent) !important; } /* Export + Fullscreen ic buttons — paper-style 26×22 */ body[data-design-pack="v1"] #btnExportGrille, body[data-design-pack="v1"] #btnScoreFullscreen { width: 26px !important; height: 22px !important; display: grid !important; place-items: center !important; border: 1px solid var(--paper-line) !important; border-radius: var(--r-sm) !important; background: var(--paper-bg) !important; color: var(--paper-ink-2) !important; padding: 0 !important; transition: border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out) !important; } body[data-design-pack="v1"] #btnExportGrille:hover, body[data-design-pack="v1"] #btnScoreFullscreen:hover { color: var(--paper-accent) !important; border-color: var(--paper-accent) !important; background: var(--paper-bg) !important; } body[data-design-pack="v1"] #btnExportGrille i, body[data-design-pack="v1"] #btnScoreFullscreen i { color: inherit !important; font-size: 14px !important; } } /* ========================================================================= PHASE 22.35 — Mixer strip refonte minimal DESIGN (Fred validation #4) -------------------------------------------------------------------------- DECISION FRED : refonte strip mixer Cascade → DESIGN minimal flat. Kill PNG sprites knob-3.png, btn-7.png, vu cream, fader silver brushed. DESIGN system.css `.strip` l.620-716 : - bg transparent + border-right c-line-faint - padding s-5 s-3 s-3 + gap s-3 - .channel-light top bar 2px stem-color - .name mono 12px caps c-text-2 (active = strip-color) - .knob-mini 28×28 radial dark + c-line border + ::before tick stem-color - .meter 12×96 noir + c-line border, .seg 4px segments column-reverse - .ms button 18×16 c-elevated + c-line + mono 10 c-text-3 - .fader-track 6×110 dark gradient + c-line + pill radius - .fader-cap 28×14 brass brushed (#d8c8a8 → #6b563a) + ::before lignes prise - .channel-tag padding 4 10 + c-bg + c-line + mono 10 caps c-text-3 GARDE INTACT (volontairement) : - Per-stem --stem-color var (drums blue / bass cuivre / etc.) - VU continuous fill Cascade (DESIGN segmenté skipped, conserve smooth) - Phase 14R-bis me-lane fader-vcap gradient accent profile (adapt sizes) - Master strip (.master-strip) intact — gradient red sémantique master out - JS dependencies (input.ch-range-hidden, knob-draggable data-role attrs) Spécificité : compound body + [data-design-pack="v1"] + selector. Pour battre per-profile compounds (0,3,1+), use (1,4,1) avec !important. ========================================================================= */ @media (min-width: 601px) { /* ── Strip container — transparent flat ─────────────────────────────── */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) { background: transparent !important; border-left: none !important; border-right: 1px solid var(--c-line-faint) !important; box-shadow: none !important; padding: var(--s-5) var(--s-3) var(--s-3) !important; gap: var(--s-3) !important; } body[data-design-pack="v1"] .ch-strip:not(.master-strip):hover { background: transparent !important; } /* Me-lane background — tinted accent profil 8% (DESIGN .strip[data-active]) */ body[data-design-pack="v1"][data-profile="bass"] .ch-strip[data-stem-id="bass"]:not(.master-strip), body[data-design-pack="v1"][data-profile="drums"] .ch-strip[data-stem-id="drums"]:not(.master-strip), body[data-design-pack="v1"][data-profile="guitar"] .ch-strip[data-stem-id="guitar"]:not(.master-strip), body[data-design-pack="v1"][data-profile="vocals"] .ch-strip[data-stem-id="vocals"]:not(.master-strip), body[data-design-pack="v1"][data-profile="keys"] .ch-strip[data-stem-id="piano"]:not(.master-strip), body[data-design-pack="v1"][data-profile="wind"] .ch-strip[data-stem-id="guitar"]:not(.master-strip) { background: linear-gradient(to bottom, color-mix(in srgb, var(--accent-1) 8%, transparent), transparent 40%) !important; border: 1px solid var(--c-line) !important; border-right: 1px solid var(--c-line-faint) !important; box-shadow: none !important; } /* ── Channel light top bar — 2px stem-color, faint sauf me-lane ────── */ body[data-design-pack="v1"] .ch-strip:not(.master-strip)::before { height: 2px !important; opacity: 0.5 !important; box-shadow: none !important; margin-bottom: var(--s-3) !important; } body[data-design-pack="v1"][data-profile="bass"] .ch-strip[data-stem-id="bass"]::before, body[data-design-pack="v1"][data-profile="drums"] .ch-strip[data-stem-id="drums"]::before, body[data-design-pack="v1"][data-profile="guitar"] .ch-strip[data-stem-id="guitar"]::before, body[data-design-pack="v1"][data-profile="vocals"] .ch-strip[data-stem-id="vocals"]::before, body[data-design-pack="v1"][data-profile="keys"] .ch-strip[data-stem-id="piano"]::before, body[data-design-pack="v1"][data-profile="wind"] .ch-strip[data-stem-id="guitar"]::before { opacity: 1 !important; box-shadow: 0 0 12px var(--stem-color) !important; height: 2px !important; } /* ── Name label (DRUM/BASS/GTR/KEYS/VOX) — mono 12 caps c-text-2 ────── */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .ch-label-top { font-family: var(--font-mono) !important; font-size: var(--t-12) !important; font-weight: var(--w-med) !important; letter-spacing: var(--ls-caps) !important; color: var(--c-text-2) !important; text-transform: uppercase !important; margin-bottom: 0 !important; text-shadow: none !important; } body[data-design-pack="v1"][data-profile="bass"] .ch-strip[data-stem-id="bass"] .ch-label-top, body[data-design-pack="v1"][data-profile="drums"] .ch-strip[data-stem-id="drums"] .ch-label-top, body[data-design-pack="v1"][data-profile="guitar"] .ch-strip[data-stem-id="guitar"] .ch-label-top, body[data-design-pack="v1"][data-profile="vocals"] .ch-strip[data-stem-id="vocals"] .ch-label-top, body[data-design-pack="v1"][data-profile="keys"] .ch-strip[data-stem-id="piano"] .ch-label-top, body[data-design-pack="v1"][data-profile="wind"] .ch-strip[data-stem-id="guitar"] .ch-label-top { color: var(--stem-color, var(--accent-1)) !important; text-shadow: 0 0 6px color-mix(in srgb, var(--stem-color, var(--accent-1)) 50%, transparent) !important; } /* ── knob-pan (TONE/VOL) — kill PNG, radial dark flat 28×28 ───────────── */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .knob-pan { width: 28px !important; height: 28px !important; background-image: none !important; background: radial-gradient(circle at 35% 30%, #2a2218 0%, #15110d 60%, #0a0805 100%) !important; border: 1px solid var(--c-line) !important; box-shadow: var(--sh-1) !important; filter: none !important; margin-bottom: 4px !important; } body[data-design-pack="v1"] .ch-strip:not(.master-strip) .knob-pan:hover { border-color: var(--c-line-strong) !important; filter: none !important; } /* Tick — 2×8 stem-color, top 3, no glow heavy */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .knob-pan::before { width: 2px !important; height: 8px !important; top: 3px !important; background: var(--stem-color, var(--accent-1)) !important; box-shadow: none !important; transform-origin: 50% 11px !important; } /* ── ch-pan-label (TONE/VOL labels) — mono 10 caps c-text-3 ──────────── */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .ch-pan-label { font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: var(--ls-caps) !important; color: var(--c-text-3) !important; text-transform: uppercase !important; margin-bottom: 4px !important; } /* ── M/S buttons — 18×16 c-elevated + c-line + mono 10 c-text-3 ─────── */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .ch-ms-btn { width: 18px !important; height: 16px !important; background-image: none !important; background: var(--c-elevated) !important; border: 1px solid var(--c-line) !important; color: var(--c-text-3) !important; font-family: var(--font-mono) !important; font-size: 10px !important; font-weight: var(--w-med) !important; border-radius: 2px !important; text-shadow: none !important; box-shadow: none !important; letter-spacing: 0 !important; } body[data-design-pack="v1"] .ch-strip:not(.master-strip) .ch-ms-btn:hover { border-color: var(--c-line-strong) !important; color: var(--c-text-2) !important; background: var(--c-elevated) !important; background-image: none !important; filter: none !important; } /* Solo active — accent-1 bg + dark text + accent glow */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .ch-ms-btn.active { background: var(--accent-1) !important; background-image: none !important; color: #1a1108 !important; border-color: var(--accent-1) !important; text-shadow: none !important; box-shadow: 0 0 8px var(--accent-glow) !important; } /* Mute active — c-danger bg + dark text */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .ch-ms-btn.muted { background: var(--c-danger) !important; background-image: none !important; color: #1a1108 !important; border-color: var(--c-danger) !important; text-shadow: none !important; box-shadow: 0 0 8px rgba(193, 78, 59, 0.4) !important; } /* ── Fader slot — 6px dark gradient + c-line + pill radius ─────────── */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .fader-vslot { width: 6px !important; background: linear-gradient(to bottom, #0a0805, #1c160e) !important; border: 1px solid var(--c-line) !important; border-right: 1px solid var(--c-line) !important; border-bottom: 1px solid var(--c-line) !important; border-radius: var(--r-pill) !important; box-shadow: none !important; } /* ── Fader cap — 28×14 brass brushed gradient + ::before lignes prise ── */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .fader-vcap { width: 28px !important; height: 14px !important; background: linear-gradient(to bottom, #d8c8a8 0%, #a89478 50%, #6b563a 100%) !important; border: none !important; border-top: none !important; border-bottom: none !important; border-radius: 3px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 2px 4px rgba(0,0,0,0.6) !important; } body[data-design-pack="v1"] .ch-strip:not(.master-strip) .fader-vcap:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 2px 6px rgba(0,0,0,0.7) !important; } /* Lignes de prise — repeating-linear-gradient via ::before */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .fader-vcap::before { content: '' !important; position: absolute !important; inset: 4px 4px !important; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.3) 2px 3px) !important; z-index: 1 !important; } /* Kill Cascade ::after (silver center bar Phase initial) */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .fader-vcap::after { display: none !important; } /* PHASE 14R-bis adaptation : me-lane fader-vcap garde accent gradient mais resize 28×14 DESIGN. Override Cascade 44×26 + accent gradient. */ body[data-design-pack="v1"][data-profile="bass"] .ch-strip[data-stem-id="bass"] .fader-vcap, body[data-design-pack="v1"][data-profile="drums"] .ch-strip[data-stem-id="drums"] .fader-vcap, body[data-design-pack="v1"][data-profile="guitar"] .ch-strip[data-stem-id="guitar"] .fader-vcap, body[data-design-pack="v1"][data-profile="vocals"] .ch-strip[data-stem-id="vocals"] .fader-vcap, body[data-design-pack="v1"][data-profile="keys"] .ch-strip[data-stem-id="piano"] .fader-vcap, body[data-design-pack="v1"][data-profile="wind"] .ch-strip[data-stem-id="guitar"] .fader-vcap { width: 28px !important; height: 14px !important; background: linear-gradient(to bottom, var(--accent-1) 0%, var(--accent-2) 50%, var(--accent-3) 100%) !important; border: none !important; border-top: 1px solid var(--accent-1) !important; border-bottom: 1px solid var(--accent-3) !important; border-radius: 3px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 2px 4px rgba(0,0,0,0.5), 0 0 8px var(--accent-glow) !important; } /* Me-lane fader-vslot resize 6px (was 12px Cascade per-profile) */ body[data-design-pack="v1"][data-profile="bass"] .ch-strip[data-stem-id="bass"] .fader-vslot, body[data-design-pack="v1"][data-profile="drums"] .ch-strip[data-stem-id="drums"] .fader-vslot, body[data-design-pack="v1"][data-profile="guitar"] .ch-strip[data-stem-id="guitar"] .fader-vslot, body[data-design-pack="v1"][data-profile="vocals"] .ch-strip[data-stem-id="vocals"] .fader-vslot, body[data-design-pack="v1"][data-profile="keys"] .ch-strip[data-stem-id="piano"] .fader-vslot, body[data-design-pack="v1"][data-profile="wind"] .ch-strip[data-stem-id="guitar"] .fader-vslot { width: 6px !important; } /* ── VU vertical — 12px noir base + c-line border (DESIGN strict) ──── */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .vu-vertical { width: 12px !important; background: #0a0805 !important; border: 1px solid var(--c-line) !important; border-radius: 2px !important; box-shadow: none !important; } /* VU fill — gradient stem-color from bottom (continuous, DESIGN segmenté skipped) */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .vu-vfill { background: linear-gradient(to top, var(--stem-color, var(--accent-1)) 0%, var(--stem-color, var(--accent-1)) 78%, var(--c-danger) 100%) !important; } /* VU graticule — dim, almost invisible (DESIGN flat sans ticks) */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .vu-graticule { opacity: 0.3 !important; } /* ── Channel tag bot — pill c-bg + c-line + mono 10 caps c-text-3 ──── */ body[data-design-pack="v1"] .ch-strip:not(.master-strip) .ch-label-bot { background: var(--c-bg) !important; border: 1px solid var(--c-line) !important; border-top: 1px solid var(--c-line) !important; border-radius: var(--r-sm) !important; padding: 4px 10px !important; font-family: var(--font-mono) !important; font-size: 10px !important; font-weight: var(--w-med) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase !important; color: var(--c-text-3) !important; text-align: center !important; margin-top: auto !important; text-shadow: none !important; box-shadow: none !important; width: auto !important; } /* Me-lane channel-tag — accent border + color */ body[data-design-pack="v1"][data-profile="bass"] .ch-strip[data-stem-id="bass"] .ch-label-bot, body[data-design-pack="v1"][data-profile="drums"] .ch-strip[data-stem-id="drums"] .ch-label-bot, body[data-design-pack="v1"][data-profile="guitar"] .ch-strip[data-stem-id="guitar"] .ch-label-bot, body[data-design-pack="v1"][data-profile="vocals"] .ch-strip[data-stem-id="vocals"] .ch-label-bot, body[data-design-pack="v1"][data-profile="keys"] .ch-strip[data-stem-id="piano"] .ch-label-bot, body[data-design-pack="v1"][data-profile="wind"] .ch-strip[data-stem-id="guitar"] .ch-label-bot { color: var(--accent-1) !important; border-color: var(--accent-1) !important; background: var(--c-bg) !important; } /* ── #stemLanesWrap — STEM CONSOLE badge DESIGN style ──────────────── */ body[data-design-pack="v1"] #stemLanesWrap { background: var(--c-panel) !important; position: relative !important; } body[data-design-pack="v1"] #stemLanesWrap .bg-brass-gradient { background: var(--c-bg) !important; background-image: none !important; border: 1px solid var(--c-line) !important; border-top: none !important; border-radius: 0 0 var(--r-sm) var(--r-sm) !important; padding: 4px 14px !important; box-shadow: none !important; } body[data-design-pack="v1"] #consoleTitle { font-family: var(--font-mono) !important; font-size: var(--t-12) !important; letter-spacing: var(--ls-caps) !important; color: var(--c-text-3) !important; text-transform: uppercase !important; text-shadow: none !important; font-weight: var(--w-med) !important; } /* All Mix button — DESIGN btn-disp style */ body[data-design-pack="v1"] #btnAllMix { background: var(--c-elevated) !important; background-image: none !important; border: 1px solid var(--c-line) !important; color: var(--c-text-2) !important; font-family: var(--font-mono) !important; font-size: var(--t-12) !important; font-weight: var(--w-med) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase !important; border-radius: var(--r-sm) !important; padding: 6px 10px !important; box-shadow: none !important; } body[data-design-pack="v1"] #btnAllMix:hover { color: var(--accent-1) !important; border-color: var(--c-line-strong) !important; background: var(--c-elevated) !important; } body[data-design-pack="v1"] #btnAllMix i { color: inherit !important; } } /* ========================================================================= PHASE 22.36 — Hide #btnTopbarToggle desktop (mobile-only utility) -------------------------------------------------------------------------- Cascade `#btnTopbarToggle.topbar-toggle-btn` (app-v4.html:7207-7211) = bouton "⋯" plier/déplier METRONOME/TEMPO/ANALYSE sur mobile. Inutile desktop (tous controls visibles). Display none pour laisser la topbar se justifier full-width sans button résiduel right. 2026-08-15 — seuil remonté de 601px à 1440px. Mesuré : la rangée d'action réclame ~1470px pour tout afficher (métronome 547 + SIG 76 + transport 234 + tempo/pitch 515 + gouttières). Sous 1440px les contrôles débordaient et le transport, centré en absolu, recouvrait les boutons Count-in. Le ⋯ est donc nécessaire jusqu'à 1239px, pas seulement sur mobile. Mesuré aussi à 1366 (iPad Pro 13" paysage) : le cadran SIG 4/4 passait sous le bouton PLAY sur 19px. Mobile (≤600px) et tablette et petits laptops (601-1439px) gardent le bouton. ========================================================================= */ @media (min-width: 1440px) { body[data-design-pack="v1"] #btnTopbarToggle, body[data-design-pack="v1"] #cascade-studio-topbar #btnTopbarToggle, body[data-design-pack="v1"] #cascade-studio-topbar.cv4 #btnTopbarToggle, body[data-design-pack="v1"] .topbar-toggle-btn, body[data-design-pack="v1"] #cascade-studio-topbar .topbar-toggle-btn { display: none !important; visibility: hidden !important; width: 0 !important; min-width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; } } /* ========================================================================= PHASE 22.37 — Hide section titles + boost tab contrast -------------------------------------------------------------------------- 1. `.v7-section-title` (Score View title) — Cascade brass plate engraved strip au top de #rightPanel. DESIGN minimal n'a pas ce label, supprime. 2. STEM CONSOLE badge — `#stemLanesWrap .bg-brass-gradient` brass plate Oswald. DESIGN strict virage tout texte titre console. Hide complet. 3. `.rp-tab` idle : Phase 22.27 utilisait `paper-ink-2` (#5a4a32). Fred reports difficile à lire — boost à `paper-ink-1` (#2a2218 dark) + weight semibold pour meilleure lisibilité mono caps 12px sur paper-bg-soft. Active tab garde paper-accent cuivre + weight bold. ========================================================================= */ @media (min-width: 601px) { /* 1. Hide Score View title */ body[data-design-pack="v1"] .v7-section-title { display: none !important; } /* 2. Hide STEM CONSOLE badge */ body[data-design-pack="v1"] #stemLanesWrap .bg-brass-gradient, body[data-design-pack="v1"] #consoleTitle { display: none !important; } /* 3. rp-tab — accent profile pour lisibilité + cohérence brand */ body[data-design-pack="v1"] .rp-tab { color: var(--accent-3) !important; font-weight: var(--w-sem) !important; opacity: 0.7 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important; } body[data-design-pack="v1"] .rp-tab:hover { color: var(--accent-2) !important; opacity: 1 !important; border-bottom-color: color-mix(in srgb, var(--accent-1) 40%, transparent) !important; } body[data-design-pack="v1"] .rp-tab.active { color: var(--accent-1) !important; font-weight: var(--w-bld) !important; opacity: 1 !important; border-bottom-color: var(--accent-1) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important; } /* score-btn COMPACT / LIGNE / ÷2 / ×2 + rp-edit-toggle ÉDITION : boost contrast — Phase 22.32 paper style had paper-ink-2 idle on paper-bg which sits on paper-bg-soft #rpTabs : low contrast. Boost à accent-3 idle + paper-bg border accent dim + bigger weight. */ body[data-design-pack="v1"] .score-btn, body[data-design-pack="v1"] .rp-edit-toggle { color: var(--accent-3) !important; border-color: color-mix(in srgb, var(--accent-1) 40%, transparent) !important; font-weight: var(--w-bld) !important; } body[data-design-pack="v1"] .score-btn:hover, body[data-design-pack="v1"] .rp-edit-toggle:hover { color: var(--accent-1) !important; border-color: var(--accent-1) !important; } body[data-design-pack="v1"] .score-btn.active { background: color-mix(in srgb, var(--accent-1) 18%, var(--paper-bg)) !important; background-image: none !important; color: var(--accent-1) !important; border-color: var(--accent-1) !important; border-top-color: var(--accent-1) !important; font-weight: var(--w-bld) !important; } /* Export + Fullscreen icons — accent dim + hover full */ body[data-design-pack="v1"] #btnExportGrille, body[data-design-pack="v1"] #btnScoreFullscreen { color: var(--accent-3) !important; border-color: color-mix(in srgb, var(--accent-1) 40%, transparent) !important; } body[data-design-pack="v1"] #btnExportGrille:hover, body[data-design-pack="v1"] #btnScoreFullscreen:hover { color: var(--accent-1) !important; border-color: var(--accent-1) !important; } } /* ========================================================================= PHASE 22.38 — Uniformiser CLIC + TEMPO + PITCH subgroups (flat layout) -------------------------------------------------------------------------- Phase 22.19 a posé bg+border+r-md autour de `.amp-subgroup > .flex` (pour matcher DESIGN `.tempo` pill). Probleme : Cascade structure ajoute knob 32x32 dans le row, lequel deborde verticalement la pill. Resultat : label "TEMPO"/"PITCH" se melange visuellement avec knob qui sort du box. CLIC group (metro-subgroup) n'a pas le box (utilise .clic-grid pas .flex) donc visuellement different de TEMPO/PITCH = incoherence. FIX : kill le box style sur .amp-subgroup > .flex → flat row sans border. Tous les groups CLIC/TEMPO/PITCH ont meme look : label mono caps au-dessus + row flat de controles. Aussi normaliser hauteur + alignment : - .metro-subgroup + .amp-subgroup = same flex column + align-items center - .amp-sublabel + .metro-sublabel = same font-size 10 + margin-bottom 6 - Inner row = align-items center + gap 6 + min-height = knob (32) ========================================================================= */ @media (min-width: 601px) { /* NOTE : Cascade JS deplace #tempoPitchSection HORS de #cascade-studio-topbar vers body direct (responsive collapsible). Donc selectors via topbar ne matchent pas. Use #tempoPitchSection anchor + #cascade-studio-topbar selon emplacement element. CLIC group (.metro-subgroup) RESTE dans topbar — selector cv4-topbar OK. TEMPO/PITCH groups (.amp-subgroup) sont dans #tempoPitchSection (déplacé). */ /* Kill Phase 22.19 box style sur .amp-subgroup > .flex (TEMPO/PITCH). Use #tempoPitchSection comme anchor (spec 1,2,2). */ body[data-design-pack="v1"] #tempoPitchSection .amp-subgroup > .flex { background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; min-height: 36px !important; align-items: center !important; gap: 6px !important; } /* TEMPO/PITCH subgroups via #tempoPitchSection */ body[data-design-pack="v1"] #tempoPitchSection .amp-subgroup { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; padding: 0 var(--s-3) !important; } /* CLIC subgroup via topbar (toujours dans topbar) */ body[data-design-pack="v1"] #cascade-studio-topbar .metro-subgroup { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; padding: 0 var(--s-3) !important; } /* Labels TEMPO / PITCH — via #tempoPitchSection */ body[data-design-pack="v1"] #tempoPitchSection .amp-sublabel { font-family: var(--font-mono) !important; font-size: 10px !important; font-weight: var(--w-bld) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--accent-1) 60%, transparent) !important; text-shadow: none !important; margin: 0 0 4px 0 !important; line-height: 1 !important; position: static !important; top: auto !important; left: auto !important; transform: none !important; } /* Label CLIC — via topbar */ body[data-design-pack="v1"] #cascade-studio-topbar .metro-sublabel { font-family: var(--font-mono) !important; font-size: 10px !important; font-weight: var(--w-bld) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--accent-1) 60%, transparent) !important; text-shadow: none !important; margin: 0 0 4px 0 !important; line-height: 1 !important; position: static !important; top: auto !important; left: auto !important; transform: none !important; } /* Inner row .clic-grid + .flex TEMPO/PITCH — same alignment */ body[data-design-pack="v1"] #cascade-studio-topbar .clic-grid { align-items: center !important; min-height: 36px !important; } /* LCD displays inside tempo/pitch (text 1.00× / +0st) — italic accent */ body[data-design-pack="v1"] #tempoPitchSection .amp-subgroup .amp-lcd { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 4px !important; color: var(--accent-1) !important; } } /* ========================================================================= PHASE 22.39 — Score view tabs lisibilité + casing -------------------------------------------------------------------------- Fred reports : tabs encore illisibles (BLANC sur cream). Phase 22.37 v2 text-shadow 0 1px 0 rgba(255,255,255,.4) cree halo blanchatre. Opacity 0.7 desaturate accent profil. Aussi Cascade hardcode text-transform: uppercase qui prend trop de place. Fix : - Kill text-shadow blanc (halo source du blanc-sur-clair) - Boost opacity 1.0 sur idle (couleur accent full visible) - text-transform: none (sentence case original "Grille", "Tab", "Manche", "Accords", "Paroles", "Portée", "Drum Tab") - Augmenter font-size 12 → 13 pour meilleure lisibilite (compense mono caps removal) ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .rp-tab { color: var(--accent-3) !important; font-weight: var(--w-sem) !important; opacity: 1 !important; text-shadow: none !important; text-transform: none !important; font-size: var(--t-13) !important; letter-spacing: 0 !important; } body[data-design-pack="v1"] .rp-tab:hover { color: var(--accent-2) !important; opacity: 1 !important; border-bottom-color: color-mix(in srgb, var(--accent-1) 40%, transparent) !important; text-shadow: none !important; } body[data-design-pack="v1"] .rp-tab.active { color: var(--accent-1) !important; font-weight: var(--w-bld) !important; opacity: 1 !important; border-bottom-color: var(--accent-1) !important; text-shadow: none !important; text-transform: none !important; } } /* ========================================================================= PHASE 22.40 — Chassis layout 40/60 (mixer / score) -------------------------------------------------------------------------- Fred reports : 50/50 mixer/score pas utile. Score view a besoin plus d'espace (grille accords, tab, portee, paroles). Cascade default : `.chassis-v7-panel-center` flex:1 + `.chassis-v7-panel-right` flex:1 = 50/50. Pack DESIGN strict : center (mixer) flex:2 + right (score) flex:3 = 40/60. GARDE INTACT : - body.more-me variants (line 322-323) toggle mixer compact 240px - body.mtab-mixer / body.mtab-score variants mobile ========================================================================= */ @media (min-width: 601px) { body[data-design-pack="v1"] .chassis-v7-panel-center { flex: 2 !important; } body[data-design-pack="v1"] .chassis-v7-panel-right { flex: 3 !important; } } /* ========================================================================= PHASE 22.41 — Score tabs paper-shadow-top fix + more-me 20/80 + chips bar -------------------------------------------------------------------------- 1. Tabs encore invisibles (Fred) : Phase 22.25 paper-shadow-top apply sur #rightPanel::before (height 32px top 0) qui RECOUVRE le rpTabs area. Le dark gradient assombrit les tabs → idle accent-3 + dark overlay = quasi invisible. FIX : kill paper-shadow-top (Phase 22.25 revert). Tabs lisibles direct sur paper-bg-soft sans overlay. 2. More-me mode (score fullscreen) layout 20/80 : Cascade default body.more-me center = 320px fixed (~20% sur 1600 mais pas proportional). Fred veut 20%/80% strict. FIX : flex ratios 1/4 (= 20/80) au lieu de 320px fixed. 3. Hero chips accessible en more-me : Cascade cache hero-zone-v7 entierement (height 0 opacity 0 pointer-events none). Pas d acces à Fichier/Profil/ Niveau/Analyse en fullscreen score. FIX : restore hero-zone-v7 comme mini-strip 56px horizontal qui montre uniquement #heroChipsRow (chips horizontales). Hide photo + title. ========================================================================= */ @media (min-width: 601px) { /* 1. Kill paper-shadow-top Phase 22.25 — tabs lisibilité prime */ body[data-design-pack="v1"] #rightPanel::before { display: none !important; background: transparent !important; } /* 2. More-me 20/80 — proportional au lieu 320px fixed */ body[data-design-pack="v1"].more-me .chassis-v7-panel-center, body.more-me[data-design-pack="v1"] .chassis-v7-panel-center { flex: 1 1 0 !important; min-width: 0 !important; max-width: 20% !important; } body[data-design-pack="v1"].more-me .chassis-v7-panel-right, body.more-me[data-design-pack="v1"] .chassis-v7-panel-right { flex: 4 1 0 !important; max-width: 80% !important; } /* 3. Mini-hero bar en more-me — chips horizontales restent accessibles */ body[data-design-pack="v1"].more-me .hero-zone-v7, body.more-me[data-design-pack="v1"] .hero-zone-v7 { height: 64px !important; min-height: 64px !important; opacity: 1 !important; pointer-events: auto !important; background-image: none !important; background: linear-gradient(to bottom, var(--c-panel), var(--c-bg)) !important; overflow: hidden !important; border-bottom: 1px solid var(--c-line-faint) !important; } /* Kill vignette + photo + tint en more-me */ body[data-design-pack="v1"].more-me .hero-zone-v7::before, body.more-me[data-design-pack="v1"] .hero-zone-v7::before { display: none !important; } body[data-design-pack="v1"].more-me .hero-v4-vignette, body.more-me[data-design-pack="v1"] .hero-v4-vignette { display: none !important; } /* Hide hero loading bar en more-me */ body[data-design-pack="v1"].more-me .hero-progress, body.more-me[data-design-pack="v1"] .hero-progress { display: none !important; } /* Hide title + status + expert label — keep only chips horizontal */ body[data-design-pack="v1"].more-me #heroLeft, body.more-me[data-design-pack="v1"] #heroLeft { display: none !important; } /* Logo CASCADE — compact ou hidden en more-me (gain place) */ body[data-design-pack="v1"].more-me #navStudio, body.more-me[data-design-pack="v1"] #navStudio { top: 50% !important; left: var(--s-5) !important; transform: translateY(-50%) !important; } body[data-design-pack="v1"].more-me #navStudio svg, body.more-me[data-design-pack="v1"] #navStudio svg { width: 24px !important; height: 24px !important; } body[data-design-pack="v1"].more-me #navStudio > div, body.more-me[data-design-pack="v1"] #navStudio > div { font-size: var(--t-13) !important; } /* heroContent re-position horizontal — chips right align */ body[data-design-pack="v1"].more-me #heroContent, body.more-me[data-design-pack="v1"] #heroContent { height: 100% !important; align-items: center !important; justify-content: flex-end !important; padding: 0 var(--s-6) !important; } /* heroRight (chips column) → horizontal row + compact */ body[data-design-pack="v1"].more-me #heroRight, body.more-me[data-design-pack="v1"] #heroRight { flex-direction: row !important; align-items: center !important; max-width: 80% !important; gap: var(--s-3) !important; } /* Hide expert gauge en more-me (gain place) */ body[data-design-pack="v1"].more-me #heroRight > div:first-child, body[data-design-pack="v1"].more-me .hero-expert-gauge, body.more-me[data-design-pack="v1"] #heroRight > div:first-child, body.more-me[data-design-pack="v1"] .hero-expert-gauge { display: none !important; } /* Chips row horizontal compact */ body[data-design-pack="v1"].more-me #heroChipsRow, body.more-me[data-design-pack="v1"] #heroChipsRow { flex-direction: row !important; align-items: center !important; gap: var(--s-2) !important; } /* Chips col → row inline horizontal */ body[data-design-pack="v1"].more-me #heroChipsCol, body.more-me[data-design-pack="v1"] #heroChipsCol { flex-direction: row !important; width: auto !important; gap: var(--s-2) !important; } /* Chips themselves smaller padding for compact row */ body[data-design-pack="v1"].more-me .hero-file-chip, body[data-design-pack="v1"].more-me .hero-profile-chip, body.more-me[data-design-pack="v1"] .hero-file-chip, body.more-me[data-design-pack="v1"] .hero-profile-chip { padding: 6px 10px !important; width: auto !important; } } /* ========================================================================= PHASE 22.42 — Hide RIG STATUS + fix hero/chassis junction -------------------------------------------------------------------------- 1. RIG STATUS · ACTIVE inscription inutile per Fred. DOM = first child div de la row 1 dans #heroLeft (LED + status span). SOURCE quality badge (sibling) reste utile = preserve. 2. Junction bug bas hero / top chassis : 2 lignes visibles : - hero-zone-v7 border-bottom Phase 22.24 (rgba 255,240,220,0.06) - chassis-v7 border-top Cascade default 2px brass (rgba 200,160,85,0.4) Combined = double ligne brass artifact. FIX : kill chassis-v7 border-top + kill hero border-bottom = junction clean transparente. ========================================================================= */ @media (min-width: 601px) { /* 1. Hide RIG STATUS · ACTIVE (LED + status text) — keep SOURCE badge */ body[data-design-pack="v1"] #heroLeft > div:first-child > div:first-child { display: none !important; } /* En more-me mode aussi (Phase 22.41 hide #heroLeft completely deja) — OK */ /* 2. Kill chassis-v7 border-top brass + hero border-bottom = clean junction */ body[data-design-pack="v1"] .chassis-v7 { border-top: none !important; box-shadow: inset 0 -4px 20px rgba(0,0,0,0.6) !important; } body[data-design-pack="v1"] .hero-zone-v7 { border-bottom: none !important; } } /* ========================================================================= PHASE 22.43 — Hero popover z-index + tabs contrast hard boost -------------------------------------------------------------------------- 1. Fred reports hero dropdowns scroll passe en dessous (z-index issue). Cascade .chassis-v7 a `backdrop-filter: blur(10px)` qui cree stacking context. Profile-popover z-index 50 dans hero z-index 20. FIX safety : boost hero z-index 30 + popover z-index 9999 pour garantir qu ils restent visibles peu importe contexte. 2. Tabs lisibility encore insuffisante per Fred. Phase 22.39 accent-3 cuivre sur paper-bg-soft cream donne contrast moyen ~5:1 mais visuellement faible (couleur saturee similaire au bg chaud). FIX hard : idle paper-ink-1 (#2a2218 dark brown) → contrast ~13:1 maximal sur cream. Active reste accent-1 + underline accent-1. ========================================================================= */ @media (min-width: 601px) { /* 1. Z-index hero + popovers */ body[data-design-pack="v1"] .hero-zone-v7 { z-index: 30 !important; } body[data-design-pack="v1"] .profile-popover { z-index: 9999 !important; } body[data-design-pack="v1"] .hero-file-chip, body[data-design-pack="v1"] .hero-profile-chip { z-index: 20 !important; } /* Wrapper chips column relative + z-index pour popover stacking */ body[data-design-pack="v1"] #heroChipsRow, body[data-design-pack="v1"] #heroChipsCol { position: relative !important; z-index: 25 !important; } /* 2. Tabs hard contrast — paper-ink-1 idle (max contrast cream) */ body[data-design-pack="v1"] .rp-tab { color: var(--paper-ink-1) !important; font-weight: var(--w-sem) !important; opacity: 0.85 !important; text-shadow: none !important; text-transform: none !important; font-size: var(--t-13) !important; letter-spacing: 0 !important; } body[data-design-pack="v1"] .rp-tab:hover { color: var(--paper-ink-1) !important; opacity: 1 !important; border-bottom-color: color-mix(in srgb, var(--accent-1) 50%, transparent) !important; } body[data-design-pack="v1"] .rp-tab.active { color: var(--accent-1) !important; font-weight: var(--w-bld) !important; opacity: 1 !important; border-bottom-color: var(--accent-1) !important; } } /* ========================================================================= PHASE 22.44 — Fix overflow more-me + tab contrast + logo dynamic size -------------------------------------------------------------------------- 1. BUG critique : Phase 22.41 mit `overflow: hidden` sur hero-zone-v7 en more-me pour clip mini-bar 64px. CONSEQUENCE : popover dropdowns (Fichier/Profil/Niveau/Analyse) qui opent en `top: calc(100% + 6px)` sont CLIPPED par la hero box 64px → invisibles. FIX : overflow visible + max-height 64px (au lieu height 64) = mini-bar visuel 64px MAIS popovers peuvent extend out. 2. Tabs encore "claire sur clair" per Fred. Phase 22.43 paper-ink-1 idle + opacity 0.85 = ~6.7:1 contrast. Pousse opacity 1 + weight 700 + paper-ink-1 plein = ~13:1 contrast max. 3. Logo CASCADE adaptif : - No song loaded (#heroTitle:empty) → logo BIG (svg 64px + text 32px) - Song loaded (#heroTitle has content) → logo small actuel (24-32px svg) Use :has() CSS selector (Chrome 105+/Safari 15.4+/Firefox 121+). Fallback : si :has() pas supporté, logo small par defaut. ========================================================================= */ @media (min-width: 601px) { /* 1. Hero more-me overflow visible — popovers peuvent extend out */ body[data-design-pack="v1"].more-me .hero-zone-v7, body.more-me[data-design-pack="v1"] .hero-zone-v7 { overflow: visible !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; } /* Le inner container z-10 doit aussi laisser overflow visible */ body[data-design-pack="v1"].more-me .hero-zone-v7 > div, body.more-me[data-design-pack="v1"] .hero-zone-v7 > div { overflow: visible !important; } /* 2. Tabs maximum contrast */ body[data-design-pack="v1"] .rp-tab { color: var(--paper-ink-1) !important; font-weight: var(--w-bld) !important; opacity: 1 !important; text-shadow: none !important; text-transform: none !important; font-size: var(--t-13) !important; letter-spacing: 0 !important; } body[data-design-pack="v1"] .rp-tab:hover { color: var(--accent-3) !important; opacity: 1 !important; border-bottom-color: color-mix(in srgb, var(--accent-1) 50%, transparent) !important; } body[data-design-pack="v1"] .rp-tab.active { color: var(--accent-1) !important; font-weight: var(--w-bld) !important; opacity: 1 !important; border-bottom-color: var(--accent-1) !important; } /* 3. Logo CASCADE adaptif via :has() — big si #heroTitle empty */ /* Default (hero with title) : current size (Phase 22.41 not active hors more-me) */ /* No song : logo bigger */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #navStudio { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #navStudio svg { width: 80px !important; height: 80px !important; } body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #navStudio > div { font-size: var(--t-30) !important; letter-spacing: var(--ls-caps) !important; } /* Hide chips empty state too — focus on logo */ /* Actually chips should stay accessible pour load morceau. Keep visible. */ } /* ========================================================================= PHASE 22.45 — Hero photo blurred (no song) + tabs absolute black -------------------------------------------------------------------------- 1. Fred reports tabs idle encore "clair sur clair". Computed verifie paper-ink-1 (#2a2218 dark brown) + weight 700 + opacity 1 = ~13:1 contrast. Si Fred voit encore pale, force noir absolu #000 pour ne laisser aucun doute. Active reste accent-1. 2. Hero photo blurred quand no song loaded : Etat `:has(#heroTitle:empty)` = no song. Photo Studio (var(--hero-img)) visible mais nette → contraste pauvre avec gros logo CASCADE centré. FIX : flouter la photo via ::after pseudo (Cascade utilise ::before pour vignette, ::after est libre). Position absolute inset 0 + background var(--hero-img) + filter blur(16px) + scale 1.05 (edge fix) + z-index 0 (sous logo z-10). Kill bg-image original sur hero-zone-v7 quand empty pour ne pas double-stack. ========================================================================= */ @media (min-width: 601px) { /* 1. Tabs noir absolu — Fred-proof contrast */ body[data-design-pack="v1"] .rp-tab:not(.active) { color: #000000 !important; font-weight: var(--w-bld) !important; opacity: 1 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important; } body[data-design-pack="v1"] .rp-tab.active { color: var(--accent-1) !important; font-weight: var(--w-bld) !important; opacity: 1 !important; } /* 2. Hero photo blurred quand no song */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) { background-image: none !important; background-color: var(--c-bg) !important; } body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty)::after { content: '' !important; position: absolute !important; inset: 0 !important; background-image: var(--hero-img) !important; background-size: cover !important; background-position: center 55% !important; filter: blur(16px) saturate(1.1) !important; transform: scale(1.08) !important; z-index: 0 !important; pointer-events: none !important; } /* Tint overlay au-dessus du blur pour darker mood + logo contrast */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty)::before { background: linear-gradient(to bottom, rgba(13,8,4,0.55) 0%, rgba(13,8,4,0.45) 50%, rgba(13,8,4,0.7) 100%), var(--hero-tint) !important; z-index: 1 !important; } /* Logo z-index above pseudo elements */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #navStudio { z-index: 10 !important; } /* Logo text-shadow boost pour lisibilité sur blurred bg */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #navStudio > div { text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.7) !important; color: var(--c-text-1) !important; } } /* ========================================================================= PHASE 22.46 — Tabs fix click-blanc + hero-mix + reduce blur -------------------------------------------------------------------------- 1. BUG critique tabs : Cascade JS click handler ajoute classe Tailwind `.text-textDark` aux tabs idle. Cascade rule line 4213 : #rpTabs button.text-textDark { color: rgba(244,234,208,0.7) !important } Spec (1,1,1) avec !important = CREAM 70% = quasi blanc sur cream. Mes Phase 22.45 selectors (.rp-tab:not(.active)) spec (0,3,1) = perdent contre Cascade id (1,1,1). FIX : anchor #rpTabs pour spec (1,3,1) > (1,1,1) Cascade. 2. Hero photo blur quand no song : Fred dit trop flouté + use hero-mix.jpg au lieu de hero-bassiste (profil-specific). FIX : - reduce blur 16 → 8px - background-image hero-mix.jpg fixe (universel no profil) 3. Aussi target les tabs avec ANY classe Tailwind ajoutée par JS click. ========================================================================= */ @media (min-width: 601px) { /* 1. Tabs boost spec avec #rpTabs anchor — bat Cascade .text-textDark */ body[data-design-pack="v1"] #rpTabs .rp-tab, body[data-design-pack="v1"] #rpTabs .rp-tab.text-textDark { color: #000000 !important; font-weight: var(--w-bld) !important; opacity: 1 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important; background: transparent !important; border-bottom: 2px solid transparent !important; } body[data-design-pack="v1"] #rpTabs .rp-tab:hover, body[data-design-pack="v1"] #rpTabs .rp-tab.text-textDark:hover { color: var(--accent-3) !important; border-bottom-color: color-mix(in srgb, var(--accent-1) 50%, transparent) !important; } body[data-design-pack="v1"] #rpTabs .rp-tab.active, body[data-design-pack="v1"] #rpTabs .rp-tab.active.text-copperDark { color: var(--accent-1) !important; font-weight: var(--w-bld) !important; border-bottom-color: var(--accent-1) !important; } /* Override Cascade hover #FFB97A peach */ body[data-design-pack="v1"] #rpTabs button.text-textDark:hover, body[data-design-pack="v1"] #rpTabs button.text-textDark:hover i { color: var(--accent-1) !important; } /* 2. Hero photo no-song : hero-mix.jpg + blur reduit */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty)::after { background-image: url('/design/assets/hero-mix.jpg') !important; filter: blur(8px) saturate(1.15) !important; transform: scale(1.04) !important; } } /* ========================================================================= PHASE 22.47 — Empty state hero plein écran + chips horizontal sous logo -------------------------------------------------------------------------- Quand no song loaded (#heroTitle:empty) : 1. Hide chassis-v7 (mixer + score view) 2. Hero takes full available height 3. Reduce blur 8 → 3px (less flou per Fred) 4. Logo CASCADE center upper half 5. Hide #heroLeft (title + status) — vide anyway 6. Hero chips row horizontal centered BELOW logo ========================================================================= */ @media (min-width: 601px) { /* 1. Hide chassis quand empty */ body[data-design-pack="v1"]:not(.has-song):has(#heroTitle:empty) .chassis-v7 { display: none !important; } /* 2. Hero takes remaining height */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) { flex: 1 1 auto !important; height: auto !important; min-height: calc(100vh - 140px) !important; /* topbar 140px restant */ max-height: none !important; } /* 3. Reduce blur to 3px (less flou) */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty)::after { filter: blur(3px) saturate(1.1) !important; transform: scale(1.02) !important; } /* 4. Hide #heroLeft completely (it's empty anyway) */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #heroLeft { display: none !important; } /* Hide expert gauge + label (no song info) */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #heroRight > div:first-child, body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) .hero-expert-gauge { display: none !important; } /* 5. #heroContent : logo CENTRE vertical, chips BAS du hero. Use absolute positioning sur navStudio + heroRight pour controle precis. heroContent reste flex column mais devient juste conteneur passthrough. */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #heroContent { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; height: 100% !important; padding: 0 !important; position: relative !important; } /* Logo CASCADE — absolute centre vertical + horizontal du hero */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #navStudio { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; flex-direction: column !important; gap: var(--s-3) !important; align-items: center !important; } /* Chips row — absolute en bas, centre horizontal */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #heroRight { position: absolute !important; bottom: var(--s-10) !important; /* 64px du bas */ left: 50% !important; transform: translateX(-50%) !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: none !important; gap: var(--s-3) !important; } /* Dropdowns popovers s'ouvrent VERS LE HAUT (chips en bas) + AU-DESSUS du logo (z-index 99999 + opaque background + isolation). */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) .profile-popover { top: auto !important; bottom: calc(100% + 6px) !important; z-index: 99999 !important; isolation: isolate !important; background: var(--c-elevated) !important; background-image: linear-gradient(180deg, #2e2416 0%, #1a130c 100%) !important; box-shadow: 0 -8px 30px rgba(0,0,0,0.85), 0 0 0 1px var(--accent-1), 0 0 24px var(--accent-glow) !important; } /* Logo z-index reduit pour passer derriere les dropdowns */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #navStudio { z-index: 5 !important; } /* Chips wrapper boost z-index pour dropdown layer */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #heroRight { z-index: 100 !important; } body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #heroChipsRow, body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #heroChipsCol { z-index: 100 !important; } /* Phase 22.48 — Logo svg + label sizing (Phase 22.47 #navStudio position static block REMOVED — superseded par Phase 22.48 absolute centering). */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #navStudio svg { width: 120px !important; height: 120px !important; } body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #navStudio > div { font-size: var(--t-48) !important; letter-spacing: var(--ls-caps) !important; color: var(--c-text-1) !important; text-shadow: 0 4px 24px rgba(0,0,0,0.85), 0 0 16px rgba(0,0,0,0.6) !important; } /* Phase 22.47 #heroRight original block REMOVED — superseded par Phase 22.48 absolute positioning. Pas de duplicate row config. */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #heroRight-removed-noop { width: auto !important; max-width: none !important; gap: var(--s-3) !important; position: static !important; } /* Chips row + col horizontal */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #heroChipsRow { flex-direction: row !important; align-items: center !important; gap: var(--s-3) !important; } body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) #heroChipsCol { flex-direction: row !important; width: auto !important; gap: var(--s-3) !important; } /* Chips slightly larger pour visibility on full-screen hero */ body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) .hero-file-chip, body[data-design-pack="v1"]:not(.has-song) .hero-zone-v7:has(#heroTitle:empty) .hero-profile-chip { padding: 10px 14px !important; width: auto !important; } } /* ========================================================================= FIN DESIGN PACK v3.2 — Phase 22.20→22.47 DESIGN strict (Fred validations) -------------------------------------------------------------------------- v3.1 (33 surfaces, mode preserve Cascade) → v3.2 (full DESIGN strict). Phases additionnelles 22.20-22.35 : 22.20 Topbar background gradient subtil DESIGN 22.21 Seekbar 3px + hide head DESIGN 22.22 Mini-btn font-size 12px DESIGN 22.23 Sub-labels 10px DESIGN 22.24 Hero zone border-bottom 22.25 Score view paper-shadow-top 32px 22.26 Score body gridlines pattern combo 22.27 rp-tab typo mono caps paper-ink 22.28 sourceQualityBadge meta-pill glass dark 22.29 Hero title 64px Fraunces serif italic + subtitle accent mono caps 22.32 Score head buttons paper cream 22.33 rp-edit-toggle active paper-accent ring (DESIGN strict) 22.34 Hero chips glass dark blur (kill brass gold) — Fred validation #2 22.35 Mixer strip refonte minimal DESIGN — Fred validation #4 Décisions Fred 2026-05-11 : #1 ✅ Hero title 64px Fraunces (DESIGN) #2 ✅ Hero chips glass dark blur (DESIGN) #3 ✅ Score head paper cream (DESIGN strict) #4 ✅ Mixer strip refonte minimal DESIGN Preserve volontaire (non-DESIGN) : - SVG #navStudio arcs animés brand identity (Phase 22.x skip) - Section labels color-coded par type (intro blue / verse cuivre / etc.) - VexFlow notation noire - Master strip gradient red sémantique master out - VU continuous fill (DESIGN segmenté skipped) - Phases 22.6 (knobs topbar tick blanc Fred) + 22.18 (boutons play 64 step 44 Fred surdimensions) maintenues — décisions précédentes Fred. Mobile (≤600px) : tout pack désactivé via @media query. ========================================================================= */