/* ============================================================================
   QZR vNext — Composants
   ----------------------------------------------------------------------------
   Bibliothèque de composants style Duolingo, 100% pilotée par les tokens
   `--qz-*` (voir vnext-tokens.css). Préfixe `qz-` = isolation totale vis-à-vis
   du legacy (aucune collision). À charger APRÈS vnext-tokens.css.
   Règle : ne jamais référencer un token/classe legacy ici.
   ============================================================================ */

[class^="qz-"],
[class*=" qz-"] { box-sizing: border-box; }

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.qz-screen {
  background: var(--qz-screen);
  color: var(--qz-text);
  font-family: var(--qz-font);
  font-size: var(--qz-fs-body);
  line-height: var(--qz-lh);
}

.qz-card {
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  padding: var(--qz-3);
}
.qz-card--hl { border: 2px solid var(--qz-accent-mid); }

/* ── Typographie utilitaire ─────────────────────────────────────────────── */
.qz-title { font-size: var(--qz-fs-title); font-weight: var(--qz-fw-strong); color: var(--qz-text); margin: 0; }
.qz-h2    { font-size: var(--qz-fs-h2);    font-weight: var(--qz-fw-strong); color: var(--qz-text); margin: 0; }
.qz-h3    { font-size: var(--qz-fs-h3);    font-weight: var(--qz-fw-strong); color: var(--qz-text); margin: 0; }
.qz-muted { color: var(--qz-muted); font-size: var(--qz-fs-sm); }
.qz-kicker {
  font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong);
  letter-spacing: .07em; text-transform: uppercase; color: var(--qz-muted);
}

/* ── Bouton (liseré bas "3D" Duolingo) ──────────────────────────────────── */
.qz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--qz-2);
  width: 100%; border: none; cursor: pointer;
  font-family: var(--qz-font); font-weight: var(--qz-fw-strong); font-size: var(--qz-fs-body);
  color: var(--qz-on-accent);
  background: var(--qz-accent);
  border-bottom: 4px solid var(--qz-accent-deep);
  border-radius: var(--qz-r-control);
  padding: 12px 16px;
  transition: transform var(--qz-dur-press), border-width var(--qz-dur-press), background var(--qz-dur-press);
}
.qz-btn:active { transform: scale(var(--qz-press-scale)); border-bottom-width: 2px; }
.qz-btn--ghost {
  background: var(--qz-surface); color: var(--qz-accent-ink);
  border: 1px solid var(--qz-line); border-bottom: 4px solid var(--qz-line-strong);
}
.qz-btn--soft {
  background: var(--qz-accent-soft); color: var(--qz-accent-ink);
  border: 1.5px solid var(--qz-accent-mid); border-bottom: 4px solid var(--qz-accent-mid);
}
.qz-btn--danger { background: var(--qz-error); border-bottom-color: var(--qz-error-strong); }
.qz-btn[disabled], .qz-btn.is-disabled {
  background: var(--qz-line-strong); border-bottom-color: var(--qz-line-strong);
  color: #fff; cursor: default; pointer-events: none;
}
.qz-btn--auto { width: auto; }

/* ── FAB ────────────────────────────────────────────────────────────────── */
.qz-fab {
  width: 46px; height: 46px; border-radius: var(--qz-r-card);
  background: var(--qz-accent); border-bottom: 4px solid var(--qz-accent-deep);
  color: var(--qz-on-accent); display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; cursor: pointer;
}

/* ── Chip / Pill / Badge ────────────────────────────────────────────────── */
.qz-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong);
  color: var(--qz-accent-ink); background: var(--qz-accent-soft);
  border-radius: var(--qz-r-pill); padding: 5px 10px; white-space: nowrap;
}
.qz-chip--solid  { background: var(--qz-accent); color: var(--qz-on-accent); }
.qz-chip--warn   { background: var(--qz-warning-bg); color: var(--qz-warning-ink); }
.qz-chip--muted  { background: var(--qz-line); color: var(--qz-muted); }

.qz-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--qz-fs-sm); font-weight: var(--qz-fw-strong); color: var(--qz-accent-ink);
  background: var(--qz-surface); border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-pill); padding: 6px 11px;
}

.qz-badge {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: var(--qz-accent-soft); color: var(--qz-accent-ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.qz-badge--on { background: var(--qz-accent); color: var(--qz-on-accent); }

/* ── Barre de progression ───────────────────────────────────────────────── */
.qz-bar { height: 13px; border-radius: var(--qz-r-pill); background: var(--qz-accent-soft); overflow: hidden; }
.qz-bar--sm { height: 8px; }
.qz-bar > i { display: block; height: 100%; background: var(--qz-accent); border-radius: var(--qz-r-pill); }
/* animation de remplissage : ajouter la classe .qz-bar--fill (largeur définie inline) */
.qz-bar--fill > i { animation: qzGrow var(--qz-dur-bar) var(--qz-ease) both; }
@keyframes qzGrow { from { width: 0; } }

/* ── Segmenté ───────────────────────────────────────────────────────────── */
.qz-seg {
  display: flex; background: var(--qz-accent-soft);
  border-radius: var(--qz-r-control); padding: 3px; font-size: var(--qz-fs-sm);
}
.qz-seg > span {
  flex: 1; text-align: center; padding: 8px; border-radius: 9px;
  color: var(--qz-muted); cursor: pointer;
}
.qz-seg > span.is-on { background: var(--qz-surface); color: var(--qz-accent-ink); font-weight: var(--qz-fw-strong); }

/* ── Toggle ─────────────────────────────────────────────────────────────── */
.qz-toggle {
  width: 42px; height: 24px; border-radius: var(--qz-r-pill);
  background: var(--qz-line-strong); position: relative; flex-shrink: 0; cursor: pointer;
  transition: background var(--qz-dur-press);
}
.qz-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: left var(--qz-dur-press);
}
.qz-toggle.is-on { background: var(--qz-accent); }
.qz-toggle.is-on::after { left: 21px; }

/* ── Champ de saisie ────────────────────────────────────────────────────── */
.qz-input {
  width: 100%; background: var(--qz-surface);
  border: 1.5px solid var(--qz-line); border-radius: var(--qz-r-field);
  padding: 12px 13px; font-family: var(--qz-font); font-size: var(--qz-fs-body); color: var(--qz-text);
  transition: border-color var(--qz-dur-press), box-shadow var(--qz-dur-press);
}
.qz-input::placeholder { color: var(--qz-muted); }
.qz-input:focus, .qz-input.is-focus {
  outline: none; border-color: var(--qz-accent); box-shadow: var(--qz-focus-ring);
}
.qz-label { display: block; font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong); color: var(--qz-muted); margin-bottom: 6px; }

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.qz-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--qz-accent); color: var(--qz-on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--qz-fw-strong); font-size: var(--qz-fs-body);
}

