body { text-align:left; } 

#global {margin: 0 auto;background-color:#FFFFFF;border-collapse:collapse;border-spacing:0;width:1080px;}
#corpstexte{font: 1em "times new roman",Arial,serif ;}

p.partiehaute{font:  0.5em verdana,arial,helvetica,sans-serif;
color:#111111;height:2px; }

#bandeausuperieur {width:1080px;height:135px;vertical-align:top;padding:0px;}

progress[value] {
  width: 600px; 
  height: 22px;
 accent-color: rgba(110,140,110,0.3); 
}




#fonddepage{background-color:#EEE;}
#fonddepagedecours{background-color:#FFF;} 


#pageA4{background:#FFFFFF;border-spacing:0;width:1080px;padding:1px;border:1px;margin:0 auto; }


#bandeau {width:1080px;height:135px;vertical-align:top;padding:0px;}

#nav {
list-style: none ;
margin: 0 ;
padding: 0 ;
overflow: hidden ;		/* Création du contexte de formatage */
position:relative;
}
#nav li {
float: left ;
width: 132px ;
border: 1px solid #600 ;
margin-right: 0px ;

color: #fff ;
background: #c00 ;
}
#nav li a {
display: block ;
background: #900 url(lienNormal.png) left top no-repeat ;
color: #fff ;
font: 0.9em "Trebuchet MS",Arial,sans-serif ;
line-height: 1em ;
padding: 4px 0 ;
text-align: center ;
text-decoration: none ;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background: #033 url(lienHover.png) left top no-repeat ;
text-decoration: underline ;text-align:center;
}


#espacesuperieur{background-color:#FFFFFF;border-spacing:0;width:1000px;padding:0px;border:0px;height:10px; }
#main{margin-left:10px;background-color:#FFFFB0;border-spacing:0;width:1060px;padding:0px;border:0px; }
#colonegauche{border-spacing:0;width:180px;padding:0px;border:0px;background-color:#900;margin-left:0px;text-align:center;float:left;min-height:2500px; }
#zoneopinion{border-spacing:0;width:200px;padding:0px;border:0px;background-color:#900;margin-left:0px;text-align:center;float:left;height:2700px; }
#souscolonegauche{background-color:#FFFFFF;height:20px;clear:both;}
#flashgauche{background-color:#F2DCA9;height:20px;}
#sousflash{background-color:#FFFFFF;height:20px;}


#contenu{width:800px;padding:5px 30px 30px 30px;border:0px;background-color:#FFFFFF;margin-left:200px;text-align:left; }
#contenufull{width:1080px;padding:0px 0px 0px 0px;border:0px;background-color:#FFFFFF;margin-left:0px;text-align:left; }
#colonedroite{border-spacing:0;width:100px;padding:0px;border:0px;background-color:#FFFFB0;margin-left:0px;text-align:center;float:right; }
#zonepub{background-color:#FFFFB0;}
#souszonepub{background-color:#FFFFB0;height:20px;}
#compteur{background-color:#FFFFB0;height:100px;}
#souscompteur{background-color:#FFFFB0;height:20px;}
#copyright{clear:both;text-align:center;}

#supportDiapo{background-color:#FFFFFF;position:relative;top:-20px;}

