/* ================================================================
   mdn_blog  style.css  Kario layout only
   ================================================================ */

#module-mdn_blog-home,
#module-mdn_blog-article,
#module-mdn_blog-category,
#module-mdn_blog-home #main,
#module-mdn_blog-article #main,
#module-mdn_blog-category #main,
#module-mdn_blog-home #content,
#module-mdn_blog-article #content,
#module-mdn_blog-category #content,
#module-mdn_blog-home .page-content,
#module-mdn_blog-article .page-content,
#module-mdn_blog-category .page-content,
#module-mdn_blog-home #wrapper,
#module-mdn_blog-article #wrapper,
#module-mdn_blog-category #wrapper {
    background-color: var(--color-beige) !important;
}

#module-mdn_blog-home .container,
#module-mdn_blog-article .container,
#module-mdn_blog-category .container {
    max-width: 100% !important;
    padding: 0 !important;
}

#module-mdn_blog-home .breadcrumb,
#module-mdn_blog-article .breadcrumb,
#module-mdn_blog-category .breadcrumb {
    display: none !important;
}

#module-mdn_blog-home #content,
#module-mdn_blog-article #content,
#module-mdn_blog-category #content {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

#module-mdn_blog-home .card,
#module-mdn_blog-article .card,
#module-mdn_blog-category .card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.blog-toolbar,
.blog-social {
    display: none !important;
}

/* neutralise les couleurs parasites du thme dans le module */
#module-mdn_blog-home a,
#module-mdn_blog-home a:link,
#module-mdn_blog-home a:visited,
#module-mdn_blog-home a:hover,
#module-mdn_blog-home a:active,
#module-mdn_blog-category a,
#module-mdn_blog-category a:link,
#module-mdn_blog-category a:visited,
#module-mdn_blog-category a:hover,
#module-mdn_blog-category a:active,
#module-mdn_blog-article a,
#module-mdn_blog-article a:link,
#module-mdn_blog-article a:visited,
#module-mdn_blog-article a:hover,
#module-mdn_blog-article a:active {
    color: var(--color-noir) !important;
}

/* ================================================================
   HEADER LISTE
   ================================================================ */

.bk-header {
    display: grid;
    grid-template-columns: var(--col-left) var(--col-right);
    border-bottom: var(--border);
    min-height: calc(100vh - var(--header-height));
    background-color: var(--color-beige);
    align-items: stretch;
}

.bk-header-gauche {
    padding: calc(var(--grid-gap) * 1.2) var(--grid-gap) var(--grid-gap) var(--grid-gap);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: var(--border);
    overflow: hidden;
    background-color: var(--color-beige);
}

.bk-header-surtitre {
    display: none !important;
}

.bk-header-titre {
    margin: 0 !important;
    max-width: 95%;
}

.bk-header-desc {
    margin: auto 0 0 !important;
    max-width: 560px;
    color: var(--color-noir) !important;
}

#module-mdn_blog-home .bk-header-desc p,
#module-mdn_blog-category .bk-header-desc p {
    margin: 0 !important;
    color: var(--color-noir) !important;
    max-width: 560px;
    font-size: clamp(24px, 2vw, 34px) !important;
    font-family: "Moderat", sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

/* ================================================================
    LA UNE
   ================================================================ */

.bk-une {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100%;
    text-decoration: none !important;
    overflow: hidden;
    background-color: var(--color-beige);
}

.bk-une-img {
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: var(--color-beige);
}

.bk-une-img img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.7s ease;
}

.bk-une:hover .bk-une-img img {
    transform: scale(1.03);
}

.bk-une-bottom {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(220px, 26%) 1fr;
    border-top: var(--border);
    background-color: var(--color-beige);
    min-height: 260px;
    align-items: stretch;
}

.bk-une-gauche {
    padding: var(--grid-gap);
    border-right: var(--border);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: calc(var(--grid-gap) / 2);
    min-width: 0;
    overflow: hidden;
}

.bk-une-droite {
    padding: var(--grid-gap);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--grid-gap);
    background-color: var(--color-beige);
    min-height: 100%;
    min-width: 0;
}

.bk-une-cat,
.bk-une-titre {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin: 0 !important;
}

.bk-une-chapeau,
.bk-une-chapeau p {
    margin: 0 !important;
    color: var(--color-noir) !important;
}

.bk-une-footer {
    display: flex;
    align-items: center;
    gap: calc(var(--grid-gap) / 3);
    padding-top: calc(var(--grid-gap) / 2);
    border-top: var(--border);
    margin-top: auto;
    color: var(--color-noir) !important;
    flex-wrap: wrap;
}

.bk-une-date,
.bk-une-duree,
.bk-une-sep,
.bk-une-lire {
    color: var(--color-noir) !important;
}

.bk-une-lire {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--grid-gap) / 3);
    text-decoration: none !important;
    transform: translateX(0);
    transition: transform 0.2s ease;
}

.bk-une:hover .bk-une-lire {
    transform: translateX(6px);
}

/* ================================================================
   BODY : menu + grille
   ================================================================ */

