/* SVG Team Hub — Sauvagerie Gaming
   Direction : sombre, nette, violet utilisé comme signal, pas comme décor. */
:root {
  --bg: #08070b;
  --bg-2: #0e0c14;
  --surface: #14111c;
  --surface-2: #1b1726;
  --line: #2a2438;
  --line-2: #3a3250;
  --primary: #2c263f;          /* violet foncé principal */
  --accent: #4c004c;           /* violet intense secondaire */
  --glow: #b14cff;             /* accent lumineux, avec modération */
  --glow-soft: rgba(177, 76, 255, .14);
  --text: #f1eee8;             /* blanc cassé */
  --muted: #9a94a8;
  --faint: #6b657a;
  --win: #2fd47a;
  --win-bg: rgba(47, 212, 122, .12);
  --loss: #ff4d5e;
  --loss-bg: rgba(255, 77, 94, .12);
  --soon: #ff9a2e;
  --soon-bg: rgba(255, 154, 46, .13);
  --info-bg: rgba(177, 76, 255, .12);
  --radius: 10px;
  --radius-sm: 7px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Chakra Petch', 'Inter', system-ui, sans-serif;
  --sidebar: 236px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; margin: 0; line-height: 1.2; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px; }
.brand-logo { width: 38px; height: 38px; flex: none; }
.brand-logo img, .brand-logo svg { width: 100%; height: 100%; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.1; }
.brand-sub { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); padding: 14px 10px 6px; }
.nav-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 500; transition: background .15s, color .15s; position: relative;
}
.nav-link:hover { background: var(--surface); color: var(--text); }
.nav-link.active { background: var(--primary); color: var(--text); }
.nav-link.active::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--glow); }
.nav-link svg { width: 18px; height: 18px; flex: none; }
.nav-badge { margin-left: auto; background: var(--glow); color: #120018; font-size: .7rem; font-weight: 700; border-radius: 99px; padding: 0 7px; min-width: 20px; text-align: center; }
.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); }
.user-chip:hover { background: var(--surface); }
.user-chip .meta { min-width: 0; }
.user-chip .name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .role { font-size: .74rem; color: var(--muted); }

.main { min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 60px; max-width: 1280px; width: 100%; }
.topbar { display: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head .eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--glow); font-weight: 600; margin-bottom: 4px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Mobile ---------- */
.tabbar { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
    padding: 10px 16px; background: rgba(8, 7, 11, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  }
  .topbar .brand { padding: 0; }
  .topbar .brand-logo { width: 30px; height: 30px; }
  .topbar .spacer { flex: 1; }
  .main { padding: 18px 16px 100px; }
  h1 { font-size: 1.35rem; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: rgba(14, 12, 20, .97); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .66rem; color: var(--muted); padding: 5px 0; border-radius: 8px; position: relative; }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a.active { color: var(--text); }
  .tabbar a.active svg { color: var(--glow); }
  .tabbar .dot { position: absolute; top: 3px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--glow); }
}
.icon-btn { background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px; cursor: pointer; color: var(--muted); position: relative; display: inline-flex; }
.icon-btn:hover { color: var(--text); background: var(--surface); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--glow); }

/* ---------- Cartes & grilles ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-head h2 { font-size: 1rem; }
.card-head .link { font-size: .82rem; color: var(--muted); }
.card-head .link:hover { color: var(--glow); }
.card.hoverable { transition: border-color .15s, transform .15s, background .15s; cursor: pointer; }
.card.hoverable:hover { border-color: var(--line-2); background: var(--surface-2); }
.card.flush { padding: 0; overflow: hidden; }
.card-section { padding: 16px 18px; border-top: 1px solid var(--line); }
.card-section:first-child { border-top: 0; }

.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat .label { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.stat .value { font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.stat .sub { font-size: .8rem; color: var(--muted); }
.stat.win .value { color: var(--win); }
.stat.loss .value { color: var(--loss); }
.stat.soon .value { color: var(--soon); }

/* Carte "prochain événement" */
.next {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(76, 0, 76, .55), transparent 55%), var(--surface);
}
.next .kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.next .title { font-family: var(--display); font-size: 1.3rem; font-weight: 700; margin: 8px 0 2px; }
.next .vs { color: var(--muted); font-weight: 500; }
.next .when { color: var(--text); font-weight: 500; }
.countdown { font-family: var(--display); font-size: .82rem; font-weight: 600; }

.empty { text-align: center; color: var(--muted); padding: 28px 14px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.empty svg { width: 28px; height: 28px; margin: 0 auto 8px; color: var(--faint); }
.empty strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; line-height: 1.6; }
.badge.win, .badge.going { color: var(--win); background: var(--win-bg); border-color: transparent; }
.badge.loss, .badge.absent, .badge.urgent, .badge.cancelled { color: var(--loss); background: var(--loss-bg); border-color: transparent; }
.badge.soon, .badge.pending, .badge.important, .badge.postponed { color: var(--soon); background: var(--soon-bg); border-color: transparent; }
.badge.accent { color: #e3c2ff; background: var(--info-bg); border-color: transparent; }
.badge.solid { background: var(--primary); color: var(--text); border-color: transparent; }
.type-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.t-official { background: var(--glow); } .t-scrim { background: #6aa7ff; } .t-training { background: var(--win); }
.t-tournament { background: #ffd34d; } .t-meeting { background: #9a94a8; } .t-other { background: #d58cff; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 600; font-size: .88rem;
  cursor: pointer; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; min-height: 38px;
}
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: #6d1a6d; }
.btn.primary:hover { background: #5e0a5e; border-color: var(--glow); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: var(--surface-2); }
.btn.danger { color: var(--loss); }
.btn.danger:hover { border-color: var(--loss); }
.btn.sm { padding: 5px 10px; min-height: 30px; font-size: .8rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.block { width: 100%; }

/* Boutons de présence : gros et accessibles au pouce */
.rsvp { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.rsvp button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; font-weight: 600; font-size: .85rem; transition: all .15s;
}
.rsvp button svg { width: 22px; height: 22px; }
.rsvp button:hover { border-color: var(--muted); }
.rsvp button.on.going { background: var(--win-bg); border-color: var(--win); color: var(--win); }
.rsvp button.on.absent { background: var(--loss-bg); border-color: var(--loss); color: var(--loss); }
.rsvp button.on.pending { background: var(--soon-bg); border-color: var(--soon); color: var(--soon); }
.rsvp button[disabled] { opacity: .45; cursor: not-allowed; }
.rsvp-mini { display: inline-flex; gap: 4px; }
.rsvp-mini button { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 7px; padding: 4px 9px; cursor: pointer; font-size: .78rem; font-weight: 600; }
.rsvp-mini button.on.going { color: var(--win); border-color: var(--win); background: var(--win-bg); }
.rsvp-mini button.on.absent { color: var(--loss); border-color: var(--loss); background: var(--loss-bg); }

/* Barre de répartition présences */
.att-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--line); }
.att-bar span { display: block; height: 100%; }
.att-bar .g { background: var(--win); } .att-bar .a { background: var(--loss); } .att-bar .p { background: var(--soon); opacity: .7; }
.att-legend { display: flex; gap: 14px; font-size: .82rem; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.att-legend b { color: var(--text); font-family: var(--display); }
.att-legend .g b { color: var(--win); } .att-legend .a b { color: var(--loss); } .att-legend .p b { color: var(--soon); }

/* ---------- Listes ---------- */
.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); min-width: 0; }
.row:first-child { border-top: 0; }
.row.link { cursor: pointer; border-radius: 6px; }
.row.link:hover .row-title { color: var(--glow); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.row-sub { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-tile { width: 46px; flex: none; text-align: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 0; }
.date-tile .d { font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
.date-tile .m { font-size: .66rem; text-transform: uppercase; color: var(--muted); letter-spacing: .06em; }
.result-pill { font-family: var(--display); font-weight: 700; padding: 3px 10px; border-radius: 6px; min-width: 52px; text-align: center; }
.result-pill.win { color: var(--win); background: var(--win-bg); }
.result-pill.loss { color: var(--loss); background: var(--loss-bg); }
.result-pill.draw { color: var(--muted); background: var(--surface-2); }

/* Tableaux → listes sur mobile */
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.click { cursor: pointer; } .table tr.click:hover td { background: var(--surface-2); }
@media (max-width: 700px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .table td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; }
  .table td::before { content: attr(data-label); color: var(--muted); font-size: .78rem; }
  .table td[data-label=""]::before { content: none; }
}

/* ---------- Avatars & joueurs ---------- */
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; font-family: var(--display); font-weight: 700; flex: none; overflow: hidden; color: #e3c2ff; font-size: .9rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 84px; height: 84px; font-size: 1.7rem; border: 2px solid var(--line-2); }
.avatar.sm { width: 28px; height: 28px; font-size: .72rem; }
.player-card { display: flex; flex-direction: column; gap: 12px; }
.player-card .top { display: flex; gap: 12px; align-items: center; }
.player-card .nick { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.player-card .riot { font-size: .82rem; color: var(--muted); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .86rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: .76rem; padding: 2px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; }
.role-icon { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--muted); }
.source { font-size: .72rem; color: var(--faint); display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 14px; }
.form-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .form-row, .form-row.three { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label, .field .lbl { font-size: .8rem; font-weight: 600; color: var(--muted); }
.field .hint { font-size: .76rem; color: var(--faint); }
.field .err { font-size: .76rem; color: var(--loss); }
.input, select.input, textarea.input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 11px;
  min-height: 40px; transition: border-color .15s, box-shadow .15s;
}
textarea.input { min-height: 90px; resize: vertical; }
.input:focus { outline: none; border-color: var(--glow); box-shadow: 0 0 0 3px var(--glow-soft); }
.input.invalid { border-color: var(--loss); }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: .9rem; padding: 4px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--glow); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .84rem; }
.seg button.on { background: var(--primary); color: var(--text); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filters .input { width: auto; min-width: 140px; flex: 1 1 140px; }
.map-row { display: grid; grid-template-columns: 1.4fr .7fr .7fr 1fr auto; gap: 8px; align-items: end; }
@media (max-width: 600px) { .map-row { grid-template-columns: 1fr 1fr; } }

/* ---------- Calendrier ---------- */
.cal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-head .period { font-family: var(--display); font-weight: 700; font-size: 1.15rem; min-width: 170px; text-transform: capitalize; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); gap: 1px; }
.cal .dow { background: var(--bg-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px; text-align: center; }
.cal .day { background: var(--surface); min-height: 108px; padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; }
.cal .day:hover { background: var(--surface-2); }
.cal .day.other { background: var(--bg-2); }
.cal .day.other .num { color: var(--faint); }
.cal .num { font-size: .8rem; font-weight: 600; color: var(--muted); }
.cal .day.today .num { background: var(--glow); color: #120018; border-radius: 99px; width: 24px; height: 24px; display: grid; place-items: center; }
.cal .ev { display: flex; gap: 5px; align-items: center; font-size: .74rem; padding: 2px 5px; border-radius: 5px; background: var(--surface-2); white-space: nowrap; overflow: hidden; min-width: 0; }
.cal .ev span.t { overflow: hidden; text-overflow: ellipsis; }
.cal .ev:hover { background: var(--primary); }
.cal .ev.cancelled { text-decoration: line-through; opacity: .55; }
.cal .more { font-size: .72rem; color: var(--muted); padding-left: 4px; }
@media (max-width: 700px) {
  .cal .day { min-height: 54px; padding: 4px; align-items: center; }
  .cal .ev { display: none; }
  .cal .dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
  .cal .more { display: none; }
}
@media (min-width: 701px) { .cal .dots { display: none; } }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.week .col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; min-height: 220px; min-width: 0; }
.week .col.today { border-color: var(--glow); }
.week .col-head { font-size: .78rem; color: var(--muted); margin-bottom: 8px; text-transform: capitalize; }
.week .col-head b { display: block; font-family: var(--display); color: var(--text); font-size: 1.1rem; }
.week .wev { display: block; padding: 7px 8px; border-radius: 7px; background: var(--surface-2); border-left: 3px solid var(--glow); margin-bottom: 6px; font-size: .8rem; }
.week .wev:hover { background: var(--primary); }
.week .wev .h { color: var(--muted); font-size: .74rem; }
.week .wev.cancelled { opacity: .5; text-decoration: line-through; }
@media (max-width: 900px) { .week { grid-template-columns: 1fr; } .week .col { min-height: 0; } }

/* ---------- Modale, toasts ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; animation: fade .15s; }
.modal { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; width: 100%; max-width: 620px; animation: rise .18s ease-out; }
.modal.sm { max-width: 440px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
@media (max-width: 600px) { .modal-back { padding: 0; align-items: flex-end; } .modal { border-radius: 14px 14px 0 0; max-height: 92vh; overflow-y: auto; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 900px) { .toasts { bottom: 86px; left: 16px; right: 16px; } }
.toast { background: var(--surface-2); border: 1px solid var(--line-2); border-left: 3px solid var(--glow); border-radius: 9px; padding: 11px 14px; font-size: .88rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: rise .2s; max-width: 380px; }
.toast.err { border-left-color: var(--loss); }
.toast.ok { border-left-color: var(--win); }

/* ---------- Divers ---------- */
.notice { display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--info-bg); border: 1px solid rgba(177, 76, 255, .25); font-size: .86rem; align-items: flex-start; }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--glow); }
.notice.warn { background: var(--soon-bg); border-color: rgba(255, 154, 46, .3); } .notice.warn svg { color: var(--soon); }
.notice.err { background: var(--loss-bg); border-color: rgba(255, 77, 94, .3); } .notice.err svg { color: var(--loss); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .82rem; }
.mt { margin-top: 16px; } .mt-s { margin-top: 8px; } .mb { margin-bottom: 16px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 14px; color: var(--muted); font-weight: 600; font-size: .9rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--text); border-color: var(--glow); }
.form-strip { display: flex; gap: 3px; }
.form-strip span { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; font-family: var(--display); }
.form-strip .win { background: var(--win-bg); color: var(--win); } .form-strip .loss { background: var(--loss-bg); color: var(--loss); } .form-strip .draw { background: var(--surface-2); color: var(--muted); }
.mapbar { display: grid; grid-template-columns: 90px 1fr 70px; gap: 10px; align-items: center; font-size: .86rem; padding: 6px 0; }
.mapbar .bar { height: 8px; background: var(--loss-bg); border-radius: 99px; overflow: hidden; }
.mapbar .bar span { display: block; height: 100%; background: var(--win); border-radius: 99px; }
.loading { display: grid; place-items: center; padding: 60px; color: var(--muted); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line-2); border-top-color: var(--glow); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hr { height: 1px; background: var(--line); margin: 16px 0; border: 0; }
.code-box { font-family: ui-monospace, Menlo, monospace; font-size: 1.15rem; letter-spacing: .12em; background: var(--bg-2); border: 1px dashed var(--glow); padding: 14px; border-radius: 8px; text-align: center; user-select: all; }
.notif { display: flex; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.notif:first-child { border-top: 0; }
.notif.unread { background: linear-gradient(90deg, var(--glow-soft), transparent 60%); }
.notif .bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); margin-top: 7px; flex: none; }
.notif:not(.unread) .bullet { background: transparent; }
.ann { border-left: 3px solid var(--line-2); }
.ann.important { border-left-color: var(--soon); }
.ann.urgent { border-left-color: var(--loss); }
.ann.unread .ann-title::after { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--glow); border-radius: 50%; margin-left: 8px; vertical-align: middle; }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(60% 50% at 50% 0%, rgba(76, 0, 76, .45), transparent 70%), var(--bg); }
.auth-card { width: 100%; max-width: 410px; }
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand .brand-logo { width: 64px; height: 64px; margin: 0 auto 12px; }
.auth-brand h1 { font-size: 1.5rem; }
.auth-brand p { color: var(--muted); margin: 4px 0 0; }
.riot-btn { background: #1c1c1c; border-color: #3a3a3a; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: .78rem; margin: 6px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Correctifs ---------- */
.shell > div { min-width: 0; }
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.next .kicker svg { width: 16px; height: 16px; }
.row.wrap { flex-wrap: wrap; }
@media (max-width: 600px) { .row.wrap > .inline { width: 100%; } .row.wrap > .inline .btn { flex: 1; } }
.cap::first-letter { text-transform: uppercase; }

/* ---------- App installable ---------- */
.install-card:not([hidden]) { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: linear-gradient(90deg, rgba(76, 0, 76, .45), var(--surface) 70%); border-color: rgba(177, 76, 255, .3); }
.install-card img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.install-steps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--surface-2); font-size: .85em; }
.brand-logo img { object-fit: contain; }
@media (max-width: 900px) { .topbar { padding-top: calc(10px + env(safe-area-inset-top)); } }
@media (display-mode: standalone) { .auth { padding-top: calc(24px + env(safe-area-inset-top)); } }
.push-ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; }
.push-ico svg { width: 22px; height: 22px; }
/* ---------- Réorganisation des joueurs ---------- */
.reorder-row { display: flex; padding: 10px 14px; cursor: grab; background: var(--surface); }
.reorder-row.dragging { opacity: .5; background: var(--primary); }
.drag-handle { color: var(--faint); letter-spacing: -2px; font-weight: 700; user-select: none; }
.reorder-pos { font-family: var(--display); font-weight: 700; color: var(--glow); width: 18px; text-align: center; }
.rot90 { transform: rotate(90deg); }
.icon-btn[disabled] { opacity: .3; cursor: default; }
@media (pointer: coarse) { .drag-handle { display: none; } .reorder-row { cursor: default; } }

/* ---------- Composition : agents et MVP ---------- */
.lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.lineup-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; border: 1px solid transparent; }
.lineup-row.on { border-color: var(--line-2); background: var(--surface-2); }
.lineup-row .check { flex: 1; min-width: 0; }
.lineup-row .check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-row select { width: 120px; min-height: 34px; padding: 4px 8px; }
.lineup-row select:disabled { opacity: .35; }
.agent-chip { font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--info-bg); color: #e3c2ff; white-space: nowrap; }
.badge.mvp { color: #ffd34d; background: rgba(255, 211, 77, .12); border-color: transparent; }

/* ---------- Décorations de profil (style Discord) ---------- */
.avatar-deco { position: relative; display: inline-flex; flex: none; border-radius: 50%; isolation: isolate; }
.avatar-deco::before, .avatar-deco::after { content: ''; position: absolute; pointer-events: none; z-index: 2; }
/* Anneau : un dégradé masqué pour ne garder qu'un cercle */
.avatar-deco::before {
  inset: -4px; border-radius: 50%; padding: 3px; background: var(--ring, var(--glow));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.avatar-deco.sm::before { inset: -3px; padding: 2px; }
.avatar-deco.lg::before { inset: -7px; padding: 5px; }
.avatar-deco::after { font-size: 14px; line-height: 1; }
.avatar-deco.sm::after { font-size: 10px; }
.avatar-deco.lg::after { font-size: 28px; }

@keyframes decoSpin { to { transform: rotate(360deg); } }
@keyframes decoPulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px var(--glow)); } 50% { opacity: .75; filter: drop-shadow(0 0 10px var(--glow)); } }
@keyframes decoGlitchA { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2px, 1px); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, -1px); } 80% { transform: translate(1px, 2px); } }
@keyframes decoFloat { 0%, 100% { transform: translateY(0) rotate(-14deg); } 50% { transform: translateY(-3px) rotate(-10deg); } }

