:root{
    --np-navy:#071a38;
    --np-navy-2:#0b2a57;
    --np-blue:#1e5fb8;
    --np-purple:#7136d8;
    --np-purple-2:#9a64ff;
    --np-gold:#f2cc4d;
    --np-green:#18b861;
    --np-red:#e53a3a;
    --np-bg:#eef3fb;
    --np-card:#ffffff;
    --np-border:#d9e4f1;
    --np-text:#10213f;
    --np-muted:#687992;
}
*{box-sizing:border-box}
body{
    margin:0;
    background:
        radial-gradient(circle at 18% 5%,rgba(113,54,216,.09),transparent 30%),
        linear-gradient(180deg,#edf3fb 0%,#f8fafc 100%);
    color:var(--np-text);
    font-family:Arial,Helvetica,sans-serif;
}
.np-season-strip{
    padding:9px 16px;
    background:linear-gradient(90deg,#5e2eb6,#8754dc);
    color:#fff;
    text-align:center;
    font-size:.82rem;
    font-weight:950;
    letter-spacing:.07em;
}
.np-topbar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:24px;
    padding:20px max(22px,calc((100% - 1180px)/2));
    background:linear-gradient(135deg,#06172f,#0c2d5d);
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.10);
}
.np-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
    font-size:.88rem;
    font-weight:900;
    line-height:1.05;
}
.np-brand-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(135deg,#1578d2,#7144da);
    box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.np-topbar-main h1{
    margin:4px 0 0;
    font-size:clamp(1.65rem,3.5vw,2.7rem);
}
.np-topbar-main p{
    margin:7px 0 0;
    color:#d7e4f7;
}
.eyebrow{
    color:var(--np-gold);
    font-size:.72rem;
    font-weight:950;
    letter-spacing:.10em;
    text-transform:uppercase;
}
.np-admin-link{
    padding:11px 16px;
    border-radius:12px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
    text-decoration:none;
    font-weight:900;
}
.np-admin-link:hover{background:rgba(255,255,255,.17)}

.np-topbar-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}
.np-return-link{
    padding:11px 16px;
    border-radius:12px;
    background:linear-gradient(135deg,#d97706,#f59e0b);
    border:1px solid rgba(255,226,167,.65);
    color:#fff;
    text-decoration:none;
    font-weight:900;
    box-shadow:0 8px 18px rgba(217,119,6,.24);
}
.np-return-link:hover,
.np-return-link:focus-visible{
    filter:brightness(1.07);
    transform:translateY(-1px);
    outline:none;
}
.main-nav{
    display:flex;
    gap:8px;
    overflow:auto;
    padding:12px max(18px,calc((100% - 1180px)/2));
    background:#10284e;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.main-nav a{
    white-space:nowrap;
    padding:10px 14px;
    border-radius:10px;
    color:#e8eef9;
    text-decoration:none;
    font-weight:850;
    border:1px solid transparent;
}
.main-nav a.active,
.main-nav a:hover{
    background:linear-gradient(135deg,#5f2bb7,#7d47db);
    color:#fff;
    border-color:rgba(255,255,255,.16);
}
.container{
    width:min(1180px,calc(100% - 32px));
    margin:26px auto 48px;
}
.hero{
    display:grid;
    grid-template-columns:1fr auto;
    gap:24px;
    align-items:center;
    padding:30px;
    border-radius:24px;
    background:
        radial-gradient(circle at 88% 20%,rgba(255,255,255,.13),transparent 26%),
        linear-gradient(135deg,#0b2b5a,#1e5fb8 62%,#6b3bd2);
    color:#fff;
    box-shadow:0 18px 44px rgba(21,55,107,.22);
}
.hero h2{margin:8px 0;font-size:clamp(1.9rem,4vw,3.4rem)}
.hero p{max-width:760px;line-height:1.6;color:#e8f0fe}
.hero-badge{
    padding:20px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:18px;
    background:rgba(7,22,48,.32);
    font-size:1.3rem;
    font-weight:950;
    text-align:center;
}
.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin-top:20px;
}
.panel{
    padding:22px;
    border:1px solid var(--np-border);
    border-radius:18px;
    background:var(--np-card);
    box-shadow:0 10px 28px rgba(24,48,87,.08);
}
.panel h2{margin-top:0;color:#102b55}
.panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}
.panel-head a{font-weight:900;color:#6740c4}
.table-wrap{overflow-x:auto;overflow-y:hidden}
table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border-radius:13px;
}
.standings{
    table-layout:fixed;
    min-width:0;
}
.standings th,
.standings td{
    padding:9px 5px;
    font-size:.82rem;
}
.standings th:nth-child(1),
.standings td:nth-child(1){width:5%}
.standings th:nth-child(2),
.standings td:nth-child(2){width:44%}
.standings th:nth-child(3),
.standings td:nth-child(3){width:6%}
.standings th:nth-child(n+4):nth-child(-n+10),
.standings td:nth-child(n+4):nth-child(-n+10){width:4.5%}
.standings th:nth-child(11),
.standings td:nth-child(11){width:10%}
.standings .team-cell{
    min-width:0;
    overflow:hidden;
}
.standings .team-cell strong{
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
    font-size:.78rem;
}
.standings .team-cell img{
    flex:0 0 24px;
    width:24px;
    height:24px;
}
th,td{
    padding:11px 10px;
    border-bottom:1px solid #e6edf6;
    text-align:center;
    white-space:nowrap;
}
th{
    background:linear-gradient(135deg,#0b2b5a,#174d96);
    color:#fff;
    font-size:.75rem;
    text-transform:uppercase;
}
tbody tr:nth-child(even){background:#f7f9fd}
tbody tr:hover{background:#eef2ff}
.team-cell,.player-cell{
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
}
.team-cell img{width:28px;height:28px;object-fit:contain}
.player-cell img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.points{
    color:#6840c3;
    font-size:1.08rem;
    font-weight:950;
}
.rank{font-weight:950}
.zone-europe td:first-child{border-left:5px solid var(--np-green)}
.zone-danger td:first-child{border-left:5px solid var(--np-red)}
.form-cell{padding-left:4px!important;padding-right:4px!important}
.form-dots{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:42px;
}
.form-dot{
    width:12px;
    height:12px;
    border-radius:4px;
    display:inline-block;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.form-win{background:#22a55b}
.form-draw{background:#f0a928}
.form-loss{background:#dc3f3f}
.form-empty{background:#cbd5e1}
.fixture-list{display:grid;gap:10px}
.fixture{
    display:grid;
    grid-template-columns:145px 1fr auto 1fr;
    gap:10px;
    align-items:center;
    padding:12px;
    border-radius:12px;
    background:#f4f7fb;
    border:1px solid #e2e9f3;
}
.fixture time{font-size:.82rem;color:var(--np-muted)}
.scorer-list{display:grid;gap:10px;padding-left:22px}
.scorer-list li{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:8px 0;
    border-bottom:1px solid #e6edf6;
}
.scorer-list small{display:block;color:#74839b}
.feature-grid,.sync-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.feature-grid a{
    padding:13px;
    border-radius:12px;
    background:linear-gradient(135deg,#f0ecff,#e8f1ff);
    color:#263b64;
    text-decoration:none;
    font-weight:900;
    border:1px solid #ded6f7;
}
.feature-grid a:hover{
    background:linear-gradient(135deg,#6940c4,#8e5ee4);
    color:#fff;
}
.fixture-cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.match-card{
    padding:16px;
    border:1px solid var(--np-border);
    border-radius:15px;
    background:linear-gradient(180deg,#fff,#f7f9fd);
}
.match-meta{
    display:flex;
    justify-content:space-between;
    margin-bottom:12px;
    color:#75849a;
    font-size:.82rem;
}
.match-line{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    padding:8px 0;
    border-bottom:1px solid #e7edf5;
}
.score{font-size:1.3rem;font-weight:950;color:#6840c3}
.match-status{margin-top:10px;color:#61728d;font-size:.84rem}
.round-picker{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.round-picker select{
    padding:10px 14px;
    border:1px solid #cbd8e8;
    border-radius:10px;
    background:#fff;
}
.team-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.team-card{
    padding:22px;
    border:1px solid var(--np-border);
    border-radius:18px;
    background:#fff;
    text-align:center;
    box-shadow:0 8px 22px rgba(25,53,98,.07);
}
.team-card img{width:92px;height:92px;object-fit:contain}
.team-card h2{margin:12px 0 6px}
.team-card p{margin:0;color:#5c6e88}
.empty{
    padding:24px;
    border:1px dashed #b8c7da;
    border-radius:14px;
    background:#f8fafc;
    text-align:center;
    color:#64748b;
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 16px;
    border:0;
    border-radius:12px;
    background:#e9f0fa;
    color:#17365f;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
}
.button-primary{
    background:linear-gradient(135deg,#6330bb,#8b55e2);
    color:#fff;
}
.button-ghost{
    border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.12);
    color:#fff;
}
.flash{
    margin-bottom:18px;
    padding:14px;
    border-radius:12px;
    font-weight:800;
}
.flash-ok{background:#dcfce7;color:#166534}
.flash-error{background:#fee2e2;color:#991b1b}
.site-footer{
    padding:28px;
    background:#071a38;
    color:#cbd8ec;
    text-align:center;
}
.sync-grid form{margin:0}
.sync-grid button{width:100%}
@media(max-width:850px){
    .np-topbar{grid-template-columns:1fr}
    .np-topbar-actions{justify-content:flex-start}
    .dashboard-grid,.fixture-cards,.team-grid{grid-template-columns:1fr}
    .hero{grid-template-columns:1fr}
    .fixture{grid-template-columns:1fr auto}
    .fixture time{grid-column:1/-1}
    .feature-grid,.sync-grid{grid-template-columns:1fr}
    .panel-head{align-items:flex-start;flex-direction:column}
}


/* ====================================================
   V10 — TOPBAR COMMUNE SUPER LEAGUE SUISSE
   ==================================================== */
.np-topbar {
    grid-template-columns: auto 1fr auto;
    min-height: 128px;
}

.np-topbar-main {
    display: flex;
    align-items: center;
}

.np-topbar-main h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1;
}

.np-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 850px) {
    .np-topbar {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .np-topbar-actions {
        justify-content: flex-start;
    }
}


/* ====================================================
   V11 — MENU INTÉGRÉ À LA TOPBAR COMMUNE
   ==================================================== */
.np-topbar {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 20px 24px;
    min-height: 0;
    padding-bottom: 0;
}

.np-brand {
    grid-column: 1;
    grid-row: 1;
}

.np-topbar-main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.np-topbar-main h1 {
    width: 100%;
    margin: 0;
    text-align: center;
}

.np-topbar-actions {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
}

.np-topbar > .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: calc(100% + 48px);
    margin: 0 -24px;
    padding: 12px 24px;
    position: relative;
    z-index: 2200;
    overflow: visible !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0;
}

.main-nav .ch-nav-dropdown {
    position: relative;
    flex: 0 0 auto;
    z-index: 2300;
}

.main-nav .ch-nav-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.main-nav .ch-nav-dropdown > a::after {
    content: "▾";
    font-size: 0.72rem;
    transition: transform 0.18s ease;
}

.main-nav .ch-nav-dropdown:hover > a::after,
.main-nav .ch-nav-dropdown:focus-within > a::after {
    transform: rotate(180deg);
}

.main-nav .ch-nav-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

.main-nav .ch-nav-submenu {
    position: absolute;
    z-index: 2400;
    top: 100%;
    left: 0;
    display: none;
    min-width: 225px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 13px;
    background: #10284e;
    box-shadow: 0 14px 30px rgba(4, 18, 43, 0.28);
}

.main-nav .ch-nav-dropdown:hover .ch-nav-submenu,
.main-nav .ch-nav-dropdown:focus-within .ch-nav-submenu {
    display: grid;
    gap: 5px;
}

.main-nav .ch-nav-submenu a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 9px;
    color: #e8eef9;
    text-align: left;
    text-decoration: none;
    font-weight: 850;
}

.main-nav .ch-nav-submenu a:hover,
.main-nav .ch-nav-submenu a:focus-visible,
.main-nav .ch-nav-submenu a.active {
    background: linear-gradient(135deg, #5f2bb7, #7d47db);
    color: #ffffff;
    outline: none;
}

@media (max-width: 850px) {
    .np-topbar {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 14px;
    }

    .np-brand,
    .np-topbar-main,
    .np-topbar-actions,
    .np-topbar > .main-nav {
        grid-column: 1;
        grid-row: auto;
    }

    .np-topbar-main {
        justify-content: flex-start;
        text-align: left;
    }

    .np-topbar-main h1 {
        text-align: left;
    }

    .np-topbar-actions {
        justify-content: flex-start;
    }

    .np-topbar > .main-nav {
        width: calc(100% + 48px);
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
}


/* ====================================================
   V12 — SOUS-MENU CLASSEMENT TOUJOURS AU PREMIER PLAN
   ==================================================== */
.np-topbar {
    position: relative;
    z-index: 5000;
    overflow: visible !important;
}

.np-topbar > .main-nav {
    position: relative;
    z-index: 5100;
    overflow: visible !important;
}

.main-nav .ch-nav-dropdown {
    position: relative;
    z-index: 5200;
}

.main-nav .ch-nav-submenu {
    top: calc(100% - 1px);
    z-index: 5300;
    display: grid;
    gap: 5px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.main-nav .ch-nav-dropdown:hover .ch-nav-submenu,
.main-nav .ch-nav-dropdown:focus-within .ch-nav-submenu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

main.container {
    position: relative;
    z-index: 1;
}


/* ====================================================
   V13 — TITRE « PROCHAINS MATCHS » + MENU UNIQUE
   ==================================================== */
.panel-head--fixtures {
    align-items: center;
}

.next-matches-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0f3267, #6f3bd6);
    color: #ffffff !important;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    box-shadow: 0 8px 18px rgba(38, 44, 104, 0.18);
}

.next-matches-title::before {
    content: "📅";
    font-size: 1rem;
}

@media (max-width: 700px) {
    .panel-head--fixtures {
        align-items: flex-start;
    }

    .next-matches-title {
        width: 100%;
    }
}


/* ====================================================
   V15 — CALENDRIER PAR BLOCS DE TROIS JOURNÉES
   ==================================================== */
.calendar-panel {
    padding: 18px;
}

.round-picker--ranges {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid #d8e2ef;
    border-radius: 14px;
    background: #ffffff;
}

.round-picker--ranges label {
    color: #102b55;
    font-weight: 900;
}

.round-picker--ranges select {
    min-width: 170px;
    font-weight: 850;
}

.calendar-three-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.calendar-day-card {
    overflow: hidden;
    border: 2px solid #10213f;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(24, 48, 87, 0.10);
}

.calendar-day-header {
    display: grid;
    grid-template-columns: 1fr 72px;
    align-items: center;
    min-height: 38px;
    background: linear-gradient(135deg, #075aa8, #1276c8);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.calendar-day-header strong {
    padding: 10px 12px;
}

.calendar-day-header span {
    height: 100%;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #111827;
    border-left: 2px solid #10213f;
}

.calendar-day-table {
    background: #8d8d8d;
}

.calendar-match-row {
    display: grid;
    grid-template-columns: 115px minmax(95px, 1fr) 52px minmax(95px, 1fr);
    min-height: 30px;
    align-items: stretch;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.calendar-match-row:last-child {
    border-bottom: 0;
}

.calendar-date {
    display: grid;
    grid-template-columns: 28px 1fr 42px;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    background: #f4f4f4;
    color: #db4f13;
    font-size: 11px;
    text-align: center;
}

.calendar-team {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    background: #8d8d8d;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.calendar-team--home {
    justify-content: flex-end;
    text-align: right;
}

.calendar-team--away {
    justify-content: flex-start;
    text-align: left;
}

.calendar-score {
    display: grid;
    place-items: center;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 950;
}

.calendar-day-empty {
    min-height: 290px;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

@media (max-width: 1150px) {
    .calendar-three-grid {
        grid-template-columns: 1fr;
    }

    .calendar-match-row {
        grid-template-columns: 135px minmax(120px, 1fr) 60px minmax(120px, 1fr);
    }
}

@media (max-width: 620px) {
    .round-picker--ranges {
        align-items: stretch;
        flex-direction: column;
    }

    .round-picker--ranges select {
        width: 100%;
    }

    .calendar-match-row {
        grid-template-columns: 1fr 44px 1fr;
    }

    .calendar-date {
        grid-column: 1 / -1;
        grid-template-columns: auto auto auto;
        justify-content: center;
    }

    .calendar-team {
        font-size: 11px;
    }
}


/* ====================================================
   V16 — CALENDRIER NUME-PRONO + CARTONS
   ==================================================== */
.calendar-panel {
    width: min(1540px, calc(100vw - 28px));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    border-color: #cfdcf0;
    background:
        radial-gradient(circle at 92% 8%, rgba(113, 54, 216, .08), transparent 28%),
        #ffffff;
}

.round-picker--ranges {
    border: 1px solid #c9d8ee;
    background: linear-gradient(135deg, #f7f9ff, #eef3ff);
    box-shadow: 0 8px 20px rgba(16, 43, 85, .06);
}

.round-picker--ranges label {
    color: #0b2b5a;
}

.round-picker--ranges select {
    border-color: #b9cae4;
    color: #102b55;
    background: #ffffff;
}

.calendar-three-grid {
    grid-template-columns: repeat(3, minmax(420px, 1fr));
    gap: 16px;
}

.calendar-day-card {
    border: 2px solid #0c2b59;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(8, 35, 75, .14);
}

.calendar-day-header {
    grid-template-columns: minmax(0, 1fr) 62px 54px 48px;
    min-height: 42px;
    background: linear-gradient(135deg, #0b2b5a, #1d5eb4 62%, #6d3bd2);
}

.calendar-day-header strong {
    padding: 11px 13px;
    letter-spacing: .01em;
}

.calendar-day-header span {
    border-left: 1px solid rgba(255,255,255,.22);
    font-size: 12px;
    font-weight: 950;
}

.calendar-head-score {
    background: #ffffff !important;
    color: #111827 !important;
}

.calendar-head-yellow {
    background: #f5df22 !important;
    color: #111827 !important;
}

.calendar-head-red {
    background: #ef2f2f !important;
    color: #ffffff !important;
}

.calendar-day-table {
    background: #ffffff;
}

.calendar-match-row {
    grid-template-columns:
        118px
        minmax(124px, 1fr)
        56px
        minmax(124px, 1fr)
        54px
        48px;
    min-height: 36px;
    border-bottom: 1px solid #ccd6e4;
}

.calendar-date {
    grid-template-columns: 28px minmax(42px, 1fr) 43px;
    padding: 6px 7px;
    background: #f7f8fb;
    border-right: 1px solid #d5deea;
    color: #d95319;
    font-size: 11px;
}

.calendar-team {
    min-width: 0;
    padding: 6px 8px;
    background: #8792a3;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-team--home {
    border-right: 1px solid rgba(255,255,255,.28);
}

.calendar-team--away {
    border-left: 1px solid rgba(255,255,255,.28);
}

.calendar-score {
    border-left: 1px solid #d1dae7;
    border-right: 1px solid #d1dae7;
    background: #ffffff;
    color: #0c2347;
}

.calendar-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    font-size: 11px;
    font-weight: 950;
}

.calendar-cards span {
    display: grid;
    place-items: center;
    min-width: 0;
}

.calendar-cards span + span {
    border-left: 1px dotted rgba(0,0,0,.55);
}

.calendar-cards--yellow {
    background: #f4e51c;
    color: #101010;
}

.calendar-cards--red {
    background: #ef3030;
    color: #ffffff;
}

@media (max-width: 1380px) {
    .calendar-three-grid {
        grid-template-columns: 1fr;
    }

    .calendar-panel {
        width: min(980px, calc(100vw - 28px));
    }

    .calendar-match-row {
        grid-template-columns:
            135px
            minmax(180px, 1fr)
            60px
            minmax(180px, 1fr)
            58px
            52px;
    }
}

@media (max-width: 720px) {
    .calendar-panel {
        width: calc(100vw - 16px);
    }

    .calendar-day-header {
        grid-template-columns: minmax(0, 1fr) 54px 46px 42px;
    }

    .calendar-match-row {
        grid-template-columns: 1fr 46px 1fr 48px 42px;
    }

    .calendar-date {
        grid-column: 1 / -1;
    }

    .calendar-team {
        font-size: 10px;
    }
}


/* ====================================================
   V17 — CORRECTION MISE EN PAGE CALENDRIER 3 COLONNES
   ====================================================
   Objectifs :
   - conserver les trois journées sur une seule ligne ;
   - empêcher les colonnes de se chevaucher ;
   - garder les noms des équipes sur une seule ligne ;
   - maintenir les colonnes Score, CJ et CR visibles.
   ==================================================== */

.calendar-panel {
    width: calc(100vw - 24px);
    max-width: 1840px;
    padding: 18px;
}

.calendar-three-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.calendar-day-card {
    min-width: 0;
}

.calendar-day-header {
    grid-template-columns: minmax(0, 1fr) 48px 38px 34px;
}

.calendar-day-header strong {
    min-width: 0;
    padding: 10px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-day-header span {
    min-width: 0;
    padding: 0 3px;
    font-size: 11px;
}

.calendar-match-row {
    grid-template-columns:
        100px
        minmax(0, 1fr)
        42px
        minmax(0, 1fr)
        38px
        34px;
    min-height: 36px;
}

.calendar-date {
    grid-template-columns: 20px minmax(34px, 1fr) 37px;
    gap: 2px;
    min-width: 0;
    padding: 6px 4px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
}

.calendar-date span {
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
}

.calendar-team {
    min-width: 0;
    padding: 6px 6px;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-score {
    min-width: 0;
    padding: 0 2px;
    font-size: 12px;
}

.calendar-cards {
    min-width: 0;
    font-size: 10px;
}

.calendar-cards span {
    padding: 0 1px;
}

@media (min-width: 1500px) {
    .calendar-team {
        font-size: 11.5px;
    }

    .calendar-match-row {
        grid-template-columns:
            104px
            minmax(0, 1fr)
            44px
            minmax(0, 1fr)
            40px
            36px;
    }
}

@media (max-width: 1200px) {
    .calendar-panel {
        width: calc(100vw - 18px);
        overflow-x: auto;
    }

    .calendar-three-grid {
        min-width: 1320px;
        grid-template-columns: repeat(3, minmax(420px, 1fr));
    }
}


/* ====================================================
   V18 — TITRES, NOMS COURTS ET ALIGNEMENT SCORE
   ==================================================== */
.calendar-day-header {
    grid-template-columns:
        100px
        minmax(0, 1fr)
        42px
        minmax(0, 1fr)
        38px
        34px;
}

.calendar-day-header strong {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 10px 14px;
    white-space: nowrap;
}

.calendar-head-score {
    grid-column: 3;
}

.calendar-head-away {
    grid-column: 4;
    display: block !important;
    background: linear-gradient(135deg, #0b2b5a, #1d5eb4 62%, #6d3bd2) !important;
    border-left: 1px solid rgba(255,255,255,.22);
}

.calendar-head-yellow {
    grid-column: 5;
}

.calendar-head-red {
    grid-column: 6;
}

@media (min-width: 1500px) {
    .calendar-day-header {
        grid-template-columns:
            104px
            minmax(0, 1fr)
            44px
            minmax(0, 1fr)
            40px
            36px;
    }
}

@media (max-width: 1200px) {
    .calendar-day-header {
        grid-template-columns:
            135px
            minmax(180px, 1fr)
            60px
            minmax(180px, 1fr)
            58px
            52px;
    }
}


/* ====================================================
   V19 — NOMS DES CLUBS PLUS LISIBLES
   ==================================================== */
.calendar-team {
    font-size: 12.5px;
}

@media (min-width: 1500px) {
    .calendar-team {
        font-size: 13px;
    }
}

@media (max-width: 720px) {
    .calendar-team {
        font-size: 11px;
    }
}


/* ====================================================
   V20 — MENU CLASSEMENT ÉLARGI
   ==================================================== */
.main-nav .ch-nav-submenu {
    min-width: 245px;
}

.ch-nav-submenu-separator {
    display: block;
    height: 1px;
    margin: 5px 4px;
    background: rgba(255,255,255,.18);
}

/* ====================================================
   V20 — MINI-CHAMPIONNATS FAVORIS / OUTSIDERS / MAINTIEN
   ==================================================== */
.segment-page {
    width: min(1560px, calc(100% - 28px));
}

.segment-hero {
    margin-bottom: 18px;
    padding: 24px 26px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0b2b5a, #1c5cb0 60%, #6d3bd2);
    color: #ffffff;
    box-shadow: 0 15px 34px rgba(17,48,96,.18);
}

.segment-page--gold .segment-hero {
    background: linear-gradient(135deg, #765512, #c99012 56%, #f0c94e);
}

.segment-page--orange .segment-hero {
    background: linear-gradient(135deg, #8d3f10, #dc7218 58%, #f3a53f);
}

.segment-kicker {
    color: #f9dd67;
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.segment-hero h2 {
    margin: 7px 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.segment-hero p {
    max-width: 920px;
    margin: 0;
    color: rgba(255,255,255,.9);
    line-height: 1.55;
}

.segment-team-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.segment-team-pills span {
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    font-weight: 900;
}

.segment-calendar {
    margin-bottom: 18px;
}

.segment-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.segment-section-title span {
    color: #102b55;
    font-size: 1.45rem;
    font-weight: 950;
}

.segment-section-title small {
    color: #718098;
}

.segment-calendar-table {
    overflow: hidden;
    border: 1px solid #cbd8ea;
    border-radius: 13px;
}

.segment-calendar-head,
.segment-calendar-row {
    display: grid;
    grid-template-columns: 88px minmax(130px, 1fr) 74px minmax(130px, 1fr) 64px 56px;
    align-items: stretch;
}

.segment-calendar-head {
    background: linear-gradient(135deg, #0b2b5a, #1b59aa);
    color: #fff;
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.segment-calendar-head span,
.segment-calendar-row > * {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 9px 8px;
    border-right: 1px solid rgba(255,255,255,.16);
}

.segment-calendar-row {
    background: #f8faff;
    border-top: 1px solid #dce5f0;
}

.segment-calendar-row:nth-child(odd) {
    background: #eef3fb;
}

.segment-calendar-row strong {
    white-space: nowrap;
}

.segment-cj {
    background: #f6e71e !important;
    color: #111 !important;
}

.segment-cr {
    background: #ed3030 !important;
    color: #fff !important;
}

.segment-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
    align-items: start;
}

.segment-card {
    overflow: hidden;
    border: 1px solid #ccd8e8;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(20,47,89,.08);
}

.segment-card-head {
    padding: 13px 15px;
    background: #bfe7f6;
    color: #071b36;
    text-align: center;
}

.segment-card--attack .segment-card-head {
    background: #b9e8a8;
}

.segment-card--defense .segment-card-head {
    background: #f4c4aa;
}

.segment-card-head strong,
.segment-card-head small {
    display: block;
}

.segment-card-head strong {
    font-size: 1.08rem;
}

.segment-card-head small {
    margin-top: 3px;
    color: #0a3b83;
    font-size: .92rem;
}

.segment-table {
    overflow-x: auto;
}

.segment-row {
    display: grid;
    grid-template-columns: 32px minmax(105px,1fr) repeat(10,38px);
    align-items: stretch;
    min-width: 560px;
    border-top: 1px solid #dce4ef;
    background: #101010;
    color: #fff;
}

.segment-row > * {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 7px 4px;
}

.segment-row--head {
    background: #edf3fb;
    color: #102b55;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.segment-row > :first-child {
    background: #7f8790;
}

.segment-row strong {
    white-space: nowrap;
}

.segment-simple-table > div,
.segment-fairplay-table > div {
    display: grid;
    grid-template-columns: 42px minmax(110px,1fr) 78px;
    align-items: stretch;
    border-top: 1px solid #dce4ef;
    background: #101010;
    color: #fff;
}

.segment-fairplay-table > div {
    grid-template-columns: 42px minmax(110px,1fr) 46px 42px;
}

.segment-simple-table > div > *,
.segment-fairplay-table > div > * {
    display: grid;
    place-items: center;
    padding: 8px 6px;
}

.segment-simple-table > div > :first-child,
.segment-fairplay-table > div > :first-child {
    background: #7f8790;
}

.segment-unbeaten-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 88px;
    padding: 16px;
    background: #101010;
}

.segment-unbeaten-list span {
    padding: 7px 11px;
    border-radius: 999px;
    background: #6338c4;
    color: #fff;
    font-weight: 900;
}

.segment-empty-mini {
    min-height: 88px;
    display: grid;
    place-items: center;
    padding: 16px;
    background: #101010;
    color: #c7d2e3;
}

@media (max-width: 1180px) {
    .segment-stat-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .segment-stat-grid {
        grid-template-columns: 1fr;
    }

    .segment-calendar-table {
        overflow-x: auto;
    }

    .segment-calendar-head,
    .segment-calendar-row {
        min-width: 670px;
    }

    .segment-section-title {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ====================================================
   V21 — PAGES FAVORIS / OUTSIDERS / MAINTIEN EN 2 COLONNES
   ==================================================== */
.segment-hero {
    padding-top: 20px;
    padding-bottom: 20px;
}

.segment-hero h2 {
    margin: 0 0 14px;
}

.segment-two-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
    gap: 20px;
    align-items: start;
}

.segment-left-column,
.segment-right-column {
    min-width: 0;
}

.segment-left-column .segment-calendar {
    position: sticky;
    top: 16px;
    margin-bottom: 0;
}

.segment-right-column {
    display: grid;
    gap: 10px;
}

.segment-accordion,
.segment-accordion--fixed {
    overflow: hidden;
    border: 1px solid #cad8e9;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(20, 47, 89, .08);
}

.segment-accordion-button,
.segment-accordion-title {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border: 0;
    background: linear-gradient(135deg, #0b2b5a, #1d5eb4 62%, #6d3bd2);
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 950;
    text-align: left;
}

.segment-accordion-button {
    cursor: pointer;
}

.segment-accordion-button:hover,
.segment-accordion-button:focus-visible {
    filter: brightness(1.06);
    outline: none;
}

.segment-accordion-icon {
    flex: 0 0 auto;
    font-size: 1rem;
    transition: transform .18s ease;
}

.segment-accordion.is-open .segment-accordion-icon {
    transform: rotate(180deg);
}

.segment-accordion-content {
    display: none;
    padding: 12px;
}

.segment-accordion.is-open .segment-accordion-content,
.segment-accordion--fixed .segment-accordion-content {
    display: block;
}

.segment-accordion-content .segment-card,
.segment-accordion--fixed .segment-card {
    border: 0;
    border-radius: 11px;
    box-shadow: none;
}

.segment-accordion-content .segment-card-head,
.segment-accordion--fixed .segment-card-head {
    border-radius: 11px 11px 0 0;
}

.segment-accordion--fixed .segment-accordion-title {
    background: linear-gradient(135deg, #0a6e45, #18a866);
}

.segment-accordion--fixed .segment-accordion-content {
    padding: 12px;
}

.segment-stat-grid {
    display: block;
}

@media (max-width: 1120px) {
    .segment-two-columns {
        grid-template-columns: 1fr;
    }

    .segment-left-column .segment-calendar {
        position: static;
    }
}

@media (max-width: 760px) {
    .segment-accordion-button,
    .segment-accordion-title {
        font-size: .92rem;
    }
}


/* ====================================================
   V23 — PAGES STATISTIQUES GÉNÉRAL / DOMICILE / EXTÉRIEUR
   ==================================================== */
.stats-page {
    width: min(1180px, calc(100% - 28px));
}

.stats-page-title {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 8px 18px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0b2b5a, #1d5eb4 62%, #6d3bd2);
    color: #ffffff;
    box-shadow: 0 13px 30px rgba(13, 46, 95, .16);
}

.stats-page-title span {
    grid-column: 1 / -1;
    color: #f5d65d;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.stats-page-title h2 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.stats-page-title strong {
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.22);
}

.form-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.form-badge {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    font-weight: 950;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}

.form-badge--v { background: #1cb95d; }
.form-badge--n { background: #ee9826; }
.form-badge--d { background: #e43a3a; }

.form-empty {
    color: #718098;
    font-style: italic;
}

.unbeaten-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.unbeaten-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 5px 12px;
    padding: 15px;
    border: 1px solid #ccdaec;
    border-radius: 15px;
    background: linear-gradient(135deg, #f8faff, #eef3ff);
}

.unbeaten-card img {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.unbeaten-card strong {
    color: #102b55;
    font-size: 1.05rem;
}

.unbeaten-card span {
    color: #697991;
    font-size: .82rem;
}

.unbeaten-empty {
    padding: 32px 20px;
    border: 1px dashed #b8c8dc;
    border-radius: 15px;
    background: #f5f8fc;
    color: #65748a;
    text-align: center;
    font-size: 1.08rem;
    font-weight: 850;
}

.fairplay-rule {
    margin-bottom: 14px;
    padding: 13px 16px;
    border: 1px solid #efd390;
    border-radius: 13px;
    background: #fff7df;
    color: #745211;
}

.fairplay-yellow {
    background: #f6e71e !important;
    color: #111 !important;
    font-weight: 950;
}

.fairplay-red {
    background: #ec3030 !important;
    color: #fff !important;
    font-weight: 950;
}

@media (max-width: 760px) {
    .stats-page-title {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .stats-page-title strong {
        justify-self: start;
    }

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

@media(max-width:760px){
    .standings{min-width:720px}
    .table-wrap{overflow-x:auto}
}


}


/*
====================================================
V10 — CLASSEMENT EN 2 COLONNES, NOMS COMPLETS
====================================================
Le classement reste à gauche et la prochaine journée à droite.
La colonne Équipe reçoit davantage de place, tandis que les colonnes
statistiques sont resserrées sans supprimer d'information.
====================================================
*/
.dashboard-grid{
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
}
.panel--standings .table-wrap{
    overflow-x:hidden;
}
.panel--standings .standings{
    width:100%;
    min-width:0;
    table-layout:fixed;
}
.panel--standings .standings th,
.panel--standings .standings td{
    padding:9px 4px;
    font-size:.78rem;
}
.panel--standings .standings th:nth-child(1),
.panel--standings .standings td:nth-child(1){width:5%}
.panel--standings .standings th:nth-child(2),
.panel--standings .standings td:nth-child(2){width:42%}
.panel--standings .standings th:nth-child(3),
.panel--standings .standings td:nth-child(3){width:7%}
.panel--standings .standings th:nth-child(n+4):nth-child(-n+10),
.panel--standings .standings td:nth-child(n+4):nth-child(-n+10){width:4.7%}
.panel--standings .standings th:nth-child(11),
.panel--standings .standings td:nth-child(11){width:13%}
.panel--standings .standings .team-cell{
    min-width:0;
    overflow:visible;
}
.panel--standings .standings .team-cell strong{
    display:block;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
    font-size:.82rem;
}
.panel--standings .standings .team-cell img{
    width:23px;
    height:23px;
    flex:0 0 23px;
}
.panel--standings .form-dots{
    gap:3px;
}
.panel--standings .form-dot{
    width:11px;
    height:11px;
}
@media(max-width:1100px){
    .dashboard-grid{
        grid-template-columns:1fr;
    }
    .panel--standings .table-wrap{
        overflow-x:auto;
    }
    .panel--standings .standings{
        min-width:760px;
    }
}


/* ============================================================
   POINT 5 — DÉTAILS DU MATCH AU SURVOL DU SCORE
   Clone du comportement Champions League validé.
   Source : ch_2627_goal_events uniquement, aucun appel API public.
   ============================================================ */
.ch-match-hover-cell{position:relative;cursor:help;overflow:visible;outline:none}
.ch-match-hover-score{position:relative;z-index:1;display:inline-block;border-bottom:1px dotted currentColor}
.ch-match-hover-panel{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:9100;display:none;width:max-content;min-width:250px;max-width:360px;padding:12px 13px;border:1px solid rgba(30,84,145,.65);border-radius:12px;background:#102b55;color:#fff;text-align:left;font-size:12px;line-height:1.4;font-weight:500;white-space:normal;box-shadow:0 16px 34px rgba(4,18,48,.28);transform:translateX(-50%)}
.ch-match-hover-panel::after{content:"";position:absolute;top:100%;left:50%;width:10px;height:10px;background:#102b55;border-right:1px solid rgba(30,84,145,.65);border-bottom:1px solid rgba(30,84,145,.65);transform:translate(-50%,-5px) rotate(45deg)}
.ch-match-hover-cell:hover>.ch-match-hover-panel{display:block}
.ch-match-hover-title{display:flex;align-items:center;justify-content:center;gap:6px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.16);font-weight:800}
.ch-match-hover-events{display:grid;gap:5px}
.ch-match-hover-event{display:grid;grid-template-columns:20px 1fr;gap:5px;align-items:start}
.ch-match-hover-empty{display:block;color:rgba(255,255,255,.72);font-style:italic}
.calendar-day-table,.calendar-match-row,.calendar-day-card{overflow:visible}
.calendar-day-table .calendar-match-row:nth-child(-n+2) .ch-match-hover-panel{top:calc(100% + 10px);bottom:auto}
.calendar-day-table .calendar-match-row:nth-child(-n+2) .ch-match-hover-panel::after{top:auto;bottom:100%;border-right:0;border-bottom:0;border-left:1px solid rgba(30,84,145,.65);border-top:1px solid rgba(30,84,145,.65);transform:translate(-50%,5px) rotate(45deg)}
@media(max-width:760px){.ch-match-hover-panel{left:auto;right:-6px;min-width:220px;max-width:min(320px,78vw);transform:none}.ch-match-hover-panel::after{left:auto;right:22px;transform:translateY(-5px) rotate(45deg)}.calendar-day-table .calendar-match-row:nth-child(-n+2) .ch-match-hover-panel::after{left:auto;right:22px;transform:translateY(5px) rotate(45deg)}}