/*
 * Les visuels Instagram du club : leur style par défaut.
 *
 * Quatre endroits les montrent :
 * - le bandeau « Le club sur Instagram » (.cnpr-ig-bandeau), sous les actus :
 *   les dernières photos en vignettes carrées, vers Instagram ;
 * - les cartes rendues par cnpr_instagram_render_cpt_card() dans la famille de
 *   cartes d'un thème (.news-item, .news-card…) : l'extension n'y ajoute que
 *   ce qui est à elle, le cadre carré du visuel, la pastille et le bouton
 *   Instagram ;
 * - la page d'une publication (.ig-post), une colonne à la manière
 *   d'Instagram ;
 * - le bloc [cnpr_instagram] (.cnpr-instagram), la dernière publication.
 *
 * LE CONTRAT AVEC LE THÈME (docs/theme-et-extensions.md) :
 * - ce fichier ne lit QUE les jetons --cnpr-*, toujours avec une valeur de
 *   repli. Les seules couleurs écrites en dur sont celles de la marque
 *   Instagram (le dégradé du bouton, de la pastille et de l'avatar) : elles
 *   disent « ceci vient d'Instagram », pas « ceci est le club » ;
 * - ses sélecteurs restent bas (une classe, deux au plus). Deux classes quand
 *   il faut l'emporter sur une règle du thème chargée après (le cadre 16:9 de
 *   .news-item__media, la couleur de .news-card__pill--cat, la forme de .btn) ;
 * - la page d'une publication est un gabarit ENTIER de l'extension
 *   (templates/single-cnpr-instagram.php) : elle suit la largeur de l'écran
 *   (requête @media). Une requête @container sur sa colonne ferait de celle-ci
 *   un contexte de mise en forme, et la marge du lien de retour cesserait de
 *   se fondre avec celle de la page (16 px de plus en haut).
 */

/* --- Le visuel dans une carte ---------------------------------------------
   Un visuel Instagram est une affiche : l'information est écrite DANS
   l'image. La carte la montre donc entière, dans un cadre carré (la grille
   d'Instagram), et une copie floutée de la même image (--cnpr-ig-fond, posée
   par l'extension sur le lien) comble les bandes des formats portrait et
   paysage. Deux classes : le cadre 16:9 des cartes du thème se charge après. */
.cnpr-ig-media.news-item__media,
.cnpr-ig-media.news-card__media {
  height: auto;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cnpr-ig-media::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  background: var(--cnpr-ig-fond, none) center / cover no-repeat;
  filter: blur(18px) saturate(1.1);
  opacity: 0.85;
}
.cnpr-ig-media .news-item__image,
.cnpr-ig-media .news-card__image {
  object-fit: contain;
}

/* La pastille « Instagram » de la page des actus, aux couleurs de la marque. */
.news-card__pill.news-card__pill--instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border: none;
}

/* --- Le bandeau « Le club sur Instagram » ---------------------------------
   Sous les actus, à part d'elles : un titre, une phrase, « Suivre @clubcnpr »,
   et les dernières photos en carrés, comme la grille d'un profil Instagram.
   Ici l'image est ROGNÉE (cover), à l'inverse des cartes : la vignette donne
   l'ambiance, l'affiche entière est sur Instagram, à un clic. */
