table{
    margin: 1.5rem auto;
    text-align: center;
    width: 80%;
    max-width: 900px;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* =========================
   EN-TÊTE (ROUGE SPORTIF)
   ========================= */
thead{
    background: linear-gradient(135deg,#b71c1c,#e53935);
    color: white;
}

th{
    padding: 12px 8px;
    font-size: 15px;
    letter-spacing: 0.5px;
}

/* =========================
   CELLULES
   ========================= */
td{
    padding: 10px 8px;
    border-bottom: 1px solid #eeeeee;
}

/* =========================
   LIGNES ALTERNÉES (ROUGE CLAIR)
   ========================= */
tbody tr:nth-child(even){
    background-color: #ffebee;
}

/* =========================
   HOVER (ROUGE PLUS MARQUÉ)
   ========================= */
tbody tr:hover{
    background-color: #ffcdd2;
    transition: 0.2s;
}

/* =========================
   MOBILE RESPONSIVE
   ========================= */
@media only screen and (max-width: 800px){

table,
thead,
tbody,
th,
td,
tr{
    display: block;
}

thead tr{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

td{
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

td:before{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 45%;
    padding-right: 10px;
    font-weight: bold;
    color: #b71c1c;
    white-space: nowrap;
    text-align: left;
    content: attr(data-title);
}

tbody tr{
    margin-bottom: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    background: white;
}

}