/* bleu foncé : #162578
bleu clair : #004d88
orange : #ff6400
blanc : #ffffff */

:root {
  --bg-firstColor: #162578;
  --bg-secondColor: #004d88;
  --bg-importantText: #ff6400;
}

.popupInfo-container {
  position: relative;
  color: #ffffff;
}

.popupInfo-header {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin: 0 5px 0 40px;
}

.popupInfo-header button {
  background: none;
  border: none;
  outline: none;

  font-size: xx-large;
}

.popupInfo-header button:hover {
  color: rgba(0, 0, 0, 0.2);
}

.popupInfo-title {
  position: relative;
  display: inline-block;

  padding: 0.8rem 2.5rem;

  font-weight: bolder;
  font-size: 3.2rem;
  font-weight: 900;
  z-index: 2;
}

.popupInfo-title::before {
  content: "";
  position: absolute;

  margin-top: 5px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  transform: skewY(-2deg);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  background: linear-gradient(
    90deg,
    var(--bg-firstColor) 0%,
    var(--bg-secondColor) 70%
  );
  z-index: -2;
}

.popupInfo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: 4rem 5rem;
  gap: 2rem;

  font-size: 1.8rem;

  background: linear-gradient(
    90deg,
    var(--bg-firstColor) 0%,
    var(--bg-secondColor) 80%
  );
}

.popupInfo-bodyDate {
  font-weight: 500;
  padding-inline: 1.5rem;
  background-color: var(--bg-importantText);
}

.popupInfo-body .popupInfo-redirectionButton {
  all: unset;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 1rem 5rem;

  background-color: var(--bg-importantText);
  border: 1px solid white;
  border-radius: 16px;

  transition: transform 0.3s ease-in-out, background-color 0.3s ease;
}

.popupInfo-body .popupInfo-redirectionButton:hover {
  cursor: pointer;
  transform: scale(1.05);
  background-color: color-mix(in srgb, var(--bg-importantText) 85%, black 15%);
}