/* =================================================================
   MARS — week-timeline-fix.css
   À coller à la fin de tactical-ux.css
   =================================================================
   Ergo du bandeau semaine en haut de la page "Today" — tightening
   pour que 7 jours + nav arrows rentrent sur iPhone SE (375px)
   et Galaxy Fold fermé (280px).
   ================================================================= */

/* ---- Default (mobile standard) ---- */
.week-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,20,20,0.95), rgba(10,10,10,0.98));
  border: 1px solid rgba(46, 204, 113, 0.15);
  /* Touch : évite scroll parent pendant swipe horizontal */
  touch-action: pan-y;
}

.week-nav {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.2);
  border-radius: 8px;
  color: var(--m-accent-green-2, #2ECC71);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.week-nav:active { transform: scale(0.94); }

.week-days {
  flex: 1;
  display: flex;
  justify-content: space-around;
  gap: 2px;
}

.day-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.day-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--m-accent-dark, #A3A39E);
}

.day-hex {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #181818;
  border: 1px solid rgba(46, 204, 113, 0.15);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--m-accent-dim, #D4D4CF);
}
.day-hex.done {
  background: linear-gradient(135deg, rgba(46,204,113,0.25), rgba(25,230,57,0.15));
  border-color: var(--m-accent-green-2, #2ECC71);
  color: var(--m-accent, #F5F5F0);
}
.day-hex.active {
  border-color: var(--m-accent-green, #19E639);
  box-shadow: 0 0 0 2px rgba(25,230,57,0.3), 0 0 12px rgba(25, 230, 57, 0.4);
  background: linear-gradient(135deg, rgba(25,230,57,0.2), rgba(46,204,113,0.1));
}
.day-hex.future { opacity: 0.35; }

/* ---- Compact ≤360px (iPhone SE) ---- */
@media (max-width: 360px) {
  .week-timeline {
    gap: 4px;
    padding: 8px;
    margin: 8px;
  }
  .week-nav {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .week-days {
    gap: 1px;
  }
  .day-hex {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }
  .day-label {
    font-size: 9px;
  }
}

/* ---- Ultra-compact ≤300px (Galaxy Fold fermé) ---- */
@media (max-width: 300px) {
  .week-nav { display: none; }  /* Swipe only */
  .day-hex {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }
}

/* ---- Indicator de swipe (affiché 2 fois puis caché via JS) ---- */
.week-timeline .swipe-hint {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--m-accent-dark, #A3A39E);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px;
  opacity: 0.6;
  pointer-events: none;
  animation: swipeHintBlink 2.4s ease-in-out 2;
}
@keyframes swipeHintBlink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}