/** Page : */

body {
  background: #eaeaea url('images/body.png'); /* (grille grise et blanche) */
  margin: 2px 3px; /* Donner plus de marge à gauche et à droite, et moins en haut et en bas */
  font-family: sans-serif; /* Police moderne, sans empattements, du type Times New Roman */
}

/** En-tête : */

#entete {
  background: #9f9f9f url('images/entete.png'); /* (grosse barre grise) */
  border: 1px solid black; /* Une bordure noire de 1 pixel sur tous les côtés, sauf... */
  border-bottom: none; /* ... en bas, pour ne pas faire double-emploi avec la bordure du haut de #page */
}

#imbw3c {
		position:absolute;
		top: 50px;
		right: 50px;
	}

h1 {
  height: 100px; /* La hauteur de l'image de fond entete.png (grosse barre grise) */
  line-height: 100px; /* Centrer le texte sur toute la hauteur de l'image de fond */
  border-bottom: 1px solid black; /* L'entête est composé de deux parties : h1 et #menu, il faut donc les séparer */
  margin: 0; /* Par défaut les navigateurs assignent une marge aux titres. Ici on gère notre propre mise en page */
  text-align: center; /* Centrer le texte horizontalement sur toute la largeur de la page */
  /* Technique de substitution du texte par une image : */
  background: url('images/h1.png') 50% 50% no-repeat; /* Cette jolie image, unique et centrée, remplace le texte ennuyeux */
  text-indent: -32000px; /* On décale le titre autant que possible sur la gauche de l'écran, pour ne plus le voir */
}

h2 {
  height: 20px; /* La hauteur de l'image de fond grappe.png (grosse barre grise) */
  line-height: 20px; /* Centrer le texte sur toute la hauteur de l'image de fond */
  margin: 0; /* Par défaut les navigateurs assignent une marge aux titres. Ici on gère notre propre mise en page */
  /* Technique  du texte après une image : */
  background: url('images/grappe.png') 0% 50% no-repeat; /* Cette jolie image, unique et centrée verticalement avant le texte */
  /*text-indent: 20px;*/ /* On décale le titre  sur la droite de l'écran, pour le voir a droite de l'image */
	text-align: center; /* Centrer le texte horizontalement sur toute la largeur de la page */
}
/** Menu principal : */

#menu {
  background: black url('images/menu.png'); /* (barre noire, avec un bandeau à rayures noir et orange juste en dessous) */
  list-style: none; /* On ne veut plus que les lignes de la liste aient de puces */
  margin: 0; /* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */
  padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */
  height: 29px; /* Hauteur de l'image menu.png */
}

#menu li {
  float: left; /* Afin que chaque élément de la liste se positionne juste à droite de l'élément précédent, et non en dessous */
  margin: 0 10px; /* Espacer horizontalement chaque bouton à l'intérieur du menu */
}

#menu a {
  display: block; /* Afin de pouvoir assigner une hauteur au lien (la hauteur étant définir dans la règle "#menu span") */
  text-decoration: none; /* Pas de soulignement des liens dans le menu, ils sont déjà identifiables en tant que liens par le visiteur */
  color: #ffb400; /* Le texte est orange */
  background: url('images/menu-lien.png'); /* Bande noir, mais devenant orange lorsque décalée vers le haut */
  cursor: pointer; /* Curseur en forme de main, pour résoudre un bug sous IE, causé lors du changement du lien en affichage bloc, quelques lignes plus haut */
}

#menu span { /* Ce span permet au menu survolé d'avoir un reflet de lumière sur sa droite */
  display: block; /* Afin de pouvoir assigner une hauteur à cet élément (voir ci-dessous) */
  height: 21px; /* Hauteur de l'image menu-lien.png, divisé par 2 */
  line-height: 21px; /* Centrer le texte verticalement sur la barre noire */
  padding: 0 10px; /* Espacement intérieur du bouton à gauche et à droite, pour plus d'aération */
  background: url('images/menu-lien-droite.png') 100% 0 no-repeat; /* Une seule occurrence de l'image de fond, et aligné tout à droite */
}

#menu a:hover, /* Au survol de la souris */
#menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */
{
  color: black; /* Le fond devient orange, donc le texte doit être noir pour être visible */
  background-color: #ffb400; /* L'image de fond reste inchangée, mais si l'image n'a pas été chargée, s'assurer qu'il y ait un effet visible */
  background-position: 0 -21px; /* =42 (la hauteur de l'image) / 2 : remonte l'image de fond de moitié vers le haut pour révéler sa partie orange */
}

#menu a:hover span, /* Au survol de la souris */
#menu a:focus span, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#menu a:active span /* Lorsque le lien a le focus, sous Internet Explorer */
{
  background-position: 100% -21px; /* =42 (la hauteur de l'image) / 2 ; mais toujours aligné à droite */
}

