/* ════════════════════════════════════════════════════════════════════
   flechettes.kdsoft.fr — main.css
   Tokens design copiés depuis design_handoff_flechettes_tournois
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --bg-base:        #050505;
  --bg-phone:       #0a0a0a;
  --surface:        #111110;
  --surface-2:      #0d0d0c;
  --surface-3:      #15150f;
  --surface-warm:   #1a1a14;
  --border:         #1f1f1a;
  --border-2:       #2a2a25;

  /* Accents */
  --accent-orange:    #FF6A00;
  --accent-orange-hi: #FF8A2A;
  --accent-orange-lo: #C24800;
  --accent-green:     #39FF14;
  --accent-green-lo:  #1e9a08;

  /* Texte */
  --text:    #fff;
  --text-2:  #aaa;
  --text-3:  #888;
  --text-4:  #666;
  --text-5:  #555;
  --text-dim:#444;

  /* Typo */
  --font-display: 'Rajdhani', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Glows */
  --glow-orange:  0 0 16px rgba(255,106,0,0.35);
  --glow-green:   0 0 12px rgba(57,255,20,0.25);
  --shadow-card:  0 4px 14px rgba(0,0,0,0.4);
  --shadow-live:  0 0 0 1px rgba(57,255,20,0.15), 0 8px 24px rgba(0,0,0,0.6);
}

/* ─────────── Reset ─────────── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-phone);
}
body {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  overflow-x: hidden;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
input, textarea, select {
  font: inherit;
  color: var(--text);
}
img, svg { display: block; max-width: 100%; }

/* Cacher scrollbars webkit */
::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

/* ─────────── Layout principal ─────────── */
.app {
  width: 100%;
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  background: var(--bg-phone);
}

.app__header {
  position: sticky;
  top: 0;
  z-index: 55;
  display: grid;
  grid-template-columns: minmax(56px, 1fr) auto minmax(56px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 14px 8px;
  padding-top: max(6px, env(safe-area-inset-top));
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.app__header__left {
  justify-self: start;
  display: flex;
  align-items: center;
  min-width: 0;
}
.app__header__title {
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
}
.app__header__title span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.app__header__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-back {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  padding: 0;
}
.header-back:hover {
  background: #111110;
  border-color: var(--text-3);
}
.header-back:active {
  transform: scale(0.92);
}

.app__content {
  padding-bottom: 32px;
}

/* ─────────── Wordmark ─────────── */
.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wordmark__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--text);
}

/* ─────────── Badge LVL ─────────── */
.lvl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #111110;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent-green);
}

/* ─────────── Avatar ─────────── */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-lo));
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: #0a0a0a;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ─────────── Auth screens ─────────── */
.auth {
  padding: 24px 22px 32px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.auth__logo {
  text-align: center;
  margin: 16px 0 32px;
}
.auth__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.auth__sub {
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: 24px;
}

/* ─────────── Form fields ─────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--text-3);
  text-transform: uppercase;
}
.field__input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field__input:focus {
  outline: none;
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 2px rgba(255,106,0,0.18);
}
.field__input::placeholder { color: var(--text-5); }
.field__error {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--accent-orange);
  margin-top: 2px;
}

/* ─────────── Boutons ─────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform 0.08s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--accent-orange);
  color: #0a0a0a;
  box-shadow: var(--glow-orange);
}
.btn--primary:hover { background: var(--accent-orange-hi); }

.btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-2);
}
.btn--ghost:hover { color: var(--text); border-color: var(--text-3); }

.btn--google {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  gap: 10px;
}
.btn--google:hover { background: var(--surface-warm); }

.btn--block { width: 100%; }

/* ─────────── Sep avec label ─────────── */
.sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
}
.sep::before, .sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ─────────── Liens ─────────── */
.link {
  color: var(--accent-orange);
  font-weight: 600;
}
.link--green { color: var(--accent-green); }
.link:hover { text-decoration: underline; }

/* ─────────── Alerts / flash ─────────── */
.alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid;
}
.alert--error   { background: rgba(255,106,0,0.08); border-color: rgba(255,106,0,0.4); color: var(--accent-orange); }
.alert--success { background: rgba(57,255,20,0.08); border-color: rgba(57,255,20,0.4); color: var(--accent-green); }
.alert--info    { background: var(--surface); border-color: var(--border); color: var(--text-2); }

/* ─────────── Toast ─────────── */
.toast {
  position: fixed;
  left: 14px; right: 14px; bottom: 24px;
  max-width: 460px;
  margin: 0 auto;
  background: var(--bg-phone);
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-align: center;
  box-shadow: 0 0 24px rgba(57,255,20,0.2);
  animation: toastIn 0.3s ease forwards;
  z-index: 200;
}

/* ─────────── Animations ─────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rotateDartboard {
  to { transform: rotate(360deg); }
}

/* ─────────── Utilités ─────────── */
.mono     { font-family: var(--font-mono); }
.text-dim { color: var(--text-3); }
.text-c   { text-align: center; }
.mt-8     { margin-top: 8px; }
.mt-14    { margin-top: 14px; }
.mt-22    { margin-top: 22px; }

/* ═══════════════════════════════════════════════════════════════════
   HERO (dartboard + chips stats)
   ═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: 4px 0 14px;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255,106,0,0.18), transparent 60%);
  pointer-events: none;
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(57,255,20,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding-top: 32px; /* dégage l'espace pour la chip ELO centrale */
}
.hero__board { z-index: 1; }
.db-spin {
  animation: rotateDartboard 120s linear infinite;
}

.hero__slogan {
  text-align: center;
  margin-top: -6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--text-5);
}

/* Chips de stats flottants */
.chip {
  position: absolute;
  background: rgba(13,13,12,0.85);
  border-radius: 8px;
  padding: 6px 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Le chip est maintenant un <button> : on neutralise le style natif */
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s;
}
.chip:hover  { background: rgba(13,13,12,0.95); }
.chip:active { transform: scale(0.96); }

/* Chip "mystère" — la valeur est cachée derrière un "?" qui pulse,
   l'utilisateur clique pour la révéler via l'animation festive. */
.chip--mystery .chip__value {
  animation: chip-mystery-pulse 1.6s ease-in-out infinite;
}
@keyframes chip-mystery-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.chip__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--text-4);
  text-transform: uppercase;
}
.chip__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  align-self: center;
  text-align: center;
}
/* Chip Elo centrale en haut du hero — gros chiffre, pas de label */
.chip--top-center {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  align-items: center;
  background: rgba(13,13,12,0.92);
  padding: 10px 22px;
  border-radius: 12px;
}
.chip--top-center .chip__label { display: none; }
.chip--top-center .chip__value { font-size: 36px; }
.chip--orange  { border: 1px solid rgba(255,106,0,0.2);  box-shadow: 0 0 12px rgba(255,106,0,0.13); }
.chip--orange .chip__value { color: var(--accent-orange); text-shadow: 0 0 8px rgba(255,106,0,0.4); }
.chip--green   { border: 1px solid rgba(57,255,20,0.2);  box-shadow: 0 0 12px rgba(57,255,20,0.13); }
.chip--green .chip__value  { color: var(--accent-green);  text-shadow: 0 0 8px rgba(57,255,20,0.4); }

.chip--tl { top: 80px; left: 12px; }
.chip--tr { top: 80px; right: 12px; text-align: right; align-items: flex-end; }
.chip--bl { bottom: 40px; left: 12px; }
.chip--br { bottom: 40px; right: 12px; text-align: right; align-items: flex-end; }

/* ═══════════════════════════════════════════════════════════════════
   TABS (À venir / En cours / Terminés)
   ═══════════════════════════════════════════════════════════════════ */
.tabs {
  display: flex;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.tab {
  flex: 1;
  position: relative;
  padding: 10px 4px 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-4);
  text-align: center;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tab__count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}
.tab__indic {
  position: absolute;
  left: 8%; right: 8%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.tab--active            { color: var(--text); }
.tab--active .tab__indic   { opacity: 1; }
.tab[data-status="upcoming"].tab--active { color: var(--text); }
.tab[data-status="upcoming"].tab--active .tab__count { color: var(--accent-orange); }
.tab[data-status="upcoming"].tab--active .tab__indic { background: var(--accent-orange); box-shadow: 0 0 8px var(--accent-orange); }
.tab[data-status="live"].tab--active     .tab__count { color: var(--accent-green); }
.tab[data-status="live"].tab--active     .tab__indic { background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); }
.tab[data-status="done"].tab--active     .tab__count { color: var(--accent-orange); }
.tab[data-status="done"].tab--active     .tab__indic { background: var(--accent-orange); box-shadow: 0 0 8px var(--accent-orange); }

.tab__livedot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
  display: inline-block;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   STATUS PILL
   ═══════════════════════════════════════════════════════════════════ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid;
}
.pill--live     { background: rgba(57,255,20,0.12); border-color: rgba(57,255,20,0.4); color: var(--accent-green); text-shadow: 0 0 8px rgba(57,255,20,0.6); }
.pill--upcoming { background: rgba(255,106,0,0.12); border-color: rgba(255,106,0,0.4); color: var(--accent-orange); }
.pill--done     { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: var(--text-3); }

.pill__dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; box-shadow: 0 0 8px currentColor;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   PLAYERS BAR
   ═══════════════════════════════════════════════════════════════════ */
.pbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pbar__track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.pbar__fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.pbar__fill--open { background: linear-gradient(90deg, var(--accent-orange), var(--accent-green)); box-shadow: 0 0 8px rgba(255,106,0,0.5); }
.pbar__fill--live { background: linear-gradient(90deg, var(--accent-green), var(--accent-orange)); box-shadow: 0 0 8px rgba(57,255,20,0.5); }
.pbar__fill--full { background: var(--text-3); }
.pbar__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--text);
  min-width: 38px;
  text-align: right;
}
.pbar__count--full { color: var(--text-3); }
.pbar__count .pbar__max { color: var(--text-5); }

/* ═══════════════════════════════════════════════════════════════════
   CARD TOURNOI — variante STADIUM
   ═══════════════════════════════════════════════════════════════════ */
.cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 14px 24px;
}
.cards-list__empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-5);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
}

.card-t {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease;
}
.card-t:active { transform: scale(0.99); }
.card-t--live { box-shadow: var(--shadow-live); }

.card-t__corner {
  position: absolute;
  width: 10px; height: 10px;
}
.card-t__corner--tl { top: 0; left: 0;  border-top: 1.5px solid; border-left:  1.5px solid; }
.card-t__corner--tr { top: 0; right: 0; border-top: 1.5px solid; border-right: 1.5px solid; }
.card-t--live .card-t__corner { color: var(--accent-green); }
.card-t:not(.card-t--live) .card-t__corner { color: var(--accent-orange); }

