/* Style global du corps de la page */
body {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    color: #242424;
    margin: 0;
}

/* Style de l'image de fond de la section d'accueil */
.fond {
    background-image: url('images/fond.webp');
    background-size: cover;
    background-position: center;
    height: 50vh;
    position: relative;
    overflow: hidden;
    object-fit: cover;
    object-position: 30% 10%;
}

/* Navigation principale (barre de navigation en haut de page) */
nav {
    background-color: rgba(41, 95, 74, 0.7);
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: #DDFBEA;
}

/* Changement du fond de la navigation lorsque l'utilisateur défile */
nav.scrolled {
    background-color: rgba(41, 95, 74, 1);
}

/* Style du logo dans la barre de navigation */
.logo {
    text-align: center;
    margin: 0px;
}

/* Texte du logo */
.logo p {
    color: white;
    margin: 0px;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
}

/* Style des liens dans la barre de navigation */
.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-links a {
    color: #DDFBEA;
    text-decoration: none;
}

/* Effet au survol des liens de navigation */
.nav-links-items:hover {
    color: white;
    font-weight: 400;
}

/* Style des éléments actifs dans la navigation */
.nav-links-items.active {
    font-weight: bold;
}

/* Style des titres */
h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centre précisément l'élément */
    color: white;
    font-family: 'Lato', sans-serif;
    font-weight: 300; /* Lato Light */
    font-size: 6vw; /* Utilisation de vw pour une taille responsive */
    text-align: center;
}

/* Section d'accueil (petit texte sous le logo) */
#accueil {
    position: absolute;
    top: 40%; /* Ajuster la position verticale */
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-family: 'Lato', sans-serif;
    font-weight: 300; /* Lato Light */
    font-size: 5vw; /* Utilisation de vw pour une taille responsive */
    text-align: center;
    white-space: nowrap; /* Empêche le texte de se diviser sur plusieurs lignes */
    margin: 0;
}

/* Style pour le nom de la société */
#name {
    position: absolute;
    top: 55%; /* Ajuster la position verticale */
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 6vw; /* Utilisation de vw pour une taille responsive */
    text-align: center;
    white-space: nowrap; /* Empêche le texte de se diviser sur plusieurs lignes */
    margin: 0;
}

/* Style des sous-titres (h2) */
h2 {
    color: #295F4A;
    font-family: 'Lato', sans-serif;
    font-weight: 300; /* Lato Light */
    font-size: 24pt;
    margin-top: 10px;
}

/* Style des liens dans les titres h2 */
h2 a {
    text-decoration: none;
}

/* Style des titres de troisième niveau (h3) */
h3 {
    color: #508E68;
}

/* Style global pour les paragraphes */
p {
    font-size: 13pt;
    line-height: 1.5; /* Espacement entre les lignes */
    margin-top: 12px; /* Marge en haut du paragraphe */
}

/* Style pour les listes à puces */
li {
    font-size: 13pt;
    line-height: 1.5; /* Espacement entre les lignes */
    margin-top: 12px; /* Marge en haut du paragraphe */
}

/* Style global des liens */
a {
    color: black;
}

/* Style des liens au survol */
a:hover {
    font-weight: bold; /* Met le texte en gras */
}

.image-container {
    display: flex;
    justify-content: left; /* Centre les images horizontalement */
    gap: 10px; /* Espace entre les images, ajustable */
}

.image-container img {
    width: 45%; /* Ajustez la taille pour que les deux images prennent environ la moitié de la largeur totale */
    max-width: 300px; /* Optionnel : limite la largeur maximale */
    height: auto; /* Conserve le ratio d'aspect */
}

/* Style spécifique des paragraphes forts (strong) */
.strong {
    color: black;
    font-size: 19pt;
    line-height: 1.4;
    margin-top: 20px;
}

/* Style des sections principales du contenu */
.bloc {
    margin: 40px 60px;
}

/* Style du dernier bloc de contenu */
.last-bloc {
    margin: 40px 60px 60px;
}

