/* ═══════════════════════════════════════════════════════════════
   SPORTSDATA — DESIGN SYSTEM v2
   Dark mode · Inter · Accent Vert Néon · Responsive complet
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
    --sd-bg-base:      #0d0d10;
    --sd-bg-surface:   #141417;
    --sd-bg-elevated:  #1b1b1f;
    --sd-bg-hover:     #22222a;
    --sd-border:       #2a2a33;
    --sd-border-sub:   #1e1e26;

    --sd-text-1: #f0f0f3;
    --sd-text-2: #8a8a96;
    --sd-text-3: #50505c;

    --sd-accent:      #00ff87;
    --sd-accent-dk:   #00cc6a;
    --sd-accent-glow: rgba(0,255,135,.22);
    --sd-cta-ink:     #001a0d;

    --sd-pos-strong: #00ff87;
    --sd-pos:        #00e5a0;
    --sd-neg:        #ff4d6a;
    --sd-warn:       #f0a500;
    --sd-info:       #3d9eff;

    --sd-p-home: #3d9eff;
    --sd-p-draw: #9b8aff;
    --sd-p-away: #ff7043;

    --sd-conf-high: #00e5a0;
    --sd-conf-mid:  #f0a500;
    --sd-conf-low:  #ff4d6a;

    --sd-r:    8px;
    --sd-r-sm: 5px;
    --sd-r-lg: 14px;
    --sd-t:    0.14s ease;
    --sd-font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── RESET ──────────────────────────────────────────────────── */
.sd-dashboard *, .sd-dashboard *::before, .sd-dashboard *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

body { background: var(--sd-bg-base) }

.sd-dashboard {
    background:  var(--sd-bg-base);
    color:       var(--sd-text-1);
    font-family: var(--sd-font);
    font-size:   14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    max-width:   1440px;
    margin:      0 auto;
    padding:     32px 24px 80px;
}

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

/* ─── LANDING HERO ───────────────────────────────────────────── */
.sd-landing-hero {
    display:       grid;
    grid-template-columns: 1fr 340px;
    gap:           48px;
    align-items:   center;
    padding:       60px 0 48px;
    border-bottom: 1px solid var(--sd-border);
    margin-bottom: 48px;
}

.sd-landing-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    font-size:     11px;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:         var(--sd-accent);
    background:    rgba(0,255,135,.08);
    border:        1px solid rgba(0,255,135,.2);
    border-radius: 20px;
    padding:       4px 12px;
    margin-bottom: 20px;
}

.sd-landing-title {
    font-size:      42px;
    font-weight:    900;
    line-height:    1.15;
    letter-spacing: -.03em;
    margin-bottom:  16px;
}

.sd-accent-text { color: var(--sd-accent) }

.sd-landing-sub {
    font-size:   16px;
    line-height: 1.7;
    color:       var(--sd-text-2);
    max-width:   560px;
    margin-bottom: 28px;
}
.sd-landing-sub strong { color: var(--sd-text-1) }

.sd-landing-ctas {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-wrap:   wrap;
}

.sd-cta-btn--lg {
    font-size: 15px;
    padding:   12px 24px;
}

.sd-landing-link {
    font-size:   14px;
    color:       var(--sd-text-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition:  color var(--sd-t);
}
.sd-landing-link:hover { color: var(--sd-text-1) }

.sd-landing-kpis {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.sd-kpi {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-lg);
    padding:       20px 24px;
}

.sd-kpi-val {
    display:              block;
    font-size:            36px;
    font-weight:          900;
    font-variant-numeric: tabular-nums;
    color:                var(--sd-accent);
    line-height:          1.1;
    margin-bottom:        4px;
}

.sd-kpi-lbl {
    font-size:   12px;
    color:       var(--sd-text-2);
    font-weight: 500;
}

/* ─── SECTION LANDING ────────────────────────────────────────── */
.sd-landing-section { margin: 48px 0 }

.sd-landing-section-title {
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-size:      18px;
    font-weight:    700;
    letter-spacing: -.3px;
    margin-bottom:  24px;
}

/* ─── "HOW IT WORKS" ─────────────────────────────────────────── */
.sd-how-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
}

.sd-how-card {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-lg);
    padding:       24px 20px;
}

