/* AUTEUR: Seguela Philippe */
/* DATE DE CREATION: 10/07/01 */

/* --- ici on d�termine la forme globale de la page: taille, police de caract�res, les marges, la couleur du fond... --- */

* {
margin-top : 0px;
}
body{
	font-family : Tahoma, Geneva, BadScript-Regular, sans-serif;
	/*height : 960px;*/
	width : 1150px;
	margin-right : auto;
	margin-left : auto;
	background-color: #ffffff;
	color: #000;
}
/* --- fin du body --- */

/* --- d�claration des polices sp�ciales utilis�es et pr�sentes dans le r�pertoire "fonts" --- */
/* --- ceci permet d'afficher des polices sans qu'elles soient disponibles sur l'ordi de l'internaute --- */
@font-face {
	font-family: "BadScript-Regular"; src: url('../fonts/BadScript-Regular.ttf');
}


/* --- caract�ristiques d'affichage des liens --- */
a {
	text-decoration: none;  
	color: #003F6B; 
	font-weight: bold;
}
a:hover {	/* paramètres au survol de la souris */
	text-decoration: underline;
	font-weight: bold;
	color: #fFFFFF;
	background-color: #A95327; 
}


/* --- caract�ristiques d'affichage du bandeau que l'on met pour la navigation en cr�ant --- */
/* --- un identifiant que l'on peut rappeler dans la page html avec la balise 'id' --- */
#bandeau {
	width : 1150px;
	margin-right : auto;
	margin-left : auto;
}
#bandeau a {
	text-decoration: none;  
	color: #115884; 
	font-weight: bold;
}
#bandeau a:hover {	/* param�tres au survol de la souris des liens du menu*/
	text-decoration: underline;
	font-weight: bold;
	color: #EF1D26;
	background-color: #115884; 
}

#bandeau ul {		/* style d'affichage de la liste */

	font-size : 14px;
	list-style-type : none;
	text-align : right;
	padding-top : 0px;
	padding-left : 280px;
}
#bandeau ul li { 	/* style d'affichage des �l�ments de la liste */
	display : inline;	/* !important, positionne les �l�ments de la liste en ligne plut�t qu'en colonne */
	/*background:url(../imagesindex/appareilStyle.png);  image de fond de l'onglet 
	background: rgba(220,220,220,0.8);*/
	margin-top : 14px;
	margin-right : 5px;
	padding-bottom : 1px;
	vertical-align : top;
	float : left;
	width : 90px;
	height : 30px;
	text-align : center;
	text-transform : uppercase;	/* m�me si on �crit en minuscule, le texte apparaitra en capitales */
	/*opacity : 0.85;	 l�g�re transparence du texte pour tenir compte de la photo en arri�re-plan */
}
/* --- fin du bandeau de l'en-t�te --- */

/* --- caract�ristiques d'affichage du header --- */
#header{
	background:url(../imagesindex/APteleBandeau.png); /* image de fond du header */
	margin-top : 0;
	display:block; 
	height: 250px;
	/*background-color: #999;*/
	background-repeat:no-repeat;
	background-position: center top, left top; 
}

/* couleurs changeantes */
.fun-color, #header {
-webkit-animation: mycolor 20s infinite;
animation: mycolor 20s infinite;
}

@keyframes mycolor {
15% { background-color: #e3ff87; } 
30% { background-color: #ff7c96; } 
45% { background-color: #6ffffa; }
60% { background-color: #ef6b30; } 
75% { background-color: #bf69b1; } 
}
/* --- fin couleurs changeantes et fin header --- */

/* --- caract�ristiques d'affichage du corps de page --- */
#corps {
	text-align: left;
	list-style : none;
	width : 1150px;
}

/* --- caract�ristiques d'affichage des paragraphes du corps de page --- */
#corps p {
	font-size:1em; /* il est pr�f�rable d'utiliser cette unit� pour le c�t� "responsive". 1em correspond � 12pt*/
	text-align: left;
	padding-left: 10px;
}

/* --- caract�ristiques d'affichage des tableaux du corps de page --- */
#corps table {
	font: 1.1em Verdana, sans-serif; /* toujours ajouter "sans-serif" au cas o� la police n'est pas pr�sente sur l'ordi de l'internaute */
	font-style : italic;
	background-color: #bfbfbf;
}

/* --- caract�ristiques d'affichage des titres du corps de page --- */
#corps h1 {
	font: 1.2em Verdana, sans-serif; 
	color:#EF1D26; 
	font-weight: bold; 
	text-align: center;
}

#corps h2 {
	font-family : Verdana, sans-serif; 
	font-size: 1.5em; 
	text-align: center; 
	color: #000099;
}

