html,body{padding:0;margin-bottom:1px;margin-left:20px;margin-right:20px;}
body{font-family:'Raleway';font-weight:400;font-style:normal;}
h1{font-family:'Spectral';font-style:italic;font-weight:300;color:#009999;text-align:center;}
h2{font-size:1.3em;font-family:'Raleway';color:#0a656e;}
h3{font-size:1.1em;font-family:'Raleway';color:#7a2a07;} 
h4{font-family:'Raleway';font-size:1.5em; color:#2d6bb8;}
#actif  {margin-right:10px;width:80px;height:80px;-webkit-border-radius: 6px 6px 6px 6px;-moz-border-radius: 6px 6px 6px 6px;border-radius: 6px 6px 6px 6px;font-family:'Spectral';font-weight:300;color:#009999;}
#actif img {filter: opacity(50%);-webkit-filter: opacity(40%);}
#actif img:hover {filter: opacity(100%);-webkit-filter: opacity(100%);}
#vignette{width:80px;height:80px;border-radius:6px;box-shadow:6px 6px 6px grey;}
#photo600{max-width:600px;height:auto;border-radius:6px;box-shadow:6px 6px 6px grey;}
.plain{text-decoration:none;width:auto;color:black}.plain visited{color:#099;}
/* Listes */
ul, ol {
	margin: .75em 0 .75em 24px;
	padding: 0; /* -> 9 */
}
ul {
	list-style: square;
}
li {
	margin: 0;
	padding: 0;
}
 
p {
	margin: .75em 0;
}
li p {
	margin: .5em 0;
}
 
a:link {text-decoration:none; color: #ffffff; font-size: 1.2em;  }
a:hover  { color: #0da899; }


a img {
	border: none; /* -> 10 */
}

 #sous-titre-page{
font-style: italic;
font-size: 1em;
font-family: 'Raleway' ;
color: #009999;
text-align: center;

}
#retour {
    position: fixed;
    right: 0;
    top: 92%;
    width: 8em;
    margin: -2.5em 0 0 0;
    z-index: 20;
    background: hsla(80, 90%, 40%, 0.5);
    color: white;
  
    
    text-align: left;
    border: solid hsla(80, 90%, 40%, 0.7) ;
    border-right: none;
    padding: 0.5em 0.5em 0.5em 2.5em;
    box-shadow: 0 1px 3px black;
    border-radius: 3em 0.5em 0.5em 3em;
  }
  #retour li { margin: 0 }
  #retour a { color: white }
  #retour  a{  
 font-size:18px }
  

  
  /* Make retour absolute, not fixed, on IE 5 & 6 */
  #retour { position: absolute }
  *>#retour { position: fixed }

  p.stb { text-indent: 0; margin-top: 0.83em }
  p.mtb { text-indent: 0; margin-top: 2.17em }
  p.ltb { text-indent: 0; margin-top: 3.08em }

/* --- POSITIONNEMENT --- */

/* Page */
 
  nav {
  font-size: 12px;
  background-color: rgb(19, 51, 61);
  box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
  margin: 3em 0 6em;
  padding: 0 1em;
  /* haut | droit | bas | gauche */
 
  height: 44px; /* Menu height */
  overflow: hidden; /* Don't show anything outside the nav */
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-height: 88px; /* Menu height x 2 */
  position: relative; /* Position the menu button relative to this item */
}

nav li { display: inline-block; }

nav li.selected a{
	background-color: #bec6d5;
	border-right: #fff 1px solid;
	border-bottom: #fff 1px solid;
}

nav a {
  display: inline-block;
  padding: 0 1em;
  color: rgb(236, 236, 236);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 44px; /* Menu height */
  height: 44px; /* Menu height */
}

nav a:hover { background-color: rgba(255, 255, 255, 0.08); }
nav a:hover { color: red; }

nav li:last-child { /* The menu button */
  position: absolute; /* Move the menu button out of flow */
  right: 0;
  bottom: 44px; /* Move upwards, the same distance as the menu height */
  background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, rgba(19, 51, 61, 1) 2em);
  padding-left: 3em;
}

nav li:nth-last-child(2) { /* The close button */ display: none; }
 
nav#menu:target {
  height: auto;
  padding: 0;
   
}

nav#menu:target ul { max-height: none;

 }

nav#menu:target li { display: block; }

nav#menu:target a {
  display: block;
 
 
  background-color: rgba(255, 255, 255, 0.05); /* padding: 0em 2em; couleur fond menu */
  
}

