/* =============================================================================
   12. BLOG / ACTUALITES
   ============================================================================= */

/* -----------------------------------------------
   Composants partagés (.news-card)
   ----------------------------------------------- */
.news-card {
    position: relative;
    display: flex; 
    flex-direction: column;
    background: var(--fond-page);
    border-radius: var(--radius-default);
    border: var(--border-card);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.news-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-card-hover);
}

.news-card:hover .media-frame img {
    transform: scale(1.05);
}

.news-card-media {
    position: relative;
    overflow: hidden;
    margin: 0.3rem;
    border-radius: var(--radius-default);
    background-color: var(--couleur-gris-sl);
}

.news-card-date {
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-start: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.5rem;
    background-color: var(--fond-page);
    color: var(--typo-corps);
    font-weight: 600;
    font-size: var(--taille-font-sm);
    border-end-end-radius: var(--radius-default);
    z-index: 2;
}

.news-card-date i {
    display: none; 
    color: var(--typo-titre);
    margin-inline-end: 0.5em;
}

.news-card-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 0.75rem;
}

.news-card-title a {
    text-decoration: none;
}

/* -----------------------------------------------
   12.1 - Actualites homepage (.actualites)
   ----------------------------------------------- */
.actualites .news-card {
    inline-size: 100%;
}

.actualites .news-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.actualites:nth-child(even) .news-card-body {
    order: -1;
}

.actualites .news-card-media {
    border-radius: var(--radius-default) 0 0 var(--radius-default);
    margin: 0.3rem;
}

.actualites .news-card-media img {
    block-size: 100%;
    object-fit: cover;
}

.actualites .news-card-body {
    justify-content: center;
    padding: 2rem 1.5rem;
}

.actualites .news-card-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.actualites .news-card-body li {
    padding: 0.25rem 0 0.25rem 1.25rem;
    background: url(../images/puce.svg) no-repeat 0 50%;
}

.actualites .news-card-date {
    color: rgb(from var(--typo-titre) r g b / 0.7);
}

/* -----------------------------------------------
   12.2 - Liste news (.news-list)
   ----------------------------------------------- */
.news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.625rem, 1.5vw, 1.25rem);
    inline-size: 100%;
}

.news-list .news-card-title {
    margin: 0;
    font-size: var(--taille-font-base);
}

.news-list .news-card-title a {
    color: var(--typo-sous-titre);
    transition: color 0.2s ease;
}

.news-list .news-card-title a:hover {
    color: var(--typo-titre);
}

/* -----------------------------------------------
   12.3 - Article news (.news-item)
   ----------------------------------------------- */
.news-item {
    max-width: 800px;
    margin-inline: auto;
}

.news-item .news-content {
    padding-block-start: 1rem;
    min-block-size: 200px;
}

.news-item .div-rs {
    display: flex;
    align-items: center;
    margin-block-end: 2.5rem;
}

.news-item .btn-partage {
    display: flex;
    gap: 0.5rem;
    margin-inline-start: 2rem;
}

.news-item .btnp {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    background-color: var(--fond-page);
    border: var(--border-card);
    border-radius: var(--radius-default);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.news-item .btnp:hover {
    background-color: var(--fond-bouton);
}

.news-item .btnp .icones {
    fill: var(--couleur-puces);
    transition: fill 0.2s ease;
}

.news-item .btnp:hover .icones {
    fill: var(--typo-sur-fond-sombre);
}

/* -----------------------------------------------
   12.4 - Navigation & Pagination
   ----------------------------------------------- */
.news-navigation {
    display: flex;
    gap: 0.5rem;
    margin-block: 2rem;
}

.news-navigation > div {
    flex: 1;
}

.news-navigation a {
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    color: var(--typo-sous-titre);
    text-decoration: none;
    border: 1px solid var(--fond-page-alt);
    border-radius: var(--radius-default);
    font-family: var(--family-titre);
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.news-navigation a:is(:hover, :focus) {
    border-color: var(--typo-sous-titre);
    background-color: var(--fond-page-alt);
}

.news-navigation b {
    text-transform: none;
    font-size: var(--taille-font-sm);
    margin-block-start: 0.25em;
    color: var(--typo-corps);
}

.pagination > li > :is(a, span) {
    color: var(--typo-sous-titre);
    border: 1px solid var(--couleur-gris-md);
    transition: all 0.2s ease;
}

.pagination > .active > :is(a, span) {
    background-color: var(--fond-bouton) !important;
    border-color: var(--typo-sous-titre) !important;
    color: var(--typo-sur-fond-sombre) !important;
}

@media (max-width: 991px) {
    .actualites .news-card-grid {
        grid-template-columns: 1fr;
    }

    .actualites .news-card-media {
        block-size: 180px;
        border-radius: var(--radius-default) var(--radius-default) 0 0;
    }

    .actualites:nth-child(even) .news-card-body {
        order: 0;
    }
}

@media (max-width: 767px) {
    .news-list {
        grid-template-columns: 1fr;
    }

    .news-list .news-card-date {
        position: static;
        background: transparent;
        padding: 0;
        justify-content: flex-start;
    }

    .news-list .news-card-date i {
        display: inline-block;
    }

    .news-navigation {
        flex-direction: column;
    }
}