/************************************************** DECLARATION DE VARIABLE ***************************************/
 :root {
	--vert: rgb(166, 228, 39);
	--brun: rgb(113, 68, 47);
	--beige: rgb(210, 180, 140);
	--beige_clair: rgb(238, 232, 170);
	--orange:rgb(255, 69, 0);
	--vert_transparent: rgb(166, 228, 39, 0.9);
	--brun_transparent: rgb(126, 51, 0, 0.6);
	--brun_tres_transparent: rgb(126, 51, 0, 0.3);
	--beige_transparent: rgb(210, 180, 140, 0.7);
	--beige_tres_transparent: rgb(210, 180, 140, 0.4);
	--orange_transparent:rgba(255, 69, 0, 0.4);

	
	
	--gris_anthracite: rgb(45, 45, 45);
	--gris_tres_fonce: rgb(60, 60, 60);
	--gris_fonce: rgb(80, 80, 80);
	--gris_moyen: rgb(110, 110, 110);
	--gris_pale: rgb(130, 130, 130);
	--gris_tres_pale: rgb(150, 150, 150);
	--gris_tres_tres_pale: rgb(200, 200, 200);
	--blanc_casse: rgb(230, 230, 230);
	--blanc:rgb(255, 255, 255);
	--rouge:rgb(255, 0, 0);
	 --jaune_post_it: rgb(244, 208, 63); 
	
	--hauteur_bandeau: 0px;
}



/************************************************************ PAGE *************************************************/
html
{
	background-color: var(--blanc);
	/* background-image: url("images/fond_bandeau_coiffure_evasion.png"); */
	/* background-repeat:no-repeat; */
	/* background-size: 100%; */
	color:var(--brun);
	font-family: "Century Gothic", Verdana;
	font-size:0.95em;
}



/***************************************************** ZONE DE TRAVAIL *********************************************/
body {
	margin:0px;
}



/********************************************************* ENTETE **************************************************/
#bandeau_evenement	{
	background-color: var(--brun);
//	background-color: var(--rouge);
	color: var(--blanc);

	padding:10px 0px;

	display: grid;
	grid-template-columns: auto 50% auto;
//	grid-template-columns: auto 90% auto;
	grid-template-areas: 
		"img_gauche		texte	img_droite"
}
#bandeau_evenement .texte_bandeau_evenement	{
	grid-area: texte;
	text-align:center;
//	line-height:50px;
	vertical-align:bottom;
}
#bandeau_evenement .texte_bandeau_evenement		a 	{
	color: var(--blanc);
}
#bandeau_evenement .image_bandeau_evenement_gauche		{
	grid-area: img_gauche;
	text-align:right;
}
#bandeau_evenement .image_bandeau_evenement_droite		{
	grid-area: img_droite;
	text-align:left;
}
#bandeau_evenement .image_bandeau_evenement_gauche	img	{
	height:50px; 
	margin-right:20px;
} 
#bandeau_evenement .image_bandeau_evenement_droite	img	{
	height:50px;
	margin-left:20px;
}  

#entete {
	background-image: url("images/fond_bandeau_coiffure_evasion.png");
	background-repeat:no-repeat;
	background-size: 100%;
	height:328px;
	
	margin:0px;
	display: grid;
	grid-template-columns: 40% 50% auto;
	grid-template-rows: 40px 0px auto;  
	grid-template-areas: 
		"nav		nav			nav"
		"picto		logo		barbier"
	
}

#entete 	nav	{
	grid-area:nav;
	border-bottom:1px solid var(--brun);
	margin:0px;
	padding:10px 0px;
	text-align:center;
	
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; 
	grid-column-gap: 10px;
	width:100%;
}
#entete 	nav		a	{
	color: var(--blanc);
}
#entete 	nav		.page_active	a 	{
	color: var(--brun);
}

#entete 	.pictogrammes_salon		{
	grid-area: picto;
}
#entete 	.pictogrammes_salon		img		{
	width:60%;
	margin:6% 0px 0px 7%;
}
#entete 	.logo_salon	{
	grid-area:logo;
	text-align:right;
}
#entete 	.logo_salon		img		{
	width:80%;
	margin-top:3%;
}
#entete .enseigne_barbier	{
	grid-area: barbier;
}
#entete .enseigne_barbier	img:nth-child(1)	{		/* Image de fond */
	position:relative; 
	float:right;
	right:0px;
	top:35px; 
	z-index:1;
}
#entete .enseigne_barbier	img:nth-child(2)	{		/* image animée */
	position:relative; 
	float:right;
	right:-28px;
	top:55px; 
	z-index:1;
	height:60px;
	width:25px;
}