/* Bloc droit de row1 : date + bouton partager côte à côte */
.card-t__row1-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Bouton "Partager" discret à droite du badge date */
.card-t__share {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.12s;
}
.card-t__share:hover {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
  background: rgba(255,106,0,0.1);
}
.card-t__share:active { transform: scale(0.92); }
.card-t__share svg { display: block; }

.card-t__row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.card-t__when {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.card-t__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 10px;
}
.card-t__loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 12px;
}
.card-t__loc-icon { color: var(--text-4); }
.card-t__meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.card-t__fmt {
  padding: 3px 8px;
  background: var(--bg-phone);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--accent-green);
  text-transform: uppercase;
}
.card-t__winner {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-3);
}

/* Bouton d'inscription dans la carte */
.btn-inscr {
  width: 100%;
  height: 38px;
  margin-top: 12px;
  border: none;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.btn-inscr:active { transform: scale(0.98); }
.btn-inscr--open    { background: var(--accent-orange); color: #0a0a0a;            box-shadow: var(--glow-orange); }
.btn-inscr--open:hover { background: var(--accent-orange-hi); }
.btn-inscr--joined  { background: transparent; color: var(--accent-green); box-shadow: inset 0 0 0 1.5px var(--accent-green), 0 0 12px rgba(57,255,20,0.25); }
.btn-inscr--full    { background: var(--surface-warm); color: var(--text-4); cursor: not-allowed; }
/* Tournoi plein → propose la liste d'attente (orange transparent) */
.btn-inscr--waitlist   { background: transparent; color: var(--accent-orange); box-shadow: inset 0 0 0 1.5px var(--accent-orange); }
.btn-inscr--waitlist:hover { background: rgba(255,106,0,0.08); }
/* Déjà en liste d'attente */
.btn-inscr--waitlisted { background: transparent; color: var(--accent-orange-hi); box-shadow: inset 0 0 0 1.5px var(--accent-orange-hi), 0 0 12px rgba(255,106,0,0.18); }

/* CTA pour les tournois en cours : remplace le bouton d'inscription */
.card-t__live-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  margin-top: 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-green);
  box-shadow: inset 0 0 0 1.5px var(--accent-green), 0 0 12px rgba(57,255,20,0.20);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s, transform 0.08s ease;
}
.card-t__live-cta:hover  { background: rgba(57,255,20,0.06); }
.card-t__live-cta:active { transform: scale(0.98); }
.card-t__live-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent-green);
  box-shadow: 0 0 10px var(--accent-green);
  animation: livepulse 1.6s ease-in-out infinite;
}
.card-t__live-arrow {
  font-size: 14px;
  opacity: 0.8;
}
@keyframes livepulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.45; transform: scale(0.85); }
}

/* CTA "Voir l'arbre" pour les tournois terminés (sur la liste) */
.card-t__done-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 38px;
  margin-top: 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--border-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s ease;
}
.card-t__done-cta:hover  { color: var(--text); border-color: var(--text-3); background: rgba(255,255,255,0.04); }
.card-t__done-cta:active { transform: scale(0.98); }
.card-t__done-arrow { opacity: 0.7; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM SHEET
   ═══════════════════════════════════════════════════════════════════ */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 100;
}
.sheet-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Modale d'info pour les chips du hero */
.info-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 200;
}
.info-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.info-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  width: calc(100% - 36px);
  max-width: 380px;
  background: var(--bg-phone);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  padding: 22px 22px 24px;
  z-index: 201;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-align: center;
}
.info-modal.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.info-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.info-modal__close:hover { color: var(--text); border-color: var(--text-3); }
.info-modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--text);
}
.info-modal__body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  max-height: 90vh;
  background: var(--bg-phone);
  border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
  overflow: hidden;
  z-index: 101;
  padding: 14px 18px 0;
}
.sheet.is-open { transform: translateY(0); }

.sheet__grabber {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-2);
  margin: 0 auto 14px;
}
.sheet__close {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.sheet__row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.sheet__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  max-width: 80%;
  margin: 0 0 6px;
}
.sheet__sub {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 18px;
}
.sheet__bg {
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  opacity: 0.25;
  pointer-events: none;
}
.sheet__body {
  overflow-y: auto;
  max-height: calc(90vh - 70px);
  padding-bottom: 24px;
}

.sheet__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.statcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.statcard__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-4);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.statcard__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.3px;
}
.statcard__value--orange { color: var(--accent-orange); }
.statcard__value--green  { color: var(--accent-green); }
.statcard__value--dim    { color: var(--text-3); }
.statcard__sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-3);
  margin-top: 2px;
}

.metacard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.metacard__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.metacard__cell-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-4);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.metacard__cell-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.metacard__sep {
  height: 1px;
  background: var(--border);
  margin: 10px 0;
}
.metacard__line { font-size: 13px; color: var(--text-3); margin-bottom: 4px; }
.metacard__line strong { color: var(--text); font-weight: 600; }

/* ─── Landing page d'un tournoi à venir ──────────────────────────────── */
.tlanding {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px 32px;
}
.tlanding__back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-3);
  text-decoration: none;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.tlanding__back:hover { color: var(--accent-orange); }
.tlanding__cancel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(255,106,0,0.08);
  border: 1px solid rgba(255,106,0,0.45);
  border-radius: 10px;
  color: var(--accent-orange);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.5px;
}
.tlanding__cancel strong { font-weight: 700; }
.tlanding__cancel span { color: var(--text-3); font-weight: 500; }

.tlanding__poster-wrap {
  margin: 0 0 18px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-deep, #050505);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 30px rgba(255,106,0,0.10);
  aspect-ratio: 4 / 5;
}
.tlanding__poster {
  width: 100%;
  height: auto;
  display: block;
}

.tlanding__content {
  /* Le contenu est rendu par api/tournoi-sheet.php : on neutralise les
     éventuels artefacts de modale (close, etc.) qui ne s'appliquent pas ici. */
}
.tlanding__content > .sheet__title {
  font-size: 28px;
}

/* Tablette+ : poster max 540px de haut */
@media (min-width: 720px) {
  .tlanding__poster-wrap { max-width: 540px; margin-inline: auto; }
}

/* ─── Bloc Partage dans la modale tournoi ────────────────────────────── */
.sheet-share {
  margin: 14px 0 18px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sheet-share__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-4);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sheet-share__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.sheet-share__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-phone, #0a0a0a);
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sheet-share__icon:hover  { transform: translateY(-1px); border-color: var(--border-2); background: rgba(255,255,255,0.04); }
.sheet-share__icon:active { transform: scale(0.94); }
.sheet-share__icon--x:hover        { color: #ffffff; border-color: #ffffff; }
.sheet-share__icon--facebook:hover { color: #1877F2; border-color: #1877F2; }
.sheet-share__icon--native {
  width: auto;
  padding: 0 14px;
  gap: 6px;
  color: var(--accent-orange);
  border-color: rgba(255,106,0,0.45);
  background: rgba(255,106,0,0.08);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.sheet-share__icon--native:hover { background: rgba(255,106,0,0.16); border-color: var(--accent-orange); }

.sheet__cta {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  margin-bottom: 22px;
}
.sheet__cta--open    { background: var(--accent-orange); color: #0a0a0a; box-shadow: var(--glow-orange); }
.sheet__cta--joined  { background: transparent; color: var(--accent-green); box-shadow: inset 0 0 0 1.5px var(--accent-green), 0 0 12px rgba(57,255,20,0.25); }
.sheet__cta--full    { background: var(--surface-warm); color: var(--text-4); cursor: not-allowed; }
.sheet__cta--done    { background: transparent; color: var(--text-3); border: 1px solid var(--border-2); }
.sheet__cta--waitlist   { background: transparent; color: var(--accent-orange); box-shadow: inset 0 0 0 1.5px var(--accent-orange); }
.sheet__cta--waitlisted { background: transparent; color: var(--accent-orange-hi); box-shadow: inset 0 0 0 1.5px var(--accent-orange-hi), 0 0 12px rgba(255,106,0,0.18); }
.sheet__cta--live { background: transparent; color: var(--accent-green); box-shadow: inset 0 0 0 1.5px var(--accent-green), 0 0 12px rgba(57,255,20,0.25); }
.sheet__cta--live:hover { background: rgba(57,255,20,0.06); }
.sheet__cta--done-link { background: transparent; color: var(--text-2); border: 1px solid var(--border-2); }
.sheet__cta--done-link:hover { color: var(--text); border-color: var(--text-3); background: rgba(255,255,255,0.04); }
.sheet__cta-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent-green);
  box-shadow: 0 0 10px var(--accent-green);
  animation: livepulse 1.6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   NEWS
   ═══════════════════════════════════════════════════════════════════ */
.news-list {
  padding: 0 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
}
.news-card__date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--accent-orange);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.news-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.2px;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.news-card__exc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.4;
}

.news-detail {
  padding: 8px 18px 32px;
}
.news-detail__date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--accent-orange);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.news-detail__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.news-detail__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-line;
}

/* ═══════════════════════════════════════════════════════════════════
   PROFIL / CLASSEMENT
   ═══════════════════════════════════════════════════════════════════ */
.profile {
  padding: 18px 18px 32px;
}
.profile__head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.profile__avatar {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-lo));
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: #0a0a0a;
  overflow: hidden;
}
.profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  margin: 0;
}
.profile__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 2px;
}

.statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}

/* Records & streaks — sur la page profil */
.records {
  margin: 22px 0;
}
.records__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 12px;
}
.records__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.record {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.record__icon {
  font-size: 22px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.record__body { min-width: 0; }
.record__val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.3px;
  line-height: 1;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.record__lbl {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-4);
}
.record__suffix {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.record__suffix--win  { color: var(--accent-green); }
.record__suffix--lose { color: #ff6a6a; }

/* Historique des matches — page profil */
.history {
  margin: 22px 0 32px;
}
.history__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 12px;
}
.history__empty {
  padding: 18px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
}
.history__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 10px;
  min-width: 0;
}
.hrow--win  { border-left-color: var(--accent-green); }
.hrow--lose { border-left-color: #ff6a6a; }

.hrow__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
  width: 64px;
}
.hrow__badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
}
.hrow--win  .hrow__badge { color: var(--accent-green); }
.hrow--lose .hrow__badge { color: #ff6a6a; }
.hrow__delta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
}
.hrow--win  .hrow__delta { color: var(--accent-green); }
.hrow--lose .hrow__delta { color: #ff6a6a; }

.hrow__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hrow__line1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  min-width: 0;
}
.hrow__opponent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}
.hrow__score {
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.hrow__line2 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--text-5);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hrow__tournoi { color: var(--text-3); text-transform: uppercase; }
.hrow__sep     { color: var(--text-5); }
.hrow__jeu     { text-transform: uppercase; }