.bk-body {
    display: grid;
    grid-template-columns: var(--carousel-card-w) 1fr;
    border-bottom: var(--border);
    align-items: start;
    background-color: var(--color-beige);
}

.bk-menu {
    position: sticky;
    top: var(--header-height);
    align-self: start;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    scrollbar-width: none;
    background-color: var(--color-beige);
    z-index: 5;
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
}

.bk-menu::-webkit-scrollbar {
    display: none;
}

.bk-menu-title {
    padding: var(--grid-gap) 0 0 0;
    margin: 0;
    border-bottom: none !important;
}

.bk-menu .carousel-nav-list {
    padding: var(--grid-gap) 0 0 0;
    border-top: none !important;
    margin-top: 0 !important;
}

.bk-menu .carousel-nav-item {
    cursor: pointer;
    user-select: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.bk-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: var(--color-beige);
    border-left: var(--border);
}

.bk-card {
    display: flex;
    flex-direction: column;
    border-right: var(--border);
    text-decoration: none !important;
    background-color: var(--color-beige) !important;
    transition: none !important;
    padding-bottom: var(--grid-gap);
}

.bk-card:nth-child(4n) {
    border-right: none;
}

.bk-card:hover {
    background-color: var(--color-beige) !important;
}

.bk-card[style*="display: none"] {
    display: none !important;
}

.bk-card-img {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--color-beige);
    margin: var(--grid-gap) var(--grid-gap) 0 var(--grid-gap);
}

.bk-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.bk-card:hover .bk-card-img img {
    transform: scale(1.04);
}

.bk-card-body {
    padding: var(--grid-gap);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-gap) / 2);
    background-color: var(--color-beige);
}

.bk-card-titre {
    margin: 0 !important;
}

.bk-card-chapeau,
.bk-card-chapeau p {
    margin: 0 !important;
    margin-top: auto !important;
    color: var(--color-noir) !important;
}

.bk-card-footer {
    padding: calc(var(--grid-gap) / 4) var(--grid-gap) 0 var(--grid-gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-beige);
    gap: calc(var(--grid-gap) / 2);
    flex-wrap: wrap;
}

.bk-card-date,
.bk-card-lire {
    color: var(--color-noir) !important;
}

.bk-card-lire {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--grid-gap) / 3);
    text-decoration: none !important;
    transform: translateX(0);
    transition: transform 0.2s ease;
}

.bk-card:hover .bk-card-lire {
    transform: translateX(6px);
}

/* ================================================================
   ICONES / FLCHES / SPARATEURS
   ================================================================ */

.bk-arrow,
.bk-une-sep,
.bk-article-meta-sep {
    color: currentColor;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nav-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.nav-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.carousel-nav-item {
    color: var(--color-noir) !important;
}

/* ================================================================
   PAGINATION
   ================================================================ */

.bk-pagination {
    display: flex;
    align-items: stretch;
    border-bottom: var(--border);
    border-top: var(--border);
    background-color: var(--color-beige);
}

.bk-page-btn {
    display: flex;
    align-items: center;
    padding: var(--grid-gap);
    color: var(--color-noir) !important;
    text-decoration: none !important;
    border-right: var(--border);
    background-color: var(--color-beige);
    transition:
        background-color 0.5s cubic-bezier(0.87, 0, 0.13, 1),
        color 0.5s cubic-bezier(0.87, 0, 0.13, 1);
}

.bk-page-btn:hover:not(.is-disabled):not(.is-active),
.bk-page-btn.is-active {
    background-color: var(--color-noir) !important;
    color: var(--color-beige) !important;
}

.bk-page-btn.is-disabled {
    opacity: 0.25;
    pointer-events: none;
}

.bk-page-spacer {
    display: flex;
    align-items: center;
    padding: var(--grid-gap);
    color: var(--color-gris);
    border-right: var(--border);
    background-color: var(--color-beige);
}

/* ================================================================
   PAGE ARTICLE  HEADER
   ================================================================ */

.bk-article-header {
    border-bottom: var(--border);
    margin-top: var(--header-height);
    background-color: var(--color-beige);
}

.bk-article-header-meta {
    display: flex;
    align-items: center;
    gap: calc(var(--grid-gap) / 3);
    padding: var(--grid-gap);
    border-bottom: var(--border);
    background-color: var(--color-beige);
    flex-wrap: wrap;
}

.bk-article-meta-cat {
    color: var(--color-noir) !important;
    text-decoration: none !important;
    padding: calc(var(--grid-gap) / 5) calc(var(--grid-gap) / 2);
    border: var(--border);
    transition: background-color 0.4s ease, color 0.4s ease;
}

.bk-article-meta-cat:hover {
    background-color: var(--color-noir);
    color: var(--color-beige) !important;
}

.bk-article-meta-date,
.bk-article-meta-lecture,
.bk-article-meta-sep {
    color: var(--color-noir) !important;
}

.bk-article-header-grille {
    display: grid;
    grid-template-columns: var(--col-left) var(--col-right);
    min-height: 55vh;
    background-color: var(--color-beige);
}

.bk-article-header-gauche {
    padding: calc(var(--grid-gap) * 2) var(--grid-gap);
    border-right: var(--border);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--color-beige);
}

