.mode-selector-screen{position:fixed;inset:0;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;justify-content:center;align-items:center;padding:2rem}.mode-selector-container{text-align:center;max-width:600px;width:100%}.mode-selector-container h1{color:var(--color-primary);font-size:2rem;margin-bottom:2rem}.midi-status{font-size:1.1rem;color:#ffffffb3;margin-bottom:2rem;padding:1rem;background:var(--color-bg-glass-light);border-radius:10px}.midi-status.success{color:var(--color-success);border:1px solid var(--color-success)}.mode-buttons{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}.mode-select-btn{flex:1;min-width:250px;padding:2rem;background:var(--color-bg-glass);border:2px solid rgba(255,255,255,.2);border-radius:20px;cursor:pointer;transition:all .3s ease;color:#fff}.mode-select-btn:hover{transform:translateY(-5px);border-color:var(--color-secondary);background:var(--color-bg-glass-light);box-shadow:0 10px 30px #00d9ff4d}.mode-icon{font-size:3rem;margin-bottom:1rem}.mode-title{font-size:1.3rem;font-weight:600;margin-bottom:.5rem;color:#fff}.mode-description{font-size:.9rem;color:#ffffffb3;line-height:1.4}.mode-select-btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.mode-select-btn.disabled:hover{transform:none;border-color:#fff3;background:var(--color-bg-glass);box-shadow:none}.mode-select-btn.disabled .mode-description{color:#ffc107;font-weight:500}.mode-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%;max-width:700px}.mode-tile{padding:1.5rem;background:var(--color-bg-glass);border:2px solid rgba(255,255,255,.2);border-radius:15px;cursor:pointer;transition:all .3s ease;text-align:center}.mode-tile:hover{transform:translateY(-5px);border-color:var(--color-secondary);background:var(--color-bg-glass-light);box-shadow:0 10px 30px #00d9ff4d}.tile-icon{font-size:2.5rem;margin-bottom:.8rem}.tile-title{font-size:1.3rem;font-weight:600;margin-bottom:.8rem;color:#fff}.tile-description{font-size:.9rem;font-weight:400;color:#ffffffb3;line-height:1.4}@media(max-width:768px){.mode-tiles{grid-template-columns:1fr}}.page-wrapper{min-height:calc(100vh - 60px);display:flex;flex-direction:column;max-width:var(--app-max-width);margin:0 auto;padding:var(--content-padding-y) var(--content-padding-x)}.page-header{display:flex;align-items:center;justify-content:center;gap:.8rem;width:100%;margin-bottom:var(--header-spacing)}.page-header-back-button{background:transparent;border:none;color:#fff9;font-size:1.8rem;cursor:pointer;padding:0;transition:color .2s,transform .2s;min-width:auto;line-height:1;flex-shrink:0}.page-header-back-button:hover{color:var(--color-secondary);transform:translate(-3px)}.page-header h2{color:var(--color-primary);font-size:1.8rem;margin:0}.page-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:var(--content-max-width);margin:0 auto;width:100%}.page-subtitle{color:#ffffffb3;font-size:1rem;margin-bottom:var(--section-spacing);text-align:center}.mode-sequence-wrapper{padding:var(--content-padding-y) var(--content-padding-x);padding-top:0}.mode-sequence-wrapper .page-header{padding-top:var(--content-padding-y)}.mode-sequence-wrapper .mode-sequence{flex:1;display:flex;flex-direction:column;width:100%;max-width:var(--content-max-width);margin:0 auto}@media(max-width:768px){.page-header h2,.page-header-back-button{font-size:1.5rem}}.btn{padding:.9rem 1.5rem;font-size:1rem;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;font-weight:600;min-width:100px}.btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px #0000004d}.btn:active{transform:translateY(0)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:#d63651}.btn-facile{background:var(--color-success);color:#fff}.btn-facile:hover{background:#00a854}.btn-difficile{background:var(--color-warning);color:#fff}.btn-difficile:hover{background:#e68600}.btn-rate{background:var(--color-primary);color:#fff}.btn-rate:hover{background:#d63651}.btn-sequence{padding:.8rem 2rem;font-size:1.1rem;background:linear-gradient(135deg,var(--color-secondary),var(--color-primary));color:#fff;border:none;border-radius:25px}.btn-sequence:hover{transform:scale(1.05);box-shadow:0 5px 20px #e9456066}.btn-sequence.playing{background:linear-gradient(135deg,var(--color-primary),var(--color-warning))}.mode-accord{text-align:center;width:100%}.accord-display{position:relative;background:var(--color-bg-glass);border-radius:20px;padding:2.5rem 2rem;margin-bottom:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--color-border);height:160px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}.position-display{font-family:Courier New,monospace;font-size:1.2rem;color:#ffffffb3;letter-spacing:.15em}.notes-display{font-family:Courier New,monospace;font-size:1.3rem;color:var(--color-secondary);letter-spacing:.2em;margin-top:.3rem;min-height:1.5rem;visibility:hidden}.notes-display.visible{visibility:visible}.btn-eye{position:absolute;bottom:10px;right:10px;padding:.5rem;font-size:1.2rem;border:none;background:#ffffff1a;color:#fff9;cursor:pointer;transition:var(--transition-default);border-radius:50%;width:40px;height:40px;min-width:40px;display:flex;align-items:center;justify-content:center}.btn-eye:hover{background:#fff3;color:#fff;transform:none;box-shadow:none}.btn-eye.active{background:#00d9ff33;color:var(--color-secondary)}.buttons{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}.accord-display{position:relative}.accord-display.success{border-color:var(--color-success);box-shadow:0 0 20px #00ff004d}.accord-display.error{border-color:var(--color-error);box-shadow:0 0 20px #ff00004d}.notes-played-compact{padding:.8rem 1.5rem;background:var(--color-bg-glass-light);border-radius:10px;border:1px solid rgba(255,255,255,.1)}.notes-list{font-family:Courier New,monospace;font-size:1.3rem;color:var(--color-secondary);letter-spacing:.2em}.resultat-display{display:flex;align-items:center;justify-content:center;min-height:100px}.resultat-texte-grand{font-size:clamp(2.5rem,8vw,3.5rem);font-weight:700;animation:fadeInScale .3s ease-out}.resultat-texte-grand.reussi{color:var(--color-success)}.resultat-texte-grand.rate{color:var(--color-error)}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.instruction-container{min-height:60px;margin-top:1.5rem}.accord-precedent{text-align:center}.instruction-label{font-size:.75rem;color:#fff6;margin-bottom:.4rem;font-weight:400}.accord-recap{padding:.6rem 1rem;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:.3rem;max-width:350px;margin:0 auto;opacity:.7}.accord-recap.reussi{border-color:#00bf6333;background:#00ff0005}.accord-recap.rate{border-color:#f443;background:#ff000005}.accord-nom{font-size:1rem;font-weight:600}.accord-recap.reussi .accord-nom,.accord-recap.reussi .notes-attendues{color:#00bf63cc}.accord-recap.rate .accord-nom,.accord-recap.rate .notes-attendues{color:#f44c}.notes-attendues{font-family:Courier New,monospace;font-size:.85rem;letter-spacing:.1em}.mode-sequence{text-align:center;width:100%;max-width:500px;margin:0 auto;padding:1.5rem;min-height:calc(100vh - 60px);display:flex;flex-direction:column;justify-content:center}.sequence-container{position:relative;height:400px;background:#ffffff0d;border-radius:20px;overflow:hidden;margin-bottom:1.5rem;border:1px solid rgba(255,255,255,.1)}.play-line{position:absolute;left:0;right:0;bottom:28%;height:4px;background:linear-gradient(90deg,transparent,var(--color-secondary),var(--color-primary),transparent);z-index:10;box-shadow:0 0 20px #00d9ff80}.play-line:before{content:"";position:absolute;inset:-20px 0;background:linear-gradient(180deg,transparent,rgba(0,217,255,.1),transparent)}.sequence-track{position:absolute;left:0;right:0;top:0;width:100%;will-change:transform}.sequence-accord{position:absolute;left:50%;transform:translate(-50%);font-size:2rem;font-weight:700;opacity:.5;transition:opacity .3s;white-space:nowrap;text-align:center;width:100%}.sequence-accord .note{color:var(--color-secondary)}.sequence-accord .qualite{color:var(--color-primary);font-size:.85em}.sequence-accord.active{opacity:1;transform:translate(-50%) scale(1.2)}.sequence-accord.valide-reussi{opacity:.8}.sequence-accord.valide-reussi .note,.sequence-accord.valide-reussi .qualite,.sequence-accord.valide-reussi .position,.sequence-accord.valide-reussi .notes{color:var(--color-success)!important}.sequence-accord.valide-rate{opacity:.8}.sequence-accord.valide-rate .note,.sequence-accord.valide-rate .qualite,.sequence-accord.valide-rate .position,.sequence-accord.valide-rate .notes{color:var(--color-error)!important}.sequence-accord.hidden-permanent{opacity:0!important;pointer-events:none}.sequence-accord .position{display:block;font-family:Courier New,monospace;font-size:.5em;color:#fff9;letter-spacing:.1em;margin-top:.2em}.sequence-accord .notes{display:block;font-family:Courier New,monospace;font-size:.45em;color:var(--color-secondary);letter-spacing:.1em;margin-top:.2em;transition:opacity .3s}.sequence-controls{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.control-group{display:flex;align-items:center;gap:.5rem}.control-group label{font-size:.85rem;color:#ffffffb3}.control-group input[type=range]{width:100px;accent-color:var(--color-primary)}.control-group input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}.bpm-value{min-width:45px;text-align:center;font-weight:700;color:var(--color-secondary)}.metronome-indicator{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:#fff3;transition:all .1s;z-index:20}.metronome-indicator.beat{background:var(--color-secondary);box-shadow:0 0 15px var(--color-secondary)}.sequence-container.success-flash{animation:successFlash .5s}.sequence-container.error-flash{animation:errorFlash .5s}@keyframes successFlash{0%,to{border-color:#ffffff1a}50%{border-color:var(--color-success);box-shadow:0 0 30px #00ff0080}}@keyframes errorFlash{0%,to{border-color:#ffffff1a}50%{border-color:var(--color-error);box-shadow:0 0 30px #ff000080}}.mode-midi{text-align:center}.mode-title{color:#ffffffb3;font-size:1rem;font-weight:400;margin-bottom:1rem;letter-spacing:.05em}.midi-device-status{font-size:.85rem;color:var(--color-success);margin-bottom:1rem}.notes-played-compact{padding:.8rem 1.5rem;background:var(--color-bg-glass-light);border-radius:10px;margin-bottom:1.5rem;border:1px solid rgba(255,255,255,.1)}.notes-list{font-size:1.3rem;color:var(--color-secondary);letter-spacing:.1em}.notes-placeholder{font-size:1.2rem;color:#fff6}.accord-display{background:var(--color-bg-glass);border-radius:20px;padding:2.5rem 2rem;margin-bottom:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--color-border);min-height:160px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}.accord-text{font-size:clamp(2.5rem,8vw,4rem);font-weight:700;letter-spacing:.05em;white-space:nowrap;display:flex;align-items:baseline;gap:.1em}.note{color:var(--color-secondary)}.qualite{color:var(--color-primary);font-size:.85em}.position-display{font-size:1.2rem;color:#ffffffb3;letter-spacing:.1em;margin-top:.3rem}.instruction-text{font-size:1.2rem;color:#ffffff80;font-style:normal;font-weight:400}.instruction{margin-top:1.5rem;color:#fff9;font-size:.85rem}@media(max-width:600px){.midi-header{flex-direction:column}.midi-device-info{text-align:center}}.menu-button-container{position:relative;z-index:200}.btn-menu{padding:.6rem .8rem;font-size:1.4rem;border:none;background:transparent;color:#ffffffb3;cursor:pointer;transition:all .3s ease;line-height:1;min-width:auto}.btn-menu:hover{color:#fff;transform:none;box-shadow:none}.dropdown-menu{position:absolute;top:100%;right:0;margin-top:.5rem;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid var(--color-border);border-radius:10px;min-width:150px;overflow:hidden}.dropdown-item{display:block;width:100%;padding:.8rem 1rem;text-align:left;background:none;border:none;color:#fffc;cursor:pointer;transition:background .2s;font-size:.95rem;min-width:0;border-radius:0}.dropdown-item:hover{background:#ffffff1a;transform:none;box-shadow:none}.breadcrumb{display:flex;align-items:center;gap:.5rem;padding:.8rem 0;font-size:.9rem;color:#fff9}.breadcrumb-item{display:inline}.breadcrumb-link{background:none;border:none;color:#ffffffb3;cursor:pointer;padding:0;min-width:auto;font-size:.9rem;transition:color .2s;text-decoration:none}.breadcrumb-link:hover{color:var(--color-secondary);transform:none;box-shadow:none}.breadcrumb-current{color:#ffffffe6;font-weight:500}.breadcrumb-separator{color:#fff6;-webkit-user-select:none;user-select:none}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000;padding:1rem}.modal-content{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:20px;padding:1.5rem;max-width:500px;width:100%;max-height:80vh;overflow-y:auto;border:1px solid var(--color-border)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-header h2{color:var(--color-primary);font-size:1.3rem}.close-btn{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;opacity:.7;min-width:0;padding:0}.close-btn:hover{opacity:1;transform:none;box-shadow:none}.stats-content{line-height:1.6}.stats-section{margin-bottom:1.5rem}.stats-section h3{color:var(--color-primary);font-size:1rem;margin-bottom:.8rem;padding-bottom:.3rem;border-bottom:1px solid rgba(255,255,255,.1)}.stats-category{margin-bottom:1.5rem;padding:1rem;background:var(--color-bg-glass-light);border-radius:10px}.stats-category p{color:#fffc;margin-bottom:.5rem;font-size:.95rem}.stats-category .highlight{font-size:1.2rem;font-weight:700}.separator{color:#fff9;font-weight:400}.position-stat{color:#ffd93d;font-family:Courier New,monospace}.accord-position-line{margin-bottom:.3rem}.accord-position-line:last-child{margin-bottom:0}.no-data{color:#ffffff80;font-style:italic;text-align:center;padding:1rem}.options-content{max-width:100%}.accordion-section{margin-bottom:.5rem;border-radius:10px;overflow:hidden;background:#ffffff08}.accordion-header{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;background:var(--color-bg-glass-light);border:none;color:#fffc;cursor:pointer;width:100%;text-align:left;font-size:.95rem;font-weight:500;transition:all .2s;min-width:auto;border-radius:0}.accordion-header:hover{background:var(--color-bg-glass);color:#fff;transform:none;box-shadow:none}.accordion-header.active{background:#00d9ff26;color:var(--color-secondary)}.accordion-header:after{content:"+";font-size:1.2rem;font-weight:300}.accordion-header.active:after{content:"−"}.accordion-body{padding:1rem}.checkbox-list{display:flex;flex-wrap:wrap;gap:.5rem}.positions-list{margin-top:.5rem;margin-left:1.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.positions-list .checkbox-item{justify-content:flex-start}.positions-list .checkbox-item label{font-family:Courier New,monospace}.checkbox-item{display:flex;align-items:center;gap:.4rem;padding:.4rem .8rem;background:var(--color-bg-glass-light);border-radius:20px;cursor:pointer;transition:background .2s}.checkbox-item:hover{background:var(--color-bg-glass)}.checkbox-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer}.checkbox-item label{font-size:.9rem;color:#ffffffe6;cursor:pointer}.number-input{display:flex;align-items:center;gap:.8rem}.number-input label{color:#fffc;font-size:.9rem}.number-input input[type=number]{width:60px;padding:.5rem;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:var(--color-bg-glass);color:#fff;font-size:1rem;text-align:center}.number-input input[type=number]:focus{outline:none;border-color:var(--color-secondary)}.btn-reset{padding:.6rem 1rem;font-size:.9rem;background:#e9456033;border:1px solid var(--color-primary);border-radius:8px;color:var(--color-primary);cursor:pointer;transition:all .2s;min-width:auto}.btn-reset:hover{background:var(--color-primary);color:#fff;transform:none;box-shadow:none}.about-content{text-align:center}.about-content p{margin-bottom:1rem;color:#fffc;line-height:1.6}.about-content .author{color:var(--color-secondary);font-weight:700;cursor:pointer;text-decoration:none;transition:color .2s}.about-content .author:hover{color:#fff;text-decoration:underline}.about-content .site-link{color:var(--color-primary);text-decoration:none;transition:color .2s}.about-content .site-link:hover{color:#fff;text-decoration:underline}.about-content .opensource{font-size:.85rem;color:#fff9}.tutos-content h3{color:var(--color-primary);margin-bottom:1rem;font-size:1.1rem}.tutos-list{list-style:none;margin-bottom:1.5rem}.tutos-list li{margin-bottom:.8rem}.tutos-list a{color:var(--color-secondary);text-decoration:none;font-family:Courier New,monospace;font-size:1.1rem;transition:color .2s ease}.tutos-list a:hover{color:#fff;text-decoration:underline}.tutos-credit{font-size:.85rem;color:#fff9;border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;margin-top:1rem}.tutos-credit a{color:var(--color-primary);text-decoration:none}.tutos-credit a:hover{text-decoration:underline}.devices-content{display:flex;flex-direction:column;gap:1.5rem}.no-devices{text-align:center;padding:2rem;color:var(--text-secondary)}.no-devices .hint{margin-top:1rem;font-size:.9rem;line-height:1.5}.devices-list{display:flex;flex-direction:column;gap:1rem}.devices-info{font-weight:600;margin-bottom:.5rem}.devices-warning{background:linear-gradient(135deg,#ffc1071f,#ffc1070f);border-left:4px solid #ffc107;padding:1rem 1.2rem;margin-bottom:1rem;border-radius:8px;box-shadow:0 2px 8px #ffc10726}.warning-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;font-size:1rem;color:#ffc107}.warning-icon{font-size:1.3rem;line-height:1}.warning-text{font-size:.9rem;line-height:1.6;color:#ffffffd9;margin:0 0 .8rem}.warning-solution{font-size:.85rem;line-height:1.5;color:#ffffffbf;padding:.6rem .8rem;background-color:#0003;border-radius:6px;margin:0}.warning-solution strong{color:#ffc107}.device-item{display:flex;justify-content:space-between;align-items:center;padding:1.2rem;border:3px solid rgba(255,255,255,.15);border-radius:12px;cursor:pointer;transition:all .2s;background-color:#ffffff08}.device-item:hover{border-color:#ffffff4d;background-color:#ffffff0d;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.device-item.selected{border-color:var(--primary-color);background-color:#6366f11a;box-shadow:0 0 0 1px var(--primary-color),0 4px 12px #6366f14d}.device-item.disconnected{opacity:.5;cursor:not-allowed}.device-item.disconnected:hover{border-color:var(--border-color);background-color:transparent}.device-info{display:flex;flex-direction:column;gap:.3rem}.device-name{font-weight:700;font-size:1.1rem;color:#fffffff2;margin-bottom:.2rem}.device-manufacturer{font-size:.85rem;color:var(--text-secondary)}.device-state{font-size:.85rem;margin-top:.3rem}.device-note{font-size:.8rem;color:var(--text-secondary);font-style:italic;margin-top:.3rem}.virtual-badge{display:inline-block;background-color:#ffc10733;color:#ffc107;padding:.2rem .5rem;border-radius:8px;font-size:.75rem;font-weight:600;margin-left:.5rem;cursor:help;border:1px solid rgba(255,193,7,.3)}.device-selected-badge{background-color:var(--primary-color);color:#fff;padding:.4rem 1rem;border-radius:20px;font-size:.9rem;font-weight:700;box-shadow:0 2px 8px #6366f166;letter-spacing:.3px}.devices-help{margin-top:1rem;padding:1rem;background-color:var(--bg-secondary);border-radius:8px}.devices-help h3{margin:0 0 .8rem;font-size:1rem}.devices-help p{margin:0 0 .5rem;font-size:.9rem}.devices-help ul{margin:0;padding-left:1.5rem;font-size:.9rem;line-height:1.6}.devices-help li{margin:.3rem 0}.app-container{min-height:100vh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.5rem;background:#1a1a2ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);z-index:100;gap:1rem}.app-header>:last-child{margin-left:auto}.app-content{flex:1;display:flex;flex-direction:column}.loading-screen{display:flex;justify-content:center;align-items:center;height:100vh;color:#ffffffb3}@media(max-width:600px){.app-header{padding:.5rem 1rem}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);background-attachment:fixed;min-height:100vh;color:#fff}#root{width:100%;min-height:100vh}:root{--color-primary: #e94560;--color-secondary: #00d9ff;--color-success: #00bf63;--color-warning: #ff9500;--color-error: #ff4444;--color-bg-glass: rgba(255, 255, 255, .1);--color-bg-glass-light: rgba(255, 255, 255, .05);--color-border: rgba(255, 255, 255, .2);--transition-default: all .3s ease;--app-max-width: 1200px;--content-max-width: 800px;--content-padding-x: 2rem;--content-padding-y: 1.5rem;--header-spacing: 2rem;--section-spacing: 1.5rem}@media(max-width:768px){:root{--content-padding-x: 1rem;--content-padding-y: 1rem;--header-spacing: 1.5rem}}.hidden{display:none!important}button{padding:.9rem 1.5rem;font-size:1rem;border:none;border-radius:10px;cursor:pointer;transition:var(--transition-default);font-weight:600;min-width:100px}button:hover{transform:translateY(-3px);box-shadow:0 10px 20px #0000004d}button:active{transform:translateY(0)}