/* --- Section --- */
.section-actualites {
  width: 100%;
  padding: 60px 90px;
  background: #27ae60; /* vert */
  font-family: "Avenir", sans-serif;
  overflow-x: hidden;
}

/* --- Header --- */
.actualites-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.actualites-header .dot {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.actualites-header h2 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #0b0b28;
}

/* --- Cartes container --- */
.actualites-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;             /* ✅ horizontal par défaut */
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  width: 100%;
  padding-bottom: 10px;
}

/* --- Style scrollbar (optionnel) --- */
.actualites-cards::-webkit-scrollbar {
  height: 8px;
}
.actualites-cards::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

/* --- Carte --- */
.section-actualites .card {
  flex: 0 0 auto;
  width: 300px;                  /* ✅ largeur fixe desktop */
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.section-actualites .card img {
  width: 100%;
  height: auto;                  /* ✅ image conserve son ratio */
  object-fit: contain;
  display: block;
}

/* --- Footer --- */
.section-actualites .card-footer {
  width: 100%;
  background: #ffdd00;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.section-actualites .card-footer:hover {
  background: #e6c700;
}

.section-actualites .card-footer .title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: bold;
  color: #000;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .section-actualites .card {
    width: 250px; /* ✅ réduit sur tablette */
  }
}

@media (max-width: 768px) {
  .actualites-cards {
    flex-wrap: wrap;        /* ✅ plus en scroll horizontal */
    justify-content: center;
  }
  .section-actualites .card {
    flex: 1 1 calc(50% - 20px); /* ✅ 2 cartes par ligne */
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .section-actualites .card {
    flex: 1 1 100%;  /* ✅ une carte par ligne */
    width: 100%;
  }
}