/* Formation Musicale — teacher exercise generator Shared styles for /teacher/exercises/new and all form partials. Tokens, layout, form controls, responsive breakpoints, dark mode. */ :root { color-scheme: light dark; --bg: #f4f4f0; --surface: #ffffff; --surface-alt:#f8f8fc; --surface-hi: #fafafa; --border: #e4e4e8; --border-strong:#dddde2; --text: #1a1a1a; --text-soft: #555; --muted: #6b6b6b; --muted-2: #8a8a8a; --brand: #3a3d7c; --brand-hover:#2e3170; --brand-tint: #ebebff; --brand-edge: #8888cc; --header-bg: #1e2040; --header-link:#9999cc; --staff-active:#4a6fa5; --staff-active-edge:#3a5f95; --err-bg: #fff5f5; --err-edge: #fca5a5; --err-fg: #c0392b; --hint-bg: #f0f0ff; --hint-edge: #d0d0ee; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(30,32,64,0.05); --shadow-md: 0 1px 4px rgba(0,0,0,0.06); --shadow-lg: 0 4px 12px rgba(0,0,0,0.12); --radius-sm: 5px; --radius: 7px; --radius-lg: 10px; --radius-pill:20px; } /* Dark tokens — applied when: (a) system prefers dark AND no explicit override, or (b) [data-theme="dark"] is set on by the toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14151c; --surface: #1c1e28; --surface-alt:#22243054; --surface-hi: #262837; --border: #2c2e3d; --border-strong:#3a3d52; --text: #e8e8ee; --text-soft: #b8b8c4; --muted: #888fa0; --muted-2: #5c6273; --brand: #6a6eea; --brand-hover:#7d80f0; --brand-tint: #2a2c5e; --brand-edge: #4a4e9a; --header-bg: #0e0f16; --header-link:#9aa0d6; --staff-active:#7090d8; --staff-active-edge:#5a78c0; --err-bg: #3a1818; --err-edge: #8a3030; --err-fg: #ff8b80; --hint-bg: #1e2040; --hint-edge: #2e3056; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 1px 4px rgba(0,0,0,0.4); --shadow-lg: 0 4px 12px rgba(0,0,0,0.5); } } :root[data-theme="dark"] { --bg: #14151c; --surface: #1c1e28; --surface-alt:#22243054; --surface-hi: #262837; --border: #2c2e3d; --border-strong:#3a3d52; --text: #e8e8ee; --text-soft: #b8b8c4; --muted: #888fa0; --muted-2: #5c6273; --brand: #6a6eea; --brand-hover:#7d80f0; --brand-tint: #2a2c5e; --brand-edge: #4a4e9a; --header-bg: #0e0f16; --header-link:#9aa0d6; --staff-active:#7090d8; --staff-active-edge:#5a78c0; --err-bg: #3a1818; --err-edge: #8a3030; --err-fg: #ff8b80; --hint-bg: #1e2040; --hint-edge: #2e3056; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 1px 4px rgba(0,0,0,0.4); --shadow-lg: 0 4px 12px rgba(0,0,0,0.5); } /* ── Reset & base ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); } /* ── Header ─────────────────────────────────────────────── */ header { background: var(--header-bg); color: white; padding: 0.8rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } header h1 { font-size: 1.05rem; font-weight: 600; } header a { color: var(--header-link); font-size: 0.85rem; text-decoration: none; } header a:hover { color: white; } /* ── Page layout ────────────────────────────────────────── */ .page { display: grid; grid-template-columns: 340px 1fr; height: calc(100dvh - 46px); min-height: 0; } .left-panel { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; min-height: 0; /* User-resizable sidebar — CSS-only horizontal resize handle in the bottom-right corner. Capped at a generous range so the preview pane always gets at least 360px and the sidebar never grows past 560px. */ resize: horizontal; width: 340px; max-width: min(560px, 60vw); min-width: 240px; } /* Defer the resize handle (and our fixed width) to the parent grid so the .page grid still owns layout on desktop — resize only applies once the user actually drags. */ .page { grid-template-columns: auto 1fr; } .right-panel { padding: 1.5rem; overflow-y: auto; min-height: 0; } /* Mobile toggle button (hidden on desktop) */ .sidebar-toggle { display: none; background: transparent; border: 1px solid var(--header-link); color: white; padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.8rem; cursor: pointer; } .sidebar-toggle:hover { background: rgba(255,255,255,0.08); } /* ── Type selector ──────────────────────────────────────── */ .type-selector { padding: 1rem; border-bottom: 1px solid var(--border); } .section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 0.6rem; } .type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; } .type-btn { padding: 0.6rem 0.5rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: 0.82rem; font-weight: 500; text-align: center; color: var(--text); transition: all 0.12s; font-family: inherit; } .type-btn:hover { background: var(--brand-tint); border-color: var(--brand-edge); color: var(--brand); } .type-btn .icon { display: block; font-size: 1.3rem; margin-bottom: 0.15rem; } .type-btn.active { background: var(--brand); color: white; border-color: var(--brand); } /* ── Params form scroll area ────────────────────────────── */ .params-scroll { flex: 1; overflow-y: auto; min-height: 0; } form#params-form { padding: 1rem; } /* The HTMX-loaded partials live inside #type-params, which is the actual auto-fit grid container. Short fields (number / select) auto-pair; wide controls span the full row via the rules below. */ #type-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.85rem 0.7rem; align-content: start; } /* Flatten .field-row direct children into the parent grid so the inner .field items auto-pair across all available columns. Nested .field-row (e.g. voice-row inside #voices-list) keeps its own grid layout. */ #type-params > .field-row { display: contents; } /* Wide controls span the full form width */ #type-params > .field:has(.checkbox-group), #type-params > .field:has(.radio-group), #type-params > .field:has(.staff-picker), #type-params > .field:has(.rmode-btns), #type-params > .field:has(#voices-list), #type-params > .field:has(.key-picker), #type-params > .field#rs-irregulier, #type-params > details, #type-params > .btn-preview, #type-params > .hint, #type-params > .irreg-hint { grid-column: 1 / -1; } /* Inside the form grid, the parent gap drives spacing — drop per-field margin. */ #type-params .field { margin-bottom: 0; min-width: 0; } /* ── Form controls (shared by all partials) ─────────────── */ .field { margin-bottom: 1rem; min-width: 0; } /* fieldset.field carries the same layout role as div.field but wraps a group of related inputs (checkbox / radio group) for screen readers. */ fieldset.field { border: 0; padding: 0; min-width: 0; } .field > label, fieldset.field > legend { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-soft); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0; } .field input[type=number], .field input[type=text], .field select { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 0.9rem; background: var(--surface-hi); color: var(--text); font-family: inherit; } .field input:focus, .field select:focus { outline: none; border-color: var(--brand-edge); background: var(--surface); } /* Field titles with a `title` attribute get a help cursor and an ⓘ marker so users know there's a hover tooltip. Direct child only — chip labels inside checkbox/radio groups keep their own tooltip behavior. */ .field > label[title], fieldset.field > legend[title] { cursor: help; } .field > label[title]::after, fieldset.field > legend[title]::after { content: 'ⓘ'; margin-left: 0.35em; font-size: 0.95em; color: var(--muted-2); font-weight: 400; } .checkbox-group, .radio-group { display: flex; flex-wrap: wrap; gap: 0.35rem; } .checkbox-group label, .radio-group label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0; padding: 0.3rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); cursor: pointer; background: var(--surface-hi); transition: all 0.1s; } .checkbox-group label:has(input:checked) { background: var(--brand-tint); border-color: var(--brand-edge); color: var(--brand); } .radio-group label:has(input:checked) { background: var(--brand); border-color: var(--brand); color: white; } .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.7rem; } .hint { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; } /* ── Collapsible sections (
) ───────────────────── */ #type-params details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); overflow: hidden; } #type-params details > summary { cursor: pointer; padding: 0.55rem 0.8rem; font-size: 0.72rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.06em; user-select: none; list-style: none; display: flex; align-items: center; gap: 0.45rem; transition: background 0.12s, color 0.12s; } #type-params details > summary::-webkit-details-marker { display: none; } #type-params details > summary::before { content: '▸'; font-size: 0.65rem; color: var(--muted); transition: transform 0.15s; flex: 0 0 auto; } #type-params details[open] > summary::before { transform: rotate(90deg); } #type-params details > summary:hover { background: var(--brand-tint); color: var(--brand); } #type-params details > summary:focus-visible { outline: 2px solid var(--brand-edge); outline-offset: -2px; } #type-params details > .details-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.85rem 0.7rem; padding: 0.4rem 0.8rem 0.85rem; border-top: 1px solid var(--border); } #type-params details > .details-body > .field-row { display: contents; } #type-params details > .details-body > .field:has(.checkbox-group), #type-params details > .details-body > .field:has(.radio-group), #type-params details > .details-body > .field:has(.staff-picker), #type-params details > .details-body > .field:has(.rmode-btns), #type-params details > .details-body > .field:has(#voices-list), #type-params details > .details-body > .field:has(.key-picker), #type-params details > .details-body > .hint { grid-column: 1 / -1; } .btn-preview { width: 100%; padding: 0.65rem; background: var(--brand); color: white; border: none; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; cursor: pointer; margin-top: 0.5rem; transition: background 0.15s; font-family: inherit; } .btn-preview:hover { background: var(--brand-hover); } .copy-lesson-btn { display: block; width: 100%; margin-top: 0.6rem; padding: 0.5rem; background: transparent; color: var(--muted-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: 0.85rem; cursor: pointer; font-family: inherit; } .copy-lesson-btn:hover { color: var(--brand); border-color: var(--brand); } .btn-sel-all { font-size: 0.72rem; padding: 0.2rem 0.55rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-alt); color: var(--text-soft); cursor: pointer; font-family: inherit; } .btn-sel-all:hover { background: var(--brand-tint); border-color: var(--brand-edge); } /* ── Rythme / Dechiffrage shared widgets ────────────────── */ .rmode-btns { display: flex; gap: 0.35rem; } .rmode-btn { flex: 1; padding: 0.45rem 0.3rem; font-size: 0.82rem; font-weight: 500; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--text-soft); transition: all 0.12s; font-family: inherit; } .rmode-btn:hover { background: var(--brand-tint); border-color: var(--brand-edge); color: var(--brand); } .rmode-btn.active { background: var(--brand); color: white; border-color: var(--brand); } .cells-sub { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.4rem; } .cells-sub span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted-2); } .cell-pat { display: inline-flex; align-items: center; gap: 1px; line-height: 1; } .ns svg { display: inline-block; vertical-align: middle; overflow: visible; } .grp-visual { color: var(--muted); font-size: 0.8em; margin-left: 0.3em; } .irreg-hint { background: var(--hint-bg); border: 1px solid var(--hint-edge); border-radius: 6px; padding: 0.6rem 0.75rem; font-size: 0.78rem; color: var(--text-soft); margin-bottom: 0.75rem; line-height: 1.5; } /* ── Staff picker (lecture + dechiffrage) ───────────────── */ .staff-picker { position: relative; width: 165px; height: 160px; margin: 0.5rem 0; } .sp-line { position: absolute; left: 0; width: 100%; height: 1px; background: var(--text-soft); pointer-events: none; } .sp-ledger { position: absolute; left: 34px; width: 50px; height: 1px; background: var(--muted-2); pointer-events: none; } .sp-note { position: absolute; cursor: pointer; } .sp-note input[type="checkbox"] { display: none; } .sp-note span { display: flex; align-items: center; justify-content: center; width: 38px; height: 14px; border-radius: var(--radius); font-size: 0.65rem; font-weight: 500; background: var(--surface); border: 1.5px solid var(--muted-2); color: var(--text-soft); transition: background 0.1s, border-color 0.1s; white-space: nowrap; } .sp-note input:checked + span { background: var(--staff-active); border-color: var(--staff-active-edge); color: white; } .sp-note:hover span { border-color: var(--staff-active); } /* ── Right panel content ────────────────────────────────── */ .preview-placeholder { text-align: center; color: var(--muted-2); margin-top: 4rem; } .preview-placeholder .big { font-size: 3rem; display: block; margin-bottom: 0.5rem; } .preview-score { /* Score is black LilyPond ink on transparent — always paint it on a light "paper" background so it stays readable in dark mode. */ background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem; } .preview-score img, .preview-score svg { max-width: 100%; height: auto; display: block; } /* ── Theme toggle button (header) ───────────────────────── */ .theme-toggle { background: transparent; border: 1px solid var(--header-link); color: white; padding: 0.3rem 0.55rem; border-radius: var(--radius-sm); font-size: 0.95rem; line-height: 1; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; } .theme-toggle:hover { background: rgba(255,255,255,0.08); } .theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Icon shown = the theme you'd switch TO. Default (light): moon. */ .theme-toggle .ic-sun { display: none; } .theme-toggle .ic-moon { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .ic-sun { display: inline; } :root:not([data-theme="light"]) .theme-toggle .ic-moon { display: none; } } :root[data-theme="dark"] .theme-toggle .ic-sun { display: inline; } :root[data-theme="dark"] .theme-toggle .ic-moon { display: none; } :root[data-theme="light"] .theme-toggle .ic-sun { display: none; } :root[data-theme="light"] .theme-toggle .ic-moon { display: inline; } .preview-audio { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem; position: sticky; top: 0; z-index: 10; } .preview-audio audio { flex: 1; min-width: 0; } /* Regenerate cluster now lives inside the (already sticky) .preview-audio bar, so it's always visible at the top of the preview while scrolling. */ .preview-audio .seed-label { margin-left: auto; } .preview-audio .btn-regenerate { white-space: nowrap; } .seed-label { font-size: 0.75rem; color: var(--muted); font-family: ui-monospace, monospace; } .btn-regenerate { padding: 0.5rem 1rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; color: var(--text-soft); transition: all 0.12s; font-family: inherit; } .btn-regenerate:hover { background: var(--brand-tint); border-color: var(--brand-edge); color: var(--text); } .dl-link { font-size: 0.8rem; color: var(--text-soft); text-decoration: none; padding: 0.3rem 0.65rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); white-space: nowrap; } .dl-link:hover { background: var(--brand-tint); } .error-card { background: var(--err-bg); border: 1px solid var(--err-edge); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; color: var(--err-fg); } .error-card pre { margin-top: 0.5rem; font-size: 0.8rem; white-space: pre-wrap; } .no-audio { color: var(--muted-2); font-size: 0.85rem; font-style: italic; } /* ── DAW-style number drag ──────────────────────────────── */ input[type="number"] { cursor: ns-resize; } input[type="number"]:focus { cursor: text; } .daw-drag-overlay { position: fixed; inset: 0; z-index: 9999; cursor: ns-resize; } /* ── Focus rings (a11y) ─────────────────────────────────── */ /* Custom controls (chip labels, type buttons, mode buttons, sm utility buttons, dl links, summary headers) need a visible focus ring. Native inputs/selects already set border-color on focus; add an explicit ring for keyboard users without breaking the existing styled focus. */ .type-btn:focus-visible, .rmode-btn:focus-visible, .btn-preview:focus-visible, .btn-regenerate:focus-visible, .btn-sel-all:focus-visible, .sidebar-toggle:focus-visible, .dl-link:focus-visible, .checkbox-group label:focus-within, .radio-group label:focus-within, .sp-note:focus-within span { outline: 2px solid var(--brand); outline-offset: 2px; } .field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--brand-edge); outline-offset: 0; } /* ── Bottom-sheet params panel (phones) ─────────────────── */ /* `.left-panel` becomes a slide-up sheet on small screens, replacing the old display:none toggle. The sheet is closed by default; the header toggle (or any preview generation) opens / closes it. */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 99; } body.params-open .sheet-backdrop { opacity: 1; pointer-events: auto; } /* ── Tablet ─────────────────────────────────────────────── */ @media (max-width: 1100px) { .left-panel { width: 290px; } .right-panel { padding: 1rem; } } /* ── Stacked layout (portrait screens & phones) ─────────── */ /* Right-panel takes the full viewport; the params live in a slide-up bottom sheet revealed by the header toggle. */ @media (orientation: portrait), (max-width: 760px) { .page { grid-template-columns: 1fr; height: auto; min-height: calc(100dvh - 46px); } .right-panel { overflow-y: visible; padding: 1rem; } .type-grid { display: flex; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.25rem; scroll-snap-type: x mandatory; scrollbar-width: thin; } .type-btn { flex: 0 0 auto; min-width: 96px; scroll-snap-align: start; } .preview-score { padding: 1rem; } /* Allow the staff-picker to fit narrower screens */ .staff-picker { width: 100%; max-width: 320px; } /* Header toggle becomes the sheet trigger */ .sidebar-toggle { display: inline-block; } /* Left-panel turns into a bottom sheet — fixed, slides up via class */ .left-panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; min-width: 0; height: 80dvh; z-index: 100; border-right: 0; border-top: 1px solid var(--border); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 32px rgba(0,0,0,0.22); transform: translateY(100%); transition: transform 0.25s ease; overflow: hidden; resize: none; } body.params-open .left-panel { transform: translateY(0); } /* Tiny drag-handle visual at the top of the sheet */ .left-panel::before { content: ''; display: block; width: 44px; height: 4px; background: var(--muted-2); border-radius: 2px; margin: 0.55rem auto 0.4rem; flex: 0 0 auto; } /* Inside the sheet, the form scrolls instead of the whole page */ .params-scroll { overflow-y: auto; } /* Sticky regen sits inside .right-panel which is no longer scrollable — anchor it to the viewport bottom. */ .preview-actions { position: sticky; bottom: 0.5rem; } } /* ── Recognition quiz (chord / interval / instrument) ───── Used by teacher_preview.html for QuizChoices and InstrumentChoices. Designed for touch first: large tap targets, big replay button next to the question, adaptive grid. */ .instr-quiz { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem 1.3rem; box-shadow: var(--shadow-md); margin-bottom: 1rem; } .quiz-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .instr-question { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 0; } .quiz-header-tools { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .quiz-autonext { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; min-height: 44px; font-size: 0.85rem; font-weight: 500; color: var(--text-soft); background: var(--surface-alt); border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.12s, border-color 0.12s, color 0.12s; } .quiz-autonext:hover { background: var(--brand-tint); border-color: var(--brand-edge); color: var(--brand); } .quiz-autonext:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; } .quiz-autonext input { accent-color: var(--brand); width: 1.05rem; height: 1.05rem; } .quiz-autonext:has(input:checked) { background: var(--brand-tint); border-color: var(--brand-edge); color: var(--brand); font-weight: 600; } .quiz-replay { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; min-height: 44px; font-size: 0.95rem; font-weight: 600; background: var(--brand-tint); color: var(--brand); border: 1.5px solid var(--brand-edge); border-radius: var(--radius); cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.05s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .quiz-replay:hover:not(:disabled) { background: var(--brand); color: white; border-color: var(--brand); } .quiz-replay:active:not(:disabled) { transform: scale(0.97); } .quiz-replay:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } .quiz-replay:disabled { opacity: 0.55; cursor: default; } .quiz-replay .ic { font-size: 1.05em; line-height: 1; } .quiz-replay.playing .ic { animation: replay-spin 1s linear infinite; } @keyframes replay-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .quiz-replay.playing .ic { animation: none; } } .instr-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.55rem; } .instr-btn { min-height: 60px; padding: 0.85rem 0.9rem; font-size: 1.02rem; font-weight: 600; background: var(--surface-alt); border: 1.5px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; color: var(--text); font-family: inherit; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.05s, box-shadow 0.12s; } .instr-btn:hover:not(:disabled) { background: var(--brand-tint); border-color: var(--brand-edge); color: var(--brand); } .instr-btn:active:not(:disabled) { transform: scale(0.97); } .instr-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } .instr-btn:disabled { cursor: default; } .instr-btn.correct { background: #d6f5d6; border-color: #4caf50; color: #1b5e20; box-shadow: 0 0 0 3px rgba(76,175,80,0.18); animation: pulse-ok 0.45s ease-out; } .instr-btn.wrong { background: #ffe0e0; border-color: #e57373; color: #b71c1c; animation: shake 0.35s ease-out; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .instr-btn.correct { background: #1d3a22; border-color: #4caf50; color: #b8f0bc; box-shadow: 0 0 0 3px rgba(76,175,80,0.25); } :root:not([data-theme="light"]) .instr-btn.wrong { background: #3a1818; border-color: #e57373; color: #ffb3ad; } } :root[data-theme="dark"] .instr-btn.correct { background: #1d3a22; border-color: #4caf50; color: #b8f0bc; box-shadow: 0 0 0 3px rgba(76,175,80,0.25); } :root[data-theme="dark"] .instr-btn.wrong { background: #3a1818; border-color: #e57373; color: #ffb3ad; } @keyframes pulse-ok { 0% { transform: scale(1); } 50% { transform: scale(1.045); } 100% { transform: scale(1); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @media (prefers-reduced-motion: reduce) { .instr-btn.correct, .instr-btn.wrong { animation: none; } } .instr-feedback { margin-top: 0.95rem; font-size: 1rem; font-weight: 600; min-height: 1.4em; text-align: center; color: var(--text-soft); } .instr-feedback.ok { color: #1b5e20; } .instr-feedback.bad { color: #b71c1c; } :root[data-theme="dark"] .instr-feedback.ok, :root:not([data-theme="light"]) .instr-feedback.ok { color: #8edc94; } :root[data-theme="dark"] .instr-feedback.bad, :root:not([data-theme="light"]) .instr-feedback.bad { color: #ff8b80; } .quiz-next { display: none; margin: 0.95rem auto 0; padding: 0.7rem 1.4rem; min-height: 48px; background: var(--brand); color: white; border: 1px solid var(--brand); border-radius: var(--radius); font-size: 0.95rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.12s, transform 0.05s; -webkit-tap-highlight-color: transparent; } .quiz-next.show { display: inline-flex; align-items: center; gap: 0.45rem; } .quiz-next:hover { background: var(--brand-hover); } .quiz-next:active { transform: scale(0.97); } .quiz-next:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } .quiz-actions { text-align: center; } /* Narrow phones: single-column grid + stack header */ @media (max-width: 480px) { .instr-choices { grid-template-columns: 1fr; } .quiz-header { flex-direction: column; align-items: stretch; } .quiz-replay { justify-content: center; } } /* Rhythm tap UI + timing visualization (bac à sable rythme preview) */ .rhythm-tap { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-top: 1rem; } .rhythm-tap .answer-prompt { font-size: 0.95rem; color: var(--text-soft, #555); text-align: center; } .rhythm-tap .tap-zone { width: 100%; padding: 2rem 1rem; background: linear-gradient(135deg, var(--brand), #5054a8); color: #fff; border-radius: 10px; font-size: 1.2rem; font-weight: 600; text-align: center; cursor: pointer; user-select: none; transition: transform 0.05s, background 0.12s; } .rhythm-tap .tap-zone:active { transform: scale(0.97); background: var(--brand-hover); } .rhythm-tap .tap-zone:focus-visible { outline: 3px solid #ffc107; outline-offset: 3px; } .rhythm-tap .tap-zone.armed { background: #2c8c4a; } .rhythm-tap .tap-zone.armed:active { background: #226f3a; } .rhythm-tap .tap-meta { font-size: 0.85rem; color: var(--text-soft, #666); min-height: 1.2em; } .rhythm-tap .tap-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } .rhythm-tap .ghost-btn { padding: 0.55rem 1rem; background: var(--surface, #fff); border: 1.5px solid var(--brand-edge); border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 0.9rem; color: var(--text, #2a2a4a); } .rhythm-tap .ghost-btn:hover:not(:disabled) { background: var(--brand-tint); } .rhythm-tap .single-btn { padding: 0.55rem 1.2rem; width: 100%; background: var(--brand); color: #fff; border: none; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 0.95rem; font-weight: 600; } .rhythm-tap .single-btn:hover:not(:disabled) { background: var(--brand-hover); } .rhythm-tap .single-btn:disabled { opacity: 0.5; cursor: not-allowed; } .tap-viz { width: 100%; margin-top: 0.4rem; } .viz-summary { font-size: 0.92rem; margin-bottom: 0.6rem; text-align: center; color: var(--text-soft, #444); line-height: 1.5; } .viz-ok { color: #1b5e20; font-weight: 700; } .viz-ko { color: #b71c1c; font-weight: 700; } .viz-stat { color: var(--text-soft, #555); white-space: nowrap; } .viz-line { margin-bottom: 0.45rem; } .viz-line:last-child { margin-bottom: 0; } .viz-line-label { font-size: 0.72rem; color: var(--text-soft, #888); margin-bottom: 0.15rem; } .viz-track { position: relative; height: 54px; width: 100%; background: var(--surface-alt, #f0f0f6); border: 1px solid var(--brand-edge); border-radius: 8px; overflow: hidden; } .viz-tolband { position: absolute; top: 0; bottom: 0; background: rgba(76,175,80,0.12); } .viz-expected { position: absolute; top: 8px; bottom: 8px; width: 2px; margin-left: -1px; background: #8888aa; } .viz-tap { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; } .viz-tap.hit { background: #2c8c4a; box-shadow: 0 0 0 2px rgba(44,140,74,0.25); } .viz-tap.miss { background: #e53935; box-shadow: 0 0 0 2px rgba(229,57,53,0.25); } .viz-legend { margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-soft, #777); display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; } .viz-legend .lg::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 0.3rem; vertical-align: middle; } .lg-exp::before { background: #8888aa; } .lg-hit::before { background: #2c8c4a; border-radius: 50%; } .lg-miss::before { background: #e53935; border-radius: 50%; } /* Mobile: pin the tap target to the bottom of the viewport so it stays reachable while watching the cursor on a tall score. */ @media (max-width: 600px) { body:has(.rhythm-tap) { padding-bottom: 88px; } .rhythm-tap .tap-zone { position: fixed; left: 10px; right: 10px; bottom: 10px; width: auto; z-index: 40; padding: 1.1rem 1rem; box-shadow: 0 4px 18px rgba(0,0,0,0.28); } }