/* ============================================================================
   QZR vNext — Groupes
   ----------------------------------------------------------------------------
   Strangler migration: scoped by [data-qz-skin="groupes"]. Overrides legacy
   #friends / .groups-* styles with vNext tokens. Requires vnext-tokens.css.
   ============================================================================ */

/* ── Container ───────────────────────────────────────────────────────────── */
[data-qz-skin="groupes"] {
  color: var(--qz-text);
  font-family: var(--qz-font);
  max-width: 640px;
  margin: 0 auto;
  padding: 0px 14px 32px;
}

[data-qz-skin="groupes"] .groups-page-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Bandeau d'entrée + segmenté flottant
   --------------------------------------------------------------------------
   Même grammaire que le hub Compétitions : le fond prend le BAS de la rampe
   accent (--qz-600 → --qz-900), déjà déclaré et jamais employé à pleine
   surface, et l'élément qui chevauche le bandeau est celui qui pilote la page.
   Aucune teinte hors charte. Les marges négatives annulent le padding de la
   colonne pour aller pleine largeur.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-qz-skin="groupes"] .groups-hero {
  position: relative;
  overflow: hidden;
  margin: -16px -14px 0;
  padding: 24px 20px 52px;
  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) 62%, transparent), transparent 62%),
    linear-gradient(152deg, var(--qz-600), var(--qz-900));
  color: #FFFFFF;
}
[data-qz-skin="groupes"] .groups-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="groupes"] .groups-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="groupes"] .groups-hero__in { position: relative; z-index: 2; }
[data-qz-skin="groupes"] .groups-hero__eyebrow {
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  font-weight: var(--qz-fw-strong);
}
[data-qz-skin="groupes"] .groups-hero__h {
  margin: 8px 0 0;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: #FFFFFF;
}
[data-qz-skin="groupes"] .groups-hero__bot {
  position: absolute;
  right: -6px;
  bottom: -14px;
  width: 116px;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .34));
  animation: qzGroupsBotFloat 3.4s var(--qz-ease) infinite;
}
[data-qz-skin="groupes"] .groups-hero__bot .qzr-mascot-svg,
[data-qz-skin="groupes"] .groups-hero__bot svg { width: 100%; height: auto; display: block; }
@keyframes qzGroupsBotFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}

/* La mascotte occupe le coin bas-droit du bandeau : sans cette largeur maximale
   le troisième libellé passe dessous et se fait tronquer (« en l… »). */
[data-qz-skin="groupes"] .groups-hero__stats {
  display: flex;
  margin-top: 16px;
  max-width: 74%;
}
[data-qz-skin="groupes"] .groups-hero__stat { flex: 1; min-width: 0; }
[data-qz-skin="groupes"] .groups-hero__stat + .groups-hero__stat {
  border-left: 1px solid rgba(255, 255, 255, .2);
  padding-left: 13px;
}
[data-qz-skin="groupes"] .groups-hero__stat:not(:last-child) { padding-right: 13px; }
[data-qz-skin="groupes"] .groups-hero__v {
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="groupes"] .groups-hero__l {
  font-size: .68rem;
  color: rgba(255, 255, 255, .72);
  margin-top: 3px;
  line-height: 1.3;
}

/* Segmenté flottant : chevauche le bas du bandeau. */
[data-qz-skin="groupes"] .groups-float {
  position: relative;
  z-index: 5;
  margin: -32px 0 6px;
}
[data-qz-skin="groupes"] .groups-float .groups-tabsbar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 0;
  margin: 0;
  padding: 5px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-pill);
  box-shadow: var(--qz-shadow-md);
}
[data-qz-skin="groupes"] .groups-seg {
  flex: 1 1 auto;
  display: flex;
  gap: 4px;
  border-bottom: 0;
  margin: 0;
}
[data-qz-skin="groupes"] .groups-seg .groups-tab {
  flex: 1;
  border: none;
  border-bottom: none;
  margin-bottom: 0;
  padding: 9px 8px;
  border-radius: var(--qz-r-pill);
  font-size: .86rem;
  font-weight: 600;
  color: var(--qz-muted);
  background: transparent;
  transition: background var(--qz-dur-ui) var(--qz-ease), color var(--qz-dur-ui) var(--qz-ease);
}
[data-qz-skin="groupes"] .groups-seg .groups-tab.is-active {
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  border-bottom-color: transparent;
}
[data-qz-skin="groupes"] .groups-float .groups-tabsbar__create {
  flex: 0 0 auto;
  padding-bottom: 0;
}
[data-qz-skin="groupes"] .groups-float .groups-header__create {
  width: 40px;
  height: 40px;
  min-width: 40px;
  font-size: 1rem;
}

