/** Styles pour la page des transferts et rumeurs
 */

/* ========== PAGE HEADER ========== */
.page-header {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    margin-bottom: 3rem;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: visible;
    animation: headerSlideIn 0.8s ease-out;
}

@keyframes headerSlideIn {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(0,212,255,0.13) 0%, transparent 70%),
    radial-gradient(circle at 80% 70%, rgba(139,92,246,0.10) 0%, transparent 60%);
    animation: backgroundFloat 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}



.page-title-section {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 3;
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 1rem 0;
    background: var(--karmine-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.title-icon {
    font-size: 2rem;
    background: none;
    -webkit-text-fill-color: initial;
    animation: transferIcon 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(0,212,255,0.55));
}

@keyframes transferIcon {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.page-title::after {
    content: '';
    position: absolute;
    bottom: -8px; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 4px;
    background: var(--karmine-gradient);
    border-radius: 2px;
    animation: underlineExpand 2s ease-in-out infinite alternate;
}

@keyframes underlineExpand {
    0% { width: 60px; opacity: 0.7; }
    100% { width: 120px; opacity: 1; }
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* ========== STATISTIQUES RAPIDES ========== */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-bounce);
}

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--karmine-gradient);
    opacity: 0.05;
    border-radius: var(--radius-lg);
    transition: opacity var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.2);
}

.stat-card:hover::before {
    opacity: 0.1;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--karmine-blue);
    line-height: 1;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    animation: numberPulse 3s ease-in-out infinite;
}

@keyframes numberPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-top: 0.5rem;
    position: relative;
    z-index: 2;
    text-align: center;
}

/* ========== CONTROLES ET FILTRES ========== */
.controls-section {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    padding: 2rem;
    border-radius: var(--radius-xl);
    margin-bottom: 2rem;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
    animation: controlsSlideIn 0.6s ease-out;
}

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

.controls-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.search-container {
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
}

.search-icon {
    position: absolute;
    left: 1.25rem;
    font-size: 1.1rem;
    color: var(--text-secondary);
    z-index: 2;
}

#search-input {
    width: 100%;
    padding: 1rem 1.25rem 1rem 3rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    transition: all var(--transition-normal);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

#search-input::placeholder {
    color: var(--text-secondary);
    font-style: italic;
}

#search-input:focus {
    outline: none;
    border-color: var(--karmine-blue);
    background: var(--background);
    box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.1),
            0 0 0 3px rgba(0, 212, 255, 0.15),
            0 4px 20px rgba(0, 212, 255, 0.2);
    transform: translateY(-1px);
}

.clear-btn {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    z-index: 2;
}

.clear-btn:hover {
    color: var(--accent-red);
    background: rgba(255, 71, 87, 0.1);
    transform: scale(1.1);
}

.filters-container {
    display: flex;
    gap: 2rem;
    align-items: end;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 140px;
}

.filter-group label {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    padding-left: 1.5rem;
}

.filter-group label::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--karmine-blue);
    font-size: 0.8rem;
    animation: labelPulse 2s ease-in-out infinite;
}

@keyframes labelPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.filter-select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    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='%23B0BEC5' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

.filter-select:focus {
    outline: none;
    border-color: var(--karmine-blue);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

.filter-select:hover {
    border-color: var(--karmine-blue);
    transform: translateY(-1px);
}

.reset-filters-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--glass-bg);
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-weight: 600;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}

.reset-filters-btn:hover {
    border-color: var(--accent-red);
    background: rgba(255, 71, 87, 0.1);
    color: var(--accent-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.2);
}

/* ========== LISTE DES TRANSFERTS ========== */
.transferts-container {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    position: relative;
    animation: transfertsSlideIn 0.8s ease-out;
}

