/*
 * Captures réelles de l'application (assets/captures/<lang>/, générées par tools/capture-app.mjs).
 * Cadres neutres : navigateur pour le back-office, téléphone pour l'app salarié.
 * Les couleurs à l'intérieur des cadres sont celles de l'app, pas celles de la vitrine.
 */
.shot {
  margin: 0;
  min-width: 0;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* —— Navigateur (back-office) —— */
.shot-browser {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(10, 15, 22, 0.16), 0 2px 6px rgba(10, 15, 22, 0.06);
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 12px;
  background: #E8ECF1;
  border-bottom: 1px solid #D8DEE6;
}
.shot-dots { display: flex; gap: 6px; flex-shrink: 0; }
.shot-dots i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #C3CBD6;
}
.shot-url {
  flex: 1;
  max-width: 320px;
  height: 20px;
  margin: 0 auto;
  padding: 0 10px;
  border-radius: 6px;
  background: #fff;
  color: #64748B;
  font-size: 0.7rem;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shot-dots + .shot-url { margin-right: 46px; }

/* —— Carte (extrait d'écran, sans barre) —— */
.shot-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 15, 22, 0.12);
}

/* —— Téléphone (app salarié) —— */
.shot-phone {
  position: relative;
  width: 100%;
  max-width: 270px;
  padding: 22px 8px 14px;
  border-radius: 38px;
  background: #0B0F17;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 28px 60px rgba(10, 15, 22, 0.28);
}
.shot-phone::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 46px;
  height: 5px;
  margin-left: -23px;
  border-radius: 999px;
  background: #222A36;
}
.shot-phone img { border-radius: 26px; }

.shot-note {
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted, #5A6676);
}

/* —— Rangée de téléphones avec légende —— */
.phones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  max-width: 1040px;
  margin: 56px auto 0;
}
.phones figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.phones figcaption {
  margin-top: 16px;
  max-width: 24ch;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted, #5A6676);
}
.phones figcaption strong { display: block; color: var(--ink, #0A0F16); font-size: 0.98rem; margin-bottom: 2px; }

@media (max-width: 980px) {
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; max-width: 560px; }
  .shot-phone { max-width: 230px; }
}
@media (max-width: 480px) {
  .phones { gap: 28px 14px; }
  .shot-phone { padding: 16px 6px 10px; border-radius: 28px; }
  .shot-phone::before { top: 6px; width: 36px; margin-left: -18px; height: 4px; }
  .shot-phone img { border-radius: 20px; }
  .shot-bar { height: 26px; }
  .shot-dots i { width: 8px; height: 8px; }
  .shot-url { font-size: 0.62rem; height: 16px; line-height: 16px; }
}

/* —— Pages éditoriales (guides.css) —— */
.prose-shot { margin: 8px 0 36px; }
.prose-shot figcaption,
.shot-pair figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--muted, #5A6676);
}
.shot-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 28px 0 40px;
}
.shot-pair figure { margin: 0; min-width: 0; }
.prose .phones { max-width: none; margin: 8px 0 40px; }
@media (max-width: 768px) {
  .shot-pair { grid-template-columns: 1fr; }
}