/* spa.css — Tarba en canta V3 · styles spécifiques SPA
 * Hors variables charte (qui vivent dans :root de index.html).
 * Styles structurels : nav-bas, footer, modales, helpers.
 */

/* ───────── Footer / colophon ───────── */
footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 22px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--c-mute);
  line-height: 1.6;
}
.colophon a {
  color: var(--c-ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--c-line-strong);
}
.colophon a:hover { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.colophon .orn { color: var(--c-accent); display: block; margin-bottom: 6px; font-size: 14px; opacity: 0.6; }
.colophon .mute { display: block; margin-top: 4px; font-style: italic; }

/* Boutons d'action du footer (recharger app · données/confidentialité) */
.foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 14px 0 10px;
}
.foot-actions .foot-btn {   /* spécificité > .colophon a (retire le border-bottom dotted) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-ink-soft);
  background: var(--c-card);
  border: 1px solid var(--c-line-strong);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
.foot-actions .foot-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-danger.armed { background: #8E1816; box-shadow: 0 0 0 3px rgba(201,35,72,0.18); }

/* ───────── Dialogs (privacy, purge) ───────── */
.dlg {
  border: 0;
  border-radius: 16px;
  padding: 0;
  max-width: 560px;
  width: calc(100% - 32px);
  background: var(--c-card);
  color: var(--c-ink);
  box-shadow: 0 24px 64px rgba(26,20,16,0.24);
  overflow: hidden;
}
.dlg::backdrop {
  background: rgba(26,20,16,0.45);
  backdrop-filter: blur(2px);
}
.dlg h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  margin: 0;
  padding: 22px 24px 8px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-warm);
}
.dlg-body {
  padding: 16px 24px 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.dlg-body p { margin: 8px 0; }
.dlg-body ul { margin: 6px 0 10px 18px; }
.dlg-body li { margin: 3px 0; }
.dlg-body .mute { color: var(--c-mute); font-style: italic; font-size: 12.5px; }
.dlg-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.btn-ghost, .btn-primary, .btn-danger {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 9px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  border: 0;
}
.btn-ghost {
  background: transparent;
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
}
.btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(139,26,26,0.18);
}
.btn-primary:hover { background: var(--c-primary-deep); }
.btn-danger {
  background: var(--c-err);
  color: #fff;
}
.btn-danger:hover { background: #8E1816; }

/* ───────── Helpers globaux ───────── */
.mute { color: var(--c-mute); }
.italic { font-style: italic; }
.text-center { text-align: center; }

/* Lignes de portée musicale (séparateur signature) */
.staff-sep {
  height: 14px;
  background-image:
    linear-gradient(to bottom,
      transparent 2px, var(--c-line) 2px, var(--c-line) 3px, transparent 3px,
      transparent 5px, var(--c-line) 5px, var(--c-line) 6px, transparent 6px,
      transparent 8px, var(--c-line) 8px, var(--c-line) 9px, transparent 9px,
      transparent 11px, var(--c-line) 11px, var(--c-line) 12px, transparent 12px
    );
  margin: 24px auto;
  max-width: 380px;
  opacity: 0.55;
}

/* ───────── Detail sheet (bottom-sheet mobile / modale desktop) ───────── */
/* (styles internes shadow-DOM, mais on garde la classe pour fallback) */

/* ───────── Responsive général ───────── */
@media (min-width: 880px) {
  /* Desktop : topbar publique (52px) + nav-bas devient top-bar (58px) → réserver 116px */
  /* (mobile : topbar = 52px + safe-top + nav-bas en bas → réservé via index.html) */
  body {
    padding-top: calc(52px + 58px + env(safe-area-inset-top, 0px) + 6px);
    padding-bottom: 24px;
    /* La nav-bas (en mode top-bar desktop) lit cette variable pour se positionner sous la topbar */
    --sis-nav-top-offset: calc(52px + env(safe-area-inset-top, 0px));
  }
  footer { max-width: 1080px; }
}

@media (max-width: 380px) {
  :root { --shell-max: 100%; }
}

/* === V1.12 — Fiche lieu publique enrichie + OSRM === */
/* Composants <sis-detail-sheet> + <sis-osrm-route> — styles utilisés depuis
   l'intérieur du shadow DOM via custom-element host. Les classes sont
   redéfinies aussi ici pour les apps qui projettent du contenu dans le slot
   (pas encore le cas, mais évite la régression si Shadow DOM est désactivé
   pour debug). */
.venue-detail-v2-gps {
  margin: 14px 0 8px;
  font-size: 12.5px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.venue-detail-v2-gps-label {
  font-family: var(--font-display, serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-mute, #7a6c5d);
  font-size: 11px;
}
.venue-detail-v2-gps-val {
  font-family: var(--font-mono, monospace);
  background: var(--c-bg-warm, rgba(232,220,196,0.32));
  padding: 3px 8px;
  border-radius: 5px;
  color: var(--c-ink, #1a1410);
  font-size: 12.5px;
  user-select: all;
}
.venue-detail-v2-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 10px 0 14px;
}
@media (min-width: 480px) {
  .venue-detail-v2-actions {
    grid-template-columns: 1fr 1fr;
  }
  .venue-detail-v2-actions > .btn-primary { grid-column: 1 / -1; }
}
/* === fin V1.12 fiche lieu publique === */

/* === V1.13 — Programme uniforme + interactif === */
/* Largeur uniforme des cards événement : garde-fou global au cas où un parent
   externe (futur layout) projetterait <sis-event-card> hors de <sis-section-programme>.
   La majorité des styles vit dans le shadow DOM des composants concernés. */
sis-event-card {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* === fin V1.13 === */

/* ─────────────────────────────────────────────────────────────────────
   Lightbox V2 — Visionneuse photo plein écran (2026-06-02, J-1)
   Utilisé par <sis-section-albums-public> (galerie publique) +
   tout module important /js/lib/lightbox.js. Namespace .lightbox-v2-*
   identique côté coulisse (/m/app.css) — code dupliqué volontairement.
   ───────────────────────────────────────────────────────────────────── */
.lightbox-v2-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 6, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lightbox-v2-fade-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  padding: 20px 14px;
}
@keyframes lightbox-v2-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-v2-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: 14px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, transform 160ms ease;
  z-index: 2;
  padding: 0;
}
.lightbox-v2-close:hover  { background: rgba(255, 255, 255, 0.22); transform: scale(1.05); }
.lightbox-v2-close:focus-visible { outline: 2px solid var(--c-accent, #E8A33D); outline-offset: 2px; }

.lightbox-v2-counter {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

.lightbox-v2-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, transform 160ms ease;
  padding: 0;
  z-index: 2;
}
.lightbox-v2-nav:hover  { background: rgba(255, 255, 255, 0.22); }
.lightbox-v2-nav:focus-visible { outline: 2px solid var(--c-accent, #E8A33D); outline-offset: 2px; }
.lightbox-v2-nav:disabled { opacity: 0.35; cursor: default; }
.lightbox-v2-nav-prev { left: 16px; }
.lightbox-v2-nav-next { right: 16px; }
@media (max-width: 540px) {
  .lightbox-v2-nav { width: 44px; height: 44px; }
  .lightbox-v2-nav-prev { left: 8px; }
  .lightbox-v2-nav-next { right: 8px; }
}

.lightbox-v2-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 95vw;
  max-height: 95vh;
  width: 100%;
  height: 100%;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox-v2-img {
  max-width: 95vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 220ms ease;
  display: block;
}
.lightbox-v2-img.lightbox-v2-img-loaded { opacity: 1; }

.lightbox-v2-caption {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  max-width: min(640px, calc(100vw - 32px));
  background: rgba(0, 0, 0, 0.55);
  color: #f5f0e7;
  border: 1px solid rgba(232, 163, 61, 0.30);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  z-index: 2;
}
.lightbox-v2-caption .lightbox-v2-author {
  display: block;
  font-family: var(--font-display, "Playfair Display", "EB Garamond", Georgia, serif);
  font-style: italic;
  color: var(--c-accent, #E8A33D);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.lightbox-v2-caption .lightbox-v2-text {
  display: block;
  color: #fff;
  font-weight: 500;
}
.lightbox-v2-caption .lightbox-v2-meta {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11.5px;
  margin-top: 3px;
  font-variant: small-caps;
  letter-spacing: 0.06em;
}