/* ==========================================================================
   MOTORAUTO — barre du bas « dock » (mobile). Chargée en dernier : repart de zéro, ignore les anciens styles.
   Structure (créée par js/glassbar.js) :  #mobile-touch-bar (coque fixe, centre) › .dock (le verre, seul élément animé) › .glass-bubble + onglets
   Animations : uniquement transform / opacity (GPU), ressort unique, aucun recalcul de mise en page.
   ========================================================================== */
:root { --dock-spring: cubic-bezier(.34, 1.45, .56, 1); --dock-smooth: cubic-bezier(.22, .9, .3, 1); --bar-h: 72px; }
@media (max-width: 999px) {
  body { padding-bottom: calc(var(--bar-h) + var(--safe-bottom, 0px) + 8px) !important; }
  #mobile-touch-bar { all: unset !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 600 !important;
    display: flex !important; justify-content: center !important; box-sizing: border-box !important; padding: 0 14px max(6px, calc(var(--safe-bottom, 0px) - 12px)) !important;
    pointer-events: none !important; contain: layout style; }
  #mobile-touch-bar .dock { pointer-events: auto; position: relative; isolation: isolate; box-sizing: border-box; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(100%, 420px); height: 64px; padding: 5px; border-radius: 32px; touch-action: pan-y; -webkit-user-select: none; user-select: none;
    transform-origin: 50% 100%; transform: translate3d(0, 0, 0) scale(1); will-change: transform;
    transition: transform .55s var(--dock-spring), opacity .25s linear, background-color .3s linear;
    background: color-mix(in srgb, var(--bg-surface) 46%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
    border: 1px solid color-mix(in srgb, #fff 32%, transparent);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 0 20px rgba(255,255,255,.08), 0 14px 32px -10px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.12); }
  :root[data-tone="dark"] #mobile-touch-bar .dock { border-color: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 34px -10px rgba(0,0,0,.65); }
  #mobile-touch-bar .dock::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background: radial-gradient(120% 90% at 20% -20%, rgba(255,255,255,.34), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.1), transparent 40%); }
  :root[data-tone="dark"] #mobile-touch-bar .dock::before { background: radial-gradient(120% 90% at 20% -20%, rgba(255,255,255,.09), transparent 55%); }
  /* compact : la même barre, rapetissée depuis le centre-bas (jamais décentrée), puis qui regonfle avec un ressort */
  #mobile-touch-bar .dock.compact { transform: translate3d(0, 2px, 0) scale(.68); transition-duration: .45s; }
  #mobile-touch-bar .dock.compact .touch-bar-item span { opacity: 0; transform: translateY(-4px); transition-delay: 0s; }
  #mobile-touch-bar .dock.compact .touch-bar-item svg { transform: translate3d(0, 6px, 0) scale(1.12); }
  /* pendant le mouvement : on retire le flou (le plus coûteux) et on durcit le fond, puis on le rend */
  #mobile-touch-bar .dock.moving { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg-surface) 72%, transparent); }
  /* clavier ouvert : le dock descend */
  body.kb-open #mobile-touch-bar .dock { transform: translate3d(0, 160%, 0) scale(.9); opacity: 0; pointer-events: none; }

  /* bulle de verre : glisse par colonnes (% de sa largeur) avec un ressort, s'étire en route */
  #mobile-touch-bar .glass-bubble { position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 5); border-radius: 28px; pointer-events: none;
    transform: translate3d(calc(var(--i, 0) * 100%), 0, 0); transition: transform .5s var(--dock-spring); will-change: transform; }
  #mobile-touch-bar .glass-bubble i { position: absolute; inset: 0; border-radius: inherit; display: block; transform-origin: 50% 50%;
    background: linear-gradient(180deg, color-mix(in srgb, #fff 42%, transparent), color-mix(in srgb, #fff 14%, transparent)); border: 1px solid rgba(255,255,255,.45);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -2px 6px rgba(0,0,0,.08), 0 6px 16px -6px rgba(0,0,0,.3); }
  :root[data-tone="dark"] #mobile-touch-bar .glass-bubble i { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px -6px rgba(0,0,0,.6); }
  #mobile-touch-bar .glass-bubble.go i { animation: bubbleStretch .5s var(--dock-smooth); }
  #mobile-touch-bar .dock.dragging .glass-bubble { transition: transform .1s linear; }
  @keyframes bubbleStretch { 0% { transform: scale(1, 1); } 35% { transform: scale(1.22, .9); } 100% { transform: scale(1, 1); } }

  /* onglets */
  #mobile-touch-bar .touch-bar-item { all: unset; position: relative; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; color: color-mix(in srgb, var(--color-ink) 72%, transparent); font: 600 .6rem/1 var(--font-body, system-ui, sans-serif); letter-spacing: .01em;
    transition: color .25s linear, transform .3s var(--dock-spring); }
  #mobile-touch-bar .touch-bar-item::before, #mobile-touch-bar .touch-bar-item::after { display: none !important; }
  #mobile-touch-bar .touch-bar-item svg { color: inherit !important; width: 24px; height: 24px; flex: none; stroke-width: 1.8; transition: transform .5s var(--dock-spring); }
  #mobile-touch-bar .touch-bar-item span { display: block; max-width: 100%; overflow: visible; white-space: nowrap; transition: opacity .25s linear .08s, transform .35s var(--dock-spring) .05s; }
  #mobile-touch-bar .touch-bar-item.active, #mobile-touch-bar .touch-bar-item.peek { color: var(--accent); }
  #mobile-touch-bar .touch-bar-item.active svg, #mobile-touch-bar .touch-bar-item.peek svg { transform: translateY(-1px) scale(1.14); }
  #mobile-touch-bar .touch-bar-item:active { transform: scale(.9); }
  #mobile-touch-bar .touch-bar-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 26px; }
  #mobile-touch-bar .touch-dot { position: absolute; top: 9px; right: calc(50% - 18px); }
  #toast-region { bottom: calc(var(--bar-h) + var(--safe-bottom, 0px) + 18px) !important; }
  .to-top { bottom: calc(var(--bar-h) + var(--safe-bottom, 0px) + 18px) !important; }
}
@media (min-width: 1000px) { #mobile-touch-bar { display: none !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #mobile-touch-bar .dock { background: var(--bg-surface); } }
html[data-anim="reduced"] #mobile-touch-bar .dock, html[data-anim="reduced"] #mobile-touch-bar .dock * { transition-duration: .01ms !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { #mobile-touch-bar .dock, #mobile-touch-bar .dock * { transition-duration: .01ms !important; animation: none !important; } }