@font-face {
  font-family: "MidnightFlame";
  src: url("MidnightFlame.woff2") format("woff2");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.category {
  margin-left: 20px;
}

body {
  color: #e9e3eb;
  font-family: "MidnightFlame", serif;
  background-color: #1A1422;
}

header {
  display: flex;
  justify-content: center; /* Centers the text horizontally */
  align-items: center;     /* Centers vertically if height varies */
  padding: 0;
  font-family: "MidnightFlame", serif;
  font-size: 20pt;
  background-color: rgba(0, 0, 0, 0.2); /* Optional: subtle background */
  width: 100%;
  margin: 0;
  margin-bottom: 25px;
}  

.line {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 10px; /* Space between columns */
  width: 98%;
  padding: 0;
  margin: 0 auto;
}

.line img {
  display: block;
  width: 100%; /* Fill the column width */
  height: auto;      /* Keeps aspect ratio */
  border-radius: 5px; /* Optional: rounded corners */
  margin: 0;
  padding: 0;
  margin-bottom: 25px; /* Space between cards in the SAME column */
  break-inside: avoid; /* Prevents card from splitting across columns */
  
  cursor: pointer; /* Indique visuellement que c'est cliquable */
  object-fit: contain;
  transition: transform 0.2s ease;
}

.line img:hover {
  transform: scale(1.25); /* Petit effet de zoom au survol */
}

iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}