/* Fichier CSS : /asset/css/page/resource/article.css */
.article-grid-layout {
  display: grid;
  gap: calc(15 / 16 * 1rem);
  margin-top: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
  justify-content: start;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  padding-bottom: 0;
}
/* ---------------------------------------------------- */
/* STYLE DE BASE DES CARTES */
/* ---------------------------------------------------- */
.article-resource-card {
  display: flex;
  position: relative;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-md);
  background-color: var(--source-color-white-transparent) !important;
  border: calc(1 / 16 * 1rem) solid var(--color-book-resource-card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-z1);
  align-items: flex-start;
  align-self: start;
  margin-top: 0;
}
/* ================================================= */
/* === MODE SOMBRE === */
/* ================================================= */
html[data-theme="dark"] .article-resource-card {
  background-color: #000000 !important;
  border: none;
}
/* ---------------------------------------------------- */
/* 1. EN-TÊTE HORIZONTAL */
/* ---------------------------------------------------- */
.article-header-content {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0;
  width: 100%;
}
.article-cover-container {
  width: calc(250 / 16 * 1rem);
  height: auto;
  flex-shrink: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-z2);
}
.article-cover-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin-bottom: 0;
}
.article-info-base {
  flex-grow: 1;
  text-align: left;
  min-width: 0;
  margin-bottom: 0;
  margin-top: 0;
  margin-right: var(--space-md);
}
.article-title {
  font-size: 1.1rem;
  color: var(--source-color-accent-two);
  margin-top: 0;
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-heading);
}
html[data-theme="dark"] .article-title {
  font-weight: var(--fw-normal);
  color: var(--color-dark-mode-article-title);
}
.article-subtitle {
  font-size: 1.1rem;
  color: var(--color-article-subtitle);
  margin-bottom: var(--space-sm);
  line-height: calc(22.4 / 16 * 1rem);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
}
html[data-theme="dark"] .article-subtitle {
  color: white;
  font-weight: var(--fw-normal);
}
.article-read-link {
  font-size: 1rem;
  color: var(--color-link-to-be-view);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  display: inline-block;
  margin-bottom: 0;
}
html[data-theme="dark"] .article-read-link {
  color: #ff7777;
  font-weight: var(--fw-normal);
}
.article-read-link:hover {
  transform: scale(var(--transform-scale-sm-plus));
}
/* ---------------------------------------------------- */
/* 2. SECTION CENTRÉE (Résumé et Expansion) */
/* ---------------------------------------------------- */
.article-center-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  margin-bottom: 0;
  margin-top: 0;
  width: 100%;
}
.article-summary-wrapper {
  max-height: calc(103 / 16 * 1rem);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--space-xs, calc(5 / 16 * 1rem));
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}
html[data-theme="dark"] .article-summary-wrapper {
  background-color: #000000 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}
.article-summary-wrapper.no-overflow {
  max-height: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html[data-theme="dark"] .article-summary-wrapper.no-overflow {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.article-summary-wrapper.expanded {
  max-height: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html[data-theme="dark"] .article-summary-wrapper.expanded {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.article-summary-wrapper.expanded::after {
  opacity: 0;
}
.article-summary,
.article-summary p {
  color: #000000;
  font-size: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
}
html[data-theme="dark"] .article-summary,
html[data-theme="dark"] .article-summary p {
  color: var(--color-texte-dark-mode) !important;
}
.article-expand-btn {
  display: block;
  width: 100%;
  margin: var(--space-xs) auto var(--space-sm) auto;
  text-align: center;
  padding: calc(4 / 16 * 1rem) 0;
  background-color: transparent;
  color: black;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-video-btn-read-more);
  font-weight: var(--fw-bold);
  text-decoration: none;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}
html[data-theme="dark"] .article-expand-btn {
  color: #FFFFFF;
  font-weight: normal;
}
.article-expand-btn:hover {
  transform: scale(var(--transform-scale-md));
}
.article-expand-btn::after {
  content: "\25BC";
  display: inline-block;
  margin-left: var(--space-sm);
  font-size: var(--font-size-video-btn-read-more-triangle);
  transition: none;
}
.article-expand-btn.is-expanded::after {
  content: "\25B2";
}
.toc-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.toc-list li {
  margin-bottom: 0;
}
.toc-list a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  font-weight: var(--fw-bold);
  background-color: #ffffff;
  color: #000000;
  padding: calc(5 / 16 * 1rem) calc(12 / 16 * 1rem) calc(5 / 16 * 1rem) calc(10 / 16 * 1rem);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-z2);
  text-align: left;
}
html[data-theme="dark"] .toc-list a {
  background-color: #000000;
  color: #ffffff;
  font-weight: var(--fw-normal);
}
.toc-list a:hover {
  background-color: #ededed;
  color: #000000;
}
html[data-theme="dark"] .toc-list a:hover {
  background-color: #333333;
}
.toc-thumbnail {
  width: auto;
  height: calc(49.5 / 16 * 1rem);
  object-fit: cover;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  margin-left: calc(10 / 16 * 1rem);
}
html[data-theme="dark"] .box {
  background-color: #222222;
  border: none;
}

@media (max-width: calc(950 / 16 * 1rem)) {
  .article-grid-layout {
    grid-template-columns: 1fr;
  }
}