/* ========================================
   JULIK App - Application Mobile
   Clean & Professional Dark Theme
======================================== */

/* Variables CSS */
:root {
    --primary: #00a1e6;
    --primary-dark: #1565C0;
    --primary-light: #42A5F5;

    /* Couleur accent doree - harmonie avec la landing page */
    --accent: #F5B342;
    --accent-light: #FFD76E;
    --accent-dark: #D49A2A;

    --bg-dark: #0D1117;
    --bg-darker: #010409;
    --bg-card: #051429;
    --bg-card-hover: #1C2128;
    --bg-input: #21262D;

    --text-primary: #F0F6FC;
    --text-secondary: #8B949E;
    --text-muted: #6E7681;

    --border-color: #30363D;
    --border-light: #484F58;

    --success: #238636;
    --success-light: #2EA043;
    --warning: #D29922;
    --danger: #DA3633;
    --info: #58A6FF;

    --header-height: 56px;
    --nav-height: 64px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);

    --transition: 0.15s ease;
}

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

html {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-dark);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

/* Background stadium - coherence avec landing page */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/fond_stade.webp') center center / cover no-repeat;
    opacity: 0.60;
    z-index: -2;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(5, 20, 41, 0.88) 0%, rgba(13, 17, 23, 0.96) 70%);
    z-index: -1;
    pointer-events: none;
}

#app {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* ========================================
   Splash Screen - Fond #051429, JULIK doré avec effets
======================================== */
#splash-screen {
    position: fixed;
    inset: 0;
    background: #051429;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
    overflow: hidden;
}

/* Particules animees en arriere-plan */
#splash-screen::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(245, 179, 66, 0.08) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: splash-particles 20s linear infinite;
}

#splash-screen::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(245, 179, 66, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    animation: splash-glow 3s ease-in-out infinite;
}

