<style>
	@charset "UTF-8";
	/* 20231009 Style Universaelle parametrabele. Développé pour EVT */

	/* Recouvre image */
	.blimover {
		width: 100% !important;
		height: 100% !important;
		z-index: 1000 !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
	}

	body {
		background-color: ;
		/* font-family: Arial, Helvetica, sans-serif; */
		font-family: Tahoma, Geneva, sans-serif;
		color: ;
	}

	.centrer {
		text-align: center;
		margin: auto;
	}

	.gestion {
		background-color: ;
		font-family: Arial, Helvetica, sans-serif;
		color: ;
	}

	.gestion .haut_de_page {
		display: none;
	}

	.gestion header {
		background-color: ;
		color: ;
	}

	a {
		color: #A3A3A3;
		text-decoration: none;
	}

	.a {
		color: #A3A3A3;
		text-decoration: none;
	}

	a:hover {
		color: #393939;
	}

	h2 a {
		color: black;
	}

	h2 a:hover {
		color: #393939;
	}

	section {
		margin-bottom: 50px;
	}

	.alerte {
		color: crimson;
		font-weight: bold;
	}

	.vert {
		color: green;
		font-weight: bold;
	}

	.hidden {
		display: none;
	}

	/* Container */

	.container {
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 20px;
		height: auto;
		background-color: ;
		color: ;
	}

	nav {
		float: right;
		width: 100%;
		margin-right: 25px;
	}

	.gestion nav {
		float: none;
	}

	.haut_de_page a {
		color: ;
	}

	.haut_de_page a:hover {
		color: black;
	}

	.haut_de_page {
		width: 100%;
		height: 5%;
		background-color: ;
		border-bottom: 1px solid #767676;
	}

	.haut_de_page nav ul {
		list-style: none;
		width: 350px;
		float: right;
		margin-right: 25px;
	}

	.haut_de_page nav ul li {
		width: 100px;
		float: left;
		color: #FFFFFF;
		font-size: 14px;
		text-align: center;
		letter-spacing: 2px;
		font-weight: bold;
		transition: all 0.3s linear;
	}

	.boutons {
		width: 92px;
	}

	.boutons img {
		width: 24%;
	}

	.boutons ul {
		position: absolute;
		/* on cache les sous menus compl&egrave;tement sur la gauche */
		left: -999em;
		background-color: ;
		display: flex;
		flex-direction: column;
	}

	.boutons:hover ul {
		/* Au survol des li du menu on replace les sous menus */

		left: inherit;
		width: 130px;
		margin: auto;
		text-align: center;

	}

	.boutons ul li a {
		text-align: left;
		margin: auto;
	}

	.menu {
		width: 100%;
		float: left;
		font-weight: normal;
		font-size: 20px;
		letter-spacing: 2px;
			}

	.soustitre {
		font-weight: lighter;
		font-size: 0.8em;
	}

	.menu nav ul {
		list-style: none;
		float: right;
	}

	.menu nav ul li {
		float: left;
		color: #FFFFFF;
		text-align: left;
		margin-right: 25px;
		letter-spacing: 2px;
	}

	@media screen and (max-width : 792px) {
		.menu {
			width: 100%;
			font-weight: normal;
			font-size: 10px;
			letter-spacing: 2px;
		}

		.menu nav ul {
			float: left;
		}

		.menu nav ul li {
			display: flex;
			flex-direction: column;
			margin-right: 25px;
			letter-spacing: 2px;
		}

		.resp {
			display: none;
		}
	}

	header {
		height: 80px;
		background-color: ;
		border: 7px solid ;
		padding: 15px;
		margin-top: 15px;
		text-align: center;
	}

	.acceuil {
		height: 210px;
		background-size: cover;
		/* Resize the background image to cover the entire container */
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: center top;

		background-color: ;
		padding: 70px;
		margin-top: 20px;
		color: ;
		text-shadow: 2px 2px , -2px -2px , -2px 2px , 2px -2px ;
		text-align: center;
	}

	.page h1 {
		margin: auto;
		font-size: 0.8em;
	}

	.page img {
		height: 70px;
	}

	@media screen and (max-width : 792px) {
		header {
			height: 120px;
			padding: 30px;
			margin-top: 8px;
			text-align: center;
		}

		header img {
			width: auto;
			max-width: 480px;
			height: auto;
		}

		header h1 {
			padding: 10px;
			font-size: 1em;
		}
	}

	.simpleSheet {
		padding: 10px;
	}

	.centreEtroit {
		width: 400px;
		margin: auto;
		text-align: left;
	}

	.centreEtroit h2 {
		text-align: center;
	}

	.centreEtroit table {
		padding-bottom: 8px;
		border: 1px;
	}

	.grosBoutonTablette {
		/* display: inline-block; */
		Float: left;
		width: 200px;
		height: 300px;
		text-align: center;
	}

	.grosBoutonTablette img {
		width: 100px;
		height: 100px;
		cursor: pointer;
	}

	.centreMoyen {
		width: 600px;
		margin: auto;
		text-align: center;
	}

	.gaucheMoyen {
		width: 600px;
		margin: auto;
		text-align: left;
		background-color: aqua;
	}

	.centreLarge {
		width: 95%;
		margin: auto;
		clear: both;
	}

	.categories {
		margin: auto;
		padding-top: 35px;
		padding-left: 5%;
		display: inline-block;
		background-color: ;
		/* // Fond de couleur de la page d'accueil */
		margin-top: 0px;
	}


	.text_column {
		text-align: justify;
		font-weight: lighter;
		line-height: 25px;
		color: ;
	}

	.image_colonne {
		width: 95%;
	}

	.colonne h2 {
		text-align: center;
	}

	.colonne iframe {
		text-align: justify;
	}

	.imgOfArticle {
		height: 300px;
		object-fit: contain;
	}

	.formulaire {
		width: 400px;
		margin: auto;
		text-align: center;
	}

	.fb {
		width: 100%;
		text-align: center;
		float: left;
		margin: auto;
		padding: 5px;
	}

	.pied {
		text-align: center;
		float: left;
		width: 98%;
	}

	.image {
		width: 150px;
		height: 220px;
		background-color: #444444;
		color: darkgray;
		padding: 20px;
	}

	.imageT {
		width: 400px;
		/* height: 130px; */
		background-color: #444444;
		color: darkgray;
		padding: 15px;
		display: flex;
	}

	.imageT .th {
		width: 150px;
	}

	.texte {
		padding-left: 15px;
		width: 400px;
	}

	.imagette {
		width: 130px;
		height: auto;
	}

	.imagette img {
		border: thick;
	}

	.tableaumesphoto {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.element {
		background-color: darkgrey;
	}



	/* Tableau MES INFOS **************************************** */


	.tableauinfo th {
		text-align: right;
	}

	.tableauinfo td {
		text-align: left;
	}

	/* *************** Mise en page des formolaires ************* */
	fieldset {
		width: 600px;
		padding: 20px 20px 20px 20px;
		margin: auto;
		margin-bottom: 10px;
		border: 3px solid darkslategrey;
		border-radius: 50px;
	}

	/* **************** Mise en pages Nous contacter ************ */

	.text_contact {
		color: black;
	}

	.cadrecontact {
		width: 800px;
		margin: auto;
		padding: 20px;
		background-color: ;
		color: grey;
		border: 1px solid black;
		border-radius: 5%;
	}

	.cadrecontact form ul li {
		list-style: none;
	}

	.cadrecontact form ul li label {
		display: inline-block;
		width: 162px;
		HEIGHT: 20px;
		padding: 8px;
		background-color: black;
		color: #F1F1F1;
	}

	.cadrecontact form ul li input {
		display: inline-block;
		width: 540px;
		HEIGHT: 20px;
		padding: 7px;
	}

	.cases {
		/* display: inline-block; */
		margin: 0px;
		float: left;
	}

	.cadrecontact form ul li textarea {
		width: 720px;
		height: 150px;
		padding: 7px;
	}

	/* **** Mise en pages tu tableu des prix dans fonctionsTarif.php **** */
	.tableau_prix th {
		padding: 10px;
		text-align: center;
	}

	.teteLigne {
		padding-right: 10px;
		text-align: right;
	}

	.prix {
		text-align: center
	}

	/* **** Mise en pages tu tableu des messages clients dans message.php **** */
	.cadremessages {
		width: 1000px;
		padding: 5px;
		margin: auto;
		/* background-color: ; */
	}

	.cadremessages table {
		border: 1px solid #000000;
		padding: 5px;
		width: 100%;
	}

	.cadremessages ul li {
		list-style: none;
	}

	.cadremessages ul li ul {
		width: 1000px;
	}

	.cadremessages ul li ul li {
		list-style: none;
		display: inline-block;
		width: 200px;

	}

	.sujet {
		width: 1000px;
	}

	.texte {
		width: 1000px;
	}

	/* ---------------- Style du modole Galarie ---------------- */
	.accueilPhotographe {
		width: 100%;
	}

	.accueilPhotographe img {
		width: 90%;
		padding: 0% 5%;
	}

	.titre {
		display: inline-block;
		padding-left: 5%;
	}

	.titre a {
		color: ;
	}

	.grillePhotos {
		width: 95%;
		min-height: 10px;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.caseImage {
		width: 200px;
		height: 200px;
		overflow: hidden;
		object-fit: cover;
		padding: 20px;
	}

	.caseImage img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all 0.5s ease-out;
	}

	.caseImage img:hover {
		width: 110%;
		height: 110%;
	}

	.imageTG {
		width: 500px;
		height: 170px;
		margin: 6px;
		background-color: #444444;
		color: darkgray;
		padding: 15px;
		display: flex;
	}

	.imageTG .texte p {
		width: 350px;
		overflow: auto;
		background-color: #4B1E00;
	}

	/* ----------------- Overlay de la page d'aceuil ------------------------- */
	.overlayAcceuil {
		position: fixed;
		display: none;
		width: 100%;
		/* Full width (cover the whole page) */
		height: 100%;
		/* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}

	/* ----------------- Slide Show du module galerie ----------------- */

	.containerSlideShow * {
		box-sizing: border-box;
	}

	.containerSlideShow {
		position: absolute;
		left: 0px;
		top: 0px;
		background-color: black;
		width: 100%;
		display: none;
	}

	.slide img {
		width: 100%;
		margin: auto;
		max-height: 100%;
	}

	/* ----------------- Module réseau social ----------------- */

	.reseauPost {
		width: 60%;
		margin: auto;
		background-color: grey;
	}

	/* ----------------- Mise en page Members -------------------- */
	.containerMembers {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.cardMember {
		width: 500px;
		color: #393939;
		background-color: #FFFFFF;
		border-color: #767676;
		border-radius: 5px;
		padding: 10px;
		margin: 5px;
		display: grid;
		grid-gap: 10px;
		grid-template-columns: 100px 1fr;
		grid-template-rows: 100px 1fr;
		align-items: center;
	}

	.actionMember {
		grid-column: 1;
	}

	.actionMember button {
		margin: 5px;
	}

	.avatarMember {
		padding: 5px;
	}

	.datasMember {
		width: 1fr;
		grid-column: 2;
		grid-row: 1/3;
		text-align: left;
		padding-left: 30px;
	}