h3,p{margin:20px}#accords-main-droite,#gammes{background-color:rgba(208,208,136,.5);border-radius:6px;z-index:10;float:left}#lien-exos,#lien-explic{height:20px;position:absolute}.accordeon ul li,ul li{font-family:Arial,sans-serif;list-style-type:none}.footer,.header,.menu li{position:relative}.menu a.active,a{font-weight:700}#soufflet h1,.style_accord,.style_gamme,.styled2{text-shadow:1px 1px 1px #000;box-shadow:inset 2px 2px 3px rgba(255,255,255,.6),inset -2px -2px 3px rgba(0,0,0,.6);text-align:center}#soufflet h1,.footer,.footer-content,.header,.styled2{text-align:center}.footer-link,.menu a,a{text-decoration:none}.footer-link:hover,a{color:#ff5722}body{margin:0;padding:0;font-size:12px;height:100%}.menu a,h2{font-size:1.8rem}h2{margin-top:30px;margin-right:20px}h3{font-size:1.4rem}.overlay,p,ul li{font-size:14px}p{font-family:Arial,sans-serif;line-height:1.5}ul li{padding-top:6px}table{margin-left:0;margin-top:0}#accords-main-droite{margin-left:70px;margin-top:-354px;width:93px;height:auto}#accords-main-droite ul li,#gammes ul li{margin-top:10px}#accords-main-droite ul{margin-left:8px}#arpege-accord{margin-left:7px;margin-top:6px}#gammes{margin-left:-94px;margin-top:317px;width:97px;height:231px}#gammes ul{margin-left:2px}#gammes h2{float:left;margin-top:-24px;margin-left:11px;color:#fff;font-size:20px}#lien-exos{left:60px;top:870px;width:100px}#lien-explic{left:250px;top:850px;width:200px;z-index:2000}#lien-exos a,#lien-explic a{color:#00dcff;font-size:20px;font-weight:700;text-decoration:none}#pousser_tirer{float:left;margin-left:-655px;margin-top:547px;z-index:30;background-color:none}#pousser_tirer2{position:absolute;left:104px;top:129px;z-index:10}#soufflet{width:600px;height:667px;background-image:url("images/soufflet.jpg");background-repeat:no-repeat;padding:0;float:left;margin-left:-54px;margin-top:-127px;background-size:contain}#soufflet h1{font-size:32px;margin:410px 0 0 280px;color:#bec9df;letter-spacing:2px;width:240px;border-radius:10px;background-color:#9c623d;background-image:linear-gradient(to top left,rgba(0,0,0,.2),rgba(0,0,0,.2) 30%,rgba(0,0,0,0))}#legendAccord{float:left;margin-left:4px;margin-top:-46px;font-size:12px;color:#fff;width:100px}#legendSoufflet{float:left;margin-left:-442px;margin-top:571px;font-size:12px;color:#fff}#soufflet h2{float:left;margin-top:-439px;margin-left:43px;z-index:40;color:#fff;font-size:20px;font-weight:500;overflow:hidden}#note_musique{float:left;margin-left:88px;margin-top:-368px}#note_musique img{width:70%}#pbTailleEcran,#pbTailleEcran1,.pousser{display:none}#exterieur-main-droite{margin:70px 0 0 24px}#interieur-main-droite{margin:86px 0 0 -5px}#exterieur-main-gauche{margin:150px 0 0}#interieur-main-gauche{margin:150px 0 0 -118px}.container{width:100%}.accordeon{float:left;margin-bottom:20px;margin-top:135px;margin-left:10px;width:1000px;display:block}.accordeon ul li{font-size:14px;display:list-item;margin:0 0 6px -40px;padding:0}.footer,.header{background-image:url('images/header-diato.webp');background-size:cover;background-position:center;height:150px}.overlay{background:rgba(138,87,54,.4);height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}h1{margin:0 0 10px;font-size:3rem;text-shadow:2px 2px 5px rgba(0,0,0,.9);color:#d0d088}.menu ul{list-style:none;padding:0;display:flex;gap:60px}.menu a{color:#fff;padding:6px 10px;border-radius:5px;transition:.3s}.menu a:hover{background:#ff5722;text-shadow:1px 1px 3px rgba(0,0,0,.8)}.menu a.active{background:#ff5722;color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,.7)}.majuscule{font-size:1px;color:#fff}.bouton,.bouton_accord,.bouton_droite,.bouton_droite_pousser,.bouton_droite_tirer,.bouton_gauche,.bouton_gauche_pousser,.bouton_gauche_tirer{font-size:12px;height:30px;width:30px;border-radius:50%;background-repeat:no-repeat;background-position:center center;cursor:pointer}.bouton_accord,.bouton_droite_pousser,.bouton_gauche_pousser{background-image:none;background-color:#d0d088}.bouton_droite_tirer,.bouton_gauche_tirer{background-image:none;background-color:#33a8ff}.bouton,.bouton_droite,.bouton_gauche{background-image:url("images/bouton.png");color:#000}.tirer{display:block}.consigne{color:red}.accordeon,.clavier-main-droite,.clavier-main-gauche,.footer ul,.main-droite,.main-gauche{display:flex}.clavier-main-droite,.main-droite{background-image:url("images/clavier-main-droite.jpg");background-repeat:no-repeat;width:206px;height:515px;float:left;margin-left:14px;margin-top:-90px;background-size:contain}.clavier-main-gauche,.main-gauche{background-image:url("images/clavier-main-gauche.jpg");background-repeat:no-repeat}.clavier-main-gauche{width:214px;height:664px;z-index:15;float:left;margin-left:-7px;margin-top:-128px;background-size:contain}.clavier-main-gauche h2{float:left;margin-left:50px;margin-top:114px;color:#fff;width:100px;font-size:1.2rem;font-weight:500}.main-gauche{width:289px;height:665px;z-index:0;position:absolute;left:15px;top:40px}.styled_pousser,.styled_tirer{height:140px;background-repeat:no-repeat;border:none;background-size:100%;font-size:2em;background-position:center center;background-color:inherit;cursor:pointer}.styled_tirer{width:661px;color:#fff;font-weight:800;background-image:url("images/tirer.png")}.styled_pousser:hover,.styled_tirer:hover{background-size:101%}.styled_pousser{width:655px;color:#000;font-weight:700;background-image:url("images/pousser.png")}.styled2{border:0;line-height:1.4;width:78px;padding:5px;font-size:1rem;color:#fff;border-radius:10px;background-color:#8a2be2;background-image:linear-gradient(to top left,rgba(0,0,0,.2),rgba(0,0,0,.2) 30%,rgba(0,0,0,0));cursor:pointer}.styled2:hover{background-color:violet}.style_accord:active,.styled2:active,style_gamme:active{box-shadow:inset -2px -2px 3px rgba(255,255,255,.6),inset 2px 2px 3px rgba(0,0,0,.6)}.style_accord,.style_gamme{border:0;line-height:1.4;width:38px;padding:4px;font-size:11px;color:#fff;border-radius:4px;background-color:#4b1a1d;background-image:linear-gradient(to top left,rgba(0,0,0,.2),rgba(0,0,0,.2) 30%rgba(0,0,0,0));cursor:pointer}.style_accord:hover,style_gamme:hover{background:#742336}.style_gamme{width:44px}.footer{height:100px;align-items:flex-end}.footer-content{padding-bottom:10px}.footer-link{color:#d0d088;font-weight:700;transition:color .3s}.footer ul li{display:list-item;padding:0 30px 0 20px;color:#fff}@media (max-width:1379px){#pousser_tirer2,#pt{left:68px;z-index:10}#pt,#pt2{top:45px;position:absolute}#ext-main-droite,#ext-main-gauche,#int-main-droite,#int-main-gauche,#pt,#pt2,#selectNbTouches,.clav-main-gauche{position:absolute}#exo,#exo p{width:300px}#accords-main-droite ul li,#arpege-accord,#gammes ul li{margin-top:4px}h2{font-size:1.4rem;margin-left:30px}.accordeon{float:left;margin-top:170px;margin-bottom:20px;margin-left:13px;width:850px;top:25px}table{font-size:.65rem}td,th{padding:4px 8px}.menu a,.menu a.active{font-size:1.8rem}.bouton,.bouton_accord,.bouton_droite,.bouton_droite_pousser,.bouton_droite_tirer,.bouton_gauche,.bouton_gauche_pousser,.bouton_gauche_tirer{font-size:10px;height:28px;width:28px}.clav-main-droite,.clavier-main-droite,.main-droite{background-image:url("images/clavier-main-droite-mini.jpg");background-repeat:no-repeat;width:168px;height:484px;float:left;margin-left:-2px;margin-top:-178px}.main-droite{top:60px}.clavier-main-gauche{background-image:url("images/clavier-main-gauche-mini.jpg");background-repeat:no-repeat;width:167px;height:552px;z-index:15;margin-left:-4px;margin-top:-175px}.clav-main-gauche,.main-gauche{background-image:url("images/clavier-main-gauche-mini.jpg");background-repeat:no-repeat;width:150px;height:450px}.clavier-main-gauche h2{margin-left:49px;margin-top:109px;font-size:13px;width:83px}.clav-main-gauche{z-index:15;left:0;top:0}.main-gauche{left:28px;top:70px}.styled{line-height:18;width:50px;font-size:.6rem}.styled2{width:60px;font-size:.5rem}#soufflet{width:500px;height:560px;padding:0;margin-left:-13px;margin-top:-179px}#exterieur-main-droite{margin:64px 0 0 30px}#interieur-main-droite{margin:80px 0 0 -6px}#exterieur-main-gauche{margin:140px 0 0 -6px}#interieur-main-gauche{margin:140px 0 0 -108px}#ext-main-droite{top:52px;left:20px}#int-main-droite{top:68px;left:54px}#ext-main-gauche{top:220px;left:63px}#int-main-gauche{top:220px;left:33px}#pousser_tirer2{top:90px}#pt2{left:30px;z-index:20}#soufflet h1{font-size:24px;margin:340px 0 0 250px;width:164px}#soufflet h2{top:-3px;left:30px;font-size:13px}#note_musique{margin-left:237px;margin-top:-410px}#note_musique img{width:69%}#parametrage{width:300px;height:400px;left:210px}#choixExo{left:180px;top:70px;font-size:14px;width:330px}#selectNbTouches{left:180px;top:140px;color:red;font-size:14px}#test1{left:00px;top:0}#exo{left:180px;top:160px}#exo p{font-size:14px}#accords-main-droite{float:left;margin-left:60px;margin-top:-214px;z-index:10;width:78px}#accords-main-droite ul,#gammes ul{margin-left:4px}#arpege-accord{margin-left:10px}#gammes{margin-left:-81px;margin-top:312px;z-index:10;width:77px;height:162px}#gammes h2{margin-top:-15px;margin-left:14px;font-size:13px}#legendAccord,#lien-exos a,#lien-explic a{font-size:9px}#pousser_tirer{margin-left:-630px;margin-top:492px}.style_accord,.style_gamme{line-height:1.1;width:34px;padding:3px;font-size:.5rem}.styled_pousser,.styled_tirer{width:699px;font-size:14px;background-size:70%;height:60px}.styled_pousser:hover,.styled_tirer:hover{background-size:72%}#legendAccord{left:6px;top:-37px;color:#fff;width:67px}#lien-exos{left:33px;top:426px}#lien-explic{left:126px;top:413px}#legendSoufflet{margin-left:-433px;margin-top:493px;font-size:10px;color:#fff}}@media (max-width:1000px){.accordeon{width:900px}}@media (max-width:668px){.container,footer,header{display:none}#pbTailleEcran1{display:block;font-size:24px;color:red;margin:100px auto 0;width:50%}}