/* ============================================================
   KromBall — Maquette Match (iPad horizontal 1180×820)
   Inspirée du mockup design.png, règles métier du cahier 8 mai
   ============================================================ */

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

:root {
    /* === DARK (par défaut) === */
    --bg-0:        #0c1424;
    --bg-1:        #11192d;
    --bg-2:        #182137;
    --bg-3:        #202c47;

    --border:      #263352;
    --border-soft: rgba(255,255,255,0.06);

    --text:        #e9edf6;
    --text-dim:    #8e9cba;
    --text-mute:   #5a6986;

    --green:       #2fd47a;
    --green-d:     #1ea65d;
    --orange:      #f0a52a;
    --orange-d:    #c8830f;
    --red:         #f25445;
    --red-d:       #c43528;
    --neutral:     #6b7794;

    --accent:      #6aa6ff;
    --accent-d:    #4080e0;
    --violet:      #8b6bf2;
    --violet-d:    #6c4dd6;

    /* Surfaces dynamiques (highlights subtils) */
    --surf-1:      rgba(255,255,255,0.02);
    --surf-2:      rgba(255,255,255,0.04);
    --surf-3:      rgba(255,255,255,0.06);
    --surf-strong: rgba(255,255,255,0.10);
    --surf-shadow: rgba(0,0,0,0.30);
    --hover-tint:  rgba(255,255,255,0.015);

    /* Couleurs des tints faibles (pour le bg de pills/badges) */
    --tint-green-bg:   rgba(47, 212, 122, 0.15);
    --tint-orange-bg:  rgba(240, 165, 42, 0.15);
    --tint-red-bg:     rgba(242, 84, 69, 0.15);
    --tint-violet-bg:  rgba(139, 107, 242, 0.15);
    --tint-accent-bg:  rgba(106, 166, 255, 0.12);
    --tint-stripe-bg:  rgba(99, 91, 255, 0.10);

    /* Axes des charts SVG */
    --ch-axis-text:    rgba(255, 255, 255, 0.45);
    --ch-axis-line:    rgba(255, 255, 255, 0.06);
    --ch-axis-strong:  rgba(255, 255, 255, 0.7);
    --ch-mt-line:      rgba(255, 255, 255, 0.30);
    --ch-mt-bg:        rgba(15, 25, 45, 0.95);
    --ch-mt-border:    rgba(255, 255, 255, 0.22);
    --ch-mt-text:      rgba(255, 255, 255, 0.90);
    --ch-court-filter: none;
    --ch-court-line:   rgba(255, 255, 255, 0.62);
}

/* === LIGHT === */
[data-theme="light"] {
    --bg-0:        #eef2f8;
    --bg-1:        #ffffff;
    --bg-2:        #ffffff;
    --bg-3:        #f1f4fa;

    --border:      #d8dee9;
    --border-soft: rgba(15, 25, 50, 0.10);

    --text:        #1a2238;
    --text-dim:    #4a5878;
    --text-mute:   #8090ae;

    --green:       #16a34a;
    --green-d:     #15803d;
    --orange:      #d97706;
    --orange-d:    #b45309;
    --red:         #dc2626;
    --red-d:       #b91c1c;
    --neutral:     #94a3b8;

    --accent:      #2563eb;
    --accent-d:    #1d4ed8;
    --violet:      #7c3aed;
    --violet-d:    #6d28d9;

    --surf-1:      rgba(15, 25, 50, 0.025);
    --surf-2:      rgba(15, 25, 50, 0.04);
    --surf-3:      rgba(15, 25, 50, 0.06);
    --surf-strong: rgba(15, 25, 50, 0.10);
    --surf-shadow: rgba(15, 25, 50, 0.10);
    --hover-tint:  rgba(15, 25, 50, 0.025);

    --tint-green-bg:   rgba(22, 163, 74, 0.10);
    --tint-orange-bg:  rgba(217, 119, 6, 0.10);
    --tint-red-bg:     rgba(220, 38, 38, 0.10);
    --tint-violet-bg:  rgba(124, 58, 237, 0.10);
    --tint-accent-bg:  rgba(37, 99, 235, 0.10);
    --tint-stripe-bg:  rgba(99, 91, 255, 0.08);

    /* Axes des charts en mode clair */
    --ch-axis-text:    rgba(15, 25, 50, 0.55);
    --ch-axis-line:    rgba(15, 25, 50, 0.12);
    --ch-axis-strong:  rgba(15, 25, 50, 0.75);
    --ch-mt-line:      rgba(15, 25, 50, 0.40);
    --ch-mt-bg:        rgba(255, 255, 255, 0.96);
    --ch-mt-border:    rgba(15, 25, 50, 0.30);
    --ch-mt-text:      rgba(15, 25, 50, 0.90);
    --ch-court-filter: none;
    --ch-court-line:   rgba(15, 25, 50, 0.55);
}

/* === Classes des éléments SVG des charts (axes, mi-temps, lanes) === */
.ch-axis-text   { fill: var(--ch-axis-text); }
.ch-axis-line   { stroke: var(--ch-axis-line); }
.ch-axis-strong { fill: var(--ch-axis-strong); }
.ch-mt-line     { stroke: var(--ch-mt-line); }
.ch-mt-rect     { fill: var(--ch-mt-bg); stroke: var(--ch-mt-border); }
.ch-mt-text     { fill: var(--ch-mt-text); }
.ch-lane-label  { fill: var(--ch-axis-strong); }
.ch-lane-line   { stroke: var(--ch-axis-line); }
.ch-donut-track { stroke: var(--ch-axis-line); }

/* Terrain handball — paths SVG inlinés, stylés via variable thématique */
.court-diagram .ct-line {
    fill: var(--ch-court-line);
    transition: fill 0.3s;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 10%, rgba(106, 166, 255, 0.07) 0%, transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(139, 107, 242, 0.06) 0%, transparent 45%),
        linear-gradient(180deg, var(--bg-0) 0%, #08111f 100%);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
    transition: background 0.3s, color 0.3s;
}
[data-theme="light"] html, [data-theme="light"] body {
    background:
        radial-gradient(circle at 20% 10%, rgba(37, 99, 235, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(124, 58, 237, 0.04) 0%, transparent 45%),
        linear-gradient(180deg, #eef2f8 0%, #e6ecf4 100%);
}

/* ============================================================
   BOUTON TOGGLE THÈME (jour / nuit)
   ============================================================ */
.theme-toggle {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.08s;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--bg-3);
    color: var(--text);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg {
    width: 18px; height: 18px;
    position: absolute;
    transition: opacity 0.25s, transform 0.3s;
}
.theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-30deg) scale(0.7); }
[data-theme="light"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(30deg) scale(0.7); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="light"] .theme-toggle {
    background: linear-gradient(180deg, #fff7d6, #ffe98f);
    border-color: #f0c878;
    color: #8a6510;
}
[data-theme="light"] .theme-toggle:hover { background: #ffe98f; color: #5a4408; }
.theme-toggle-label {
    position: absolute;
    bottom: -22px; left: 50%; transform: translateX(-50%);
    font-size: 9px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.theme-toggle:hover .theme-toggle-label { opacity: 1; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
em { font-style: normal; }

/* ============================================================
   GRID GLOBAL (sidebar | main | right panel)
   ============================================================ */
.app {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 96px 1fr 340px;
    gap: 0;
}
/* Pages sans panneau droit : main prend toute la largeur restante */
.app:not(:has(.right-panel)) {
    grid-template-columns: 96px 1fr;
}

/* ============================================================
   SIDEBAR GAUCHE
   ============================================================ */
.sidebar {
    background: rgba(12, 20, 36, 0.6);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 18px 8px 16px;
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 4px 20px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 16px;
}
.brand-mark {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6aa6ff 0%, #8b6bf2 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(106, 166, 255, 0.35);
}
.brand-k {
    font-weight: 900; font-size: 22px; color: white;
    letter-spacing: -1px;
}
.brand-name { text-align: center; line-height: 1.05; }
.brand-line1 { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--text); }
.brand-line2 { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--text-dim); }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    border-radius: 10px;
    color: var(--text-dim);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}
.nav-item:hover { background: rgba(255,255,255,0.03); color: var(--text); }
.nav-item.active {
    background: linear-gradient(135deg, rgba(106,166,255,0.18) 0%, rgba(139,107,242,0.12) 100%);
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(106,166,255,0.25);
}
.nav-icon { width: 20px; height: 20px; }
.nav-item span { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; }

.sidebar-foot { padding-top: 12px; border-top: 1px solid var(--border-soft); }
.user-pill {
    display: flex; align-items: center; gap: 8px;
    padding: 8px;
    background: var(--bg-2);
    border-radius: 10px;
}
.user-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2fd47a 0%, #1ea65d 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: white;
    flex-shrink: 0;
}
.user-info { line-height: 1.1; min-width: 0; }
.user-name { font-size: 11px; font-weight: 600; }
.user-role { font-size: 9px; color: var(--text-dim); }

/* ============================================================
   MAIN — TOPBAR + TABLE + FOOTER
   ============================================================ */
.main {
    display: grid;
    grid-template-rows: auto auto 1fr 64px;
    overflow: hidden;
    padding: 0 14px;
    min-height: 0;
}
/* Quand le mode grille est actif, le board grille prend la rangée 1fr.
   Les deux boards partagent la même rangée (un seul est visible à la fois). */
.players-board[data-mode],
.players-grid-board[data-mode] {
    grid-row: 3;
    grid-column: 1;
    min-height: 0;
}
/* L'attribut HTML `hidden` doit l'emporter sur `display: flex` */
.players-board[hidden],
.players-grid-board[hidden] {
    display: none !important;
}

/* TOPBAR — 3 colonnes (chrono | centre | actions) ============ */
.topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 26px;
    padding: 16px 10px 18px;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
}

/* === Carte chrono (gauche) === */
.chrono-card-top {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 240px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}
.chrono-card-title {
    font-size: 10px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.8px;
}
.chrono-card-body {
    display: flex;
    align-items: center;
    gap: 16px;
}
.chrono-big-btn {
    width: 60px; height: 60px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(47,212,122,0.20) 0%, rgba(47,212,122,0.06) 100%);
    border: 1px solid rgba(47, 212, 122, 0.5);
    color: var(--green);
    font-size: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(47, 212, 122, 0.25), inset 0 0 0 1px rgba(255,255,255,0.04);
    transition: transform 0.08s, filter 0.15s, background 0.15s;
    flex-shrink: 0;
}
.chrono-big-btn:hover { filter: brightness(1.1); }
.chrono-big-btn:active {
    transform: scale(0.94);
    background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%);
    color: white;
}
.chrono-big-btn.paused {
    background: linear-gradient(180deg, rgba(240,165,42,0.20) 0%, rgba(240,165,42,0.06) 100%);
    border-color: rgba(240, 165, 42, 0.5);
    color: var(--orange);
    box-shadow: 0 6px 18px rgba(240, 165, 42, 0.25);
}
.chrono-card-info { line-height: 1.1; min-width: 0; }
.chrono-time-big {
    font-size: 30px; font-weight: 900;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}
.chrono-card-info .chrono-time-big { transition: color 0.2s; }
.chrono-period-label {
    font-size: 11px; font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 4px;
}

/* === Centre (catégorie + scoreboard empilés) === */
.topbar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.match-category {
    font-size: 12px; font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 2.4px; text-transform: uppercase;
}

.scoreboard {
    display: flex;
    align-items: center;
    gap: 28px;
}
.score-sep {
    font-size: 36px; font-weight: 600;
    color: var(--text-mute);
}

/* === Actions à droite === */
.topbar-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.team-card {
    display: flex; align-items: center; gap: 14px;
    min-width: 0;
}
.team-card.away { flex-direction: row-reverse; }
.team-badge {
    width: 58px; height: 58px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    overflow: hidden;
    background: var(--bg-3);
    position: relative;
}
.team-badge img {
    width: 100%; height: 100%;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px;
}
/* Fallback couleurs si pas d'image */
.team-badge.no-photo.home-badge { background: linear-gradient(135deg, #f6c651 0%, #b88528 100%); color: #2c1d05; }
.team-badge.no-photo.away-badge { background: linear-gradient(135deg, #f25445 0%, #8a1f15 100%); }
.team-name {
    font-size: 14px; font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 170px;
}
.score-block { display: flex; align-items: center; gap: 8px; }
.score {
    font-size: 48px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 10px;
    transition: background 0.15s, color 0.2s, text-shadow 0.2s;
    min-width: 60px;
    text-align: center;
}
.score:hover { background: var(--bg-3); }
.score.winning {
    color: var(--green);
    text-shadow: 0 0 22px rgba(47, 212, 122, 0.55);
}

.topbar-actions { display: flex; align-items: center; gap: 12px; justify-self: end; }
.level-badge {
    padding: 7px 14px;
    background: rgba(106, 166, 255, 0.12);
    border: 1px solid rgba(106, 166, 255, 0.3);
    border-radius: 8px;
    font-size: 11px; font-weight: 700;
    color: #92bdff;
    text-transform: uppercase; letter-spacing: 1.2px;
}
.end-match-btn {
    height: 40px;
    padding: 0 18px;
    background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
    border: 1px solid var(--red-d);
    border-radius: 9px;
    color: white;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 14px rgba(242, 84, 69, 0.4);
    transition: transform 0.08s, filter 0.15s;
}
.end-match-btn svg { width: 14px; height: 14px; }
.end-match-btn:active { transform: scale(0.97); filter: brightness(1.1); }

/* TABLE JOUEURS ============================================== */
.players-board {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 6px 0 4px;
    min-height: 0;
}

.players-header,
.player-row {
    display: grid;
    /* PHASE 6.15.N2 — 9 colonnes EXPLICITES :
       TB | Num | Nom | Pos | Sanct | Timeline | % | Tend | Actions
       Sanct est désormais sa propre colonne (avant elle se mélangeait avec Timeline). */
    grid-template-columns: 76px 28px minmax(130px, 200px) 52px 52px minmax(150px, 230px) 56px 36px minmax(240px, 1fr);
    gap: 8px;
    align-items: center;
    padding: 0 10px;
}

/* Placement EXPLICITE des 9 cellules. */
.players-header > .col-tb,        .player-row > :nth-child(1) { grid-column: 1; }
.players-header > .col-num,       .player-row > :nth-child(2) { grid-column: 2; }
.players-header > .col-name,      .player-row > :nth-child(3) { grid-column: 3; }
.players-header > .col-pos,       .player-row > :nth-child(4) { grid-column: 4; }
.players-header > .col-sanct,     .player-row > :nth-child(5) { grid-column: 5; }
.players-header > .col-timeline,  .player-row > :nth-child(6) { grid-column: 6; }
.players-header > .col-pct,       .player-row > :nth-child(7) { grid-column: 7; }
.players-header > .col-trend,     .player-row > :nth-child(8) { grid-column: 8; }
.players-header > .col-actions4,  .player-row > :nth-child(9) { grid-column: 9; }

/* Laptops 13–14" (≤ 1440px) : on compresse légèrement */
@media (max-width: 1440px) {
    .players-header,
    .player-row {
        grid-template-columns: 70px 26px minmax(116px, 180px) 48px 48px minmax(132px, 200px) 52px 32px minmax(220px, 1fr);
        gap: 6px;
        padding: 0 8px;
    }
}

/* Petits laptops (≤ 1280px) : tout est plus serré, timeline gardée */
@media (max-width: 1280px) {
    .players-header,
    .player-row {
        grid-template-columns: 64px 24px minmax(106px, 160px) 44px 44px minmax(120px, 180px) 48px 28px minmax(200px, 1fr);
        gap: 5px;
        column-gap: 5px;
    }
}

/* Très petits écrans (≤ 1100px) : on cache la tendance, timeline reste */
@media (max-width: 1100px) {
    .players-header,
    .player-row {
        grid-template-columns: 60px 22px minmax(96px, 150px) 40px 40px minmax(100px, 160px) 46px 0 minmax(180px, 1fr);
    }
    .col-trend,
    .cell-trend { display: none; }
}

.players-header {
    padding: 0 16px 10px;
    font-size: 10px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.9px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 6px;
}
.players-header .col-actions  { text-align: center; }
.players-header .col-timeline { text-align: center; }
.players-header .col-pct      { text-align: right; }
.players-header .col-trend    { text-align: center; }
.players-header .col-toggle   { text-align: center; }

.players-list {
    display: flex; flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding: 2px 0;
}

/* Une ligne joueur */
.player-row {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    min-height: 58px;
    padding: 6px 10px;
    transition: background 0.18s, border-color 0.18s, opacity 0.18s, transform 0.18s;
    /* La liste joueurs est un flex column → empêche les rangées de rétrécir
       pour conserver leur grille internes (notamment en mobile 2-rangées). */
    flex-shrink: 0;
}
.player-row:hover {
    border-color: rgba(106, 166, 255, 0.25);
}
.player-row.selected {
    border-color: rgba(106, 166, 255, 0.7);
    background: linear-gradient(180deg, rgba(106,166,255,0.18) 0%, rgba(106,166,255,0.05) 100%);
    box-shadow: 0 0 0 1px rgba(106,166,255,0.5), 0 0 18px rgba(106,166,255,0.18);
    position: relative;
}
.player-row.selected::before {
    content: '';
    position: absolute;
    left: -1px; top: -1px; bottom: -1px;
    width: 4px;
    background: var(--accent);
    border-radius: 4px 0 0 4px;
}

/* === Mode CLAIR : surlignage joueur sélectionné beaucoup plus marqué === */
[data-theme="light"] .player-row.selected {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0.06) 100%) !important;
    border-color: var(--accent) !important;
    box-shadow:
        0 0 0 2px rgba(37, 99, 235, 0.55),
        0 6px 20px rgba(37, 99, 235, 0.25),
        inset 0 0 0 1px rgba(37, 99, 235, 0.15);
}
[data-theme="light"] .player-row.selected::before {
    width: 5px;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
    left: -2px;
}
[data-theme="light"] .player-row.selected .name-last {
    color: var(--accent-d);
    font-weight: 800;
}
[data-theme="light"] .player-row.selected .cell-num {
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4), inset 0 0 0 2px rgba(255,255,255,0.4);
}
.cell-name {
    cursor: pointer;
}
.player-row.bench {
    opacity: 0.5;
    background: rgba(20, 28, 46, 0.5);
}
.player-row.alert-red {
    border-color: rgba(242, 84, 69, 0.5);
    box-shadow: 0 0 0 1px rgba(242, 84, 69, 0.5), 0 0 14px rgba(242, 84, 69, 0.18);
    animation: pulseRed 1.4s ease-in-out infinite;
}
@keyframes pulseRed {
    0%, 100% { box-shadow: 0 0 0 1px rgba(242,84,69,0.4), 0 0 12px rgba(242,84,69,0.15); }
    50%      { box-shadow: 0 0 0 2px rgba(242,84,69,0.9), 0 0 22px rgba(242,84,69,0.45); }
}

/* Cellule numéro joueur (pastille violette) */
.cell-num {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px;
    color: white;
    box-shadow: 0 2px 8px rgba(108, 77, 214, 0.4), inset 0 0 0 1.5px rgba(255,255,255,0.15);
    flex-shrink: 0;
}

/* Cellule nom + avatar */
.cell-name {
    display: flex; align-items: center; gap: 10px;
    overflow: hidden;
}
.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: white;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
    overflow: hidden;
    background: var(--bg-3);
    position: relative;
}
.avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.name-block { line-height: 1.1; min-width: 0; }
.name-last { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.3px; }
.name-first { font-size: 10px; color: var(--text-dim); }

/* Cellule poste */
.cell-pos {
    font-size: 10px; font-weight: 700;
    color: var(--text-dim);
    text-align: center;
    padding: 4px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    width: fit-content;
    justify-self: start;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Cellule boutons +/− */
.cell-actions {
    display: flex; gap: 6px; justify-content: center;
}
.act-btn {
    width: 64px; height: 36px;
    border-radius: 8px;
    font-size: 17px; font-weight: 800;
    color: white;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.08s, filter 0.15s, box-shadow 0.15s;
    border: 1px solid transparent;
}
.act-btn.plus  {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%);
    border-color: var(--green-d);
    box-shadow: 0 2px 8px rgba(47, 212, 122, 0.3);
}
.act-btn.minus {
    background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
    border-color: var(--red-d);
    box-shadow: 0 2px 8px rgba(242, 84, 69, 0.3);
}
.act-btn:active { transform: scale(0.92); filter: brightness(1.18); }
.act-btn[disabled] { opacity: 0.22; pointer-events: none; box-shadow: none; }

/* Cellule fil chronologique — FENÊTRE GLISSANTE marquée par un fond translucide
   pour que les 8 dernières actions soient toujours visuellement délimitées,
   même quand certaines positions sont vides. */
.cell-timeline {
    display: flex; align-items: center; justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    overflow: hidden;
    background: linear-gradient(90deg,
        rgba(106, 166, 255, 0.02) 0%,
        rgba(106, 166, 255, 0.10) 40%,
        rgba(106, 166, 255, 0.16) 100%);
    border: 1px solid rgba(106, 166, 255, 0.18);
    border-radius: 24px;
    position: relative;
}
.cell-timeline::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(106, 166, 255, 0.04));
    border-radius: 24px 0 0 24px;
    pointer-events: none;
}
.timeline-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px;
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.2s;
    position: relative;
    z-index: 1;
}
.timeline-dot.plus  { background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%); }
.timeline-dot.minus { background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%); }
.timeline-dot.empty {
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.18);
    box-shadow: none;
    opacity: 0.6;
}
/* La dernière action est mise en avant pour la rendre visuellement saillante */
.timeline-dot.last {
    transform: scale(1.22);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 14px currentColor;
    z-index: 2;
}
[data-theme="light"] .cell-timeline {
    background: linear-gradient(90deg,
        rgba(37, 99, 235, 0.04) 0%,
        rgba(37, 99, 235, 0.10) 40%,
        rgba(37, 99, 235, 0.16) 100%);
    border-color: rgba(37, 99, 235, 0.25);
}
[data-theme="light"] .timeline-dot.empty {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.15);
}

/* Cellule % positives — ZONE DE VÉRITÉ : le chiffre le plus important du tableau */
.cell-pct {
    text-align: center;
    font-size: 16px; font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid transparent;
    min-width: 0;
    line-height: 1.1;
}
.cell-pct.green   {
    color: var(--green);
    background: rgba(47, 212, 122, 0.10);
    border-color: rgba(47, 212, 122, 0.30);
}
/* ORANGE = zone de vérité : à mettre TRÈS en avant */
.cell-pct.orange  {
    color: #ffb547;
    background: linear-gradient(180deg, rgba(240, 165, 42, 0.28), rgba(240, 165, 42, 0.14));
    border-color: rgba(240, 165, 42, 0.65);
    box-shadow:
        0 0 0 1px rgba(240, 165, 42, 0.35),
        0 2px 10px rgba(240, 165, 42, 0.25),
        inset 0 0 12px rgba(240, 165, 42, 0.12);
    text-shadow: 0 0 8px rgba(240, 165, 42, 0.45);
    font-weight: 900;
}
.cell-pct.red     {
    color: var(--red);
    background: rgba(242, 84, 69, 0.12);
    border-color: rgba(242, 84, 69, 0.35);
}
.cell-pct.neutral { color: var(--neutral); }

/* Light mode : versions adaptées */
[data-theme="light"] .cell-pct.green {
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.40);
}
[data-theme="light"] .cell-pct.orange {
    color: #b45309;
    background: linear-gradient(180deg, rgba(234, 88, 12, 0.18), rgba(234, 88, 12, 0.08));
    border-color: rgba(234, 88, 12, 0.55);
    box-shadow:
        0 0 0 1px rgba(234, 88, 12, 0.30),
        0 2px 10px rgba(234, 88, 12, 0.20);
    text-shadow: none;
}
[data-theme="light"] .cell-pct.red {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.40);
}

/* Cellule tendance (flèche) */
.cell-trend {
    display: flex; align-items: center; justify-content: center;
}
.trend-icon {
    width: 32px; height: 26px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    background: rgba(255,255,255,0.04);
}
.trend-icon.up    { background: rgba(47, 212, 122, 0.15); color: var(--green); }
.trend-icon.down  { background: rgba(242, 84, 69, 0.15); color: var(--red); }
.trend-icon.flat  { background: rgba(240, 165, 42, 0.12); color: var(--orange); }
.trend-icon.large { font-size: 24px; width: 56px; height: 40px; }

/* Cellule toggle terrain/banc — pastille button claire */
.cell-toggle { display: flex; align-items: center; justify-content: center; }
.toggle-pill {
    width: 88px; height: 32px;
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px;
    cursor: pointer;
    transition: transform 0.08s, filter 0.15s, background 0.18s, border-color 0.18s, color 0.18s;
    border: 1px solid transparent;
}
.toggle-pill::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.toggle-pill.on-field {
    background: linear-gradient(180deg, rgba(47,212,122,0.20) 0%, rgba(47,212,122,0.06) 100%);
    border-color: rgba(47, 212, 122, 0.45);
    color: var(--green);
}
.toggle-pill.on-bench {
    background: linear-gradient(180deg, rgba(108,121,150,0.22) 0%, rgba(108,121,150,0.06) 100%);
    border-color: rgba(108, 121, 150, 0.4);
    color: var(--text-dim);
}
.toggle-pill:active { transform: scale(0.95); filter: brightness(1.15); }

/* FOOTER ===================================================== */
.bottom-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    border-top: 1px solid var(--border-soft);
    gap: 12px;
}
.tabs-group { display: flex; gap: 6px; }
.tab-btn {
    height: 38px; padding: 0 14px;
    border-radius: 9px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    color: var(--text-dim);
    font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tab-btn svg { width: 14px; height: 14px; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
    background: linear-gradient(180deg, rgba(47, 212, 122, 0.15) 0%, rgba(47, 212, 122, 0.05) 100%);
    border-color: rgba(47, 212, 122, 0.4);
    color: var(--green);
}

.undo-btn {
    height: 40px; padding: 0 18px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(240, 165, 42, 0.20), rgba(240, 165, 42, 0.08));
    border: 1.5px solid rgba(240, 165, 42, 0.65);
    color: #ffb547;
    font-size: 13px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 2px 10px rgba(240, 165, 42, 0.25);
    transition: filter 0.15s, transform 0.08s, box-shadow 0.15s;
}
.undo-btn svg { width: 16px; height: 16px; stroke-width: 2.5; }
.undo-btn:hover { filter: brightness(1.1); box-shadow: 0 4px 14px rgba(240, 165, 42, 0.35); }
.undo-btn:active { transform: scale(0.96); }

/* ============================================================
   PANNEAU DROIT
   ============================================================ */
.right-panel {
    background: rgba(12, 20, 36, 0.5);
    border-left: 1px solid var(--border);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.panel-card {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 14px;
}

.panel-title {
    font-size: 10px; font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 1.2px;
    margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
}
.panel-title-main {
    font-size: 13px; font-weight: 800;
    color: var(--text);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

/* ============================================================
   PANNEAU SAISIE ACTION
   ============================================================ */
.saisie-card { padding: 14px; }

.selected-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: rgba(106, 166, 255, 0.08);
    border: 1px solid rgba(106, 166, 255, 0.2);
    border-radius: 10px;
    margin-bottom: 12px;
    min-height: 64px;
    transition: background 0.2s, border-color 0.2s;
}
.selected-card.empty {
    background: rgba(255,255,255,0.02);
    border-color: var(--border-soft);
    border-style: dashed;
    color: var(--text-mute);
    font-size: 12px;
    justify-content: center;
    text-align: center;
    font-style: italic;
}
.selected-label {
    font-size: 9px; font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 1px;
}
.selected-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: white;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.3);
    background: var(--bg-3);
}
.selected-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.selected-info { flex: 1; min-width: 0; line-height: 1.2; }
.selected-name {
    font-size: 14px; font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.selected-meta {
    display: flex; gap: 8px; align-items: center;
    margin-top: 4px;
}
.selected-pos {
    font-size: 9px; font-weight: 800;
    padding: 2px 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    text-transform: uppercase;
    color: var(--text-dim);
    letter-spacing: 0.6px;
}
.selected-jersey {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    color: white;
}

/* Gros boutons saisie */
.big-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.big-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 14px 8px;
    border-radius: 10px;
    color: white;
    font-weight: 700;
    transition: transform 0.08s, filter 0.15s, opacity 0.15s;
    border: 1px solid transparent;
}
.big-btn .big-sign {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
}
.big-btn .big-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.big-btn.plus {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%);
    border-color: var(--green-d);
    box-shadow: 0 4px 14px rgba(47, 212, 122, 0.3);
}
.big-btn.minus {
    background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
    border-color: var(--red-d);
    box-shadow: 0 4px 14px rgba(242, 84, 69, 0.3);
}
.big-btn:active { transform: scale(0.96); filter: brightness(1.15); }
.big-btn[disabled] { opacity: 0.3; pointer-events: none; box-shadow: none; }

/* Grille des sous-types d'action */
.sub-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.sub-action {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    color: var(--text-dim);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s;
}
.sub-action svg {
    width: 18px; height: 18px;
}
.sub-action span {
    font-size: 9px; font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.15;
}
.sub-action:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}
.sub-action:active {
    transform: scale(0.95);
    background: rgba(47, 212, 122, 0.18);
    color: var(--green);
    border-color: rgba(47, 212, 122, 0.45);
}
.sub-action[disabled] { opacity: 0.3; pointer-events: none; }
.alert-count {
    background: var(--red);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}
.alert-count[data-count="0"] {
    background: var(--bg-3);
    color: var(--text-mute);
}

/* Last action */
.last-action-body { display: flex; align-items: center; gap: 12px; }
.last-action-sign {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; color: white;
    flex-shrink: 0;
}
.last-action-sign.plus  { background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%); }
.last-action-sign.minus { background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%); }
.last-action-info { line-height: 1.2; min-width: 0; flex: 1; }
.last-action-name { font-size: 13px; font-weight: 700; color: var(--text); }
.last-action-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Team summary */
.summary-grid {
    display: flex; flex-direction: column;
    gap: 12px;
}
.summary-cell {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 10px 12px;
}
.summary-label {
    font-size: 9px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 6px;
}
.summary-value {
    display: flex; align-items: center; gap: 10px;
}
.value-num {
    font-size: 22px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.summary-value.energy {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.energy-bar {
    width: 100%; height: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    overflow: hidden;
}
.energy-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--red) 0%, var(--orange) 50%, var(--green) 100%);
    transition: width 0.3s;
}

/* Alerts */
.alerts-list {
    display: flex; flex-direction: column;
    gap: 6px;
}
.alert-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: rgba(242, 84, 69, 0.1);
    border: 1px solid rgba(242, 84, 69, 0.3);
    border-radius: 8px;
}
.alert-row .num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    color: white;
    flex-shrink: 0;
}
.alert-row .name { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; }
.alert-row .ratio { font-size: 11px; font-weight: 700; color: var(--red); }

/* Chrono card */
.chrono-card { text-align: center; }
.chrono-big {
    font-size: 36px; font-weight: 900;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    margin: 4px 0 12px;
    letter-spacing: 1px;
}
.chrono-actions {
    display: flex; gap: 8px;
    justify-content: center;
}

/* ============================================================
   OVERLAYS
   ============================================================ */
.overlay {
    position: fixed; inset: 0;
    background: rgba(5, 10, 20, 0.78);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    animation: fadeIn 0.18s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.overlay[hidden] { display: none; }

.overlay-card {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    max-width: 720px;
    width: 90%;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.overlay-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
}
.overlay-head h2 { font-size: 18px; font-weight: 700; }
.overlay-close {
    width: 32px; height: 32px;
    background: var(--bg-3); border-radius: 50%;
    font-size: 16px; color: var(--text-dim);
}
.overlay-help { color: var(--text-dim); margin-bottom: 14px; line-height: 1.5; font-size: 13px; }
.overlay-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.primary-btn, .ghost-btn {
    height: 40px; padding: 0 20px;
    border-radius: 9px;
    font-size: 13px; font-weight: 600;
}
.primary-btn { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-d) 100%); color: white; }
.primary-btn.danger { background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%); }
.ghost-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
.ghost-btn.small { height: 32px; padding: 0 12px; font-size: 11px; }

.linked-list {
    background: var(--bg-3);
    border-radius: 10px;
    padding: 12px;
    min-height: 80px;
    display: flex; flex-direction: column; gap: 6px;
}
.linked-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px;
    background: var(--bg-2);
    border-radius: 8px;
    font-size: 13px;
}
.linked-item .sign { font-weight: 800; font-size: 16px; }
.linked-item .sign.plus { color: var(--green); }
.linked-item .sign.minus { color: var(--red); }
.linked-item button { color: var(--text-mute); font-size: 18px; }
.muted { color: var(--text-mute); font-size: 12px; font-style: italic; }

.synth-headline { text-align: center; margin: 12px 0 18px; }
.synth-pct { font-size: 60px; font-weight: 900; line-height: 1; }
.synth-pct.green   { color: var(--green); }
.synth-pct.orange  { color: var(--orange); }
.synth-pct.red     { color: var(--red); }
.synth-pct.neutral { color: var(--neutral); }
.synth-pct-label { color: var(--text-dim); font-size: 11px; margin-top: 6px; text-transform: uppercase; letter-spacing: 1.5px; }
.synth-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 50vh; overflow-y: auto;
}
.synth-row {
    display: grid;
    grid-template-columns: 28px 24px 1fr 80px 60px;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-3);
    border-radius: 8px;
    font-size: 13px;
}
.synth-row .num {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    color: white;
}
.synth-row .pill {
    width: 14px; height: 14px; border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}
.synth-row .pill.green { background: var(--green); color: var(--green); }
.synth-row .pill.orange { background: var(--orange); color: var(--orange); }
.synth-row .pill.red { background: var(--red); color: var(--red); }
.synth-row .pill.neutral { background: var(--neutral); color: var(--neutral); box-shadow: none; }
.synth-row .ratio { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-dim); }
.synth-row .pct { font-variant-numeric: tabular-nums; text-align: right; color: var(--text); font-weight: 700; }

/* Toast */
.toast {
    position: fixed; bottom: 90px; left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 30, 50, 0.95);
    color: var(--text);
    padding: 12px 22px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 13px; font-weight: 500;
    z-index: 200;
    animation: toastIn 0.2s ease-out;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============================================================
   SECTIONS SWITCHABLES (bottom tabs)
   ============================================================ */
.content-section {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.content-section[hidden] { display: none; }

.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 0 6px;
    gap: 12px;
}
.section-count {
    font-size: 11px; font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 1px;
}

/* ============================================================
   VUE ÉQUIPE
   ============================================================ */
.team-view {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 4px 6px;
    min-height: 0;
}