.lb-list {
  padding: 0 14px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s ease;
}
.lb-row:hover  { border-color: var(--border-2); background: rgba(255,255,255,0.02); }
.lb-row:active { transform: scale(0.99); }
.lb-row--me {
  border-color: var(--accent-green);
  box-shadow: 0 0 12px rgba(57,255,20,0.15);
}
.lb-row--me:hover { border-color: var(--accent-green); }
.lb-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  width: 32px;
  text-align: center;
  color: var(--text-3);
}
.lb-rank--1 { color: var(--accent-orange); text-shadow: 0 0 8px rgba(255,106,0,0.5); }
.lb-rank--2 { color: var(--accent-orange-hi); }
.lb-rank--3 { color: var(--accent-orange-lo); }
.lb-name {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
}
.lb-elo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-green);
}

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAV (lien retour / nav globale légère)
   ═══════════════════════════════════════════════════════════════════ */
.subnav {
  display: flex;
  gap: 8px;
  padding: 4px 14px 14px;
  overflow-x: auto;
  white-space: nowrap;
}
.subnav__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s ease;
}
.subnav__item:hover  { color: var(--text); border-color: var(--text-3); background: rgba(255,255,255,0.03); }
.subnav__item:active { transform: scale(0.97); }
.subnav__item--active {
  color: var(--accent-orange);
  border-color: rgba(255,106,0,0.5);
  background: rgba(255,106,0,0.06);
}
.subnav__item--active:hover { color: var(--accent-orange); border-color: rgba(255,106,0,0.5); }

/* ═══════════════════════════════════════════════════════════════════
   ADMIN — layout + tables + forms denses
   ═══════════════════════════════════════════════════════════════════ */
.adm {
  min-height: 100vh;
  background: var(--bg-phone);
}
.adm__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 18px 12px;
  min-height: 58px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-phone);
  position: sticky; top: 0; z-index: 30;
}
.adm__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}
.adm__brand small {
  padding-left: 26px;       /* aligne sous le wordmark, après le logo 18px + gap 6px */
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.2px;
  color: var(--accent-orange);
  margin: 0;
  white-space: nowrap;
}
.adm__user {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--text-3);
}
.adm__user a { color: var(--accent-orange); }

.adm__nav {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  white-space: nowrap;
  background: var(--surface-2);
}
.adm__nav a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
}
.adm__nav a:hover { color: var(--text); }
.adm__nav a.is-active {
  background: rgba(255,106,0,0.12);
  color: var(--accent-orange);
}
.adm__nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-orange);
  color: #0a0a0a;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 0 8px rgba(255,106,0,0.4);
}

.adm__main {
  padding: 14px;
  max-width: 1100px;
  margin: 0 auto;
}

.adm__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.adm__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  margin: 0;
}
.adm__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Filtres / chips de filtre */
.adm__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  overflow: visible;
}
.adm__filters a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s ease;
}
.adm__filters a:hover  { color: var(--text); border-color: var(--text-3); background: rgba(255,255,255,0.03); }
.adm__filters a:active { transform: scale(0.97); }
.adm__filters a.is-active {
  background: rgba(255,106,0,0.10);
  color: var(--accent-orange);
  border-color: rgba(255,106,0,0.5);
}
.adm__filters a.is-active:hover { color: var(--accent-orange); border-color: rgba(255,106,0,0.5); }

/* Stats cards (dashboard) */
.adm__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.adm__stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.adm__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--text-4);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.adm__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}
.adm__stat-value--orange { color: var(--accent-orange); }
.adm__stat-value--green  { color: var(--accent-green); }
.adm__stat-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
}

/* Tables */
.adm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.adm-table th, .adm-table td {
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.adm-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-4);
  text-transform: uppercase;
  background: var(--surface-2);
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: rgba(255,106,0,0.03); }
.adm-table td.num { text-align: right; font-family: var(--font-mono); }
.adm-table .row-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-5);
}

/* Card list for mobile (alternative à table) */
.adm-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.adm-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.adm-card__row {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.adm-card__actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Pills statut admin */
.adm-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid;
}
.adm-pill--preparation { background: rgba(170,170,170,0.08); border-color: rgba(170,170,170,0.3);  color: var(--text-2); }
.adm-pill--ouvert      { background: rgba(255,106,0,0.12);  border-color: rgba(255,106,0,0.4);    color: var(--accent-orange); }
.adm-pill--complet     { background: rgba(255,138,42,0.12); border-color: rgba(255,138,42,0.4);   color: var(--accent-orange-hi); }
.adm-pill--ferme       { background: rgba(170,170,170,0.08); border-color: rgba(170,170,170,0.3); color: var(--text-2); }
.adm-pill--en_cours    { background: rgba(57,255,20,0.12);  border-color: rgba(57,255,20,0.4);    color: var(--accent-green); }
.adm-pill--termine     { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: var(--text-3); }
.adm-pill--annule      { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.15); color: var(--text-4); }

.adm-pill--admin        { background: rgba(255,106,0,0.12);  border-color: rgba(255,106,0,0.4);    color: var(--accent-orange); }
.adm-pill--organisateur { background: rgba(57,255,20,0.12);  border-color: rgba(57,255,20,0.4);    color: var(--accent-green); }
.adm-pill--joueur       { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: var(--text-2); }

.adm-pill--en_attente   { background: rgba(255,138,42,0.12); border-color: rgba(255,138,42,0.4); color: var(--accent-orange-hi); }
.adm-pill--validee      { background: rgba(57,255,20,0.12);  border-color: rgba(57,255,20,0.4);    color: var(--accent-green); }
.adm-pill--refusee      { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: var(--text-3); }

/* Boutons admin (denses) */
.btn-adm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  height: 32px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.btn-adm:hover { filter: brightness(1.15); }
.btn-adm--primary { background: var(--accent-orange); color: #0a0a0a; }
.btn-adm--green   { background: var(--accent-green); color: #0a0a0a; }
.btn-adm--ghost   { background: transparent; border-color: var(--border-2); color: var(--text-2); }
.btn-adm--danger  { background: transparent; border-color: rgba(255,106,0,0.35); color: var(--accent-orange); }

/* Formulaires admin */
.adm-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.adm-form__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 12px;
}
.adm-grid {
  display: grid;
  gap: 12px;
}
.adm-grid--2 { grid-template-columns: 1fr 1fr; }
.adm-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 540px) {
  .adm-grid--2, .adm-grid--3 { grid-template-columns: 1fr; }
}

.adm-form .field__label { font-size: 9px; }
.adm-form .field__input,
.adm-form select,
.adm-form textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  width: 100%;
}
.adm-form textarea { min-height: 90px; resize: vertical; }
.adm-form select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.adm-form .field__input:focus,
.adm-form select:focus,
.adm-form textarea:focus {
  outline: none;
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 2px rgba(255,106,0,0.18);
}

.adm-form__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Version sticky : barre de validation collée en bas du viewport
   pendant qu'on scroll dans un long formulaire d'édition. */
.adm-form__actions--sticky {
  position: sticky;
  bottom: 0;
  margin: 18px -14px 0;      /* étend aux bords du conteneur .adm__main */
  padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
  z-index: 20;
}

/* Prix (lignes répétables) */
.prix-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prix-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: 6px;
  align-items: end;
}
@media (max-width: 540px) {
  .prix-row { grid-template-columns: 1fr 1fr; }
  .prix-row > :nth-child(3) { grid-column: 1 / -1; }
  .prix-row > :nth-child(4) { grid-column: 1 / -1; }
}

.adm-actions {
  display: flex; gap: 4px; flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   BRACKET — vue tournoi pyramidale
   ═══════════════════════════════════════════════════════════════════ */
.bracket-wrap {
  overflow-x: auto;
  padding: 8px 0 24px;
  margin: 0 -14px;
}
.bracket {
  display: flex;
  align-items: stretch;
  gap: 36px;
  padding: 0 14px;
  min-height: 200px;
}
.bracket__col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-width: 220px;
  position: relative;
}
.bracket__col-label {
  position: sticky; top: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--text-4);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 6px;
  padding: 2px 0;
  background: var(--bg-phone);
}

/* Carte match individuelle */
.match-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.match-card:hover { border-color: var(--border-2); }
.match-card:active { transform: scale(0.98); }

.match-card--en_cours { border-color: var(--accent-green); box-shadow: 0 0 0 1px rgba(57,255,20,0.15), 0 4px 12px rgba(0,0,0,0.4); }
.match-card--termine  { opacity: 0.85; }

.match-card__hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-4);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.match-card__hdr .pill { padding: 2px 5px; font-size: 9px; letter-spacing: 0.8px; }
.match-card__player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2);
}
.match-card__player + .match-card__player { border-top: 1px solid var(--border); }
.match-card__player--winner { color: var(--accent-green); font-weight: 700; }
.match-card__player--bye    { color: var(--text-5); font-style: italic; font-weight: 500; }
.match-card__pseudo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-card__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  margin-left: 8px;
  color: var(--text);
}
.match-card__bye-info {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-5);
  padding: 4px 0;
}

/* Pill d'état par joueur (à débuter / en cours / vainqueur / éliminé / en attente) */
.match-card__state {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  margin-left: auto;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255,255,255,0.04);
  color: var(--text-4);
}
.match-card__state--idle    { background: rgba(255,106,0,0.10);  border-color: rgba(255,106,0,0.35);  color: var(--accent-orange); }
.match-card__state--live    { background: rgba(57,255,20,0.12);  border-color: rgba(57,255,20,0.40);  color: var(--accent-green); }
.match-card__state--win     { background: rgba(57,255,20,0.12);  border-color: rgba(57,255,20,0.40);  color: var(--accent-green); }
.match-card__state--lose    { background: rgba(255,255,255,0.04);border-color: rgba(255,255,255,0.15);color: var(--text-5); text-decoration: line-through; }
.match-card__state--waiting { background: rgba(170,170,170,0.06);border-color: rgba(170,170,170,0.25);color: var(--text-4); }

/* Mode full-width : navigation horizontale entre rounds par swipe (scroll-snap),
   cartes empilées verticalement dans chaque round */
.bracket-wrap--full {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 -14px;
  padding: 0 0 24px;
}
.bracket-wrap--full::-webkit-scrollbar { display: none; }
.bracket-wrap--full .bracket {
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  min-height: 0;
}
.bracket-wrap--full .bracket__col {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  gap: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 14px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.bracket-wrap--full .bracket__col-label {
  position: static;
  background: transparent;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 0;
  margin: 0 0 4px;
}
.bracket__col-label-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--text-5);
}

