Micka\u00ebl Jouss \u2014 Bient\u00f4t en ligne<\/title>\r\n<meta name=\"description\" content=\"Le site de Micka\u00ebl Jouss, pianiste, compositeur et arrangeur, arrive tr\u00e8s prochainement. En attendant, retrouvez les tutos piano sur YouTube.\">\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Tangerine:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');\r\n\r\n*{box-sizing:border-box;margin:0;padding:0;}\r\nhtml,body{height:100%;}\r\nbody{\r\n --mj-ivory:#eef3f9;\r\n --mj-muted:#a99f8c;\r\n --mj-accent:#c9a25e;\r\n --mj-yt:#ff3340;\r\n font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;\r\n color:var(--mj-ivory);\r\n background:linear-gradient(180deg,#080706 0%,#0e0c0a 55%,#13110d 100%);\r\n overflow:hidden;\r\n}\r\n\r\n.mj-page{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;}\r\n\r\n\/* ===== Sc\u00e8ne anim\u00e9e (fond plein \u00e9cran) ===== *\/\r\n.mj-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;\r\n background:radial-gradient(120% 80% at 50% 118%, rgba(201,162,94,.12), transparent 60%);}\r\n.mj-notes{position:absolute;inset:0;}\r\n.mj-note{position:absolute;top:0;border-radius:999px;will-change:transform;opacity:.95;\r\n box-shadow:0 0 12px var(--c),0 0 4px var(--c);}\r\n\r\n\/* ---- Clavier ---- *\/\r\n.mj-kb{position:absolute;left:0;bottom:0;width:100%;z-index:2;}\r\n.mj-kb::before{content:\"\";position:absolute;top:-4px;left:0;width:100%;height:4px;\r\n background:linear-gradient(90deg,#9c7c3e,#e7c98c,#c9a25e,#e7c98c,#9c7c3e);opacity:.5;filter:blur(1px);}\r\n.mj-key{position:absolute;bottom:0;transition:box-shadow .5s ease,transform .08s ease;}\r\n.mj-key--w{top:0;height:100%;\r\n background:linear-gradient(to bottom,#fafcff 0%,#e7ecf5 72%,#cdd5e3 100%);\r\n border-right:1px solid rgba(8,12,22,.55);border-radius:0 0 5px 5px;\r\n box-shadow:inset 0 -7px 12px rgba(10,16,30,.18),inset 0 2px 0 rgba(255,255,255,.7);}\r\n.mj-key--b{top:0;z-index:3;\r\n background:linear-gradient(to bottom,#2b3140 0%,#141822 60%,#080b12 100%);\r\n border-radius:0 0 4px 4px;box-shadow:inset 0 -4px 6px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5);}\r\n.mj-key.mj-press{transform:translateY(2px);}\r\n.mj-glow{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;mix-blend-mode:screen;}\r\n\r\n\/* ---- Voile lisibilit\u00e9 ---- *\/\r\n.mj-veil{position:absolute;inset:0;z-index:1;pointer-events:none;\r\n background:\r\n radial-gradient(80% 60% at 50% 42%, rgba(7,9,18,.78) 0%, rgba(7,9,18,.45) 55%, rgba(7,9,18,0) 100%),\r\n linear-gradient(to bottom, rgba(7,9,18,.35) 0%, rgba(7,9,18,0) 25%);}\r\n\r\n\/* ===== Contenu ===== *\/\r\n.mj-content{position:relative;z-index:3;height:100%;\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;\r\n padding:40px 24px 22vh;}\r\n\r\n.mj-eyebrow{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.32em;\r\n text-transform:uppercase;color:#d8b878;margin-bottom:6px;\r\n opacity:0;animation:mj-up .8s .1s forwards cubic-bezier(.2,.7,.2,1);}\r\n\r\n.mj-name{font-family:'Tangerine',Georgia,serif;font-weight:600;\r\n font-size:clamp(3.6rem,11vw,7rem);line-height:.9;letter-spacing:-.01em;\r\n text-shadow:0 2px 40px rgba(0,0,0,.6);margin-bottom:14px;\r\n opacity:0;animation:mj-up .9s .2s forwards cubic-bezier(.2,.7,.2,1);}\r\n.mj-name .accent{\r\n background:linear-gradient(180deg,#ecd29a,#c9a25e);\r\n -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}\r\n\r\n.mj-status{font-family:'Manrope',sans-serif;font-weight:600;\r\n font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.35;margin-bottom:14px;\r\n opacity:0;animation:mj-up .9s .3s forwards cubic-bezier(.2,.7,.2,1);}\r\n.mj-status .soon{color:#d8b878;}\r\n\r\n.mj-lead{max-width:42ch;font-size:clamp(.98rem,1.6vw,1.1rem);line-height:1.6;color:#c2cbdc;\r\n margin-bottom:34px;opacity:0;animation:mj-up .9s .4s forwards cubic-bezier(.2,.7,.2,1);}\r\n\r\n.mj-btn{display:inline-flex;align-items:center;gap:11px;padding:16px 30px;border-radius:999px;\r\n font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;\r\n background:var(--mj-yt);color:#fff;box-shadow:0 10px 30px -8px rgba(255,51,64,.55);\r\n transition:transform .25s ease,box-shadow .25s ease;\r\n opacity:0;animation:mj-up .9s .5s forwards cubic-bezier(.2,.7,.2,1);}\r\n.mj-btn:hover{transform:translateY(-3px);box-shadow:0 16px 38px -8px rgba(255,51,64,.65);}\r\n.mj-btn__play{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);}\r\n\r\n.mj-meta{display:flex;align-items:center;gap:9px;margin-top:26px;font-size:.84rem;color:var(--mj-muted);\r\n opacity:0;animation:mj-up .9s .6s forwards cubic-bezier(.2,.7,.2,1);}\r\n.mj-dot{width:8px;height:8px;border-radius:50%;background:var(--mj-accent);\r\n box-shadow:0 0 0 0 rgba(201,162,94,.6);animation:mj-pulse 2.4s infinite;}\r\n\r\n@keyframes mj-up{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}\r\n@keyframes mj-pulse{0%{box-shadow:0 0 0 0 rgba(201,162,94,.5);}70%{box-shadow:0 0 0 9px rgba(201,162,94,0);}100%{box-shadow:0 0 0 0 rgba(201,162,94,0);}}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n .mj-eyebrow,.mj-name,.mj-status,.mj-lead,.mj-btn,.mj-meta{opacity:1;animation:none;}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"mj-page\" id=\"mjPage\">\r\n\r\n <div class=\"mj-stage\" aria-hidden=\"true\">\r\n <div class=\"mj-notes\"><\/div>\r\n <div class=\"mj-kb\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"mj-veil\" aria-hidden=\"true\"><\/div>\r\n\r\n <div class=\"mj-content\">\r\n <span class=\"mj-eyebrow\">Pianiste \u00b7 Compositeur \u00b7 Arrangeur<\/span>\r\n <h1 class=\"mj-name\">Micka\u00ebl <span class=\"accent\">Jouss<\/span><\/h1>\r\n <p class=\"mj-status\">Le site est en construction.<br><span class=\"soon\">Il arrive tr\u00e8s prochainement.<\/span><\/p>\r\n <p class=\"mj-lead\">En attendant, retrouvez mes tutos piano et mes arrangements des morceaux que vous aimez sur ma cha\u00eene YouTube.<\/p>\r\n\r\n <a class=\"mj-btn\" href=\"https:\/\/www.youtube.com\/@Piano-By-MickaelJouss\" target=\"_blank\" rel=\"noopener\">\r\n <span class=\"mj-btn__play\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\"><path d=\"M8 5v14l11-7z\" fill=\"currentColor\"><\/path><\/svg>\r\n <\/span>\r\n Voir ma cha\u00eene YouTube\r\n <\/a>\r\n\r\n <div class=\"mj-meta\"><span class=\"mj-dot\"><\/span> Tutos & partitions \u00e0 venir<\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n var root=document.getElementById('mjPage');\r\n if(!root) return;\r\n var stage=root.querySelector('.mj-stage');\r\n var kb=root.querySelector('.mj-kb');\r\n var notesLayer=root.querySelector('.mj-notes');\r\n var reduce=window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n var COLORS=['#d8b46a','#c9a25e','#e7c98c'];\r\n var BLACK_AT={0:1,1:1,3:1,4:1,5:1};\r\n\r\n var keys=[],whites=[],blacks=[];\r\n var W=0,H=0,Hk=0,ww=0,hitLine=0;\r\n var active=[],last=null,raf,lastTs=0,spawnAcc=0;\r\n var spawnEvery=360, fall=3.4;\r\n\r\n function hexA(hex,a){\r\n var c=hex.replace('#','');\r\n var r=parseInt(c.substr(0,2),16),g=parseInt(c.substr(2,2),16),b=parseInt(c.substr(4,2),16);\r\n return 'rgba('+r+','+g+','+b+','+a+')';\r\n }\r\n\r\n function build(){\r\n W=stage.clientWidth; H=stage.clientHeight;\r\n if(W<10||H<10) return false;\r\n Hk=Math.max(70,Math.min(130,Math.round(H*0.15)));\r\n var target=Math.max(24,Math.min(42,W\/34));\r\n var numWhite=Math.max(10,Math.round(W\/target));\r\n ww=W\/numWhite;\r\n hitLine=H-Hk;\r\n kb.innerHTML=''; notesLayer.innerHTML='';\r\n keys=[];whites=[];blacks=[];\r\n kb.style.height=Hk+'px';\r\n var bw=ww*0.6, bh=Hk*0.62;\r\n for(var i=0;i<numWhite;i++){\r\n var x=i*ww;\r\n var el=document.createElement('div'); el.className='mj-key mj-key--w';\r\n el.style.left=x+'px'; el.style.width=ww+'px';\r\n var g=document.createElement('span'); g.className='mj-glow'; el.appendChild(g);\r\n kb.appendChild(el);\r\n var k={el:el,glow:g,cx:x+ww\/2,w:ww,type:'w'};\r\n keys.push(k); whites.push(k);\r\n }\r\n for(var j=0;j<numWhite-1;j++){\r\n if(BLACK_AT[j%7]){\r\n var bx=(j+1)*ww-bw\/2;\r\n var bel=document.createElement('div'); bel.className='mj-key mj-key--b';\r\n bel.style.left=bx+'px'; bel.style.width=bw+'px'; bel.style.height=bh+'px';\r\n var bg=document.createElement('span'); bg.className='mj-glow'; bel.appendChild(bg);\r\n kb.appendChild(bel);\r\n var bk={el:bel,glow:bg,cx:bx+bw\/2,w:bw,type:'b'};\r\n keys.push(bk); blacks.push(bk);\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n function lightKey(k,color){\r\n var g=k.glow;\r\n g.style.transition='none';\r\n g.style.background='radial-gradient(130% 110% at 50% 100%, '+color+' 0%, '+hexA(color,0)+' 76%)';\r\n g.style.opacity='1';\r\n void g.offsetWidth;\r\n requestAnimationFrame(function(){ g.style.transition='opacity .55s ease'; g.style.opacity='0'; });\r\n k.el.style.boxShadow='0 0 24px '+hexA(color,.75)+', 0 -3px 16px '+hexA(color,.55);\r\n k.el.classList.add('mj-press');\r\n clearTimeout(k._t);\r\n k._t=setTimeout(function(){ k.el.style.boxShadow=''; k.el.classList.remove('mj-press'); },130);\r\n }\r\n\r\n function pickKeys(){\r\n var out=[],base;\r\n if(last===null){ base=Math.floor(whites.length\/2); }\r\n else { base=Math.min(whites.length-1,Math.max(0,last+(Math.floor(Math.random()*7)-3))); }\r\n last=base;\r\n out.push(whites[base]);\r\n var r=Math.random();\r\n if(r<0.20){\r\n if(whites[base+2]) out.push(whites[base+2]);\r\n if(whites[base+4]) out.push(whites[base+4]);\r\n } else if(r<0.34 && blacks.length){\r\n out.push(blacks[Math.floor(Math.random()*blacks.length)]);\r\n }\r\n return out;\r\n }\r\n\r\n function spawn(){\r\n var set=pickKeys();\r\n var color=COLORS[Math.floor(Math.random()*COLORS.length)];\r\n for(var i=0;i<set.length;i++){\r\n var k=set[i]; if(!k) continue;\r\n var len=46+Math.random()*70;\r\n var nw=Math.max(5,k.w*(k.type==='b'?0.4:0.42));\r\n var el=document.createElement('div'); el.className='mj-note';\r\n el.style.width=nw+'px'; el.style.height=len+'px';\r\n el.style.left=(k.cx-nw\/2)+'px';\r\n el.style.setProperty('--c',color);\r\n el.style.background='linear-gradient(to bottom, #0a0a0c 0%, #15120b 32%, '+color+' 100%)';\r\n notesLayer.appendChild(el);\r\n active.push({el:el,k:k,y:-len,len:len,color:color,hit:false,rm:0});\r\n }\r\n }\r\n\r\n function frame(ts){\r\n if(!lastTs) lastTs=ts;\r\n var dt=Math.min(50,ts-lastTs); lastTs=ts;\r\n spawnAcc+=dt;\r\n var se=spawnEvery*(0.8+Math.random()*0.5);\r\n if(spawnAcc>=se){ spawnAcc=0; spawn(); }\r\n var speed=(H+90)\/(fall*1000);\r\n for(var i=active.length-1;i>=0;i--){\r\n var n=active[i];\r\n n.y+=speed*dt;\r\n n.el.style.transform='translateY('+n.y+'px)';\r\n if(!n.hit && (n.y+n.len)>=hitLine){\r\n n.hit=true; lightKey(n.k,n.color);\r\n n.el.style.transition='opacity .22s ease';\r\n n.el.style.opacity='0';\r\n n.rm=ts;\r\n }\r\n if(n.hit && (ts-n.rm)>240){ n.el.remove(); active.splice(i,1); }\r\n else if(n.y>H+40){ n.el.remove(); active.splice(i,1); }\r\n }\r\n raf=requestAnimationFrame(frame);\r\n }\r\n\r\n function start(){ cancelAnimationFrame(raf); lastTs=0; spawnAcc=0; active=[]; raf=requestAnimationFrame(frame); }\r\n\r\n function init(){\r\n if(!build()){ setTimeout(init,120); return; }\r\n if(reduce) return;\r\n start();\r\n }\r\n\r\n var rt;\r\n window.addEventListener('resize',function(){\r\n clearTimeout(rt);\r\n rt=setTimeout(function(){ cancelAnimationFrame(raf); init(); },200);\r\n });\r\n\r\n if(document.readyState==='complete'||document.readyState==='interactive'){ setTimeout(init,40); }\r\n else { document.addEventListener('DOMContentLoaded',function(){ setTimeout(init,40); }); }\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Micka\u00ebl Jouss \u2014 Bient\u00f4t en ligne Pianiste \u00b7 Compositeur \u00b7 Arrangeur Micka\u00ebl Jouss Le site est en construction.Il arrive tr\u00e8s prochainement. En attendant, retrouvez mes tutos piano et mes arrangements des morceaux que vous aimez sur ma cha\u00eene YouTube. Voir ma cha\u00eene YouTube Tutos & partitions \u00e0 venir<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=61"}],"version-history":[{"count":4,"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nMicka\u00ebl Jouss \u2014 Bient\u00f4t en ligne<\/title>\r\n<meta name=\"description\" content=\"Le site de Micka\u00ebl Jouss, pianiste, compositeur et arrangeur, arrive tr\u00e8s prochainement. En attendant, retrouvez les tutos piano sur YouTube.\">\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Tangerine:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');\r\n\r\n*{box-sizing:border-box;margin:0;padding:0;}\r\nhtml,body{height:100%;}\r\nbody{\r\n --mj-ivory:#eef3f9;\r\n --mj-muted:#a99f8c;\r\n --mj-accent:#c9a25e;\r\n --mj-yt:#ff3340;\r\n font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;\r\n color:var(--mj-ivory);\r\n background:linear-gradient(180deg,#080706 0%,#0e0c0a 55%,#13110d 100%);\r\n overflow:hidden;\r\n}\r\n\r\n.mj-page{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;}\r\n\r\n\/* ===== Sc\u00e8ne anim\u00e9e (fond plein \u00e9cran) ===== *\/\r\n.mj-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;\r\n background:radial-gradient(120% 80% at 50% 118%, rgba(201,162,94,.12), transparent 60%);}\r\n.mj-notes{position:absolute;inset:0;}\r\n.mj-note{position:absolute;top:0;border-radius:999px;will-change:transform;opacity:.95;\r\n box-shadow:0 0 12px var(--c),0 0 4px var(--c);}\r\n\r\n\/* ---- Clavier ---- *\/\r\n.mj-kb{position:absolute;left:0;bottom:0;width:100%;z-index:2;}\r\n.mj-kb::before{content:\"\";position:absolute;top:-4px;left:0;width:100%;height:4px;\r\n background:linear-gradient(90deg,#9c7c3e,#e7c98c,#c9a25e,#e7c98c,#9c7c3e);opacity:.5;filter:blur(1px);}\r\n.mj-key{position:absolute;bottom:0;transition:box-shadow .5s ease,transform .08s ease;}\r\n.mj-key--w{top:0;height:100%;\r\n background:linear-gradient(to bottom,#fafcff 0%,#e7ecf5 72%,#cdd5e3 100%);\r\n border-right:1px solid rgba(8,12,22,.55);border-radius:0 0 5px 5px;\r\n box-shadow:inset 0 -7px 12px rgba(10,16,30,.18),inset 0 2px 0 rgba(255,255,255,.7);}\r\n.mj-key--b{top:0;z-index:3;\r\n background:linear-gradient(to bottom,#2b3140 0%,#141822 60%,#080b12 100%);\r\n border-radius:0 0 4px 4px;box-shadow:inset 0 -4px 6px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5);}\r\n.mj-key.mj-press{transform:translateY(2px);}\r\n.mj-glow{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;mix-blend-mode:screen;}\r\n\r\n\/* ---- Voile lisibilit\u00e9 ---- *\/\r\n.mj-veil{position:absolute;inset:0;z-index:1;pointer-events:none;\r\n background:\r\n radial-gradient(80% 60% at 50% 42%, rgba(7,9,18,.78) 0%, rgba(7,9,18,.45) 55%, rgba(7,9,18,0) 100%),\r\n linear-gradient(to bottom, rgba(7,9,18,.35) 0%, rgba(7,9,18,0) 25%);}\r\n\r\n\/* ===== Contenu ===== *\/\r\n.mj-content{position:relative;z-index:3;height:100%;\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;\r\n padding:40px 24px 22vh;}\r\n\r\n.mj-eyebrow{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.32em;\r\n text-transform:uppercase;color:#d8b878;margin-bottom:6px;\r\n opacity:0;animation:mj-up .8s .1s forwards cubic-bezier(.2,.7,.2,1);}\r\n\r\n.mj-name{font-family:'Tangerine',Georgia,serif;font-weight:600;\r\n font-size:clamp(3.6rem,11vw,7rem);line-height:.9;letter-spacing:-.01em;\r\n text-shadow:0 2px 40px rgba(0,0,0,.6);margin-bottom:14px;\r\n opacity:0;animation:mj-up .9s .2s forwards cubic-bezier(.2,.7,.2,1);}\r\n.mj-name .accent{\r\n background:linear-gradient(180deg,#ecd29a,#c9a25e);\r\n -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}\r\n\r\n.mj-status{font-family:'Manrope',sans-serif;font-weight:600;\r\n font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.35;margin-bottom:14px;\r\n opacity:0;animation:mj-up .9s .3s forwards cubic-bezier(.2,.7,.2,1);}\r\n.mj-status .soon{color:#d8b878;}\r\n\r\n.mj-lead{max-width:42ch;font-size:clamp(.98rem,1.6vw,1.1rem);line-height:1.6;color:#c2cbdc;\r\n margin-bottom:34px;opacity:0;animation:mj-up .9s .4s forwards cubic-bezier(.2,.7,.2,1);}\r\n\r\n.mj-btn{display:inline-flex;align-items:center;gap:11px;padding:16px 30px;border-radius:999px;\r\n font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;\r\n background:var(--mj-yt);color:#fff;box-shadow:0 10px 30px -8px rgba(255,51,64,.55);\r\n transition:transform .25s ease,box-shadow .25s ease;\r\n opacity:0;animation:mj-up .9s .5s forwards cubic-bezier(.2,.7,.2,1);}\r\n.mj-btn:hover{transform:translateY(-3px);box-shadow:0 16px 38px -8px rgba(255,51,64,.65);}\r\n.mj-btn__play{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);}\r\n\r\n.mj-meta{display:flex;align-items:center;gap:9px;margin-top:26px;font-size:.84rem;color:var(--mj-muted);\r\n opacity:0;animation:mj-up .9s .6s forwards cubic-bezier(.2,.7,.2,1);}\r\n.mj-dot{width:8px;height:8px;border-radius:50%;background:var(--mj-accent);\r\n box-shadow:0 0 0 0 rgba(201,162,94,.6);animation:mj-pulse 2.4s infinite;}\r\n\r\n@keyframes mj-up{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}\r\n@keyframes mj-pulse{0%{box-shadow:0 0 0 0 rgba(201,162,94,.5);}70%{box-shadow:0 0 0 9px rgba(201,162,94,0);}100%{box-shadow:0 0 0 0 rgba(201,162,94,0);}}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n .mj-eyebrow,.mj-name,.mj-status,.mj-lead,.mj-btn,.mj-meta{opacity:1;animation:none;}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"mj-page\" id=\"mjPage\">\r\n\r\n <div class=\"mj-stage\" aria-hidden=\"true\">\r\n <div class=\"mj-notes\"><\/div>\r\n <div class=\"mj-kb\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"mj-veil\" aria-hidden=\"true\"><\/div>\r\n\r\n <div class=\"mj-content\">\r\n <span class=\"mj-eyebrow\">Pianiste \u00b7 Compositeur \u00b7 Arrangeur<\/span>\r\n <h1 class=\"mj-name\">Micka\u00ebl <span class=\"accent\">Jouss<\/span><\/h1>\r\n <p class=\"mj-status\">Le site est en construction.<br><span class=\"soon\">Il arrive tr\u00e8s prochainement.<\/span><\/p>\r\n <p class=\"mj-lead\">En attendant, retrouvez mes tutos piano et mes arrangements des morceaux que vous aimez sur ma cha\u00eene YouTube.<\/p>\r\n\r\n <a class=\"mj-btn\" href=\"https:\/\/www.youtube.com\/@Piano-By-MickaelJouss\" target=\"_blank\" rel=\"noopener\">\r\n <span class=\"mj-btn__play\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\"><path d=\"M8 5v14l11-7z\" fill=\"currentColor\"><\/path><\/svg>\r\n <\/span>\r\n Voir ma cha\u00eene YouTube\r\n <\/a>\r\n\r\n <div class=\"mj-meta\"><span class=\"mj-dot\"><\/span> Tutos & partitions \u00e0 venir<\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n var root=document.getElementById('mjPage');\r\n if(!root) return;\r\n var stage=root.querySelector('.mj-stage');\r\n var kb=root.querySelector('.mj-kb');\r\n var notesLayer=root.querySelector('.mj-notes');\r\n var reduce=window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n var COLORS=['#d8b46a','#c9a25e','#e7c98c'];\r\n var BLACK_AT={0:1,1:1,3:1,4:1,5:1};\r\n\r\n var keys=[],whites=[],blacks=[];\r\n var W=0,H=0,Hk=0,ww=0,hitLine=0;\r\n var active=[],last=null,raf,lastTs=0,spawnAcc=0;\r\n var spawnEvery=360, fall=3.4;\r\n\r\n function hexA(hex,a){\r\n var c=hex.replace('#','');\r\n var r=parseInt(c.substr(0,2),16),g=parseInt(c.substr(2,2),16),b=parseInt(c.substr(4,2),16);\r\n return 'rgba('+r+','+g+','+b+','+a+')';\r\n }\r\n\r\n function build(){\r\n W=stage.clientWidth; H=stage.clientHeight;\r\n if(W<10||H<10) return false;\r\n Hk=Math.max(70,Math.min(130,Math.round(H*0.15)));\r\n var target=Math.max(24,Math.min(42,W\/34));\r\n var numWhite=Math.max(10,Math.round(W\/target));\r\n ww=W\/numWhite;\r\n hitLine=H-Hk;\r\n kb.innerHTML=''; notesLayer.innerHTML='';\r\n keys=[];whites=[];blacks=[];\r\n kb.style.height=Hk+'px';\r\n var bw=ww*0.6, bh=Hk*0.62;\r\n for(var i=0;i<numWhite;i++){\r\n var x=i*ww;\r\n var el=document.createElement('div'); el.className='mj-key mj-key--w';\r\n el.style.left=x+'px'; el.style.width=ww+'px';\r\n var g=document.createElement('span'); g.className='mj-glow'; el.appendChild(g);\r\n kb.appendChild(el);\r\n var k={el:el,glow:g,cx:x+ww\/2,w:ww,type:'w'};\r\n keys.push(k); whites.push(k);\r\n }\r\n for(var j=0;j<numWhite-1;j++){\r\n if(BLACK_AT[j%7]){\r\n var bx=(j+1)*ww-bw\/2;\r\n var bel=document.createElement('div'); bel.className='mj-key mj-key--b';\r\n bel.style.left=bx+'px'; bel.style.width=bw+'px'; bel.style.height=bh+'px';\r\n var bg=document.createElement('span'); bg.className='mj-glow'; bel.appendChild(bg);\r\n kb.appendChild(bel);\r\n var bk={el:bel,glow:bg,cx:bx+bw\/2,w:bw,type:'b'};\r\n keys.push(bk); blacks.push(bk);\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n function lightKey(k,color){\r\n var g=k.glow;\r\n g.style.transition='none';\r\n g.style.background='radial-gradient(130% 110% at 50% 100%, '+color+' 0%, '+hexA(color,0)+' 76%)';\r\n g.style.opacity='1';\r\n void g.offsetWidth;\r\n requestAnimationFrame(function(){ g.style.transition='opacity .55s ease'; g.style.opacity='0'; });\r\n k.el.style.boxShadow='0 0 24px '+hexA(color,.75)+', 0 -3px 16px '+hexA(color,.55);\r\n k.el.classList.add('mj-press');\r\n clearTimeout(k._t);\r\n k._t=setTimeout(function(){ k.el.style.boxShadow=''; k.el.classList.remove('mj-press'); },130);\r\n }\r\n\r\n function pickKeys(){\r\n var out=[],base;\r\n if(last===null){ base=Math.floor(whites.length\/2); }\r\n else { base=Math.min(whites.length-1,Math.max(0,last+(Math.floor(Math.random()*7)-3))); }\r\n last=base;\r\n out.push(whites[base]);\r\n var r=Math.random();\r\n if(r<0.20){\r\n if(whites[base+2]) out.push(whites[base+2]);\r\n if(whites[base+4]) out.push(whites[base+4]);\r\n } else if(r<0.34 && blacks.length){\r\n out.push(blacks[Math.floor(Math.random()*blacks.length)]);\r\n }\r\n return out;\r\n }\r\n\r\n function spawn(){\r\n var set=pickKeys();\r\n var color=COLORS[Math.floor(Math.random()*COLORS.length)];\r\n for(var i=0;i<set.length;i++){\r\n var k=set[i]; if(!k) continue;\r\n var len=46+Math.random()*70;\r\n var nw=Math.max(5,k.w*(k.type==='b'?0.4:0.42));\r\n var el=document.createElement('div'); el.className='mj-note';\r\n el.style.width=nw+'px'; el.style.height=len+'px';\r\n el.style.left=(k.cx-nw\/2)+'px';\r\n el.style.setProperty('--c',color);\r\n el.style.background='linear-gradient(to bottom, #0a0a0c 0%, #15120b 32%, '+color+' 100%)';\r\n notesLayer.appendChild(el);\r\n active.push({el:el,k:k,y:-len,len:len,color:color,hit:false,rm:0});\r\n }\r\n }\r\n\r\n function frame(ts){\r\n if(!lastTs) lastTs=ts;\r\n var dt=Math.min(50,ts-lastTs); lastTs=ts;\r\n spawnAcc+=dt;\r\n var se=spawnEvery*(0.8+Math.random()*0.5);\r\n if(spawnAcc>=se){ spawnAcc=0; spawn(); }\r\n var speed=(H+90)\/(fall*1000);\r\n for(var i=active.length-1;i>=0;i--){\r\n var n=active[i];\r\n n.y+=speed*dt;\r\n n.el.style.transform='translateY('+n.y+'px)';\r\n if(!n.hit && (n.y+n.len)>=hitLine){\r\n n.hit=true; lightKey(n.k,n.color);\r\n n.el.style.transition='opacity .22s ease';\r\n n.el.style.opacity='0';\r\n n.rm=ts;\r\n }\r\n if(n.hit && (ts-n.rm)>240){ n.el.remove(); active.splice(i,1); }\r\n else if(n.y>H+40){ n.el.remove(); active.splice(i,1); }\r\n }\r\n raf=requestAnimationFrame(frame);\r\n }\r\n\r\n function start(){ cancelAnimationFrame(raf); lastTs=0; spawnAcc=0; active=[]; raf=requestAnimationFrame(frame); }\r\n\r\n function init(){\r\n if(!build()){ setTimeout(init,120); return; }\r\n if(reduce) return;\r\n start();\r\n }\r\n\r\n var rt;\r\n window.addEventListener('resize',function(){\r\n clearTimeout(rt);\r\n rt=setTimeout(function(){ cancelAnimationFrame(raf); init(); },200);\r\n });\r\n\r\n if(document.readyState==='complete'||document.readyState==='interactive'){ setTimeout(init,40); }\r\n else { document.addEventListener('DOMContentLoaded',function(){ setTimeout(init,40); }); }\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Micka\u00ebl Jouss \u2014 Bient\u00f4t en ligne Pianiste \u00b7 Compositeur \u00b7 Arrangeur Micka\u00ebl Jouss Le site est en construction.Il arrive tr\u00e8s prochainement. En attendant, retrouvez mes tutos piano et mes arrangements des morceaux que vous aimez sur ma cha\u00eene YouTube. Voir ma cha\u00eene YouTube Tutos & partitions \u00e0 venir<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=61"}],"version-history":[{"count":4,"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/www.mickael-jouss.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}