/*********************************************************** PIED DE PAGE *********************************************/
#message_erreur {
	width:90%;
	margin:30px auto;
	padding:10px;
	background-color:var(--rouge);
	color: var(--jaune_post_it);
	text-align:center;
}

/*********************************************************** PIED DE PAGE *********************************************/
#pied_de_page {
	margin:50px 0px;
	padding:0px;
	width:100%;
//	background-color:var(--brun);
	text-align:center;
	font-size:0.8em;
	border-top:1px solid;
}
#pied_de_page 	a	{
	display:inline-block;
	padding:10px 0px;
	margin-right:20px;
}
#pied_de_page 	a.lien_texte	{
	position:relative; 
	top:-10px;
}
#pied_de_page 	.image	{
	display:inline-block;
	padding:10px 0px;
	margin-right:20px;
}
#pied_de_page 	img	{
	width:30px;
}

/********************************************************* TITRES ********************************************/
h1	{
	margin:20px 0px 20px 0px;
	padding:10px 0px;
	border-radius:100px;
	border:1px solid var(--brun);
//	border-bottom:1px solid var(--brun);
	position:relative;
	font-size:1.2em;
	font-weight: 700;
}
h2	{
	color:var(--brun);
	border-radius:100px;
	border:1px solid var(--brun);
	font-size:1.2em;
//	font-weight:100;
	padding:10px 0px;
	margin:0px 0px 20px 0px;
}
h3	{
	font-size:1em;
	font-weight:100;
	padding:0px 0px;
	margin:0px 0px 20px 0px;
	text-align:justify;
}

/****************************************************** TABLEAUX STANDARD *****************************************/
table 	{
	border-collapse:collapse;
}

th /* Les cellules d'entête */
{
}

td /* Les cellules normales */
{
}

legend	{
	color:olive;
}



/***************************************************** FORMULAIRES ***************************************************/
input, textarea, select
{
}
input::placeholder {
  color: var(--brun_transparent);
  font-style:italic;
  font-size:0.7em;
}

fieldset	{
}



/********************************************************* LIENS HYPERTEXTES ***************************************/
a {
	color:var(--brun);
	font-weight:bold;
	text-decoration: none;
}


a:hover { 	/* Quand on pointe sur un lien du menu */
}

a img { 
}

button
{
//	display:block;
	width:100%;
	background-color: white;		/* Evite d'avoir un fond "blanc sâle" à l'arrière des boutons...*/
	border:none;
	border-radius:5px;
	padding:5px 5px 5px 20px;
//	font-family: Georgia, Verdana; 
//	font-size:1em;
	color: var(--brun);
	font-weight:bold;
	cursor:pointer;
	text-align:left;
}
.bouton_actif	button
{
	background-color: var(--brun);
	color: var(--blanc);
}

/***********************************************************************************************************************
Fichier Accueil.php
***********************************************************************************************************************/

#Accueil	{
	width:90%;
	max-width:1000px;
	margin:var(--hauteur_bandeau) auto 0px auto;
}

#Accueil	#accueil	{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr; 
	grid-column-gap: 10px;
	width:100%;
}
#Accueil	#accueil	.texte	{
	text-align:justify;
}

#Accueil	#accueil	#salon	{
	text-align:center;
	padding:10px;
}
#Accueil	#accueil	#salon	img	{
	margin:5px;
	height:150px;
	border-radius:5px;
}

#Accueil	#accueil	#rendez_vous	{
	text-align:center;
	padding:10px;
}
#Accueil	#accueil	#rendez_vous	img	{
	margin:5px;
	height:150px;
	border-radius:5px;
	border:1px solid;
}

#Accueil	#accueil	#services	{
	text-align:center;
	padding:10px;
}
#Accueil	#accueil	#services	img	{
	margin:5px;
	height:150px;
	border-radius:5px;
}


/***********************************************************************************************************************
Fichier Index.php
***********************************************************************************************************************/


#Index		{

}



/***********************************************************************************************************************
Fichier Mentions_legales.php
***********************************************************************************************************************/

#Mentions_legales		{
	width:90%;
	max-width:1000px;
	margin:var(--hauteur_bandeau) auto 0px auto;
}
#Mentions_legales	h1	{
	margin-top:50px;
	border:none;
	border-radius:0px;
	border-top:1px solid;
}
#Mentions_legales	p	{
	text-align:justify;
}



