/* ============================================================
   Barre d'onglets mobile des portails — composant partagé
   (Mon espace + portails de section). Markup : inc/portal-tabbar.php.
   ============================================================ */

/* Invisible sur desktop : la navigation y est portée par les colonnes
   latérales des portails. */
.vc-tabbar,
.vc-tabbar-sheet {
	display: none;
}

/* La barre d'administration n'est pas rendue sur les pages de l'app (décision
   serveur dans vc_golf7_is_app_page()) — ces deux règles, valables à toute
   largeur, ne sont que la ceinture et les bretelles : une page en cache
   d'avant le refactoring pourrait encore la contenir. */
body.vc-app #wpadminbar {
	display: none;
}

html:has(body.vc-app) {
	margin-top: 0 !important;
}

@media (max-width: 900px) {

	/* ── Chrome d'application ──
	   Sur une page de l'app (classe `vc-app` posée par le serveur — voir
	   vc_golf7_is_app_page()), le site s'efface : ni header ni footer — la
	   barre d'onglets est la navigation. Le site garde son chrome partout
	   ailleurs (visiteurs, pages classiques).

	   Seuil aligné sur celui du menu principal (header.css /
	   navigation.css, lui aussi à 900px) — pas les 768px d'origine. Entre
	   les deux, une fenêtre d'app installée (souvent plus étroite qu'un
	   onglet de navigateur) gardait le header du site sans que vc-app ne
	   l'efface encore, alors que le menu principal était déjà basculé en
	   mode mobile (recouvrement plein écran) faute de place pour la version
	   horizontale : le membre voyait ce menu-là au lieu de la barre
	   d'onglets de l'app. */
	body.vc-app .vc-header,
	body.vc-app .vc-footer {
		display: none;
	}

	body.vc-app .vc-page-wrapper {
		padding-top: 0;
		min-height: 100vh;
	}

	/* La page respire au-dessus de la barre fixe — safe-area iOS comprise. */
	body.vc-app {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	/* ── La barre ── */
	.vc-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 950;
		display: flex;
		background: var(--vc-color-surface);
		border-top: 1px solid var(--vc-color-border);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.vc-tabbar-item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: var(--vc-space-2) 2px calc(var(--vc-space-2) + 2px);
		border: none;
		background: none;
		font: inherit;
		font-size: 11px;
		line-height: 1;
		color: var(--vc-color-text-muted);
		text-decoration: none;
		cursor: pointer;
		min-width: 0;
	}

	.vc-tabbar-item span {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vc-tabbar-item.is-active {
		color: var(--vc-color-primary);
		font-weight: 600;
	}

	/* Rien ici n'avait d'etat d'appui : le seul retour au doigt etait le voile
	   bleu du navigateur, desormais retire (base.css). On le remplace. */
	.vc-tabbar-item:active {
		background: var(--vc-color-bg-alt);
		color: var(--vc-color-primary);
	}

	/* « Espace » : quitte le portail courant, ce n'est pas un onglet parmi
	   les autres — un liseré la détache du reste de la barre. */
	.vc-tabbar-item--back {
		flex: 0 0 auto;
		padding-inline: var(--vc-space-3);
		border-right: 1px solid var(--vc-color-border-soft);
	}

	/* ── Feuille « Plus » ── */
	.vc-tabbar-sheet {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 960;
	}

	.vc-tabbar-sheet[hidden] {
		display: none;
	}

	.vc-tabbar-sheet-backdrop {
		position: absolute;
		inset: 0;
		background: var(--vc-color-overlay);
	}

	.vc-tabbar-sheet-panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: var(--vc-space-3) var(--vc-space-4)
			calc(var(--vc-space-4) + 64px + env(safe-area-inset-bottom, 0px));
		background: var(--vc-color-surface);
		border-radius: var(--vc-radius-xl) var(--vc-radius-xl) 0 0;
		box-shadow: var(--vc-shadow-lg);
		animation: vc-tabbar-sheet-up var(--vc-duration-base) var(--vc-ease-out);
	}

	/* Bascule de section, en tête de feuille : même famille que les onglets,
	   sous son propre intitulé pour ne pas se confondre avec eux. */
	.vc-tabbar-sheet-group {
		margin-bottom: var(--vc-space-2);
		padding-bottom: var(--vc-space-2);
		border-bottom: 1px solid var(--vc-color-border-soft);
	}

	.vc-tabbar-sheet-heading {
		margin: var(--vc-space-2) var(--vc-space-2) var(--vc-space-1);
		color: var(--vc-color-text-muted);
		font-size: var(--vc-font-size-xs);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: var(--vc-tracking-wide);
	}

	.vc-tabbar-sheet-link {
		display: flex;
		align-items: center;
		gap: var(--vc-space-3);
		padding: var(--vc-space-3) var(--vc-space-2);
		border-radius: var(--vc-radius-md);
		color: var(--vc-color-text);
		font-size: var(--vc-font-size-sm);
		text-decoration: none;
	}

	.vc-tabbar-sheet-link .vc-icon {
		color: var(--vc-color-text-muted);
		flex: 0 0 auto;
	}

	.vc-tabbar-sheet-link.is-active {
		background: var(--vc-color-bg-alt);
		font-weight: 600;
	}

	.vc-tabbar-sheet-link:active {
		background: var(--vc-color-sand);
		color: var(--vc-color-primary);
	}

	.vc-tabbar-sheet-panel .vc-pwa-install {
		margin-top: var(--vc-space-3);
		width: 100%;
	}

	/* Le groupe Gestion vient après les onglets du membre : séparé par le
	   haut, et non par le bas comme la bascule de section en tête. */
	.vc-tabbar-sheet-group--manage {
		margin: var(--vc-space-2) 0 0;
		padding: var(--vc-space-2) 0 0;
		border-top: 1px solid var(--vc-color-border-soft);
		border-bottom: 0;
	}

	/* Les portes vers l'extérieur (site, backoffice), séparées des onglets. */
	.vc-tabbar-sheet-footer {
		margin-top: var(--vc-space-2);
		padding-top: var(--vc-space-2);
		border-top: 1px solid var(--vc-color-border-soft);
	}

	.vc-tabbar-sheet-footer .vc-tabbar-sheet-link {
		color: var(--vc-color-text-muted);
	}
}

