/* ==========================================================================
   PAGE : DÉVELOPPEMENT (pages/developpement.html) — devlog ONIX gyro
   Même système de design que la home : hero arrondi, grand titre,
   feature-card beige (components.css), cartes au format des cartes produit.
   ========================================================================== */

/* ---- Hero (comme .hero de la home) ---- */
.dev-hero {
  position: relative;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
}
.dev-hero .media--dev-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 85vh;
  min-height: 460px;
}
.dev-hero__content {
  position: absolute;
  inset: auto 0 12%;
  display: flex;
  justify-content: center;
}

/* ---- Titre ---- */
.dev-intro { padding-top: var(--space-8); padding-bottom: 0; }
/* "DÉVELOPPEMENT" = 13 majuscules sans coupure possible : la taille suit la largeur
   disponible (cqi) pour ne jamais déborder sur mobile. */
.dev-intro .container { container-type: inline-size; }
.dev-intro .display-title { font-size: min(var(--fs-display), 10.6cqi); }
.dev-intro__lead { font-size: var(--fs-lg); font-weight: 300; max-width: 40ch; }

/* ---- Projet ---- */
.dev-project { scroll-margin-top: var(--header-height); }

/* ---- Articles ---- */
.dev-posts__title {
  font-size: var(--fs-xl);
  font-weight: 400;
  margin-bottom: var(--space-5);
}
.product-card--soon .media--product { background: var(--color-surface); }
.product-card--soon .product-card__price { color: var(--color-text-muted); }
@media (max-width: 520px) {
  .product-card--soon:nth-child(n + 2) { display: none; }   /* une seule carte "Bientôt" sur téléphone */
}

/* Même ligne que "Découvrir tous les accessoires → Voir plus" sur la home */
.dev-posts__more {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
  font-size: var(--fs-md);
  font-weight: 400;
}