/*#############################################################
FEUILLE DE STYLE DU SITE
#############################################################*/

/* standard elements */

	.container {
	background-color: #FFF;
  width: 970px;
  margin: 0 auto;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 0.8em;
  overflow: hidden; /* <-- englobe les floats */
  height: auto;     /* <-- corrige le problème de vide */
}

.containerM { 
    width:960px; 	
    margin: 0 auto; 
    background:#FFFFFF; 
    height:100%; 
    padding-bottom: 100px; /* Espace pour le footer fixe */
}

/* 1️⃣ s'assure que la div principale englobe les floats */
.container::after {
  content: "";
  display: table;
  clear: both;
}

/* 2️⃣ même chose pour le parent global */
.container3::after {
  content: "";
  display: table;
  clear: both;
}

.container3 {
  background: #fff;        /* fond blanc partout */
  min-height: 100vh;       /* au moins toute la hauteur de la fenêtre */
/*  display: flex;
 flex-direction: column;*/ 
   position: relative;
  width: 1176px;
  margin: 0 auto;
  background: #ffffff;
  z-index: 1;
}


/* Dégradés externes gauche et droite */
.container3::before,
.container3::after {
  content: "";
  position: absolute;
  top: 0;
  width: 25px;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.container3::before {
  left: -25px;
  background: linear-gradient(to right, #f5f3f1, #ffffff);
}

.container3::after {
  right: -25px;
  background: linear-gradient(to left, #f5f3f1, #ffffff);
}




body {
	width:955px;
	color: #053829 !important;
	font-family: Verdana !important;
background-image: linear-gradient(
  to right,
/*  #1a4b38 0%,     
  #246349 25%,   
  #2e7a57 50%,    
  #246349 75%,    
  #1a4b38 100% */   
  

  #f5f3f1 100%
) !important;

}

a {
	color: #1D7338 !important;
}

a:hover {
	color: #e3ae38 !important;
}


/* Titres dans le contenu */
 #actu h3, #actu h4, #actu h5, #actu h6 {
	font-size: 1.3em;
	margin: 0.6em 0 0.3em 0;
	color: #1D7338;
	font-weight: bold;
}


#actu h1 {
	font-size: 2em;
	margin: 0.8em 0 0.3em 0;
	color:#1D7338 ;
	font-weight: bold; } 


#actu h2 {
	font-size: 1.5em;
	margin: 0.6em 0 0.3em 0 ;
	color: #d99b00 !important;
	font-weight: bold;}




/* --- EXCEPTIONS : Ne pas appliquer les règles globales au menu PC --- */
ul#menu a,
ul#menu a:hover,
ul#menu ul a,
ul#menu ul a:hover,
ul#menu ul li a span,
ul#menu ul li a.ssmenu span,
ul#menu ul li a.ssmenu:hover span {
	color: inherit !important;
	background: inherit !important;
	background-color: inherit !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: inherit !important;
	margin: inherit !important;
	border: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	text-decoration: inherit !important;
}

