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

*, *::before, *::after {
    box-sizing: border-box;
}

/* Section d'accueil : fond crème à gauche, photo à droite */
.fond {
    background-color: #FDF7F0;
    position: relative;
    overflow: hidden;
}

.hero-inner {
    display: flex;
    align-items: center;
    min-height: 21vh;
}

.hero-text {
    flex: 1 1 50%;
    padding: 40px clamp(20px, 5vw, 60px);
}

.hero-image {
    flex: 1 1 50%;
    align-self: stretch;
    position: relative;
    min-height: 160px;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 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: sticky;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: #FDF7F0;
    flex-wrap: wrap;
    row-gap: 8px;
}

/* Changement du fond de la navigation lorsque l'utilisateur défile */
nav.scrolled {
    background-color: #435966;
}

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

/* Texte du logo */
.logo p {
    color: #FDF7F0;
    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;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 0;
}

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

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

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

/* Style des titres */
h1 {
    color: #435966;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 4.2vw, 3rem);
    text-align: left;
    margin: 0;
}

/* Section d'accueil (petit texte sous le logo) */
#accueil {
    color: #435966;
    font-weight: 300;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    text-align: left;
    white-space: normal;
    margin: 0 0 6px;
}

/* Style pour le nom de la société */
#name {
    color: #243B2E;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.4rem);
    text-align: left;
    white-space: normal;
    margin: 0;
    line-height: 1.15;
}

#name::after {
    content: '';
    display: block;
    width: 140px;
    height: 8px;
    background-color: #B5D4B1;
    margin-top: 22px;
}

/* Style des sous-titres (h2) */
h2 {
    background-color: #435966;
    color: #FDF7F0;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    margin: 0;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 6px 6px 0 0;
}

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

h2 a.logo img {
    background-color: #FDF7F0;
    border-radius: 50%;
    padding: 6px;
}

/* 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 */
}

/* Blocs de paragraphes en vert, sous les titres h2 */
.bloc p,
.last-bloc p {
    background-color: #B5D4B1;
    color: #243B2E;
    margin: 0;
    padding: 18px 24px;
}

.bloc p + p,
.last-bloc p + p {
    border-top: 1px solid rgba(36, 59, 46, 0.15);
}

.bloc p:last-of-type,
.last-bloc p:last-of-type {
    border-radius: 0 0 6px 6px;
}

.last-bloc ul {
    background-color: #FDF7F0;
    margin: 0;
    padding: 18px 24px 18px 44px;
    border-radius: 0 0 6px 6px;
}

/* 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 clamp(16px, 6vw, 60px);
}

/* Style du dernier bloc de contenu */
.last-bloc {
    margin: 40px clamp(16px, 6vw, 60px) 60px;
}

/* Telechargement de la fiche de presentation de l'association */
.download-link {
  display: inline-block;
  color: #FDF7F0;
  background-color: #435966;
  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: #243B2E;
}

/* Style général du footer */
footer {
    background-color: #435966; /* Couleur de fond */
    color: #FDF7F0; /* 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: #FDF7F0; /* 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: #FDF7F0; /* 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: #FDF7F0; /* 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: 200; /* Police légère */
    color: #FDF7F0; /* Texte en blanc */
    margin: 2px 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: #FDF7F0; /* 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: 900px) {
    .hero-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-image {
        clip-path: none;
        min-height: 110px;
    }

    .hero-text {
        padding: 30px clamp(16px, 6vw, 40px) 20px;
    }

    #accueil, #name {
        text-align: center;
    }

    #name::after {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    /* Nav qui passe en colonne sur mobile plutôt que de déborder */
    nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .nav-links {
        width: 100%;
        gap: 12px 18px;
        font-size: 0.95rem;
    }

    /* 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 */
        min-width: 0;
        width: 100%;
    }

    h2 {
        padding: 14px 16px;
        gap: 12px;
    }

    .bloc p,
    .last-bloc p,
    .last-bloc ul {
        padding: 14px 16px;
    }

    .last-bloc ul {
        padding-left: 34px;
    }

    .image-container {
        flex-wrap: wrap;
    }

    .image-container img {
        width: 100%;
        max-width: 100%;
    }
}

/* Ajustements pour les très petits écrans */
@media (max-width: 480px) {
    .hero-text {
        padding: 24px 16px 16px;
    }

    .nav-links {
        flex-direction: column;
        gap: 8px;
    }
}