body {
    font-family: 'Lexend', Arial, sans-serif; /* Utilisation de Lexend en première option */
    margin: 0;
    padding: 0;
    background-color: #3d0000;

}

header {
    background-color: #ffffff;
    color: #161616;
    text-align: center;
    padding: 1em;
    border-bottom: 1px solid #dddddd; /* Ajout de la bordure inférieure */
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    align-items: center; /* Alignement vertical au centre */}

header img {
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    max-height: 90px; /* Ajustez la hauteur maximale selon vos besoins */
}

nav {
    background-color: #ffffff;
    padding: 0.5em;
    box-shadow: 0px 10px 10px -5px #000000; /* Ajout de l'ombre sous la navigation */
    z-index: 2; /* Z-index plus élevé pour mettre le menu en avant */

}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding: 6px 6px;
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
}

nav li {
    display: inline;
    padding: 14px 14px;
}

nav li:hover  {
    display: inline;
    padding: 14px 14x;
    background-color: #dddddd;
}

nav a {
    text-decoration: none;
    color: #161616;
}


/* Style pour le menu déroulant vertical */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #dddddd;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    left: 0; /* Positionner la liste au même niveau que le lien parent */
    top: 100%; /* Positionner la liste en dessous du lien parent */
}

.image-container {
    position: relative;
}

/* Style pour l'image prenant toute la largeur */
.full-width-image {
    width: 100%;
    height: auto;
    display: block; /* Pour éviter les marges par défaut */
    z-index: -1;
}

/* Style pour le logo superposé */
.logo-overlay {
    position: absolute;
    bottom: -100px; /* Ajustez cette valeur pour positionner le logo par rapport au bas de l'image */
    left: 50%; /* Place le logo au milieu horizontalement */
    transform: translateX(-50%); /* Déplace le logo de moitié de sa largeur vers la gauche pour le centrer */
    z-index: 2; /* Place le cercle en arrière-plan */

}

.logo {
    max-width: 200px; /* Ajustez la largeur du logo selon vos besoins */
    z-index: 1; /* Place le cercle en arrière-plan */

}


.image-container::before {
    content: ''; /* Ajoute un contenu vide au pseudo-élément */
    position: absolute;
    bottom: -95px; /* Ajustez cette valeur pour la distance du cercle par rapport à l'image */
    left: 50%; /* Place le cercle au milieu horizontalement */
    transform: translateX(-50%); /* Déplace le cercle de moitié de sa largeur vers la gauche pour le centrer */
    width: 190px; /* Ajustez la largeur du cercle selon vos besoins */
    height: 190px; /* Ajustez la hauteur du cercle selon vos besoins */
    background-color: white; /* Couleur du cercle */
    border-radius: 50%; /* Rend le cercle arrondi */
    box-shadow: 0 0 25px 20px white; /* Ajoute une lueur autour du cercle */
    z-index: 1; /* Place le cercle en arrière-plan */
}

/* Afficher la liste déroulante lorsqu'elle est ouverte */
.dropdown-content.show {
    display: block;
}

/* Style pour le bouton actif (coloré) */
.active_li {
    border-bottom: 1px solid #9d0609; /* Ajout de la bordure inférieure */
}

.active_a {
    color: #9d0609;
}
.section_1er{
    background-color: #ffffff;
    z-index: 1; /* Met la section en arrière-plan */
    text-align: justify;

}

/* Style pour le conteneur des images */
.image-container {
    display: flex; /* Utilise un affichage flexible pour aligner les images horizontalement */
    justify-content: space-between; /* Distribue l'espace disponible entre les images */
    align-items: center; /* Centre les images verticalement */
}

/* Style pour chaque image avec texte */
.image-with-text {
    text-align: center; /* Centre le texte horizontalement */
    flex: 0 0 calc(30% - 20px); /* Réserve 30% de l'espace disponible pour chaque image */
    margin: 0 10px; /* Ajoute une marge horizontale entre les images */
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
}

/* Style pour chaque image */
.image {
    max-width: 100px; /* Ajustez la largeur du logo selon vos besoins */
    width: 100%; /* Ajuste la largeur de l'image à 100% de son conteneur */
    height: auto; /* Garde les proportions de l'image */
    border-radius: 10px; /* Ajoute un peu de courbure aux coins de l'image */
}

/* Style pour le texte de chaque image */
.image-text {
    margin-top: 10px; /* Ajoute une marge au-dessus du texte */
    font-size: 16px; /* Ajuste la taille du texte selon vos préférences */
    color: #333; /* Couleur du texte */
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
}


section {
    padding: 30px;
    z-index: 1; /* Met la section en arrière-plan */
    text-align: center;
}


/* Style pour les boîtes */
.box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-left: 5%; /* Ajout de la marge à gauche */
    margin-right: 5%; /* Ajout de la marge à droite */

}

