/* Desktop 
	/* @media screen and (min-width : 1024 px) 
    /* Tablet 
	/* @media screen and (min-width : 768px) and (max-width : 1023 px) 
    /* Smartphone 
	/* @media screen and (max-width : 767 px) 
	*/
	
	
	body 
	{ 
	display : flex;
	flex-direction : column;
	align-items : center;
	font-family: Arial, sans-serif; 
	font-size: 100%;
	background: #fefce0; 
	width:95%;
	margin: 0 auto; 
	/*
	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,h3,h4 
	{ 
	text-align: center; 
	color: #5a3e2b; 
	}

    section
	{ 
	display: flex; 
	flex-direction : column;
	margin: 20px 30px; 
	}
	

	.a_venir {
		font-style : italic;
		color : grey;
	}
	
	footer
	{
	width:100%; 	
	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: 100%;
		/* height: 60px;
		background: #FF0000;*/
		background-image : url("images/logo.webp");
		background-repeat : no-repeat;
		background-size : auto 50% ;
		background-position : center;
		background-color : transparent;
		display: flex;
		flex-direction : row;
		justify-content : space-between;
		align-items : center;
		flex-wrap: wrap;
	}

	#logo {
		width: 25%;

	}
	#img_logo {
		width: 100%;
	}
	.img_icone {
		height : 100%;
		width : 50%;
	}
	#titre {
		text-align : center;
		background: #fefce0; 
		width: 50%;
	}
	#log {
		width: 25%;
	}

	#div_talents{
	position: relative; /* Important pour positionner le pseudo-élément */ 
	}
	
	#div_talents::before {
		content: ""; 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
		background-image : url("images/talents.png");
		filter:alpha(opacity=20);
        opacity:0.2;		
		background-repeat : space;
		background-size : auto 80% ;
		background-position : center;
		/*background-color : transparent;*/
		z-index: -1; /* Placer l'image derrière le contenu */ 
	}
	
	#div_bouche { 
	position: relative; /* Important pour positionner le pseudo-élément */ 
	} 
	#div_bouche::before { 
		/*border: 2px solid black;
		border-radius: 15%;*/
		content: ""; 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
		background-image: url("images/bouche_oreille2.png"); 
		background-repeat : space;
		background-position : center;
		background-size: auto 80%; /* Ajustez selon vos besoins */ 
		opacity: 0.3; 
		z-index: -1; /* Placer l'image derrière le contenu */ 
	} 

	
	.opaque{
	
		
	}
	

	.ligne
	{
		display: flex;
		flex-direction : row;
		align-items : center;
		flex-wrap: no-wrap;
		justify-content: stretch;
	}
	.img_icone{
		width : 2em;
		height : 2em;
	}
	
	.img_promo{
		
		margin : 10px;
		width : 40%;
		padding:4px;
		background-color:#fff;
		border:1px solid #ccc;
		border:1px solid rgba(0,0,0,0.2);
		-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);
		-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);
		box-shadow:0 1px 3px rgba(0,0,0,0.1);
		text-align: center;
		float: left;
	}
	
	
	.colonne
	{
		display: flex;
		flex-direction : column;		
		
	}
	

/* style pour la page du semainier et listeMassage*/
	table 
	{ 
		border-collapse: collapse; 
	}
	td, th 
	{ 
		border: 1px solid #333;
		width: 120px;
		height: 50px;
		text-align: center; 
	}
	#icone_valider{
		display : none;
	}
	#icone_editer{
		display : none;
	}
	
	td:has(#icone_editer):hover #icone_editer{ /* l'icone éditer qui apparait au survol du td qui le contient */
		display : inline;
	}
	
	
	[contenteditable="true"] {
		caret-color: red;
	}

	#carte_corps{
		display : none;
	}

	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 */
		text-align : center;
	}	
		
	.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 */
	nav 
	{
		margin: 0px auto 20px;
		width: 100%;
		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 le menu responsive pour un écran de téléphone*/
	#labelMenu, #toggle
	{
		display: none;
	}
	 
	@media all and (max-width: 801px)
	{
		nav
		{
			height: 60px;
			margin: 0px auto 30px; /* ici on modifie l'espace sous le menu en mode telephone */

		}
	 
		nav .main_pages 
		{
			display: none;
			flex-direction: column;
			background: #48435C; /* gris foncé */
			height: 150px; /* 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;
		}
/*
Rappel des règles : 
A,B : cible les A et les B
A B : cible tous les B imbriqués dans un A
A>B : cible le B imbriqué directement après le A
A+B : cible uniquement le B "frère" placé directement après le A
A~B : cible tous les B (jusqu'à la fin) après un A	 
*/
		#toggle:checked + .main_pages {/* cible le .main_pages directement après le #toggle */
			display: flex;
		}
	}
		nav:has(#toggle:checked) {/* cible le nav si contient #toggle */
			margin: 0px auto 150px; /* ici on modifie l'espace sous le menu en mode telephone */
		}
	}	
/* 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);
	}