/*
Theme Name: BOX OPEN
Theme URI: https://wod-open.com
Template: neve
Author: WOD Open
Author URI: https://wod-open.com
Description: Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. A fully AMP optimized and responsive theme, Neve will load in mere seconds and adapt perfectly on any viewing device. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready. Look no further. Neve is the perfect theme for you!
Tags: blog,custom-logo,e-commerce,rtl-language-support,grid-layout,one-column,two-columns,custom-background,custom-colors,custom-header,custom-menu,featured-image-header,featured-images,flexible-header,full-width-template,sticky-post,theme-options,threaded-comments,translation-ready,accessibility-ready,wide-blocks,block-styles,footer-widgets,portfolio,left-sidebar,right-sidebar
Version: 3.8.16.1734533192
Updated: 2024-12-18 15:46:32

*/

/**/
.picto-center {
	text-align: center;
}

/* Conteneur principal */
.responsive-planning {
    font-family: var(--bodyfontfamily), var(--nv-fallback-ff);
    font-size: 14px;
    width: 90%;
    position: relative;
	margin: 20px auto 50px auto;
}

/* Conteneur principal de la table */
.planning-table {
    display: flex;
}

/* Colonne des horaires (fixée) */
.fixed-column {
    position: sticky;
    left: 0;
    background: #f0f0f0;
    z-index: 2;
    width: 30px;
}

/* Carrousel des jours */
.carousel-container {
    flex-grow: 1;
    overflow: hidden;
}

