/* ==========================================================================
   base.css — reset léger + utilitaires communs aux 4 pages.
   Dépend de tokens.css (à charger AVANT).
   ========================================================================== */

/* --------------------------------- Reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  min-height: 100%;
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: var(--lh-tight); font-weight: 700; }

ul, ol { list-style: none; }

/* `hidden` doit gagner contre toute classe qui pose un display. */
[hidden] { display: none !important; }

img, svg { max-width: 100%; display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a { color: var(--red); text-decoration: none; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ------------------------------ Utilitaires ------------------------------- */
.u-hidden { display: none !important; }
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-center      { text-align: center; }
.u-muted       { color: var(--text-muted); }
.u-strong      { font-weight: 700; }
.u-head        { font-family: var(--font-head); }
.u-stack       { display: flex; flex-direction: column; }
.u-row         { display: flex; align-items: center; }
.u-gap-1 { gap: var(--sp-1); } .u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); } .u-gap-4 { gap: var(--sp-4); }
.u-gap-6 { gap: var(--sp-6); }
.u-grow        { flex: 1 1 auto; min-height: 0; }
.u-nowrap      { white-space: nowrap; }

/* ------------------------------- Boutons ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-lg);
  border: 2px solid transparent;
  background: var(--gray-100);
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-md);
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:active:not(:disabled) { background: var(--red-dark); }

.btn--outline {
  background: var(--white);
  border-color: var(--gray-200);
}
.btn--outline:active:not(:disabled) { background: var(--gray-100); }

.btn--ghost { background: transparent; color: var(--text-muted); font-weight: 500; min-height: 44px; }

.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 64px; font-size: var(--fs-lg); }

/* ------------------------------- Cartes ----------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--accent { border-color: var(--red); }

/* ------------------------------- Badges ----------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--gray-100);
  color: var(--text-muted);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.badge--red    { background: var(--red); color: var(--white); }
.badge--soft   { background: var(--red-soft); color: var(--red-dark); }
.badge--wrong  { background: var(--wrong-soft); color: var(--wrong); }

/* ------------------------------- Avatar ----------------------------------- */
/* Rempli par window.Avatar.render(el) avec la mascotte RED. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--gray-500);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: .5px;
  direction: ltr;
  flex: 0 0 auto;
  user-select: none;
}
.avatar--sm { width: 40px; height: 40px; font-size: var(--fs-sm); }
.avatar--lg { width: 80px; height: 80px; font-size: var(--fs-2xl); }

/* ------------------------ Indicateur de connexion -------------------------- */
.conn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.conn__dot {
  width: 10px; height: 10px; border-radius: var(--r-full);
  background: var(--red);
  flex: 0 0 auto;
}
.conn.is-off .conn__dot { background: var(--wrong); animation: pulse-dot 1.2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* --------------------------- Chrono circulaire ----------------------------- */
/* Markup attendu :
   <div class="chrono"><svg viewBox="0 0 100 100" aria-hidden="true">
      <circle class="chrono__track" cx="50" cy="50" r="45"/>
      <circle class="chrono__bar"   cx="50" cy="50" r="45"/>
    </svg><span class="chrono__value">15</span></div>
   JS pilote --chrono-progress (1 → 0) ; pas de transition sur le dernier tick. */
.chrono {
  position: relative;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  --chrono-progress: 1;
  --chrono-color: var(--red);
}
.chrono--sm { width: 56px; height: 56px; }
.chrono svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.chrono circle {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
.chrono__track { stroke: var(--gray-200); }
.chrono__bar {
  stroke: var(--chrono-color);
  stroke-dasharray: 283;                                  /* 2πr, r=45 */
  stroke-dashoffset: calc(283 * (1 - var(--chrono-progress)));
  transition: stroke-dashoffset 240ms linear, stroke 200ms var(--ease);
}
.chrono__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--chrono-color);
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
.chrono.is-urgent { --chrono-color: var(--wrong); }
.chrono.is-over   { --chrono-color: var(--gray-500); }

/* ------------------------------ Barre de score ----------------------------- */
.bar {
  height: 10px;
  border-radius: var(--r-full);
  background: var(--gray-200);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  background: var(--red);
  transition: width var(--dur) var(--ease);
}

/* ------------------------- Transitions de phase ---------------------------- */
.fade-in { animation: fade-in var(--dur) var(--ease) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Clignotement de la bonne réponse : 3 cycles puis reste vert (fill-mode both) */
@keyframes blink-correct {
  0%, 100% { background-color: var(--green-soft); border-color: var(--green); }
  50%      { background-color: var(--green);      border-color: var(--green); color: var(--white); }
}