#week-header-title {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 20px;
}

#week-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px auto;
}

#week-nav button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s;
}

#week-nav button:hover { background-color: #0056b3; }
#week-nav button#today-week { background-color: #6c757d; }
#week-nav button#today-week:hover { background-color: #5a6268; }

#event-list {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 10px;
}

#loading {
    text-align: center;
    font-style: italic;
    color: #777;
    padding: 20px;
}

/* --- TABLEAU HEBDOMADAIRE --- */
.week-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
    table-layout: fixed;
}

.week-table thead th {
    background-color: #2c3e50;
    color: white;
    padding: 15px 10px;
    text-align: center;
    font-weight: 600;
    border: 1px solid #3d4f64;
    white-space: nowrap;
}
.week-table thead th:first-child {
    background-color: #3c546b;
}

/* --- STYLES POUR LES HEURES --- */
.time-slot {
    width: 70px;
    background-color: #f8f9fa;
    text-align: center;
    font-size: 0.8em;
    color: #777;
    padding: 5px 0;
    vertical-align: top;
    border-right: 1px solid #eee;
    height: 30px;
}

.time-slot.full-hour-time {
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
}

/* Cellule d'événement */
.event-cell {
    border-top: 1px dotted #eee; 
    border-left: 1px solid #eee;
    padding: 0;
    vertical-align: top;
    position: relative;
}
.event-cell.full-hour-cell {
    border-top: 1px solid #ccc; /* Ligne heure pleine */
}

/* --- STYLES POUR LES BLOCS --- */
.event-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    display: flex;
    flex-direction: row; 
    gap: 2px;
}

/* Conteneur pour un événement (le bloc coloré) */
.event-item {
    /* ⭐️ COULEURS MODIFIÉES ⭐️ */
    background-color: #ffffff; /* Couleur par défaut (avant JS) */
    border-left: 5px solid #ccc; /* Bordure par défaut */
    color: #333; /* TEXTE FONCÉ pour fond pastel */
    /* -------------------------- */
    
    border-radius: 4px;
    padding: 6px 8px; 
    font-size: 0.85em;
    line-height: 1.3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    z-index: 10;
    height: 100%;
    box-sizing: border-box; 
    flex: 1;
    min-width: 0;   
}

.event-item strong, .event-item small {
    display: block;
    white-space: normal;
}
.event-item small {
    color: #555; /* ⭐️ MODIFIÉ: Texte foncé */
    font-size: 0.9em;
}

/* ⭐️ NOUVEAU STYLE POUR LE NOM DU GROUPE ⭐️ */
.event-group {
    display: block;
    margin-top: 5px;
    font-weight: bold;
    color: #000; /* Texte noir pour le nom du groupe */
}

/* --- STYLES POUR LE FILTRE DE GROUPE --- */
.filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px; /* Espace par rapport aux boutons */
}
.filter-controls label {
    font-weight: 500;
}
.filter-controls select {
    padding: 8px;
    font-size: 0.9em;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: white;
}

/* --- RÈGLES DE FILTRAGE CSS --- */
/* Quand on sélectionne 'Groupe 1', on masque les cours du 'Lien 2' */
body.view-groupe1 .event-item.event-link2 {
    display: none;
}

/* Quand on sélectionne 'Groupe 2', on masque les cours du 'Lien 1' */
body.view-groupe2 .event-item.event-link1 {
    display: none;
}


/* Permet de positionner la ligne par rapport au corps du tableau */
.calendar-body {
    position: relative;
}

#timeline-indicator {
    position: absolute;
    z-index: 50; 
    /* left et width seront gérés par JS */
    height: 2px;
    background-color: #d93025; 
    box-shadow: 0 0 3px #00000080;
}

/* ---?? STYLES POUR LA VUE MOBILE ?? --- */

/* Par d�faut, la vue mobile est cach�e */
#mobile-view {
    display: none;
    padding: 0 10px; /* Marge pour le t�l�phone */
}

/* En-t�te pour le jour (ex: "lundi 17 novembre") */
.mobile-day-header {
    font-size: 1.5em;
    font-weight: 600;
    color: #2c3e50;
    padding: 15px;
    background-color: #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Style pour un bloc de cours en vue mobile */
.mobile-event-item {
    background-color: #ffffff;
    border-left: 5px solid #ccc; /* La couleur de la mati�re �crasera �a */
    color: #333;
    border-radius: 4px;
    padding: 15px; 
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.mobile-event-item strong, .mobile-event-item small {
    display: block;
    white-space: normal;
}
.mobile-event-item strong {
    font-size: 1.1em;
    margin-bottom: 5px;
}
.mobile-event-item small {
    color: #555;
    font-size: 1em;
    line-height: 1.4;
}
/* On r�utilise le style du nom de groupe */
.mobile-event-item .event-group {
    margin-top: 8px;
    font-weight: bold;
    color: #000;
}


/* ---?? NOUVEAU BLOC ??: RESPONSIVE - VUE MOBILE --- */
@media (max-width: 768px) {
    
    /* Ajuster la navigation */
    #week-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 10px auto;
        padding: 0 10px;
    }

    /* Le filtre passe en dessous */
    .filter-controls {
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .filter-controls select {
        width: 100%;
    }

    #event-list {
        margin: 10px auto;
        padding: 0 5px;
    }
    
    /* On cache l'en-t�te de la semaine, le titre fera le travail */
    .week-table thead {
        display: none;
    }

    /* Transformation de la ligne en "bloc" */
    .week-table tr {
        display: block;
        margin-bottom: 5px; /* Espace entre les heures */
    }

    /* La cellule d'heure devient un en-t�te pour la ligne */
    .week-table .time-slot {
        display: block;
        width: 100%;
        height: auto;
        text-align: left;
        padding: 8px;
        background-color: #f1f1f1;
        border-right: none;
        border-bottom: 1px dotted #ccc;
        box-sizing: border-box;
    }
    .time-slot.full-hour-time {
        font-weight: bold;
    }

    /* On cache toutes les colonnes de jours par d�faut */
    .week-table .event-cell {
        display: none;
    }

    /* On affiche SEULEMENT la colonne du jour actif */
    .week-table .event-cell.active-day {
        display: block; /* S'affiche sous l'heure */
        width: 100%; 
        border-left: none;
        min-height: 50px;
        padding: 5px; /* Ajouter un peu d'espace */
        box-sizing: border-box;
    }
    .event-cell.full-hour-cell.active-day {
        border-top: 1px dotted #eee; /* Garder une s�paration l�g�re */
    }

    /* Le wrapper doit �tre en position relative pour que les �v�nements s'affichent */
    .event-wrapper {
        position: relative; /* Remplacer 'absolute' */
        /* Enlever 'absolute' permet aux �v�nements de s'empiler */
        flex-direction: column; /* Empiler les �v�nements s'il y en a plusieurs */
        gap: 4px;
    }

    .event-item {
        position: relative; /* Remplacer 'absolute' */
        height: auto; /* Hauteur auto */
        flex: 1;
        min-width: 100%; /* Prend toute la largeur */
        box-sizing: border-box;
    }
}