.mesbtn {
	background-color: #007bff;
	color: white;
	font-size: 16px;
	padding: 10px 16px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: 10px center;
	padding-left: 40px;
}

.mesbtntelecharger {
	background-image: url('/images/telecharger.png');
}

.mesbtntmaj {
	background-image: url('/images/maj.png');
}

.mesbtntajouter {
	background-image: url('/images/ajout.png');
}

/* Classe personnalisée pour ajuster la taille de police sur petit écran */
.texte-responsive {
	font-size: 1.2rem;
}

@media (max-width: 576px) {
	.texte-responsive {
		font-size: 0.95rem; /* Police réduite sur petits écrans */
	}
}




/* Évite les sauts de ligne en supprimant les marges/paddings sur menu verticaux*/ 
#NavigationMenu table {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}

#NavigationMenu td {
	padding: 0;
}


.Eric {
	font-family: "century gothic", Arial, sans-serif;
	font-size: 20px;
}

.MonCadre {
	background-color: #E1E6FA;
}


/* Style de base pour le control accordion */

.headerCssClass {
	background-color: #808080;
	color: white;
	border: 1px solid black;
	padding: 4px;
}

.contentCssClass {
	background-color: #ffffff;
	color: black;
	border: 1px dotted black;
	padding: 4px;
}

.headerSelectedCss {
	background-color: #0356a5;
	color: white;
	border: 1px solid black;
	padding: 4px;
}

/* ----- Fin Style de base pour le control accordion */


/* Style de base pour le GridView */
.gridview {
	width: 100%;
	border-collapse: collapse;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16px;
}

	.gridview th, .gridview td {
		padding: 5px;
		border: 1px solid #ddd;
		text-align: left;
	}

	.gridview th {
		background-color: #f4f4f4;
		color: #333;
		font-weight: bold;
	}

	.gridview tr:nth-child(even) {
		background-color: #ffffff;
	}

	.gridview tr:nth-child(odd) {
		background-color: #f5b8d3;
	}

	.gridview tr:hover {
		background-color: #e0f7fa;
		transition: background-color 0.3s;
	}

@media (max-width: 768px) {
	.gridview {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		font-size: 12px;
	}

	.gridview th, .gridview td {
		padding: 6px;
	}

}

/* fin Style de base pour le GridView */



.Bg_Egraine {
	/*    background-color: #802351;*/
	background-color: #AB276C;
	color: #fff;
	height: 30px;
	line-height: 30px;
	margin-right: 5px;
}


.text-egraine {
	font-family: 'Montserrat Light', sans-serif; /* Utilisez la police Montserrat Light */
	color: #802351; /* Définissez la couleur du texte */
}

.imgtrombi {
	width: auto;
	max-height: 50px;
}
.imgvignette {
	width: auto;
	max-height: 100px;
}

.box {
	height: 120px;
	width: 120px;
}

.madiv {
	padding: 10px;
	border: 5px groove gray;
	border-color: #F5F5F5;
	border-radius: 20px;
	margin: 5px;
}

/************* alignement vertical ****************/
.parent1 {
	display: flex; /* contexte sur le parent */
}

.enfant1 {
	margin: auto; /* eh oui, tout bêtement */
}



/************* Menu ****************/

.niveau4 {
	color: #121206;
	background-color: #e3e3a3;
	font-variant: small-caps;
	font-size: large;
	font-weight: bold;
}

.niveau1 {
	color: darkblue;
	background-color: LightSteelBlue;
	font-variant: small-caps;
	font-size: large;
	font-weight: bold;
}

.niveau2 {
	color: darkblue;
	font-family: Gill Sans MT !important;
	font-size: large;
	background-color: #DAF7A6;
}

.niveau3 {
	color: black;
	background-color: #EBF851;
	font-family: Gill Sans MT !important;
	font-size: large;
}

.hoverstyle {
	font-weight: bold;
}

.sousniveau1 {
	background-color: #DAF7A6 !important;
	color: White !important;
	font-variant: small-caps;
}


/************** Fin Menu ****************/


/************** afficher un panel comme une popup ****************/

.custom-popup {
	background-color: white;
	border: 1px solid #aaa;
	padding: 20px;
	width: 800px;
	position: fixed;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hidden {
	display: none;
}


/************** Fin Menu ****************/




/******************* style pour fenetre modale control ajax******************/
.modalBackground {
	background-color: black;
	opacity: 0.7;
	/*	filter: alpha(opacity=70);*/
}

.modalPopup {
	width: 600px;
	border: 1px solid #ccc;
	background-color: white;
}



/******************* exemple fenetre modale ******************/
/* CSS */
.cModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  pointer-events: none;
}
.cModal:target {
  opacity:1;
  pointer-events: auto;
}
.cModal > div {
  max-width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 2px;
  background: #fff;
}
/******************* fin exemple fenetre modale ******************/


.titreegraineH1 {
	align-content: center;
	text-align: left;
	font-size: 50px;
	color: #b02458;
}

.titreegraineH2 {
	align-content: center;
	text-align: left;
	font-size: 40px;
	color: #b02458;
}


.textegraineH3 {
	align-content: center;
	text-align: left;
	font-size: 20px;
	color: #b02458;
}