/* ── Tab bar (navigation basse) ─────────────────────────────────────────── */
.qz-tabbar { display: none; }
@media (max-width: 767.98px) {
  .qz-tabbar {
    display: flex; justify-content: space-around; align-items: center;
    background: var(--qz-surface); border-top: 1px solid var(--qz-line);
    padding: 6px 6px max(6px, env(safe-area-inset-bottom, 0px));
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  }
  .qz-tabbar.is-hidden,
  body.qzr-mobile-shell-hidden .qz-tabbar,
  body.realtime-active .qz-tabbar { display: none; }
}
.qz-tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; color: var(--qz-muted); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color var(--qz-dur-ui);
}
.qz-tabbar a.is-active { color: var(--qz-accent); }
.qz-tabbar a i { font-size: 21px; }
.qz-tabbar__center { position: relative; }
.qz-tabbar__play {
  width: 46px; height: 46px; border-radius: 50%; margin-top: -18px;
  background: var(--qz-accent); color: var(--qz-on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); border: 3px solid var(--qz-surface);
}
.qz-tabbar__play i { font-size: 18px; }
.qz-tabbar__center.is-active .qz-tabbar__play { background: var(--qz-accent-deep); }
.qz-tabbar__center span:last-child { margin-top: -1px; }

/* ── Bottom sheet ───────────────────────────────────────────────────────── */
.qz-sheet {
  background: var(--qz-surface); border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--qz-line); padding: 8px 16px 18px;
}
.qz-sheet__handle { width: 40px; height: 5px; border-radius: var(--qz-r-pill); background: var(--qz-line-strong); margin: 4px auto 10px; }

/* ── Nœud de parcours ───────────────────────────────────────────────────── */
.qz-node {
  width: 60px; height: 60px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--qz-on-accent); font-size: 24px;
  background: var(--qz-accent); border-bottom: 5px solid var(--qz-accent-deep); cursor: pointer;
}
.qz-node--done { background: var(--qz-accent-mid); border-bottom-color: var(--qz-accent); }
.qz-node--lock { background: color-mix(in srgb, var(--qz-200) 45%, var(--qz-surface)); border-bottom-color: var(--qz-line-strong); }
.qz-node--boss { width: 74px; height: 74px; font-size: 30px; background: var(--qz-accent-deep); border-bottom-color: var(--qz-900); }
.qz-node--current { animation: qzPulse 1.8s var(--qz-ease) infinite; }
@keyframes qzPulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--qz-accent) 50%, transparent); }
  70%  { box-shadow: 0 0 0 16px color-mix(in srgb, var(--qz-accent)  0%, transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--qz-accent)  0%, transparent); }
}

/* ── Micro-interactions partagées ───────────────────────────────────────── */
.qz-pop  { animation: qzPop  var(--qz-dur-pop) var(--qz-ease-pop) both; }
.qz-bob  { animation: qzBob  2.4s var(--qz-ease) infinite; }
@keyframes qzPop { from { transform: scale(.6); opacity: 0; } }
@keyframes qzBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.qz-tap { transition: transform var(--qz-dur-press); }
.qz-tap:active { transform: scale(var(--qz-press-scale)); }

/* ── Mobile tap reactivity ──────────────────────────────────────────────────
   Many clickable surfaces are JS-driven <div role="button">/<span> elements
   (dashboard cards, main-menu tiles, pills) rather than native <a>/<button>.
   On touch devices their movement :hover styles get "stuck" on the first tap,
   so the real click only fires on the second tap — the "tap several times
   before anything happens" symptom. Two mitigations:
   1) neutralize movement hover states where the pointer can't hover, and
   2) opt interactive surfaces into touch-action:manipulation to drop the
      legacy tap delay / double-tap-zoom gesture wait. */
@media (hover: none) {
  .qzr-hub-layout .card:hover,
  .qzr-main-menu-tile:hover,
  .grid-pill:hover,
  .pill-btn:hover,
  .qzr-shell-primary-link:hover,
  .qzv-cta:hover,
  .qzv-card:hover,
  .qzv-goal-card:hover,
  .qzv-stat:hover,
  .qz-tabbar a:hover { transform: none !important; }
}
.qz-tabbar a,
.qzr-main-menu-tile,
.qzv-card, .qzv-goal-card, .qzv-cta, .qzv-stat,
.qzr-hub-layout .card,
.grid-pill, .pill-btn,
[role="button"] { touch-action: manipulation; }