/* ═══════════════════════════════════════════════════════════════
   SPORTSDATA — PAGE SINGLE MATCH
   ═══════════════════════════════════════════════════════════════ */

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.sd-single {
    max-width:  1200px;
    margin:     0 auto;
    padding:    28px 24px 80px;
    background: var(--sd-bg-base);
    color:      var(--sd-text-1);
    font-family: var(--sd-font);
    -webkit-font-smoothing: antialiased;
}

.sd-single-grid {
    display:               grid;
    grid-template-columns: 1fr 360px;
    gap:                   24px;
    margin-top:            24px;
}

/* ─── HERO DU MATCH ──────────────────────────────────────────── */
.sd-match-hero {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-lg);
    padding:       32px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           24px;
    flex-wrap:     wrap;
}
.sd-hero-team {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    flex:           1;
    min-width:      120px;
}
.sd-hero-team-name {
    font-size:      20px;
    font-weight:    800;
    text-align:     center;
    letter-spacing: -.3px;
}
.sd-hero-team-badge {
    width:         56px;
    height:        56px;
    border-radius: 50%;
    background:    var(--sd-bg-elevated);
    border:        1px solid var(--sd-border);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     22px;
}
.sd-hero-score {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
}
.sd-hero-vs {
    font-size:      36px;
    font-weight:    900;
    color:          var(--sd-text-3);
    letter-spacing: .05em;
}
.sd-hero-time {
    font-size:      14px;
    color:          var(--sd-text-2);
    font-variant-numeric: tabular-nums;
}
.sd-hero-meta {
    display:   flex;
    gap:       8px;
    flex-wrap: wrap;
    margin-top: 4px;
    justify-content: center;
}
.sd-hero-badge {
    padding:       3px 10px;
    border-radius: 4px;
    font-size:     11px;
    font-weight:   600;
    background:    var(--sd-bg-elevated);
    border:        1px solid var(--sd-border);
    color:         var(--sd-text-2);
}
.sd-hero-badge--live {
    background: rgba(0,255,135,.12);
    border-color: var(--sd-accent);
    color:        var(--sd-accent);
    animation:    sd-pulse 2s infinite;
}

/* ─── SECTION GÉNÉRIQUE ──────────────────────────────────────── */
.sd-section {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-lg);
    padding:       24px;
}
.sd-section + .sd-section { margin-top: 20px }

.sd-section-title {
    font-size:      12px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--sd-text-3);
    margin-bottom:  18px;
    display:        flex;
    align-items:    center;
    gap:            8px;
}
.sd-section-title::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--sd-border);
}

/* ─── RADAR CHART ────────────────────────────────────────────── */
.sd-radar-wrap {
    position: relative;
    height:   300px;
    display:  flex;
    align-items: center;
    justify-content: center;
}
.sd-radar-legend {
    display:         flex;
    justify-content: center;
    gap:             24px;
    margin-top:      16px;
}
.sd-radar-legend-item {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    color:       var(--sd-text-2);
}
.sd-radar-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}

/* ─── XG BAR ─────────────────────────────────────────────────── */
.sd-xg-row {
    display:     flex;
    align-items: center;
    gap:         16px;
}
.sd-xg-val {
    font-size:            22px;
    font-weight:          800;
    font-variant-numeric: tabular-nums;
    min-width:            50px;
    text-align:           center;
}
.sd-xg-val--home { color: var(--sd-p-home) }
.sd-xg-val--away { color: var(--sd-p-away) }

.sd-xg-bar-wrap { flex: 1; display: flex; gap: 2px; height: 10px }
.sd-xg-segment {
    height:        100%;
    border-radius: 3px;
    transition:    width .6s cubic-bezier(.4,0,.2,1);
}
.sd-xg-segment--home { background: var(--sd-p-home) }
.sd-xg-segment--draw { background: var(--sd-border) }
.sd-xg-segment--away { background: var(--sd-p-away) }

.sd-xg-label { font-size: 11px; color: var(--sd-text-3); text-align: center; margin-top: 8px }

