/* ==========================================================
   ARTAWEB -- BLOG
   Liste d'articles, menu latéral des catégories, page d'article,
   composant « Articles du blog ».
   Chargée uniquement sur les pages qui en ont besoin (index.php).
   Hérite entièrement des tokens de base.css (couleurs, espaces,
   typographie) : rien à ajuster pour changer de charte.
   ========================================================== */

/* ----------------------------------------------------------
   Mise en page à 2 colonnes (contenu + menu latéral)
   ---------------------------------------------------------- */
.blog-layout {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
}

.blog-layout--full {
    grid-template-columns: 1fr;
}

/* Le menu latéral suit le contenu dans le DOM (contenu principal d'abord, pour
   l'ordre de lecture et le SEO) ; l'ordre visuel est piloté en CSS. `order`
   agissant sur le placement automatique de la grille, la colonne étroite doit
   être déclarée du côté où le menu est réellement affiché. */
.blog-layout--left {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
}

.blog-layout--right {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
}

.blog-layout--left > .blog-main {
    order: 2;
}

.blog-layout--left > .blog-sidebar {
    order: 1;
}

@media (max-width: 900px) {
    .blog-layout--left,
    .blog-layout--right {
        grid-template-columns: 1fr;
    }
    /* En mobile, les catégories passent TOUJOURS sous les articles :
       elles ne doivent pas repousser le contenu hors de l'écran. */
    .blog-layout--left > .blog-main,
    .blog-layout--right > .blog-main {
        order: 1;
    }
    .blog-layout--left > .blog-sidebar,
    .blog-layout--right > .blog-sidebar {
        order: 2;
    }
}

/* ----------------------------------------------------------
   Menu latéral : catégories
   ---------------------------------------------------------- */
.blog-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    position: sticky;
    top: var(--space-lg);
}

@media (max-width: 900px) {
    .blog-sidebar {
        position: static;
    }
}

.blog-sidebar__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    margin: 0 0 var(--space-sm);
}

.blog-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-sidebar__item + .blog-sidebar__item {
    border-top: 1px solid var(--color-border);
}

.blog-sidebar__item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.55rem 0;
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.blog-sidebar__item a:hover,
.blog-sidebar__item a:focus-visible {
    color: var(--color-accent);
}

.blog-sidebar__item.is-active > a {
    color: var(--color-accent);
    font-weight: 600;
}

.blog-sidebar__count {
    flex: none;
    font-size: var(--text-xs);
    color: var(--color-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

/* ----------------------------------------------------------
   En-tête de rubrique
   ---------------------------------------------------------- */
.blog-head {
    margin-bottom: var(--space-lg);
}

.blog-head__title {
    font-family: var(--font-heading);
    margin: 0 0 var(--space-sm);
}

.blog-head__intro {
    color: var(--color-muted);
    max-width: 65ch;
}

.blog-empty {
    color: var(--color-muted);
    font-style: italic;
}

/* ----------------------------------------------------------
   Liste d'articles
   ---------------------------------------------------------- */
.blog-list {
    display: grid;
    gap: var(--space-lg);
}

.blog-list--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-list--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .blog-list--cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .blog-list--cols-2,
    .blog-list--cols-3 {
        grid-template-columns: 1fr;
    }
}

/* --- Carte d'article --- */
.blog-card {
    display: grid;
    gap: var(--space-md);
    align-content: start;
}

.blog-card + .blog-card {
    /* Séparateur seulement en liste sur une colonne (les grilles ont leur gap). */
    border-top: 0;
}

.blog-list--cols-1 .blog-card + .blog-card {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-lg);
}

.blog-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    aspect-ratio: 16 / 10;
}

.blog-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    margin: 0 0 var(--space-xs);
    line-height: 1.25;
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.blog-card__title a:hover,
.blog-card__title a:focus-visible {
    color: var(--color-accent);
}

.blog-card__excerpt {
    margin: 0 0 var(--space-md);
    color: var(--color-muted);
}

.blog-card__more {
    align-self: start;
}

.blog-card__more--link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* Image à gauche / à droite : deux colonnes, l'image gardant une largeur fixe. */
.blog-card--img-left,
.blog-card--img-right {
    grid-template-columns: minmax(140px, 34%) minmax(0, 1fr);
    align-items: start;
}

.blog-card--img-right .blog-card__image {
    order: 2;
}

.blog-card--img-left.blog-card--noimg,
.blog-card--img-right.blog-card--noimg {
    grid-template-columns: 1fr;
}

@media (max-width: 600px) {
    .blog-card--img-left,
    .blog-card--img-right {
        grid-template-columns: 1fr;
    }
    .blog-card--img-right .blog-card__image {
        order: 0;
    }
}

/* --- Article « à la une » --------------------------------------------------
   Deux traitements possibles, réglés dans Blog → Réglages :
   « highlight » = encadré mis en valeur dans la liste ;
   « large »     = sorti de la grille, pleine largeur au-dessus (.blog-featured).
   -------------------------------------------------------------------------- */
.blog-card__badge {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}

