.logs-hero{min-height:88vh;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--color-bg);}
.logs-hero__grid{position:absolute;inset:0;background-image:linear-gradient(var(--color-divider) 1px,transparent 1px),linear-gradient(90deg,var(--color-divider) 1px,transparent 1px);background-size:60px 60px;opacity:0.2;pointer-events:none;}
.logs-hero__radial{position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 75% 40%,oklch(from var(--color-primary) l c h / 0.10) 0%,transparent 60%);pointer-events:none;}
.flow-step{display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--space-6);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);}
.flow-step__num{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--color-primary-highlight);border:2px solid var(--color-primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);color:var(--color-primary);flex-shrink:0;}
.flow-connector{width:2px;height:var(--space-4);background:var(--color-primary);opacity:0.4;margin-left:calc(1.25rem - 1px);}
@media (max-width: 768px) {
  #processus > .container > div {
    display: flex !important;
    flex-direction: column !important; 
  }
  #processus > .container > div > div:first-child {
    order: 1; 
  }
  #processus > .container > div > div:last-child {
    order: 2; 
    width: 100%; 
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
}