.home_page_news_section{
    width : 100% ;
    padding: 2rem 0;
}

.home_page_news_section h2
{
font-family: "Open Sans", Arial, sans-serif;
font-size : 1.5rem ;
margin: 0 3rem 0.25rem 3rem;
}

.home_page_news_section h4
{
font-family: "Open Sans", Arial, sans-serif;
color : grey ;
font-size : 0.75rem ;
margin: 0.5rem 3rem 0.5rem 3rem;
}


.separator
{
width:100%;
border-top: 1px solid rgba(0, 0, 0, 0.8);
margin: 0 0 1rem 0;
}

.containergeneral
{
border: 1px rgba(0, 0, 0, 0.2) solid;
padding: 1rem;
margin: 1rem;
}

.home_page_news_section_bloc{
    width : 99% ;
    display : flex ;
    flex-flow : row wrap ;
    justify-content : space-around ;
    align-items : center ;
    align-self: center;
}
.home_page_news_bloc{
    width : 320px ;
    height : 250px ;
    margin-bottom : 20px ;
    margin-top : 10px;
    border : 1px #c9c9c9 solid ;
    overflow : hidden ;
}
.home_page_news_bloc a{
    font-family : "Open Sans", Arial, sans-serif;
    font-size : 12px ;
    color : #3a3a3a ;
    text-decoration : none ;
}
.home_page_news_bloc a:hover{
    font-family : "Open Sans", Arial, sans-serif;
    font-size : 12px ;
    color : #ff6e00 ;
    text-decoration : none ;
}
.home_page_news_bloc a:active{
    font-family : "Open Sans", Arial, sans-serif;
    font-size : 12px ;
    color : #3a3a3a ;
    text-decoration : none ;
}
.home_page_news_bloc_text{
    width : 320px ;
    height : 215px ;
    position: relative;
    z-index:2;
    display : flex ;
    align-content : flex-end ;
    align-items : flex-end ;
    overflow : hidden ;
}
.home_page_news_bloc_text_img{
    width : 318px ;
    height : 180px ;
    position:absolute;
    z-index:1;
    overflow:hidden ;
}
.home_page_news_bloc_text_img img{
    width: 100%;
    height: 100%;
    object-fit:cover;
    text-align:center;
}
.home_page_news_bloc_text_overlay{
    width : 320px ;
    height : 35px ;
    background-color : #f4f4f4 ;
    border-top : 1px #c9c9c9 solid ;
    display : flex ;
    flex-direction : column ;
    align-items : flex-start ;
    align-content : flex-start ;
    transition: all 0.5s;
    padding : 3px ;
    padding-top: 5px ;
}
.home_page_news_bloc:hover .home_page_news_bloc_text_overlay{
    width : 320px ;
    height : 110px ;
    background-color : #f4f4f4 ;
}
.home_page_news_bloc_text_title{
    margin : 0 ;
    padding : 0 ;
    text-align : center ;
    text-transform : uppercase;
    text-decoration : none ;
    font-size : 16px ;
    margin-bottom: 5px ;
}
.home_page_news_bloc:hover .home_page_news_bloc_text_title{
    font-family : "Open Sans", Arial, sans-serif;
    color : #ff6e00 ;
    text-decoration : none ;
}
.home_page_news_bloc_text_content {
    width : 100%;
    height : 70px ;
    font-size : 12px ;
    transition:all 0.5s;
    opacity:0;
    color : #343434 ;
    text-decoration : none ;
    text-transform : none;
}

.home_page_news_bloc:hover .home_page_news_bloc_text_overlay .home_page_news_bloc_text_content {
    opacity:1;
    color : #343434 ;
    text-decoration : none ;
    text-transform : none;
}
.home_page_news_bloc_text_info{
    display: flex ;
    width: 100%;
    justify-content : space-between ;
    z-index: 5;
    position: relative;
    overflow : hidden ;
    background-color : #fbfbfb;
    color: #343434 ;
    font-family : "Open Sans", Arial, sans-serif;
    font-size : 12px ;
    border-top: 1px white solid;
    align-items: center ;
    height: 30px;
}
.home_page_news_bloc_text_info_partage{
padding-left: 5px ;
height: 25px;
width: 40%;
display: flex ;
}
.home_page_news_bloc_text_info_auteur{
padding-right: 5px ;
}

