.btn-annonces:hover {
  background: #cf620a;
}

.carte-container {
  background: white;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 28px 30px;
  margin-bottom: 20px;
}

.filtres {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }

    .filtre-btn {
      padding: 8px 20px;
      border: 1.5px solid var(--couleur-bordure);
      border-radius: 20px;
      background: white;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.9em;
      transition: all 0.2s;
    }

    .filtre-btn.actif {
      background: var(--couleur-principale);
      color: white;
      border-color: var(--couleur-principale);
    }

    .grille-annonces {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
       align-items: start;
    }

    .carte-annonce {
      background: white;
      border-radius: var(--rayon);
      box-shadow: var(--ombre);
      overflow: hidden;
    }
.carrousel {
  position: relative;
}

.carrousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 2em;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 4px;
}

.carrousel-btn.gauche { left: 8px; }
.carrousel-btn.droite { right: 8px; }

.carrousel-compteur {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 0.8em;
  padding: 2px 8px;
  border-radius: 10px;
}

.carte-annonce img {
  width: 100%;
  height: 80%;
  object-fit: contain;
}

    .carte-info {
      padding: 16px;
    }

    .carte-info h3 {
      margin: 0 0 6px;
      color: var(--couleur-principale);
      font-size: 1em;
    }

    .carte-prix {
      font-size: 1.2em;
      font-weight: 700;
      color: var(--couleur-accent);
      margin: 8px 0;
    }

    .carte-detail {
      font-size: 0.85em;
      color: var(--couleur-texte-doux);
      margin: 4px 0;
    }

    .badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 20px;
      font-size: 0.75em;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .badge-vehicule {
      background: #e8f0fe;
      color: #1a2e4a;
    }

    .badge-piece {
      background: #fde8d8;
      color: #e8720c;
    }

    @media (max-width: 360px) {
      .filtre-btn {
       display: flex;
        justify-content: space-evenly;
        font-size: 0.8em;
      }
      .carte-container {
        padding: 11px 6px;
      }
    }