:root {
    --accent:#7dd3fc;
    --text:#111;
    --muted:#444;
  }
  html, body {
    margin:0;
    height:100%;
    width:100%;
    overflow:hidden;
    background:#f2f2f2;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    color:var(--text);
    cursor:grab;
  }
  body.grabbing { cursor:grabbing; }

  /* Menu */
  .menu {
    position:fixed; top:12px; left:12px; z-index:20;
    <!-- background:rgba(255,255,255,.75);  -->
	<!-- backdrop-filter:blur(6px); -->
    <!-- border:1px solid rgba(0,0,0,.05); -->
    padding:12px; 
    cursor:default;
  }
  .menu h3 { margin:0 0 8px; font-size:16px;  }
  .menu p { margin:0 0 10px; color:black; font-size:12px;  display:inline;}
  .menu .menulink { text-decoration:none; font-weight: none; color:blue; font-size:12px; display:inline; }
  .menu .menulink:hover{ background-color : blue; font-weight: bold; text-decoration:underline;  color : white;}

  .controls { display:inline; gap:8px; margin-top:8px;  }
  
  .btn, .btnlink {
    background:rgba(0,0,0,0);
	/* color: blue; */
    border: 1px solid black;
    padding:8px 10px;
    cursor:pointer;
    color:var(--text);
    font-weight:600;
	padding : 2px;
	}
	.backbtn {
		text-decoration : none; 
		margin-right : 7px; 
		font-size:14px
		}
  .btn:hover , .btnlink:hover { background-color : black ; color : white;}
.menuzoom {
    position:fixed; bottom:12px; right:12px; z-index:20;
    padding:12px; 
    cursor:default;
  }

  /* Viewport plein écran */
  .viewport {
    position:fixed;
    inset:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    touch-action:none;
  }

  /* Track centrée verticalement */
  .track {
    display:flex;
    gap:18px;
    align-items:center;
    position:absolute;
    top:50%;
    left:0;
    transform:translate(0,-50%) scale(1);
    transform-origin:left center;
    will-change:transform;
    user-select:none;
    transition:transform .15s ease-out;
  }
  .track.smooth {
    transition:transform .35s cubic-bezier(.15,.9,.25,1);
  }

  /* Différentes tailles d’image */
  .item {
    flex:0 0 auto;
    background:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .item img,
.item video {
  width:auto;
  object-fit:contain;
  display:block;
  border:none;
  box-shadow:none;
}

.item.small img,
.item.small video { height:160px; }

.item.medium img,
.item.medium video { height:240px; }

.item.large img,
.item.large video { height:320px; }


  /* Commentaires */
  .item.comment {
    background:transparent;
    cursor:default;
	font-size : 10px;
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:left;
    max-width:300px;
  }
  .item.comment p, .item.comment h1, .item.comment a {
    color:var(--text);
    margin:0;
  }

  .legend {
    bottom:10px;
    display : inline;
    font-size:13px;
    color:var(--muted);
	
    padding:8px 10px;
  }

  /* Overlay */
  .overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,1);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:100;
  }
  .overlay.active { display:flex; }
  .overlay img {
    max-width:90vw;
    max-height:90vh;
    object-fit:contain;
  }
  .overlay-controls {
    position:absolute;
    top:20px; right:25px;
    display:flex;
    align-items:center;
    gap:20px;
  }
  .overlay-btn {
    font-size:12px;
    color:white;
    cursor:pointer;
    font-weight:bold;
    user-select:none;
	border: 1px solid white;
	margin-right : -10px;
    /* padding:0px 5px; */
	width : 18px;
	height : 18px;
	text-align : center;
	padding-top: -0px;
	
  }
  .overlay-btn:hover { background-color:white; color : black;}

  @media(max-width:600px) {
    .menu { width:200px; }
    .item.small img { height:100px; }
    .item.medium img { height:160px; }
    .item.large img { height:200px; }
  }