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

:root{
  --background:#f5f3ef;
  --text:#111111;
  --border:#eaeaea;
  --accent: linear-gradient(135deg, #711d62, #8e2059, #9c1f5c, #a71e5e, #a72575);
}

::selection{
background:#711d62;
color:#eaeaea;
}

.highlight{
background:linear-gradient(135deg, #711d62, #8e2059, #9c1f5c);
color:white;
padding:0 6px;
border-radius:0px;
}

body{
font-family:'Geologica',sans-serif;
background:var(--background);
color:var(--text);
transition:background .4s,color .4s;
}

.container{
width:90%;
max-width:1400px;
margin:auto;
}

header::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(135deg, #711d62, #8e2059, #9c1f5c, #a71e5e, #a72575);
}

header{
position:sticky;
top:0;
background:var(--background);
border-bottom:1px solid var(--border);
z-index:1000;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
height:110px;
}

.logo{
height:75px;
transition:filter .4s;
}

nav{
display:flex;
align-items:center;
}

nav a{
margin-left:48px;
font-size:18px;
font-weight:50;
text-decoration:none;
color:var(--text);
position:relative;
}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0%;
height:1px;
background:var(--text);
transition:.4s;
}

nav a:hover::after{
width:100%;
}

.hamburger{
display:none;
flex-direction:column;
gap:6px;
cursor:pointer;
}

.hamburger span{
width:26px;
height:2px;
background:var(--text);
}

.mobile-menu{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#000;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
transform:translateY(-100%);
transition:transform .6s cubic-bezier(.76,0,.24,1);
z-index:2000;
}

.mobile-menu.active{
transform:translateY(0);
}

.mobile-menu a{
font-size:36px;
margin:20px;
text-decoration:none;
color:#fff;
}

.intro{
padding:120px 0 120px 0;
}

.intro p{
font-size:50px;
line-height:1.20;
font-weight:400;
max-width:1200px;
text-align:left;
}

.portfolio{
padding-bottom:60px;
}

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}

/* ── ITEM & HOVER OVERLAY ─────────────────────────────────────── */

.item{
overflow:hidden;
position:relative;
cursor:pointer;
}

.item img{
width:100%;
display:block;
transition:
  transform 1s cubic-bezier(.16,1,.3,1),
  filter .6s;
}

.item-overlay{
position:absolute;
inset:0;
background:linear-gradient(
  to top,
  rgba(0,0,0,.72) 0%,
  rgba(0,0,0,.18) 55%,
  transparent 100%
);
display:flex;
align-items:flex-end;
padding:22px 20px;
opacity:0;
transition:opacity .45s cubic-bezier(.16,1,.3,1);
pointer-events:none;
}

.item-title{
color:#eaeaea;
font-family:'Geologica',sans-serif;
font-size:15px;
font-weight:400;
letter-spacing:.04em;
line-height:1.3;
transform:translateY(10px);
transition:transform .45s cubic-bezier(.16,1,.3,1);
}

.item:hover .item-overlay{
opacity:1;
}

.item:hover img{
transform:scale(1.05);
filter:brightness(.85);
}

.item:hover .item-title{
transform:translateY(0);
}

/* ── LIGHTBOX ─────────────────────────────────────────────────── */

.lightbox{
position:fixed;
inset:0;
z-index:3001;
display:none;
align-items:center;
justify-content:center;
background:#f2f2f2;
opacity:0;
transform:scale(.97);
transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
}

.lightbox.active{
opacity:1;
transform:scale(1);
}

.lightbox-inner{
display:flex;
flex-direction:column;
align-items:center;
width:100%;
max-width:960px;
padding:80px 40px 60px;
/* swipe zone */
touch-action:pan-y;
user-select:none;
}

.lightbox-img-wrap{
width:100%;
max-height:62vh;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
}

.lightbox-img-wrap img{
max-width:100%;
max-height:62vh;
object-fit:contain;
display:block;
}

.lightbox-caption{
margin-top:28px;
text-align:center;
max-width:600px;
}

.lightbox-title{
font-family:'Geologica',sans-serif;
font-size:15px;
font-weight:500;
letter-spacing:.06em;
text-transform:uppercase;
color:#111;
margin-bottom:10px;
}

.lightbox-desc{
font-family:'Geologica',sans-serif;
font-size:14px;
font-weight:300;
color:#555;
line-height:1.7;
}

/* Hint swipe — visible sur mobile uniquement */
.lightbox-swipe-hint{
display:none;
margin-top:20px;
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
color:#ccc;
font-family:'Geologica',sans-serif;
}

/* Close button */
.lightbox-close{
position:absolute;
top:28px;
right:36px;
background:none;
border:none;
font-size:18px;
color:#111;
cursor:pointer;
opacity:.45;
transition:opacity .25s;
padding:8px;
line-height:1;
min-width:44px;
min-height:44px;
display:flex;
align-items:center;
justify-content:center;
}

.lightbox-close:hover{
opacity:1;
}

/* Arrow buttons */
.lightbox-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
background:none;
border:none;
font-size:22px;
color:#111;
cursor:pointer;
padding:16px 20px;
opacity:.3;
transition:opacity .25s, transform .25s;
min-width:52px;
min-height:52px;
display:flex;
align-items:center;
justify-content:center;
}

.lightbox-arrow:hover{
opacity:1;
}

.lightbox-prev{
left:24px;
}

.lightbox-prev:hover{
transform:translateY(-50%) translateX(-3px);
}

.lightbox-next{
right:24px;
}

.lightbox-next:hover{
transform:translateY(-50%) translateX(3px);
}

/* FOOTER */

footer{
background:var(--accent);
color:#f5f3ef;
padding:50px 0;
}

footer p{
font-size:35px;
font-weight:10;
margin-bottom:20px;
letter-spacing:.02em;
line-height:1.1;
}

footer h1{
font-size:80px;
font-weight:50;
margin-bottom:20px;
letter-spacing:.02em;
line-height:1.1;
}

.footer-logo{
height:80px;
display:block;
margin-bottom:20px;
transform:translateX(-20px);
}

/* SCROLL REVEAL */

.reveal{
opacity:0;
transform:translateY(60px);
transition:all 1s cubic-bezier(.16,1,.3,1);
}

.reveal.visible{
opacity:1;
transform:translateY(0);
}

/* RESPONSIVE */

@media(max-width:1100px){

.grid{
grid-template-columns:1fr;
}

.intro p{
font-size:22px;
}

.mobile-menu a{
font-size:28px;
}

}

@media(max-width:900px){

.grid{
grid-template-columns:1fr;
}

.hamburger{
display:none;
}

.nav-desktop a{
margin-left:24px;
font-size:14px;
}

.intro{
padding:40px 0 60px 0;
}

.footer-logo{
height:60px;
transform:translateX(-10px);
}

.lightbox-inner{
padding:70px 20px 48px;
}

/* Flèches toujours visibles sur tactile */
.lightbox-arrow{
opacity:.6;
font-size:20px;
padding:0;
min-width:48px;
min-height:48px;
}

.lightbox-swipe-hint{
display:block;
}

}

@media(max-width:600px){

.lightbox-prev{ left:4px; }
.lightbox-next{ right:4px; }

.lightbox-inner{
padding:64px 8px 40px;
}

.lightbox-title{
font-size:13px;
}

.lightbox-desc{
font-size:13px;
}

}