p { color: var(--color-noir) !important; }

/* ================================================================
   mdn_blog — style.css — Kario layout
   Structure :
   01. Reset global pages blog
   02. Header liste
   03. La une
   04. Body (menu + sidebar + grille)
   05. Icônes / flèches
   06. Pagination
   07. Page article (header, contenu, bouton retour)
   08. Articles liés
   09. Produit associé
   10. Layout article + produit
   11. Media queries
   ================================================================ */


/* ================================================================
   01. RESET GLOBAL PAGES BLOG
   ================================================================ */

#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; }

#module-mdn_blog-home #footer,
#module-mdn_blog-article #footer,
#module-mdn_blog-category #footer { display: block !important; visibility: visible !important; opacity: 1 !important; }

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

#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 { color: var(--color-noir) !important; }

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


/* ================================================================
   02. HEADER LISTE
   ================================================================ */

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

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

.bk-header-surtitre { display: none; }
.bk-header-titre    { margin: 0; max-width: 95%; }

.bk-header-desc {
    margin: auto 0 0;
    max-width: 40vw;
    color: var(--color-noir);
    font-size: 40px;
    line-height: var(--lh-title);
}

.bk-header-desc p { font-size: 40px !important; line-height: var(--lh-title) !important; }

.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; }


/* ================================================================
   03. LA UNE
   ================================================================ */

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

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

.bk-une-img-inner {
    position: absolute;
    inset: var(--grid-gap);
    overflow: hidden;
    width: calc(100% - 2 * var(--grid-gap));
    height: calc(100% - 2 * var(--grid-gap));
}

.bk-une-img img {
    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;
    transform-origin: center;
}

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

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

.bk-une-gauche {
    padding: var(--grid-gap);
    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);
    border-left: var(--border);
    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; }

#module-mdn_blog-home .bk-une-titre { font-weight: 700 !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); text-decoration: underline !important; text-underline-offset: 3px !important; }


/* ================================================================
   04. BODY (menu + sidebar + grille)
   ================================================================ */

.bk-body {
    display: grid;
    grid-template-columns: minmax(280px, var(--carousel-card-w)) 1fr;
    align-items: stretch;
    background-color: var(--color-beige);
}

/* --- Menu --- */

.bk-menu { background-color: var(--color-beige); padding: var(--grid-gap); }
.bk-menu-title { padding: var(--grid-gap) 0 0; margin: 0; border-bottom: none !important; }
.bk-menu .carousel-nav-list { padding: var(--grid-gap) 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: var(--grid-gap) !important; }
.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); }

/* --- Sidebar filtres --- */

.bk-blog-sidebar                                   { background-color: var(--color-beige); }
.bk-blog-sidebar .carousel-sidebar-top            { padding: var(--grid-gap); }
.bk-blog-sidebar::-webkit-scrollbar               { display: none; }
.bk-blog-sidebar .carousel-sidebar-title          { margin: 0 0 calc(var(--grid-gap) * 2); max-width: 12ch; }
.bk-blog-sidebar .carousel-nav-list               { margin-top: auto; }
.bk-blog-sidebar .carousel-nav-item               { list-style: none; border-right: none; }
.bk-blog-sidebar .carousel-nav-item[hidden]       { display: none !important; }
.bk-blog-sidebar .carousel-nav-item:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }

.bk-sidebar { flex: 0 0 350px; display: flex; flex-direction: column; padding: 0; }

#module-mdn_blog-home .bk-blog-sidebar,
#module-mdn_blog-category .bk-blog-sidebar { display: block !important; }

.bk-filter-select-wrapper { display: none; }
.bk-filter-select         { display: none; }

/* --- Grille articles --- */

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

.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);
    min-width: 0;
}

.bk-card:nth-child(4n)           { border-right: none; }
.bk-card.has-row-below            { border-bottom: var(--border); }
.bk-card:hover                    { background-color: var(--color-beige) !important; }
.bk-card[style*="display: none"]  { display: none !important; }
.bk-card.is-hidden                { display: none !important; }
.bk-card.is-fading-in             { animation: cardFadeIn 0.4s ease both; }

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bk-card-img {
    aspect-ratio: 4 / 3;
    background-color: var(--color-beige);
    margin: 0;
    width: 100%;
    min-width: 0;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    padding: var(--grid-gap);
}

