/* ============================================================
   Grand Gaz — polish visuel (v1.0)
   Toasts, états vides / squelettes, animations d'entrée, images,
   focus clavier, cibles tactiles. Fonctionne en thème sombre et clair
   (variables du site, avec valeurs de repli).
   ============================================================ */

/* ── 1. Toasts (remplacent les alert() natifs) ───────────────── */
#gg-toasts {
  position: fixed; z-index: 10000;
  right: 16px; top: calc(16px + env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column; gap: 10px;
  width: min(92vw, 380px); pointer-events: none;
}
.gg-toast {
  --gg-toast-accent: var(--team-color, #e10600);
  --gg-toast-bg: #171a1f;
  pointer-events: auto; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--gg-toast-bg); color: #f5f7fb;
  border: 1px solid rgba(255, 255, 255, .10); border-left: 4px solid var(--gg-toast-accent);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .30);
  font: 600 .85rem/1.45 Inter, system-ui, sans-serif;
  animation: gg-toast-in .28s cubic-bezier(.2, .8, .2, 1) both;
  cursor: pointer;
}
.gg-toast.is-leaving { animation: gg-toast-out .22s ease forwards; }
.gg-toast__icon { flex: 0 0 auto; margin-top: 1px; color: var(--gg-toast-accent); }
.gg-toast__msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gg-toast--success { --gg-toast-accent: #22a559; }
.gg-toast--error   { --gg-toast-accent: #dc2626; }
.gg-toast--warn    { --gg-toast-accent: #d97706; }
html[data-theme='light'] .gg-toast {
  --gg-toast-bg: var(--lm-surface, #f7f6f3); color: var(--lm-ink, #24262b);
  border-color: var(--lm-line, rgba(36, 38, 44, .11));
  box-shadow: 0 12px 30px rgba(36, 38, 44, .16);
}
@keyframes gg-toast-in  { from { opacity: 0; transform: translateX(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes gg-toast-out { to { opacity: 0; transform: translateX(18px); } }
@media (max-width: 720px) {
  /* au-dessus de la barre de navigation basse */
  #gg-toasts { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  @keyframes gg-toast-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes gg-toast-out { to { opacity: 0; transform: translateY(14px); } }
}

/* ── 2. États vides / erreur ─────────────────────────────────── */
.gg-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 18px; text-align: center; color: var(--text-gray, #9ba7bd);
}
.gg-empty__icon {
  width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center;
  font-size: 1.35rem; color: var(--team-color, #e10600);
  background: color-mix(in srgb, var(--team-color, #e10600) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--team-color, #e10600) 30%, transparent);
}
.gg-empty__title {
  font-family: 'Orbitron', sans-serif; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-white, #f5f7fb);
}
.gg-empty__text { font-size: .85rem; line-height: 1.55; max-width: 36ch; }
.gg-empty--error .gg-empty__icon {
  color: #dc2626; background: rgba(220, 38, 38, .10); border-color: rgba(220, 38, 38, .30);
}

/* ── 3. Squelettes de chargement ─────────────────────────────── */
.gg-skel {
  min-height: 1em; border-radius: 8px;
  background: linear-gradient(90deg, var(--skeleton-bg, rgba(255, 255, 255, .06)) 25%, rgba(255, 255, 255, .13) 37%, var(--skeleton-bg, rgba(255, 255, 255, .06)) 63%);
  background-size: 400% 100%; animation: gg-shimmer 1.4s ease infinite;
}
html[data-theme='light'] .gg-skel {
  background: linear-gradient(90deg, rgba(36, 38, 44, .07) 25%, rgba(255, 255, 255, .55) 37%, rgba(36, 38, 44, .07) 63%);
  background-size: 400% 100%;
}
.gg-skel--line  { height: 14px; margin: 8px 0; }
.gg-skel--title { height: 22px; width: 55%; margin: 4px 0 14px; }
.gg-skel--card  { height: 120px; border-radius: 16px; }
@keyframes gg-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── 4. Animation d'entrée des pages (classe posée par gg_polish.js) ── */
@keyframes gg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main.gg-enter > :not(.gg-home),
main.gg-enter .gg-home > * { animation: gg-rise .34s cubic-bezier(.2, .7, .2, 1) both; }
main.gg-enter > :nth-child(2), main.gg-enter .gg-home > :nth-child(2) { animation-delay: .04s; }
main.gg-enter > :nth-child(3), main.gg-enter .gg-home > :nth-child(3) { animation-delay: .08s; }
main.gg-enter > :nth-child(4), main.gg-enter .gg-home > :nth-child(4) { animation-delay: .12s; }
main.gg-enter > :nth-child(5), main.gg-enter .gg-home > :nth-child(5) { animation-delay: .16s; }
main.gg-enter > :nth-child(6), main.gg-enter .gg-home > :nth-child(6) { animation-delay: .20s; }
main.gg-enter > :nth-child(n+7), main.gg-enter .gg-home > :nth-child(n+7) { animation-delay: .24s; }

/* ── 5. Images : apparition douce (repli automatique si le JS ne répond pas) ── */
img[loading="lazy"] { opacity: 0; transition: opacity .35s ease; animation: gg-img-show 0s 2.5s forwards; }
img[loading="lazy"].gg-img-ok { opacity: 1; animation: none; }
img.gg-img-broken { visibility: hidden; }
@keyframes gg-img-show { to { opacity: 1; } }

/* ── 6. Focus clavier cohérent (couleur d'équipe, sans écraser les styles existants) ── */
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--team-color, #e10600); outline-offset: 2px;
}

/* ── 7. Cibles tactiles confortables ─────────────────────────── */
@media (pointer: coarse) {
  .gg-btn, .btn-f1, .filter-btn, .gg-tab, .gg-race-tab-btn, select { min-height: 44px; }
}

/* ── 8. Confettis ────────────────────────────────────────────── */
#gg-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; }

/* ── 9. Transition douce du changement de thème (View Transitions API) ── */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* ── 10. Accessibilité : mouvement réduit ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}