/* ==========================================================================
   ASSETS/CSS/BLOG-POST.CSS - Styles spécifiques pour les articles & sources
   (Version Complète et Formatée)
   ========================================================================== */

/* ==========================================================================
   Styles pour masquer/afficher le header sur les pages d'article ET sources
   ========================================================================== */

/* Appliquer ces styles aux pages d'article OU de sources */
.body-post-page .header,
.body-source-page .header
{
    /* Assure que transform est inclus dans la transition définie dans style.css */
    transition: transform 0.4s ease-in-out, background-color var(--transition-fast), padding var(--transition-fast), box-shadow var(--transition-fast);
}

/* État caché : le header glisse vers le haut */
.body-post-page .header.header-hidden,
.body-source-page .header.header-hidden
{
    transform: translateY(-100%);
}

/* S'assurer que le header (scrollé ou non) reste visible s'il n'est pas caché */
.body-post-page .header:not(.header-hidden),
.body-source-page .header:not(.header-hidden)
{
     transform: translateY(0);
}
/* --- Fin Styles Masquage Header --- */


/* -------------------------------------------------------------------------- */
/* Conteneur principal et Layout Général Article/Sources                      */
/* -------------------------------------------------------------------------- */
.post-main-content
{
    padding-top: 16rem; /* Espace pour le header fixe */
    padding-bottom: var(--section-spacing);
    background-color: var(--white-rock-light); /* Fond général des pages blog/sources */
}

.post-article-container
{
    max-width: 900px; /* MODIFIÉ : Élargi de 800px à 900px */
    margin: 0 auto;
    background-color: white;
    padding: 4rem clamp(2rem, 5vw, 6rem); /* Le padding interne peut rester */
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-md);
}

/* La règle spécifique pour la page source devient redondante si la base est déjà 900px,
   mais on peut la garder au cas où vous voudriez des largeurs différentes plus tard.
   Si vous voulez TOUJOURS la même largeur pour article et sources, vous pouvez supprimer
   la règle ci-dessous. */
.source-page-content .post-article-container
{
     max-width: 900px; /* Reste à 900px, cohérent */
}
/* -------------------------------------------------------------------------- */
/* En-tête Article/Sources (Titre, Meta, Extrait)                             */
/* -------------------------------------------------------------------------- */
.post-header
{
    margin-bottom: 3rem;
    text-align: left;
    border-bottom: 1px solid var(--quicksand-light);
    padding-bottom: 3rem;
}
/* Centrage spécifique pour l'en-tête de la page sources */
.source-page-content .post-header
{
    text-align: center;
    border-bottom: none;
    margin-bottom: 4rem;
}

.post-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
}
.post-category
{
    color: var(--walnut);
    font-weight: 600;
    text-decoration: none;
    background-color: var(--white-rock);
    padding: 0.3rem 0.8rem;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);
}
.post-category:hover
{
    background-color: var(--quicksand-light);
}
.post-date, .post-author
{
    color: var(--black-pearl-light);
    opacity: 0.8;
}

.post-title
{
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.2rem, 5vw, 4.8rem);
    color: var(--black-pearl);
    line-height: 1.15;
    margin-bottom: 1rem;
}
/* Taille spécifique titre page sources */
.source-page-content .post-title
{
    font-size: clamp(2.8rem, 4.5vw, 4.2rem);
}

