/*
balise{

}

.classe{

}

#identifiant{

}

.classe:pseudo-selector{

}

:first-child
:last-child
:first-of-type
:nth-child(n)
...
*/

/* Reset */

*{
  box-sizing: border-box;
}

body{
  margin:0;

}

h1{
  -webkit-margin-before:0;
  -webkit-margin-after:0;
}

/* Fonts */

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-bold-webfont.woff2') format('woff2'),
         url('../fonts/lato-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-regular-webfont.woff2') format('woff2'),
         url('../fonts/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/merriweather-bold-webfont.woff2') format('woff2'),
         url('../fonts/merriweather-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/merriweather-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/merriweather-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;

}

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/merriweather-regular-webfont.woff2') format('woff2'),
         url('../fonts/merriweather-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/* Style de la page */


body{
  background: url(../img/stripes.gif);
  font-family: Lato, sans-serif;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6, figcaption{
  font-family: Merriweather, serif;
}

.colonne{
  width: 1020px;
  background-color: #fff;
  margin:0 auto;
  padding:0 50px;
}

.titre-site{
  font-size: 32px;
  text-transform: uppercase;
  text-align: center;
  padding-top: 45px;
  padding-bottom: 35px;
}

.footer-site{
  margin-top:50px;
  border-top:1px solid #b2b2b2;
  padding:20px 0 30px;
  text-align: center;
  font-size: 13px;
}

.nav-site{
  width: 100%;
  background-color: #9f9f9f;
  display:flex;
  flex-direction: row;
}

.nav-site a{
  padding: 18px 0;
  text-decoration: none;
  color: white;
  font-weight:bold;
  flex-grow:1;
  text-align: center;
}

.nav-site a:hover{
  background-color: #3c3c3c;
}