/* ════════════════════════════════════════════════════════════════
 * RZ Pronos — Pages publiques /pronos/ et /classement-pronos/
 * Style brand It's Rugby (teal/vanilla/g-bright)
 * ════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------
 * 0) Cache le H1 du theme (page.php) — on a notre propre hero injecté
 *    Casse les contraintes max-width:720px de l'article-body
 * --------------------------------------------------------- */
body.rzu-front-page .article-body > h1:first-child {
    display: none !important;
}
body.rzu-front-page .article-body {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.rzu-front-page .container:has(> .article-body) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
body.rzu-front-page .article-content-wrap {
    background: var(--vanilla, #F2E5D2);
    min-height: 60vh;
}

/* ---------------------------------------------------------
 * 1) Layout page : hero pleine largeur + grille 2 col
 * --------------------------------------------------------- */
.rzu-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.rzu-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}

.rzu-page-main { min-width: 0; }

.rzu-page-aside {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Espacement spécifique des .section-title à l'intérieur d'une page rzu */
.rzu-page .section-title:not(:first-child) {
    margin-top: 36px;
}

/* ---------------------------------------------------------
 * 2) Override classes plugin pour brand cohérent
 * --------------------------------------------------------- */
.rzu-page .rzu-listwrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rzu-page .rzu-card,
.rzu-page .rzu-rowitem {
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    border-left: 4px solid var(--teal, #1C3D34);
    padding: 16px 20px;
    transition: border-left-color 0.15s ease, box-shadow 0.15s ease;
}
.rzu-page .rzu-card:hover,
.rzu-page .rzu-rowitem:hover {
    border-left-color: var(--g-bright, #8ED968);
    box-shadow: 0 4px 14px rgba(28, 61, 52, 0.10);
}

.rzu-page .rzu-card-head,
.rzu-page .rzu-rowitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.rzu-page .rzu-card-title,
.rzu-page .rzu-rowtitle {
    font-size: 15px;
    font-weight: 900;
    color: var(--teal, #1C3D34);
    line-height: 1.3;
}

.rzu-page .rzu-card-sub,
.rzu-page .rzu-rowmeta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted, #6B6B6B);
    font-weight: 600;
}

.rzu-page .rzu-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.rzu-page .rzu-card-badge.open {
    background: var(--g-bright, #8ED968);
    color: var(--teal-dk, #172713);
}
.rzu-page .rzu-card-badge.closed {
    background: var(--vanilla-d, #E8D8C0);
    color: var(--muted, #6B6B6B);
}

.rzu-page .rzu-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--teal, #1C3D34);
    color: #fff;
    border: none;
    font-family: var(--sans, 'Noto Sans', sans-serif);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.rzu-page .rzu-btn:hover { background: var(--teal-dk, #172713); }
.rzu-page .rzu-btn:focus-visible {
    outline: 3px solid var(--g-bright, #8ED968);
    outline-offset: 2px;
}

/* Variante CTA inscription (visiteur non logué) — accent g-bright */
.rzu-page .rzu-btn.rzu-btn-cta {
    background: var(--g-bright, #8ED968);
    color: var(--teal-dk, #172713);
    box-shadow: 0 1px 3px rgba(28, 61, 52, 0.18);
}
.rzu-page .rzu-btn.rzu-btn-cta:hover {
    background: #7fc955;
    color: var(--teal-dk, #172713);
    box-shadow: 0 2px 8px rgba(28, 61, 52, 0.25);
}

/* Variante ghost (prono clôturé / "Voir le résultat") — discret, contour teal */
.rzu-page .rzu-btn.rzu-btn-ghost {
    background: #fff;
    color: var(--teal, #1C3D34);
    border: 1px solid var(--teal, #1C3D34);
}
.rzu-page .rzu-btn.rzu-btn-ghost:hover {
    background: var(--teal, #1C3D34);
    color: #fff;
}

/* Variante locked → définie plus bas dans la section CTA inline (incitative). */

/* Carte clôturée — légèrement désaturée */
.rzu-page .rzu-card--closed {
    border-left-color: var(--muted, #6B6B6B);
    background: #fafaf7;
}
.rzu-page .rzu-card--closed:hover {
    border-left-color: var(--teal, #1C3D34);
}
.rzu-page .rzu-card--closed .rzu-card-title {
    color: var(--muted, #6B6B6B);
}

.rzu-page .rzu-rowright {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rzu-page .rzu-empty {
    padding: 24px;
    text-align: center;
    color: var(--muted, #6B6B6B);
    font-style: italic;
}

/* ---------------------------------------------------------
 * 3) Leaderboard
 * --------------------------------------------------------- */
.rzu-leaderboard {
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    border-top: 4px solid var(--teal, #1C3D34);
    box-shadow: 0 2px 12px rgba(28, 61, 52, 0.06);
    padding: 20px 22px;
}

.rzu-leaderboard-head { margin-bottom: 16px; }
.rzu-leaderboard-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 900;
    color: var(--teal, #1C3D34);
    letter-spacing: -0.2px;
}
.rzu-leaderboard-sub {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #6B6B6B);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rzu-leaderboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.rzu-leaderboard-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border, #C4C4C4);
    font-size: 13px;
}
.rzu-leaderboard-row:last-child { border-bottom: none; }

.rzu-leaderboard-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--vanilla, #F2E5D2);
    color: var(--teal, #1C3D34);
    font-weight: 900;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.rzu-leaderboard-row--p1 .rzu-leaderboard-rank {
    background: linear-gradient(135deg, #E0A427 0%, #C47D08 100%);
    color: #fff;
}
.rzu-leaderboard-row--p2 .rzu-leaderboard-rank {
    background: #B8B8B8;
    color: #fff;
}
.rzu-leaderboard-row--p3 .rzu-leaderboard-rank {
    background: #B36932;
    color: #fff;
}

.rzu-leaderboard-name {
    font-weight: 700;
    color: var(--ink, #1A1A1A);
    min-width: 0;
    word-break: break-word;
    line-height: 1.3;
}
/* Pseudo anonyme : police légèrement plus discrète */
.rzu-leaderboard-name.is-pseudo {
    color: var(--muted, #6B6B6B);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rzu-leaderboard-pts {
    font-weight: 900;
    color: var(--teal, #1C3D34);
    font-variant-numeric: tabular-nums;
}
.rzu-leaderboard-pts small {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted, #6B6B6B);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-left: 2px;
}

.rzu-leaderboard-row--me {
    background: #fafaf7;
    border-left: 3px solid var(--g-bright, #8ED968);
    padding: 10px 8px;
    margin: 0 -8px;
}

.rzu-leaderboard-empty,
.rzu-leaderboard-cta-me {
    margin: 12px 0 0;
    padding: 12px;
    background: #fafaf7;
    border-left: 3px solid var(--g-bright, #8ED968);
    color: var(--ink, #1A1A1A);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}
.rzu-leaderboard-cta-me a {
    color: var(--teal, #1C3D34);
    font-weight: 800;
    text-decoration: underline;
}

.rzu-leaderboard-me {
    display: grid;
    grid-template-columns: auto 36px 1fr auto;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: #fafaf7;
    border-left: 3px solid var(--g-bright, #8ED968);
    font-size: 13px;
}
.rzu-leaderboard-me-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--teal, #1C3D34);
}

/* ---------------------------------------------------------
 * 4) Aside — bloc CTA s'inscrire
 * --------------------------------------------------------- */
.rzu-page-cta-signup {
    background: var(--teal, #1C3D34);
    color: #fff;
    padding: 22px 22px 24px;
    border-left: 4px solid var(--g-bright, #8ED968);
}
.rzu-page-cta-signup h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.2px;
}
.rzu-page-cta-signup p {
    margin: 0 0 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}
.rzu-page-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px;
    background: var(--g-bright, #8ED968);
    color: var(--teal-dk, #172713) !important;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.rzu-page-cta-btn:hover { background: #A8E082; }
.rzu-page-cta-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ---------------------------------------------------------
 * 4bis) Page /classement-pronos/ : 2 leaderboards côte à côte
 * --------------------------------------------------------- */
.rzu-page--classement {
    max-width: 1200px;
}
.rzu-classement-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}
.rzu-classement-col {
    min-width: 0;
}
.rzu-classement-col .rzu-leaderboard {
    height: 100%;
}
.rzu-classement-mypoints {
    background: #fff;
    border: 1px solid var(--border, #C4C4C4);
    border-top: 4px solid var(--g-bright, #8ED968);
    padding: 20px 22px;
    box-shadow: 0 2px 12px rgba(28, 61, 52, 0.06);
    margin-top: 24px;
}
.rzu-classement-mypoints .rzu-profile-head { margin-bottom: 14px; }
.rzu-classement-mypoints .rzu-profile-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 900;
    color: var(--teal, #1C3D34);
    letter-spacing: -0.2px;
}
.rzu-classement-mypoints .rzu-profile-sub {
    margin: 0;
    font-size: 12px;
    color: var(--muted, #6B6B6B);
    font-weight: 500;
}
.rzu-classement-mypoints .rzu-profile-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 16px 0 8px;
}
.rzu-classement-mypoints .rzu-pcard {
    background: #fafaf7;
    padding: 14px 16px;
    border-left: 3px solid var(--g-bright, #8ED968);
}
.rzu-classement-mypoints .rzu-pcard-k {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted, #6B6B6B);
    margin-bottom: 4px;
}
.rzu-classement-mypoints .rzu-pcard-v {
    font-size: 26px;
    font-weight: 900;
    color: var(--teal, #1C3D34);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.rzu-classement-mypoints .rzu-pcard-s {
    font-size: 11px;
    color: var(--muted, #6B6B6B);
    margin-top: 4px;
    line-height: 1.3;
}
.rzu-classement-cta {
    text-align: left;
    max-width: 720px;
    margin: 0 auto;
}

/* ---------------------------------------------------------
 * 4bis) CTA inline — incitatif (non-membre, non-supporter)
 * --------------------------------------------------------- */
/* .rzu-cta-link est whitelistée dans la règle globale `.its-v2 a[class]:not(...)`
 * d'itsrugby-common.css, donc nos styles s'appliquent sans !important. */
.rzu-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--teal, #1C3D34);
    color: var(--vanilla, #F2E5D2);
    text-decoration: none;
    font-family: var(--sans, 'Noto Sans', sans-serif);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border: 1px solid var(--teal, #1C3D34);
    transition: background .15s, color .15s, border-color .15s;
}
.rzu-cta-link:hover,
.rzu-cta-link:focus-visible {
    background: var(--teal-dk, #15302a);
    color: var(--vanilla, #F2E5D2);
    border-color: var(--teal-dk, #15302a);
}
.rzu-cta-link::after {
    content: '\2192';
    font-size: 14px;
    line-height: 1;
}

.rzu-cta {
    background: #fafaf7;
    border-left: 3px solid var(--g-bright, #8ED968);
    padding: 14px 18px;
    margin: 12px 0;
    font-size: 13px;
    color: var(--teal, #1C3D34);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.rzu-cta strong { color: var(--teal, #1C3D34); }

/* Locked button — CTA de conversion supporter */
.rzu-page .rzu-btn.rzu-btn-locked {
    background: var(--g-bright, #8ED968);
    color: var(--teal-dk, #172713);
    border: none;
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
    padding: 8px 16px;
    box-shadow: 0 1px 3px rgba(28, 61, 52, 0.18);
    transition: background .15s, box-shadow .15s;
}
.rzu-page .rzu-btn.rzu-btn-locked:hover,
.rzu-page .rzu-btn.rzu-btn-locked:focus-visible {
    background: #7fc955;
    color: var(--teal-dk, #172713);
    box-shadow: 0 2px 8px rgba(28, 61, 52, 0.25);
}

/* ---------------------------------------------------------
 * 5) Responsive
 * --------------------------------------------------------- */
@media (max-width: 960px) {
    .rzu-page-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .rzu-page-aside {
        position: static;
    }
    .rzu-classement-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 540px) {
    .rzu-page {
        padding: 24px 16px 48px;
    }
    .rzu-page .section-title {
        font-size: 12px;
        padding: 8px 14px;
    }
    .rzu-leaderboard-row {
        font-size: 12px;
        gap: 8px;
    }
    .rzu-leaderboard-rank {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}