.box-container_actu {
    display: flex;
    flex-wrap: wrap;
    margin-left: 7%; /* Ajout de la marge à gauche */
    margin-right: 7%; /* Ajout de la marge à droite */

}

.box {
    flex: 0 0 calc(30% - 20px); /* Choisir la largeur des boîtes (ici 30%) et soustraire la marge */
    border: 1px solid #9d0609;
    border-radius: 5px;
    padding: 5px;
    margin: 20px;
    box-sizing: border-box;
}

.box_actu {
    flex: 0 0 calc(35% - 50px); /* Choisir la largeur des boîtes (ici 30%) et soustraire la marge */
    border: 1px dashed #161616;
    border-radius: 0px;
    padding: 5px;
    margin: 5px;
    box-sizing: border-box;
    text-decoration:none;
    color: #161616;
}

.box_actu:hover {
    flex: 0 0 calc(35% - 50px); /* Choisir la largeur des boîtes (ici 30%) et soustraire la marge */
    border: 1px solid #161616;
    border-radius: 0px;
    padding: 5px;
    margin: 5px;
    box-sizing: border-box;
    background-color: #f6f6f6;
}

.img_actu{
    display: block;
    max-height: 200px; /* Ajustez la hauteur maximale selon vos besoins */
    margin-left: auto;
    margin-right: auto;
}

.s_img_actu{
    border-bottom: 1px solid #dddddd; /* Ajout de la bordure inférieure */
}

/* Utilisation des médias queries pour rendre les boîtes en colonnes sur des écrans plus petits */
@media (max-width: 768px) {
    .box {
        flex: 0 0 calc(100% - 20px); /* Les boîtes occupent la largeur complète */
    }
}

h1{
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
    font-size: 32px; /* Ajustez la taille de l'écriture dans la section selon vos besoins */

}
h2{
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
    font-size: 27px; /* Ajustez la taille de l'écriture dans la section selon vos besoins */


}

h3{
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
    font-size: 20px; /* Ajustez la taille de l'écriture dans la section selon vos besoins */



}

.pma{
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
    font-size: 23px; /* Ajustez la taille de l'écriture dans la section selon vos besoins */
    color: #f6f6f6;
}

p{
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
    font-size: 19px; /* Ajustez la taille de l'écriture dans la section selon vos besoins */
    color: black;

}

.pfooter{
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
    font-size: 19px; /* Ajustez la taille de l'écriture dans la section selon vos besoins */
    color: black;

}

.censure{
    background-color: #161616;
    color: #161616;
}

.btn{
    margin-left: 11.3%; /* Ajout de la marge à gauche */
    margin-right: 11.3%; /* Ajout de la marge à droite */
    max-height: 40px; /* Ajustez la hauteur maximale selon vos besoins */
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;

}

.btna{
    margin-left: 11.3%; /* Ajout de la marge à gauche */
    margin-right: 11.3%; /* Ajout de la marge à droite */
    max-height: 40px; /* Ajustez la hauteur maximale selon vos besoins */
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;

}

.btna:hover{
    transition-duration: 500ms;
    opacity: 70%;
}

.milieux{
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
    color:#9d0609;
}

.milieux:hover{
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
    color:#161616;
}

.mia{
    color:#9d0609;
}

.mia:hover{
    color:#161616;
}

.mnc{
    margin-left: 15%; /* Ajout de la marge à gauche */
    margin-right: 15%; /* Ajout de la marge à droite */}

/* Style pour le pied de page */
footer {
    background-color: #ffffff;
    color: #333;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #9d0609; /* Ajout de la bordure inférieure */
}

footer img {
    max-height: 80px; /* Ajustez la hauteur du logo selon vos besoins */
    margin-left: 9.5%; /* Ajout de la marge à gauche */
}

footer p {
    text-align: right;
    margin-right: 9.5%; /* Ajout de la marge à droite */
}
.footer-text-centre {
    text-align: center;
    margin-left: 9.5%; /* Ajout de la marge à gauche */
    margin-right: 9.5%; /* Ajout de la marge à droite */
}

.footer2 {
    background-color: #333;
    color: white;
    text-align: center;
    
}

footer div{
    border-bottom: 1px solid #dddddd; /* Ajout de la bordure inférieure */

}
/* Media Queries pour les appareils mobiles */