/* ── E3: header + tabs aligned with the QZR Studio page ────────────────────── */
[data-qz-skin="groupes"] .groups-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
[data-qz-skin="groupes"] .groups-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
[data-qz-skin="groupes"] .groups-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--qz-r-card);
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  font-size: 1.5rem;
  display: none;
}
[data-qz-skin="groupes"] .groups-header__titles { min-width: 0; }
[data-qz-skin="groupes"] .groups-header__title {
  font-size: var(--qz-fs-title);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin: 0;
  line-height: 1.2;
}
[data-qz-skin="groupes"] .groups-header__count {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  margin: 2px 0 0;
  text-align: start;
}
[data-qz-skin="groupes"] .groups-header__count strong { color: var(--qz-text); }
[data-qz-skin="groupes"] .groups-header__create {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  border: none;
  border-bottom: 3px solid var(--qz-accent-deep);
  font-size: 1.1rem;
  cursor: pointer;
  transition: filter var(--qz-dur-press) var(--qz-ease), transform var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="groupes"] .groups-header__create:hover { filter: brightness(1.05); }
[data-qz-skin="groupes"] .groups-header__create:active { transform: scale(var(--qz-press-scale)); border-bottom-width: 2px; }

/* Tab row + create action on ONE line, 80 / 20. The underline belongs to the
   whole bar, not to the tabs alone — otherwise it would stop short of the
   button and read as a broken rule. */
[data-qz-skin="groupes"] .groups-tabsbar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-bottom: 1px solid var(--qz-line);
  margin-bottom: 6px;
}
[data-qz-skin="groupes"] .groups-tabsbar .groups-tabs {
  flex: 0 1 80%;
  min-width: 0;
  border-bottom: 0;
  margin-bottom: 0;
}
/* The 20% column is the alignment box; the button keeps its own 48px circle
   and sits at its right edge. Stretching a round button to 20% would just make
   an ellipse. */
[data-qz-skin="groupes"] .groups-tabsbar__create {
  flex: 0 0 20%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 6px;
}

[data-qz-skin="groupes"] .groups-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--qz-line);
  margin-bottom: 6px;
}
[data-qz-skin="groupes"] .groups-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 6px;
  margin-bottom: -1px;
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
  cursor: pointer;
  transition: color var(--qz-dur-press) var(--qz-ease), border-color var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="groupes"] .groups-tab:hover { color: var(--qz-accent-ink); }
[data-qz-skin="groupes"] .groups-tab.is-active {
  color: var(--qz-accent);
  border-bottom-color: var(--qz-accent);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
[data-qz-skin="groupes"] .groups-mobile-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--qz-r-card);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
}

[data-qz-skin="groupes"] .groups-mobile-hero__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: 1.3rem;
}

[data-qz-skin="groupes"] .groups-mobile-hero__body {
  flex: 1;
  min-width: 0;
}

[data-qz-skin="groupes"] .groups-mobile-hero__eyebrow {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: .7rem;
  font-weight: var(--qz-fw-strong);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

[data-qz-skin="groupes"] .groups-mobile-hero__title {
  margin: 0;
  font-size: 20px;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  line-height: 1.15;
}

[data-qz-skin="groupes"] .groups-mobile-hero__subtitle {
  margin: 3px 0 0;
  font-size: .82rem;
  color: var(--qz-muted);
}

[data-qz-skin="groupes"] .groups-mobile-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: .82rem;
  color: var(--qz-muted);
}
[data-qz-skin="groupes"] .groups-mobile-hero__meta strong {
  color: var(--qz-text);
}

/* ── View tabs ────────────────────────────────────────────────────────────── */
[data-qz-skin="groupes"] .groups-view-tabs {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-radius: var(--qz-r-card);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  backdrop-filter: none;
  position: sticky;
  top: 8px;
  z-index: 3;
}

[data-qz-skin="groupes"] .groups-view-tabs .action-chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--qz-r-pill);
  background: transparent;
  color: var(--qz-muted);
  font-size: .82rem;
  font-weight: var(--qz-fw-strong);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--qz-dur-ui), color var(--qz-dur-ui);
}
[data-qz-skin="groupes"] .groups-view-tabs .action-chip:hover {
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}
[data-qz-skin="groupes"] .groups-view-tabs .action-chip.is-active {
  background: var(--qz-accent-soft) !important;
  color: var(--qz-accent-ink) !important;
}

