/* Section « Instagram » (partials/instagram-feed.php). Monochrome, seul le glyphe garde ses couleurs de marque. */
.ig-defs{position:absolute;width:0;height:0;overflow:hidden}

.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(28px,5vw,70px);margin-bottom:clamp(26px,3.4vw,40px)}
.ig-head h2{max-width:620px;margin:0}
.ig-head-side{max-width:340px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ig-head-side p{color:var(--muted);font-size:14px;margin:0}
.ig-handle{color:var(--ink);font-weight:500;border-bottom:1px solid currentColor}
.ig-handle:hover{color:#000}
.ig-head-side .socials a{width:44px;height:44px}

/* 28/10 : tuiles au format Reels (9:16), interface Instagram en surimpression.
   Un clic = lecture/pause, double-clic (ou double appui) = ouvrir le post (instagram.js). */
.ig-grid{display:flex;gap:16px;margin:0;padding:4px 0 14px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin}
.ig-grid>li{flex:0 0 clamp(220px,19vw,270px);scroll-snap-align:start}
.ig-reel{position:relative;display:block;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#0f0f0f;color:#fff;text-decoration:none;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.6);user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.ig-reel:focus-visible{outline:2px solid #111;outline-offset:3px}
.ig-media{position:absolute;inset:0;display:block}
.ig-media img,.ig-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-media--contain img,.ig-media--contain video{object-fit:contain}
.ig-media video{opacity:0;transition:opacity .25s}
.ig-media.is-playing video{opacity:1}
.ig-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.78) 100%);pointer-events:none}
.ig-top{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:center;gap:8px;font:600 12.5px/1.2 'Poppins',Arial,sans-serif}
.ig-avatar{flex:none;width:30px;height:30px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#fdf497,#fd5949 45%,#d6249f 60%,#285aeb)}
.ig-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid #0f0f0f;background:#ddd}
.ig-user{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.ig-kind{flex:none;display:grid;place-items:center}
.ig-kind .ig-glyph{width:18px;height:18px}
.ig-side{position:absolute;right:10px;bottom:74px;display:flex;flex-direction:column;gap:16px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.ig-bottom{position:absolute;left:12px;right:48px;bottom:12px;display:flex;flex-direction:column;gap:5px}
.ig-caption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.4;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ig-date{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.ig-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.42);backdrop-filter:blur(2px);transition:opacity .2s,transform .2s;pointer-events:none}
.ig-reel.is-playing .ig-play{opacity:0;transform:translate(-50%,-50%) scale(.85)}
.ig-hint{position:absolute;left:50%;top:44px;transform:translateX(-50%);white-space:nowrap;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.6);font-size:11px;opacity:0;transition:opacity .2s;pointer-events:none}
.ig-reel:hover .ig-hint,.ig-reel:focus-visible .ig-hint{opacity:1}
.ig-reel.is-opening{transform:scale(.97);transition:transform .15s}
.ig-help{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.ig-feed--compact{padding:clamp(40px,6vw,80px) 0 clamp(50px,7vw,100px);border-top:1px solid var(--line)}
.ig-feed--compact .ig-title-compact{font-size:clamp(28px,3vw,40px)}
@media(max-width:800px){.ig-head{flex-direction:column;align-items:flex-start}.ig-grid>li{flex-basis:62%}.ig-hint{display:none}}
@media(prefers-reduced-motion:reduce){.ig-media video,.ig-play,.ig-hint,.ig-reel.is-opening{transition:none}}

/* 29/10 : bande Instagram = rail partagé (.pi-rail, site.css), 3,5 tuiles visibles, boutons ← → (site.js).
   Les boutons se cachent quand toutes les tuiles tiennent dans la largeur (instagram.js). */
.ig-rail-controls{justify-content:flex-end;margin:-14px 0 18px}
.ig-rail-controls[hidden]{display:none}
body:not(#_) .ig-grid.pi-rail{padding:12px 8px 30px;margin:-12px -8px -18px;scrollbar-width:none}
body:not(#_) .ig-grid.pi-rail>li{flex:0 0 calc((100% - 3 * 16px) / 3.5);min-width:0}
@media(max-width:1000px){body:not(#_) .ig-grid.pi-rail>li{flex-basis:calc((100% - 16px) / 2.3)}}
@media(max-width:760px){body:not(#_) .ig-grid.pi-rail>li{flex-basis:82%}.ig-rail-controls{margin:-8px 0 14px}}
.ig-rail-controls .round[disabled]{opacity:.35;cursor:default}

.ig-avatar--brand img{object-fit:contain;background:#fff}
