/*
couleur principale : #E699C5 = rose clair
couleur secondaire : #C0006F = rose grenat
couleur texte : #FDDDFA = rose très clair
*/
/*une règle CSS doit avoir un ordre, de l'intérieur vers l'extérieur* voir ex sur le h3*/
body{
	color: white; /*couleur de la police*/
	background:#e699c5 url(img/bg_image.jpg) repeat-y ;
	background-color: #FDDDFA;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small; /*le format ne s'applique pas aux titres, il faut créer des règles H1 H2 etc */
}

/*================================================================================================
1 - Zone DIV
================================================================================================*/
#wrapper{
	color: black;
 /*background-color: white;*/
	width: 90%; /*largeur de la zone de contenu - Sa largeur sera toujourS de 90% par rapport à la largeur de body*/
	margin-top: 10px;
	margin-right: auto; /*marge extérieure droite automatique */
	margin-left: auto;  /*marge extérieure gauche automatique, margin right +left = auto permet de centrer la zone sur la page web*/
}
#bandeau{
	color:black;
	/*background-color:#e699c5;*/
	h1 a {color: #C0006F;}
	background-position: top left; /*positionne l'image pour quelle commence en haut à gauche)*/
	/*background-attachment: fixed; empeche l'image de defiler avec la page)*/
	padding-top: 10px; /*marge interne haut*/
	padding-right: 20px; /*marge interne droite*/
	padding-bottom: 0; /*marge interne bas*/
	padding-left: 20px; /*marge interne gauche*/
	/*on aurait aussi pu ecrire padding: 10px 20px 0px 20px dans ce cas l'ordre est toujours celui des aiguille d'une montre et commence par en haut*/
}
/*selecteur imbriqué appliqué uniquement aux images de la zone definie bandeau*/
#bandeau img{
 background-color: white;
 padding: 5px;
 border: 5px solid #d9d9d9;
}
#bandeau p{
 padding: 5px 0 5px 0;
 margin-bottom: 0;
}
/*ZONE DES ONGLETS*/
/*adaptons la forme des balises*/
#menu, #menu ul /* Liste */     
{	z-index: 10; /*met le menu en position "en dessus" de la position du contenu des pages dont le z-index est inf à 10*/
    padding : 0px; /* pas de marge intérieure */
    margin : 0px; /* ni extérieure */
    list-style : none; /* on supprime le style par défaut de la liste */
    line-height : 28px; /* 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 */
{ 	
	overflow:hidden;
	color: black;
	background-position: top left;
    font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 13px; /* hauteur du texte */
}
/*adaptons le contenu des listes*/
#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 : #C0006F; /* couleur de fond */        
    color : #FDDDFA; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width : 144px; /* largeur */
}
/*elements des listes et les listes*/
#menu li /* Éléments des listes */      
{
	list-style : none; /* on supprime le style par défault de la liste */
    float : left; /*affiche les onglets cote a cote à partir de la gauche*/
    /* pour IE qui ne reconnaît pas "transparent" */
    border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
    border-right: 1px solid transparent ; /* on met une bordure transparente à droite 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 li /* Eléments de sous-listes */
{
	/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
	border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li		
{
	border-top : 1px solid transparent; /* on met une bordure transparante en haut de chaque élément */
}

#menu li ul ul 
{
    margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
    border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
    border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
/*au passage de la souris puis du clic l'onglet activé aura la couleur de la page, pour que la visualisation des pages fonctionne il faut , apres hover, voir cours p56*/
 #menu a:hover , #menu ul li a:hover ,
 #page_accueil #navi01 a, /* visualisation de la page accueil, s'ecrit avec une vigule a la fin*/
 #page_catalogue #navi02 a, /* visualisation des autres pages, s'ecrit avec vigule a la fin*/
 #page_catalogue_men #navi02 a, /* visualisation des autres pages, s'ecrit avec vigule a la fin*/
 #page_de_contact #navi03 a, /* visualisation des autres pages, s'ecrit avec vigule a la fin*/
 #page_situer #navi04 a, /* visualisation des autres pages, s'ecrit avec vigule a la fin*/
 #page_test #navi05 a /* visualisation de la dernieree page, s'ecrit sans vigule a la fin*/
  { /*le crochet s'ouvre ici*/
	  text-decoration: none; /* soulignement désactivé */ 
	  color: #C0006F; /* On passe le texte en rose foncé... */
	  background: white; /* ... et au contraire, le fond en blanc */ 
	  border: 1px solid #C0006F; /* ligne de cadre */
 }

/*Ce code écrit en Javascript va mettre automatiquement une classe (sfHover) aux éléments de nos listes.
Au passage de la souris, cette classe est alors retirée. Cela nous permet donc de faire réagir facilement le menu*/
#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-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}
#page_catalogue_men
{
	color: white; /*couleur de la police*/
	background:#e699c5 url(img/bg_image_gris.jpg) repeat-y ;
	background-color: #FDDDFA;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small; /*le format ne s'applique pas aux titres, il faut créer des règles H1 H2 etc */
}

/*ZONE DES TEXTES*/
#zone_de_texte {
 background:#e699c5 url(img/mag_fond.jpg);
 background-color: white;
 width: 75%;
 height:100%;
 padding-top: 20px; /*marge interne haut*/
 padding-right: 10px; /*marge interne droite*/
 padding-bottom: 20px; /*marge interne bas*/
 padding-left: 20px; /*marge interne gauche*/
 margin-left:14px;
}
#zone_de_texte_contact {
 background:#e699c5 url(img/mag_fond_contact.jpg);
 background-color: white;
 width: 75%;
 height:100%;
 padding-top: 20px; /*marge interne haut*/
 padding-right: 10px; /*marge interne droite*/
 padding-bottom: 20px; /*marge interne bas*/
 padding-left: 20px; /*marge interne gauche*/
 margin-left:14px;
}
#zone_de_carte {
 background:#e699c5 url(img/mag_fond.jpg);
 background-color: white;
 width: 75%;
 height:100%;
 padding-top: 20px; /*marge interne haut*/
 padding-right: 10px; /*marge interne droite*/
 padding-bottom: 20px; /*marge interne bas*/
 padding-left: 20px; /*marge interne gauche*/
 margin-left:14px;
}

