/*
 * Retouches du thème sur l'extension cnpr-instagram.
 *
 * Le style par défaut est dans l'extension (plugins/cnpr-instagram/assets/css) :
 * le cadre carré des visuels, le bouton et la pastille Instagram, la page
 * d'une publication, la navigation « Précédent / Suivant ». Ici, seulement ce
 * qui dépend des gabarits du thème : la page d'une publication et la
 * navigation, alignées sur la colonne des articles (pages/article.css).
 * Les cartes des actus ne viennent plus de l'extension : le thème les rend
 * lui-même (template-parts/actu.php, composants/actus.css).
 */

/* --- La page d'une publication ---------------------------------------------
   La même colonne qu'un article (pages/article.css) : pas de carte, la date,
   le titre, le visuel entier sur l'eau claire, la légende en texte courant.
   Seul un petit logo Instagram dit d'où vient la publication. */
.ig-post-layout {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-bottom: 50px;
}
.ig-post__back { max-width: none; margin: 28px 0 22px; padding: 0; }
.ig-post__back-link {
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  color: var(--soleil-gris);
}
.ig-post__back-link:hover,
.ig-post__back-link:focus-visible { box-shadow: none; color: var(--soleil-marine); text-decoration: underline; text-underline-offset: 3px; }
.ig-post__back-link:hover .ig-post__back-arrow,
.ig-post__back-link:focus-visible .ig-post__back-arrow { transform: none; }

.ig-post {
  max-width: none;
  gap: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ig-post__header { gap: 8px; padding: 0; margin-bottom: 10px; border: 0; }
.ig-post__avatar { width: 24px; height: 24px; flex-basis: 24px; }
.ig-post__avatar svg { width: 14px; height: 14px; }
/* Le logo suffit à dire « Instagram » : le nom du compte redirait ce que dit
   déjà « Voir sur Instagram », en bas. */
.ig-post__username { display: none; }
.ig-post__date { font-size: 15px; font-weight: 600; color: var(--soleil-fond); }

.ig-post__title {
  margin: 0 0 26px;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.15;
  color: var(--soleil-marine);
}
.ig-post__media {
  overflow: hidden;
  border-radius: 24px;
  background: var(--soleil-eau);
}
.ig-post__image { max-height: 82vh; }

.ig-post__body { padding: 26px 0 0; }
.ig-post__caption {
  margin-bottom: 26px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--soleil-encre);
}
.ig-post__caption a {
  color: var(--soleil-marine);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration-color: var(--soleil-ciel);
  text-underline-offset: 3px;
}
/* « Voir sur Instagram » n'est pas l'action du site : un bouton discret,
   cerclé de marine, pas le dégradé de la marque ni le jaune. */
.ig-post__cta.btn {
  gap: 10px;
  padding: 11px 20px;
  border: 2px solid var(--soleil-marine);
  border-radius: 999px;
  background: none;
  color: var(--soleil-marine);
  box-shadow: none;
  font-size: 16px;
}
.ig-post__cta.btn:hover,
.ig-post__cta.btn:focus-visible { background: var(--soleil-eau); color: var(--soleil-marine); transform: none; box-shadow: none; }

/* --- « Précédent / Suivant » ---------------------------------------------
   Au pied d'un article comme d'une publication : deux colonnes sur un filet,
   sans cartes ni majuscules. */
.billet .cnpr-post-nav,
.ig-post-layout .cnpr-post-nav {
  max-width: none;
  margin: 44px 0 0;
  padding-top: 20px;
  border-top: 2px solid var(--soleil-eau-2);
  gap: 24px;
}
.cnpr-post-nav__link {
  gap: 4px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.cnpr-post-nav__link:hover,
.cnpr-post-nav__link:focus-visible { transform: none; box-shadow: none; }
.cnpr-post-nav__link:hover .cnpr-post-nav__title,
.cnpr-post-nav__link:focus-visible .cnpr-post-nav__title { text-decoration: underline; text-decoration-color: var(--soleil-ciel); text-underline-offset: 3px; }
.cnpr-post-nav__kicker {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--soleil-gris);
}
.cnpr-post-nav__badge { display: none; }
.cnpr-post-nav__title { font-size: 17px; font-weight: 700; color: var(--soleil-marine); }