/* --- conteneur principal --- */
.odds-api-container{max-width:100%;margin:20px 0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#fff;border:1px solid #ddd;border-radius:8px;overflow:hidden}

/* header */
.odds-api-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:20px;text-align:center}
.odds-api-header h3{margin:0;font-size:1.5rem;font-weight:600}

/* étapes */
.odds-step{padding:25px;border-bottom:1px solid #eee}
.odds-step:last-child{border-bottom:none}
.odds-step h4{margin:0 0 20px 0;font-size:1.2rem;font-weight:600;color:#333}

/* chargement */
.odds-loading{text-align:center;padding:20px;color:#666;font-weight:500}

/* grilles de sports */
.sports-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;margin-top:20px}
.sport-card{background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:.3s;position:relative}
.sport-card:hover{border-color:#007cba;background:#e3f2fd;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.sport-card.selected{border-color:#28a745;background:#d4edda}
.sport-card h5{margin:0 0 8px 0;color:#333;font-weight:600}
.sport-card .sport-group{color:#666;font-size:.9rem;font-style:italic}

/* liste de rencontres */
.events-list{max-height:400px;overflow-y:auto;border:1px solid #ddd;border-radius:6px;margin:15px 0}
.event-item{display:flex;align-items:center;padding:15px;border-bottom:1px solid #eee;cursor:pointer;transition:background .3s}
.event-item:hover{background:#f8f9fa}
.event-item:last-child{border-bottom:none}
.event-checkbox{margin-right:15px;transform:scale(1.2)}
.event-details{flex:1}
.event-match{font-weight:600;color:#333;margin-bottom:5px}
.event-time{color:#666;font-size:.9rem}

/* info sport sélectionné */
.selected-sport-info{background:#e3f2fd;padding:10px 15px;border-radius:6px;margin-bottom:15px;font-weight:500;color:#1976d2}

/* boutons */
.odds-btn{padding:12px 24px;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:.3s;margin:5px;font-size:14px}
.odds-btn-primary{background:#007cba;color:#fff}
.odds-btn-primary:hover:not(:disabled){background:#005a87}
.odds-btn-primary:disabled{background:#ccc;cursor:not-allowed}
.odds-btn-secondary{background:#6c757d;color:#fff}
.odds-btn-secondary:hover{background:#545b62}

/* tableaux de cotes */
.odds-event{margin-bottom:25px;border:1px solid #ddd;border-radius:8px;overflow:hidden}
.event-header{background:#f8f9fa;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd}
.event-title{color:#333;font-size:1.1rem}
.event-date{color:#666;font-size:.9rem}
.odds-table-wrapper{overflow-x:auto}
.odds-comparison-table{width:100%;border-collapse:collapse}
.odds-comparison-table th,.odds-comparison-table td{padding:12px 15px;text-align:center;border-bottom:1px solid #eee}
.odds-comparison-table th{background:#f1f3f4;font-weight:600;color:#333}
.bookmaker-name{text-align:left!important;font-weight:500}
.odds-value{font-weight:700;color:#007cba;font-size:1.1rem}
.odds-cell.best-odds{background:#d4edda}
.odds-cell.best-odds .odds-value{color:#155724;font-weight:800}
.best-odds-summary{background:#f8f9fa;padding:15px 20px;border-top:1px solid #ddd;text-align:center}
.best-summary-item{display:inline-block;background:#007cba;color:#fff;padding:4px 10px;margin:0 5px;border-radius:12px;font-size:.9rem;font-weight:600}

/* messages */
.odds-api-error,.odds-api-no-data,.no-odds-message{background:#f8d7da;color:#721c24;padding:15px;border:1px solid #f5c6cb;border-radius:6px;margin:15px 0;text-align:center}
.odds-api-no-data,.no-odds-message{background:#fff3cd;color:#856404;border-color:#ffeaa7}

/* responsive */
@media (max-width:768px){
 .sports-grid{grid-template-columns:1fr}
 .event-header{flex-direction:column;gap:8px;text-align:center}
 .odds-comparison-table th,.odds-comparison-table td{padding:8px 5px;font-size:.9rem}
 .best-summary-item{display:block;margin:5px 0}
 .events-actions,.odds-actions{flex-direction:column}
 .odds-btn{width:100%;margin:5px 0}
}
