/******************************* PAGE *****************************************************/
body
{
	background-image:url(../images/tplv41/ciel1.jpg),url(../images/tplv41/bck.jpg);
	background-repeat:repeat-x;
	background-position:center top;
	margin: auto;
	background-color:#fff;
	/*font-family: verdana,sans-serif;*/
	font-size: 13px;
	
}

.ligneColor div:nth-child(5n+0)
{ 
	background-color:#f2d5ba;
}
.ligneColor div:nth-child(5n+1)    
{
	background-color:#d3ad89;
}

/*pub*/
.publicite_bas
{
	width:730px;
	height:90px;
	padding-left:200px;
	display:inline-block;
	/*margin-top:5px;*/
	margin-right:0px; 
	margin-top: 5px;
    background-repeat: no-repeat;
    /*height: 100px;*/
	background-image: none;
	/*background-color: #222A35;*/
	background-position: center;
	background-position: repeat-no;
}
.publicite_bas .financement .adsbygoogle ins
{
	background:#364A57 !important
}
.publicite_bas .financement p
{
	padding:20px 10px;
	font-size:1.2em;
	font-family:sans-serif;
	z-index:0;
	top:0px;
	text-align:center;
	width:100%;
}
.publicite_bas .financement p:before
{
	 content:'Kiponie est d\00E9velop\00E9  par des particuliers b\00E9n\00E9voles pendant leur loisir.  Si vous appreciez Kiponie, d\00E9sactivez Adblock sur notre Site afin que nous puissions payer le serveur. Le site est totalement gratuit et la pub se veut peu envahissante. Merci. ';
	 /*content:'K';*/

}

/***** STYLES DE SOUTIEN - Boutons Tipeee/Ulule *****/

.soutien-accroche {
	font-size: 1.2em;
	line-height: 1.4em;
	margin: 15px 0;
	color: #161515;
	text-align: center;
	font-style: italic;
}

.soutien-links {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 15px 0;
}

.btn-soutien {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	font-size: 1.1em;
	font-weight: 600;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
	white-space: nowrap;
	background-color: #e7a543;
	color: #000000;
}

.btn-soutien:hover {
	background-color: #08a794;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-soutien i {
	font-size: 1.1em;
}

/* Mobile : réduire les boutons */
@media (max-width: 768px) {
	.btn-soutien {
		padding: 6px 10px;
		font-size: 0.75em;
	}
	
	.soutien-accroche {
		font-size: 0.8em;
		margin: 8px 0;
	}
	
	.soutien-links {
		gap: 6px;
		margin: 8px 0;
	}
}

/* Très petits écrans */
@media (max-width: 480px) {
	.btn-soutien {
		padding: 5px 8px;
		font-size: 0.7em;
	}
	
	.soutien-accroche {
		font-size: 0.75em;
		margin: 5px 0;
	}
	
	.soutien-links {
		gap: 4px;
		margin: 5px 0;
	}
}

 