/*ZONE des vignettes du catalogue detail categorie sélectionnée*/
#cadrecentrale {
	background:#e699c5 url(img/mag_fond.jpg);
	background-color: white;
	margin-top:14px;
}
#cadrecentrale img {
	width:55px ; height:55px;
	border:2px solid #935800; /*la bordure d'une image dans un lien sera la couleur definie par défaut*/
}
/* agrandi les images lors du survol
#cadrecentrale img:hover {
	position: absolute;
	left:62%;
	top: 30%;
	width: 210px;
	height: auto;    
	border: 2px solid #C0006F;
} 
./
/*ZONE DES LIENS VERS METEO*/
#zone_de_liens1{
	position: absolute;
	left:77%;
	top: 40%;
	background-color: white;
	float: right;
	width: 14%;
 	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px; /*arrondi les coins des cadres*/
	padding: 10px 12px 10px 8px;
	border: 2px solid #FBADF9;
	margin: 60px 10px;
}
/*ZONE DES LIENS VERS ST DU JOUR*/
#zone_de_liens2  {
	position: absolute;
	left:77%;
	top: 20%;
	background-color: white;
	color:#C0006F;
	float: right;
	width: 14%;
 	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px; /*arrondi les coins des cadres*/
	padding: 10px 12px 10px 8px;
	border: 2px solid #FBADF9;
	margin: 60px 10px;
}
#pied_de_page {
	padding: 10px;
	padding-top: 10px; /*marge interne supérieure*/
	border-top: 1px dotted #8c8c8c;/*bordure superieure, trait en pointillé:dotted , au dessus de padding*/
}
#pied_de_page a {
	color: black;
	text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
}
#icone {
	float: left;
	padding: 10px;
	width: 5%;
}
/*===========================================================================================================
2 - Eléments HTML généraux
===========================================================================================================*/
/* grace au groupement de sélecteur, la même police est definie pour les deux titres h1 h2, seule la taille de la police diffère*/
h1, h2 {font-family: Verdana, Arial, Helvetica, sans-serif;} 
h1{ font-size:150%; }
h2{ font-size: 130%;
    margin-bottom: 1em;} /*le % sur font-size permet de conserver le rapport entre la taille des titres et du texte. 
Si on modifie la font size de body, les titres seront automatiquement adaptés*/
h3{ 
	font-size:120%;
	font-style: normal;
	letter-spacing: 2px;
	padding-top: 10px;
	border-top: 1px solid #A9122A;
	margin-top: 20px;
}
address {
	text-align: center;
	font-size: 80%;
	font-style: normal;
	letter-spacing:2px; /*espacement entre les lettres*/
	line-height: 1.5em; /*espacement entre les lignes*/
}
ul, li {list-style-type:square; } /* les listes non ordonnées (ul) ont un signe d'énumération carré -voir p37 */
a { text-decoration: none; } /*supprime le soulignement par defaut des liens hypertexe*/
/*les criteres ci dessous (pseudo-class) doivent toujours être déclarés dans cet ordre*/
a:link { color:#5C03F6;} /*couleur du lien lorsqu'il n'est pas cliqué*/
a:visited { color:#F9234E; } /*couleur du lien lorsqu'il a été cliqué*/
/* hover modifie le lien lorsque la souris le survole , focus le modifie lorsqu'il est selectionné avec le clavier, active modifie lorsque l'on clique le lien. Dans la pratique hover et focus sont souvent déclarés ensemble */
a:hover, a:focus {text-decoration: underline; } /*surligne le lien*/
a:active { color: white; background-color: #d90000; } /*met une couleur de fond au lien*/
p, ul {
	margin-top: 0;
	margin-right: 0;
	margin-bottom:  1em; /*marge du bas*/
	margin-left: 0;
}
li {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 1em; /*marge de gauche*/
}
/*==========================================================================
    Le formulaire de contact
===========================================================================*/
form {
	background-color: #eee;
	width: 400px; /*largeur u formulaire*/
	padding: 20px;
	border: 1px solid #8c8c8c;
}
label { display: block; }/*titre sur une ligne a part*/
 /*meme longueur pour les deux champs de saisies*/
 #expediteur, textarea {
	width: 300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
 }
textarea { height: 7em;}
input:focus, textarea:focus /*assigne une couleur d'arriere plan au champs du form lorsqu on saisie dedans*/
 {
	background-color: #d9d9d9;
 }
/*====================================================
   Sous menu de navigation situé à gauche de la page
=====================================================*/
/*CORPS DE LA PAGE*/
#corps_a article, aside, nav
{
	display: inline-block;
	vertical-align: top;
	text-align: justify;
}
#corps_a article
{
	width: 50%;
	margin-right: 15px;
}
#corps_a article p
{
	font-size: 1.1em;
}
#corps_a aside
{
	position: relative;
	width: 16%;
	background-color: #FDDDFA;
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px; /*arrondi les coins des cadres*/
	margin:20px 10px 5px 20px;
	padding: 8px 8px 8px 2px;
	color: pink;
	font-size: 0.9em;
    text-align : left; /* on met à gauche le texte qui se trouve dans la liste */
}
#corps_a aside img
{
	margin-right: 5px;
	border: 1px solid #181818;
	width: 200px;
}
#corps_a ul 
{
	font-size: 1.0em;
	color: #C0006F;
	list-style : none; /* on supprime le style par défaut de la liste */
	text-decoration: none; /* soulignement désactivé */ 
    line-height : 25px; /* on définit une hauteur pour chaque élément */
	padding: 8px;
}

#corps_a li a
{
	font-size: 0.9em;
	color:#C0006F;
	list-style : none; /* on supprime le style par défaut de la liste */
	text-decoration: none; /* soulignement désactivé */ 
    line-height : 25px; /* on définit une hauteur pour chaque élément */
	
}
#corps_a nav
{
	position: relative;
	width: 16%;
	background-color: #FDDDFA;
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px; /*arrondi les coins des cadres*/
	margin:20px 10px 5px 20px;
	padding: 8px 8px 8px 0px;
	color: pink;
	font-size: 0.9em;
    text-align : left; /* on met à gauche le texte qui se trouve dans la liste */
}
#copyright
{
	color: #C0006F;
	font-size: 0.6em;
    text-align : right; 
}