/*****--**-----*****--|NAV|-*****-----**--*****/
     #navsticky{
          box-shadow: black 14px 14px 0px 0px;
     }

     .bar{
          background-color: black;
     }
/*****--**-----*****--|NAV|-*****-----**--*****/

body{
     background-color:black;
     overflow-x: hidden;
}

#footerlemag{
     display: none!important;
}

/*****--**-----*****--|LE BLOG ACCUEIL|-*****-----**--*****/
     #leblogaccueil{
          font-family: Valizas;
          padding-bottom: 15vh;
     }

     #leblogaccueil h1{
          font-family: BouhC;
          font-size: 15vw;
          width: 50%;
          line-height: 12vw;
          transform: rotate(-12deg);
          padding: 6vw 0 0 5vw;
          margin-top: -1vw;
          color: white;
     }

     #leblogaccueil div{
          display: flex;
          width: 80%;
          max-width: 960px;
          margin: -2vw auto 0 auto;
          align-items: center;
     }

     #leblogaccueil div p{
          padding: 0 0 12px 5vw;
          color: white;
     }

     #leblogaccueil div p span{
          color: #ca608b;
     }

     #leblogaccueil div div{
          flex-direction: column;
     }

     #leblogaccueil div div p{
          padding-left: 0;
          font-size: 42px;
          font-weight: 700;
          color: white;
     }

     #leblogaccueil div div img{
          width: 15vw;
          padding: 3vh 0;
     }
     /*****--**-----*****--|LE BLOG ACCUEIL TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #leblogaccueil h1 {
                    margin-top: 10vw;
                    font-size: 28vw;
                    line-height: 23vw;
                    margin-left: -6vw;
               }

               #leblogaccueil div {
                    margin: -5vw auto 0 auto;
                    flex-direction: column;
               }

               #leblogaccueil div div{
                    flex-direction: row;
               }
          }
     /*****--**-----*****--|LE BLOG ACCUEIL TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|LE BLOG ACCUEIL MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #leblogaccueil h1 {
                    font-size: 28vw;
                    width: 90%;
                    line-height: 23vw;
                    transform: rotate(-12deg);
                    padding: 6vw 0 0 5vw;
                    margin-top: -1vw;
                    color: white;
                    margin-left: -7vw;
               }

               #leblogaccueil div div{
                    flex-direction: column-reverse;
               }

               #leblogaccueil div div img {
                    width: 50vw;
               }

               #leblogaccueil div p{
                    padding:  12px 0;
               }

               #leblogaccueil div div p{
                    font-size: 24px;
                    text-align: center;
                    padding-bottom: 36px;
               }
          }
     /*****--**-----*****--|LE BLOG ACCUEIL MOBILE|-*****-----**--****/

     /*****--**-----*****--|LE BLOG ACCUEIL ANIMATIONS|-*****-----**--****/
     /*****--**-----*****--|LE BLOG ACCUEIL ANIMATIONS|-*****-----**--****/
/*****--**-----*****--|LE BLOG ACCUEIL|-*****-----**--*****/

/*****--**-----*****--|LE BLOG LISTE|-*****-----**--*****/
     #leblogpipelette{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          padding: 0 5vw 10vh 5vw;
     }

     #leblogpipelette .article{
          padding: 36px 0;
     }

     #leblogpipelette .article a{
          text-decoration: none;
     }

     #leblogpipelette .article a img{
          width: 25vw;
          height: auto;
          border: white 2px solid;
          transition: 0.2s;
     }

     #leblogpipelette .article a h3{
          background-color: black;
          padding: 21px;
          font-family: Valizas;
          font-weight: 800;
          color: white;
          font-size: 14px;
          width: 25vw;
          text-align: center;
          border: white 2px solid;
          margin-top: -21px;
          position: relative;
          transition: 0.2s;
     }

     #leblogpipelette .article a:hover img{
          border: #ca608b 16px solid;

     }

     #leblogpipelette .article a:hover h3{
          border: #ca608b 16px solid;
          margin-top: -56px;
          font-size: 2.3vw;
     }
     /*****--**-----*****--|LE BLOG LISTE TABLETTE|-*****-----**--*****/
          @media (max-width: 960px){
               #leblogpipelette{
                    padding: 0 10vw 10vh 10vw;
               }

               #leblogpipelette .article a h3 {
                    width: 33vw;
               }

               #leblogpipelette .article a img {
                    height: auto;
                    width: 33vw;
               }

               #leblogaccueil {
                    padding-bottom: 10vh;
               }
          }
     /*****--**-----*****--|LE BLOG LISTE TABLETTE|-*****-----**--*****/

     /*****--**-----*****--|LE BLOG LISTE MOBILE|-*****-----**--*****/
          @media (max-width: 576px){
               #leblogpipelette{
                    padding: 0 8vw 10vh 8vw;
               }

               #leblogpipelette .article {
                    padding: 16px 0;
               }

               #leblogpipelette .article a img,
               #leblogpipelette .article a h3{
                    width: 84vw;
               }

               #leblogpipelette .article a h3{
                    font-size: 21px;
               }
          }
     /*****--**-----*****--|LE BLOG LISTE MOBILE|-*****-----**--****/

/*****--**-----*****--|LE BLOG LISTE|-*****-----**--*****/