/******************************* HEADER *****************************************************/

	
@media(min-width:768px)
 {
	.headerV4
	{
		background-image: url(../images/tplv41/islandonly2.png);
		background-repeat: no-repeat;
		background-position: center top;
		position:relative;
		float:left;
		width: 100%;
		max-width: 1024px;
		height: 251px;
		background-size: cover;
	}
	.logov5
	 {
		background-image: url(../images/logo5V3.png);
		background-repeat: no-repeat;
		background-position: left top;
		position: absolute;  /* Changed - removes from normal flow */
		top: 10px;
		left: 10px;
		display: block;
		width: 100%;
		max-width: 300px;
		height: 150px;
		background-size: contain;
		margin: 0;
		z-index: 5;
	}


	.left1
	{
		position: relative;
		float: left;
		margin-left: 7px;
		text-align: justify;
		width: 172px;
		padding-top: 22px;
		padding-left: 5px;
		min-height: 400px;

		/* Image du haut + milieu répété */
		background-image:
			url("../images/tplv41/encart-papier-int.png"),
			url("../images/tplv41/encart-papier-up.png");
		background-repeat: repeat-y, no-repeat;
		background-position: 0 221px, top left;
		background-size: 172px auto, 172px auto;
	}

	/* Supprimer le pseudo-élément after qui n'est plus nécessaire */
	.left1:after
	{
		content: none;
	}

	/* Responsive : cacher sur mobile */
	@media (max-width: 767px) {
		.left1 {
			display: none !important;
		}
	}

	.contenu-left1
	{
		position:relative;
		z-index:200;
		font-size: 1em;
	text-align:center;
		
	}
	
	
	.Edileflottant
	{
		margin-top:0%;
		margin-left: 30%;
		float: left;
		position : absolute;
		width:195px;
		height:37px; 
		text-align:center;
		z-index:1001;
		
	}

	/* ========================================
	   NOUVEAU: Flux complet Édile + Conseillers
	   Alignés horizontalement à la base du header (PC)
	   ======================================== */
	
	/* Conteneur du flux complet PC */
	.header-full-flow-pc {
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		max-width: 95%;
		z-index: 10;
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		justify-content: center;
		gap: 12px;
	}

	/* Tailles avatars dans le flux PC */
	.header-full-flow-pc .avatar-warning-container img {
		height: 110px !important;
		width: auto !important;
		margin: 0 !important;
	}

	/* Conseillers et Édile dans le header PC */
	.header-conseillers-wrapper {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		pointer-events: none;
	}
	
	.header-conseillers-wrapper > * {
		pointer-events: auto;
	}

	/* Wrapper pour FluxEdile dans le header */
	.header-edile-wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	/* Taille des avatars dans le header PC */
	.header-conseillers-wrapper img,
	.header-edile-wrapper img {
		height: 70px !important;
		width: auto;
	}
	
	
 }
 @media(max-width:767px)
 {
	.headerV4
	{
		background-image: url(../images/tplv41/islandonly2.png);
		background-repeat: no-repeat;
		background-position: center top;
		position:relative;
		float:left;
		width: 100%;
		max-width: 100%;
		height: 199px;
		background-size: cover;
		overflow: hidden;
	}
	.logov5
	 {
		background-image: url(../images/logo5V3.png);
		background-repeat: no-repeat;
		background-position: 0px 0px;
		position:relative;
		float: left;
		width: 50%;
		height: 50%;
		background-size: contain;

	}
	/* Conseillers mobiles - positionnés au-dessus de l'image de fond */
	.mobcons1
	 {
		position: absolute;
		bottom: 15px;
		left: 30%;
		z-index: 10;
	}
	.mobcons2
	 {
		position: absolute;
		bottom: 15px;
		left: 50%;
		z-index: 10;
	}

	/* Taille des avatars conseillers sur mobile */
	.mobcons1 img,
	.mobcons2 img {
		height: 60px;
		width: auto;
	}

	/* Flex pour les conseillers */
	.conseillers-flex {
		display: flex !important;
	}

	/* ========================================
	   Mobile - Flux du header
	   ======================================== */
	
	.header-full-flow-mob {
		position: absolute;
		bottom: 15px;
		left: 15px;
		right: 15px;
		z-index: 10;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: center;
		gap: 6px;
	}

	.header-flow-edile-mob {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.header-flow-conseillers-mob {
		flex-grow: 1;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.conseillers-flex-mob {
		display: flex !important;
		flex-wrap: wrap;
		gap: 4px;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.header-full-flow-mob img,
	.header-flow-edile-mob img,
	.header-flow-conseillers-mob img {
		height: 60px !important;
		width: auto !important;
	}
	
		
 }
 @media(max-width:575px)
 {
	.headerV4
	{
		background-image: url(../images/tplv41/islandonly2.png);
		background-repeat: no-repeat;
		background-position: 0px 0px;
		position:relative;
		float:left;
		width: 481px;
		height: 125px;
		background-size: 100% 100%;
	}
	.logov5
	 {
		background-image: url(../images/logo5V3.png);
		background-repeat: no-repeat;
		background-position: 0px 0px;
		position:relative;
		float: left;
		width: 50%;
		height: 50%;
		background-size: contain;

	}
	
 }
 
/******************************* Page *****************************************************/

.corps
{
	background-image: url(../images/tplv41/bck-content2.png),url(../images/tplv41/bck-content-rep.png);
	background-repeat: no-repeat,repeat-y;
	margin-left:0px;   
    width: 100%;
	max-width:1012px;
    height: auto;
    background-size: contain;  
	padding-left:18px;
	padding-right:35px;
	margin-left:4px;
}
.leftGr
{
   position: relative;
   float: left;
   left: 18px;
   top:0px;
   text-align:justify;
   width: 95%;
	max-width:950px; 
 
}


.pagecarte
{
   position: relative;
   float: left;
   left: 10px;
   top:10px;
   width: 950px;
   text-align:justify;
   margin-bottom:40px;
 
}
.fond_transp
{
	background:#BABABA;
	opacity:0.5;
}

.left2
{
   position: relative;
   float: left;
   left: 5px;

   width: 500px;
   padding-right:20px;
    padding-left:auto;
  
  text-align:justify;

  /* background:#f0e8d8;*/
}
.left3
{
text-align:center;
   position: relative;
   float: left;
   right: 10px;
   width: 250px;
}




.bbwrap{
list-style-type:none;
margin-left:-10px;
padding:0;
}

.bbwrap li{
margin-top: 12px; /*spacing between each image*/

display:block;

}

.bbwrap li img{
width: 68px; /* width of each image.*/
height: 44px; /* height of each image.*/
border:0;
transition: transform 0.1s ease-in;
}

.bbwrap li img:hover{
transform: scale(1.3);
}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }


.encpapier
{
   position: relative;
	margin-left: 2px;
	text-align: justify;
	z-index:1;
	background-image: url("../images/tplv41/papier-up-250.png");
	background-repeat: no-repeat;
	width:250px;
	padding-top:15px;

	
}
.encpapier:after
{
    content:"";
    position:absolute;
    top:105px;
    left:0;
    right:0;
    bottom:0;
	background-image: url("../images/tplv41/papier-int-250.png");
	background-repeat: repeat-y;
    z-index:1;
}

.contenu-encpapier
{
	padding-left: 10px ;
	padding-right: 10px ;	
    position:relative;
    z-index:2;
	font-size: 1em;	
}




/******************************* MENUS niveau 2*****************************************************/

.MTopV4 /*top du conten (pageIG)*/
{

}

/******************************* FOOTER *****************************************************/
.footerV4
{
	background-image: url(../images/tplv41/footer.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	position:relative;
	float:left;
    width: 100%;
    height: 188px;
    background-size: contain;
	font-size: 12px;
	text-align: center;
	line-height: 28px;
	padding-top: 44px;
	margin-left:5px;
}
.footer p a:link {
	color: #544232;
	text-decoration: none;
}
.footer p a:hover {
	color: #ffff00;
	text-decoration: none;
}
.footer p a:active {
	color: #544232;
	text-decoration: none;
}
.footer p a:visited {
	color: #544232;
	text-decoration: none;
}

/*bloc simple*/
.bloc {  
	width: auto;  
	height: auto;  
	background: #f0e8d8;  
	  
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, #dacdb1), color-stop(0.2, #f0e8d8));  
	background-image: -webkit-linear-gradient(center bottom, #dacdb1 5%, #f0e8d8 20%);  
	background-image: -moz-linear-gradient(center bottom, #dacdb1 5%, #f0e8d8 20%);  
	background-image: linear-gradient(center bottom, #dacdb1 5%, #f0e8d8 20%);  
  
	-webkit-box-shadow: 0 0 30px #cdbe9f inset, 0 0 2px #beae8c inset;  
	-moz-box-shadow:    0 0 30px #cdbe9f inset, 0 0 2px #beae8c inset;  
	box-shadow:         0 0 30px #cdbe9f inset, 0 0 2px #beae8c inset;  
	padding-bottom:50px;
	
}  


.simple {  
-moz-box-shadow: 0 0 2 #cdbe9f inset, 0 0 2px #beae8c inset, 0 0 5px #816f47;  
-webkit-box-shadow: 0 0 30px #cdbe9f inset, 0 0 2px #beae8c inset, 0 0 5px #816f47;  
box-shadow: 0 0 30px #cdbe9f inset, 0 0 2px #beae8c inset, 0 0 5px #816f47;  
    }  
.simple:after, .simple:before { display: none; }  

/* SS MENU test */
 .ssmenu ul{height:20px;padding:1px 0px;margin-left:1px;}
 .ssmenu ul li{float:left;list-style:none;height:25px;border:1px solid black;
background:#CF953F;background:-moz-linear-gradient(top,#CF953F 50%,#BF8937 80%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.5,#BF8937),color-stop(0.8,#BF8937));
-moz-border-radius:2px 2px 0px 0px/25px 25px 0px 0px;
-webkit-border-radius: 2px 2px 0px 0px/25px 25px 0px 0px;
border-radius:2px 2px 0px 0px/25px 25px 0px 0px;
-moz-box-shadow:1px 1px 2px #C7B1A3 inset,0px 0px 1px black,0px -1px 1px white;
-webkit-box-shadow:1px 1px 2px #C7B1A3,0px 0px 1px black,0px -1px 1px white;
box-shadow:1px 1px 2px #C7B1A3 inset,0px 0px 1px black,0px -1px 1px white;}
 .ssmenu ul li a {display:block;height:25px;padding:2px 5px 0px 5px;color:rgba(255,255,255,0.8);text-decoration:none;font-weight:bold;}
 .ssmenu ul li:hover{background:#99886F;background:-moz-linear-gradient(top,#99886F,#B59668);
background:-webkit-gradient(linear,left top,left bottom,from(#99886F),to(#B59668));}
 .ssmenu ul li:hover a{color:white;text-shadow:0px 0px 2px #030;}

.TaverniereContainer
{
	display:block;
	position : relative;
	padding-left:0px;
	margin-top : 0px;
	margin-left : 0px;
	z-index:10;

}
.KPV4tpl_list li
{
 list-style:none; 
 text-align: center;

}
/*img cadre*/
.image_cadre
 {
	border-width :2px;
	border-style :solid;
	border-color :#fff;
	 -webkit-box-shadow:1px 1px 5px #555;
   -moz-box-shadow:1px 1px 5px #555;
		box-shadow:1px 1px 5px #555;
}


/*spécifique MF tools*/
/* ########################### INFO BULLE #############################""*/
a.info
{
	position: relative;
	color: black;
	text-decoration: none;
	/*border-bottom: 1px gray dotted; /* on souligne le texte */
}
a.info span 
{
	display: none; /* on masque l'infobulle */
	z-index: 10001; 
	
}
a.info:hover
{
   background: none; /* correction d'un bug IE */
   cursor: help; /* on change le curseur par défaut en curseur d'aide */
	z-index: 10001; 
	
}
a.info:hover span 
{
   display: block; /* on affiche l'infobulle */ /*block*/
   position: absolute;
z-index: 1001; 
   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
   top: 30px; /* on positionne notre infobulle */
   left: 20px;
   background: white;
   padding: 3px;
   border-left: 4px solid #E2C56F;
   
   color: #826A23;
   border: 1px solid #E2C56F;
  	z-index: 10001; 
 
}
/* IMAGE LIEU */
.img_taverne
 {
	
	border-width :2px;
	border-style :solid;
	border-color :#fff;
	 -webkit-box-shadow:1px 1px 5px #555;
   -moz-box-shadow:1px 1px 5px #555;
		box-shadow:1px 1px 5px #555;
	background-image: url("/images/tavernev1_1.jpg");
	background-size :contain;
	 height: auto;
	 Width:200px;
	 
	 position: absolute;
	 background-position: 0 0;
	 background-repeat: no-repeat;
	z-index: 100; 
	 
 }


.taverniere:hover,.taverniere:focus
{
	/*text-shadow:0 1px 2px black;*/
	background:#D5D1BD;
	/*box-shadow*/
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,.4);
	   -moz-box-shadow:0 1px 0 rgba(255,255,255,.4);
			box-shadow:0 1px 0 rgba(255,255,255,.4);
	color:#FFFFFF;
	outline-color: #000000;
}
.taverniere span
{
	position:absolute;
	padding:15px;
	margin-top:-350px;
	margin-left:15px;
	max-width:400px;
	background:rgba(255,255,255,1);
	opacity:0;
	color:#402520;
	/*transform*/
	-webkit-transform:scale(0) rotateZ(-12deg);
	   -moz-transform:scale(0) rotate(-12deg);
		-ms-transform:scale(0) rotateZ(-12deg);
		 -o-transform:scale(0) rotate(-12deg);
			transform:scale(0) rotateZ(-12deg);
	/*transition*/
	-webkit-transition:all .5s;
	   -moz-transition:all .5s;
		-ms-transition:all .5s;
		 -o-transition:all .5s;
			transition:all .5s;

	-webkit-transition-delay: 100ms;
		-moz-transition-delay: 100ms;
		-ms-transition-delay: 100ms;
		-o-transition-delay: 100ms;
		transition-delay: 100ms;			
			
	/*border-radius*/
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
	/*box-shadow*/
	-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
	   -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
			box-shadow:0 0 2px rgba(0,0,0,.5);
			
		transition-timing-function:ease-in;		
	z-index: 19; 
			
}
.taverniere:hover span,.taverniere :focus span
{
	opacity:1;
	/*transform*/
	-webkit-transform:scale(1) rotateZ(0);
	   -moz-transform:scale(1) rotate(0);
		-ms-transform:scale(1) rotateZ(0);
		 -o-transform:scale(1) rotate(0);
			transform:scale(1) rotateZ(0);
}
/*
.taverniere span:before
{
	content:'';
	position:absolute;
	top:-6px;
	left:10px;
	width:0;
	height:0;
	border-bottom:6px solid rgba(0,0,0,.9);
	border-left:6px solid transparent;
	border-right:6px solid transparent;
}*/
/* ########## POPUP CONSEILLER */


.SubMenuv5
{
	color:#524509;
	text-decoration:none;
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
	z-index:102;
	padding:2px;
}
.conseiller
{
	color:#524509;
	text-decoration:none;
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
	padding:5px 15px;
	z-index:102;
	
}
.conseiller:hover,.conseiller:focus
{
	/*text-shadow:0 1px 2px black;*/
	background:#D5D1BD;
	/*box-shadow*/
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,.4);
	   -moz-box-shadow:0 1px 0 rgba(255,255,255,.4);
			box-shadow:0 1px 0 rgba(255,255,255,.4);
	color:#FFFFFF;
	outline-color: #000000;
	z-index:102;

}
@media(min-width:768px)
{
	.conseiller span
	{
		position:absolute;
		padding:15px;
		margin-top:0px;
		margin-left:-50%;
		width:400px;
		background:rgba(255,255,255,1);
		opacity:0;
		color:#402520;
		/*transform*/
		-webkit-transform:scale(0) rotateZ(-12deg);
		   -moz-transform:scale(0) rotate(-12deg);
			-ms-transform:scale(0) rotateZ(-12deg);
			 -o-transform:scale(0) rotate(-12deg);
				transform:scale(0) rotateZ(-12deg);
		/*transition*/
		-webkit-transition:all .25s;
		   -moz-transition:all .25s;
			-ms-transition:all .25s;
			 -o-transition:all .25s;
				transition:all .25s;

				
		/*border-radius*/
		-webkit-border-radius:3px;
		   -moz-border-radius:3px;
				border-radius:3px;
		/*box-shadow*/
		-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
		   -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
				box-shadow:0 0 2px rgba(0,0,0,.5);
		z-index:102;
		
	}		
}
  @media(max-width:767px)
 {
	.conseiller span
	{
		position:absolute;
		padding:15px;
		margin-top:0px;
		margin-left:-50%;
		width:300px;
		background:rgba(255,255,255,1);
		opacity:0;
		color:#402520;
		/*transform*/
		-webkit-transform:scale(0) rotateZ(-12deg);
		   -moz-transform:scale(0) rotate(-12deg);
			-ms-transform:scale(0) rotateZ(-12deg);
			 -o-transform:scale(0) rotate(-12deg);
				transform:scale(0) rotateZ(-12deg);
		/*transition*/
		-webkit-transition:all .25s;
		   -moz-transition:all .25s;
			-ms-transition:all .25s;
			 -o-transition:all .25s;
				transition:all .25s;

				
		/*border-radius*/
		-webkit-border-radius:3px;
		   -moz-border-radius:3px;
				border-radius:3px;
		/*box-shadow*/
		-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
		   -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
				box-shadow:0 0 2px rgba(0,0,0,.5);
		z-index:102;
		
	}		 
 }
 
  @media(max-width:575px)
 {
	.conseiller span
	{
		position:absolute;
		padding:15px;
		margin-top:0px;
		margin-left:-100%;
		width:200px;
		background:rgba(255,255,255,1);
		opacity:0;
		color:#402520;
		/*transform*/
		-webkit-transform:scale(0) rotateZ(-12deg);
		   -moz-transform:scale(0) rotate(-12deg);
			-ms-transform:scale(0) rotateZ(-12deg);
			 -o-transform:scale(0) rotate(-12deg);
				transform:scale(0) rotateZ(-12deg);
		/*transition*/
		-webkit-transition:all .25s;
		   -moz-transition:all .25s;
			-ms-transition:all .25s;
			 -o-transition:all .25s;
				transition:all .25s;

				
		/*border-radius*/
		-webkit-border-radius:3px;
		   -moz-border-radius:3px;
				border-radius:3px;
		/*box-shadow*/
		-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
		   -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
				box-shadow:0 0 2px rgba(0,0,0,.5);
		z-index:102;
		
	}	
 }

.conseiller:hover span,.conseiller :focus span
{
	opacity:1;
	/*transform*/
	-webkit-transform:scale(1) rotateZ(0);
	   -moz-transform:scale(1) rotate(0);
		-ms-transform:scale(1) rotateZ(0);
		 -o-transform:scale(1) rotate(0);
			transform:scale(1) rotateZ(0);
	z-index:102;
			
}
.conseiller span:before
{
	content:'';
	position:absolute;
	top:-6px;
	left:10px;
	width:0;
	height:0;
	border-bottom:6px solid rgba(255,255,255,.9);
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	z-index:102;
	
}
/*############Popup choix #####################*/


.choixdiff
{
	color:#524509;
	text-decoration:none;
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
	padding:5px 15px;
	z-index:102;
	
}
.choixdiff:hover,.choixdiff:focus
{
	/*text-shadow:0 1px 2px black;*/
	background:#D5D1BD;
	/*box-shadow*/
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,.4);
	   -moz-box-shadow:0 1px 0 rgba(255,255,255,.4);
			box-shadow:0 1px 0 rgba(255,255,255,.4);
	color:#FFFFFF;
	outline-color: #000000;
	z-index:102;

}
.choixdiff span
{
	display: block;
	position:absolute;
	padding:15px;
	margin-top:0px;
	margin-left:20px;
	width:400px;
	background:rgba(255,255,255,1);
	opacity:0;
	color:#402520;
	/*transform*/
	-webkit-transform:scale(0) rotateZ(-12deg);
	   -moz-transform:scale(0) rotate(-12deg);
		-ms-transform:scale(0) rotateZ(-12deg);
		 -o-transform:scale(0) rotate(-12deg);
			transform:scale(0) rotateZ(-12deg);
	/*transition*/
	-webkit-transition:all .25s;
	   -moz-transition:all .25s;
		-ms-transition:all .25s;
		 -o-transition:all .25s;
			transition:all .25s;

			
	/*border-radius*/
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
	/*box-shadow*/
	-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
	   -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
			box-shadow:0 0 2px rgba(0,0,0,.5);
	z-index:102;
	
			
}
.choixdiff:hover span,.choixdiff :focus span
{
	opacity:1;
	/*transform*/
	-webkit-transform:scale(1) rotateZ(0);
	   -moz-transform:scale(1) rotate(0);
		-ms-transform:scale(1) rotateZ(0);
		 -o-transform:scale(1) rotate(0);
			transform:scale(1) rotateZ(0);
	z-index:102;
			
}

/***********************CARTO****************************/
/*@media(min-width:768px)
 {

	.mappositioner
	{
		position: relative;
		overflow : hidden;
		overflow-y : auto;
		overflow-x : scroll;
		width:1000px;
		height:550px;
		margin-left:0px;
		text-align: center;	

	}
	.mapcontainer
	{
		margin-top: 50px;
		width:1000px;
		height:620px;	
	}	
 }
 @media(max-width:767px)
 {

	.mappositioner
	{
		position: relative;
		overflow : hidden;
		overflow-y : auto;
		overflow-x : scroll;
		width:auto;
		height:300px;
		margin-left:0px;
		text-align: center;	
	}
	.mapcontainer
	{
		margin-top: 50px;
		height:300px;
		width:auto;
		
	}			
 }
 @media(max-width:575px)
 {

	.mappositioner
	{		
		overflow : hidden;

		position: relative;
		overflow-y : auto;
		overflow-x : scroll;
		width:auto;
		height:300px;
		margin-left:0px;
		text-align: center;	
	}
	.mapcontainer
	{
		margin-top: 50px;
		width:auto;
		height:300px;
	}	
 
 }*/

/*############Container Edile #####################*/
.CadreEdile
{
	background:#FFF;
	height: auto;
	width:100%;
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
	-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
	   -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
			box-shadow:0 0 2px rgba(0,0,0,.5);
	z-index:101;

}

/*.Edile 
{
	height: 600px;
	background-image: url("/images/bouton/btplus.png");
	background-position: 270px 170px;
	background-repeat: no-repeat;
	overflow: hidden;
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
	-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
	   -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
			box-shadow:0 0 2px rgba(0,0,0,.5);

}
.Edile:hover,.Edile:focus
{
	height: auto;
	-webkit-transition:all .25s;
	   -moz-transition:all .25s;
		-ms-transition:all .25s;
		 -o-transition:all .25s;
			transition:all .25s;
	transition-duration: 1s;
	transition-timing-function: ease;
	transition-delay: 0s;
	display: block;
}*/

.conseillerDroite
{
	/*width:447px;*/
	
	color:#524509;
	text-decoration:none;
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
	padding:5px 20px;
	z-index:102;
	width:100%;
	
}
.conseillerDroite:hover,.conseillerDroite:focus
{
	/*text-shadow:0 1px 2px black;*/
	background:#D5D1BD;
	/*box-shadow*/
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,.4);
	   -moz-box-shadow:0 1px 0 rgba(255,255,255,.4);
			box-shadow:0 1px 0 rgba(255,255,255,.4);
	color:#FFFFFF;
	outline-color: #000000;
	z-index:102;
	
}
.conseillerDroite span
{
	position:absolute;
	padding:15px;
	margin-top:0px;
	margin-left:center;
	width:100%;
	max-width:400px;
	background:rgba(255,255,255,1);
	opacity:0;
	color:#402520;
	/*transform*/
	-webkit-transform:scale(0) rotateZ(-12deg);
	   -moz-transform:scale(0) rotate(-12deg);
		-ms-transform:scale(0) rotateZ(-12deg);
		 -o-transform:scale(0) rotate(-12deg);
			transform:scale(0) rotateZ(-12deg);
	/*transition*/
	-webkit-transition:all .25s;
	   -moz-transition:all .25s;
		-ms-transition:all .25s;
		 -o-transition:all .25s;
			transition:all .25s;

			
	/*border-radius*/
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
	/*box-shadow*/
	-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
	   -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
			box-shadow:0 0 2px rgba(0,0,0,.5);
	z-index:102;
	
			
}
.conseillerDroite:hover span,.conseillerDroite :focus span
{
	opacity:1;
	/*transform*/
	-webkit-transform:scale(1) rotateZ(0);
	   -moz-transform:scale(1) rotate(0);
		-ms-transform:scale(1) rotateZ(0);
		 -o-transform:scale(1) rotate(0);
			transform:scale(1) rotateZ(0);
	z-index:102;
			
}
.conseillerDroite span:before
{
	content:'';
	position:absolute;
	top:-6px;
	left:300px;
	width:0;
	height:0;
	border-bottom:6px solid rgba(255,255,255,.9);
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	z-index:102;
	
}



/*##########################Back paper ######## -V4 approved*/
.paper-400px-left-container
{
	position : relative;
	text-align: left;
	z-index:1;
	max-width:400px;

	background-image: url("../template/v4/up-paper-400px.png");
	background-repeat: no-repeat;
	
}
.paper-400px-left-container:after
{
    content:"";
    position:absolute;
    top:289px;
    left:0;
    right:0;
    bottom:0;
	background-image: url("../template/v4/back-paper-400px.png");
	background-repeat: repeat-y;
    z-index:1;

}
.contenu
{
    position:relative;
    z-index:2;
	font-size: 1em;
}


.line1
{
	background-color:#F3EDDB;
	opacity:1;
}
/*.line1:hover
{
	background-color:#F3EDDB;
	opacity:0.8;
	}*/
.line2
{
	background-color:#ECE1C0;
	opacity:1;

}
/*.line2:hover
{
	background-color:#ECE1C0;
	opacity:0.8;

}*/

/*##########################Container BODY ######## -V4 approved*/
 .ColG400px
{
	margin-top: 10px;
	margin-left: 10px;	
	position:relative;
	float:left;
	width:400px;
}
 .ColD200px
{
	margin-top: 0px;
	margin-right: 10px;	
	position:relative;
	float:right;
	width:300px;
}

/* ########################### LIENS MODERNISÉS #############################*/
/* Exclure les éléments Bootstrap des styles globaux */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) {
	color: #5D4E37;
	text-decoration: none;
	transition: color 0.2s ease, border-bottom 0.2s ease;
}

a:visited:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) {
	color: #6B5A42;
}

a:hover:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) {
	color: #8B6914;
	text-decoration: none;
	border-bottom: 1px solid #8B6914;
}

a:active:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) {
	color: #A67C00;
}

/* Liens dans les contenus principaux - légèrement plus visibles */
.card-body a:not(.btn),
.content a:not(.btn),
main a:not(.btn) {
	color: #6B5A42;
	border-bottom: 1px dotted rgba(107, 90, 66, 0.3);
}

.card-body a:not(.btn):hover,
.content a:not(.btn):hover,
main a:not(.btn):hover {
	color: #8B6914;
	border-bottom: 1px solid #8B6914;
}

/* SMALL LINK - compact */
a.small {
	color: #6B5A42;
	text-decoration: none;
	font-size: 0.9em;
	transition: color 0.2s ease;
}

a.small:hover {
	color: #8B6914;
}

/* TABL LINK - pour tableaux */
a.tabl {
	color: #5D4E37;
	text-decoration: none;
	font-size: 0.9em;
	padding: 2px 4px;
	border-radius: 3px;
	transition: all 0.2s ease;
}

a.tabl:hover {
	color: #4A3D2A;
	background-color: rgba(139, 105, 20, 0.1);
}



/*########################## LAYER ##################################"*/
.layercontainer
{
	position: absolute;
}


.layer1
{
	position: absolute;
	z-index:1;
	top:-23px;
	height:45px;
	width:45px;
	

}

.layer2
 {
	position: absolute;
	z-index:2;
	top:-23px;
	height:45px;
	width:45px;
}

.layer3
 {
	position: absolute;
	z-index:3;
	top:-23px;
	height:45px;
	width:45px;
}

/*############################# TITLE ###################################*/

	
@media(min-width:768px)
{
	.titre-page
	{
		margin-top:0px;
		margin-left: 20%;
		padding-top:12px;
		padding-left:5px;
		float: left;
		position : absolute;
		width:447px;

		background-image: url("../images/tplv41/supporth2.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.79);
		font-size:1.4em;
		text-align: center;
		font-weight: 700;
		color: #2c1810;
	}
}
@media(max-width:767px)
{
	.titre-page
	{
		margin-top:0px;
		margin-left: 20%;
		padding-top:10px;
		padding-left:2px;
		float: left;
		position : absolute;
		width:290px;

		background-image: url("../images/tplv41/supporth2.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.79);
		font-size:1em;
		text-align: center;
		font-weight: 700;
		color: #2c1810;
	}

}

 @media(max-width:575px)
 {
	.titre-page
	{
		margin-top:0px;
		margin-left: 20%;
		padding-top:10px;
		padding-left:2px;
		float: left;
		position : absolute;
		width:150px;

		background-image: url("../images/tplv41/supporth2.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.79);
		font-size:1em;
		text-align: center;
		font-weight: 700;
		color: #2c1810;
	}

 }

/* Titre de page en pleine largeur (en haut du corps) */
.titre-page-full {
	width: 100%;
	padding: 0;
}

.titre-page-full h2 {
	width: 100%;
	border-radius: 0;
	margin: 0 0 10px 0;
	padding: 10px 15px;
}
/* Titres harmonisés - style flexible sans images de support */
h2 {
	background-color: #D4A574;
	color: #4A3520;
	padding: 8px 15px;
	font: 700 1.4em Trebuchet MS, Arial, Helvetica, sans-serif;
	margin: 15px 0 10px 0;
	border-radius: 4px;
	border-left: 4px solid #8B5A2B;
}

h3 {
	background-color: #DFBA8A;
	color: #4A3520;
	padding: 6px 12px;
	font: 700 1.2em Trebuchet MS, Arial, Helvetica, sans-serif;
	margin: 12px 0 8px 0;
	border-radius: 3px;
	border-left: 3px solid #A0724A;
}

h4 {
	background-color: #E8CBA0;
	color: #4A3520;
	padding: 4px 10px;
	font: 700 1.1em Trebuchet MS, Arial, Helvetica, sans-serif;
	margin: 10px 0 6px 0;
	border-radius: 3px;
	border-left: 3px solid #B8956E;
}

h5 {
	background-color: #F0DCB8;
	color: #4A3520;
	padding: 3px 8px;
	font: 700 1em Trebuchet MS, Arial, Helvetica, sans-serif;
	margin: 8px 0 4px 0;
	border-radius: 2px;
	border-left: 2px solid #D5B482;
}

/*######################### TABLEAU ####################################"*/

.marche
{
	color: black;
	font-size: 1.0em;
	text-align: center; 
	border-collapse: collapse;
	padding: 2px;
	width:458px;
	border:0px;

}

.journal
{
	padding:0;margin:0;
	width:460px;
	border:0px;
}

.col2
{
	color: black;
	font-size: 1.0em;
	text-align: center; 
	border-collapse: collapse;
	padding: 2px;
	width:258px;
	border:0px;

}

.TableContainer
{
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 15px;	
	width:730px;
}

.TableCol0
{
	vertical-align:top;
	width:730px;
}

.TableCol1
{
	vertical-align:top;
	width:460px;
}

.TableCol2 
{
	vertical-align:top;
	width:260px;
}

.TableMap
{
	vertical-align:top;
	width:500px;
}

.TablePerso
{
	vertical-align:top;
	width:224px;
	font-size:0.85em;
}

.TitleT1
{
	border:1px solid #D5B482;
	margin-bottom:15px;
	padding-left:10px;
	padding-bottom:15px;
	padding-right:5px;	
}

.TitleT2
{
	border:1px solid #D5B482;
	margin-bottom:15px;
	padding-bottom:15px;
}

.xp 
{
	border: 1px dashed #CE9544;
	text-align: left;
	display: block;
	width: 650px;
	background-color: #FDF3D6;
	margin-top: 0px;
	margin-bottom: 15px;
	margin-left: 40px;
}

/* ########################### FORMULAIRES  #############################""*/

input[type=text],input[type=password],textarea[type=text],select {
   	padding:1px;
   	margin:1px;
   	border:1px solid #A3824D;
    background-color: #F4E1C0;
    padding-left: 3px;
	color: #915a09;
}

input[type=text]:focus, input[type=password]:focus, textarea[type=text]:focus {
	border:1px solid #A3824D;
	background-color: #FAF0E2;
	padding-left: 3px;
	color: #915a09;
}

input[type=submit],input[type=reset],input[type=button] {
	background-color:#F7E3C0;
	border-color:#C5A97C rgb(154, 130, 92) rgb(154, 130, 92) rgb(197, 169, 124);
	border-style:solid;
	border-width:1px;
	color:#634425;
	cursor:pointer;
}



/* ########################### MENU DEROULANT  #############################""*/
.marquee
{
	font-family:  Times, Arial, "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
	font-size:0.9em;
	width:100%;
	font-weight: bold;
	color:black;
}

/*######################## IMAGE ########################################*/
.imgleft
{
	float: left;
	padding-right:10px;
	padding-bottom:5px;	
}
.imgtaverniere
{
	float: left;
	padding-right:50px;
	padding-bottom:5px;	
}
 .img-fluid
{
	max-width: 100%;
	height: auto;

}

/* ########################### TABLEAU NORMAL 1  #############################""*/


caption.p
{
   margin: auto;
   font-family: Arial, Times, "Times New Roman", serif;
   font-weight: bold;
   font-size: 1.2em;
   margin-bottom: 10px; 
}

table.p
{
   font-size:0.9em;
   margin: auto;
   border-collapse: collapse; 
   width: 550px;
}

th.p
{
	background-color: #BC8F48;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center; 
	background-image: url("../images/titlem.jpg");	
	background-repeat: repeat-x;	 
}

tr.p
{
   border: 1px solid black;
}

td.p
{

   text-align: center; 
   padding: 2px;
   background-color:#F3EDDB;
}

td.e
{
   text-align: center; 
   padding: 2px;
   background-color:#ECE1C0;
}

/* tableau V4 BAse */
.TableV4 {
	margin:auto;
	padding:0px;
	width:95%;
	box-shadow: 10px 10px 5px #888888;
	/*border:1px solid #4c4c4c;*/

	/*-moz-border-radius-bottomleft:2px;
	-webkit-border-bottom-left-radius:2px;
	border-bottom-left-radius:2px;
	
	-moz-border-radius-bottomright:2px;
	-webkit-border-bottom-right-radius:2px;
	border-bottom-right-radius:2px;
	
	-moz-border-radius-topright:2px;
	-webkit-border-top-right-radius:2px;
	border-top-right-radius:2px;
	
	-moz-border-radius-topleft:2px;
	-webkit-border-top-left-radius:2px;
	border-top-left-radius:2px;	*/
	
}
.TableV4 table
{
    border-spacing: 1px;
	width:100%;
	/*height:100%;*/
	margin:0px;
	padding:0px;
}
/*.TableV4 tr:last-child td:last-child
 {
	-moz-border-radius-bottomright:2px;
	-webkit-border-bottom-right-radius:2px;
	border-bottom-right-radius:2px;
}
.TableV4 table tr:first-child td:first-child
 {
	-moz-border-radius-topleft:2px;
	-webkit-border-top-left-radius:2px;
	border-top-left-radius:2px;
}
.TableV4 table tr:first-child td:last-child 
{
	-moz-border-radius-topright:2px;
	-webkit-border-top-right-radius:2px;
	border-top-right-radius:2px;
}.TableV4 tr:last-child td:first-child
{
	-moz-border-radius-bottomleft:2px;
	-webkit-border-bottom-left-radius:2px;
	border-bottom-left-radius:2px;
}
.TableV4 tr:hover td
{
	
}*/


.TableV4 tr:nth-child(odd){ background-color:#f2d5ba; }
.TableV4 tr:nth-child(even)    { background-color:#d3ad89; }
.TableV4 td
{
	vertical-align:middle;
	border:1px solid #974817;
	border-width:0px 1px 1px 0px;
	text-align:center;
	padding:2px;
	font-size:12px;
	/*font-family:Arial;*/
	font-weight:normal;
	color:#000000;
}
/*.TableV4 tr:hover
{
	opacity:0.7;
}*/

.TableV4 tr:last-child td{
	border-width:0px 1px 0px 0px;
}.TableV4 tr td:last-child{
	border-width:0px 0px 1px 0px;
}.TableV4 tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.TableV4 tr:first-child td
{
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.79);
		background:-o-linear-gradient(bottom, #7f3f00 5%, #562900 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7f3f00), color-stop(1, #562900) );
	background:-moz-linear-gradient( center top, #7f3f00 5%, #562900 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#7f3f00", endColorstr="#562900");	background: -o-linear-gradient(top,#7f3f00,562900);

	background-color:#7f3f00;
	border:0px solid #4c4c4c;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.TableV4 tr:first-child:hover td
{
	background:-o-linear-gradient(bottom, #7f3f00 5%, #562900 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7f3f00), color-stop(1, #562900) );
	background:-moz-linear-gradient( center top, #7f3f00 5%, #562900 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#7f3f00", endColorstr="#562900");	background: -o-linear-gradient(top,#7f3f00,562900);

	background-color:#7f3f00;
}
.TableV4 tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.TableV4 tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

/* tableau V4 2 */
.TableV4-2 {
	margin:auto;
	padding:0px;
	width:95%;
	/*border:1px solid #4c4c4c;*/

/*	-moz-border-radius-bottomleft:2px;
	-webkit-border-bottom-left-radius:2px;
	border-bottom-left-radius:2px;
	
	-moz-border-radius-bottomright:2px;
	-webkit-border-bottom-right-radius:2px;
	border-bottom-right-radius:2px;
	
	-moz-border-radius-topright:2px;
	-webkit-border-top-right-radius:2px;
	border-top-right-radius:2px;
	
	-moz-border-radius-topleft:2px;
	-webkit-border-top-left-radius:2px;
	border-top-left-radius:2px;	*/
	
}
.TableV4-2 table
{
    border-spacing: 1px;
	width:100%;
	/*height:100%;*/
	margin:0px;
	padding:0px;
}
/*.TableV4-2 tr:last-child td:last-child
 {
	-moz-border-radius-bottomright:2px;
	-webkit-border-bottom-right-radius:2px;
	border-bottom-right-radius:2px;
}
.TableV4-2 table tr:first-child td:first-child
 {
	-moz-border-radius-topleft:2px;
	-webkit-border-top-left-radius:2px;
	border-top-left-radius:2px;
}
.TableV4-2 table tr:first-child td:last-child 
{
	-moz-border-radius-topright:2px;
	-webkit-border-top-right-radius:2px;
	border-top-right-radius:2px;
}
.TableV4-2 tr:last-child td:first-child
{
	-moz-border-radius-bottomleft:2px;
	-webkit-border-bottom-left-radius:2px;
	border-bottom-left-radius:2px;
}*/
.TableV4-2 tr:nth-child(odd){ background-color:#f2d5ba; }
.TableV4-2 tr:nth-child(even)    { background-color:#d3ad89; }
.TableV4-2 td
{
	vertical-align:middle;
	border:1px solid #974817;
	border-width:1px 1px 1px 1px;
	padding:2px;
	font-size:12px;
	/*font-family:Arial;*/
	font-weight:normal;
	color:#000000;
}

/* tableau V4 3 */
.TableV4-3 {
	margin:auto;
	padding:0px;
	width:98%;
	/*border:1px solid #4c4c4c;*/

	/*-moz-border-radius-bottomleft:2px;
	-webkit-border-bottom-left-radius:2px;
	border-bottom-left-radius:2px;
	
	-moz-border-radius-bottomright:2px;
	-webkit-border-bottom-right-radius:2px;
	border-bottom-right-radius:2px;
	
	-moz-border-radius-topright:2px;
	-webkit-border-top-right-radius:2px;
	border-top-right-radius:2px;
	
	-moz-border-radius-topleft:2px;
	-webkit-border-top-left-radius:2px;
	border-top-left-radius:2px;	*/
	
}
.TableV4-3 table
{
    border-spacing: 1px;
	width:100%;
	/*height:100%;*/
	margin:0px;
	padding:0px;
}
/*.TableV4-3 tr:last-child td:last-child
 {
	-moz-border-radius-bottomright:2px;
	-webkit-border-bottom-right-radius:2px;
	border-bottom-right-radius:2px;
}
.TableV4-3 table tr:first-child td:first-child
 {
	-moz-border-radius-topleft:2px;
	-webkit-border-top-left-radius:2px;
	border-top-left-radius:2px;
}
.TableV4-3 table tr:first-child td:last-child 
{
	-moz-border-radius-topright:2px;
	-webkit-border-top-right-radius:2px;
	border-top-right-radius:2px;
}
.TableV4-3 tr:last-child td:first-child
{
	-moz-border-radius-bottomleft:2px;
	-webkit-border-bottom-left-radius:2px;
	border-bottom-left-radius:2px;
}*/
.TableV4-3 tr:nth-child(odd){ background-color:#F3EDDB; }
.TTableV4-3 tr:nth-child(even)    { background-color:#ECE1C0; }
.TableV4-3 td
{
	vertical-align:right;
	border:1px solid #974817;
	border-width:0px 0px 0px 0px;
	padding:2px;
	font-size:12px;
	/*font-family:Arial;*/
	font-weight:normal;
	color:#000000;
}


/* Tri marché */
.Mcontainer {
    overflow: hidden;
}

.filterDiv {
    display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}



/* ###########################  PETITS TABLEAU  #############################""*/

table.ppt3
{
   font-size:0.9em;
   margin: auto;
   border-collapse: collapse;
   width: 400px;
}

table.ppt
{
   font-size:0.9em;
   margin: auto;
   border-collapse: collapse;
   width: 200px;
}

table.ppt2
{
   font-size:1.1em;
   margin: auto;
   border-collapse: collapse;
   width: 400px;
}

table.ppt1
{
   font-size:0.9em;
   margin: auto;
   border-collapse: collapse;
   width: 100px;
}

.Ched
{
   font-size:0.9em;
   border-collapse: collapse;
   width: 100px;
}

td.ppt1
{
   padding: 2px;
}
/* ########################### GRAPHISME kiposcripteur#############################""*/

/* ------kiposcripteur --------*/
td.ks
{
	background-image: url("images/bckks.gif");
}


/* ------Tableau --------*/
table.j
{
   margin: auto;
   border-collapse: collapse;
   width: 700px;

}

/* ------Cellules --------*/
td.j
{
	border: 1px solid black;
	text-align: justify;
	padding: 8px;
	background-image: url("../images/journal/BckJV2.jpg");
	font-size: 0.85em;
}

/* ------ Fieldset --------*/

fieldset.journal
{
	margin: auto;
	/*text-align:justify;*/
	margin-bottom: 15px;
	background-image: url("../images/journal/BckJV2.jpg");
	width: 700px;
}


/* ############## Graphisme Accueil #####################""*/


table.m
{
	font-size:1em;
	margin: auto;
	border-collapse: collapse;
	width: 550px;
	border: 1px solid #8C6117;
	background-image :url("../images/bcknews.jpg");
	background-repeat: repeat-x;	

}


th.m
{
	background-color: #D5C684;
	color: black;
	font-size: 1em;
	padding: 8px;
	text-align: left;
	background-image: url("../images/titlem.jpg");	
	background-repeat: repeat-x;		
}


td.m
{
	text-align: justify;
	padding: 7px;
	
}



/* ############## CELLULES ENTETES COULEURS VILLES #####################""*/
th.Gaalen
{
	background-color: #BC8F48;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center; 
}

th.Kipie
{
	background-color: #0078E1;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center; 
}

th.Pyrrit
{
	background-color: #DAB137;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center;
}

th.Gypsis
{
	background-color: #14934D;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center;
}

th.Karst
{
	background-color: #C2C02F;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center;
}

th.Lapiaz
{
	background-color: #B4B4B4;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center;
}

th.Koryndon
{
	background-color: #CDAA10;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center;
}

th.Eolis
{
	background-color: #9FDAF6;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center;
}
th.Piethra
{
	background-color: #BFFFCF;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center;
}
th.Aargoni
{
	background-color: #7FEAFF;
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center;
}


/* ############## CELLULES ENTETES SPECIALES .... #####################""*/

th.Erreur
{
	color: black;
	font-size: 1.0em;
	padding: 8px;
	text-align: center;
	background-image: url("../images/titleerreur.jpg");	
	background-repeat: repeat-x;	 
}

 
/* ########################### LIGNES SPECIALES  #############################""*/

/* ------ Lignes ShoutBox --------*/
td.h
{
   text-align: left;
   padding: 2px;
   background-color:#F3EDDB;
   font-size:1.2em;   
}

td.h2
{
	text-align: left; 
	padding: 2px; 
	font-size:1.2em;   
}

/* ------ Lignes Couleur ATPE etc.. --------*/
td.Macon
{
   text-align: center; 
   padding: 2px; 
   background-color:#8B8B8B;
}
td.Menuisier
{
   text-align: center; 
   padding: 2px;
   background-color:#B9851D;
}
td.TailleurP
{
   text-align: center;
   padding: 2px;
   background-color:#CCCCCC;
}
td.Tailleur
{
   text-align: center;
   padding: 2px; 
   background-color:#96B277;
}
td.Boucher
{
   text-align: center;
   padding: 2px; 
   background-color:#D28585;
}
td.Epicier
{

   text-align: center; 
   padding: 2px;
   background-color:#BEB18B;
}
td.Brasseur
{
   text-align: center; 
   padding: 2px;
   background-color:#C2EBDD;
}
td.Fromager
{
   text-align: center;
   padding: 2px;
   background-color:#EEF0E8;
}
td.Boulanger
{
   text-align: center;
   padding: 2px;
   background-color:#EED393;
}
td.Conservateur
{
   text-align: center;
   padding: 2px;
   background-color:#FFBF28;
}
td.Poisson
{
   text-align: center; 
   padding: 2px;
   background-color:#78AEFF;
}
td.Or
{
   text-align: center;
   padding: 2px;
   background-color:#E0C136;
}
td.Metal
{
   text-align: center;
   padding: 2px; 
   background-color:#A99494;
}
td.Cheval
{
   text-align: center; 
   padding: 2px;
   background-color:#B9A03A;
}
td.Poterie
{
   text-align: center; 
   padding: 2px;
   background-color:#A3E0CD;
}
td.Marbre
{
   text-align: center; 
   padding: 2px;
   background-color:#CDEAE9;
}
td.Tannerie
{
   text-align: center; 
   padding: 2px;
   background-color:#DEBB95;
}
td.Mediplante
{
   text-align: center; 
   padding: 2px;
   background-color:#ADEBFE;
}
td.Papier
{
   text-align: center; 
   padding: 2px;
   background-color:#AFCF83;
}


/* ########################### MISES EN PAGES TEXTE  #############################""*/

/* ------ Titres --------*/

h3
{
   text-align:center;
   font-weight: bold;
   font-size: 1.1em;
   color: #874A00;
   margin-bottom: 15px;
}

h4
{
   text-align:center;
   font-weight: bold;
   font-size: 0.9em;
   color: #874A00;
   margin-bottom: 10px; 
}

/* ------Textes --------*/

.center
{
	text-align: center;
}

.right
{
	text-align: right;
}

.left
{
	text-align: left;
}

.top
{
	vertical-align: top;
}

.justify
{
	text-align: justify;
}

.vim
{
	color:  #58471F;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
}
.imp
{
	color:  #CC0000;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
}

/* ------Aucun passage a la ligne lors d'un DIV --------*/

.nodiv
{
	display: inline;
	position: relative;
}





/*
fieldset.mot
{
   margin: auto;
	text-align:center;
   margin-bottom: 15px; // Une marge pour séparer les fieldset 
   background-color: #E9D8AF;
   width: 170px;
}*/



ptt
{
	color:  #000000;
	font-size: 0.85em;
}

/*
strong
{
	color:  #802F00;
	font-size: 18px;
}*/

.pt
{
	font-size: 0.8em;
	font-weight: bold;	
}


.mt
{
	color:  #000000;
	font-size: 9px;
	font-weight: bold;
	background-color:#FFFFFF;
	text-align:center;
}

/*
fieldset.message
{
   margin-bottom: 15px;
   background-color: #E8E9B9;
   width: 500px;
}

.infm
{

	font-weight: bold;
	background:center;
	background-image :url("../images/kcode_info.png");
	background-repeat: no-repeat;
	height:30px;
	padding-left:35px;
	padding-top:5px;		
}
*/


/*TABLEAU*/
/*TABLEAU CENTRE CONTROL FLOTTANT LEFT*/
.monperso
{
	width: 170px;
	/*margin-left: 10px;*/
	border: 1px solid #8C6117;
	font-size: 1.0em;
	text-align: justify;
	/*float:left;*/
	background-color:#E8E4D6;
	margin-bottom: 2px;
}

/*TABLEAU CENTRE CONTROL  right*/
.mesinfos
{
	width: 380px;
	margin-left: 2px;
	margin-bottom: 2px;
	border: 1px solid #8C6117;
	font-size: 1.0em;
	text-align: justify;
	background-color:#E8E4D6;
}

/*TABLEAU CENTRE CONTROL  right*/
.mesinfosV3
{
	width: 575px;
	margin-left: 2px;
	margin-bottom: 2px;
	border: 1px solid #8C6117;
	font-size: 1.0em;
	text-align: justify;
	background-color:#E8E4D6;
}

/*TABLEAU princ*/
.princ
{
	margin: auto;
	width: 550px;
	/*margin-left: 10px;*/
	border: 1px solid #8C6117;
	font-size: 1.0em;
	text-align: justify;
	/*float:left;*/
	background-color:#E8E4D6;
	margin-bottom: 2px;
}

/*TD tab flottant left*/
.carac
{
	border: 1px solid #8C6117;
	/* border-color :#986A29;*/
	text-align: justify;
	padding: 1px;
	background-color:#F6E4AD;
}

.carac2
{
	border: 1px solid #8C6117;
	/* border-color :#986A29;*/
	text-align: left;
	padding: 1px;
	background-color:#F3EDDB;
}


.title
{
	border: 1px solid #8C6117;
	/* border-color :#986A29;*/
	text-align: left;
	padding: 1px;
	background-color:#B59B4E;
	font-weight: bold;
}

.title2
{
	border: 1px solid #8C6117;
	/* border-color :#986A29;*/
	text-align: left;
	padding: 1px;
	background-color:#B59B4E;
}

/*TD tab flottant left*/
.action
{
	/*border: 1px solid #8C6117;*/
	/* border-color :#986A29;*/
	text-align: left;
	padding: 1px;
	font-size: 1.0em;
	/*background-color:#F6E4AD;*/
}

/*TD histo*/
.histo
{
	border: 1px solid #8C6117;
	/* border-color :#986A29;*/
	text-align: left;
	padding: 1px;
	font-size: 1.0em;
	background-color:#F6E4AD;
}

/*TABLEAU classique*/
.c
{  
	font-size:0.9em;
	margin: auto;
	border-collapse: collapse;
	width: 550px;
	border: 1px solid #8C6117;
	text-align: justify;
	background-color:#E8E4D6;
}


.c2
{  
	font-size:0.9em;
	margin: auto;
	width: 550px;
	border: 1px solid #8C6117;
	text-align: justify;
	background-color:#E8E4D6;
}

/*TABLEAU Forum*/

.forum
{  
	font-size:0.9em;
	margin: auto;
	width: 725px;
	border: 1px solid #8C6117;
	text-align: justify;
	background-color:#E8E4D6;
}





/******************************* div *****************************************************/

#GNav
{
	width:700px;
}
#GNav ul
{
	list-style:none;
}
#GNav li
{
	list-style:none;
	display:inline;
	margin:0 5px;
}
#GNav li a
{
	color:#B9A03A;
	text-transform:uppercase;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
	border-bottom:5px solid #B9A03A;
	cursor:pointer;
	padding:0 0 1px 0;
}
#GNav li a:hover
{
	border-bottom:5px solid #B97B00;
	color:#B97B00;
	text-decoration:none;
}
#GNav li a.current
{
	border-bottom:5px solid #B97B00;
	color:#B97B00;
	text-transform:uppercase;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
}
/* ########################### MESSAGES  #############################""*/
/*
.messageInfo, .messageValid, .messageWarning, .messageErreur, .messageMissions {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
max-width:660px;
text-align: justify;

}
.messageInfo {
color: #00529B;
background-color: #BDE5F8;
background-image: url(../images/kcode_info.png); 
}
.messageValid {
color: #4F8A10;
background-color: #DFF2BF;
//background-image:url('success.png');
}
.messageWarning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url(../images/kcode_attention.png); 
}
.messageErreur {
color: #D8000C;
background-color: #FFBABA;
    background-image: url(../images/kcode_erreur.png); 
}
.messageMissions {
color: #7D4B00;
background-color: #F8E965;
    background-image: url(../images/kcode_missions.png); 
}


.messageErreurMini td 
{ 
    background-position: 10px center;
    background-color: #FEBDBA;
    padding-left : 35px;
    padding-right : 5px;
    margin-bottom: 5px;
    color: #D40000;
    height: 20px;
    font: normal 8pt ;
	border: 1px #D40000;
}*/

/* ########################### BLASONS  #############################""*/
/* ########################### BLASONS  #############################""*/


.blason3
{

	background:center;
	background-image :url("../images/bgypsisptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blason6
{

	background:center;
	background-image :url("../images/bkarstptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blason4
{

	background:center;
	background-image :url("../images/bkipieptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blason7
{

	background:center;
	background-image :url("../images/blapiazptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blason5
{

	background:center;
	background-image :url("../images/bpyrritptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blason8
{

	background:center;
	background-image :url("../images/bgaalenptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blason9
{

	background:center;
	background-image :url("../images/beolisptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blason10
{

	background:center;
	background-image :url("../images/bkoryndonptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blason12
{

	background:center;
	background-image :url("../images/bpiethraptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blason11
{

	background:center;
	background-image :url("../images/baargoniptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blason15
{

	background:center;
	background-image :url("../images/blazulptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blason14
{

	background:center;
	background-image :url("../images/bislandsisptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blason13
{

	background:center;
	background-image :url("../images/bcaledonythptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blasonGypsis
{

	background:center;
	background-image :url("../images/bgypsisptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blasonKarst
{

	background:center;
	background-image :url("../images/bkarstptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blasonKipie
{

	background:center;
	background-image :url("../images/bkipieptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blasonLapiaz
{

	background:center;
	background-image :url("../images/blapiazptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blasonPyrrit
{

	background:center;
	background-image :url("../images/bpyrritptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

.blasonGaalen
{

	background:center;
	background-image :url("../images/bgaalenptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blasonEolis
{

	background:center;
	background-image :url("../images/beolisptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blasonKoryndon
{

	background:center;
	background-image :url("../images/bkoryndonptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blasonPiethra
{

	background:center;
	background-image :url("../images/bpiethraptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blasonAargoni
{

	background:center;
	background-image :url("../images/baargoniptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blasonLazul
{

	background:center;
	background-image :url("../images/blazulptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blasonIslandsis
{

	background:center;
	background-image :url("../images/bislandsisptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}
.blasonCaledonyth
{

	background:center;
	background-image :url("../images/bcaledonythptt.gif");
	background-repeat: no-repeat;
	height:24px;
	padding-left:1px;
	padding-top:1px;
}

				
/* ########################### GRAPHISME BOUTON  #############################""*/
/*
input.Trm
{
	cursor: pointer;
	width: 22px;
	height: 22px;
	font-size: 0px;
	background-image: url(../images/bouton/bt_trm.gif);
	border: 0;
}
input.Trt
{
	cursor: pointer;
	width: 22px;
	height: 22px;
	font-size: 0px;
	background-image: url(../images/bouton/bt_trt.gif);
	border: 0;
}
input.Sale
{
	cursor: pointer;
	width: 22px;
	height: 22px;
	font-size: 0px;
	background-image: url(../images/bouton/bt_sale2.gif);
	border: 0;
}
input.AS
{
	cursor: pointer;
	width: 22px;
	height: 22px;
	font-size: 0px;
	background-image: url(../images/bouton/bt_as.gif);
	border: 0;
}
input.Mae
{
	cursor: pointer;
	width: 22px;
	height: 22px;
	font-size: 0px;
	background-image: url(../images/bouton/bt_eau.gif);
	border: 0;
}
*/
/*##########################MAP#####################################*/

.popout img{
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
	/*z-index:1;*/

}
.popout img:hover{
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
		/*z-index:2;*/

}

/*########################## LAYER ##################################"*/



.layer1
{
	position: absolute;
	z-index:11;
	top:-23px;
	height:45px;
	width:45px;
	

}

.layer2
 {
	position: absolute;
	z-index:12;
	top:-23px;
	height:45px;
	width:45px;
}

.layer3
 {
	position: absolute;
	z-index:13;
	top:-23px;
	height:45px;
	width:45px;
}

.layerV3-1
{
	z-index:21;
}

.layerV3-2
 {
	z-index:23;

}
.layerV3-3
 {
	z-index:24;

}
.layerV3-4
 {
	z-index:25;

}
.layerV3-5
 {
	z-index:26;

}
.layerav1
 {
	position: absolute;
	z-index:31;
	/*height:126px;
	width:120px;
	top:-63px*/
}

.layerav2
 {
	position: absolute;
	z-index:32;

}

.layerav3
 {
	position: absolute;
	z-index:33;

}
.layerav4
 {
	position: absolute;
	z-index:34;

}
.layerav5
 {
	position: absolute;
	z-index:35;

}
.layerav6
 {
	position: absolute;
	z-index:36;

}
.layerav7
 {
	position: absolute;
	z-index:37;

}
/*########################## TABLEAU ##################################"*/

td.map
{
	/*border: 1px dashed #CE9544;*/
	border-collapse: collapse;
}


td.JTitle /*titre journal */
{
	background-color:#E5DDC8;
	color:#7D5300;
	font-size:18px;
	font-weight:bold;
}
td.JArt /*Article journal */
{
	font-size:15px;
}


 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 2500; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 40px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
} 

.icon-bar {
	position:fixed;
    width: 45px; /* Set a specific width */
    background-color: #555; /* Dark-grey background */
	left: 0;
	top: 10%;
    z-index: 2499; /* Stay on top */
	
}

.icon-bar a {
    display: block; /* Make the links appear below each other instead of side-by-side */
    text-align: center; /* Center-align text */
    padding: 5px; /* Add some padding */
    transition: all 0.3s ease; /* Add transition for hover effects */
    color: white; /* White text color */
    font-size: 20px; /* Increased font-size */
}

.icon-bar a:hover {
    background-color: #000; /* Add a hover color */
}

/*hamburger*/
.hburger {
    width: 20px;
    height: 4px;
    background-color: white;
    margin: 3px 0;
}

        /* ======================================================= */
        /* SVGs INTÉGRÉS (Data URIs) */
        /* ======================================================= */
        :root {
            /* SVG 1: Texture de fond croisée subtile (pour le body) */
            --svg-bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg stroke='%23000000' stroke-width='1' opacity='0.05'%3E%3Cpath d='M0 20L20 0'/%3E%3Cpath d='M-5 5L5 -5'/%3E%3Cpath d='M15 25L25 15'/%3E%3C/g%3E%3C/svg%3E");
            
            /* SVG 2: Grain subtil (pour les panneaux/cartes) */
            --svg-panel-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");

            /* SVG 3: Corde marine pour les séparateurs (hr) */
            --svg-rope-separator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath fill='%23A0775F' d='M0 6q5-6 10 0t10 0 10 0 10 0 10 0 10 0q-5 6-10 0t-10 0-10 0-10 0-10 0-10 0z' opacity='0.6'/%3E%3Cpath fill='none' stroke='%237C543E' stroke-width='1' d='M0 6q5-6 10 0t10 0 10 0 10 0 10 0 10 0m-55 0q5 6 10 0t10 0 10 0 10 0 10 0 10 0'/%3E%3C/svg%3E");
        }

        /* ======================================================= */
        /* VARIABLES DE COULEURS (Jour / Nuit "Chaud") */
        /* ======================================================= */
        
        /* --- MODE JOUR (Parchemin et Cuir Clair) --- */
        :root[data-theme="day"] {
            --color-bg-main: #F3EAD3;     /* Fond parchemin clair */
            --color-panel-bg: #D9C3A3;    /* Panneau beige/cuir clair */
            --color-border: #A0775F;      /* Bordure cuir moyen */
            --color-text-main: #47322b;   /* Texte marron foncé */
            --color-text-highlight: #7C543E; /* Titres plus foncés */
            --color-accent: #D4AF37;      /* Or métallique */
            --blend-mode: multiply;       /* Pour incruster la texture sombre sur fond clair */
        }
        
        /* --- MODE NUIT (Taverne Sombre / Bois Chaud) --- */
        :root[data-theme="night"] {
            --color-bg-main: #3E2723;     /* Fond marron très profond (brou de noix) - PAS NOIR */
            --color-panel-bg: #5D4037;    /* Panneau bois sombre */
            --color-border: #8D6E63;      /* Bordure bois plus clair */
            --color-text-main: #EFEBE9;   /* Texte blanc cassé/crème */
            --color-text-highlight: #FFD54F; /* Titres Or chaud / Ambre */
            --color-accent: #FFC107;      /* Or lumineux */
            --blend-mode: soft-light;     /* Pour incruster la texture sur fond sombre */
        }

        /* Couleurs utilitaires (fixes) */
        :root {
            --font-primary: 'Roboto', sans-serif;
            --font-fancy: 'Cinzel', serif;
            --border-radius: 8px;
        }

        /* ======================================================= */
        /* STYLES GÉNÉRAUX */
        /* ======================================================= */
       /* body {*/
            /*background-color: var(--color-bg-main);*/
            /* Application de la texture SVG */
          /*  background-image: var(--svg-bg-texture);*/
            /* Magie : le blend-mode permet à la texture de s'adapter à la couleur de fond */
           /* background-blend-mode: var(--blend-mode);*/
            
           /* color: var(--color-text-main);*/
           /* font-family: var(--font-primary);*/
           /* min-height: 100vh;
          /*  transition: all 0.5s ease;*/
       /* }*/

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-fancy);
            color: var(--color-text-highlight);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }

        a { color: var(--color-accent); text-decoration: none; font-weight: bold; }
        a:hover { color: var(--color-text-highlight); text-decoration: underline; }

        /* Séparateur "Corde" */
        hr.rope-separator {
            border: 0;
            height: 12px;
            background-image: var(--svg-rope-separator);
            background-repeat: repeat-x;
            opacity: 0.8;
            margin: 2rem 0;
        }

        /* ======================================================= */
        /* COMPOSANTS THÉMATIQUES */
        /* ======================================================= */
        
        /* Header */
        .theme-header {
            background-color: var(--color-panel-bg);
            border-bottom: 3px solid var(--color-border);
            /* Texture sur le header aussi */
            background-image: var(--svg-panel-texture);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        /* Panneaux (Cards) */
        .card-panel {
            background-color: var(--color-panel-bg);
            /* Texture granuleuse sur les panneaux */
            background-image: var(--svg-panel-texture);
            border: 2px solid var(--color-border);
            border-radius: var(--border-radius);
            box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
             transition: all 0.5s ease;
        }
        
        /* Inputs */
        .theme-input {
            background-color: rgba(0,0,0,0.1); /* Légèrement assombri */
            border: 2px solid var(--color-border);
            color: var(--color-text-main);
            border-radius: 4px;
        }
        /* Ajustement spécifique pour le mode nuit des inputs pour la lisibilité */
        :root[data-theme="night"] .theme-input {
             background-color: rgba(255,255,255,0.05); /* Légèrement éclairci */
        }
        
        .theme-input:focus {
            box-shadow: 0 0 8px var(--color-accent);
            border-color: var(--color-accent);
             background-color: rgba(0,0,0,0.2);
        }

        /* Boutons */
        .btn-fantasy {
            font-family: var(--font-fancy);
            font-weight: 700;
            border: 2px solid var(--color-border);
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
            transition: all 0.2s;
        }
        .btn-fantasy:hover { transform: translateY(-2px); box-shadow: 4px 4px 8px rgba(0,0,0,0.4); }
        .btn-fantasy:active { transform: translateY(1px); box-shadow: none; }
        
        .btn-primary.btn-fantasy { background-color: var(--color-border); border-color: var(--color-bg-main); color: var(--color-bg-main); }
        .btn-secondary.btn-fantasy { background-color: var(--color-panel-bg); color: var(--color-text-main); }
        .btn-accent.btn-fantasy { background-color: var(--color-accent); border-color: var(--color-text-highlight); color: #3E2723; }

        /* Tableaux */
        .theme-table {
            --bs-table-bg: transparent;
            --bs-table-color: var(--color-text-main);
            --bs-table-border-color: var(--color-border);
        }
        .theme-table thead th {
            font-family: var(--font-fancy);
            color: var(--color-text-highlight);
            border-bottom-width: 2px;
            background-color: rgba(0,0,0,0.1);
        }
        .theme-table tbody tr:hover {
            background-color: rgba(255,213,79, 0.1) !important; /* Légère teinte dorée au survol */
        }

        /* Liste de messages */
        .message-list-container {
            /* Pas d'ascenseur - affichage naturel moderne */
            background: var(--color-bg-main);
            border: 2px solid var(--color-border);
            border-radius: 8px;
            overflow: hidden;
        }
        .message-item {
            background-color: var(--color-panel-bg);
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-border);
            margin-bottom: 8px;
            padding: 10px;
            transition: all 0.2s;
        }
        .message-item:hover {
            border-left-color: var(--color-accent);
            transform: translateX(2px);
        }
        .message-item.unread {
             border-left-color: var(--color-accent);
             background-color: rgba(212, 175, 55, 0.15); /* Teinte dorée */
        }



        /* Actions de messages (checkboxes, boutons) */
        .message-checkbox {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            cursor: pointer;
            margin-right: 8px;
        }

        .message-status-icon {
            flex-shrink: 0;
            width: 24px;
            text-align: center;
            font-size: 16px;
        }

        .message-content {
            flex: 1;
            min-width: 0;
            cursor: pointer;
        }

        .message-title {
            margin: 0 0 4px 0;
            font-size: 15px;
            font-weight: 600;
            color: var(--color-text-main);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .message-meta {
            font-size: 13px;
            color: #666;
            margin: 0;
        }

        .message-arrow {
            flex-shrink: 0;
            color: var(--color-border);
            font-size: 18px;
            transition: transform 0.2s;
        }

        .message-item:hover .message-arrow {
            transform: translateX(4px);
            color: var(--color-accent);
        }

        .message-actions {
            padding: 16px;
            background: var(--color-panel-bg);
            border-top: 2px solid var(--color-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .message-select-all {
            font-size: 14px;
            color: var(--color-text-main);
            cursor: pointer;
            text-decoration: none;
        }

        .message-select-all:hover {
            color: var(--color-accent);
            text-decoration: underline;
        }

        .btn-load-more {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 12px;
            background: linear-gradient(145deg, var(--color-panel-bg), #C9B393);
            border: 2px solid var(--color-border);
            border-radius: 8px;
            color: var(--color-text-main);
            font-family: var(--font-fancy);
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 16px;
            text-decoration: none;
        }

        .btn-load-more:hover {
            background: linear-gradient(145deg, #C9B393, var(--color-panel-bg));
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            color: var(--color-text-main);
        }

        .btn-load-more i {
            transition: transform 0.2s;
        }

        .btn-load-more:hover i {
            transform: rotate(180deg);
        }

        .no-messages {
            padding: 40px 20px;
            text-align: center;
            color: #666;
            font-style: italic;
        }

        /* Panel de liste d'amis */
        .messagerie-amis-panel {
            background: var(--color-panel-bg);
            border: 2px solid var(--color-border);
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
        }

        .messagerie-amis-panel h4 {
            font-family: var(--font-fancy);
            color: var(--color-text-highlight);
            margin-bottom: 0.5rem;
        }

        .messagerie-amis-panel .list-group-item {
            background-color: transparent;
            border: 1px solid var(--color-border);
            border-left: 3px solid var(--color-border);
            transition: all 0.2s;
        }

        .messagerie-amis-panel .list-group-item:hover {
            border-left-color: var(--color-accent);
            background-color: rgba(212, 175, 55, 0.1);
            transform: translateX(2px);
        }

        .messagerie-amis-panel .btn-group {
            gap: 0.25rem;
        }

        /* Responsive pour messages */
        @media (max-width: 768px) {
            .message-item {
                padding: 12px;
            }
            
            .message-title {
                font-size: 14px;
            }
            
            .message-meta {
                font-size: 12px;
            }
            
            .message-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .message-checkbox {
                width: 16px;
                height: 16px;
            }
        }

/*######################### BLASONS RESPONSIVE ####################################*/
/**
 * BLASONS RESPONSIVE
 * Système responsive pour les blasons en bois utilisés partout dans le site
 * S'adapte automatiquement à la largeur du conteneur
 * Réduit la taille de police si nécessaire pour éviter les retours à la ligne
 */

/* Conteneur des blasons - fluid et responsive */
[class*="blason"].nodiv,
.blason.nodiv {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	/* Dimensions de base adaptatives */
	width: clamp(20px, 5vw, 40px);
	height: clamp(20px, 5vw, 40px);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	/* Assurer que le contenu ( ) ne force pas l'agrandissement */
	overflow: hidden;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0;
}

/* Adaptation selon la largeur du conteneur parent */
@container (max-width: 600px) {
	[class*="blason"].nodiv,
	.blason.nodiv {
		width: 24px;
		height: 24px;
	}
}

@container (min-width: 601px) and (max-width: 900px) {
	[class*="blason"].nodiv,
	.blason.nodiv {
		width: 30px;
		height: 30px;
	}
}

@container (min-width: 901px) {
	[class*="blason"].nodiv,
	.blason.nodiv {
		width: 40px;
		height: 40px;
	}
}

/* Support pour les media queries classiques (fallback pour navigateurs sans container queries) */
@media (max-width: 600px) {
	[class*="blason"].nodiv,
	.blason.nodiv {
		width: 20px !important;
		height: 20px !important;
	}

	/* Réduction de la police dans les titres contenant des blasons */
	h1:has([class*="blason"].nodiv),
	h2:has([class*="blason"].nodiv),
	h3:has([class*="blason"].nodiv) {
		font-size: clamp(1rem, 4vw, 1.5rem);
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	[class*="blason"].nodiv,
	.blason.nodiv {
		width: 28px !important;
		height: 28px !important;
	}

	h1:has([class*="blason"].nodiv),
	h2:has([class*="blason"].nodiv),
	h3:has([class*="blason"].nodiv) {
		font-size: clamp(1.2rem, 4.5vw, 1.8rem);
	}
}

@media (min-width: 901px) {
	[class*="blason"].nodiv,
	.blason.nodiv {
		width: 36px !important;
		height: 36px !important;
	}
}

/* Styles spécifiques pour les blasons dans les titres */
h1 [class*="blason"].nodiv,
h2 [class*="blason"].nodiv,
h3 [class*="blason"].nodiv,
h4 [class*="blason"].nodiv {
	/* Alignement vertical au centre du texte */
	vertical-align: middle;
	margin: 0 0.25em;
}

/* Dans les cards ou panneaux étroits */
.card-panel [class*="blason"].nodiv,
.panneauInfo [class*="blason"].nodiv,
.modal-title [class*="blason"].nodiv {
	width: clamp(20px, 4vw, 30px);
	height: clamp(20px, 4vw, 30px);
}

/* Dans les listes et tableaux */
table [class*="blason"].nodiv,
li [class*="blason"].nodiv {
	width: clamp(16px, 3vw, 24px);
	height: clamp(16px, 3vw, 24px);
	margin: 0 0.3em;
}

/* Variante pour blasons plus petits dans le chat */
.message-item [class*="blason"].nodiv,
#taverneChat [class*="blason"].nodiv {
	width: 16px;
	height: 16px;
	margin: 0 0.2em;
}

/* Adaptation fluide pour les conteneurs très étroits (ex: mobile en portrait) */
@media (max-width: 400px) {
	[class*="blason"].nodiv,
	.blason.nodiv {
		width: 18px !important;
		height: 18px !important;
	}

	/* Titres encore plus compacts */
	h1:has([class*="blason"].nodiv),
	h2:has([class*="blason"].nodiv) {
		font-size: clamp(0.9rem, 3.5vw, 1.2rem);
		line-height: 1.3;
		word-break: break-word;
	}

	/* Permettre le wrap sur petits écrans */
	h1, h2, h3 {
		white-space: normal;
		overflow-wrap: break-word;
	}
}

/* Classe utilitaire pour forcer une taille spécifique si nécessaire */
[class*="blason"].nodiv.blason-sm {
	width: 20px !important;
	height: 20px !important;
}

[class*="blason"].nodiv.blason-md {
	width: 30px !important;
	height: 30px !important;
}

[class*="blason"].nodiv.blason-lg {
	width: 40px !important;
	height: 40px !important;
}

/* Assurer que le texte autour des blasons ne déborde pas */
*:has(> [class*="blason"].nodiv) {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Flexbox pour les conteneurs avec blasons */
.d-flex:has([class*="blason"].nodiv),
.d-inline-flex:has([class*="blason"].nodiv) {
	flex-wrap: wrap;
	gap: 0.3em;
}

/* Style médiéval pour la bulle d'aide (Popover) */
    .driver-popover {
        background-color: #f4e4bc !important; /* Couleur parchemin */
        background-image: url('https://www.transparenttextures.com/patterns/parchment.png'); /* Texture papier */
        border: 3px double #5d4037 !important;
        border-radius: 5px !important;
        font-family: 'MedievalSharp', cursive !important;
        color: #3e2723 !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
    }

    .driver-popover-title {
        font-size: 1.4rem !important;
        color: #8b4513 !important;
        border-bottom: 1px solid #5d4037;
        margin-bottom: 10px !important;
    }

    .driver-popover-description {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    /* Style des boutons du guide */
    .driver-popover-footer button {
        background: #5d4037 !important;
        color: #f4e4bc !important;
        border: 1px solid #d4af37 !important;
        text-shadow: none !important;
        font-family: 'MedievalSharp', cursive !important;
    }

    /* L'effet de flou sur le reste du site */
    .driver-overlay {
        backdrop-filter: blur(1px);
        background-color: rgba(0, 0, 0, 0.4) !important;
    }

    /* Responsive mobile pour le guide */
    @media (max-width: 768px) {
        .driver-popover {
            max-width: 85vw !important;
            font-size: 0.9rem !important;
            padding: 10px !important;
        }
        .driver-popover-title {
            font-size: 1.1rem !important;
        }
        .driver-popover-description {
            font-size: 0.9rem !important;
            line-height: 1.3 !important;
        }
        .driver-popover-description ul,
        .driver-popover-description ol {
            padding-left: 15px !important;
            margin-left: 0 !important;
        }
        .driver-popover-description li {
            font-size: 0.85rem !important;
            margin-bottom: 2px !important;
        }
        .driver-popover-footer button {
            padding: 5px 12px !important;
            font-size: 0.85rem !important;
        }
    }

/* ================================================
   RESPONSIVE - Adaptation de la taille du texte
   ================================================ */

/* Base - Réduction globale sur tous les écrans */
body {
    font-size: 14px;
}

/* Tables thématiques - Taille de base réduite */
.theme-table {
    font-size: 0.9rem;
}

.theme-table thead th {
    font-size: 0.85rem;
    padding: 0.5rem;
}

.theme-table tbody td {
    font-size: 0.85rem;
    padding: 0.4rem;
}

/* Tablettes et petits écrans (< 992px) */
@media (max-width: 991px) {
    body {
        font-size: 13px;
    }

    .theme-table {
        font-size: 0.85rem;
    }

    .theme-table thead th {
        font-size: 0.8rem;
        padding: 0.4rem;
    }

    .theme-table tbody td {
        font-size: 0.8rem;
        padding: 0.35rem;
    }

    /* Titres */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.2rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.95rem; }

    /* Boutons */
    .btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Messages */
    .message-item .message-title {
        font-size: 0.9rem;
    }

    .message-item .message-meta {
        font-size: 0.75rem;
    }

    /* Modals */
    .modal-title {
        font-size: 1.1rem;
    }

    .modal-body {
        font-size: 0.9rem;
    }

    /* Forms */
    .form-label {
        font-size: 0.85rem;
    }

    .form-control {
        font-size: 0.85rem;
        padding: 0.4rem;
    }
}

/* Mobiles (< 768px) */
@media (max-width: 767px) {
    body {
        font-size: 12px;
    }

    .theme-table {
        font-size: 0.75rem;
    }

    .theme-table thead th {
        font-size: 0.7rem;
        padding: 0.3rem;
    }

    .theme-table tbody td {
        font-size: 0.7rem;
        padding: 0.25rem;
    }

    /* Titres encore plus petits */
    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.95rem; }
    h6 { font-size: 0.9rem; }

    /* Boutons compacts */
    .btn {
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
    }

    .btn-sm {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    /* Messages compacts */
    .message-item .message-title {
        font-size: 0.85rem;
    }

    .message-item .message-meta {
        font-size: 0.7rem;
    }

    /* Modals */
    .modal-title {
        font-size: 1rem;
    }

    .modal-body {
        font-size: 0.85rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    /* Forms */
    .form-label {
        font-size: 0.8rem;
    }

    .form-control {
        font-size: 0.8rem;
        padding: 0.35rem;
    }

    /* Badges et labels */
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.4rem;
    }

    /* Cards */
    .card-body {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .card-title {
        font-size: 1rem;
    }

    /* Navigation */
    .nav-link {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }

    /* Alerts */
    .alert {
        font-size: 0.85rem;
        padding: 0.6rem;
    }
}

/* Très petits mobiles (< 576px) */
@media (max-width: 575px) {
    body {
        font-size: 11px;
    }

    .theme-table {
        font-size: 0.7rem;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .theme-table thead th {
        font-size: 0.65rem;
        padding: 0.25rem;
    }

    .theme-table tbody td {
        font-size: 0.65rem;
        padding: 0.2rem;
    }

    /* Titres très compacts */
    h1 { font-size: 1.2rem; }
    h2 { font-size: 1.1rem; }
    h3 { font-size: 1rem; }
    h4 { font-size: 0.95rem; }
    h5 { font-size: 0.9rem; }
    h6 { font-size: 0.85rem; }

    /* Boutons très compacts */
    .btn {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }

    .btn-sm {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }

    /* Icônes plus petites dans les boutons */
    .btn i,
    .btn-sm i {
        font-size: 0.9em;
    }

    /* Messages très compacts */
    .message-item {
        padding: 0.5rem;
    }

    .message-item .message-title {
        font-size: 0.8rem;
    }

    .message-item .message-meta {
        font-size: 0.65rem;
    }

    /* Modals plein écran sur petits mobiles */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
    }

    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    .modal-title {
        font-size: 0.95rem;
    }

    .modal-body {
        font-size: 0.8rem;
        padding: 0.75rem;
    }

    /* Forms très compacts */
    .form-label {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .form-control {
        font-size: 0.75rem;
        padding: 0.3rem;
    }

    /* Badges très compacts */
    .badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.35rem;
    }

    /* Cards compactes */
    .card-body {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .card-title {
        font-size: 0.9rem;
    }

    /* Navigation compacte */
    .nav-link {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
    }

    /* Alerts compactes */
    .alert {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    /* Liste d'amis compacte */
    .messagerie-amis-panel {
        font-size: 0.8rem;
    }

    .messagerie-amis-panel h4 {
        font-size: 0.95rem;
    }

    /* Container responsive */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Adaptation des espacements pour économiser de la place */
@media (max-width: 767px) {
    .mb-4 { margin-bottom: 0.75rem !important; }
    .mb-3 { margin-bottom: 0.5rem !important; }
    .mb-2 { margin-bottom: 0.35rem !important; }
    .mt-4 { margin-top: 0.75rem !important; }
    .mt-3 { margin-top: 0.5rem !important; }
    .mt-2 { margin-top: 0.35rem !important; }
    .p-4 { padding: 0.75rem !important; }
    .p-3 { padding: 0.5rem !important; }
    .p-2 { padding: 0.35rem !important; }
}

/* Mode paysage pour tablettes */
@media (min-width: 576px) and (max-width: 991px) and (orientation: landscape) {
    body {
        font-size: 13px;
    }

    .theme-table {
        font-size: 0.8rem;
    }

    .modal-dialog {
        max-width: 90%;
    }
}

/* ========================================
   BOUTON CLOSE (btn-close) - Correction visibilité
   ======================================== */

/* Bouton close avec Font Awesome */
.btn-close,
.btn-close-white,
.modal-header .btn-close,
.alert-confirm .btn-close,
.alert-success .btn-close,
.alert-primary .btn-close,
.alert-danger .btn-close,
.alert-warning .btn-close,
.alert-info .btn-close {
    background: none;
    border: none;
    padding: 0.25em;
    opacity: 1;
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #000;
}

.btn-close::before,
.btn-close-white::before,
.modal-header .btn-close::before,
.alert-confirm .btn-close::before,
.alert-success .btn-close::before,
.alert-primary .btn-close::before,
.alert-danger .btn-close::before,
.alert-warning .btn-close::before,
.alert-info .btn-close::before {
    content: "\00d7";
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1;
}

.btn-close:hover,
.btn-close-white:hover,
.modal-header .btn-close:hover,
.alert-confirm .btn-close:hover,
.alert-success .btn-close:hover,
.alert-primary .btn-close:hover,
.alert-danger .btn-close:hover,
.alert-warning .btn-close:hover,
.alert-info .btn-close:hover {
    opacity: 0.7;
}

/* Position du bouton close dans les alertes */
.alert-dismissible .btn-close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    z-index: 2;
}

/* Assurer que le contenu de l'alerte ne chevauche pas le bouton */
.alert-dismissible {
    padding-right: 3rem;
}

/* ========================================
   Z-INDEX - Hiérarchie des couches
   ======================================== */

/* Modals au-dessus de tout sauf messages */
.modal {
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

/* Messages/Alertes toujours au-dessus des modals */
.alert,
.alert-confirm,
/* Container des notifications système au-dessus de tout */
.notifications-container,
#notifications-container,
.messages-container {
    z-index: 1100 !important;
    position: relative;
}

/* Alertes DANS le container de notifications système uniquement */
#notifications-container .alert-danger,
#notifications-container .alert-warning,
#notifications-container .alert-info,
#notifications-container .alert-success,
.notifications-container .alert-danger,
.notifications-container .alert-warning,
.notifications-container .alert-info,
.notifications-container .alert-success {
    z-index: 1100 !important;
}

/* Les alertes normales dans le contenu de page - z-index bas pour ne pas passer au-dessus des modals */
.alert:not(#notifications-container .alert):not(.notifications-container .alert) {
    z-index: auto !important;
    position: relative;
}

/* Forcer les alertes de contenu à rester derrière les modals (z-index modal Bootstrap ~1055) */
.card .alert,
.card-body .alert,
.col .alert,
.row .alert,
main .alert,
.content .alert,
.bloc .alert {
    z-index: 1 !important;
}

/* Toast notifications si utilisées */
.toast-container {
    z-index: 1150 !important;
}

/* ========================================
   BADGE WARNING PULSANT (conseillers/édile)
   ======================================== */

/* Container pour avatar avec badge warning */
.avatar-warning-container {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    margin: 0 2px;
}

/* Badge warning triangulaire pulsant */
.warning-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 28px;
    height: 28px;
    z-index: 10;
    animation: pulse-warning 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.7));
}

.warning-badge-small {
    width: 20px;
    height: 20px;
    top: -3px;
    right: -3px;
}

/* Animation pulsante */
@keyframes pulse-warning {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Variante avec glow plus intense */
@keyframes pulse-warning-glow {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.7));
    }
    50% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 8px rgba(255, 0, 0, 1));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.7));
    }
}

.warning-badge-glow {
    animation: pulse-warning-glow 1.2s ease-in-out infinite;
}

/* === KipoScripteur === */
.ks-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #FFF8E1;
    border: 1px solid #D7CCC8;
    border-radius: 4px;
    font-size: 0.88em;
    color: #5D4037;
    transition: background 0.2s, border-color 0.2s;
}
.ks-banner:hover {
    background: #FFECB3;
    border-color: #8B4513;
}
.ks-container {
    max-height: 60vh;
    overflow-y: auto;
}
.ks-intro {
    font-size: 1.05em;
    font-weight: 600;
    color: #5D4037;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #D7CCC8;
}
.ks-intro i {
    color: #8B4513;
    margin-right: 5px;
}
.ks-item {
    padding: 8px 10px;
    margin-bottom: 6px;
    border-left: 3px solid #D7CCC8;
    background: #FAFAFA;
    border-radius: 0 4px 4px 0;
    transition: border-color 0.2s;
}
.ks-item:hover {
    border-left-color: #8B4513;
}
.ks-item.ks-recent {
    border-left-color: #E65100;
    background: #FFF8E1;
}
.ks-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.ks-icon {
    color: #8B4513;
    font-size: 0.85em;
}
.ks-header strong {
    font-size: 0.95em;
    color: #3E2723;
}
.ks-date {
    font-size: 0.78em;
    color: #999;
    margin-left: auto;
}
.ks-body {
    font-size: 0.88em;
    color: #555;
    line-height: 1.4;
    padding-left: 20px;
}

/* ========== Tavern Modals Common ========== */
.tav-section { padding: 5px 0; }
.tav-intro { color: #5D4037; font-size: 0.95em; margin-bottom: 10px; }
.tav-intro i { margin-right: 5px; }
.tav-outro { color: #888; font-size: 0.9em; font-style: italic; margin-top: 10px; }
.tav-empty { text-align: center; color: #999; padding: 20px 10px; font-style: italic; }
.tav-empty i { display: block; font-size: 2em; margin-bottom: 8px; opacity: 0.4; }
.tav-voir-plus {
    display: block; text-align: center; padding: 8px;
    margin-top: 10px; font-size: 0.85em; color: #795548;
    text-decoration: none; border-top: 1px solid #eee;
}
.tav-voir-plus:hover { color: #3E2723; background: #fafafa; }
.tav-nav-links { display: flex; gap: 8px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.tav-badge {
    display: inline-block; font-size: 0.75em; padding: 2px 8px;
    border-radius: 10px; font-weight: 600; white-space: nowrap;
}
.tav-badge-prod { background: #E8F5E9; color: #2E7D32; }
.tav-badge-achat { background: #FFF3E0; color: #E65100; }
.tav-badge-vente { background: #E3F2FD; color: #1565C0; }
.tav-badge-other { background: #F5F5F5; color: #757575; }
.tav-badge-new { background: #FFEB3B; color: #F57F17; animation: tav-pulse 1.5s ease-in-out infinite; }
@keyframes tav-pulse { 50% { opacity: 0.7; } }

/* Transactions */
.tav-trans-list { max-height: 350px; overflow-y: auto; }
.tav-trans-item {
    padding: 8px 10px; border-bottom: 1px solid #f0ebe5;
    transition: background 0.15s;
}
.tav-trans-item:hover { background: #fdf8f3; }
.tav-trans-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.tav-trans-date { font-size: 0.78em; color: #aaa; }
.tav-trans-body { font-size: 0.88em; color: #333; line-height: 1.5; }
.tav-trans-foot { font-size: 0.82em; margin-top: 2px; }
.tav-trans-foot a { color: #795548; text-decoration: none; }
.tav-trans-foot a:hover { text-decoration: underline; }
.tav-delay { font-size: 0.8em; color: #999; margin-left: 8px; }
.tav-delay i { margin-right: 2px; }

/* Messages */
.tav-msg-list { margin: 0; }
.tav-msg-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-bottom: 1px solid #f0ebe5;
    transition: background 0.15s;
}
.tav-msg-item:hover { background: #fdf8f3; }
.tav-msg-unread { background: #FFF8E1; }
.tav-msg-unread:hover { background: #FFF3C4; }
.tav-msg-icon { font-size: 1.1em; padding-top: 2px; }
.tav-msg-content { flex: 1; min-width: 0; }
.tav-msg-title { display: block; font-size: 0.9em; font-weight: 600; color: #3E2723; text-decoration: none; }
.tav-msg-title:hover { text-decoration: underline; }
.tav-msg-meta { display: block; font-size: 0.78em; color: #999; margin-top: 2px; }
.tav-msg-meta a { color: #795548; text-decoration: none; }

/* Historique */
.tav-histo-list { max-height: 350px; overflow-y: auto; }
.tav-histo-item {
    display: flex; gap: 10px; padding: 6px 10px;
    border-bottom: 1px solid #f0ebe5; font-size: 0.85em;
}
.tav-histo-item:nth-child(even) { background: #fdf8f3; }
.tav-histo-date { flex-shrink: 0; color: #aaa; font-size: 0.85em; min-width: 75px; }
.tav-histo-content { flex: 1; color: #444; line-height: 1.4; }
.tav-histo-action { font-weight: 600; color: #5D4037; margin-right: 5px; }
.tav-histo-ville { font-size: 0.82em; color: #999; margin-left: 5px; }

/* Articles / Journaux */
.tav-article-list { margin: 0; }
.tav-article-item {
    padding: 8px 10px; border-bottom: 1px solid #f0ebe5;
    transition: background 0.15s;
}
.tav-article-item:hover { background: #fdf8f3; }
.tav-article-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tav-article-title { font-size: 0.92em; font-weight: 600; color: #3E2723; text-decoration: none; }
.tav-article-title:hover { text-decoration: underline; color: #5D4037; }
.tav-article-title i { color: #795548; margin-right: 3px; }
.tav-article-resume { font-size: 0.82em; color: #777; margin-top: 4px; line-height: 1.4; }

/* Menu / Auberges */
.tav-menu-list { margin: 0; }
.tav-menu-item {
    padding: 10px; border-bottom: 1px solid #f0ebe5;
    transition: background 0.15s;
}
.tav-menu-item:hover { background: #fdf8f3; }
.tav-menu-head { margin-bottom: 6px; }
.tav-menu-name { font-weight: 600; color: #3E2723; font-size: 0.95em; }
.tav-menu-name i { color: #795548; margin-right: 4px; }
.tav-menu-resto { font-size: 0.82em; color: #999; margin-left: 8px; }
.tav-menu-ingredients { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 6px 0; }
.tav-menu-ingredients img { width: 26px; height: auto; vertical-align: middle; }
.tav-menu-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 6px; padding-top: 5px; border-top: 1px dashed #eee;
}
.tav-menu-stats { color: #888; font-size: 0.82em; flex: 1; }

/* Proverbe / Citations */
.tav-proverbe { text-align: center; padding: 15px 10px; }
.tav-quote {
    font-size: 1.05em; font-style: italic; color: #5D4037;
    border-left: 3px solid #D7CCC8; margin: 15px 20px;
    padding: 10px 15px; background: #EFEBE9; border-radius: 0 6px 6px 0;
    line-height: 1.5;
}