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

/* BODY */
body{
    font-family:'Segoe UI',sans-serif;
    background:linear-gradient(135deg,#eef2f7,#dfe9f3);
}

/* TITRE */
h1{
    text-align:center;
    margin:40px 0 20px;
    color:#ff1bd5;
    font-size:32px;
}

/* TABLE CONTAINER */
#creneaux-table{
    width:90%;
    margin:30px auto;
    border-collapse:collapse;
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

/* HEADER */
#creneaux-table th{
    background:linear-gradient(135deg,#4CAF50,#2e7d32);
    color:white;
    padding:15px;
    font-size:14px;
}

/* CELLS */
#creneaux-table td{
    padding:12px;
    border-bottom:1px solid #eee;
    text-align:center;
    font-size:14px;
}

/* HOVER */
#creneaux-table tr{
    transition:0.2s;
}

#creneaux-table tr:hover{
    background:#f4f9ff;
    transform:scale(1.01);
}

/* INFO BOX */
#info-section{
    width:90%;
    margin:30px auto;
    padding:25px;
    background:white;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    text-align:center;
}

#info-section p{
    margin:10px 0;
}

/* ================= MOBILE ================= */
@media(max-width:800px){

    #creneaux-table,
    #creneaux-table thead,
    #creneaux-table tbody,
    #creneaux-table th,
    #creneaux-table td,
    #creneaux-table tr{
        display:block;
        width:100%;
    }

    #creneaux-table thead{
        display:none;
    }

    #creneaux-table{
        box-shadow:none;
        background:none;
    }

    #creneaux-table tr{
        background:white;
        margin:15px;
        padding:15px;
        border-radius:15px;
        box-shadow:0 10px 25px rgba(0,0,0,0.1);
    }

    #creneaux-table td{
        text-align:left;
        padding:8px 10px;
        border:none;
        font-size:14px;
    }

    /* LABELS */
    #creneaux-table td:nth-child(1)::before { content:"Jour : "; font-weight:bold; }
    #creneaux-table td:nth-child(2)::before { content:"Horaires : "; font-weight:bold; }
    #creneaux-table td:nth-child(3)::before { content:"Lieu : "; font-weight:bold; }
    #creneaux-table td:nth-child(4)::before { content:"Type : "; font-weight:bold; }
    #creneaux-table td:nth-child(5)::before { content:"Public : "; font-weight:bold; }
    #creneaux-table td:nth-child(6)::before { content:"Ouverture : "; font-weight:bold; }

    #info-section{
        margin:20px;
    }
}