/* ═══════════════════════════════════════════════════════════
   Mur Instagram — @dialect.app
   Statique, sans JS tiers ni cookie. Les vignettes sont servies
   depuis /images/ig/ (voir scripts/instagram_sync/).
   Réutilise les tokens de la home (--card, --line, --brand…).
   ═══════════════════════════════════════════════════════════ */

.ig-wall { padding-top: 0; }

.ig-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 18px; margin-bottom: 28px;
}
.ig-head h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; margin-top: 10px; }
.ig-head p { color: var(--ink-2); max-width: 46ch; margin-top: 10px; }

.ig-handle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  font: 600 15px/1 Inter, sans-serif; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ig-handle:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--line-strong); }
.ig-handle svg { width: 20px; height: 20px; flex: none; }

/* ----- Grille ----- */
.ig-grid {
  display: grid; gap: 14px;
  /* Nombre de colonnes fixe : ig_inject.py ne pose que des lignes pleines (6 ou 12 cases). */
  grid-template-columns: repeat(6, 1fr);
}
.ig-card {
  position: relative; display: block; overflow: hidden;
  border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
  text-decoration: none; color: inherit; aspect-ratio: 1 / 1;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ig-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.ig-card img { width: 100%; height: 100%; object-fit: cover; }

.ig-card .ig-cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 12px 11px;
  font: 500 12.5px/1.4 Inter, sans-serif; color: #fff;
  background: linear-gradient(to top, rgba(28,24,18,.88), rgba(28,24,18,0));
}
/* Le clamp vit sur un enfant en flux : Chrome rend « block » tout élément
   absolument positionné, ce qui annulerait -webkit-box sur .ig-cap. */
.ig-card .ig-cap > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ig-badge {
  position: absolute; top: 9px; right: 9px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(28,24,18,.62); backdrop-filter: blur(6px);
  font: 600 10.5px/1 Inter, sans-serif; letter-spacing: .04em; color: #fff;
}
.ig-badge svg { width: 11px; height: 11px; }

/* ----- Carte « suivre » en fin de grille ----- */
.ig-card--follow {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 18px;
  background: var(--card); border-style: dashed; border-color: var(--line-strong);
}
.ig-card--follow b { font: 700 15px/1.3 Outfit, Inter, sans-serif; }
.ig-card--follow span { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.ig-card--follow svg { width: 30px; height: 30px; color: var(--brand-text); }

/* ----- État sans post curé : bandeau seul ----- */
.ig-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  padding: 26px 28px; border-radius: 22px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.ig-strip .ig-strip-text { flex: 1 1 320px; }
.ig-strip b { display: block; font: 700 19px/1.3 Outfit, Inter, sans-serif; }
.ig-strip p { color: var(--ink-2); margin-top: 5px; font-size: 14.5px; }

/* ----- Lien social du pied de page ----- */
.foot-social { display: inline-flex; align-items: center; gap: 8px; }
.foot-social svg { width: 16px; height: 16px; flex: none; }

@media (max-width: 980px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ig-head { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-card, .ig-handle { transition: none; }
  .ig-card:hover, .ig-handle:hover { transform: none; }
}