/* --- PROTECTION : Les boutons .next et .prev des déroulants ne doivent pas être affectés par les styles du menu --- */
.wrapper-news .prev,
.wrapper-news .next {
	/* Réinitialiser tous les styles qui pourraient venir du menu */
	background: #d99b00 !important;
	color: white !important;
	text-decoration: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: bold !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.JOURNALTRETSOIS {	font-size: 1.9em; text-decoration:underline; text-decoration:overline; color:#FFFFFF;    background: linear-gradient(to right, #276343 0%, #4a7c59 50%, #276343 100%); list-style: none;
	font-weight: bold; float:left;  padding:6px; margin-left:-2px;  padding-bottom:10px; padding-top:10px;}  /*categorie*/

.categorietitre  {	font-size: 1.3em; background-color: #e3ae38; color:#FFFFFF; font-weight: bold; padding-left:6px; padding-right:6px;  padding-bottom:6px; padding-top:6px; vertical-align:middle;  float:right;
	list-style: none; } /*nom*/


#actu {font-family:Verdana, Arial, Helvetica, sans-serif; }
#date { text-decoration:underline; background-color: #e3ae38; font:bold; color:#FFFFFF; }



#mactu { border-bottom: 1px dotted #1D7338; padding-left:2px; margin-right:3px; padding-bottom:4px; padding-top:4px;font-family:Verdana, Arial, Helvetica, sans-serif; font-size:7.5pt; background:#FFFFFF; color:#1D7338;}
#mcat { font-size:0.8em; }
#mdate {  font-weight:bolder; font-style:normal; text-decoration:none; color:#e3ae38;   }
#mactu a{ color: #003399; font-weight:normal; text-decoration:none; font-style:normal;}
#mactu a:hover {
    color: #0033CC;    }



/*PAGE NEWS RUBRIQUE*/
#lactu {font-family:Verdana, Arial, Helvetica, sans-serif;   font:bold; text-decoration:none; font-size:14px; color:#006600; border: 1px solid #e3ae38; width:440px;  padding: 2px;  margin:15px ; float: left; height:132px; }
#lactu a {text-decoration:none; }
#lactudate {  font:bold; background-color: #e3ae38; float:right; font-size:14px; color:#FFFFFF; }
#lactutitre { padding-top:10PX; padding-bottom:10px;}
#lactu img { width:200px; max-height:130px;  margin:5px;  float:left;}

.agendamini2012 {
  font-weight: normal;
  font-size: 0.8rem;
  width: 99%;
  height: 200px;
  text-align: left;
  overflow-y: auto;
  overflow-x: hidden;

  /* ---- Firefox ---- */
  scrollbar-width: thin; /* peut être: auto | thin | none */
  scrollbar-color: #e3ae38 #ffffff; /* pouce (thumb) | rail (track) */
}

.agendamini2012 #lesdates { padding-left:7px;padding-bottom:5px; padding-top:4px; }



/* ---- Chrome, Edge, Safari ---- */
.agendamini2012::-webkit-scrollbar {
  width: 8px; /* largeur de la barre verticale */
}

.agendamini2012::-webkit-scrollbar-track {
  background: #ffffff; /* couleur du rail */
}

.agendamini2012::-webkit-scrollbar-thumb {
  background-color: #e3ae38; /* couleur du curseur */
  border-radius: 4px; /* arrondir le curseur */
}

.agendamini2012::-webkit-scrollbar-thumb:hover {
  background-color: #d99b00; /* effet au survol */
}

.agendamini2012::-webkit-scrollbar-corner {
  background: #ffffff; /* angle bas-droit, si présent */
}




.rub  {
	/*border-top: 1px solid #FFFFFF;*/
	font-size:12px;  font-weight:bold;  float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;	display: block; 
	padding: 6px ;margin-bottom:7px;
}

.rub  a {
	background:#246248;text-align:center;
	color: #fff !important; 
	font-weight: bold !important;
	 margin:5px; padding-top:6px; padding-bottom:6px; padding-left:6px; padding-right:6px;

	text-decoration: none;

}


.rub  a:hover {
	background: #d99b00;
	color: #fff;		 
	text-align:center;
}



.rubAL  {
	/*border-top: 1px solid #FFFFFF;*/
	font-size:12px;  font-weight:bold;  float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;	display: block; 
	padding: 6px ;margin-bottom:7px;
}

.rubAL  a {
	background:#314b29; text-align:center;
	color: #fff !important; 
	 margin:5px; padding-top:6px; padding-bottom:6px; padding-left:6px; padding-right:6px;

	text-decoration: none;

}


.rubAL  a:hover {
	background:#d99b00;
	color: #fff !important; 
	text-align:center;
}



.rubSP  {
	/*border-top: 1px solid #FFFFFF;*/
	font-size:12px;  font-weight:bold;  float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;	display: block; 
	padding: 6px ;margin-bottom:7px;
}

.rubSP  a {
	background: #5b8025; text-align:center;
	color: #fff !important; 
	 margin:7px; padding-top:6px; padding-bottom:6px; padding-left:6px; padding-right:6px;

	text-decoration: none;
}

.rubSP  a:hover {
	background:#d99b00;
	color: #fff !important; 
	text-align:center;
}


/* style de la PAGINATION */
div.pagination {
    font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 3px;
    margin: 3px;
}
div.pagination a {
    background-color: #fff;
    border: 1px solid #1D7338;
    color: #1D7338;
    margin: 1px;
    padding: 2px 5px;
    text-decoration: none;
}
div.pagination a:hover {
    border: 1px solid #0F4032;
    color: #0F4032;
	
    margin: 1px;
    padding: 2px 5px;
}

div.pagination span.courante {
    background-color: #e3ae38;
    border: 1px solid #e3ae38;
    color: #fff;
    font-weight: bold;
    margin: 1px;
    padding: 2px 5px;
}
div.pagination span.desactive {
    background-color: #fff;
    border: 1px solid #1D7338;
    color: #1D7338;
    margin: 1px;
    padding: 2px 5px;
}


/* ********************************** TABLE ACTU **************************************** */

#tabresumes {width:895px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:11px !important;
	color: #fff !important; 
	margin: 0 auto;}
	
	#tabresumes a {
	color: #fff !important; 
}


	#tabresumes a:hover {
	color: #FFCC33; font-weight:bold;
}

	#tabresumes td{
	margin: 02px; line-height:14px;
	padding: 04px; padding-bottom:10px; padding-top:10px;
	border-right-width: 2px;
	border-right-style: solid; border:#FFFFFF;
}


	#tabresumes_intitule {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:1.2em; line-height:1.8em;
	font-weight:bold;
	text-align:center;
	color:#FFF;
	background-color: #2b4324;
	}

	tr.pair {
  background-color: #5b8025; 
}

