/* ==========================================================
   Vie professionnelle : le Black Pearl et le rêve d'un bar
   ========================================================== */
.work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.work-visual { position: relative; padding-bottom: 56px; }
.work-visual .horizon { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; box-shadow: var(--shadow); cursor: zoom-in; }
.work-visual .horizon img { width: 100%; height: 100%; object-fit: cover; }
.work-visual .polaroid { position: absolute; left: -14px; bottom: 0; width: 40%; transform: rotate(-5deg); }
.work-visual .note {
  position: absolute; right: 14px; top: 14px;
  padding: 8px 14px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow);
  font-family: var(--f-hand); font-size: 1.5rem; line-height: 1; color: var(--sun);
}

.steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; counter-reset: s; }
.steps li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.steps li::before {
  counter-increment: s; content: counter(s);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--honey); color: #3b2416; font-weight: 700;
}
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: linear-gradient(var(--honey), var(--line)); }
.steps li.future::before { content: "☀"; background: var(--sun); color: #fff8ef; box-shadow: 0 0 0 6px var(--glow); }
.steps b { display: block; font-family: var(--f-display); font-size: 1.12rem; }
.steps span { color: var(--ink-soft); font-size: .96rem; }

@media (max-width: 900px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .work-visual .polaroid { left: 6px; }
}