.article-page {
  --ag-vert-fonce: #1f5f4a;
  --ag-vert: #2f7d5c;
  --ag-vert-clair: #7fd89b;
  --ag-turquoise: #65c7b8;
  --ag-fond: #f4fbf7;
  --ag-texte: #1f2f2a;
  --ag-gris: #5d756d;
  --ag-ombre: rgba(31, 95, 74, 0.14);
}

.article-page .page-shell {
  background: var(--ag-fond);
}

.article-page .ag-hero {
  position: relative;
  margin: 0 -1px;
  padding: 72px 22px 132px;
  text-align: center;
  color: white;
  background:
    linear-gradient(135deg, rgba(31, 95, 74, 0.9), rgba(101, 199, 184, 0.78)),
    url('/assets/hero-lake.jpg') center/cover no-repeat;
  border-bottom-left-radius: 50% 8%;
  border-bottom-right-radius: 50% 8%;
}

.article-page .ag-hero::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -48px;
  height: 96px;
  background: var(--ag-fond);
  border-radius: 50% 50% 0 0;
  z-index: 1;
}

.article-page .ag-hero-content {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}

.article-page .ag-article-hero-image {
  width: 100%;
  max-width: 420px;
  max-height: 430px;
  margin: 0 auto 28px;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 32px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

.article-page .ag-tag {
  display: inline-block;
  margin-bottom: 22px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  font-size: 14px;
  letter-spacing: 0.4px;
}

.article-page .ag-hero h1 {
  max-width: 900px;
  margin: 0 auto 24px;
  padding: 0 12px;
  color: #b9e7c8 !important;
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  text-shadow: 0 3px 18px rgba(9, 53, 42, 0.55);
}

.article-page .ag-hero > .ag-hero-content > p {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.65;
}

.article-page .ag-main {
  position: relative;
  z-index: 5;
  max-width: 980px;
  margin: -52px auto 0;
  padding: 0 22px 80px;
}

.article-page .ag-article {
  padding: clamp(28px, 5vw, 58px);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(127, 216, 155, 0.28);
  border-radius: 34px;
  box-shadow: 0 24px 70px var(--ag-ombre);
}

.article-page .ag-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
  color: #527067;
  font-size: 14px;
}

.article-page .ag-meta span {
  padding: 8px 14px;
  background: #eef9f2;
  border-radius: 999px;
}

.article-page .ag-article > p {
  margin: 0 0 24px;
  color: #1f2f2a;
  font-size: 18px;
  line-height: 1.86;
}

.article-page .ag-lead {
  margin-bottom: 36px !important;
  color: var(--ag-vert-fonce) !important;
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.7 !important;
}

.article-page .ag-separator {
  width: 100%;
  height: 1px;
  margin: 42px 0;
  background: linear-gradient(90deg, transparent, rgba(47, 125, 92, 0.28), transparent);
}

.article-page .ag-quote {
  margin: 42px 0;
  padding: 34px;
  background: linear-gradient(135deg, rgba(127, 216, 155, 0.18), rgba(101, 199, 184, 0.16));
  border-left: 6px solid var(--ag-vert-clair);
  border-radius: 28px;
}

.article-page .ag-quote p {
  margin: 0;
  color: var(--ag-vert-fonce);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.55;
}

.article-page .ag-list {
  display: grid;
  gap: 14px;
  margin: 36px 0;
}

.article-page .ag-list div {
  padding: 17px 20px;
  background: #f1faf5;
  border: 1px solid rgba(127, 216, 155, 0.22);
  border-radius: 20px;
  color: #1f2f2a;
  font-size: 18px;
  line-height: 1.55;
}

.article-page .ag-note {
  margin: 38px 0;
  padding: 24px;
  color: #49665c;
  background: #fff;
  border: 1px solid rgba(31, 95, 74, 0.14);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(31, 95, 74, 0.07);
}

.article-page .ag-note p {
  margin: 0;
}

.article-page .ag-note strong {
  color: var(--ag-vert-fonce);
}

.article-page .ag-back {
  margin-top: 30px;
  text-align: center;
}

.article-page .ag-back a {
  color: var(--ag-vert-fonce);
  font-weight: 800;
}

