:root {
    --bg: #07070d;
    --card: rgba(18, 18, 30, 0.94);
    --card-2: rgba(28, 28, 44, 0.88);
    --line: rgba(255,255,255,0.08);
    --text: #f0f0f8;
    --muted: #8e8ea8;
    --accent: #ff2e91;
    --accent-2: #a855f7;
    --accent-glow: rgba(255,46,145,0.35);
    --success: #22d47d;
    --danger: #ff4d5e;
    --warning: #ffb340;
    --font: 'Outfit', system-ui, sans-serif;
    --mono: 'Space Mono', monospace;
    --radius: 20px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100dvh;font-family:var(--font);background:radial-gradient(ellipse at 20% 0%,rgba(255,46,145,0.1),transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(168,85,247,0.08),transparent 50%),var(--bg);color:var(--text);line-height:1.55;overflow-x:hidden}
button,select,input{font:inherit}button{cursor:pointer}

/* SHELL */
.app-shell{width:min(1240px,100%);margin:0 auto;padding:24px 18px 48px}

/* HERO */
.hero{text-align:center;margin-bottom:20px}
.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;font-weight:800;margin-bottom:6px}
.hero h1{font-size:clamp(2rem,5vw,4rem);font-weight:900;letter-spacing:-.04em;line-height:.95}
.hero h1 span{display:block;margin-top:6px;font-size:clamp(.95rem,2.5vw,1.5rem);letter-spacing:0;color:var(--muted);font-weight:500}
.subtitle{max-width:660px;margin:12px auto 0;color:var(--muted);font-size:.9rem}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.hero-link,.version-badge{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);text-decoration:none;font-weight:700;font-size:.82rem;transition:all .2s}
.hero-link{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent}
.hero-link:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--accent-glow)}
.hero-link.ghost,.version-badge{color:var(--muted);background:rgba(255,255,255,.04)}
.version-badge{cursor:default;font-family:var(--mono);font-size:.74rem}

/* GLOBAL PROGRESS */
.global-progress{max-width:1240px;margin:0 auto 18px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(20px)}
.gp-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.gp-label{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.gp-percent{font-size:1.4rem;font-family:var(--mono);background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gp-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:10px}
.gp-bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px;transition:width .4s ease}
.gp-stats{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.gp-stat{font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:5px}
.gp-stat::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0}
.gp-green::before{background:var(--success)}
.gp-orange::before{background:var(--warning)}
.gp-red::before{background:var(--danger)}
.gp-sections{display:flex;gap:6px;flex-wrap:wrap}
.gp-section-chip{padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;border:1px solid var(--line);background:rgba(255,255,255,.04);display:flex;align-items:center;gap:5px}
.gp-section-chip .gp-chip-bar{width:40px;height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.gp-section-chip .gp-chip-fill{display:block;height:100%;border-radius:999px;background:var(--success);transition:width .3s}

/* LAYOUT */
.layout{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(340px,1.15fr);gap:16px;align-items:start}
.video-card,.trainer-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(20px)}
.video-card{padding:14px;position:sticky;top:14px}
.trainer-card{overflow:hidden}
video{width:100%;display:block;background:#000;border-radius:calc(var(--radius) - 4px);box-shadow:0 0 0 1px rgba(255,255,255,.05)}

/* VIDEO TOOLS */
.video-tools{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;align-items:center}
.tool-sep{width:1px;height:20px;background:var(--line);margin:0 3px}
.mini-btn,.tab,.btn{border:1px solid rgba(255,255,255,.1);color:var(--text);background:rgba(255,255,255,.05);border-radius:999px;transition:all .18s;font-weight:700;font-size:.8rem}
.mini-btn{padding:6px 10px;color:var(--muted)}
.mini-btn:hover,.tab:hover,.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.09)}
.mini-btn.active,.tab.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}

/* SECTION LOOP */
.section-loop-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;border-radius:12px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12)}
.section-loop-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-2);white-space:nowrap}
.section-loop-btns{display:flex;flex-wrap:wrap;gap:4px}
.section-loop-btns .mini-btn{padding:4px 8px;font-size:.72rem}
.section-loop-btns .mini-btn.loop-active{background:var(--accent-2);color:#fff;border-color:transparent;animation:pulse-loop 2s ease infinite}
@keyframes pulse-loop{0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,.4)}50%{box-shadow:0 0 0 5px rgba(168,85,247,0)}}
.loop-stop{font-size:.74rem;padding:4px 8px;background:rgba(255,77,94,.1);border-color:rgba(255,77,94,.2);color:var(--danger)}

