body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #eaf7f2;
}

header {
    background-color: #36a58f;
    color: white;
    padding: 20px;
    border-radius: 0 0 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Arial';
    font-size: 2em;
    margin: 0;
    color: white;
}

nav {
    background-color: #36a58f;
    text-align: center;
    border-radius: 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav li {
    margin: 0 15px;
}

nav a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #f8fdfc;
}


section {
    padding: 40px;
    text-align: center;
    border-radius: 20px;
    background-color: #fff;
    margin: 20px auto;
}

#accueil {
    text-align: center;
    padding: 60px 20px;
    background-color: #f8fdfc; /* Couleur de fond similaire aux autres pages */
    color: #2c3e50; /* Couleur de texte principale */
}

#accueil-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

#accueil-content img {
    width: 40%;
    margin-right: 20px;
    border-radius: 8px; /* Coins arrondis pour l'image */
}

.texte-accueil {
    flex: 1;
    text-align: left;
}

.texte-accueil h2 {
    color: #36a58f; /* Couleur du titre */
}

.texte-accueil p {
    line-height: 1.6; /* Espacement des lignes pour une meilleure lisibilité */
}

/* Styles pour la page Fonctionnement */
#fonctionnement {
    background-color: #fff;
}

.fonctionnement-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
    padding: 40px;
}

.fonctionnement-content h2 {
    color: #36a58f;
}

.fonctionnement-content p {
    line-height: 1.6;
    margin-bottom: 20px;
}

.fonctionnement-content ol {
    list-style-type: decimal;
    margin-left: 20px;
    margin-bottom: 20px;
}

.fonctionnement-content ol li {
    margin-bottom: 10px;
}

.fonctionnement-images {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    max-width: 75%; /* La largeur maximale est maintenant relative à la taille du conteneur parent */
    height: auto; /* Permet de conserver les proportions originales de l'image */
    margin: 0 auto; 
    border-radius: 8px; /* Coins arrondis pour les images */
}

.fonctionnement-images img {
    width: 48%;
}


#accueil {
    background-color: #f8fdfc;
}

.accueil-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
    padding: 40px;
}

.accueil-content h2 {
    color: #36a58f;
}

.accueil-content p {
    line-height: 1.6;
    margin-bottom: 20px;
}

.accueil-images {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.accueil-images img {
    width: 48%;
}

/* Styles pour la page Fonctionnement */
#fonctionnement {
    background-color: #fff;
}

.fonctionnement-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
    padding: 40px;
}

.fonctionnement-content h2 {
    color: #36a58f;
}

.fonctionnement-content p {
    line-height: 1.6;
    margin-bottom: 20px;
}

.fonctionnement-content ol {
    list-style-type: decimal;
    margin-left: 20px;
    margin-bottom: 20px;
}

.fonctionnement-content ol li {
    margin-bottom: 10px;
}

.fonctionnement-images {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.fonctionnement-images img {
    width: 48%;
}

#origine {
    background-color: #f8fdfc;
    text-align: center;
    padding: 40px;
}

#origine h2 {
    color: #36a58f;
    margin-bottom: 30px;
}

.annonces-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.annonce {
    max-width: 250px;
    margin: 20px;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.annonce img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
}

.annonce h3 {
    color: #36a58f;
    margin-bottom: 10px;
}

.annonce p {
    line-height: 1.6;
}

#contact {
    background-color: #f8fdfc;
    padding: 40px;
    text-align: center;
}

#contact-form {
    max-width: 600px;
    margin: 0 auto;
}

#contact-form label {
    display: block;
    margin-bottom: 5px;
    color: #36a58f;
}

#contact-form input,
#contact-form textarea,
#contact-form button {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    box-sizing: border-box;
}

#contact-form button {
    background-color: #36a58f;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

/* Ajout de styles pour le changement de thème */
#theme-switch {
    text-align: center;
    margin: 20px 0;
}

#theme-switch button {
    background-color: #36a58f;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
}

.dark-theme {
    background-color: #2c3e50;
    color: white;
}

#echange {
    background-color: #f8fdfc;
    padding: 40px;
    text-align: center;
}

#deposer-annonce {
    max-width: 600px;
    margin: 0 auto;
}

#annonce-form label {
    display: block;
    margin-bottom: 5px;
    color: #36a58f;
}

#annonce-form input,
#annonce-form textarea,
#annonce-form select,
#annonce-form button {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    box-sizing: border-box;
}

#annonce-form button {
    background-color: #36a58f;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

#annonces-existantes {
    margin-top: 40px;
}

#connexion {
    text-align: center;
    padding: 60px 20px;
    background-color: #f8fdfc; /* Couleur de fond similaire aux autres pages */
    color: #2c3e50; /* Couleur de texte principale */
}

#login-form {
    max-width: 400px;
    margin: 0 auto;
    background-color: #fff; /* Couleur de fond du formulaire */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

#login-form label {
    display: block;
    margin-bottom: 10px;
    color: #36a58f; /* Couleur du texte des étiquettes */
}

#login-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 1px solid #ddd; /* Bordure légère */
    border-radius: 5px;
}

#login-form button {
    background-color: #36a58f;
    color: white;
    border: none;
    padding: 12px;
    cursor: pointer;
    border-radius: 5px;
}

#login-form button:hover {
    background-color: #36a58f;
}

#login-form p {
    margin-top: 20px;
}

#login-form a {
    color: #36a58f; /* Couleur du lien d'inscription */
}

#login-form a:hover {
    text-decoration: underline;
}

#inscription {
    text-align: center;
    padding: 60px 20px;
    background-color: #f8fdfc; /* Couleur de fond similaire aux autres pages */
    color: #2c3e50; /* Couleur de texte principale */
}

#register-form {
    max-width: 400px;
    margin: 0 auto;
    background-color: #fff; /* Couleur de fond du formulaire */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

#register-form label {
    display: block;
    margin-bottom: 10px;
    color: #36a58f; /* Couleur du texte des étiquettes */
}

#register-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 1px solid #ddd; /* Bordure légère */
    border-radius: 5px;
}

#register-form button {
    background-color: #36a58f;
    color: white;
    border: none;
    padding: 12px;
    cursor: pointer;
    border-radius: 5px;
}

#register-form button:hover {
    background-color: #36a58f;
}

#register-form p {
    margin-top: 20px;
}

#register-form a {
    color: #36a58f; /* Couleur du lien de connexion */
}

#register-form a:hover {
    text-decoration: underline;
}