/* Styles du module Actualités (CMS). Séparé de company/style.css conformément
   à la règle d'architecture : tout style spécifique à un module de contenu
   vit dans son propre fichier. Couleurs : toutes issues de public/css/theme.css
   (var(--text), var(--primary), etc.), seule source de vérité pour les 3
   thèmes (apex/google) x 2 modes (clair/sombre) — voir le
   commentaire équivalent dans company/style.css et theme.css. */
.articles-list { padding-top:0; background:var(--surface); }
.articles-grid { display:grid; align-items:start; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; max-width:1240px; margin:0 auto; background:var(--surface-border-strong); border:1px solid var(--surface-border-strong); }
.article-card { position:relative; display:flex; flex-direction:column; cursor:pointer; background:var(--surface); transition:transform .2s ease,box-shadow .2s ease; }
.article-card:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(var(--text-rgb),.09); z-index:1; }
.article-card-media { height:190px; background-color:var(--surface-muted); background-position:center; background-size:cover; background-repeat:no-repeat; }
.article-card-body { display:flex; flex:1; flex-direction:column; padding:26px 24px 30px; }
.article-card-body h3 { margin:6px 0 10px; font-size:19px; line-height:1.25; letter-spacing:-.02em; color:var(--text); }
.article-card-body p:not(.eyebrow):not(.article-card-meta) { flex:1; margin:0; color:var(--text-muted); font-size:14px; line-height:1.65; }
.article-card-meta { margin:14px 0 0; color:var(--text-muted); font-size:11px; font-weight:700; letter-spacing:.05em; }
.article-featured-badge { position:absolute; top:14px; left:14px; z-index:1; padding:6px 12px; color:var(--text); background:var(--primary); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.article-tags { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.article-tags li { padding:5px 9px; border:1px solid var(--surface-border); color:var(--primary-hover); font-size:11px; font-weight:700; }
.articles-empty { max-width:1240px; margin:0 auto; padding:40px 0 0; color:var(--text-muted); font-size:15px; text-align:center; }

.article-detail { max-width:820px; padding-top:0; margin-inline:auto; background:var(--surface); }
.article-back-link { padding:0; margin-bottom:34px; color:var(--primary-hover); border:0; border-bottom:1px solid currentColor; background:transparent; font-size:13px; font-weight:800; cursor:pointer; }
.article-detail-media { height:360px; margin-bottom:36px; background-color:var(--surface-muted); background-position:center; background-size:cover; background-repeat:no-repeat; }
.article-detail h1 { margin:6px 0 0; font-size:clamp(30px,4vw,46px); line-height:1.08; letter-spacing:-.045em; color:var(--text); }
.article-detail-meta { margin:18px 0 0; color:var(--text-muted); font-size:12px; font-weight:700; letter-spacing:.05em; }
.article-detail .article-tags { margin-top:16px; }
.article-detail-content { margin-top:40px; color:var(--text); font-size:17px; line-height:1.85; }
.article-detail-content h3, .article-detail-content h4 { margin:38px 0 16px; letter-spacing:-.03em; color:var(--text); }
.article-detail-content p { margin:0 0 22px; }
.article-detail-content ul { margin:0 0 22px; padding-left:22px; }
.article-detail-content li { margin-bottom:8px; }
.article-detail-content a { color:var(--primary-hover); text-decoration:underline; }
.article-detail-content h1 { margin:0 0 20px; font-size:clamp(28px,3.6vw,40px); line-height:1.1; letter-spacing:-.04em; color:var(--text); }
.article-detail-content h2 { margin:34px 0 16px; font-size:clamp(24px,3vw,32px); line-height:1.15; letter-spacing:-.03em; color:var(--text); }
.article-detail-content ol { margin:0 0 22px; padding-left:22px; }
.article-detail-content ul ul, .article-detail-content ol ol, .article-detail-content ul ol, .article-detail-content ol ul { margin:8px 0 0; }
.article-detail-content blockquote { margin:0 0 22px; padding:4px 20px; border-left:3px solid var(--primary); color:var(--text-muted); font-style:italic; }
.article-detail-content code { padding:2px 6px; border-radius:4px; background:var(--surface-muted); font-size:.9em; }
.article-detail-content pre { margin:0 0 22px; padding:18px 20px; overflow-x:auto; border-radius:10px; background:var(--app-bg); }
.article-detail-content pre code { padding:0; border-radius:0; background:transparent; color:var(--text); }
.article-detail-content table { width:100%; margin:0 0 22px; border-collapse:collapse; font-size:15px; }
.article-detail-content th, .article-detail-content td { padding:10px 14px; border:1px solid var(--surface-border); text-align:left; }
.article-detail-content th { background:var(--surface-muted); font-weight:700; }
.article-detail-content img { max-width:100%; height:auto; margin:8px 0 22px; border-radius:8px; }
.article-detail-content hr { margin:32px 0; border:0; border-top:1px solid var(--surface-border); }
.article-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
.article-gallery a { display:block; overflow:hidden; }
.article-gallery img { display:block; width:100%; height:220px; object-fit:cover; transition:transform .2s ease; }
.article-gallery a:hover img { transform:scale(1.03); }
.article-video { position:relative; height:0; padding-bottom:56.25%; margin-top:32px; overflow:hidden; background:#000; }
.article-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.article-pdf-link { display:inline-flex; align-items:center; gap:12px; margin-top:32px; padding:14px 22px; border:1px solid var(--primary); color:var(--text); background:var(--primary); font-size:13px; font-weight:800; text-decoration:none; }
.article-pdf-link:hover { color:#fff; background:transparent; }

@media(max-width:1023px) { .articles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) {
  .articles-grid { grid-template-columns:1fr; margin:0 25px; }
  .articles-empty { margin:0 25px; }
  .article-detail { padding-left:25px; padding-right:25px; }
  .article-gallery { grid-template-columns:1fr; }
}

/* Thème sombre (voir la note équivalente dans company/style.css : on cible
   les sélecteurs directement plutôt que de redéfinir les variables partagées
   avec l'espace de travail interne). */
html[data-theme="dark"] .articles-list,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .article-detail {
  background:var(--app-bg) !important;
}
html[data-theme="dark"] .articles-grid {
  background:var(--surface-border-strong) !important;
}
html[data-theme="dark"] .article-card-media,
html[data-theme="dark"] .article-detail-media {
  background-color:var(--surface-elevated) !important;
}
html[data-theme="dark"] .article-card-body h3,
html[data-theme="dark"] .article-detail h1,
html[data-theme="dark"] .article-detail-content,
html[data-theme="dark"] .article-detail-content h3,
html[data-theme="dark"] .article-detail-content h4 {
  color:var(--text) !important;
}
html[data-theme="dark"] .article-card-body p:not(.eyebrow):not(.article-card-meta),
html[data-theme="dark"] .articles-empty {
  color:var(--text-muted) !important;
}
html[data-theme="dark"] .article-card-meta,
html[data-theme="dark"] .article-detail-meta {
  color:var(--text-muted) !important;
}
html[data-theme="dark"] .article-tags li {
  border-color:var(--surface-border) !important;
  color:var(--primary) !important;
}
html[data-theme="dark"] .article-back-link,
html[data-theme="dark"] .article-detail-content a {
  color:var(--primary) !important;
}
html[data-theme="dark"] .article-detail-content h1,
html[data-theme="dark"] .article-detail-content h2 {
  color:var(--text) !important;
}
html[data-theme="dark"] .article-detail-content blockquote {
  color:var(--text-muted) !important;
  border-left-color:var(--primary) !important;
}
html[data-theme="dark"] .article-detail-content code {
  background:var(--surface-elevated) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .article-detail-content th,
html[data-theme="dark"] .article-detail-content td {
  border-color:var(--surface-border) !important;
}
html[data-theme="dark"] .article-detail-content th {
  background:var(--surface-elevated) !important;
}
html[data-theme="dark"] .article-detail-content hr {
  border-top-color:var(--surface-border) !important;
}