/* ============================================================================
   QZR vNext — Groupes Detail
   ----------------------------------------------------------------------------
   Strangler migration: scoped by [data-qz-skin="groupes"]. Overrides legacy
   homepage-hub.css .qzr-hub-* / .group-detail-* dark-theme styles with vNext
   tokens. Requires vnext-tokens.css.

   Aligned with mockups (docs/vnext/mockups/groups/group_tabs.png):
   GD1 Aperçu · GD2 Membres · GD3 Quiz · GD4 Activité
   ============================================================================ */

/* ── Shell ───────────────────────────────────────────────────────────────── */
[data-qz-skin="groupes"] .qzr-hub__shell {
  gap: 0;
}

/* ── Top bar (back button — shown dynamically) ──────────────────────────── */
[data-qz-skin="groupes"] .qzr-hub__topbar {
  display: flex !important;
  padding: 4px 0;
}

[data-qz-skin="groupes"] .qzr-hub__topbar .btn-ux--ghost {
  background: transparent !important;
  color: var(--qz-text) !important;
  border: none !important;
  border-radius: var(--qz-r-pill) !important;
  font-weight: var(--qz-fw-strong);
  font-size: var(--qz-fs-sm);
  padding: 6px 4px;
}

[data-qz-skin="groupes"] .qzr-hub__topbar-meta .action-chip {
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  border: none;
  border-radius: var(--qz-r-pill);
  padding: 3px 10px;
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
}

/* ── Hero (mockup: icon LEFT + title + chips, no card border) ──────────── */
[data-qz-skin="groupes"] .qzr-hub__hero {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 12px 4px 8px !important;
  gap: 12px !important;
  align-items: start !important;
  grid-template-columns: auto 1fr !important;
}

[data-qz-skin="groupes"] .qzr-hub__hero::before {
  display: none !important;
}

/* Badge on the LEFT (mockup: small square icon before title) */
[data-qz-skin="groupes"] .qzr-hub__hero-badge {
  order: -1 !important;
  width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  background: var(--qz-accent-soft) !important;
  color: var(--qz-accent) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  font-size: .9rem !important;
}

[data-qz-skin="groupes"] .qzr-hub__hero-badge i {
  font-size: 1rem !important;
}

[data-qz-skin="groupes"] .qzr-hub__hero-badge span {
  display: none !important;
}

[data-qz-skin="groupes"] .qzr-hub__hero-badge img {
  border-radius: 12px !important;
}

[data-qz-skin="groupes"] .qzr-hub__hero-copy {
  padding: 0 !important;
}

/* Eyebrow → small chip pills (mockup: "Public" filled, "Sur demande" outline, "Niv. 6" outline) */
[data-qz-skin="groupes"] .qzr-hub__eyebrow {
  color: var(--qz-muted) !important;
  font-size: var(--qz-fs-xs);
  padding: 2px 8px;
  background: var(--qz-accent-soft);
  border-radius: var(--qz-r-pill);
  font-weight: var(--qz-fw-strong);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 4px !important;
}

[data-qz-skin="groupes"] .qzr-hub__hero h1,
[data-qz-skin="groupes"] .qzr-hub__hero h2 {
  color: var(--qz-text) !important;
  font-size: var(--qz-fs-h2) !important;
  font-weight: 700;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

[data-qz-skin="groupes"] .qzr-hub__hero p {
  color: var(--qz-muted) !important;
  font-size: var(--qz-fs-sm);
  margin-top: 6px !important;
  line-height: 1.45;
}

[data-qz-skin="groupes"] .group-detail-hero__welcome {
  color: var(--qz-text);
  font-size: var(--qz-fs-sm);
  padding: 8px 12px;
  border-radius: var(--qz-r-control);
  background: var(--qz-accent-soft);
  border-left: 3px solid var(--qz-accent);
  margin-top: 8px;
}

/* ── Tabs (mockup: underlined text — NOT pills) ─────────────────────────── */
[data-qz-skin="groupes"] .qzr-hub__tabs {
  display: flex !important;
  grid-auto-flow: unset !important;
  gap: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--qz-line);
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 4px;
}

[data-qz-skin="groupes"] .qzr-hub__tabs::-webkit-scrollbar {
  display: none;
}

[data-qz-skin="groupes"] .qzr-hub__tab {
  min-height: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--qz-muted) !important;
  font-weight: var(--qz-fw-strong);
  font-size: var(--qz-fs-sm);
  padding: 10px 14px !important;
  border-bottom: 2px solid transparent !important;
  white-space: nowrap;
  transition: color var(--qz-dur-ui), border-color var(--qz-dur-ui);
}

/* Hide tab icons (mockup: text-only tabs) */
[data-qz-skin="groupes"] .qzr-hub__tab i {
  display: none !important;
}

[data-qz-skin="groupes"] .qzr-hub__tab:hover {
  background: transparent !important;
  color: var(--qz-text) !important;
}

[data-qz-skin="groupes"] .qzr-hub__tab.is-active,
[data-qz-skin="groupes"] .qzr-hub__tab[aria-selected="true"] {
  /* background: transparent !important; */
  color: var(--qz-accent) !important;
  border-bottom: 2px solid var(--qz-accent) !important;
}

/* ── Content area ────────────────────────────────────────────────────────── */
/* CAUSE DU DEBORDEMENT MOBILE, mesuree le 29.AOU.2026.
   `.qzr-hub-layout .qzr-hub__content` (homepage-hub.css:3584) declare
   `display:grid` SANS `grid-template-columns`. La colonne implicite vaut donc
   `auto`, c'est-a-dire la largeur MAX-CONTENT de l'element le plus large — ici
   393px dans un conteneur de 262px. Le bandeau d'identite remplissait cette
   colonne puis ajoutait ses marges negatives : 418px de large, 133px hors du
   cadre, et les 28 elements suivants deportes avec lui.

   `minmax(0, 1fr)` borne la colonne a son conteneur. Sans le minimum a 0, un
   `1fr` seul garderait `min-width:auto` et le meme debordement.

   Corrige ICI, scope aux groupes, plutot que dans la regle partagee : celle-ci
   sert aussi le hub d'accueil, et le meme defaut latent y merite sa propre
   verification avant d'y toucher. */
[data-qz-skin="groupes"] .qzr-hub__content {
  gap: 0;
  padding-top: 12px;
  grid-template-columns: minmax(0, 1fr);
}

/* MEME DEFAUT, un cran plus bas : `.group-detail-tab-panels` est une seconde
   grille sans `grid-template-columns`, donc sa colonne se dimensionnait elle
   aussi sur le contenu (393px dans 262px). Borner la grille parente ne suffit
   pas — chaque grille imbriquee doit l'etre.

   REGLE A RETENIR pour cet ecran : toute grille de cette pile a besoin de
   `minmax(0, 1fr)`, sinon un seul enfant large (un titre de quizz, une pastille)
   elargit toute la colonne et pousse la page hors du cadre. */
[data-qz-skin="groupes"] .group-detail-tab-panels {
  grid-template-columns: minmax(0, 1fr);
}
[data-qz-skin="groupes"] .group-detail-panel {
  min-width: 0;
}

/* Section cards — light cards, subtle border (mockup: clean flowing sections) */
[data-qz-skin="groupes"] .content-card.group-detail-section {
  border:none;
  background: transparent ;
  /* border: 1px solid var(--qz-line) !important; */
  border-radius: var(--qz-r-card) !important;
  box-shadow: none !important;
  padding: 42px 0px !important;
  margin-bottom: 10px;
}

[data-qz-skin="groupes"] .group-detail-section__title {
  color: var(--qz-text);
  font-size: var(--qz-fs-body);
  font-weight: 700;
  margin: 0;
}

[data-qz-skin="groupes"] .group-detail-section__title i {
  color: var(--qz-accent);
  margin-right: 6px;
}

[data-qz-skin="groupes"] .group-detail-section__subtitle {
  color: var(--qz-muted);
  font-size: var(--qz-fs-xs);
  margin: 2px 0 0;
}

/* ── Quick actions (mockup: simple row of ghost buttons) ─────────────── */
[data-qz-skin="groupes"] .content-card.group-detail-section--quick-actions {
  border: none !important;
  padding: 0 0 6px !important;
  background: transparent !important;
  margin-bottom: 4px;
}

[data-qz-skin="groupes"] .group-detail-section--quick-actions .group-detail-section__header {
  display: none !important;
}

[data-qz-skin="groupes"] .group-detail-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The contextual hide (groups.js syncGroupDetailQuickActionsVisibility) sets the
   `hidden` attribute. The UA's `[hidden]{display:none}` is a bare attribute
   selector, so ANY class rule giving these elements a display — .btn-ux is
   inline-flex, .w-100 wrappers are blocks — wins over it and the button stays on
   screen. Restate it here at a specificity that holds, as the other components in
   this codebase do. The section itself gets the same treatment: .content-card
   above already re-declares its box, so its `hidden` needs the same backing. */
[data-qz-skin="groupes"] .group-detail-quick-actions > [hidden],
[data-qz-skin="groupes"] .group-detail-section--quick-actions[hidden] {
  display: none !important;
}

[data-qz-skin="groupes"] .group-detail-quick-actions .btn-ux--ghost {
  background: var(--qz-surface) !important;
  color: var(--qz-text) !important;
  border: 1px solid var(--qz-line) !important;
  border-bottom: 3px solid var(--qz-line-strong) !important;
  border-radius: var(--qz-r-control) !important;
  font-weight: var(--qz-fw-strong);
  font-size: var(--qz-fs-sm);
}

[data-qz-skin="groupes"] .group-detail-quick-actions .btn-ux--ghost:hover {
  border-color: var(--qz-accent-mid) !important;
  background: var(--qz-accent-soft) !important;
}