/* ── Search ────────────────────────────────────────────────────────────────── */
[data-qz-skin="groupes"] .groups-mobile-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--qz-line);
  border-radius: var(--qz-r-field);
  background: var(--qz-surface);
}
[data-qz-skin="groupes"] .groups-mobile-search:focus-within {
  border-color: var(--qz-accent);
  box-shadow: var(--qz-focus-ring);
}
[data-qz-skin="groupes"] .groups-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--qz-text);
  font-family: var(--qz-font);
  font-size: var(--qz-fs-body);
}
[data-qz-skin="groupes"] .groups-search-input::placeholder {
  color: var(--qz-muted);
}
[data-qz-skin="groupes"] .groups-mobile-search__icon { color: var(--qz-muted); }
[data-qz-skin="groupes"] .groups-mobile-search__clear {
  color: var(--qz-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* ── Filter row ───────────────────────────────────────────────────────────── */
[data-qz-skin="groupes"] .groups-filter-row {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 6px;
}
[data-qz-skin="groupes"] .groups-filter-row .action-chip,
[data-qz-skin="groupes"] .groups-filter-row .group-status-filter {
  padding: 6px 12px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  color: var(--qz-muted);
  font-size: .78rem;
  font-weight: var(--qz-fw-strong);
  cursor: pointer;
}
[data-qz-skin="groupes"] .groups-filter-row .action-chip.is-active,
[data-qz-skin="groupes"] .groups-filter-row .group-status-filter.action-chip--accent-secondary {
  background: var(--qz-accent-soft) !important;
  color: var(--qz-accent-ink) !important;
  border-color: var(--qz-accent-mid) !important;
}

/* ── Group cards ──────────────────────────────────────────────────────────── */
[data-qz-skin="groupes"] .group-option {
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card) !important;
  background: var(--qz-surface) !important;
  box-shadow: none !important;
  transition: border-color var(--qz-dur-ui), background var(--qz-dur-ui);
}
[data-qz-skin="groupes"] .group-option:hover,
[data-qz-skin="groupes"] .group-option:focus-visible {
  transform: none !important;
  border-color: var(--qz-accent-mid) !important;
  background: var(--qz-accent-soft) !important;
  box-shadow: none !important;
}

/* ── Create button ────────────────────────────────────────────────────────── */
[data-qz-skin="groupes"] .groups-create-chip {
  background: var(--qz-accent) !important;
  color: var(--qz-on-accent) !important;
  border: none !important;
  border-bottom: 3px solid var(--qz-accent-deep) !important;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* `#friends` et non le skin : c'est l'ID demande, et il l'emporte de toute
     facon sur `[data-qz-skin]`. Le `calc(12px + 64px)` du bas a disparu avec
     lui — il reservait la place de la barre de navigation basse, or la route
     `groups` la masque (mobileBottomNav:false), donc c'etait 64px de vide. */
  #friends {
    padding: 0 0.75rem !important;
  }
  /* La marge négative du bandeau doit suivre le padding HORIZONTAL de la
     colonne, sinon elle le dépasse et la page déborde (mesuré : 379px de
     bandeau dans 375px de colonne). 0.75rem = 12px, la valeur est donc
     inchangée horizontalement ; en HAUT elle passe à 0, car il n'y a plus de
     padding vertical à compenser — un -12px sortirait le bandeau du cadre. */
  [data-qz-skin="groupes"] .groups-hero {
    margin: 0 -0.75rem 0;
  }
  [data-qz-skin="groupes"] .groups-mobile-hero { padding: 14px; }
  [data-qz-skin="groupes"] .groups-mobile-hero__title { font-size: 18px; }
}

/* ============================================================================
   Lean group card + discover sections (groups-discover mockup)
   ========================================================================== */
[data-qz-skin="groupes"] .groups-section { margin-bottom: 18px; }
[data-qz-skin="groupes"] .groups-section__title {
  font-size: 1rem;
  font-weight: var(--qz-fw-strong, 800);
  color: var(--qz-text);
  margin: 4px 2px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-qz-skin="groupes"] .groups-section__spark { color: var(--qz-accent); }
[data-qz-skin="groupes"] .groups-section.is-section-empty { display: none; }

/* ── List grid — mirrors vnext-players.css exactly (2 cols, 3 at ≥540px) ──
   Covers BOTH shapes: "mine" renders one <div class="list">, discover renders
   one <div class="row list"> per section, each becoming its own grid. */
[data-qz-skin="groupes"] .groups-list-panel .list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 !important;
}
@media (min-width: 540px) {
  [data-qz-skin="groupes"] .groups-list-panel .list { grid-template-columns: repeat(3, 1fr); }
}

/* Card cell — neutralise the Bootstrap column sizing + the my-2 margins */
[data-qz-skin="groupes"] .groups-list-panel .group-card-cell {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Card: image top / name middle / badges bottom (players-style) ── */
[data-qz-skin="groupes"] .group-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  /* Padding haut à 0 : le bandeau de couverture va bord à bord. */
  padding: 0 12px 14px !important;
  overflow: hidden;
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card) !important;
  box-shadow: 1px 1px 1px 0px rgb(255 255 255 / 10%), 0px 0px 2px 0px color-mix(in srgb, var(--qz-accent) 50%, transparent) !important;
  cursor: pointer;
  text-align: center;
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
  animation: qzGroupsPopIn .42s var(--qz-ease-pop) both;
}
@keyframes qzGroupsPopIn {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
}

