
#AffichBAS{
	display:inline-block;position:relative;float:left;
	width:100%;
}
#AffichHAUT{
	position:relative;
	width:100%;height:23vw;
	}
#AffImage{/*Affichage de l'image du jour*/
z-index:10;overflow:hidden;
	position:relative;display:inline-block;float:left;
	width:99%;height:28.5vw;margin-top:1vw;
	/*Background-color:transparent;*/
	Background-color:black;
	border:1.5vw solid white;
	border-top-left-radius:1.5vw;border-top-right-radius:1.5vw;
}
			@media(max-width: 980px){
					#AffImage{
						width:94%;height:55vw;margin-left:3%;
						border:2.5vw solid white;
						border-top-left-radius:2.5vw;border-top-right-radius:2.5vw;
					}	
			}
#AffPleinEcran{
	z-index:10;
	position:absolute;width:17vw;
	left:0;bottom:0;
	Background-color:rgba(255,255,255,0.5);
}
			@media(max-width: 980px){
					#AffPleinEcran{display:none;}								
			}
/* Bandeau défilant *******************************************/
.Bandeau{
	position:relative;
	width:80%;margin-left:10%;overflow:hidden;
	border-top:1px solid grey;border-bottom:1px solid grey;
	background-color:rgba(0,0,0,0.2);
}
			@media(max-width: 980px){
						.Bandeau{width:100%;margin-left:0;}
			}
#BandeauCacheG, #BandeauCacheD{
	position:absolute;z-index:2;
	height:100%;width:15vw;
}
#BandeauCacheG{left:0;background: linear-gradient(to right, rgba(15,59,62,1), rgba(15,59,62,0));}
#BandeauCacheD{right:0;background: linear-gradient(to left, rgba(15,59,62,1), rgba(15,59,62,0));}
@media(max-width: 980px){
						#BandeauCacheG, #BandeauCacheD{height:10vw;width:20vw;}
}

#BasCompteur{
	position:absolute; /* par rapport à #BasMaJ */
	display:block;
	right:45vw;top:-.2vw;width:20vw;height:13vw;
	padding-left:0.5vw;line-height:1.2vw;
	border-right: 1px solid white;border-left: 0.5vh solid white;border-top: 0.5vh solid white;border-bottom: 0.5vh solid white;
	background: linear-gradient(to right, rgba(6,41,49,1)20%, rgba(40,22,91,1)100%);
	border-top-left-radius:3vh;
}
#BasMaJ{
	position:relative;display:inline-block;float:right;
	width:45vw;;height:13vw;top:1vw;margin-right:1%;
	padding-left:5px;
	border-left:1px solid #300061;border-right: 0.5vh solid white;border-bottom: 0.5vh solid white;border-top: 0.5vh solid white;
	background-color:rgba(48,0,97,0.7);
	border-bottom-right-radius:3vh;
	line-height:2.7vw;
}
@media(max-width: 980px){
						#BasCompteur{
							float:right;right:-.9vw;
							width:47%;height:35vw;top:-35vw;
							padding-left:0;margin-right:0;
							line-height:5vw;
							border-bottom:1px solid white;border-right: 0.5vh solid white;
						}		
						#BasMaJ{
							float:right;margin-right:1.5%;
							width:98%;height:26vw;top:5vh;
							line-height:5.5vw;padding-left:5px;padding-top:5px;padding-bottom:5px;
							Background-color:#28165B;
							border-top:1px solid white;border-left:none;
						}	
}
#BasMentions{
	display:inline-block;float:left;
	width:40%;margin-left:30%;margin-top:2vw;margin-bottom:2vw;
	padding-bottom:.5vw;padding-top:.5vw;
	background-color:rgba(0,0,0,0.3);border-radius :10px;
	text-align:center;
}
#BasMeteo{
	position:relative;float:left;
	transform:scale(1.5, .9);
	left:10vw;top:-.5vw
}
.BasMeteo{
	position:relative;float:left;
	width:28.7vw;height:13vw;
	left:0.5vw;top:.7vw
}
.BasMeteo iframe{
	position:absolute;
	top:.7vw;left:2vw;
	transform:scale(1.2, 1.1);
	transform-origin:top left;
	}
