/* ============================================================
   Blocs des articles : couverture, tableau de données, encadré,
   avertissement. Chargé après article-shared.css.

   Ces règles étaient copiées dans le <style> de plus de 200
   articles, en deux variantes qui ne différaient que par la
   couleur des bordures :
     - turquoise (par défaut) ;
     - violet : l'article redéfinit les deux variables ci-dessous
       dans un <style> d'une ligne.
   ============================================================ */
:root {
  --bloc-rgb: 22,199,183;       /* bordures, survol des lignes */
  --bloc-info-rgb: 22,199,183;  /* encadré .info-box */
}

.article-title { margin: 0 0 1rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.article-cover { width: 100%; border-radius: 14px; margin-bottom: 2rem; border: 1px solid rgba(var(--bloc-rgb),.2); overflow: hidden; position: relative; background: rgba(255,255,255,.02); min-height: 320px; }
.cover-image { width: 100%; height: 100%; min-height: 320px; display: block; object-fit: cover; object-position: center; transition: transform .45s ease; }
.article-cover:hover .cover-image { transform: scale(1.03); }
.article-body h3 { margin: 2rem 0 0.85rem; font-size: 1.2rem; font-weight: 700; color: #fff; }
.article-body ul, .article-body ol { margin: 0 0 1.35rem; padding-left: 1.5rem; }
.article-body li { margin-bottom: 0.5rem; }
.data-table-wrap { margin: 2rem 0; border: 1px solid rgba(var(--bloc-rgb),.3); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.02); }
.data-table-title { padding: 1rem 1.5rem 0.75rem; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-2); }
.data-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table-wrap thead th { padding: 0.65rem 1.5rem; text-align: left; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid rgba(var(--bloc-rgb),.25); background: rgba(255,255,255,.02); }
.data-table-wrap tbody td { padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text); vertical-align: top; }
.data-table-wrap tbody tr:last-child td { border-bottom: none; font-weight: 700; color: #fff; }
.data-table-wrap tbody tr:hover { background: rgba(var(--bloc-rgb),.04); }
.info-box { margin: 2rem 0; padding: 1.5rem; border: 1px solid rgba(var(--bloc-info-rgb),.3); border-radius: 14px; background: rgba(var(--bloc-info-rgb),.06); }
.info-box-title { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-2); }
.info-box p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }
.info-box strong { color: var(--text); }
.disclaimer { margin-top: 2rem; padding: 1.25rem; border: 1px solid rgba(255,180,50,.2); border-radius: 12px; background: rgba(255,180,50,.04); font-size: 0.82rem; line-height: 1.55; color: var(--muted); }
.disclaimer strong { color: rgba(255,200,80,.9); }
@media (max-width: 640px) {
  header { padding: 12px 16px; }
  header .site-title { font-size: 20px; }
  nav.menu { gap: 12px; font-size: 0.85rem; }
  .article-shell { width: min(calc(100% - 1rem), var(--bp-article-w)); }
  .article-card { border-radius: 16px; padding: 1.25rem; }
  .author-card { flex-direction: column; text-align: center; }
  .data-table-wrap thead th, .data-table-wrap tbody td { padding: 0.6rem 0.75rem; font-size: 0.82rem; }
  .article-cover { min-height: 220px; }
  .cover-image { min-height: 220px; }
}