/* ============================================================
   Instagram mosaic — nokipowlonski.com
   Chargé par index.html. Aucun script tiers : les vignettes sont
   des fichiers WebP hébergés sur ce site (instagram/thumbs/).
   ============================================================ */
.ig-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 14px}
.ig-tabs{display:flex;flex-wrap:wrap;gap:8px}
.ig-total{width:100%;margin:0 0 2px;font-size:13px;color:#000;letter-spacing:.02em}
.ig-total strong{font-size:18px;font-weight:700;margin-right:4px}
.ig-total .k{opacity:.65}
.ig-chip{border:1.5px solid #000;background:transparent;color:#000;border-radius:999px;padding:7px 12px;
  font:700 12px/1 Helvetica,Arial,sans-serif;cursor:pointer;letter-spacing:.02em;transition:background .15s,color .15s}
.ig-chip:hover,.ig-chip[aria-pressed="true"]{background:#000;color:#fff}
.ig-chip .n{opacity:.55;font-weight:400;margin-left:5px}
.ig-chip.ig-shuffle{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.ig-chip.ig-shuffle svg{width:13px;height:13px;display:block}
.ig-tabs{width:100%}
.ig-sentinel{height:1px;margin:0;padding:0}
.ig-masonry{display:flex;gap:var(--gap);align-items:flex-start;margin:0 0 16px}
.ig-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.ig-tile{display:block;position:relative;border-radius:12px;overflow:hidden;background:#111;
  transition:transform .15s ease,box-shadow .2s ease;cursor:pointer}
.ig-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.ig-tile:focus-visible{outline:3px solid #000;outline-offset:2px}
.ig-tile img{display:block;width:100%;height:auto;background:#111}
.ig-tile .ig-badge{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.95);color:#000;font-size:11px;
  padding:3px 7px;border-radius:999px;font-weight:700;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-tile .ig-kind{position:absolute;top:8px;right:8px;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.ig-tile .ig-kind svg{width:100%;height:100%;display:block}
.ig-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0 0 40px}
.ig-more{border:1.5px solid #000;background:#000;color:#fff;border-radius:999px;padding:9px 16px;
  font:700 13px/1 Helvetica,Arial,sans-serif;cursor:pointer}
.ig-more:hover{background:transparent;color:#000}
.ig-more[hidden]{display:none}
.ig-links{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;font-weight:700;margin:0;padding:0;list-style:none}
.ig-links a{color:#000;border-bottom:1.5px solid #000}
.ig-empty{font-size:13px;color:#000;opacity:.85;margin:0 0 16px}
/* Sans JavaScript (ou si le flux ne charge pas) : colonnes CSS natives */
.ig-masonry.is-static{display:block;column-count:2;column-gap:var(--gap)}
.ig-masonry.is-static .ig-tile{break-inside:avoid;margin:0 0 var(--gap)}
@media (min-width:600px){.ig-masonry.is-static{column-count:3}}
@media (min-width:900px){.ig-masonry.is-static{column-count:4}}
/* Lightbox : la publication entière, servie par ce site — carrousel maison, aucun script tiers.
   Les images ouvertes ici font 1080 px de large ; le cadre s'arrête à 900 px pour ne jamais les agrandir.
   #lbMedia est partagé avec le lecteur vidéo de la page : la classe is-post annule le cadre 16/9 d'index.html. */
.lightbox.lb-ig .lb-inner{width:min(92vw,900px)}
.lightbox.lb-ig .lb-close{z-index:6}          /* au-dessus du cadre et des flèches */
.lb-media.is-post{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;background:#000;overflow:hidden}
/* Cadre au format de la diapositive la plus haute : changer d'image ne fait pas sauter la fenêtre. */
.lb-stage{position:relative;width:100%;aspect-ratio:var(--lb-ratio,1);max-height:68vh;
  background:#000;overflow:hidden;touch-action:pan-y}
.lb-track{display:flex;height:100%;transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.lb-slide{flex:0 0 100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center;position:relative}
.lb-slide video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.lb-slide img{width:100%;height:100%;object-fit:contain;display:block;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:999px;padding:0;
  background:rgba(255,255,255,.85);color:#262626;cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:4;box-shadow:0 1px 6px rgba(0,0,0,.28);transition:background .15s,opacity .15s}
.lb-nav svg{width:15px;height:15px;display:block}
.lb-nav.prev{left:12px}
.lb-nav.next{right:12px}
.lb-nav:hover{background:#fff}
.lb-nav:disabled{opacity:0;pointer-events:none}
.lb-count{position:absolute;top:10px;left:10px;margin:0;z-index:3;background:rgba(0,0,0,.62);color:#fff;
  font:700 11px/1 Helvetica,Arial,sans-serif;padding:6px 9px;border-radius:999px;letter-spacing:.04em}
/* Points posés sur l'image, en bas au centre — comme sur Instagram. */
.lb-dots{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:2px;justify-content:center;align-items:flex-end;
  height:46px;padding-bottom:8px;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.28),rgba(0,0,0,0))}
.lb-dot{width:14px;height:14px;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center}
.lb-dot::before{content:"";width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.5);
  box-shadow:0 0 2px rgba(0,0,0,.5);transition:background .15s,transform .15s}
.lb-dot[aria-current="true"]::before{background:#fff;transform:scale(1.18)}
.lb-dot:hover::before{background:rgba(255,255,255,.85)}
.lb-stage.on-video .lb-dots{bottom:58px;height:auto;padding-bottom:0;background:none}   /* au-dessus des commandes de la vidéo */
/* Vidéo que le robot n'a pas pu recopier : son affiche et un lien vers la publication. */
.lb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.66);color:#fff;border-radius:999px;padding:10px 15px;
  font:700 12px/1 Helvetica,Arial,sans-serif;text-align:left}
.lb-play svg{width:15px;height:15px;flex:none;display:block}
.lb-play:hover{background:rgba(0,0,0,.85)}
.lb-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}
.lb-cap{background:#000;color:#fff;padding:12px 14px;font-size:13px;line-height:1.45;display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.lb-cap .txt{flex:1;white-space:pre-wrap;max-height:min(9em,20vh);overflow:auto;margin:0}   /* légende entière : elle défile */
.lb-cap .who{display:block;font-weight:700;margin-bottom:4px;overflow-wrap:anywhere}
.lb-cap a.btn{flex:none;background:#fff;color:#000;border-radius:999px;padding:8px 12px;font-weight:700;font-size:12px;white-space:nowrap}
@media (max-width:520px){
  .lb-nav{width:26px;height:26px}
  .lb-cap{flex-wrap:wrap;font-size:12px}
  .lb-cap a.btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.ig-tile,.ig-chip,.ig-more{transition:none}.lb-track{transition:none}}