/**
 * Logia Blog - Front-office styles
 */
.logia-blog-listing {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

.logia-blog-listing .blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.logia-blog-listing .blog-post-card {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.logia-blog-listing .blog-post-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.logia-blog-listing .blog-post-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.logia-blog-listing .blog-post-card__body {
    padding: 20px;
}

.logia-blog-listing .blog-post-card__title {
    font-size: 1.2em;
    margin: 0 0 10px;
}

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

.logia-blog-listing .blog-post-card__title a:hover {
    text-decoration: underline;
}

.logia-blog-listing .blog-post-card__excerpt {
    color: #666;
    font-size: 0.95em;
    line-height: 1.5;
}

.logia-blog-listing .blog-post-card__meta {
    color: #999;
    font-size: 0.85em;
    margin-top: 10px;
}

/* Single post */
.logia-blog-single {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

.logia-blog-single__title {
    font-size: 2em;
    margin-bottom: 10px;
}

.logia-blog-single__meta {
    color: #999;
    font-size: 0.9em;
    margin-bottom: 20px;
}

.logia-blog-single__featured-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 30px;
}


span.logia-blog-avis-author-info .logia-blog-avis-author-name {
    font-size: 1.125rem;
    color: #000;
    
}s

/* "Blog Avis - Auteur & Qualité" dynamic tag output (auteur_de_l_avis - qualite_de_l_auteur) */
.logia-blog-avis-author-info {
    color: #666;
    font-size: 0.95em;
}

/* .logia-blog-avis-author-name : auteur (déjà en <strong> dans le HTML) */


.logia-blog-single__content {
    font-size: 1.05em;
    line-height: 1.7;
}

/* Pagination */
.logia-blog-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    padding: 20px 0;
}

.logia-blog-pagination a,
.logia-blog-pagination span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.logia-blog-pagination .current {
    background: #333;
    color: #fff;
    border-color: #333;
}

.logia-blog-pagination a:hover {
    background: #f5f5f5;
}

.logia-blog-pagination .logia-blog-page-dots {
    border: none;
    padding: 8px 6px;
}

/* ─── Widget: Blog Posts List ─── */
.logia-blog-posts-widget {
    position: relative;
}

.logia-blog-widget-card {
    transition: transform 0.3s ease;
    overflow: visible!important;
}

.logia-blog-widget-card:hover {
    transform: translateY(-2px);
}

/* ─── CE Card Template ─── */
.logia-blog-ce-card {
    overflow: hidden;
}

.logia-blog-ce-card .logia-blog-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ─── Category Filters ─── */
.logia-blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Buttons style */
.logia-blog-filters--buttons .logia-blog-filter-btn {
    padding: 8px 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.2s ease;
}

.logia-blog-filters--buttons .logia-blog-filter-btn:hover {
    background: #f5f5f5;
}

.logia-blog-filters--buttons .logia-blog-filter-btn.active {
    background: #25b9d7;
    border-color: #25b9d7;
    color: #fff;
}

/* Pills style */
.logia-blog-filters--pills .logia-blog-filter-btn {
    padding: 6px 18px;
    border: none;
    border-radius: 50px;
    background: #f0f0f0;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.logia-blog-filters--pills .logia-blog-filter-btn:hover {
    background: #e0e0e0;
}

.logia-blog-filters--pills .logia-blog-filter-btn.active {
    background: #25b9d7;
    color: #fff;
}

/* Underline style */
.logia-blog-filters--underline {
    gap: 0;
    border-bottom: 2px solid #e5e5e5;
}

.logia-blog-filters--underline .logia-blog-filter-btn {
    padding: 10px 20px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.2s ease;
}

.logia-blog-filters--underline .logia-blog-filter-btn:hover {
    border-bottom-color: #ccc;
}

.logia-blog-filters--underline .logia-blog-filter-btn.active {
    border-bottom-color: #25b9d7;
    color: #25b9d7;
}

/* Dropdown style */
.logia-blog-filter-select {
    padding: 8px 15px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 0.95em;
    background: #fff;
    cursor: pointer;
    min-width: 200px;
}

/* ─── Loading ─── */
.logia-blog-loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .7);
    z-index: 10;
    align-items: center;
    justify-content: center;
}

.logia-blog-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e5e5;
    border-top-color: #25b9d7;
    border-radius: 50%;
    animation: logia-blog-spin 0.7s linear infinite;
}

@keyframes logia-blog-spin {
    to { transform: rotate(360deg); }
}

/* ─── Load More Button ─── */
.logia-blog-load-more-btn {
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.2s ease;
}

.logia-blog-load-more-btn:hover {
    background: #f5f5f5;
}


.elementor-widget-logia_blog_featured_image,
.elementor-widget-logia_blog_featured_image .elementor-widget-container,
.elementor-widget-logia_blog_featured_image .logia-blog-featured-image,
.elementor-widget-logia_blog_featured_image .logia-blog-featured-image img{
    height: 100%;
}

/* ─── Section "Actualités" (accueil) ───
   .actu-col-left et .actu-col-right ont déjà la même hauteur (flexbox
   étire les colonnes d'une même ligne Elementor par défaut). Le problème
   est que le CONTENU du widget "Blog Post List" dans la colonne de gauche
   (colonne > widget > grille > carte > template .card-actu-first) garde
   une hauteur "auto", calée sur son propre contenu.
   Plutôt que de chaîner height:100% sur de nombreux wrappers flex imbriqués
   (peu fiable, chaque niveau dépendant du bon calcul du niveau parent), on
   "détache" le contenu de la colonne en position absolute (inset:0) pour
   le caler directement sur la hauteur de .actu-col-left, puis on repropage
   height:100% de façon simple (bloc, pas flex) jusqu'à la carte. */
.actu-section .actu-col-left {
    position: relative;
}

.actu-section .actu-col-left > .elementor-column-wrap {
    position: absolute;
    inset: 0;
}

@media all and (max-width: 1024px) {
    .actu-section .actu-col-left > .elementor-column-wrap {
        position: relative;
    }
}

.actu-section .actu-col-left .elementor-widget-wrap,
.actu-section .actu-col-left .elementor-widget-logia_blog_posts_list,
.actu-section .actu-col-left .elementor-widget-container,
.actu-section .actu-col-left .logia-blog-posts-widget,
.actu-section .actu-col-left .logia-blog-widget-card,
.actu-section .actu-col-left .logia-blog-widget-card > div,
.actu-section .actu-col-left .elementor-section-wrap,
.actu-section .actu-col-left .card-actu-first {
    height: 100%;
}

.actu-section .actu-col-left .logia-blog-widget-grid {
    height: 100%;
    grid-template-rows: 1fr;
}

/* La carte utilise "elementor-section-items-middle" (align-items:center),
   ce qui centre l'image et le contenu au lieu de les étirer sur toute la
   hauteur désormais disponible. On force l'étirement uniquement en
   desktop/tablette large (au-delà, la ligne passe en colonne empilée). */
@media (min-width: 1025px) {
    .actu-section .actu-col-left .card-actu-first > .elementor-container {
        height: 100%;
        align-items: stretch;
    }

    .actu-section .actu-col-left .card-actu-first > .elementor-container > .elementor-row {
        height: 100%;
    }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .logia-blog-widget-grid {
        grid-template-columns: 1fr !important;
    }

    .logia-blog-filters {
        justify-content: center;
    }
}