<div class="pa">
   
   <h1 class="titre_pa">
                              Bienvenue sur Forum !                       
   </h1>
   
   <div class="content_pa">
                                                   
      <div class="concept">
                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt nulla a ex elementum dignissim eu at risus. Quisque convallis, libero et condimentum rutrum, elit orci egestas felis, eu molestie nisi ex vitae sapien. Nulla aliquam commodo dui, sed lacinia tortor dapibus in. Nunc eget pharetra tellus. Ut leo felis, scelerisque sit amet metus id, scelerisque consectetur turpis. Aliquam ultrices tristique elit fringilla accumsan. Nunc id ligula massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt nulla a ex elementum dignissim eu at risus. Quisque convallis, libero et condimentum rutrum, elit orci egestas felis, eu molestie nisi ex vitae sapien.                     
      </div>
                                                   
      <div class="liens_pa">
                                                      
         <ul>
                                                         
            <li>
                                       <a href="...">Règlement</a>                       
            </li>
                                                         
            <li>
                                       <a href="...">Recrutement</a>                       
            </li>
                                                         
            <li>
                                       <a href="...">Commandes</a>                       
            </li>
                                                         
            <li>
                                       <a href="...">Tutoriels</a>                       
            </li>
                                                         
            <li>
                                       <a href="...">Partenariat</a>                       
            </li>
                                                         
            <li>
                                       <a href="...">Discord</a>                       
            </li>
                                                         
         </ul>
                                                      
      </div>
                                                   
      <div class="pa_droite">
                                                      
         <div class="staff">
                                                         
            <div class="vavastaff">
                                       <img src="https://image.noelshack.com/fichiers/2019/17/4/1556225741-avatarstaff.png" />                       
               <div class="infostaff">
                                          <span>Pseudo</span>                 
                  <div class="fonction">
                                       Fonction                 
                  </div>
                                  <a href="...">Profil</a>                       
               </div>
                                                            
            </div>
                                                         
            <div class="vavastaff">
                                       <img src="https://image.noelshack.com/fichiers/2019/17/4/1556225741-avatarstaff.png" />                       
               <div class="infostaff">
                                          <span>Pseudo</span>                 
                  <div class="fonction">
                                       Fonction                 
                  </div>
                                  <a href="...">Profil </a>                     
               </div>
                                                            
            </div>
                                         
            <div class="vavastaff">
                                       <img src="https://image.noelshack.com/fichiers/2019/17/4/1556225741-avatarstaff.png" />                       
               <div class="infostaff">
                                          <span>Pseudo</span>                 
                  <div class="fonction">
                                       Fonction                 
                  </div>
                                  <a href="...">Profil </a>                     
               </div>
                                                            
            </div>
                                                               
         </div>
                                                      
         <div class="news_pa">
                                                         
            <div class="titre_new">
                                       Nouveautés                       
            </div>
                                                         
            <div class="contenu_news">
                                       <span class="date_pa">XX.XX.XX :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non mattis felis. Vestibulum ante mauris, dignissim quis pellentesque eget, tincidunt non tortor.<br /><span class="date_pa">XX.XX.XX :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non mattis felis. Vestibulum ante mauris, dignissim quis pellentesque eget, tincidunt non tortor.<br /><span class="date_pa">XX.XX.XX :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non mattis felis. Vestibulum ante mauris, dignissim quis pellentesque eget, tincidunt non tortor.                         
            </div>
                                                         
         </div>
                                                    
      </div>
      
   </div>
</div>

/* --------------------- PAGE D'ACCUEIL PAR AADELRUN ---------------------- */

.pa {
  width:942px;
}

.pa a {
  text-decoration:none;
}

.titre_pa {
  font-size:30px;
  color:white;
  width:922px;
  padding:10px;
  background-color:#B46181;
  text-transform:uppercase;
  margin-bottom:0px;
}

.content_pa {
  background-color:#F7ECEC;
  padding:5px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  font-size:13px;
}

.concept {
  width:310px;
  height:177px;
  text-align:justify;
  overflow:auto;
  padding:5px;
}

.liens_pa ul {
  margin : 0;
  padding : 0;
  list-style : none;
}

.liens_pa {
  margin:auto;
  text-align:center;
}

.liens_pa li {
  width:200px;
}

.liens_pa li a {
  font-family:Roboto, sans-serif;
  text-transform: uppercase;
  color:#333333 !important;
  background-color:#CEADBE;
  font-size:14px;
  padding:3px;
  display : block;
}

.liens_pa li a:hover {
  background-color:#5C3F4D;
  color:white !important;
}

.liens_pa li + li {
  margin-top : 7px;
}

.staff {
  display:flex;
  flex-wrap:nowrap;
  justify-content: space-between;
}

.pa_droite {
 width:42%;
}
.vavastaff {
  width:125px;
  height:55px;
}

.infostaff {
  transition: 0.5s linear;
  padding:3px;
  background-color:rgba(0,0,0,0.6);
  opacity:0;
  text-align:center;
  color:white;
  margin-top:-55px;
  line-height:16px;
}

.infostaff a {
  color:white!important;
}

.infostaff span {
  font-weight:bold;
}
 
.vavastaff:hover .infostaff {
  opacity: 0.9; transition:0.5s linear;
}

.fonction {
  background-color:#E7C0C1;
  color:#333;
  width:100%;
}

.news_pa {
  width:260px;
  height:122px;
  display:flex;
  margin-top:5px;
}

.contenu_news {
  text-align:justify;
  overflow:auto;
  padding-left:5px;
  padding-right:5px;
  margin-right:-65px;
}

.titre_new {
  transform:rotate(90deg);
  font-weight:bold;
  font-size:16px;
  color:#B46181;
  text-transform:uppercase;
  margin-left:-170px;
  letter-spacing:2px;
}

.date_pa {
  color:#B46181;
  font-weight:bold;
}