blog.css

@import'header.css';
@import'footer.css';
@import url('https://fonts.googleapis.com/css2?family=Inter&family=Nunito:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&family=Nunito+Sans:ital,opsz,wght@1,6..12,700&display=swap');
/*style du body*/
:root{
    /* les couleurs global du site */
    --backrgound-body:#FFFFFF;
    --color-paragraphe-blanc:#FFFFFF;
    --color-paragraphe-noir: #000000;
    --input-texte-color:rgba(0, 0, 0, 0.5);
    --couleur-titre: #E35F0F;
    --background-section-1-accueil: #27348B;
    --btn-background-color: #E35F0F;
    --paragraphe-color:#000000;
    --footer-background-color:#3B3B3B;
    --police-titre-size:font-size: 48px;
}

body {
    margin: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
  }

  /*background image du header*/
  .background-image_header {
    background:rgba(0,0,0,0.6)url('./images/blog_img_background.png'); 
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 800px;
    top: -1px;
    background-blend-mode: darken;
  }
  /* le titre du header*/
  .titre-container{
    display: inline-block;
    justify-content: center;
    align-items: center;
  }
  .titre-container h1 {
    font-family: Nunito;
    font-size: 64px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0em;
    text-align: center;
    margin-top: 300px;
    width: 70%;
    height: 81.49px;
    position: absolute;
    left: 50%; 
   transform: translateX(-50%);
    color: #E35F0F;
    
  }
  .titre-container p{
    color: #FFF;
text-align: center;
font-family: Arial;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 51px; /* 159.375% */
text-transform: capitalize;
    margin-top: 400px;
    margin-left: 270px;
    width: 65%;
    position: absolute;
  }
 
  .articles_contenaire{
    margin-top: 50px;
    margin-left: 135px;


  }

  .ligne_vertical{
    width: 4px;
    height: 48.01px;
    background: #999;
    margin-right: 25px;
  }
  .date_et_titre{
    display: flex;
  }
  .date{
    margin-right: 20px;
  }
  .date p{
    color: #E35F0F;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 83.333% */
    text-transform: uppercase;
    margin-top: -0px;


  }
  .date span{

    color: #000;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
    text-transform: uppercase;
  }
  .titre h2{
    color: #000;
    font-family: Nunito;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 62.5% */
    text-transform: uppercase;
  }

  .titre p{
    color: #999;

    font-family: Nunito;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    text-transform: uppercase;
  }
  .titre{
    margin-top: -30px;
  }

  /* code de la div image_article_reseaux */

  .image_article_reseaux:first-child, .image_article_reseaux2:first-child{
    width: 546px;
    height: 286px;
    flex-shrink: 0;
    margin-left: 12px;
  }
  .image_article_reseaux, .image_article_reseaux2{
    display: flex;
    flex-direction: row;

  }
  .reseaux{
    width: 256px;
    margin-top: 5%;

    margin-left: 450px;
  }
  .social{
    margin-top: 35%;
    margin-left: 25%;
  }

  .message,.message2{
    display: flex;
    width: 93%;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
  }
  .message p,.message2 p{
    color: #060606;
    text-align: justify;
    font-family: Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 202.99%; /* 40.598px */
    text-transform: capitalize;
  }
  .titre2 h2{
    color: #000;
    font-family: Arial;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 62.5% */
    text-transform: capitalize;
  }
  .titre2 p{
    color: #000;
    font-family: Arial;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 62.5% */
    text-transform: capitalize;
  }
  .titre2 span{
    color: #000;
    font-family: Arial;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    text-transform: capitalize;
  }
  .voir_plus{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 246px;
    height: 54px;
    flex-shrink: 0;
    margin-top: 40px;
    margin-left: 595px;
    margin-bottom: 10%;
    margin-right: 725px;
    border-radius: 10px;
    background: #E35F0F;
 }
 .voir_plus a{
    color: #FFF;
    text-align: justify;
    font-family: Arial;
    text-decoration: none;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 46px; 
    text-transform: capitalize;
 }



/* Media query pour les tablettes  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .background-image_header {
    height: 400px;
  }
  .titre-container{
    display: none;
  }
  
  .titre h2, .titre2 h2, .titre2 span{ 
  font-size: 24px;
}

.message p{
  font-size: 16px;
}
.titre2 h2{
  margin-left: -15%;
}
.titre2 p{
  font-size: 20px;
  margin-left: -15%;
}

.image-competence{
  width: 340px;
  height: 229px;
}
.image_article_reseaux2{
  display: flex;
  justify-content: end;
  margin: 2%;
}
.message2{
  display: flex;
  justify-content: start;
  max-width: 70%;
  margin-top: -260px;
}
.message2 p{
  font-size: 16px;
  width: 80%;
  margin-left: -17%;
}
.voir_plus{
  width: 159px;
  height: 41px;
  margin-left: 370px;

}
.voir_plus a{
 
  font-size: 15px;
  
}
}



/* Media query pour les tablettes  */
@media only screen and (min-width: 0px) and (max-width: 767px){
  .background-image_header {
    height: 300px;
  }
  .titre-container{
    display: none;
  }
  .articles_contenaire{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .image_article_reseaux,
.message {
  width: 100%;
  text-align: center;
}

.image_article_reseaux img {
  width: 90%;
  height: auto;
}

.date_et_titre,
.image_article_reseaux,
.message {
  margin-bottom: 0; /* Ajoutez une marge entre les éléments pour plus de clarté */
}

  .reseaux{
    display: none;
  }
  
  .titre h2, .titre2 h2, .titre2 span{ 
    font-size: 16px;
    display: flex;
    justify-content: center;
   align-items: center;
   width: 100%;
  }
  .titre2 p{
    font-size: 12px;
    margin-left:0 ;
  }
  .message{
   
    justify-content: center;
    max-width: 100%;
    margin-left: 0;
  }
  
  .message p{
    font-size: 12px;
    width: 70%;
  }
 
  .image_article_reseaux, .image_article_reseaux2{
    flex-direction: column;
    align-items: center;
  }
  .message2{
   
    justify-content: center;
    max-width: 100%;
    margin-left: 0;
  }
  .message2 p{
    font-size: 12px;
    width: 70%;
  }
  
  .date_et_titre,
  .image_article_reseaux2,
  .message2 {
    width: 100%;
    text-align: center; /* Centrer le contenu horizontalement */
  }
  .image_article_reseaux2,.image_article_reseaux{
    margin-left: -25%;
  }
  
  .image_article_reseaux2 img {
    width: 90%; /* Assurez-vous que l'image prend toute la largeur disponible */
    height: auto; /* Permet à la hauteur de s'ajuster automatiquement pour conserver les proportions de l'image */
  }
  
  .voir_plus{
    width: 150px;
    height: 41px;
   margin-left: 35%;
  
  
  }
  .voir_plus a{
   
    font-size: 12px;
    
  }
 
}