.bk-card-img-inner { position: absolute; inset: var(--grid-gap); overflow: hidden; }

.bk-card-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s ease;
    transform-origin: center;
}

.bk-card:hover .bk-card-img-inner 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);
}

#module-mdn_blog-home .bk-card-titre,
#module-mdn_blog-category .bk-card-titre { margin: 0 !important; font-weight: 600 !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;
    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); text-decoration: underline !important; text-underline-offset: 3px !important; }


/* ================================================================
   05. ICÔNES / FLÈCHES / SÉPARATEURS
   ================================================================ */

.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; }


/* ================================================================
   06. 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 var(--ease-nav), color 0.5s var(--ease-nav);
}

.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); }


/* ================================================================
   07. PAGE ARTICLE
   ================================================================ */

/* --- Header --- */

.bk-article-header { border-bottom: var(--border); 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);
    pointer-events: none;
    cursor: default;
    transition: none !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);
    background-color: var(--color-beige);
}

.bk-article-header-gauche {
    padding: calc(var(--grid-gap) * 2) var(--grid-gap);
    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; border-left: var(--border); background-color: var(--color-beige); padding: var(--grid-gap); height: 45vh !important; }
.bk-article-header-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- 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-top: 4%; 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; transition: opacity 0.2s ease; }

.blog-article-content a:hover,
.blog-article-content a:active,
.blog-article-content a:visited { color: var(--color-noir) !important; opacity: 0.6; }

.blog-article-content img {
    width: calc(100% + var(--grid-gap) * 2) !important;
    max-width: none !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;
    transition: filter 0.5s ease;
}

.blog-article-content img:hover { filter: brightness(0.95); }

/* --- Bouton retour --- */

.bk-article-back { max-width: 680px; margin: 0 auto calc(var(--grid-gap) * 2); padding: 0 var(--grid-gap); }

.bk-article-back-btn,
.bk-article-back-btn:link,
.bk-article-back-btn:visited,
.bk-article-back-btn:hover,
.bk-article-back-btn:active {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--grid-gap) / 3);
    color: var(--color-noir) !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: var(--font-main) !important;
    font-size: inherit;
    font-weight: 400;
    text-transform: lowercase;
    transform: translateX(0);
    transition: transform 0.2s ease;
    padding: 0;
}

.bk-article-back:hover .bk-article-back-btn,
.bk-article-back-btn:hover { transform: translateX(-6px); text-decoration: underline !important; text-underline-offset: 3px !important; }

.bk-article-back-btn .bk-arrow { color: var(--color-noir); display: inline-flex; align-items: center; line-height: 1; flex-shrink: 0; margin-top: 4px; }
.bk-article-back-btn .bk-arrow svg { display: block; width: 16px; height: 16px; }


/* ================================================================
   08. ARTICLES LIÉS
   ================================================================ */

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

.bk-related-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 680px;
    margin: 0 auto;
    border-left: var(--border);
    border-right: var(--border);
}

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

#module-mdn_blog-article .bk-related-grille .bk-card,
#module-mdn_blog-article .bk-related-grille .bk-card:link,
#module-mdn_blog-article .bk-related-grille .bk-card:visited,
#module-mdn_blog-article .bk-related-grille .bk-card:hover,
#module-mdn_blog-article .bk-related-grille .bk-card:active { color: var(--color-noir) !important; text-decoration: none !important; }

#module-mdn_blog-article .bk-related-grille .bk-card-lire,
#module-mdn_blog-article .bk-related-grille .bk-card-lire:hover { color: var(--color-noir) !important; }


/* ================================================================
   09. PRODUIT ASSOCIÉ
   ================================================================ */

.bk-article-product { padding: 0; }

.bk-product-card {
    border: var(--border);
    background-color: var(--color-beige);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 280px;
    text-decoration: none !important;
    color: var(--color-noir) !important;
}

.bk-product-card:hover { color: var(--color-noir) !important; text-decoration: none !important; }

.bk-product-card-gauche {
    padding: var(--grid-gap);
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-gap) / 2);
}

.bk-product-card-droite    { overflow: hidden; }
.bk-product-card-img-inner { width: 100%; height: 100%; overflow: hidden; }

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

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

.bk-product-card-header {
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-gap) / 4);
    padding-bottom: calc(var(--grid-gap) / 2);
    border-bottom: var(--border);
}

