/*** 

====================================================================
  Planning
====================================================================

 ***/
.titre_planning {
    font-family : "Stockport";
    font-size : 50px;
    padding-top:10px;
    color : white;
    }
.container .planning{
    padding:0;

}

.planning{
    width:80%;
    margin-left:10%;
    margin-right:10%;
    margin-bottom: 5%;
    margin-top: -3%;
}

.div_planning{

    background-color:#262626;
    background-size:100%;

    background:url(../images/fond_planning.jpg) fixed;
    background-size:150%;

}


.tarif .titre{
    margin-top:0;
}

:root {
    --dark-bg: #1a1a1a;
    --accent-red: #e63946;
    --accent-yellow: #ffff00; /* Jaune vif pour les bordures */
    --text-white: #ffffff;
    --border-color: var(--accent-yellow); 
}

.planning-container {
    width: 100%;
    overflow-x: auto;
    padding: 20px 0;
}

.planning-grid {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    min-width: 900px;
    background-color: var(--border-color); /* La couleur du fond crée les bordures grâce au gap */
    gap: 2px; /* Épaisseur des bordures entre les cases */
    border: 2px solid var(--border-color); /* Bordure extérieure */
}

/* En-tête et Heures */
.day-header, .time-column {
    background-color: #000;
    color: var(--text-white);
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px;
    text-align: center;
}

.time-slot {
    background-color: #222;
    color: #eee;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Style général des cases */
.class-item {
    background-color: var(--dark-bg);
    color: var(--text-white);
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    min-height: 60px;
}

/* --- FOCUS HYROX --- */
.class-item.hyrox {
    font-family: 'Impact', 'Arial Narrow Bold', sans-serif;
    font-size: 1.4em;
    letter-spacing: 1px;
    color: var(--accent-yellow); /* Texte jaune pour rappeler le code couleur Hyrox */
    text-transform: uppercase;
}

/* Autres styles de cours */
.class-item.wod { border-left: 4px solid var(--accent-red); }

/* Cellule vide */
.class-item:empty {
    background-color: #111;
}

/* Responsive : ajustement police sur petit écran */
@media (max-width: 768px) {
    .class-item.hyrox { font-size: 1.1em; }
}