/* ─── BLOC CTA STICKY ────────────────────────────────────────── */
.sd-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.sd-cta-block {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-accent);
    border-radius: var(--sd-r-lg);
    padding:       28px 24px;
    text-align:    center;
    position:      sticky;
    top:           24px;
    box-shadow:    0 0 40px rgba(0,255,135,.08);
}
.sd-cta-block-title {
    font-size:   11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:       var(--sd-text-3);
    margin-bottom: 6px;
}
.sd-cta-block-value {
    font-size:   13px;
    color:       var(--sd-text-2);
    margin-bottom: 16px;
    line-height: 1.6;
}
.sd-cta-block-value strong {
    color:       var(--sd-pos-strong);
    font-size:   15px;
}
.sd-cta-btn-large {
    display:      flex;
    align-items:  center;
    justify-content: center;
    gap:          8px;
    width:        100%;
    padding:      14px 20px;
    background:   var(--sd-accent);
    color:        var(--sd-cta-ink);
    font-family:  var(--sd-font);
    font-size:    15px;
    font-weight:  800;
    letter-spacing: .02em;
    border-radius: var(--sd-r);
    text-decoration: none;
    position:     relative;
    overflow:     hidden;
    transition:   background var(--sd-t), box-shadow var(--sd-t), transform var(--sd-t);
}
.sd-cta-btn-large::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 55%);
    pointer-events: none;
}
.sd-cta-btn-large:hover {
    background: var(--sd-accent-dk);
    box-shadow: 0 0 30px var(--sd-accent-glow), 0 6px 20px rgba(0,0,0,.5);
    transform:  translateY(-1px);
    color:      var(--sd-cta-ink);
}
.sd-cta-disclaimer {
    font-size:   11px;
    color:       var(--sd-text-3);
    margin-top:  12px;
    line-height: 1.6;
}

/* ─── CONFIDENCE WIDGET ──────────────────────────────────────── */
.sd-confidence-widget {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-lg);
    padding:       20px;
    text-align:    center;
}
.sd-confidence-score-big {
    font-size:            52px;
    font-weight:          900;
    line-height:          1;
    font-variant-numeric: tabular-nums;
    letter-spacing:       -.04em;
}
.sd-conf--high .sd-confidence-score-big { color: var(--sd-conf-high) }
.sd-conf--mid  .sd-confidence-score-big { color: var(--sd-conf-mid)  }
.sd-conf--low  .sd-confidence-score-big { color: var(--sd-conf-low)  }
.sd-confidence-sub {
    font-size:   12px;
    color:       var(--sd-text-3);
    margin-top:  4px;
}
.sd-pips-large {
    display:         flex;
    justify-content: center;
    gap:             5px;
    margin-top:      14px;
}
.sd-pips-large .sd-pip {
    width:  10px;
    height: 10px;
}