#menu .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */
  font-weight: bold; /* Gras... */
  text-decoration: underline; /* ... et souligné */
}

/** Page : */

#page {
  background: white url('images/pierre.png') repeat-y; /* Technique des colonnes factices : le menu de gauche a un fond sur toute la hauteur de la page */
  border: 1px solid black; /* Encadrer toute la page par une bordure noire de 1 pixel */
	clear:both;
}

/** Page : */

#page-com {
  background: white ; /* Technique des colonnes factices : le menu de gauche a un fond sur toute la hauteur de la page */
  border: 1px solid black; /* Encadrer toute la page par une bordure noire de 1 pixel */
}


/** Sous-menu : */

#sous-menu {
  background: black url('images/pierre.png') repeat-y; /* Fond noir si images non chargées, mais il faut remettre l'image de fond de #page */
  float: left; /* Colonne de gauche sur la page */
  width: 198px; /* Largeur de l'image sous-menu-lien.png */
  list-style: none; /* On ne veut plus que les lignes de la liste aient de puces */
  text-align: center; /* Centrer le texte sur la colonne du sous-menu */
  margin: 0; /* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */
  padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */
}
#sous-menu p {
	text-align: center; /* Centrer le texte sur la colonne du sous-menu */
	color: #ffffff; /* Le texte est blanc */
}
#sous-menu ul  a {
  display: block; /* Afin de pouvoir assigner une hauteur au lien (voir la règle "#menu span") */
  height: 22px; /* Hauteur de l'image sous-menu-lien.png, divisé par 2 (car elle représente deux états : normal et survolé) */
  line-height: 22px; /* Centrer le texte verticalement sur la ligne */
  background: url('images/sous-menu-lien.png'); /* Fond du sous-menu, mais devenant orange lorsque l'image est décalée vers le bas */
  text-align: center; /* Centrer le texte sur la colonne du sous-menu */
  text-decoration: none; /* Pas de soulignement des liens dans le sous-menu, ils sont déjà identifiables en tant que liens par le visiteur */
  color: #ffb400; /* Le texte est orange */
  margin: 2px 0; /* Espacer verticalement chaque bouton à l'intérieur du sous-menu */
 }

#sous-menu ul a:hover, /* Au survol de la souris */
#sous-menu ul  a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#sous-menu ul  a:active /* Lorsque le lien a le focus, sous Internet Explorer */
{
  color: black; /* Le fond devient orange, donc le texte doit être noir pour être visible */
  background-color: #ffb400; /* L'image de fond reste inchangée, mais si l'image n'a pas été chargée, s'assurer qu'il y ait un effet visible */
  background-position: 0 -22px; /* =44 (la hauteur de l'image) / 2 : remonte l'image de fond de moitié vers le haut pour révéler sa partie orange */
}

#sous-menu ul  a .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */

  font-weight: bold; /* Gras... */
  text-decoration: underline; /* ... et souligné */
}
/* pour la liste ul  */
#sous-menu2   {
	text-align: center; /* Centrer le texte sur la colonne du sous-menu */
   list-style: none; /* On ne veut plus que les lignes de la liste aient de puces */
   color: #ffb400; /* Le texte est orange */
  padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */
}



/** Contenu : */

#contenu {
  margin: 10px 10px 10px 209px; /* 209px = 198px (largeur du menu) + 1 (bordure droite du menu) + 10 (la marge que l'on veut donner au contenu) */
   background: #9f9f9f url('images/contenu.png'); /* (grosse barre grise) */
}

p {
  text-align: justify; /* Un long texte justifié est plus agréable à l'œil */
}
.p-c {
	font-weight:bold;
 font-size:150%;
  text-align: center; /* Un court texte centré est plus agréable à l'œil */
}

.p-indent5 {
  text-indent:5em; /*  indentation de la première ligne */
}



label {
	display: block;
	float: left;
}

input {
	display: block;
	width: 50px;
	float: left;
}

.findroite {
	clear: right;
	}
.fingauche {
	clear: left;
	}
.imgdroite {
	float: right;
	}
.imggauche {
	float: left;
	}
.imgdroite1 {
	float: right;
	width: 1%;
	}
.imggauche1 {
	float: left;
	width: 1%;
	}
.imgdroite18 {
	float: right;
	width: 18%;
	}
.imggauche18 {
	float: left;
	width: 18%;
	}
.imgdroite20 {
	float: right;
	width: 20%;
	}
.imggauche20 {
	float: left;
	width: 20%;
	}
.imgdroite24 {
	float: right;
	width: 24%;
	}
.imggauche24 {
	float: left;
	width: 24%;
	}

.imgdroite30 {
	float: right;
	width: 30%;
	}
.imggauche30 {
	float: left;
	width: 30%;
	}
.imgdroite40 {
	float: right;
	width: 40%;
	}
.imggauche40 {
	float: left;
	width: 40%;
	}
