@import url('//fonts.googleapis.com/css2?family=Domine:wght@700&display=swap');
 @import url('//fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
 @import url('//fonts.googleapis.com/css2?family=Jaldi:wght@700&display=swap');
 
@media (min-width: 320px) {
   
   #topBouton {
  display: block;
  position: fixed;
  bottom: 20px;
  left: 10px;
  background-color:#F00;
  color: #fff;
  z-index:10000;
  width: 60px;
  font-size: 2rem;
  height: 60px;
  border-radius: 100%;
  border: none
}

#maquettee{
   margin-bottom: 20px;
  padding: 6px;
  background-color:
}
  
#header-section{
  margin-top: 40px
}
#maquettee{
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #fff;
    width: 100%;
    font-weight: 700;
  }
  #maquettee #formSelection{
    padding: 0px;
    margin: 0px;
    position: relative;
    left: -40%!important;
  }
  .social-icons i {
    font-size: 16px;
    display: inline-block;
    color: #757980;
    margin: 0 10px;
    width: 35px;
    height: 35px;
    border: 1px solid #c8ced7;
    text-align: center;
    border-radius: 50%;
    line-height: 60px;
  }
  .social-icons {
    color: #313437;
    background-color: #fff;
    text-align: center;
    padding: 70px 0;
  }
  
  #logo img {
    width: 100px;
    height: auto;
  }
  #search-icon {
    position: absolute;
    display: block;
    right: 0;
    padding-right: 5px;
  }

  #search input {
    display: inline-block;
  }
  #search-wrapper {
    padding: 15px;
  }

  .vignette img {
    width: 100%;
  }
 
  .vignette-horizontale img {
    width: 100%;
  }
  #logo img {
    position: relative;
    margin: auto;
    display: block;
  }

  #logo {
    position: relative;
  }

  #menu-section {
    position: relative;
  }
  .navbar-nav {
    position: relative;
    margin: auto;
  }
  .accueil-rubrique {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
  }
  #la-une {
    position: relative;
    max-width: 1100px;
    margin: auto;
  }
  #afrique {
    position: relative;
    max-width: 1100px;
    margin: auto;
    padding: 15px;
  }
  #la-une {
    padding-left: 15px;
    padding-right: 15px;
  }
    
  #politique, #entete, #societe, #sport, #monde, #blog {
    position: relative;
    max-width: 1100px;
    margin: auto;
    padding: 15px;
  }
  
  #div-economie{
  margin: 0 auto;
  max-width: 1100px;
  padding:15px;
}
  #col_politique img {
    padding-left: 15px;
    padding-right: 15px;
  }
  #economie .vignette-horizontale {
    margin-top: 10px;
  }
  #economie .vignette-horizontale img {
    padding-left: 15px;
    padding-right: 15px;
  }
  #blog .vignette-horizontale {
    margin-top: 10px;
  }
  #blog .vignette-horizontale img {
    padding-left: 15px;
    padding-right: 15px;
  }
  #sport .vignette-la-une-secondaire {
    margin-bottom: 15px;
  }
  #la-une .vignette-verticale-titre {
    margin-bottom: 25px;
  }
  #la-une .vignette-horizontale {
    margin-top: px;
  }
  #la-une .vignette-horizontale img {
    padding-left: 15px;
    padding-right: 15px;
  }
  #societe .vignette-horizontale {
    margin-top: 10px;
  }
  #societe .vignette-horizontale img {
    padding-left: 15px;
    padding-right: 15px;
  }
  .navbar-nav li a {
    color: #0f0f10;
  }
  .vignette-verticale-metadonnees, .vignette-horizontale-metadonnees {
    font-family: 'Oswald';
  }
  .vignette-la-une-secondaire-metadonnees .vignette-category {
    font-family: 'Roboto', sans-serif;
    color: #0be6af;
    font-weight: 700;
    font-size: .7rem;
  }
  .vignette-la-une-secondaire-metadonnees .vignette-category {
    font-family: 'Roboto', sans-serif;
    color: #0be6af;
    font-weight: 700;
    font-size: .7rem;
}
  .vignette-la-une-secondaire-metadonnees .vignette-category {
    font-family: 'Oswald';
    color: #fb0202;
    font-weight: 700;
  }
  .vignette-la-une-secondaire .vignette-date {
    font-weight: 700;
    font-size: .7rem;
    font-family: 'Oswald';
  }
  .vignette-la-une-metadonnees .vignette-category {
    color: #fc0202;
    font-family: 'Oswald';
    font-size: .7rem;
    font-weight: 700;
  }
  .vignette-la-une-metadonnees {
    font-family: 'Oswald';
    font-size: .7rem;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .vignette-verticale-titre, .vignette-horizontale-titre {
    font-family: 'Oswald', sans-serif;
    color: #2c2b2b;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .navbar-nav .nav-item .nav-link {
    color: #333333;
    font-family: 'roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    text-transform: uppercase;
    transition: color .25s, background .25s, opacity .25s;
  }
  .row.vignette-horizontale {
    margin-bottom: 15px;
  }
  .vignette-la-une-principale.vignette {
    margin-bottom: 15px;
  }
  .col-md-6 .vignette-la-une-secondaire-titre {
    font-family: 'Oswald', sans-serif;
    float: left;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    opacity: 1;
    width: 100%;
}
  #sport .vignette-la-une-secondaire-titre{
     font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 700;
  }
   #societe .vignette-la-une-secondaire-titre,
    #div-economie .vignette-la-une-secondaire-titre, .col.col-7 .vignette-la-une-secondaire-titre {
    font-family: 'Oswald', sans-serif;
    color: #222;
    float: left;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    opacity: 1;
    width: 100%;
  }
  .col-6 .vignette-verticale-titre {
    font-size: 2rem;
  }
  .vignette-verticale-85 {
    margin-bottom: 15px;
  }
  .col-md-6 .vignette-la-une-secondaire {
    margin-bottom: 15px;
  }
  .socials-networks .row {
    margin-top: 20px;
    position: relative;
    top: 20px;
    display: inline-block;
}
  .col.col-3.social-icon {
    padding: 25px;
    margin-right: px;
}
  #search-icon {
    top: -22px;
    position: relative;
    color: #515152;
    width: 20px;
    left: 3px;
}
  #search-wrapper {
    top: 15px;
    position: relative;
  }
  .col .vignette-la-une-principale {
    font-size: 1.5rem important;
  }
  #la-une-1 {
    bottom: inherit;
  }
  #la-une-1 {
    position: absolute;
  }
  
  #principal-une {
    position: relative;
  }
  .vignette-la-une-principale.vignette {
    position: relative;
    bottom: 0;
  }
  .vignette-la-une-secondaire.vignette {
    position: relative;
    bottom: 0;
  }
  #la-une-2 {
    position: absolute;
    bottom: 0;
    padding: 15px;
    color: #ffffff;
}
  #la-une-1 {
    padding: 15px;
    color: #fff;
}
  .vignette-la-une-secondaire-titre {
    margin-bottom: 0px;
    color: #fff #f4f4f5;
}
  #la-une-3 {
    position: absolute;
    bottom: 0;
}
  #la-une-3 {
    padding: 15px;
}
  .vignette-la-une-secondaire-titre {
    color: #ffffff;
}
  .vignette-la-une-secondaire-titre {
    color: #ffffff;
  
}


  #la-une-2 .vignette-la-une-secondaire-metadonnees, 
  #la-une-3 .vignette-la-une-secondaire-metadonnees {
    color: #fbf9f9;
  }



  #la-une-2 .vignette-date,
  #la-une-3 .vignette-date,
  #la-une-1 .vignette-date {
    color: #ffffff;
  
}


  #economie {
    background-color: #000;
   
  
}


  #div-economie .row div {
    color: #ffffff;
  
}


  li {
    color: #ffffff;
  
}


  #div-economie .vignette-category {
    color: #fbfbfb;
    font-size: .7rem;
    font-family: 'Oswald';
    font-weight: 700;
  
}


  #div-absolute {
    position: absolute;
    bottom: 0;
    padding: 15px;
  
}


  #sport .row div {
    color: #313437;
  
}


  #div-absolute {
    color: #fff;
    background-color: rgba(0,0,0,0.4);
  
}


  #div-absolute div {
    color: #fff;
  
}


  #footer .row {
    background-color: #333537;
  
}


  #afrique .row .column .row {
    position: relative;
    bottom: 0;
  
}


  #div-ab {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    margin-right: 15px;
    padding: 10px;
  
}


  hr {
    border-top: 1px solid rgba(0,0,0,.1);
  
}


  #ligne {
    margin-top: 0;
    margin-bottom: -15px;
    border-top: 1px solid rgba(0,0,0,0.2);
  
}


  #termes div {
    background: #ff0202;
    transform: skewX(-15deg);
    max-width: 400px;
    display: inline-block;
    padding: 8px;
  
}


  .accueil-rubrique {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    padding-bottom: 10px;
  
}


  #termes {
    margin-bottom: 2px;
    color: #ffffff;
  
}


  #div-economie #ligne {
    border-top: 1px solid #ffffff;
  
}


  #economie {

    margin-bottom: 20px;
  
}


  
  #sport #termes div {
    color: #fff;
  }



  #sport {
    margin-bottom: 20px;
    margin-top: 20px;
  
}


  #afrique {
    margin-bottom: 20px;
    margin-top: 35px;
  
}


  #monde {
    margin-bottom: 20px;
  
}


  #blog {
    margin-bottom: 20px;
  
}


  #menu {
    margin-bottom: 20px;
  
}

  #boc-footer {
    background-color: #242525;
  }



  #footer {
    background-image: #2a2b2c;
  }



  .contact-clean {
    background-color: #313437;
  
}


  .vignette-category {
    font-weight: 700;
    color: #ff0000;
  }



  .vignette-la-une-secondaire-metadonnees {
    padding-top: 5px;
    padding-bottom: 5px;
  
}


  .vignette-verticale-metadonnees {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: .7rem;
    font-weight: 700;
  
}


  .vignette-horizontale-metadonnees {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: .7rem;
    font-weight: 700;
  
}


  #la-une .accueil-rubrique {
    margin-bottom: 10px;
  
}


  .navbar .nav-item:hover {
    border-bottom: 5px solid red;
  
}


  #social-networks {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 0 auto;
  
}


  .fa-facebook:hover {
    background-color: #055ada;
  
}


  .fa-twitter:hover {
    background-color: #0ad9f5;
  
}


  .fa-instagram:hover {
    background-image: linear-gradient(30deg, rgb(230,249,2), rgb(252,17,2), rgb(7,2,252));
  
}


  .fa-youtube:hover {
    background-color: #f71103;
  
}


  #article {
    margin: 0 auto;
    max-width: 1100px;
    margin-top: 15px;
  
}


  img {
    width: 100%;
  
}


  #corps_article {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
  
}


  #titre_article {
    font-weight: 700;
    font-size: 1.6rem;
    font-family: 'Oswald';
    margin-left: 0;
    padding: 15px;
    padding-bottom: 0px;
  
}


  #parent_article {
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 20px;
  
}


  .row.corps-arcticle {
    margin-bottom: 15px;
  
}


  .article-simulaire {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0px;
  
}


  #article-simulaire {
    margin: 0 auto;
    background-color: #F3E1DD;
   
  
}


  #article-simulaire {
    padding-top: 15px;
  
}


  #article-simulaire {
    padding-bottom: 20px;
    padding-top: 25px;
    margin-top: -25px;
  
}


  .listing {
    background-color: #f3e1dd;
    padding-top: 15px;
    padding-bottom: 20px;
  
}


  #liste {
    margin: 0 auto;
    max-width: 1100px;
  
}


  #div-ab div {
    color: #ffffff;
    background-color: rgba(0,0,0,0.1);
  
}


  #div-absolute {
    width: 100%;
  
}


  #div-absolute .vignette-la-une-secondaire-titre {
    font-size: 1.4rem;
  
}


  #la-une-3, #la-une-2, #la-une-1 {
    background-color: rgba(0,0,0,0.4);
  }



  #div-ab div {
    background-color: initial;
  
}


  .vignette-horizontale-titre {
    font-size: 1rem;
  
}


  .vignette-horizontale-titre {
    font-size: 1rem;
  
}


  .vignette-horizontale-titre {
    font-size: 1rem;
  
}
  #societe {
    margin-top: 35px;
  
}
  #economie {
    padding-top: 20px;
}
  #politique, {
    padding: 15px;
}
  #article-simulaire .vignette-la-une-secondaire-titre {
    color: #313437;
}
  #body {
    padding-bottom: 15px;
}
  #parent_article .vignette-la-une-secondaire-metadonnees {
    padding-left: 15px;
}
  #image_article {
    padding: 15px;
}
  #header-section {
    padding: 5px;
}
  #liste .vignette-la-une-secondaire-titre {
    color: #313437;
}
  #liste {
    padding-top: 12px;
}
  #blog-image {
    display: inline-block;
    float: left;
}
  #blog-text {
    display: inline-block;
    font-weight: 900;
    font-family: 'Montserrat';
    font-size: 1.3rem;
    position: relative;
    top: 0px;
    left: 0px;
    padding-left:10px;
    padding-top: 10px;
}
  #div-blog {
    background-color: #f3e1dd;
    padding: 20px;
  }
  #img-fluid{
  position: relative; margin: 0 auto;
}
  #bio {
    padding: 10px;
    font-size: 1rem;
    font-family: 'Oswald';
}
  #div-blog {
    margin-right: 15px;
    margin-bottom: 10px;
}
  .vignette-la-une-secondaire-metadonnees {
    font-family: 'Oswald';
    font-size: .7rem;
  }
  #economie {
  
    padding-top: 25px;
  
}
  #div_padding img {
    padding-left: 15px;
    padding-right: 15px;

}
  #societe {
    padding: 15px;
  }
  #sport {
    padding-left: 15px;
    padding-right: 15px;
}
  #afrique {
    padding-left: 15px;
    padding-right: 15px;
}
  #monde {
    padding-left: 15px;
    padding-right: 15px;
  
}
  #blog {
    padding-left: 15px;
    padding-right: 15px;
}
  #pad {
    margin-bottom: 20px;
}
  .vignette-la-une-titre {
    font-weight: 700;
    font-family: 'Oswald';
    font-size: 1.8rem;
    line-height: 1;
}
#social-networks .social-icon{
 padding-left: 0;
  padding-right: 0;
  max-width: 55px;
  margin: 0 auto;
}
#social-networks .row{
  margin: 0 auto!important;
  width: 200px;
    
}
 #search input{
  width: 100%
}

