/* =========================================
   1. STYLE DU MUR (GRILLE)
   ========================================= */
#eventbox-wall-container {
    width: 100%;
    padding: 20px;
    background-color: #f4f4f4;
    box-sizing: border-box;
    /* Colonnes */
    column-count: 3; column-gap: 15px;
    min-height: 200px;
}

.eventbox-media-item {
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    /* Transition douce pour l'opacité */
    transition: opacity 0.5s;
}

.eventbox-media-item img, .eventbox-media-item video {
    width: 100%; height: auto; display: block;
}
.eventbox-caption { padding: 10px; font-size: 0.9em; }

/* Responsive */
@media (max-width: 800px) { #eventbox-wall-container { column-count: 2; } }
@media (max-width: 500px) { #eventbox-wall-container { column-count: 1; } }

#eventbox-submit-container { clear: both; margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; }

/* =========================================
   2. MODE PROJECTION (ÉCRAN NOIR FIX)
   ========================================= */

body.projection-active {
    overflow: hidden !important;
    background-color: #000 !important;
    margin: 0 !important;
}

/* Cacher tout sauf le mur */
body.projection-active > *:not(#eventbox-wall-container):not(#eventbox-tv-overlay) {
    display: none !important;
}
/* Forcer le masquage des headers connus */
body.projection-active header, body.projection-active footer, body.projection-active #wpadminbar {
    display: none !important;
}

/* Conteneur Full Screen */
body.projection-active #eventbox-wall-container {
    position: fixed !important;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 99999 !important;
    background: #000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important; margin: 0 !important;
    column-count: auto !important;
    display: block !important; /* Reset column layout */
}

/* Les images en mode projection */
body.projection-active .eventbox-media-item {
    position: absolute !important;
    top: 50% !important; 
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    width: auto !important; height: auto !important;
    max-width: 90vw !important; max-height: 90vh !important;
    
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    
    /* CACHÉ PAR DÉFAUT */
    opacity: 0 !important; 
    z-index: 1 !important;
    transition: opacity 1s ease-in-out !important;
}

/* L'IMAGE ACTIVE (VISIBLE) */
body.projection-active .eventbox-media-item.active-slide {
    /* FORCE L'AFFICHAGE */
    opacity: 1 !important;
    z-index: 999999 !important;
    display: block !important;
}

body.projection-active .eventbox-media-item img {
    max-height: 90vh !important;
    width: auto !important;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

/* Légende */
body.projection-active .eventbox-caption {
    position: absolute; bottom: 20px; left: 0; right: 0;
    text-align: center; color: white; font-size: 1.5em;
    text-shadow: 0 2px 4px #000;
}

/* Texte de chargement (blanc sur noir) */
.eventbox-loading { color: white; font-size: 20px; text-align: center; margin-top: 20%; }

/* Overlay QR */
#eventbox-tv-overlay {
    position: fixed; bottom: 20px; right: 20px;
    z-index: 1000000 !important; /* Très haut */
    background: white; padding: 15px; border-radius: 10px;
    text-align: center;
}
#eventbox-exit-projection { background:none; border:none; cursor:pointer; text-decoration:underline; }