/* ── Bandeau de couverture à la couleur du groupe ──────────────────────────
   `--group-accent` est posé en inline par groupTemplate.php depuis
   genColorCodeFromText (ou la couleur personnalisée du groupe). Il existait
   déjà et n'était référencé par AUCUNE règle : c'est ce qui rendait six cartes
   interchangeables. La couleur reste celle du groupe, pas celle du thème —
   c'est une IDENTITÉ, pas un accent de marque. */
[data-qz-skin="groupes"] .group-card__cover {
  position: relative;
  width: calc(100% + 24px);
  margin: 0 -12px 0;
  height: 38px;
  flex: 0 0 auto;
  background: linear-gradient(115deg, var(--group-accent, var(--qz-accent)), color-mix(in srgb, var(--group-accent, var(--qz-accent)) 52%, #000));
  transition: filter var(--qz-dur-ui) var(--qz-ease);
}
[data-qz-skin="groupes"] .group-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .5) 1px, transparent 0);
  background-size: 13px 13px;
  opacity: .3;
}
[data-qz-skin="groupes"] .group-card:hover .group-card__cover { filter: saturate(1.35); }

/* Pastille « en ligne » — n'est rendue que si quelqu'un l'est vraiment. */
[data-qz-skin="groupes"] .group-card__live {
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--qz-r-pill);
  background: rgba(0, 0, 0, .34);
  color: #FFFFFF;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
[data-qz-skin="groupes"] .group-card__livedot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6EE7B7;
  flex: 0 0 auto;
}

/* ── Pile de visages ───────────────────────────────────────────────────────
   Les initiales sont peintes en pseudo-élément depuis data-initial, JAMAIS en
   texte : la recherche du hub indexe $item.text() sur la cellule entière
   (groups.js applyGroupsSearch), donc une initiale en texte ferait matcher
   « a » sur tout groupe ayant un membre en A. */
[data-qz-skin="groupes"] .group-card__face {
  display: inline-flex;
  align-items: center;
}
[data-qz-skin="groupes"] .group-card__face .face__a {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: -7px;
  border: 2px solid var(--qz-surface);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 600;
  flex: 0 0 auto;
}
[data-qz-skin="groupes"] .group-card__face .face__a::before { content: attr(data-initial); }
[data-qz-skin="groupes"] .group-card__face + .group-card__members { margin-left: 11px; }
[data-qz-skin="groupes"] .group-card:hover,
[data-qz-skin="groupes"] .group-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--qz-accent-mid, var(--qz-accent)) !important;
  box-shadow: var(--qz-shadow-sm, 0 12px 28px rgba(6, 20, 16, .13)) !important;
  outline: none;
}
[data-qz-skin="groupes"] .group-card:active { transform: translateY(0); }

/* Avatar — the players card's, exactly: the group image when there is one,
   otherwise the initial on a name-derived pastel (qz_build_letter_avatar).
   Il chevauche maintenant le bandeau de couverture (marge négative), ce qui
   donne la profondeur sans ombre supplémentaire. */
[data-qz-skin="groupes"] .group-card__avatar {
  margin: -26px 0 10px;
  position: relative;
  z-index: 2;
}
[data-qz-skin="groupes"] .group-card__avatar img,
[data-qz-skin="groupes"] .group-card__avatar .user-letter-avatar,
[data-qz-skin="groupes"] .group-card__avatar .no-picture-icon-container {
  border: 3px solid var(--qz-surface) !important;
  box-shadow: var(--qz-shadow-sm);
}
/* Groupe AVEC image : seul le rayon change. Une trame de points par-dessus une
   photo la salirait, et la photo est déjà l'identité de la carte. */
[data-qz-skin="groupes"] .group-card__avatar img {
  width: 66px !important;
  height: 66px !important;
  border-radius: 25% !important;
  object-fit: cover;
  border: 2px solid var(--qz-accent-soft);
}
/* Letter avatar — pinned to the image's box so a group with a picture and one
   without line up in the same grid row.
   Fond repris de .group-card__cover : EXACTEMENT le même dégradé, donc la
   pastille et le bandeau ne font plus qu'un seul objet coloré.
   Le fond inline dérivé du nom saute ici, et l'ancien avertissement de ce bloc
   ne s'applique pas : --group-accent est propre à chaque groupe (dérivé du nom
   par genColorCodeFromText, ou couleur personnalisée), les cartes restent donc
   distinctes.

   Fond plat : la couleur du groupe, telle quelle.
   L'encre ne peut pas être fixée en dur pour autant — la couleur vient d'un
   hachage de nom et sort parfois très claire (#64f764 : du blanc y tombe à
   1,40:1). `--group-ink` est calculée par groups_readable_ink() côté PHP, qui
   choisit entre le blanc et l'encre sombre celui qui contraste le mieux. */
