/* Navigation centrée : disponible même avant l’application principale. */
.eb-menu-dialog{position:fixed;inset:0;margin:auto;max-width:min(92vw,680px);width:680px;max-height:min(82vh,780px);overflow:auto;padding:0;border:1px solid #d9dbe6;border-radius:22px;background:var(--surface,#fff);color:var(--ink,#20233a);box-shadow:0 24px 90px #12152855;z-index:10010}
.eb-menu-dialog::backdrop{background:rgba(16,21,38,.6);backdrop-filter:blur(3px)}
.eb-menu-dialog .mbody{padding:clamp(18px,4vw,32px)}
.eb-menu-dialog .eb-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.eb-menu-dialog .eb-menu-grid a{display:block;padding:12px 14px;border:1px solid #d8dce8;border-radius:12px;text-decoration:none;color:inherit;background:var(--surface-2,#f8f9ff)}
.eb-menu-dialog .eb-menu-grid a:hover,.eb-menu-dialog .eb-menu-grid a:focus-visible{outline:2px solid #7b6cf0;outline-offset:1px}
@media(max-width:520px){.eb-menu-dialog .eb-menu-grid{grid-template-columns:1fr}}

/* Pétillance du logo : chaque bulle naît, monte et éclate indépendamment. */
.topbar .brand svg.mono{overflow:visible}
.topbar .brand svg.mono > circle:nth-of-type(2),
.topbar .brand svg.mono > circle:nth-of-type(3),
.topbar .brand svg.mono > circle:nth-of-type(4){transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.topbar .brand svg.mono > circle:nth-of-type(2){animation:eb-pop-red 3.7s cubic-bezier(.32,.1,.6,1) infinite}
.topbar .brand svg.mono > circle:nth-of-type(3){animation:eb-pop-green 4.9s cubic-bezier(.3,.1,.65,1) -1.6s infinite}
.topbar .brand svg.mono > circle:nth-of-type(4){animation:eb-pop-purple 3.2s cubic-bezier(.35,.1,.6,1) -2.1s infinite}
/* Les positions Y ne font que diminuer durant la phase visible.
   La remise à zéro se produit exclusivement lorsque la bulle est invisible. */
@keyframes eb-pop-red{
  0%,8%{transform:translate(0,5px) scale(.2);opacity:0}
  15%{transform:translate(0,1px) scale(.8);opacity:1}
  43%{transform:translate(-4px,-10px) scale(1);opacity:1}
  67%{transform:translate(3px,-22px) scale(.95);opacity:1}
  73%{transform:translate(6px,-28px) scale(1.4);opacity:0}
  74%,96%{transform:translate(6px,-28px) scale(0);opacity:0}
  97%,100%{transform:translate(0,5px) scale(0);opacity:0}
}
@keyframes eb-pop-green{
  0%,12%{transform:translate(0,6px) scale(0);opacity:0}
  20%{transform:translate(-2px,1px) scale(.8);opacity:1}
  46%{transform:translate(5px,-12px) scale(1.1);opacity:1}
  71%{transform:translate(-2px,-27px) scale(.9);opacity:1}
  78%{transform:translate(-5px,-33px) scale(1.5);opacity:0}
  79%,96%{transform:translate(-5px,-33px) scale(0);opacity:0}
  97%,100%{transform:translate(0,6px) scale(0);opacity:0}
}
@keyframes eb-pop-purple{
  0%,6%{transform:translate(0,5px) scale(.1);opacity:0}
  16%{transform:translate(1px,0) scale(1);opacity:1}
  40%{transform:translate(-6px,-10px) scale(.9);opacity:1}
  64%{transform:translate(3px,-20px) scale(1.05);opacity:1}
  71%{transform:translate(7px,-25px) scale(1.6);opacity:0}
  72%,96%{transform:translate(7px,-25px) scale(0);opacity:0}
  97%,100%{transform:translate(0,5px) scale(0);opacity:0}
}
/* Les points du é suivent la même règle : montée, éclatement, retour invisible. */
.topbar .brand .wordmark .e::after{animation:eb-accent-fizz 3.8s linear infinite}
@keyframes eb-accent-fizz{
  0%,9%{opacity:0;transform:translate(-30%,.08em) scale(.3)}
  17%{opacity:1;transform:translate(-30%,0) scale(1)}
  43%{opacity:1;transform:translate(-5%,-.12em) scale(.95)}
  64%{opacity:1;transform:translate(10%,-.30em) scale(1.1)}
  70%{opacity:0;transform:translate(15%,-.42em) scale(1.5)}
  71%,96%{opacity:0;transform:translate(15%,-.42em) scale(0)}
  97%,100%{opacity:0;transform:translate(-30%,.08em) scale(0)}
}
@media(prefers-reduced-motion:reduce){.topbar .brand svg.mono > circle:nth-of-type(2),.topbar .brand svg.mono > circle:nth-of-type(3),.topbar .brand svg.mono > circle:nth-of-type(4),.topbar .brand .wordmark .e::after{animation:none!important;opacity:1!important;transform:none!important}}
:root[data-calme="1"] .topbar .brand svg.mono > circle,:root[data-calme="1"] .topbar .brand .wordmark .e::after{animation:none!important}