/* SYNC METER */
.sync-meter{margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.sync-meter div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.sync-meter strong{font-size:.9rem;font-family:var(--mono)}
.sync-meter span{color:var(--muted);font-size:.78rem}
.sync-bar{height:5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.06)}
.sync-bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s;border-radius:999px}

/* MODE TABS */
.mode-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:10px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.tab{padding:9px 6px;font-weight:800;font-size:.78rem}
.admin-tab{background:rgba(255,46,145,.06)}

/* LEARNING PANEL */
.learning-panel{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.instruction{font-weight:700;font-size:.9rem}
.sync-status{margin-top:3px;color:var(--muted);font-size:.82rem}
.panel-right-controls{display:flex;gap:8px;align-items:flex-start;flex-shrink:0;flex-wrap:wrap}
.difficulty-label{min-width:120px;color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
select{display:block;width:100%;margin-top:4px;color:#fff;background:rgba(18,18,30,.9);border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-size:.82rem}
.btn-fullscreen{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;border-radius:999px;font-weight:800;font-size:.78rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-fullscreen:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}
.btn-fullscreen svg{flex-shrink:0}

/* CONTROLS */
.manual-controls{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0}
.btn{padding:8px 12px;font-weight:800;font-size:.82rem}
.btn.primary{background:var(--accent);border-color:transparent}
.btn.success{background:var(--success);border-color:transparent;color:#06120b}
.btn.ghost{color:var(--muted)}
.btn.danger{background:rgba(255,77,94,.1);border-color:rgba(255,77,94,.2);color:#ffd7dc}
.check-btn{margin:10px 14px 0}

/* SCORE CONTROLS */
.score-controls{display:flex;gap:6px;padding:10px 14px 0}
.score-btn{flex:1;text-align:center;font-size:.82rem;padding:10px 8px}
.score-fail{background:rgba(255,77,94,.15);border-color:rgba(255,77,94,.25);color:#ff8a96}
.score-review{background:rgba(255,179,64,.12);border-color:rgba(255,179,64,.2);color:#ffc870}
.score-ok{background:rgba(34,212,125,.12);border-color:rgba(34,212,125,.2);color:#5ae8a0}

/* LYRICS BOX */
.lyrics-box{max-height:680px;overflow:auto;padding:14px;scroll-behavior:smooth}
.section-block{background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:10px}
.section-block h2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:.88rem;font-weight:800}
.section-block h2 span{font-size:.68rem;font-weight:700;color:var(--muted);background:rgba(255,255,255,.04);padding:3px 7px;border-radius:999px}

/* LYRIC LINES */
.lyric-line{display:grid;grid-template-columns:32px 1fr;gap:6px;align-items:start;padding:7px;border-radius:10px;color:rgba(255,255,255,.78);cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.lyric-line:hover{background:rgba(255,255,255,.04)}
.line-number{color:var(--muted);font-size:.66rem;font-weight:900;font-family:var(--mono);padding-top:3px}
.line-body{display:grid;gap:2px}
.line-text{font-size:clamp(.9rem,1.8vw,1.05rem)}
.line-time{color:var(--muted);font-size:.64rem;font-weight:700;font-family:var(--mono)}
.lyric-line.timed .line-time{color:var(--success)}
.lyric-line.untimed .line-time{color:rgba(255,255,255,.2)}

/* LINE SCORE INDICATOR */
.line-score-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:6px;vertical-align:middle;flex-shrink:0}
.line-score-dot.score-red{background:var(--danger)}
.line-score-dot.score-orange{background:var(--warning)}
.line-score-dot.score-green{background:var(--success)}

/* KARAOKE STATES */
.karaoke-line,.memory-line,.disappear-line{opacity:.3;transition:opacity .3s,transform .3s}
.lyric-line.active{opacity:1!important;color:#fff;background:linear-gradient(135deg,rgba(255,46,145,.18),rgba(168,85,247,.15));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 24px rgba(255,46,145,.08);transform:scale(1.01)}
.lyric-line.karaoke-prev{opacity:.45}
.lyric-line.karaoke-next{opacity:.55}
.lyric-line .line-progress{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,rgba(255,46,145,.1),rgba(168,85,247,.06));pointer-events:none;transition:width .15s linear;border-radius:10px}
.lyric-line.mastered .line-number::after{content:" ✓";color:var(--success)}

/* DISAPPEARING LYRICS */
.masked-word{display:inline-block;min-width:30px;border-bottom:2px dashed rgba(255,255,255,.2);color:transparent;user-select:none;transition:color .3s}
.masked-word:hover{color:rgba(255,255,255,.35)}
.line-fully-hidden .line-text{color:transparent!important;text-shadow:0 0 14px rgba(255,255,255,.15);user-select:none}
.line-fully-hidden:hover .line-text{color:rgba(255,255,255,.3)!important;text-shadow:none}

/* PRACTICE INPUTS */
.blank-input{width:min(110px,34vw);padding:3px 5px;color:#fff;background:rgba(255,255,255,.06);border:0;border-bottom:2px solid var(--accent);border-radius:5px 5px 0 0;outline:none;text-align:center;font-family:var(--font);transition:border-color .2s}
.blank-input:focus{border-bottom-color:var(--accent-2)}
.blank-input.correct{border-bottom-color:var(--success);color:var(--success);font-weight:800}
.blank-input.incorrect{border-bottom-color:var(--danger);color:var(--danger)}

/* ADMIN */
.sync-admin-panel{margin:10px 14px 0;padding:12px;border-radius:16px;border:1px solid rgba(255,46,145,.18);background:linear-gradient(135deg,rgba(255,46,145,.06),rgba(168,85,247,.05))}
.admin-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;margin-bottom:10px}
.eyebrow.small{font-size:.62rem;margin-bottom:2px}
.admin-head h2{font-size:clamp(.95rem,2vw,1.25rem);margin-bottom:2px}
.admin-shortcuts-hint{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:8px 10px;margin-bottom:10px;border-radius:10px;background:rgba(0,0,0,.2);border:1px solid var(--line);font-size:.72rem;color:var(--muted)}
.admin-shortcuts-hint span{font-weight:800;color:var(--accent);margin-right:3px}
.admin-shortcuts-hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:1px 5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:5px;font-family:var(--mono);font-size:.68rem;font-weight:700;color:#fff}
.current-time-pill{min-width:100px;text-align:right;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.2)}
.current-time-pill span{display:block;color:var(--muted);font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.current-time-pill strong{display:block;font-size:1.05rem;font-family:var(--mono);line-height:1.2}
.admin-current-line{display:grid;gap:4px;padding:10px;margin-bottom:10px;border-radius:12px;background:rgba(0,0,0,.2);border:1px solid var(--line)}
.admin-current-line span{color:var(--accent);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.admin-current-line strong{font-size:clamp(.95rem,2vw,1.15rem)}
.time-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:8px}
.time-grid label{color:var(--muted);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.time-grid input{display:block;width:100%;margin-top:4px;color:#fff;background:rgba(12,12,20,.9);border:1px solid var(--line);border-radius:8px;padding:8px;outline:none;font-family:var(--mono);font-size:.85rem}
.time-grid input:focus{border-color:var(--accent)}
.admin-pin-grid{grid-template-columns:minmax(140px,1fr) minmax(90px,.7fr) minmax(90px,.7fr)}
.admin-actions{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.secondary-actions{padding-top:5px;border-top:1px solid rgba(255,255,255,.05)}
.admin-message{margin-top:6px;color:var(--success);font-size:.82rem;font-weight:700}
.admin-message.error{color:var(--danger)}
.sync-admin-line{cursor:pointer}
.sync-admin-line:hover{background:rgba(255,255,255,.04)}

/* FULLSCREEN KARAOKE */
.fs-karaoke{position:fixed;inset:0;z-index:9999;background:#050508;display:flex;flex-direction:column;overflow:hidden;animation:fs-in .3s ease}
.fs-karaoke[hidden]{display:none}
@keyframes fs-in{from{opacity:0}to{opacity:1}}
.fs-top-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(0,0,0,.5);border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}
.fs-btn{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:7px 14px;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .18s}
.fs-btn:hover{background:rgba(255,255,255,.12)}
.fs-btn-main{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;padding:9px 22px;font-size:.9rem}
.fs-title{font-size:.78rem;color:var(--muted);font-weight:600}
.fs-speed-controls{display:flex;gap:3px}
.fs-speed-btn{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:4px 8px;font-size:.72rem;font-weight:700;cursor:pointer;transition:all .18s}
.fs-speed-btn.active{background:var(--accent);color:#fff;border-color:transparent}
.fs-video-zone{width:100%;max-height:32vh;display:flex;justify-content:center;background:#000;flex-shrink:0;overflow:hidden}
.fs-video-zone video{width:100%;max-height:32vh;object-fit:contain;border-radius:0;box-shadow:none}
.fs-lyrics-zone{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 18px;gap:10px;text-align:center;overflow:hidden}
.fs-line{font-family:var(--font);transition:all .4s;line-height:1.4;max-width:92%}
.fs-line-prev{color:rgba(255,255,255,.2);font-size:clamp(.85rem,2vw,1rem);font-weight:500}
.fs-line-active{position:relative;font-size:clamp(1.4rem,4vw,2.2rem);font-weight:900;color:#fff;text-shadow:0 0 30px var(--accent-glow)}
.fs-progress-bar{position:absolute;left:0;bottom:-3px;height:3px;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px;transition:width .2s linear}
.fs-line-next{color:rgba(255,255,255,.35);font-size:clamp(.95rem,2.5vw,1.2rem);font-weight:600}
.fs-line-upcoming{color:rgba(255,255,255,.12);font-size:clamp(.8rem,2vw,.95rem);font-weight:500}
.fs-bottom-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;background:rgba(0,0,0,.5);border-top:1px solid rgba(255,255,255,.05);flex-shrink:0}

/* RESPONSIVE */
@media(max-width:900px){
    .layout{grid-template-columns:1fr}
    .video-card{position:static}
    .mode-tabs{grid-template-columns:repeat(3,1fr)}
    .learning-panel{flex-direction:column}
    .lyrics-box{max-height:none}
    .admin-head{grid-template-columns:1fr}
    .current-time-pill{text-align:left}
}
@media(max-width:520px){
    .app-shell{padding:12px 8px 24px}
    .video-card,.trainer-card{border-radius:14px}
    .mode-tabs{gap:3px;padding:8px}
    .tab{padding:8px 4px;font-size:.72rem}
    .lyric-line{grid-template-columns:26px 1fr;gap:5px;padding:6px 5px}
    .admin-pin-grid{grid-template-columns:1fr}
    .admin-actions .btn{width:100%}
    .sync-admin-panel{margin:8px 6px 0;padding:10px}
    .time-grid{grid-template-columns:1fr}
    .section-loop-bar{padding:6px 8px}
    .global-progress{padding:12px 14px;margin-bottom:14px}
    .gp-stats{gap:10px}
    .fs-video-zone,.fs-video-zone video{max-height:26vh}
    .fs-lyrics-zone{padding:14px 12px;gap:8px}
    .fs-line-active{font-size:clamp(1.2rem,5vw,1.8rem)}
}
@media(hover:none){.admin-shortcuts-hint{display:none}}

/* V7.1 Hotfix: parcours guidé et admin moins exposé */
.quick-start{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:16px auto 0;max-width:860px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.045);box-shadow:0 12px 40px rgba(0,0,0,.16)}
.quick-start strong{color:#fff;font-size:.88rem;margin-right:4px}
.quick-start span{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--muted);font-size:.8rem;font-weight:800}
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:24px}
.status-card{padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.045);box-shadow:0 16px 45px rgba(0,0,0,.18)}
.status-card strong{display:block;margin-bottom:6px;font-size:.95rem;color:#fff}
.status-card span{display:block;font-weight:800;font-family:var(--mono);font-size:.82rem}
.status-card p{margin-top:8px;color:var(--muted);font-size:.82rem;line-height:1.35}
.status-ok{color:var(--success)}
.status-error{color:var(--danger)}
.status-card code{font-family:var(--mono);font-size:.78rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:2px 5px}
.status-card a{color:var(--accent);font-weight:900}
@media(max-width:720px){.quick-start{justify-content:flex-start}.quick-start span{font-size:.76rem}}