:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#8a8a8a;
  --line:#e4e4e4;
  --gap:10px;
  --vh:1vh; /* mis à jour en JS pour contourner les barres d'adresse mobiles */
}

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

html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.lightbox-open{
  overflow:hidden;
}

/* ---------- NAV ---------- */
header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}

nav{
  display:flex;
  justify-content:center;
  gap:36px;
  padding:22px 0;
}

nav a{
  text-decoration:none;
  color:var(--ink);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:500;
  position:relative;
  padding-bottom:4px;
  cursor:pointer;
  opacity:0.45;
  transition:opacity 0.2s ease;
}

nav a:hover{ opacity:0.8; }

nav a.active{
  opacity:1;
}

nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:1px;
  background:var(--ink);
}

/* ---------- LAYOUT ---------- */
main{
  max-width:1400px;
  margin:0 auto;
  padding:24px 14px 60px;
}

@media (min-width:700px){
  main{ padding:40px 20px 80px; }
}

section{ display:none; }
section.active{ display:block; }

/* ---------- MASONRY (pure CSS/JS, no library) ---------- */
/* Colonnes construites en JS pour que les photos s'enchaînent
   de gauche à droite (plutôt que de remplir une colonne de haut en bas). */
.masonry{
  display:flex;
  gap:var(--gap);
  align-items:flex-start;
}

.masonry-col{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  flex:1;
  min-width:0;
}

.frame{
  position:relative;
  cursor:zoom-in;
  overflow:hidden;
  background:#f4f4f4;
}

.frame img{
  display:block;
  width:100%;
  height:auto;
  transition:transform 0.6s cubic-bezier(.19,1,.22,1), filter 0.4s ease;
}

.frame:hover img{
  transform:scale(1.015);
}

.frame .idx{
  position:absolute;
  bottom:10px;
  left:10px;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;
  letter-spacing:0.02em;
  color:#fff;
  opacity:0;
  transition:opacity 0.3s ease;
  text-shadow:0 1px 6px rgba(0,0,0,0.6);
}

.frame:hover .idx{ opacity:1; }

/* ---------- CONTACT ---------- */
.contact{
  max-width:520px;
  margin:60px auto 0;
  text-align:left;
}

.contact p{
  font-size:15px;
  line-height:1.75;
  color:#444;
  margin-bottom:22px;
}

.contact .mail{
  display:inline-block;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:14px;
  letter-spacing:0.02em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
}

.contact .mail:hover{ opacity:0.6; }

.contact .eyebrow{
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:28px;
  display:block;
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed;
  inset:0;
  height:calc(var(--vh, 1vh) * 100);
  background:rgba(10,10,10,0.97);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:64px 16px;
  padding-top:calc(64px + env(safe-area-inset-top));
  padding-bottom:calc(56px + env(safe-area-inset-bottom));
}

.lightbox.open{ display:flex; }

.lightbox img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

.lightbox .close,
.lightbox .nav-btn{
  position:fixed;
  background:none;
  border:none;
  color:#fff;
  opacity:0.7;
  cursor:pointer;
  transition:opacity 0.2s ease;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}

.lightbox .close:hover,
.lightbox .nav-btn:hover{ opacity:1; }

.lightbox .close{
  top:calc(18px + env(safe-area-inset-top));
  right:calc(16px + env(safe-area-inset-right));
  font-size:12px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  padding:10px;
}

.lightbox .nav-btn{
  top:50%;
  transform:translateY(-50%);
  font-size:26px;
  padding:14px 14px;
}

.lightbox .prev{ left:calc(4px + env(safe-area-inset-left)); }
.lightbox .next{ right:calc(4px + env(safe-area-inset-right)); }

.lightbox .count{
  position:fixed;
  bottom:calc(18px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  opacity:0.55;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;
  letter-spacing:0.05em;
  max-width:80%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:600px){
  .lightbox{
    padding:56px 10px;
    padding-top:calc(56px + env(safe-area-inset-top));
    padding-bottom:calc(48px + env(safe-area-inset-bottom));
  }
  .lightbox .nav-btn{ font-size:20px; padding:10px 8px; }
}