/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {
    --bg: #080b0a;
    --bg-soft: #0d1110;
    --bg-card: #111614;
    --bg-card-hover: #151b18;

    --border: rgba(255, 255, 255, 0.08);
    --border-green: rgba(80, 220, 130, 0.22);

    --text: #f2f5f3;
    --text-soft: #a6afaa;
    --text-muted: #68726c;

    --green: #48d17c;
    --green-bright: #62ed94;
    --green-dark: #1d7d45;

    --container: 1180px;

    --radius: 14px;
}


html {
    scroll-behavior: smooth;
}


body {
    background: var(--bg);
    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


.container {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin: 0 auto;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);
}


.nav-inner {
    height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.logo {
    display: flex;
    align-items: center;
    gap: 11px;

    font-weight: 700;
    letter-spacing: -0.5px;
}


.logo-text {
    font-size: 20px;
}


.logo-text span {
    color: var(--green);
}


.logo-mark {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: flex-end;
    gap: 3px;

    padding: 4px;
}


.logo-mark span {
    width: 5px;

    display: block;

    border-radius: 2px;

    background: var(--green);
}


.logo-mark span:nth-child(1) {
    height: 40%;
}


.logo-mark span:nth-child(2) {
    height: 70%;
}


.logo-mark span:nth-child(3) {
    height: 100%;
}


.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}


.nav-links > a:not(.nav-cta) {
    color: var(--text-soft);

    font-size: 14px;

    transition:
        color 0.2s ease;
}


.nav-links > a:not(.nav-cta):hover {
    color: white;
}


.nav-cta {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 15px;

    border: 1px solid
        rgba(72, 209, 124, 0.3);

    border-radius: 8px;

    color: var(--green-bright);

    font-size: 13px;
    font-weight: 600;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.nav-cta:hover {
    background:
        rgba(72, 209, 124, 0.08);

    border-color:
        rgba(72, 209, 124, 0.5);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    min-height: 860px;

    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;
}


.hero-grid {
    position: absolute;

    inset: 0;

    opacity: 0.32;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );
}


.hero-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    top: 80px;
    left: 50%;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(45, 190, 100, 0.12),
            transparent 65%
        );

    pointer-events: none;
}


.hero-content {
    position: relative;

    z-index: 3;

    padding-top: 100px;

    text-align: center;
}


.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 7px 12px;

    border: 1px solid
        rgba(72, 209, 124, 0.18);

    border-radius: 100px;

    background:
        rgba(72, 209, 124, 0.045);

    color: #9eb5a5;

    font-size: 12px;
    letter-spacing: 0.3px;
}


.status-dot {
    width: 7px;
    height: 7px;

    display: inline-block;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 4px
        rgba(72, 209, 124, 0.08),
        0 0 14px
        rgba(72, 209, 124, 0.5);
}


.hero h1 {
    max-width: 900px;

    margin: 25px auto 20px;

    font-size:
        clamp(64px, 9vw, 112px);

    line-height: 0.95;

    letter-spacing: -6px;

    font-weight: 750;
}


.hero h1 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(255, 255, 255, 0.38);
}


.hero-description {
    max-width: 570px;

    margin: 0 auto;

    color: var(--text-soft);

    font-size: 18px;

    line-height: 1.7;
}


.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;

    margin-top: 34px;
}


.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 46px;

    padding: 0 20px;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 600;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.button:hover {
    transform: translateY(-2px);
}


.button-primary {
    background: var(--green);

    color: #061109;

    box-shadow:
        0 8px 30px
        rgba(72, 209, 124, 0.14);
}


.button-primary:hover {
    background: var(--green-bright);
}


.button-secondary {
    border:
        1px solid
        rgba(255,255,255,0.12);

    color: var(--text-soft);

    background:
        rgba(255,255,255,0.025);
}


.button-secondary:hover {
    border-color:
        rgba(255,255,255,0.25);

    color: white;
}


.hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 24px;

    margin-top: 42px;
}


.meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
}


.meta-item strong {
    font-size: 11px;
    color: var(--green);
    letter-spacing: 0.5px;
}


.meta-item span {
    color: var(--text-muted);
    font-size: 11px;
}


.meta-divider {
    width: 1px;
    height: 18px;

    background:
        rgba(255,255,255,0.1);
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
    padding: 140px 0;
}


