/*
 * Page d'accueil d'un serveur Discord pour ses membres (assistant/discord/user_home.html).
 * S'appuie sur les composants et variables de pyl-pages.css (pyl-card, pyl-grid, --section-rgb, --pyl-muted…).
 */

/* ---------- En-tête ---------- */
.pyl-gh-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pyl-gh-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--section-rgb), 0.35);
    background: rgba(var(--section-rgb), 0.1);
    color: #e5e7eb;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
a.pyl-gh-chip:hover { border-color: rgba(var(--section-rgb), 0.7); color: #fff; }
.pyl-gh-chip i { color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.pyl-gh-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4e6e; box-shadow: 0 0 0 0 rgba(239, 78, 110, 0.7); animation: pyl-gh-pulse 1.8s infinite; }
@keyframes pyl-gh-pulse { 70% { box-shadow: 0 0 0 8px rgba(239, 78, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 78, 110, 0); } }
.pyl-gh-icon { width: 88px; height: 88px; border-radius: 22px; object-fit: cover; border: 1px solid var(--pyl-line); }

/* ---------- Mon activité ---------- */
.pyl-gh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pyl-gh-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pyl-gh-stat-head h3 { margin: 0; }
.pyl-gh-big { font-size: 2.2rem; font-weight: 800; line-height: 1; color: #fff; }
.pyl-gh-big small { font-size: 0.85rem; font-weight: 600; color: var(--pyl-muted); margin-left: 6px; }
.pyl-gh-rank { font-weight: 800; color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.pyl-gh-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pyl-gh-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--section-rgb), 0.7), rgb(var(--section-rgb))); }
.pyl-gh-sub { margin: 0; font-size: 0.82rem; color: var(--pyl-muted); }
.pyl-gh-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.pyl-gh-figures div { padding: 10px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.pyl-gh-figures strong { display: block; font-size: 1.3rem; color: #fff; }
.pyl-gh-figures span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pyl-muted); }

