/* Verre et navigation de l'iPhone (validés avec Dylan le 27/09/2026, D1 à D9).
   Règle d'Apple : le verre appartient à la couche qui flotte au-dessus du contenu (barre d'onglets, bouton +,
   boutons du haut). Cartes et chiffres restent opaques pour rester lisibles. Couleurs : tokens.css (--glass...). */

/* ---- Matière ---- */
.glass {
  position: relative; background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 1px var(--glass-hi), var(--glass-shadow);
}
/* Lueur qui suit le doigt (position posée par glass.js) */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90px circle at var(--gx, 50%) var(--gy, 50%), var(--glass-glow), transparent 70%);
  opacity: 0; transition: opacity 0.3s;
}
.glass.lit::after { opacity: 1; }
/* « Réduire la transparence » : le verre devient opaque */
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Bouton en verre : rond de 44 pt qui gonfle un peu sous le doigt */
.gbtn {
  height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--spring-snappy-d) var(--spring-snappy);
}
.gbtn.round { width: 44px; padding: 0; }
.gbtn:active { transform: scale(1.08); }

.tb-wrap { display: none; }

@media (max-width: 899px) {
  /* ---- Barre d'onglets flottante et bouton + ---- */
  .tb-wrap {
    position: fixed; z-index: 20; left: 14px; right: 14px; bottom: var(--tb-bottom); height: var(--tabbar-h);
    display: flex; gap: 10px; pointer-events: none;
  }
  .tb-wrap > * { pointer-events: auto; }
  .tabbar {
    flex: 1; min-width: 0; height: 100%; border-radius: 31px; display: flex; padding: 4px; touch-action: none;
    transform-origin: var(--tbo, 12.5%) 50%;
    transition: transform var(--spring-snappy-d) var(--spring-snappy), opacity 0.22s var(--ease);
  }
  .tb-item {
    position: relative; z-index: 1; flex: 1; min-width: 0; border: 0; border-radius: 27px; padding: 0; background: none; cursor: pointer;
    display: grid; justify-items: center; align-content: center; gap: 2px;
    font-size: 10.5px; font-weight: 650; color: var(--text); text-decoration: none;
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition: color 0.2s var(--ease), transform 0.25s var(--ease);
  }
  .tb-item:active { transform: scale(0.94); }
  .tb-item.active { color: var(--accent); }
  .tb-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Pastille : glisse d'un onglet à l'autre (ressort vif), suit le doigt pendant un glissé (TabBar.js) */
  .tb-pill {
    position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); pointer-events: none;
    transform: translateX(calc(var(--i, 0) * 100%)); transition: transform var(--spring-snappy-d) var(--spring-snappy);
  }
  .tb-pill i {
    position: absolute; inset: 0; border-radius: 27px; background: var(--pill);
    box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 1px var(--glass-hi);
    transition: transform 0.3s var(--spring-snappy), background 0.2s;
  }
  .tabbar.dragging .tb-pill i {
    transform: scale(1.14, 1.2); background: color-mix(in srgb, var(--pill) 60%, transparent);
    box-shadow: inset 0 0 0 1px var(--glass-hi), 0 6px 20px rgba(0, 0, 0, 0.2);
  }
  /* Barre réduite (défilement vers le bas) : un rond avec l'onglet ouvert */
  .tb-mini {
    position: absolute; left: 0; top: 0; width: var(--tabbar-h); height: var(--tabbar-h); border: 0; border-radius: 50%;
    display: grid; place-items: center; color: var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: scale(0.5); pointer-events: none;
    transition: transform var(--spring-snappy-d) var(--spring-snappy), opacity 0.2s;
  }
  .tb-wrap.min .tabbar { transform: scale(0.3); opacity: 0; pointer-events: none; }
  /* Verre invisible : pas de flou à calculer */
  .tb-wrap.min .tabbar, .tb-wrap:not(.min) .tb-mini { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tb-wrap.min .tb-mini { opacity: 1; transform: none; pointer-events: auto; }
  .fab {
    flex: none; width: var(--tabbar-h); height: var(--tabbar-h); border: 0; border-radius: 50%;
    display: grid; place-items: center; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
    background: color-mix(in srgb, var(--accent-bg) 78%, transparent);
    transition: transform var(--spring-snappy-d) var(--spring-snappy);
  }
  .fab:active { transform: scale(1.1); }
  .fab .icon { stroke-width: 2.6; }
  body.sheet-open .tb-wrap { pointer-events: none; }

}