#corps h3 {
	font: italic 1.7em "BadScript-Regular", sans-serif; 
	font-weight: bold; 
	color:#003F6B; 
	padding-left: 50px; 	/* d�cale le titre sur la droite */
	text-align: left; 
	text-shadow: 1px 1px 10px #fff100;	/* ajoute une lueur ou une ombre */
}
/*#corps li {
list-style : none;
padding-left : 30px;
}*/
/* --- fin du corps de page --- */

/* --- caract�ristiques d'affichage du bas de page --- */
#pied {
	background-color: #949599;
	height: 25px;
	font-size: 12px;
	width : 1250px;
	/*vertical-align: center;*/
}
#pied ul {	/* style d'affichage de la liste */
	font-size : 1em;
	list-style-type : none;
	text-align : left;
	vertical-align: bottom;
}
#pied ul li { 	/* style d'affichage des �l�ments de la liste */
	display : inline; /* !important, positionne les �l�ments de la liste en ligne plut�t qu'en colonne */
	padding-top : 5px;
	float : left;
	width : 230px;	/* adapter la largeur au texte le plus long */
	text-align : center;
	opacity : 0.85;
}
/* --- fin du bas de page --- */


/* --- caract�ristiques d'affichage des photos ins�r�es dans le corps de page en cr�ant --- */
/* --- une classe que l'on peut rappeler dans la page html avec la balise 'class' --- */
.photo {
	margin: 15px; 
	border: 2px solid #ffbb00;
}

/* --- images de fond du bandeau pour les diff�rentes pages du site --- */
/* --- pour chaque page, il suffit d'appeler 'id="bandeau"' et la classe 'class="en-teteX"' parmi les quatre suivantes --- */
.en-tete1 {
	background-image : url(../imagesindex/BandeauPontIledeRe1150.jpg);
}

.en-tete2 {
	background-image : url(../imagesindex/BandeauPontIledeReNB.jpg);
}

.en-tete3 {
	background-image : url(../imagesindex/BandeauPontIledeRehb.jpg);
}

.en-tete4 {
	background-image : url(../imagesindex/BandeauPontIledeReNeg.jpg);
}
/* --- fin des classes d'images de bandeau --- */


/* --- caract�ristiques d'affichage du formulaire de contact --- */
#contact {
  /* Uniquement centrer le formulaire sur la page */
  margin: 0 auto;
  width: 800px;
  /* Encadr� pour voir les limites du formulaire */
  background: silver;
  padding-top: 5px;
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

#contact div + div {
  margin-top: 1em;
}

#label {
  /* Pour �tre s�rs que toutes les �tiquettes la ont m�me taille et sont correctement align�es */
  display: inline-block;
  list-style-type : none;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* Pour s'assurer que tous les champs texte ont la m�me police.
     Par d�faut, les textarea ont une police monospace */
  font: 1em sans-serif;

  /* Pour que tous les champs texte aient la m�me dimension */
  width: 400px;
  box-sizing: border-box;

  /* Pour harmoniser le look & feel des bordures des champs texte */
  border: 1px solid #999;
}

input:focus, textarea:focus {
  /* Pour souligner l�g�rement les �l�ments actifs */
  border-color: #000;
}

textarea {
  /* Pour aligner les champs texte multi-ligne avec leur �tiquette */
  vertical-align: top;

  /* Pour donner assez de place pour �crire du texte */
  height: 12em;
}

.button {
  background-color: white;
  color: #115884;
  border: 2px solid #e7e7e7;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button:hover {
	background-color: #115884;
}
/*button {
   Cette marge suppl�mentaire repr�sente grosso modo le m�me espace que celui
     entre les �tiquettes et les champs texte 
  margin-left: .5em;
}*/
/* --- fin caract�ristiques d'affichage du formulaire de contact --- */