/* Pagination dots (sélecteur de round) */
.bracket-pages {
  display: flex;
  gap: 6px;
  margin: 0 -14px 12px;
  padding: 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bracket-pages::-webkit-scrollbar { display: none; }
.bracket-pages__dot {
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bracket-pages__dot:hover { color: var(--text-2); border-color: var(--border-2); }
.bracket-pages__dot.is-active {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #0a0a0a;
}

/* Bouton "Tirer au sort" central / contrôles */
.gestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.gestion-actions__start {
  flex: 1 0 100%;
  height: 44px;
}
.gestion-actions__hint {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed rgba(255,106,0,0.4);
  background: rgba(255,106,0,0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--accent-orange);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   MCARD — carte de match "premium" (mode round courant pleine largeur)
   ═══════════════════════════════════════════════════════════════════ */
.mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 14px;
  padding: 14px 14px 0;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.mcard:hover  { border-color: var(--border-2); }
.mcard:active { transform: scale(0.995); }
.mcard.mcard--locked { cursor: default; }
.mcard.mcard--locked:active { transform: none; }

/* Statuts globaux de carte — l'accent passe par le bord gauche épais */
.mcard--a_venir  { border-color: rgba(255,106,0,0.35); border-left-color: var(--accent-orange); }
.mcard--en_cours { border-color: rgba(57,255,20,0.45);  border-left-color: var(--accent-green);  box-shadow: 0 0 0 1px rgba(57,255,20,0.10), 0 6px 24px rgba(57,255,20,0.08); }
.mcard--termine  { opacity: 0.85; border-left-color: rgba(255,255,255,0.25); }

/* Header de carte */
.mcard__hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.mcard__hdr-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mcard__tournoi {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--text-5);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcard__round-row { display: flex; align-items: center; gap: 8px; }
.mcard__round {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.4px;
  color: var(--text);
  text-transform: uppercase;
}
.mcard__format {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,106,0,0.4);
  background: rgba(255,106,0,0.10);
  color: var(--accent-orange);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.mcard--en_cours .mcard__format { border-color: rgba(57,255,20,0.4); background: rgba(57,255,20,0.10); color: var(--accent-green); }

.mcard__hdr-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.mcard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: inherit;
  pointer-events: none;
  white-space: nowrap;
}
.mcard__btn--primary { background: var(--accent-orange); border-color: var(--accent-orange); color: #0a0a0a; }
.mcard--en_cours .mcard__btn--primary { background: var(--accent-green); border-color: var(--accent-green); color: #0a0a0a; }
.mcard--termine  .mcard__btn--primary { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: var(--text-3); }

/* Body : joueur gauche / centre score / joueur droite */
.mcard__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0 14px;
}
.mcard__player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mcard__player--right { justify-content: flex-end; text-align: right; }

.mcard__avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-orange);
  color: #0a0a0a;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.mcard--en_cours .mcard__avatar { background: var(--accent-green); }
.mcard--termine  .mcard__avatar { background: rgba(255,255,255,0.10); color: var(--text-3); }

.mcard__player-meta {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.mcard__player-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--text);
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcard__player-state {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-4);
  white-space: nowrap;
}
.mcard__player--right .mcard__player-state { align-self: flex-end; }
/* EN ATTENTE : texte simple, pas de pill */
.mcard__player-state--idle,
.mcard__player-state--waiting { color: var(--text-4); }
/* EN COURS / GAGNÉ / PERDU : pills colorées */
.mcard__player-state--live,
.mcard__player-state--win,
.mcard__player-state--lose {
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.mcard__player-state--live { border-color: rgba(57,255,20,0.45); background: rgba(57,255,20,0.12); color: var(--accent-green); }
.mcard__player-state--win  { border-color: rgba(57,255,20,0.45); background: rgba(57,255,20,0.12); color: var(--accent-green); }
.mcard__player-state--lose { border-color: rgba(255,82,82,0.45); background: rgba(255,82,82,0.12); color: #ff6a6a; }

/* Pastille 180 par joueur sur la mcard — uniquement si > 0 */
.mcard__180-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,210,77,0.5);
  background: rgba(255,210,77,0.10);
  color: #FFD24D;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255,210,77,0.5);
}
.mcard__player--right .mcard__180-tag { align-self: flex-end; }

/* Centre : score */
.mcard__center { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 6px; }
.mcard__score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--text);
}
.mcard__score-sep { color: var(--text-5); font-weight: 600; }
.mcard__score-val--win { color: var(--accent-green); }
.mcard__center-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-5);
  text-transform: uppercase;
}

/* Footer de carte */
.mcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-4);
}
.mcard__foot-left { display: inline-flex; align-items: center; gap: 6px; }
.mcard--en_cours .mcard__foot-left { color: var(--accent-green); }
.mcard__foot-right { color: var(--text-2); letter-spacing: 0.8px; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard__foot-right--origin { color: var(--text-5); font-size: 9px; letter-spacing: 0.6px; text-transform: none; font-style: italic; }
.mcard__foot-val   { color: var(--text); font-weight: 700; font-size: 12px; }
.mcard__foot-vs    { color: var(--text-5); }
.mcard__elo-delta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.mcard__elo-delta--win  { color: var(--accent-green); }
.mcard__elo-delta--lose { color: #ff6a6a; }
.mcard__foot-left .pill__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Mobile : on resserre les paddings/tailles */
@media (max-width: 480px) {
  .mcard { padding: 12px 12px 0; }
  .mcard__hdr { gap: 8px; margin-bottom: 10px; }
  .mcard__round { font-size: 15px; }
  .mcard__btn  { height: 50px; padding: 0 12px; font-size: 11px; }
  .mcard__avatar { width: 32px; height: 32px; font-size: 12px; }
  .mcard__player-name { font-size: 21px; }
  .mcard__player-state { font-size: 8px; height: 16px; }
  .mcard__score { font-size: 48px; gap: 10px; }
  .mcard__center { padding: 0 4px; }
  .mcard__player { gap: 8px; }
  .mcard__body { gap: 6px; padding: 4px 0 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MATCH PANEL — saisie en cours
   ═══════════════════════════════════════════════════════════════════ */
.match-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 150;
}
.match-panel-overlay.is-open { opacity: 1; pointer-events: auto; }

.match-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 600px;
  margin: 0 auto;
  max-height: 92vh;
  background: var(--bg-phone);
  border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
  z-index: 151;
  padding: 14px 18px 24px;
  overflow-y: auto;
}
.match-panel.is-open { transform: translateY(0); }

.mp__grabber { width: 36px; height: 4px; border-radius: 999px; background: var(--border-2); margin: 0 auto 14px; }
.mp__row1   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mp__close  { width: 32px; height: 32px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }

.mp__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  margin: 0;
}
.mp__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Versus header */
.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 8px;
  background: var(--surface);
  border-radius: 12px;
  margin-bottom: 16px;
}
.versus__player { text-align: center; }
.versus__player--right { text-align: center; }
.versus__pseudo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.versus__elo {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-4);
  margin-top: 4px;
}
.versus__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -2px;
}
.versus__score--green  { color: var(--accent-green); text-shadow: 0 0 12px rgba(57,255,20,0.4); }
.versus__score--orange { color: var(--accent-orange); text-shadow: 0 0 12px rgba(255,106,0,0.4); }
.versus__sep {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-4);
}
.versus__center {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.versus__target {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--text-4);
  text-transform: uppercase;
}

/* Boutons +1 manche */
.legs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.legs-col { display: flex; flex-direction: column; gap: 6px; }
.btn-leg {
  height: 64px;
  border-radius: 12px;
  border: 2px solid;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn-leg:hover { background: rgba(255,255,255,0.04); }
.btn-leg:active { transform: scale(0.97); }
.btn-leg:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-leg--p1 { border-color: var(--accent-orange); color: var(--accent-orange); }
.btn-leg--p2 { border-color: var(--accent-green);  color: var(--accent-green);  }
.btn-leg__plus { display: block; font-size: 22px; line-height: 1; margin-bottom: 2px; }
.btn-leg__label { font-size: 12px; opacity: 0.9; }

/* Bouton -1 sous chaque +1 : correction d'erreur */
.btn-leg-minus {
  height: 32px;
  border-radius: 8px;
  border: 1px dashed;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  opacity: 0.65;
}
.btn-leg-minus:hover    { opacity: 1; background: rgba(255,255,255,0.04); }
.btn-leg-minus:active   { transform: scale(0.97); }
.btn-leg-minus:disabled { opacity: 0.25; cursor: not-allowed; }
.btn-leg-minus--p1      { border-color: rgba(255,106,0,0.45); color: var(--accent-orange); }
.btn-leg-minus--p2      { border-color: rgba(57,255,20,0.45);  color: var(--accent-green); }

/* Bouton +180 par joueur (avec compteur intégré) */
.btn-180 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  margin-top: 4px;
  border-radius: 8px;
  border: 1px solid;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s ease;
}
.btn-180:hover  { background: rgba(255,255,255,0.04); }
.btn-180:active { transform: scale(0.97); }
.btn-180--p1    { border-color: rgba(255,106,0,0.5); color: var(--accent-orange); }
.btn-180--p2    { border-color: rgba(57,255,20,0.5);  color: var(--accent-green); }
.btn-180__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
}

/* Bouton -180 (correction) */
.btn-180-minus {
  height: 26px;
  border-radius: 6px;
  border: 1px dashed;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.6px;
  cursor: pointer;
  opacity: 0.55;
  transition: background 0.15s, opacity 0.15s, transform 0.08s ease;
}
.btn-180-minus:hover    { opacity: 1; background: rgba(255,255,255,0.04); }
.btn-180-minus:active   { transform: scale(0.97); }
.btn-180-minus--p1      { border-color: rgba(255,106,0,0.4); color: var(--accent-orange); }
.btn-180-minus--p2      { border-color: rgba(57,255,20,0.4);  color: var(--accent-green); }

/* ═══════════════════════════════════════════════════════════════════
   FESTIVE 180 — overlay festif quand un 180 est déclaré
   ═══════════════════════════════════════════════════════════════════ */