.sd-how-icon  { font-size: 28px; margin-bottom: 12px }
.sd-how-title { font-size: 14px; font-weight: 700; margin-bottom: 8px }
.sd-how-text  { font-size: 13px; color: var(--sd-text-2); line-height: 1.65 }

/* ─── HEADER DASHBOARD ───────────────────────────────────────── */
.sd-dash-header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             20px;
    margin-bottom:   20px;
}

.sd-dash-title {
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-size:      22px;
    font-weight:    700;
    letter-spacing: -.4px;
}
.sd-dash-subtitle { margin-top: 5px; font-size: 13px; color: var(--sd-text-2) }

/* Dot live animé */
.sd-pulse-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background:    var(--sd-accent);
    flex-shrink:   0;
    animation:     sd-pulse 2.4s ease-in-out infinite;
}
@keyframes sd-pulse {
    0%,100% { box-shadow: 0 0 0 0 var(--sd-accent-glow) }
    50%      { box-shadow: 0 0 0 8px transparent }
}

/* ─── DATE NAV ───────────────────────────────────────────────── */
.sd-dash-header__right { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end }

.sd-date-nav { display: flex; align-items: center; gap: 4px }

.sd-date-btn {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         32px;
    height:        34px;
    background:    var(--sd-bg-elevated);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-sm);
    color:         var(--sd-text-2);
    font-size:     18px;
    text-decoration: none;
    transition:    border-color var(--sd-t), color var(--sd-t);
    user-select:   none;
}
.sd-date-btn:hover              { border-color: var(--sd-accent); color: var(--sd-text-1) }
.sd-date-btn--disabled          { opacity: .3; cursor: default; pointer-events: none }

.sd-date-picker { min-width: 140px }

/* ─── CONTRÔLES ──────────────────────────────────────────────── */
.sd-controls { display: flex; flex-direction: column; gap: 4px }

.sd-control-label {
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--sd-text-3);
}

.sd-select {
    appearance: none;
    background:
        var(--sd-bg-elevated)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5z' fill='%238a8a96'/%3E%3C/svg%3E")
        no-repeat right 10px center;
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-sm);
    color:         var(--sd-text-1);
    font-family:   var(--sd-font);
    font-size:     13px;
    padding:       7px 30px 7px 10px;
    cursor:        pointer;
    min-width:     150px;
    transition:    border-color var(--sd-t);
}
.sd-select:focus,
.sd-select:hover { border-color: var(--sd-accent); outline: none }

/* ─── VIEW TOGGLE ────────────────────────────────────────────── */
.sd-view-toggle {
    display:       flex;
    gap:           4px;
    margin-bottom: 16px;
}
.sd-view-btn {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       6px 12px;
    background:    var(--sd-bg-elevated);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-sm);
    color:         var(--sd-text-2);
    font-family:   var(--sd-font);
    font-size:     12px;
    font-weight:   500;
    cursor:        pointer;
    transition:    border-color var(--sd-t), color var(--sd-t), background var(--sd-t);
}
.sd-view-btn:hover         { color: var(--sd-text-1) }
.sd-view-btn--active       { border-color: var(--sd-accent); color: var(--sd-accent); background: rgba(0,255,135,.06) }

/* ─── TABLE WRAPPER ──────────────────────────────────────────── */
.sd-table-wrapper {
    overflow-x:    auto;
    border-radius: var(--sd-r);
    border:        1px solid var(--sd-border);
    background:    var(--sd-bg-surface);
    scrollbar-width: thin;
    scrollbar-color: var(--sd-border) transparent;
}
.sd-table-wrapper::-webkit-scrollbar       { height: 5px }
.sd-table-wrapper::-webkit-scrollbar-thumb { background: var(--sd-border); border-radius: 3px }

/* ─── TABLE ──────────────────────────────────────────────────── */
.sd-table { width: 100%; border-collapse: collapse }

.sd-th {
    padding:        11px 16px;
    text-align:     left;
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--sd-text-3);
    background:     var(--sd-bg-elevated);
    border-bottom:  1px solid var(--sd-border);
    white-space:    nowrap;
    position:       sticky;
    top:            0;
    z-index:        10;
    user-select:    none;
    transition:     color var(--sd-t);
}
.sd-th[data-sort]       { cursor: pointer }
.sd-th[data-sort]:hover { color: var(--sd-text-2) }
.sd-th--active          { color: var(--sd-accent) !important }
.sd-sort-icon           { display: inline-block; margin-left: 3px; opacity: .6 }

