/* Définition des couleurs des profs via variables CSS (ou classes) */
/* Il est préférable de les générer dynamiquement si la liste des profs change */


/* CSS pour la timeline Desktop */
@media (max-width: 767px){ /* moins que md */

    .day-schedule-mobile, .day-schedule-mobile-2c, .day-schedule-mobile-3c {
        /* Paramètres de la grille horaire récupérés depuis les variables CSS */
        --schedule-start-hour: 8; /* Défaut, peut être surchargé par style inline */
        --schedule-end-hour: 22;  /* Défaut */
        --slot-duration: 15;      /* Défaut (en minutes) */
        --slot-height: 15px;      /* Défaut (hauteur d'un créneau de 15min) */

        /* Calcul du nombre total de créneaux */
        --total-slots: calc( (var(--schedule-end-hour) - var(--schedule-start-hour)) * (60 / var(--slot-duration)) );

        display: grid;
        /* Crée les lignes pour chaque créneau horaire */
        grid-template-rows: repeat(var(--total-slots), var(--slot-height));
        position: relative; /* Pour le positionnement absolu du nom du prof */
        min-height: calc(var(--total-slots) * var(--slot-height)); /* Hauteur minimale basée sur la grille */
        /* Optionnel : Lignes de fond pour marquer les heures */
        /* background-image: linear-gradient(to bottom, #000 1px, #fff 1px); */
        background-image: linear-gradient(to bottom, #cdcdcd 1px, rgb(var(--bs-tertiary-bg-rgb)) 1px);
        background-size: 100% calc(var(--slot-height) * (60 / var(--slot-duration)) ); /* Une ligne par heure */
        border-top: 1px solid #eee; /* Ligne pour l'heure de début */
    }

    .day-schedule-mobile-2c{
        grid-template-columns: 1fr 1fr; /* Une seule colonne pour les cours */
    }
    .day-schedule-mobile-3c {
        grid-template-columns: 1fr 1fr 1fr; /* Une seule colonne pour les cours */
    }

    .lesson-card {
        /* Les propriétés grid-row seront définies par style inline */
        overflow: hidden; /* Cache le contenu qui dépasse */
        position: relative; /* Contexte pour le positionnement absolu du nom du prof */
        border-width: 1px; /* Ajuster l'épaisseur de la bordure si besoin */
        margin-bottom: 1px !important; /* Petit espace entre cartes superposées */
        z-index: 1; /* Pour que les cartes soient au-dessus des lignes de fond */
    }

    .lesson-card .card-body {
        display: flex;
        /* flex-direction: column; */
        height: 100%; /* Occupe toute la hauteur de la carte */
        padding: 0.3rem 0.4rem; /* Ajuster le padding */
        font-size: 0.75rem; /* Taille de police réduite */
        line-height: 1.2;
        vertical-align: middle;
        align-items: center;
        margin: auto;
    }

    .lesson-card .lesson-title {
        font-weight: bold;
        font-size: 1rem; /* Taille légèrement plus grande pour le titre */
        margin-bottom: 0.1rem;
        text-align: center;
    }
     .lesson-card .lesson-time,
     .lesson-card .lesson-room {
         margin-bottom: 0.1rem;
     }

    .lesson-card .lesson-time,
    .lesson-card .lesson-prof {
         font-size: 1rem; /* Taille légèrement plus grande pour le titre */
     }

    .lesson-card .lesson-teacher {
        /* Positionnement en bas à droite */
        position: absolute;
        bottom: 2px; /* Petit espace depuis le bas */
        right: 4px; /* Petit espace depuis la droite */
        font-size: 1rem; /* Encore plus petit */
        font-style: italic;
        padding: 0 2px;
        border-radius: 2px;
    }

    .lesson-card .card-footer {
        margin: 0;
        padding: 0 5px;

        /* === Alignement avec Flexbox === */
        display: flex;                /* 1. Active le mode Flexbox */
        justify-content: space-between; /* 2. Pousse les éléments enfants aux extrémités
                                             (le premier à gauche, le dernier à droite) */
        align-items: center;          /* 3. Centre verticalement les éléments enfants */
        /* min-height: 25px; */       /* Optionnel: définissez une hauteur minimale si nécessaire */
    }

    /* --- Logique d'affichage/masquage RECTO/VERSO --- */

    /* Par défaut : Masquer le contenu VERSO */
    .lesson-card .content-verso {
      display: none;
      vertical-align: middle;
      align-items: center;
    }

    /* Par défaut : Afficher le contenu RECTO */
    /* (Pas besoin de règle CSS explicite si 'display: block' est le comportement naturel,
       mais on le met pour la clarté, surtout pour le footer flex) */
    .lesson-card .card-body .content-recto {
      display: block; /* ou la valeur par défaut de vos éléments */
      /* vertical-align: middle; */
      align-items: center;
      width: auto;
    }
    .lesson-card .card-footer .content-recto {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        place-content: space-between;
        min-height: 25px;      /* Optionnel: définissez une hauteur minimale si nécessaire */
    }

    /* Quand '.is-flipped' est ajoutée à '.lesson-card' */

    /* Masquer le contenu RECTO */
    .lesson-card.is-flipped .content-recto {
      display: none;
    }

    /* Afficher le contenu VERSO */
    .lesson-card.is-flipped .card-body .content-verso {
      display: block; /* ou la valeur par défaut de vos éléments */
    }
    .lesson-card.is-flipped .card-footer .content-verso {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        place-content: space-between;
        min-height: 25px;     /* Optionnel: définissez une hauteur minimale si nécessaire */
    }

}

/* CSS pour la timeline Desktop */
@media (min-width: 768px){ /* md et plus */

    .day-schedule-desktop, .day-schedule-desktop-2c, .day-schedule-desktop-3c {
        /* Paramètres de la grille horaire récupérés depuis les variables CSS */
        --schedule-start-hour: 8; /* Défaut, peut être surchargé par style inline */
        --schedule-end-hour: 22;  /* Défaut */
        --slot-duration: 15;      /* Défaut (en minutes) */
        --slot-height: 15px;      /* Défaut (hauteur d'un créneau de 15min) */

        /* Calcul du nombre total de créneaux */
        --total-slots: calc( (var(--schedule-end-hour) - var(--schedule-start-hour)) * (60 / var(--slot-duration)) );

        display: grid;
        /* Crée les lignes pour chaque créneau horaire */
        grid-template-rows: repeat(var(--total-slots), var(--slot-height));
        position: relative; /* Pour le positionnement absolu du nom du prof */
        min-height: calc(var(--total-slots) * var(--slot-height)); /* Hauteur minimale basée sur la grille */
        /* Optionnel : Lignes de fond pour marquer les heures */
        /* background-image: linear-gradient(to bottom, #000 1px, #fff 1px); */
        background-image: linear-gradient(to bottom, #cdcdcd 1px, rgb(var(--bs-tertiary-bg-rgb)) 1px);
        background-size: 100% calc(var(--slot-height) * (60 / var(--slot-duration)) ); /* Une ligne par heure */
        border-top: 1px solid #eee; /* Ligne pour l'heure de début */
    }


    .day-schedule-desktop-2c {
        grid-template-columns: 1fr 1fr; /* Une seule colonne pour les cours */
    }
    .day-schedule-desktop-3c {
        grid-template-columns: 1fr 1fr 1fr; /* Une seule colonne pour les cours */
    }

    .lesson-card {
        /* Les propriétés grid-row seront définies par style inline */
        overflow: hidden; /* Cache le contenu qui dépasse */
        position: relative; /* Contexte pour le positionnement absolu du nom du prof */
        border-width: 1px; /* Ajuster l'épaisseur de la bordure si besoin */
        margin-bottom: 1px !important; /* Petit espace entre cartes superposées */
        z-index: 1; /* Pour que les cartes soient au-dessus des lignes de fond */
    }

    .lesson-card .card-body {
        display: flex;
        /* flex-direction: column; */
        height: 100%; /* Occupe toute la hauteur de la carte */
        padding: 0.3rem 0.4rem; /* Ajuster le padding */
        font-size: 0.75rem; /* Taille de police réduite */
        line-height: 1.2;
        vertical-align: middle;
        align-items: center;
        margin: auto;
    }

    .lesson-card .lesson-title {
        font-weight: bold;
        font-size: 0.8rem; /* Taille légèrement plus grande pour le titre */
        margin-bottom: 0.1rem;
        text-align: center;
    }
     .lesson-card .lesson-time,
     .lesson-card .lesson-room {
         margin-bottom: 0.1rem;
     }

    .lesson-card .lesson-time,
    .lesson-card .lesson-prof {
         font-size: 1rem; /* Taille légèrement plus grande pour le titre */
     }

    .lesson-card .lesson-teacher {
        /* Positionnement en bas à droite */
        position: absolute;
        bottom: 2px; /* Petit espace depuis le bas */
        right: 4px; /* Petit espace depuis la droite */
        font-size: 1rem; /* Encore plus petit */
        font-style: italic;
        padding: 0 2px;
        border-radius: 2px;
    }

    .lesson-card .card-footer {
        margin: 0;
        padding: 0 5px;

        /* === Alignement avec Flexbox === */
        display: flex;                /* 1. Active le mode Flexbox */
        justify-content: space-between; /* 2. Pousse les éléments enfants aux extrémités
                                             (le premier à gauche, le dernier à droite) */
        align-items: center;          /* 3. Centre verticalement les éléments enfants */
        /* min-height: 25px; */       /* Optionnel: définissez une hauteur minimale si nécessaire */
    }

    /* --- Logique d'affichage/masquage RECTO/VERSO --- */

    /* Par défaut : Masquer le contenu VERSO */
    .lesson-card .content-verso {
      /* display: none; */
      vertical-align: middle;
      align-items: center;
    }

    /* Par défaut : Afficher le contenu RECTO */
    /* (Pas besoin de règle CSS explicite si 'display: block' est le comportement naturel,
       mais on le met pour la clarté, surtout pour le footer flex) */
    .lesson-card .card-body .content-recto {
      display: block; /* ou la valeur par défaut de vos éléments */
      /* vertical-align: middle; */
      align-items: center;
      width: auto;
    }
    .lesson-card .card-footer .content-recto {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        place-content: space-between;
        min-height: 25px;      /* Optionnel: définissez une hauteur minimale si nécessaire */
    }

    /* Quand '.is-flipped' est ajoutée à '.lesson-card' */

    /* Masquer le contenu RECTO */
    .lesson-card.is-flipped .content-recto {
      display: none;
    }

    /* Afficher le contenu VERSO */
    .lesson-card.is-flipped .card-body .content-verso {
      display: block; /* ou la valeur par défaut de vos éléments */
    }
    .lesson-card.is-flipped .card-footer .content-verso {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        place-content: space-between;
        min-height: 25px;     /* Optionnel: définissez une hauteur minimale si nécessaire */
    }

}

.carousel .carousel-indicators button {
    background-color: darkslategrey;
}

.carousel-control-prev {
    left: -50px;
}
.carousel-control-next {
    right: -50px;
}

/* En-têtes de jours : h2 dans la structure — ils suivent le h1 de la page —
   affichés comme des h4, dans les deux mises en page. */
.planning-day-title {
    font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
    .planning-day-title { font-size: 1.5rem; }
}