.eevt-empty { color: #8a8a8a; }

/* === Carrousel (accueil) === */
.eevt-carousel { position: relative; }
.eevt-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.eevt-carousel-track::-webkit-scrollbar { display: none; }
.eevt-carousel-item { flex: 0 0 100%; scroll-snap-align: start; }
.eevt-carousel-item .eevt-card { height: 100%; }

/* Flèches posées sur l'image elle-même, en bas à droite, plutôt que sous
   le carrousel — .eevt-card-media porte le point d'ancrage (position:
   relative), donc ça reste juste même si la carte n'est pas un lien
   (événement sans bouton "En savoir plus"). */
.eevt-card-media { position: relative; }
.eevt-carousel-nav {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.eevt-carousel-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  color: #17171a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: background-color .2s, color .2s;
}
.eevt-carousel-btn:hover { background: #de8733; color: #fff; }

/* .eevt-img-gradient, pas une simple classe isolée : .eevt-card-img
   définit aussi son propre `background` plus bas dans ce fichier — même
   spécificité, donc l'ordre du fichier déciderait au lieu du bon
   dégradé. Sélecteur combiné pour trancher dans tous les cas. */
.eevt-card-img.eevt-img-gradient {
  background: linear-gradient(135deg, #f6b339 0%, #de8733 50%, #c47420 100%) !important;
}

/* === Liste === */
.eevt-list { max-width: 1100px; margin: 0 auto; }
.eevt-section-title { font-size: 20px; font-weight: 700; margin: 48px 0 20px; color: #17171a; }
.eevt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eevt-grid--past { opacity: .72; }
@media (max-width: 900px) { .eevt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .eevt-grid { grid-template-columns: 1fr; } }

.eevt-card {
  background: #fff;
  border: 1px solid #ece6db;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(44,26,14,.07);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.eevt-card:not(.eevt-card--static):hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(44,26,14,.14); }
.eevt-card-link { display: block; }
.eevt-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #eee; }
.eevt-card-body { padding: 16px 18px 20px; }
.eevt-card-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #c47420;
  margin-bottom: 8px;
}
.eevt-card-date svg { flex-shrink: 0; }
.eevt-card-title { display: block; font-weight: 700; font-size: 16px; color: #17171a !important; margin-bottom: 4px; }
.eevt-card-title:hover { color: #de8733 !important; }
.eevt-card-location { font-size: 12.5px; color: #8a8a8a; margin-bottom: 14px; }
.eevt-card-btn {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  color: #c47420 !important;
  border: 1px solid #de8733;
  border-radius: 100px;
  padding: 7px 16px;
}
.eevt-card-btn:hover { background: #de8733; color: #fff !important; }