/* CSS BLOG */

.rubrique h2 {
  color: rgba(140, 29, 64,0.5);
  font-size: 30px;
}
.rubrique .ombre {
  color: #8C1D40;
  font-size: 18px;
  text-transform: capitalize; 
}


#blog_content {
  display:flex;
}

#blog_menu {
  flex:1;
}
#blog_menu .rubrique {
  z-index:9;
}
#blog_menu .rubrique h2 {
  color: rgba(140, 29, 64,0.5);
}
#blog_menu .rubrique .ombre {
  color: #8C1D40;
}
#blog_contenu {
  flex:4;
  margin-top:25px;
  display:flex;
  
}
#btn_menu_secondaire_lateral {
  display:none;
}

#blog_articles {
  flex:3;
  margin-right:20px;
  
}
#blog_lateral {
  flex:1;
  padding:0 15px 0 0;
}


.blog_article {
  border:1px solid rgb(140, 29, 64);
  margin-bottom:20px;
  display:block;
}
.blog_article[type="url"] {
  cursor:pointer;
}

.blog_article_header {
  display:flex;
  justify-content:space-between;
  flex-wrap:nowrap;
}
.blog_article_lot {
  background-color: rgb(140, 29, 64);
  color:#fff;
  padding:5px 15px;
  text-align:center;
  font-size:16px;
  flex:1;
}
.blog_article_date {
  color:#444;
  text-align:center;
  padding:5px 15px;
}

.blog_article_titre {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  flex:4;
  padding:0 10px;
}
.blog_article_content {
  margin:15px;
  display:flex;
  justify-content:space-between;
  flex-wrap:nowrap;  
}
.blog_article_texte p {
  margin:0 0 15px 0px;
  text-align:justify;
  line-height:18px;
}
.blog_article_texte img {
  width:70%;
  max-width:70%;
  height:auto;
  margin:0 auto!important;
  display: block;
}

.blog_article_photo {
  background-color: #dbdbdb;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  flex:1;
  height:240px;
  margin-right:15px;
}
.blog_article_texte_court {
  flex:2;
}

.blog_article_texte blockquote {
  margin:5px 0px;
  padding:10px 40px 10px 65px;
  font-style:italic;
  background-color: #dbdbdb;
    background-repeat: no-repeat;
    background-position: top left;
    background-image: url('../blog/images/bg_quote_violet.png');  
}


.blog_article_partage {
  flex:1;
  text-align:right;
}

.blog_article_partage_icon {
  background-color: rgb(140, 29, 64);
  background-repeat:no-repeat;
  background-size:22px;
  background-position:center;
  border-radius: 17px;
  width:34px;
  height:34px;
  display:inline-block;
  border:0;
  margin:5px 15px 5px 0;
  transition: 0.5s ease;
}
.blog_article_partage_icon:hover {
 background-color: rgb(0, 0, 0);
}

.blog_article_partage_icon[icon=twitter] {
  background-image:url('../images/twitter-logo.png');
}
.blog_article_partage_icon[icon=facebook] {
  background-image:url('../images/facebook-logo-f.png');
}

/* menu */
.blog_lateral_titre {
  text-align:center;
  border-bottom:1px solid rgb(140, 29, 64);
  text-transform:uppercase;
  font-size:16px; 
  font-weight:600;
  padding:0 0 5px 0;
  margin:0 0 5px 0; 
}
.blog_lateral_texte {
  margin:0 0 20px 0;
}

.blog_lateral_article {
  text-decoration:none;
  display:flex;
  justify-content:space-between;
  flex-wrap:nowrap; 
  margin-bottom:15px;   
}
.blog_lateral_article_photo {
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  width:30%;
  margin-right:10px;
  min-height:70px;
}
.blog_lateral_article_logo {
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  width:30%;
  margin-right:10px;
  background-image:url('../images/logo.png');
  min-height:40px;
}
.blog_lateral_article_content {
  width:70%;
}

.blog_lateral_article:hover div {
  color:rgb(140, 29, 64);
}

.blog_lateral_archive {
  display:block;
  text-align:center;
  margin-bottom:5px;   
}
.blog_lateral_archive:hover {
  color:rgb(140, 29, 64);
}


/* ---------------------- @NOTE RESPONSIVE 800px */

@media screen and (max-width: 920px) {
 
  #blog_content {
    
    position:relative;
    margin-top:20px;
  }
  #btn_menu_secondaire_lateral {
    display:block;
    top: 0; 
  }  
  .rubrique {
    display:none;
  }
  

  
  #blog_menu {
    width:0;
    flex:0;
    margin-top:40px;
  }
  
  #blog_contenu {
      margin:0;
      margin-top:40px;
      width: 100%;
  } 
  
   #blog_articles {
     margin:0;
     width:100%;
   }
   #blog_lateral {
     display:none;
   }  
  
  .blog_article {
    width:auto;
    margin:10px;
  }
  
  .blog_article_content {
    display:block;
  }
  
  .blog_article_photo {
    width:100%:
    height:240px;
    margin:10px 0;
    
  }
  .blog_article_texte_court {
    width:100%:
  }  

}