@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
body{
    background-color: rgb(254, 254, 255);
    color: white;
	background-attachment: fixed;
    font-family: 'Lato', sans-serif;
    background-size: cover;
	background-repeat: no-repeat;
	justify-content: center;
	align-items: center;
	height: 100vh;
}


.footer_body {
    color: rgb(201, 201, 201);
    height: 20px;
    margin: 0;
    bottom: 0;
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 05px;
}
.footer_body_webmaster{
    color: rgb(201, 201, 201);
    height: 20px;
    margin:550px;
    bottom: -550px;
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 6px;
}

/*botton NEW LIEN*/
.nav-link1{
    color: rgb(255, 255, 255);    /*  menu accueil ...*/
    text-align: center;
    margin: auto;
    
}
   .nav-link1{
            animation-duration: .5s;
            animation-name: clignoter;
            animation-iteration-count: infinite;
            transition: none;
           
        }
        
 
.nav-link1:hover {
     color:rgba(2, 5, 2, 0.7) ;          /*  menu accueil ...*/
 }
 




/* barre de menu */


                                                                                           
.bg-body-tertiary {
    background-color: rgb(4, 15, 177)  !important;    /*  menu accueil ...*/
 }
 
 .navbar-brand{      
      color: rgb(255, 255, 255);            /*  menu accueil ...*/
 }
 .nav-link{
    color: rgb(255, 255, 255);    /*  menu accueil ...*/
}
 
.nav-link:hover {
     color:rgb(6, 245, 38, .7) ;          /*  menu accueil ...*/
 }
 
 .navbar-brand:hover {
     color:rgb(120, 247, 1, .7) ;            /*  menu accueil ...*/
 }

 /*profil*/

 .profil__avatar{
    width: 100px;
    height: 130px;
    background-color: #054a4a;
    border-radius: 10px;

 }


 /* TOPIC*/

 .topic__body{
    background-color: rgb(3, 82, 94);
    margin: 20px 0;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.6);
}

.topic__body__h1{
    margin-bottom: 0px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);


}
.topic__body__contenu{
    margin: 20px 0px;
}
.topic__footer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: .8rem;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.4);
}

.topic__footer__cat{
    background-color: #3d93bb;
    color: white;
    border-radius: 20px;
    padding: 0 10px;

}
.topic__body__action__btn{
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 4px;
    align-items: center;  

}
.topic__action__btn{
    background: rgb(2, 56, 65);
    color: white;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 0;
    padding: 10px;
    border-radius: 15px;
    font-size: .8rem;
    text-decoration: none;
    box-shadow: 8px 8px 14px rgba(0, 0, 0, 0.6);
    transition: all .5s ease;
}
.topic__action__btn:hover{
    transition: all .05s ease;
    color: white;
    box-shadow: none;

} 
.topic__action__btn:focus{
    transition: all .05s ease;
    color: white;
    box-shadow: none;
} 

.topic__action__btn i {
    margin-right: 5px;
   

}

.topic__action__btn i.btn__trash{
   background: rgb(248, 3, 3);
   display: flex;
   justify-content: center;
   align-items: center;
   width: 25px;
   height: 25px;
   border-radius: 50px;
}

.topic__action__btn i.btn__edit{
    background: rgb(42, 143, 72);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50px;
 }
 
 .topic__action__btn i.btn__send{
    background: rgb(85, 83, 235);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50px;
 }


.topic__body__zone__commentaire{
    margin: 20px 0 0 0;
}

.topic__zone__commentaire__erreur{
background-color: #ed0606;
border-radius: 08px;
padding: 0 08px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.topic__com__textarea{
    display: block;
    width: 100%;
    min-height: 150px; 
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #0c0404;
    background-color: rgb(3, 82, 94) !important; 
    color: white;
    outline: none;
    background-color: rgb(3, 82, 94)!important;
    background-clip: padding-box;
    border: 1px solid #020202;
    box-shadow: 8px 8px 14px rgba(0, 0, 0, 0.6);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 10px;
    
      
}
.topic__com__textarea::placeholder{
    color: rgba(250, 250, 250, .6);

}

.topic__com__footer__btn{
    display: flex;
    align-items: center;
    justify-content: flex-end;

}
.topic__commentaire__body{
    background-color: rgb(2, 67, 77);
    margin: 10px 0;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.6);

}
.topic__commentaire__title{
    margin-bottom: 0px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);

}