.sd-td {
    padding:        13px 16px;
    border-bottom:  1px solid var(--sd-border-sub);
    vertical-align: middle;
}
.sd-row                   { transition: background var(--sd-t) }
.sd-row:hover             { background: var(--sd-bg-hover) }
.sd-row:last-child .sd-td { border-bottom: none }

@keyframes sd-row-in {
    from { opacity:0; transform:translateY(-4px) }
    to   { opacity:1; transform:translateY(0) }
}
.sd-row {
    animation:       sd-row-in .18s ease both;
    animation-delay: calc(var(--row-index,0) * .03s);
}

/* ─── BADGE ──────────────────────────────────────────────────── */
.sd-badge {
    display:       inline-block;
    padding:       3px 8px;
    border-radius: 4px;
    background:    var(--sd-bg-elevated);
    border:        1px solid var(--sd-border);
    font-size:     11px;
    font-weight:   500;
    color:         var(--sd-text-2);
    white-space:   nowrap;
}

.sd-result-badge {
    display:       inline-block;
    padding:       2px 7px;
    border-radius: 4px;
    background:    rgba(0,229,160,.1);
    border:        1px solid rgba(0,229,160,.25);
    color:         var(--sd-pos);
    font-size:     11px;
    font-weight:   700;
    margin-left:   6px;
    font-variant-numeric: tabular-nums;
}

/* ─── MATCH ──────────────────────────────────────────────────── */
.sd-match-link { display:flex; align-items:center; gap:8px; min-width:200px }
.sd-team       { font-size:14px; font-weight:600; white-space:nowrap; transition:color var(--sd-t) }
.sd-match-link:hover .sd-team { color: var(--sd-accent) }
.sd-vs         { font-size:11px; color:var(--sd-text-3); flex-shrink:0 }

/* ─── HEURE ──────────────────────────────────────────────────── */
.sd-time { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.02em }

/* ─── PROBABILITÉS ───────────────────────────────────────────── */
.sd-prob-group { display:flex; flex-direction:column; gap:6px; min-width:140px }
.sd-prob-row   { display:grid; grid-template-columns:14px 1fr 40px; align-items:center; gap:6px }
.sd-prob-lbl   { font-size:10px; font-weight:700; color:var(--sd-text-3); text-align:right }
.sd-prob-track { height:5px; background:var(--sd-border); border-radius:3px; overflow:hidden }
.sd-prob-bar   { height:100%; border-radius:3px; transition:width .7s cubic-bezier(.4,0,.2,1) }
.sd-prob-bar--home { background: var(--sd-p-home) }
.sd-prob-bar--draw { background: var(--sd-p-draw) }
.sd-prob-bar--away { background: var(--sd-p-away) }
.sd-prob-val   { font-size:11px; font-weight:600; color:var(--sd-text-2); font-variant-numeric:tabular-nums; text-align:right }

/* ─── COTES ──────────────────────────────────────────────────── */
.sd-odds-group { display:flex; gap:14px }
.sd-odds-item  { display:flex; flex-direction:column; align-items:center; gap:2px }
.sd-odds-lbl   { font-size:10px; font-weight:600; color:var(--sd-text-3); text-transform:uppercase }
.sd-odds-val   { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums }

/* ─── VALUE BET ──────────────────────────────────────────────── */
.sd-value       { display:flex; flex-direction:column; gap:2px }
.sd-value-pick  { font-size:11px; font-weight:500; color:var(--sd-text-2) }
.sd-value-edge  { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums }
.sd-value--strong   .sd-value-edge  { color:var(--sd-pos-strong); text-shadow:0 0 14px rgba(0,255,135,.45) }
.sd-value--positive .sd-value-edge  { color:var(--sd-pos) }
.sd-value--negative                 { color:var(--sd-text-3); font-size:20px }

