body 
	{ 
	display : flex;
	flex-direction : column;
	align-items : center;
	font-family: Arial, sans-serif; 
	background: #fefce0; 
	/*
	background: #f4f4f4; /* quasi blanc
	background: #fefce0; /* jaune sable 
	background: #3d051b; /* marron bordeaux 
	background: #efb185; /* couleur peau 
	*/
	
	}
	
    form 
	{ 
	max-width: 600px;
	margin: 40px auto; 
	/* background: #fff; */
	padding: 25px; 
	border-radius: 8px; 
	/* box-shadow: 0 2px 8px #ccc; */
	}
	
    h2 
	{ 
	text-align: center; 
	color: #5a3e2b; 
	}

    section
	{ 
	display: flex; 
	flex-direction : column;
	margin: 20px 30px; 
	}
	
	.img_promo{
		width : 200px;
		margin : 20px;
	}
	.a_venir {
		font-style : italic;
		color : grey;
	}
	
	footer
	{
	background: #a0a0a0; 
	}
	
    label 
	{ 
	margin-top: 15px; 
	}
	
    input[type="text"], input[type="email"], input[type="date"], input[type="time"], input[type="password"] 
	{
      width: 100%; 
	  padding: 8px; 
	  margin-top: 5px; 
	  border: 1px solid #ccc; 
	  border-radius: 4px;
    }
	
    input[type="submit"] 
	{
      margin-top: 20px; 
	  width: 100%; 
	  padding: 10px; 
	  background: #8bc34a; 
	  color: #fff; 
	  border: none; 
	  border-radius: 4px; 
	  cursor: pointer;
    }
	
    input[type="submit"]:hover 
	{ 
	background: #7cb342; 
	}
	
    .error 
	{ 
	color: #d32f2f; 
	text-align: center; 
	}
	
    .success 
	{ 
	color: #388e3c; 
	text-align: center; 
	}
/*	*/
    .page_selection 
	{ 
	color: #388e3c; 
	background: #8bc34a; 

	}

	
/* style pour le bandeau haut */
	header 
	{
		width: 80%;
		/* height: 60px;
		background: #FF0000;*/
		background-image : url("images/logo.webp");
		background-repeat : no-repeat;
		background-size : auto 100% ;
		background-position : center;
		background-color : transparent;
	}
	#titre {
		text-align : center;
		font-size: 30px;
		background: #fefce0; 

	}
	#logo {
		height: 250px;

	}
	
	.head
	{
		display: flex;
		flex-direction : row;
		justify-content : space-between;
		align-items : center;
		flex-wrap: no-wrap;
	}
	.ligne
	{
		display: flex;
		flex-direction : row;
		align-items : center;
		flex-wrap: nowrap;
		justify-content: stretch;
		
		
	}
	.colonne
	{
		display: flex;
		flex-direction : column;		
		
	}
	
/* style pour le menu */
	nav 
	{
		margin: 50px auto;
		width: 80%;
		height: 60px;
		background: #48435C;
	}
	 
	nav .main_pages 
	{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	 
	nav .main_pages a 
	{
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60px;
		text-decoration: none;
		font-family: Arial, sans-serif;
		color: white;
	}
/*	*/
    nav .main_pages a .page_selection 
	{ 
	color: #388e3c; /* vert */
	background: #8bc34a; /*autre vert */

	}
	 
	nav a:hover 
	{
		background: #5A5766 /* gris clair */
	}

/* style pour la page du semainier */
	table 
	{ 
		border-collapse: collapse; 
	}
	td, th 
	{ 
		border: 1px solid #333;
		width: 120px;
		height: 50px;
		text-align: center; 
	}
	div#CFR {
		border: none;
		width: 456px;
		height: 700px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		padding: 0px;
		background-image: url(images/femme1.png);
		background-repeat: no-repeat;
	}
	
	.indisponible 
	{ 
		background: #a0a0a0; 
		cursor: pointer; 
	}
	.libre 
	{ 
		background: #00e000; 
		cursor: pointer; 
	}
	.réservé 
	{ 
		background: #e00000; 
		cursor: pointer; 
	}
	/* dégradé des couleurs pour les zones de massage */
	.degrade{
		width : 300px;
	}
	.peau{ 
		background: #fae1e5; /* couleur de la peau des modèles */
	}	
		
	.interdit
	{ 
		background: #101010; 
		color : #FFFFFF;
		cursor: pointer; 
		opacity: 0.5;
	}
	.interdit:hover 
	{	
		opacity: 0.9;
	}

	.temps0
	{ 
		background: #AAAAAA; /* #c500ff violet foncé */
		cursor: pointer; 
		opacity: 0.5;
	}
	.temps0:hover 
	{	
		opacity: 0.9;
	}
	
	.temps05
	{ 
		background: #00a1ff; /* bleu foncé */
		cursor: pointer; 
		opacity: 0.5;
	}
	.temps05:hover 
	{	
		opacity: 0.9;
	}
	
	.temps1
	{ 
		background: #23ff5a; /* vert pomme */
		cursor: pointer; 
		opacity: 0.5;
	}
	.temps1:hover 
	{	
		opacity: 0.9;
	}
	
	.temps15
	{ 
		background: #dbff64; /* jaune vert */
		cursor: pointer; 
		opacity: 0.5;
	}
	.temps15:hover 
	{	
		opacity: 0.9;
	}
	
/* style pour la page des descriptif de massages */
	#lomi-lomi
	{ 
		display : none ;
	}
		
	
/* style pour le menu responsive pour un écran de téléphone*/
	#labelMenu, #toggle
	{
		display: none;
	}
	 
	@media all and (max-width: 801px)
	{
		nav
		{
			height: 60px;
		}
	 
		nav .main_pages 
		{
			display: none;
			flex-direction: column;
			background: #48435C; /* gris foncé */
			height: 100px; /* Hauteur du menu après le clic sur le menu */
		}
	 
		nav .main_pages a {
			width: 50%;
		}
	 
		#labelMenu 
		{
			width: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			font-size: 40px;
			color: white;
			cursor: pointer;
		}
	 
		#toggle:checked + .main_pages {
			display: flex;
		}
	}
	/* style pour la page des tarifs */
	input[type="range"] {
		position: relative;
		margin-left: 1em;
	}
	input[type="range"]:after,  input[type="range"]:before {
		position: absolute;
		top: 1em;
		color: #aaa;
	}
	input[type="range"]:before {
		left:0em;
		content: attr(min);
	}
	input[type="range"]:after {
		right: 0em;
		content: attr(max);
	}