@import url("../core/ui/tokens.css");

:root { --lab-accent: var(--nl-family-practice, #397968); --lab-soft: #edf7f3; --lab-warm: #dcae51; }
body.notalix-module-pratique-instrumentale { margin:0; background:var(--nl-bg); color:var(--nl-text); font-family:var(--nl-font); }
.lab-shell { width:min(860px,calc(100vw - 28px)); margin:0 auto; padding:18px 0 42px; }
.lab-shell-wide { width:min(1120px,calc(100vw - 28px)); }
.lab-hero,.lab-activity-head { margin-bottom:16px; text-align:center; }
.lab-hero h1,.lab-activity-head h1 { margin:7px 0 5px; color:var(--nl-primary); font-size:clamp(1.75rem,5vw,2.7rem); line-height:1.05; }
.lab-hero p,.lab-activity-head p { max-width:760px; margin:0 auto; color:var(--nl-text-muted); line-height:1.45; }
.lab-badge { display:inline-flex; align-items:center; min-height:26px; padding:3px 10px; border:1px solid color-mix(in srgb,var(--lab-accent) 35%,var(--nl-line)); border-radius:999px; background:var(--lab-soft); color:var(--lab-accent); font-size:.72rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.lab-tool-grid { display:grid; gap:12px; }
.lab-tool-card { display:grid; grid-template-columns:54px minmax(0,1fr) 18px; align-items:center; gap:14px; min-height:94px; padding:15px; border:1px solid var(--nl-line); border-radius:var(--nl-radius-panel); background:var(--nl-surface); color:inherit; text-decoration:none; box-shadow:var(--nl-shadow-card); }
.lab-tool-card:hover { border-color:color-mix(in srgb,var(--lab-accent) 45%,var(--nl-line)); transform:translateY(-1px); }
.lab-tool-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:15px; background:var(--lab-soft); color:var(--lab-accent); font-size:1.5rem; font-weight:900; }
.lab-tool-card strong,.lab-tool-card small { display:block; }
.lab-tool-card strong { color:var(--nl-primary); font-size:1.04rem; }
.lab-tool-card small { margin-top:4px; color:var(--nl-text-muted); line-height:1.35; }
.lab-tool-card>b { color:var(--lab-accent); font-size:1.2rem; }
.lab-privacy { margin-top:14px; padding:14px 16px; border:1px solid var(--nl-line); border-radius:var(--nl-radius-card); background:var(--nl-surface-soft); }
.lab-privacy strong { color:var(--nl-primary); }.lab-privacy p { margin:4px 0 0; color:var(--nl-text-muted); font-size:.84rem; line-height:1.45; }

.lab-card { margin-bottom:12px; padding:16px; border:1px solid var(--nl-line); border-radius:var(--nl-radius-panel); background:var(--nl-surface); box-shadow:var(--nl-shadow-card); }
.lab-setup-card,.lab-concert-card { border-top:4px solid var(--lab-accent); }
.lab-setup-card { background:linear-gradient(180deg,var(--lab-soft) 0,transparent 84px),var(--nl-surface); }
.lab-card h2 { margin:0; color:var(--nl-primary); font-size:1.2rem; }.lab-kicker { color:var(--lab-accent); font-size:.69rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.lab-fields { display:grid; gap:9px; margin-top:12px; }.lab-fields-four { grid-template-columns:1.35fr repeat(3,minmax(130px,.75fr)); }.lab-fields-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lab-fields label { display:grid; gap:5px; color:var(--nl-text-muted); font-size:.7rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.lab-fields select,.lab-fields input { width:100%; min-height:48px; border-color:color-mix(in srgb,var(--lab-accent) 20%,var(--nl-line)); background-color:#fff; }.lab-fields output { display:block; color:var(--nl-primary); text-align:center; font-size:.82rem; text-transform:none; }
.lab-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }.lab-mode { min-height:68px; padding:9px 12px; border:1px solid var(--nl-line); border-radius:var(--nl-radius-card); background:#fff; color:var(--nl-text); text-align:left; }.lab-mode strong,.lab-mode small { display:block; }.lab-mode small { margin-top:3px; color:var(--nl-text-muted); }.lab-mode.is-active { border-color:var(--lab-accent); background:var(--lab-accent); color:#fff; }.lab-mode.is-active small { color:#edf7f3; }
.lab-notice { margin:10px 0 0; padding:10px 12px; border-radius:var(--nl-radius-control); background:var(--nl-color-warning-soft); color:#76571f; font-size:.82rem; line-height:1.4; }
.lab-score-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:8px; }.lab-score-head h2 { margin-top:2px; font-size:1.25rem; }.lab-score-head p { margin:0; color:var(--nl-text-muted); font-size:.76rem; text-align:right; }
.lab-score { width:100%; overflow:hidden; border:1px solid var(--nl-line); border-radius:var(--nl-radius-card); background:#fff; }.lab-score svg { display:block; max-width:100%; margin:auto; }.lab-scale-score { min-height:250px; }.lab-concert-score { min-height:390px; }
.lab-progress { margin-top:9px; padding:10px 11px; border:1px solid var(--nl-line); border-radius:var(--nl-radius-card); background:var(--nl-surface-soft); }.lab-progress>div:first-child { display:flex; justify-content:space-between; gap:10px; }.lab-progress span { color:var(--lab-accent); font-weight:850; }
.lab-progress-track { height:9px; margin-top:8px; overflow:hidden; border-radius:999px; background:#e7edf0; }.lab-progress-track>span { display:block; width:0; height:100%; border-radius:inherit; background:var(--lab-accent); transition:width .16s ease; }
.lab-progress-notes { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }.lab-progress-note { min-width:42px; padding:5px 7px; border:1px solid var(--nl-line); border-radius:9px; background:#fff; color:var(--nl-text-muted); text-align:center; font-size:.72rem; font-weight:800; }.lab-progress-note.is-done { background:var(--lab-soft); color:var(--lab-accent); }.lab-progress-note.is-current { border-color:#c69a39; background:#fae7b8; color:#5d4518; transform:scale(1.04); }
.lab-listen-row,.lab-options { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }.lab-listen-row button,.lab-options button,.lab-main-actions button,.lab-report>button { min-height:46px; padding:0 12px; border:1px solid var(--nl-line); border-radius:var(--nl-radius-control); background:#fff; color:var(--nl-text); font-weight:850; }.lab-listen-row button { flex:1 1 145px; }.lab-options .is-active { border-color:var(--lab-accent); background:var(--lab-soft); color:var(--lab-accent); }
.lab-live,.lab-flash { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; min-height:84px; margin-top:10px; padding:11px 12px; border-radius:var(--nl-radius-card); background:var(--nl-surface-soft); }.lab-live strong,.lab-live span,.lab-flash strong,.lab-flash span,.lab-flash small { display:block; }.lab-live strong,.lab-flash strong { font-size:clamp(1.05rem,3vw,1.35rem); }.lab-live span,.lab-flash span { margin-top:3px; color:var(--nl-text-muted); font-size:.8rem; line-height:1.35; }.lab-flash small { min-height:17px; margin-top:4px; color:var(--lab-accent); font-weight:800; }
.lab-signal { display:grid; place-items:center; width:68px; height:56px; border:2px solid var(--nl-line); border-radius:15px; background:#fff; font-size:1.5rem; font-weight:900; }.lab-signal.is-low { border-color:#6b96b0; background:#e9f1f6; }.lab-signal.is-high { border-color:#b48342; background:#f7ecdc; }.lab-signal.is-good { border-color:var(--lab-accent); background:var(--lab-soft); }
.lab-main-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }.lab-main-actions .lab-primary { border-color:var(--lab-accent); background:var(--lab-accent); color:#fff; }.lab-main-actions .lab-primary.is-running { border-color:var(--nl-color-danger); background:var(--nl-color-danger); }
.lab-mic-status { margin:8px 0 0; color:var(--nl-text-muted); font-size:.75rem; text-align:center; }.lab-error { margin:9px 0 0; padding:10px 12px; border:1px solid #e5bcb7; border-radius:var(--nl-radius-control); background:var(--nl-color-danger-soft); color:#963f37; }
.lab-observations { display:grid; gap:8px; margin-top:11px; }.lab-observation,.lab-report-grid article { padding:11px 12px; border:1px solid var(--nl-line); border-radius:var(--nl-radius-card); background:#fff; line-height:1.4; }.lab-note-results { display:flex; flex-wrap:wrap; gap:6px; margin:11px 0; }.lab-note-result { min-width:67px; padding:7px; border:1px solid var(--nl-line); border-radius:11px; text-align:center; }.lab-note-result strong,.lab-note-result small { display:block; }.lab-note-result small { margin-top:2px; color:var(--nl-text-muted); font-size:.68rem; }.lab-note-result.is-good { background:var(--lab-soft); }.lab-note-result.is-low { background:#e9f1f6; }.lab-note-result.is-high { background:#f7ecdc; }.lab-note-result.is-missing { opacity:.58; }
.lab-tech { overflow:auto; margin-top:8px; }.lab-tech table { width:100%; border-collapse:collapse; font-size:.76rem; }.lab-tech th,.lab-tech td { padding:6px; border-bottom:1px solid var(--nl-line); text-align:left; }.lab-report>p { color:var(--nl-text-muted); }.lab-report summary { cursor:pointer; color:var(--nl-text-muted); font-weight:850; }
.lab-piece { padding:10px 12px; border:1px solid var(--nl-line); border-radius:var(--nl-radius-card); background:var(--nl-surface-soft); }.lab-piece strong,.lab-piece span { display:block; }.lab-piece span { margin-top:3px; color:var(--nl-text-muted); font-size:.78rem; }
.lab-concert-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(310px,.6fr); gap:12px; margin-top:12px; align-items:start; }.lab-concert-side { min-width:0; }.lab-status-chip { display:inline-flex; align-items:center; min-height:44px; padding:0 11px; border:1px solid var(--nl-line); border-radius:var(--nl-radius-control); color:var(--nl-text-muted); font-size:.78rem; }
.lab-intonation { margin-top:10px; padding:11px; border:1px solid var(--nl-line); border-radius:var(--nl-radius-card); }.lab-intonation>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:8px; }.lab-intonation button { min-height:38px; border:1px solid var(--nl-line); border-radius:10px; background:#fff; }.lab-intonation button.is-active { border-color:var(--lab-accent); background:var(--lab-soft); }.lab-tune-labels { display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:8px; color:var(--nl-text-muted); font-size:.66rem; }.lab-tune-labels span:nth-child(2){text-align:center}.lab-tune-labels span:last-child{text-align:right}.lab-tune-track { position:relative; height:17px; margin-top:4px; border:1px solid var(--nl-line); border-radius:999px; background:linear-gradient(90deg,#e7eef3 0 34%,#e5f1eb 42% 58%,#f4eadb 66% 100%); }.lab-tune-track i { position:absolute; left:50%; top:-3px; bottom:-3px; width:2px; background:var(--lab-accent); }.lab-tune-track b { position:absolute; left:50%; top:50%; width:15px; height:15px; border:3px solid #fff; border-radius:50%; background:var(--nl-text); box-shadow:0 0 0 1px var(--nl-line); transform:translate(-50%,-50%); transition:left .08s linear,opacity .12s; }.lab-intonation p { min-height:21px; margin:7px 0 0; text-align:center; font-weight:900; }.lab-intonation small { display:block; min-height:17px; color:var(--nl-text-muted); text-align:center; }
.lab-report-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:11px 0; }.lab-report-grid h3 { margin:0 0 6px; }.lab-problem { margin-top:6px; padding:8px 9px; border-radius:9px; background:var(--nl-surface-soft); }.lab-problem.is-wrong { background:var(--nl-color-danger-soft); }.lab-problem.is-pitch { background:var(--nl-color-warning-soft); }

.lab-flash.is-current { background:#f9ebc6; }
.lab-status-chip.is-active { border-color:var(--lab-accent); background:var(--lab-soft); color:var(--lab-accent); }
.lab-intonation p.is-good { color:var(--lab-accent); }
.lab-intonation p.is-low { color:#5887a2; }
.lab-intonation p.is-high { color:#9a692e; }
.lab-intonation p.is-wrong { color:var(--nl-color-danger); }
.lab-muted-small { color:var(--nl-text-muted); font-size:.75rem; }

/* Sur un écran de travail, la partition reste dominante et les commandes utiles
   forment un pupitre latéral stable. Le moteur et l’ordre pédagogique ne changent pas. */
@media (min-width:901px) and (min-height:621px) {
  .lab-practice-card { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr); grid-template-rows:auto auto auto auto auto 1fr; gap:9px 13px; align-items:start; }
  .lab-practice-card .lab-score-head { grid-column:1; grid-row:1; margin-bottom:0; }
  .lab-practice-card .lab-score { grid-column:1; grid-row:2 / 6; min-height:310px; }
  .lab-practice-card .lab-progress { grid-column:1; grid-row:6; margin-top:0; }
  .lab-practice-card .lab-listen-row { grid-column:2; grid-row:1; margin-top:0; }
  .lab-practice-card .lab-live { grid-column:2; grid-row:2; margin-top:0; }
  .lab-practice-card .lab-main-actions { grid-column:2; grid-row:3; margin-top:0; }
  .lab-practice-card .lab-mic-status { grid-column:2; grid-row:4; margin-top:0; }
  .lab-practice-card .lab-error { grid-column:2; grid-row:5; margin-top:0; }
  .lab-concert-side { position:sticky; top:76px; }
}

@media (max-width:800px) { .lab-fields-four { grid-template-columns:1fr 1fr; }.lab-concert-layout { grid-template-columns:1fr; }.lab-concert-score { min-height:360px; }.lab-report-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .lab-shell,.lab-shell-wide { width:calc(100vw - 14px); padding-top:10px; }.lab-card { padding:12px; border-radius:15px; }.lab-fields-four,.lab-fields-three,.lab-mode-grid,.lab-main-actions { grid-template-columns:1fr; }.lab-score-head { display:block; }.lab-score-head p { margin-top:3px; text-align:left; }.lab-scale-score { min-height:230px; }.lab-concert-score { min-height:365px; }.lab-progress-notes { flex-wrap:nowrap; overflow:auto; padding-bottom:3px; }.lab-tool-card { grid-template-columns:44px minmax(0,1fr) 15px; min-height:82px; gap:10px; }.lab-tool-icon { width:44px; height:44px; }.lab-listen-row button { flex:1 1 140px; } }
@media (orientation:landscape) and (max-height:620px) and (min-width:681px) { .lab-shell-wide { width:min(1180px,calc(100vw - 18px)); padding:6px 0 16px; }.lab-activity-head { margin-bottom:7px; }.lab-activity-head h1 { margin:3px 0; font-size:1.45rem; }.lab-activity-head p { font-size:.75rem; }.lab-card { padding:10px; margin-bottom:8px; }.lab-setup-card { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr); gap:8px 12px; }.lab-setup-card h2 { grid-column:1/-1; }.lab-setup-card .lab-fields { margin:0; }.lab-setup-card .lab-mode-grid { margin:0; }.lab-practice-card { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); grid-template-rows:auto auto auto auto; gap:7px 12px; }.lab-practice-card .lab-score-head,.lab-practice-card .lab-score,.lab-practice-card .lab-progress { grid-column:1; }.lab-practice-card .lab-score { grid-row:2/5; min-height:225px; }.lab-practice-card .lab-listen-row,.lab-practice-card .lab-live,.lab-practice-card .lab-main-actions,.lab-practice-card .lab-mic-status,.lab-practice-card .lab-error { grid-column:2; margin-top:0; }.lab-practice-card .lab-listen-row { grid-row:1/2; }.lab-practice-card .lab-live { grid-row:2; }.lab-practice-card .lab-main-actions { grid-row:3; }.lab-progress-notes { display:none; }.lab-concert-layout { grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr); }.lab-concert-score { min-height:345px; }.lab-concert-side .lab-options { margin-top:5px; }.lab-flash { min-height:70px; margin-top:6px; }.lab-intonation { margin-top:6px; padding:8px; }.lab-main-actions { margin-top:6px; } }