/* ============================================
   Ixila — Blog (liste + article)
   ============================================ */

/* --- Page hero blog (liste) --- */
.page-hero--blog {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(217, 79, 112, 0.10), transparent 60%),
        radial-gradient(ellipse at 100% 100%, rgba(43, 86, 114, 0.08), transparent 55%),
        var(--c-light);
}

.blog-section { background: var(--c-white); padding-block: var(--sp-3xl); }

/* --- Filtres categories --- */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    justify-content: center;
    margin: 0 auto var(--sp-3xl);
    max-width: 900px;
}
.blog-filter {
    display: inline-block;
    padding: var(--sp-sm) var(--sp-lg);
    border-radius: var(--radius-full);
    font-size: var(--fs-small);
    color: var(--c-text);
    background: var(--c-light);
    border: 1px solid var(--c-border);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.blog-filter:hover {
    background: var(--c-surface);
    border-color: var(--c-primary-light);
}
.blog-filter--active {
    background: var(--c-primary);
    color: var(--c-white);
    border-color: var(--c-primary);
}
.blog-filter--active:hover {
    background: var(--c-primary-dark);
    color: var(--c-white);
    border-color: var(--c-primary-dark);
}

/* --- Grille des articles (cartes) --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-2xl);
}
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--c-primary-light);
}
.blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-light);
}
.blog-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.blog-card:hover .blog-card__image {
    transform: scale(1.04);
}
.blog-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--c-light), var(--c-surface));
}
.blog-card__body {
    padding: var(--sp-xl);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.blog-card__category {
    display: inline-block;
    color: var(--c-primary);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    font-weight: var(--fw-medium);
    text-decoration: none;
    margin-bottom: var(--sp-sm);
}
.blog-card__category:hover { text-decoration: underline; }
.blog-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 var(--sp-md);
    color: var(--c-text);
}
.blog-card__title a {
    color: inherit;
    text-decoration: none;
}
.blog-card__title a:hover { color: var(--c-primary); }
.blog-card__excerpt {
    color: var(--c-text-soft);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    margin: 0 0 var(--sp-md);
    flex: 1;
}
.blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
    align-items: center;
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    margin-top: auto;
    padding-top: var(--sp-md);
    border-top: 1px solid var(--c-border);
}

/* --- Etat vide --- */
.blog-empty {
    text-align: center;
    padding: var(--sp-4xl) 0;
    font-size: var(--fs-body-lg);
    color: var(--c-text-muted);
}
.text-muted   { color: var(--c-text-muted); }
.text-center  { text-align: center; }

/* --- Pagination --- */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-lg);
    margin: var(--sp-3xl) 0 0;
}
.blog-pagination__info {
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    font-family: var(--ff-mono);
}

/* ============================================
   Article individuel (/post/<slug>)
   ============================================ */

.page-hero--blog-article {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: flex-end;
    padding: clamp(6rem, 12vw, 10rem) 0 clamp(2rem, 5vw, 4rem);
    overflow: hidden;
    background: var(--c-light);
}
.page-hero--blog-article.page-hero--has-cover {
    color: var(--c-white);
    min-height: 480px;
}
.page-hero--blog-article > .container {
    position: relative;
    z-index: 2;
}
.blog-article__hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.blog-article__hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(33,33,33,0.30) 0%, rgba(33,33,33,0.75) 100%);
}

.blog-article__title {
    font-family: var(--ff-display);
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.15;
    font-weight: 700;
    margin: 0;
    color: inherit;
    max-width: 900px;
    text-align: center;
}

/* Bandeau meta en haut du body : categorie + auteur + date + temps de lecture */
.blog-article__head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md) var(--sp-lg);
    align-items: center;
    margin: 0 0 var(--sp-2xl);
    padding-bottom: var(--sp-lg);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-small);
    color: var(--c-text-soft);
}
.blog-article__head-meta-item {
    display: inline-flex;
    align-items: center;
}

