/* ============================================================
   S03 — DESIGN (slides 14–16)
   Styles spécifiques au pipeline d'optimisation et aux
   mini-figures PCA / ADMIXTURE / local ancestry.
   Dépend des variables définies dans main.css.
   ============================================================ */

/* ── Couleurs des boîtes du pipeline ─────────────────────── */
.pipeline-box--navy   { background: var(--navy); }
.pipeline-box--teal   { background: var(--teal); }
.pipeline-box--purple { background: var(--purple); }
.pipeline-box--coral  { background: var(--coral); }

/* ── Typographie interne des boîtes (slide 15) ───────────── */
.design-pipeline-step {
  font-size: 42px;
  font-weight: 700;
  color: rgba(255, 255, 255, .18);
  font-family: Georgia, serif;
  line-height: 1;
  margin-bottom: clamp(5px, 1vh, 14px);
}

.design-pipeline-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .2);
  margin: 8px 0;
}

.design-pipeline-title {
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 26px);
  margin-bottom: clamp(5px, 1vh, 14px);
}

.design-pipeline-copy {
  font-size: clamp(15px, 1.7vw, 24px);
  line-height: 1.5;
}

.design-pipeline-copy--soft { opacity: .8; }
.design-pipeline-copy--mid  { opacity: .85; }

.design-pipeline-note {
  background: #F3F0FF;
  border: 1px solid #C4B5FD;
  border-radius: 6px;
  padding: clamp(12px, 1.8vh, 28px) 16px;
  font-size: clamp(16px, 1.8vw, 26px);
  color: var(--purple);
}

/* ── Mini-figures PCA / ADMIXTURE / local ancestry (slide 16) */
.design-body {
  font-size: 15px;
  margin-bottom: 10px;
}

.design-figure {
  border-radius: 6px;
  margin-bottom: 10px;
}

.design-figure--teal   { background: #F0FDFA; padding: 8px; }
.design-figure--purple { background: #FAF5FF; padding: 8px 10px; }
.design-figure--coral  { background: #FFF5F5; padding: 10px 12px; }

.design-figure-svg {
  width: 100%;
  display: block;
}

.design-figure-caption {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 2px;
}

.design-warning {
  font-size: 14px;
  color: var(--orange);
  font-style: italic;
}

.design-body--tight { margin-bottom: 5px; }

.design-note { font-size: clamp(16px, 1.8vw, 26px); font-style: italic; }

.design-note--teal   { color: var(--teal); }
.design-note--purple { color: var(--purple); }
.design-note--amber  { color: var(--amber); }

/* ── Animation pipeline SNP → WGS (slide 15) ────────────────
   Chaque .pipeline-box et .pipeline-arrow commence invisible
   (opacity: 0) et apparaît via la classe .shown ajoutée
   séquentiellement par animatePipeline() dans app.js.
   L'attribut data-delay sur chaque élément contrôle le délai
   (multiplié par 130ms dans animatePipeline). */
.pipeline-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: clamp(10px, 1.8vh, 22px);
}

.pipeline-box {
  flex: 1;
  border-radius: 10px;
  padding: clamp(16px, 2.5vh, 36px) clamp(10px, 1.5vw, 18px);
  text-align: center;
  color: white;
  position: relative;
  opacity: 0;                                        /* Invisible par défaut */
  transform: translateY(20px);                       /* Léger décalage vers le bas */
  transition: opacity .5s ease, transform .5s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pipeline-box.shown { opacity: 1; transform: none; } /* État visible */

.pipeline-arrow {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .4s ease;
  align-self: center;
}

.pipeline-arrow.shown { opacity: 1; }
.pipeline-arrow svg   { width: 28px; height: 28px; }

/* ── Entonnoir d'optimisation (slide 16) ─────────────────── */
.funnel-layout {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: 10px;
}

/* ── Responsive ──────────────────────────────────────────── */

/* Tablette (601–900px) : pipeline en 2 rangées 3+2 */
@media (max-width: 900px) and (min-width: 601px) {
  .pipeline-flow { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .pipeline-box  { flex: 1 1 calc(31% - 4px); min-width: 0; }
  .pipeline-arrow { display: none; }
}

@media (max-width: 600px) {
  /* Pipeline horizontal → vertical */
  .pipeline-flow  { flex-direction: column; }
  /* Flèche orientée vers le bas */
  .pipeline-arrow { transform: rotate(90deg); width: 100%; height: 28px; }

  /* Entonnoir : SVG au-dessus, étapes en dessous */
  .funnel-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Design Steps / Numbered Items ──────────────────────── */
.design-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.design-steps .card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.design-steps .text-body {
  font-size: clamp(13px, 1.4vw, 16px);
}