/* ============================================================================
   QZR vNext — Compétitions : reskin de la vue DÉTAIL (ouvrir une compétition).
   Couvre les onglets Résumé / Rooms / Participants / Pilotage (organisateur,
   automation, lifecycle, leaderboard, progression, panneau joueur).
   Scopé au shell détail : [data-qz-skin="competitions"].competition-shell--view-detail
   (buildShell ajoute .competition-shell--view-<view> sur la racine skinnée).
   Surcharge les règles mono-classe orange/crème de competitions(.pro).css.
   Chargé APRÈS vnext-competitions.css.
   ============================================================================ */

/* ── Barre d'onglets (résumé / rooms / participants / pilotage) ────────────── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-detail-anchor {
  border: 1px solid var(--qz-line, #DCEFE8); background: var(--qz-surface, #fff); color: var(--qz-muted, #5E8A7C);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-detail-anchor:hover {
  border-color: var(--qz-accent-mid, #5DCAA5); box-shadow: none; color: var(--qz-accent-ink, #0F6E56);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-detail-anchor.is-active {
  border-color: transparent; background: var(--qz-accent, #16A87A); color: #fff;
  box-shadow: 0 6px 16px rgba(15, 110, 86, .22);
}

/* ── Cartes : neutraliser les dégradés crème/bleu ──────────────────────────── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-card,
[data-qz-skin="competitions"].competition-shell--view-detail .competition-card--accent,
[data-qz-skin="competitions"].competition-shell--view-detail .competition-card--automation,
[data-qz-skin="competitions"].competition-shell--view-detail .competition-card--lifecycle,
[data-qz-skin="competitions"].competition-shell--view-detail .competition-stats-card,
[data-qz-skin="competitions"].competition-shell--view-detail .competition-stats-card--personal,
[data-qz-skin="competitions"].competition-shell--view-detail .competition-stats-card--overview {
  background: var(--qz-surface, #fff);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-card, 16px);
  box-shadow: none;
}

/* Eyebrow + titres */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-eyebrow {
  color: var(--qz-muted, #5E8A7C); font-weight: var(--qz-fw-strong, 500);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-card-head h2,
[data-qz-skin="competitions"].competition-shell--view-detail .competition-detail-section-head h2 {
  color: var(--qz-text, #06342A); font-weight: var(--qz-fw-strong, 500);
}

/* ── Boutons : primaire orange→teal (liseré-bas), secondaire bleu→teal doux ── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-btn--primary {
  background: var(--qz-accent, #16A87A); color: #fff;
  border: 0; border-bottom: 4px solid var(--qz-accent-deep, #0F6E56);
  border-radius: var(--qz-r-control, 12px); box-shadow: none; font-weight: var(--qz-fw-strong, 500);
  transition: filter var(--qz-dur-ui) ease, transform var(--qz-dur-press, 80ms) ease;
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-btn--primary:hover { background: var(--qz-accent, #16A87A); color: #fff; filter: brightness(.97); box-shadow: none; }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-btn--primary:active { transform: scale(var(--qz-press-scale)); border-bottom-width: 2px; }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-btn--secondary {
  background: var(--qz-accent-soft, #E1F5EE); color: var(--qz-accent-ink, #0F6E56);
  border: 1px solid var(--qz-line-strong, #CDE7DC); box-shadow: none;
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-btn--ghost {
  background: var(--qz-surface, #fff); color: var(--qz-accent-ink, #0F6E56);
  border: 1px solid var(--qz-line, #DCEFE8); box-shadow: none;
}

/* ── Panneau joueur (inscription / check-in) ───────────────────────────────── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-player-headline {
  background: var(--qz-accent-soft, #E1F5EE); border: 1px solid var(--qz-line-strong, #CDE7DC);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-player-code {
  background: var(--qz-accent, #16A87A); color: #fff;
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-player-box { background: var(--qz-screen, #F1FAF6); border: 1px solid var(--qz-line, #DCEFE8); }

/* ── Cartes room (pilotage bracket) ────────────────────────────────────────── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-room-card { background: var(--qz-surface, #fff); border: 1px solid var(--qz-line, #DCEFE8); border-radius: var(--qz-r-card, 16px); }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-room-index { color: var(--qz-accent-ink, #0F6E56); }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-room-field:focus,
[data-qz-skin="competitions"].competition-shell--view-detail .competition-room-quiz-search:focus {
  border-color: var(--qz-accent, #16A87A); box-shadow: var(--qz-focus-ring, 0 0 0 3px var(--qz-accent-soft, #E1F5EE)); outline: none;
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-room-quiz-picker--selected .competition-room-quiz-search { border-color: var(--qz-accent-mid, #5DCAA5); background: var(--qz-accent-soft, #E1F5EE); }

/* ── Leaderboard participants ──────────────────────────────────────────────── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-leaderboard-row.is-me,
[data-qz-skin="competitions"].competition-shell--view-detail .competition-progress-card.is-me {
  border-color: var(--qz-accent-mid, #5DCAA5);
  background: var(--qz-accent-soft, #E1F5EE);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-leaderboard-rank { background: var(--qz-accent-soft, #E1F5EE); color: var(--qz-accent-ink, #0F6E56); }

/* ── Progression : timeline bleue → teal ───────────────────────────────────── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-progress-dot {
  background: var(--qz-accent, #16A87A); border: 4px solid var(--qz-accent-soft, #E1F5EE);
  box-shadow: 0 0 0 4px rgba(22, 168, 122, .08);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-progress-step:not(:last-child)::after {
  background: linear-gradient(180deg, rgba(22, 168, 122, .28) 0%, rgba(205, 231, 220, .5) 100%);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-progress-rank { background: var(--qz-accent-soft, #E1F5EE); color: var(--qz-accent-ink, #0F6E56); }

/* ── Lifecycle track (étapes du cycle de vie) ──────────────────────────────── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-lifecycle-step.is-active .competition-lifecycle-dot {
  background: var(--qz-accent, #16A87A); box-shadow: 0 6px 16px rgba(15, 110, 86, .24);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-lifecycle-step.is-complete .competition-lifecycle-dot {
  background: var(--qz-accent-mid, #5DCAA5); color: #fff;
}

/* ── Metric cards (stats overview) : winner highlight orange → doré ────────── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-metric-card { background: var(--qz-screen, #F1FAF6); border: 1px solid var(--qz-line, #DCEFE8); border-radius: var(--qz-r-field, 13px); }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-metric-card--highlight {
  background: var(--qz-accent-soft, #E1F5EE); border-color: var(--qz-accent-mid, #5DCAA5);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-metric-card--highlight strong { color: var(--qz-accent-ink, #0F6E56); }

/* ── S1 « Champion » : capstone célébratoire (compétition terminée) ────────── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-card.qz-champ {
  text-align: center;
  background: linear-gradient(180deg, var(--qz-accent-soft, #E1F5EE) 0%, var(--qz-surface, #fff) 62%);
  border: 1px solid var(--qz-line-strong, #CDE7DC);
  border-top: 4px solid var(--qz-energy, #F5C542);
}
[data-qz-skin="competitions"] .qz-champ__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: var(--qz-fw-strong, 500); letter-spacing: .08em; text-transform: uppercase;
  color: var(--qz-alert, #BA7517);
}
[data-qz-skin="competitions"] .qz-champ__eyebrow .fa-trophy { color: var(--qz-energy, #F5C542); }
[data-qz-skin="competitions"] .qz-champ__title { font-size: 20px; font-weight: var(--qz-fw-strong, 500); color: var(--qz-text, #06342A); margin: 8px 0 0; text-wrap: balance; }
[data-qz-skin="competitions"] .qz-champ__podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin-top: 22px; }
[data-qz-skin="competitions"] .qz-champ__col { display: flex; flex-direction: column; align-items: center; width: 84px; }
[data-qz-skin="competitions"] .qz-champ__crown { color: var(--qz-energy, #F5C542); font-size: 20px; margin-bottom: 4px; line-height: 1; }
[data-qz-skin="competitions"] .qz-champ__ava {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: var(--qz-fw-strong, 500); color: #fff; background: var(--qz-accent, #16A87A); margin-bottom: 6px;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(6, 52, 42, .12);
}
[data-qz-skin="competitions"] .qz-champ__col--p1 .qz-champ__ava { background: var(--qz-energy, #F5C542); color: #6B4400; width: 54px; height: 54px; font-size: 18px; }
[data-qz-skin="competitions"] .qz-champ__pname {
  font-size: 12.5px; font-weight: var(--qz-fw-strong, 500); color: var(--qz-text, #06342A); margin-bottom: 6px;
  max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-qz-skin="competitions"] .qz-champ__bar {
  width: 100%; border-radius: 12px 12px 0 0; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8px; color: #fff; font-weight: var(--qz-fw-strong, 500); font-size: 15px; background: var(--qz-accent-mid, #5DCAA5);
}
[data-qz-skin="competitions"] .qz-champ__col--p1 .qz-champ__bar { height: 78px; background: var(--qz-energy, #F5C542); color: #6B4400; }
[data-qz-skin="competitions"] .qz-champ__col--p2 .qz-champ__bar { height: 56px; }
[data-qz-skin="competitions"] .qz-champ__col--p3 .qz-champ__bar { height: 40px; background: var(--qz-accent-soft, #E1F5EE); color: var(--qz-accent-ink, #0F6E56); }

/* ── S3b · Invitations (bannière invité + panneau organisateur) ────────────── */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--qz-accent-soft, #E1F5EE); border: 1px solid var(--qz-line-strong, #CDE7DC);
  border-radius: var(--qz-r-field, 13px); padding: 14px 16px; margin-bottom: 12px;
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-banner__copy { display: flex; flex-direction: column; gap: 2px; }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-banner__copy strong { color: var(--qz-accent-ink, #0F6E56); }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-banner__copy span { font-size: 13px; color: var(--qz-muted, #5E8A7C); }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-banner__actions { display: flex; gap: 8px; }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-org__form { display: flex; gap: 8px; margin-bottom: 12px; }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--qz-line, #DCEFE8); border-radius: var(--qz-r-field, 13px);
  padding: 10px 14px; font: inherit; font-size: 14px; color: var(--qz-text, #06342A); background: var(--qz-surface, #fff);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-input:focus { outline: none; border-color: var(--qz-accent, #16A87A); box-shadow: var(--qz-focus-ring, 0 0 0 3px var(--qz-accent-soft, #E1F5EE)); }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-list { display: grid; gap: 6px; }
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px;
  background: var(--qz-screen, #F1FAF6); border: 1px solid var(--qz-line, #DCEFE8); border-radius: var(--qz-r-field, 13px);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-invite-name { font-weight: var(--qz-fw-strong, 500); color: var(--qz-text, #06342A); }

/* ══ ÉCRAN FOCALISÉ (proposition C) ══════════════════════════════════════════
   L'écran de détail ne se replie pas : il se calcule (rôle × phase). La
   grammaire vient des écrans live — compte à rebours, fil d'événements, une
   action unique en gros — pas des tableaux de bord. « Tout voir » rend la vue
   exhaustive, inchangée : elle cesse d'être la porte d'entrée, elle ne
   disparaît pas.
   ========================================================================== */

.competition-focus {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 460px; margin: 0 auto; padding: 4px 0 12px;
}

/* ── Bandeau live ────────────────────────────────────────────────────────── */
.cf-live-top { text-align: center; padding: 6px 0 2px; }
.cf-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--qz-accent-ink, #0A4F40);
}
.cf-pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--qz-accent, #16A87A); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cf-pulse { animation: cfPulse 1.9s var(--qz-ease, cubic-bezier(.2,.7,.3,1)) infinite; }
}
@keyframes cfPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qz-accent, #16A87A) 55%, transparent); }
  55%      { box-shadow: 0 0 0 7px transparent; }
}
.cf-clock {
  font-family: 'Alfa Slab One', Georgia, serif; font-size: 40px; line-height: 1.05;
  color: var(--qz-text, #06342A); margin: 8px 0 2px; font-variant-numeric: tabular-nums;
}
.cf-clock--sm { font-size: 26px; }
.cf-sub { font-size: 13px; color: var(--qz-muted, #5E8A7C); margin: 0; }

/* ── Action unique ───────────────────────────────────────────────────────── */
.cf-cta {
  width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 14px;
  padding: 11px; border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-accent-deep, #0F6E56); color: #fff;
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, cubic-bezier(.2,.7,.3,1));
}
.cf-cta:active { transform: scale(var(--qz-press-scale, .97)); }
.cf-cta:focus-visible { outline: 3px solid var(--qz-200, #A9E6D0); outline-offset: 2px; }
.cf-cta--ghost {
  background: var(--qz-accent-soft, #E8F8F1); color: var(--qz-accent-ink, #0A4F40);
}

/* ── Carte d'appoint (format, qualifications) ────────────────────────────── */
.cf-card {
  background: var(--qz-surface, #fff); border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-card, 16px); padding: 13px;
}
.cf-label {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--qz-muted, #5E8A7C);
}
.cf-note { font-size: 12px; color: var(--qz-muted, #5E8A7C); margin: 5px 0 0; }

/* ── Fil d'événements ────────────────────────────────────────────────────── */
.cf-ticker {
  border-top: 1px solid var(--qz-line, #DCEFE8); margin-top: 4px; padding-top: 9px;
  display: flex; flex-direction: column; gap: 6px;
}
.cf-tick { display: flex; gap: 9px; align-items: baseline; font-size: 12.5px; }
.cf-tick__h {
  font-variant-numeric: tabular-nums; color: var(--qz-muted, #5E8A7C); font-weight: 700; flex: none;
}
.cf-tick__e { color: var(--qz-text, #06342A); min-width: 0; }
.cf-tick.is-now .cf-tick__e { font-weight: 800; }
.cf-tick.is-now .cf-tick__h { color: var(--qz-accent-ink, #0A4F40); }

/* ── Podium (compétition terminée) ───────────────────────────────────────── */
.cf-podium {
  display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 6px 0 2px;
}
.cf-pod { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cf-pod__who {
  font-size: 11.5px; font-weight: 700; color: var(--qz-text, #06342A);
  max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-pod__block {
  width: 56px; border-radius: 8px 8px 0 0; display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
}
.cf-pod--1 .cf-pod__block { height: 70px; background: var(--qz-energy, #F5C542); color: #4A3708; }
.cf-pod--2 .cf-pod__block { height: 52px; background: var(--qz-200, #A9E6D0); color: var(--qz-900, #06342A); }
.cf-pod--3 .cf-pod__block { height: 40px; background: var(--qz-100, #D6F3E6); color: var(--qz-800, #0A4F40); }

/* ── « Tout voir » / retour ──────────────────────────────────────────────── */
.cf-allsee {
  display: block; width: 100%; text-align: center; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--qz-muted, #5E8A7C);
  padding: 10px 0 2px; text-decoration: underline; text-underline-offset: 3px;
}
.cf-allsee:hover { color: var(--qz-accent-ink, #0A4F40); }
.cf-allsee:focus-visible {
  outline: 3px solid var(--qz-200, #A9E6D0); outline-offset: 2px; border-radius: 6px;
}

.cf-back {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  border: 1px solid var(--qz-line, #DCEFE8); background: var(--qz-surface, #fff);
  color: var(--qz-accent-ink, #0A4F40); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: var(--qz-r-pill, 999px);
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, cubic-bezier(.2,.7,.3,1));
}
.cf-back:active { transform: scale(var(--qz-press-scale, .97)); }
.cf-back:focus-visible { outline: 3px solid var(--qz-200, #A9E6D0); outline-offset: 2px; }

/* ══ TABLEAU DE BORD (proposition B) ═════════════════════════════════════════
   Ce que « Tout voir » ouvre depuis l'écran focalisé. Emprunte la grammaire de
   #performances et #plans : un anneau pour la position, une grille de quatre
   indicateurs, un sélecteur segmenté. Rien de neuf à apprendre.
   ========================================================================== */

.competition-dash { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto; }

/* ── En-tête : anneau + identité ─────────────────────────────────────────── */
.cdb-hero {
  display: flex; gap: 14px; align-items: center;
  background: var(--qz-surface, #fff); border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-card, 16px); padding: 14px;
}
.cdb-ring { position: relative; width: 92px; height: 92px; flex: none; }
.cdb-ring svg { transform: rotate(-90deg); }
/* Le padding tient le contenu a distance du trait : la corde utile retrecit
   vite en haut et en bas du disque, la seule largeur du cercle ne suffit pas. */
.cdb-ring__mid {
  position: absolute; inset: 0; padding: 0 15px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1.05;
}
.cdb-ring__mid b { font-family: 'Alfa Slab One', Georgia, serif; font-size: 16px; color: var(--qz-text, #06342A); }
.cdb-ring__mid span { font-size: 11px; font-weight: 800; color: var(--qz-muted, #5E8A7C); font-variant-numeric: tabular-nums; }
/* Barre de fraction : « 12e / 24 » se lit sans le mot « sur ». */
.cdb-ring__rule {
  display: block; width: 20px; height: 2px; border-radius: 2px; margin: 3px 0 2px;
  background: var(--qz-line-strong, #BEDFD3);
}
.cdb-hero__who { min-width: 0; }
.cdb-hero__who h2 { margin: 0 0 2px; font-size: 16px; color: var(--qz-text, #06342A); }
.cdb-hero__who p { margin: 0; font-size: 12.5px; color: var(--qz-muted, #5E8A7C); }
.cdb-chip {
  display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 800; padding: 2px 9px;
  border-radius: var(--qz-r-pill, 999px); background: var(--qz-accent-soft, #E8F8F1); color: var(--qz-accent-ink, #0A4F40);
}

/* ── Quatre indicateurs ──────────────────────────────────────────────────── */
.cdb-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cdb-kpi {
  background: var(--qz-surface, #fff); border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-card, 16px); padding: 11px 12px; min-width: 0;
}
.cdb-kpi b {
  display: block; font-family: 'Alfa Slab One', Georgia, serif; font-size: 19px; line-height: 1.15;
  color: var(--qz-text, #06342A); font-variant-numeric: tabular-nums;
}
.cdb-kpi span {
  display: block; font-size: 11.5px; color: var(--qz-muted, #5E8A7C); margin-top: 1px;
  overflow-wrap: anywhere; hyphens: auto;
}
.cdb-kpi__bar { display: block; height: 4px; margin-top: 8px; border-radius: 99px; background: var(--qz-accent-soft, #E8F8F1); overflow: hidden; }
.cdb-kpi__bar i { display: block; height: 100%; border-radius: 99px; background: var(--qz-accent, #16A87A); }

/* ── Sélecteur segmenté ──────────────────────────────────────────────────
   Réutilise .competition-detail-anchor pour hériter de l'écouteur délégué :
   il faut donc battre les règles d'onglet déjà scopées au shell détail. */
[data-qz-skin="competitions"].competition-shell--view-detail .cdb-seg {
  display: flex; gap: 3px; background: var(--qz-accent-soft, #E8F8F1);
  border-radius: var(--qz-r-pill, 999px); padding: 3px;
}
[data-qz-skin="competitions"].competition-shell--view-detail .cdb-seg .cdb-seg__b {
  flex: 1 1 0; min-width: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; padding: 8px 4px;
  border-radius: var(--qz-r-pill, 999px); color: var(--qz-accent-ink, #0A4F40);
  transition: background var(--qz-dur-ui, 150ms) var(--qz-ease, cubic-bezier(.2,.7,.3,1));
}
[data-qz-skin="competitions"].competition-shell--view-detail .cdb-seg .cdb-seg__b[aria-selected="true"] {
  background: var(--qz-accent-deep, #0F6E56); color: #fff;
  box-shadow: 0 1px 4px rgba(6, 52, 42, .18);
}
.cdb-panel { display: flex; flex-direction: column; gap: 10px; }

/* ── Rooms : rangées compactes ───────────────────────────────────────────── */
.cdb-rooms { display: flex; flex-direction: column; gap: 6px; }
.cdb-room {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  background: var(--qz-surface, #fff); border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-control, 12px);
}
.cdb-room__code { font-weight: 800; font-size: 13px; color: var(--qz-text, #06342A); }
.cdb-room__st { font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: var(--qz-r-pill, 999px); }
.cdb-room__st--done { background: var(--qz-accent-soft, #E8F8F1); color: var(--qz-accent-ink, #0A4F40); }
.cdb-room__st--live { background: var(--qz-energy, #F5C542); color: #4A3708; }
.cdb-room__st--wait { background: var(--qz-screen, #F1FAF6); color: var(--qz-muted, #5E8A7C); border: 1px solid var(--qz-line-strong, #BEDFD3); }
.cdb-room__n { margin-left: auto; font-size: 12px; color: var(--qz-muted, #5E8A7C); }
.cdb-room__eye {
  border: 0; background: var(--qz-accent-soft, #E8F8F1); color: var(--qz-accent-ink, #0A4F40);
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer; flex: none;
}

/* ── Classement : podium puis liste révélée par tranches ─────────────────── */
.cdb-lbwrap {
  background: var(--qz-surface, #fff); border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-card, 16px); padding: 13px;
}
.cdb-lbwrap .cf-podium { margin-bottom: 6px; }
.cdb-lb { display: flex; flex-direction: column; }
.cdb-lb__row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--qz-line, #DCEFE8); font-size: 13px; }
.cdb-lb__row:last-child { border-bottom: 0; }
.cdb-lb__row.is-hidden { display: none; }
.cdb-lb__r { width: 30px; flex: none; font-weight: 800; color: var(--qz-muted, #5E8A7C); font-variant-numeric: tabular-nums; }
.cdb-lb__n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--qz-text, #06342A); }
.cdb-lb__p { flex: none; font-weight: 800; color: var(--qz-text, #06342A); font-variant-numeric: tabular-nums; }
.cdb-lb__p.is-first { color: var(--qz-warning-ink, #9A6113); }
.cdb-lb__row.is-me { background: var(--qz-accent-soft, #E8F8F1); border-radius: 10px; padding-left: 8px; padding-right: 8px; border-bottom-color: transparent; }
.cdb-lb__row.is-me .cdb-lb__n, .cdb-lb__row.is-me .cdb-lb__r { color: var(--qz-accent-ink, #0A4F40); font-weight: 800; }
.cdb-lb__gap { display: flex; align-items: center; gap: 8px; padding: 7px 2px; font-size: 11.5px; color: var(--qz-muted, #5E8A7C); }
.cdb-lb__gap::before, .cdb-lb__gap::after { content: ""; flex: 1 1 auto; border-top: 1px dashed var(--qz-line-strong, #BEDFD3); }
.cdb-lb__done { text-align: center; font-size: 12px; color: var(--qz-muted, #5E8A7C); margin: 9px 0 0; }

.cdb-more {
  display: block; width: 100%; margin-top: 9px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800;
  padding: 9px; border-radius: var(--qz-r-pill, 999px);
  border: 1px solid var(--qz-line, #DCEFE8); background: var(--qz-surface, #fff); color: var(--qz-accent-ink, #0A4F40);
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, cubic-bezier(.2,.7,.3,1)), border-color var(--qz-dur-ui, 150ms) var(--qz-ease, cubic-bezier(.2,.7,.3,1));
}
.cdb-more:hover { border-color: var(--qz-accent, #16A87A); }
.cdb-more:active { transform: scale(var(--qz-press-scale, .97)); }
.cdb-more:focus-visible { outline: 3px solid var(--qz-200, #A9E6D0); outline-offset: 2px; }
.cdb-more--all { border: 0; background: transparent; color: var(--qz-muted, #5E8A7C); font-weight: 700; margin-top: 3px; text-decoration: underline; text-underline-offset: 3px; }

/* ── Feuille « Gérer la compétition » ────────────────────────────────────── */
.cdb-sheet-host { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.cdb-scrim {
  position: absolute; inset: 0; border: 0; padding: 0; background: rgba(6, 52, 42, .48);
  opacity: 0; pointer-events: none; transition: opacity var(--qz-dur-ui, 150ms) var(--qz-ease, cubic-bezier(.2,.7,.3,1));
}
.cdb-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto;
  background: var(--qz-surface, #fff); border-top: 1px solid var(--qz-line, #DCEFE8);
  border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(6, 52, 42, .22);
  padding: 8px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(101%); transition: transform 280ms var(--qz-ease, cubic-bezier(.2,.7,.3,1));
}
.cdb-sheet-host.is-open { pointer-events: auto; }
.cdb-sheet-host.is-open .cdb-scrim { opacity: 1; pointer-events: auto; }
.cdb-sheet-host.is-open .cdb-sheet { transform: none; }
.cdb-grab { width: 38px; height: 4px; border-radius: 99px; background: var(--qz-line-strong, #BEDFD3); margin: 4px auto 10px; }
.cdb-sheet__head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.cdb-sheet__head h3 { margin: 0; flex: 1 1 auto; font-size: 16px; color: var(--qz-text, #06342A); }
.cdb-x { border: 0; background: var(--qz-accent-soft, #E8F8F1); color: var(--qz-accent-ink, #0A4F40); width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 16px; font-weight: 800; }
.cdb-x:focus-visible { outline: 3px solid var(--qz-200, #A9E6D0); outline-offset: 2px; }

.cdb-track { display: flex; align-items: flex-start; margin: 0 0 11px; padding: 0; list-style: none; }
.cdb-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.cdb-step__dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; background: var(--qz-screen, #F1FAF6);
  color: var(--qz-muted, #5E8A7C); border: 1px solid var(--qz-line-strong, #BEDFD3);
}
.cdb-step.is-done .cdb-step__dot { background: var(--qz-accent, #16A87A); color: #fff; border-color: transparent; }
.cdb-step.is-now .cdb-step__dot { background: var(--qz-energy, #F5C542); color: #4A3708; border-color: transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--qz-energy, #F5C542) 30%, transparent); }
.cdb-step__cap { font-size: 9.5px; font-weight: 700; color: var(--qz-muted, #5E8A7C); }
.cdb-step.is-now .cdb-step__cap { color: var(--qz-text, #06342A); }
.cdb-step__sep { flex: 1 1 auto; height: 1px; margin: 11px 3px 0; background: var(--qz-line-strong, #BEDFD3); }

.cdb-next {
  background: linear-gradient(135deg, color-mix(in srgb, var(--qz-accent, #16A87A) 14%, var(--qz-surface, #fff)), var(--qz-surface, #fff) 68%);
  border: 1px solid color-mix(in srgb, var(--qz-accent, #16A87A) 30%, var(--qz-line, #DCEFE8));
  border-radius: var(--qz-r-card, 16px); padding: 12px;
}
.cdb-next .cf-label { color: var(--qz-accent-ink, #0A4F40); }
.cdb-next p { margin: 5px 0 10px; font-size: 12.5px; color: var(--qz-muted, #5E8A7C); }

.cdb-sec { margin-top: 12px; }
.cdb-sec > .cf-label { display: block; margin-bottom: 6px; }

.cdb-disc { border: 1px solid var(--qz-line, #DCEFE8); border-radius: var(--qz-r-control, 12px); overflow: hidden; }
.cdb-disc > summary {
  padding: 11px 12px; background: var(--qz-screen, #F1FAF6); cursor: pointer;
  /* Un pli est un CONTROLE : --qz-muted sur --qz-screen mesure 4,29 en
     clair, sous le seuil. --qz-accent-ink bascule avec le mode. */
  font-size: 12.5px; font-weight: 800; color: var(--qz-accent-ink, #0A4F40); list-style: none;
}
.cdb-disc > summary::-webkit-details-marker { display: none; }
.cdb-disc > summary::after { content: "\203A"; float: right; transition: transform var(--qz-dur-ui, 150ms) var(--qz-ease, cubic-bezier(.2,.7,.3,1)); }
.cdb-disc[open] > summary::after { transform: rotate(90deg); }
.cdb-disc > summary:focus-visible { outline: 3px solid var(--qz-200, #A9E6D0); outline-offset: -3px; }
.cdb-disc__body { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; }
.cdb-mini {
  border: 1px solid var(--qz-line-strong, #BEDFD3); background: var(--qz-surface, #fff); color: var(--qz-text, #06342A);
  font: inherit; font-size: 12px; font-weight: 700; padding: 8px 13px; border-radius: var(--qz-r-pill, 999px); cursor: pointer;
}
.cdb-mini:hover { border-color: var(--qz-accent, #16A87A); }
.cdb-mini:focus-visible { outline: 3px solid var(--qz-200, #A9E6D0); outline-offset: 2px; }
.cdb-danger { width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--qz-line-strong, #BEDFD3); }
/* Jetons d'erreur du systeme : --qz-error-ink est calibre a 4,68 sur
   --qz-error-bg et bascule avec le mode sombre. */
.cdb-mini--danger {
  border-color: color-mix(in srgb, var(--qz-error, #E24B4A) 38%, var(--qz-line, #DCEFE8));
  background: var(--qz-error-bg, #FCEFEF);
  color: var(--qz-error-ink, #D22322);
}

@media (min-width: 640px) {
  .cdb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cdb-sheet { left: 50%; right: auto; width: min(560px, 100%); transform: translate(-50%, 101%); }
  .cdb-sheet-host.is-open .cdb-sheet { transform: translate(-50%, 0); }
}

/* ══ AUDIT DE RENDU — corrections constatées sur la vraie page ═══════════════
   Le banc de rendu n'avait pas d'ancêtre applicatif : il ne pouvait pas voir
   que `<body class="text-center">` centre TOUT ce que ces écrans dessinent.
   Mesuré : dans le classement, les noms démarraient à 152 px dans une boîte
   qui commence à 86 — l'œil zigzague au lieu de descendre une colonne.

   Aucune de ces règles ne « corrige » le body : elles déclarent l'alignement
   que chaque composant exige, ce que le CSS d'origine avait omis de faire.
   ========================================================================== */

.competition-dash { text-align: left; }
.cdb-hero__who,
.cdb-kpi,
.cdb-room,
.cdb-lb__n,
.cdb-sheet,
.cf-card { text-align: left; }

/* Ce qui doit rester centré l'affirme, plutôt que d'en hériter par hasard. */
.cf-live-top,
.cdb-ring__mid,
.cf-pod__who,
.cf-pod__block,
.cdb-step__cap,
.cdb-lb__done,
.cf-cta,
.cf-back,
.cf-allsee,
.cdb-more,
.cdb-mini,
.cdb-seg__b,
.cdb-x,
.cdb-room__eye { text-align: center; }

/* Le rang et le score sont des colonnes de chiffres : chacun s'aligne sur son
   bord, sinon la comparaison verticale ne se fait plus. */
.cdb-lb__r { text-align: left; }
.cdb-lb__p { text-align: right; }

/* ── Fil d'événements (onglet Suivi) ─────────────────────────────────────
   Remplace en tête de facette la chronologie par joueur, mesurée à 8 104 px
   pour 15 participants. Celle-ci reste accessible sous un pli. */
.cdb-feed { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cdb-feed__l {
  display: flex; align-items: baseline; gap: 9px; font-size: 12.5px;
  padding-bottom: 6px; border-bottom: 1px solid var(--qz-line, #DCEFE8);
}
.cdb-feed__l:last-child { border-bottom: 0; padding-bottom: 0; }
.cdb-feed__q { flex: 1 1 auto; min-width: 0; color: var(--qz-text, #06342A); font-weight: 700; }
.cdb-feed__n { flex: none; color: var(--qz-muted, #5E8A7C); }
.cdb-feed__l.is-now .cdb-feed__n { color: var(--qz-accent-ink, #0A4F40); font-weight: 800; }

/* ── Plis pleine largeur (détail par room, chronologie par joueur) ───────── */
.cdb-disc--wide { width: 100%; margin-top: 10px; }
.cdb-disc__panel { padding: 10px 0 2px; }
.cdb-disc__panel > .competition-card { margin-bottom: 8px; }

/* ── Le code de la compétition, mis en évidence ────────────────────────────
   Il partageait sa rangée avec deux statuts désormais affichés ailleurs (le
   bandeau porte celui de la compétition, la pastille du héros celui du
   joueur). Restée seule, l'information qui n'existe nulle part ailleurs
   prend toute la place : c'est elle qu'on lit à voix haute pour faire
   rejoindre quelqu'un. */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-player-headline {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 16px; text-align: center;
  background: var(--qz-accent-soft, #E1F5EE); border: 1px solid var(--qz-line-strong, #CDE7DC);
  border-radius: var(--qz-r-card, 16px);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-player-code-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--qz-accent-ink, #0A4F40);
}
[data-qz-skin="competitions"].competition-shell--view-detail .competition-player-code {
  display: block; padding: 0; background: none; border: 0;
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: clamp(24px, 8vw, 34px); line-height: 1.05;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: var(--qz-accent-ink, #0A4F40);
  overflow-wrap: anywhere;
}

/* ══ Identité de la compétition ════════════════════════════════════════════
   Le bandeau de détail portait le nom, le statut et l'heure de départ dans un
   bloc séparé, masqué sur mobile — donc deux traitements pour une même
   information. L'identité vit désormais DANS l'écran, à l'identique sur les
   deux tailles : le nom en titre, puis « statut · date ».

   Le bandeau de détail disparaît des deux côtés. À noter : competitions-pro.css
   le masquait DÉJÀ en vue détail (en !important) ; c'est le skin vNext qui
   l'avait ressuscité. On revient donc à l'intention d'origine — et un
   !important ne se bat qu'avec un !important. */
[data-qz-skin="competitions"].competition-shell--view-detail .competition-banner--detail {
  display: none !important;
}

.cf-ident { margin: 0 0 10px; text-align: center; }
.cf-ident__name {
  margin: 0; font-size: clamp(20px, 5.2vw, 26px); line-height: 1.2; font-weight: 700;
  color: var(--qz-text, #06342A); text-wrap: balance; overflow-wrap: anywhere;
}
.cf-ident__meta {
  margin: 4px 0 0; font-size: 13px; font-weight: 600;
  color: var(--qz-muted, #5E8A7C);
}

/* Le héros du tableau de bord porte la même information, mais rangée :
   « statut · date » d'abord, l'avancement des rooms en dessous. */
.cdb-hero__who h2 { font-size: clamp(17px, 4.4vw, 21px); line-height: 1.2; text-wrap: balance; }
.cdb-hero__pace { margin: 1px 0 0; font-size: 12.5px; color: var(--qz-muted, #5E8A7C); }

/* ══ Alertes : une modale vNext ════════════════════════════════════════════
   Elles passaient par dialog2_ (l'ancien système de dialogue) avec un repli
   en bandeau : deux rendus à tenir pour un même message, aucun des deux en
   langage vNext. */
.competition-flash--visible { position: static; }
.cfx-scrim {
  position: fixed; inset: 0; z-index: 1400;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(6, 52, 42, .48);
  animation: cfxFondu var(--qz-dur-ui, 150ms) var(--qz-ease, cubic-bezier(.2,.7,.3,1)) both;
}
.cfx-modal {
  position: fixed; z-index: 1401;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  background: var(--qz-surface, #fff);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-card, 16px);
  box-shadow: 0 18px 44px rgba(6, 52, 42, .26);
  padding: 16px 18px 14px;
  text-align: left;
  animation: cfxEntree var(--qz-dur-pop, 350ms) var(--qz-ease, cubic-bezier(.2,.7,.3,1)) both;
}
@keyframes cfxFondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes cfxEntree {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cfx-scrim, .cfx-modal { animation: none; }
}

.cfx-modal__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cfx-tone {
  flex: 1 1 auto;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--qz-accent-ink, #0A4F40);
}
.cfx-close {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--qz-accent-soft, #E8F8F1); color: var(--qz-accent-ink, #0A4F40);
  font: inherit; font-size: 16px; font-weight: 800; line-height: 1; text-align: center;
}
.cfx-close:focus-visible { outline: 3px solid var(--qz-200, #A9E6D0); outline-offset: 2px; }
.cfx-msg {
  margin: 0; font-size: 14px; line-height: 1.45;
  color: var(--qz-text, #06342A); overflow-wrap: anywhere;
}

/* Le liseré de gauche porte le ton : une couleur pleine sur toute la carte
   rendrait le texte moins lisible qu'un fond neutre. */
.cfx-modal { border-left: 4px solid var(--qz-accent, #16A87A); }
.cfx-modal--success { border-left-color: var(--qz-accent, #16A87A); }
.cfx-modal--success .cfx-tone { color: var(--qz-accent-ink, #0A4F40); }
.cfx-modal--error { border-left-color: var(--qz-error, #E24B4A); }
.cfx-modal--error .cfx-tone { color: var(--qz-error-ink, #D22322); }
.cfx-modal--error .cfx-close { background: var(--qz-error-bg, #FCEFEF); color: var(--qz-error-ink, #D22322); }
.cfx-modal--info { border-left-color: var(--qz-accent-mid, #5DCAA5); }

.cfx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.cfx-ok,
.cfx-actions .competition-flash-action {
  border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800;
  padding: 9px 18px; border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-accent-deep, #0F6E56); color: #fff; text-align: center;
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, cubic-bezier(.2,.7,.3,1));
}
.cfx-ok:active,
.cfx-actions .competition-flash-action:active { transform: scale(var(--qz-press-scale, .97)); }
.cfx-ok:focus-visible,
.cfx-actions .competition-flash-action:focus-visible { outline: 3px solid var(--qz-200, #A9E6D0); outline-offset: 2px; }
/* Quand une action métier est proposée, elle prime : la fermeture s'efface. */
.cfx-actions .competition-flash-action ~ .cfx-ok {
  background: var(--qz-accent-soft, #E8F8F1); color: var(--qz-accent-ink, #0A4F40);
}