/**
 * ============================================================================
 * GALLERY.CSS - SOLUTION COMPLÈTE ET ROBUSTE POUR HEADER CLIQUABLE
 * ============================================================================
 * 
 * Structure :
 * 1. Variables CSS (faciles à modifier)
 * 2. Reset & Isolation
 * 3. Layout Grid Infinie
 * 4. Images
 * 5. Canvas PixiJS avec isolation header
 * 6. Loading Animation
 * 7. Responsive
 * 
 * @version 2.0.0 - Solution robuste header cliquable
 * @author Le Chemin Du Prince
 */


/* ============================================================================
   1. VARIABLES CSS - MODIFIER ICI POUR AJUSTER LA GALERIE
   ============================================================================ */

:root {
    /* === COLONNES DE LA GRID === */
    --gallery-columns-desktop: 5;
    --gallery-columns-tablet: 5;
    --gallery-columns-mobile: 4;
    
    /* === ESPACEMENT ENTRE LES IMAGES === */
    --gallery-gap: 2.5rem;
    
    /* === TAILLE DES IMAGES === */
    --gallery-image-size: auto;
    
    /* === COULEURS === */
    --gallery-bg: #111;
    --gallery-overlay-bg: rgba(0, 0, 0, 0.9);
    
    /* === Z-INDEX HIERARCHY === */
    --z-gallery-wrapper: 1;      /* Wrapper le plus bas */
    --z-canvas: 2;                /* Canvas au-dessus du wrapper */
    --z-header: 100;             /* Header TOUJOURS au-dessus */
    --z-loading: 100000 !important;           /* Loading AU-DESSUS de tout */
}


/* ============================================================================
   2. RESET & ISOLATION
   ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-bg);
}

/* ============================================================================
   3. HEADER ET SEARCH BOX - ISOLATION TOTALE
   ============================================================================ */

/* Header doit capturer les events */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header) !important;
    isolation: isolate;
    pointer-events: auto !important;
}

/* Tous les enfants du header sont cliquables */
.header,
.header * {
    pointer-events: auto !important;
}

/* Search Box - Doit être AU-DESSUS du canvas */
search-box {
    z-index: 1001 !important; /* Au-dessus du header et du canvas */
    pointer-events: auto !important;
}

/* Quand la search box est ouverte, tous ses enfants sont cliquables */
search-box[expanded] {
    pointer-events: auto !important;
}

search-box[expanded] * {
    pointer-events: auto !important;
}


/* ============================================================================
   4. GALLERY WRAPPER - CONFIGURATION ÉQUILIBRÉE
   ============================================================================ */

.gallery-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-gallery-wrapper);
    isolation: isolate;
    contain: layout style paint;
    overflow: hidden;
    
    /* Le wrapper peut capturer les events SAUF si header/search box au-dessus */
    pointer-events: auto;
    
    cursor: grab;
    user-select: none;
}

.gallery-wrapper:active {
    cursor: grabbing;
}


/* ============================================================================
   5. CANVAS PIXI.JS - CONFIGURATION ROBUSTE
   ============================================================================ */

#pixi-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-canvas);
    
    /* Le canvas PEUT capturer les events */
    pointer-events: auto;
    
    /* Performance */
    transform: translateZ(0);
    will-change: transform;
}

/* 
 * ALTERNATIVE : Si le header ne fonctionne toujours pas,
 * décommenter cette section pour forcer une zone morte
 */
/*
#pixi-canvas {
    clip-path: polygon(
        0 100px,
        100% 100px,
        100% 100%,
        0 100%
    );
}
*/


/* ============================================================================
   6. LAYOUT GRID INFINIE
   ============================================================================ */

.gallery-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns-desktop), 1fr);
    gap: var(--gallery-gap);
    padding: var(--gallery-gap);
}

.gallery-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.gallery-item figure {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
}


/* ============================================================================
   7. IMAGES
   ============================================================================ */

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.gallery-item img[data-loading="true"] {
    opacity: 0;
}

.gallery-item img[data-loading="false"] {
    opacity: 1;
}


/* ============================================================================
   8. LOADING ANIMATION - FROSTED GLASS
   ============================================================================ */

.gallery-loading {
    position: fixed;
    inset: 0;
    
    /* Frosted Glass Effect */
    background: rgba(17, 17, 17, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    
    /* ✅ SOLUTION ULTIME */
    z-index: 999999 !important;
    isolation: isolate !important;
    
    /* Empêcher les interactions pendant le loading */
    pointer-events: auto !important;
}

.gallery-loading.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gallery-loading-content {
    /* Prêt pour ton animation custom */
}


/* ============================================================================
   9. RESPONSIVE
   ============================================================================ */

@media (max-width: 1024px) {
    :root {
        --gallery-gap: 0.4rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(var(--gallery-columns-tablet), 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --gallery-gap: 0.3rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(var(--gallery-columns-mobile), 1fr);
    }
}

@media (max-width: 480px) {
    :root {
        --gallery-gap: 0.25rem;
    }
}


/* ============================================================================
   10. UTILITAIRES
   ============================================================================ */

body.gallery-active {
    overflow: hidden;
}

.gallery-wrapper.debug .gallery-item {
    outline: 1px solid rgba(255, 0, 0, 0.3);
}

.gallery-wrapper.debug .gallery-grid {
    outline: 2px solid rgba(0, 255, 0, 0.5);
}