@charset "utf-8";
/* CSS Document */

body {
	background-color: #3c495a;
	margin: 0; /* pour éviter les marges */	
}

p {
	font-size:17px;
	color:#D4D1D1;
	font-style:normal;
	text-align:justify;
	margin :0px 40px 20px 40px;
}

/* --------------- Parametres Effet de survol ----------------------- */
	/*  Propriétés des fonts   */	
@font-face {
    font-family: 'cac_champagneregular';
    src: url('../../fonts/cac_champagne-webfont.eot');
    src: url('../../fonts/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
url('../../fonts/cac_champagne-webfont.woff') format('woff'),
url('../../fonts/cac_champagne-webfont.ttf') format('truetype'),
url('../../fonts/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
	

	/*  Propriétés des liens A   */
	  a {color:#fff; text-decoration:none;}
	  a:hover {color:#999; text-decoration:none;}
	
	/*  Propriétés de l'ID portfolio   */
      #portfolio {margin:0px; padding:0px; list-style-type:none;}
	  #portfolio li {float:left; position:relative;}
	   
	/*  Propriétés de la classe detail   
	    detail a une position absolue et il est contenu dans son parent li qui lui est relatif et contenu dans portfolio*/
	  .detail {position:absolute; /* on indique un positionnement absolu par rapport à li */
	           top: 15px; left:17%;/*       on décale la fenêtre des détails par rapport au zero absolu - en haut à gauche */
			   background-color:#353434; /* on lui applique un fond */
			    
			   width:300px; height:225px; /* on lui applique une taille */ 
			   padding:15px 20px 20px 20px; /* on lui applique des marges intérieures */
			   z-index:100; /* on le passe devant les autres éléments */ 
			   overflow:hidden; /* on le contrait à ne pas afficher ce qui dépasse */
			   display:none; /* pas d'affichage par défaut de la classe detail */
			   -webkit-border-radius:5px; /* on arrondit les angles pour Safari-Chrome */
			   -moz-border-radius:5px; /* on arrondit les angles pour Mozilla */
			   border-radius:5px; /* on arrondit les angles pour IE9 */
			   border: 1px solid #fff; 
			   -webkit-box-shadow:0 0 10px #000; /* on arrondit les angles pour Safari-Chrome */
			   -moz-box-shadow:0 0 10px #000; /* on arrondit les angles pour Mozilla */
			   box-shadow:0 0 10px #000; /* on arrondit les angles pour IE9 */}
			    
			   
	  .detail h2 {margin:0 0 15px 0; padding:5px; text-align: center;/* on lui applique des marges */ 
	  			  font-family:cac_champagneregular; /* on utilise une famille de police placée dans le dossier Fonts et déclarée plus haut - @font-face */ 
				  border-bottom:2px solid #3b3b3b; /* on place un trait en dessous de 1px solid */ 
				  text-shadow:1px 1px #000; /* on ajoute une ombre 1px vert 1px hor */}
				  
	  .detail p {font-size:15px; color:#CCC; /* Taille de la font du paragraphe et couleur */ 
	  			 margin :25px 20px 20px 20px; /* Redéfinit les marges pour détail p déjà définies plus haut pour la balise p */ 
	  			 cursor:default;  /* on remet le curseur par défaut sur le txt */}
				 
	/*  Propriétés de la classe detail2   
	    detail a une position absolue et il est contenu dans son parent li qui lui est relatif et contenu dans portfolio*/
	  .detail2 {position:absolute; /* on indique un positionnement absolu par rapport à li */
	           top: 15px;  left:-12%;/*       on décale par rapport au zero absolu - en haut à gauche */
			   background-color:#353434; /* on lui applique un fond */
			    
			   width:300px; height:225px; /* on lui applique une taille */ 
			   padding:15px 20px 20px 20px; /* on lui applique des marges intérieures */
			   z-index:100; /* on le passe devant les autres éléments */ 
			   overflow:hidden; /* on le contrait à ne pas afficher ce qui dépasse */
			   display:none; /* pas d'affichage par défaut de la classe detail */
			   -webkit-border-radius:5px; /* on arrondit les angles pour Safari-Chrome */
			   -moz-border-radius:5px; /* on arrondit les angles pour Mozilla */
			   border-radius:5px; /* on arrondit les angles pour IE9 */
			   border: 1px solid #fff; 
			   -webkit-box-shadow:0 0 10px #000; /* on arrondit les angles pour Safari-Chrome */
			   -moz-box-shadow:0 0 10px #000; /* on arrondit les angles pour Mozilla */
			   box-shadow:0 0 10px #000; /* on arrondit les angles pour IE9 */}
			    
			   
	  .detail2 h2 {margin:0 0 15px 0; padding:5px; text-align: center;/* on lui applique des marges */ 
	  			  font-family:cac_champagneregular; /* on utilise une famille de police placée dans le dossier Fonts et déclarée plus haut - @font-face */ 
				  border-bottom:2px solid #3b3b3b; /* on place un trait en dessous de 1px solid */ 
				  text-shadow:1px 1px #000; /* on ajoute une ombre 1px vert 1px hor */}
				  
	  .detail2 p {font-size:15px; color:#CCC; /* Taille de la font du paragraphe et couleur */ 
	  			 margin :25px 20px 20px 20px; /* Redéfinit les marges pour détail p déjà définies plus haut pour la balise p */ 
	  			 cursor:default;  /* on remet le curseur par défaut sur le txt */}
				 
	  
	/*  Propriétés de l'ID cat   */	  
	  #cat{position:absolute; /* on indique un positionnement absolu par rapport à classe détail */
	  	   bottom:20px; left:20px; /* on lui dit de se caler à 20px du bas et 20px de la gauche */
		   background:url(../../Imgs_N0/cat.png) top left no-repeat; /* icone cat calé haut-gauche ss repet */
		   color:#fff; /* choix de la couleur du txt */
		   padding-left:25px;} /* 25px gauche de décalage txt*/	
	  #cat:hover{color:#fff;
	             background:url(../../Imgs_N0/cat.png) top left no-repeat; /* icone cat_over calé haut-gauche ss repet */}

	/*  Propriétés de la classe thumb   */				 
	  .thumb {width:60px; float:left; margin-right:10px; /*  reduction img à 50px flottant gauche pas de répétition */}				 

	/*  Propriétés de la classe icone ..  
	    icone a une position absolue et il est contenu dans son parent détail qui lui est absolu aussi et contenu dans li relatif*/				 
	  .icone{position:absolute; /* on indique un positionnement absolu par rapport à classe détail */
	  	     bottom:20px; /* on lui dit de se caler à 20px du bas */
			 width:24px; height:24px; /* taille des imgs */  
			 text-indent:-7000px; /* on décale le txt pour ne pas l afficher */}			 
       .icone:active{bottom:18px; /* on décale de 2px vers le bas pour le clic */}		 

	/*  Propriétés de l'ID zoom   */			 
	   #zoom{right:55px; /* on lui dit de se caler à 0px de la droite */
	         background:url(../../Imgs_N0/zoom2.png) top left no-repeat; /* icone zoom calé haut-gauche ss repet */}
	   #zoom:hover{background:url(../../Imgs_N0/zoom.png) top left no-repeat; /* icone zoom calé haut-gauche ss repet */}			 

	/*  Propriétés de l'ID plus   */	   
	   #plus{right:20px; /* on lui dit de se caler à 0px de la droite */
	         background:url(../../Imgs_N0/plus2.png) top left no-repeat; /* icone plus calé haut-gauche ss repet */}
	   #plus:hover{background:url(../../Imgs_N0/plus.png) top left no-repeat; /* icone plus calé haut-gauche ss repet */}
	   
/*  Gestion des infobulles avec tooltipsy   */
	/*  Propriétés de la classe tooltipsy   */	
	   .tooltipsy{background-color:rgba(0,0,0,0.8);  /* couleur fond noire à 80% */
	              color:#fff; /* txt en blanc */
				  padding:10px 10px; /* marges intérieures: 3px haut-bas - 10px gauche-droite */
				  text-transform:uppercase; /* transforme le txt en majuscules */
				  font-size:11px; /* reduction de la police à 10px */
				  -webkit-border-radius:5px; /* on arrondit les angles pour Safari-Chrome */
			      -moz-border-radius:5px; /* on arrondit les angles pour Mozilla */
			      border-radius:5px; /* on arrondit les angles pour IE9 */ }
	    .tooltipsy:after{content:url(../../Imgs_N0/fleche.png); /* ajout fleche à l'infobulle tooltipsy */
		                 position:absolute; top:-8px; left:0px; 
						 width:100%; text-align:center;
		}   
	   			 	 			 	   		  
				  
/* --------------- Fin Parametres Effet de survol ------------------- */


/* ---------------------------------------------------- */ 
/* 1_Page Galerie 3 */
/* ---------------------------------------------------- */
div#Galerie-03_Accueil_superbloc {
	width:1000px;
	height:850px;
	margin-left:auto;
	margin-right:auto;
/* margin-top: 10px; */
}

div#Galerie-03_Accueil_titre {
	width: 1000px;
	height: 115px;
	background-image: url(../../Imgs_N0/Accueil_01.jpg);
}

div#Galerie-03_Accueil_corps {
	width: 1000px;
	height: 508px;
}

div#Galerie-03_Accueil_Tailles {
	width: 1000px;
	height: 42px;
}

div#Galerie-03_Accueil_Dossiers {
	width: 1000px;
	height: 185px;
}