@keyframes transfertsSlideIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.transferts-header {
    display: grid;
    grid-template-columns: 2fr 2.5fr 1fr 1fr 1.5fr;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: var(--dark-tertiary);
    border-bottom: 2px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-cell {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-cell::before {
    content: '▲';
    font-size: 0.8rem;
    color: var(--karmine-blue);
    animation: headerPulse 2s ease-in-out infinite;
}

@keyframes headerPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.transferts-list {
    min-height: 400px;
}

.transfer-item {
    display: grid;
    grid-template-columns: 2fr 2.5fr 1fr 1fr 1.5fr;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--glass-border);
    transition: all var(--transition-normal);
    position: relative;
    animation: transferItemSlide 0.6s ease-out forwards;
    opacity: 0;
}

@keyframes transferItemSlide {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

.transfer-item:nth-child(1) { animation-delay: 0.1s; }
.transfer-item:nth-child(2) { animation-delay: 0.2s; }
.transfer-item:nth-child(3) { animation-delay: 0.3s; }
.transfer-item:nth-child(4) { animation-delay: 0.4s; }
.transfer-item:nth-child(5) { animation-delay: 0.5s; }

.transfer-item:hover {
    background: rgba(0, 212, 255, 0.05);
    transform: translateX(8px);
    box-shadow: inset 4px 0 0 var(--karmine-blue);
}

.transfer-item.karmine-transfer {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), transparent);
    border-left: 4px solid var(--karmine-blue);
}

.transfer-item.karmine-transfer:hover {
    background: rgba(0, 212, 255, 0.12);
    box-shadow: inset 8px 0 0 var(--karmine-blue);
}

.transfer-cell {
    display: flex;
    align-items: center;
    color: var(--text-primary);
}

/* Colonne Joueur */
.player-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--karmine-blue);
    transition: all var(--transition-normal);
}

.player-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}

.player-details {
    flex: 1;
}

.player-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.player-role {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    background: var(--dark-tertiary);
    border-radius: var(--radius-sm);
}

