/* ==========================================================================
   NEYBRAS · Gabarit « article / regards ».
   À charger APRÈS neybras-home.css (réutilise tokens, header, footer, .btn…).
   Palette : bordeaux / nuit / sable. Code original (sans Bootstrap).
   ========================================================================== */

/* --- Hero article ------------------------------------------------------ */
.article-hero {
  background:
    radial-gradient(120% 130% at 88% 0%, rgba(110,35,50,0.10), transparent 55%),
    var(--ivoire);
  padding-block: clamp(2.6rem, 6vw, 4.2rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--filet);
}
.article-breadcrumb { font-size: .85rem; color: var(--pierre); margin-bottom: 1.4rem; }
.article-breadcrumb a { color: var(--pierre); }
.article-breadcrumb a:hover { color: var(--bordeaux); }
.article-tag {
  display: inline-block; font-family: var(--font-courant);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  color: var(--bordeaux); background: var(--bordeaux-soft);
  padding: .4rem .9rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.article-hero__title { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 20ch; margin-bottom: 1rem; }
.article-hero__meta { font-size: .9rem; color: var(--pierre); display: flex; gap: 1.2rem; flex-wrap: wrap; }
.article-hero__meta span.sep { color: var(--filet-fort); }

/* --- Corps de l'article ------------------------------------------------ */
.article-body { background: var(--blanc); padding-block: clamp(3rem, 6vw, 5rem); }
.article-content { max-width: 720px; margin-inline: auto; }
.article-content > p { font-size: 1.12rem; line-height: 1.85; color: var(--graphite); margin-bottom: 1.4rem; }
.article-content h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.6rem 0 1rem; color: var(--nuit);
  padding-top: 1.6rem; border-top: 1px solid var(--filet);
}
.article-content h3 { font-size: 1.3rem; margin: 1.8rem 0 .6rem; color: var(--bordeaux); }
.article-content strong { color: var(--nuit); font-weight: 600; }
.article-content hr { border: 0; border-top: 1px solid var(--filet); margin: 2.6rem 0; }

.article-cta-box {
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(110,35,50,0.35), transparent 55%),
    linear-gradient(135deg, var(--nuit), var(--nuit-2));
  border-radius: var(--radius); padding: 2.2rem; text-align: center; color: rgba(255,255,255,0.9);
  border-left: 4px solid var(--bordeaux);
}
.article-cta-box p { font-size: 1.08rem; margin-bottom: 1.4rem; color: rgba(255,255,255,0.9); }
.article-cta-box a {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bordeaux); color: #fff; font-weight: 600;
  padding: .9rem 1.5rem; border-radius: var(--radius-btn);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.article-cta-box a:hover { background: var(--bordeaux-hover); color: #fff; transform: translateY(-2px); }

/* --- RTL (version arabe) ----------------------------------------------- */
[dir="rtl"] .article-hero__title,
[dir="rtl"] .article-content { text-align: right; }
[dir="rtl"] .article-content h3 { text-align: right; }
[dir="rtl"] .article-cta-box { border-left: 0; border-right: 4px solid var(--bordeaux); }
[dir="rtl"] .nav__links a::after { left: auto; right: 0; }