.section-dark {
    background:
        #0b0f0d;

    border-top:
        1px solid
        rgba(255,255,255,0.04);

    border-bottom:
        1px solid
        rgba(255,255,255,0.04);
}


.eyebrow {
    margin-bottom: 20px;

    color: var(--green);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 600;
}


.section-heading {
    max-width: 720px;
}


.section-heading h2,
.technology-content h2,
.predictions-header h2 {
    font-size:
        clamp(38px, 5vw, 58px);

    line-height: 1.05;

    letter-spacing: -2.8px;

    margin-bottom: 24px;
}


.section-heading h2 span,
.technology-content h2 span,
.predictions-header h2 span,
.cta-content h2 span {
    color: var(--text-muted);
}


.section-heading p,
.technology-content > p {
    max-width: 610px;

    color: var(--text-soft);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   FEATURES
========================================================= */

.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    margin-top: 70px;
}


.feature-card {
    position: relative;

    min-height: 300px;

    padding: 30px;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius);

    background:
        rgba(255,255,255,0.018);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


.feature-card:hover {
    transform: translateY(-5px);

    background: var(--bg-card-hover);

    border-color:
        rgba(72,209,124,0.18);
}


.feature-number {
    position: absolute;

    top: 25px;
    right: 28px;

    color:
        rgba(255,255,255,0.15);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 10px;
}


.feature-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(72,209,124,0.18);

    border-radius: 9px;

    background:
        rgba(72,209,124,0.06);

    color: var(--green);

    font-size: 19px;
}


.feature-card h3 {
    margin-bottom: 10px;

    font-size: 18px;
}


.feature-card p {
    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   TECHNOLOGY
========================================================= */

.technology-grid {
    display: grid;

    grid-template-columns:
        1fr 0.85fr;

    gap: 100px;

    align-items: center;
}


.technology-list {
    margin-top: 40px;

    display: flex;
    flex-direction: column;

    gap: 18px;
}


.tech-item {
    display: flex;
    align-items: center;
    gap: 13px;
}


.tech-icon {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(72,209,124,0.09);

    color: var(--green);

    font-size: 12px;
}


.tech-item strong {
    display: block;

    font-size: 13px;
}


.tech-item span {
    display: block;

    color: var(--text-muted);

    font-size: 11px;
}


/* =========================================================
   PREDICTIONS
========================================================= */

.predictions-section {
    background: var(--bg);
}


.predictions-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 55px;
}


.prediction-status {
    display: flex;
    align-items: center;
    gap: 8px;

    padding-bottom: 8px;

    color: var(--green);

    font-size: 10px;
    font-weight: 600;
}


.prediction-preview {
    border:
        1px solid
        var(--border);

    border-radius: 15px;

    background:
        rgba(255,255,255,0.018);

    overflow: hidden;
}


.preview-header {
    display: flex;
    justify-content: space-between;

    padding: 18px 25px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);

    color: var(--text-muted);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 9px;

    letter-spacing: 0.8px;
}


.preview-match {
    min-height: 280px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 120px;
}


.preview-team {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 110px;
}

.big-team-logo {
    width: 100px;
    height: 100px;

    margin-bottom: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;

    background: rgba(255,255,255,0.03);

    color: var(--text-soft);

    font-size: 20px;
    font-weight: 700;
}
.big-team-logo img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
}


.preview-team strong {
    font-size: 15px;
}


.preview-team span {
    margin-top: 2px;

    color: var(--text-muted);

    font-size: 9px;

    letter-spacing: 1px;
}


.preview-vs {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;

    color: var(--text-muted);

    font-size: 9px;
}


.preview-vs strong {
    color: white;

    font-size: 19px;
}


.preview-probabilities {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        rgba(255,255,255,0.06);
}


.preview-probability {
    padding: 22px 25px;

    border-right:
        1px solid
        rgba(255,255,255,0.06);
}


.preview-probability:last-child {
    border-right: none;
}


.preview-probability > span {
    color: var(--text-muted);

    font-size: 9px;
}


.preview-probability strong {
    float: right;

    color: var(--green);

    font-size: 12px;
}


.preview-probability > div {
    clear: both;

    height: 3px;

    margin-top: 13px;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.07);
}


.preview-probability > div span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--green);
}


