@charset "utf-8";
/* Conteneur principal des annonces */

.contenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* on passe à 20px pour plus de respirations entre les cartes */
    margin: 20px auto;
    max-width: 1400px; /* un peu plus large si besoin */
    padding: 10px;
}

/* Style pour chaque carte d'annonce */

    /*width: calc(33% - 6px); /* Chaque annonce occupe 1/3 de la largeur, moins l'espace entre elles */
    


.carte {
    background-color: #f9f9f9;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    max-width: 600px; /* ✅ la carte peut aller jusqu’à 600px */
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
	align-items: center; /* Centre les éléments horizontalement */
}


/* Réduction des espaces entre les paragraphes */
.carte p {
    font-size: 0.9em; /* Taille du texte (ajustez si nécessaire) */
    line-height: 1.2; /* Hauteur de ligne réduite */
    margin: 5px 0; /* Espace minimal entre les paragraphes */
    padding: 0; /* Aucun padding interne */
}

/* Réduction des espaces autour des titres */
.carte h3 {
    font-size: 1.2em; /* Taille du titre (ajustez si nécessaire) */
    line-height: 1.2; /* Hauteur de ligne réduite */
    margin: 10px 0; /* Espace minimal autour du titre */
    padding: 0; /* Aucun padding interne */
}

/* Réduction des espaces autour des images */

   /* max-width: 100%; /* L'image ne dépasse jamais la largeur de la carte */
   /* height: auto; /* La hauteur s'adapte automatiquement */
   /* margin: 5px auto; /* Espace réduit autour de l'image */
    
    

carte img {
    width: 100%; /* ✅ prend toute la largeur disponible de la carte */
    height: auto; /* conserve les proportions */
    max-height: 500px; /* limite verticale si besoin */
    object-fit: contain; /* ne déforme pas l'image */
    margin: 10px 0;
    display: block;
    border-radius: 4px;
}




/* Réduction des espaces autour du bouton */
.btn-details {
    display: block; /* Le bouton devient un bloc pour être centré */
    margin: 5px auto 10px; /* Centrage horizontal et espace réduit en bas */
    padding: 8px 15px; /* Padding interne du bouton */
    background-color: #28a745; /* Couleur verte */
    color: white; /* Texte blanc */
    text-decoration: none; /* Supprime le soulignement */
    border-radius: 4px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Effet de transition fluide */
    text-align: center; /* Centre le texte à l'intérieur du bouton */
}

/* Responsive design : sur écrans plus petits, afficher les annonces en 2 colonnes */
@media (max-width: 768px) {
    .carte {
        width: calc(50% - 6px); /* Chaque annonce occupe 1/2 de la largeur */
    }
}

/* Responsive design : sur écrans très petits, afficher les annonces en 1 colonne */
@media (max-width: 480px) {
    .carte {
        width: 100%; /* Une seule annonce par ligne */
    }
}

/* Style pour les images dans les annonces */
.carte img {
    max-width: 100%; /* L'image ne dépasse jamais la largeur de la carte */
    height: auto; /* La hauteur s'adapte automatiquement pour conserver les proportions */
    margin: 10px auto; /* Centrage vertical et horizontal */
    display: block; /* Permet de centrer l'image avec `margin: auto` */
    border-radius: 4px; /* Coins arrondis pour l'image */
}

/* Style pour le bouton "Voir les détails" */
.btn-details {
    display: block; /* Le bouton devient un bloc pour être centré */
    margin: 10px auto 15px; /* Centrage horizontal et espace en bas */
    padding: 8px 15px; /* Padding interne du bouton */
    background-color: #28a745; /* Couleur verte */
    color: white; /* Texte blanc */
    text-decoration: none; /* Supprime le soulignement */
    border-radius: 4px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Effet de transition fluide */
    text-align: center; /* Centre le texte à l'intérieur du bouton */
}

/* Hover effect pour le bouton */
.btn-details:hover {
    background-color: #218838; /* Couleur plus foncée au survol */
}