/* ============================================================================
   QZR vNext — Compétitions hub (Feature 6, écran d'entrée)
   ----------------------------------------------------------------------------
   Reskin du hub #competitions (vue "browse") vers les tokens vNext : bandeau
   d'entrée + rejoindre par code + ticker + "En direct" (2 cartes riches puis
   queue compacte) + "À venir" en étagère + podium + "Créer une compétition".
   Scopé par [data-qz-skin="competitions"] (posé sur la racine
   .competitions-pro-container par competitions.js buildShell). Le hub est bâti
   par buildBrowseView / buildLiveCardRich / buildLiveCardCompact /
   buildUpcomingCard / buildGlobalRankingSection (classes .qz-comp-* / .qz-champ-*).
   Chargé APRÈS competitions.css + vnext-tokens.css.

   Règle tenue : aucune teinte hors charte. La "chaleur" du bandeau vient du BAS
   de la rampe accent (--qz-600 → --qz-900), qui existait déjà et n'était employé
   nulle part à pleine surface ; l'or --qz-energy reste réservé au podium et au XP.
   ============================================================================ */

[data-qz-skin="competitions"] {
  background: var(--qz-screen, #F1FAF6);
  color: var(--qz-text, #06342A);
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px calc(16px + 72px);
}

/* ── Header (réutilise .competition-banner comme bloc titre) ────────────────── */
[data-qz-skin="competitions"] .competition-banner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 2px 8px !important;
  display: block !important;
}
[data-qz-skin="competitions"] .competition-eyebrow,
[data-qz-skin="competitions"] .competition-banner-code { display: none !important; }
[data-qz-skin="competitions"] .competition-banner h1 {
  font-size: 1.7rem;
  font-weight: var(--qz-fw-strong, 500);
  color: var(--qz-text, #06342A);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
[data-qz-skin="competitions"] .competition-banner p {
  font-size: .9rem;
  color: var(--qz-muted, #5E8A7C);
  margin: 0;
}

/* ── Masque la toolbar "pro" (onglets/recherche/créer) sur le hub ──────────── */
[data-qz-skin="competitions"].competition-shell--view-browse .competitions-pro-header { display: none !important; }

/* Le bandeau d'entrée porte désormais le titre : le bloc .competition-banner
   ferait doublon sur la vue browse. Il reste en place sur detail/create. */
[data-qz-skin="competitions"].competition-shell--view-browse .competition-banner { display: none !important; }

/* ── Bandeau d'entrée ──────────────────────────────────────────────────────
   Pleine largeur : les marges négatives annulent le padding 16px de la colonne.
   Coins bas au rayon "écran" (30px). Le blanc reste lisible sur les douze thèmes
   parce que le fond prend le bas de la rampe, y compris pour les accents clairs
   (safran, lime, azur) où --qz-on-accent bascule sur l'encre foncée. */
[data-qz-skin="competitions"] .qz-comp-hero {
  position: relative;
  overflow: hidden;
  margin: -16px -16px 0;
  padding: 26px 20px 54px;
  border-radius: 0 0 var(--qz-r-screen, 30px) var(--qz-r-screen, 30px);
  background:
    radial-gradient(115% 88% at 82% 6%, color-mix(in srgb, var(--qz-400, #16A87A) 62%, transparent), transparent 62%),
    linear-gradient(152deg, var(--qz-600, #0F6E56), var(--qz-900, #06342A));
  color: #FFFFFF;
}
[data-qz-skin="competitions"] .qz-comp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 34%, rgba(255, 255, 255, .10) 48%, transparent 60%);
}
[data-qz-skin="competitions"] .qz-comp-hero__grid {
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .65) 1px, transparent 0);
  background-size: 19px 19px;
  -webkit-mask-image: linear-gradient(190deg, #000 8%, transparent 72%);
          mask-image: linear-gradient(190deg, #000 8%, transparent 72%);
}
[data-qz-skin="competitions"] .qz-comp-hero__in { position: relative; z-index: 2; }
[data-qz-skin="competitions"] .qz-comp-hero__eyebrow {
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  font-weight: var(--qz-fw-strong, 500);
}
[data-qz-skin="competitions"] .qz-comp-hero__h {
  margin: 8px 0 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.18;
  max-width: 15ch;
  color: #FFFFFF;
}
[data-qz-skin="competitions"] .qz-comp-hero__h em {
  font-style: normal;
  color: var(--qz-energy, #F5C542);
}
[data-qz-skin="competitions"] .qz-comp-hero__sub {
  margin: 7px 0 0;
  font-size: .84rem;
  color: rgba(255, 255, 255, .78);
  max-width: 26ch;
}

/* Mascotte : rendue depuis window.qzrMascotSvg (source unique, définie par
   quizz.online.realtime-solo.js). Le wrapper porte la taille, le SVG hérite. */
[data-qz-skin="competitions"] .qz-comp-hero__bot {
  position: absolute;
  right: -6px;
  bottom: -14px;
  width: 124px;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .34));
  animation: qzCompBotFloat 3.4s var(--qz-ease, cubic-bezier(.2, .7, .3, 1)) infinite;
}
[data-qz-skin="competitions"] .qz-comp-hero__bot .qzr-mascot-svg,
[data-qz-skin="competitions"] .qz-comp-hero__bot svg {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes qzCompBotFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}

/* Pastille pulsée "en direct" — partagée carte riche / ligne compacte. */
[data-qz-skin="competitions"] .qz-comp-pulse {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--qz-energy, #F5C542);
  flex: 0 0 auto;
  display: inline-block;
}
[data-qz-skin="competitions"] .qz-comp-pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--qz-energy, #F5C542);
  opacity: 0;
  animation: qzCompPing 1.7s var(--qz-ease, cubic-bezier(.2, .7, .3, 1)) infinite;
}
@keyframes qzCompPing {
  0%        { transform: scale(.55); opacity: .9; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

/* ── Rejoindre par code — chevauche le bas du bandeau ──────────────────────── */
[data-qz-skin="competitions"] .qz-comp-float {
  position: relative;
  z-index: 5;
  margin: -34px 0 0;
}
[data-qz-skin="competitions"] .qz-comp-join {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: calc(var(--qz-r-card, 16px) + 4px);
  box-shadow: var(--qz-shadow-md, 0 14px 34px rgba(15, 23, 42, .08));
}
[data-qz-skin="competitions"] .qz-comp-join input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--qz-text, #06342A);
  font-family: inherit;
  font-size: .92rem;
  letter-spacing: .06em;
  padding: 11px 12px;
}
[data-qz-skin="competitions"] .qz-comp-join input::placeholder { letter-spacing: 0; }
[data-qz-skin="competitions"] .qz-comp-join input:focus { outline: none; }
[data-qz-skin="competitions"] .qz-comp-join-btn {
  flex: 0 0 auto;
  padding: 11px 18px;
  border: none;
  border-radius: var(--qz-r-control, 12px);
  background: var(--qz-accent, #16A87A);
  color: var(--qz-on-accent, #FFFFFF);
  border-bottom: 3px solid var(--qz-accent-deep, #0F6E56);
  font-family: inherit;
  font-weight: var(--qz-fw-strong, 500);
  font-size: .88rem;
  cursor: pointer;
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, ease);
}
[data-qz-skin="competitions"] .qz-comp-join-btn:active { transform: scale(var(--qz-press-scale)); border-bottom-width: 1px; }

/* ── Ticker des parties en cours ───────────────────────────────────────────── */
[data-qz-skin="competitions"] .qz-comp-ticker {
  position: relative;
  margin: 16px -16px 0;
  padding: 9px 0;
  overflow: hidden;
  background: var(--qz-accent-soft, #E6F5EF);
  border-top: 1px solid var(--qz-line, #DCEFE8);
  border-bottom: 1px solid var(--qz-line, #DCEFE8);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
[data-qz-skin="competitions"] .qz-comp-ticker__rail {
  display: flex;
  width: max-content;
  animation: qzCompTick 22s linear infinite;
}
[data-qz-skin="competitions"] .qz-comp-ticker__rail:hover { animation-play-state: paused; }
@keyframes qzCompTick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
[data-qz-skin="competitions"] .qz-comp-ticker__it {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  white-space: nowrap;
  font-size: .78rem;
  color: var(--qz-accent-ink, #0F6E56);
  font-weight: var(--qz-fw-strong, 500);
}
[data-qz-skin="competitions"] .qz-comp-ticker__d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qz-accent, #16A87A);
  flex: 0 0 auto;
}

/* ── Sections ──────────────────────────────────────────────────────────────── */
[data-qz-skin="competitions"] .qz-comp-sec { margin-top: 24px; }
/* --flush : l'étagère déborde volontairement jusqu'aux bords de la colonne. */
[data-qz-skin="competitions"] .qz-comp-sec--flush { margin-left: -16px; margin-right: -16px; }
[data-qz-skin="competitions"] .qz-comp-sec--flush > .qz-comp-sechead { padding: 0 16px; }
[data-qz-skin="competitions"] .qz-comp-sec__pad { padding: 0 16px; }
[data-qz-skin="competitions"] .qz-comp-sechead {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
}
[data-qz-skin="competitions"] .qz-comp-sechead__t {
  margin: 0;
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--qz-text, #06342A);
}
[data-qz-skin="competitions"] .qz-comp-count {
  font-size: .72rem;
  font-weight: 600;
  color: var(--qz-accent-ink, #0F6E56);
  background: var(--qz-accent-soft, #E6F5EF);
  border-radius: var(--qz-r-pill, 999px);
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="competitions"] .qz-comp-note {
  font-size: .85rem;
  color: var(--qz-muted, #5E8A7C);
  padding: 14px 4px;
  text-align: center;
}

/* ── Palier 1 · carte riche « en direct » ──────────────────────────────────── */
[data-qz-skin="competitions"] .qz-comp-live { display: flex; flex-direction: column; gap: 12px; }
[data-qz-skin="competitions"] .qz-comp-lc {
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-card, 16px);
  overflow: hidden;
  box-shadow: var(--qz-shadow-sm, 0 8px 20px rgba(15, 23, 42, .06));
  transition: transform var(--qz-dur-ui) var(--qz-ease, ease), box-shadow var(--qz-dur-ui) var(--qz-ease, ease), border-color var(--qz-dur-ui) var(--qz-ease, ease);
}
[data-qz-skin="competitions"] .qz-comp-lc:hover {
  transform: translateY(-2px);
  border-color: var(--qz-accent-mid, #5DCAA5);
  box-shadow: var(--qz-shadow-md, 0 14px 34px rgba(15, 23, 42, .08));
}
[data-qz-skin="competitions"] .qz-comp-lc__strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(90deg, var(--qz-600, #0F6E56), var(--qz-800, #0A4F40));
  color: #FFFFFF;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
[data-qz-skin="competitions"] .qz-comp-lc__code {
  margin-left: auto;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--qz-r-pill, 999px);
  padding: 2px 9px;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="competitions"] .qz-comp-lc__body { padding: 14px; }
[data-qz-skin="competitions"] .qz-comp-lc__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--qz-text, #06342A);
}
[data-qz-skin="competitions"] .qz-comp-lc__cat {
  margin: 3px 0 0;
  font-size: .78rem;
  color: var(--qz-muted, #5E8A7C);
  font-variant-numeric: tabular-nums;
}

/* Tunnel inscrits → présents → qualifiés — TROIS jauges EMPILÉES (l'une après
   l'autre), chacune sa couleur, pleine largeur. La piste de fond reste visible
   même à 0 (une étape sans présent ne disparaît donc pas), et la légende dessous
   reprend chaque couleur en pastille pour dire quelle teinte = quel compteur.
   Chaque barre se remplit relativement au nombre d'inscrits (la base du tunnel). */
[data-qz-skin="competitions"] .qz-comp-lc__funnel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 13px;
}
[data-qz-skin="competitions"] .qz-comp-lc__bar {
  display: block;
  width: 100%;
  height: 7px;
  border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-accent-soft, #E6F5EF);
  overflow: hidden;
}
[data-qz-skin="competitions"] .qz-comp-lc__bar i {
  display: block;
  height: 100%;
  border-radius: var(--qz-r-pill, 999px);
  animation: qzCompFill var(--qz-dur-bar, 1100ms) var(--qz-ease, ease) both;
}
/* Trois couleurs distinctes : accent clair → accent → énergie (or). L'or reste
   réservé à l'étape finale « qualifiés », cohérent avec son emploi XP/podium. */
[data-qz-skin="competitions"] .qz-comp-lc__bar:nth-child(1) i { background: var(--qz-accent-mid, #5DCAA5); }
[data-qz-skin="competitions"] .qz-comp-lc__bar:nth-child(2) i { background: var(--qz-accent, #16A87A); }
[data-qz-skin="competitions"] .qz-comp-lc__bar:nth-child(3) i { background: var(--qz-energy, #F5C542); }
@keyframes qzCompFill { from { width: 0 !important; } }

/* Légende : une rangée de trois repères (même ordre que les jauges) + pastille
   de couleur reprenant la teinte de chaque barre = la légende de couleur. */
[data-qz-skin="competitions"] .qz-comp-lc__legend {
  display: flex;
  gap: 8px;
  margin-top: 7px;
  font-size: .72rem;
  color: var(--qz-muted, #5E8A7C);
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="competitions"] .qz-comp-lc__legend span {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
[data-qz-skin="competitions"] .qz-comp-lc__legend span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
[data-qz-skin="competitions"] .qz-comp-lc__legend span:nth-child(1)::before { background: var(--qz-accent-mid, #5DCAA5); }
[data-qz-skin="competitions"] .qz-comp-lc__legend span:nth-child(2)::before { background: var(--qz-accent, #16A87A); }
[data-qz-skin="competitions"] .qz-comp-lc__legend span:nth-child(3)::before { background: var(--qz-energy, #F5C542); }
[data-qz-skin="competitions"] .qz-comp-lc__legend b {
  color: var(--qz-text, #06342A);
  font-weight: 600;
}
[data-qz-skin="competitions"] .qz-comp-lc__row {
  display: flex;
  align-items: center;
  margin-top: 13px;
}
[data-qz-skin="competitions"] .qz-comp-lc__join {
  margin-left: auto;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--qz-r-control, 12px);
  background: var(--qz-accent, #16A87A);
  color: var(--qz-on-accent, #FFFFFF);
  border-bottom: 4px solid var(--qz-accent-deep, #0F6E56);
  font-family: inherit;
  font-weight: 600;
  font-size: .88rem;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, ease);
}
[data-qz-skin="competitions"] .qz-comp-lc__join:active { transform: scale(var(--qz-press-scale)); border-bottom-width: 2px; }

/* ── Palier 2 · queue compacte ─────────────────────────────────────────────── */
[data-qz-skin="competitions"] .qz-comp-tier {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 17px 0 10px;
}
[data-qz-skin="competitions"] .qz-comp-tier__l {
  font-size: .66rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--qz-muted, #5E8A7C);
  white-space: nowrap;
  font-weight: var(--qz-fw-strong, 500);
}
[data-qz-skin="competitions"] .qz-comp-tier::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--qz-line, #DCEFE8);
}
[data-qz-skin="competitions"] .qz-comp-tail { display: flex; flex-direction: column; gap: 8px; }
[data-qz-skin="competitions"] .qz-comp-tl {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-field, 13px);
  transition: border-color var(--qz-dur-ui) var(--qz-ease, ease);
}
[data-qz-skin="competitions"] .qz-comp-tl:hover { border-color: var(--qz-accent-mid, #5DCAA5); }
[data-qz-skin="competitions"] .qz-comp-tl .qz-comp-pulse {
  width: 7px;
  height: 7px;
  background: var(--qz-accent, #16A87A);
}
[data-qz-skin="competitions"] .qz-comp-tl .qz-comp-pulse::after {
  inset: -4px;
  border-color: var(--qz-accent, #16A87A);
}
[data-qz-skin="competitions"] .qz-comp-tl__b { flex: 1; min-width: 0; }
[data-qz-skin="competitions"] .qz-comp-tl__t {
  margin: 0;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--qz-text, #06342A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-qz-skin="competitions"] .qz-comp-tl__m {
  margin: 2px 0 0;
  font-size: .72rem;
  color: var(--qz-muted, #5E8A7C);
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="competitions"] .qz-comp-tl__go {
  flex: 0 0 auto;
  border: 1px solid var(--qz-line-strong, #CDE7DC);
  background: var(--qz-surface, #FFFFFF);
  color: var(--qz-accent-ink, #0F6E56);
  border-radius: var(--qz-r-control, 12px);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  transition: background var(--qz-dur-ui), border-color var(--qz-dur-ui);
}
[data-qz-skin="competitions"] .qz-comp-tl__go:hover {
  background: var(--qz-accent-soft, #E6F5EF);
  border-color: var(--qz-accent-mid, #5DCAA5);
}

/* Navigation desktop de l'étagère « À venir » : deux flèches discrètes ancrées
   à droite de l'en-tête, AU-DESSUS des cartes. Masquées en mobile (le doigt fait
   défiler) et quand le rail tient sans déborder (.is-hidden posé par le JS). */
[data-qz-skin="competitions"] .qz-comp-shelfnav {
  display: none;
  margin-left: auto;
  gap: 6px;
}
@media (min-width: 768px) {
  [data-qz-skin="competitions"] .qz-comp-shelfnav { display: inline-flex; }
  [data-qz-skin="competitions"] .qz-comp-shelfnav.is-hidden { display: none; }
}
[data-qz-skin="competitions"] .qz-comp-shelfnav__b {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--qz-line, #DCEFE8);
  background: transparent;
  color: var(--qz-muted, #5E8A7C);
  font-size: .7rem;
  cursor: pointer;
  transition: color var(--qz-dur-ui) ease, border-color var(--qz-dur-ui) ease, background var(--qz-dur-ui) ease, opacity var(--qz-dur-ui) ease;
}
[data-qz-skin="competitions"] .qz-comp-shelfnav__b:hover {
  color: var(--qz-accent-ink, #0F6E56);
  border-color: var(--qz-accent-mid, #5DCAA5);
  background: var(--qz-accent-soft, #E6F5EF);
}

/* ── Étagère « À venir » ───────────────────────────────────────────────────── */
[data-qz-skin="competitions"] .qz-comp-shelf {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 2px 16px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
[data-qz-skin="competitions"] .qz-comp-shelf::-webkit-scrollbar { display: none; }
[data-qz-skin="competitions"] .qz-comp-up {
  flex: 0 0 156px;
  scroll-snap-align: start;
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-card, 16px);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform var(--qz-dur-ui) var(--qz-ease, ease), border-color var(--qz-dur-ui) var(--qz-ease, ease);
}
[data-qz-skin="competitions"] .qz-comp-up:hover {
  transform: translateY(-3px);
  border-color: var(--qz-accent-mid, #5DCAA5);
}
[data-qz-skin="competitions"] .qz-comp-up__date {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--qz-accent-ink, #0F6E56);
}
[data-qz-skin="competitions"] .qz-comp-up__d {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="competitions"] .qz-comp-up__m {
  font-size: .64rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: var(--qz-fw-strong, 500);
}
[data-qz-skin="competitions"] .qz-comp-up__t {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--qz-text, #06342A);
}
[data-qz-skin="competitions"] .qz-comp-up__meta {
  margin: 0;
  font-size: .7rem;
  color: var(--qz-muted, #5E8A7C);
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="competitions"] .qz-comp-up__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
/* Pied de carte « À venir » — fidèle à la maquette : cloche + « N inscrits »
   (texte muet). Pas de pilule de compte à rebours par carte. */
[data-qz-skin="competitions"] .qz-comp-up__cnt {
  font-size: .72rem;
  color: var(--qz-muted, #5E8A7C);
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="competitions"] .qz-comp-bell {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--qz-line, #DCEFE8);
  background: var(--qz-surface, #FFFFFF);
  color: var(--qz-muted, #5E8A7C);
  cursor: pointer;
  transition: color var(--qz-dur-ui) ease, border-color var(--qz-dur-ui) ease, background var(--qz-dur-ui) ease;
}
[data-qz-skin="competitions"] .qz-comp-bell:hover {
  color: var(--qz-accent-ink, #0F6E56);
  border-color: var(--qz-accent-mid, #5DCAA5);
  background: var(--qz-accent-soft, #E6F5EF);
}

/* ── Créer une compétition (CTA plein, liseré bas) ─────────────────────────── */
[data-qz-skin="competitions"] .qz-comp-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 24px;
  padding: 15px;
  border: none;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--qz-400, #16A87A), var(--qz-600, #0F6E56));
  color: var(--qz-on-accent, #FFFFFF);
  border-bottom: 4px solid var(--qz-accent-deep, #0F6E56);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--qz-shadow-sm, 0 8px 20px rgba(15, 23, 42, .06));
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, ease);
}
[data-qz-skin="competitions"] .qz-comp-create:active { transform: scale(var(--qz-press-scale)); border-bottom-width: 2px; }

/* ── État vide habité ──────────────────────────────────────────────────────── */
[data-qz-skin="competitions"] .qz-comp-empty {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 14px;
  background: var(--qz-surface, #FFFFFF);
  border: 1px dashed var(--qz-line-strong, #CDE7DC);
  border-radius: var(--qz-r-card, 16px);
}
[data-qz-skin="competitions"] .qz-comp-empty__bot { width: 54px; flex: 0 0 auto; }
[data-qz-skin="competitions"] .qz-comp-empty__bot .qzr-mascot-svg,
[data-qz-skin="competitions"] .qz-comp-empty__bot svg { width: 100%; height: auto; display: block; }
[data-qz-skin="competitions"] .qz-comp-empty__b { min-width: 0; }
[data-qz-skin="competitions"] .qz-comp-empty__t {
  margin: 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--qz-text, #06342A);
}
[data-qz-skin="competitions"] .qz-comp-empty__p {
  margin: 2px 0 0;
  font-size: .78rem;
  color: var(--qz-muted, #5E8A7C);
}

/* ── S3 · Hall of champions — podium + queue ───────────────────────────────── */
[data-qz-skin="competitions"] .qz-champ-head-ico { color: var(--qz-energy, #F5C542); }
[data-qz-skin="competitions"] .qz-champ-podium {
  display: grid;
  grid-template-columns: 1fr 1.16fr 1fr;
  gap: 8px;
  align-items: end;
  padding: 16px 14px 0;
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-bottom: 0;
  border-radius: var(--qz-r-card, 16px) var(--qz-r-card, 16px) 0 0;
}
[data-qz-skin="competitions"] .qz-champ-pod {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
}
[data-qz-skin="competitions"] .qz-champ-pod.is-empty { visibility: hidden; }
[data-qz-skin="competitions"] .qz-champ-pod__ava {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 600;
  background: var(--qz-accent-soft, #E6F5EF);
  color: var(--qz-accent-ink, #0F6E56);
  border: 3px solid var(--qz-accent-mid, #5DCAA5);
}
[data-qz-skin="competitions"] .qz-champ-pod--1 .qz-champ-pod__ava {
  width: 58px;
  height: 58px;
  font-size: 1.3rem;
  border-color: var(--qz-energy, #F5C542);
}
[data-qz-skin="competitions"] .qz-champ-pod__crown {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .95rem;
  color: var(--qz-energy, #F5C542);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2));
  animation: qzChampCrown 2.6s var(--qz-ease, ease) infinite;
}
@keyframes qzChampCrown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
[data-qz-skin="competitions"] .qz-champ-pod__n {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  max-width: 11ch;
  overflow-wrap: anywhere;
  color: var(--qz-text, #06342A);
}
[data-qz-skin="competitions"] .qz-champ-pod__w {
  font-size: .68rem;
  color: var(--qz-muted, #5E8A7C);
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="competitions"] .qz-champ-pod__step {
  width: 100%;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--qz-accent-soft, #E6F5EF), color-mix(in srgb, var(--qz-accent-soft, #E6F5EF) 40%, var(--qz-surface, #FFFFFF)));
  border: 1px solid var(--qz-line, #DCEFE8);
  border-bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--qz-accent-ink, #0F6E56);
}
[data-qz-skin="competitions"] .qz-champ-pod--1 .qz-champ-pod__step {
  height: 66px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--qz-energy, #F5C542) 34%, var(--qz-surface, #FFFFFF)), color-mix(in srgb, var(--qz-energy, #F5C542) 10%, var(--qz-surface, #FFFFFF)));
  border-color: color-mix(in srgb, var(--qz-energy, #F5C542) 55%, var(--qz-surface, #FFFFFF));
  color: var(--qz-warning-ink, #9A6113);
}
[data-qz-skin="competitions"] .qz-champ-pod--2 .qz-champ-pod__step { height: 48px; }
[data-qz-skin="competitions"] .qz-champ-pod--3 .qz-champ-pod__step { height: 36px; }

[data-qz-skin="competitions"] .qz-champ-rest {
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-top: 0;
  border-radius: 0 0 var(--qz-r-card, 16px) var(--qz-r-card, 16px);
  padding: 4px 6px 6px;
}
[data-qz-skin="competitions"] .qz-champ-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border-radius: 10px;
}
[data-qz-skin="competitions"] .qz-champ-row + .qz-champ-row { border-top: 1px solid var(--qz-line, #DCEFE8); }
[data-qz-skin="competitions"] .qz-champ-rank {
  width: 20px;
  text-align: center;
  font-size: .74rem;
  color: var(--qz-muted, #5E8A7C);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="competitions"] .qz-champ-ava {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--qz-accent-soft, #E1F5EE);
  color: var(--qz-accent-ink, #0F6E56);
  font-size: .74rem;
  font-weight: 600;
  flex: 0 0 auto;
}
[data-qz-skin="competitions"] .qz-champ-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .84rem;
  font-weight: var(--qz-fw-strong, 500);
  color: var(--qz-text, #06342A);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-qz-skin="competitions"] .qz-champ-wins {
  font-size: .74rem;
  color: var(--qz-muted, #5E8A7C);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* Rang du visiteur, épinglé sous la queue quand il est hors du top affiché.
   Teinté à l'accent pour se distinguer des autres lignes sans rompre le
   mono-tone : c'est la seule ligne du classement qui le concerne. */
[data-qz-skin="competitions"] .qz-champ-row--me {
  background: var(--qz-accent-soft, #E6F5EF);
  margin-top: 4px;
}
[data-qz-skin="competitions"] .qz-champ-row--me + .qz-champ-row,
[data-qz-skin="competitions"] .qz-champ-row + .qz-champ-row--me { border-top: 0; }
[data-qz-skin="competitions"] .qz-champ-row--me .qz-champ-name,
[data-qz-skin="competitions"] .qz-champ-row--me .qz-champ-rank,
[data-qz-skin="competitions"] .qz-champ-row--me .qz-champ-wins {
  color: var(--qz-accent-ink, #0F6E56);
  font-weight: 600;
}
[data-qz-skin="competitions"] .qz-champ-row--me .qz-champ-ava {
  background: var(--qz-accent, #16A87A);
  color: var(--qz-on-accent, #FFFFFF);
}

/* ── S4 · carte « Compétitions du groupe » (onglet Aperçu du détail groupe) ─── */
.gd-comp-card .gd-comp-head { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--qz-text, #06342A); margin-bottom: 12px; }
.gd-comp-card .gd-comp-head .fa-trophy { color: var(--qz-energy, #F5C542); }
.gd-comp-card .gd-comp-list { display: grid; gap: 8px; margin-bottom: 12px; }
.gd-comp-card .gd-comp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  padding: 10px 14px; border: 1px solid var(--qz-line, #DCEFE8); border-radius: var(--qz-r-field, 13px);
  background: var(--qz-surface, #fff); cursor: pointer; font: inherit;
}
.gd-comp-card .gd-comp-row:hover { border-color: var(--qz-accent-mid, #5DCAA5); }
.gd-comp-card .gd-comp-name { font-weight: 500; color: var(--qz-text, #06342A); }
.gd-comp-card .gd-comp-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: var(--qz-r-pill); background: var(--qz-accent-soft, #E1F5EE); color: var(--qz-accent-ink, #0F6E56); white-space: nowrap; }
.gd-comp-card .gd-comp-badge--live { background: var(--qz-accent, #16A87A); color: #fff; }
.gd-comp-card .gd-comp-badge--done { background: var(--qz-screen, #F1FAF6); color: var(--qz-muted, #5E8A7C); }
.gd-comp-card .gd-comp-empty { font-size: 13px; color: var(--qz-muted, #5E8A7C); padding: 6px 2px 12px; }
.gd-comp-card .gd-comp-create {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0;
  border-radius: var(--qz-r-control, 12px); background: var(--qz-accent, #16A87A); color: #fff;
  border-bottom: 4px solid var(--qz-accent-deep, #0F6E56); font: inherit; font-weight: 500; cursor: pointer;
}
.gd-comp-card .gd-comp-create:active { transform: scale(var(--qz-press-scale)); border-bottom-width: 2px; }