@keyframes splash-particles {
    from {
        transform: translate(-25%, -25%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes splash-glow {

    0%,
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.splash-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.splash-title {
    font-size: 56px;
    font-weight: 800;
    color: #F5B342;
    letter-spacing: 12px;
    margin-bottom: 40px;
    text-shadow: 0 4px 20px rgba(245, 179, 66, 0.5);
    animation: splash-title-appear 1s ease-out, splash-title-pulse 2s ease-in-out infinite 1s;
}

@keyframes splash-title-appear {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes splash-title-pulse {

    0%,
    100% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    50% {
        text-shadow: 0 4px 40px rgba(255, 255, 255, 0.4), 0 0 60px rgba(255, 255, 255, 0.2);
    }
}

.splash-loader {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(245, 179, 66, 0.2);
    border-top-color: #F5B342;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(245, 179, 66, 0.4);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Layout
======================================== */
.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ========================================
   Header
======================================== */
.app-header {
    height: var(--header-height);
    background: rgba(5, 20, 41, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-logo {
    width: 36px;
    height: 36px;
    background: var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.app-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 2px;
}

.app-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pia-badge,
.quota-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 161, 230, 0.15);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
}

.pia-badge i,
.quota-badge i {
    font-size: 14px;
    color: var(--accent);
}

.header-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.header-btn:active {
    background: var(--border-color);
}

.header-btn .badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}

/* Bouton langue dans le header */
.header-btn.lang-btn {
    font-size: 18px;
    background: rgba(255, 255, 255, 0.05);
}

.header-btn.lang-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.lang-flag-btn {
    font-size: 20px;
    line-height: 1;
}

/* ========================================
   Content
======================================== */
.app-content {
    flex: 1;
    padding: 14px;
    padding-bottom: calc(var(--nav-height) + var(--safe-area-bottom) + 16px);
    overflow-y: auto;
}

/* ========================================
   Bottom Navigation
======================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-height) + var(--safe-area-bottom));
    padding-bottom: var(--safe-area-bottom);
    background: rgba(5, 20, 41, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    gap: 4px;
    transition: color var(--transition);
}

.nav-item i {
    font-size: 20px;
}

.nav-item.active {
    color: var(--primary);
}

.nav-item:active {
    opacity: 0.7;
}

/* ========================================
   Cards
======================================== */
.card {
    background: rgba(5, 20, 41, 0.85);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
}

.card-header {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title i {
    color: var(--primary);
}

.card-body {
    padding: 14px;
}

/* ========================================
   Match Card
======================================== */
.match-card {
    background: var(--bg-card);
    border-radius: 12px;
    border: none;
    padding: 14px;
    margin-bottom: 14px;
    position: relative;
    overflow: visible;
}

.match-card.sponsored {
}

.match-competition {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.match-competition-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.match-competition-name i {
    color: var(--primary);
}

.match-time {
    font-weight: 600;
    color: var(--text-secondary);
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.match-team {
    flex: 1;
    text-align: center;
}

.match-team-logo {
    width: 48px;
    height: 48px;
    background: var(--bg-input);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 24px;
    border: none;
}

.match-team-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.match-vs {
    padding: 0 12px;
    text-align: center;
}

.match-vs-text {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 1px;
}

.match-odds {
    display: flex;
    gap: 8px;
}

.odd-btn {
    flex: 1;
    padding: 12px 8px;
    background: #ffcc00; /* Jaune */
    border: 2px solid #ffcc00;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}

.odd-btn:active {
    background: #e6b800; /* Jaune plus foncé au clic */
    transform: scale(0.98);
}

.odd-btn.selected {
    border-color: #ff9900; /* Orange quand sélectionné */
    background: #ff9900;
}

.odd-label {
    font-size: 10px;
    color: #000000; /* Noir */
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.odd-value {
    font-size: 16px;
    font-weight: 700;
    color: #000000; /* Noir */
}

.odd-btn.selected .odd-label,
.odd-btn.selected .odd-value {
    color: #000000; /* Noir même quand sélectionné */
}

.match-pronostic-done {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(35, 134, 54, 0.1);
    border: none;
    border-radius: 10px;
    color: var(--success-light);
    font-weight: 600;
    font-size: 13px;
}

.match-pronostic-done i {
    font-size: 14px;
}

/* ========================================
   Buttons
======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity var(--transition);
    width: 100%;
}

.btn:active {
    opacity: 0.8;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
}

.btn-primary:active {
    opacity: 0.85;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ========================================
   Forms
======================================== */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 15px;
}

.form-control:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Select avec fond sombre - @version 2026.01.29 */
select.form-control {
    background-color: var(--bg-card, #1a1f2e);
    color: var(--text-primary, #fff);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B949E' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

select.form-control:focus {
    background-color: var(--bg-card, #1a1f2e);
    border-color: var(--primary, #F5B342);
}

select.form-control option {
    background-color: #1a1f2e;
    color: #fff;
    padding: 10px;
}

/* ========================================
   Badges
======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
}

.badge-success {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success-light);
}

.badge-warning {
    background: rgba(210, 153, 34, 0.15);
    color: var(--warning);
}

.badge-danger {
    background: rgba(218, 54, 51, 0.15);
    color: var(--danger);
}

.badge-info {
    background: rgba(88, 166, 255, 0.15);
    color: var(--info);
}

.badge-primary {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

/* ========================================
   Toast Notifications
======================================== */
#toast-container {
    position: fixed;
    top: calc(var(--header-height) + 10px);
    left: 14px;
    right: 14px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 12px 14px;
    background: var(--bg-card);
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: toastIn 0.25s ease;
    box-shadow: var(--shadow-lg);
}

@keyframes toastIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast.hiding {
    animation: toastOut 0.2s ease forwards;
}

@keyframes toastOut {
    to {
        transform: translateY(-10px);
        opacity: 0;
    }
}

.toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    color: white;
}

.toast.success .toast-icon {
    background: var(--success-light);
}

.toast.error .toast-icon {
    background: var(--danger);
}

.toast.warning .toast-icon {
    background: var(--warning);
}

.toast.info .toast-icon {
    background: var(--info);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.toast-message {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ========================================
   Section Title
======================================== */
.section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-primary);
}

.section-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.section-link:active {
    opacity: 0.7;
}

/* ========================================
   Classement
======================================== */
.ranking-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: none;
}

.ranking-item:last-child {
    border-bottom: none;
}

.ranking-item.current-user {
    background: rgba(0, 161, 230, 0.06);
    margin: 0 -14px;
    padding: 12px 14px;
    border-radius: 10px;
}

.ranking-position {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    margin-right: 12px;
}

.ranking-position.gold {
    background: var(--accent);
    color: #000;
}

.ranking-position.silver {
    background: #C0C0C0;
    color: #000;
}

.ranking-position.bronze {
    background: #CD7F32;
    color: #fff;
}

.ranking-position.default {
    background: var(--bg-input);
    color: var(--text-secondary);
}

.ranking-user {
    flex: 1;
    min-width: 0;
}

.ranking-user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-user-stats {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.ranking-value {
    text-align: right;
}

.ranking-value-main {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary);
}

.ranking-value-sub {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ========================================
   Empty State
======================================== */
.empty-state {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.empty-state p {
    font-size: 13px;
}

/* ========================================
   Modal
======================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 500px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

/* Modal Header avec bouton fermeture */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-input);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
    font-size: 16px;
}

.modal-close:hover {
    background: var(--danger);
    color: white;
    transform: scale(1.05);
}

.modal-close:active {
    transform: scale(0.95);
}

/* Modal Footer */
.modal-footer {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.modal-footer .btn {
    flex: 1;
    min-width: 120px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

/* Sur petits écrans, boutons en colonne */
@media (max-width: 360px) {
    .modal-footer {
        flex-direction: column;
    }
    .modal-footer .btn {
        width: 100%;
    }
}

.modal-footer .btn-secondary {
    background: var(--bg-input);
    border: none;
    color: var(--text-secondary);
}

/* Message Detail Modal */
.message-detail-modal {
    text-align: left;
}

.message-detail-modal h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.message-detail-modal .message-date {
    font-size: 13px;
    color: var(--text-muted);
}

.message-detail-modal .message-body {
    margin-top: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    font-size: 14px;
}

.modal-footer .btn-secondary:hover {
    background: var(--border-color);
}

/* ========================================
   Profile
======================================== */
.profile-avatar {
    width: 72px;
    height: 72px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.profile-name {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
}

.profile-phone {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 12px;
}

/* ========================================
   Stats Grid
======================================== */
.stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.stat-mini {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.stat-mini-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.stat-mini-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 600;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: none;
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-row span:first-child {
    color: var(--text-secondary);
    font-size: 13px;
}

.stat-row strong {
    font-weight: 600;
}

/* ========================================
   Utilities
======================================== */
.text-center {
    text-align: center;
}

.text-primary {
    color: var(--primary) !important;
}

.text-success {
    color: var(--success-light) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 16px;
}

.mt-4 {
    margin-top: 24px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 16px;
}

.mb-4 {
    margin-bottom: 24px;
}

.d-flex {
    display: flex;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 16px;
}

.hidden {
    display: none !important;
}

/* ========================================
   Notifications
======================================== */
.notification-card {
    cursor: pointer;
    transition: background var(--transition);
    margin-bottom: 10px;
}

.notification-card.unread {
    background: rgba(0, 161, 230, 0.08);
}

.notification-card:active {
    opacity: 0.8;
}

.notification-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.notification-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
}

.notification-date {
    font-size: 11px;
    color: var(--text-muted);
}

.notification-dot {
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 10px;
}

/* ========================================
   Betslip Panel (Panier de paris)
======================================== */
.betslip-toggle {
    position: relative;
}

.betslip-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.betslip-panel {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: var(--nav-height);
    width: 320px;
    max-width: 100%;
    background: var(--bg-card);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.betslip-panel.open {
    transform: translateX(0);
}

.betslip-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.betslip-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.betslip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: none;
    font-weight: 600;
}

.betslip-header i {
    margin-right: 8px;
    color: var(--primary);
}

.betslip-close {
    width: 32px;
    height: 32px;
    background: var(--bg-input);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
}

.betslip-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.betslip-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.betslip-empty i {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.betslip-empty p {
    font-weight: 600;
    margin-bottom: 4px;
}

.betslip-items {
    flex: 1;
    padding: 12px;
}

.betslip-item {
    background: var(--bg-input);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    position: relative;
}

.betslip-item-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--danger);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    cursor: pointer;
}

.betslip-item-match {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    padding-right: 30px;
}

.betslip-item-selection {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selection-label {
    font-weight: 600;
    color: var(--text-primary);
}

.selection-cote {
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
}

.betslip-summary {
    padding: 16px;
    border-top: none;
    background: var(--bg-darker);
}

.betslip-cote-total,
.betslip-gain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.betslip-cote-total strong,
.betslip-gain strong {
    color: var(--primary);
    font-size: 16px;
}

.betslip-mise {
    margin-bottom: 16px;
}

.betslip-mise label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.betslip-mise input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.betslip-validate {
    width: 100%;
    margin-bottom: 8px;
}

.betslip-clear {
    width: 100%;
}

/* ========================================
   Dashboard Banner & Quick Actions
======================================== */
.dashboard-banner {
    background: rgba(5, 20, 41, 0.7);
    padding: 24px 16px;
    margin-bottom: 16px;
}

.banner-content h2 {
    font-size: 20px;
    margin-bottom: 4px;
}

.banner-content p {
    color: var(--text-secondary);
    font-size: 14px;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 16px;
    margin-bottom: 20px;
}

.quick-action {
    background: rgba(5, 20, 41, 0.8);
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
}

.quick-action:active {
    opacity: 0.8;
}

.quick-action i {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 8px;
    display: block;
}

.quick-action span {
    font-size: 11px;
    color: var(--text-secondary);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 12px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
}

.section-link {
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
}

/* ========================================
   Match Cards BetClic Style
======================================== */
.matchs-grid {
    padding: 0 16px 16px;
}

.matchs-filters {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
    overflow-x: auto;
}

.filter-btn {
    padding: 8px 16px;
    background: var(--bg-input);
    border: none;
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.filter-btn.active {
    background: var(--primary);
    color: white;
}

.match-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: none;
    position: relative;
    overflow: visible;
}

.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.match-competition {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-time {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.match-teams .team {
    flex: 1;
    text-align: center;
}

.team-logo {
    width: 40px;
    height: 40px;
    background: var(--bg-input);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 20px;
}

.team-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.match-versus {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0 10px;
}

.match-odds {
    display: flex;
    gap: 8px;
}

.odd-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    background: #ffcc00 !important; /* Jaune */
    border: 2px solid #ffcc00 !important;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.odd-btn:hover {
    background: #ffcc00 !important;
}

.odd-btn.selected {
    border-color: #ff9900 !important;
    background: #ff9900 !important; /* Orange quand sélectionné */
}

.odd-label {
    font-size: 11px;
    color: #000000 !important; /* Noir */
    margin-bottom: 4px;
}

.odd-value {
    font-size: 14px;
    font-weight: 700;
    color: #000000 !important; /* Noir */
}

.match-already-bet {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success);
    padding: 10px 14px;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}

.match-already-bet.score-exact {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.score-exact-btn {
    width: 100%;
    margin-top: 10px;
    padding: 8px 14px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.score-exact-btn:hover {
    color: var(--primary);
}

.match-lots-badge {
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(210, 153, 34, 0.15);
    border: none;
    border-radius: 8px;
    color: var(--warning);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

/* ========================================
   Paris Cards
======================================== */
.tabs {
    display: flex;
    padding: 0 16px;
    margin-bottom: 16px;
    gap: 8px;
}

/* 3 onglets */
.tabs.tabs-3 {
    gap: 6px;
}

.tabs.tabs-3 .tab {
    flex: 1;
    min-width: 0;
}

.tab {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-input);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tab i {
    font-size: 12px;
}

.tab.active {
    background: var(--primary);
    color: white;
}

/* Styles pour les différents types de pronostics */
.prediction-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.prediction-choice .choix-badge {
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
}

.prediction-choice .choix-label {
    font-weight: 500;
    color: var(--text-primary);
}

.prediction-choice .choix-cote {
    color: var(--text-muted);
    font-size: 12px;
}

.result-badge {
    background: var(--bg-input);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

.pari-card {
    background: var(--bg-card);
    border-radius: 12px;
    margin: 0 16px 12px;
    padding: 16px;
    border: none;
}

.pari-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pari-match {
    font-weight: 600;
    font-size: 14px;
}

.pari-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.status-en_attente {
    background: rgba(88, 166, 255, 0.15);
    color: var(--info);
}

.status-gagne {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success);
}

.status-perdu {
    background: rgba(218, 54, 51, 0.15);
    color: var(--danger);
}

.status-annule {
    background: rgba(139, 148, 158, 0.15);
    color: var(--text-secondary);
}

.status-partiel {
    background: rgba(210, 153, 34, 0.15);
    color: var(--warning);
}

.pari-details {
    display: flex;
    gap: 16px;
}

.pari-details>div {
    flex: 1;
    text-align: center;
}

.pari-details .label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.pari-details strong {
    font-size: 14px;
}

.pari-gain {
    margin-top: 12px;
    padding-top: 12px;
    border-top: none;
    color: var(--success);
    font-weight: 600;
    font-size: 14px;
}

.pari-score-exact {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ========================================
   Combine Cards
======================================== */
.combine-card {
    background: var(--bg-card);
    border-radius: 12px;
    margin: 0 16px 12px;
    border: none;
    overflow: hidden;
}

.combine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: none;
}

.combine-title {
    font-weight: 600;
}

.combine-items {
    padding: 8px 0;
}

.combine-item {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    font-size: 13px;
    gap: 6px;
}

.combine-item .item-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.combine-item .item-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.combine-item.won {
    background: rgba(35, 134, 54, 0.15);
}

.combine-item.lost {
    background: rgba(218, 54, 51, 0.15);
}

.combine-item.live {
    background: rgba(0, 161, 230, 0.1);
}

/* Logos dans combine items */
.combine-team-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    flex-shrink: 0;
    vertical-align: middle;
    margin: 0 2px;
}

.combine-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.combine-team-initials {
    font-size: 7px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-match {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Mini badges pour combinés */
.mini-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    z-index: 5;
}

.sponsored-mini {
    background: var(--accent);
    color: #000;
}

.challenge-mini {
    background: #f39c12;
    color: #fff;
    right: 28px;
}

.yingyang-mini {
    background: var(--primary);
    color: #fff;
    left: 6px;
    right: auto;
}

.item-match {
    flex: 1;
    color: var(--text-secondary);
}

.item-choix {
    color: var(--text-primary);
    font-weight: 500;
    margin-left: 8px;
}

.item-score {
    font-weight: 600;
    padding: 2px 8px;
    background: var(--bg-input);
    border-radius: 4px;
    font-size: 12px;
}

.item-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--danger);
    text-transform: uppercase;
}

.item-live-badge i.pulse {
    animation: pulse 1s ease-in-out infinite;
    font-size: 8px;
}

.item-status-msg {
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
}

.item-status-msg.won {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success);
}

.item-status-msg.lost {
    background: rgba(218, 54, 51, 0.2);
    color: var(--danger);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.combine-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-darker);
    font-size: 12px;
}

.combine-footer span {
    color: var(--text-muted);
}

.combine-gain {
    padding: 12px 16px;
    background: rgba(35, 134, 54, 0.15);
    color: var(--success);
    font-weight: 600;
    text-align: center;
}

/* ========================================
   Ranking
======================================== */
.ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    margin: 0 16px 8px;
    border-radius: 10px;
}

.ranking-item.me {
    background: rgba(0, 161, 230, 0.1);
    border: none;
}

.ranking-position {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    background: var(--bg-input);
}

.ranking-position.gold {
    background: var(--accent);
    color: #000;
}

.ranking-position.silver {
    background: #C0C0C0;
    color: #000;
}

.ranking-position.bronze {
    background: #CD7F32;
    color: #fff;
}

.ranking-user {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ranking-avatar {
    width: 36px;
    height: 36px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
}

.ranking-name {
    font-weight: 600;
    font-size: 14px;
}

.ranking-stats {
    font-size: 12px;
    color: var(--text-muted);
}

.ranking-value {
    font-weight: 700;
    color: var(--primary);
}

/* ========================================
   Profile
======================================== */
.profile-header-card {
    background: var(--bg-card);
    padding: 30px 20px;
    text-align: center;
    margin: 0 16px 16px;
    border-radius: 12px;
}

.profile-avatar-large {
    width: 80px;
    height: 80px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin: 0 auto 16px;
}

.profile-header-card h2 {
    font-size: 20px;
    margin-bottom: 4px;
}

.profile-balance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 161, 230, 0.15);
    padding: 8px 16px;
    border-radius: 20px;
    margin-top: 12px;
    color: var(--primary);
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 16px 16px;
}

.stats-grid .stat-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
}

.stats-grid .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
}

.stats-grid .stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

.stats-grid .stat-card.success .stat-value {
    color: var(--success);
}

.stats-grid .stat-card.danger .stat-value {
    color: var(--danger);
}

.profile-menu {
    margin: 0 16px;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background: var(--bg-card);
    border: none;
    border-radius: 10px;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

.profile-menu-item i:first-child {
    color: var(--primary);
    width: 20px;
    text-align: center;
}

.profile-menu-item span {
    flex: 1;
}

.profile-menu-item span.menu-badge {
    flex: 0;
    background: var(--danger);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.profile-menu-item i:last-child {
    color: var(--text-muted);
}

.profile-menu-item.logout {
    color: var(--danger);
}

.profile-menu-item.logout i {
    color: var(--danger);
}

/* ========================================
   Section Code Promo
======================================== */
.promo-code-section {
    margin: 16px;
    padding: 20px;
    background: var(--primary);
    border-radius: 16px;
    text-align: center;
    color: white;
}

.promo-code-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    opacity: 0.9;
}

.promo-code-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 12px;
}

.promo-code-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
}

.promo-copy-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.promo-copy-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.promo-code-info {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 16px;
}

.promo-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.promo-stat-item {
    text-align: center;
}

.promo-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
}

.promo-stat-label {
    display: block;
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
}

/* ========================================
   Messages & Tickets Cards - Design moderne soft
======================================== */
.message-card,
.ticket-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
    margin: 0 16px 12px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    border: none;
}

.message-card:hover,
.ticket-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.message-card.unread {
    background: rgba(0, 161, 230, 0.06);
}

.message-card.unread .message-title {
    color: var(--primary);
}

.message-icon {
    width: 44px;
    height: 44px;
    background: rgba(0, 161, 230, 0.12);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

.message-card.unread .message-icon {
    background: var(--primary);
    color: white;
}

.message-content,
.ticket-content {
    flex: 1;
    min-width: 0;
}

.message-title,
.ticket-subject {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.message-preview {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.message-time,
.ticket-date {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-time::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 50%;
    opacity: 0.5;
}

/* Point de notification moderne */
.message-card .notification-dot,
.ticket-card .notification-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(94, 129, 244, 0.2);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Ticket specific - Design ameliore */
.ticket-card {
    flex-direction: column;
    gap: 10px;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.ticket-id {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(94, 129, 244, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
}

.ticket-subject {
    padding-right: 20px;
}

.ticket-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 11px;
    color: var(--text-muted);
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ticket-category {
    background: var(--bg-input);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Ticket avec nouvelles reponses */
.ticket-card.has-reply {
    background: rgba(35, 134, 54, 0.06);
}

.ticket-card.has-reply .ticket-id {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success-light);
}

/* ========================================
   Lots Cards
======================================== */
.lot-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin: 0 16px 10px;
}

.lot-icon {
    width: 48px;
    height: 48px;
    background: rgba(210, 153, 34, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--warning);
}

.lot-info {
    flex: 1;
}

.lot-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.lot-match {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.lot-team-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    flex-shrink: 0;
}

.lot-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lot-team-initials {
    font-size: 7px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lot-sponsor {
    font-size: 11px;
    color: var(--text-muted);
}

/* ========================================
   Score Input Modal
======================================== */
.score-input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0;
}

.score-team {
    text-align: center;
}

.score-team span {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.score-input {
    width: 70px;
    height: 60px;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.score-separator {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 20px;
}

/* ========================================
   Notifications Page
======================================== */
.notification-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-card);
    border-radius: 10px;
    padding: 14px;
    margin: 0 16px 8px;
    position: relative;
}

.notification-icon {
    width: 40px;
    height: 40px;
    background: var(--bg-input);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.notification-content {
    flex: 1;
}

.notification-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.notification-dot {
    position: absolute;
    top: 14px;
    right: 14px;
}

/* ========================================
   Page Title
======================================== */
.page-title {
    padding: 16px;
    font-size: 18px;
    font-weight: 600;
}

.page-title i {
    margin-right: 8px;
    color: var(--primary);
}

/* ========================================
   Loading & Empty States
======================================== */
.loading-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.loading-state i {
    font-size: 24px;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-state i {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
    display: block;
}

.empty-state p {
    font-weight: 600;
    margin-bottom: 4px;
}

/* ========================================
   Matchs Mode Toggle
======================================== */
.matchs-mode-toggle {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
    background: var(--bg-dark);
}

.mode-btn {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mode-btn:hover {
    background: var(--bg-card-hover);
}

.mode-btn.active {
    background: var(--primary);
    color: white;
}

.mode-btn i {
    font-size: 16px;
}

/* ========================================
   Ligues Style Betclic
======================================== */
.ligues-header {
    padding: 0 16px 16px;
}

.ligues-search {
    position: relative;
    margin-bottom: 12px;
}

.ligues-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.ligues-search input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    background: var(--bg-input);
    border: none;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
}

.ligues-search input::placeholder {
    color: var(--text-muted);
}

.ligues-search input:focus {
    outline: none;
}

.ligues-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.ligues-stats span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ligues-stats i {
    color: var(--primary);
}

/* Date Filter Tabs */
.date-filter-tabs {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.date-filter-tabs::-webkit-scrollbar {
    display: none;
}

.date-tab {
    flex-shrink: 0;
    padding: 10px 14px;
    background: var(--bg-card);
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.date-tab:hover {
    background: var(--bg-card-hover);
}

.date-tab.active {
    background: var(--primary);
    color: white;
}

/* Bouton LIVE orange */
.date-tab.live-tab {
    color: #FF6B00;
}

.date-tab.live-tab i {
    font-size: 8px;
    margin-right: 4px;
    color: #FF6B00;
}

.date-tab.live-tab i.pulse {
    animation: pulse-orange 1s ease-in-out infinite;
}

.date-tab.live-tab.has-live {
    background: rgba(255, 107, 0, 0.1);
}

.date-tab.live-tab.active {
    background: #FF6B00;
    color: white;
}

.date-tab.live-tab.active i {
    color: white;
}

.date-tab.live-tab .live-count {
    background: #FF6B00;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 4px;
}

.date-tab.live-tab.active .live-count {
    background: white;
    color: #FF6B00;
}

@keyframes pulse-orange {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Barre de competitions defilante */
.competitions-scroll-bar {
    padding: 0 16px 12px;
    overflow: hidden;
}

.competitions-scroll-inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.competitions-scroll-inner::-webkit-scrollbar {
    display: none;
}

.competition-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.competition-chip:hover {
    background: var(--bg-card-hover);
}

.competition-chip.selected {
    background: #FF6B00;
    color: white;
}

.competition-chip.has-live {
    color: #FF6B00;
}

.competition-chip.has-live i {
    font-size: 6px;
    animation: pulse-orange 1s ease-in-out infinite;
}

.competition-chip.has-live.selected i {
    color: white;
}

.competition-chip .chip-count {
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.competition-chip.selected .chip-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.no-competitions {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
}

/* Inter-ligue Banners */
.inter-ligue-banner {
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--primary);
    height: 80px;
}

.inter-ligue-banner-link {
    display: block;
    text-decoration: none;
}

.banner-content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-content-wrapper svg {
    width: 100%;
    height: 100%;
    max-height: 80px;
}

.banner-content-wrapper img {
    width: 100%;
    height: 80px;
    object-fit: cover;
}

/* Ligues Accordion */
.ligues-accordion {
    padding: 0 16px 16px;
}

.ligue-section {
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    border: none;
}

.ligue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ligue-header:hover {
    background: var(--bg-card-hover);
}

.ligue-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ligue-flag {
    font-size: 20px;
}

.ligue-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.ligue-count {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 10px;
}

.ligue-chevron {
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.ligue-section.expanded .ligue-chevron {
    transform: rotate(180deg);
}

.ligue-content {
    border-top: none;
    background: transparent;
}

/* ========================================
   UNIFIED Match Card Style (MÊME PARTOUT)
======================================== */
.match-card.unified-match {
    background: var(--bg-card);
    border-radius: 12px;
    border: none;
    padding: 14px 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: visible;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.match-card.unified-match:hover {
    transform: translateY(-2px);
}

.match-card.unified-match.match-sponsored {
}

.match-card.unified-match.match-sponsored:hover {
}

.match-card.unified-match.match-finished {
    opacity: 0.7;
}

.match-card.unified-match.match-finished:hover {
    transform: none;
}

.match-card.unified-match.match-live {
    background: var(--bg-card);
}

.match-card.unified-match.match-live:hover {
}

.live-score-display {
    color: var(--success) !important;
}

.live-score-display .score-home,
.live-score-display .score-away {
    color: var(--success);
}

/* Dans un accordion (ligues), pas de margin/border-radius */
.ligue-content .match-card.unified-match {
    border-radius: 0;
    margin-bottom: 0;
    border: none;
    border-bottom: none;
    background: transparent;
}

.ligue-content .match-card.unified-match:last-child {
    border-bottom: none;
}

.ligue-content .match-card.unified-match:hover {
    transform: none;
    background: rgba(0, 161, 230, 0.05);
}

/* Legacy support pour scraped-match (alias) */
.match-card.scraped-match {
    border-radius: 0;
    margin-bottom: 0;
    border: none;
    border-bottom: none;
    padding: 12px 16px;
    background: transparent;
    position: relative;
    overflow: visible;
}

.match-card.scraped-match.match-sponsored {
    /* Plus de padding-right, le bouton est en absolu */
}

.match-card.scraped-match:last-child {
    border-bottom: none;
}

.match-time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
}

.match-time-row .match-competition {
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(0, 161, 230, 0.1);
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.match-time-row .match-time {
    font-size: 11px;
    color: var(--text-muted);
    flex: 1;
    text-align: center;
}

.match-actions-mini {
    display: flex;
    gap: 6px;
}

.match-source {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.match-teams-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.match-team {
    flex: 1;
}

.match-team.home {
    text-align: left;
}

.match-team.away {
    text-align: right;
}

.match-team .team-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.match-score-placeholder {
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.match-odds-row {
    display: flex;
    gap: 6px;
}

.odd-btn.compact {
    flex: 1;
    flex-direction: row;
    padding: 8px 10px;
    gap: 6px;
}

.odd-btn.compact .odd-label {
    margin-bottom: 0;
    font-size: 10px;
    font-weight: 600;
}

.odd-btn.compact .odd-value {
    font-size: 13px;
}

.match-no-odds {
    text-align: center;
    padding: 8px;
    color: var(--text-muted);
    font-size: 12px;
    background: var(--bg-input);
    border-radius: 6px;
}

.match-no-odds i {
    margin-right: 6px;
    color: var(--warning);
}

/* ========================================
   SOFT Match Card Design V2
======================================== */
.match-card-soft {
    background: rgba(5, 20, 41, 0.85);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: none;
    padding: 16px;
    margin-bottom: 14px;
    position: relative;
    overflow: visible;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.match-card-soft:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 161, 230, 0.2);
}

.match-card-soft.match-sponsored {
    border-color: rgba(245, 179, 66, 0.2);
}

.match-card-soft.match-sponsored:hover {
    border-color: rgba(245, 179, 66, 0.4);
    box-shadow: 0 8px 24px rgba(245, 179, 66, 0.15);
}

.match-card-soft.match-finished {
    opacity: 0.7;
}

.match-card-soft.match-finished:hover {
    transform: none;
}

.match-card-soft.match-live {
    border-color: rgba(46, 160, 67, 0.3);
    background: rgba(5, 20, 41, 0.9);
}

.match-card-soft.match-live:hover {
    border-color: rgba(46, 160, 67, 0.5);
}

/* League header */
.match-card-soft .match-league {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: none;
}

.match-card-soft .match-league img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
}

.match-card-soft .match-league span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Match content - Teams centered */
.match-card-soft .match-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.match-card-soft .team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.match-card-soft .team-logo {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.match-card-soft .team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.match-card-soft .team-initials {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.match-card-soft .team-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Match info center */
.match-card-soft .match-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    min-width: 70px;
}

.match-card-soft .match-date {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

.match-card-soft .match-time {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.match-card-soft .match-score {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    gap: 6px;
}

.match-card-soft .match-score.live {
    color: var(--success);
}

/* Stats row - probabilities */
.match-card-soft .match-stats {
    display: flex;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 10px 8px;
    margin-bottom: 12px;
}

.match-card-soft .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.match-card-soft .stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}

/* Cotes en doré */
.match-card-soft .stat-value.stat-cote {
    color: #FFD700;
    text-shadow: 0 0 3px rgba(255, 215, 0, 0.3);
}

.match-card-soft .stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
}

/* Analyze button */
.match-card-soft .btn-analyze {
    width: 100%;
    padding: 12px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.match-card-soft .btn-analyze:hover {
    background: var(--primary);
    transform: scale(1.02);
}

.match-card-soft .btn-analyze i {
    font-size: 14px;
}

/* Badges positioning for soft card - Positionnés à l'intérieur */
.match-card-soft .sponsored-badge-btn,
.match-card-soft .ying-yang-badge,
.match-card-soft .challenge-badge-btn {
    position: absolute;
    top: 8px;
    width: 28px;
    height: 28px;
}

.match-card-soft .sponsored-badge-btn {
    right: 8px;
}

.match-card-soft .ying-yang-badge {
    left: 8px;
}

.match-card-soft .challenge-badge-btn {
    left: 8px;
}

.match-card-soft:has(.sponsored-badge-btn):has(.ying-yang-badge) .ying-yang-badge {
    left: 8px;
}

.match-card-soft:has(.sponsored-badge-btn):has(.challenge-badge-btn) .challenge-badge-btn {
    left: 42px;
}

.match-card-soft:has(.ying-yang-badge):has(.challenge-badge-btn) .challenge-badge-btn {
    left: 42px;
}

/* Sponsor lots compact */
.match-card-soft .sponsor-lots-compact {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(245, 179, 66, 0.15);
}

.match-card-soft .lot-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.match-card-soft .lot-badge.gold {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
}

.match-card-soft .lot-badge.silver {
    background: rgba(192, 192, 192, 0.15);
    color: #c0c0c0;
}

.match-card-soft .lot-badge.bronze {
    background: rgba(205, 127, 50, 0.15);
    color: #cd7f32;
}

/* Already bet indicator */
.match-card-soft .match-bet-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(35, 134, 54, 0.15);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--success);
    margin-bottom: 10px;
}

.match-card-soft .match-bet-indicator.score-exact {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

.match-card-soft .match-bet-indicator i {
    font-size: 12px;
}

/* Loading text */
.loading-text {
    color: var(--text-muted);
    font-size: 12px;
}

/* ========================================
   Menu Hamburger Ligues
======================================== */
.hamburger-btn {
    margin-right: 8px;
}

.leagues-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85%;
    background: var(--bg-card);
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.leagues-menu.open {
    transform: translateX(0);
}

.leagues-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.leagues-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.leagues-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: none;
    background: var(--bg-darker);
}

.leagues-menu-header span {
    font-weight: 600;
    font-size: 16px;
}

.leagues-menu-header i {
    color: var(--primary);
    margin-right: 8px;
}

.leagues-menu-close {
    width: 32px;
    height: 32px;
    background: var(--bg-input);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
}

.leagues-menu-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.leagues-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.leagues-menu-item:hover {
    background: var(--bg-card-hover);
}

.leagues-menu-item .league-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.leagues-menu-item .league-count {
    background: var(--primary);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.leagues-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 16px;
}

.leagues-menu-item.view-all {
    background: var(--bg-input);
    margin: 8px;
    border-radius: 8px;
}

.leagues-menu-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.leagues-menu-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

/* ========================================
   Score Exact Modal
======================================== */
.score-exact-modal {
    position: fixed;
    inset: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.score-exact-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.score-exact-modal-content {
    position: relative;
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 340px;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.score-exact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-darker);
    border-bottom: none;
}

.score-exact-header span {
    font-weight: 600;
}

.score-exact-header i {
    color: var(--warning);
    margin-right: 8px;
}

.score-exact-close {
    width: 28px;
    height: 28px;
    background: var(--bg-input);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
}

.score-exact-body {
    padding: 20px;
}

.score-exact-match {
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.score-exact-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.score-exact-team {
    text-align: center;
}

.score-exact-team label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-exact-team input {
    width: 60px;
    height: 60px;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

.score-exact-team input:focus {
    outline: none;
}

.score-exact-separator {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 20px;
}

.score-exact-info {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.score-exact-info i {
    margin-right: 4px;
}

.score-exact-btn-mini {
    background: var(--warning);
    color: #000;
    border: none;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.score-exact-btn-mini:hover {
    background: #e6b422;
}

.score-exact-btn-mini i {
    margin-right: 4px;
}

/* Opportunities Section in Score Exact Modal */
.opportunities-section {
    margin: 16px 0;
    padding: 12px;
    background: var(--bg-darker);
    border-radius: 12px;
}

.opportunities-title {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.opportunities-title i {
    color: var(--warning);
}

.opportunities-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opportunity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.opportunity-item:hover {
    background: var(--bg-card-hover);
}

.opportunity-item.done {
    opacity: 0.6;
}

.opportunity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.opportunity-item.challenge .opportunity-icon {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
}

.opportunity-item.gbonhi .opportunity-icon {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.opportunity-item.ying-yang .opportunity-icon {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

.opportunity-info {
    flex: 1;
    min-width: 0;
}

.opportunity-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opportunity-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.opportunity-arrow,
.opportunity-badge {
    color: var(--text-muted);
    font-size: 12px;
}

.opportunity-badge {
    color: var(--success);
}

/* ========================================
   Toast Notifications
======================================== */
.toast-notification {
    position: fixed;
    bottom: calc(var(--nav-height) + 20px);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 1003;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: calc(100% - 40px);
}

.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-success .toast-icon {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success);
}

.toast-error .toast-icon {
    background: rgba(218, 54, 51, 0.15);
    color: var(--danger);
}

.toast-info .toast-icon {
    background: rgba(88, 166, 255, 0.15);
    color: var(--info);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.toast-message {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ========================================
   Boutons utilitaires
======================================== */
.btn-block {
    display: block;
    width: 100%;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-primary i {
    margin-right: 8px;
}

.btn-success {
    background: var(--success);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-success:hover {
    background: var(--success-light);
}

.btn-success:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--bg-input);
    color: var(--text-primary);
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

::selection {
    background: rgba(0, 161, 230, 0.3);
    color: var(--text-primary);
}

/* ========================================
   Match Detail Page with AI Analysis
======================================== */
.page-header-back {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border-bottom: none;
}

.btn-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
}

.page-title-inline {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.match-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-card);
    margin: 16px;
    border-radius: 12px;
}

.match-detail-competition,
.match-detail-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.match-detail-competition i,
.match-detail-date i {
    color: var(--primary);
}

.match-detail-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px 16px;
    background: var(--bg-card);
    margin: 0 16px 16px;
    border-radius: 12px;
}

.match-detail-team {
    text-align: center;
    flex: 1;
}

.team-logo-large {
    font-size: 40px;
    margin-bottom: 8px;
}

.team-name-large {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.match-detail-vs {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 8px 12px;
    border-radius: 8px;
}

.match-detail-odds {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
}

.odd-card {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: #ffcc00; /* Jaune */
    border: 2px solid #ffcc00;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.odd-card:active {
    background: #e6b800; /* Jaune plus foncé au clic */
    transform: scale(0.98);
}

.odd-card.selected {
    border-color: #ff9900; /* Orange quand sélectionné */
    background: #ff9900;
}

.odd-card.recommended {
    border-color: #00cc66; /* Vert pour recommandé */
    background: #00cc66;
}

.odd-card .odd-label {
    display: block;
    font-size: 11px;
    color: #000000; /* Noir */
    margin-bottom: 4px;
    font-weight: 600;
}

.odd-card .odd-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #000000; /* Noir */
}

.odd-card.recommended .odd-label,
.odd-card.recommended .odd-value {
    color: #000000; /* Noir même quand recommandé */
}

/* Analysis Sections */
.analysis-section {
    background: var(--bg-card);
    margin: 0 16px 16px;
    border-radius: 12px;
    padding: 16px;
}

.analysis-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.analysis-section-title i {
    color: var(--primary);
}

.provider-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    background: var(--primary);
    color: white;
    border-radius: 10px;
    margin-left: auto;
    text-transform: uppercase;
}

.analysis-resume {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Pronostic Card */
.pronostic-card {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 16px;
}

.pronostic-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pronostic-label {
    font-size: 12px;
    color: var(--text-muted);
}

.pronostic-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--success);
}

.pronostic-confidence {
    margin-bottom: 12px;
}

.confidence-bar {
    height: 6px;
    background: var(--bg-card);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.confidence-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.confidence-text {
    font-size: 11px;
    color: var(--text-muted);
}

.pronostic-score {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.pronostic-score strong {
    color: var(--text-primary);
}

.pronostic-explanation {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Teams Form */
.teams-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.team-form-card {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 12px;
}

.team-form-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.team-form-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.team-form-status.good {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success);
}

.team-form-status.average {
    background: rgba(210, 153, 34, 0.2);
    color: var(--warning);
}

.team-form-status.bad {
    background: rgba(218, 54, 51, 0.2);
    color: var(--danger);
}

.form-matches {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.form-result {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
}

.form-result.win {
    background: var(--success);
    color: white;
}

.form-result.lose {
    background: var(--danger);
    color: white;
}

.form-result.draw {
    background: var(--warning);
    color: white;
}

.form-result.unknown {
    background: var(--bg-card);
    color: var(--text-muted);
}

.team-form-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* H2H */
.h2h-summary {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.h2h-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h2h-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 8px;
}

.h2h-date {
    font-size: 11px;
    color: var(--text-muted);
}

.h2h-score {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.h2h-winner {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

.badge-success {
    background: var(--success);
    color: white;
}

.badge-danger {
    background: var(--danger);
    color: white;
}

.badge-secondary {
    background: var(--text-muted);
    color: white;
}

/* Player Spotlight */
.player-spotlight {
    display: flex;
    gap: 12px;
    background: var(--bg-input);
    padding: 12px;
    border-radius: 10px;
}

.player-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    color: white;
    font-size: 20px;
}

.player-info {
    flex: 1;
}

.player-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.player-team {
    font-size: 12px;
    color: var(--primary);
    margin-bottom: 4px;
}

.player-reason {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Alerts */
.alert-list {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
}

.alert-list:last-child {
    margin-bottom: 0;
}

.alert-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.alert-list.risks .alert-title {
    color: var(--danger);
}

.alert-list.opportunities .alert-title {
    color: var(--success);
}

.alert-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.alert-list li {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 0;
    padding-left: 16px;
    position: relative;
}

.alert-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: inherit;
}

/* Match Detail Actions */
.match-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.btn-action {
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease;
}

.btn-action:not(.secondary) {
    background: var(--primary);
    color: white;
}

.btn-action:not(.secondary):hover {
    background: var(--primary-dark);
}

.btn-action.secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: none;
}

.btn-retry {
    margin-top: 12px;
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analysis-fallback-notice {
    text-align: center;
    padding: 12px;
    font-size: 12px;
    color: var(--warning);
    background: rgba(210, 153, 34, 0.1);
    margin: 0 16px 16px;
    border-radius: 8px;
}

/* Match Actions Mini */
.match-actions-mini {
    display: flex;
    gap: 6px;
}

.analyze-btn-mini {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 12px;
}

.match-card.scraped-match {
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.match-card.scraped-match:hover {
}

/* Match sponsorisé */
.match-card.match-sponsored {
    position: relative;
    overflow: visible;
}

.sponsored-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffc107;
    border-radius: 50%;
    color: #1a1a2e;
    font-size: 12px;
    z-index: 5;
}

/* Bouton badge sponsorisé cliquable */
.sponsored-badge-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    color: #1a1a2e;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.sponsored-badge-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.6);
}

.sponsored-badge-btn i {
    font-size: 13px;
}

/* Badge Ying Yang - Position en haut a gauche */
.ying-yang-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #ff9900;
    border-radius: 50%;
    color: white;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
    animation: yinyang-spin 10s linear infinite;
}

.ying-yang-badge i {
    font-size: 14px;
}

@keyframes yinyang-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Si les deux badges sont presents - YY a gauche, Sponsor a droite */
.match-card:has(.sponsored-badge-btn):has(.ying-yang-badge) .ying-yang-badge {
    top: 8px;
    left: 8px;
}

.match-card:has(.sponsored-badge-btn):has(.ying-yang-badge) .sponsored-badge-btn {
    top: 8px;
    right: 8px;
}

/* Badge Challenge - Position en haut à gauche (comme sponsorisé) - Couleur BLEUE */
.challenge-badge-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.challenge-badge-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
}

.challenge-badge-btn i {
    font-size: 13px;
}

/* Si plusieurs badges presents - positionnement intelligent */
.match-card:has(.sponsored-badge-btn):has(.challenge-badge-btn) .challenge-badge-btn {
    top: 8px;
    left: 42px;
}

.match-card:has(.ying-yang-badge):has(.challenge-badge-btn) .challenge-badge-btn {
    top: 8px;
    left: 42px;
}

.match-card:has(.sponsored-badge-btn):has(.ying-yang-badge):has(.challenge-badge-btn) .challenge-badge-btn {
    top: 8px;
    left: 76px;
}

/* Modal Container - Style de base */
.modal-container {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 500px;
    animation: slideUp 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

/* Modal sponsoring */
.sponsor-info-modal .modal-container {
    max-width: 500px;
    background: var(--bg-card);
}

.sponsor-modal-content {
    padding: 0;
}

.sponsor-modal-header {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: none;
    margin-bottom: 16px;
}

.sponsor-modal-header h3 {
    font-size: 18px;
    color: var(--text-primary);
}

.sponsor-modal-header p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.match-score-display {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 8px;
}

.sponsor-info-section {
    margin-bottom: 20px;
}

.sponsor-badge-large {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 12px;
    border: none;
}

.sponsor-badge-large.plateforme {
    background: rgba(0, 161, 230, 0.1);
}

.sponsor-badge-large .sponsor-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
}

.sponsor-badge-large i {
    font-size: 32px;
    color: #ffc107;
}

.sponsor-badge-large.plateforme i {
    color: var(--primary);
}

.sponsor-name {
    font-size: 14px;
    color: var(--text-primary);
}

.sponsor-lots-section {
    margin-bottom: 20px;
}

.sponsor-lots-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #ffc107;
    margin-bottom: 12px;
}

.lots-prizes {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.prize-item {
    text-align: center;
    padding: 16px 20px;
    border-radius: 12px;
    min-width: 100px;
}

.prize-item.prize-1 {
    background: rgba(255, 215, 0, 0.1);
    border: none;
}

.prize-item.prize-2 {
    background: rgba(192, 192, 192, 0.1);
    border: none;
}

.prize-item.prize-3 {
    background: rgba(205, 127, 50, 0.1);
    border: none;
}

.prize-rank {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.prize-item.prize-1 .prize-rank {
    color: #ffd700;
}

.prize-item.prize-2 .prize-rank {
    color: #c0c0c0;
}

.prize-item.prize-3 .prize-rank {
    color: #cd7f32;
}

.prize-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.lots-info-text {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 12px;
}

.physical-lots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.physical-lot-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 8px;
}

.physical-lot-item .lot-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.lot-image-placeholder {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 24px;
}

.lot-details {
    flex: 1;
}

.lot-details strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.lot-details p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.lot-quantity {
    font-size: 11px;
    color: var(--text-muted);
}

.winners-section {
    margin-bottom: 20px;
}

.winners-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #ffc107;
    margin-bottom: 12px;
}

.winners-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.winner-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 8px;
}

.winner-item.rank-1 .winner-rank {
    background: var(--bg-input);
}

.winner-item.rank-2 .winner-rank {
    background: var(--bg-input);
}

.winner-item.rank-3 .winner-rank {
    background: var(--bg-input);
}

.winner-rank {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
}

.winner-item.rank-1 .winner-rank {
    color: #ffd700;
}

.winner-item.rank-2 .winner-rank {
    color: #c0c0c0;
}

.winner-item.rank-3 .winner-rank {
    color: #cd7f32;
}

.winner-info {
    flex: 1;
}

.winner-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.winner-phone {
    font-size: 12px;
    color: var(--text-muted);
}

.winner-prize {
    font-weight: 700;
    color: var(--success);
}

.text-gold {
    color: #ffc107 !important;
}

/* Lots sponsorisés */
.sponsor-lots {
    margin-top: 12px;
    padding: 10px;
    background: rgba(255, 193, 7, 0.08);
    border-radius: 8px;
    border: none;
}

.sponsor-lots-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #ffc107;
    margin-bottom: 8px;
}

.sponsor-lots-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sponsor-lot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
}

.sponsor-lot.gold {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
}

.sponsor-lot.silver {
    background: rgba(192, 192, 192, 0.15);
    color: #c0c0c0;
}

.sponsor-lot.bronze {
    background: rgba(205, 127, 50, 0.15);
    color: #cd7f32;
}

.lot-rank {
    font-weight: 600;
}

.lot-amount {
    font-weight: 500;
}

/* Match terminé (grisé) */
.match-card.match-finished {
    opacity: 0.6;
    background: var(--bg-darker);
}

.match-card.match-finished:hover {
    opacity: 0.75;
}

.match-status-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.match-status-badge.finished {
    background: rgba(218, 54, 51, 0.2);
    color: #ff6b6b;
}

.match-status-badge.live {
    background: rgba(35, 134, 54, 0.2);
    color: #2ea043;
}

.match-status-badge.live .status-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.match-status-badge.live .status-live i {
    font-size: 6px;
    animation: pulse-live 1s ease-in-out infinite;
}

@keyframes pulse-live {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

.match-score-live {
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-score-live .live-score {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 4px 12px;
    background: var(--bg-input);
    border-radius: 6px;
}

.match-score-live.has-score .live-score {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success);
}

.match-minute {
    font-size: 11px;
    font-weight: 600;
    color: var(--success);
    margin-left: 8px;
}

.match-final-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.match-final-score .score-home,
.match-final-score .score-away {
    min-width: 24px;
    text-align: center;
}

.match-final-score .score-sep {
    color: var(--text-muted);
}

.match-closed-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(110, 118, 129, 0.1);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.match-closed-info i {
    color: var(--danger);
}

/* ========================================
   Hero Slider
======================================== */
.hero-slider {
    margin: 0 -16px 20px;
    padding: 0 16px;
    position: relative;
    overflow: hidden;
}

.hero-slides {
    position: relative;
    height: 160px;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 16px;
    overflow: hidden;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide:nth-child(1) {
    background: #1877F2;
}

.hero-slide:nth-child(2) {
    background: #7c3aed;
}

.hero-slide:nth-child(3) {
    background: #059669;
}

.hero-slide-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 20px 24px;
}

.hero-slide-text {
    flex: 1;
}

.hero-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.hero-slide-text h2 {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.hero-slide-text p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.4;
}

.hero-slide-visual {
    flex-shrink: 0;
    margin-left: 16px;
}

.hero-svg {
    width: 80px;
    height: 80px;
}

.hero-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--primary);
}

/* ========================================
   User Stats Bar
======================================== */
.user-stats-bar {
    display: flex;
    justify-content: space-around;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.user-stat {
    text-align: center;
}

.user-stat .stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.user-stat .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   Quick Actions Improved
======================================== */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--bg-card);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action:active {
    transform: scale(0.95);
}

.qa-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 12px;
    font-size: 18px;
    color: var(--primary);
}

.quick-action span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ========================================
   Improved Match Cards
======================================== */
.match-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    border: none;
    position: relative;
    overflow: visible;
}

/* Match sponsorisé - bouton visible */
.match-card.match-sponsored {
    overflow: visible;
}


.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: none;
}

.match-competition {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 161, 230, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

.match-time {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.team {
    flex: 1;
    text-align: center;
}

.team-logo {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 12px;
    font-size: 24px;
}

.team-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.match-versus {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 6px 10px;
    background: var(--bg-input);
    border-radius: 8px;
}

.match-odds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.odd-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: #ffcc00 !important; /* Jaune */
    border: 2px solid #ffcc00 !important;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.odd-btn:hover {
    border-color: #ffcc00 !important;
    background: #ffcc00 !important;
}

.odd-btn.selected {
    border-color: #ff9900 !important;
    background: #ff9900 !important; /* Orange quand sélectionné */
}

.odd-label {
    font-size: 11px;
    font-weight: 700;
    color: #000000 !important; /* Noir */
    letter-spacing: 0.5px;
}

.odd-value {
    font-size: 17px;
    font-weight: 700;
    color: #000000 !important; /* Noir */
}

.odd-btn.selected .odd-value {
    color: #000000 !important; /* Noir */
}

.score-exact-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.score-exact-btn:hover {
    color: var(--primary);
    background: rgba(0, 161, 230, 0.05);
}

.match-lots-badge {
    width: 100%;
    padding: 12px;
    background: rgba(255, 193, 7, 0.1);
    border: none;
    border-radius: 10px;
    color: #ffc107;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.match-already-bet {
    padding: 12px;
    background: rgba(35, 134, 54, 0.1);
    border: none;
    border-radius: 10px;
    color: var(--success-light);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ========================================
   Predictions Block
======================================== */
.predictions-block {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    border: 2px solid var(--primary);
}

.predictions-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.predictions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.prediction-item {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.prediction-item.winner {
    grid-column: span 2;
    background: rgba(0, 161, 230, 0.1);
    border: none;
}

.prediction-item.score {
    background: rgba(35, 134, 54, 0.1);
    border: none;
}

.prediction-item.confidence {
    background: rgba(255, 193, 7, 0.1);
    border: none;
}

.prediction-item.scorer {
    grid-column: span 2;
    background: rgba(156, 39, 176, 0.1);
    border: none;
}

.prediction-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.prediction-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.prediction-item.winner .prediction-value {
    color: var(--primary);
}

.prediction-item.score .prediction-value {
    color: var(--success-light);
    font-size: 24px;
}

.prediction-item.confidence .prediction-value {
    color: #ffc107;
}

.prediction-item.scorer .prediction-value {
    color: #9c27b0;
}

/* ========================================
   Simplified Match Detail
======================================== */
.match-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 16px;
}

.match-detail-competition {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

.match-detail-date {
    font-size: 12px;
    color: var(--text-muted);
}

.match-detail-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 16px;
}

.match-detail-team {
    flex: 1;
    text-align: center;
}

.team-name-large {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.match-detail-vs {
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.match-detail-odds {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.match-detail-odds .odd-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: #ffcc00 !important; /* Jaune */
    border: 2px solid #ffcc00 !important;
    border-radius: 12px;
    cursor: pointer;
}

.match-detail-odds .odd-card:hover {
    border-color: #ffcc00 !important;
    background: #ffcc00 !important;
}

.match-detail-odds .odd-card.recommended {
    background: rgba(35, 134, 54, 0.1);
}

.match-detail-odds .odd-label {
    font-size: 12px;
    font-weight: 600;
    color: #000000 !important; /* Noir */
    margin-bottom: 4px;
}

.match-detail-odds .odd-value {
    font-size: 20px;
    font-weight: 700;
    color: #000000 !important; /* Noir */
}

.simple-pronostic {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.pronostic-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: none;
}

.pronostic-row:last-child {
    border-bottom: none;
}

.pronostic-row .pronostic-label {
    font-size: 13px;
    color: var(--text-muted);
}

.pronostic-row .pronostic-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.simple-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.simple-section .section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.simple-resume {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.teams-form-simple {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.team-form-simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-name-small {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-badges {
    display: flex;
    gap: 4px;
}

.form-badge {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.form-badge.win {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success-light);
}

.form-badge.lose {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.form-badge.draw {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.form-badge.unknown {
    background: var(--bg-input);
    color: var(--text-muted);
}

.btn-action-full {
    width: 100%;
    padding: 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.btn-action-full:hover {
    opacity: 0.9;
}

.no-data {
    color: var(--text-muted);
    font-size: 12px;
}

/* ========================================
   Advanced Analysis - Predictions
======================================== */
.team-rating {
    font-size: 12px;
    color: var(--primary);
    margin-top: 4px;
}

.predictions-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.pred-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.pred-row.main {
    margin-bottom: 12px;
}

.pred-row.secondary {
    padding-top: 12px;
    border-top: none;
}

.pred-item {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    background: var(--bg-input);
    border-radius: 8px;
    border: 2px solid transparent;
}

.pred-item.highlight {
    background: rgba(35, 134, 54, 0.15);
}

.pred-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.pred-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.pred-cote {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.pred-item-small {
    flex: 1;
    text-align: center;
    padding: 8px;
}

.pred-label-sm {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.pred-val-sm {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.score-probable {
    text-align: center;
    padding-top: 12px;
    margin-top: 12px;
    border-top: none;
    font-size: 13px;
    color: var(--text-secondary);
}

.score-probable strong {
    color: var(--primary);
    font-size: 16px;
}

/* ========================================
   Advanced Analysis - Statistics
======================================== */
.stats-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.stats-section .section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-compare {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-val {
    width: 40px;
    font-size: 13px;
    font-weight: 600;
}

.stat-val.home {
    text-align: right;
    color: var(--primary);
}

.stat-val.away {
    text-align: left;
    color: var(--info);
}

.stat-val.better {
    color: var(--success-light);
}

.stat-val.worse {
    color: var(--text-muted);
}

.stat-bar-container {
    flex: 1;
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 4px;
}

.stat-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    display: flex;
    overflow: hidden;
}

.stat-bar-home {
    background: var(--primary);
    height: 100%;
}

.stat-bar-away {
    background: var(--info);
    height: 100%;
}

/* ========================================
   Advanced Analysis - Sector Ratings
======================================== */
.sectors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sector-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sector-team {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    padding-bottom: 8px;
    border-bottom: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sector-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sector-name {
    width: 50px;
    font-size: 10px;
    color: var(--text-muted);
}

.sector-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}

.sector-fill {
    height: 100%;
    background: var(--success);
    border-radius: 3px;
}

.sector-val {
    width: 35px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

/* ========================================
   Advanced Analysis - Form Grid
======================================== */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.form-team-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.form-goals {
    font-size: 10px;
    color: var(--text-muted);
}

/* ========================================
   Advanced Analysis - Players
======================================== */
.players-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.players-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    padding-bottom: 8px;
    border-bottom: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.players-group {
    margin-bottom: 8px;
}

.group-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.players-group.injured .group-label {
    color: var(--danger);
}

.players-group.in-form .group-label {
    color: var(--success);
}

.player-item {
    padding: 4px 0;
}

.player-name {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
}

.player-info {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
}

.player-item.injured .player-name {
    color: var(--danger);
    text-decoration: line-through;
}

.player-item.in-form .player-name {
    color: var(--success);
}

/* ========================================
   Advanced Analysis - Synthesis & Advice
======================================== */
.synthesis-card,
.advice-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.synthesis-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.advice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.advice-list li {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    border-bottom: none;
}

.advice-list li:last-child {
    border-bottom: none;
}

.advice-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
}

/* ========================================
   Predictions Detaillees (Corners, Cartons...)
======================================== */
.detailed-predictions {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.pred-tabs-app {
    margin-top: 12px;
}

.pred-tabs-header {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pred-tab-btn {
    flex-shrink: 0;
    padding: 8px 12px;
    background: var(--bg-input);
    border: none;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.pred-tab-btn.active {
    background: var(--primary);
    color: white;
}

.pred-tab-btn i {
    font-size: 10px;
}

.pred-tabs-content {
    background: var(--bg-input);
    border-radius: 8px;
    padding: 12px;
}

.pred-tab-panel {
    display: none;
}

.pred-tab-panel.active {
    display: block;
}

.expected-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: none;
    font-size: 12px;
    color: var(--text-secondary);
}

.expected-stats strong {
    color: var(--primary);
}

.pred-lines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pred-line-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: 6px;
    border: none;
}

.pred-line-item.high-prob {
    background: rgba(35, 134, 54, 0.08);
}

.pred-line-item.mid-prob {
    background: rgba(210, 153, 34, 0.08);
}

.line-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.line-prob {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
}

.special-pred {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(218, 54, 51, 0.1);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--danger);
}

/* ========================================
   Combinaisons Intelligentes App
======================================== */
.combinaisons-app {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.combos-intro-app {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.combos-intro-app i {
    color: var(--primary);
}

.combo-category-app {
    margin-bottom: 16px;
}

.combo-category-app:last-child {
    margin-bottom: 0;
}

.combo-cat-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.combo-category-app.securisees .combo-cat-header {
    color: var(--success);
}

.combo-category-app.equilibrees .combo-cat-header {
    color: var(--warning);
}

.combo-category-app.risquees .combo-cat-header {
    color: var(--danger);
}

.combo-item-app {
    background: var(--bg-input);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    border: none;
}

.combo-header-app {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.combo-header-app>i {
    color: var(--primary);
    font-size: 14px;
}

.combo-elements-app {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.combo-el-app {
    background: var(--bg-card);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.combo-stats-app {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.combo-prob-app {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: white;
}

.combo-prob-app.badge-success {
    background: var(--success);
}

.combo-prob-app.badge-warning {
    background: var(--warning);
}

.combo-prob-app.badge-danger {
    background: var(--danger);
}

.combo-cote-app {
    font-size: 11px;
    color: var(--text-muted);
}

.combo-explanation-app {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px;
    background: rgba(35, 134, 54, 0.08);
    border-radius: 6px;
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.combo-explanation-app i {
    color: var(--warning);
    margin-top: 1px;
    flex-shrink: 0;
}

/* ========================================
   Analysis Loading Animation
======================================== */
.analysis-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    min-height: 300px;
}

.analysis-countdown {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}

.analysis-countdown svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.analysis-countdown .countdown-bg {
    fill: none;
    stroke: var(--bg-input);
    stroke-width: 6;
}

.analysis-countdown .countdown-progress {
    fill: none;
    stroke: var(--primary);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.analysis-countdown .countdown-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
}

.analysis-status {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    text-align: center;
}

.analysis-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 280px;
}

.analysis-steps .step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-card);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.analysis-steps .step i {
    width: 16px;
    text-align: center;
}

.analysis-steps .step.active {
    background: var(--primary);
    color: white;
}

.analysis-steps .step.completed {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success-light);
}

.analysis-steps .step.completed i {
    color: var(--success-light);
}

/* ========================================
   SPONSOR CARD - Match Sponsorisé
======================================== */
.sponsor-card {
    background: rgba(255, 193, 7, 0.1);
    border: none;
    border-radius: 12px;
    margin: 16px 0;
    overflow: hidden;
}

.sponsor-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 193, 7, 0.1);
    border-bottom: 1px solid rgba(255, 193, 7, 0.2);
    color: #FFC107;
    font-size: 14px;
}

.sponsor-header i {
    color: #FFD54F;
}

.sponsor-lots {
    padding: 16px;
}

.lot-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.lot-title i {
    color: #FF9800;
}

.lots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.lot-item {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    border: none;
    transition: transform 0.2s ease;
}

.lot-item:hover {
    transform: translateY(-2px);
}

.lot-item.gold {
    background: rgba(255, 215, 0, 0.1);
}

.lot-item.gold .lot-rank {
    color: var(--accent);
}

.lot-item.silver {
    background: rgba(192, 192, 192, 0.1);
}

.lot-item.silver .lot-rank {
    color: #C0C0C0;
}

.lot-item.bronze {
    background: rgba(205, 127, 50, 0.1);
}

.lot-item.bronze .lot-rank {
    color: #CD7F32;
}

.lot-rank {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.lot-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.lot-desc {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

.sponsor-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: #FFD54F;
}

.sponsor-info i {
    flex-shrink: 0;
}

/* Bouton sponsorisé */
.btn-action-full.btn-sponsored {
    background: #FF9800;
    color: #000;
    font-weight: 700;
}

.btn-action-full.btn-sponsored:hover {
    background: #FFC107;
}

.btn-action-full .btn-badge {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 8px;
}

/* ========================================
   MES PRONOSTICS - Page utilisateur
======================================== */
.prono-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.prono-stat-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    border: none;
}

.prono-stat-card.success {
    background: rgba(35, 134, 54, 0.1);
}

.prono-stat-card.danger {
    background: rgba(218, 54, 51, 0.1);
}

.prono-stat-card.primary {
    background: rgba(0, 161, 230, 0.1);
}

.prono-stat-icon {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.prono-stat-card.success .prono-stat-icon {
    color: var(--success-light);
}

.prono-stat-card.danger .prono-stat-icon {
    color: var(--danger);
}

.prono-stat-card.primary .prono-stat-icon {
    color: var(--primary);
}

.prono-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.prono-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

.prono-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 12px 20px;
}

/* Filtre par date pour les pronostics */
.pronostics-date-filter {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pronostics-date-filter::-webkit-scrollbar {
    display: none;
}

.date-filter-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.date-filter-btn:hover {
    background: var(--bg-card-hover);
}

.date-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.date-filter-btn i {
    font-size: 11px;
}

/* Section badges pour Mes Analyses fusionnées */
.pronostics-section {
    margin-bottom: 24px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 12px;
}

.score-exact-badge {
    background: rgba(52, 152, 219, 0.15);
    color: var(--primary);
    border: 2px solid var(--primary);
}

.simple-badge {
    background: rgba(46, 204, 113, 0.15);
    color: var(--success);
    border: 2px solid var(--success);
}

.combine-badge {
    background: rgba(155, 89, 182, 0.15);
    color: var(--primary);
    border: 2px solid var(--primary);
}

.pronostics-list {
    display: grid;
    gap: 12px;
}

.prono-card {
    background: var(--bg-card);
    border-radius: 12px;
    border: none;
    overflow: hidden;
    transition: all 0.2s ease;
}

.prono-card.won {
}

.prono-card.lost {
    opacity: 0.85;
}

.prono-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
    background: var(--bg-card-hover);
    border-bottom: none;
}

.prono-match-info {
    flex: 1;
}

.prono-teams {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.prono-teams .team {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.prono-teams .vs {
    font-size: 11px;
    color: var(--text-muted);
}

/* Logos dans historique pronostics */
.prono-team-with-logo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.prono-team-logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prono-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.prono-team-initials {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prono-competition {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.prono-competition i {
    color: var(--warning);
    margin-right: 4px;
}

.prono-status {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.prono-status.pending {
    background: rgba(210, 153, 34, 0.15);
    color: var(--warning);
}

.prono-status.won {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success-light);
}

.prono-status.lost {
    background: rgba(218, 54, 51, 0.15);
    color: var(--danger);
}

.prono-card-body {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.prono-card-body .prono-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.prono-prediction,
.prono-result {
    text-align: left;
}

.prediction-label,
.result-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.prediction-score,
.result-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.prediction-score .score-num,
.result-score .score-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.prediction-score .score-sep,
.result-score .score-sep {
    color: var(--text-muted);
    font-size: 14px;
}

.result-score.correct .score-num {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success-light);
    border: none;
}

.result-score.incorrect .score-num {
    background: rgba(218, 54, 51, 0.15);
    color: var(--danger);
}

.prediction-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.prediction-choice .choix-badge {
    background: var(--primary);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    min-width: 36px;
    text-align: center;
}

.prediction-choice .choix-label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 13px;
}

.prediction-choice .choix-cote {
    color: var(--primary-light);
    font-size: 13px;
    font-weight: 600;
}

.prono-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: none;
}

.prono-date {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
}

.prono-date i {
    margin-right: 4px;
    color: var(--primary-light);
}

.prono-mise {
    text-align: right;
}

.mise-label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.mise-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.prono-card-footer {
    padding: 10px 12px;
    background: rgba(35, 134, 54, 0.15);
    border-top: 1px solid rgba(35, 134, 54, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--success-light);
    font-size: 13px;
}

.prono-card-footer i {
    color: var(--accent);
}

/* Empty state button */
.btn-primary-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.btn-primary-outline:hover {
    background: var(--primary);
    color: white;
}

/* ========================================
   PRONOSTIC EXISTANT - Modal lecture seule
======================================== */
.score-exact-header.already-predicted {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success-light);
}

.score-exact-header.already-predicted i {
    color: var(--success-light);
}

.existing-prono-display {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
    text-align: center;
    border: 2px solid rgba(35, 134, 54, 0.3);
}

.existing-prono-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.existing-prono-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.existing-prono-score .score-num {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 134, 54, 0.2);
    border: 2px solid rgba(35, 134, 54, 0.4);
    border-radius: 10px;
    font-size: 24px;
    font-weight: 700;
    color: var(--success-light);
}

.existing-prono-score .score-sep {
    font-size: 24px;
    color: var(--text-muted);
}

.existing-prono-mise {
    margin-top: 12px;
    font-size: 14px;
    color: var(--primary);
    font-weight: 600;
}

.existing-prono-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(210, 153, 34, 0.1);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--warning);
}

.existing-prono-info i {
    font-size: 14px;
}

.btn-secondary {
    background: var(--bg-input);
    border: none;
    color: var(--text-secondary);
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* ========================================
   JULIK PRO - Page Abonnements
======================================== */

.julik-pro-quota-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    margin: 16px;
    border: none;
}

.quota-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.quota-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.quota-title i {
    color: var(--primary);
}

.quota-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.quota-badge.gratuit {
    background: var(--text-muted);
    color: white;
}

.quota-badge.standard {
    background: var(--primary);
    color: white;
}

.quota-badge.plus {
    background: var(--success);
    color: white;
}

.quota-badge.max {
    background: var(--warning);
    color: var(--bg-dark);
}

.quota-progress-container {
    margin-bottom: 16px;
}

.quota-numbers {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 12px;
}

.quota-used {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary);
}

.quota-separator {
    font-size: 24px;
    margin: 0 4px;
    color: var(--text-muted);
}

.quota-total {
    font-size: 24px;
    color: var(--text-secondary);
}

.quota-progress-bar {
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.quota-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.quota-progress-fill.warning {
    background: #D29922;
}

.quota-progress-fill.critical {
    background: #DA3633;
}

.quota-info {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
}

.quota-remaining i {
    color: var(--primary);
    margin-right: 4px;
}

.client-code-box {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 8px;
    text-align: center;
}

.client-code-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.client-code-value {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 2px;
}

/* ========================================
   Plans Container - Nouveau design
======================================== */
.plans-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px;
    margin-bottom: 24px;
}

.plan-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px 16px;
    position: relative;
    border: 2px solid var(--border-color);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.plan-card:active {
    transform: scale(0.98);
}

.plan-card.current {
}

.plan-card.popular {
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.25);
    transform: scale(1.02);
}

.popular-ribbon {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: #8B5CF6;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.current-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--success);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.plan-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.plan-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.plan-price {
    margin-bottom: 16px;
}

.price-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
}

.price-unit {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
}

.price-free {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-secondary);
}

.plan-features {
    text-align: left;
    margin-bottom: 16px;
}

.plan-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 0;
}

.plan-feature i {
    color: var(--success);
    width: 16px;
    font-size: 12px;
}

.plan-feature.main {
    font-size: 13px;
    color: var(--text-primary);
}

.plan-feature.highlight {
    color: #8B5CF6;
}

.plan-feature.highlight i {
    color: #8B5CF6;
}

.plan-feature.muted {
    color: var(--text-muted);
}

.plan-feature.muted i {
    color: var(--text-muted);
}

.plan-btn {
    width: 100%;
    padding: 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.plan-btn:hover {
    background: var(--primary);
    color: white;
}

.plan-btn.btn-popular {
    background: #8B5CF6;
    color: white;
}

.plan-btn.btn-popular:hover {
    background: #7C3AED;
}

.plan-btn.btn-current {
    background: var(--bg-input);
    color: var(--success);
    cursor: default;
}

.plan-current-free {
    font-size: 12px;
    color: var(--text-muted);
    padding: 12px;
}

/* Plans FREE/PRO - Nouvelle grille 2 colonnes */
.plans-container.plans-two-cols {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 500px;
    margin: 0 auto 24px;
}

.plans-two-cols .plan-card {
    padding: 24px 16px;
}

.plans-two-cols .plan-card.popular {
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.25);
}

.plans-two-cols .popular-ribbon {
    background: var(--accent);
}

.plan-bonus-badge {
    background: rgba(16, 185, 129, 0.15);
    border: none;
    color: #10B981;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 10px;
    margin: 8px 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.plan-bonus-badge i {
    font-size: 12px;
}

.plans-two-cols .plan-feature.highlight {
    color: #F59E0B;
}

.plans-two-cols .plan-feature.highlight i {
    color: #F59E0B;
}

.plans-two-cols .plan-btn.btn-popular {
    background: var(--accent);
    color: white;
}

.plans-two-cols .plan-btn.btn-popular:hover {
    background: var(--accent-dark);
}

/* Badge PRO pour modules */
.pm-badge.pro {
    background: var(--accent);
    color: white;
}

/* Ancien style abonnements - garder pour compatibilite */
.abonnements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px;
    margin-bottom: 24px;
}

.abonnement-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--border-color);
    transition: transform 0.2s, border-color 0.2s;
}

.abonnement-card.current {
}

.abonnement-current-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 1;
}

.abonnement-header {
    padding: 16px 12px;
    text-align: center;
    color: white;
}

.abonnement-name {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.abonnement-price {
    font-size: 18px;
    font-weight: 700;
}

.abonnement-body {
    padding: 12px;
}

.abonnement-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.abonnement-feature i {
    color: var(--success);
    width: 16px;
}

.btn-subscribe {
    width: 100%;
    padding: 10px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}

.btn-subscribe:hover {
    background: var(--primary-dark);
}

.btn-subscribe.btn-current {
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: default;
}

/* Historique Analyses */
.analyse-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card);
    margin: 0 16px 8px;
    border-radius: 8px;
    border: none;
}

.analyse-history-item.correct {
    background: rgba(35, 134, 54, 0.05);
}

.analyse-history-item.incorrect {
    background: rgba(220, 53, 69, 0.05);
}

.analyse-match {
    flex: 1;
}

.analyse-teams {
    font-weight: 600;
    font-size: 14px;
    display: block;
}

.analyse-date {
    font-size: 12px;
    color: var(--text-muted);
}

.analyse-prediction {
    display: flex;
    align-items: center;
    gap: 8px;
}

.analyse-choix {
    background: var(--bg-input);
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
}

.analyse-verification {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.analyse-verification.success {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success);
}

.analyse-verification.fail {
    background: rgba(218, 54, 51, 0.2);
    color: var(--danger);
}

.analyse-pending {
    color: var(--text-muted);
}

.julik-pro-info {
    display: flex;
    gap: 12px;
    padding: 16px;
    margin: 16px;
    background: var(--bg-input);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.julik-pro-info i {
    color: var(--info);
    flex-shrink: 0;
}

.empty-state-small {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
}

.empty-state-small i {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.loading-state-small {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
}

/* Subscribe Modal */
.subscribe-modal .modal-body {
    text-align: center;
}

.subscribe-price {
    margin: 20px 0 10px;
}

.subscribe-price .price-value {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary);
}

.subscribe-price .price-currency {
    font-size: 16px;
    color: var(--primary);
    font-weight: 600;
}

.subscribe-price .price-period {
    font-size: 14px;
    color: var(--text-muted);
}

.price-conversions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-muted);
}

.conversion-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.conversion-item i {
    color: var(--success);
}

.conversion-separator {
    color: var(--border-color);
}

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.payment-method {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-input);
    border-radius: 12px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.payment-method.selected {
    background: rgba(29, 195, 211, 0.12);
}

.payment-method input {
    display: none;
}

.payment-logo {
    display: flex;
    align-items: center;
}

.payment-check {
    color: #1DC3D3;
    font-size: 20px;
}

.payment-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.payment-info i {
    color: var(--success);
}

.btn-wave {
    background: #1DC3D3;
    color: white;
    border: none;
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-wave:hover {
    background: #0EA5B7;
    transform: translateY(-1px);
}

/* Abonnement price conversion */
.abonnement-price-conv {
    display: block;
    font-size: 11px;
    opacity: 0.9;
    margin-top: 2px;
}

/* Abonnement feature highlight */
.abonnement-feature.highlight {
    color: var(--accent);
}

.abonnement-feature.highlight i {
    color: var(--accent);
}

/* ========================================
   Combinaisons Intelligentes
======================================== */

.section-badge {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

.section-badge.free {
    background: #28a745;
    color: white;
}

.combinaisons-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 16px 20px;
}

/* ========================================
   Combinaison Cards - Design Premium
======================================== */
.combinaison-card {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.combinaison-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Types de combinaisons avec couleurs */
.combinaison-card.securite {
}

.combinaison-card.equilibree {
}

.combinaison-card.audacieuse {
}

.combinaison-card.mixte {
}

.combi-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-input);
}

.combi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Icones par type */
.combi-icon.securite {
    background: #28a745;
}

.combi-icon.equilibree {
    background: #007bff;
}

.combi-icon.audacieuse {
    background: #dc3545;
}

.combi-icon.mixte {
    background: #ffc107;
}

.combi-info {
    flex: 1;
    min-width: 0;
}

.combi-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.combi-info p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}

.combi-cote {
    text-align: center;
    padding: 10px 14px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 10px;
    min-width: 70px;
}

.combi-cote .cote-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
}

.combi-cote .cote-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.combi-matchs {
    padding: 12px 16px;
}

.combi-match {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-input);
    border-radius: 10px;
}

.combi-match:last-child {
    margin-bottom: 0;
}

.match-teams {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 12px;
}

.match-choix {
    display: flex;
    align-items: center;
    gap: 8px;
}

.choix-badge {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
}

.choix-label {
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.choix-cote {
    font-size: 13px;
    color: var(--success);
    font-weight: 700;
    background: rgba(35, 134, 54, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
}

.btn-add-combi {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-add-combi:hover {
    background: var(--primary-light);
}

.btn-add-combi i {
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-combi:hover {
    background: var(--primary-light);
}

/* Combinaison Card Mini Version */
.combinaison-card.mini {
    border-radius: 10px;
    min-width: 280px;
    flex-shrink: 0;
}

.combi-header.mini {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-input);
}

.combi-header.mini .combi-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.combi-cote-mini {
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.combi-matchs.mini {
    padding: 8px 12px;
}

.combi-match-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 11px;
    color: var(--text-secondary);
    border-bottom: none;
}

.combi-match-mini:last-child {
    border-bottom: none;
}

.choix-badge.mini {
    width: 20px;
    height: 20px;
    font-size: 9px;
}

.btn-add-combi.mini {
    padding: 10px;
    font-size: 12px;
}

.combi-results-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
}

.combi-results-scroll::-webkit-scrollbar {
    height: 6px;
}

.combi-results-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.combi-result-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.combi-result-section h4 i {
    color: var(--accent);
}

.combi-result-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 8px;
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 12px;
}

/* Combinaisons PRO Banner (pour Plus/Max) */
.combinaisons-pro-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin: 12px 16px;
    background: rgba(0, 161, 230, 0.1);
    border: none;
    border-radius: 10px;
}

.combinaisons-pro-banner .banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.combinaisons-pro-banner .banner-content i {
    color: var(--accent);
    font-size: 16px;
}

.btn-generate-combi {
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-generate-combi:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-generate-combi:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.4);
}

/* Ligue checkbox pour sélection */
.ligue-checkbox {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.ligue-checkbox input {
    display: none;
}

.ligue-checkbox .checkmark {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: var(--bg-input);
}

.ligue-checkbox input:checked+.checkmark {
    background: var(--primary);
}

.ligue-checkbox input:checked+.checkmark::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
    font-size: 12px;
}

.ligue-section.selected-for-combi {
    border: 2px solid #7B1FA2;
}

.ligue-section.selected-for-combi .ligue-header {
    background: rgba(123, 31, 162, 0.1);
}

/* Combinaisons Modal */
.combinaisons-modal .modal-body,
.combinaisons-results-modal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.combi-gen-info {
    text-align: center;
}

.selected-ligues-list {
    list-style: none;
    margin: 16px 0;
    text-align: left;
}

.selected-ligues-list li {
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}

.selected-ligues-list li i {
    color: var(--accent);
    margin-right: 8px;
}

.combi-gen-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: var(--warning);
}

/* Combinaisons Results */
.quota-update {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.quota-update i {
    color: var(--primary);
}

.combi-result-section {
    margin-bottom: 20px;
}

.combi-result-section h4 {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.combi-result-section h4 i {
    color: var(--accent);
}

.combi-results-scroll {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.combi-result-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 8px;
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 12px;
}

/* Mini combinaison cards */
.combinaison-card.mini {
    padding: 10px;
}

.combi-header.mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 8px;
    border-bottom: none;
    margin-bottom: 8px;
}

.combi-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.combi-cote-mini {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.combi-matchs.mini {
    padding: 0;
}

.combi-match-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 11px;
    color: var(--text-secondary);
}

.choix-badge.mini {
    width: 18px;
    height: 18px;
    font-size: 9px;
}

.btn-add-combi.mini {
    padding: 8px;
    font-size: 11px;
    margin-top: 8px;
}

/* ========================================
   JULIK PRO - Bouton Analyse (Match Detail)
======================================== */

.julik-pro-trigger {
    margin: 16px;
}

.btn-julik-pro {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px;
    background: var(--primary);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(0, 161, 230, 0.3);
}

.btn-julik-pro:hover {
    transform: translateY(-2px);
    background: #1565C0;
    box-shadow: 0 6px 20px rgba(0, 161, 230, 0.4);
}

.btn-julik-pro:active {
    transform: translateY(0);
}

.btn-julik-pro i {
    font-size: 28px;
    color: var(--accent);
}

.btn-julik-pro span {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.btn-julik-pro small {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.btn-julik-pro.disabled {
    background: var(--bg-input);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-julik-pro.disabled:hover {
    transform: none;
    background: var(--bg-input);
    box-shadow: none;
}

.btn-julik-pro.disabled i {
    color: var(--text-muted);
}

.btn-julik-pro.disabled span {
    color: var(--text-muted);
}

.analysis-completed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: rgba(35, 134, 54, 0.15);
    border-radius: 12px;
    color: var(--success);
    font-weight: 600;
}

.analysis-completed i {
    font-size: 20px;
}

.analysis-error {
    text-align: center;
    padding: 24px;
    background: rgba(218, 54, 51, 0.1);
    border-radius: 12px;
}

.analysis-error i {
    font-size: 32px;
    color: var(--danger);
    margin-bottom: 12px;
}

.analysis-error p {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.btn-upgrade {
    padding: 12px 24px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.btn-upgrade:hover {
    background: #1565C0;
}

.btn-upgrade i {
    font-size: 16px;
    color: var(--accent);
}

.btn-retry-small {
    padding: 10px 20px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Match detail odds */
.match-detail-odds {
    display: flex;
    gap: 12px;
    margin: 16px;
}

.match-detail-odds .odd-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    background: #ffcc00 !important; /* Jaune */
    border: 2px solid #ffcc00 !important;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.match-detail-odds .odd-card:hover,
.match-detail-odds .odd-card:active {
    border-color: #ffcc00 !important;
    background: #ffcc00 !important;
}

.match-detail-odds .odd-card.selected {
    border-color: #ff9900 !important;
    background: #ff9900 !important; /* Orange quand sélectionné */
}

.match-detail-odds .odd-card.selected .odd-label,
.match-detail-odds .odd-card.selected .odd-value {
    color: #000000 !important; /* Noir */
}

.match-detail-odds .odd-label {
    font-size: 14px;
    font-weight: 600;
    color: #000000 !important; /* Noir */
    margin-bottom: 4px;
}

.match-detail-odds .odd-value {
    font-size: 20px;
    font-weight: 700;
    color: #000000 !important; /* Noir */
}

/* ========================================
   Betting Markets Section - Style BetClic
======================================== */

.betting-markets {
    padding: 12px 16px;
}

.betting-markets.odds-disabled {
    opacity: 0.6;
}

.market-section {
    margin-bottom: 16px;
}

.market-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-left: 4px;
}

.market-odds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.market-odds.market-odds-2 {
    grid-template-columns: repeat(2, 1fr);
}

.market-odds .odd-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
    background: #ffcc00 !important; /* Jaune */
    border: 2px solid #ffcc00 !important;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.market-odds .odd-card:hover {
    background: #ffcc00 !important;
    border-color: #ffcc00 !important;
    transform: translateY(-2px);
}

.market-odds .odd-card:active {
    transform: translateY(0);
}

.market-odds .odd-card.selected {
    background: #ff9900 !important; /* Orange */
    border-color: #ff9900 !important;
}

.market-odds .odd-card.selected .odd-label,
.market-odds .odd-card.selected .odd-value {
    color: #000000 !important; /* Noir */
}

.market-odds .odd-card.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.market-odds .odd-card.disabled:hover {
    transform: none;
}

.market-odds .odd-label {
    font-size: 12px;
    color: #000000 !important; /* Noir */
    font-weight: 500;
}

.market-odds .odd-value {
    font-size: 18px;
    font-weight: 700;
    color: #000000 !important; /* Noir */
}

/* Betslip - Market label */
.selection-market {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

/* Bouton Score Exact */
.btn-score-exact {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    margin: 0 16px 16px;
    background: var(--bg-card);
    border: 2px solid var(--success);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: calc(100% - 32px);
}

.btn-score-exact:hover {
    background: var(--success);
    color: white;
}

.btn-score-exact i {
    font-size: 18px;
    color: var(--success);
}

.btn-score-exact:hover i {
    color: white;
}

.btn-score-exact.sponsored {
    background: rgba(255, 215, 0, 0.1);
}

.btn-score-exact.sponsored i {
    color: var(--accent);
}

.score-exact-bonus {
    background: var(--accent);
    color: #000;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* Pronostic existant banner */
.existing-prono-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 16px;
    background: rgba(35, 134, 54, 0.15);
    border: 1px solid var(--success);
    border-radius: 10px;
    color: var(--success);
    font-weight: 600;
    font-size: 14px;
}

.existing-prono-banner i {
    font-size: 18px;
}

/* Banniere statut match (termine/en cours) */
.match-status-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 16px;
    border-radius: 12px;
    font-weight: 600;
}

.match-status-banner.finished {
    background: rgba(138, 148, 158, 0.15);
    border: 1px solid var(--text-muted);
    color: var(--text-secondary);
}

.match-status-banner.finished i {
    font-size: 20px;
    color: var(--text-muted);
}

.match-status-banner.live {
    background: rgba(218, 54, 51, 0.15);
    border: 1px solid var(--danger);
    color: var(--danger);
}

.match-status-banner.live i {
    font-size: 12px;
    animation: blink 1s infinite;
}

.match-status-banner .status-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.match-status-banner .status-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-status-banner .final-score,
.match-status-banner .live-score {
    font-size: 24px;
    font-weight: 700;
}

.match-status-banner.finished .final-score {
    color: var(--text-primary);
}

.match-status-banner.live .live-score {
    color: white;
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

/* Cotes desactivees */
.match-detail-odds.odds-disabled {
    opacity: 0.6;
}

.odd-card.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.odd-card.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Bouton score exact desactive */
.btn-score-exact.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-input);
}

.btn-score-exact.disabled i {
    color: var(--text-muted);
}

/* ========================================
   Section Sponsor - Match Detail
======================================== */

.sponsor-section {
    margin: 16px;
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

.sponsor-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 215, 0, 0.1);
}

.sponsor-logo {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(255, 215, 0, 0.5);
}

.sponsor-info {
    flex: 1;
}

.sponsor-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 215, 0, 0.2);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
}

.sponsor-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.sponsor-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

/* Visuels/Bannieres Sponsor */
.sponsor-visuels {
    display: flex;
    gap: 12px;
    padding: 0 16px 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sponsor-visuels::-webkit-scrollbar {
    display: none;
}

.sponsor-visuel {
    min-width: 120px;
    height: 80px;
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsor-visuel img,
.sponsor-visuel svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.visuel-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Recompenses */
.sponsor-rewards {
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
}

.rewards-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.rewards-title i {
    color: var(--accent);
}

.rewards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.reward-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 10px;
    text-align: center;
}

.reward-card.gold {
    background: rgba(255, 215, 0, 0.12);
    border: none;
}

.reward-card.silver {
    background: rgba(192, 192, 192, 0.12);
    border: none;
}

.reward-card.bronze {
    background: rgba(205, 127, 50, 0.12);
    border: none;
}

.reward-icon {
    font-size: 20px;
    margin-bottom: 6px;
}

.reward-card.gold .reward-icon {
    color: var(--accent);
}

.reward-card.silver .reward-icon {
    color: #C0C0C0;
}

.reward-card.bronze .reward-icon {
    color: #CD7F32;
}

.reward-rank {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
}

.reward-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Lots physiques */
.lots-physiques {
    margin-top: 16px;
    padding-top: 16px;
    border-top: none;
}

.lots-physiques h5 {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 10px;
}

.lot-item-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: none;
}

.lot-item-detail:last-child {
    border-bottom: none;
}

.lot-rang {
    background: var(--bg-input);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

.lot-titre {
    flex: 1;
    font-size: 13px;
}

.lot-pia {
    background: var(--success);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

/* ========================================
   JULIK PRO - Ameliorations UI (propre, sans degrade)
======================================== */

/* Historique sans border-left - style propre */
.analyse-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-card);
    margin: 0 16px 10px;
    border-radius: 10px;
    border: none;
}

.analyse-history-item.correct {
    background: rgba(35, 134, 54, 0.08);
}

.analyse-history-item.incorrect {
    background: rgba(218, 54, 51, 0.08);
}

/* Cards abonnements - style propre sans degrade */
.abonnement-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: none;
    transition: transform 0.2s, border-color 0.2s;
}

.abonnement-card:active {
    transform: scale(0.98);
}

.abonnement-card.current {
    border-width: 2px;
}

/* Quota card - style propre */
.julik-pro-quota-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 24px;
    margin: 16px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ========================================
   HISTORIQUE ANALYSES - Pages
======================================== */

.page-header-simple {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border-bottom: none;
}

.btn-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-input);
    border: none;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.page-title-sm {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* Barre de filtres */
.filter-bar {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    align-items: flex-end;
}

.filter-group {
    flex: 1;
}

.filter-group label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.filter-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-input);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
}

.btn-filter {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
}

/* Stats bar historique */
.history-stats-bar {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: var(--bg-input);
    margin: 0 16px;
    border-radius: 12px;
}

.history-stat {
    text-align: center;
}

.history-stat .stat-val {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.history-stat .stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
}

.history-stat.success .stat-val {
    color: var(--success);
}

.history-stat.danger .stat-val {
    color: var(--danger);
}

/* Liste historique */
.history-list {
    padding: 16px;
}

.history-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.15s;
}

.history-item:active {
    transform: scale(0.98);
}

.history-item.correct {
}

.history-item.incorrect {
}

.history-item-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.history-match-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Badge type d'analyse */
.history-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.history-type-badge.match {
    background: var(--primary);
    color: white;
}

.history-type-badge.module {
    background: #ff9900;
    color: white;
}

.history-teams {
    font-weight: 600;
    font-size: 14px;
}

.history-comp {
    font-size: 11px;
    color: var(--text-muted);
}

.history-date {
    font-size: 11px;
    color: var(--text-muted);
}

.history-item-result {
    display: flex;
    align-items: center;
    gap: 12px;
}

.history-prediction {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pred-badge {
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
}

.pred-conf {
    font-size: 12px;
    color: var(--text-muted);
}

.history-verdict {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

.history-verdict.success {
    color: var(--success);
}

.history-verdict.fail {
    color: var(--danger);
}

.history-pending {
    font-size: 12px;
    color: var(--text-muted);
}

.history-arrow {
    color: var(--text-muted);
    margin-left: auto;
}

/* Pagination simple */
.pagination-simple {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: var(--bg-card);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
}

.page-btn.active {
    background: var(--primary);
    color: white;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-dots {
    color: var(--text-muted);
    line-height: 36px;
}

/* ========================================
   DETAIL ANALYSE - Page
======================================== */

.analyse-detail-header {
    padding: 20px 16px;
    background: var(--bg-card);
    text-align: center;
    border-bottom: none;
}

.match-teams-large {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.match-teams-large .team-home,
.match-teams-large .team-away {
    font-size: 16px;
    font-weight: 700;
}

.match-teams-large .vs {
    font-size: 12px;
    color: var(--text-muted);
}

.match-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.match-meta i {
    margin-right: 4px;
}

.final-score {
    background: var(--bg-input);
    padding: 12px 24px;
    border-radius: 12px;
    display: inline-block;
}

.final-score .score-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.final-score .score-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
}

.match-status-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-input);
    color: var(--text-secondary);
}

/* Section card */
.section-card {
    background: var(--bg-card);
    margin: 16px;
    border-radius: 16px;
    padding: 16px;
    border: none;
}

.section-card-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-card-title i {
    color: var(--primary);
}

/* Grille predictions */
.predictions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.pred-item {
    text-align: center;
    padding: 14px 10px;
    background: var(--bg-input);
    border-radius: 12px;
    border: 2px solid transparent;
}

.pred-item.recommended {
    background: rgba(0, 255, 136, 0.1);
}

.pred-item.correct-result {
}

.pred-item .pred-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.pred-item .pred-percent {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.pred-item .pred-cote {
    font-size: 11px;
    color: var(--text-muted);
}

/* Résumé prediction */
.pred-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    padding: 16px;
    background: var(--bg-input);
    border-radius: 12px;
    margin-top: 16px;
}

.pred-summary>div {
    text-align: center;
}

.pred-summary .label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.pred-summary .value {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
}

.pred-summary .value.badge-1,
.pred-summary .value.badge-2,
.pred-summary .value.badge-N {
    display: inline-block;
    padding: 6px 12px;
    background: var(--primary);
    color: white;
    border-radius: 6px;
}

.badge-1,
.badge-2 {
    color: var(--primary);
}

.badge-N {
    color: var(--warning);
}

/* Combinaisons */
.combinations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.combination-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 8px;
}

.combo-type {
    font-size: 12px;
    color: var(--text-muted);
}

.combo-selection {
    font-weight: 600;
    color: var(--primary);
}

.combo-conf {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Comparaison */
.comparison-card {
    border-width: 2px;
}

.comparison-card.success {
    background: rgba(35, 134, 54, 0.05);
}

.comparison-card.fail {
    background: rgba(218, 54, 51, 0.05);
}

.comparison-grid {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.comparison-col {
    flex: 1;
    text-align: center;
}

.comparison-col h4 {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 8px 0;
}

.comp-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.comp-label {
    color: var(--text-muted);
}

.comp-value {
    font-weight: 600;
}

.comparison-vs {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}

.comparison-verdict {
    text-align: center;
    padding-top: 16px;
    margin-top: 12px;
    border-top: none;
    font-weight: 600;
    font-size: 14px;
}

.comparison-card.success .comparison-verdict {
    color: var(--success);
}

.comparison-card.fail .comparison-verdict {
    color: var(--danger);
}

.bonus-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 10px;
    background: var(--warning);
    color: var(--bg-dark);
    border-radius: 20px;
    font-size: 12px;
}

/* Pending card */
.pending-card {
    text-align: center;
}

.pending-text {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
}

/* Analyse meta */
.analyse-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

.analyse-meta i {
    margin-right: 6px;
}

/* ========================================
   Premium Modules Section (Super Analyst & PRONIX)
======================================== */

.premium-modules-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.premium-module-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.premium-module-card:hover {
    transform: translateY(-2px);
}

.premium-module-card:active {
    transform: translateY(0);
}

.premium-module-card .pm-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.premium-module-card.analyst .pm-icon {
    background: rgba(0, 161, 230, 0.1);
    color: var(--primary);
}

.premium-module-card.pronix .pm-icon {
    background: rgba(0, 161, 230, 0.1);
    color: var(--primary);
}

.premium-module-card.testix .pm-icon {
    background: rgba(231, 76, 60, 0.15);
    color: #E74C3C;
}

/* Pronix utilise le style de base - pas de fond special */

.premium-module-card .pm-content {
    flex: 1;
    min-width: 0;
}

.premium-module-card .pm-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.premium-module-card .pm-content p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.premium-module-card .pm-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.premium-module-card .pm-badge.pro {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
    font-weight: 600;
}

.premium-module-card .pm-badge.plus {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

.premium-module-card .pm-badge.max {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

.premium-module-card .pm-arrow {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

/* ========================================
   Super Analyst Page
======================================== */

.super-analyst-page {
    padding: 16px;
}

.analyst-header {
    text-align: center;
    margin-bottom: 20px;
}

.analyst-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.analyst-header h2 i {
    color: var(--primary);
}

.analyst-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* Mode Tabs */
.analyst-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--bg-card);
    padding: 6px;
    border-radius: 12px;
}

.mode-tab {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
}

.mode-tab:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.mode-tab.active {
    background: var(--primary);
    color: white;
}

.mode-tab i {
    font-size: 14px;
}

.analyst-filters {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.analyst-filters .filter-row {
    margin-bottom: 16px;
}

.analyst-filters .filter-row:last-child {
    margin-bottom: 0;
}

.analyst-filters label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.analyst-filters select,
.analyst-filters input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: none;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
}

.analyst-filters select:focus,
.analyst-filters input:focus {
    outline: none;
}

.btn-analyst-launch {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.15s;
}

.btn-analyst-launch:hover {
    background: #8E44AD;
}

.btn-analyst-launch:disabled {
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Analyst Results */
.analyst-results {
    margin-top: 20px;
}

.analyst-strategy-card {
    background: var(--bg-card);
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
}

.strategy-header {
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.strategy-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.strategy-header .confidence-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.confidence-badge.high {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success);
}

.confidence-badge.medium {
    background: rgba(210, 153, 34, 0.15);
    color: var(--warning);
}

.confidence-badge.low {
    background: rgba(218, 54, 51, 0.15);
    color: var(--danger);
}

.strategy-bets {
    padding: 0 16px 16px;
}

.strategy-bet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 10px;
    margin-bottom: 8px;
    gap: 10px;
}

.strategy-bet:last-child {
    margin-bottom: 0;
}

.strategy-bet .bet-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.strategy-bet .bet-match {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strategy-bet .bet-prediction {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strategy-bet .bet-cote {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}

.strategy-footer {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.strategy-cote-total {
    font-size: 13px;
    color: var(--text-secondary);
}

.strategy-cote-total span {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.btn-add-strategy {
    padding: 10px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-add-strategy:hover {
    background: var(--primary-dark);
}

/* ========================================
   PRONIX Page (formerly TESTIX)
======================================== */

.pronix-page,
.testix-page {
    padding: 16px;
}

.pronix-header,
.testix-header {
    text-align: center;
    margin-bottom: 20px;
}

.pronix-header h2,
.testix-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pronix-header h2 i,
.testix-header h2 i {
    color: var(--primary);
}

.pronix-header p,
.testix-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.pronix-config,
.testix-config {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.pronix-config .config-row,
.testix-config .config-row {
    margin-bottom: 20px;
}

.pronix-config .config-row:last-child,
.testix-config .config-row:last-child {
    margin-bottom: 0;
}

.pronix-config label,
.testix-config label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.pronix-config input[type="number"],
.testix-config input[type="number"] {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: none;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.pronix-config input[type="range"],
.testix-config input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--bg-input);
    outline: none;
    -webkit-appearance: none;
}

.pronix-config input[type="range"]::-webkit-slider-thumb,
.testix-config input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

.testix-config select,
.pronix-config select {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: none;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B949E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.testix-config select:focus,
.pronix-config select:focus {
    outline: none;
}

.testix-config select option,
.pronix-config select option {
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 10px;
}

.risk-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.risk-value {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px;
}

.risk-value.low {
    color: var(--success);
}

.risk-value.medium {
    color: var(--warning);
}

.risk-value.high {
    color: var(--danger);
}

.btn-pronix-launch,
.btn-testix-launch {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.15s;
}

.btn-pronix-launch:hover,
.btn-testix-launch:hover {
    background: #C0392B;
}

.btn-pronix-launch:disabled,
.btn-testix-launch:disabled {
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* PRONIX Scenarios */
.pronix-scenarios,
.testix-scenarios {
    margin-top: 20px;
}

.scenario-card {
    background: var(--bg-card);
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
}

.scenario-header {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.scenario-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.scenario-header .expected-return {
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
}

.scenario-summary {
    padding: 0 16px;
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.scenario-stat {
    flex: 1;
    background: var(--bg-input);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.scenario-stat .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.scenario-stat .stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.scenario-bets {
    padding: 0 16px 16px;
}

.scenario-footer {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
}

.btn-apply-scenario {
    padding: 10px 20px;
    background: #E74C3C;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-apply-scenario:hover {
    background: #C0392B;
}

/* ========================================
   DETAILED ANALYSIS - Super Analyste
======================================== */

.detailed-analysis {
    padding-bottom: 20px;
}

/* Analysis Match Header */
.analysis-match-header {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    margin-bottom: 16px;
}

.analysis-match-header .match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.analysis-match-header .team-home,
.analysis-match-header .team-away {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.analysis-match-header .vs-badge {
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.analysis-match-header .match-info-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.analysis-match-header .match-info-sub i {
    margin-right: 4px;
}

/* Probability Bar */
.probability-bar-section {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.probability-bar-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.probability-bar-section h4 i {
    color: var(--primary);
}

.probability-bar {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    height: 50px;
}

.prob-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.prob-segment.prob-1 {
    background: #238636;
}

.prob-segment.prob-n {
    background: #6c757d;
}

.prob-segment.prob-2 {
    background: #DA3633;
}

.prob-label {
    font-size: 12px;
    font-weight: 700;
    color: white;
    opacity: 0.9;
}

.prob-value {
    font-size: 14px;
    font-weight: 700;
    color: white;
}

/* Team Stats Section */
.teams-stats-section {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.teams-stats-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.teams-stats-section h4 i {
    color: var(--primary);
}

.team-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.team-stats-card {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
}

/* Notice quand pas de stats disponibles */
.no-stats-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: rgba(88, 166, 255, 0.08);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 8px;
}

.no-stats-notice i {
    color: var(--info);
    font-size: 16px;
}

.team-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.team-stats-header h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.form-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.form-badge.form-good {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success);
}

.form-badge.form-medium {
    background: rgba(210, 153, 34, 0.15);
    color: var(--warning);
}

.form-badge.form-bad {
    background: rgba(218, 54, 51, 0.15);
    color: var(--danger);
}

/* Form Display (V-N-D) */
.form-display {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.form-item {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
}

.form-item.form-v {
    background: #238636;
}

.form-item.form-n {
    background: #6c757d;
}

.form-item.form-d {
    background: #DA3633;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.stat-item {
    text-align: center;
    background: var(--bg-card);
    padding: 10px 6px;
    border-radius: 8px;
}

.stat-item .stat-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
}

.stat-item .stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Goals Stats */
.goals-stats {
    margin-bottom: 12px;
}

.goals-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.goals-row:not(:last-child) {
    border-bottom: none;
}

.goals-row i {
    margin-right: 6px;
    color: var(--text-muted);
    width: 16px;
}

.goals-row span:last-child {
    font-weight: 600;
    color: var(--text-primary);
}

/* Series Info */
.series-info {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 10px;
    background: var(--bg-card);
    border-radius: 8px;
    text-align: center;
}

.series-info i {
    margin-right: 6px;
    color: var(--primary);
}

/* Injuries Section */
.injuries-section {
    margin-top: 12px;
    padding-top: 12px;
}

.injuries-list,
.absences-list {
    margin-bottom: 10px;
}

.injuries-list h6,
.absences-list h6 {
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.injury-item,
.absence-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 6px 0;
    color: var(--text-secondary);
}

.injury-name,
.absence-name {
    font-weight: 500;
    color: var(--text-primary);
}

.injury-info,
.absence-reason {
    font-size: 11px;
    color: var(--text-muted);
}

.no-injuries {
    font-size: 12px;
    color: var(--success);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

/* H2H Section */
.h2h-section {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.h2h-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.h2h-section h4 i {
    color: var(--primary);
}

.h2h-summary {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.h2h-stat {
    flex: 1;
    text-align: center;
    background: var(--bg-input);
    padding: 12px 8px;
    border-radius: 10px;
}

.h2h-stat.home {
    background: rgba(35, 134, 54, 0.1);
}

.h2h-stat.draw {
    background: rgba(108, 117, 125, 0.1);
}

.h2h-stat.away {
    background: rgba(218, 54, 51, 0.1);
}

.h2h-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
}

.h2h-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.h2h-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h2h-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 8px;
}

.h2h-date {
    font-size: 12px;
    color: var(--text-muted);
}

.h2h-score {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.h2h-result {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: white;
}

.h2h-result.result-v {
    background: #238636;
}

.h2h-result.result-n {
    background: #6c757d;
}

.h2h-result.result-d {
    background: #DA3633;
}

/* Text Analysis Section */
.text-analysis-section {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.text-analysis-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-analysis-section h4 i {
    color: var(--primary);
}

.analysis-block {
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    background: var(--bg-input);
}

.analysis-block:last-child {
    margin-bottom: 0;
}

.analysis-block h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.analysis-block p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.analysis-block.positif {
    background: rgba(35, 134, 54, 0.08);
}

.analysis-block.positif h5 {
    color: var(--success);
}

.analysis-block.negatif {
    background: rgba(218, 54, 51, 0.08);
}

.analysis-block.negatif h5 {
    color: var(--danger);
}

.analysis-block.attention {
    background: rgba(210, 153, 34, 0.08);
}

.analysis-block.attention h5 {
    color: var(--warning);
}

.analysis-block.important {
    background: rgba(155, 89, 182, 0.1);
}

.analysis-block.important h5 {
    color: var(--primary);
}

/* Betting Options Section */
.betting-options-section {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
}

.betting-options-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.betting-options-section h4 i {
    color: var(--primary);
}

.betting-option-card {
    background: var(--bg-input);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    padding-left: 4px;
}

.betting-option-card:last-child {
    margin-bottom: 0;
}

.bet-option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
}

.bet-option-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bet-market-tag {
    background: var(--primary);
    color: white;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.bet-option-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.bet-option-cote {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.bet-option-details {
    padding: 0 14px 14px;
}

.bet-confidence {
    font-size: 12px;
    color: var(--success);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bet-reasoning {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.btn-add-bet {
    width: calc(100% - 28px);
    margin: 0 14px 14px;
    padding: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-add-bet:hover {
    background: var(--primary-dark);
}

/* Paris non disponibles */
.betting-option-card.unavailable {
    opacity: 0.7;
}

.cote-na {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.bet-unavailable-notice {
    margin: 0 14px 14px;
    padding: 10px;
    background: rgba(107, 114, 128, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.no-bets {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    padding: 20px 0;
}

/* ========================================
   MULTI-MATCH ANALYSIS Results
======================================== */

.multi-analysis-results {
    margin-top: 16px;
}

.multi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.multi-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.multi-header h4 i {
    color: #F1C40F;
}

.strategy-label {
    font-size: 11px;
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.multi-recommendation-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px;
    padding-left: 18px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}


.rec-match-info {
    margin-bottom: 10px;
}

.rec-teams {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.rec-competition {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.rec-bet-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.rec-market {
    background: rgba(155, 89, 182, 0.15);
    color: var(--primary);
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.rec-selection {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.rec-cote {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    margin-left: auto;
}

.rec-reasoning {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 10px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 10px;
}

.rec-reasoning i {
    margin-right: 6px;
    color: var(--text-muted);
}

.rec-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.rec-prob,
.rec-confidence {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rec-prob {
    color: var(--text-secondary);
}

.rec-confidence.high {
    color: var(--success);
}

.rec-confidence.medium {
    color: var(--warning);
}

.btn-add-rec {
    width: 100%;
    padding: 10px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-add-rec:hover {
    background: var(--primary-dark);
}

/* ========================================
   PRONIX Detailed Scenarios
======================================== */

.scenario-desc {
    padding: 0 16px 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.strategy-bet-detailed {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

.strategy-bet-detailed:last-child {
    margin-bottom: 0;
}

.sbd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sbd-header .bet-match {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.sbd-header .bet-cote {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.sbd-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}

.sbd-meta .bet-competition,
.sbd-meta .bet-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.sbd-meta i {
    font-size: 10px;
    color: var(--primary);
}

.sbd-selection {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sbd-selection .market-tag {
    background: rgba(155, 89, 182, 0.15);
    color: var(--primary);
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.sbd-selection .selection-label {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.sbd-reasoning {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 8px 10px;
    border-radius: 6px;
}

.sbd-reasoning i {
    margin-right: 5px;
    color: var(--text-muted);
}

/* ========================================
   COTIX - Module Combinaisons par Cote
======================================== */

.cotix-page {
    padding: 20px 16px;
}

.cotix-header {
    text-align: center;
    margin-bottom: 24px;
}

.cotix-header h2 {
    font-size: 24px;
    margin-bottom: 8px;
    color: #3498db;
}

.cotix-header h2 i {
    margin-right: 10px;
}

.cotix-header p {
    font-size: 14px;
    color: var(--text-muted);
}

.cotix-filters {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.cotix-filters .filter-row {
    margin-bottom: 12px;
}

.cotix-filters label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.cotix-filters select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-darker);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.btn-cotix-launch {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.btn-cotix-launch:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.cotix-results {
    min-height: 200px;
}

.cotix-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cotix-group {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

.cotix-group.easy {
}

.cotix-group.medium {
}

.cotix-group.hard {
}

.cotix-group.expert {
}

.cotix-group.legendary {
}

.cotix-group-header {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cotix-group.easy .cotix-group-header {
    background: rgba(39, 174, 96, 0.1);
}

.cotix-group.medium .cotix-group-header {
    background: rgba(243, 156, 18, 0.1);
}

.cotix-group.hard .cotix-group-header {
    background: rgba(231, 76, 60, 0.1);
}

.cotix-group.expert .cotix-group-header {
    background: rgba(155, 89, 182, 0.1);
}

.cotix-group.legendary .cotix-group-header {
    background: rgba(233, 30, 99, 0.1);
}

.cotix-group-header h3 {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cotix-group.easy .cotix-group-header h3 {
    color: #27ae60;
}

.cotix-group.medium .cotix-group-header h3 {
    color: #f39c12;
}

.cotix-group.hard .cotix-group-header h3 {
    color: #e74c3c;
}

.cotix-group.expert .cotix-group-header h3 {
    color: var(--primary);
}

.cotix-group.legendary .cotix-group-header h3 {
    color: #e91e63;
}

.cotix-count {
    background: var(--bg-darker);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.cotix-cards {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cotix-card {
    background: var(--bg-darker);
    border-radius: 12px;
    padding: 14px;
    border: none;
}

.cotix-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: none;
}

.cotix-num {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.cotix-cote {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.cotix-bets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.cotix-bet {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 8px;
}

.cotix-match-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cotix-match {
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cotix-meta {
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: var(--text-muted);
}

.cotix-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cotix-meta i {
    font-size: 9px;
    color: var(--primary);
}

.cotix-selection {
    color: var(--success);
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cotix-type {
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.cotix-type-1X2 {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.cotix-type-DC {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
}

.cotix-type-OU {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.cotix-type-BTTS {
    background: rgba(155, 89, 182, 0.15);
    color: var(--primary);
}

.cotix-odd {
    color: var(--primary);
    font-weight: 600;
}

.cotix-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cotix-prob {
    font-size: 12px;
    color: var(--text-muted);
}

.cotix-prob i {
    margin-right: 4px;
}

.btn-add-cotix {
    padding: 8px 16px;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-add-cotix:hover {
    opacity: 0.9;
}

.cotix-empty {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Styles COTIX POURQUOI et Stats Mini */
.cotix-pourquoi {
    background: rgba(0, 161, 230, 0.08);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-primary);
    border: none;
}

.cotix-pourquoi strong {
    color: var(--primary);
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

.cotix-prob-inline {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 4px;
}

.cotix-stats-mini {
    margin-top: 8px;
    padding: 8px;
    background: rgba(39, 174, 96, 0.08);
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.5;
    border: none;
}

.cotix-stats-mini .csm-row {
    margin-bottom: 4px;
    color: var(--text-primary);
}

.cotix-stats-mini .csm-row:last-child {
    margin-bottom: 0;
}

.cotix-stats-mini strong {
    color: var(--success);
    font-weight: 600;
}

/* Types de paris supplémentaires */
.cotix-type-CORNERS {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.cotix-type-CARTONS {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

/* COTIX Module Card - Style uniforme */
.premium-module-card.cotix .pm-icon {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

/* PROFILER Module Card - Style uniforme */
.premium-module-card.profiler .pm-icon {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

/* AGENT IA Module Card - Style uniforme */
.premium-module-card.agent-ia .pm-icon {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

/* Modules premium desactives (quota epuise ou abonnement insuffisant) */
.premium-module-card.disabled {
    opacity: 0.5;
    filter: grayscale(70%);
    cursor: not-allowed;
}

.premium-module-card.disabled.locked {
    pointer-events: auto;
    cursor: pointer;
}

.premium-module-card.disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    pointer-events: none;
}

.premium-module-card.disabled .pm-arrow {
    color: #e74c3c !important;
}

/* Banner d'avertissement quota */
.quota-warning-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--danger);
    border-radius: 10px;
    margin-bottom: 12px;
    color: white;
    font-weight: 500;
    font-size: 14px;
}

.quota-warning-banner i {
    font-size: 18px;
}

.quota-warning-banner a {
    color: white;
    text-decoration: underline;
    font-weight: 700;
}

/* Message quota epuise dans les modules */
.quota-exhausted-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 20px;
    text-align: center;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px dashed var(--danger);
}

.quota-exhausted-message h3 {
    color: var(--danger);
    font-size: 20px;
    margin: 0;
}

.quota-exhausted-message p {
    color: var(--text-secondary);
    font-size: 14px;
    max-width: 300px;
}

.quota-exhausted-message .btn-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--warning);
    color: white;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s;
}

.quota-exhausted-message .btn-upgrade:hover {
    transform: scale(1.05);
}

/* ========================================
   APPROVISIONNEMENT - Conversion PIA
======================================== */

.appro-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    margin: 16px;
    border: none;
}

.appro-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.appro-balance,
.appro-requests {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.appro-balance-label,
.appro-requests-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.appro-balance-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.appro-requests-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--success-light);
}

.appro-conversion {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.appro-conversion h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.appro-conversion h3 i {
    color: var(--primary);
}

.appro-rate {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.appro-rate strong {
    color: var(--primary);
}

.appro-slider-container {
    margin-bottom: 16px;
}

.appro-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--bg-card);
    outline: none;
    -webkit-appearance: none;
    margin-bottom: 12px;
}

.appro-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 3px solid var(--bg-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.appro-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 3px solid var(--bg-card);
}

.appro-slider-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.appro-slider-info #appro-nb-requetes {
    color: var(--primary);
    font-size: 24px;
}

.appro-cost {
    color: var(--text-muted);
    font-size: 14px;
}

.appro-cost #appro-cost {
    color: var(--warning);
    font-weight: 700;
}

.appro-quick-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

.appro-quick-btn {
    padding: 8px 16px;
    background: var(--bg-card);
    border: none;
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.appro-quick-btn:hover {
    background: var(--primary);
    color: white;
}

.appro-quick-btn.appro-max {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success-light);
}

.appro-btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
}

.appro-empty {
    text-align: center;
    padding: 24px;
}

.appro-empty i {
    font-size: 36px;
    color: var(--warning);
    margin-bottom: 12px;
}

.appro-empty p {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.appro-empty span {
    font-size: 13px;
    color: var(--text-muted);
}

.appro-info {
    background: rgba(94, 129, 244, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.appro-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.appro-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.appro-info li {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 0;
    padding-left: 16px;
    position: relative;
}

.appro-info li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* ========================================
   TRANSACTIONS - Historique PIA
======================================== */

.transactions-filters {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin: 16px;
    border: none;
}

.transactions-filters .filter-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.transactions-filters .filter-group {
    flex: 1;
}

.transactions-filters .filter-group label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.transactions-filters .form-control {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
}

.transactions-filters .btn {
    padding: 10px 16px;
    flex-shrink: 0;
}

.btn-filter-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-filter-icon:active {
    transform: scale(0.95);
}

#transactions-list {
    padding: 0 16px 16px;
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    border: none;
}

.transaction-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transaction-item.credit .transaction-icon {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success-light);
}

.transaction-item.debit .transaction-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.transaction-info {
    flex: 1;
    min-width: 0;
}

.transaction-motif {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.transaction-desc {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.transaction-amount {
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.transaction-amount.credit {
    color: var(--success-light);
}

.transaction-amount.debit {
    color: #ef4444;
}

/* ========================================
   Styles Boutons Modal
======================================== */
.modal-footer .btn-secondary {
    background: var(--bg-input);
    border: none;
    color: var(--text-secondary);
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-footer .btn-secondary:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.modal-footer .btn-danger {
    background: var(--danger);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-footer .btn-danger:hover {
    background: #c92a2a;
    transform: translateY(-1px);
}

.modal-footer .btn-danger:active {
    transform: translateY(0);
}

/* ========================================
   Mobile Responsive - Corrections débordement
======================================== */

/* Grille predictions mobile - éviter débordement */
@media screen and (max-width: 400px) {
    .predictions-grid {
        gap: 6px !important;
    }

    .pred-item {
        padding: 10px 6px !important;
        min-width: 0;
        overflow: hidden;
    }

    .pred-item .pred-percent {
        font-size: 16px !important;
    }

    .pred-item .pred-label {
        font-size: 10px !important;
    }

    .pred-item .pred-cote {
        font-size: 10px !important;
    }
}

/* Ecrans très petits */
@media screen and (max-width: 340px) {
    .predictions-grid {
        gap: 4px !important;
    }

    .pred-item {
        padding: 8px 4px !important;
    }

    .pred-item .pred-percent {
        font-size: 14px !important;
    }
}

/* Score prédit responsive */
.score-predit-box {
    text-align: center;
    padding: 16px;
    background: var(--bg-input);
    border-radius: 12px;
    margin-bottom: 16px;
}

.score-predit-box .score-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.score-predit-box .score-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
}

@media screen and (max-width: 400px) {
    .score-predit-box {
        padding: 12px;
    }

    .score-predit-box .score-value {
        font-size: 24px;
    }
}

/* Résultat réel responsive */
.resultat-reel-box {
    padding: 16px;
    background: var(--bg-input);
    border-radius: 12px;
    margin-bottom: 16px;
}

@media screen and (max-width: 400px) {
    .resultat-reel-box {
        padding: 12px;
    }

    .resultat-reel-box h4 {
        font-size: 14px;
    }
}

/* ========================================
   Menu Latéral (Hamburger)
======================================== */
.side-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.side-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height pour mobile */
    background: var(--bg-card);
    z-index: 201;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Safe area pour mode standalone/APK */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.side-menu.open {
    transform: translateX(0);
}

.side-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    background: var(--bg-darker);
    border-bottom: none;
}

.side-menu-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.side-menu-avatar {
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: white;
}

.side-menu-user-info {
    display: flex;
    flex-direction: column;
}

.side-menu-user-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.side-menu-user-balance {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
}

.side-menu-close {
    width: 36px;
    height: 36px;
    background: var(--bg-input);
    border: none;
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-menu-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 0;
    -webkit-overflow-scrolling: touch;
    /* Assurer que le contenu est visible */
    min-height: 0;
}

.side-menu-section {
    margin-bottom: 16px;
}

.side-menu-section-title {
    padding: 8px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.8px;
}

.side-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
}

.side-menu-item:active {
    background: rgba(255, 255, 255, 0.05);
}

.side-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--text-secondary);
}

.side-menu-item span {
    flex: 1;
}

.side-menu-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.side-menu-badge.pro {
    background: rgba(255, 153, 0, 0.2);
    color: #ff9900;
}

.side-menu-badge.new {
    background: rgba(46, 160, 67, 0.2);
    color: var(--success);
}

.side-menu-footer {
    padding: 16px;
    border-top: none;
}

.side-menu-item.logout {
    color: var(--danger);
}

.side-menu-item.logout i {
    color: var(--danger);
}

/* Mode standalone (PWA/APK) - Corrections sidebar */
@media all and (display-mode: standalone) {
    .side-menu {
        /* Force le recalcul de la hauteur en mode standalone */
        height: 100%;
        height: -webkit-fill-available;
    }

    .side-menu-content {
        /* Force l'affichage immédiat du contenu */
        visibility: visible !important;
        opacity: 1 !important;
    }

    .side-menu-item {
        /* Force l'affichage des items */
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Fallback pour iOS standalone */
@media all and (display-mode: fullscreen),
       all and (display-mode: standalone),
       all and (display-mode: minimal-ui) {
    .side-menu {
        padding-top: max(env(safe-area-inset-top, 0px), 20px);
    }

    .side-menu-footer {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
    }
}

/* ========================================
   Module Mon Gbonhi - Styles
======================================== */
.gbonhi-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.gbonhi-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gbonhi-card:active {
    background: var(--bg-card-hover);
}

.gbonhi-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.gbonhi-card-avatar {
    width: 48px;
    height: 48px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.gbonhi-card-info {
    flex: 1;
}

.gbonhi-card-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.gbonhi-card-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.gbonhi-card-stats {
    display: flex;
    gap: 16px;
}

.gbonhi-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.gbonhi-stat i {
    color: var(--text-muted);
}

.gbonhi-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.gbonhi-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.gbonhi-empty p {
    margin-bottom: 20px;
}

/* Modal confirmation personnalisée */
.confirm-modal-content {
    text-align: center;
    padding: 20px;
}

.confirm-modal-icon {
    font-size: 48px;
    color: var(--warning);
    margin-bottom: 16px;
}

.confirm-modal-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.confirm-modal-message {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.confirm-modal-buttons .btn {
    min-width: 100px;
    white-space: nowrap;
}

@media (max-width: 360px) {
    .confirm-modal-buttons {
        flex-direction: column;
        width: 100%;
    }
    .confirm-modal-buttons .btn {
        width: 100%;
    }
}

/* Match detail header responsive */
@media screen and (max-width: 400px) {
    .match-detail-header {
        padding: 16px 12px;
    }

    .team-info .team-name {
        font-size: 13px;
    }

    .vs-separator {
        font-size: 11px;
        padding: 0 8px;
    }

    .match-status-banner {
        font-size: 12px;
        padding: 6px 10px;
    }

    .pred-summary {
        gap: 8px;
        padding: 12px;
    }

    .pred-summary .label {
        font-size: 10px;
    }

    .pred-summary .value {
        font-size: 14px;
    }

    .pred-summary .value.badge-1,
    .pred-summary .value.badge-2,
    .pred-summary .value.badge-N {
        padding: 4px 8px;
        font-size: 13px;
    }

    /* Section card responsive */
    .section-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .section-card-title {
        font-size: 15px !important;
        margin-bottom: 14px !important;
    }
}

/* ===============================================
   MODULE GBONHI - STYLES COMPLÉMENTAIRES
   =============================================== */

/* Liste des Gbonhi */
.gbonhi-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px;
}

.gbonhi-icon {
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.gbonhi-info {
    flex: 1;
}

.gbonhi-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    margin: 0 0 2px 0;
}

.gbonhi-members {
    font-size: 13px;
    color: var(--text-muted);
}

.gbonhi-status {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
}

.gbonhi-status.active {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.gbonhi-status.inactive {
    background: rgba(149, 165, 166, 0.15);
    color: #95a5a6;
}

.gbonhi-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.gbonhi-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

.gbonhi-footer i {
    margin-right: 4px;
}

.gbonhi-description {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 0 16px;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Onglets */
.tabs-container {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabs-container::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Sur très petits écrans, boutons défilables */
@media (max-width: 360px) {
    .tabs-container {
        flex-wrap: nowrap;
    }
    .tab-btn {
        flex: 0 0 auto;
        padding: 10px 14px;
    }
}

.tab-btn.active {
    background: var(--primary);
    color: white;
}

.tab-btn:not(.active):active {
    background: var(--bg-card-hover);
}

/* Contenu des onglets */
.tab-content {
    padding: 0 16px;
}

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

.section-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Liste des membres */
.membres-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.membre-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 12px;
}

.membre-avatar {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.membre-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.membre-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}

.membre-code {
    font-size: 12px;
    color: var(--text-muted);
}

.badge-owner {
    font-size: 11px;
    padding: 3px 8px;
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
    border-radius: 12px;
    font-weight: 500;
}

/* Matchs Gbonhi */
.gbonhi-match-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
}

.gbonhi-match-card .match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.gbonhi-match-card .team {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}

.gbonhi-match-card .team.home {
    text-align: right;
    flex: 1;
}

.gbonhi-match-card .team.away {
    text-align: left;
    flex: 1;
}

.gbonhi-match-card .vs {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.gbonhi-match-card .match-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.gbonhi-match-card .match-meta i {
    margin-right: 4px;
}

.gbonhi-match-card .match-status {
    text-align: center;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    width: auto;
    margin: 0 auto;
}

.gbonhi-match-card .match-status.a_venir {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.gbonhi-match-card .match-status.en_cours {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
}

.gbonhi-match-card .match-status.termine {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

/* Logos equipes Gbonhi */
.gbonhi-team-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    flex-shrink: 0;
}

.gbonhi-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gbonhi-team-initials {
    font-size: 8px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gbonhi Classement */
.gbonhi-classement-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.classement-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 10px;
    border: none;
}

.classement-row.top-3 {
    background: rgba(0, 161, 230, 0.05);
}

.classement-rank {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-secondary);
}

.classement-rank i.fa-medal.gold {
    color: var(--accent);
    font-size: 20px;
}

.classement-rank i.fa-medal.silver {
    color: #C0C0C0;
    font-size: 20px;
}

.classement-rank i.fa-medal.bronze {
    color: #CD7F32;
    font-size: 20px;
}

.classement-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.classement-info {
    flex: 1;
}

.classement-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.classement-stats {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.classement-points {
    text-align: center;
}

.classement-points .points-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.classement-points .points-label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Légende des points */
.gbonhi-points-legend {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 161, 230, 0.1);
    border-radius: 10px;
}

.gbonhi-points-legend .legend-title {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gbonhi-points-legend .legend-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gbonhi-points-legend .legend-item {
    font-size: 13px;
    color: var(--text-secondary);
}

.gbonhi-points-legend .legend-item strong {
    color: var(--text-primary);
}

/* Match en cours */
.gbonhi-match-card.en-cours {
    background: rgba(231, 76, 60, 0.05);
}

.gbonhi-match-card .score-live {
    font-size: 18px;
    font-weight: 700;
    color: #e74c3c;
    animation: pulse-live 1.5s infinite;
}

/* Match terminé */
.gbonhi-match-card.termine {
    opacity: 0.85;
}

.gbonhi-match-card .score-final {
    font-size: 18px;
    font-weight: 700;
    color: var(--success);
}

/* Mon pronostic badge */
.mon-prono-badge {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
    border-radius: 8px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Résultat du pronostic */
.mon-prono-result {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.result-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.result-badge.exact {
    background: var(--accent);
    color: #000;
}

.result-badge.gagne {
    background: rgba(39, 174, 96, 0.2);
    color: #27ae60;
}

.result-badge.perdu {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

/* Modal de confirmation */
.confirm-modal {
    max-width: 340px;
    text-align: center;
    padding: 24px;
}

.confirm-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
}

.confirm-icon.danger {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.confirm-icon.warning {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
}

.confirm-icon.success {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.confirm-modal h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

.confirm-modal p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.confirm-buttons {
    display: flex;
    gap: 12px;
}

.confirm-buttons button {
    flex: 1;
}

/* Bouton warning */
.btn-warning {
    background: #f39c12;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-warning:active {
    opacity: 0.9;
}

/* Modal large */
.modal-lg {
    max-width: 90%;
    width: 500px;
}

/* Liste checkbox matchs */
.matchs-checkbox-list {
    max-height: 350px;
    overflow-y: auto;
}

.match-checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.match-checkbox-item:active {
    background: var(--bg-card-hover);
}

.match-checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.match-checkbox-content {
    flex: 1;
}

.match-teams-inline {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.match-teams-inline .vs {
    color: var(--text-muted);
    margin: 0 6px;
    font-weight: 400;
}

.match-date-inline {
    font-size: 12px;
    color: var(--text-muted);
}

/* Empty state small */
.empty-state.small {
    padding: 30px 20px;
}

.empty-state.small i {
    font-size: 32px;
}

.empty-state.small p {
    font-size: 14px;
    margin-bottom: 8px;
}

/* Header actions */
.header-actions {
    display: flex;
    gap: 8px;
}

/* Text colors */
.text-danger {
    color: #e74c3c !important;
}

.text-warning {
    color: #f39c12 !important;
}

/* ===============================================
   MODULE YING YANG
   =============================================== */

/* Badge PIA PRO */
.pia-pro-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(155, 89, 182, 0.15);
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.pia-pro-badge i {
    color: var(--primary);
}

/* Info banner Ying Yang */
.info-banner.yy-banner {
    background: rgba(155, 89, 182, 0.1);
    margin: 16px;
    padding: 14px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-banner.yy-banner > i {
    font-size: 24px;
    color: var(--primary);
    margin-top: 2px;
}

.info-banner .info-content strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

.info-banner .info-content p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Filter tabs */
.filter-tabs {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.filter-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.filter-tab.active {
    background: var(--primary);
    color: white;
}

.filter-tab:not(.active):active {
    background: var(--bg-card-hover);
}

/* Liste matchs Ying Yang */
.yy-matchs-list {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yy-match-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.yy-match-card:active {
    background: var(--bg-card-hover);
}

.yy-match-card.termine {
    opacity: 0.8;
}

.yy-match-card.disabled {
    opacity: 0.7;
}

.yy-match-card.en-cours {
    border: none;
}

/* Status badges Ying Yang */
.yy-status-badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.yy-status-badge.en-cours {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    animation: pulse-live 1.5s infinite;
}

.yy-status-badge.ferme {
    background: rgba(149, 165, 166, 0.2);
    color: #95a5a6;
}

.yy-status-badge.termine {
    background: rgba(39, 174, 96, 0.2);
    color: #27ae60;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Score live */
.yy-score.live {
    color: #e74c3c;
    font-weight: 700;
    animation: pulse-live 1.5s infinite;
}

/* Loser badge */
.yy-loser-badge {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.yy-match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.yy-competition {
    font-size: 12px;
    color: var(--text-muted);
}

.yy-date {
    font-size: 12px;
    color: var(--text-muted);
}

.yy-teams {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.yy-team {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.yy-team .team-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
}

.yy-team.selected {
    background: rgba(52, 152, 219, 0.15);
}

.yy-team.selected .team-name {
    color: #3498db;
}

.yy-team.winner {
    background: rgba(39, 174, 96, 0.15);
}

.yy-team.winner .team-name {
    color: #27ae60;
}

.yy-team i {
    color: #3498db;
}

.yy-vs {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.yy-score {
    font-weight: 600;
    color: var(--text-primary);
}

.yy-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.yy-stats {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.yy-stats i {
    margin-right: 4px;
}

.yy-winner-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* Détail Ying Yang */
.yy-detail-card {
    background: var(--bg-card);
    border-radius: 16px;
    margin: 16px;
    padding: 20px;
}

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

.yy-match-date {
    font-size: 13px;
    color: var(--text-muted);
}

.yy-match-date i {
    margin-right: 6px;
}

.yy-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.yy-status.ouvert {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.yy-status.ferme,
.yy-status.en_cours {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
}

.yy-status.termine {
    background: rgba(149, 165, 166, 0.15);
    color: #95a5a6;
}

.yy-teams-detail {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.yy-team-detail {
    flex: 1;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.yy-team-detail .team-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.yy-team-detail .team-stats {
    font-size: 12px;
    color: var(--text-muted);
}

.yy-team-detail.selected {
    background: rgba(52, 152, 219, 0.15);
}

.yy-team-detail.my-choice {
    background: rgba(52, 152, 219, 0.2);
}

.yy-team-detail.winner {
    background: rgba(39, 174, 96, 0.15);
}

.yy-team-detail .my-choice-badge {
    margin-top: 8px;
    font-size: 11px;
    color: #3498db;
    font-weight: 500;
}

.yy-separator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.yy-vs-circle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.yy-final-score {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.yy-bet-section {
    border-top: none;
    padding-top: 16px;
    text-align: center;
}

.yy-cost-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--text-secondary);
}

.yy-cost-info i {
    color: var(--primary);
}

.yy-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
}

.yy-participation-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 10px;
    font-size: 13px;
    color: #3498db;
}

.yy-result-section {
    margin-top: 16px;
}

.yy-win-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(241, 196, 15, 0.15);
    border-radius: 12px;
}

.yy-win-banner i {
    font-size: 28px;
    color: #f1c40f;
}

.yy-win-banner strong {
    color: #f1c40f;
    display: block;
    margin-bottom: 2px;
}

.yy-win-banner p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.yy-lose-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 10px;
    font-size: 13px;
    color: #e74c3c;
}

.yy-info-section {
    margin: 16px;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
}

.yy-info-section h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 14px 0;
}

.yy-info-section h3 i {
    margin-right: 8px;
    color: var(--text-muted);
}

.yy-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.yy-info-item {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 12px;
}

.yy-info-item.full {
    grid-column: 1 / -1;
}

.yy-info-item .label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.yy-info-item .value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===============================================
   MODULE CHALLENGES
   =============================================== */

/* Banner challenge */
.info-banner.challenge-banner {
    background: rgba(241, 196, 15, 0.1);
    margin: 16px;
    padding: 14px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-banner.challenge-banner > i {
    font-size: 24px;
    color: #f1c40f;
    margin-top: 2px;
}

/* Liste challenges */
.challenges-list {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.challenge-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.challenge-card:active {
    background: var(--bg-card-hover);
}

.challenge-card.termine {
    opacity: 0.8;
}

.challenge-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.challenge-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.challenge-icon.standard {
    background: #3498db;
}

.challenge-icon.premium {
    background: var(--accent);
}

.challenge-icon.vip {
    background: #ff9900;
}

.challenge-icon.weekly {
    background: #27ae60;
}

.challenge-icon.daily {
    background: #e74c3c;
}

.challenge-info {
    flex: 1;
}

.challenge-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin: 0 0 2px 0;
}

.challenge-dates {
    font-size: 12px;
    color: var(--text-muted);
}

.badge-inscrit {
    width: 28px;
    height: 28px;
    background: rgba(39, 174, 96, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #27ae60;
    font-size: 12px;
}

.challenge-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.challenge-stats {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

.challenge-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.challenge-stats .stat-item.highlight {
    color: #f1c40f;
    font-weight: 600;
}

.challenge-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.challenge-mise {
    font-size: 12px;
    color: var(--text-secondary);
}

.challenge-mise i {
    margin-right: 4px;
    color: var(--primary);
}

.challenge-mise.free {
    color: #27ae60;
}

.challenge-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.challenge-status.ouvert {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.challenge-status.en_cours {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
}

.challenge-status.termine {
    background: rgba(149, 165, 166, 0.15);
    color: #95a5a6;
}

/* Detail Challenge */
.challenge-detail-card {
    background: var(--bg-card);
    border-radius: 16px;
    margin: 16px;
    padding: 20px;
}

.challenge-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.challenge-icon-lg {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.challenge-icon-lg.standard {
    background: #3498db;
}

.challenge-icon-lg.premium {
    background: var(--accent);
}

.challenge-detail-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.challenge-period {
    font-size: 13px;
    color: var(--text-muted);
}

.challenge-period i {
    margin-right: 6px;
}

.challenge-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

.challenge-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.challenge-meta-grid .meta-item {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.challenge-meta-grid .meta-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.challenge-meta-grid .meta-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.challenge-join-section {
    border-top: none;
    padding-top: 16px;
}

.challenge-inscrit-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(39, 174, 96, 0.1);
    border-radius: 10px;
    font-size: 14px;
    color: #27ae60;
}

.challenge-inscrit-badge .mon-rang {
    margin-left: auto;
    font-weight: 600;
}

/* Match items dans challenge */
.challenge-match-item {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px;
    margin: 0 16px 10px;
}

.challenge-match-item.termine {
    opacity: 0.8;
}

.match-header-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.match-teams-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.match-teams-row .team {
    flex: 1;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
    text-align: center;
}

.match-teams-row .team.selected {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.match-teams-row .team.winner {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.match-teams-row .match-score {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    min-width: 50px;
    text-align: center;
}

.mon-pronostic {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.mon-pronostic .prono-label {
    color: var(--text-muted);
}

.mon-pronostic .prono-value {
    color: var(--text-primary);
    font-weight: 500;
}

.mon-pronostic .prono-score {
    color: var(--text-muted);
}

.mon-pronostic .prono-points {
    margin-left: auto;
    font-weight: 600;
    color: var(--text-muted);
}

.mon-pronostic .prono-points.success {
    color: #27ae60;
}

/* Classement */
.classement-list {
    padding: 0 16px;
}

.classement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 8px;
}

.classement-item.me {
    background: rgba(52, 152, 219, 0.1);
}

.classement-rank {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.classement-rank.top-1 {
    background: rgba(241, 196, 15, 0.2);
}

.classement-rank.top-2 {
    background: rgba(149, 165, 166, 0.2);
}

.classement-rank.top-3 {
    background: rgba(205, 127, 50, 0.2);
}

.classement-user {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.classement-user .user-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}

.classement-user .user-code {
    font-size: 12px;
    color: var(--text-muted);
}

.classement-points {
    text-align: right;
}

.classement-points .points-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.classement-points .points-label {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
}

/* ====== PARTICIPANTS CHALLENGE ====== */

/* Barre de recherche */
.search-bar-container {
    padding: 12px 16px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper i {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 14px;
}

.search-input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    background: var(--bg-card);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}

.search-input:focus {
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* Grille des participants */
.participants-grid {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Carte participant */
.participant-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.participant-card:active {
    transform: scale(0.98);
}

.participant-card.is-me {
    border: 2px solid var(--primary);
}

.participant-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.participant-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.participant-code {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me-badge {
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.participant-stats {
    display: flex;
    align-items: center;
    gap: 10px;
}

.participant-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.participant-stats .stat-item.points {
    color: var(--primary);
    font-weight: 600;
}

.participant-stats .stat-item i {
    font-size: 11px;
}

.toggle-icon {
    color: var(--text-muted);
    font-size: 12px;
    transition: transform 0.2s;
}

/* Liste des pronostics d'un participant */
.participant-pronostics {
    border-top: none;
    background: var(--bg-secondary);
}

.pronostics-list {
    padding: 8px;
}

.prono-match-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    margin-bottom: 6px;
    gap: 10px;
}

.prono-match-item:last-child {
    margin-bottom: 0;
}

.prono-match-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prono-match-info .teams {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Logos equipes challenges */
.challenge-team-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    flex-shrink: 0;
}

.challenge-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.challenge-team-initials {
    font-size: 7px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prono-match-info .score-reel {
    font-size: 11px;
    color: var(--text-muted);
}

.prono-result {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.prono-score {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 6px;
}

.prono-waiting {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.prono-hidden {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.prono-hidden i {
    font-size: 10px;
}

.status-text {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.status-text.won {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.status-text.lost {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.pia-gain {
    font-size: 11px;
    font-weight: 600;
    color: #27ae60;
}

/* Couleurs de fond selon resultat */
.prono-match-item.won {
    background: rgba(39, 174, 96, 0.08);
}

.prono-match-item.lost {
    background: rgba(231, 76, 60, 0.05);
}

.prono-match-item.waiting {
    opacity: 0.7;
}

/* Modal pronostic challenge */
.match-title {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.prono-choices {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.prono-choice {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prono-choice.selected {
    background: rgba(52, 152, 219, 0.15);
}

.prono-choice .choice-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.prono-choice .choice-team {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

.score-exact-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: none;
}

.score-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.score-input {
    width: 70px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.score-separator {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Challenge Score Exact Modal */
.challenge-score-exact {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.score-info-box {
    background: rgba(255, 215, 0, 0.1);
    border: none;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.score-rewards {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 12px;
}

.reward-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--bg-card);
}

.reward-item.champion {
    background: rgba(255, 215, 0, 0.2);
}

.reward-item.poto {
    background: rgba(35, 134, 54, 0.2);
}

.reward-points {
    font-weight: 700;
    font-size: 16px;
}

.reward-item.champion .reward-points { color: #f0c000; }
.reward-item.poto .reward-points { color: var(--success); }

.reward-label {
    font-size: 11px;
    color: var(--text-muted);
}

.pia-info {
    text-align: center;
    font-size: 13px;
    color: #f0c000;
}

.pia-info i {
    margin-right: 6px;
}

.score-inputs-challenge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

.score-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.score-team .team-name {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 80px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score-team .score-input {
    width: 60px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    border-radius: 10px;
}

/* Challenge match pronostic display */
.score-exact-display {
    background: rgba(255, 215, 0, 0.1);
    border: none;
    border-radius: 8px;
}

.prono-score-exact {
    font-weight: 700;
    font-size: 16px;
    color: #f0c000;
    margin: 0 8px;
}

.prono-result {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.prono-result.success {
    background: rgba(255, 215, 0, 0.2);
    color: #f0c000;
}

.prono-result.fail {
    background: rgba(110, 118, 129, 0.2);
    color: var(--text-muted);
}

.prono-status.pending {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.prono-status.pending i {
    font-size: 10px;
}

.prono-status-bar {
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    text-align: center;
}

.prono-waiting-text {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.prono-waiting-text i {
    color: #f39c12;
}

/* ===============================================
   MODULE GBONHI - CONTACTS
   =============================================== */

.contacts-search-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin: 0 16px 16px;
}

.search-input-wrapper {
    display: flex;
    gap: 8px;
}

.search-input-wrapper input {
    flex: 1;
}

.search-results {
    margin-top: 12px;
}

.search-results-header {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 8px;
}

.search-no-results {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

.search-no-results i {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.contacts-section {
    padding: 0 16px 16px;
}

.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 10px;
}

.contact-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    overflow: hidden;
}

.contact-avatar.small {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.contact-code {
    font-size: 12px;
    color: var(--primary);
    font-family: monospace;
}

.contact-actions {
    display: flex;
    gap: 6px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===============================================
   MODULES - STYLES COMMUNS
   =============================================== */

/* Info banner générique pour tous les modules */
.info-banner {
    background: rgba(0, 161, 230, 0.1);
    margin: 16px;
    padding: 14px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-banner > i {
    font-size: 24px;
    color: var(--primary);
    margin-top: 2px;
}

/* Info banner Gbonhi */
.info-banner.gbonhi-banner {
    background: rgba(52, 152, 219, 0.1);
}

.info-banner.gbonhi-banner > i {
    color: #3498db;
}

/* Section titre avec icône */
.section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i {
    color: var(--primary);
}

/* Card avec effet glow pour les modules spéciaux */
.module-card-glow {
    position: relative;
    overflow: hidden;
}

.module-card-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
}

/* Empty state amélioré pour les modules */
.module-empty-state {
    text-align: center;
    padding: 40px 20px;
}

.module-empty-state .empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: var(--bg-input);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.module-empty-state .empty-icon i {
    font-size: 32px;
    color: var(--text-muted);
}

.module-empty-state h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.module-empty-state p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
}

/* ===============================================
   BOUTONS MODULES
   =============================================== */

/* Bouton icon stylisé */
.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: var(--bg-input);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:active {
    transform: scale(0.95);
    background: var(--bg-card-hover);
}

.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
}

/* Badges pour les modules */
.module-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.module-badge.challenge {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
}

.module-badge.gbonhi {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.module-badge.ying-yang {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

/* Indicateur de participation */
.participation-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(39, 174, 96, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: #27ae60;
}

.participation-indicator i {
    font-size: 14px;
}

/* Cards améliorées pour les modules */
.module-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.module-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary);
}

.module-card.challenge::before {
    background: var(--accent);
}

.module-card.gbonhi::before {
    background: #3498db;
}

.module-card.ying-yang::before {
    background: var(--primary);
}

.module-card:active {
    transform: scale(0.98);
    background: var(--bg-card-hover);
}

.module-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.module-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.module-card-icon.challenge {
    background: var(--accent);
}

.module-card-icon.gbonhi {
    background: #3498db;
}

.module-card-icon.ying-yang {
    background: var(--primary);
}

.module-card-info {
    flex: 1;
}

.module-card-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin: 0 0 2px 0;
}

.module-card-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.module-card-stats {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.module-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.module-stat i {
    color: var(--primary);
    width: 16px;
}

/* Liste de filtres amelioree */
.filter-tabs {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.filter-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: none;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab:active {
    transform: scale(0.95);
}

.filter-tab.active {
    background: var(--primary);
    color: white;
}

.filter-tab i {
    font-size: 12px;
}

/* Boutons action en bas de card */
.module-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: none;
}

.module-card-actions .btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

/* ========================================
   CONTACTS PAGE
======================================== */

.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: none;
    border-radius: 12px;
}

.contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: white;
    text-transform: uppercase;
    flex-shrink: 0;
}

.contact-info {
    flex: 1;
    min-width: 0;
}

.contact-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.contact-phone {
    font-size: 13px;
    color: var(--text-secondary);
}

.contact-code {
    font-size: 12px;
    color: var(--primary);
    margin-top: 4px;
}

.contact-code i {
    margin-right: 4px;
}

.btn-icon-danger {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(218, 54, 51, 0.1);
    border: none;
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-danger:active {
    background: rgba(218, 54, 51, 0.2);
    transform: scale(0.95);
}

/* Search Results in Modal */
.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-top: 12px;
}

.result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
}

.result-info {
    flex: 1;
}

.result-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}

.result-code {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ========================================
   SPONSOR BANNER & BADGE
======================================== */

.sponsor-banner {
    background: rgba(245, 179, 66, 0.12) !important;
}

.sponsor-banner i {
    color: #ffc107 !important;
}

.side-menu-badge.sponsor {
    background: var(--accent);
    color: #000;
    font-weight: 700;
}

/* ========================================
   COUPON PAGE
======================================== */

.coupon-container {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coupon-container .empty-state {
    text-align: center;
    padding: 40px 20px;
}

.coupon-container .empty-state i {
    font-size: 64px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* ========================================
   YING YANG DETAIL - ENHANCED
======================================== */

.team-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.team-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.yy-balance {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 8px;
}

.yy-score-exact-section {
    margin: 16px 0;
    padding: 16px;
    background: var(--bg-input);
    border-radius: 10px;
}

.yy-score-exact-section .form-label {
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.yy-score-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.score-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.score-team-name {
    font-size: 11px;
    color: var(--text-muted);
    max-width: 80px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-input {
    width: 60px !important;
    height: 48px !important;
    text-align: center;
    font-size: 20px !important;
    font-weight: 600;
    padding: 0 !important;
}

.score-separator {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-secondary);
}

.yy-payment-methods {
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

.payment-method {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-method input {
    display: none;
}

.payment-method.selected {
    background: rgba(0, 161, 230, 0.1);
}

.payment-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.payment-content i {
    font-size: 18px;
    color: #ffc107;
}

.payment-content.wave svg {
    display: block;
}

.confirm-details {
    text-align: left;
    background: var(--bg-input);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 16px 0;
}

.confirm-details p {
    margin: 6px 0;
    font-size: 14px;
}

.confirm-warning {
    font-size: 12px;
    color: var(--warning);
    margin-bottom: 16px;
}

.confirm-icon.wave-icon {
    background: transparent !important;
}

.btn-wave {
    background: var(--primary) !important;
}

.btn-wave:active {
    background: var(--primary) !important;
}

/* Association gagnante Ying Yang */
.yy-association-win-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(232, 59, 104, 0.15);
    border: 1px solid rgba(232, 59, 104, 0.4);
    border-radius: 12px;
    margin-bottom: 12px;
}

.yy-association-win-banner i {
    font-size: 28px;
    color: #e83b68;
}

.yy-association-win-banner strong {
    display: block;
    color: #e83b68;
    font-size: 14px;
}

.yy-association-win-banner p {
    font-size: 13px;
    color: var(--text-primary);
    margin-top: 4px;
}

/* Representants pour remise (Ying Yang) */
.yy-representants-section {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-input);
    border-radius: 10px;
}

.yy-representants-section h4 {
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.yy-representant-note {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.yy-representants-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yy-representant-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border-radius: 8px;
}

.yy-representant-item.main {
    background: rgba(245, 179, 66, 0.15);
    border: none;
}

.representant-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-secondary);
}

.yy-representant-item.main .representant-badge {
    background: var(--accent);
    color: #000;
}

.representant-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

/* Challenge - Gains PIA */
.prono-pia {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

.prono-pia.success {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success-light);
}

.prono-pia.fail {
    background: rgba(218, 54, 51, 0.2);
    color: var(--danger);
}

.pia-total {
    font-size: 12px;
    color: var(--success-light);
    font-weight: 600;
}

.classement-pia {
    text-align: right;
    min-width: 70px;
}

.classement-pia .pia-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--success-light);
}

.classement-pia .pia-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 3px;
}

/* Legacy - Keep for compatibility */
.yy-winners-section {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-input);
    border-radius: 10px;
}

.yy-winners-section h4 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text-secondary);
}

.yy-winners-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yy-winner-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 8px;
}

.yy-winner-item.rang-1 {
    background: rgba(245, 179, 66, 0.15);
    border: none;
}

.yy-winner-item.rang-2 {
    background: rgba(192, 192, 192, 0.15);
    border: none;
}

.yy-winner-item.rang-3 {
    background: rgba(205, 127, 50, 0.15);
    border: none;
}

.winner-rank {
    font-weight: 700;
    min-width: 40px;
}

.winner-name {
    flex: 1;
    font-weight: 500;
}

.winner-gain {
    font-weight: 600;
    color: var(--success);
}

/* ==========================================
   GBONHI INVITATIONS PAGE
========================================== */
.invitations-container {
    padding: 16px;
}

.invitations-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.invitations-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.invitations-empty p {
    font-size: 16px;
    margin-bottom: 8px;
}

.invitations-empty small {
    font-size: 13px;
    opacity: 0.7;
}

.invitations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invitation-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    border: none;
}

.invitation-card.accepted {
    background: rgba(40, 167, 69, 0.08);
}

.invitation-card.rejected {
    background: rgba(220, 53, 69, 0.08);
    opacity: 0.7;
}

.invitation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.invitation-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.invitation-card.accepted .invitation-icon {
    background: var(--success);
}

.invitation-card.rejected .invitation-icon {
    background: var(--danger);
}

.invitation-info {
    flex: 1;
}

.invitation-info h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.invitation-info p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.invitation-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.invitation-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 6px 10px;
    border-radius: 6px;
}

.invitation-meta-item i {
    font-size: 11px;
    opacity: 0.7;
}

.invitation-message {
    background: var(--bg-input);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

.invitation-actions {
    display: flex;
    gap: 10px;
}

.invitation-actions .btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-accept {
    background: var(--success);
    color: white;
}

.btn-accept:active {
    transform: scale(0.98);
    background: var(--success);
}

.btn-reject {
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border-color) !important;
}

.btn-reject:active {
    background: var(--bg-card);
}

.invitation-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.invitation-status.accepted {
    background: rgba(40, 167, 69, 0.15);
    color: var(--success);
}

.invitation-status.rejected {
    background: rgba(220, 53, 69, 0.15);
    color: var(--danger);
}

.invitation-view-btn {
    margin-top: 10px;
}

.invitation-view-btn .btn {
    width: 100%;
    padding: 10px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* ==========================================
   OPPORTUNITES DANS DETAIL MATCH
========================================== */
.match-opportunities {
    margin: 16px 0;
    padding: 0 16px;
}

.opportunities-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.opportunities-title i {
    color: var(--warning);
}

.opportunities-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opportunity-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.opportunity-card:active {
    transform: scale(0.98);
}

.opportunity-card.ying-yang {
    background: rgba(0, 161, 230, 0.08);
}

.opportunity-card.challenge {
    background: rgba(255, 152, 0, 0.08);
}

.opportunity-card.gbonhi {
    background: rgba(0, 188, 212, 0.08);
}

.opportunity-card.gbonhi.invited {
    background: rgba(233, 30, 99, 0.08);
}

.opportunity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
}

.opportunity-card.ying-yang .opportunity-icon {
    background: var(--primary);
}

.opportunity-card.challenge .opportunity-icon {
    background: var(--accent);
}

.opportunity-card.gbonhi .opportunity-icon {
    background: var(--primary);
}

.opportunity-card.gbonhi.invited .opportunity-icon {
    background: #e91e63;
}

.opportunity-info {
    flex: 1;
}

.opportunity-info h5 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.opportunity-info p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.opportunity-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.opportunity-badge.participating {
    background: rgba(40, 167, 69, 0.2);
    color: var(--success);
}

.opportunity-badge.invited {
    background: rgba(233, 30, 99, 0.2);
    color: #e91e63;
}

.opportunity-badge.open {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning);
}

.opportunity-arrow {
    color: var(--text-muted);
    font-size: 14px;
}

/* ==========================================
   BADGE NOTIFICATION SIDEBAR
========================================== */
.side-menu-badge.notif {
    background: var(--danger);
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ==========================================
   NOTIFICATIONS PAGE
========================================== */
.notification-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    border: none;
    transition: all 0.2s ease;
}

.notification-card.unread {
    background: rgba(0, 161, 230, 0.08);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
    flex-shrink: 0;
}

.notification-card.unread .notification-icon {
    background: var(--primary);
    color: white;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.notification-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
}

.notification-time {
    font-size: 12px;
    color: var(--text-muted);
}

.notification-dot {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

/* ========================================
   Contacts Search Input - Style moderne
======================================== */
.contacts-search-container {
    margin-bottom: 16px;
}

.contacts-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.contacts-search-icon {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.contacts-search-input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 44px;
    background: var(--bg-input);
    border: none;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    transition: all var(--transition);
}

.contacts-search-input::placeholder {
    color: var(--text-muted);
}

.contacts-search-input:focus {
    outline: none;
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(0, 161, 230, 0.15);
}

.contacts-search-input:focus + .contacts-search-icon,
.contacts-search-input-wrapper:focus-within .contacts-search-icon {
    color: var(--primary);
}

/* ========================================
   Ying Yang Detail - Couleurs bleues du projet
======================================== */
.yy-cost-info-box {
    background: rgba(0, 161, 230, 0.1);
    border: none;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.yy-cost-main {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    margin-bottom: 8px;
}

.yy-cost-main i {
    color: var(--primary);
}

.yy-cost-equiv {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    padding-left: 24px;
    margin-bottom: 8px;
}

.yy-cost-equiv i {
    color: var(--info);
    font-size: 12px;
}

.yy-balance-info {
    padding-top: 10px;
    border-top: none;
    font-size: 14px;
    color: var(--text-secondary);
}

.btn-yy-participate {
    background: var(--primary);
    border: none;
    padding: 14px 20px;
    font-size: 16px;
}

.btn-yy-participate:hover {
    background: var(--primary-dark);
}

.btn-yy-participate:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.yy-note-simulation {
    margin-top: 12px;
    padding: 10px;
    background: rgba(88, 166, 255, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: var(--info);
    text-align: center;
}

.yy-note-simulation i {
    margin-right: 6px;
}

/* Modal confirmation YY - Icon bleu du projet */
.confirm-icon.yy-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    animation: yinyang-spin 10s linear infinite;
}

.confirm-icon.yy-icon i {
    font-size: 28px;
    color: white;
}

.yy-cost-summary {
    background: var(--bg-input);
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
}

.yy-equiv {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.yy-simulation-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(217, 153, 34, 0.15);
    border: 1px solid rgba(217, 153, 34, 0.3);
    border-radius: 8px;
    margin: 16px 0;
    font-size: 13px;
    color: var(--warning);
}

.yy-simulation-notice i {
    font-size: 16px;
}

.btn-yy-confirm {
    background: var(--primary);
}

.btn-yy-confirm:hover {
    background: var(--primary-dark);
}

/* ========================================
   Challenge Detail - Ameliorations
======================================== */
.challenge-places-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(35, 134, 54, 0.15);
    border: none;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--success-light);
}

.challenge-places-info i {
    color: var(--success);
}

.challenge-quota-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: rgba(218, 54, 51, 0.15);
    border: 1px solid rgba(218, 54, 51, 0.3);
    border-radius: 10px;
    color: var(--danger);
    font-size: 14px;
    margin-top: 16px;
}

.challenge-quota-full i {
    font-size: 18px;
}

.btn-challenge-join {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--success);
    padding: 14px 20px;
    font-size: 16px;
}

.btn-challenge-join:hover {
    background: var(--success);
}

.btn-challenge-join .btn-cost {
    opacity: 0.9;
    font-size: 14px;
}

.challenge-inscrit-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(35, 134, 54, 0.15);
    border: none;
    border-radius: 10px;
    margin-top: 16px;
}

.challenge-inscrit-badge > i {
    font-size: 24px;
    color: var(--success);
}

.challenge-inscrit-badge .inscrit-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.challenge-inscrit-badge .inscrit-info span:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

.challenge-inscrit-badge .points-total {
    font-size: 13px;
    color: var(--text-secondary);
}

.challenge-inscrit-badge .mon-rang {
    background: var(--success);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.challenge-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.challenge-meta-grid .meta-item {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.challenge-meta-grid .meta-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.challenge-meta-grid .meta-value {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ========================================
   COUPONS PAGE
======================================== */

.coupon-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.coupon-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: none;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.coupon-tab:hover {
    background: var(--bg-card-hover);
}

.coupon-tab.active {
    background: var(--primary);
    color: white;
}

.coupon-tab-content {
    animation: fadeIn 0.2s ease;
}

.coupons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coupon-card {
    display: flex;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.coupon-card:hover {
    transform: translateY(-2px);
}

.coupon-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    flex-shrink: 0;
}

.coupon-image-placeholder {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--text-muted);
}

.coupon-content {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.coupon-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.coupon-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.coupon-bookmaker {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--primary);
    color: white;
    border-radius: 20px;
    flex-shrink: 0;
}

.coupon-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.coupon-cote {
    font-size: 13px;
    color: var(--success);
    margin-bottom: 8px;
}

.coupon-cote strong {
    color: var(--success-light);
}

.coupon-action {
    margin-top: auto;
}

.coupon-link {
    font-size: 13px;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ========================================
   FORUM EPHEMERE
======================================== */

.info-banner.warning {
    background: rgba(210, 153, 34, 0.1);
}

.info-banner.warning i {
    color: var(--warning);
}

.forum-messages {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    min-height: 300px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.forum-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.forum-message.mine {
    flex-direction: row-reverse;
}

.forum-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.forum-bubble {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 10px 14px;
    max-width: 70%;
    min-width: 0;
    overflow: hidden;
}

.forum-message.mine .forum-bubble {
    background: var(--primary);
    color: white;
}

.forum-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.forum-text {
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-width: 100%;
    overflow: hidden;
}

.forum-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.forum-time {
    font-size: 11px;
    color: var(--text-muted);
}

.forum-message.mine .forum-time {
    color: rgba(255, 255, 255, 0.7);
}

.forum-delete,
.forum-report {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    opacity: 0.6;
    transition: var(--transition);
}

.forum-delete:hover,
.forum-report:hover {
    opacity: 1;
}

.forum-message.mine .forum-delete {
    color: rgba(255, 255, 255, 0.7);
}

.forum-input-container {
    display: flex;
    gap: 10px;
    background: var(--bg-card);
    padding: 12px;
    border-radius: 12px;
}

.forum-input {
    flex: 1;
    background: var(--bg-input);
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: 14px;
}

.forum-input:focus {
    outline: none;
}

.forum-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.forum-send-btn:hover {
    background: var(--primary-dark);
}

/* ========================================
   CONTACTS / FRIENDS PAGE
======================================== */

.contacts-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--bg-card);
    padding: 4px;
    border-radius: 10px;
}

.contacts-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.contacts-tab:hover {
    background: var(--bg-input);
}

.contacts-tab.active {
    background: var(--primary);
    color: white;
}

.tab-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contacts-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.contacts-actions .contacts-search-input-wrapper {
    flex: 1;
}

.btn-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: var(--primary);
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-icon:hover {
    background: var(--primary-dark);
}

.friends-list,
.requests-list,
.archives-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.friend-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.friend-card:hover {
    background: var(--bg-card-hover);
}

.friend-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
}

.friend-info {
    flex: 1;
    min-width: 0;
}

.friend-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.friend-last-message {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
}

.unread-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.request-card,
.archive-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px;
    border: none;
}

.request-avatar,
.archive-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}

.request-info,
.archive-info {
    flex: 1;
}

.request-name,
.archive-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.request-date {
    font-size: 12px;
    color: var(--text-muted);
}

.archive-description {
    margin-top: 4px;
}

.archive-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.archive-badge.sent {
    background: rgba(210, 153, 34, 0.2);
    color: var(--warning);
}

.archive-badge.received {
    background: rgba(139, 148, 158, 0.2);
    color: var(--text-secondary);
}

.archive-actions {
    display: flex;
    align-items: center;
}

.btn-resend {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn-resend:hover:not(:disabled) {
    background: var(--primary-light);
    transform: scale(1.08);
}

.btn-resend:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.archive-blocked-icon {
    color: var(--text-muted);
    font-size: 20px;
}

.request-actions {
    display: flex;
    gap: 10px;
}

/* Boutons accepter/refuser demande ami */
.btn-request {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.btn-request:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-request-accept {
    background: var(--success);
    color: white;
}

.btn-request-accept:hover:not(:disabled) {
    background: var(--success-light);
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(35, 134, 54, 0.4);
}

.btn-request-reject {
    background: var(--danger);
    color: white;
}

.btn-request-reject:hover:not(:disabled) {
    background: var(--danger);
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(218, 54, 51, 0.4);
}

/* Resultat recherche ami */
.friend-search-result-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: 12px;
    border: none;
}

.friend-result-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.friend-result-info {
    flex: 1;
}

.friend-result-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.friend-result-status {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.friend-result-status.pending {
    color: var(--warning);
}

.friend-result-status i {
    font-size: 12px;
}

/* ========================================
   CHAT WHATSAPP STYLE
======================================== */

.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-height) - 40px);
    max-height: calc(100vh - var(--nav-height) - 40px);
    background: var(--bg-dark);
    margin: -16px;
    margin-bottom: calc(-16px - var(--nav-height));
    overflow: hidden;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: none;
}

.chat-header .btn-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-input);
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}

.chat-header-info {
    flex: 1;
}

.chat-header-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-header-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.chat-header-status.ephemeral {
    color: var(--warning);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-darker);
}

.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: 10px;
}

.chat-empty i {
    font-size: 48px;
    opacity: 0.5;
}

.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 85%;
    min-width: 0;
}

.chat-message.mine {
    margin-left: auto;
    flex-direction: row-reverse;
}

.chat-message.theirs {
    margin-right: auto;
}

.chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.chat-message.mine .chat-bubble {
    background: var(--primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-message.theirs .chat-bubble {
    background: var(--bg-card);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chat-text {
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-width: 100%;
    overflow: hidden;
}

.chat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    justify-content: flex-end;
}

.chat-time {
    font-size: 11px;
    opacity: 0.7;
}

.chat-meta i {
    font-size: 12px;
    opacity: 0.7;
}

.chat-meta i.read {
    color: #34B7F1;
    opacity: 1;
}

.chat-message.theirs .chat-meta i.read {
    color: var(--primary);
}

.chat-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition);
    padding: 4px;
}

.chat-message:hover .chat-delete-btn {
    opacity: 0.6;
}

.chat-delete-btn:hover {
    opacity: 1 !important;
    color: var(--danger);
}

.chat-input-container {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-top: none;
}

.chat-input {
    flex: 1;
    background: var(--bg-input);
    border: none;
    border-radius: 24px;
    padding: 12px 18px;
    color: var(--text-primary);
    font-size: 14px;
}

.chat-input:focus {
    outline: none;
}

.chat-send-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.chat-send-btn:hover {
    background: var(--primary-dark);
}

/* Chat options modal */
.modal-sm {
    max-width: 320px !important;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bg-input);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-primary);
    font-size: 14px;
}

.option-item:hover {
    background: var(--bg-card-hover);
}

.option-item.danger {
    color: var(--danger);
}

.option-item i {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.option-hint {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 14px;
    margin: 0;
}

/* Alert styles */
.alert {
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.alert-success {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success-light);
    border: none;
}

.alert-danger {
    background: rgba(218, 54, 51, 0.2);
    color: var(--danger);
    border: 1px solid rgba(218, 54, 51, 0.3);
}

.form-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ========================================
   CERTIFICATION - Modern & Clean
======================================== */

.certification-status {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-card);
    border-radius: 16px;
    margin: 16px;
}

.cert-badge-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 54px;
    color: var(--text-muted);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.certification-status.certified .cert-badge-large {
    background: var(--success);
    color: white;
    box-shadow: 0 8px 32px rgba(35, 134, 54, 0.4);
}

.cert-badge-large.pending {
    background: var(--warning);
    color: white;
    box-shadow: 0 8px 32px rgba(210, 153, 34, 0.4);
}

.cert-badge-large.rejected {
    background: var(--danger);
    color: white;
    box-shadow: 0 8px 32px rgba(218, 54, 51, 0.4);
}

.certification-status h2 {
    margin-bottom: 12px;
    color: var(--text-primary);
    font-size: 22px;
}

.certification-status p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.rejection-reason {
    background: rgba(218, 54, 51, 0.15);
    border: 1px solid rgba(218, 54, 51, 0.4);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 20px 0;
    text-align: left;
}

.rejection-reason strong {
    color: var(--danger);
}

.certification-intro {
    padding: 24px 20px;
    text-align: center;
    background: var(--bg-card);
    border-radius: 16px;
    margin: 16px;
}

.certification-intro h2 {
    margin: 20px 0 12px;
    font-size: 22px;
    color: var(--text-primary);
}

.certification-intro > p {
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.certification-benefits {
    background: rgba(0, 161, 230, 0.08);
    border: none;
    border-radius: 14px;
    padding: 20px;
    margin: 24px 0;
    text-align: left;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.benefit-item:last-child {
    border-bottom: none;
}

.benefit-item i {
    width: 24px;
    height: 24px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.benefit-item span {
    color: var(--text-primary);
    font-weight: 500;
}

.certification-requirements {
    background: var(--bg-input);
    border-radius: 14px;
    padding: 20px;
    margin: 24px 0;
    text-align: left;
    border: none;
}

.certification-requirements h4 {
    margin-bottom: 16px;
    color: var(--text-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.certification-requirements h4::before {
    content: '\f15c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--primary);
}

.certification-requirements ul {
    list-style: none;
    padding: 0;
}

.certification-requirements li {
    padding: 10px 0;
    padding-left: 28px;
    position: relative;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.certification-requirements li:last-child {
    border-bottom: none;
}

.certification-requirements li::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--primary);
    font-size: 14px;
}

.certification-requirements .small {
    margin-top: 16px;
    padding: 12px;
    background: rgba(243, 156, 18, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(243, 156, 18, 0.2);
}

.certification-requirements .small i {
    color: var(--warning);
    margin-right: 6px;
}

.btn-large {
    padding: 18px 32px;
    font-size: 16px;
    width: 100%;
    margin-top: 24px;
    border-radius: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(0, 161, 230, 0.3);
    transition: all 0.2s ease;
}

.btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 161, 230, 0.4);
}

/* Certification Modal Steps */
.certification-steps {
    padding: 10px 0;
}

.step-indicator {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
}

.step-indicator .step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    position: relative;
}

.step-indicator .step.active {
    background: var(--primary);
    color: white;
}

.step-indicator .step.completed {
    background: var(--success);
    color: white;
}

.step-indicator .step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 100%;
    width: 20px;
    height: 2px;
    background: var(--border-color);
    top: 50%;
    transform: translateY(-50%);
}

.step-indicator .step.completed::after {
    background: var(--success);
}

.cert-step {
    display: none;
    text-align: center;
}

.cert-step.active {
    display: block;
}

.cert-step h4 {
    margin-bottom: 8px;
}

.photo-preview {
    width: 200px;
    height: 150px;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    overflow: hidden;
}

.photo-preview i {
    font-size: 32px;
}

.photo-preview.has-image {
    border-style: solid;
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cert-type-select {
    margin-top: 24px;
    text-align: left;
}

.cert-type-select label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Menu badge verified */
.menu-badge.verified {
    background: var(--success);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-left: auto;
    margin-right: 8px;
}

/* Modal large */
.modal-large {
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

/* ========================================
   PIA PRO - Portefeuille Rechargeable
======================================== */

/* Profile Balances (Double affichage PIA FREE + PIA PRO) */
.profile-balances {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: 12px;
    margin: 0 16px 16px;
}

.balance-item {
    text-align: center;
    flex: 1;
}

.balance-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.balance-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.balance-value i {
    color: var(--warning);
}

.balance-value.primary i {
    color: var(--primary);
}

.balance-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

/* PIA PRO Balance Card (Page Recharge) */
.pia-pro-balance-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    margin: 16px;
    text-align: center;
}

.pia-pro-balance-card .balance-icon {
    width: 64px;
    height: 64px;
    background: rgba(0, 161, 230, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.pia-pro-balance-card .balance-icon i {
    font-size: 28px;
    color: var(--primary);
}

.pia-pro-balance-card .balance-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pia-pro-balance-card .balance-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Recharge Info Box */
.recharge-info-box {
    background: rgba(0, 161, 230, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.recharge-info-box i {
    color: var(--primary);
    font-size: 20px;
    margin-top: 2px;
}

.recharge-info-box p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Rates Grid */
.rates-section-title {
    font-size: 16px;
    font-weight: 600;
    padding: 0 16px;
    margin-bottom: 12px;
}

/* Tabs de devises pour PIA PRO */
.devise-tabs {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 16px;
}

.devise-tab {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.devise-tab:hover {
    color: var(--text-primary);
}

.devise-tab.active {
    background: var(--primary);
    color: white;
}

.rates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px;
    margin-bottom: 24px;
}

.rate-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.rate-card:hover {
    background: var(--bg-card-hover);
}

.rate-card.selected {
    background: rgba(0, 161, 230, 0.1);
}

.rate-card.selected::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rate-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.rate-pia {
    font-size: 14px;
    color: var(--primary);
    font-weight: 600;
}

.rate-bonus {
    display: inline-block;
    background: var(--success);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 8px;
}

/* Payment Methods */
.payment-methods-title {
    font-size: 16px;
    font-weight: 600;
    padding: 0 16px;
    margin-bottom: 12px;
}

.payment-methods {
    display: flex;
    gap: 12px;
    padding: 0 16px;
    margin-bottom: 24px;
}

.payment-method {
    flex: 1;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}

.payment-method:hover {
}

.payment-method.selected {
    background: rgba(0, 161, 230, 0.1);
}

.payment-method-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.payment-method-icon.wave {
    background: rgba(255, 179, 0, 0.15);
    color: #FFB300;
}

.payment-method-icon.stripe {
    background: rgba(99, 91, 255, 0.15);
    color: #635BFF;
}

.payment-method-name {
    font-weight: 600;
    font-size: 14px;
}

.payment-method-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Recharge Button */
.btn-recharge {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 24px;
    padding: 16px;
    background: var(--primary);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-recharge:hover {
    background: var(--primary-dark);
}

.btn-recharge:disabled {
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: not-allowed;
}

.btn-recharge i {
    margin-right: 8px;
}

/* Success Card (Confirmation paiement) */
.success-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 32px 24px;
    margin: 24px 16px;
    text-align: center;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: rgba(35, 134, 54, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.success-icon i {
    font-size: 36px;
    color: var(--success);
}

.success-card h2 {
    font-size: 22px;
    margin-bottom: 8px;
}

.success-card p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.success-details {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.success-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.success-detail-row:not(:last-child) {
    border-bottom: none;
}

.success-detail-row span:first-child {
    color: var(--text-muted);
}

.success-detail-row span:last-child {
    font-weight: 600;
}

.success-detail-row.highlight span:last-child {
    color: var(--primary);
    font-size: 18px;
}

/* PIA PRO Stats (Historique) */
.pia-pro-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px;
}

.pia-pro-stat {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.pia-pro-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pia-pro-stat-value.credit {
    color: var(--success);
}

.pia-pro-stat-value.debit {
    color: var(--danger);
}

.pia-pro-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Transactions List */
.transactions-section-title {
    font-size: 16px;
    font-weight: 600;
    padding: 16px 16px 12px;
}

.transactions-list {
    padding: 0 16px 100px;
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 8px;
}

.transaction-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.transaction-icon.credit {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success);
}

.transaction-icon.debit {
    background: rgba(218, 54, 51, 0.15);
    color: var(--danger);
}

.transaction-info {
    flex: 1;
}

.transaction-type {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.transaction-date {
    font-size: 12px;
    color: var(--text-muted);
}

.transaction-aggregator {
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

.transaction-amount {
    text-align: right;
}

.transaction-amount-value {
    font-weight: 700;
    font-size: 16px;
}

.transaction-amount-value.credit {
    color: var(--success);
}

.transaction-amount-value.debit {
    color: var(--danger);
}

.transaction-amount-real {
    font-size: 11px;
    color: var(--text-muted);
}

/* Profile Menu Highlight */
.profile-menu-item.highlight {
    background: rgba(0, 161, 230, 0.1);
}

.profile-menu-item.highlight .menu-icon {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

/* Pending/Processing State */
.pending-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 32px 24px;
    margin: 24px 16px;
    text-align: center;
}

.pending-icon {
    width: 80px;
    height: 80px;
    background: rgba(210, 153, 34, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.pending-icon i {
    font-size: 36px;
    color: var(--warning);
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error Card */
.error-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 32px 24px;
    margin: 24px 16px;
    text-align: center;
}

.error-icon {
    width: 80px;
    height: 80px;
    background: rgba(218, 54, 51, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.error-icon i {
    font-size: 36px;
    color: var(--danger);
}

/* Aggregator badges */
.aggregator-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.aggregator-badge.wave {
    background: rgba(255, 179, 0, 0.15);
    color: #FFB300;
}

.aggregator-badge.stripe {
    background: rgba(99, 91, 255, 0.15);
    color: #635BFF;
}

.aggregator-badge.admin {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

/* ========================================
   Confirm Modal (remplace confirm() natif)
======================================== */
.confirm-modal-content {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 320px;
    text-align: center;
    animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
}

.confirm-icon.warning {
    background: rgba(210, 153, 34, 0.15);
    color: var(--warning);
}

.confirm-icon.danger {
    background: rgba(218, 54, 51, 0.15);
    color: var(--danger);
}

.confirm-icon.info {
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
}

.confirm-icon.success {
    background: rgba(35, 134, 54, 0.15);
    color: var(--success);
}

.confirm-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.confirm-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.confirm-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.confirm-buttons .btn {
    flex: 1;
    min-width: 100px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

/* Sur petits écrans, boutons en colonne */
@media (max-width: 360px) {
    .confirm-buttons {
        flex-direction: column;
    }
    .confirm-buttons .btn {
        width: 100%;
    }
}

.confirm-buttons .btn-secondary {
    background: var(--bg-input);
    border: none;
    color: var(--text-primary);
}

.confirm-buttons .btn-secondary:hover {
    background: var(--bg-card-hover);
}

.confirm-buttons .btn-primary {
    background: var(--primary);
    border: none;
    color: white;
}

.confirm-buttons .btn-primary:hover {
    background: var(--primary-dark);
}

.confirm-buttons .btn-danger {
    background: var(--danger);
    border: none;
    color: white;
}

.confirm-buttons .btn-danger:hover {
    background: #c22522;
}

/* ========================================
   AGENT IA - Assistant personnel
======================================== */

.agent-ia-page {
    padding: 1rem;
    padding-bottom: calc(var(--nav-height) + 1rem);
}

.agent-ia-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Sidebar Profil */
.agent-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.agent-profile-card {
    padding: 1.5rem;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: none;
}

.profile-header i {
    font-size: 2rem;
    color: var(--primary);
}

.profile-header h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
}

.profile-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: 8px;
    border: none;
}

.profile-stats .stat-item i {
    font-size: 1.5rem;
    color: var(--primary);
    min-width: 24px;
}

.profile-stats .stat-item.success i {
    color: var(--success);
}

.profile-stats .stat-item.danger i {
    color: var(--danger);
}

.profile-stats .stat-item div {
    flex: 1;
}

.profile-stats .stat-item strong {
    display: block;
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.profile-stats .stat-item span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Quick Actions */
.agent-quick-actions {
    padding: 1.5rem;
}

.agent-quick-actions h4 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.agent-quick-actions h4 i {
    color: var(--warning);
}

.quick-action-btn {
    width: 100%;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    background: var(--bg-input);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quick-action-btn i {
    color: var(--primary);
    font-size: 1.1rem;
}

.quick-action-btn:hover {
    background: var(--bg-card-hover);
    transform: translateX(4px);
}

/* Chat Container */
.agent-chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - var(--nav-height) - 2rem);
    max-height: calc(100vh - var(--header-height) - var(--nav-height) - 2rem);
    overflow: hidden;
}

.agent-chat-header {
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.chat-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.chat-title i {
    font-size: 2rem;
    color: var(--primary);
}

.chat-title h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
}

.chat-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-left: 2.75rem;
}

/* Messages */
.agent-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: none;
    margin-bottom: 1rem;
}

.message-ai,
.message-user {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    animation: messageSlideIn 0.3s ease;
}

.message-user {
    flex-direction: row-reverse;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.message-user .message-avatar {
    background: var(--success);
}

.message-avatar i {
    color: white;
    font-size: 1.25rem;
}

.message-content {
    flex: 1;
    max-width: 80%;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
}

.message-bubble {
    background: var(--bg-input);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    color: var(--text-primary);
    line-height: 1.6;
    border: none;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}

.message-user .message-bubble {
    background: var(--primary);
}

.message-bubble ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.message-bubble li {
    margin: 0.25rem 0;
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    padding-left: 0.25rem;
}

.message-user .message-time {
    text-align: right;
    padding-right: 0.25rem;
}

/* Typing Indicator */
.typing-indicator .typing-dots {
    display: flex;
    gap: 0.375rem;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typingBounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Chat Input */
.agent-chat-input-container {
    background: var(--bg-card);
    border-radius: 12px;
    border: none;
    padding: 1rem;
}

.chat-input-wrapper {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.chat-input {
    flex: 1;
    padding: 0.875rem 1.25rem;
    background: var(--bg-input);
    border: none;
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition);
}

.chat-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 161, 230, 0.1);
}

.chat-input::placeholder {
    color: var(--text-muted);
}

.btn-send-message {
    width: 48px;
    height: 48px;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-send-message:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.btn-send-message:active {
    transform: scale(0.95);
}

/* Responsive */
@media (max-width: 968px) {
    .agent-ia-container {
        grid-template-columns: 1fr;
    }

    .agent-sidebar {
        order: 2;
    }

    .agent-chat-container {
        order: 1;
        height: 600px;
    }

    .message-content {
        max-width: 85%;
    }
}

@media (max-width: 480px) {
    .agent-ia-page {
        padding: 0.5rem;
    }

    .agent-chat-header {
        padding: 1rem;
    }

    .chat-title h2 {
        font-size: 1.25rem;
    }

    .message-content {
        max-width: 90%;
    }

    .message-bubble {
        padding: 0.875rem 1rem;
    }
}

/* Badge Stats réelles pour Agent IA */
.stats-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #2ea043;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-badge i {
    font-size: 0.65rem;
}

/* ==================== PROFILER MODULE ==================== */

.profiler-page {
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.profiler-header {
    background: var(--primary);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.profiler-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profiler-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

.profiler-filters {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: none;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.filter-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.filter-item select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s;
    cursor: pointer;
}

.filter-item select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 161, 230, 0.1);
}

.filter-item select:hover {
}

.btn-profiler-launch {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 161, 230, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.btn-profiler-launch:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 161, 230, 0.4);
}

.btn-profiler-launch:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.profiler-results {
    min-height: 200px;
}

.empty-state,
.error-state,
.no-matches {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.empty-state i,
.error-state i,
.no-matches i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p,
.error-state p,
.no-matches p {
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.empty-state small {
    opacity: 0.7;
    font-size: 0.9rem;
}

.error-state {
    color: var(--danger);
}

.error-state i {
    color: var(--danger);
}

/* Summary Cards */
.profiler-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card {
    background: var(--bg-card);
    padding: 1.25rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.summary-card i {
    font-size: 2rem;
    color: var(--primary);
    opacity: 0.8;
}

.summary-card div {
    flex: 1;
}

.summary-card strong {
    display: block;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.summary-card span {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Matches Section */
.profiler-matches-section {
    margin-bottom: 2rem;
}

.profiler-matches-section h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profiler-matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 1.5rem;
}

/* Match Card */
.profiler-match-card {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    overflow: hidden;
    transition: all 0.3s;
}

.profiler-match-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.match-card-header {
    background: rgba(0, 161, 230, 0.08);
    padding: 1.25rem;
    border-bottom: 2px solid var(--border-color);
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.match-teams strong {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.match-teams .vs {
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.match-meta {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.match-meta i {
    margin-right: 0.35rem;
}

.match-quality {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.quality-badge,
.cache-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.quality-badge.high {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success-light);
}

.quality-badge.medium {
    background: rgba(210, 153, 34, 0.2);
    color: var(--warning);
}

.quality-badge.low {
    background: rgba(218, 54, 51, 0.2);
    color: var(--danger);
}

.cache-badge {
    background: rgba(88, 166, 255, 0.2);
    color: var(--info);
}

/* Predictions */
.match-predictions {
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
}

.prediction-block {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.3s;
}

.prediction-block.highlighted {
    background: rgba(255, 152, 0, 0.1);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
}

.prediction-block h5 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.expected-value {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.expected-value strong {
    color: var(--text-primary);
}

.expected-value small {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.explication {
    background: rgba(0, 161, 230, 0.1);
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.explication i {
    color: var(--primary);
    margin-top: 0.15rem;
}

.paris-list {
    display: grid;
    gap: 0.5rem;
}

.pari-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.875rem;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.3s;
}

.pari-item.high-prob {
    background: rgba(35, 134, 54, 0.2);
    color: var(--success-light);
}

.pari-item.medium-prob {
    background: rgba(210, 153, 34, 0.2);
    color: var(--warning);
}

.pari-item.low-prob {
    background: rgba(218, 54, 51, 0.2);
    color: var(--danger);
}

.pari-item:hover {
    transform: translateX(4px);
}

.pari-type {
    font-weight: 600;
}

.pari-prob {
    font-weight: 700;
}

.score-probable {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    padding: 1rem;
    background: rgba(0, 161, 230, 0.1);
    border-radius: 8px;
}

/* Combinations Section */
.profiler-combos-section {
    margin-top: 3rem;
}

.profiler-combos-section h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.combos-category {
    margin-bottom: 2rem;
}

.combos-category h4 {
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.combos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.profiler-combo-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    transition: all 0.3s;
}

.profiler-combo-card.high-prob {
}

.profiler-combo-card.medium-prob {
}

.profiler-combo-card.low-prob {
}

.profiler-combo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.combo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.combo-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.combo-title i {
    color: var(--primary);
}

.combo-title strong {
    font-size: 1.05rem;
    color: var(--text-primary);
}

.combo-prob {
    text-align: right;
}

.combo-prob .prob-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.combo-prob small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.combo-matches {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.combo-match-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: 0.875rem;
}

.combo-match-teams {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.combo-match-teams strong {
    color: var(--text-primary);
    font-weight: 600;
}

.combo-match-bet-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.combo-match-item .match-bet {
    color: #ffcc00;
    font-weight: 600;
    font-size: 0.9375rem;
}

.combo-match-item .match-prob {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.9375rem;
}

.combo-explication {
    background: rgba(23, 162, 184, 0.15);
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--info);
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.combo-explication i {
    color: var(--info);
    margin-top: 0.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .profiler-page {
        padding: 0.5rem;
    }

    .profiler-header {
        padding: 1.5rem 1rem;
    }

    .profiler-header h2 {
        font-size: 1.35rem;
    }

    .filter-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .profiler-matches-grid {
        grid-template-columns: 1fr;
    }

    .profiler-summary {
        grid-template-columns: 1fr;
    }

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

    .match-teams {
        flex-direction: column;
        gap: 0.5rem;
    }

    .match-meta {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
}

/* ========================================
   ANALYTIX MODULE - APP UTILISATEUR
======================================== */

.full-analysis-results {
    margin-top: 20px;
}

.analysis-header {
    background: rgba(0, 161, 230, 0.08);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    border: none;
}

.analysis-header h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.analysis-header h4 i {
    font-size: 20px;
}

.analysis-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.full-match-analysis {
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.match-header-analysis {
    padding: 14px;
    background: var(--bg-input);
}

.match-header-analysis .match-teams {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    word-break: break-word;
}

.match-info-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.match-comp {
    color: var(--primary);
    font-weight: 500;
}

.match-probabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.prob-item {
    background: var(--bg-card);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.match-categories {
    padding: 12px;
}

.analysis-category {
    margin-bottom: 16px;
}

.analysis-category:last-child {
    margin-bottom: 0;
}

.category-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-header i {
    color: var(--primary);
    font-size: 14px;
}

.category-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-card {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 12px;
    position: relative;
}

.option-card.recommended {
    background: rgba(35, 134, 54, 0.1);
}

.option-card.recommended::before {
    content: "★";
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--success);
    font-size: 12px;
}

.option-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
}

.option-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.option-cote {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}

.option-prob {
    position: relative;
    height: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.option-prob .prob-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--success);
    opacity: 0.3;
    border-radius: 10px;
}

.option-prob span {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
}

.option-explanation {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 8px;
}

.btn-add-option {
    width: 100%;
    padding: 8px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-add-option:active {
    opacity: 0.8;
}

.match-recommendation {
    padding: 12px;
    background: rgba(35, 134, 54, 0.08);
}

.reco-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--success);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reco-header i {
    font-size: 14px;
}

.reco-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card);
    padding: 12px;
    border-radius: 10px;
}

.reco-bet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg-input);
    padding: 10px 12px;
    border-radius: 8px;
}

.reco-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reco-cote {
    font-size: 14px;
    font-weight: 700;
    color: var(--success);
    flex-shrink: 0;
    background: rgba(35, 134, 54, 0.15);
    padding: 4px 8px;
    border-radius: 6px;
}

.reco-prob {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-light);
    flex-shrink: 0;
}

.reco-reason {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.btn-add-reco {
    width: 100%;
    padding: 10px;
    background: var(--success);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-add-reco:active {
    opacity: 0.8;
}

/* =====================================================
   ENCADRÉ STATS RÉELLES - ANALYTIX & PROFILER
   ===================================================== */

.real-stats-box,
.profiler-stats-box {
    background: rgba(0, 161, 230, 0.08);
    border: none;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.stats-box-header,
.stats-box-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
}

.stats-source {
    margin-left: auto;
    font-size: 0.75rem;
    background: rgba(0, 161, 230, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: var(--text-secondary);
}

.stats-grid-compact,
.stats-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stats-col,
.stats-team-col {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 0.75rem;
}

.team-label,
.team-badge {
    display: block;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: none;
}

.stat-row,
.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.85rem;
}

.stat-row span:first-child,
.stat-item span:first-child {
    color: var(--text-secondary);
}

.stat-row strong,
.stat-item strong {
    color: var(--primary);
    font-weight: 600;
}

/* Badge Stats dans PROFILER */
.stats-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(35, 134, 54, 0.1);
    color: #238636;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* =====================================================
   COMBOS INTELLIGENTES - ANALYTIX
   ===================================================== */

.match-combos-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-color);
}

.combos-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.combos-count {
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 161, 230, 0.1);
    color: var(--primary);
    border-radius: 12px;
}

.combos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}

.combo-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.combo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.combo-card.safe {
    background: rgba(35, 134, 54, 0.05);
}

.combo-card.balanced {
    background: rgba(0, 161, 230, 0.05);
}

.combo-card.varied {
    background: rgba(245, 158, 11, 0.05);
}

.combo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: none;
}

.combo-type-badge {
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.combo-card.safe .combo-type-badge {
    background: #238636;
    color: white;
}

.combo-card.balanced .combo-type-badge {
    background: #1877F2;
    color: white;
}

.combo-card.varied .combo-type-badge {
    background: #F59E0B;
    color: white;
}

.combo-totals {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
}

.combo-cote-total {
    font-weight: 700;
    color: var(--primary);
}

.combo-prob-total {
    font-weight: 600;
    color: var(--text-secondary);
}

.combo-bets-list {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.combo-bet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.875rem;
}

.combo-bet-label {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.combo-bet-cote {
    margin: 0 0.75rem;
    padding: 0.25rem 0.6rem;
    background: rgba(0, 161, 230, 0.1);
    color: var(--primary);
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
}

.combo-bet-prob {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.combo-explanation {
    margin: 1rem 0;
    padding: 0.85rem;
    background: rgba(0, 161, 230, 0.08);
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.combo-explanation i {
    color: var(--primary);
    margin-right: 0.5rem;
}

.combo-explanation strong {
    color: var(--text-primary);
    margin-right: 0.25rem;
}

.btn-add-combo {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-add-combo:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 161, 230, 0.4);
}

.btn-add-combo:active {
    transform: translateY(0);
}

.no-combo-reason {
    padding: 1.5rem;
    background: rgba(110, 118, 129, 0.1);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* =====================================================
   PRONIX - RÉPARTITION BUDGET
   ===================================================== */

.pronix-repartition-container {
    padding: 0;
}

.repartition-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.repartition-header h2 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.repartition-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.budget-match-card {
    background: var(--bg-card);
    border: none;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease;
}

.budget-match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bmc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: none;
}

.bmc-teams {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.bmc-teams .vs {
    margin: 0 0.5rem;
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.9rem;
}

.bmc-mise-badge {
    padding: 0.5rem 1rem;
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
}

.bmc-meta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.bmc-meta i {
    margin-right: 0.25rem;
}

.budget-percent {
    padding: 0.25rem 0.6rem;
    background: rgba(110, 118, 129, 0.1);
    border-radius: 4px;
    font-weight: 600;
}

.bmc-paris {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.bmc-paris-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.bmc-pari-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem;
    background: var(--bg-card);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.pari-label {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.pari-cote {
    margin: 0 0.75rem;
    padding: 0.25rem 0.6rem;
    background: rgba(0, 161, 230, 0.1);
    color: var(--primary);
    border-radius: 4px;
    font-weight: 700;
}

.pari-prob {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.bmc-combo-total {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: none;
    font-size: 0.9rem;
}

.gain-potential {
    color: #238636;
}

.bmc-pourquoi {
    background: rgba(0, 161, 230, 0.08);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.pourquoi-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
    font-size: 0.9rem;
}

.bmc-pourquoi p {
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.9rem;
}

.bmc-stats {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 0.75rem;
}

.bmc-stats-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    font-size: 0.8rem;
}

.stats-mini-grid span {
    padding: 0.35rem 0.5rem;
    background: rgba(110, 118, 129, 0.1);
    border-radius: 4px;
    color: var(--text-secondary);
}

.bmc-confidence {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.confidence-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.confidence-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
}

.confidence-value {
    font-weight: 700;
    color: var(--primary);
    min-width: 45px;
    text-align: right;
}

.repartition-bilan {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.repartition-bilan h3 {
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bilan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.bilan-item {
    background: var(--bg-card);
    border: none;
    border-radius: 8px;
    padding: 1rem;
}

.bilan-item.highlight {
    background: rgba(35, 134, 54, 0.05);
}

.bilan-item.warning {
    background: rgba(245, 158, 11, 0.05);
}

.bilan-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.bilan-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.bilan-value.gain {
    color: #238636;
}

.bilan-percent,
.roi,
.bilan-note {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

.roi-value {
    color: var(--primary);
}

.bilan-note-box {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.bilan-note-box i {
    color: var(--primary);
    margin-top: 0.1rem;
}

.repartition-actions {
    margin-top: 2rem;
    text-align: center;
}

.btn-apply-all {
    padding: 1rem 2rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-apply-all:hover {
    background: #1565C0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 161, 230, 0.3);
}

.btn-apply-all:active {
    transform: translateY(0);
}

/* ========================================
   RESPONSIVE - Mon Gbonhi Android Fix
======================================== */

@media (max-width: 768px) {
    .gbonhi-card-header {
        flex-wrap: wrap;
    }
    
    .gbonhi-card-name {
        font-size: 15px;
        line-height: 1.3;
        word-break: break-word;
    }
    
    .gbonhi-card-name span {
        display: inline-block;
        margin-left: 4px;
        vertical-align: middle;
    }
    
    .gbonhi-icon {
        flex-shrink: 0;
    }
    
    .gbonhi-info {
        flex: 1;
        min-width: 0;
    }
    
    .gbonhi-members {
        font-size: 12px;
    }
    
    .gbonhi-status {
        font-size: 11px;
        padding: 3px 8px;
    }
    
    .gbonhi-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .gbonhi-date,
    .gbonhi-matches {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .gbonhi-card {
        padding: 12px;
    }

    .gbonhi-card-header {
        gap: 10px;
    }
}

/* ========================================
   NOUVELLES SECTIONS ANALYSE AVANCEE
   - Badge source de donnees
   - Enjeu & Motivation
   - Recommandations IA
======================================== */

/* === Badge Source de Donnees === */
.data-source-badge-app {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}

.data-source-badge-app.badge-real {
    background: rgba(35, 134, 54, 0.12);
    border: none;
    color: #2ea043;
}

.data-source-badge-app.badge-scraping {
    background: rgba(0, 161, 230, 0.12);
    border: 1px solid rgba(88, 166, 255, 0.4);
    color: #58a6ff;
}

.data-source-badge-app.badge-estimated {
    background: rgba(245, 179, 66, 0.12);
    border: 1px solid rgba(210, 153, 34, 0.4);
    color: #d29922;
}

.data-source-badge-app.badge-unknown {
    background: rgba(139, 148, 158, 0.12);
    border: 1px solid rgba(139, 148, 158, 0.4);
    color: #8b949e;
}

.data-source-badge-app i {
    font-size: 16px;
}

.quality-indicator {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.quality-indicator.quality-high {
    background: rgba(35, 134, 54, 0.2);
    color: #2ea043;
}

.quality-indicator.quality-medium {
    background: rgba(210, 153, 34, 0.2);
    color: #d29922;
}

.quality-indicator.quality-low {
    background: rgba(218, 54, 51, 0.2);
    color: #da3633;
}

/* === Section Enjeu & Motivation === */
.stakes-section-app {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.stakes-section-app .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.stakes-section-app .section-title i {
    color: #f59e0b;
}

.stakes-grid-app {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stake-card-app {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--bg-input);
    border-radius: 10px;
}

.stake-card-app.competition {
    background: var(--bg-input);
}

.stake-card-app.motivation-home {
    background: var(--bg-input);
}

.stake-card-app.motivation-away {
    background: var(--bg-input);
}

.stake-card-app.home-advantage {
    background: var(--bg-input);
}

.stake-icon-app {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.stake-card-app.competition .stake-icon-app {
    color: #f59e0b;
}

.stake-card-app.motivation-home .stake-icon-app {
    color: var(--primary);
}

.stake-card-app.motivation-away .stake-icon-app {
    color: #da3633;
}

.stake-card-app.home-advantage .stake-icon-app {
    color: #2ea043;
}

.stake-content-app {
    flex: 1;
    min-width: 0;
}

.stake-content-app h5 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.stake-content-app p {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.stake-level-app {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.stake-level-app.critical {
    background: rgba(218, 54, 51, 0.15);
    color: #da3633;
}

.stake-level-app.high {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.stake-level-app.medium {
    background: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
}

.stake-level-app.low {
    background: rgba(139, 148, 158, 0.15);
    color: #8b949e;
}

.stake-badge-app {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.stake-badge-app.positive {
    background: rgba(46, 160, 67, 0.15);
    color: #2ea043;
}

/* Barre de motivation */
.motivation-bar-app {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.motivation-bar-app .bar-label {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 60px;
}

.motivation-bar-app .bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
}

.motivation-bar-app .bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.motivation-bar-app .bar-fill.high {
    background: var(--success);
}

.motivation-bar-app .bar-fill.medium {
    background: var(--accent);
}

.motivation-bar-app .bar-fill.low {
    background: var(--danger);
}

.motivation-bar-app .bar-value {
    font-size: 12px;
    font-weight: 700;
    min-width: 35px;
    text-align: right;
    color: var(--text-primary);
}

/* === Section Recommandations IA === */
.recommendations-section-app {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.recommendations-section-app .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.recommendations-section-app .section-title i {
    color: #a78bfa;
}

.reco-grid-app {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.reco-card-app {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 14px;
    border: none;
}

.reco-card-app.main {
    background: var(--bg-card);
}

.reco-card-app.main.high-conf {
    background: var(--bg-card);
}

.reco-card-app.safe {
}

.reco-card-app.value {
}

.reco-badge-app {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 10px;
}

.reco-badge-app.main {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.reco-badge-app.safe {
    background: rgba(46, 160, 67, 0.2);
    color: #3fb950;
}

.reco-badge-app.value {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.reco-content-app h5 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.reco-content-app p {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.reco-stats-app {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.reco-prob, .reco-conf {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
}

.reco-prob {
    color: var(--primary);
}

.reco-conf.high {
    color: #3fb950;
}

.reco-conf.medium {
    color: #f59e0b;
}

/* Avertissement donnees limitees */
.reco-warning-app {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(218, 54, 51, 0.1);
    border: 1px solid rgba(218, 54, 51, 0.3);
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #f87171;
}

.reco-warning-app i {
    font-size: 16px;
    color: #da3633;
}

/* Quick tips */
.quick-tips-app {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 14px;
}

.quick-tips-app h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.quick-tips-app h5 i {
    color: #f59e0b;
}

.quick-tips-app ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.quick-tips-app li {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 0;
    border-bottom: none;
    position: relative;
    padding-left: 16px;
}

.quick-tips-app li:last-child {
    border-bottom: none;
}

.quick-tips-app li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

/* === Responsive Mobile === */
@media (max-width: 480px) {
    .stakes-section-app,
    .recommendations-section-app {
        padding: 14px;
    }

    .stake-card-app {
        padding: 12px;
    }

    .stake-icon-app {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .stake-content-app h5 {
        font-size: 12px;
    }

    .stake-content-app p {
        font-size: 11px;
    }

    .reco-card-app {
        padding: 12px;
    }

    .reco-content-app h5 {
        font-size: 14px;
    }

    .motivation-bar-app .bar-label {
        min-width: 50px;
        font-size: 10px;
    }
}

/* ========================================
   AVIS DE L'ANALYSTE FOOTBALLISTIQUE
======================================== */

.analyst-section-app {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}

.analyst-header-app {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: none;
}

.analyst-avatar-app {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.analyst-avatar-app i {
    font-size: 20px;
    color: white;
}

.analyst-info-app {
    flex: 1;
}

.analyst-info-app h4 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.analyst-info-app span {
    font-size: 12px;
    color: var(--text-muted);
}

.analyst-confidence-app {
    display: flex;
    gap: 3px;
}

.analyst-confidence-app i {
    font-size: 12px;
    color: #6b7280;
}

.analyst-confidence-app i.star-filled {
    color: #f59e0b;
}

.analyst-body-app {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.analyst-intro-app {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 14px;
}

.analyst-intro-app p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
}

.analyst-block-app {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 14px;
}

.block-header-app {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.block-header-app i {
    font-size: 14px;
    color: #8b5cf6;
}

.block-header-app h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.analyst-block-app p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.analyst-pros-cons-app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pros-app, .cons-app {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 12px;
}

.pros-app h6, .cons-app h6 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
}

.pros-app h6 {
    color: #10b981;
}

.cons-app h6 {
    color: #ef4444;
}

.pros-app ul, .cons-app ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pros-app li, .cons-app li {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 5px 0;
    padding-left: 16px;
    position: relative;
}

.pros-app li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-size: 11px;
}

.cons-app li::before {
    content: '!';
    position: absolute;
    left: 2px;
    color: #ef4444;
    font-size: 11px;
    font-weight: bold;
}

.analyst-verdict-app {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    background: var(--bg-input);
}

.analyst-verdict-app.confident {
    background: rgba(16, 185, 129, 0.1);
}

.analyst-verdict-app.cautious {
    background: rgba(245, 179, 66, 0.1);
}

.analyst-verdict-app.alternative {
    background: rgba(0, 161, 230, 0.1);
}

.analyst-verdict-app.risky {
    background: rgba(218, 54, 51, 0.1);
}

.verdict-icon-app {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.analyst-verdict-app.confident .verdict-icon-app {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.analyst-verdict-app.cautious .verdict-icon-app {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.analyst-verdict-app.alternative .verdict-icon-app {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.analyst-verdict-app.risky .verdict-icon-app {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.verdict-text-app h5 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.verdict-text-app p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.analyst-pick-app {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: 10px;
    text-align: center;
    border: none;
}

.pick-label-app {
    font-size: 12px;
    color: var(--text-muted);
}

.pick-value-app {
    font-size: 16px;
    font-weight: 800;
    color: #10b981;
}

.pick-conf-app {
    font-size: 12px;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 16px;
    color: #10b981;
    font-weight: 600;
}

@media (max-width: 480px) {
    .analyst-section-app {
        padding: 14px;
    }

    .analyst-header-app {
        flex-wrap: wrap;
    }

    .analyst-avatar-app {
        width: 42px;
        height: 42px;
    }

    .analyst-info-app h4 {
        font-size: 15px;
    }

    .analyst-pros-cons-app {
        grid-template-columns: 1fr;
    }

    .analyst-pick-app {
        flex-direction: column;
        gap: 8px;
    }

    .analyst-verdict-app {
        flex-direction: column;
        text-align: center;
    }

    .verdict-icon-app {
        margin: 0 auto;
    }

    .analyst-block-app p,
    .analyst-intro-app p {
        font-size: 13px;
    }
}

/* ========================================
   LES 4 PILIERS DE L'ANALYSE
======================================== */

.four-pillars-app {
    margin: 16px 0;
}

.pillars-title-app {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.12);
    border-radius: 10px;
    margin-bottom: 14px;
}

.pillars-title-app i {
    font-size: 18px;
    color: #8b5cf6;
}

.pillars-title-app span {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Carte de Pilier */
.pillar-card-app {
    display: flex;
    gap: 14px;
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.pillar-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #8b5cf6;
    color: white;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pillar-content {
    flex: 1;
    min-width: 0;
}

.pillar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pillar-header i {
    font-size: 14px;
}

.pillar-card-app.pillar-level .pillar-header i { color: #3b82f6; }
.pillar-card-app.pillar-stakes .pillar-header i { color: #f59e0b; }
.pillar-card-app.pillar-favori .pillar-header i { color: #8b5cf6; }
.pillar-card-app.pillar-outsider .pillar-header i { color: #ef4444; }

.pillar-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.pillar-question {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
}

.pillar-analysis {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.pillar-analysis strong {
    color: var(--text-primary);
}

/* Indicateur de niveau */
.pillar-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 8px;
}

.indicator-label {
    font-size: 12px;
    color: var(--text-muted);
}

.indicator-value {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

.pillar-indicator.high .indicator-value {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.pillar-indicator.medium-high .indicator-value {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.pillar-indicator.medium .indicator-value {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.pillar-indicator.low .indicator-value {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Comparaison de motivation */
.motivation-comparison {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.motiv-team {
    display: flex;
    align-items: center;
    gap: 10px;
}

.motiv-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.motiv-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
}

.motiv-bar-fill {
    height: 100%;
    background: #8b5cf6;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.motiv-percent {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 35px;
    text-align: right;
}

/* Jauge psychologie */
.psychology-gauge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 8px;
}

.gauge-label {
    font-size: 12px;
    color: var(--text-muted);
}

.psych-gauge {
    display: flex;
    gap: 4px;
}

.gauge-block {
    width: 20px;
    height: 10px;
    background: var(--border-color);
    border-radius: 3px;
}

.gauge-block.filled.high {
    background: #10b981;
}

.gauge-block.filled.medium {
    background: #f59e0b;
}

.gauge-block.filled.low {
    background: #ef4444;
}

.gauge-verdict {
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}

.gauge-verdict.high { color: #10b981; }
.gauge-verdict.medium-high { color: #3b82f6; }
.gauge-verdict.medium { color: #f59e0b; }
.gauge-verdict.low { color: #ef4444; }

/* Verdict Outsider */
.outsider-verdict-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.outsider-verdict-box i {
    font-size: 16px;
}

.outsider-verdict-box.concede {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.outsider-verdict-box.fragile {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.outsider-verdict-box.neutral {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}

.outsider-verdict-box.fight {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.outsider-verdict-box.resist {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Synthese des Piliers */
.pillars-synthesis-app {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
}

.synthesis-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.synthesis-header i {
    color: #8b5cf6;
    font-size: 16px;
}

.synthesis-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.synthesis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.synthesis-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
}

.synthesis-item i {
    font-size: 14px;
}

.synthesis-item.valid {
    color: #10b981;
}

.synthesis-item.valid i {
    color: #10b981;
}

.synthesis-item.invalid {
    color: #ef4444;
}

.synthesis-item.invalid i {
    color: #ef4444;
}

.synthesis-conclusion {
    padding: 12px;
    background: var(--bg-card);
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

.synthesis-conclusion strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

/* Responsive pour les piliers */
@media (max-width: 480px) {
    .pillar-card-app {
        padding: 14px;
    }

    .pillar-number {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .pillar-header h5 {
        font-size: 13px;
    }

    .pillar-analysis {
        font-size: 12px;
    }

    .pillar-question {
        font-size: 11px;
    }

    .motiv-name {
        min-width: 60px;
        font-size: 11px;
    }

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

    .synthesis-item {
        font-size: 11px;
    }

    .gauge-block {
        width: 16px;
        height: 8px;
    }

    .pillars-title-app span {
        font-size: 14px;
    }
}

/* ========================================
   VISIFOOT STYLE - Dashboard Matchs
======================================== */

.visifoot-section {
    padding: 16px;
}

.visifoot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.visifoot-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.visifoot-header h2 i {
    color: var(--primary);
}

.visifoot-filters {
    display: flex;
    gap: 8px;
}

.vf-filter-btn {
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--bg-input);
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vf-filter-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.vf-filter-btn.active {
    background: var(--primary);
    color: white;
}

.visifoot-matchs-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Competition Group */
.vf-competition-group {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: none;
}

.vf-competition-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-input);
    border-bottom: none;
}

.vf-comp-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vf-comp-name i {
    color: #f59e0b;
    font-size: 12px;
}

.vf-comp-count {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 4px 10px;
    border-radius: 12px;
}

.vf-matchs-list {
    display: flex;
    flex-direction: column;
}

/* Match Card Visifoot */
.vf-match-card {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: none;
    transition: background 0.2s ease;
    cursor: pointer;
}

.vf-match-card:last-child {
    border-bottom: none;
}

.vf-match-card:hover {
    background: var(--bg-card-hover);
}

.vf-match-card.live {
    background: rgba(220, 38, 38, 0.08);
}

.vf-match-card.finished {
    opacity: 0.6;
}

.vf-match-card.analyzed {
    background: rgba(16, 185, 129, 0.06);
}

/* Time Column */
.vf-match-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.vf-day {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.vf-hour {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.vf-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dc2626;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
}

.vf-live-badge i {
    font-size: 6px;
    animation: pulse 1s infinite;
}

/* Teams Column */
.vf-teams {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.vf-team {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

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

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

.vf-team-logo {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vf-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vf-team-initials {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.vf-team-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.vf-vs {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Odds Column */
.vf-odds {
    display: flex;
    gap: 6px;
}

.vf-odd {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-input);
    padding: 6px 10px;
    border-radius: 6px;
    min-width: 42px;
}

.vf-odd-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

.vf-odd-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}

/* Actions Column */
.vf-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vf-analyzed-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--success);
    background: rgba(16, 185, 129, 0.15);
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 500;
}

.vf-analyze-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.vf-analyze-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 161, 230, 0.3);
}

.vf-analyze-btn i {
    font-size: 12px;
}

/* Responsive Visifoot */
@media (max-width: 768px) {
    .vf-match-card {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .vf-match-time {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        border-bottom: none;
        padding-bottom: 8px;
    }

    .vf-teams {
        width: 100%;
        justify-content: center;
    }

    .vf-team-name {
        max-width: 80px;
        font-size: 12px;
    }

    .vf-odds {
        justify-content: center;
        width: 100%;
    }

    .vf-actions {
        justify-content: center;
        width: 100%;
        padding-top: 8px;
        border-top: none;
    }

    .visifoot-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .visifoot-filters {
        width: 100%;
        justify-content: flex-start;
    }

    .vf-filter-btn {
        flex: 1;
        text-align: center;
        padding: 10px 12px;
    }
}

/* ========================================
   TEAM SEARCH - Recherche d'equipe
======================================== */

.team-search-section {
    padding: 20px 16px;
    background: var(--bg-card);
}

.team-search-header {
    text-align: center;
    margin-bottom: 20px;
}

.team-search-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.team-search-header h2 i {
    color: var(--primary);
}

.team-search-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.team-search-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.team-search-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 0 16px;
    transition: all 0.2s ease;
}

.team-search-input-wrapper:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 161, 230, 0.15);
}

.team-search-input-wrapper i {
    color: var(--text-muted);
    font-size: 16px;
    margin-right: 12px;
}

.team-search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 14px 0;
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
}

.team-search-input::placeholder {
    color: var(--text-muted);
}

.clear-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--bg-card);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-search-btn:hover {
    background: var(--danger);
    color: white;
}

/* Suggestions dropdown */
.team-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: none;
    border-radius: 12px;
    margin-top: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: var(--shadow-lg);
    display: none;
}

.team-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: none;
}

.team-suggestion-item:last-child {
    border-bottom: none;
}

.team-suggestion-item:hover {
    background: var(--bg-card-hover);
}

.suggestion-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.suggestion-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.suggestion-initials {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.suggestion-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.suggestion-arrow {
    color: var(--text-muted);
    font-size: 12px;
}

.suggestion-loading {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.no-suggestions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.no-suggestions i {
    font-size: 24px;
    opacity: 0.5;
}

.no-suggestions.error {
    color: var(--danger);
}

/* Selected team display */
.selected-team-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary);
    border-radius: 12px;
    padding: 16px 20px;
    max-width: 500px;
    margin: 0 auto;
}

.selected-team-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.selected-team-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.selected-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.selected-team-logo .team-initials {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.selected-team-name {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.change-team-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.change-team-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Team matchs section */
.team-matchs-section {
    padding: 20px 16px;
}

.team-matchs-header {
    margin-bottom: 16px;
}

.team-matchs-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-matchs-header h3 i {
    color: var(--primary);
}

/* Initial message */
.initial-search-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 20px;
    text-align: center;
}

.initial-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border: 2px dashed var(--border-color);
}

.initial-icon i {
    font-size: 28px;
    color: var(--primary);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.initial-search-message p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.initial-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 480px) {
    .team-search-header h2 {
        font-size: 16px;
    }

    .selected-team-display {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .selected-team-info {
        flex-direction: column;
    }

    .selected-team-name {
        font-size: 16px;
    }
}

/* ========================================
   TEAM LOGOS - Global Styles
======================================== */

/* Logo large pour page detail match */
.team-logo-large {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
    border: 2px solid var(--border-color);
}

.team-logo-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.team-initials-large {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Logo mini pour cartes matchs */
.team-logo-mini {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 8px;
}

.team-logo-mini img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.team-initials-mini {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Ajustement match-team pour inclure le logo */
.match-team {
    display: flex;
    align-items: center;
}

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

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

.match-team.home .team-logo-mini {
    order: 1;
    margin-right: 0;
    margin-left: 8px;
}

/* Ajustement match-detail-team pour centrer avec logo */
.match-detail-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Responsive logos */
@media (max-width: 480px) {
    .team-logo-large {
        width: 48px;
        height: 48px;
    }

    .team-initials-large {
        font-size: 16px;
    }

    .team-logo-mini {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .team-initials-mini {
        font-size: 9px;
    }
}

/* ========================================
   TEAM LOGOS - Sections Analyse
======================================== */

/* Logos dans sections secteur/notation */
.sector-team-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.sector-team-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--border-color);
}

.sector-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.sector-team-initials {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Logos dans sections forme recente */
.form-team-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.form-team-logo {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.form-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.form-team-initials {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Logo dans stake cards (motivation) */
.stake-icon-app img.stake-team-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
}

/* Responsive logos analyse */
@media (max-width: 480px) {
    .sector-team-logo {
        width: 32px;
        height: 32px;
    }

    .sector-team-initials {
        font-size: 12px;
    }

    .form-team-logo {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .form-team-initials {
        font-size: 10px;
    }
}

/* ========================================
   MODULE FLASH - Score Exact Géolocalisé
======================================== */

/* Bannière info Flash */
.flash-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    margin: 0 16px 16px;
}

.flash-banner-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #818CF8;
    font-size: 20px;
}

.flash-banner-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.flash-banner-content p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Statut géolocalisation */
.geoloc-status {
    margin: 0 16px 16px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
}

.geoloc-status-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.geoloc-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.geoloc-icon.active {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success-light);
}

.geoloc-icon.inactive {
    background: rgba(218, 54, 51, 0.15);
    color: var(--danger);
}

.geoloc-icon.loading {
    background: rgba(210, 153, 34, 0.15);
    color: var(--warning);
}

.geoloc-text h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.geoloc-text p {
    font-size: 12px;
    color: var(--text-secondary);
}

.btn-geoloc {
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background var(--transition);
}

.btn-geoloc:active {
    background: var(--primary-dark);
}

.btn-geoloc:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Liste des Flashs */
.flash-list {
    padding: 0 16px 16px;
}

.flash-card {
    background: var(--bg-card);
    border: none;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.flash-card:active {
    transform: scale(0.98);
}

.flash-card.participated {
    opacity: 0.7;
}

.flash-card-header {
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: none;
}

.flash-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #818CF8;
    font-size: 20px;
}

.flash-info {
    flex: 1;
    min-width: 0;
}

.flash-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flash-etablissement {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.flash-etablissement i {
    color: var(--text-muted);
}

.flash-distance {
    text-align: right;
}

.flash-distance span {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(88, 166, 255, 0.15);
    color: var(--info);
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
}

/* Match dans card Flash */
.flash-match {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-darker);
}

.flash-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.flash-team img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--bg-input);
    padding: 4px;
}

.flash-team span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
}

.flash-vs {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: 6px;
}

/* Footer card Flash */
.flash-footer {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.flash-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--text-secondary);
}

.flash-stats i {
    color: var(--text-muted);
    margin-right: 4px;
}

.flash-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--warning);
    display: flex;
    align-items: center;
    gap: 4px;
}

.flash-time.urgent {
    color: var(--danger);
    animation: pulse 1.5s ease-in-out infinite;
}

.flash-time i {
    font-size: 10px;
}

/* Badge participation */
.flash-participated-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--success);
    color: white;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Filtres Flash En cours / Terminés */
.flash-filter-tabs {
    display: flex;
    gap: 10px;
    padding: 0 16px 12px;
}

.flash-filter-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.flash-filter-btn.active {
    background: var(--accent);
    color: white;
    border-color: transparent;
}

.flash-filter-btn i {
    font-size: 14px;
}

/* Flash card terminé */
.flash-card.termine {
    border-color: rgba(107, 114, 128, 0.3);
}

.flash-icon.termine {
    background: #6b7280;
}

/* Score final dans la card */
.flash-score-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.flash-score-final .score-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.flash-score-final .score-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Mon score prédit dans la card */
.flash-my-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(99, 102, 241, 0.1);
    border-top: none;
}

.flash-my-score .my-score-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.flash-my-score .my-score-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-light);
}

.flash-my-score .my-score-points {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(107, 114, 128, 0.2);
    color: var(--text-muted);
}

.flash-my-score .my-score-points.has-points {
    background: var(--success);
    color: white;
}

/* Badge terminé */
.flash-status-badge.termine {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(107, 114, 128, 0.2);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Classement - Score réel du match */
.flash-score-reel-box {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
}

.flash-score-reel-box .score-reel-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.flash-score-reel-box .score-reel-value {
    font-size: 32px;
    font-weight: 700;
    color: #22c55e;
}

/* Info règles classement */
.flash-classement-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.flash-classement-info i {
    color: #F59E0B;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Légende classement */
.flash-classement-legend {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--text-muted);
}

/* Item sans points */
.flash-classement-item.no-points {
    opacity: 0.6;
}

.flash-classement-no-gain {
    font-size: 10px;
    color: #ef4444;
    margin-top: 4px;
}

.flash-classement-no-gain i {
    margin-right: 4px;
}

/* Points avec couleur */
.flash-classement-points.has-points .flash-classement-points-value {
    color: #22c55e;
}

/* Page détail Flash */
.flash-detail-card {
    margin: 0 16px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    border: none;
    overflow: hidden;
}

.flash-detail-card .btn-outline {
    margin-top: 16px;
    padding: 14px 24px;
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    color: #F59E0B;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    width: 100%;
}

.flash-detail-card .btn-outline:active {
    background: rgba(245, 158, 11, 0.2);
    transform: scale(0.98);
}

.flash-match-detail {
    padding: 20px;
    text-align: center;
}

.flash-match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
}

.flash-match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 120px;
}

.flash-match-team img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--bg-input);
    padding: 8px;
    border: 2px solid var(--border-color);
}

.flash-match-team span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
}

.flash-match-vs {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 8px;
}

/* Score final du match dans le détail */
.flash-match-score-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
}

.flash-match-score-final .score-final-value {
    font-size: 28px;
    font-weight: 800;
    color: #22c55e;
    letter-spacing: 2px;
}

.flash-match-score-final .score-final-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

.flash-match-info {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.match-termine-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(107, 114, 128, 0.2);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Établissement dans détail */
.flash-etablissement-detail {
    padding: 14px 16px;
    background: var(--bg-darker);
    border-radius: 10px;
    margin: 0 20px 20px;
}

.flash-etablissement-detail h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.flash-etablissement-detail p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.flash-etablissement-detail p i {
    width: 16px;
    color: var(--text-muted);
}

/* Lots à gagner */
.flash-lots {
    padding: 0 20px 20px;
}

.flash-lots h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.flash-lots h4 i {
    color: #F59E0B;
}

.flash-lot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 8px;
}

.flash-lot-rank {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.flash-lot-rank.gold {
    background: var(--accent);
    color: #000;
}

.flash-lot-rank.silver {
    background: #C0C0C0;
    color: #000;
}

.flash-lot-rank.bronze {
    background: #CD7F32;
    color: white;
}

.flash-lot-desc {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Formulaire participation */
.flash-participate-form {
    padding: 20px;
    background: var(--bg-darker);
    border-radius: 10px;
    margin: 0 20px 20px;
}

.flash-participate-form h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-align: center;
}

.flash-score-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.flash-score-input {
    text-align: center;
}

.flash-score-input label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.flash-score-input input {
    width: 70px;
    height: 70px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: border-color var(--transition);
}

.flash-score-input input:focus {
    outline: none;
}

.flash-score-separator {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 20px;
}

/* Statut Flash */
.flash-status-card {
    padding: 16px 20px;
    background: var(--bg-input);
    border-radius: 10px;
    margin: 0 20px 20px;
    text-align: center;
}

.flash-status-card i {
    font-size: 32px;
    margin-bottom: 8px;
}

.flash-status-card.termine {
    background: rgba(88, 166, 255, 0.1);
    color: var(--info);
}

.flash-status-card.ferme {
    background: rgba(210, 153, 34, 0.1);
    color: var(--warning);
}

.flash-status-card.annule {
    background: rgba(218, 54, 51, 0.1);
    color: var(--danger);
}

.flash-status-card h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.flash-status-card p {
    font-size: 13px;
    opacity: 0.8;
}

/* Modal classement Flash */
.flash-classement-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    animation: fadeIn 0.2s ease;
}

.flash-classement-content {
    background: var(--bg-dark);
    width: 100%;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.flash-classement-header {
    padding: 20px;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
}

.flash-classement-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.flash-classement-header button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background var(--transition);
}

.flash-classement-header button:active {
    background: var(--bg-input);
}

.flash-classement-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.flash-classement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 10px;
    margin-bottom: 8px;
    border: none;
}

.flash-classement-item.me {
    background: rgba(0, 161, 230, 0.1);
}

.flash-classement-item.winner {
    background: rgba(34, 197, 94, 0.1);
}

.flash-classement-rank {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    background: var(--bg-input);
    color: var(--text-primary);
}

.flash-classement-rank.gold {
    background: var(--accent);
    color: #000;
}

.flash-classement-rank.silver {
    background: #C0C0C0;
    color: #000;
}

.flash-classement-rank.bronze {
    background: #CD7F32;
    color: white;
}

.flash-classement-user {
    flex: 1;
    min-width: 0;
}

.flash-classement-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.flash-classement-pronostic {
    font-size: 12px;
    color: var(--text-secondary);
}

.flash-classement-points {
    text-align: right;
}

.flash-classement-points-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    display: block;
}

.flash-classement-points-label {
    font-size: 11px;
    color: var(--text-muted);
}

.flash-classement-lot {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Empty state Flash */
.flash-empty {
    text-align: center;
    padding: 40px 20px;
}

.flash-empty i {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
    display: block;
}

.flash-empty h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.flash-empty p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Loading state Flash */
.flash-loading {
    text-align: center;
    padding: 40px 20px;
}

.flash-loading i {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 16px;
    animation: spin 1s linear infinite;
}

.flash-loading p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Responsive Flash */
@media (max-width: 380px) {
    .flash-match-team {
        max-width: 100px;
    }

    .flash-match-team img {
        width: 48px;
        height: 48px;
    }

    .flash-score-input input {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
}

/* ========================================
   PROFILER V2 - NOUVEAU DESIGN
======================================== */
.profiler-match-card-v2 {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.profiler-match-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 161, 230, 0.15);
}

/* Header */
.profiler-card-header {
    margin-bottom: 16px;
}

.match-teams-v2 {
    margin-bottom: 12px;
}

.team-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.team-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.team-form {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(139, 148, 158, 0.1);
    color: var(--text-secondary);
    font-family: monospace;
    letter-spacing: 2px;
}

.team-form.good {
    background: rgba(46, 160, 67, 0.1);
    color: var(--success-light);
}

.team-form.bad {
    background: rgba(218, 54, 51, 0.1);
    color: var(--danger);
}

.vs-separator {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 0;
}

.match-info-v2 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.competition-badge,
.date-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(88, 166, 255, 0.1);
    color: var(--info);
    display: flex;
    align-items: center;
    gap: 4px;
}

.date-badge {
    background: rgba(139, 148, 158, 0.1);
    color: var(--text-secondary);
}

/* Cotes Row */
.profiler-odds-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.odd-item {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.odd-item.favori {
    background: rgba(0, 161, 230, 0.05);
}

.odd-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.odd-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2px;
}

.odd-prob {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Stats Grid */
.profiler-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.stat-box {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-box i {
    font-size: 18px;
    color: var(--primary);
}

.stat-content {
    flex: 1;
}

.stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.stat-values {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: monospace;
}

/* Recommandation IA */
.profiler-recommendation {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
    border: 2px solid transparent;
}

.profiler-recommendation.excellent {
    background: rgba(46, 160, 67, 0.08);
}

.profiler-recommendation.good {
    background: rgba(0, 161, 230, 0.08);
}

.profiler-recommendation.fair {
    background: rgba(210, 153, 34, 0.08);
}

.reco-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.reco-header i {
    color: #F59E0B;
}

.reco-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.reco-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.reco-pari {
    flex: 1;
}

.reco-type {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.reco-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0, 161, 230, 0.15);
    color: var(--primary);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.reco-stats {
    display: flex;
    gap: 12px;
}

.reco-stat {
    text-align: center;
}

.reco-stat-label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.reco-stat-value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.reco-stat.highlight .reco-stat-value {
    color: var(--success-light);
    font-size: 16px;
}

/* Footer */
.profiler-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: none;
}

.footer-badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(139, 148, 158, 0.1);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.footer-badge.cache {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.card-arrow {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
}



/* Score probable - petit et discret dans l'analyse */
.pred-score-probable {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 0;
    font-size: 11px;
    opacity: 0.8;
}

.pred-score-label {
    color: var(--text-muted);
    font-weight: 500;
}

.pred-score-value {
    color: #ffcc00;
    font-weight: 700;
    font-size: 12px;
}
/* STATS ATTENDUES - Prévisions IA */
.profiler-expected-stats {
    margin: 15px 0;
    padding: 12px;
    background: rgba(0, 161, 230, 0.04);
    border-radius: 8px;
}

.expected-title {
    font-size: 13px;
    font-weight: 700;
    color: #3498db;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.expected-title i {
    font-size: 14px;
}

.expected-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.expected-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.expected-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.expected-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.expected-value.highlight {
    color: #3498db;
    font-size: 18px;
}

/* Style pour paris intelligents */
.profiler-recommendation .reco-pari .reco-type {
    font-size: 15px;
    font-weight: 700;
}

.profiler-recommendation .reco-pari .reco-type::before {
    content: '⚡ ';
    color: #f39c12;
}

/* =====================================================
   PRO REQUIRED MESSAGE - Acces reserve aux membres PRO
   ===================================================== */
.pro-required-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    min-height: 50vh;
}

.pro-required-message .pro-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.pro-required-message .pro-icon i {
    font-size: 36px;
    color: #fff;
}

.pro-required-message h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.pro-required-message p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
    max-width: 320px;
}

.pro-required-message p strong {
    color: var(--accent);
}

.btn-upgrade-pro {
    margin-top: 20px;
    padding: 14px 32px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-upgrade-pro:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
}

.btn-upgrade-pro i {
    font-size: 18px;
}

/* =====================================================
   PWA INSTALL BANNER
   ===================================================== */
#pwa-install-banner {
    position: fixed;
    bottom: 90px;
    left: 12px;
    right: 12px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

#pwa-install-banner.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.pwa-install-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #0a1f38;
    border: 2px solid var(--primary);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 212, 170, 0.3);
}

.pwa-install-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-install-icon img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.pwa-install-text {
    flex: 1;
    min-width: 0;
}

.pwa-install-text strong {
    display: block;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 2px;
    font-weight: 600;
}

.pwa-install-text span {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.3;
}

.pwa-install-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pwa-install-btn {
    padding: 10px 14px;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    white-space: nowrap;
}

.pwa-install-btn:hover {
    background: #00f5c4;
    transform: scale(1.02);
}

.pwa-install-btn:active {
    transform: scale(0.98);
}

.pwa-install-close {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
}

.pwa-install-close:hover {
    background: var(--danger);
    color: white;
}

@media (max-width: 380px) {
    #pwa-install-banner {
        left: 8px;
        right: 8px;
        bottom: 85px;
    }
    .pwa-install-content {
        padding: 12px;
        gap: 10px;
    }
    .pwa-install-icon {
        width: 40px;
        height: 40px;
    }
    .pwa-install-icon img {
        width: 32px;
        height: 32px;
    }
    .pwa-install-text strong {
        font-size: 13px;
    }
    .pwa-install-text span {
        font-size: 10px;
    }
    .pwa-install-btn {
        padding: 8px 12px;
        font-size: 11px;
    }
}

/* ==========================================
   TOP EVENTS - Carousel & Page
========================================== */

/* Section Top Events sur Dashboard */
.top-events-section {
    margin: 20px 0;
    padding: 0 16px;
}

.top-events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.top-events-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.top-events-title i {
    color: var(--accent);
}

.btn-see-all {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-see-all:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Carousel horizontal */
.top-events-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
}

.top-events-carousel::-webkit-scrollbar {
    display: none;
}

.top-events-loading,
.top-events-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 140px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Carte Top Event (carousel) */
.top-event-card {
    flex: 0 0 auto;
    width: 160px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    scroll-snap-align: start;
    border: 1px solid var(--border-color);
}

.top-event-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 161, 230, 0.15);
}

.top-event-competition {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-event-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.top-event-team {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.top-event-team img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.top-event-initials {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.top-event-vs {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
}

.top-event-names {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 8px;
}

.top-event-name {
    flex: 1;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-event-name.home {
    text-align: left;
}

.top-event-name.away {
    text-align: right;
}

.top-event-datetime {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.top-event-day,
.top-event-time {
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
}

/* ==========================================
   TOP EVENTS PAGE (Liste verticale)
========================================== */

.top-events-page {
    padding: 16px;
}

.top-events-page-header {
    margin-bottom: 16px;
}

.top-events-page-header p {
    font-size: 14px;
    color: var(--text-secondary);
}

.top-events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-events-date-group {
    margin-bottom: 16px;
}

.top-events-date-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-transform: capitalize;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(0, 161, 230, 0.1);
    border-radius: 8px;
}

.top-events-date-matches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Carte match format liste - Nouveau design avec cotes */
.top-event-list-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border-color);
}

.top-event-list-card:hover {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

/* Header: competition + heure */
.top-event-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-event-list-competition {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.top-event-list-time {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
}

/* Equipes */
.top-event-list-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.top-event-list-team {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.top-event-list-team:last-child {
    justify-content: flex-end;
}

.top-event-list-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.top-event-list-logo img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.top-event-list-initials {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

.top-event-list-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-event-list-vs {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0 6px;
    flex-shrink: 0;
}

/* Cotes - Style orange/or avec texte noir */
.top-event-list-odds {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.top-event-odd {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 6px;
    min-width: auto;
}

.top-event-odd .odd-label {
    font-size: 10px;
    font-weight: 700;
    color: #000;
}

.top-event-odd .odd-value {
    font-size: 12px;
    font-weight: 700;
    color: #000;
}

.top-event-list-card:hover .top-event-list-arrow {
    color: var(--primary);
}