nav#menu:target a:hover { background-color: rgba(255, 255, 255, 0.08); }

nav#menu:target li:not(:first-child) { margin-top: 2px; }

nav#menu:target li:last-child { display: none; }

nav#menu:target li:nth-last-child(2) {
  display: inline-block;
  position: absolute;
 
  top: 0;
  right: 0;
  margin: 0;
  border-left: 2px solid rgb(19, 51, 61);
  
 
}
 
 /*---  BANDEAU    font-weight: bold;  hsla(80, 90%, 40%, 0.7)      hsla(80, 90%, 40%, 0.5) vert   background:hsla(120,100%,25%,0.3);----*/

  #Bandeau {
     
	position: absolute;
    right: 0;
    top: 1%;
    width: 100%;
	height:auto;
	margin: -2.5em 0 0 0;
    
	z-index: 20;
	padding: 0.5em 0.5em 0.5em 2.5em;

	
	
/*  forme                     */	

  box-shadow: 0 1px 3px black;
  	border-radius: 0px 0px 20px 20px; /*GM bord arrondi en bas */
	-moz-border-radius: 0px 0px 20px 20px;
	-webkit-border-radius: 0px 0px 20px 20px;
	
	border: solid hsla(80, 90%, 40%, 0.7) ; /*      vert  */

/*    couleur */
background: #a7cfdf; /* Old browsers */
background: -moz-linear-gradient(top,  #a7cfdf 0%, #23538a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #a7cfdf 0%,#23538a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
	
	
	 }
	 
	/*-------------------------------------background-color : hsla(194,53%,16%,0.35);  	color: white;    text-align: left;    border-right: none;  -----*/
 
  #retour li { margin: 0 }
  #retour a { color: white }
  
 /*    #retour  a{  font-size:18px }   GGLes liens ne seront plus soulignés text-decoration: none;* fonctionne pas*/
 

  

  
  /* Make retour absolute, not fixed, on IE 5 & 6 */
  #retour { position: absolute }
  *>#retour { position: fixed }

  p.stb { text-indent: 0; margin-top: 0.83em }
  p.mtb { text-indent: 0; margin-top: 2.17em }
  p.ltb { text-indent: 0; margin-top: 3.08em }

/* --- POSITIONNEMENT   right: 0; top: 1%;--- */
   
           
#boxmenu{ 
position: fixed;
   
  top: 0px;
  left: 5px;
  
	width:98%;
    height:85px;
	max-width: 100%;
 
    color: #444444;
   background-color: #ddd;
   background-image: linear-gradient(#E5E5E5, #CFCFCF);
 box-shadow: -1px 2px 15px 1px rgba(0, 0, 0, 0.7);
 
}
#boxtitre{ 
 position: fixed;
 top: 5px;
 text-align: center;
 height:25px;
 color: black;/*#bec6d5;*/
font-size: 1.1em;
font-family: Georgia, Bitstream Vera Serif, Norasi, serif; font-style: italic; 

}

 
 
 
 
 

#global {
	width: 90%;
	max-width: 90em;
	min-width: 850px;
	margin-left: auto;
	margin-right: auto;


}

 
#fil{
font-style: italic;
height: 25px;
font-size: 1.5em; 
font-family: 'Raleway';
color: #009999;
text-align: center; 
 
 
}
#Page-titre{
height: 30px;
font-family: 'Raleway';
color: #2d6bb8;
font-size: 1.5em;
border-bottom:2px solid #b1c6de;
text-align: center;
}
#inter-titre{
height: 45px;
font-family: 'Raleway';
color: #2d6bb8;
font-size: 1.8em;
border-bottom:1px solid #009999;
 
}
#sous-titre{
height: 30px;
/*font-family: Georgia, Bitstream Vera Serif, Norasi, serif;*/
font-family: 'Raleway' ;
padding: 10px 20px; /* Note -> 2 */
font-size: 1.8em; /* -> 4 */
margin-left: 30px;
 
} 