.imgdroite45 {
	float: right;
	width: 45%;
	}
.imggauche45 {
	float: left;
	width: 45%;
	}
.imgdroite100 {
	float: right;
	width: 100%;
	}
.imggauche100 {
	float: left;
	width: 100%;
	}
.finfloat{
  clear:both; /* pas flottant */
	}
.img100 {
	width: 100%;
	}
.img51 {
	width: 51%;
	}
.img20 {
	width: 20%;
	}
.img24 {
	width: 24%;
	}


boite  {
       display: block;
       width: 800px;
       height: 800px;
       background: #9f9f9f ;
       color: #111111  ; 
}
boite-conf  {
       display: block;
       width: 250px;
       height: 200px;
       background: #9f9f9f ;
       color: #111111  ; 
}

boite-conf label {
	display: block;
        top: 30%;
        left: 30%;
	float: none;
}

boite-conf input {
	display: block;
	width: 250px;
	height: 100px;
        top: 30%;
        left: 30%;
	float: none;
}

boitecom  {
       display: block;
       width: 600px;
       height: 400px;
       background: #9f9f9f ;
       color: #111111  ; 
}

boitecom .labcf {
	display: block;
	background: #9f9f00;
	    width: 150px;
        text-align: center;
        top: 0px;
        left: 0px;
		float: left;
}

boitecom .labcn {
	display: block;
	background: #009f00;
	    width: 100px;
	    height: 20px;
        text-align: center;
        top: 0px;
        left: 0px;
		float: none;
}


boitecom label {
	display: block;
	background: #9f9f00;
	    width: 150px;
        text-align: right;
        top: 0px;
        left: 0px;
		float: left;
}

boitecom label+input {
	display: block;
	width: 150px;
	height: 15px;
	float: left;
}

boitecom label+input+input {
	display: block;
	width: 150px;
	height: 15px;
	float: none;
}

boitecom select {
	display: block;
	width: 155px;
	height: 25px;
        top: 0%;
        left: 0%;
	float: left;
}

boitecom select + select {
	display: block;
	width: 155px;
	height: 25px;
        top: 0%;
        left: 0%;
	float: none;
}
/** Pied : */

#pied {
  clear: both; /* Si le menu de gauche est plus haut que le contenu de la page, s'assurer de positionner le pied juste en dessous du menu */
  border-top: 1px solid black; /* Séparer le pied du contenu de la page */
  background: #9f9f9f url('images/pied.png'); /* (bandeau à rayures noir et orange, avec une barre grise juste en dessous) */
  font-size: 12px; /* Un peut moins que les 19 pixels de line-height */
  padding-top: 9px; /* = 8 (la hauteur de la partie hachurée noir / orange) + 1 (bordure noire) */
  height: 38px; /* = 47 (hauteur de pied.png) - 9 (le padding-top que l'on vient de définir ci-dessus) */
  line-height: 19px; /* = 38 (hauteur définie ci-dessus) / 2 (on veut deux lignes de texte dans le pied de page) */
  text-align: center; /* Center le texte horizontalement sur tout le pied de page */
  color: #444444; /* Texte gris foncé, se fondant avec le fond gris clair : moins lisible, car ce paragraphe est moins important */
}

#pied a {
  color: black; /* Les liens du pied de page doivent ressortir du reste du pied de page. C'est chose faite avec des liens noirs */
}

/** Impression : */

@media print {
  #menu, #sous-menu #imbw3c { /* Les menus et sous-menus ne servent à rien sur une feuille                     */
    display: none;    /* (en effet, on ne peut malheureusement pas les cliquer, c'est assez ballot !)  */
  }

  body {
    background: none; /* Enlever l'image de fond en forme de "grille" (au cas où le visiteur ai activé l'impression des images de fond) */
  }
  
  h1 {
    background-image: none; /* On remet le texte à la place de l'image, car par défaut, les images de fond ne sont pas imprimées */
    text-indent: 0; /* Annule la technique de remplacement de texte par une image, le texte redevient visible */
  }

  #page {
    background: none; /* Enlever l'image de fond simulant le sous-menu de gauche, car on a caché ce sous-menu */
    border: none; /* Ne plus entourer le contenu avec une bordure noire. Cela est moche sur une page imprimée, */
  }               /* et il n'y a plus besoin de séparation car on a enlevé l'image de fond en forme de grille  */

  #contenu {
    margin: 0; /* Ne plus faire de place pour le menu de gauche, qui est supprimé                             */
  }            /* De plus, les 10px de marge ne sont plus nécessaire car on a enlevé les bordures de la page, */
               /* et les feuilles imprimées ont déjà une marge                                                */
  #pied {
    border: 1px solid black; /* Les bordures bas, droite et gauche étaient réalisées par la bordure de la page             */
  }                          /* Hors, on l'a enlevée la bordure de la page. Entourer tout le pied par une nouvelle bordure */
}