/* ============================================================================
   QZR vNext — Showcase solo (avant-partie) « single screen »
   ----------------------------------------------------------------------------
   Reskin de la modale showcase legacy (playgroundShowCaseTemplate, dialog
   .moadal-dialog-showcase) vers un écran vNext unique : hero (titre + méta +
   mascotte) → chips d'infos → « Objectif du jour » (badges + points potentiels)
   → CTA « Commencer ».

   Les crochets fonctionnels sont préservés côté markup :
     #customGoalsBadges / #globalGoalsBadges / .goal-badge  (sélection d'objectif)
     [data-goals-potential-panel] + [data-goals-potential-*] (points potentiels)
     .theme-switcher-container                                (thème playground)
     .start-solo-from-showcase                                (lancement solo)

   Le thème dynamique legacy est « opt-in » via les classes *-dynamic : le markup
   vNext ne les utilise pas → il n'est pas re-coloré. On force malgré tout les
   propriétés sensibles en !important pour couvrir d'éventuels styles inline.
   Chargé APRÈS vnext-tokens.css + vnext-mascot.css.
   ============================================================================ */

/* ── Bottom sheet ───────────────────────────────────────────────────────────
   Sheet plaquée en bas, pleine largeur (max 480), coins arrondis en haut, avec
   slide-up. Le backdrop est `static` + clavier off (dialog.js), donc la SEULE
   sortie possible est la croix : on la garde (discrète, coin haut-droit) et on
   ajoute une poignée (grabber). */
.moadal-dialog-showcase.modal-dialog {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 480px !important;
  min-height: 100% !important;
  align-items: flex-end !important;   /* colle la sheet en bas (modal-dialog-centered = flex) */
}
.modal.fade .moadal-dialog-showcase {
  transform: translateY(100%) !important;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1) !important;
}
.modal.show .moadal-dialog-showcase { transform: translateY(0) !important; }

