/* =======================================================================
   FRANCK LATEST ARTICLES - Maurin/WebSens
   Carousel latest news based on all-articles visual language
   ======================================================================= */

.franck-latest-articles-wrapper,
.franck-latest-articles-wrapper * {
    box-sizing: border-box;
}

.franck-latest-articles-wrapper {
    position: relative;
    clear: both;
    z-index: 1;
    width: 100%;
    margin-top: var(--fla-margin-top, 0px);
    margin-bottom: var(--fla-margin-bottom, 0px);
    font-family: var(--theme-font-primary, var(--maurin-font-primary, 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif));
}

/* Full width = background sur toute la largeur de la section, contenu cadré dans l'inner. */
.franck-latest-articles-wrapper--full {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
}

.franck-latest-articles-wrapper--full .franck-latest-articles {
    width: 100% !important;
    border-radius: 0 !important;
}

.franck-latest-articles-wrapper--container {
    width: 100%;
}

.franck-latest-articles-wrapper--container .franck-latest-articles {
    border-radius: var(--theme-section-container-radius, 18px);
    overflow: hidden;
}

.franck-latest-articles {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: var(--fla-padding-top, 70px);
    padding-bottom: var(--fla-padding-bottom, 70px);
    background: var(--fla-section-bg, var(--theme-section-background, var(--maurin-white, #ffffff)));
    color: var(--fla-section-text, var(--theme-text-color, var(--maurin-text, #212221)));
    font-family: var(--theme-font-primary, var(--maurin-font-primary, 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif));
}

.franck-latest-articles__inner {
    position: relative;
    z-index: 2;
    width: var(--fla-density-width, 86%);
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fla-content-padding-x, 24px);
    padding-right: var(--fla-content-padding-x, 24px);
    background: transparent !important;
}

.franck-latest-articles-wrapper--density-compact .franck-latest-articles__inner,
.franck-latest-articles-wrapper--density-small .franck-latest-articles__inner {
    width: 72%;
    max-width: 1140px;
}

.franck-latest-articles-wrapper--density-normal .franck-latest-articles__inner {
    width: 86%;
    max-width: 1320px;
}

.franck-latest-articles-wrapper--density-large .franck-latest-articles__inner {
    width: 90%;
    max-width: 1440px;
}

.franck-latest-articles-wrapper--density-full .franck-latest-articles__inner {
    width: 100%;
    max-width: none;
}

@media (max-width: 991.98px) {
    .franck-latest-articles-wrapper--container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .franck-latest-articles__inner {
        width: 100% !important;
        padding-left: 22px;
        padding-right: 22px;
    }
}

@media (max-width: 575.98px) {
    .franck-latest-articles-wrapper--container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .franck-latest-articles__inner {
        padding-left: 18px;
        padding-right: 18px;
    }
}

.franck-latest-articles__header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: var(--fla-section-header-margin-bottom, 34px);
}

.franck-latest-articles__header {
    max-width: var(--fla-section-header-max-width, 920px);
    text-align: var(--fla-section-title-align, left);
}

.franck-latest-articles__section-title {
    margin: 0;
    color: var(--fla-section-title-color, var(--theme-section-title-color, var(--maurin-primary, #2a6d47)));
    font-family: var(--theme-title-font, var(--theme-font-primary, var(--maurin-font-primary, inherit)));
    font-size: var(--fla-section-title-size, 42px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -.035em;
}

.franck-latest-articles__section-subtitle {
    margin: 14px 0 0;
    color: var(--fla-section-subtitle-color, var(--theme-section-subtitle-color, var(--maurin-text, #212221)));
    font-family: var(--theme-text-font, var(--theme-font-primary, var(--maurin-font-primary, inherit)));
    font-size: var(--fla-section-subtitle-size, 18px);
    line-height: 1.45;
    font-weight: 750;
}

.franck-latest-articles__section-text {
    margin: 14px 0 0;
    color: var(--fla-section-text-content-color, var(--theme-section-text-color, var(--maurin-text, #212221)));
    font-family: var(--theme-text-font, var(--theme-font-primary, var(--maurin-font-primary, inherit)));
    font-size: var(--fla-section-text-size, 16px);
    line-height: 1.65;
}

.franck-latest-articles__actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}

.franck-latest-articles__all-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 23px;
    border-radius: var(--theme-button-radius, 999px);
    background: var(--fla-all-button-bg, var(--theme-button-bg, var(--maurin-primary, #2a6d47)));
    color: var(--fla-all-button-text, var(--theme-button-text-color, #ffffff)) !important;
    font-family: var(--theme-button-font, var(--theme-font-primary, var(--maurin-font-primary, inherit)));
    font-size: 14px;
    font-weight: 900;
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(42, 109, 71, .16);
    transition: transform .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.franck-latest-articles__all-button:hover {
    transform: translateY(-2px);
    background: var(--fla-all-button-hover-bg, var(--theme-button-hover-bg, var(--maurin-secondary, #3c9a65)));
    color: var(--fla-all-button-hover-text, var(--theme-button-hover-text-color, #ffffff)) !important;
    box-shadow: 0 18px 38px rgba(42, 109, 71, .22);
}

.franck-latest-articles__viewport {
    overflow: hidden;
    width: 100%;
    background: transparent !important;
}

.franck-latest-articles__track {
    display: flex;
    align-items: stretch;
    gap: var(--fla-card-gap, 28px);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    background: transparent !important;
    transition: transform .58s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
    isolation: isolate;
    backface-visibility: hidden;
}


/* Layout grille 2 colonnes : Hero (1ère dernière nouvelle) à gauche + Carrousel des autres nouvelles à droite */
.franck-latest-articles__grid-layout {
    display: flex;
    align-items: stretch;
    gap: var(--fla-card-gap, 28px);
    width: 100%;
}

.franck-latest-articles__hero-col {
    flex: 0 0 38%;
    width: 38%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.franck-latest-articles__hero-col .article-item {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

.franck-latest-articles__hero-col .article-card {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.franck-latest-articles__hero-col .article-img-wrapper {
    height: var(--fla-card-featured-image-height, 330px);
    flex: 0 0 auto;
}

.franck-latest-articles__hero-col .article-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.franck-latest-articles__hero-col .article-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0 0 16px !important;
}

.franck-latest-articles__hero-col .article-readmore {
    margin-top: auto;
}

/* Colonne carrousel des autres actualités */
.franck-latest-articles__slider-col {
    flex: 1 1 62%;
    width: 62%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.franck-latest-articles__slider-col .franck-latest-articles__viewport {
    overflow: hidden;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
}

.franck-latest-articles__slider-col .franck-latest-articles__track {
    display: flex;
    align-items: stretch;
    gap: var(--fla-card-gap, 24px);
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    transition: transform .58s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.franck-latest-articles__slider-col .article-item {
    flex: 0 0 calc((100% - var(--fla-card-gap, 24px)) / 2);
    width: calc((100% - var(--fla-card-gap, 24px)) / 2);
    min-width: 0;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

.franck-latest-articles__slider-col .article-card {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.franck-latest-articles__slider-col .article-img-wrapper {
    height: var(--fla-card-image-height, 220px);
    flex: 0 0 auto;
}

.franck-latest-articles__slider-col .article-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 22px;
}

.franck-latest-articles__slider-col .article-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.18em * 2);
    margin: 0 0 10px !important;
}

.franck-latest-articles__slider-col .article-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    min-height: calc(1.48em * 4);
    margin: 0 0 16px !important;
}

.franck-latest-articles__slider-col .article-readmore {
    margin-top: auto;
}

@media (max-width: 991.98px) {
    .franck-latest-articles__grid-layout {
        flex-direction: column;
        gap: 28px;
    }

    .franck-latest-articles__hero-col,
    .franck-latest-articles__slider-col {
        flex: 0 0 100%;
        width: 100%;
    }

    .franck-latest-articles__hero-col .article-img-wrapper {
        height: 260px;
    }

    .franck-latest-articles__slider-col .article-item {
        flex: 0 0 calc((100% - var(--fla-card-gap, 20px)) / 2);
        width: calc((100% - var(--fla-card-gap, 20px)) / 2);
    }

    .franck-latest-articles__header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .franck-latest-articles__actions {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .franck-latest-articles__slider-col .article-item {
        flex: 0 0 88%;
        width: 88%;
    }
}

.franck-latest-articles .article-item {
    margin: 0 !important;
    padding: 0 !important;
}

.franck-latest-articles .article-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--fla-card-border-color, color-mix(in srgb, var(--theme-text-color, #212221) 13%, transparent));
    border-radius: var(--fla-card-radius, var(--theme-card-radius, 18px));
    background: var(--fla-card-bg, var(--theme-card-background, var(--maurin-light-gray, #f3f3f3)));
    box-shadow: var(--fla-card-shadow, 0 18px 45px rgba(0, 0, 0, .08));
    transform: translateY(0) scale(1);
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
    will-change: transform;
    isolation: isolate;
    backface-visibility: hidden;
}

.franck-latest-articles .article-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--fla-hover-border-color, var(--theme-button-bg, var(--maurin-primary, #2a6d47)));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .26s ease;
}

.franck-latest-articles .article-card:hover {
    transform: translateY(-5px) scale(1.012);
    border-color: color-mix(in srgb, var(--fla-hover-border-color, var(--theme-button-bg, #2a6d47)) 50%, transparent);
    box-shadow: var(--fla-card-shadow-hover, 0 24px 60px rgba(0, 0, 0, .12));
}

.franck-latest-articles .article-card:hover::after {
    transform: scaleX(1);
}

.franck-latest-articles .article-img-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    /* Hauteur FIXE (et non plus un ratio padding-bottom) : la hauteur de
       l'image ne dépend donc plus de la largeur de la carte. Quand la carte
       devient featured (plus large), son image ne grandit plus en hauteur
       => plus de saut vertical de la rangée. */
    height: var(--fla-card-image-height, 210px);
    overflow: hidden;
    background: var(--theme-bg-light, #f6f6f6);
    border-radius: var(--fla-card-radius, var(--theme-card-radius, 18px)) var(--fla-card-radius, var(--theme-card-radius, 18px)) 0 0;
}

/* Carte featured : image plus haute (effet hero), mais hauteur FIXE elle aussi */
.franck-latest-articles .article-item.is-featured .article-img-wrapper {
    height: var(--fla-card-featured-image-height, 340px);
}

.franck-latest-articles .article-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: 0;
    border-radius: inherit;
    overflow: hidden;
}

.franck-latest-articles .article-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transform: scale(1.001);
    transition: transform .38s ease;
}

.franck-latest-articles .article-card:hover .article-img img {
    transform: scale(1.055);
}

.franck-latest-articles .article-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    max-width: calc(100% - 32px);
    padding: 8px 13px;
    border-radius: var(--theme-button-radius, 999px);
    background: var(--fla-badge-bg, var(--theme-button-bg, var(--maurin-primary, #2a6d47)));
    color: var(--fla-badge-text, var(--theme-button-text-color, #ffffff));
    font-family: var(--theme-button-font, var(--theme-font-primary, var(--maurin-font-primary, inherit)));
    font-size: 12px;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.franck-latest-articles .article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 19px 21px;
    background: transparent !important;
}

.franck-latest-articles .article-date {
    display: inline-block;
    color: var(--fla-date-color, color-mix(in srgb, var(--fla-text-color, var(--theme-text-color, #212221)) 68%, transparent)) !important;
    font-family: var(--theme-text-font, var(--theme-font-primary, var(--maurin-font-primary, inherit)));
    font-size: var(--fla-date-size, 13px) !important;
    font-weight: 750;
    line-height: 1.25;
    margin-bottom: 8px;
}

.franck-latest-articles .article-title {
    color: var(--fla-title-color, var(--theme-text-color, var(--maurin-text, #212221))) !important;
    font-family: var(--theme-title-font, var(--theme-font-primary, var(--maurin-font-primary, inherit)));
    font-size: var(--fla-title-size, 20px) !important;
    font-weight: 900;
    line-height: 1.13;
    letter-spacing: -.02em;
    margin: 0 0 9px !important;
    /* Exactement 2 lignes : tronqué proprement + hauteur réservée pour que
       toutes les cartes (et donc la rangée) gardent la même hauteur. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.13em * 2);
}

.franck-latest-articles .article-excerpt,
.franck-latest-articles .article-content p {
    color: var(--fla-text-color, var(--theme-text-color, var(--maurin-text, #212221))) !important;
    font-family: var(--theme-text-font, var(--theme-font-primary, var(--maurin-font-primary, inherit)));
    font-size: var(--fla-text-size, 14px) !important;
    line-height: 1.48;
    margin: 0 0 15px !important;
    /* Exactement 3 lignes affichées, hauteur réservée. Le contenu complet
       reste intact en BDD/SEO : on ne tronque que l'AFFICHAGE, sans couper
       de caractères. Le readmore est poussé en bas via margin-top:auto. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: calc(1.48em * 3);
}

.franck-latest-articles .article-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: auto;
    color: var(--fla-link-color, var(--theme-link-color, var(--maurin-primary, #2a6d47))) !important;
    font-family: var(--theme-button-font, var(--theme-font-primary, var(--maurin-font-primary, inherit)));
    font-size: var(--fla-link-size, 14px) !important;
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    transition: color .22s ease, gap .22s ease;
}

.franck-latest-articles .article-readmore__arrow {
    display: inline-block;
    font-size: 1.08em;
    line-height: 1;
    transform: translateY(-1px);
}

.franck-latest-articles .article-readmore:hover {
    color: var(--fla-link-hover-color, var(--theme-link-hover-color, var(--maurin-secondary, #3c9a65))) !important;
    gap: 11px;
}

.franck-latest-articles__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.franck-latest-articles__control {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--theme-text-color, #212221) 12%, transparent);
    border-radius: 999px;
    background: var(--theme-bg-white, #ffffff);
    color: var(--theme-text-color, #212221);
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.franck-latest-articles__control:hover {
    transform: translateY(-1px);
    background: var(--theme-button-bg, var(--maurin-primary, #2a6d47));
    color: var(--theme-button-text-color, #ffffff);
    box-shadow: 0 10px 24px rgba(42, 109, 71, .18);
}

.franck-latest-articles__empty {
    margin: 0;
    padding: 32px;
    border-radius: var(--theme-card-radius, 18px);
    background: var(--theme-card-background, #f3f3f3);
    color: var(--theme-text-color, #212221);
    text-align: center;
}

/* ==========================================================
   Correctif final : aucun fond sur le container/carousel
   On garde uniquement le fond de la section + les cards
   ========================================================== */

.franck-latest-articles-wrapper,
.franck-latest-articles__inner,
.franck-latest-articles__header-row,
.franck-latest-articles__viewport,
.franck-latest-articles__track,
.franck-latest-articles .article-item {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none;
}

/* Fond uniquement sur la section full width */
.franck-latest-articles {
    background: var(--fla-section-bg, var(--theme-section-background, var(--maurin-white, #ffffff))) !important;
}

/* Fond uniquement sur les cards */
.franck-latest-articles .article-card {
    background: var(--fla-card-bg, var(--theme-card-background, #ffffff)) !important;
}

/* Pas de fond gris parasite derrière les images */
.franck-latest-articles .article-img-wrapper {
    background: transparent !important;
}

@media (max-width: 991.98px) {
    .franck-latest-articles__header-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .franck-latest-articles__actions {
        justify-content: flex-start;
    }

    .franck-latest-articles .article-item,
    .franck-latest-articles .article-item.is-featured {
        flex-basis: calc((100% - var(--fla-card-gap, 28px)) / 2);
        width: calc((100% - var(--fla-card-gap, 28px)) / 2);
    }

    /* En 2 colonnes, les cartes ont la même largeur : on uniformise aussi
       la hauteur d'image (sinon la featured aurait une image plus haute
       que sa voisine de même largeur). */
    .franck-latest-articles .article-img-wrapper,
    .franck-latest-articles .article-item.is-featured .article-img-wrapper {
        height: 240px;
    }
}

@media (max-width: 767.98px) {
    .franck-latest-articles {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .franck-latest-articles__section-title {
        font-size: clamp(24px, 6.5vw, 32px);
    }

    .franck-latest-articles .article-item,
    .franck-latest-articles .article-item.is-featured {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* 1 colonne pleine largeur : image uniforme */
    .franck-latest-articles .article-img-wrapper,
    .franck-latest-articles .article-item.is-featured .article-img-wrapper {
        height: 220px;
    }

    .franck-latest-articles .article-title {
        font-size: 18px !important;
    }

    .franck-latest-articles__all-button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        touch-action: manipulation;
    }

    .franck-latest-articles__control {
        width: 46px;
        height: 46px;
        touch-action: manipulation;
    }
}