@font-face { font-family: Outfit; src: url(/fonts/outfit-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Outfit; src: url(/fonts/outfit-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0; }

:root {
  --bg: #09090a; --panel: #131214; --panel-2: #1a181c; --line: #26232a;
  --text: #f4f1f6; --muted: #a9a3b0; --accent: #b565d8; --accent-deep: #3b1d47; --accent-line: #7c3f96;
  --danger: #e5566b; --ok: #4fc98a; --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 Outfit, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; }
svg { flex: none; }
main { display: block; }

/* boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
.btn:hover { background: var(--panel-2); border-color: #3a3640; }
.btn-accent { background: var(--accent-deep); border-color: var(--accent-line); }
.btn-accent:hover { background: #4a2559; border-color: var(--accent); }
.btn-lg { padding: 12px 20px; font-size: 17px; border-radius: 14px; }
.btn-danger { background: #3a141b; border-color: #8a2f3e; }
.btn-danger:hover { background: #4d1a24; border-color: var(--danger); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* logo + navigation */
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 500; letter-spacing: -.01em; }
.logo b { color: var(--accent); font-weight: 500; }
.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-deep); color: var(--accent); transform: rotate(-12deg); }
.nav { position: sticky; top: 18px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1290px; margin: 18px auto 0; padding: 12px 24px; border-radius: 26px; background: rgba(17, 16, 18, .86); backdrop-filter: blur(14px); width: calc(100% - 32px); }
.nav nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nav-link { padding: 8px 14px; border-radius: 10px; font-size: 17px; }
.nav-link:hover { background: var(--panel-2); }
.nav-account { border-radius: 999px; padding: 6px 16px 6px 6px; }
.nav-initial { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1b1220; font-size: 14px; }

