/* 19/10 : motion design (bench BENCH-MOTION.md). Tout reste lisible sans animation et sans JavaScript. */
.bande { position: relative; overflow: hidden; height: clamp(260px, 42vw, 520px); background: #151413; margin-top: 72px; }
.bande-images { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.bande-images img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bande-voile { position: absolute; inset: 0; background: rgba(15, 14, 13, .62); }
.bande-texte { position: absolute; left: 0; margin: 0; white-space: nowrap; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #F7F6F3; will-change: transform; }
.bande-a { top: 18%; font-size: clamp(56px, 11vw, 168px); }
.bande-b { bottom: 16%; font-size: clamp(32px, 5.5vw, 84px); color: transparent; -webkit-text-stroke: 1.5px #F7F6F3; }
.vitrine img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.vitrine li { overflow: hidden; }
.vitrine li:hover img, .vitrine li:focus-within img { transform: scale(1.05); }
.preuve + .bande + section { padding-top: 72px; }
@media (prefers-reduced-motion: reduce) {
  .vitrine li:hover img { transform: none; }
}
/* 19/10 : bouton du devis à côté du bouton plein */
.nuit .btn-contour { color: var(--sur-nuit); border-color: var(--sur-nuit); }
.nuit .btn-contour:hover { background: var(--nuit-carte); color: var(--sur-nuit); }
.une-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* vignettes animées : les vraies vignettes d'épisodes se suivent en fondu, avec un zoom lent */
.vitrine-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #151413; }
.vitrine-media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; opacity: 0; transition: opacity 1.1s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.vitrine-media img:first-child, .vitrine-media img.actif { opacity: 1; }
.vitrine-media.anime img:first-child:not(.actif) { opacity: 0; }
.vitrine-media img.actif { animation: zoom-lent 7s ease-out forwards; }
@keyframes zoom-lent { from { transform: scale(1); } to { transform: scale(1.08); } }
.vitrine li:hover .vitrine-media img.actif { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .vitrine-media img { transition: none; animation: none !important; } }
/* Evenprod Médias */
#medias { padding-top: 72px; }
.titre-medias { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.em-logo { height: 52px; width: auto; }
.emissions { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.emissions li { border-radius: 16px; overflow: hidden; background: #1E1B1A; color: #F7F4EF; min-width: 0; }
.emissions img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.emissions li:hover img { transform: scale(1.05); }
.emissions b { display: block; padding: 10px 14px 12px; font-size: 17px; }
@media (max-width: 900px) { .emissions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .emissions li:hover img { transform: none; } }
/* Evenprod Médias : nos invités les plus regardés, à la place des vues */
.invites { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.invites li { grid-column: span 2; border-radius: 16px; overflow: hidden; background: #1E1B1A; color: #F7F4EF; display: flex; flex-direction: column; min-width: 0; }
.invites li:nth-child(-n+2) { grid-column: span 3; }
.invites img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.invites li:hover img { transform: scale(1.05); }
.invites div { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 2px; }
.invites b { font-size: 19px; }
.invites span { font-size: 14px; color: #D9D2CA; }
.invites em { font-style: normal; font-size: 13px; color: #E08A8A; margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
@media (max-width: 900px) { .invites { grid-template-columns: repeat(2, minmax(0, 1fr)); } .invites li, .invites li:nth-child(-n+2) { grid-column: span 1; } .invites li:first-child { grid-column: span 2; } }
@media (prefers-reduced-motion: reduce) { .invites li:hover img { transform: none; } }
.vignette-attente { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #2E2C2A; color: #CFCCC6; font-size: 14px; }