/* Pour reserrer le nom de l'evt au l'heure en vue hebdo */
.fc-event-main {
    line-height: 1;
}
.fc-timegrid .fc-event-time {
    margin-bottom: 1px;
    padding-right: 0.4em;
}
.fc-timegrid-event .fc-event-main {
    padding-left: 0.2em;
    font-size: 12px;
}

.fc-timegrid-event-short .fc-event-main {
    display: flex;
}
.fc-timegrid-event .fc-event-time {
    font-weight: 500;   
    font-size: 12px;
}
.fc-timegrid-event-short .fc-event-time::after {
    content: unset;
}

.kcalendar-icones {
    position: absolute;
    right: 5px;
}


.fc-event-dot {
    display: none !important;
}

.fc-event-time {
    display: flex;
    justify-content: space-between;
}

.fc-event-title {
    white-space: normal !important;
    display: block !important;
    word-wrap: break-word;
}

.fc-daygrid-block-event .fc-event-time .fa-youtube {
    font-weight: normal;
}

.fc-daygrid-block-event .fc-event-time {
    font-weight: 500;
}

.fc-daygrid-event {
    font-size: 12px !important;
    /* Ajuste la taille du texte */
    line-height: 1.2 !important;
    /* Améliore la lisibilité */
    white-space: unset;
}

.fc-event-main {
    padding: 2px;
}

.fc-col-header-cell-cushion,
.fc-list-day-text,
.fc-daygrid-day-number {
    color: #6d6d6d !important;
    font-weight: 500;
}

.k-calendar-popup {
    position: absolute;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 260px;
    font-size: 14px;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    transform-origin: top center;
}

.k-calendar-popup ul,
.k-calendar-popup li {
    margin-top: 0;
}

.k-calendar-popup ul {
    padding-left: 16px;
}

.k-calendar-popup img {
    width: 100%;
    border-radius: 5px;
    margin-top: 10px;
}

.k-calendar-popup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.2;
    margin-bottom: 10px;
    color: white;
    border-radius: 4px;
}

.k-calendar-popup p {
    margin: 0;
}

.k-calendar-popup .popup-close {
    background: none;
    border: none;
    font-size: 2em;
    line-height: 0.5;
    cursor: pointer;
    padding: 0 0 0 0.4em;
}

.k-calendar-popup .popup-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    padding: 5px 10px;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.k-calendar-popup .popup-link:hover {
    opacity: 0.9;
}

/* Styles responsifs */
@media screen and (max-width: 768px) {
    .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
    }

    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        margin-bottom: 8px;
    }

    .fc-dayGridMonth-button,
    .fc-timeGridWeek-button,
    .fc-timeGridDay-button {
        font-size: 0.8em !important;
        padding: 0.3em 0.5em !important;
    }

    .k-calendar-popup {
        font-size: 16px;
    }
}

/* Animation pour la popup */
.k-calendar-popup.show {
    animation: popupFadeIn 0.3s ease-out;
}

.k-calendar-popup.hide {
    animation: popupFadeOut 0.2s ease-in;
    opacity: 0;
    pointer-events: none;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popupFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}



/* Styles pour le calendrier minimal & onlydays */


/* Masquer les en-têtes de jours */
.k-calendar-container .minimal-calendar:not(.onlydays-calendar) .fc-col-header {
    display: none !important;
}

/* Masquer les étiquettes d'heures */
.k-calendar-container .minimal-calendar .fc-timegrid-axis,
.k-calendar-container .minimal-calendar .fc-timegrid-slot-label {
    visibility: hidden;
}

/* Supprimer les bordures et lignes de grille */
.k-calendar-container .minimal-calendar .fc-timegrid-slot,
.k-calendar-container .minimal-calendar .fc-timegrid-cols table,
.k-calendar-container .minimal-calendar .fc-timegrid-col,
.k-calendar-container .minimal-calendar:not(.onlydays-calendar) .fc-scrollgrid,
.k-calendar-container .minimal-calendar .fc-scrollgrid-section,
.k-calendar-container .minimal-calendar .fc-scrollgrid-section>td,
.k-calendar-container .minimal-calendar .fc-scroller,
.k-calendar-container .minimal-calendar .fc-timegrid-body,
.k-calendar-container .minimal-calendar .fc-timegrid-slots {
    border: none !important;
}