/* Découverte produit discrète */
.product-spotlight {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 46px);
  margin: 50px 0 0;
  padding: clamp(26px, 4vw, 38px);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(127, 216, 155, 0.2), transparent 34%),
    linear-gradient(135deg, #f1faf5, #fbfdfc);
  border: 1px solid rgba(47, 125, 92, 0.18);
  border-radius: 30px;
  box-shadow: 0 15px 38px rgba(31, 95, 74, 0.09);
}

.product-spotlight-image {
  display: block;
  text-decoration: none;
}

.product-spotlight-image img {
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 18px 20px rgba(20, 76, 59, 0.2));
  transition: transform .25s ease;
}

.product-spotlight-image:hover img,
.product-spotlight-image:focus-visible img {
  transform: translateY(-4px);
}

.product-spotlight-kicker {
  margin: 0 0 8px;
  color: var(--ag-vert);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.product-spotlight h2 {
  margin: 0 0 16px;
  color: var(--ag-vert-fonce);
  font-family: var(--serif);
  font-size: clamp(31px, 4vw, 42px);
  line-height: 1.05;
}

.product-spotlight-copy > p:not(.product-spotlight-kicker):not(.product-spotlight-disclosure) {
  margin: 0 0 22px;
  color: #49665c;
  font-size: 16px;
  line-height: 1.7;
}

.product-spotlight-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--ag-vert-fonce), var(--ag-vert));
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(31, 95, 74, 0.18);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.product-spotlight-button:hover,
.product-spotlight-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(31, 95, 74, 0.24);
}

.product-spotlight-disclosure {
  margin: 17px 0 0;
  color: #657b73;
  font-size: 12px;
  line-height: 1.55;
}