/* ---------- Le serveur en ce moment ---------- */
.pyl-gh-live { display: grid; grid-template-columns: 148px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 18px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.03); text-decoration: none; color: inherit; transition: border-color 0.2s; }
.pyl-gh-live:hover { border-color: rgba(var(--section-rgb), 0.6); color: inherit; }
.pyl-gh-live img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #000; }
.pyl-gh-live strong { display: block; color: #fff; }
.pyl-gh-live p { margin: 2px 0 0; font-size: 0.82rem; color: var(--pyl-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pyl-gh-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pyl-gh-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.pyl-gh-list strong { color: #fff; }
.pyl-gh-list span { font-size: 0.82rem; color: var(--pyl-muted); text-align: right; }
.pyl-gh-empty { margin: 0; padding: 14px 4px; font-size: 0.9rem; color: var(--pyl-muted); }

/* ---------- Classements ---------- */
.pyl-gh-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.pyl-gh-tab {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--pyl-line);
    background: transparent;
    color: var(--pyl-muted);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pyl-gh-tab:hover { color: #fff; border-color: rgba(var(--section-rgb), 0.5); }
.pyl-gh-tab[aria-selected="true"] { color: #fff; background: rgba(var(--section-rgb), 0.2); border-color: rgba(var(--section-rgb), 0.6); }
.pyl-gh-tab:focus-visible { outline: 2px solid rgb(var(--section-rgb)); outline-offset: 2px; }
.pyl-gh-panel[hidden] { display: none; }
.pyl-gh-board { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pyl-gh-row { display: grid; grid-template-columns: 56px 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.04); }
.pyl-gh-row.is-me { border-color: rgba(var(--section-rgb), 0.6); background: rgba(var(--section-rgb), 0.12); }
.pyl-gh-pos { font-weight: 800; color: var(--pyl-muted); text-align: center; }
.pyl-gh-row:nth-child(-n+3) .pyl-gh-pos { font-size: 1.25rem; }
.pyl-gh-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; color: var(--pyl-muted); }
.pyl-gh-who { min-width: 0; }
.pyl-gh-who strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.pyl-gh-who span { font-size: 0.8rem; color: var(--pyl-muted); }
.pyl-gh-score { text-align: right; font-weight: 800; color: #fff; white-space: nowrap; }
.pyl-gh-score small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--pyl-muted); }
.pyl-gh-week { margin: 0 0 12px; font-size: 0.85rem; color: var(--pyl-muted); }

/* ---------- Comment jouer ici ---------- */
.pyl-gh-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.pyl-gh-pill { padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: rgba(var(--section-rgb), 0.14); border: 1px solid rgba(var(--section-rgb), 0.35); color: #fff; }
.pyl-gh-pill--channel { background: rgba(255, 255, 255, 0.06); border-color: var(--pyl-line); color: var(--pyl-muted); }

@media (max-width: 575px) {
    .pyl-gh-row { grid-template-columns: 40px 36px 1fr auto; gap: 8px; padding: 8px 10px; }
    .pyl-gh-live { grid-template-columns: 1fr; }
    .pyl-gh-icon { width: 64px; height: 64px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pyl-gh-live-dot { animation: none; } }

/* ---------- Page « Gestion » (assistant/discord/admin_home.html) ---------- */

/* Alertes */
.pyl-gh-alerts { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pyl-gh-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 18px; border: 1px solid rgba(var(--alert-rgb), 0.45); background: rgba(var(--alert-rgb), 0.1); --alert-rgb: 32, 223, 223; }
.pyl-gh-alert--danger { --alert-rgb: 239, 78, 110; }
.pyl-gh-alert--warning { --alert-rgb: 255, 193, 7; }
.pyl-gh-alert > i { font-size: 1.4rem; color: rgb(var(--alert-rgb)); }
.pyl-gh-alert strong { display: block; color: #fff; }
.pyl-gh-alert p { margin: 2px 0 0; font-size: 0.88rem; color: #d1d5db; }

/* Tuiles de modules */
.pyl-gh-modules { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pyl-gh-modules li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.04); color: var(--pyl-muted); }
.pyl-gh-modules li.is-on { color: #fff; border-color: rgba(var(--section-rgb), 0.55); background: rgba(var(--section-rgb), 0.14); }
.pyl-gh-modules li.is-on i { color: rgb(var(--section-rgb)); }
.pyl-gh-modules li.is-locked { opacity: 0.6; }
.pyl-gh-modules em { font-size: 0.68rem; font-style: normal; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffc107; }

/* Quotas */
.pyl-gh-quotas { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.pyl-gh-quotas strong { color: #fff; }
.pyl-gh-quotas .pyl-gh-sub { margin-top: 6px; }
.pyl-gh-quotas a { color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.pyl-gh-bar.is-warn > span { background: linear-gradient(90deg, #f59e0b, #ffc107); }
.pyl-gh-bar.is-full > span { background: linear-gradient(90deg, #ef4e6e, #f97393); }

/* Journal */
.pyl-gh-tag { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255, 255, 255, 0.08); color: var(--pyl-muted); }
.pyl-gh-tag.is-on { background: rgba(var(--section-rgb), 0.18); color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }

/* Ancien contenu (informations, liaison des comptes, statistiques, abonnement) harmonisé avec le style actuel */
.pyl-gh-legacy .card { border-radius: 24px; border: 1px solid var(--pyl-line); background: var(--pyl-surface); box-shadow: none; }
.pyl-gh-legacy .card .hr-horizontal { opacity: 0.35; }
.pyl-gh-legacy .card-body > .d-flex h4 { font-weight: 800; }
#subscription { scroll-margin-top: 100px; }

@media (max-width: 575px) {
    .pyl-gh-alert { grid-template-columns: auto 1fr; }
    .pyl-gh-alert .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- En-tête compact (pages d'accueil membre et « Gestion ») ---------- */
.pyl-gh-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 18px;
    border-radius: 20px;
    border: 1px solid var(--pyl-line);
    background: radial-gradient(70% 160% at 100% 0%, rgba(var(--section-rgb), 0.14) 0%, rgba(var(--section-rgb), 0) 70%), var(--pyl-surface);
}
.pyl-gh-head-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; object-fit: cover; border: 1px solid var(--pyl-line); }
.pyl-gh-head-text { flex: 1 1 200px; min-width: 0; }
.pyl-gh-head-text h1 { margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pyl-gh-head-text p { margin: 2px 0 0; font-size: 0.82rem; color: var(--pyl-muted); }
.pyl-gh-head .pyl-gh-chips { gap: 6px; }
.pyl-gh-head .pyl-gh-chip { padding: 3px 10px; font-size: 0.78rem; }
.pyl-gh-head-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* ---------- Offres et abonnement ---------- */
.pyl-gh-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pyl-gh-toggle.is-active { background: rgba(255, 193, 7, 0.2); border-color: rgba(255, 193, 7, 0.6); color: #ffc107; }
.pyl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding-top: 12px; }
.pyl-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 22px; border: 1px solid var(--pyl-line); background: radial-gradient(90% 60% at 100% 0%, rgba(var(--section-rgb), 0.1) 0%, rgba(var(--section-rgb), 0) 70%), var(--pyl-surface); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.pyl-plan:hover { transform: translateY(-4px); border-color: rgba(var(--section-rgb), 0.6); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
/* Carte marquée : plan actuel ou niveau populaire (jamais les deux marquages cumulés sur une même carte) */
.pyl-plan.is-current, .pyl-plan.is-marked { border-color: rgba(var(--section-rgb), 0.85); background: radial-gradient(100% 70% at 50% 0%, rgba(var(--section-rgb), 0.24) 0%, rgba(var(--section-rgb), 0) 70%), var(--pyl-surface); box-shadow: 0 0 0 1px rgba(var(--section-rgb), 0.3), 0 16px 40px rgba(var(--section-rgb), 0.12); }
.pyl-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 14px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; white-space: nowrap; background: rgb(var(--section-rgb)); color: #031316; }
.pyl-plan-head { display: flex; align-items: center; gap: 12px; }
.pyl-plan-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-size: 1.2rem; color: #fff; background: rgba(var(--section-rgb), 0.2); border: 1px solid rgba(var(--section-rgb), 0.4); }
.pyl-plan h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #fff; }
.pyl-plan-tag { margin: -4px 0 0; font-size: 0.85rem; color: var(--pyl-muted); }
.pyl-plan-price { font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1.1; }
.pyl-plan-price small { font-size: 0.8rem; font-weight: 600; color: var(--pyl-muted); }
.pyl-plan-price s { display: block; font-size: 0.9rem; font-weight: 600; color: var(--pyl-muted); }
.pyl-plan-note { margin: 0; font-size: 0.8rem; color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.pyl-plan p { margin: 0; font-size: 0.88rem; color: var(--pyl-muted); }
.pyl-plan ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pyl-plan li { display: flex; gap: 8px; font-size: 0.86rem; color: #d1d5db; }
.pyl-plan li i { flex: none; margin-top: 3px; color: rgb(var(--section-rgb)); }
.pyl-plan-action { margin-top: auto; padding-top: 6px; }
.pyl-plan-action .btn { width: 100%; }
.pyl-plan-state { display: block; padding: 7px 12px; border-radius: 12px; text-align: center; font-size: 0.85rem; font-weight: 700; border: 1px solid var(--pyl-line); color: var(--pyl-muted); }
.pyl-plan-state.is-current { border-color: rgba(var(--section-rgb), 0.6); background: rgba(var(--section-rgb), 0.14); color: #fff; }
.pyl-plan-state.is-trial { border-color: rgba(239, 78, 110, 0.6); background: rgba(239, 78, 110, 0.14); color: #fff; }

/* ---------- Statistiques ---------- */
.pyl-gh-periods { display: flex; flex-wrap: wrap; gap: 8px; }
.pyl-gh-period { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--pyl-line); background: transparent; color: var(--pyl-muted); font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.pyl-gh-period:hover { color: #fff; border-color: rgba(var(--section-rgb), 0.5); }
.pyl-gh-period.is-active { color: #fff; background: rgba(var(--section-rgb), 0.2); border-color: rgba(var(--section-rgb), 0.6); }
.pyl-gh-dates { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.pyl-gh-dates label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pyl-muted); }
.pyl-input { padding: 7px 10px; border-radius: 12px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.05); color: #fff; color-scheme: dark; }
.pyl-input:focus-visible { outline: 2px solid rgb(var(--section-rgb)); outline-offset: 1px; }

/* ---------- Informations et liaison des comptes ---------- */
.pyl-gh-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; color: #d1d5db; }
.pyl-gh-facts li { display: flex; align-items: baseline; gap: 8px; }
.pyl-gh-facts i { flex: none; width: 18px; text-align: center; color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.pyl-gh-facts li.is-sub { padding-left: 18px; color: var(--pyl-muted); }
.pyl-gh-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pyl-gh-linked { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(var(--section-rgb), 0.5); background: rgba(var(--section-rgb), 0.12); color: #fff; font-weight: 700; }

/* ---------- Fenêtre de comparaison des offres ---------- */
dialog.pyl-dialog { width: min(1000px, 96vw); max-height: 90vh; padding: 0; border: 1px solid var(--pyl-line); border-radius: 24px; background: #0d0d12; color: var(--pyl-text, #e8ecf5); }
dialog.pyl-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.pyl-dialog-head, .pyl-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.pyl-dialog-head { border-bottom: 1px solid var(--pyl-line); }
.pyl-dialog-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #fff; }
.pyl-dialog-foot { border-top: 1px solid var(--pyl-line); justify-content: flex-end; }
.pyl-dialog-body { max-height: calc(90vh - 130px); overflow: auto; }
.pyl-compare { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.pyl-compare th, .pyl-compare td { padding: 10px 14px; border-bottom: 1px solid var(--pyl-line); vertical-align: top; text-align: left; }
.pyl-compare thead th { position: sticky; top: 0; z-index: 1; background: #15151d; color: #fff; font-weight: 800; text-align: center; }
.pyl-compare thead th:first-child { text-align: left; }
.pyl-compare td.is-center { text-align: center; }
.pyl-compare-category td { background: rgba(var(--section-rgb), 0.12); font-weight: 800; color: #fff; }
.pyl-compare-name { display: flex; align-items: center; gap: 8px; color: #fff; }
.pyl-compare-desc, .pyl-compare-limit { display: block; font-size: 0.78rem; color: var(--pyl-muted); }
.is-yes { color: #22c55e; font-size: 1.1rem; }
.is-no { color: #ef4e6e; font-size: 1.1rem; }

/* ---------- Écran de chargement ---------- */
.pyl-loader { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; background: rgba(0, 0, 0, 0.8); color: #fff; text-align: center; }
.pyl-loader[hidden] { display: none; }
.pyl-loader p { margin: 14px 0 0; font-size: 1.1rem; }
.pyl-spinner { display: inline-block; width: 3rem; height: 3rem; border-radius: 50%; border: 4px solid rgba(255, 193, 7, 0.25); border-top-color: #ffc107; animation: pyl-spin 0.8s linear infinite; }
@keyframes pyl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pyl-spinner { animation-duration: 2.4s; } }

@media (max-width: 575px) {
    .pyl-gh-head-actions { margin-left: 0; }
    .pyl-gh-head-text h1 { white-space: normal; }
}

/* Un élément marqué [hidden] reste masqué même quand sa classe définit un affichage (grille, flex…) */
.pyl-page [hidden],
.pyl-dialog [hidden] { display: none !important; }

/* ---------- Onglets de page ---------- */
.pyl-gh-pagetabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; border-bottom: 1px solid var(--pyl-line); scrollbar-width: thin; }
.pyl-gh-tab--page { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 14px 14px 0 0; border-color: transparent; border-bottom: 0; white-space: nowrap; }
.pyl-gh-tab--page[aria-selected="true"] { background: rgba(var(--section-rgb), 0.18); border-color: rgba(var(--section-rgb), 0.5); }
.pyl-gh-tab-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; background: #ef4e6e; color: #fff; }
.pyl-gh-panel--page { display: flex; flex-direction: column; gap: 28px; padding-top: 20px; }
.pyl-gh-panel--page[hidden] { display: none; }

/* ---------- Page « Configuration » (assistant/discord/global/config.html) ---------- */
.pyl-gh-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.pyl-gh-wide { grid-column: 1 / -1; }
.pyl-gh-form { display: flex; flex-direction: column; gap: 10px; }
.pyl-gh-form label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pyl-muted); }
.pyl-gh-form .form-check label { text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 600; color: #fff; }
.cmd-actions-left { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.pyl-gh-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pyl-gh-inline { display: flex; gap: 8px; }
.pyl-input--wide { width: 100%; min-width: 0; }
select.pyl-input option, select.pyl-input optgroup { background: #15151d; color: #fff; }
.pyl-gh-hint { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 0.82rem; color: #ffc107; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.35); }
.pyl-gh-hint[hidden] { display: none; }
.pyl-gh-facts--stack { grid-template-columns: 1fr; }
.pyl-gh-auth { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.pyl-gh-auth-info h4 { margin: 14px 0 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pyl-muted); }
.pyl-gh-auth-info h4:first-child { margin-top: 0; }
.pyl-gh-can, .pyl-gh-cannot { display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 0.88rem; color: #d1d5db; }
.pyl-gh-can li, .pyl-gh-cannot li { display: flex; gap: 8px; }
.pyl-gh-can i { flex: none; margin-top: 3px; color: #22c55e; }
.pyl-gh-cannot i { flex: none; margin-top: 3px; color: #ef4e6e; }
.pyl-gh-auth-info .pyl-gh-alert { margin-top: 14px; }
.pyl-gh-members { display: flex; flex-direction: column; gap: 8px; }
.pyl-gh-members:empty { display: none; }
.pyl-gh-member-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pyl-gh-member { padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: rgba(255, 255, 255, 0.07); color: #e5e7eb; }
.pyl-gh-state.is-missing { background: rgba(239, 78, 110, 0.2); color: #ff8aa1; }
.pyl-gh-state.is-on { text-transform: none; letter-spacing: 0; }

@media (max-width: 575px) {
    .pyl-gh-config { grid-template-columns: 1fr; }
}

/* ---------- Page Wizebot (assistant/discord/global/wizebot.html) ---------- */
/* Le pied de page cherche un .card-body dans chaque formulaire nommé (verrou de module, abonnement) : on le garde sans son style de carte */
.pyl-wz-card { position: relative; }
.pyl-wz-card form { display: contents; }
.pyl-wz-body.card-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: 0; background: none; border: 0; }
.pyl-wz-body label { margin-top: 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pyl-muted); }
.pyl-wz-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; font-size: 0.88rem; color: #d1d5db; }
.pyl-wz-steps--plain { list-style: none; padding-left: 0; }
.pyl-wz-steps a { color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.pyl-wz-steps code, .pyl-gh-sub code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-size: 0.82em; color: #fff; word-break: break-all; }
.pyl-wz-preview { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(var(--section-rgb), 0.45); background: rgba(var(--section-rgb), 0.07); }
.pyl-wz-preview-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pyl-muted); }
.pyl-wz-preview p { margin: 0; color: #fff; overflow-wrap: anywhere; }
.pyl-wz-preview small { color: var(--pyl-muted); }
.pyl-wz-emote { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; margin: 0 2px; }
.pyl-gh-test { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); color: #fff; }
.pyl-gh-test p { margin: 4px 0 0; overflow-wrap: anywhere; }
.pyl-gh-test.is-ok { border-color: rgba(60, 200, 120, 0.6); background: rgba(60, 200, 120, 0.1); }
.pyl-gh-test.is-warn { border-color: rgba(240, 180, 40, 0.6); background: rgba(240, 180, 40, 0.1); }
.pyl-gh-test.is-error { border-color: rgba(230, 80, 80, 0.65); background: rgba(230, 80, 80, 0.1); }

/* ---------- Permissions du bot ---------- */
.pyl-gh-chip--ok i { color: #4ade80; }
.pyl-gh-chip--warn i { color: #fbbf24; }
.pyl-gh-chip--bad i { color: #ff8aa1; }
.pc-ok { color: #4ade80; }
.pc-ko { color: #ff8aa1; }
.pc-features li { align-items: center; }
.pc-features li.is-ko { background: rgba(239, 78, 110, 0.1); }
.pc-features strong i { margin-right: 6px; color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 220px; overflow-y: auto; }
.pc-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.82rem; color: #fff; background: rgba(255, 255, 255, 0.07); overflow-wrap: anywhere; }
.pc-chips li.pc-more { color: var(--pyl-muted); background: transparent; }
.pc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pc-details { display: flex; flex-direction: column; gap: 8px; }
.pc-details summary { cursor: pointer; font-weight: 700; color: #fff; }
.pc-all { margin-top: 16px; }
.pc-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pc-perms li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.pc-perms li[hidden] { display: none; }
.pc-perms li[data-granted="0"] { background: rgba(239, 78, 110, 0.1); }
.pc-perms strong { display: block; color: #fff; }
.pc-perms span:not(.pyl-gh-tag):not(.visually-hidden) { font-size: 0.82rem; color: var(--pyl-muted); }
.pc-summary { margin-bottom: 14px; font-size: 0.92rem; }
/* .pyl-gh-panel-loading : voir pyl-pages.css (animation de chargement commune) */

/* ---------- Barre d'onglets défilante (mobile) : dégradé sur le bord où d'autres onglets sont cachés ---------- */
.pyl-gh-pagetabs { position: relative; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.pyl-gh-pagetabs.has-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.pyl-gh-pagetabs.has-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
.pyl-gh-pagetabs.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
@media (max-width: 575.98px) {
    .pyl-gh-tab--page { padding: 9px 14px; font-size: 0.84rem; }
}

/* ---------- Page Discord : onglets contenant le corps des anciennes pages ---------- */
.pyl-discord-panel { padding-top: 16px; }

/* ---------- Onglet Commandes ---------- */
.cmd-intro { margin: 4px 0 14px; }
.cmd-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cmd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cmd-title h3 { margin: 0; font-size: 1.15rem; }
.cmd-icon { display: inline-flex; width: 1.4em; justify-content: center; color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.cmd-icon img { width: 1.2em; height: auto; }
.cmd-syntax { margin: 4px 0 0; font-size: 0.85rem; color: var(--pyl-muted); }
.cmd-syntax code { color: #fff; background: rgba(255, 255, 255, 0.08); padding: 1px 8px; border-radius: 8px; }
.cmd-switch, .cmd-roles-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; flex: none; }
.cmd-switch .form-check-input, .cmd-roles-switch .form-check-input { margin: 0; cursor: pointer; }
.cmd-state { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pyl-muted); }
.cmd-switch input:checked + .cmd-state { color: #4ade80; }
.cmd-text { margin: 0; color: #d1d5db; font-size: 0.92rem; }
.cmd-details summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--pyl-muted); }
.cmd-details ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.85rem; color: #d1d5db; }
.cmd-roles { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.cmd-roles-box { display: flex; flex-direction: column; gap: 8px; }
.cmd-roles-box[hidden] { display: none; }
.cmd-chips { max-height: 110px; }
.cmd-chips li button { border: 0; background: transparent; color: inherit; padding: 0 0 0 4px; line-height: 1; cursor: pointer; }
.cmd-chips li.pc-more { font-size: 0.8rem; }
.cmd-role-list { margin: 0; padding: 0; list-style: none; max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cmd-role-list li { display: flex; align-items: center; }
.cmd-role-list label { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border-radius: 10px; cursor: pointer; color: #fff; font-size: 0.88rem; }
.cmd-role-list label:hover { background: rgba(255, 255, 255, 0.07); }
.cmd-affiliate { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Fenêtre « Limites d'abonnement » : une carte par niveau, sans tableau ---------- */
.pyl-modal.modal-content, #globalModalPlansLimitation .modal-content { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); }
.pyl-modal .modal-header, .pyl-modal .modal-footer, #globalModalPlansLimitation .modal-header, #globalModalPlansLimitation .modal-footer { border-color: rgba(255, 255, 255, 0.08); }
.pyl-modal .modal-title, #globalModalPlansLimitation .modal-title { font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pyl-modal .modal-title i { color: color-mix(in srgb, rgb(var(--section-rgb, 88, 101, 242)) 70%, #fff); }
.pyl-lim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pyl-lim-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); }
.pyl-lim-card.is-current { border-color: rgba(var(--section-rgb, 88, 101, 242), 0.8); background: rgba(var(--section-rgb, 88, 101, 242), 0.14); }
.pyl-lim-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pyl-lim-level { margin: 0; font-weight: 800; color: #fff; font-size: 1rem; }
.pyl-lim-badge { padding: 1px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(var(--section-rgb, 88, 101, 242), 0.35); color: #fff; white-space: nowrap; }
.pyl-lim-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pyl-lim-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.pyl-lim-label { font-size: 0.82rem; color: #d1d5db; }
.pyl-lim-cell { text-align: right; flex: none; }
.pyl-lim-yes { color: #4ade80; font-weight: 800; }
.pyl-lim-no { color: #ff8aa1; font-weight: 700; }
.pyl-lim-none { color: var(--pyl-muted, #9ca3af); }
.pyl-lim-value { color: #fff; font-weight: 800; white-space: nowrap; }
@media (max-width: 767.98px) {
    .pyl-lim-grid { grid-template-columns: 1fr; }
    .pyl-lim-card.is-current { order: -1; }
}
.cmd-roles-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cmd-count { font-size: 0.85rem; font-weight: 700; color: #fff; }
.cmd-only { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #d1d5db; cursor: pointer; margin: 0; }
.cmd-role-list li[hidden] { display: none; }
.cmd-blocked { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 193, 7, 0.45); background: rgba(255, 193, 7, 0.1); }
.cmd-blocked > i { font-size: 1.3rem; color: #ffc107; }
.cmd-blocked strong { display: block; color: #fff; }
.cmd-blocked p { margin: 2px 0 0; font-size: 0.85rem; color: #e5e7eb; }
@media (max-width: 575.98px) { .cmd-blocked { grid-template-columns: auto 1fr; } .cmd-blocked .btn { grid-column: 1 / -1; } }
.pyl-card.is-blocked .cmd-roles, .pyl-card.is-blocked .cmd-affiliate { opacity: 0.55; }
.cmd-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cmd-field { display: flex; flex-direction: column; gap: 6px; }
.cmd-field label { font-weight: 700; font-size: 0.88rem; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cmd-field textarea { resize: vertical; min-height: 84px; }
.cmd-hint { margin-left: auto; color: var(--pyl-muted, #9ca3af); font-size: 0.75rem; }
.cmd-subsection { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.cmd-subsection > h4 { margin: 0; font-size: 0.95rem; font-weight: 800; color: #fff; }
.cmd-linked { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #d1d5db; }
.cmd-linked .is-ko { color: #ffc107; }
.cmd-linked .is-ok { color: #4ade80; }
.cmd-configs { display: flex; flex-direction: column; gap: 10px; }
.cmd-config { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
@media (max-width: 575.98px) { .cmd-config { grid-template-columns: 1fr; } }
.cmd-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 14px; }
.cmd-toggles label { display: flex; align-items: center; gap: 8px; color: #e5e7eb; font-size: 0.88rem; cursor: pointer; margin: 0; }
.cmd-toggle-group > strong { display: block; margin-bottom: 6px; color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Onglet Twitch : listes de streamers et réglages avancés ---------- */
.cmd-streamers { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.cmd-streamers li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.cmd-streamers img.cmd-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: #1f2937; }
.cmd-streamers .cmd-streamer-name { flex: 1; color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.cmd-streamers .cmd-streamer-kind { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pyl-muted, #9ca3af); }
.cmd-found li { background: rgba(var(--section-rgb, 88, 101, 242), 0.1); }
.cmd-search { display: flex; gap: 8px; }
.cmd-search input { flex: 1; }
.cmd-dialog-body { display: flex; flex-direction: column; gap: 14px; }
.pyl-dialog-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* ---------- Fenêtres d'aide : mise en forme Discord et hébergement de fichiers ---------- */
.pyl-modal-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #e5e7eb; font-size: 0.9rem; }
.pyl-modal-note i { margin-right: 6px; color: color-mix(in srgb, rgb(var(--section-rgb, 88, 101, 242)) 70%, #fff); }
.pyl-md-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pyl-md-list li { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(130px, 1.3fr) minmax(130px, 1.3fr); gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.pyl-md-style { font-weight: 700; color: #fff; }
.pyl-md-list code { color: #fff; background: rgba(255, 255, 255, 0.08); padding: 2px 8px; border-radius: 8px; width: fit-content; overflow-wrap: anywhere; }
.pyl-md-result { color: #e5e7eb; }
.pyl-md-hint { color: var(--pyl-muted, #9ca3af); }
@media (max-width: 575.98px) { .pyl-md-list li { grid-template-columns: 1fr; gap: 6px; } }
.pyl-host-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pyl-host-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); }
.pyl-host-card.is-recommended { border-color: rgba(74, 222, 128, 0.6); background: rgba(74, 222, 128, 0.08); }
.pyl-host-card.is-discouraged { border-color: rgba(239, 78, 110, 0.45); background: rgba(239, 78, 110, 0.07); }
.pyl-host-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pyl-host-card h6 { margin: 0; font-weight: 800; color: #fff; }
.pyl-host-card h6 a { color: #fff; text-decoration: none; }
.pyl-host-card h6 a:hover { text-decoration: underline; }
.pyl-host-card ul { margin: 0; padding-left: 18px; font-size: 0.86rem; color: #d1d5db; display: flex; flex-direction: column; gap: 4px; }
.pyl-host-tag { padding: 1px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pyl-host-tag.is-good { background: rgba(74, 222, 128, 0.25); color: #86efac; }
.pyl-host-tag.is-bad { background: rgba(239, 78, 110, 0.25); color: #ff8aa1; }

/* ---------- Badges Twitch (partenaire / affilié) ---------- */
.cmd-badge { height: 20px; width: auto; flex: none; cursor: help; }

/* ---------- Cartes sans trous (Masonry, ordre de gauche à droite) : voir src/js/pyl_masonry.js ----------
   Sans le script, les cartes restent dans la grille CSS d'origine. Avec lui, le conteneur devient relatif, les cartes sont placées
   par la bibliothèque et leur largeur dépend du nombre de colonnes (--pyl-cols, calculé d'après la largeur réelle du conteneur). */
.pyl-masonry { display: block; position: relative; }
.pyl-masonry > .pyl-masonry-sizer, .pyl-masonry > .pyl-masonry-item { width: calc((100% - (var(--pyl-cols, 1) - 1) * 16px) / var(--pyl-cols, 1)); }
.pyl-masonry > .pyl-masonry-item { margin-bottom: 16px; }
.pyl-masonry > .pyl-masonry-item.pyl-gh-wide { width: 100%; }
/* Carte sur deux colonnes, seulement à partir de 3 colonnes (à 2 colonnes elle serait pleine largeur : elle reste sur une colonne) */
.pyl-masonry > .pyl-masonry-item.pyl-gh-span2 { --span: clamp(1, calc(var(--pyl-cols, 1) - 1), 2); width: calc((100% - (var(--pyl-cols, 1) - 1) * 16px) / var(--pyl-cols, 1) * var(--span) + (var(--span) - 1) * 16px); }
/* Repli si Masonry n'a pas pu démarrer : grille CSS, deux colonnes dès que la place le permet */
@media (min-width: 1100px) { .pyl-gh-config:not(.pyl-masonry) > .pyl-gh-span2 { grid-column: span 2; } }
.pyl-masonry > .pyl-masonry-gutter { width: 16px; }
.pyl-masonry > .pyl-masonry-sizer, .pyl-masonry > .pyl-masonry-gutter { height: 0; visibility: hidden; }
/* Une publicité automatique insérée dans la grille se superposerait aux cartes (positionnées en absolu) : jamais affichée ici */
.pyl-masonry > .google-auto-placed, .pyl-masonry > ins.adsbygoogle { display: none !important; }

/* ---------- Onglets Outils : catalogues (emotes, cadeaux) ---------- */
.tc { display: flex; flex-direction: column; gap: 14px; }
.tc-bar { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.tc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tc-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.88rem; color: #e5e7eb; }
.tc-pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tc-pager[hidden] { display: none; }
.tc-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tc-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); text-align: center; }
.tc-figure { display: flex; align-items: center; justify-content: center; width: 100%; height: 84px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); overflow: hidden; color: var(--pyl-muted, #9ca3af); font-size: 1.6rem; }
.tc-figure img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tc-name { width: 100%; color: #fff; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-meta-line { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.78rem; color: var(--pyl-muted, #9ca3af); }
.tc-platform { padding: 1px 9px; border-radius: 999px; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--tc-color, #666) 55%, transparent); border: 1px solid var(--tc-color, #666); }
.tc-price { color: #ffd54a; font-weight: 800; }
.tc-download { width: 100%; }
.tc-empty { text-align: center; padding: 32px 8px; }
.tc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tc-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.tc-grid--clips { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tc-clip { align-items: stretch; text-align: left; }
.tc-clip .tc-thumb { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, 0.35); }
.tc-clip .tc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tc-clip .tc-duration { position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 8px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.72rem; font-weight: 800; }
.tc-clip .tc-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; }
.tc-clip .tc-meta-line { justify-content: space-between; flex-wrap: wrap; }
.tc-clip .tc-buttons { display: flex; gap: 8px; }
.tc-clip .tc-buttons .btn { flex: 1; }

/* ---------- Barre de filtres et de pagination qui reste visible en haut de l'écran (Outils) ---------- */
.tc-sticky { position: sticky; top: var(--pyl-sticky-top, 52px); z-index: 30; padding: 6px 0; background: var(--pyl-bg, #080808); }
.tc-bar { gap: 8px; padding: 10px 14px; }
.tc-topline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tc-info { flex: 1 1 auto; font-size: 0.88rem; font-weight: 700; color: #fff; }
.tc-topline .tc-pager { margin-left: auto; justify-content: flex-end; }
.tc-toggle { display: none; }
.tc-fields { align-items: end; }
.tc-reset { display: flex; align-items: end; justify-content: flex-start; }
.tc-reset.tc-actions { gap: 8px; flex-wrap: wrap; }
.tc-updated:empty { display: none; }
.tc-grid, .tc-empty { scroll-margin-top: calc(var(--pyl-sticky-top, 52px) + 190px); }
@media (max-width: 767.98px) {
    .tc-toggle { display: inline-flex; align-items: center; gap: 6px; }
    .tc-bar:not(.is-open) .tc-fields { display: none; }
    .tc-grid, .tc-empty { scroll-margin-top: calc(var(--pyl-sticky-top, 52px) + 70px); }
}

/* ---------- Carte de clip : mêmes lignes dans toutes les cartes ---------- */
.tc-clip .tc-name { min-height: 2.7em; line-height: 1.35; }
.tc-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.tc-facts li { display: flex; align-items: center; gap: 8px; height: 22px; font-size: 0.8rem; color: #d1d5db; min-width: 0; }
.tc-facts li i { flex: none; width: 1.1em; text-align: center; color: color-mix(in srgb, rgb(var(--section-rgb, 88, 101, 242)) 70%, #fff); }
.tc-facts li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-clip .tc-buttons { margin-top: auto; }
.tc-player { aspect-ratio: 16 / 9; width: 100%; border-radius: 12px; overflow: hidden; background: #000; }
.tc-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.tc-clip .tc-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: #fff; background: rgba(0, 0, 0, 0); opacity: 0; transition: opacity 0.15s, background 0.15s; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.tc-clip .tc-thumb:hover .tc-play, .tc-clip .tc-thumb:focus-visible .tc-play { opacity: 1; background: rgba(0, 0, 0, 0.35); }
.tc-clip .tc-buttons { flex-direction: column; }
.tc-clip .tc-buttons .btn { flex: none; width: 100%; }

/* ---------- Catalogues : mode liste, regroupement, aperçu, boutons à icône ---------- */
.tc-view { display: inline-flex; gap: 4px; }
.tc-view .btn[aria-pressed="true"] { background: rgba(var(--section-rgb, 88, 101, 242), 0.35); border-color: rgba(var(--section-rgb, 88, 101, 242), 0.7); color: #fff; }
.tc-group { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: #e5e7eb; cursor: pointer; margin: 0; align-self: end; padding-bottom: 6px; }
.tc-group-title { grid-column: 1 / -1; padding: 6px 4px 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pyl-muted, #9ca3af); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.tc-actions-row { display: flex; gap: 6px; width: 100%; }
.tc-actions-row .tc-download { flex: 1; min-width: 0; }
.tc-icon { flex: none; width: 34px; padding-left: 0; padding-right: 0; display: inline-flex; align-items: center; justify-content: center; }
button.tc-figure { border: 0; padding: 0; cursor: zoom-in; }
.tc-preview-stage { display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: 14px; background: repeating-conic-gradient(rgba(255,255,255,0.06) 0% 25%, rgba(0,0,0,0.25) 0% 50%) 50% / 24px 24px; }
.tc-preview-stage img { max-width: 100%; max-height: 320px; object-fit: contain; image-rendering: auto; }
dialog.tc-preview { width: min(520px, 96vw); }
/* Mode liste compacte : une ligne par élément */
.tc-grid--list { grid-template-columns: 1fr; gap: 6px; }
.tc-grid--list .tc-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 10px; text-align: left; }
.tc-grid--list .tc-figure { width: 56px; height: 40px; border-radius: 8px; font-size: 1.1rem; }
.tc-grid--list .tc-name { text-align: left; }
.tc-grid--list .tc-meta-line { justify-content: flex-start; gap: 12px; }
.tc-grid--list .tc-actions-row { width: auto; }
.tc-grid--list .tc-actions-row .tc-download { flex: none; }
@media (max-width: 575.98px) {
    .tc-grid--list .tc-card { grid-template-columns: 48px minmax(0, 1fr) auto; }
    .tc-grid--list .tc-meta-line { display: none; }
}

/* ---------- Clips : sélection, statistiques, dernière recherche, liste compacte ---------- */
.tc-clip { position: relative; }
.tc-select { position: absolute; top: 18px; left: 18px; z-index: 2; margin: 0; padding: 4px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); display: inline-flex; line-height: 1; cursor: pointer; }
.tc-select .form-check-input { margin: 0; width: 1.15em; height: 1.15em; cursor: pointer; }
.tc-selection { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
.tc-last { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); font-size: 0.9rem; color: #e5e7eb; }
.tc-last[hidden] { display: none; }
.tc-stats { padding: 12px 16px; }
.tc-stats summary { cursor: pointer; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.tc-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); min-width: 0; }
.tc-stat span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pyl-muted, #9ca3af); }
.tc-stat strong, .tc-stat a { color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.tc-grid--list.tc-grid--clips .tc-clip { grid-template-columns: 130px minmax(0, 1fr) auto; grid-template-areas: "thumb title buttons" "thumb facts buttons"; align-items: center; padding: 8px 10px 8px 40px; }
.tc-grid--list.tc-grid--clips .tc-thumb { grid-area: thumb; }
.tc-grid--list.tc-grid--clips .tc-name { grid-area: title; min-height: 0; }
.tc-grid--list.tc-grid--clips .tc-facts { grid-area: facts; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
.tc-grid--list.tc-grid--clips .tc-facts li { height: auto; width: auto; max-width: 220px; }
.tc-grid--list.tc-grid--clips .tc-buttons { grid-area: buttons; flex-direction: row; margin-top: 0; }
.tc-grid--list.tc-grid--clips .tc-buttons .btn { width: auto; }
.tc-grid--list.tc-grid--clips .tc-select { top: 50%; left: 8px; transform: translateY(-50%); }
@media (max-width: 767.98px) {
    .tc-grid--list.tc-grid--clips .tc-clip { grid-template-columns: 100px minmax(0, 1fr); grid-template-areas: "thumb title" "thumb facts" "buttons buttons"; }
    .tc-grid--list.tc-grid--clips .tc-buttons { flex-wrap: wrap; }
}

/* ---------- Filtres plus compacts (Outils) ---------- */
.tc-actions-row { justify-content: center; }
.tc-actions-row .tc-download { flex: none; width: 34px; padding-left: 0; padding-right: 0; }
.tc-bar { gap: 6px; padding: 8px 12px; }
.tc-fields { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px 8px; }
.tc-fields .cmd-field { gap: 1px; }
.tc-fields .cmd-field label { margin: 0; font-size: 0.68rem; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; color: var(--pyl-muted, #9ca3af); }
.tc-fields .pyl-input { padding: 3px 8px; font-size: 0.85rem; min-height: 30px; border-radius: 10px; }
.tc-fields .tc-search { grid-column: span 2; }
.tc-fields .btn-sm { padding: 3px 9px; font-size: 0.8rem; }
.tc-reset.tc-actions { grid-column: 1 / -1; gap: 6px; }
.tc-topline { gap: 8px; }
@media (max-width: 575.98px) { .tc-fields .tc-search { grid-column: 1 / -1; } }

/* ---------- Cagnotte du serveur (src/js/pyl-guild-pot.js) : voir aussi le bloc « Cagnotte » en fin de fichier ---------- */

/* Cagnotte à côté de « Ce que tu utilises » (page Gestion) : deux colonnes quand la place le permet */
.pyl-gh-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px 20px; align-items: start; }
.pyl-gh-duo > .pyl-pot-slot { margin-bottom: 0; }
.pyl-gh-duo > [hidden] { display: none; }
.pyl-gh-duo:not(:has(> :not([hidden]))) { display: none; }

/* ---------- Cagnotte (src/js/pyl-guild-pot.js) ---------- */
button.pyl-gh-chip { font: inherit; font-size: inherit; cursor: pointer; }
button.pyl-gh-chip:hover, button.pyl-gh-chip:focus-visible { border-color: rgb(var(--section-rgb)); color: #fff; }
.pyl-pot-coin { height: 1.15em; width: auto; vertical-align: -0.2em; }
.pyl-pot-amount { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pyl-pot-slot { margin-bottom: 20px; }
.pyl-pot { display: grid; gap: 14px; }
.pyl-pot-label { font-size: .85rem; color: var(--pyl-muted); }
.pyl-pot-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pyl-pot-line .pyl-pot-label { font-size: 1rem; }
.pyl-pot-line .pyl-pot-value { font-size: 1.5rem; font-weight: 800; color: #fff; }
.pyl-pot-hint { margin: 0; font-size: .85rem; color: var(--pyl-muted); }
.pyl-pot-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pyl-pot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pyl-pot-top .pyl-pot-actions { margin-left: auto; }
.pyl-pot-main { display: flex; align-items: flex-start; gap: 12px 16px; }
.pyl-pot-main .pyl-pot-progress { flex: 1 1 auto; min-width: 0; }
@media (max-width: 575.98px) {
    .pyl-pot-top .pyl-pot-actions { width: 100%; margin-left: 0; }
    .pyl-pot-top .pyl-pot-actions .btn { flex: 1 1 auto; }
    .pyl-pot-main { flex-direction: column; align-items: stretch; }
    .pyl-pot-main .pyl-pot-use { width: 100%; }
    .pyl-pot-dialog .pyl-dialog-body { padding: 16px; }
    .pyl-pot-head { padding: 14px 16px; }
    .pyl-pot-hero .pyl-pot-value { font-size: 2rem; }
}
.pyl-pot-warn { margin: 0; padding: 9px 12px; border-radius: 12px; font-size: .85rem; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.4); }
.pyl-pot-status { margin: 0; padding: 9px 12px; border-radius: 12px; font-size: .88rem; background: rgba(32, 223, 223, 0.12); border: 1px solid rgba(32, 223, 223, 0.4); }
.pyl-pot-reward { margin: 0; font-size: .85rem; color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.pyl-pot-note { margin: 0; font-size: .82rem; color: var(--pyl-muted); }
.pyl-pot-warn[hidden], .pyl-pot-msg[hidden] { display: none; }

/* Barre de progression à étapes */
.pyl-pot-progress { padding: 4px 34px 0; }
.pyl-pot-rail { position: relative; height: 22px; }
.pyl-pot-track { position: absolute; left: 0; right: 0; top: 6px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pyl-pot-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--section-rgb), 0.7), rgb(var(--section-rgb))); }
.pyl-pot-dot { position: absolute; top: 1px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; display: grid; place-items: center; font-size: .6rem; background: #0d0d12; border: 2px solid rgba(255, 255, 255, 0.3); }
.pyl-pot-dot.is-reached { background: rgb(var(--section-rgb)); border-color: rgb(var(--section-rgb)); color: #fff; }
.pyl-pot-labels { position: relative; height: 44px; }
.pyl-pot-step { position: absolute; top: 2px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; white-space: nowrap; font-size: .8rem; }
.pyl-pot-step strong { font-weight: 700; }
.pyl-pot-step .pyl-pot-amount { font-size: .75rem; color: var(--pyl-muted); }
.pyl-pot-step.is-reached strong { color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
@media (max-width: 420px) { .pyl-pot-progress { padding-inline: 22px; } .pyl-pot-step { font-size: .72rem; } }

/* Fenêtres */
dialog.pyl-pot-dialog { width: min(500px, calc(100vw - 24px)); border-radius: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); background: linear-gradient(180deg, rgba(var(--section-rgb), 0.08), transparent 160px), #0d0d12; overflow: hidden; }
dialog.pyl-pot-dialog[open] { animation: pyl-pot-pop .18s ease-out; }
@keyframes pyl-pot-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { dialog.pyl-pot-dialog[open] { animation: none; } }
.pyl-pot-head { justify-content: flex-start; gap: 14px; padding: 18px 20px 16px; border-bottom: 1px solid var(--pyl-line); }
.pyl-pot-badge { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, rgba(var(--section-rgb), 0.95), rgba(var(--section-rgb), 0.45)); box-shadow: 0 6px 18px rgba(var(--section-rgb), 0.35); }
.pyl-pot-head-text { flex: 1 1 auto; min-width: 0; }
.pyl-pot-head-text h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff; }
.pyl-pot-head-text p { margin: 2px 0 0; font-size: .82rem; color: var(--pyl-muted); }
.pyl-pot-close { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.05); color: #e5e7eb; cursor: pointer; }
.pyl-pot-close:hover, .pyl-pot-close:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; }
.pyl-pot-dialog .pyl-dialog-body { display: grid; gap: 16px; padding: 20px; max-height: calc(90vh - 90px); }
.pyl-pot-dialog .pyl-dialog-body > * { margin: 0; }
.pyl-pot-msg { padding: 10px 14px; border-radius: 12px; font-size: .9rem; background: rgba(32, 223, 100, 0.12); border: 1px solid rgba(32, 223, 100, 0.4); }
.pyl-pot-msg.is-error { background: rgba(239, 78, 110, 0.12); border-color: rgba(239, 78, 110, 0.5); }
.pyl-pot-sub { margin: 0; font-size: .95rem; font-weight: 700; color: #fff; }
.pyl-pot-sub i { margin-right: 6px; color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }

/* Montant mis en avant */
.pyl-pot-hero { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border-radius: 18px; text-align: center; border: 1px solid rgba(var(--section-rgb), 0.35); background: radial-gradient(circle at 50% 0%, rgba(var(--section-rgb), 0.22), rgba(var(--section-rgb), 0.06) 70%); }
.pyl-pot-hero .pyl-pot-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pyl-pot-hero .pyl-pot-value { font-size: 2.4rem; font-weight: 800; line-height: 1.1; color: #fff; }
.pyl-pot-hero .pyl-pot-coin { height: 1em; }
.pyl-pot-hero--row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; text-align: left; }
.pyl-pot-hero--row .pyl-pot-value, .pyl-pot-value--sm { font-size: 1.3rem; }

/* « À quoi ça sert ? » dépliable */
.pyl-pot-why-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.04); color: #e5e7eb; font: inherit; font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer; }
.pyl-pot-why-toggle:hover, .pyl-pot-why-toggle:focus-visible { border-color: rgba(var(--section-rgb), 0.6); }
.pyl-pot-why-toggle > span { flex: 1 1 auto; }
.pyl-pot-chevron { font-size: .75rem; transition: transform .2s; }
.pyl-pot-why-toggle[aria-expanded="true"] .pyl-pot-chevron { transform: rotate(180deg); }
.pyl-pot-why { list-style: none; padding: 4px 0 0; display: grid; gap: 10px; }
.pyl-pot-why[hidden] { display: none; }
.pyl-pot-why li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; line-height: 1.45; }
.pyl-pot-why li i { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--section-rgb), 0.16); color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }

/* Formulaires */
.pyl-pot-form, .pyl-pot-roleform, .pyl-pot-autoform { display: grid; gap: 10px; }
.pyl-pot-form { padding: 16px; border-radius: 18px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.03); }
.pyl-pot-field { position: relative; }
.pyl-pot-field .form-control { padding-right: 44px; }
.pyl-pot-field .pyl-pot-coin { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.pyl-pot-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.pyl-pot-quick-chip { padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(var(--section-rgb), 0.4); background: rgba(var(--section-rgb), 0.1); color: #e5e7eb; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.pyl-pot-quick-chip:hover, .pyl-pot-quick-chip:focus-visible { background: rgba(var(--section-rgb), 0.25); color: #fff; }
.pyl-pot-submit { width: 100%; padding: 10px 16px; font-weight: 700; }

/* Choix du niveau */
.pyl-pot-options { display: grid; gap: 10px; }
.pyl-pot-option { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: border-color .15s, background .15s; }
.pyl-pot-option:hover:not(.is-disabled) { border-color: rgba(var(--section-rgb), 0.6); }
.pyl-pot-option:has(input:checked) { border-color: rgb(var(--section-rgb)); background: rgba(var(--section-rgb), 0.12); }
.pyl-pot-option:has(input:focus-visible) { outline: 2px solid rgb(var(--section-rgb)); outline-offset: 2px; }
.pyl-pot-option.is-disabled { opacity: .55; cursor: not-allowed; }
.pyl-pot-radio { position: absolute; opacity: 0; pointer-events: none; }
.pyl-pot-level-badge { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, rgba(var(--section-rgb), 0.9), rgba(var(--section-rgb), 0.4)); }
.pyl-pot-option-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pyl-pot-option-text strong { color: #fff; }
.pyl-pot-option-text > span { font-size: .85rem; color: var(--pyl-muted); }
.pyl-pot-option-check { font-size: 1.2rem; color: rgb(var(--section-rgb)); opacity: 0; transition: opacity .15s; }
.pyl-pot-option:has(input:checked) .pyl-pot-option-check { opacity: 1; }
.pyl-pot-option .pyl-pot-note { flex-basis: 100%; padding-left: 50px; }

/* Réglages */
.pyl-pot-section { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.03); }
.pyl-pot-switch { display: flex; align-items: flex-start; gap: 12px; padding-left: 0; min-height: 0; }
.pyl-pot-switch .form-check-input { float: none; margin: 4px 0 0; flex: none; }
.pyl-pot-switch .form-check-label { display: grid; gap: 2px; }
.pyl-pot-switch .form-check-label span { font-size: .82rem; color: var(--pyl-muted); }
.pyl-pot-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pyl-pot-entries li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.pyl-pot-entries li:last-child { border-bottom: 0; }
.pyl-pot-entry-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.pyl-pot-entry-icon.is-out { background: rgba(var(--section-rgb), 0.18); color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.pyl-pot-entry-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: .88rem; }
.pyl-pot-entry-text strong { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pyl-pot-entry-text time { font-size: .75rem; color: var(--pyl-muted); }
.pyl-pot-entries .pyl-pot-amount { font-weight: 700; font-size: .9rem; }
.pyl-pot-entries .is-in { color: #4ade80; }

/* Informations */
.pyl-pot-info { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.03); }
.pyl-pot-info h3 { margin: 0; font-size: .95rem; font-weight: 700; color: #fff; }
.pyl-pot-info h3 i { margin-right: 6px; color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff); }
.pyl-pot-info p { margin: 0; font-size: .9rem; }
.pyl-pot-info ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .9rem; }
.pyl-pot-info--key { border-color: rgba(255, 193, 7, 0.5); background: rgba(255, 193, 7, 0.08); }
.pyl-pot-info--key h3 i { color: #ffc107; }

/* ---------- Comment jouer ici : sous-onglets et cartes ---------- */
.pyl-gh-subtabs { margin-bottom: 16px; }
.pyl-gh-tab i { margin-right: 4px; }
.pyl-gh-tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: rgba(255, 255, 255, 0.1); }
.pyl-gh-tab[aria-selected="true"] .pyl-gh-tab-count { background: rgba(var(--section-rgb), 0.45); }
.pyl-gh-howgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; align-items: stretch; }
.pyl-gh-howgrid--commands { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.pyl-gh-howcard, .pyl-gh-cmdcard { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.03); transition: border-color .2s, transform .2s; }
.pyl-gh-howcard:hover, .pyl-gh-cmdcard:hover { border-color: rgba(var(--section-rgb), 0.5); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .pyl-gh-howcard:hover, .pyl-gh-cmdcard:hover { transform: none; } }
.pyl-gh-howcard p, .pyl-gh-cmdcard p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--pyl-muted); }
.pyl-gh-howcard-head { display: flex; align-items: center; gap: 12px; }
.pyl-gh-howcard-head h3 { margin: 0; font-size: 1rem; font-weight: 800; color: #fff; }
.pyl-gh-howicon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, rgba(var(--section-rgb), 0.85), rgba(var(--section-rgb), 0.35)); }
.pyl-gh-cmdtop { display: flex; align-items: center; gap: 12px; }
.pyl-gh-cmdslash { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; font-size: 1.4rem; font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #fff; background: linear-gradient(135deg, rgba(var(--section-rgb), 0.85), rgba(var(--section-rgb), 0.35)); }
.pyl-gh-cmdname { margin: 0; font-size: 1.1rem; font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.pyl-gh-cmdcard p { flex: 1 1 auto; }
.pyl-gh-cmdwhere { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--pyl-line); color: var(--pyl-muted); }

/* Bouton « Utiliser » : grande action de la carte */
.pyl-pot-use { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; min-width: 210px; padding: 10px 16px 10px 10px; border: 0; border-radius: 18px; color: #fff; font: inherit; text-align: left; cursor: pointer; background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 8px 22px rgba(34, 197, 94, 0.28); transition: transform .15s, box-shadow .15s, filter .15s; }
.pyl-pot-use:hover:not(:disabled), .pyl-pot-use:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34, 197, 94, 0.4); filter: brightness(1.08); }
.pyl-pot-use:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pyl-pot-use:disabled { cursor: not-allowed; background: rgba(255, 255, 255, 0.08); box-shadow: none; color: var(--pyl-muted); }
.pyl-pot-use-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; font-size: 1.25rem; background: rgba(255, 255, 255, 0.2); }
.pyl-pot-use:disabled .pyl-pot-use-icon { background: rgba(255, 255, 255, 0.06); }
.pyl-pot-use-text { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.2; }
.pyl-pot-use-text strong { font-size: 1.1rem; font-weight: 800; }
.pyl-pot-use-text small { font-size: .78rem; opacity: .85; }
.pyl-pot-use-arrow { font-size: .8rem; opacity: .8; transition: transform .15s; }
.pyl-pot-use:hover:not(:disabled) .pyl-pot-use-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .pyl-pot-use, .pyl-pot-use-arrow { transition: none; } .pyl-pot-use:hover:not(:disabled) { transform: none; } }

/* Fenêtre d'explication à onglets et renouvellement automatique */
dialog.pyl-pot-dialog--wide { width: min(640px, calc(100vw - 24px)); }
.pyl-pot-tabbed { display: grid; gap: 14px; }
.pyl-pot-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: thin; }
.pyl-pot-tabs .pyl-gh-tab { flex: none; padding: 7px 14px; font-size: .82rem; white-space: nowrap; }
.pyl-pot-tabs .pyl-gh-tab i { margin-right: 6px; }
.pyl-pot-panel { display: grid; gap: 12px; }
.pyl-pot-panel[hidden] { display: none; }
.pyl-pot-auto { margin: 0; padding: 9px 12px; border-radius: 12px; font-size: .85rem; background: rgba(var(--section-rgb), 0.1); border: 1px solid rgba(var(--section-rgb), 0.35); }
.pyl-pot-auto i, .pyl-pot-warn i { margin-right: 4px; }
@media (max-width: 575.98px) { dialog.pyl-pot-dialog--wide { width: calc(100vw - 16px); } }

/* Case « exécution immédiate / perte du droit de rétractation » des fenêtres de la cagnotte */
.pyl-pot-consent { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, 0.03); font-size: .82rem; line-height: 1.4; cursor: pointer; }
.pyl-pot-consent input { flex: none; margin-top: 3px; }
.pyl-pot-consent[hidden] { display: none; }

/* États d'un module pour les serveurs : note d'information (bêta, équipe) et verrou de maintenance */
.cmd-note { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(var(--section-rgb, 32, 223, 223), 0.4); background: rgba(var(--section-rgb, 32, 223, 223), 0.08); }
.cmd-note > i { font-size: 1.2rem; color: rgb(var(--section-rgb, 32, 223, 223)); }
.cmd-note strong { display: block; color: #fff; }
.cmd-note p { margin: 2px 0 0; font-size: 0.85rem; color: #e5e7eb; }
.cmd-blocked--locked { border-color: rgba(239, 78, 110, 0.55); background: rgba(239, 78, 110, 0.1); }
.cmd-blocked--locked > i { color: #ef4e6e; }
.pyl-wz-card[data-locked] .pyl-wz-body > *:not(.cmd-head):not(.cmd-blocked):not(.cmd-note) { opacity: 0.55; pointer-events: none; }

/* Réglages réservés à un niveau d'abonnement : visibles mais grisés, avec le niveau qui les débloque */
.pyl-premium-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; padding: 2px 9px; border-radius: 999px; background: rgba(255, 193, 7, 0.14); color: #ffc107; border: 1px solid rgba(255, 193, 7, 0.45); white-space: nowrap; text-transform: none; }
.is-premium input, .is-premium select, .is-premium .form-check-input, .is-premium > span:not(.pyl-premium-badge) { opacity: 0.55; cursor: not-allowed; }
.cmd-roles-switch.is-premium { cursor: not-allowed; }
.pyl-premium-box { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin: 12px 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(255, 193, 7, 0.55); background: rgba(255, 193, 7, 0.07); }
.pyl-premium-box[hidden] { display: none; }
.pyl-premium-box > i { color: #ffc107; font-size: 1.3rem; }
.pyl-premium-box strong { display: block; color: #fff; }
.pyl-premium-box ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.86rem; color: var(--pyl-muted); }
.pyl-premium-box .pyl-premium-text { flex: 1 1 260px; }

/* Bandeau « multiplicateur d'XP en cours » de l'accueil membre */
.pyl-gh-boost { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(255, 193, 7, 0.55); border-radius: 14px; background: linear-gradient(90deg, rgba(255, 193, 7, 0.16), rgba(255, 193, 7, 0.04)); color: #fff4d1; }
.pyl-gh-boost-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 193, 7, 0.22); color: #ffc107; font-size: 1.15rem; }
.pyl-gh-boost-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pyl-gh-boost-text strong { font-size: 1.02rem; }
.pyl-gh-boost-text span { font-size: 0.88rem; opacity: 0.85; }

/* Bandeau « commandes du tchat Twitch : seulement en live » et mode test (page Twitch du serveur) */
.pyl-live-note { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(145, 71, 255, 0.45); background: rgba(145, 71, 255, 0.1); }
.pyl-live-note > i { font-size: 1.3rem; color: #b98aff; }
.pyl-live-note strong { display: block; color: #fff; }
.pyl-live-note p { margin: 2px 0 0; font-size: 0.85rem; color: #e5e7eb; }
.pyl-live-note.is-test { border-color: rgba(52, 211, 153, 0.55); background: rgba(52, 211, 153, 0.1); }
.pyl-live-note.is-test > i { color: #34d399; }
.pyl-live-note .pyl-live-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 575.98px) { .pyl-live-note { grid-template-columns: auto 1fr; } .pyl-live-note .pyl-live-actions { grid-column: 1 / -1; } }