/* ═══════════════════════════════════════════════════════════
   COMPONENT — page-context-bar
   Barre contexte sticky scroll-aware en haut de chaque page
   de module (← Retour à gauche + pill S19 + heure + date à droite).
   ───────────────────────────────────────────────────────────
   Comportement :
   - Au repos (scrollY ≤ 8) : fond transparent, fond identique
     à la page (--soma-bg), aucune ombre.
   - Au scroll (scrollY > 8) : voile glass + blur + ombre xs.
     Le titre de page passe « derrière du verre » lisiblement.
   - Transition 250 ms avec --soma-ease-out.
   ───────────────────────────────────────────────────────────
   Raison d'être : sans ce comportement, la barre sticky a le
   même fond que la page → quand le titre passe dessous au scroll,
   il disparaît dans une zone sans frontière visuelle (bug constaté
   le 2026-05-10 sur Détections / Planning AO / Devis / Commercial).
   ───────────────────────────────────────────────────────────
   Tokens : --soma-glass-bg, --soma-glass-blur, --soma-sh-xs,
            --soma-green, --soma-green-dark, --soma-green-soft,
            --soma-text, --soma-muted, --soma-r-pill, --soma-r-sm,
            --soma-s-*, --soma-dur-*, --soma-ease-out
   ═══════════════════════════════════════════════════════════ */

.page-context-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--soma-s-7);
  padding: var(--soma-s-7) var(--soma-s-10);
  background: transparent;
  transition:
    background var(--soma-dur-mid) var(--soma-ease-out),
    box-shadow var(--soma-dur-mid) var(--soma-ease-out),
    backdrop-filter var(--soma-dur-mid) var(--soma-ease-out);
}

.page-context-bar.is-scrolled {
  background: var(--soma-glass-bg);
  backdrop-filter: var(--soma-glass-blur);
  -webkit-backdrop-filter: var(--soma-glass-blur);
  box-shadow: var(--soma-sh-xs);
}

/* ── Bouton Retour (gauche) ───────────────────────────────── */

.page-context-bar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--soma-s-2);
  background: transparent;
  border: 0;
  padding: var(--soma-s-2) var(--soma-s-3);
  color: var(--soma-green-dark);
  font-family: var(--soma-font-body);
  font-size: var(--soma-text-md);
  font-weight: var(--soma-weight-bold);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--soma-r-sm);
  transition: background var(--soma-dur-fast) var(--soma-ease-out);
}

.page-context-bar__back::before {
  content: '←';
  font-size: var(--soma-text-lg);
  line-height: 1;
}

.page-context-bar__back:hover {
  background: var(--soma-green-soft);
}

.page-context-bar__back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 191, 122, 0.25);
}

/* Variante sans bouton retour (page racine d'un module) */
.page-context-bar--no-back .page-context-bar__back {
  visibility: hidden;
}

/* ── Zone contexte (droite) : pill semaine + heure + date ─── */

.page-context-bar__context {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--soma-s-1);
}

.page-context-bar__week-row {
  display: inline-flex;
  align-items: center;
  gap: var(--soma-s-3);
}

.page-context-bar__week {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--soma-s-3);
  background: var(--soma-green);
  color: var(--soma-card);
  font-family: var(--soma-font-body);
  font-size: var(--soma-text-sm);
  font-weight: var(--soma-weight-bold);
  line-height: 1;
  letter-spacing: 0.4px;
  border-radius: var(--soma-r-pill);
}

.page-context-bar__time {
  color: var(--soma-text);
  font-family: var(--soma-font-body);
  font-size: var(--soma-text-md);
  font-weight: var(--soma-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.page-context-bar__date {
  color: var(--soma-muted);
  font-family: var(--soma-font-italic);
  font-size: var(--soma-text-sm);
  font-style: italic;
  font-weight: var(--soma-weight-regular);
  line-height: 1;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 720px) {
  .page-context-bar {
    padding: var(--soma-s-5) var(--soma-s-7);
  }
  .page-context-bar__date {
    display: none;
  }
}