@media(max-width: 1080px){
						#BasMeteo{
							transform:scale(2.2, 1.5);
							left:9vh;top:2vh;
						}
						.BasMeteo{
							width:50vw;margin-left:2%;
							height:43vw;top:3.5vw;
						}						
						.BasMeteo iframe{
							height:36vw;
							transform:scale(1, 1.1);
							}
}	
#BD-Container{
	display:inline-block;float:right;position:relative;
	width:50%;height:45vw;
	border:5px solid black;border-bottom-right-radius:4vw;border-left-color:rgba(204,153,255,0);
	background-color:rgba(204,153,255,0.7);
}
@media(max-width: 980px){
						#BD-Container{
							width:100%;top:-2.5vw;height:86vw;
							display:inline-block;float:left;
							padding-bottom:20px;
							border-bottom-right-radius:8vw;							
						}
}
#BD-TitreImage{
	display:inline-block;position:relative;
	width:100%;height:100%;
	border:5px solid black;border-bottom-right-radius:4vw;border-left-color:rgba(204,153,255,0);
	background-color:rgba(204,153,255,0.7);
	
}
@media(max-width: 980px){
						#BD-TitreImage{
							width:100%;height:86vw;
							padding-bottom:20px;top:0vw;
							border-bottom-right-radius:8vw;
						}
}
#BG-AffTXT{
	position:relative;display:inline-block;
	float:right;width:84%;height:43.3vw;
	padding-top:5px;
	overflow:auto;background-color:rgba(255,255,203,0.85);padding-left:5px;
	scrollbar-color:#5C68CF;/* couleur ascenseur pour Safari */
}
@media(max-width: 980px){
						#BG-AffTXT{height:90vw;}
}
/*Ascenseur de "A LA UNE" */
#BG-AffTXT::-webkit-scrollbar {
  width: 20px; /* largeur pour les barres verticales */
  height: 20px; /* hauteur pour les barres horizontales */
}
/*Ascenseur : partie mobile*/
#BG-AffTXT::-webkit-scrollbar-thumb {
  background-color:#5C68CF;border:1px solid black;
  border-radius:8px;
}
/*Ascenseur : fond fixe*/
#BG-AffTXT::-webkit-scrollbar-track {
  background-color: #D8CFF1; /* couleur de la piste */
}
#BG-Container{
	display:inline-block;float:left;position:relative;
	width:50%;height:45vw;
	}
@media(max-width: 980px){
						#BG-Container{width:100%;height:95vw;}
}	
#BG-TitreALaUne{
	display:inline-block;position:relative;
	width:100%;height:100%;
	border:5px solid black;border-top-left-radius:4vw;border-right-color:rgba(204,153,255,0);
	background-color:rgba(204,153,255,0.8);
}
@media(max-width: 980px){
						#BG-TitreALaUne{height:92.5vw;border-top-left-radius:8vw;}
}
#Boutons-Container{
	position:relative;float:left;
	width:85%;top:-1.4vw;
	border-radius:20px;
}
.boutonIndex a{
	display:inline-block;margin-top:10px;
	color:#134A47;
	font-weight:bold;text-align:center;
	font-size:1.2vw;
	border-radius:15px;border:3px solid orange;
	background-color:#99BBC6;
	padding:10px;
}
.boutonIndex a:hover{
	color:#171449;background-color:#96A0C9;
	cursor:pointer;
}							
#Btn-Activites, #Btn-Admin, #Btn-Presentation, #Btn-Membres{
	display:inline-block;float:left;
	height:4.5vw;
	margin-left:3.5%;
}
#Btn-Activites, #Btn-Admin, #Btn-Presentation{width:15%;}
#Btn-Membres{width:27%;}
#Btn-Activites a, #Btn-Admin a,  #Btn-Presentation a, #Btn-Membres a{
	position:relative;display:inline-block;
	width:100%;top:-5.5vw;height:auto;
	color:white;font-size:1.3vw;font-weight:bold;
	text-align:center;line-height:1.8vw;	
	-webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
@media(max-width: 980px){
						#Boutons-Container{
							position:relative;float:left;
							width:78%;top:0vw;
						}	
						#Btn-Activites, #Btn-Admin, #Btn-Presentation {
							width:30%;height:13.5vw;
							margin-left:1%;margin-bottom:1%;
							}
						#Btn-Membres{
							width:55%;height:15vw;margin-left:7%;
						}
						#Btn-Activites a, #Btn-Admin a,  #Btn-Presentation a, #Btn-Membres a{
						top:-11vw;height:11vw;
						font-size:2.7vw;
						line-height:4vw;
						}
}
#Btn-Activites a:active, #Btn-Admin a:active, #Btn-Presentation a:active,
#Btn-Activites a:hover, #Btn-Admin a:hover, #Btn-Presentation a:hover{
text-shadow:
	-1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#Btn-Membres a:hover, #Btn-Membres a:active {
	text-shadow:
	-1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

