html, body 
{
	background-color: #ffffff;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 14px;
	color: black;
	text-align:justify;
	padding: 5px;
	margin: 0;
}
 
input[type=text]
{
	padding:3px; border:1px solid #CCCCCC; 
	-webkit-border-radius: 4px;
	border-radius: 4px;
	/* Taille nécessaire sinon c'est plus petit */
	font-size: 14px;	
	max-width: 95%;
}
input[type=text]:focus {border-color:#00003F; }

/* Pour les petits boutons */
.my_button
{
	-webkit-border-radius: 4px;	
	border-radius: 4px;
	border: 2px solid #404040; 
	padding-top: 2px; 
	padding-right: 5px;
	padding-bottom: 2px; 
	padding-left: 5px;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: black; 
}


table
{
 	width: 100%;
 	max-width: 1000px;
	margin-left: auto;
 	margin-right: auto;
 	border-width: 0px;
}


/* Titre  et sous titre de haut de page */
/* Leur taille change suivant la largeur cf. @media */
.text_titre
{
	color:#800000;
	font-size:35px;
	font-weight:bold;
	font-family: Arial;
}

/* Titre qui sert pour les familles */
.titre_famille
{
	color:#008000;
	font-size:18px;
	font-weight:bold;
	font-family: Arial;
}

/* Titre pour les infos */
.titre_info
{
	color:#800000;
	font-size:18px;
	font-weight:bold;
	font-family: Arial;
}

/* Style pour les TAG HR */
hr
{
	color: darkred;
	max-width: 1000px; 
    margin-left: auto;
    margin-right: auto;
}


/* === GROSSE BOITE POP === */
#overlay_bloc_pop
{
    display: none;
	position: fixed;
	top:0; right:0; bottom:0; left:0;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 901;
}

.popup_bloc_pop
{
	background: #fff;
	padding: 20px;
	border: 5px solid #ddd;
	position: relative;
	margin: 5% auto;
	text-align:justify;
	width: 80%;
	height: 70%;
	box-shadow: 0px 0px 20px #000;
	border-radius: 8px;
	overflow:auto;
}
img.btn_close_bloc_pop
{
	position: fixed;
	margin: -35px;
	z-index: 900;
}

#contenu_bloc_pop
{
	position: relative;
	font-size: 14px;
	text-align: justify;
	top: -5px;
	left: -5px;
	width: 100%;
	height: 100%;
	z-index: 900;
}

/* --------------------------------------------------------------------------------*/
/* CSS pour le Menu Hamburger sur les pages (menu et autres)
/* --------------------------------------------------------------------------------*/

/* Masque que l'on met à gauche et sous lequel se cache la bande du menu */
.class_mask_menu_hamburger
{
	position: absolute;
	width: 300px;
	margin-left: -300px;
	background-color: #FFFFFF;
	z-index:100;
	height: 100%;	/* Ne pas oublier! */
}

.class_menu_hamburger
{
	position: absolute;
	width: 250px;			/* Largeur de la bande */
	margin-left: -250px;	/* En dehors de la zone visible */
	border:2px solid #777;
	background-color: #FFFFFF;
	padding:5px;
	border-radius: 5px 5px 5px 5px;
	z-index:99;
	animation-name: left-enter;
  	animation-duration: 0.3s;
}

/* Animation pour faire entrer le panneau */
@keyframes left-enter 
{
	0% {margin-left:-250px;}
  	100% {margin-left:-4px;}
}

/* Animation pour faire sortir le panneau */
@keyframes left-exit 
{
	0% {margin-left:-4px;}
  	100% {margin-left:-250px;}
}

.class_menu_hamburger a:link, a:visited, a:hover
{
	color: #000000; text-decoration:none;
}

.class_smenu_hamburger
{
	position: absolute;
	width: 250px;
	border:2px solid #777;
	background-color: #FFFFFF;
	padding:10px;
	margin-left:150px; 
	z-index:99;
	border-radius: 5px 5px 5px 5px;
}

.class_smenu_hamburger a:link, a:visited, a:hover
{
	color: #000000; text-decoration:none;
}

/*------------------------------------------------------*/
/*          CHANGEMENTS SUIVANT LA TAILLE               */
/*------------------------------------------------------*/
@media only screen and (max-width: 770px)
{
	div.bloc_menu_gauche 
	{
		display: none;
	}
   
	div.bloc_menu_droite
	{
		display: none;
	}
	
	div.bloc_menu_centre
	{
		width: 100%;
	}

	div.bloc_menu_top_droite 
	{
		display: none;
	}

	div.bloc_menu_top_gauche 
	{
		display: none;
	}

	div.bloc_menu_top_centre 
	{	
		text-align: right;
	}

	div.bloc_menu_top_hamburger
	{
		display: inline-block;
	}	
	
	.img_list {width:80%; height:80%);
	
}

/* Lorsque c'est encore plus petit, on diminue la fonte du titre */
@media only screen and (max-width: 500px)
{
	span.text_titre
	{
		font-size:19px;
	}

	.img_grenade {width:60%; height:60%);
	
}

/* Lorsque c'est encore plus petit, on diminue la fonte du titre */
@media only screen and (max-width: 412px)
{
	span.text_titre
	{
		font-size:16px;
	}

	span.titre_famille
	{
		font-size:16px;
	}

	span.titre_info
	{
		font-size:16px;
	}

	.img_grenade {width:40%; height:40%);
	
}

/*----------------------------------------------------------------------------------*/