/* ---------- Barre d'onglets basse ---------- */

:root {
  --barre-tabs: 72px;
  --barre-semnav: 60px;
}

.onglet[hidden] { display: none; }
/* .tabbar__item pose display:grid : sans cette règle, [hidden] (display:none
   du User-Agent) perd face à la règle d'auteur et l'onglet resterait visible */
.tabbar__item[hidden] { display: none; }

/* place pour ne pas passer sous la barre fixe : --barre-tabs-mesuree est la
   hauteur réelle de la barre (app.js, ResizeObserver) ; le repli CSS couvre
   le temps avant la première mesure */
main#app {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: var(--barre-tabs-mesuree, var(--barre-tabs));
}

/* la charte interdit le flou et la transparence hors scrim de dialogue :
   la barre est opaque, posée sur un filet d'encre de 4px */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  /* pas de bande de zone de sécurité sous les libellés : la barre n'ajoute
     aucun padding bas, les onglets (et l'onglet actif, plein bord) descendent
     jusqu'au bord de l'écran. Seul le padding bas des items (space-3) sépare
     les libellés de l'indicateur d'accueil */
  padding-bottom: 0;
  background: var(--page);
  border-top: var(--border-3) solid var(--trait);
}

.tabbar__item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1) var(--space-3);
  min-height: var(--tap-min);
  background: transparent;
  border: 0;
  color: var(--encre);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-instant) var(--ease-step-2), color var(--dur-instant) var(--ease-step-2);
}
.tabbar__item:hover { background: var(--creux); }
.tabbar__item:focus-visible { outline: var(--outline-focus); outline-offset: calc(var(--outline-focus-offset) * -1); }

.tabbar__icone { width: 24px; height: 24px; display: block; }

.tabbar__item span {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* onglet actif : pavé d'encre pleine, pas une teinte d'accent */
.tabbar__item[aria-selected="true"] { background: var(--encre); color: var(--cream-50); }
.tabbar__item[aria-selected="true"]:hover { background: var(--encre); }

@media (min-width: 720px) {
  :root { --barre-tabs: 60px; }
  .tabbar { grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; }
  .tabbar__item { grid-auto-flow: column; align-items: center; justify-items: start; padding: var(--space-3) var(--space-5); gap: var(--space-2); }
}

/* ---------- Navigation entre semaines (onglet Séances) ---------- */

#onglet-seances { padding-bottom: var(--barre-semnav); }

.sem-tete {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-1) solid var(--trait-fin);
}
.sem-tete[hidden] { display: none; }

/* le statut de la semaine se lit d'un coup d'œil, sur un badge de la charte,
   au niveau de l'étiquette de section plutôt que dans l'en-tête de semaine */
.sem-tete__badge {
  display: inline-block;
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre); background: var(--creux);
  border: var(--border-1) solid var(--trait);
  padding: 3px var(--space-2);
}
.sem-tete__badge[hidden] { display: none; }
.sem-tete__badge--en_cours { background: var(--accent); color: var(--cream-50); }
.sem-tete__badge--termine { background: var(--green-500); color: var(--encre); }
.sem-tete__badge--a_venir { background: var(--page); border-style: dashed; color: var(--encre-douce); }

/* la ligne de séparation passe avant le badge, qui reste plaqué à droite */
.etiquette--seances::after { order: 1; }
.etiquette--seances #sem-badge { order: 2; }

.sem-tete__kicker {
  display: block;
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--encre-douce); margin-bottom: var(--space-2);
}

.sem-tete__titre {
  font-family: var(--dp); font-weight: var(--weight-bold);
  font-size: var(--text-xl); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-2);
}
.sem-tete__objectif { color: var(--text-muted); font: var(--type-body-sm); margin: 0; max-width: 62ch; }

.seances-vide {
  color: var(--encre-douce); font: var(--type-body-sm);
  padding: var(--space-10) 0; text-align: center;
  border: var(--border-1) dashed var(--trait); background: var(--page);
}

/* L'ancienne barre de navigation semaine (nav#semnav fixe en bas d'écran,
   avec .semnav__fleche/.semnav__info/.semnav__num/.semnav__dates) a disparu
   du gabarit — remplacée par les boutons .semnav-btn dans #sem-tete, voir
   style.css. Ces règles n'ont plus de markup correspondant. */

/* ---------- En-tête de semaine collé (onglet Séances) ---------- */

/* #sem-tete reste collé en haut pendant que la liste défile. Aucun ancêtre
   n'a d'overflow (la page entière défile), donc position:sticky fonctionne
   directement ; il se colle dans la limite de #s-seances. Le fond est opaque
   (--page), la charte interdit la transparence. z-index sous .tabbar (50) et
   au-dessus des cartes. Le décalage haut suit la zone de sécurité de l'iPhone
   (PWA, viewport-fit=cover) : le ::before peint la bande sous l'heure et les
   icônes d'état pour que rien ne transparaisse derrière. */
#sem-tete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--page);
  padding-top: var(--space-2);
}
#sem-tete::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: env(safe-area-inset-top, 0px);
  background: var(--page);
}
/* filet d'encre sous l'en-tête collé : détache l'en-tête des cartes qui
   défilent dessous (pas d'ombre floue, la charte les interdit) */
#sem-tete.sem-tete--compact { border-bottom-color: var(--trait); }

/* boutons de taille tactile suffisante */
.semnav-btn { width: var(--tap-min); height: var(--tap-min); }

/* version compacte une fois la page défilée : une seule ligne
   « ‹ Semaine 41 · 5 oct. – 11 oct. › », sans titre de bloc, marges réduites */
#sem-tete.sem-tete--compact { padding-top: 0; padding-bottom: var(--space-1); margin-bottom: var(--space-3); }
#sem-tete.sem-tete--compact .sem-tete__centre { display: flex; justify-content: center; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
#sem-tete.sem-tete--compact .sem-tete__num::after { content: " ·"; }
#sem-tete.sem-tete--compact .sem-tete__titre { display: none; }

/* un lien direct vers une carte ne la laisse pas cachée sous l'en-tête collé */
.seance, .seance-detail { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 80px); }