@charset "utf-8";
/* CSS Document */
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {

    max-width: 100%;

}





a
{
	 text-decoration:underline;
	 
	}
a:hover
{
	 text-decoration:none;
}	
a.blanc
{
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 13px;
     color: #ffffff;	
	 text-decoration:none;
	}
	
a.blanc:hover	
{
	 text-decoration:underline;
	}
a.blanc1
{
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 13px;
     color: #a9a719;	
	 text-decoration:none;
	}
	
a.blanc1:hover	
{
	color: #a9a7fe;	
	}

a.panier
{
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 13px;
     color:#464646;
	 text-decoration:none;
	}
	
a.panier:hover	
{
	color:#ffffff;
	}

body  {
     font-size: 13px;
    
	margin:0px;
        background-color: #fafafa;
      }

.bouton_ajouter
{

	background-image:url(../images/bcg_ajouter.jpg);
	width:auto;
	height:40px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	border:#060 1px;
	margin:20px;
	margin-left:0;
	padding: 6px;	

}	
.bouton_revenir
{

	background-image:url(../images/bcg_revenir.jpg);
	width:210px;
	height:40px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	border:#060 1px;
	margin:20px;
	margin-left:0;
	}		

#box{
	width:auto;
	}	 
	
	
.cart_blanc
{
	 font-size:14px;	
	 color:#FFFFFF;
	 font-weight:bold;
	 background-color:#ceb407;

	
	}	 
.cellule
{
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 13px;
     color:#464646;
	 text-decoration:none;
	}	
#conteneur {

	 height:auto;
	 width:auto;
	 
     border:0px;
	 overflow:hidden;
	 font-family:Verdana, Geneva, sans-serif;
	 
	  font-size:12px;	
	 color:#464646;
	 
	

}

div.cote {
	
	 
	  position:relative;
	  display:inline;
	  
}

#footer
{
	height:200px;
	background-color:#e5e5e5;
	text-align:center;
	padding-top:20px;
	
	}


h1

{
	font-family:Verdana, Geneva, sans-serif;
	
	font-size:17px;	
	font-weight:bold;
	color:#ceb407;
	border:0;
	margin:0;
	padding:0;
	
	}
h2

{
	font-family:Verdana, Geneva, sans-serif;
	
	font-size:17px;	
	font-weight:bold;
	color:#ceb407;
	border:0;
	margin:0;
	padding:0;
	
	}
h3

{
	font-family:Verdana, Geneva, sans-serif;
	
	font-size:15px;	
	font-weight:bold;
	color:#ceb407;
	
	border:0;
	margin:0;
	padding:0;
	
	}
	
.image
{
float: left; margin: 0px 30px 20px 0px;
}
	
		
.image_cote
{
	vertical-align:text-top;
	
	
	}
	
.image_agenda
{

width: 100%;
	}	
	
	
.image_marquee
{
	height:100px;
	
	margin-right:20px;
	
	}		
.lien_bleu_gras
{
	font-weight:bold;
	text-decoration:underline;
	 color:#464646;
	}
	
.lien_bleu_gras:hover
{
	text-decoration:none;
	 color:#464646;
	}
.lien_bold
{   
font-family:Verdana, Geneva, sans-serif;
	
	font-size:12px;	
	font-weight:bold;
	 color:#464646;
	
	text-decoration:none;
	}
	
.lien_bold:hover
{
	text-decoration:underline;
	}
	
		
.lien_h1
{

	font-family:Verdana, Geneva, sans-serif;
	
	font-size:15px;	
	font-weight:bold;
	color:#ceb407;
	text-decoration:none;
}

.lien_h1:hover
{
	text-decoration:underline;
}


.lien_h2
{

	font-family:Verdana, Geneva, sans-serif;
	
	font-size:12px;	
	font-weight:bold;
	color:#ffffff;
	text-decoration:none;
}

.lien_h2:hover
{
	text-decoration:underline;
}


.lien_panier
{
	font-family:Verdana, Geneva, sans-serif;
	
	font-size:13px;	
	color:#ff0000;
	font-weight:bold;
	
     text-decoration:none;
	 display:block;
	
}

