*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;}
body{font-family:"Varela Round",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#20222b;background:linear-gradient(160deg,#fff7ec 0%,#ffeef6 55%,#eef4ff 100%);
  min-height:100vh;padding:clamp(16px,4vw,40px);}
.home-top{position:fixed;top:14px;left:16px;z-index:50;color:#5b4bd6;text-decoration:none;font-weight:700;
  background:rgba(255,255,255,.92);padding:7px 14px;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.14);}
header{max-width:1000px;margin:0 auto clamp(20px,4vh,34px);text-align:center;}
header h1{font-size:clamp(1.8rem,6.5vw,3rem);font-weight:800;margin:.1em 0;
  background:linear-gradient(90deg,#c2711c,#ff5d8f,#a06bff);-webkit-background-clip:text;background-clip:text;color:transparent;}
header .count{color:#8a8f9c;font-weight:600;font-size:clamp(.9rem,2.6vw,1.05rem);}

/* damier de photos */
.board{max-width:1000px;margin:0 auto;display:grid;gap:clamp(8px,1.8vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(120px,28vw,200px),1fr));}
.board button{border:0;padding:0;cursor:pointer;background:#fff;border-radius:16px;overflow:hidden;
  aspect-ratio:1;box-shadow:0 6px 18px rgba(30,30,60,.12),0 0 0 1px rgba(0,0,0,.03);
  transition:transform .14s ease,box-shadow .14s ease;}
.board button:hover,.board button:active{transform:scale(1.03);box-shadow:0 12px 26px rgba(30,30,60,.2);}
.board img{width:100%;height:100%;object-fit:cover;display:block;}

.empty{max-width:560px;margin:0 auto;background:#fff;border-radius:26px;padding:clamp(24px,6vw,40px);
  text-align:center;box-shadow:0 12px 30px rgba(30,30,60,.12),0 0 0 1px rgba(0,0,0,.03);
  color:#6a6f7d;font-weight:600;font-size:clamp(1rem,3vw,1.15rem);line-height:1.6;}

footer{max-width:1000px;margin:clamp(24px,5vh,44px) auto 8px;text-align:center;}
footer a{color:#7a5bff;text-decoration:none;font-weight:700;}

/* plein écran */
.viewer{position:fixed;inset:0;z-index:100;background:rgba(18,16,26,.96);display:none;
  align-items:center;justify-content:center;touch-action:pan-y;}
.viewer.on{display:flex;}
.viewer img{max-width:94vw;max-height:86vh;object-fit:contain;border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);user-select:none;-webkit-user-drag:none;}
.v-close,.v-nav{position:absolute;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.16);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:inherit;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.v-close{top:16px;right:16px;width:clamp(42px,9vw,54px);height:clamp(42px,9vw,54px);font-size:clamp(1.3rem,4vw,1.7rem);}
.v-nav{top:50%;transform:translateY(-50%);width:clamp(46px,10vw,62px);height:clamp(46px,10vw,62px);
  font-size:clamp(1.6rem,5vw,2.2rem);}
.v-prev{left:12px;} .v-next{right:12px;}
.v-close:hover,.v-nav:hover{background:rgba(255,255,255,.3);}
.v-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;
  font-weight:700;font-size:clamp(.85rem,2.6vw,1rem);background:rgba(0,0,0,.4);
  padding:6px 16px;border-radius:999px;}
@media (max-width:600px){.v-nav{display:none;}}