/* ============================================
   TEMPLATE ARTICLE SINGLE — PENSEZ SAUVAGE KRAFT
   Styles spécifiques aux articles ouverts.
   Le cadre .ps-contenu-flex / .ps-contenu-border
   est géré ailleurs (shop.css).
   ============================================ */

.ps-article-single {
    max-width: 996px;
    margin: 0 auto;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #2C1810;
}

/* Titre de l'article — gros, centré */
.ps-article-titre {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 2.8rem;
    font-weight: 400;
    color: #2C1810;
    text-align: center;
    letter-spacing: -0.02em;
    margin: 1.5rem 0 1.8rem;
    line-height: 1.1;
}

/* Bloc d'entrée — image flottante à gauche, chapô à droite */
.ps-article-entree {
    margin-bottom: 2rem;
}

/* Vignette de tête (reproduit les styles .ps-blog-vignette
   en l'adaptant pour le single) */
.ps-article-vignette {
    float: left;
    width: 280px;
    margin: 0 1.5rem 1rem 0;
    border: 3px solid #4C351C;
    border-image: url('../images/border.png') 24 24 / 20px 20px / 0.1rem 0.2rem 0.1rem 0.1rem round;
    background: rgba(125, 75, 44, 0.2);
    box-sizing: border-box;
}
.ps-article-vignette-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ps-article-vignette-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #dfc4a6;
}
.ps-article-vignette-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ps-article-vignette-bandeau {
    background: #e4b890;
    padding: 0.7rem 0.9rem;
    text-align: center;
    border-top: 2px solid #4C351C;
    flex-shrink: 0;
}
.ps-article-vignette-sous-titre {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 1rem;
    color: #2C1810;
    line-height: 1.25;
    margin: 0;
}

/* Chapô en italique, plus gros que le corps */
.ps-article-chapo {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.55;
    font-style: italic;
    color: #3B2510;
}
.ps-article-chapo p {
    margin: 0 0 0.8rem;
}
.ps-article-chapo p:last-child {
    margin-bottom: 0;
}

/* Corps de l'article */
.ps-article-corps {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #2C1810;
    margin-bottom: 2.5rem;
}
.ps-article-corps h2 {
    font-size: 1.8rem;
    color: #D4600A;
    margin: 2rem 0 0.8rem;
}
.ps-article-corps h3 {
    font-size: 1.4rem;
    color: #4C351C;
    margin: 1.5rem 0 0.6rem;
}
.ps-article-corps p {
    margin: 0 0 1rem;
}
.ps-article-corps a {
    color: #D4600A;
}
.ps-article-corps a:hover {
    color: #2C1810;
}

/* Post-scriptum — bloc sobre fond orange/jaune très léger */
.ps-article-ps {
    margin: 2.5rem 0;
    padding: 1.3rem 1.6rem 1.1rem;
    background: rgba(255, 220, 150, 0.15);
    border-left: 3px solid #D4600A;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 1rem;
    line-height: 1.55;
    color: #3B2510;
    border-radius: 2px;
}
.ps-article-ps-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #D4600A;
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
}
.ps-article-ps p {
    margin: 0 0 0.6rem;
}
.ps-article-ps p:last-child {
    margin-bottom: 0;
}

/* "Vous aimerez aussi" */
.ps-article-lies {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #C8A882;
}
.ps-article-lies-titre {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    color: #2C1810;
    text-align: center;
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
}

/* Ligne auteur / date en bas à droite, discrète */
.ps-article-meta {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(200, 168, 130, 0.4);
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 0.88rem;
    color: #8A6C4E;
    text-align: right;
    font-style: italic;
}

/* RESPONSIVE MOBILE — image retirée du bloc entrée */
@media (max-width: 767px) {
    .ps-article-titre {
        font-size: 2rem;
    }
    .ps-article-vignette {
        display: none;
    }
    .ps-article-chapo {
        font-size: 1.1rem;
    }
    .ps-article-corps {
        font-size: 1rem;
    }
    .ps-article-corps h2 {
        font-size: 1.5rem;
    }
}
@media (max-width: 1199px) and (min-width: 768px) {
    .ps-article-vignette {
        width: 240px;
    }
}