/***********************************************************************************************************************
Fichier Rendez_vous.php
***********************************************************************************************************************/
#Rendez_vous	{
	width:90%;
	max-width:1000px;
	margin:var(--hauteur_bandeau) auto 0px auto;
}

#Rendez_vous  	#message_info_rdv	 {
	grid-area: message_info_rdv;
	border:2px solid var(--rouge);
	font-size:0.8em;
	font-weight:800;
	padding:5px 0px;
	margin-bottom:20px;
	text-align:center;
}

#Rendez_vous  	#planning		 {
	width:100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr; 
	grid-template-rows: auto;
	grid-column-gap: 50px;
	grid-row-gap: 30px;
	grid-template-areas: "selection_genre_client 	selection_type_rdv		selection_collaborateur"
						 "selection_date 			calendrier_rdv			calendrier_rdv";
	
//	border:1px solid red;
}
#Rendez_vous	#planning	h3	{
	height:1em;
}
#Rendez_vous	#planning	h3	img	{
	width:20px;
	float:left;
}
#Rendez_vous	#planning	h3	.texte_h3	{
	float:left;
	width:90%;
	margin:0px 0px 20px 10px;
}
#Rendez_vous	#planning	h3.alerte	{
	color:red;
	font-weight:900;
}

#Rendez_vous  	#planning	#selection_genre_client	 {
	grid-area: selection_genre_client;
	border-top:1px solid;
	padding-top:10px;
	//	border:1px solid blue;
}
#Rendez_vous  	#planning	#selection_genre_client	 button	{
	border:1px solid;
	margin-top:1px;
}

#Rendez_vous  	#planning	#selection_type_rdv	 {
	grid-area: selection_type_rdv;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#planning	#selection_type_rdv	 button	{
	border:1px solid;
	margin-top:1px;
}

#Rendez_vous  	#planning	#selection_collaborateur	 {
	grid-area: selection_collaborateur;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#planning	#selection_collaborateur	 button	{
	border:1px solid;
	margin-top:1px;
}

#Rendez_vous  	#planning	#selection_date	 {
	grid-area: selection_date;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#planning	#selection_date	 .calendrier	table	{
	width:100%;
}
#Rendez_vous  	#planning	#selection_date	 .calendrier	table	button		{
	padding:0px;
	margin:0px;
	text-align:center;
	border-radius:0px;
	background-color:transparent;
}
#Rendez_vous  	#planning	#selection_date	 .calendrier	table 	thead 	th	 {		
	text-align:center;
	font-size:1.2em;
}
#Rendez_vous  	#planning	#selection_date	 .calendrier	table	 thead 	th	 img	{
	width:30px;
}
#Rendez_vous  	#planning	#selection_date	 .calendrier	table 	tr:nth-child(1)		td	 {		
	text-align:center;
	width:14%;
}
#Rendez_vous  	#planning	#selection_date	 .calendrier	table 	tr	td.week_end	 {		
	background-color:rgba(128, 128, 0, 0.3);
}
#Rendez_vous  	#planning	#selection_date	 .calendrier	table 	tr	td.today	 {		
	border:1px solid orange;
}
#Rendez_vous  	#planning	#selection_date	 .calendrier	table 	tr	td.current_week	 {		
	background-color:rgba(128, 128, 0, 0.8);	
}
#Rendez_vous  	#planning	#selection_date	 .calendrier	table 	tr	td.current_day	 {		
//	background-color:rgba(128, 128, 0, 0.6);	
}
#Rendez_vous  	#planning	#selection_date	 #textes_publics_indisponibilites	p {
	font-size:0.8em;
}
#Rendez_vous  	#planning	#selection_date	p.commentaire_calendrier	 {
	font-size:0.8em;
	color:red;
}

#Rendez_vous  	#planning	#calendrier_rdv	 {
	grid-area: calendrier_rdv;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#planning	#calendrier_rdv	 table	{
	width:100%;
}
#Rendez_vous  	#planning	#calendrier_rdv	 table	tr:last-child	{
	border-bottom:1px solid; 
}
#Rendez_vous  	#planning	#calendrier_rdv	 table	td	{
	width:12%;
	height:20px;
}
#Rendez_vous  	#planning	#calendrier_rdv	 table	td:nth-child(1)	{
	width:5%;
	text-align:right;
	font-size:0.8em;
}
#Rendez_vous  	#planning	#calendrier_rdv	 table	td.colonne_minutes {
	border-bottom:1px solid; 
	font-size:0.6em;
}
#Rendez_vous  	#planning	#calendrier_rdv	 table	td.Salon_ferme	{
	background-color:rgba(128, 128, 0, 0.2);
}
#Rendez_vous  	#planning	#calendrier_rdv	 table	td.Absence_individuelle	{
}
#Rendez_vous  	#planning	#calendrier_rdv	 table	td.Collaborateur_occupe {
}
#Rendez_vous  	#planning	#calendrier_rdv	 table	td	button	{
	background-image: url("images/rendez_vous_vert.png");
	background-repeat:no-repeat;
	background-size:100% 100%; 
	border-radius:0px;
	margin:1px 1px;
	height:100%;
	padding:0px;
	text-align:center;
	font-size:0.8em;
}


