/*
  articles.css — Page de détail d'un article (view/v3/articles/view.tpl)
  Dépend de base.css (variables, .serie-layout vient de wiki_serie.css, .products-grid/.product-card
  viennent de encyclopedie.css — cette feuille ne couvre que ce qui est propre à l'article :
  en-tête, méta, typographie du contenu riche, tags, section "articles liés".
*/

/* ════════════════════════════════════════════
   EN-TÊTE
════════════════════════════════════════════ */
.article-header {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 20px 22px;
    margin-bottom: 16px;
}

.article-title {
    font-family: var(--fh);
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
    margin: 0 0 10px;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-family: var(--fb);
    font-size: 12px;
    color: var(--text3);
}

.article-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.article-meta-item i { width: 13px; text-align: center; color: var(--text3); }

.article-meta a {
    color: var(--text2);
    text-decoration: none;
    transition: color .15s;
}
.article-meta a:hover { color: var(--accent3); }

.article-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 99px;
    border: 1px solid var(--border2);
    background: var(--bg3);
    color: var(--text2) !important;
    font-weight: 600;
    transition: all .15s;
}
.article-edit-link:hover {
    border-color: var(--accent2);
    color: var(--accent3) !important;
    background: var(--accent-bg);
}

/* ════════════════════════════════════════════
   CORPS DE L'ARTICLE
════════════════════════════════════════════ */
.article-body {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 22px 24px;
    margin-bottom: 16px;
}

.article-entete {
    font-family: var(--fb);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.6;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* Typographie du contenu riche (HTML libre produit par l'éditeur) */
.article-content {
    font-family: var(--fb);
    font-size: 14px;
    color: var(--text2);
    line-height: 1.85;
}
.article-content p { margin: 0 0 14px; }
.article-content p:last-child { margin-bottom: 0; }
.article-content h1, .article-content h2, .article-content h3, .article-content h4 {
    font-family: var(--fh);
    color: var(--text);
    line-height: 1.3;
    margin: 24px 0 12px;
}
.article-content h1:first-child, .article-content h2:first-child,
.article-content h3:first-child, .article-content h4:first-child { margin-top: 0; }
.article-content h2 { font-size: 20px; }
.article-content h3 { font-size: 17px; }
.article-content h4 { font-size: 15px; }
/* !important nécessaire : le contenu vient de TinyMCE et peut contenir des liens collés avec un
   style inline (color:#xxx hérité de l'ancien éditeur / de contenu copié-collé) qui écraserait
   sinon la couleur du site (spécificité d'un style inline > n'importe quelle règle de classe). */
.article-content a { color: var(--accent3) !important; text-decoration: underline; text-underline-offset: 2px; }
.article-content a:hover { color: var(--accent2) !important; }
.article-content strong, .article-content b { color: var(--text); }
.article-content ul, .article-content ol { margin: 0 0 14px; padding-left: 22px; }
.article-content li { margin-bottom: 6px; }
.article-content blockquote {
    margin: 16px 0;
    padding: 10px 16px;
    border-left: 3px solid var(--accent2);
    background: var(--bg3);
    color: var(--text2);
    font-style: italic;
}
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r);
    display: block;
    margin: 14px auto;
}
.article-content iframe {
    max-width: 100%;
    border-radius: var(--r);
    border: none;
}
.article-content table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; }
.article-content table th, .article-content table td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
}
.article-content table th { background: var(--bg3); color: var(--text); }

/* Bloc "Source :" / "Sources :" / "Crédits photo :" généré par Article::bbcode() ([source],
   [sources], [photo]) — reste désormais imbriqué dans .article-content (cf. bbcode()), donc les
   liens qu'il contient héritent normalement de la règle .article-content a ci-dessus. */
.article-content .article-source {
    text-align: right;
    font-size: 12px;
    color: var(--text3);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.wp-caption{
     max-width:100%;
     width:auto 100%;
     height:auto;
     display:block;
     background-color:#741b47;
     padding-top:6px;
     padding-left:5px;
     padding-right:5px;
     margin:10px 10px 10px 10px;
     -moz-border-radius:3px;
     -khtml-border-radius:3px;
     -webkit-border-radius:3px;
     border-radius:8px 
}
 .wp-caption img{
     margin:0 !important;
     padding:0 !important;
     border:0 none !important
}
 .wp-caption p.wp-caption-text{
    text-align:center;
    font-size:0.9em;
    line-height:15px;
    padding:5px 5px 5px 5px;
    margin:5px;
    color:white
}

.alignMiddle {
     vertical-align: middle;
}
 .alignTop {
     vertical-align: top;
}
 .aligncenter {
     float: none;
     display: block;
     margin: 0 auto;
}
 .alignleft {
     float: left;
     margin-right: 10px;
}
 .alignright {
     float: right;
     margin-left: 10px;
}

/* ════════════════════════════════════════════
   TAGS
════════════════════════════════════════════ */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    margin-bottom: 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    font-family: var(--fb);
    font-size: 12px;
    color: var(--text3);
}
.article-tags a {
    color: var(--text2);
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    transition: all .15s;
}
.article-tags a:hover { color: var(--accent3); border-color: var(--accent2); background: var(--accent-bg); }

/* ════════════════════════════════════════════
   ARTICLES LIÉS
════════════════════════════════════════════ */
.article-related-title {
    font-family: var(--fh);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
}

@media (max-width: 640px) {
    .article-title { font-size: 21px; }
    .article-header, .article-body { padding: 16px; }
    .article-edit-link { margin-left: 0; }
}