/* ============================================================
   ÉCRIN D'AVENTURES — Styles page article blog
   styles/article.css
   ============================================================ */

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 600px) { .container { padding: 0 var(--space-4); } }

.article-wrapper { background: #fff; padding: var(--space-9) 0 var(--space-10); }

.article-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-9);
  align-items: start;
}
@media (max-width: 1100px) { .article-layout { grid-template-columns: 1fr 300px; gap: var(--space-7); } }
@media (max-width: 860px) { .article-layout { grid-template-columns: 1fr; } .article-sidebar { display: none; } .article-sidebar--mobile { display: block; } }

.article-main { min-width: 0; }

.article-meta { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }

.article-category {
  font-family: var(--font-display); font-size: 9px; font-weight: 600;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--ea-green); background: rgba(26,61,43,.07);
  padding: 5px 12px; text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.article-category:hover { background: var(--ea-green); color: var(--ea-gold); }

.article-date { font-family: var(--font-ui); font-size: 11px; font-weight: 300; letter-spacing: var(--ls-base); color: var(--ea-charcoal); opacity: .45; }

.article-title { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(30px,3.5vw,48px); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ea-green); margin-bottom: var(--space-6); }

.article-lead { font-family: var(--font-ui); font-weight: 300; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ea-charcoal); opacity: .8; border-left: 3px solid var(--ea-gold); padding-left: var(--space-5); margin-bottom: var(--space-8); }

.article-divider { height: 1px; background: linear-gradient(to right, var(--ea-gold), transparent); opacity: .3; margin-bottom: var(--space-8); }

.article-body { font-family: var(--font-ui); font-weight: 300; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ea-charcoal); }
.article-body p { margin-bottom: var(--space-5); opacity: .82; }
.article-body h3 { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ea-green); margin-top: var(--space-8); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(181,151,74,.25); }
.article-body ul { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.article-body ul li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); opacity: .82; }
.article-body ul li::before { content: ''; width: 4px; height: 4px; background: var(--ea-gold); flex-shrink: 0; margin-top: 8px; }
.article-body ol { list-style: none; margin: 0 0 var(--space-5); padding: 0; counter-reset: art-counter; display: flex; flex-direction: column; gap: var(--space-4); }
.article-body ol li { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--fs-sm); opacity: .82; counter-increment: art-counter; }
.article-body ol li::before { content: counter(art-counter); font-family: var(--font-display); font-size: 9px; font-weight: 700; color: var(--ea-gold); min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ea-gold); flex-shrink: 0; margin-top: 2px; letter-spacing: 0; }
.article-body strong { font-weight: 500; color: var(--ea-green); }
.article-body a { color: var(--ea-green); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(181,151,74,.45); transition: color var(--duration-fast), text-decoration-color var(--duration-fast); }
.article-body a:hover { color: var(--ea-gold); text-decoration-color: var(--ea-gold); }

.article-infobox { background: var(--ea-offwhite); border-left: 3px solid var(--ea-gold); padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; }
.article-infobox__title { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ea-gold); margin-bottom: var(--space-3); }
.article-infobox__content { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 300; line-height: var(--lh-base); color: var(--ea-charcoal); opacity: .82; }
.article-infobox__content ul { margin: var(--space-3) 0 0; }

.article-table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0 var(--space-6); font-family: var(--font-ui); font-size: var(--fs-sm); }
.article-table thead tr { background: var(--ea-green); }
.article-table thead th { font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--ea-gold-pale); padding: var(--space-4) var(--space-5); text-align: left; }
.article-table tbody tr { border-bottom: 1px solid rgba(181,151,74,.12); }
.article-table tbody tr:last-child { border-bottom: none; }
.article-table tbody td { padding: var(--space-4) var(--space-5); color: var(--ea-charcoal); opacity: .82; font-weight: 300; }
.article-table tbody tr:nth-child(even) td { background: rgba(181,151,74,.04); }
.article-table .price { font-family: var(--font-editorial); font-size: var(--fs-lg); font-weight: 300; color: var(--ea-green); opacity: 1; }