/* ─── CONFIANCE ──────────────────────────────────────────────── */
.sd-conf         { display:flex; flex-direction:column; gap:6px; min-width:72px }
.sd-conf-score   { font-size:22px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums }
.sd-conf-max     { font-size:13px; font-weight:400; color:var(--sd-text-3); margin-left:1px }
.sd-conf--high .sd-conf-score { color: var(--sd-conf-high) }
.sd-conf--mid  .sd-conf-score { color: var(--sd-conf-mid)  }
.sd-conf--low  .sd-conf-score { color: var(--sd-conf-low)  }

.sd-pips { display:flex; gap:3px }
.sd-pip  { width:6px; height:6px; border-radius:2px; background:var(--sd-border); flex-shrink:0; transition:background var(--sd-t) }
.sd-conf--high .sd-pip--on { background: var(--sd-conf-high) }
.sd-conf--mid  .sd-pip--on { background: var(--sd-conf-mid)  }
.sd-conf--low  .sd-pip--on { background: var(--sd-conf-low)  }

/* ═══════════════════════════════════════════════════════════════
   CTA BUTTON — contraste maximum
   ═══════════════════════════════════════════════════════════════ */
.sd-cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         10px 20px;
    background:      var(--sd-accent);
    color:           var(--sd-cta-ink);
    font-family:     var(--sd-font);
    font-size:       13px;
    font-weight:     700;
    letter-spacing:  .02em;
    border-radius:   var(--sd-r-sm);
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
    position:        relative;
    overflow:        hidden;
    border:          none;
    transition:      background var(--sd-t), box-shadow var(--sd-t), transform var(--sd-t);
}
.sd-cta-btn::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,transparent 55%);
    pointer-events:none;
}
.sd-cta-btn:hover {
    background: var(--sd-accent-dk);
    box-shadow: 0 0 24px var(--sd-accent-glow), 0 4px 16px rgba(0,0,0,.5);
    transform:  translateY(-1px);
    color:      var(--sd-cta-ink);
}
.sd-cta-btn:active { transform:translateY(0); box-shadow:none }
.sd-cta-soon { font-size:12px; color:var(--sd-text-3); font-style:italic }

/* ─── CARTES MATCH ───────────────────────────────────────────── */
.sd-cards-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   16px;
}

.sd-match-card {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-lg);
    padding:       20px;
    display:       flex;
    flex-direction: column;
    gap:           14px;
    transition:    border-color var(--sd-t), box-shadow var(--sd-t);
}
.sd-match-card:hover {
    border-color: var(--sd-border);
    box-shadow:   0 4px 24px rgba(0,0,0,.35);
}

.sd-match-card__header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}
.sd-match-card__time { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums }

.sd-match-card__teams {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    text-align:     center;
}
.sd-match-card__team { font-size:16px; font-weight:700 }
.sd-match-card__vs   { font-size:11px; color:var(--sd-text-3) }
.sd-match-card__teams:hover .sd-match-card__team { color: var(--sd-accent) }

.sd-match-card__data { display:flex; flex-direction:column; gap:12px }

.sd-match-card__meta {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    padding-top:     10px;
    border-top:      1px solid var(--sd-border-sub);
}

/* ─── ÉTAT VIDE ──────────────────────────────────────────────── */
.sd-empty-state {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    padding:        80px 24px;
    color:          var(--sd-text-3);
    text-align:     center;
}
.sd-empty-state p { font-size:15px; margin-bottom:8px }

/* ─── FOOTER LÉGAL ───────────────────────────────────────────── */
.sd-legal-footer { margin-top:48px; padding-top:24px; border-top:1px solid var(--sd-border) }
.sd-legal-inner  {
    display:flex; gap:12px; align-items:flex-start;
    background:rgba(255,77,106,.06);
    border:1px solid rgba(255,77,106,.18);
    border-radius:var(--sd-r);
    padding:14px 18px;
}
.sd-legal-icon { flex-shrink:0; color:var(--sd-neg); margin-top:2px }
.sd-legal-inner p  { font-size:12px; line-height:1.75; color:var(--sd-text-2) }
.sd-legal-inner strong { color:var(--sd-text-1) }
.sd-legal-inner a  { color:var(--sd-text-1); text-decoration:underline; text-underline-offset:2px }