/* ─── PROBS 1X2 ──────────────────────────────────────────────── */
.sd-probs-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    list-style: none !important;
}
.sd-prob-item {
    display: block !important;
    border: 1px solid var(--sd-border) !important;
    border-radius: var(--sd-r) !important;
    padding: 14px 16px !important;
    background: var(--sd-bg-elevated) !important;
    margin: 0 !important;
}
.sd-prob-item--best {
    border-color: var(--sd-accent) !important;
    background: rgba(0,255,135,.04) !important;
}
.sd-prob-item-top {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    flex-wrap: nowrap !important;
}
.sd-prob-item-lbl {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--sd-text-1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sd-prob-item-vals {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}
.sd-prob-item-pct {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--sd-text-1) !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.sd-prob-item--best .sd-prob-item-pct { color: var(--sd-accent) !important }
.sd-prob-item-odds {
    font-size: 12px !important;
    color: var(--sd-text-3) !important;
    white-space: nowrap !important;
    background: var(--sd-bg-surface) !important;
    border: 1px solid var(--sd-border) !important;
    border-radius: 4px !important;
    padding: 2px 7px !important;
    margin: 0 !important;
}
.sd-prob-item-edge {
    font-size: 12px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    margin: 0 !important;
}
.sd-prob-item-edge.pos { color: var(--sd-pos) !important }
.sd-prob-item-edge.neg { color: var(--sd-neg) !important }
.sd-prob-item-track {
    display: block !important;
    height: 5px !important;
    background: var(--sd-border) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin: 0 !important;
}
.sd-prob-bar {
    display: block !important;
    height: 100% !important;
    border-radius: 4px !important;
    transition: width .5s cubic-bezier(.4,0,.2,1) !important;
}
.sd-prob-bar--home { background: var(--sd-p-home) !important }
.sd-prob-bar--draw { background: var(--sd-p-draw) !important }
.sd-prob-bar--away { background: var(--sd-p-away) !important }
.sd-prob-item--best .sd-prob-bar--home,
.sd-prob-item--best .sd-prob-bar--draw,
.sd-prob-item--best .sd-prob-bar--away { background: var(--sd-accent) !important }
.sd-prob-cta {
    display: block !important;
    text-align: center !important;
    margin-top: 12px !important;
    padding: 10px 16px !important;
    border-radius: var(--sd-r) !important;
    background: var(--sd-accent) !important;
    color: var(--sd-cta-ink) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}
.sd-prob-cta:hover { background: var(--sd-accent-dk) !important; color: var(--sd-cta-ink) !important }

/* ─── FORME ─────────────────────────────────────────────────── */
.sd-form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.sd-form-row {
    display: grid !important;
    grid-template-columns: 110px 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    background: var(--sd-bg-elevated) !important;
    border: 1px solid var(--sd-border) !important;
    border-radius: var(--sd-r) !important;
    padding: 14px 16px !important;
    margin: 0 !important;
}
.sd-form-team {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--sd-text-1) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
.sd-form-badges {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sd-form-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sd-form-badge--w {
    background: rgba(0,255,135,.15) !important;
    color: var(--sd-accent) !important;
    border: 1px solid rgba(0,255,135,.3) !important;
}
.sd-form-badge--d {
    background: rgba(255,200,0,.12) !important;
    color: #ffc800 !important;
    border: 1px solid rgba(255,200,0,.25) !important;
}
.sd-form-badge--l {
    background: rgba(255,75,75,.12) !important;
    color: var(--sd-neg) !important;
    border: 1px solid rgba(255,75,75,.25) !important;
}
.sd-form-kpis {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.sd-form-kpi {
    text-align: center !important;
    margin: 0 !important;
}
.sd-form-kpi span {
    display: block !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--sd-text-1) !important;
    font-variant-numeric: tabular-nums !important;
    margin: 0 !important;
}
.sd-form-kpi small {
    display: block !important;
    font-size: 10px !important;
    color: var(--sd-text-3) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin-top: 2px !important;
}

/* ─── MARCHÉS — STRUCTURE COMMUNE ───────────────────────────── */
.sd-mblock-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--sd-text-3) !important;
    padding: 10px 0 8px !important;
    border: none !important;
    border-bottom: 1px solid var(--sd-border) !important;
    margin: 0 0 12px !important;
}
.sd-mblock-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ─── MCARD (Over/Under + BTTS) ─────────────────────────────── */
.sd-mcard {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--sd-bg-elevated) !important;
    border: 1px solid var(--sd-border) !important;
    border-radius: var(--sd-r) !important;
    padding: 18px 14px 14px !important;
    text-align: center !important;
    margin: 0 !important;
}
.sd-mcard--best {
    border-color: var(--sd-accent) !important;
    background: rgba(0,255,135,.05) !important;
    box-shadow: 0 0 20px rgba(0,255,135,.08) !important;
}
.sd-mcard-icon {
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.sd-mcard-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--sd-text-2) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin: 0 !important;
}
.sd-mcard-gauge {
    display: block !important;
    width: 100% !important;
    height: 6px !important;
    background: var(--sd-border) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.sd-mcard-gauge-fill {
    display: block !important;
    height: 6px !important;
    border-radius: 6px !important;
    background: var(--sd-text-3) !important;
    transition: width .5s cubic-bezier(.4,0,.2,1) !important;
}
.sd-mcard--best .sd-mcard-gauge-fill { background: var(--sd-accent) !important }
.sd-mcard-prob {
    font-size: 30px !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--sd-text-1) !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.sd-mcard--best .sd-mcard-prob { color: var(--sd-accent) !important }
.sd-mcard-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 9px 0 !important;
    border-radius: var(--sd-r) !important;
    background: var(--sd-accent) !important;
    color: var(--sd-cta-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.sd-mcard-btn:hover { background: var(--sd-accent-dk) !important; color: var(--sd-cta-ink) !important }
.sd-mcard-btn--ghost {
    background: transparent !important;
    border: 1px solid var(--sd-border) !important;
    color: var(--sd-text-3) !important;
}
.sd-mcard-btn--ghost:hover { background: var(--sd-border) !important; color: var(--sd-text-1) !important }

/* ─── DOUBLE CHANCE ─────────────────────────────────────────── */
.sd-dc-grid         { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px }
.sd-dc-card {
    background: var(--sd-bg-elevated); border: 1px solid var(--sd-border);
    border-radius: var(--sd-r); padding: 14px 10px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-align: center; position: relative; transition: border-color var(--sd-t);
}
.sd-dc-card--best   { border-color: var(--sd-accent); background: rgba(0,255,135,.05) }
.sd-dc-best-tag {
    font-size: 9px; font-weight: 800; color: var(--sd-accent);
    text-transform: uppercase; letter-spacing: .05em;
    background: rgba(0,255,135,.1); border-radius: 3px; padding: 2px 6px;
}
.sd-dc-lbl          { font-size: 22px; font-weight: 900; color: var(--sd-text-1); line-height: 1 }
.sd-dc-card--best .sd-dc-lbl { color: var(--sd-accent) }
.sd-dc-prob         { font-size: 18px; font-weight: 800; color: var(--sd-text-1); font-variant-numeric: tabular-nums }
.sd-dc-desc         { font-size: 10px; color: var(--sd-text-3); line-height: 1.4 }
.sd-dc-btn {
    display: block; width: 100%; margin-top: 6px;
    padding: 7px 0; border-radius: var(--sd-r);
    background: var(--sd-bg-surface); border: 1px solid var(--sd-border);
    color: var(--sd-text-2); font-size: 11px; font-weight: 700;
    text-decoration: none; transition: background var(--sd-t), color var(--sd-t);
}
.sd-dc-btn:hover    { background: var(--sd-accent); color: var(--sd-cta-ink); border-color: var(--sd-accent) }
.sd-dc-card--best .sd-dc-btn { background: var(--sd-accent); color: var(--sd-cta-ink); border-color: var(--sd-accent) }

/* ─── SCORES EXACTS ─────────────────────────────────────────── */
.sd-scores-grid     { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px }
.sd-score-card {
    background: var(--sd-bg-elevated); border: 1px solid var(--sd-border);
    border-radius: var(--sd-r); padding: 14px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    text-align: center; transition: border-color var(--sd-t);
}
.sd-score-card--top {
    border-color: var(--sd-accent);
    background: rgba(0,255,135,.05);
    box-shadow: 0 0 16px rgba(0,255,135,.08);
}
.sd-score-top-badge { font-size: 10px; font-weight: 800; color: var(--sd-accent) }
.sd-score-val       { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums;
                      color: var(--sd-text-1); letter-spacing: .04em; line-height: 1 }
.sd-score-card--top .sd-score-val { color: var(--sd-accent) }
.sd-score-prob      { font-size: 12px; color: var(--sd-text-3) }
.sd-score-bar       { width: 100%; height: 3px; background: var(--sd-border); border-radius: 2px; overflow: hidden }
.sd-score-bar > div { height: 100%; border-radius: 2px; transition: width .6s cubic-bezier(.4,0,.2,1) }
.sd-score-btn {
    display: block; width: 100%; padding: 7px 0; border-radius: var(--sd-r);
    background: var(--sd-accent); color: var(--sd-cta-ink);
    font-size: 10px; font-weight: 800; text-decoration: none;
    transition: background var(--sd-t);
}
.sd-score-btn:hover      { background: var(--sd-accent-dk); color: var(--sd-cta-ink) }
.sd-score-btn--ghost     { background: transparent; border: 1px solid var(--sd-border); color: var(--sd-text-3) }
.sd-score-btn--ghost:hover { background: var(--sd-border); color: var(--sd-text-1) }
.sd-scores-note     { font-size: 11px; color: var(--sd-text-3); text-align: center; margin-top: 12px }

/* ─── RESPONSIVE SINGLE ──────────────────────────────────────── */
@media (max-width: 900px) {
    .sd-single          { padding: 20px 16px 60px }
    .sd-single-grid     { grid-template-columns: 1fr }
    .sd-cta-block       { position: static }
    .sd-mblock-cards    { grid-template-columns: 1fr 1fr }
    .sd-radar-wrap      { height: 240px }
}
@media (max-width: 600px) {
    .sd-single          { padding: 16px 12px 56px }
    .sd-match-hero      { flex-direction: column; text-align: center; padding: 20px 16px }
    .sd-hero-team       { flex-direction: row; gap: 14px }
    .sd-dc-grid         { grid-template-columns: 1fr 1fr }
    .sd-scores-grid     { grid-template-columns: repeat(2,1fr) }
    .sd-form-row        { flex-direction: column; align-items: flex-start }
    .sd-prob-item-vals  { gap: 8px }
    .sd-confidence-score-big { font-size: 38px }
    .sd-xg-val          { font-size: 17px; min-width: 38px }
    .sd-radar-wrap      { height: 200px }
}
@media (max-width: 480px) {
    .sd-single          { padding: 12px 10px 48px }
    .sd-match-hero      { padding: 16px 12px }
    .sd-hero-team-name  { font-size: 13px }
    .sd-crest           { width: 36px; height: 36px }
    .sd-hero-result     { font-size: 28px }
    .sd-dc-grid         { grid-template-columns: 1fr }
    .sd-scores-grid     { grid-template-columns: repeat(2,1fr) }
    .sd-confidence-score-big { font-size: 32px }
    .sd-mblock-cards    { grid-template-columns: 1fr }
    .sd-section-title   { font-size: 12px }
    .sd-radar-wrap      { height: 180px }
}