.lien_panier_ajouter
{
	font-family:Verdana, Geneva, sans-serif;
	
	font-size:13px;	
	color:#ffffff;
	font-weight:bold;
	
     text-decoration:none;
	 display:block;
	 background-color:#090;
	 border-radius: 4px 4px 4px 4px;
	 background:url(../images/bcg_ajout.jpg) #ceb407;
	 padding-top:4px;
	 width:auto;
	 height:18px;
	 position:; bottom:8px; left:36px;
	text-align:center;
}
.lien_panier_ajouter:hover
{ absolute
  background:url(../images/bcg_ajout_1.jpg) #ceb407;
}

.lien_panier_gros
{
	font-family:Verdana, Geneva, sans-serif;
	
	font-size:16px;	
	color:#ff0000;
	font-weight:bold;
	
     text-decoration:none;
	 display:block;
	
	 margin:20px;
	  margin-left:0;
	
}



.lien_plein
{
	font-family:Verdana, Geneva, sans-serif;
	
	font-size:12px;	
	color:#ffffff;
	font-weight:normal;
	
     text-decoration:none;
}

.lien_plein:hover
{
	text-decoration:underline;
}
.lien_plein2
{
  	font-family:Verdana, Geneva, sans-serif;
	
	font-size:12px;	
	font-weight:normal;
	color:#ffffff;
	text-decoration:none;
	margin-left:10px;
}	

.lien_plein2:hover
{
	text-decoration:underline;
}	





.lien_commentaire

{
    
   display:block;
	
	background-color:darkslateblue;
    padding:10px;
    text-align:center;
    color:#ffffff;
    font-weight:bolder;
    text-decoration: none;
    min-width: 120px;
    margin-top:20px;
     margin-right:6px;
    
    
}

.lien_commentaire:hover

{
    
    background-color:cornflowerblue;
	

    
}


.lien_reponse

{
    
   display:block;
	
	 background-color:coral;
    margin-right:6px;
    text-align:center;
    color:#ffffff;
    font-weight: bold;
    text-decoration: none;
     padding:6px;
    
}

.lien_reponse:hover

{
    
    background-color:#ff6600;
	

    
}


.lien_sondage

{
    
   display:block;
	  padding:6px;
	 background-color:#090;
     margin-right:6px;
    text-align:center;
    color:#ffffff;
    font-weight: bold;
    text-decoration: none;
    
}

.lien_sondage:hover

{
    
    background-color:chartreuse;
	

    
}




.lien_sondage1

{
    
   display:block;
	  padding:6px;
	 background-color:#090;
   
    text-align:center;
    color:#ffffff;
    font-weight: bold;
    text-decoration: none;
   
      position: absolute; bottom: 20px; 

}

.lien_sondage1:hover

{
    
    background-color:chartreuse;
	

    
}



#middle {

	
	 width:auto;


	 position:relative;
	   overflow:hidden;
	    padding:20px;
		z-index:1;
	    

	
}



 @media screen and (max-width: 876px) {
      #middle_droite {
        display: none;
      }
    }

#middle_droite {

	 height:auto;
	 width:32%;
	 
	
	 
	  position:relative;
	   float:right;
	   padding-bottom:20px;
	   padding-left:20px;
	   border-left:#cccccc 0px solid;

}


#middle_gauche {

	 height:auto;
	 width:62%;
	
	  
	
	  position:relative;
	  float:left;
	  z-index:10;
	
	

}
 @media screen and (max-width: 876px) {
      #middle_gauche_bas {
        display: none;
      }
	  	  #middle_gauche {

	 height:auto;
	 width:100%;
	  }
    }
#middle_gauche_bas {


padding-bottom:20px;
padding-top:20px;
	
	

}

.middle_gauche_bas_col
{
	width:30%;
	float:left;
	padding-right:10px;
	
	
	}

#middle_gauche_haut {

border:#f0f0f0 1px solid;
padding-bottom:20px;
vertical-align:top;
padding:20px;
    
background-color: #fefefe;	
	border-radius: 0px;
	box-shadow: 1px 1px 2px #f0f0f0;

	   font-size: 16px;
	

}

.middle_gauche_haut {


vertical-align:top;
display:block;
margin-top:20px;
padding-bottom:30px;
padding:20px;
    
    
  border:#f0f0f0 1px solid;  
background-color: #fefefe;	
	border-radius: 0px;
	box-shadow: 1px 1px 2px #f0f0f0;



	
	

}