/* ─── PAGE STANDARD ─────────────────────────────────────────── */
.sd-page-article {
    max-width:  780px;
    margin:     0 auto;
    padding:    40px 0 60px;
}
.sd-page-header  { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--sd-border) }
.sd-page-title   { font-size:32px; font-weight:800; letter-spacing:-.04em; margin-bottom:8px }
.sd-page-meta    { font-size:12px; color:var(--sd-text-3) }

.sd-page-content { font-size:15px; line-height:1.8; color:var(--sd-text-2) }
.sd-page-content h2 { font-size:20px; font-weight:700; color:var(--sd-text-1); margin:32px 0 12px }
.sd-page-content h3 { font-size:16px; font-weight:600; color:var(--sd-text-1); margin:24px 0 8px }
.sd-page-content p  { margin-bottom:16px }
.sd-page-content ul,
.sd-page-content ol { margin:0 0 16px 20px }
.sd-page-content li { margin-bottom:6px }
.sd-page-content a  { color:var(--sd-accent); text-decoration:underline; text-underline-offset:2px }
.sd-page-content strong { color:var(--sd-text-1) }

/* ─── 404 ────────────────────────────────────────────────────── */
.sd-404-inner {
    max-width:  600px;
    margin:     0 auto;
    padding:    80px 24px 60px;
    text-align: center;
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap:        20px;
}
.sd-404-code {
    font-size:   120px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    color:       transparent;
    background:  linear-gradient(135deg, var(--sd-border) 0%, var(--sd-bg-elevated) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
}
.sd-404-title { font-size:28px; font-weight:800; letter-spacing:-.03em }
.sd-404-sub   { font-size:16px; color:var(--sd-text-2); max-width:380px }

.sd-404-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:center }

.sd-404-recent          { width:100%; margin-top:12px }
.sd-404-recent-label    { font-size:11px; font-weight:600; text-transform:uppercase;
                           letter-spacing:.07em; color:var(--sd-text-3); margin-bottom:12px }
.sd-404-recent-list     { display:flex; flex-direction:column; gap:8px }
.sd-404-match-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    background:      var(--sd-bg-surface);
    border:          1px solid var(--sd-border);
    border-radius:   var(--sd-r);
    padding:         12px 16px;
    transition:      border-color var(--sd-t);
}
.sd-404-match-row:hover { border-color: var(--sd-accent) }
.sd-404-match-teams     { font-size:14px; font-weight:600; flex:1; text-align:left }
.sd-404-match-teams span { color:var(--sd-text-3); font-weight:400; margin:0 4px }
.sd-404-match-time      { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--sd-text-2) }

/* ─── TRACK RECORD ───────────────────────────────────────────── */
.sd-tr-kpis {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
    margin-bottom:         28px;
}
.sd-tr-kpi {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-lg);
    padding:       20px;
    display:       flex;
    flex-direction: column;
    gap:           4px;
}
.sd-tr-kpi-val      { font-size:36px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums }
.sd-tr-kpi-val--good { color: var(--sd-pos-strong) }
.sd-tr-kpi-val--mid  { color: var(--sd-warn) }
.sd-tr-kpi-val--low  { color: var(--sd-neg) }
.sd-tr-kpi-lbl { font-size:13px; font-weight:600; color:var(--sd-text-1); margin-top:4px }
.sd-tr-kpi-sub { font-size:11px; color:var(--sd-text-3) }

.sd-tr-filters {
    display:     flex;
    gap:         12px;
    flex-wrap:   wrap;
    align-items: flex-end;
    margin-bottom: 20px;
    padding:     16px;
    background:  var(--sd-bg-surface);
    border:      1px solid var(--sd-border);
    border-radius: var(--sd-r);
}

/* Lignes colorées selon le résultat */
.sd-row--correct   { border-left: 3px solid var(--sd-pos-strong) }
.sd-row--incorrect { border-left: 3px solid var(--sd-neg) }

/* Badges outcome (1 Dom / N Nul / 2 Ext) */
.sd-tr-outcome-badge {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 4px;
    font-size:     11px;
    font-weight:   700;
    white-space:   nowrap;
}
.sd-tr-outcome-badge--home { background:rgba(61,158,255,.15); color:var(--sd-p-home) }
.sd-tr-outcome-badge--draw { background:rgba(155,138,255,.15); color:var(--sd-p-draw) }
.sd-tr-outcome-badge--away { background:rgba(255,112,67,.15);  color:var(--sd-p-away) }