#Rendez_vous  	#identification_client		 {
	width:100%;
	display: grid;
	grid-template-columns: 1fr 2fr; 
	grid-template-rows: auto;
	grid-column-gap: 30px;
	grid-template-areas: 	"message_info_rdv 		message_info_rdv"
							"resume_rendez_vous 	coordonnees_client"
							"menu_retour			menu_retour";
//	border:1px solid red;
}
#Rendez_vous  	#identification_client	#resume_rendez_vous	 {
	grid-area: resume_rendez_vous;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#identification_client	#resume_rendez_vous	 div	{
	text-align:center;
	margin:10px 0px;
}
#Rendez_vous  	#identification_client	#resume_rendez_vous	 .affichage_date	{
	font-weight:900;
}
#Rendez_vous  	#identification_client	#resume_rendez_vous	 .affichage_heure	{
	font-weight:900;
}
#Rendez_vous  	#identification_client	#resume_rendez_vous	 .affichage_collaborateur	{
	font-weight:900;
}
#Rendez_vous  	#identification_client	#resume_rendez_vous	 .affichage_type_rendez_vous	{
	font-weight:900;
}
#Rendez_vous  	#identification_client	#coordonnees_client	 {
	grid-area: coordonnees_client;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#identification_client	#coordonnees_client		h3	img	{
	width:20px;
	float:left;
	margin-right:10px;
}
#Rendez_vous  	#identification_client	#coordonnees_client		h3	.texte_h3	{
	float:left;
	width:90%;
	margin:0px 0px 20px 10px;
}
#Rendez_vous  	#identification_client	#coordonnees_client		.formulaire_coordonnees		input	{
	width:60%;
}
#Rendez_vous  	#identification_client	#coordonnees_client		.formulaire_no_client		input	{
	width:70px;
}
#Rendez_vous  	#identification_client	#coordonnees_client		.bouton_actif	{
//	grid-column: 1 / span 2;
	margin-top:10px;
}
#Rendez_vous  	#identification_client	#coordonnees_client		.formulaire_coordonnees	{
	display: grid;
	grid-template-columns: 25% auto; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
	width:100%;
	margin: 0px 0px 30px 0px;
//	border:1px solid blue;
}
#Rendez_vous  	#identification_client	#coordonnees_client		.formulaire_no_client	{
	display: grid;
	grid-template-columns: 25% auto; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	width:100%;
	margin: 0px 0px 30px 0px;
//	border:1px solid blue;
}
#Rendez_vous  	#identification_client	#menu_retour	{
	grid-area: menu_retour;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#identification_client	#menu_retour		.formulaire_retour	{
	display: grid;
	grid-template-columns: 2fr 10fr; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	width:100%;
	margin: 0px 0px 0px 0px;
//	border:1px solid blue; 
}


#Rendez_vous  	#recherche_client		 {
	width:100%;
	display: grid;
	grid-template-columns: 1fr 2fr; 
	grid-template-rows: auto;
	grid-column-gap: 30px;
	grid-template-areas: 	"message_info_rdv 		message_info_rdv"
							"resume_rendez_vous 	coordonnees_client	"
							"menu_retour			menu_retour";
