/* DEFINITION DES STYLES PRINCIPAUX */

html, body, footer /* Reset de départ pour les marges intérieures (padding) et extérieures (margin) pour avoir tout les navigateurs dans le même état de départ */
{
	margin: 0;	/*pas de marge extérieure*/
	padding: 0;  /*pas de marge intérieure*/
 }

 html, body, footer /*fond de la page */
{	
	background-color:#ffefc4;	/*couleur de fond: bisque*/
	font-family: 'times new roman', Arial, sans-serif, serif; /*polices par défaut*/
	margin: 0; /*pas de marge extérieure*/
	padding: 0; /*pas de marge intérieure*/
}

#bloc_page /* la page complète fait 1330 pixels de large et avec les marges auto, le design sera centré*/
{
	width: 1330px;
	margin: auto;
}

@media all and (maw-width:1600px) /*pour tous les types d'écrans, si la largeur de la fenêtre est inférieure à 1600px, alors exécuter les règles CSS suivantes */
{
	#bloc_page
	{
		widht: auto;
	}
}	





/* EN-TETE */

#titre principal
{
	display: inline-block; /*Texte sur la même ligne*/
}

header h1 /* balise du texte: "Ancien Personnel Schneider Electric" */
{
	font-family: 'times new roman',serif;
	font-size:3.4em;
	font-weight:normal;
	color:white;
	margin-top:-235px;
	margin-left: 220px;
}

header h2 /* balise du texte: "Région Ouest" */
{
	font-family: times new roman, serif;
	font-size: 3.4em;
	font-weight: normal;
	color:white;
	margin-top:0px;
	margin-left:650px;
}

#logo /* balise du logo: "APSE Ouest" */
{
	display:inline-block; /* Texte sur la même ligne */
	width:130px;
	height:130px;
	z-index:2;	/* logo en avant plan */
	margin-top:-190px;
	margin-left:30px;
	margin-right:auto;
	margin-bottom:115px; /*marge du bas*/
	border-radius:6px 6px 6px 6px;	/*coins arrondis du logo */
	box-shadow:4px 4px 4px #1C1A19; /*ombre du logo */
}		

#banniere_image /* caractéristiques de l'image "Bretagne" */
{
	width:98%;		/* 98% de la largeur du bloc-page */
	height:200px;
	margin-top:15px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:2px; /*séparation entre bannière et menu déroulant */
	border-radius:10px 10px 10px 10px;	/*coins arrondis de l'image*/
	box-shadow:7px 7px 4px #1C1A19; /*ombre de la bannière*/
}

/* COMPATIBILITE INTERNET EXPLORER 10 & 11 */
/*Affichage entre banniere et menu deroulant + position logo + position titres pour Internet Explorer 10 & 11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
#banniere_image	{
	margin-bottom:-58px;	}
#logo			{
	margin-top:-200px;
	margin-bottom:2px;		}
header h1		{
	margin-top:-160px;		}
}	

	
	

	
/* BARRE DE NAVIGATION: MENUS DEROULANTS */ 
/*Style des listes:*/
#menu, #menu ul /* Liste */     
{
	padding : 0; /* pas de marge intérieure */
	margin : auto; /* marge extérieure=auto: permet de centrer le menu déroulant */
	list-style : none; /* on supprime le style par défaut de la liste */
	line-height : 30px; /* on définit une hauteur pour chaque élément */
	text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
	width: 1320px;  /* largeur totale dus menus déroulants */
	margin-left:auto;
	font-weight :regular; /* on met le texte en normal */
	font-family : times new roman; /* on utilise Times new roman */
	font-size : 16px; /* hauteur du texte : 16 pixels */
}

#menu a /* Contenu des listes */
{
	display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
	padding : 0; /* aucune marge intérieure */
	background : #3B4E77; /* couleur de fond: bleu */        
	color : #FFF; /* couleur du texte: blanc */
	text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
	width : 185px; /* largeur des menus*/
}

#menu ul li a	/*couleur du fond des sous menus*/
{
	background : #8A2BE2; /* couleur de fond: violet */ 
}

#menu li /* Elements des listes */      
{ 
	float : left; 
	/* pour IE qui ne reconnaît pas "transparent" */
/*	border-right : 1px solid #fff;  /*bordure blanche à droite de chaque élément */
/*	border-bottom: 1px solid #FFF;; /*bordure blanche en bas de chaque élément*/
}

