/* ========================================================================
   Lockpit — pages de présentation des démos par métier
   ------------------------------------------------------------------------
   Produites par scripts/gen-cockpits.mjs. Le socle (lockpit.css), pilier.css
   (héros en scène, repères, objections, ancrage) et logiciel.css (cartes de
   métier) fournissent l'essentiel. Ici : les puces du héros et l'appel
   centré sous les scénarios.
   ======================================================================== */

.puces-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.puces-hero li {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.1);
  font: 500 14px "DM Sans";
}
.scene-hero.sombre .puces-hero li {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: var(--paper);
}
.appel-centre {
  display: flex;
  justify-content: center;
  margin: 48px 0 0;
}
.objections.scenarios dt::before {
  content: "Essayez · " counter(scenario);
  counter-increment: scenario;
  display: block;
  margin-bottom: 10px;
  color: var(--blue-texte);
  font: 600 11px "JetBrains Mono";
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.objections.scenarios {
  counter-reset: scenario;
}
@media (max-width: 699px) {
  .puces-hero {
    margin-top: 18px;
  }
  .appel-centre {
    margin-top: 32px;
  }
}