body {
    font-family : Arial; /* police */
    background-color : #F5F5F5; /* pas tout a fait blanc */
    min-width : 520px; /* definition de la taille minimale de l'affichage, si moins alors celui du
   corps sera quand meme de 520px */
    margin : 0; /* par defaut pas de marge exterieure */
    padding : 0; /* par defaut pas de marge interieure */
  }
  #bandeau {
    float : left;
    margin : 1% 4%; /* marges adaptatives pour meilleure lisibilite */
    letter-spacing : 1.5px;
  }
  #bandeau h1 {
    color : #01389f; /*#004C99;*/
  }
  #bandeau h2 {
    color : #829EF1; /*#0066CC;*/
    font-size : 1.5em;
  }
  h2 {
    color : #829EF1;
  }
  h3 {
    color : #9E77AC
  }
  #corps {
    background-color : #FFF; /* font different */
    color : #22303D;
    padding : 5% 8%; /* plus agreable a lire et au visuel */
    clear : both; /* pas concerne par les float donc retour a la ligne */
    border-top : 2px solid #DBE3EB; /* faire ressortir */
    border-bottom : 2px solid #DBE3EB;
  } span {
    font-weight : bold; /* faire ressortir */
  letter-spacing: 1px; /* plus de lisibilite */
    color : #003366;
  }
  a { /* style des liens */
    text-decoration : none; /* pas de soulignement */
    color : #0066CC;
  }
  a:hover {
    font-weight : bold; /* pour ressortir quand survole */
  }
  p{
  text-align : justify; /* plus beau car bien aligne */
  }
  nav {
    text-align : right; /* tout doit etre a droite */
  }
  nav ul { /* liste dans la navigation */
    margin : 1%  3% 0 0;
    padding : 0; /* enleve l'indentation de defaut */
    float : right; /* colonne a droite par rapport au logo */
  }
  nav ul li {
    display : inline-block; /* les elements de la liste sont presentes en ligne
   mais se comportent comme un block */
   padding : 0;
  }
  nav li a {
    display : block; /* les liens se comportent comme des block individuels,
  cela evite le chevauchement en cas de petite largeur d'ecran */
    padding : 1em;
    margin : 1em 1.1em;
    text-decoration : none; /* enleve le soulignement habituel des liens */
    letter-spacing : 1.3px; /* pour plus de lisibilite */
    font-size : 0.9em;
    color : #F5F5F5;
    background-color : #829EF1;
    border-color : #9E77AC;
    border-width : 2px;
    border-style : solid;
    border-radius : 15px 0%; /* haut-gauche bas-droite arrondis
                haut-droite bas-gauche droits*/
  }
  nav li a:hover { /* style des boutons de liens qu'on survole */
    background-color : #9E77AC; /*#0066CC;*/
    color : #F5F5F5;
    font-weight : normal; /* car on a regle le cas general sur bold */
  }
  #actif { /* element (lien) ayant l'id "actif" */
    background-color : #9E77AC;
    color : #F5F5F5;
  }
  #entete { /* une banniere pour la decoration */
    display: block;
    background : #003366 url(the-rochelle.jpg) repeat center; /* couleur image
  repetition */
    background-position: left 28%; /*28%;*/
    background-size : cover; /* prend la largeur de page */
    /*clear : both;*/
    height: 150px;
  }