*,::after,::before{box-sizing:border-box}html{font-size:16px}body{font-family:Rubik,sans-serif;font-size:16px;margin:0;margin-top:2px;background-color:#121314}main{width:100%;min-height:100%;position:relative;margin:0;max-width:1100px;margin:0 auto;background-color:#121314;min-height:99vh;padding:1em}main.al{background-color:#121314;color:#fff;min-height:auto}main.al article{margin-bottom:0;padding:0}main.al .contact{text-align:center;font-size:1.3em;padding:1em}main.al .contact span{color:#f91;font-weight:700}.player{height:38px;width:100%;position:relative;background-color:#f91;vertical-align:middle;text-align:center;color:#fff;display:flex;align-items:center;justify-content:center}.player audio{height:38px}.player div{margin-right:4px}.player audio,.player div{vertical-align:middle;display:inline-block}.player div{margin-right:5px}.player div span{color:#fff!important;font-weight:700;font-style:italic}.deuxcols .player{position:relative;justify-content:space-between}.deuxcols .player div{text-align:right;flex-grow:2}.tac{text-align:center}article{margin-bottom:1em;background-color:#121314;display:inline-block;position:relative;overflow:auto;height:64vh;width:100%}article h1{font-size:2.8em;color:#fff;margin:5px auto}article p{font-size:1.4em;color:#fff}article .titre{width:100%;text-align:center;padding:16px;background-color:#121314}article .presentation ul{font-size:1.4em;color:#fff;margin:0}article .presentation ol{font-size:1.4em;color:#fff;margin:0;padding-left:22px}article .presentation ol li{padding-left:8px;margin:1em 0}article .presentation .deuxcols{width:100%;display:flex}article .presentation .deuxcols .texte{font-size:1.3em;line-height:1.47em;padding:0 1em 0 0;min-width:50%;flex:2}article .presentation .deuxcols .texte div{max-width:477px}article .presentation .deuxcols .texte h3{color:#f91;margin:0 0 1em}article .presentation .deuxcols .texte p{font-size:inherit;line-height:1em;margin:.5em 0}article .presentation .deuxcols .vote{text-align:right;width:auto}article .presentation .deuxcols .vote table{border-collapse:collapse;background-color:#121314}article .presentation .deuxcols .vote tr.unvote{background-color:#222}article .presentation .deuxcols .vote td{font-size:1.2em;font-weight:700;padding:.5em}article .presentation .deuxcols .vote td svg{width:32px;height:32px;margin:0 6px;cursor:pointer}article .presentation .deuxcols .vote td.oc{color:#f91}article .presentation .deuxcols .vote td:first-child{text-align:right}article .presentation .deuxcols .vote .star{--color:$grisfonce}article .presentation .deuxcols .vote .play{--color:#ffffff}article .presentation .deuxcols .vote .play:hover,article .presentation .deuxcols .vote .star.sel,article .presentation .deuxcols .vote .star:hover{--color:#ff9911}article .presentation .deuxcols .vote .back{fill:#aeaeae;width:25px;height:25px;transition:all .3s}article .presentation .deuxcols .vote .back:hover{fill:#121314}article .presentation .commentaire{padding:1em 0;margin:0}article .presentation .commentaire label{font-weight:600;font-size:1.19em;margin-bottom:3px;display:block;color:#f91}article .presentation .commentaire textarea{width:100%;height:186px;font-size:1.07em;padding:8px;background-color:#121314;color:#fff;border:1px solid #fff}article .presentation .subavis{text-align:center;padding:0 1em 1em;font-size:1.4em}article .presentation .emptyform,article .presentation .error{display:none;text-align:center;margin:2em;padding:2em;border:1px solid #fff;color:#f91;font-size:1.37em}article .presentation .success{display:none;text-align:center;color:#fff;margin-top:1em;padding:2em;border:1px solid #f91}article .presentation .success p{color:#fff;font-size:1.37em}article .presentation .success p a{color:#f91;font-weight:700}article .presentation{padding-bottom:calc(48 * vw / vh)}article .presentation h2{color:#fff;font-size:1.33em}article .presentation span{color:#f91;font-weight:700}article .presentation .cita{margin-top:16px;font-style:italic;text-align:center}article .presentation button{font-family:Rubik,sans-serif;border:none;background-color:inherit;padding:0;color:#f91;font-weight:700;font-size:1em;cursor:pointer;display:inline-block;transition:all .4s ease-out}article .presentation button:hover{color:#d3d3d3}article .presentation span.cap{text-transform:uppercase}article .presentation p.merci{line-height:1.4em}article .presentation p.merci span{font-style:italic;color:inherit;font-weight:inherit}article .presentation button.z{background-color:initial;background-image:linear-gradient(-180deg,#f91,#d70);border-radius:6px;color:#121314;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:0;overflow:hidden;padding:0 20px;pointer-events:auto;position:relative;text-align:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;vertical-align:top;white-space:nowrap;border:0;transition:box-shadow .2s}article .presentation button.z:hover{color:#fff;transition:color .3s ease-out}main.al article{height:auto}footer{position:fixed;bottom:0;left:50%;width:100%;transform:translateX(-50%);padding:0;margin:0;text-align:center}@media screen and (max-width:467px){article{height:59vh}article h1{font-size:2em}article .presentation ol,article p{font-size:1.1em}.player{padding-top:0;height:auto}.presentation{padding-bottom:16px}}@media screen and (max-width:1019px){article .presentation .deuxcols .vote td{padding:8px 6px}}@media screen and (max-width:940px){article .presentation .deuxcols .texte{padding:8px;font-size:1.19em}article .presentation .deuxcols .texte h3{margin:0 0 8px}article .presentation .deuxcols .vote td{padding:6px 4px}article .presentation .deuxcols .vote td svg{width:26px;height:26px;margin:0 2px;cursor:pointer}}@media screen and (max-width:730px){article .titre{padding:0}article .presentation .deuxcols{display:block;padding:0}article .presentation .deuxcols .player{align-items:center;justify-content:center;text-align:center}article .presentation .deuxcols .player div{display:inline-block;text-align:right;flex-grow:0}article .presentation .deuxcols .texte{padding:1em 0;font-size:1.19em;width:100%}article .presentation .deuxcols .texte h3{margin:0 0 8px}article .presentation .deuxcols .texte div{max-width:100%}article .presentation .deuxcols .vote{width:100%;padding:1em 0;text-align:center}article .presentation .deuxcols .vote table{display:inline;width:100%}article .presentation .deuxcols .vote td{padding:6px 4px}article .presentation .deuxcols .vote td svg{margin:0 4px}article .presentation .deuxcols audio{transform:scale(.9)}article .presentation .commentaire textarea{height:149px}}@media screen and (max-width:432px){.player{display:block;text-align:center}.player div{text-align:center}article .presentation .deuxcols{display:block}article .presentation .deuxcols .player{display:block;text-align:center}article .presentation .deuxcols .player div{text-align:center}article .presentation .deuxcols .texte{font-size:1.19em;width:100%}article .presentation .deuxcols .texte h3{margin:0 0 8px}article .presentation .deuxcols .texte div{max-width:100%}article .presentation .deuxcols .vote{width:100%;text-align:center}article .presentation .deuxcols .vote table{display:table;width:100%}article .presentation .deuxcols .vote td{padding:4px 2px;width:auto}article .presentation .deuxcols .vote td svg{width:5vw;height:5vw;margin:0 2px}article .presentation .deuxcols audio{transform:scale(.9)}article .presentation .commentaire textarea{height:133px}}@media screen and (max-width:286px){.player{display:block;text-align:center}.player div{text-align:center}article .presentation .deuxcols audio{transform:scale(.7)}article .presentation .commentaire textarea{height:92px}}.grecaptcha-badge{display:none}div#clavier{text-align:center;background-color:#121314}div#clavier ul{height:17.2em;width:auto;overflow:hidden;margin:0 auto;padding:.5em .3em 0 .3em;position:relative;border:1px solid #160801;border-radius:1em;background:linear-gradient(to bottom right,rgba(0,0,0,.3),rgba(0,0,0,0)),url(/img/wood.png);box-shadow:0 0 50px rgba(0,0,0,.5) inset,0 1px rgba(212,152,125,.2) inset,0 5px 15px rgba(0,0,0,.5);display:inline-block;text-align:left}div#clavier li{margin:0;padding:0;list-style:none;position:relative;float:left}div#clavier li span{font-size:2em;color:#575757;position:absolute;bottom:8px;left:calc(50% - .7em);writing-mode:vertical-rl;transform:rotate(-180deg)}div#clavier li:hover span{color:#60a8cf}div#clavier ul .white{height:16em;width:4em;z-index:1;border-left:1px solid #bbb;border-bottom:1px solid #bbb;border-radius:0 0 5px 5px;box-shadow:-1px 0 0 rgba(255,255,255,.8) inset,0 0 5px #ccc inset,0 0 3px rgba(0,0,0,.2);background:linear-gradient(to bottom,#eee 0,#fff 100%);cursor:pointer}div#clavier ul .white:active,div#clavier ul .white:hover{border-top:1px solid #777;border-left:1px solid #999;border-bottom:1px solid #999;box-shadow:2px 0 3px rgba(0,0,0,.1) inset,-5px 5px 20px rgba(0,0,0,.2) inset,0 0 3px rgba(0,0,0,.2);background:linear-gradient(to bottom,#fff 0,#e9e9e9 100%)}div#clavier .black{height:8em;width:2em;margin:0 0 0 -1em;z-index:2;border:1px solid #000;border-radius:0 0 3px 3px;box-shadow:-1px -1px 2px rgba(255,255,255,.2) inset,0 -5px 2px 3px rgba(0,0,0,.6) inset,0 2px 4px rgba(0,0,0,.5);background:linear-gradient(45deg,#222 0,#555 100%)}div#clavier .black:active,div#clavier .black:hover{box-shadow:-1px -1px 2px rgba(255,255,255,.2) inset,0 -2px 2px 3px rgba(0,0,0,.6) inset,0 1px 2px rgba(0,0,0,.5);background:linear-gradient(to right,#444 0,#222 100%)}div#clavier .a,div#clavier .b,div#clavier .d,div#clavier .e,div#clavier .g{margin:0 0 0 -1em}div#clavier ul li:first-child{border-radius:5px 0 5px 5px}div#clavier ul li:last-child{border-radius:0 5px 5px 5px}@media screen and (max-width:1099px){.b1{display:none}}@media screen and (max-width:907px){.b2{display:none}}@media screen and (max-width:651px){.b3{display:none}}@media screen and (max-width:523px){div#clavier ul{height:29vh}div#clavier ul .white{height:100%;width:12vw}div#clavier ul .black{height:50%;width:6.9vw}div#clavier .a,div#clavier .b,div#clavier .black,div#clavier .d,div#clavier .e,div#clavier .g{margin:0 0 0 -3.45vw}}@media screen and (max-width:467px){div#clavier ul{height:35vh}div#clavier ul .white{height:100%;width:12vw}div#clavier ul .black{height:50%;width:6.9vw}div#clavier .a,div#clavier .b,div#clavier .black,div#clavier .d,div#clavier .e,div#clavier .g{margin:0 0 0 -3.45vw}}@media screen and (max-width:340px){div#clavier ul .white{width:12vw}div#clavier ul .black{width:6.85vw}div#clavier li span{font-size:1.7em}}@media screen and (max-width:286px){div#clavier ul .white{width:12vw}div#clavier ul .black{width:6.8vw}div#clavier li span{font-size:1.3em}}@media screen and (max-height:600px){div#clavier li span{font-size:1.5em}}@media screen and (max-height:437px){div#clavier li span{font-size:1.2em}}