.vignette-la-une-secondaire-titre,
.vignette-horizontale-titre,
.vignette-la-une-titre,
.vignette-verticale-titre,
#titre_article{
  font-family: 'Jaldi', sans-serif;
}

.listing .col-md-4{
  margin-bottom: 15px;
}

#articlee, .listing {
  background-color:#fbf3f1!important ;
 
}
#article-simulaire {
  background-color:#fbf3f1!important ;
}
}

@media (min-width: 480px){
    
  #search input{
  width: 50%
}

}

@media (min-width: 768px) {
#search input{
  width: 100%
}

#titre_article {
  font-size: 2rem!important;
  line-height: 1.3!important;
}

#corps_article {
   font-size: 1.2rem!important;
}

    #search-wrapper input{
     width: 100%;
}
    #maquettee #formSelection{
    padding: 0px;
    margin: 0px;
    position: relative;
    left: -70%!important;
  }
    
    
  #la-une {
    padding-left: 5px;
    padding-right: 5px;
}

  #col_politique img {
    padding-left: 0px;
    padding-right: 0px;
  
}
  #economie .vignette-horizontale {
    margin-top: 0px;
  
}
  #economie .vignette-horizontale img {
    padding-left: 0px;
    padding-right: 0px;
  
}
  #blog .vignette-horizontale {
    margin-top: 0px;
  
}

  #blog .vignette-horizontale img {
    padding-left: 0px;
    padding-right: 0px;
  
}
  #sport .vignette-la-une-secondaire {
    margin-bottom: 0px;
  }
  #la-une .vignette-verticale-titre {
    margin-bottom: 15px;
  }
  #la-une .vignette-horizontale img {
    padding-left: 0px;
    padding-right: 0px;
}
  #societe .vignette-horizontale {
    margin-top: 0px;
}
  #societe .vignette-horizontale img {
    padding-left: 0px;
    padding-right: 0px;
}