//	border:1px solid red;
}
#Rendez_vous  	#recherche_client	#resume_rendez_vous	 {
	grid-area: resume_rendez_vous;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#recherche_client	#resume_rendez_vous	 div	{
	text-align:center;
	margin:10px 0px;
}
#Rendez_vous  	#recherche_client	#resume_rendez_vous	 .affichage_date	{
	font-weight:900;
}
#Rendez_vous  	#recherche_client	#resume_rendez_vous	 .affichage_heure	{
	font-weight:900;
}
#Rendez_vous  	#recherche_client	#resume_rendez_vous	 .affichage_collaborateur	{
	font-weight:900;
}
#Rendez_vous  	#recherche_client	#resume_rendez_vous	 .affichage_type_rendez_vous	{
	font-weight:900;
}
#Rendez_vous  	#recherche_client	#coordonnees_client	 {
	grid-area: coordonnees_client;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#recherche_client	#coordonnees_client		h3	img	{
	width:20px;
	float:left;
	margin-right:10px;
}
#Rendez_vous  	#recherche_client	#coordonnees_client		h3	.texte_h3	{
	float:left;
	width:90%;
	margin:0px 0px 20px 10px;
}
#Rendez_vous  	#recherche_client	#coordonnees_client		input	{
	width:60%;
}
#Rendez_vous  	#recherche_client	#coordonnees_client		.bouton_actif	{
//	grid-column: 1 / span 2;
	margin-top:10px;
}
#Rendez_vous  	#recherche_client	#coordonnees_client		.formulaire_coordonnees	{
	display: grid;
	grid-template-columns: 25% auto; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
	width:100%;
	margin: 0px 0px 30px 0px;
//	border:1px solid blue;
}
#Rendez_vous  	#recherche_client	#coordonnees_client		.formulaire_coordonnees		.avertissement_client_multiples	{
	grid-column: 1 / span 2;
}
#Rendez_vous  	#recherche_client	#coordonnees_client		.formulaire_coordonnees		.avertissement_client_multiples	.client_existant	a	{
	display:block;
	margin:10px 0px;
	border-left:3px solid;
	border-bottom:1px solid;
	padding:0px 0px 5px 10px;

}
#Rendez_vous  	#recherche_client	#menu_retour	{
	grid-area: menu_retour;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#recherche_client	#menu_retour		.formulaire_retour	{
	display: grid;
	grid-template-columns: 2fr 10fr; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	width:100%;
	margin: 0px 0px 0px 0px;
//	border:1px solid blue; 
}


#Rendez_vous  	#nouveau_client		 {
	width:100%;
	display: grid;
	grid-template-columns: 1fr 2fr; 
	grid-template-rows: auto;
	grid-column-gap: 30px;
	grid-template-areas: 	"message_info_rdv 		message_info_rdv"
							"resume_rendez_vous 	coordonnees_client	"
							"menu_retour			menu_retour";
//	border:1px solid red;
}
#Rendez_vous  	#nouveau_client	#resume_rendez_vous	 {
	grid-area: resume_rendez_vous;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#nouveau_client	#resume_rendez_vous	 div	{
	text-align:center;
	margin:10px 0px;
}
#Rendez_vous  	#nouveau_client	#resume_rendez_vous	 .affichage_date	{
	font-weight:900;
}
#Rendez_vous  	#nouveau_client	#resume_rendez_vous	 .affichage_heure	{
	font-weight:900;
}
#Rendez_vous  	#nouveau_client	#resume_rendez_vous	 .affichage_collaborateur	{
	font-weight:900;
}
#Rendez_vous  	#nouveau_client	#resume_rendez_vous	 .affichage_type_rendez_vous	{
	font-weight:900;
}
#Rendez_vous  	#nouveau_client	#coordonnees_client	 {
	grid-area: coordonnees_client;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#nouveau_client	#coordonnees_client		h3	img	{
	width:20px;
	float:left;
	margin-right:10px;
}
#Rendez_vous  	#nouveau_client	#coordonnees_client		h3	.texte_h3	{
	float:left;
	width:90%;
	margin:0px 0px 20px 10px;
}
#Rendez_vous  	#nouveau_client	#coordonnees_client		h3	.texte_h3	.commentaires	{
	font-size:0.8em;
}
#Rendez_vous  	#nouveau_client	#coordonnees_client		input	{
	width:60%;
}
#Rendez_vous  	#nouveau_client	#coordonnees_client		.formulaire_coordonnees	{
	display: grid;
	grid-template-columns: 25% auto; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
	width:100%;
	margin: 0px 0px 30px 0px;
//	border:1px solid blue;
}
#Rendez_vous  	#nouveau_client	#coordonnees_client		.texte_rgpd	{
	margin: 0px 0px 30px 0px;
	text-align:justify;
//	border:1px solid blue;
}
#Rendez_vous  	#nouveau_client	#menu_retour	{
	grid-area: menu_retour;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#nouveau_client	#menu_retour		.formulaire_retour	{
	display: grid;
	grid-template-columns: 2fr 10fr; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	width:100%;
	margin: 0px 0px 0px 0px;
//	border:1px solid blue; 
}






