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

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

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

/* ── Vidéos ── */
.br-video { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.br-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 ── */
.br-text { min-width: 0; }
.br-text p:first-child { margin-top: 0; }

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

/* =====================================================
   SCHÉMA + CARTES
   [schemas.webp landscape 2.59]  |  [Texte listes cartes]
   ===================================================== */
.br-schema-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
  align-items: start;
}

/* =====================================================
   BLOCS VIDÉO — [Vidéo]  |  [Texte]
   Les blocs pair alternent (reverse) pour varier
   ===================================================== */
.br-video-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.br-video-layout.br-reverse {
  grid-template-columns: 1fr 1fr;
}
.br-video-layout.br-reverse .br-video { order: 2; }
.br-video-layout.br-reverse .br-text  { order: 1; }

.br-video-layout .br-video video {
  width: 100%;
  border-radius: 8px;
}

/* =====================================================
   RESPONSIVE — ≤ 900px
   ===================================================== */
@media (max-width: 900px) {
  .br-intro { grid-template-columns: 1fr 200px; gap: 20px; }
  .br-intro-img img { height: 200px; }
  .br-schema-layout { grid-template-columns: 1fr; }
  .br-video-layout,
  .br-video-layout.br-reverse { grid-template-columns: 1fr; }
  .br-video-layout.br-reverse .br-video { order: 0; }
  .br-video-layout.br-reverse .br-text  { order: 0; }
}

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