/* ThaïGuide — streaks.css */

/* ── Flamme animée dans le header ───────────────────────────────────────── */
.tg-streak-wrap {
  display: inline-flex; align-items: center; gap: 3px; position: relative;
}
.tg-streak-icon {
  display: inline-block;
  animation: tg-sk-sway 1.8s ease-in-out infinite;
  transform-origin: bottom center;
  font-size: 1.05em; line-height: 1;
}
@keyframes tg-sk-sway {
  0%,100% { transform: rotate(-4deg) scale(1); }
  25%      { transform: rotate(4deg) scale(1.08); }
  50%      { transform: rotate(-2deg) scale(1.04); }
}
.tg-streak-danger .tg-streak-icon {
  animation: tg-sk-danger .7s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255,80,0,.8));
}
@keyframes tg-sk-danger {
  0%,100% { transform: scale(1) rotate(-5deg); }
  50%      { transform: scale(1.2) rotate(5deg); }
}
.tg-streak-num  { font-weight: 800; font-size: .95em; }
.tg-streak-dot  {
  position: absolute; top: -3px; right: -4px;
  width: 8px; height: 8px; background: #ff3300;
  border-radius: 50%; border: 1.5px solid #0f1629;
  animation: tg-dot-pulse 1s ease-in-out infinite;
}
@keyframes tg-dot-pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.4); opacity:.7; }
}

/* ── Alerte danger (slide depuis le bas) ────────────────────────────────── */
#tg-streak-alert {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(120px);
  width: calc(100% - 32px); max-width: 400px;
  z-index: 9999999;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
#tg-streak-alert.tg-sa--in {
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}
.tg-sa-inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
  background: linear-gradient(135deg,#2d1a00,#1a0f00);
  border: 1.5px solid rgba(255,100,0,.6);
  border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(255,60,0,.25);
}
.tg-sa-flame { font-size: 1.8rem; animation: tg-sk-danger .7s ease-in-out infinite; }
.tg-sa-text  { color: rgba(255,220,180,.95); font-size: .8rem; line-height: 1.4; }
.tg-sa-text strong { color: #ffcc88; display:block; margin-bottom:2px; }
.tg-sa-text p { margin:0; color:rgba(255,200,150,.65); font-size:.74rem; }
.tg-sa-close {
  background:none; border:none; color:rgba(255,200,150,.4);
  font-size:1rem; cursor:pointer; padding:4px; transition:color .15s;
}
.tg-sa-close:hover { color:rgba(255,200,150,.8); }

/* ── Calendrier 7 jours ─────────────────────────────────────────────────── */
.tg-wk-cal {
  background: #1a2744;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 13px 15px; margin-bottom: 16px;
}
.tg-wk-title {
  font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 11px;
}
.tg-wk-grid { display: flex; justify-content: space-between; gap: 4px; }
.tg-wk-day  { display: flex; flex-direction: column; align-items: center; gap: 4px; flex:1; }
.tg-wk-dot  {
  width: 32px; height: 32px; border-radius: 10px;
  background: #1a2744; border: 1.5px solid #a78bfa;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: rgba(255,255,255,.2);
}
.tg-wk-active .tg-wk-dot {
  background: #1a2744; border-color: #22d3ee; color: #22d3ee;
}
.tg-wk-today .tg-wk-dot {
  border-color: #fb923c; box-shadow: 0 0 8px rgba(251,146,60,.4);
}
.tg-wk-lbl { font-size: .64rem; font-weight: 700; color: rgba(255,255,255,.3); text-transform:uppercase; }
.tg-wk-today .tg-wk-lbl { color: #1cb0f6; }