.predictions-note {
    display: flex;
    gap: 11px;

    margin-top: 18px;

    padding: 17px 20px;

    border:
        1px solid
        rgba(255,255,255,0.05);

    border-radius: 9px;

    background:
        rgba(255,255,255,0.015);
}


.note-icon {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,0.13);

    border-radius: 50%;

    color: var(--text-muted);

    font-size: 10px;
}


.predictions-note p {
    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   CTA
========================================================= */

.cta-section {
    padding: 0 0 120px;
}


.cta-box {
    position: relative;

    min-height: 370px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border:
        1px solid
        rgba(72,209,124,0.15);

    border-radius: 18px;

    background:
        #0d1310;
}


.cta-background {
    position: absolute;

    inset: 0;

    opacity: 0.35;

    background-image:
        linear-gradient(
            rgba(72,209,124,0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(72,209,124,0.07) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 70%
        );
}


.cta-content {
    position: relative;

    z-index: 2;

    max-width: 620px;

    text-align: center;
}


.cta-content h2 {
    margin-bottom: 15px;

    font-size:
        clamp(40px, 5vw, 62px);

    line-height: 1;

    letter-spacing: -3px;
}


.cta-content p {
    margin-bottom: 28px;

    color: var(--text-soft);

    font-size: 15px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    padding: 55px 0 30px;

    border-top:
        1px solid
        rgba(255,255,255,0.06);
}


.footer-inner {
    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 40px;
}


.footer-brand p {
    margin-top: 10px;

    color: var(--text-muted);

    font-size: 11px;
}


.footer-links {
    display: flex;
    align-items: center;

    gap: 25px;
}


.footer-links a {
    color: var(--text-muted);

    font-size: 11px;

    transition:
        color 0.2s ease;
}


.footer-links a:hover {
    color: var(--green);
}


.footer-bottom {
    grid-column: 1 / -1;

    display: flex;
    justify-content: space-between;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(255,255,255,0.05);

    color: #4d5550;

    font-size: 9px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .nav-links > a:not(.nav-cta) {
        display: none;
    }


    .hero {
        min-height: 780px;
    }


    .hero h1 {
        letter-spacing: -4px;
    }


    .feature-grid {
        grid-template-columns:
            1fr;
    }


    .technology-grid {
        grid-template-columns:
            1fr;

        gap: 60px;
    }


    .stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .stat-card:nth-child(2) {
        border-right: none;
    }


    .stat-card:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(255,255,255,0.06);
    }


    .predictions-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .preview-match {
        gap: 55px;
    }

}


@media (max-width: 600px) {

    .container {
        width:
            min(
                calc(100% - 32px),
                var(--container)
            );
    }


    .nav-inner {
        height: 68px;
    }


    .nav-cta {
        display: none;
    }


    .hero {
        min-height: 730px;
    }


    .hero-content {
        padding-top: 80px;
    }


    .hero h1 {
        font-size: 62px;

        letter-spacing: -4px;
    }


    .hero-description {
        font-size: 15px;
    }


    .hero-actions {
        flex-direction: column;

        width: 100%;

        max-width: 280px;

        margin-left: auto;
        margin-right: auto;
    }


    .hero-meta {
        gap: 13px;
    }


    .hero-dashboard {
        bottom: -220px;
    }


    .dashboard-content {
        padding: 20px;
    }


    .match {
        gap: 25px;
    }


    .team-logo {
        width: 40px;
        height: 40px;
    }


    .stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .stat-card {
        padding: 20px;

        min-height: 105px;
    }


    .section {
        padding: 90px 0;
    }


    .section-heading h2,
    .technology-content h2,
    .predictions-header h2 {
        font-size: 39px;

        letter-spacing: -2px;
    }


    .preview-match {
        min-height: 220px;

        gap: 20px;
    }


    .big-team-logo {
        width: 52px;
        height: 52px;
    }


    .preview-team {
        min-width: 80px;
    }


    .preview-probabilities {
        grid-template-columns:
            1fr;
    }


    .preview-probability {
        border-right: none;

        border-bottom:
            1px solid
            rgba(255,255,255,0.06);
    }


    .preview-probability:last-child {
        border-bottom: none;
    }


    .footer-inner {
        grid-template-columns:
            1fr;
    }


    .footer-links {
        order: 2;
    }


    .footer-bottom {
        order: 3;

        flex-direction: column;

        gap: 8px;
    }

}

/* =========================================================
   PAGES APPLICATIVES  (à venir · historique · récap nuit)
   -------------------------------------------------------
   Ces composants vivaient en `<style>` inline, recopiés dans
   quatre templates : la règle `body`, la barre de navigation,
   `.filters` et `.empty` existaient en 3 ou 4 exemplaires, et
   la barre de probabilité en QUATRE implémentations. Tout est
   ici, avec les mêmes variables que la vitrine.
========================================================= */

.nav-links > a.active {
    color: var(--green);
}

.empty {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-soft);
    padding: 28px;
    text-align: center;
}

