/* PROJECT.md §11.9, plus la navigation du bas et quelques classes du module de cote. */
:root {
  --awq-shadow-sm: 0 1px 2px rgba(15,15,18,0.06);
  --awq-shadow-md: 0 4px 12px rgba(15,15,18,0.08);
  --awq-shadow-lg: 0 12px 32px rgba(15,15,18,0.12);
  --awq-bottomnav-height: 64px;
}

.awq-impact { font-family: 'Anton', 'Inter', sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
.awq-numeric { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; }

.awq-hover-lift { transition: transform .2s, box-shadow .2s; }
.awq-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--awq-shadow-lg); }
.awq-tap { transition: transform .1s; }
.awq-tap:active { transform: scale(.97); }

@keyframes awq-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(230,57,70,0); }
}
.awq-pulse { animation: awq-pulse 2s infinite; }
.awq-tap-target { min-width: 48px; min-height: 48px; }

.mud-button:focus-visible,
.mud-input-control:focus-within { outline: 2px solid #FF8C42; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .awq-hover-lift, .awq-tap, .awq-pulse { transition: none !important; animation: none !important; }
}

/* Contenu : place pour la navigation du bas */
.awq-main { padding-bottom: calc(var(--awq-bottomnav-height) + 16px + env(safe-area-inset-bottom)); }

/* Navigation du bas (mobile d'abord, reste visible sur ordinateur dans le squelette) */
.awq-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  height: calc(var(--awq-bottomnav-height) + env(safe-area-inset-bottom));
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-divider);
  padding-bottom: env(safe-area-inset-bottom);
}
.awq-bottomnav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--mud-palette-text-secondary); text-decoration: none; font-size: 0.72rem; min-height: 48px;
}
.awq-bottomnav__item.is-active { color: var(--mud-palette-primary); font-weight: 700; }

/* Classement et défis */
.awq-rank { font-family: 'Anton', 'Inter', sans-serif; font-size: 1.4rem; width: 2.6rem; flex: 0 0 auto; }
.awq-me { border: 2px solid var(--mud-palette-primary) !important; }
.awq-chips { display: flex; gap: 6px; overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
.awq-odds { display: flex; gap: 6px; }
.awq-odds > div { flex: 1; text-align: center; border: 1px solid var(--mud-palette-divider); border-radius: 10px; padding: 6px 0; }
.awq-odds small { display: block; color: var(--mud-palette-text-secondary); font-size: .7rem; }
.awq-pos { color: var(--mud-palette-success); }
/* Photos des participants : cercle recadré, initiales sur fond neutre sans photo publique (contraste AA). */
.awq-avatar { flex: 0 0 auto; background: var(--mud-palette-background-gray) !important; color: var(--mud-palette-text-secondary) !important; font-weight: 600; }
.awq-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mud-avatar.awq-avatar--xl { width: 96px; height: 96px; font-size: 2rem; }   /* plus précis que .mud-avatar-medium */
.awq-neg { color: var(--mud-palette-error); }

/* Horaires hebdomadaires : les créneaux restent lisibles sur petit écran. */
.awq-practice-times { list-style: none; margin: 8px 0; padding: 0; }
.awq-practice-times li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px 0; }
.awq-practice-times li + li { border-top: 1px solid var(--mud-palette-divider); }
.awq-practice-day { font-weight: 600; }
.awq-practice-hours { font-variant-numeric: tabular-nums; }

/* Corrections après test visuel (390 px) */
h1:focus, h1:focus-visible { outline: none; }                  /* FocusOnNavigate met le focus sur le titre */
.awq-chips > *, .awq-chips .mud-chip { flex: 0 0 auto; max-width: none; }   /* MudBlazor 8 : la puce est dans un conteneur display: contents */
.awq-impact sup { text-transform: none; font-size: .45em; }    /* « 6e », pas « 6E » */
.awq-dev-select { max-width: 170px; }
.awq-dev-select .mud-input, .awq-dev-select .mud-input-slot,
.awq-dev-select .mud-input-label, .awq-dev-select .mud-select-input,
.awq-dev-select .mud-input-adornment { color: #FAFAF7 !important; }
.awq-dev-select .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: rgba(250,250,247,.5) !important; }

/* Erreur grave ou connexion perdue (élément affiché par Blazor) */
#blazor-error-ui {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
    padding: 12px 44px 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: #FFF4E5; color: #5F3B00; box-shadow: 0 -1px 4px rgba(0, 0, 0, .2); font: 500 0.95rem Inter, sans-serif;
}
#blazor-error-ui .reload { color: inherit; font-weight: 700; margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 10px; font-size: 1.1rem; }

.awq-device-button { min-height: 48px; padding: 10px 18px; border: 0; border-radius: 8px; background: #C62B38; color: #fff; font: 600 1rem Inter, sans-serif; cursor: pointer; }
.awq-device-button[hidden] { display: none; }
.awq-device-button:disabled { opacity: .6; cursor: wait; }
.awq-device-button:focus-visible { outline: 3px solid #FF8C42; outline-offset: 3px; }
.awq-device-button--secondary { background: transparent; border: 1px solid var(--mud-palette-divider); color: var(--mud-palette-text-primary); }
.awq-device-note { color: var(--mud-palette-text-secondary); font-size: .85rem; margin-top: 12px; }