#Rendez_vous  	#verification_no_client		 {
	width:100%;
	display: grid;
	grid-template-columns: 1fr 2fr; 
	grid-template-rows: auto;
	grid-column-gap: 30px;
	grid-template-areas: 	"message_info_rdv 		message_info_rdv"
							"resume_rendez_vous 	coordonnees_client	"
							"menu_retour			menu_retour";
//	border:1px solid red;
}
#Rendez_vous  	#verification_no_client	#resume_rendez_vous	 {
	grid-area: resume_rendez_vous;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#verification_no_client	#resume_rendez_vous	 div	{
	text-align:center;
	margin:10px 0px;
}
#Rendez_vous  	#verification_no_client	#resume_rendez_vous	 .affichage_date	{
	font-weight:900;
}
#Rendez_vous  	#verification_no_client	#resume_rendez_vous	 .affichage_heure	{
	font-weight:900;
}
#Rendez_vous  	#verification_no_client	#resume_rendez_vous	 .affichage_collaborateur	{
	font-weight:900;
}
#Rendez_vous  	#verification_no_client	#resume_rendez_vous	 .affichage_type_rendez_vous	{
	font-weight:900;
}
#Rendez_vous  	#verification_no_client	#coordonnees_client	 {
	grid-area: coordonnees_client;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#verification_no_client	#coordonnees_client		h3	img	{
	width:20px;
	float:left;
	margin-right:10px;
}
#Rendez_vous  	#verification_no_client	#coordonnees_client		h3	.texte_h3	{
	float:left;
	width:90%;
	margin:0px 0px 20px 10px;
}
#Rendez_vous  	#verification_no_client	#coordonnees_client		input	{
	display:inline-block;
	width:2em;
	text-align:center;
}
#Rendez_vous  	#verification_no_client	#coordonnees_client		.bouton_actif	{
//	grid-column: 1 / span 2;
	margin-top:10px;
}
#Rendez_vous  	#verification_no_client	#coordonnees_client		.formulaire_no_client	{
	display: grid;
	grid-template-columns: 25% auto; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
	width:100%;
	margin: 0px 0px 30px 0px;
//	border:1px solid blue;
}
#Rendez_vous  	#verification_no_client	#coordonnees_client		.formulaire_no_client	.saisie_derniers_chiffres_tel	{
	grid-column: 1 / span 2;
}
#Rendez_vous  	#verification_no_client	#menu_retour	{
	grid-area: menu_retour;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#verification_no_client	#menu_retour		.formulaire_retour	{
	display: grid;
	grid-template-columns: 2fr 10fr; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	width:100%;
	margin: 0px 0px 0px 0px;
//	border:1px solid blue; 
}


#Rendez_vous  	#validation_rdv		 {
	width:100%;
	display: grid;
	grid-template-columns: 1fr 2fr; 
	grid-template-rows: auto;
	grid-column-gap: 30px;
	grid-template-areas: 	"message_info_rdv 		message_info_rdv"
							"resume_rendez_vous 	coordonnees_client	"
							"menu_retour			menu_retour";
//	border:1px solid red;
}
#Rendez_vous  	#validation_rdv	#resume_rendez_vous	 {
	grid-area: resume_rendez_vous;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#validation_rdv	#resume_rendez_vous	 div	{
	text-align:center;
	margin:10px 0px;
}
#Rendez_vous  	#validation_rdv	#resume_rendez_vous	 .affichage_date	{
	font-weight:900;
}
#Rendez_vous  	#validation_rdv	#resume_rendez_vous	 .affichage_heure	{
	font-weight:900;
}
#Rendez_vous  	#validation_rdv	#resume_rendez_vous	 .affichage_collaborateur	{
	font-weight:900;
}
#Rendez_vous  	#validation_rdv	#resume_rendez_vous	 .affichage_type_rendez_vous	{
	font-weight:900;
}
#Rendez_vous  	#validation_rdv	#coordonnees_client	 {
	grid-area: coordonnees_client;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#validation_rdv	#coordonnees_client		h3	img	{
	width:20px;
	float:left;
	margin-right:10px;
}
#Rendez_vous  	#validation_rdv	#coordonnees_client		h3	.texte_h3	{
	float:left;
	width:90%;
	margin:0px 0px 20px 10px;
}
#Rendez_vous  	#validation_rdv	#coordonnees_client		input	{
	width:60%;
}
#Rendez_vous  	#validation_rdv	#coordonnees_client		.formulaire_coordonnees	{
	display: grid;
	grid-template-columns: 25% auto; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	grid-row-gap: 10px;
	width:100%;
	margin: 0px 0px 30px 0px;