.festive180 {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(255,106,0,0.35), rgba(0,0,0,0.92) 70%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.festive180.is-visible { opacity: 1; }
.festive180.is-exiting { opacity: 0; }

.f180__rings {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.f180__ring {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px solid;
  opacity: 0;
  animation: ring-pulse 1.8s ease-out infinite;
}
.f180__ring:nth-child(1) { border-color: #FF6A00; animation-delay: 0s; }
.f180__ring:nth-child(2) { border-color: #39FF14; animation-delay: 0.25s; }
.f180__ring:nth-child(3) { border-color: #FF6A00; animation-delay: 0.5s; }

.f180__rays {
  position: absolute;
  width: 600px; height: 600px;
  opacity: 0.35;
  pointer-events: none;
  animation: rays-spin 12s linear infinite;
}

.f180__confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.f180__piece {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: confetti-fall var(--dur, 2s) cubic-bezier(0.15, 0.6, 0.4, 1) var(--delay, 0s) forwards;
}

.f180__stack {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  transform: scale(0.4) rotate(-8deg);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.35s ease;
}
.festive180.is-hold .f180__stack { transform: scale(1) rotate(0deg); opacity: 1; }
.festive180.is-enter .f180__stack { transform: scale(1) rotate(0deg); opacity: 1; }
.festive180.is-exiting .f180__stack { transform: scale(1.2) rotate(2deg); opacity: 0; transition: transform 0.4s ease, opacity 0.35s ease; }

.f180__subline {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #39FF14;
  letter-spacing: 6px;
  text-shadow: 0 0 12px #39FF14;
  animation: flicker 0.18s steps(2) 4;
}
.f180__big {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 180px;
  line-height: 0.9;
  letter-spacing: -8px;
  color: #fff;
  text-shadow:
    0 0 20px #FF6A00,
    0 0 40px #FF6A00,
    0 0 80px rgba(255,106,0,0.6),
    0 0 120px rgba(57,255,20,0.4);
  -webkit-text-stroke: 2px #FF6A00;
}
.f180__shine {
  position: absolute;
  left: -10%; right: -10%; bottom: 8px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #39FF14, #FF6A00, #39FF14, transparent);
  box-shadow: 0 0 14px #39FF14;
  border-radius: 4px;
  animation: shine-slide 1.8s ease-in-out infinite;
}
.f180__chips {
  display: flex; gap: 10px; margin-top: 4px;
}
.f180__chip {
  padding: 4px 10px;
  background: #0a0a0a;
  border: 1.5px solid #FF6A00;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #FF6A00;
  letter-spacing: 1.5px;
  box-shadow: 0 0 12px rgba(255,106,0,0.5);
  opacity: 0;
  animation: chip-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
.f180__chip:nth-child(1) { animation-delay: 0.7s; }
.f180__chip:nth-child(2) { animation-delay: 0.82s; }
.f180__chip:nth-child(3) { animation-delay: 0.94s; }

.f180__player {
  margin-top: 18px;
  padding: 8px 18px;
  background: rgba(10,10,10,0.85);
  border: 1px solid rgba(57,255,20,0.4);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 0 20px rgba(57,255,20,0.25);
  opacity: 0;
  animation: name-fade 0.5s ease 1.2s forwards;
}
.f180__avatar {
  width: 24px; height: 24px; border-radius: 999px;
  background: linear-gradient(135deg, #39FF14, #1e9a08);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; color: #0a0a0a;
}
.f180__player-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: #fff; letter-spacing: 0.5px;
  text-transform: capitalize;
}
.f180__hint {
  position: absolute; bottom: -90px;
  left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px; color: rgba(255,255,255,0.4);
  letter-spacing: 2px; white-space: nowrap;
  opacity: 0;
  animation: hint-fade 0.4s ease 2s forwards;
}

/* Compteur de 180s : apparaît en fin d'animation, sous le pseudo */
.f180__total {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  animation: total-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 2.4s forwards;
}
.f180__total-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  color: #fff;
  letter-spacing: -1px;
  text-shadow: 0 0 22px rgba(255,210,77,0.65), 0 0 50px rgba(255,106,0,0.45);
}
.f180__total-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFD24D;
  margin-top: 2px;
}
@keyframes total-pop {
  0%   { opacity: 0; transform: translateY(12px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(0) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Keyframes */
@keyframes confetti-fall {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }
  8% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--scale, 1)) rotate(calc(var(--rot, 0deg) * 0.1));
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--dx, 0px) + var(--drift, 0px)),
        calc(-50% + 600px)
      )
      scale(var(--scale, 1))
      rotate(var(--rot, 360deg));
  }
}
@keyframes ring-pulse {
  0%   { opacity: 0.9; transform: scale(0.2); }
  80%  { opacity: 0;   transform: scale(7); }
  100% { opacity: 0;   transform: scale(7); }
}
@keyframes rays-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes shine-slide {
  0%, 100% { transform: translateX(-30%); opacity: 0.6; }
  50%      { transform: translateX(30%);  opacity: 1;   }
}
@keyframes chip-pop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.5); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes name-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hint-fade {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

/* Accessibilité : si reduce motion, on supprime tous les effets */
@media (prefers-reduced-motion: reduce) {
  .festive180 .f180__stack,
  .festive180 .f180__rays,
  .festive180 .f180__ring,
  .festive180 .f180__piece,
  .festive180 .f180__shine,
  .festive180 .f180__chip,
  .festive180 .f180__player,
  .festive180 .f180__hint,
  .festive180 .f180__subline {
    animation: none !important;
    transition: opacity 0.2s ease !important;
    transform: none !important;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FESTIVE WIN — animation cinématique victoire de finale (z-index 9999+)
   ═══════════════════════════════════════════════════════════════════ */
.fwin {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: radial-gradient(ellipse at center top, rgba(255,138,42,0.35), rgba(255,106,0,0.15) 30%, rgba(0,0,0,0.96) 70%);
  opacity: 1;
  transition: opacity 0.4s ease, background 0.5s ease;
}
.fwin.is-exiting { opacity: 0; }

/* Rideaux */
.fwin__curtain {
  position: absolute;
  inset: 0;
  background: #000;
  transition: transform 0.6s cubic-bezier(0.55, 0, 0.45, 1);
  z-index: 5;
}
.fwin__curtain--top { transform: translateY(0); }
.fwin__curtain--bot { transform: translateY(0); }
.fwin.is-reveal .fwin__curtain--top,
.fwin.is-hold   .fwin__curtain--top,
.fwin.is-exiting .fwin__curtain--top { transform: translateY(-100%); }
.fwin.is-reveal .fwin__curtain--bot,
.fwin.is-hold   .fwin__curtain--bot,
.fwin.is-exiting .fwin__curtain--bot { transform: translateY(100%); }

/* Beams */
.fwin__beams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fwin__beam {
  position: absolute;
  top: -20%;
  width: 140px;
  height: 150%;
  transform: rotate(var(--rot, 0deg));
  transform-origin: top center;
  mix-blend-mode: screen;
  filter: blur(8px);
  opacity: 0;
}
.fwin.is-reveal .fwin__beam,
.fwin.is-hold   .fwin__beam {
  animation: beam-sweep var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
}

/* Confetti */
.fwin__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fwin__piece {
  position: absolute;
  top: -10%;
  opacity: 0;
}
.fwin.is-reveal .fwin__piece,
.fwin.is-hold   .fwin__piece {
  animation: win-confetti var(--dur, 4s) linear var(--delay, 0s) infinite;
}

/* Halo sol */
.fwin__floor {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,106,0,0.55), transparent 60%);
  filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.fwin.is-reveal .fwin__floor,
.fwin.is-hold   .fwin__floor { opacity: 1; }

/* Stack contenu */
.fwin__stack {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.fwin.is-reveal .fwin__stack,
.fwin.is-hold   .fwin__stack { opacity: 1; }

.fwin__tournament {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #FFD24D;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255,210,77,0.6);
  opacity: 0;
}
.fwin__champion {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 12px;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 16px #FF6A00,
    0 0 32px #FF6A00,
    0 0 60px rgba(255,210,77,0.6);
  opacity: 0;
}
.fwin__trophy {
  position: relative;
  margin-top: 18px;
  display: flex;
  align-items: flex-end;
  opacity: 0;
}
.fwin__laurel--left  { margin-right: -18px; margin-bottom: 10px; opacity: 0.95; }
.fwin__laurel--right { margin-left:  -18px; margin-bottom: 10px; opacity: 0.95; }
.fwin__cup {
  filter:
    drop-shadow(0 0 24px rgba(255,210,77,0.6))
    drop-shadow(0 0 60px rgba(255,106,0,0.4));
}
.fwin__winner {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 0 0 20px rgba(57,255,20,0.6), 0 0 40px rgba(57,255,20,0.3);
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
}
.fwin__subline {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0;
}
.fwin__stats {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 320px;
  opacity: 0;
}
.fwin__stat {
  background: rgba(13,13,12,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fwin__stat--green  { border-color: rgba(57,255,20,0.2);  box-shadow: 0 0 14px rgba(57,255,20,0.13); }
.fwin__stat--orange { border-color: rgba(255,106,0,0.2);  box-shadow: 0 0 14px rgba(255,106,0,0.13); }
.fwin__stat--gold   { border-color: rgba(255,210,77,0.2); box-shadow: 0 0 14px rgba(255,210,77,0.13); }
.fwin__stat-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: #666;
  letter-spacing: 1.2px;
}
.fwin__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.3px;
}
.fwin__stat--green  .fwin__stat-value { color: #39FF14; text-shadow: 0 0 8px rgba(57,255,20,0.4); }
.fwin__stat--orange .fwin__stat-value { color: #FF6A00; text-shadow: 0 0 8px rgba(255,106,0,0.4); }
.fwin__stat--gold   .fwin__stat-value { color: #FFD24D; text-shadow: 0 0 8px rgba(255,210,77,0.4); }

.fwin__ctas {
  margin-top: auto;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  opacity: 0;
}
.fwin__btn {
  flex: 1;
  height: 46px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.08s ease, filter 0.15s;
}
.fwin__btn:active { transform: scale(0.97); }
.fwin__btn--share {
  background: rgba(10,10,10,0.7);
  border: 1px solid #2a2a25;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fwin__btn--share:hover { filter: brightness(1.2); }
.fwin__btn--continue {
  background: linear-gradient(135deg, #FF6A00, #FF8A2A);
  border: none;
  color: #0a0a0a;
  box-shadow: 0 0 20px rgba(255,106,0,0.5);
}
.fwin__btn--continue:hover { filter: brightness(1.1); }

.fwin__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid #2a2a25;
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #888;
  font-size: 16px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s ease 0.5s;
}
.fwin.is-reveal .fwin__close,
.fwin.is-hold   .fwin__close { opacity: 1; }

/* Apparitions séquencées des éléments du stack pendant le reveal */
.fwin.is-reveal .fwin__tournament,
.fwin.is-hold   .fwin__tournament { animation: fade-down 0.5s ease 0.1s forwards; }

.fwin.is-reveal .fwin__champion,
.fwin.is-hold   .fwin__champion { animation: fade-down 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 0.25s forwards; }

.fwin.is-reveal .fwin__trophy,
.fwin.is-hold   .fwin__trophy { animation: trophy-rise 0.9s cubic-bezier(0.2, 1.3, 0.4, 1) 0.5s forwards; }
.fwin.is-hold .fwin__cup { animation: trophy-float 3s ease-in-out 1.4s infinite; }

.fwin.is-reveal .fwin__winner,
.fwin.is-hold   .fwin__winner { animation: fade-down 0.5s ease 0.95s forwards; }

.fwin.is-reveal .fwin__subline,
.fwin.is-hold   .fwin__subline { animation: fade-down 0.4s ease 1.15s forwards; }

.fwin.is-reveal .fwin__stats,
.fwin.is-hold   .fwin__stats { animation: fade-down 0.5s ease 1.35s forwards; }

.fwin.is-reveal .fwin__ctas,
.fwin.is-hold   .fwin__ctas { animation: fade-down 0.5s ease 1.65s forwards; }

/* Keyframes */
@keyframes win-confetti {
  0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg) scale(var(--scale, 1)); }
  6%   { opacity: 1; }
  100% { opacity: 0; transform: translateY(120vh) translateX(var(--dx, 0px)) rotate(var(--rot, 360deg)) scale(var(--scale, 1)); }
}
@keyframes beam-sweep {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateX(-30%); opacity: 0; }
  50%      { transform: rotate(var(--rot, 0deg)) translateX(30%);  opacity: 1; }
}
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes trophy-rise {
  0%   { opacity: 0; transform: translateY(60px) scale(0.7) rotate(-6deg); }
  60%  { opacity: 1; transform: translateY(-8px) scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes trophy-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-6px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fwin__curtain { display: none; }
  .fwin__beam, .fwin__piece, .fwin__floor,
  .fwin__tournament, .fwin__champion, .fwin__trophy, .fwin__cup,
  .fwin__winner, .fwin__subline, .fwin__stats, .fwin__ctas, .fwin__close {
    animation: none !important;
    transition: opacity 0.2s ease !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FESTIVE MATCH WIN — animation dynamique gaming pour une victoire de match
   ═══════════════════════════════════════════════════════════════════ */
.fmwin {
  position: fixed;
  inset: 0;
  z-index: 9998; /* sous Festive180 (9999) et FestiveWin (10000) */
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(57,255,20,0.18) 0%, rgba(0,0,0,0.94) 70%);
  opacity: 1;
  transition: opacity 0.35s ease;
}
.fmwin.is-exiting { opacity: 0; }

.fmwin__flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(57,255,20,0.85), rgba(57,255,20,0.2) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}
.fmwin.is-flash .fmwin__flash { opacity: 1; }

.fmwin__lines {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0, transparent 14px,
    #39FF14 14px, #39FF14 15px,
    transparent 15px, transparent 30px
  );
}
.fmwin.is-reveal .fmwin__lines,
.fmwin.is-hold   .fmwin__lines {
  opacity: 0.12;
  animation: lines-slide 4s linear infinite;
}

.fmwin__sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fmwin__spark {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 999px;
  opacity: 0;
}
.fmwin.is-reveal .fmwin__sparks--burst .fmwin__spark {
  animation: spark-burst var(--dur, 1s) cubic-bezier(0.15, 0.7, 0.4, 1) var(--delay, 0s) forwards;
}
.fmwin.is-hold .fmwin__sparks--hold .fmwin__spark {
  animation: spark-burst var(--dur, 1s) cubic-bezier(0.15, 0.7, 0.4, 1) calc(var(--delay, 0s) + 1.8s) infinite;
  animation-delay: calc(var(--delay, 0s) + 0s);
}

.fmwin__stack {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 50px 22px 22px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.fmwin.is-reveal .fmwin__stack,
.fmwin.is-hold   .fmwin__stack { opacity: 1; }

.fmwin__top {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #888;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
}
.fmwin.is-reveal .fmwin__top,
.fmwin.is-hold   .fmwin__top { animation: fade-down 0.4s ease 0.1s forwards; }

.fmwin__title {
  margin-top: 14px;
  position: relative;
  text-align: center;
  opacity: 0;
}
.fmwin.is-reveal .fmwin__title,
.fmwin.is-hold   .fmwin__title { animation: slide-diag-in 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) 0.2s forwards; }

.fmwin__title-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -1.5px;
  color: #fff;
  text-transform: uppercase;
  text-shadow:
    0 0 18px #39FF14,
    0 0 36px rgba(57,255,20,0.7),
    0 0 70px rgba(57,255,20,0.4);
  -webkit-text-stroke: 1.5px #39FF14;
}
.fmwin__shine {
  position: absolute;
  left: 15%; right: 15%; bottom: 4px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #39FF14, #FFD24D, #39FF14, transparent);
  box-shadow: 0 0 10px #39FF14;
  border-radius: 3px;
  animation: shine-slide 2s ease-in-out infinite;
}

.fmwin__vs {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  opacity: 0;
}
.fmwin.is-reveal .fmwin__vs,
.fmwin.is-hold   .fmwin__vs { animation: fade-down 0.5s ease 0.55s forwards; }

.fmwin__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.5s ease;
}
.fmwin__player.is-winner { transform: scale(1.05); }
.fmwin__player.is-loser  { transform: scale(0.92); opacity: 0.35; filter: grayscale(0.8); }

.fmwin__avatar {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3a3a35, #2a2a25);
  border: 2.5px solid #2a2a25;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: #666;
  letter-spacing: 0.5px;
  transition: all 0.5s ease;
}
.fmwin__player.is-winner .fmwin__avatar {
  background: linear-gradient(135deg, #39FF14, #1e9a08);
  border-color: #39FF14;
  color: #0a0a0a;
  box-shadow: 0 0 24px rgba(57,255,20,0.6), 0 0 48px rgba(57,255,20,0.3);
}

.fmwin__badge {
  position: absolute;
  top: -6px; right: -6px;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #39FF14;
  border: 2px solid #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px #39FF14;
  animation: badge-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 1s backwards;
}

.fmwin__pname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #666;
  letter-spacing: 0.3px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  transition: color 0.5s ease;
}
.fmwin__player.is-winner .fmwin__pname { color: #fff; }

.fmwin__pcap {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #444;
  letter-spacing: 1.2px;
}
.fmwin__player.is-winner .fmwin__pcap { color: #888; }

.fmwin__center {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 0 4px;
}
.fmwin__vs-pill {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: #666;
  letter-spacing: 3px;
  padding: 2px 8px;
  border: 1px solid #2a2a25;
  border-radius: 4px;
}
.fmwin__score {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}
.fmwin__score-win {
  font-size: 38px;
  color: #39FF14;
  letter-spacing: -1px;
  text-shadow: 0 0 12px rgba(57,255,20,0.6);
}
.fmwin__score-sep { font-size: 18px; color: #444; }
.fmwin__score-lose {
  font-size: 38px;
  color: #666;
  letter-spacing: -1px;
}
.fmwin__score-cap {
  font-family: var(--font-mono);
  font-size: 8px;
  color: #555;
  letter-spacing: 1.2px;
}

.fmwin__ctas {
  margin-top: auto;
  display: flex;
  gap: 10px;
  opacity: 0;
}
.fmwin.is-reveal .fmwin__ctas,
.fmwin.is-hold   .fmwin__ctas { animation: fade-down 0.4s ease 1.4s forwards; }

.fmwin__btn {
  flex: 1;
  height: 46px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.15s;
}
.fmwin__btn:active { transform: scale(0.97); }
.fmwin__btn--continue {
  border: none;
  background: #39FF14;
  color: #0a0a0a;
  box-shadow: 0 0 18px rgba(57,255,20,0.5);
}
.fmwin__btn--continue:hover { filter: brightness(1.1); }

.fmwin__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid #2a2a25;
  background: rgba(10,10,10,0.7);
  color: #888;
  font-size: 14px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s ease 0.4s;
}
.fmwin.is-reveal .fmwin__close,
.fmwin.is-hold   .fmwin__close { opacity: 1; }

/* Keyframes spécifiques */
@keyframes spark-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  15%  { opacity: 1; }
  100% { opacity: 0;
         transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 0px))) scale(0.6); }
}
@keyframes slide-diag-in {
  0%   { opacity: 0; transform: translateX(-40px) translateY(-10px) skewX(-12deg); }
  100% { opacity: 1; transform: translateX(0) translateY(0) skewX(0); }
}
@keyframes badge-pop {
  0%   { opacity: 0; transform: scale(0) rotate(-180deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes lines-slide {
  from { background-position: 0 0; }
  to   { background-position: 60px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fmwin__flash, .fmwin__lines, .fmwin__sparks { display: none; }
  .fmwin__top, .fmwin__title, .fmwin__shine, .fmwin__vs, .fmwin__ctas, .fmwin__close,
  .fmwin__player, .fmwin__avatar, .fmwin__pname, .fmwin__badge {
    animation: none !important;
    transition: opacity 0.2s ease !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Liste des manches déjà jouées */
.legs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  max-height: 130px;
  overflow-y: auto;
}
.leg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-2);
}
.leg-row__num    { color: var(--text-4); }
.leg-row__winner { color: var(--accent-green); font-weight: 700; text-transform: uppercase; font-family: var(--font-display); font-size: 12px; }

/* Card "match terminé" */
.match-result {
  background: var(--surface);
  border: 1px solid var(--accent-green);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  margin-bottom: 14px;
  box-shadow: 0 0 12px rgba(57,255,20,0.15);
}
.match-result__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.match-result__winner {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.3px;
  color: var(--accent-green);
  text-shadow: 0 0 12px rgba(57,255,20,0.4);
  text-transform: uppercase;
}

/* Sélecteur de jeu */
.jeu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.btn-jeu {
  padding: 14px 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text);
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color 0.15s, background 0.15s;
}
.btn-jeu:hover  { border-color: var(--accent-orange); }
.btn-jeu.is-selected {
  border-color: var(--accent-orange);
  background: rgba(255,106,0,0.1);
  color: var(--accent-orange);
}

/* Bloc "Forfait / absent" dans le panel "Démarrer le match" */
.mp__forfait {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.mp__forfait-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.mp__forfait-help {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-4);
  margin-bottom: 10px;
}
.mp__forfait-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mp__forfait-grid .btn-adm {
  height: 40px;
  padding: 0 8px;
  font-size: 11px;
  white-space: normal;
  line-height: 1.15;
}
.btn-adm--ghost-danger {
  background: transparent;
  border-color: rgba(220, 60, 60, 0.45);
  color: #ff7a7a;
}
.btn-adm--ghost-danger:hover {
  background: rgba(220, 60, 60, 0.08);
  border-color: rgba(220, 60, 60, 0.75);
}

/* Petites infos */
.kv-row {
  display: flex; justify-content: space-between; padding: 6px 0;
  font-size: 12px; color: var(--text-3);
}
.kv-row strong { color: var(--text); font-weight: 600; }
.kv-row + .kv-row { border-top: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════════
   LIVE — bandeau + indicator pulsant
   ═══════════════════════════════════════════════════════════════════ */
.live-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(57,255,20,0.08);
  border: 1px solid rgba(57,255,20,0.4);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--accent-green);
  text-transform: uppercase;
}
.live-banner__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
  animation: pulse 1.5s ease-in-out infinite;
}
.live-banner--done {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.2);
  color: var(--text-2);
}
.live-banner__upd {
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--text-4);
}

