/*
 * Effets éditoriaux communs des cartes Geopolo.
 * Référence : modèle-design-codex.html / cartes du Monde diplomatique.
 * L'image naturelle se fond dans un rouge profond au survol grâce au mode
 * luminosité ; les titres, repères et flèches réagissent au même instant.
 */

:root {
  --geopolo-card-flame: #be2e0d;
  --geopolo-card-ink: #252525;
  --geopolo-card-muted: #777;
  --geopolo-card-line: #c8c5bf;
}

/* Cartes illustrées : page d'accueil, rubriques et futures grilles. */
.article-card__img-wrap,
.article-card__media,
.hero__card-img-wrap {
  overflow: hidden;
  background: var(--geopolo-card-flame) !important;
  isolation: isolate;
}

.article-card__img,
.hero__card-img {
  display: block;
  max-width: 100%;
  mix-blend-mode: normal;
  filter: none !important;
  transform: none !important;
  transition: mix-blend-mode 0s, opacity .2s ease !important;
}

.article-card:hover .article-card__img,
.article-card:focus-visible .article-card__img,
.hero__card:hover .hero__card-img,
.hero__card:focus-visible .hero__card-img {
  mix-blend-mode: luminosity;
  filter: none !important;
  transform: none !important;
}

.article-card,
.hero__card {
  transition: color .2s ease, border-color .2s ease !important;
}

.article-card:hover,
.article-card:focus-visible,
.hero__card:hover,
.hero__card:focus-visible {
  box-shadow: none !important;
  transform: none !important;
}

.article-card :is(h2, h3, .article-card__title),
.hero__card :is(h2, h3, .hero__card-title) {
  transition: color .2s ease !important;
}

.article-card:hover :is(h2, h3, .article-card__title),
.article-card:focus-visible :is(h2, h3, .article-card__title),
.hero__card:hover :is(h2, h3, .hero__card-title),
.hero__card:focus-visible :is(h2, h3, .hero__card-title) {
  color: var(--geopolo-card-flame) !important;
}

.article-card :is(.arrow, .article-card__read, .article-card__footer),
.hero__card .hero__card-link {
  transition: color .2s ease, transform .2s ease !important;
}

.article-card:hover :is(.arrow, .article-card__read),
.article-card:focus-visible :is(.arrow, .article-card__read),
.hero__card:hover .hero__card-link,
.hero__card:focus-visible .hero__card-link {
  color: var(--geopolo-card-flame) !important;
}

.article-card:hover .arrow,
.article-card:focus-visible .arrow {
  transform: translateX(4px);
}

/*
 * Articles associés des clusters : ces cartes ne possèdent pas d'image.
 * On conserve donc leur contenu et on transpose le langage du modèle sur
 * la ligne, le titre et l'appel de lecture, sans fabriquer de visuel.
 */
.cards > a.card,
a.related-item,
a.region-card {
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
  transform: none !important;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease !important;
}

.cards > a.card::before,
a.related-item::before,
a.region-card::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--geopolo-card-flame);
  content: "";
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .24s ease;
}

.cards > a.card:hover,
.cards > a.card:focus-visible,
a.related-item:hover,
a.related-item:focus-visible,
a.region-card:hover,
a.region-card:focus-visible {
  border-color: var(--geopolo-card-line) !important;
  box-shadow: none !important;
  transform: none !important;
}

.cards > a.card:hover::before,
.cards > a.card:focus-visible::before,
a.related-item:hover::before,
a.related-item:focus-visible::before,
a.region-card:hover::before,
a.region-card:focus-visible::before {
  transform: scaleX(1);
}

.cards > a.card :is(h2, h3),
a.related-item .related-item-title,
a.region-card :is(h2, h3) {
  transition: color .2s ease !important;
}

.cards > a.card:hover :is(h2, h3),
.cards > a.card:focus-visible :is(h2, h3),
a.related-item:hover .related-item-title,
a.related-item:focus-visible .related-item-title,
a.region-card:hover :is(h2, h3),
a.region-card:focus-visible :is(h2, h3) {
  color: var(--geopolo-card-flame) !important;
}

.cards > a.card > span,
a.related-item .related-tag {
  transition: color .2s ease !important;
}

.cards > a.card:hover > span,
.cards > a.card:focus-visible > span,
a.related-item:hover .related-tag,
a.related-item:focus-visible .related-tag {
  color: var(--geopolo-card-flame) !important;
}

.article-card:focus-visible,
.hero__card:focus-visible,
.cards > a.card:focus-visible,
a.related-item:focus-visible,
a.region-card:focus-visible {
  outline: 2px solid var(--geopolo-card-flame);
  outline-offset: 4px;
}

@media (hover: none) {
  .article-card:active .article-card__img,
  .hero__card:active .hero__card-img {
    mix-blend-mode: luminosity;
  }

  .article-card:active :is(h2, h3, .article-card__title),
  .hero__card:active :is(h2, h3, .hero__card-title),
  .cards > a.card:active :is(h2, h3),
  a.related-item:active .related-item-title,
  a.region-card:active :is(h2, h3) {
    color: var(--geopolo-card-flame) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-card,
  .article-card *,
  .hero__card,
  .hero__card *,
  .cards > a.card,
  .cards > a.card::before,
  a.related-item,
  a.related-item::before,
  a.region-card,
  a.region-card::before {
    transition: none !important;
  }
}

@media print {
  .article-card__img,
  .hero__card-img {
    mix-blend-mode: normal !important;
  }
}

/*
 * Variante illustrée des cartes "Articles associés" (.related-item--with-
 * media) : additive uniquement, n'affecte jamais les cartes texte seul
 * générées avant l'ajout de cette classe (autres clusters tant qu'on n'y
 * relance pas seo-inject-related-sidebar.js --force).
 */
a.related-item.related-item--with-media {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
}

a.related-item.related-item--with-media .related-item__media {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 3px;
}

a.related-item.related-item--with-media .related-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
  transition: filter 0.2s ease, transform 0.3s ease;
}

a.related-item.related-item--with-media:hover .related-item__media img,
a.related-item.related-item--with-media:focus-visible .related-item__media img {
  filter: grayscale(0%);
  transform: scale(1.04);
}

a.related-item.related-item--with-media .related-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

a.related-item.related-item--with-media .related-tag,
a.related-item.related-item--with-media .related-item-title {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  a.related-item.related-item--with-media .related-item__media img {
    transition: none;
  }
}