.news {
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%
}
.newsBox {
  width:100%;
  overflow:auto;
  height:calc(100% - 90px);
  position:absolute
}
.newsSearchBox {
  height:90px;
  width:338px;
  position:absolute;
  bottom:0;
  display:flex;
  align-items:center
}
.newsSearchBoxBubble {
  height:55px;
  width:326px;
  border-radius:14px;
  border:2px solid #bfbfbf;
  display:flex;
  align-items:center;
  justify-content:flex-start
}
.newsSearchBoxBubbleLeft {
  width:calc(100% - 50px)
}
.newsSearchBoxBubbleRight {
  width:50px;
  display:flex;
  align-items:center;
  justify-content:center
}
.newsSearchBoxWrite {
  margin-left:10px;
  border:0;
  background:0 0;
  width:98%;
  height:100%;
  font-size:20px
}
.newsSearchBoxIcon {
  height:30px;
  width:30px;
  background:url(../../assets/img/icon_search.png) no-repeat;
  background-size:contain
}
.newsBubbleNews {
  position:relative;
  height:160px;
  width:98%;
  margin-bottom:10px;
  display:flex;
  flex-direction:column;
  transition:.05s
}
.newsBubbleNews:hover {
  cursor:pointer;
  overflow:hidden;
  opacity:.85
}
.newsBubbleNewsHigh {
  height:120px;
  border-radius:20px 20px 0 0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--grey);
  border-bottom:none
}
.newsBubbleNewsDate {
  border-radius:0 20px;
  background:var(--grey);
  padding:0 10px;
  position:absolute;
  height:37px;
  display:flex;
  top:0;
  right:0;
  justify-content:center;
  align-items:center
}
.newsBubbleNewsDate>span {
  color:#fff;
  font-size:20px
}
.newsBubbleNewsDown {
  height:40px;
  margin-top:-2px;
  background-color:var(--grey);
  border-radius:0 0 20px 20px;
  font-size:19px;
  color:var(--black);
  display:flex;
  align-items:center;
  justify-content:center
}
.newsBubbleNewsDownText {
  width:295px;
  color:var(--white-forced);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.newsArticleContainer {
  background:var(--white);
  border:2px solid var(--grey);
  border-radius:20px;
  position:relative;
  margin-bottom:10px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap
}
.newsArticleBackground {
  position:relative;
  border-bottom:2px solid var(--grey-contour);
  border-radius:20px 20px 0 0;
  width:100%;
  height:170px;
  margin-bottom:15px;
  background:center no-repeat;
  background-size:cover
}
.newsArticleBackgroundTitle {
  text-shadow:0 0 15px rgba(0,0,0,.8);
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  color:var(--white-forced)
}
.newsArticleBackgroundAuthor {
  position:absolute;
  bottom:10px;
  left:10px;
  height:70px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  color:var(--white-forced);
  font-size:180%
}
.newsArticleBackgroundAuthorAvatar {
  height:70px;
  width:70px;
  background:no-repeat center -35px;
  margin-right:5px
}
.newsArticle {
  width:95%;
  max-width:700px;
  font-size:100%;
  overflow:hidden
}
.newsArticle img {
  max-width:100%
}
.newsArticle strong {
  font-weight:700
}
.newsArticle span {
  font-size:100%!important
}
.newsArticleDate {
  display:flex;
  align-items:center;
  height:32px;
  width:100%;
  margin:20px;
  font-size:120%
}
.newsArticleDateIcon {
  background:url(../../assets/img/horloge.png);
  height:32px;
  width:31px;
  margin-right:5px
}