/* ==========================================================================
   Custom News — Actualités en grille "bento" (colonnes de hauteur égale)
   Mobile-first : 1 colonne → 2 colonnes → bento 3 colonnes (>= 961px).
   Le bento est calibré pour 6 cartes (cf. maquette).
   ========================================================================== */

.module-custom-news {
    position: relative;
}

/* --- En-tête (titre + sous-titre à gauche, bouton à droite) --- */
.module-custom-news .module-custom-news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.module-custom-news-header .btn {
    margin-bottom: 3.375rem;
}

.module-custom-news .module-custom-news-archive {
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Grille (base mobile : 1 colonne) --- */
.module-custom-news .module-custom-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* --- Carte --- */
.module-custom-news .news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: .75rem;
    overflow: hidden;
    text-decoration: none;
}

.module-custom-news .news-card-illus {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.module-custom-news .news-card-illus img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.module-custom-news .news-card-body {
    padding: 1.25rem 1.5rem;
}

.module-custom-news .news-card-date {
    font-family: 'mattone', sans-serif;
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.module-custom-news .news-card-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.25;
    /* borne la hauteur du texte pour que le bento reste régulier */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Tablette : 2 colonnes --- */
@media only screen and (min-width: 601px) {
    .module-custom-news .module-custom-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Desktop : bento 3 colonnes de hauteur égale ---
   grid-auto-flow: column + 20 pistes de rangée : chaque colonne (2 cartes)
   totalise 20 pistes → colonnes de hauteur identique, ratios internes variables.
   L'image occupe l'espace restant (flex:1), le corps garde sa hauteur naturelle. */
@media only screen and (min-width: 961px) {
    .module-custom-news .module-custom-news-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(30, minmax(0, 1fr));
        grid-auto-flow: row dense;
        column-gap: 1.5rem;
        row-gap: 0;
        height: clamp(700px, 58vw, 1040px);
    }

    /* espacement vertical entre les 2 cartes d'une colonne (row-gap inopérant ici) */
    .module-custom-news .news-card {
        margin-block: 0.75rem;
    }

    .module-custom-news .news-card-illus {
        aspect-ratio: auto;
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
    }

    .module-custom-news .news-card-illus:after {
        background-color: var(--color-default);
        content: "";
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        transition: all .3s ease;
        visibility: hidden;
        width: 100%;
        z-index: 10
    }

    .module-custom-news .news-card:hover .news-card-illus:after {
        opacity: .5;
        visibility: visible;
    }

    .module-custom-news .news-card-illus .overlay {
        align-items: center;
        color: #fff;
        display: flex;
        flex-direction: column;
        font-size: .9375rem;
        font-weight: 700;
        height: 100%;
        justify-content: center;
        left: 0;
        letter-spacing: -.04em;
        line-height: 1;
        opacity: 0;
        position: absolute;
        text-align: center;
        top: 0;
        transition: all .3s ease;
        width: 100%;
        z-index: 15
    }

    .module-custom-news .news-card-illus .overlay svg {
        fill: #fff
    }

    .module-custom-news .news-card:hover .news-card-illus .overlay {
        opacity: 1;
    }

    /* Colonne pinnée + span (en 30es) → mosaïque déterministe, colonnes de hauteur égale.
       (En autoflow row, le packer backfille les colonnes ; le grid-column garde l'agencement.)
       Ratios : col1 16/14, col2 18/12, col3 12/18 — chaque colonne totalise 30. */
    .module-custom-news .news-card:nth-child(1) {
        grid-column: 1;
        grid-row: span 16;
    }

    .module-custom-news .news-card:nth-child(2) {
        grid-column: 2;
        grid-row: span 18;
    }

    .module-custom-news .news-card:nth-child(3) {
        grid-column: 3;
        grid-row: span 12;
    }

    .module-custom-news .news-card:nth-child(4) {
        grid-column: 1;
        grid-row: span 14;
    }

    .module-custom-news .news-card:nth-child(5) {
        grid-column: 2;
        grid-row: span 12;
    }

    .module-custom-news .news-card:nth-child(6) {
        grid-column: 3;
        grid-row: span 18;
    }
}

/* ==========================================================================
   Page d'accueil uniquement — "EN CE MOMENT", maquette XD 2026 (écran 1920px)
   Titre : Mattone Bold 50/65, -2px — sous-titre : Mulish Medium 28/35, -0.84px
   Bouton : 274×30, contour noir 2px, rayon 20
   Cartes : 3 colonnes de 580px (écart 23px), rayon 20, bandeau blanc ~160px :
   date Mattone Black 23/24 -0.46px, titre Mulish Bold 30/30 -1.2px, marge gauche 25px.
   Mosaïque : col. 1 = 528 + 564, col. 2 = 686 + 402, col. 3 = 478 + 614 (écarts 22-26px).
   ========================================================================== */

:is(.home, .section-congres) .module.module-custom-news {
    padding-bottom: clamp(4rem, 7.8125vw, 9.375rem); /* 150px sous les cartes */
    padding-top: 3.9375rem;    /* titre à 64px sous le filet */
}

:is(.home, .section-congres) .module-custom-news .module-custom-news-header {
    align-items: flex-end;
    margin-bottom: 2.9375rem;  /* 47px sous le sous-titre */
}

:is(.home, .section-congres) .module-custom-news .bloctitle {
    margin: 0;
}

:is(.home, .section-congres) .module-custom-news .bloctitle .title-module {
    font-family: 'mattone', var(--font-title), sans-serif;
    font-size: clamp(2rem, 2.604vw, 3.125rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.3;
    margin: 0 0 -.4375rem !important; /* sous-titre à 58px du haut du titre (le thème impose 16px) */
    padding: 0;
    text-align: left;
    text-transform: uppercase;
}

:is(.home, .section-congres) .module-custom-news .subtitle {
    font-family: var(--font-general), arial, sans-serif;
    font-size: clamp(1.125rem, 1.458vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1.25;
    margin: 0;
}

:is(.home, .section-congres) .module-custom-news .module-custom-news-archive {
    align-items: center;
    background: transparent;
    border: 2px solid #000;
    border-radius: 1.25rem;
    color: #000;
    display: inline-flex;
    font-size: 1.1875rem;
    height: 1.875rem;
    justify-content: center;
    letter-spacing: -.02em;
    line-height: .895;
    margin: 0 0 .375rem;
    min-width: 17.125rem;      /* 274px */
    padding: 0 1.25rem;
}

:is(.home, .section-congres) .module-custom-news .module-custom-news-archive:hover,
:is(.home, .section-congres) .module-custom-news .module-custom-news-archive:focus-visible {
    background: #000;
    color: #fff;
}

:is(.home, .section-congres) .module-custom-news .news-card {
    border-radius: 1.25rem;
}

:is(.home, .section-congres) .module-custom-news .news-card-body {
    padding: 1.4375rem 1.5625rem 2.375rem;
}

:is(.home, .section-congres) .module-custom-news .news-card-date {
    color: #000;
    font-family: 'mattone', var(--font-title), sans-serif;
    font-size: 1.4375rem;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.043;
    margin-bottom: .9375rem;
}

:is(.home, .section-congres) .module-custom-news .news-card-title {
    color: #000;
    font-family: var(--font-general), arial, sans-serif;
    font-size: clamp(1.25rem, 1.5625vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    max-width: 23.4375rem;     /* 375px : même retour à la ligne que la maquette */
}

@media only screen and (min-width: 961px) {
    /* Mosaïque exacte : lignes de la grille aux ruptures des colonnes de la maquette
       (0 / 478 / 500 / 528 / 550 / 686 / 712 / 1114 px) */
    :is(.home, .section-congres) .module-custom-news .module-custom-news-grid {
        column-gap: 1.4375rem;
        grid-template-rows: 478fr 22fr 28fr 22fr 136fr 26fr 402fr;
        height: clamp(700px, 58.02vw, 69.625rem);
    }

    :is(.home, .section-congres) .module-custom-news .news-card {
        margin-block: 0;
    }

    :is(.home, .section-congres) .module-custom-news .news-card:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
    :is(.home, .section-congres) .module-custom-news .news-card:nth-child(2) { grid-column: 2; grid-row: 1 / 6; }
    :is(.home, .section-congres) .module-custom-news .news-card:nth-child(3) { grid-column: 3; grid-row: 1 / 2; }
    :is(.home, .section-congres) .module-custom-news .news-card:nth-child(4) { grid-column: 1; grid-row: 5 / 8; }
    :is(.home, .section-congres) .module-custom-news .news-card:nth-child(5) { grid-column: 2; grid-row: 7 / 8; }
    :is(.home, .section-congres) .module-custom-news .news-card:nth-child(6) { grid-column: 3; grid-row: 3 / 8; }
}

@media only screen and (min-width: 1200px) {
    /* Contenu à 66px des bords de l'écran (1786px de large sur 1920) */
    :is(.home, .section-congres) .module-custom-news .container-large {
        padding-left: 3.4375vw;
        padding-right: 3.4375vw;
    }
}