.post-excerpt
{
    font-size: 1.8rem;
    color: var(--black-pearl-light);
    font-style: italic;
    line-height: 1.5;
    margin-top: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Image Mise en Avant (Articles)                                             */
/* -------------------------------------------------------------------------- */
.post-featured-image
{
    margin: 0 0 4rem 0;
    /* Arrondi uniquement sur les coins supérieurs */
    border-top-left-radius: var(--border-radius-sm);
    border-top-right-radius: var(--border-radius-sm);
    overflow: hidden; /* Toujours essentiel pour masquer les coins de l'image */
}
.post-featured-image img
{
    width: 100%;
    height: auto;
    display: block;
}
.post-featured-image figcaption
{
    font-size: 1.3rem;
    text-align: center;
    color: var(--black-pearl-light);
    margin-top: 0.8rem;
    font-style: italic;
}

/* -------------------------------------------------------------------------- */
/* Corps de l'Article & Page Sources (Styles communs)                         */
/* -------------------------------------------------------------------------- */
.post-body
{
    font-size: 1.7rem;
    line-height: 1.75;
    color: var(--black-pearl-light);
}
.post-body p
{
    margin-bottom: 2rem;
}
.post-body p:last-child
{
    margin-bottom: 0;
}
.post-body h2
{
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.6rem, 4vw, 3.2rem);
    color: var(--black-pearl);
    line-height: 1.2;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--quicksand-light);
}
.post-body h3
{
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(2.2rem, 3.5vw, 2.6rem);
    font-weight: 500;
    color: var(--walnut-light);
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
    border-bottom: none;
}
.post-body h4
{
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.1rem, 3.2vw, 2.4rem);
    font-weight: 600;
    color: var(--black-pearl);
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
    border-bottom: none;
    padding-left: 1.5rem;
    border-left: 4px solid var(--quicksand);
}
.post-body ul, .post-body ol
{
    margin-bottom: 2rem;
    padding-left: 3rem;
}
.post-body ul li, .post-body ol li
{
    margin-bottom: 1rem;
}
.post-body ul
{
    list-style: disc;
}
.post-body ol
{
    list-style: decimal;
}
.post-body blockquote
{
    margin: 2.5rem 0;
    padding: 2rem 2.5rem;
    background-color: var(--white-rock);
    border-left: 5px solid var(--quicksand);
    font-style: italic;
    font-size: 1.8rem;
    color: var(--black-pearl);
}
.post-body blockquote p
{
    margin-bottom: 0;
}
.post-body blockquote footer
{
    font-size: 1.5rem;
    text-align: right;
    margin-top: 1rem;
    font-style: normal;
}
.post-body strong
{
    font-weight: 600;
    color: var(--black-pearl);
}
.post-body em
{
    font-style: italic;
}
.post-body a
{
    color: var(--walnut-light);
    text-decoration: underline;
    text-decoration-color: var(--quicksand-light);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.post-body a:hover
{
    color: var(--walnut);
    text-decoration-color: var(--walnut);
}
.post-body img
{
    max-width: 100%;
    height: auto;
    margin: 3rem auto;
    display: block;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-sm);
}
.post-body hr
{
    border: none;
    border-top: 1px solid var(--quicksand-light);
    margin: 4rem auto;
    width: 50%;
}
.post-body sup
{
    line-height: 0;
}
.post-body sup a
{
    text-decoration: none;
    font-size: 1.1rem;
}

/* -------------------------------------------------------------------------- */
/* Pied d'Article (Auteur)                                                    */
/* -------------------------------------------------------------------------- */
.post-footer
{
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--quicksand-light);
}
.author-box
{
    display: flex;
    align-items: center;
    gap: 2rem;
    background-color: var(--white-rock);
    padding: 2rem;
    border-radius: var(--border-radius-md);
}
.author-avatar
{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.author-info h4
{
    font-family: 'Outfit', sans-serif; /* Utilise police standard */
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--black-pearl); /* Reset couleur */
    margin-bottom: 0.5rem;
    margin-top: 0; /* Reset marges */
    border-bottom: none; /* Reset bordures */
    padding-left: 0;
    border-left: none;
    font-style: normal; /* Reset style */
}
.author-info p
{
    font-size: 1.4rem;
    color: var(--black-pearl-light);
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* Styles Spécifiques Article (Exercice, Notes, Lien Sources)                 */
/* -------------------------------------------------------------------------- */
.exercice-box
{
    background-color: var(--white-rock);
    border: 1px solid var(--quicksand-light);
    border-left: 5px solid var(--walnut);
    padding: 2.5rem 3rem;
    margin: 3rem 0;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-sm);
}
.exercice-box h3
{
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    color: var(--walnut);
    margin-top: 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--quicksand-light);
    padding-bottom: 1rem;
    font-style: normal; /* Reset style */
    font-weight: 600;   /* Remis en gras */
}
.exercice-box ol, .exercice-box ul
{
    padding-left: 2rem;
    margin-bottom: 1rem;
}
.exercice-box ol > li, .exercice-box ul > li
{
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
}
.exercice-box li ul
{
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}
.exercice-box li ul li
{
     margin-bottom: 0.8rem;
     font-size: 1.5rem;
}
.exercice-box p:last-of-type
{
    margin-bottom: 0;
    font-style: italic;
    font-size: 1.5rem;
    margin-top: 2rem;
}

.footnotes
{
    margin-top: 6rem;
    padding-top: 2rem;
    border-top: 1px solid var(--quicksand-light);
}
.footnotes hr
{
    display: none;
}
.footnotes ol
{
    list-style: none;
    padding-left: 0;
    font-size: 1.4rem;
    color: var(--black-pearl-light);
}
.footnotes li
{
    margin-bottom: 1rem;
    line-height: 1.5;
}
.footnotes li p
{
    margin-bottom: 0;
    display: inline;
}
.footnotes li a[rel="footnote"]
{
    margin-left: 0.5rem;
    text-decoration: none;
    color: var(--walnut);
    font-weight: bold;
}
.footnotes li a[rel="footnote"]:hover
{
     text-decoration: underline;
}
.icon-inline
{
    width: 1.6rem;
    height: 1.6rem;
    vertical-align: -0.15em;
    stroke-width: 2.5;
    color: var(--quicksand);
}


