:root {
  --sun:   #F97316;
  --gold:  #FBBF24;
  --grass: #16A34A;
  --dark:  #1C1917;
  --mid:   #44403C;
  --white: #FFFBF5;
  --bg:    #F5F3EE;
  --border:#E7E5E4;
}

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

body{
    font-family : 'DM Sans',sans-serif;
    background : var(--bg);
    color : var(--dark);
    min-height : 100vh;
}

/* NAV */
nav{
    position : sticky;
    top : 0;
    z-index : 100;
    background : var(--dark);
    display : flex;
    align-items : center;
    justify-content : space-between;
    padding : 0 2rem;
    height : 60px;
    box-shadow : 0 2px 16px rgba(0,0,0,.4);
}

.nav-logo {
    font-family : 'Bebas Neue',sans-serif;
    font-size : 1.5rem;
    letter-spacing : .1em;
    color : var(--gold);
    text-decoration : none;
}

.nav-links {
    display : flex;
    gap : .25rem;
}

.nav-links a {
    color : #A8A29E;
    text-decoration : none;
    font-size : .85rem;
    font-weight : 500;
    padding : .4rem .9rem;
    border-radius : 6px;
    transition : all .2s;
}

.nav-links a:hover,.nav-links a.active {
    color : var(--white);
    background : rgba(255,255,255,.1);
}

.nav-links a.active {
    color : var(--gold);
}

/* PAGE HEADER */
.page-header {
    background : var(--dark);
    padding : 2.5rem 2rem 3rem;
    text-align : center;
    position : relative;
    overflow : hidden;
}

.page-header::before {
    content : '';
    position : absolute;
    inset : 0;
    background : radial-gradient(ellipse at 30% 50%,rgba(249,115,22,.2) 0%,transparent 55%),
                 radial-gradient(ellipse at 70% 30%,rgba(251,191,36,.15) 0%,transparent 50%);
    pointer-events : none;
}

.page-header h1 {
    font-family : 'Bebas Neue',sans-serif;
    font-size : clamp(2.5rem,6vw,4rem);
    color : var(--white);
    letter-spacing : .08em;
    position : relative;
}

.page-header h1 span {
    color : var(--sun);
}

 .page-header p {
    color :#A8A29E;
    font-size : .9rem;
    margin-top : .5rem;
    position : relative;
}

/* LEGEND */
.legend {
    display : flex;
    align-items : center;
    justify-content : center;
    gap : 1.5rem;
    padding : .75rem 2rem;
    background : var(--white);
    border-bottom : 1px solid var(--border);
    flex-wrap : wrap;
}

.legend-item {
    display : flex;
    align-items : center;
    gap : .4rem;
    font-size : .75rem;
    font-weight : 600;
    color : var(--mid);
}

.legend-dot {
    width : 10px;
    height : 10px;
    border-radius : 50%;
}

.dot-played {
    background : var(--dark);
}

.dot-winner {
    background : var(--grass);
}

.dot-pred {
    background : #D1D5DB;
}

.prob-bar-legend { 
    width : 40px;
    height : 4px;
    border-radius : 2px;
    background : linear-gradient(90deg,var(--grass),var(--gold));
}

/* WRAPPER SCROLLABLE */
.bracket-scroll {
    overflow-x : auto;
    padding : 2rem 1rem 3rem;
    min-height : 600px;
    display : flex;
    justify-content : center;
    align-items : flex-start;
}

.bracket-canvas {
    display : flex;
    gap : 0;
    align-items : flex-start;
    position : relative;
    margin : 0 auto;
}

/* COLONNE */
.col {
    display : flex;
    flex-direction : column;
    min-width : 170px;
    flex-shrink : 0;
}

.col-header {
    font-family : 'Bebas Neue',sans-serif;
    font-size : .95rem;
    letter-spacing : .12em;
    color : #A8A29E;
    text-align : center;
    padding : .4rem .5rem 1rem;
    white-space : nowrap;
}

.col-header.active-round {
    color : var(--sun);
}

.matches-col {
    display : flex;
    flex-direction : column;
}
.match-slot {
    display : flex;
    align-items : center;
    justify-content : center;
}

/* CONNECTEURS SVG */
.connectors {
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    pointer-events : none;
}

/* MATCH CARD */
.match-wrap {
    display : flex;
    align-items : center;
    flex : 1;
}

.match-card {
    background : var(--white);
    border : 1px solid var(--border);
    border-radius : 10px;
    overflow : hidden;
    width : 160px;
    flex-shrink : 0;
    transition : box-shadow .2s,transform .2s;
    cursor : default;
}

.match-card:hover {
    box-shadow : 0 4px 20px rgba(249,115,22,.15);
    transform : translateY(-1px);
}

.match-card.has-result {
    border-color : rgba(22,163,74,.2);
}

.match-id {
    font-size : .6rem;
    font-weight : 700;
    letter-spacing : .1em;
    color : #A8A29E;
    padding : .25rem .6rem .1rem;
    text-transform : uppercase;
    border-bottom : 1px solid var(--border);
}

.team-row {
    display : flex;
    align-items : center;
    gap : .35rem;
    padding : .35rem .6rem;
    font-size : .78rem;
    font-weight : 500;
    position : relative;
    min-height : 30px;
}

