/* ============================================================
   DOSSARD — Styles (CSP-safe, aucun inline)
   ============================================================ */

.dossard-wrapper {
    font-family: 'Inter', sans-serif;
    background-color: #f4f7f6;
    color: #333;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
}

.blue-header-zone {
    background: linear-gradient(135deg, #2c3e50, #3498db);
    color: white;
    width: 100%;
    padding: 60px 20px;
    text-align: center;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    margin-bottom: 0;
}
.blue-header-zone h1 { margin: 0; font-size: 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.search-container {
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
    margin-top: -30px;
    position: relative;
    z-index: 10;
}

.search-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #eee;
}

.card-body-content { padding: 30px; }
.search-header { text-align: center; margin-bottom: 25px; }
.search-header p { color: #7f8c8d; margin: 0; font-size: 0.95em; }

/* Select2 override */
.select2-container--default .select2-selection--single {
    height: 50px; padding: 10px; border: 2px solid #e0e0e0;
    border-radius: 10px; text-align: left; background-color: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px; font-size: 1em; font-weight: 500; color: #333; padding-left: 5px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; right: 10px; }
.select2-container--default.select2-container--open .select2-selection--single { border-color: #3498db; }

/* Remplace style="width:100%" sur le select */
.search-form select { width: 100%; }

.result-box {
    margin-top: 20px; padding: 20px;
    background: #e8f4f8; border-radius: 10px; color: #2c3e50;
    display: none; text-align: center; font-size: 1.1em;
    border-left: 5px solid #3498db;
}
.result-box strong { font-size: 1.4em; color: #2c3e50; }

#matchsContainer {
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
    margin-top: 20px;
    display: none;
}

/* Remplace style="display:none;" sur matchLoader */
#matchLoader { display: none; }
.match-loader { text-align: center; padding: 20px; color: #7f8c8d; font-size: 0.9em; }
.match-spinner {
    width: 30px; height: 30px; border: 3px solid #eee;
    border-top-color: #3498db; border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════ CARTE RÉSUMÉ GLOBAL ═══════ */
.global-summary {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}
.summary-card {
    flex: 1;
    background: white;
    padding: 15px 10px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}
.summary-label { font-size: 0.75em; color: #7f8c8d; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
.summary-value { font-size: 1.8em; font-weight: 800; margin: 5px 0 0; }
.summary-value.total { color: #2c3e50; }
.summary-value.vic { color: #27ae60; }
.summary-value.def { color: #95a5a6; }

/* ═══════ CARTE TABLEAU ═══════ */
.match-tableau-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}
.match-tableau-header {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    padding: 12px 15px;
    font-weight: 700;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.match-tableau-header i { color: #3498db; }

.match-poule-block {
    padding: 15px;
    border-bottom: 1px solid #f1f1f1;
}
.match-poule-block:last-child { border-bottom: none; }
.match-poule-title {
    font-size: 0.8em;
    font-weight: 700;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* ═══════ DESIGN TABLEAU MATCHS ═══════ */
.match-table { width:100%; border-collapse:collapse; margin-bottom:0; background:white; }
.match-table td { padding:10px 5px; border-bottom:1px solid #f4f4f4; vertical-align:middle; }
.match-table tr:last-child td { border-bottom:none; }
.match-table tr:hover { background-color:#f9f9f9; }

.p-left { text-align:right; font-weight:700; padding-right:8px; white-space:normal; word-wrap:break-word; overflow-wrap:break-word; font-size:0.85em; }
.p-vs { text-align:center; color:#bdc3c7; font-weight:600; width:25px; font-size:0.75em; }
.p-right { text-align:left; color:#95a5a6; padding-left:8px; white-space:normal; word-wrap:break-word; overflow-wrap:break-word; font-size:0.85em; }

.player-name { color: #3498db; text-decoration: underline; text-decoration-color: rgba(52, 152, 219, 0.3); text-underline-offset: 3px; }

.badge-v { background-color:#27ae60; color:white; padding:3px 7px; border-radius:4px; font-weight:800; font-size:0.7em; margin-left:5px; white-space:nowrap; }
.badge-d { background-color:#e0e0e0; color:#7f8c8d; padding:3px 7px; border-radius:4px; font-weight:800; font-size:0.7em; margin-left:5px; white-space:nowrap; }

.badge-pts {
    background-color:#f0f3f5; color:#2c3e50; padding:2px 6px; border-radius:4px; font-weight:800;
    font-size:0.72em; margin-left:3px; white-space:nowrap; border: 1px solid #dcdde1;
}

.no-match-msg {
    background: white; padding: 20px; border-radius: 12px;
    text-align: center; color: #95a5a6; font-size: 0.9em;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #e0e0e0;
}
.no-match-msg i { font-size: 2em; display: block; margin-bottom: 10px; color: #dcdde1; }

/* Remplace style="color:#e74c3c;" sur l'icone erreur */
.error-icon { color: #e74c3c; }

/* ═══════ RESPONSIVE MOBILE ═══════ */
@media (max-width: 768px) {
    .blue-header-zone { padding: 40px 15px; }
    .blue-header-zone h1 { font-size: 1.5rem; }
    .search-container { margin-top: -15px; }
    .card-body-content { padding: 20px; }
    .summary-value { font-size: 1.4em; }
    .match-table td { font-size: 0.78em; padding: 8px 3px; }
}
@media (max-width: 400px) {
    .match-table td { font-size: 0.72em; padding: 6px 2px; word-break: break-all; }
    .badge-pts { font-size: 0.65em; padding: 1px 4px; }
}