/* Lien retour / nav légère */
.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 8px;
  gap: 10px;
  flex-wrap: wrap;
}
.live-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Bouton de partage du live */
.btn-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-share:hover  { color: var(--text); border-color: var(--text-3); background: rgba(255,255,255,0.04); }
.btn-share:active { transform: scale(0.96); }
.btn-share svg    { flex-shrink: 0; }

/* Padding latéral sur la vue live (le bracket-wrap--full a un margin -14px
   pour étendre aux bords ; on lui donne un parent paddé pour qu'il se cale
   joliment au-dessus avec un peu de respiration sur les côtés). */
[data-live-bracket] {
  padding: 0 18px;
}

/* Tailles spécifiques live : pseudo et score 20% plus petits que sur la gestion
   (on a plus de cartes visibles d'un coup et pas de boutons d'action). */
[data-live-bracket] .mcard__player-name { font-size: 19px; }
[data-live-bracket] .mcard__score       { font-size: 45px; }
@media (max-width: 480px) {
  [data-live-bracket] .mcard__player-name { font-size: 17px; }
  [data-live-bracket] .mcard__score       { font-size: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════
   COURBE ELO — SVG dans /mon-compte.php
   ═══════════════════════════════════════════════════════════════════ */
.elo-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 22px;
}
.elo-chart__title {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.elo-chart__title span:last-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--accent-green);
  letter-spacing: 0;
}
.elo-chart__svg {
  width: 100%;
  height: 120px;
  display: block;
}
.elo-chart__empty {
  text-align: center;
  color: var(--text-5);
  font-size: 12px;
  padding: 24px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   PWA install bandeau
   ═══════════════════════════════════════════════════════════════════ */
.install-banner {
  position: fixed;
  left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom));
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--accent-orange);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px rgba(255,106,0,0.18);
  z-index: 90;
  transform: translateY(120%);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.install-banner.is-open { transform: translateY(0); }
