/* HEADER AVEC IMAGE, TEXTE OVERLAY ET EFFET FONDU */
header {
    position: fixed;
    top:0; left:0;
    width:100%;
    height:25vh;
    min-height:80px;
    background: url('image/header_image.jpg') no-repeat center bottom; /* <-- ici */
    background-size: cover;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0 20px;
    z-index:1000;
    box-shadow:0 2px 5px rgba(0,0,0,0.3);
    transition: top 0.4s, background 0.4s;
    flex-direction: column;
    text-align: center;
}

header a {
    color:#fff;
    text-decoration:none;
    padding:8px 16px;
    background: rgba(0,0,0,0.5);
    border-radius:5px;
    font-weight:bold;
    margin-top: 10px;
    transition: opacity 0.4s;
}

header a:hover { background: rgba(0,0,0,0.7); }

header .overlay-text {
    color:#fff;
    font-size:2em;
    font-weight:bold;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
    transition: opacity 0.4s;
    opacity: 1;
}

/* BODY */
body { 
    font-family: Arial,sans-serif; 
    background:#f4f4f4; 
    margin:0; 
    padding-top:25vh;
}

/* GALERIE */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:15px; }
.thumb { height:130px; overflow:hidden; border-radius:8px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.2); cursor:pointer;}
.thumb img { width:100%; height:100%; object-fit:cover; transition: transform 0.3s ease, opacity 0.4s;}
.thumb img:hover { transform:scale(1.1); }

/* LIGHTBOX */
#lightbox {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.9);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 999;
    color: #fff;
    text-align: center;
}
#lightbox img { max-width: 90%; max-height: 80%; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); opacity: 1; transition: opacity 0.4s; }
#lightbox .date { margin-top: 10px; font-size: 14px; }
#lightbox .nav { position: absolute; top:50%; font-size:40px; color:#fff; cursor:pointer; user-select:none; padding:10px; }
#lightbox .prev { left:10px; }
#lightbox .next { right:10px; }
#lightbox .lightbox-retour {
    position:absolute;
    top:20px;
    left:50%;
    transform: translateX(-50%);
    background:#6b4f2a;
    color:#fff;
    padding:8px 16px;
    border-radius:5px;
    text-decoration:none;
    font-weight:bold;
    z-index: 1000;
}
#lightbox .lightbox-retour:hover { background:#573c23; }

@media (max-width:600px) {
    header { height:20vh; padding:0 10px; }
    header .overlay-text { font-size:1.5em; }
    body { padding-top:20vh; }
    .thumb { height:100px; }
}