/* Statut correct / incorrect */
.sd-tr-status {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       4px 10px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   700;
    white-space:   nowrap;
}
.sd-tr-status--ok { background:rgba(0,255,135,.1);  color:var(--sd-pos-strong) }
.sd-tr-status--ko { background:rgba(255,77,106,.1); color:var(--sd-neg) }

/* Pagination */
.sd-pagination {
    display:         flex;
    justify-content: center;
    gap:             6px;
    margin-top:      28px;
    flex-wrap:       wrap;
}
.sd-page-btn {
    display:       inline-flex;
    align-items:   center;
    padding:       7px 14px;
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-sm);
    font-size:     13px;
    font-weight:   500;
    color:         var(--sd-text-2);
    transition:    border-color var(--sd-t), color var(--sd-t);
    text-decoration: none;
}
.sd-page-btn:hover       { border-color:var(--sd-accent); color:var(--sd-text-1) }
.sd-page-btn--active     { border-color:var(--sd-accent); color:var(--sd-accent);
                            background:rgba(0,255,135,.06); font-weight:700 }

/* ─── BREADCRUMB ─────────────────────────────────────────────── */
.sd-breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sd-text-3); margin-bottom:20px; flex-wrap:wrap }
.sd-breadcrumb a { color:var(--sd-text-2); transition:color var(--sd-t) }
.sd-breadcrumb a:hover { color:var(--sd-accent) }
.sd-breadcrumb [aria-current="page"] { color:var(--sd-text-1) }

/* ═══════════════════════════════════════════════════════════════
   FRONT-PAGE — HERO
   ═══════════════════════════════════════════════════════════════ */
.sd-hero {
    display:       grid;
    grid-template-columns: 1fr 300px;
    gap:           48px;
    align-items:   center;
    padding:       64px 0 56px;
    border-bottom: 1px solid var(--sd-border);
    margin-bottom: 48px;
}

.sd-hero__content { display:flex; flex-direction:column; gap:0 }

.sd-hero__badge {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-size:      11px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--sd-accent);
    background:     rgba(0,255,135,.08);
    border:         1px solid rgba(0,255,135,.2);
    border-radius:  20px;
    padding:        4px 12px;
    width:          fit-content;
    margin-bottom:  20px;
}

.sd-hero__title {
    font-size:      46px;
    font-weight:    900;
    line-height:    1.12;
    letter-spacing: -.04em;
    margin-bottom:  16px;
}

.sd-hero__sub {
    font-size:     15px;
    line-height:   1.7;
    color:         var(--sd-text-2);
    max-width:     520px;
    margin-bottom: 32px;
}

.sd-hero__actions {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-wrap:   wrap;
}

.sd-hero__link {
    font-size:        14px;
    color:            var(--sd-text-2);
    text-decoration:  underline;
    text-underline-offset: 3px;
    transition:       color var(--sd-t);
}
.sd-hero__link:hover { color: var(--sd-text-1) }

.sd-hero__stats {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

/* ─── STAT CARDS (hero KPIs) ─────────────────────────────────── */
.sd-stat-card {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-lg);
    padding:       20px 24px;
    transition:    border-color var(--sd-t);
}
.sd-stat-card--accent {
    border-color: rgba(0,255,135,.3);
    background:   rgba(0,255,135,.04);
}

.sd-stat-val {
    display:              block;
    font-size:            38px;
    font-weight:          900;
    font-variant-numeric: tabular-nums;
    color:                var(--sd-accent);
    line-height:          1.1;
    margin-bottom:        4px;
}
.sd-stat-val small { font-size:18px; font-weight:400; color:var(--sd-text-3); margin-left:1px }

.sd-stat-lbl {
    font-size:   12px;
    font-weight: 500;
    color:       var(--sd-text-2);
}