.team-row.winner-row {
    background : #F0FDF4;
    font-weight : 700;
}

.team-row.loser-row {
    opacity : .55;
}

.team-flag {
    width : 18px;
    height :12px;
    object-fit : cover;
    border-radius : 2px;
    flex-shrink : 0;
}

.team-name {
    flex : 1;
    white-space : nowrap;
    overflow : hidden;
    text-overflow : ellipsis;
    font-size : .75rem;
}

.team-score {
    font-family : 'Bebas Neue',sans-serif;
    font-size : 1.1rem;
    color : var(--dark);
    min-width : 16px;
    text-align : right;
    line-height : 1;
}

.team-row.winner-row .team-score {
    color : var(--grass);
}

/* Barre proba */
.match-proba-bar {
    height : 3px;
    display : flex;
}

.mpb-a {
    background : var(--grass);
}

.mpb-b {
    background : #E7E5E4;
}

/* Match non joué */
.team-row.pred-row {
    opacity : .8
}
.pred-score {
    font-family : 'Bebas Neue',sans-serif;
    font-size : .95rem;
    color : #A8A29E;
    min-width : 16px;
    text-align : right;
}

/* FINALE + 3e */
.final-area {
    display : flex;
    flex-direction : column;
    align-items : center;
    gap : 1rem;
    padding : 1rem 0;
}

.final-label {
    font-family : 'Bebas Neue',sans-serif;
    font-size : .85rem;
    letter-spacing : .12em;
    color : var(--gold);
    text-align : center;
}

.trophy-card { 
    border : 2px solid var(--gold);
    border-radius : 12px;
    overflow : hidden;
    width : 180px;
    box-shadow : 0 0 24px rgba(251,191,36,.2);
}

.trophy-card .match-id {
    background : var(--dark);
    color : var(--gold);
    border-bottom : 1px solid rgba(251,191,36,.3);
    font-size : .65rem;
    text-align : center;
}

.third-card {
    border-color : rgba(249,115,22,.3);
    width : 180px;
}

/* CHAMPION banner */
.champion-banner {
    text-align : center;
    padding : .75rem .5rem .5rem;
}

.champ-label {
    font-size : .65rem;
    font-weight : 700;
    letter-spacing : .15em;
    text-transform : uppercase;
    color : #A8A29E;
}

.champ-name {
    font-family : 'Bebas Neue',sans-serif;
    font-size : 1.6rem;
    color : var(--gold);
    letter-spacing : .06em;
    line-height : 1.1;
}

.champ-flag {
    width : 28px;
    height : 19px;
    object-fit : cover;
    border-radius : 2px;
    margin : 0 auto .2rem;
    display : block;
}

/* SPACER pour alignement vertical */
.spacer {
    flex : 1;
}

/* PROBA TABLE */
.prob-section {
    max-width : 900px;
    margin : 2rem auto 3rem;
    padding : 0 1.5rem;
}

.prob-title {
    font-family : 'Bebas Neue',sans-serif;
    font-size : 1.8rem;
    letter-spacing : .08em;
    color : var(--dark);
    margin-bottom : .25rem;
}

.prob-sub {
    font-size : .85rem;
    color : #78716C;
    margin-bottom : 1.25rem;
}

.prob-table-wrap {
    overflow-x : auto;
    border-radius : 14px;
    border : 1px solid var(--border);
}

.prob-table {
    width : 100%;
    border-collapse : collapse;
    font-size : .8rem;
} 

.prob-table thead th {
    background : var(--dark);
    color : #78716C;
    font-size : .65rem;
    font-weight : 700;
    letter-spacing : .1em;
    text-transform : uppercase;
    padding : .5rem .75rem;
    text-align : center;
    white-space : nowrap;
}

.prob-table thead th:nth-child(2) { 
    text-align : left;
}

.prob-table tbody tr {
    border-bottom : 1px solid #F5F3EE;
    transition : background .15s;
}

.prob-table tbody tr:hover {
    background : #FFFBF5;
}

.prob-table tbody tr:last-child {
    border-bottom : none;
}

.prob-table td {
    padding : .5rem .75rem;
    text-align : center;
    vertical-align : middle;
}

.prob-table td:nth-child(2) {
    text-align : left;
}

.rank-num {
    font-family : 'Bebas Neue',sans-serif;
    font-size : 1.2rem;
    color : var(--sun);
}

.pname-cell { 
    display : flex;
    align-items : center;
    gap : .4rem;
    white-space : nowrap;
    font-weight : 500;
}

.pct-cell {
    font-weight : 600;
    font-size : .78rem;
}

.pct-high {
    color : var(--grass);
}

.pct-med {
    color : var(--gold);
}

.pct-low {
    color : #A8A29E;
}

.mini-bar {
    height : 4px;
    border-radius : 2px;
    background : var(--grass);
    display : inline-block;
    vertical-align : middle;
    margin-left : 4px;
}

/* connectors */
.connector {
    stroke : #E7E5E4;
    stroke-width : 1.5;
    fill : none;
}

@media( max-width : 700px ) {
    .prob-section {
    padding : 0 1rem;
    }
    nav {
        padding : 0 1rem;
    }
    .nav-links a {
        padding : .4rem .5rem;
        font-size : .75rem;
    }
}