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

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

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

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

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

/* =====================================================
   PRÉSENTATION
   [Texte + fonctionnalités]  |  [smartcar.webp portrait 0.65]
   ===================================================== */
.sc-intro {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 28px;
  align-items: start;
}
.sc-intro .sc-video video {
  height: 340px;
  object-fit: cover;
}

/* =====================================================
   DIMENSIONNEMENT
   [Texte]  |  [FP4.webp landscape 2.09]
   ===================================================== */
.sc-dim-layout {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 28px;
  align-items: start;
}

/* =====================================================
   CARTE — schéma d'implantation (1.22) + texte
   [Texte]  |  [schemas_implantation.webp]
   ===================================================== */
.sc-carte-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  align-items: start;
}

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

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

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