.empty a {
    color: var(--green);
    text-decoration: underline;
}

/* Repli quand `team.logo` est NULL : les initiales, jamais un carré vide. */
.big-team-logo > span {
    align-items: center;
    color: var(--text-soft);
    display: flex;
    font-size: 0.85rem;
    font-weight: 700;
    height: 100%;
    justify-content: center;
    letter-spacing: 0.06em;
    width: 100%;
}

/* ---------- en-tête de page applicative ---------- */

.page {
    margin: 0 auto;
    max-width: var(--container);
    padding: 40px 24px 72px;
}

.page-head {
    margin-bottom: 26px;
}

.page-head h1 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.02em;
}

.page-head .sub {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 6px;
}

/* ---------- filtres ---------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.filters select,
.filters input,
.filters button,
.filters .reset {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font: inherit;
    padding: 9px 13px;
}

.filters button {
    background: var(--green-dark);
    border-color: transparent;
    cursor: pointer;
    font-weight: 600;
}

.filters button:hover {
    background: var(--green);
    color: #06120b;
}

.filters .reset {
    color: var(--text-muted);
    text-decoration: none;
}

/* ---------- bandeau de compétition ---------- */

.comp-banner {
    align-items: center;
    border-bottom: 1px solid var(--border);
    color: var(--text-soft);
    display: flex;
    font-size: 0.82rem;
    gap: 10px;
    letter-spacing: 0.08em;
    margin: 26px 0 12px;
    padding-bottom: 8px;
    text-transform: uppercase;
}

.comp-banner img {
    height: 20px;
    width: 20px;
}

/* ---------- carte de match ---------- */

.match {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    padding: 16px 18px;
}

.match:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-green);
}

.match .top {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: 0.82rem;
    gap: 10px;
}

.match .teams {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 8px 0 12px;
}

.match .teams .vs {
    color: var(--text-muted);
    font-weight: 400;
    margin: 0 10px;
}

.live-badge {
    background: rgba(239, 68, 68, 0.15);
    border-radius: 999px;
    color: #ef4444;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 9px;
}

