body{
  background-image: url('../media/bg.png') ;
  background-repeat: repeat;
  background-attachment: fixed !important;
  background-size: 100%;
  text-align: justify;
}
.forum-page {
  margin: 0 5%; /* Utiliser des pourcentages pour des marges responsives */
}

.title {
  color: #c89a58;
  font-size: 2rem; /* Utiliser des unités relatives */
  font-weight: 700;
  line-height: 1.5; /* Utiliser un line-height relatif */
  text-align: left;
}
.title2 {
  text-align: center; /* Pour centrer le titre */
  font-size: 44px; /* Ajuste la taille selon ta préférence */
  color: #c89a58;
  margin-top: 60px;
}
.p1 {
  margin-top: 50px;
  margin-bottom: 1rem;
  font-size: 1.22rem;
}
.logos {
  display: flex;
  justify-content: center;
  gap: 500px; /* Espace entre les logos */
}

.image-logo {
  width: 250px;
  height: auto;
}
:root{
  margin: 0 50px 0 50px ; 
  
  
}
element.style {
  padding: 50px;
}
.navbar{
  margin: 0 -50px 0 -50px ; 
  padding: 0 20px 0 20px ;
}

button{
  background-color: white;
  padding: 5px 20px 5px 20px;
  border-radius: 50px;
  border: 1px solid rgba(200, 154, 88, 1);
  margin-left: 15px;
}

form {
  position: relative;
  background-image: url('../media/pop-des.png');
  background-repeat: no-repeat;
  background-position: right center; 
  background-size: contain; 
  
}

#anav{
  
  text-decoration: none;
  color: rgba(200, 154, 88, 1)
}

.act{
  background-color:rgba(200, 154, 88, 1) ;
  color : white;
  
}
.aclink{
  color : white;
}

.themes-list li {
  font-size: 20px; /* Taille du texte ajustée pour les éléments de la liste */
  margin-bottom: 20px; /* Espace entre les paragraphes */
  margin: 20px 30px;
  

}
.themes-list {
  background-color: rgba(200, 154, 88, 0.6); /* Couleur de fond avec 50% d'opacité */
  display: inline-block;
}

.themes-list strong {
  font-size: 22px; /* Taille légèrement plus grande pour les mots en gras */
  
}


footer{
  background-color: rgba(239, 240, 242, 1); 
  margin: 0 -60px 0 -60px ; 
}
a{
  text-decoration: none;
}
.link{
  color : black ;
}
.link2{
  color:rgba(200, 154, 88, 1) ;
  font-size: 20px;
 
}
.link:hover{
  color:rgba(200, 154, 88, 1) ;
  font-size: 20px;
}


@media (max-width: 480px) { 
  .logos {
    gap: 50px; 
  }

  .image-logo {
    width: 100px;
  }
}


@media (max-width:999px){
  
  :root{
    margin: 0 10px 0 10px;
    font-size: medium;
  }
  .footer{
    background-color: rgba(239, 240, 242, 1);
    margin: 0;
  }
  button{
    margin-top: 10px;
    border: 0;
  }
}

button {
  padding: 5px 20px 5px 20px;  border-radius: 50px;
  border: solid rgba(200, 154, 88, 1);
  margin-left: 15px;
}

a {
  text-decoration: none;
  color: rgb(0, 0, 0);
}

.act {
  background-color: rgba(200, 154, 88, 1);
  color: white;
}

.aclink {
  color: white;
}

h1,
h2 {
  color: rgba(200, 154, 88, 1);
}

#th {
  color: white;
  background-color: rgba(200, 154, 88, 1);
  text-align: center;
  padding: 5px 0;
  margin-top: 10px;
}

#td {
  border: solid 1px rgba(200, 154, 88, 1);
  margin-top: 15px;
  padding: 5px;
}

/* footer .navbar{
  background-color: rgb(239, 240, 242, 1);
} */

.background-image {
  position: relative;
  height: 60vh; 
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

.objectives .col-xl-3 {
  padding: 2%; /* Utiliser des pourcentages */
  font-size: 1rem; /* Unité relative */
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  margin-top: 40px;
}

.objectives .col-xl-3 .column {
  border: 1px solid #c89a58;
  border-radius: 10px;
  padding: 50px;
  position: relative;
  height: 100%;
}

.objectives .col-xl-3 .column .image-container {
  position: absolute;
  top: -35px;
  left: 50%; /* Centrer horizontalement */
  transform: translateX(-50%) rotate(0.13turn); /* Centrer et tourner */
  background-color: #c89a58;
  padding: 10px;
}

.floating-image {
  width: 50px;
  height: auto;
  transform: rotate(-0.13turn);
}

.objectives .col-xl-3 .col-title {
  font-size: 1.25rem; /* Unité relative */
  line-height: 1.2;
  margin-top: 20px;
}

.focus p {
  border: 1px solid #c89a58;
  padding: 40px 5%; /* Padding responsif */
  font-size: 1.5rem; /* Unité relative */
  font-weight: 500;
  line-height: 1.5;
  text-align: justify;
}

.public-cible .description {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}

.public-cible ul li {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: justify;
}

.public-cible ul li span {
  font-weight: 400;
}
.forum {
  display: flex; /* Utiliser flexbox pour aligner le contenu */
  justify-content: center; /* Centrer horizontalement */
  flex-wrap: wrap; /* Permet aux images de passer à la ligne si l'espace est insuffisant */
  text-align: center; /* Centre le texte si besoin */
}

.forum img {
  max-width: 100%; 
  height: auto; 
  margin: 10px; 

/* Responsive styles */
@media (max-width: 768px) {
  .forum img {
    width: 80%; 
  }
}

@media (max-width: 480px) {
  .forum img {
    width: 100%; 
  }
}
a {
  text-decoration: none;
  color: #000;
  transition: color 0.3s;
}

a:hover {
  color: #000;
}

a:active {
  color: #c89a58;
}



@media (max-width: 768px) {
  .forum-page {
    margin: 0 2%; /* Réduire les marges pour les petits écrans */
  }

  .title {
    font-size: 2.4rem; /* Réduire la taille du titre */
  }

  button {
    padding: 5px 10px; /* Réduire le padding */
  }

  .objectives .col-xl-3 {
    padding: 10px; /* Ajuster le padding */
  }

  .focus p,
  .public-cible .description,
  .public-cible ul li {
    font-size: 1rem; /* Ajuster la taille de police */
  }
}
  .Contact{
    width: 90%;
    background-color:rgba(200, 154, 88, 1)  ;
    color: white;

  }
  textarea{
    width:100%;
    border: solid 1px rgba(200, 154, 88, 1)  ;
  }
  
}