/* =====================================================
   Électrocardiographe — CSS dédié
   Basé sur le pattern de style_station-pompage.css
   ===================================================== */

/* ── Base ── */
.project .h3 { font-size: 20px; margin: 0 0 8px; }
.project .content { display: block; }
.project .content .muted { margin: 4px 0 16px; font-weight: 600; opacity: 0.9; }

.ecg-lead {
  margin: 0 0 18px;
  text-align: justify;
  color: var(--muted);
  line-height: 1.6;
}

.project p { margin: 0 0 10px; text-align: justify; line-height: 1.6; }
.project ul, .project ol { margin: 4px 0 12px 20px; padding: 0; }
.project li { margin-bottom: 5px; text-align: justify; line-height: 1.55; }

/* ── Figures ── */
.ecg-img {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ecg-img a { display: block; border-radius: 8px; overflow: hidden; }
.ecg-img img {
  display: block; width: 100%; height: auto;
  border-radius: 8px; object-fit: contain;
  transition: opacity .15s ease;
}
.ecg-img a:hover img { opacity: .88; }

figcaption { font-size: 12px; color: var(--muted); text-align: center; font-style: italic; }

/* ── Header ── */
header .nav { display: flex; justify-content: center; }
header .nav .nav-link { margin-inline: auto; }

/* ── Texte helper ── */
.ecg-text { min-width: 0; }
.ecg-text p:first-child { margin-top: 0; }

/* =====================================================
   PRÉSENTATION
   [Texte]  |  [electrocardiographe.webp carré 0.93 → 220px]
   ===================================================== */
.ecg-intro {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 28px;
  align-items: center;
}
.ecg-intro-img { margin: 0; }
.ecg-intro-img img {
  display: block; width: 100%; height: 220px;
  object-fit: cover; border-radius: 10px;
}

/* =====================================================
   SCHÉMA FONCTIONNEL
   [Texte]  |  [Schema_fonctionnel.webp 1.62]
   ===================================================== */
.ecg-schema-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 28px;
  align-items: start;
}

/* =====================================================
   FILTRE PASSE-BAS
   [step5 1.64 + proteus_passe_bas 1.84 empilés]  |  [Texte étapes]
   ===================================================== */
.ecg-filtre-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.ecg-filtre-images {
  display: flex; flex-direction: column; gap: 12px;
}

/* =====================================================
   SIMULATION — 3 captures identiques (ratio 1.21)
   [150hz]  [1000hz]  [10000hz]  côte à côte, même hauteur
   ===================================================== */
.ecg-simul-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.ecg-simul-row .ecg-img a { height: 200px; }
.ecg-simul-row .ecg-img img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}

/* =====================================================
   RESPONSIVE — ≤ 900px
   ===================================================== */
@media (max-width: 900px) {
  .ecg-intro { grid-template-columns: 1fr 180px; gap: 20px; }
  .ecg-intro-img img { height: 180px; }
  .ecg-schema-layout { grid-template-columns: 1fr; }
  .ecg-filtre-layout { grid-template-columns: 1fr; }
  .ecg-simul-row { grid-template-columns: 1fr 1fr; }
  .ecg-simul-row .ecg-img a { height: auto; }
  .ecg-simul-row .ecg-img img { height: auto; }
}

@media (max-width: 600px) {
  .project .h3 { font-size: 17px; }
  .ecg-intro { grid-template-columns: 1fr; }
  .ecg-intro-img img { height: 180px; }
  .ecg-simul-row { grid-template-columns: 1fr; }
}