/* Grille desktop avec espace accru entre colonnes et lignes */
            .grid-container {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto auto;
                grid-column-gap: 40px;
                grid-row-gap: 40px;
                grid-template-areas:
                  "slider slider right"
                  "col1    col2    right";
            }
            .slide-title-overlay a,
            .slide-title-overlay a:visited,
            .slide-title-overlay a:hover,
            .slide-title-overlay a:active {
                text-decoration: none !important;
            }
            /* SLIDER FUSIONNÉ avec hauteur fixe */
            .merged-slider {
                grid-area: slider;
                position: relative;
                overflow: hidden;
                border-radius: 10px;
                user-select: none;
                height: 400px;
            }
            .merged-slider .slides {
                display: flex;
                transition: transform 0.5s ease;
                height: 100%;
            }
            .merged-slider .slide {
                position: relative;
                min-width: 100%;
                height: 100%;
                box-sizing: border-box;
                text-align: center;
            }
            .merged-slider .slide img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                border-radius: 10px;
                user-drag: none;
                user-select: none;
            }
            /* Overlay pour le titre du slide, placé en bas de l'image */
            .slide-title-overlay {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.5);
                padding: 10px;
                color: #fff;
                font-size: 18px;
                line-height: 1.2em;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                /* Par défaut sur mobile, limiter à 2 lignes */
                -webkit-line-clamp: 2;
            }
             .slide-title-overlay a h3 {
        font-size: 18px;        /* ou 16px si tu préfères une valeur fixe */
    }
            /* Animation keyframes pour l'overlay */
            @keyframes fadeInOverlay {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            /* Classe déclenchant l'animation sur l'overlay */
            .animate-overlay {
                animation: fadeInOverlay 0.5s ease forwards;
            }
            /* Sur PC, limiter le titre des slides à une ligne */
            @media (min-width: 769px) {
                .slide-title-overlay {
                    -webkit-line-clamp: 1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .slide-title-overlay a h3 {
                    color: #fff !important;
                    text-decoration: none !important;
                    font-size: 18px;
                }
            }
            /* Liens sans soulignement */
            .slide-title-overlay a {
                text-decoration: none;
            }
            .slide-title-overlay a:hover {
                text-decoration: none !important;
            }
            /* Indicateur de progression */
            .slider-progress {
                position: absolute;
                top: 10px;
                right: 10px;
                width: 36px;
                height: 36px;
            }
            .slider-progress svg {
                transform: rotate(-90deg);
            }
            @keyframes progress {
                from { stroke-dashoffset: 100; }
                to { stroke-dashoffset: 0; }
            }
            .progress-bar {
                animation: progress 5s linear infinite;
            }
            /* Colonnes 1 et 2 : présentation classique */
            .col1, .col2 {
                text-align: center;
            }
            .col1 img, .col2 img {
                width: 100%;
                border-radius: 10px;
                display: block;
            }
            .col1 h3, .col2 h3 {
                font-size:18px;
                margin: 10px 5px 5px;
            }
            .col1 p.post-desc, .col2 p.post-desc {
                margin: 0;
            }
            .col1 { grid-area: col1; }
            .col2 { grid-area: col2; }
            /* Colonne 3 : liste d'articles */
            .col3 {
                grid-area: right;
            }
            .col3 .post-item {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
            }
            .col3 .col3-image {
                flex: 0 0 40%;
            }
            .col3 .col3-image img {
                width: 100%;
                border-radius: 10px;
                display: block;
            }
            .col3 .col3-title {
                flex: 1;
                padding-left: 10px;
            }
            .col3 .col3-title h3 {
                margin: 0;
                font-size: 20px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                /* Par défaut sur desktop, on peut afficher plus de lignes */
                -webkit-line-clamp: 3;
            }
            /* Liens sans soulignement */
            .grid-container a {
                text-decoration: none;
                color: inherit;
            }
            /* Responsive : sur mobile, afficher un article par ligne et limiter les titres à 2 lignes */
            @media (max-width: 768px) {
                .grid-container {
                    display: block;
                }
                .merged-slider {
                    height: 250px;
                    margin-bottom: 20px;
                }
                .col1, .col2, .col3 {
                    width: 100%;
                    display: block;
                    margin-bottom: 30px;
                }
                .slide-title-overlay a h3 {
                    color: #fff !important;
                    text-decoration: none !important;
                }
                /* Limiter tous les titres à 2 lignes sur mobile */
                .col1 h3, .col2 h3, .col3 .col3-title h3 {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                }
            }
            
            .slide-image-container {
    position: relative;
    height: 100%;
}