/* ---------------- RESET ---------------- */

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

html,body{

    width:100%;
    height:100%;

    overflow-x:hidden;
    background:white;

    font-family:"Neue Haas Grotesk",Helvetica,Arial,sans-serif;

}

/* ---------------- HEADER ---------------- */

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:24px 32px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    z-index:100;

}

.brand,
.tagline{

    text-decoration:none;
    color:black;

    font-size:16px;
    font-weight:400;

}

/* ---------------- GALLERY ---------------- */

.gallery{

    position:relative;

    width:100%;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

}

.slider{

    width:80vw;          /* garde tes marges */
    overflow:hidden;

}

.track{

    display:flex;

    transition:transform .45s cubic-bezier(.4,0,.2,1);

}

.slide{

    min-width:100%;

    display:flex;
    justify-content:center;
    align-items:center;

}

.slide img{

    width:100%;
    height:auto;

    display:block;

    cursor:zoom-in;

    user-select:none;
    -webkit-user-drag:none;

    transition:.25s;

}

.slide img:hover{

    filter:grayscale(100%);

}

/* ---------------- FLECHES ---------------- */

.nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:34px;
    height:34px;

    border:none;
    background:none;

    font-size:18px;

    cursor:pointer;

    color:white;

    mix-blend-mode:difference;

    z-index:20;

    transition:.2s;

}

.nav:hover{

    transform:translateY(-50%) scale(1.0);

}

.prev{

    left:8vw;

}

.next{

    right:8vw;

}

/* ---------------- LIGHTBOX ---------------- */

#lightbox{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.96);

    display:flex;

    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:999;

}

#lightbox.active{

    opacity:1;
    visibility:visible;

}

#lightbox img{

    max-width:92vw;
    max-height:92vh;

    cursor:zoom-out;

}

/* ---------------- FOOTER ---------------- */

.site-footer{

    padding:50px 0;

    text-align:center;

}

.site-footer p{

    font-family:"JetBrains Mono",monospace;

    font-size:14px;

    color:#666;

}

body{
    padding-bottom:60px;
}

.nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:34px;
    height:34px;

    border:none;
    background:none;

    font-size:18px;
    font-weight:300; /* uniformise les deux */
    line-height:1;

    cursor:pointer;

    color:white;
    mix-blend-mode:difference;

    z-index:20;

    transition:.2s;
}

#closeLightbox{

    position:absolute;

    top:32px;
    right:32px;

    border:none;
    background:none;

    padding:0;

    font-size:28px;
    font-weight:200;

    line-height:1;

    color:#222;

    cursor:pointer;

    opacity:.45;

    transition:.2s ease;

}

#closeLightbox:hover{

    opacity:1;
    transform:scale(1.08);

}

#closeLightbox{

    position:absolute;

    top:32px;
    right:32px;

    width:32px;
    height:32px;

    border:none;
    background:transparent;

    cursor:pointer;

    opacity:.45;

    transition:.25s;

}

#closeLightbox:hover{

    opacity:1;
    transform:scale(1.08);

}

/* Les deux traits de la croix */

#closeLightbox::before,
#closeLightbox::after{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:22px;
    height:1px;

    background:#111;

    transform-origin:center;

}

#closeLightbox::before{

    transform:translate(-50%, -50%) rotate(45deg);

}

#closeLightbox::after{

    transform:translate(-50%, -50%) rotate(-45deg);

}

.lightbox-content{

    position:relative;

    display:inline-block;

}

#closeLightbox{

    position:absolute;

    top:-26px;
    right:0;

    width:18px;
    height:18px;

    border:none;
    background:transparent;

    cursor:pointer;

    opacity:.45;

    transition:.2s;

}

#closeLightbox:hover{

    opacity:1;

}

#closeLightbox::before,
#closeLightbox::after{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:14px;
    height:1px;

    background:#111;

    transform-origin:center;

}

#closeLightbox::before{

    transform:translate(-50%,-50%) rotate(45deg);

}

#closeLightbox::after{

    transform:translate(-50%,-50%) rotate(-45deg);

}

#closeLightbox{

    display:none;

}

#lightbox.active #closeLightbox{

    display:block;

}

/* ---------------- LIGHTBOX ---------------- */

#lightbox{

    position:fixed;
    inset:0;

    background:rgba(255,255,255,.96);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:999;

}

#lightbox.active{

    opacity:1;
    visibility:visible;

}

#lightbox img{

    max-width:92vw;
    max-height:92vh;

    cursor:default;

    display:block;

}

/* ---------- CROIX ---------- */

#closeLightbox{

    position:fixed;

    top:32px;
    right:32px;

    width:18px;
    height:18px;

    border:none;
    background:transparent;

    padding:0;

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transition:opacity .2s ease;

    z-index:1000;

}

/* La croix apparaît uniquement quand la lightbox est ouverte */

#lightbox.active #closeLightbox{

    opacity:.45;

    pointer-events:auto;

}

#lightbox.active #closeLightbox:hover{

    opacity:1;

}

#closeLightbox::before,
#closeLightbox::after{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:14px;
    height:1px;

    background:#111;

    transform-origin:center;

}

#closeLightbox::before{

    transform:translate(-50%,-50%) rotate(45deg);

}

#closeLightbox::after{

    transform:translate(-50%,-50%) rotate(-45deg);

}