.livescore {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.livescore .per {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 8px;
}

/* ---------- barres 1X2 (implémentation UNIQUE) ---------- */

.bars {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
}

.bar {
    font-size: 0.78rem;
}

.bar > span {
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.bar strong {
    color: var(--text);
}

.bar .track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    height: 6px;
    margin-top: 5px;
    overflow: hidden;
}

.bar .fill {
    background: var(--green);
    border-radius: 999px;
    display: block;
    height: 100%;
}

.bar.is-draw .fill { background: var(--text-muted); }
.bar.is-away .fill { background: #60a5fa; }

.na {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ---------- tableaux ---------- */

.wrap {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    text-align: left;
}

th {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.muted {
    color: var(--text-muted);
}

.res.ok { color: var(--green); font-weight: 700; }
.res.ko { color: #ef4444; font-weight: 700; }

/* ---------- accès admin ---------- */

.login-wrap {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 72px 24px;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 26px;
    width: min(400px, 92vw);
}

.login-card h1 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.login-card .sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 18px;
}

.login-card label {
    color: var(--text-muted);
    display: block;
    font-size: 0.8rem;
    margin-bottom: 6px;
}

.login-card input[type=password] {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    padding: 10px 12px;
    width: 100%;
}

.login-card button {
    background: var(--green);
    border: 0;
    border-radius: 8px;
    color: #06120b;
    cursor: pointer;
    font-weight: 700;
    margin-top: 14px;
    padding: 11px 14px;
    width: 100%;
}

.login-card .err {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 12px;
}

.login-card .back {
    color: var(--text-muted);
    display: block;
    font-size: 0.82rem;
    margin-top: 16px;
    text-align: center;
}

/* ---------- récap nocturne ---------- */

.verdict {
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
}

.badge {
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    text-transform: uppercase;
}

.b-ok               { background: rgba(72, 209, 124, 0.14); color: var(--green); }
.b-stale, .b-empty  { background: rgba(239, 68, 68, 0.14);  color: #ef4444; }
.b-unknown          { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.b-unmonitored      { background: rgba(139, 147, 167, 0.16); color: var(--text-muted); }
.b-running          { background: rgba(96, 165, 250, 0.16); color: #60a5fa; }

.cards {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    margin-top: 12px;
}

.kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
}

.kpi .n   { font-size: 1.5rem; font-weight: 700; }
.kpi .lbl { color: var(--text-muted); font-size: 0.82rem; line-height: 1.35; margin-top: 2px; }
.kpi a    { color: inherit; display: block; text-decoration: none; }
.kpi a:hover { border-radius: 8px; outline: 1px solid var(--green); }

.kpi .hint {
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.4;
    margin-top: 8px;
    padding-top: 7px;
}

/* La source de chaque chiffre : « sql » se vérifie ligne à ligne, « journal du job » est la
   seule vérité pour les mises à jour (une seule colonne de la base est horodatée en UPDATE). */
.src {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    margin-top: 8px;
    padding: 2px 7px;
}

.src-sql     { background: rgba(72, 209, 124, 0.12); color: var(--green); }
.src-journal { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }

.gap { border-color: rgba(245, 158, 11, 0.4); }

.note {
    border-left: 2px solid var(--border);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-top: 10px;
    padding-left: 12px;
}

code {
    background: var(--bg-soft);
    border-radius: 4px;
    font-size: 0.82em;
    padding: 1px 5px;
}

.page h2 {
    color: var(--text-muted);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    margin: 26px 0 10px;
    text-transform: uppercase;
}

/* ---------- cote du marché, sous notre prédiction ---------- */

.odds-row {
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}

.odds-label {
    color: var(--text-soft);
    display: block;
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.odds-row .bar .fill { background: #60a5fa; }
.odds-row .bar.is-draw .fill { background: rgba(96, 165, 250, 0.55); }
.odds-row .bar.is-away .fill { background: rgba(96, 165, 250, 0.35); }

/* ---------- pagination ---------- */

.pager {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 22px;
}

.pager a,
.pager .off,
.pager .current {
    border-radius: 8px;
    font-size: 0.88rem;
    padding: 7px 12px;
}

.pager a {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.pager a:hover {
    border-color: var(--border-green);
    color: var(--green);
}

/* Un bord désactivé reste VISIBLE : le faire disparaître déplacerait le pageur d'une page
   à l'autre, et on ne saurait plus si on est au bout ou si le lien a été oublié. */
.pager .off {
    color: var(--text-muted);
    opacity: 0.45;
}

.pager .current { color: var(--text-soft); }

/* ---------- page de détail d'un match ---------- */

.match-link { color: var(--text); text-decoration: none; }
.match-link:hover { color: var(--green); text-decoration: underline; }

.match-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.match-title .team-crest,
.team-sheet .team-crest { height: 28px; width: 28px; object-fit: contain; }

.match-score {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    padding: 2px 14px;
}

/* Modèle / marché / résultat : trois cartes de MÊME poids visuel. En hiérarchiser une ferait
   lire les deux autres comme des annexes, alors que la page existe pour les comparer. */
.analysis {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: 26px;
}

/* ⚠️ La grille étire DÉJÀ les cartes d'une même ligne à la même hauteur (`align-items:
   stretch` par défaut). Ce qui manquait, c'est l'alignement du CONTENU : sans colonne flex ni
   pied poussé vers le bas, trois corps de longueurs différentes posaient leurs pieds à trois
   hauteurs, et l'ensemble paraissait bancal alors que les boîtes étaient égales.

   Pas de `min-height` ni de `max-height` : une hauteur en dur casserait les petits écrans et
   tronquerait un contenu long. `height: 100%` + `margin-top: auto` sur le pied suffisent. */
.analysis-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}

.analysis-head {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* `margin-top: auto` : c'est CE pied qui aligne le bas des trois cartes. */
.analysis-foot { font-size: 0.85rem; margin-top: auto; padding-top: 10px; }
.analysis-foot .hint { display: block; font-size: 0.76rem; margin-top: 4px; }

.result-big {
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Deux feuilles côte à côte tant que la place le permet, l'une sous l'autre ensuite : 43 lignes
   par match, ça ne tient pas sur un téléphone en deux colonnes. */
.sheets {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

.team-sheet h3 {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}

.sheet-meta { font-size: 0.82rem; margin-bottom: 10px; }
.sheet-meta .hint { display: block; font-size: 0.74rem; margin-top: 2px; }

.sheet-group {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin: 16px 0 6px;
    text-transform: uppercase;
}

.sheet-none { font-size: 0.85rem; margin: 0 0 8px; }

.sheet th,
.sheet td { padding: 5px 8px; }
.sheet td { font-variant-numeric: tabular-nums; }

/* ---------- récap nocturne : bandeau de synthèse ---------- */

.summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 26px;
}

.summary-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 10px;
    font-size: 0.9rem;
    padding: 10px 14px;
}

.summary-item .n { font-size: 1.2rem; font-weight: 700; }
.summary-item .hint { display: block; font-size: 0.74rem; margin-top: 4px; }

.summary-item.is-ok { border-left-color: var(--green); }
.summary-item.is-alert { border-left-color: #ef4444; }
.summary-item.is-budget-block { border-left-color: #d9a441; }
.summary-item.is-unknown-block { border-left-color: var(--text-muted); }

/* ⚠️ La couleur suit l'ÉTAT (`counter_state`), jamais la valeur. Auparavant TOUT zéro était
   rouge : « 0 match sauté faute de features » et « 0 date bloquée par le budget » — de bonnes
   nouvelles — s'affichaient comme des erreurs. Un rouge qui se déclenche sur un état sain cesse
   d'être lu, et emporte avec lui le rouge des vraies anomalies.

   Quatre états visibles, et ils ne doivent pas se confondre à l'œil :
     anomalie  rouge plein   un zéro là où une donnée était attendue — le seul qui alarme
     budget    ambre tireté  non collecté sur quota : ni erreur, ni absence
     nominal   neutre        un zéro ATTENDU, sourdine assumée
     unknown   gris tireté   on n'a pas pu compter — ce n'est pas « rien écrit » */
.kpi.is-anomalie { border-color: #ef4444; }
.kpi.is-anomalie .n { color: #ef4444; }

.kpi.is-budget { border-color: #d9a441; border-style: dashed; }
.kpi.is-budget .n { color: #d9a441; }

.kpi.is-nominal .n { color: var(--text-soft); }

.kpi.is-unknown { border-style: dashed; }
.kpi.is-unknown .n { color: var(--text-muted); }

/* Le POURQUOI d'un chiffre : discret, mais toujours présent sous le compteur concerné. */
.kpi .hint.why { color: var(--text-soft); }


/* ---------- blasons d'équipe ---------- */

/* La place est RÉSERVÉE même sans blason (`.crest-none`), sinon les lignes se décaleraient
   d'une équipe à l'autre : mesuré, 32 équipes sur 282 n'ont pas de logo, donc le cas mixte est
   la norme et non l'exception. */
.crest {
    flex: 0 0 auto;
    height: 20px;
    object-fit: contain;
    width: 20px;
}

.crest-none { display: inline-block; }

.teams .side {
    align-items: center;
    display: inline-flex;
    gap: 7px;
    min-width: 0;
}

/* ---------- fiche de match : cartes joueurs et terrain ---------- */

.pcard {
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    gap: 9px;
    padding: 7px 10px;
}

/* Sur le terrain, la carte devient verticale et étroite : quatre lignes de onze joueurs ne
   tiennent pas autrement, et le nom doit rester lisible sans survol. */
.pcard.is-compact {
    background: rgba(10, 20, 14, 0.55);
    flex-direction: column;
    gap: 3px;
    min-width: 74px;
    padding: 6px 4px;
    text-align: center;
}

.pface {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 34px;
    object-fit: cover;
    width: 34px;
}

/* Repli quand aucune photo n'existe. MESURÉ : 1204 joueurs sur 1204 en ont une, donc ce cas est
   rare — mais un `<img src="">` afficherait l'icône d'image cassée du navigateur, et un carré
   vide ne dirait rien. Les initiales gardent la carte lisible ET l'alignement intact. */
.pface-none {
    align-items: center;
    background: var(--bg-soft, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    justify-content: center;
}

.pname { font-size: 0.84rem; line-height: 1.2; min-width: 0; }
.is-compact .pname { font-size: 0.74rem; }

.pnum {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    margin-right: 3px;
}

.pstat {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    white-space: nowrap;
}

.is-compact .pstat { margin-left: 0; }
.pnote { color: var(--green); margin-left: 4px; }

/* Terrain SOBRE, en CSS pur : pas d'image ni de dépendance externe pour dessiner un rectangle
   vert. Les lignes sont réparties du but (en haut) vers l'attaque (en bas). */
.pitch {
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 50% / 100% 50%,
        linear-gradient(160deg, #15361f, #0f2617);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    padding: 14px 10px;
    height: 570px;
    min-height: 570px;
    max-height: 570px;
}

.pitch-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pitch-aside { margin-top: 10px; }
.pitch-note { font-size: 0.76rem; margin-top: 8px; }

.bench {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* Le détail chiffré est REPLIÉ : 43 lignes par match noieraient la composition juste au-dessus.
   Il reste à un clic, ce qui est le niveau 3 de la hiérarchie de lecture. */
.sheet-details > summary {
    cursor: pointer;
    list-style: revert;
}

.sheet-details[open] > summary { margin-bottom: 6px; }

/* ---------- dépliage d'une ligne d'historique ---------- */

/* Un libellé réservé aux lecteurs d'écran : l'en-tête de la colonne de bascule n'a rien à
   montrer visuellement, mais une colonne sans intitulé est muette à l'oreille. */
.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.hrow-cell { text-align: right; width: 1%; }

.hrow-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 3px 7px;
}

.hrow-toggle:hover { border-color: var(--border-green); color: var(--green); }

/* Le focus clavier doit se VOIR : sans anneau visible, l'interaction existe pour le lecteur
   d'écran mais reste introuvable pour qui navigue au clavier sans en utiliser un. */
.hrow-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Le chevron tourne à l'ouverture : l'état se lit sans avoir à comparer deux lignes. */
.hrow-toggle[aria-expanded="true"] span { display: inline-block; transform: rotate(180deg); }

.hdetail > td { background: rgba(255, 255, 255, 0.02); padding: 12px 14px; }







/* ---------- panneau d'expansion de l'historique ---------- */

/* La ligne OUVERTE est marquée : sans ça le panneau paraît posé au hasard sous le tableau au
   lieu d'appartenir au match sélectionné. */
.hrow.is-open > td { background: rgba(34, 197, 94, 0.05); }
.hrow.is-open > td:first-child { box-shadow: inset 3px 0 0 var(--green); }

/* ⚠️ `hidden` ne s'anime pas. La hauteur est donc animée par `grid-template-rows: 0fr -> 1fr`,
   la seule technique qui fasse glisser une hauteur INCONNUE sans la calculer en JavaScript.
   `min-height: 0` sur l'enfant est indispensable, sans quoi la grille refuse de le comprimer. */
.hp-anim {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms ease;
}

/* ⚠️ DEUX structures utilisent le même mécanisme, et il leur faut DEUX sélecteurs.
   L'historique est un TABLEAU : la ligne dépliée est le frère suivant (`+`).
   Les matchs à venir sont des CARTES : le panneau est un DESCENDANT de la carte marquée.
   Livré le 2026-09-11 sans sa seconde règle, ce panneau s'ouvrait donc à une hauteur de ZÉRO
   pendant six jours — HTML complet, page vide, et aucun test serveur ne pouvait le voir
   (vérifié : le rendu du template contenait bien les 11 titulaires). `upc-detail` n'apparaissait
   pas une seule fois dans cette feuille. Régression : tests/unit/test_panneaux_depliables.py */
.hrow.is-open + .hdetail .hp-anim { grid-template-rows: 1fr; }
.match.is-open .upc-detail .hp-anim { grid-template-rows: 1fr; }
.hp-inner { min-height: 0; overflow: hidden; }

/* Le panneau des matchs à venir : respiration seulement à l'ouverture, pour que la carte
   fermée garde exactement sa hauteur d'avant. */
.upc-detail { padding: 0; }
.match.is-open .upc-detail { padding-top: 10px; }

.hdetail > td { background: rgba(34, 197, 94, 0.04); padding: 0 14px; }
.hrow.is-open + .hdetail > td { padding: 12px 14px; }

/* Zone franchement délimitée : c'est ce qui distingue un composant d'un empilement de texte. */
.hp {
    background: var(--bg-card);
    border: 1px solid var(--border-green, var(--border));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
}

/* Niveau 1 : le verdict. Il occupe la largeur et se lit sans chercher. */
.hp-verdict {
    align-items: center;
    border-left: 3px solid var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-left: 12px;
}

.hp-verdict.hp-ok { border-left-color: var(--green); }
.hp-verdict.hp-ko { border-left-color: #ef4444; }

.hp-score { font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.hp-winner { font-weight: 600; }

.hp-badge {
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.74rem;
    margin-left: auto;
    padding: 3px 10px;
}

.hp-ok .hp-badge { border-color: var(--green); color: var(--green); }
.hp-ko .hp-badge { border-color: #ef4444; color: #ef4444; }

/* Niveau 2 : modèle et marché CÔTE À CÔTE — c'est leur comparaison qui a du sens, les empiler
   obligerait à mémoriser le premier pour lire le second. Une seule colonne sous 640px. */
.hp-cols {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hp-head {
    color: var(--text-muted);
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.hp-foot { display: block; font-size: 0.82rem; margin-top: 7px; }

/* L'écart modèle/marché sur l'issue survenue : l'information la plus intéressante du panneau,
   et elle est gratuite. Mesuré par le projet : le marché bat le modèle de 0.065 de logloss. */
.hp-gap {
    display: block;
    font-size: 0.8rem;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed var(--border);
}

.hp-compo {
    align-items: baseline;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
}

.hp-compo .hp-head { margin-bottom: 0; }
.hp-more { margin-left: auto; white-space: nowrap; }

/* ---------- quota api-football ---------- */

.quota-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    border-radius: 12px;
    margin-bottom: 24px;
    max-width: 460px;
    padding: 14px 16px;
}

/* En dessous de 20 % de restant, c'est le moment d'agir — pas après. */
.quota-card.is-low { border-left-color: #d9a441; }
.quota-card.is-low .quota-n { color: #d9a441; }

.quota-main { align-items: baseline; display: flex; gap: 9px; }
.quota-n { font-size: 1.9rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.quota-n.quota-unknown { color: var(--text-muted); }
.quota-lbl { color: var(--text-soft); font-size: 0.9rem; }

/* La barre porte la consommation, pas le restant : c'est elle qui « se remplit » et la lecture
   est immédiate. Son `aria-label` la rend intelligible sans la voir. */
.quota-bar {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    height: 7px;
    margin: 10px 0 8px;
    overflow: hidden;
}

.quota-bar > span { background: var(--green); display: block; height: 100%; }
.quota-card.is-low .quota-bar > span { background: #d9a441; }

.quota-foot { font-size: 0.82rem; }
.quota-foot .hint { display: block; font-size: 0.74rem; margin-top: 4px; }

/* ---------- composition inline sur les matchs à venir ---------- */

/* La pastille doit se voir SANS rien ouvrir : c'est elle qui dit au lecteur où regarder dans
   une liste qui peut compter cent matchs. */
.compo-badge {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid var(--border-green, var(--green));
    border-radius: 999px;
    color: var(--green);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    margin-left: auto;
    padding: 2px 9px;
    white-space: nowrap;
}

/* Titre de la section prioritaire. Elle n'apparaît QUE s'il y a des compositions : une section
   vide serait du bruit permanent. */
h2.upc-prio {
    align-items: center;
    border-left: 3px solid var(--green);
    display: flex;
    gap: 9px;
    padding-left: 10px;
}

.upc-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 0.82rem;
    margin-top: 10px;
    padding: 5px 11px;
    width: 100%;
}

.upc-toggle:hover { border-color: var(--border-green); color: var(--green); }
.upc-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.upc-toggle[aria-expanded="true"] span { display: inline-block; transform: rotate(180deg); }

/* Deux colonnes tant que la place le permet, l'une sous l'autre ensuite : deux onze côte à côte
   ne tiennent pas sur un téléphone. */
.upc-sheets {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding-top: 12px;
}

.upc-team h4 { margin: 0 0 6px; }

.upc-group {
    color: var(--text-muted);
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    margin: 9px 0 5px;
    text-transform: uppercase;
}

.upc-players { display: grid; gap: 5px; }