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

.rm-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 ── */
.rm-img {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.rm-img a { display: block; border-radius: 8px; overflow: hidden; }
.rm-img img {
  display: block; width: 100%; height: auto;
  border-radius: 8px; object-fit: contain;
  transition: opacity .15s ease;
}
.rm-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 ── */
.rm-text { min-width: 0; }
.rm-text p:first-child { margin-top: 0; }

/* =====================================================
   PRÉSENTATION
   [Texte]  |  [robot-mobile.webp portrait 0.68 → 280px]
   ===================================================== */
.rm-intro {
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 28px;
  align-items: center;
}
.rm-intro-img { margin: 0; }
.rm-intro-img img {
  display: block; width: 100%; height: 260px;
  object-fit: cover; border-radius: 10px;
}

/* =====================================================
   CARTE ÉLECTRONIQUE
   [Texte]  |  [carte_electronique.webp landscape 2.0]
   ===================================================== */
.rm-carte-layout {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 28px;
  align-items: start;
}

/* =====================================================
   CODE — 2 captures
   [code-1.webp portrait 0.71]  |  [code-2.webp landscape 1.51]
   Colonnes proportionnelles aux ratios, même hauteur
   ===================================================== */
.rm-code-layout {
  display: grid;
  grid-template-columns: 0.71fr 1.51fr;
  gap: 12px;
  align-items: start;
  margin-top: 8px;
}
.rm-code-layout .rm-img a { height: 320px; }
.rm-code-layout .rm-img img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: top center;
}

/* =====================================================
   RESPONSIVE — ≤ 900px
   ===================================================== */
@media (max-width: 900px) {
  .rm-intro { grid-template-columns: 1fr 150px; gap: 20px; }
  .rm-intro-img img { height: 220px; }
  .rm-carte-layout { grid-template-columns: 1fr; }
  .rm-code-layout { grid-template-columns: 1fr 1fr; }
  .rm-code-layout .rm-img a { height: auto; }
  .rm-code-layout .rm-img img { height: auto; }
}

@media (max-width: 600px) {
  .project .h3 { font-size: 17px; }
  .rm-intro { grid-template-columns: 1fr; }
  .rm-intro-img img { height: 200px; }
  .rm-code-layout { grid-template-columns: 1fr; }
}