[data-qz-skin="groupes"] .group-card__avatar .user-letter-avatar {
  width: 66px !important;
  height: 66px !important;
  border-radius: 25% !important;
  background: var(--group-accent, var(--qz-accent)) !important;
  color: #FFFFFF !important;
  /* color: var(--group-ink, #FFFFFF) !important; */
}
/* No font-size rule for the glyphs on purpose. It used to pin 27px !important,
   which would have kept two initials at the one-initial size — and !important
   beats the inline style, so the PHP would have been silently overruled.
   qz_build_letter_avatar() scales the face to the glyph count (.42 for one,
   .32 for two); leaving it inline keeps ONE owner of that ratio. */

/* Last-resort circle (no image AND no name): tint the generic bg-light block
   with the accent, center the glyph (its inline style carries a bottom offset
   — neutralise it). */
[data-qz-skin="groupes"] .group-card__avatar .no-picture-icon-container {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--qz-accent-soft) !important;
  border: 2px solid var(--qz-accent-soft);
  /* Troisième cas de la même famille (ni image, ni nom) : il portait encore
     rounded-circle et serait resté le seul rond entre deux pastilles à 25%. */
  border-radius: 25% !important;
}
[data-qz-skin="groupes"] .group-card__avatar .no-picture-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: static !important;
  color: var(--qz-accent-ink, var(--qz-accent)) !important;
}

[data-qz-skin="groupes"] .group-card__title {
  margin: 0 0 8px;
  font-size: var(--qz-fs-h3, 1.02rem);
  font-weight: var(--qz-fw-strong, 800);
  color: var(--qz-text) !important;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

/* Essential badges, centered under the name */
[data-qz-skin="groupes"] .group-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto; /* pins the badge row to the card bottom in the grid row */
}
[data-qz-skin="groupes"] .group-card__members {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: var(--qz-muted);
  font-weight: 600;
  white-space: nowrap;
}
[data-qz-skin="groupes"] .group-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--qz-r-pill);
  font-size: .72rem;
  font-weight: var(--qz-fw-strong, 700);
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
  color: var(--qz-muted);
  white-space: nowrap;
}
/* One tone per access mode, so the badge is readable as colour before it is
   read as text — and each tone MEANS its mode rather than being decorative:
     Libre          open door        success  (green)
     Sur demande    a gate, a wait   warning  (amber)
     Sur invitation curated, closed  accent   (teal)
   Error/red is deliberately not used: an invitation-only group is not a
   failure state, and red here would read as one.
   Background, ink and border all come from the SAME token pair, which is what
   keeps each badge in one tone — and both halves of every pair flip in dark
   mode, so no rule below needs a dark-mode twin. */
[data-qz-skin="groupes"] .group-card__badge--self_service {
  color: var(--qz-success-ink, var(--qz-success));
  background: var(--qz-success-bg);
  border-color: var(--qz-success-bg);
}
[data-qz-skin="groupes"] .group-card__badge--requestable {
  color: var(--qz-warning-ink, var(--qz-warning));
  background: var(--qz-warning-bg);
  border-color: var(--qz-warning-bg);
}
[data-qz-skin="groupes"] .group-card__badge--invitation_only {
  color: var(--qz-accent-ink, var(--qz-accent));
  background: var(--qz-accent-soft);
  border-color: var(--qz-accent-soft);
}

/* ── Section « Le plus actif » ─────────────────────────────────────────────
   Bâtie HORS de `.list` (renderGroupsSpotlight) : List.js pagine tout enfant
   de `.list`, donc une carte vedette placée dedans finissait éjectée du DOM.
   Ici elle est intouchable. */
[data-qz-skin="groupes"] .groups-spotlight { margin: 4px 0 18px; }
[data-qz-skin="groupes"] .groups-spotlight__title,
[data-qz-skin="groupes"] .groups-allhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 10px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--qz-text);
}
[data-qz-skin="groupes"] .groups-spotlight__spark { color: var(--qz-accent); }
[data-qz-skin="groupes"] .groups-allhead {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--qz-line);
}
[data-qz-skin="groupes"] .groups-allhead__n {
  font-size: .72rem;
  font-weight: 600;
  color: var(--qz-accent-ink);
  background: var(--qz-accent-soft);
  border-radius: var(--qz-r-pill);
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}

/* La carte vedette elle-même — reprend la maquette : couverture, avatar en
   chevauchement à GAUCHE, titre, visages, histogramme 7 jours. */
