/* ============================================================================
   QZR vNext — Dashboard HD (fidèle maquette)
   Pile verticale centrée 490px. Requiert vnext-tokens.css.
   ============================================================================ */

/* ── Container ───────────────────────────────────────────────────────────── */
[data-qz-skin="dashboard"].qzv-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 490px;
  margin: 0 auto;
  padding: 16px;
  background: var(--qz-screen);
  color: var(--qz-text);
  font-family: var(--qz-ff, system-ui, -apple-system, sans-serif);
}

/* ── 1. Top bar ──────────────────────────────────────────────────────────── */
.qzv-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qzv-topbar .qzv-bell { margin-left: auto; }

/* Top-right contextual menu (replaces the ellipsis → full-menu modal).
   Opens rightward (left:0), not leftward: the trigger sits right after the
   coins pill, near the LEFT of the topbar (the bell is what's pushed right,
   via margin-left:auto) — a right:0 anchor needs ~216px of room to its LEFT,
   which the old fixed 560px desktop width had but the fluid mobile width
   (100% of a ~375px phone) does not, so the panel opened off-screen. */
.qzv-menu { position: relative; display: inline-flex; }
.qzv-menu__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 1200;
  min-width: 216px; padding: var(--qz-2);
  background: var(--qz-surface, #fff); border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-card, 16px);
  box-shadow: 0 14px 34px rgba(6, 52, 42, .18);
  display: flex; flex-direction: column; gap: 2px;
}
.qzv-menu__panel[hidden] { display: none; }
.qzv-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: var(--qz-3); border: 0; background: transparent;
  font-size: 14px; line-height: 1.2; color: var(--qz-text, #06342A);
  text-decoration: none; text-align: left; cursor: pointer;
  border-radius: var(--qz-r-control, 11px);
}
.qzv-menu__item:hover { background: var(--qz-screen, #F1FAF6); }
.qzv-menu__item > i { width: 18px; text-align: center; color: var(--qz-muted, #5E8A7C); font-size: 15px; }
.qzv-menu__item--danger { color: var(--qz-error, #C0392B); }
.qzv-menu__item--danger > i { color: currentColor; }
.qzv-menu__sep { height: 1px; background: var(--qz-line, #DCEFE8); margin: var(--qz-1); }
.qzv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--qz-2) var(--qz-3);
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  font-size: 14px;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
}
.qzv-pill .fa-fire { color: var(--qz-accent); }
.qzv-pill .fa-gem  { color: var(--qz-accent); }
.qzv-bell {
  position: relative;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  color: var(--qz-text);
  text-decoration: none;
  font-size: 14px;
}
.qzv-bell-dot {
  position: absolute;
  top: 5px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--qz-error, #ef4444);
  border: 2px solid var(--qz-surface);
}

/* ── Shared card ─────────────────────────────────────────────────────────── */
.qzv-card {
  padding: 14px;
  border-radius: var(--qz-r-card, 14px);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
}

/* ── Shared track ────────────────────────────────────────────────────────── */
.qzv-track {
  height: 10px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  overflow: hidden;
}
.qzv-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--qz-accent);
  transition: width 600ms var(--qz-ease, ease);
}

/* ── 4. Hero (mascot + bubble) ───────────────────────────────────────────── */
.qzv-hero {
  display: flex;
  align-items: center;
  gap: 12px;
}
.qzv-mascot {
  flex: 0 0 auto;
  width: 96px; height: 116px;
  display: grid;
  place-items: center;
  /* border-radius: 22px;
  background: var(--qz-accent-soft);
  border: 1px solid var(--qz-line); */
  overflow: hidden;
}
.qzv-mascot .qzr-mascot-svg { width: 82px; height: 100px; }
.qzv-bubble {
  position: relative;
  flex: 1;
  padding: 12px 8px;
  border-radius: 14px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  font-size: .9rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  line-height: 1.4;
}
.qzv-bubble::before {
  content: "";
  position: absolute;
  left: -7px; top: 50%;
  width: 13px; height: 13px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--qz-surface);
  border-left: 1px solid var(--qz-line);
  border-bottom: 1px solid var(--qz-line);
}

/* F7 — mascot reactions: bubble pop (window.qzrMascot.say / dashboard) + tap feedback */
.qzv-bubble--pop { animation: qzvBubblePop .6s cubic-bezier(.22, .61, .36, 1); }
@keyframes qzvBubblePop {
  0%   { transform: scale(.96); border-color: var(--qz-accent); }
  45%  { transform: scale(1.03); border-color: var(--qz-accent); }
  100% { transform: scale(1); }
}
.qzv-mascot { transition: transform var(--qz-dur-ui) ease; }
.qzv-mascot:active { transform: scale(.93); }
@media (prefers-reduced-motion: reduce) {
  .qzv-bubble--pop { animation: none; }
  .qzv-mascot:active { transform: none; }
}

/* ── 5. Mission card ─────────────────────────────────────────────────────── */
.qzv-mission-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qzv-kicker {
  font-size: .7rem;
  font-weight: var(--qz-fw-strong);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--qz-accent-ink);
}
.qzv-mission-card h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  line-height: 1.2;
}
.qzv-mission-sub {
  margin: 0;
  font-size: .88rem;
  color: var(--qz-muted);
  line-height: 1.35;
}
.qzv-mission-sub:empty { display: none; }

/* chips */
.qzv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qzv-chips:empty { display: none; }
/* .qzv-mission-card is a column flex parent : centre les chips sur l'axe
   transversal (horizontal) au lieu de les laisser en etirement/gauche. */
#homepage-vnext-meta { align-self: center; }
.qzv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: .76rem;
  font-weight: var(--qz-fw-strong);
  white-space: nowrap;
}
.qzv-chip i { font-size: .8em; opacity: .8; }
.qzv-chip--reward {
  background: rgba(245,197,66,.14);
  color: #8A6A12;
}
.qzv-chip--reward i { color: var(--qz-energy, #F5C542); opacity: 1; }

/* CTA ghost */
.qzv-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-control, 12px);
  background: var(--qz-surface);
  color: var(--qz-text);
  font-size: 1rem;
  font-weight: var(--qz-fw-strong);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--qz-dur-ui), border-color var(--qz-dur-ui);
}
.qzv-cta:hover { border-color: var(--qz-accent-mid); background: var(--qz-accent-soft); }
.qzv-cta:active { background: var(--qz-accent-soft); }
/* .qzv-cta est partagee (CTA "Objectif du jour", boutons d'onboarding) : la
   bordure n'est retiree qu'ici, pas dans la classe. */
#homepage-vnext-cta { border: none; }

/* ── 6. Objectif du jour ─────────────────────────────────────────────────── */
.qzv-goal-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qzv-goal-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qzv-goal-row i { color: var(--qz-accent); font-size: 1rem; }
.qzv-goal-row span { font-size: .88rem; color: var(--qz-text); }
.qzv-goal-row strong {
  margin-left: auto;
  font-size: .88rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
}

/* ── 7. Section headers (Quêtes / Groupe) ────────────────────────────────── */
.qzv-section { display: flex; flex-direction: column; }
.qzv-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.qzv-section-head span {
  font-size: .7rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
}
/* Rendu identique que ce soit un <a> ou un <button> : « Voir tout » de
   l'activite est devenu un bouton (il ouvre une modale, il ne navigue plus),
   et sans ce reset il heriterait du fond/bordure natifs du bouton. */
.qzv-section-link {
  font-size: .7rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent);
  text-decoration: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/* Quests list (filled by QuestsManager — override dark theme from style-realtime) */