@media screen and (max-width: 876px) {
      
	
	
	#middle_gauche_haut {



border:#cccccc 0px solid;
vertical-align:top;
display:block;
margin-top:0px;
padding-bottom:30px;
padding:15px;

	border-radius: 0px;
	box-shadow: 1px 1px 12px #60;

        font-size: 16px;
   
background-color: #ffffff;	
        

	
	

}

.middle_gauche_haut {


vertical-align:top;
display:block;
margin-top:20px;
padding-bottom:30px;

background-color: #fafafa;	
	border-radius: 5px;
font-size: 14px;

	
	

}

	
	
	
	
    }

.middle_gauche_haut1 {
border:#cccccc 1px solid;
vertical-align:top;
display:block;
margin-top:20px;
padding-bottom:30px;
padding:20px;
background-color: #f5f5f5;	
	border-radius: 0px;
	box-shadow: 1px 1px 12px #60;
height:200px;

	
	

}



 @media screen and (max-width: 768px) {
      .middle_gauche_haut1 {
          
          border:#cccccc 0px solid;
height:auto;
      }

}




.middle_gauche_haut2{
border:#cccccc 1px solid;
vertical-align:top;
display:block;
margin-top:20px;
padding-bottom:30px;
padding:20px;
background-color: #f5f5f5;	
	border-radius: 0px;
	box-shadow: 1px 1px 12px #60;
height:380px; 

	
	

}


 @media screen and (max-width: 768px) {
      .middle_gauche_haut2 {
          
          border:#cccccc 0px solid;
height:auto;
      }

}




.middle_gauche_haut3{

vertical-align:top;
display:block;



  border:#f0f0f0 1px solid;  
background-color: #fefefe;	
	border-radius: 0px;
	box-shadow: 1px 1px 2px #f0f0f0;
    
height:100%;

	
	

}

 @media screen and (max-width: 768px) {
.middle_gauche_haut3 {
border:#cccccc 0px solid;
height:auto;
      }

}


nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 20px;
		background: #fff;
		border: 5px solid #444;
		right: 20px;
		top: 60px;
		width: 50%;
		border-radius: 4px 0 4px 4px;

	}

	nav li {

		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}

	nav:hover ul {

		display: block;

	}
	
	
.panier
{
	color:#000000;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	width:100%;
	
	border:thick  1px #e5e5e5;
	
	}
	
.panier_select
{
width:auto;
	
	}
	
.piege

{
	
display: none;	
	
	
}			
produit
{
	position:relative;

	float:left;
	
	width: 200px;
	height:196px;
	background-color:#efefef;
	margin-bottom:20px;
	margin-right:10px;
	padding-left:6px;
	padding-top:6px;
	border:#ceb407 solid 1px;
	text-align:center;
	}
	
produit_v2
{
	position:relative;

	float:left;
	
	width: 200px;
	height:210px;
	background-color:#efefef;
	margin-bottom:20px;
	margin-right:20px;
	margin-left:20px;
	padding-left:6px;
	padding-top:6px;
	border:#cccccc solid 1px;
	text-align:center;
	}	
	
produit_v2 img
{
	width:auto;
	height:250px;


}

produit_v3
{
	position:relative;

	float:left;
	
	width: 200px;
	height:320px;
	background-color:#efefef;
	margin-bottom:20px;
	margin-right:10px;
	padding-left:6px;
	padding-top:6px;
	border:#cccccc solid 1px;
	text-align:center;
	}	
	
produit_v3 img
{
	width:auto;
	height:250px;


}


produit_v4
{
	position:relative;

	float:left;
	
	width: 200px;
	height:240px;
	background-color:#efefef;
	margin-bottom:20px;
	margin-right:10px;
	padding-left:6px;
	padding-top:6px;
	border:#cccccc solid 1px;
	text-align:center;
	}	
	
produit_v4 img
{
	width:auto;
	height:150px;


}


produit_v5
{
	position:relative;

	float:left;
	
	width: 300px;
	height:580px;
	background-color:#efefef;
	margin-bottom:20px;
	margin-right:10px;
	padding-left:6px;
	padding-top:6px;
	border:#ceb407 solid 1px;
	text-align:center;
	}	
	