.bk-product-kario,
.bk-product-gamme,
.bk-product-desc,
.bk-product-features { color: var(--color-noir) !important; }

.bk-product-desc     { margin: 0; flex: 1; }
.bk-product-features { margin: 0; line-height: 1.6; }

.bk-product-btn {
    align-self: flex-start;
    margin-top: auto;
    display: inline-block;
    padding: calc(var(--grid-gap) / 2) var(--grid-gap);
    font-family: var(--font-main) !important;
    font-size: inherit;
    font-weight: 400;
    text-transform: lowercase;
    background-color: var(--color-noir);
    color: var(--color-beige) !important;
    text-decoration: none !important;
    border: none;
    transition: var(--transition-nav);
}

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


/* ================================================================
   10. LAYOUT ARTICLE + PRODUIT (2 colonnes)
   ================================================================ */

.bk-article-layout--with-product {
    display: grid;
    grid-template-columns: var(--col-left) 1fr;
    align-items: stretch;
}

.bk-article-layout--with-product .blog-article-content    { max-width: none !important; margin: 0 !important; padding: var(--grid-gap) !important; width: calc(50vw - var(--grid-gap) / 2) !important; }
.bk-article-layout--with-product .bk-article-back         { max-width: none !important; margin: 0 0 calc(var(--grid-gap) * 2) !important; }
.bk-article-layout--with-product .bk-article-layout-main  { min-height: 70vh; }

.bk-article-layout-aside {
    display: flex;
    flex-direction: column;
    border-left: var(--border);
    width: 30vw;
    margin-left: auto;
}

.bk-article-layout-aside .bk-article-product              { display: flex; flex-direction: column; }
.bk-article-layout-aside .bk-product-card                 { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: auto; height: auto; border: none; }
.bk-article-layout-aside .bk-product-card-gauche          { border-right: none; border-top: var(--border); border-bottom: var(--border); order: 2; }
.bk-article-layout-aside .bk-product-card-gauche > *      { width: 70%; }
.bk-article-layout-aside .bk-product-card-droite          { order: 1; display: block; max-height: 500px; }
.bk-article-layout-aside .bk-product-card-droite .bk-product-card-img-inner { width: 100%; height: 100%; }
.bk-article-layout-aside .bk-product-card-droite img      { width: 100%; height: 100%; object-fit: contain; object-position: center; }


/* ================================================================
   11. MEDIA QUERIES
   ================================================================ */

@media (min-width: 1201px) {
    .bk-blog-sidebar .carousel-nav-item:first-child { border-top: var(--border); }
}

@media (min-width: 768px) {
    .bk-header { height: calc(80vh - var(--header-height) + 1px); }
}

@media (max-width: 2060px) { .bk-header-desc p { font-size: 36px !important; } }
@media (max-width: 1669px) { .bk-header-desc p { font-size: 32px !important; } }
@media (max-width: 1439px) { .bk-header-desc p { font-size: 28px !important; } }
@media (max-width: 1480px) { .bk-une-bottom { grid-template-columns: 160px 1fr; } }
@media (max-width: 1199px) { .bk-header-desc p { font-size: 24px !important; } }

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

    .bk-blog-sidebar { position: static; min-height: auto; max-height: none; border-right: none; border-bottom: var(--border); display: block !important; }
    .bk-blog-sidebar .carousel-sidebar-top   { min-height: auto; padding: var(--grid-gap); display: flex; flex-direction: row; align-items: center; gap: var(--grid-gap); }
    .bk-blog-sidebar .carousel-sidebar-title { margin-bottom: 0; max-width: none; flex-shrink: 0; font-size: 1rem !important; white-space: nowrap; }
    .bk-blog-sidebar .carousel-nav-list      { display: none !important; }

    .bk-filter-select-wrapper { display: flex; align-items: center; flex: 1; position: relative; border: var(--border); }
    .bk-filter-select {
        display: block;
        flex: 1;
        appearance: none;
        -webkit-appearance: none;
        background-color: var(--color-beige);
        border: none;
        padding: calc(var(--grid-gap) / 2) var(--grid-gap);
        padding-right: calc(var(--grid-gap) * 2.5);
        font-family: var(--font-body, inherit);
        font-size: 0.9rem;
        color: var(--color-noir);
        cursor: pointer;
        outline: none;
        background-image: none;
    }
    .bk-filter-select:focus { border-color: var(--color-noir); }
    .bk-filter-select-icon  { position: absolute; right: var(--grid-gap); pointer-events: none; display: flex; align-items: center; }
}