.blog-card--featured {
    background: var(--color-surface);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

/* Le séparateur de la liste sur une colonne ferait doublon avec l'encadré. */
.blog-list--cols-1 .blog-card--featured + .blog-card,
.blog-list--cols-1 .blog-card--featured {
    border-top: 0;
}

/* Mise en vedette pleine largeur, au-dessus de la liste. */
.blog-featured {
    margin-bottom: var(--space-xl);
}

.blog-card--featured-large {
    padding: var(--space-lg);
}

/* Image en tête d'une vedette pleine largeur : format panoramique. Le 16/10
   des cartes de liste, étiré sur toute la largeur, occuperait tout l'écran. */
.blog-card--featured-large.blog-card--img-top .blog-card__image img {
    aspect-ratio: 21 / 9;
}

.blog-card--featured-large .blog-card__title {
    font-size: var(--text-xl);
}

.blog-card--featured-large .blog-card__excerpt {
    font-size: var(--text-lg);
    color: var(--color-text);
}

/* En vedette avec image latérale : on laisse plus de place au visuel. */
.blog-card--featured-large.blog-card--img-left,
.blog-card--featured-large.blog-card--img-right {
    grid-template-columns: minmax(200px, 45%) minmax(0, 1fr);
    align-items: center;
}

@media (max-width: 600px) {
    .blog-card--featured-large.blog-card--img-left,
    .blog-card--featured-large.blog-card--img-right {
        grid-template-columns: 1fr;
    }
}

/* --- Informations de publication --- */
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.blog-meta__sep {
    opacity: 0.5;
}

.blog-meta__cat {
    color: var(--color-accent);
    text-decoration: none;
}

.blog-meta__cat:hover,
.blog-meta__cat:focus-visible {
    text-decoration: underline;
}

/* ----------------------------------------------------------
   Pagination
   ---------------------------------------------------------- */
.blog-pagination {
    margin-top: var(--space-xl);
}

.blog-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-pagination a,
.blog-pagination__cur,
.blog-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
}

.blog-pagination a {
    border: 1px solid var(--color-border);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.blog-pagination a:hover,
.blog-pagination a:focus-visible {
    background: var(--color-surface);
    color: var(--color-accent);
}

.blog-pagination__cur {
    background: var(--color-accent);
    color: var(--color-bg);
    font-weight: 600;
}

.blog-pagination__gap {
    color: var(--color-muted);
}

/* ----------------------------------------------------------
   Page d'un article
   ---------------------------------------------------------- */
.blog-post {
    max-width: 72ch;
}

.blog-layout--full .blog-post {
    margin-inline: auto;
}

.blog-post__crumbs {
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
}

.blog-post__crumbs a {
    color: var(--color-muted);
    text-decoration: none;
}

.blog-post__crumbs a:hover,
.blog-post__crumbs a:focus-visible {
    color: var(--color-accent);
}

.blog-post__image {
    margin: 0 0 var(--space-lg);
}

.blog-post__image img {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
}

.blog-post__title {
    font-family: var(--font-heading);
    margin: 0 0 var(--space-sm);
}

.blog-post__lead {
    font-size: var(--text-lg);
    color: var(--color-muted);
    margin: 0 0 var(--space-lg);
}

.blog-post__body > *:first-child {
    margin-top: 0;
}

.blog-post__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Le corps d'article est du texte rédactionnel libre : on rétablit les puces et
   la numérotation que la remise à zéro globale (base.css) supprime. */
.blog-post__body ul,
.blog-post__body ol {
    margin: 0 0 var(--space-md);
    padding-left: 1.4em;
}

.blog-post__body ul { list-style: disc; }
.blog-post__body ol { list-style: decimal; }
.blog-post__body li { margin-bottom: 0.35em; }

.blog-post__body blockquote {
    margin: var(--space-lg) 0;
    padding-left: var(--space-md);
    border-left: 3px solid var(--color-accent);
    color: var(--color-muted);
    font-style: italic;
}

.blog-post__body a {
    color: var(--color-accent);
}

/* --- Boutons personnalisables --- */
.blog-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.blog-links__link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* --- Navigation article précédent / suivant --- */
.blog-postnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.blog-postnav__slot {
    display: block;
    text-decoration: none;
    color: inherit;
}

.blog-postnav__next {
    text-align: right;
}

.blog-postnav__label {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.blog-postnav__title {
    display: block;
    font-family: var(--font-heading);
    color: inherit;
}

a.blog-postnav__slot:hover .blog-postnav__title,
a.blog-postnav__slot:focus-visible .blog-postnav__title {
    color: var(--color-accent);
}

@media (max-width: 600px) {
    .blog-postnav {
        grid-template-columns: 1fr;
    }
    .blog-postnav__next {
        text-align: left;
    }
}

/* ----------------------------------------------------------
   Composant « Articles du blog » (bloc insérable dans une page)
   ---------------------------------------------------------- */
.block-blog-posts__title {
    font-family: var(--font-heading);
    margin: 0 0 var(--space-lg);
}

.block-blog-posts__all {
    margin: var(--space-lg) 0 0;
}