/* ==========================================================================
   Corps & Voix — Carrousel Instagram natif et lightbox
   Fichier : assets/css/instagram.css
   Les couleurs terracotta suivent les thèmes saisonniers (variables --tc et --tc-dark).
   ========================================================================== */

.ig-feed {
  --ig-terra: rgb(var(--tc, 195 107 78)); --ig-terra-dark: rgb(var(--tc-dark, 139 74 48)); --ig-sauge: #8A9A86;
  --ig-cream: #FDFBF7; --ig-ink: #2C2523;
  --pv: 2; --ig-gap: .625rem;
  position: relative;
}
@media (min-width: 640px) { .ig-feed { --pv: 4; --ig-gap: .875rem; } }
@media (min-width: 1024px) { .ig-feed { --pv: 6; --ig-gap: 1rem; } }

/* Piste : défilement natif avec accroche (tactile, trackpad, clavier) */
.ig-stage { position: relative; }
.ig-track {
  display: flex; gap: var(--ig-gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ig-track::-webkit-scrollbar { display: none; }
.ig-feed.is-error .ig-track { display: none; }

/* Cartes carrées */
.ig-card {
  position: relative; flex: 0 0 calc((100% - (var(--pv) - 1) * var(--ig-gap)) / var(--pv)); aspect-ratio: 1 / 1;
  scroll-snap-align: start; overflow: hidden; isolation: isolate; padding: 0; border: 0; border-radius: .75rem;
  background: #F3EBDD; color: var(--ig-ink); cursor: pointer; text-align: left;
}
.ig-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ig-card:focus-visible, .ig-arrow:focus-visible, .ig-pause:focus-visible, .ig-close:focus-visible, .ig-cta:focus-visible {
  outline: 3px solid var(--ig-terra-dark); outline-offset: 2px;
}
.ig-skel { cursor: default; background: linear-gradient(100deg, #F3EBDD 30%, #FBF7EF 50%, #F3EBDD 70%) 0 0 / 200% 100%; animation: ig-shimmer 1.4s linear infinite; }
@keyframes ig-shimmer { to { background-position: -200% 0; } }

/* Survol : extrait, date et icône (grands écrans) */
.ig-over {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem;
  padding: 1rem; background: rgba(253, 251, 247, .92); font-size: .8125rem; line-height: 1.5; opacity: 0; transition: opacity .25s ease;
}
.ig-over p {
  margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.ig-over-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .75rem; font-weight: 500; color: var(--ig-terra-dark); }
.ig-over-foot time { color: rgba(44, 37, 35, .78); }
.ig-over-foot svg { width: 20px; height: 20px; flex: none; }
.ig-card:focus-visible .ig-over { opacity: 1; }
@media (hover: hover) and (min-width: 1024px) {
  .ig-card:hover .ig-over { opacity: 1; }
  .ig-card:hover img { transform: scale(1.04); }
}

/* Flèches (écrans >= 640 px) et barre de commande */
.ig-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 9999px; border: 1px solid rgba(44, 37, 35, .12);
  background: rgba(253, 251, 247, .94); color: var(--ig-ink); box-shadow: 0 8px 22px -8px rgba(44, 37, 35, .45);
  transition: transform .2s ease, color .2s ease, background-color .2s ease;
}
.ig-arrow:hover { background: var(--ig-cream); color: var(--ig-terra-dark); transform: scale(1.08); }
.ig-arrow svg, .ig-pause svg { width: 22px; height: 22px; }
.ig-prev { left: .5rem; }
.ig-next { right: .5rem; }
@media (min-width: 640px) { .ig-feed.is-looping .ig-arrow { display: inline-flex; } }

.ig-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; margin-top: 1rem; }
.ig-status { margin: 0; font-size: .875rem; color: rgba(44, 37, 35, .8); }
.ig-status a, .ig-status button { color: var(--ig-terra-dark); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.ig-pause {
  display: none; align-items: center; gap: .5rem; min-height: 44px; margin-left: auto; padding: 0 1.1rem;
  border: 1px solid rgba(44, 37, 35, .25); border-radius: 9999px; background: transparent; color: var(--ig-ink);
  font-size: .8125rem; font-weight: 500; transition: color .2s ease, border-color .2s ease;
}
.ig-pause svg { width: 16px; height: 16px; }
.ig-pause:hover { color: var(--ig-terra-dark); border-color: var(--ig-terra-dark); }
.ig-feed.is-looping .ig-pause { display: inline-flex; }
.ig-pause .ig-i-play, .ig-pause[data-paused="true"] .ig-i-pause { display: none; }
.ig-pause[data-paused="true"] .ig-i-play { display: block; }

/* Lightbox */
html.ig-lock { overflow: hidden; scrollbar-gutter: stable; }
.ig-modal {
  box-sizing: border-box; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ig-ink); overflow: hidden;
}
.ig-modal[open] { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.ig-modal::backdrop { background: rgba(44, 37, 35, .78); backdrop-filter: blur(3px); }
.ig-sheet {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  width: min(1080px, 100%); height: min(760px, 100%); overflow: hidden; border-radius: 1.25rem;
  background: var(--ig-cream); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
}
.ig-media { position: relative; min-height: 0; background: var(--ig-ink); }
.ig-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ig-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ig-head { display: flex; align-items: center; gap: .875rem; padding: 1.25rem 4.25rem 1.25rem 1.5rem; border-bottom: 1px solid rgba(44, 37, 35, .1); }
.ig-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ig-terra);
  display: flex; align-items: center; justify-content: center; background: var(--ig-sauge); color: var(--ig-ink);
  font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600;
}
.ig-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ig-who { min-width: 0; }
.ig-name { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.ig-meta { margin: .25rem 0 0; font-size: .8125rem; color: rgba(44, 37, 35, .78); }
.ig-caption {
  flex: 1; min-height: 0; margin: 0; padding: 1.25rem 1.5rem; overflow-y: auto; overscroll-behavior: contain;
  white-space: pre-line; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.65;
}
.ig-tag { color: var(--ig-terra-dark); }
.ig-foot { display: flex; flex-direction: column; gap: .875rem; padding: 1rem 1.5rem 1.5rem; border-top: 1px solid rgba(44, 37, 35, .1); }
.ig-likes { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9375rem; font-weight: 500; }
.ig-likes svg { width: 20px; height: 20px; color: var(--ig-terra-dark); }
.ig-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.5rem;
  border-radius: 9999px; background: var(--ig-terra-dark); color: var(--ig-cream); font-weight: 600; text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.ig-cta:hover { transform: scale(1.03); filter: brightness(.92); }
.ig-cta svg { width: 20px; height: 20px; }
.ig-close {
  position: absolute; top: .875rem; right: .875rem; z-index: 3; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid rgba(44, 37, 35, .15); border-radius: 50%;
  background: var(--ig-cream); color: var(--ig-ink); box-shadow: 0 4px 14px -4px rgba(44, 37, 35, .4);
  transition: transform .2s ease, color .2s ease;
}
.ig-close:hover { transform: scale(1.08); color: var(--ig-terra-dark); }
.ig-close svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .ig-modal[open] .ig-sheet { animation: ig-pop .28s ease both; }
  @keyframes ig-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
}
@media (max-width: 859px) {
  .ig-modal[open] { display: block; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ig-sheet { display: block; width: 100%; height: auto; min-height: 100%; border-radius: 0; }
  .ig-media { width: 100%; aspect-ratio: 1 / 1; max-height: 70dvh; }
  .ig-head { padding-right: 1.5rem; }
  .ig-caption { overflow: visible; }
  .ig-close { position: fixed; top: max(.75rem, env(safe-area-inset-top, 0px)); right: max(.75rem, env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ig-card img, .ig-over, .ig-arrow, .ig-cta, .ig-close { transition: none; }
  .ig-skel { animation: none; }
}