#menu li ul /* Sous-listes */
{ 
	position:absolute; /* Position absolue */
	width: 144px; /* Largeur des sous-listes */  
	left: -999em; /* Hop, on envoie loin du champ de vision */
}

#menu li ul ul 
{
	margin:-30px 0 0 180px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
	text-align:center;	/*alignement des sous-sous listes au centre */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */   
{
	background: #F2462E; /* changement de couleur du fond au survol par la souris: rouge*/
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
	left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-	listes 
	lorsque la souris passe sur un élément de liste ET sous-sous-listes OU lorsque la souris passe sur un élément de sous-liste */
{
	left: auto; /* Repositionnement normal */
	min-height: 0; /* Corrige un bug sous IE */
	z-index:1;	/* visualisationau dessus des images */
}




/* TABLEAU: "NOS DERNIERES SORTIES" */
#table_sorties
{
	border-collapse: collapse; /* Les bordures du tableau seront collées ( plus joli ) */
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;	/* espace vertical entre images */
	height:300px;
	text-align:center;
	width: 1300px;	/* largeur du bandeau: Nos dernières sorties */
}
#dernieres_sorties
{
	height:15px; /*hauteur du block*/
	letter-spacing:12px;	/* Espace entre les lettres du titre */
	word-spacing:40px;		/* Espace entre les mots du titre */
	margin-top:0px;
	margin-left:160px;
	font-size:20px;
	text-align:center;
	background:#3DCD58; /*couleur du fond: vert*/
	color:#FFEFC4;	/*couleur du texte: bisque */
}	
#titre_sorties,			/*#sorties*/
{
	border : 0px solid black ; /* Pas de bordure pour les cellulles td & th */
	width:400px;
	height:30px;
	font-size:30px;
	color:#000;	/* couleur du texte: noir */
	background-color:#FFEFC4; /*couleur du fond: bisque*/
}
#espace_entre_titres_sorties
{
	width:80px; /* espace horizontal entre images */
}	





/*CARROUSEL La Vendée*/
#slider_la_vendee figure	
{	position: relative;	/*permet à la figure d'être déplacée facilement pendant l'animation*/
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 0;	/*retire tout l'espace entre les images et autour*/
		text-align: left; /*corrige un bugg de Safari5 pour windows*/
}
					
#slider_la_vendee figure img	/* si la figure fait 100% de large, chaque image doit prendre 1/5 de l'espace horizontal, soit: 20%: */
{		width: 20%; 
		height: 350px; /* hauteur des images */
		float: left;	}	

#slider_la_vendee 	/*	pour cacher ce qui dépasse du slider (overflow): */
{		width: 600px; 	/* largeur de l'image */
		max-width: 600px; /* largeur max du slider */
		overflow: hidden;	}	

@keyframes slidy	{
		0%	{	left: 0%;		}	/* chaque image sera affichée pour 20% de la durée totale de l'animation, le temps de déplacement sera de 5% */
		20%	{	left: 0%;		}	/* Animation de la droite vers la gauche */
		25%	{	left: -100%;	}	/* chaque mouvement sera mesuré en incréments du total de 100% */
		45%	{ 	left: -100%;	}
		50%	{	left: -200%;	}
		70%	{	left: -200%;	}
		75%	{	left: -300%;	}
		95%	{	left: -300%;	}
		100% {	left: -400%;	}	}	
	

/* Animation: */
#slider_la_vendee figure	{
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	left: 0;
	text-align: left;
	animation: 15s slidy infinite;		}
	
	
/*CARROUSEL 26 septembre La mine bleue*/
#slider_la_mine_bleue figure
{	position: relative;	/*permet à la figure d'être déplacée facilement pendant l'animation*/
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 0;	/*retire tout l'espace entre les images et autour*/
		text-align: left; /*corrige un bugg de Safari5 pour windows*/
}

#slider_la_mine_bleue figure img	/* si la figure fait 100% de large, chaque image doit prendre 1/5 de l'espace horizontal, soit: 20%: */
{		width: 20%; 
		height: 350px; /* hauteur des images */
		float: left;	}	

#slider_la_mine_bleue 	/*	pour cacher ce qui dépasse du slider (overflow): */
{		width: 600px; 	/* largeur de l'image */
		max-width: 600px; /* largeur max du slider */
		overflow: hidden;	}	

@keyframes slidy	{
		0%	{	left: 0%;		}	/* chaque image sera affichée pour 20% de la durée totale de l'animation, le temps de déplacement sera de 5% */
		20%	{	left: 0%;		}	/* Animation de la droite vers la gauche */
		25%	{	left: -100%;	}	/* chaque mouvement sera mesuré en incréments du total de 100% */
		45%	{ 	left: -100%;	}
		50%	{	left: -200%;	}
		70%	{	left: -200%;	}
		75%	{	left: -300%;	}
		95%	{	left: -300%;	}
		100% {	left: -400%;	}	}	

/* Animation: */
#slider_la_mine_bleue figure	{
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	left: 0;
	text-align: left;
	animation: 15s slidy infinite;		}

	

	
	
	
	