#Btn-Video{
	display:inline-block;width:45%;
	text-align:center;line-height:.8vw;color:#510000;
	border:1px solid black;border-radius:.6vw;
	Background-color:rgba(255,153,204,0.3);
}
.Btn-VideoVolBarre{transform:scale(.8);
  -webkit-appearance: none; /* Supprimer le style par défaut */
  height: 0.7vw;
  border-radius: 5px;
  background: #ccc ;
  outline: none;
  transition: background 0.3s ease;
}
.Btn-VideoVolBarre::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1vw;
  height: 1.5vw;
  background: black;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
  margin-top: -.1vw; /* Centrer le curseur sur la piste */
}
@media(max-width: 980px){
						#Btn-Video{	
							width:55%;
							text-align:center;line-height:1vh;
							border-radius:0.3vh;
						}
						.Btn-VideoVolBarre{transform:scale(1.4);}
						.Btn-VideoVolBarre::-webkit-slider-thumb {
						   width: 1.2vh;
						  height: 1.2vh;
						  margin-top: -.1vw; /* Centrer le curseur sur la piste */
						}						
}
#Btn-Video img:hover{
	transform:scale(1.2);
}
#Btn-Video img{
	cursor:pointer;
	 transition: transform 0.3s ease;
}

.CadreRouge, .CadreRougeC{
	position:relative;display:inline-block;
	width:95%;margin-left:2.5%;
	padding:0 1vw;
	border : 3px solid red;border-radius:10px;
	background-color:rgba(255,102,0,0.2);
}
.CadreRougeC{text-align:center;}	
@media(max-width: 980px){
						.CadreRouge{padding-bottom:1vw;}						
}
.CompteurDigital {/*Affichage Nb de votants Concours photo */
            font-family: 'Courier New', Courier, monospace; /* Police avec largeur fixe */
            font-size: 1.5em;
            color: #3498db;
            background-color: #000;
            padding: 4px 8px;
            border-radius: 5px;
            display: inline-block;
            color: #0f0; /* Vert comme un affichage numérique */
            text-shadow: 0 0 1px #0f0, 0 0 2px #0f0, 0 0 3px #0f0;
}
.FlecheMaJ{width:1.2vw;}
@media(max-width: 980px){
						.FlecheMaJ{width:2.5vw;}
}
#Date1, #Date2{
	position:relative;display:inline-block;
	font-size:1.2vw;
}
@media(max-width: 980px){
						#Date1, #Date2{font-size:2.5vw;;}						
}

/*Conteneurs haut de page */						
#HG, #HD{
	position:relative;display:inline-block;
	margin-left:.5%;
}
#HD{width:51%;}
#HG{
	width:20%;top:-1vw;
}
#ImgCLIC{
	position:absolute;display:block;z-index:10;
	width:25%;
	padding:0.2vw;height:2.5vw;right:0;bottom:1vw;
	border:3px solid #1116EE;border-radius:0.5vw;
	Background-color:rgba(132,132,132,0.7);
	/*background-image:url('Accueil/TXT-IMG_Jour/Clic01.gif');
	background-repeat:no-repeat;*/
}
#ImgCLIC-Small{display:none;}
@media(max-width: 980px){
						#ImgCLIC{display:none;}
						#ImgCLIC-Small{
							z-index:10;
							position:absolute;display:block;
							width:40%;left:30%;height:8vw;
							bottom:4vw;padding:1vw;
							border:2px solid black;border-radius:4vw;Background-color:rgba(132,132,132,0.7);
						}
}

#ImgJour{
	width:84%;
	position:relative;left:6%;top:.5vw;
}
#ImgUne{
	position:relative;
	left:.8vw;width:11%;height:90%;top:5%;
}
@media(max-width: 980px){
						#ImgUne{width:10vw;}
						#ImgJour{width:87%;left:4vw;}
}
li  {list-style:none;}
ul > li{padding-left:1vw;}	

#LegendePhotoAccueil-1, #LegendePhotoAccueil-2, #LegendeVideoAccueil {
	display:inline-block;position:absolute;bottom:0vw;
	width:99%;height:7.8vw;left:0;
	padding:3px;margin-bottom:.7vw;
	color:black;font-size:1.25vw;line-height:1.4vw;
	background: linear-gradient(to bottom, #FEFBFF 0%,#9581CA 100%);
	border-bottom-right-radius:3vw;
}
#LegendeVideoAccueil{
	/*top:20vw;*/
	}
