/* instagram-feed.css — encart "coupure de presse" dans la section Qui
   Hérite des variables CSS du site (voir css/style.css :root). */

.ig-clip {
  background: var(--white);
  border: var(--border-4);
  box-shadow: var(--shadow);
  padding: 20px;
  transform: rotate(-1deg);
  transition: transform .2s, box-shadow .2s;
}
.ig-clip:hover {
  transform: rotate(0deg) translate(-3px,-3px);
  box-shadow: var(--shadow-lg);
}

.ig-clip-tape {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ig-clip-tape > span:first-child {
  display: inline-block;
  font-family: var(--font-sec);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--kraft);
  color: var(--noir);
  padding: 4px 12px;
  border: var(--border-2);
}
.ig-clip-date {
  font-family: var(--font-sec);
  font-size: 0.6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.55;
}

.ig-clip a {
  display: block;
  border: var(--border-2);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cream-dark);
}
.ig-clip a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.ig-clip a:hover img { transform: scale(1.03); }

.ig-clip-caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 14px 2px 0;
  opacity: 0.8;
}

.ig-clip-intro {
  font-family: var(--font-sec);
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 16px 2px 0;
  padding-top: 12px;
  border-top: 2px dashed var(--noir);
}

/* Tant que le post n'est pas chargé, on garde l'encart discret */
.ig-clip:not(.ig-clip--loaded) .ig-clip-caption::before {
  content: "Chargement…";
  opacity: 0.4;
  font-style: italic;
}
.ig-clip:not(.ig-clip--loaded) .ig-clip-caption { color: var(--noir); }