[data-qz-skin="groupes"] .gs-card {
  display: block;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  overflow: hidden;
  box-shadow: var(--qz-shadow-sm);
  cursor: pointer;
  text-align: start;
  transition: transform var(--qz-dur-ui) var(--qz-ease), box-shadow var(--qz-dur-ui) var(--qz-ease), border-color var(--qz-dur-ui) var(--qz-ease);
}
[data-qz-skin="groupes"] .gs-card:hover,
[data-qz-skin="groupes"] .gs-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--qz-accent-mid);
  box-shadow: var(--qz-shadow-md);
  outline: none;
}
[data-qz-skin="groupes"] .gs-cover {
  position: relative;
  height: 66px;
  background: linear-gradient(120deg, var(--group-accent, var(--qz-accent)), color-mix(in srgb, var(--group-accent, var(--qz-accent)) 55%, #000));
}
[data-qz-skin="groupes"] .gs-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .5) 1px, transparent 0);
  background-size: 15px 15px;
  opacity: .35;
}
[data-qz-skin="groupes"] .gs-flag {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--qz-r-pill);
  background: rgba(0, 0, 0, .32);
  color: #FFFFFF;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
[data-qz-skin="groupes"] .gs-flag__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--qz-energy);
  flex: 0 0 auto;
}
[data-qz-skin="groupes"] .gs-avatar {
  margin: -24px 0 0 14px;
  position: relative;
  z-index: 2;
  width: 60px;
}
/* Même rayon que les pastilles de la grille : 25% et non un pixel fixe, sinon
   les deux tailles d'avatar (60 et 66 px) ne donnent pas la même courbe. */
[data-qz-skin="groupes"] .gs-avatar img,
[data-qz-skin="groupes"] .gs-avatar .user-letter-avatar,
[data-qz-skin="groupes"] .gs-avatar .no-picture-icon-container {
  width: 60px !important;
  height: 60px !important;
  border-radius: 25% !important;
  border: 3px solid var(--qz-surface) !important;
  box-shadow: var(--qz-shadow-sm);
}
/* Même fond plat et même encre calculée que dans la grille. */
[data-qz-skin="groupes"] .gs-avatar .user-letter-avatar {
  background: var(--group-accent, var(--qz-accent)) !important;
  color: var(--group-ink, #FFFFFF) !important;
}
[data-qz-skin="groupes"] .gs-avatar .no-picture-icon-container {
  background: var(--qz-accent-soft) !important;
}
[data-qz-skin="groupes"] .gs-body { padding: 8px 14px 14px; }
[data-qz-skin="groupes"] .gs-title {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--qz-text);
}
[data-qz-skin="groupes"] .gs-sub {
  margin: 3px 0 0;
  font-size: .78rem;
  color: var(--qz-muted);
}
[data-qz-skin="groupes"] .gs-people {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
}
[data-qz-skin="groupes"] .gs-faces { display: inline-flex; align-items: center; }
[data-qz-skin="groupes"] .gs-faces .face__a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: -9px;
  border: 2px solid var(--qz-surface);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 600;
  flex: 0 0 auto;
}
[data-qz-skin="groupes"] .gs-faces .face__a::before { content: attr(data-initial); }
[data-qz-skin="groupes"] .gs-online {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--qz-success-ink);
}
[data-qz-skin="groupes"] .gs-online__dot {
  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);
  flex: 0 0 auto;
}

/* Histogramme 7 jours — messages du groupe par jour. */
[data-qz-skin="groupes"] .gs-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 38px;
  margin-top: 14px;
}
[data-qz-skin="groupes"] .gs-spark__b {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--group-accent, var(--qz-accent)) 30%, var(--qz-surface));
  transform-origin: bottom;
  animation: qzGroupsGrow .7s var(--qz-ease-pop) both;
}
[data-qz-skin="groupes"] .gs-spark__b.is-today { background: var(--group-accent, var(--qz-accent)); }
@keyframes qzGroupsGrow { from { transform: scaleY(0); } }
[data-qz-skin="groupes"] .gs-spark__lab {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--qz-muted);
}
[data-qz-skin="groupes"] .gs-spark__lab span { flex: 1; text-align: center; }
/* Défi de la semaine — XP d'équipe réel contre l'objectif du niveau. */
[data-qz-skin="groupes"] .gs-chal {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--qz-line);
}
[data-qz-skin="groupes"] .gs-chal__hd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .78rem;
  color: var(--qz-muted);
}
[data-qz-skin="groupes"] .gs-chal__hd b {
  font-weight: 600;
  font-size: .82rem;
  color: var(--qz-text);
}
[data-qz-skin="groupes"] .gs-chal__v {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--qz-accent-ink);
  font-weight: 600;
}
[data-qz-skin="groupes"] .gs-chal__track {
  height: 9px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  overflow: hidden;
  margin-top: 8px;
}
/* L'or n'apparaît qu'ici et sur la pastille du défi : c'est du XP, donc le seul
   emploi de --qz-energy autorisé par la charte. */
