.cn-item { margin: 3rem 0; }

.cn-media__frame {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

/* Image Drupal -> on force un comportement "cover" */
.cn-media__frame img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
  transform: translateY(0);
  will-change: transform;
}

/* La "carte" superposée sur l'image */
.cn-card {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  margin-top: -2rem;
}

@media (min-width: 992px) {
  .cn-content { display: flex; align-items: center; }

  .cn-card {
    width: min(520px, 100%);
    margin-top: 0;
    }

  /* inverse la ligne une fois sur deux (ça bypass order-lg-*) */
  .view-content.row > .views-row:nth-child(even) .cn-row {
    flex-direction: row-reverse;
    }
    
  /* sur les lignes even, colle la carte au bord droit de sa colonne */
  .view-content.row > .views-row:nth-child(even) .cn-content {
    justify-content: flex-end;
    }


  /* overlap qui suit l'alternance */
  .view-content.row > .views-row:nth-child(odd) .cn-card {
    margin-left: -3rem;
    margin-right: 0;
    }

  .view-content.row > .views-row:nth-child(even) .cn-card {
    margin-right: -3rem;
    margin-left: 0;
    }
    
  /* petit renfort de stacking (souvent utile) */
  .cn-media { position: relative; z-index: 1; }
  .cn-content { position: relative; z-index: 2; }
    
}

.cn-card__affiche{
  position: relative;
  display: inline-block;
  }

.cn-card__affiche img {
  display: block;
  object-fit: cover;
  border-radius: .75rem;
}
.cn-card__numero{
  position: absolute;
  top: -0.5rem;
  right: -1rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  line-height: 1;
  font-weight: 700;
  font-size: clamp(.85rem, 2vw, 1rem);
  background: rgba(0,0,0,.65);
  color: #fff;
  backdrop-filter: blur(2px);
  }
.cn-card__title { margin: .75rem 0 .5rem; }
.cn-card__summary { margin-bottom: .75rem; }