.article-cta { background: var(--ea-green); border-top: var(--border-gold-2); padding: var(--space-8) var(--space-7); margin-top: var(--space-10); text-align: center; }
.article-cta__label { display: block; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 400; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ea-gold); margin-bottom: var(--space-4); }
.article-cta__title { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: clamp(22px,2.5vw,34px); color: var(--ea-white); line-height: var(--lh-snug); margin-bottom: var(--space-3); }
.article-cta__sub { font-family: var(--font-ui); font-weight: 300; font-size: var(--fs-sm); color: var(--ea-gold-pale); opacity: .7; letter-spacing: var(--ls-base); margin-bottom: var(--space-6); }
.article-cta__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-5); flex-wrap: wrap; }
.article-cta__link2 { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 300; color: var(--ea-gold-pale); opacity: .7; letter-spacing: var(--ls-base); text-decoration: none; border-bottom: 1px solid rgba(181,151,74,.35); padding-bottom: 1px; transition: opacity var(--duration-fast); }
.article-cta__link2:hover { opacity: 1; }

.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(181,151,74,.2); }
.article-nav__item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid rgba(181,151,74,.18); background: var(--ea-offwhite); text-decoration: none; transition: border-color var(--duration-fast), background var(--duration-fast); }
.article-nav__item:hover { border-color: var(--ea-gold); background: #fff; }
.article-nav__item--prev { text-align: left; }
.article-nav__item--next { text-align: right; }
.article-nav__item--disabled { opacity: .3; pointer-events: none; }
.article-nav__direction { font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ea-gold); display: flex; align-items: center; gap: var(--space-2); }
.article-nav__item--next .article-nav__direction { justify-content: flex-end; }
.article-nav__title { font-family: var(--font-editorial); font-style: italic; font-size: var(--fs-lg); font-weight: 300; color: var(--ea-green); line-height: var(--lh-snug); }
@media (max-width: 580px) { .article-nav { grid-template-columns: 1fr; } .article-nav__item--next { text-align: left; } .article-nav__item--next .article-nav__direction { justify-content: flex-start; } }

.article-sidebar { position: sticky; top: 100px; }
.article-sidebar--mobile { display: none; margin-top: var(--space-8); }
@media (max-width: 860px) { .article-sidebar--mobile { display: block; } }

.sidebar-block { background: var(--ea-offwhite); border-top: 2px solid var(--ea-gold); padding: var(--space-6); }
.sidebar-block + .sidebar-block { margin-top: var(--space-5); }
.sidebar-block__title { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ea-green); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(181,151,74,.2); }
.sidebar-articles { display: flex; flex-direction: column; gap: 0; }
.sidebar-article { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid rgba(181,151,74,.12); text-decoration: none; transition: opacity var(--duration-fast); }
.sidebar-article:last-child { border-bottom: none; }
.sidebar-article:hover { opacity: .75; }
.sidebar-article--current .sidebar-article__title { color: var(--ea-gold); }
.sidebar-article__title { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 400; line-height: var(--lh-snug); color: var(--ea-green); transition: color var(--duration-fast); }
.sidebar-article__date { font-family: var(--font-ui); font-size: 10px; font-weight: 300; color: var(--ea-charcoal); opacity: .4; letter-spacing: var(--ls-base); }

.sidebar-cta { background: var(--ea-green); border-top: 2px solid var(--ea-gold); padding: var(--space-6); margin-top: var(--space-5); text-align: center; }
.sidebar-cta__label { display: block; font-family: var(--font-display); font-size: 9px; font-weight: 400; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ea-gold); margin-bottom: var(--space-3); }
.sidebar-cta__text { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: var(--fs-lg); color: var(--ea-white); line-height: var(--lh-snug); margin-bottom: var(--space-4); }
.sidebar-cta__sub { font-family: var(--font-ui); font-size: 10px; font-weight: 300; color: var(--ea-gold-pale); opacity: .65; letter-spacing: var(--ls-base); margin-bottom: var(--space-5); }