.article-visual {
  width: min(980px, calc(100% - 28px));
  margin: 0 auto;
  padding-top: 1.5rem;
}

.article-visual img {
  width: 100%;
  height: clamp(210px, 56vw, 230px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  object-fit: cover;
  object-position: center;
}

.article-visual + .article-content {
  padding-top: 1.75rem;
}

.resource-card--seo-ia .resource-card-visual {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 1rem;
  overflow: hidden;
  border-radius: calc(var(--radius) * 0.72);
}

.resource-card--seo-ia .resource-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.resource-card--seo-ia h3 {
  margin-top: 1rem;
}

@media (min-width: 721px) {
  .article-visual {
    width: min(980px, calc(100% - 40px));
    padding-top: 2rem;
  }

  .article-visual img {
    height: clamp(250px, 34vw, 290px);
  }

  .article-visual + .article-content {
    padding-top: 2.25rem;
  }
}

@media (min-width: 1051px) {
  .article-visual img {
    height: clamp(300px, 26vw, 340px);
  }
}

/* Conseils & ressources — mode nuit : distinguer le bandeau « Comprendre avant de choisir » du header. */
html.theme-dark #contenu > .resources-hero + .section,
html[data-theme="dark"] #contenu > .resources-hero + .section {
  background:
    radial-gradient(circle at 86% 22%, rgba(84, 12, 228, 0.11), transparent 38%),
    radial-gradient(circle at 12% 88%, rgba(0, 176, 255, 0.09), transparent 42%),
    linear-gradient(135deg, #11183d 0%, #172149 58%, #202d60 100%);
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-dark):not([data-theme="light"]) #contenu > .resources-hero + .section {
    background:
      radial-gradient(circle at 86% 22%, rgba(84, 12, 228, 0.11), transparent 38%),
      radial-gradient(circle at 12% 88%, rgba(0, 176, 255, 0.09), transparent 42%),
      linear-gradient(135deg, #11183d 0%, #172149 58%, #202d60 100%);
  }
}

/* Articles : les pastilles de secteur des ressources liées reprennent le dégradé AesthéIA. */
.related-resource-card .resource-sector {
  color: #fff;
  border-color: transparent;
  background: var(--gradient-ia);
}

/* Mode nuit : le texte au-dessus des boutons LLM reste blanc sur tous les supports. */
html.theme-dark .ia-resume-label,
html[data-theme="dark"] .ia-resume-label {
  color: #fff !important;
  opacity: 1;
}