.titreegraine {
	align-content: center;
	text-align: left;
	font-size: 30px;
	color: blue;
	text-decoration: underline;
}

.stylebandeauegraine30 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-large;
	color: /*bbg*/ white;
	background-color: #b02458;
	height: 60px;
	vertical-align: middle;
}


.stylebandeauegraine10 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-large;
	color: /*bbg*/ white;
	background-color: #b02458;
	height: 10px;
	vertical-align: middle;
}


.stylebandeau {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-large;
	color: /*bbg*/ #CC0066;
	background-color: #EAEAEA;
	text-align: center;
	height: 30px;
}
.stylebandeaupetit {
            font-family: Arial, Helvetica, sans-serif;
            font-size: large;
            color: /*bbg*/ #CC0066;
            text-align: center;
            height: 8px;
        }

        .droite {
            text-align: right;
        }
        .centrer {
            text-align: center;
        }        
        .gauche {
            text-align: left;
        }


/*here goes all of your css styling*/

body {
    width: 100%;
    padding-top: 50px;
    padding: 0;
    margin: 0;
    font-family: "century gothic", Arial, sans-serif;
    font-size: 12px;
}


#wrapper{
width: 90%;
max-width: 700px;
margin: 0 auto;
padding-top: 20px;
}

#header p{
	margin: 0px 0px 100px 0px;
}

a{
color: #d6005e;
}

.example-wrapper{
	margin-bottom: 70px;
}


/*example 01------------------------------------------------------------------------------*/


#example-01 a.tooltip > span{
width: 200px; 
padding: 7px 10px; 
margin-top: 25px; 
opacity: 0; 
visibility: hidden; 
z-index: 10; 
position: absolute; 
display: none; 
margin-left: -200px;
}

#example-01 a.tooltip:hover span{ 
color: #000000; 
border: 1px solid #000000; 
background: #ffeaf3;
display: inline; 
} 

#example-01 a.tooltip:hover > span{ 
opacity: 1; 
visibility: visible; 
overflow: visible; 
}


/* bouton zoom  */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Koulen&family=Lato&family=Nunito&family=Playfair+Display:ital@1&family=Prata&family=Raleway:ital,wght@1,100&family=Roboto&family=Roboto+Condensed&family=Teko&display=swap');

.btnzoom {
	font-family: Roboto, sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #fff;
	background-color: #0066CC;
	padding: 11px 8px;
	border: 2px solid #0066cc;
	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
	border-radius: 47px;
	transition: 1000ms;
	transform: translateY(0);
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
}

	.btnzoom:hover {
		transition: 1000ms;
		padding: 10px 20px;
		transform: translateY(-0px);
		background-color: #fff;
		color: #0066cc;
		border: solid 2px #0066cc;
	}

/* Fin bouton zoom  */
/* _______________________________________bouton____________________________________________________*/
.bouton1 {
	-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
	box-shadow: inset 0px 1px 0px 0px #ffffff;
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color: #ededed;
	-webkit-border-top-left-radius: 11px;
	-moz-border-radius-topleft: 11px;
	border-top-left-radius: 11px;
	-webkit-border-top-right-radius: 0px;
	-moz-border-radius-topright: 0px;
	border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 11px;
	-moz-border-radius-bottomright: 11px;
	border-bottom-right-radius: 11px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-bottom-left-radius: 0px;
	text-indent: 0;
	border: 1px solid #dcdcdc;
	display: inline-block;
	color: #a94545;
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	font-style: italic;
	height: 23px;
	line-height: 23px;
	text-decoration: none;
	text-align: center;
	text-shadow: 1px 1px 0px #ffffff;
}
.bouton1:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.bouton1:active {
	position:relative;
	top:1px;
}
/* This button was generated using CSSButtonGenerator.com */

 


div.container {
  /*border:1em solid black;*/
}
div.bordurefine {
	border: 0.1em silver ridge;
	padding: 10px 20px 10px 20px;
}
div.borduregrosse {
  border:1em solid black;
}

div.split {
  box-sizing:border-box;
  width:50%;
  /*border:1em silver ridge;*/
  float:left;
}

div.bas {
  width:100%;
  position: page;
  bottom: 0;
  border:0.01em silver ridge;
}

div.fixe
{
    position        : fixed;
    bottom          : 0;
    color: #000000; 
    background-color:#ededed;
}

span.bulle {
	text-align: left;
	position: relative;
	cursor: pointer;
	font-weight: 700;
	font-style: italic;
}

	span.bulle span {
		display: none;
	}

	span.bulle:hover span {
		left: 0px;
		width: 250px;
		display: block;
		position: absolute;
		z-index: 10;
		border: 1px black solid;
		background-color: #FFFF99;
	}

span.bullelarge {
	text-align: left;
	position: relative;
	cursor: pointer;
	font-weight: 900;
	font-style: italic;
}

	span.bullelarge span {
		display: none;
	}

	span.bullelarge:hover span {
		left: 20px;
		width: 700px;
		display: block;
		position: absolute;
		z-index: 10;
		border: 1px black solid;
		background-color: #99fffd;
	}


.TexteCarteVisite {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: /*bbg*/ #17375D;
	background-color: #F7F7F7;
}