.team-tab-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.team-tab-content > [data-tt][hidden] { display: none; }
/* Les enfants prennent toute la place dispo, sans casser leur display interne */
.team-tab-content > [data-tt] {
    flex: 1;
    min-height: 0;
}
/* Panels Postes / Secteurs / Comparatif → flex column pour le scroll */
.team-tab-content > .team-positions,
.team-tab-content > .team-zones,
.team-tab-content > .team-comparator {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.team-header { padding: 0 6px; }
.team-title {
    font-size: 22px; font-weight: 800;
    color: var(--text);
    letter-spacing: -0.2px;
}

.team-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 6px;
}
.team-tabs { display: flex; gap: 4px; }
.t-tab {
    height: 38px; padding: 0 18px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    color: var(--text-dim);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.t-tab:hover { color: var(--text); }
.t-tab.active {
    background: linear-gradient(180deg, rgba(47, 212, 122, 0.18) 0%, rgba(47, 212, 122, 0.06) 100%);
    border-color: rgba(47, 212, 122, 0.4);
    color: var(--green);
}

.team-customize {
    height: 38px; padding: 0 16px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    color: var(--text);
    font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background 0.15s, border-color 0.15s;
}
.team-customize svg { width: 14px; height: 14px; }
.team-customize:hover { background: var(--bg-3); }

/* Grille des cartes joueurs — 3 cols par défaut, 4 si grand écran */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 6px 8px;
    flex: 1;
    min-height: 0;
    align-content: start;
    align-items: start;
}
@media (min-width: 1280px) {
    .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Une carte joueur — flex column, taille déterminée par le contenu */
.player-card {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    transition: border-color 0.18s;
}
.player-card:hover { border-color: rgba(106, 166, 255, 0.3); }
.player-card.bench { opacity: 0.55; }

/* Header — n° + nom + position */
.pc-header {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.pc-num {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
    color: white;
    box-shadow: 0 2px 6px rgba(108, 77, 214, 0.35);
}
.pc-name {
    font-size: 13px; font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-pos {
    font-size: 9px; font-weight: 800;
    padding: 3px 7px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex-shrink: 0;
}

/* Body — avatar à gauche, donut à droite */
.pc-body {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 4px 0;
}

.pc-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800; color: white;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.pc-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.pc-donut-wrap {
    position: relative;
    width: 100%;
    max-width: 88px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    min-width: 0;
}
.pc-donut-wrap svg {
    width: 100%; height: 100%;
    display: block;
}
.pc-donut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    line-height: 1;
    pointer-events: none;
}
.pc-donut-pct {
    font-size: 18px; font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.pc-donut-pct.green   { color: var(--green); }
.pc-donut-pct.orange  { color: var(--orange); }
.pc-donut-pct.red     { color: var(--red); }
.pc-donut-pct.neutral { color: var(--neutral); }
.pc-donut-label {
    font-size: 8px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 3px;
}

/* Stats row : actions + tendance flèche */
.pc-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 0;
    border-top: 1px solid var(--border-soft);
    gap: 10px;
}
.pc-actions {
    line-height: 1.15;
    min-width: 0;
}
.pc-actions-num {
    font-size: 14px; font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.pc-actions-label {
    font-size: 8px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 2px;
}
.pc-trend-arrow {
    width: 32px; height: 26px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    flex-shrink: 0;
}
.pc-trend-arrow.up    { background: rgba(47, 212, 122, 0.18); color: var(--green); }
.pc-trend-arrow.down  { background: rgba(242, 84, 69, 0.18); color: var(--red); }
.pc-trend-arrow.flat  { background: rgba(240, 165, 42, 0.15); color: var(--orange); }

/* Sparkline en bas */
.pc-spark-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.pc-spark {
    position: relative;
    height: 52px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 4px 8px;
    overflow: visible;
    min-width: 0;
}
.pc-spark svg {
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
}
.pc-spark-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.pc-spark-label .dot-count {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   PANNEAU INDICATEURS ÉQUIPE
   ============================================================ */
.ind-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
}
.ind-row:last-child { border-bottom: none; padding-bottom: 0; }
.ind-row:first-of-type { padding-top: 0; }

.ind-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 6px;
}
.ind-value-row {
    display: flex; align-items: center; gap: 10px;
}
.ind-value {
    font-size: 28px; font-weight: 900;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ind-value.highlighted { color: var(--orange); }
.ind-spark {
    flex: 1;
    height: 28px;
    display: inline-flex;
    align-items: center;
}
.ind-spark svg { width: 100%; height: 100%; }
.ind-sub {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 4px;
}

.energy-badge {
    width: 36px; height: 22px;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--green);
    background: rgba(47, 212, 122, 0.15);
    border: 1px solid rgba(47, 212, 122, 0.4);
}
.energy-badge svg { width: 24px; height: 14px; }

.trend-icon.up.large    { font-size: 22px; }
.trend-icon.down.large  { font-size: 22px; }
.trend-icon.flat.large  { font-size: 22px; }

/* Répartition */
.repartition {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    align-items: center;
}
.rep-donut {
    width: 96px; height: 96px;
    position: relative;
}
.rep-donut svg { width: 100%; height: 100%; }
.rep-legend {
    display: flex; flex-direction: column; gap: 6px;
}
.rep-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600;
    color: var(--text);
}
.rep-item .dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.rep-item .dot.green  { background: var(--green); }
.rep-item .dot.red    { background: var(--red); }
.rep-item .dot.neutral { background: var(--neutral); }
.rep-item .rep-pct {
    margin-left: auto;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Focus */
.focus-list {
    display: flex; flex-direction: column;
    gap: 10px;
}
.focus-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
}
.focus-item.up   { border-color: rgba(47, 212, 122, 0.3); }
.focus-item.down { border-color: rgba(242, 84, 69, 0.3); }
.focus-item.flat { border-color: rgba(240, 165, 42, 0.3); }
.focus-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900;
    flex-shrink: 0;
}
.focus-item.up   .focus-icon { background: rgba(47, 212, 122, 0.18); color: var(--green); }
.focus-item.down .focus-icon { background: rgba(242, 84, 69, 0.18); color: var(--red); }
.focus-item.flat .focus-icon { background: rgba(240, 165, 42, 0.18); color: var(--orange); }
.focus-content { flex: 1; min-width: 0; }
.focus-title {
    font-size: 12px; font-weight: 800;
    margin-bottom: 2px;
}
.focus-item.up   .focus-title { color: var(--green); }
.focus-item.down .focus-title { color: var(--red); }
.focus-item.flat .focus-title { color: var(--orange); }
.focus-text {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* ============================================================
   PANEL ÉVÉNEMENTS
   ============================================================ */
.events-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 4px 6px;
    overflow: hidden;
    min-height: 0;
}
.events-filters {
    display: flex; gap: 6px;
    padding: 0 6px;
}
.ev-filter {
    height: 32px; padding: 0 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ev-filter:hover { color: var(--text); }
.ev-filter.active {
    background: linear-gradient(180deg, rgba(106,166,255,0.2) 0%, rgba(106,166,255,0.06) 100%);
    border-color: rgba(106, 166, 255, 0.4);
    color: #92bdff;
}
.events-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 6px 8px;
    display: flex; flex-direction: column;
    gap: 6px;
}
.event-row {
    display: grid;
    grid-template-columns: 64px 38px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.event-row.is-undone { opacity: 0.4; text-decoration: line-through; }
.event-time {
    font-size: 13px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}
.event-sign {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 16px; color: white;
}
.event-sign.plus  { background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%); }
.event-sign.minus { background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%); }
.event-sign.swap_in,
.event-sign.swap_out {
    background: var(--bg-3);
    color: var(--text-dim);
    font-size: 14px;
}
.event-player {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
.event-jersey {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    color: white;
    flex-shrink: 0;
}
.event-name {
    font-size: 13px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.event-pos {
    font-size: 9px; font-weight: 800;
    padding: 2px 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    color: var(--text-dim);
    text-transform: uppercase;
}
.event-subtype {
    font-size: 11px; font-weight: 700;
    color: var(--text-dim);
    padding: 4px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    letter-spacing: 0.3px;
}

/* ============================================================
   PANEL TABLEAU DE BORD
   ============================================================ */
.dashboard-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 6px 8px;
    overflow-y: auto;
    min-height: 0;
}
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.kpi-card {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.kpi-label {
    font-size: 9px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 1.4px;
}
.kpi-value {
    font-size: 32px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.kpi-value.green   { color: var(--green); }
.kpi-value.orange  { color: var(--orange); }
.kpi-value.red     { color: var(--red); }
.kpi-sub {
    font-size: 11px; color: var(--text-dim);
}

.rankings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ranking-card {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.ranking-title {
    font-size: 11px; font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 1.4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
}
.ranking-list {
    display: flex; flex-direction: column;
    gap: 6px;
}
.rank-row {
    display: grid;
    grid-template-columns: 18px 28px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    font-size: 13px;
}
.rank-position {
    color: var(--text-mute);
    font-weight: 800;
    font-size: 11px;
}
.rank-jersey {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: white;
}
.rank-name {
    font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.rank-value.green   { color: var(--green); }
.rank-value.orange  { color: var(--orange); }
.rank-value.red     { color: var(--red); }

/* ============================================================
   PANEL NOTES
   ============================================================ */
.notes-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 6px 8px;
    overflow: hidden;
    min-height: 0;
}
.notes-toolbar {
    display: flex; gap: 6px;
    padding: 0 0px;
}
.notes-area {
    flex: 1;
    width: 100%;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 16px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    transition: border-color 0.15s;
    min-height: 0;
}
.notes-area:focus { border-color: rgba(106, 166, 255, 0.5); }
.notes-area::placeholder { color: var(--text-mute); font-style: italic; }

/* ============================================================
   PANELS POSTES / SECTEURS / COMPARATIF
   ============================================================ */
.team-positions, .team-zones, .team-comparator {
    overflow-y: auto;
    padding: 4px 6px 8px;
}

.position-group {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.position-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
    gap: 12px;
}
.position-name {
    display: flex; align-items: center; gap: 12px;
}
.position-badge {
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    color: white;
    font-size: 13px; font-weight: 800;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.position-count {
    font-size: 12px; color: var(--text-dim);
}
.position-stats {
    display: flex; gap: 16px;
    align-items: center;
}
.position-stat-num {
    font-size: 22px; font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.position-stat-label {
    font-size: 9px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.position-players {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.position-player {
    display: grid;
    grid-template-columns: 26px 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    font-size: 12px;
}
.position-player .pp-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: white;
}
.position-player .pp-name {
    font-weight: 600;
}
.position-player .pp-pct {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.placeholder-panel {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-mute);
    text-align: center;
}
.placeholder-panel svg {
    width: 64px; height: 64px;
    opacity: 0.4;
}
.placeholder-title {
    font-size: 18px; font-weight: 700; color: var(--text-dim);
}
.placeholder-text {
    font-size: 13px;
    max-width: 420px;
    line-height: 1.5;
}

/* ============================================================
   COMPARATEUR
   ============================================================ */
.comparator-pickers {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.comparator-pickers select {
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    color: var(--text);
    font-size: 13px; font-weight: 600;
    appearance: none;
    cursor: pointer;
}
.comparator-vs {
    text-align: center;
    font-size: 14px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
}
.comparator-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ============================================================
   SETTINGS (modals)
   ============================================================ */
.settings-list {
    display: flex; flex-direction: column;
    gap: 8px;
}
.setting-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-3);
    border-radius: 9px;
    cursor: pointer;
}
.setting-row > span:first-child {
    font-size: 13px; font-weight: 600; color: var(--text);
}
.setting-row select {
    padding: 6px 10px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
}
.setting-row input[type="checkbox"] {
    appearance: none;
    width: 38px; height: 22px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
}
.setting-row input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--text-mute);
    transition: left 0.18s, background 0.18s;
}
.setting-row input[type="checkbox"]:checked {
    background: rgba(47, 212, 122, 0.2);
    border-color: rgba(47, 212, 122, 0.4);
}
.setting-row input[type="checkbox"]:checked::after {
    left: 18px;
    background: var(--green);
}

/* ============================================================
   VUE STATISTIQUES
   ============================================================ */
.stats-view {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 4px 6px;
    min-height: 0;
}
.stats-toolbar {
    padding: 0 6px;
}
.stats-tab-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.stats-tab-content > [data-tt][hidden] { display: none; }
.stats-tab-content > [data-tt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 4px 6px 8px;
}
.stats-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Top KPIs row (6 boîtes pour la summary) */
.kpi-stats-row {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.7fr 1fr 0.7fr 0.7fr;
    gap: 10px;
}
.kpi-stat {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.kpi-stat-label {
    font-size: 9px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.kpi-stat-body {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.kpi-stat-side {
    line-height: 1.1;
    min-width: 0;
}
.kpi-stat-side.home { text-align: left; }
.kpi-stat-side.away { text-align: right; }
.kpi-stat-num {
    font-size: 24px; font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.kpi-stat-num.green { color: var(--green); }
.kpi-stat-num.red   { color: var(--red); }
.kpi-stat-sub {
    font-size: 10px; font-weight: 600;
    margin-top: 3px;
}
.kpi-stat-sub.green { color: var(--green); }
.kpi-stat-sub.red   { color: var(--red); }
.kpi-stat-sub.muted { color: var(--text-dim); }
.kpi-stat-mini-donut {
    width: 38px; height: 38px;
    flex-shrink: 0;
}
.kpi-stat-mini-donut svg { width: 100%; height: 100%; }

/* Charts row : line chart + court diagram */
.stats-charts-row {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 12px;
}
.chart-panel, .court-panel,
.timeline-panel, .key-players-panel {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 16px;
    min-height: 0;
    flex-shrink: 0;
    overflow: hidden;
}
.chart-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; gap: 10px;
}
.chart-head .panel-title { margin-bottom: 0; }
.chart-legend {
    display: flex; gap: 12px;
    font-size: 11px; font-weight: 600;
}
.leg-item { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
.leg-dot { width: 8px; height: 8px; border-radius: 50%; }
.leg-item.green .leg-dot { background: var(--green); }
.leg-item.red   .leg-dot { background: var(--red); }
.leg-item.green { color: var(--green); }
.leg-item.red   { color: var(--red); }

.line-chart {
    width: 100%;
    height: 220px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 6px;
}
.line-chart svg {
    width: 100%; height: 100%;
    display: block;
    overflow: hidden;
}

/* Court diagram */
.court-diagram {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.court-diagram svg { width: 100%; height: 100%; display: block; }

.court-legend {
    display: flex; justify-content: space-around;
    margin-top: 8px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.leg-team.green { color: var(--green); }
.leg-team.red   { color: var(--red); }

/* Bottom row : timeline + key players */
.stats-bottom-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
}
.match-timeline {
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 6px;
}
.match-timeline svg {
    width: 100%; height: 220px;
    display: block;
    overflow: hidden;
}

/* Key players */
.key-players {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}
.key-player {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.kp-label {
    font-size: 9px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-align: center;
}
.kp-body {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 10px;
    align-items: center;
}
.kp-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: white;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1);
}
.kp-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.kp-info { line-height: 1.15; min-width: 0; }
.kp-name {
    font-size: 14px; font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.kp-pos {
    font-size: 10px; font-weight: 700;
    color: var(--text-dim);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.kp-value {
    font-size: 22px; font-weight: 900;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}
.kp-sub {
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.3;
}
.kp-spark {
    height: 30px;
    background: rgba(47, 212, 122, 0.05);
    border-radius: 6px;
    padding: 2px;
}
.kp-spark svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   PANEL DROIT — INDICATEURS CLÉS (avec barres comparaison)
   ============================================================ */
.key-indicators {
    display: flex; flex-direction: column;
    gap: 14px;
}
.ki-row {
    display: flex; flex-direction: column;
    gap: 6px;
}
.ki-head {
    display: grid;
    grid-template-columns: 28px auto 1fr auto;
    gap: 10px;
    align-items: center;
}
.ki-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-dim);
}
.ki-icon svg { width: 18px; height: 18px; }
.ki-home {
    font-size: 16px; font-weight: 900;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 36px;
}
.ki-label {
    font-size: 10px; font-weight: 700;
    color: var(--text);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ki-away {
    font-size: 16px; font-weight: 900;
    color: var(--red);
    font-variant-numeric: tabular-nums;
    text-align: left;
    min-width: 36px;
}
.ki-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    height: 6px;
    margin: 0 38px;
}
.ki-bar {
    height: 100%;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    position: relative;
}
.ki-bar-fill {
    position: absolute; top: 0; height: 100%;
    transition: width 0.3s;
}
.ki-bar.home {
    /* Bar gauche : remplissage de droite à gauche */
    direction: rtl;
}
.ki-bar.home .ki-bar-fill {
    right: 0;
    background: linear-gradient(90deg, var(--green-d), var(--green));
}
.ki-bar.away .ki-bar-fill {
    left: 0;
    background: linear-gradient(90deg, var(--red), var(--red-d));
}
.ki-sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 9px;
    margin: 0 38px;
    color: var(--text-mute);
}
.ki-sub .l { text-align: right; color: rgba(47,212,122,0.7); font-weight: 700; }
.ki-sub .r { text-align: left;  color: rgba(242,84,69,0.7); font-weight: 700; }

/* Joueurs (vue stats) */
.players-stats-list {
    display: flex; flex-direction: column;
    gap: 6px;
}
.players-stats-row {
    display: grid;
    grid-template-columns: 32px 1fr 56px 80px 60px 80px;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 13px;
}
.psr-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: white;
}
.psr-name { font-weight: 700; }
.psr-pos {
    font-size: 9px; font-weight: 800;
    padding: 3px 7px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    color: var(--text-dim);
    text-transform: uppercase;
    text-align: center;
    width: fit-content;
    justify-self: center;
}
.psr-actions {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text-dim);
}
.psr-pct {
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.psr-pct.green   { color: var(--green); }
.psr-pct.orange  { color: var(--orange); }
.psr-pct.red     { color: var(--red); }
.psr-pct.neutral { color: var(--neutral); }
.psr-bar {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.psr-bar-fill {
    height: 100%;
    transition: width 0.3s;
}
.psr-bar-fill.green { background: linear-gradient(90deg, var(--green-d), var(--green)); }
.psr-bar-fill.orange { background: linear-gradient(90deg, var(--orange-d), var(--orange)); }
.psr-bar-fill.red    { background: linear-gradient(90deg, var(--red-d), var(--red)); }
.psr-bar-fill.neutral { background: var(--neutral); }

/* ============================================================
   VUE RAPPORT
   ============================================================ */
.rapport-view {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 4px 6px;
    min-height: 0;
}
.rapport-tab-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.rapport-tab-content > [data-tt][hidden] { display: none; }
.rapport-tab-content > [data-tt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 4px 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Hero résultat */
.result-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding: 22px 26px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(47,212,122,0.18) 0%, rgba(47,212,122,0.04) 100%);
    border: 1px solid rgba(47, 212, 122, 0.4);
    align-items: center;
    box-shadow: 0 6px 24px rgba(47, 212, 122, 0.15);
}
.result-hero.defeat {
    background: linear-gradient(135deg, rgba(242,84,69,0.18) 0%, rgba(242,84,69,0.04) 100%);
    border-color: rgba(242, 84, 69, 0.4);
    box-shadow: 0 6px 24px rgba(242, 84, 69, 0.15);
}
.result-hero.draw {
    background: linear-gradient(135deg, rgba(240,165,42,0.18) 0%, rgba(240,165,42,0.04) 100%);
    border-color: rgba(240, 165, 42, 0.4);
    box-shadow: 0 6px 24px rgba(240, 165, 42, 0.15);
}
.result-banner {
    display: flex; align-items: center; gap: 18px;
    min-width: 0;
}
.result-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 900;
    flex-shrink: 0;
    background: rgba(47, 212, 122, 0.2);
    color: var(--green);
    border: 2px solid rgba(47, 212, 122, 0.5);
}
.result-hero.defeat .result-icon {
    background: rgba(242, 84, 69, 0.2);
    color: var(--red);
    border-color: rgba(242, 84, 69, 0.5);
}
.result-hero.draw .result-icon {
    background: rgba(240, 165, 42, 0.2);
    color: var(--orange);
    border-color: rgba(240, 165, 42, 0.5);
}
.result-text { line-height: 1.2; min-width: 0; }
.result-title {
    font-size: 28px; font-weight: 900;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}
.result-hero.defeat .result-title { color: var(--red); }
.result-hero.draw   .result-title { color: var(--orange); }
.result-sub {
    font-size: 14px; color: var(--text-dim);
    margin-top: 8px;
    font-weight: 500;
}
.result-meta { display: flex; align-items: center; }
.result-score {
    text-align: center;
}
.result-score-num {
    font-size: 42px; font-weight: 900;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.result-hero.defeat .result-score-num { color: var(--red); }
.result-hero.draw   .result-score-num { color: var(--orange); }
.result-score-lbl {
    font-size: 10px; font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 6px;
}

/* Rapport row : top joueurs + moments */
.rapport-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex-shrink: 0;
}
.moments-panel {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 16px;
    min-height: 0;
    overflow: hidden;
}
.rapport-row .key-players-panel,
.rapport-row .moments-panel {
    min-height: 0;
    overflow: hidden;
}
.insights-panel {
    flex-shrink: 0;
}

.rapport-top-list {
    display: flex; flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.rapport-top-row {
    display: grid;
    grid-template-columns: 22px 38px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 9px;
    font-size: 13px;
    transition: background 0.15s;
}
.rapport-top-row:hover { background: rgba(255, 255, 255, 0.06); }
.rapport-top-rank {
    font-size: 14px; font-weight: 900;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.rapport-top-rank.gold   { color: #f6c651; }
.rapport-top-rank.silver { color: #c0c0c0; }
.rapport-top-rank.bronze { color: #cd7f32; }
.rapport-top-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: white;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
}
.rapport-top-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rapport-top-info { line-height: 1.15; min-width: 0; }
.rapport-top-name {
    font-size: 13px; font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rapport-top-pos {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}
.rapport-top-actions {
    font-size: 11px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.rapport-top-pct {
    font-size: 16px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.rapport-top-pct.green   { color: var(--green); }
.rapport-top-pct.orange  { color: var(--orange); }
.rapport-top-pct.red     { color: var(--red); }
.rapport-top-pct.neutral { color: var(--neutral); }

/* Moments clés */
.moments-list {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.moment-item {
    display: grid;
    grid-template-columns: 56px 32px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 9px;
    border-left: 3px solid var(--border);
}
.moment-item.up   { border-left-color: var(--green); }
.moment-item.down { border-left-color: var(--red); }
.moment-item.flat { border-left-color: var(--orange); }
.moment-time {
    font-size: 13px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
}
.moment-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900; color: white;
}
.moment-icon.up   { background: var(--green); }
.moment-icon.down { background: var(--red); }
.moment-icon.flat { background: var(--orange); }
.moment-text {
    font-size: 12px; line-height: 1.4;
    color: var(--text);
}
.moment-text strong { color: var(--text); font-weight: 700; }

/* Insights coach */
.insights-panel {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 16px;
}
.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}
.insight-card {
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-soft);
}
.insight-card.up   { border-color: rgba(47, 212, 122, 0.3); }
.insight-card.flat { border-color: rgba(240, 165, 42, 0.3); }
.insight-card.down { border-color: rgba(242, 84, 69, 0.3); }
.insight-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 900;
    margin-bottom: 8px;
}
.insight-card.up   .insight-icon { background: rgba(47, 212, 122, 0.18); color: var(--green); }
.insight-card.flat .insight-icon { background: rgba(240, 165, 42, 0.18); color: var(--orange); }
.insight-card.down .insight-icon { background: rgba(242, 84, 69, 0.18); color: var(--red); }
.insight-title {
    font-size: 12px; font-weight: 800;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.insight-card.up   .insight-title { color: var(--green); }
.insight-card.flat .insight-title { color: var(--orange); }
.insight-card.down .insight-title { color: var(--red); }
.insight-text {
    font-size: 11px; color: var(--text-dim);
    line-height: 1.4;
}

/* Notes read-only */
.notes-readonly {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 20px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.notes-display {
    margin-top: 10px;
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    font-family: 'Inter', sans-serif;
}
.notes-display em.muted { color: var(--text-mute); font-style: italic; }

/* Match info card */
.match-info-list {
    display: flex; flex-direction: column;
    gap: 0;
}
.match-info-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
}
.match-info-item:last-child { border-bottom: none; padding-bottom: 0; }
.match-info-item:first-child { padding-top: 0; }
.match-info-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.match-info-value {
    font-size: 13px; font-weight: 700;
    color: var(--text);
    text-align: right;
}

/* Final score card */
.final-result-card {
    text-align: center;
}
.final-score {
    font-size: 44px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin: 14px 0 8px;
    letter-spacing: 1px;
}
.final-result-card.victory .final-score { color: var(--green); text-shadow: 0 0 20px rgba(47, 212, 122, 0.4); }
.final-result-card.defeat  .final-score { color: var(--red); }
.final-result-card.draw    .final-score { color: var(--orange); }
.final-result-status {
    font-size: 12px; font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.final-result-card.victory .final-result-status { color: var(--green); }
.final-result-card.defeat  .final-result-status { color: var(--red); }
.final-result-card.draw    .final-result-status { color: var(--orange); }

/* Export buttons */
.export-actions {
    display: flex; flex-direction: column;
    gap: 8px;
}
.export-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    color: var(--text);
    font-size: 13px; font-weight: 600;
    transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.export-btn svg {
    width: 18px; height: 18px;
    color: var(--text-dim);
    flex-shrink: 0;
}
.export-btn:hover {
    background: rgba(106, 166, 255, 0.12);
    border-color: rgba(106, 166, 255, 0.3);
}
.export-btn:hover svg { color: #92bdff; }
.export-btn:active { transform: scale(0.98); }

/* ============================================================
   VUE RÉGLAGES
   ============================================================ */
.reglages-view {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 4px 6px;
    min-height: 0;
}
.reglages-tabs { flex-wrap: wrap; }
.reglages-tab-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.reglages-tab-content > [data-tt][hidden] { display: none; }
.reglages-tab-content > [data-tt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 4px 6px 8px;
}
.reglages-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Card réglages */
.settings-card {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 22px 24px;
    flex-shrink: 0;
}
.settings-card-head {
    margin-bottom: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.settings-card-title {
    font-size: 14px; font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.settings-card-sub {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 5px;
    line-height: 1.5;
}
.settings-rows {
    display: flex; flex-direction: column;
    gap: 4px;
}

/* Setting row — chaque rangée respire et a son propre padding interne */
.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 16px 12px;
    border-bottom: 1px solid var(--border-soft);
    min-height: 56px;
    transition: background 0.15s;
    border-radius: 8px;
}
.setting-row:hover {
    background: rgba(255, 255, 255, 0.02);
}
.setting-row:last-child { border-bottom: none; padding-bottom: 14px; }
.setting-row:first-child { padding-top: 14px; }
.setting-label {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    padding-right: 12px;
}
.setting-label-main {
    font-size: 13px; font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.setting-label-sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 6px;
    line-height: 1.5;
    max-width: 480px;
}

/* Inputs */
.setting-row select,
.setting-input {
    padding: 10px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    color: var(--text);
    font-size: 13px; font-weight: 600;
    min-width: 160px;
    cursor: pointer;
    transition: border-color 0.15s;
    font-family: inherit;
}
.setting-input { cursor: text; }
.setting-row select:focus,
.setting-input:focus {
    outline: none;
    border-color: rgba(106, 166, 255, 0.5);
}

/* Slider — très visible sur fond sombre */
.setting-slider-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 260px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.setting-slider-wrap input[type="range"] {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    height: 24px;          /* zone de tap large */
    background: transparent;
    outline: none;
    margin: 0;
    cursor: pointer;
}
/* Track Webkit / Safari (iPad) */
.setting-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-d) var(--filled, 50%), rgba(255,255,255,0.08) var(--filled, 50%));
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
/* Track Firefox */
.setting-slider-wrap input[type="range"]::-moz-range-track {
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.12);
}
.setting-slider-wrap input[type="range"]::-moz-range-progress {
    height: 8px;
    background: linear-gradient(90deg, var(--accent), var(--accent-d));
    border-radius: 4px;
}
/* Thumb Webkit */
.setting-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-d));
    border: 2px solid #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(106, 166, 255, 0.55), 0 0 0 1px rgba(0,0,0,0.4);
    margin-top: -8px;       /* centre le thumb sur la track 8px */
    transition: transform 0.1s;
}
.setting-slider-wrap input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.15);
}
/* Thumb Firefox */
.setting-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-d));
    border: 2px solid #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(106, 166, 255, 0.55);
}
.slider-value {
    font-size: 14px; font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    min-width: 80px;
    text-align: right;
    padding: 4px 10px;
    background: rgba(106, 166, 255, 0.12);
    border: 1px solid rgba(106, 166, 255, 0.3);
    border-radius: 6px;
    letter-spacing: 0.3px;
}

/* Toggle switch (réglages) */
.toggle-switch { cursor: pointer; flex-shrink: 0; }
.toggle-switch input { display: none; }
.toggle-track {
    display: inline-block;
    width: 46px; height: 26px;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    position: relative;
    transition: background 0.18s, border-color 0.18s;
}
.toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--text-mute);
    transition: left 0.2s, background 0.2s;
}
.toggle-switch input:checked ~ .toggle-track {
    background: linear-gradient(180deg, rgba(47,212,122,0.25), rgba(47,212,122,0.1));
    border-color: rgba(47, 212, 122, 0.5);
}
.toggle-switch input:checked ~ .toggle-track .toggle-thumb {
    left: 22px;
    background: var(--green);
    box-shadow: 0 0 8px rgba(47, 212, 122, 0.5);
}

/* Radio pills */
.settings-radio-group {
    display: flex;
    gap: 4px;
    background: var(--bg-3);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid var(--border-soft);
}
.radio-pill {
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 7px;
    color: var(--text-dim);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: background 0.15s, color 0.15s;
}
.radio-pill input { display: none; }
.radio-pill.active {
    background: linear-gradient(180deg, rgba(106,166,255,0.25), rgba(106,166,255,0.1));
    color: #92bdff;
    box-shadow: 0 1px 4px rgba(106, 166, 255, 0.2);
}

/* Toggle chips (sous-types) */
.setting-toggles {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.toggle-chip {
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 8px;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    font-size: 11px; font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}
.toggle-chip input { display: none; }
.toggle-chip:has(input:checked) {
    background: linear-gradient(180deg, rgba(47,212,122,0.18), rgba(47,212,122,0.04));
    border-color: rgba(47, 212, 122, 0.5);
    color: var(--green);
}

/* Thresholds display */
.settings-thresholds-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.02);
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    margin: 4px 0;
}
.thr-cell {
    text-align: center;
    padding: 14px 10px;
    border-radius: 8px;
}
.thr-cell.green  { background: rgba(47,212,122,0.10); }
.thr-cell.orange { background: rgba(240,165,42,0.10); }
.thr-cell.red    { background: rgba(242,84,69,0.10); }
.thr-cell-label {
    font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.thr-cell.green  .thr-cell-label { color: var(--green); }
.thr-cell.orange .thr-cell-label { color: var(--orange); }
.thr-cell.red    .thr-cell-label { color: var(--red); }
.thr-cell-value {
    font-size: 18px; font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.thr-cell.green  .thr-cell-value { color: var(--green); }
.thr-cell.orange .thr-cell-value { color: var(--orange); }
.thr-cell.red    .thr-cell-value { color: var(--red); }

/* Subscription */
.subscription-status {
    display: flex; flex-direction: column; gap: 14px;
    padding: 22px 24px;
    background: linear-gradient(135deg, rgba(106,166,255,0.10) 0%, rgba(139,107,242,0.06) 100%);
    border: 1px solid rgba(106, 166, 255, 0.3);
    border-radius: 10px;
    margin: 4px 0;
}
.sub-tier { display: flex; justify-content: space-between; align-items: center; }
.sub-tier-name {
    font-size: 16px; font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.sub-tier-price {
    font-size: 16px; font-weight: 800;
    color: var(--accent);
}
.sub-tier-status {
    font-size: 12px;
    color: var(--text-dim);
}
.sub-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Affiliation */
.affiliate-code {
    display: flex; gap: 10px; align-items: center;
    min-width: 280px;
}
.affiliate-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
    padding: 4px 0;
}
.aff-tier {
    text-align: center;
    padding: 22px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.aff-tier.highlight {
    background: linear-gradient(180deg, rgba(47,212,122,0.12), rgba(47,212,122,0.04));
    border-color: rgba(47, 212, 122, 0.4);
}
.aff-tier-num {
    font-size: 28px; font-weight: 900;
    color: var(--text);
    line-height: 1;
}
.aff-tier-text {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 6px;
}
.aff-tier-discount {
    font-size: 18px; font-weight: 900;
    color: var(--green);
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}
.aff-tier.highlight .aff-tier-discount { color: var(--green); }
.aff-progress {
    margin-top: 8px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
}

/* Settings info badge */
.settings-info-badge {
    padding: 4px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    font-size: 11px; font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.settings-info-badge.green {
    background: rgba(47, 212, 122, 0.15);
    color: var(--green);
    border: 1px solid rgba(47, 212, 122, 0.3);
}

/* Premium */
.premium-hero {
    padding: 0;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(139,107,242,0.20) 0%, rgba(106,166,255,0.10) 100%);
    border: 1px solid rgba(139, 107, 242, 0.4);
}
.premium-banner {
    display: flex; align-items: center; gap: 22px;
    padding: 24px 28px;
}
.premium-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--violet), var(--violet-d));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 4px 16px rgba(139, 107, 242, 0.4);
    flex-shrink: 0;
}
.premium-title {
    font-size: 18px; font-weight: 900;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.premium-sub {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
}
.premium-banner button { margin-left: auto; flex-shrink: 0; }

.premium-features {
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}
.premium-feature {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.premium-feature.locked { opacity: 0.85; }
.pf-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(139, 107, 242, 0.15);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.pf-text { min-width: 0; }
.pf-title {
    font-size: 13px; font-weight: 800;
    color: var(--text);
}
.pf-desc {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    line-height: 1.4;
}
.pf-tag {
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--violet), var(--violet-d));
    color: white;
    font-size: 9px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 6px 0;
}
.pricing-tier {
    padding: 22px 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    position: relative;
}
.pricing-tier.active {
    border-color: rgba(106, 166, 255, 0.5);
    background: rgba(106, 166, 255, 0.06);
}
.pricing-tier.highlight {
    border-color: rgba(139, 107, 242, 0.6);
    background: linear-gradient(180deg, rgba(139,107,242,0.12), rgba(139,107,242,0.03));
}
.pt-badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--violet), var(--violet-d));
    color: white;
    font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
.pt-name {
    font-size: 12px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.pt-price {
    font-size: 24px; font-weight: 900;
    color: var(--text);
    margin-bottom: 12px;
}
.pt-price span {
    font-size: 11px; font-weight: 600;
    color: var(--text-dim);
}
.pt-feature {
    font-size: 11px;
    color: var(--text-dim);
    padding: 5px 0;
    border-top: 1px solid var(--border-soft);
}
.pt-feature:first-of-type { border-top: none; }

/* À propos */
.about-card .about-logo {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.brand-mark.big {
    width: 60px; height: 60px;
    border-radius: 16px;
}
.brand-mark.big .brand-k { font-size: 30px; }
.brand-name.big {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.brand-name.big .brand-line1 { font-size: 18px; }
.brand-name.big .brand-line2 { font-size: 18px; color: var(--text-dim); }
.about-tagline {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 6px;
}
.about-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 4px 0;
}
.about-item {
    padding: 14px 18px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
}
.about-label {
    font-size: 9px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.about-value {
    font-size: 13px; font-weight: 700;
    color: var(--text);
}

.cdc-summary {
    padding: 18px 22px;
    background: rgba(255,255,255,0.02);
    border-radius: 9px;
    border: 1px solid var(--border-soft);
    margin: 4px 0;
}
.cdc-summary p {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.6;
}
.cdc-summary p:last-child { margin-bottom: 0; }
.cdc-summary strong { color: var(--text); font-weight: 700; }

/* Right panel preview (réglages) */
.settings-preview {
    display: flex; flex-direction: column;
    gap: 0;
    margin-bottom: 14px;
}
.preview-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}
.preview-row:last-child { border-bottom: none; padding-bottom: 0; }
.preview-row:first-child { padding-top: 0; }
.preview-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.preview-value {
    font-size: 13px; font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.preview-value.green { color: var(--green); }
.preview-value.red   { color: var(--red); }

.settings-preview-pills {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.preview-pill {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
}
.preview-pill .pp-circle {
    width: 12px; height: 12px;
    border-radius: 50%;
}
.preview-pill.green  { border-color: rgba(47, 212, 122, 0.3); }
.preview-pill.green  .pp-circle { background: var(--green); box-shadow: 0 0 8px var(--green); }
.preview-pill.orange { border-color: rgba(240, 165, 42, 0.3); }
.preview-pill.orange .pp-circle { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.preview-pill.red    { border-color: rgba(242, 84, 69, 0.3); }
.preview-pill.red    .pp-circle { background: var(--red); box-shadow: 0 0 8px var(--red); }
.pp-label {
    font-size: 11px; font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.preview-pill.green  .pp-label { color: var(--green); }
.preview-pill.orange .pp-label { color: var(--orange); }
.preview-pill.red    .pp-label { color: var(--red); }
.pp-value {
    font-size: 12px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.help-card .help-tip {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.6;
}
.help-card .help-tip strong { color: var(--text); }

/* Footer actions */
.footer-actions-group {
    display: flex; gap: 10px; align-items: center;
}
.undo-btn.primary-flavor {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-d) 100%);
    border-color: var(--accent-d);
    color: white;
    box-shadow: 0 4px 14px rgba(106, 166, 255, 0.3);
}
.ghost-btn.danger {
    color: var(--red);
    border-color: rgba(242, 84, 69, 0.3);
}
.ghost-btn.danger:hover {
    background: rgba(242, 84, 69, 0.08);
}

/* ============================================================
   USER PILL CLIQUABLE
   ============================================================ */
a.user-pill {
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, border-color 0.15s;
}
a.user-pill:visited,
a.user-pill:link,
a.user-pill:hover,
a.user-pill:active { color: var(--text); }
a.user-pill .user-name  { color: var(--text); }
a.user-pill .user-role  { color: var(--text-dim); }
a.user-pill:hover {
    background: var(--bg-3);
}
a.user-pill.active {
    background: linear-gradient(135deg, rgba(106,166,255,0.18) 0%, rgba(139,107,242,0.10) 100%);
    box-shadow: inset 0 0 0 1px rgba(106,166,255,0.3);
}

/* ============================================================
   VUE COMPTE
   ============================================================ */

/* Profil — photo */
.profile-photo-row {
    display: flex; align-items: center; gap: 28px;
    padding: 14px 12px;
}
.profile-avatar-large {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-d) 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 900;
    color: white;
    box-shadow: 0 6px 24px rgba(108, 77, 214, 0.4);
    flex-shrink: 0;
}
.profile-photo-actions {
    display: flex; flex-direction: column; gap: 8px;
}
.photo-hint {
    font-size: 11px; color: var(--text-mute);
    margin-top: 4px;
}

/* Form grid 2 cols */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 28px;
    padding: 4px 0;
}
.form-grid-2 .setting-row {
    border-bottom: none;
    padding: 14px 12px;
    border-top: 1px solid var(--border-soft);
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
}
.form-grid-2 .setting-row:nth-child(-n+2) { border-top: none; padding-top: 6px; }
.form-grid-2 .setting-row:hover { background: transparent; }
.form-grid-2 .setting-row .setting-label-main { font-size: 12px; color: var(--text-dim); }
.form-grid-2 .setting-row .setting-input,
.form-grid-2 .setting-row select {
    width: 100%;
    min-width: 0;
}

/* Settings input row (multiple inputs side by side) */
.setting-input-row {
    display: flex; gap: 10px;
    width: 100%;
}
.setting-input-row .setting-input { flex: 1; }
.setting-input-row .setting-input.small { max-width: 100px; }

/* Sécurité — pwd strength */
.pwd-strength {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 4px;
}
.pwd-strength-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.pwd-strength-fill {
    height: 100%;
    background: var(--red);
    transition: width 0.2s, background 0.2s;
}
.pwd-strength-fill.medium { background: var(--orange); }
.pwd-strength-fill.strong { background: var(--green); }
.pwd-strength-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 70px;
    text-align: right;
}

/* Sessions */
.sessions-list, .login-history {
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.session-row, .login-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
}
.session-icon {
    width: 36px; height: 36px;
    background: var(--bg-3);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
}
.session-icon svg { width: 20px; height: 20px; }
.session-info { line-height: 1.3; min-width: 0; }
.session-device { font-size: 13px; font-weight: 700; color: var(--text); }
.session-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.session-current {
    background: rgba(47, 212, 122, 0.15);
    color: var(--green);
    font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid rgba(47, 212, 122, 0.3);
}
.session-revoke {
    color: var(--red);
    font-size: 11px; font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(242, 84, 69, 0.3);
    background: transparent;
    cursor: pointer;
}
.session-revoke:hover { background: rgba(242, 84, 69, 0.08); }

.login-row { grid-template-columns: 36px 1fr auto auto; }
.login-status {
    font-size: 10px; font-weight: 800;
    padding: 4px 8px;
    border-radius: 5px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.login-status.success { background: rgba(47, 212, 122, 0.15); color: var(--green); }
.login-status.fail    { background: rgba(242, 84, 69, 0.15); color: var(--red); }

/* Plan actuel */
.current-plan-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(106,166,255,0.10), rgba(139,107,242,0.06));
    border: 1px solid rgba(106, 166, 255, 0.3);
    border-radius: 12px;
    margin: 4px 0;
}
.cp-name {
    font-size: 20px; font-weight: 900;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.cp-price {
    font-size: 26px; font-weight: 900;
    color: var(--accent);
    margin-top: 6px;
}
.cp-price span { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.cp-status {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-dim);
}
.cp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-mute);
}
.cp-dot.active { background: var(--green); box-shadow: 0 0 8px var(--green); }
.cp-features {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex; flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-dim);
}
.cp-right {
    display: flex; flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 180px;
}

