.piano-component-div{display:flex;justify-content:center;height:max-content;width:100%}.piano-component-div div{height:100%!important;width:100%!important}.tableau-accords-div{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;overflow:hidden}.tableau-container{overflow-x:auto}.tableau{width:100%;border-collapse:collapse}.tableau thead{background:#f9fafb}.tableau th,.tableau td{border-right:1px solid #e5e7eb}.col-note{position:sticky;left:0;background:inherit;padding:.75rem 1rem;text-align:left;font-weight:600;color:#374151;z-index:5}.col-chord{min-width:80px;padding:.75rem;text-align:center;font-weight:600;color:#374151}.col-cell{padding:.25rem}.row-even{background:#f9fafb}.row-odd{background:#fff}.chord-btn{width:100%!important;height:3rem;border-radius:.375rem;font-size:.75rem;font-weight:600;border:2px solid transparent;transition:all .2s ease;background:#fff;cursor:pointer}.chord-btn-selected{box-shadow:0 0 0 2px #6366f1;transform:scale(1.05)}.chord-btn-disabled{opacity:.5;cursor:not-allowed;transform:none}.chord-btn-hover:hover{box-shadow:0 4px 6px #0000001a}.chord-btn-hover:active{transform:scale(.95)}.chord-btn-content{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.chord-label{color:#1f2937}.daccords-div-main{min-height:100vh;width:100%;display:flex;justify-content:center;align-items:center}.daccords-div{width:100%}.daccords-div h2{margin:0}.controles-div{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;padding:5px 0}@media (max-width: 768px){.controles-div{display:grid;grid-template-columns:1fr 1fr;gap:4px}}.piano-div{background-color:#dbeafe;position:sticky;top:0;z-index:10;margin-bottom:24px}.tableau-accords-div{width:100%;overflow:auto}.btn-activation-audio{width:200px;background-color:#10b981}.btn-activation-audio:hover{background-color:#059669}.btn-play{color:#000!important;transition:all .2s;width:200px}.legend-card{margin-top:1.5rem;border-radius:.75rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;padding:1rem}.legend-title{font-size:1.125rem;font-weight:600;color:#1f2937;margin-bottom:.75rem}.legend-items{display:flex;flex-wrap:wrap;gap:1rem}.legend-item{display:flex;align-items:center;gap:.5rem}.legend-color{width:1rem;height:1rem;border-radius:.25rem}.legend-label{font-size:.875rem;color:#374151}body{margin:0;font-family:Arial,sans-serif;background-color:#dbeafe;color:#1f2937}button{height:48px;width:80px;color:#000;border-radius:12px;font-weight:600;font-size:1rem}button:hover{cursor:pointer;opacity:.9}.joyeux{background-color:#fef3c7;border:2px solid #fde68a}.triste{background-color:#dbeafe;border:2px solid #93c5fd}.tendu{background-color:#fee2e2;border:2px solid #fca5a5}.mysterieux{background-color:#ede9fe;border:2px solid #c4b5fd}.neutre{background-color:#f3f4f6;border:2px solid #d1d5db}label{display:block;font-size:.875rem;font-weight:600;color:#374151}select{width:100%;padding:.75rem;border:1px solid #d1d5db;border-radius:.5rem;font-size:1rem;background-color:#fff;transition:all .2s ease}select:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px #6366f1}