#LegendePhotoAccueil-2{display:none;}
@media(max-width: 980px){
						#LegendePhotoAccueil-1, #LegendePhotoAccueil-2, #LegendeVideoAccueil{
							width:94%;margin-left:3%;
							padding:5px;height:15.2vw;
							font-size:2.7vw;line-height:2.55vw;/*line-height normal : 3.2vw (modifié pour Joyeux Noël)*/
							border-bottom-right-radius:4vw;
						}
}

.LienClicBtn{
	position:relative;top:0.2vw;
	width:36%;
}
.LienClicActivites{
	position:relative;top:0.4vw;
	width:25%;
}
.LienClicActualite{
	position:relative;top:0.7vw;
}
.MaJ-DevoileItems{
	position:absolute;right:0;
	height:5.5vw;width:59vw;top:3vw;
	overflow:hidden;white-space:nowrap;	
	animation: ReveleItem 10s ease-out infinite,Estompe 10s linear infinite;
	background: linear-gradient(to right, rgba(40,22,91,0)0%, rgba(40,22,91,1)25%);	
}
@media(max-width: 980px){
						.MaJ-DevoileItems{
							height:13vw;width:95vw;top:6vw;right:-.8vw;
							animation: ReveleItem980 10s ease-out infinite,Estompe 10s linear infinite;
							background: linear-gradient(to right, rgba(40,22,91,0)0%, rgba(40,22,91,1)30%);		
						}	
}
@keyframes ReveleItem{
	0%{left:3.7vw;width:40.6vw;background-color:rgba(40,22,91,1);}//violet sombre
	.5%{left:3.7vw;width:40.6vw;background-color:rgba(40,22,91,1);}
	5%{left:3.7vw;width:40.6vw;background-color:rgba(40,22,91,0);}
	50% {left:44vw;width:0vw;}
	98.5% {left:44vw;width:0vw;}
	100%{left:3.7vw;width:40.6vw;}
}
#MaJ1, #MaJ2{
	position:relative;display:inline-block;
}
.MaJ-Niv1, .MaJ-Cible, .MaJ-Final{
	display:inline;
	font-size:1.1vw;
}
.MaJ-Cible a{color:yellow;}
.MaJ-Niv1 a {color:#C5D8E4;}
.MaJ-Final a {color:#C5D8E4;}
.MaJ-Cible{
	padding-right:.2vw;padding-left:1.3vw;
	border:1px solid orange;border-radius:0.8vw;
	background-position:left;background-repeat:no-repeat;
	background-image:url('Accueil/ImagesAccueil/SourisClicGauche4.gif');background-size:1.2vw;
	}
.MaJ-Final{
	padding-right:.2vw;padding-left:1.3vw;
	border:1px dotted white;border-radius:0.3vw;
	font-size:1vw;
	background-position:left;background-repeat:no-repeat;
	background-image:url('Accueil/ImagesAccueil/SourisClicGauche4.gif');background-size:1.2vw;	
}
.MaJ-Niv1{font-size:1vw;}
@media(max-width: 980px){
						.MaJ-Niv1, .MaJ-Cible,  .MaJ-Final{
							background-image:none;
							font-size:2.4vw;
						}
						.MaJ-Cible, .MaJ-Final, .MaJ-Final{
							padding:1vw;
							border-radius:1.5vw;
							}

}						
@keyframes ReveleItem980{
							0%{left:8vw;width:86vw;background-color:rgba(40,22,91,1);}
							.5%{left:8vw;width:86vw;background-color:rgba(40,22,91,1);}
							5%{left:8vw;width:86vw;background-color:rgba(40,22,91,0);}
							50% {left:95vw;width:0vw;}
							97%{left:95vw;width:0vw;}
							100%{left:8vw;width:86vw;}
}
@keyframes Estompe{
	0%{opacity:1;}
	10%{opacity:1;}
	90%{opacity:1;}
	95%{opacity:0;}
	100%{opacity:1;}
}
.Lien-Niv1, .Lien-Cible, .Lien-Final{
	display:inline;
	padding-right:.2vw;padding-left:1.3vw;
	font-size:1.3vw;line-height:2vw;
	color:black;background-color:rgba(0,0,0,0.1);
	border-radius:0.8vw;
	background-position:left;background-repeat:no-repeat;
	background-image:url('Accueil/ImagesAccueil/SourisClicGauche4.gif');background-size:1.2vw;	
}
.Lien-Niv1{border:1px dotted black;}
.Lien-Cible{border:2px solid black;}
.Lien-Final{border:1px dotted white;}
.Lien-Niv1 a, .Lien-Cible a{color:#0000C6;}/* bleu foncé */
.Lien-Niv1 a:hover, .Lien-Cible a:hover, .Lien-Final a:hover{color:#820000;}/* rouge-brun */
@media(max-width: 980px){
						.Lien-Niv1, .Lien-Cible{
							background-image:none;
							font-size:2.4vw;
						}
						.Lien-Cible{
							padding:1vw;
							border-radius:1.5vw;
							}

}				
.Lien-Titre{
	display:inline-block;position:relative;
	Width:90%;margin-left:5%;height:0;
}
#Marcheurs{
	position:relative;display:inline-block;
	width:95%;margin-left:2%;margin-bottom:1vh;margin-top:2vw;
	background-color: rgba(240,255,255,0.8);
	border:2px solid red;border-radius:1vw;
}
#MarcheursEntete{
	position:relative;display:block;left:0vw;
	text-align:center;
	font-size:110%;font-weight:bold;color:black;
	}
#MarcheurImg{
	position:relative;float:left;width:18%;top:5vh;}
#Marcheur-Txt{float:right;width:80%;border:3px solid black;}				
@media(max-width: 980px){
						#Marcheurs{width:98%;margin-left:1%;}
						#MarcheursEntete{left:0vh;top:0vh;font-size:105%;letter-spacing:-2px;}
						#MarcheurImg{float:left;width:25%;top:2vh;}
						#Marcheur-Txt{float:right;width:74%;}							
}

#TexteDroiteImage{
	display:inline;float:right;width:65%;
		}