.cnpr-ig-bandeau {
  container-type: inline-size;
  margin-top: 56px;
  color: var(--cnpr-couleur-texte, #16284f);
}
.cnpr-ig-bandeau__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 20px;
}
.cnpr-ig-bandeau__titre {
  margin: 0;
  font-family: var(--cnpr-police-titre, inherit);
  font-size: 26px;
  line-height: 1.2;
  color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-ig-bandeau__texte {
  margin: 6px 0 0;
  color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
/* « Suivre » n'est pas l'action du site : cerclé, pas rempli. */
.cnpr-ig-bandeau__suivre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid var(--cnpr-couleur-titre, #1e3f94);
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cnpr-couleur-titre, #1e3f94);
  text-decoration: none;
  white-space: nowrap;
}
.cnpr-ig-bandeau__suivre:hover,
.cnpr-ig-bandeau__suivre:focus-visible {
  background: var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-ig-bandeau__suivre svg { flex-shrink: 0; }
.cnpr-ig-bandeau__photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cnpr-ig-bandeau__photos li { margin: 0; }
.cnpr-ig-bandeau__photo {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--cnpr-rayon, 20px) * 0.7);
  background: var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-ig-bandeau__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.cnpr-ig-bandeau__photo:hover img { transform: scale(1.04); }
.cnpr-ig-bandeau__photo:focus-visible {
  outline: 3px solid var(--cnpr-couleur-titre, #1e3f94);
  outline-offset: 3px;
}
@container (max-width: 560px) {
  .cnpr-ig-bandeau__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnpr-ig-bandeau__titre { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cnpr-ig-bandeau__photo img { transition: none; }
  .cnpr-ig-bandeau__photo:hover img { transform: none; }
}

/* --- Le bouton « Voir la publication » / « Voir sur Instagram » -----------
   La forme (arrondi, marges, police) est celle des boutons du thème (.btn)
   quand il en a : la règle sous :where() ne pèse rien, elle ne sert que sans
   thème, et cède à .btn même quand cette feuille arrive après lui (en pied de
   page). La marque (dégradé, texte blanc, ombre) l'emporte sur .btn : deux
   classes. */
:where(.cnpr-instagram__cta-link) {
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.cnpr-instagram__cta-link.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border: none;
  box-shadow: 0 8px 20px rgba(228, 64, 95, 0.25);
}
.cnpr-instagram__cta-link.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(228, 64, 95, 0.35);
}
.cnpr-instagram__cta-link svg {
  flex-shrink: 0;
}

/* --- La page d'une publication --------------------------------------------
   Une colonne de 614 px, la largeur d'une publication sur instagram.com. */
.ig-post-layout {
  padding-top: 28px;
  padding-bottom: 56px;
}

.ig-post__back {
  max-width: 614px;
  margin: 16px auto 18px;
}
.ig-post__back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 13px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--cnpr-couleur-texte-doux, #4c5f80);
  background: var(--cnpr-fond, #ffffff);
  border: 1px solid var(--cnpr-filet, #d3eefb);
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ig-post__back-link:hover,
.ig-post__back-link:focus-visible {
  color: var(--cnpr-couleur-titre, #1e3f94);
  border-color: var(--cnpr-couleur-titre, #1e3f94);
  box-shadow: 0 6px 16px rgba(16, 32, 53, 0.12);
  outline: none;
}
.ig-post__back-arrow {
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.ig-post__back-link:hover .ig-post__back-arrow,
.ig-post__back-link:focus-visible .ig-post__back-arrow {
  transform: translateX(-3px);
}

/* La publication : une carte, son en-tête, l'image, la légende. */
.ig-post {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 614px;
  margin: 0 auto;
  padding: 18px;
  overflow: hidden;
  background: var(--cnpr-fond, #ffffff);
  border: 1px solid var(--cnpr-filet, #d3eefb);
  border-radius: var(--cnpr-rayon, 20px);
  box-shadow: var(--cnpr-ombre, 0 8px 18px rgba(16, 32, 53, 0.08));
}
.ig-post p { margin: 0; }

.ig-post__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cnpr-filet, #d3eefb);
}
/* L'avatar : le dégradé de la marque Instagram. */
.ig-post__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 999px;
  color: #fff;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.ig-post__identity {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ig-post__username {
  font-weight: 600;
  font-size: 14px;
  color: var(--cnpr-couleur-texte, #16284f);
  text-decoration: none;
}
.ig-post__username:hover,
.ig-post__username:focus-visible {
  text-decoration: underline;
}
.ig-post__date {
  font-size: 12px;
  color: var(--cnpr-couleur-texte-doux, #4c5f80);
}

/* Le visuel, entier, sur fond noir comme sur Instagram ; un clic l'agrandit
   (la visionneuse, visionneuse.css). */
.ig-post__media {
  margin: 0;
  background: #000;
  line-height: 0;
}
.ig-post__media a {
  display: block;
  cursor: zoom-in;
}
.ig-post__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  margin: 0 auto;
}

.ig-post__body {
  padding: 18px 16px 20px;
}
.ig-post__title {
  margin: 4px 16px 0;
  font-size: 20px;
  line-height: 1.3;
  color: var(--cnpr-couleur-titre, #1e3f94);
}
.ig-post__caption {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cnpr-couleur-texte, #16284f);
  white-space: normal;
  overflow-wrap: break-word;
}


/* Écran étroit (un téléphone) : moins d'air au-dessus, le lien de retour
   décollé du bord. La carte garde son cadre, comme les autres pages. */
@media (max-width: 640px) {
  .ig-post-layout { padding-top: 16px; }
  .ig-post__back { padding: 0 16px; }
}

/* --- Le bloc [cnpr_instagram] : la dernière publication -------------------- */
.cnpr-instagram {
  padding: 26px;
  border: 1px solid var(--cnpr-filet, #d3eefb);
  border-radius: var(--cnpr-rayon, 20px);
  background: linear-gradient(135deg, var(--cnpr-fond, #ffffff) 0%, var(--cnpr-fond-doux, #eaf7fd) 100%);
  color: var(--cnpr-couleur-texte, #16284f);
}
.cnpr-instagram__header {
  margin-bottom: 18px;
}
.cnpr-instagram__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
/* Le logo Instagram, à la couleur de la marque. */
.cnpr-instagram__icon {
  width: 28px;
  height: 28px;
  color: #e4405f;
}
.cnpr-instagram__header h2 {
  margin: 0;
  font-size: 22px;
  color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-instagram__header p {
  margin: 0;
  color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-instagram__fallback {
  text-align: center;
  padding: 24px;
  background: var(--cnpr-fond, #ffffff);
  border-radius: var(--cnpr-rayon, 20px);
  border: 1px solid var(--cnpr-filet, #d3eefb);
}
.cnpr-instagram__fallback p {
  margin: 0 0 12px;
  color: var(--cnpr-couleur-texte-doux, #4c5f80);
}