#Lien-URL{
height: 40px;
color: #009999;
font-size: 0.8em;
	font-style: italic;
	font-family: Georgia, Bitstream Vera Serif, Norasi, serif;
	
border-bottom:1px solid #D0CECB;
padding: 10px;
text-align: center; 	
}
Lien-URL.a {
	color: #D0CECB;
	text-decoration:none;
text-align: center; 
}
#titre-page{
font-style: italic;
font-size: 1em;
font-family: 'Raleway';
color: #009999;
text-align: center;
 
 
}
#basdepage {
clear:both;
width: 100%;
text-align: center; 
border-top :1px solid #D0CECB;
border-bottom:1px solid #D0CECB;
padding: 10px;
background-image: url("./images/Puce-phare.jpg");
background-repeat:no-repeat;
background-position:right top;
	 
} 
 
 
 #centrer{
	 
text-align: center; 
 margin-top:2px;
 margin-right:5px;
 
 
 }
 
#entete {
padding: 10px; 
background : white;
text-align: center; 
height: 30px;
font-family: 'Raleway';
font-size: .9em;  
line-height: 1.25; 
}

#entete h1 {
font-family: 'Raleway';	
margin: 0;
font-size: 2em;  
font-style: normal;
font-weight: normal;  
}
#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
	
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}


/* -------------------- */
/* CLASSES		
}		*/
/* -------------------- */

.boxSujet {margin:4%;padding:20px;background:#f0f5ff;border:1px solid #ced8eb;-webkit-border-radius: 0px 0px 15px 15px;-moz-border-radius: 0px 0px 15px 15px;border-radius: 0px 0px 15px 15px;
            display: flex;
            justify-content: space-between;
			min-width : 300px;  max-width : 600px;}
 
.linksuite { 	
 
 font-size: 1.1em;
	font-style: italic;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	 
border: 1px solid #696;
border-radius: 10px;
padding: 2px 2px;
text-decoration: none; 
color: white;
background : #2e6ab1;
 

 }  


.linksuite:hover { 
border: 1px solid #2b66a5;
background-color: #FCFAE1; 
color: black; }  



.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
 
	 
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	 
	width: 100%;
	height: 100%;
	
}
 .video-wrapper {
	 margin: 0 auto;
	width: 600px;
	max-width: 100%;
}

#vignette-diapo{
	 
	 width:130px;
    height:auto;
 border-radius: 6px;
     box-shadow: 6px 6px 6px grey;
}
#box{ 
	width:640px;
    height:310px;
	max-width: 100%;
 
    color: #444444;
   background-color: #ddd;
   background-image: linear-gradient(#E5E5E5, #CFCFCF);
 box-shadow: -1px 2px 15px 1px rgba(0, 0, 0, 0.7);
 
}
 #box-sommaire {

	width: auto;
	height: auto;
	margin:6%;
	padding: 30px;
	background: white;/* #dfe5eb;          /*#bec6d5; /*#eeeeee;*/
 	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	text-align: left;
	border-bottom: solid 8px #ededed;
	border-spacing: 0px; font-family: Verdana, sans-serif; font-size: 13px; 
	border-top: solid 1px #ededed;
	margin-left: 10%;
	margin-right: 10%;
    cursor: pointer; 

}
 #box-sommaire:hover{
  border-top: 1px solid;
  border-color: #d2d6dc;
  background-color: white;/*#ededed;*/
  -webkit-box-shadow: 0 1px 4px #8A99A6;
  -moz-box-shadow: 0 2px 2px #8A99A6;
  box-shadow: 0 2px 2px #8A99A6;
  
 
}
			
			
#le-titre{
height: 30px;
font-family: 'Raleway';
color: #2d6bb8;
font-size: 1.2em;
border-bottom:1px solid #009999;
text-decoration: none; 
cursor: pointer; 
}
 
 #le-titre:hover{
height: 40px;
color: #2d6bb8;
font-size: 1.2em;
border-bottom:1px solid #009999;
 text-decoration: none; 
}
 



#description{
 color:black;/* #2d6bb8;*/
text-decoration:none;
 font-size: 1em;
}