[data-qz-skin="groupes"] .gs-chal__fill {
  display: block;
  height: 100%;
  border-radius: var(--qz-r-pill);
  background: linear-gradient(90deg, var(--qz-accent), var(--qz-energy));
  animation: qzGroupsFill var(--qz-dur-bar, 1100ms) var(--qz-ease) both;
}
@keyframes qzGroupsFill { from { width: 0 !important; } }
[data-qz-skin="groupes"] .gs-sub sup { font-size: .68em; }

/* ── Bas de la vue Mes groupes : invitations + création ────────────────────
   Posés APRÈS le panneau de liste, hors de `.list` (List.js pagine ses
   enfants). */
[data-qz-skin="groupes"] [data-groups-mine-footer] { display: block; }
[data-qz-skin="groupes"] .groups-invit { margin-top: 22px; }
[data-qz-skin="groupes"] .groups-invit__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 10px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--qz-text);
}
[data-qz-skin="groupes"] .groups-invit__n-badge {
  font-size: .72rem;
  font-weight: 600;
  color: var(--qz-accent-ink);
  background: var(--qz-accent-soft);
  border-radius: var(--qz-r-pill);
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="groupes"] .groups-invit__empty {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 14px;
  background: var(--qz-surface);
  border: 1px dashed var(--qz-line-strong, var(--qz-line));
  border-radius: var(--qz-r-card);
}
[data-qz-skin="groupes"] .groups-invit__bot { width: 54px; flex: 0 0 auto; }
[data-qz-skin="groupes"] .groups-invit__bot .qzr-mascot-svg,
[data-qz-skin="groupes"] .groups-invit__bot svg { width: 100%; height: auto; display: block; }
[data-qz-skin="groupes"] .groups-invit__t {
  margin: 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--qz-text);
}
[data-qz-skin="groupes"] .groups-invit__p {
  margin: 2px 0 0;
  font-size: .78rem;
  color: var(--qz-muted);
}
[data-qz-skin="groupes"] .groups-invit__list { display: grid; gap: 8px; }
[data-qz-skin="groupes"] .groups-invit__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-field);
}
[data-qz-skin="groupes"] .groups-invit__ava {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-weight: 600;
}
[data-qz-skin="groupes"] .groups-invit__b { flex: 1; min-width: 0; }
[data-qz-skin="groupes"] .groups-invit__n {
  margin: 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--qz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-qz-skin="groupes"] .groups-invit__m {
  margin: 2px 0 0;
  font-size: .72rem;
  color: var(--qz-muted);
}
[data-qz-skin="groupes"] .groups-invit__go {
  flex: 0 0 auto;
  border: 1px solid var(--qz-line-strong, var(--qz-line));
  background: var(--qz-surface);
  color: var(--qz-accent-ink);
  border-radius: var(--qz-r-control);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
}
[data-qz-skin="groupes"] .groups-invit__go:hover {
  background: var(--qz-accent-soft);
  border-color: var(--qz-accent-mid);
}

[data-qz-skin="groupes"] .groups-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 22px;
  padding: 15px;
  border: none;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--qz-400), var(--qz-600));
  color: var(--qz-on-accent);
  border-bottom: 4px solid var(--qz-accent-deep);
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: var(--qz-shadow-sm);
  transition: transform var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="groupes"] .groups-cta:active { transform: scale(var(--qz-press-scale)); border-bottom-width: 2px; }
[data-qz-skin="groupes"] .groups-cta__sp { color: var(--qz-energy); }

/* ── « Populaires cette semaine » en étagère classée (vue Découvrir) ───────
   La section est rendue par le serveur (getPublicGroupsHtml) : on la repeint
   en scroll horizontal à aimant et le rang vient d'un compteur CSS. Le numéro
   est donc un pseudo-élément — jamais du texte — pour la même raison que les
   initiales : la recherche indexe $item.text() sur la cellule. */
[data-qz-skin="groupes"] .groups-section[data-groups-section="popular"] .list {
  display: flex;
  grid-template-columns: none;
  counter-reset: qzGroupsPop;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 12px;
  padding-bottom: 6px;
}
[data-qz-skin="groupes"] .groups-section[data-groups-section="popular"] .list::-webkit-scrollbar { display: none; }
[data-qz-skin="groupes"] .groups-section[data-groups-section="popular"] .group-card-cell {
  flex: 0 0 62%;
  max-width: 62% !important;
  scroll-snap-align: start;
  counter-increment: qzGroupsPop;
  position: relative;
}
@media (min-width: 540px) {
  [data-qz-skin="groupes"] .groups-section[data-groups-section="popular"] .group-card-cell {
    flex: 0 0 40%;
    max-width: 40% !important;
  }
}
[data-qz-skin="groupes"] .groups-section[data-groups-section="popular"] .group-card-cell::before {
  content: counter(qzGroupsPop);
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 3;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--qz-r-pill);
  background: rgba(0, 0, 0, .34);
  color: #FFFFFF;
  font-size: .72rem;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* Une cellule masquée par la recherche ou un filtre ne doit pas laisser un
   trou dans l'étagère. */