/* TABLEAU: NOTRE PROGRAMME DE SORTIES" */


#table_programme
{
	border-collapse: collapse; /* Les bordures du tableau seront collées ( plus joli ) */
	margin-left:auto;
	margin-right:auto;
	height:200px;
	text-align:center;
}

#prog_sorties
{
	height:15px; /*hauteur du block*/
	letter-spacing:12px;	/* Espace entre les lettres du titre */
	word-spacing:40px;		/* Espace entre les mots du titre */
	margin-top:0px;
	margin-left:160px;
	font-size:20px;
	text-align:center;
	background:#3DCD58; /*couleur du fond: vert*/
	color:#FFEFC4;	/*couleur du texte: blanc*/
}	

#titre_programmes, 	/*#programmes*/
{
	border : 0px solid black ; /* Pas de bordure pour les cellulles td & th */
	width:250px;
	height:30px;
	font-size:30px;
	color:#000;	/* couleur du texte: noir */
	background-color:#FFEFC4;
}	

#espace_entre_titres_prg
{
	width:80px;	/* espace horizontal entre images */
}	
	
#pont_aven /*caractéristiques de l'image */
	/* programme à mettre si image à la place du carroussel: */
{
	display:block;
	margin:auto;
	padding-left:0px;
	padding-bottom:0px;
	height:350px;
	width:600px;
}

#le_poete_ferrailleur /* caractéristiques de l'image */
{
	display:block;
	margin:auto;
	padding-left:0px;
	padding-bottom:0px;
	height:350px;	/*dimensions de l'image*/
	width:600px;
}	

/*CARROUSEL GUILVINEC   EXEMPLE*/
/*#slider_guilvinec figure	
{	position: relative;	/*permet à la figure d'être déplacée facilement pendant l'animation*/
/*		width: 100%;
/*		margin: 0;
		padding: 0;
/*		font-size: 0;	/*retire tout l'espace entre les images et autour*/
/*		text-align: left; /*corrige un bugg de Safari5 pour windows*/
/*}
					
/*#slider_guilvinec figure img	/* si la figure fait 100% de large, chaque image doit prendre 1/5 de l'espace horizontal, soit: 20%: */
/*{		width: 20%; 
		height: 350px; /* hauteur des images */
/*		float: left;	}	

#slider_guilvinec 	/*	pour cacher ce qui dépasse du slider (overflow): */
/*{		width: 600px; 	/* largeur de l'image */
/*		max-width: 600px; /* largeur max du slider */
/*		overflow: hidden;	}	

@keyframes slidy	{
		0%	{	left: 0%;		}	/* chaque image sera affichée pour 20% de la durée totale de l'animation, le temps de déplacement sera de 5% */
/*		20%	{	left: 0%;		}	/* Animation de la droite vers la gauche */
/*		25%	{	left: -100%;	}	/* chaque mouvement sera mesuré en incréments du total de 100% */
/*		45%	{ 	left: -100%;	}
		50%	{	left: -200%;	}
		70%	{	left: -200%;	}
		75%	{	left: -300%;	}
		95%	{	left: -300%;	}
		100% {	left: -400%;	}	}	
	

/* Animation: */
/*#slider_guilvinec figure	{
	position: relative;
	width: 500%;
	margin: 0;
	padding: 0;
	font-size: 0;
	left: 0;
	text-align: left;
	animation: 15s slidy infinite;		}	*/
	




/* pied de page */	
#pied_page
{
	border:none;
	margin:auto;
	width:1320px; /*largeur totale*/
	color:#0000ff;	
}

.pied_g	{
	margin:0px;
	width:15%;
	text-align:center;
}
	
.pied_d	{
	margin:0px;
	background-color:#FFEFC4;
	width:15%;
	text-align:center;
}	
	
#pied_c	{		/* compteur de visites */
	margin:0px;
	background-color:#FFEFC4;
	width:15%;
	text-align:center;
}