.blog-article__category {
    display: inline-block;
    padding: var(--sp-xs) var(--sp-md);
    background: var(--c-primary);
    color: var(--c-white);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    text-decoration: none;
}

.blog-article__author-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0, 0, 0, 0.25);
    transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}
.blog-article__author-link:hover {
    color: var(--c-primary);
    text-decoration-color: var(--c-primary);
}

/* --- Corps de l'article --- */
.blog-article-section {
    background: var(--c-white);
    padding-block: var(--sp-3xl);
}

.blog-article__content {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    color: var(--c-text);
}
.blog-article__content h2,
.blog-article__content h3,
.blog-article__content h4 {
    font-family: var(--ff-display);
    color: var(--c-text);
    margin: var(--sp-2xl) 0 var(--sp-md);
    font-weight: 600;
    line-height: 1.3;
}
.blog-article__content h2 { font-size: var(--fs-h3); }
.blog-article__content h3 { font-size: var(--fs-h4); color: var(--c-secondary); }
.blog-article__content h4 { font-size: 1.125rem; color: var(--c-primary); }
.blog-article__content p {
    margin: 0 0 var(--sp-lg);
    color: var(--c-text-soft);
}
.blog-article__content ul,
.blog-article__content ol {
    margin: 0 0 var(--sp-lg);
    padding-left: var(--sp-xl);
    color: var(--c-text-soft);
}
.blog-article__content li {
    margin-bottom: var(--sp-sm);
    line-height: var(--lh-normal);
}
.blog-article__content blockquote {
    border-left: 4px solid var(--c-primary);
    background: var(--c-light);
    padding: var(--sp-lg) var(--sp-xl);
    margin: var(--sp-xl) 0;
    font-style: italic;
    color: var(--c-text);
    border-radius: var(--radius-sm);
}
.blog-article__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--sp-lg) 0;
    display: block;
}
.blog-article__content a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.blog-article__content strong {
    color: var(--c-text);
    font-weight: var(--fw-semibold);
}
.blog-article__content code {
    background: var(--c-surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--ff-mono);
    font-size: 0.9em;
}
.blog-article__content pre {
    background: var(--c-dark);
    color: var(--c-white);
    padding: var(--sp-lg);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--sp-xl) 0;
}
.blog-article__content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* --- Partage social --- */
.blog-share {
    margin-top: var(--sp-3xl);
    padding: var(--sp-xl);
    background: var(--c-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
}
.blog-share__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    margin: 0 0 var(--sp-md);
    color: var(--c-text);
}
.blog-share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}
.blog-share__btn {
    display: inline-block;
    padding: var(--sp-sm) var(--sp-lg);
    background: var(--c-white);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.blog-share__btn:hover {
    background: var(--c-primary);
    color: var(--c-white);
    border-color: var(--c-primary);
}

/* --- Lien "Retour a la liste" en haut de l'article --- */
.blog-article__back-top {
    display: inline-block;
    margin: 0 0 var(--sp-lg);
    color: var(--c-text-soft);
    text-decoration: none;
    font-size: var(--fs-small);
    transition: color var(--transition-fast);
}
.blog-article__back-top:hover {
    color: var(--c-primary);
}

/* --- CTA fin d'article --- */
.blog-cta {
    margin-top: var(--sp-2xl);
    padding: var(--sp-2xl);
    background: linear-gradient(135deg, rgba(217, 79, 112, 0.06), rgba(43, 86, 114, 0.06));
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
    text-align: center; /* centre titre + texte + bouton */
}
.blog-cta__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    color: var(--c-text);
    margin: 0 0 var(--sp-sm);
    font-weight: 600;
}
.blog-cta__text {
    color: var(--c-text-soft);
    margin: 0 0 var(--sp-lg);
}
.blog-cta__actions {
    display: flex;
    justify-content: center; /* CTA bouton centre */
    gap: var(--sp-md);
    flex-wrap: wrap;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .blog-share, .blog-cta { padding: var(--sp-lg); }
}