produit_v5 img
{
	width:auto;
	height:250px;


}



#pub_avant_middle
{
    height:70px;
	width:100%;

	display:block;
	
	
	 background:url(../images/bandeau.png) center no-repeat;
	
	
	}
.pub_avant_middle
{
    height:70px;
	width:100%;

	display:block;
	
	
	 background:url(../images/bandeau.png) center no-repeat;
	
	
	}

 @media screen and (max-width: 876px) {
      #pub_avant_middle {
        display: none;
      }
	    .pub_avant_middle {
        display: none;
      }
	 
    }






#reportage_vignettes
{
	
	height:auto;
	overflow-y:hidden;
    overflow-x:hidden;
	width:100000px;
	text-align:top;


	

	
	}
	
#reportage_vignettes_conteneur
{

	height:auto;
	overflow-y:hidden;
    overflow-x:scroll;
	width:auto;
	text-align:top;

	

	
	}	
.reportage_photo
{
	background-color:#009;
	height:500px;
	overflow:auto;
	width:100%;
	text-align:center;
	
	}


.sondage
{
	width:80%;
	height: 30px;
	background-color: #ffffff;
	border: solid 1px #c5c5c5;
	padding: 4px;
	
	
	
}

.texte_bleu
{   font-family:Verdana, Geneva, sans-serif;
    
	font-size:10px;
	font-weight:100;	
	color:#0000cc;
	
	}

#top {

	 height:auto;
	 width:auto;
	 

      margin-bottom: 70px;  

	
}

#top_bande_panier {

	 height:18px;
	 width:auto;
	
	 text-align:right;	
	display:none;
	
}

#top_logo_recherche {

	 height:66px;
	 width:auto;
	padding-top: 6px;
	

 background:url(../images/top_back.png) repeat;
	
}
#top_logo_recherche_connexion {

	 height:66px;
	 width:200px;

	
	 float:right;
	width:215px;
	height:66px;
	background:url(../images/connexion.png) no-repeat;



	
}
	
#top_logo_recherche_connexion_lien_connexion
{

	margin-top:6px;
	margin-left:15px;

	
	}
.top_logo_recherche_connexion_lien_connexion
{

	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;	
	color:#ffffff;	
	text-decoration:none;

	
	}	
.top_logo_recherche_connexion_lien_connexion:hover
{


	text-decoration:underline;

	
	}	
		

	
#top_logo_recherche_connexion_lien_vert
{
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;	
	color:#ceb407;
	margin-top:8px;
	margin-left:9px;

	
	}

	
	#top_logo_recherche_logo {

	 height:auto;
	 width:auto;
	
	 margin-left:20px;
	 float:left;






	
	
}
	#top_logo_recherche_logo1 {

	 height:auto;
	 width:auto;
	
	 margin-left:20px;
	 float:left;
      display: none;





	
	
}

	

@media screen and (max-width: 876px) {
      #top_logo_recherche_logo {
        display: none;
      }
   #top_logo_recherche_logo1 {
        display: block;
      }
    }
#top_logo_recherche_recherche {

	 height:66px;
	 width:auto;
	
	  margin-left:60px;
	 margin-right:20px;
	  float:left;
	  display:none;




	
	
}

#top_menu_actus {

	 height:20px;
	 width:auto;
	 background-color:#ceb407;	
	 font-style:normal;
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 13px;
     color: #ffffff;
	 vertical-align:middle;
	 padding-left:20px;
	
	
}
.top_menu_actus {

	 background-color:#ceb407;	
	 color:#ffffff;
	   border: 1px solid #ceb407; 

}

 @media screen and (max-width: 876px) {
      #top_menu_actus {
        display: none;
      }

      .top_menu_actus {
        display: none;
      }

    }


#top_menu_actus_1 {

	 height:20px;
	 width:auto;
	 background-color:#eeeeee;	
	 font-style:normal;
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 13px;
     color: #ffffff;
	 vertical-align:middle;
	 padding-left:20px;
	
}
.top_menu_actus_1 {

	 background-color:#e5e5e5;	
	 color:#000000;
	 border: 1px solid #eeeeee;	
	 
	 

}