.install-banner__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-orange);
  border-radius: 8px;
  color: #0a0a0a;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.install-banner__txt {
  flex: 1; min-width: 0;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.3;
}
.install-banner__txt strong { display: block; font-weight: 700; letter-spacing: 0.2px; }
.install-banner__txt small  { color: var(--text-3); font-size: 11px; }
.install-banner__close {
  background: none; border: none; color: var(--text-3); font-size: 18px;
  width: 28px; height: 28px; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   PROFIL — boutons de section
   ═══════════════════════════════════════════════════════════════════ */
.profile__edit {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-orange);
}

/* ═══════════════════════════════════════════════════════════════════
   AVATAR UPLOAD — bloc dans profil-edit
   ═══════════════════════════════════════════════════════════════════ */
.avatar-section {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.avatar-preview {
  flex-shrink: 0;
  width: 96px; height: 96px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-lo));
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: #0a0a0a;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-controls {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   TOGGLE 180 (dans le panel match)
   ═══════════════════════════════════════════════════════════════════ */
.leg-180-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}
.leg-180-toggle:hover { border-color: var(--border-2); }
.leg-180-toggle input[type="checkbox"] { display: none; }
.leg-180-toggle__pip {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-2);
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.leg-180-toggle input:checked + .leg-180-toggle__pip {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  box-shadow: 0 0 12px rgba(255,106,0,0.5);
}
.leg-180-toggle input:checked + .leg-180-toggle__pip::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #0a0a0a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.leg-180-toggle__txt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-2);
  text-transform: uppercase;
}
.leg-180-toggle__txt strong {
  color: var(--accent-orange);
  font-weight: 700;
  font-size: 14px;
}
.leg-180-toggle input:checked ~ .leg-180-toggle__txt {
  color: var(--accent-orange);
  text-shadow: 0 0 8px rgba(255,106,0,0.4);
}

/* ═══════════════════════════════════════════════════════════════════
   DEMANDE ORGANISATEUR (encart sur /mon-compte.php)
   ═══════════════════════════════════════════════════════════════════ */
.org-request {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 18px 0 0;
}
.org-request__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--text);
}
.org-request__sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN — Liste des demandes organisateur (cards)
   ═══════════════════════════════════════════════════════════════════ */
.orgreq-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
.orgreq-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orgreq-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.orgreq-card__date {
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: 0.5px;
}

.orgreq-card__id { display: flex; flex-direction: column; gap: 3px; }
.orgreq-card__pseudo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  margin: 0;
}
.orgreq-card__name {
  font-size: 13px;
  color: var(--text-2);
}
.orgreq-card__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-4);
  margin-top: 2px;
}
.orgreq-card__tel { color: var(--accent-orange); text-decoration: none; }
.orgreq-card__tel:hover { text-decoration: underline; }

.orgreq-card__motiv {
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent-orange);
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
  white-space: pre-wrap;
}
.orgreq-card__motiv--empty {
  font-style: normal;
  color: var(--text-5);
  border-left-color: var(--border-2);
  font-size: 12px;
}

.orgreq-card__validated {
  font-size: 11px;
  color: var(--text-4);
}

.orgreq-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN — Cards Joueurs
   ═══════════════════════════════════════════════════════════════════ */
.joueurs-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.joueur-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s, transform 0.06s;
}
.joueur-card:hover { border-color: var(--border-2); }

.joueur-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.joueur-card__elo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent-green);
}
.joueur-card__elo small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-4);
  margin-left: 3px;
}

.joueur-card__id { display: flex; flex-direction: column; gap: 2px; }
.joueur-card__pseudo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  margin: 0;
}
.joueur-card__name {
  font-size: 13px;
  color: var(--text-3);
}

.joueur-card__contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-3);
  word-break: break-word;
}
.joueur-card__tel { color: var(--accent-orange); text-decoration: none; }
.joueur-card__tel:hover { text-decoration: underline; }

.joueur-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--text-4);
  text-transform: uppercase;
}
.joueur-card__stats strong { color: var(--text); font-weight: 700; }
.joueur-card__dot { color: var(--text-5); }

.joueur-card__actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN — Cards Tournois (liste)
   ═══════════════════════════════════════════════════════════════════ */
.tournois-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.tournoi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s;
}
.tournoi-card:hover { border-color: var(--border-2); }

.tournoi-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.tournoi-card__fmt {
  padding: 3px 8px;
  background: var(--bg-phone);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--accent-green);
}

.tournoi-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  margin: 0;
}

.tournoi-card__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tournoi-card__when {
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--text-2);
  text-transform: uppercase;
}
.tournoi-card__loc {
  font-size: 12px;
  color: var(--text-3);
}

.tournoi-card__progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tournoi-card__bar {
  position: relative;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.tournoi-card__fill {
  position: absolute; inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-orange), var(--accent-green));
  box-shadow: 0 0 8px rgba(255,106,0,0.4);
}
.tournoi-card__counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-3);
}
.tournoi-card__counter strong {
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}
.tournoi-card__waiting { color: var(--accent-orange); }

.tournoi-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTOCOMPLETE (recherche joueur)
   ═══════════════════════════════════════════════════════════════════ */
.autocomplete__list {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
}
.autocomplete__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
}
.autocomplete__item:last-child { border-bottom: none; }
.autocomplete__item:hover, .autocomplete__item:focus {
  background: rgba(255,106,0,0.08);
  color: var(--text);
  outline: none;
}
.autocomplete__item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--text);
}
.autocomplete__item span {
  display: block;
  font-size: 12px;
  color: var(--text-3);
}
.autocomplete__item em {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  color: var(--text-4);
}
.autocomplete__item mark {
  background: rgba(255,106,0,0.25);
  color: var(--accent-orange);
  padding: 0 1px;
  border-radius: 2px;
}
.autocomplete__empty {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-5);
}
.autocomplete__selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(57,255,20,0.08);
  border: 1px solid rgba(57,255,20,0.4);
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-green);
  margin-top: 4px;
}
.autocomplete__clear {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  width: 26px; height: 26px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.autocomplete__clear:hover { background: var(--bg-phone); color: var(--accent-orange); }

/* ═══════════════════════════════════════════════════════════════════
   ADMIN — Cards Inscrits (sur tournoi-inscrits)
   ═══════════════════════════════════════════════════════════════════ */
.inscrits-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.inscrit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inscrit-card--pending  { border-color: rgba(255,106,0,0.4); background: rgba(255,106,0,0.05); }
.inscrit-card--refused  { opacity: 0.7; }
.inscrit-card--waitlist { border-color: rgba(255,138,42,0.3); background: rgba(255,138,42,0.04); }
.inscrit-card--att-present { border-color: rgba(57,255,20,0.35); background: rgba(57,255,20,0.05); }
.inscrit-card--att-absent  { border-color: rgba(255,106,0,0.4); background: rgba(255,106,0,0.04); opacity: 0.75; }

/* Badge score de confiance (à côté du pseudo) */
.trust {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid;
}
.trust--high { color: var(--accent-green);  border-color: rgba(57,255,20,0.4);  background: rgba(57,255,20,0.08); }
.trust--mid  { color: var(--accent-orange); border-color: rgba(255,106,0,0.4); background: rgba(255,106,0,0.08); }
.trust--low  { color: #ff4040;              border-color: rgba(255,64,64,0.5);  background: rgba(255,64,64,0.08); }

/* Badge attendance (présent/absent dans la card) */
.attendance-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid;
}
.attendance-badge--present { background: rgba(57,255,20,0.12);  color: var(--accent-green);  border-color: rgba(57,255,20,0.4); }
.attendance-badge--absent  { background: rgba(255,106,0,0.12); color: var(--accent-orange); border-color: rgba(255,106,0,0.4); }
.inscrit-card__pos {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 4px;
  border-radius: 4px;
  background: var(--accent-orange);
  color: #0a0a0a;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.inscrit-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.inscrit-card__pseudo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inscrit-card__elo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-green);
  flex-shrink: 0;
}
.inscrit-card__elo small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.8px;
  color: var(--text-4);
  margin-left: 2px;
}
.inscrit-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   MODALE DE CONFIRMATION (remplace confirm() natif)
   ═══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,106,0,0.05);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.2,0.9,0.3,1);
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); }
.modal__msg {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.btn-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  height: 38px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s, transform 0.06s;
}
.btn-modal:hover  { filter: brightness(1.1); }
.btn-modal:active { transform: scale(0.97); }
.btn-modal--ghost   { background: transparent; border-color: var(--border-2); color: var(--text-2); }
.btn-modal--primary { background: var(--accent-green); color: #0a0a0a; box-shadow: 0 0 12px rgba(57,255,20,0.3); }
.btn-modal--danger  { background: var(--accent-orange); color: #0a0a0a; box-shadow: 0 0 12px rgba(255,106,0,0.35); }

/* ─── Accessibilité / SEO ──────────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Bloc texte SEO discret en bas des pages publiques */
.seo-block {
  padding: 28px 18px 32px;
  margin-top: 18px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text-2, #9aa0a6);
  font-size: 13px;
  line-height: 1.6;
}
.seo-block h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--text, #e8eaed);
}
.seo-block p { margin: 0 0 10px; }
.seo-block a { color: var(--accent-green); text-decoration: none; }
.seo-block a:hover { text-decoration: underline; }
.seo-block__links { margin-top: 14px; font-size: 12px; }
.seo-block__links a { margin: 0 4px; }

/* Pages éditoriales (À propos, FAQ) */
.page-editorial {
  padding: 0 18px 32px;
  color: var(--text, #e8eaed);
  line-height: 1.65;
  font-size: 15px;
  max-width: 720px;
}
.page-editorial h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  margin: 6px 0 14px;
}
.page-editorial h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 24px 0 8px;
  color: var(--accent-green);
}
.page-editorial h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  margin: 18px 0 6px;
}
.page-editorial p   { margin: 0 0 12px; }
.page-editorial ul,
.page-editorial ol  { margin: 0 0 14px; padding-left: 22px; }
.page-editorial li  { margin: 0 0 6px; }
.page-editorial a   { color: var(--accent-green); text-decoration: none; }
.page-editorial a:hover { text-decoration: underline; }

