.portees-container{ max-width:1100px; margin:60px auto; padding:0 20px; }
.portees-container h1{ text-align:center; margin-bottom:30px; }

.portee-bloc{
  background:#fff; border-radius:18px; padding:22px; margin-bottom:22px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}
.portee-bloc h2{ margin:0 0 14px 0; font-size:24px; }

.portee-galerie{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
}

.portee-thumb{
  padding:0; border:1px solid #eee; background:#fff; border-radius:14px;
  overflow:hidden; cursor:pointer;
}
.portee-thumb img{
  width:100%; height:160px; object-fit:cover; display:block;
  transition:transform .15s ease;
}
.portee-thumb:hover img{ transform:scale(1.03); }

.muted{ color:#777; }

/* MODAL OSD */
.osd-modal.hidden{ display:none; }
.osd-modal{
  position:fixed; inset:0; z-index:9999;
}
.osd-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,0.55);
}
.osd-panel{
  position:relative;
  width:min(1100px, 94vw);
  height:min(80vh, 800px);
  margin:6vh auto 0 auto;
  background:#111;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.osd-close{
  position:absolute; top:10px; right:10px; z-index:10;
  border:0; border-radius:12px; padding:8px 10px;
  background:rgba(255,255,255,0.12); color:#fff; cursor:pointer;
}
.osd-viewer{ width:100%; height:100%; }

@media (max-width:768px){
  .portee-thumb img{ height:140px; }
  .osd-panel{ height:78vh; margin-top:4vh; }
}