#top_menu_boutique {

	
	 min-height:26px;
	 height:20px;
	 width:100%;
	 background-color:#e5e5e5;
	  font-style:normal;
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-weight:bold;
	 font-size: 12px;
     color: #ceb407;
	
     padding-left:20px;
	 padding-top:6px;
	  padding-bottom:6px;
	 vertical-align:middle;
	 position:relative;
	 z-index:100;
	
	
}
.top_menu_boutique
{
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-weight:bold;
	 font-size: 12px;
     color: #ceb407;
	 text-decoration:none;
	}
	
.top_menu_boutique:hover
{
	 text-decoration:underline;
}

.vente
{
	width:160px;
	margin-bottom: 4px;
	height: 20px;
	padding:0;
	

	 font-size: 12px;
	
	
}



/* fin style pied de page */



 /* Add a black background color to the top navigation */
	
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}	
	
.topnav {
  background-color: #ceb407;
  overflow: hidden;

  margin:0;
  padding:0;
    

box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
    
      position: fixed;
    top:0;

  width: 100%;
    z-index: 1000000;

    

    
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

}

/* Add an active class to highlight the current page */
.active {
  background-color: #555;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

	/* Dropdown container - needed to position the dropdown content */
#droite {
  float: right;

}
	
	
	
/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position:fixed;
 
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
 
    
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 876px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
	
#droite {
  float: left;

}
	
	
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 876px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
} 
    
    #rien a:hover {
  background-color: #ff0000;

}
    

/* début traitement bouton monter vers le haut*/


a#cRetour{
  border-radius:3px;
  padding:10px;
  font-size:15px;
  text-align:center;
  color:#fff;
  background:rgba(0, 0, 0, 0.25);
  position:fixed;
  right:20px;
  opacity:1;
  z-index:99999;
  transition:all ease-in 0.2s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-decoration: none;
}
a#cRetour:before{ content: "\25b2"; }
a#cRetour:hover{
  background:rgba(0, 0, 0, 1);
  transition:all ease-in 0.2s;
}
a#cRetour.cInvisible{
  bottom:-35px;
  opacity:0;
  transition:all ease-in 0.5s;
}

a#cRetour.cVisible{
  bottom:20px;
  opacity:1;
}

/* fin traitement bouton monter vers le haut*/



/* on rajoute un style pour la section de connexion back office*/


* {
  box-sizing: border-box;
}

/* style the container */
.container {
  position: relative;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px 0 30px 0;
} 

/* style inputs and link buttons */
input,
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none; /* remove underline from anchors */
}

input:hover,
.btn:hover {
  opacity: 1;
}

/* add appropriate colors to fb, twitter and google buttons */
.fb {
  background-color: #3B5998;
  color: white;
}

.twitter {
  background-color: #55ACEE;
  color: white;
}

.google {
  background-color: #dd4b39;
  color: white;
}

/* style the submit button */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

/* Two-column layout */
.col {
  float: left;
  width: 50%;
  margin: auto;
  padding: 0 50px;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* vertical line */
.vl {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  border: 2px solid #ddd;
  height: 175px;
}

/* text inside the vertical line */
.vl-innertext {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 8px 10px;
}

/* hide some text on medium and large screens */
.hide-md-lg {
  display: none;
}

/* bottom container */
.bottom-container {
  text-align: center;
  background-color: #666;
  border-radius: 0px 0px 4px 4px;
}

/* Responsive layout - when the screen is less than 650px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 650px) {
  .col {
    width: 100%;
    margin-top: 0;
  }
  /* hide the vertical line */
  .vl {
    display: none;
  }
  /* show the hidden text on small screens */
  .hide-md-lg {
    display: block;
    text-align: center;
  }
}
/* fin style pour la section de connexion back office*/

/* style de la galerie photo*/
canvas {
				
				width: 100%;
			
			}
			.grid	{
				
				border: 1px solid #cccccc;
				border-radius: 5px;
				background-color: #f5f5f5;
				
				padding-left: 20px;
				float:left;
				
			
				}
			.grid h1 {font-size:14px;text-align:left; color:#555555; font-family: tahoma;  }
			.grid p {font-size:14px; text-align:left; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black," sans-serif"}
    
    
    
/*  à partir d'ici c'est pour la laerie photo */
    
    
    
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
    text-decoration:none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/*fin style pour la galerie photo*/