/*
 * Dreamolab — Accueil : visuel « pipeline » (shortcode [dreamolab_pipeline])
 * Version : 1.0.0 — 2026-09-22 — extrait du design, rescopé sous .dml-pipeline.
 */
.dml-pipeline {
  --ink: var(--dml-ink, #1a1d3a);
  --parch: var(--dml-parch, #f4ead5);
  --gold: var(--dml-gold, #c8a25a);
  --gold-deep: var(--dml-gold-deep, #a07a3a);
  --char-soft: var(--dml-char-soft, #4a4238);
  position: relative;
}
.dml-pipeline *, .dml-pipeline *::before, .dml-pipeline *::after { box-sizing: border-box; }
.dml-pipeline .method-visual > * { position: absolute; inset: 0; }
.dml-pipeline .method-visual { position: relative; aspect-ratio: 3/4; }
.dml-pipeline .method-visual > * { position: absolute; inset: 0; transition: opacity .5s ease; }
.dml-pipeline .pipeline { display: grid; align-content: center; gap: 0; padding: 18px 8px 18px 34px; }
.dml-pipeline .pl-thread { position: absolute; left: 34px; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(to bottom, transparent, var(--gold) 12%, var(--gold) 88%, transparent); }
.dml-pipeline .pl-thread::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--parch); transform-origin: top; transform: scaleY(1); transition: transform 1.8s cubic-bezier(.3,.6,.2,1) .2s; }
.dml-pipeline .method-visual.in .pl-thread::after { transform: scaleY(0); }
.dml-pipeline .pl-step { position: relative; padding: 0 0 0 30px; margin: 20px 0; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.dml-pipeline .method-visual.in .pl-step { opacity: 1; transform: none; }
.dml-pipeline .method-visual.in .pl-step:nth-child(2) { transition-delay: .3s; }
.dml-pipeline .method-visual.in .pl-step:nth-child(3) { transition-delay: .7s; }
.dml-pipeline .method-visual.in .pl-step:nth-child(4) { transition-delay: 1.1s; }
.dml-pipeline .method-visual.in .pl-step:nth-child(5) { transition-delay: 1.5s; }
.dml-pipeline .pl-dot { position: absolute; left: -4.5px; top: 9px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold); background: var(--parch); }
.dml-pipeline .pl-last .pl-dot { background: var(--gold); box-shadow: 0 0 0 4px rgba(200,162,90,0.18); }
.dml-pipeline .pl-k { font-family: 'Cormorant Garamond', serif; font-size: 24px; line-height: 1.1; color: var(--ink); }
.dml-pipeline .pl-last .pl-k { font-style: italic; color: var(--gold-deep); }
.dml-pipeline .pl-v { font-size: 12.5px; color: var(--char-soft); margin-top: 4px; line-height: 1.5; max-width: 300px; }
@media (max-width: 760px) {
.dml-pipeline .method-visual { aspect-ratio: 4/3; }
.dml-pipeline .pl-k { font-size: 20px; }
}