/* =========================================
   HORIZON — MUSÉE
   Origines + chronologie
   ========================================= */

.museum-section {
  padding: 96px 0;
}

.museum-section--soft {
  border-top: 1px solid var(--museum-line);
  border-bottom: 1px solid var(--museum-line);

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

.museum-heading {
  display: grid;

  grid-template-columns:
    76px minmax(0, 1fr);

  gap: 22px;

  max-width: 970px;
  margin-bottom: 44px;
}

.museum-heading__room {
  padding-top: 6px;

  color: rgba(30, 61, 89, 0.45);

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

.museum-heading h2 {
  max-width: 800px;

  margin: 7px 0 10px;

  color: var(--museum-ink);

  font-size: var(--hz-title-section);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.museum-heading p {
  max-width: 760px;
  margin: 0;

  color: var(--museum-muted);

  line-height: 1.72;
}

.museum-origin__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(280px, 0.6fr);

  gap: 70px;
  align-items: start;
}

.museum-origin__story {
  max-width: 720px;
}

.museum-origin__story p {
  margin: 0 0 18px;

  color: var(--museum-muted);

  line-height: 1.82;
}

.museum-origin__story
.museum-dropcap {
  color: var(--museum-ink);

  font-family: var(--font-title);
  font-size: 1.55rem;
  line-height: 1.45;
}

.museum-dropcap::first-letter {
  float: left;

  margin: 0.05em 0.12em 0 0;

  color: var(--museum-accent);

  font-family: var(--font-title);
  font-size: 4rem;
  line-height: 0.75;
}

.museum-quote {
  margin: 0;
  padding: 24px 0;

  border-top: 2px solid var(--museum-accent);
  border-bottom: 1px solid var(--museum-line);
}

.museum-quote span {
  color: var(--museum-muted);

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

.museum-quote p {
  margin: 34px 0 0;

  color: var(--museum-ink);

  font-family: var(--font-title);
  font-size: 2.1rem;
  line-height: 1.16;
}

.museum-bridge {
  display: grid;

  grid-template-columns:
    1fr 120px 1fr;

  gap: 20px;
  align-items: center;

  margin-top: 60px;
}

.museum-bridge article {
  display: grid;

  grid-template-columns: 46px 1fr;

  gap: 18px;
}

.museum-bridge article > span {
  color: var(--museum-accent);

  font-size: 0.69rem;
  font-weight: 900;
}

.museum-bridge strong {
  color: var(--museum-ink);

  font-size: 1.1rem;
}

.museum-bridge p {
  margin: 5px 0 0;

  color: var(--museum-muted);

  font-size: 0.82rem;
  line-height: 1.6;
}

.museum-bridge__line {
  height: 1px;

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

.museum-bridge__line span {
  display: block;

  width: 9px;
  height: 9px;
  margin: -4px auto 0;

  border-radius: 50%;

  background: var(--museum-accent);
}

/* Chronologie */

.museum-timeline {
  border-top: 1px solid var(--museum-line);
}

.museum-timeline article {
  display: grid;

  grid-template-columns:
    80px minmax(0, 1fr);

  gap: 25px;

  padding: 28px 0;

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

.museum-timeline__index {
  color: var(--museum-accent);

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

.museum-timeline small {
  color: rgba(30, 61, 89, 0.45);

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

.museum-timeline h3 {
  margin: 4px 0 8px;

  color: var(--museum-ink);

  font-family: var(--font-title);
  font-size: 1.75rem;
}

.museum-timeline p {
  max-width: 690px;
  margin: 0;

  color: var(--museum-muted);

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