[data-qz-skin="groupes"] .groups-section[data-groups-section="popular"] .group-card-cell.is-search-hidden,
[data-qz-skin="groupes"] .groups-section[data-groups-section="popular"] .group-card-cell.is-filter-hidden {
  display: none !important;
}


/* The card footer (.group-card__footer / __action / __status-note) is gone with
   the CTA it existed for — groupTemplate.php emits none of those three now.
   Joining lives on the group's own page. */

/* Mockup has no visible "Rechercher" label above the search — keep it for a11y only. */
[data-qz-skin="groupes"] .groups-mobile-search__label {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Filterbar = search + « Filtres » trigger, chips in a bottom sheet
   (trigger + count-badge pattern from stats-v2-filters-trigger)
   ========================================================================== */
[data-qz-skin="groupes"] .groups-filterbar {
  grid-template-columns: 1fr auto;
  align-items: center;
}
[data-qz-skin="groupes"] .groups-filters-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 14px;
  border-radius: var(--qz-r-pill);
  border: 1.5px solid var(--qz-line-strong, var(--qz-line));
  background: var(--qz-surface);
  color: var(--qz-text);
  font-size: .86rem;
  font-weight: var(--qz-fw-strong, 700);
  cursor: pointer;
  white-space: nowrap;
}
[data-qz-skin="groupes"] .groups-filters-trigger:hover {
  border-color: var(--qz-accent);
  color: var(--qz-accent-ink, var(--qz-accent));
}
[data-qz-skin="groupes"] .groups-filters-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-size: .7rem;
  font-weight: var(--qz-fw-strong, 700);
  line-height: 1;
}

/* The sheet reuses the .mp-modal chrome (vnext-groupes-detail.css). It sits
   INSIDE .friends-main-container so the delegated chip handlers keep firing —
   it does NOT carry data-qz-skin itself, so the 560px page-column rule cannot
   crop it. Class-triggered slide-up, same rationale as .gd-members-sheet: the
   shared mpSheetUp keyframe freezes at its start frame on re-show. */
.groups-filter-sheet .mp-modal__panel {
  animation: none !important;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.groups-filter-sheet.is-open .mp-modal__panel { transform: translateY(0); }
.groups-filter-sheet__body { display: grid; gap: 14px; }
.groups-filter-sheet__section { display: grid; gap: 8px; }
.groups-filter-sheet__label {
  margin: 0;
  font-size: .78rem;
  font-weight: var(--qz-fw-strong, 700);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--qz-muted);
}
/* Chips wrap inside the sheet instead of scrolling horizontally. */
.groups-filter-sheet .groups-filter-row.ux-mobile-chip-row {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* ===========================================================================
   PAGINATION SERVEUR
   ---------------------------------------------------------------------------
   Le hub chargeait TOUS les groupes du joueur — jusqu'à 142 requêtes pour un
   compte à 66 groupes. La liste est désormais paginée côté serveur, et cette
   barre n'apparaît qu'à partir de deux pages. Posée hors de `.list`, comme la
   carte vedette, pour ne pas redevenir un faux item paginable.
   =========================================================================== */
[data-qz-skin="groupes"] .groups-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 6px;
}
[data-qz-skin="groupes"] .groups-page {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--qz-line-strong, var(--qz-200));
    border-radius: 10px;
    background: var(--qz-surface, #fff);
    /* --qz-text (adaptatif), PAS --qz-ink : --qz-ink est l'encre CONSTANTE de la
       mascotte (#15233B) qui ne bascule pas en mode sombre → texte foncé sur
       surface foncée = invisible. Même piège que la feuille membres. */
    color: var(--qz-text, #1c1a17);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--qz-dur-ui) ease, border-color var(--qz-dur-ui) ease;
}
[data-qz-skin="groupes"] .groups-page:hover:not(.is-disabled) {
    border-color: var(--qz-accent, #16A87A);
}
[data-qz-skin="groupes"] .groups-page.is-active {
    background: var(--qz-accent, #16A87A);
    border-color: var(--qz-accent, #16A87A);
    color: #fff;
    font-weight: 600;
}
[data-qz-skin="groupes"] .groups-page.is-disabled {
    opacity: .4;
    cursor: default;
}
[data-qz-skin="groupes"] .groups-pagination__count {
    margin-left: 10px;
    /* --qz-muted (adaptatif) ; --qz-ink-soft n'existe pas → retombait sur un gris
       #6b6459 en dur, illisible en sombre. */
    color: var(--qz-muted, #6b6459);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}