/* Lot « navigation » : barre d'onglets flottante (BarreOnglets.swift) et pages d'onglets gardées en mémoire. */

:root {
  /* hauteur totale réservée par la barre (safeAreaInset(.bottom) : 56 + 8 + zone sûre) : les pages s'en servent pour leur bas */
  --haut-zone-barre: calc(var(--haut-barre, 56px) + var(--marge-bas-barre, 8px) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Barre ---------- */
.ak-barre {
  position: fixed;
  z-index: 50;
  left: 16px;
  right: 16px;
  bottom: calc(var(--marge-bas-barre, 8px) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: var(--ecart-barre, 12px);
  pointer-events: none;            /* seules les bulles et la capsule captent le toucher */
}
.ak-barre--statique { position: relative; left: auto; right: auto; bottom: auto; }
.ak-barre > * { pointer-events: auto; }

.ak-barre button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ak-barre__bulle {
  flex: 0 0 auto;
  width: var(--haut-barre, 56px);
  height: var(--haut-barre, 56px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--couleur-texte);
}
.ak-barre__compte span {
  font: var(--graisse-moyenne, 500) 17px/1 var(--police-sans);
  color: var(--couleur-texte);
}

.ak-barre__onglets {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--haut-barre, 56px);
  border-radius: var(--rayon-capsule, 9999px);
  display: flex;
}

/* capsule de l'onglet actif : label 8 %, padding 6 vertical / 4 horizontal, glisse d'un onglet à l'autre (Mouvement.doux) */
.ak-barre__actif {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 4px;
  width: calc(100% / var(--n) - 8px);
  border-radius: var(--rayon-capsule, 9999px);
  background: var(--voile-texte-08, rgba(243, 239, 232, 0.08));
  transform: translateX(calc(var(--i) * (100% + 8px)));
  transition: transform var(--duree-doux, 454ms) cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: transform var(--duree-doux, 454ms) var(--ressort, ease-out);
  pointer-events: none;
}

.ak-barre__onglet {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--rayon-capsule, 9999px);
  color: var(--couleur-texte-2);
  transition: color 120ms ease-out;
}
.ak-barre__onglet.est-actif { color: var(--couleur-teinte); }

/* états pressés : réponse immédiate à l'appui (style .plain : le contenu s'estompe) */
.ak-barre__onglet:active > *,
.ak-barre__bulle:active > * { opacity: 0.55; }

/* survol discret, pointeur fin seulement */
@media (hover: hover) and (pointer: fine) {
  .ak-barre__onglet:not(.est-actif):hover { color: var(--couleur-texte); }
  .ak-barre__bulle:hover > * { opacity: 0.85; }
}

.ak-barre button:focus-visible {
  outline: 2px solid var(--couleur-teinte);
  outline-offset: -4px;
}
.ak-barre__bulle:focus-visible { outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ak-barre__actif { transition: none; }
}

/* ---------- Pages d'onglets ---------- */
.ak-pages {
  position: fixed;
  inset: 0;
}
.ak-page {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--haut-zone-barre);
  box-sizing: border-box;
}
.ak-page:not(.est-affiche) {
  visibility: hidden;             /* garde la position de défilement (display:none la perd) */
  pointer-events: none;
}

/* ---------- galerie (section navigation) ---------- */
.ak-galerie-nav { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 40px; }
.ak-galerie-nav > h2, .ak-galerie-nav > h3 { margin: 16px 0 4px; font-weight: 500; }
.ak-galerie-nav > h3 { font-size: 15px; color: var(--couleur-texte-2); }
.ak-galerie-nav__note { margin: 0; font: 400 12px/1.3 var(--police-mono); color: var(--couleur-texte-3); }
.ak-galerie-nav__cadre { padding: 16px 0; }
.ak-galerie-nav__onglets { position: relative; height: 320px; border-radius: 16px; overflow: hidden;
  border: 0.5px solid var(--couleur-lisere-verre, rgba(255, 255, 255, 0.1)); }
.ak-galerie-nav__onglets .ak-pages { position: absolute; }
.ak-galerie-nav__onglets .ak-page { padding-bottom: 80px; }
.ak-galerie-nav__onglets .ak-barre { position: absolute; left: 16px; right: 16px; bottom: 8px; }
.ak-galerie-nav__page { padding: 16px; }
.ak-galerie-nav__ligne { margin: 0; padding: 10px 0; border-bottom: 0.5px solid var(--couleur-filet); color: var(--couleur-texte-2); }
.ak-galerie-nav__boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.ak-galerie-nav__bouton {
  height: 40px; padding: 0 16px; border-radius: 20px; border: 0.5px solid var(--couleur-lisere-verre, rgba(255, 255, 255, 0.1));
  background: var(--couleur-surface-2); color: var(--couleur-texte); font: 400 15px/1 var(--police-sans); cursor: pointer;
}
.ak-galerie-nav__login { position: relative; height: 760px; border-radius: 16px; overflow: hidden;
  border: 0.5px solid var(--couleur-lisere-verre, rgba(255, 255, 255, 0.1)); }
.ak-galerie-nav__login .ak-login { min-height: 100%; padding-top: 96px; }