//	border:1px solid blue;
}
#Rendez_vous  	#validation_rdv	#coordonnees_client		.formulaire_coordonnees	div:nth-child(2n)	{
	font-weight:700;
}
#Rendez_vous  	#validation_rdv	#menu_retour	{
	grid-area: menu_retour;
	border-top:1px solid;
	padding-top:10px;
//	border:1px solid blue;
}
#Rendez_vous  	#validation_rdv	#menu_retour		.formulaire_retour	{
	display: grid;
	grid-template-columns: 2fr 10fr; 
	grid-template-rows: auto;
	grid-column-gap: 20px;
	width:100%;
	margin: 0px 0px 0px 0px;
//	border:1px solid blue; 
}


#Rendez_vous  	#confirmation_rdv		 {
	width:100%;
	display: grid;
	grid-template-columns: 1fr; 
//	border:1px solid red;
}
#Rendez_vous  	#confirmation_rdv	#resume_rendez_vous	 {
	border-top:1px solid;
	padding-top:10px;
}
#Rendez_vous  	#confirmation_rdv	#resume_rendez_vous	 div	{
	text-align:center;
	margin:10px 0px;
}
#Rendez_vous  	#confirmation_rdv	#resume_rendez_vous	 div	img	{
	width:20px;
}
#Rendez_vous  	#confirmation_rdv	#resume_rendez_vous	 .affichage_date	{
	font-weight:900;
}
#Rendez_vous  	#confirmation_rdv	#resume_rendez_vous	 .affichage_heure	{
	font-weight:900;
}
#Rendez_vous  	#confirmation_rdv	#resume_rendez_vous	 .affichage_collaborateur	{
	font-weight:900;
}
#Rendez_vous  	#confirmation_rdv	#resume_rendez_vous	 .affichage_type_rendez_vous	{
	font-weight:900;
}
#Rendez_vous  	#confirmation_rdv	#resume_rendez_vous	 .info_envoi_email	{
}
#Rendez_vous  	#confirmation_rdv	#info_envoi_email	 {
	padding:20px 0px;
}
#Rendez_vous  	#confirmation_rdv	a	{
	display:block;
	width:100%;
	background-color: var(--brun);
	color: var(--blanc);
	border-radius:5px;
	padding:5px;
	margin-top:20px;
	font-weight:bold;
	text-align:center;
}


#Rendez_vous  	#erreur_rdv		#message_erreur_rendez_vous	 {
	border:2px solid var(--rouge);
	padding:10px;
	font-weight:800px;
	margin-bottom:20px;
	text-align:center;
}
#Rendez_vous  	#erreur_rdv		a	{
	display:block;
	width:100%;
	background-color: var(--brun);
	color: var(--blanc);
	border-radius:5px;
	padding:5px;
	margin-top:20px;
	font-weight:bold;
	text-align:center;
}



/***********************************************************************************************************************
Fichier Salon.php
***********************************************************************************************************************/
#Salon	{
	width:90%;
	max-width:1000px;
	margin:var(--hauteur_bandeau) auto 0px auto;
}
#Salon	#accueil	{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 50px;
	width:100%;
}
#Salon	#accueil	h1	{
	margin-top:0px;
	border:none;
	border-radius:0px;
	border-top:1px solid;
}

#Salon	#accueil	#salon	{
	text-align:justify;
}
#Salon	#accueil	#salon_photo		{
	text-align:center;
}
#Salon	#accueil	#salon_photo	img	{
	width:80%;
	border-radius:10px;
}
#Salon	#accueil	#bar_a_couleur_photo		{
	text-align:center;
}
#Salon	#accueil	#bar_a_couleur_photo	img	{
	width:80%;
	border-radius:10px;
}
#Salon	#accueil	#salle_attente_photo		{
	text-align:center;
}
#Salon	#accueil	#salle_attente_photo	img	{
	width:80%;
	border-radius:10px;
}
#Salon	#accueil	#barbier	{
	text-align:justify;
}
#Salon	#accueil	#barbier_photo		{
	text-align:center;
}
#Salon	#accueil	#barbier_photo	img	{
	width:80%;
	border-radius:10px;
}

#Salon	#accueil	#thrichotherapy	{
	text-align:justify;
}
#Salon	#accueil	#thrichotherapy_photo		{
	text-align:center;
}
#Salon	#accueil	#thrichotherapy_photo	img	{
//	width:80%;
//	border-radius:10px;
}


