/* instagram-feed.css — encart "coupure de presse" dans la section Qui
   Hérite des variables CSS du site (voir css/style.css :root).
   Layout 2 colonnes : texte à gauche, image/carousel à droite.
   Le cadre image épouse le VRAI ratio de l'image (lu par JS au chargement :
   1/1, 4/5, 9/16…) → jamais de bandes vides autour de l'image.
   L'image reste en object-fit: contain (pas de crop) → le texte des visuels
   Instagram reste entièrement lisible (ex: cartes "méga-feu"). */

/* Pas de boîte blanche : l'encart vit sur le fond de la section, comme le
   texte "Qui sommes-nous" au-dessus. Seul l'aspect "polaroid" de l'image
   crée le contraste blanc, dans le langage visuel du site (Une, poster A2). */
.ig-clip {
  margin-top: 28px;
}

/* --- Ruban kraft + date --- */
.ig-clip-tape {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.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;
}

/* --- Corps : 2 colonnes (texte | polaroid) --- */
.ig-clip-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
}

/* Colonne texte, posée sur le fond de la section */
.ig-clip-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  min-width: 0;
  max-height: calc(min(56vh, 540px) + 60px);
}
.ig-clip-caption {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--noir);
  /* La caption remplit la hauteur de l'image, scroll si plus long */
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--kraft) transparent;
}
.ig-clip-caption::-webkit-scrollbar { width: 8px; }
.ig-clip-caption::-webkit-scrollbar-thumb {
  background: var(--kraft);
  border-radius: 4px;
}
.ig-clip-permalink {
  font-family: var(--font-sec);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rouge);
  border-bottom: 2px solid var(--rouge);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color .15s, border-color .15s;
}
.ig-clip-permalink:hover {
  color: var(--rouge-dark);
  border-color: var(--rouge-dark);
}

/* Colonne média / carousel : largeur naturelle, centrée sur l'image */
.ig-clip-media {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ig-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Le "polaroid" : cadre blanc enroulé autour de l'image (liseré plus épais
   en bas, où vient se poser le compteur), comme la Une et le poster A2.
   C'est l'IMAGE qui porte le ratio (mis à jour par JS au chargement :
   naturalWidth/naturalHeight) → le cadre colle toujours à l'image,
   jamais de bandes vides. */
.ig-carousel-frame {
  position: relative;
  padding: 14px 14px 44px;
  background: var(--white);
  border: var(--border-2);
  box-shadow: var(--shadow);
  transform: rotate(1.2deg);
  transition: transform .2s, box-shadow .2s;
}
.ig-clip:hover .ig-carousel-frame {
  transform: rotate(0deg) translate(-2px,-2px);
  box-shadow: var(--shadow-lg);
}
.ig-carousel-frame img {
  aspect-ratio: 4 / 5;
  height: min(56vh, 540px);
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  user-select: none;
}
/* Images paysage (rare) : on inverse la contrainte */
.ig-carousel-frame.ig-frame--wide img {
  height: auto;
  width: min(62vw, 560px);
}
.ig-carousel-nav {
  flex-shrink: 0;
  align-self: center;
  width: 36px;
  height: 36px;
  border: var(--border-2);
  background: var(--white);
  color: var(--noir);
  font-family: var(--font-sec);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--noir);
  transition: transform .12s, background .12s, color .12s;
}
.ig-carousel-nav:hover {
  background: var(--noir);
  color: var(--cream);
  transform: translate(-1px,-1px);
}
.ig-carousel-nav:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--noir); }
/* Compteur (1/N) : badge kraft calligraphié dans le liseré blanc du bas,
   comme la légende d'un polaroid.
   (avant : bottom: -28px → rogné par l'overflow du parent, invisible) */
.ig-carousel-counter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) rotate(1.2deg);
  z-index: 2;
  font-family: var(--font-sec);
  font-style: italic;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--noir);
  opacity: 0.55;
  padding: 2px 6px;
}

/* --- Intro sous l'encart --- */
.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);
}

/* Le lien Cause Commune suit l'encart (sorti de la grille .qui-right) */
.ig-clip + .cc-link { margin-top: 20px; }

/* --- Responsive : empile texte/media sur petit écran ---
   Les flèches passent en superposition sur le polaroid, et l'image est
   contrainte en LARGEUR (avec son vrai ratio) : sinon la rangée
   bouton+image+bouton (~424px) étirait toute la section au-delà du
   viewport et le texte "Qui sommes-nous" se retrouvait coupé. */
@media (max-width: 640px) {
  .ig-clip { margin-top: 20px; }
  .ig-clip-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .ig-clip-media { order: -1; align-self: center; max-width: 100%; }
  .ig-carousel { display: block; max-width: 100%; }
  .ig-carousel-frame { margin: 0 auto; }
  .ig-carousel-frame img {
    width: calc(100vw - 120px);
    max-width: 340px;
    height: auto;
    max-height: 70vh;
  }
  .ig-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(1.2deg);
    z-index: 3;
  }
  .ig-carousel-prev { left: -6px; }
  .ig-carousel-next { right: -6px; }
  .ig-clip-text { max-height: none; }
  .ig-clip-caption { flex: none; overflow: visible; max-height: 200px; overflow-y: auto; }
}

/* 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); }
.ig-clip:not(.ig-clip--loaded) .ig-clip-permalink { visibility: hidden; }