/* Stripe banner */
.stripe-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(99, 91, 255, 0.10) 0%, rgba(99, 91, 255, 0.03) 100%);
    border: 1px solid rgba(99, 91, 255, 0.30);
    border-radius: 10px;
    margin-bottom: 14px;
}
.stripe-logo {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 4px 12px 4px 0;
    border-right: 1px solid rgba(99, 91, 255, 0.25);
}
.stripe-logo svg { width: 80px; height: auto; }
.stripe-shield {
    font-size: 9px; font-weight: 800;
    color: #635BFF;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    background: rgba(99, 91, 255, 0.15);
    border-radius: 4px;
}
.stripe-text {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
}
.stripe-text strong { color: var(--text); font-weight: 700; }

/* Bouton "Gérer via Stripe" — ouvre le Customer Portal Stripe */
.stripe-portal-btn {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 18px;
    align-items: center;
    width: 100%;
    padding: 18px 22px;
    background: linear-gradient(135deg, #635BFF 0%, #4f46c5 100%);
    border: 1px solid #635BFF;
    color: white;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: filter 0.15s, transform 0.08s, box-shadow 0.15s;
    box-shadow: 0 6px 20px rgba(99, 91, 255, 0.35);
    margin: 4px 0;
}
.stripe-portal-btn:hover { filter: brightness(1.05); }
.stripe-portal-btn:active { transform: scale(0.99); }
.stripe-portal-btn svg {
    width: 22px; height: 22px;
    color: white;
}
.spb-text { line-height: 1.3; min-width: 0; }
.spb-title {
    font-size: 14px; font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.spb-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;
}

/* Stripe features grid */
.stripe-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}
.sf-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
}
.sf-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(99, 91, 255, 0.12);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.sf-text { line-height: 1.3; }
.sf-title {
    font-size: 12px; font-weight: 800;
    color: var(--text);
}
.sf-desc {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 3px;
    line-height: 1.4;
}
.pm-icon {
    width: 56px; height: 36px;
    background: linear-gradient(135deg, #1a1f71, #0a1359);
    color: white;
    font-size: 13px; font-weight: 900;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 1px;
}
.pm-num {
    font-size: 14px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}
.pm-meta {
    font-size: 11px; color: var(--text-dim);
    margin-top: 4px;
}

/* Invoices */
.invoices-list {
    display: flex; flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}
.invoice-row {
    display: grid;
    grid-template-columns: 120px 1fr auto auto;
    gap: 18px;
    align-items: center;
    padding: 14px 18px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
}
.invoice-row:hover { background: rgba(255,255,255,0.04); }
.invoice-date {
    font-size: 12px; font-weight: 700;
    color: var(--text-dim);
}
.invoice-desc { font-size: 13px; color: var(--text); }
.invoice-amount {
    font-size: 14px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.invoice-download {
    color: var(--accent);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(106, 166, 255, 0.1);
    border: 1px solid rgba(106, 166, 255, 0.3);
    cursor: pointer;
}
.invoice-download:hover { background: rgba(106, 166, 255, 0.2); }

/* RGPD */
.rgpd-tab {
    background: linear-gradient(180deg, rgba(106,166,255,0.12), rgba(106,166,255,0.04));
    color: #92bdff;
    border-color: rgba(106, 166, 255, 0.4);
}
.rgpd-tab.active {
    background: linear-gradient(180deg, rgba(106,166,255,0.25), rgba(106,166,255,0.08));
    border-color: rgba(106, 166, 255, 0.6);
}

.rgpd-intro-card {
    background: linear-gradient(135deg, rgba(106,166,255,0.10), rgba(139,107,242,0.06));
    border-color: rgba(106, 166, 255, 0.3);
    padding: 24px 28px;
}
.rgpd-intro {
    display: flex; align-items: flex-start; gap: 22px;
}
.rgpd-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-d));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.rgpd-intro-title {
    font-size: 16px; font-weight: 900;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.rgpd-intro-text {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
    margin-top: 8px;
}
.rgpd-intro-text strong { color: var(--text); font-weight: 700; }

.rgpd-data-list {
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}
.rgpd-data-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas: "cat desc"
                         "cat purpose"
                         "cat retain";
    gap: 8px 24px;
    padding: 18px 22px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid var(--accent);
    border-radius: 9px;
}
.rdi-cat {
    grid-area: cat;
    font-size: 13px; font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rdi-desc { grid-area: desc; font-size: 12px; color: var(--text); line-height: 1.5; }
.rdi-purpose {
    grid-area: purpose; font-size: 11px; color: var(--text-dim);
    line-height: 1.5;
}
.rdi-purpose::before { content: '◆ Finalité : '; color: var(--accent); font-weight: 700; }
.rdi-retain {
    grid-area: retain; font-size: 11px; color: var(--text-dim);
    line-height: 1.5;
}
.rdi-retain::before { content: '⏳ Conservation : '; color: var(--orange); font-weight: 700; }

/* Droits RGPD */
.rgpd-rights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px 0;
}
.rgpd-right-btn {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.08s;
    text-align: left;
}
.rgpd-right-btn:hover {
    border-color: rgba(106, 166, 255, 0.4);
    background: rgba(106, 166, 255, 0.05);
}
.rgpd-right-btn:active { transform: scale(0.99); }
.rgpd-right-btn.rgpd-right-danger:hover {
    border-color: rgba(242, 84, 69, 0.4);
    background: rgba(242, 84, 69, 0.05);
}
.rgr-icon {
    font-size: 22px;
    width: 40px; height: 40px;
    background: rgba(106, 166, 255, 0.12);
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.rgpd-right-danger .rgr-icon { background: rgba(242, 84, 69, 0.12); }
.rgr-text { line-height: 1.3; min-width: 0; }
.rgr-title {
    font-size: 13px; font-weight: 800;
    color: var(--text);
}
.rgr-desc {
    font-size: 11px; color: var(--text-dim);
    margin-top: 4px;
    line-height: 1.4;
}

/* Subprocessors */
.rgpd-subprocessors {
    display: flex; flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}
.subproc-row {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    gap: 22px;
    padding: 14px 20px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    font-size: 12px;
    align-items: center;
}
.sp-name {
    font-weight: 800;
    color: var(--text);
}
.sp-purpose, .sp-location {
    color: var(--text-dim);
    font-size: 11px;
}

/* DPO contact */
.rgpd-contact {
    display: flex; flex-direction: column;
    gap: 0;
    padding: 4px 0;
}
.rgpd-contact-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 22px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border-soft);
    align-items: center;
}
.rgpd-contact-row:first-child { padding-top: 8px; }
.rgpd-contact-row:last-child { border-bottom: none; padding-bottom: 8px; }
.rcr-label { font-size: 12px; color: var(--text-dim); font-weight: 700; }
.rcr-val {
    font-size: 13px; font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.rcr-val a { color: var(--accent); text-decoration: none; }
.rcr-val a:hover { text-decoration: underline; }

/* Danger zone */
.danger-zone {
    border-color: rgba(242, 84, 69, 0.3);
    background: linear-gradient(180deg, rgba(242,84,69,0.08), rgba(242,84,69,0.02));
}
.settings-card-title.danger { color: var(--red); }
.primary-btn.danger {
    background: linear-gradient(180deg, var(--red), var(--red-d));
    border-color: var(--red-d);
    box-shadow: 0 4px 14px rgba(242, 84, 69, 0.35);
}
.ghost-btn.danger { color: var(--red); border-color: rgba(242, 84, 69, 0.3); }

/* Activity feed */
.activity-feed {
    display: flex; flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}
.activity-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
}
.act-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(106, 166, 255, 0.15);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.act-icon.green  { background: rgba(47, 212, 122, 0.15); color: var(--green); }
.act-icon.orange { background: rgba(240, 165, 42, 0.15); color: var(--orange); }
.act-icon.red    { background: rgba(242, 84, 69, 0.15); color: var(--red); }
.act-text { font-size: 13px; color: var(--text); }
.act-text strong { font-weight: 700; }
.act-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; }

/* Usage stats */
.usage-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 4px 0;
}
.us-cell {
    text-align: center;
    padding: 22px 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    border: 1px solid var(--border-soft);
}
.us-num {
    font-size: 26px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.us-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 6px;
}

/* Right panel — account hero */
.account-summary-card {
    text-align: center;
    padding: 22px 18px;
}
.account-hero { padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px; }
.account-avatar-big {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--violet-d));
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 900;
    color: white;
    margin: 0 auto 12px;
    box-shadow: 0 6px 20px rgba(108, 77, 214, 0.4);
}
.account-hero-name {
    font-size: 14px; font-weight: 800;
    color: var(--text);
}
.account-hero-email {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
}
.account-meta { display: flex; flex-direction: column; gap: 0; }
.am-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
}
.am-row:last-child { border-bottom: none; padding-bottom: 0; }
.am-row:first-child { padding-top: 0; }
.am-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.am-val {
    font-size: 12px; font-weight: 700;
    color: var(--text);
    display: flex; align-items: center; gap: 6px;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.status-dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.badge-tiny {
    font-size: 9px; font-weight: 800;
    padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-tiny.green  { background: rgba(47, 212, 122, 0.15); color: var(--green); }
.badge-tiny.orange { background: rgba(240, 165, 42, 0.15); color: var(--orange); }

/* Quick actions */
.quick-actions {
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.quick-action {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px; font-weight: 600;
    text-align: left;
    transition: background 0.15s;
}
.quick-action svg { width: 16px; height: 16px; color: var(--text-dim); flex-shrink: 0; }
.quick-action:hover { background: rgba(106, 166, 255, 0.08); }
.quick-action:hover svg { color: var(--accent); }

/* RGPD pills (right panel) */
.rgpd-pill {
    display: block;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.rgpd-pill:last-child { margin-bottom: 0; }

/* ============================================================
   THÈME CLAIR — overrides ciblés (rgba codés en dur)
   ============================================================ */
[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, 0.85);
    border-right-color: var(--border);
}
[data-theme="light"] .right-panel {
    background: rgba(255, 255, 255, 0.7);
    border-left-color: var(--border);
}
[data-theme="light"] .topbar { border-bottom-color: var(--border); }
[data-theme="light"] .bottom-tabs { border-top-color: var(--border); background: rgba(255,255,255,0.5); }

/* Cards + surfaces */
[data-theme="light"] .panel-card,
[data-theme="light"] .settings-card,
[data-theme="light"] .chrono-card-top,
[data-theme="light"] .chart-panel,
[data-theme="light"] .court-panel,
[data-theme="light"] .timeline-panel,
[data-theme="light"] .key-players-panel,
[data-theme="light"] .moments-panel,
[data-theme="light"] .insights-panel,
[data-theme="light"] .ranking-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .kpi-stat,
[data-theme="light"] .player-card {
    background: var(--bg-1);
    box-shadow: 0 2px 8px var(--surf-shadow);
}

/* Player rows */
[data-theme="light"] .player-row {
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
}
[data-theme="light"] .player-row.bench {
    background: rgba(15, 25, 50, 0.04);
}

/* Lignes/items à fond rgba(255,255,255,0.02-0.04) → version light */
[data-theme="light"] .session-row,
[data-theme="light"] .login-row,
[data-theme="light"] .pm-card,
[data-theme="light"] .invoice-row,
[data-theme="light"] .rgpd-data-item,
[data-theme="light"] .rgpd-right-btn,
[data-theme="light"] .subproc-row,
[data-theme="light"] .activity-row,
[data-theme="light"] .us-cell,
[data-theme="light"] .about-item,
[data-theme="light"] .cdc-summary,
[data-theme="light"] .settings-thresholds-display,
[data-theme="light"] .pricing-tier:not(.highlight):not(.active),
[data-theme="light"] .premium-feature,
[data-theme="light"] .quick-action,
[data-theme="light"] .rgpd-pill,
[data-theme="light"] .insight-card,
[data-theme="light"] .focus-item,
[data-theme="light"] .summary-cell,
[data-theme="light"] .moment-item,
[data-theme="light"] .key-player,
[data-theme="light"] .position-group,
[data-theme="light"] .position-player,
[data-theme="light"] .event-row,
[data-theme="light"] .alert-row,
[data-theme="light"] .ev-filter:not(.active),
[data-theme="light"] .tab-btn:not(.active),
[data-theme="light"] .undo-btn:not(.primary-flavor),
[data-theme="light"] .ghost-btn:not(.danger):not(.primary-flavor),
[data-theme="light"] .t-tab:not(.active),
[data-theme="light"] .team-customize,
[data-theme="light"] .toggle-pill.on-bench,
[data-theme="light"] .sf-item,
[data-theme="light"] .preview-pill,
[data-theme="light"] .preview-row,
[data-theme="light"] .am-row,
[data-theme="light"] .rapport-top-row,
[data-theme="light"] .synth-row,
[data-theme="light"] .pc-spark,
[data-theme="light"] .timeline-dot.empty,
[data-theme="light"] .energy-bar {
    background: var(--bg-3) !important;
}

/* === Variantes colorées : doivent garder leur fond === */
[data-theme="light"] .undo-btn.primary-flavor {
    background: linear-gradient(180deg, var(--accent), var(--accent-d)) !important;
    border-color: var(--accent-d) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.30) !important;
}
[data-theme="light"] .tab-btn.active {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.18), rgba(22, 163, 74, 0.05)) !important;
    border-color: rgba(22, 163, 74, 0.45) !important;
    color: var(--green-d) !important;
}
[data-theme="light"] .t-tab.active {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.18), rgba(22, 163, 74, 0.05)) !important;
    border-color: rgba(22, 163, 74, 0.45) !important;
    color: var(--green-d) !important;
}
[data-theme="light"] .ev-filter.active {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.06)) !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
    color: var(--accent-d) !important;
}
[data-theme="light"] .toggle-pill.on-field {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.20), rgba(22, 163, 74, 0.06)) !important;
    border-color: rgba(22, 163, 74, 0.45) !important;
    color: var(--green-d) !important;
}

/* Borders soft sur tous les éléments concernés */
[data-theme="light"] .session-row,
[data-theme="light"] .login-row,
[data-theme="light"] .pm-card,
[data-theme="light"] .ranking-card,
[data-theme="light"] .invoice-row,
[data-theme="light"] .rgpd-right-btn,
[data-theme="light"] .activity-row,
[data-theme="light"] .us-cell,
[data-theme="light"] .about-item,
[data-theme="light"] .pricing-tier,
[data-theme="light"] .premium-feature,
[data-theme="light"] .quick-action,
[data-theme="light"] .rgpd-pill,
[data-theme="light"] .insight-card,
[data-theme="light"] .focus-item,
[data-theme="light"] .summary-cell,
[data-theme="light"] .moment-item,
[data-theme="light"] .key-player,
[data-theme="light"] .position-group,
[data-theme="light"] .position-player,
[data-theme="light"] .ev-filter,
[data-theme="light"] .tab-btn,
[data-theme="light"] .undo-btn,
[data-theme="light"] .ghost-btn,
[data-theme="light"] .t-tab,
[data-theme="light"] .team-customize,
[data-theme="light"] .toggle-pill,
[data-theme="light"] .sf-item,
[data-theme="light"] .preview-pill,
[data-theme="light"] .player-row,
[data-theme="light"] .timeline-dot.empty {
    border-color: var(--border) !important;
}

/* User pill (en mode clair, le actif est plus visible) */
[data-theme="light"] a.user-pill {
    background: var(--bg-3);
}
[data-theme="light"] a.user-pill.active {
    background: linear-gradient(135deg, rgba(37,99,235,0.15) 0%, rgba(124,58,237,0.10) 100%);
    box-shadow: inset 0 0 0 1px rgba(37,99,235,0.4);
}

/* Sub-actions du panneau saisie */
[data-theme="light"] .sub-action {
    background: var(--bg-3);
    border-color: var(--border);
    color: var(--text-dim);
}
[data-theme="light"] .sub-action:hover {
    background: var(--surf-3);
    color: var(--text);
}

/* Selected card du panneau droit */
[data-theme="light"] .selected-card {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
}
[data-theme="light"] .selected-card.empty {
    background: var(--bg-3);
    border-color: var(--border);
}
[data-theme="light"] .selected-pos {
    background: rgba(15, 25, 50, 0.06);
}

/* Pastille violette joueur — reste violette */
/* Avatar gradient OK car couleurs déterministes */

/* Numéro joueur badge — OK avec --violet/--violet-d qui s'adaptent */

/* Toggles, sliders, inputs */
[data-theme="light"] .toggle-track {
    background: #e2e8f0;
    border-color: var(--border);
}
[data-theme="light"] .toggle-thumb { background: #94a3b8; }
[data-theme="light"] .toggle-switch input:checked ~ .toggle-track {
    background: linear-gradient(180deg, rgba(22,163,74,0.25), rgba(22,163,74,0.10));
    border-color: rgba(22,163,74,0.45);
}
[data-theme="light"] .toggle-switch input:checked ~ .toggle-track .toggle-thumb {
    background: var(--green);
    box-shadow: 0 0 8px rgba(22,163,74,0.4);
}

[data-theme="light"] .setting-row select,
[data-theme="light"] .setting-input,
[data-theme="light"] .comparator-pickers select {
    background: var(--bg-1);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="light"] .setting-slider-wrap {
    background: rgba(15, 25, 50, 0.04);
    border-color: var(--border);
}
[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-d) var(--filled, 50%), rgba(15,25,50,0.10) var(--filled, 50%));
    border-color: rgba(15,25,50,0.10);
}
[data-theme="light"] input[type="range"]::-moz-range-track {
    background: rgba(15,25,50,0.10);
    border-color: rgba(15,25,50,0.10);
}
[data-theme="light"] .slider-value {
    background: var(--tint-accent-bg);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--accent);
}

/* Radio pills */
[data-theme="light"] .settings-radio-group {
    background: var(--bg-3);
    border-color: var(--border);
}
[data-theme="light"] .radio-pill.active {
    background: linear-gradient(180deg, rgba(37,99,235,0.18), rgba(37,99,235,0.06));
    color: var(--accent-d);
}

/* Toggle chips */
[data-theme="light"] .toggle-chip {
    background: var(--bg-3);
    border-color: var(--border);
    color: var(--text-dim);
}
[data-theme="light"] .toggle-chip:has(input:checked) {
    background: linear-gradient(180deg, rgba(22,163,74,0.15), rgba(22,163,74,0.05));
    border-color: rgba(22,163,74,0.45);
    color: var(--green-d);
}

/* Scoreboard text en mode clair — niveau badge */
[data-theme="light"] .level-badge {
    background: var(--tint-accent-bg);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--accent-d);
}

/* Match category */
[data-theme="light"] .match-category { color: var(--text-dim); }

/* Period label dans la chrono card */
[data-theme="light"] .period-label,
[data-theme="light"] .chrono-period-label {
    color: var(--text-dim);
}

/* Chrono running color */
[data-theme="light"] .chrono-time-big,
[data-theme="light"] .period-time { color: var(--green-d); }

/* Stripe banner sur fond clair */
[data-theme="light"] .stripe-banner {
    background: linear-gradient(135deg, rgba(99, 91, 255, 0.08) 0%, rgba(99, 91, 255, 0.02) 100%);
    border-color: rgba(99, 91, 255, 0.30);
}
[data-theme="light"] .stripe-text { color: var(--text-dim); }
[data-theme="light"] .stripe-text strong { color: var(--text); }

/* Subscription / Plan actuel */
[data-theme="light"] .subscription-status,
[data-theme="light"] .current-plan-card {
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(124,58,237,0.04));
    border-color: rgba(37,99,235,0.3);
}

/* Premium hero */
[data-theme="light"] .premium-hero {
    background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(37,99,235,0.05));
    border-color: rgba(124, 58, 237, 0.4);
}

/* Result hero (Rapport) */
[data-theme="light"] .result-hero {
    background: linear-gradient(135deg, rgba(22,163,74,0.10), rgba(22,163,74,0.02));
    border-color: rgba(22,163,74,0.4);
}
[data-theme="light"] .result-hero.defeat {
    background: linear-gradient(135deg, rgba(220,38,38,0.10), rgba(220,38,38,0.02));
    border-color: rgba(220,38,38,0.4);
}
[data-theme="light"] .result-hero.draw {
    background: linear-gradient(135deg, rgba(217,119,6,0.10), rgba(217,119,6,0.02));
    border-color: rgba(217,119,6,0.4);
}

/* Danger zone */
[data-theme="light"] .danger-zone {
    background: linear-gradient(180deg, rgba(220,38,38,0.06), rgba(220,38,38,0.02));
    border-color: rgba(220,38,38,0.30);
}

/* Pricing tier highlight */
[data-theme="light"] .pricing-tier.highlight {
    background: linear-gradient(180deg, rgba(124,58,237,0.10), rgba(124,58,237,0.03));
    border-color: rgba(124,58,237,0.5);
}
[data-theme="light"] .pricing-tier.active {
    background: rgba(37,99,235,0.06);
    border-color: rgba(37,99,235,0.5);
}

/* Affiliate tiers highlight */
[data-theme="light"] .aff-tier.highlight {
    background: linear-gradient(180deg, rgba(22,163,74,0.10), rgba(22,163,74,0.03));
    border-color: rgba(22,163,74,0.4);
}

/* Tab actif vert (footer) */
[data-theme="light"] .tab-btn.active {
    background: linear-gradient(180deg, rgba(22,163,74,0.15), rgba(22,163,74,0.04));
    border-color: rgba(22,163,74,0.4);
    color: var(--green-d);
}

/* T-tab actif (toolbar) */
[data-theme="light"] .t-tab.active {
    background: linear-gradient(180deg, rgba(22,163,74,0.15), rgba(22,163,74,0.04));
    border-color: rgba(22,163,74,0.4);
    color: var(--green-d);
}

/* RGPD tab spécial */
[data-theme="light"] .rgpd-tab {
    background: linear-gradient(180deg, rgba(37,99,235,0.10), rgba(37,99,235,0.03));
    color: var(--accent-d);
    border-color: rgba(37,99,235,0.4);
}
[data-theme="light"] .rgpd-tab.active {
    background: linear-gradient(180deg, rgba(37,99,235,0.20), rgba(37,99,235,0.06));
}

/* Brand mark / logo K — reste vif */
/* (pas de override, le gradient est OK sur les 2 thèmes) */

/* Chrono big btn - vert pause */
[data-theme="light"] .chrono-big-btn {
    background: linear-gradient(180deg, rgba(22,163,74,0.20) 0%, rgba(22,163,74,0.06) 100%);
    border-color: rgba(22,163,74,0.5);
    color: var(--green-d);
    box-shadow: 0 6px 18px rgba(22,163,74,0.18);
}
[data-theme="light"] .chrono-big-btn.paused {
    background: linear-gradient(180deg, rgba(217,119,6,0.20), rgba(217,119,6,0.06));
    border-color: rgba(217,119,6,0.5);
    color: var(--orange-d);
    box-shadow: 0 6px 18px rgba(217,119,6,0.18);
}

/* Boutons +/− match */
[data-theme="light"] .act-btn.plus,
[data-theme="light"] .big-btn.plus,
[data-theme="light"] .last-action-sign.plus,
[data-theme="light"] .event-sign.plus {
    color: white;
}
[data-theme="light"] .act-btn.minus,
[data-theme="light"] .big-btn.minus,
[data-theme="light"] .last-action-sign.minus,
[data-theme="light"] .event-sign.minus {
    color: white;
}

/* Avatar gradient fallback (initiales) — texte reste blanc */
/* user-pill avatar */

/* FIN DE MATCH btn rouge — OK */

/* Footer button save — adaptation */
[data-theme="light"] .undo-btn.primary-flavor {
    background: linear-gradient(180deg, var(--accent), var(--accent-d));
    border-color: var(--accent-d);
    color: white;
    box-shadow: 0 4px 14px rgba(37,99,235,0.30);
}

/* Notes textarea */
[data-theme="light"] .notes-area {
    background: var(--bg-1);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="light"] .notes-display {
    background: var(--bg-3);
    border-color: var(--border);
}

/* Linked list (modal) */
[data-theme="light"] .linked-list { background: var(--bg-3); }
[data-theme="light"] .linked-item { background: var(--bg-1); }

/* Overlay backgrounds (modals) */
[data-theme="light"] .overlay {
    background: rgba(15, 25, 50, 0.4);
}
[data-theme="light"] .overlay-card {
    background: var(--bg-1);
    border-color: var(--border);
    box-shadow: 0 20px 60px rgba(15,25,50,0.25);
}
[data-theme="light"] .overlay-close { background: var(--bg-3); }

/* Toast */
[data-theme="light"] .toast {
    background: var(--bg-1);
    color: var(--text);
    border-color: var(--border);
    box-shadow: 0 6px 20px rgba(15,25,50,0.20);
}

/* Energy bar */
[data-theme="light"] .energy-bar { background: rgba(15, 25, 50, 0.08); }

/* Bottom tabs container background */
[data-theme="light"] body .bottom-tabs { background: rgba(255,255,255,0.6); }

/* ============================================================
   ACCUEIL — Dashboard utilisateur (sessions / matchs)
   ============================================================ */
.home-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    grid-column: 2 / 4;     /* Prend la place du main + right-panel */
}
.app:has(.home-section) .right-panel { display: none; }

.home-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 32px 16px;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
}
.home-greeting { min-width: 0; }
.home-title {
    font-size: 28px; font-weight: 900;
    color: var(--text);
    letter-spacing: -0.4px;
}
.home-sub {
    color: var(--text-dim);
    margin-top: 6px;
    font-size: 14px;
}
.home-topbar-actions { display: flex; gap: 10px; align-items: center; }