/* -------------------------------------------------------------------------- */
/* Styles Spécifiques Page Sources                                            */
/* -------------------------------------------------------------------------- */
.source-page-content .post-article-container
{
    max-width: 900px;
}
.source-section
{
    margin-bottom: 5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--white-rock-medium);
}
.source-section:last-of-type
{
     border-bottom: none;
     margin-bottom: 0;
}
.source-section h2
{
    font-size: clamp(2.4rem, 3.8vw, 2.8rem);
    border-bottom: 2px solid var(--quicksand);
    padding-bottom: 0.8rem;
    margin-bottom: 2.5rem;
    display: inline-block;
}
.source-affirmation-block, .source-concept-block
{
    margin-bottom: 4rem;
    padding: 2rem;
    background-color: var(--white-rock-light);
    border-radius: var(--border-radius-sm);
}
.source-affirmation-block:last-child, .source-concept-block:last-child
{
     margin-bottom: 0;
}
.source-affirmation-block h3, .source-concept-block h3
{
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--black-pearl);
    margin-bottom: 1.5rem;
    margin-top: 0;
    border-bottom: none;
    font-style: normal;
    padding-left: 0;
    border-left: none;
}
.source-affirmation-block h3 .affirmation-text
{
    font-style: italic;
    font-weight: 400;
    color: var(--black-pearl-light);
}
.confidence-level
{
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0.3rem 1rem;
    border-radius: 15px;
    margin-bottom: 1.5rem;
    background-color: var(--quicksand-light);
    color: var(--walnut);
}
.source-affirmation-block h4, .source-concept-block h4
{
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--walnut);
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: none;
    padding-left: 0;
    border-left: none;
}
.source-affirmation-block ul, .source-concept-block ul
{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.source-affirmation-block ul li, .source-concept-block ul li
{
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--quicksand-light);
}
.source-details, .source-notes
{
    font-size: 1.4rem;
    line-height: 1.5;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    color: var(--black-pearl-light);
}
.source-notes
{
    font-style: italic;
    opacity: 0.9;
}
.source-link
{
    font-size: 1.3rem;
    margin-top: 0.5rem;
    display: block;
}
.source-link a
{
    color: var(--walnut-light);
    word-break: break-all;
}
.source-concept-block p
{
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
}
.source-concept-block p strong
{
    font-weight: 600;
}
.bibliography ul
{
    list-style: none;
    padding-left: 0;
}
.bibliography li
{
    margin-bottom: 1rem;
    font-size: 1.4rem;
    line-height: 1.5;
}
.bibliography li a
{
     word-break: break-all;
}

/* NOUVEAUX STYLES POUR LE BLOC TEASER QUIZ EN FIN D'ARTICLE */
.quiz-teaser-box {
    background-color: var(--white-rock-medium); /* Fond légèrement distinct */
    border-radius: var(--border-radius-md);
    padding: 3rem clamp(2rem, 4vw, 4rem);
    margin: 4rem 0; /* Espace avant et après */
    display: flex;
    align-items: flex-start; /* Aligne l'icône en haut avec le début du texte */
    gap: 2.5rem;
    box-shadow: var(--box-shadow-sm);
    border: 1px solid var(--quicksand-light);
}

.quiz-teaser-icon {
    flex-shrink: 0;
    width: 60px; /* Taille du conteneur d'icône */
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--walnut-light), var(--walnut));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.quiz-teaser-icon i {
    width: 28px; /* Taille de l'icône Feather */
    height: 28px;
}

.quiz-teaser-content {
    flex-grow: 1;
}

.overline-teaser { /* Similaire à .overline mais peut être stylé différemment si besoin */
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--walnut);
    margin-bottom: 0.5rem;
    display: block;
}

.quiz-teaser-content h3 {
    font-family: 'Bebas Neue', sans-serif; /* Reprend la police des titres */
    font-size: clamp(2.2rem, 3.5vw, 2.8rem); /* Taille adaptée */
    color: var(--black-pearl);
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: none; /* Pas de bordure pour ce H3 */
    font-style: normal; /* Pas d'italique pour ce H3 */
}

