/* Styles propres a la page Video & TV (fichier separe : style.css est garde 1 an en cache par les navigateurs) */
/* Tuile « Diffusion des matchs » : la photo d'origine puis les trois vues du cube, en fondu (sans bouger la mise en page) */
.tile-slides .slide { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; animation: fondu-slide 15s infinite; }
.tile-slides::before { z-index: 1; }
.tile-slides > .tile-title, .tile-slides > .tile-text { position: relative; z-index: 2; }
@keyframes fondu-slide { 0% { opacity: 0; } 6% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tile-slides .slide { animation: none; display: none; } }

/* Visionneuse plein écran des photos du cube */
.visio { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; }
.visio[hidden] { display: none; }
.visio img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visio-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.2rem; cursor: pointer; z-index: 2; }
.visio-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.7rem; cursor: pointer; z-index: 2; }
.visio-prev { left: 8px; } .visio-next { right: 8px; }
.visio-n { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: .9rem; }