/* CRÉATIONS — quatre petites fenêtres, en rang.
   ------------------------------------------------------------------
   Chaque projet est montré dans une fenêtre de navigateur réduite, une
   sur deux décalée vers le bas, toutes très légèrement inclinées : un
   rang vivant plutôt qu'une grille. Les aperçus sont des maquettes
   générées ; vus en grand, leurs textes se remarquaient. À cette taille
   on lit l'ambiance de chaque site, pas le détail de ses lignes. La
   pile, trop grande même réduite, est abandonnée. */

.vitrines {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 40px);
  max-width: 1000px;
  margin-inline: auto;
  padding-block: var(--sp-5) var(--sp-8);
}
.vitrine { display: grid; align-content: start; gap: 3px; }
.vitrine:nth-child(even) { transform: translateY(var(--sp-7)); }
.vitrine:nth-child(1) { --rot: -1.6deg; }
.vitrine:nth-child(2) { --rot: 1.2deg; }
.vitrine:nth-child(3) { --rot: -0.8deg; }
.vitrine:nth-child(4) { --rot: 1.8deg; }

.vitrine-fenetre {
  margin: 0 0 var(--sp-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--os);
  box-shadow: var(--ombre-portee);
  transform: rotate(var(--rot, 0deg));
  transition:
    transform var(--dur-3) var(--ease-elan),
    box-shadow var(--dur-3) var(--ease-sortie);
}
.vitrine:hover .vitrine-fenetre {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: var(--ombre-levee);
}
/* La barre de la fenêtre : trois pastilles, rien d'autre. */
.vitrine-barre {
  display: flex;
  gap: 4px;
  padding: 7px 9px;
  background: var(--papier);
}
.vitrine-barre i { width: 6px; height: 6px; border-radius: 50%; background: var(--trait-fort); }
.vitrine-fenetre img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
}

.vitrine-nom {
  font-family: var(--font-display);
  font-variation-settings: "wght" 700;
  font-size: 0.98rem;
}
.vitrine-type { font-size: var(--fs-label); color: var(--texte-doux); }

@media (max-width: 760px) {
  .vitrines { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-5); padding-bottom: var(--sp-7); }
  .vitrine:nth-child(even) { transform: translateY(var(--sp-5)); }
}
@media (prefers-reduced-motion: reduce) {
  .vitrine-fenetre { transition: none; }
}