.vignette-la-une-secondaire-titre {
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Oswald';
}

#articlee {
  background-color: #f3e1dd;
  margin-top: -15px;
}

#corps_article {
  text-align: justify!important;
}

#body {
  padding-top: 15px;
}

#blog-image {
  border-radius: 50%;
  overflow: hidden;
  width: 80px;
  height: 80px;
  padding: 0px;
  margin-bottom: -10px;
}
.img-fluid {
  width: 100%;
  height: 100%;
}

.navbar-nav {
  margin-bottom: 5px;
}

.navbar-nav:hover {
  margin-bottom: 0px;
}

#img-fluid {
  width: 150px;
  height: 150px;
}
  #img-fluid {
    width: 250px;
    height: 250px;
}
  #div-economie{
    padding: 0!important;
  }
}
@media (min-width: 1200px) {

#maquettee #formSelection{
    left: -82%!important;
  }
  #maquettee{
  left: 50%;
  transform: translateX(-50%);
  max-width: 1100px!important;
   
  }
#social-networks .social-icon{
 padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: 55px;
}
#social-networks .row{
  margin: 0 auto!important;
  width: 100%;
}
#search input{
  position: relative;
  width: 70%;
  left: 60px
 
}
#search i{
  position: relative;
  left: 63px
 
}
 
  #la-une img, #afrique img,#politique img, #entete img, #economie img, #societe img, #sport img, #monde img, #blog img {
    padding: 0px!important;
  }

  #search input{
    float: right;
    position: relative;
    left: 0;
    margin: 0
  }
  #search i{
    float: right;
    position: relative;
    top:9px;
    left: 24px
  
  }
   #search {
    padding: 0;
     left: 15px
  }
  #monde,#afrique{
    padding-left: 0px;
    padding-right: 10px
  }
  #sport{
    padding-right: 8px;
    padding-left: 0px
  }
  #societe, #economie{
    padding-right: 8px
  }
  #economie{
    padding-right: 7px
  }
  #politique{
    padding-left: 0px
  }
  #entete{
    padding: 0
  }
  #social-networks{
    padding: 0
  }
}