/* ER Poster Styles */
.erposter-grid {
  display: grid;
  grid-template-columns: repeat(7, 200px); /* max 6 par ligne */
  gap: 12px;
  justify-content: center;
}

@media (max-width: 1600px) {
  .erposter-grid { grid-template-columns: repeat(5, 200px); }
}
@media (max-width: 1350px) {
  .erposter-grid { grid-template-columns: repeat(4, 200px); }
}
@media (max-width: 1100px) {
  .erposter-grid { grid-template-columns: repeat(3, 200px); }
}
@media (max-width: 850px) {
  .erposter-grid { grid-template-columns: repeat(2, 200px); }
}
@media (max-width: 600px) {
  .erposter-grid { grid-template-columns: repeat(1, 200px); }
}

.erposter-card {
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.erposter-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.erposter-card:hover .erposter-inner {
  transform: rotateY(180deg);
}

.erposter-front, .erposter-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.erposter-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.erposter-back {
  background: #111827;
  color: #fff;
  transform: rotateY(180deg);
  text-align: center;
  padding: 12px;
  font-size: 16px;
  line-height: 1.35;
}