/* interface.css — le look commun du jeu (menu et partie) : fond vivant, cartes, boutons,
   icônes animées, médailles, étoiles, avatars, petites animations. */
@font-face { font-family: "Archivo Black"; src: url("../assets/fonts/ArchivoBlack-Regular.ttf"); }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Variable.ttf"); font-weight: 100 900; }
:root {
  --or: #FFB23E; --or2: #C9822A; --bleu: #52C4F5; --bleu2: #2B8FC4; --encre: #F3F1EC; --gris: #8C92A3;
  --fond: #06070d; --carte: rgba(18, 21, 31, .82); --carte-pleine: #12151f; --ligne: rgba(255, 255, 255, .08); --ligne2: rgba(255, 255, 255, .14);
  --bronze: #D08A4E; --argent: #C3CAD6; --diamant: #8BE6FF; --rouge: #FF5A5A;
  --ressort: cubic-bezier(.2, 1.6, .4, 1); --doux: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { background: var(--fond); }
body { margin: 0; background: transparent; color: var(--encre); font-family: Inter, system-ui, sans-serif; }   /* transparent : laisse voir le fond vivant */
[hidden] { display: none !important; }
button { font-family: inherit; }

/* ── fond : deux aurores (or = main droite, bleu = main gauche) qui dérivent, et des notes qui montent ── */
.fond-vivant { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, #0d1224 0%, var(--fond) 60%); }
.fond-vivant i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .22; }
.fond-vivant .aurore-or { width: 52vw; height: 40vw; left: -10vw; top: -12vw; background: var(--or); animation: derive 26s ease-in-out infinite alternate; }
.fond-vivant .aurore-bleu { width: 56vw; height: 44vw; right: -14vw; top: 10vw; background: var(--bleu); animation: derive 32s ease-in-out infinite alternate-reverse; opacity: .18; }
.fond-vivant canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes derive { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, 5vw) scale(1.12); } 100% { transform: translate(-4vw, 9vw) scale(.94); } }

