/* =====================================================
   Chaîne de Production — 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; }

.cp-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 ── */
.cp-img {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cp-img a { display: block; border-radius: 8px; overflow: hidden; }
.cp-img img {
  display: block; width: 100%; height: auto;
  border-radius: 8px; object-fit: contain;
  transition: opacity .15s ease;
}
.cp-img a:hover img { opacity: .88; }
.cp-img-full { width: 100%; margin-bottom: 12px; }

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

/* ── Vidéo ── */
.cp-video { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-video video { display: block; width: 100%; border-radius: 8px; }

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

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

/* ── Liste stations avec icônes SVG ── */
.cp-stations {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cp-station-item { display: flex; align-items: flex-start; gap: 10px; }
.cp-station-item svg { flex-shrink: 0; margin-top: 2px; fill: var(--accent); }
.cp-station-label strong { display: block; font-size: 13px; }
.cp-station-label span { font-size: 12px; color: var(--muted); }

/* =====================================================
   PRÉSENTATION
   [Texte + stations]  |  [Vidéo chaîne]
   ===================================================== */
.cp-intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

/* =====================================================
   PHOTOS chaine_prod (carré 0.97) + chaineprodjpg (1.52)
   Côte à côte proportionnellement
   ===================================================== */
.cp-photos-row {
  display: grid;
  grid-template-columns: 0.97fr 1.52fr;
  gap: 12px;
  margin-top: 16px;
}
.cp-photos-row .cp-img a { height: 220px; }
.cp-photos-row .cp-img img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}

/* =====================================================
   ZOOM STATION 4
   [Grafcet_station4 pleine largeur  2.16]
   [Texte cahier des charges]
   ===================================================== */
.cp-station4-layout { display: flex; flex-direction: column; gap: 16px; }

/* =====================================================
   RESPONSIVE — ≤ 900px
   ===================================================== */
@media (max-width: 900px) {
  .cp-intro-layout { grid-template-columns: 1fr; }
  .cp-photos-row { grid-template-columns: 1fr 1fr; }
  .cp-photos-row .cp-img a { height: auto; }
  .cp-photos-row .cp-img img { height: auto; }
}

@media (max-width: 600px) {
  .project .h3 { font-size: 17px; }
  .cp-photos-row { grid-template-columns: 1fr; }
}