.qzv-quests-list { display: flex; flex-direction: column; gap: 0; }
.qzv-quests-list:empty::after {
  content: "Aucune quete active";
  font-size: .82rem;
  color: var(--qz-muted);
  padding: 10px 14px;
}
.qzv-quests-list .qzr-quests-widget {
  /* background: var(--qz-surface);
  border-color: var(--qz-line); */
  padding: 0;
}
.qzv-quests-list .qzr-quests-title { display: none; }
.qzv-quests-list .qzr-quest-card {
  /* background: var(--qz-surface); */
  /* border-color: var(--qz-line); */
}
.qzv-quests-list .qzr-quest-label { color: var(--qz-text); }
.qzv-quests-list .qzr-quest-done .qzr-quest-label { color: var(--qz-accent); }
.qzv-quests-list .qzr-quest-bar-wrap { background: var(--qz-accent-soft); }
.qzv-quests-list .qzr-quest-bar-fill { background: var(--qz-accent); }
.qzv-quests-list .qzr-quest-done .qzr-quest-bar-fill { background: var(--qz-accent); }
.qzv-quests-list .qzr-quest-meta { color: var(--qz-muted); }
.qzv-quests-list .qzr-quest-reward { color: var(--qz-energy, #D4940A); }

/* ── 8. Group card ───────────────────────────────────────────────────────── */
.qzv-group-card { display: flex; flex-direction: column; gap: 10px; }
.qzv-group-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qzv-group-icon {
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  font-size: 1rem;
  flex-shrink: 0;
}
.qzv-group-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qzv-group-info strong {
  font-size: .92rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qzv-group-info small {
  font-size: .76rem;
  color: var(--qz-muted);
}
.qzv-badge-cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: .76rem;
  font-weight: var(--qz-fw-strong);
  text-decoration: none;
  white-space: nowrap;
}
.qzv-group-slot { }
.qzv-group-slot:empty { display: none; }

/* group xp bar (rendered by JS) */
.qzv-group-xp { padding: 4px 0 0; }
.qzv-group-xp__head {
  display: flex; justify-content: space-between;
  font-size: .74rem; color: var(--qz-muted); margin-bottom: 4px;
}
.qzv-group-xp__weekly { color: var(--qz-accent-ink); font-weight: var(--qz-fw-strong); }
.qzv-group-xp__bar { height: 5px; background: var(--qz-accent-soft); border-radius: 3px; overflow: hidden; }
.qzv-group-xp__bar > div { height: 100%; background: var(--qz-accent); border-radius: 3px; transition: width .6s ease; }

/* group challenge (rendered by JS) */
.qzv-group-challenge { padding: 6px 0 0; }
.qzv-group-challenge__label { font-size: .76rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); margin-bottom: 4px; }
.qzv-group-challenge__label i { color: var(--qz-warning, #f59e0b); margin-right: 4px; }
.qzv-group-challenge__bar { height: 5px; background: var(--qz-accent-soft); border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.qzv-group-challenge__bar > div { height: 100%; background: var(--qz-warning, #f59e0b); border-radius: 3px; transition: width .5s ease; }
.qzv-group-challenge__meta { font-size: .72rem; color: var(--qz-muted); text-align: right; }

/* ── 9. Quick access (2 big cards) ───────────────────────────────────────── */
.qzv-quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.qzv-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px var(--qz-4);
  text-decoration: none;
  color: var(--qz-text);
  text-align: center;
  transition: border-color var(--qz-dur-ui), background var(--qz-dur-ui);
}
.qzv-quick-card:hover {
  border-color: var(--qz-accent-mid);
  background: var(--qz-accent-soft);
}
.qzv-quick-card i {
  font-size: 1.4rem;
  color: var(--qz-accent);
}
.qzv-quick-card span {
  font-size: .82rem;
  font-weight: var(--qz-fw-strong);
}

/* ── Widget slots (chests / badges / activity) ──────────────────────────── */
.qzv-widget-slot { margin: 0; }

/* ── 7b. Chests widget (override dark theme from style-realtime) ────────── */
.qzv-widget-slot .qzr-chests-widget {
  padding: var(--qz-4);
  background: var(--qz-surface);
  border-radius: var(--qz-r-card);
  border: 1px solid var(--qz-line);
  margin: 0;
}
.qzv-widget-slot .qzr-chests-title {
  font-size: .9rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin-bottom: var(--qz-3);
}
.qzv-widget-slot .qzr-chests-title i { color: var(--qz-accent); }
.qzv-widget-slot .qzr-chest-card {
  background: var(--qz-accent-soft);
  border-color: var(--qz-line);
  border-radius: var(--qz-r-control);
}
.qzv-widget-slot .qzr-chest-icon { color: var(--qz-accent); }
.qzv-widget-slot .qzr-chest-label { color: var(--qz-text); font-size: .84rem; }
.qzv-widget-slot .qzr-chest-open-btn {
  background: var(--qz-accent) !important;
  color: var(--qz-on-accent) !important;
  border: none !important;
  border-bottom: 3px solid var(--qz-accent-deep) !important;
  border-radius: var(--qz-r-control) !important;
  font-weight: var(--qz-fw-strong);
  padding: 5px 14px;
}
.qzv-widget-slot .qzr-chest-opened { text-align: center; padding: 14px 8px; }
.qzv-widget-slot .qzr-chest-reward-reveal {
  font-size: 1.05rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-energy, #D4940A);
}

/* ── 7c. Badges widget (override dark theme from style-realtime) ────────── */
.qzv-widget-slot .qzr-badges-widget {
  padding: var(--qz-4);
  background: var(--qz-surface);
  border-radius: var(--qz-r-card);
  border: 1px solid var(--qz-line);
  margin: 0;
}
.qzv-widget-slot .qzr-badges-title {
  font-size: .9rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin-bottom: var(--qz-3);
}
.qzv-widget-slot .qzr-badges-title i { color: var(--qz-energy, #D4940A); }
.qzv-widget-slot .qzr-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.qzv-widget-slot .qzr-badge-item {
  text-align: center;
  padding: 10px 6px;
  background: var(--qz-accent-soft);
  border-radius: var(--qz-r-control);
  border: 1px solid var(--qz-line);
}
.qzv-widget-slot .qzr-badge-icon {
  font-size: 1.5rem;
  color: var(--qz-energy, #D4940A);
  margin-bottom: 4px;
}
.qzv-widget-slot .qzr-badge-label {
  font-size: .72rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
}

/* ── 8b. Activity feed ──────────────────────────────────────────────────── */
.qzv-activity {
  padding: var(--qz-4);
  background: var(--qz-surface);
  border-radius: var(--qz-r-card);
  border: 1px solid var(--qz-line);
}
.qzv-activity__title {
  font-size: .9rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin-bottom: var(--qz-3);
}
.qzv-activity__title i { color: var(--qz-accent); margin-right: 6px; }
.qzv-activity__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: .84rem;
  color: var(--qz-text);
  border-bottom: 1px solid var(--qz-line);
}
.qzv-activity__item:last-child { border-bottom: none; }
.qzv-activity__item i {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  font-size: .72rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   GUEST DASHBOARD
   ══════════════════════════════════════════════════════════════════════════ */

/* Primary CTA (filled, used on guest) */
.qzv-cta--primary {
  border: none;
  border-bottom: 4px solid var(--qz-accent-deep);
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  transition: transform .1s, border-width .1s;
}
.qzv-cta--primary:hover { background: var(--qz-accent); border-color: var(--qz-accent-deep); }
.qzv-cta--primary:active { transform: scale(var(--qz-press-scale)); border-bottom-width: 2px; }

/* Feature strip */
.qzv-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.qzv-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: var(--qz-r-card, 14px);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  text-align: center;
}
.qzv-feature i {
  font-size: 1.2rem;
  color: var(--qz-accent);
  margin-bottom: 2px;
}
.qzv-feature strong {
  font-size: .82rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
}
.qzv-feature small {
  font-size: .72rem;
  color: var(--qz-muted);
}

/* Social proof card */
.qzv-proof-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.qzv-proof-card > strong {
  font-size: .95rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
}
.qzv-proof-metrics {
  display: flex;
  justify-content: space-around;
}
.qzv-proof-metrics div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.qzv-proof-metrics strong {
  font-size: 1.1rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent);
}
.qzv-proof-metrics small {
  font-size: .72rem;
  color: var(--qz-muted);
}

/* Auth card */
.qzv-auth-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.qzv-auth-card > strong {
  font-size: 1rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
}
.qzv-auth-card > p {
  margin: 0;
  font-size: .85rem;
  color: var(--qz-muted);
  line-height: 1.4;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  [data-qz-skin="dashboard"].qzv-dashboard { padding: 12px; gap: 14px; width:100%;}
  .qzv-mascot { width: 76px; height: 92px; border-radius: 18px; }
  .qzv-mascot .qzr-mascot-svg { width: 64px; height: 78px; }
}

/* ── 6bis. Objectif du jour : carte cliquable + bottom sheet détail ──────── */
#homepage-vnext-goal-card { cursor: pointer; transition: border-color var(--qz-dur-ui), background var(--qz-dur-ui);padding: 15px;}
#homepage-vnext-goal-card:hover { border-color: var(--qz-accent-mid); }
#homepage-vnext-goal-card:focus-visible { outline: none; box-shadow: var(--qz-focus-ring); }

.qzv-goal-sheet .mp-modal__panel { padding: 0 18px calc(16px + env(safe-area-inset-bottom)); }
/* Only the objectives list scrolls; the header / progress / stats / CTA stay
   fixed. Panel becomes a flex column that clips, list flexes + scrolls. */
.qzv-goal-sheet .mp-modal__panel {
  display: flex; flex-direction: column;
  max-height: 90vh; overflow: hidden;
}
.qzv-goal-sheet .mp-modal__panel > *:not(.qzv-goal-sheet__list) { flex: 0 0 auto; }
.qzv-goal-sheet__list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin-top: 1rem;              /* requested breathing room above the list */
  padding-right: 2px;
}
/* Full-label tooltip (tap a truncated goal label) — light & dismissable. */
.qzv-goal-tip {
  position: fixed; z-index: 5000; max-width: 260px;
  background: var(--qz-surface); color: var(--qz-text);
  border: 1px solid var(--qz-line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(6, 52, 42, .18);
  padding: 8px 12px; font-size: .8rem; line-height: 1.35;
  font-weight: var(--qz-fw-strong);
}
.qzv-goal-tip[hidden] { display: none; }
.qzv-goal-sheet__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: var(--qz-surface); color: var(--qz-accent);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 2px rgba(6,52,42,.08);
}
.qzv-goal-sheet__close:hover { background: var(--qz-accent-soft); }
.qzv-goal-sheet__head { display: flex; align-items: center; gap: 12px; margin-top: 49px; }
.qzv-goal-sheet__icon {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  background: var(--qz-accent-soft); color: var(--qz-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.qzv-goal-sheet__titles { flex: 1 1 auto; min-width: 0; }
.qzv-goal-sheet__titles h3 { margin: 0; font-size: 1.02rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); }
.qzv-goal-sheet__titles p { margin: 2px 0 0; font-size: .78rem; color: var(--qz-muted); line-height: 1.35; }
.qzv-goal-sheet__head > strong { font-size: 1rem; font-weight: var(--qz-fw-strong); color: var(--qz-accent); }
.qzv-goal-sheet__track { margin: var(--qz-3) 0; }
.qzv-goal-sheet__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.qzv-goal-stat {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  background: var(--qz-surface); border: 1px solid var(--qz-line);
  border-radius: 12px; padding: var(--qz-2) var(--qz-1); text-align: center;
}
.qzv-goal-stat i { color: var(--qz-accent); font-size: .8rem; }
.qzv-goal-stat strong { font-size: .86rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); }
.qzv-goal-stat small { font-size: .64rem; color: var(--qz-muted); }
.qzv-goal-sheet__list-title { font-size: .85rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); margin: 0 0 8px; }
.qzv-goal-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--qz-surface); border: 1px solid var(--qz-line);
  border-radius: 14px; padding: var(--qz-3); margin-bottom: 8px;
  /* Every item (chest / quest / goal) shares one fixed height. */
  height: 104px; box-sizing: border-box;
}
.qzv-goal-item__icon {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
  background: var(--qz-accent-soft); color: var(--qz-accent);
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.qzv-goal-item__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.qzv-goal-item__txt strong { font-size: .7rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Label on a SINGLE line with ellipsis; tap reveals the full text in a tooltip
   (see qzv-goal-tip + the delegated handler in homepage-modern.js). */
.qzv-goal-item__label {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.qzv-goal-item__txt small { font-size: .72rem; color: var(--qz-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Perso" badge marks the user's own custom targets (shown first, priority). */
.qzv-goal-item__badge {
  flex: 0 0 auto; font-size: .62rem; font-weight: var(--qz-fw-strong);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--qz-accent-ink, var(--qz-accent)); background: var(--qz-accent-soft);
  border-radius: var(--qz-r-pill); padding: 2px 7px; line-height: 1.4;
}
.qzv-goal-item--custom .qzv-goal-item__icon { color: var(--qz-accent); background: var(--qz-accent-soft); }
.qzv-goal-item__xp {
  flex: 0 0 auto; font-size: .74rem; font-weight: var(--qz-fw-strong);
  color: var(--qz-accent); background: var(--qz-accent-soft);
  border-radius: var(--qz-r-pill); padding: 5px 10px;
}
/* Quests merged into the daily-objectives list: a distinct "Quête" badge + a
   live progress track (quests carry cross-day progress; targets show XP only). */
.qzv-goal-item__badge--quest {
  color: var(--qz-energy-deep, #B5811A); background: color-mix(in srgb, var(--qz-energy, #F5C542) 24%, #FFFFFF);
}
.qzv-goal-item--quest .qzv-goal-item__icon { color: var(--qz-energy-deep, #B5811A); background: color-mix(in srgb, var(--qz-energy, #F5C542) 20%, #FFFFFF); }
.qzv-goal-item__track {
  display: block; height: 5px; border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft); overflow: hidden; margin: 4px 0 2px;
}
.qzv-goal-item__track > span {
  display: block; height: 100%; border-radius: inherit;
  background: var(--qz-accent); transition: width var(--qz-dur-bar, 1s) ease;
}
.qzv-goal-item--quest.is-done .qzv-goal-item__track > span { background: var(--qz-success); }
.qzv-goal-item--quest.is-done .qzv-goal-item__icon { color: var(--qz-success-ink); background: var(--qz-success-bg); }

.qzv-goal-sheet__empty { text-align: center; color: var(--qz-muted); font-size: .85rem; padding: 12px 0; }
.qzv-goal-sheet__cta { margin-top: 6px; }

/* ── 7-8b. Carte repliable "Afficher plus / Afficher moins" ──────────────── */
.qzv-more-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; cursor: pointer;
  color: var(--qz-accent); font-size: .7rem; font-weight: var(--qz-fw-strong);
  background: none; border: none;
  transition: background var(--qz-dur-ui), color var(--qz-dur-ui);
}
.qzv-more-toggle i { font-size: .72rem; transition: transform var(--qz-dur-ui) ease; }
.qzv-more-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.qzv-more-body { display: flex; flex-direction: column; gap: 16px; }

/* ── QZ Coin shop / Pro upgrade ─────────────────────────────────────────── */
.qzv-shop-sheet .mp-modal__panel { padding: 0 18px calc(16px + env(safe-area-inset-bottom)); }
.qzv-pill--action { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--qz-dur-ui) ease, border-color var(--qz-dur-ui) ease; }
.qzv-pill--action:hover { border-color: var(--qz-accent-mid, var(--qz-accent)); }
.qzv-pill--action:active { transform: scale(var(--qz-press-scale)); }

.qzv-shop__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 10px 0 14px; padding-right: 40px; /* clear the absolute close button (right:14 + 32w) */
}
.qzv-shop__head h3 { margin: 0; font-size: 1.12rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); }
.qzv-shop__balance {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: var(--qz-fw-strong); color: var(--qz-text); font-size: .95rem; white-space: nowrap;
}
.qzv-shop__balance .fa-gem { color: var(--qz-accent); }

.qzv-shop__plan {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 12px 14px; margin-bottom: 16px;
  border-radius: var(--qz-r-card, 14px);
  background: var(--qz-surface); border: 1px solid var(--qz-line);
}
.qzv-shop__plan.is-pro { background: var(--qz-accent-soft); border-color: var(--qz-accent-mid, var(--qz-accent)); }
.qzv-shop__plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qzv-shop__plan-manage {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--qz-accent-mid, var(--qz-line));
}
.qzv-shop__plan-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--qz-muted); }
.qzv-shop__plan-sub i { color: var(--qz-accent); }
.qzv-shop__plan-sub.is-canceling, .qzv-shop__plan-sub.is-canceling i { color: var(--qz-warn, #C77700); }
.qzv-shop__plan-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: var(--qz-fw-strong); font-size: .82rem; color: var(--qz-on-accent);
  background: var(--qz-accent); border-radius: var(--qz-r-pill); padding: 4px 11px;
}
.qzv-shop__plan-badge.is-free { background: var(--qz-line-strong, var(--qz-line)); color: var(--qz-text); }
.qzv-shop__plan-badge .fa-crown { color: #F6C544; }
.qzv-shop__plan-note { color: var(--qz-muted); font-size: .82rem; }

.qzv-shop__products { display: flex; flex-direction: column; gap: 10px; }
.qzv-shop__cards { display: flex; flex-direction: column; gap: 10px; }
.qzv-shop__section-head {
  display: flex; align-items: center; gap: 7px;
  margin-top: var(--qz-2); padding-top: var(--qz-3); border-top: 1px solid var(--qz-line);
  font-size: 12px; font-weight: var(--qz-fw-strong, 700);
  text-transform: uppercase; letter-spacing: .04em; color: var(--qz-muted);
}
.qzv-shop__section-head i { color: var(--qz-accent); }
.qzv-shop__cancel-sub {
  background: var(--qz-surface, #fff);
  border: 1px solid var(--qz-line-strong, var(--qz-line)); border-radius: var(--qz-r-pill, var(--qz-r-pill));
  padding: var(--qz-1) var(--qz-3); white-space: nowrap;
  color: var(--qz-muted); font-size: 12px; font-weight: var(--qz-fw-med, 600); cursor: pointer;
}
.qzv-shop__cancel-sub:hover { color: var(--qz-error, #d13d3d); border-color: var(--qz-error, #d13d3d); }
/* Gestion de l'abonnement App Store. Action neutre et rassurante : elle ouvre
   la page d'Apple, seule habilitee a resilier un abonnement souscrit chez lui. */
.qzv-shop__manage-sub {
  background: var(--qz-surface);
  border: 1px solid var(--qz-line-strong, var(--qz-line)); border-radius: var(--qz-r-pill);
  padding: var(--qz-1) var(--qz-3); white-space: nowrap;
  color: var(--qz-text); font-size: 12px; font-weight: var(--qz-fw-med, 600); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.qzv-shop__manage-sub:hover { border-color: var(--qz-accent); }

/* D'ou vient l'abonnement : sans cette ligne, un abonne par carte croit avoir
   un abonnement App Store qui refuse de s'annuler. */
.qzv-shop__plan-origin {
  margin: var(--qz-2) 0 0; font-size: 12px; color: var(--qz-muted);
  display: flex; align-items: center; gap: 7px;
}

/* « Restaurer mes achats » — exige par la guideline 3.1.1 d'Apple. Action
   secondaire et neutre : ni destructrice (pas le rouge de .cancel-sub), ni
   concurrente des boutons d'achat. */
.qzv-shop__restore-row { display: flex; justify-content: center; margin-top: var(--qz-3); }
.qzv-shop__restore {
  background: transparent;
  border: 1px solid var(--qz-line-strong, var(--qz-line)); border-radius: var(--qz-r-pill);
  padding: var(--qz-1) var(--qz-3); white-space: nowrap;
  color: var(--qz-muted); font-size: 12px; font-weight: var(--qz-fw-med, 600); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.qzv-shop__restore:hover { color: var(--qz-text); border-color: var(--qz-accent); }
.qzv-shop__restore[disabled] { opacity: .55; cursor: default; }
.qzv-shop__buy[disabled] { opacity: .5; cursor: default; }

.qzv-shop__reactivate-sub {
  background: var(--qz-accent); border: 1px solid var(--qz-accent); border-radius: var(--qz-r-pill, var(--qz-r-pill));
  padding: var(--qz-1) var(--qz-3); white-space: nowrap;
  color: var(--qz-on-accent); font-size: 12px; font-weight: var(--qz-fw-med, 600); cursor: pointer;
}
.qzv-shop__reactivate-sub:hover { filter: brightness(1.06); }
.qzv-shop__reactivate-sub:disabled { opacity: .6; cursor: default; }

/* ── Payment result modal (vNext) — persistent, not a fleeting toast ──────── */
.qzv-pay-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity var(--qz-dur-ui) ease; }
.qzv-pay-modal.is-open { opacity: 1; }
.qzv-pay-modal__backdrop { position: absolute; inset: 0; background: rgba(9,30,24,.5); }
.qzv-pay-modal__card {
  position: relative; width: 100%; max-width: 360px; text-align: center;
  background: var(--qz-surface); border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card, 18px); box-shadow: 0 24px 60px rgba(9,30,24,.28);
  padding: 28px var(--qz-6); transform: translateY(14px) scale(.96); transition: transform .22s ease;
}
.qzv-pay-modal.is-open .qzv-pay-modal__card { transform: none; }
.qzv-pay-modal__icon {
  width: 70px; height: 70px; margin: 0 auto var(--qz-4); border-radius: 50%;
  display: grid; place-items: center; font-size: 36px;
}
.qzv-pay-modal__icon.is-ok { background: var(--qz-accent-soft); color: var(--qz-accent); }
.qzv-pay-modal__icon.is-cancel { background: rgba(209,61,61,.12); color: var(--qz-error, #d13d3d); }
.qzv-pay-modal__title { margin: 0 0 6px; font-size: 20px; font-weight: var(--qz-fw-strong, 800); color: var(--qz-text); }
.qzv-pay-modal__msg { margin: 0 0 18px; font-size: 14px; color: var(--qz-muted); line-height: 1.45; }
.qzv-pay-modal__cta {
  width: 100%; padding: 12px var(--qz-5); border: 0; border-radius: var(--qz-r-pill, var(--qz-r-pill));
  background: var(--qz-accent); color: #fff; font-size: 15px; font-weight: var(--qz-fw-strong, 700); cursor: pointer;
}
.qzv-pay-modal__cta:hover { filter: brightness(1.05); }
@media (prefers-reduced-motion: reduce) { .qzv-pay-modal, .qzv-pay-modal__card { transition: none; } }
.qzv-shop__product {
  display: flex; align-items: center; gap: 8px;
  padding: 12px var(--qz-4); border-radius: var(--qz-r-card, 14px);
  background: var(--qz-surface); border: 4px solid var(--qz-line);
}
.qzv-shop__product--pro { border-color: var(--qz-accent-mid, var(--qz-accent)); background: var(--qz-accent-soft); }
.qzv-shop__product-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: var(--qz-accent-soft); color: var(--qz-accent);
}
.qzv-shop__product--pro .qzv-shop__product-icon { background: var(--qz-surface); }
.qzv-shop__product--pro .qzv-shop__product-icon .fa-crown { color: #F6C544; }
.qzv-shop__product-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qzv-shop__product-main strong { font-size: .75rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); }
.qzv-shop__feature {
  align-self: flex-start; max-width: 100%;
  font: inherit; font-size: .72rem; color: var(--qz-text);
  padding: var(--qz-1) var(--qz-2); border-radius: var(--qz-r-field, 10px);
  border: 1px solid var(--qz-line); background: var(--qz-surface);margin: auto;
}
.qzv-shop__product-buy { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.qzv-shop__cost {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-weight: var(--qz-fw-strong); font-size: .82rem; color: var(--qz-muted);
}
.qzv-shop__cost .fa-gem { color: var(--qz-accent); }
.qzv-shop__cost .now { color: var(--qz-text); }
.qzv-shop__product.is-discounted .qzv-shop__cost .was { font-size: .74rem; color: var(--qz-muted); text-decoration: line-through; }
.qzv-shop__product.is-discounted .qzv-shop__cost .now { color: var(--qz-success-ink, var(--qz-success)); }
.qzv-promo-badge {
  display: inline-block; font-size: .66rem; font-weight: var(--qz-fw-strong);
  color: #fff; background: var(--qz-success); padding: 2px 7px; border-radius: var(--qz-r-pill);
}
.qzv-shop__buy {
  border: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: .72rem; font-weight: var(--qz-fw-strong); color: var(--qz-on-accent);
  background: var(--qz-accent); border-radius: var(--qz-r-pill); padding: var(--qz-2) var(--qz-4);
  transition: transform var(--qz-dur-ui) ease, opacity var(--qz-dur-ui) ease;
}
.qzv-shop__buy:active { transform: scale(var(--qz-press-scale)); }
.qzv-shop__buy:disabled { background: var(--qz-line-strong, var(--qz-line)); color: var(--qz-muted); cursor: default; }

/* Mention de reconduction (directive 3.1.2). Assez lisible pour etre lue,
   assez discrete pour ne pas concurrencer le titre : c'est une information
   contractuelle, pas un argument de vente. --qz-muted la garde au-dessus du
   seuil de contraste dans les deux themes. */
.qzv-shop__terms {
  font-size: .68rem; line-height: 1.35; color: var(--qz-muted);
  font-weight: var(--qz-fw-reg, 400);
}
.qzv-shop__legal {
  margin: var(--qz-3) 0 0; text-align: center;
  font-size: .72rem; color: var(--qz-muted);
}
.qzv-shop__legal a { color: var(--qz-muted); text-decoration: underline; }
.qzv-shop__legal a:hover, .qzv-shop__legal a:focus-visible { color: var(--qz-text); }

.qzv-shop__hint { margin: var(--qz-4) 0 0; color: var(--qz-muted); font-size: .8rem; display: flex; align-items: center; gap: 6px; }
.qzv-shop__hint .fa-info-circle { color: var(--qz-accent); }
.qzv-shop__empty { color: var(--qz-muted); font-size: .85rem; text-align: center; padding: 12px; }
.qzv-shop__empty.is-pro { color: var(--qz-accent-strong, var(--qz-accent)); font-weight: var(--qz-fw-med, 600); }
.qzv-shop__empty.is-pro i { color: var(--qz-accent); margin-right: 4px; }

.qzv-shop__toast {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--qz-r-field, 10px);
  font-size: .85rem; font-weight: var(--qz-fw-strong); text-align: center;
  background: var(--qz-accent-soft); color: var(--qz-accent-ink, var(--qz-accent));
}
.qzv-shop__toast.is-ok    { background: var(--qz-success-bg, #e7f7ec); color: var(--qz-success, #1f9d55); }
.qzv-shop__toast.is-error { background: var(--qz-error-bg, #fdeaea); color: var(--qz-error, #d13d3d); }

/* ── Promo code (boutique) ─────────────────────────────────────────────── */
.qzv-promo {
  margin-bottom: 10px; border-radius: var(--qz-r-card, 14px);
  border: 1px dashed var(--qz-line-strong, var(--qz-line)); background: var(--qz-screen, var(--qz-surface));
  overflow: hidden;
}
.qzv-promo__toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 10px 12px; font: inherit; font-size: .82rem; font-weight: var(--qz-fw-strong);
  /* --qz-accent est un ton de REMPLISSAGE : employe comme encre il rendait
     2,21 ici, et echouait sur 8 des 12 themes (1,83 au pire, sur safran).
     --qz-accent-ink est defini pour les trois etats de mode et rend entre
     6,78 et 13,65 selon le theme. */
  color: var(--qz-accent-ink);
}
.qzv-promo__toggle span { flex: 1; }
.qzv-promo__chev { font-size: .68rem; transition: transform var(--qz-dur-ui) ease; opacity: .7; }
.qzv-promo__toggle[aria-expanded="true"] .qzv-promo__chev { transform: rotate(180deg); }
.qzv-promo__row { display: flex; gap: 8px; padding: 0 12px 11px; }
.qzv-promo__input {
  flex: 1; min-width: 0; font: inherit; font-size: .84rem; color: var(--qz-text);
  background: var(--qz-surface); border: 1px solid var(--qz-line-strong, var(--qz-line)); border-radius: var(--qz-r-field, 10px);
  padding: 8px 11px; text-transform: uppercase; letter-spacing: .02em;
}
.qzv-promo__input::placeholder { text-transform: none; letter-spacing: normal; color: var(--qz-muted); }
.qzv-promo__input:focus { outline: none; border-color: var(--qz-accent); }
.qzv-promo__apply {
  border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  font: inherit; font-size: .76rem; font-weight: var(--qz-fw-strong); color: var(--qz-on-accent);
  background: var(--qz-accent); border-radius: var(--qz-r-field, 10px); padding: 0 15px;
}
.qzv-promo__apply:disabled { opacity: .6; cursor: default; }
.qzv-promo__msg {
  display: flex; align-items: center; gap: 6px;
  margin: 0 12px 11px; padding: 7px 10px; border-radius: var(--qz-r-field, 10px);
  font-size: .76rem; font-weight: var(--qz-fw-med, 600);
}
.qzv-promo__msg.is-ok    { background: var(--qz-success-bg, #e7f7ec); color: var(--qz-success-ink, var(--qz-success)); }
.qzv-promo__msg.is-error { background: var(--qz-error-bg, #fdeaea); color: var(--qz-error-ink, var(--qz-error)); }
.qzv-promo__applied {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
}
.qzv-promo__chip { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: var(--qz-fw-strong); color: var(--qz-success-ink, var(--qz-success)); }
.qzv-promo__chip .fa-check-circle { color: var(--qz-success); }
.qzv-promo__chip code {
  background: var(--qz-surface); border: 1px solid var(--qz-accent-mid, var(--qz-accent)); padding: 1px 7px;
  border-radius: 6px; color: var(--qz-text); font-size: .78rem;
}
.qzv-promo__remove { border: none; background: none; cursor: pointer; color: var(--qz-muted); font-size: .76rem; font-weight: var(--qz-fw-med, 600); text-decoration: underline; padding: 4px; }
.qzv-promo__remove:hover { color: var(--qz-error, #d13d3d); }

/* ── Limit-reached gate (unlock with coins / go Pro) ────────────────────────── */
.qzr-limit-gate .mp-modal__panel { padding: 0 18px calc(18px + env(safe-area-inset-bottom)); max-width: 440px; }
.qzr-lg__head { display: flex; align-items: center; gap: 10px; margin: 16px 0 var(--qz-2); padding-right: 40px; }
.qzr-lg__head h3 { margin: 0; font-size: 1.08rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); }
.qzr-lg__icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
  background: var(--qz-accent-soft); color: var(--qz-accent);
}
.qzr-lg__msg { margin: 0 0 16px; color: var(--qz-muted); font-size: .9rem; line-height: 1.45; }
.qzr-lg__actions { display: flex; flex-direction: column; gap: 10px; }
.qzr-lg__unlock, .qzr-lg__pro {
  border: none; cursor: pointer; width: 100%;
  font: inherit; font-size: .92rem; font-weight: var(--qz-fw-strong);
  border-radius: var(--qz-r-pill); padding: 12px 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--qz-dur-ui) ease, opacity var(--qz-dur-ui) ease;
}
.qzr-lg__unlock { background: var(--qz-accent); color: var(--qz-on-accent); }
.qzr-lg__unlock .fa-gem { color: #fff; }
.qzr-lg__unlock:active { transform: scale(var(--qz-press-scale)); }
.qzr-lg__unlock:disabled { background: var(--qz-line-strong, var(--qz-line)); color: var(--qz-muted); cursor: default; }
.qzr-lg__pro {
  background: var(--qz-accent-soft); color: var(--qz-accent-ink, var(--qz-accent));
  border: 1px solid var(--qz-accent-mid, var(--qz-accent));
}
.qzr-lg__pro .fa-crown { color: #F6C544; }
.qzr-lg__pro:active { transform: scale(var(--qz-press-scale)); }
.qzr-lg__hint { margin: var(--qz-4) 0 4px; color: var(--qz-muted); font-size: .78rem; text-align: center; }

.qzr-lg-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 24px);
  z-index: 5000; opacity: 0; pointer-events: none;
  background: var(--qz-success, #1f9d55); color: #fff;
  font-size: .85rem; font-weight: var(--qz-fw-strong);
  padding: var(--qz-3) var(--qz-5); border-radius: var(--qz-r-pill);
  box-shadow: 0 8px 24px rgba(6,52,42,.22);
  transition: opacity var(--qz-dur-ui) ease, transform var(--qz-dur-ui) ease;
}
.qzr-lg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.qzr-lg-toast.is-error { background: var(--qz-error, #d13d3d); }

/* ── Profile "Mon offre" panel (plan + coins + usage + shop) ─────────────────── */
.profile-plan { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 16px;width:100%;}
.profile-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.profile-plan__head-main { display: flex; flex-direction: column; gap: 4px; }
.profile-plan__eyebrow { font-size: .68rem; font-weight: var(--qz-fw-strong); letter-spacing: .08em; text-transform: uppercase; color: var(--qz-muted); }
.profile-plan__badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: var(--qz-fw-strong);
  border-radius: var(--qz-r-pill); padding: 4px 12px; margin-top: 2px;
}
.profile-plan__badge.is-pro  { background: var(--qz-accent); color: var(--qz-on-accent); }
.profile-plan__badge.is-pro .fa-crown { color: #F6C544; }
.profile-plan__badge.is-free { background: var(--qz-accent-soft); color: var(--qz-accent-ink, var(--qz-accent)); }
.profile-plan__note { font-size: .8rem; color: var(--qz-muted); }
.profile-plan__coins {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font-weight: var(--qz-fw-strong); color: var(--qz-text); font-size: .95rem;
  background: var(--qz-accent-soft); border-radius: var(--qz-r-pill); padding: var(--qz-2) var(--qz-3);
}
.profile-plan__coins .fa-gem { color: var(--qz-accent); }

.profile-plan__usage { display: flex; flex-direction: column; gap: 2px; }
.profile-plan__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--qz-2) 2px; border-bottom: 1px solid var(--qz-line);
}
.profile-plan__row:last-child { border-bottom: 0; }
.profile-plan__row > span { font-size: .88rem; color: var(--qz-text); }
.profile-plan__val { display: inline-flex; align-items: baseline; gap: 6px; }
.profile-plan__val strong { font-size: .9rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); }
.profile-plan__val strong.is-cap { color: var(--qz-error, #d13d3d); }
.profile-plan__reset { font-size: .72rem; color: var(--qz-muted); }
.profile-plan__infinity { font-size: .85rem; font-weight: var(--qz-fw-strong); color: var(--qz-accent); }
.profile-plan__unlock { margin: 2px 0 0; font-size: .8rem; color: var(--qz-muted); }
.profile-plan__unlock .fa-gem { color: var(--qz-accent); }
.profile-plan__actions { display: flex; }
.profile-plan__shop { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Near-cap nudge — soft upsell before the hard block */
.profile-plan__nudge {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 2px; padding: var(--qz-3);
  background: var(--qz-accent-soft); border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-field, 12px); font-size: .82rem; color: var(--qz-text);
}
.profile-plan__nudge .fa-bell { color: var(--qz-accent); flex: none; }
.profile-plan__nudge .fa-gem { color: var(--qz-accent); }
.profile-plan__nudge > span { flex: 1; line-height: 1.35; }
.profile-plan__nudge.is-full {
  background: color-mix(in srgb, var(--qz-error, #e5484d) 12%, transparent);
  border-color: color-mix(in srgb, var(--qz-error, #e5484d) 32%, transparent);
}
.profile-plan__nudge.is-full .fa-bell { color: var(--qz-error, #e5484d); }
.profile-plan__nudge-cta {
  flex: none; border: none; cursor: pointer;
  padding: var(--qz-2) var(--qz-4); border-radius: var(--qz-r-pill, var(--qz-r-pill));
  background: var(--qz-btn-primary-bg); color: var(--qz-btn-primary-ink); font-weight: var(--qz-fw-strong, 700); font-size: .8rem;
}
.profile-plan__nudge-cta:hover { filter: brightness(1.05); }

/* Profile plan tabs (Exécution / Création) — segmented control */
.profile-plan__tabs {
  display: flex; gap: 4px; padding: 3px;
  background: var(--qz-accent-soft); border-radius: var(--qz-r-pill);
}
.profile-plan__tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: var(--qz-fw-strong); color: var(--qz-muted);
  padding: var(--qz-2) var(--qz-3); border-radius: var(--qz-r-pill);
  transition: background var(--qz-dur-ui) ease, color var(--qz-dur-ui) ease;
}
.profile-plan__tab.is-active { background: var(--qz-surface); color: var(--qz-accent-ink, var(--qz-accent)); }
.profile-plan__tab:active { transform: scale(var(--qz-press-scale)); }

/* ── Quiz-creator save feedback → vNext card (shared popup__ modal) ──────────── */
.qzr-save-alert {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: var(--qz-6); max-width: 380px; margin: 0 auto;
  background: var(--qz-surface); color: var(--qz-text);
  border-radius: var(--qz-r-card, 16px);
  font-family: var(--qz-ff, system-ui, -apple-system, sans-serif);
}
.qzr-save-alert__icon {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff;
}
.qzr-save-alert--error   .qzr-save-alert__icon { background: var(--qz-error, #d13d3d); }
.qzr-save-alert--success .qzr-save-alert__icon { background: var(--qz-success, #1f9d55); }
.qzr-save-alert--warning .qzr-save-alert__icon { background: var(--qz-warning, #E0731C); }
.qzr-save-alert__title { margin: 2px 0 0; font-size: 1.12rem; font-weight: var(--qz-fw-strong); color: var(--qz-text); }
.qzr-save-alert--error   .qzr-save-alert__title { color: var(--qz-error, #d13d3d); }
.qzr-save-alert--success .qzr-save-alert__title { color: var(--qz-success, #1f9d55); }
.qzr-save-alert--warning .qzr-save-alert__title { color: var(--qz-warning, #E0731C); }
.qzr-save-alert__msg { margin: 0; font-size: .9rem; color: var(--qz-muted); line-height: 1.45; }
.qzr-save-alert__detail { display: block; margin-top: 8px; font-size: .78rem; color: var(--qz-muted); }

/* Let the card own the surface inside the legacy popup chrome (no white-on-white,
   no legacy dynamic tints leaking through around the card). */
.modal-dialog-popup .popup-container,
.modal-dialog-popup .online-sync-dialog,
.modal-dialog-popup .user-not-connected-dialog-container { color: var(--qz-text); }
.modal-dialog-popup:has(.qzr-save-alert) .modal-content {
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card, 16px) !important;
}
.modal-dialog-popup:has(.qzr-save-alert) .popup-container,
.modal-dialog-popup:has(.qzr-save-alert) .online-sync-dialog { background: transparent !important; }

/* ── Hauteur minimale commune aux blocs du dashboard (26.AOU.2026) ──────────
   Les cinq blocs (Objectif du jour, Performances, Groupe principal, Activite
   recente, Badges) partagent un plancher pour que la colonne ne ressemble pas
   a un escalier quand un bloc est vide ou tres court.

   Cible les cartes NOMMEES et non `.qzv-card` : cette classe de base sert aussi
   aux acces rapides, a la carte mission, a la carte d'authentification et au
   bouton « voir plus » — leur imposer ce plancher les deformerait. */
.qzv-goal-card,
#homepage-vnext-perf-card,
.qzv-group-card,
.qzv-activity,
.qzr-chests-widget,
.qzr-badges-widget {
  min-height: 120.68px;
}

/* ── Carte Performances (26.AOU.2026) ───────────────────────────────────────
   Le contenu etait entierement en styles INLINE : flex, gaps et couleurs ecrits
   dans le HTML, hors du langage visuel vNext et impossibles a theminser. Meme
   rendu, mais en classes et en tokens — donc sensible au theme et au mode
   sombre, comme le reste du dashboard.

   Les dimensions du sparkline restent 100x36 : ce sont les valeurs que
   homepage-modern.js passe a buildSparkline(). Les changer ici sans les changer
   la-bas ferait deborder le SVG de son conteneur. */
.qzv-perf-card { display: flex; flex-direction: column; gap: var(--qz-2); }

/* Deux moitiés EGALES separees d'un filet d'un pixel. `1fr 1px 1fr` plutot que
   flex : la grille garantit l'egalite quel que soit le contenu, alors qu'en flex
   un libelle de plan long elargirait sa zone au detriment de l'autre. */
.qzv-perf-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
}
.qzv-perf-div { background: var(--qz-line); }

/* La zone entiere est la cible de clic. Elle est un <a> (plan, global) ou un
   <button> (CTA) : les deux sont remis a plat ici pour partager exactement le
   meme rendu. */
.qzv-perf-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qz-2);
  padding: var(--qz-1) var(--qz-2);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  text-decoration: none;
  border-radius: var(--qz-r-card, 14px);
  cursor: pointer;
  min-width: 0;
  transition: background var(--qz-dur-ui) ease;
}
.qzv-perf-zone:hover { background: var(--qz-accent-soft); }
.qzv-perf-zone:focus-visible { outline: 2px solid var(--qz-accent); outline-offset: -2px; }

/* Le SVG est dimensionne en JS (PERF_RING_SIZE dans homepage-modern.js) ; ce
   conteneur doit porter la meme taille, sinon la grille le comprime. */
.qzv-perf-zone__ring { flex-shrink: 0; width: 92px; height: 92px; }

.qzv-perf-zone__kpis { display: flex; gap: var(--qz-4); }
.qzv-perf-kpi { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.qzv-perf-kpi strong {
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  font-variant-numeric: tabular-nums;
}
.qzv-perf-kpi small { font-size: var(--qz-fs-xs, .72rem); color: var(--qz-muted); }

.qzv-perf-zone__label {
  font-size: var(--qz-fs-xs, .72rem);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent-ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Le libelle global est un repere, pas un nom d'objet : il s'efface derriere
   celui du plan, qui lui est cliquable vers un ailleurs precis. */
.qzv-perf-zone__label.is-muted { color: var(--qz-muted); font-weight: 600; }

/* CTA de creation — occupe la moitie droite quand aucun plan n'est eligible,
   pour que la symetrie de la grille ne se casse jamais. */
.qzv-perf-zone--cta { justify-content: center; gap: var(--qz-1); }
.qzv-perf-cta__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  display: grid;
  place-items: center;
  font-size: var(--qz-fs-body);
  margin-bottom: var(--qz-1);
}
.qzv-perf-cta__title {
  font-size: var(--qz-fs-xs, .72rem);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent-ink);
}
.qzv-perf-cta__hint {
  font-size: var(--qz-fs-xs, .72rem);
  color: var(--qz-muted);
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .qzv-perf-zone { transition: none; }
}

/* ── Activity modal ("Activite recente → Voir tout") ──────────────────────────
   Meme ossature que .qzv-pay-modal (fond, carte, transitions) : le tableau de
   bord n'a qu'un dialecte de modale. Specificite propre : la liste defile, la
   carte non — un flux de 30 evenements doit rester dans l'ecran. */
.qzv-activity-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity var(--qz-dur-ui) ease; }
.qzv-activity-modal.is-open { opacity: 1; }
.qzv-activity-modal__backdrop { position: absolute; inset: 0; background: rgba(9,30,24,.5); }
.qzv-activity-modal__card {
  position: relative; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; max-height: min(70vh, 560px);
  background: var(--qz-surface); border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card, 18px); box-shadow: 0 24px 60px rgba(9,30,24,.28);
  transform: translateY(14px) scale(.96); transition: transform .22s ease;
}
.qzv-activity-modal.is-open .qzv-activity-modal__card { transform: none; }
.qzv-activity-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--qz-3);
  padding: var(--qz-5) var(--qz-5) var(--qz-3);
  border-bottom: 1px solid var(--qz-line);
}
.qzv-activity-modal__title { margin: 0; font-size: 17px; font-weight: var(--qz-fw-strong, 800); color: var(--qz-text); }
.qzv-activity-modal__close {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: var(--qz-r-control, 12px);
  color: var(--qz-muted); font-size: 15px;
}
.qzv-activity-modal__close:hover { background: var(--qz-accent-soft); color: var(--qz-accent-ink); }
/* Seule zone defilante ; l'en-tete et le pied restent visibles. */
.qzv-activity-modal__body { flex: 1 1 auto; overflow-y: auto; padding: var(--qz-3) var(--qz-5); }
.qzv-activity-modal__state { margin: var(--qz-4) 0; text-align: center; font-size: 14px; color: var(--qz-muted); }
.qzv-activity-modal__foot { padding: var(--qz-3) var(--qz-5) var(--qz-5); border-top: 1px solid var(--qz-line); }
.qzv-activity-modal__more {
  width: 100%; padding: 10px var(--qz-4); cursor: pointer;
  border: 1px solid var(--qz-line); border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-surface); color: var(--qz-accent-ink);
  font-family: inherit; font-size: 14px; font-weight: var(--qz-fw-strong, 700);
}
.qzv-activity-modal__more:hover { background: var(--qz-accent-soft); }
.qzv-activity-modal__more:disabled { opacity: .6; cursor: default; }
/* La date pousse a droite ; le libelle garde le reste et peut se tronquer. */
.qzv-activity-modal .qzv-activity__item { align-items: center; }
.qzv-activity-modal .qzv-activity__item > span { flex: 1 1 auto; min-width: 0; }
.qzv-activity__when { flex: 0 0 auto; margin-left: auto; font-size: 11px; color: var(--qz-muted); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Feuille de confirmation d'achat.

   Elle s'interpose entre le clic et le paiement, et sert deux exigences : la
   renonciation au droit de retractation (droit francais) et la divulgation des
   conditions d'abonnement (guideline 3.1.2 d'Apple).

   z-index tres haut : elle doit passer AU-DESSUS de la feuille boutique, qui
   est elle-meme une modale. Une confirmation d'achat rendue derriere ce qu'elle
   confirme serait au mieux invisible, au pire cliquable a l'aveugle.
   --------------------------------------------------------------------------- */
.qzv-buyc { position: fixed; inset: 0; z-index: 20050; display: flex; align-items: flex-end; justify-content: center; }
.qzv-buyc__backdrop { position: absolute; inset: 0; background: rgba(4, 26, 20, .55); }
.qzv-buyc__panel {
  position: relative; width: 100%; max-width: 460px;
  background: var(--qz-surface, #fff); color: var(--qz-text);
  border-radius: 20px 20px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .22);
  animation: qzvBuycUp .2s ease;
}
@media (min-width: 560px) {
  .qzv-buyc { align-items: center; }
  .qzv-buyc__panel { border-radius: 20px; }
}
@keyframes qzvBuycUp { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }

.qzv-buyc__title { margin: 0 0 14px; font-size: 1.05rem; font-weight: 800; }
.qzv-buyc__product {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--qz-accent-soft); border: 1px solid var(--qz-accent-mid, var(--qz-line));
  font-size: .92rem;
}
.qzv-buyc__price { font-weight: 800; white-space: nowrap; }
/* Les conditions d'abonnement : lisibles, pas relegues en petits caracteres.
   C'est precisement ce que la guideline 3.1.2 reproche aux apps rejetees. */
.qzv-buyc__terms { margin: 12px 0 0; font-size: .8rem; line-height: 1.55; color: var(--qz-muted); }

.qzv-buyc__waiver { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 10px; cursor: pointer; }
.qzv-buyc__waiver input { margin-top: .2rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--qz-accent); }
.qzv-buyc__waiver span { font-size: .82rem; line-height: 1.5; }

.qzv-buyc__links { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; font-size: .78rem; }
.qzv-buyc__links a { color: var(--qz-accent-ink, var(--qz-accent)); }

.qzv-buyc__actions { display: flex; gap: 10px; }
.qzv-buyc__cancel, .qzv-buyc__ok {
  flex: 1 1 0; padding: 12px 14px; border-radius: var(--qz-r-pill, 999px);
  font-size: .9rem; font-weight: 700; cursor: pointer;
}
.qzv-buyc__cancel { background: transparent; border: 1px solid var(--qz-line-strong, var(--qz-line)); color: var(--qz-muted); }
.qzv-buyc__ok { background: var(--qz-accent); border: 1px solid var(--qz-accent); color: var(--qz-on-accent); }
/* Le bouton inerte doit SE VOIR inerte : sans cela, l'utilisateur clique et
   croit que l'app ne repond pas. */
.qzv-buyc__ok[disabled] { opacity: .45; cursor: not-allowed; }

.qzv-buyc__error { margin: 12px 0 0; font-size: .8rem; color: var(--qz-error, #d13d3d); }

/* ── Releve des pieces (dans la feuille boutique) ──────────────────────────
   « Ou sont passees mes pieces » se demande devant son solde : le solde est
   donc le bouton qui ouvre le releve, et il doit SE VOIR cliquable — sans le
   chevron, personne ne devine qu'il y a quelque chose derriere.

   ENCRE CONTRE FOND : les montants prennent les jetons `--qz-*-ink`, calibres
   pour du TEXTE (4.5:1). Un `--qz-success` nu est un fond ; en clair il tombe
   sous le seuil, et un releve de compte illisible ne sert a rien. */
.qzv-shop__balance {
  background: none; border: 0; padding: 4px 6px; margin: -4px -6px;
  border-radius: var(--qz-r-control, 10px); cursor: pointer;
  transition: background var(--qz-dur-ui, 160ms) var(--qz-ease, ease);
}
.qzv-shop__balance:hover { background: var(--qz-surface); }
.qzv-shop__balance:active { transform: scale(var(--qz-press-scale, .97)); }
.qzv-shop__balance-chev { font-size: .7rem; color: var(--qz-muted); margin-left: 2px; }

.qzv-hist { display: flex; flex-direction: column; gap: 12px; text-align: left; }

.qzv-hist__back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-size: .88rem; font-weight: var(--qz-fw-strong); color: var(--qz-text);
}
.qzv-hist__back .fa-arrow-left { color: var(--qz-accent); }
.qzv-hist__back:active { transform: scale(var(--qz-press-scale, .97)); }

.qzv-hist__summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--qz-r-card, 14px);
  background: var(--qz-surface); border: 1px solid var(--qz-line);
}
.qzv-hist__sum-lbl { flex: 1 1 auto; font-size: .82rem; color: var(--qz-muted); text-align: left; }
.qzv-hist__sum-val { font-weight: var(--qz-fw-strong); font-variant-numeric: tabular-nums; }
.qzv-hist__sum-val--credit { color: var(--qz-success-ink); }
.qzv-hist__sum-val--debit  { color: var(--qz-muted); }

.qzv-hist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.qzv-hist__day {
  padding: 12px 2px 6px; font-size: .76rem; font-weight: var(--qz-fw-strong);
  color: var(--qz-muted); text-transform: uppercase; letter-spacing: .04em;
}

.qzv-hist__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "icon main amounts" "icon time amounts";
  align-items: center; column-gap: 10px;
  padding: 10px 2px; border-top: 1px solid var(--qz-line);
}
.qzv-hist__day + .qzv-hist__row { border-top: 0; }

.qzv-hist__icon {
  grid-area: icon; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; background: var(--qz-surface);
  border: 1px solid var(--qz-line); color: var(--qz-muted);
}
.qzv-hist__icon--credit { background: var(--qz-accent-soft); border-color: transparent; color: var(--qz-success-ink); }

.qzv-hist__main { grid-area: main; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.qzv-hist__title {
  font-size: .9rem; font-weight: var(--qz-fw-strong); color: var(--qz-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qzv-hist__detail { font-size: .76rem; color: var(--qz-muted); }
.qzv-hist__time { grid-area: time; font-size: .72rem; color: var(--qz-muted); text-align: left; }

.qzv-hist__amounts {
  grid-area: amounts; display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; white-space: nowrap;
}
.qzv-hist__delta { font-weight: var(--qz-fw-strong); font-variant-numeric: tabular-nums; font-size: .95rem; }
.qzv-hist__delta--credit { color: var(--qz-success-ink); }
.qzv-hist__delta--debit  { color: var(--qz-text); }
.qzv-hist__after { font-size: .72rem; color: var(--qz-text); font-variant-numeric: tabular-nums; }

/* Le journal n'a pas toujours ete tenu : ce point de depart evite qu'un ecart
   entre la somme des lignes et le solde passe pour une erreur. */
.qzv-hist__opening {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--qz-r-card, 14px);
  background: var(--qz-surface); border: 1px dashed var(--qz-line);
  font-size: .8rem; color: var(--qz-muted);
}
.qzv-hist__opening strong { color: var(--qz-text); font-variant-numeric: tabular-nums; }

.qzv-hist__state { margin: 4px 0 0; font-size: .84rem; color: var(--qz-muted); text-align: center; }
.qzv-hist__state:empty { display: none; }

.qzv-hist__more {
  align-self: center; padding: 8px 18px; border-radius: var(--qz-r-pill, 999px);
  border: 1px solid var(--qz-line); background: var(--qz-surface);
  color: var(--qz-text); font-size: .85rem; font-weight: var(--qz-fw-strong); cursor: pointer;
}
.qzv-hist__more[disabled] { opacity: .45; cursor: not-allowed; }
.qzv-hist__more:active { transform: scale(var(--qz-press-scale, .97)); }

/* A 375 px, montant et libelle se disputaient la ligne : le titre se tronquait
   a deux mots. Le montant garde sa colonne, le reste cede. */
@media (max-width: 400px) {
  .qzv-hist__row { grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 8px; }
  .qzv-hist__icon { width: 30px; height: 30px; }
  .qzv-hist__title { font-size: .86rem; }
}