@media (max-width: 1024px) {
    .bk-grille:not(.bk-related-grille) { border-left: none !important; }
    .bk-grille { grid-template-columns: repeat(2, 1fr); }
    .bk-card:nth-child(3n) { border-right: var(--border); }
 }

@media (max-width: 1023px) {
    .bk-header-desc p { font-size: 20px !important; }
    .bk-article-layout--with-product .blog-article-content { width: 100% !important; }
    .bk-article-layout-aside .bk-product-card-gauche > *   { width: 100%; }
    .bk-article-layout-aside .bk-product-card-droite        { width: 100%; }
}

@media (max-width: 1000px) {
    .bk-article-layout-aside { width: 40vw; }
}

@media (max-width: 768px) {
    .bk-header        { grid-template-columns: 1fr; height: auto; min-height: auto; }
    .bk-header-gauche { border-right: none; border-bottom: none; height: 200px; }
    .bk-header-desc   { max-width: unset; }
    .bk-header-desc p { font-size: 18px !important; }

    .bk-article-header-img    { height: 35vh !important; }
    .bk-article-header-grille { grid-template-columns: 1fr; min-height: auto; }
    .bk-article-header-gauche { border-right: none; border-bottom: var(--border); }
    .blog-article-content     { padding-top: 0 !important; }

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

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

    .bk-menu,
    .bk-blog-sidebar { position: static !important; border-right: none; border-bottom: var(--border); max-height: none; padding-left: var(--grid-gap); padding-right: var(--grid-gap); display: block !important; }
    .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:not(.bk-related-grille) { border-left: none !important; }
    .bk-grille { grid-template-columns: repeat(2, 1fr); border-left: none !important; }
    .bk-card:nth-child(3n) { border-right: var(--border); }

    .bk-article-layout--with-product { grid-template-columns: 1fr; }

    .bk-article-header-img { border-left: none; }

    /* -- aside article : responsive 767px -- */
    .bk-article-layout-aside                          { width: 100%; border-left: none; border-top: var(--border); }
    .bk-article-layout-aside .bk-product-card         { grid-template-columns: 40% 60%; grid-template-rows: none; min-height: 280px; }
    .bk-article-layout-aside .bk-product-card-gauche  { order: 1; border-top: none; border-bottom: none; border-right: var(--border); align-items: center; justify-content: space-between; }
    .bk-article-layout-aside .bk-product-card-gauche > * { width: 100%; max-width: 100%; }
    .bk-article-layout-aside .bk-product-card-droite  { order: 2; max-height: 300px; }
}

@media (max-width: 680px) {
    .bk-related-grille { max-width: 100%; border-right: none; }
}

@media (max-width: 540px) {
    .bk-article-layout-aside .bk-product-card { grid-template-columns: 50% 50%; }
}

@media (max-width: 350px) {
    .bk-article-layout-aside .bk-product-card         { grid-template-columns: 1fr; grid-template-rows: auto auto; }
    .bk-article-layout-aside .bk-product-card-droite  { order: 1; max-height: 220px; }
    .bk-article-layout-aside .bk-product-card-gauche  { order: 2; border-right: none; border-top: var(--border); }
}

@media (max-width: 500px) {
    .bk-grille { grid-template-columns: 1fr;}
    .bk-card   { border-right: none !important;  }

    .bk-related-grille          { grid-template-columns: 1fr; }
    .bk-related-grille .bk-card { border-right: none !important; border-bottom: var(--border) !important; }
    .bk-related                 { margin-bottom: var(--grid-gap); }

    .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); }

    .bk-product-card            { grid-template-columns: 1fr; }
    .bk-product-card-gauche     { border-right: none; }
    .bk-product-card-droite img { height: auto; width: 60%; object-fit: contain; display: block; margin: 0 auto; }

    .bk-article-layout-aside .bk-product-card-gauche > * { max-width: 100%; }
}

@media (min-width: 2000px) {
    body#module-mdn_blog-article #content.page-content,
    body#module-mdn_blog-category #content.page-content {
        border-left: var(--border) !important;
        border-right: var(--border) !important;
    }
}