/* BABILO BARRE SUPERIEURE V33 : agrandissement modere, aucun style de jeu modifie. */
#app .babilo-top-shell { width:100%; position:relative; z-index:55; }
#app .babilo-top-shell > header.appbar {
  min-height:82px;
  padding:10px 16px;
  gap:10px;
  box-sizing:border-box;
}
#app .babilo-top-shell .brand { flex:0 0 auto; gap:9px; }
#app .babilo-top-shell .brand img { width:54px; height:57px; object-fit:contain; }
#app .babilo-top-shell .brand b { font-size:27px; line-height:1.08; }
#app .babilo-top-shell .brand small { font-size:12px; line-height:1.25; }
#app .babilo-top-shell .mainnav {
  flex:1 1 380px;
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  gap:5px;
  justify-content:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  padding:4px 1px;
}
#app .babilo-top-shell .mainnav button {
  flex:0 0 auto;
  min-height:37px;
  padding:9px 10px;
  font-size:13.5px;
  line-height:1.15;
  border-radius:10px;
  white-space:nowrap;
}
#app .babilo-top-shell .hud { flex:0 0 auto; gap:7px; }
#app .babilo-top-shell .hud > span { font-size:13.5px; }
#app .babilo-top-shell #accountBtn { font-size:13px; padding:8px 11px; }
#app .babilo-top-shell #accountBtn small { font-size:11px; }
#app .babilo-top-shell #siteTicker { min-height:40px; height:auto; padding:6px 13px; gap:12px; box-sizing:border-box; }
#app .babilo-top-shell .site-ticker-speaker { font-size:18px; }
#app .babilo-top-shell #siteTickerText { font-size:15.5px; font-weight:750; line-height:1.4; }
#app .babilo-top-shell #siteTickerText { will-change:transform; }
#app .babilo-top-shell button:focus-visible, #babilo-top-reveal:focus-visible,
#babilo-barre-mode:focus-visible { outline:3px solid #ffda54; outline-offset:2px; }
#babilo-top-reveal { display:none; }
#babilo-top-reveal .babilo-arrow { display:inline-block; transition:transform .2s ease; }
#babilo-topbar-setting { margin-top:14px; }
#babilo-topbar-setting select {
  font:inherit;
  font-size:16px;
  min-height:42px;
  padding:7px 11px;
  background:#fff;
  color:#074c75;
  border:2px solid #75c8ea;
  border-radius:10px;
  max-width:100%;
}
#babilo-topbar-setting .babilo-barre-hint { display:block; font-size:13px; line-height:1.45; margin-top:7px; opacity:.75; }
/* Mode barre style Windows : petite languette visible, ouverture au survol ou clic. */
body.babilo-barre-auto #app > .babilo-top-shell {
  position:fixed;
  inset:0 0 auto 0;
  transform:translateY(calc(-100% - 2px));
  transition:transform .24s ease;
  z-index:150;
  filter:drop-shadow(0 5px 9px rgba(0,29,54,.45));
}
body.babilo-barre-auto #app > .babilo-top-shell:hover,
body.babilo-barre-auto #app > .babilo-top-shell:focus-within,
body.babilo-barre-auto #app > .babilo-top-shell.babilo-open { transform:translateY(0); }
body.babilo-barre-auto #babilo-top-reveal {
  display:block;
  position:absolute;
  left:50%; bottom:-33px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#0a92d0,#075083);
  color:#fff;
  border:2px solid #80daff;
  border-top:0;
  box-shadow:0 5px 13px #001d4270;
  border-radius:0 0 12px 12px;
  padding:6px 16px 7px;
  min-height:33px;
  min-width:100px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
body.babilo-barre-auto #app > .babilo-top-shell.babilo-open #babilo-top-reveal .babilo-arrow { transform:rotate(180deg); }
@media(max-width:1100px){
 #app .babilo-top-shell > header.appbar { gap:8px; padding:9px 11px; }
 #app .babilo-top-shell .mainnav { justify-content:flex-start; }
 #app .babilo-top-shell .brand img { width:47px; height:50px; }
 #app .babilo-top-shell .brand b { font-size:24px; }
}
@media(max-width:650px){
 #app .babilo-top-shell > header.appbar { flex-wrap:wrap; min-height:0; padding:8px; }
 #app .babilo-top-shell .brand { flex:1 1 48%; }
 #app .babilo-top-shell .hud { flex:0 1 auto; }
 #app .babilo-top-shell .mainnav { flex:1 1 100%; order:3; }
 #app .babilo-top-shell .mainnav button { min-height:39px; font-size:14px; }
 #app .babilo-top-shell #siteTickerText { font-size:14px; }
}
@media(prefers-reduced-motion:reduce){
 body.babilo-barre-auto #app > .babilo-top-shell { transition:none; }
}