/* PBC Public UI — V2.2 */
.pbc-public {
    --public-bg: #0d0f12;
    --public-panel: #15181d;
    --public-panel-2: #1b1f25;
    --public-line: rgba(255,255,255,.09);
    --public-text: #f7f8fa;
    --public-muted: #a7adb8;
    --public-yellow: var(--pbc-primary, #ffd400);
    --public-radius: 24px;
    background:
        radial-gradient(circle at 85% 3%, rgba(255,212,0,.09), transparent 25rem),
        #0d0f12 !important;
    color: var(--public-text) !important;
    min-height: 100vh;
}

.pbc-public .container.public-container {
    max-width: 1180px;
    padding-top: 38px;
}

.pbc-public .public-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(13,15,18,.88) !important;
    backdrop-filter: blur(18px);
    border: 0;
    border-bottom: 1px solid var(--public-line);
}

.public-header-inner {
    max-width: 1180px;
    min-height: 76px;
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.public-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: #fff;
    min-width: 0;
}

.public-brand-logo,
.public-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    object-fit: contain;
    background: var(--public-yellow);
    color: #111;
    padding: 5px;
    font-size: 1.35rem;
}

.public-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.public-brand-copy strong {
    font-size: .98rem;
    letter-spacing: .02em;
}

.public-brand-copy small {
    color: var(--public-muted);
    font-size: .72rem;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 230px;
}

.pbc-public .public-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin-left: auto;
    flex-wrap: nowrap;
}

.pbc-public .public-nav a {
    color: #d9dde3;
    text-decoration: none;
    border-radius: 12px;
    padding: 9px 10px;
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
    transition: .2s ease;
}

.pbc-public .public-nav a:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

.pbc-public .public-nav .public-login {
    background: var(--public-yellow);
    color: #111;
    margin-left: 8px;
    padding-inline: 14px;
}

.public-nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border: 1px solid var(--public-line);
    border-radius: 12px;
    background: #171a1f;
    padding: 10px;
}

.public-nav-toggle span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 99px;
    margin: 4px 0;
}

.pbc-public .pbc-public-banner {
    background: rgba(255,212,0,.12);
    color: #ffe77a;
    border: 1px solid rgba(255,212,0,.24);
    margin-bottom: 22px;
    border-radius: 14px;
}

.public-home-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--public-line);
    background:
        linear-gradient(135deg, rgba(255,212,0,.06), transparent 42%),
        #13161b;
    border-radius: 30px;
    padding: clamp(28px,5vw,58px);
    margin-bottom: 22px;
}

.public-home-hero::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(255,212,0,.10);
    border-radius: 50%;
    right: -180px;
    top: -160px;
}

.public-home-kicker,
.public-section-heading span,
.public-highlight small {
    color: var(--public-yellow);
    letter-spacing: .15em;
    font-size: .72rem;
    font-weight: 900;
}

.public-home-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(240px,.65fr);
    gap: 40px;
    align-items: center;
}

.public-home-copy h1 {
    margin: 12px 0 14px;
    max-width: 780px;
    color: #fff;
    font-size: clamp(2.45rem,7vw,5.35rem);
    line-height: .93;
    letter-spacing: -.055em;
    font-weight: 950;
}

.public-home-copy > p {
    max-width: 680px;
    margin: 0;
    color: #c0c5ce;
    font-size: clamp(1rem,2vw,1.16rem);
    line-height: 1.65;
}

.public-home-meta {
    display: inline-flex;
    margin-top: 17px;
    padding: 7px 11px;
    border-radius: 99px;
    background: rgba(255,255,255,.055);
    color: #d6dae0;
    font-size: .88rem;
}

.public-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.public-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}