.carousel-slider {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

/* Colonnes des jours */
.planning-column {
    min-width: 14.28%; /* 100% / 7 jours */
    background: #fff;
}

/* Cellules du tableau */
.planning-cell {
    flex: 1; /* Assure que chaque cellule occupe une largeur égale */
    display: flex; /* Active Flexbox pour le contenu interne */
    /*flex-direction: column;*/
    align-items: center; /* Centre verticalement le texte */
    justify-content: center; /* Centre horizontalement le texte */
    height: 60px; /* Définit une hauteur minimale pour les cellules */
    text-align: center; /* Centre le texte dans la cellule */
    overflow-wrap: break-word; /* Permet au texte de se couper correctement si nécessaire */
    word-wrap: break-word; /* Compatibilité supplémentaire pour les anciens navigateurs */
	margin: 3px;
}

/* Créneaux */
.slot {
    flex: 1;
    width: 100%;
    text-align: center;
    padding: 5px;
    margin: 2px 0;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
}

/* Classe pour les créneaux spécifiques */
.slot.wod {
    background-color: var(--nv-secondary-accent);
    color: #fff;
    font-weight: 700;
	margin: 0 5px;
}
.slot.spe {
    background: var(--nv-primary-accent);
    color: #fff;
    font-weight: 700;
	margin: 0 5px;
}
.slot.free-access {
    background-color: var(--nv-light-bg);
    color: var(--nv-secondary-accent);
	font-weight: 700;
	margin: 0 5px;
}
.slot.renfo {
    background-color: #fff;
    color: var(--nv-secondary-accent);
    border: solid 1px;
	margin: 0 5px;
}
.slot.closed {
    color: #ccc;
}
.slot.display-none {
    display: none;
}

/* Classe pour une cellule vide */
.slot.empty {
    color: #ccc; /* Texte grisé */
    font-style: italic;
}

/* Affichage adaptatif pour mobile */
@media (max-width: 768px) {
    .planning-cell {
        height: auto;
    }

    .slot {
        margin: 5px 0;
        font-size: 0.8rem;
    }
}



/* Fermé 
.planning-cell.closed {
    color: #ccc;
}
 WOD 
.planning-cell.wod {
    background-color: var(--nv-secondary-accent);
    color: #fff;
    font-weight: 700;
}

 Free Access 
.planning-cell.free-access {
    background-color: var(--nv-light-bg);
    color: var(--nv-secondary-accent);
	font-weight: 700;
}*/

/* Entêtes */
.planning-cell.header {
    font-weight: bold;
    background: var(--nv-primary-accent);
    color: #fff;
	height: 60px;
	border-radius: 10px 10px 0 0;
	font-family: var(--headingsfontfamily), var(--nv-fallback-ff);
    font-size: 24px;
}

.fixed-column .planning-cell.header {
	background: #fff;
}

/* Cellules horaires */
.planning-cell.time {
    font-weight: bold;
    background: #f0f0f0;
}

/* Points de navigation */
.carousel-dots {
    display: none; /* Caché sur desktop */
}

.dot {
    height: 30px;
    width: 30px;
    margin: 0 5px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
	text-align: center;
    font-size: 15px;
    font-family: var(--bodyfontfamily), var(--nv-fallback-ff);
    font-weight: 900;
}

.dot.active {
    background-color: #00bcd4;
}


/* Conteneur des cellules */
.planning-row {
    display: flex; /* Aligne les cellules d'une ligne en flexbox */
    align-items: stretch; /* Étire toutes les cellules à la même hauteur */
}



/* Ajuste la hauteur sur les petits écrans */
@media (max-width: 768px) {
    .planning-cell {
        height: 50px; /* Réduit la hauteur pour les petits écrans */
        font-size: 0.9rem; /* Ajuste la taille du texte */
    }
}




/* Responsive pour mobile */
@media screen and (max-width: 768px) {
    .carousel-slider {
        transform: translateX(0);
    }

    .carousel-container {
        overflow-x: hidden;
    }

    .carousel-dots {
        display: flex;
        justify-content: right;
        margin-top: 10px;
		margin-bottom: 20px;
    }

    .planning-column {
        min-width: 100%; /* Chaque jour prend 100% */
    }
  .fixed-column {min-width: 20%;}
}

.download-button {
    display: block;
    margin: 20px auto;
    font-weight: bold;
    color: #fff;
    background-color: var(--nv-primary-accent);
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.download-button:hover {
    background-color: var(--nv-secondary-accent);
}


/*RESERVATION*/

/* Autoriser le retour à la ligne pour les titres dans les événements */
.fc-event-title {
    white-space: normal !important; /* Permet les retours à la ligne */
    word-wrap: break-word; /* Coupe les mots longs si nécessaire */
    font-size: 0.9em; /* Réduit légèrement la taille du texte pour mobile */
    line-height: 1.2; /* Ajuste l'espacement entre les lignes */
}

.fc-col-header, .fc-scrollgrid-sync-table {
	margin: 0;
}

.fc-day-today {
    background-color: var(--nv-light-bg) !important; /* Remplacez #f0f8ff par la couleur désirée */
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-rtl .fc-daygrid-event.fc-event-start {
    margin-right: 2px;
    flex-wrap: wrap;
    text-align: center;
}

.fc-direction-ltr .fc-daygrid-event .fc-event-time {
    margin-right: 0;
}

/* Places disponibles */
.fc-event-places-disponibles .fc-daygrid-event-dot {
	border: calc(var(--fc-daygrid-event-dot-width) / 2) solid #28a745;
}

/* Liste d'attente */
.fc-event-liste-attente .fc-daygrid-event-dot {
	border: calc(var(--fc-daygrid-event-dot-width) / 2) solid #ffc107;
}

/* Complet */
.fc-event-complet .fc-daygrid-event-dot {
	border: calc(var(--fc-daygrid-event-dot-width) / 2) solid #6c757d ;
}

/*POPIN CRENEAU*/
#eventModal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* Par défaut, la popin est masquée */
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/* Ajustement spécifique pour les mobiles */
@media screen and (max-width: 768px) {
    .fc-event {
        padding: 4px; /* Ajouter un padding pour éviter que le texte touche les bords */
    }
	.modal-content {
		margin: 50% auto;
	}
}