/* ─── BUTTON sd-btn ──────────────────────────────────────────── */
.sd-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         10px 20px;
    background:      var(--sd-accent);
    color:           var(--sd-cta-ink);
    font-family:     var(--sd-font);
    font-size:       13px;
    font-weight:     700;
    letter-spacing:  .02em;
    border-radius:   var(--sd-r-sm);
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
    border:          none;
    transition:      background var(--sd-t), box-shadow var(--sd-t), transform var(--sd-t);
    position:        relative;
    overflow:        hidden;
}
.sd-btn::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,transparent 55%);
    pointer-events:none;
}
.sd-btn:hover {
    background: var(--sd-accent-dk);
    box-shadow: 0 0 24px var(--sd-accent-glow), 0 4px 16px rgba(0,0,0,.5);
    transform:  translateY(-1px);
    color:      var(--sd-cta-ink);
}
.sd-btn:active { transform:translateY(0); box-shadow:none }

.sd-btn--lg   { font-size:15px; padding:13px 28px }
.sd-btn--full { width:100%; justify-content:center }

/* ═══════════════════════════════════════════════════════════════
   FEATURED MATCH
   ═══════════════════════════════════════════════════════════════ */
.sd-featured {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-lg);
    padding:       28px;
    margin-bottom: 48px;
}

.sd-featured__label {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--sd-warn);
    margin-bottom:  20px;
}

.sd-featured__card {
    display:        flex;
    flex-direction: column;
    gap:            24px;
}
.sd-featured__card:hover .sd-featured__teams { opacity:.92 }

.sd-featured__teams {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    transition:      opacity var(--sd-t);
}

.sd-featured__team {
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         10px;
    flex:        1;
    font-size:   20px;
    font-weight: 800;
    text-align:  center;
}
.sd-featured__team--away { align-items:center }

.sd-featured__crest {
    width:         52px;
    height:        52px;
    object-fit:    contain;
    border-radius: 6px;
}

.sd-featured__center {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    flex-shrink:    0;
}

.sd-featured__time { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--sd-text-2) }
.sd-featured__vs   { font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--sd-text-3) }

.sd-featured__data {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             24px;
    padding-top:     20px;
    border-top:      1px solid var(--sd-border-sub);
}

.sd-featured__probs {
    display: flex;
    gap:     20px;
}

.sd-featured__prob-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    padding:        10px 16px;
    border-radius:  var(--sd-r);
    border:         1px solid var(--sd-border);
    background:     var(--sd-bg-elevated);
    min-width:      70px;
    transition:     border-color var(--sd-t);
}
.sd-featured__prob-item--best {
    border-color: var(--sd-accent);
    background:   rgba(0,255,135,.07);
}

.sd-featured__prob-lbl  { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--sd-text-3) }
.sd-featured__prob-val  { font-size:20px; font-weight:900; font-variant-numeric:tabular-nums }
.sd-featured__prob-odds { font-size:12px; font-weight:500; color:var(--sd-text-2); font-variant-numeric:tabular-nums }
.sd-featured__prob-item--best .sd-featured__prob-val  { color:var(--sd-accent) }
.sd-featured__prob-item--best .sd-featured__prob-odds { color:var(--sd-accent); opacity:.75 }

.sd-featured__right {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            8px;
}

.sd-featured__cta {
    padding-top:  20px;
    border-top:   1px solid var(--sd-border-sub);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION BLOCK (analyses du jour)
   ═══════════════════════════════════════════════════════════════ */
.sd-section-block { margin-bottom: 48px }

.sd-section-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
}

.sd-section-title2 {
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-size:      20px;
    font-weight:    700;
    letter-spacing: -.3px;
}

.sd-section-link {
    font-size:   13px;
    font-weight: 500;
    color:       var(--sd-text-2);
    transition:  color var(--sd-t);
}
.sd-section-link:hover { color:var(--sd-accent) }

/* ─── MATCH CARD additions (crests + team-row layout) ────────── */
.sd-match-card__team-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    width:       100%;
    justify-content: flex-start;
}
.sd-match-card__team-row--away { justify-content:flex-end }

.sd-card-crest {
    width:         22px;
    height:        22px;
    object-fit:    contain;
    flex-shrink:   0;
    border-radius: 3px;
}

.sd-match-card__probs { display:flex; flex-direction:column; gap:6px }

.sd-match-card__footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding-top:     10px;
    border-top:      1px solid var(--sd-border-sub);
}

