/* ===== Tab selector ===== */
.tab-selector {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  display: flex;
  padding: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  max-height: 100px;
  overflow: hidden;
  opacity: 1;
  transition: padding 0.3s ease, max-width 0.3s ease;
}

.site-header.is-scrolled .tab-selector {
  max-width: 360px;
  padding: 4px;
}

/* Chevauche la limite header/section suivante : la barre d'onglets
   "flotte" à cheval sur les deux fonds grâce à cette marge négative. */
.tab-selector-wrap {
  margin-bottom: -58px;
  position: relative;
  z-index: 2;
  transition: margin-bottom 0.3s ease;
}

.site-header.is-scrolled .tab-selector-wrap {
  margin-bottom: -26px;
  margin-top: -10px;
}

.tab-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 0;
  border-radius: 10px;
  background: var(--accent-index);
  transition: left 0.3s ease, width 0.3s ease, top 0.3s ease, bottom 0.3s ease, background-color var(--fg-fade);
}

/* Fond piloté par body.fg-pro (comme le reste du fondu de premier plan) plutôt
   que par --accent directement : --accent ne bascule réellement qu'au moment
   tardif où data-page change (cf. finishModeSwitch), ce qui ferait "sauter"
   la couleur du tab-indicator sans transition puisque les custom properties ne
   s'animent pas nativement. body.fg-pro bascule dès le clic, en même temps que
   le cercle du header : le tab-indicator fond donc vers sa couleur cible sur la
   même durée/au même instant que l'effet du header. */
body.fg-pro .tab-indicator {
  background: var(--accent-pro);
}

/* Premier positionnement après un (re)rendu du header : aucun effet d'entrée
   (ni glissement ni fondu) — l'indicateur doit apparaître déjà à sa place.
   On coupe donc toute transition tant que is-entering est présent ;
   moveIndicatorTo positionne alors l'indicateur instantanément avant que la
   classe ne soit retirée (voir Site.header.wireInteractions dans js/header.js).
   Le glissement lors d'un changement d'onglet normal (is-entering absent)
   n'est pas concerné : la transition complète s'applique alors normalement. */
.tab-indicator.is-entering {
  transition: none;
}

/* Pendant le suivi continu (JS) lors du collapse/expand du header, left et
   width sont recalculés à chaque frame : leur propre transition CSS n'ajoute
   qu'un retard puisque la cible bouge déjà en douceur (padding/max-width/
   font-size animés ailleurs). On la désactive le temps du suivi. */
.tab-indicator.is-tracking {
  transition: top 0.3s ease, bottom 0.3s ease;
}

.site-header.is-scrolled .tab-indicator {
  top: 4px;
  bottom: 4px;
}

.tab-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: break-word;
  transition: color 0.2s ease, padding 0.3s ease, gap 0.3s ease, font-size 0.3s ease;
}

.tab-btn svg,
.tab-btn img {
  width: 20px;
  height: 20px;
  transition: width 0.3s ease, height 0.3s ease;
}

.site-header.is-scrolled .tab-btn {
  padding: 6px 6px;
  gap: 2px;
  font-size: 11px;
}

.site-header.is-scrolled .tab-btn svg,
.site-header.is-scrolled .tab-btn img {
  width: 16px;
  height: 16px;
}

.tab-btn.active {
  color: #1a1a1a;
}