/*FONTS*/

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

}

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

}

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

}


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

}


/* STRUCTURE PAGE */

html, body
{
  /*background-color: #EDEAEC; 1 ouleur un peu plus rosée que la suivante #*/
  /*background-color: #EDEDEDFF;3*/
  background-color: #E9E0DB; /*2 couleur plus rosée que la première*/
  font-family: dejavu_sans_monobook, monospace, sans-serif;
  color: black;
  height: 100%;
  min-height: 100%;
  margin:0;
}


#main
{
  margin-left: 20%;
  margin-right: 20%;
  min-height: 100%;
}

#mainAccueil
{
  margin-left: 15%;
  margin-right: 15%;
  min-height: 100%;
}

/*TITRE*/

.titre_principal
{
  font-size: 2.5em;
  font-family:alluraregular;
  font-weight: lighter;
  font-style:none;
  text-align: center;
  border-bottom: 1.5px black solid;
  margin-bottom: 0;
  padding-top: 25px;
  padding-bottom: 75px; /*régler la distance avec la barre horizontale*/
}

.titre_principal h1
{
  margin-bottom: 0;
}


/*Main*/

.page
{
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
  padding-bottom: 5%;
  text-align: justify;
}


h2 /*propriétés des titres d'articles*/
{
  font-family: caviar_dreamsregular;
  font-weight: bold;
  color:black;
}

.contenu /*couleur du texte des articles*/
{
  /*color:#6E6E6E;*/
  color:#555;
}

.titre_article /*Tous les class="titre_article" seront centrés*/
{
  text-align: center;
  font-size: 2.5em;
}

.meta /*Informations méta liés à l'article*/
{
  text-align: center;
  font-size: 0.7em;
  margin-top: -12px;
  margin-bottom: 2px;
}

.image /*Toutes les images class="image" seront centrées*/
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/*Blocs articles sur page accueil*/

.blogbanniere
{
  margin-top: 5%;
  margin-left: 5%;
}

.banniere
{
  border: 1.5px #303030 solid;
  border-radius: 10px;
  width: 70%;
  padding: 15px;
  padding-bottom: 15px; /*espace entre lire la suite et le texte au dessus*/
  margin:auto;
  margin-bottom: 25px;
  word-wrap: break-word;
  position: relative;
  min-height: 80px;
}

.banniere h3 /*Titre du bloc*/
{
  font-weight: bold;
  margin:0;
  margin-bottom: 3px;
  font-family: monospace, sans-serif;
}

.nolink /*rend le titre d'article cliquable sur la page article*/
{
  text-decoration: none;
  color:black;
}

.liresuite /*Propriétés de Lire la suite*/
{
  position: absolute;
  bottom: 10px;
  right: 12px;
  text-decoration: none;
  text-transform: uppercase;
  color:black;
  font-size: 0.9em;
  font-weight: bold;
}

.liresuite:hover
{
  font-size: 0.92em;
}

.liresuite:visited
{
  color:#848484;
  font-size: 0.85
}

.dateart /*Position de la date*/
{
  position: absolute;
  top: 5px;
  right: 8px;
  margin:0;
  font-size: 0.8em;
}

.resumeart /*Couleur résumé de texte*/
{
  color:#6E6E6E;
}


.banniere:hover
{
  background-color: #EDEDEDFF;
  border: 1.5px #000 solid;
  border-radius: 10px;
  opacity: 0.8;

}

.bold /*tous les span class=bold*/
{
  font-weight: bold;
}

.italic /*tous les span class=italic*/
{
  font-style: italic;
}



/*DESIGN TELEPHONE MODE PORTRAIT*/
@media all and (max-device-width: 480px)
{
  .site-title /*titre site*/
    {
      font-size: 5em;
      font-family:alluraregular;
      font-weight: lighter;
      font-style:none;
      text-align:center;
      margin:0;
      margin-top: 5%;
      padding:0;
    }


    #main
    {
      margin-left: 3%;
      margin-right: 3%;
      min-height: 100%;
    }

    #mainAccueil
    {
      margin-left: 3%;
      margin-right: 3%;
      min-height: 100%;
    }


}