.quiz-teaser-content p {
    font-size: 1.6rem;
    color: var(--black-pearl-light);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.quiz-teaser-button {
    /* Le style .btn .btn-primary .btn-icon est déjà appliqué */
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    color: var(--white-rock) !important; /* Forcer la couleur du texte et de l'icône */
}

.quiz-teaser-button:hover {
    color: var(--white-rock) !important; /* Garder la couleur blanche/claire même au survol */
    /* Si vous voulez que le fond change au survol mais pas la couleur du texte pour CE bouton : */
    /* background: linear-gradient(to right, var(--walnut-light), var(--walnut)); */ /* Inverser le gradient au survol par exemple */
}

.quiz-teaser-button i { /* Cible l'icône Feather à l'intérieur */
    width: 20px;
    height: 20px;
    color: inherit; /* Assure que l'icône hérite de la couleur du texte du bouton */
}

/* Responsive pour le teaser quiz */
@media (max-width: 600px) {
    .quiz-teaser-box {
        flex-direction: column; /* Empile icône et contenu sur mobile */
        align-items: center; /* Centre les éléments empilés */
        text-align: center;
        gap: 2rem;
    }
    .quiz-teaser-icon {
        margin-bottom: 0.5rem; /* Réduit l'espace si l'icône est au-dessus */
    }
    .quiz-teaser-content p {
        margin-left: auto;
        margin-right: auto;
        max-width: 45ch; /* Limite largeur du texte */
    }
}

/* Styles pour le CTA du guide à la fin de l'article */
.guide-cta-box {
    background-color: var(--white-rock); /* Ou une autre couleur */
    border-radius: var(--border-radius-md);
    padding: 3rem clamp(2rem, 4vw, 4rem);
    margin: 3rem 0;
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    border: 1px solid var(--quicksand); /* Bordure plus visible peut-être */
}

.guide-cta-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--quicksand), var(--quicksand-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-pearl);
}
.guide-cta-icon i {
    width: 26px;
    height: 26px;
}

.guide-cta-content {
    flex-grow: 1;
}
.guide-cta-content h3 { /* Style pour le titre du CTA guide */
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 3vw, 2.4rem);
    color: var(--black-pearl);
    margin-top: 0;
    margin-bottom: 0.8rem;
    border-bottom: none;
    font-style: normal;
}
.guide-cta-content p {
    font-size: 1.5rem;
    color: var(--black-pearl-light);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.guide-cta-button {
    /* Utilise .btn-secondary, donc les styles de base s'appliquent */
}
/* Responsive pour le guide CTA */
@media (max-width: 600px) {
    .guide-cta-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }
}

/* Style pour le lien de la catégorie dans l'en-tête de l'article */
.post-meta a.post-category-link {
    text-decoration: none;
}
/* Le span.post-category à l'intérieur est déjà stylé */
.post-meta a.post-category-link:hover .post-category {
    background-color: var(--quicksand); /* Un survol légèrement différent */
}

.post-category { /* Styles pour le span à l'intérieur du lien */
    display: inline-block; /* Important pour que padding/background s'appliquent bien */
    background-color: var(--quicksand-light); /* Style de base comme sur ressources.html */
    color: var(--walnut);
    padding: 0.3rem 0.8rem;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    text-transform: uppercase; /* Pour correspondre au style des cartes */
    letter-spacing: 0.5px;   /* Pour correspondre au style des cartes */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.post-meta a.post-category-link:hover .post-category {
    background-color: var(--walnut); /* Fond foncé au survol */
    color: var(--white-rock-light);   /* Texte clair au survol */
}

/* Style pour le CTA vers le module à la fin de l'article */
.article-module-cta {
    margin-top: 4rem;
    margin-bottom: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--quicksand-light);
    text-align: center;
}
.article-module-cta h4 {
    font-family: 'Playfair Display', serif; /* Ou Outfit */
    font-size: 1.8rem; /* Ajustez si besoin */
    color: var(--black-pearl);
    margin-bottom: 1.5rem;
    font-weight: 500;
    /* Réinitialiser les styles de h4 hérités de .post-body si nécessaire */
    padding-left: 0;
    border-left: none;
    font-style: normal;
}
.article-module-cta .btn-secondary { /* Style du bouton */
    /* Les styles de base .btn et .btn-secondary s'appliquent */
}
.article-module-cta .btn-secondary i {
    /* Les styles d'icône dans le bouton s'appliquent */
}

/* -------------------------------------------------------------------------- */
/* Responsive Article/Sources                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px)
{
    .post-main-content { padding-top: 12rem; }
    .post-article-container { padding: 3rem clamp(1.5rem, 4vw, 4rem); }
    .post-title { font-size: clamp(2.8rem, 7vw, 3.8rem); }
    .post-body { font-size: 1.6rem; }
    .author-box { flex-direction: column; text-align: center; }
    .author-avatar { width: 70px; height: 70px; }
    .source-page-content .post-header .subtitle { font-size: 1.6rem; }
    .source-section h2 { font-size: clamp(2.2rem, 5vw, 2.6rem); }
    .source-affirmation-block h3 { font-size: 1.7rem; }
}