@media only screen and (max-width: 768px) {
    /* Styles spécifiques pour les appareils mobiles avec une largeur maximale de 768 pixels */
  
    body {
      margin-left: 0%; /* Ajuste la marge à gauche pour les petits écrans */
      margin-right: 0%; /* Ajuste la marge à droite pour les petits écrans */
    }
  
    header {
      padding: 0.5em 0; /* Réduis le padding vertical du header pour les petits écrans */
    }
  
    nav ul {
      margin-left: 0; /* Enlève la marge à gauche pour les petits écrans */
      margin-right: 0; /* Enlève la marge à droite pour les petits écrans */
      padding: 0; /* Enlève le padding pour les petits écrans */
    }
  
    nav li {
      display: block; /* Affiche chaque élément de la liste sur une ligne différente pour les petits écrans */
      padding: 10px 0; /* Réduit le padding vertical des éléments de la liste pour les petits écrans */
      text-align: center; /* Centre le texte des éléments de la liste pour les petits écrans */
    }

    nav li:hover  {
        display: block;
        padding: 10x 0;
        background-color: #dddddd;
    }
    
  
    .image-container::before {
      bottom: -80px; /* Ajuste la distance du cercle par rapport à l'image pour les petits écrans */
      width: 150px; /* Ajuste la largeur du cercle pour les petits écrans */
      height: 150px; /* Ajuste la hauteur du cercle pour les petits écrans */
    }

    .section_1er{
        background-color: #ffffff;
        z-index: 1; /* Met la section en arrière-plan */
        
    }

    h1{
        margin-left: 0%; /* Ajout de la marge à gauche */
        margin-right: 0%; /* Ajout de la marge à droite */
        font-size: 32px; /* Ajustez la taille de l'écriture dans la section selon vos besoins */
        text-align: center;
    }
    h2{
        margin-left: 3%; /* Ajout de la marge à gauche */
        margin-right: 3%; /* Ajout de la marge à droite */
        font-size: 27px; /* Ajustez la taille de l'écriture dans la section selon vos besoins */
        text-align: center;
    }
    
    h3{
        margin-left: 9.5%; /* Ajout de la marge à gauche */
        margin-right: 9.5%; /* Ajout de la marge à droite */
        font-size: 18px; /* Ajustez la taille de l'écriture dans la section selon vos besoins */
        text-align: justify;
    }
    
    p{
        margin-left: 3%; /* Ajout de la marge à gauche */
        margin-right: 3%; /* Ajout de la marge à droite */
        font-size: 19px; /* Ajustez la taille de l'écriture dans la section selon vos besoins */
        text-align: justify;
    }
  
    .box_actu {
        flex: 0 0 calc(35% - 10px); /* Choisir la largeur des boîtes (ici 30%) et soustraire la marge */
        border: 1px dashed #161616;
        border-radius: 0px;
        padding: 0px;
        margin: 5px;
        box-sizing: border-box;
        text-decoration:none;
        color: #161616;
    }
    
    .box_actu:hover {
        flex: 0 0 calc(35% - 50px); /* Choisir la largeur des boîtes (ici 30%) et soustraire la marge */
        border: 1px solid #161616;
        border-radius: 0px;
        padding: 5px;
        margin: 5px;
        box-sizing: border-box;
        background-color: #f6f6f6;
    }

    header img {
        max-height: 90px; /* Ajustez la hauteur maximale selon vos besoins */
        display: block; /* Pour que les marges automatiques fonctionnent */
        margin: 0 auto; /* Centre l'image horizontalement en utilisant des marges automatiques */
    }

    .box-container_actu {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0; /* Ajout de la marge à gauche */
        margin-right: 0; /* Ajout de la marge à droite */
        display: block; /* Pour que les marges automatiques fonctionnent */
        margin: 0 auto; /* Centre l'image horizontalement en utilisant des marges automatiques */
    }

    .mnc{
        margin-left: 0%; /* Ajout de la marge à gauche */
        margin-right: 0%; /* Ajout de la marge à droite */
    }

    .box-container {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0; /* Ajout de la marge à gauche */
        margin-right: 0; /* Ajout de la marge à droite */
        display: block; /* Pour que les marges automatiques fonctionnent */
        margin: 0 auto; /* Centre l'image horizontalement en utilisant des marges automatiques */
    }
    
    .box {
        flex: 0 0 calc(30% - 20px); /* Choisir la largeur des boîtes (ici 30%) et soustraire la marge */
        border: 1px solid #9d0609;
        border-radius: 0px;
        padding: 10px;
        margin: -2px;
        box-sizing: border-box;
    }

    footer p {
        text-align: center;
        margin-right: 0; /* Ajout de la marge à droite */
    }
    /* Ajoute d'autres styles spécifiques pour les appareils mobiles ici */
  }

  
  
  /* Media Queries pour les tablettes en mode portrait */
  @media only screen and (max-width: 1024px) and (orientation: portrait) {
    /* Styles spécifiques pour les tablettes en mode portrait avec une largeur maximale de 1024 pixels */
  
    /* Ajoute tes styles spécifiques pour les tablettes en mode portrait ici */
  }
  
  /* Media Queries pour les tablettes en mode paysage */
  @media only screen and (max-width: 1024px) and (orientation: landscape) {
    /* Styles spécifiques pour les tablettes en mode paysage avec une largeur maximale de 1024 pixels */
  
    /* Ajoute tes styles spécifiques pour les tablettes en mode paysage ici */
  }