/* Colonne Mouvement */
.movement-cell {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.movement-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

.from-team, .to-team {
    font-weight: 500;
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    background: var(--dark-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    flex: 1;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movement-arrow {
    color: var(--karmine-blue);
    font-size: 1.2rem;
    font-weight: 700;
    animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

.transfer-type {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    background: var(--glass-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

/* Colonne Date */
.date-cell {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Colonne Statut */
.status-cell {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.status-confirmed {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.status-rumor {
    background: linear-gradient(135deg, var(--accent-gold), #ffc107);
    color: #000;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.status-pending {
    background: linear-gradient(135deg, var(--karmine-blue), var(--karmine-dark));
    color: white;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

.status-denied {
    background: linear-gradient(135deg, var(--accent-red), #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.status-icon {
    font-size: 1rem;
    animation: statusIconFloat 3s ease-in-out infinite;
}

@keyframes statusIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.reliability-score {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    background: var(--dark-tertiary);
    border-radius: var(--radius-sm);
}

/* Colonne Détails */
.details-cell {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.sources-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--karmine-blue);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
}

.sources-link:hover {
    background: var(--karmine-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.contract-duration {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    background: var(--dark-tertiary);
    border-radius: var(--radius-sm);
}

.no-details {
    color: var(--text-muted);
    font-style: italic;
}

/* ========== NO RESULTS ========== */
.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-secondary);
    border-top: 1px solid var(--glass-border);
}

.no-results-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.6;
    animation: sadIcon 3s ease-in-out infinite;
}

@keyframes sadIcon {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-5deg); }
}

.no-results h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.no-results p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* ========== LOAD MORE ========== */
.load-more-container {
    padding: 2rem;
    text-align: center;
    border-top: 1px solid var(--glass-border);
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--karmine-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.load-more-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.load-more-btn:hover::after {
    transform: translateX(100%);
}

.load-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.5);
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.load-more-spinner {
    font-size: 1.2rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1200px) {
    .transferts-header,
    .transfer-item {
        grid-template-columns: 1.5fr 2fr 1fr 1fr 1fr;
        gap: 0.75rem;
    }

    .page-header {
        padding: 2rem;
    }

    .controls-section {
        padding: 1.5rem;
    }
}

@media (max-width: 968px) {
    .quick-stats {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .filters-container {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .filter-group {
        min-width: auto;
    }

    .transferts-header,
    .transfer-item {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: left;
    }

    .transferts-header {
        display: none; /* Cache l'en-tête sur mobile */
    }

    .transfer-item {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .transfer-cell {
        justify-content: flex-start;
    }

    .player-info {
        justify-content: flex-start;
    }

    .movement-container {
        justify-content: flex-start;
    }

    .status-cell,
    .details-cell {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .page-header {
        padding: 1.5rem;
    }

    .page-title {
        font-size: 2rem;
    }

    .quick-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .controls-section {
        padding: 1rem;
    }

    .search-box {
        max-width: none;
    }

    .filters-container {
        gap: 0.75rem;
    }

    .transferts-list {
        min-height: 300px;
    }

    .player-avatar {
        width: 35px;
        height: 35px;
    }

    .load-more-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 1.25rem;
    }

    .page-title {
        font-size: 1.75rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .stat-card {
        padding: 0.75rem;
    }

    .stat-number {
        font-size: 1.75rem;
    }

    .transfer-item {
        padding: 1rem;
    }

    .movement-container {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    .movement-arrow {
        transform: rotate(90deg);
    }

    .from-team,
    .to-team {
        text-align: center;
    }
}

/* ========== ANIMATIONS RÉDUITES ========== */
@media (prefers-reduced-motion: reduce) {
    .page-header,
    .transfer-item,
    .stat-card,
    .load-more-btn,
    .status-badge,
    .title-icon,
    .movement-arrow {
        animation: none;
    }

    .transfer-item:hover,
    .stat-card:hover,
    .load-more-btn:hover {
        transform: none;
    }
}
.reliability-badge {
    background: var(--karmine-blue);
    color: #fff;
    border-radius: 8px;
    padding: 0.12em 0.45em;
    font-size: 0.78em;
    margin-left: 0.5em;
    font-weight: 600;
}


/* ========== UTILITAIRES ========== */
.karmine-highlight {
    color: var(--karmine-blue) !important;
    font-weight: 700;
}

.text-highlight {
    background: rgba(0, 212, 255, 0.2);
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


/***** SECTION ROSTERPREDI (Lineup Prévisionnelle KC) *****/

.rosterpredi-container {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
    margin: 3rem 0 2.5rem 0;
    padding: 2.5rem 1.5rem;
    position: relative;
    overflow: hidden;
    animation: fadeIn 1s cubic-bezier(.4,.38,.21,1);
}

.rosterpredi-header {
    text-align: center;
    margin-bottom: 1.6rem;
}

.rosterpredi-header .section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--karmine-blue);
    background: var(--karmine-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeIn 1.1s cubic-bezier(.47,1.64,.41,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
}

.rosterpredi-header .section-title .title-icon {
    font-size: 1.8em;
    filter: drop-shadow(0 0 12px rgba(0,212,255,0.2));
}

.rosterpredi-header .section-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-top: 0.3em;
    margin-bottom: 0.5em;
}

.rosterpredi-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--karmine-blue);
    padding: 2.5rem 0;
    font-size: 1.1rem;
    z-index: 2;
}

.rosterpredi-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 1.25rem;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 2rem;
    min-height: 240px;
}

.rosterpredi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 30px rgba(0,212,255,0.08);
    padding: 1.8rem 1.2rem 1.25rem 1.2rem;
    min-width: 200px;
    max-width: 260px;
    transition: all var(--transition-bounce);
    position: relative;
    overflow: hidden;
    z-index: 2;
    animation: fadeIn 0.6s cubic-bezier(.46,.95,.36,1.1);
}

.rosterpredi-card.status-confirmed { border-left: 5px solid #28a745; }
.rosterpredi-card.status-strong    { border-left: 5px solid #ffc107; }
.rosterpredi-card.status-possible  { border-left: 5px solid #8883e0; }
.rosterpredi-card.status-free      { border-left: 5px solid #17e17b; }
.rosterpredi-card.status-pending   { border-left: 5px solid #009cf5; }
.rosterpredi-card.status-unknown   { border-left: 5px solid #b6b6b6; }

.rosterpredi-avatar {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--karmine-blue);
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(0,212,255,0.13);
    background: #101929;
    transition: box-shadow 0.25s;
}
.rosterpredi-avatar:hover {
    box-shadow: 0 6px 30px rgba(0,212,255,0.23), 0 0 0 2px #17e6ff90;
}

.rosterpredi-info {
    text-align: center;
    flex: 1;
    width: 100%;
    margin-bottom: 1rem;
}

.rosterpredi-name {
    font-weight: 700;
    font-size: 1.22rem;
    letter-spacing: -0.03em;
    color: var(--karmine-blue);
    background: var(--karmine-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rosterpredi-role {
    margin: 0.22em 0 0.2em 0;
    font-size: 0.98em;
    color: var(--text-secondary);
    font-weight: 600;
}
.rosterpredi-slot {
    display: inline-block;
    margin-left: 0.4em;
    background: var(--karmine-gradient);
    color: white !important;
    border-radius: 8px;
    font-size: 0.93em;
    padding: 0.13em 0.75em;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.rosterpredi-status {
    margin: 0.7em 0;
}
.rosterpredi-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.97em;
    font-weight: 700;
    padding: 0.31em 1.13em;
    border-radius: 1em;
    box-shadow: 0 2px 12px rgba(0,212,255,0.09);
    background: var(--dark-tertiary);
    border: 1.5px solid #a0aec044;
}

/* color accent for badges */
.status-confirmed { background: linear-gradient(90deg,#17e17b30,#02eefa18); color:#045d18;}
.status-strong    { background: linear-gradient(90deg,#ffd74030,#ffbb001b); color:#a87d00;}
.status-possible  { background: linear-gradient(90deg,#8883e022,#5049b91f); color:#312a63;}
.status-free      { background: linear-gradient(90deg,#17e17b30,#022efd18); color:#157144;}
.status-pending   { background: linear-gradient(90deg,#009cf520,#cae4ff1b); color:#055a89;}
.status-unknown   { background: linear-gradient(90deg,#b6b6b630,#eeeefc18); color:#686868;}

.rosterpredi-probability span {
    font-weight: 700; color: var(--karmine-blue);
    background: var(--karmine-gradient-light);
    padding: 0.1em 0.6em;
    border-radius: 1.2em;
    margin-left: 0.3em;
}
.rosterpredi-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 0.7em;
    margin-top: 0.2em;
    justify-content: center;
}
.rosterpredi-source-link {
    text-decoration: none;
    color: var(--karmine-blue);
    font-weight: 600;
    font-size: 0.96em;
    padding: 0.16em 0.6em;
    border-radius: 12px;
    border: 1.5px solid #a0aec044;
    background: var(--glass-bg);
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    transition: all 0.15s;
}
.rosterpredi-source-link:hover {
    color: white;
    background: var(--karmine-blue);
    border-color: var(--karmine-blue);
}
.rosterpredi-source-icon {
    margin-right: 0.2em;
}

.rosterpredi-comment {
    background: var(--karmine-gradient-light);
    color: white;
    border-radius: 0.7em;
    font-size: 0.91em;
    padding: 0.38em 0.92em;
    margin: 0.7em 0 0 0;
    font-style: italic;
    opacity: 0.92;
    font-weight: 500;
}

/* Etat vide/no prediction */
.rosterpredi-container .no-results {
    padding: 3rem 1rem;
    font-size: 1.1em;
}

/* FOOTNOTE */
.rosterpredi-footnote {
    color: var(--text-secondary);
    font-size: 0.98em;
    padding-top: 0.6em;
    text-align: center;
    opacity: 0.8;
}
.rosterpredi-footnote .info-icon {
    font-size: 1em;
    margin-right: 0.3em;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 968px) {
    .rosterpredi-list {
        gap: 1.2rem 0.7rem;
    }
    .rosterpredi-card {
        min-width: 95vw; max-width: 100vw; padding: 1.25rem;
    }
}
@media (max-width: 640px) {
    .rosterpredi-list { flex-direction: column; gap: 1rem; }
    .rosterpredi-card { margin: 0 auto; min-width: 90vw; }
}

.lineup-table-container {
    max-width: 520px;  /* Augmente cette valeur pour un tableau plus large */
    min-width: 280px;  /* Tu peux aussi jouer dessus pour la compacité */
    width: 100%; /* Laisse couler si tu veux responsive/100% */
    margin-left: auto;
    margin-right: auto;
}

.lineup-table-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5em;
    font-weight: 800;
    color: var(--karmine-blue);
    margin-bottom: 1.3rem;
    letter-spacing: -0.02em;
}
.predi-disclaimer {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    color: var(--text-secondary, #7dcfff);
    font-size: 0.98em;
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
    background: rgba(38,76,110,0.11);
    padding: 0.7em 1em;
    border-radius: 8px;
}
.disclaimer-icon {
    font-size: 1.2em;
    margin-right: 0.2em;
    margin-top: 2px;
}

.kc-title-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    margin-right: 0.75em;
    vertical-align: middle;
    box-shadow: 0 2px 14px rgba(0,212,255,0.08);
    background: #101929;
    border: 2px solid var(--karmine-blue, #1ae0fc);
}

.lineup-team-logo {
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 2px solid var(--karmine-blue);
    background: #111d2c;
    object-fit: contain;
}

.lineup-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    /* background: rgba(17,35,64,0.92); si tu veux plus opaque */
}

.lineup-header, .lineup-row {
    display: flex;
    align-items: center;
    width: 100%;
}
.lineup-header {
    background: #1c244270;
    color: #6ebfff;
    font-weight: 700;
    font-size: 1em;
    border-bottom: 2px solid var(--glass-border);
    padding: 0.75em 0.3em;
}
.lineup-row {
    background: rgba(16,26,41,0.92);
    border-bottom: 1px solid #29426818;
    padding: 0.85em 0.3em;
    transition: background 0.17s;
}
.lineup-row:last-child { border-bottom: none; }
.lineup-row:hover {
    background: linear-gradient(90deg,#182c48 60%,#2b568c 100%);
}

.lineup-cell {
    flex: 1;
    text-align: left;
    padding: 0 0.3em;
    font-size: 1.07em;
}
.lineup-cell.role {
    flex: 0.8;
    color: #4394ff;
    font-weight: 700;
}
.lineup-cell.player {
    font-weight: 700;
    color: white;
}
.lineup-cell.status {
    flex: 0.9;
    font-size: 0.96em;
}
.lineup-cell.status.confirmed {
    color: #14dd8f;
    font-weight: 700;
}
.lineup-cell.status.rumor {
    color: #ffc107;
    font-weight: 700;
}
.lineup-cell.status.possible {
    color: #669ddb;
    font-weight: 700;
}
.lineup-cell.status.free {
    color: #14defc;
    font-weight: 700;
}
.lineup-cell.status.expiring {
    color: #ff675c;
    font-weight: 700;
}
.lineup-cell.status.unknown {
    color: #babbbb;
}
.lineup-cell.source {
    flex: 1;
    color: #6ec8d9;
    font-size: 0.97em;
}

@media (max-width: 600px) {
    .lineup-table-container { padding: 1rem 0.2rem; }
    .lineup-table-title { font-size: 1.2em; }
    .lineup-header, .lineup-row { font-size: 0.98em; }
}
.player-avatar-table {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 0.75em;
    border: 2px solid var(--karmine-blue, #1ae0fc);
    background: #101929;
    vertical-align: middle;
    display: inline-block;
}
.lineup-cell.player {
    display: flex;
    align-items: center;
    min-width: 110px;
    gap: 0.6em;
}