@keyframes vc-tabbar-sheet-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vc-tabbar-sheet-panel {
		animation: none;
	}
}

/* ─── Tête de la feuille : poignée et fermeture ─────────────────────────────
 *
 * Le voile refermait déjà le tiroir, mais il ne se voit pas — et sur un
 * téléphone il n'y a pas d'Échap. Sans repère visible, on s'y sentait enfermé.
 */
.vc-tabbar-sheet-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-bottom: var(--vc-space-2);
}

/* La barrette : le signe attendu d'une feuille qu'on peut refermer. */
.vc-tabbar-sheet-grip {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--vc-color-border);
}

.vc-tabbar-sheet-close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--vc-color-cream-2, #f5f5f0);
  color: var(--vc-color-text-muted);
  cursor: pointer;
}

.vc-tabbar-sheet-close:hover,
.vc-tabbar-sheet-close:focus-visible {
  background: var(--vc-color-border-soft);
  color: var(--vc-color-ink);
}

/* ─── Sélecteur de section ──────────────────────────────────────────────────
 *
 * Le même geste que `vc-section-switcher-toggle` sur grand écran : la section
 * ouverte est nommée, les autres se déplient. À plat, la liste poussait le
 * reste de la feuille hors de l'écran dès la troisième section.
 */
.vc-tabbar-switcher-toggle {
  display: flex;
  align-items: center;
  gap: var(--vc-space-3);
  width: 100%;
  padding: var(--vc-space-3);
  border: 1px solid var(--vc-color-border-soft);
  border-radius: var(--vc-radius-md);
  background: var(--vc-color-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vc-tabbar-switcher-toggle:active {
  background: var(--vc-color-bg-alt);
  border-color: var(--vc-color-border);
}

.vc-tabbar-switcher-toggle svg {
  margin-left: auto;
  transition: transform .18s ease;
}

.vc-tabbar-switcher-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.vc-tabbar-switcher-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.vc-tabbar-switcher-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La liste dépliée s'indente sous son bouton, pour qu'on voie qu'elle en
   dépend et non qu'elle continue le menu. */
.vc-tabbar-switcher-list {
  margin-top: var(--vc-space-1);
  padding-left: var(--vc-space-3);
  border-left: 2px solid var(--vc-color-border-soft);
}