/* ---------------------------------------------------- */
/* 1_Page Galerie 3 */
/* ---------------------------------------------------- */


/* ---------------------------------------------------- */ 
/* 2_Page Aperçu */
/* ---------------------------------------------------- */
div#Galerie-01_Apercu_superbloc {
	width:1000px;
	height:850px;
	margin-left:auto;
	margin-right:auto;
/* margin-top: 10px; */
}

div#Galerie-01_Apercu_titre {
	width: 1000px;
	height: 115px;
	background-image: url(../../style/Imgs_N0/Apercu_01.jpg);
}

div#Galerie-01_Apercu_img1 {
	width: 1000px;
	height: 334px;
}

div#Galerie-01_Apercu_img2 {
	width: 1000px;
	height: 348px;
}

div#Galerie-01_Apercu_Retour {
	width: 1000px;
	height: 53px;
}

/* ---------------------------------------------------- */
/* 2_Page Aperçu */
/* ---------------------------------------------------- */


/* ---------------------------------------------------- */ 
/* 3_Page Participants */
/* ---------------------------------------------------- */
div#Galerie-01_Participants_superbloc {
	width:1100px;
	height:850px;
	margin-left:auto;
	margin-right:auto;
/* margin-top: 10px; */
}

div#Galerie-01_Participants_titre {
	width: 1100px;
	height: 138px;
}

div#Galerie-01_Participants_p01 {
	width: 1100px;
	height: 30px;
}

div#Galerie-01_Participants_p02 {
	width: 1100px;
	height: 30px;
}

div#Galerie-01_Participants_p03 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p04 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p05 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p06 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p07 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p08 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p09 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p10 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p11 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p12 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p13 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p14 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p15 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p16 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p17 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p18 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p19 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p20 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p21 {
	width: 1100px;
	height: 30px;
}
div#Galerie-01_Participants_p22 {
	width: 1100px;
	height: 30px;
}

div#Galerie-01_Participants_Retour {
	width: 1100px;
	height: 52px;
}

/* ---------------------------------------------------- */
/* 3_Page Participants */
/* ---------------------------------------------------- */