/* ── Surface de la sheet ────────────────────────────────────────────────────── */
.moadal-dialog-showcase .qzr-showcase-modal-content {
  background: var(--qz-surface, #FFFFFF) !important;
  border: 1px solid var(--qz-line, #DCEFE8) !important;
  border-bottom: 0 !important;
  border-radius: 28px 28px 0 0 !important;   /* arrondi haut seulement */
  box-shadow: 0 -14px 44px rgba(6, 52, 42, .20) !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.moadal-dialog-showcase .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Croix discrète, coin haut-droit (le header legacy ne porte qu'elle) */
.moadal-dialog-showcase .modal-header {
  position: absolute !important;
  top: 10px; right: 12px;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  z-index: 6;
}
.moadal-dialog-showcase .modal-header .modal-title { display: none !important; }
.moadal-dialog-showcase .modal-header .btn-close {
  width: 30px; height: 30px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--qz-r-pill);
  background-color: var(--qz-screen, #F1FAF6);
  opacity: .7;
  background-size: 11px;
}
.moadal-dialog-showcase .modal-header .btn-close:hover { opacity: 1; }
/* Dark mode: Bootstrap's close X is a dark SVG on the dark --qz-screen circle →
   invisible. Swap to a light X (a filter would flip the circle light too). */
:root[data-mode="dark"] .moadal-dialog-showcase .modal-header .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23eaf2ef'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .moadal-dialog-showcase .modal-header .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23eaf2ef'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  }
}

/* Police du showcase : Nunito (arrondie, amicale, « gamifiée ») sur toute la
   modale — contenu + footer (bouton Commencer). Repli système si non chargée. */
.moadal-dialog-showcase,
.moadal-dialog-showcase .qz-showcase[data-qz-skin="solo-showcase"],
.moadal-dialog-showcase .start-solo-from-showcase {
  font-family: 'Nunito', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
.qz-showcase[data-qz-skin="solo-showcase"] {
  color: var(--qz-text, #06342A);
  text-align: left !important;
  padding: var(--qz-2) var(--qz-6) var(--qz-4);
  display: flex;
  flex-direction: column;
  gap: 24px;                 /* respiration : grandes marges entre blocs */
  -webkit-font-smoothing: antialiased;
}
.qz-showcase[data-qz-skin="solo-showcase"] * { box-sizing: border-box; }
/* Poignée (grabber) en tête de sheet */
.qz-showcase[data-qz-skin="solo-showcase"]::before {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-line-strong, #CDE7DC);
  margin: var(--qz-2) auto var(--qz-1);
}

/* ── Hero : titre + méta + mascotte ─────────────────────────────────────────── */
.qz-showcase .qzsc-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.qz-showcase .qzsc-hero-text { flex: 1 1 auto; min-width: 0; }
.qz-showcase .qzsc-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: var(--qz-fw-strong, 500);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--qz-muted, #5E8A7C);
}
.qz-showcase .qzsc-title {
  margin: 0 0 5px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--qz-text, #06342A);
  text-transform: lowercase;   /* + ::first-letter en capitale → « une seule majuscule » */
}
.qz-showcase .qzsc-title::first-letter { text-transform: uppercase; }
.qz-showcase .qzsc-meta {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--qz-muted, #5E8A7C);
}
.qz-showcase .qzsc-mascot {
  width: 64px;
  height: 76px;
  flex: 0 0 auto;
}
.qz-showcase .qzsc-mascot .qzr-mascot-svg { width: 100%; height: 100%; }

/* ── Chips d'infos ──────────────────────────────────────────────────────────── */
.qz-showcase .qzsc-chips {
  display: flex;
  gap: 8px;
}
.qz-showcase .qzsc-chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--qz-screen, #F1FAF6) !important;
  border: 1px solid var(--qz-line, #DCEFE8) !important;
  border-radius: 14px;
  padding: var(--qz-2) var(--qz-3);
}
.qz-showcase .qzsc-chip-k {
  font-size: 10.5px;
  font-weight: var(--qz-fw-strong, 500);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--qz-muted, #5E8A7C) !important;
}
.qz-showcase .qzsc-chip-v {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: var(--qz-fw-strong, 500);
  color: var(--qz-text, #06342A) !important;
  line-height: 1.1;
}
.qz-showcase .qzsc-chip-v > i { color: var(--qz-accent, #16A87A); font-size: 13px; }
/* Le chip Thème héberge le sélecteur de thème playground existant. */
.qz-showcase .qzsc-chip--theme .theme-switcher-container {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  margin-top: 1px;
}
.qz-showcase .qzsc-chip--theme .theme-switcher-container .spinner-border {
  width: 15px;
  height: 15px;
  border-width: 2px;
  color: var(--qz-accent, #16A87A);
}

/* ── Objectif du jour ───────────────────────────────────────────────────────── */
.qz-showcase .qzsc-section-label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: var(--qz-fw-strong, 500);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--qz-muted, #5E8A7C);
}
.qz-showcase .goals-showcase-section {
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
}
.qz-showcase .goals-swiper-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 var(--qz-2);
  scrollbar-width: none;
}
.qz-showcase .goals-swiper-container::-webkit-scrollbar { display: none; }
.qz-showcase .goals-swiper-container { scroll-snap-type: x mandatory; }
.qz-showcase .goals-badges-track {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch;
  padding: .45rem;
}
.qz-showcase .goals-badges-track > .goal-badge { flex: 0 0 100%; scroll-snap-align: start; }

/* Objectif → carte horizontale vNext (icône + libellé + cible), sélectionnable */
.qz-showcase .goal-badge {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);   /* minmax(0,·) → la colonne texte se contraint et le libellé passe à la ligne */
  align-items: center;
  column-gap: 12px;
  width: 100%;
  padding: var(--qz-3) var(--qz-4) !important;
  background: var(--qz-accent-soft, #E1F5EE) !important;
  border: 1.5px solid var(--qz-line, #C9EADD) !important;   /* was hardcoded light teal → didn't invert in dark */
  border-radius: 16px !important;
  color: var(--qz-text, #06342A) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: var(--qz-fw-strong, 500) !important;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--qz-dur-ui) ease, box-shadow var(--qz-dur-ui) ease;
}
.qz-showcase .goal-badge:hover { border-color: var(--qz-accent-mid, #5DCAA5) !important; }
.qz-showcase .goal-badge.is-selected,
.qz-showcase .goal-badge.selected,
.qz-showcase .goal-badge--selected,
.qz-showcase .goal-badge[aria-pressed="true"] {
  /* border-color: var(--qz-accent, #16A87A) !important; */
  box-shadow: 0 0 0/* 3px rgba(22, 168, 122, .16) */;
}
.qz-showcase .goal-badge-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--qz-surface, #FFFFFF);
  display: flex; align-items: center; justify-content: center;
  font-size: 0 !important;              /* masque l'emoji legacy (glyphe « tofu ») */
}
.qz-showcase .goal-badge-icon::before {
  content: "\f140";                     /* fa-bullseye */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 18px;
  color: var(--qz-accent, #16A87A);
}
.qz-showcase .goal-badge-label {
  grid-column: 2; align-self: end;
  min-width: 0;
  font-size: 14px !important;
  font-weight: var(--qz-fw-strong, 500) !important;
  color: var(--qz-accent-ink, #0F6E56) !important;   /* mode-adaptive: accent-deep was invisible on the dark badge in dark mode */
  line-height: 1.25;
  white-space: normal !important;   /* le badge legacy est en nowrap → on autorise le retour ligne */
  overflow-wrap: anywhere;
}
.qz-showcase .goal-badge-value,
.qz-showcase .goal-badge-history {
  grid-column: 2; align-self: start;
  min-width: 0;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--qz-muted, #5E8A7C) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.qz-showcase .goal-badge-lock { display: none !important; }
.qz-showcase .goals-placeholder-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--qz-3) var(--qz-4);
  border-radius: 14px;
  background: var(--qz-screen, #F1FAF6) !important;
  border: 1px dashed var(--qz-line-strong, #CDE7DC) !important;
  color: var(--qz-muted, #5E8A7C) !important;
  font-size: 12.5px;
  font-weight: 400;
}

/* Points potentiels */
.qz-showcase .goals-showcase-potential {
  display: flex;
  gap: 8px;
  margin-top: var(--qz-2);
}
.qz-showcase .goals-potential-metric {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: var(--qz-screen, #F1FAF6) !important;
  border: 1px solid var(--qz-line, #DCEFE8) !important;
  border-radius: 14px;
  padding: var(--qz-2) var(--qz-3);
}
.qz-showcase .goals-potential-label {
  font-size: 10.5px;
  font-weight: var(--qz-fw-strong, 500);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--qz-muted, #5E8A7C) !important;
}
.qz-showcase .goals-potential-value {
  font-size: 18px;
  font-weight: var(--qz-fw-strong, 500);
  color: var(--qz-accent-ink, #0F6E56) !important;
  line-height: 1.1;
}
.qz-showcase .goals-potential-detail {
  font-size: 11px;
  font-weight: 400;
  color: var(--qz-muted, #5E8A7C) !important;
}

/* ── CTA « Commencer » (footer, liseré bas 4px) ─────────────────────────────── */
.moadal-dialog-showcase .modal-footer { border: 0 !important; padding: var(--qz-2) var(--qz-5) var(--qz-4) !important; }
.moadal-dialog-showcase .start-solo-from-showcase {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin: 0 !important;
  padding: var(--qz-4) var(--qz-5) !important;
  background: var(--qz-accent, #16A87A) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: inset 0 -4px 0 rgba(6, 52, 42, .30) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: var(--qz-fw-strong, 500) !important;
  transition: background var(--qz-dur-ui) ease, transform .08s ease, box-shadow .08s ease;
}
.moadal-dialog-showcase .start-solo-from-showcase:hover {
  background: var(--qz-accent-deep, #0F6E56) !important;
}
.moadal-dialog-showcase .start-solo-from-showcase:active {
  transform: scale(var(--qz-press-scale));
  box-shadow: inset 0 -2px 0 rgba(6, 52, 42, .30) !important;
}
.moadal-dialog-showcase .start-solo-from-showcase .start-btn-icon { font-size: 15px !important; padding: 0 !important; }
.moadal-dialog-showcase .start-solo-from-showcase .start-btn-text { padding: 0 !important; font-size: 16px !important; }

/* ── Nunito : tuning des graisses (la police rend plus léger que l'UI par
   défaut → on monte titres/labels/valeurs) + respiration accrue entre blocs ── */
.qz-showcase .qzsc-eyebrow { font-weight: 700; }
.qz-showcase .qzsc-meta { font-weight: 600; }
.qz-showcase .qzsc-goals { /*display: flex;*/ flex-direction: column; gap: 14px; }
.qz-showcase .qzsc-section-label { font-weight: 700; margin: 0; }
.qz-showcase .goals-showcase-section { display: flex; flex-direction: column; gap: 12px; }
.qz-showcase .qzsc-chip { padding: var(--qz-3) var(--qz-4); }
.qz-showcase .qzsc-chip-k { font-weight: 700; }
.qz-showcase .qzsc-chip-v { font-weight: 700; }
.qz-showcase .goal-badge { padding: var(--qz-4) !important; }
.qz-showcase .goal-badge-label { font-weight: 700 !important; }
.qz-showcase .goal-badge-value,
.qz-showcase .goal-badge-history { font-weight: 600 !important; }
.qz-showcase .goals-showcase-potential { margin-top: 0; }
.qz-showcase .goals-potential-metric { padding: 1rem; }
.qz-showcase .goals-potential-label { font-weight: 700; }
/* .qz-showcase .goals-potential-value { font-weight: 800; } */
.moadal-dialog-showcase .start-solo-from-showcase { font-weight: 700 !important; }

/* --- Offline practice: the pre-game promise ------------------------------
   Replaces "Objectif session" + "Points potentiels à gagner" when the run is
   about to go through the local engine. Those advertise XP an offline run
   cannot award (D1 — unranked, zero XP), and the player reads them BEFORE
   committing; the result screen's banner arrives too late to be the only
   warning. Deliberately the same warning tokens as that banner
   (vnext-result.css, body.qzr-offline-run) so both moments read as one state.
   Whether this renders is decided by QzrOffline.willRunOffline — the same
   predicate that picks the transport.                                       */
.qz-showcase .qzsc-offline-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--qz-3);
  border-radius: var(--qz-r-control, 12px);
  background: var(--qz-warning-bg);
  color: var(--qz-warning-ink);
  line-height: 1.35;
}
.qz-showcase .qzsc-offline-note i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 1rem;
}
.qz-showcase .qzsc-offline-note span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.qz-showcase .qzsc-offline-note strong {
  font-weight: 700;
  font-size: var(--qz-fs-sm, .88rem);
}
.qz-showcase .qzsc-offline-note span {
  font-size: var(--qz-fs-xs, .78rem);
}
/* The hook container is kept in the DOM but must not render. `hidden` alone is
   not enough: `.qz-showcase .goals-showcase-section { display: flex }` (0,2,0)
   outranks the user-agent `[hidden]` rule (0,1,0). Win on specificity (0,4,0)
   rather than with !important. */
.qz-showcase .qzsc-goals--offline .goals-showcase-section[hidden] { display: none; }