/* assets/css/article.css
   Page publique d'un article de blog. Reprend les memes tokens que
   mon-blog.css (--bleu, --creme, --gris-sep, teal #41C4BC en dur) et le
   meme style de texte que le reste du site (Calibri/Carlito/Arial 16px
   #3A3A3A) pour le corps de l'article.
*/

.article-section {
    padding-top: 1.2rem !important;
}

.article-conteneur {
    width: 100%;
}

/* La couleur/soulignement du lien "Retour au blog" viennent de
   .ident-test-link (posee sur le meme <a> dans article.php) ; ici on ne
   gere que la taille. */
.article-retour {
    display: inline-block;
    font-size: 0.85rem;
}

.article-retour-bas {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gris-sep);
}

/* Ligne d'entete : "Retour au blog" a gauche, thematique a droite */
.article-entete-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
}

.chip-thematique {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--dore);
    color: var(--dore);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.article-titre {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 2.1rem;
    line-height: 1.3;
    color: var(--bleu);
    margin: 0 0 0.9rem;
}

/* Petite image en tete d'article (plus une vignette qu'un hero) */
.article-image-petite {
    width: 220px;
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: var(--creme);
    margin: 0 0 1.3rem;
}

.article-image-petite img {
    width: 100%;
    height: auto;
    display: block;
}

/* Chip "X min de lecture" */
.article-chip-ligne {
    margin: 0 0 1.8rem;
}

.chip-lecture {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--creme);
    color: var(--bleu);
    font-size: 0.78rem;
    font-weight: 600;
}

/* Corps de l'article : HTML genere par extraire_article_docx() (h2/p/a) */
.article-corps {
    font-family: Calibri, Carlito, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.75;
    color: #3A3A3A;
}

.article-corps p {
    margin: 0 0 1.3rem;
}

.article-corps h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 1.45rem;
    color: var(--bleu);
    margin: 2.2rem 0 1rem;
    line-height: 1.35;
}

/* Liens dans le corps de l'article (ex. le lien de reference genere par
   blog-parser.php) : meme classe que le reste du site. Cette regle est un
   filet de securite si .ident-test-link n'est pas deja chargee
   globalement sur cette page — sans effet si elle l'est deja. */
.ident-test-link {
    color: var(--dore);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ident-test-link:hover {
    color: var(--bleu);
}

/* Article introuvable */
.article-introuvable {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem 0;
}

.article-introuvable-titre {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 1.8rem;
    color: var(--bleu);
    margin: 0 0 1rem;
}