<style>
.listings a.listing {
    text-decoration: none;
    color: inherit;
    display: block;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s;
}
.listings a.listing:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.listings .thumb img {
    width: 100%;
    max-height: 120px;      /* limite la hauteur de l'image */
    object-fit: cover;      /* recadre l'image si nécessaire */
    border-radius: 6px;
    display: block;
}
</style>

<section class="featured-section">
  <h2><?= trad('My posts'); ?></h2>
  <div class="listings">
    <?php foreach($_SESSION['mesannonces'] as $annonce){ ?>
      <a href="index.php?p=details&ref=<?= urlencode($annonce['ref']) ?>" class="listing">
        <div class="thumb">
          <?php if(!empty($annonce['photo'])): ?>
            <img src="<?= htmlspecialchars($annonce['photo']) ?>" alt="<?= htmlspecialchars($annonce['titre']) ?>">
          <?php else: ?>
            <img src="uploads/default.png" alt="">
          <?php endif; ?>
        </div>
        <div style="margin-top:8px;font-weight:700"><?= htmlspecialchars($annonce['titre']) ?></div>
        <div><?= htmlspecialchars($annonce['description']) ?></div>
        <div class="meta">
          <div class="price"><?= htmlspecialchars($annonce['prix']) ?> <?= $_SESSION['devise'] ?></div>
          <div><?= htmlspecialchars($annonce['ville']) ?></div>
          <div>
              <?php if ($a['statut'] == 1): ?>
                  <span class="badge bg-success"><?= trad('Online'); ?></span>
                <?php else: ?>
                  <span class="badge bg-secondary"><?= trad('Waiting'); ?></span>
                <?php endif; ?>
          </div>
        </div>
      </a>
    <?php } ?>
  </div>
</section>
