/* Pulsion Studio : compléments des pages solution « produit », « interne » et « accompagnement ».
   S'ajoute à experience.css et pages.css, sans les modifier. */

/* ---------- Démonstration sans écran : intro à gauche, étapes à droite ---------- */
.showcase--text .showcase-grid { align-items: start; }
.showcase--text .showcase-text .lead { margin-top: 20px; }
.showcase--text .showcase-text .step-links { margin-top: 24px; }
.showcase--text .showcase-steps { margin: 0; gap: 0; border-top: 1px solid var(--line); }
.showcase--text .showcase-steps li { padding-block: 22px; padding-left: 56px; border-bottom: 1px solid var(--line); }
.showcase--text .showcase-steps li::before { top: 22px; }

/* ---------- Démonstration produit : une réalisation réelle dans le cadre d'écran ---------- */
.showcase-stage { margin: 0; }
.showcase .device--shot { height: auto; aspect-ratio: 16 / 11; }
.device--shot .screen { background: #0a0d2b; }
.device--shot .screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.showcase-caption { max-width: 52ch; font-size: .875rem; color: var(--muted); text-align: center; text-wrap: pretty; }
.showcase-caption a { color: var(--fg); text-underline-offset: 3px; white-space: nowrap; }
.showcase-caption a:hover { color: var(--blue); }

/* ---------- Modules communs aux deux solutions internes ---------- */
.module-points { gap: 10px; }
.module-points li { font-size: .9rem; padding: 9px 14px 9px 11px; }

/* ---------- Réalisation et avis côte à côte ---------- */
.proof-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: 24px; margin-bottom: clamp(36px, 4vw, 52px); }
.proof-grid .work :is(a, .work-card) { display: flex; flex-direction: column; gap: 18px; text-decoration: none; }
.proof-grid .review { height: 100%; }

@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr; }
  .showcase--text .showcase-steps li { padding-left: 46px; }
}