[data-qz-skin="groupes"] .group-detail-quick-actions .btn-ux--ghost i {
  color: var(--qz-accent);
}

[data-qz-skin="groupes"] .group-detail-quick-actions .btn-ux--primary {
  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;
}

/* ── XP card (mockup GD1: "XP collectif" + level + XP text + bar) ──── */
[data-qz-skin="groupes"] .group-detail-xp-card {
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card) !important;
  padding: 25px 16px !important;
  margin-bottom: 10px !important;
}

[data-qz-skin="groupes"] .group-detail-xp-card__header {
  gap: 10px !important;
  margin-bottom: 8px !important;
}

[data-qz-skin="groupes"] .group-detail-xp-card__badge {
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

[data-qz-skin="groupes"] .group-detail-xp-card__level {
  color: var(--qz-text) !important;
  font-size: var(--qz-fs-body) !important;
  font-weight: 700 !important;
}

[data-qz-skin="groupes"] .group-detail-xp-card__xp {
  color: var(--qz-muted) !important;
  font-size: var(--qz-fs-sm) !important;
}

[data-qz-skin="groupes"] .group-detail-xp-card__weekly {
  color: var(--qz-accent) !important;
  font-size: var(--qz-fs-xs) !important;
  font-weight: var(--qz-fw-strong);
}

[data-qz-skin="groupes"] .group-detail-xp-card__bar-wrap {
  background: var(--qz-accent-soft) !important;
  height: 6px !important;
  border-radius: 3px !important;
  margin-bottom: 6px !important;
}

[data-qz-skin="groupes"] .group-detail-xp-card__bar-fill {
  background: var(--qz-accent) !important;
  border-radius: 3px !important;
  transition: width var(--qz-dur-bar) var(--qz-ease) !important;
}

[data-qz-skin="groupes"] .group-detail-xp-card__next {
  color: var(--qz-muted) !important;
  font-size: var(--qz-fs-xs);
  text-align: right;
}

/* ── Challenges (mockup GD1: "Défi actif" + label + bar + time) ──────── */
[data-qz-skin="groupes"] .group-detail-challenges {
  padding: 0 !important;
}

[data-qz-skin="groupes"] .group-detail-challenge {
  padding: 8px 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--qz-line);
}

[data-qz-skin="groupes"] .group-detail-challenge:last-child {
  border-bottom: none;
  padding-bottom: 0 !important;
}

[data-qz-skin="groupes"] .group-detail-challenge:first-child {
  padding-top: 4px !important;
}

[data-qz-skin="groupes"] .group-detail-challenge__label {
  color: var(--qz-text) !important;
  font-size: var(--qz-fs-sm) !important;
  font-weight: var(--qz-fw-strong) !important;
  margin-bottom: 6px !important;
}

[data-qz-skin="groupes"] .group-detail-challenge--done .group-detail-challenge__label {
  color: var(--qz-accent) !important;
}

[data-qz-skin="groupes"] .group-detail-challenge--done .group-detail-challenge__label i {
  color: var(--qz-accent) !important;
}

[data-qz-skin="groupes"] .group-detail-challenge__bar {
  background: var(--qz-accent-soft) !important;
  height: 6px !important;
  border-radius: 3px !important;
  margin-bottom: 4px !important;
}

[data-qz-skin="groupes"] .group-detail-challenge__bar-fill {
  background: var(--qz-energy, #D4940A) !important;
  border-radius: 3px !important;
}

[data-qz-skin="groupes"] .group-detail-challenge--done .group-detail-challenge__bar-fill {
  background: var(--qz-accent) !important;
}

[data-qz-skin="groupes"] .group-detail-challenge__meta {
  color: var(--qz-muted) !important;
  font-size: var(--qz-fs-xs) !important;
}

/* ── Activity (mockup GD4: bullet dot + text + "· time") ────────────── */
[data-qz-skin="groupes"] .group-detail-activity-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

[data-qz-skin="groupes"] .group-detail-activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: none !important;
}

/* Icon → small teal dot (mockup: no icon circles, just a bullet) */
[data-qz-skin="groupes"] .group-detail-activity-item__icon {
  flex-shrink: 0;
  width: 6px !important;
  height: 6px !important;
  min-width: 6px;
  display: block !important;
  border-radius: 50%;
  background: var(--qz-accent);
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden;
}

[data-qz-skin="groupes"] .group-detail-activity-item__icon::before {
  display: none !important;
}

[data-qz-skin="groupes"] .group-detail-activity-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* Hide eyebrow/badge — mockup just shows inline text */
[data-qz-skin="groupes"] .group-detail-activity-item__eyebrow {
  display: contents !important;
}

[data-qz-skin="groupes"] .group-detail-activity-item__badge {
  display: none !important;
}

[data-qz-skin="groupes"] .group-detail-activity-item__time {
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
  order: 10;
}

[data-qz-skin="groupes"] .group-detail-activity-item__time::before {
  content: "· ";
}

[data-qz-skin="groupes"] .group-detail-activity-item__text {
  font-size: var(--qz-fs-sm);
  color: var(--qz-text);
  margin: 0;
  line-height: 1.4;
}

[data-qz-skin="groupes"] .group-detail-activity-item__meta {
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
  margin: 0;
}

/* ── Ranking ─────────────────────────────────────────────────────────────── */