.sd-card-cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         9px 0;
    background:      var(--sd-bg-elevated);
    border:          1px solid var(--sd-border);
    border-radius:   var(--sd-r-sm);
    font-size:       12px;
    font-weight:     600;
    color:           var(--sd-text-2);
    text-align:      center;
    transition:      border-color var(--sd-t), color var(--sd-t), background var(--sd-t);
}
.sd-card-cta:hover {
    border-color: var(--sd-accent);
    color:        var(--sd-accent);
    background:   rgba(0,255,135,.06);
}

/* ═══════════════════════════════════════════════════════════════
   HOW IT WORKS (numbered steps)
   ═══════════════════════════════════════════════════════════════ */
.sd-how {
    padding:       56px 0 32px;
    border-top:    1px solid var(--sd-border);
    margin-bottom: 48px;
}

.sd-how__title {
    font-size:      24px;
    font-weight:    800;
    letter-spacing: -.03em;
    margin-bottom:  32px;
    text-align:     center;
}

.sd-how__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
}

.sd-how__card {
    background:    var(--sd-bg-surface);
    border:        1px solid var(--sd-border);
    border-radius: var(--sd-r-lg);
    padding:       24px 20px;
    display:       flex;
    flex-direction: column;
    gap:           10px;
    transition:    border-color var(--sd-t);
}
.sd-how__card:hover { border-color: var(--sd-border) }

.sd-how__num {
    font-size:   28px;
    font-weight: 900;
    color:       var(--sd-border);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sd-how__card-title { font-size:14px; font-weight:700 }
.sd-how__card-text  { font-size:13px; color:var(--sd-text-2); line-height:1.65 }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .sd-landing-hero { grid-template-columns:1fr; gap:32px; padding:40px 0 32px }
    .sd-landing-kpis { flex-direction:row }
    .sd-kpi          { flex:1 }
    .sd-how-grid     { grid-template-columns:1fr 1fr }
    .sd-how__grid    { grid-template-columns:1fr 1fr }
    .sd-th--comp, .sd-td--comp { display:none }
    .sd-tr-kpis      { grid-template-columns:1fr 1fr }
    .sd-hero         { grid-template-columns:1fr; gap:32px; padding:40px 0 32px }
    .sd-hero__stats  { flex-direction:row; gap:12px }
    .sd-stat-card    { flex:1 }
}

@media (max-width: 820px) {
    .sd-dashboard          { padding:16px 12px 56px }
    .sd-dash-header        { flex-direction:column; align-items:flex-start }
    .sd-landing-title      { font-size:28px }
    .sd-hero__title        { font-size:30px }
    .sd-how-grid           { grid-template-columns:1fr }
    .sd-how__grid          { grid-template-columns:1fr }
    .sd-th--odds,  .sd-td--odds,
    .sd-th--probs, .sd-td--probs { display:none }
    .sd-featured__probs    { gap:10px }
    .sd-featured__prob-item { min-width:58px; padding:8px 10px }
    .sd-featured__prob-val  { font-size:16px }
}

@media (max-width: 640px) {
    .sd-hero__title         { font-size:26px }
    .sd-hero__stats         { flex-direction:column }
    .sd-featured            { padding:18px }
    .sd-featured__teams     { flex-direction:column; gap:12px }
    .sd-featured__center    { flex-direction:row; gap:10px }
    .sd-featured__team      { flex-direction:row; font-size:16px }
    .sd-featured__data      { flex-direction:column }
    .sd-featured__right     { align-items:flex-start }
    .sd-featured__probs     { flex-wrap:wrap }
}

@media (max-width: 520px) {
    .sd-th--value, .sd-td--value { display:none }
    .sd-cta-btn   { padding:8px 13px; font-size:12px }
    .sd-btn--lg   { font-size:13px; padding:11px 18px }
    .sd-time      { font-size:15px }
    .sd-landing-kpis  { flex-direction:column }
    .sd-tr-kpis       { grid-template-columns:1fr }
    .sd-tr-filters    { flex-direction:column }
    .sd-404-code      { font-size:80px }
    .sd-page-title    { font-size:24px }
    /* Sur mobile, forcer la vue cartes et masquer le toggle tableau */
    #sd-view-table { display:none !important }
    #sd-view-cards { display:block !important }
    .sd-view-btn[data-view="table"] { display:none }
}