.stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:14px;
    margin:10px 0
}
.stat-card{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:12px;
    background:var(--tile-background);
    border:1px solid var(--tile-background);
    border-radius:12px;
    box-shadow:0 0 16px rgba(0,0,0,.2)
}
.stat-content{
    display:flex;
    flex-direction:column;
    align-items:center
}
.stat-value{
    font-weight:800;
    font-size:clamp(28px,6vw,48px);
    line-height:1.1
}
.stat-label{
    margin-top:6px;
    font-weight:600;
    color:#6b7280
}

/* ——— Team social header (Facebook/LinkedIn style) ——— */
.team-social-header {
    position: relative;
    --avatar-size: 140px; /* default mobile/tablet */
    --cover-h: 220px;      /* default cover height */
}
.team-cover {
    position: relative;
    width: 100%;
    height: var(--cover-h);
    border-radius: 12px;
    background: radial-gradient(ellipse at 50% 40%, #f3f4f6 0%, #e5e7eb 60%, #e5e7eb 100%);
    /* fallback derrière les logos transparents */
    overflow: hidden;            /* clip the blurred logo to the rounded box */
    z-index: 0;                  /* keep cover below avatar */
}
.team-cover::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cover-url) center/cover no-repeat;
    filter: blur(28px);
    transform: scale(1.25);      /* zoom the logo */
    will-change: transform, filter;
    opacity: 0.9;                /* soften a bit */
    border-radius: inherit;      /* keep smooth corners during paint */
    z-index: 0;
    pointer-events: none;
}
.team-avatar {
    position: absolute;
    left: 50%;
    top: calc(var(--cover-h) - (var(--avatar-size) / 2)); /* overlap half over the cover */
    transform: translateX(-50%);
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.team-avatar img { max-width: 100%; max-height: 100%; object-fit: contain; }
.team-title {
    margin-top: calc(var(--avatar-size) / 2 + 16px);
    text-align: center;
    font-weight: 700;
    font-size: clamp(22px, 2.2vw, 28px);
}
.team-subtitle {
    text-align:center;
    color:#6b7280;
    font-weight:500;
    margin-top: 6px;
    font-size: 0.95rem;
}
.team-rank-big {
    text-align: center;
    font-weight: 900;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1;
    margin-top: 8px;
    color: var(--dark-color);
}
.team-rank-big .rank-suffix {
    font-size: 0.5em;
    line-height: 1;
    vertical-align: super;
    margin-left: 2px;
    font-weight: 800;
}

/* Compact variants for team rank */
.team-rank-big--compact{
    text-align:center;
    font-weight:900;
    font-size: clamp(28px, 4.5vw, 40px);
    line-height:1;
    margin-top:6px;
    color: var(--dark-color);
}
.team-rank-big--compact .rank-suffix{ font-size:.55em; margin-left:2px; font-weight:800; }

/* Extra small variant if needed */
.team-rank-big--mini{
    text-align:center;
    font-weight:900;
    font-size: clamp(22px, 3.6vw, 32px);
    line-height:1;
    margin-top:4px;
    color: var(--dark-color);
    opacity:.95;
}
.team-rank-big--mini .rank-suffix{ font-size:.6em; margin-left:2px; font-weight:800; }

@media (max-width:560px){
    .team-rank-big--compact{ font-size: clamp(26px, 6vw, 34px); }
    .team-rank-big--mini{ font-size: clamp(20px, 5.2vw, 28px); }
}
.team-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;   /* align right */
    gap:10px;
    margin: 10px 0 0 0;         /* just below title/subtitle */
    padding-right: 12px;        /* slight right padding to align visually */
}
.followers { color:var(--dark-color); font-weight:500; font-size: 0.95rem; }
.team-actions .sep { color:#d1d5db; }
.btn-follow {
    appearance: none;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color: #000;
    padding: 8px 14px;
    border-radius: 9999px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
    box-shadow: 0 4px 12px rgba(11,99,182,.18);
}
.btn-follow:hover { filter: brightness(1.05); }
.btn-follow[aria-pressed="true"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 6px 16px rgba(10,79,145,.22);
}
.btn-follow .fa { margin-right: 6px; }
@media (min-width: 768px) {
    .team-social-header { --avatar-size: 180px; }
}

@media (min-width: 992px) {
    .team-social-header { --cover-h: 300px; }
}
/* —— Two‑column layout starting after the header —— */
.team-content.two-col{
    width:100%;
    max-width:1200px;
    margin: 0 auto;
    padding: 0 12px; /* align with page gutters */
    box-sizing: border-box;
    display:grid;
    grid-template-columns: 1fr;   /* mobile: single column */
    gap: 16px;                     /* vertical & horizontal gap */
    grid-auto-flow: row dense;
}
@media (min-width: 992px){
    .team-content.two-col{
        grid-template-columns: 1fr 1fr; /* desktop: two columns */
        align-items: start;              /* cards start at the top */
        column-gap: 20px;                /* a bit more room between columns */
        row-gap: 18px;
    }
}
/* Make each .results section act like a card in the grid */
.team-content.two-col > .results{ width:100%; }

 .top-scorers-podium{max-width:900px;margin:14px auto 0;display:flex;align-items:flex-end;justify-content:center;gap:14px}
.podium-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
.podium-step{
    width:100%;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    padding-bottom:14px;
    background-color: #EEEEEE;
}
.podium-col.place-1 .podium-step{height:160px}
.podium-col.place-2 .podium-step{height:120px}
.podium-col.place-3 .podium-step{height:100px}
.podium-rank{font-weight:800;font-size:14px;color:#6b7280;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.podium-name{font-weight:700;font-size:clamp(14px,1.8vw,16px);text-align:center;line-height:1.1;padding:0 8px}
.podium-name-top { font-weight:800; font-size:clamp(18px,2vw,24px); text-align:center; line-height:1.15; margin-bottom:8px; }
.podium-rank-num {
    font-weight:900;
    font-size:clamp(26px,3vw,36px);
    color:#ffffff;
    margin-bottom:auto;
    margin-top:6px;
}
.podium-goals{font-weight:900;font-size:clamp(28px,3.6vw,40px);line-height:1}
.podium-goals small{font-size:60%;font-weight:700;color:#6b7280;margin-left:6px}
.podium-goals { font-size:clamp(20px,2.8vw,28px); }
@media (max-width:560px){
    .top-scorers-podium{gap:10px}
    .podium-col.place-1 .podium-step{height:140px}
    .podium-col.place-2 .podium-step{height:110px}
    .podium-col.place-3 .podium-step{height:96px}
}

     /* Make this section span full width inside two-col layout */
 .two-col .results.roster-full{grid-column:1/-1}
.roster-groups{display:flex;flex-direction:column;gap:24px;align-items:stretch}
.roster-group h3{margin:0 0 8px 0;text-align:center}
.roster-group{width:100%;}
.roster-grid{
    --tile-w: 220px; /* reduced width */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--tile-w), var(--tile-w)));
    gap: 16px;
    justify-content: center;
    align-items: start;
    width: 100%;
}
.player-tile{
    width:var(--tile-w);
    height: 250px; /* fixed tile height for uniform grid */
    background: var(--tile-background);
    border:1px solid var(--tile-background);
    border-radius:12px;
    padding:12px;
    box-shadow:0 0px 12px rgba(0,0,0,.2);
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.player-first{font-weight:700;font-size:17px;line-height:1.1;text-transform:none}
.player-last{font-weight:800;font-size:18px;line-height:1.1;text-transform:uppercase}
.player-flags{font-size:20px}
.player-meta{color:#6b7280;font-weight:600}
.player-meta .player-pos{display:block}
.player-meta .player-age{display:block;margin-top:2px;color:#6b7280;font-weight:600}
.player-goals{margin-top:6px;background:#EEEEEE;color:#555555; border-radius:999px;padding:2px 10px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.player-goals .ball{font-size:14px}
.player-goals-none{margin-top:6px;color:#9ca3af;font-weight:600;font-size:12px;line-height:1}

     /* Roster switch */
 .roster-switch{display:flex;gap:8px;justify-content:center;align-items:center;margin:10px 0 18px}
.roster-tab{appearance:none;border:1px solid #d1d5db;background:#f9fafb;color:#111827;padding:8px 12px;border-radius:999px;font-weight:700;cursor:pointer;font-size:14px;line-height:1}
.roster-tab:hover{background:#fff}
.roster-tab.active{background:#0b63b6;border-color:#0b63b6;color:#fff;box-shadow:0 4px 12px rgba(11,99,182,.18)}
@media (max-width:560px){.roster-tab{padding:7px 10px;font-size:13px}}

     /* --- Next matches horizontal tiles (Netflix-style) --- */
 .next-tiles{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x mandatory;width:100%;margin:0;}
.next-tiles::-webkit-scrollbar{height:8px}
.next-tiles::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:8px}
.next-card{flex:0 0 220px;background:var(--box-background);border:1px solid var(--box-background);border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.08);padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;scroll-snap-align:start}
.next-card .opp-logo{width:100px;height:100px;object-fit:contain;display:block}
.next-card .opp-name{font-weight:800;font-size:clamp(14px,1.8vw,16px);text-align:center;margin-top:10px;line-height:1.15;text-transform:uppercase}
.next-card .venue{margin-top:6px;background:var(--light-color);color:var(--dark-color);border-radius:999px;padding:4px 10px;font-weight:700;font-size:12px;line-height:1}
.next-card .venue.home{opacity:.95}
.next-card .venue.away{opacity:.95}
.next-card .score{margin-top:6px;font-weight:900;font-size:28px;line-height:1;text-align:center}
.next-card .dt{margin:0 0 8px 0;font-weight:700;color:#111827;font-size:14px;text-align:center}
.next-card .championship-badge{
    color:var(--gray-color);
    border-radius:999px;
    padding:4px 10px;
    font-weight:700;
    font-size:10px;
    line-height:1;
    text-align:center;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dt--pill{
    display:inline-block;
    padding:6px 12px;
    border-radius:12px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    background:rgba(255,255,255,0.14);
    border:1px solid var(--light-color);
    color:var(--dark-color);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    font-feature-settings:"c2sc","smcp";
    letter-spacing:.02em;
    text-align:center;
    margin-bottom:8px;
}
.dt--pill .dt-date{font-weight:800}
.dt--pill .dt-time{opacity:.8;font-weight:700;font-size:90%}
@media (max-width:560px){.next-card{flex-basis:190px}.next-card .opp-logo{width:64px;height:64px}}
@media (max-width:560px){
    .next-card .score{font-size:24px}
}
/* Wrapper and arrow navigation (desktop only) */
.next-wrapper{position:relative;width:100%}
.next-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:9999px;border:none;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;opacity:0;pointer-events:none;z-index:2;transition:opacity .18s ease, transform .18s ease, background .25s ease, box-shadow .25s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(255,255,255,0.12);border:1px solid var(--light-color);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.next-nav svg{width:22px;height:22px;display:block}
.next-nav svg {
    color: var(--dark-color);
    opacity: 0.5;
}
.next-nav.prev{left:8px}
.next-nav.next{right:8px}
.next-wrapper:hover .next-nav{opacity:1;pointer-events:auto}
.next-wrapper .next-nav:hover{transform:translateY(-50%) scale(1.06);background:rgba(255,255,255,0.22)}
.next-tiles{scroll-behavior:smooth}
.next-tiles{scrollbar-width:none;}
.next-wrapper:hover .next-tiles{scrollbar-width:thin;}
.next-tiles::-webkit-scrollbar{height:0}
.next-wrapper:hover .next-tiles::-webkit-scrollbar{height:8px}
/* hide arrows on small screens */
@media(max-width:991px){.next-nav{display:none}}

     /**** Styles calqués sur resultats.php ****/
 .results .match-list { width: 100%; }
.results h2 { text-align: center; }

/* Base match card */
.results .match-row { display:flex; align-items:center; justify-content:space-between; padding:16px 14px; background:var(--box-background); border:1px solid var(--box-background); border-radius:12px; box-shadow:0 0px 16px rgba(0,0,0,0.2); margin:10px 0; gap: 10px; }
.results .team { flex:1 1 40%; font-weight:200; text-align: center !important; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.results .team .team-name { font-size: 0.82rem; line-height: 1.1; color: #4b5563; font-weight: 500; max-width: 120px; text-wrap: balance; text-transform: uppercase; }
.results .team img.logo { height: 72px; width: 72px; object-fit: contain; margin: 0; vertical-align: middle; }

/* Center score area */
.results .score-center { min-width: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.results .status-label { font-size: 0.78rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; min-width: 84px; text-align: center; white-space: nowrap; }
.results .score-line .status-label { grid-column: 2; }
.results .status-label.time { color: #111827; font-weight: 700; }
.results .status-label.postponed { color: #b45309; font-weight: 800; }
.results .status-label.pending { color: #6b7280; font-weight: 700; }

/* Date centered above score/time */
.results .match-date { font-size: 0.9rem; color: #6b7280; font-weight: 600; text-align: center; }
.results .score-center .match-date { margin-bottom: 2px; }

.results .score-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; column-gap: 56px; width: 100%; }
.results .score-num.home { justify-self: end; }
.results .score-num.away { justify-self: start; }
.results .score-num { font-size: 2.2rem; font-weight: 800; line-height: 1; min-width: 28px; text-align: center; }
.results .score-num.lead { color: #111; }
.results .score-num.trail { color: #9ca3af; }
.results .score-num.tie { color: #111; }

.results .forfeit-badge { background: #991b1b; color: #fff; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; }
.results .pens-note { margin-top: 2px; font-size: 0.85rem; color: #999999; text-align: center; line-height: 1.2 }

/* Container width alignment */
.results { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

@media (max-width: 480px) {
    .results .team img.logo { height: 60px; width: 60px; }
    .results .score-num { font-size: 1.9rem; }
    .results .score-center { min-width: 220px; }
    .results .score-line { column-gap: 24px; }
}

     /* Roster slider (horizontal like last/next sliders) */
 .roster-wrapper{position:relative;width:100%;margin:10px 0 22px;}
.roster-tiles{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x mandatory;width:100%;margin:0;scroll-behavior:smooth}
.roster-tiles{scrollbar-width:none;}
.roster-wrapper:hover .roster-tiles{scrollbar-width:thin;}
.roster-tiles::-webkit-scrollbar{height:0}
.roster-wrapper:hover .roster-tiles::-webkit-scrollbar{height:8px}
.roster-tiles::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:8px}
.roster-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:9999px;border:none;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;opacity:0;pointer-events:none;z-index:2;transition:opacity .18s ease, transform .18s ease, background .25s ease, box-shadow .25s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(255,255,255,0.12);border:1px solid var(--light-color);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.roster-nav svg{width:22px;height:22px;display:block;color:var(--dark-color);opacity:0.5}
.roster-nav.prev{left:8px}
.roster-nav.next{right:8px}
.roster-wrapper:hover .roster-nav{opacity:1;pointer-events:auto}
.roster-wrapper .roster-nav:hover{transform:translateY(-50%) scale(1.06);background:rgba(255,255,255,0.22)}
/* Player tile adapts for slider */
.roster-tiles .player-tile{flex:0 0 220px;scroll-snap-align:start}
@media(max-width:991px){.roster-nav{display:none}}

     /* --- Last matches horizontal tiles (Netflix-style) --- */
 .last-tiles{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x mandatory;width:100%;margin:0;scroll-behavior:smooth}
.last-tiles{scrollbar-width:none;}
.last-wrapper:hover .last-tiles{scrollbar-width:thin;}
.last-tiles::-webkit-scrollbar{height:0}
.last-wrapper:hover .last-tiles::-webkit-scrollbar{height:8px}
.last-tiles::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:8px}
.last-card{flex:0 0 220px;background:var(--box-background);border:1px solid var(--box-background);border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.08);padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;scroll-snap-align:start}
.last-card .opp-logo{width:100px;height:100px;object-fit:contain;display:block}
.last-card .opp-name{font-weight:800;font-size:clamp(14px,1.8vw,16px);text-align:center;margin-top:10px;line-height:1.15;text-transform:uppercase}
.last-card .championship-badge{
    color:var(--gray-color);
    border-radius:999px;
    padding:4px 10px;
    font-weight:700;
    font-size:10px;
    line-height:1;
    text-align:center;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.last-card .score{margin-top:6px;font-weight:900;font-size:28px;line-height:1}
.last-card .badge{
    margin-top:auto; /* Push badge to bottom */
    border-radius:9999px;
    padding:4px 10px;
    font-weight:800;
    font-size:12px;
    line-height:1;
}
.last-card .badge.win{background:var(--statut-win-color); color:var(--status-win-fg, #43876b)}
.last-card .badge.draw{background:var(--statut-draw-color, #e5e7eb); color:var(--status-draw-fg, #111)}
.last-card .badge.loss{background:var(--statut-loss-color, #ef4444); color:var(--status-loss-fg, #fff)}
.last-card .dt{margin:0 0 8px 0;font-weight:700;color:#111827;font-size:14px;text-align:center}
.dt--pill{
    display:inline-block;
    padding:6px 12px;
    border-radius:12px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--light-color);
    color:var(--dark-color);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    font-feature-settings:"c2sc","smcp";
    letter-spacing:.02em;
    text-align:center;
    margin-bottom:8px;
}
.dt--pill .dt-date{font-weight:800}
.dt--pill .dt-time{opacity:.8;font-weight:700;font-size:90%}
/* Wrapper and arrow navigation (desktop only) */
.last-wrapper{position:relative;width:100%;margin-bottom:28px;}
.last-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:9999px;border:none;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;opacity:0;pointer-events:none;z-index:2;transition:opacity .18s ease, transform .18s ease, background .25s ease, box-shadow .25s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(255,255,255,0.12);border:1px solid var(--light-color);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.last-nav svg{width:22px;height:22px;display:block}
.last-nav svg {
    color: var(--dark-color);
    opacity: 0.5;
}
.last-nav.prev{left:8px}
.last-nav.next{right:8px}
.last-wrapper:hover .last-nav{opacity:1;pointer-events:auto}
.last-wrapper .last-nav:hover{transform:translateY(-50%) scale(1.06);background:rgba(255,255,255,0.22)}
@media(max-width:991px){.last-nav{display:none}}
@media (max-width:560px){
    .last-card .score{font-size:24px}
}