/* ── le clavier signature : chaque clic joue une note et allume sa touche ── */
.clavier-deco { display: flex; height: 34px; gap: 2px; position: relative; margin: 0 0 22px; user-select: none; }
.clavier-deco .bl { flex: 1; background: linear-gradient(#e9e6df, #cfcabf); border-radius: 0 0 5px 5px; transition: background .5s, transform .5s; }
.clavier-deco .no { position: absolute; top: 0; height: 21px; background: linear-gradient(#272b38, #0c0e14); border-radius: 0 0 3px 3px; transition: background .5s; }
.clavier-deco .on.bl { background: linear-gradient(#FFD27A, var(--or)); transform: translateY(2px); transition: none; }
.clavier-deco .on.no { background: linear-gradient(#7FD8FF, var(--bleu2)); transition: none; }

/* ── cartes et boutons ── */
.carte-verre { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 40%), var(--carte); border: 1px solid var(--ligne);
               border-radius: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bouton { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; font: 700 15px Inter, sans-serif;
          padding: 11px 16px; border-radius: 13px; border: 1px solid var(--ligne2); background: rgba(30, 34, 46, .9); color: var(--encre);
          cursor: pointer; text-decoration: none; transition: transform .25s var(--ressort), border-color .2s, background .2s; }
.bouton:hover { border-color: rgba(255,255,255,.28); transform: translateY(-2px); }
.bouton:active { transform: translateY(1px) scale(.97); transition-duration: .08s; }
.bouton .ic { width: 22px; height: 22px; flex: none; }
.bouton.go { background: linear-gradient(180deg, #FFC766, var(--or)); border-color: var(--or); color: #2B1700; box-shadow: 0 6px 0 var(--or2); }
.bouton.go:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--or2); }
.bouton.go:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--or2); }
.bouton.danger { border-color: rgba(255, 90, 90, .3); color: #ffb1b1; background: rgba(40, 16, 20, .9); }
.bouton.danger:hover { border-color: var(--rouge); }
.vague-clic { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: scale(0); pointer-events: none;
              animation: vague-clic .55s var(--doux) forwards; }
@keyframes vague-clic { to { transform: scale(1); opacity: 0; } }

/* ── icônes animées : au repos, elles bougent au survol (.vit) ou en continu (.vif) ── */
.ic { display: block; overflow: visible; }
.ic .m { transform-box: view-box; animation-play-state: paused; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.vit:hover .ic .m, .vit:focus-visible .ic .m, .ic.vif .m, .vif .ic .m { animation-play-state: running; }
.a-scintille { animation: ic-scintille 1.6s; } @keyframes ic-scintille { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(8deg); } }
.a-secoue { animation: ic-secoue .9s; } @keyframes ic-secoue { 0%,60%,100% { transform: rotate(0); } 10%,30%,50% { transform: rotate(-9deg); } 20%,40% { transform: rotate(9deg); } }
.a-saute { animation: ic-saute 1s; } @keyframes ic-saute { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } 55% { transform: translateY(0); } 70% { transform: translateY(-2px); } }
.a-balance { animation: ic-balance 2s; } @keyframes ic-balance { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.a-flotte { animation: ic-flotte 2.4s; } @keyframes ic-flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.a-onde { animation: ic-onde 1.2s; } @keyframes ic-onde { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.12); } }
.a-tourne { animation: ic-tourne 3s linear; } @keyframes ic-tourne { to { transform: rotate(360deg); } }
.a-pulse { animation: ic-pulse 1.3s; } @keyframes ic-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.a-bascule { animation: ic-bascule 1.4s; } @keyframes ic-bascule { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 70% { transform: rotate(8deg); } }
.a-rebond { animation: ic-rebond 1s; } @keyframes ic-rebond { 0%,100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-6px) scale(1.02, .98); } 60% { transform: translateY(0) scale(1.06, .92); } 75% { transform: scale(.98, 1.02); } }
.a-pendule { animation: ic-pendule 1.8s; } @keyframes ic-pendule { 0%,100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 75% { transform: rotate(-16deg); } }
.a-flamme { animation: ic-flamme .5s; } @keyframes ic-flamme { 0%,100% { transform: scale(1) skewX(0); } 33% { transform: scale(1.06, .94) skewX(3deg); } 66% { transform: scale(.95, 1.08) skewX(-3deg); } }
.a-chute { animation: ic-chute 1.4s; } @keyframes ic-chute { 0%,100% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(9px); opacity: 0; } 41% { transform: translateY(-9px); opacity: 0; } 65% { transform: translateY(0); opacity: 1; } }
.a-sautille { animation: ic-sautille .9s; } @keyframes ic-sautille { 0%,100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-4px) scale(1.04, .96); } 55% { transform: translateY(0) scale(1.06, .92); } 75% { transform: translateY(-2px); } }
.a-hurle { animation: ic-hurle 1.4s; } @keyframes ic-hurle { 0%,100% { transform: rotate(0); } 30%,70% { transform: rotate(-14deg) translateY(-2px); } 50% { transform: rotate(-12deg) translateY(-3px) scale(1.04); } }
.a-dandine { animation: ic-dandine 1.2s; } @keyframes ic-dandine { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg) translateX(-1px); } 75% { transform: rotate(8deg) translateX(1px); } }
.a-retourne { animation: ic-retourne 1.6s; } @keyframes ic-retourne { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
.a-drapeau { animation: ic-drapeau .8s; } @keyframes ic-drapeau { 0%,100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-8deg) scaleX(.9); } }
.a-coucou { animation: ic-coucou .9s; } @keyframes ic-coucou { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 75% { transform: rotate(14deg); } }
.a-coucou2 { animation: ic-coucou .9s .2s; }
.a-deroule { animation: ic-deroule 1.6s; } @keyframes ic-deroule { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.12) skewX(-4deg); } }
.a-vitesse { animation: ic-vitesse .6s; } @keyframes ic-vitesse { 0%,100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(-5px); opacity: .2; } }
.a-ecrase { animation: ic-ecrase 1s; } @keyframes ic-ecrase { 0%,100% { transform: scale(1); } 40% { transform: scale(1.08, .86); } 70% { transform: scale(.97, 1.04); } }
.a-ondule { animation: ic-ondule 2s; } @keyframes ic-ondule { 0%,100% { transform: skewX(0); } 25% { transform: skewX(-7deg); } 75% { transform: skewX(7deg); } }
.a-tentacule { animation: ic-tentacule 1s; } @keyframes ic-tentacule { 0%,100% { transform: skewX(0) scaleY(1); } 50% { transform: skewX(10deg) scaleY(.92); } }
.a-goutte { animation: ic-goutte 1.4s ease-in; } @keyframes ic-goutte { 0%,100% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(14px); opacity: 0; } 46% { transform: translateY(-2px) scale(.5); opacity: 0; } 70% { transform: translateY(0) scale(1); opacity: 1; } }
.a-machoire { animation: ic-machoire .4s; } @keyframes ic-machoire { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.a-flex { animation: ic-flex 1.2s; } @keyframes ic-flex { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }
.a-aile { animation: ic-aile .45s; } @keyframes ic-aile { 0%,100% { transform: rotate(0) scaleY(1); } 50% { transform: rotate(18deg) scaleY(.7); } }
.a-aile2 { animation: ic-aile2 .45s; } @keyframes ic-aile2 { 0%,100% { transform: rotate(0) scaleY(1); } 50% { transform: rotate(-18deg) scaleY(.7); } }
.a-fumee { animation: ic-fumee 1.8s; } @keyframes ic-fumee { 0%,100% { transform: translateY(0) scale(1); opacity: 1; } 45% { transform: translateY(-7px) scale(1.15); opacity: 0; } 46% { transform: translateY(5px) scale(.7); opacity: 0; } }
.a-orbite { animation: ic-tourne 2.4s linear; }
.a-clignote { animation: ic-clignote 2.4s; } @keyframes ic-clignote { 0%,44%,52%,100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
.a-vague { animation: ic-vague 1.8s; } @keyframes ic-vague { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(3px) rotate(-3deg); } }
.a-fleche { animation: ic-fleche 1.6s; } @keyframes ic-fleche { 0%,100% { transform: translate(0, 0); opacity: 1; } 20% { transform: translate(14px, -14px); opacity: 0; } 40% { transform: translate(0, 0); opacity: 1; } 48% { transform: rotate(-4deg); } 56% { transform: rotate(3deg); } 64% { transform: rotate(0); } }
.a-salut { animation: ic-salut 1.4s; } @keyframes ic-salut { 0%,100% { transform: translateY(0) rotate(0); } 40%,60% { transform: translateY(-5px) rotate(-14deg); } }
.a-picore { animation: ic-picore .9s; } @keyframes ic-picore { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(18deg); } }
.a-rampe { animation: ic-rampe 1.6s; } @keyframes ic-rampe { 0%,100% { transform: translateX(0) scaleX(1); } 50% { transform: translateX(2px) scaleX(1.05); } }
.a-baguettes { animation: ic-baguettes .5s; } @keyframes ic-baguettes { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
.a-baguettes2 { animation: ic-baguettes2 .5s .25s; } @keyframes ic-baguettes2 { 0%,100% { transform: rotate(0); } 50% { transform: rotate(18deg); } }
.a-oreille { animation: ic-oreille 1.6s; } @keyframes ic-oreille { 0%,70%,100% { transform: rotate(0); } 80% { transform: rotate(-16deg); } 90% { transform: rotate(6deg); } }
.a-oreille2 { animation: ic-oreille2 1.6s .3s; } @keyframes ic-oreille2 { 0%,70%,100% { transform: rotate(0); } 80% { transform: rotate(16deg); } 90% { transform: rotate(-6deg); } }
.a-tremble { animation: ic-tremble .18s linear; } @keyframes ic-tremble { 0%,100% { transform: translate(0, 0); } 25% { transform: translate(-.8px, .5px); } 75% { transform: translate(.8px, -.5px); } }
.a-nuage { animation: ic-nuage 3s; } @keyframes ic-nuage { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.a-bat { animation: ic-bat 1s; } @keyframes ic-bat { 0%,40%,100% { transform: scale(1); } 15% { transform: scale(1.16); } 28% { transform: scale(1.06); } }

/* ── étoiles de score ── */
.et-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; }
.et-svg path { fill: #2a2f3e; stroke: #2a2f3e; }
.et-svg.on path { fill: var(--or); stroke: var(--or); }
.et-svg.pop { animation: et-pop .6s var(--ressort) both; }
@keyframes et-pop { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }

/* ── médailles ── */
.med { display: block; width: 100%; height: auto; overflow: visible; transition: transform .35s var(--ressort); }
.med .eclat { animation: med-eclat 5s ease-in-out infinite; }
.med.non { filter: grayscale(1) brightness(.55); }
.med.non .eclat, .med.secret .eclat { display: none; }
.med.secret { filter: grayscale(.4) brightness(.6); }
@keyframes med-eclat { 0%,70% { transform: translateX(-30px) rotate(25deg); } 100% { transform: translateX(140px) rotate(25deg); } }

/* ── avatars : ils respirent et clignent des yeux ; .joue = ils jouent de leur instrument ── */
.av { position: relative; }
.av svg { width: 100%; height: 100%; display: block; overflow: visible; }
.av svg * { transform-box: view-box; }
.av .av-tete { transform-origin: 50px 72px; animation: av-respire 3.6s ease-in-out infinite; }
.av .av-yeux { animation: av-cligne 5.2s infinite; }
.av .av-notes { opacity: 0; }
.av .av-eclat { animation: av-scintille 3s ease-in-out infinite; }
@keyframes av-respire { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-.6px) scale(1.012); } }
@keyframes av-cligne { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes av-scintille { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
.av.joue .av-tete, .vit:hover .av .av-tete { animation: av-hoche .52s ease-in-out infinite; }
@keyframes av-hoche { 0%,100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-4deg) translateY(-1px); } 75% { transform: rotate(4deg) translateY(-1px); } }
.av.joue .av-instru, .vit:hover .av .av-instru { animation: var(--instru) .52s ease-in-out infinite; }
.av.joue .av-notes, .vit:hover .av .av-notes { opacity: 1; }
.av.joue .av-notes > *, .vit:hover .av .av-notes > * { animation: av-note 1.6s ease-out infinite; }
.av-notes > :nth-child(2) { animation-delay: .5s !important; } .av-notes > :nth-child(3) { animation-delay: 1s !important; }
@keyframes av-note { 0% { transform: translate(0, 6px) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(6px, -22px) scale(1.1) rotate(15deg); opacity: 0; } }
@keyframes i-souffle { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-5deg) scale(1.05); } }
@keyframes i-frotte { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(-7px, -4px); } }
@keyframes i-frappe { 0%,100% { transform: rotate(0); } 50% { transform: translateY(3px) scale(1, .96); } }
@keyframes i-gratte { 0%,100% { transform: rotate(0); } 50% { transform: rotate(4deg) translateY(1px); } }
@keyframes i-touche { 0%,100% { transform: translateY(0); } 50% { transform: translateY(1.5px); } }
@keyframes i-baguette { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }
@keyframes i-scratch { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes i-micro { 0%,100% { transform: rotate(0); } 50% { transform: rotate(8deg) translateY(-2px); } }
@keyframes i-pince { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-4deg) translateX(1px); } }
@keyframes i-pouet { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08, .86); } }

/* ── fenêtres, message flottant, confettis ── */
.voile { position: fixed; inset: 0; background: rgba(4, 5, 9, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
         display: grid; place-items: center; padding: 16px; z-index: 20; animation: voile-in .25s var(--doux); }
@keyframes voile-in { from { opacity: 0; } }
.fenetre { background: var(--carte-pleine); border: 1px solid var(--ligne2); border-radius: 22px; padding: 26px; width: min(480px, 100%);
           animation: fenetre-in .45s var(--ressort); }
@keyframes fenetre-in { from { transform: translateY(24px) scale(.94); opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
         background: var(--carte-pleine); border: 1px solid var(--or); color: var(--encre); padding: 10px 18px 10px 12px; border-radius: 14px;
         font-weight: 700; z-index: 30; max-width: calc(100% - 32px); animation: toast-in .5s var(--ressort); }
.toast .ic { width: 30px; height: 30px; flex: none; }
@keyframes toast-in { from { transform: translate(-50%, 30px) scale(.9); opacity: 0; } }
.confettis { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}