/* Ranking filters — pill chips (mockup: "Total", "XP semaine", etc.) */
[data-qz-skin="groupes"] .group-detail-ranking-filters {
  gap: 6px !important;
  padding-bottom: 12px !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-filter {
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  color: var(--qz-muted) !important;
  border-radius: var(--qz-r-pill) !important;
  font-weight: var(--qz-fw-strong);
  font-size: var(--qz-fs-sm) !important;
  padding: 6px 14px !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-filter:hover {
  background: var(--qz-accent-soft) !important;
  color: var(--qz-accent-ink) !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-filter.is-active {
  background: var(--qz-accent) !important;
  border-color: var(--qz-accent) !important;
  color: var(--qz-on-accent) !important;
}

/* Ranking overview cards — hidden in GD4, only shown in full ranking view */
[data-qz-skin="groupes"] .group-detail-ranking-overview {
  display: none;
}

[data-qz-skin="groupes"] .group-detail-ranking-overview-card {
  text-align: center;
  padding: 14px 10px;
  border-radius: var(--qz-r-card);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  display: flex;
  flex-direction: column;
  align-items: center;
}

[data-qz-skin="groupes"] .group-detail-ranking-overview-card__value {
  display: block;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--qz-text) !important;
  line-height: 1.2;
  order: 0;
}

[data-qz-skin="groupes"] .group-detail-ranking-overview-card__label {
  display: block;
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--qz-muted);
  margin-top: 4px;
  margin-bottom: 0 !important;
  order: 1;
}

[data-qz-skin="groupes"] .group-detail-ranking-overview-card__meta {
  display: block;
  font-size: var(--qz-fs-xs);
  color: var(--qz-accent);
  font-weight: var(--qz-fw-strong);
  margin-top: 2px;
  order: 2;
}

/*
 * Podium → flat leaderboard rows (mockup GD4: rank | circle avatar | name | score)
 */
[data-qz-skin="groupes"] .group-detail-ranking-podium {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--qz-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card:last-child {
  border-bottom: none !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card.is-rank-1 {
  border-color: var(--qz-line) !important;
  background: transparent !important;
}

/* Rank number + avatar (mockup GD4: plain rank, teal circle with initial) */
[data-qz-skin="groupes"] .group-detail-ranking-podium-card__topline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  background: transparent;
  color: var(--qz-muted) !important;
  font-weight: 700 !important;
  font-size: var(--qz-fs-body) !important;
  line-height: 1;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-weight: 700;
  font-size: var(--qz-fs-sm);
}

/* Hide "#" prefix from rank text via font-size trick — rank text is "#1" etc. */

/* Hide "Leader actuel" / "Dauphin" labels */
[data-qz-skin="groupes"] .group-detail-ranking-podium-card__highlight {
  display: none !important;
}

/* Identity row (name) */
[data-qz-skin="groupes"] .group-detail-ranking-podium-card__identity {
  flex: 1;
  min-width: 0;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card__name {
  display: block;
  color: var(--qz-text) !important;
  font-size: var(--qz-fs-body) !important;
  font-weight: var(--qz-fw-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stacked scores (mockup GD4: sessions on top, XP below) */
[data-qz-skin="groupes"] .group-detail-ranking-podium-card__scores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  flex-shrink: 0;
  margin-left: auto;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card__score-top {
  font-weight: 700;
  color: var(--qz-accent);
  font-size: var(--qz-fs-body);
  line-height: 1.3;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card__score-bottom {
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
  font-size: var(--qz-fs-sm);
  line-height: 1.3;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card__points {
  font-weight: 700 !important;
  color: var(--qz-accent) !important;
  font-size: var(--qz-fs-body) !important;
  margin-top: 0 !important;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Hide meta (objectifs/sessions) and progress bar — mockup: clean rows */
[data-qz-skin="groupes"] .group-detail-ranking-podium-card__meta {
  display: none !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card__progress {
  display: none !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-podium-card .group-detail-ranking-row__presence {
  font-size: var(--qz-fs-xs);
  color: var(--qz-accent);
  font-weight: var(--qz-fw-strong);
}

/* Ranking rows (4th+) — same flat style */
[data-qz-skin="groupes"] .group-detail-ranking-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--qz-line) !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-row:last-child {
  border-bottom: none !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-row__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  background: transparent;
  color: var(--qz-muted) !important;
  font-weight: 700 !important;
  font-size: var(--qz-fs-body) !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-row__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-weight: 700;
  font-size: var(--qz-fs-sm);
  flex-shrink: 0;
}

[data-qz-skin="groupes"] .group-detail-ranking-row__main {
  flex: 1;
  min-width: 0;
}

[data-qz-skin="groupes"] .group-detail-ranking-row__identity strong {
  color: var(--qz-text);
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
}

[data-qz-skin="groupes"] .group-detail-ranking-row__presence {
  font-size: var(--qz-fs-xs);
  color: var(--qz-accent);
  font-weight: var(--qz-fw-strong);
}

/* Hide meta and progress — clean look */
[data-qz-skin="groupes"] .group-detail-ranking-row__meta {
  display: none !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-row__progress {
  display: none !important;
}

[data-qz-skin="groupes"] .group-detail-ranking-row__scores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  flex-shrink: 0;
  margin-left: auto;
}

[data-qz-skin="groupes"] .group-detail-ranking-row__score-top {
  font-weight: 700;
  color: var(--qz-accent);
  font-size: var(--qz-fs-body);
  line-height: 1.3;
}

[data-qz-skin="groupes"] .group-detail-ranking-row__score-bottom {
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
  font-size: var(--qz-fs-sm);
  line-height: 1.3;
}

[data-qz-skin="groupes"] .group-detail-ranking-row__points {
  color: var(--qz-accent) !important;
  font-weight: 700 !important;
  font-size: var(--qz-fs-body);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Placeholders (loading / empty) ──────────────────────────────────────── */
[data-qz-skin="groupes"] .group-detail-placeholder {
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card) !important;
  color: var(--qz-muted) !important;
}

/* ── Hero chips (mockup GD1: "Public", "Classique", "Niv. 3") ──────────── */
[data-qz-skin="groupes"] .group-detail-hero__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

[data-qz-skin="groupes"] .group-detail-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--qz-r-pill);
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  border: 1px solid var(--qz-line);
  color: var(--qz-muted);
  background: transparent;
  line-height: 1.6;
}

[data-qz-skin="groupes"] .group-detail-chip--filled {
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  border-color: var(--qz-accent);
}

/* ── Description (Aperçu panel, below hero) ────────────────────────────── */
[data-qz-skin="groupes"] .group-detail-description {
  font-size: var(--qz-fs-body);
  color: var(--qz-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ── Member avatars row (mockup GD1: overlapping circles + count) ──────── */
[data-qz-skin="groupes"] .group-detail-avatars {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  margin-top: 49px;
}

[data-qz-skin="groupes"] .group-detail-avatars__row {
  display: flex;
}

[data-qz-skin="groupes"] .group-detail-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-size: var(--qz-fs-sm);
  font-weight: 700;
  margin-left: -8px;
  border: 2px solid var(--qz-surface);
  flex-shrink: 0;
}

[data-qz-skin="groupes"] .group-detail-avatar:first-child {
  margin-left: 0;
}

[data-qz-skin="groupes"] .group-detail-avatar--more {
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  font-size: var(--qz-fs-xs);
}

[data-qz-skin="groupes"] .group-detail-avatars__count {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  font-weight: var(--qz-fw-strong);
}

/* ── Summary stats row (mockup GD1: Quiz / Lives / Défis cards) ────────── */
[data-qz-skin="groupes"] .group-detail-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

[data-qz-skin="groupes"] .group-detail-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 25px 8px;
  border-radius: var(--qz-r-card);
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
}

[data-qz-skin="groupes"] .group-detail-stat-card__value {
  font-size: var(--qz-fs-h2);
  font-weight: 700;
  color: var(--qz-accent);
}

[data-qz-skin="groupes"] .group-detail-stat-card__label {
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
  font-weight: var(--qz-fw-strong);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Messages action (hidden, accessible from quick actions) ───────────── */
[data-qz-skin="groupes"] .group-detail-messages-action {
  display: none;
}

/* ── GD4: Activité panel (coffre + activity + classement) ──────────────── */
[data-qz-skin="groupes"] .gd-activite__chest {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

[data-qz-skin="groupes"] .gd-activite__chest-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--qz-r-control);
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  font-size: 1.2rem;
  flex-shrink: 0;
}

[data-qz-skin="groupes"] .gd-activite__chest-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-qz-skin="groupes"] .gd-activite__chest-title {
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
}

[data-qz-skin="groupes"] .gd-activite__chest-meta {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
}

[data-qz-skin="groupes"] .gd-activite__chest-bar {
  width: 100%;
  height: 8px;
  background: var(--qz-50, #e8f0ed);
  border-radius: 4px;
  overflow: hidden;
  flex-basis: 100%;
}

[data-qz-skin="groupes"] .gd-activite__chest-bar > span {
  display: block;
  height: 100%;
  background: var(--qz-accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

[data-qz-skin="groupes"] .gd-activite__section {
  margin-bottom: 20px;
}

[data-qz-skin="groupes"] .gd-activite__heading {
  font-size: var(--qz-fs-body) !important;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin: 0 0 10px;
}

/* ── GD3: Quiz panel (quiz list + propositions) ────────────────────────── */
/* `min-width: 0` est le correctif du debordement signale sur mobile : un
   enfant en grille/flex vaut `min-width: auto` par defaut et refuse de se
   retrecir sous sa largeur intrinseque — une carte de quizz au titre long
   elargissait donc toute la section au-dela de la colonne. */
[data-qz-skin="groupes"] .gd-quizz__section {
  margin-bottom: 20px;
  min-width: 0;
  max-width: 100%;
}
[data-qz-skin="groupes"] .gd-quizz__section > * {
  min-width: 0;
  max-width: 100%;
}

/* Rangee de titre : libelle a gauche, action a droite, sur la meme ligne.
   `min-width: 0` sur le titre — sans lui un libelle long refuse de se retrecir
   et pousse le bouton hors du cadre. */
[data-qz-skin="groupes"] .gd-quizz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-3);
  margin: 0 0 10px;
}
[data-qz-skin="groupes"] .gd-quizz__head-action {
  flex: 0 0 auto;
  display: inline-flex;
}
[data-qz-skin="groupes"] .gd-quizz__head-action > .btn-ux {
  margin: 0;
  white-space: nowrap;
}

[data-qz-skin="groupes"] .gd-quizz__heading {
  font-size: var(--qz-fs-body) !important;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin: 0;
  min-width: 0;
}

[data-qz-skin="groupes"] .gd-quizz__card {
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  overflow: hidden;
}

[data-qz-skin="groupes"] .gd-quizz__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--qz-line);
}

[data-qz-skin="groupes"] .gd-quizz__row:last-child {
  border-bottom: none;
}

[data-qz-skin="groupes"] .gd-quizz__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--qz-r-control);
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  font-size: var(--qz-fs-body);
  flex-shrink: 0;
}

[data-qz-skin="groupes"] .gd-quizz__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-qz-skin="groupes"] .gd-quizz__name {
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-qz-skin="groupes"] .gd-quizz__meta {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
}

[data-qz-skin="groupes"] .gd-quizz__play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: var(--qz-r-control);
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
  color: var(--qz-muted);
  font-size: var(--qz-fs-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--qz-dur-ui), color var(--qz-dur-ui), border-color var(--qz-dur-ui);
}

[data-qz-skin="groupes"] .gd-quizz__play-btn:hover {
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  border-color: var(--qz-accent);
}

[data-qz-skin="groupes"] .gd-quizz__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--qz-muted);
  font-size: var(--qz-fs-sm);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
}

[data-qz-skin="groupes"] .gd-quizz__empty p {
  margin: 0;
}

/* ── GD2: Members panel (pending requests + roles + invite) ────────────── */
[data-qz-skin="groupes"] .gd-members__section {
  margin-bottom: 20px;
}

[data-qz-skin="groupes"] .gd-members__heading {
  font-size: var(--qz-fs-body) !important;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-qz-skin="groupes"] .gd-members__heading i {
  color: var(--qz-muted);
  font-size: var(--qz-fs-sm);
}

[data-qz-skin="groupes"] .gd-members__card {
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  overflow: hidden;
}

[data-qz-skin="groupes"] .gd-members__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--qz-line);
}

[data-qz-skin="groupes"] .gd-members__row:last-child {
  border-bottom: none;
}

[data-qz-skin="groupes"] .gd-members__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-size: var(--qz-fs-body);
  font-weight: 700;
  flex-shrink: 0;
}

[data-qz-skin="groupes"] .gd-members__avatar--more {
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  font-size: var(--qz-fs-sm);
}

[data-qz-skin="groupes"] .gd-members__name {
  flex: 1;
  min-width: 0;
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-qz-skin="groupes"] .gd-members__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--qz-r-pill);
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  white-space: nowrap;
  flex-shrink: 0;
}

[data-qz-skin="groupes"] .gd-members__badge--owner {
  background: var(--qz-accent);
  color: var(--qz-on-accent);
}

[data-qz-skin="groupes"] .gd-members__badge--delegate {
  background: transparent;
  border: 1px solid var(--qz-line);
  color: var(--qz-muted);
}

[data-qz-skin="groupes"] .gd-members__badge--member {
  background: var(--qz-50, #f0f5f3);
  color: var(--qz-muted);
  border: none;
}

[data-qz-skin="groupes"] .gd-members__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

[data-qz-skin="groupes"] .gd-members__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--qz-r-control);
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
  cursor: pointer;
  font-size: var(--qz-fs-sm);
  transition: background var(--qz-dur-ui), border-color var(--qz-dur-ui);
}

[data-qz-skin="groupes"] .gd-members__action-btn--accept {
  color: var(--qz-accent);
}

[data-qz-skin="groupes"] .gd-members__action-btn--accept:hover {
  background: var(--qz-accent-soft);
  border-color: var(--qz-accent);
}

[data-qz-skin="groupes"] .gd-members__action-btn--reject {
  color: #e74c3c;
}

