/* ==========================================================================
   Composant Simulateur Temporel "Time-Travel Switcher"
   Mini-site & Compagnon Numérique Congrès SEP-UNSA 2027
   ========================================================================== */

.time-travel-bar {
  position: relative;
  z-index: 45;
  background-color: #07090e;
  color: #f8fafc;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transition: all 0.3s ease;
  font-family: var(--font-body, 'Geist', sans-serif);
}

.time-travel-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.375rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.time-travel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  transition: all 0.25s ease;
}

.time-travel-badge.badge-before {
  background-color: rgba(27, 158, 211, 0.25);
  color: #7cd0ff;
  border: 1px solid rgba(124, 208, 255, 0.4);
}

.time-travel-badge.badge-during {
  background-color: rgba(225, 14, 117, 0.25);
  color: #ffb1c6;
  border: 1px solid rgba(225, 14, 117, 0.5);
  animation: pulseLiveBadge 2s infinite ease-in-out;
}

.time-travel-badge.badge-after {
  background-color: rgba(0, 168, 116, 0.25);
  color: #6ffbbe;
  border: 1px solid rgba(111, 251, 190, 0.4);
}

@keyframes pulseLiveBadge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

.time-travel-controls {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow-x: auto;
  padding-bottom: 2px;
}

.time-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #bec8d0;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.time-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.time-btn:focus-visible {
  outline: 2px solid #7cd0ff;
  outline-offset: 1px;
}

.time-btn.active {
  background-color: #1b9ed3;
  color: #ffffff;
  border-color: #7cd0ff;
  box-shadow: 0 0 10px rgba(27, 158, 211, 0.4);
}

.time-btn.active-during {
  background-color: #e10e75;
  color: #ffffff;
  border-color: #ffb1c6;
  box-shadow: 0 0 10px rgba(225, 14, 117, 0.4);
}

.time-btn.active-after {
  background-color: #006c49;
  color: #ffffff;
  border-color: #6ffbbe;
  box-shadow: 0 0 10px rgba(0, 108, 73, 0.4);
}

/* ==========================================================================
   Filtrage déclaratif des éléments par Phase du Congrès
   ========================================================================== */

/* 1. Mode Avant Congrès (phase = 'before') */
body[data-congres-phase="before"] [data-phase-only="during"],
body[data-congres-phase="before"] [data-phase-only="after"],
body[data-congres-phase="before"] [data-phase-only="during,after"],
body[data-congres-phase="before"] [data-phase-only="after,during"],
body[data-congres-phase="before"] [data-phase-exclude="before"] {
  display: none !important;
}

/* 2. Mode Pendant Congrès (phase = 'during') */
body[data-congres-phase="during"] [data-phase-only="before"],
body[data-congres-phase="during"] [data-phase-only="after"],
body[data-congres-phase="during"] [data-phase-only="before,after"],
body[data-congres-phase="during"] [data-phase-only="after,before"],
body[data-congres-phase="during"] [data-phase-exclude="during"] {
  display: none !important;
}

/* 3. Mode Après Congrès (phase = 'after') */
body[data-congres-phase="after"] [data-phase-only="before"],
body[data-congres-phase="after"] [data-phase-only="during"],
body[data-congres-phase="after"] [data-phase-only="before,during"],
body[data-congres-phase="after"] [data-phase-only="during,before"],
body[data-congres-phase="after"] [data-phase-exclude="after"] {
  display: none !important;
}

/* Transitions douces lors du changement de phase */
[data-phase-transition] {
  animation: phaseFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes phaseFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}