.article-actions-barre {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 1rem; max-width: 720px; margin: 2rem auto; padding: 0 1.5rem;
}
.article-actions-groupe, .article-actions-coeurs {
  display: flex; align-items: center; gap: .3rem;
  background: var(--brun, #241C17); border-radius: var(--rayon-doux, 4px 32px 4px 32px);
  padding: .5rem .8rem;
}
.article-action-icone {
  background: none; border: none; cursor: pointer; text-decoration: none;
  color: var(--terracotta, #C1694F); width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.article-action-icone svg { width: 19px; height: 19px; }
.article-action-icone:hover, .article-action-icone:focus-visible {
  background: rgba(255,255,255,.12); color: var(--terracotta-fonce, #A2503A);
}
.coeur-bouton { background: none; border: none; cursor: pointer; padding: .25rem; }
.coeur-bouton svg {
  width: 21px; height: 21px; fill: none; stroke: var(--turquoise-fonce, #1F6E69);
  stroke-width: 1.8; transition: fill .15s ease, stroke .15s ease;
}
.coeur-bouton.actif svg, .coeur-bouton:hover svg {
  fill: var(--terracotta-fonce, #A2503A); stroke: var(--terracotta-fonce, #A2503A);
}
@media (max-width: 480px) { .article-actions-barre { justify-content: center; } }

.titre-article-filigrane {
  position: relative;
  z-index: 1;
}
.titre-article-filigrane::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 7.2em; height: 7.2em;
  background-image: url('../../images/oeil-lotus-maieusthesie-franck-dagorn-evide-blanc.webp');
  background-size: contain; background-repeat: no-repeat;
  filter: invert(1); opacity: .12; pointer-events: none; z-index: -1;
}

.article-meta-discrete {
  display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  gap: .5rem 1rem; max-width: 720px; margin: 0 auto .6rem; padding: 0 1.5rem;
  font-size: .75rem; color: #9C9188;
}
.article-meta-categorie {
  background: var(--turquoise-clair, #E4F1F0); color: var(--turquoise-fonce, #1F6E69);
  padding: .15rem .6rem; border-radius: 999px; font-weight: 600;
}
.article-meta-icone { display: inline-flex; align-items: center; gap: .25rem; cursor: default; }
.article-meta-icone svg { width: 14px; height: 14px; }

.article-action-icone { color: #E2A184; }
.article-action-icone:hover, .article-action-icone:focus-visible { color: var(--terracotta-fonce, #A2503A); }

.article-actions-groupe { border-radius: 4px 0 0 32px; }
.article-actions-coeurs { border-radius: 0 32px 4px 0; }

.article-meta-discrete { justify-content: space-between; }
.article-meta-droite { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.titre-article-filigrane { margin-bottom: 2rem; }

.article-actions-coeurs { gap: .6rem; }
.coeurs-mention {
  color: var(--creme, #FBF6F0); font-size: .78rem; white-space: nowrap; padding-left: .3rem;
}

.quiz-article {
  max-width: 720px; margin: 2.5rem auto; padding: 0 1.5rem;
}
.quiz-article h2 { margin-bottom: 1.5rem; }
.quiz-question {
  background: #fff; border: 1px solid var(--ligne, #E7DED3); border-radius: var(--rayon-doux, 4px 32px 4px 32px);
  padding: 1.3rem; margin-bottom: 1.2rem;
}
.quiz-intitule { font-weight: 600; margin: 0 0 .9rem; color: var(--brun, #241C17); }
.quiz-option {
  display: block; width: 100%; text-align: left; margin-bottom: .5rem;
  padding: .65rem .9rem; border: 1px solid var(--ligne, #E7DED3); border-radius: 10px;
  background: var(--creme, #FBF6F0); cursor: pointer; font: inherit; font-size: .9rem; color: var(--brun, #241C17);
  transition: background .15s ease, border-color .15s ease;
}
.quiz-option:hover:not(:disabled) { border-color: var(--turquoise, #3FA9A4); }
.quiz-option:disabled { cursor: default; }
.quiz-option.quiz-correcte { background: var(--turquoise-clair, #E4F1F0); border-color: var(--turquoise-fonce, #1F6E69); font-weight: 600; }
.quiz-option.quiz-incorrecte { background: #FBEAE4; border-color: #C0392B; color: #C0392B; opacity: .85; }

.article-intro {
  text-align: center;
  color: #6b6058;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  max-width: 640px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}