/* Bordures latérales propres */
html,body{height:100%; overflow:hidden;}
body{
  margin:0;
  border-left:40px solid #ffffff; border-right:40px solid #ffffff;
  font-family:-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  color:#111; background:#fff;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; background:#fff;
}
.brand{letter-spacing:.08em; font-weight:600; font-size:12px;}
.subnav{display:flex; gap:22px}
.nav-link{color:#111; text-decoration:none; font-size:12px; letter-spacing:.06em; opacity:.9}
.nav-link:hover{opacity:1}

/* Grille : bande compacte (comme ta 2e capture) */
.grid{
  height:calc(100vh - 56px);
  display:grid;
  grid-template-columns:repeat(12, 1fr);  /* plus de colonnes = vignettes plus petites */
  grid-auto-rows:7vw;                      /* hauteur des vignettes */
  gap:0; padding:8px; overflow:hidden; align-content:start;
}
.grid .tile{display:block; position:relative; overflow:hidden}
.grid img{width:100%; height:100%; object-fit:cover; display:block;}

/* Caption au survol (discret) */
.grid .tile::after{
  content:attr(data-caption);
  position:absolute; left:0; right:0; bottom:0;
  padding:.4em .6em; font-size:11px; letter-spacing:.04em;
  background:rgba(255,255,255,.82); color:#111;
  transform:translateY(100%); transition:.25s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.grid .tile:hover::after{ transform:translateY(0) }

/* Sections */
.panel{max-width:820px; margin:40px auto 80px; padding:0 18px; line-height:1.5}
.panel h2{font-size:14px; letter-spacing:.08em; text-transform:uppercase}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(255,255,255,.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:24px; z-index:100;
}
.lightbox .lb-img{max-width:92vw; max-height:78vh; object-fit:contain; display:block}
.lightbox .lb-caption{font-size:12px; letter-spacing:.06em; color:#111}
.lightbox .close{
  position:absolute; top:12px; right:18px; border:0; background:transparent;
  font-size:32px; line-height:1; cursor:pointer; color:#111;
}

/* Responsive */
@media (max-width:900px){
  body{border-left:16px solid #eee; border-right:16px solid #eee}
  .grid{grid-template-columns:repeat(8,1fr); grid-auto-rows:12vw;}
}
@media (max-width:600px){
  .grid{grid-template-columns:repeat(5,1fr); grid-auto-rows:18vw;}
}

/* AUTO-ADDED */

.subnav{ display:flex; gap:22px; }
.nav-link{ text-decoration:none; color:#111; font-size:12px; letter-spacing:.06em; opacity:.9; }
.nav-link:hover{ opacity:1; }

.grid{
  height:calc(100vh - 56px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:7vw;
  gap:6px; padding:8px; overflow:hidden; align-content:start;
}
.grid .tile{ display:block; position:relative; overflow:hidden; }
.grid img{ width:100%; height:100%; object-fit:cover; display:block; }

.panel{ max-width:820px; margin:40px auto 80px; padding:0 18px; line-height:1.5; }
.panel h2{ font-size:14px; letter-spacing:.08em; text-transform:uppercase; }


/* --- ADDED v30 --- */

/* === Adjustments per brief === */
.topbar{ position:sticky; top:0; z-index:10; padding:14px 18px; background:#fff; }
.topbar-left{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.brand{ letter-spacing:.08em; font-weight:600; font-size:12px; }
.subnav{ display:flex; gap:22px; }
.nav-link{ text-decoration:none; color:#111; font-size:12px; letter-spacing:.06em; opacity:.9; }
.nav-link:hover{ opacity:1; }

/* no white lines between images */
.grid{ 
  height: calc(100vh - 56px - 60px); /* minus header + spacer */
  display:grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 7vw; gap:0; padding:0; overflow:hidden; align-content:start;
}
.grid .tile{ display:block; position:relative; overflow:hidden; cursor: crosshair; }
.grid img{ width:100%; height:100%; object-fit:cover; display:block; }

/* spacer to lower the mosaic */
.spacer{ height:60px; }

/* page wrapper */
.page-wrap{ min-height: calc(100vh - 56px); display:flex; align-items:flex-start; }

/* typography (system stack) */
body{ font-family: -apple-system, BlinkMacSystemFont, 'Inter', Helvetica, Arial, sans-serif; }

/* Custom fine plus cursor on tiles */
.grid .tile{ cursor: url('assets/cursor-plus.svg') 16 16, zoom-in; }

/* Fullscreen overlay slider */
.overlay{ position:fixed; inset:0; background:rgba(255,255,255,0.98); z-index:999; display:none; }
.overlay.open{ display:block; }
.overlay .stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.overlay .slide{ position:absolute; inset:80px 0 60px 0; display:none; }
.overlay .slide.active{ display:block; }

.overlay .caption{ position:absolute; left:0; right:0; bottom:0; padding:10px 18px; font-size:12px; letter-spacing:.04em; color:#111; background:#fff; border-top:1px solid #eee; display:flex; align-items:center; gap:10px; }
.overlay .title{ font-weight:600; text-transform:uppercase; }
.overlay .desc{ opacity:.8; }
.overlay .close{ position:absolute; top:12px; right:16px; font-size:22px; line-height:1; background:none; border:0; cursor:pointer; }
.overlay .nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:0; font-size:28px; line-height:1; padding:8px 10px; cursor:pointer; opacity:.7;}
.overlay .nav:hover{ opacity:1; }
.overlay .prev{ left:8px; }
.overlay .next{ right:8px; }

/* Overlay sizing v2: never scroll, contained visuals */
.overlay{ overflow:hidden !important; }
.overlay img{
  max-width:78vw;
  max-height:75vh;
  width:auto; height:auto;
  object-fit:contain;
  display:block; margin:0 auto;
}

.topbar{ position:relative; padding:18px 18px 10px; margin-top:28px; }

/* Centered 2-row mosaic strip */
.grid{
  display:grid;
  width:90vw;
  height:32vh;           /* slim band */
  margin: 12vh auto 0;   /* center vertically by top margin */
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column dense;
  grid-auto-columns: 1fr;
  gap:8px;
}
.grid .tile{ display:block; overflow:hidden; }
.grid img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Overlay breathing */
.overlay{ overflow:hidden !important; background:rgba(255,255,255,0.98); }
.overlay img{ max-width:82vw; max-height:68vh; object-fit:contain; margin:0 auto; display:block; }

/* ==== Project pages: scrolling gallery like VB ==== */
body.project-scroll{ overflow:auto; }
header.topbar{ position:sticky; top:0; background:#fff; }
main.project{
  max-width:1280px;
  margin:40px auto 60px;
  padding:0 18px;
}
.project h1{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px 0; color:#111;
}
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 images par ligne */
  gap: 30px;
  max-width: 1200px;
  margin: 60px auto;
}
.pgrid img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width:900px){
  .pgrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:560px){
  .pgrid{ grid-template-columns: 1fr; }
}
.pgrid img{
  width:100%; height:auto; display:block; background:#fff;
}
.subtitle {
  font-size: 12px;
  letter-spacing: .06em;
  margin-top: -10px;
  margin-bottom: 30px;
  opacity: 0.6;
  text-transform: none;
}
/* --- Grille des pages projet --- */
.pgrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr)); /* 4 par ligne */
  gap: 22px;
}

/* images propres */
.pgrid img{
  width: 100%;
  height: auto;
  display: block;
}

/* Scroll vertical ok, pas d'horizontal */
html, body{
  overflow-x: hidden;
  overflow-y: auto;
}

/* Mise en page projet */
.project{
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 18px;
}

/* Responsive : 2 colonnes en mobile */
@media (max-width: 900px){
  .pgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* ---- Project grid uniform ---- */
.pgrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
}

.pgrid figure{ margin:0; }

/* Cadre commun pour images/vidéos (même taille pour tout) */
.frame{
  width:100%;
  aspect-ratio: 3 / 4;    /* change à 4/5 ou 1/1 si tu préfères */
  overflow:hidden;
  background:#f5f5f5;
}

/* Remplir le cadre proprement */
.frame img,
.frame video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* — MOSAÏQUE SANS ESPACE — */
.grid{
  gap:0 !important;
  padding:8px !important; /* garde la marge autour */
}
.grid > *{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.grid img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
/* ==== HEADER PAGES PROJET — VERSION 2 LIGNES ==== */
.project-wrap{ max-width:1200px; margin:0 auto; padding:0 8px; }
.project-header{ margin:22px 0 16px; }

.project-title{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 6px;
}

.project-info{
  font-size:12px;
  color:#555;
  margin:0 0 18px;
}

/* === Credits repliables === */
.credits{
  max-width:1200px; margin:8px auto 22px; padding:0 8px;
}
.credits summary{
  cursor:pointer; user-select:none;
  font-size:12px; color:#555;
  list-style:none; /* Firefox */
}
.credits summary::-webkit-details-marker{ display:none; } /* Chrome/Safari */

.credits summary .toggle::before{
  content:'+'; display:inline-block; width:1em; text-align:center; margin-right:6px;
}
.credits[open] summary .toggle::before{ content:'−'; }

.credits .credit-list{
  margin:8px 0 0; padding:0; list-style:none;
  font-size:11px; color:#888; line-height:1.5;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:6px 16px;
}

/* ——— Project page basics ——— */
.project-header{ border-bottom:1px solid rgba(0,0,0,.06); padding-bottom:8px; }

body.project .pgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  max-width:1200px;
  margin:0 auto 60px;
  padding:0 8px;
}
@media (max-width:900px){ body.project .pgrid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:640px){ body.project .pgrid{ grid-template-columns:1fr; gap:12px; } }

.pgrid a{ display:block; }
.pgrid img{ width:100%; height:auto; display:block; cursor:zoom-in; }

.project-header, .credits{ position:relative; z-index:1; }  /* ne bloque pas les clics */

/* ====== PROJETS : GRILLE UNIFORME + CLIC ====== */

/* grille : 3 colonnes desktop, responsive */
body.project .pgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  max-width:1200px;
  margin:0 auto 60px;
  padding:0 8px;
  position:relative;
  z-index:1;
}
@media (max-width:900px){ body.project .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ body.project .pgrid{ grid-template-columns:1fr; } }

/* vignettes homogènes : ratio 4/5 (change si tu veux) */
.pgrid a{
  display:block;
  aspect-ratio: 4 / 5;   /* uniformise la hauteur des cases */
  overflow:hidden;       /* recadre proprement */
}
.pgrid img{
  width:100%;
  height:100%;
  object-fit:cover;      /* remplissage sans déformation */
  display:block;
  cursor:zoom-in;
}

/* Les entêtes/crédits ne bloquent pas les clics */
.project-header, .credits{ position:relative; z-index:0; }
.pgrid *{ pointer-events:auto; }

/* ====== PHOTOSWIPE (lightbox) ====== */
:root{ --pswp-bg: rgba(0,0,0,.95); }

html > .pswp{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important; height:100vh !important;
  z-index:99999 !important;
}

.pswp__img{
  width:auto !important; height:auto !important;
  max-width:none !important; max-height:none !important;
  object-fit:contain !important;
}

/* enlève les bordures 40px pendant la lightbox */
body.no-frame{
  margin:0 !important; padding:0 !important; border:0 !important;
  overflow:hidden !important; transform:none !important;
}
html.pswp--open, body.pswp--open{
  margin:0 !important; padding:0 !important; border:0 !important;
  overflow:hidden !important; transform:none !important;
}
html.pswp--open, body.pswp--open{ margin:0 !important; padding:0 !important; border:0 !important; }
.pswp__img{ max-width:100vw !important; max-height:100vh !important; object-fit:contain !important; }