/* ======================================================= */
/* === FICHIER : CARTEL.CSS                            === */
/* === Gère les grilles, les images, le survol et le zoom === */
/* ======================================================= */

/* --- 1. LA GRILLE (CONTAINER) --- */
.art-gallery, .selection-gallery {
    display: grid;
    gap: 40px; /* Espace musée */
    max-width: 1400px;
    margin: auto;
}
.art-gallery {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
}
.selection-gallery {
    grid-template-columns: repeat(auto-fit, minmax(300px, 350px)); 
    justify-content: center;
}


/* --- 2. L'ÉLÉMENT (BOÎTE) --- */
.art-item, .selection-item {
    display: block; /* Pour les liens <a> */
    text-decoration: none;
    position: relative; 
    overflow: hidden; /* Important pour cacher le cartel qui est en bas */
    cursor: zoom-in;
    height: 350px; /* Hauteur fixe uniforme */
    background-color: #f9f9f9;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Légère ombre */
}

/* --- 3. L'IMAGE --- */
.art-item img, .selection-item img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Effet Zoom léger au survol */
.art-item:hover img, .selection-item:hover img { 
    transform: translateY(-10px) scale(1.02); 
}

/* --- 4. LE CARTEL (BANDEAU BAS) --- */
.art-info, .selection-info {
    position: absolute; 
    bottom: 0; left: 0; right: 0; 
    top: auto;
    
    background: rgba(255, 255, 255, 0.98); /* Fond blanc opaque */
    padding: 20px;
    
    /* Ligne décorative dorée */
    border-top: 1px solid var(--gold);
    
    /* Animation : Caché en bas, remonte au survol */
    transform: translateY(100%); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    text-align: center;
    z-index: 10;
}

/* Apparition au survol */
.art-item:hover .art-info, .selection-item:hover .selection-info { 
    transform: translateY(0); 
}

/* --- 5. TYPOGRAPHIE DU CARTEL --- */

/* La Référence (ex: REF. M-01) */
.cartel-ref, .selection-info span:first-of-type {
    font-family: 'Lato', sans-serif;
    font-size: 0.6rem; 
    color: #999; 
    display: block; 
    margin-bottom: 5px; 
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Le Titre (ex: GRAND ANTIQUE) */
.cartel-title, .selection-info h4 {
    font-family: 'Playfair Display', serif; 
    font-size: 1.2rem; 
    color: var(--dark);
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin: 0 0 8px 0;
    font-weight: 600;
    
    /* Le trait de séparation sous le titre */
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold);
    display: inline-block;
    min-width: 50px;
}

/* Les Détails (ex: Huile sur toile) */
.cartel-meta, .selection-info span:last-of-type {
    font-family: 'Lato', sans-serif; 
    font-size: 0.8rem; 
    color: var(--gold-dark); 
    font-style: italic;
    display: block; /* Force le retour à la ligne */
    margin-top: 5px;
}

/* ======================================================= */
/* === SECTION LIGHTBOX (ZOOM)                         === */
/* ======================================================= */

#lightbox {
    display: none; 
    position: fixed; 
    z-index: 9999;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 1); /* Fond Blanc Galerie */
    justify-content: center; 
    align-items: center;
}

#lightbox img {
    max-width: 90%; 
    /* On laisse 150px en bas pour le cartel fixe */
    max-height: calc(100vh - 150px); 
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    transition: transform 0.1s ease-out;
    cursor: grab;
}

/* Cartel Lightbox (Fixe en bas) */
#lb-caption {
    position: absolute; 
    bottom: 0; left: 0; width: 100%;
    height: 120px; /* Hauteur fixe */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    background-color: var(--cream);
    border-top: 1px solid var(--gold);
    z-index: 10000;
}

#lb-ref { font-size: 0.7rem; color: #aaa; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 5px;}
#lb-title { 
    font-family: 'Playfair Display', serif; font-size: 1.8rem; 
    color: var(--dark); text-transform: uppercase; letter-spacing: 3px; margin: 0 0 5px 0; 
}
#lb-meta { 
    font-family: 'Lato', sans-serif; font-size: 0.9rem; 
    color: var(--gold-dark); font-style: italic; 
}

/* Flèches de Navigation (Oblongues) */
.lb-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 50px; height: 80px; 
    background-color: white; 
    border: 1px solid var(--gold); 
    border-radius: 25px; 
    color: var(--dark); font-size: 1.5rem;
    cursor: pointer; 
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 10001;
}

.lb-btn:hover { 
    background-color: var(--gold); color: white; border-color: var(--gold);
    transform: translateY(-50%) scale(1.1);
}

.lb-prev { left: 30px; }
.lb-next { right: 30px; }

.lb-close { 
    position: absolute;
    top: 25px; 
    right: 25px;
    
    /* Forme ronde */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    
    /* Couleurs et Bordure */
    background-color: white;
    border: 1px solid var(--gold);
    color: var(--dark);
    
    /* Centrage du X */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem; /* Taille du X */
    line-height: 1; /* Important pour le centrage vertical */
    
    cursor: pointer;
    z-index: 10002; /* Au-dessus de tout */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Ombre pour détacher du fond */
    transition: all 0.3s ease;
}
.lb-close:hover {
    background-color: var(--gold);
    color: white;
    transform: rotate(90deg); /* Petit effet de rotation sympa */
}
/* --- MOBILE --- */
@media (max-width: 900px) {
    .art-gallery, .selection-gallery { 
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
        gap: 15px; 
    }
    .art-item, .selection-item { height: 220px; }
    
    /* Lightbox Mobile (Retour au fond noir pour contraste) */
    #lightbox { background-color: rgba(0,0,0,0.95); }
    #lb-caption { background-color: #1a1a1a; border-top-color: #333; height: auto; padding: 20px; }
    #lb-title { color: #f4f4f4; font-size: 1.2rem; }
    #lb-meta { color: #bbb; }
    #lightbox img { max-height: 60vh; margin-bottom: 0; }
    
    .lb-btn { width: 40px; height: 60px; font-size: 1.2rem; }
    .lb-prev { left: 10px; }
    .lb-next { right: 10px; }
    .lb-close {
        width: 35px; /* Un peu plus petit sur mobile */
        height: 35px;
        font-size: 1.5rem;
        top: 15px;
        right: 15px;
        color: var(--dark); /* On force le noir sur mobile aussi */
        background-color: white; /* On force le fond blanc */
        opacity: 1; /* Toujours visible */
    }
}