/* Partage */
.share-panel {
  display: grid;
  grid-template-columns: minmax(220px, .85fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 30px;
  margin: 48px 0 0;
  padding: 30px;
  background: linear-gradient(135deg, #effaf3, #f8fcfa);
  border: 1px solid rgba(47, 125, 92, 0.16);
  border-radius: 28px;
}

.share-kicker,
.article-subscribe-kicker {
  margin: 0 0 6px;
  color: var(--ag-vert);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.share-panel h2,
.article-subscribe-cta h2 {
  margin: 0 0 8px;
  color: var(--ag-vert-fonce);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
}

.share-panel-copy > p:last-child {
  margin: 0;
  color: #526b62;
  font-size: 15px;
  line-height: 1.55;
}

.share-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 14px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: 700 14px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}

.share-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.share-icon {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  background: rgba(255, 255, 255, .18);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.share-whatsapp { background: #168b48; }
.share-facebook { background: #1769aa; }
.share-linkedin { background: #0a66c2; }
.share-whatsapp-status { background: linear-gradient(135deg, #128c4b, #25d366); }
.share-facebook-story { background: linear-gradient(135deg, #1877f2, #8b5cf6); }
.share-native { background: #2f7d5c; }
.share-copy { background: #526b62; }

.share-status-help {
  grid-column: 1 / -1;
  margin: -8px 0 0;
  color: #526b62;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.share-button[aria-busy="true"] {
  cursor: wait;
  opacity: .8;
}

/* Invitation à s'inscrire */
.article-subscribe-cta {
  margin-top: 28px;
  padding: 38px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at top left, rgba(127, 216, 155, 0.22), transparent 38%),
    linear-gradient(135deg, var(--ag-vert-fonce), var(--ag-vert));
  border-radius: 32px;
}

.article-subscribe-cta h2 {
  color: #fff;
}

.article-subscribe-cta > p:not(.article-subscribe-kicker) {
  max-width: 720px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.92);
}

.article-subscribe-kicker {
  color: #b9e7c8;
}

.article-subscribe-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.article-subscribe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  color: var(--ag-vert-fonce);
  background: #fff;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}

.article-subscribe-button.secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.34);
}

@media (max-width: 760px) {
  .article-page .ag-hero {
    padding: 52px 16px 105px;
  }

  .article-page .ag-article-hero-image {
    max-width: 320px;
    max-height: 350px;
    border-radius: 24px;
  }

  .article-page .ag-main {
    padding: 0 14px 60px;
  }

  .article-page .ag-article {
    padding: 26px 20px;
    border-radius: 26px;
  }

  .article-page .ag-article > p,
  .article-page .ag-list div {
    font-size: 17px;
  }

  .article-page .ag-quote {
    padding: 24px;
  }

  .article-page .ag-quote p {
    font-size: 21px;
  }

  .product-spotlight {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 20px;
    text-align: center;
  }

  .product-spotlight-image img {
    max-width: 185px;
  }

  .product-spotlight-button {
    width: 100%;
  }

  .share-panel {
    grid-template-columns: 1fr;
    padding: 24px 18px;
    text-align: center;
  }

  .share-buttons {
    grid-template-columns: 1fr;
  }

  .article-subscribe-cta {
    padding: 30px 20px;
  }

  .article-subscribe-button {
    width: 100%;
  }
}


/* Titres et sources des articles longs */
.article-page .ag-article > h2 {
  margin: 48px 0 22px;
  color: var(--ag-vert-fonce);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.1;
}

.article-page .ag-article-hero-wide {
  max-width: 560px;
  max-height: 310px;
  aspect-ratio: 16 / 7;
}

.article-page .ag-alert-note {
  border-color: rgba(160, 92, 53, 0.25);
  background: #fffaf5;
}

.article-page .ag-sources {
  margin: 48px 0 0;
  padding: 28px;
  color: #49665c;
  background: #f7fbf8;
  border: 1px solid rgba(31, 95, 74, 0.14);
  border-radius: 24px;
}

.article-page .ag-sources h2 {
  margin: 0 0 12px;
  color: var(--ag-vert-fonce);
  font-family: var(--serif);
  font-size: 31px;
}

.article-page .ag-sources p {
  margin: 0 0 14px;
  line-height: 1.7;
}

.article-page .ag-sources ul {
  margin: 0;
  padding-left: 20px;
}

.article-page .ag-sources li {
  margin: 8px 0;
}

.article-page .ag-sources a {
  color: var(--ag-vert);
  font-weight: 700;
}

@media (max-width: 760px) {
  .article-page .ag-article > h2 {
    margin-top: 38px;
    font-size: 31px;
  }

  .article-page .ag-article-hero-wide {
    max-width: 100%;
    max-height: 240px;
  }

  .article-page .ag-sources {
    padding: 22px 18px;
  }
}

@media (max-width: 760px) {
  .share-status-help {
    text-align: center;
  }
}

/* =========================================================
   CONTINUER LA LECTURE ET DÉCOUVRIR L'AUTEUR
========================================================= */

.article-discovery {
  margin-top: 50px;
  padding-top: 44px;
  border-top: 1px solid rgba(47, 125, 92, 0.18);
}

.article-discovery-heading {
  max-width: 680px;
  margin: 0 auto 25px;
  text-align: center;
}

.article-discovery-kicker,
.article-author-kicker {
  display: block;
  margin: 0 0 7px;
  color: var(--ag-vert);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.article-discovery-heading h2 {
  margin: 0 0 10px;
  color: var(--ag-vert-fonce);
  font-family: var(--serif);
  font-size: clamp(34px, 4.5vw, 46px);
  line-height: 1;
}

.article-discovery-heading > p:last-child {
  margin: 0;
  color: #526b62;
  font-size: 16px;
  line-height: 1.65;
}

.article-next-card {
  display: grid;
  grid-template-columns: minmax(230px, .82fr) minmax(0, 1.18fr);
  align-items: stretch;
  overflow: hidden;
  color: inherit;
  background: linear-gradient(135deg, #edf8f1, #f8fcfa);
  border: 1px solid rgba(47, 125, 92, 0.18);
  border-radius: 28px;
  box-shadow: 0 15px 38px rgba(31, 95, 74, 0.10);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.article-next-card:hover,
.article-next-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(47, 125, 92, 0.36);
  box-shadow: 0 22px 48px rgba(31, 95, 74, 0.16);
}

.article-next-image {
  display: block;
  min-height: 245px;
  overflow: hidden;
  background: #dfeee7;
}

.article-next-image img {
  width: 100%;
  height: 100%;
  min-height: 245px;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
}

.article-next-card:hover .article-next-image img {
  transform: scale(1.035);
}

.article-next-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 30px;
}

.article-next-category {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 7px 12px;
  color: var(--ag-vert);
  background: rgba(127, 216, 155, 0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.article-next-title {
  margin-bottom: 12px;
  color: var(--ag-vert-fonce);
  font-family: var(--serif);
  font-size: clamp(27px, 3.5vw, 37px);
  line-height: 1.08;
}

.article-next-excerpt {
  margin-bottom: 22px;
  color: #49665c;
  font-size: 15px;
  line-height: 1.65;
}

.article-next-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--ag-vert-fonce), var(--ag-vert));
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(31, 95, 74, 0.18);
}

.article-author-card {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  padding: 23px 26px;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(47, 125, 92, 0.14);
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(31, 95, 74, 0.07);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.article-author-card:hover,
.article-author-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(47, 125, 92, 0.30);
  box-shadow: 0 16px 35px rgba(31, 95, 74, 0.11);
}

.article-author-card > img {
  width: 105px;
  height: 105px;
  object-fit: cover;
  border: 6px solid #eef8f2;
  border-radius: 50%;
}

.article-author-copy {
  display: block;
}

.article-author-copy > strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ag-vert-fonce);
  font-family: var(--serif);
  font-size: 29px;
  line-height: 1;
}

.article-author-copy > span:not(.article-author-kicker):not(.article-author-link) {
  display: block;
  color: #526b62;
  font-size: 14px;
  line-height: 1.65;
}

.article-author-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: var(--ag-vert);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .article-discovery {
    margin-top: 40px;
    padding-top: 36px;
  }

  .article-next-card {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .article-next-image,
  .article-next-image img {
    min-height: 205px;
    max-height: 245px;
  }

  .article-next-content {
    padding: 24px 20px 26px;
  }

  .article-next-button {
    width: 100%;
    justify-content: center;
  }

  .article-author-card {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 16px;
    padding: 19px 17px;
  }

  .article-author-card > img {
    width: 78px;
    height: 78px;
    border-width: 4px;
  }

  .article-author-copy > strong {
    font-size: 25px;
  }

  .article-author-copy > span:not(.article-author-kicker):not(.article-author-link) {
    font-size: 13px;
  }
}

@media (max-width: 440px) {
  .article-author-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .article-author-card > img {
    margin: 0 auto;
  }

  .article-author-link {
    justify-content: center;
  }
}

/* =========================================================
   APPRÉCIATION DES ARTICLES — CŒUR VERT (V35)
========================================================= */

.article-feedback {
  margin: 38px 0;
  padding: 34px 30px;
  text-align: center;
  background: linear-gradient(145deg, rgba(236, 247, 239, 0.96), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(47, 125, 92, 0.18);
  border-radius: 26px;
}

.article-feedback-kicker {
  margin: 0 0 7px;
  color: #2f7d5c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.article-feedback h2 {
  margin: 0 0 10px;
  color: #183f36;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(31px, 4vw, 42px);
  line-height: 1.08;
}

.article-feedback-intro {
  max-width: 610px;
  margin: 0 auto 21px;
  color: #63746d;
  font-size: 15px;
  line-height: 1.7;
}

.article-feedback-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 24px;
  color: #ffffff;
  background: #2f7d5c;
  border: 1px solid #2f7d5c;
  border-radius: 999px;
  box-shadow: 0 12px 25px rgba(47, 125, 92, 0.2);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.article-feedback-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(47, 125, 92, 0.27);
}

.article-feedback-button:focus-visible {
  outline: 3px solid rgba(47, 125, 92, 0.3);
  outline-offset: 3px;
}

.article-feedback-button.is-liked,
.article-feedback-button:disabled.is-liked {
  color: #236347;
  background: #ffffff;
  border-color: rgba(47, 125, 92, 0.36);
  box-shadow: none;
  cursor: default;
  opacity: 1;
}

.article-feedback-button.is-loading {
  opacity: 0.72;
  cursor: wait;
}

.article-feedback-heart {
  color: #dff5e7;
  font-size: 21px;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

.article-feedback-button:hover:not(:disabled) .article-feedback-heart {
  transform: scale(1.13);
}

.article-feedback-button.is-liked .article-feedback-heart {
  color: #2f9a68;
  transform: scale(1.08);
}

.article-feedback-message {
  margin: 14px 0 0;
  color: #2f7d5c;
  font-size: 14px;
  font-weight: 700;
}

.article-feedback-count {
  margin: 12px 0 0;
  color: #47635a;
  font-size: 13px;
}

.article-feedback-contact {
  margin: 19px 0 0;
  padding-top: 17px;
  color: #6b7c75;
  border-top: 1px solid rgba(47, 125, 92, 0.13);
  font-size: 13px;
}

.article-feedback-contact a {
  color: #2f7d5c;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .article-feedback {
    padding: 29px 20px;
    border-radius: 22px;
  }

  .article-feedback-button {
    width: 100%;
    padding-inline: 17px;
  }
}


/* V42 — image diffuse de l’article « petits signaux » */
.article-page .ag-article-hero-soft {
  position: relative;
  isolation: isolate;
  width: min(100%, 900px);
  margin: 0 auto 30px;
}

.article-page .ag-article-hero-soft::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% 5% 4%;
  background: rgba(223, 247, 232, 0.34);
  border-radius: 50%;
  filter: blur(28px);
}

.article-page .ag-article-hero-soft img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border-radius: 46px;
  filter: drop-shadow(0 18px 34px rgba(8, 54, 41, 0.18));
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 52%,
    rgba(0, 0, 0, 0.98) 66%,
    rgba(0, 0, 0, 0.72) 80%,
    rgba(0, 0, 0, 0.26) 92%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse at center,
    #000 52%,
    rgba(0, 0, 0, 0.98) 66%,
    rgba(0, 0, 0, 0.72) 80%,
    rgba(0, 0, 0, 0.26) 92%,
    transparent 100%
  );
}

@media (max-width: 700px) {
  .article-page .ag-article-hero-soft {
    margin-bottom: 24px;
  }

  .article-page .ag-article-hero-soft img {
    border-radius: 30px;
    -webkit-mask-image: radial-gradient(
      ellipse at center,
      #000 55%,
      rgba(0, 0, 0, 0.96) 70%,
      rgba(0, 0, 0, 0.58) 86%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse at center,
      #000 55%,
      rgba(0, 0, 0, 0.96) 70%,
      rgba(0, 0, 0, 0.58) 86%,
      transparent 100%
    );
  }
}

/* V46 — image de titre plus compacte pour l’article « petits signaux » */
.article-page .ag-article-hero-soft--compact {
  width: min(100%, 560px);
  margin-bottom: 26px;
}

.article-page .ag-article-hero-soft--compact img {
  aspect-ratio: 3 / 2;
  max-height: 375px;
  object-fit: cover;
  object-position: center 43%;
  border-radius: 34px;
}

@media (max-width: 700px) {
  .article-page .ag-article-hero-soft--compact {
    width: min(100%, 420px);
    margin-bottom: 22px;
  }

  .article-page .ag-article-hero-soft--compact img {
    max-height: 290px;
    border-radius: 26px;
  }
}



/* =========================================================
   NAVIGATION ENTRE LES ARTICLES : PRÉCÉDENT / SUIVANT
========================================================= */

.article-navigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.article-navigation-grid.article-navigation-single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.article-nav-card {
  display: grid;
  grid-template-rows: 185px minmax(0, 1fr);
  overflow: hidden;
  color: inherit;
  background: linear-gradient(145deg, #ffffff, #f3faf6);
  border: 1px solid rgba(47, 125, 92, 0.17);
  border-radius: 25px;
  box-shadow: 0 14px 34px rgba(31, 95, 74, 0.09);
  text-decoration: none;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.article-nav-card:hover,
.article-nav-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(47, 125, 92, 0.36);
  box-shadow: 0 21px 44px rgba(31, 95, 74, 0.15);
}

.article-nav-image {
  display: block;
  overflow: hidden;
  background: #dfeee7;
}

.article-nav-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
}

.article-nav-card:hover .article-nav-image img {
  transform: scale(1.04);
}

.article-nav-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 23px 24px 25px;
}

.article-nav-direction {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--ag-vert);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.article-nav-card-next .article-nav-direction {
  align-self: flex-end;
}

.article-nav-category {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 10px;
  color: var(--ag-vert);
  background: rgba(127, 216, 155, 0.18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.article-nav-title {
  margin-bottom: 10px;
  color: var(--ag-vert-fonce);
  font-family: var(--serif);
  font-size: clamp(24px, 2.7vw, 31px);
  line-height: 1.08;
}

.article-nav-excerpt {
  margin-bottom: 18px;
  color: #526b62;
  font-size: 14px;
  line-height: 1.58;
}

.article-nav-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  margin-top: auto;
  padding: 10px 16px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--ag-vert-fonce), var(--ag-vert));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 9px 20px rgba(31, 95, 74, 0.17);
}

.article-nav-card-next .article-nav-button {
  align-self: flex-end;
}

@media (max-width: 760px) {
  .article-navigation-grid,
  .article-navigation-grid.article-navigation-single {
    grid-template-columns: 1fr;
  }

  .article-nav-card {
    grid-template-rows: 190px minmax(0, 1fr);
  }

  .article-nav-content {
    padding: 21px 19px 23px;
  }

  .article-nav-card-next .article-nav-direction,
  .article-nav-card-next .article-nav-button {
    align-self: flex-start;
  }

  .article-nav-button {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   V71 — CORRECTION MOBILE ROBUSTE DES BLOCS DE FIN D’ARTICLE
========================================================= */

.article-discovery,
.article-discovery *,
.article-navigation-grid,
.article-nav-card,
.article-author-card {
  min-width: 0;
  box-sizing: border-box;
}

.article-navigation-grid {
  width: 100%;
  max-width: 100%;
}

.article-nav-card,
.article-author-card {
  width: 100%;
  max-width: 100%;
}

.article-nav-title,
.article-nav-excerpt,
.article-author-copy,
.article-author-copy > span {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 760px) {
  /*
   * Flex est utilisé ici plutôt que Grid sur smartphone.
   * Cela évite certains affichages irréguliers observés sur l’article 3.
   */
  .article-page .article-navigation-grid,
  .article-page .article-navigation-grid.article-navigation-single,
  .article-page-signals .article-navigation-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
  }

  .article-page .article-nav-card,
  .article-page-signals .article-nav-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    grid-template-rows: none !important;
    border-radius: 21px;
  }

  .article-page .article-nav-image,
  .article-page-signals .article-nav-image {
    width: 100% !important;
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    flex: 0 0 168px !important;
  }

  .article-page .article-nav-image img,
  .article-page-signals .article-nav-image img {
    width: 100% !important;
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    object-fit: cover !important;
  }

  .article-page .article-nav-content,
  .article-page-signals .article-nav-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 19px 17px 21px !important;
  }

  .article-page .article-nav-direction,
  .article-page .article-nav-card-next .article-nav-direction,
  .article-page .article-nav-card-next .article-nav-button,
  .article-page-signals .article-nav-direction,
  .article-page-signals .article-nav-card-next .article-nav-direction,
  .article-page-signals .article-nav-card-next .article-nav-button {
    align-self: flex-start !important;
  }

  .article-page .article-nav-title,
  .article-page-signals .article-nav-title {
    width: 100%;
    margin-bottom: 9px;
    font-size: clamp(23px, 7vw, 27px);
    line-height: 1.12;
  }

  .article-page .article-nav-excerpt,
  .article-page-signals .article-nav-excerpt {
    width: 100%;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
  }

  .article-page .article-nav-button,
  .article-page-signals .article-nav-button {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    padding: 11px 13px;
    text-align: center;
    white-space: normal;
  }

  .article-page .article-author-card,
  .article-page-signals .article-author-card {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    gap: 15px;
    padding: 18px 16px;
  }

  .article-page .article-author-copy,
  .article-page-signals .article-author-copy {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 440px) {
  .article-page .article-author-card,
  .article-page-signals .article-author-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  .article-page .article-author-link,
  .article-page-signals .article-author-link {
    justify-content: center;
  }

  .article-page .article-discovery-heading h2,
  .article-page-signals .article-discovery-heading h2 {
    font-size: clamp(29px, 9vw, 36px);
  }
}