.home-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px 32px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* === Match en cours (live) === */
.home-current { flex-shrink: 0; }
.home-current-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(47, 212, 122, 0.16), rgba(47, 212, 122, 0.04));
    border: 1px solid rgba(47, 212, 122, 0.4);
    border-radius: 16px;
    align-items: center;
    box-shadow: 0 6px 24px rgba(47, 212, 122, 0.18);
    position: relative;
    overflow: hidden;
}
.home-current-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
    animation: liveSweep 2s linear infinite;
}
@keyframes liveSweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: var(--red);
    color: white;
    font-size: 10px; font-weight: 800;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: white;
    animation: pulseLive 1.2s ease-in-out infinite;
}
@keyframes pulseLive {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.hcc-info { line-height: 1.3; min-width: 0; }
.hcc-meta {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 10px;
}
.hcc-title {
    font-size: 22px; font-weight: 900;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.hcc-score-line {
    display: flex; align-items: center; gap: 14px;
    font-size: 28px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.hcc-score-line .vs { color: var(--text-mute); font-size: 18px; font-weight: 600; }
.hcc-stats {
    display: flex; gap: 16px;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 10px;
}
.hcc-resume-btn {
    height: 56px; padding: 0 28px;
    background: linear-gradient(135deg, var(--green), var(--green-d));
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 14px; font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 24px rgba(47, 212, 122, 0.3);
    transition: transform 0.1s, filter 0.15s;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
}
.hcc-resume-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.hcc-resume-btn svg { width: 18px; height: 18px; }

/* === Quick actions (Nouveau match / Entraînement) === */
.home-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    flex-shrink: 0;
}
.quick-create-btn {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px 26px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: transform 0.1s, border-color 0.18s, box-shadow 0.18s;
    color: var(--text);
}
.quick-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}
.quick-create-btn.match:hover         { border-color: rgba(47, 212, 122, 0.5); }
.quick-create-btn.match-friendly:hover { border-color: rgba(106, 166, 255, 0.5); }
.quick-create-btn.training:hover      { border-color: rgba(240, 165, 42, 0.5); }
.qcb-icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.quick-create-btn.match .qcb-icon {
    background: linear-gradient(135deg, var(--green), var(--green-d));
    color: white;
    box-shadow: 0 6px 20px rgba(47, 212, 122, 0.4);
}
.quick-create-btn.match-friendly .qcb-icon {
    background: linear-gradient(135deg, var(--accent), #4080e0);
    color: white;
    box-shadow: 0 6px 20px rgba(106, 166, 255, 0.4);
}
.quick-create-btn.training .qcb-icon {
    background: linear-gradient(135deg, var(--orange), var(--orange-d));
    color: white;
    box-shadow: 0 6px 20px rgba(240, 165, 42, 0.4);
}
.qcb-icon svg { width: 28px; height: 28px; }
.qcb-text { line-height: 1.3; min-width: 0; }
.qcb-title {
    font-size: 18px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.qcb-sub { font-size: 12px; color: var(--text-dim); }

/* === KPI saison row === */
.home-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    flex-shrink: 0;
}
.home-kpi {
    padding: 22px 22px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--border-soft);
    border-radius: 14px;
}
.hk-num {
    font-size: 30px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.hk-num.green   { color: var(--green); }
.hk-num.orange  { color: var(--orange); }
.hk-num.red     { color: var(--red); }
.hk-label {
    font-size: 11px; font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 12px;
}
.hk-sub {
    font-size: 12px;
    color: var(--text-mute);
    margin-top: 6px;
    line-height: 1.4;
}

/* === Section blocks === */
.home-section-block { flex-shrink: 0; }
.home-block-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px;
}
.home-block-title {
    font-size: 16px; font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.home-block-action {
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
}
.home-block-action:hover { text-decoration: underline; }

/* === Liste matchs === */
.match-list {
    display: flex; flex-direction: column;
    gap: 10px;
}
.match-row {
    display: grid;
    grid-template-columns: 90px auto 1fr auto auto;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    transition: border-color 0.15s, transform 0.1s;
}
.match-row:hover {
    border-color: rgba(106, 166, 255, 0.3);
    transform: translateX(2px);
}
/* Coloration spéciale par type */
.match-row.type-match-officiel { border-left: 4px solid var(--green); }
.match-row.type-match-amical   { border-left: 4px solid var(--accent); }
.match-row.type-entrainement   { border-left: 4px solid var(--orange); }

.mr-date {
    text-align: center;
    line-height: 1.1;
}
.mr-day {
    font-size: 24px; font-weight: 900;
    color: var(--text);
    line-height: 1;
}
.mr-month {
    font-size: 10px; font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}
.mr-time {
    font-size: 11px;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.mr-type-badge {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    width: fit-content;
}
.mr-type-badge.green   { background: rgba(47, 212, 122, 0.15); color: var(--green); border: 1px solid rgba(47, 212, 122, 0.3); }
.mr-type-badge.accent  { background: rgba(106, 166, 255, 0.15); color: var(--accent); border: 1px solid rgba(106, 166, 255, 0.3); }
.mr-type-badge.orange  { background: rgba(240, 165, 42, 0.15); color: var(--orange); border: 1px solid rgba(240, 165, 42, 0.3); }

.mr-info { line-height: 1.3; min-width: 0; }
.mr-title {
    font-size: 15px; font-weight: 700;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mr-meta {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    display: flex; gap: 12px; align-items: center;
}
.mr-meta-item { display: inline-flex; align-items: center; gap: 5px; }

.mr-result {
    text-align: center;
    line-height: 1.1;
    padding: 0 8px;
}
.mr-score {
    font-size: 22px; font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.mr-result-badge {
    font-size: 10px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
}
.mr-result-badge.win  { background: rgba(47, 212, 122, 0.18); color: var(--green); }
.mr-result-badge.loss { background: rgba(242, 84, 69, 0.18);  color: var(--red); }
.mr-result-badge.draw { background: rgba(240, 165, 42, 0.18); color: var(--orange); }
.mr-result-badge.live { background: var(--red); color: white; animation: pulseLive 1.2s ease-in-out infinite; }
.mr-positif {
    font-size: 13px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.mr-positif.green  { color: var(--green); }
.mr-positif.orange { color: var(--orange); }
.mr-positif.red    { color: var(--red); }

.mr-action {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    color: var(--text-dim);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.mr-action:hover { background: var(--accent); color: white; }
.mr-action svg { width: 16px; height: 16px; }

/* === Feed (À découvrir) === */
.home-feed { flex-shrink: 0; }
.home-feed-head { margin-bottom: 14px; }
.feed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.feed-card {
    padding: 22px 24px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    transition: transform 0.18s, border-color 0.18s;
}
.feed-card:hover {
    transform: translateY(-2px);
    border-color: rgba(106, 166, 255, 0.3);
}
.fc-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 9px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
}
.fc-tag.green  { background: rgba(47, 212, 122, 0.15); color: var(--green); }
.fc-tag.orange { background: rgba(240, 165, 42, 0.15); color: var(--orange); }
.fc-tag.accent { background: rgba(106, 166, 255, 0.15); color: var(--accent); }
.feed-card h3 {
    font-size: 16px; font-weight: 800;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 10px;
}
.feed-card p {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
}
.fc-meta {
    margin-top: 14px;
    font-size: 11px;
    color: var(--text-mute);
    font-weight: 600;
}

/* === Modal Nouveau match (sélection type) === */
.overlay-large { max-width: 820px; }
.new-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
}
.new-type-card {
    padding: 22px 20px;
    background: var(--bg-3);
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.new-type-card input { display: none; }
.new-type-card:has(input:checked) {
    border-color: var(--accent);
    background: rgba(106, 166, 255, 0.06);
}
.ntc-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 14px;
}
.ntc-icon.green  { background: rgba(47, 212, 122, 0.18); }
.ntc-icon.accent { background: rgba(106, 166, 255, 0.18); }
.ntc-icon.orange { background: rgba(240, 165, 42, 0.18); }
.ntc-name {
    font-size: 16px; font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}
.ntc-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 14px;
}
.ntc-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 9px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.ntc-pill.green  { background: rgba(47, 212, 122, 0.20); color: var(--green); }
.ntc-pill.accent { background: rgba(106, 166, 255, 0.20); color: var(--accent); }
.ntc-pill.orange { background: rgba(240, 165, 42, 0.20); color: var(--orange); }

/* Mode clair adaptations */
[data-theme="light"] .home-current-card {
    background: linear-gradient(135deg, rgba(22,163,74,0.12), rgba(22,163,74,0.03));
    border-color: rgba(22,163,74,0.4);
}
[data-theme="light"] .quick-create-btn,
[data-theme="light"] .home-kpi,
[data-theme="light"] .match-row,
[data-theme="light"] .feed-card {
    background: var(--bg-1);
    box-shadow: 0 2px 8px rgba(15,25,50,0.06);
}
[data-theme="light"] .new-type-card {
    background: var(--bg-3);
}

/* Responsive */
@media (max-width: 1180px) {
    .home-quick { grid-template-columns: 1fr; }
    .home-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .feed-grid { grid-template-columns: 1fr; }
    .home-current-card { grid-template-columns: 1fr; gap: 14px; }
    .new-type-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GAMEHAND — Mode match rapide style manette / Game Boy
   ============================================================ */
.gamehand-app .gh-section {
    grid-column: 2 / 4;        /* Prend la place du main + right-panel */
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 0;
    overflow: hidden;
    padding: 12px 14px;
}
.gamehand-app .right-panel { display: none; } /* Pas de right-panel ici */

/* Topbar Gamehand compact */
.gh-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 10px 14px;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    margin-bottom: 12px;
}
.gh-team {
    display: flex; align-items: center; gap: 14px;
    min-width: 0;
}
.gh-team.away { justify-self: end; flex-direction: row-reverse; }
.gh-team .team-badge { width: 48px; height: 48px; }
.gh-team-info { line-height: 1.2; min-width: 0; }
.gh-team.away .gh-team-info { text-align: right; }
.gh-team-name {
    font-size: 12px; font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 160px;
}
.gh-score {
    font-size: 32px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.gh-center { text-align: center; }
.gh-period {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700;
    color: var(--text);
}
.gh-period .gh-time {
    color: var(--green);
    font-variant-numeric: tabular-nums;
    font-size: 18px;
}
.gh-pause {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: rgba(47, 212, 122, 0.15);
    border: 1px solid rgba(47, 212, 122, 0.4);
    color: var(--green);
}
.gh-mode {
    margin-top: 4px;
    font-size: 10px; font-weight: 800;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ÉCRAN — LCD/console style */
.gh-screen {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a1f2e 0%, #0d1119 100%);
    border: 3px solid #2c3447;
    border-radius: 18px;
    padding: 14px;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 8px 32px rgba(0, 0, 0, 0.4);
    margin-bottom: 14px;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}
.gh-screen-frame {
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 4px),
        radial-gradient(ellipse at top, rgba(47, 212, 122, 0.06) 0%, transparent 70%),
        #0a0e15;
    border-radius: 10px;
    border: 1px solid rgba(47, 212, 122, 0.15);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.gh-screen-header {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(47, 212, 122, 0.25);
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #6fdba0;
}
.gh-screen-tab {
    padding: 4px 12px;
    border: 1px solid rgba(47, 212, 122, 0.3);
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 1px;
    transition: background 0.15s, color 0.15s;
}
.gh-screen-tab.active {
    background: rgba(47, 212, 122, 0.18);
    color: var(--green);
    border-color: rgba(47, 212, 122, 0.6);
    box-shadow: 0 0 12px rgba(47, 212, 122, 0.25);
}
.gh-screen-status {
    margin-left: auto;
    font-size: 13px;
    color: rgba(47, 212, 122, 0.7);
    letter-spacing: 1.5px;
}

.gh-screen-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    min-height: 0;
}
.gh-row {
    display: grid;
    grid-template-columns: 28px 30px 1fr 50px 60px 30px 50px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: 'VT323', monospace;
    font-size: 18px;
    color: rgba(231, 235, 220, 0.85);
    transition: background 0.1s;
}
.gh-row.bench { opacity: 0.4; }
.gh-row.selected {
    background: linear-gradient(90deg, rgba(47, 212, 122, 0.20) 0%, rgba(47, 212, 122, 0.05) 100%);
    border-color: rgba(47, 212, 122, 0.7);
    box-shadow: 0 0 0 1px rgba(47, 212, 122, 0.5), 0 0 18px rgba(47, 212, 122, 0.20);
    color: #b6f7c5;
}
.gh-row-cursor {
    color: var(--green);
    font-weight: 700;
    text-align: center;
    visibility: hidden;
}
.gh-row.selected .gh-row-cursor { visibility: visible; animation: blinkCursor 0.9s steps(2) infinite; }
@keyframes blinkCursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.2; } }
.gh-row-num {
    font-weight: 700;
    color: var(--accent);
    font-family: 'VT323', monospace;
    font-size: 22px;
}
.gh-row.selected .gh-row-num { color: var(--green); }
.gh-row-name {
    font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gh-row-pos {
    font-size: 13px;
    color: rgba(231, 235, 220, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.gh-row-pct {
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 18px;
}
.gh-row-pct.green   { color: var(--green); }
.gh-row-pct.orange  { color: var(--orange); }
.gh-row-pct.red     { color: var(--red); }
.gh-row-pct.neutral { color: rgba(231, 235, 220, 0.4); }
.gh-row-state {
    text-align: center;
    font-size: 14px;
    color: rgba(231, 235, 220, 0.5);
    font-family: 'Press Start 2P', cursive;
}
.gh-row-state.green { color: var(--green); }
.gh-row-state.orange { color: var(--orange); }
.gh-row-state.red { color: var(--red); }
.gh-row-counter {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-size: 14px;
    color: rgba(231, 235, 220, 0.55);
}

.gh-screen-footer {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(47, 212, 122, 0.25);
    display: grid;
    grid-template-columns: repeat(4, 70px) 1fr;
    gap: 14px;
    align-items: center;
    font-family: 'VT323', monospace;
}
.gh-info-block {
    text-align: center;
    line-height: 1.1;
}
.gh-info-label {
    font-size: 10px;
    color: rgba(47, 212, 122, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.gh-info-val {
    font-size: 22px; font-weight: 700;
    color: #6fdba0;
    margin-top: 2px;
}
.gh-info-val.green { color: var(--green); }
.gh-info-val.red   { color: var(--red); }
.gh-info-last {
    text-align: right;
    font-size: 14px;
    color: rgba(47, 212, 122, 0.6);
    font-family: 'VT323', monospace;
    letter-spacing: 0.5px;
}

.gh-screen-power {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.04);
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 2px;
}
.gh-power-led {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px var(--green);
    animation: blinkLed 2.5s ease-in-out infinite;
}
@keyframes blinkLed {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--green); }
    50%      { opacity: 0.6; box-shadow: 0 0 4px var(--green); }
}

/* MANETTE */
.gh-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    padding: 8px 0;
}
.gh-pad-label {
    text-align: center;
    font-size: 9px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.gh-pad-label.right { text-align: center; }

/* D-PAD */
.gh-dpad-wrap {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 6px;
}
.gh-dpad {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    gap: 0;
    background: linear-gradient(135deg, #1a2238 0%, #0d1119 100%);
    border-radius: 50%;
    width: 160px;
    height: 160px;
    padding: 5px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        inset 0 0 0 2px rgba(255, 255, 255, 0.05);
    position: relative;
}
.gh-dpad::before {
    content: '';
    position: absolute;
    inset: 18px;
    background:
        linear-gradient(0deg, transparent 33%, var(--bg-3) 33% 67%, transparent 67%),
        linear-gradient(90deg, transparent 33%, var(--bg-3) 33% 67%, transparent 67%);
    border-radius: 6px;
}
.gh-dpad-btn {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.1s, transform 0.05s;
    position: relative;
    z-index: 1;
}
.gh-dpad-btn:active {
    transform: scale(0.92);
    filter: brightness(1.4);
}
.gh-dpad-btn.up    { grid-column: 2; grid-row: 1; }
.gh-dpad-btn.left  { grid-column: 1; grid-row: 2; }
.gh-dpad-btn.right { grid-column: 3; grid-row: 2; }
.gh-dpad-btn.down  { grid-column: 2; grid-row: 3; }
.gh-dpad-center {
    grid-column: 2; grid-row: 2;
    text-align: center;
    line-height: 50px;
    color: var(--accent);
    font-size: 18px;
    z-index: 0;
}

.gh-pad-hints {
    display: flex; flex-direction: column;
    gap: 2px;
    text-align: center;
}
.gh-hint {
    font-size: 10px;
    color: var(--text-mute);
    font-weight: 600;
    letter-spacing: 0.4px;
}

/* UTIL buttons (centre) */
.gh-util {
    display: flex; flex-direction: column;
    gap: 10px;
    align-items: center;
}
.gh-util-btn {
    width: 110px;
    height: 50px;
    border-radius: 24px;
    background: linear-gradient(180deg, #2a3448 0%, #1a2030 100%);
    border: 1px solid var(--border);
    color: var(--text);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px;
    cursor: pointer;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.06s, filter 0.15s;
    padding: 4px 10px;
}
.gh-util-btn:active { transform: scale(0.96); filter: brightness(1.2); }
.gh-util-icon {
    font-size: 16px; font-weight: 700;
    color: var(--text-dim);
    line-height: 1;
}
.gh-util-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--accent);
    letter-spacing: 1px;
}
.gh-util-hint {
    font-size: 9px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Boutons A/B */
.gh-action-btns {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 6px;
}
.gh-ab-cluster {
    display: flex;
    gap: 14px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #1a2238 0%, #0d1119 100%);
    border-radius: 80px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        inset 0 0 0 2px rgba(255, 255, 255, 0.05);
    transform: rotate(-15deg);
    margin: 0 16px;
}
.gh-btn-a, .gh-btn-b {
    width: 90px; height: 90px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px;
    color: white;
    font-weight: 800;
    transition: transform 0.06s, filter 0.15s, box-shadow 0.15s;
    position: relative;
    transform: rotate(15deg);  /* compense la rotation du cluster */
}
.gh-btn-a {
    background: radial-gradient(circle at 30% 30%, #4ae18d 0%, #1ea65d 70%, #0d6a3a 100%);
    box-shadow:
        0 6px 20px rgba(47, 212, 122, 0.45),
        inset 0 -3px 8px rgba(0, 0, 0, 0.3),
        inset 0 3px 0 rgba(255, 255, 255, 0.25);
}
.gh-btn-b {
    background: radial-gradient(circle at 30% 30%, #ff7466 0%, #b03a2e 70%, #6e2014 100%);
    box-shadow:
        0 6px 20px rgba(242, 84, 69, 0.45),
        inset 0 -3px 8px rgba(0, 0, 0, 0.3),
        inset 0 3px 0 rgba(255, 255, 255, 0.25);
}
.gh-btn-a:active, .gh-btn-b:active {
    transform: rotate(15deg) scale(0.92) translateY(2px);
    filter: brightness(1.2);
}
.gh-btn-letter {
    font-family: 'Press Start 2P', cursive;
    font-size: 24px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1;
}
.gh-btn-sign {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    margin-top: 3px;
    opacity: 0.85;
}
.gh-btn-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.6px;
    margin-top: 2px;
    opacity: 0.85;
    text-transform: uppercase;
}

/* Animation feedback quand on appuie programmatiquement */
.gh-btn-a.pulse, .gh-btn-b.pulse {
    animation: ghBtnPulse 0.25s ease-out;
}
@keyframes ghBtnPulse {
    0%   { transform: rotate(15deg) scale(0.92); filter: brightness(1.5); }
    100% { transform: rotate(15deg) scale(1);    filter: brightness(1); }
}
.gh-dpad-btn.pulse {
    animation: ghPadPulse 0.2s ease-out;
}
@keyframes ghPadPulse {
    0%   { background: rgba(106, 166, 255, 0.4); }
    100% { background: transparent; }
}

/* Bandeau raccourcis clavier */
.gh-keys-hint {
    margin-top: 14px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    font-size: 11px;
    color: var(--text-dim);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    justify-content: center;
}
.gh-keys-section {
    color: var(--accent);
    font-weight: 700;
    margin-right: 8px;
}
.gh-key {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: 'VT323', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    box-shadow: 0 1px 0 rgba(0,0,0,0.3);
    margin: 0 2px;
}
.gh-key.gh-key-a { color: var(--green); border-color: rgba(47, 212, 122, 0.5); }
.gh-key.gh-key-b { color: var(--red); border-color: rgba(242, 84, 69, 0.5); }

/* Menu overlay */
.gh-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 4px 0;
}
.gh-menu-item {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px; font-weight: 700;
    transition: background 0.15s, border-color 0.15s;
}
.gh-menu-item svg { width: 20px; height: 20px; color: var(--text-dim); }
.gh-menu-item:hover {
    background: rgba(106, 166, 255, 0.08);
    border-color: rgba(106, 166, 255, 0.3);
}

/* Mode CLAIR — adaptations Gamehand */
[data-theme="light"] .gh-screen {
    background: linear-gradient(180deg, #c4d4b3 0%, #9bb389 100%);
    border-color: #6b7e5d;
    box-shadow:
        inset 0 0 60px rgba(50, 80, 30, 0.3),
        inset 0 0 0 1px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .gh-screen-frame {
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(50,80,30,0.04) 2px, rgba(50,80,30,0.04) 4px),
        #b9cda8;
    border-color: rgba(50, 80, 30, 0.25);
}
[data-theme="light"] .gh-row {
    color: #1a2810;
}
[data-theme="light"] .gh-row.selected {
    background: linear-gradient(90deg, rgba(50, 80, 30, 0.20) 0%, rgba(50, 80, 30, 0.06) 100%);
    border-color: rgba(50, 80, 30, 0.6);
    color: #0a1a02;
    box-shadow: 0 0 0 1px rgba(50, 80, 30, 0.5), 0 0 18px rgba(50, 80, 30, 0.20);
}
[data-theme="light"] .gh-row-pos,
[data-theme="light"] .gh-row-state,
[data-theme="light"] .gh-row-counter {
    color: rgba(26, 40, 16, 0.6);
}
[data-theme="light"] .gh-screen-header { color: #2c4416; }
[data-theme="light"] .gh-screen-status,
[data-theme="light"] .gh-info-label { color: rgba(26, 40, 16, 0.5); }
[data-theme="light"] .gh-info-val { color: #1a2810; }
[data-theme="light"] .gh-info-last { color: rgba(26, 40, 16, 0.55); }
[data-theme="light"] .gh-screen-tab.active {
    background: rgba(22, 163, 74, 0.18);
    color: var(--green-d);
    border-color: rgba(22, 163, 74, 0.6);
}

/* ============================================================
   MATCH — Nouvelle disposition (T/B à gauche, 4 boutons ATT/DEF à droite)
   ============================================================ */

/* Bandeau dernière action + toggle mode */
.match-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    margin-bottom: 4px;
    flex-shrink: 0;
}
@media (max-width: 1280px) {
    .match-toolbar { padding: 4px 8px; gap: 8px; }
    .lab-label { display: none; }
    .mmt-btn { padding: 0 10px; height: 32px; font-size: 11px; }
}
.last-action-banner {
    flex: 1;
    display: flex; align-items: center; gap: 14px;
    padding: 8px 14px;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    min-width: 0;
}
.lab-section {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
.lab-section-action { flex: 1; min-width: 0; }
.lab-section-team   { flex-shrink: 0; }
.lab-divider {
    width: 1px; align-self: stretch;
    background: var(--border-soft);
    margin: 4px 0;
}

/* Tendance équipe — pastille */
.ttc-arrow {
    font-size: 18px;
    font-weight: 900;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.ttc-arrow.up   { color: var(--green);  background: rgba(47, 212, 122, 0.14); }
.ttc-arrow.down { color: var(--red);    background: rgba(242, 84, 69, 0.14); }
.ttc-arrow.flat { color: var(--text-mute); }

.ttc-pct {
    font-size: 16px; font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.ttc-pct.green   { color: var(--green); }
.ttc-pct.orange  { color: var(--orange); }
.ttc-pct.red     { color: var(--red); }
.ttc-pct.neutral { color: var(--text-dim); }

.ttc-count {
    font-size: 11px; font-weight: 700;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

/* Sur petits écrans (≤ 1180px) on cache le label "Dernière action :" et "Tendance équipe :" */
@media (max-width: 1180px) {
    .last-action-banner .lab-label { display: none; }
    .last-action-banner { gap: 10px; padding: 6px 10px; }
    .ttc-count { display: none; }
}
@media (max-width: 900px) {
    .ttc-arrow { width: 20px; height: 20px; font-size: 14px; }
    .ttc-pct { font-size: 13px; }
}
@media (max-width: 720px) {
    /* Sur mobile la toolbar est en colonne -> on remet les deux blocs côte à côte horizontalement */
    .last-action-banner { flex-wrap: wrap; gap: 8px; }
    .lab-divider { display: none; }
    .lab-section-action { flex: 1 1 100%; }
    .lab-section-team   { flex: 1 1 100%; justify-content: flex-end; }
}
.lab-label {
    font-size: 10px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    flex-shrink: 0;
}
.lab-value {
    flex: 1;
    font-size: 13px; font-weight: 700;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lab-value .sign-plus  { color: var(--green); font-weight: 900; }
.lab-value .sign-minus { color: var(--red);   font-weight: 900; }
.lab-value .phase-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 6px;
}
.lab-value .phase-tag.attack  { background: rgba(106, 166, 255, 0.18); color: var(--accent); }
.lab-value .phase-tag.defense { background: rgba(139, 107, 242, 0.18); color: var(--violet); }
/* Bouton ANNULER : action fréquente en saisie temps réel, doit être très repérable */
.lab-undo {
    height: 40px; padding: 0 18px;
    background: linear-gradient(180deg, rgba(240, 165, 42, 0.22), rgba(240, 165, 42, 0.10));
    border: 1.5px solid rgba(240, 165, 42, 0.7);
    border-radius: 10px;
    color: #ffb547;
    font-size: 13px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.08s, box-shadow 0.15s;
    box-shadow:
        0 2px 12px rgba(240, 165, 42, 0.30),
        inset 0 0 0 1px rgba(255, 181, 71, 0.18);
    flex-shrink: 0;
}
.lab-undo:hover {
    filter: brightness(1.1);
    box-shadow:
        0 4px 16px rgba(240, 165, 42, 0.40),
        inset 0 0 0 1px rgba(255, 181, 71, 0.30);
}
.lab-undo:active { transform: scale(0.96); }
.lab-undo svg { width: 16px; height: 16px; stroke-width: 2.5; }
[data-theme="light"] .lab-undo {
    background: linear-gradient(180deg, #fed7aa, #fdba74);
    border-color: #ea580c;
    color: #7c2d12;
    box-shadow: 0 2px 12px rgba(234, 88, 12, 0.30);
}

.match-mode-toggle {
    display: flex;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 3px;
    flex-shrink: 0;
}
.mmt-btn {
    height: 36px; padding: 0 14px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--text-dim);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mmt-btn svg { width: 14px; height: 14px; }
.mmt-btn:hover { color: var(--text); }
.mmt-btn.active {
    background: linear-gradient(180deg, rgba(106,166,255,0.20), rgba(106,166,255,0.06));
    color: #92bdff;
    box-shadow: 0 1px 3px rgba(106, 166, 255, 0.2);
}

/* Pastille Terrain/Banc à GAUCHE — un seul mot reflète l'état */
.tb-pill {
    width: 100%;
    max-width: 78px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s, transform 0.08s, box-shadow 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-pill.on-field {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%);
    border-color: var(--green-d);
    box-shadow: 0 2px 6px rgba(47, 212, 122, 0.25);
}
.tb-pill.on-bench {
    background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border-color: var(--border);
    color: var(--text-mute);
    box-shadow: none;
}
.tb-pill:hover { filter: brightness(1.12); }
.tb-pill:active { transform: scale(0.95); }

/* Mode clair */
[data-theme="light"] .tb-pill.on-bench {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #64748b;
}

/* Cellule nom : prénom en gras + nom en sous-titre */
.cell-name-v2 {
    display: flex; align-items: center; gap: 10px;
    overflow: hidden;
    cursor: pointer;
}
.cell-name-v2 .name-text {
    line-height: 1.2;
    overflow: hidden;
}
.cell-name-v2 .name-firstname-line {
    display: flex; align-items: baseline; gap: 8px;
    min-width: 0;
}
.cell-name-v2 .name-firstname {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}
.cell-name-v2 .name-playtime {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 1px 6px;
    line-height: 1.3;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}
.player-row.bench .cell-name-v2 .name-playtime {
    opacity: 0.55;
}
[data-theme="light"] .cell-name-v2 .name-playtime {
    background: rgba(0,0,0,0.04);
    color: #475569;
}
.cell-name-v2 .name-lastname {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 4 boutons d'action — sur UNE seule ligne : ATT+ / ATT− | DÉF+ / DÉF− */
.cell-actions-4 {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    height: 44px;
}
.a4-sep {
    width: 1px;
    background: var(--border-soft);
    margin: 4px 4px;
    flex-shrink: 0;
}

.act4-btn {
    flex: 1;
    min-width: 0;
    height: 100%;
    border-radius: 8px;
    border: 1px solid transparent;
    color: white;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: transform 0.08s, filter 0.15s, box-shadow 0.15s;
    line-height: 1;
}
.act4-btn .a4-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    opacity: 0.85;
    text-transform: uppercase;
}
.act4-btn .a4-sign {
    font-size: 18px;
    font-weight: 900;
}

/* Sur écrans iPad/laptop larges : boutons plus généreux */
@media (min-width: 1100px) {
    .cell-actions-4 { gap: 8px; height: 46px; }
    .act4-btn .a4-sign { font-size: 20px; }
}
@media (min-width: 1440px) {
    .act4-btn .a4-tag { font-size: 10px; letter-spacing: 0.8px; }
    .act4-btn .a4-sign { font-size: 22px; }
}

/* Header colonne actions : aligner sur la ligne, et masquer le sep */
.players-header .col-actions4 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
}
.act4-btn:active { transform: scale(0.94); filter: brightness(1.18); }
.act4-btn[disabled] { opacity: 0.22; pointer-events: none; }

.act4-btn.attack.plus  {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%);
}
.act4-btn.attack.minus {
    background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
}
.act4-btn.defense.plus {
    background: linear-gradient(180deg, #6aa6ff 0%, #4080e0 100%);
}
.act4-btn.defense.minus {
    background: linear-gradient(180deg, #b88528 0%, #8a611c 100%);
}

/* === GARDIENS — distinction visuelle === */
.player-row.gk {
    background: linear-gradient(180deg, rgba(246, 198, 81, 0.10) 0%, rgba(246, 198, 81, 0.03) 100%);
    border-color: rgba(246, 198, 81, 0.30);
}
.player-row.gk .cell-pos {
    background: rgba(246, 198, 81, 0.18);
    color: #f6c651;
    border-color: rgba(246, 198, 81, 0.4);
}
.player-row.gk .cell-num {
    background: linear-gradient(135deg, #f6c651, #b88528);
    box-shadow: 0 2px 8px rgba(246, 198, 81, 0.4);
    color: #2c1d05;
}
.player-row.gk-last-sep {
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 2px dashed rgba(246, 198, 81, 0.25);
}

/* ============================================================
   MODE GRILLE
   ============================================================ */
.players-grid-board {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 6px 12px 4px;
}
.grid-info-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.gib-label {
    font-size: 10px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.gib-name {
    font-size: 16px;
}
.gib-name .firstname { font-weight: 900; color: var(--text); }
.gib-name .lastname { font-weight: 600; color: var(--text-dim); margin-left: 6px; text-transform: uppercase; letter-spacing: 0.4px; font-size: 13px; }
.gib-stats {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: minmax(120px, 1fr);
    gap: 8px;
    overflow-y: auto;
    padding: 4px;
    flex: 1;
    min-height: 0;
    align-content: start;
}
@media (max-width: 1280px) {
    .players-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (max-width: 1024px) {
    .players-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
.gp-cell {
    display: flex; flex-direction: column;
    padding: 12px 10px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1.5px solid var(--border-soft);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.08s;
    min-height: 110px;
    position: relative;
}
.gp-cell:hover { border-color: rgba(106, 166, 255, 0.25); }
.gp-cell:active { transform: scale(0.98); }
.gp-cell.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(106, 166, 255, 0.5), 0 0 18px rgba(106, 166, 255, 0.30);
    background: linear-gradient(180deg, rgba(106, 166, 255, 0.10), var(--bg-1));
}
.gp-cell.bench { opacity: 0.55; }
.gp-cell.gk { border-color: rgba(246, 198, 81, 0.4); }
.gp-cell.gk.selected { border-color: #f6c651; box-shadow: 0 0 0 2px rgba(246, 198, 81, 0.55), 0 0 18px rgba(246, 198, 81, 0.30); }

.gp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.gp-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--violet-d));
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: white;
    flex-shrink: 0;
}
.gp-cell.gk .gp-num {
    background: linear-gradient(135deg, #f6c651, #b88528);
    color: #2c1d05;
}
.gp-pos {
    font-size: 9px; font-weight: 800;
    padding: 2px 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}
.gp-cell.gk .gp-pos { background: rgba(246, 198, 81, 0.18); color: #f6c651; }

.gp-name { line-height: 1.2; overflow: hidden; }
.gp-firstname {
    font-size: 13px; font-weight: 800;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-lastname {
    font-size: 10px; font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gp-mini-dots {
    display: flex; gap: 2px;
    margin: 6px 0 2px;
}
.gp-mini-dot {
    width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
}
.gp-mini-dot.plus  { background: var(--green); }
.gp-mini-dot.minus { background: var(--red); }
.gp-mini-dot.empty { background: rgba(255,255,255,0.06); }

/* Nombre d'actions dans la fenêtre glissante (lecture de fiabilité) */
.gp-win-count {
    display: inline-flex; align-items: baseline; gap: 2px;
    font-size: 10px; font-weight: 700;
    color: var(--text-mute);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.gp-win-count .gwc-num {
    color: var(--accent);
    font-weight: 900;
    font-size: 12px;
}
.gp-win-count .gwc-tot {
    color: var(--text-mute);
}
.gp-win-count .gwc-lbl {
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 8.5px;
    color: var(--text-mute);
    font-weight: 700;
}
[data-theme="light"] .gp-win-count .gwc-num { color: var(--accent); }

.gp-stats { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.gp-pct {
    font-size: 16px; font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.gp-pct.green   { color: var(--green); }
.gp-pct.orange  { color: var(--orange); }
.gp-pct.red     { color: var(--red); }
.gp-pct.neutral { color: var(--text-mute); }
.gp-trend {
    width: 22px; height: 18px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
}
.gp-trend.up    { background: rgba(47, 212, 122, 0.18); color: var(--green); }
.gp-trend.down  { background: rgba(242, 84, 69, 0.18);  color: var(--red); }
.gp-trend.flat  { background: rgba(240, 165, 42, 0.15); color: var(--orange); }

.gp-tb-indicator {
    position: absolute;
    top: 8px; right: 8px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
}
.gp-cell.bench .gp-tb-indicator {
    background: var(--text-mute);
    box-shadow: none;
}

.gp-alert-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    border: 2px solid var(--red);
    animation: gpAlert 1.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes gpAlert {
    0%, 100% { opacity: 0.4; box-shadow: 0 0 8px rgba(242, 84, 69, 0.3); }
    50%      { opacity: 1;   box-shadow: 0 0 18px rgba(242, 84, 69, 0.6); }
}

/* Dock 4 boutons en bas du mode grille */
.grid-action-dock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px 4px 6px;
    flex-shrink: 0;
}
.gad-section {
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}
.gad-section.attack  { border-color: rgba(106, 166, 255, 0.3); }
.gad-section.defense { border-color: rgba(139, 107, 242, 0.3); }
.gad-label {
    text-align: center;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.gad-section.attack  .gad-label { color: var(--accent); }
.gad-section.defense .gad-label { color: var(--violet); }
.gad-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.act-big {
    height: 56px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: white;
    font-size: 28px; font-weight: 900;
    cursor: pointer;
    transition: transform 0.08s, filter 0.15s;
}
.act-big:active { transform: scale(0.95); filter: brightness(1.18); }
.act-big[disabled] { opacity: 0.3; pointer-events: none; }
.gad-section.attack .act-big.plus  {
    background: linear-gradient(180deg, var(--green), var(--green-d));
    box-shadow: 0 6px 18px rgba(47, 212, 122, 0.30);
}
.gad-section.attack .act-big.minus {
    background: linear-gradient(180deg, var(--red), var(--red-d));
    box-shadow: 0 6px 18px rgba(242, 84, 69, 0.30);
}
.gad-section.defense .act-big.plus {
    background: linear-gradient(180deg, #6aa6ff, #4080e0);
    box-shadow: 0 6px 18px rgba(106, 166, 255, 0.30);
}
.gad-section.defense .act-big.minus {
    background: linear-gradient(180deg, #b88528, #8a611c);
    box-shadow: 0 6px 18px rgba(184, 133, 40, 0.25);
}

/* Adaptations iPad standard 1180×820 (autres pages — pas la table joueurs) */
@media (max-width: 1180px) {
    .app { grid-template-columns: 96px 1fr 280px; }
    /* table joueurs : géré dans la section RESPONSIVE — MATCH VIEW plus bas */
    .team-grid { grid-template-columns: repeat(3, 1fr); }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-stats-row { grid-template-columns: repeat(3, 1fr); }
    .stats-charts-row { grid-template-columns: 1fr; }
    .stats-bottom-row { grid-template-columns: 1fr; }
    .rapport-row { grid-template-columns: 1fr; }
    .insights-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .affiliate-tiers { grid-template-columns: 1fr; }
    .about-info { grid-template-columns: 1fr; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .rgpd-rights-grid { grid-template-columns: 1fr; }
    .rgpd-data-item { grid-template-columns: 1fr; grid-template-areas: "cat" "desc" "purpose" "retain"; }
    .subproc-row { grid-template-columns: 1fr; gap: 4px; }
    .current-plan-card { grid-template-columns: 1fr; }
    .cp-right { min-width: 0; }
    .rgpd-contact-row { grid-template-columns: 1fr; gap: 4px; }
    .usage-stats { grid-template-columns: repeat(2, 1fr); }
    .stripe-banner { grid-template-columns: 1fr; gap: 14px; }
    .stripe-logo { border-right: none; border-bottom: 1px solid rgba(99, 91, 255, 0.25); padding: 0 0 12px; flex-direction: row; }
    .stripe-features { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE — MATCH VIEW (iPad, mobile)
   ============================================================ */

/* iPad landscape (≤ 1180px) : on raccourcit le chrono et la topbar */
@media (max-width: 1180px) {
    .topbar { gap: 16px; padding: 12px 8px 14px; }
    .chrono-card-top { min-width: 200px; padding: 10px 14px; gap: 8px; }
    .chrono-big-btn { width: 50px; height: 50px; font-size: 22px; }
    .chrono-time-big { font-size: 24px; }
    .scoreboard { gap: 18px; }
    .score-sep { font-size: 28px; }
    .team-badge { width: 48px; height: 48px; }
    .end-match-btn { padding: 10px 14px; font-size: 11px; }
    .nav-item { padding: 10px 4px; }
    .nav-item span { font-size: 9px; }
}

/* iPad portrait & petits écrans (≤ 1024px) */
@media (max-width: 1024px) {
    /* Sidebar : on rétrécit et on garde icones + labels */
    .app,
    .app:not(:has(.right-panel)) { grid-template-columns: 76px 1fr; }
    .sidebar { padding: 12px 4px 12px; }
    .brand-mark { width: 36px; height: 36px; }
    .brand-line2 { display: none; }
    .nav-item { padding: 8px 2px; gap: 2px; }
    .nav-icon { width: 18px; height: 18px; }
    .nav-item span { font-size: 8.5px; letter-spacing: 0; }
    .user-pill { padding: 6px; gap: 6px; }
    .user-avatar { width: 24px; height: 24px; font-size: 9px; }
    .user-info { display: none; }

    /* Topbar : sur 2 rangées si nécessaire */
    .topbar {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding: 10px 6px 12px;
    }
    .match-category { font-size: 10px; letter-spacing: 1.6px; }
    .topbar-actions { gap: 8px; }

    /* Toolbar : empile bandeau + toggle si trop serré */
    .match-toolbar { gap: 8px; padding: 4px 6px; }
    .lab-label { display: none; }

    /* Lignes joueurs : timeline 30 dots préservée (vue dense), tendance cachée */
    .players-header,
    .player-row {
        grid-template-columns: 60px 26px minmax(80px, 130px) 32px minmax(100px, 140px) 38px 0 minmax(200px, 1fr);
        gap: 5px;
        padding: 0 5px;
    }
    .col-trend, .cell-trend { display: none; }
    .col-pos { font-size: 9px; }
    .cell-pos { font-size: 9px; padding: 3px 5px; }
    .cell-name-v2 .name-firstname { font-size: 13px; }
    .cell-name-v2 .name-lastname { font-size: 10px; }
    .cell-num { width: 28px; height: 28px; font-size: 13px; }
    .tb-pill { max-width: 60px; height: 28px; font-size: 9px; padding: 0 4px; letter-spacing: 0.4px; }

    /* Footer : compacte */
    .bottom-tabs { padding: 8px 4px; }
    .tab-btn { height: 34px; padding: 0 10px; font-size: 11px; }
    .undo-btn { height: 34px; padding: 0 12px; font-size: 11px; }
}

/* iPad portrait strict (≤ 900px) */
@media (max-width: 900px) {
    /* Sidebar devient barre verticale d'icones seulement */
    .app,
    .app:not(:has(.right-panel)) { grid-template-columns: 60px 1fr; }
    .sidebar-brand { padding: 4px 0 12px; }
    .brand-line1 { display: none; }
    .nav-item span { display: none; }
    .nav-item { padding: 10px 4px; }
    .nav-icon { width: 22px; height: 22px; }
    .sidebar-foot { padding-top: 8px; }
    .user-pill { justify-content: center; }

    /* Topbar : on cache la catégorie et on garde scoreboard + chrono compact */
    .match-category { display: none; }
    .topbar { padding: 8px 4px 10px; gap: 8px; }
    .chrono-card-top { min-width: 150px; padding: 8px 10px; gap: 6px; }
    .chrono-card-title { display: none; }
    .chrono-big-btn { width: 42px; height: 42px; font-size: 18px; }
    .chrono-time-big { font-size: 20px; }
    .chrono-period-label { font-size: 9px; }
    .scoreboard { gap: 12px; }
    .score-sep { font-size: 22px; }

    /* Player rows compactes — timeline 30 dots toujours visible */
    .players-header,
    .player-row {
        grid-template-columns: 52px 24px minmax(70px, 110px) 30px minmax(85px, 120px) 34px 0 minmax(180px, 1fr);
        gap: 4px;
        padding: 0 4px;
    }
    .act4-btn .a4-tag { font-size: 8px; }
    .act4-btn .a4-sign { font-size: 16px; }
    /* Timeline encore plus compacte à 900px */
    .cell-timeline-30 { padding: 2px 4px !important; gap: 1.5px !important; }
    .cell-timeline-30 .timeline-dot { max-width: 8px; max-height: 8px; }

    /* Mode grille : moins de colonnes */
    .players-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .grid-action-dock { padding: 8px 10px; gap: 8px; }
    .gad-section { padding: 8px 10px; }
    .gad-label { font-size: 10px; }
    .act-big { height: 40px; font-size: 22px; }
}

/* Mobile (≤ 720px) : layout vertical, sidebar transformée en navbar du bas */
@media (max-width: 720px) {
    .app,
    .app:not(:has(.right-panel)) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 60px;
    }
    .sidebar {
        grid-row: 2;
        grid-column: 1;
        flex-direction: row;
        padding: 4px 8px;
        border-top: 1px solid var(--border);
        border-right: none;
        align-items: center;
    }
    .sidebar-brand,
    .sidebar-foot { display: none; }
    .sidebar-nav {
        flex-direction: row;
        justify-content: space-around;
        flex: 1;
        gap: 0;
    }
    .nav-item { flex: 1; padding: 6px 2px; gap: 2px; }
    .nav-icon { width: 20px; height: 20px; }

    /* Le main prend toute la hauteur restante au-dessus */
    .main { padding: 0 6px; }

    /* Topbar : empile chrono + scoreboard verticalement */
    .topbar {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 6px 4px 8px;
    }
    .topbar-actions { flex-direction: row; align-items: center; justify-content: space-around; gap: 6px; flex-wrap: wrap; }
    .topbar-actions .team-card { flex: 1; min-width: 0; }
    .end-match-btn { padding: 8px 12px; font-size: 10px; flex-shrink: 0; }
    .chrono-card-top { width: 100%; min-width: 0; }
    .scoreboard { gap: 10px; justify-content: center; }
    .team-badge { width: 36px; height: 36px; }

    /* Toolbar : 2 lignes */
    .match-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .last-action-banner { padding: 8px 12px; }
    .lab-value { font-size: 12px; }
    .match-mode-toggle { align-self: stretch; justify-content: center; }
    .mmt-btn { flex: 1; }

    /* Player rows : layout simplifié sur 2 rangées */
    .players-header { display: none; }
    .player-row {
        grid-template-columns: 50px 1fr 40px;
        grid-template-rows: auto auto;
        gap: 4px 6px;
        padding: 6px 8px;
        /* IMPORTANT : empêche le row de rétrécir dans le flex column de .players-list */
        flex-shrink: 0;
        min-height: 86px;
        align-items: center;
    }
    /* Ligne 1 : T/B | Nom | % */
    .player-row > :nth-child(1) { grid-row: 1; grid-column: 1; }
    .player-row .cell-num       { display: none; }
    .player-row .cell-pos       { display: none; }
    .player-row .cell-name-v2   { grid-row: 1; grid-column: 2; align-self: center; }
    .player-row .cell-pct       { grid-row: 1; grid-column: 3; text-align: right; font-size: 13px; align-self: center; }
    /* Ligne 2 : 4 boutons en pleine largeur */
    .player-row .cell-actions-4 { grid-row: 2; grid-column: 1 / -1; height: 40px; align-self: stretch; }
    .a4-sep { margin: 4px 2px; }
    .act4-btn .a4-tag { font-size: 8px; }
    .act4-btn .a4-sign { font-size: 16px; }

    /* Mode grille : 3 colonnes max */
    .players-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
    .gp-cell { padding: 8px 6px; }

    /* Footer compact */
    .bottom-tabs { padding: 6px 4px; gap: 4px; }
    .tab-btn { height: 32px; padding: 0 8px; font-size: 10px; }
    .tab-btn svg { width: 12px; height: 12px; }
    .undo-btn { height: 32px; padding: 0 10px; font-size: 10px; }
}

/* ============================================================
   RESPONSIVE — autres pages (accueil, gamehand, equipe, stats, etc.)
   La règle de base `.home-section { grid-column: 2 / 4 }` suppose
   un layout 3 colonnes (sidebar | main | right-panel). Quand l'app
   passe en 2 colonnes (≤ 1024px) ou 1 colonne (mobile), il faut adapter.
   ============================================================ */

/* iPad portrait & laptop ≤ 1024px : 2 colonnes (sidebar | content) */
@media (max-width: 1024px) {
    .home-section,
    .gh-section,
    .gamehand-app .gh-section { grid-column: 2 / -1; }

    /* Pour les pages avec un right-panel : on l'enlève du grid principal et
       on le rend disponible inline (en bas de la page) ou caché. */
    .app:has(.right-panel) {
        grid-template-rows: 1fr auto;
    }
    .app:has(.right-panel) .sidebar {
        grid-row: 1 / -1;
        grid-column: 1;
    }
    .app:has(.right-panel) .main {
        grid-row: 1;
        grid-column: 2;
    }
    .app:has(.right-panel) .right-panel {
        grid-row: 2;
        grid-column: 2;
        max-height: 50vh;
        overflow-y: auto;
        border-left: none;
        border-top: 1px solid var(--border-soft);
    }
}

/* Mobile ≤ 720px : 1 colonne (sidebar devient navbar du bas) */
@media (max-width: 720px) {
    /* Permettre le scroll natif du body : on ne tient plus l'app à 100vh
       mais en min-height. La navbar reste sticky en bas. */
    html, body {
        overflow: auto !important;
        height: auto !important;
        min-height: 100%;
    }
    .app {
        height: auto !important;
        min-height: 100vh;
    }
    /* Le main (et toutes les sections internes) doivent laisser le contenu
       déborder pour que le body scrolle. */
    .main {
        overflow: visible !important;
        grid-template-rows: auto auto auto auto !important;
    }
    .content-section { overflow: visible !important; }
    /* Les conteneurs scrollables internes (timelines, listes, etc.)
       deviennent eux aussi en flow naturel. */
    .stats-content,
    .equipe-content,
    .rapport-content,
    .reglages-content,
    .compte-content,
    .home-content,
    .events-list,
    .players-list-stats,
    [class*="-content"][class*="overflow"] { overflow: visible !important; height: auto !important; }

    /* La sidebar (transformée en navbar) reste fixe en bas du viewport */
    .sidebar {
        position: fixed !important;
        bottom: 0; left: 0; right: 0;
        z-index: 50;
        background: var(--bg-1);
        height: 60px;
    }
    /* Padding en bas du body pour que le contenu ne soit pas masqué
       par la navbar fixée. */
    body { padding-bottom: 60px !important; }

    .home-section,
    .gh-section,
    .gamehand-app .gh-section {
        grid-column: 1;
        grid-row: 1;
    }
    .sidebar { grid-row: 2; grid-column: 1; }

    /* Pour les pages avec right-panel : on annule la règle 1024
       (qui suppose 2 colonnes) et on stacke verticalement.
       Layout mobile : main (row 1) + right-panel (row 2) + navbar (row 3) */
    .app:has(.right-panel) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto 60px;
    }
    .app:has(.right-panel) .sidebar {
        grid-row: 3;
        grid-column: 1;
    }
    .app:has(.right-panel) .main {
        grid-row: 1;
        grid-column: 1;
    }
    .app:has(.right-panel) .right-panel {
        grid-row: 2;
        grid-column: 1;
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
        flex: 0 0 auto;
    }

    /* Topbars d'autres pages : on les compresse */
    .home-topbar,
    .gh-topbar {
        padding: 12px 14px 10px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .home-title { font-size: 20px !important; }
    .home-sub { font-size: 12px !important; }

    /* KPI / quick / current cards : pile sur 1 colonne */
    .home-kpi-row,
    .home-quick,
    .home-current-card,
    .feed-grid,
    .new-type-grid {
        grid-template-columns: 1fr !important;
    }

    /* Stats / Rapport : tout sur 1 colonne */
    .stats-charts-row,
    .stats-bottom-row,
    .rapport-row,
    .insights-grid,
    .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* KPI stats row : 2 colonnes (au lieu de 6) pour économiser la hauteur */
    .kpi-stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* Équipe : 2 colonnes max (au lieu de 3-4) */
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* Réglages : tout en colonne */
    .settings-grid,
    .form-grid-2,
    .pricing-grid,
    .affiliate-tiers,
    .about-info,
    .rgpd-rights-grid,
    .rgpd-data-item,
    .subproc-row,
    .current-plan-card,
    .rgpd-contact-row,
    .stripe-banner,
    .stripe-features {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .usage-stats { grid-template-columns: repeat(2, 1fr) !important; }

    /* Padding général réduit pour les sections */
    .home-section,
    .gh-section,
    .stats-section,
    .rapport-section,
    .equipe-section,
    .reglages-section,
    .compte-section { padding: 0 !important; }

    .home-content,
    .stats-content,
    .rapport-content,
    .reglages-content,
    .compte-content,
    .equipe-content { padding: 12px !important; }
}

/* Très petit mobile (≤ 420px) */
@media (max-width: 420px) {
    .nav-item span { display: none; }
    .scoreboard { gap: 6px; }
    .team-name { display: none; }
    .topbar-actions .team-card { gap: 6px; }
    .score { font-size: 28px; }
    .score-sep { font-size: 18px; }
    .tab-btn { font-size: 0; padding: 0 8px; }
    .tab-btn svg { width: 16px; height: 16px; }
    .tab-btn[id="btnLinked"]::after,
    .tab-btn[id="btnHalftime"]::after { content: none; }
    .level-badge { display: none; }
}

/* ============================================================
   TIME-LINE DÉFENSIVE (Premium 2) — modal overlay
   ============================================================ */
.overlay-defense {
    width: min(1200px, 96vw);
    max-width: 1200px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}
.overlay-defense .overlay-head h2 {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 800;
    color: var(--text);
}
.def-head-icon {
    width: 22px; height: 22px;
    color: var(--accent);
}
.premium-pill {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: 9px; font-weight: 900;
    letter-spacing: 1.2px;
    padding: 3px 9px;
    border-radius: 11px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    margin-left: 4px;
}

/* Onglet badge "P2" */
.tab-badge.premium {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: 8px; font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 5px;
    border-radius: 7px;
    margin-left: 4px;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.35);
    line-height: 1;
    vertical-align: middle;
}

/* === Barre période + score actuel === */
.def-period-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.def-period-toggle {
    display: inline-flex;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 3px;
}
.dpt-btn {
    height: 36px; padding: 0 18px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--text-dim);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dpt-btn:hover { color: var(--text); }
.dpt-btn.active {
    background: linear-gradient(180deg, rgba(106, 166, 255, 0.20), rgba(106, 166, 255, 0.06));
    color: #92bdff;
    box-shadow: 0 1px 3px rgba(106, 166, 255, 0.2);
}

.def-score-now {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 6px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.dsn-label {
    font-size: 10px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.dsn-val {
    font-size: 18px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.dsn-time {
    font-size: 11px; font-weight: 600;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

/* === Barre des dispositifs (sélection) — Cahier 27 mai : horizontale,
   avec chrono + Fin de période/match à droite === */
.def-types-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.def-types-label {
    font-size: 10px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    flex-shrink: 0;
}
.def-types-wrap {
    display: flex; flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
}
.def-type-btn {
    --def-color: #888;
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px;
    background: var(--bg-2);
    border: 1.5px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.def-type-btn .dtb-swatch {
    width: 14px; height: 14px;
    border-radius: 4px;
    background: var(--def-color);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.def-type-btn:hover {
    border-color: var(--def-color);
    background: var(--bg-3);
}
.def-type-btn.armed {
    border-color: var(--def-color);
    background: color-mix(in srgb, var(--def-color) 18%, var(--bg-2));
    box-shadow:
        0 0 0 2px var(--def-color),
        0 4px 14px color-mix(in srgb, var(--def-color) 35%, transparent);
    transform: translateY(-1px);
}
.def-type-btn.armed .dtb-label {
    color: var(--text);
}

/* === Timeline (grille 4 rangées : Défense / Score / Minutes / Courbe) === */
.def-timeline-wrap {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-1);
    min-height: 0;
}
.def-timeline-grid {
    min-width: 760px;
    display: flex;
    flex-direction: column;
}
.dtl-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: stretch;
    min-height: 44px;
    border-bottom: 1px solid var(--border-soft);
}
.dtl-row:last-child { border-bottom: none; }
.dtl-rowlabel {
    display: flex; align-items: center;
    padding: 0 12px;
    font-size: 11px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: var(--bg-2);
    border-right: 1px solid var(--border-soft);
}
.dtl-line {
    position: relative;
    height: 100%;
    min-height: 44px;
}

/* Blocs de dispositif (rangée 1) */
.dtl-row-def .dtl-line { padding: 4px 0; }
.dtl-block {
    --def-color: #888;
    position: absolute;
    top: 4px; bottom: 4px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--def-color) 75%, transparent),
        color-mix(in srgb, var(--def-color) 92%, transparent));
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--def-color) 60%, black);
    color: white;
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center;
    padding: 0 10px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--def-color) 35%, transparent),
                inset 0 0 0 1px rgba(255,255,255,0.18);
    transition: filter 0.15s, transform 0.08s;
    overflow: hidden;
}
.dtl-block:hover { filter: brightness(1.12); }
.dtl-block-label {
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dtl-block-del {
    margin-left: auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    border: none;
    color: white;
    font-size: 16px; font-weight: 900;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.dtl-block:hover .dtl-block-del { opacity: 1; }
.dtl-block-del:hover { background: rgba(0,0,0,0.55); }

/* Tags insta-score (rangée 2, ÉDITABLES) */
.dtl-row-score .dtl-line { padding: 6px 0; }
.dtl-score {
    position: absolute;
    top: 6px; bottom: 6px;
    transform: translateX(-50%);
    display: inline-flex; align-items: center;
    padding: 0 8px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px; font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.dtl-score.manual {
    border-color: rgba(240, 165, 42, 0.6);
    background: linear-gradient(180deg, rgba(240, 165, 42, 0.10), rgba(240, 165, 42, 0.02));
}
.dts-val {
    cursor: text;
    padding: 2px 4px;
    border-radius: 4px;
    outline: none;
    min-width: 38px;
    text-align: center;
}
.dts-val:hover { background: rgba(106, 166, 255, 0.12); }
.dts-val.editing {
    background: rgba(106, 166, 255, 0.18);
    box-shadow: 0 0 0 2px rgba(106, 166, 255, 0.5);
}

/* Axe minutes cliquable (rangée 3) */
.dtl-row-mn { min-height: 38px; }
.dtl-line-mn { display: flex; }
.dtl-tick {
    position: absolute;
    top: 0; bottom: 0;
    background: transparent;
    border: none;
    border-left: 1px dashed var(--border-soft);
    color: var(--text-mute);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.dtl-tick:hover {
    background: rgba(106, 166, 255, 0.10);
    color: var(--accent);
}
.dtl-tick.major {
    border-left: 1px solid var(--border);
}
.dtl-tick.current {
    background: rgba(47, 212, 122, 0.14);
    border-left: 2px solid var(--green);
}
.dtl-tick.current::after {
    content: '●';
    position: absolute;
    top: -2px; left: -5px;
    color: var(--green);
    font-size: 8px;
}
.dtt-num {
    display: block;
    text-align: center;
    font-size: 10px; font-weight: 700;
    line-height: 38px;
    color: var(--text-mute);
    opacity: 0.5;
    pointer-events: none;
}
.dtl-tick.major .dtt-num {
    opacity: 1;
    color: var(--text-dim);
    font-weight: 800;
}
.dtl-tick.current .dtt-num {
    color: var(--green);
    opacity: 1;
}

/* Courbes score (rangée 4) */
.dtl-row-chart { min-height: 80px; }
.dtl-line-chart {
    padding: 4px 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
}
.dtl-chart-svg {
    width: 100%; height: 100%;
    display: block;
}

/* Pied de modal */
.def-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 0 0;
    border-top: 1px solid var(--border-soft);
    margin-top: 14px;
    flex-wrap: wrap;
}
.def-foot-tip {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px;
    color: var(--text-mute);
    flex: 1; min-width: 0;
}
.def-foot-tip svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); }
.def-foot-tip strong { color: var(--text); }

/* === Mode clair === */
[data-theme="light"] .def-type-btn {
    background: white;
    border-color: #cbd5e1;
}
[data-theme="light"] .dtl-block {
    color: white;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--def-color) 28%, transparent),
                inset 0 0 0 1px rgba(255,255,255,0.25);
}
[data-theme="light"] .dtl-rowlabel { background: #f1f5f9; }
[data-theme="light"] .dtl-score.manual {
    background: #fff7ed;
    border-color: #ea580c;
    color: #7c2d12;
}
[data-theme="light"] .dtl-tick:hover {
    background: rgba(37, 99, 235, 0.10);
    color: var(--accent);
}

/* === Responsive (≤ 720px) === */
@media (max-width: 720px) {
    .overlay-defense { width: 96vw; padding: 12px; }
    .def-period-bar { gap: 8px; }
    .def-period-toggle .dpt-btn { padding: 0 12px; font-size: 11px; height: 32px; }
    .dsn-val { font-size: 15px; }
    .dsn-time { display: none; }
    .def-type-btn { font-size: 11px; padding: 0 8px; height: 32px; }
    .dtl-rowlabel { padding: 0 8px; font-size: 9.5px; }
    .dtl-row { grid-template-columns: 70px 1fr; }
    .def-timeline-grid { min-width: 540px; }
    .dtl-block { font-size: 10.5px; padding: 0 6px; }
    .dtl-score { font-size: 11px; padding: 0 4px; }
    .dtt-num { font-size: 9px; }
}

/* ============================================================
   TIME-LINE DÉFENSIVE — Rangées de buts cliquables
   ============================================================ */
.dtl-row-goal { min-height: 38px; }
.dtl-row-goal-home { background: rgba(22, 163, 74, 0.04); }
.dtl-row-goal-away { background: rgba(239, 68, 68, 0.04); }

.dtl-row-goal .dtl-rowlabel {
    display: flex; align-items: center; gap: 6px;
    padding-right: 8px;
}
.drl-side {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.drl-side.home { background: var(--green); box-shadow: 0 0 6px rgba(47, 212, 122, 0.6); }
.drl-side.away { background: var(--red);   box-shadow: 0 0 6px rgba(242, 84, 69, 0.6); }
.drl-name { flex: 1; }
.drl-total {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 11px; font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.dtl-row-goal-home .drl-total {
    background: rgba(22, 163, 74, 0.18);
    border-color: rgba(22, 163, 74, 0.45);
    color: var(--green);
}
.dtl-row-goal-away .drl-total {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.45);
    color: var(--red);
}

.dtl-line-goal {
    padding: 4px 0;
    cursor: crosshair;
}

/* Cellule de minute cliquable */
.dtl-goal-cell {
    position: absolute;
    top: 4px; bottom: 4px;
    background: transparent;
    border: none;
    border-left: 1px dashed rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.12s;
    display: flex; align-items: center; justify-content: center;
}
.dtl-goal-cell:hover {
    background: rgba(106, 166, 255, 0.12);
}
.dtl-row-goal-home .dtl-goal-cell:hover { background: rgba(47, 212, 122, 0.18); }
.dtl-row-goal-away .dtl-goal-cell:hover { background: rgba(242, 84, 69, 0.18); }

/* Plus-icon discret au hover sur cellule vide */
.dtl-goal-cell:hover:empty::after {
    content: '+';
    color: var(--text-mute);
    font-size: 16px;
    font-weight: 900;
    opacity: 0.6;
}

/* Le dot de but : pastille colorée avec le score cumulé */
.dtl-goal-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    color: white;
    font-size: 10px; font-weight: 900;
    display: inline-flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 1.5px rgba(255,255,255,0.25);
    pointer-events: none;
    z-index: 1;
    transition: transform 0.15s;
}
.dtl-goal-dot.home {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%);
}
.dtl-goal-dot.away {
    background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
}
.dtl-goal-dot.multi {
    /* Cerclage doré pour signaler plusieurs buts à la même minute */
    box-shadow:
        0 2px 6px rgba(0,0,0,0.25),
        0 0 0 2px #f6c651,
        inset 0 0 0 1.5px rgba(255,255,255,0.25);
}
.dtl-goal-cell:hover .dtl-goal-dot { transform: scale(1.15); }

/* Bouton de suppression sur survol du dot */
.dtl-goal-del {
    position: absolute;
    top: -2px; right: -2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid white;
    color: white;
    font-size: 10px; font-weight: 900;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
    z-index: 2;
}
.dtl-goal-cell:hover .dtl-goal-del { opacity: 1; }
.dtl-goal-del:hover { background: rgba(0,0,0,0.9); transform: scale(1.15); }

/* Mode clair */
[data-theme="light"] .dtl-row-goal-home { background: rgba(22, 163, 74, 0.06); }
[data-theme="light"] .dtl-row-goal-away { background: rgba(220, 38, 38, 0.06); }
[data-theme="light"] .dtl-goal-cell {
    border-left: 1px dashed rgba(0,0,0,0.06);
}

/* Responsive ≤ 720px */
@media (max-width: 720px) {
    .dtl-goal-dot { width: 18px; height: 18px; font-size: 9px; }
    .drl-total { min-width: 18px; font-size: 9.5px; padding: 0 4px; }
    .drl-name { font-size: 9.5px; }
}

/* Stack vertical pour plusieurs buts à la même minute */
.dtl-goal-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;     /* le clic passe à la cell pour ajouter */
}
.dtl-goal-stack .dtl-goal-dot {
    pointer-events: auto;      /* mais les dots eux-mêmes restent interactifs */
    position: relative;
    width: 20px; height: 20px;
    font-size: 9.5px;
}
@media (max-width: 720px) {
    .dtl-goal-stack .dtl-goal-dot { width: 16px; height: 16px; font-size: 8.5px; }
}

/* ============================================================
   MATCH — Refonte VUE COMPACTE
   - Header 1-ligne (sans chrono)
   - Chrono GROS dans le footer à côté de Notes
   - 16 joueurs visibles (lignes 36px)
   - Timeline 30 dots en 3×10 (fenêtre 8 mise en évidence)
   - Boutons attaque/défense compactés (signe gros, label minus.)
   ============================================================ */

/* === Topbar 1-ligne === */
.topbar.topbar-compact {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-soft);
    min-height: 56px;
}
.tbc-score {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tbc-spacer { flex: 1; }

/* Re-style team-card en mode compact */
.topbar-compact .team-card { gap: 10px; }
.topbar-compact .team-badge {
    width: 38px; height: 38px;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.topbar-compact .team-name {
    font-size: 13px; font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-compact .score-block {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 0 10px;
}
.topbar-compact .score {
    font-size: 26px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.topbar-compact .score.winning { color: var(--green); }
.topbar-compact .score-sep {
    font-size: 22px; font-weight: 600;
    color: var(--text-mute);
    line-height: 1;
}

/* Theme toggle + end button compact */
.topbar-compact .theme-toggle {
    width: 38px; height: 38px;
}
.topbar-compact .end-match-btn {
    padding: 10px 14px;
    font-size: 12px;
}

/* Sous-ligne catégorie discrète */
.match-category-line {
    text-align: center;
    padding: 2px 0 4px;
    font-size: 10.5px; font-weight: 700;
    color: var(--text-mute);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
}

/* === Bandeau dernière action compact === */
.match-toolbar { padding: 5px 10px !important; margin-bottom: 4px !important; }
.last-action-banner { padding: 6px 12px !important; }
.lab-value { font-size: 12px !important; }

/* === Ligne joueur compactée (36px) === */
.player-row {
    min-height: 36px !important;
    height: 36px;
    padding: 3px 8px !important;
    gap: 8px !important;
    border-radius: 7px !important;
}
.player-row.gk-last-sep {
    margin-bottom: 3px !important;
    padding-bottom: 3px !important;
}

/* Pastille T/B en mode compact */
.tb-pill {
    height: 24px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    max-width: 72px !important;
}

/* Numéro maillot compact */
.cell-num {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
}

/* Nom : prénom + temps de jeu inline / nom plus petit */
.cell-name-v2 .name-firstname { font-size: 12px !important; }
.cell-name-v2 .name-lastname  { font-size: 9.5px !important; margin-top: 0 !important; }
.cell-name-v2 .name-playtime  { font-size: 9px !important; padding: 0 4px !important; }

/* Poste compact */
.cell-pos {
    font-size: 8.5px !important;
    padding: 2px 4px !important;
}

/* === Timeline 30 dots en grille 3 × 10 === */
/* PHASE 6.15.N1 — Refactor : dots ronds → bâtons verticaux fins (cahier 27/5)
   Style cohérent avec les .dtl-goal-stick de la timeline défensive.
   Gain de place horizontale + visuel plus lisible. */
.cell-timeline-30 {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr);   /* 3 × 10 = 30 bâtons (cahier 27 mai) */
    grid-template-rows: repeat(3, 1fr);
    gap: 2px 1.5px !important;
    padding: 3px 6px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid var(--border-soft);
    height: 100%;
    min-height: 28px;
    position: relative;
    align-items: stretch;
}
.cell-timeline-30::before { display: none; }

.cell-timeline-30 .timeline-dot {
    width: 100% !important;
    height: 100% !important;
    max-width: 5px;
    min-width: 2px !important;
    min-height: 6px !important;
    font-size: 0 !important;
    box-shadow: none !important;
    border-radius: 2px !important;   /* bâton fin, pas rond */
    transition: transform 0.15s, box-shadow 0.15s;
    margin: 0 auto;
    aspect-ratio: auto !important;
}
.cell-timeline-30 .timeline-dot.empty {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    opacity: 0.4;
    border-radius: 2px !important;
}

/* Fenêtre glissante (10 dernières) : mise en avant */
.cell-timeline-30 .timeline-dot.in-window {
    box-shadow:
        0 0 0 1px rgba(106, 166, 255, 0.55),
        0 0 3px rgba(106, 166, 255, 0.30) !important;
    transform: scaleY(1.10);
}
.cell-timeline-30 .timeline-dot.in-window.empty {
    background: rgba(106, 166, 255, 0.10);
    border-color: rgba(106, 166, 255, 0.30);
    opacity: 0.6;
}

/* Dernier bâton : épais + pulse */
.cell-timeline-30 .timeline-dot.last {
    max-width: 7px;
    box-shadow:
        0 0 0 1.5px white,
        0 0 0 2.5px rgba(106, 166, 255, 0.85),
        0 0 6px currentColor !important;
    z-index: 2;
}

/* Mode clair */
[data-theme="light"] .cell-timeline-30 {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(37, 99, 235, 0.08) 100%);
    border-color: rgba(37, 99, 235, 0.18);
}
[data-theme="light"] .cell-timeline-30 .timeline-dot.in-window {
    box-shadow:
        0 0 0 1.5px rgba(37, 99, 235, 0.7),
        0 0 4px rgba(37, 99, 235, 0.4) !important;
}

/* === % cell compact === */
.cell-pct {
    font-size: 13px !important;
    padding: 2px 4px !important;
}

/* === Boutons d'action ATT/DÉF compacts mais TOUJOURS GROS sur le signe === */
.cell-actions-4 {
    height: 30px !important;
    gap: 4px !important;
}
.a4-sep { margin: 2px 1px !important; }
.act4-btn {
    border-radius: 6px !important;
}
.act4-btn .a4-tag {
    font-size: 7.5px !important;
    letter-spacing: 0.4px !important;
    opacity: 0.85;
}
.act4-btn .a4-sign {
    font-size: 18px !important;
    line-height: 1;
}
@media (min-width: 1440px) {
    .cell-actions-4 { height: 32px !important; }
    .act4-btn .a4-sign { font-size: 20px !important; }
    .act4-btn .a4-tag  { font-size: 8.5px !important; }
}

/* === FOOTER avec CHRONO gros à droite === */
.bottom-tabs {
    padding: 8px 10px !important;
    gap: 10px !important;
    min-height: 64px;
}
.chrono-foot {
    display: inline-flex; align-items: center; gap: 10px;
    height: 48px;
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(47, 212, 122, 0.16), rgba(47, 212, 122, 0.06));
    border: 1.5px solid rgba(47, 212, 122, 0.5);
    border-radius: 11px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.08s, background 0.2s;
    box-shadow: 0 2px 10px rgba(47, 212, 122, 0.18);
    flex-shrink: 0;
}
.chrono-foot:hover { filter: brightness(1.1); }
.chrono-foot:active { transform: scale(0.97); }
.chrono-foot.paused {
    background: linear-gradient(180deg, rgba(240, 165, 42, 0.18), rgba(240, 165, 42, 0.06));
    border-color: rgba(240, 165, 42, 0.55);
    box-shadow: 0 2px 10px rgba(240, 165, 42, 0.22);
}
.chf-icon {
    font-size: 18px;
    color: var(--green);
    line-height: 1;
    flex-shrink: 0;
}
.chrono-foot.paused .chf-icon { color: var(--orange); }
.chf-info {
    display: flex; flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
    gap: 1px;
}
.chf-time {
    font-size: 22px; font-weight: 900;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}
.chrono-foot.paused .chf-time { color: var(--orange); }
.chf-period {
    font-size: 9px; font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
[data-theme="light"] .chrono-foot {
    background: linear-gradient(180deg, #d1fae5, #a7f3d0);
    border-color: #16a34a;
    box-shadow: 0 2px 10px rgba(22, 163, 74, 0.20);
}
[data-theme="light"] .chf-time { color: #16a34a; }
[data-theme="light"] .chrono-foot.paused {
    background: linear-gradient(180deg, #fed7aa, #fdba74);
    border-color: #ea580c;
}
[data-theme="light"] .chrono-foot.paused .chf-time { color: #c2410c; }

/* === Players-header (libellés colonnes) compacté === */
.players-header {
    padding: 0 10px 4px !important;
    margin-bottom: 4px !important;
    font-size: 9px !important;
    letter-spacing: 0.6px !important;
}

/* === Responsive : sur iPad portrait & mobile, on garde toujours 30 dots
   mais on accepte un peu moins de joueurs visibles si nécessaire === */
@media (max-width: 1024px) {
    .topbar-compact .team-name { font-size: 12px; max-width: 120px; }
    .topbar-compact .score { font-size: 22px; }
    .topbar-compact .team-badge { width: 32px; height: 32px; }
    .chrono-foot { height: 42px; padding: 0 10px; }
    .chf-time { font-size: 18px; }
    .chf-period { font-size: 8px; }
}
@media (max-width: 720px) {
    .topbar-compact { gap: 8px; padding: 6px 8px; min-height: 48px; }
    .topbar-compact .team-name { display: none; }
    .topbar-compact .score { font-size: 20px; }
    .topbar-compact .score-block { padding: 0 6px; }
    .topbar-compact .end-match-btn span,
    .topbar-compact .end-match-btn { font-size: 10px; padding: 6px 8px; }
    .match-category-line { padding: 1px 0 2px; font-size: 9px; letter-spacing: 1px; }
    .chrono-foot { height: 38px; padding: 0 8px; }
    .chf-time { font-size: 16px; }
    .chf-period { display: none; }
    .chf-icon  { font-size: 15px; }

    /* Sur mobile on enlève la timeline 30 dots de la vue ligne (gain place) */
    .player-row .cell-timeline-30 { display: none !important; }
}

/* ============================================================
   TAB PANES (Temps réel ↔ Défense in-page)
   ============================================================ */
.match-tab-pane {
    grid-row: 3;
    grid-column: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.match-tab-pane[hidden] { display: none !important; }

/* Defense pane (in-page, plus de modal) */
.defense-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 8px 12px;
    gap: 10px;
}
.defense-pane .def-period-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: none;
    margin: 0;
    flex-shrink: 0;
}
.defense-pane .def-types-bar {
    padding: 0;
    border: none;
    margin: 0;
    flex-shrink: 0;
}
.defense-pane .def-timeline-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-1);
}
.def-foot-tip-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-mute);
    padding: 6px 4px 2px;
    flex-shrink: 0;
}
.def-foot-tip-inline svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
    color: var(--accent);
}
.def-foot-tip-inline strong { color: var(--text); }
.def-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
}
.def-reset-btn svg { width: 13px; height: 13px; }

/* Toggle LIGNES/GRILLE dans le footer */
.match-mode-toggle.footer-toggle {
    flex-shrink: 0;
    height: 40px;
    padding: 2px;
}
.match-mode-toggle.footer-toggle .mmt-btn {
    height: 34px;
    padding: 0 10px;
    font-size: 11px;
}
.match-mode-toggle.footer-toggle[hidden] { display: none !important; }

/* Sur petits écrans : compacter le toggle footer */
@media (max-width: 1024px) {
    .match-mode-toggle.footer-toggle .mmt-btn { padding: 0 8px; font-size: 10px; }
    .match-mode-toggle.footer-toggle .mmt-btn svg { width: 12px; height: 12px; }
}
@media (max-width: 720px) {
    .match-mode-toggle.footer-toggle { display: none !important; } /* footer trop chargé en mobile */
}

/* ============================================================
   NOUVELLE DISPOSITION : Time-line PERMANENTE en haut
   - .defense-top en row 1 (auto)
   - .players-section en row 2 (1fr)
   - .bottom-tabs en row 3 (64px)
   ============================================================ */
.main {
    /* override : 3 rangées au lieu de 4 (plus de topbar séparée) */
    grid-template-rows: auto 1fr 64px !important;
}

.defense-top {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 10px;
    border-bottom: 2px solid var(--border);
    background: linear-gradient(180deg, rgba(106, 166, 255, 0.04) 0%, transparent 100%);
    flex-shrink: 0;
}

/* Barre haute fusionnée : score + équipes + tag + actions */
.defense-top-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
.defense-top-header .team-card { gap: 10px; }
.defense-top-header .team-badge {
    width: 36px; height: 36px;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.defense-top-header .team-name {
    font-size: 13px; font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden; text-overflow: ellipsis;
}
.defense-top-header .score-block {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 0 10px;
}
.defense-top-header .score {
    font-size: 26px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.defense-top-header .score.winning { color: var(--green); }
.defense-top-header .score-sep {
    font-size: 22px; font-weight: 600;
    color: var(--text-mute);
    line-height: 1;
}
.defense-top-header .match-cat-inline {
    font-size: 11px; font-weight: 700;
    color: var(--text-mute);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 0 10px;
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
    margin: 0 4px;
}
.defense-top-header .theme-toggle { width: 36px; height: 36px; }
.defense-top-header .end-match-btn {
    padding: 10px 14px;
    font-size: 12px;
}

/* Le defense-pane à l'intérieur de defense-top : sans bordure ni padding extérieur
   (déjà géré par .defense-top) */
.defense-top .defense-pane {
    padding: 0;
    gap: 8px;
    height: auto;
}
.defense-top .def-period-bar { padding: 0; border: none; margin: 0; }
.defense-top .def-types-bar  { padding: 0; border: none; margin: 0; gap: 6px; }
.defense-top .def-types-label { font-size: 9.5px; }
.defense-top .def-timeline-wrap {
    height: auto;
    max-height: 240px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--bg-1);
    overflow: auto;
}

/* Section table joueurs (en dessous) */
.players-section {
    grid-row: 2;
    grid-column: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.players-section .players-board,
.players-section .players-grid-board {
    grid-row: auto;
    grid-column: auto;
}

/* Bandeau "Indicateur table" : libellé compact en haut */
.players-section .players-header {
    padding-top: 4px;
    margin-top: 4px;
}

/* Adaptation responsive : timeline plus compacte sur petits écrans */
@media (max-width: 1280px) {
    .defense-top-header .team-name { max-width: 110px; font-size: 12px; }
    .defense-top-header .score { font-size: 22px; }
    .defense-top-header .match-cat-inline { padding: 0 6px; }
    .defense-top .def-timeline-wrap { max-height: 200px; }
}
@media (max-width: 1024px) {
    .defense-top-header .team-name { max-width: 90px; }
    .defense-top-header .match-cat-inline { display: none; }
    .defense-top { padding: 6px 8px; gap: 6px; }
    .defense-top .def-timeline-wrap { max-height: 170px; }
}
@media (max-width: 720px) {
    .defense-top-header { flex-wrap: wrap; }
    .defense-top-header .team-name { display: none; }
    .defense-top-header .score { font-size: 20px; }
    .defense-top { padding: 6px; }
    .defense-top .def-timeline-wrap { max-height: 140px; }
}

/* ============================================================
   Toggle période INLINE dans le header (gagner hauteur pour Cumul)
   ============================================================ */
.defense-top-header .def-period-toggle.inline {
    display: inline-flex;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 2px;
    height: 32px;
    flex-shrink: 0;
}
.defense-top-header .def-period-toggle.inline .dpt-btn {
    height: 26px;
    padding: 0 10px;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--text-dim);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.defense-top-header .def-period-toggle.inline .dpt-btn.active {
    background: linear-gradient(180deg, rgba(106, 166, 255, 0.20), rgba(106, 166, 255, 0.06));
    color: #92bdff;
    box-shadow: 0 1px 3px rgba(106, 166, 255, 0.2);
}
.defense-top-header .premium-pill {
    margin-left: 0;
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    font-size: 9px;
}
.defense-top-header .def-reset-btn {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
}
.defense-top-header .def-reset-btn svg { width: 12px; height: 12px; }

/* Plus de padding superflu : la pane n'a plus de period-bar */
.defense-top .defense-pane { gap: 6px; }

/* On agrandit la zone timeline (et donc CUMUL) */
.defense-top .def-timeline-wrap {
    max-height: 280px !important;  /* + 40px gagnés sur la period-bar disparue */
}
@media (max-width: 1280px) {
    .defense-top .def-timeline-wrap { max-height: 240px !important; }
}
@media (max-width: 1024px) {
    .defense-top .def-timeline-wrap { max-height: 200px !important; }
    .defense-top-header .def-period-toggle.inline .dpt-btn { padding: 0 8px; font-size: 10px; }
}
@media (max-width: 720px) {
    .defense-top .def-timeline-wrap { max-height: 170px !important; }
    .defense-top-header .def-reset-btn { padding: 0 6px; font-size: 10px; }
}

/* ============================================================
   LOT 1 — Quick wins :
   - Timeline 30 actions sur 1 ligne (groupées par 10)
   - Boutons attaque/défense compactés (gain place pour timeline)
   - Lignes joueur plus hautes (16 max, hauteur ~42px)
   - Flèches tendance grossies
   - Chrono plus gros
   - GB modifiable
   ============================================================ */

/* Timeline : 30 bâtons sur une ligne (phase N7) — base layout 10 cols ici, overridé plus bas */
.cell-timeline-30 {
    grid-template-columns: repeat(10, 1fr) !important;   /* PHASE 6.15.N4 : 3×10 = 30 bâtons */
}

/* Lignes joueur : hauteur fixe (override de Phase 6.12.B3 si conflit) */
.player-row {
    min-height: 38px;
    padding: 2px 8px !important;
}

/* Header tableau légèrement plus haut aussi */
.players-header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 10px !important;
}

/* Grid-template-columns : on rétrécit la colonne actions (8e),
   on élargit la colonne timeline (5e) pour caser 12 dots */
.players-header,
.player-row {
    grid-template-columns: 78px 30px minmax(120px, 180px) 44px minmax(170px, 240px) 50px 38px minmax(190px, 240px) !important;
    gap: 10px !important;
}
@media (max-width: 1280px) {
    .players-header,
    .player-row {
        grid-template-columns: 70px 28px minmax(110px, 160px) 42px minmax(160px, 220px) 46px 34px minmax(180px, 230px) !important;
    }
}
@media (max-width: 1024px) {
    .players-header,
    .player-row {
        grid-template-columns: 64px 26px minmax(90px, 130px) 36px minmax(140px, 180px) 40px 0 minmax(170px, 210px) !important;
    }
}

/* Boutons d'action : largeur compacte, mais signe TOUJOURS gros */
.cell-actions-4 {
    height: 34px !important;
    gap: 3px !important;
}
.act4-btn {
    padding: 0 2px !important;
}
.act4-btn .a4-tag {
    font-size: 7.5px !important;
    letter-spacing: 0.4px !important;
}
.act4-btn .a4-sign {
    font-size: 19px !important;
    line-height: 1 !important;
}
@media (min-width: 1440px) {
    .cell-actions-4 { height: 36px !important; }
    .act4-btn .a4-sign { font-size: 22px !important; }
    .act4-btn .a4-tag  { font-size: 8.5px !important; }
}

/* Séparateur ATT/DÉF plus discret */
.a4-sep {
    width: 1px;
    margin: 3px 1px !important;
    background: var(--border) !important;
    opacity: 0.4;
}

/* ============================================================
   LOT 1C — Flèches de tendance grossies
   ============================================================ */
.trend-icon {
    width: 30px !important;
    height: 26px !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
.cell-trend { padding-right: 2px; }

/* ============================================================
   LOT 1D — Chrono plus gros dans le footer
   ============================================================ */
.chrono-foot { height: 56px !important; padding: 0 18px !important; gap: 12px !important; }
.chf-icon { font-size: 22px !important; }
.chf-time {
    font-size: 28px !important;
    line-height: 1 !important;
}
.chf-period { font-size: 10px !important; }
@media (max-width: 1024px) {
    .chrono-foot { height: 48px !important; padding: 0 12px !important; }
    .chf-time { font-size: 22px !important; }
}

/* ============================================================
   LOT 1E — Bouton "Annuler dernière action" remis très visible
   ============================================================ */
.undo-btn {
    height: 56px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(240, 165, 42, 0.25), rgba(240, 165, 42, 0.12)) !important;
    border-width: 2px !important;
    box-shadow: 0 3px 14px rgba(240, 165, 42, 0.30) !important;
}
.undo-btn svg { width: 18px !important; height: 18px !important; }
@media (max-width: 1024px) {
    .undo-btn { height: 48px !important; padding: 0 14px !important; font-size: 12px !important; }
}

/* ============================================================
   LOT 1F — Poste GB modifiable : style du sélecteur dropdown
   ============================================================ */
.cell-pos {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.cell-pos:hover {
    background: rgba(106, 166, 255, 0.18) !important;
    border-color: rgba(106, 166, 255, 0.5) !important;
}
.cell-pos.editing {
    padding: 0 !important;
    border: none !important;
}
.cell-pos select.pos-select {
    width: 100%;
    height: 100%;
    padding: 2px 4px;
    background: var(--bg-3);
    color: var(--text);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    outline: none;
}
[data-theme="light"] .cell-pos.editing select.pos-select {
    background: white;
    color: var(--text);
}

/* ============================================================
   LOT 2 — Refonte timeline : score local centré + chip fin période
   ============================================================ */

/* Plus de score "17-14" central : juste les noms d'équipe avec "vs" */
.versus-sep {
    font-size: 16px; font-weight: 600;
    color: var(--text-mute);
    margin: 0 4px;
}

/* Score LOCAL par bloc défensif (au milieu, évolutif) */
.dtl-row-score .dtl-line { padding: 6px 0; }
.dtl-score-local {
    position: absolute;
    top: 6px; bottom: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid color-mix(in srgb, var(--def-color, #888) 40%, transparent);
    border-radius: 6px;
    font-size: 16px; font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 4px rgba(0,0,0,0.20),
                inset 0 0 0 1px color-mix(in srgb, var(--def-color, #888) 18%, transparent);
}
.dtl-score-local .dsl-home {
    color: var(--green);
    text-shadow: 0 0 8px rgba(47, 212, 122, 0.4);
}
.dtl-score-local .dsl-away {
    color: var(--red);
    text-shadow: 0 0 8px rgba(242, 84, 69, 0.4);
}
.dtl-score-local .dsl-sep {
    margin: 0 6px;
    font-size: 14px;
    color: var(--text-mute);
    font-weight: 700;
}
.dtl-score-local.positive { background: rgba(47, 212, 122, 0.08); }
.dtl-score-local.negative { background: rgba(242, 84, 69, 0.10); }
.dtl-score-local.neutral  { background: rgba(255, 255, 255, 0.04); }

/* Chip "Mi-temps 9-7" / "Fin de match 17-14" à droite */
.dtl-period-end {
    position: absolute;
    right: 4px; top: 4px; bottom: 4px;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0 12px;
    background: linear-gradient(180deg, rgba(106, 166, 255, 0.20), rgba(106, 166, 255, 0.06));
    border: 1.5px solid rgba(106, 166, 255, 0.55);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(106, 166, 255, 0.20);
    z-index: 3;
}
.dtl-period-end.period-2 {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.20), rgba(245, 158, 11, 0.06));
    border-color: rgba(245, 158, 11, 0.60);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.20);
}
.dpe-label {
    font-size: 8.5px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-mute);
    line-height: 1;
}
.dtl-period-end.period-2 .dpe-label { color: rgba(245, 158, 11, 0.85); }
.dpe-score {
    font-size: 17px; font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1.1;
    margin-top: 2px;
}
.dpe-sep {
    margin: 0 4px;
    color: var(--text-mute);
    font-weight: 700;
}

/* Dots de buts simplifiés (juste "1") */
.dtl-goal-dot {
    font-size: 11px !important;
    width: 20px !important; height: 20px !important;
}
.dtl-goal-stack .dtl-goal-dot {
    width: 18px !important; height: 18px !important;
    font-size: 10px !important;
}

/* Mode clair */
[data-theme="light"] .dtl-score-local {
    background: rgba(0,0,0,0.04);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08),
                inset 0 0 0 1px color-mix(in srgb, var(--def-color, #888) 25%, transparent);
}
[data-theme="light"] .dtl-score-local .dsl-home { color: #16a34a; text-shadow: none; }
[data-theme="light"] .dtl-score-local .dsl-away { color: #dc2626; text-shadow: none; }
[data-theme="light"] .dtl-period-end {
    background: linear-gradient(180deg, #dbeafe, #bfdbfe);
    border-color: #3b82f6;
}
[data-theme="light"] .dtl-period-end.period-2 {
    background: linear-gradient(180deg, #fef3c7, #fde68a);
    border-color: #d97706;
}

/* Responsive */
@media (max-width: 1024px) {
    .dtl-score-local { font-size: 14px; }
    .dtl-score-local .dsl-sep { font-size: 12px; margin: 0 4px; }
    .dpe-score { font-size: 14px; }
    .dpe-label { font-size: 7.5px; }
}
@media (max-width: 720px) {
    .dtl-period-end { padding: 0 8px; }
}

/* ============================================================
   LOT 3 — KromBall 1 : boutons défense visibles mais verrouillés (P2)
   ============================================================ */
.act4-btn.locked-p2 {
    position: relative;
    filter: grayscale(0.65) brightness(0.65);
    cursor: not-allowed;
    opacity: 0.5;
}
.act4-btn.locked-p2 .a4-lock {
    position: absolute;
    top: -4px; right: -4px;
    font-size: 7px; font-weight: 900;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 1.5px 4px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.45);
    line-height: 1;
    pointer-events: none;
}
.act4-btn.locked-p2:hover {
    filter: grayscale(0.4) brightness(0.85);
    opacity: 0.7;
}

/* ============================================================
   CAHIER 16 MAI — KromBall 1
   Refonte des colonnes + nouvelle colonne SANCTIONS + 2 boutons gros
   ============================================================ */

/* PHASE 6.15.N5 — La colonne Actions prend toute la largeur restante (1fr)
   pour que les 4 boutons ATT/DEF soient larges et ergonomiques en bord de terrain.
   Avant : minmax(170px, 220px) → 220px max → 50px par bouton → trop petit.
   Après : minmax(280px, 1fr)  → prend tout l'espace → ~100px par bouton. */
/* PHASE 6.15.N9 — Rebalance grille : élargir Sanct, % et Tend pour qu'ils
   ne se chevauchent plus. Les boutons ATT/DEF restent confortables grâce
   au 1fr final mais avec un min plus bas. */
.players-header,
.player-row {
    grid-template-columns: 78px 30px minmax(120px, 180px) 50px 58px minmax(160px, 240px) 100px 48px minmax(220px, 1fr) !important;
    gap: 12px !important;
}
@media (max-width: 1280px) {
    .players-header,
    .player-row {
        grid-template-columns: 70px 28px minmax(110px, 160px) 46px 54px minmax(150px, 210px) 92px 44px minmax(200px, 1fr) !important;
        gap: 10px !important;
    }
}
@media (max-width: 1024px) {
    .players-header,
    .player-row {
        grid-template-columns: 64px 26px minmax(90px, 130px) 40px 48px minmax(130px, 170px) 80px 0 minmax(180px, 1fr) !important;
        gap: 8px !important;
    }
}

/* Placement explicite (mis à jour pour 9 colonnes) */
.players-header > .col-tb,        .player-row > :nth-child(1) { grid-column: 1; }
.players-header > .col-num,       .player-row > :nth-child(2) { grid-column: 2; }
.players-header > .col-name,      .player-row > :nth-child(3) { grid-column: 3; }
.players-header > .col-pos,       .player-row > :nth-child(4) { grid-column: 4; }
.players-header > .col-sanct,     .player-row > :nth-child(5) { grid-column: 5; }
.players-header > .col-timeline,  .player-row > :nth-child(6) { grid-column: 6; }
.players-header > .col-pct,       .player-row > :nth-child(7) { grid-column: 7; }
.players-header > .col-trend,     .player-row > :nth-child(8) { grid-column: 8; }
.players-header > .col-actions4,  .player-row > :nth-child(9) { grid-column: 9; }

/* === Bouton SANCTIONS (nouvelle colonne) === */
.cell-sanct {
    height: 32px;
    border-radius: 7px;
    background: var(--bg-3);
    border: 1.5px solid var(--border-soft);
    color: var(--text-mute);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px;
}
.cell-sanct:hover { filter: brightness(1.15); transform: scale(1.04); }
.cell-sanct:active { transform: scale(0.96); }
.cell-sanct.lvl-0 {
    /* aucune sanction : discret */
    background: transparent;
    border-color: var(--border-soft);
    color: var(--text-mute);
    opacity: 0.5;
}
.cell-sanct.lvl-1 {
    /* Carton jaune */
    background: linear-gradient(180deg, #fde047, #facc15);
    border-color: #ca8a04;
    color: #422006;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(202, 138, 4, 0.35);
}
.cell-sanct.lvl-2 {
    /* 2' */
    background: linear-gradient(180deg, rgba(240, 165, 42, 0.35), rgba(240, 165, 42, 0.15));
    border-color: var(--orange);
    color: var(--orange);
    box-shadow: 0 2px 6px rgba(240, 165, 42, 0.30);
}
.cell-sanct.lvl-3 {
    /* 2×2' */
    background: linear-gradient(180deg, rgba(234, 88, 12, 0.45), rgba(234, 88, 12, 0.18));
    border-color: #ea580c;
    color: #fed7aa;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
    font-size: 10px;
}
.cell-sanct.lvl-4 {
    /* 3×2' ou Rouge direct */
    background: linear-gradient(180deg, #dc2626, #991b1b);
    border-color: #7f1d1d;
    color: white;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.45);
    animation: pulseRed 1.4s ease-in-out infinite;
}
[data-theme="light"] .cell-sanct.lvl-3 { color: #7c2d12; }
[data-theme="light"] .cell-sanct.lvl-0 { color: #94a3b8; }

/* === 2 boutons +/− gros (KromBall 1 : sans label ATT/DÉF, tag +25%) === */
.cell-actions-2 {
    display: flex;
    gap: 8px;
    width: 100%;
    height: 42px;     /* +25% par rapport au 34px précédent (cahier L16) */
    align-items: stretch;
}
.act2-btn {
    flex: 1;
    min-width: 0;
    height: 100%;
    border-radius: 9px;
    border: 1.5px solid transparent;
    color: white;
    cursor: pointer;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.08s, filter 0.15s, box-shadow 0.15s;
}
.act2-plus {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%);
    border-color: var(--green-d);
    box-shadow: 0 3px 10px rgba(47, 212, 122, 0.35), inset 0 0 0 1.5px rgba(255,255,255,0.18);
}
.act2-minus {
    background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
    border-color: var(--red-d);
    box-shadow: 0 3px 10px rgba(242, 84, 69, 0.35), inset 0 0 0 1.5px rgba(255,255,255,0.18);
}
.act2-btn:hover  { filter: brightness(1.12); }
.act2-btn:active { transform: scale(0.94); }
.act2-btn[disabled] { opacity: 0.25; pointer-events: none; box-shadow: none; }
@media (min-width: 1440px) {
    .cell-actions-2 { height: 44px; }
    .act2-btn       { font-size: 26px; }
}
@media (max-width: 1024px) {
    .cell-actions-2 { height: 38px; gap: 6px; }
    .act2-btn       { font-size: 20px; }
}

/* Lignes joueur : hauteur ajustée pour les boutons 42px + sanctions 32px */
.player-row {
    min-height: 50px !important;
    height: auto !important;
    padding: 4px 8px !important;
}

/* ============================================================
   CAHIER 16 MAI — Timeline refonte
   - Vue 60 mn d'un coup (plus de toggle MT)
   - Défense + Score fusionnés (case grandissante avec score blanc au milieu)
   - Buts en "I" vertical (3 max), Orange si match nul
   - Séparateur visuel à la mi-temps (mn 30 → mn 31)
   ============================================================ */

/* === Bloc Défense (FUSION avec Score) === */
.dtl-row-merged { min-height: 60px !important; }
.dtl-row-merged .dtl-line { padding: 4px 0; }
.dtl-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px;
    padding: 4px 8px !important;
    top: 4px !important; bottom: 4px !important;
}
.dtl-block-label {
    font-size: 11px !important;
    line-height: 1.1;
    text-align: center;
}
.dtl-block-score {
    background: white;
    color: #0f172a;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    display: inline-flex; align-items: baseline;
    line-height: 1;
}
.dtl-block-score .dbs-home { color: #16a34a; }
.dtl-block-score .dbs-away { color: #dc2626; }
.dtl-block-score .dbs-sep  { color: #64748b; margin: 0 4px; font-weight: 700; }
.dtl-block-score.equal { background: #fed7aa; box-shadow: 0 1px 6px rgba(234, 88, 12, 0.4); }
.dtl-block-score.equal .dbs-home,
.dtl-block-score.equal .dbs-away { color: #c2410c; }

/* Chips Mi-temps + Fin de match positionnés DANS la même row que la défense */
.dtl-row-merged .dtl-period-end {
    position: absolute;
    top: 4px; bottom: 4px;
    right: auto;
    height: auto;
    transform: translateX(-50%);
    z-index: 4;
}
.dtl-row-merged .dtl-period-end.end-match {
    right: 4px;
    left: auto;
    transform: none;
}

/* Séparateur visuel à la mi-temps (mn 30 → 31) */
.dtl-tick.halftime-mark {
    border-left: 3px dashed rgba(245, 158, 11, 0.8) !important;
}
.dtl-tick.halftime-mark::before {
    content: '½';
    position: absolute;
    top: -8px;
    left: -7px;
    font-size: 11px;
    font-weight: 900;
    color: #f59e0b;
    background: var(--bg-1);
    padding: 0 3px;
    border-radius: 3px;
    z-index: 2;
}
.dtl-goal-cell.after-halftime {
    border-left: 2px dashed rgba(245, 158, 11, 0.5) !important;
}

/* "I" vertical pour les buts (au lieu des dots ronds) */
.dtl-goal-stick {
    width: 6px;
    height: 22px;
    border-radius: 2px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.18);
    transition: transform 0.15s;
}
.dtl-goal-stick.home {
    background: linear-gradient(180deg, var(--green), var(--green-d));
}
.dtl-goal-stick.away {
    background: linear-gradient(180deg, var(--red), var(--red-d));
}
.dtl-goal-stick.equal {
    /* Orange = score à l'égalité (cahier L24/L26) */
    background: linear-gradient(180deg, #f59e0b, #d97706);
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.45), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.dtl-goal-cell:hover .dtl-goal-stick { transform: scale(1.18); }
.dtl-goal-stick .dtl-goal-del {
    position: absolute;
    top: -5px; right: -5px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
    border: 1px solid white;
    color: white;
    font-size: 9px; font-weight: 900;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
}
.dtl-goal-cell:hover .dtl-goal-del { opacity: 1; }
.dtl-goal-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px;
    align-items: center;
}

/* Anciens dots ronds : remplacés par "I" donc on cache l'ancien rendu */
.dtl-goal-stack .dtl-goal-dot { display: none !important; }


/* ============================================================
   App MVC — bouton logout sidebar
   ============================================================ */
.sidebar-logout {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    padding: 8px;
    margin-top: 6px;
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--text-mute);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-logout:hover {
    background: rgba(242, 84, 69, 0.12);
    border-color: rgba(242, 84, 69, 0.4);
    color: var(--red);
}
.sidebar-logout svg { width: 16px; height: 16px; }

/* Flash messages au-dessus du contenu */
.flash-bar {
    position: relative;
    padding: 12px 18px;
    margin: 0 12px 12px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 13px;
    font-weight: 600;
    display: flex; align-items: center; gap: 10px;
}
.flash-bar.success { background: rgba(47, 212, 122, 0.12); border-color: rgba(47, 212, 122, 0.4); color: var(--green); }
.flash-bar.error   { background: rgba(242, 84, 69, 0.12);  border-color: rgba(242, 84, 69, 0.4);  color: var(--red);   }
.flash-bar.info    { background: rgba(106, 166, 255, 0.12); border-color: rgba(106, 166, 255, 0.4); color: var(--accent); }

/* ============================================================
   App MVC — Vue accueil dynamique
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-mute);
    background: var(--bg-2);
    border: 1px dashed var(--border-soft);
    border-radius: 12px;
}
.empty-state a { color: var(--accent); text-decoration: underline; }

.match-row {
    display: grid;
    grid-template-columns: 60px 1fr 24px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.08s;
    margin-bottom: 8px;
}
.match-row:hover {
    background: var(--bg-3);
    border-color: rgba(106, 166, 255, 0.3);
    transform: translateX(2px);
}
.mr-date {
    text-align: center;
    background: rgba(106, 166, 255, 0.10);
    border: 1px solid rgba(106, 166, 255, 0.25);
    border-radius: 8px;
    padding: 6px 4px;
}
.mrd-day {
    font-size: 18px;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
}
.mrd-month {
    font-size: 9px;
    font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}
.mr-result {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    color: white;
    font-size: 14px;
}
.mr-result.win  { background: linear-gradient(135deg, var(--green), var(--green-d)); }
.mr-result.loss { background: linear-gradient(135deg, var(--red), var(--red-d)); }
.mr-result.draw { background: linear-gradient(135deg, var(--orange), var(--orange-d)); }
.mr-info { min-width: 0; line-height: 1.3; }
.mr-title {
    font-size: 14px; font-weight: 700;
    color: var(--text);
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.mr-pill {
    font-size: 9px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(106, 166, 255, 0.15);
    color: var(--accent);
    padding: 2px 7px;
    border-radius: 4px;
}
.mr-score {
    font-size: 13px; font-weight: 800;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}
.mr-meta {
    font-size: 11px; color: var(--text-mute);
    margin-top: 3px;
}
.mr-arrow {
    color: var(--text-mute);
    font-size: 18px;
    text-align: center;
}

/* Header current match (port simplifié du mockup) */
.home-current-card {
    background: linear-gradient(135deg, rgba(47, 212, 122, 0.16), rgba(106, 166, 255, 0.08));
    border: 1px solid rgba(47, 212, 122, 0.4);
    border-radius: 16px;
    padding: 18px 22px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px;
}
.hcc-left { flex: 1; min-width: 0; }
.hcc-status {
    display: inline-block;
    background: var(--red);
    color: white;
    font-size: 10px; font-weight: 900;
    padding: 3px 9px;
    border-radius: 5px;
    letter-spacing: 1px;
    animation: pulseRed 1.4s ease-in-out infinite;
    margin-right: 6px;
}
.hcc-pill {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border-soft);
    font-size: 9px; font-weight: 800;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-mute);
}
.hcc-title {
    font-size: 16px; font-weight: 800;
    margin: 8px 0;
    color: var(--text);
}
.hcc-score {
    display: flex; align-items: baseline; gap: 8px;
    font-variant-numeric: tabular-nums;
}
.hcs-home, .hcs-away {
    font-size: 32px; font-weight: 900;
    color: var(--text);
}
.hcs-sep { font-size: 26px; color: var(--text-mute); }
.hcs-meta { color: var(--text-mute); font-size: 12px; margin-left: 8px; }

.hcc-btn {
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.8px;
    display: inline-flex; align-items: center; gap: 8px;
}
.hcc-btn svg { width: 16px; height: 16px; }

/* ============================================================
   App MVC — Pages stubs (en attendant les phases suivantes)
   ============================================================ */
.page-stub {
    grid-column: 2 / -1;
    padding: 28px;
    overflow: auto;
}
.stub-card {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 800px;
}
.stub-card h1 { font-size: 24px; margin-bottom: 14px; color: var(--text); }
.stub-card h2 { font-size: 18px; margin: 16px 0 6px; color: var(--accent); }
.stub-card h3 { font-size: 14px; margin: 16px 0 8px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 1.2px; }
.stub-card p  { color: var(--text-dim); margin: 8px 0; }
.stub-card ul { list-style: none; padding: 0; margin: 12px 0; }
.stub-card ul li {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-dim);
}
.stub-card .ghost-btn { margin-top: 16px; }
.setting-block { margin: 18px 0; }
.stub-table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
}
.stub-table th, .stub-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    color: var(--text);
}
.stub-table th {
    font-size: 11px; color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.8px;
}
.pos-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(106, 166, 255, 0.15);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* ============================================================
   Phase 4 — Adversaire en HORIZONTAL (cahier 20 mai L29)
   ============================================================ */
.dtl-row-goal.goal-horizontal { min-height: 22px; }  /* hauteur réduite 40% (cahier L25) */
.dtl-row-goal.goal-horizontal .dtl-goal-stack.horizontal {
    flex-direction: row !important;
    gap: 1px;
}
/* PHASE 6.15.N4 — Bâtons buts plus visibles dans la timeline équipe/adv */
.dtl-row-goal.goal-horizontal .dtl-goal-stick {
    width: 5px;
    height: 18px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.20);
}
.dtl-row-goal-home { min-height: 26px; }
.dtl-row-goal-home .dtl-goal-stack { gap: 1.5px; }
.dtl-row-goal-home .dtl-goal-stick {
    width: 5px;
    height: 18px;
}
/* Placeholder (slot vide) reste fin pour ne pas obstruer */
.dtl-row-goal .dtl-goal-stick.empty {
    width: 4px;
    height: 14px;
    opacity: 0.18;
    box-shadow: none;
}

/* ============================================================
   Phase 2 — Formulaires AUTH (login/signup) — styles propres
   ============================================================ */
.auth-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 18px 28px 40px;
}
.public-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 36px;
}
.brand-link {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
    color: inherit;
}
.brand-link .brand-text {
    font-size: 18px; font-weight: 900;
    letter-spacing: 2px;
    color: var(--text);
}
.public-nav {
    display: flex; align-items: center; gap: 10px;
}

.auth-card {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 32px 32px 28px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.30);
}
.auth-card-head {
    text-align: center;
    margin-bottom: 24px;
}
.auth-card-head .brand-mark {
    margin: 0 auto 14px;
}
.auth-card-head h1 {
    font-size: 22px; font-weight: 800;
    color: var(--text);
    margin: 8px 0 6px;
}
.auth-card-head p {
    font-size: 13px; color: var(--text-dim);
    margin: 0;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label {
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--text-mute);
    text-transform: uppercase;
    display: flex; align-items: center; justify-content: space-between;
}
.auth-aside {
    font-size: 10px;
    color: var(--accent);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
.auth-aside:hover { text-decoration: underline; }

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s;
}
.auth-input-wrap:focus-within {
    border-color: var(--accent);
}
.auth-input-wrap > svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-left: 12px;
    color: var(--text-mute);
}
.auth-input-wrap input,
.auth-field > input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 14px;
    padding: 12px 14px;
    font-family: inherit;
}
.auth-field > input {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.auth-field > input:focus { border-color: var(--accent); }

.auth-eye {
    background: transparent; border: none;
    padding: 8px 12px;
    color: var(--text-mute);
    cursor: pointer;
}
.auth-eye:hover { color: var(--text); }
.auth-eye svg { width: 18px; height: 18px; }

.auth-remember {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
}
.auth-help {
    font-size: 11px;
    color: var(--text-mute);
}

.auth-submit {
    margin-top: 8px;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-submit svg { width: 16px; height: 16px; }

.auth-bottom {
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 14px;
}
.auth-bottom a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}
.auth-bottom a:hover { text-decoration: underline; }

/* Landing page — hero */
.landing { padding: 18px 28px 60px; max-width: 1200px; margin: 0 auto; }
.hero { padding: 60px 0; }
.hero-text { max-width: 720px; }
.hero-tag {
    display: inline-block;
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 24px;
}
.hero-title {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.05;
    margin: 12px 0 24px;
    color: var(--text);
    letter-spacing: -1px;
}
.hero-accent.green { color: var(--green); }
.hero-accent.red   { color: var(--red); }
.hero-sub {
    font-size: 17px;
    color: var(--text-dim);
    line-height: 1.55;
    margin-bottom: 28px;
}
.hero-cta {
    display: flex; gap: 12px; align-items: center;
    margin: 24px 0;
    flex-wrap: wrap;
}
.hero-btn {
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex; align-items: center; gap: 8px;
}
.hero-btn svg { width: 16px; height: 16px; }
.hero-trust {
    display: flex; gap: 22px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 0; list-style: none;
}
.hero-trust li {
    font-size: 12px;
    color: var(--text-mute);
    font-weight: 600;
}

@media (max-width: 720px) {
    .auth-card { padding: 24px 18px; max-width: 92vw; }
    .hero-title { font-size: 36px; }
    .auth-row-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   Phase 5+ — DESIGN PASS : fix boutons + formulaires + header public
   ============================================================ */

/* ─── Box-sizing global pour TOUS les form controls ─── */
.auth-section input,
.auth-section textarea,
.auth-section select,
.auth-section button,
.auth-input-wrap,
.auth-field > input {
    box-sizing: border-box !important;
}
.auth-section *, .landing *, .public-header * {
    box-sizing: border-box;
}

/* ─── BOUTONS quand ils sont sur <a> (liens) ─── */
a.primary-btn, a.ghost-btn,
a.primary-btn:visited, a.ghost-btn:visited,
button.primary-btn, button.ghost-btn {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    transition: filter 0.15s, transform 0.08s, box-shadow 0.15s, background 0.15s;
}

/* ─── PRIMARY-BTN propre (vert dégradé bien visible) ─── */
.primary-btn {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-d) 100%);
    color: white !important;
    box-shadow: 0 2px 10px rgba(106, 166, 255, 0.30);
    border: 1px solid transparent;
}
.primary-btn:hover  { filter: brightness(1.10); }
.primary-btn:active { transform: scale(0.97); }

/* Variante "primary-flavor" : VERT (CTA principal, utilisé sur landing/signup) */
.primary-btn.primary-flavor {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%);
    color: white !important;
    box-shadow: 0 3px 14px rgba(47, 212, 122, 0.40);
}
.primary-btn.primary-flavor:hover { filter: brightness(1.10); }

/* ─── GHOST-BTN propre ─── */
.ghost-btn {
    background: transparent;
    border: 1px solid var(--border) !important;
    color: var(--text-dim) !important;
}
.ghost-btn:hover {
    border-color: var(--accent) !important;
    color: var(--text) !important;
    background: rgba(106, 166, 255, 0.08);
}

/* ─── Header public : layout propre, pas de débordement ─── */
.public-header {
    max-width: 100%;
    flex-wrap: wrap;
    gap: 12px;
}
.public-nav {
    flex-wrap: wrap;
}
.public-nav .ghost-btn,
.public-nav .primary-btn {
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
}

/* ─── Theme toggle propre (rond avec icône centrée) ─── */
.theme-toggle {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    color: var(--text-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: rgba(106, 166, 255, 0.10);
    border-color: var(--accent);
    color: var(--text);
}
.theme-toggle svg {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s;
}
.theme-toggle .icon-sun  { opacity: 0; }
.theme-toggle .icon-moon { opacity: 1; }
.theme-toggle[data-current="light"] .icon-sun  { opacity: 1; }
.theme-toggle[data-current="light"] .icon-moon { opacity: 0; }

/* ─── Auth card : largeur fixe, pas de débordement ─── */
.auth-card {
    box-sizing: border-box;
    width: 460px;
    max-width: calc(100vw - 36px);
}
.auth-row-2 {
    box-sizing: border-box;
}
.auth-row-2 > .auth-field {
    min-width: 0;   /* indispensable pour que grid 1fr 1fr ne déborde pas */
}

/* ─── Inputs : largeur 100% du parent, pas de débordement ─── */
.auth-field > input,
.auth-input-wrap {
    width: 100%;
    box-sizing: border-box;
}
.auth-input-wrap > input {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* ─── Submit button responsive ─── */
.auth-submit {
    width: 100%;
    box-sizing: border-box;
    text-decoration: none !important;
}

/* ─── Landing CTA hero responsive ─── */
.hero-btn {
    text-decoration: none !important;
}

/* ─── Brand link (logo K en haut à gauche) propre ─── */
.brand-link, .brand-link:visited {
    text-decoration: none !important;
    color: var(--text);
}

/* ─── Pour les écrans étroits : fix la card auth ─── */
@media (max-width: 480px) {
    .public-header {
        gap: 8px;
        margin-bottom: 20px;
    }
    .public-nav .ghost-btn,
    .public-nav .primary-btn {
        padding: 0 12px;
        font-size: 12px;
    }
    .auth-section {
        padding: 14px 12px 28px;
    }
    .auth-card {
        padding: 22px 16px;
        max-width: 100%;
    }
    .auth-row-2 {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ============================================================
   Fix #1 — Theme toggle : centrer optiquement la lune
   ============================================================ */
.theme-toggle .icon-moon {
    transform: translate(calc(-50% - 1px), calc(-50% + 1px)) rotate(-12deg) !important;
}
.theme-toggle[data-current="light"] .icon-moon,
.theme-toggle .icon-sun {
    transform: translate(-50%, -50%) !important;
}

/* ============================================================
   Fix #2 — Boutons dispositifs : couleur par type
   ============================================================ */
.dtb-swatch[data-color="d-tout-t"]  { background: #dc2626 !important; }
.dtb-swatch[data-color="d-stricte"] { background: #ec4899 !important; }
.dtb-swatch[data-color="d-3-2-1"]   { background: #ef4444 !important; }
.dtb-swatch[data-color="d-3-3"]     { background: #f59e0b !important; }
.dtb-swatch[data-color="d-2-4-dec"] { background: #a855f7 !important; }
.dtb-swatch[data-color="d-2-4"]     { background: #8b5cf6 !important; }
.dtb-swatch[data-color="d-1-5-dec"] { background: #06b6d4 !important; }
.dtb-swatch[data-color="d-1-5"]     { background: #3b82f6 !important; }
.dtb-swatch[data-color="d-0-6"]     { background: #16a34a !important; }
.dtb-swatch[data-color="d-fin-p"]   { background: #64748b !important; }
.dtb-swatch[data-color="d-fin-m"]   { background: #0f172a !important; border: 1px solid #475569; }

.def-type-btn .dtb-label {
    color: var(--text) !important;
    font-weight: 700;
    white-space: nowrap;
}
[data-theme="light"] .def-type-btn .dtb-label { color: #0f172a !important; }

/* "armé" : background coloré selon dispositif */
.def-type-btn[data-type="d-tout-t"].armed  { background: rgba(220, 38, 38, 0.22);  border-color: #dc2626 !important; }
.def-type-btn[data-type="d-stricte"].armed { background: rgba(236, 72, 153, 0.22); border-color: #ec4899 !important; }
.def-type-btn[data-type="d-3-2-1"].armed   { background: rgba(239, 68, 68, 0.22);  border-color: #ef4444 !important; }
.def-type-btn[data-type="d-3-3"].armed     { background: rgba(245, 158, 11, 0.22); border-color: #f59e0b !important; }
.def-type-btn[data-type="d-2-4-dec"].armed { background: rgba(168, 85, 247, 0.22); border-color: #a855f7 !important; }
.def-type-btn[data-type="d-2-4"].armed     { background: rgba(139, 92, 246, 0.22); border-color: #8b5cf6 !important; }
.def-type-btn[data-type="d-1-5-dec"].armed { background: rgba(6, 182, 212, 0.22);  border-color: #06b6d4 !important; }
.def-type-btn[data-type="d-1-5"].armed     { background: rgba(59, 130, 246, 0.22); border-color: #3b82f6 !important; }
.def-type-btn[data-type="d-0-6"].armed     { background: rgba(22, 163, 74, 0.22);  border-color: #16a34a !important; }
.def-type-btn[data-type="d-fin-p"].armed   { background: rgba(100, 116, 139, 0.22); border-color: #64748b !important; }
.def-type-btn[data-type="d-fin-m"].armed   { background: rgba(15, 23, 42, 0.40);   border-color: #475569 !important; }

/* ============================================================
   Fix — Couleur des blocs Défense dans la timeline ([data-disp])
   ============================================================ */
.dtl-block[data-disp="d-tout-t"]  { --def-color: #dc2626; }
.dtl-block[data-disp="d-stricte"] { --def-color: #ec4899; }
.dtl-block[data-disp="d-3-2-1"]   { --def-color: #ef4444; }
.dtl-block[data-disp="d-3-3"]     { --def-color: #f59e0b; }
.dtl-block[data-disp="d-2-4-dec"] { --def-color: #a855f7; }
.dtl-block[data-disp="d-2-4"]     { --def-color: #8b5cf6; }
.dtl-block[data-disp="d-1-5-dec"] { --def-color: #06b6d4; }
.dtl-block[data-disp="d-1-5"]     { --def-color: #3b82f6; }
.dtl-block[data-disp="d-0-6"]     { --def-color: #16a34a; }
.dtl-block[data-disp="d-fin-p"]   { --def-color: #64748b; }
.dtl-block[data-disp="d-fin-m"]   { --def-color: #0f172a; }

/* ============================================================
   Phase 5.10 — Flèches tendance : plus contrastées et lisibles
   - up    : vert vif avec fond léger
   - down  : rouge vif avec fond léger
   - flat  : gris neutre (plus orange ambigu)
   ============================================================ */
.trend-icon {
    width: 36px !important;
    height: 28px !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    border: 1.5px solid transparent;
    transition: all 0.2s;
}
.trend-icon.up {
    color: #16a34a !important;
    background: rgba(22, 163, 74, 0.16) !important;
    border-color: rgba(22, 163, 74, 0.55) !important;
    text-shadow: 0 0 8px rgba(22, 163, 74, 0.45);
}
.trend-icon.down {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(239, 68, 68, 0.55) !important;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
}
.trend-icon.flat {
    color: var(--text-mute) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--border-soft) !important;
    text-shadow: none;
}
[data-theme="light"] .trend-icon.flat {
    color: #64748b !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ============================================================
   Phase 6.2 — Vue création de match
   ============================================================ */
.page-create {
    grid-column: 2 / -1;
    padding: 28px;
    overflow: auto;
}
.create-card {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 32px;
    max-width: 800px;
    margin: 0 auto 40px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.25);
}
.create-head { margin-bottom: 28px; }
.create-back {
    display: inline-block;
    color: var(--accent);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}
.create-back:hover { text-decoration: underline; }
.create-head h1 {
    font-size: 26px; font-weight: 900;
    color: var(--text);
    margin: 0 0 6px;
}
.create-head p {
    font-size: 13px; color: var(--text-dim);
    margin: 0;
}

.create-form { display: flex; flex-direction: column; gap: 24px; }

.cf-section {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 18px 20px;
}
.cf-section-title {
    font-size: 11px; font-weight: 900;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin: 0 0 14px;
}

.cf-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.cf-type-card {
    display: flex; flex-direction: column;
    padding: 18px 14px 14px;
    background: var(--bg-3);
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    position: relative;
}
.cf-type-card input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cf-type-card:hover {
    border-color: var(--accent);
    background: rgba(106, 166, 255, 0.06);
}
.cf-type-card.selected {
    border-color: var(--green);
    background: rgba(47, 212, 122, 0.10);
    box-shadow: 0 4px 16px rgba(47, 212, 122, 0.18);
}
.cf-type-icon { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.cf-type-name {
    font-size: 14px; font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}
.cf-type-desc {
    font-size: 11px;
    color: var(--text-mute);
    line-height: 1.4;
}

.cf-row-2, .cf-row-3 {
    display: grid;
    gap: 14px;
    margin-top: 12px;
}
.cf-row-2 { grid-template-columns: 1fr 1fr; }
.cf-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.cf-row-2:first-of-type, .cf-row-3:first-of-type { margin-top: 0; }

.cf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-field label {
    font-size: 10.5px; font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cf-field input,
.cf-field select {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.cf-field input:focus,
.cf-field select:focus {
    outline: none;
    border-color: var(--accent);
}
.cf-field select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2364748b' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
}
.cf-score-pair {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cf-score-pair input {
    text-align: center;
    width: 60px;
}
.cf-score-pair span {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-mute);
}
.cf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}
.cf-actions .ghost-btn,
.cf-actions .primary-btn {
    height: 44px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 800;
}

@media (max-width: 720px) {
    .page-create { padding: 16px; }
    .create-card { padding: 20px 16px; }
    .cf-type-grid { grid-template-columns: 1fr; }
    .cf-row-2, .cf-row-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Phase 6.3 — Vue équipe (édition inline)
   ============================================================ */
.page-team {
    grid-column: 2 / -1;
    padding: 28px;
    overflow: auto;
}
.team-head {
    margin-bottom: 22px;
}
.team-head h1 {
    font-size: 24px; font-weight: 900;
    margin: 0 0 6px;
    color: var(--text);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.team-head-badge {
    display: inline-block;
    font-size: 10px; font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(106, 166, 255, 0.15);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.team-head-badge.level {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}
.team-head p {
    color: var(--text-dim);
    margin: 0;
    font-size: 13px;
}
.team-head p a { color: var(--accent); text-decoration: none; }
.team-head p a:hover { text-decoration: underline; }

/* ─── Tableau joueurs ─── */
.team-table-wrap {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}
.team-table {
    width: 100%;
    border-collapse: collapse;
}
.team-table thead th {
    padding: 12px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 900;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-3);
}
.team-table .col-jersey  { width: 80px; text-align: center; }
.team-table .col-position { width: 100px; }
.team-table .col-status  { width: 90px; }
.team-table .col-actions { width: 40px; text-align: center; }

.team-table tbody tr {
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.12s;
}
.team-table tbody tr:hover { background: rgba(106, 166, 255, 0.04); }
.team-table tbody tr:last-child { border-bottom: none; }

.team-table tbody td {
    padding: 4px 8px;
    vertical-align: middle;
}

/* Inputs inline */
.cell-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.15s;
}
.cell-input:hover {
    background: rgba(106, 166, 255, 0.08);
    border-color: var(--border-soft);
}
.cell-input:focus {
    outline: none;
    background: var(--bg-3);
    border-color: var(--accent);
}
.cell-input.num {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.cell-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 10 6'><path fill='%2364748b' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 22px;
    cursor: pointer;
}

/* Bouton supprimer ligne */
.btn-row-delete {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text-mute);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-row-delete:hover {
    background: rgba(242, 84, 69, 0.15);
    border-color: var(--red);
    color: var(--red);
    transform: scale(1.1);
}

.th-help {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-mute);
    font-size: 9px;
    text-align: center;
    line-height: 14px;
    cursor: help;
    margin-left: 4px;
}

/* ─── Form ajout joueur ─── */
.team-add-card {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 20px 24px;
}
.team-add-card h3 {
    font-size: 14px; font-weight: 800;
    color: var(--text);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.team-add-form {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 110px auto;
    gap: 10px;
    align-items: end;
}
.team-add-form .cf-field { gap: 4px; }
.team-add-form .cf-field label { font-size: 9.5px; }
.team-add-form .cf-field input,
.team-add-form .cf-field select {
    padding: 9px 10px;
    font-size: 13px;
}
.team-add-btn {
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
}
.team-add-help {
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-mute);
    line-height: 1.5;
}
.team-add-help strong {
    color: var(--text-dim);
    font-weight: 700;
}

@media (max-width: 720px) {
    .page-team { padding: 16px; }
    .team-add-form { grid-template-columns: 1fr 1fr; }
    .team-add-btn { grid-column: 1 / -1; }
}

/* ============================================================
   Logo KromBall (image) — tailles adaptées par contexte
   ============================================================ */
.brand-logo {
    display: block;
    object-fit: contain;
    border-radius: 11px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30);
}

/* Sidebar : petit (38x38) */
.sidebar-brand .brand-logo {
    width: 44px;
    height: 44px;
    margin: 0 auto;
}

/* Header public (landing, login, signup) : moyen (40x40) */
.public-header .brand-logo {
    width: 40px;
    height: 40px;
}

/* Auth card head : plus grand pour l'effet "logo de marque" */
.auth-card-head .brand-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
}

/* Mode clair : ombre adaptée */
[data-theme="light"] .brand-logo {
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RÉGLAGES — Phase 6.5 (24 mai 2026)
   Layout 6 onglets + tier badges + sliders + Cap'tain KromBall
   ═══════════════════════════════════════════════════════════════════════════ */

.settings-page {
    padding: 24px 32px 60px;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.settings-page > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.settings-page * { box-sizing: border-box; }

/* La sticky nav doit rester visible pendant le scroll de .settings-page */
.settings-nav { top: 24px; }

.settings-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 20px;
    flex-wrap: wrap;
}
.settings-head h1 {
    font-size: 28px;
    margin: 0 0 4px;
    color: var(--text);
}
.settings-sub {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0;
}

/* Tier badge top-right */
.settings-tier-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.settings-tier-badge .badge-tag {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    color: white;
}
.settings-tier-badge .badge-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.tier-kromball1 .badge-tag, .sub-tier-badge.tier-kromball1 { background: #6aa6ff; }
.tier-kromball2 .badge-tag, .sub-tier-badge.tier-kromball2 { background: #2fd47a; }
.tier-kromball3 .badge-tag, .sub-tier-badge.tier-kromball3 { background: linear-gradient(135deg, #f5a623, #e8460f); }

/* Alerts */
.settings-page .alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
}
.settings-page .alert-success { background: rgba(47, 212, 122, 0.12); color: #2fd47a; border: 1px solid rgba(47, 212, 122, 0.25); }
.settings-page .alert-error   { background: rgba(242, 84, 69, 0.12);  color: #f25445; border: 1px solid rgba(242, 84, 69, 0.25); }

/* Layout 2 colonnes */
.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
}

/* Nav latérale */
.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 12px;
    height: fit-content;
    position: sticky;
    top: 20px;
}
.snav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    width: 100%;
    position: relative;
}
.snav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.snav-item:hover {
    background: var(--bg-3);
    color: var(--text);
}
.snav-item.active {
    background: rgba(106, 166, 255, 0.10);
    color: var(--accent);
    border-color: rgba(106, 166, 255, 0.25);
}
.snav-lock {
    margin-left: auto;
    font-size: 10px;
    font-style: normal;
}

/* Main area */
.settings-main {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 28px 32px;
    min-height: 600px;
}
.settings-tab[hidden] { display: none; }
.tab-title {
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--text);
}
.tab-intro {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0 0 24px;
}

/* Groupes de réglages */
.setting-group {
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 18px;
}
.setting-group > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.setting-group > header h3 {
    font-size: 14px;
    margin: 0;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.setting-help {
    font-size: 12.5px;
    color: var(--text-dim);
    margin: 4px 0 16px;
    line-height: 1.55;
}
.setting-help strong { color: var(--text); }
.setting-help a { color: var(--accent); }

.setting-group.is-locked {
    opacity: 0.6;
    position: relative;
}
.setting-group.is-locked::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 49%, rgba(255,255,255,0.02) 50%, transparent 51%);
    border-radius: 12px;
    pointer-events: none;
}
.lock-badge {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-dim);
    background: var(--bg-2);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Niveau de jeu — cartes radio */
.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.level-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 12px;
    background: var(--bg-2);
    border: 2px solid var(--border-soft);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.level-card:hover {
    border-color: var(--border);
}
.level-card.active {
    border-color: var(--accent);
    background: rgba(106, 166, 255, 0.10);
}
.level-card input[type="radio"] { display: none; }
.level-card .level-name {
    font-weight: 700;
    color: var(--text);
    font-size: 13px;
}
.level-card .level-preset {
    font-size: 10.5px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.level-card .dot-green { color: #2fd47a; }
.level-card .dot-red { color: #f25445; }
.level-card .dim { color: var(--text-mute); font-style: italic; }
.level-card .level-alert {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}
.level-card input:disabled + * + * { cursor: not-allowed; }

/* Sliders */
.dual-slider { display: flex; flex-direction: column; gap: 14px; }
.slider-row {
    display: grid;
    grid-template-columns: 220px 1fr 110px;
    gap: 16px;
    align-items: center;
}
.slider-row label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
}
.set-slider {
    width: 100%;
    appearance: none;
    height: 6px;
    background: var(--bg-2);
    border-radius: 3px;
    outline: none;
}
.set-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px; height: 18px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.set-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-3);
}
.set-slider:disabled { opacity: 0.4; cursor: not-allowed; }
.slider-row .slider-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    text-align: right;
}

/* Toggle row (switches inline) */
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border-soft);
}
.toggle-row:first-of-type { border-top: none; padding-top: 4px; }
.toggle-row > div:first-child { flex: 1; }
.toggle-row strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.toggle-row p { font-size: 11.5px; color: var(--text-dim); margin: 0; }

/* Radio cards (binaire mode, langue, etc.) */
.radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.radio-cards.two  { grid-template-columns: 1fr 1fr; }
.radio-cards.three { grid-template-columns: repeat(3, 1fr); }
.radio-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 14px;
    background: var(--bg-2);
    border: 2px solid var(--border-soft);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.radio-card input[type="radio"] { display: none; }
.radio-card strong { font-size: 13px; color: var(--text); }
.radio-card span { font-size: 11px; color: var(--text-dim); }
.radio-card:hover { border-color: var(--border); }
.radio-card.active {
    border-color: var(--accent);
    background: rgba(106, 166, 255, 0.10);
}
.radio-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.lock-tag {
    position: absolute;
    top: 6px; right: 8px;
    font-size: 9px;
    font-style: normal;
    background: var(--bg-3);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-dim);
    border: 1px solid var(--border-soft);
}

/* Info group (sans setting) */
.setting-group.is-info {
    border-style: dashed;
    background: var(--bg-2);
}

/* === COMPTE === */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.profile-grid .auth-field { min-width: 0; }
.profile-grid .auth-field label {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    display: block;
}
.profile-grid .auth-field input {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text);
    transition: border-color 0.15s;
}
.profile-grid .auth-field input:focus {
    border-color: var(--accent);
    outline: none;
}

.sub-summary { margin-bottom: 18px; }
.sub-card.current {
    background: linear-gradient(135deg, rgba(47, 212, 122, 0.08), rgba(106, 166, 255, 0.08));
    border: 1px solid rgba(47, 212, 122, 0.30);
    border-radius: 12px;
    padding: 18px 20px;
}
.sub-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
}
.sub-tier-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    color: white;
}
.sub-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}
.sub-price small {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
}
.sub-meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-dim);
}
.sub-h4 {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-dim);
    margin: 18px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-launch {
    background: linear-gradient(135deg, #f5a623, #e8460f);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

/* Tier cards */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.tier-card {
    background: var(--bg-2);
    border: 2px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tier-card.current { border-color: var(--accent); }
.tier-card-head {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-weight: 700;
    font-size: 12.5px;
}
.tier-card-head.tier-kromball1 { background: linear-gradient(135deg, #6aa6ff, #4a82d8); }
.tier-card-head.tier-kromball2 { background: linear-gradient(135deg, #2fd47a, #1ea861); }
.tier-card-head.tier-kromball3 { background: linear-gradient(135deg, #f5a623, #e8460f); }
.tier-card-head .tier-tag {
    padding: 2px 7px;
    background: rgba(255,255,255,0.25);
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 800;
}
.tier-prices {
    list-style: none;
    padding: 12px 14px;
    margin: 0;
    flex: 1;
}
.tier-prices li {
    font-size: 12.5px;
    color: var(--text-dim);
    padding: 4px 0;
}
.tier-prices strong { color: var(--text); font-size: 14px; }
.tier-card button {
    margin: 0 12px 14px;
}

/* Cap'tain KromBall */
.cap-section header h3 { color: #f5a623; }
.cap-sub {
    color: var(--text-dim);
    font-weight: 500;
    font-size: 12px;
}
.cap-locked-note {
    background: var(--bg-2);
    padding: 14px;
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 12.5px;
    border: 1px dashed var(--border);
}
.cap-code-setup {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.cap-code-setup strong { display: block; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.cap-code-setup p { margin: 0 0 10px; font-size: 12px; color: var(--text-dim); }
.cap-code-input {
    display: flex;
    gap: 10px;
    align-items: center;
}
.cap-code-input input {
    width: 100px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 6px;
    color: var(--text);
}
.cap-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.cap-stat {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
}
.cap-stat-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 6px;
}
.cap-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}
.cap-stat-value small { font-size: 11px; font-weight: 500; color: var(--text-dim); }
.cap-list-red    { color: #f25445; }
.cap-list-orange { color: #f5a623; }
.cap-list-green  { color: #2fd47a; }

.cap-progress {
    margin-bottom: 14px;
}
.cap-progress-bar {
    height: 8px;
    background: var(--bg-2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.cap-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #f5a623, #2fd47a);
    border-radius: 4px;
    transition: width 0.4s;
}
.cap-progress small { font-size: 11px; color: var(--text-dim); }

.cap-actions { margin-bottom: 14px; }
.cap-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-dim);
    font-size: 12.5px;
    font-style: italic;
}
.cap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    overflow: hidden;
}
.cap-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-2);
}
.cap-list li:last-child { border-bottom: none; }
.cap-list strong { font-size: 13px; color: var(--text); }
.cap-list small { font-size: 11px; color: var(--text-dim); display: block; }
.cap-item-status {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cap-item-status.status-invited  { background: rgba(106,166,255,0.15); color: #6aa6ff; }
.cap-item-status.status-pending  { background: rgba(245,166,35,0.15);  color: #f5a623; }
.cap-item-status.status-active   { background: rgba(47,212,122,0.15);  color: #2fd47a; }
.cap-item-status.status-lapsed   { background: rgba(242,84,69,0.15);   color: #f25445; }
.cap-item-status.status-cancelled{ background: var(--bg-3); color: var(--text-mute); }

/* Action rows (clear cache, export, delete account) */
.action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border-soft);
}
.action-row:first-of-type { border-top: none; padding-top: 4px; }
.action-row > div:first-child { flex: 1; }
.action-row strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.action-row p { font-size: 11.5px; color: var(--text-dim); margin: 0; }
.danger-row strong { color: var(--red); }

/* === PREMIUM === */
.premium-cta {
    background: linear-gradient(135deg, rgba(245,166,35,0.10), rgba(232,70,15,0.10));
    border: 1px solid rgba(245,166,35,0.30);
    border-radius: 12px;
    padding: 20px 24px;
    text-align: center;
    margin-bottom: 24px;
}
.premium-cta strong {
    display: block;
    font-size: 16px;
    color: var(--text);
    margin-bottom: 4px;
}
.premium-cta p {
    font-size: 12px;
    color: var(--text-dim);
    margin: 0 0 14px;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.feature-card {
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 16px 18px;
    position: relative;
}
.feature-card.locked { opacity: 0.55; }
.feature-card.unlocked { border-color: rgba(245,166,35,0.30); background: linear-gradient(135deg, var(--bg-3) 0%, rgba(245,166,35,0.05) 100%); }
.feature-card .feature-icon { font-size: 20px; margin-bottom: 6px; }
.feature-card strong { font-size: 13px; color: var(--text); display: block; margin-bottom: 4px; }
.feature-card p { font-size: 11.5px; color: var(--text-dim); margin: 0; line-height: 1.45; }

.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.price-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
.price-table th small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.price-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--text);
}
.price-table tr.cur td {
    background: rgba(106,166,255,0.06);
}
.price-table td:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* À PROPOS */
.about-meta {
    list-style: none;
    padding: 0;
    margin: 0;
}
.about-meta li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--text-dim);
}
.about-meta li:last-child { border-bottom: none; }
.about-meta strong { color: var(--text); }
.about-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.about-footer {
    text-align: center;
    font-size: 11px;
    color: var(--text-mute);
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

/* Responsive */
@media (max-width: 900px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav {
        position: relative;
        top: auto;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
    }
    .snav-item { flex-shrink: 0; padding: 8px 12px; }
    .snav-item span { font-size: 12px; }
    .profile-grid { grid-template-columns: 1fr; }
    .slider-row { grid-template-columns: 1fr; gap: 6px; }
    .slider-row .slider-value { text-align: left; }
    .cap-list li { grid-template-columns: 1fr; gap: 8px; }
    .cap-stats { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RÉGLAGES RUNTIME — appliqués via data-* sur <body> (cahier 24 mai)
   ═══════════════════════════════════════════════════════════════════════════ */

/* DENSITÉ LARGE — gros boutons pour bord de terrain */
body[data-density="large"] .act2-btn {
    font-size: 22px;
    padding: 14px 18px;
    min-width: 56px;
    min-height: 56px;
}
body[data-density="large"] .tb-pill {
    font-size: 13px;
    padding: 8px 14px;
}
body[data-density="large"] .cell-sanct {
    font-size: 14px;
    padding: 8px 12px;
    min-height: 40px;
}
body[data-density="large"] .nav-item {
    padding: 14px 10px;
}
body[data-density="large"] .primary-btn,
body[data-density="large"] .ghost-btn {
    min-height: 44px;
    font-size: 14px;
}

/* TAILLE POLICE */
body[data-font-size="small"]  { font-size: 13px; }
body[data-font-size="medium"] { font-size: 14px; }
body[data-font-size="large"]  { font-size: 16px; }
body[data-font-size="large"] .cell-pct { font-size: 22px; }
body[data-font-size="large"] .cell-name-v2 { font-size: 13.5px; }
body[data-font-size="large"] .home-title { font-size: 32px; }
body[data-font-size="large"] .tab-title  { font-size: 26px; }

/* Bouton clôture match — caché si réglage off */
body[data-show-close-btn="0"] .end-match-btn,
body[data-show-close-btn="0"] #btnEndMatch,
body[data-show-close-btn="0"] .btn-close-match,
body[data-show-close-btn="0"] #btnCloseMatch { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Mode capture binary_att_def — 4 boutons à l'HORIZONTALE sur une ligne.
   Layout 4 colonnes × 1 ligne : ATT+ | ATT- | DEF+ | DEF-
   Hauteur identique au mode +/- simple (~42px).
   Override des règles d'origine définies plus haut dans le fichier.
   ═══════════════════════════════════════════════════════════════════════════ */
.cell-actions-4 {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    height: 44px !important;
    align-items: stretch;
}
.act4-btn {
    flex: none !important;
    width: 100%;
    height: 100% !important;
    min-height: 40px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s, filter 0.15s, box-shadow 0.15s;
    padding: 0 !important;
}
.act4-btn:hover:not(:disabled)  { filter: brightness(1.12); }
.act4-btn:active:not(:disabled) { transform: scale(0.94); }
.act4-btn:disabled              { opacity: 0.28; pointer-events: none; box-shadow: none; }

/* Ordre forcé dans le grid : ATT+ | ATT- | DEF+ | DEF- */
.act4-att-plus  { grid-row: 1; grid-column: 1; }
.act4-att-minus { grid-row: 1; grid-column: 2; }
.act4-def-plus  { grid-row: 1; grid-column: 3; }
.act4-def-minus { grid-row: 1; grid-column: 4; }

/* Couleurs : ATT vert/rouge — DEF bleu/violet (cohérent + diff visuelle phase) */
.act4-att-plus  {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%);
    border-color: var(--green-d);
    box-shadow: 0 3px 10px rgba(47, 212, 122, 0.32), inset 0 0 0 1.5px rgba(255,255,255,0.18);
}
.act4-att-minus {
    background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
    border-color: var(--red-d);
    box-shadow: 0 3px 10px rgba(242, 84, 69, 0.32), inset 0 0 0 1.5px rgba(255,255,255,0.18);
}
.act4-def-plus  {
    background: linear-gradient(180deg, #6aa6ff 0%, #4a82d8 100%);
    border-color: #4a82d8;
    box-shadow: 0 3px 10px rgba(106, 166, 255, 0.32), inset 0 0 0 1.5px rgba(255,255,255,0.18);
}
.act4-def-minus {
    background: linear-gradient(180deg, #b47aff 0%, #8e5fd9 100%);
    border-color: #8e5fd9;
    box-shadow: 0 3px 10px rgba(180, 122, 255, 0.32), inset 0 0 0 1.5px rgba(255,255,255,0.18);
}

/* Densité large — boutons un peu plus hauts pour le bord de terrain */
body[data-density="large"] .cell-actions-4 {
    height: 54px !important;
    gap: 8px !important;
}
body[data-density="large"] .act4-btn {
    font-size: 15px;
}

/* Responsive — sur petits écrans, baisse la police mais on reste à 4×1 */
@media (max-width: 1280px) {
    .cell-actions-4 { height: 42px !important; gap: 5px !important; }
    .act4-btn       { font-size: 12px; }
}
@media (max-width: 1024px) {
    .cell-actions-4 { height: 38px !important; gap: 4px !important; }
    .act4-btn       { font-size: 11px; border-radius: 8px; letter-spacing: 0.2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING HERO — Layout 2 colonnes (texte gauche + image droite)
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 50px 0 60px;
}
.hero-split .hero-text { max-width: none; }

.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
}
.hero-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
    animation: heroFadeIn 0.6s ease-out;
}

/* Glow rouge/vert derrière l'image — rappelle l'identité KromBall */
.hero-visual::before {
    content: '';
    position: absolute;
    inset: 12% 8%;
    background:
        radial-gradient(circle at 30% 50%, rgba(242, 84, 69, 0.18), transparent 55%),
        radial-gradient(circle at 70% 50%, rgba(47, 212, 122, 0.18), transparent 55%);
    z-index: 0;
    filter: blur(20px);
    pointer-events: none;
}
.hero-visual .hero-image { position: relative; z-index: 1; }

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* Tag jolie ombre + harmonisation */
.hero-tag { background: rgba(245, 158, 11, 0.16); }

/* Titre — plus tight pour tenir avec l'image */
.hero-split .hero-title {
    font-size: 46px;
    line-height: 1.12;
    margin-bottom: 22px;
}
.hero-split .hero-sub { font-size: 16px; }

/* Mode clair — glow plus discret */
[data-theme="light"] .hero-visual::before {
    inset: 14% 10%;
    background:
        radial-gradient(circle at 30% 50%, rgba(242, 84, 69, 0.10), transparent 55%),
        radial-gradient(circle at 70% 50%, rgba(47, 212, 122, 0.10), transparent 55%);
}
[data-theme="light"] .hero-image {
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.18));
}

/* Responsive — sous 980px on empile texte puis image */
@media (max-width: 980px) {
    .hero-split {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 30px 0 50px;
    }
    .hero-visual { min-height: auto; order: -1; }
    .hero-image { max-width: 420px; }
    .hero-split .hero-title { font-size: 38px; }
}
@media (max-width: 560px) {
    .hero-split .hero-title { font-size: 30px; }
    .hero-image { max-width: 320px; }
    .hero-visual::before { inset: 18% 8%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RAPPORT MATCH — Phase 6.4
   ═══════════════════════════════════════════════════════════════════════════ */
.report-page {
    padding: 20px 28px 60px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
.report-page > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.report-page * { box-sizing: border-box; }

/* HEADER */
.report-head {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.rh-left { display: flex; gap: 8px; }
.rh-center { text-align: center; }
.rh-center h1 { font-size: 22px; margin: 0 0 4px; color: var(--text); }
.rh-bandeau { font-size: 12px; color: var(--text-dim); margin: 0; }
.rh-right { display: flex; justify-content: flex-end; gap: 8px; }

/* SCOPE TOGGLE */
.report-scope {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 6px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.rscope-btn {
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: all 0.15s;
    border: 1.5px solid transparent;
}
.rscope-btn:hover { color: var(--text); background: var(--bg-3); }
.rscope-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent-d);
    box-shadow: 0 3px 10px rgba(106, 166, 255, 0.30);
}
.rscope-btn small { font-size: 9.5px; font-weight: 600; opacity: 0.8; }

/* SCOREBOARD */
.report-scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 24px;
}
.rsb-team { text-align: center; }
.rsb-home { text-align: right; }
.rsb-away { text-align: left; }
.rsb-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 800;
}
.rsb-score {
    font-size: 64px;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
}
.rsb-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 200px;
}
.rsb-result {
    font-size: 18px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 8px;
}
.rsb-result.win  { background: rgba(47, 212, 122, 0.18); color: #2fd47a; }
.rsb-result.loss { background: rgba(242, 84, 69, 0.18);  color: #f25445; }
.rsb-result.draw { background: rgba(106, 166, 255, 0.18); color: #6aa6ff; }
.rsb-diff {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
}
.rsb-diff small {
    display: block;
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    margin-top: -4px;
}
.rsb-duration {
    font-size: 11.5px;
    color: var(--text-mute);
    font-weight: 600;
}

/* CARDS SYNTHÈSE */
.report-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.rcard {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 16px 18px;
}
.rcard-team { border-color: rgba(106, 166, 255, 0.25); }
.rcard-best { border-color: rgba(47, 212, 122, 0.30); background: linear-gradient(135deg, var(--bg-2), rgba(47, 212, 122, 0.05)); }
.rcard-worst { border-color: rgba(242, 84, 69, 0.30); }
.rcard-most  { border-color: rgba(245, 166, 35, 0.30); }
.rc-header {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.rc-icon { font-size: 16px; }
.rc-name {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.2;
}
.rc-name strong { font-size: 14px; }
.rc-big {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    margin: 6px 0;
}
.rc-big.green   { color: #2fd47a; }
.rc-big.orange  { color: #f5a623; }
.rc-big.red     { color: #f25445; }
.rc-big.neutral { color: var(--text); }
.rc-sub {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.5;
}
.rc-sub small { color: var(--text-mute); font-size: 10px; }
.rc-plus  { color: #2fd47a; font-weight: 700; }
.rc-minus { color: #f25445; font-weight: 700; }

/* SECTIONS GENERIC */
.report-section {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 16px;
}
.rs-title {
    font-size: 14px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin: 0 0 14px;
}
.rs-empty {
    text-align: center;
    color: var(--text-dim);
    font-size: 12.5px;
    font-style: italic;
    padding: 14px;
}

/* TABLEAU JOUEURS */
.rtable-wrap {
    overflow-x: auto;
    margin: 0 -8px;
    padding: 0 8px;
}
.rtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text);
}
.rtable thead th {
    text-align: left;
    padding: 9px 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-mute);
    letter-spacing: 0.6px;
    border-bottom: 2px solid var(--border);
    background: var(--bg-3);
    position: sticky;
    top: 0;
}
.rtable tbody td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}
.rtable tbody tr:hover { background: var(--bg-3); }
.rtable tbody tr.r-empty td { opacity: 0.4; }
.rt-num {
    font-weight: 800;
    font-size: 14px;
    color: var(--accent);
    width: 36px;
}
.rt-name strong { display: block; font-size: 13px; }
.rt-name small { font-size: 11px; color: var(--text-dim); }
.rt-pos {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    background: var(--bg-3);
    color: var(--text-dim);
    border: 1px solid var(--border-soft);
}
.rt-pos.pos-gb  { background: rgba(245, 166, 35, 0.18); color: #f5a623; border-color: rgba(245, 166, 35, 0.4); }
.rt-pos.pos-def { background: rgba(180, 122, 255, 0.18); color: #b47aff; border-color: rgba(180, 122, 255, 0.4); }
.rt-time { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 12px; }
.rt-plus  { color: #2fd47a; font-weight: 700; }
.rt-minus { color: #f25445; font-weight: 700; }
.rt-count { font-weight: 800; }
.rt-pct {
    font-weight: 800;
    font-size: 14px;
}
.rt-color { text-align: center; }
.dot-color {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
}
.dot-color.dot-green   { background: #2fd47a; }
.dot-color.dot-orange  { background: #f5a623; }
.dot-color.dot-red     { background: #f25445; }
.dot-color.dot-neutral { background: var(--border); }
.rt-trend { font-size: 16px; }
.rt-mini { font-size: 11px; color: var(--text-dim); }
.rt-dim  { color: var(--text-mute); font-size: 11px; }

/* 2 COLUMNS layout pour défense + buts */
.report-2cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.report-2cols .report-section { margin-bottom: 0; }

/* DEFENSE LIST */
.defense-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.def-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.def-name {
    font-size: 13px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.def-min { font-size: 12px; color: var(--text-dim); font-weight: 700; }
.def-pct { font-size: 14px; color: var(--text); font-weight: 800; min-width: 50px; text-align: right; }
.def-bar {
    height: 8px;
    background: var(--bg-3);
    border-radius: 4px;
    overflow: hidden;
}
.def-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-d));
    border-radius: 4px;
    transition: width 0.5s;
}
.def-meta { font-size: 10.5px; color: var(--text-mute); }

/* Couleurs par dispositif (rappel des couleurs match) */
.def-item[data-disp*="Tout terrain"] .def-bar span,
.def-item[data-disp*="0-6"] .def-bar span         { background: linear-gradient(90deg, #6aa6ff, #4a82d8); }
.def-item[data-disp*="3-3"] .def-bar span,
.def-item[data-disp*="1-5"] .def-bar span         { background: linear-gradient(90deg, #f5a623, #d97706); }
.def-item[data-disp*="0-6 alignée"] .def-bar span { background: linear-gradient(90deg, #b47aff, #8e5fd9); }

/* TIMELINE BUTS */
.goals-timeline {
    list-style: none; padding: 0; margin: 0;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.g-item {
    display: grid;
    grid-template-columns: 50px 60px 1fr;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-3);
    font-size: 12px;
}
.g-item.g-home { border-left: 4px solid #2fd47a; }
.g-item.g-away { border-left: 4px solid #f25445; }
.g-min { font-weight: 800; color: var(--text); font-size: 13px; }
.g-side {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.g-home .g-side { color: #2fd47a; }
.g-away .g-side { color: #f25445; }
.g-score {
    font-weight: 800;
    color: var(--text);
    font-size: 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* SANCTIONS LIST */
.sanct-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.sanct-list li {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    font-size: 12px;
}
.sanct-lvl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 12px;
}
.sanct-lvl.lvl-1 { background: rgba(245, 166, 35, 0.18); }
.sanct-lvl.lvl-2,
.sanct-lvl.lvl-3,
.sanct-lvl.lvl-4 { background: rgba(245, 166, 35, 0.18); color: #f5a623; }
.sanct-lvl.lvl-5 { background: rgba(242, 84, 69, 0.18); color: #f25445; }
.sanct-list small { color: var(--text-dim); font-size: 11px; }

/* FOOTER */
.report-foot {
    text-align: center;
    padding: 20px 0;
    color: var(--text-mute);
    font-size: 11px;
}

/* PRINT — pour le bouton "Exporter PDF" */
@media print {
    body { background: white !important; color: black !important; }
    .sidebar, .report-head .ghost-btn, .rh-right, .report-scope { display: none !important; }
    .report-page { padding: 12mm; height: auto; overflow: visible; }
    .report-scoreboard, .rcard, .report-section {
        background: white !important;
        border: 1px solid #ccc !important;
        color: black !important;
        page-break-inside: avoid;
    }
    .rsb-score, .rc-big, .rh-center h1 { color: black !important; }
}

/* Responsive */
@media (max-width: 980px) {
    .report-cards { grid-template-columns: 1fr 1fr; }
    .report-2cols { grid-template-columns: 1fr; }
    .report-head  { grid-template-columns: 1fr; gap: 10px; }
    .rh-center, .rh-left, .rh-right { text-align: center; justify-content: center; }
}
@media (max-width: 640px) {
    .report-cards { grid-template-columns: 1fr; }
    .rsb-score { font-size: 48px; }
    .rsb-divider { min-width: auto; }
    .report-scoreboard { padding: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTE RAPPORTS — /rapports
   ═══════════════════════════════════════════════════════════════════════════ */
.reports-index {
    padding: 28px 32px;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
}
.reports-index > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.reports-index * { box-sizing: border-box; }

.ri-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.ri-head h1 { font-size: 26px; margin: 0 0 4px; color: var(--text); }
.ri-sub { font-size: 13px; color: var(--text-dim); margin: 0; }

.ri-empty {
    text-align: center;
    padding: 60px 24px;
    background: var(--bg-2);
    border: 1px dashed var(--border);
    border-radius: 14px;
}
.ri-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.ri-empty h2 { font-size: 18px; margin: 0 0 8px; color: var(--text); }
.ri-empty p { font-size: 13px; color: var(--text-dim); margin: 0 0 18px; }

.ri-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ri-item {
    display: grid;
    grid-template-columns: 90px 110px 1fr 140px auto;
    gap: 18px;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    transition: border-color 0.15s, transform 0.15s;
}
.ri-item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.ri-date {
    text-align: center;
    line-height: 1.2;
}
.ri-date strong { display: block; font-size: 14px; color: var(--text); }
.ri-date small { font-size: 11px; color: var(--text-dim); }

.ri-status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ri-status-pill.st-planned { background: rgba(106, 166, 255, 0.15); color: #6aa6ff; }
.ri-status-pill.st-live    { background: rgba(242, 84, 69, 0.15);  color: #f25445; animation: pulse 2s infinite; }
.ri-status-pill.st-ended   { background: rgba(47, 212, 122, 0.15); color: #2fd47a; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.55 } }

.ri-vs {
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ri-vs-sep { color: var(--text-mute); font-weight: 600; font-size: 12px; }

.ri-score {
    text-align: center;
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.ri-score-sep { color: var(--text-mute); margin: 0 4px; font-weight: 600; }
.ri-score-dim { color: var(--text-mute); font-size: 16px; }
.ri-score-emoji { display: block; font-size: 16px; margin-top: 2px; }

.ri-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ri-actions .primary-btn,
.ri-actions .ghost-btn {
    padding: 8px 14px;
    font-size: 12px;
}

@media (max-width: 900px) {
    .ri-item { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ri-vs { grid-column: 1 / -1; order: 1; }
    .ri-score { grid-column: 1 / -1; order: 2; text-align: left; }
    .ri-actions { grid-column: 1 / -1; order: 3; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PWA — Page hors ligne + offline indicators
   ═══════════════════════════════════════════════════════════════════════════ */
.offline-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}
.offline-card {
    max-width: 480px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px;
    text-align: center;
    margin-top: 40px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.30);
}
.offline-icon {
    font-size: 56px;
    margin-bottom: 12px;
    animation: pulse 2s infinite;
}
.offline-card h1 { font-size: 24px; margin: 0 0 12px; color: var(--text); }
.offline-card p  { color: var(--text-dim); margin: 0 0 8px; font-size: 14px; }
.offline-meta   { font-size: 12px !important; color: var(--text-mute) !important; }
.offline-tips {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    background: var(--bg-3);
    border-radius: 10px;
    padding: 16px 18px;
}
.offline-tips li {
    font-size: 12.5px;
    color: var(--text-dim);
    padding: 4px 0;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING — Hero title 4 lignes (variante coupé/clin alterné blanc/rouge/vert)
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-title-4lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.05;
    margin-bottom: 24px;
}
.hero-title-4lines .ht-line {
    display: block;
    font-weight: 900;
    letter-spacing: -0.5px;
}
.hero-title-4lines .ht-white { color: var(--text); }
.hero-title-4lines .ht-red   { color: var(--red); }
.hero-title-4lines .ht-green { color: var(--green); }

/* Light mode : on garde la couleur du texte (déjà bien lisible sur clair) */
[data-theme="light"] .hero-title-4lines .ht-white { color: #0a1424; }

/* Texte mode clair (landing) — par défaut bg sombre, mais si user en light */
.landing[data-theme="light"] .hero-title-4lines .ht-white { color: #0a1424; }

/* Petite animation séquentielle à l'arrivée (effet "frappe") */
.hero-title-4lines .ht-line {
    opacity: 0;
    transform: translateY(8px);
    animation: htLine 0.45s ease-out forwards;
}
.hero-title-4lines .ht-line:nth-child(1) { animation-delay: 0.05s; }
.hero-title-4lines .ht-line:nth-child(2) { animation-delay: 0.20s; }
.hero-title-4lines .ht-line:nth-child(3) { animation-delay: 0.40s; }
.hero-title-4lines .ht-line:nth-child(4) { animation-delay: 0.55s; }
@keyframes htLine {
    to { opacity: 1; transform: none; }
}

/* Responsive — réduit légèrement sur petits écrans */
@media (max-width: 980px) {
    .hero-title-4lines { gap: 3px; line-height: 1.08; }
}
@media (max-width: 560px) {
    .hero-title-4lines { gap: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SÉCURITÉ — Honeypot anti-bot signup
   Caché aux humains, mais visible dans le DOM pour que les bots le remplissent.
   ═══════════════════════════════════════════════════════════════════════════ */
.hp-trap {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    /* Pas display:none ni visibility:hidden : certains bots détectent ça */
}
.hp-trap input { width: 1px; height: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SUPER ADMIN — Dashboard + gestion users + sécurité
   ═══════════════════════════════════════════════════════════════════════════ */
.admin-page {
    padding: 24px 32px 60px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
.admin-page > * { max-width: 1400px; margin-left: auto; margin-right: auto; }
.admin-page * { box-sizing: border-box; }

.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-head h1 {
    font-size: 24px;
    margin: 0 0 4px;
    color: var(--text);
    display: flex; align-items: center; gap: 10px;
}
.admin-head h1 small { font-size: 14px; color: var(--text-mute); font-weight: 500; }
.admin-sub { font-size: 13px; color: var(--text-dim); margin: 0; }
.admin-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-nav .active { background: var(--accent); color: white; border-color: var(--accent-d); }

.alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
}
.alert-success { background: rgba(47, 212, 122, 0.12); color: #2fd47a; border: 1px solid rgba(47, 212, 122, 0.30); }
.alert-error   { background: rgba(242, 84, 69, 0.12);  color: #f25445; border: 1px solid rgba(242, 84, 69, 0.30); }

/* KPI cards */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.kpi-card {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 16px 18px;
    position: relative;
}
.kpi-card.alert {
    border-color: rgba(242, 84, 69, 0.40);
    background: linear-gradient(135deg, var(--bg-2), rgba(242, 84, 69, 0.05));
}
.kpi-icon { font-size: 22px; margin-bottom: 6px; }
.kpi-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.kpi-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.1;
}
.kpi-meta {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.5;
}
.kpi-meta small { font-size: 10.5px; color: var(--text-mute); }
.dot-kr1 { color: #6aa6ff; font-weight: 700; }
.dot-kr2 { color: #2fd47a; font-weight: 700; }
.dot-kr3 { color: #f5a623; font-weight: 700; }

/* 2 colonnes layout */
.admin-2cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.admin-section {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 16px;
}
.admin-section-title {
    font-size: 13px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin: 0 0 14px;
}
.admin-h3 {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin: 18px 0 10px;
    font-weight: 800;
}
.admin-empty {
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
    font-style: italic;
    padding: 20px;
}

/* Filtres */
.admin-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.admin-filters input,
.admin-filters select {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
}
.admin-filters input[type="search"] { min-width: 240px; }

/* Tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.admin-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-mute);
    border-bottom: 2px solid var(--border);
}
.admin-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
}
.admin-table tbody tr:hover { background: var(--bg-3); }
.admin-table tbody tr.row-danger { background: rgba(242, 84, 69, 0.06); }
.admin-table .cell-red   { color: #f25445; }
.admin-table .cell-green { color: #2fd47a; }
.admin-table code {
    background: var(--bg-3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* Tier + Role pills */
.tier-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: white;
}
.tier-pill.tier-kromball1 { background: #6aa6ff; }
.tier-pill.tier-kromball2 { background: #2fd47a; }
.tier-pill.tier-kromball3 { background: linear-gradient(135deg, #f5a623, #e8460f); }
.badge-admin {
    background: linear-gradient(135deg, #b47aff, #8e5fd9);
    color: white;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
}
.badge-self {
    background: rgba(106, 166, 255, 0.15);
    color: #6aa6ff;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
}

/* Pager */
.admin-pager {
    display: flex; gap: 4px; justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}
.admin-pager .active { background: var(--accent); color: white; border-color: var(--accent-d); }

/* KV list (détail user) */
.kv-list {
    list-style: none; padding: 0; margin: 0;
}
.kv-list li {
    display: flex; justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
}
.kv-list li:last-child { border-bottom: none; }
.kv-list span { color: var(--text-dim); }
.kv-list strong { color: var(--text); }

/* Admin action forms (cards d'action) */
.admin-actions-section .admin-action-form {
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.admin-action-form.danger {
    border-color: rgba(242, 84, 69, 0.30);
    background: linear-gradient(135deg, var(--bg-3), rgba(242, 84, 69, 0.04));
}
.admin-action-form label {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}
.admin-action-form select,
.admin-action-form input {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text);
}

/* Audit list */
.audit-list {
    list-style: none; padding: 0; margin: 0;
    max-height: 380px;
    overflow-y: auto;
}
.audit-list-dense { max-height: 480px; }
.audit-item {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 11.5px;
    color: var(--text-dim);
}
.audit-item:last-child { border-bottom: none; }
.audit-item.sev-warning  { border-left: 3px solid #f5a623; padding-left: 12px; }
.audit-item.sev-critical { border-left: 3px solid #f25445; padding-left: 12px; background: rgba(242, 84, 69, 0.04); }
.audit-type {
    font-weight: 800; color: var(--text);
    font-family: monospace;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.audit-time { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.audit-ip   { color: #6aa6ff; font-family: monospace; }
.audit-meta { color: var(--text-mute); font-family: monospace; font-size: 10.5px; word-break: break-all; }
.audit-empty {
    text-align: center; color: var(--text-mute); font-style: italic;
    padding: 20px; font-size: 13px;
}

/* Responsive */
@media (max-width: 980px) {
    .admin-2cols { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .admin-table { font-size: 12px; }
    .admin-table thead { display: none; }
    .admin-table tbody tr { display: block; padding: 8px 0; border-bottom: 2px solid var(--border-soft); }
    .admin-table tbody td { display: block; padding: 4px 8px; border: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.11.A1 — Chrono sur ligne dispositifs + boutons Fin de période/match
   ═══════════════════════════════════════════════════════════════════════════ */

/* CHRONO sur la def-types-bar (à droite des dispositifs, à gauche des Fin) */
.chrono-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    background: linear-gradient(135deg, #1a2540, #14203a);
    border: 1.5px solid var(--accent);
    border-radius: 9px;
    color: var(--text);
    font-family: 'Inter', monospace;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(106, 166, 255, 0.4);
}
.chrono-bar:hover { filter: brightness(1.12); }
.chrono-bar:active { transform: scale(0.96); }
.chrono-bar.running {
    border-color: #2fd47a;
    box-shadow: 0 0 14px rgba(47, 212, 122, 0.30);
    animation: chronoPulse 2s infinite;
}
.chrono-bar.running .chb-icon { color: #2fd47a; }
.chrono-bar.paused .chb-icon { color: #f5a623; }

@keyframes chronoPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(47, 212, 122, 0.30); }
    50%      { box-shadow: 0 0 20px rgba(47, 212, 122, 0.55); }
}

.chb-icon {
    font-size: 14px;
    line-height: 1;
}
.chb-time {
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}
.chb-period {
    font-size: 9.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Boutons Fin de période / Fin de match (bord droit) */
.period-end-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    background: var(--bg-2);
    color: var(--text);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.period-end-btn:hover {
    border-color: var(--accent);
    background: var(--bg-3);
    transform: translateY(-1px);
}
.period-end-btn:active { transform: translateY(0) scale(0.97); }

/* Fin de match : rouge (action lourde, destructive-ish) */
.period-end-btn.period-end-final {
    background: linear-gradient(180deg, var(--red) 0%, var(--red-d) 100%);
    border-color: var(--red-d);
    color: white;
    box-shadow: 0 3px 10px rgba(242, 84, 69, 0.30);
}
.period-end-btn.period-end-final:hover { filter: brightness(1.1); }

.end-match-form { margin: 0; flex-shrink: 0; }

/* Densité large — chrono + boutons fin agrandis */
body[data-density="large"] .chrono-bar { height: 44px; padding: 0 18px; }
body[data-density="large"] .chb-time   { font-size: 20px; }
body[data-density="large"] .period-end-btn { height: 44px; padding: 0 18px; font-size: 12.5px; }

/* Show-close-btn off → cache les 2 boutons fin */
body[data-show-close-btn="0"] .period-end-btn { display: none !important; }

/* Petits écrans — empile chrono + boutons fin sous les dispositifs */
@media (max-width: 1280px) {
    .chb-period { display: none; }
    .chrono-bar { padding: 0 10px; }
    .period-end-btn { padding: 0 10px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.11.A2 — Bandeau "Match LIVE en cours" persistant
   Visible sur toutes les pages auth quand un match est en cours,
   sauf sur la page du match elle-même.
   ═══════════════════════════════════════════════════════════════════════════ */
.live-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    background: linear-gradient(90deg, var(--red) 0%, var(--red-d) 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    z-index: 9000;
    text-decoration: none !important;
    box-shadow: 0 2px 12px rgba(242, 84, 69, 0.35);
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}
.live-banner:hover { filter: brightness(1.08); }
.live-banner:active { transform: scale(0.998); }

.lb-pulse {
    font-size: 18px;
    line-height: 1;
    animation: lbBlink 1.2s infinite;
}
@keyframes lbBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.lb-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.lb-bandeau {
    font-size: 12px;
    opacity: 0.92;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-score {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: rgba(0,0,0,0.18);
    padding: 3px 12px;
    border-radius: 6px;
}
.lb-cta {
    font-size: 12px;
    font-weight: 800;
    background: rgba(255,255,255,0.18);
    padding: 4px 12px;
    border-radius: 6px;
    transition: background 0.15s;
}
.live-banner:hover .lb-cta { background: rgba(255,255,255,0.30); }

/* Quand le bandeau est visible, on décale le contenu de 38px vers le bas */
.app.has-live-banner { padding-top: 38px; }

/* Sur petits écrans : on cache le bandeau d'info (garde juste pulse + label + CTA) */
@media (max-width: 720px) {
    .lb-bandeau { display: none; }
    .live-banner { padding: 0 14px; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.11.A5 — Select poste modifiable pendant le match (cahier 27 mai)
   ═══════════════════════════════════════════════════════════════════════════ */
.cell-pos-select {
    background: var(--bg-3);
    border: 1.5px solid var(--border-soft);
    border-radius: 6px;
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 6px;
    cursor: pointer;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.12s;
    width: 100%;
    min-width: 56px;
    /* Cache la flèche par défaut, remet une nous-mêmes via background SVG */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 16px;
}
.cell-pos-select:hover {
    border-color: var(--accent);
    background-color: var(--bg-2);
}
.cell-pos-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(106, 166, 255, 0.20);
}
.cell-pos-select:disabled { opacity: 0.5; cursor: wait; }

/* Couleur du poste GB / DEF distinguée */
.cell-pos-select option[value="GB"] { color: #f5a623; }
.cell-pos-select option[value="DEF"] { color: #b47aff; }

/* Densité large */
body[data-density="large"] .cell-pos-select { font-size: 13px; padding: 6px 8px; padding-right: 18px; }

/* PHASE 6.11.A6 — Goal cell feedback sans saut écran */
.dtl-goal-cell.goal-pending {
    background: rgba(106, 166, 255, 0.20);
    transition: background 0.15s;
}
.dtl-goal-cell.goal-just-scored {
    background: rgba(47, 212, 122, 0.30) !important;
    animation: goalPulse 0.8s ease-out;
}
@keyframes goalPulse {
    0%   { transform: scale(1.0); box-shadow: 0 0 0 0 rgba(47, 212, 122, 0.7); }
    50%  { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(47, 212, 122, 0); }
    100% { transform: scale(1.0); box-shadow: 0 0 0 0 rgba(47, 212, 122, 0); }
}
.goal-dot {
    display: inline-block;
    color: #2fd47a;
    font-size: 10px;
    margin-left: 2px;
    animation: goalDotIn 0.4s ease-out;
}
.goal-dot-away { color: #f25445; }
@keyframes goalDotIn {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.12.B3 — Hauteur ligne joueur réduite (cahier 27 mai L106 + L114)
   "Diminuer absolument la hauteur de la ligne des joueurs"
   Objectif : voir 14 joueurs sans scroll sur écran ~900px.
   ═══════════════════════════════════════════════════════════════════════════ */
.player-row,
.players-header {
    min-height: 38px;
    padding: 2px 10px !important;
}
.player-row {
    align-items: center;
}

/* Cell name : plus compact */
.cell-name-v2 .name-text { line-height: 1.15; }
.cell-name-v2 .name-firstname-line {
    font-size: 12px;
    font-weight: 700;
    display: flex;
    gap: 6px;
    align-items: baseline;
}
.cell-name-v2 .name-firstname { color: var(--text); }
.cell-name-v2 .name-playtime  {
    font-size: 10px;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}
.cell-name-v2 .name-lastname  {
    font-size: 10.5px;
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Boutons +/- compacts */
.player-row .cell-actions-2 { height: 34px !important; }
.player-row .cell-actions-4 { height: 34px !important; gap: 4px !important; }
.player-row .act2-btn       { font-size: 18px; }
.player-row .act4-btn       { font-size: 11.5px; }

/* Pastille terrain/banc plus petite */
.player-row .tb-pill {
    height: 26px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.3px;
}

/* Sanction + select poste compacts */
.player-row .cell-sanct      { min-height: 26px; font-size: 11.5px; padding: 0 6px; }
.player-row .cell-pos-select { padding: 3px 16px 3px 4px; font-size: 10.5px; }

/* % et tendance plus serrés */
.player-row .cell-pct   { font-size: 16px; font-weight: 800; line-height: 1.1; }
.player-row .cell-trend { font-size: 16px; }

/* Densité large : on ne réduit pas autant (coach bord de terrain) */
body[data-density="large"] .player-row { min-height: 46px; }
body[data-density="large"] .player-row .cell-actions-2 { height: 40px !important; }
body[data-density="large"] .player-row .act2-btn { font-size: 22px; }

/* Override la media query précédente qui faisait hauteur 32-36px sur actions-4 */
@media (min-width: 1440px) {
    .cell-actions-4 { height: 36px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.12.B4 — Mini-statut joueur (80/100/120%) à côté du temps de jeu
   ═══════════════════════════════════════════════════════════════════════════ */
.cell-status-select {
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 800;
    padding: 1px 12px 1px 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.15s;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 2px center;
}
.cell-status-select.status-80  { color: #94a3b8; }
.cell-status-select.status-100 { color: var(--text); }
.cell-status-select.status-120 {
    color: #f5a623;
    border-color: rgba(245, 166, 35, 0.40);
    background-color: rgba(245, 166, 35, 0.08);
}
.cell-status-select:hover { border-color: var(--accent); }
.cell-status-select:focus { outline: none; box-shadow: 0 0 0 2px rgba(106, 166, 255, 0.20); }
.cell-status-select:disabled { opacity: 0.5; cursor: wait; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.12.B5 — Score ORANGE en cas de match nul (cahier 27 mai L74-75)
   ═══════════════════════════════════════════════════════════════════════════ */
.dtl-block-score.equal {
    color: #f5a623 !important;
    background: rgba(245, 166, 35, 0.10);
    border: 1px solid rgba(245, 166, 35, 0.30);
}
.dtl-block-score.positive { color: #2fd47a; }
.dtl-block-score.negative { color: #f25445; }
.dtl-block-score.neutral  { color: var(--text-dim); }

/* Mi-temps / Fin de match : score nul → orange aussi */
.dpe-score[data-result="draw"]      { color: #f5a623; }
.dpe-score[data-result="positive"]  { color: #2fd47a; }
.dpe-score[data-result="negative"]  { color: #f25445; }

/* Score scoreboard tête (cells .score-team-home/away) — orange si nul */
.scoreboard.score-draw .score-team-home,
.scoreboard.score-draw .score-team-away { color: #f5a623; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.12.B6 — Aligner libellé "DISPOSITIF :" avec la ligne dispositifs
   (déjà fait via flex-direction: row dans 6.11.A1, mais on s'assure du baseline)
   ═══════════════════════════════════════════════════════════════════════════ */
.def-types-bar { align-items: center; }
.def-types-label {
    align-self: center;
    line-height: 36px;          /* même hauteur que les .def-type-btn */
    margin-right: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.12.B7 — Cases dispositifs taille variable selon usage
   Cahier 27 mai L119 :
     Petites : Tout terrain / Stricte / 3-2-1 / 3-3
     Moyennes : 2-4 décalée / 2-4 / 1-5 décalée
     Grandes : 1-5 / 0-6
     Fin de Période + Fin de Match : bord droit (séparées par un trait)
   ═══════════════════════════════════════════════════════════════════════════ */
.def-type-btn[data-type="d-tout-t"],
.def-type-btn[data-type="d-stricte"],
.def-type-btn[data-type="d-3-2-1"],
.def-type-btn[data-type="d-3-3"] {
    padding: 0 6px;
    font-size: 10.5px;
    height: 30px;
}
.def-type-btn[data-type="d-tout-t"] .dtb-swatch,
.def-type-btn[data-type="d-stricte"] .dtb-swatch,
.def-type-btn[data-type="d-3-2-1"] .dtb-swatch,
.def-type-btn[data-type="d-3-3"] .dtb-swatch {
    width: 10px; height: 10px;
}

.def-type-btn[data-type="d-2-4-d"],
.def-type-btn[data-type="d-2-4"],
.def-type-btn[data-type="d-1-5-d"] {
    padding: 0 10px;
    font-size: 12px;
    height: 36px;
}

.def-type-btn[data-type="d-1-5"],
.def-type-btn[data-type="d-0-6"] {
    padding: 0 14px;
    font-size: 13.5px;
    height: 42px;
    font-weight: 800;
}
.def-type-btn[data-type="d-1-5"] .dtb-swatch,
.def-type-btn[data-type="d-0-6"] .dtb-swatch {
    width: 18px; height: 18px;
}

/* Séparateur visuel : Fin de période / Fin de match isolés à droite */
.def-types-bar .chrono-bar {
    border-left: 2px solid var(--border);
    margin-left: 6px;
    padding-left: 16px;
}
.def-types-bar #btnEndPeriod {
    border-left: 2px solid var(--border);
    margin-left: 6px;
    padding-left: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.12.B8 — Réduire la hauteur de la Timeline défensive
   Cahier 27 mai L114 : "Diminuer Toute les hauteurs de la TimeLine pour
   faire de la place au listing des joueurs du match sans déroulé !"
   ═══════════════════════════════════════════════════════════════════════════ */
.def-timeline-wrap { margin-bottom: 4px; }
.dtl-row { height: 28px !important; min-height: 28px; }
.dtl-row.dtl-row-merged { height: 36px !important; }
.dtl-rowlabel {
    font-size: 9.5px;
    line-height: 28px;
    padding: 0 6px;
    letter-spacing: 0.5px;
}
.dtl-block { font-size: 9.5px; }
.dtl-block-label { font-size: 9.5px; }
.dtl-block-score { font-size: 9.5px; }
.dpe-label { font-size: 8.5px; }
.dpe-score { font-size: 11px; }

/* Row labels (Mn / Mon équipe / Adv / Défense / Score) plus petits */
.def-timeline-grid .dtl-rowlabel { font-weight: 700; }
.def-timeline-grid .dtl-minute { font-size: 8.5px; }
.def-timeline-grid .dtl-goal-cell { min-height: 24px; }

/* Densité large : on garde un peu plus de place pour la timeline */
body[data-density="large"] .dtl-row { height: 36px !important; }
body[data-density="large"] .dtl-row.dtl-row-merged { height: 44px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.13.C1 — 3 fenêtres Ratio (Global grande + ATT/DEF petites)
   Affiché si mode capture binary_att_def (KR2+). Sinon .cell-pct classique.
   Cahier 27 mai L31 : "1 Grande fenêtre globale + 2 petites pour + et −,
   situées à droite de la grande, l'une sur l'autre."
   ═══════════════════════════════════════════════════════════════════════════ */
.cell-pct-3 {
    display: grid;
    /* PHASE 6.15.N9 — La grande fenêtre prend ~60% et les 2 mini-fenêtres ~40px */
    grid-template-columns: minmax(48px, 1fr) 44px;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 36px;
}
.cp-main {
    grid-row: 1 / 3;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    border-radius: 6px;
    background: var(--bg-3);
    border: 1.5px solid var(--border-soft);
}
.cp-side {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cp-att, .cp-def {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
}
.cp-tag {
    font-size: 8px;
    color: var(--text-mute);
    font-weight: 800;
}
.cp-val { font-size: 10px; }

/* Couleurs par color (green / orange / red / neutral) */
.cp-green   { color: #2fd47a; border-color: rgba(47, 212, 122, 0.35); background: rgba(47, 212, 122, 0.06); }
.cp-orange  { color: #f5a623; border-color: rgba(245, 166, 35, 0.35); background: rgba(245, 166, 35, 0.06); }
.cp-red     { color: #f25445; border-color: rgba(242, 84, 69, 0.35);  background: rgba(242, 84, 69, 0.06); }
.cp-neutral { color: var(--text-mute); }

/* En mode binary_simple → cellule classique (déjà stylée) */

/* Densité large */
body[data-density="large"] .cp-main { font-size: 20px; }
body[data-density="large"] .cp-val  { font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.13.C2 — Stats équipe ATT/DEF dans le bandeau (KR2+ binaire ATT/DEF)
   ═══════════════════════════════════════════════════════════════════════════ */
.tbc-team-trend.with-attdef { gap: 6px; }
.ttc-attdef {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    font-size: 9.5px;
    font-weight: 800;
    margin-left: 4px;
    padding-left: 6px;
    border-left: 1px solid var(--border);
}
.ttc-att, .ttc-def {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-3);
    line-height: 1.1;
}
.ttc-mini-tag {
    font-size: 8px;
    color: var(--text-mute);
    background: rgba(255,255,255,0.05);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 800;
}
.ttc-att.green, .ttc-def.green     { color: #2fd47a; }
.ttc-att.orange, .ttc-def.orange   { color: #f5a623; }
.ttc-att.red, .ttc-def.red         { color: #f25445; }
.ttc-att.neutral, .ttc-def.neutral { color: var(--text-mute); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.13.C3 — Score évolutif coloré : le bloc dispositif COURANT
   est mis en valeur et sa zone colorée grandit avec le temps qui passe.
   Cahier 27 mai L181-184.
   ═══════════════════════════════════════════════════════════════════════════ */
.dtl-block { transition: width 0.6s ease-out; }
.dtl-block-current {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.20);
    animation: dispoCurrentPulse 2.4s infinite ease-in-out;
}
@keyframes dispoCurrentPulse {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15); }
    50%      { box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.40); }
}
.dtl-block-current::after {
    content: '●';
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 8px;
    color: #2fd47a;
    animation: pulseDot 1.4s infinite;
    z-index: 2;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.13.C4 — Ratio moyen saison à côté du nom (KR2+, cahier 27 mai L58)
   ═══════════════════════════════════════════════════════════════════════════ */
.name-season-ratio {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin-left: 2px;
    background: var(--bg-3);
    border: 1px solid var(--border-soft);
    title-text-decoration: none;
}
.name-season-ratio.s-green   { color: #2fd47a; border-color: rgba(47, 212, 122, 0.30); background: rgba(47, 212, 122, 0.08); }
.name-season-ratio.s-orange  { color: #f5a623; border-color: rgba(245, 166, 35, 0.30); background: rgba(245, 166, 35, 0.08); }
.name-season-ratio.s-red     { color: #f25445; border-color: rgba(242, 84, 69, 0.30);  background: rgba(242, 84, 69, 0.08); }
.name-season-ratio.s-neutral { color: var(--text-mute); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.14.M1 — Alerte score (flash overlay quand N buts adverses consécutifs)
   ═══════════════════════════════════════════════════════════════════════════ */
.__score_alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--red), var(--red-d));
    color: white;
    font-size: 28px;
    font-weight: 900;
    padding: 24px 40px;
    border-radius: 16px;
    box-shadow: 0 0 60px rgba(242, 84, 69, 0.60), 0 0 0 9999px rgba(242, 84, 69, 0.10);
    z-index: 99999;
    text-align: center;
    letter-spacing: 1px;
    animation: scoreAlert 1.8s ease-out forwards;
    pointer-events: none;
}
@keyframes scoreAlert {
    0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    15%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    30%  { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
    80%  { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.14.M2 — Barre de différentiel ÉQUIPE / ADV sous la timeline
   Visualise l'écart courant : vert si positif, rouge si négatif, intensité selon écart.
   Cahier 27 mai L95
   ═══════════════════════════════════════════════════════════════════════════ */
.score-diff-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 0;
    padding: 4px 10px;
    background: var(--bg-3);
    border-radius: 6px;
    height: 22px;
}
.sdb-track {
    flex: 1;
    height: 8px;
    background: var(--bg-2);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.sdb-zero {
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--border);
    z-index: 1;
}
.sdb-fill {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: 4px;
    transition: width 0.4s ease-out, background 0.2s;
}
.score-diff-bar.diff-positive .sdb-fill {
    left: 50%;
    background: linear-gradient(90deg, transparent, #2fd47a);
}
.score-diff-bar.diff-negative .sdb-fill {
    right: 50%;
    background: linear-gradient(270deg, transparent, #f25445);
}
.score-diff-bar.diff-zero .sdb-fill { display: none; }
.sdb-label {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: center;
}
.score-diff-bar.diff-positive .sdb-label { color: #2fd47a; }
.score-diff-bar.diff-negative .sdb-label { color: #f25445; }
.score-diff-bar.diff-zero .sdb-label     { color: var(--text-mute); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.14.M3 — Modal "Mi-temps" déclenché par bouton Fin de période
   ═══════════════════════════════════════════════════════════════════════════ */
.__halftime_modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex; align-items: center; justify-content: center;
    z-index: 99998;
    animation: __ht_fadein 0.18s;
}
@keyframes __ht_fadein { from { opacity: 0 } to { opacity: 1 } }
.__halftime_box {
    background: var(--bg-2);
    border: 2px solid var(--accent);
    border-radius: 18px;
    padding: 32px 40px;
    min-width: 380px;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(106, 166, 255, 0.20);
    animation: __ht_pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes __ht_pop { from { transform: scale(0.7); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.__halftime_box h2 {
    font-size: 22px;
    margin: 0 0 16px;
    color: var(--accent);
    letter-spacing: 0.5px;
}
.__ht_score {
    font-size: 60px;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
    margin: 10px 0;
    font-variant-numeric: tabular-nums;
}
.__ht_sep { color: var(--text-mute); margin: 0 12px; font-weight: 600; }
.__ht_diff {
    font-size: 16px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 8px;
    display: inline-block;
    margin: 8px 0 14px;
}
.__ht_diff.positive { background: rgba(47, 212, 122, 0.20); color: #2fd47a; }
.__ht_diff.negative { background: rgba(242, 84, 69, 0.20);  color: #f25445; }
.__ht_diff.zero     { background: var(--bg-3); color: var(--text-dim); }
.__ht_team { font-size: 14px; color: var(--text-dim); margin: 6px 0; }
.__ht_team .green   { color: #2fd47a; font-weight: 800; }
.__ht_team .orange  { color: #f5a623; font-weight: 800; }
.__ht_team .red     { color: #f25445; font-weight: 800; }
.__ht_top { font-size: 13px; color: var(--text-dim); margin: 8px 0 18px; }
.__ht_actions { margin-top: 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.14.M4 — Grid 3 buts par minute (placeholder + filled)
   ═══════════════════════════════════════════════════════════════════════════ */
.dtl-goal-stick.empty {
    opacity: 0.18;
    background: var(--border) !important;
}
.dtl-goal-stick.filled {
    opacity: 1;
}
.dtl-goal-cell.goals-full {
    box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 0.30);
}
.dtl-goal-cell.goals-full::after {
    /* PHASE 6.15.N6 — Indicateur "limite 3 buts" en petit BÂTON (cohérent), pas en point rond */
    content: '';
    position: absolute;
    top: 1px; right: 1px;
    width: 2px; height: 6px;
    background: #f5a623;
    border-radius: 1px;
}
.dtl-goal-cell.goal-limit-shake {
    animation: goalShake 0.6s ease-out;
}
@keyframes goalShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-3px); }
    40%      { transform: translateX(3px); }
    60%      { transform: translateX(-2px); }
    80%      { transform: translateX(2px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.14.M5 — Temps faibles / Temps forts (sliding window 5 min)
   Cahier 27 mai L46, L80, L94. KR2+.
   ═══════════════════════════════════════════════════════════════════════════ */
.hot-zones-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding: 0 8px;
    height: 20px;
}
.hzb-rowlabel {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    width: 110px;
}
.hzb-track {
    flex: 1;
    position: relative;
    height: 16px;
    background: var(--bg-3);
    border-radius: 4px;
    overflow: hidden;
}
.hzb-zone {
    position: absolute;
    top: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border-radius: 2px;
}
.hzb-hot {
    background: linear-gradient(180deg, #2fd47a, #1ea861);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20);
}
.hzb-cold {
    background: linear-gradient(180deg, #f25445, #c0392b);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.15.N6 — Forcer BÂTONS verticaux (jamais ronds) dans Équipe & Adv
   Cahier 27 mai : le user voit certains marqueurs comme des points ; on force
   un ratio largeur/hauteur clairement rectangulaire et border-radius minimal.
   ═══════════════════════════════════════════════════════════════════════════ */
.dtl-row-goal-home .dtl-goal-stick,
.dtl-row-goal-away .dtl-goal-stick,
.dtl-row-goal.goal-horizontal .dtl-goal-stick {
    width: 4px !important;
    height: 20px !important;
    border-radius: 1px !important;
    background-clip: padding-box;
}
.dtl-row-goal-home .dtl-goal-stick.filled,
.dtl-row-goal-away .dtl-goal-stick.filled,
.dtl-row-goal.goal-horizontal .dtl-goal-stick.filled {
    box-shadow: 0 1px 2px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.20);
}
.dtl-row-goal-home .dtl-goal-stick.empty,
.dtl-row-goal-away .dtl-goal-stick.empty,
.dtl-row-goal .dtl-goal-stick.empty {
    width: 3px !important;
    height: 14px !important;
    border-radius: 1px !important;
    opacity: 0.18;
    box-shadow: none !important;
}
/* Augmente légèrement la hauteur de la rangée pour bien voir les bâtons */
.dtl-row-goal-home,
.dtl-row-goal-away,
.dtl-row-goal.goal-horizontal { min-height: 28px; }
.dtl-row-goal-home .dtl-goal-stack.horizontal,
.dtl-row-goal-away .dtl-goal-stack.horizontal,
.dtl-row-goal.goal-horizontal .dtl-goal-stack.horizontal {
    gap: 1.5px;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.15.N7 — Timeline joueur sur 1 SEULE LIGNE de 30 bâtons,
   regroupés visuellement par 10 (3 groupes de 10).
   Cahier 27 mai L18-L20 : "compacter au max, regroupement par dizaine".
   ═══════════════════════════════════════════════════════════════════════════ */
.cell-timeline-30 {
    grid-template-columns: repeat(30, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 0 1px !important;
    padding: 3px 4px !important;
    min-height: 24px !important;
    align-items: stretch !important;
}
.cell-timeline-30 .timeline-dot {
    width: 100% !important;
    height: 100% !important;
    max-width: 5px !important;
    min-width: 2px !important;
    min-height: 14px !important;
    border-radius: 1px !important;
    margin: 0 auto;
}
.cell-timeline-30 .timeline-dot.last {
    max-width: 6px !important;
}
/* Regroupement visuel par 10 : espace supplémentaire avant le 11e et le 21e bâton */
.cell-timeline-30 .timeline-dot:nth-child(10n+1):not(:first-child) {
    margin-left: 5px !important;
}
/* Sur écrans étroits : réduit la pause entre groupes */
@media (max-width: 1280px) {
    .cell-timeline-30 .timeline-dot:nth-child(10n+1):not(:first-child) {
        margin-left: 3px !important;
    }
    .cell-timeline-30 .timeline-dot { max-width: 4px !important; }
}
@media (max-width: 1024px) {
    .cell-timeline-30 .timeline-dot:nth-child(10n+1):not(:first-child) {
        margin-left: 2px !important;
    }
    .cell-timeline-30 .timeline-dot { max-width: 3.5px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.15.N8 — Harmonisation bâtons timeline joueur (1 ligne propre)
   - Plus de variation de taille pour .last / .in-window (qui cassaient l'alignement)
   - On garde la mise en avant via teinte/glow, sans changer la géométrie
   - Désactivation de l'ancien .goal-dot (●) injecté en JS sur clic but
   ═══════════════════════════════════════════════════════════════════════════ */
.cell-timeline-30 {
    align-items: center !important;
    justify-items: center !important;
}
.cell-timeline-30 .timeline-dot {
    width: 4px !important;
    height: 18px !important;
    max-width: 4px !important;
    max-height: 18px !important;
    min-width: 4px !important;
    min-height: 18px !important;
    border-radius: 1.5px !important;
    transform: none !important;
    box-shadow: 0 1px 1.5px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}
.cell-timeline-30 .timeline-dot.empty {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    opacity: 0.35 !important;
}
.cell-timeline-30 .timeline-dot.in-window {
    transform: none !important;
    box-shadow:
        0 0 0 1px rgba(106, 166, 255, 0.55),
        0 0 3px rgba(106, 166, 255, 0.30) !important;
}
.cell-timeline-30 .timeline-dot.in-window.empty {
    background: rgba(106, 166, 255, 0.10) !important;
    border-color: rgba(106, 166, 255, 0.35) !important;
    opacity: 0.55 !important;
}
.cell-timeline-30 .timeline-dot.last {
    width: 4px !important;
    max-width: 4px !important;
    box-shadow:
        0 0 0 1.5px white,
        0 0 0 2.5px rgba(106, 166, 255, 0.85),
        0 0 6px currentColor !important;
    z-index: 2;
}
@media (max-width: 1280px) {
    .cell-timeline-30 .timeline-dot,
    .cell-timeline-30 .timeline-dot.last {
        width: 3.5px !important; max-width: 3.5px !important; min-width: 3.5px !important;
        height: 16px !important; max-height: 16px !important; min-height: 16px !important;
    }
}
@media (max-width: 1024px) {
    .cell-timeline-30 .timeline-dot,
    .cell-timeline-30 .timeline-dot.last {
        width: 3px !important; max-width: 3px !important; min-width: 3px !important;
        height: 14px !important; max-height: 14px !important; min-height: 14px !important;
    }
}
/* Désactivation de l'ancien dot "●" injecté en JS (remplacé par conversion empty→filled) */
.goal-dot { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.15.N9 — Fix chevauchements visuels Pos/Sanct et %/Tend
   - .cell-sanct : empêche le bouton scale + shadow de déborder sur la colonne Pos
   - .cell-pos   : padding-right pour garantir l'air autour du select
   - .cell-trend : marge gauche pour ne plus toucher le bord du %
   ═══════════════════════════════════════════════════════════════════════════ */
.cell-sanct {
    width: 100%;
    max-width: 48px;
    margin: 0 auto;
}
.player-row .cell-sanct:hover { transform: scale(1.02) !important; }
.player-row .cell-pos {
    min-width: 0;
    padding-right: 2px;
}
.player-row .cell-pos-select {
    width: 100%;
    min-width: 42px;
}
.player-row .cell-trend {
    padding-left: 4px !important;
    padding-right: 2px !important;
}
.player-row .cell-pct,
.player-row .cell-pct-3 {
    padding-right: 4px;
}
/* Le sanct level-3 (2×2') a une font-size 10px : on évite que le texte sorte du cadre */
.cell-sanct.lvl-3 {
    padding: 0 2px !important;
    letter-spacing: -0.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.15.N10 — Modal options bloc défense (changer dispositif / supprimer)
   ═══════════════════════════════════════════════════════════════════════════ */
.dtl-block { cursor: pointer; transition: filter 0.15s, box-shadow 0.15s; }
.dtl-block:hover {
    filter: brightness(1.15) saturate(1.10);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 4px 14px rgba(0,0,0,0.30);
    z-index: 5;
}

.__defb_modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: __defb_fadein 0.16s;
}
/* Fix : l'attribut HTML [hidden] doit gagner contre display:flex */
.__defb_modal[hidden] { display: none !important; }
@keyframes __defb_fadein { from { opacity: 0 } to { opacity: 1 } }

.__defb_box {
    position: relative;
    background: var(--bg-1, #14181f);
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    border-radius: 14px;
    padding: 22px 26px 18px;
    max-width: 540px;
    width: calc(100% - 32px);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    animation: __defb_pop 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes __defb_pop {
    from { transform: scale(0.86); opacity: 0 }
    to   { transform: scale(1); opacity: 1 }
}

.__defb_close {
    position: absolute;
    top: 10px; right: 12px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bg-3, rgba(255,255,255,0.06));
    border: none;
    color: var(--text-dim, #9ca3af);
    font-size: 20px; font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}
.__defb_close:hover { background: rgba(242, 84, 69, 0.20); color: #f25445; }

.__defb_box h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: var(--text, #fff);
}
.__defb_box h2 #defBlockCurrent {
    color: var(--accent, #2fd47a);
    font-weight: 800;
}
.__defb_meta {
    font-size: 12px;
    color: var(--text-dim, #9ca3af);
    margin: 0 0 16px;
}

.__defb_section_label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim, #9ca3af);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 12px 0 8px;
}

.__defb_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}
.__defb_disp {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 10px;
    background: var(--bg-2, rgba(255,255,255,0.03));
    border: 1.5px solid var(--border-soft, rgba(255,255,255,0.08));
    border-radius: 8px;
    color: var(--text, #fff);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
    text-align: left;
}
.__defb_disp:hover {
    transform: translateY(-1px);
    border-color: var(--accent, #2fd47a);
    box-shadow: 0 4px 10px rgba(47, 212, 122, 0.20);
}
.__defb_disp.current {
    border-color: var(--accent, #2fd47a);
    background: rgba(47, 212, 122, 0.10);
    box-shadow: inset 0 0 0 1px rgba(47, 212, 122, 0.30);
}
.__defb_disp.current::after {
    content: '✓';
    margin-left: auto;
    color: var(--accent, #2fd47a);
    font-weight: 900;
}
.__defb_disp.disabled {
    opacity: 0.45;
    pointer-events: none;
}
.__defb_disp .dtb-swatch {
    width: 14px; height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20);
}
.__defb_disp_label { flex: 1; min-width: 0; }

.__defb_actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft, rgba(255,255,255,0.08));
}
.__defb_btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
    border: 1.5px solid transparent;
}
.__defb_btn:disabled { opacity: 0.6; cursor: not-allowed; }
.__defb_btn-danger {
    background: rgba(242, 84, 69, 0.15);
    border-color: rgba(242, 84, 69, 0.45);
    color: #f25445;
}
.__defb_btn-danger:hover { background: rgba(242, 84, 69, 0.30); transform: translateY(-1px); }
.__defb_btn-ghost {
    background: transparent;
    border-color: var(--border-soft, rgba(255,255,255,0.10));
    color: var(--text-dim, #9ca3af);
}
.__defb_btn-ghost:hover { background: var(--bg-3, rgba(255,255,255,0.06)); color: var(--text, #fff); }

/* Mode clair */
[data-theme="light"] .__defb_box {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .__defb_disp {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
    color: #1f2937;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6.15.N12 — Panes Événements & Notes (tabs footer)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-pane][hidden] { display: none !important; }

.match-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--bg-1, #14181f);
    border-radius: 12px;
    margin: 8px 12px;
    overflow: hidden;
    border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
}
.match-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.06));
    flex-shrink: 0;
}
.match-pane-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text, #fff);
}
.match-pane-count,
.match-pane-status {
    font-size: 11px;
    color: var(--text-dim, #9ca3af);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--bg-3, rgba(255,255,255,0.04));
}
.match-pane-status.saving { color: #f5a623; background: rgba(245, 166, 35, 0.12); }
.match-pane-status.saved  { color: #2fd47a; background: rgba(47, 212, 122, 0.12); }
.match-pane-status.error  { color: #f25445; background: rgba(242, 84, 69, 0.15); }
.match-pane-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
}
.match-pane-empty {
    text-align: center;
    color: var(--text-mute, #6b7280);
    font-size: 13px;
    font-style: italic;
    padding: 40px 20px;
}

/* === Feed événements === */
.event-feed {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.event-item {
    display: grid;
    grid-template-columns: 80px 28px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bg-2, rgba(255,255,255,0.02));
    border-left: 3px solid var(--border-soft, rgba(255,255,255,0.10));
    font-size: 13px;
    transition: background 0.12s;
}
.event-item:hover { background: var(--bg-3, rgba(255,255,255,0.05)); }

.event-time {
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim, #9ca3af);
    letter-spacing: 0.5px;
}
.event-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900;
    font-size: 14px;
    background: var(--bg-3, rgba(255,255,255,0.04));
}
.event-label {
    color: var(--text, #e5e7eb);
}

/* Couleurs par type d'événement */
.event-action_plus  { border-left-color: #2fd47a; }
.event-action_plus  .event-icon { background: rgba(47, 212, 122, 0.18); color: #2fd47a; }
.event-action_minus { border-left-color: #f25445; }
.event-action_minus .event-icon { background: rgba(242, 84, 69, 0.18); color: #f25445; }
.event-dispositif   { border-left-color: #6aa6ff; }
.event-dispositif   .event-icon { background: rgba(106, 166, 255, 0.18); color: #6aa6ff; font-size: 12px; }
.event-goal_home    { border-left-color: #2fd47a; background: rgba(47, 212, 122, 0.05); }
.event-goal_home    .event-icon { background: rgba(47, 212, 122, 0.22); }
.event-goal_away    { border-left-color: #f25445; background: rgba(242, 84, 69, 0.05); }
.event-goal_away    .event-icon { background: rgba(242, 84, 69, 0.22); }
.event-sanction     { border-left-color: #f5a623; }
.event-sanction     .event-icon { background: rgba(245, 166, 35, 0.18); }

/* === Notes textarea === */
.match-notes-area {
    width: 100%;
    min-height: 280px;
    height: 60vh;
    padding: 14px 16px;
    background: var(--bg-2, rgba(255,255,255,0.02));
    border: 1.5px solid var(--border-soft, rgba(255,255,255,0.08));
    border-radius: 8px;
    color: var(--text, #fff);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
    transition: border-color 0.15s;
}
.match-notes-area:focus {
    outline: none;
    border-color: var(--accent, #6aa6ff);
    box-shadow: 0 0 0 3px rgba(106, 166, 255, 0.15);
}
.match-notes-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-mute, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* Mode clair */
[data-theme="light"] .match-pane {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .event-item {
    background: rgba(0,0,0,0.015);
    color: #1f2937;
}
[data-theme="light"] .event-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .match-notes-area {
    background: #ffffff;
    border-color: rgba(0,0,0,0.10);
    color: #1f2937;
}