* {
  text-decoration: none; /* Pas de soulignement des liens dans l'ensemble des textes, ??ils sont déjà identifiables en tant que liens par le visiteur?? */
}
 
body {
  background: #ffd200;
  margin: 20px 30px; /* 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 {
  height: 150px;
  background: #ffd200 ; /* (grosse barre grise) */
  border: 0px 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 */
}
 
h1 {
  height: 150px; /* La hauteur de l'image de fond entete.png (grosse barre grise) */
  line-height: 58px; /* 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 */
  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/bandeau.jpg') 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 */
}
 
/** Menu principal : */
 
#menu {
  display: none;    /* (!! pour ne pas avoir de menu sous le bandeau !!)  */
  background: #ffd200; /* (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: 0px; /* 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 2px; /* 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: #702500; /* Le texte est orange */
  background: ; /* 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: 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: #ffd200; /* 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: #ffd200 repeat-y; /* Technique des colonnes factices : le menu de gauche a un fond sur toute la hauteur de la page */
  border: 0px solid black; /* Encadrer toute la page par une bordure noire de 1 pixel */
}
 
/** Sous-menu : */
 
#sous-menu {
  background: #ffd200 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 */
  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 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: ; /* Fond du sous-menu, mais devenant orange lorsque l'image est décalée vers le bas */
  text-align: left; /* 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: #702500	; /* Le texte est orange */
  margin: 2px 0; /* Espacer verticalement chaque bouton à l'intérieur du sous-menu */
}
 
#sous-menu a:hover, /* Au survol de la souris */
#sous-menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#sous-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: #ffd200; /* 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 .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */
  font-weight: bold; /* Gras... */
  text-decoration: underline; /* ... et souligné */
}
 
/** 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) */
}
 
p {
  text-align: justify; /* Un long texte justifié est plus agréable à l'œil */
}
 
/** 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: #ffd200; /* (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 { /* 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 */
}