/* =====================================================
   Station de Pompage — CSS dédié
   ===================================================== */


/* ========= 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;
}

.sp-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 {
  margin: 4px 0 12px 20px;
  padding: 0;
}

.project li {
  margin-bottom: 5px;
  text-align: justify;
  line-height: 1.55;
}

.sp-note {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}


/* ========= Figures et images ========= */

.sp-img {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-img a {
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.sp-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  transition: opacity .15s ease;
}

.sp-img a:hover img {
  opacity: .88;
}

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

.sp-img-full {
  width: 100%;
  margin-bottom: 12px;
}


/* =====================================================
   Header
   ===================================================== */

header .nav {
  display: flex;
  justify-content: center;
}

header .nav .nav-link {
  margin-inline: auto;
}


/* =====================================================
   PRÉSENTATION
   [Texte]  |  [Photo station carré ~1:1]
   ===================================================== */

.sp-intro {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 28px;
  align-items: center;
}

.sp-intro-text .h3 {
  font-size: clamp(20px, 2.5vw, 28px);
}

.sp-intro-img {
  margin: 0;
}

.sp-intro-img img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 10px;
}


/* =====================================================
   CÂBLAGE
   [Texte intro pleine largeur]
   [Schéma 1.39 large] [Cablage-1 portrait 0.78] [Cablage-2 portrait 0.53]
   ===================================================== */

.sp-cablage-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 0.65fr;
  gap: 12px;
  align-items: start;
  margin-top: 4px;
}

.sp-cablage-grid .sp-img a {
  height: 260px;
}

.sp-cablage-grid .sp-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}


/* =====================================================
   SIMULATION
   Bloc haut  : [Texte]  |  [Simulation.webp 1.64]
   Bloc bas   : [Code_Simulation.webp 1.91]  |  [Texte fonctionnement]
   ===================================================== */

.sp-simulation-top,
.sp-simulation-bottom {
  display: grid;
  gap: 24px;
  align-items: start;
  margin-bottom: 22px;
}

.sp-simulation-top {
  grid-template-columns: 1fr 1.4fr;
}

.sp-simulation-bottom {
  grid-template-columns: 1.7fr 1fr;
}

.sp-text {
  min-width: 0;
}

.sp-text p:first-child {
  margin-top: 0;
}


/* =====================================================
   RÉALISATION DU SYSTÈME
   [Texte long]  |  [Grille 4 grafcets + 1 pleine largeur]
   ===================================================== */

.sp-realisation-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: start;
}

.sp-grafcets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sp-grafcets .sp-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 5e grafcet Manuel (ratio 1.56) : pleine largeur */
.sp-grafcet-manu {
  grid-column: 1 / 3;
}


/* =====================================================
   SUPERVISION PcVue
   [Texte intro pleine largeur]
   [Station 2.19]  [Alarme 2.18]   ← même hauteur
   [Graphique carré 1.09]  [Texte explication]
   ===================================================== */

.sp-pcvue-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.sp-pcvue-row .sp-img a {
  height: 220px;
}

.sp-pcvue-row .sp-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.sp-pcvue-graph {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: center;
}

.sp-pcvue-graph .sp-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.sp-pcvue-graph p {
  margin: 0;
  color: var(--muted);
}


/* =====================================================
   SUPERVISION NodeRed
   [Texte intro pleine largeur]
   [NodeRed_Code pleine largeur  2.29]
   [NodeRed_Simu-1 2.51]  [NodeRed_Simu-2 1.97]
   ===================================================== */

.sp-nodered-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sp-nodered-row .sp-img a {
  height: 200px;
}

.sp-nodered-row .sp-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}


/* =====================================================
   RESPONSIVE — ≤ 900px
   ===================================================== */

@media (max-width: 900px) {

  .sp-intro {
    grid-template-columns: 1fr 200px;
    gap: 20px;
  }

  .sp-intro-img img {
    height: 200px;
  }

  /* Câblage : schéma pleine largeur + 2 portraits côte à côte */
  .sp-cablage-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sp-cablage-grid .sp-img:first-child {
    grid-column: 1 / 3;
  }

  .sp-cablage-grid .sp-img a {
    height: auto;
  }

  .sp-cablage-grid .sp-img img {
    height: auto;
  }

  /* Simulation */
  .sp-simulation-top,
  .sp-simulation-bottom {
    grid-template-columns: 1fr;
  }

  /* Réalisation */
  .sp-realisation-layout {
    grid-template-columns: 1fr;
  }

  /* PcVue graph */
  .sp-pcvue-graph {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   RESPONSIVE — ≤ 600px
   ===================================================== */

@media (max-width: 600px) {

  .project .h3 {
    font-size: 17px;
  }

  /* Présentation */
  .sp-intro {
    grid-template-columns: 1fr;
  }

  .sp-intro-img {
    order: -1;
  }

  .sp-intro-img img {
    height: 180px;
  }

  /* Câblage */
  .sp-cablage-grid {
    grid-template-columns: 1fr;
  }

  .sp-cablage-grid .sp-img:first-child {
    grid-column: 1;
  }

  /* PcVue */
  .sp-pcvue-row {
    grid-template-columns: 1fr;
  }

  .sp-pcvue-row .sp-img a {
    height: auto;
  }

  .sp-pcvue-row .sp-img img {
    height: auto;
  }

  /* NodeRed */
  .sp-nodered-row {
    grid-template-columns: 1fr;
  }

  .sp-nodered-row .sp-img a {
    height: auto;
  }

  .sp-nodered-row .sp-img img {
    height: auto;
  }

  /* Grafcets */
  .sp-grafcets {
    grid-template-columns: 1fr;
  }

  .sp-grafcet-manu {
    grid-column: 1;
  }
}