.bk-article-titre {
    margin: 0 0 var(--grid-gap) !important;
}

.bk-article-chapeau,
.bk-article-chapeau p {
    margin: 0 !important;
    color: var(--color-noir) !important;
}

.bk-article-header-img {
    overflow: hidden;
    background-color: var(--color-beige);
}

.bk-article-header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ================================================================
   PAGE ARTICLE  CONTENU
   ================================================================ */

.blog-article-content {
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: calc(var(--grid-gap) * 3) var(--grid-gap) !important;
    border: none !important;
    background-color: var(--color-beige) !important;
}

.blog-article-content p,
.blog-article-content ul,
.blog-article-content ol,
.blog-article-content blockquote {
    margin-bottom: calc(var(--grid-gap) * 1.2) !important;
}

.blog-article-content h2,
.blog-article-content h3 {
    margin: calc(var(--grid-gap) * 2.5) 0 var(--grid-gap) !important;
    padding-bottom: var(--grid-gap) !important;
    border-bottom: var(--border) !important;
}

.blog-article-content a {
    color: var(--color-noir) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.blog-article-content img {
    width: calc(100% + var(--grid-gap) * 2) !important;
    margin-left: calc(var(--grid-gap) * -1) !important;
    height: auto !important;
    display: block !important;
    margin-top: var(--grid-gap) !important;
    margin-bottom: var(--grid-gap) !important;
}

.bk-related {
    margin-bottom: calc(var(--grid-gap) * 2);
}

.bk-related-title {
    padding: var(--grid-gap) !important;
    border-bottom: var(--border) !important;
    margin: 0 !important;
}

.bk-article-back {
    text-align: center;
    margin: calc(var(--grid-gap) * 2) 0;
}

.btn.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    padding: var(--grid-gap) !important;
    background-color: var(--color-noir) !important;
    color: var(--color-beige) !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    border: none !important;
    transition: background-color 0.4s ease !important;
}

.btn.btn-primary:hover {
    background-color: var(--color-gris) !important;
    color: var(--color-beige) !important;
}

/* ================================================================
   CATEGORY HEADER
   ================================================================ */

.bk-cat-header {
    padding: var(--grid-gap);
    border-bottom: var(--border);
    margin-top: var(--header-height);
    background-color: var(--color-beige);
}

.bk-cat-titre {
    margin: 0 !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1400px) {
    .bk-grille {
        grid-template-columns: repeat(3, 1fr);
    }

    .bk-card:nth-child(4n) {
        border-right: var(--border);
    }

    .bk-card:nth-child(3n) {
        border-right: none;
    }
}

@media (max-width: 1024px) {
    .bk-body {
        grid-template-columns: 200px 1fr;
    }

    .bk-grille {
        grid-template-columns: repeat(2, 1fr);
    }

    .bk-card:nth-child(3n) {
        border-right: var(--border);
    }

    .bk-card:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 768px) {
    .bk-header {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .bk-header-gauche {
        border-right: none;
        border-bottom: var(--border);
        min-height: 200px;
    }

    .bk-une {
        height: 70vw;
    }

    .bk-une-bottom {
        grid-template-columns: 100px 1fr;
        min-height: auto;
    }

    .bk-body {
        grid-template-columns: 1fr;
    }

    .bk-menu {
        position: static;
        border-right: none;
        border-bottom: var(--border);
        max-height: none;
        padding-left: var(--grid-gap);
        padding-right: var(--grid-gap);
    }

    .bk-menu .carousel-nav-list {
        display: flex;
        flex-wrap: wrap;
        border-top: none;
        padding-top: var(--grid-gap);
        padding-bottom: 0;
    }

    .bk-menu .carousel-nav-item {
        flex: 1 1 auto;
        min-width: 140px;
        border-right: var(--border);
        border-bottom: var(--border);
    }

    .bk-grille {
        grid-template-columns: repeat(2, 1fr);
    }

    .bk-card:nth-child(2n) {
        border-right: none;
    }

    .bk-card:nth-child(3n) {
        border-right: var(--border);
    }

    .bk-article-header-grille {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .bk-article-header-gauche {
        border-right: none;
        border-bottom: var(--border);
    }

    .bk-article-header-img {
        min-height: 55vw;
    }
}

@media (max-width: 480px) {
    .bk-grille {
        grid-template-columns: 1fr;
    }

    .bk-card {
        border-right: none !important;
    }

    .bk-une {
        height: auto;
    }

    .bk-une-img {
        min-height: 56vw;
    }

    .bk-une-bottom {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .bk-une-gauche {
        border-right: none;
        border-bottom: var(--border);
    }
}

/* menu blog : même rendu que la home, sans comportement accordéon */
.bk-menu .carousel-nav-item:hover {
    padding-left: calc(var(--grid-gap) + 6px) !important;
}

.bk-menu .carousel-nav-item .icon-arrow {
    opacity: 1;
    transform: rotate(0deg);
}

.bk-menu .carousel-nav-item .icon-close {
    opacity: 0;
    transform: rotate(-45deg);
}