/* ============================================================
   FileScanner — faisceau de scan + pipeline épinglé (accueil)
   Sans JS : faisceau caché, pipeline affiché à l'état final.
   ============================================================ */

/* Héros plus large sur grand écran (le reste du site garde --maxw) */
.hero .wrap { max-width: 1560px; padding: 0 clamp(16px, 3vw, 56px); }

/* ── Faisceau du héros (seul transform/opacity animés) ── */
.scan-beam {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 140px; /* trait lumineux à 120 px, halo dessous : un seul dégradé, ni ombre ni bordure (coût GPU) */
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    transparent 0, rgba(34, 211, 238, 0.07) 60%, rgba(34, 211, 238, 0.24) 84.5%,
    var(--accent-bright) 84.5%, var(--accent-bright) 86%,
    rgba(34, 211, 238, 0.3) 86%, transparent 100%);
  will-change: transform, opacity;
}

/* ============================================================
   PIPELINE
   ============================================================ */
.pipeline { position: relative; padding: 96px 0; }
.pipe-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.pipe-head { text-align: left; margin: 0 0 34px; }

/* Fiche du fichier analysé */
.pipe-file {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: var(--bg-glass);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--shadow-md);
}
.pipe-doc { width: 104px; flex: none; overflow: visible; }
.pipe-doc .doc-outline { stroke: var(--accent-deep); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pipe-doc .doc-lines line { stroke: var(--ink-3); stroke-width: 3; stroke-linecap: round; opacity: 0.45; }
.pipe-doc .doc-beam { fill: var(--accent-bright); opacity: 0; filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.9)); }
.is-live .pipe-doc .doc-beam { opacity: 1; }
.is-final .pipe-doc .doc-lines line { stroke: var(--bad); opacity: 0.5; transition: stroke var(--t-lg), opacity var(--t-lg); }

.pipe-meta { display: grid; gap: 6px; min-width: 0; }
.pipe-name { font-size: 1rem; font-weight: 600; color: var(--ink-1); overflow-wrap: anywhere; }
.pipe-stage { font-size: 0.78rem; color: var(--ink-accent); letter-spacing: 0.02em; }
.pipe-gauge { position: relative; width: 64px; height: 64px; margin: 6px 0 2px; }
.pipe-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pipe-gauge circle { fill: none; stroke-width: 5; }
.pipe-gauge .g-track { stroke: var(--accent-dim); }
.pipe-gauge .g-fill { stroke: var(--bad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 2; }
.pipe-gauge span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.95rem; font-weight: 600; color: var(--ink-1);
}
.pipe-verdict { font-size: 0.8rem; color: var(--bad); }
.is-live .pipe-verdict { opacity: 0; transform: translateY(6px); transition: opacity var(--t-lg) var(--ease), transform var(--t-lg) var(--ease); }
.is-live.is-final .pipe-verdict { opacity: 1; transform: none; }

/* Rail + étapes */
.pipe-track { position: relative; min-width: 0; }
.pipe-rail {
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 18px; height: calc(100% - 28px);
  overflow: visible;
}
.pipe-rail line { stroke-width: 1.2; } /* viewBox étiré : ~2 px à l'écran */
.pipe-rail .rail-bg { stroke: var(--border-med); }
.pipe-rail .rail-fg { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.7)); }

.pipe-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pipe-step {
  position: relative;
  padding: 12px 16px 12px 44px;
  border-radius: var(--r-md);
  transition: opacity var(--t-lg) var(--ease), background-color var(--t-lg) var(--ease);
}
.pipe-step::before { /* pastille sur le rail */
  content: "";
  position: absolute;
  left: 3px; top: 19px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--accent);
  transition: transform var(--t-lg) var(--ease), background-color var(--t-lg) var(--ease);
}
.pipe-step h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--ink-1); }
.pipe-step p { margin-top: 3px; font-size: 0.93rem; font-weight: 300; color: var(--ink-2); }

.is-live .pipe-step { opacity: 0.45; }
.is-live .pipe-step.is-done { opacity: 0.72; }
.is-live .pipe-step.is-done::before { background: var(--accent); }
.is-live .pipe-step.is-on { opacity: 1; background: rgba(255, 255, 255, 0.6); box-shadow: var(--shadow-sm); }
.is-live .pipe-step.is-on::before { background: var(--accent-bright); transform: scale(1.35); box-shadow: 0 0 0 5px var(--accent-soft); }
.is-live.is-final .pipe-step.is-on::before { background: var(--bad); border-color: var(--bad); box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.15); }

/* Bureau : la section épinglée occupe l'écran */
@media (min-width: 761px) {
  .pipeline { min-height: 100vh; display: flex; align-items: center; padding: 96px 0 56px; }
  .pipeline > .wrap { max-width: 1480px; padding: 0 clamp(16px, 3vw, 56px); }
}
/* Grand écran : on occupe la hauteur épinglée */
@media (min-width: 1200px) and (min-height: 820px) {
  .pipe-steps { gap: 12px; }
  .pipe-step { padding: 16px 20px 16px 50px; }
  .pipe-step::before { top: 24px; }
  .pipe-step h3 { font-size: 1.3rem; }
  .pipe-step p { font-size: 1.02rem; }
  .pipe-file { padding: 30px 32px; gap: 32px; }
  .pipe-doc { width: 128px; }
  .pipe-name { font-size: 1.15rem; }
  .pipe-gauge { width: 78px; height: 78px; }
}

/* Mobile : une colonne, la fiche du fichier reste collée en haut pendant la lecture des étapes */
@media (max-width: 760px) {
  .pipe-grid { grid-template-columns: 1fr; gap: 26px; }
  .pipe-head { margin-bottom: 22px; }
  .pipe-side { display: contents; }
  .pipe-file {
    position: sticky; top: 70px; z-index: 3;
    gap: 16px; padding: 14px 16px;
    background: rgba(246, 250, 251, 0.92);
  }
  .pipe-doc { width: 46px; }
  .pipe-gauge { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 50px; height: 50px; margin: 0; }
  .pipe-meta { padding-right: 58px; }
  .pipe-verdict { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-beam { display: none; }
}