/* ==========================================================
   ÉVÉNEMENTS À VENIR
   ========================================================== */

.agenda-card {
  position: relative;

  width: 100%;
  max-width: 380px;

  margin: 0 auto;

  padding: 14px;

  overflow: hidden;

  border:
    1px solid
    rgba(31, 107, 82, 0.14);

  border-radius: 28px;

  background:
    rgba(255, 255, 255, 0.88);

  box-shadow:
    0 24px 55px
    rgba(0, 0, 0, 0.14);
}


.agenda-heading {
  position: relative;

  margin-bottom: 10px;

  padding-right: 92px;

  text-align: left;
}


.agenda-heading small {
  display: block;

  margin-bottom: 3px;

  color: var(--green);

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
}


.agenda-heading h2 {
  margin: 0;

  color: var(--green-dark);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 21px;
}


.agenda-viewport {
  overflow: hidden;

  border-radius: 14px;
}


.agenda-track {
  display: flex;

  width: 100%;

  transition:
    transform
    0.7s ease;
}


.agenda-slide {
  position: relative;

  flex:
    0 0 100%;

  min-width: 100%;
}


.agenda-slide img {
  display: block;

  width: 100%;
  max-height: 560px;

  object-fit: contain;

  border-radius: 12px;

  background: white;
}


.agenda-slide-date {
  position: absolute;

  right: 10px;
  bottom: 10px;

  padding: 7px 10px;

  border-radius: 999px;

  background:
    rgba(18, 63, 43, 0.88);

  color: white;

  font-size: 12px;
  font-weight: 800;

  backdrop-filter:
    blur(6px);
}


.agenda-control {
  position: absolute;

  top: 16px;

  z-index: 3;

  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(31, 107, 82, 0.18);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.92);

  color: var(--green-dark);

  cursor: pointer;

  box-shadow:
    0 5px 16px
    rgba(0, 0, 0, 0.15);

  font-size: 21px;
}


.agenda-control--previous {
  left: auto;
  right: 58px;
}


.agenda-control--next {
  right: 16px;
}


.agenda-control:hover {
  background: white;
}


.agenda-empty {
  padding: 40px 20px;

  text-align: center;

  color: #5e786d;
}


@media (max-width: 980px) {

  .agenda-card {
    max-width: 420px;
  }

}


@media (max-width: 620px) {

  .agenda-card {
    max-width: 100%;

    padding: 12px;

    border-radius: 20px;
  }

  .agenda-slide img {
    max-height: 460px;
  }

  .agenda-control {
    width: 36px;
    height: 36px;
  }

}

/* ==========================================================
   NEWS / BREAKING NEWS
   ========================================================== */

.agenda-wrapper {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.agenda-news {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin:
    0
    0
    8px
    10px;

  padding:
    7px
    12px;

  border-radius: 999px;

  background:
    rgba(140, 20, 30, 0.96);

  color: white;

  box-shadow:
    0 6px 18px
    rgba(120, 20, 30, 0.22);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.agenda-news-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: white;

  animation:
    agenda-news-pulse
    1.2s
    ease-in-out
    infinite;
}

.agenda-news-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;

  animation:
    agenda-news-blink
    1.4s
    ease-in-out
    infinite;
}

.agenda-news-text {
  opacity: 0.9;

  font-size: 10px;
  font-weight: 700;
}

@keyframes agenda-news-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.45;
  }

}

@keyframes agenda-news-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }

}

@media (prefers-reduced-motion: reduce) {

  .agenda-news-dot,
  .agenda-news-label {
    animation: none;
  }

}