.public-btn:hover { transform: translateY(-2px); }
.public-btn.primary { background: var(--public-yellow); color: #111; }
.public-btn.ghost { background: #20242a; color: #fff; border: 1px solid var(--public-line); }

.public-home-visual {
    min-height: 260px;
    border-radius: 25px;
    border: 1px solid var(--public-line);
    background:
        linear-gradient(160deg, rgba(255,212,0,.11), transparent 50%),
        #0d0f12;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

.public-ball-orbit {
    width: 126px;
    height: 126px;
    border: 1px dashed rgba(255,212,0,.35);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.public-ball {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--public-yellow);
    box-shadow: 0 20px 50px rgba(255,212,0,.13);
    font-size: 3.35rem;
}

.public-visual-copy { display: flex; flex-direction: column; gap: 5px; }
.public-visual-copy strong { font-size: 1.08rem; }
.public-visual-copy span { color: var(--public-muted); font-size: .82rem; }

.public-highlight {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,212,0,.17);
    background: rgba(255,212,0,.055);
    margin-bottom: 34px;
}

.public-highlight.urgent { border-color: rgba(255,80,80,.30); background: rgba(255,80,80,.06); }
.public-highlight-icon { font-size: 1.25rem; }
.public-highlight strong { display: block; margin-top: 3px; color: #fff; }
.public-highlight p { color: var(--public-muted); margin: 4px 0 0; }

.public-section { margin: 38px 0; }
.public-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
}
.public-section-heading.compact { align-items: center; }
.public-section-heading h2 { margin: 3px 0 0; color: #fff; font-size: clamp(1.45rem,3vw,2rem); }
.public-section-heading > a { color: #c8cdd5; text-decoration: none; font-weight: 800; font-size: .86rem; }
.public-section-heading > a:hover { color: var(--public-yellow); }

.public-featured-match {
    border: 1px solid var(--public-line);
    border-radius: 24px;
    padding: 20px;
    background: #15181d;
    overflow: hidden;
    position: relative;
}
.public-featured-match.is-live { border-color: rgba(255,212,0,.28); }
.public-featured-match.is-live::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--public-yellow);
}
.public-match-topline { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.public-court { font-weight: 900; color: #fff; }
.public-match-time { color: var(--public-muted); margin-left: 10px; font-size: .9rem; }
.public-live-pill,.public-next-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 99px;
    font-size: .73rem;
    font-weight: 950;
}
.public-live-pill { background: rgba(255,212,0,.11); color: #ffe34a; }
.public-live-pill i { width: 7px; height: 7px; background: var(--public-yellow); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,212,0,.08); }
.public-next-pill { background: rgba(255,255,255,.06); color: #dce0e5; }

.public-match-scoreboard {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap: 22px;
    align-items: center;
    padding: 24px 8px 7px;
}
.public-match-team { display: flex; align-items: center; gap: 15px; }
.public-match-team.right { justify-content: flex-end; }
.public-match-team > strong { font-size: clamp(2rem,5vw,3.8rem); line-height: 1; color: #fff; }
.public-versus { font-size: .8rem; color: #646b75; font-weight: 900; }
.pbc-public .public-match-team .team-badge { color: #fff; font-size: clamp(.95rem,2vw,1.17rem); }
.pbc-public .public-match-team .team-badge img,
.pbc-public .public-match-team .team-placeholder { width: 44px; height: 44px; border-radius: 13px; }

.public-empty-state {
    padding: 42px 20px;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 22px;
    text-align: center;
    background: rgba(255,255,255,.02);
}
.public-empty-state > span { display: block; font-size: 2rem; margin-bottom: 7px; }
.public-empty-state strong { color: #fff; }
.public-empty-state p { color: var(--public-muted); margin-bottom: 0; }

.public-quick-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.public-quick-card {
    min-height: 92px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
    border-radius: 18px;
    border: 1px solid var(--public-line);
    background: #15181d;
    color: #fff;
    padding: 15px;
    text-decoration: none;
    transition: .2s ease;
}
.public-quick-card:hover { transform: translateY(-3px); background: #1a1e24; border-color: rgba(255,212,0,.25); }
.public-quick-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,212,0,.09); font-size: 1.25rem; }
.public-quick-card > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.public-quick-card strong { font-size: .96rem; }
.public-quick-card small { color: var(--public-muted); margin-top: 3px; }
.public-quick-card b { color: var(--public-yellow); }

.public-next-list { display: grid; gap: 8px; }
.public-next-row {
    display: grid;
    grid-template-columns: 70px 100px minmax(0,1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 13px 16px;
    border: 1px solid var(--public-line);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
    color: #fff;
    text-decoration: none;
}
.public-next-row time { color: var(--public-yellow); font-weight: 950; }
.public-next-row > span { color: var(--public-muted); font-size: .85rem; }
.public-next-row strong { font-size: .92rem; }
.public-next-row em { color: #6e7580; font-style: normal; margin: 0 6px; }
.public-next-row b { color: var(--public-yellow); }

/* Harmonisation des autres pages publiques existantes */
.pbc-public .hero {
    background: #15181d;
    border: 1px solid var(--public-line);
    border-left: 4px solid var(--public-yellow);
    box-shadow: none;
    border-radius: 24px;
}
.pbc-public .hero h1 { color: #fff; }
.pbc-public .hero p { color: var(--public-muted); }
.pbc-public .card {
    background: #15181d !important;
    color: #fff !important;
    border: 1px solid var(--public-line);
    box-shadow: none;
}
.pbc-public .card .muted,
.pbc-public .muted { color: var(--public-muted); }
.pbc-public table th { color: #8f97a3; border-bottom-color: var(--public-line); }
.pbc-public table td { border-bottom-color: var(--public-line); }
.pbc-public input,
.pbc-public select,
.pbc-public textarea {
    background: #101318;
    border-color: var(--public-line);
    color: #fff;
}
.pbc-public .btn { background: var(--public-yellow); color: #111; }
.pbc-public .btn.secondary { background: #242830; color: #fff; }
.pbc-public .footer {
    border-top: 1px solid var(--public-line);
    background: transparent !important;
    color: #7f8792 !important;
    padding: 26px 0 4px;
}
.pbc-public .footer strong { color: #d8dce2; }
.pbc-public .team-badge img { background: #fff; border-color: rgba(255,255,255,.09); }
.pbc-public .team-placeholder { background: #22262c; }
.pbc-public .empty { color: var(--public-muted); }

@media (max-width: 980px) {
    .public-nav-toggle { display: block; }
    .pbc-public .public-nav {
        display: none;
        position: absolute;
        left: 12px;
        right: 12px;
        top: 68px;
        padding: 10px;
        border: 1px solid var(--public-line);
        border-radius: 18px;
        background: #15181df7;
        box-shadow: 0 20px 60px rgba(0,0,0,.38);
        flex-direction: column;
        align-items: stretch;
    }
    .pbc-public .public-nav.open { display: flex; }
    .pbc-public .public-nav a { padding: 11px 12px; }
    .pbc-public .public-nav .public-login { margin: 4px 0 0; text-align: center; }
    .public-home-hero-grid { grid-template-columns: 1fr; }
    .public-home-visual { min-height: 190px; }
    .public-quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 650px) {
    .pbc-public .container.public-container { padding: 20px 12px 38px; }
    .public-header-inner { min-height: 66px; padding: 0 12px; }
    .public-brand-logo,.public-brand-mark { width: 38px; height: 38px; }
    .public-brand-copy small { max-width: 175px; }
    .public-home-hero { padding: 25px 20px; border-radius: 23px; }
    .public-home-copy h1 { font-size: clamp(2.4rem,14vw,4rem); }
    .public-home-visual { display: none; }
    .public-home-actions { display: grid; grid-template-columns: 1fr; }
    .public-btn { width: 100%; }
    .public-section { margin: 30px 0; }
    .public-section-heading { align-items: start; }
    .public-section-heading > a { margin-top: 5px; }
    .public-match-scoreboard { grid-template-columns: 1fr; gap: 11px; padding-top: 18px; }
    .public-match-team,.public-match-team.right { justify-content: space-between; }
    .public-match-team.right { flex-direction: row-reverse; }
    .public-versus { display: none; }
    .public-match-team > strong { font-size: 2.2rem; }
    .public-quick-grid { grid-template-columns: 1fr; }
    .public-quick-card { min-height: 78px; }
    .public-next-row { grid-template-columns: 60px 1fr auto; }
    .public-next-row > span { display: none; }
}

/* =========================================================
   V2.2.1 — Correctifs Planning + Équipes
   ========================================================= */

/* Planning : neutralise les anciens fonds clairs de style.css */
.pbc-public .timeline {
    gap: 12px;
}

.pbc-public .timeline .event {
    background: #15181d !important;
    color: #f7f8fa !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 16px;
    padding: 15px 16px;
    min-height: 72px;
    opacity: 1 !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.pbc-public .timeline .event:hover {
    transform: translateY(-1px);
    border-color: rgba(255,212,0,.22) !important;
    background: #191d23 !important;
}

.pbc-public .timeline .event .hour {
    color: var(--public-yellow) !important;
    font-size: 1rem;
}

.pbc-public .timeline .event strong {
    color: #ffffff !important;
}

.pbc-public .timeline .event .muted {
    color: var(--public-muted) !important;
    margin-top: 3px;
}

.pbc-public .timeline .event.live {
    border-left: 5px solid var(--public-yellow) !important;
    background: linear-gradient(90deg, rgba(255,212,0,.07), #15181d 24%) !important;
}

.pbc-public .timeline .event.done {
    opacity: 1 !important;
    background: #111419 !important;
    border-color: rgba(255,255,255,.055) !important;
}

.pbc-public .timeline .event.done strong,
.pbc-public .timeline .event.done .hour {
    color: #c9ced6 !important;
}

.pbc-public .timeline .event.done .muted {
    color: #747c87 !important;
}

.pbc-public .timeline .event-status {
    justify-self: end;
}

/* Statuts du planning : adaptés au mode sombre */
.pbc-public .status {
    border: 1px solid transparent;
}

.pbc-public .status.scheduled {
    background: rgba(74,119,255,.12) !important;
    color: #9bb5ff !important;
    border-color: rgba(74,119,255,.20);
}

.pbc-public .status.live {
    background: rgba(255,212,0,.11) !important;
    color: #ffe15c !important;
    border-color: rgba(255,212,0,.22);
}

.pbc-public .status.submitted {
    background: rgba(255,153,51,.11) !important;
    color: #ffb66c !important;
    border-color: rgba(255,153,51,.22);
}

.pbc-public .status.validated {
    background: rgba(49,196,125,.12) !important;
    color: #79d9a9 !important;
    border-color: rgba(49,196,125,.20);
}

.pbc-public .status.cancelled {
    background: rgba(255,82,82,.11) !important;
    color: #ff8b8b !important;
    border-color: rgba(255,82,82,.20);
}

/* Les anciennes pills étaient claires avec du texte blanc */
.pbc-public .pill {
    background: rgba(255,212,0,.10) !important;
    color: #ffe15c !important;
    border: 1px solid rgba(255,212,0,.17);
    padding: 5px 10px;
}

/* Équipes */
.pbc-public .grid > .card {
    min-width: 0;
}

.pbc-public .logo-preview {
    background: #101318 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff;
}

.pbc-public .card h3,
.pbc-public .card h4 {
    color: #ffffff;
}

.pbc-public .card h4 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.pbc-public .card p:not(.muted) {
    color: #f1f3f5;
}

/* meilleure lecture des matchs dans les cartes équipes */
.pbc-public .card > p:not(.muted) {
    padding: 8px 0;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
    line-height: 1.35;
}

.pbc-public .card > p:not(.muted):last-child {
    border-bottom: 0;
}

@media (max-width: 650px) {
    .pbc-public .timeline .event {
        grid-template-columns: 64px minmax(0,1fr);
        gap: 10px;
        padding: 13px;
    }

    .pbc-public .timeline .event-status {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }
}


/* ===========================
   Correctif page Médias
   =========================== */

.pbc-public form {
    color: #f5f7fa;
}

.pbc-public form label {
    color: #f5f7fa !important;
}

.pbc-public form input,
.pbc-public form textarea,
.pbc-public form select {
    background: #101318 !important;
    color: #f5f7fa !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: none !important;
}

.pbc-public form input::placeholder,
.pbc-public form textarea::placeholder {
    color: #8f98a5 !important;
}

.pbc-public form input:focus,
.pbc-public form textarea:focus,
.pbc-public form select:focus {
    outline: none;
    border-color: #ffd400 !important;
    box-shadow: 0 0 0 3px rgba(255,212,0,.12) !important;
}

.pbc-public input[type="file"] {
    padding: 9px !important;
    background: #101318 !important;
    color: #cfd5dd !important;
}

.pbc-public input[type="file"]::file-selector-button {
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    margin-right: 10px;
    background: #ffd400;
    color: #111;
    font-weight: 800;
    cursor: pointer;
}

.pbc-public input[type="checkbox"] {
    width: 18px !important;
    height: 18px;
    accent-color: #ffd400;
    flex: 0 0 auto;
}

.pbc-public .role-note {
    background: #101318 !important;
    border: 1px solid rgba(255,255,255,.09);
    color: #dfe4ea !important;
    border-radius: 14px;
    padding: 14px 16px;
}

.pbc-public .role-note p {
    margin: 10px 0;
    color: #dfe4ea !important;
}

.pbc-public .role-note label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
    color: #dfe4ea !important;
}

.pbc-public .warning {
    background: rgba(255,212,0,.08) !important;
    border: 1px solid rgba(255,212,0,.22) !important;
    color: #f5f7fa !important;
}

.pbc-public .warning h2 {
    color: #ffd400 !important;
}

.pbc-public .warning p {
    color: #dfe4ea !important;
}

/* FIX MEDIA - bloc consentements */
body .role-note {
    background: #101318 !important;
    color: #dfe4ea !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;
    padding: 16px !important;
}

body .role-note p,
body .role-note label {
    color: #dfe4ea !important;
    background: transparent !important;
}

body .role-note label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

body .role-note input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin-top: 2px !important;
    accent-color: #ffd400;
}