/* BANDEAU */
header {
	background-color: rgb(126, 178, 218); /* arrière-plan bleu dans chaque case */
}
header table { /* le tableau est le bandeau */
	width: 100%; /* le bandeau fait la largeur de l'entête dans la fenêtre */
	margin-left: auto; margin-right: auto;
}
header td {
	text-align: center; /* le texte est centré dans chaque case du bandeau */
	background-color: rgb(126, 178, 218); /* arrière-plan bleu dans chaque case */
	width: 100%;
}
header img {
	border: 0;
/*	max-width: 900px; /* */
	width: 100%; /* largeur de l'image dans le bandeau */
}
header p {
	font-size: 52px; /* très gros texte */
	font-family: sanserif;
	color: rgb(0, 0, 153); /* bleu */
}
/* MENU BOUTONS */
nav {
	max-width: 900px;
	width: 100%; /* Même largeur que le bandeau, pour pouvoir centrer le menu principal */
	height:52px;
	padding:0; margin: 0;
	text-align: center;
	margin-left: auto; /* pour centrer la liste des boutons du menu principal */
	margin-right: auto; /* pour centrer la liste des boutons du menu principal */
	font-family: arial;
	position: relative; z-index:0; /* Place les boutons devant le bandeau */
}
nav a { /* ici, les liens sont des menus sans item ou bien des items */
	display: inline-block;
	margin: 0 2;
	color: black; /* items et menus sans item sont inscrits en noir */
	text-decoration: none; /* pour éviter que les liens soient soulignés par défaut */
	white-space:pre-line; /* force le navigateur à respecter les retours à la ligne */
}
nav a:hover { /* survol d'un lien (bouton sans item ou bien item) */
	color:red; /* les liens s'affichent en rouge lors de leur survol */
}

.main_menu {/* nav ul */
	display: inline-block;
	margin: 0; padding: 0; /* centrage vertical et horizontal dans le bloc nav */
	width: 100%;/* le menu prend toute la largeur du bloc nav */
/*	min-width: 900px; */
	list-style-type: none; /* pas de puce dans le menu */
/*	list-style-position: inside; /* suppression de l'indentation par défaut */
	font-weight: bold;
	font-size: 24px;
}
.main_item {
	display: inline-block;
	width: 23%; /* 4 boutons dans le menu, donc 4*23=92% sans compter les marges droites et gauches et les espacements entre les boutons */
	border: 2px solid blue; /* les éléments de la liste sont encadrés comme des boutons */
	box-shadow: 6px 6px 10px blue; /* ombrage bleu des boutons */
/*	padding-left: 2px; /* espacement entre le texte et le bord gauche du bouton */
/*	padding-right: 2px; /* espacement entre le texte et le bord droit du bouton */
	float:left; /* les boutons sont alignés de droite à gauche */
	margin-left: 5px; /* espacement de 10 pixels (5 à droite et 5 à gauche) entre les boutons */
	margin-right: 5px;
	height:60px;
	vertical-align: middle;
	background-color:rgb(125, 217, 211); /* fond bleu clair */
	border-radius: 10px;
}
.main_item:hover ul { /* nav ul li:hover ul - survol d'un bouton du menu */
	display:block; /* affichage vertical des items du menu survolé */
	position: relative;
	background-color: aqua; /* fond bleu clair */
	box-shadow: 8px 6px 10px blue; /* ombrage bleu des boutons */
	border-radius: 10px;
}
.item_menu { /* nav ul li ul */
	display: none; /* les items ne sont pas déroulés par défaut */
	margin: 0; /* centrage vertical et horizontal de chaque item */
	padding: 0;
	list-style-type: none; /* pas de puce devant les items */
	list-style-position: inside; /* suppression de l'indentation par défaut */
	border: none;
}
.item_menu li { /* nav ul li ul li */
	padding-top: 8px; /* espacement de 16 pixels (8+8) entre les items */
	padding-bottom: 8px;
}
.inactif { /* menu ou item inactif (sans lien défini) */
	color: rgb(102, 102, 102); /* gris */
}

/* INFO-BULLES */
.tooltip
{
  position: relative;
  cursor: help;
  text-decoration: none;
  color: red;
}

.tooltip span
{
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 98%;
  margin-left: 5;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: red;
  color: white;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 16px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
  border: 0; /* IE6 fix */
}

.tooltip:hover span
{
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 0;
}

.tooltip span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}

/* CORPS DE PAGE */
body { /* toute la page */
	background-color: rgb(217, 211, 125); /* fond de page jaunâtre */
	color: rgb(0, 0, 0); /* texte noir par défaut */
	text-align: center; /* texte centré par défaut */
	/* <body alink="#ee0000" link="#0000ee" vlink="#551a8b"> */
	min-width: 900px; /* Barre de défilement horizontal si la largeur d'écran fait moins de 1200 pixels */
	margin: auto;
}
#signature { /* signature de l'article */
	text-align: right;
	padding-right: 16px;
	font-style: italic;
	font-size: large;
}
#instruction { /* instruction (en zone "aside") concernant les photos */
	text-align: center;
	font-style: italic;
	color: rgb(0, 0, 153);
}
h1 { /* titre de la page */
	font-size: 40px;
	font-weight: bold;
	text-align: center;
}
article { /* article principal de la page */
/* <>style_iroise.css : */
  margin-left: auto; margin-right: auto; /* Centrage */
	width: 100%; /* largeur égale à celle de la section... */
	max-width: 900px; /* ...mais pas plus de 900 pixels pour ne pas dépasser la largeur du bandeau */


}
article table { /* article principal de la page */
/* <>style_iroise.css : */
  margin-left: auto; margin-right: auto; /* Centrage */
	width: 100%; /* largeur égale à celle de la section... */
	max-width: 900px; /* ...mais pas plus de 900 pixels pour ne pas dépasser la largeur du badeau */
  border: 0;
}
article p { /* paragraphes du bloc "article" */
	display: block;
	text-align: justify;
	font-family: sanserif;
	font-weight: normal;
	text-indent: 20px;
	font-size: x-large;
}
article img { /* <>style_iroise.css */
	width: 100%;
}
aside { /* zone des photos */
/*	min-width: 310px;
*/	text-align: center;
}
aside p { /* paragraphe en zone "aside" (légendes des photos) */
	display: inline-block;
	vertical-align: bottom;
	text-align: center;
	font-family: Arial;
	font-weight: bold;
	margin-right: 16px;
	font-size: large;
}
aside img { /* photo en zone "aside" */
	border: 2px ;
	width: 300px;
}
/* PIED DE PAGE */
footer { /* bloc de pied de page */
	text-align: center;
	font-style: italic;
}
#pied a { /* lien en zone de "pied de page" */
	line-height: 48px;
	font-size: 23px;
	background-color: yellow;
}