#Salon	#accueil	#equipe	{
//	grid-column: 1 / span 2; 
	text-align:justify;
}
#Salon	#accueil	#equipe		table	{
//	border:1px solid;
	width:100%;
	text-align:center;
}
#Salon	#accueil	#equipe		table	td	{
	width:33%;
}
#Salon	#accueil	#equipe		table	tr:nth-child(2),
#Salon	#accueil	#equipe		table	tr:nth-child(6)	{
	font-weight:bold;
	line-height:30px;
}
#Salon	#accueil	#equipe		table	tr:nth-child(3),
#Salon	#accueil	#equipe		table	tr:nth-child(7)	{
	font-size:0.9em;
}
#Salon	#accueil	#equipe		table	tr:nth-child(4)	{
	line-height:80px;
}
#Salon	#accueil	#equipe		img		{
	width:70%;
	border-radius:10px;
}
#Salon	#accueil	#formations		ul	li	{
	list-style-type: none; 									/* on annule la puce par défaut */
    background-image: url("images/ciseaux_verts.png"); 		/* on affiche l'image souhaitée */
	background-size: 25px;
	background-repeat: no-repeat; 							/* on annule la répétition par défaut */
    background-position: left 0px center; 					/* on positionne où l'on veut */
    padding-left: 40px; 									/* pour éviter la superposition du contenu */
	padding-top:3px;
	margin:10px 0px 10px 0px;
	border-top:1px solid;
	text-align:justify;
	font-size:0.9em;
}
#Salon	#accueil	#formations		ul	li 	img	{ 			/* Utilisé pour les petits drapeaux... */
	max-height:15px;
	margin-left:10px;
	position:relative;
	top:3px;
} 
#Salon 	#accueil	#contact  .plan_acces	{
//	margin-bottom:40px;
	width:100%;
	border:1px solid;
}
#Salon 	#accueil	#contact  .plan_acces	iframe {
	width:100%;
}
#Salon 	#accueil	#contact  	.titre_ligne	{
	font-weight:bold;
}
#Salon 	#accueil	#contact	.horaires_tcl	a {
	float:right;
	margin-right:50px;
}
#Salon 	#accueil	#contact	.horaires_tcl	a img {
	width:50px;
}

#Salon 	#accueil	#horaires		{
}
#Salon 	#accueil	#horaires		.selection_semaine		{
	width:100%;
	margin-bottom:10px;
	line-height:3em;
	text-align:center;
}
#Salon 	#accueil	#horaires		.selection_semaine		button	{
	display:inline-block;
	width:15%;
	padding:0px;
	text-align:center;
}
#Salon 	#accueil	#horaires		.selection_semaine		button	img		{
	width:30px;
	position:relative;
	top:10px;
}

#Salon 	#accueil	#horaires	table	{
	width:90%;
	margin:auto;
	font-size:0.9em;
	border:1px solid blue;
}
#Salon 	#accueil	#horaires	.ferme	td	{
	background-color: var(--brun);
	color: var(--blanc);
	border-color: var(--brun);
} 
#Salon 	#accueil	#horaires	.ferme	td:nth-child(1)	{
	border-right-color: var(--blanc);
} 
#Salon 	#accueil	#horaires	.anterieur	td:nth-child(2)	{
//	background-color: var(--beige);
	color: var(--brun_tres_transparent);
	border-color: var(--brun);
}
#Salon 	#accueil	#horaires	.aujourdhui	{
	font-weight:bold;
}
#Salon 	#accueil	#horaires	td	{
	border:1px solid;
	padding:5px 10px;
}

/***********************************************************************************************************************
Fichier Services.php
***********************************************************************************************************************/
#Services	{
	width:90%;
	max-width:1000px;
	margin:var(--hauteur_bandeau) auto 0px auto;
}

#Services	#accueil	{
	display: grid;
	grid-template-columns: 1fr 1fr; 
	grid-column-gap: 50px;
	grid-row-gap: 50px;
	width:100%;
}
#Services	#accueil	.service	{
	
}

#Services	#accueil	.service	.titre_service	{
	text-align:center;
}
#Services	#accueil	.service	.titre_service	img	{
	position:relative;
	height:80px;
	top:10px;
	border-left:10px solid var(--blanc);
	border-right:10px solid var(--blanc);
	background-color: var(--blanc);
}
#Services	#accueil	.service	.titre_service	h2	{
	margin-bottom:0px;
}
#Services	#accueil	.service	.titre_service	.sous_titre_service	{
	text-align:center;
	font-size:0.85em;
	font-weight:800;
	padding:10px 0px 10px 0px;
}
#Services	#accueil	.service	.texte_service	{
	text-align:justify;
}