[data-qz-skin="groupes"] .gd-members__action-btn--reject:hover {
  background: #fef2f2;
  border-color: #e74c3c;
}

[data-qz-skin="groupes"] .gd-members__row--more {
  cursor: pointer;
}

[data-qz-skin="groupes"] .gd-members__row--more:hover {
  background: var(--qz-50, #f0f5f3);
}

[data-qz-skin="groupes"] .gd-members__chevron {
  color: var(--qz-muted);
  font-size: var(--qz-fs-sm);
  flex-shrink: 0;
}

[data-qz-skin="groupes"] .gd-members__invite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: var(--qz-r-card);
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
  color: var(--qz-text);
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  cursor: pointer;
  transition: background var(--qz-dur-ui), border-color var(--qz-dur-ui);
}

[data-qz-skin="groupes"] .gd-members__invite-btn:hover {
  background: var(--qz-accent-soft);
  border-color: var(--qz-accent);
  color: var(--qz-accent);
}

[data-qz-skin="groupes"] .qzr-hub__loading,
[data-qz-skin="groupes"] .qzr-hub__empty {
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: var(--qz-muted) !important;
  margin-top: 1rem;
}

[data-qz-skin="groupes"] .qzr-hub__loading i,
[data-qz-skin="groupes"] .qzr-hub__empty i {
  color: var(--qz-accent) !important;
}

[data-qz-skin="groupes"] .qzr-hub__empty strong {
  color: var(--qz-text) !important;
}

/* ── Leave group / status notes ──────────────────────────────────────────── */
[data-qz-skin="groupes"] .group-card-immersive__status-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--qz-r-control);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  [data-qz-skin="groupes"] .qzr-hub__hero {
    grid-template-columns: auto 1fr !important;
    padding: 10px 2px 6px !important;
  }

  [data-qz-skin="groupes"] .qzr-hub__hero h1,
  [data-qz-skin="groupes"] .qzr-hub__hero h2 {
    font-size: 16px !important;
  }

  [data-qz-skin="groupes"] .qzr-hub__hero-badge {
    width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  [data-qz-skin="groupes"] .qzr-hub__tabs {
    gap: 0;
  }

  [data-qz-skin="groupes"] .qzr-hub__tab {
    padding: 8px 10px !important;
    font-size: var(--qz-fs-xs) !important;
  }

  [data-qz-skin="groupes"] .group-detail-ranking-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* ============================================================================
   Stats tab (group_stats mockup) — KPI cards, weekly chart, top contributeurs
   ========================================================================== */
[data-qz-skin="groupes"] .gd-stats { display: flex; flex-direction: column; gap: 14px; }

[data-qz-skin="groupes"] .gd-stats__periods { display: flex; gap: 8px; }
[data-qz-skin="groupes"] .gd-stats__period-chip {
  padding: 7px 16px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  color: var(--qz-muted);
  font-size: .82rem;
  font-weight: var(--qz-fw-strong);
  cursor: pointer;
}
[data-qz-skin="groupes"] .gd-stats__period-chip.is-active {
  background: var(--qz-accent) !important;
  color: var(--qz-on-accent, #fff) !important;
  border-color: var(--qz-accent) !important;
}

/* KPI cards (2x2) */
[data-qz-skin="groupes"] .gd-stats__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
[data-qz-skin="groupes"] .gd-stats__kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 18px 14px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
}
[data-qz-skin="groupes"] .gd-stats__kpi-value { font-size: 1.7rem; font-weight: 800; color: var(--qz-text); line-height: 1; }
[data-qz-skin="groupes"] .gd-stats__kpi-value--accent { color: var(--qz-accent); }
[data-qz-skin="groupes"] .gd-stats__kpi-label { font-size: .82rem; color: var(--qz-muted); }
[data-qz-skin="groupes"] .gd-stats__kpi-delta { font-size: .76rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
[data-qz-skin="groupes"] .gd-stats__kpi-delta--up { color: var(--qz-success, var(--qz-accent)); }
[data-qz-skin="groupes"] .gd-stats__kpi-delta--down { color: var(--qz-danger, #e5484d); }

/* Weekly activity chart */
[data-qz-skin="groupes"] .gd-stats__card {
  padding: 16px !important;
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card) !important;
}
[data-qz-skin="groupes"] .gd-stats__card-title,
[data-qz-skin="groupes"] .gd-stats__heading {
  margin: 0 0 12px;
  font-size: .95rem;
  font-weight: var(--qz-fw-strong, 800);
  color: var(--qz-text);
}
[data-qz-skin="groupes"] .gd-stats__chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 120px;
}
[data-qz-skin="groupes"] .gd-stats__bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 8px;
}
[data-qz-skin="groupes"] .gd-stats__bar {
  width: 70%;
  max-width: 34px;
  min-height: 6px;
  border-radius: 8px;
  background: var(--qz-accent-soft);
}
[data-qz-skin="groupes"] .gd-stats__bar.is-peak { background: var(--qz-accent); }
[data-qz-skin="groupes"] .gd-stats__bar-label { font-size: .76rem; color: var(--qz-muted); font-weight: 600; }

/* Top contributeurs — list group (same look as Apercu / Membres) */
[data-qz-skin="groupes"] .gd-stats__list {
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  overflow: hidden;
}
[data-qz-skin="groupes"] .gd-stats__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--qz-line);
}
[data-qz-skin="groupes"] .gd-stats__row:last-child { border-bottom: 0; }
[data-qz-skin="groupes"] .gd-stats__rank { width: 18px; text-align: center; font-weight: 800; color: var(--qz-muted); font-size: .9rem; }
[data-qz-skin="groupes"] .gd-stats__rank--top { color: var(--qz-energy, #f5a623); }
[data-qz-skin="groupes"] .gd-stats__avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink, var(--qz-accent));
  font-size: .78rem; font-weight: 800;
}
[data-qz-skin="groupes"] .gd-stats__name { flex: 1; min-width: 0; font-weight: 700; color: var(--qz-text); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-qz-skin="groupes"] .gd-stats__xp { font-weight: 800; color: var(--qz-energy, #f5a623); font-size: .9rem; white-space: nowrap; }
[data-qz-skin="groupes"] .gd-stats__row--empty { justify-content: center; }
[data-qz-skin="groupes"] .gd-stats__row--empty .gd-stats__name { flex: 0 1 auto; font-weight: 500; color: var(--qz-muted); }

/* ============================================================================
   Group "Parcours" tab — group-scoped paths list + empty states
   ========================================================================== */
[data-qz-skin="groupes"] .gd-parcours__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
[data-qz-skin="groupes"] .gd-parcours__heading{margin:0;font-size:16px;font-weight:var(--qz-fw-strong,500);color:var(--qz-text)}
[data-qz-skin="groupes"] .gd-parcours__create-chip{display:inline-flex;align-items:center;gap:6px;background:var(--qz-surface);border:1px solid var(--qz-line);color:var(--qz-accent-ink,var(--qz-accent));border-radius:var(--qz-r-pill);padding:6px 12px;font-size:13px;font-weight:var(--qz-fw-strong,500);cursor:pointer}
[data-qz-skin="groupes"] .gd-parcours__card{background:var(--qz-surface);border:1px solid var(--qz-line);border-radius:var(--qz-r-card);overflow:hidden}
[data-qz-skin="groupes"] .gd-parcours__row{display:flex;align-items:center;gap:12px;padding:12px 13px;border-bottom:1px solid var(--qz-line);text-decoration:none;color:inherit}
[data-qz-skin="groupes"] .gd-parcours__row:last-child{border-bottom:0}
[data-qz-skin="groupes"] .gd-parcours__icon{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:var(--qz-accent-soft);color:var(--qz-accent-ink,var(--qz-accent));display:flex;align-items:center;justify-content:center;font-size:18px}
[data-qz-skin="groupes"] .gd-parcours__body{flex:1;min-width:0}
[data-qz-skin="groupes"] .gd-parcours__body strong{display:block;font-size:14px;font-weight:var(--qz-fw-strong,500);color:var(--qz-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-qz-skin="groupes"] .gd-parcours__body em{display:block;font-style:normal;font-size:12px;color:var(--qz-muted);margin:1px 0 6px}
[data-qz-skin="groupes"] .gd-parcours__prog{display:block;height:6px;border-radius:var(--qz-r-pill);background:var(--qz-line);overflow:hidden}
[data-qz-skin="groupes"] .gd-parcours__prog>i{display:block;height:100%;background:var(--qz-accent);border-radius:var(--qz-r-pill)}
[data-qz-skin="groupes"] .gd-parcours__end{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:var(--qz-fw-strong,500);color:var(--qz-accent-ink,var(--qz-accent))}
[data-qz-skin="groupes"] .gd-parcours__end .fa-chevron-right{color:var(--qz-muted);font-size:15px}
[data-qz-skin="groupes"] .gd-parcours__done{color:var(--qz-accent);font-size:18px}
[data-qz-skin="groupes"] .gd-parcours__create-full{width:100%;margin-top:14px}
[data-qz-skin="groupes"] .gd-parcours__empty{text-align:center;padding:26px 14px;background:var(--qz-surface);border:1px solid var(--qz-line);border-radius:var(--qz-r-card)}
[data-qz-skin="groupes"] .gd-parcours__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:18px;background:var(--qz-accent-soft);color:var(--qz-accent-ink,var(--qz-accent));font-size:26px;margin-bottom:12px}
[data-qz-skin="groupes"] .gd-parcours__empty strong{display:block;font-size:16px;font-weight:var(--qz-fw-strong,500);color:var(--qz-text);margin-bottom:4px}
[data-qz-skin="groupes"] .gd-parcours__empty p{font-size:13px;color:var(--qz-muted);margin:0 0 14px}
[data-qz-skin="groupes"] .gd-parcours__empty .btn-ux{margin-bottom:10px}
[data-qz-skin="groupes"] .gd-parcours__empty small{display:block;font-size:12px;color:var(--qz-muted)}
[data-qz-skin="groupes"] .gd-parcours__empty--member{padding:32px 14px}
[data-qz-skin="groupes"] .gd-parcours__empty--member p{margin:0}

/* ============================================================================
   Group member profile modal (members tab → modal)
   ========================================================================== */
body.mp-modal-open{overflow:hidden}
.mp-modal{position:fixed;inset:0;z-index:4000;display:flex;align-items:flex-end;justify-content:center}
.mp-modal[hidden]{display:none}
.mp-modal__backdrop{position:absolute;inset:0;background:rgba(6,52,42,.45)}
.mp-modal__panel{position:relative;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;background:var(--qz-sheet) !important;border:1px solid var(--qz-line,#DCEFE8);border-bottom:0;border-radius:24px 24px 0 0;padding-bottom:10px;animation:mpSheetUp .22s ease}
@keyframes mpSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mp-modal__panel::before{content:"";display:block;width:40px;height:4px;border-radius:var(--qz-r-pill);background:var(--qz-sheet-grip);margin:10px auto 0}
.mp-modal__head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 6px}
.mp-modal__title{font-size:16px;font-weight:500;color:var(--qz-text)}
.mp-modal__close{width:32px;height:32px;border:none;background:var(--qz-surface);border-radius:50%;color:var(--qz-muted);cursor:pointer;font-size:15px}
.mp-modal__body{padding:4px 18px 22px}
.mp-hero{text-align:center;padding:6px 0 2px}
.mp-avatar{display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:var(--qz-accent);color:var(--qz-on-accent);font-size:34px;font-weight:500;margin-bottom:10px}
.mp-name{margin:0 0 8px;font-size:22px;font-weight:500;color:var(--qz-text)}
.mp-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.mp-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:var(--qz-r-pill);background:var(--qz-accent-soft);color:var(--qz-accent-ink);font-size:12px;font-weight:500}
.mp-badge--role{background:var(--qz-accent);color:var(--qz-on-accent)}
.mp-level{margin:0;font-size:13px;color:var(--qz-muted)}
.mp-section-title{margin:18px 0 10px;font-size:15px;font-weight:500;color:var(--qz-text)}
.mp-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mp-kpi{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:16px 12px;background:var(--qz-surface);border:1px solid var(--qz-line);border-radius:16px}
.mp-kpi__v{font-size:22px;font-weight:500;color:var(--qz-text);line-height:1}
.mp-kpi__v--accent{color:var(--qz-accent)}
.mp-kpi span{font-size:12px;color:var(--qz-muted)}
.mp-badge-row{display:flex;gap:10px}
.mp-badge-tile{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--qz-accent-soft);color:var(--qz-muted);font-size:20px}
.mp-badge-tile.is-earned{color:var(--qz-accent-ink)}
.mp-msg-btn{width:100%;margin-top:16px;justify-content:center}
.mp-manage{display:flex;flex-direction:column;gap:10px}
.mp-manage-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;background:var(--qz-surface);border:1px solid var(--qz-line);border-radius:14px;cursor:pointer;font-size:14px;color:var(--qz-text);font-weight:500}
.mp-manage-row .fa-chevron-right{margin-left:auto;color:var(--qz-muted)}
.mp-manage-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--qz-accent-soft);color:var(--qz-accent-ink);font-size:15px}
.mp-manage-row--danger{background:var(--qz-error-bg);border-color:color-mix(in srgb, var(--qz-error) 35%, var(--qz-surface));color:var(--qz-error-ink)}
.mp-manage-row--danger .mp-manage-ic{background:var(--qz-surface);color:var(--qz-error-ink)}
.mp-loading,.mp-empty{text-align:center;padding:42px 0;color:var(--qz-muted)}
.gd-members__row.trigger-open-member-profile{cursor:pointer}