tr.impair {
  background-color:#1D7338;
/*   #A3B7DE;
*/}




/* MENU SPORT  navigation */
.menusport {
	float:left;  background:#003399;	
	width: 240px; margin-right:14px;
}

.menusport ul { margin-left:3px; 
	padding: 0;
}
.menusport li {
	border-bottom: 1px solid #FFFFFF;
	/*border-top: 1px solid #FFFFFF;*/
	list-style: none;
}
.menusport li a {
	background:#0066FF;
	color: #fff;
	display: block;  
	padding: 6px 6px 6px 10px;
	text-decoration: none;
	font-size:13px; font-weight:bold; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif;
}
.menusport li a:hover {
	background: #0033CC;
	color: #0099FF;	
	font-size:13px; 
	font-weight:bold; 
	text-align:center;
}


/* MENU SPORT  navigation */
.menueduc {
	float:left;  	
	width: 240px; margin-right:0; margin-bottom:0PX;
}

.menueduc ul { margin-left:0px; margin-top:0;
	padding: 0;
}
.menueduc li {
	border-bottom: 1px solid #FFFFFF; margin-top:0; margin-bottom:0;
	/*border-top: 1px solid #FFFFFF;*/
	list-style: none;
}
.menueduc li a {
	background:#FF3333;
	color: #fff;
	display: block;  
	padding: 6px 6px 6px 10px;
	text-decoration: none;
	font-size:13px; font-weight:bold; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif;
}
.menueduc li a:hover {
	background: #FF6600;
	color: #FFF;	
	font-size:13px; 
	font-weight:bold; 
	text-align:center;
}



/*-------------------------------------------------------
*/ 

.menuAMISDUVILLAGE ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
 
.menuAMISDUVILLAGE li {
 margin-left:2px;
 float:left; /*pour IE*/
 }
 
.menuAMISDUVILLAGE ul li a {
 display:block;
 float:left;   
 text-decoration:none;
 text-align:center;
	background:#d3c2aa;
	color: #663300;
	padding: 6px 6px 6px 10px;
		font-size:13px; font-weight:bold; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif;
 }
 
.menuAMISDUVILLAGE ul li a:hover {
 background-color: #996633;
	color: #fff;
	padding: 6px 6px 6px 10px;
		font-size:13px; font-weight:bold; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif;
 } 
 
 
 
/* ---------------------------------------------------------------------------------------------------
FORMULAIRE*/


.textField {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	
	background-color: #BAD3EC;
	border: 1px solid #0099FF;
	}

.select {
	font-family: Arial, Helvetica, sans-serif;
	
	color: #000;
	background-color: #BAD3EC;
	border: 1px solid #0099FF;
	}
	
input {
	color: #000;
	font: normal 0.8em; 
	background-color: #BAD3EC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	
	.textInput { /*Champ de texte*/
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	
	background-color: #BAD3EC;
	border: 1px solid #0099FF;
}

.textInputcontenu { /*Champ de texte*/
	font-family: Arial, Helvetica, sans-serif;
	color: #000;

	background-color: #BAD3EC;
	border: 1px solid #0099FF;
}


/* ---------------------------------------------------------------------------------------------------


/* ---------------------------------------------------------------------------------------------------
LES COMMENTAIRES */
#commentaire {
padding: 3px; 
margin:6px;
margin-right: auto; 
margin-left: auto; 
background-color: #5aa486;  
text-align: left; 
border:2px #3399FF; 
width:90%;
font-size:1em}

