/* TeamKit — page Participer (9 sept. 2026). Préfixe pp-, accent cyan → violet du site. */
.pp-main { padding-top: 80px; }
.pp-grad { background: linear-gradient(90deg, var(--accent-primary), #7ad8ff 55%, var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-primary); }
.pp-eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--accent-primary); }
.pp-sec { padding: 56px 0; }
.pp-alt { background: var(--bg-secondary); border-block: 1px solid var(--border-color); }
.pp-sec h2 { font-family: var(--font-display); font-size: clamp(1.35rem, 3.2vw, 2rem); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 0; }
.pp-sec h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.pp-sec-h { margin-bottom: 22px; }
.pp-sec-h p { color: var(--text-muted); max-width: 64ch; margin: 8px 0 0; }
.pp-small { font-size: .88rem; color: var(--text-muted); margin: 18px 0 0; }
.pp-small a, .pp-fin a, .pp-tuto a { color: var(--accent-primary); }

/* ---- Héros ---- */
.pp-hero { position: relative; overflow: hidden; padding: 56px 0 44px; border-bottom: 1px solid var(--border-color); text-align: center; }
.pp-hero::before { content: ''; position: absolute; inset: -40% -20% auto; height: 120%; background: radial-gradient(ellipse at 50% 20%, rgba(0,240,255,.10), transparent 60%); pointer-events: none; }
.pp-hero > .container { position: relative; }
.pp-hero h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4.8vw, 3.1rem); font-weight: 800; line-height: 1.08; text-transform: uppercase; letter-spacing: .04em; margin: 10px auto 0; max-width: 20ch; }
.pp-hero h1 small { display: block; font-family: var(--font-body); font-weight: 500; font-size: clamp(1rem, 2.2vw, 1.2rem); text-transform: none; letter-spacing: 0; color: var(--text-secondary); max-width: 62ch; margin: 14px auto 0; line-height: 1.55; }
.pp-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; text-align: left; }
.pp-way { display: flex; flex-direction: column; gap: 6px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 18px 18px 16px; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.pp-way:hover { transform: translateY(-2px); border-color: var(--accent-primary); }
.pp-way.is-main { border-color: rgba(0,240,255,.5); box-shadow: 0 0 0 1px rgba(0,240,255,.25), 0 20px 60px rgba(0,0,0,.35); }
.pp-way-ico { font-size: 1.7rem; line-height: 1; }
.pp-way b { font-family: var(--font-display); font-size: 1.02rem; color: var(--text-primary); }
.pp-way span:not(.pp-way-ico) { font-size: .9rem; color: var(--text-secondary); }
.pp-way em { margin-top: auto; align-self: flex-start; font-style: normal; font-family: var(--font-mono); font-size: .68rem; padding: 4px 8px; border-radius: 6px; background: var(--bg-tertiary); color: var(--text-secondary); }
.pp-way.is-main em { background: rgba(0,240,255,.14); color: var(--accent-primary); }

/* ---- Messages ---- */
.pp-msgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pp-msg { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pp-msg header { display: flex; flex-direction: column; gap: 2px; }
.pp-msg header span { font-size: .82rem; color: var(--text-muted); }
.pp-code { width: 100%; font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; resize: vertical; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); padding: 8px 10px; }
.pp-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Bannière d'un serveur ---- */
.pp-pick { max-width: 760px; margin: 0 auto; position: relative; }
.pp-label { display: block; font-weight: 600; margin-bottom: 8px; }
.pp-label span { font-weight: 400; color: var(--text-muted); font-size: .88rem; }
.pp-liste { display: grid; gap: 4px; margin-top: 8px; max-height: 260px; overflow-y: auto; }
.pp-liste:empty { display: none; }
.pp-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 12px; color: var(--text-primary); cursor: pointer; font: inherit; }
.pp-item:hover, .pp-item.is-actif { border-color: var(--accent-primary); }
.pp-item .pp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-danger, #ef4444); flex: none; }
.pp-item .pp-dot.is-on { background: var(--accent-success, #22c55e); }
.pp-item b { flex: 1; }
.pp-item span { font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.pp-ban { max-width: 860px; margin: 22px auto 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 16px 18px; }
.pp-ban-tailles, .pp-ban-onglets { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.pp-ban-tailles { margin-bottom: .6rem; }
.pp-ban-onglets { margin: .9rem 0 .4rem; }
.pp-ban-img { background: #05070c; border: 1px solid var(--border-color); border-radius: 10px; padding: .75rem; overflow-x: auto; text-align: center; }
.pp-ban-img img { max-width: 100%; height: auto; }
.pp-ban-aide { font-size: .85rem; color: var(--text-muted); margin-bottom: .4rem; }
.pp-ban .pp-actions { justify-content: center; margin-top: .6rem; }

/* ---- Badges ---- */
.pp-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pp-badge-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pp-badge-apercu { display: flex; justify-content: center; padding: 18px; border-radius: 10px; }
.pp-badge-apercu.is-sombre { background: #0b0f1a; }
.pp-badge-apercu.is-clair { background: #f4f6fa; }

/* ---- Tutos ---- */
.pp-tutos { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.pp-tuto { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 0 16px; }
.pp-tuto summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.pp-tuto summary::-webkit-details-marker { display: none; }
.pp-tuto summary::after { content: '+'; margin-left: auto; font-family: var(--font-mono); color: var(--text-muted); }
.pp-tuto[open] summary::after { content: '−'; }
.pp-tuto ol { margin: 0 0 14px 1.2rem; padding: 0; display: grid; gap: 6px; color: var(--text-secondary); font-size: .95rem; line-height: 1.55; }
.pp-tuto code { font-family: var(--font-mono); font-size: .85em; background: var(--bg-tertiary); padding: 1px 6px; border-radius: 4px; }
.pp-fin { text-align: center; color: var(--text-muted); margin: 30px 0 0; }

@media (max-width: 820px) {
  .pp-ways { grid-template-columns: 1fr; }
  .pp-sec { padding: 40px 0; }
}