$theme-colors: (
			"primary":    $primary,
			"secondary":  $secondary,
			"success":    $success,
			"info":       $info,
			"warning":    $warning,
			"danger":     $danger,
			"light":      $light,
			"dark":       $dark
		);
		:root {
            --primary: #0d6efd;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
        }
		body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #d9d1e8;
            color: #333;
        }
        header {
            background: linear-gradient(45deg, #A27FE5, #6A1B9A);
            color: #fff;
            padding: 1rem;
            text-align: center;
            position: relative;
        }
        .weather {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #A27FE5;
            padding: 0.5rem;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1) ;
        }
		#weather select {
            margin-bottom: 10px;
        }
        .container {
            padding: 1rem 2rem;
        }
        h1, h2, h3, h4 {
            background-color: #a27fe5;
            color: #fff;
            padding: 0.5rem;
            border-radius: 5px;
        }
        .section {
            background-color: #fff;
            margin: 1rem 0;
            padding: 1rem;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .section h2 {
            margin-top: 0;
        }
		footer {
			background: #6A1B9A;
			color: #fff;
			text-align: center;
			padding: 1rem 0;
			margin-top: 2rem;
		}
		#back-to-top {
			display: none; /* Caché par défaut */
			position: fixed;
			bottom: 20px;
			right: 20px;
			z-index: 100;
			background-color: #6A1B9A/* #007BFF */ ;
			color: white;
			border: none;
			padding: 10px 20px;
			border-radius: 5px;
			cursor: pointer;
			font-size: 16px;
		}
		#back-to-top:hover {
			background-color: #A27FE5/* rgba(0,0,0,0.1) #0056b3*/ ;
		}
		.navbar-nav .nav-link {
			color: #fff;
		}
		.navbar-light .navbar-toggler {
			color: #fff;
			border-color: #fff;
		}
		.navbar-light .navbar-toggler-icon {
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
		}
		.table-container {
			margin-bottom: 2rem;
		}
		.table {
			border: 1px solid #ddd;
			background-color: #fff;
		}
		.card {
			margin-bottom: 2rem;
		}
		.card-header {
			background-color: #A27FE5;
			color: #fff;
		}
        #matchInfo {
            margin-top: 20px;
        }
		#liste-entreprises {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.entreprise {
			margin: 10px;
			padding: 10px;
			border: 1px solid #ccc;
			cursor: pointer;
		}
		.entreprise:hover {
			background-color: #f0f0f0;
		}
		#popup-entreprise {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: white;
			padding: 20px;
			border: 1px solid #ccc;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			display: none;
		}
		.contenu-popup {
			max-width: 800px;
			text-align: center;
		}
		#details-entreprise {
			list-style: none;
			margin: 0;
			padding: 0;
		}	
		#fermer-popup {
			float: right;
			padding: 5px 10px;
			background-color: #ccc;
			border: 1px solid #ccc;
			cursor: pointer;
		}
		.tbCal{position: absolute; top: 50; left: 20; border: 1px solid black}
		.DayName {font: 12px Arial; text-align: center; cursor: default;}
		.BtChangeDate {FONT: 12px Arial; WIDTH: 8px; FONT-WEIGHT: bold; cursor: hand; text-align: center;}
		.LbChangeDate {font: 12px Arial; WIDTH: 60px; cursor: hand; text-align: center;}
		.DayOff {BORDER: 1px solid gray; cursor: default;}
		.DayOn {BORDER: 1px solid black; cursor: hand; FONT: 12px Arial; COLOR: black; TEXT-ALIGN: center}
		.DayWorking {BACKGROUND: #D9FECE}
		.DayNotWorking {BACKGROUND: #EEEEEE}
		.DayOver {BACKGROUND: #FFFFCC}
		.DayStart {BACKGROUND: #66CCCC}
		.MonthList {BORDER: 1px solid black; TEXT-ALIGN: center; FONT: 12px Arial; COLOR: black; PADDING: 0px; BACKGROUND: #FFFFFF; WIDTH: 100px; POSITION: absolute;}
		.CellMonthList {BORDER: none; CURSOR: hand; TEXT-ALIGN: center; FONT: 12px Arial; COLOR: black; PADDING: 0px;}
		.CellMonthListOver {BACKGROUND: #FF0000}
		.calendar {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.month {
				border: 1px solid #ccc;
				margin: 10px;
				padding: 10px;
				width: 45%;
				box-sizing: border-box;
		}
		.day {
				display: inline-block;
				width: 12%;
				text-align: center;
				margin: 2px 0;
				cursor: pointer;
				box-sizing: border-box;
		}
		.holiday {
			color: red;
			font-weight: bold;
		}
		#popup {
				display: none;
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border: 1px solid #ccc;
				z-index: 1000;
				background-color: white;
				background: #fff;
				padding: 20px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		}
		#titre-popup {
				font-size: 18px;
				margin-bottom: 10px;
			}
		.week-number {
			font-weight: bold;
			margin-right: 5px;
		}
		.week-days {
			display: flex;
			justify-content: space-between;
		}
		.week-days div {
				width: 12%;
				text-align: center;
		}
		.month-title {
				font-weight: bold;
				text-align: center;
				margin-bottom: 10px;
		}
		#calendrier {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			grid-gap: 10px;
		}
		.mois {
			text-align: center;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.jour {
			border: 1px solid #ccc;
			padding: 10px;
			text-align: center;
			cursor: pointer;
		}
		.jour-selectionne {
			background-color: #99ff99;
		}
		.cache {
			display: none;
		}
#date-time {/* literal date display*/

	text-align: center;
	margin-bottom: 50px;
	text-shadow: 1px 1px 0px white, 0px 0px 20px black;
}
#date-time time {
	display: block;
}
#time {
	font-size: 4em;
}
#date {/* The bars display */
	font-size: 1.2em;
}
#bars .bar {
	width: 100%;
	border: 1px solid black;
	padding: 5px;
	margin: 1px 0;
	/*background-image: linear-gradient(to right, rgb(255, 170, 51) 0%, rgb(220, 20, 60) 100%);*/
	background-image: linear-gradient(45deg, #A27FE5, #6A1B9A  100%);
	background-repeat: no-repeat;
	background-size: 0%;
	box-sizing: border-box;
	border-radius: 5px;
	transition: background-size linear 1s;
	position: relative;
	box-shadow: 0 0 4px gray;
}
#bars .bar::after {
	content: attr(data-what);
	position: absolute;
	right: 5px;
	padding: 0 5px;
	background: rgba(255, 255, 255, .8);
	border-radius: 5px;
	box-shadow: 0 0 1px 0 black inset;
}
#sector-container {
	position: relative;
	margin-top: 50px;
	width: 100%;
	--startWidth: 800px;
	--bandgap: 40px;
}
#sectors {
	position: relative;
	height: calc(var(--startWidth)/2 + 5px);
	margin: 0 auto;
	width: var(--startWidth);
}
.sector {
	--angle: 0deg;
    height: calc(var(--startWidth) / 2);
    width: var(--startWidth);
    overflow: hidden;
    position: relative;
    background: crimson;
	/*background: linear-gradient(to right, rgb(255, 170, 51) 0%, crimson);*/
	background: linear-gradient(to right, #A27FE5, #6A1B9A);
    border-radius: calc(var(--startWidth)/2) calc(var(--startWidth)/2) 0 0;
    border: 1px solid black;
    position: absolute;
    bottom: 0;
	left: var(--bandgap);
	box-sizing: border-box;
	border-bottom-width: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.sector::after {
	content: attr(data-what);
	position: absolute;
	padding: 0 5px;
	background: rgba(255, 255, 255, .8);
	border-radius: 5px;
	top: 9px;
	left: 50%;
	transform: translateX(-50%);
}
.sector::before {
    height: inherit;
    width: inherit;
    position: absolute;
    content: "";
    background-color: white;
    transform-origin: 50% 100%;
    transform: rotate(var(--angle));
    transition: transform linear 1s;
}
#sector-i {
	border-bottom-width: 1px;
	left: 0;
}
#sector-h {
	height: calc(var(--startWidth)/2 - var(--bandgap));
	width: calc(var(--startWidth) - var(--bandgap)*2);
	border-radius: calc(var(--startWidth)/2 - var(--bandgap)) calc(var(--startWidth)/2 - var(--bandgap)) 0 0;
}
#sector-d {
	height: calc(var(--startWidth)/2 - var(--bandgap)*2);
	width: calc(var(--startWidth) - var(--bandgap)*4);
	border-radius: calc(var(--startWidth)/2 - var(--bandgap)*2) calc(var(--startWidth)/2 - var(--bandgap)*2) 0 0;
}
#sector-m {
	height: calc(var(--startWidth)/2 - var(--bandgap)*3);
	width: calc(var(--startWidth) - var(--bandgap)*6);
	border-radius: calc(var(--startWidth)/2 - var(--bandgap)*3) calc(var(--startWidth)/2 - var(--bandgap)*3) 0 0;
}
#sector-y {
	height: calc(var(--startWidth)/2 - var(--bandgap)*4);
	width: calc(var(--startWidth) - var(--bandgap)*8);
	border-radius: calc(var(--startWidth)/2 - var(--bandgap)*4) calc(var(--startWidth)/2 - var(--bandgap)*4) 0 0;
}
#sector-y::after {
	top: 50%;
}
@media (max-width: 900px ) {
	#sector-container {
		--startWidth: 350px;
		--bandgap: 30px;
	}
	.sector::after {
		font-size: .7em;
		width: 80px;
		text-align: center;
	}
}
btn btn-success, button, button button-submit {
	background-color :#d0b9eb;
}

   /* Styles pour la table des matières */
    .toc {
      width: 250px;
      border: 1px solid #ccc;
      padding: 10px;
      margin-right: 20px;
    }

    .toc-title {
      font-weight: bold;
      margin-bottom: 10px;
    }

    .toc-list {
      list-style: none;
      padding: 0;
    }

    .toc-item {
      margin-bottom: 5px;
    }

    .toc-link {
      text-decoration: none;
      color: #333;
    }