:root{
  /* ≤ 2250px : 690 + 20 + 828 + 20 + 690 = 2248px */
  --col-w: 30%;           /* colonnes gauche/droite */
  --gap: 1%;
  --radius: 16px;
  --featured-mult: 1.2;     /* centre +20% */
}

.tem-no-scroll { overflow: hidden; }

/* Grille 3 colonnes fixes */
.tem-grid{
  display: grid;
  grid-template-columns: var(--col-w) calc(100% - (var(--col-w) * 2)) var(--col-w);
  column-gap: var(--gap);
  /* justify-content: center; */
  align-items: start;
  max-width: 2250px;
  margin: 0 auto;
  /* padding: var(--gap); */
}

/* Colonnes en flex pour empiler depuis le haut */
.tem-col{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: stretch;
}
.tem-left   { grid-column: 1; }
.tem-center { grid-column: 2; }
.tem-right  { grid-column: 3; }

/* Cartes poster */
.tem-card { 
  width: 100%; 
  margin-bottom: 4%;
}
.tem-media{
  position: relative;
  aspect-ratio: 9 / 16;   /* ~1576x2812 */
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transition: transform .2s ease;
  background: #000;
}
.tem-media:hover { transform: translateY(-2px); }

/* Poster cliquable (bouton accessible) */
.tem-thumb{
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
}
.tem-thumb:focus-visible{
  outline: 2px solid #4c9ffe;
  outline-offset: 4px;
  border-radius: var(--radius);
}
.tem-media img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* === Overlay / Lightbox === */
.tem-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  place-items: center;
  z-index: 999;
  padding: 2vh;
}
.tem-overlay[data-open="true"]{ display: grid; }

.tem-player{
  height: 95vh;
  aspect-ratio: 9 / 16;
  max-width: 95vw;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
  background: #000;
}
.tem-player video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}