/* Full member list bottom sheet ("autres membres") — reuses .mp-modal chrome.
   z-index sits just below the profile sheet (4000) so tapping a member opens
   their profile layered above this list. */
/* data-qz-skin="groupes" (needed so the rows inherit styling) also pulls in the
   group-page [data-qz-skin="groupes"]{padding:16px} — kill it so the panel sits
   flush at the viewport bottom (a real bottom sheet). */
.gd-members-sheet{z-index:3980;padding:0 !important}
/* The shared groupes skin PAGE rule ([data-qz-skin="groupes"]{max-width:560px;margin:0 auto})
   also matches this fixed .mp-modal (it carries data-qz-skin="groupes"), cropping the
   full-screen backdrop to a centred 560px column. Reset it so the fixed overlay + its
   inset:0 .mp-modal__backdrop fill the whole viewport (the panel keeps its own 480px
   bottom-sheet width). */
#gd-members-sheet.mp-modal{max-width:none;margin:0}
/* Robust slide-up: the shared mpSheetUp keyframe animation freezes at its start
   frame on re-show (leaving a translateY(100%) that pushes a tall panel below the
   viewport). Use a class-triggered transition instead so the panel always rests
   flush at the bottom = a real bottom sheet. */
.gd-members-sheet .mp-modal__panel{animation:none !important;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.gd-members-sheet.is-open .mp-modal__panel{transform:translateY(0)}
.gd-members-sheet__top{position:sticky;top:0;z-index:2;background: inherit;}
.gd-members-sheet__search{padding:2px 14px 10px}
.gd-members-sheet__input{width:100%;border:1.5px solid var(--qz-line,#DCEFE8);background-color:var(--qz-surface,#fff);color:var(--qz-text,#06342A);border-radius:12px;padding:.55rem .8rem .55rem 2.2rem;font-size:.9rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E8A7C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:.75rem center;background-size:.95rem}
.gd-members-sheet__input::placeholder{color:var(--qz-muted,#5E8A7C);opacity:.85}
.gd-members-sheet__input:focus{outline:none;border-color:var(--qz-accent,#16A87A);box-shadow:0 0 0 3px var(--qz-accent-soft,#E1F5EE)}
.gd-members-sheet .mp-modal__body{padding:6px 14px 22px}
/* var(--qz-surface) et non #fff : la feuille se monte sur <body> avec les
   tokens, mais la carte forçait un fond blanc alors que le texte des lignes
   suit --qz-text (clair en mode sombre) → contenu invisible en dark. */
.gd-members-sheet__card{background:var(--qz-surface,#fff);border:1px solid var(--qz-line,#DCEFE8);border-radius:16px;overflow:hidden}
.gd-members-sheet__card .gd-members__row{cursor:pointer;transition:background var(--qz-dur-ui) ease}
.gd-members-sheet__card .gd-members__row:hover{background:var(--qz-accent-soft,#E1F5EE)}
.gd-members-sheet__empty{padding:28px 0}

/* ============================================================================
   Message box as a bottom sheet, layered OVER the member profile sheet.
   Scoped to body.mp-modal-open so message boxes opened elsewhere (group chat)
   keep their default centered presentation.
   ========================================================================== */
body.mp-modal-open .modal-backdrop{z-index:4540 !important}
body.mp-modal-open .messages-dialog.modal{z-index:4600 !important}
body.mp-modal-open .messages-dialog .modal-dialog{align-items:flex-end !important;min-height:100% !important;width:100% !important;max-width:480px !important;margin:0 auto !important}
body.mp-modal-open .messages-dialog .modal-content{border-radius:24px 24px 0 0 !important;max-height:88vh !important;width:100% !important}

/* Same bottom-sheet-over-profile treatment for the "Affronter en duel" (find-opponent)
   dialog and the "Changer de rôle" (delegates) modal. */
body.mp-modal-open .modal:has(.modal-dialog-search-opponent-menu){z-index:4600 !important}
body.mp-modal-open .modal-dialog-search-opponent-menu{display:flex !important;align-items:flex-end !important;min-height:100% !important;width:100% !important;max-width:480px !important;margin:0 auto !important}
body.mp-modal-open .modal-dialog-search-opponent-menu .modal-content{border-radius:24px 24px 0 0 !important;max-height:88vh !important;width:100% !important}
body.mp-modal-open #delegatesModal.modal{z-index:4600 !important}
body.mp-modal-open #delegatesModal .modal-dialog{display:flex !important;align-items:flex-end !important;min-height:100% !important;width:100% !important;max-width:480px !important;margin:0 auto !important}
body.mp-modal-open #delegatesModal .modal-content{border-radius:24px 24px 0 0 !important;max-height:88vh !important;width:100% !important}

/* "Affronter en duel" — same ghost style as "Envoyer un message" (.mp-msg-btn);
   both rely on the shared btn-ux btn-ux--ghost base, just tighter top margin. */
.mp-duel-btn{width:100%;margin-top:10px;justify-content:center}

/* Pending parcours edit-validation queue (group owner, Parcours tab) */
.gd-path-validations{ background:#FFF8E8; border:1px solid #F3E2B0; border-radius:16px; padding:12px; margin-bottom:14px; }
.gd-path-validations__head{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#7A5B12; margin-bottom:10px; }
.gd-path-validations__head i{ color:#E0A52A; }
.gd-path-validations__count{ margin-left:auto; background:#F5C542; color:#5B4310; font-size:12px; font-weight:700; min-width:20px; height:20px; padding:0 6px; border-radius:var(--qz-r-pill); display:inline-flex; align-items:center; justify-content:center; }
.gd-path-validation{ display:flex; align-items:center; gap:10px; background:#FFFFFF; border:1px solid #F1E6C8; border-radius:12px; padding:10px 12px; }
.gd-path-validation + .gd-path-validation{ margin-top:8px; }
.gd-path-validation__info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.gd-path-validation__info b{ font-size:14px; color:#06342A; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd-path-validation__info small{ font-size:12px; color:#8A7A4E; }
.gd-path-validation__actions{ flex:0 0 auto; display:flex; gap:6px; }
.gd-path-validate-approve, .gd-path-validate-reject{ width:34px; height:34px; border-radius:50%; border:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; }
.gd-path-validate-approve{ background:#16A87A; color:#fff; }
.gd-path-validate-reject{ background:#FCE7E7; color:#E24B4A; }
.gd-path-validate-approve[disabled], .gd-path-validate-reject[disabled]{ opacity:.6; cursor:default; }

/* ============================================================================
   Delegates modal — vNext (list view + in-modal "Ajouter un délégué" picker).
   Content styling always applies; bottom-sheet positioning over the profile is
   handled by the body.mp-modal-open #delegatesModal rules above.
   ========================================================================== */
#delegatesModal .modal-content, #delegatesModal .gdl-content{border:none;background:#F1FAF6;overflow:hidden;border-radius:20px}
.gdl-view{display:flex;flex-direction:column;max-height:88vh}
.gdl-view[hidden]{display:none}
.gdl-head{display:flex;align-items:center;gap:10px;padding:15px 16px 10px;background:#fff;border-bottom:1px solid #E6F2EC}
.gdl-title{font-size:17px;font-weight:600;color:#06342A}
.gdl-sub{font-size:12.5px;color:#5E8A7C}
.gdl-icon-btn{width:32px;height:32px;flex:0 0 auto;border:none;border-radius:50%;background:#F1FAF6;color:#0F6E56;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px}
.gdl-icon-btn:hover{background:#E6F5EF}
.gdl-body{flex:1 1 auto;overflow-y:auto;padding:14px 16px;-webkit-overflow-scrolling:touch}
.gdl-foot{flex:0 0 auto;padding:13px 16px calc(13px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #E6F2EC}
.gdl-cta{width:100%;background:#16A87A;color:#fff;border:none;border-bottom:3px solid #0F6E56;border-radius:13px;padding:13px;font-size:14.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.gdl-cta:hover{background:#149870}
.gdl-cta:disabled{opacity:.55;cursor:default}
.gdl-empty{text-align:center;color:#5E8A7C;padding:32px 0;font-size:13.5px}
.gdl-loading{text-align:center;padding:26px 0}
/* delegate list cards */
.gdl-dcard{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #E6F2EC;border-radius:14px;padding:11px 12px;margin-bottom:10px}
.gdl-av{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:#E6F5EF;color:#0F6E56;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:13.5px}
.gdl-dcard__grow{flex:1;min-width:0}
.gdl-dcard__name{font-size:14px;color:#06342A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gdl-dcard__perms{font-size:12px;color:#5E8A7C;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gdl-role{flex:0 0 auto;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:var(--qz-r-pill)}
.gdl-role--admin{color:#0F6E56;background:#E6F5EF}
.gdl-role--mod{color:#5E8A7C;background:#F1FAF6}
.gdl-remove{flex:0 0 auto;border:none;background:none;color:#E24B4A;cursor:pointer;font-size:14px;padding:4px 6px}
/* add view — member picker */
.gdl-seclbl{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#93B4A8;margin:2px 0 8px}
.gdl-search{display:flex;align-items:center;gap:9px;background:#F1FAF6;border:1px solid #DCEFE8;border-radius:12px;padding:0 12px;margin-bottom:9px}
.gdl-search i{color:#93B4A8}
.gdl-search input{flex:1;border:none;background:transparent;padding:10px 0;font-size:13.5px;color:#06342A;outline:none;font-family:inherit}
.gdl-search input::placeholder{color:#A7C6BB}
.gdl-mlist{display:flex;flex-direction:column;gap:7px;max-height:236px;overflow-y:auto}
.gdl-mrow{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #E6F2EC;border-radius:12px;padding:9px 11px;cursor:pointer}
.gdl-mrow.is-sel{background:#ECF9F3;border:1.5px solid #16A87A}
.gdl-mrow.is-dis{opacity:.6;cursor:default}
.gdl-av-sm{width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:#E6F5EF;color:#0F6E56;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:12.5px}
.gdl-mrow.is-dis .gdl-av-sm{background:#EEF2F0;color:#93B4A8}
.gdl-mrow__name{flex:1;min-width:0;font-size:14px;color:#06342A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gdl-mrow.is-dis .gdl-mrow__name{color:#5E8A7C}
.gdl-pick{width:22px;height:22px;flex:0 0 auto;border-radius:50%;border:2px solid #DCEFE8;display:flex;align-items:center;justify-content:center;color:transparent;font-size:12px}
.gdl-mrow.is-sel .gdl-pick{background:#16A87A;border-color:#16A87A;color:#fff}
.gdl-tag{flex:0 0 auto;font-size:11px;color:#93B4A8;background:#F1F4F2;padding:3px 8px;border-radius:var(--qz-r-pill)}
/* presets */
.gdl-presets{display:flex;gap:7px;margin-bottom:11px}
.gdl-preset{flex:1;text-align:center;font-size:12.5px;border-radius:var(--qz-r-pill);padding:7px 4px;color:#5E8A7C;background:#fff;border:1.5px solid #DCEFE8;cursor:pointer;font-family:inherit}
.gdl-preset.is-on{color:#0F6E56;background:#E6F5EF;border-color:#16A87A;font-weight:600}
.gdl-preset--custom{border-style:dashed;border-color:#CDE7DC}
/* permission toggles */
.gdl-perms{background:#fff;border:1px solid #E6F2EC;border-radius:14px;overflow:hidden}
.gdl-prow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 13px;border:none;border-bottom:1px solid #EFF7F3;background:none;cursor:pointer;text-align:left;font-family:inherit}
.gdl-prow:last-child{border-bottom:none}
.gdl-plabel{font-size:13.5px;color:#06342A;display:flex;align-items:center;gap:9px}
.gdl-plabel i{color:#0F6E56;width:16px;text-align:center}
.gdl-tog{width:42px;height:25px;flex:0 0 auto;border-radius:var(--qz-r-pill);background:#D6E6DF;position:relative;transition:background var(--qz-dur-ui)}
.gdl-tog.is-on{background:#16A87A}
.gdl-tog > span{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left var(--qz-dur-ui)}
.gdl-tog.is-on > span{left:20px}

/* ── E5 — compact group-detail topbar + contextual sections menu ───────────── */
.group-detail-topbar{
  display:flex; align-items:center; gap:12px;
  padding:14px 4px 10px; margin-bottom:6px; position:relative;
}
.group-detail-topbar__back,
.group-detail-topbar__menu{
  flex:none; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; font-size:1.05rem;
  background:var(--qz-surface,#fff); border:1px solid var(--qz-line,#e2e8f0);
  color:var(--qz-text,#0f172a); cursor:pointer;
  transition:background var(--qz-dur-ui), border-color var(--qz-dur-ui), transform .1s;
}
.group-detail-topbar__back:active,
.group-detail-topbar__menu:active{ transform:scale(var(--qz-press-scale)); }
.group-detail-topbar__menu[aria-expanded="true"]{
  background:#E1F5EE; border-color:#1D9E75; color:#0F6E56;
}
.group-detail-topbar__id{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
.group-detail-topbar__id .qzr-hub__hero-badge{ flex:none; }
.group-detail-topbar__titles{ min-width:0; }
.group-detail-topbar__name{
  margin:0; font-size:1.15rem; line-height:1.2; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Permanently hidden. It restated "N membres · <mode> · Niv. X", all of which
   the page already shows — members in its own view, the mode on the card the
   visitor arrived from, the level on the XP card. groups.js still relocates the
   node onto the breadcrumb (same code path as the sections trigger, which must
   keep moving), so this hides it wherever it lands rather than at one address. */
.group-detail-topbar__meta{ display:none !important; }
.group-detail-topbar__meta .fa-users{ margin-right:3px; }

.group-detail-tabs.group-sections-menu{
  display:flex; flex-direction:column; gap:2px;
  width:min(300px,92%); margin:0 4px 16px auto; padding:6px;
  background:var(--qz-surface,#fff); border:1px solid var(--qz-line,#e2e8f0);
  border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.14);
  animation:qzrSectionsIn .16s ease;
}
.group-detail-tabs.group-sections-menu[hidden]{ display:none !important; }
@keyframes qzrSectionsIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
.group-sections-menu > button{
  display:flex !important; align-items:center; gap:11px; width:100%;
  justify-content:flex-start !important; text-align:left;
  padding:11px 12px; border:0 !important; border-radius:9px; background:transparent;
  font-size:.9rem; font-weight:500; color:var(--qz-text,#0f172a); cursor:pointer;
}
.group-sections-menu > button .fas{ font-size:1rem; width:18px; text-align:center; color:var(--qz-muted,#64748b); }
/* --qz-surface-2 is NOT a token of this app: it exists only inside
   admin/css/vnext-admin.css. Here the var() always fell through to its #f1f5f9
   fallback — a near-white hover background — while the label stays --qz-text,
   which is near-white in dark mode. Hovering "Retirer le parcours" made the
   label disappear into the hover state. Same for .is-active, whose pair was
   hardcoded light.
   Both now derive from tokens that flip with the theme, so the contrast holds
   in dark as well as light. */
.group-sections-menu > button:hover{ background:color-mix(in srgb, var(--qz-text) 8%, var(--qz-surface)); }
.group-sections-menu > button.is-active{ background:var(--qz-accent-soft); color:var(--qz-accent-ink); }
.group-sections-menu > button.is-active .fas{ color:var(--qz-accent-ink); }

/* Generous spacing on the panels below */
.group-detail-tab-panels{ padding-top:6px; }
.group-detail-panel.is-active{ display:flex; flex-direction:column; gap:16px; }

/* E5 — sections trigger + menu relocated onto the top breadcrumb line (top-menu-down) */
#top-menu-down.has-group-sections{ position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
/* The parcours trigger and menu were never added to these two rules, so on the
   chemin the layers icon sat wherever the flex flow left it and its menu
   rendered inline instead of dropping from the right edge. Same treatment as
   the group menu — they are the same component in two places. */
#top-menu-down.has-group-sections #group-sections-trigger,
#top-menu-down.has-group-sections #parcours-actions-trigger{ margin-left:auto; }
#top-menu-down.has-group-sections #group-sections-menu,
#top-menu-down.has-group-sections #parcours-actions-menu{ position:absolute; top:100%; right:0; margin-top:6px; z-index:60; }

/* ── Barre de progression du téléchargement ─────────────────────────────────
   Posée juste sous l'item, DANS le menu, et créée seulement pendant le
   téléchargement. Le compteur "3/12" du libellé reste : il dit combien, la
   barre dit où on en est — deux lectures différentes du même événement. */
.qzr-offline-progress{
  height:4px; margin:2px 12px 8px; border-radius:var(--qz-r-pill,999px);
  background:color-mix(in srgb, var(--qz-text) 12%, var(--qz-surface));
  overflow:hidden;
}
.qzr-offline-progress__fill{
  display:block; height:100%; width:0%;
  background:var(--qz-accent);
  border-radius:inherit;
  transition:width .25s var(--qz-ease, ease);
}
@media (prefers-reduced-motion: reduce){
  .qzr-offline-progress__fill{ transition:none; }
}

/* E5 — group meta as a subtitle under the breadcrumb title (sibling of #current-title-displayer__) */
#top-menu-down .breadcrumb .group-detail-topbar__meta{
  flex-basis:100%; width:100%; display:block; margin:0px 0 0 -0.8rem;
  font-size:.72rem; font-weight:400; color:var(--qz-muted,#64748b);
  text-transform:none; letter-spacing:0;
}
#top-menu-down .breadcrumb .group-detail-topbar__meta::before{ content:none; }
#top-menu-down .breadcrumb .group-detail-topbar__meta .fa-users{ margin-right:3px; }

/* E5 — hide the group meta subtitle on mobile */
@media (max-width: 640px){
  #top-menu-down .breadcrumb .group-detail-topbar__meta{ display:none !important; }
}

/* ── E1: inline group Messages panel (reuses the message flow, native scroll) ── */
[data-qz-skin="groupes"] .group-detail-panel[data-tab-panel="messages"] { padding: 0; }
[data-qz-skin="groupes"] .gd-messages-surface {
  display: flex;
  flex-direction: column;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  overflow: hidden;
}
[data-qz-skin="groupes"] .gd-messages-wrapper {
  position: relative;
  height: 56vh;
  max-height: 56vh;
  min-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 20px;
  scrollbar-color: var(--qz-600) rgb(247, 225, 132, 0.05) !important;
  scrollbar-width: thin;
  transition: scrollbar-color 0.3s ease-out;
}
/* Neutralise the modal-oriented sizing/scroll the flow markup ships with. */
[data-qz-skin="groupes"] .gd-messages-surface .messages-flow {
  height: auto !important;
  min-height: 100%;
  overflow: visible !important;
  padding: 4px 8px;
}
[data-qz-skin="groupes"] .gd-messages-surface .modal-footer {
  border-top: 1px solid var(--qz-line) !important;
  padding: 8px !important;
  margin: 0 !important;
  background: var(--qz-surface);
}
/* E1 — the composer form ships a dynamic-accent background from the modal context;
   neutralise it for the inline panel + make the input readable. */
[data-qz-skin="groupes"] .gd-messages-surface .modal-footer .card {
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  border-radius: 12px !important;
  min-height: auto;
}
[data-qz-skin="groupes"] .gd-messages-surface .modal-footer .card-body,
[data-qz-skin="groupes"] .gd-messages-surface .modal-footer .grow-wrap {
  background: transparent !important;
}
[data-qz-skin="groupes"] .gd-messages-surface .modal-footer .message-input {
  background: transparent !important;
  color: var(--qz-text) !important;
  font-size: .95rem !important;
  min-height: 22px;
  max-height: 96px;
}

/* ════════════════════════════════════════════════════════════════════════════
   GD-Identity — bandeau d'identité + aperçu reskin (2026-08-16)
   --------------------------------------------------------------------------
   L'identité du groupe possède le haut de l'écran. Le fond prend --group-accent
   (posé sur .group-detail-shell), assombri en dégradé pour que le texte reste
   lisible quelle que soit la couleur tirée du nom ; INDÉPENDANT du thème de
   marque. --group-ink (blanc ou encre) est calculé côté PHP par groupe.
   ════════════════════════════════════════════════════════════════════════════ */
[data-qz-skin="groupes"] .gd-identity {
  position: relative;
  overflow: hidden;
  margin: -12px -14px 0;
  padding: 20px 18px 16px;
  border-radius: 0 0 var(--qz-r-screen, 30px) var(--qz-r-screen, 30px);
  /* Régime SOMBRE (encre blanche). Le stop haut est légèrement assombri (88%)
     et non la teinte brute : une couleur limite-sombre (ex. #D94355) laissait
     le blanc des petites pastilles à 4,3 sur la teinte pure ; 88% le remonte
     au-dessus de 4,5 sans perdre la couleur. */
  background: linear-gradient(155deg, color-mix(in srgb, var(--group-accent, var(--qz-accent)) 88%, #000), color-mix(in srgb, var(--group-accent, var(--qz-accent)) 44%, #000));
  color: var(--group-ink, #FFFFFF);
}
[data-qz-skin="groupes"] .gd-identity__grid {
  position: absolute; inset: 0; opacity: .20; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.7) 1px, transparent 0);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
          mask-image: linear-gradient(180deg, #000, transparent 78%);
}
[data-qz-skin="groupes"] .gd-identity__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(106deg, transparent 36%, rgba(255,255,255,.12) 50%, transparent 62%);
}
[data-qz-skin="groupes"] .gd-identity__in {
  position: relative; z-index: 2;
  display: flex; gap: 14px; align-items: flex-end;
}
[data-qz-skin="groupes"] .gd-identity__ava {
  width: 78px; height: 78px; flex: 0 0 auto;
  border-radius: 24px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 31px; font-weight: 600; color: #fff;
  border: 3px solid rgba(255,255,255,.85);
  background: linear-gradient(135deg, color-mix(in srgb, var(--group-accent, var(--qz-accent)) 78%, #fff), var(--group-accent, var(--qz-accent)));
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
}
[data-qz-skin="groupes"] .gd-identity__ava img { width: 100%; height: 100%; object-fit: cover; }
[data-qz-skin="groupes"] .gd-identity__titles { min-width: 0; padding-bottom: 2px; }
[data-qz-skin="groupes"] .gd-identity__name {
  margin: 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.12; color: inherit;
}
[data-qz-skin="groupes"] .gd-identity__lvl {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: 3px 11px 3px 9px; border-radius: var(--qz-r-pill);
  background: rgba(0,0,0,.24); font-size: .74rem; font-weight: 600;
}
[data-qz-skin="groupes"] .gd-identity__lvl b { color: var(--qz-energy, #F5C542); }
[data-qz-skin="groupes"] .gd-identity__lvl i { color: var(--qz-energy, #F5C542); }
[data-qz-skin="groupes"] .gd-identity__chips {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px;
}
[data-qz-skin="groupes"] .gd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--qz-r-pill);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.20);
  font-size: .72rem; font-weight: 500; color: inherit;
}
[data-qz-skin="groupes"] .gd-chip i { font-size: .8em; opacity: .9; }
[data-qz-skin="groupes"] .gd-chip__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #6EE7B7;
  box-shadow: 0 0 0 3px rgba(110,231,183,.28);
}
[data-qz-skin="groupes"] .gd-identity__desc {
  position: relative; z-index: 2; margin: 12px 0 0;
  font-size: .82rem; line-height: 1.5; color: inherit; opacity: .86;
}

/* CTA contextuel — flotte en chevauchant le bas du bandeau ; bouton primaire à
   la couleur du GROUPE (pas l'accent de marque). */
[data-qz-skin="groupes"] .content-card.group-detail-section--quick-actions {
  position: relative; z-index: 5;
  margin: -20px 0 8px !important;
  padding: 0 !important;
}
[data-qz-skin="groupes"] .group-detail-quick-actions .btn-ux--primary {
  background: var(--qz-surface) !important;
  color: var(--group-accent, var(--qz-accent)) !important;
  border: none !important;
  border-bottom: 4px solid color-mix(in srgb, var(--group-accent, var(--qz-accent)) 55%, #000) !important;
  box-shadow: var(--qz-shadow-md) !important;
  border-radius: 14px !important;
}
[data-qz-skin="groupes"] .group-detail-quick-actions .btn-ux--primary:active { transform: scale(var(--qz-press-scale)); border-bottom-width: 2px !important; }

/* ── XP d'équipe (aperçu) ─────────────────────────────────────────────────── */
[data-qz-skin="groupes"] .gd-ovxp {
  background: var(--qz-surface); border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card); padding: 15px; box-shadow: var(--qz-shadow-sm);
}
[data-qz-skin="groupes"] .gd-ovxp__top { display: flex; align-items: center; gap: 12px; }
[data-qz-skin="groupes"] .gd-ovxp__ring {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 21px; position: relative;
  background: conic-gradient(var(--group-accent, var(--qz-accent)) calc(var(--pct,0) * 1%), color-mix(in srgb, var(--group-accent, var(--qz-accent)) 16%, var(--qz-surface)) 0);
}
[data-qz-skin="groupes"] .gd-ovxp__ring::after { content:""; position:absolute; inset:5px; border-radius:50%; background: var(--qz-surface); }
[data-qz-skin="groupes"] .gd-ovxp__ring span { position: relative; z-index: 2; }
[data-qz-skin="groupes"] .gd-ovxp__id { min-width: 0; }
[data-qz-skin="groupes"] .gd-ovxp__lvl { font-size: .95rem; font-weight: 600; color: var(--qz-text); }
[data-qz-skin="groupes"] .gd-ovxp__xp { font-size: .78rem; color: var(--qz-muted); font-variant-numeric: tabular-nums; }
[data-qz-skin="groupes"] .gd-ovxp__week { margin-left: auto; text-align: right; }
[data-qz-skin="groupes"] .gd-ovxp__week b { font-size: .95rem; font-weight: 600; color: var(--qz-accent-ink); font-variant-numeric: tabular-nums; }
[data-qz-skin="groupes"] .gd-ovxp__week span { display: block; font-size: .68rem; color: var(--qz-muted); }
[data-qz-skin="groupes"] .gd-ovxp__bar { height: 9px; border-radius: 99px; background: var(--qz-accent-soft); overflow: hidden; margin-top: 13px; }
[data-qz-skin="groupes"] .gd-ovxp__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--group-accent, var(--qz-accent)), var(--qz-energy, #F5C542)); }
[data-qz-skin="groupes"] .gd-ovxp__next { margin-top: 7px; font-size: .72rem; color: var(--qz-muted); font-variant-numeric: tabular-nums; }
[data-qz-skin="groupes"] .gd-ovxp__chal { margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--qz-line); }
[data-qz-skin="groupes"] .gd-ovxp__chal-hd { display: flex; align-items: baseline; gap: 8px; font-size: .78rem; color: var(--qz-muted); }
[data-qz-skin="groupes"] .gd-ovxp__chal-hd b { font-size: .82rem; font-weight: 600; color: var(--qz-text); }
[data-qz-skin="groupes"] .gd-ovxp__chal-v { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--qz-accent-ink); font-weight: 600; }
[data-qz-skin="groupes"] .gd-ovxp__chal-track { height: 9px; border-radius: 99px; background: var(--qz-accent-soft); overflow: hidden; margin-top: 8px; }
[data-qz-skin="groupes"] .gd-ovxp__chal-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--group-accent, var(--qz-accent)), var(--qz-energy, #F5C542)); }

/* ── Membres (aperçu) ─────────────────────────────────────────────────────── */
[data-qz-skin="groupes"] .gd-ovmem {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin-top: 4px; margin-bottom: 4px;
  background: var(--qz-surface); border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card); padding: 13px 15px; cursor: pointer; font: inherit;
  transition: border-color var(--qz-dur-ui) var(--qz-ease);
}
[data-qz-skin="groupes"] .gd-ovmem:hover { border-color: var(--qz-accent-mid); }
[data-qz-skin="groupes"] .gd-faces { display: inline-flex; flex: 0 0 auto; }
[data-qz-skin="groupes"] .gd-face {
  width: 34px; height: 34px; border-radius: 50%; margin-left: -10px;
  border: 2px solid var(--qz-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 600;
}
[data-qz-skin="groupes"] .gd-face:first-child { margin-left: 0; }
[data-qz-skin="groupes"] .gd-face--more { background: var(--qz-accent-soft); color: var(--qz-accent-ink); }
[data-qz-skin="groupes"] .gd-ovmem__b { flex: 1; min-width: 0; }
[data-qz-skin="groupes"] .gd-ovmem__c { display: block; font-size: .9rem; font-weight: 600; color: var(--qz-text); }
[data-qz-skin="groupes"] .gd-ovmem__on { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--qz-success-ink); margin-top: 2px; }
[data-qz-skin="groupes"] .gd-ovmem__on--muted { color: var(--qz-muted); }
[data-qz-skin="groupes"] .gd-ovmem__on .d { width: 7px; height: 7px; border-radius: 50%; background: var(--qz-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qz-success) 25%, transparent); }
[data-qz-skin="groupes"] .gd-ovmem__go { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--qz-line); display: flex; align-items: center; justify-content: center; color: var(--qz-muted); font-size: .78rem; }

/* ── Raccourcis Quiz / Parcours / Défis ───────────────────────────────────── */
[data-qz-skin="groupes"] .gd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

/* Sur mobile, DEUX par ligne. La grille compte quatre tuiles pour trois
   colonnes : sur un ecran etroit la quatrieme se retrouvait seule sur sa
   ligne, a un tiers de largeur. Deux colonnes les equilibrent en 2 + 2.
   `minmax(0, 1fr)` et non `1fr` : une colonne `1fr` garde `min-width: auto`
   et deborde des qu'un libelle est plus large que sa part. */
@media (max-width: 767.98px) {
  [data-qz-skin="groupes"] .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Réglage demandé : plus d'air au-dessus du CTA contextuel. */
[data-qz-skin="groupes"] .group-detail-quick-actions,
#friends .group-detail-quick-actions { margin-top: 2rem; }

/* Sur la page détail, le bandeau d'identité affiche déjà le nom en grand : le
   titre du fil d'Ariane fait doublon. Masqué pendant le détail (has-group-sections
   est posé sur #top-menu-down par renderGroupDetailState et retiré en sortie).
   Bare selector : #top-menu-down est le fil d'Ariane GLOBAL, hors du conteneur skinné. */
#top-menu-down.has-group-sections #current-title-displayer__ { display: none !important; }
[data-qz-skin="groupes"] .gd-tile {
  background: var(--qz-surface); border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card); padding: 14px 10px; text-align: center;
  cursor: pointer; font: inherit; color: var(--qz-text);
  transition: transform var(--qz-dur-ui) var(--qz-ease), border-color var(--qz-dur-ui) var(--qz-ease);
}
[data-qz-skin="groupes"] .gd-tile.trigger-group-detail-tab:hover { transform: translateY(-2px); border-color: var(--qz-accent-mid); }
[data-qz-skin="groupes"] .gd-tile--static { cursor: default; }
[data-qz-skin="groupes"] .gd-tile i { font-size: 1.05rem; color: var(--group-accent, var(--qz-accent)); }
[data-qz-skin="groupes"] .gd-tile b { display: block; font-size: 1.2rem; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
[data-qz-skin="groupes"] .gd-tile span { font-size: .72rem; color: var(--qz-muted); }

[data-qz-skin="groupes"] .group-detail-panel[data-tab-panel="overview"].is-active { gap: 14px; }

@media (max-width: 767.98px) {
  [data-qz-skin="groupes"] .gd-identity { margin-left: -12px; margin-right: -12px; }
}

/* Régime « onlight » — couleur de groupe CLAIRE, encre foncée (--group-ink).
   Le dégradé s'ÉCLAIRCIT (au lieu d'assombrir vers le noir) et les surfaces
   translucides passent en noir, sinon le texte foncé serait illisible sur un
   fond assombri, et les pastilles blanches invisibles sur un fond clair. */
[data-qz-skin="groupes"] .gd-identity--onlight {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--group-accent, var(--qz-accent)) 82%, #fff),
    color-mix(in srgb, var(--group-accent, var(--qz-accent)) 58%, #fff));
}
[data-qz-skin="groupes"] .gd-identity--onlight .gd-identity__grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.35) 1px, transparent 0);
  opacity: .14;
}
[data-qz-skin="groupes"] .gd-identity--onlight .gd-identity__sheen {
  background: linear-gradient(106deg, transparent 36%, rgba(255,255,255,.28) 50%, transparent 62%);
}
[data-qz-skin="groupes"] .gd-identity--onlight .gd-identity__lvl { background: rgba(0,0,0,.14); }
[data-qz-skin="groupes"] .gd-identity--onlight .gd-identity__lvl b,
[data-qz-skin="groupes"] .gd-identity--onlight .gd-identity__lvl i { color: var(--qz-energy-deep, #B8860B); }
[data-qz-skin="groupes"] .gd-identity--onlight .gd-chip {
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}
/* La pastille avatar garde un liseré clair même sur fond clair, pour se détacher. */
[data-qz-skin="groupes"] .gd-identity--onlight .gd-identity__ava { border-color: rgba(255,255,255,.9); }

/* ── Fil de retour d'une section de groupe ───────────────────────────────────
   Reprend la geometrie de `.perf-detail-nav` / `.perf-back-btn`
   (vnext-performances.css:518-536) : bouton rond borde + libelle nommant la
   destination. Repris et non reutilise — la regle d'origine est scopee
   [data-qz-skin="performances"] et ne peut pas s'appliquer ici.

   Pose par groups.js::syncGroupSectionBackTrail, en tete de la section
   active ; absent de l'apercu, qui est la racine du groupe. */
.gp-back-trail {
  display: flex;
  align-items: center;
  gap: var(--qz-2);
  margin: 0 0 var(--qz-4);
}
.gp-back-trail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  color: var(--qz-text);
  cursor: pointer;
  font-size: var(--qz-fs-sm);
}
.gp-back-trail__btn:hover,
.gp-back-trail__btn:focus-visible {
  border-color: var(--qz-accent-mid, var(--qz-accent));
  color: var(--qz-accent);
  outline: none;
}
.gp-back-trail__label {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La section courante est la ou l'on EST : elle porte l'accent, le parent reste
   en retrait. Sans ce contraste les deux se lisent comme un seul libelle. */
.gp-back-trail__current {
  color: var(--qz-text);
  font-weight: var(--qz-fw-strong);
}