/* ══════════════════════════════════════════════════════════════════
   instagram.css — le mur Instagram de l'accueil.

   Les publications ne sont PAS tirées d'Instagram : elles sont déposées
   dans l'ERP, stockées chez nous, et servies depuis notre domaine. Le
   cadre ci-dessous en reprend seulement les codes — photo de profil,
   nom, rangée d'actions, légende — parce que c'est le langage que le
   visiteur reconnaît au premier coup d'œil.

   Conséquence directe : aucun script tiers, aucun cookie tiers, rien à
   déclarer dans la bannière, et une section qui ne casse pas le jour où
   Meta change une règle.

   Les icônes cœur / commentaire / envoi sont décoratives et marquées
   `aria-hidden` : elles ne cliquent rien. Afficher un cœur cliquable
   qui ne « like » rien serait un faux bouton.
   ══════════════════════════════════════════════════════════════════ */

.insta { padding: 72px 96px; background: #fff; }
.insta__in { max-width: 1248px; margin: 0 auto; }

/* ── En-tête : profil et lien vers le compte ── */
.insta__tete {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.insta__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  /* L'anneau dégradé d'Instagram, en un seul fond : deux pseudo-éléments
     pour une bordure de 2 px n'en valent pas la peine. */
  padding: 2px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.insta__avatar--vide {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 20px;
}
.insta__ident { display: grid; gap: 2px; min-width: 0; }
.insta__nom {
  font-family: var(--font-display, inherit);
  font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: #0f0f0f;
}
.insta__bio { font-size: 13.5px; color: #6e6e6e; line-height: 1.5; }
.insta__suivre { margin-left: auto; }

/* ── La rangée de publications ──
   Un rail qui défile au doigt : sur téléphone, une grille de cartes
   hautes obligerait à faire défiler la page entière pour en voir trois.
   `scroll-snap` cale chaque carte, sinon une publication reste toujours
   à moitié sortie du cadre. */
.insta__rail {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.insta__rail::-webkit-scrollbar { display: none; }

/* ── Une publication ──

   Les deux formats cohabitent dans la même rangée sans se déformer ni
   se faire recadrer : c'est la HAUTEUR du média qui est commune, et la
   largeur de la carte qui s'en déduit.

     carré  → largeur = hauteur
     reel   → largeur = hauteur × 9/16

   L'inverse — une largeur commune — donnait un reel presque deux fois
   plus haut qu'un post, donc une rangée en dents de scie ; et forcer
   les deux dans la même boîte aurait rogné 40 % d'une des deux. */
.insta { --insta-h: 360px; }

.insta-post {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, transform .18s;
}
.insta-post--carre { width: var(--insta-h); }
.insta-post--reel  { width: calc(var(--insta-h) * 9 / 16); }
.insta-post:hover { border-color: #0f0f0f; transform: translateY(-2px); }

.insta-post__tete {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
}
.insta-post__pastille { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.insta-post__compte {
  font-size: 13.5px; font-weight: 700; color: #0f0f0f;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.insta-post__points { margin-left: auto; color: #8a8a8a; letter-spacing: 1px; flex-shrink: 0; }

.insta-post__media {
  position: relative; background: #f2f2f2;
  width: 100%; height: var(--insta-h);
}
.insta-post__media img,
.insta-post__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Le chevron « reel », posé sur le média. */
.insta-post__reel {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}

.insta-post__actions {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 6px;
  color: #0f0f0f;
}
.insta-post__actions svg { width: 22px; height: 22px; flex-shrink: 0; }

.insta-post__legende {
  padding: 0 12px 12px;
  font-size: 13px; line-height: 1.5; color: #444;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Pousse la légende en bas : sans ça, deux cartes de largeurs
     différentes alignent mal leurs pieds quand l'une n'a qu'une ligne. */
  margin-top: auto;
}
.insta-post__legende b { color: #0f0f0f; font-weight: 700; }

/* ── Adaptation ──
   Une seule variable à changer : toutes les largeurs en découlent. */
@media (max-width: 1024px) { .insta { padding: 56px 40px; --insta-h: 320px; } }
@media (max-width: 768px) {
  .insta { padding: 44px 20px; --insta-h: 300px; }
  /* Le bouton passe sous le profil et prend toute la largeur : à 375 px,
     « Nous suivre » poussé à droite écrasait le nom du compte. */
  .insta__suivre { margin-left: 0; width: 100%; }
  .insta__avatar { width: 48px; height: 48px; }
  .insta__nom { font-size: 16px; }
  /* Le rail déborde volontairement de la gouttière pour que la carte
     suivante soit amorcée au bord de l'écran — c'est ce qui dit qu'on
     peut faire glisser. */
  .insta__rail {
    margin: 0 -20px; padding: 0 20px 8px;
    scroll-padding-left: 20px;
  }
}
@media (max-width: 420px) {
  .insta { --insta-h: 270px; }
}

/* Une vidéo qui démarre seule est une animation : on la laisse à
   l'arrêt pour qui a demandé moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
  .insta-post { transition: none; }
}