/* =========================================
   HORIZON — ÉVÉNEMENTS
   Processus de publication
   ========================================= */

.events-process {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  border-top: 1px solid var(--events-line);
  border-left: 1px solid var(--events-line);
}

.events-process__step {
  display: flex;
  flex-direction: column;

  min-height: 330px;
  padding: 24px;

  border-right: 1px solid var(--events-line);
  border-bottom: 1px solid var(--events-line);

  background: rgba(255, 255, 255, 0.72);
}

.events-process__top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.events-process__number {
  color: var(--events-accent);

  font-family: var(--font-title);
  font-size: 1.55rem;
  font-weight: 700;
}

.events-process__state {
  color: rgba(30, 61, 89, 0.42);

  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.events-process__symbol {
  position: relative;

  display: flex;
  align-items: center;

  height: 94px;
}

.events-process__symbol::before {
  content: "";

  width: 100%;
  height: 1px;

  background: var(--events-line);
}

.events-process__symbol span {
  position: absolute;
  left: 0;

  width: 12px;
  height: 12px;

  border: 2px solid var(--events-accent);
  border-radius: 50%;

  background: var(--color-sand);
}

.events-process__step:nth-child(2)
.events-process__symbol span {
  left: 50%;
  transform: translateX(-50%);
}

.events-process__step:nth-child(3)
.events-process__symbol span {
  right: 0;
  left: auto;
}

.events-process__content {
  margin-top: auto;
}

.events-process__content h3 {
  margin: 0 0 10px;

  color: var(--events-ink);

  font-family: var(--font-title);
  font-size: 1.85rem;
  line-height: 1;
}

.events-process__content p {
  max-width: 300px;
  margin: 0;

  color: var(--events-muted);

  font-size: 0.88rem;
  line-height: 1.7;
}

.events-process__note {
  display: grid;
  grid-template-columns:
    150px minmax(0, 1fr);

  gap: 30px;

  padding: 22px 0;
  margin-top: 20px;

  border-top: 1px solid var(--events-line);
  border-bottom: 1px solid var(--events-line);
}

.events-process__note span {
  color: var(--events-accent);

  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.events-process__note p {
  max-width: 720px;
  margin: 0;

  color: var(--events-ink);

  font-family: var(--font-title);
  font-size: 1.2rem;
  line-height: 1.35;
}