/* Telechargement de la fiche de presentation de l'association */
.download-link {
  display: inline-block;
  color: #ffffff;
  background-color: rgba(41, 95, 74, 1);
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s ease;
  margin-left: 15px;
}

.download-link:hover {
  background-color: #333333;
}

/* Style général du footer */
footer {
    background-color: rgba(41, 95, 74, 1); /* Couleur de fond */
    color: #DDFBEA; /* Couleur du texte */
    padding: 20px 20px 10px; /* Espacement global */
    font-family: 'Lato', sans-serif; /* Police Lato pour tout le texte */
}

/* Conteneur principal des sections du footer */
.footer-content {
    display: flex;
    justify-content: space-between; /* Espace égale entre les sections */
    align-items: stretch; /* Aligne toutes les sections pour qu'elles aient la même hauteur */
    max-width: 1200px; /* Limite la largeur totale du footer */
    margin: 0 auto; /* Centre le footer horizontalement */
}

/* Style des sections individuelles dans le footer */
.footer-section {
    flex: 1; /* Chaque section prend exactement 1 part égale de l'espace disponible */
    margin: 0 20px; /* Ajoute un espace entre les sections */
    min-width: 250px; /* Largeur minimale des sections */
    text-align: center; /* Centre le texte à l'intérieur des sections */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

/* Style des titres dans le footer */
.footer-section h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 400; /* Lato normal */
    color: #DDFBEA; /* Couleur blanche */
    margin: 0 0 10px; /* Élimine les marges verticales entre les titres et paragraphes */
}

/* Style des paragraphes dans le footer */
.footer-section p {
    font-family: 'Lato', sans-serif;
    font-weight: 300; /* Police légère pour le texte */
    color: #DDFBEA; /* Texte en blanc */
    margin: 0 0 10px; /* Élimine les marges verticales entre les titres et paragraphes */
    line-height: 1.6; /* Améliore la lisibilité */
}

/* Style des liens dans le footer */
.footer-section a {
    font-family: 'Lato', sans-serif;
    font-weight: 300; /* Police légère pour les liens */
    color: #DDFBEA; /* Liens en blanc */
    text-decoration: underline; /* Liens soulignés */
    transition: color 0.3s ease; /* Transition pour changement de couleur */
}

.footer-section a:hover {
    color: white; /* Couleur blanche au survol */
    font-weight: 400;
}

/* Style pour le bas du footer */
.footer-bottom {
    text-align: center; /* Texte centré */
}

.footer-bottom p {
    font-family: 'Lato', sans-serif;
    font-weight: 300; /* Police légère */
    color: #DDFBEA; /* Texte en blanc */
    margin: 5px 0; /* Petites marges entre les paragraphes */
}

.footer-bottom a {
    font-family: 'Lato', sans-serif;
    font-weight: 300; /* Police légère pour les liens */
    color: #DDFBEA; /* Liens en blanc */
    text-decoration: underline; /* Liens soulignés */
    transition: color 0.3s ease; /* Transition pour changement de couleur */
}

.footer-bottom a:hover {
    color: white; /* Couleur blanche au survol */
    font-weight: 400;
}

/* Responsivité : ajustements pour petits écrans */
@media (max-width: 768px) {
    /* Réorganisation des sections du footer pour petits écrans */
    .footer-content {
        flex-direction: column; /* Les sections s'empilent en colonne */
        align-items: center; /* Centre les éléments sur petits écrans */
    }

    .footer-section {
        margin-bottom: 20px; /* Ajoute une marge sous chaque section */
    }

    #accueil {
        font-size: 4vw; /* Réduction de la taille pour les petits écrans */
    }

    #name {
        font-size: 6vw; /* Réduction de la taille pour les petits écrans */
    }

    h1 {
        font-size: 8vw; /* Taille de police légèrement plus petite pour les petits écrans */
    }
}

/* Ajustements pour les très petits écrans */
@media (max-width: 480px) {
    #accueil {
        font-size: 5vw;
    }

    #name {
        font-size: 7vw;
    }

    h1 {
        font-size: 10vw; /* Réduction supplémentaire pour les très petits écrans */
    }
}