/* ─── Glossaire (liste de termes <dl>) ───────────────────────────── */
.glossaire {
  margin: 0 0 18px;
  padding: 0;
}
.glossaire dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--accent-orange, #ff6a00);
  margin: 18px 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
.glossaire dt:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.glossaire dd {
  margin: 0;
  padding: 0;
  color: var(--text-2, rgba(232,234,237,0.85));
  line-height: 1.6;
}

.faq-item {
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--surface, rgba(255,255,255,0.02));
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  float: right;
  color: var(--accent-green);
  font-weight: 700;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 10px 0 0; color: var(--text-2, #9aa0a6); font-size: 14px; line-height: 1.55; }

/* Footer SEO links */
.footer-seo {
  padding: 18px 18px 28px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-2, #9aa0a6);
}
.footer-seo a {
  color: inherit;
  text-decoration: none;
  margin: 0 6px;
}
.footer-seo a:hover { color: var(--accent-green); }

/* Bouton "Installer l'app" en pied de page (PWA) */
.footer-seo__pwa { margin-top: 12px; }
.footer-seo__pwa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255,106,0,0.45);
  background: rgba(255,106,0,0.08);
  color: var(--accent-orange);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.footer-seo__pwa-btn:hover {
  background: rgba(255,106,0,0.18);
  border-color: var(--accent-orange);
}

/* Modale install PWA */
.pwa-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.pwa-modal[hidden] { display: none; }
.pwa-modal__card {
  background: var(--bg-phone, #0a0a0a);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 16px;
  padding: 20px 18px 22px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.pwa-modal__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pwa-modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  margin: 0 28px 14px 0;
}
.pwa-modal__intro {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 0 12px;
}
.pwa-modal__steps {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 14px;
  padding-left: 22px;
}
.pwa-modal__steps li { margin-bottom: 8px; }
.pwa-modal__steps strong { color: var(--text); }
.pwa-modal__share {
  display: inline-block;
  vertical-align: middle;
  margin: -2px 2px 0;
  color: var(--accent-orange);
}
.pwa-modal__note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-3);
  margin: 0;
}

/* ─── Bandeau cookies (info-only, non bloquant) ─────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: rgba(15, 17, 21, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  color: var(--text, #e8eaed);
  font-size: 13px;
  line-height: 1.45;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
  flex: 1;
  min-width: 200px;
  margin: 0;
}
.cookie-banner__text a {
  color: var(--accent-green);
  text-decoration: underline;
}
.cookie-banner__btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--accent-green);
  background: var(--accent-green);
  color: #0a0a0a;
  border-radius: 8px;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s, transform 0.06s;
}
.cookie-banner__btn:hover  { filter: brightness(1.1); }
.cookie-banner__btn:active { transform: scale(0.97); }

@media (max-width: 480px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner__btn { width: 100%; padding: 10px; }
}

/* ─── Liste des inscrits dans le bottom-sheet ───────────────────────────── */
.sheet-inscrits {
  margin: 14px 0 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  background: var(--surface, rgba(255,255,255,0.02));
  overflow: hidden;
}
.sheet-inscrits__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text, #e8eaed);
  user-select: none;
}
.sheet-inscrits__toggle::-webkit-details-marker { display: none; }
.sheet-inscrits__toggle-count {
  margin-left: 4px;
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.sheet-inscrits__toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  color: var(--text-2, #9aa0a6);
  font-size: 14px;
}
.sheet-inscrits[open] .sheet-inscrits__toggle-icon { transform: rotate(180deg); }
.sheet-inscrits[open] .sheet-inscrits__toggle {
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.sheet-inscrits__section { padding: 10px 12px; }
.sheet-inscrits__section + .sheet-inscrits__section {
  border-top: 1px dashed var(--border, rgba(255,255,255,0.08));
}
.sheet-inscrits__section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--text-3, #6b7075);
  padding: 4px 4px 8px;
}
.sheet-inscrits__section-label--orange { color: var(--accent-orange); }

.sheet-inscrits__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sheet-inscrits__item { margin: 0; }
.sheet-inscrits__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.sheet-inscrits__link:hover,
.sheet-inscrits__link:focus-visible {
  background: rgba(255,255,255,0.04);
  outline: none;
}
.sheet-inscrits__rank {
  flex: 0 0 auto;
  width: 22px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3, #6b7075);
  letter-spacing: 0.5px;
}
.sheet-inscrits__avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(57,255,20,0.15), rgba(255,106,0,0.10));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--text, #e8eaed);
  letter-spacing: 0.3px;
}
.sheet-inscrits__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.sheet-inscrits__pseudo {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #e8eaed);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-inscrits__elo {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-green);
  letter-spacing: 0.5px;
}
.sheet-inscrits__item--waitlist .sheet-inscrits__rank { color: var(--accent-orange); }
.sheet-inscrits__item--waitlist .sheet-inscrits__elo  { color: var(--accent-orange); }

/* ═══════════════════════════════════════════════════════════════════
   Équipes — badge [TAG] et bloc "Mon équipe" sur mon-compte.php
   ═══════════════════════════════════════════════════════════════════ */

/* Badge tag réutilisable, à coller à côté d'un pseudo. */
.team-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent-orange);
  background: rgba(255,106,0,0.10);
  border: 1px solid rgba(255,106,0,0.35);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.team-tag--lg {
  font-size: 14px;
  padding: 3px 10px;
  letter-spacing: 1.5px;
}

/* Bloc "Mon équipe" sur mon-compte.php */
.team-block { margin-top: 28px; }
.team-block__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 22px 0 12px;
}
.team-block__subtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 18px 0 8px;
}
.team-block__sub {
  color: var(--text-3);
  font-size: 13px;
  margin: 4px 0 10px;
}
.team-block__badge {
  background: var(--accent-orange);
  color: #000;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 7px;
  letter-spacing: 0;
}

/* Liste des invitations reçues */
.team-invites { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.team-invite {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.team-invite__head { display: flex; align-items: center; gap: 8px; }
.team-invite__nom { color: var(--text); font-size: 15px; font-weight: 600; }
.team-invite__sub { color: var(--text-3); font-size: 12px; margin: 4px 0 10px; }
.team-invite__actions { display: flex; gap: 8px; }

/* Résultats de recherche (autocomplete invite) */
.team-invite__results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.team-invite__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.team-invite__result:hover { border-color: var(--accent-orange); }
.team-invite__result-btn {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.team-invite__empty { color: var(--text-3); font-size: 13px; padding: 8px 0; }

/* Carte équipe */
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.team-card__head { display: flex; align-items: center; gap: 14px; }
.team-card__head-text { flex: 1; min-width: 0; }
.team-card__nom {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  letter-spacing: 0.3px;
}
.team-card__nom:hover { color: var(--accent-orange); }
.team-card__sub { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.team-card__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* Liste des membres */
.team-members {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.team-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.team-member__main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.team-member__pseudo { color: var(--text); font-size: 14px; font-weight: 500; }
.team-member__pseudo em { color: var(--text-3); font-style: normal; font-size: 11px; }
.team-member__role {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-2);
  color: var(--text-3);
}
.team-member__role--createur  { color: var(--accent-orange); border-color: rgba(255,106,0,0.4); background: rgba(255,106,0,0.08); }
.team-member__role--capitaine { color: var(--accent-green);  border-color: rgba(57,255,20,0.4);  background: rgba(57,255,20,0.06); }

/* Invitations envoyées en attente */
.team-pending { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.team-pending__row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px;
  color: var(--text-3); font-size: 13px;
}

/* Bouton "petit" (utilisé partout dans le bloc équipe) */
.btn--sm {
  font-size: 11px;
  padding: 6px 12px;
  letter-spacing: 1px;
}

/* Engagements 2v2 sur mon-equipe */
.team-engagements { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.team-engagement { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.team-engagement__link { display: block; padding: 10px 12px; text-decoration: none; color: var(--text); }
.team-engagement__link:hover { border-color: var(--accent-orange); }
.team-engagement__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.team-engagement__sub { color: var(--text-3); font-size: 12px; margin-top: 4px; }
.team-engagement__pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.team-engagement__pill--ok      { color: var(--accent-green);  background: rgba(57,255,20,0.08);  border: 1px solid rgba(57,255,20,0.4); }
.team-engagement__pill--pending { color: var(--accent-orange); background: rgba(255,106,0,0.08); border: 1px solid rgba(255,106,0,0.4); }

/* ═══════════════════════════════════════════════════════════════════
   Page fonctionnalités — grille de cartes + liste d'avantages
   ═══════════════════════════════════════════════════════════════════ */

.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}
.feat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  transition: border-color .15s, transform .15s;
}
.feat-card:hover { border-color: var(--accent-orange); transform: translateY(-1px); }
.feat-card__icon { font-size: 24px; margin-bottom: 6px; }
.feat-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: var(--text);
  margin: 0 0 6px;
}
.feat-card__body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}
.feat-card__body code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(255,106,0,0.10);
  color: var(--accent-orange);
  padding: 1px 5px;
  border-radius: 3px;
}

.feat-pros {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 24px;
}
.feat-pro {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.feat-pro__icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-green);
  color: #000;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.feat-pro strong { color: var(--text); }

.feat-cta {
  margin-top: 24px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(255,106,0,0.08), rgba(57,255,20,0.04));
  border: 1px solid rgba(255,106,0,0.3);
  border-radius: 14px;
  text-align: center;
}
.feat-cta .btn { margin: 4px; }

/* ─────────── Bottom Nav (app-like) ─────────── */
body {
  padding-bottom: 72px;
}
@supports (padding: max(0px)) {
  body {
    padding-bottom: max(72px, calc(60px + env(safe-area-inset-bottom)));
  }
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav__inner {
  display: flex;
  width: 100%;
  max-width: 480px;
}
.bottom-nav__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 8px;
  text-decoration: none;
  color: var(--text-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color .15s ease, transform .15s ease;
  position: relative;
}
.bottom-nav__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.bottom-nav__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.bottom-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bottom-nav__item:hover {
  color: var(--text);
}
.bottom-nav__item--active {
  color: var(--accent-orange);
}
.bottom-nav__item--active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--accent-orange);
  border-radius: 0 0 2px 2px;
}
.bottom-nav__item--active:hover {
  color: var(--accent-orange-hi);
}
.bottom-nav__item:active {
  transform: scale(0.94);
}