@media(max-width: 980px){
						#TexteDroiteImage{width:50%;}
}
.Txt-MaJ{font-size:1vw;}
.Txt-O1{
	color:orange;
	font-size:1.2vw;
	line-height:30px;
}
.Txt-O1B{color:orange;font-size:1.2vw;}
.Txt-B0, .Txt-B0 a:visited, .Txt-B00{
	color:#C5D8E4;
	font-size:1vw;line-height:1.5vw;
}
.Txt-B0 a:hover, .Txt-B00 a:hover{
	color:yellow;
}
.Txt-O2{
	color:#FDCF46;
	font-size:1.5vw;line-height:30px;
}
.Txt-N0{
	color:black;
	font-size:1.1vw;
}
.Txt-N01{
	color:black;
	font-size:1.2vw;
}
.Txt-N20{
	color:Black;
	font-size:20px;
}
@media(max-width: 980px){
						.Txt-MaJ{font-size:1.4vw;}
						.Txt-O1, .Txt-N01{font-size:3vw;}
						.Txt-O1B{font-size:1.5vw;}
						.Txt-B0, .Txt-B0 a:visited, .Txt-O0, .Txt-N0{
							font-size:2.7vw;line-height:1.2vw;
						}
						.Txt-B00, .Txt-B00 a:visited{
							font-size:3vw;
						}
}
.TJour10{color:#452601;font-size:1vw;}
.TJour12{color:#452601;font-size:1.2vw;}
.TRge12{color:red;font-size:1.2vw;}
.TRge13{color:red;font-size:1.3vw;}
.TRge14{color:red;font-size:1.4vw;}
.TJour13{color:#452601;font-size:1.3vw;}
.TJour14{color:#452601;font-size:1.4vw;}	
.TJour15{color:#452601;font-size:1.5vw;}
.TJour16{color:#452601;font-size:1.6vw;}
.TJour18{color:#452601;font-size:1.8vw;}
.TJour20{color:#452601;font-size:2vw;}
.TJourR12{color:red;font-size:1.2vw;}
.TJourR14{color:red;font-size:1.4vw;}
@media(max-width: 980px){
						.TJour10{font-size:3vw;}
						.TJour12, .TRge12{font-size:3.5vw;}
						.TJour13, .TRge13{font-size:3vw;}
						.TJour14, .TRge14{font-size:4vw;}	
						.TJour15{font-size:4vw;}
						.TJour16{font-size:4vw;}
						.TJour18{font-size:4vw;}
						.TJour20{font-size:5vw;}
						.TJourR12, .TJourR14{font-size:4vw;}
}
.TxtLeg1, .TxtLeg2, .TxtLeg3, .TxtLeg4
{text-align:center;color:black;Font-family:Arial;font-weight:bold;font-style:italic;}
.TxtLeg1{font-size:0.9em;}
.TxtLeg2{font-size:0.7em;}
.TxtLeg3{font-size:0.65em;}
.TxtLeg4{font-size:0.55em;}
.Txt-Mention{color:white;font-size:1.2vw;}
@media(max-width: 980px){
					.Txt-Mention{font-size:2.5vw;}
}