/* accueil */
body { background-image: radial-gradient(900px 520px at 50% -80px, rgba(124, 63, 150, .30), transparent 70%); background-repeat: no-repeat; }
.hero { text-align: center; padding: 96px 20px 40px; max-width: 900px; margin: 0 auto; }
.hero h1 { font-size: clamp(34px, 5.2vw, 50px); }
.hero p { color: #d9d3de; font-size: 20px; margin: 22px auto 30px; max-width: 800px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.mock { display: flex; gap: 40px; justify-content: center; align-items: flex-start; padding: 30px 20px 0; height: 400px; overflow: hidden; perspective: 1800px; mask-image: linear-gradient(#000 60%, transparent); }
.mock-dash { display: flex; width: 620px; flex: none; border: 2px solid var(--accent-line); border-radius: 26px; background: #0f0e11; transform: rotateX(16deg) rotateY(14deg) rotateZ(-3deg); transform-origin: top center; box-shadow: 0 40px 120px rgba(124, 63, 150, .25); font-size: 13px; }
.mock-side { display: flex; flex-direction: column; gap: 6px; padding: 22px 14px; width: 170px; border-right: 1px solid var(--line); }
.mock-side b { margin-bottom: 10px; }
.mock-side span { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 9px; color: var(--muted); }
.mock-side .on { background: var(--accent-deep); color: var(--text); }
.mock-main { flex: 1; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mock-main small { color: var(--muted); }
.mock-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock-tiles div { background: var(--accent-deep); border-radius: 10px; padding: 10px; }
.mock-tiles em { display: block; font-style: normal; font-size: 11px; color: #d2b4e0; }
.mock-main svg { width: 100%; height: 170px; background: #17151a; border-radius: 12px; }
.mock-phones { position: relative; width: 470px; height: 420px; flex: none; transform: rotateY(-16deg) rotateZ(4deg); }
.mock-phone { position: absolute; width: 200px; height: 400px; border: 2px solid var(--accent-line); border-radius: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.mock-phone small { color: #d6d0db; }
.mock-phone i { display: block; width: 100%; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .12); margin-top: 6px; }
.mock-icons { display: flex; gap: 10px; margin: 6px 0; }
.mock-phone.p1 { left: 0; top: 0; }
.mock-phone.p2 { left: 135px; top: 44px; }
.mock-phone.p3 { left: 270px; top: 88px; }

.section { max-width: 1290px; margin: 0 auto; padding: 80px 20px 0; }
.section.narrow { max-width: 830px; }
.center { text-align: center; }
.section h2 { font-size: clamp(26px, 3.4vw, 34px); }
.hl { color: var(--accent); }
.sub { color: #d9d3de; font-size: 19px; margin: 14px 0 0; }
.page-title { font-size: clamp(32px, 5vw, 46px); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 34px 0 60px; text-align: left; }
.stat { display: flex; justify-content: space-between; gap: 12px; padding: 26px; border-radius: var(--radius); background: var(--panel); color: var(--accent); }
.stat strong { display: block; font-size: 34px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 18px; }
.claim-title { font-size: 20px; margin: 0 0 18px; }
.claim { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.claim-field { display: flex; flex-direction: row; gap: 0; color: var(--text); align-items: center; padding: 0 16px; height: 50px; border-radius: 14px; border: 1px solid var(--line); background: #0d0c0e; font-size: 18px; min-width: 0; }
.claim-field:focus-within { border-color: var(--accent-line); }
.claim-field input { background: none; border: 0; outline: 0; color: var(--text); font: inherit; width: 190px; min-width: 0; padding: 0 0 0 2px; }
.claim-field input::placeholder { color: #77717e; }
.claim .btn { height: 50px; border-radius: 14px; font-size: 17px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.features .card { color: var(--accent); }
.features h3 { color: var(--text); font-size: 20px; margin: 14px 0 6px; }
.features p { color: var(--muted); margin: 0; }

.banner { max-width: 1290px; margin: 90px auto 0; width: calc(100% - 32px); padding: 64px 60px; border-radius: 28px; background: radial-gradient(700px 300px at 20% 0, #3a1f46, transparent 70%), #1e1323; }
.banner h2 { font-size: clamp(30px, 4.4vw, 46px); }
.banner p { color: #d9d3de; font-size: 21px; max-width: 520px; margin: 16px 0 34px; }
.banner .claim { justify-content: flex-start; }
.banner-left { margin: 0 0 24px; width: 100%; padding: 34px; border-radius: 22px; }
.banner-left h2 { font-size: 28px; }
.banner-left p { font-size: 16px; margin: 10px 0 18px; max-width: none; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }

.price { margin: 40px auto 0; max-width: 420px; text-align: left; display: flex; flex-direction: column; gap: 16px; }
.price h3 { font-size: 22px; }
.price-n { font-size: 44px; font-weight: 500; }
.price-n span { font-size: 16px; color: var(--muted); margin-left: 8px; }
.price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.price li { display: flex; gap: 10px; align-items: center; }
.price li svg { color: var(--accent); }

/* classement */
.lb { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #0d0c0e; }
.lb-head, .lb-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 14px 20px; }
.lb-head { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.lb-row { grid-template-columns: 44px 36px 1fr auto; border-bottom: 1px solid var(--line); }
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: var(--panel); }
.lb-row.top1 { background: linear-gradient(90deg, rgba(214, 170, 60, .16), transparent); }
.lb-row.top2 { background: linear-gradient(90deg, rgba(170, 180, 195, .13), transparent); }
.lb-row.top3 { background: linear-gradient(90deg, rgba(190, 120, 70, .14), transparent); }
.lb-row.top .lb-rank { color: #e8c35a; }
.lb-rank { font-weight: 500; font-variant-numeric: tabular-nums; }
.lb-name { display: flex; flex-direction: column; min-width: 0; }
.lb-name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name small { color: var(--muted); }
.lb-views { font-variant-numeric: tabular-nums; font-weight: 500; }
.lb-empty { padding: 40px 20px; text-align: center; color: var(--muted); }

.avatar { border-radius: 50%; object-fit: cover; display: block; flex: none; }
.avatar-letter { display: grid; place-items: center; background: #1f1c22; border: 1px solid var(--line); font-weight: 500; }

/* pied de page */
.footer { max-width: 1290px; margin: 0 auto; padding: 80px 30px 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
.footer-brand { max-width: 360px; }
.footer-brand p { color: #d9d3de; margin: 18px 0 0; }
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-cols h4 { font-size: 22px; margin-bottom: 14px; }
.footer-cols a { display: block; color: var(--muted); padding: 3px 0; }
.footer-cols a:hover { color: var(--text); }
.footer-bottom { padding-top: 30px; color: var(--muted); }

/* formulaires */
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); min-width: 0; }
input, textarea, select { font: inherit; font-size: 16px; color: var(--text); background: #0d0c0e; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; min-width: 0; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--accent-line); }
textarea { resize: vertical; }
input[type=file] { padding: 8px; font-size: 14px; }
input[type=color] { width: 64px; height: 42px; padding: 4px; cursor: pointer; }
input[type=checkbox] { width: auto; accent-color: var(--accent); }
.check { flex-direction: row; align-items: center; gap: 8px; }
.prefixed { display: flex; align-items: center; background: #0d0c0e; border: 1px solid var(--line); border-radius: 12px; padding-left: 12px; }
.prefixed:focus-within { border-color: var(--accent-line); }
.prefixed i { font-style: normal; color: var(--text); font-size: 16px; }
.prefixed input { border: 0; background: none; padding-left: 2px; }
.form { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.form > .btn { align-self: flex-start; }
.form h3 { font-size: 18px; color: var(--text); }
.hint { color: var(--muted); font-size: 14px; margin: 0; }
.flash { padding: 12px 16px; border-radius: 12px; border: 1px solid; margin-bottom: 20px; }
.flash-ok { background: rgba(79, 201, 138, .1); border-color: rgba(79, 201, 138, .4); }
.flash-err { background: rgba(229, 86, 107, .1); border-color: rgba(229, 86, 107, .45); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 30px 16px; }
.auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.auth-card h1 { font-size: 26px; color: var(--text); }
.auth-card .flash { margin: 0; }
.auth-alt { margin: 0; text-align: center; color: var(--muted); font-size: 15px; }
.auth-alt a { color: var(--accent); }

/* tableau de bord */
body.dash-body { background: #070707; background-image: none; }
.dash { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 100vh; }
.dash-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 26px 16px 18px; margin: 0; background: #0d0d0e; border-radius: 0 22px 22px 0; }
.dash-side .logo { font-size: 24px; padding: 0 8px; }
.side-search { position: relative; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.side-search label { flex-direction: row; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 11px; background: #141415; color: var(--muted); }
.side-search input { border: 0; background: none; padding: 0; font-size: 14px; }
.side-search label:focus-within { box-shadow: 0 0 0 1px var(--accent-line); }
kbd { font: 10px/1 ui-monospace, monospace; padding: 4px 6px; border-radius: 6px; background: #1d1c1f; color: var(--muted); white-space: nowrap; }
#d-results { position: absolute; z-index: 5; top: 46px; left: 0; right: 0; padding: 6px; border-radius: 12px; background: #17161a; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
#d-results a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
#d-results a:hover, #d-results a:focus { background: var(--accent-deep); }
#d-results a[hidden] { display: none; }
.dash-side nav { display: flex; flex-direction: column; gap: 6px; }
.side-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; font-size: 17px; }
.side-item:hover { background: #17161a; }
.side-item.on { background: #2d1a36; }
.caret { margin-left: auto; display: grid; transition: transform .15s; }
.caret.open { transform: rotate(180deg); }
.side-sub { display: flex; flex-direction: column; padding: 2px 0 8px 44px; }
.side-sub a { padding: 4px 0; font-size: 14px; color: var(--muted); }
.side-sub a:hover, .side-sub a.on { color: var(--text); }
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 20px; }
.dash-box { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; border-radius: 16px; background: #131214; }
.dash-box span { font-size: 15px; color: #d9d3de; }
.dash-box span + .btn + span { margin-top: 8px; }
.dash-box .btn { justify-content: flex-start; padding: 7px 14px; border-radius: 10px; }
.btn-help { background: #1c2350; border-color: #3a4690; }
.btn-help:hover { background: #242d66; border-color: #5565c4; }
.share { border-radius: 14px; }
.side-user { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #131214; }
.side-user > span:not(.avatar) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.side-user b { font-weight: 500; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user small { color: var(--muted); }

.dash-main { padding: 40px clamp(16px, 2.6vw, 44px) 70px; min-width: 0; }
.dash-main h1 { font-size: 30px; text-align: center; margin-bottom: 34px; }
.dash-main h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; margin: 38px 0 14px; }
.dash-main > h2:first-child, .dash-main > form > h2:first-child, .flash + h2 { margin-top: 0; }
.dash-main h2 small { font-size: 14px; color: var(--muted); font-weight: 400; }
.dash-main h3 { font-size: 18px; margin-bottom: 14px; }
.dash-main h3 em { font-style: normal; color: var(--accent); }
.panel { background: #0f0f10; border-radius: 16px; padding: 22px; min-width: 0; }
.dash-main > .panel, .dash-main > form.panel { margin-bottom: 22px; }
.dash-main > .split + .panel { margin-top: 22px; }
.dash-main > .tiles + .split { margin-top: 22px; }
.head-panel h2 { margin: 0 0 4px; font-size: 23px; }
.head-panel > .hint { margin-bottom: 0; }
.head-panel > .socs { margin-top: 18px; }
.chip { font-size: 13px; padding: 4px 12px; border-radius: 999px; background: var(--accent-deep); border: 1px solid var(--accent-line); }
.chip:hover { border-color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.tile { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; padding: 20px; border-radius: 16px; background: #24142b; border: 1px solid #3b2147; }
.tile span { font-size: 16px; font-weight: 500; }
.tile b { grid-column: 1 / -1; font-size: 26px; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile small { grid-column: 1 / -1; color: #c9bfd0; font-size: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 3.8fr) minmax(260px, 1fr); gap: 22px; align-items: stretch; margin-top: 22px; }
h2 + .split { margin-top: 0; }
.split-rev { grid-template-columns: minmax(260px, 1fr) minmax(0, 3.4fr); }
.progress { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.progress i, .dev i { flex: 1; height: 16px; border-radius: 999px; background: #1a191c; overflow: hidden; display: block; }
.progress u, .dev u { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4a2259, #7c3f96); }
.notice { margin: 18px 0; padding: 14px 16px; border-radius: 14px; background: #131214; display: flex; flex-direction: column; gap: 4px; }
.notice b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 17px; }
.notice b svg { color: #f0a83c; }
.notice b.done svg { color: var(--ok); }
.notice span { color: var(--muted); font-size: 14px; }
.steps { display: flex; flex-wrap: wrap; gap: 10px; }
.step { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: #151416; font-size: 15px; }
.step span { flex: 1; }
.step:hover { background: #1d1b20; }
.step.done svg:first-child { color: var(--ok); }
.step svg { color: var(--muted); }
.row-btn { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-top: 8px; border-radius: 10px; background: #19181b; font-size: 15px; }
.row-btn:hover { background: #222024; }
.range { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.range .btn { padding: 6px 12px; font-size: 14px; }
.chart { display: flex; gap: 10px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 240px; color: var(--muted); font-size: 12px; text-align: right; min-width: 18px; }
.chart-plot { flex: 1; min-width: 0; }
.chart-plot svg { display: block; width: 100%; height: 240px; border-bottom: 1px solid var(--line); }
.chart-x { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; padding-top: 8px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 44px 16px; min-height: 160px; }
.empty b { font-weight: 500; font-size: 17px; }
.empty span { color: var(--muted); font-size: 14px; max-width: 34ch; }
.devs { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.dev { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; align-items: center; color: var(--accent); }
.dev span { color: var(--text); }
.dev b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.dev i { grid-column: 1 / 3; height: 10px; }
.dev small { color: var(--muted); font-variant-numeric: tabular-nums; }
.num { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 500; }

.settings { max-width: 640px; margin: 0 auto; }
.settings h2 { font-size: 19px; }
.danger { box-shadow: inset 0 0 0 1px #4a1d27; }
.dash-main .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.hint.under { margin: 10px 4px 0; }
.drop-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.drop-col h3 { margin: 0; }
.drop { position: relative; height: 150px; border-radius: 12px; border: 1px solid var(--line); background: #0a0a0b; cursor: pointer; overflow: hidden; display: grid; place-items: center; transition: border-color .15s; }
.drop:hover, .drop:focus-within { border-color: var(--accent-line); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop.drop-avatar img { inset: 15px auto auto 50%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; }
.drop img[hidden], .drop-hint[hidden] { display: none; }
.drop-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.drop-hint em { font-style: normal; }
input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--accent-line); height: 22px; }
.marks { display: flex; justify-content: space-around; font-size: 12px; position: relative; }
.marks i { font-style: normal; }
.marks output { position: absolute; right: 0; top: -52px; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.color-field { display: flex; align-items: center; gap: 12px; padding: 4px 12px 4px 6px; border-radius: 12px; background: #0a0a0b; border: 1px solid var(--line); color: var(--muted); }
.color-field:focus-within { border-color: var(--accent-line); }
.color-field input[type=color] { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; }
.color-field input::-webkit-color-swatch-wrapper { padding: 4px; }
.color-field input::-webkit-color-swatch { border-radius: 50%; border: 1px solid #3a3640; }
.color-field input::-moz-color-swatch { border-radius: 50%; border: 1px solid #3a3640; }
.color-field code { flex: 1; font: 15px ui-monospace, monospace; color: var(--text); }
.save-bar { position: sticky; bottom: 0; display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 0; margin-top: 16px; background: linear-gradient(transparent, #070707 40%); }

.socs { display: flex; flex-wrap: wrap; gap: 14px; }
.soc { position: relative; flex-direction: row; align-items: center; gap: 12px; cursor: pointer; }
.soc input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.soc > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: #17161a; border: 1px solid transparent; transition: transform .15s, border-color .15s, background .15s; }
.soc:hover > span { transform: translateY(-2px); background: #1f1d22; }
.soc:has(input:checked) > span { border-color: var(--accent); background: var(--accent-deep); }
.soc:has(input:focus-visible) > span { outline: 2px solid var(--accent); outline-offset: 2px; }
.soc-wide { padding-right: 16px; border-radius: 12px; background: #131214; }
.soc-wide b { display: flex; flex-direction: column; font-weight: 500; font-size: 14px; color: var(--text); }
.soc-wide small { color: var(--muted); font-weight: 400; }
.add-link { display: grid; grid-template-columns: 2fr 1fr auto; gap: 14px; align-items: end; margin: 22px 0 14px; }
.links { padding: 8px; }
.link-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.link-row:hover { background: #17161a; }
.link-ico { display: grid; }
.link-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.link-txt b { font-weight: 500; }
.link-txt small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.icon-btn:hover:not(:disabled) { color: var(--text); background: #1d1b20; }
.icon-btn.danger:hover { color: var(--danger); border-color: #8a2f3e; }
.icon-btn:disabled { opacity: .3; cursor: default; }

/* profil public */
body.pf { background: var(--pf-bg, #070708); min-height: 100vh; color: var(--pf-text, #fff); --pf-muted: color-mix(in srgb, var(--pf-text, #fff) 62%, transparent); --pf-line: color-mix(in srgb, var(--pf-text, #fff) 10%, transparent); }
.pf-bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(900px 480px at 50% -60px, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), var(--pf-bg, #070708); }
.pf-bg.has-img { background-size: cover; background-position: center; }
.pf-bg.has-img::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.pf-demo { margin: 0; padding: 8px 16px; text-align: center; font-size: 14px; background: color-mix(in srgb, var(--accent) 22%, #000); }
.pf-page { max-width: 720px; margin: 0 auto; padding: 28px 16px 40px; display: flex; flex-direction: column; gap: 18px; }
.pf-page.wide { max-width: 1180px; }
.pf-head, .pf-panel { border-radius: 22px; background: color-mix(in srgb, #0e0d10 var(--pf-card, 70%), transparent); backdrop-filter: blur(var(--pf-blur, 18px)); border: 1px solid var(--pf-line); }
.pf-head { overflow: hidden; }
.pf-banner { height: 230px; background-size: cover; background-position: center 22%; mask-image: linear-gradient(#000 45%, transparent); }
.pf-id { display: flex; gap: 24px; align-items: flex-start; padding: 28px; flex-wrap: wrap; }
.has-banner .pf-id { margin-top: -86px; position: relative; }
.pf-avatar { position: relative; flex: none; }
.pf-avatar .avatar { box-shadow: 0 0 0 3px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 45%, transparent); background: #17161a; }
.pf-sicon { position: absolute; right: -6px; bottom: -6px; border-radius: 50%; border: 3px solid #0e0d10; }
.pf-who { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pf-who h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 600; overflow-wrap: anywhere; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.pf-handle { margin: -4px 0 0; color: var(--pf-muted); }
.pf-riot { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); font-size: 15px; }
.pf-riot:hover { border-color: var(--accent); }
.pf-riot svg:first-child { color: #4fc98a; }
.pf-riot b { font-weight: 600; }
.pf-riot span, .pf-riot em { color: var(--pf-muted); font-style: normal; }
.pf-riot em { padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--pf-line); font-size: 13px; }
.pf-bio { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; max-width: 56ch; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--pf-text, #fff) 7%, transparent); font-size: 14px; color: var(--pf-muted); }
.pf-chips em { font-style: normal; opacity: .7; }
.pf-chips .chip-role { color: var(--pf-text, #fff); }
.pf-chips .chip-look { color: #4fc98a; background: rgba(79, 201, 138, .12); }
.pf-icons { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.pf-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--pf-icon, #fff); transition: color .15s, background .15s, transform .15s; }
.pf-icon:hover { color: var(--accent); background: color-mix(in srgb, var(--pf-text, #fff) 8%, transparent); transform: translateY(-2px); }
.pf-rank { flex: 0 1 300px; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, .32); border: 1px solid var(--pf-line); }
.rk { display: flex; align-items: center; gap: 12px; }
.rk div { display: flex; flex-direction: column; min-width: 0; }
.rk small { color: var(--pf-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.rk b { font-size: 17px; font-weight: 600; }
.rk-main b { font-size: 21px; line-height: 1.15; }
.rk span { color: var(--pf-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.rk:not(.rk-main) { padding-top: 12px; border-top: 1px solid var(--pf-line); }
.rk-peak { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: #e0b24c; }
.shield { flex: none; }

.pf-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.pf-side, .pf-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pf-panel { padding: 20px; }
.pf-panel h2 { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.pf-panel h2 svg { color: var(--accent); }
.pf-buttons { display: flex; flex-direction: column; gap: 8px; }
.pf-btn { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--pf-text, #fff) 6%, transparent); border: 1px solid var(--pf-line); transition: border-color .15s, background .15s; }
.pf-btn svg:first-child { color: var(--pf-icon, #fff); }
.pf-btn svg:last-child { color: var(--pf-muted); }
.pf-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.champ { border-radius: 10px; flex: none; background: #17161a; }
.mast { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mast li { display: flex; align-items: center; gap: 12px; }
.mast span, .favs span { display: flex; flex-direction: column; min-width: 0; }
.mast b { font-weight: 500; }
.mast small, .favs small { color: var(--pf-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.favs { display: flex; gap: 14px; flex-wrap: wrap; }
.favs span { align-items: center; gap: 6px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.stat-table th { font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--pf-muted); padding: 0 6px 8px; text-align: right; }
.stat-table td { padding: 7px 6px; text-align: right; border-top: 1px solid var(--pf-line); white-space: nowrap; }
.stat-table td:first-child { text-align: left; white-space: normal; }
.stat-table td:first-child > span { vertical-align: middle; }
.stat-table td:first-child > img { vertical-align: middle; margin-right: 10px; }
.stat-table td b { font-weight: 600; }
.pos { color: #4fc98a; }
.neg { color: #ef6b7b; }
.wr { display: inline-block; width: 54px; height: 6px; margin-left: 8px; border-radius: 999px; background: rgba(239, 107, 123, .35); overflow: hidden; vertical-align: middle; }
.wr u { display: block; height: 100%; background: #4fc98a; }
.summary { display: flex; align-items: center; gap: 12px 30px; flex-wrap: wrap; }
.ring { --p: 50; width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, #131215 78%, transparent 80%), conic-gradient(#4fc98a calc(var(--p) * 1%), rgba(239, 107, 123, .55) 0); }
.ring b { font-size: 19px; font-weight: 600; line-height: 1.1; }
.ring small, .sum-n small { color: var(--pf-muted); font-size: 12px; }
.sum-n { display: flex; flex-direction: column; }
.sum-n b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.match { display: grid; grid-template-columns: 26px 44px minmax(110px, 1.2fr) 62px minmax(120px, 1fr) minmax(0, 200px) 76px; align-items: center; gap: 12px; padding: 8px 12px 8px 0; border-radius: 12px; background: color-mix(in srgb, var(--pf-text, #fff) 4%, transparent); overflow: hidden; }
.match span { display: flex; flex-direction: column; min-width: 0; }
.match small { color: var(--pf-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match b { font-weight: 500; font-variant-numeric: tabular-nums; }
.m-res { align-self: stretch; margin: -8px 0; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.match.win .m-res { background: rgba(79, 201, 138, .2); color: #4fc98a; }
.match.loss .m-res { background: rgba(239, 107, 123, .2); color: #ef6b7b; }
.match.remake .m-res { background: rgba(255, 255, 255, .08); color: var(--pf-muted); }
.match .m-vs { flex-direction: row; align-items: center; gap: 6px; }
.match .m-items { flex-direction: row; flex-wrap: wrap; gap: 3px; }
.m-items img { border-radius: 6px; }
.m-date { text-align: right; }
.pf-empty { text-align: center; color: var(--pf-muted); }
.pf-empty a, .pf-foot a:hover { color: var(--accent); }
.pf-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; color: var(--pf-muted); font-size: 14px; padding: 0 6px; }
.pf-views { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.pf-foot small { flex-basis: 100%; font-size: 11px; line-height: 1.5; opacity: .75; }

.pf-bar { display: flex; padding: 0 28px 22px; }
.pf-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 999px; background: color-mix(in srgb, var(--pf-text, #fff) 8%, transparent); border: 1px solid var(--pf-line); font-size: 15px; transition: background .15s, border-color .15s; }
.pf-back:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pf-back:hover svg { transform: translateX(-3px); }
.pf-back svg { transition: transform .15s; }

/* profil : emblèmes, Discord, partie en cours */
.emblem { position: relative; overflow: hidden; flex: none; display: block; }
.emblem img { position: absolute; left: 50%; top: 50%; max-width: none; height: auto; }
.emblem.none { display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--pf-text, #fff) 6%, transparent); color: var(--pf-muted); font-size: 22px; }
.pf-discord { background: rgba(88, 101, 242, .16); border-color: rgba(88, 101, 242, .55); cursor: text; user-select: text; }
.pf-discord svg:first-child { color: #7984f5; }
.pf-who .pf-riot + .pf-discord { margin-top: -2px; }
.pf-live { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(79, 201, 138, .13); border: 1px solid rgba(79, 201, 138, .45); font-size: 14px; }
.pf-live b { color: #4fc98a; font-weight: 600; }
.pf-live i { width: 9px; height: 9px; border-radius: 50%; background: #4fc98a; animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .25; } }
.tag { color: var(--pf-muted); margin-left: 2px; }
.names { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.names li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.names small { color: var(--pf-muted); font-size: 13px; }

/* tableau de bord : étapes des comptes liés */
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.stepc { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; position: relative; }
.stepc:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 48px; bottom: -22px; width: 2px; background: var(--line); }
.stepn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-deep); border: 2px solid var(--accent-line); font-weight: 600; font-size: 18px; }
.stepc.done .stepn { background: rgba(79, 201, 138, .16); border-color: var(--ok); color: var(--ok); }
.stepc.done::before { background: var(--ok); opacity: .5; }
.btn-discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.btn-discord:hover { background: #4752c4; border-color: #4752c4; }
.notice .lnk { color: var(--accent); }

/* équipes, comptes Riot secondaires */
.btn-riot { background: #d13639; border-color: #d13639; color: #fff; }
.btn-riot:hover { background: #b32b2e; border-color: #b32b2e; }
.sub-h { margin: 24px 0 8px; font-size: 16px; font-weight: 500; }
.sub-h small, .muted { color: var(--muted); font-weight: 400; }
.alt-ico { border-radius: 50%; }
.alts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.alts a { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; }
.alts a:hover { background: color-mix(in srgb, var(--pf-text, #fff) 6%, transparent); }
.alts span { display: flex; flex-direction: column; min-width: 0; }
.alts b { font-weight: 500; }
.alts i { font-style: normal; color: var(--pf-muted); }
.alts small { color: var(--pf-muted); font-size: 13px; }
.pf-chips a.chip-team { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 14px; background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.pf-chips a.chip-team:hover { border-color: var(--accent); }
.tm-tag { margin: 0 0 4px; color: var(--accent); font-weight: 600; letter-spacing: .08em; }
.team h1 { font-size: clamp(30px, 5vw, 44px); }
.team > h2 { font-size: 22px; margin: 34px 0 14px; }
.tm-desc { white-space: pre-line; }
.chip { display: inline-flex; align-items: center; gap: 6px; }
.chip-ok { background: rgba(79, 201, 138, .14); border-color: rgba(79, 201, 138, .5); color: var(--ok); font-style: normal; }
.chip-off { background: var(--panel); border-color: var(--line); color: var(--muted); }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.tm-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.tm-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.tm-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm-who b { font-weight: 500; font-size: 18px; overflow-wrap: anywhere; }
.tm-who small { color: var(--muted); }
.tm-who i { font-style: normal; opacity: .7; }
.tm-dc { color: #8b95f7 !important; }
.tm-cap { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 12px; color: #e8c35a; vertical-align: middle; }
.tm-rank { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.tm-rank small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tm-rank .emblem.none { background: var(--panel-2); color: var(--muted); }
.tm-back { margin-top: 24px; }
.tm-back a:hover { color: var(--accent); }
.tm-head, .tm-row { grid-template-columns: 90px 1fr auto !important; }
.tm-row .lb-rank { color: var(--accent); }
.team-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.team-head h3 { font-size: 26px; margin: 0; }
.team-head .btn-row { margin: 0; }
.invite { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.invite code { font: 600 20px ui-monospace, monospace; letter-spacing: .12em; padding: 8px 14px; border-radius: 10px; background: #0a0a0b; border: 1px dashed var(--accent-line); }
.dash-main .panel h3 svg { vertical-align: -3px; margin-right: 6px; color: var(--accent); }

.warn { font-style: normal; font-size: 13px; font-weight: 500; color: #f0a83c; margin-left: 8px; }
.sub-form { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--line); }

.champ-link { display: inline-flex; flex: none; border-radius: 10px; transition: transform .15s, box-shadow .15s; }
.champ-link:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--accent); }
.champ-name:hover b { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.stat-table td:first-child > .champ-link { vertical-align: middle; margin-right: 10px; }
.org-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.org-card:hover { border-color: var(--accent); }
.org-card > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.org-card b { font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.org-card small { color: var(--pf-muted); font-size: 13px; }
.org-tag { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 8px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid color-mix(in srgb, var(--accent, #b565d8) 50%, transparent); font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.pf-sub { margin: 16px 0 8px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--pf-muted); }
.org-teams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.org-teams a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.org-teams a:hover { background: color-mix(in srgb, var(--pf-text, #fff) 7%, transparent); }
.org-teams a.mine { background: color-mix(in srgb, var(--pf-text, #fff) 6%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.org-teams em { font-style: normal; color: var(--accent); font-weight: 600; font-size: 13px; }
.org-teams b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-teams small { color: var(--pf-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.tm-tag a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* fiche d'équipe : choix, modale de contact */
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
legend { padding: 0 8px; font-size: 14px; color: var(--text); font-weight: 500; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-check { position: relative; }
.pill-check input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill-check span { padding: 7px 14px; border-radius: 999px; background: #17161a; border: 1px solid var(--line); color: var(--muted); font-size: 15px; transition: background .15s, border-color .15s, color .15s; }
.pill-check:hover span { color: var(--text); }
.pill-check input:checked + span { background: var(--accent-deep); border-color: var(--accent); color: var(--text); }
.pill-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-create { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.team.wide { max-width: 1180px; }
.tm-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 24px; }
.tm-info .card { padding: 26px; gap: 16px; }
.tm-info .btn { white-space: normal; text-align: left; }
.tm-info .pills { gap: 8px; }
.tm-info .chip { font-size: 15px; padding: 6px 14px; }
.team .banner-left { padding: 40px; }
.team .banner-left .pills { margin-top: 18px; align-items: center; }
.team .tm-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.team .tm-elo { padding: 26px; }
.tm-info .card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.tm-info h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.tm-info h3 svg { color: var(--accent); }
.tm-wide { grid-column: 1 / -1; }
.tm-line { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-line svg { color: var(--accent); }
.chip-goal { background: rgba(79, 201, 138, .12); border-color: rgba(79, 201, 138, .45); }
.pf-goals { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-goals span { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: rgba(79, 201, 138, .12); border: 1px solid rgba(79, 201, 138, .4); color: #8fe0b6; }
.pf-write { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--accent); font-size: 14px; }
.pf-write:hover { text-decoration: underline; text-underline-offset: 3px; }
.modal { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #131214; color: var(--text); }
.modal::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.modal form { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.modal h3 { font-size: 20px; }
.modal .flash { margin: 0; }
.modal .btn-row { margin: 0; }
@media (max-width: 1100px) { .team-create { grid-template-columns: 1fr; } }

.hours { display: flex; gap: 12px; flex-wrap: wrap; }
.hours label { flex-direction: row; align-items: center; gap: 8px; }
.hours input { width: 130px; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: var(--accent); color: #14091a; font-style: normal; font-size: 12px; font-weight: 700; }
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px; border-radius: 12px; }
.notif + .notif { border-top: 1px solid var(--line); border-radius: 0; }
.notif div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.notif b { font-weight: 500; }
.notif p { margin: 0; color: #d9d3de; white-space: pre-line; overflow-wrap: anywhere; }
.notif small { color: var(--muted); }
.notif-dot { width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: transparent; flex: none; }
.notif.new .notif-dot { background: var(--accent); }
.notif.new b { font-weight: 600; }

.elite { border: 1px solid color-mix(in srgb, var(--dc) 45%, transparent); background: color-mix(in srgb, var(--dc) 5%, #0f0f10); display: flex; flex-direction: column; gap: 14px; }
.elite .notice { margin: 0; }
.elite-ok { background: color-mix(in srgb, var(--dc) 12%, transparent) !important; }
.criteria { border-radius: 12px; background: #131214; padding: 12px 16px; }
.criteria summary { cursor: pointer; font-weight: 500; }
.criteria p { margin: 10px 0 0; white-space: pre-line; color: #d9d3de; }
.pf-chips .chip-elite { color: #f5c542; background: rgba(245, 197, 66, .14); border: 1px solid rgba(245, 197, 66, .5); font-weight: 600; }
.adm-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 4px; flex-wrap: wrap; }
.adm-row + .adm-row { border-top: 1px solid var(--line); }
.adm-who { display: flex; gap: 12px; align-items: flex-start; min-width: 0; flex: 1 1 320px; }
.adm-who span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-who a:hover { color: var(--accent); }
.adm-who small { color: var(--muted); }
.adm-who em { font-style: normal; font-weight: 600; }
.adm-who em.ok { color: var(--ok); margin: 0; font-size: inherit; display: inline; }
.adm-who em.warn { margin: 0; font-size: inherit; }
.adm-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline { display: flex; gap: 8px; align-items: center; }
.inline input { width: 230px; padding: 8px 10px; font-size: 14px; }

.pf-banner { background-position: center 30%; }
.drop.drop-banner img, .drop.drop-strip img, .drop.drop-background img { object-fit: cover; }
.drop.drop-strip { height: 80px; }
.tm-hero { display: flex; align-items: center; gap: 28px; min-height: 240px; background-size: cover; background-position: center; }
.tm-hero > div { min-width: 0; flex: 1; }
.tm-logo { border-radius: 20px; object-fit: cover; flex: none; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.org-logo { border-radius: 12px; object-fit: cover; flex: none; }
.org-card { background-size: cover; background-position: center; }
.tm-mini { border-radius: 6px; object-fit: cover; flex: none; }
[data-strip] { background-size: cover !important; background-position: center !important; }
.org-teams a[data-strip] { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 760px) { .tm-hero { flex-direction: column; align-items: flex-start; } }

.img-guide { border-radius: 12px; background: #131214; padding: 10px 14px; font-size: 14px; }
.img-guide summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.img-guide ul { margin: 10px 0; padding-left: 18px; color: #d9d3de; display: flex; flex-direction: column; gap: 4px; }
.prompt-label { margin: 10px 0 6px; color: var(--muted); }
.prompt { margin: 0 0 10px; padding: 12px; border-radius: 10px; background: #0a0a0b; border: 1px dashed var(--line); font: 13px/1.5 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); user-select: all; }
.img-guide .btn { padding: 6px 12px; font-size: 14px; }
/* fonds d'image derrière du texte : assez sombres pour rester lisibles quoi que l'usager téléverse */
.org-card[style] b, .org-card[style] small, [data-strip] b, [data-strip] em, [data-strip] small { text-shadow: 0 1px 6px #000, 0 0 2px #000; }

.cup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; margin-top: 26px; }
.cup-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--dc) 45%, transparent); background: radial-gradient(420px 200px at 100% 0, color-mix(in srgb, var(--dc) 22%, transparent), transparent 70%), var(--panel); }
.cup-top { display: flex; align-items: center; gap: 14px; }
.cup-ico { font-size: 40px; line-height: 1; }
.cup-top h2, .bk-modal header h2 { font-size: 24px; margin: 0; }
.cup-top small, .bk-modal header small { color: var(--muted); }
.cup-fill { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; color: var(--dc); font-weight: 500; white-space: nowrap; }
.cup-fill i { flex: 1; height: 10px; border-radius: 999px; background: #1d1c1f; overflow: hidden; display: block; }
.cup-fill u { display: block; height: 100%; border-radius: 999px; background: var(--dc); }
.cup-state, .cup-champ { margin: 0; color: var(--muted); }
.cup-state b { color: var(--text); font-weight: 500; }
.cup-champ { display: flex; align-items: center; gap: 8px; color: #e8c35a; }
.cup-card .btn { margin-top: auto; }
.bk-modal { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #08080a; color: var(--text); }
.bk-modal[open] { display: flex; flex-direction: column; }
.bk-modal header { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); background: radial-gradient(600px 120px at 0 0, color-mix(in srgb, var(--dc) 26%, transparent), transparent 70%), #0d0d0e; }
.bk-modal header > div { flex: 1; min-width: 0; }
.bk-close { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #17161a; color: var(--text); font-size: 18px; cursor: pointer; flex: none; }
.bk-close:hover { background: #3a141b; border-color: var(--danger); }
.bk-scroll { flex: 1; overflow: auto; padding: 24px; }
.bk-tree { display: flex; align-items: stretch; min-width: max-content; min-height: 100%; }
.bk-col { display: flex; flex-direction: column; width: 260px; flex: none; }
.bk-col h3 { position: sticky; top: -24px; z-index: 2; margin: 0 0 10px; padding: 8px 12px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: #08080a; display: flex; justify-content: space-between; gap: 8px; }
.bk-col.current h3 { color: var(--dc); }
.bk-col h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.bk-col-body { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
/* Chaque cellule occupe la même hauteur que les deux matchs qui y mènent : l'arbre s'aligne tout seul. */
.bk-cell { flex: 1; display: flex; align-items: center; padding: 5px 22px 5px 0; position: relative; }
.bk-cell > * { flex: 1; min-width: 0; }
.bk-col:not(.bk-final) .bk-cell::after { content: ''; position: absolute; right: 0; top: 50%; width: 22px; border-top: 2px solid var(--line); }
.bk-col:not(:first-child) .bk-cell { padding-left: 22px; }
.bk-col:not(:first-child) .bk-cell::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 22px; border: 2px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; }
.bk-col.bk-final .bk-cell::before { top: 50%; bottom: auto; height: 0; border: 0; border-top: 2px solid var(--line); border-radius: 0; }
.bk-crown { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px; border-radius: 16px; text-align: center; color: #e8c35a; border: 1px solid rgba(232, 195, 90, .45); background: rgba(232, 195, 90, .08); }
.bk-crown b { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.bk-match.decided { border-color: color-mix(in srgb, var(--dc) 45%, var(--line)); }
.bk-match { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #131214; }
.bk-match > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.bk-match > div + div { border-top: 1px solid var(--line); }
.bk-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bk-team img { border-radius: 5px; object-fit: cover; }
.bk-team em { font-style: normal; color: var(--dc); font-size: 12px; font-weight: 600; }
.bk-team a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-team a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bk-team.won a { font-weight: 600; color: var(--ok); }
.bk-team.lost { opacity: .45; }
.bk-team.bk-tbd { color: var(--muted); font-size: 14px; }
.bk-win { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.bk-win:hover { color: var(--ok); border-color: var(--ok); }
.team > h2 small { font-weight: 400; }

.cert-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.cert-steps.wide { margin-bottom: 8px; }
.cert-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #151416; border: 1px solid var(--line); min-height: 64px; }
.cert-step span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cert-step small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.cert-step b { font-weight: 500; }
.cert-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #1d1c1f; font-weight: 600; flex: none; }
.cert-step.done { border-color: rgba(79, 201, 138, .45); background: rgba(79, 201, 138, .07); }
.cert-step.done .cert-n { background: rgba(79, 201, 138, .18); color: var(--ok); }
.cert-step.next { border-color: var(--accent); background: var(--accent-deep); }
.cert-step.next .cert-n { background: var(--accent); color: #14091a; }
.cert-step.next:hover { background: #4a2559; }
.cert-step.locked { opacity: .45; cursor: not-allowed; }
.cert-done { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cert-done img { object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .6)); }
.cert-done h3 { font-size: 24px; }
.seal-fallback { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: rgba(245, 197, 66, .12); border: 2px solid rgba(245, 197, 66, .6); color: #f5c542; }
.consent { border-radius: 14px; background: #131214; border: 1px solid var(--line); padding: 16px 18px; }
.consent h4 { margin: 0 0 8px; font-weight: 500; }
.consent ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #d9d3de; font-size: 15px; }
.badge-adm { margin-bottom: 10px; }
.badge-adm summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.badge-adm summary::-webkit-details-marker { display: none; }
.badge-adm summary span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.badge-adm summary small { color: var(--muted); }
.badge-adm summary img { object-fit: contain; }
.badge-adm[open] summary { margin-bottom: 14px; }
.badge-adm[open] summary > svg { transform: rotate(180deg); }
.badge-adm .add-link { margin: 14px 0 0; }
.badge-ph { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: #17161a; color: var(--muted); }
.pf-cert { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; vertical-align: middle; color: #f5c542; }
.pf-cert img { object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .7)); }
.pf-cert em { font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: rgba(245, 197, 66, .14); border: 1px solid rgba(245, 197, 66, .55); text-shadow: none; }
.pf-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 14px 8px; }
.pf-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pf-badge img { object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); transition: transform .15s; }
.pf-badge:hover img { transform: scale(1.08); }
.pf-badge i { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(245, 197, 66, .1); border: 1px solid rgba(245, 197, 66, .45); color: #f5c542; }
.pf-badge small { font-size: 12px; line-height: 1.25; color: var(--pf-muted); }

.cert-img { height: 44px; width: auto; max-width: 132px; border-radius: 8px; object-fit: cover; flex: none; }
.cert-form { gap: 18px; }
.cert-price { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; padding: 22px; border-radius: 16px; background: linear-gradient(135deg, rgba(245, 197, 66, .16), rgba(181, 101, 216, .12)); border: 1px solid rgba(245, 197, 66, .45); }
.cert-price > div { display: flex; flex-direction: column; }
.cert-price small { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: #f5c542; }
.cert-price b { font-size: 44px; font-weight: 600; line-height: 1.05; }
.cert-price span { color: var(--muted); font-size: 14px; }
.cert-price ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cert-price li { display: flex; align-items: center; gap: 8px; }
.cert-price li b { font-size: inherit; line-height: inherit; }
.cert-price li svg { color: var(--ok); }
.cert-free { margin: 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: rgba(181, 101, 216, .08); border-radius: 0 10px 10px 0; color: #e6dfea; }
.tip { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: rgba(79, 167, 255, .08); border: 1px solid rgba(79, 167, 255, .35); }
.tip b { display: flex; align-items: center; gap: 8px; font-weight: 500; color: #8cc4ff; }
.tip span { color: #d9d3de; }
.tip-why { background: rgba(79, 201, 138, .07); border-color: rgba(79, 201, 138, .35); }
.tip-why b { color: #7fdcae; }
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 20px 0; }
.perk { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: rgba(245, 197, 66, .07); border: 1px solid rgba(245, 197, 66, .3); color: #f5c542; }
.perk span { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.perk b { font-weight: 500; }
.perk small { color: var(--muted); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.adm-table th { text-align: left; font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 10px 8px; white-space: nowrap; }
.adm-table td { padding: 9px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
.adm-table td.num { font-variant-numeric: tabular-nums; }
.adm-table em { font-style: normal; font-weight: 500; margin: 0; font-size: inherit; }
.adm-table em.ok { color: var(--ok); display: inline; }
.badge-adm summary img.vis { border-radius: 8px; width: auto; }
.pf-chips .chip-ticket { color: #f5c542; background: rgba(245, 197, 66, .12); }

.img-del { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.img-del img { height: 56px; width: auto; max-width: 180px; border-radius: 8px; object-fit: contain; background: #0a0a0b; }
.season { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 16px 0; }
.season-q h3 { font-size: 15px; margin: 0 0 8px; }
.season-w { display: flex; gap: 10px; align-items: baseline; padding: 5px 10px; border-radius: 8px; font-size: 14px; }
.season-w span { width: 62px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.season-w b { font-weight: 400; }
.season-w.past { opacity: .4; }
.season-w.rest { background: rgba(79, 167, 255, .1); }
.season-w.tour { background: rgba(245, 197, 66, .14); }
.season-w.tour b, .season-w.mega b { font-weight: 600; color: #f5c542; }
.season-w.mega { background: rgba(181, 101, 216, .22); }

/* divisions */
.div-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.div-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 18px; border-radius: 14px; background: #0d0d0e; border: 1px solid var(--line); opacity: .45; }
.div-card.open { opacity: 1; border-color: color-mix(in srgb, var(--dc) 60%, transparent); background: color-mix(in srgb, var(--dc) 7%, #0d0d0e); }
.div-card.natural { box-shadow: 0 0 0 2px var(--dc), 0 0 30px color-mix(in srgb, var(--dc) 25%, transparent); }
.div-state { position: absolute; top: 14px; right: 14px; color: var(--muted); }
.div-card.open .div-state { color: var(--ok); }
.div-ico { font-size: 28px; line-height: 1.2; }
.div-card b { font-weight: 600; }
.div-card small { color: var(--muted); }
.div-card em { margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dc); }
.div-card em.risk { color: #f0a83c; text-transform: none; letter-spacing: 0; font-weight: 500; }
.div-hint { margin-bottom: 16px; }
.div-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.div-chips i, .div-chips a { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--dc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--dc) 35%, transparent); color: color-mix(in srgb, var(--dc) 55%, #fff); }
.div-chips i.on, .div-chips a.on { background: color-mix(in srgb, var(--dc) 28%, transparent); border-color: var(--dc); color: #fff; font-weight: 600; }
.div-chips i.off { opacity: .35; text-decoration: line-through; }
.div-chips.big i { font-size: 14px; padding: 5px 12px; }
.rk-div { display: flex; flex-direction: column; padding-top: 12px; border-top: 1px solid var(--pf-line); }
.rk-div small { color: var(--pf-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.rk-div b { font-weight: 600; }
.tm-elo p { margin: 0 0 6px; }
.tm-elo small { color: var(--muted); font-weight: 400; }
.lol-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lol-cta h3 { margin: 0 0 4px; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.quick { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: #0f0f10; border: 1px solid transparent; color: var(--accent); transition: border-color .15s, background .15s; }
.quick:hover { border-color: var(--accent-line); background: #141316; }
.quick span { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text); }
.quick b { font-weight: 500; }
.quick small { color: var(--muted); }
.quick > svg:last-child { color: var(--muted); }
.tile b .muted { font-size: .7em; }

/* sélecteur de langue */
.lang { margin-top: 18px; display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.lang a { padding: 6px 12px; border-radius: 9px; font-size: 14px; color: var(--muted); }
.lang a:hover { color: var(--text); }
.lang a.on { background: var(--accent-deep); color: var(--text); }

/* tableau de bord : League of Legends */
.riot-linked, .riot-verify { display: flex; gap: 18px; align-items: center; }
.riot-linked img { border-radius: 50%; }
.riot-verify img { border-radius: 16px; box-shadow: 0 0 0 3px var(--accent-line); }
.riot-linked div, .riot-verify div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.riot-linked b { font-size: 20px; font-weight: 600; }
.riot-linked b span, .riot-linked small { color: var(--muted); font-weight: 400; }
.riot-verify b { font-size: 18px; font-weight: 500; }
.riot-verify em { font-style: normal; color: var(--accent); }
.riot-verify ol { margin: 6px 0 0; padding-left: 20px; color: #d9d3de; }
.ok { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 13px; font-weight: 500; color: var(--ok); margin-left: 8px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.form .btn-row { margin-top: 0; }
.lnk { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.dash-main .grid3 { gap: 22px; }

@media (max-width: 1100px) { .mock-phones { display: none; } .split, .split-rev { grid-template-columns: 1fr; } .match { grid-template-columns: 26px 44px minmax(0, 1fr) auto auto; } .match .m-vs, .match .m-items { display: none; } }
@media (max-width: 760px) {
  .nav { position: static; margin-top: 8px; padding: 12px 14px; border-radius: 20px; flex-direction: column; gap: 8px; }
  .nav nav { justify-content: center; gap: 2px; }
  .nav-link { font-size: 15px; padding: 6px 8px; }
  .nav .btn { padding: 6px 12px; font-size: 15px; }
  .logo { font-size: 22px; }
  .hero { padding-top: 56px; }
  .hero p { font-size: 18px; }
  .mock { display: none; }
  .section { padding-top: 56px; }
  .banner { padding: 36px 22px; }
  .footer-cols { gap: 36px; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-id { padding: 20px; gap: 16px; }
  .pf-rank { flex-basis: 100%; }
  .riot-linked, .riot-verify { flex-direction: column; align-items: flex-start; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { position: static; height: auto; border-radius: 0 0 22px 22px; }
  .side-bottom { margin-top: 0; }
  .add-link { grid-template-columns: 1fr; }
  .dash-main .grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Classements et tournois (double élimination) */
.cup-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cup-tn { border-color: #e8c35a; color: #e8c35a; }
.st-wrap { max-width: 1040px; margin: 0 auto; }
.st-legend { color: var(--muted); font-size: 14px; margin: 0 0 16px; max-width: 1040px; line-height: 1.6; }
.st-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin: 0 6px 0 10px; vertical-align: -1px; }
.st-key:first-child { margin-left: 0; }
.st-key.q8, .st-table tr.st-q8 td:first-child { background: color-mix(in srgb, var(--dc) 55%, transparent); }
.st-key.q16, .st-table tr.st-q16 td:first-child { background: color-mix(in srgb, var(--dc) 22%, transparent); }
.st-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.st-table th { text-align: left; padding: 8px 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); position: sticky; top: -24px; background: #08080a; }
.st-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.st-table td:first-child { width: 44px; text-align: center; font-weight: 600; border-radius: 6px 0 0 6px; }
.st-table td small { display: block; color: var(--muted); font-size: 12px; }
.st-table td:nth-child(4) small { display: inline; }
.st-table tr.st-out { opacity: .5; }
.st-h, .bk-part { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; font-size: 18px; font-weight: 500; }
.bk-part:first-of-type { margin-top: 6px; }
.st-h small, .bk-part small { color: var(--muted); font-size: 13px; font-weight: 400; }
.st-players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.st-players li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: #131214; }
.st-players li span { width: 28px; color: var(--dc); font-weight: 600; flex: none; }
.st-players li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-players li small { color: var(--muted); font-size: 12px; flex: none; }
.bk-stack .bk-tree { min-height: 0; margin-bottom: 8px; }
.bk-stack .bk-cell { min-height: 86px; }
.bk-stack .bk-col h3 { position: static; }
.bk-col.bk-flat .bk-cell::before { top: 50%; bottom: auto; height: 0; border: 0; border-top: 2px solid var(--line); border-radius: 0; }
.bk-seed { font-style: normal; font-size: 11px; color: var(--muted); width: 16px; text-align: right; flex: none; }
.bk-score { font-weight: 600; color: var(--muted); flex: none; }
.bk-team.won + .bk-score { color: var(--ok); }
.bk-pick { display: flex; gap: 4px; flex: none; }
.bk-sc { padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.bk-sc:hover { color: var(--ok); border-color: var(--ok); }
.bk-match.bk-auto { opacity: .4; border-style: dashed; }
.bk-next { color: var(--muted); font-size: 14px; padding: 0 6px; white-space: nowrap; }

/* Simulateur des revenus */
.sim-page #sim { display: grid; gap: 18px; margin-top: 18px; }
.sim-box { display: grid; gap: 14px; }
.sim-box h3 { margin: 0; font-size: 18px; font-weight: 500; }
.sim-box h3 small, .sim-pay h4 small { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 6px; }
.sim-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.sim-kpi { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.sim-kpi span { color: var(--muted); font-size: 13px; }
.sim-kpi b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sim-kpi small { color: var(--muted); font-size: 12px; }
.sim-kpi.good b, .sim-good { color: var(--ok); }
.sim-kpi.bad b, .sim-bad, .sim-bad b { color: var(--danger); }
.sim-bar { display: flex; height: 26px; border-radius: 9px; overflow: hidden; gap: 2px; }
.sim-bar i { min-width: 2px; }
.sim-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
.sim-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; }
.sim-legend b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.sim-warn { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--danger); color: var(--danger); background: rgba(229, 86, 107, .08); font-size: 14px; }
.sim-scroll { overflow-x: auto; }
.sim-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.sim-table th { text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sim-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.sim-table td small { display: block; color: var(--muted); font-size: 12px; }
.sim-table td em { font-style: normal; font-size: 12px; color: #e8c35a; }
.sim-table tr.sim-off td { color: var(--muted); white-space: normal; }
.sim-table td.sim-no { color: var(--muted); opacity: .5; }
.sim-cup { color: var(--dc); font-weight: 600; }
.sim-pays { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sim-pay { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--dc) 40%, var(--line)); border-radius: 14px; background: #131214; align-content: start; }
.sim-pay h4 { margin: 0; color: var(--dc); font-size: 16px; }
.sim-pay > div { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; font-size: 14px; }
.sim-pay > div b { font-variant-numeric: tabular-nums; }
.sim-pay > div small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; text-align: right; }
.sim-pay p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.sim-pay p b { color: var(--text); }
.sim-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sim-row > b, .sim-row > .sim-cup { flex: 0 0 100%; }
.sim-row > small { flex: 0 0 100%; color: var(--muted); font-size: 12px; margin-top: -8px; }
.sim-row > .sim-cup + small { margin-top: -10px; }
.sim-f { display: grid; gap: 4px; font-size: 12px; color: var(--muted); flex-direction: unset; }
.sim-in { display: flex; align-items: center; gap: 6px; }
.sim-f input { width: 96px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: #0d0d0e; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; }
.sim-f select { padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: #0d0d0e; color: var(--text); font: inherit; max-width: 100%; }
.sim-in i { font-style: normal; color: var(--muted); }
.sim-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-tiers input { width: 76px; }
.sim-keep { flex: 0 0 100%; font-size: 12px; color: var(--muted); }
.section.sim-page { max-width: 1560px; }
@media (min-width: 1180px) {
  .sim-page #sim { grid-template-columns: 430px minmax(0, 1fr); align-items: start; }
  #sim-in { order: -1; display: grid; gap: 18px; }
}
#sim-in, #sim-out { display: grid; gap: 18px; min-width: 0; }
.sim-kpis { margin-bottom: 0; }
.sim-state { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.sim-page .pills form { display: inline-flex; }

/* Billets */
.tk-mine { display: flex; flex-wrap: wrap; gap: 10px; }
.tk-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--dc) 50%, var(--line)); background: color-mix(in srgb, var(--dc) 10%, transparent); }
.tk-chip b { color: var(--dc); font-size: 18px; }
.tk-form { margin-bottom: 14px; }
.tk-form h3 { margin: 0; }
.tk-form h3 small { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 6px; }

/* Sceau certifié sur l'avatar (à gauche, en miroir de l'icône d'invocateur) et badges qui s'ouvrent en grand */
.pf-sseal { position: absolute; left: -8px; bottom: -8px; width: 44px; height: 44px; border-radius: 50%; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .8)); }
span.pf-sseal { display: grid; place-items: center; background: #0e0d10; border: 2px solid #f5c542; color: #f5c542; }
button.pf-badge { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.pf-badge time { font-size: 11px; line-height: 1.2; color: var(--pf-muted); opacity: .8; }
.pf-bdg { width: min(460px, calc(100vw - 32px)); padding: 28px 24px 24px; text-align: center; overflow: visible; }
.pf-bdg[open] { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pf-bdg img { width: min(320px, 70vw); height: auto; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .7)); }
.pf-bdg i { display: grid; place-items: center; width: 200px; height: 200px; border-radius: 50%; background: rgba(245, 197, 66, .1); border: 2px solid rgba(245, 197, 66, .5); color: #f5c542; }
.pf-bdg h3 { font-size: 22px; margin: 4px 0 0; }
.pf-bdg p { margin: 0; color: var(--muted); line-height: 1.5; }
.pf-bdg .pf-bdg-date { font-size: 13px; }
.pf-bdg .bk-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; }
.pf-bdg .btn { min-width: 140px; margin-top: 6px; }

/* Double authentification */
.tfa-setup { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.tfa-setup img { border-radius: 12px; background: #fff; padding: 6px; }
.tfa-setup > div { flex: 1; min-width: 260px; display: grid; gap: 10px; }
.tfa-setup p { margin: 0; }
.tfa-codes { columns: 2; font-size: 16px; letter-spacing: .08em; }

/* Étapes de certification : cases toutes de la même taille */
.cert-steps { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-rows: 1fr; }
.cert-steps li { display: flex; }
.cert-step { flex: 1; min-height: 76px; height: 100%; box-sizing: border-box; }
.cert-step.soon { opacity: .55; border-style: dashed; }
/* Billets : choix des personnes */
.tk-who { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; margin: 0; }
.tk-who legend { padding: 0 6px; color: var(--muted); font-size: 13px; }
.tk-who .check { flex-direction: row; align-items: center; gap: 10px; color: var(--text); }
.tk-who .check small { color: var(--muted); }

/* Streamers */
.cup-replays { font-size: 14px; }
.cup-replays summary { cursor: pointer; color: var(--muted); }
.cup-replays a { display: block; padding: 6px 0; border-top: 1px solid var(--line); }
.cup-replays a small { display: block; color: var(--muted); font-size: 12px; }

/* Discord privé par communauté */
.cm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.cm-card { display: grid; gap: 4px; padding: 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--dc) 40%, var(--line)); background: color-mix(in srgb, var(--dc) 7%, transparent); cursor: pointer; flex-direction: unset; }
.cm-card:has(input:checked) { border-color: var(--dc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dc) 45%, transparent); }
.cm-card input { justify-self: start; accent-color: var(--dc); }
.cm-card b { color: var(--dc); font-size: 18px; }
.cm-card small { color: var(--muted); }
.cm-done { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; border-color: color-mix(in srgb, var(--dc) 45%, var(--line)); }
.cm-done img { object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .6)); }
.cm-done h3 { color: var(--dc); font-size: 24px; margin: 0 0 6px; }
.cm-done > div { flex: 1; min-width: 240px; display: grid; gap: 8px; }
.cm-fallback { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; color: var(--dc); border: 2px solid var(--dc); background: color-mix(in srgb, var(--dc) 10%, transparent); }
.cm-opts { display: grid; gap: 8px; }
.cm-opts > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; }
.cm-opts b { font-weight: 500; font-size: 14px; }
.cm-chans { flex: 0 0 100%; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.cm-chans h4 { margin: 0; font-size: 15px; } .cm-chans h4 small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.cm-confirm { border-color: #e8c35a; }
.cm-card input[type=checkbox] { justify-self: start; accent-color: var(--dc); }
.soc-av { border-radius: 50%; object-fit: cover; flex: none; }
.pf-twitch img { border-radius: 50%; }

/* Compte sans Riot vérifié (streamer ou coach seulement) : nom en rouge */
.no-riot, .no-riot a, b.no-riot, h1.no-riot { color: #ff5a5f !important; }
p.no-riot { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.pf-noriot { font-size: 13px !important; text-transform: uppercase; letter-spacing: .05em; }

/* Événements */
.pf-events { display: grid; gap: 8px; }
.pf-events a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--pf-text, #fff) 12%, transparent); }
.pf-events a:hover { border-color: var(--accent); }
.pf-events small { color: var(--pf-muted, var(--muted)); font-size: 12px; }
.ev-body { white-space: pre-wrap; margin: 0; line-height: 1.6; }

/* Présentation écrite du profil */
.pf-story { display: grid; gap: 5px; margin: 6px 0 4px; max-width: 640px; }
.pf-story p { margin: 0; line-height: 1.55; color: var(--pf-text, var(--text)); }
.pf-story b { font-weight: 600; }
.pf-me { font-weight: 600; color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.pf-tw { color: #b58cff; display: inline-flex; align-items: center; gap: 5px; vertical-align: bottom; } .pf-tw img { border-radius: 50%; }
.pf-dc { color: #8ea1ff; }
.pf-cup { font-style: normal; font-weight: 600; color: var(--dc); white-space: nowrap; }

/* Convocation : l'événement est démarré */
.live-call { display: grid; gap: 6px; padding: 16px 18px; margin-bottom: 16px; border-radius: 16px; border: 2px solid var(--dc, var(--accent)); background: color-mix(in srgb, var(--dc, var(--accent)) 12%, transparent); }
.live-call b { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.live-call b i { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255, 77, 77, .6); animation: live-pulse 1.6s infinite; }
.live-call span { line-height: 1.55; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 77, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } }

/* Profil : mêmes sections qu'avant, texte en phrases */
.pf-riot { flex-wrap: wrap; max-width: 100%; }
.pf-rank { flex: 0 1 340px; }
.rk span { line-height: 1.45; font-variant-numeric: normal; }
.rk-can { font-style: normal; color: var(--pf-muted); font-size: 13px; margin: 4px 0 6px; }
.chip-role b { font-weight: 600; } .chip-role em { font-style: normal; opacity: .8; }

/* Bulles Twitch et Discord cliquables (copie du nom), Cups cliquables */
button.pf-copy { font: inherit; color: inherit; cursor: pointer; }
button.pf-copy:hover { border-color: var(--accent); }
.pf-discord.pf-copy svg { color: #8ea1ff; } .pf-twitch.pf-copy svg { color: #b58cff; }
.div-chips a { text-decoration: none; }
.div-chips a { color: inherit; } .div-chips a:hover { border-color: var(--dc); }

/* Tableau de bord : table des matières, retour en haut, enregistrement par section, blocs alternés */
html { scroll-behavior: smooth; }
.dash-main h2 { scroll-margin-top: 16px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; position: sticky; top: 0; z-index: 6; padding: 10px 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); }
.toc a { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; white-space: nowrap; }
.toc a:hover { border-color: var(--accent); color: var(--accent); }
.to-top { float: right; font-size: 12px; font-weight: 400; color: var(--muted); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); margin-left: 10px; }
.to-top:hover { color: var(--accent); border-color: var(--accent); }
.sec-save { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.sticky-save { position: sticky; bottom: 14px; z-index: 5; box-shadow: 0 8px 28px rgba(0, 0, 0, .6); align-self: flex-start; }
.dash.alt .dash-main > section.panel:nth-of-type(even), .dash.alt .dash-main form > section.panel:nth-of-type(even), .dash.alt .dash-main > form.panel:nth-of-type(even) { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
/* Code QR */
.qr-card { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 28px; }
.qr-card img { background: #fff; border-radius: 16px; padding: 10px; width: min(420px, 80vw); height: auto; }
.qr-url { color: var(--muted); overflow-wrap: anywhere; margin: 0; }
@media print { .nav, nav, footer, .qr-card .pills { display: none !important; } body { background: #fff !important; color: #000 !important; } .qr-card { border: 0; } }

/* Sélection des champions */
.section.dr-page { max-width: 1680px; --b: #3d8bfd; --r: #ef5350; }
.dr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dr-head h1 { margin: 0; font-size: 28px; }
.dr-status { margin: 0; font-size: 17px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.dr-t-blue { color: var(--b); } .dr-t-red { color: var(--r); }
.dr-strip { display: flex; gap: 4px; margin: 0 0 16px; }
.dr-strip i { flex: 1; height: 22px; display: grid; place-items: center; font-style: normal; font-size: 11px; border-radius: 5px; opacity: .3; color: #fff; }
.dr-strip i.dr-blue { background: var(--b); } .dr-strip i.dr-red { background: var(--r); }
.dr-strip i.done { opacity: .85; } .dr-strip i.now { opacity: 1; outline: 2px solid #fff; outline-offset: 1px; }
.dr-board { display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.dr-side { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 8px; position: sticky; top: 12px; }
.dr-side.dr-blue { border-top: 4px solid var(--b); } .dr-side.dr-red { border-top: 4px solid var(--r); }
.dr-side.now { box-shadow: 0 0 0 2px color-mix(in srgb, #fff 35%, transparent); }
.dr-side h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; } .dr-side h2 img { border-radius: 6px; }
.dr-side h2 span { display: grid; min-width: 0; } .dr-side h2 small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 400; }
.dr-side h2 a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-side h3 { margin: 6px 0 0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.dr-bans { display: flex; gap: 5px; } .dr-picks { display: grid; gap: 6px; }
.dr-slot { display: inline-flex; align-items: center; gap: 10px; border-radius: 8px; overflow: hidden; }
.dr-slot img { display: block; border-radius: 8px; }
.dr-bans .dr-slot img { filter: grayscale(1) brightness(.6); }
.dr-slot.big { padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #0d0d0e; }
.dr-slot.big b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-empty { width: 40px; height: 40px; border: 1px dashed var(--line); } .dr-empty.big { width: auto; height: 74px; }
.dr-skip { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); }
.dr-grid-wrap { display: grid; gap: 12px; }
.dr-search { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.dr-grid button { display: grid; justify-items: center; gap: 3px; padding: 5px 2px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
.dr-grid button img { border-radius: 8px; display: block; }
.dr-grid button span { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-grid button:not(:disabled):hover { border-color: var(--accent); background: var(--accent-deep); }
.dr-grid button:disabled { cursor: default; }
.dr-grid button.off { opacity: .22; } .dr-grid button.off img { filter: grayscale(1); }
.dr-mid { display: grid; gap: 18px; }
.dr-skins { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 12px; }
.dr-skins.dr-blue { border-left: 4px solid var(--b); } .dr-skins.dr-red { border-left: 4px solid var(--r); }
.dr-skins h2 { margin: 0; font-size: 18px; } .dr-skins h2 small { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 6px; }
.dr-skin-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.dr-skin-card { display: grid; gap: 5px; justify-items: start; }
.dr-skin-card > img { border-radius: 10px; width: 154px; height: 280px; object-fit: cover; }
.dr-skin-card small { color: var(--muted); font-size: 12px; }
.dr-skin-card summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.dr-skin-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; max-height: 320px; overflow: auto; }
.dr-skin-list button { display: grid; gap: 3px; justify-items: center; padding: 4px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--text); font: inherit; font-size: 10px; cursor: pointer; width: 100%; }
.dr-skin-list button img { border-radius: 6px; width: 66px; height: 120px; object-fit: cover; }
.dr-skin-list button.on { border-color: var(--ok); } .dr-skin-list button.banned { opacity: .35; cursor: not-allowed; }
@media (max-width: 1000px) { .dr-board { grid-template-columns: 1fr 1fr; } .dr-grid-wrap, .dr-mid { grid-column: 1 / -1; order: 3; } .dr-side { position: static; } }
.pf-bdg .pf-bdg-retry { color: #e8c35a; font-weight: 600; }

/* Règlements */
.legal-body p, .legal-changes p { line-height: 1.65; margin: 0 0 12px; }
.legal-body { max-height: 60vh; overflow: auto; }
.card.legal-body { max-height: none; }
.legal-changes { border-color: #e8c35a; } .legal-changes h3 { margin: 0 0 10px; color: #e8c35a; font-size: 16px; }

/* Historique de l équipe */
.hist { display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.hist > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.hist time { color: var(--muted); font-variant-numeric: tabular-nums; } .hist small { color: var(--muted); }

/* Commanditaires */
.sp-logo { border-radius: 8px; vertical-align: middle; margin-left: 8px; background: #fff1; }
.sp-strip { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.sp-label { flex: none; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.sp-track { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sp-run { display: inline-flex; gap: 44px; white-space: nowrap; animation: sp-scroll 28s linear infinite; }
.sp-strip:hover .sp-run { animation-play-state: paused; }
.sp-item { display: inline-flex; align-items: center; gap: 10px; } .sp-item img { border-radius: 6px; } .sp-item small { color: var(--muted); }
@keyframes sp-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sp-run { animation: none; } }
.sp-team { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; }
.sp-team > span:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cup-fund { margin: 0; font-size: 14px; color: #e8c35a; }

/* Boutique */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.shop-card { display: grid; gap: 4px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.shop-card:hover { border-color: var(--accent); }
.shop-card img, .shop-ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #0d0d0e; display: grid; place-items: center; color: var(--muted); }
.shop-card small { color: var(--muted); font-size: 12px; } .shop-card em { font-style: normal; font-weight: 600; color: var(--accent); }
.shop-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.shop-item > div:first-child img, .shop-ph.big { width: 100%; border-radius: 18px; aspect-ratio: 1; object-fit: cover; }
.shop-price { font-size: 26px; font-weight: 600; color: var(--accent); margin: 0; }
@media (max-width: 800px) { .shop-item { grid-template-columns: 1fr; } }
.shop-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; }
.shop-gallery figure { margin: 0; display: grid; gap: 4px; } .shop-gallery img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #0d0d0e; border: 1px solid var(--line); }
.shop-gallery img.qr { background: #fff; padding: 6px; } .shop-gallery figcaption { font-size: 11px; color: var(--muted); text-align: center; }
.dr-game { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.bk-match > form.bk-draft { display: block; padding: 0; border-top: 1px solid var(--line); }
.bk-draft button { width: 100%; padding: 5px 8px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
.bk-draft button:hover { background: var(--accent-deep); }

/* Liens erronés */
.pf-broken { position: relative; opacity: .75; }
.pf-bang { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: #ff5a5f; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.pf-btn.pf-broken .pf-bang { position: static; margin-left: 6px; }
.broken-link { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 26px; }
.broken-link img { width: min(640px, 100%); border-radius: 16px; }
.broken-ph { width: 160px; height: 160px; border-radius: 50%; display: grid; place-items: center; color: #ff5a5f; border: 2px dashed #ff5a5f; }
.link-row.link-bad { border-left: 3px solid #ff5a5f; padding-left: 10px; }
.link-edit { flex: 0 0 100%; } .link-edit summary { cursor: pointer; font-size: 13px; color: var(--accent); }

/* Changer de compte, délai de déclaration */
.side-switch { font-size: 14px; } .side-switch summary { cursor: pointer; padding: 6px 4px; color: var(--muted); } .side-switch summary small { background: var(--accent-deep); border-radius: 999px; padding: 1px 7px; margin-left: 4px; color: var(--text); }
.side-switch form { margin: 0; }
.side-acc { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 10px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.side-acc:hover { background: var(--panel-2); }
.side-switch > small { display: block; color: var(--muted); font-size: 12px; padding: 4px 8px; }
.notice.grace { border-color: #e8c35a; margin-bottom: 16px; }
.auth-warn { font-size: 12px; color: var(--muted); border: 1px solid #e8c35a66; border-radius: 10px; padding: 8px 10px; text-align: left; }
.dr-clock { font-variant-numeric: tabular-nums; font-size: 20px; } .dr-clock.low { color: #ff5a5f; }
.dr-player { font-size: 13px; color: var(--accent); } .dr-assign { display: flex; gap: 4px; } .dr-assign select { max-width: 110px; padding: 3px 4px; border-radius: 7px; border: 1px solid var(--line); background: #0d0d0e; color: var(--text); font: inherit; font-size: 12px; } .dr-assign .btn { padding: 3px 8px; font-size: 12px; }

/* Étape 1 : Qui es-tu ? */
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.role-cube { display: grid; gap: 6px; align-content: start; padding: 18px 16px; min-height: 130px; border-radius: 16px; border: 1px solid var(--line); background: #151416; cursor: pointer; flex-direction: unset; }
.role-cube:has(input:checked) { border-color: var(--accent); background: var(--accent-deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.role-cube input { justify-self: start; accent-color: var(--accent); } .role-cube b { font-size: 18px; } .role-cube small { color: var(--muted); line-height: 1.4; }
.pf-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.pf-role { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pf-role-coach { border-color: #4fc98a88; background: #4fc98a22; } .pf-role-streamer { border-color: #9146ff88; background: #9146ff22; } .pf-role-commanditaire { border-color: #e8c35a88; background: #e8c35a22; }
.jury-c { white-space: pre-wrap; font-size: 14px !important; color: var(--text) !important; line-height: 1.5; } form.jury { flex: 0 0 100%; }
.matricule { font-size: 15px; letter-spacing: .04em; white-space: pre-wrap; word-break: break-all; } .pf-matricule { font-family: ui-monospace, monospace; font-size: 10px; opacity: .6; overflow-wrap: anywhere; flex-basis: 100%; }

/* Bracket : heure et code de la partie (administration), note du bracket anonyme */
.bk-code{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:4px}
.bk-code small{flex:1 0 100%;opacity:.75;font-size:11px}
.bk-code input[name=code]{flex:1;min-width:0;font-size:12px;padding:3px 6px}
.bk-code button{font-size:12px;padding:3px 8px}
.bk-note{margin:0;padding:8px 16px;font-size:13px;opacity:.85}

/* ARAM */
.aram-dates,.aram-teams{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.aram-dates li,.aram-teams li{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.aram-teams li span{text-align:right}
.aram-form{display:grid;gap:8px;margin-top:8px}
.aram-wide{grid-column:1/-1}
.aram-bk{overflow-x:auto;padding:24px 0 8px}
.aram-new{margin-top:18px}.aram-new summary{cursor:pointer;font-weight:600}
.aram-ladders{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.aram-ladder h3{margin-top:0}

/* Rediffusions par match et recherche d'un streamer */
.cup-need{margin:10px 0;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--dc) 60%,var(--line));border-radius:10px;display:grid;gap:6px;font-size:14px}
details.cup-need{display:block;padding:0;border:0;margin:8px 0 0;font-size:13px}
details.cup-need>summary{cursor:pointer;color:var(--muted);list-style:none;padding:4px 0}details.cup-need>summary::-webkit-details-marker{display:none}details.cup-need>summary:hover{color:var(--text)}
details.cup-need[open]{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.25)}details.cup-need p{margin:4px 0 8px;color:var(--muted)}
.cup-need-list{display:grid;gap:6px;max-height:220px;overflow:auto}.cup-need-list form{padding:6px 0;border-top:1px solid var(--line)}.cup-need-list span{flex:1;min-width:0;line-height:1.3}.cup-need-list .btn{padding:5px 10px;font-size:12px;white-space:nowrap}
.cup-need form{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cup-need.mine{border-style:solid}
.cup-vod{display:flex;align-items:center;gap:6px}.cup-vod a{flex:1}
.cup-vod form button{border:0;background:none;color:inherit;opacity:.6;cursor:pointer}
.cup-vod-form{display:grid;gap:8px;margin-top:10px}

/* Défis Riot sur le profil */
.ch-total{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.ch-cats,.ch-top{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ch-cats li{display:grid;grid-template-columns:1fr auto 4.5em;gap:8px;align-items:baseline;font-size:14px}
.ch-cats small{text-align:right;opacity:.7}
.ch-top{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.ch-top li{display:flex;flex-direction:column;font-size:14px}.ch-top small{opacity:.8}
.ch-tier{font-weight:600}
.ch-iron{color:#8a8582}.ch-bronze{color:#b0774f}.ch-silver{color:#9fb0bd}.ch-gold{color:#d6a442}.ch-platinum{color:#4fb6a8}.ch-diamond{color:#6aa3f0}.ch-master{color:#b06be0}.ch-grandmaster{color:#e0605a}.ch-challenger{color:#f0c85a}

/* Historique complet des parties */
.hist-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.hist-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0}
.pf-more{margin:12px 0 0;text-align:center}

/* Billets : cartes de Cup, choix du nombre, réserve */
.tk-cups{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;align-items:start}
.tk-cup{border:1px solid var(--line);border-radius:16px;background:var(--panel,rgba(255,255,255,.03));overflow:hidden}
.tk-cup[open]{grid-column:1/-1;border-color:var(--dc);box-shadow:0 0 0 2px color-mix(in srgb,var(--dc) 40%,transparent)}
.tk-cup summary{list-style:none;cursor:pointer;display:grid;gap:4px;padding:14px;text-align:center;justify-items:center}
.tk-cup summary::-webkit-details-marker{display:none}
.tk-cup summary img{width:100%;max-width:340px;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:12px} /* le billet entier, jamais rogné */
.tk-cup-ico{font-size:54px;line-height:1.2}
.tk-cup summary b{font-size:18px;color:var(--dc)}.tk-cup summary small{color:var(--muted)}
.tk-cup summary em{font-style:normal;font-weight:600;display:grid}.tk-cup summary em small{font-weight:400}
.tk-qty{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:flex-end;padding:4px 14px 18px}
.tk-qty button{display:grid;gap:2px}.tk-qty button small{font-weight:400;opacity:.85}
.tk-other{display:flex;gap:8px;align-items:flex-end}.tk-other input{width:9em}

/* Aperçu du compte : jetons des services connectés */
.cx-row{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 14px}
.cx{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent-deep,#2a1840);border:1px solid var(--line);font-size:13px}
.cx img{border-radius:50%;display:block}
.cx i{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;background:#2fb46a;color:#fff;font-size:10px;font-style:normal;display:grid;place-items:center}
.cx-riot{background:#7a1c22}.cx-discord{background:#3a45a8}.cx-twitch{background:#5c2e9e}.cx-google{background:#3b3b3b}.cx-facebook{background:#1f4fa3}.cx-instagram{background:#a02c6c}.cx-linkedin{background:#235a86}.cx-2fa{background:#1e6a47}

/* Vote de la plage horaire : trois gros boutons */
.slot-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:10px 0}
.slot-pick button{display:grid;gap:2px;padding:14px 10px;font-size:16px}.slot-pick small{font-weight:400;opacity:.85}

/* Logos de Cup et filtre par poste de la sélection des champions */
.cup-logo{width:44px;height:44px;object-fit:contain;display:block}
.tk-cup-ico .cup-logo{width:110px;height:110px;margin:auto}
.dr-pos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}

/* Liste « Tes liens » : le titre garde sa place, et « Modifier le lien » s'ouvre sur sa propre ligne, sous le lien */
.link-editable{flex-wrap:wrap}
.link-editable .link-txt{flex:1 1 180px}
.link-editable .link-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-editable .link-txt small.warn{white-space:normal}
.link-editable .link-edit{order:10;flex:0 0 100%;min-width:0;padding-left:32px}
.link-editable .link-edit .add-link{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:8px}
.link-editable .link-edit .add-link label{min-width:0}
.link-editable .link-edit .add-link input{width:100%;min-width:0}
@media (max-width:720px){.link-editable .link-edit .add-link{grid-template-columns:1fr}.link-editable .link-edit{padding-left:0}}

/* Administration : barre d'accès rapide et zone de remise à neuf */
.adm-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;position:sticky;top:0;z-index:3;padding:10px 0;background:var(--bg,#070708)}
.danger-zone{border:1px solid #7a2630}.danger-zone h3{color:#ff6b74;margin-top:0}
.btn-danger{background:#8f1f2b;border-color:#c23645;color:#fff}

.cx-snapchat{background:#8a7a00}

/* Boutons de partage (page d'équipe) */
.share-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0}
.share-row .btn{padding:6px 12px;font-size:13px}

/* Fenêtre d'acceptation des documents (confidentialité, conditions) */
.legal-gate{background:#050506}
.legal-modal{position:fixed;inset:0;margin:auto;width:min(920px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:12px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--panel-bg,#111114);color:inherit;box-shadow:0 0 0 100vmax rgba(0,0,0,.72)}
.legal-modal header h1{margin:4px 0 6px;font-size:24px}
.legal-scroll{flex:1;min-height:180px;overflow:auto;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);line-height:1.6}
.legal-scroll h2{font-size:18px;margin:18px 0 8px}.legal-scroll h3{font-size:15px;margin:14px 0 6px}
.legal-modal footer{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.legal-modal footer form{display:grid;gap:8px}

/* Logo (mascotte), image d'accueil, panneau « tu es admin » */
.logo-img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: none; }
.logo { white-space: nowrap; flex: none; }
.nav .logo { font-size: 21px; }
@media (max-width: 420px) { .nav .logo { font-size: 17px; } }
.hero-img { max-width: 1160px; margin: 0 auto 40px; padding: 0 16px; }
.hero-img img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--line); }
.admin-free { display: flex; align-items: center; gap: 22px; }
.admin-free h3 { margin: 0 0 6px; }
.admin-free p { margin: 0; color: var(--muted); }
.admin-free-ico { position: relative; flex: none; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 22px; background: var(--accent-deep); color: var(--accent); }
.admin-free-ico i { position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #c0392b; color: #fff; font-style: normal; font-weight: 700; font-size: 18px; }

/* Zone du bouton « S'INSCRIRE ICI » dessiné dans l'image d'accueil (en haut à gauche) : elle s'illumine au survol. */
.hero-img a { position: relative; display: block; }
.hero-hot { position: absolute; left: 6.6%; top: 6.6%; width: 41.6%; height: 16.6%; border-radius: 999px; transition: box-shadow .2s, background .2s; }
.hero-img a:hover .hero-hot { box-shadow: 0 0 0 3px #fff, 0 0 34px 10px rgba(190,110,255,.9); background: rgba(255,255,255,.08); }
.hero-img a:hover img { border-color: var(--accent); }

/* Accueil : le titre luit, et le bouton dessiné dans l'image pulse en permanence pour inviter à s'inscrire. */
.hero h1 { animation: hero-title 3.2s ease-in-out infinite; }
@keyframes hero-title { 0%, 100% { text-shadow: 0 0 18px rgba(181,101,216,.55), 0 0 44px rgba(181,101,216,.3); } 50% { text-shadow: 0 0 26px rgba(255,120,220,.9), 0 0 70px rgba(150,110,255,.6); } }
.hero-hot { left: 5.2%; top: 4.6%; width: 44.4%; height: 20.4%; animation: hero-pulse 2.4s ease-in-out infinite; }
@keyframes hero-pulse {
  0%, 100% { box-shadow: 0 0 28px 10px rgba(170,90,255,.55), 0 0 70px 26px rgba(170,90,255,.25); }
  33% { box-shadow: 0 0 46px 20px rgba(255,90,210,.8), 0 0 110px 46px rgba(255,90,210,.35); }
  66% { box-shadow: 0 0 46px 20px rgba(90,200,255,.75), 0 0 110px 46px rgba(90,200,255,.3); }
}
.hero-img a:hover .hero-hot { animation-duration: .9s; background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px #fff, 0 0 60px 26px rgba(255,255,255,.55); }
@media (prefers-reduced-motion: reduce) { .hero h1, .hero-hot { animation: none; } .hero-hot { box-shadow: 0 0 40px 16px rgba(170,90,255,.6); } }

/* Administration en tuiles */
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 0 0 24px; }
.adm-tiles[hidden], .adm-group[hidden] { display: none; }
.adm-tile { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; min-height: 150px; border-radius: 18px; background: #151416; border: 1px solid var(--line); transition: border-color .15s, transform .15s, box-shadow .15s; }
.adm-tile svg { color: var(--accent); }
.adm-tile b { font-size: 18px; font-weight: 500; }
.adm-tile small { color: var(--muted); line-height: 1.35; }
.adm-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 0 26px rgba(181,101,216,.25); }
.adm-group-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 3; padding: 10px 0; margin-bottom: 8px; background: var(--bg, #070708); }
.adm-group-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; }

/* Profil banni : bannière « BANNI » et X rouge sur l'avatar */
.pf-banner-ban { display: grid; place-items: center; mask-image: none; background: repeating-linear-gradient(-45deg, #5a0d0d 0 26px, #1a0606 26px 52px); border-bottom: 3px solid #d0342c; }
.pf-banner-ban span { font-size: clamp(54px, 11vw, 120px); font-weight: 800; letter-spacing: .18em; color: #ff4d42; text-shadow: 0 0 30px rgba(255,60,50,.8), 0 4px 0 #000; transform: rotate(-4deg); }
.pf-avatar.is-banned .avatar { filter: grayscale(1) brightness(.6); box-shadow: 0 0 0 3px #d0342c, 0 0 34px rgba(208,52,44,.55); }
.pf-avatar.is-banned::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(45deg, transparent 44%, #ff3b30 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #ff3b30 44% 56%, transparent 56%); }

/* Compte banni : textes au passé, liens désactivés, palmarès */
.pf-banner-ban.has-art { background-size: cover; background-position: center; border-bottom: 0; mask-image: linear-gradient(#000 60%, transparent); }
.pf-was { cursor: default; opacity: .85; border-color: rgba(208,52,44,.5); }
.pf-was em { font-style: normal; }
.pf-ban-note { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 14px; border-radius: 12px; color: #ff6b61; background: rgba(208,52,44,.12); border: 1px solid rgba(208,52,44,.4); }
.pf-btn.pf-dead { cursor: not-allowed; opacity: .55; }
.pf-btn.pf-dead > span { text-decoration: line-through; }
.pf-x { font-style: normal; font-weight: 700; color: #ff3b30; }
.pf-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-ban-record { margin: 0; color: var(--pf-muted, #aaa); }

.pf-icon-dead { position: relative; cursor: not-allowed; opacity: .6; }
.pf-icon-dead:hover { color: var(--pf-icon, #fff); background: none; transform: none; }
.pf-icon-dead::after { content: ''; position: absolute; inset: 6px; pointer-events: none; background: linear-gradient(45deg, transparent 45%, #ff3b30 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #ff3b30 45% 55%, transparent 55%); }
.tm-card.tm-banned { opacity: .45; filter: grayscale(1); text-decoration: line-through; }

/* Accueil : les modes de League of Legends */
.modes { margin-top: 22px; }
.mode-card { text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
.mode-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 0 28px rgba(181,101,216,.25); }
.mode-card svg:first-child { color: var(--accent); }
.mode-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--accent); font-weight: 500; }

.coach-range[hidden] { display: none; }
.tm-contact { color: var(--accent); font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.tm-contact:hover { text-decoration: underline; }

/* Tarifs : trois forfaits */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; align-items: start; text-align: left; margin-top: 22px; }
.prices .price { max-width: none; margin: 0; }
.price-hot { border-color: var(--accent); box-shadow: 0 0 34px rgba(181,101,216,.25); }
.price-art { display: block; width: 100%; height: auto; border-radius: 12px; margin-bottom: 14px; }
.price-note { color: var(--muted); font-size: 14px; margin: 6px 0; }
.price-lines { margin: 8px 0 14px; padding: 10px 12px; border-radius: 12px; background: #151416; border: 1px solid var(--line); }
.price-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.price-lines b { font-weight: 500; }
.price-tax { color: var(--muted); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px !important; }
/* Bloc de statistiques réservé au Premium */
.pf-locked { text-align: center; }
.pf-locked p { margin: 14px 0; opacity: .5; }

.dash-main [hidden] { display: none !important; }
.page-tiles { margin-top: 18px; }

/* Bandeau des témoins */
.ck-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 12px 18px; background: #1b1022; border-bottom: 2px solid var(--accent); font-size: 15px; }
.ck-bar a { color: var(--accent); text-decoration: underline; }
.ck-btns { display: inline-flex; gap: 8px; }
.ck-shake { animation: ck-shake .45s; }
@keyframes ck-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
/* Étapes en deux groupes, photos des comptes connectés, cadeau, menu du visiteur */
.step-group + .step-group { margin-top: 18px; }
.step-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; font-weight: 500; }
.step-group h4 svg { color: var(--accent); }
.step-group h4 small { color: var(--muted); font-weight: 400; }
.cx-photo { border-radius: 50%; object-fit: cover; }
.gift { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.gift label { display: grid; gap: 6px; }
.gift small { color: var(--muted); }
.dash-side [hidden] { display: none !important; }

.aram-teamforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 12px 0 28px; }

/* Certification : bloc fermé par défaut, et invitation au Premium */
.cert-premium { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-color: var(--accent); }
.cert-premium h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.cert-open > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-size: 17px; }
.cert-open > summary::-webkit-details-marker { display: none; }
.cert-open > summary span { color: var(--muted); margin-left: auto; }
.cert-open[open] > summary { margin-bottom: 16px; }

/* Bannière animée, miniatures des vidéos de match */
.pf-banner { position: relative; overflow: hidden; }
.pf-banner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.cup-replays .cup-vod { display: flex; align-items: flex-start; gap: 8px; }
.cup-replays .cup-vod a { display: grid; grid-template-columns: 160px 1fr; column-gap: 12px; align-items: center; flex: 1; }
.cup-replays .cup-vod a .vod-thumb { grid-row: span 2; border-radius: 8px; width: 160px; height: 90px; object-fit: cover; }
.cup-replays .cup-vod a small { align-self: start; }
@media (max-width: 520px) { .cup-replays .cup-vod a { grid-template-columns: 1fr; } }

/* Dépôt d'une vidéo, page des rediffusions */
.yt-up { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.yt-up progress { width: 100%; height: 10px; }
.vod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 12px 0 28px; }
.vod-card { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: #151416; border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.vod-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.vod-card img { width: 100%; height: auto; border-radius: 10px; }
.vod-card small { color: var(--muted); }

.price-poster { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; margin-bottom: 14px; }
.price h3 small { color: var(--muted); font-weight: 400; font-size: 14px; }

/* Fiche dynamique */
.pf-dyn-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pf-dyn-veil { position: fixed; inset: 0; z-index: 0; background: linear-gradient(rgba(5,5,8,.35), rgba(5,5,8,.7)); }
body.pf:has(.pf-dyn-video) .pf-page { position: relative; z-index: 1; }
.pf-dyn-gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(4,4,6,.86); backdrop-filter: blur(14px); }
.pf-dyn-gate button { display: grid; gap: 10px; padding: 26px 44px; border-radius: 22px; border: 1px solid var(--accent); background: rgba(20,16,24,.7); color: #fff; cursor: pointer; font: inherit; animation: hero-pulse 2.4s ease-in-out infinite; }
.pf-dyn-gate b { font-size: clamp(26px, 6vw, 44px); font-weight: 600; }
.pf-dyn-gate span { color: var(--accent); letter-spacing: .12em; text-transform: uppercase; font-size: 14px; }
.pf-dyn-ctl { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: rgba(15,13,18,.8); border: 1px solid var(--pf-line, #333); backdrop-filter: blur(8px); font-size: 13px; }
.pf-dyn-ctl[hidden] { display: none; }
.pf-dyn-ctl button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
.pf-dyn-ctl.muted button { opacity: .45; text-decoration: line-through; }
.pf-dyn-ctl input { width: 90px; }
.pf-dyn-ctl a { color: var(--accent); }
.pf-notice { max-width: 900px; margin: 12px auto; position: relative; z-index: 2; }
.pf-bar form { display: inline; }
.pf-gift { cursor: pointer; font: inherit; color: inherit; border-color: var(--accent); }

/* Titres jamais cachés sous une barre collante ; sur téléphone, la table des matières ne colle plus en haut */
.dash-main h2, .dash-main [id] { scroll-margin-top: 90px; }
@media (max-width: 820px) { .toc { position: static; } .adm-group-head { position: static; } }
/* Délier un compte : sur ordinateur seulement */
@media (max-width: 820px), (pointer: coarse) { .pc-only { display: none !important; } }
.soc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1c1b1f; flex: none; }

/* Notifications : toute la ligne s'ouvre, lue ou non lue, suppression */
.notif-acts { margin-bottom: 12px; }
.notif .notif-body { flex: 1; min-width: 0; display: block; color: inherit; }
.notif .notif-body:hover b { color: var(--accent); }
.notif.read { opacity: .6; }
.notif.read .notif-dot { visibility: hidden; }

/* ---------- Fiche dynamique : le mur ---------- */
.dyn-stage { position: relative; z-index: 1; width: min(1500px, 100%); margin: 0 auto; }
.dyn-item { position: absolute; min-width: 60px; }
.dyn-item > .pf-panel, .dyn-item > section { margin: 0; }
.dyn-id { display: flex; align-items: center; gap: 18px; }
.dyn-id h1 { margin: 0; font-size: calc(var(--u, 12px) * 2.6); line-height: 1.1; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.dyn-accounts { display: flex; flex-wrap: wrap; gap: 8px; }
.dyn-text { font-size: calc(var(--u, 12px) * var(--s, 3)); font-weight: 600; line-height: 1.15; white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 0 2px 16px rgba(0,0,0,.8); }
.dyn-eq { display: flex; align-items: flex-end; gap: 3px; height: calc(var(--u, 12px) * 8); }
.dyn-eq i { flex: 1; height: 10%; border-radius: 4px 4px 0 0; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); transition: height .08s linear; }
@media (max-width: 760px) {
  .dyn-stage.stacked { padding: 0 12px 40px !important; display: grid; gap: 14px; }
  .dyn-stage.stacked .dyn-item { position: static; width: auto !important; }
  .dyn-stage.stacked .dyn-id h1 { font-size: 28px; } .dyn-stage.stacked .dyn-text { font-size: clamp(18px, calc(4px * var(--s, 3) + 10px), 44px); } .dyn-stage.stacked .dyn-eq { height: 70px; }
}
/* Effets. --beat (0 à 1) est mis à jour par la musique. */
.fx-flotte { animation: fx-flotte 5s ease-in-out infinite; }
@keyframes fx-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.fx-lueur { filter: drop-shadow(0 0 calc(10px + 26px * var(--beat, .35)) var(--accent)); }
.fx-rythme { transform: scale(calc(1 + .09 * var(--beat, 0))); transition: transform .06s linear; }
.fx-tremble { animation: fx-tremble .5s linear infinite; }
@keyframes fx-tremble { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-.5deg); } 75% { transform: translate(2px, -1px) rotate(.5deg); } }
.fx-bascule { animation: fx-bascule 6s ease-in-out infinite; }
@keyframes fx-bascule { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.fx-arc-en-ciel { animation: fx-arc 6s linear infinite; }
@keyframes fx-arc { to { filter: hue-rotate(360deg); } }
.fx-apparition { animation: fx-apparition 1.4s ease-out both; }
@keyframes fx-apparition { from { opacity: 0; transform: scale(.85); filter: blur(8px); } }
.fx-glisse { animation: fx-glisse 1.1s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes fx-glisse { from { opacity: 0; transform: translateX(-80px); } }
@media (prefers-reduced-motion: reduce) { .dyn-item { animation: none !important; transform: none !important; } }
/* Éditeur */
.dyn-stage.editing { outline: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: calc(var(--u, 12px) * 5) calc(var(--u, 12px) * 5); min-height: 80vh; margin-top: 150px; }
.dyn-stage.editing .dyn-item { cursor: grab; touch-action: none; user-select: none; outline: 1px dashed rgba(255,255,255,.25); animation: none; }
.dyn-stage.editing .dyn-item.sel { outline: 2px solid var(--accent); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 50%, transparent); }
.dyn-tools { position: fixed; top: 0; left: 0; right: 0; z-index: 45; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: rgba(12,10,14,.94); border-bottom: 2px solid var(--accent); backdrop-filter: blur(10px); font-size: 13px; }
.dyn-tools b { font-size: 16px; align-self: center; }
.dyn-tools label { display: grid; gap: 3px; color: var(--muted, #aaa); }
.dyn-tools select, .dyn-tools input:not([type=range]):not([type=color]) { padding: 6px 8px; border-radius: 8px; border: 1px solid #333; background: #17151a; color: #fff; font: inherit; }
.dyn-tools [data-text-tools] { display: inline-flex; gap: 12px; align-items: flex-end; }
.dyn-tools [data-text-tools][hidden] { display: none; }
.dyn-tools small { flex-basis: 100%; color: var(--accent); }

/* ---------- Le mur, version 2 : cadre réglable, boîtes ajustables, images, liens ---------- */
.pf-page.pf-dyn { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
.pf-page.pf-dyn > .pf-foot, .pf-page.pf-dyn > .pf-notice { max-width: 900px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.dyn-stage.fixed { padding-bottom: 0 !important; }
.dyn-stage.fixed.locked { overflow: hidden; }
.dyn-item { z-index: 1; }
.dyn-in { width: 100%; }
.dyn-item:not([data-h="0"]):not([data-h=""]) { overflow: hidden; }
.dyn-item:not([data-h="0"]):not([data-h=""]) > .dyn-in { height: 100%; }
.dyn-img { display: block; width: 100%; height: auto; border-radius: 12px; }
.dyn-item:not([data-h="0"]):not([data-h=""]) .dyn-img { height: 100%; object-fit: cover; }
.dyn-link { display: inline-block; padding: .45em 1em; border-radius: 999px; border: 1px solid currentColor; background: rgba(15,13,18,.55); backdrop-filter: blur(6px); font-size: calc(var(--u, 12px) * var(--s, 2)); font-weight: 600; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.dyn-link:hover { transform: translateY(-2px); box-shadow: 0 0 22px currentColor; }
.dyn-name { margin: 0; font-size: calc(var(--u, 12px) * 3); line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.dyn-handle { margin: 0; }
.pf-dyn-video.in-stage { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.dyn-grip { display: none; }
.dyn-stage.editing .dyn-grip { display: block; position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; border-radius: 4px; background: var(--accent); border: 2px solid #fff; cursor: nwse-resize; z-index: 3; touch-action: none; }
.dyn-stage.editing { margin-top: 230px; }
.dyn-stage.editing.fixed { min-height: 0; }
.dyn-tools { flex-direction: column; align-items: stretch; gap: 8px; max-height: 60vh; overflow-y: auto; }
.dyn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.dyn-row form { display: inline; }
.dyn-sel { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; padding-left: 12px; border-left: 2px solid var(--accent); }
.dyn-sel[hidden] { display: none; }
.dyn-check { display: inline-flex !important; align-items: center; gap: 6px; }
.dyn-file { cursor: pointer; }
@media (max-width: 760px) { .dyn-stage.stacked.fixed { aspect-ratio: auto !important; } .dyn-stage.stacked .dyn-item { height: auto !important; } .dyn-stage.stacked .pf-dyn-video.in-stage { position: fixed; } }

/* Mur : poignées sur les quatre côtés, ligne du bas d'écran, consigne sous l'entrée */
.dyn-stage.editing .dyn-grip-se { right: -7px; bottom: -7px; width: 16px; height: 16px; cursor: nwse-resize; }
.dyn-stage.editing .dyn-grip-n, .dyn-stage.editing .dyn-grip-s { left: calc(50% - 16px); right: auto; width: 32px; height: 10px; border-radius: 6px; cursor: ns-resize; }
.dyn-stage.editing .dyn-grip-n { top: -6px; bottom: auto; } .dyn-stage.editing .dyn-grip-s { bottom: -6px; }
.dyn-stage.editing .dyn-grip-e, .dyn-stage.editing .dyn-grip-w { top: calc(50% - 16px); bottom: auto; width: 10px; height: 32px; border-radius: 6px; cursor: ew-resize; }
.dyn-stage.editing .dyn-grip-e { right: -6px; } .dyn-stage.editing .dyn-grip-w { left: -6px; right: auto; }
.dyn-stage.editing .dyn-item:not(.sel) .dyn-grip { display: none; }
.dyn-item:not([data-iw="0"]):not([data-iw=""]) { overflow: hidden; }
.dyn-fold { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed #ffcc4d; pointer-events: none; z-index: 2; }
.dyn-fold span { position: absolute; right: 8px; top: 4px; font-size: 12px; color: #ffcc4d; background: rgba(0,0,0,.6); padding: 2px 8px; border-radius: 6px; }
.pf-dyn-gate { align-content: center; gap: 18px; }
.pf-dyn-hint { margin: 0; text-align: center; color: #ddd; font-size: 15px; letter-spacing: .04em; }

/* Les poignées sont à l'intérieur de la boîte, pour rester visibles quand elle coupe son contenu. */
.dyn-stage.editing .dyn-grip-se { right: 0; bottom: 0; }
.dyn-stage.editing .dyn-grip-n { top: 0; } .dyn-stage.editing .dyn-grip-s { bottom: 0; }
.dyn-stage.editing .dyn-grip-e { right: 0; } .dyn-stage.editing .dyn-grip-w { left: 0; }
.dyn-stage.editing .dyn-grip { opacity: .9; }

/* Un mur de format fixe tient toujours en entier dans l'écran : sa largeur est limitée par la hauteur de la fenêtre. */
.dyn-stage.fixed { max-width: calc((100vh - 8px) * var(--r, 1.7778)); max-width: calc((100dvh - 8px) * var(--r, 1.7778)); }
.dyn-stage.fixed.editing { max-width: calc((100dvh - 250px) * var(--r, 1.7778)); }
body.pf:has(.dyn-stage) { overflow-x: hidden; }
.dyn-icon .pf-icon { width: 100%; height: auto; aspect-ratio: 1; }
.dyn-icon .pf-icon svg { width: 70%; height: 70%; }

/* Bouton « Fermer » de la fiche dynamique : toujours là, au même endroit, à la même taille, quoi que le membre ait mis sur son mur. */
.pf-dyn-close { position: fixed; top: 14px; right: 14px; z-index: 55; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(12,10,14,.85); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 15px; font-weight: 600; backdrop-filter: blur(8px); text-decoration: none; }
.pf-dyn-close:hover { border-color: var(--accent); color: var(--accent); }
/* Liste des joueurs */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 18px; }
.pl-card { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: #151416; border: 1px solid var(--line); border-left: 3px solid var(--pc); }
.pl-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-who span { display: grid; min-width: 0; } .pl-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-who small { color: var(--muted); }

/* Mur mis à l'échelle d'un seul bloc : le cadre prend la place disponible, le mur est centré dedans. */
.dyn-wrap { margin: 0 auto; position: relative; z-index: 1; }
.dyn-wrap .dyn-stage { margin: 0 auto; max-width: none !important; }
.dyn-wrap.editing { margin-top: 230px; }
.dyn-stage.editing { margin-top: 0; }
/* Boîte sans fond : le contenu seul, sans panneau ni bordure. */
.dyn-item[data-bg="0"] .pf-panel, .dyn-item[data-bg="0"] .pf-rank, .dyn-item[data-bg="0"] .rk, .dyn-item[data-bg="0"] section, .dyn-item[data-bg="0"] .pf-btn, .dyn-item[data-bg="0"] .dyn-link, .dyn-item[data-bg="0"] .pf-riot, .dyn-item[data-bg="0"] .pf-chips > * { background: none !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
@media (max-width: 760px) { .dyn-wrap { width: 100% !important; margin-top: 0; } }

/* Fiche dynamique de format fixe : plein écran, centrée, sans aucun défilement. Les mentions restent sur la fiche habituelle. */
body.dyn-noscroll { overflow: hidden; }
body.dyn-noscroll .dyn-wrap { position: fixed; inset: 0; width: 100% !important; display: grid; place-items: center; margin: 0; }
body.dyn-noscroll .pf-foot { display: none; }

/* ---------- Éditeur du mur : menu à gauche, menu du clic droit, boîtes de couleur ---------- */
.dyn-tools.dyn-side { position: fixed; top: 0; left: 0; bottom: 0; right: auto; width: 320px; max-height: none; z-index: 45; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 14px 24px; overflow-y: auto; background: rgba(12,10,14,.96); border: 0; border-right: 2px solid var(--accent); font-size: 13px; }
.dyn-side h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.dyn-side details { border: 1px solid #2a2730; border-radius: 12px; padding: 10px 12px; background: #131116; }
.dyn-side details[hidden] { display: none; }
.dyn-side summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.dyn-side summary::-webkit-details-marker { display: none; }
.dyn-side details[open] > summary { margin-bottom: 10px; color: var(--accent); }
.dyn-side label { display: grid; gap: 4px; margin: 8px 0; color: var(--muted, #aaa); }
.dyn-side select, .dyn-side input:not([type=range]):not([type=color]):not([type=checkbox]) { width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid #333; background: #1b181f; color: #fff; font: inherit; }
.dyn-side input[type=range] { width: 100%; } .dyn-side input[type=color] { width: 100%; height: 32px; padding: 0; border: 1px solid #333; border-radius: 8px; background: none; }
.dyn-btns { display: flex; flex-wrap: wrap; gap: 6px; } .dyn-btns .btn { padding: 7px 11px; font-size: 13px; }
.dyn-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dyn-side [data-text-tools], .dyn-side [data-bg-tools] { display: block; } .dyn-side [hidden] { display: none !important; }
.dyn-side small[data-msg] { color: var(--accent); line-height: 1.4; }
.dyn-wrap.editing { margin-left: 330px; margin-right: 10px; }
.dyn-ctx { position: fixed; z-index: 70; min-width: 220px; max-width: 260px; max-height: 70vh; overflow-y: auto; padding: 6px; border-radius: 12px; background: #1b181f; border: 1px solid var(--accent); box-shadow: 0 12px 40px rgba(0,0,0,.6); display: grid; gap: 2px; }
.dyn-ctx[hidden] { display: none; }
.dyn-ctx button { text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.dyn-ctx button:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.dyn-ctx button.danger { color: #ff6b61; } .dyn-ctx hr { border: 0; border-top: 1px solid #333; margin: 4px 0; }
.dyn-shape { width: 100%; height: 100%; min-height: 20px; }
.dyn-item[data-t="forme"] > .dyn-in { height: 100%; }
.dyn-media-link { display: block; height: 100%; }
video.dyn-img { background: #000; }
/* Boîte au fond choisi (aucun, couleur, dégradé) : les panneaux d'origine deviennent transparents pour le laisser voir. */
.dyn-item:is([data-bgm="aucun"], [data-bgm="couleur"], [data-bgm="degrade"]) :is(.pf-panel, .pf-rank, .rk, section, .pf-btn, .pf-riot, .pf-chips > *) { background: none !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
.dyn-item:is([data-bgm="couleur"], [data-bgm="degrade"]) { overflow: hidden; }

/* Les trois profils du membre, et le profil de base avec sa vidéo de fond */
.pf-profiles { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.pf-profiles > span:first-child { color: var(--pf-muted, #aaa); }
.pf-prof { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--pf-line, #333); background: rgba(15,13,18,.5); }
.pf-prof a { display: inline-flex; align-items: center; gap: 6px; } .pf-prof a:hover { color: var(--accent); }
.pf-prof.on { border-color: var(--accent); }
.pf-dyn-veil-base { background: linear-gradient(rgba(5,5,8,.55), rgba(5,5,8,.82)); }
body.pf:has(.pf-dyn-veil-base) .pf-page, body.pf:has([data-dyn-auto]) .pf-page { position: relative; z-index: 1; }
.pf-dyn-ctl a + a { margin-left: 10px; }

/* Menu de l'éditeur : une seule colonne collée au bord gauche (jamais de retour à la ligne en colonnes), actions principales en bas. */
.dyn-tools.dyn-side { flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; overflow-x: hidden; padding-bottom: 0; box-sizing: border-box; }
.dyn-tools.dyn-side > * { flex: none; min-width: 0; max-width: 100%; }
.dyn-side small[data-msg] { flex-basis: auto; }
.dyn-side-foot { position: sticky; bottom: 0; margin: auto -14px 0; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; background: #0c0a0e; border-top: 1px solid var(--accent); z-index: 2; }
.dyn-side-foot .btn { flex: 1 1 auto; justify-content: center; padding: 9px 10px; font-size: 13px; }
.dyn-side-foot .btn-accent { flex-basis: 100%; }
.dyn-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dyn-seg a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 10px; border: 1px solid #333; font-size: 13px; }
.dyn-seg a.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.dyn-hint { margin: 0 0 8px; color: var(--muted, #aaa); line-height: 1.4; }

/* Deux murs par profil : ordinateur et téléphone. Celui de téléphone ne s'affiche que sur petit écran (ou seul s'il n'y a que lui). */
.dyn-wrap[data-device="mobile"]:not(.editing):not(.solo) { display: none; }
@media (max-width: 760px) {
  .dyn-wrap[data-device="mobile"]:not(.editing) { display: block; width: 100% !important; }
  .dyn-wrap[data-device="desktop"].has-mobile { display: none; }
  body.dyn-noscroll .dyn-wrap[data-device="mobile"] { position: fixed; inset: 0; display: grid; place-items: center; }
}
.dyn-wrap.editing[data-device="mobile"] .dyn-stage { box-shadow: 0 0 0 10px #17151a, 0 0 0 12px #333; border-radius: 26px; }
/* Ligne du temps */
.dyn-item { transition: opacity .35s ease; }
.dyn-item.t-off { opacity: 0; pointer-events: none; }
.dyn-stage.editing .dyn-item.t-off { opacity: .12; pointer-events: auto; }
.dyn-timeline { display: grid; gap: 4px; margin-top: 8px; color: var(--muted, #aaa); }
.dyn-tl-row { display: grid; gap: 3px; text-align: left; padding: 6px 8px; border: 1px solid #2a2730; border-radius: 8px; background: #17151a; color: #ddd; font: inherit; font-size: 12px; cursor: pointer; }
.dyn-tl-row:hover { border-color: var(--accent); }
.dyn-tl-row i { display: block; height: 5px; border-radius: 3px; background: var(--accent); }
/* Mur : cadre fixe (16:9 ordinateur, 9:16 téléphone). Les vues et le code QR sont dans le cadre, en bas ; l'éditeur affiche la taille. */
.dyn-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(var(--u, 12px) * .5) calc(var(--u, 12px) * 1.2); font-size: calc(var(--u, 12px) * 1.05); color: #fff; text-shadow: 0 1px 4px #000; border-top: 1px dashed rgba(255,255,255,.28); background: linear-gradient(transparent, rgba(0,0,0,.45)); pointer-events: none; }
.dyn-foot span { display: inline-flex; align-items: center; gap: .4em; } .dyn-foot svg { width: 1em; height: 1em; }
.dyn-foot a { pointer-events: auto; color: inherit; } .dyn-foot a:hover { color: var(--accent); }
.dyn-stage[data-device="mobile"] .dyn-foot { font-size: calc(var(--u, 4.8px) * 2.9); padding: calc(var(--u, 4.8px) * 1.6) calc(var(--u, 4.8px) * 3); }
.dyn-stage.stacked .dyn-foot { position: static; font-size: 14px; padding: 10px 4px; background: none; }
.dyn-size { position: absolute; left: calc(var(--u, 12px) * .6); top: calc(var(--u, 12px) * .5); z-index: 4; padding: .2em .7em; border-radius: 999px; font-size: calc(var(--u, 12px) * .85); color: #ffcc4d; background: rgba(0,0,0,.65); border: 1px dashed #ffcc4d; pointer-events: none; }
.dyn-stage[data-device="mobile"] .dyn-size { font-size: calc(var(--u, 4.8px) * 2.6); }
.dyn-stage.editing { outline-width: 2px; }
/* Tarifs : images de même format, prix normal biffé, macaron « rabais » qui clignote, invitation d'un ami. */
.price-n span { white-space: nowrap; display: inline-block; }
.price-n { line-height: 1.15; }
.price-poster.price-fit { object-fit: contain; background: #0d0c0f; }
.price-poster.price-empty { background: linear-gradient(160deg, #1b1622, #0d0c0f); }
.price-hot { position: relative; }
.price-was { display: flex; align-items: baseline; gap: 10px; color: var(--muted); margin-bottom: -10px; }
.price-was s { position: relative; font-size: 26px; text-decoration: none; }
.price-was s::after { content: ''; position: absolute; left: -4%; top: 52%; height: 3px; width: 108%; background: #ff4d6d; border-radius: 2px; transform-origin: left; transform: rotate(-7deg) scaleX(0); animation: price-strike 3.2s ease-out infinite; box-shadow: 0 0 10px #ff4d6d; }
.price-was em { font-style: normal; font-size: 13px; }
@keyframes price-strike { 0% { transform: rotate(-7deg) scaleX(0); } 18%, 100% { transform: rotate(-7deg) scaleX(1); } }
.price-now { color: #ffd76a; text-shadow: 0 0 18px rgba(255,215,106,.45); animation: price-glow 1.6s ease-in-out infinite; }
.price-now span { text-shadow: none; }
@keyframes price-glow { 0%, 100% { text-shadow: 0 0 10px rgba(255,215,106,.3); } 50% { text-shadow: 0 0 30px rgba(255,215,106,.9), 0 0 60px rgba(181,101,216,.6); } }
.price-burst { position: absolute; top: -26px; right: -18px; width: 132px; height: 132px; z-index: 3; pointer-events: none; object-fit: contain; animation: price-wow 1.4s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255,215,106,.8)); }
.price-burst-txt { display: grid; place-content: center; text-align: center; color: #17101d; background: #ffd76a; clip-path: polygon(50% 0, 61% 12%, 77% 6%, 80% 22%, 96% 25%, 90% 40%, 100% 52%, 88% 62%, 93% 78%, 77% 79%, 70% 94%, 56% 86%, 43% 98%, 35% 84%, 19% 88%, 18% 72%, 3% 66%, 12% 52%, 0 40%, 14% 31%, 12% 15%, 28% 16%, 37% 3%); }
.price-burst-txt b { font-size: 26px; line-height: 1; } .price-burst-txt i { font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; }
@keyframes price-wow { 0%, 100% { transform: rotate(10deg) scale(1); filter: drop-shadow(0 0 10px rgba(255,215,106,.7)) brightness(1); } 12% { transform: rotate(4deg) scale(1.18); filter: drop-shadow(0 0 34px #fff) brightness(1.7); } 24% { transform: rotate(14deg) scale(1.02); filter: drop-shadow(0 0 12px rgba(255,215,106,.8)) brightness(1); } 36% { transform: rotate(8deg) scale(1.14); filter: drop-shadow(0 0 28px #ffd76a) brightness(1.5); } 50% { transform: rotate(10deg) scale(1); } }
.price-lines div span { color: var(--muted); font-size: 14px; } .price-lines div b { white-space: nowrap; }
.price-ref b { color: #7dffa8; }
.price-invite { padding: 12px; border: 1px dashed var(--accent); border-radius: 12px; display: grid; gap: 8px; }
.price-invite p { margin: 0; font-size: 14px; } .price-link { display: block; padding: 8px 10px; border-radius: 8px; background: #151416; font-size: 12px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .price-burst, .price-now, .price-was s::after { animation: none; } .price-was s::after { transform: rotate(-7deg) scaleX(1); } .price-burst { transform: rotate(10deg); } }
/* Bannière du profil : l'image part du haut (la tête du champion n'est plus coupée) et se fond vers le bas, derrière le nom. */
.pf-banner:not(.pf-banner-ban) { height: 420px; background-position: center top; mask-image: linear-gradient(#000 30%, rgba(0,0,0,.55) 62%, transparent 100%); -webkit-mask-image: linear-gradient(#000 30%, rgba(0,0,0,.55) 62%, transparent 100%); }
.pf-banner-video { object-position: center top; }
.has-banner .pf-banner:not(.pf-banner-ban) + .pf-id { margin-top: -250px; }
@media (max-width: 760px) { .pf-banner:not(.pf-banner-ban) { height: 300px; } .has-banner .pf-banner:not(.pf-banner-ban) + .pf-id { margin-top: -150px; } }
/* Inviter un ami : rappel en haut de Billets et de Certification, et la page elle-même. */
.invite-call { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 16px; border-radius: 16px; border: 1px dashed var(--accent); background: linear-gradient(100deg, rgba(181,101,216,.18), rgba(255,215,106,.08)); color: inherit; animation: price-glow 2.4s ease-in-out infinite; }
.invite-call:hover { border-style: solid; }
.invite-call span { display: grid; gap: 4px; flex: 1; } .invite-call b { display: flex; align-items: center; gap: 8px; font-size: 17px; color: #ffd76a; } .invite-call em { font-style: normal; color: var(--muted); } .invite-call strong { color: #7dffa8; font-weight: 500; }
.invite-call i { font-style: normal; white-space: nowrap; color: var(--accent); }
.invite-art { display: block; width: 180px; max-width: 34%; border-radius: 12px; flex: none; }
.invite-head { display: flex; gap: 20px; align-items: center; } .invite-head .invite-art { width: 300px; } .invite-head > div { flex: 1; display: grid; gap: 10px; min-width: 0; }
.invite-wins { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.invite-wins > div { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: #131116; }
.invite-wins b { font-size: 30px; font-weight: 500; color: #ffd76a; } .invite-wins span { color: var(--muted); font-size: 14px; } .invite-wins em { font-style: normal; font-size: 13px; } .invite-wins em.ok { color: #7dffa8; }
.chip.ok { color: #7dffa8; border-color: #7dffa8; }
a.price-invite { color: inherit; } a.price-invite span { font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .invite-call, .invite-head { flex-direction: column; align-items: stretch; } .invite-art, .invite-head .invite-art { width: 100%; max-width: none; } }
/* Avatar en vidéo (MP4 ou WebM) : même rond que l'image. */
video.avatar { background: #17161a; }
.drop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop.drop-avatar video { inset: 15px auto auto 50%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; }
.drop video[hidden] { display: none; }
/* Choix de la langue : en haut de chaque page et au-dessus des formulaires de connexion et d'inscription. */
.lang.lang-top { margin: 0 4px; padding: 3px; } .lang.lang-top a { padding: 4px 9px; font-size: 13px; }
.lang.lang-auth { margin: 0 auto 12px; display: flex; width: max-content; }
.modal .btn-lg { align-self: stretch; text-align: center; justify-content: center; }
/* Profil dynamique, vue façon TikTok : colonne de boutons ronds à droite, légende en bas à gauche. */
.tk-rail { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 56; display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px 2px; scrollbar-width: none; }
.tk-rail[hidden] { display: none; }
.tk-rail::-webkit-scrollbar { display: none; }
.tk-av { display: block; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 18px var(--accent); margin-bottom: 4px; }
.tk-btn { display: grid; justify-items: center; gap: 3px; background: none; border: 0; padding: 0; color: #fff; font: inherit; cursor: pointer; text-decoration: none; text-shadow: 0 1px 4px #000; }
.tk-btn i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-style: normal; font-size: 22px; background: rgba(15,13,18,.72); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); transition: transform .15s, border-color .15s, background .15s; }
.tk-btn span { font-size: 11px; font-weight: 600; }
.tk-btn:hover i { transform: scale(1.1); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 35%, rgba(15,13,18,.8)); }
.tk-rail.muted [data-dyn-mute] i { opacity: .45; text-decoration: line-through; }
.tk-vol { width: 46px; accent-color: var(--accent); margin: -4px 0 2px; }
.tk-close i { background: rgba(120,20,30,.75); }
.tk-cap { display: none; position: fixed; left: 16px; bottom: 16px; z-index: 55; max-width: min(46vw, 520px); padding: 10px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(8,7,10,.72), rgba(8,7,10,.25)); color: #fff; text-shadow: 0 1px 4px #000; pointer-events: none; }
body.pf-dyn-on .tk-cap { display: grid; gap: 4px; }
.tk-cap b { font-size: 17px; } .tk-cap p { margin: 0; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tk-cap em { font-style: normal; font-size: 12px; color: var(--accent); } .tk-cap span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: .85; }
@media (max-width: 760px) { .tk-rail { right: 6px; gap: 7px; } .tk-btn i { width: 40px; height: 40px; font-size: 19px; } .tk-av .avatar { width: 44px !important; height: 44px !important; } .tk-vol { display: none; } .tk-cap { left: 8px; bottom: 8px; max-width: calc(100vw - 80px); } }
/* Horaire du lien unique (Personnaliser). */
.sched-row { display: grid; grid-template-columns: 1.4fr auto auto 1.4fr; gap: 10px; align-items: end; margin-bottom: 8px; }
.sched-row label { display: flex; align-items: center; gap: 6px; margin: 0; }
@media (max-width: 760px) { .sched-row { grid-template-columns: 1fr 1fr; } }
/* Liens : une ligne par réseau coché, un seul enregistrement. */
.add-rows { display: grid; gap: 10px; margin: 16px 0 12px; }
.add-rows .add-row { align-items: end; } .add-rows .add-row > .btn { align-self: end; }
/* Éditeur du mur : grille par-dessus la vidéo, et sur téléphone le menu devient une feuille repliable en bas de l'écran. */
.dyn-grid { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(rgba(255,204,77,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,204,77,.5) 1px, transparent 1px); background-size: calc(var(--u, 12px) * 5) calc(var(--u, 12px) * 5), calc(var(--u, 12px) * 5) calc(var(--u, 12px) * 5), 50% 50%, 50% 50%; }
.dyn-grid[hidden] { display: none; }
.dyn-sheet-toggle { display: none; margin-left: auto; padding: 4px 12px; font-size: 13px; }
.add-rows .add-row { margin: 0; }
@media (max-width: 760px) {
  .dyn-tools.dyn-side { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 46dvh; padding: 10px 12px 0; border-top: 2px solid var(--accent); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.6); }
  .dyn-tools.dyn-side.closed { height: auto; overflow: hidden; }
  .dyn-tools.dyn-side.closed > :not(h3):not(.dyn-side-foot) { display: none !important; }
  .dyn-sheet-toggle { display: inline-flex; }
  .dyn-wrap.editing { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
  .dyn-wrap.editing[data-device="mobile"] .dyn-stage { box-shadow: none; border-radius: 0; }
  .dyn-side-foot { gap: 6px; } .dyn-side-foot .btn { padding: 8px 10px; font-size: 13px; }
  .dyn-stage.editing .dyn-grip { width: 22px !important; height: 22px !important; }
}
/* Barre de l'élément choisi : toujours en haut de l'écran pendant l'édition du mur. */
.dyn-selbar { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(12,10,14,.94); border: 1px solid var(--accent); box-shadow: 0 6px 24px rgba(0,0,0,.6); max-width: calc(100vw - 16px); }
.dyn-selbar[hidden] { display: none; }
.dyn-selbar b { font-size: 13px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.dyn-selbar .btn { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
@media (min-width: 761px) { .dyn-selbar { left: calc(50% + 165px); } }
@media (max-width: 760px) { .dyn-selbar b { display: none; } }
/* Mes fichiers : place utilisée et liste des envois. */
.quota-bar { height: 10px; border-radius: 999px; background: #1b181f; overflow: hidden; margin-bottom: 12px; } .quota-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ffd76a); }
.file-thumb { width: 64px; height: 44px; border-radius: 8px; object-fit: cover; background: #17161a; flex: none; display: grid; place-items: center; font-size: 22px; }
/* Éditeur du mur : fichiers déjà envoyés, à poser ou à retirer. */
.dyn-file-row { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 8px; align-items: center; margin: 6px 0; }
.dyn-file-row img, .dyn-file-row video { width: 56px; height: 40px; object-fit: cover; border-radius: 8px; background: #17161a; }
.dyn-file-row span { font-size: 13px; color: var(--muted, #aaa); } .dyn-file-row .btn { padding: 5px 10px; font-size: 13px; } .dyn-file-row form { margin: 0; }
.dyn-side summary small { margin-left: auto; font-weight: 400; color: var(--muted, #aaa); }
/* Personnaliser → Mes profils animés : forfaits, onglets, et blocs numérotés. */
.dynx { display: grid; gap: 16px; }
.dx-plan { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.dx-plan > div { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #131116; font-size: 14px; }
.dx-plan > div.on { border-color: var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent); }
.dx-plan b { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; } .dx-plan span { color: var(--muted); } .dx-plan .quota-bar { margin: 4px 0; }
.dx-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; position: sticky; top: 0; z-index: 5; background: var(--bg, #070708); }
.dx-tabs a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #131116; color: var(--muted); white-space: nowrap; font-size: 14px; flex: none; }
.dx-tabs a:hover { color: var(--text); } .dx-tabs a.on { color: var(--text); border-color: var(--accent); background: var(--accent-deep); }
.dx-dot { width: 7px; height: 7px; border-radius: 50%; background: #7dffa8; }
.dx-pane { display: grid; gap: 14px; } .dx-pane[hidden] { display: none; }
.dx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.dx-head h3 { font-size: 22px; margin: 0 0 4px; } .dx-head p { margin: 0 0 6px; color: var(--muted); } .dx-addr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dx-form { display: grid; gap: 14px; }
.dx-step { border: 1px solid var(--line); border-radius: 16px; background: #100f12; overflow: hidden; }
.dx-step-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #17151a; }
.dx-step-h i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; font-weight: 600; font-size: 14px; flex: none; }
.dx-step-h b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; } .dx-step-h small { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.dx-step-b { display: grid; gap: 12px; padding: 16px; } .dx-step-b p { margin: 0; color: var(--muted); } .dx-step-b .btn-lg { justify-self: start; }
.dx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dx-file { display: grid; gap: 6px; padding: 14px; border-radius: 12px; border: 1px dashed #3a3542; background: #131116; margin: 0; }
.dx-file b { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; } .dx-file small { color: var(--muted); } .dx-file input { max-width: 100%; } .dx-file em { font-style: normal; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.dx-more { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; } .dx-more summary { cursor: pointer; color: var(--muted); font-size: 14px; } .dx-more ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); font-size: 14px; } .dx-more .btn-row { margin-top: 12px; }
.dx-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
@media (max-width: 760px) { .dx-plan, .dx-two { grid-template-columns: 1fr; } .dx-step-h { padding: 10px 12px; } .dx-step-b { padding: 12px; } .dx-step-b .btn-lg, .dx-pane .btn-lg { justify-self: stretch; text-align: center; justify-content: center; } .dx-head h3 { font-size: 19px; } .dx-tabs a { padding: 9px 13px; } }
.dx-pro { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line); background: #131116; font-size: 14px; }
.dx-pro.on { border-color: #ffd76a; background: linear-gradient(100deg, rgba(255,215,106,.1), transparent); } .dx-pro b { display: flex; align-items: center; gap: 6px; color: #ffd76a; font-weight: 500; } .dx-pro code { font-size: 17px; } .dx-pro span { color: var(--muted); }
.steps-list { margin: 4px 0; padding-left: 22px; display: grid; gap: 8px; color: var(--muted); } .steps-list code { color: var(--text); }
/* Page Démonstration. */
.demo-cards { max-width: 820px; margin-left: auto; margin-right: auto; } .demo-card { color: inherit; align-items: flex-start; } .demo-card p { color: var(--muted); margin: 0; }
.demo-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 30px; } .demo-ico.ok { background: rgba(125,255,168,.14); color: #7dffa8; } .demo-ico.bad { background: rgba(208,52,44,.18); color: #ff6257; }
.range-custom { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px; } .range-custom label { display: grid; gap: 4px; margin: 0; font-size: 13px; color: var(--muted); }
/* Page d'équipe : fond choisi par le capitaine (image ou vidéo), sous un voile sombre pour garder le texte lisible. */
.team-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; background-size: cover; background-position: center; }
.team-bg-veil { position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(7,7,8,.72), rgba(7,7,8,.9)); }
body:has(.team-bg) { background: transparent; } html:has(.team-bg) { background: #070708; }
.drop.drop-background video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Image du haut d'une page de liste (Les joueurs). */
.page-art { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 18px; margin-bottom: 18px; }
/* Domaines personnels (Comptes liés). */
.dom-list { display: grid; gap: 10px; }
.dom-row { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #131116; }
.dom-row.on { border-color: #7dffa8; } .dom-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dom-main b { font-weight: 500; min-width: 190px; } .dom-main code { font-size: 15px; overflow-wrap: anywhere; } .dom-main .btn { margin-left: auto; padding: 5px 10px; font-size: 13px; }
.dom-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .dom-state em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
.dom-form { display: flex; gap: 8px; } .dom-form input { flex: 1; min-width: 0; } .dom-row form { margin: 0; }
.dom-warn { border-color: #ffcc4d; } .dom-warn b { color: #ffcc4d; }
@media (max-width: 760px) { .dom-main b { min-width: 0; flex-basis: 100%; } .dom-main .btn { margin-left: 0; } .dom-form { flex-direction: column; } }
/* Mur : transitions d'entrée et de sortie d'un élément (ligne du temps, boucles, changement de scène). Elles utilisent les
   propriétés translate / scale / rotate, indépendantes de `transform`, pour ne pas gêner les animations des effets. */
.dyn-item { transition: opacity .5s ease, translate .5s ease, scale .5s ease, rotate .5s ease; }
.dyn-item.tr-aucune { transition: none; }
.dyn-item.tr-gauche.t-off { translate: -60px 0; } .dyn-item.tr-droite.t-off { translate: 60px 0; }
.dyn-item.tr-haut.t-off { translate: 0 -60px; } .dyn-item.tr-bas.t-off { translate: 0 60px; }
.dyn-item.tr-zoom.t-off { scale: .6; } .dyn-item.tr-tourne.t-off { rotate: -18deg; scale: .8; }
.dyn-stage.editing .dyn-item.t-off { translate: none; scale: none; rotate: none; }
.dyn-stage.editing .dyn-item.sc-hide { display: none; }
.dyn-scenes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; } .dyn-scenes .btn { padding: 6px 11px; font-size: 13px; } .dyn-scenes small { color: var(--muted, #aaa); }
@media (prefers-reduced-motion: reduce) { .dyn-item { transition: opacity .2s; translate: none !important; scale: none !important; rotate: none !important; } }
/* Parallaxe. --mx et --my vont de -1 à 1 (souris ou inclinaison). Sur un mur : chaque élément bouge selon sa profondeur (--pd) ;
   sur la fiche : le fond, la bannière et la vidéo de fond bougent légèrement, en sens inverse. */
.dyn-item.par:not(.t-off) { translate: calc(var(--mx, 0) * var(--pd, 0) * 10px) calc(var(--my, 0) * var(--pd, 0) * 10px); transition: opacity .5s ease, translate .25s ease-out, scale .5s ease, rotate .5s ease; }
.dyn-stage.par-bg > .pf-dyn-video.in-stage { scale: 1.08; translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -14px); transition: translate .3s ease-out; }
body.pf-par .pf-bg { inset: -30px; translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -18px); transition: translate .3s ease-out; }
body.pf-par .pf-banner { background-position: calc(50% + var(--mx, 0) * 16px) calc(0% + var(--my, 0) * 10px); transition: background-position .3s ease-out; }
body.pf-par > .pf-dyn-video { scale: 1.06; translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -12px); transition: translate .3s ease-out; }
body.pf-par .pf-head, body.pf-par .pf-panel { translate: calc(var(--mx, 0) * 4px) calc(var(--my, 0) * 4px); transition: translate .3s ease-out; }
/* Arbre généa-LoL. */
.tree-consent { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 18px; }
.tree-consent.on { border-color: #7dffa8; } .tree-consent b { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; } .tree-consent p { margin: 6px 0 0; color: var(--muted); max-width: 760px; font-size: 14px; } .tree-consent form { margin: 0; }
.tree-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.tree { position: relative; height: min(72vh, 760px); border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, #17131d, #0a090c); overflow: hidden; touch-action: none; }
.tree svg { width: 100%; height: 100%; cursor: grab; display: block; } .tree svg:active { cursor: grabbing; }
.tree-help { position: absolute; left: 12px; bottom: 8px; margin: 0; font-size: 12px; color: var(--muted); pointer-events: none; }
.tree-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); pointer-events: none; }
.tree-edge { stroke: #5b5566; stroke-width: 1.6; } .tree-edge.k-ami { stroke: #7dffa8; } .tree-edge.k-famille { stroke: #ffd76a; stroke-width: 2.4; } .tree-edge.k-connaissance { stroke: #8fb8ff; } .tree-edge.k-ennemi { stroke: #ff5d5d; stroke-dasharray: 3 5; }
.tree-edge.k-invitation { stroke: #b565d8; stroke-width: 2.2; } .tree-edge.k-partie { stroke: #6f6a78; stroke-dasharray: 6 5; } .tree-edge.k-meme { stroke: #fff; stroke-width: 3; }
.tree-node { cursor: pointer; } .tree-node circle { stroke: #0a090c; stroke-width: 2; } .tree-node text { fill: #e9e6ee; font-size: 12px; paint-order: stroke; stroke: #0a090c; stroke-width: 3px; }
.tree-node.me circle { stroke: #fff; stroke-width: 3; } .tree-node.anon text { fill: #8a8592; font-style: italic; } .tree-node.sel circle { stroke: var(--accent); stroke-width: 4; }
.tree-card { position: absolute; right: 12px; top: 12px; display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(15,13,18,.94); border: 1px solid var(--accent); max-width: 240px; } .tree-card[hidden] { display: none; } .tree-card small { color: var(--muted); }
.tree-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); margin-bottom: 8px; } .tree-legend span::before { content: ''; display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; background: #5b5566; }
.tree-legend .k-ami::before { background: #7dffa8; } .tree-legend .k-famille::before { background: #ffd76a; } .tree-legend .k-connaissance::before { background: #8fb8ff; } .tree-legend .k-ennemi::before { background: #ff5d5d; } .tree-legend .k-invitation::before { background: #b565d8; } .tree-legend .k-meme::before { background: #fff; }
.tree-quick { display: flex; gap: 6px; margin: 0; } .tree-quick select { max-width: 130px; } .tree-side .link-row form { margin: 0; }
@media (max-width: 900px) { .tree-wrap { grid-template-columns: 1fr; } .tree { height: 60vh; } }
/* « Moi dans la vie » sur la fiche, signature d'un cadeau, questions dans Personnaliser. */
.pf-life ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pf-life li { display: grid; gap: 2px; } .pf-life li span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--pf-muted, #aaa); } .pf-life li b { font-weight: 500; overflow-wrap: anywhere; }
.pf-bdg-from { display: flex; align-items: center; gap: 6px; justify-content: center; color: #ffd76a; flex-wrap: wrap; }
.pf-gift-as { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-right: 6px; } .pf-gift-as select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--pf-line, #333); background: #17151a; color: #fff; font: inherit; }
.life-form { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; } .life-form legend { padding: 0 8px; font-weight: 500; } .life-form legend small { color: var(--muted); font-weight: 400; }
/* Détail d'une partie. */
.m-open { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--pf-line, #333); font-size: 12px; color: inherit; white-space: nowrap; } .m-open:hover { border-color: var(--accent); color: var(--accent); }
.mt-page .pf-panel { margin-top: 16px; padding: 18px; } .mt-page h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 18px; margin: 0 0 12px; } .mt-page h2 small { font-size: 13px; font-weight: 400; color: var(--muted); }
.mt-team.win { border-color: rgba(125,255,168,.5); } .mt-team.loss { border-color: rgba(255,93,93,.45); }
.mt-scroll { overflow-x: auto; } .mt-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; } .mt-table th { text-align: left; font-weight: 400; color: var(--muted); font-size: 12px; padding: 4px 8px; } .mt-table td { padding: 6px 8px; border-top: 1px solid var(--line); white-space: nowrap; }
.mt-table tr.me td { background: color-mix(in srgb, var(--accent) 14%, transparent); } .mt-who { display: flex; align-items: center; gap: 10px; } .mt-who img { border-radius: 8px; } .mt-who span { display: grid; } .mt-who small { color: var(--muted); font-size: 12px; }
.mt-dmg { min-width: 120px; } .mt-dmg i { display: block; height: 5px; border-radius: 3px; background: #1f1c22; margin-top: 3px; } .mt-dmg u { display: block; height: 100%; border-radius: 3px; background: #ff7a59; }
.mt-items img { border-radius: 4px; margin-right: 2px; vertical-align: middle; }
.mt-chart { width: 100%; height: auto; display: block; } .mt-chart text { fill: #9a94a3; font-size: 12px; }
.g-up { fill: rgba(125,255,168,.28); } .g-dn { fill: rgba(255,93,93,.28); } .g-zero { stroke: #4a4552; stroke-dasharray: 4 5; } .g-line { fill: none; stroke: #fff; stroke-width: 2; }
.g-gold { fill: none; stroke: #ffd76a; stroke-width: 2.5; } .g-cs { fill: none; stroke: #8fb8ff; stroke-width: 2.5; } .lg-gold { color: #ffd76a; fill: #ffd76a !important; } .lg-cs { color: #8fb8ff; fill: #8fb8ff !important; }
.ev-dragon { fill: #ff7a59; } .ev-baron { fill: #b565d8; } .ev-heraut { fill: #8fb8ff; } .ev-inhibiteur { fill: #ffd76a; }
.mt-story { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; } .mt-story li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; } .mt-story time { color: var(--muted); min-width: 50px; } .mt-story span { color: var(--muted); font-size: 12px; } .mt-story .ours b { color: #7dffa8; } .mt-story .theirs b { color: #ff8b8b; }
.favs.hates img { filter: grayscale(.35); box-shadow: 0 0 0 2px #ff5d5d; border-radius: 12px; }
/* Tutoriel d'arrivée. */
.modal.tuto { width: min(760px, calc(100vw - 24px)); } .tuto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tuto-card { display: grid; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: #17151a; color: inherit; } .tuto-card:hover { border-color: var(--accent); } .tuto-card svg { color: var(--accent); } .tuto-card small { color: var(--muted); }
/* Choix du skin de la bannière en vignettes. */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; margin-top: 8px; padding: 4px; }
.skin-grid button { display: grid; gap: 4px; padding: 0 0 6px; border-radius: 10px; border: 2px solid transparent; background: #17151a; color: inherit; cursor: pointer; font: inherit; overflow: hidden; }
.skin-grid img { width: 100%; aspect-ratio: 308 / 560; object-fit: cover; display: block; } .skin-grid span { font-size: 11px; line-height: 1.2; padding: 0 4px; color: var(--muted); }
.skin-grid button.on { border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); } .skin-grid button.on span { color: var(--text); }
/* Porte-feuille de jetons. */
.wal-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; }
.wal-balance { display: grid; justify-items: end; } .wal-balance b { font-size: 44px; font-weight: 500; color: #ffd76a; line-height: 1; } .wal-balance small, .wal-balance span { color: var(--muted); font-size: 13px; }
.wal-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.wal-pack { display: grid; justify-items: center; gap: 4px; padding: 18px 12px; text-align: center; } .wal-pack.hot { border-color: var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 25%, transparent); }
.wal-pack b { font-size: 30px; font-weight: 500; color: #ffd76a; } .wal-pack span, .wal-pack small { color: var(--muted); font-size: 13px; } .wal-pack em { font-style: normal; font-size: 12px; color: #7dffa8; min-height: 16px; } .wal-pack .btn { margin-top: 8px; width: 100%; justify-content: center; }
.tk-jetons { flex-basis: 100%; display: block; margin-bottom: 8px; } .tk-jetons small { display: block; color: var(--muted); }
/* Offrir le Premium : la signature apparaît à côté du bouton, de la même grosseur. */
.pf-gift-form { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.pf-gift-as { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: inherit; } .pf-gift-as[hidden] { display: none; }
.pf-gift-as select { padding: 0 4px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .pf-gift-as select option { color: #111; }
.div-pot { display: block; color: #ffd76a; } .div-pot b { font-weight: 600; } .div-switch { display: grid; gap: 6px; margin-top: 6px; } .div-switch form { margin: 0; }
/* Menu de l'éditeur : un titre de section long ne casse plus en trois lignes ; le petit texte passe dessous. */
.dyn-side summary { flex-wrap: wrap; } .dyn-side summary small { flex-basis: 100%; margin-left: 24px; white-space: nowrap; }
/* Mes équipes : créer ou rejoindre une autre équipe, replié par défaut */
.more-teams { margin-top: 14px; }
.more-teams > summary { list-style: none; cursor: pointer; display: inline-flex; }
.more-teams > summary::-webkit-details-marker { display: none; }
.more-teams[open] > summary { margin-bottom: 16px; }
.dx-file select { max-width: 100%; }

/* Polices du mur */
@font-face { font-family: 'Bebas Neue'; src: url(/fonts/bebas-neue/bebas-neue-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url(/fonts/orbitron/orbitron-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url(/fonts/press-start-2p/press-start-2p-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Pacifico'; src: url(/fonts/pacifico/pacifico-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url(/fonts/cinzel/cinzel-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Permanent Marker'; src: url(/fonts/permanent-marker/permanent-marker-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Bangers'; src: url(/fonts/bangers/bangers-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url(/fonts/playfair-display/playfair-display-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; src: url(/fonts/roboto-mono/roboto-mono-latin-400-normal.woff2) format('woff2'); font-display: swap; }
.dyn-item.ft-bebas, .dyn-item.ft-bebas :is(.dyn-text, .dyn-link, h1, h2, h3, b, strong, span, a, p, small, em) { font-family: 'Bebas Neue', Outfit, sans-serif; }
.dyn-item.ft-orbitron, .dyn-item.ft-orbitron :is(.dyn-text, .dyn-link, h1, h2, h3, b, strong, span, a, p, small, em) { font-family: 'Orbitron', Outfit, sans-serif; }
.dyn-item.ft-pixel, .dyn-item.ft-pixel :is(.dyn-text, .dyn-link, h1, h2, h3, b, strong, span, a, p, small, em) { font-family: 'Press Start 2P', Outfit, sans-serif; }
.dyn-item.ft-pacifico, .dyn-item.ft-pacifico :is(.dyn-text, .dyn-link, h1, h2, h3, b, strong, span, a, p, small, em) { font-family: 'Pacifico', Outfit, sans-serif; }
.dyn-item.ft-cinzel, .dyn-item.ft-cinzel :is(.dyn-text, .dyn-link, h1, h2, h3, b, strong, span, a, p, small, em) { font-family: 'Cinzel', Outfit, sans-serif; }
.dyn-item.ft-marker, .dyn-item.ft-marker :is(.dyn-text, .dyn-link, h1, h2, h3, b, strong, span, a, p, small, em) { font-family: 'Permanent Marker', Outfit, sans-serif; }
.dyn-item.ft-bangers, .dyn-item.ft-bangers :is(.dyn-text, .dyn-link, h1, h2, h3, b, strong, span, a, p, small, em) { font-family: 'Bangers', Outfit, sans-serif; }
.dyn-item.ft-playfair, .dyn-item.ft-playfair :is(.dyn-text, .dyn-link, h1, h2, h3, b, strong, span, a, p, small, em) { font-family: 'Playfair Display', Outfit, sans-serif; }
.dyn-item.ft-mono, .dyn-item.ft-mono :is(.dyn-text, .dyn-link, h1, h2, h3, b, strong, span, a, p, small, em) { font-family: 'Roboto Mono', Outfit, sans-serif; }
/* Effets lettre par lettre (ou icône par icône) : --i = rang de la lettre ou du groupe */
.lt-c { display: inline-block; }
.lt-vague .lt-c { animation: lt-vague 1.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .08s); }
.lt-saut .lt-c { animation: lt-saut 2.4s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(var(--i, 0) * .1s); }
.lt-apparition .lt-c { animation: lt-app 5s ease both infinite; animation-delay: calc(var(--i, 0) * .09s); }
.lt-tremble .lt-c { animation: lt-tremble .5s linear infinite; animation-delay: calc(var(--i, 0) * -.13s); }
.lt-arcenciel .lt-c { animation: lt-arc 3s linear infinite; animation-delay: calc(var(--i, 0) * -.18s); }
.lt-neon .lt-c { animation: lt-neon 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .12s); }
.lt-bascule .lt-c { animation: lt-bascule 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .1s); }
@keyframes lt-vague { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.35em); } }
@keyframes lt-saut { 0%, 30%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(-.5em) scale(1.15); } }
@keyframes lt-app { 0% { opacity: 0; transform: translateY(.4em) scale(.6); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lt-tremble { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(.03em, -.04em) rotate(-3deg); } 75% { transform: translate(-.03em, .04em) rotate(3deg); } }
@keyframes lt-arc { from { filter: hue-rotate(0deg) saturate(2); } to { filter: hue-rotate(360deg) saturate(2); } }
.lt-arcenciel :is(.dyn-text, .dyn-link) .lt-c { color: #ff5d5d; }
@keyframes lt-neon { 0%, 100% { text-shadow: 0 0 .1em currentColor; opacity: .75; } 50% { text-shadow: 0 0 .5em currentColor, 0 0 1em currentColor; opacity: 1; } }
@keyframes lt-bascule { 0%, 60%, 100% { transform: rotateY(0); } 30% { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .lt-c { animation: none !important; } }
/* Tout sélectionner (Ctrl + A) dans l'éditeur */
.dyn-stage.editing.all-sel .dyn-item:not(.sc-hide) { outline: 2px solid var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }

/* Forfait : prix normal rayé en rouge (promotion), et avertissement du prix sans certification */
.price-promo s { color: #ff5a4f; text-decoration-color: #ff5a4f; text-decoration-thickness: 2px; } .price-promo em { color: #ff5a4f; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-style: normal; }
.price-warn { color: #ffb347; border: 1px solid color-mix(in srgb, #ffb347 45%, transparent); border-radius: 10px; padding: 10px 12px; }

/* Équipes sans capitaine préparées par une organisation */
.pre-team { border: 1px solid #2a2630; border-radius: 12px; padding: 10px 14px; margin: 10px 0; } .pre-team > summary { cursor: pointer; display: flex; gap: 10px; align-items: center; } .pre-team[open] > summary { margin-bottom: 12px; }

.tree-edge.k-inconnu { stroke: #77717f; stroke-dasharray: 2 5; } .tree-edge.k-jamais { stroke: #b08cff; stroke-dasharray: 6 4; }
.tree-legend .k-inconnu::before { background: #77717f; } .tree-legend .k-jamais::before { background: #b08cff; }

/* Bannière animée (vidéo) derrière un nom d'organisation ou d'équipe */
.bn-wrap { position: relative; overflow: hidden; isolation: isolate; }
.bn-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; }
.bn-wrap:has(> .bn-video)::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 9, 12, .9), rgba(10, 9, 12, .45)); }
.bn-hero { background: #0c090f; }
.pf-events a.pf-org-row { display: flex; align-items: center; gap: 10px; min-height: 52px; background-size: cover; background-position: center; }
.pf-events a.pf-org-row.has-bn { min-height: 64px; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .bn-video { display: none; } }

/* Bannière d'équipe ou d'organisation avec image : le texte reste lisible même sur une image claire ou chargée */
.tm-hero.has-img :is(h1, h2, p, .tm-tag, small) { text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .75); }
.bn-hero.bn-wrap:has(> .bn-video)::before { background: linear-gradient(90deg, rgba(12, 9, 15, .94) 0%, rgba(12, 9, 15, .82) 45%, rgba(12, 9, 15, .5) 75%, rgba(12, 9, 15, .3) 100%); }

/* Liste des organisations : bannière en fond de ligne, logo devant le nom */
.org-row { background-size: cover; background-position: center; }
.org-row.has-bn { min-height: 84px; }
.org-row .lb-name { position: relative; padding-left: 0; }
.org-row .lb-name:has(.org-row-logo) { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; }
.org-row-logo { grid-row: span 2; border-radius: 10px; object-fit: cover; }

/* Onglet Équipes : rappel de l'équipe active, toujours visible, avec le passage aux autres équipes */
.team-bar { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.team-bar > div:first-child { display: grid; gap: 4px; } .team-bar small { color: var(--muted); font-size: 12px; } .team-bar b { font-size: 20px; font-weight: 600; }
.team-bar-others { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .team-bar-others form { margin: 0; }

/* Pages publiques, membre connecté : un retour bien visible vers son tableau de bord, tout en haut */
.dash-back { display: block; padding: 9px 16px; text-align: center; font-weight: 600; font-size: 14px; color: #fff; background: color-mix(in srgb, var(--accent) 38%, #120d16); border-bottom: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); text-decoration: none; }
.dash-back:hover { background: color-mix(in srgb, var(--accent) 55%, #120d16); }

/* Organisation : le champ « nom » de ce qu'elle représente prend toute la largeur */
input[data-rep-name] { min-width: min(100%, 320px); flex: 1; }

/* Mes jetons : illustration de chaque paquet et bandeau du haut */
.wal-art { width: 100%; max-width: 190px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin-bottom: 6px; transition: transform .2s; }
.wal-pack:hover .wal-art { transform: scale(1.05) rotate(-1.5deg); }
.wal-banner { display: block; width: 100%; max-width: 620px; height: auto; border-radius: 16px; margin: 0 auto 14px; }

/* Page de présentation d'une organisation */
.org-about p { margin: 0 0 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; } .org-about p:last-child { margin-bottom: 0; }
.org-links { display: flex; flex-wrap: wrap; gap: 10px; }
.org-link-row { grid-template-columns: minmax(140px, 1fr) minmax(0, 2.4fr) !important; }

/* Logo du tableau de bord : plus gros, et la mascotte se balance, puis se retourne pour regarder de l'autre côté.
   Le site ne fait que pencher et retourner l'image : aucun fichier animé, aucun poids ajouté. */
.dash-side .logo-img { width: 58px; height: 58px; border-radius: 14px; transform-origin: 50% 85%; animation: logo-guet 9s ease-in-out infinite; will-change: transform; }
.dash-side .logo { gap: 12px; align-items: center; }
@keyframes logo-guet {
  0%   { transform: scaleX(1) rotate(0deg) translateY(0); }
  8%   { transform: scaleX(1) rotate(-9deg) translateY(1px); }
  18%  { transform: scaleX(1) rotate(7deg) translateY(0); }
  26%  { transform: scaleX(1) rotate(-4deg) translateY(2px); }
  34%  { transform: scaleX(1) rotate(0deg) translateY(3px); }
  40%  { transform: scaleX(1) rotate(0deg) translateY(0); }
  46%  { transform: scaleX(0) rotate(0deg) translateY(0); }
  52%  { transform: scaleX(-1) rotate(0deg) translateY(0); }
  60%  { transform: scaleX(-1) rotate(-9deg) translateY(1px); }
  70%  { transform: scaleX(-1) rotate(7deg) translateY(0); }
  78%  { transform: scaleX(-1) rotate(-4deg) translateY(2px); }
  86%  { transform: scaleX(-1) rotate(0deg) translateY(3px); }
  91%  { transform: scaleX(-1) rotate(0deg) translateY(0); }
  96%  { transform: scaleX(0) rotate(0deg) translateY(0); }
  100% { transform: scaleX(1) rotate(0deg) translateY(0); }
}
.dash-side .logo:hover .logo-img { animation-duration: 3s; }
@media (prefers-reduced-motion: reduce) { .dash-side .logo-img { animation: none; } }

/* Mode événement : barre arc-en-ciel en haut de chaque page, et fenêtre des Cups */
.ev-bar { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: center; padding: 9px 16px; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .03em; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  background: linear-gradient(90deg, #ff3b3b, #ff9f1a, #ffe14d, #3ddc84, #29b6f6, #7e57ff, #ff4fd8, #ff3b3b); background-size: 300% 100%; animation: ev-rainbow 6s linear infinite, ev-flash 1.4s ease-in-out infinite; position: relative; z-index: 70; }
.ev-bar span { font-size: 15px; } .ev-bar em, .ev-bar i { font-style: normal; font-weight: 600; font-size: 13px; } .ev-bar b { font-variant-numeric: tabular-nums; }
@keyframes ev-rainbow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@keyframes ev-flash { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35) saturate(1.3); } }
.ev-modal { max-width: 720px; width: calc(100% - 24px); }
.ev-modal h3 { font-size: 24px; margin: 0 0 6px; } .ev-lead { font-size: 16px; margin: 0 0 10px; } .ev-count { margin: 0 0 14px; color: #ffd76a; font-weight: 600; } .ev-count b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ev-cups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ev-cup { display: grid; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--dc) 60%, transparent); background: color-mix(in srgb, var(--dc) 14%, #121014); color: inherit; text-decoration: none; }
.ev-cup b { font-size: 16px; } .ev-cup small { color: var(--muted); } .ev-cup span { font-size: 13px; } .ev-cup em { font-style: normal; font-size: 12px; color: #7dffa8; } .ev-cup em.on { color: #ffb347; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ev-bar { animation: none; } }
.add-rows .add-row { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) auto auto; }
@media (max-width: 700px) { .add-rows .add-row { grid-template-columns: 1fr auto auto; } .add-rows .add-row > label:first-of-type { grid-column: 1 / -1; } }

/* La pige : grille de cases à l'aveugle */
.pige-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin: 12px 0; }
.pige-box { aspect-ratio: 1; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 16%, #121014); color: #fff; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.pige-box:hover:not(:disabled) { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); }
.pige-box.taken { opacity: .3; cursor: not-allowed; } .pige-box.mine { background: #ffd76a; color: #1a1408; border-color: #ffd76a; box-shadow: 0 0 22px rgba(255, 215, 106, .6); }

/* Gabarits de murs : cartes et aperçu schématique */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tpl-card { display: grid; gap: 8px; padding: 14px; align-content: start; } .tpl-card b { font-size: 16px; } .tpl-card small { color: var(--muted); font-size: 12px; }
.tpl-sketch { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: #0b0a0d; border: 1px solid #2a2630; overflow: hidden; }
.tpl-sketch.mobile { aspect-ratio: 9 / 16; max-height: 300px; margin: 0 auto; }
.tpl-box { position: absolute; border-radius: 4px; background: color-mix(in srgb, var(--accent) 45%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 80%, transparent); min-height: 3px; }
.tpl-box.tpl-texte, .tpl-box.tpl-nom, .tpl-box.tpl-pseudo, .tpl-box.tpl-bio { background: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .6); }
.tpl-box.tpl-forme { background: rgba(255, 215, 106, .22); border-color: rgba(255, 215, 106, .5); } .tpl-box.tpl-avatar { border-radius: 50%; }
.tpl-apply { display: flex; gap: 8px; flex-wrap: wrap; } .tpl-apply select { flex: 1; min-width: 0; }

/* Tournoi d'organisation : tableau par tours */
.oc-bracket { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.oc-round { min-width: 250px; display: grid; gap: 12px; align-content: start; } .oc-round h3 { margin: 0; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.oc-match { display: grid; gap: 4px; padding: 10px; border-radius: 12px; border: 1px solid #2a2630; background: #121014; } .oc-match.bye { opacity: .55; }
.oc-team { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #19161d; } .oc-team a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.oc-team.win { background: color-mix(in srgb, #3ddc84 22%, #19161d); font-weight: 600; } .oc-team.lost { opacity: .5; } .oc-team.oc-tbd { color: var(--muted); font-style: italic; } .oc-team form { margin: 0; } .oc-team .btn { padding: 4px 10px; font-size: 12px; }

.oc-when, .oc-code { display: block; font-size: 12px; color: var(--muted); padding: 2px 8px; } .oc-code b { color: #ffd76a; user-select: all; }
.oc-set { padding: 2px 8px; font-size: 12px; } .oc-set summary { cursor: pointer; color: var(--muted); } .oc-set form { display: grid; gap: 6px; margin-top: 6px; }

/* Mur : au survol d'une icône de réseau, plus de carré gris (une lueur à la place) ; l'icône reste centrée même avec un effet lettre par lettre */
.pf-icon.lt-c { display: inline-grid; }
.dyn-item .pf-icon:hover, .dyn-item .dyn-media-link:hover { background: none; }
.dyn-item .pf-icon:hover svg { filter: drop-shadow(0 0 6px currentColor); }
/* Vidéos du mur et vidéo de fond : la souris passe au travers, pour que le navigateur n'affiche pas ses boutons (fenêtre flottante, etc.) par-dessus */
.dyn-item video, .pf-dyn-video, video.avatar, .bn-video, .pf-banner-video { pointer-events: none; }

/* Derrière la porte d'entrée, le mur est figé : aucune animation ne tourne avant le clic */
body.dyn-gated .dyn-stage, body.dyn-gated .dyn-stage *, body.dyn-gated .dyn-stage *::before, body.dyn-gated .dyn-stage *::after { animation-play-state: paused !important; }

/* Analyse d'une partie : note, avantages et désavantages, repères, classement */
.m-grade { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 8px; font-weight: 700; font-size: 13px; background: #2a2630; color: #fff; }
.g-Sp, .g-S { background: linear-gradient(135deg, #ffd76a, #ff9f1a); color: #1a1408; } .g-A { background: #3ddc84; color: #06220f; } .g-B { background: #29b6f6; color: #04202e; } .g-C { background: #ff9f1a; color: #2b1700; } .g-D { background: #ff5a4f; color: #2b0502; }
.an-head { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; } .an-head h2 { margin: 0 0 4px; } .an-head p { margin: 0; color: var(--muted); }
.an-grade { display: grid; place-items: center; width: 84px; height: 84px; flex: none; border-radius: 22px; font-size: 38px; font-weight: 800; box-shadow: 0 0 26px rgba(255, 215, 106, .25); }
.an-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 8px; } .an-cols ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; } .an-cols h3 { margin: 0; }
.an-pro { color: #3ddc84; } .an-con { color: #ff7a70; } .an-panel h3 { margin-top: 16px; font-size: 15px; }
.an-bar { display: block; width: 140px; height: 8px; border-radius: 999px; background: #241f2b; overflow: hidden; } .an-bar u { display: block; height: 100%; border-radius: 999px; } .an-bar .good { background: #3ddc84; } .an-bar .mid { background: #ffd76a; } .an-bar .bad { background: #ff5a4f; }
.an-rank { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.an-rank li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #17141b; border-left: 3px solid #5b5566; } .an-rank li.ours { border-left-color: #29b6f6; } .an-rank li.theirs { border-left-color: #ff5a4f; } .an-rank li.me { outline: 1px solid var(--accent); }
.an-rank img { border-radius: 6px; } .an-rank b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .an-rank small { color: var(--muted); }

/* Bilan de l'historique, médailles et mémoire des parties */
.hs-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.hs-streak { display: grid; gap: 2px; align-content: center; padding: 12px 16px; border-radius: 12px; background: #17141b; min-width: 150px; } .hs-streak b { font-size: 24px; display: flex; align-items: center; gap: 8px; } .hs-streak small, .hs-form small { color: var(--muted); }
.hs-streak.win { box-shadow: inset 0 0 0 1px rgba(46, 204, 113, .5); } .hs-streak.loss { box-shadow: inset 0 0 0 1px rgba(231, 76, 60, .5); }
.hs-form { flex: 1; min-width: 240px; display: grid; gap: 6px; align-content: center; padding: 12px 16px; border-radius: 12px; background: #17141b; } .hs-form div { display: flex; flex-wrap: wrap; gap: 4px; }
.hs-form a { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #fff; text-decoration: none; } .hs-form a.win { background: #1f8f52; } .hs-form a.loss { background: #a8382c; } .hs-form a:hover { transform: scale(1.2); }
.hs-panel h3 { margin: 18px 0 8px; }
.hs-grades { display: flex; gap: 10px; align-items: flex-end; } .hs-grades > div { display: grid; justify-items: center; gap: 2px; width: 44px; } .hs-grades i { display: flex; align-items: flex-end; width: 100%; height: 70px; border-radius: 8px; background: #17141b; overflow: hidden; } .hs-grades u { display: block; width: 100%; min-height: 2px; border-radius: 8px 8px 0 0; background: #5b5566; } .hs-grades small { color: var(--muted); }
.hs-grades u.g-Sp, .hs-grades u.g-S { background: #ffd76a; } .hs-grades u.g-A { background: #2ecc71; } .hs-grades u.g-B { background: #4aa3ff; } .hs-grades u.g-C { background: #e69a3c; } .hs-grades u.g-D { background: #e74c3c; }
.hs-recs, .hs-champs, .hs-foes, .aw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.hs-rec, .hs-champs > div, .hs-foes > div, .aw { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #17141b; color: inherit; text-decoration: none; min-width: 0; }
.hs-rec:hover { background: #211c27; } .hs-rec img, .hs-champs img, .hs-foes img, .aw img { border-radius: 8px; flex: none; }
.hs-rec span:last-child, .hs-champs span, .hs-foes span:last-child, .aw span:last-child { display: grid; min-width: 0; } .hs-rec small, .hs-champs small, .hs-foes small, .aw small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-champs em { font-style: normal; font-weight: 700; } .hs-champs em.ok { color: #2ecc71; } .hs-champs em.ko { color: #e74c3c; }
.hs-foes { margin-top: 12px; } .hs-foes .ko { box-shadow: inset 3px 0 0 #e74c3c; } .hs-foes .ok { box-shadow: inset 3px 0 0 #2ecc71; } .hs-foes > div > span:first-child, .hs-rec > span:first-child { font-size: 20px; }
.aw { border-left: 3px solid #5b5566; } .aw.ours { border-left-color: #2ecc71; } .aw.theirs { border-left-color: #e74c3c; } .aw.me { background: linear-gradient(90deg, rgba(255, 215, 106, .18), #17141b 70%); box-shadow: 0 0 0 1px rgba(255, 215, 106, .45); }
.aw-ico { font-size: 22px; flex: none; } .aw b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-facts { margin: 0; padding-left: 18px; display: grid; gap: 6px; } .mt-facts li.rec { list-style: none; margin-left: -18px; font-weight: 600; color: #ffd76a; }
.m-items img, .mt-items img { cursor: help; }

/* Mode OBS : le mur seul */
.dyn-obs .tk-rail, .dyn-obs .tk-cap, .dyn-obs .dyn-foot, .dyn-obs .pf-notice, .dyn-obs .dash-back, .dyn-obs .pf-dyn-ctl, .dyn-obs .pf-dyn-gate, .dyn-obs .ev-modal, .dyn-obs .ev-bar, .dyn-obs .ck-bar { display: none !important; }
.dyn-obs { cursor: none; overflow: hidden; }

/* Tutoriel du profil animé */
.tu-page { max-width: 1240px; margin: 0 auto; padding: 0 20px 80px; }
.tu-hero { text-align: center; padding: 64px 16px 44px; border-radius: 0 0 32px 32px; background: radial-gradient(900px 380px at 50% -10%, rgba(181, 101, 216, .32), transparent 70%), radial-gradient(500px 260px at 85% 20%, rgba(74, 163, 255, .16), transparent 70%); }
.tu-free { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #0b0a0c; background: linear-gradient(90deg, #ffd76a, #ff9f1a); }
.tu-hero h1 { margin: 18px 0 10px; font-size: clamp(34px, 6vw, 62px); line-height: 1.05; background: linear-gradient(90deg, #fff, #d9b3ee 60%, #8fc7ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tu-hero > p { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 18px; }
.tu-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.tu-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; margin: 28px 0 0; padding: 0; color: var(--muted); } .tu-facts b { color: var(--text); font-size: 20px; margin-right: 4px; }
.tu-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; margin-top: 34px; align-items: start; }
.tu-nav { position: sticky; top: 84px; display: grid; gap: 2px; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); max-height: calc(100vh - 110px); overflow: auto; }
.tu-nav > b { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.tu-nav a { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.25; } .tu-nav a:hover { background: var(--panel-2); }
.tu-nav i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--accent-deep); color: #e7c9f5; font-style: normal; font-size: 12px; font-weight: 700; }
.tu-main { display: grid; gap: 22px; min-width: 0; }
.tu-ch { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 30px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); scroll-margin-top: 90px; }
.tu-ch:nth-child(even) .tu-ch-art { order: -1; } .tu-ch:not(:has(.tu-ch-art)), .tu-flat { grid-template-columns: 1fr; }
.tu-num { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--accent); } .tu-ch h2 { margin: 4px 0 8px; font-size: clamp(22px, 3vw, 30px); }
.tu-lead { color: var(--muted); margin: 0 0 14px; } .tu-ch ol { margin: 0; padding: 0; list-style: none; counter-reset: tu; display: grid; gap: 10px; }
.tu-ch ol li { counter-increment: tu; position: relative; padding-left: 38px; line-height: 1.5; } .tu-ch ol li::before { content: counter(tu); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--accent-line); font-size: 13px; font-weight: 700; }
.tu-tip { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 215, 106, .08); border: 1px solid rgba(255, 215, 106, .28); color: #f3e3b3; font-size: 14.5px; } .tu-tip svg { flex: none; margin-top: 3px; }
.tu-page kbd { display: inline-block; padding: 1px 7px; border-radius: 6px; background: #221f26; border: 1px solid #3a3541; border-bottom-width: 3px; font: 600 12.5px/1.5 ui-monospace, monospace; }
.tu-ch-art { min-width: 0; }
.tu-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; border: 2px dashed #5d4a69; background: linear-gradient(135deg, #1b1022, #0d1524); overflow: hidden; } .tu-stage > small { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: #8d8496; }
.tu-ed { display: grid; grid-template-columns: 34% 1fr; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #0c0b0e; font-size: 12px; }
.tu-ed-side { display: grid; gap: 6px; align-content: start; padding: 12px; background: #151318; border-right: 1px solid var(--line); } .tu-ed-side span { padding: 7px 9px; border-radius: 8px; background: #1d1a21; color: var(--muted); } .tu-ed-side span.on { color: #fff; box-shadow: inset 0 0 0 1px var(--accent-line); }
.tu-ed-side em { margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: var(--accent); color: #fff; font-style: normal; font-weight: 600; text-align: center; }
.tu-ed-main { padding: 10px; display: grid; gap: 8px; align-content: start; } .tu-ed-bar { display: flex; gap: 5px; flex-wrap: wrap; } .tu-ed-bar i { padding: 4px 8px; border-radius: 7px; background: #1d1a21; font-style: normal; color: var(--muted); } .tu-ed-bar i.del { color: #ff8a98; }
.tu-box { position: absolute; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; font-size: 12px; }
.tu-b-name { left: 8%; top: 12%; width: 46%; height: 20%; font-size: 15px; letter-spacing: .08em; } .tu-b-name.sel { outline: 2px solid var(--accent); animation: tuNudge 5s ease-in-out infinite; } .tu-b-name u { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 3px; background: var(--accent); }
.tu-b-rank { left: 8%; top: 42%; width: 22%; height: 40%; background: rgba(255, 215, 106, .16); } .tu-b-links { left: 34%; top: 42%; width: 24%; height: 16%; letter-spacing: .3em; } .tu-b-img { right: 6%; top: 12%; width: 28%; height: 70%; background: linear-gradient(160deg, rgba(181, 101, 216, .5), rgba(74, 163, 255, .35)); }
@keyframes tuNudge { 0%, 100% { translate: 0 0; } 50% { translate: 14px 8px; } }
.tu-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tu-mini { margin: 0; } .tu-mini figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); text-align: center; }
.tu-mini-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; border: 1px dashed #4a3f55; background: #110f14; overflow: hidden; }
.tu-dot { position: absolute; left: 12%; top: 22%; width: 34%; height: 44%; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #b565d8, #4aa3ff); font-size: 22px; }
.m-move .tu-dot { animation: tuMove 4s ease-in-out infinite; } .m-size .tu-dot { transform-origin: 0 0; animation: tuSize 4s ease-in-out infinite; } .m-hide .tu-dot { left: 33%; animation: tuHide 4s ease-in-out infinite; }
.tu-crop { position: absolute; left: 14%; top: 18%; height: 60%; width: 70%; border-radius: 10px; overflow: hidden; outline: 2px solid var(--accent); animation: tuCrop 4s ease-in-out infinite; } .tu-crop div { width: 240px; height: 100%; background: repeating-linear-gradient(90deg, #b565d8 0 28px, #4aa3ff 28px 56px, #ffd76a 56px 84px); }
@keyframes tuMove { 0%, 100% { translate: 0 0; } 50% { translate: 120% 30%; } } @keyframes tuSize { 0%, 100% { scale: 1; } 50% { scale: 1.9; } } @keyframes tuHide { 0%, 40%, 100% { opacity: 1; } 55%, 85% { opacity: 0; } } @keyframes tuCrop { 0%, 100% { width: 70%; } 50% { width: 26%; } }
.tu-text { display: grid; gap: 8px; justify-items: center; padding: 26px 14px; border-radius: 16px; background: linear-gradient(135deg, #1b1022, #0d1524); text-align: center; }
.tu-text p { margin: 0; } .tu-text .t1 { font: 400 clamp(26px, 4vw, 40px)/1 'Bangers', 'Outfit', sans-serif; letter-spacing: .06em; } .tu-text .t1 span { display: inline-block; animation: tuWave 1.6s ease-in-out infinite; }
.tu-text .t1 span:nth-child(2) { animation-delay: .1s; } .tu-text .t1 span:nth-child(3) { animation-delay: .2s; } .tu-text .t1 span:nth-child(4) { animation-delay: .3s; } .tu-text .t1 span:nth-child(5) { animation-delay: .4s; } .tu-text .t1 span:nth-child(6) { animation-delay: .5s; } .tu-text .t1 span:nth-child(7) { animation-delay: .6s; } .tu-text .t1 span:nth-child(8) { animation-delay: .7s; } .tu-text .t1 span:nth-child(9) { animation-delay: .8s; }
.tu-text .t2 { font: 600 22px 'Orbitron', 'Outfit', sans-serif; color: #7fe7ff; animation: tuNeon 1.8s ease-in-out infinite; } .tu-text .t3 { font: 700 22px 'Outfit', sans-serif; background: linear-gradient(90deg, #ff3b3b, #ffd76a, #2ecc71, #4aa3ff, #b565d8, #ff3b3b); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tuRain 3s linear infinite; }
.tu-fonts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; } .tu-fonts i { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-style: normal; font-size: 15px; }
@keyframes tuWave { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } @keyframes tuNeon { 0%, 100% { text-shadow: 0 0 4px #7fe7ff; } 50% { text-shadow: 0 0 18px #7fe7ff, 0 0 34px #3aa0ff; } } @keyframes tuRain { to { background-position: 200% 0; } }
.tu-scenes { display: grid; gap: 8px; } .tu-scenes > small { color: var(--muted); font-size: 13px; } .tu-tabs { display: flex; gap: 6px; } .tu-tabs i { padding: 5px 12px; border-radius: 8px; background: #1d1a21; font-style: normal; font-size: 13px; color: var(--muted); animation: tuTab 9s steps(1) infinite; } .tu-tabs .s2 { animation-delay: 3s; } .tu-tabs .s3 { animation-delay: 6s; }
.tu-always { position: absolute; left: 0; right: 0; top: 0; padding: 5px 10px; background: linear-gradient(90deg, #ff3b3b, #7e57ff); font-size: 12px; font-weight: 700; z-index: 2; }
.tu-sc { position: absolute; inset: 22% 8% 10%; display: grid; gap: 8px; align-content: center; justify-items: center; opacity: 0; animation: tuScene 9s linear infinite; } .tu-sc.s2 { animation-delay: 3s; } .tu-sc.s3 { animation-delay: 6s; }
.tu-sc b { font-size: clamp(18px, 3vw, 28px); } .tu-sc span { width: 60%; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .22); } .tu-sc em { display: inline-block; width: 70%; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #2ecc71 60%, rgba(255, 255, 255, .12) 60%); } .tu-sc em:nth-of-type(2) { background: linear-gradient(90deg, #4aa3ff 82%, rgba(255, 255, 255, .12) 82%); } .tu-sc em:nth-of-type(3) { background: linear-gradient(90deg, #ffd76a 45%, rgba(255, 255, 255, .12) 45%); } .tu-sc p { margin: 0; font-size: 26px; letter-spacing: .3em; }
.tu-progress { height: 6px; border-radius: 3px; background: #1d1a21; overflow: hidden; } .tu-progress u { display: block; height: 100%; background: var(--accent); animation: tuBar 3s linear infinite; }
@keyframes tuScene { 0% { opacity: 0; translate: 0 12px; } 3%, 30% { opacity: 1; translate: 0 0; } 33.3%, 100% { opacity: 0; translate: 0 -12px; } } @keyframes tuTab { 0% { background: var(--accent); color: #fff; } 33.3%, 100% { background: #1d1a21; color: var(--muted); } } @keyframes tuBar { from { width: 0; } to { width: 100%; } }
.tu-time { position: relative; display: grid; gap: 7px; padding: 14px 14px 16px; border-radius: 16px; background: #110f14; border: 1px solid var(--line); overflow: hidden; }
.tu-ruler { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); } .tu-track { position: relative; height: 26px; border-radius: 7px; background: #1a171e; }
.tu-track i { position: absolute; top: 3px; bottom: 3px; padding: 0 8px; border-radius: 6px; font-style: normal; font-size: 11.5px; line-height: 20px; white-space: nowrap; overflow: hidden; color: #0b0a0c; font-weight: 600; }
.tu-track .k1 { left: 0; width: 100%; background: #b565d8; } .tu-track .k2 { left: 25%; width: 37.5%; background: #ff9f1a; } .tu-track .k3 { left: 50%; width: 50%; background: #4aa3ff; } .tu-track .k4 { left: 0; width: 12.5%; background: #2ecc71; } .tu-track .k4.b { left: 25%; } .tu-track .k4.c { left: 50%; } .tu-track .k4.d { left: 75%; }
.tu-head { position: absolute; top: 30px; bottom: 10px; left: 14px; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; animation: tuHead 8s linear infinite; } @keyframes tuHead { to { left: calc(100% - 14px); } }
.tu-frames { display: flex; gap: 18px; align-items: flex-end; justify-content: center; } .tu-frame { display: grid; place-content: center; justify-items: center; gap: 2px; border-radius: 14px; border: 2px dashed #5d4a69; background: linear-gradient(135deg, #1b1022, #0d1524); } .tu-frame.d { width: 62%; aspect-ratio: 16 / 9; } .tu-frame.m { width: 22%; aspect-ratio: 9 / 16; } .tu-frame b { font-size: 22px; } .tu-frame small, .tu-frame span { color: var(--muted); font-size: 12px; }
.tu-fx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .tu-fx i { display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: 12px; background: linear-gradient(135deg, #2a1836, #14213a); font-style: normal; font-weight: 600; }
.tu-fx .f1 { animation: tuWave 2.4s ease-in-out infinite; } .tu-fx .f2 { animation: tuGlow 2s ease-in-out infinite; } .tu-fx .f3 { animation: tuBeat .9s ease-in-out infinite; } .tu-fx .f4 { animation: tuTilt 2.4s ease-in-out infinite; } .tu-fx .f5 { animation: tuSlide 3s ease-in-out infinite; } .tu-fx .f6 { animation: tuZoom 3s ease-in-out infinite; }
@keyframes tuGlow { 50% { box-shadow: 0 0 26px rgba(181, 101, 216, .9); } } @keyframes tuBeat { 50% { scale: 1.08; } } @keyframes tuTilt { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } } @keyframes tuSlide { 0%, 15% { translate: -40% 0; opacity: 0; } 35%, 80% { translate: 0 0; opacity: 1; } 100% { translate: 40% 0; opacity: 0; } } @keyframes tuZoom { 0%, 15% { scale: .3; opacity: 0; } 35%, 80% { scale: 1; opacity: 1; } 100% { scale: 1.4; opacity: 0; } }
.tu-social { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .tu-social i { padding: 9px 15px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-style: normal; font-weight: 600; font-size: 14px; animation: tuWave 3s ease-in-out infinite; }
.tu-obs { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: #1c1f26; border: 1px solid #323744; font-size: 13px; } .tu-obs > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tu-obs label { display: grid; gap: 4px; color: #aab1c0; } .tu-obs label span { padding: 7px 9px; border-radius: 6px; background: #0f1116; border: 1px solid #323744; color: #e8ecf4; font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; } .tu-obs .ck { color: #e8ecf4; }
.tu-mine { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--panel-2); } .tu-mine b { width: 100%; }
.tu-store { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .tu-store > div { display: grid; gap: 4px; padding: 10px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); } .tu-store > div > div { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; background: #0f0d12; overflow: hidden; } .tu-store small { color: #4fc98a; font-weight: 600; }
.tu-store u { position: absolute; border-radius: 3px; background: rgba(181, 101, 216, .7); } .tu-store u:nth-child(1) { left: 8%; top: 12%; width: 50%; height: 16%; } .tu-store u:nth-child(2) { left: 8%; top: 40%; width: 30%; height: 44%; background: rgba(74, 163, 255, .6); } .tu-store u:nth-child(3) { right: 8%; top: 40%; width: 44%; height: 44%; background: rgba(255, 215, 106, .55); }
.tu-store .c2 u:nth-child(1) { left: 25%; } .tu-store .c2 u:nth-child(2) { left: 25%; width: 50%; height: 14%; } .tu-store .c2 u:nth-child(3) { right: 25%; top: 62%; width: 50%; height: 14%; } .tu-store .c3 u:nth-child(1) { left: 0; top: 0; width: 100%; height: 9%; } .tu-store .c3 u:nth-child(2) { top: 70%; height: 20%; width: 40%; } .tu-store .c3 u:nth-child(3) { top: 20%; height: 20%; width: 26%; }
.tu-table { width: 100%; border-collapse: collapse; } .tu-table th, .tu-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); } .tu-table th { color: var(--muted); font-weight: 600; font-size: 13px; } .tu-table td:first-child { color: var(--muted); } .tu-table td + td { font-weight: 600; }
.tu-end { text-align: center; padding: 44px 20px; border-radius: 24px; background: radial-gradient(600px 240px at 50% 0, rgba(181, 101, 216, .28), transparent 70%), var(--panel); border: 1px solid var(--line); } .tu-end h2 { margin: 0 0 6px; font-size: 30px; } .tu-end p { color: var(--muted); margin: 0; }
@media (max-width: 980px) { .tu-body { grid-template-columns: 1fr; } .tu-nav { position: static; max-height: none; grid-template-columns: 1fr 1fr; } .tu-nav > b { grid-column: 1 / -1; } .tu-ch { grid-template-columns: 1fr; padding: 22px; } .tu-ch:nth-child(even) .tu-ch-art { order: 0; } }
@media (max-width: 560px) { .tu-nav { grid-template-columns: 1fr; } .tu-page { padding: 0 12px 60px; } .tu-fx { grid-template-columns: 1fr 1fr; } .tu-store { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tu-page * { animation: none !important; } .tu-sc.s1 { opacity: 1; } }

/* Morceaux d'une section cachés sur le mur */
.dyn-item .pk-hide { display: none !important; }

/* Tutoriel du site : schémas */
.tu-more { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 0; font-size: 14.5px; color: var(--muted); }
.tu-path { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px auto 0; padding: 0; max-width: 980px; }
.tu-path li { position: relative; display: grid; justify-items: center; gap: 2px; min-width: 150px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); } .tu-path li.opt { border-style: dashed; opacity: .85; }
.tu-path i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #b565d8, #4aa3ff); font-style: normal; font-weight: 700; } .tu-path small { color: var(--muted); }
.tu-form, .tu-cert, .tu-card, .tu-team, .tu-cups, .tu-slots, .tu-bracket, .tu-discord, .tu-stats, .tu-groups > div { padding: 18px; border-radius: 16px; background: #110f14; border: 1px solid var(--line); }
.tu-form { display: grid; gap: 10px; max-width: 340px; margin: 0 auto; font-size: 13px; } .tu-form > b { font-size: 18px; } .tu-form label { display: grid; gap: 4px; color: var(--muted); } .tu-form label span { padding: 9px 11px; border-radius: 9px; background: #1a171e; border: 1px solid #2c2832; color: var(--text); }
.tu-form .code { display: flex; gap: 6px; padding: 0; background: none; border: 0; } .tu-form .code i { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 8px; background: #1a171e; border: 1px solid var(--accent-line); font-style: normal; font-weight: 700; font-size: 17px; animation: tuPop 4s ease-in-out infinite; }
.tu-form .code i:nth-child(2) { animation-delay: .15s; } .tu-form .code i:nth-child(3) { animation-delay: .3s; } .tu-form .code i:nth-child(4) { animation-delay: .45s; } .tu-form .code i:nth-child(5) { animation-delay: .6s; } .tu-form .code i:nth-child(6) { animation-delay: .75s; }
.tu-form em { padding: 10px; border-radius: 10px; background: var(--accent); color: #fff; font-style: normal; font-weight: 600; text-align: center; } @keyframes tuPop { 0%, 8% { opacity: 0; scale: .6; } 16%, 100% { opacity: 1; scale: 1; } }
.tu-check { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; } .tu-check li { position: relative; padding: 8px 10px 8px 34px; border-radius: 9px; background: #1a171e; color: var(--muted); }
.tu-check li::before { content: '🔒'; position: absolute; left: 9px; top: 7px; font-size: 13px; } .tu-check li.ok { color: var(--text); } .tu-check li.ok::before { content: '✓'; color: #4fc98a; font-weight: 700; font-size: 15px; } .tu-check li.now { color: #fff; box-shadow: inset 0 0 0 1px var(--accent); animation: tuGlow 2.4s ease-in-out infinite; } .tu-check li.now::before { content: '➜'; color: var(--accent); }
.tu-check li.opt { border: 1px dashed #4a3f55; background: none; } .tu-check li.opt::before { content: '○'; } .tu-check em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #2a2630; margin-left: 4px; }
.tu-prog small { color: var(--muted); } .tu-prog i { display: block; height: 8px; margin-top: 4px; border-radius: 4px; background: #1d1a21; overflow: hidden; } .tu-prog u { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, #b565d8, #4aa3ff); animation: tuGrow 5s ease-in-out infinite; } @keyframes tuGrow { 0% { width: 12%; } 60%, 100% { width: 50%; } }
.tu-groups { display: grid; gap: 12px; }
.tu-cert { display: grid; justify-items: center; gap: 6px; text-align: center; } .tu-seal { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; font-size: 40px; font-weight: 800; color: #0b0a0c; background: conic-gradient(from 0deg, #ffd76a, #fff3c4, #ff9f1a, #ffd76a); animation: tuSpin 8s linear infinite; box-shadow: 0 0 30px rgba(255, 215, 106, .4); } @keyframes tuSpin { to { rotate: 360deg; } }
.tu-cert > b { font-size: 20px; } .tu-cert small { color: var(--muted); } .tu-cert p, .tu-card p, .tu-stats p { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 0; } .tu-cert p i, .tu-card p i, .tu-stats p i { padding: 5px 11px; border-radius: 999px; background: #1d1a21; font-style: normal; font-size: 13px; }
.tu-card-top { display: flex; gap: 12px; align-items: center; } .tu-card .av { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #b565d8, #4aa3ff); flex: none; } .tu-card-top div { display: grid; } .tu-card-top b { font-size: 18px; } .tu-card small { color: #ffd76a; } .tu-card p { justify-content: flex-start; }
.tu-team { display: grid; gap: 8px; } .tu-team .row { display: flex; flex-wrap: wrap; gap: 8px; } .tu-team .row span { display: grid; justify-items: center; gap: 4px; padding: 8px 10px; min-width: 54px; border-radius: 10px; background: #1a171e; font-size: 12px; font-weight: 600; } .tu-team .row i { width: 26px; height: 26px; border-radius: 50%; background: #3b1d47; } .tu-team .main i { background: linear-gradient(135deg, #b565d8, #4aa3ff); } .tu-team .cap { box-shadow: inset 0 0 0 1px #ffd76a; } .tu-team .sub { opacity: .7; } .tu-team small { color: var(--muted); }
.tu-cups { display: grid; gap: 10px; } .tu-cups > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; border-radius: 12px; background: #1a171e; border-left: 4px solid var(--c); } .tu-cups small { color: var(--muted); } .tu-cups i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #26232a; overflow: hidden; } .tu-cups u { display: block; height: 100%; background: var(--c); } .tu-cups p { margin: 0; color: var(--muted); font-size: 13px; }
.tu-slots { display: grid; gap: 8px; } .tu-slots small { color: var(--muted); } .tu-slots > div { display: flex; flex-wrap: wrap; gap: 6px; } .tu-slots i { padding: 6px 10px; border-radius: 8px; background: #1a171e; font-style: normal; font-size: 13px; color: var(--muted); } .tu-slots i.on { background: var(--accent); color: #fff; font-weight: 600; }
.tu-draw { display: grid !important; grid-template-columns: repeat(8, 1fr); gap: 5px !important; } .tu-draw u { display: grid; place-items: center; aspect-ratio: 1; border-radius: 7px; background: #1a171e; color: #5b5566; text-decoration: none; font-size: 12px; font-weight: 700; } .tu-draw u.hit { background: #ffd76a; color: #0b0a0c; animation: tuBeat 1.2s ease-in-out infinite; }
.tu-bracket { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: center; } .tu-bracket > div { display: grid; gap: 8px; } .tu-bracket span { padding: 8px 10px; border-radius: 8px; background: #1a171e; color: var(--muted); font-weight: 600; font-size: 13px; text-align: center; } .tu-bracket .w { color: #fff; box-shadow: inset 3px 0 0 #2ecc71; } .tu-bracket .champ { color: #0b0a0c; background: linear-gradient(90deg, #ffd76a, #ff9f1a); animation: tuBeat 1.6s ease-in-out infinite; } .tu-bracket small { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.tu-wallet { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; } .tu-wallet > div { display: grid; justify-items: center; align-content: center; gap: 2px; } .tu-wallet small { font-size: 12px; }
.tu-wallet .tk { width: 190px; height: 100px; border-radius: 14px; background: linear-gradient(135deg, #b565d8, #4aa3ff); -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; animation: tuTilt 4s ease-in-out infinite; } .tu-wallet .tk b { font-size: 22px; letter-spacing: .12em; }
.tu-wallet .co { width: 110px; height: 110px; border-radius: 50%; color: #0b0a0c; background: radial-gradient(circle at 35% 30%, #fff3c4, #ffd76a 45%, #d98a12); box-shadow: 0 0 26px rgba(255, 215, 106, .4); animation: tuWave 3s ease-in-out infinite; } .tu-wallet .co b { font-size: 24px; }
.tu-discord { display: grid; gap: 4px; max-width: 300px; margin: 0 auto; background: #2b2d31; border-color: #1e1f22; font-size: 14px; } .tu-discord > b { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid #1e1f22; } .tu-discord span { padding: 6px 9px; border-radius: 6px; color: #949ba4; } .tu-discord span.on { background: #404249; color: #fff; } .tu-discord em { margin-top: 8px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #949ba4; }
.tu-stats { display: flex; gap: 14px; align-items: center; } .tu-stats .g { display: grid; place-items: center; width: 74px; height: 74px; flex: none; border-radius: 20px; font-size: 34px; font-weight: 800; color: #0b0a0c; background: linear-gradient(135deg, #ffd76a, #ff9f1a); box-shadow: 0 0 26px rgba(255, 215, 106, .3); } .tu-stats div { display: grid; gap: 2px; min-width: 0; } .tu-stats small { color: var(--muted); } .tu-stats p { justify-content: flex-start; }
@media (max-width: 560px) { .tu-path li { min-width: 0; flex: 1 1 40%; } .tu-stats { flex-direction: column; align-items: flex-start; } }

/* Onglet Compétitions : parcours en quatre étapes et choix de la Cup en grandes cartes */
.comp-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 6px; padding: 0; }
.comp-steps a { display: flex; gap: 12px; align-items: center; height: 100%; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.comp-steps i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); font-style: normal; font-weight: 700; }
.comp-steps span { display: grid; min-width: 0; } .comp-steps b { color: var(--text); font-weight: 600; } .comp-steps small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-steps .done a { border-color: rgba(79, 201, 138, .45); } .comp-steps .done i { background: var(--ok); border-color: var(--ok); color: #0b0a0c; }
.comp-steps .now a { border-color: var(--accent); box-shadow: 0 0 22px rgba(181, 101, 216, .25); } .comp-steps .now i { background: var(--accent); border-color: var(--accent); color: #fff; }
.div-grid.pick { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.div-grid.pick .div-card { align-items: center; text-align: center; padding: 24px 18px; gap: 6px; }
.div-grid.pick .div-card b { font-size: 20px; } .div-grid.pick .div-ico { font-size: 64px; line-height: 1; } .div-grid.pick .div-ico img { width: 120px; height: 120px; object-fit: contain; }
.div-grid.pick .div-card.open { transition: transform .15s, box-shadow .15s; } .div-grid.pick .div-card.open:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--dc), 0 12px 34px color-mix(in srgb, var(--dc) 28%, transparent); }
.div-grid.pick .div-card form { width: 100%; margin-top: 10px; } .div-grid.pick .div-card form .btn { width: 100%; padding: 12px; font-size: 16px; font-weight: 700; background: var(--dc); border-color: var(--dc); color: #0b0a0c; }
.div-grid.pick .div-card:not(.open) { filter: grayscale(1); } .div-why { display: inline-flex; gap: 5px; align-items: center; }
@media (max-width: 900px) { .comp-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .comp-steps { grid-template-columns: 1fr; } }

/* Pige à l'aveugle : avis de jeu franc, grille verrouillée, numéro dévoilé */
.notice.fair { border-color: rgba(255, 159, 26, .5); background: rgba(255, 159, 26, .08); margin-bottom: 12px; } .notice.fair b { color: #ffb347; }
.pige-grid.done .pige-box { display: grid; place-items: center; cursor: default; } .pige-grid.done .pige-box:hover { transform: none; box-shadow: none; }
.pige-reveal { font-size: 17px; } .pige-num { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; margin: 0 4px; border-radius: 12px; background: #ffd76a; color: #1a1408; font-size: 20px; box-shadow: 0 0 22px rgba(255, 215, 106, .5); }

/* Bouton « Haut » complètement à droite du titre */
h2:has(> .to-top) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .to-top { float: none; margin-left: auto; }
/* La Cup où l'équipe est inscrite : contour de feu */
.div-card.fire { opacity: 1; border-color: #ff8a1f; animation: fireGlow 1.3s ease-in-out infinite alternate; }
.fire-tag { display: inline-block; margin-top: 6px; padding: 5px 10px; border-radius: 999px; font-style: normal; font-weight: 700; font-size: 13px; color: #1a0b00; background: linear-gradient(90deg, #ffd24a, #ff7a18, #ff3d00); }
@keyframes fireGlow { from { box-shadow: 0 0 0 2px #ff9a1f, 0 0 14px #ff5a00, 0 0 30px rgba(255, 80, 0, .35); } to { box-shadow: 0 0 0 2px #ffd24a, 0 -4px 26px #ff7a00, 0 -8px 60px rgba(255, 60, 0, .6); } }
.elite-lead { font-size: 17px; font-weight: 600; }
/* Bandeau « en direct » sur tout le site */
.live-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; padding: 10px 16px; color: #1a0b00; text-decoration: none; font-weight: 800; letter-spacing: .03em; background: linear-gradient(90deg, #ff7a18, #ffb347, #ff7a18); background-size: 200% 100%; animation: liveSlide 3s linear infinite, liveFlash 1.1s ease-in-out infinite; position: relative; z-index: 60; }
.live-bar span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; } .live-bar span i { width: 11px; height: 11px; border-radius: 50%; background: #d40000; box-shadow: 0 0 0 0 rgba(212, 0, 0, .7); animation: livePulse 1.1s ease-out infinite; }
.live-bar b { padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .82); color: #fff; font-size: 13px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--dc); } .live-bar b em { font-style: normal; font-weight: 500; color: #ffd9a8; }
.live-bar u { text-decoration: none; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: #1a0b00; color: #ffb347; }
.live-bar.live-m4 { animation: none; background: linear-gradient(90deg, #3a2a12, #5a3d14); color: #ffd9a8; } .live-bar.live-m4 span i { animation: none; background: #ffd76a; }
@keyframes liveSlide { to { background-position: 200% 0; } } @keyframes liveFlash { 50% { filter: brightness(1.25) saturate(1.2); } } @keyframes livePulse { to { box-shadow: 0 0 0 12px rgba(212, 0, 0, 0); } }
.dyn-obs .live-bar { display: none !important; }
@media (prefers-reduced-motion: reduce) { .live-bar, .live-bar span i, .div-card.fire { animation: none; } }

/* Diffusions en direct */
.nav-live { display: inline-flex; align-items: center; gap: 6px; } .nav-live i { width: 8px; height: 8px; border-radius: 50%; background: #e5112b; animation: livePulse 1.4s ease-out infinite; }
.lv-page { max-width: 1280px; margin: 0 auto; padding: 0 20px 80px; }
.lv-hero { text-align: center; padding: 56px 16px 34px; background: radial-gradient(800px 340px at 50% -10%, rgba(145, 70, 255, .34), transparent 70%); border-radius: 0 0 32px 32px; }
.lv-hero h1 { margin: 16px 0 8px; font-size: clamp(32px, 5.5vw, 56px); line-height: 1.05; } .lv-hero > p { max-width: 700px; margin: 0 auto; color: var(--muted); font-size: 17px; }
.lv-facts { list-style: none; display: flex; gap: 26px; justify-content: center; margin: 20px 0 0; padding: 0; color: var(--muted); } .lv-facts b { color: var(--text); font-size: 20px; margin-right: 4px; }
.lv-live { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: #e5112b; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; } .lv-live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: tuHide 1.4s ease-in-out infinite; }
.lv-live.big, .lv-live.inline { position: static; } .lv-live.big { font-size: 14px; padding: 6px 14px; border-radius: 999px; } .lv-live.inline { vertical-align: middle; font-size: 11px; margin-right: 6px; }
.lv-stage { margin: 26px 0 8px; padding: 14px; border-radius: 26px; background: linear-gradient(135deg, #9146ff, #ff5ca8 50%, #ffb347); box-shadow: 0 20px 70px rgba(145, 70, 255, .3); scroll-margin-top: 90px; }
.lv-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; } .lv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lv-now { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(10, 9, 12, .88); } .lv-now > div:nth-child(2) { flex: 1; min-width: 200px; } .lv-now h2 { margin: 0; font-size: 22px; } .lv-now p { margin: 2px 0 0; color: var(--muted); }
.lv-h { margin: 34px 0 14px; font-size: 24px; } .lv-h small { color: var(--muted); font-size: 14px; font-weight: 400; }
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.lv-card { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; } .lv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.lv-card.live { border-color: #e5112b; box-shadow: 0 0 0 1px #e5112b, 0 0 30px rgba(229, 17, 43, .25); } .lv-card.on { outline: 2px solid #9146ff; }
.lv-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #1b1022, #0d1524); } .lv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-view { position: absolute; right: 10px; top: 10px; display: inline-flex; gap: 5px; align-items: center; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; font-weight: 600; }
.lv-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; color: #fff; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .15s; } .lv-thumb:hover .lv-play { opacity: 1; }
.lv-who { display: flex; gap: 10px; align-items: center; min-width: 0; } .lv-who div { display: grid; min-width: 0; } .lv-who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-title { margin: 0; font-weight: 600; line-height: 1.3; } .lv-meta { margin: 0; color: var(--muted); font-size: 13px; }
.lv-btns { display: flex; flex-wrap: wrap; gap: 8px; } .lv-btns .btn { padding: 7px 12px; font-size: 13px; }
.lv-matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; } .lv-match { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--dc); } .lv-match div { flex: 1; display: grid; min-width: 0; } .lv-match small { color: var(--muted); }
.lv-note { margin-top: 26px; text-align: center; }
.pf-live .lv-thumb { margin: 4px 0 10px; } .pf-live.on { box-shadow: 0 0 0 1px #e5112b, 0 0 30px rgba(229, 17, 43, .28); } .pf-live.on h2 { color: #ff6b7d; }
.wg-preview { display: grid; place-items: center; padding: 26px; border-radius: 16px; background: repeating-conic-gradient(#1a171e 0 25%, #131116 0 50%) 0 0 / 24px 24px; } .wg-preview img { max-width: 100%; height: auto; }

/* Infolettre */
.nl-page { max-width: 860px; margin: 0 auto; padding: 0 18px 80px; }
.nl-issue { margin-top: 26px; border-radius: 28px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
.nl-head { padding: 54px 40px 34px; text-align: center; background: radial-gradient(700px 300px at 50% -20%, rgba(181, 101, 216, .45), transparent 70%), radial-gradient(400px 220px at 90% 10%, rgba(74, 163, 255, .22), transparent 70%), linear-gradient(180deg, #1b1022, var(--panel)); }
.nl-month { display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0b0a0c; background: linear-gradient(90deg, #ffd76a, #ff9f1a); }
.nl-head h1 { margin: 18px 0 14px; font-size: clamp(30px, 5.5vw, 50px); line-height: 1.08; } .nl-intro { max-width: 640px; margin: 0 auto; color: #d9d2e2; font-size: 18px; line-height: 1.6; } .nl-intro p { margin: 0 0 12px; }
.nl-draft { display: block; margin-bottom: 12px; color: #ffb347; font-style: normal; font-size: 14px; }
.nl-sections { display: grid; gap: 16px; padding: 12px 28px 28px; }
.nl-sec { position: relative; padding: 24px 26px 24px 30px; border-radius: 20px; background: var(--panel-2); border-left: 5px solid var(--c); } .nl-sec h2 { margin: 2px 0 10px; font-size: 24px; } .nl-sec p { margin: 0 0 12px; line-height: 1.65; color: #e3dcec; } .nl-sec .btn { margin-top: 4px; border-color: var(--c); }
.nl-n { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--c); }
.nl-foot { padding: 26px 28px 34px; border-top: 1px solid var(--line); } .nl-sub { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; text-align: center; } .nl-sub span { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.nl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .nl-list a { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; } .nl-list a:hover { border-color: var(--accent); } .nl-list small { color: var(--accent); font-weight: 600; } .nl-list em { color: #ffb347; font-style: normal; font-size: 12px; }
.nl-admin { text-align: center; margin-top: 26px; } .nl-ed-sec { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 10px 0; display: grid; gap: 8px; } .nl-ed-actions { margin: 16px 0; }
@media (max-width: 600px) { .nl-head { padding: 38px 20px 24px; } .nl-sections { padding: 8px 14px 18px; } }

/* Disponibilités repliées ou fermées */
details.slot-done > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } details.slot-done > summary::-webkit-details-marker { display: none; } details.slot-done > summary .btn { margin-left: auto; padding: 5px 12px; font-size: 13px; } details.slot-done[open] > summary { margin-bottom: 12px; } details.slot-done[open] > summary .btn { display: none; }

/* Bouton « Haut » : pastille dégradée */
.to-top { display: inline-flex; align-items: center; gap: 4px; padding: 5px 13px; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: #e9d7f5; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(#141217, #141217) padding-box, linear-gradient(120deg, #b565d8, #4aa3ff) border-box; text-decoration: none; transition: transform .15s, box-shadow .15s, color .15s; }
.to-top:hover { color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(181, 101, 216, .4); }
/* Vote des joueurs principaux : une rangée de cases au lieu d'une liste */
.voters-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.voters-row .link-row { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 10px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); margin: 0; }
.voters-row .link-txt { display: grid; gap: 2px; justify-items: center; min-width: 0; } .voters-row .link-txt b { display: grid; justify-items: center; gap: 2px; overflow-wrap: anywhere; }

/* Dernière chance de s'inscrire pendant un événement démarré */
.live-bar s { text-decoration: none; padding: 3px 12px; border-radius: 999px; background: #1a0b00; color: #ffe1b0; font-size: 13px; font-weight: 700; } .live-bar s b { background: none; box-shadow: none; padding: 0; color: #fff; font-variant-numeric: tabular-nums; }
.late-chance { display: inline-block; margin-top: 6px; padding: 5px 10px; border-radius: 10px; background: rgba(255, 159, 26, .14); color: #ffb347 !important; font-weight: 600; } .late-chance b { color: #fff; font-variant-numeric: tabular-nums; }

/* Événement en direct */
.evt-page { max-width: 1240px; margin: 0 auto; padding: 0 20px 80px; }
.evt-hero { text-align: center; padding: 44px 16px 22px; background: radial-gradient(800px 300px at 50% -20%, color-mix(in srgb, var(--dc) 40%, transparent), transparent 70%); } .evt-hero h1 { margin: 14px 0 8px; font-size: clamp(30px, 5vw, 52px); }
.evt-stay { display: inline-block; margin: 0; padding: 8px 16px; border-radius: 999px; background: rgba(255, 159, 26, .14); border: 1px solid rgba(255, 159, 26, .5); color: #ffcf8a; font-weight: 600; }
.evt-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 18px 0; }
.evt-tab { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); border-bottom: 4px solid var(--dc); color: var(--text); text-decoration: none; opacity: .7; } .evt-tab.on { opacity: 1; box-shadow: 0 0 0 2px var(--dc), 0 10px 30px color-mix(in srgb, var(--dc) 25%, transparent); } .evt-tab:hover { opacity: 1; }
.evt-tab small { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; } .evt-tab.live small i { width: 8px; height: 8px; border-radius: 50%; background: #e5112b; animation: livePulse 1.3s ease-out infinite; }
.evt-panel { margin: 16px 0; padding: 22px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); } .evt-panel h2 { margin: 0 0 14px; font-size: 22px; } .evt-panel h2 small { color: var(--muted); font-size: 14px; font-weight: 400; margin-left: 6px; }
.evt-state { border-top: 4px solid var(--dc); } .evt-me { margin: 14px 0 0; }
.evt-clocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .evt-clock { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); } .evt-clock small { color: var(--muted); } .evt-clock b { font-size: 26px; font-variant-numeric: tabular-nums; } .evt-clock em { font-style: normal; color: #ffb347; font-weight: 600; font-variant-numeric: tabular-nums; } .evt-clock.past { opacity: .55; } .evt-clock.past em { color: var(--muted); font-weight: 400; }
.evt-teams { display: flex; flex-wrap: wrap; gap: 12px; } .evt-teams a { color: inherit; text-decoration: none; } .evt-team { display: grid; justify-items: center; gap: 4px; width: 70px; } .evt-team img, .evt-team i { border-radius: 16px; object-fit: cover; background: linear-gradient(135deg, #2a1836, #14213a); border: 1px solid var(--line); } .evt-team i { display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; } .evt-team small { color: var(--muted); font-size: 11px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-duels { display: grid; gap: 12px; } .evt-duel { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; padding: 10px; border-radius: 18px; background: var(--panel-2); border: 1px solid var(--line); } .evt-duel.mine { box-shadow: 0 0 0 2px #ffd76a, 0 0 30px rgba(255, 215, 106, .3); } .evt-duel.solo { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.evt-side { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 120px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #2a1836, #14213a) center / cover; text-align: center; } .evt-side img { border-radius: 14px; } .evt-side b { font-size: 20px; } .evt-side span { font-weight: 600; } .evt-side.lost { opacity: .4; filter: grayscale(1); } .evt-side.won { box-shadow: inset 0 0 0 2px #2ecc71; } .evt-side em { font-style: normal; padding: 2px 10px; border-radius: 999px; background: #2ecc71; color: #06210f; font-weight: 700; font-size: 12px; }
.evt-vs { align-self: center; font-size: 28px; font-weight: 900; font-style: italic; background: linear-gradient(180deg, #ffd24a, #ff3d00); -webkit-background-clip: text; background-clip: text; color: transparent; } .evt-no { position: absolute; left: -8px; top: -8px; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; background: #ffd76a; color: #1a1408; font-weight: 800; z-index: 1; } .evt-when { grid-column: 1 / -1; text-align: center; color: var(--muted); }
.evt-wait { text-align: center; } .evt-wait b { font-size: 20px; font-variant-numeric: tabular-nums; } .evt-champ { text-align: center; } .evt-champ > span { font-size: 44px; }
.evt-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } .evt-cols .evt-panel { margin: 0; }
.evt-subs { display: grid; gap: 6px; max-height: 320px; overflow: auto; } .evt-subs a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); color: var(--text); text-decoration: none; } .evt-subs span { display: grid; min-width: 0; } .evt-subs small { color: var(--muted); }
.evt-foot { text-align: center; margin-top: 22px; }
@media (max-width: 860px) { .evt-cols { grid-template-columns: 1fr; } .evt-duel { grid-template-columns: 1fr; } .evt-vs { justify-self: center; } }
/* Fenêtre du participant et pastille réduite */
.live-modal { border: 2px solid var(--dc); box-shadow: 0 0 60px color-mix(in srgb, var(--dc) 45%, transparent); max-width: 560px; } .live-modal-top { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; font-size: 18px; } .live-modal h3 { margin: 0 0 10px; } .live-modal-list { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; } .live-modal-list b { font-variant-numeric: tabular-nums; }
.live-chip { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: inline-flex; gap: 8px; align-items: center; padding: 11px 16px; border-radius: 999px; background: #1a0b00; color: #ffcf8a; font-weight: 700; text-decoration: none; border: 2px solid #ff9f1a; box-shadow: 0 8px 30px rgba(255, 120, 0, .4); animation: liveFlash 1.4s ease-in-out infinite; } .live-chip[hidden] { display: none; } .live-chip i { width: 10px; height: 10px; border-radius: 50%; background: #e5112b; animation: livePulse 1.2s ease-out infinite; }
.dyn-obs .live-chip, .dyn-obs .live-modal { display: none !important; }

/* Forfait : choix de la Cup du billet */
.cup-choice { display: grid; gap: 8px; margin: 12px 0 4px; } .cup-choice small { color: var(--muted); } .cup-choice > div { display: flex; flex-wrap: wrap; gap: 6px; } .cup-choice .chip { text-decoration: none; color: var(--text); } .cup-choice .chip b { margin-left: 4px; color: #ffd76a; } .cup-choice .chip-ok { box-shadow: 0 0 0 2px var(--accent); }

/* Panneau « À faire maintenant » de l'administrateur */
.evt-admin { border: 2px solid #ff9f1a; background: linear-gradient(180deg, rgba(255, 159, 26, .08), var(--panel)); }
.evt-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .evt-todo li { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.evt-todo li > i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #26232a; font-style: normal; font-weight: 700; } .evt-todo li > div { flex: 1; min-width: 220px; display: grid; gap: 2px; } .evt-todo small { color: var(--muted); }
.evt-todo li > span { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; } .evt-todo form.inline { display: inline-flex; gap: 6px; align-items: center; } .evt-todo input[name="code"] { width: 150px; } .evt-todo .btn { padding: 7px 12px; font-size: 13px; }
.evt-todo li.now { border-color: #ff9f1a; box-shadow: 0 0 18px rgba(255, 159, 26, .2); } .evt-todo li.now > i { background: #ff9f1a; color: #1a0b00; } .evt-todo li.done { opacity: .6; } .evt-todo li.done > i { background: var(--ok); color: #06210f; }

/* Événement : barre du son, enregistreurs, pastille en bouton */
.evt-sound { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px dashed var(--line); font-size: 14px; } .evt-sound span { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; } .evt-sound [hidden] { display: none; }
.evt-rec { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); } .evt-rec .btn { padding: 6px 12px; font-size: 13px; }
button.live-chip { cursor: pointer; font: inherit; font-weight: 700; }
.snd-table td { vertical-align: top; } .snd-table audio { display: block; width: 220px; height: 34px; margin-bottom: 6px; } .snd-table form.inline { display: flex; gap: 6px; align-items: center; margin: 4px 0; } .snd-table input[type="file"] { max-width: 190px; font-size: 12px; }

/* Événement : demandes de remplaçant, format des séries */
.evt-ask { border: 2px solid #ffd76a; } .evt-ask-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; } .evt-ask-row form { display: inline-flex; gap: 8px; }
.evt-sub { display: flex; gap: 8px; align-items: center; } .evt-sub > a { flex: 1; min-width: 0; } .evt-sub .btn { padding: 6px 12px; font-size: 13px; } .evt-sub em { font-style: normal; font-size: 12px; color: var(--muted); }
.evt-bo { padding: 2px 9px; border-radius: 8px; background: #ffd76a; color: #1a1408; font-size: 13px; }

/* Trouver des joueurs */
.lfg-page { max-width: 1240px; margin: 0 auto; padding: 0 16px 80px; }
.lfg-hero { text-align: center; padding: 40px 12px 18px; background: radial-gradient(700px 260px at 50% -20%, rgba(74, 163, 255, .28), transparent 70%); } .lfg-hero h1 { margin: 0 0 8px; font-size: clamp(30px, 5vw, 50px); } .lfg-hero p { margin: 0 auto; max-width: 640px; color: var(--muted); font-size: 17px; }
.lfg-cols { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px; }
.lfg-box { display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); position: sticky; top: 84px; } .lfg-box h2 { margin: 0; font-size: 22px; display: flex; gap: 8px; align-items: center; } .lfg-box.mine { border-color: var(--ok); } .lfg-box p { margin: 0; color: var(--muted); }
.lfg-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; } .lfg-form legend { padding: 0; font-weight: 600; font-size: 14px; } .lfg-form legend small { color: var(--muted); font-weight: 400; }
.lfg-pick { display: flex; flex-wrap: wrap; gap: 6px; } .lfg-pick label { cursor: pointer; } .lfg-pick input { position: absolute; opacity: 0; pointer-events: none; } .lfg-pick span { display: inline-block; padding: 9px 13px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.lfg-pick input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; } .lfg-pick input:focus-visible + span { outline: 2px solid #fff; }
.lfg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lfg-two label, .lfg-form > label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.lfg-h { margin: 0 0 4px; font-size: 22px; } .lfg-h small { color: var(--muted); font-weight: 400; font-size: 15px; }
.lfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.lfg-card { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); } .lfg-card.solo { max-width: 640px; margin: 22px auto 0; padding: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } .lfg-card.closed { opacity: .6; } .lfg-box .lfg-card { padding: 0; border: 0; background: none; }
.lfg-card header { display: flex; gap: 10px; align-items: center; justify-content: space-between; } .lfg-who { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; min-width: 0; } .lfg-who span { display: grid; min-width: 0; } .lfg-who small { color: var(--muted); }
.lfg-mode { flex: none; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #26232a; } .lfg-mode.m-solo { background: #ffd76a; color: #1a1408; } .lfg-mode.m-flex { background: #4aa3ff; color: #06182b; } .lfg-mode.m-aram { background: #2ecc71; color: #06210f; } .lfg-mode.m-normal { background: #b565d8; color: #fff; }
.lfg-ask { margin: 0; font-size: 16px; } .lfg-note { margin: 0; color: var(--muted); font-style: italic; }
.lfg-roles { display: flex; flex-wrap: wrap; gap: 6px; } .lfg-role { display: inline-flex; gap: 6px; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; } button.lfg-role { cursor: pointer; } button.lfg-role:hover { border-color: var(--accent); } .lfg-role b { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #26232a; font-size: 12px; text-align: center; } .lfg-role.has b { background: var(--ok); color: #06210f; } .lfg-role.me { background: var(--ok); border-color: var(--ok); color: #06210f; }
.lfg-list summary { cursor: pointer; font-weight: 600; color: var(--ok); } .lfg-list > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; } .lfg-list em { font-style: normal; font-size: 13px; color: var(--muted); min-width: 90px; } .lfg-list .chip { text-decoration: none; color: var(--text); }
.lfg-card footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); } .lfg-card footer .btn { padding: 6px 11px; font-size: 13px; } .lfg-back { text-align: center; margin-top: 18px; }
@media (max-width: 860px) { .lfg-cols { grid-template-columns: 1fr; } .lfg-box { position: static; } }

/* Événement : titre et mots-clés YouTube pour celui qui enregistre */
.evt-yt { grid-column: 1 / -1; display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(229, 17, 43, .08); border: 1px solid rgba(229, 17, 43, .4); font-size: 13px; } .evt-yt > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .evt-yt small { color: var(--muted); } .evt-yt > div > small { min-width: 70px; }
.evt-yt code { flex: 1; min-width: 200px; padding: 7px 10px; border-radius: 8px; background: #0f0d12; border: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; } .evt-yt .btn { padding: 5px 10px; font-size: 12px; }

.evt-rec-form { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; } .evt-rec-form label { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; } .evt-rec em { font-style: normal; color: var(--muted); }

/* Événement : liens du match, vérification des joueurs */
.evt-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .evt-extra:empty { display: none; } .evt-extra .btn { padding: 7px 14px; font-size: 13px; } .evt-extra .chip { text-decoration: none; color: var(--text); }
.evt-check { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); } .evt-check > div { display: flex; flex-wrap: wrap; gap: 6px; } .evt-check button.chip { cursor: pointer; font: inherit; font-size: 13px; color: var(--text); border: 1px solid var(--line); } .evt-admin h3 { margin: 16px 0 6px; font-size: 16px; }

/* Souhaits de skin ou de champion */
.wish-list { display: grid; gap: 10px; } .wish-list.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wish { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); } .wish.given { border-color: var(--ok); } .wish > img { border-radius: 12px; flex: none; }
.wish > div:nth-of-type(1) { flex: 1; min-width: 0; display: grid; gap: 2px; } .wish small, .wish em { color: var(--muted); font-size: 13px; } .wish-who { display: inline-flex; gap: 6px; align-items: center; color: var(--text); text-decoration: none; font-size: 13px; margin-top: 2px; }
.wish-acts { display: grid; gap: 6px; justify-items: end; } .wish-acts form { display: flex; gap: 6px; } .wish .btn { padding: 7px 12px; font-size: 13px; white-space: nowrap; } .wish.mini { padding: 8px; } .wish.mini > img { border-radius: 10px; }
.lfg-box h2 small { color: var(--muted); font-weight: 400; font-size: 14px; }

/* Tournoi d'organisation : gabarits de règles et d'inscription, tableau double */
.oc-tpl { border: 0; padding: 0; margin: 6px 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; } .oc-tpl legend { grid-column: 1 / -1; padding: 0 0 6px; font-weight: 700; font-size: 16px; }
.oc-tpl label { cursor: pointer; display: block; } .oc-tpl input { position: absolute; opacity: 0; pointer-events: none; } .oc-tpl span { display: grid; gap: 4px; height: 100%; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); } .oc-tpl small { color: var(--muted); line-height: 1.4; }
.oc-tpl input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 20px rgba(181, 101, 216, .25); } .oc-tpl input:focus-visible + span { outline: 2px solid #fff; }
.oc-round.k-W h3 { color: #2ecc71; } .oc-round.k-L h3 { color: #ff9f1a; } .oc-round.k-GF h3 { color: #ffd76a; }

/* Palmarès en compétition sur le profil */
.rec-row { display: grid; gap: 2px; padding: 10px 12px; margin: 6px 0; border-radius: 12px; background: rgba(255, 255, 255, .04); color: inherit; text-decoration: none; } a.rec-row:hover { background: rgba(255, 255, 255, .08); } .rec-row small { color: var(--muted); }

/* J'aime sur un profil */
.tk-like i { color: #ff5c8a; } .tk-like.on i { color: #fff; background: #ff3d6e; } .tk-rail form { display: contents; } button.tk-btn { cursor: pointer; font: inherit; background: none; border: 0; color: inherit; }
.pf-like-form { display: inline; } .pf-like { margin-left: 8px; cursor: pointer; } .pf-like.on { background: #ff3d6e; border-color: #ff3d6e; color: #fff; } button.pf-like { font: inherit; }
/* Barre de droite d'un profil animé : cachée, elle revient au survol */
@media (hover: hover) { body.tk-auto .tk-rail { opacity: 0; translate: 46px 0; transition: opacity .25s, translate .25s; } body.tk-auto .tk-rail::before { content: ''; position: absolute; inset: -30px -14px -30px -70px; z-index: -1; }
  body.tk-auto .tk-rail:hover, body.tk-auto .tk-rail:focus-within, body.tk-auto.tk-show .tk-rail { opacity: 1; translate: 0 0; } }
.tk-hint { position: fixed; right: 92px; top: 50%; transform: translateY(-50%); z-index: 57; max-width: 240px; padding: 12px 14px; border-radius: 14px; background: #ffd76a; color: #1a1408; font-weight: 600; font-size: 14px; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); } .tk-hint[hidden] { display: none; }
/* Vérification : ce que Discord rapporte */
.vc { display: inline-flex; gap: 4px; margin-left: 4px; } .vc i { font-style: normal; font-size: 11px; padding: 1px 5px; border-radius: 6px; background: rgba(255, 255, 255, .08); } .vc i.ok { background: rgba(46, 204, 113, .25); } .vc i.no { background: rgba(231, 76, 60, .25); }

/* Rangée de partage */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 18px 0; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); } .share-row b { margin-right: 4px; } .share-row .btn { padding: 7px 13px; font-size: 13px; }
.share-row .sh-fb { border-color: #1877f2; color: #8fc1ff; } .share-row .sh-rd { border-color: #ff4500; color: #ff9a73; } .share-row .sh-ma { border-color: #6364ff; color: #b3b4ff; } .share-row .sh-x { border-color: #71767b; }

/* Messages laissés sur un mur */
.wc-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.wc { position: absolute; max-width: 46%; padding: 6px 12px; border-radius: 14px 14px 14px 4px; background: rgba(10, 9, 12, .82); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: clamp(12px, 1.25vw, 18px); line-height: 1.25; box-shadow: 0 6px 22px rgba(0, 0, 0, .5); animation: wcIn .25s ease-out; }
.wc[hidden] { display: none; } .wc b { display: block; font-weight: 600; overflow-wrap: anywhere; } .wc small { display: block; font-size: .7em; color: #c9c2d1; } .wc.mine { border-color: #ffd76a; } .wc.liked { border-color: #ff5c8a; box-shadow: 0 0 18px rgba(255, 92, 138, .5); }
@keyframes wcIn { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.tk-cmt i { font-size: 20px; }
.wc-place { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 90; display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-radius: 999px; background: #ffd76a; color: #1a1408; font-weight: 700; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); } .wc-place[hidden] { display: none; }
body.wc-placing [data-dyn-stage] { cursor: crosshair; outline: 3px dashed #ffd76a; outline-offset: -3px; } body.wc-placing [data-dyn-stage] * { pointer-events: none; }
.wc-modal { max-width: 560px; } .wc-modal h3 small { color: var(--muted); font-weight: 400; } .wc-modal form { display: grid; gap: 10px; } .wc-modal label { display: grid; gap: 4px; }
.wc-items { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; max-height: 46vh; overflow: auto; } .wc-items li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); } .wc-items li > span { flex: 1; min-width: 0; display: grid; } .wc-items small { color: var(--muted); } .wc-items form { display: inline; } .wc-items .btn { padding: 5px 10px; font-size: 13px; }
.dyn-obs .wc-layer, .dyn-obs .wc-place { display: none !important; }

/* Sélection des champions : à qui le tour, centré, très gros, toujours visible en haut */
.dr-head .dr-status { flex: 1 1 100%; order: 5; position: sticky; top: 8px; z-index: 40; text-align: center; font-size: clamp(22px, 3.4vw, 46px); font-weight: 600; line-height: 1.2; padding: 18px 20px; border-radius: 20px; border-width: 3px; background: rgba(12, 11, 14, .94); box-shadow: 0 12px 40px rgba(0, 0, 0, .55); }
.dr-head .dr-status b { font-weight: 800; } .dr-head .dr-status em { font-style: normal; padding: 2px 14px; border-radius: 999px; background: #2ecc71; color: #06210f; font-weight: 800; }
.dr-head .dr-status:has(.dr-t-blue) { border-color: var(--b); box-shadow: 0 0 0 1px var(--b), 0 0 44px color-mix(in srgb, var(--b) 45%, transparent); }
.dr-head .dr-status:has(.dr-t-red) { border-color: var(--r); box-shadow: 0 0 0 1px var(--r), 0 0 44px color-mix(in srgb, var(--r) 45%, transparent); }
.dr-head .dr-status .dr-clock { display: inline-block; min-width: 1.6em; font-size: 1.5em; font-weight: 900; vertical-align: middle; } .dr-head .dr-status .dr-clock.low { animation: tuBeat .6s ease-in-out infinite; }

/* Sélection des champions : champion retenu et gros bouton LOCK IN */
.dr-lockbar { position: sticky; top: 108px; z-index: 39; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 10px 0; padding: 12px 16px; border-radius: 18px; background: rgba(12, 11, 14, .95); border: 1px dashed var(--line); color: var(--muted); }
.dr-lockbar.on { border: 3px solid #ffd76a; color: var(--text); box-shadow: 0 0 40px rgba(255, 215, 106, .35); } .dr-lockbar img { border-radius: 14px; } .dr-lockbar span { flex: 1; min-width: 180px; display: grid; } .dr-lockbar small { color: var(--muted); font-size: 14px; } .dr-lockbar b { font-size: clamp(24px, 3vw, 38px); line-height: 1.1; } .dr-lockbar em { font-style: normal; font-size: 13px; color: var(--muted); }
.dr-lock { cursor: pointer; padding: 18px 34px; border: 0; border-radius: 16px; font: inherit; font-size: clamp(22px, 2.6vw, 34px); font-weight: 900; letter-spacing: .06em; color: #1a1408; background: linear-gradient(180deg, #ffe58a, #ffb300); box-shadow: 0 8px 0 #9a6a00, 0 14px 30px rgba(0, 0, 0, .5); animation: tuBeat 1s ease-in-out infinite; } .dr-lock:hover { filter: brightness(1.1); } .dr-lock:active { transform: translateY(6px); box-shadow: 0 2px 0 #9a6a00; }
.dr-grid button.held { outline: 4px solid #ffd76a; outline-offset: 2px; box-shadow: 0 0 24px rgba(255, 215, 106, .7); transform: scale(1.06); z-index: 2; }

/* Code de la partie, côté bleu ou rouge */
.code-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; padding: 14px 16px; border-radius: 16px; background: rgba(255, 215, 106, .08); border: 2px solid #ffd76a; } .code-box small { flex: 1 1 100%; color: #f3e3b3; font-weight: 600; }
.code-box code { flex: 1; min-width: 200px; padding: 12px 14px; border-radius: 10px; background: #0b0a0c; font: 700 18px/1.3 ui-monospace, monospace; overflow-wrap: anywhere; user-select: all; } .code-box.big code { font-size: clamp(18px, 2.6vw, 30px); }
.side-line { font-size: 18px; } .side-line b { padding: 3px 14px; border-radius: 999px; color: #fff; letter-spacing: .06em; } .side-line.side-blue b { background: #3d8bfd; } .side-line.side-red b { background: #ef5350; } .side-line small { color: var(--muted); font-size: 13px; }
.evt-mine { border: 2px solid #ffd76a; } .evt-mine.side-blue { border-color: #3d8bfd; box-shadow: 0 0 34px rgba(61, 139, 253, .25); } .evt-mine.side-red { border-color: #ef5350; box-shadow: 0 0 34px rgba(239, 83, 80, .25); }
/* Liste des matchs à enregistrer : plus compacte */
.cup-need-list form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .cup-need-list span { font-size: 12px; color: var(--muted); } .cup-need-list .btn { padding: 4px 9px; font-size: 11.5px; }

/* Onglet « Événement » de la barre du haut */
.nav-event { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, #ff7a18, #ffb347); color: #1a0b00 !important; font-weight: 800; animation: liveFlash 1.4s ease-in-out infinite; } .nav-event i { width: 9px; height: 9px; border-radius: 50%; background: #d40000; animation: livePulse 1.2s ease-out infinite; }
/* Ce que l'équipe cherche */
.tm-needs { display: grid; gap: 8px; margin: 12px 0; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid #ff9f1a; } .tm-needs.full { border-left-color: var(--ok); } .tm-needs > b { font-size: 18px; } .tm-needs > span { color: var(--muted); } .tm-needs .pills small { color: var(--muted); align-self: center; }
.tm-needs-form summary { cursor: pointer; color: var(--accent); } .tm-needs-form form { display: grid; gap: 10px; margin-top: 10px; }
.lfg-teams-h { margin-top: 34px; } .lfg-team { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid #ff9f1a; color: var(--text); text-decoration: none; } .lfg-team.full { border-left-color: var(--ok); } .lfg-team:hover { border-color: var(--accent); }
.lfg-team img, .lfg-team i { flex: none; width: 46px; height: 46px; border-radius: 12px; object-fit: cover; background: var(--panel-2); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; } .lfg-team span { display: grid; gap: 2px; min-width: 0; } .lfg-team small { color: var(--muted); } .lfg-team em { font-style: normal; font-size: 13px; color: #ffcf8a; }

/* Sélection des champions : la grosse ligne reste sous le menu du site, pas dessous */
.dr-head .dr-status { top: 104px; } .dr-lockbar { top: 212px; }

/* Événement : dons, invité, invitation */
.evt-don { border: 2px solid #ffd76a; } .don-form { display: grid; gap: 12px; margin-top: 14px; } .don-form input[type="number"] { width: 110px; } .don-form > label { display: grid; gap: 4px; max-width: 420px; } .don-last { margin-top: 12px; }
.evt-guest { border: 2px solid var(--accent); background: linear-gradient(135deg, rgba(181, 101, 216, .14), var(--panel)); } .inv-link { display: block; padding: 10px 12px; border-radius: 10px; background: #0f0d12; border: 1px solid var(--line); overflow-wrap: anywhere; user-select: all; }

.don-warn { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid #ffb347; background: rgba(255, 179, 71, .12); line-height: 1.5; } .don-form select { max-width: 420px; }
.evt-watch { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(80, 200, 120, .1); } .evt-rec .chip { white-space: normal; }

.evt-cheer { display: grid; gap: 4px; margin: 0 0 10px; padding: 16px 20px; border-radius: 16px; text-decoration: none; color: #fff; background: linear-gradient(110deg, #b565d8, #e8553a 55%, #ffb347); background-size: 200% 100%; animation: cheer 6s ease-in-out infinite alternate; }
.evt-cheer b { font-size: 1.25rem; } .evt-cheer u { font-weight: 700; } @keyframes cheer { to { background-position: 100% 0; } }
.evt-cheer-wall { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
@media (prefers-reduced-motion: reduce) { .evt-cheer { animation: none; } }

.evt-panel, .evt-cheer, .evt-cheer-wall { min-width: 0; max-width: 100%; } .evt-panel select, .evt-panel input { max-width: 100%; } .evt-duel { scroll-margin-top: 120px; }

/* Fenêtre du participant : centrée, banderole EN DIRECT, émojis qui dansent, bannières équipe VS équipe */
dialog.lm { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 24px); width: min(640px, calc(100vw - 24px)); max-width: none; padding: 0; overflow: auto; border-radius: 24px; border: 2px solid var(--dc, #ff9f1a); background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--dc, #ff9f1a) 26%, #17131c), #121014 70%); color: #f4f1f6; box-shadow: 0 0 80px color-mix(in srgb, var(--dc, #ff9f1a) 50%, transparent); text-align: center; }
dialog.lm::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
.lm-in { padding: 0 22px 22px; display: grid; gap: 14px; justify-items: center; }
.lm-ribbon { width: calc(100% + 44px); margin: 0 -22px; padding: 14px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(90deg, #e5112b, var(--dc, #ff9f1a), #e5112b); background-size: 200% 100%; animation: lm-slide 5s linear infinite; }
.lm-ribbon > div { display: grid; gap: 4px; justify-items: center; } .lm-ribbon b { font-size: 20px; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.lm-emo { font-size: 30px; display: inline-block; animation: lm-bounce 1.6s ease-in-out infinite; } .lm-emo.r, .lm-emo.r2 { animation-name: lm-bounce-r; } .lm-emo.l2, .lm-emo.r2 { animation-delay: .4s; font-size: 24px; }
@keyframes lm-bounce { 0%, 100% { transform: translateY(7px) rotate(-18deg); } 50% { transform: translateY(-9px) rotate(18deg); } }
@keyframes lm-bounce-r { 0%, 100% { transform: translateY(-9px) rotate(18deg); } 50% { transform: translateY(7px) rotate(-18deg); } }
@keyframes lm-slide { to { background-position: 200% 0; } }
dialog.lm h3 { margin: 4px 0 0; font-size: 24px; }
.lm-duel { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; } .lm-duel.solo { grid-template-columns: minmax(0, 320px); justify-content: center; }
.lm-team { min-width: 0; min-height: 132px; padding: 14px 10px; border-radius: 16px; border: 1px solid #3a3541; background: linear-gradient(160deg, #2a2140, #171a2e) center / cover; display: grid; gap: 4px; align-content: center; justify-items: center; }
.lm-team.me { border: 2px solid var(--dc, #ff9f1a); box-shadow: 0 0 22px color-mix(in srgb, var(--dc, #ff9f1a) 45%, transparent); }
.lm-team img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; } .lm-team b { font-size: 22px; } .lm-team span { font-size: 14px; overflow-wrap: anywhere; } .lm-team em { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--dc, #ff9f1a); color: #14111a; }
.lm-vs { align-self: center; font-size: 30px; font-weight: 900; font-style: italic; color: #ffb347; text-shadow: 0 0 18px rgba(255, 179, 71, .7); animation: lm-pulse 1.4s ease-in-out infinite; } @keyframes lm-pulse { 50% { transform: scale(1.18); } }
dialog.lm .live-modal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 16px; } .lm-warm { margin: 0; font-size: 17px; font-weight: 600; color: #ffd76a; }
dialog.lm .btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0; } dialog.lm .hint { margin: 0; font-size: 13px; color: #a9a3b0; }
@media (max-width: 520px) { .lm-emo.l2, .lm-emo.r2 { display: none; } .lm-team { min-height: 104px; } .lm-team b { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .lm-emo, .lm-vs, .lm-ribbon { animation: none; } }

.evt-rec-open { margin-left: 10px; vertical-align: middle; } .evt-rec-open .btn { padding: 4px 10px; font-size: 12px; }

/* Archives des Cups */
.ar-list { display: grid; gap: 12px; } .ar-week { display: grid; grid-template-columns: minmax(170px, 220px) 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: inherit; text-decoration: none; } .ar-week:hover { border-color: var(--accent); }
.ar-week b { display: block; font-size: 18px; } .ar-week small { color: var(--muted); } .ar-cups { display: flex; flex-wrap: wrap; gap: 8px; } .ar-cups .chip { border-color: var(--dc, var(--line)); white-space: normal; } .ar-week u { font-weight: 600; white-space: nowrap; }
.ar-cup { border-left: 4px solid var(--dc, var(--accent)); } .ar-champ { font-size: 18px; margin: 0 0 14px; } .ar-champ span { margin-left: 14px; font-size: 15px; color: var(--muted); }
.ar-rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .ar-round h3 { margin: 0 0 8px; font-size: 15px; color: var(--muted); } .ar-match { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 7px 10px; margin-bottom: 6px; border-radius: 10px; border: 1px solid var(--line); background: #0f0d12; font-size: 13px; }
.ar-match i { font-style: normal; color: var(--muted); font-size: 11px; } .ar-match span:last-child { text-align: right; } .ar-match .win { font-weight: 700; color: #7be0a0; } .ar-match .lost { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
@media (max-width: 720px) { .ar-week { grid-template-columns: 1fr; } }

/* Banderole de l'événement : bouton pour la fermer, et l'état « bientôt » */
.live-wrap { position: relative; } .live-wrap[hidden] { display: none; } .live-wrap .live-bar { padding-right: 46px; }
.live-x { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; } .live-x:hover { background: #000; }
.live-bar.live-m0 { animation: none; background: linear-gradient(90deg, #4b2a7a, #7a3fc2, #4b2a7a); color: #f3e8ff; } .live-bar.live-m0 span i { animation: none; background: #ffd76a; } .live-bar.live-m0 u { background: #1b0f2e; color: #e3c8ff; }

/* Prize pool et gains des joueurs */
.evt-pool { margin: 14px 0 0; padding: 14px 18px; border-radius: 16px; text-align: center; border: 2px solid #ffd76a; background: linear-gradient(110deg, rgba(255, 215, 106, .16), rgba(255, 122, 24, .14)); display: grid; gap: 2px; justify-items: center; }
.evt-pool span { font-size: 16px; font-weight: 600; } .evt-pool b { font-size: clamp(28px, 6vw, 44px); line-height: 1.1; color: #ffd76a; text-shadow: 0 0 22px rgba(255, 215, 106, .55); animation: poolPulse 1.6s ease-in-out infinite; } .evt-pool small { color: var(--muted); } .evt-pool.empty { border-style: dashed; }
@keyframes poolPulse { 50% { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .evt-pool b { animation: none; } }
.pz-h { margin: 16px 0 8px; font-size: 17px; } .pz-table { display: grid; gap: 4px; margin-bottom: 14px; overflow-x: auto; } .pz-row { display: grid; grid-template-columns: 70px minmax(150px, 2fr) repeat(3, minmax(84px, 1fr)) minmax(110px, 1.2fr); gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; background: #0f0d12; border: 1px solid var(--line); font-size: 14px; min-width: 620px; }
.pz-head { background: none; border: 0; color: var(--muted); font-size: 12px; } .pz-sum { background: none; border-style: dashed; } .pz-each { color: #7be0a0; font-weight: 700; } .pz-each small { color: var(--muted); font-weight: 400; }

/* Le match en accéléré */
.rp-top { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 12px; font-size: 20px; } .rp-sc i { font-style: normal; font-size: 30px; font-variant-numeric: tabular-nums; margin: 0 6px; } .rp-sc.blue { color: #6fb1ff; } .rp-sc.red { color: #ff7b7b; } .rp-clock { padding: 4px 14px; border-radius: 99px; background: #0f0d12; border: 1px solid var(--line); font-variant-numeric: tabular-nums; font-weight: 700; }
.rp-stage { display: grid; grid-template-columns: minmax(0, 520px) minmax(240px, 1fr); gap: 16px; align-items: start; } @media (max-width: 860px) { .rp-stage { grid-template-columns: 1fr; } }
.rp-map { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #0b1410; } .rp-map > img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.8) saturate(1.1); }
.rp-tok { position: absolute; width: 7.2%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; border: 2px solid #6fb1ff; box-shadow: 0 0 10px rgba(0, 0, 0, .8); transition: left .45s ease, top .45s ease, filter .3s, opacity .3s; z-index: 2; } .rp-tok.red { border-color: #ff6b6b; } .rp-tok img { width: 100%; height: 100%; display: block; }
.rp-tok.dead { filter: grayscale(1) brightness(.5); opacity: .55; z-index: 1; } .rp-tok.hit { animation: rpHit .5s ease; z-index: 3; } @keyframes rpHit { 30% { transform: translate(-30%, -50%) scale(1.5) rotate(18deg); } 60% { transform: translate(-60%, -50%) scale(1.2) rotate(-10deg); } }
.rp-slash { position: absolute; width: 16%; height: 3px; transform: translate(-50%, -50%) rotate(-38deg) scaleX(0); background: linear-gradient(90deg, transparent, #fff, #ffd76a, transparent); box-shadow: 0 0 14px #fff; border-radius: 3px; z-index: 4; animation: rpSlash .6s ease-out forwards; pointer-events: none; } .rp-slash.red { background: linear-gradient(90deg, transparent, #fff, #ff6b6b, transparent); }
@keyframes rpSlash { 25% { transform: translate(-50%, -50%) rotate(-38deg) scaleX(1.2); opacity: 1; } 55% { transform: translate(-50%, -50%) rotate(40deg) scaleX(1); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(40deg) scaleX(.2); opacity: 0; } }
.rp-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; padding: 10px 20px; border-radius: 14px; background: rgba(8, 6, 12, .88); border: 2px solid #ffd76a; color: #ffd76a; font-weight: 900; font-size: clamp(16px, 3.2vw, 26px); text-align: center; letter-spacing: .04em; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; animation: rpPop .35s ease; } .rp-banner[hidden] { display: none; }
.rp-banner.blue { border-color: #6fb1ff; color: #cfe5ff; } .rp-banner.red { border-color: #ff6b6b; color: #ffd4d4; } .rp-banner.m3, .rp-banner.m4, .rp-banner.m5 { font-size: clamp(20px, 4.4vw, 36px); box-shadow: 0 0 40px rgba(255, 215, 106, .6); color: #ffd76a; } .rp-banner.win { border-color: #ffd76a; color: #ffd76a; font-size: clamp(18px, 4vw, 32px); white-space: normal; }
@keyframes rpPop { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 70% { transform: translate(-50%, -50%) scale(1.12); } }
.rp-side { display: grid; gap: 12px; min-width: 0; } .rp-duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; } .rp-duel p { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 14px; min-height: 2.6em; }
.rp-card { aspect-ratio: 308 / 560; max-height: 250px; width: 100%; border-radius: 12px; border: 2px solid var(--line); background: #17131c center top / cover; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; overflow: hidden; box-shadow: inset 0 -70px 40px -30px rgba(0, 0, 0, .9); } .rp-card.blue { border-color: #6fb1ff; } .rp-card.red { border-color: #ff6b6b; } .rp-card b { font-size: 14px; overflow-wrap: anywhere; } .rp-card small { color: #cfc8dc; font-size: 12px; }
.rp-hit { font-size: 26px; } .rp-duel.go .rp-hit { animation: rpSword .6s ease; } .rp-duel.go .rp-card:first-child { animation: rpLunge .5s ease; } .rp-duel.go .rp-card.ko { animation: rpKo .7s ease forwards; }
@keyframes rpSword { 40% { transform: scale(1.9) rotate(35deg); } } @keyframes rpLunge { 40% { transform: translateX(14px) scale(1.04); } } @keyframes rpKo { 20% { transform: translateX(8px) rotate(3deg); filter: brightness(2); } 100% { filter: grayscale(1) brightness(.5); transform: rotate(4deg) translateY(6px); } }
.rp-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; min-height: 60px; } .rp-feed li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px; background: #0f0d12; border-left: 3px solid #6fb1ff; font-size: 13px; animation: rpIn .3s ease; } .rp-feed li.red { border-left-color: #ff6b6b; } .rp-feed li.obj { border-left-style: dashed; }
.rp-feed time { color: var(--muted); font-variant-numeric: tabular-nums; } .rp-feed img { border-radius: 50%; } .rp-feed .v { color: var(--muted); text-decoration: line-through; } .rp-feed li.obj .v { text-decoration: none; } .rp-feed em { font-style: normal; font-weight: 800; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: #ffd76a; color: #14111a; } @keyframes rpIn { from { opacity: 0; transform: translateY(-6px); } }
.rp-bar { position: relative; height: 22px; margin: 14px 0 10px; border-radius: 99px; background: #0f0d12; border: 1px solid var(--line); cursor: pointer; overflow: hidden; } .rp-bar > i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(181, 101, 216, .55), rgba(255, 179, 71, .55)); }
.rp-bar u { position: absolute; top: 3px; bottom: 3px; width: 2px; background: #6fb1ff; } .rp-bar u.red { background: #ff6b6b; } .rp-bar u.m { width: 4px; top: 0; bottom: 0; background: #ffd76a; } .rp-bar u.o { width: 6px; height: 6px; top: auto; bottom: 1px; border-radius: 50%; }
.rp-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rp-ctl .btn.on { border-color: var(--accent); background: rgba(181, 101, 216, .25); }
.rp-talk > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; } .rp-talk > summary h2 { margin: 0; } .rp-talk > summary small { color: var(--muted); } .rp-talk[open] > summary small { display: none; }
.rp-lines { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .rp-lines li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #0f0d12; border-left: 4px solid var(--line); } .rp-lines li p { margin: 0; } .rp-lines img { border-radius: 50%; flex: none; } .rp-lines li > i { font-style: normal; font-size: 24px; width: 40px; text-align: center; flex: none; }
.rp-lines .t-intro { font-size: 17px; font-weight: 600; border-left-color: #ffd76a; } .rp-lines .t-perfect { border-left-color: #ffd76a; } .rp-lines .t-great { border-left-color: #7be0a0; } .rp-lines .t-good { border-left-color: #6fb1ff; } .rp-lines .t-ok { border-left-color: #8a8493; } .rp-lines .t-poor { border-left-color: #ff9f5a; } .rp-lines .t-bad { border-left-color: #ff6b6b; }
.rp-talk[open] .rp-lines li { animation: rpIn .5s ease backwards; } .rp-talk[open] .rp-lines li:nth-child(n+2) { animation-delay: .25s; } .rp-talk[open] .rp-lines li:nth-child(n+4) { animation-delay: .6s; } .rp-talk[open] .rp-lines li:nth-child(n+7) { animation-delay: 1s; } .rp-talk[open] .rp-lines li:nth-child(n+10) { animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) { .rp-tok, .rp-slash, .rp-banner, .rp-duel *, .rp-feed li, .rp-lines li { animation: none !important; transition: none; } }

.rp-tok.me { border-color: #ffd76a; box-shadow: 0 0 12px #ffd76a; z-index: 3; } .rp-lines li.me { background: rgba(255, 215, 106, .1); outline: 1px solid rgba(255, 215, 106, .5); }

/* Étiquette « c'est ici que tu es inscrit » : texte foncé, lisible sur le dégradé orange */
em.fire-tag, .fire-tag { color: #1a0b00 !important; text-shadow: none; }

.evt-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; font-weight: 800; letter-spacing: .05em; font-size: 15px; background: #2a2416; color: #ffd76a; border: 1px solid #ffd76a; } .evt-badge.idle { background: #1d1a21; color: #cfc8dc; border-color: var(--line); } .evt-stay.done { border-color: var(--line); background: var(--panel); color: var(--text); }

.rp-live .rp-tok { transition: left .18s linear, top .18s linear, filter .3s, opacity .3s; }

/* Banderole du mode test */
.test-bar { position: relative; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; padding: 8px 44px 8px 14px; background: #10261a; color: #d9ffe8; border-bottom: 1px solid #2e7d4f; font-size: 13.5px; } .test-bar[hidden] { display: none; }
.test-bar b { color: #7be0a0; } .test-bar code { padding: 3px 10px; border-radius: 8px; background: #06140d; border: 1px solid #2e7d4f; font-size: 15px; letter-spacing: .06em; color: #fff; user-select: all; } .test-bar small { color: #9fd8b6; } .test-bar a { color: #7be0a0; }
.tb-btn { padding: 4px 12px; border-radius: 999px; border: 0; background: #7be0a0; color: #06140d; font: inherit; font-weight: 700; cursor: pointer; } .tb-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.dyn-obs .test-bar, .dyn-obs .live-wrap { display: none !important; }

/* Scène : rien que le match en accéléré */
.rp-scene { background: #0a090c; } .rp-scene header.nav, .rp-scene footer, .rp-scene .dash-back, .rp-scene .live-chip, .rp-scene dialog, .rp-scene .ck-bar { display: none !important; } .rp-scene-main { max-width: 1240px; margin: 0 auto; padding: 14px; } .rp-scene .rp-ctl, .rp-scene .rp h2 small { display: none; }

/* Match en accéléré : annonces en haut de la carte (petites), tableau et courbe en direct sous la carte */
.rp-banner { top: 10px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-width: 1px; border-radius: 999px; font-size: clamp(12px, 1.5vw, 15px); letter-spacing: .02em; animation: rpDrop .3s ease; }
.rp-banner.m3, .rp-banner.m4, .rp-banner.m5 { font-size: clamp(13px, 1.8vw, 18px); box-shadow: 0 0 18px rgba(255, 215, 106, .5); } .rp-banner.win { font-size: clamp(14px, 2vw, 20px); white-space: nowrap; }
@keyframes rpDrop { from { transform: translate(-50%, -14px); opacity: 0; } }
.rp-under { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 16px; margin-top: 16px; align-items: start; } @media (max-width: 980px) { .rp-under { grid-template-columns: 1fr; } }
.rp-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .rp-board { grid-template-columns: 1fr; } }
.rp-col h3 { margin: 0 0 6px; font-size: 14px; } .rp-col.blue h3 { color: #6fb1ff; } .rp-col.red h3 { color: #ff7b7b; }
.rp-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 76px 52px 40px; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 9px; background: #0f0d12; margin-bottom: 4px; font-size: 13px; font-variant-numeric: tabular-nums; } .rp-row.head { background: none; color: var(--muted); font-size: 11px; padding: 0 8px; }
.rp-row img { border-radius: 50%; } .rp-row .n { display: grid; min-width: 0; } .rp-row .n b, .rp-row .n small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-row .n small { color: var(--muted); font-size: 11px; } .rp-row .kda { font-weight: 700; } .rp-row.me { outline: 1px solid rgba(255, 215, 106, .6); }
.rp-row.pop { animation: rpRowPop .7s ease; } .rp-row.hurt { animation: rpRowHurt .7s ease; } @keyframes rpRowPop { 25% { background: rgba(123, 224, 160, .35); transform: scale(1.02); } } @keyframes rpRowHurt { 25% { background: rgba(255, 107, 107, .3); } }
.rp-chart h3 { margin: 0 0 6px; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; } .rp-chart h3 b.blue { color: #6fb1ff; } .rp-chart h3 b.red { color: #ff7b7b; }
.rp-svg { width: 100%; height: 170px; display: block; border-radius: 12px; background: #0f0d12; border: 1px solid var(--line); } .rp-svg .ghost { fill: none; stroke: #3a3541; stroke-width: 1.5; } .rp-svg .line { fill: none; stroke: #fff; stroke-width: 2; } .rp-svg .blue { fill: rgba(111, 177, 255, .35); } .rp-svg .red { fill: rgba(255, 107, 107, .35); } .rp-svg .zero { stroke: #5a5463; stroke-width: 1; stroke-dasharray: 4 4; }

/* Tableau en direct : même forme que le tableau final (joueur, K/D/A, CS, or, dégâts, objets), une équipe sous l'autre */
.rp-under { grid-template-columns: 1fr; } .rp-board { grid-template-columns: 1fr; gap: 14px; }
.rp-row { grid-template-columns: 26px minmax(110px, 1.4fr) 86px 44px 58px minmax(90px, 1fr) 176px; } .rp-row.head span { white-space: nowrap; }
.rp-row .dmg { display: grid; gap: 3px; } .rp-row .dmg b { font-weight: 600; } .rp-row .dmg i { display: block; height: 4px; border-radius: 4px; background: #26232a; overflow: hidden; } .rp-row .dmg u { display: block; height: 100%; width: 0; background: #ff7a5a; text-decoration: none; transition: width .2s linear; } .rp-col.blue .dmg u { background: #6fb1ff; }
.rp-row .it { display: flex; gap: 2px; flex-wrap: wrap; } .rp-row .it img { border-radius: 5px; opacity: .12; filter: grayscale(1); transition: opacity .3s, filter .3s, transform .3s; } .rp-row .it img.on { opacity: 1; filter: none; }
@media (max-width: 760px) { .rp-row { grid-template-columns: 26px minmax(0, 1fr) 78px 52px; } .rp-row > :nth-child(4), .rp-row > :nth-child(6), .rp-row > :nth-child(7) { display: none; } }

/* Match en accéléré, version condensée : tout tient à l'écran sans dézoomer. Carte plus petite, duel et fil à côté, puis les deux
   équipes face à face sur cinq rangées, et la courbe en dessous. */
.rp { padding-top: 14px; padding-bottom: 14px; } .rp > h2 { margin-bottom: 6px; font-size: 18px; } .rp-top { margin-bottom: 8px; font-size: 16px; gap: 14px; } .rp-sc i { font-size: 24px; }
.rp-stage { grid-template-columns: minmax(0, min(380px, 42vh)) minmax(0, 1fr); gap: 14px; } @media (max-width: 760px) { .rp-stage { grid-template-columns: 1fr; } }
.rp-side { gap: 8px; } .rp-duel { grid-template-columns: 96px auto 96px minmax(0, 1fr); gap: 10px; align-items: center; } .rp-duel p { grid-column: auto; text-align: left; min-height: 0; font-size: 13px; } .rp-card { max-height: 150px; padding: 6px; border-radius: 10px; } .rp-card b { font-size: 12px; } .rp-card small { font-size: 11px; } .rp-hit { font-size: 20px; }
.rp-feed { gap: 3px; min-height: 0; } .rp-feed li { padding: 3px 8px; font-size: 12px; } .rp-feed img { width: 20px; height: 20px; }
.rp-under { margin-top: 10px; gap: 8px; } .rp-board { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 3px 6px; align-items: center; }
.rp-th { margin: 0; font-size: 13px; } .rp-th.blue { color: #6fb1ff; text-align: right; } .rp-th.red { color: #ff7b7b; } .rp-mid { text-align: center; font-size: 11px; font-weight: 800; color: #ffb347; }
.rp-cell { display: grid; grid-template-columns: 24px minmax(60px, 1.2fr) 70px 30px 44px minmax(56px, .9fr) 128px; gap: 6px; align-items: center; padding: 3px 8px; border-radius: 8px; background: #0f0d12; font-size: 12.5px; font-variant-numeric: tabular-nums; min-height: 30px; min-width: 0; }
.rp-cell.blue { direction: rtl; border-right: 3px solid #6fb1ff; } .rp-cell.blue > * { direction: ltr; } .rp-cell.red { border-left: 3px solid #ff6b6b; } .rp-cell.blue .n, .rp-cell.blue .kda, .rp-cell.blue .c, .rp-cell.blue .g { text-align: right; } .rp-cell.blue .it { justify-content: flex-end; }
.rp-cell.head { background: none; border-color: transparent; color: var(--muted); font-size: 10.5px; min-height: 0; padding-top: 0; padding-bottom: 0; } .rp-cell.head span { white-space: nowrap; overflow: hidden; }
.rp-cell img { border-radius: 50%; } .rp-cell .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-cell .kda { font-weight: 700; } .rp-cell.me { outline: 1px solid rgba(255, 215, 106, .7); }
.rp-cell .dmg { display: grid; gap: 2px; } .rp-cell .dmg b { font-weight: 600; font-size: 11.5px; } .rp-cell .dmg i { display: block; height: 3px; border-radius: 3px; background: #26232a; overflow: hidden; } .rp-cell .dmg u { display: block; height: 100%; width: 0; background: #ff7a5a; transition: width .2s linear; } .rp-cell.blue .dmg u { background: #6fb1ff; margin-left: auto; } .rp-cell.blue .dmg b { text-align: right; }
.rp-cell .it { display: flex; gap: 1px; flex-wrap: nowrap; } .rp-cell .it img { border-radius: 4px; opacity: .12; filter: grayscale(1); transition: opacity .3s, filter .3s; } .rp-cell .it img.on { opacity: 1; filter: none; }
.rp-cell.pop { animation: rpRowPop .7s ease; } .rp-cell.hurt { animation: rpRowHurt .7s ease; }
.rp-chart h3 { font-size: 12.5px; margin-bottom: 3px; } .rp-svg { height: 84px; } .rp-bar { height: 16px; margin: 8px 0 8px; } .rp-ctl .btn-lg { padding: 8px 16px; font-size: 14px; } .rp-ctl .btn { padding: 6px 12px; }
@media (max-width: 1080px) { .rp-cell { grid-template-columns: 24px minmax(50px, 1fr) 66px 44px minmax(50px, .8fr); } .rp-cell > :nth-child(4), .rp-cell > :nth-child(7) { display: none; } }
@media (max-width: 640px) { .rp-board { grid-template-columns: 1fr; } .rp-mid, .rp-th.red { display: none; } .rp-th.blue { text-align: left; } .rp-cell.blue { direction: ltr; border-right: 0; border-left: 3px solid #6fb1ff; } .rp-cell.blue .n, .rp-cell.blue .kda, .rp-cell.blue .g { text-align: left; } .rp-duel { grid-template-columns: 1fr auto 1fr; } .rp-duel p { grid-column: 1 / -1; text-align: center; } }

/* Cartes des champions : l'élimination se voit dans la carte même */
.rp-card { position: relative; } .rp-tag { position: absolute; top: 5px; left: 5px; z-index: 3; padding: 2px 8px; border-radius: 99px; font-style: normal; font-weight: 800; font-size: 12px; background: rgba(8, 6, 12, .85); color: #7be0a0; border: 1px solid currentColor; } .rp-card.ko .rp-tag { color: #ff8a8a; }
.rp-multi { position: absolute; top: 30px; left: 0; right: 0; z-index: 3; text-align: center; font-size: 11px; font-weight: 900; letter-spacing: .05em; color: #14111a; background: #ffd76a; padding: 2px 0; transform: rotate(-4deg); box-shadow: 0 0 14px rgba(255, 215, 106, .7); }
.rp-cut { position: absolute; left: -10%; right: -10%; top: 50%; height: 3px; z-index: 2; background: linear-gradient(90deg, transparent, #fff 30%, #ff3b3b 70%, transparent); box-shadow: 0 0 10px #ff3b3b; transform: rotate(-32deg) scaleX(0); transform-origin: left center; pointer-events: none; } .rp-cut.x { transform: rotate(32deg) scaleX(0); transform-origin: right center; }
.rp-duel.go .rp-cut { animation: rpCut .35s .12s ease-out forwards; } .rp-duel.go .rp-cut.x { animation: rpCutX .35s .3s ease-out forwards; } @keyframes rpCut { to { transform: rotate(-32deg) scaleX(1); } } @keyframes rpCutX { to { transform: rotate(32deg) scaleX(1); } }
.rp-duel.go .rp-card.atk { animation: rpAtk .55s ease; } @keyframes rpAtk { 30% { transform: translateX(12px) scale(1.06); box-shadow: 0 0 26px rgba(255, 215, 106, .8), inset 0 -70px 40px -30px rgba(0, 0, 0, .9); } }
.rp-duel.go .rp-card.multi { animation: rpAtk .55s ease, rpGlow 1.2s ease; } @keyframes rpGlow { 50% { box-shadow: 0 0 34px #ffd76a, inset 0 -70px 40px -30px rgba(0, 0, 0, .9); } }
.rp-duel.go .rp-card.ko { animation: rpKo2 .8s ease forwards; } @keyframes rpKo2 { 15% { transform: translateX(7px) rotate(2deg); filter: brightness(2.2); } 30% { transform: translateX(-5px) rotate(-2deg); } 100% { filter: grayscale(1) brightness(.45); transform: rotate(3deg) translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .rp-cut { transform: rotate(-32deg) scaleX(1); } .rp-cut.x { transform: rotate(32deg) scaleX(1); } }

/* Cartes : éliminations en haut, morts en bas ; à la fin, les dix champions et leur nombre de morts */
.rp-tag.top { top: 5px; left: 5px; color: #7be0a0; } .rp-tag.bot { top: auto; bottom: 5px; left: auto; right: 5px; color: #ff8a8a; } .rp-card.ko .rp-tag.top { color: #7be0a0; }
.rp-duel.go .rp-tag.hot { animation: rpTag .8s ease; } @keyframes rpTag { 30% { transform: scale(1.9); background: #fff; } }
.rp-deaths { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: #0f0d12; border: 1px solid var(--line); animation: rpIn .5s ease; } .rp-deaths[hidden] { display: none; } .rp-deaths > b { font-size: 13px; }
.rp-deaths .grp { display: flex; gap: 8px; padding: 2px 10px; border-left: 3px solid #6fb1ff; } .rp-deaths .grp.red { border-left-color: #ff6b6b; } .rp-deaths .d { position: relative; display: inline-flex; } .rp-deaths .d img { width: 34px; height: 34px; border-radius: 50%; filter: grayscale(.6); }
.rp-deaths .d i { position: absolute; right: -6px; bottom: -4px; min-width: 18px; padding: 0 4px; border-radius: 99px; background: #ff5252; color: #fff; font-style: normal; font-weight: 800; font-size: 12px; text-align: center; border: 2px solid #0f0d12; } .rp-deaths .d.zero img { filter: none; box-shadow: 0 0 10px #7be0a0; } .rp-deaths .d.zero i { background: #2e9d62; }

/* Les dix champions en permanence à droite de la carte : deux rangées de cinq (bleus, puis rouges) */
.rp-side { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); grid-template-areas: "duel roster" "feed roster"; gap: 8px 14px; align-content: start; } .rp-duel { grid-area: duel; grid-template-columns: 84px auto 84px; justify-content: start; } .rp-duel p { grid-column: 1 / -1; text-align: left; } .rp-feed { grid-area: feed; }
.rp-roster { grid-area: roster; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-content: start; }
.rp-mini { position: relative; aspect-ratio: 3 / 4.3; max-height: 176px; border-radius: 10px; border: 2px solid #6fb1ff; background: #17131c center top / cover; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 5px; box-shadow: inset 0 -58px 30px -22px rgba(0, 0, 0, .92); transition: filter .4s, opacity .4s; min-width: 0; }
.rp-mini.red { border-color: #ff6b6b; } .rp-mini.me { box-shadow: 0 0 12px #ffd76a, inset 0 -58px 30px -22px rgba(0, 0, 0, .92); border-color: #ffd76a; }
.rp-mini em { position: absolute; top: 4px; padding: 1px 6px; border-radius: 99px; font-style: normal; font-weight: 800; font-size: 11px; background: rgba(8, 6, 12, .85); border: 1px solid currentColor; z-index: 3; } .rp-mini .k { left: 4px; color: #7be0a0; } .rp-mini .d { right: 4px; color: #ff8a8a; }
.rp-mini b { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 2; } .rp-mini .g { font-size: 11px; color: #ffd76a; font-variant-numeric: tabular-nums; z-index: 2; } .rp-mini .g.spend { animation: rpSpend .9s ease; } @keyframes rpSpend { 30% { color: #ff8a8a; transform: scale(1.15); } }
.rp-mini .skull { position: absolute; inset: 0; display: none; place-items: center; font-style: normal; font-size: clamp(26px, 3.4vw, 44px); z-index: 2; text-shadow: 0 0 14px #000; } .rp-mini.dead { filter: grayscale(1) brightness(.6); } .rp-mini.dead .skull { display: grid; animation: rpPulse 1s ease-in-out infinite; } @keyframes rpPulse { 50% { transform: scale(1.12); } }
.rp-mini .cut { position: absolute; left: -10%; right: -10%; top: 46%; height: 3px; background: linear-gradient(90deg, transparent, #fff 30%, #ff3b3b 70%, transparent); box-shadow: 0 0 10px #ff3b3b; transform: rotate(-30deg) scaleX(0); transform-origin: left center; z-index: 3; }
.rp-mini.hit { animation: rpMiniHit .7s ease; } .rp-mini.hit .cut { animation: rpMiniCut .5s ease-out; } @keyframes rpMiniHit { 15% { transform: translateX(5px) rotate(2deg); filter: brightness(2.2); } 35% { transform: translateX(-4px) rotate(-2deg); } } @keyframes rpMiniCut { 50% { transform: rotate(-30deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-30deg) scaleX(1); opacity: 0; } }
.rp-mini.atk { animation: rpMiniAtk .6s ease; } @keyframes rpMiniAtk { 30% { transform: scale(1.08); box-shadow: 0 0 22px #ffd76a, inset 0 -58px 30px -22px rgba(0, 0, 0, .92); } } .rp-mini.back { animation: rpMiniBack .6s ease; } @keyframes rpMiniBack { from { filter: brightness(2.4); transform: scale(.94); } }
.rp-mini .buy { position: absolute; right: 4px; bottom: 34px; border-radius: 5px; border: 1px solid #ffd76a; z-index: 3; opacity: .9; } .rp-mini .buy[hidden] { display: none; } .rp-mini .buy.pop { animation: rpBuy 1.4s ease; } @keyframes rpBuy { 0% { transform: scale(2.2) translateY(-10px); opacity: 0; } 25% { transform: scale(1.5); opacity: 1; } }
@media (max-width: 1080px) { .rp-side { grid-template-columns: 1fr; grid-template-areas: "duel" "feed" "roster"; } .rp-mini { max-height: 130px; } }
@media (max-width: 760px) { .rp-roster { gap: 5px; } .rp-mini b { display: none; } }
@media (prefers-reduced-motion: reduce) { .rp-mini, .rp-mini * { animation: none !important; } }

/* Match en accéléré : à droite de la carte, le duel et le fil sur une première ligne ; dessous, les dix champions sur toute la largeur, plus grands et plus espacés */
.rp-side { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "duel feed" "roster roster"; gap: 10px 16px; }
.rp-duel { grid-template-columns: 78px auto 78px; align-content: start; } .rp-duel .rp-card { max-height: 124px; } .rp-duel p { grid-column: 1 / -1; max-width: 230px; font-size: 12.5px; }
.rp-feed { align-content: start; } .rp-feed li { font-size: 12.5px; }
.rp-roster { gap: 10px 12px; } .rp-mini { aspect-ratio: 4 / 3; max-height: none; padding: 6px 8px; border-radius: 12px; background-position: center 18%; box-shadow: inset 0 -46px 26px -18px rgba(0, 0, 0, .92); }
.rp-mini.me { box-shadow: 0 0 12px #ffd76a, inset 0 -46px 26px -18px rgba(0, 0, 0, .92); } .rp-mini em { top: 6px; font-size: 12.5px; padding: 2px 8px; } .rp-mini .k { left: 6px; } .rp-mini .d { right: 6px; }
.rp-mini b { font-size: 13px; } .rp-mini .g { font-size: 12.5px; } .rp-mini .buy { right: 6px; bottom: 8px; width: 26px; height: 26px; }
@media (max-width: 1080px) { .rp-side { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "duel feed" "roster roster"; } .rp-mini { max-height: none; } }
@media (max-width: 640px) { .rp-side { grid-template-columns: 1fr; grid-template-areas: "duel" "feed" "roster"; } .rp-roster { gap: 6px; } .rp-mini em { font-size: 10.5px; padding: 1px 5px; } }

/* Assistances : « 3 contre 1 » et les cartes de ceux qui ont aidé, sous le duel ; petites faces dans le fil */
.rp-as { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 46px; } .rp-as b { font-size: 13px; font-weight: 800; color: #ffd76a; margin-right: 4px; } .rp-as b.solo { color: #7be0a0; }
.rp-ascard { position: relative; width: 38px; height: 46px; border-radius: 7px; border: 2px solid #6fb1ff; background: #17131c center 15% / cover; overflow: hidden; animation: rpIn .3s ease; } .rp-ascard.red { border-color: #ff6b6b; } .rp-ascard i { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 9.5px; font-weight: 700; text-align: center; background: rgba(8, 6, 12, .82); color: #cfe5ff; }
.rp-feed .as { border-radius: 50%; opacity: .85; margin-left: -4px; } .rp-feed .plus { color: var(--muted); font-size: 11px; }
.rp-mini.asst { animation: rpMiniAsst .6s ease; } @keyframes rpMiniAsst { 30% { transform: scale(1.04); box-shadow: 0 0 16px #6fb1ff, inset 0 -46px 26px -18px rgba(0, 0, 0, .92); } }

/* Bataille des cartes, version musclée : cartes plus grandes, un coup par attaquant, explosion, étincelles, secousse, et les assistants mis en valeur */
.rp-duel { grid-template-columns: 104px auto 104px; gap: 12px; position: relative; } .rp-duel .rp-card { max-height: 168px; border-width: 3px; } .rp-hit { font-size: 30px; filter: drop-shadow(0 0 8px #ffd76a); }
.rp-duel.shake { animation: rpShake .6s cubic-bezier(.36, .07, .19, .97); } @keyframes rpShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px) rotate(.4deg); } 30%, 50%, 70% { transform: translateX(-8px) rotate(-.6deg); } 40%, 60% { transform: translateX(8px) rotate(.6deg); } }
.rp-duel.go .rp-hit { animation: rpSword2 .7s ease; } @keyframes rpSword2 { 25% { transform: scale(2.6) rotate(-40deg); } 55% { transform: scale(2.2) rotate(55deg) translateX(16px); } }
.rp-duel.go .rp-card.atk { animation: rpAtk2 .6s cubic-bezier(.2, .9, .3, 1.3); } @keyframes rpAtk2 { 25% { transform: translateX(-10px) scale(.96); } 55% { transform: translateX(34px) scale(1.12) rotate(4deg); box-shadow: 0 0 34px #ffd76a, -18px 0 26px -6px rgba(255, 215, 106, .7), inset 0 -70px 40px -30px rgba(0, 0, 0, .9); } }
.rp-duel.go .rp-card.multi { animation: rpAtk2 .6s cubic-bezier(.2, .9, .3, 1.3), rpFire 1.4s ease .5s; } @keyframes rpFire { 30%, 70% { box-shadow: 0 0 40px #ff7a18, 0 0 80px rgba(255, 61, 0, .6), inset 0 -70px 40px -30px rgba(0, 0, 0, .9); border-color: #ffd76a; } }
.rp-slash2 { position: absolute; left: -18%; right: -18%; height: 4px; z-index: 4; pointer-events: none; background: linear-gradient(90deg, transparent, #fff 25%, #ffe9a8 50%, #ff2b2b 78%, transparent); box-shadow: 0 0 14px #ff2b2b, 0 0 4px #fff; border-radius: 4px; transform: rotate(var(--a, -30deg)) scaleX(0); transform-origin: left center; opacity: 0; }
.rp-duel.go .rp-slash2 { animation: rpSlash2 .34s ease-out forwards; } @keyframes rpSlash2 { 0% { transform: rotate(var(--a)) scaleX(0); opacity: 1; } 60% { transform: rotate(var(--a)) scaleX(1.05); opacity: 1; } 100% { transform: rotate(var(--a)) scaleX(1); opacity: .55; height: 2px; } }
.rp-boom { position: absolute; left: 50%; top: 42%; z-index: 5; font-size: 54px; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; } .rp-duel.go .rp-boom { animation: rpBoom .6s ease-out forwards; } @keyframes rpBoom { 30% { transform: translate(-50%, -50%) scale(1.5) rotate(-12deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.3) rotate(10deg); opacity: 0; } }
.rp-spark { position: absolute; left: 50%; top: 42%; width: 6px; height: 6px; border-radius: 50%; background: #ffd76a; box-shadow: 0 0 8px #ff7a18; z-index: 5; opacity: 0; pointer-events: none; } .rp-duel.go .rp-spark { animation: rpSpark .7s ease-out forwards; } @keyframes rpSpark { 0% { transform: translate(0, 0) scale(1.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.rp-crack { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: linear-gradient(118deg, transparent 47.5%, rgba(0, 0, 0, .9) 48.5%, rgba(255, 60, 60, .7) 50%, rgba(0, 0, 0, .9) 51.5%, transparent 52.5%), linear-gradient(64deg, transparent 58%, rgba(0, 0, 0, .85) 59%, rgba(255, 60, 60, .5) 60%, transparent 61.5%), linear-gradient(170deg, transparent 30%, rgba(0, 0, 0, .8) 31%, transparent 32.5%); } .rp-duel.go .rp-card.ko .rp-crack { animation: rpCrack .3s ease .5s forwards; } @keyframes rpCrack { to { opacity: 1; } }
.rp-duel.go .rp-card.ko { animation: rpKo3 1s ease forwards; } @keyframes rpKo3 { 8% { transform: translateX(12px) rotate(4deg); filter: brightness(2.6) saturate(2); } 18% { transform: translateX(-9px) rotate(-4deg); filter: brightness(1); } 28% { transform: translateX(10px) rotate(3deg); filter: brightness(2.4) sepia(1) hue-rotate(-40deg) saturate(4); } 40% { transform: translateX(-6px) rotate(-2deg); } 100% { filter: grayscale(1) brightness(.4); transform: rotate(7deg) translateY(10px) scale(.94); } }
.rp-card.ko::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(255, 40, 40, .75), transparent 65%); opacity: 0; z-index: 3; pointer-events: none; } .rp-duel.go .rp-card.ko::after { animation: rpBlood .7s ease .15s; } @keyframes rpBlood { 30% { opacity: 1; } }
/* Les assistants : de vraies petites cartes avec leur nom, qui arrivent l'une après l'autre et cognent */
.rp-as { min-height: 0; gap: 8px; padding: 0; } .rp-as.gang { padding: 6px 8px; border-radius: 12px; background: linear-gradient(90deg, rgba(111, 177, 255, .16), transparent); border-left: 3px solid #ffd76a; } .rp-as b { font-size: 17px; letter-spacing: .03em; text-shadow: 0 0 12px rgba(255, 215, 106, .6); } .rp-as small { color: var(--muted); font-size: 11.5px; margin-right: 2px; }
.rp-ascard { width: 58px; height: 76px; border-radius: 9px; border-width: 2px; box-shadow: 0 0 12px rgba(111, 177, 255, .5); animation: rpAsIn .55s cubic-bezier(.2, .9, .3, 1.4) backwards; } .rp-ascard.red { box-shadow: 0 0 12px rgba(255, 107, 107, .5); }
.rp-ascard em { position: absolute; top: 2px; left: 2px; padding: 0 5px; border-radius: 99px; font-style: normal; font-size: 10px; font-weight: 800; background: rgba(8, 6, 12, .85); color: #9fd0ff; } .rp-ascard i { font-size: 9.5px; padding: 1px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes rpAsIn { 0% { transform: translateX(-40px) scale(.5); opacity: 0; } 55% { transform: translateX(26px) scale(1.18) rotate(6deg); opacity: 1; filter: brightness(1.8); } 100% { transform: none; } }
/* Le commentaire de l'élimination */
.rp-say { grid-column: 1 / -1; max-width: none !important; margin: 0; padding: 8px 12px; border-radius: 12px; background: #0f0d12; border: 1px solid var(--line); font-size: 14px !important; font-weight: 600; line-height: 1.35; min-height: 0; } .rp-say.big { border-color: #ffd76a; color: #ffd76a; font-size: 15.5px !important; box-shadow: 0 0 18px rgba(255, 215, 106, .25); } .rp-say.talk { animation: rpTalk .5s ease; } @keyframes rpTalk { from { transform: translateY(8px) scale(.97); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rp-duel, .rp-duel * { animation: none !important; } .rp-slash2 { opacity: .55; transform: rotate(var(--a)) scaleX(1); } .rp-crack { opacity: 1; } }

/* Surveillance des joueurs (administration) */
.sv-lvl, .sv-tier { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12.5px; white-space: nowrap; } .sv-lvl.l0 { background: #16301f; color: #7be0a0; } .sv-lvl.l1 { background: #2b2a14; color: #e6d86a; } .sv-lvl.l2 { background: #33240f; color: #ffb347; } .sv-lvl.l3 { background: #3a1a12; color: #ff8a5a; } .sv-lvl.l4 { background: #4a1014; color: #ff6b6b; box-shadow: 0 0 12px rgba(255, 80, 80, .5); }
.sv-tier.t1 { background: #ffd76a; color: #14111a; } .sv-tier.t2 { background: #6fb1ff; color: #06121f; } .sv-tier.t3 { background: #8a8493; color: #14111a; } .sv-tier.t4 { background: #3a3541; color: #cfc8dc; } .sv-tier.t0 { background: none; color: var(--muted); }
.sv-table td { vertical-align: top; } .sv-table small { color: var(--muted); } .sv-op { max-width: 380px; font-size: 13px; } .sv-op.big { max-width: none; font-size: 16px; } .sv-bad { color: #ff8a8a; font-weight: 700; } .sv-warn { color: #ffb347; }
.sv-scale { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; } .sv-scale li { padding: 8px 12px; border-radius: 10px; border-left: 4px solid #7be0a0; background: #0f0d12; } .sv-scale li b { margin-right: 8px; } .sv-scale .l1 { border-color: #e6d86a; } .sv-scale .l2 { border-color: #ffb347; } .sv-scale .l3 { border-color: #ff8a5a; } .sv-scale .l4 { border-color: #ff6b6b; }
.sv-sig { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .sv-sig li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #0f0d12; } .sv-pts { flex: none; min-width: 34px; text-align: center; padding: 3px 0; border-radius: 8px; background: #33240f; color: #ffb347; font-weight: 800; }

/* Match en accéléré : plus de grand vide. Le tueur et la victime restent côte à côte ; le fil a sa colonne à droite, une ligne par
   événement ; les dix champions suivent tout de suite en dessous. */
.rp-side { grid-template-columns: minmax(0, 1fr) minmax(210px, 270px); grid-template-areas: "duel feed" "roster roster"; align-items: start; gap: 10px 14px; }
.rp-duel { grid-template-columns: 104px 44px 104px minmax(0, 1fr); justify-content: start; justify-items: center; } .rp-duel > .rp-as, .rp-duel > .rp-say, .rp-duel > p { grid-column: 1 / -1; justify-self: stretch; }
.rp-feed { max-height: 190px; overflow: hidden; } .rp-feed li { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-width: 0; } .rp-feed li b, .rp-feed li .v { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .rp-feed li time, .rp-feed li img, .rp-feed li em, .rp-feed li .plus { flex: none; }
@media (max-width: 1080px) { .rp-side { grid-template-columns: minmax(0, 1fr) minmax(190px, 240px); grid-template-areas: "duel feed" "roster roster"; } }
@media (max-width: 640px) { .rp-side { grid-template-columns: 1fr; grid-template-areas: "duel" "feed" "roster"; } .rp-duel { grid-template-columns: 96px 36px 96px minmax(0, 1fr); } }

/* Commentaire d'après-match en étiquettes : faits marquants en pastilles, puis une carte encadrée par joueur, sur deux colonnes */
.rp-notes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; } .rp-note { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 2px solid #6fb1ff; background: #0f0d12; font-size: 13px; } .rp-note.red { border-color: #ff6b6b; } .rp-note.win { border-color: #ffd76a; background: rgba(255, 215, 106, .1); }
.rp-note i { font-style: normal; font-size: 16px; } .rp-note em { font-style: normal; color: #cfc8dc; } .rp-note img { border-radius: 50%; }
.rp-verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (max-width: 860px) { .rp-verdicts { grid-template-columns: 1fr; } }
.rp-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--vc, #3a3541); background: color-mix(in srgb, var(--vc, #3a3541) 9%, #0f0d12); min-width: 0; }
.rp-v.t-perfect { --vc: #ffd76a; } .rp-v.t-great { --vc: #7be0a0; } .rp-v.t-good { --vc: #6fb1ff; } .rp-v.t-ok { --vc: #8a8493; } .rp-v.t-poor { --vc: #ff9f5a; } .rp-v.t-bad { --vc: #ff6b6b; } .rp-v.me { box-shadow: 0 0 0 2px rgba(255, 215, 106, .55), 0 0 14px rgba(255, 215, 106, .3); }
.rp-v .rk { width: 22px; text-align: center; font-weight: 800; color: var(--muted); } .rp-v img { border-radius: 50%; border: 2px solid #6fb1ff; flex: none; } .rp-v.red img { border-color: #ff6b6b; } .rp-v .who { display: grid; min-width: 0; flex: 1 1 110px; } .rp-v .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-v .who small { color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-v .vd { padding: 3px 10px; border-radius: 999px; background: var(--vc); color: #14111a; font-weight: 800; font-size: 11.5px; letter-spacing: .04em; } .rp-v .vt { padding: 3px 9px; border-radius: 999px; background: #1d1a21; border: 1px solid var(--line); font-size: 12px; white-space: nowrap; } .rp-v .vt.hot { border-color: #ffb347; color: #ffd9a8; } .rp-v .vt.cold { border-color: #ff6b6b; color: #ffc4c4; } .rp-v .vt.mvp { background: #ffd76a; color: #14111a; border-color: #ffd76a; font-weight: 700; } .rp-v .vt.rev { border-style: dashed; }
.rp-talk[open] .rp-v { animation: rpIn .4s ease backwards; } .rp-talk[open] .rp-v:nth-child(n+3) { animation-delay: .15s; } .rp-talk[open] .rp-v:nth-child(n+5) { animation-delay: .3s; } .rp-talk[open] .rp-v:nth-child(n+7) { animation-delay: .45s; } .rp-talk[open] .rp-v:nth-child(n+9) { animation-delay: .6s; }
/* Objectifs sur la courbe d'or : pastilles avec icône */
.ev-obj circle { fill: #14111a; stroke: #6fb1ff; stroke-width: 2; } .ev-obj.ours circle { stroke: #7be0a0; } .ev-obj.theirs circle { stroke: #ff6b6b; } .ev-obj .em { font-size: 11px; } .ev-legend { margin: 0 0 8px; } .ev-legend .chip { font-size: 12px; }

/* Match en accéléré : classement en direct (É · M · A) et toutes les éliminations dans l'ordre ; réglage du son */
.rp-live3 { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 14px; margin-top: 12px; align-items: start; } @media (max-width: 860px) { .rp-live3 { grid-template-columns: 1fr; } } .rp-live3 h3 { margin: 0 0 6px; font-size: 13.5px; } .rp-live3 h3 small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.rp-rankbox { display: flex; flex-direction: column; gap: 3px; } .rp-rk { display: grid; grid-template-columns: 20px 24px minmax(0, 1fr) 30px 30px 30px minmax(0, 86px); gap: 6px; align-items: center; padding: 3px 8px; border-radius: 8px; background: #0f0d12; border-left: 3px solid #6fb1ff; font-size: 12.5px; font-variant-numeric: tabular-nums; transition: background .3s; } .rp-rk.red { border-left-color: #ff6b6b; } .rp-rk.me { outline: 1px solid rgba(255, 215, 106, .7); }
.rp-rk.head { background: none; border-left-color: transparent; color: var(--muted); font-size: 10.5px; padding-top: 0; padding-bottom: 0; } .rp-rk.head span { text-align: center; } .rp-rk.head span:nth-child(3) { text-align: left; }
.rp-rk img { border-radius: 50%; } .rp-rk .no { color: var(--muted); font-weight: 700; text-align: center; } .rp-rk .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .rp-rk b { text-align: center; } .rp-rk .k { color: #7be0a0; } .rp-rk .d { color: #ff8a8a; } .rp-rk .a { color: #9fd0ff; }
.rp-rk em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; justify-self: start; white-space: nowrap; } .rp-rk em:empty { display: none; } .rp-rk em.bad { background: #4a1014; color: #ff9c9c; } .rp-rk em.good { background: #16301f; color: #7be0a0; }
.rp-allbox { display: flex; flex-wrap: wrap; gap: 5px; max-height: 318px; overflow-y: auto; align-content: flex-start; padding-right: 4px; scroll-behavior: smooth; } .rp-kc { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; background: #0f0d12; border: 1px solid var(--line); border-left: 3px solid #6fb1ff; font-size: 12px; animation: rpIn .3s ease; max-width: 100%; }
.rp-kc.red { border-left-color: #ff6b6b; } .rp-kc.m { border-color: #ffd76a; box-shadow: 0 0 8px rgba(255, 215, 106, .25); } .rp-kc img { width: 20px; height: 20px; border-radius: 50%; } .rp-kc .no { color: var(--muted); font-size: 10.5px; } .rp-kc time { color: var(--muted); font-variant-numeric: tabular-nums; } .rp-kc .v { color: var(--muted); text-decoration: line-through; } .rp-kc i { font-style: normal; color: #9fd0ff; font-size: 11px; } .rp-kc em { font-style: normal; font-weight: 800; font-size: 10px; padding: 1px 6px; border-radius: 99px; background: #ffd76a; color: #14111a; }
.rp-sndctl { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .rp-sndctl input[type="range"] { width: 110px; accent-color: #b565d8; } .rp-sndctl .btn.on { border-color: #7be0a0; color: #7be0a0; } .rp-scene .rp-sndctl { display: none; }

/* Les morts dans l'ordre : une bande de cartes sous les dix champions ; chaque carte apparaît, puis se verrouille avec sa tête de mort */
.rp-deadwrap { margin-top: 10px; } .rp-deadwrap h3 { margin: 0 0 5px; font-size: 13px; } .rp-deadwrap h3 small { color: var(--muted); margin-left: 4px; }
.rp-dead { display: flex; gap: 6px; overflow-x: auto; padding: 3px 2px 6px; min-height: 86px; scroll-behavior: smooth; scrollbar-width: thin; } .rp-dead:empty::before { content: '—'; color: var(--muted); align-self: center; padding-left: 6px; }
.rp-dc { position: relative; flex: none; width: 58px; height: 78px; border-radius: 9px; border: 2px solid #6fb1ff; background: #17131c center 14% / cover; overflow: hidden; animation: rpDcIn .55s cubic-bezier(.2, .9, .3, 1.4); } .rp-dc.red { border-color: #ff6b6b; }
.rp-dc::before { content: ''; position: absolute; inset: 0; background: rgba(8, 6, 12, 0); transition: background .4s, backdrop-filter .4s; z-index: 1; } .rp-dc.locked::before { background: rgba(8, 6, 12, .55); backdrop-filter: grayscale(1); }
.rp-dc em { position: absolute; top: 2px; left: 2px; padding: 0 5px; border-radius: 99px; font-style: normal; font-size: 9.5px; font-weight: 800; background: rgba(8, 6, 12, .85); color: #fff; z-index: 2; } .rp-dc small { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9.5px; text-align: center; background: rgba(8, 6, 12, .8); color: #cfc8dc; z-index: 2; }
.rp-dc .lk { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(0); width: 34px; height: 34px; font-style: normal; font-size: 28px; line-height: 34px; text-align: center; z-index: 2; opacity: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.6), opacity .25s; }
.rp-dc.locked .lk { transform: translate(-50%, -50%) scale(1); opacity: 1; }
@keyframes rpDcIn { 0% { transform: translateY(-26px) scale(1.5) rotate(-8deg); opacity: 0; } 60% { transform: translateY(4px) scale(1.06) rotate(3deg); opacity: 1; } }
.rp-extra.locked { border: 1px dashed var(--line); text-align: center; } .rp-extra.locked p { color: var(--muted); max-width: 640px; margin: 6px auto 12px; } .rp-extra .rp-live3 { margin-top: 6px; }

/* Accueil de l'administration : blocs de liens rangés par sujet ; guides */
.hub-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; } .hub-group { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: #0f0d12; } .hub-group h3 { margin: 0 0 10px; font-size: 16px; }
.hub-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; } .hub-link { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: inherit; text-decoration: none; font-size: 13px; transition: border-color .15s, transform .15s; } .hub-link:hover { border-color: var(--accent); transform: translateY(-1px); } .hub-link small { color: var(--muted); font-size: 11.5px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .hub-card { display: grid; gap: 4px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: inherit; text-decoration: none; } .hub-card:hover { border-color: var(--accent); } .hub-card small { color: var(--muted); }
.gd-doc h2 { margin-top: 0; } .gd-doc h3 { margin: 22px 0 8px; } .gd-doc h4 { margin: 16px 0 6px; } .gd-doc hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; } .gd-doc code { padding: 1px 6px; border-radius: 6px; background: #0f0d12; border: 1px solid var(--line); font-size: 13px; }
.gd-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 8px 0 14px; } .gd-code pre { margin: 0; padding: 12px 14px; border-radius: 12px; background: #0f0d12; border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5; }
/* Historique : champions cliquables, note globale ; page d'une partie : bannière au champion joué */
a.hs-pick { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; border-radius: 12px; padding: 6px; border: 1px solid transparent; transition: border-color .15s, background .15s; } a.hs-pick:hover, a.hs-pick.on { border-color: var(--accent); background: rgba(181, 101, 216, .12); }
.hs-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; scroll-margin-top: 120px; } .hs-fav { display: inline-flex; border-radius: 50%; border: 2px solid transparent; } .hs-fav img { border-radius: 50%; display: block; } .hs-fav.on, .hs-fav:hover { border-color: var(--accent); }
.hs-global { display: flex; gap: 14px; align-items: center; padding: 12px 14px; margin: 4px 0 14px; border-radius: 14px; border: 2px solid #ffd76a; background: rgba(255, 215, 106, .07); } .hs-global .m-grade { font-size: 26px; min-width: 52px; text-align: center; padding: 8px 10px; } .hs-global div { display: grid; gap: 2px; } .hs-global b { font-size: 18px; } .hs-global small { color: var(--muted); }
.mt-hero { background-size: cover; background-position: center 22%; min-height: 150px; }

/* Les morts dans l'ordre : sous les boutons, sur plusieurs lignes d'environ vingt cartes ; la tête de mort est petite, dans le coin,
   pour laisser voir le visage du champion */
.rp-deadwrap { margin-top: 14px; } .rp-dead { flex-wrap: wrap; overflow: visible; min-height: 0; gap: 5px; padding: 2px 0 0; }
.rp-dc { width: calc((100% - 19 * 5px) / 20); min-width: 42px; height: auto; aspect-ratio: 3 / 4; border-radius: 8px; background-position: center 12%; }
.rp-dc.locked::before { background: rgba(8, 6, 12, .28); backdrop-filter: grayscale(.85); }
.rp-dc .lk { left: auto; right: 1px; top: auto; bottom: 13px; width: 18px; height: 18px; font-size: 14px; line-height: 18px; transform: scale(0); transform-origin: bottom right; filter: drop-shadow(0 0 3px #000); } .rp-dc.locked .lk { transform: scale(1); }
.rp-dc em { font-size: 9px; padding: 0 4px; } .rp-dc small { font-size: 9px; }
@media (max-width: 860px) { .rp-dc { width: calc((100% - 9 * 5px) / 10); } }

/* Bande des morts : l'or en poche sous l'heure ; une carte cliquée surligne toutes les morts du même joueur et ouvre son détail */
.rp-dc { aspect-ratio: 3 / 4.6; cursor: pointer; } .rp-dc small { bottom: 12px; } .rp-dc u { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; line-height: 12px; font-size: 8.5px; text-align: center; text-decoration: none; background: rgba(8, 6, 12, .9); color: #ffd76a; z-index: 2; white-space: nowrap; overflow: hidden; } .rp-dc .lk { bottom: 25px; }
.rp-dc:hover { transform: translateY(-2px); } .rp-dead.picking .rp-dc { opacity: .35; } .rp-dc.same { opacity: 1 !important; box-shadow: 0 0 0 2px #ffd76a; } .rp-dc.cur { box-shadow: 0 0 0 3px #fff, 0 0 14px #ffd76a; transform: scale(1.12); z-index: 3; } .rp-dead:has(.rp-dc.same) .rp-dc:not(.same) { opacity: .3; }
.rp-deadinfo { margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 2px solid #ffd76a; background: rgba(255, 215, 106, .06); display: grid; gap: 8px; } .rp-deadinfo[hidden] { display: none; }
.di-head { display: flex; gap: 12px; align-items: center; } .di-head > img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #6fb1ff; flex: none; } .di-head.red > img { border-color: #ff6b6b; } .di-head > div:nth-child(2) { display: grid; gap: 1px; flex: 1; min-width: 0; } .di-head .gold { color: #ffd76a; font-weight: 700; font-size: 16px; } .di-head small { color: var(--muted); } .di-head small.sum { color: #cfc8dc; }
.di-nav { display: flex; gap: 6px; } .di-nav .btn { padding: 6px 12px; } .di-nav .btn:disabled { opacity: .3; cursor: default; }
.di-chain { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .di-step { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: #0f0d12; color: inherit; font: inherit; font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums; } .di-step.on { border-color: #ffd76a; background: rgba(255, 215, 106, .18); font-weight: 700; } .di-chain i { font-style: normal; color: var(--muted); font-size: 11px; } .rp-deadhint { margin: 6px 0 0; }

/* Entre deux morts : or gagné (vert), or dépensé (rouge), objets achetés */
.di-seg { display: inline-flex; align-items: center; gap: 4px; } .di-seg em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 99px; font-variant-numeric: tabular-nums; } .di-seg .in { color: #7be0a0; background: rgba(123, 224, 160, .12); } .di-seg .out { color: #ff9c9c; background: rgba(255, 107, 107, .14); } .di-seg img { border-radius: 4px; }
.di-start { font-size: 11.5px; color: var(--muted); padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--line); } .di-chain { row-gap: 8px; } .di-head small.spent { color: #ffc4c4; } .di-key { color: var(--muted); font-size: 11.5px; }

/* Guides : champ de dépôt sous chaque fichier attendu */
.gd-up { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 14px; margin: 6px 0 22px; border-radius: 12px; border: 2px dashed var(--line); background: #0f0d12; scroll-margin-top: 130px; } .gd-up.has { border-style: solid; border-color: #2e7d4f; }
.gd-now { display: flex; gap: 12px; align-items: center; flex: 1 1 240px; } .gd-now img { border-radius: 10px; background: #1d1a21; object-fit: contain; } .gd-now span { display: grid; } .gd-now small { color: var(--muted); } .gd-miss { font-size: 30px; opacity: .5; } .gd-now audio { height: 34px; max-width: 240px; }
.gd-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .gd-form input[type="file"] { max-width: 250px; font-size: 13px; } .gd-up .flash { flex-basis: 100%; margin: 0; }

.gd-now video { border-radius: 10px; max-width: 260px; } .gd-now img { max-width: 220px; height: auto; max-height: 70px; }

.sv-verdict { white-space: nowrap; } .sv-verdict .btn { padding: 4px 9px; font-size: 12px; } .sv-verdict form { margin-right: 4px; } .sv-ok-row td { background: rgba(123, 224, 160, .06); } .sv-bad-row td { background: rgba(255, 107, 107, .08); }

/* Appel des capitaines au départ d'une Cup */
.evt-call { border: 2px solid #ffb347; background: linear-gradient(110deg, rgba(255, 179, 71, .14), var(--panel)); animation: liveFlash 2s ease-in-out 3; } .evt-call .btn-row form { display: flex; flex-wrap: wrap; gap: 10px; }
.call-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; } .call-row { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; background: #0f0d12; border-left: 4px solid #ffb347; font-size: 13px; } .call-row small { color: var(--muted); } .call-row.s-avise { border-left-color: #7be0a0; } .call-row.s-site { border-left-color: #6fb1ff; } .call-row.s-relance { border-left-color: #ff6b6b; } .call-row .btn { padding: 4px 10px; font-size: 12px; margin-top: 4px; }

/* Carte du match en accéléré : bâtiments des deux équipes et fosses du Dragon et du Baron */
.rp-st { position: absolute; width: 4.2%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 4px; background: rgba(8, 6, 12, .78); border: 1.5px solid #6fb1ff; z-index: 1; transition: opacity .5s, filter .5s; } .rp-st.red { border-color: #ff6b6b; } .rp-st i { font-style: normal; font-size: clamp(7px, 1.1vw, 11px); line-height: 1; color: #6fb1ff; } .rp-st.red i { color: #ff6b6b; } .rp-st img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.rp-st.k-inhibiteur { border-radius: 50%; width: 3.8%; } .rp-st.k-nexus { width: 6%; border-radius: 50%; border-width: 2px; box-shadow: 0 0 10px currentColor; color: #6fb1ff; } .rp-st.k-nexus.red { color: #ff6b6b; }
.rp-st.down { opacity: .28; filter: grayscale(1); border-style: dashed; } .rp-st.boom { animation: rpStBoom .9s ease; z-index: 5; } @keyframes rpStBoom { 0% { transform: translate(-50%, -50%) scale(2.6); filter: brightness(3); opacity: 1; box-shadow: 0 0 26px #ffb347; } 60% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } }
.rp-pit { position: absolute; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: rgba(8, 6, 12, .7); border: 1.5px dashed #8a8493; z-index: 1; } .rp-pit i { font-style: normal; font-size: clamp(10px, 1.6vw, 16px); line-height: 1; } .rp-pit img { width: 78%; height: 78%; object-fit: contain; }
.rp-pit b { position: absolute; bottom: -7px; min-width: 14px; padding: 0 3px; border-radius: 99px; font-size: 9.5px; line-height: 14px; text-align: center; color: #06121f; } .rp-pit b:empty { display: none; } .rp-pit b.blue { left: -4px; background: #6fb1ff; } .rp-pit b.red { right: -4px; background: #ff6b6b; }
.rp-pit.take-blue { animation: rpPitB 1.2s ease; border-color: #6fb1ff; border-style: solid; } .rp-pit.take-red { animation: rpPitR 1.2s ease; border-color: #ff6b6b; border-style: solid; } @keyframes rpPitB { 20% { transform: translate(-50%, -50%) scale(2); box-shadow: 0 0 28px #6fb1ff; } } @keyframes rpPitR { 20% { transform: translate(-50%, -50%) scale(2); box-shadow: 0 0 28px #ff6b6b; } }
@media (prefers-reduced-motion: reduce) { .rp-st, .rp-pit { animation: none !important; } }

/* Carte de la chaîne sur un profil ou un mur : rien ne dépasse ; cadre vert en direct, rouge hors ligne, gris si on ne sait pas */
.pf-chan { display: grid; gap: 10px; padding: 14px; border: 2px solid #5a5463; border-radius: 16px; overflow: hidden; min-width: 0; max-width: 100%; box-sizing: border-box; }
.pf-chan.ch-on { border-color: #3fcf7f; box-shadow: 0 0 22px rgba(63, 207, 127, .35); } .pf-chan.ch-off { border-color: #e5484d; }
.ch-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .ch-head h2 { margin: 0; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-head svg { flex: none; }
.ch-state { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; background: #26232a; color: #cfc8dc; } .ch-on .ch-state { background: #12331f; color: #5fe39a; } .ch-off .ch-state { background: #3a1416; color: #ff8a8e; }
.ch-state i { width: 8px; height: 8px; border-radius: 50%; background: #3fcf7f; animation: livePulse 1.1s ease-out infinite; }
.ch-thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #0f0d12; min-width: 0; } .ch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ch-off .ch-thumb img { filter: grayscale(.7) brightness(.7); }
.ch-thumb .lv-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #fff; opacity: 0; background: rgba(0, 0, 0, .35); transition: opacity .2s; } .ch-thumb:hover .lv-play { opacity: 1; } .ch-thumb .lv-view { position: absolute; right: 8px; top: 8px; }
.ch-title { margin: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-btns { display: flex; flex-wrap: wrap; gap: 8px; } .ch-btns .btn { flex: 1 1 auto; text-align: center; padding: 8px 12px; white-space: nowrap; }

.snd-txt div { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 6px; } .snd-txt .btn { padding: 3px 9px; font-size: 12px; flex: none; }

/* Passage en mode réel : banderole d'annonce (choix de conserver son compte) puis « le site est en mode réel » pendant 8 h. */
.golive-bar { position: relative; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; padding: 10px 48px 10px 16px; background: linear-gradient(90deg, #3a1d00, #4a1430); color: #ffe9d6; border-bottom: 2px solid #ff9a3c; font-size: 14px; line-height: 1.45; } .golive-bar[hidden] { display: none; }
.golive-bar p { margin: 0; max-width: 980px; } .golive-bar b { color: #ffc27a; } .golive-bar.live { background: linear-gradient(90deg, #0c2a1a, #10304a); border-color: #3ddc84; color: #dcffe9; } .golive-bar.live b { color: #7cf0ad; }
.golive-bar .gl-ask { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 0; } .golive-bar .gl-ask small { color: #ffd9b3; }
.golive-bar .gl-ask button { cursor: pointer; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 700; border: 2px solid; } .golive-bar .gl-yes { background: #123d24; color: #bfffd6; border-color: #3ddc84; } .golive-bar .gl-no { background: #3d1212; color: #ffc9c9; border-color: #ff6b6b; }
.golive-bar .tb-x { position: absolute; top: 6px; right: 10px; background: none; border: 0; color: inherit; font-size: 24px; cursor: pointer; line-height: 1; }
.dyn-obs .golive-bar { display: none !important; }
.real-name { border: 1px dashed #8a6cff; border-radius: 10px; padding: 8px 12px 10px; margin: 6px 0; } .real-name legend { padding: 0 6px; font-weight: 700; } .rn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .rn-row label { flex: 1 1 180px; }
.lg-news { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #12202e; border: 1px solid #2f5f8a; } .lg-news.same { background: #10261a; border-color: #2e7d4f; } .lg-news.changed { background: #2a1d08; border-color: #c98a2b; }
.lg-diff { max-height: 320px; overflow: auto; margin-top: 6px; } .lg-diff p { margin: 4px 0; padding: 4px 8px; border-radius: 6px; } .lg-diff .add { background: rgba(61, 220, 132, .15); } .lg-diff .del { background: rgba(255, 107, 107, .15); text-decoration: line-through; }
.lg-sign { display: block; margin: 8px 0; } .lg-sign input { font: italic 20px Georgia, serif; } .lg-sign small { display: block; opacity: .8; }

.genea .gl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .genea .gl-card { padding: 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); } .genea .gl-ico { font-size: 30px; } .genea .gl-card h3 { margin: 6px 0; } .genea .gl-card p { margin: 0; opacity: .9; }

/* Arbre : outils d'affichage, fiche d'un nom, listes. */
.tree-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; } .tree-tools > span { color: var(--muted); font-size: 13px; margin-right: 4px; } .tree-tools [hidden] { display: none; }
.tree-group { fill: var(--muted); font-size: 14px; font-weight: 700; }
.tree-node.riot text { fill: #ff8a8c; } .tree-mark { fill: none; stroke-width: 2.5; stroke-dasharray: 3 3; stroke: #fff; opacity: .7; }
.tree-node.mk-ami .tree-mark { stroke: #7dffa8; } .tree-node.mk-famille .tree-mark { stroke: #ffd76a; } .tree-node.mk-connaissance .tree-mark { stroke: #8fb8ff; } .tree-node.mk-ennemi .tree-mark { stroke: #ff5d5d; } .tree-node.mk-inconnu .tree-mark { stroke: #77717f; } .tree-node.mk-jamais .tree-mark { stroke: #b08cff; }
.tree-edge.k-riot { stroke: #d13639; stroke-width: 2; stroke-dasharray: 8 3; } .tree-legend .k-riot::before { background: #d13639; }
.tree-card { max-width: 290px; max-height: calc(100% - 24px); overflow: auto; } .tree-card .tc-h { margin-top: 4px; } .tc-kinds, .tc-tags { display: flex; flex-wrap: wrap; gap: 5px; } .tree-card .btn.on { background: var(--accent); color: #0a090c; border-color: var(--accent); }
.tc-kinds .k-ami.on { background: #7dffa8; } .tc-kinds .k-famille.on { background: #ffd76a; } .tc-kinds .k-connaissance.on { background: #8fb8ff; } .tc-kinds .k-ennemi.on { background: #ff5d5d; }
.tl-rows { display: grid; gap: 4px; max-height: 340px; overflow: auto; margin-bottom: 10px; } .tl-row { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; background: rgba(255,255,255,.03); } .tl-row[hidden] { display: none; }
.tl-row > span { flex: 1; min-width: 0; display: grid; } .tl-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-row small { color: var(--muted); font-size: 12px; } .tl-row select { max-width: 150px; }
.tl-box { display: grid; gap: 6px; } .tl-bulk { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; } .tl-msg { margin: 0; padding: 6px 10px; border-radius: 8px; background: #10261a; color: #bfffd6; } .tl-msg[hidden] { display: none; }
.tl-pro { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: #3a2a55; color: #e3c8ff; vertical-align: middle; } .tl-lock { padding: 12px 14px; margin: 10px 0; } .tl-lock p { color: var(--muted); font-size: 14px; } .tl-by-name { margin-top: 10px; }

.tree-side label.tl-row { flex-direction: row; align-items: center; color: inherit; font-size: 14px; cursor: pointer; } .tl-row input[type=checkbox] { flex: none; width: 18px; height: 18px; }
.tl-row select { flex: none; width: auto; } .tl-row.pending { outline: 2px dashed var(--accent); } .tl-tmp { font-style: normal; color: #ffc27a; } .tl-done { color: var(--muted); }
.tl-save { position: sticky; top: 8px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; margin-bottom: 10px; border-radius: 12px; background: #2a1d08; border: 1px solid #c98a2b; color: #ffe0b3; } .tl-save[hidden] { display: none; }
.tree-drafts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; margin: 0 0 10px; border-radius: 12px; background: #2a1d08; border: 1px solid #c98a2b; color: #ffe0b3; } .tree-drafts[hidden] { display: none; }
.tree-edge.draft { stroke-dasharray: 5 5; opacity: .85; animation: treeDraft 1.2s linear infinite; } @keyframes treeDraft { to { stroke-dashoffset: -20; } }

.tree-star { fill: #ffd76a; font-size: 18px; paint-order: stroke; stroke: #0a090c; stroke-width: 3px; pointer-events: none; }
.tree-edge.k-uneven { stroke: #8a8592; stroke-dasharray: 1 6; stroke-linecap: round; stroke-width: 2.4; } .tree-legend .k-uneven::before { background: #8a8592; } .tree-legend .k-star::before { display: none; }
.tc-note { margin: 2px 0; font-size: 13px; color: #ffe0b3; } .tc-note.ok { color: #ffd76a; } .tl-rule { font-size: 12px; }
.tree-asks { padding: 12px 16px; margin-bottom: 14px; border-color: #ffd76a; } .tree-asks h3 { margin: 0 0 4px; } .tree-asks .tl-row { margin-top: 6px; } .tree-asks form { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }

.tl-row-save { flex: none; padding: 4px 9px; animation: tlPulse 1.4s ease-in-out infinite; } @keyframes tlPulse { 50% { box-shadow: 0 0 0 4px rgba(181,101,216,.35); } }
.tree-node.grp circle:first-child { stroke: #ff9a3c; stroke-width: 4; stroke-dasharray: 4 3; }
.tree-block { cursor: move; } .tree-block-t { font-size: 15px; font-weight: 700; pointer-events: none; } .tree-block-h { cursor: nwse-resize; opacity: .7; }
.tree-lasso { fill: rgba(255,154,60,.12); stroke: #ff9a3c; stroke-dasharray: 5 4; }
.tree-tip { color: var(--muted); font-size: 12px; flex-basis: 100%; } .tree-tools [data-pack] { border-color: #ff9a3c; }
.tree-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .tree-swatch.on { border-color: #fff; }
.tree-card input { width: 100%; }
.tree-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60; padding: 10px 16px; border-radius: 12px; background: #1c1622; border: 1px solid var(--accent); color: #fff; max-width: min(92vw, 520px); transition: .25s; } .tree-toast.on { opacity: 1; transform: translate(-50%, 0); }

.tree-q { fill: #fff; font-size: 15px; font-weight: 700; pointer-events: none; paint-order: normal; stroke: none; } .tree-node.anon .tree-q { fill: #8a8592; }
.tree-node image { pointer-events: none; } .tree-node.reveal circle:first-child { animation: treeReveal 1.4s ease-out 3; } @keyframes treeReveal { 0% { stroke: #ffd76a; stroke-width: 12; } 100% { stroke-width: 2; } }
.tc-pic { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }

.tl-cut { display: none !important; } .tl-box.searching .tl-cut { display: flex !important; } .tl-box.searching .tl-cut[hidden] { display: none !important; } .tl-tall { max-height: 520px; }
.tl-daily { padding: 10px 12px; margin: 6px 0 8px; border-radius: 12px; background: #161226; border: 1px solid #5b3f9a; font-size: 14px; } .tl-daily small { display: block; color: var(--muted); margin-top: 4px; }
.tl-bar { height: 8px; border-radius: 99px; background: #2a2340; margin-top: 6px; overflow: hidden; } .tl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b565d8, #ffd76a); transition: width .4s; }

.tree-ring { fill: none; stroke-width: 4; } .tree-bend { fill: #ff9a3c; stroke: #0a090c; stroke-width: 2; cursor: move; } .tree-bend.ghost { fill: #fff; opacity: .55; }
.tree-edge.k-duo { stroke: #ff7ad9; stroke-width: 2.6; } .tree-edge.k-trio { stroke: #ff9a3c; stroke-width: 2.4; } .tree-edge.k-flex { stroke: #5ee7ff; } .tree-edge.k-cinq { stroke: #3ddc84; stroke-width: 2.4; }
.tree-edge.k-plusieurs { stroke: #a9a3ff; } .tree-edge.k-unmatch { stroke: #6f6a78; stroke-dasharray: 2 4; } .tree-edge.k-pasintime { stroke: #c7a6ff; stroke-dasharray: 8 4; } .tree-edge.k-hasbeen { stroke: #8c7a5b; stroke-dasharray: 10 4 2 4; }
.tree-swatch.none { background: transparent; color: var(--muted); font-size: 12px; border-color: var(--line); } .tc-tags > small { min-width: 44px; align-self: center; }
.tc-since { color: #c7a6ff; } .tc-secret { border: 1px solid #5b3f9a; border-radius: 10px; padding: 6px 8px; } .tc-secret summary { cursor: pointer; font-weight: 700; } .tc-secret textarea, .tc-secret input { width: 100%; margin: 4px 0; }
.tl-since { display: grid; gap: 4px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: #161226; border: 1px solid #5b3f9a; } .tl-since small { color: var(--muted); }

.ck { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; vertical-align: middle; } .ck-b { background: none; border: 1px solid var(--line); border-radius: 8px; color: inherit; cursor: pointer; padding: 1px 7px; font-size: 15px; }
.ck.on .ck-b, .ck-all.on .ck-b { background: #123d24; border-color: #3ddc84; color: #bfffd6; } .ck-n { width: 120px; padding: 2px 6px; font-size: 13px; border-radius: 6px; } .ck.on .ck-n { border-color: #3ddc84; }
.ck-all { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); } .ck-all .ck-b { padding: 6px 12px; font-weight: 700; } .ck-all .ck-n { width: 200px; }
.ck-bot { font-style: normal; color: #ffd76a; } .ck-legend { max-width: 980px; margin: 0 auto 14px; padding: 10px 14px; border-radius: 12px; background: #161226; border: 1px solid #5b3f9a; }

.wf-canvas { overflow: auto; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 30%, #17131d, #0a090c); padding: 10px; }
.wf-canvas svg { display: block; max-width: none; } .wf-edge { fill: none; stroke-width: 2.4; opacity: .8; } .wf-num { fill: #fff; font: 700 13px system-ui, sans-serif; } .wf-flow { fill: #0a090c; font: 800 14px system-ui, sans-serif; } .wf-label { fill: #e9e6ee; font: 12px system-ui, sans-serif; }
.wf-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; } .wf-sec { padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.wf-sec h2 { margin: 0 0 6px; font-size: 18px; border-left: 6px solid var(--c); padding-left: 8px; } .wf-sec ol { margin: 0; padding-left: 26px; } .wf-sec li { margin: 4px 0; } .wf-sec ul { margin: 2px 0 6px; padding-left: 16px; color: var(--muted); font-size: 14px; }
@media print { body { background: #fff !important; color: #000 !important; } .site-header, .site-footer, nav, .golive-bar, .test-bar, .live-wrap, [data-print] { display: none !important; } .wf-canvas { background: #fff; border: 0; overflow: visible; } .wf-canvas svg { width: 100%; height: auto; } .wf-label { fill: #000; } .wf-node circle[fill="#17131d"] { fill: #fff; } .wf-num { fill: #000; } .wf-sec { break-inside: avoid; border-color: #999; } .wf-sec ul { color: #333; } }

.fb-drop { display: grid; gap: 6px; padding: 14px; border: 2px dashed #5b3f9a; border-radius: 14px; background: #161226; } .fb-drop.over, .fb-drop.flash { border-color: #ffd76a; background: #231a33; } .fb-drop span, .fb-drop small { color: var(--muted); font-size: 14px; }
.fb-thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .fb-thumb { position: relative; } .fb-thumb img { width: 110px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); } .fb-thumb button { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #ff5d5d; color: #fff; cursor: pointer; }
.fb-item h2 small { font-size: 14px; color: var(--muted); } .fb-body { margin: 8px 0; padding: 10px 14px; border-left: 4px solid var(--accent); background: rgba(255,255,255,.03); border-radius: 8px; }
.fb-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .fb-imgs img { max-width: 240px; max-height: 170px; border-radius: 8px; border: 1px solid var(--line); } .fb-filters .chip.on { border-color: var(--accent); }

.tl-daily.top { max-width: 980px; margin: 0 0 12px; } .tl-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--muted); }
.tl-settings { margin: 0 0 12px; border: 1px solid #5b3f9a; border-radius: 14px; padding: 8px 12px; } .tl-settings > summary { cursor: pointer; font-weight: 800; font-size: 16px; padding: 4px 0; }
.tl-share { display: grid; gap: 6px; } .tl-share small { color: var(--muted); } .tl-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tl-filters input, .tl-filters select { width: 100%; }
.tl-row [data-place] { max-width: 90px; }

.tl-wall { display: grid; gap: 6px; } .tl-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; } .tl-row [data-met] { max-width: 92px; }
.dyn-genea img { width: 100%; height: auto; display: block; pointer-events: auto; user-select: none; -webkit-user-drag: none; } .dyn-genea { padding: 6px; }

.tc-meet { display: grid; gap: 5px; padding: 6px 8px; border-radius: 10px; border: 1px solid #3ddc84; } .tc-meet.todo { border-color: #ffd76a; animation: tlPulse 1.6s ease-in-out infinite; } .tc-meet select { width: 100%; }
/* Choix de partage et branches du mur : une ligne par choix, le rond ou la case à gauche, le texte aligné à gauche. */
.tree-side .tl-share label.check, .tree-side .tl-wall label.check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; text-align: left; justify-content: flex-start; width: 100%; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--text, #e9e6ee); font-size: 14px; line-height: 1.35; cursor: pointer; }
.tree-side .tl-share label.check input, .tree-side .tl-wall label.check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; }
.tree-side .tl-share label.check:has(input:checked), .tree-side .tl-wall label.check:has(input:checked) { border-color: var(--accent); background: rgba(181,101,216,.12); }
.tree-side .tl-share label.check:has(input:disabled) { opacity: .55; cursor: not-allowed; } .tl-wall .tl-dot { margin-top: 3px; flex: none; }
.tc-log { display: block; font-size: 12px; color: var(--muted); border-bottom: 1px dotted var(--line); padding: 2px 0; }

.tz { position: fixed; inset: 0; z-index: 70; background: rgba(5,4,8,.72); display: grid; place-items: center; padding: 16px; } .tz[hidden] { display: none; }
.tz-win { width: min(1300px, 100%); height: min(88vh, 900px); display: grid; grid-template-rows: auto 1fr; border-radius: 18px; border: 1px solid var(--accent); background: #0d0b11; overflow: hidden; }
.tz-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); } .tz-crumbs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tz-crumb { background: #1c1622; border: 1px solid var(--line); color: inherit; border-radius: 999px; padding: 3px 10px; cursor: pointer; } .tz-crumb:not(:last-child)::after { content: ' ›'; }
.tz-x { background: none; border: 0; color: inherit; font-size: 26px; cursor: pointer; } .tz-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.tz-canvas { position: relative; background: radial-gradient(circle at 50% 40%, #17131d, #0a090c); min-height: 0; touch-action: none; } .tz-canvas svg { width: 100%; height: 100%; display: block; cursor: grab; }
.tz-side { overflow: auto; padding: 12px; display: grid; align-content: start; gap: 8px; border-left: 1px solid var(--line); } .tz-side h3 { margin: 0; }
.tz-box { display: grid; gap: 3px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); } .tz-box small { color: var(--muted); }
.tz-bars { display: flex; align-items: flex-end; gap: 2px; height: 64px; flex-wrap: wrap; } .tz-bars i { display: block; width: 7px; background: linear-gradient(#ffd76a, #b565d8); border-radius: 2px; } .tz-bars small { flex-basis: 100%; }
.tz-common { margin: 0; padding-left: 16px; font-size: 13px; color: var(--muted); } .tz-common li.before { color: #ffd76a; }
.tree-edge.tz-path { stroke: #ffd76a !important; stroke-width: 5 !important; stroke-dasharray: none !important; } .tree-node.tz-on circle:first-child { stroke: #ffd76a; stroke-width: 4; } .tree-node.tz-shared circle:first-child { stroke: #ffd76a; stroke-width: 3; stroke-dasharray: 4 3; }
@media (max-width: 860px) { .tz-body { grid-template-columns: 1fr; grid-template-rows: 55% 45%; } .tz-side { border-left: 0; border-top: 1px solid var(--line); } }

/* Administration : table des matières en blocs regroupés (un bloc par groupe). */
.toc.toc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; margin: 14px 0 20px; }
.toc-groups .toc-box { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(160deg, rgba(181,101,216,.10), rgba(255,255,255,.02)); border: 1px solid var(--line); }
.toc-groups .toc-box > b { font-size: 15px; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: #e3c8ff; }
.toc-groups .toc-box a { display: block; padding: 5px 8px; border-radius: 8px; border: 0; background: none; font-size: 14px; text-align: left; white-space: normal; } .toc-groups .toc-box a:hover { background: rgba(181,101,216,.18); }
/* Les blocs regroupés ne collent pas en haut (l'ancienne barre de pastilles collait et couvrait toute la page). */
.toc.toc-groups { position: static; top: auto; z-index: auto; padding: 0; background: none; backdrop-filter: none; }
.toc-groups .toc-box { background: #151119; }

.dc-hidden { display: inline-block; filter: blur(4px); user-select: none; letter-spacing: 2px; opacity: .8; }
.dc-vis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; font-size: 14px; }

/* Maillot esport en 3D (/boutique/maillot) */
.jx-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.jx-stage { position: sticky; top: 12px; }
.jx-canvas { width: 100%; border-radius: 16px; background: radial-gradient(circle at 50% 35%, #2a2f45, #0d0f18 70%); overflow: hidden; }
.jx-canvas canvas { display: block; cursor: grab; }
.jx-views { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.jx-form label { display: block; margin: 6px 0; }
.jx-row { display: flex; gap: 12px; flex-wrap: wrap; }
.jx-slot { display: grid; gap: 2px; margin: 8px 0; }
.jx-slot small { opacity: .7; }
.jx-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) { .jx-grid { grid-template-columns: 1fr; } .jx-stage { position: static; } }

/* Matricules par groupe : Alpha en rouge, Bêta en jaune, normal sans couleur. */
.mat-alpha { color: #ff4d4f !important; }
.mat-beta { color: #f5c518 !important; }
.pf-tags { display: inline-flex; gap: 6px; margin-left: 8px; flex-wrap: wrap; }
.pf-tag { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.pf-tag-alpha { color: #ff4d4f; } .pf-tag-beta { color: #f5c518; } .pf-tag-alpha_lady { color: #ff7ad9; } .pf-tag-riot, .pf-tag-ancien_riot { color: #d13639; }

/* Bandeau « Télécharger l'application » en haut de chaque page, et page /telecharger. */
.dl-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; text-decoration: none; color: #120d00;
  background: linear-gradient(90deg, #f5c518, #ff7a18, #ff3d6e, #f5c518); background-size: 300% 100%; animation: dl-shift 8s linear infinite; font-size: 14px; }
.dl-bar b { letter-spacing: .02em; } .dl-bar span { opacity: .8; font-size: 12px; }
.dl-bar a { color: inherit; text-decoration: none; } .dl-bar .dl-gh { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: rgba(0,0,0,.18); font-weight: 700; font-size: 13px; }
.dl-bar .dl-gh svg { fill: currentColor; } .dl-bar .dl-gh:hover { background: rgba(0,0,0,.3); }
.hero-dl { text-align: center; margin: 18px 0 0; }
.dl-bar:hover { filter: brightness(1.08); }
@keyframes dl-shift { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .dl-bar { animation: none; } }
.dl-big { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0; }
.dl-btn { font-size: 18px; padding: 14px 26px; }
/* Fond du profil en vidéo (MP4/WebM), sous le contenu. */
.pf-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pf-bg-video, .pf-banner-video { display: none; } }