/*liste des topic*/

.list__topic__link{
    color: white;
    text-decoration: none;

}
.list__topic__link:hover, .list__topic__link:focus{
    color: white;

}

.list__topic__body{
    background-color: rgb(3, 115, 132);
    margin: 10px 0;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.6);

}
.list__topic__h1{
    margin-bottom: 0px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);

}
.liste__topic__sujet{
    background-color: rgb(2, 67, 77);
    border-radius: 6px;
    margin-top: 20px;
    padding: 10px;

}
.list__topic__footer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: .8rem;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.4);
    

}

/*/////////////////////////////////////////////////////////*/

/* Forum liste des catégorie */

.forum__body{
    background-color: rgb(4, 96, 110);
    margin: 10px 0;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.6);

}

.forum__h1{
    margin-bottom: 0px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);

}
.list__cat__forum{
    background-color: rgb(2, 67, 77);
    margin: 10px 0;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.6);
   
   

}
.list__link___forum{
    color: white;
    text-decoration: none;

}
.list__link__forum:hover, .list__link__forum:focus{
    color: white;

}
.list__footer__forum{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 1rem;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.4);
   
  

}
.forum__body__btn{
    display: flex;
    margin: 20px 0;


}
.forum__btn__create{
    background: rgb(2, 56, 65);
    color: white;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 0;
    padding: 15px;
    border-radius: 15px;
    font-size: .8rem;
    text-decoration: none;
    box-shadow: 8px 8px 14px rgba(0, 0, 0, 0.6);
    transition: all .5s ease;
}
.forum__btn__create:hover{
    transition: all .05s ease;
    color: white;
    box-shadow: none;

} 
.forum__btn__create:focus{
    transition: all .05s ease;
    color: white;
    box-shadow: none;
} 
.forum__btn__create i {
    margin-right: 5px;
   

}
.forum__btn__create i.btn__create{
   background: rgb(35, 111, 3);
   display: flex;
   justify-content: center;
   align-items: center;
   width: 25px;
   height: 25px;
   border-radius: 50px;
}

.acceuil_p{
    /*background-color: #027aaa;*/
    margin: 77px 70px;

}

.body_para{
    background-image: url('../public/image/kp2.jpeg');
    background-size: cover;
    background-position: center;

}

.accueil_texte{
    color: rgb(255, 255, 255);
    margin: 70px 70px;
    font-size: 20px; /* Taille en pixels */
    text-shadow: 0 0 10px transparent, 0 1.9px 12px rgb(0 0 0 / 100%);
}
strong {
    background: rgb(255, 1, 1);
    font-weight: bolder;
    
    
}
.h1-var{
    color: rgb(8, 22, 209);
    margin: 20px 40px;
    text-shadow: 0 0 10px transparent, 0 1.9px 12px rgb(0 0 0 / 100%);
}

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

.annonce {
  margin: 40px 200px;
}

.btn {
    list-style-type: none;
    margin-bottom: 1px;
}

.btn a {
    color: #ffffff;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 20px;
}

.btn img {
    margin-right:11px;
    border-radius: 30px;
}
h1 {
    color: #030cb9de; /* Couleur du texte */
    text-align: center; /* Alignement du texte */
    position: relative; /* Position relative pour les ombres */
    font-size: 2em; /* Taille de la police */
    margin: 0; /* Supprimer les marges */
    padding: 0.5em; /* Espacement interne */
    text-shadow: 0 0 10px transparent, 0 1.9px 12px rgba(0, 0, 0, 0.5); /* Ombre 3D */
}

h1::before {
    content: ''; /* Contenu vide pour pseudo-élément */
    position: absolute; /* Position absolue */
    top: 0; /* Position en haut */
    left: 0; /* Position à gauche */
    width: 100%; /* Largeur pleine */
    height: 100%; /* Hauteur pleine */
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%); /* Dégradé pour l'effet 3D */
    z-index: -1; /* Envoyer derrière le texte principal */
    transform: perspective(100px) rotateX(15deg); /* Effet 3D */
}