/* ============================= */
/* VARIABLES */
/* ============================= */

:root{

--primary-color:#4f46e5;
--secondary-color:#6366f1;

--background:#0f172a;
--tile-background:#1e293b;

--text-color:#e2e8f0;
--muted-text:#94a3b8;

--border-color:#334155;

--radius:12px;

}

/* ============================= */
/* BASE */
/* ============================= */

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

body{

font-family:system-ui,-apple-system,Segoe UI,Roboto;

background:var(--background);
color:var(--text-color);

padding:20px;

}

.content{
max-width:1400px;
margin:auto;
}

/* ============================= */
/* TITRES */
/* ============================= */

h1{
margin-bottom:25px;
text-align:center;
}

/* ============================= */
/* BOUTONS */
/* ============================= */

.bouton{

display:inline-block;

padding:8px 14px;

background:var(--primary-color);

color:white;

border-radius:8px;

text-decoration:none;

font-size:14px;

transition:0.2s;

}

.bouton:hover{
background:var(--secondary-color);
}

.top-left{

display:flex;
gap:10px;

margin-bottom:20px;

}

/* ============================= */
/* GRID MATCHS */
/* ============================= */

.match-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

gap:20px;

}

/* ============================= */
/* TUILES MATCH */
/* ============================= */

.match-tile{

background:var(--tile-background);

border-radius:var(--radius);

padding:16px;

border:1px solid var(--border-color);

display:flex;
flex-direction:column;
gap:12px;

}

.vs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.match-format {
    font-size: 0.8em;
    color: #aaa;
    font-weight: bold;
}


/* ============================= */
/* HEADER MATCH */
/* ============================= */

.match-header{

display:flex;

justify-content:space-between;

font-size:.85rem;

color:var(--muted-text);

}

.league-name{
font-weight:600;
}

/* ============================= */
/* TEAMS */
/* ============================= */

.teams-container{

display:flex;

align-items:center;

justify-content:space-between;

gap:8px;

}

/* IMPORTANT anti débordement flex */

.team{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}

.team-name{

font-weight:600;

text-align:center;

word-break:break-word;
overflow-wrap:anywhere;

}

/* ============================= */
/* SCORE */
/* ============================= */

.vs-badge{

background:var(--primary-color);

padding:6px 10px;

border-radius:8px;

font-weight:bold;

font-size:.95rem;

white-space:nowrap;

}
/* ============================= */
/* LOGOS EQUIPES */
/* ============================= */
.team-logo{

width:42px;
height:42px;

object-fit:contain;

background:#0f172a;

padding:4px;

border-radius:8px;

}

/* placeholder quand logo absent */

.team-placeholder{

display:flex;

align-items:center;
justify-content:center;

background:#334155;

border-radius:8px;

font-weight:bold;

color:#94a3b8;

font-size:14px;

}

/* ============================= */
/* WINNER */
/* ============================= */

.match-status{

text-align:center;

font-size:.9rem;

}

/* ============================= */
/* PRONOSTICS */
/* ============================= */

.pronostic-container{

margin-top:6px;

}

/* titre */

.pronostic-container h4{

text-align:center;

font-size:.85rem;

margin-bottom:6px;

color:var(--primary-color);

}

/* ============================= */
/* TABLE */
/* ============================= */

.log-table{

width:100%;

border-collapse:collapse;

table-layout:fixed;

font-size:.8rem;

}

/* header */

.log-table th{

border-bottom:1px solid var(--border-color);

padding:4px;

color:var(--muted-text);

}

/* cellules */

.log-table td{

padding:4px;

text-align:center;

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

}

/* joueur -> autoriser retour ligne */

.log-table td:nth-child(2){

white-space:normal;

word-break:break-word;

}

/* lignes */

.log-table tr:nth-child(even){

background:rgba(255,255,255,0.02);

}

/* ============================= */
/* MESSAGE */
/* ============================= */

.no-match{

text-align:center;

margin-top:40px;

color:var(--muted-text);

}

.pronostic-status{

text-align:center;

font-size:.8rem;

color:var(--muted-text);

}
/* ============================= */
/* PRONOSTIC INPUT STYLE */
/* ============================= */

.score-inputs{

display:flex;

justify-content:center;

align-items:center;

gap:8px;

margin-top:4px;

}

/* champs score */

.score-input{

width:46px;
height:36px;

text-align:center;

font-size:1.1rem;
font-weight:700;

color:var(--text-color);

background:#0f172a;

border:2px solid var(--border-color);

border-radius:8px;

transition:all .2s ease;

}

/* hover */

.score-input:hover{

border-color:var(--secondary-color);

}

/* focus */

.score-input:focus{

outline:none;

border-color:var(--primary-color);

box-shadow:0 0 0 2px rgba(99,102,241,.25);

}

/* retirer les flèches du input number */

.score-input::-webkit-inner-spin-button,
.score-input::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}

/* séparateur */

.score-separator{

font-size:1.2rem;

font-weight:700;

color:var(--secondary-color);

}

/* bouton pronostic */

.pronostic-button{

width:100%;

margin-top:6px;

font-size:.8rem;

padding:6px;

}

/* message pronostic */

.pronostic-saved{

margin-top:4px;

font-size:.8rem;

color:var(--secondary-color);

}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width:700px){

.match-grid{
grid-template-columns:1fr;
}
}

/* ============================= */
/* LEAGUE FILTER */
/* ============================= */

.league-filter{

display:flex;

gap:8px;

flex-wrap:wrap;

margin-bottom:20px;

justify-content:center;

}

.league-button{

padding:6px 12px;

border-radius:8px;

background:#1e293b;

color:var(--text-color);

text-decoration:none;

font-size:.85rem;

border:1px solid var(--border-color);

transition:.2s;

}

.league-button:hover{

background:var(--secondary-color);

}

.league-button.active{

background:var(--primary-color);

color:white;

}
.classement-table {
width:100%;
border-collapse: collapse;
margin-top:20px;
}

.classement-table th,
.classement-table td {
padding:10px;
border-bottom:1px solid #ddd;
text-align:center;
}

.classement-table th {
background:#1f2937;
color:white;
}

.classement-table tr:hover {
background:#2c3e60;
}

.points {
font-weight:bold;
color:#2563eb;
}

.league-filter {
margin-bottom:20px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.league-filter a {
padding:6px 12px;
border-radius:6px;
background:#e5e7eb;
text-decoration:none;
color:#111;
font-size:14px;
}

.league-filter a.active {
background:#2563eb;
color:white;
}

.podium {
display:flex;
gap:20px;
margin-bottom:30px;
}


.medal {
font-size:28px;
}

.player-name {
font-weight:bold;
}

.player-points {
color:#2563eb;
}
.podium-global {
display:flex;
justify-content:center;
gap:40px;
margin:30px 0;
}

.podium-player {
background:#1e293b;
padding:20px;
border-radius:12px;
text-align:center;
width:140px;
box-shadow:0 3px 10px #ddeb25;
}

.medal {
font-size:36px;
margin-bottom:10px;
}

.player-name {
font-weight:bold;
font-size:18px;
}

.player-points {
color:#2563eb;
font-weight:bold;
}