*{ box-sizing:border-box; }
    body{
      margin:0;
      overflow-x:hidden;
    }


    /* --- Masonry style (Pinterest) --- */
    .grid{
      padding:18px 16px 42px;
      max-width:1200px;
      margin:0 auto;
      columns: 5 220px;      /* nb de colonnes + largeur min */
      column-gap: 14px;
    }

@media (max-width: 1100px){ .grid{ columns: 4 220px; } }
@media (max-width: 900px){  .grid{ columns: 3 210px; } }
@media (max-width: 650px){  .grid{ columns: 2 200px; } }

/* garde 2 colonnes sur mobile */
@media (max-width: 420px){  .grid{ columns: 2 160px; } }


    .card{
      break-inside: avoid;
      margin: 0 0 14px;
      border-radius: 18px;
      overflow:hidden;
      position:relative;
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      transform: translateZ(0);
      cursor: pointer;
      user-select:none;
    }

    .card img{
      width:100%;
      display:block;
      height:auto;
      transform: scale(1);
      transition: transform .25s ease, filter .25s ease;
      filter: saturate(1.05) contrast(1.05);
    }

    .card:hover img{
      transform: translateY(-2px) scale(1.03);
      filter: saturate(1.1) contrast(1.1);
    }

    .card::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(to top, rgba(0,0,0,.35), transparent 45%);
      opacity:.0;
      transition: opacity .25s ease;
      pointer-events:none;
    }
    .card:hover::after{ opacity:.65; }

    .badge{
      position:absolute;
      left:10px;
      bottom:10px;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      color: #d50047;
      background-color: white;
      border:1px solid #d50047;
      backdrop-filter: blur(6px);
      opacity:0;
      transform: translateY(6px);
      transition: opacity .25s ease, transform .25s ease;
    }
    .card:hover .badge{
      opacity:1;
      transform: translateY(0);
    }

    /* --- Lightbox fullscreen + carousel --- */
    .lightbox{
      position:fixed;
      inset:0;
      display:none;
      z-index:999;
      background: rgba(0,0,0,.82);
      backdrop-filter: blur(10px);
    }
    .lightbox.open{ display:block; }

    .lb-topbar{
      position:absolute;
      left:0; right:0; top:0;
      padding:14px 14px;
      gap:10px;
      background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
    }
    .lb-counter{
      color: #d50047;
      max-width: 80px;
      max-height: 34px;
      font-size:13px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid #d50047;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 12px;
    }
    .lb-btn{
      border:1px solid #d50047;
      background-color: white;
      color: #d50047;
      border-radius: 12px;
      padding: 10px 12px;
      cursor:pointer;
      transition: 0.2s;
      backdrop-filter: blur(6px);
    }
    .lb-btn:hover{background: #d50047; color: white; }
    .lb-btn:active{ transform: none !important; }

    .lb-stage{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:70px 16px 26px; /* laisse la place à la topbar */
    }

 

    .lb-figure{
      max-width:min(1100px, 96vw);
      max-height: calc(100vh - 110px);
      width: 100%;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .lb-figure img{
      max-width:100%;
      max-height: calc(100vh - 110px);
      border-radius: 18px;
      box-shadow: 0 20px 70px rgba(0,0,0,.55);
      object-fit: contain;
    }

    .navvv{
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 18px;
      line-height: 1;
    }
    .navvv.prev{ left: 16px; }
    .navvv.next{ right: 16px; }

@media (max-width: 700px){
.navvv{ width:44px; height:44px; border-radius:14px; top: 95%;}
.lb-stage{ padding:64px 12px 18px; }

}

    /* Empêche le scroll du body quand lightbox ouverte */
    body.locked{ overflow:hidden; }

    /* --- HOTFIX: assure que les boutons reçoivent les clics --- */
.lightbox { pointer-events: auto; }
.lb-topbar, .nav { z-index: 1002; pointer-events: none; }
.lb-topbar * , .nav { pointer-events: auto; } /* les boutons eux, oui */

.lb-stage { z-index: 1000; }                  /* en dessous des boutons */
.lb-figure { pointer-events: none; }          /* évite que le conteneur bouffe les clics */
.lb-figure img { pointer-events: auto; }      /* l'image reste interactive (pour swipe/clic) */
.nav { outline: 2px solid red; }

#lightbox .lb-btn,
#lightbox .lb-btn:active,
#lightbox .lb-btn:focus,
#lightbox .lb-btn:focus-visible{
  transform: none !important;
}