.cards-news{
    display : flex ; 
    flex-direction : row ; 
  }
  .card{
      position: relative;
      border-radius : 5px ; 
      box-shadow: 0 0 15px rgba(0,0,0,.25);
      background : #e5e5e5 ; 
      width: 330px;
      height: 500px;
      flex-shrink: 0;
      margin: 0 25px;
      margin-bottom: 25px;
  }
  .card__img{
      height: 50%;
      width: 100%;
      overflow: hidden;
      border-top-left-radius: 5px ; 
      border-top-right-radius: 5px ;
      position: relative;
      border-bottom: 1px solid rgba(0,0,0,.1);
      border-top-right-radius: 5px ;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 15px rgba(0,0,0,.25);
  }
  .card__img-filtre{
      height: 10%;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      transition: all 0.4s ease;
      background : rgba(0,16,25,.7);
      color : white ; 
      display: flex;
      align-items: flex-start;
      padding : 5px 15px 10px;
      transition: all 1s 0.1s ease;
  }
  .card:hover .card__img-filtre{
      height: 20%;
      background : rgba(0,16,25,.5);
  }
  .card__img-filtre h2{
      font-size: 16px;
      font-family : Arial ; 
      margin: 0;
      margin-bottom: 10px;
      padding: 0;
      text-transform: uppercase;
  }
  .card__img-filtre p{
      margin: 0;
      padding: 0;
      font-size: 14px;
  }
  .card__img img{
      border-top-left-radius: 5px ; 
      border-top-right-radius: 5px ;
      height : 100%;
      transition: all 0.4s ease;
  }
  .card:hover .card__img img{
      height: 105%;
  }
  .card__date{
      position: absolute;
      top: 20px ;
      left: 20px;
      width: 50px;
      height: 50px;
      box-shadow: 0 5px 15px rgba(0,0,0,.6);
  }
  .cards__date-day{
      font-size: 18px;
      height: 25px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #E28D2F ;
      box-shadow: 0 0 15px rgba(0,0,0,.25);
      font-weight: bold;
      color: #f1f1f1;
      transition: all 0.7s ease;
  }
  .cards__date-month{
      font-size: 18px;
      height: 25px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #E94400 ;
      font-weight: bold;
      color: #f1f1f1;
      transition: all 0.7s ease;
  }
  .card:hover .cards__date-month,.card:hover .cards__date-day{
      height: 22px;
      width: 44px;
      font-size: 16px;
  }
  .card__text{
      height: 50%;
      padding: 5px 20px 15px;
      margin: 0;
  }
  .card:hover .card__text h2{
      color : #E94400 ; 
  }
  .card__text p{
      margin: 0;
      padding: 0;
      border-left: 1px solid rgba(0,0,0,.1);
      padding: 0 5px 5px;
      font-size: 12px;
  }
  
  .home_news_btn a{
    color:  #e5e5e5 !important;
    text-decoration: none !important;
    background-color: transparent;
  }
  .home_news_btn{
      font-size: 14px;
      padding: 10px 12px 10px;
      background: #E94400 ;
      border-radius: 1px;
      display: flex;
      justify-content: center;
      align-items: center;
      color:  #e5e5e5 !important; 
      border: 1px #f1f1f1 solid;
      text-transform: uppercase;
      font-weight: bold;
      position: absolute;
      bottom : 55px ;
      left : 105px; 
      cursor: pointer;
  }
  button:hover {
      background: #E28D2F  ;
  }
  .partage{
      width : 40% ; 
      padding-top : 6px ; 
      position: absolute;
      bottom: 5px;
      left: 15px ;
      border-top: 1px solid rgba(0,0,0,.1);
      z-index: 100;
  }
  .partage i{
      color: #001019 ;
      padding-right: 5px ;
      font-size: 20px;
  }
  .partage i:hover{
      color: #E94400 ;
      font-size: 21px;
  }
  
  
  .card-wrap-clip{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 300px;
      height: 55px;
      border-style: solid;
      border-width: 55px 80px 0 0;
      border-color: #e5e5e5 transparent transparent transparent;
      margin-top: -1px;
      z-index:0; 
      animation: wrap 0.5s 0.3s ease both;
  }
  
  @keyframes wrap {
      from {
          background-color: #e5e5e5;
      }
      to {
          background-color: #001019; 
      }
    }