/* ════════════════════════════════════════════════════════════
   STYLES SPÉCIFIQUES PROJET 01 Site Web Catalogue
   ────────────────────────────────────────────────────────────
   La majorité des styles vient de :
   - ../../proj-shared.css : nav burger, switcher, breadcrumb mobile
   - ../_proj-light.css : hero, sections, gallery, result, footer
   Ce fichier ne contient que les overrides ou ajouts propres à P01.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   CAPTURES D'ÉCRAN (maquette + wireframes)
   Les visuels sont des captures PLEINE PAGE (très hautes) : on les
   présente dans une « fenêtre » à hauteur plafonnée, image alignée en
   haut, fondu bas + bouton « plein écran » vers l'image complète.
   ════════════════════════════════════════════════════════════ */
.sc-shots { display: grid; gap: 22px; margin-top: 24px; }

.sc-shot {
  margin: 0;
  border: 1px solid var(--border-h);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.sc-shot-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.sc-shot-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.sc-shot-bar .sc-shot-label {
  margin-left: 8px; font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
}
.sc-shot-viewport {
  position: relative;
  max-height: 460px;
  overflow: hidden;
}
.sc-shot-viewport img { display: block; width: 100%; height: auto; }
.sc-shot-viewport::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(transparent, rgba(13,17,23,0.94));
  pointer-events: none;
}
.sc-shot-open {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 22px;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  color: var(--text); text-decoration: none;
  background: rgba(13,17,23,0.82); border: 1px solid var(--border-h);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .2s, transform .2s;
}
.sc-shot-open svg { width: 14px; height: 14px; }
.sc-shot-open:hover { border-color: var(--g1); transform: translateY(-1px); }
.sc-shot-cap {
  padding: 12px 16px;
  font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--border);
}
.sc-shot-cap strong { color: var(--text); font-weight: 600; }

.sc-shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sc-shot-grid .sc-shot-viewport { max-height: 380px; }

/* Capture mobile : étroite, centrée (rendu « téléphone ») */
.sc-shot-mobile { max-width: 400px; margin-inline: auto; }
.sc-shot-mobile .sc-shot-viewport { max-height: 520px; }

@media (max-width: 760px) {
  .sc-shot-grid { grid-template-columns: 1fr; }
}