.globaltitrepluspicto{background-color:#FFFFFF;width:605px;position:relative;}
.titre{margin-left:0px;width:325px;}
.picto{margin-left:15px;text-align:center;position:absolute;left:300px;width:280px;}

.globalimage1plusoptions{background-color:#FFFFFF;width:605px;position:relative;}
.image1{width:325px;height:280px;}
.options{margin-left:15px;text-align:center;position:absolute;left:300px;width:280px;height:240px;}

#chapeau1{background-color:#FFFFFF;width:605px;}


#souschalet{text-align: left;background-color:#FFFFFF;width:600px;}
.centrage{text-align: center;background-color:#777777;}

#liseretgauche{width: 10px;}
#petitemargegauchedelexterieurgauche{width: 4px;background:#900;}
#exterieurgauche{width: 192px;vertical-align:top;background:#900;}
#petitemargedroitedelexterieurgauche{width: 4px;background:#900;}

#centreremplacelesdeuxinterieurs{width: 110px;vertical-align:top; text-align:left;}
#plagedecrituregenerale{width: 110px;vertical-align:top; text-align:left;}

#petitemargegauchedelinterieurgauche{width: 10px;}
#interieurdroit{width: 182px;}
#petitemargedroitedelinterieurdroite{width: 8px;}

#picture1{width: 1080px; height:180px;}


#interieurgauche{width: 400px;text-align:left;vertical-align:top;}
#petitemargegauchedelexterieurdroite{width: 4px;}
#margegrisegauche{background:#F5F5F5;}
#exterieurdroit{width: 252px;height:180px;vertical-align:top;}
#petitemargedroitedelexterieurdroite{width: 4px;}
#margegrisedroite{background:#FFFF00;}
#liseretdroit{width: 10px;}

#bandeauexterieurdroite{background:#F5F5F5;vertical-align:top;}

#petitespaceblancsousmenu{height: 15px;}

p.margin{margin-left:5px;margin-right:5px;} 

#coingaucheenbasadroite{background:#FFFFB0;}
#coinenbasadroite{background:#FFFFB0;height:70px;}
#coindroiteenbasadroite{background:#FFFFB0;}

.espacementaudessusdujaune{font:  1.7em verdana,arial,helvetica,sans-serif;
color:#FFFFFF; }


.apropos{
font:  0.7em verdana,arial,helvetica,sans-serif;
color:#FFFFFF; 
}

.titrerouge{font:  1.8em verdana,arial,helvetica,sans-serif;
color:#FF0000;}

.texterouge{font:  1.0em verdana,arial,helvetica,sans-serif;
color:#FF0000;}

.soustitrevert{font:  1.2em verdana,arial,helvetica,sans-serif;
color:#008000;}

.textenoir{font:  1.2em verdana,arial,helvetica,sans-serif;
color:#000000;}


.warningmargedroite{
font:   0.7em verdana,arial,helvetica,sans-serif;
color:#FFFFFF;
}

.textevideoduhaut{font:   0.9em verdana,arial,helvetica,sans-serif;
color:#FFFFFF; 
}

.corpsdutexte{
font: 0.9em "times new roman",Arial,serif ;text-align:left;
}



#page {background: #FFFFFF ; position:absolute;left:0px;top:0px;width:1080px;height:120%;}

#a36 {left:600px;top:15px;width:186px;height:82px;}
#a36i {width:149px;height:69px;}

#logovideo {left:0px;top:0px;width:95px;height:130px;}
#logovideoi {width:95px;height:130px;}


#logodivers {left:0px;top:-30px;width:95px;height:130px;}
#logodiversi {width:95px;height:130px;}

#logocours {left:0px;top:-30px;width:95px;height:130px;}
#logocoursi {width:95px;height:130px;}

#logoanglais {left:0px;top:-30px;width:95px;height:130px;}
#logoanglaisi {width:95px;height:130px;}

#logosadi {left:0px;top:-0px;width:95px;height:130px;}
#logosadii {width:95px;height:130px;}

#logoops {left:0px;top:-30px;width:95px;height:130px;}
#logoopsi {width:95px;height:130px;}

input[type=text]  {
	width: 200px;
	height: 18px;
	border:2px solid #D83F3D;
	border-radius:7px;
	box-shadow:3px 3px 3px #F5C5C5;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}

input[type=password]  {
	width: 200px;
	height: 18px;
	border:2px solid #D83F3D;
	border-radius:7px;
	box-shadow:3px 3px 3px #F5C5C5;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}

input#antispam{
	width: 80px;
	height: 18px;
	border:2px solid #D83F3D;
	border-radius:7px;
	box-shadow:3px 3px 3px #F5C5C5;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}

input#motdepasse{
	width: 80px;
	height: 18px;
	border:2px solid #D83F3D;
	border-radius:7px;
	box-shadow:3px 3px 3px #F5C5C5;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}

input#numerodereference{
	width: 80px;
	height: 18px;
	border:2px solid #D83F3D;
	border-radius:7px;
	box-shadow:3px 3px 3px #F5C5C5;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}


input#parnumero{
	width: 80px;
	height: 18px;
	border:2px solid #D83F3D;
	border-radius:7px;
	box-shadow:3px 3px 3px #F5C5C5;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}

input#adressepassperdu{
	width: 280px;
	height: 18px;
	border:2px solid #D83F3D;
	border-radius:7px;
	box-shadow:3px 3px 3px #F5C5C5;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}

textarea#zonetextecontact {
	width: 400px;
	height: 160px;
	border:2px solid #D83F3D;
	border-radius:15px;
	box-shadow:3px 3px 3px #F5C5C5;
	maxlength:10;
	padding: 5px;
	font-family: Tahoma, sans-serif;
	background-image: url(bg.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

input#versioncours{width:50px;maxlength:10;}
input.sstitrescours{width:350px;maxlength:250;}
	

input#objetmailgroupe{
	width: 400px;
	height: 18px;
	border:2px solid #D83F3D;
	border-radius:7px;
	box-shadow:3px 3px 3px #F5C5C5;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}




a img
{
border: none;
} 



.vignette1{
 opacity: 1;
 position:relative;
}

.vignette1:hover {
opacity: 1;
border:none;

 
}

.vignette1 span{
position:absolute;
left:-100px;
top:-300px;
visibility:hidden;}



.vignette1:hover span{
background-color:#000;
opacity: 1;
border:10px solid #000;
visibility:visible;
z-index:50;
}



.imageintotext{
position:relative;
left:100px;
top:0px;
}

.dater{
position:relative;
left:250px;
top:0px;
}

.carteevenement{
position:relative;
left:880px;
top:-185px;
}

a:hover.categories{ 
color:#FFFFFF; 
}

a.categories{ 
color:#EEE000; 
}

a.categories:visited{ 
color:#DDDD00; 
}







#conteneurFile #divFile
{
position : relative;
width : 50px;
text-align : right;
}
#conteneurFile .inputFile
{
opacity : 0; /* for !IE */
filter : alpha(opacity=0);  /*for IE */
position : absolute;
right : 0;
top : 0;
width : 50px;
}
#conteneurFile .inputText
{
width : 30px;

}

.mini {
position:relative;
max-width:160px;
 max-height:100px;
  opacity: 1;
    border:1px solid #b99;

}

.mini:hover {
position:relative;
max-width:160px;
 max-height:100px;
  opacity: 1;
    border:4px solid #b99;

}


.miniseul {
position:relative;
left:50px;
max-width:200px;
 max-height:150px;
  opacity: 1;
    border:1px solid #b99;

}



.miniseul:hover {
position:relative;
left:50px;
max-width:200px;
 max-height:150px;
  opacity: 1;
    border:4px solid #b99;

}




.container {
   width: 100%;
}

.unzoom{
position:relative;
left:10px;


max-width:800px;
 max-height:400px;
 min-width:800px;
 min-height:400px;

-moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;

  opacity: 1;
    border:1px solid #000;
background-size: cover;

}


.zoom{
position:relative;
left:50px;
max-width:1000px;
 max-height:750px;
 min-width:1000px;
 min-height:750px;

-moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;

  opacity: 1;
    border:1px solid #000;

}

.titreseul {
position:relative;
left:230px;
top:15px;
color:#000000;

}


.moyen {
position:relative;
max-width:440px;
 max-height:220px;
  opacity: 1;
  border:0px solid #000;

}

.maxi {
position:relative;
max-width:520px;
 max-height:260px;
  opacity: 1;
    border:1px transparent #000;

}

.maxivoir {
position:relative;
max-width:840px;
 max-height:420px;
  opacity: 1;
    border:1px solid #000;

}

.minivoir {
position:relative;
max-width:100px;
 max-height:50px;
  opacity: 1;
    border:0px solid #000;

}

.vuevoiractive {
position:relative;
left:-70px;
  opacity: 1;

}

.vuevoiractive span{
position:absolute;
left:-410px;
top:-500px;
visibility:hidden;}

.vueseule{
position:relative;
left:170px;
  opacity: 1;
transition: transform .1s;

}

.vues {
position:relative;
left:0px;
  opacity: 1;
transition: transform .1s;
}


.vues:hover,.vueseule:hover,.vuevoiractive:hover {
opacity: 1;
border:none;

 
}

.vues span,.vueseule span{
position:absolute;
left:100px;
top:-230px;
visibility:hidden;}


/* affiche la diapo de previsualisation par survol */

.vuevoiractive:hover span ,.vues:hover span ,.vueseule:hover span{

-ms-transform: scale(2.5) translate(0,-20%); /* IE 9 */
-webkit-transform: scale(2.5) translate(0,-20%); /* Safari 3-8 */
transform: scale(2.5) translate(0,-00%); 


-ms-border-radius: 13px; /* IE 9 */
-webkit-border-radius: 13px; /* Safari 3-8 */
border-radius:13px; 



transition: transform .1s;
background-color:#FFFFFF;
opacity: 1;
border:3px solid #000;
visibility:visible;
z-index:50;
}






.fileUpload {
	position: relative;
	overflow: hidden;
	margin: 2px ;
}
.fileUpload input.upload {
	position: absolute;
	     width: 28px;
     height: 23px;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0px;
	font-size: 10px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}


.btnnav:active{

background: #033;
text-decoration: underline ;text-align:center;
color:#FFFFFF; 
cursor:pointer;
width: 132px;
}

.btnnav:hover{
     color: #ffffff;
	 text-decoration: underline ;text-align:center;
     background: #033;
	 width: 132px;
	 	cursor: pointer;
}




/* 1. On configure la barre principale en Flexbox */
ul#nav {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 2. RÈGLE LA PLUS IMPORTANTE : On annule les styles des <li> */
/* Ceci neutralise les règles de votre stylesheet.css externe */
ul#nav li {
    width: auto !important; /* Annule toute largeur fixe (ex: 132px) sur le <li> */
    float: none !important;  /* Annule un 'float:left' qui pourrait interférer */
    margin: 0;
    padding: 0;
}

/* 3. Votre style pour les boutons reste INCHANGÉ */
.btnnav {
    position: relative;
    overflow: hidden;
    top: 0px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1.0em;
    width: 132px;      /* C'est le bouton qui a la largeur, pas le <li> */
    height: 23px;
    line-height: 23px;
    padding: 0px; 
    margin: 0px;
    text-align: center;
    color: #FFFFFF; 
    cursor: pointer;
    background: #900;
    border: 0px;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

/* 4. On style le remplisseur pour qu'il s'étire et ait la bonne apparence */
li.nav-filler {
    flex-grow: 1;         /* Demande à cet élément de prendre tout l'espace restant */
    background: #200;     /* MÊME fond que les boutons */
    height: 23px;         /* MÊME hauteur que les boutons */
}
.btnRep{
vertical-align:top;
background:transparent;
text-align:center;
color:#FFFFFF; 
border:0px;
width: 90px ;
height:44px;
cursor:pointer;
}
.btnRep:hover,.btnRep:focus,.btnRep:active{

vertical-align:top;
background:transparent;
text-align:center;
color:#000000; 
border:0px;
height:44px;
width: 90px ;
cursor:pointer;

}

.btnQ{
vertical-align:top;
background:transparent;
text-align:left;
color:#FFFFFF; 
border:0px;
width: 141px ;
height:34px;
cursor:pointer;
}
.btnQ:hover,.btnQ:focus,.btnQ:active{

vertical-align:top;
background:transparent;
text-align:center;
color:#000000; 
border:0px;
height:34px;
width: 141px ;
cursor:pointer;

}


.btnobtenirsecteur{ 
position:relative;
overflow: hidden;
top:0px;
font-family: Arial,sans-serif;
     font-size: 0.9em;
     width: 180px;
     height: 28px;
	 line-height:28px;
     padding: 0px; /*permet le centrage vertical*/
     text-align: center;
     color: #000;
	  background: #eaa7aa;
	  border-width:1px;
	  border-color:black;
	 border-radius: 0px;	 
	 -webkit-appearance: none;
	 -moz-appearance: none;
   appearance: none; 
  -webkit-border-radius: 0;
 }

.btnobtenirjaune{
position:relative;
overflow: hidden;
top:0px;
font-family: Arial,sans-serif;
     font-size: 0.9em;
     width: 180px;
     height: 28px;
	 line-height:28px;
     padding: 0px; /*permet le centrage vertical*/
     text-align: center;
     color: #000;
	  background: #ffff99; 
	  border-width:1px;
	  border-color:black;
	 border-radius: 0px;	 
	 -webkit-appearance: none;
	 -moz-appearance: none;
   appearance: none; 
  -webkit-border-radius: 0;
 }




.btnobtenir{
position:relative;
overflow: hidden;
top:0px;
font-family: Arial,sans-serif;
     font-size: 0.9em;
     width: 180px;
     height: 28px;
	 line-height:28px;
     padding: 0px; /*permet le centrage vertical*/
     text-align: center;
     color: #000;
	  background: #eaa764;
	  border-width:1px;
	  border-color:black;
	 border-radius: 0px;	 
	 -webkit-appearance: none;
	 -moz-appearance: none;
   appearance: none; 
  -webkit-border-radius: 0;
 }
 
 .btnqui{
position:relative;
overflow: hidden;
top:0px;
font-family: Arial,sans-serif;
     font-size: 0.9em;
     width: 220px;
     height: 28px;
	 line-height:28px;
     padding: 0px; /*permet le centrage vertical*/
     text-align: center;
     color: #000;
	  background: #eaa764;
	  border-width:1px;
	  border-color:black;
	 border-radius: 0px;	 
	 -webkit-appearance: none;
	 -moz-appearance: none;
   appearance: none; 
  -webkit-border-radius: 0;
 }

.btn{
position:relative;
top:0px;
font-family: Arial,sans-serif;
     font-size: 0.8em;
     width: 28px;
     height: 23px;
	 line-height:23px;
     padding: 2px; /*permet le centrage vertical*/
     text-align: center;
     color: #000;
	  background: #cca764;
	 border-radius: 8px;

}

.btnrouge{
position:relative;
top:0px;
font-family: Arial,sans-serif;
     font-size: 0.8em;
     width: 28px;
     height: 23px;
	 line-height:23px;
     padding: 2px; /*permet le centrage vertical*/
     text-align: center;
     color: #000;
	  background: #ff1111;
	 border-radius: 8px;

}


.btnrouge:hover{
     color: #ffffff;
     background: #EE0000;
	 	cursor: pointer;
}

.btnrouge:active{
     color: #000;
     background: #cc0000;

}

.btnqui:hover{
     color: #ffffff;
     background: #cc7364;
	 	cursor: pointer;
}

.btnobtenir:hover{
     color: #ffffff;
     background: #ee7364;
	 	cursor: pointer;
}

.btnobtenirjaune:hover{
     color: #ffffff;
     background: #ee7364;
	 	cursor: pointer;
}


.btnobtenir:active{
     color: #000;
     background: #eaa764;

}



.slidefullscreen{position:relative;
      height:2200px;  max-width:1280px; max-height:2700px;left:0px;width:1280px;top:0px;

	  z-index:50;
	  }
	  
.slide{position:relative;
     top:-20px;
	  max-width:810px;
	  width:810px;
	  z-index:50;
	  }

.pos1{position:relative;
      top:30px;
	  }
	  
.pos2{position:relative;
      top:10px;
	  }	  

.pos3{position:relative;
      top:-10px;
	  }	

.pos4{position:relative;
      top:-30px;
	  }		  

.hud{position:relative;
top:-140px;

}