/* Supprimer et adapter les bordures et lignes de grille du planning hebdomadaire*/
.k-weekly-timetable .fc-theme-standard .fc-scrollgrid,
.k-weekly-timetable .fc-theme-standard td,
.k-weekly-timetable .fc-theme-standard th {
    border: none !important;
}
.k-weekly-timetable .fc-event td {
    border-bottom: 1px solid white !important;
}

.k-weekly-timetable .fc-scrollgrid-sync-inner {
    border: #e4e4e4 1px solid;
}


@media screen and (min-width: 768px) {
    .k-weekly-timetable .k-calendar-container {
        margin-left: -36px;
    }

    /* Classe onlydays-shortcode à ajouter au conteneur du shortcode de la ligne jours de la semaine */
    .k-weekly-timetable .onlydays-shortcode {
        margin-bottom: -30px;
        z-index: 4;
    }
}
.k-weekly-timetable .onlydays-shortcode .k-calendar-loading{
    display: none;
}
/* Supprimer les marges et padding inutiles */
.k-calendar-container .minimal-calendar .fc-scrollgrid-section>td {
    padding: 0 !important;
}

/* S'assurer que le contenu remplit tout l'espace */
.k-calendar-container .minimal-calendar .fc-timegrid-slots table {
    width: 100% !important;
}

/* Styler les événements avec plus de visibilité */
.k-calendar-container .minimal-calendar .fc-event {
    margin: 1px 0 !important;
    border-radius: 3px !important;
}

/* Masquer les bordures des cellules de jour dans la vue mois */
.k-calendar-container .minimal-calendar .fc-daygrid-day {
    border: none !important;
}

/* Masquer les noms de jours dans la vue mois */
.k-calendar-container .minimal-calendar .fc-daygrid-day-top {
    display: none !important;
}


/* Affichage sur mobile */
.k-calendar-container .fc-listWeek-view .fc-list-event-time {
    display: none;
}

.k-calendar-container .fc-listWeek-view .fc-list-event-graphic {
    display: none;
}

.k-calendar-container .fc-listWeek-view .fc-list-event-title {
    padding: 0 !important;
}

.k-calendar-container .fc-listWeek-view .fc-event-custom-list {
    padding: 4px 6px;
    color: #fff;
}
.k-calendar-container .fc-listWeek-view .fc-event-time {
    font-weight: 500;   
    font-size: 16px;
    margin-bottom: -5px;
}

.k-calendar-container .fc-listWeek-view .fc-list-day-cushion {
    background-color: unset !important;
}

.k-calendar-container .fc-listWeek-view.fc-list {
    border: none;
}

.k-calendar-container .fc-listWeek-view .fc-list-day-cushion {
    padding: 11px 0px 6px;
}

.k-calendar-container .fc-listWeek-view .fc-list-empty {
    background: unset;
    height: 70vh;
    align-items: unset;
}

.k-calendar-container .fc-listWeek-view .fc-event td {
    border: unset;
    border-bottom: 1px solid white;
}

.k-calendar-container .fc-button-primary {
    background-color: var(--couleur-2);
    border: 2px solid white;
}
.k-calendar-container .fc-button-primary:hover,
.k-calendar-container .fc-button-primary:disabled {
    background-color: color-mix(in srgb, var(--couleur-2) 85%, white);;
    border: 2px solid white;
    opacity: 0.8;
}
.k-calendar-container .fc-button-primary:not(:disabled):active {
    background-color: color-mix(in srgb, var(--couleur-2) 50%, black);;
    border: 2px solid white;
    opacity: 0.8;
}
@media screen and (max-width: 480px) {
    .k-calendar-container .fc-button-group,
    .k-calendar-container .fc-toolbar-chunk,
    .k-calendar-container .fc-today-button {
        width: 100%;
    }
    .k-calendar-container .fc-toolbar-chunk {
        margin-bottom: 0;
    }
    .k-calendar-container .fc-toolbar-chunk .fc-toolbar-title {
        margin-bottom: 0.4em;
    }    
}

/* CSS pour capitaliser les jours de la semaine dans le calendrier */

/* Pour les en-têtes de jours dans toutes les vues */
.fc .fc-col-header-cell-cushion {
    text-transform: capitalize;
}

/* Pour les jours dans la vue liste */
.fc-list-day-text {
    text-transform: capitalize;
}

/* Pour tout texte de date/jour dans le calendrier */
.fc-list-day-side-text,
.fc-daygrid-day-number,
.fc-daygrid-day-top,
.fc .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-axis-cushion {
    text-transform: capitalize;
}