/* ============================================
   BLOG — PENSEZ SAUVAGE KRAFT
   Vignettes carrées découpées en 2/3 image + 1/3 bandeau titre,
   lien stretched sur toute la carte, halo noir au survol via box-shadow.
   Grille flex 4/3/2 colonnes centrée, héritée du cadre kraft.
   ============================================ */

/* ---- Descriptions ---- */
/* Description principale (sous le h1 des pages catégorie) — centrée */
.ps-blog-description {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #4B3319;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 auto 2rem;
    max-width: 900px;
    text-align: center;
}

/* Description de section (par sous-catégorie sur /blog/ racine) — alignée à gauche */
.ps-blog-cat-description {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    color: #4B3319;
    font-size: 1.2rem;
    line-height: 1.55;
    margin: 0 0 1.8rem;
    max-width: 900px;
    text-align: left;
}

/* ---- Sections / titres de catégorie ---- */
.ps-blog-section {
    margin-bottom: 3rem;
}

.ps-blog-cat-titre {
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 3rem;
    font-weight: 400;
    color: #2C1810;
    margin: 2.5rem 0 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #C8A882;
    text-align: center;
    letter-spacing: -0.02em;
}
.ps-blog-cat-titre a {
    color: #2C1810;
    text-decoration: none;
}
.ps-blog-cat-titre a:hover {
    color: #D4600A;
}

/* ---- Grille flex 4/3/2 colonnes ---- */
.ps-blog-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: 1rem;
}

/* ---- Vignette ---- */
/* Carré (aspect-ratio 1/1) découpé en 2/3 image + 1/3 bandeau titre via flex
   column. Le <a> englobe tout (stretched-link pattern). Halo noir au survol
   via box-shadow (liseré 1px + halo diffus).
   Largeur fixe 260px (≥792px). Sous 792px : fluide 50% (cf. @media). */
.ps-blog-vignette {
    display: flex;
    flex-direction: column;
    position: relative;
    aspect-ratio: 1 / 1;
    flex: 0 0 260px;
    width: 260px;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    border: none;
    transition: box-shadow 0.25s ease;
}

.ps-blog-vignette:hover,
.ps-blog-vignette:focus-visible {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 16px 2px rgba(0, 0, 0, 0.35);
    outline: none;
}

.ps-blog-vignette-image {
    position: relative;
    width: 100%;
    flex: 0 0 66.666%;
    height: 66.666%;
    overflow: hidden;
    background: #dfc4a6;
}

.ps-blog-vignette-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ps-blog-vignette-placeholder {
    width: 100%;
    height: 100%;
    background: #dfc4a6;
}

.ps-blog-vignette-titre {
    flex: 0 0 33.333%;
    height: 33.333%;
    margin: 0;
    padding: 0.3em 0.5em 0.6em;
    box-sizing: border-box;
    background: rgba(107, 66, 38, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.ps-blog-vignette-titre-texte {
    font-family: "OldNewspaperTypesALM", "courier", "Times New Roman", serif;
    color: #1A1A1A;
    font-size: 1.2rem;
    line-height: 1.25;
    text-align: center;
    letter-spacing: -0.02em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smartphone + tablette étroit : fluide 50% */
@media (max-width: 791px) {
    .ps-blog-grid { gap: 0.8rem; }
    .ps-blog-vignette {
        flex: 0 0 calc(50% - 0.8rem * 1 / 2);
        width: auto;
        max-width: calc(50% - 0.8rem * 1 / 2);
    }
}

/* ---- Bouton "Voir tous les articles" ---- */
/* Style aligné sur .ps-minipanier-btn (css/minicart.css) : fond kraft beige
   transparent + bordure border-image, hover orange semi-transparent. Largeur
   intrinsèque (pas width:100%) car aligné à droite par le wrapper flex. */
.ps-blog-voir-tous {
    display: flex;
    justify-content: flex-end;
    margin: 1.5rem 0 0;
    padding: 0;
}
.ps-blog-voir-tous a {
    display: inline-block;
    text-align: center;
    background: rgba(200, 168, 130, 0.3);
    color: #2C1810;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
    padding: 8px 16px;
    text-decoration: none;
    box-sizing: border-box;
    border: 3px solid #4C351C;
    border-image: url('../images/border.png') 24 24 / 12px 12px / 0 round;
    transition: background 0.2s ease;
}
.ps-blog-voir-tous a:hover,
.ps-blog-voir-tous a:focus-visible {
    background: rgba(212, 96, 10, 0.18);
    color: #2C1810;
    outline: none;
}

/* État chargement AJAX : visuel "ça charge" + bloque le clic sur le lien intérieur. */
.ps-blog-voir-tous.is-loading {
    opacity: 0.5;
    cursor: wait;
}
.ps-blog-voir-tous.is-loading a {
    pointer-events: none;
    cursor: wait;
}

/* Message d'erreur affiché sous le bouton si le chargement AJAX échoue.
   flex-basis: 100% force une nouvelle ligne (le wrapper est en display: flex). */
.ps-blog-voir-tous-erreur {
    flex-basis: 100%;
    margin-top: 0.6rem;
    padding: 0.5rem 0.8rem;
    background: rgba(125, 43, 11, 0.12);
    border-left: 3px solid #7D2B0B;
    color: #7D2B0B;
    font-family: 'OldNewspaperTypesALM', Georgia, serif;
    font-size: 0.95rem;
    text-align: right;
}