#infocommentaire { 
clear:both;
padding:3px;
 background-color: #3d7f64; color:#FFFFFF;
line-height:13px; font-weight:bold; 
font-style:italic;}

#commentaire_edition { clear:both; 
background-color: #0099FF; line-height:20px; 
font-weight:bold;
 font-style:italic;
  text-align:right;}
/*6e96d5*/





/*3 blocs*/
.barrededroite legend.bloc{ font-weight:bold; font-size:1.2em; background-color:#1D7338; color:#FFFFFF; font-family:Verdana, Geneva, sans-serif; }

/* Style spécifique pour le titre "Au cinéma casino" */
.barrededroite legend.bloc.cinema {
    font-size: 11pt !important;
    background-color: #1D7338 !important;
    color: #FFFFFF !important;
    border: 2px solid #1D7338 !important;
    padding: 3px 8px !important;
}
fieldset.bloc {border:1px solid #1D7338; font-size:0.8em; margin:2px; padding:3px; }



.barrededroite.barrededroite h3 {font-size:11pt;color:#ffffff; background-color:#1D7338; background-position:right; background-repeat:no-repeat; padding-left:8px; margin-top:0px; padding-top:2px; padding-left:2px; margin-bottom:5px; margin-top:25px; text-align:left; } /*titre rubrique bleu */

.barrededroite {   width: 202px;
  background: #fff;
  float: right;
  height: auto;     /* <-- remplace 100% */
}




.municipales { 

overflow:hidden;
 overflow-y:auto;
 scrollbar-face-color: #e3ae38;
       scrollbar-shadow-color: #FFF;
       scrollbar-highlight-color: #fff;
       scrollbar-3dlight-color: #FFF ;
       scrollbar-darkshadow-color: #fff;
       scrollbar-track-color: #fff;
	          scrollbar-arrow-color: #fff;
			  
}




/************************************** COLONNE droite DE NEWS *************************************
*/
	.wrapper-news {
		position: relative;
		width: 100%;
		max-width: 300px; /* ajuste selon ton design */
		height: 450px; /* Hauteur fixe pour afficher les boutons */
	}

	.news-container {
		max-height: 400px;
		height: 400px; /* Hauteur fixe pour le conteneur */
		overflow-y: auto;
		border: 1px solid #ccc;
		padding: 3px;
		background: #f9f9f9;
		margin-bottom: 10px; /* Espace pour le bouton du bas */

    /* Firefox */
    scrollbar-width: thin;                /* auto | thin | none */
    scrollbar-color: #e3ae38 #ffffff;    /* thumb color then track color */
}


	.news-item {
		display: flex;
		flex-direction: row;
		margin-bottom: 8px;
		margin-top: 3px;
		padding: 4px;
		background: white;
		border-radius: 3px;
		box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	}

	.image-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 6px;
		flex-shrink: 0;
	}

	.news-item img {
		width: 60px;
		height: 50px;
		object-fit: cover;
		border-radius: 3px;
	}

	.news-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.news-content a {
		text-decoration: none;
		color: #1D7338;
		font-weight: normal;
		font-size: 0.75em;
		line-height: 1.1;
	}

	.news-content a:hover {
		text-decoration: underline;
	}

	.news-date {
		font-size: 0.65em;
		color: #d99b00;
		margin-top: 2px;
		text-align: left;
	}

	/* Boutons flèches fixés - Protection contre les styles du menu */
	.wrapper-news .prev, 
	.wrapper-news .next {
		position: absolute;
		left: 5px;
		width: 24px;
		height: 24px;
		background: #d99b00;
		cursor: pointer;
		border-radius: 50%;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 14px;
		font-weight: bold;
	}

	.wrapper-news .prev { 
		top: 5px; 
	}
	.wrapper-news .next { 
		bottom: 5px;
		left: 5px; /* Assure que le bouton est à gauche */
	}

	.wrapper-news .prev:hover, 
	.wrapper-news .next:hover {
		background: #b8860b;
		transform: scale(1.1);
	}

.wrapper-news .prev:focus, 
.wrapper-news .next:focus,
.wrapper-news .prev:active, 
.wrapper-news .next:active {
	outline: none;
	box-shadow: 0 0 6px 2px rgba(217, 155, 0, 0.6); /* halo doré */
}
			
	/* WebKit/Blink (Chrome, Edge, Safari) */
.news-container::-webkit-scrollbar { width: 6px; }
.news-container::-webkit-scrollbar-track { background: #fff; border-radius: 3px; }
.news-container::-webkit-scrollbar-thumb { background: #e3ae38; border-radius: 3px; }
.news-container::-webkit-scrollbar-thumb:hover { background: #d99b00; }
		
			 
			/* Styles pour le footer */
.footer {
    clear: both;
    width: 100%;
   margin: 20px 0 0 0;
   margin-top:30px;
    padding: 15px 20px;
	height:100%;
    background-color: #f8f8f8;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    left: 0;
    right: 0;
    min-height: auto;  position: relative;  z-index: 1;


}


.footer p {
    margin: 5px 0;
    font-size: 0.8em;
    color: #666;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 0 35px;
}

.footer a {
    color: #1D7338 !important;
    text-decoration: underline;
}

.footer a:hover {
    color: #0F4032 !important;
}

/* Dégradés externes gauche et droite */
.footer::before,
.footer::after {
  content: "";
  position: absolute;
  top: 0;
  width: 25px;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.footer::before {
  left: -25px;
  background: linear-gradient(to right, #f5f3f1, #f8f8f8);
}

.footer::after {
  right: -25px;
  background: linear-gradient(to left, #f5f3f1, #f8f8f8);
}







/* Style général des liens d’actu en page newsseule */
.titre  {	 
font-family:Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 6px;
  vertical-align: middle;  } /*nom*/


.titredate { 
	color:#FFFFFF; 
	padding:4px;    
	background: linear-gradient(to right, #276343 0%, #4a7c59 50%, #276343 100%); 
	font-size: 1em; font-weight:bold;
}



.titre .lien-actu {
  color: #d99b00 !important;
  font-weight: bolder;
  text-decoration: underline !important;
  font-size: 1.7em;
}

/* Couleur au survol */
.titre .lien-actu:hover {
  color: #e3ae38 !important;
}

/* ============================================
   MEDIA QUERIES POUR TABLETTES (iPad)
   ============================================
   Adaptations spécifiques pour iPad sans perturber PC, iPhone ou Android mobile
   iPad : 768px (portrait) à 1024px (paysage)
   ============================================ */

/* Tablettes en mode portrait (768px) et paysage (jusqu'à 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	
	body {
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
	}
	

	
	/* Adapter les tableaux pour iPad */
	#tabresumes {
		width: 95%;
		max-width: 900px;
	}
	

	/* S'assurer que les images ne débordent pas */
	img {
		max-width: 100%;
		height: auto;
	}
	
	/* Styles pour les boutons enunclic sur iPad */
	.enunclic {
		width: 100%;
		padding: 10px;
		margin: 10px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		grid-column: 1 / -1 !important;
	}
	
	.enunclic ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px; /* espace entre les boutons */
	}
	
	.enunclic li {
		margin: 0;
		padding: 0;
		flex: 1 1 calc(25.333% - 10px); /* 3 boutons par ligne, espace inclus */
		box-sizing: border-box;
		max-width: calc(33.333% - 10px);
		min-width: 100px; /* empêche les boutons de devenir trop étroits */
	}
	
	.enunclic li a {
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #276343 0%, #4a7c59 50%, #276343 100%);
		color: #FFFFFF !important;
		text-decoration: none;
		padding: 10px 8px;
		border-radius: 8px;
		font-size: 0.9em;
		font-weight: bold;
		border: 2px solid #FFFFFF;
		transition: all 0.3s ease;
		line-height: 1.2;
		text-align: center;
		min-height: 44px;
		width: 100%;
		white-space: normal; /* permet au texte de passer à la ligne */
		word-break: break-word; /* casse proprement les longs mots */
		box-sizing: border-box;
	}
	
	.enunclic li a:hover,
	.enunclic li a:active {
		background: #e3ae38 !important;
		color: #fff !important;
		border-color: #1D7338;
		transform: translateY(-2px);
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
	}
	
	.enunclic a {
		color: #FFFFFF !important;
	}
	
	.enunclic a:hover,
	.enunclic a:active {
		color: #FFD700 !important;
	}
}