.deco-neon::before { --ring: linear-gradient(135deg, #e0aaff, #b14cff 45%, #6a0dad); animation: decoPulse 2.6s ease-in-out infinite; }

.deco-toxic::before { --ring: conic-gradient(from 200deg, #4c004c, #2c263f, #4c004c, #39ff14 70%, #4c004c 80%); }
.deco-toxic::after {
  inset: 10% -14% -10% 30%; z-index: 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%2339ff14' stroke-width='3.2' stroke-linecap='round' fill='none'%3E%3Cpath d='M30 4 14 36'/%3E%3Cpath d='M36 9 22 38' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 0 4px #39ff14);
}

.deco-flame::before { --ring: conic-gradient(#d50000, #ff6d00, #ffd600, #ff3d00, #d50000, #ff9100, #d50000); animation: decoSpin 2.4s linear infinite; filter: drop-shadow(0 0 6px #ff6d00); }

.deco-frost::before { --ring: conic-gradient(#e1f5fe, #4fc3f7, #ffffff, #0288d1, #b3e5fc, #e1f5fe); animation: decoSpin 9s linear infinite; filter: drop-shadow(0 0 5px #4fc3f7); }
.deco-frost::after { content: '❄️'; top: -12%; right: -12%; }

.deco-glitch::before { --ring: #ff00e6; animation: decoGlitchA 1.6s steps(2) infinite; mix-blend-mode: screen; }
.deco-glitch::after {
  inset: -4px; border-radius: 50%; padding: 3px; background: #00f0ff; animation: decoGlitchA 1.3s steps(2) infinite reverse; mix-blend-mode: screen;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.deco-glitch.sm::after { inset: -3px; padding: 2px; }
.deco-glitch.lg::after { inset: -7px; padding: 5px; }

.deco-prism::before { --ring: conic-gradient(#ff0040, #ff8c00, #ffe600, #00e676, #00b0ff, #7c4dff, #ff00c8, #ff0040); animation: decoSpin 4s linear infinite; }

.deco-gold::before { --ring: conic-gradient(#8d6e00, #ffd54f, #fff8e1, #ffb300, #8d6e00, #ffe082, #8d6e00); animation: decoSpin 6s linear infinite; filter: drop-shadow(0 0 6px rgba(255, 196, 0, .6)); }
.deco-gold::after { content: '⭐'; bottom: -10%; right: -10%; }

.deco-crown::before { --ring: linear-gradient(180deg, #ffd54f, #b8860b); }
.deco-crown::after { content: '👑'; top: -38%; left: 50%; margin-left: -.5em; font-size: 18px; animation: decoFloat 3s ease-in-out infinite; }
.deco-crown.sm::after { font-size: 12px; top: -45%; }
.deco-crown.lg::after { font-size: 34px; top: -36%; }

.deco-staff::before { --ring: conic-gradient(#ffffff, #b14cff, #4c004c, #b14cff, #ffffff); }
.deco-staff::after { content: '🛡️'; bottom: -12%; right: -12%; }

/* Sélecteur dans le profil */
.deco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.deco-opt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: .78rem; font-weight: 600; text-align: center; transition: border-color .15s, background .15s; }
.deco-opt:hover { border-color: var(--line-2); }
.deco-opt.on { border-color: var(--glow); background: var(--info-bg); }
.deco-opt.locked { opacity: .45; cursor: not-allowed; }
.deco-opt .lock { font-size: .68rem; color: var(--muted); font-weight: 500; }
.topbar .deco-crown::after { top: -32%; font-size: 10px; }
@keyframes decoGlitchA { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, -2px); } 80% { transform: translate(2px, 3px); } }

/* ---------- Aces ---------- */
.ace-input { display: flex; align-items: center; gap: 4px; flex: none; }
.ace-input span { font-family: var(--display); font-size: .66rem; font-weight: 700; color: #ff4655; letter-spacing: .06em; }
.ace-input input { width: 52px; min-height: 34px; padding: 4px 6px; text-align: center; }
.ace-input input:disabled { opacity: .35; }
.lineup { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.ace-chip { font-family: var(--display); font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; color: #fff; background: linear-gradient(135deg, #ff4655, #b3001b); letter-spacing: .05em; white-space: nowrap; box-shadow: 0 0 10px rgba(255, 70, 85, .35); }

/* Décoration ACE : anneau rouge Valorant + bandeau « ACE » */
@keyframes decoAce { 0%, 100% { filter: drop-shadow(0 0 3px #ff4655); } 50% { filter: drop-shadow(0 0 9px #ff4655); } }
.deco-ace::before { --ring: conic-gradient(#ff4655, #ffffff 12%, #ff4655 25%, #7a0012 50%, #ff4655 75%, #ffffff 87%, #ff4655); animation: decoSpin 5s linear infinite, decoAce 1.8s ease-in-out infinite; }
.deco-ace::after {
  content: 'ACE'; left: 50%; bottom: -16%; transform: translateX(-50%); z-index: 3;
  font-family: var(--display); font-weight: 700; font-size: 9px; letter-spacing: .12em; color: #fff;
  background: linear-gradient(135deg, #ff4655, #b3001b); padding: 2px 6px 1px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .55);
}
.deco-ace.sm::after { font-size: 6px; padding: 1px 3px 0; bottom: -20%; }
.deco-ace.lg::after { font-size: 14px; padding: 3px 9px 2px; bottom: -12%; }

/* ---------- Page « Notre équipe Premier » ---------- */
.premier-hero { position: relative; overflow: hidden; padding: 0; }
.premier-hero-bg { position: absolute; inset: 0; background: radial-gradient(70% 120% at 0% 0%, rgba(76, 0, 76, .75), transparent 60%), radial-gradient(60% 120% at 100% 0%, rgba(57, 255, 20, .10), transparent 60%), linear-gradient(180deg, transparent, var(--surface)); pointer-events: none; }
.premier-hero-content { position: relative; display: flex; gap: 22px; align-items: center; padding: 26px 24px 20px; flex-wrap: wrap; }
.premier-logo { width: 110px; height: 110px; flex: none; border-radius: 22px; background: rgba(8, 7, 11, .55); border: 1px solid var(--line-2); display: grid; place-items: center; padding: 10px; box-shadow: 0 0 40px rgba(177, 76, 255, .25); }
.premier-logo img { width: 100%; height: 100%; object-fit: contain; }
.premier-id { flex: 1; min-width: 240px; }
.premier-id h1 { font-size: 2rem; letter-spacing: .03em; }
.premier-id p { margin: 6px 0 0; max-width: 620px; }
.premier-tag { font-size: 1rem; vertical-align: middle; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 8px; color: var(--muted); }
.premier-badges { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); background: rgba(8, 7, 11, .35); }
.premier-badges > div { padding: 12px 18px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.premier-badges > div:first-child { border-left: 0; }
.premier-badges .label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.premier-badges b { font-family: var(--display); font-size: 1.15rem; }
.premier-next { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.premier-next:hover { border-color: var(--line-2); }
@media (max-width: 700px) {
  .premier-hero-content { padding: 20px 16px 16px; gap: 14px; }
  .premier-logo { width: 76px; height: 76px; border-radius: 16px; }
  .premier-id h1 { font-size: 1.5rem; }
  .premier-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premier-badges > div:nth-child(3) { border-left: 0; }
  .premier-badges > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.premier-id .eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--glow); font-weight: 600; margin-bottom: 4px; }

/* ---------- Couleur selon les présents (≥5 vert, 4 orange) + noms ---------- */
.pres-row { border-left: 3px solid transparent; transition: background .15s; align-items: flex-start !important; }
.pres-row .row-title, .pres-row .row-sub { white-space: normal; }
.pres-row.lvl-full { border-left-color: var(--win); background: linear-gradient(90deg, rgba(47, 212, 122, .13), transparent 55%); }
.pres-row.lvl-almost { border-left-color: var(--soon); background: linear-gradient(90deg, rgba(255, 154, 46, .13), transparent 55%); }
.pres-row.lvl-full .pres-count { color: var(--win); }
.pres-row.lvl-almost .pres-count { color: var(--soon); }
.pres-row.lvl-full .date-tile { border-color: rgba(47, 212, 122, .5); }
.pres-row.lvl-almost .date-tile { border-color: rgba(255, 154, 46, .5); }
.pres-names { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pn { font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 5px; line-height: 1.6; }
.pn.going { color: var(--win); background: var(--win-bg); }
.pn.pending { color: var(--faint); background: var(--surface-2); border: 1px dashed var(--line-2); }
.pn.absent { color: var(--loss); background: var(--loss-bg); text-decoration: line-through; opacity: .8; }
.cal .ev.lvl-full { background: rgba(47, 212, 122, .16); box-shadow: inset 2px 0 var(--win); }
.cal .ev.lvl-almost { background: rgba(255, 154, 46, .16); box-shadow: inset 2px 0 var(--soon); }
.week .wev.lvl-full { border-left-color: var(--win) !important; background: rgba(47, 212, 122, .12); }
.week .wev.lvl-almost { border-left-color: var(--soon) !important; background: rgba(255, 154, 46, .12); }
.week .wev .pres-names { margin-top: 4px; }
.week .wev .pn { font-size: .66rem; padding: 0 5px; }

/* ---------- Potentiel / Confirmé / Retiré + vue staff ---------- */
.badge.potential { color: var(--muted); border: 1px dashed var(--line-2); background: transparent; }
.badge .i { width: 12px; height: 12px; }
.pres-row .row-sub .badge { margin-right: 6px; }
.pres-row.is-removed { opacity: .55; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 77, 94, .05) 10px 20px); border-left-color: var(--loss) !important; }
.pres-row.is-removed .row-title { text-decoration: line-through; }
.staff-acts { display: inline-flex; gap: 6px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.btn.sa-ok { color: var(--win); border-color: rgba(47, 212, 122, .45); background: var(--win-bg); }
.btn.sa-ok:hover { border-color: var(--win); }
.btn.sa-x { color: var(--loss); padding: 5px 8px; }
.btn.sa-x:hover { border-color: var(--loss); background: var(--loss-bg); }
.seg-staff button { display: inline-flex; align-items: center; gap: 6px; }
.seg-staff .i { width: 14px; height: 14px; }
.cal .ev.is-potential:not(.lvl-full):not(.lvl-almost) { background: transparent; border: 1px dashed var(--line-2); }
@media (max-width: 700px) { .pres-row { flex-wrap: wrap; } .staff-acts { width: 100%; justify-content: flex-start; padding-left: 58px; } }

/* ---------- Axes de progression ---------- */
.span-3 { grid-column: 1 / -1; }
.badge.soon-solid { color: #120a00; background: var(--soon); border-color: transparent; }
.rk-group { margin-top: 6px; }
.rk-group + .rk-group { margin-top: 18px; }
.rk-group-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.rk { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; background: var(--bg-2); border-left: 3px solid var(--line-2); }
.rk.working { border-left-color: var(--soon); }
.rk.resolved { border-left-color: var(--win); opacity: .85; }
.rk-title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.rk.resolved .rk-title { text-decoration: line-through; text-decoration-color: rgba(47, 212, 122, .6); }
.rk-orig { margin-top: 4px; font-style: italic; }
.rk-votes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.rk-count { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 600; }
.rk-count .i { width: 14px; height: 14px; }
.rk-count.agree { color: var(--win); }
.rk-count.disagree { color: var(--loss); }
.btn.sa-x-on { color: var(--loss); border-color: var(--loss); background: var(--loss-bg); }
.rk-progress { height: 4px; border-radius: 99px; background: var(--line); margin-top: 10px; overflow: hidden; }
.rk-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--soon), var(--win)); border-radius: 99px; }
.rk-private { margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 1px dashed rgba(177, 76, 255, .45); background: var(--info-bg); }
.rk-private-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rk-private-head .i { color: var(--glow); }
.rk-tips { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.rk-tips li span { display: block; color: var(--muted); font-size: .88rem; }
.rk-drill { display: flex; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(8, 7, 11, .4); font-size: .88rem; }
.rk-drill .i { color: var(--win); width: 18px; height: 18px; flex: none; margin-top: 2px; }
.scn-choice { justify-content: flex-start; text-align: left; white-space: normal; height: auto; padding: 10px 12px; }
.scn-choice.right { border-color: var(--win); background: var(--win-bg); color: var(--win); opacity: 1 !important; }
.scn-choice.wrong { border-color: var(--loss); background: var(--loss-bg); color: var(--loss); opacity: 1 !important; }

/* ---------- Coach IA ---------- */
.coach-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.coach-topics { position: sticky; top: 16px; }
.coach-topic { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--muted); font-size: .88rem; }
.coach-topic span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-topic:hover { background: var(--surface-2); color: var(--text); }
.coach-topic.on { background: var(--primary); color: var(--text); }
.coach-chat { display: flex; flex-direction: column; padding: 0; height: min(70vh, 680px); }
.coach-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg.assistant .bubble { white-space: normal; }
.msg.user .bubble { background: var(--accent); border-bottom-right-radius: 4px; }
.msg.assistant .bubble { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble p { margin: 0 0 8px; } .bubble p:last-child { margin: 0; }
.bubble ul { margin: 4px 0 8px; padding-left: 18px; }
.typing .bubble { display: inline-flex; gap: 4px; }
.typing .bubble span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typingDot 1s infinite; }
.typing .bubble span:nth-child(2) { animation-delay: .15s; } .typing .bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.coach-empty { margin: auto; text-align: center; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); }
.coach-empty .i { width: 30px; height: 30px; color: var(--glow); }
.coach-empty b { color: var(--text); font-size: 1.05rem; }
.coach-sugg { cursor: pointer; padding: 6px 10px; font-size: .8rem; }
.coach-sugg:hover { border-color: var(--glow); color: var(--text); }
.coach-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.coach-input textarea { resize: none; min-height: 42px; }
@media (max-width: 900px) {
  .coach-layout { grid-template-columns: 1fr; }
  .coach-topics { position: static; display: flex; gap: 6px; overflow-x: auto; padding: 10px; }
  .coach-topics > .small { display: none; }
  .coach-topic { white-space: nowrap; flex: none; border: 1px solid var(--line); }
  .coach-topic span { max-width: 160px; }
  .coach-topics .btn.block { width: auto; margin: 0; flex: none; }
  .coach-chat { height: calc(100vh - 330px); min-height: 380px; }
}

/* ---------- Observateurs de match ---------- */
.obs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.obs-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.02); }
.obs-item:has(input:checked) { border-color: var(--glow); background: rgba(177,76,255,.12); }
.obs-item.plays { opacity: .45; cursor: not-allowed; }
.obs-item span { display: flex; flex-direction: column; min-width: 0; }
.obs-item b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-item small { color: var(--faint, #8a8597); font-size: .75rem; }
.obs-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: var(--glow); background: rgba(177,76,255,.14); border: 1px solid rgba(177,76,255,.35); white-space: nowrap; }
.obs-chip .i, .obs-chip svg { width: 14px; height: 14px; }
.obs-item input { accent-color: var(--glow); width: 18px; height: 18px; flex: none; }

/* ---------- Points Premier ---------- */
.premier-race { border-color: rgba(177,76,255,.35); background: linear-gradient(135deg, rgba(177,76,255,.10), transparent 60%), var(--card, #15121d); }
.premier-race.done { border-color: rgba(46,204,113,.5); background: linear-gradient(135deg, rgba(46,204,113,.12), transparent 60%), var(--card, #15121d); }
.premier-pts { display: flex; align-items: baseline; gap: 6px; }
.premier-pts b { font-size: 2.2rem; line-height: 1; font-weight: 800; }
.premier-pts span { color: var(--faint, #8a8597); }
.race-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.race-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #6a1b9a, var(--glow)); transition: width .6s ease; }
.premier-race.done .race-bar span { background: linear-gradient(90deg, #1e8e4f, var(--win)); }
.race-detail { display: flex; gap: 14px; flex-wrap: wrap; }
.pts-chip { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.06); white-space: nowrap; }
.pts-chip.win { color: var(--win); background: rgba(46,204,113,.12); }
.pts-chip.loss, .pts-chip.draw { color: #ffb020; background: rgba(255,176,32,.12); }

/* ---------- Saisons Premier ---------- */
.season-list { display: flex; flex-direction: column; gap: 10px; }
.season { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.season.live, .season.playoffs { border-color: rgba(177,76,255,.45); background: rgba(177,76,255,.07); }
.season.upcoming { opacity: .8; border-style: dashed; }
.season-line { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 6px; font-size: .9rem; }
.season-pts { font-weight: 700; }
.season-pts.ok { color: var(--win); }
.race-bar.thin { height: 6px; }
.season .form-strip span { width: 22px; height: 22px; font-size: .7rem; }

/* ---------- Derniers matchs Premier (tableau de score) ---------- */
.sb-list { display: flex; flex-direction: column; gap: 10px; }
.sb { display: block; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 12px; background: rgba(255,255,255,.02); color: inherit; text-decoration: none; transition: background .15s, border-color .15s; }
.sb:hover { background: rgba(255,255,255,.05); }
.sb.win { border-left-color: var(--win); }
.sb.loss { border-left-color: var(--loss); }
.sb-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.sb-team { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sb-team.us { text-align: right; }
.sb-team.them { text-align: left; }
.sb-score { display: inline-flex; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-score b { color: var(--faint, #8a8597); min-width: 1.2ch; text-align: center; }
.sb.win .sb-score b.hi { color: var(--win); }
.sb.loss .sb-score b.hi { color: var(--loss); }
.sb-score i { font-style: normal; color: var(--faint, #8a8597); font-weight: 400; }
.sb-bottom { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: .82rem; color: var(--muted, #b9b4c4); }
.sb-verdict { font-weight: 700; }
.sb-verdict.win { color: var(--win); }
.sb-verdict.loss { color: var(--loss); }
.sb-mvp { color: #ffd34d; font-weight: 600; }
.sb-meta { text-align: center; font-size: .72rem; color: var(--faint, #8a8597); margin-top: 4px; }
@media (max-width: 480px) { .sb-team { font-size: .85rem; } .sb-score { font-size: 1.25rem; } }
@media (max-width: 480px) { .sb-team { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; } }
/* Deux colonnes : matchs officiels / entraînements */
.sb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sb-col-title { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #b9b4c4); margin-bottom: 10px; }
.sb-col-title .i, .sb-col-title svg { width: 15px; height: 15px; }
.sb-col-title .faint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sb-cols .sb-team { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; font-size: .88rem; }
.sb-cols .sb-score { font-size: 1.3rem; gap: 6px; }
@media (max-width: 900px) { .sb-cols { grid-template-columns: 1fr; } }

/* Décoration Vétéran Premier : anneau or/violet + bandeau « PREMIER » */
@keyframes decoSeason { 0%, 100% { filter: drop-shadow(0 0 3px #b14cff); } 50% { filter: drop-shadow(0 0 9px #ffd34d); } }
.deco-season::before { --ring: conic-gradient(#ffd34d, #b14cff 25%, #ffd34d 50%, #6a1b9a 75%, #ffd34d); animation: decoSpin 6s linear infinite, decoSeason 2.4s ease-in-out infinite; }
.deco-season::after {
  content: 'PREMIER'; left: 50%; bottom: -16%; transform: translateX(-50%); z-index: 3;
  font-family: var(--display); font-weight: 700; font-size: 8px; letter-spacing: .1em; color: #1a0f00;
  background: linear-gradient(135deg, #ffe27a, #d4a017); padding: 2px 6px 1px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .6);
}
.deco-season.sm::after { font-size: 5px; padding: 1px 3px 0; bottom: -20%; }
.deco-season.lg::after { font-size: 13px; padding: 3px 9px 2px; bottom: -12%; }

/* ---------- Composants communs (filtres, tableaux) ---------- */
button.chip { cursor: pointer; color: inherit; font: inherit; font-size: .8rem; padding: 5px 11px; border-radius: 999px; transition: border-color .15s, background .15s; }
button.chip:hover { border-color: var(--line-2); }
.chip.on { background: var(--glow-soft); border-color: rgba(177, 76, 255, .55); color: #fff; }
.chip b { color: var(--glow); font-weight: 700; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stats-table td, .stats-table th { white-space: nowrap; }
.stats-table tbody tr[data-href] { cursor: pointer; }
.stats-table tbody tr[data-href]:hover td { background: var(--surface-2); }
.link-btn { background: none; border: 0; padding: 0; color: var(--glow); font: inherit; cursor: pointer; text-decoration: underline; }

/* ---------- Disponibilités ---------- */
.avail-card { overflow-x: auto; }
.avail-grid { display: grid; grid-template-columns: 92px repeat(var(--cols), minmax(92px, 1fr)); gap: 4px; padding: 12px; min-width: 480px; }
.avail-head { font-size: .74rem; font-weight: 600; color: var(--muted); text-align: center; padding: 4px 0 6px; }
.avail-day { font-size: .84rem; font-weight: 600; display: flex; align-items: center; }
.avail-cell { min-height: 58px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: inherit; font: inherit; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: default; position: relative; }
.avail-cell b { font-family: var(--display); font-size: 1.15rem; line-height: 1; }
.avail-names { font-size: .66rem; color: var(--muted); line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.avail-cell.some { background: rgba(177, 76, 255, .08); }
.avail-cell.almost { background: rgba(255, 176, 32, .14); border-color: rgba(255, 176, 32, .5); }
.avail-cell.almost b { color: #ffb020; }
.avail-cell.full { background: rgba(47, 212, 122, .14); border-color: rgba(47, 212, 122, .55); }
.avail-cell.full b { color: var(--win); }
.avail-cell.me::after { content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 6px var(--glow); }
.avail-grid.editing .avail-cell { cursor: pointer; }
.avail-grid.editing .avail-cell:hover { border-color: var(--line-2); }
.avail-cell.mine { background: var(--glow-soft); border-color: var(--glow); }
.avail-tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--line-2); }
.avail-cell.mine .avail-tick { border: 0; background: var(--glow); color: #fff; }
.avail-tick svg { width: 15px; height: 15px; }
.avail-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.avail-legend span { display: inline-flex; align-items: center; gap: 6px; }
.avail-lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.avail-lg.full { background: rgba(47, 212, 122, .5); } .avail-lg.almost { background: rgba(255, 176, 32, .5); } .avail-lg.some { background: rgba(177, 76, 255, .25); }
.avail-lg.me { background: var(--glow); border-radius: 50%; width: 8px; height: 8px; }
@media (max-width: 600px) { .avail-grid { grid-template-columns: 70px repeat(var(--cols), minmax(64px, 1fr)); padding: 8px; gap: 3px; } .avail-names { display: none; } .avail-day { font-size: .76rem; } }

/* ---------- Statistiques ---------- */
.wr-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; margin: 6px 0 4px; }
.wr-bar span { display: block; height: 100%; border-radius: 999px; }
.compo-rank { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .85rem; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.compo-rank.first { background: linear-gradient(135deg, #ffe27a, #d4a017); color: #1a0f00; border: 0; }

/* ---------- Stratbook ---------- */
.strat-map-title { margin: 22px 0 10px; font-size: 1.15rem; }
.strat-map-title:first-of-type { margin-top: 6px; }
.strat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.strat-card { cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s; }
.strat-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.strat-thumb { height: 130px; margin: -18px -18px 4px; border-radius: var(--radius) var(--radius) 0 0; background: center / cover no-repeat var(--surface-2); }
.strat-title { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.strat-excerpt { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.strat-content { white-space: pre-line; line-height: 1.55; margin: 12px 0; }
.strat-img-full { width: 100%; border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; max-height: 60vh; object-fit: contain; background: var(--surface-2); }
.strat-img-full.zoomed { max-height: none; cursor: zoom-out; }
.strat-img-edit { min-height: 60px; border: 1px dashed var(--line-2); border-radius: 10px; display: grid; place-items: center; padding: 6px; }
.strat-img-edit img { max-width: 100%; max-height: 220px; border-radius: 8px; }
.badge.side-atk { color: #ff8a6b; background: rgba(255, 110, 70, .12); border-color: rgba(255, 110, 70, .35); }
.badge.side-def { color: #6bc4ff; background: rgba(70, 170, 255, .12); border-color: rgba(70, 170, 255, .35); }
.mb-s { margin-bottom: 10px; }

/* ---------- Revue de VOD ---------- */
.vod-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.vod-note { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.vod-ts { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 700; font-size: .85rem; color: var(--glow); background: var(--glow-soft); padding: 3px 8px; border-radius: 6px; white-space: nowrap; text-decoration: none; flex: none; }
.vod-ts svg { width: 12px; height: 12px; }
.vod-body { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.vod-form { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; }
.vod-ts-input { text-align: center; font-family: var(--display); }

/* ---------- Bilan de saison ---------- */
.recap-head { text-align: center; padding: 16px; border-radius: 12px; border: 1px solid rgba(177, 76, 255, .35); background: linear-gradient(135deg, rgba(177, 76, 255, .12), transparent 70%); }
.recap-head.ok { border-color: rgba(47, 212, 122, .45); background: linear-gradient(135deg, rgba(47, 212, 122, .12), transparent 70%); }
.recap-score { font-family: var(--display); font-size: 2rem; font-weight: 700; margin: 4px 0; }
.recap-leaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.recap-leader { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.recap-leader b { overflow-wrap: anywhere; }
.recap-emoji { font-size: 1.5rem; flex: none; }
@media (max-width: 520px) { .recap-leaders { grid-template-columns: 1fr; } }

.avail-day .d-short { display: none; }
@media (max-width: 600px) {
  .avail-card { overflow-x: visible; }
  .avail-grid { min-width: 0; grid-template-columns: 44px repeat(var(--cols), minmax(0, 1fr)); padding: 8px 6px; }
  .avail-day .d-long { display: none; } .avail-day .d-short { display: inline; }
  .avail-head { font-size: .62rem; white-space: nowrap; }
  .avail-cell { min-height: 46px; padding: 4px; }
}

/* ---------- Import Tracker.gg ---------- */
.import-box { padding: 12px; border: 1px dashed rgba(177, 76, 255, .5); border-radius: 12px; background: var(--glow-soft); display: grid; gap: 8px; }
.import-box .small { display: flex; align-items: center; gap: 6px; }
.import-box .small svg { width: 15px; height: 15px; }
.import-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.imp-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--muted); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.kda { color: var(--text, #f1eee8); font-family: var(--display); }
.row-sub:has(.kda) { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- Images du jeu ---------- */
.agent-chip { display: inline-flex; align-items: center; gap: 5px; }
.agent-ico { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; margin-left: -3px; background: rgba(0, 0, 0, .25); }
.agent-face { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.agent-face.sm { width: 26px; height: 26px; border-radius: 6px; }
.agent-face.empty { display: inline-grid; place-items: center; font-size: .62rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.rank-badge { display: inline-flex; align-items: center; gap: 6px; }
.rank-badge img { width: 22px; height: 22px; }
/* Image de carte en fond (lignes, tableaux de score, titres) */
.map-row-img { position: relative; isolation: isolate; border-radius: 10px; overflow: hidden; }
.map-row-img[style*="--map"]::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--surface) 25%, rgba(20, 17, 28, .7)), var(--map) center / cover no-repeat; opacity: .9; }
.sb.has-map { position: relative; isolation: isolate; overflow: hidden; }
.sb.has-map::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 17, 28, .82), rgba(20, 17, 28, .94)), var(--map) center / cover no-repeat; }
.strat-map-title.has-map { padding: 18px 16px; border-radius: 12px; background: linear-gradient(90deg, rgba(8, 7, 11, .9) 30%, rgba(8, 7, 11, .45)), var(--map) center / cover no-repeat; border: 1px solid var(--line); }

/* ---------- Tableau de score complet ---------- */
.sbx { display: grid; gap: 14px; }
.sbx-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; margin-bottom: 4px; }
.sbx-team.us .sbx-head { background: rgba(47, 212, 122, .1); border-left: 3px solid var(--win); }
.sbx-team.them .sbx-head { background: rgba(255, 77, 94, .1); border-left: 3px solid var(--loss); }
.sbx-rounds { font-family: var(--display); font-size: 1.3rem; font-weight: 700; }
.sbx-table th, .sbx-table td { padding: 7px 8px; white-space: nowrap; text-align: center; }
.sbx-table th:first-child, .sbx-table td:first-child { text-align: left; }
.sbx-table tr.ours td { background: rgba(177, 76, 255, .07); }
.sbx-table td.pos { color: var(--win); } .sbx-table td.neg { color: var(--loss); }
.sbx-player { display: inline-flex; align-items: center; gap: 7px; }
.sbx-player a { color: inherit; }
.sbx-rank { width: 20px; height: 20px; }
/* Frise des rounds */
.rounds-strip { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 8px; }
.rounds-label { font-size: .68rem; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.rounds-row { display: flex; gap: 3px; flex-wrap: wrap; }
.rd { width: 26px; height: 30px; border-radius: 5px; display: grid; place-items: center; font-size: .78rem; line-height: 1; border: 1px solid transparent; }
.rd.us { background: rgba(47, 212, 122, .18); border-color: rgba(47, 212, 122, .45); }
.rd.them { background: rgba(255, 77, 94, .14); border-color: rgba(255, 77, 94, .4); }
.rounds-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 14px; }
.rounds-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rd-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rd-dot.us { background: rgba(47, 212, 122, .6); } .rd-dot.them { background: rgba(255, 77, 94, .6); }
@media (max-width: 600px) { .rd { width: 21px; height: 26px; font-size: .66rem; } }

/* ---------- Courbes ---------- */
.chart-title { font-weight: 600; margin-bottom: 6px; }
.lc-wrap { position: relative; }
.lc { width: 100%; height: 190px; display: block; overflow: visible; }
.lc-grid { stroke: rgba(255, 255, 255, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc-tick, .lc-ref-label { fill: var(--faint); font-size: 11px; font-family: inherit; }
.lc-ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .7; }
.lc-line { fill: none; stroke: var(--glow); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lc-dot { fill: var(--surface); stroke: var(--glow); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lc-dot.win { fill: var(--win); stroke: var(--surface); }
.lc-dot.loss { fill: var(--loss); stroke: var(--surface); }
.lc-dot.on { r: 7; }
.lc-cross { stroke: rgba(255, 255, 255, .25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc-hit { fill: transparent; cursor: crosshair; }
.lc-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; font-size: .78rem; pointer-events: none; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); z-index: 5; }
.lc-tip b { font-family: var(--display); font-size: 1rem; }
.lc-tip span { color: var(--muted); }
/* Records */
.records { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.record { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: inherit; text-decoration: none; min-width: 0; }
a.record:hover { border-color: var(--line-2); }
.record-ico { font-size: 1.6rem; flex: none; width: 34px; text-align: center; }
.record b { font-family: var(--display); font-size: 1.05rem; }

/* ---------- Carte « Dernier match » ---------- */
.last-match { position: relative; overflow: hidden; display: block; padding: 0; color: inherit; text-decoration: none; isolation: isolate; border-left: 3px solid var(--line-2); }
.last-match.win { border-left-color: var(--win); } .last-match.loss { border-left-color: var(--loss); }
.lm-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--surface) 30%, rgba(20, 17, 28, .55)), var(--map, none) center / cover no-repeat; }
.lm-content { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 20px; flex-wrap: wrap; }
.lm-score { display: flex; align-items: baseline; gap: 12px; font-weight: 700; margin: 4px 0; flex-wrap: wrap; }
.lm-score b { font-family: var(--display); font-size: 2.2rem; line-height: 1; }
.lm-score b.win { color: var(--win); } .lm-score b.loss { color: var(--loss); }
.lm-sub { font-size: .88rem; color: var(--muted); }
.lm-top { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.lm-p { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(8, 7, 11, .55); border: 1px solid var(--line); backdrop-filter: blur(4px); }
.lm-rank { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: var(--surface-2); flex: none; }
.lm-p:first-child .lm-rank { background: linear-gradient(135deg, #ffe27a, #d4a017); color: #1a0f00; }
.lc-tip[hidden] { display: none; }
.lc-tip { top: 2px; transform: translateX(-50%); }
/* Tableaux de stats : restent de vrais tableaux sur téléphone (défilement horizontal) */
@media (max-width: 700px) {
  .table.stats-table, .table.sbx-table { display: table; width: 100%; }
  .table.stats-table thead, .table.sbx-table thead { display: table-header-group; }
  .table.stats-table tbody, .table.sbx-table tbody { display: table-row-group; width: auto; }
  .table.stats-table tr, .table.sbx-table tr { display: table-row; width: auto; padding: 0; }
  .table.stats-table td, .table.sbx-table td, .table.stats-table th, .table.sbx-table th { display: table-cell; width: auto; padding: 7px 8px; }
  .table.stats-table td::before, .table.sbx-table td::before { content: none; }
  .table-wrap { max-width: 100%; }
}
.sbx, .sbx-team, .sbx-team .table-wrap { min-width: 0; } .grid > .card, .stack > .card { min-width: 0; }
@media (max-width: 700px) { .sbx-player .faint { display: none; } .sbx-table td:first-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } }
.rr { font-size: .8rem; color: var(--muted); margin-left: 4px; white-space: nowrap; } .rr .pos { color: var(--win); } .rr .neg { color: var(--loss); }

/* ---------- Carte de joueur Valorant, niveau, titre ---------- */
.page-head.has-card { position: relative; isolation: isolate; padding: 22px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.page-head.has-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 7, 11, .92) 35%, rgba(8, 7, 11, .55)), var(--card) center / cover no-repeat; }
.vtitle { font-size: .82rem; font-weight: 600; color: #ffd34d; letter-spacing: .02em; margin-top: 2px; }
.lvl-badge { display: inline-block; font-family: var(--display); font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); vertical-align: middle; }
.player-card.has-card { position: relative; isolation: isolate; overflow: hidden; }
.player-card.has-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 74px; z-index: -1; background: linear-gradient(180deg, rgba(20, 17, 28, .35), var(--surface)), var(--card) center / cover no-repeat; }

/* ---------- Viseur ---------- */
.xhair-preview { height: 120px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; background: repeating-conic-gradient(#2a2f38 0 25%, #222731 0 50%) 0 0 / 20px 20px; margin-bottom: 10px; overflow: hidden; }
.xhair-preview img { max-height: 110px; max-width: 100%; image-rendering: pixelated; }
.xhair-preview span { display: none; }
.xhair-preview.noimg img { display: none; } .xhair-preview.noimg span { display: block; }
.xhair-code { display: flex; gap: 8px; align-items: center; }
.xhair-code code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: .76rem; padding: 7px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }

/* ---------- Image de fond de l'équipe ---------- */
/* Fixée derrière tout le site (pseudo-élément : fonctionne aussi sur iPhone), assombrie pour la lisibilité */
html { background-color: var(--bg); }
body { background: transparent !important; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url('/assets/bg.jpg') center / cover no-repeat;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 7, 11, .72), rgba(8, 7, 11, .86) 55%, rgba(8, 7, 11, .93));
}
@media (max-width: 700px) { body::before { background-image: url('/assets/bg-mobile.jpg'); } }
/* Page de connexion : l'image est plus visible */
.auth { background: radial-gradient(60% 50% at 50% 0%, rgba(76, 0, 76, .35), transparent 70%), rgba(8, 7, 11, .35); }
/* Les cartes laissent légèrement deviner le fond */
.card, .stat { background-color: rgba(20, 17, 28, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sidebar { background: rgba(12, 10, 17, .82); background-image: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Page de connexion : fond plus lumineux */
body:has(.auth)::after { background: radial-gradient(70% 60% at 50% 45%, rgba(8, 7, 11, .55), rgba(8, 7, 11, .25)); }
.auth { background: transparent; }
.auth .card { background-color: rgba(14, 12, 20, .9); }

/* ---------- Parties jouées ensemble ---------- */
.tg-list { display: flex; flex-direction: column; gap: 8px; }
.tg-game { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); border-left: 3px solid var(--line-2); position: relative; isolation: isolate; overflow: hidden; }
.tg-game.has-map::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--surface-2) 35%, rgba(27, 23, 38, .75)), var(--map) center / cover no-repeat; }
.tg-game.win { border-left-color: var(--win); } .tg-game.loss { border-left-color: var(--loss); }
.tg-game.ignored { opacity: .5; }
.tg-score { font-family: var(--display); font-size: 1.2rem; font-weight: 800; min-width: 58px; }
.tg-score.win { color: var(--win); } .tg-score.loss { color: var(--loss); }
.tg-info { min-width: 0; }
.tg-mode { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.06); margin-left: 4px; }
.tg-mode.competitive { color: #ffd34d; background: rgba(255, 211, 77, .12); }
.tg-mode.custom { color: #6bc4ff; background: rgba(70, 170, 255, .12); }
.tg-mode.premier { color: #c58bff; background: rgba(177, 76, 255, .14); }
.tg-new { font-size: .64rem; font-weight: 700; color: #fff; background: var(--glow); padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
.tg-avs { display: inline-flex; }
.tg-avs > * { margin-left: -3px; box-shadow: 0 0 0 2px var(--surface-2); border-radius: 50%; }
.tg-avs > *:first-child { margin-left: 0; }
.tg-act { justify-self: end; }
.tg-duo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.tg-duo + .tg-duo { margin-top: 8px; }
.tg-duo-main { flex: 1; min-width: 0; }
.tg-rk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--surface); border: 1px solid var(--line); flex: none; }
.tg-rk.g { background: linear-gradient(135deg, #ffe27a, #d4a017); color: #1a0f00; border: 0; }
.tg-sub { font-size: 1rem; margin: 16px 0 8px; }
.tg-matrix { display: grid; grid-template-columns: 100px repeat(var(--n), minmax(70px, 1fr)); gap: 4px; font-size: .8rem; min-width: calc(100px + var(--n) * 74px); }
.tg-matrix > div { padding: 8px 4px; text-align: center; border-radius: 6px; }
.tg-matrix .h { color: var(--muted); font-weight: 600; }
.tg-matrix .row-h { text-align: left; }
.tg-matrix .self, .tg-matrix .none { background: var(--surface-2); color: var(--faint); }
.tg-matrix .few { background: var(--surface-2); color: var(--faint); font-size: .72rem; }
@media (max-width: 700px) {
  .tg-game { grid-template-columns: auto 1fr; }
  .tg-avs { grid-column: 1 / -1; }
  .tg-act { grid-column: 1 / -1; justify-self: start; }
}

/* Rounds par carte */
.rounds-table tr.total td { border-top: 1px solid var(--line-2); background: rgba(177, 76, 255, .06); font-weight: 600; }
.rt-map { display: inline-block; padding: 4px 10px; border-radius: 6px; font-weight: 600; }
.rt-map.has-map { background: linear-gradient(90deg, rgba(8, 7, 11, .75), rgba(8, 7, 11, .35)), var(--map) center / cover no-repeat; min-width: 110px; }

/* Décoration Joueur du mois : anneau doré + couronne de laurier */
@keyframes decoPotm { 0%, 100% { filter: drop-shadow(0 0 4px #ffd34d); } 50% { filter: drop-shadow(0 0 11px #ffb020); } }
.deco-potm::before { --ring: conic-gradient(#fff3b0, #ffd34d 20%, #d4a017 40%, #fff3b0 55%, #ffb020 75%, #fff3b0); animation: decoSpin 4s linear infinite, decoPotm 2s ease-in-out infinite; }
.deco-potm::after { content: '★ MOIS'; left: 50%; bottom: -16%; transform: translateX(-50%); z-index: 3; font-family: var(--display); font-weight: 700; font-size: 8px; letter-spacing: .08em; color: #1a0f00; background: linear-gradient(135deg, #fff3b0, #d4a017); padding: 2px 6px 1px; border-radius: 4px; border: 1px solid rgba(255,255,255,.7); white-space: nowrap; }
.deco-potm.sm::after { font-size: 5px; padding: 1px 3px 0; bottom: -20%; }
.deco-potm.lg::after { font-size: 13px; padding: 3px 9px 2px; bottom: -12%; }

/* Carnet de scrims */
.scrim-card { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--line); }
.scrim-card.replay-yes { border-top-color: var(--win); } .scrim-card.replay-no { border-top-color: var(--loss); opacity: .85; } .scrim-card.replay-maybe { border-top-color: #ffb020; }
.scrim-replay { font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.06); }
.scrim-replay.yes { color: var(--win); } .scrim-replay.no { color: var(--loss); } .scrim-replay.maybe { color: #ffb020; }
.scrim-contact { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.scrim-contact b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrim-hist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scrim-hist > div { display: flex; flex-direction: column; gap: 2px; }
.scrim-recent { display: flex; flex-wrap: wrap; gap: 6px; }
.scrim-res { font-size: .78rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; text-decoration: none; color: var(--text); background: rgba(255,255,255,.06); border-left: 3px solid var(--line); }
.scrim-res span { font-weight: 400; opacity: .7; margin-left: 5px; }
.scrim-res.win { border-left-color: var(--win); } .scrim-res.loss { border-left-color: var(--loss); }
.scrim-next { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--glow); text-decoration: none; }
.scrim-next .i { width: 16px; height: 16px; }
.scrim-notes { margin: 0; white-space: pre-wrap; }

/* Joueur du mois */
.potm-hero { display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; background: linear-gradient(120deg, rgba(255,211,77,.16), rgba(255,77,94,.08) 60%, transparent); border: 1px solid rgba(255,211,77,.35); flex-wrap: wrap; }
.potm-crown { position: absolute; right: -10px; top: -24px; font-size: 120px; opacity: .08; pointer-events: none; }
.potm-hero h2 { margin: 2px 0; font-size: 1.8rem; }
.potm-hero-main { flex: 1; min-width: 180px; }
.potm-hero-act { display: flex; gap: 6px; flex-wrap: wrap; }
.potm-prize { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 99px; background: rgba(255,176,32,.16); color: #ffcf6b; font-weight: 600; font-size: .88rem; }
.potm-prize.given { background: rgba(47,212,122,.16); color: var(--win); }
.potm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.potm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.potm-list { display: flex; flex-direction: column; gap: 6px; }
.potm-row { border-radius: 12px; background: rgba(255,255,255,.03); }
.potm-row.won { background: rgba(255,211,77,.08); box-shadow: inset 0 0 0 1px rgba(255,211,77,.3); }
.potm-row summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.potm-row summary::-webkit-details-marker { display: none; }
.potm-main { flex: 1; min-width: 0; }
.potm-bar { display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.07); margin-top: 6px; }
.potm-bar span { height: 100%; transition: width .4s; }
.potm-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 12px 12px 52px; }
.potm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.potm-pts { float: right; font-weight: 700; }
.potm-vote { display: flex; flex-direction: column; gap: 6px; }
.potm-vote-btn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.potm-vote-btn .pv-name { flex: 1; font-weight: 500; }
.potm-vote-btn:hover { border-color: rgba(255,211,77,.5); }
.potm-vote-btn.on { border-color: #ffd34d; background: rgba(255,211,77,.12); }
.potm-vote-btn .i { color: #ffd34d; }
.potm-hof { display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line); }
.potm-hof:last-child { border-bottom: 0; }
.potm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: linear-gradient(135deg, #fff3b0, #d4a017); color: #1a0f00; font-weight: 700; font-size: .78rem; text-decoration: none; }
@media (max-width: 640px) { .potm-detail { grid-template-columns: 1fr; padding-left: 12px; } .scrim-hist { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.rounds-bf { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(177,76,255,.1); border: 1px solid rgba(177,76,255,.3); flex-wrap: wrap; }
.rounds-bf > .i { width: 18px; height: 18px; color: var(--glow); }

.potm-gift { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(120deg, rgba(255,211,77,.18), rgba(177,76,255,.12)); border: 1px solid rgba(255,211,77,.45); }
.potm-gift-ico { font-size: 30px; animation: giftBounce 2.4s ease-in-out infinite; }
@keyframes giftBounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }

/* Bibliothèque de strats */
.lib-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; }
.lib-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; }
.lib-item:hover { border-color: rgba(177,76,255,.5); }
.lib-item.has { opacity: .55; cursor: default; }
.lib-item input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--glow); flex: none; }
.lib-main { flex: 1; min-width: 0; }
.lib-prev { margin-top: 3px; }
.modal.lg { max-width: 760px; }

/* Éditeur de strat */
.modal.xl { max-width: 1120px; }
.se-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
.se-tools { display: flex; flex-direction: column; gap: 12px; }
.se-group { display: flex; flex-wrap: wrap; gap: 6px; }
.se-tool { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; text-align: left; }
.se-tool span { width: 22px; text-align: center; font-size: 1.05rem; }
.se-tool.on { border-color: var(--glow); background: rgba(177,76,255,.18); }
.se-color { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: .78rem; cursor: pointer; }
.se-color i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.se-color.on { border-color: var(--c); background: rgba(255,255,255,.07); }
.se-opt { flex-direction: column; flex-wrap: nowrap; }
.se-actions .btn { flex: 1; }
.se-stage { position: relative; }
.se-canvas { width: 100%; max-width: min(100%, 72vh); aspect-ratio: 1; display: block; margin: 0 auto; border-radius: 12px; border: 1px solid var(--line-2); touch-action: none; background: #16131f; }
.se-nomap { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; background: rgba(0,0,0,.6); }
.se-hint { text-align: center; margin: 8px 0 0; }
@media (max-width: 760px) {
  .se-wrap { grid-template-columns: 1fr; }
  .se-tools { order: 2; }
  .se-group:first-child { display: grid; grid-template-columns: repeat(4, 1fr); }
  .se-tool { flex-direction: column; gap: 2px; padding: 6px 4px; text-align: center; font-size: .66rem; }
  .se-tool small { line-height: 1.1; }
}
.se-opt[hidden] { display: none; }

/* Glisser pour rafraîchir (app installée) */
.ptr-on, .ptr-on body { overscroll-behavior-y: contain; }
.ptr { position: fixed; top: calc(env(safe-area-inset-top, 0px) - 44px); left: 50%; transform: translate(-50%, 0); z-index: 90; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 6px 20px rgba(0,0,0,.45); color: var(--muted); opacity: 0; transition: opacity .15s; pointer-events: none; }
.ptr.pulling, .ptr.spin { opacity: 1; }
.ptr.ready { color: var(--glow); border-color: var(--glow); }
.ptr-ico { font-size: 20px; font-weight: 700; line-height: 1; }
.ptr.spin .ptr-ico { animation: ptrSpin .7s linear infinite; color: var(--glow); }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* Assistant de match */
.ma-wrap { max-width: 560px; margin: 0 auto; }
.ma { display: flex; flex-direction: column; gap: 12px; }
.ma-score { text-align: center; position: relative; overflow: hidden; }
.ma-score.has-map::before { content: ''; position: absolute; inset: 0; background: var(--map) center/cover; opacity: .18; }
.ma-score > * { position: relative; }
.ma-big { font-family: var(--display); font-size: 4rem; font-weight: 700; line-height: 1.1; display: flex; justify-content: center; gap: 14px; }
.ma-big i { color: var(--faint); font-style: normal; }
.ma-big .win { color: var(--win); } .ma-big .loss { color: var(--loss); }
.ma-strip { display: flex; flex-direction: column; gap: 4px; align-items: center; margin-top: 10px; }
.ma-half { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.ma-half .rd { width: 20px; height: 20px; font-size: 10px; display: grid; place-items: center; }
.ma-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ma-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 10px; border-radius: 16px; font-size: 2rem; border: 2px solid; cursor: pointer; font-family: inherit; color: var(--text); }
.ma-btn span { font-size: .95rem; font-weight: 700; }
.ma-btn.win { background: rgba(47,212,122,.12); border-color: rgba(47,212,122,.55); }
.ma-btn.loss { background: rgba(255,77,94,.12); border-color: rgba(255,77,94,.55); }
.ma-btn:active { transform: scale(.97); }
.ma-eco { justify-content: center; }
.ma-calm { text-align: center; padding: 10px; }
.ma-alert { border-radius: 14px; padding: 14px 16px; border: 1px solid; }
.ma-alert.red { background: rgba(255,77,94,.13); border-color: rgba(255,77,94,.6); animation: maPulse 1.6s ease-in-out 3; }
.ma-alert.orange { background: rgba(255,154,46,.12); border-color: rgba(255,154,46,.55); }
.ma-alert.green { background: rgba(47,212,122,.1); border-color: rgba(47,212,122,.5); }
.ma-alert ul { margin: 8px 0 0; padding-left: 18px; font-size: .9rem; line-height: 1.5; }
.ma-alert-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.ma-advice { font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: rgba(0,0,0,.3); }
.ma-alert-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ma-ai { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(177,76,255,.12); border: 1px solid rgba(177,76,255,.35); line-height: 1.5; }
@keyframes maPulse { 50% { box-shadow: 0 0 0 6px rgba(255,77,94,.18); } }
.ma-foot { display: flex; justify-content: space-between; gap: 8px; }
.ma-end { text-align: center; }
/* Moments clés */
.km-list { display: flex; flex-direction: column; gap: 8px; }
.km { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border-left: 3px solid var(--line-2); }
.km.red { border-left-color: var(--loss); } .km.orange { border-left-color: var(--soon); }
.km-round { font-family: var(--display); font-weight: 700; min-width: 34px; color: var(--muted); }

.discord-btn { background: #5865f2; color: #fff; border-color: #5865f2; justify-content: center; gap: 10px; }
.discord-btn:hover { background: #4752c4; }
.auth-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--faint); font-size: .8rem; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ================= Page d'accueil publique ================= */
.hp { --gold: #ffd34d; min-height: 100vh; background: var(--bg); position: relative; z-index: 1; }
.hp-wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.hp-top { position: sticky; top: 0; z-index: 30; background: rgba(8,7,11,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hp-top .hp-wrap { display: flex; align-items: center; gap: 22px; height: 64px; }
.hp-brand { display: flex; gap: 10px; align-items: center; font-family: var(--display); font-weight: 700; letter-spacing: .06em; text-decoration: none; color: var(--text); white-space: nowrap; }
.hp-brand img { width: 36px; height: 36px; object-fit: contain; }
.hp-links { display: flex; gap: 20px; flex: 1; font-size: .9rem; }
.hp-links a { color: var(--muted); text-decoration: none; } .hp-links a:hover { color: var(--text); }
.hp-account { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hp-me { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.hp-me img { width: 28px; height: 28px; border-radius: 50%; }
.hp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: .92rem; border: 1px solid transparent; color: #fff; cursor: pointer; font-family: inherit; background: none; }
.hp-btn.primary { background: linear-gradient(135deg, #7a2cff, var(--glow)); box-shadow: 0 8px 24px rgba(177,76,255,.35); }
.hp-btn.discord { background: #5865f2; }
.hp-btn.ghost { border-color: var(--line-2); background: rgba(255,255,255,.03); color: var(--text); }
.hp-btn.sm { padding: 8px 13px; font-size: .82rem; }
.hp-hero { position: relative; overflow: hidden; padding: 84px 0 80px; text-align: center; }
.hp-hero::before { content: ''; position: absolute; inset: 0; background: url(/assets/bg-gaming.jpg) center/cover; opacity: .7; }
.hp-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(8,7,11,.2), rgba(8,7,11,.96) 75%); }
.hp-hero .hp-wrap { position: relative; z-index: 1; }
.hp-logo img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 0 40px rgba(177,76,255,.6)); }
.hp-hero h1 { font-family: var(--display); font-size: clamp(2.4rem, 7vw, 4.6rem); margin: 14px 0 6px; letter-spacing: .04em; line-height: 1; }
.hp-sub { color: var(--glow); font-weight: 700; letter-spacing: .22em; font-size: .82rem; text-transform: uppercase; }
.hp-hero p { color: #cfc9da; max-width: 600px; margin: 16px auto 0; line-height: 1.6; }
.hp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.hp-counters { display: flex; gap: 12px; margin-top: -34px; position: relative; z-index: 2; }
.hp-counters > div { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; text-align: center; }
.hp-counters b { display: block; font-family: var(--display); font-size: 2rem; }
.hp-counters span { color: var(--muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.hp-sec { padding-top: 56px; scroll-margin-top: 70px; }
.hp-head { margin-bottom: 18px; }
.hp-head h2 { font-family: var(--display); font-size: 1.8rem; margin: 0; }
.hp-eyebrow { color: var(--glow); font-size: .75rem; font-weight: 700; letter-spacing: .2em; }
.hp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.hp-muted { color: var(--muted); font-size: .88rem; }
.hp-feature { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.hp-versus { position: relative; overflow: hidden; padding: 26px; background: linear-gradient(120deg, rgba(177,76,255,.24), rgba(20,17,28,.95) 55%), linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45)), url(/assets/bg-gaming.jpg) center/cover; }
.hp-live { font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--gold); }
.hp-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 26px 0; }
.hp-team { text-align: center; } .hp-team small { display: block; color: var(--muted); font-size: .78rem; }
.hp-ico { width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 20px; display: grid; place-items: center; background: rgba(0,0,0,.35); border: 1px solid var(--line-2); }
.hp-ico img { width: 64px; height: 64px; object-fit: contain; }
.hp-ico.unk { font-family: var(--display); font-size: 2rem; color: var(--muted); }
.hp-vs { font-family: var(--display); font-size: 2.2rem; color: var(--glow); font-weight: 700; }
.hp-meta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hp-meta span { padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,.4); border: 1px solid var(--line-2); font-size: .82rem; }
.hp-count { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.hp-count div { min-width: 64px; padding: 10px; border-radius: 10px; background: rgba(0,0,0,.45); text-align: center; }
.hp-count b { display: block; font-family: var(--display); font-size: 1.6rem; } .hp-count span { font-size: .68rem; color: var(--muted); }
.hp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 60px 10px; text-align: center; color: var(--muted); }
.hp-empty b { color: var(--text); font-size: 1.1rem; }
.hp-side { display: flex; flex-direction: column; gap: 16px; }
.hp-last { padding: 18px; }
.hp-r { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hp-r:last-child { border: 0; }
.hp-r small { display: block; color: var(--muted); font-size: .76rem; }
.hp-sc { font-family: var(--display); font-weight: 700; padding: 4px 10px; border-radius: 8px; min-width: 60px; text-align: center; background: rgba(255,255,255,.06); }
.hp-sc.w { color: var(--win); background: rgba(47,212,122,.12); } .hp-sc.l { color: var(--loss); background: rgba(255,77,94,.12); }
.hp-potm { padding: 18px; background: linear-gradient(120deg, rgba(255,211,77,.15), var(--surface) 70%); border-color: rgba(255,211,77,.4); }
.hp-potm > div { color: var(--gold); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.hp-potm b { display: block; font-size: 1.25rem; } .hp-potm small { color: var(--muted); }
.hp-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hp-game { position: relative; overflow: hidden; min-height: 230px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.hp-game::before { content: ''; position: absolute; inset: 0; background: var(--img); opacity: .9; }
.hp-game::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,7,11,.95) 15%, rgba(8,7,11,.2)); }
.hp-game > * { position: relative; z-index: 1; }
.hp-game h3 { font-family: var(--display); font-size: 1.5rem; margin: auto 0 4px; }
.hp-game p { margin: 0 0 14px; color: #cfc9da; font-size: .88rem; line-height: 1.5; }
.hp-tag { font-size: .72rem; font-weight: 800; letter-spacing: .1em; padding: 4px 9px; border-radius: 6px; }
.hp-tag.on { background: var(--win); color: #062b16; } .hp-tag.soon { background: rgba(255,255,255,.12); color: var(--muted); }
.hp-shop { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; padding: 22px; overflow: hidden; }
.hp-shop-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hp-shop-ph { aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--c), #0e0c14 72%); filter: grayscale(.25); }
.hp-shop-ph img { width: 46%; height: auto; opacity: .85; }
.hp-shop-txt h3 { font-family: var(--display); font-size: 1.5rem; margin: 10px 0 6px; }
.hp-shop-txt p { color: var(--muted); line-height: 1.55; margin: 0 0 14px; }
.hp-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hp-new { padding: 18px; }
.hp-date { color: var(--glow); font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
.hp-new h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.hp-new p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; white-space: pre-line; }
.hp-join { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp-join .hp-card { padding: 24px; }
.hp-join h3 { font-family: var(--display); font-size: 1.35rem; margin: 0 0 8px; }
.hp-join p { color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
.hp-discord { background: linear-gradient(135deg, rgba(88,101,242,.35), rgba(20,17,28,.95)) !important; border-color: rgba(88,101,242,.6) !important; }
.hp-recruit { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.hp-recruit li { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,.04); font-size: .9rem; }
.hp-partners { display: flex; gap: 12px; flex-wrap: wrap; }
.hp-partners > * { flex: 1; min-width: 160px; height: 84px; border-radius: 12px; border: 1px dashed var(--line-2); display: grid; place-items: center; color: var(--faint); font-size: .85rem; text-decoration: none; }
.hp-foot { margin-top: 60px; border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--faint); font-size: .82rem; }
.hp-foot .hp-wrap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.hp-socials { display: flex; gap: 8px; }
.hp-socials a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: .78rem; color: var(--muted); font-weight: 700; }
.hp-link { background: none; border: 0; color: var(--faint); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
@media (max-width: 820px) {
  .hp-links { display: none; }
  .hp-brand span { display: none; }
  .hp-counters { flex-wrap: wrap; } .hp-counters > div { flex: 1 1 40%; }
  .hp-feature, .hp-join, .hp-shop { grid-template-columns: 1fr; }
  .hp-games, .hp-news { grid-template-columns: 1fr; }
  .hp-hero { padding: 54px 0 70px; } .hp-logo img { width: 110px; height: 110px; }
  .hp-teams { gap: 8px; } .hp-ico { width: 64px; height: 64px; } .hp-ico img { width: 48px; height: 48px; } .hp-vs { font-size: 1.6rem; }
}
.hp-logo img { display: block; margin: 0 auto; }
.rec-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 6px; }

/* Pied de page public */
.hp-foot { margin-top: 70px; border-top: 1px solid var(--line); padding: 44px 0 0; color: var(--muted); font-size: .88rem; background: linear-gradient(180deg, transparent, rgba(177,76,255,.05)); }
.hp-foot .hp-wrap.hp-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 28px; align-items: start; }
.hp-foot h4 { color: var(--text); font-family: var(--display); font-size: .95rem; letter-spacing: .06em; margin: 4px 0 12px; text-transform: uppercase; }
.hp-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.hp-foot a { color: var(--muted); text-decoration: none; } .hp-foot a:hover { color: var(--text); }
.hp-foot-brand p { margin: 12px 0; line-height: 1.55; max-width: 300px; }
.hp-status { display: inline-block; padding: 5px 10px; border-radius: 8px; background: rgba(255,211,77,.1); border: 1px solid rgba(255,211,77,.3); color: #ffdf7a; font-size: .8rem; }
.hp-soc-list a { display: inline-flex; align-items: center; gap: 9px; word-break: break-all; }
.hp-soc-list svg { flex: none; color: var(--glow); }
.hp-faint { color: var(--faint); }
.hp-foot .hp-wrap.hp-foot-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding: 18px 16px 28px; border-top: 1px solid var(--line); color: var(--faint); font-size: .8rem; }
.hp-legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.hp-legal-links a, .hp-legal-links .hp-link { color: var(--faint); }
.hp-legal { margin: 36px auto 0; max-width: 820px; padding: 30px; line-height: 1.65; }
.hp-legal h1 { font-family: var(--display); margin-top: 0; }
.hp-legal h2 { font-size: 1.1rem; margin: 26px 0 8px; color: var(--glow); }
.hp-legal a { color: var(--glow); }
@media (max-width: 900px) { .hp-foot .hp-wrap.hp-foot-grid { grid-template-columns: 1fr 1fr; } .hp-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 820px) { .hp-foot .hp-brand span { display: inline; } }

/* Boutique, partenaires, contact */
.hp-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hp-prod { overflow: hidden; display: flex; flex-direction: column; }
.hp-prod-ph { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3a1a4e, #0e0c14 72%); position: relative; }
.hp-prod-ph img { width: 100%; height: 100%; object-fit: cover; }
.hp-prod-ph > img[alt="Sauvagerie Gaming"] { width: 44%; height: auto; object-fit: contain; }
.hp-prod-badge { position: absolute; top: 10px; left: 10px; background: var(--gold); color: #1a0f00; font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.hp-prod-bd { padding: 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.hp-prod-bd small { color: var(--muted); }
.hp-prod-pr { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; gap: 8px; }
.hp-prod-pr > span:first-child { font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.hp-partners { display: flex; gap: 12px; flex-wrap: wrap; }
.hp-partner { flex: 1; min-width: 160px; height: 90px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; padding: 12px; color: var(--text); text-decoration: none; font: inherit; }
.hp-partner img { max-width: 100%; max-height: 60px; object-fit: contain; }
.hp-partner.empty { border-style: dashed; color: var(--faint); background: transparent; font-size: .85rem; }
.hp-partner.cta { border: 1px dashed rgba(177,76,255,.6); color: #d9a6ff; background: rgba(177,76,255,.08); cursor: pointer; font-weight: 700; }
.hp-partner.cta:hover { background: rgba(177,76,255,.16); }
.hp-choices { display: grid; gap: 8px; }
.hp-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); text-decoration: none; font-size: 1.3rem; }
.hp-choice:hover { border-color: var(--glow); }
.hp-choice svg { color: var(--glow); width: 22px; height: 22px; }
.hp-choice b { display: block; font-size: .95rem; } .hp-choice span { color: var(--muted); font-size: .8rem; }
.hp-contact { max-width: 860px; }
.hp-kinds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 18px 0; }
.hp-kind { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.hp-kind span { font-size: 1.4rem; } .hp-kind b { font-size: .85rem; } .hp-kind small { color: var(--muted); font-size: .72rem; line-height: 1.3; }
.hp-kind.on { border-color: var(--glow); background: rgba(177,76,255,.14); }
.hp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hp-sent { text-align: center; padding: 20px 0; }
@media (max-width: 820px) { .hp-products { grid-template-columns: repeat(2, 1fr); } .hp-kinds { grid-template-columns: 1fr 1fr; } }

/* Espace staff : messages et site public */
.tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--loss); color: #fff; font-size: .7rem; margin-left: 4px; }
.inbox { display: flex; flex-direction: column; gap: 12px; }
.inbox-item { display: flex; flex-direction: column; gap: 10px; }
.inbox-item.is-new { border-left: 3px solid var(--glow); }
.inbox-contact { display: flex; gap: 8px; flex-wrap: wrap; }
.inbox-extra { margin: 0; }
.inbox-msg { margin: 0; white-space: pre-wrap; line-height: 1.55; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); }
.sp-img { min-height: 90px; display: grid; place-items: center; border-radius: 10px; border: 1px dashed var(--line-2); padding: 8px; }
.sp-img img { max-width: 100%; max-height: 180px; object-fit: contain; border-radius: 6px; }
.sp-thumb { width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; flex: none; font-weight: 700; color: var(--muted); }
.sp-thumb img { width: 100%; height: 100%; object-fit: contain; }

.hp-kinds { grid-template-columns: repeat(var(--n, 5), 1fr); }
.hp-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 14px; }
.hp-offer { display: flex; gap: 16px; padding: 18px; align-items: flex-start; }
.hp-offer-logo { width: 96px; height: 96px; flex: none; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: grid; place-items: center; padding: 10px; color: var(--text); text-decoration: none; }
.hp-offer-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hp-offer-bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hp-offer-name { font-family: var(--display); font-size: 1.2rem; }
.hp-offer-bd p { margin: 0; color: var(--muted); line-height: 1.5; font-size: .9rem; }
.hp-offer-deal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: rgba(255,211,77,.1); border: 1px solid rgba(255,211,77,.35); color: #ffe08a; font-weight: 600; font-size: .9rem; }
.hp-code { font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .08em; padding: 4px 10px; border-radius: 7px; border: 1px dashed #ffd34d; background: rgba(0,0,0,.35); color: #fff; cursor: pointer; }
.hp-code:hover { background: rgba(255,211,77,.2); }
.forms-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.form-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; }
.form-toggle.on { border-color: rgba(47,212,122,.5); background: rgba(47,212,122,.07); }
.form-toggle b { font-size: .9rem; } .form-toggle small { display: block; color: var(--muted); font-size: .75rem; }
.switch { position: relative; width: 40px; height: 22px; flex: none; border-radius: 99px; background: var(--line-2); transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.form-toggle.on .switch { background: var(--win); } .form-toggle.on .switch::after { left: 21px; }
.inbox-logo { width: 120px; height: 80px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: grid; place-items: center; padding: 8px; }
.inbox-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Discussion des demandes */
.hp-thread { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow-y: auto; padding: 4px; margin: 16px 0; }
.staff-thread { max-height: 50vh; margin-top: 0; }
.hp-bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; font-size: .92rem; }
.hp-bubble-head { font-size: .72rem; color: var(--muted); margin-bottom: 4px; white-space: normal; }
.hp-bubble.me, .hp-bubble.staff-me { align-self: flex-end; background: rgba(177,76,255,.18); border: 1px solid rgba(177,76,255,.4); border-bottom-right-radius: 4px; }
.hp-bubble.staff, .hp-bubble.them, .hp-bubble.me-staff { align-self: flex-start; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.hp-bubble.staff { border-color: rgba(47,212,122,.45); background: rgba(47,212,122,.08); }
.hp-wait { align-self: center; text-align: center; color: var(--muted); font-size: .85rem; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line-2); max-width: 520px; }
.hp-reply { display: flex; gap: 10px; align-items: flex-end; }
.hp-reply textarea { flex: 1; }
.hp-ticket-link { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 16px auto; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); max-width: 560px; }
.hp-ticket-link span { color: var(--muted); font-size: .85rem; }
.hp-ticket-link code { font-size: .8rem; word-break: break-all; color: #d9a6ff; }
.hp-tickets-btn { position: fixed; right: 18px; bottom: 18px; z-index: 40; padding: 12px 18px; border-radius: 99px; border: 1px solid rgba(177,76,255,.6); background: #1b1428; color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.hp-tickets-btn span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 99px; background: var(--loss); font-size: .75rem; margin-left: 4px; }
.hp-tickets-btn.unread { animation: maPulse 1.6s ease-in-out infinite; }
.hp-new-dot { font-size: .72rem; font-weight: 800; color: #fff; background: var(--loss); padding: 3px 8px; border-radius: 99px; white-space: nowrap; }

/* iPhone (encoche / Dynamic Island) : la barre du haut du site public passe sous l'heure et la batterie */
.hp-top { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.hp-tickets-btn { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.hp-foot .hp-wrap.hp-foot-bottom { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }

/* Paramètres du site public */
.hp-gear { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text); cursor: pointer; }
.hp-gear:hover { border-color: var(--glow); color: var(--glow); }
.hp-me span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-set { display: flex; flex-direction: column; gap: 14px; }
.hp-set-me { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: linear-gradient(120deg, rgba(177,76,255,.16), rgba(255,255,255,.02)); border: 1px solid rgba(177,76,255,.3); }
.hp-set-me img, .hp-set-av { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; }
.hp-set-av { display: grid; place-items: center; background: var(--surface-2); font-weight: 800; font-size: 1.2rem; color: var(--glow); }
.hp-set-me b { display: block; font-size: 1.05rem; } .hp-set-me small { color: var(--muted); font-size: .8rem; word-break: break-word; }
.hp-set-group { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.hp-set-title { padding: 10px 14px 6px; font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.hp-set-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: rgba(255,255,255,.02); border: 0; border-top: 1px solid var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.hp-set-group > .hp-set-row:first-child { border-top: 0; }
.hp-set-row:hover { background: rgba(177,76,255,.08); }
.hp-set-row.danger, .hp-set-row.danger .hp-set-chev { color: var(--loss); }
.hp-set-ico { width: 24px; text-align: center; font-size: 1.1rem; }
.hp-set-label { flex: 1; font-weight: 600; }
.hp-set-chev { color: var(--faint); font-size: 1.3rem; line-height: 1; }
.hp-set-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--glow); color: #fff; font-size: .75rem; display: grid; place-items: center; font-weight: 700; }
.hp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px 10px; }
.hp-seg button { padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.hp-seg button.on { border-color: var(--glow); background: rgba(177,76,255,.18); }
.hp-set-foot { text-align: center; font-size: .78rem; color: var(--faint); margin: 0; }
.hp-set-foot a { color: var(--muted); }
@media (max-width: 820px) { .hp-me span { display: none; } }
button.hp-choice { width: 100%; font: inherit; font-size: 1.3rem; cursor: pointer; text-align: left; }
.dc-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.dc-row:first-of-type { border-top: 0; }
.dc-row .input { flex: 1; }

/* Boutique : voir l'article en grand */
.hp-prod { cursor: pointer; transition: transform .15s, border-color .15s; }
.hp-prod:hover { transform: translateY(-2px); border-color: rgba(177,76,255,.5); }
.hp-zoom { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); font-size: .9rem; z-index: 1; }
.hp-prod-view { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.hp-prod-big { position: relative; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a1a4e, #0e0c14 72%); display: grid; place-items: center; min-height: 260px; }
.hp-prod-big img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; cursor: zoom-in; transition: transform .25s; }
.hp-prod-big img.zoomed { transform: scale(1.8); cursor: zoom-out; }
.hp-prod-big > img[alt="Sauvagerie Gaming"] { width: 40%; cursor: default; }
.hp-prod-info { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hp-prod-info p { margin: 0; color: var(--muted); line-height: 1.55; }
.hp-prod-price { font-family: var(--display); font-size: 2rem; font-weight: 700; }
@media (max-width: 700px) { .hp-prod-view { grid-template-columns: 1fr; } }

/* ===== Séries de scrims & pick/ban ===== */
.ss-block { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ss-title { font-weight: 700; font-size: .86rem; }
.ss-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); flex-wrap: wrap; }
.ss-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-main > b { font-family: var(--display); }
.ss-acts { display: flex; gap: 4px; align-items: center; }
.ss-hist { border-top: 1px solid var(--line); padding-top: 8px; }
.ss-hist summary { cursor: pointer; font-weight: 700; font-size: .86rem; list-style: none; }
.ss-hist summary::-webkit-details-marker { display: none; }
.ss-hist summary::before { content: '▸ '; color: var(--glow); }
.ss-hist[open] summary::before { content: '▾ '; }
.ss-hist .scrim-recent, .ss-done { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ss-hist .scrim-recent { flex-direction: row; flex-wrap: wrap; }
.vb { display: flex; flex-direction: column; gap: 14px; }
.vb-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.vb-team { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); display: flex; flex-direction: column; min-width: 0; }
.vb-team b { font-family: var(--display); font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-team small { color: var(--faint); font-size: .72rem; min-height: 1em; }
.vb-team.r { text-align: right; }
.vb-team.turn { border-color: var(--glow); box-shadow: 0 0 0 3px var(--glow-soft); }
.vb-vs { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--display); color: var(--muted); font-weight: 800; }
.vb-turn { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: .92rem; }
.vb-turn.mine { background: var(--info-bg); border: 1px solid var(--glow); animation: vbpulse 1.6s ease-in-out infinite; }
@keyframes vbpulse { 50% { box-shadow: 0 0 0 4px var(--glow-soft); } }
.vb-steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.vb-step { flex: 0 0 auto; min-width: 92px; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .72rem; background: var(--bg-2); opacity: .55; }
.vb-step i { font-style: normal; font-weight: 800; letter-spacing: .08em; color: var(--loss); }
.vb-step.pick i { color: var(--win); } .vb-step.decider i { color: #ffd34d; }
.vb-step b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.vb-step small { color: var(--muted); }
.vb-step.done { opacity: 1; } .vb-step.now { opacity: 1; border-color: var(--glow); }
.vb-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vb-map { position: relative; height: 96px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface-2) var(--img) center / cover; color: #fff; font-family: inherit; text-align: left; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; overflow: hidden; cursor: default; }
.vb-map::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.75)); }
.vb-map > * { position: relative; }
.vb-name { font-family: var(--display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.vb-tag { font-size: .72rem; font-weight: 700; }
.vb-wr { position: absolute !important; top: 8px; right: 8px; font-size: .68rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.6); }
.vb-wr.good { color: var(--win); } .vb-wr.bad { color: var(--loss); }
.vb-map.can { cursor: pointer; border-color: var(--glow-soft); }
.vb-map.can:hover { border-color: var(--glow); transform: translateY(-2px); transition: .15s; }
.vb-map.ban { filter: grayscale(1); opacity: .45; }
.vb-map.ban .vb-tag { color: var(--loss); }
.vb-map.pick { border-color: var(--win); } .vb-map.pick .vb-tag { color: var(--win); }
.vb-map.decider { border-color: #ffd34d; } .vb-map.decider .vb-tag { color: #ffd34d; }
.vb-map:disabled:not(.ban):not(.pick):not(.decider) { opacity: .85; }
.vb-link { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.vb-link code { background: var(--bg-2); padding: 6px 8px; border-radius: 6px; font-size: .78rem; word-break: break-all; flex: 1; min-width: 0; }
.pb-card { max-width: 980px; }
@media (max-width: 560px) { .vb-maps { grid-template-columns: repeat(2, 1fr); } .vb-map { height: 80px; } .vb-team b { font-size: .9rem; } }

/* ===== Clips ===== */
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.clip-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.clip-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, var(--accent), var(--surface-2)); cursor: pointer; padding: 0; color: #fff; font-family: inherit; }
.clip-thumb.twitch { background: linear-gradient(135deg, #6441a5, #2c1a4d); }
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-site { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.1rem; opacity: .8; }
.clip-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.6); display: grid; place-items: center; font-size: 1.1rem; border: 2px solid rgba(255,255,255,.7); transition: .15s; }
.clip-thumb:hover .clip-play { background: var(--glow); border-color: #fff; }
.clip-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clip-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-acts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.clip-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-sm); overflow: hidden; }
.clip-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal.lg { max-width: 900px; }

/* ===== Live sur la page d'accueil ===== */
.hp-live.on { color: var(--loss); display: inline-flex; align-items: center; gap: 6px; }
.hp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--loss); box-shadow: 0 0 0 0 rgba(255,77,94,.7); animation: hpdot 1.4s infinite; }
@keyframes hpdot { 70% { box-shadow: 0 0 0 8px rgba(255,77,94,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,94,0); } }
.hp-stream { margin-top: 14px; flex-direction: column; gap: 0; align-items: center; }
.hp-stream small { font-weight: 500; opacity: .75; font-size: .75rem; }
.hp-btn.live { background: var(--loss); }
.clip-site { inset: auto; left: 10px; top: 10px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.clip-info .badge { align-self: flex-start; }
.ss-main > .badge { align-self: flex-start; }
.clip-thumb img.broken { display: none; }

/* ===== Tournois ===== */
.cup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cup-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; border-top: 3px solid var(--line-2); transition: .15s; }
.cup-card:hover { transform: translateY(-2px); border-color: var(--glow); }
.cup-card.open { border-top-color: var(--win); } .cup-card.live { border-top-color: var(--loss); }
.cup-card h3 { margin: 0; font-family: var(--display); font-size: 1.25rem; }
.cup-desc { margin: 0; color: var(--muted); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cup-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); align-items: center; }
.cup-meta .badge { display: inline-flex; align-items: center; gap: 6px; }
.cup-bar { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.cup-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--glow)); }
.cup-card .hp-btn { align-self: flex-start; }
.badge.live { background: var(--loss-bg); color: var(--loss); }
.cup-hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.cup-how ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); }
.cup-how h3 { margin: 0; }
.cup-head { padding: 28px 0 0; background: linear-gradient(180deg, rgba(76,0,76,.35), transparent); border-bottom: 1px solid var(--line); }
.cup-head h1 { margin: 6px 0 10px; font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.4rem); }
.cup-tabs { margin-top: 18px; border-bottom: 0; overflow-x: auto; }
.cup-body { padding-top: 20px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
.cup-info-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.cup-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cup-facts div { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
.cup-facts span { font-size: .72rem; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.cup-rules { white-space: pre-line; font-size: .9rem; color: var(--muted); }
.cup-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cup-team { display: flex; flex-direction: column; gap: 10px; }
.cup-players { display: flex; flex-direction: column; gap: 6px; }
.cup-pl { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); font-size: .88rem; }
.cup-pl.sub { opacity: .8; }
.cup-pl a { color: var(--glow); text-decoration: none; white-space: nowrap; }
.cup-rank { font-weight: 700; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.cup-ok { color: var(--win); font-weight: 800; }
.cup-champ { padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(90deg, rgba(255,211,77,.18), transparent); border: 1px solid rgba(255,211,77,.5); font-size: 1.05rem; }
.bk-sec h3 { margin: 6px 0 10px; font-family: var(--display); }
.bk { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; }
.bk-col { flex: 0 0 220px; display: flex; flex-direction: column; }
.bk-title { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.bk-list { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; flex: 1; }
.bm { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 0; font-family: inherit; color: var(--text); cursor: pointer; text-align: left; overflow: hidden; }
.bm:hover { border-color: var(--glow); }
.bm.mine { border-color: var(--glow); box-shadow: 0 0 0 2px var(--glow-soft); }
.bm.dispute { border-color: var(--soon); }
.bm-team { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; font-size: .86rem; border-bottom: 1px solid var(--line); }
.bm-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-team.win { font-weight: 800; background: var(--win-bg); } .bm-team.win b { color: var(--win); }
.bm-team.tbd { color: var(--faint); font-style: italic; }
.bm-foot { display: flex; justify-content: space-between; gap: 6px; padding: 4px 10px; font-size: .7rem; color: var(--faint); align-items: center; }
.bm-tag { font-weight: 800; padding: 1px 6px; border-radius: 5px; }
.bm-tag.ready { background: var(--info-bg); color: var(--glow); } .bm-tag.dispute { background: var(--soon-bg); color: var(--soon); }
.mm-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; text-align: center; font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.mm-score b { font-size: 1.6rem; color: var(--glow); }
.mm-score .win { color: var(--win); }
.mm-games { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; justify-content: center; }
.mm-games span { padding: 4px 10px; border-radius: 6px; background: var(--surface-2); font-size: .85rem; }
.mm-box { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.mm-box.staff { border-color: rgba(177,76,255,.4); }
.mm-box h4 { margin: 0 0 8px; }
.mm-list { display: flex; flex-direction: column; gap: 6px; }
.mm-list .row { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; color: inherit; text-align: left; cursor: pointer; }
.reg-players { display: flex; flex-direction: column; gap: 6px; }
.reg-row { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 8px; align-items: center; }
.reg-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; font-size: .8rem; }
.reg-form { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.cup-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.cup-steps div { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.cup-steps div.ok { border-color: var(--win); color: var(--win); }
.cup-mrow { align-items: flex-start; flex-wrap: wrap; }
@media (max-width: 760px) {
  .cup-info-grid { grid-template-columns: 1fr; } .cup-steps { grid-template-columns: 1fr 1fr; }
  .reg-row { grid-template-columns: 26px 1fr; } .reg-row [data-discord] { grid-column: 2; }
  .cup-pl { grid-template-columns: 1fr auto; } .cup-pl a { grid-column: 1 / -1; }
  .bk-col { flex-basis: 190px; }
}
.cup-card, .cup-how, .cup-body .hp-card, #hp-tournois .hp-card { padding: 20px; }
.cup-body .hp-card h3 { margin-top: 14px; } .cup-body .hp-card h2 + .vb-link, .cup-body .hp-card .vb-link { margin: 10px 0; }
.cup-body .hp-empty, .cup-grid + .hp-empty { padding: 28px; }
@media (max-width: 560px) { .cup-card, .cup-how, .cup-body .hp-card { padding: 16px; } }
.vb-sides { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vb-side { font-size: .72rem; font-weight: 700; color: #ffd34d; }
.vb-map.siding { border-color: var(--glow); box-shadow: 0 0 0 3px var(--glow-soft); }
.vb-step.side i { color: #7fb4ff; }
.vb-step.side.decider i { color: #ffd34d; }
.hp-team-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.roster-row { grid-template-columns: 28px 1fr 1fr auto auto; }
.cup-team.mine { border-color: var(--glow); }
@media (max-width: 760px) { .roster-row { grid-template-columns: 26px 1fr; } .roster-row .check { grid-column: 2; } }
.hp-games { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ===== Logos et encadrement des équipes ===== */
.tlogo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: var(--bg-2); border: 1px solid var(--line); flex: 0 0 auto; }
.tlogo.ph { display: inline-grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: .85rem; color: var(--muted); }
.tlogo.xs { width: 20px; height: 20px; border-radius: 5px; font-size: .55rem; }
.tlogo.md { width: 56px; height: 56px; border-radius: 12px; font-size: 1rem; }
.tlogo.lg { width: 72px; height: 72px; border-radius: 14px; font-size: 1.2rem; }
.team-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bm-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bm-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-score > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.staff-line { display: flex; flex-wrap: wrap; gap: 6px; }
.staff-chip { font-size: .78rem; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.staff-chip b { color: var(--glow); font-weight: 700; margin-right: 2px; }
.links-line { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; }
.links-line a { color: var(--glow); text-decoration: none; }
.logo-pick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.staff-rows { display: flex; flex-direction: column; gap: 6px; }
.staff-row { display: grid; grid-template-columns: 1fr 140px 1fr; gap: 8px; }
.link-rows { gap: 8px; }
.checkin-box { margin: 12px 0; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--soon); background: var(--soon-bg); display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.checkin-box.ok { border-color: var(--win); background: var(--win-bg); }
.cup-mrow .tlogo { margin-top: 2px; }
@media (max-width: 760px) { .staff-row { grid-template-columns: 1fr 120px; } .staff-row [data-st-discord] { grid-column: 1 / -1; } }
/* ===== Tuiles et fiches d'équipe ===== */
.team-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.team-tile { display: flex; align-items: center; gap: 14px; padding: 16px !important; text-decoration: none; color: inherit; transition: .15s; }
.team-tile:hover { border-color: var(--glow); transform: translateY(-2px); }
.team-tile.mine { border-color: var(--glow); }
.team-tile-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.team-tile-main b { font-family: var(--display); font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-tile-rank { font-size: .85rem; font-weight: 700; color: var(--glow); }
.tlogo.xl { width: 96px; height: 96px; border-radius: 18px; font-size: 1.6rem; }
.team-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: .85rem; margin-top: 6px; }
.team-bio { white-space: pre-line; color: var(--muted); margin: 14px 0 6px; }
.team-profile h3 { margin: 18px 0 8px; }
.hp-myteam-id { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.hp-myteam-id h3 { margin: 0; }
.hp-myteam-id small { color: var(--muted); }
.site-link { margin-bottom: 6px; border: 1px dashed var(--line-2); }
.hp-set-me .avatar { flex: 0 0 auto; }
.hp-me-av { display: inline-flex; align-items: center; margin-left: 4px; }
@media (max-width: 560px) { .hp-me-av { display: none; } }

/* ===== 2FA, agents libres, trésorerie ===== */
.twofa-qr { display: grid; place-items: center; margin: 10px auto; width: 210px; height: 210px; background: #fff; border-radius: 12px; padding: 6px; }
.twofa-qr svg { width: 100%; height: 100%; }
.twofa-steps { padding-left: 18px; margin-top: 0; display: grid; gap: 6px; }
.twofa-secret { font-size: .9rem; letter-spacing: .08em; padding: 3px 6px; background: var(--bg-2); border-radius: 6px; word-break: break-all; }
.code-input { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-family: var(--display); }
.rc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.rc-grid code { padding: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; text-align: center; font-size: .95rem; letter-spacing: .06em; }
@media (min-width: 700px) { .only-mobile { display: none; } }
.lft-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.lft-filters .input { width: auto; min-width: 170px; }
.lft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.lft-card { display: flex; flex-direction: column; gap: 8px; }
.lft-card.mine { border-color: var(--glow); }
.lft-riot { font-family: var(--display); font-size: 1.1rem; }
.lft-rank { font-weight: 800; color: var(--glow); font-size: .9rem; }
.lft-bio { margin: 0; color: var(--muted); white-space: pre-line; }
.lft-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.lft-foot a.small { color: var(--glow); text-decoration: none; }
.tr-cats { display: flex; flex-direction: column; gap: 8px; }
.tr-cat { position: relative; display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 6px; background: var(--bg-2); overflow: hidden; font-size: .88rem; }
.tr-cat > * { position: relative; z-index: 1; }
.tr-cat i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--glow-soft); z-index: 0; }
.tr-table td { vertical-align: top; }

/* ===== Pick & ban : verrou, direct, mode live ===== */
.veto-lock { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius); border: 1px dashed var(--line-2); background: var(--bg-2); font-size: 1.1rem; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; background: var(--loss-bg); color: var(--loss); font-weight: 800; font-size: .72rem; letter-spacing: .08em; margin-right: 6px; }
.bm-tag.live { background: var(--loss-bg); color: var(--loss); display: inline-flex; align-items: center; gap: 4px; }
.bm-tag.live .hp-dot { width: 6px; height: 6px; }
body.live-mode { background: #08070b; }
.lv { min-height: 100vh; padding: 28px 40px; display: flex; flex-direction: column; gap: 22px; background: radial-gradient(circle at 50% 0%, rgba(76,0,76,.45), transparent 60%); }
.lv-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; }
.lv-brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.lv-brand svg, .lv-brand img { width: 36px; height: 36px; }
.lv-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.lv-team { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: 18px; border: 2px solid transparent; transition: .3s; }
.lv-team b { font-family: var(--display); font-size: 2rem; text-align: center; }
.lv-team.turn { border-color: var(--glow); box-shadow: 0 0 40px var(--glow-soft); }
.lv-vs { font-family: var(--display); font-size: 2.4rem; font-weight: 800; color: var(--glow); }
.lv-wait { text-align: center; font-size: 1.6rem; color: var(--muted); padding: 40px; }
.lv .vb-maps { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lv .vb-map { height: 140px; } .lv .vb-name { font-size: 1.5rem; } .lv .vb-tag, .lv .vb-side { font-size: .95rem; }
.lv .vb-turn { font-size: 1.3rem; padding: 14px 18px; } .lv .vb-step { min-width: 120px; font-size: .85rem; }
.lv .vb-head { display: none; }

/* ===== Bonne game / configuration ===== */
.gg-card { margin: 0 0 14px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--win); background: linear-gradient(180deg, rgba(47,212,122,.12), rgba(20,17,28,.6)); display: flex; flex-direction: column; gap: 12px; }
.gg-title { font-family: var(--display); font-size: 1.5rem; font-weight: 800; text-align: center; }
.gg-maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.gg-maps > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
.gg-maps b { font-family: var(--display); font-size: 1.1rem; text-transform: uppercase; }
.gg-maps small { color: #ffd34d; font-weight: 700; }
.gg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gg-grid div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); }
.gg-grid span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.gg-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; }
.gg-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; background: #1b2530; border-radius: 4px; font-size: .86rem; }
.vt { width: 46px; height: 18px; position: relative; flex: 0 0 auto; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); background: #e9e4dc; }
.vt::before { content: ''; position: absolute; inset: 2px; clip-path: inherit; background: #0f1923; }
.vt::after { content: ''; position: absolute; top: 50%; left: 9px; width: 8px; height: 8px; background: #7b8794; transform: translateY(-50%) rotate(45deg); }
.vt.on::after { left: auto; right: 9px; background: #3ef5c5; box-shadow: 0 0 6px #3ef5c5; }
.gg-rules { padding: 10px 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: .86rem; }
.gg-rules ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; color: var(--muted); }
.lv-gg { text-align: center; font-family: var(--display); font-size: 2.2rem; font-weight: 800; color: var(--win); display: flex; flex-direction: column; }
.lv-gg small { font-size: 1rem; color: var(--muted); font-family: var(--font); font-weight: 600; }
.cfg-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 12px; margin: 6px 0; }
/* Contrôle */
.ctrl-match { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.ctrl-match.alert { border-color: var(--loss); }
.ctrl-flag.high { color: var(--loss); font-weight: 700; }
.ctrl-table tr.ringer td { color: var(--loss); font-weight: 700; }
@media (max-width: 560px) { .gg-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- v84 : comptes, sanctions, retards, palmarès, visuels ---------- */
.acc-tiles .acc-tile { text-decoration: none; color: inherit; cursor: pointer; transition: .15s; }
.acc-tiles .acc-tile:hover { border-color: var(--glow); transform: translateY(-2px); }
.acc-search { padding: 10px !important; }
.acc-table td { vertical-align: top; }
.acc-acts { flex-wrap: wrap; gap: 4px; }
tr.acc-extra { display: none; }
.badge.role-t { color: #ffd479; background: rgba(255, 196, 0, .12); border-color: transparent; }
.badge.role-v { color: #9fd3ff; background: rgba(80, 160, 255, .12); border-color: transparent; }
.badge.discord-b { color: #c9ceff; background: rgba(88, 101, 242, .18); border-color: transparent; }
.mt-xs { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.late-box { margin: 12px 0; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--loss); background: var(--loss-bg); display: flex; flex-direction: column; gap: 10px; }
.late-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
.hof { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hof-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius); text-decoration: none; color: inherit; border: 1px solid rgba(255, 196, 0, .35);
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 196, 0, .14), transparent 60%), linear-gradient(160deg, var(--surface), var(--bg-2)); transition: .15s; }
.hof-card:hover { transform: translateY(-2px); border-color: #ffd479; }
.hof-cup { display: flex; flex-direction: column; } .hof-cup b { font-family: var(--display); font-size: 1.05rem; } .hof-cup span { font-size: .8rem; color: var(--faint); }
.hof-win { display: flex; gap: 12px; align-items: center; }
.hof-win img, .hof-ini { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: rgba(255, 255, 255, .06); flex: 0 0 auto; display: grid; place-items: center; font-family: var(--display); font-weight: 700; color: #ffd479; }
.hof-win div { display: flex; flex-direction: column; min-width: 0; } .hof-win b { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; }
.hof-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #ffd479; font-weight: 700; }
.hof-win small, .hof-players, .hof-second, .hof-prize { font-size: .82rem; color: var(--muted); }
.team-pal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.team-pal div { padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); text-align: center; display: flex; flex-direction: column; }
.team-pal b { font-family: var(--display); font-size: 1.6rem; } .team-pal span { font-size: .78rem; color: var(--muted); }
.team-trophy { font-size: .8rem; color: #ffd479; font-weight: 700; }
.vis { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
.vis-preview { position: sticky; top: 12px; }
.vis-preview canvas { width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius-sm); background: #000; display: block; }
@media (max-width: 900px) { .vis { grid-template-columns: 1fr; } .vis-preview { position: static; order: -1; } }

/* ---------- v85 : liens courts, mini chat ---------- */
.slug-field { display: flex; align-items: center; gap: 0; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.slug-field span { padding: 0 10px; color: var(--faint); font-size: .85rem; white-space: nowrap; }
.slug-field .input { border: 0; border-radius: 0; flex: 1; min-width: 0; }
.chat { display: flex; flex-direction: column; gap: 8px; }
.chat-head { display: flex; flex-direction: column; gap: 2px; }
.chat-list { height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.chat-empty { margin: auto; text-align: center; }
.cmsg { max-width: 80%; align-self: flex-start; padding: 7px 11px; border-radius: 12px 12px 12px 4px; background: var(--surface-2); border: 1px solid var(--line); }
.cmsg.mine { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: rgba(177, 76, 255, .16); border-color: rgba(177, 76, 255, .35); }
.cmsg.staff:not(.mine) { border-color: #ffd479; background: rgba(255, 196, 0, .08); }
.cmsg.flag { border-color: var(--loss) !important; }
.cmsg-head { display: flex; gap: 8px; align-items: baseline; font-size: .74rem; color: var(--muted); }
.cmsg-head b { color: var(--text); } .cmsg-head span { color: var(--faint); }
.cmsg-del { margin-left: auto; background: none; border: 0; color: var(--faint); cursor: pointer; padding: 0 2px; }
.cmsg-del:hover { color: var(--loss); }
.cmsg-body { white-space: pre-wrap; word-break: break-word; font-size: .9rem; }
.cmsg-flag { font-size: .72rem; color: var(--loss); margin-top: 2px; }
.chat-quick { display: flex; gap: 6px; flex-wrap: wrap; } .chat-quick .chip { font-size: .76rem; cursor: pointer; }
.chat-form { display: flex; gap: 8px; } .chat-form .input { flex: 1; min-width: 0; }
.cup-chat-card { margin: 14px 0; padding: 14px; border-radius: var(--radius-sm); border: 1px solid rgba(177, 76, 255, .35); background: rgba(177, 76, 255, .06); }
.chat-staff { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
.chat-threads { display: flex; flex-direction: column; gap: 4px; max-height: 520px; overflow-y: auto; }
.chat-sec { margin: 8px 0 2px; letter-spacing: .1em; font-size: .7rem; }
.chat-thread { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; color: inherit; cursor: pointer; }
.chat-thread:hover { background: var(--surface-2); } .chat-thread.on { border-color: var(--glow); background: rgba(177, 76, 255, .1); }
.chat-thread-main { display: flex; flex-direction: column; min-width: 0; flex: 1; } .chat-thread-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; } .chat-thread-main small { color: var(--faint); font-size: .74rem; }
.chat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow); flex: 0 0 auto; }
.chat-ic { width: 24px; text-align: center; }
@media (max-width: 760px) { .chat-staff { grid-template-columns: 1fr; } .chat-threads { max-height: 220px; } }
.ov-maps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ov-map { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ov-map b { min-width: 70px; }

/* ---------- v91 : régie live ---------- */
.rg-body { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; padding-bottom: 40px; }
.rg-score { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 14px; margin: 18px 0; }
.rg-team { display: flex; align-items: center; gap: 10px; min-width: 0; } .rg-team b { font-family: var(--display); font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-team.r { justify-content: flex-end; text-align: right; }
.rg-num { display: flex; align-items: center; gap: 10px; } .rg-num span { font-family: var(--display); font-size: 3.4rem; font-weight: 700; min-width: 70px; text-align: center; }
.rg-btn { width: 54px; height: 54px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-size: 1.6rem; cursor: pointer; }
.rg-btn.plus { background: rgba(177, 76, 255, .2); border-color: var(--glow); } .rg-btn:active { transform: scale(.95); }
.rg-sep { font-size: 2rem; color: var(--faint); }
.rg-maps { display: flex; gap: 6px; flex-wrap: wrap; } .rg-maps .chip { cursor: pointer; } .rg-maps .chip.on { border-color: var(--glow); background: rgba(177, 76, 255, .2); color: #fff; }
.rg-alert { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid #ffd479; background: rgba(255, 196, 0, .08); }
.rg-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rg-agents h4 { margin: 8px 0; }
.rg-agent { display: grid; grid-template-columns: 34px 1fr 150px; align-items: center; gap: 8px; margin-bottom: 6px; }
.rg-agent img, .rg-noag { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--faint); }
@media (max-width: 760px) { .rg-agents { grid-template-columns: 1fr; } .rg-score { grid-template-columns: 1fr 1fr; } .rg-sep { display: none; } .rg-team.r { justify-content: flex-start; text-align: left; } .rg-num span { font-size: 2.6rem; min-width: 50px; } }
/* Régie stream */
.sr-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 10px; }
.sr-teams .form-row { display: flex; gap: 8px; } .sr-teams .form-row .input:first-child { flex: 1; }
.sr-logo { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: var(--surface-2); }
.sr-map { display: grid; grid-template-columns: 1fr 1fr 60px 40px; gap: 8px; align-items: center; margin-bottom: 6px; }
.sr-map .input { width: 100%; }
.sr-solo-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.sr-solo-row img { width: 48px; height: 48px; }
.rg-agent .input { width: 100%; }
@media (max-width: 760px) { .sr-teams { grid-template-columns: 1fr; } .rg-agent { grid-template-columns: 34px 1fr 1fr; } }
.sr-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sr-theme { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: inherit; cursor: pointer; }
.sr-theme.on { border-color: var(--glow); box-shadow: 0 0 0 1px var(--glow); } .sr-theme small { color: var(--faint); font-size: .76rem; }
.sr-th-prev { height: 46px; border-radius: 8px; background: #08070b; display: flex; align-items: flex-end; gap: 3px; padding: 6px; margin-bottom: 4px; }
.sr-th-prev i { height: 12px; flex: 1; background: #4c004c; border-radius: 3px; }
.sr-th-prev.card { align-items: flex-end; } .sr-th-prev.card i { flex: 0 0 26px; height: 30px; background: linear-gradient(160deg, #2a0a33, #b14cff); } .sr-th-prev.card i + i { display: none; }
.sr-th-prev.strike i { transform: skewX(-18deg); background: #f1eee8; } .sr-th-prev.strike i:first-child { background: #ff4655; } .sr-th-prev.strike i:last-child { background: #2a0a33; }
.sr-color { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .sr-color.on { border-color: #fff; box-shadow: 0 0 0 2px var(--glow); }
.sr-color-in { width: 40px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
@media (max-width: 760px) { .sr-themes { grid-template-columns: 1fr; } }
.comp-row { align-items: center; gap: 12px; }
.comp-map { width: 92px; height: 44px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; background: var(--map, none) center / cover, var(--surface-2); position: relative; overflow: hidden; }
.comp-map::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); } .comp-map b { position: relative; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.comp-ags { display: flex; gap: 3px; flex: 0 0 auto; } .comp-ags .agent-face { width: 32px; height: 32px; }
@media (max-width: 760px) { .comp-row { flex-wrap: wrap; } }
.cup-topag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .cup-ag { display: flex; flex-direction: column; align-items: center; } .cup-ag small { font-size: .7rem; color: var(--faint); }
.cup-topag .agent-face, .comp-row .agent-face { width: 32px; height: 32px; border-radius: 7px; }
.sr-to { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 12px; }
.sr-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; } .sr-deck > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .9rem; }
.sr-phone { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; }
.sr-qr { background: #fff; border-radius: 10px; padding: 6px; width: 170px; } .sr-qr svg { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .sr-phone { grid-template-columns: 1fr; } .sr-qr { margin: 0 auto; } }
.sr-streamers { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* ---------- Jeux : sélecteur et sections ---------- */
.game-switch { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.game-switch button { flex: 1 1 auto; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.game-switch button:hover { color: var(--text, #fff); background: var(--surface); }
.game-switch button.on { background: var(--glow-soft); color: #fff; box-shadow: inset 0 0 0 1px var(--glow); }
.game-switch button i { font-style: normal; font-size: .65rem; color: #ffb020; }
.game-select select { background: var(--surface-2); color: inherit; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; font-size: .82rem; max-width: 46vw; }
.sidebar .game-select { display: none; }
@media (min-width: 900px) { .topbar .game-select { display: none; } }
.game-roster { display: flex; flex-direction: column; gap: 6px; }
.game-roster-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); color: inherit; text-decoration: none; }
.game-roster-row span { display: flex; flex-direction: column; }
.game-planned { display: grid; gap: 8px; }
.game-planned > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--line-2); }
.gm-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.gm-section { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.gm-section > div { display: flex; flex-direction: column; gap: 2px; }
.gm-section.on { border-color: rgba(47, 212, 122, .5); }
.gm-cell { text-align: center; width: 120px; }
.gm-cell input { width: 18px; height: 18px; accent-color: var(--glow); }
.topbar.has-game .brand-name { display: none; }
/* Formulaires d'un autre jeu que Valorant : on cache ce qui est propre à Valorant (cartes, agents, aces) */
.modal:has(.game-form-flag) .valo-only, .modal:has(.game-form-flag) [data-agent-for], .modal:has(.game-form-flag) .ace-input { display: none !important; }

/* ===== Tournois multi-jeux ===== */
.cup-game-pick .chip { font-size: .92rem; padding: 7px 12px; }
.cup-game-pick .chip[disabled] { opacity: .4; cursor: not-allowed; }
.cup-filter { margin: 18px 0 -6px; }
.reg-row.reg-row-x { grid-template-columns: 28px minmax(0, 1.4fr) repeat(auto-fit, minmax(110px, 1fr)); }
@media (max-width: 640px) {
  .reg-row.reg-row-x { grid-template-columns: 26px 1fr; }
  .reg-row.reg-row-x > :not(.reg-n) { grid-column: 2; }
}

/* ===== Match Rocket League : une ligne par game ===== */
.rl-game-row { display: grid; grid-template-columns: 70px 80px 80px auto minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.rl-game-row .field { margin: 0; }
.rl-game-n { font-size: .85rem; color: var(--muted); padding-bottom: 10px; }
.rl-ot { padding-bottom: 10px; white-space: nowrap; }
@media (max-width: 640px) { .rl-game-row { grid-template-columns: 1fr 1fr 1fr; } .rl-game-row > .field:nth-of-type(3) { grid-column: 1 / -1; } }

/* ===== Section d'un jeu (RL / Fortnite) ===== */
.gs-tabs { margin-bottom: 0; }
.gs-tabs a.active { color: var(--text); border-color: var(--glow); }
.gs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.gs-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); color: inherit; }
.gs-tile:hover { border-color: var(--glow); }
.gs-tile b { font-family: var(--display); font-size: 1.5rem; }
.gs-tile span { font-size: .8rem; color: var(--muted); }
.gs-next { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--info-bg); color: inherit; }
.gs-next span { display: flex; flex-direction: column; } .gs-next small { color: var(--muted); }
.gs-podium { font-size: 1.2rem; width: 28px; }
.gs-rank { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .78rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line-2); white-space: nowrap; }
.gs-rank.bronze { color: #d08a52; border-color: #6b4327; }
.gs-rank.silver { color: #cfd6e0; border-color: #59616d; }
.gs-rank.gold { color: #f3c64b; border-color: #7a6020; }
.gs-rank.plat { color: #5fd4d0; border-color: #24605e; }
.gs-rank.dia { color: #6fa8ff; border-color: #2c4f86; }
.gs-rank.champ { color: #c690ff; border-color: #5b3790; }
.gs-rank.gc { color: #ff6b7d; border-color: #7f2a36; }
.gs-rank.ssl { color: #fff; background: linear-gradient(90deg, #6a1fb5, #d13dbb); border-color: transparent; }
.gs-ranks td, .gs-stats td { vertical-align: middle; }
.gs-stats th, .gs-stats td { text-align: center; white-space: nowrap; }
.gs-stats th:first-child, .gs-stats td:first-child { text-align: left; }
.gs-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.gs-item { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.gs-item.pinned { border-color: var(--glow); }
.gs-code { align-self: flex-start; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; letter-spacing: .04em; padding: 6px 10px; border-radius: 6px; background: var(--bg-2); border: 1px dashed var(--line-2); color: var(--text); cursor: pointer; }
.gs-code:hover { border-color: var(--glow); }
.gs-desc { margin: 0; white-space: pre-line; font-size: .9rem; color: var(--muted); }
.gs-replay .row-main { min-width: 0; }
.gs-rp-players { margin-top: 2px; overflow-wrap: anywhere; }
.gs-body .import-row { grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto; }
@media (max-width: 640px) { .gs-body .import-row { grid-template-columns: 1fr; } }

/* ===== Coach → Entraînement (mini-jeux) ===== */
.dr-daily { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; background: linear-gradient(120deg, var(--info-bg), transparent 70%), var(--surface); border-color: var(--line-2); }
.dr-daily-top { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; min-width: 200px; }
.dr-daily-top .me, .dr-board .me { color: var(--glow); }
@media (max-width: 760px) { .dr-daily { grid-template-columns: 1fr; } }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 12px; }
.dr-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.dr-card.daily { border-color: var(--glow); box-shadow: 0 0 0 1px var(--glow-soft); }
.dr-card h3 { margin: 0; font-size: 1.05rem; }
.dr-card p { margin: 0; flex: 1; }
.dr-ico { font-size: 1.8rem; line-height: 1; }
.dr-me { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.dr-me > div:first-child { display: flex; flex-direction: column; }
.dr-me b { font-family: var(--display); font-size: 1.3rem; }
.dr-spark { width: 110px; height: 30px; color: var(--glow); display: block; }
.dr-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dr-board li { display: grid; grid-template-columns: 30px auto 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); }
.dr-pos { text-align: center; font-weight: 700; }
.dr-best { font-family: var(--display); font-weight: 700; }
.dr-tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.dr-stage { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); overflow: hidden; background: #0d0b13; border: 1px solid var(--line); user-select: none; -webkit-user-select: none; }
.dr-canvas { display: block; width: 100%; cursor: none; touch-action: none; }
.dr-count { font-family: var(--display); font-size: 5rem; font-weight: 700; color: var(--glow); animation: dr-pop .6s ease-out; }
@keyframes dr-pop { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dr-reflex { width: 100%; min-height: 320px; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; font: inherit; cursor: pointer; touch-action: manipulation; }
.dr-reflex b { font-family: var(--display); font-size: 2.4rem; }
.dr-reflex.wait { background: #7a1424; }
.dr-reflex.go { background: #15a35a; }
.dr-reflex.early { background: #6b4a12; }
.dr-reflex.done { background: #1b1726; }
.dr-result { text-align: center; padding: 28px 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.dr-score { font-family: var(--display); font-size: 3.2rem; font-weight: 700; color: var(--text); line-height: 1; }
.dr-record { padding: 6px 14px; border-radius: 99px; background: rgba(255, 211, 77, .14); color: #ffd34d; font-weight: 700; }
.dr-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; color: var(--muted); font-size: .9rem; }
.dr-stats span:empty { display: none; }
.dr-quiz, .dr-quiz-start { width: 100%; max-width: 680px; padding: 22px 18px; align-self: flex-start; margin: 0 auto; }
.dr-quiz-start { text-align: center; align-self: center; }
.dr-quiz h3 { font-size: 1.15rem; margin: 14px 0; }
.dr-qbar { height: 5px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.dr-qbar i { display: block; height: 100%; width: 100%; background: var(--glow); transition: width .1s linear; }
.dr-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .dr-answers { grid-template-columns: 1fr; } }
.dr-ans { text-align: left; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.dr-ans:hover:not(:disabled) { border-color: var(--glow); }
.dr-ans.good { border-color: var(--win); background: var(--win-bg); }
.dr-ans.bad { border-color: var(--loss); background: var(--loss-bg); }
.dr-expl { margin: 12px 0; font-size: .9rem; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.dr-expl.ok { border-left: 3px solid var(--win); } .dr-expl.ko { border-left: 3px solid var(--loss); }
.dr-open { align-items: center; }
.dr-open > div { flex: 1; }
.dr-settings { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; align-items: center; }
@media (max-width: 900px) { .dr-settings { grid-template-columns: 1fr; } }
.dr-set-x { display: flex; gap: 12px; align-items: center; }
.dr-xprev { width: 72px; height: 72px; border-radius: 8px; flex: none; image-rendering: pixelated; border: 1px solid var(--line); }
.dr-set-sens, .dr-set-mode { display: flex; flex-direction: column; gap: 6px; }
.dr-set-mode .seg button[disabled] { opacity: .4; cursor: not-allowed; }
.dr-lock { width: 100%; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-align: center; padding: 20px;
  background: radial-gradient(circle at center, rgba(177, 76, 255, .18), transparent 60%), #0d0b13; }
.dr-lock b { font-family: var(--display); font-size: 1.6rem; }
.dr-lock span { color: var(--muted); max-width: 440px; font-size: .9rem; }
.dr-canvas.fps { cursor: none; }
/* Gestion tournoi : Discord des joueurs */
.cup-dc-ok { color: var(--win); margin-top: 4px; }
.cup-dc-miss { color: var(--soon); font-weight: 600; margin-top: 4px; }
.cup-plist { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); margin-top: 2px; }
.cup-plist .dc { color: var(--faint); }
.cup-plist .nodc .dc.none { color: var(--soon); font-weight: 600; }

/* ===== Tournoi terminé : podium, MVP, avis ===== */
.cup-podium { margin-bottom: 16px; text-align: center; }
.pod-row { display: flex; justify-content: center; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.pod-step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); min-width: 170px; }
.pod-step b { font-size: 1.05rem; }
.pod-step.p1 { background: linear-gradient(180deg, rgba(255, 211, 77, .16), rgba(255, 211, 77, .03)); padding-top: 28px; padding-bottom: 34px; border: 1px solid rgba(255, 211, 77, .35); }
.pod-step.p1 b { font-size: 1.3rem; }
.pod-step.p2 { border: 1px solid rgba(214, 219, 228, .25); }
.pod-step.p3 { border: 1px solid rgba(224, 150, 90, .3); }
.pod-medal { font-size: 1.8rem; line-height: 1; }
.pod-third { display: flex; align-items: center; gap: 8px; }
.cup-mvp { display: inline-flex; gap: 14px; align-items: center; margin-top: 18px; padding: 14px 20px; border-radius: 14px; background: rgba(255, 211, 77, .08); border: 1px solid rgba(255, 211, 77, .35); text-align: left; }
.cup-mvp-star { font-size: 2rem; }
.cup-mvp-name { font-family: var(--display); font-size: 1.5rem; display: block; }
.cup-mvp-logo { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; vertical-align: -4px; margin-right: 6px; }
.cup-fin { margin-top: 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.cup-fin-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cup-fb-list { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.cup-fb { margin: 16px 0; padding: 16px; border-radius: 14px; background: rgba(177, 76, 255, .08); border: 1px solid rgba(177, 76, 255, .3); }
.cup-fb-q { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; }
.cup-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.cup-stars label { cursor: pointer; font-size: 1.6rem; color: #4a4258; line-height: 1; }
.cup-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cup-stars label:hover span, .cup-stars label:hover ~ label span, .cup-stars input:checked + span, .cup-stars label:has(input:checked) ~ label span { color: #ffd34d; }
.cup-stars input:focus-visible + span { outline: 2px solid var(--glow); border-radius: 4px; }

/* ===== Palmarès ===== */
.pal-list { display: flex; flex-direction: column; gap: 18px; margin: 28px 0 40px; }
.pal-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.pal-head h2 { margin: 4px 0 0; } .pal-head h2 a { color: inherit; }
.pal-prize { padding: 6px 12px; border-radius: 99px; background: rgba(75, 227, 138, .1); color: #4be38a; font-weight: 600; font-size: .9rem; }
.pal-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-top: 16px; }
@media (max-width: 760px) { .pal-grid { grid-template-columns: 1fr; } }
.pal-champ { display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 211, 77, .14), rgba(255, 211, 77, .02)); border: 1px solid rgba(255, 211, 77, .3); }
.pal-champ b { font-family: var(--display); font-size: 1.6rem; display: block; }
.pal-champ small, .pal-place small { color: var(--muted); display: block; }
.pal-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: block; }
.pal-roster { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: .85rem; color: var(--muted); }
.pal-side { display: flex; flex-direction: column; gap: 8px; }
.pal-place { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.pal-place.mvp { background: rgba(255, 211, 77, .07); }
.pal-star { font-size: 1.6rem; width: 44px; text-align: center; }
.pal-logo { object-fit: contain; border-radius: 10px; flex: none; background: #16111f; }
.pal-logo.md { width: 44px; height: 44px; } .pal-logo.xl { width: 96px; height: 96px; }
.pal-logo.ini { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.pal-ed { padding: 24px; }
/* Gestion : checklist et Discord du tournoi */
.cup-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; align-items: start; }
@media (max-width: 900px) { .cup-admin-grid { grid-template-columns: 1fr; } }
.cup-box { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.cup-box > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; list-style: none; }
.cup-box > summary::-webkit-details-marker { display: none; }
.cup-box label.small { display: flex; flex-direction: column; gap: 4px; }
.cl-group { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.cl-item { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cl-item.done span { color: var(--muted); text-decoration: line-through; }
.cl-add .input[name=label] { flex: 1; min-width: 140px; }
.bk-preview .bm { opacity: .9; cursor: default; }
.bk-preview .bm-team.tbd span, .bk-preview .bm-name span { color: var(--muted); }
/* Badges de tournoi, stats et classement des équipes */
.pl-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.pl-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: .74rem; font-weight: 600; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); white-space: nowrap; }
.pl-badge.champion { background: rgba(255, 211, 77, .12); border-color: rgba(255, 211, 77, .4); color: #ffd34d; }
.pl-badge.mvp { background: rgba(255, 211, 77, .08); border-color: rgba(255, 211, 77, .3); color: #ffe08a; }
.pl-badge.finaliste { color: #d6dbe4; } .pl-badge.podium { color: #e0965a; }
.pl-badge.veteran, .pl-badge.legende { color: #c690ff; border-color: rgba(177, 76, 255, .35); }
.team-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.team-stats > div { display: flex; flex-direction: column; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.team-stats b { font-family: var(--display); font-size: 1.4rem; }
.team-stats span { font-size: .8rem; color: var(--muted); }
.team-rank { margin: 14px 0; }
.team-rank-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.team-rank-list a { display: grid; grid-template-columns: 34px auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); color: inherit; }
.team-rank-list a:hover { background: rgba(177, 76, 255, .1); }
.tr-pos { text-align: center; font-weight: 700; }
.tr-pts { font-family: var(--display); font-weight: 700; color: #ffd34d; }
@media (max-width: 600px) { .team-rank-list a { grid-template-columns: 30px auto 1fr auto; } .tr-detail { display: none; } }

/* ===== Mon profil (comptes de la communauté) ===== */
.mp { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; padding-bottom: 40px; }
.mp h2 { margin: 0 0 12px; font-size: 1.15rem; }
.mp-head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 24px; background: linear-gradient(135deg, rgba(177, 76, 255, .14), rgba(177, 76, 255, .02)), var(--surface); }
@media (max-width: 700px) { .mp-head { grid-template-columns: 1fr; justify-items: center; text-align: center; } .mp-badges { justify-content: center; } .mp-actions { justify-content: center; } }
.mp-avatar { position: relative; width: 104px; height: 104px; border-radius: 50%; background: #1c1529; border: 3px solid var(--glow); display: flex; align-items: center; justify-content: center; }
.mp-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mp-avatar > span { font-family: var(--display); font-size: 2.6rem; font-weight: 700; color: var(--glow); }
.mp-photo { position: absolute; right: -4px; bottom: -4px; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; }
.mp-photo:hover { border-color: var(--glow); }
.mp-id h1 { margin: 0; font-size: 1.8rem; }
.mp-bio { margin: 8px 0 0; color: var(--muted); }
.mp-badges { display: flex; margin-top: 8px; } .mp-badges .pl-badges { margin-left: 0; }
.mp-actions { display: flex; flex-direction: column; gap: 8px; }
.mp-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .mp-grid { grid-template-columns: 1fr; } }
.mp-grid > section, .mp-col > section { padding: 20px; }
.mp-col { display: flex; flex-direction: column; gap: 16px; }
.mp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.mp-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.mp-stats b { font-family: var(--display); font-size: 1.5rem; }
.mp-stats span { font-size: .8rem; color: var(--muted); }
.mp-sub { font-size: .95rem; margin: 16px 0 6px; color: var(--muted); }
.mp-team { display: flex; gap: 14px; align-items: center; color: inherit; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.mp-team:hover { background: rgba(177, 76, 255, .1); }
.mp-ok { margin: 0; color: var(--win); }
.mp-prefs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* ---------- Fiche équipe (v139) ---------- */
.tp { display: flex; flex-direction: column; gap: 16px; }
.tp-hero { position: relative; overflow: hidden; padding: 0 !important; --tc: var(--glow); }
.tp-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 60%), linear-gradient(180deg, rgba(144, 0, 240, .14), transparent 70%); pointer-events: none; }
.tp-hero-bg { position: absolute; right: -60px; top: -60px; width: 380px; height: 380px; background: center / contain no-repeat; opacity: .09; filter: blur(2px) saturate(1.3); transform: rotate(-8deg); pointer-events: none; }
.tp-hero-in { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: start; padding: 26px 26px 20px; }
.tp-logo.tlogo.xl { width: 128px; height: 128px; border-radius: 24px; font-size: 2.2rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 55%, transparent), 0 18px 40px -12px color-mix(in srgb, var(--tc) 60%, transparent); }
.tp-hero-main { min-width: 0; }
.tp-kicker { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); font-weight: 700; }
.tp-kicker b { color: #ffd34d; }
.tp-name { font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.05; margin: 6px 0 10px; word-break: break-word; }
.tp-teamtag { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 8px; font-size: .45em; vertical-align: middle; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: var(--muted); letter-spacing: .08em; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: .8rem; color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.tp-bio { white-space: pre-line; color: var(--text, #e9e4f0); opacity: .85; margin: 12px 0 4px; max-width: 70ch; line-height: 1.55; }
.tp-hero-main .links-line { margin-top: 10px; }
.tp-hero-main .links-line a { padding: 4px 10px; border-radius: 8px; background: rgba(177, 76, 255, .1); border: 1px solid rgba(177, 76, 255, .25); }
.tp-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.tp-kpis { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.tp-kpis > div { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); }
.tp-kpis > div:last-child { border-right: 0; }
.tp-kpis b { font-family: var(--display); font-size: 1.45rem; line-height: 1.1; }
.tp-kpis span { font-size: .74rem; color: var(--muted); }
.tp-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); margin-top: 6px; overflow: hidden; }
.tp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--glow), #4be38a); border-radius: 4px; }

.tp-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.tp-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tp-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.tp-sec-head h3, .tp-h { margin: 0; font-family: var(--display); letter-spacing: .02em; }
.tp-h { margin-bottom: 12px; }
.tp-subhead { margin: 16px 0 8px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tp-hint { margin: 14px 0 0; }
.tp-hint a { color: var(--glow); }

.tp-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tp-player { --tc: #8a8496; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 14%, var(--bg-2)), var(--bg-2) 65%); border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--line)); transition: .15s; }
.tp-player:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tc) 60%, var(--line)); }
.tp-player.sub { opacity: .85; }
.tp-player-top { display: flex; gap: 10px; align-items: center; min-width: 0; }
.tp-ava { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--surface-2); border: 2px solid color-mix(in srgb, var(--tc, var(--glow)) 60%, transparent); }
.tp-ava.ph { display: inline-grid; place-items: center; font-family: var(--display); font-weight: 800; color: var(--muted); font-size: .95rem; }
.tp-ava.sm { width: 36px; height: 36px; font-size: .78rem; border-width: 1px; }
.tp-player-id { min-width: 0; }
.tp-player-id b { display: block; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-tag { color: var(--muted); font-weight: 500; font-size: .82em; }
.tp-player-role { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tp-cap { font-size: .68rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; color: #1a1205; background: #ffd34d; }
.tp-player-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tp-tracker { font-size: .78rem; color: var(--glow); text-decoration: none; white-space: nowrap; }
.tp-tracker:hover { text-decoration: underline; }
.tp-player-badges .pl-badges { margin-left: 0; }
.tp-rank { --tc: #8a8496; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 700; color: color-mix(in srgb, var(--tc) 80%, white); background: color-mix(in srgb, var(--tc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); white-space: nowrap; }
.tp-rank::before { content: ''; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--tc); }
.r-iron, .t-iron { --tc: #7d7d85; } .r-bronze, .t-bronze { --tc: #b9824f; } .r-silver, .t-silver { --tc: #c4cbd6; } .r-gold, .t-gold { --tc: #e8b84a; }
.r-platinum, .t-platinum { --tc: #3fb6c9; } .r-diamond, .t-diamond { --tc: #c68cf5; } .r-ascendant, .t-ascendant { --tc: #3fcf86; } .r-immortal, .t-immortal { --tc: #e2475f; } .r-radiant, .t-radiant { --tc: #ffe58a; }
.tp-hero.t-none { --tc: var(--glow); }

.tp-form { display: inline-flex; gap: 4px; }
.tp-form i { font-style: normal; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: .7rem; font-weight: 800; }
.tp-form i.w, .tp-res { background: var(--win-bg); color: var(--win); }
.tp-form i.l { background: var(--loss-bg); color: var(--loss); }
.tp-matches { display: flex; flex-direction: column; gap: 6px; }
.tp-match { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); border-left: 3px solid var(--win); color: inherit; text-decoration: none; }
.tp-match.l { border-left-color: var(--loss); }
.tp-match:hover { background: rgba(177, 76, 255, .08); }
.tp-res { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.tp-match.l .tp-res { background: var(--loss-bg); color: var(--loss); }
.tp-vs { display: flex; gap: 10px; align-items: center; min-width: 0; }
.tp-vs > span { display: flex; flex-direction: column; min-width: 0; }
.tp-vs b, .tp-vs small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-score { font-family: var(--display); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }

.tp-staff { display: flex; flex-direction: column; gap: 8px; }
.tp-staff > div { display: flex; gap: 10px; align-items: center; }
.tp-staff span { display: flex; flex-direction: column; } .tp-staff small { color: var(--glow); font-size: .74rem; font-weight: 600; }
.tp-cups { display: flex; flex-direction: column; gap: 6px; }
.tp-cup { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); color: inherit; text-decoration: none; border: 1px solid transparent; }
.tp-cup:hover { border-color: rgba(177, 76, 255, .4); }
.tp-cup.p1 { background: rgba(255, 211, 77, .08); border-color: rgba(255, 211, 77, .3); }
.tp-cup.p2 { background: rgba(214, 219, 228, .06); }
.tp-cup-ico { font-size: 1.2rem; width: 26px; text-align: center; }
.tp-cup > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tp-cup small { color: var(--muted); font-size: .76rem; }

@media (max-width: 860px) {
  .tp-grid { grid-template-columns: 1fr; }
  .tp-hero-in { grid-template-columns: auto 1fr; }
  .tp-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .tp-hero-in { grid-template-columns: 1fr; padding: 20px 16px 16px; text-align: left; }
  .tp-logo.tlogo.xl { width: 96px; height: 96px; }
  .tp-kpis { grid-template-columns: repeat(2, 1fr); }
  .tp-kpis > div { border-bottom: 1px solid var(--line); }
  .tp-players { grid-template-columns: 1fr; }
}

/* v140 : noms d'équipe complets, joueurs SVG reliés, équipes de tournoi en cartes */
.team-tile-main b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.2; }
.team-tile { align-items: flex-start; }
.team-tile > .badge { flex: 0 0 auto; align-self: flex-start; }
.tp-rank.ico { padding-left: 4px; }
.tp-rank.ico::before { display: none; }
.tp-rank img { width: 18px; height: 18px; object-fit: contain; }
.tp-player { overflow: hidden; }
.tp-art { position: absolute; inset: 0 0 auto 0; height: 74px; background: center 30% / cover no-repeat; opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); pointer-events: none; }
.tp-player > *:not(.tp-art) { position: relative; }
.tp-player.is-svg { border-color: rgba(177, 76, 255, .55); box-shadow: 0 0 0 1px rgba(177, 76, 255, .15), 0 10px 30px -18px rgba(177, 76, 255, .8); }
.tp-player.is-svg .tp-ava { border-color: var(--glow); }
.tp-svg { font-size: .66rem; font-weight: 800; letter-spacing: .08em; padding: 1px 8px; border-radius: 99px; color: #fff; background: linear-gradient(90deg, #9000f0, #b14cff); }
.tp-player-id a { color: inherit; text-decoration: none; }
.tp-player-id a:hover { color: var(--glow); }
.cup-teams.wide { display: flex; flex-direction: column; gap: 14px; }
.tp-cupteam { --tc: var(--glow); position: relative; overflow: hidden; }
.tp-cupteam::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--tc) 18%, transparent), transparent 70%); pointer-events: none; }
.tp-cupteam > * { position: relative; }
.tp-ct-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.tp-ct-main { min-width: 0; flex: 1; }
.tp-ct-main h3 { margin: 0 0 6px; font-family: var(--display); font-size: 1.3rem; overflow-wrap: anywhere; }
.tp-ct-main .tp-teamtag { font-size: .62em; }
.tp-chip.ok { color: var(--win); border-color: rgba(47, 212, 122, .35); background: var(--win-bg); }
.tp-ct-staff { margin-bottom: 8px; }
.tp-cupteam .links-line { margin-bottom: 10px; }
@media (max-width: 560px) { .tp-ct-head .tlogo.lg { width: 56px; height: 56px; } }
.tp-svg.team { background: rgba(177, 76, 255, .18); border: 1px solid rgba(177, 76, 255, .6); color: #e3c6ff; padding: 0 8px; }

/* ---------- Audit v143 ---------- */
.dash-alert { display: flex; align-items: flex-start; gap: 8px; padding-right: 8px; }
.dash-alert > a { display: flex; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.dash-alert-x { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .9rem; padding: 2px 6px; border-radius: 6px; }
.dash-alert-x:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.dash-alerts-all { align-self: flex-end; background: none; border: 0; color: var(--glow); cursor: pointer; }
/* Textes de liste : 2 lignes max au lieu d'être coupés sur une seule */
.row-title, .row-sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.row-sub.inline { display: flex; flex-wrap: wrap; -webkit-line-clamp: unset; }
.xhair-preview canvas { image-rendering: pixelated; max-width: 100%; }

/* Tournoi · onglet Infos (v144) : infos + boutons en haut, règlement en dessous sur toute la largeur */
.cup-info-stack { display: flex; flex-direction: column; gap: 14px; }
.cup-info-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.cup-info-main .cup-facts { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cup-info-cta { justify-content: flex-start; flex-wrap: wrap; }
.cup-info-steps { border-left: 1px solid var(--line); padding-left: 22px; }
.cup-info-steps h3 { margin: 0 0 12px; font-size: 1rem; }
.cup-info-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cup-info-steps li { display: flex; gap: 10px; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.cis-n { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .75rem; color: #fff; background: linear-gradient(135deg, #9000f0, #b14cff); }
.cup-rules-fmt { columns: 2 340px; column-gap: 32px; }
.cr-sec { break-inside: avoid; margin-bottom: 18px; }
.cr-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--display); font-size: .95rem; color: var(--text); }
.cr-n { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center; font-size: .72rem; background: rgba(177, 76, 255, .18); color: #d9b3ff; }
.cr-sec ul { margin: 0; padding-left: 18px; }
.cr-sec li, .cr-sec p { font-size: .86rem; color: var(--muted); line-height: 1.5; margin: 0 0 4px; }
.cr-sec ul:empty { display: none; }
@media (max-width: 860px) {
  .cup-info-main { grid-template-columns: 1fr; }
  .cup-info-steps { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .cup-info-cta { justify-content: center; }
}

/* Contenu pré-affiché pour les moteurs de recherche (remplacé par le site dès qu'il est chargé) */
.seo-pre { min-height: 100vh; position: relative; }
.seo-pre .loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg, #08070b); z-index: 2; }
.seo-main { max-width: 900px; margin: 0 auto; padding: 40px 16px; color: #e9e4f0; }
.seo-main a { color: #c690ff; }

/* ---------- Pages publiques : fond vivant (v145) ---------- */
/* L'image de l'équipe reste visible derrière, assombrie, avec des halos violets et verts comme le logo */
.hp {
  background:
    radial-gradient(900px 520px at 85% -5%, rgba(177, 76, 255, .20), transparent 65%),
    radial-gradient(700px 480px at -10% 35%, rgba(144, 0, 240, .16), transparent 70%),
    radial-gradient(600px 420px at 105% 75%, rgba(75, 227, 138, .07), transparent 70%),
    linear-gradient(180deg, rgba(8, 7, 11, .40), rgba(8, 7, 11, .62) 40%, rgba(8, 7, 11, .80));
}
.hp::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%);
}
.hp-top { background: rgba(8, 7, 11, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cup-head { background: linear-gradient(180deg, rgba(76, 0, 120, .42), rgba(8, 7, 11, .15)); }
.hp-card { background: rgba(22, 18, 32, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hp-card .hp-card, .cup-facts > div, .tp-player { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- Fond « gaming » commun (v146) : arène néon aux couleurs du logo, sans jeu particulier ---------- */
body::before { background-image: url('/assets/bg-gaming.jpg'); }
@media (max-width: 700px) { body::before { background-image: url('/assets/bg-gaming-mobile.jpg'); } }
/* Espace membres, section Valorant : on garde l'image de l'équipe Valorant */
html[data-game="valorant"] body:has(.shell)::before { background-image: url('/assets/bg.jpg'); }
@media (max-width: 700px) { html[data-game="valorant"] body:has(.shell)::before { background-image: url('/assets/bg-mobile.jpg'); } }
.hp { background:
    radial-gradient(900px 520px at 85% -5%, rgba(177, 76, 255, .16), transparent 65%),
    radial-gradient(700px 480px at -10% 35%, rgba(144, 0, 240, .12), transparent 70%),
    linear-gradient(180deg, rgba(8, 7, 11, .25), rgba(8, 7, 11, .50) 45%, rgba(8, 7, 11, .72)); }
/* Héros des pages publiques : le fond du site se voit au travers, avec un halo violet */
.hp-hero::before { background: radial-gradient(ellipse 55% 65% at 50% 38%, rgba(177, 76, 255, .26), transparent 70%); opacity: 1; }
.hp-hero::after { background: linear-gradient(180deg, transparent 55%, rgba(8, 7, 11, .45)); }
.hp { background:
    radial-gradient(900px 520px at 85% -5%, rgba(177, 76, 255, .14), transparent 65%),
    linear-gradient(180deg, rgba(8, 7, 11, .05), rgba(8, 7, 11, .30) 40%, rgba(8, 7, 11, .62)); }
body::after { background: linear-gradient(180deg, rgba(8, 7, 11, .45), rgba(8, 7, 11, .62) 55%, rgba(8, 7, 11, .80)); }
html[data-game="valorant"] body:has(.shell)::after { background: linear-gradient(180deg, rgba(8, 7, 11, .72), rgba(8, 7, 11, .86) 55%, rgba(8, 7, 11, .93)); }
.agent-add { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .agent-add select { width: auto; max-width: 200px; padding: 6px 8px; }
/* Plusieurs équipes gérées par un même compte */
.myteams { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.myteam-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(22, 18, 32, .78); color: inherit; text-decoration: none; font-size: .9rem; }
.myteam-chip small { color: var(--muted); font-size: .75rem; }
.myteam-chip:hover { border-color: rgba(177, 76, 255, .5); }
.myteam-chip.on { border-color: var(--glow); background: rgba(177, 76, 255, .16); box-shadow: 0 0 0 1px rgba(177, 76, 255, .3); }
.myteam-chip.add { border-style: dashed; color: #d9b3ff; }
.mp-team + .mp-team { margin-top: 8px; }