/* --- Styles for the articles (Blog, archives, articles) --- */

/* Archive & Blog Page Styles (archive.php, home.php) */

.archive-header {
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid var(--site-color-border-light);
    text-align: center;
}

.archive-nav {
    margin-bottom: 2.5em;
}

/* Center titles of pages and articles (excluding homepage) */
/* body:not(.home):not(.front-page) .entry-header {
    text-align: center;
} */

/* ---------------------------------------------------- */
/* Styles for the grid of the articles on the archive page */
/* ---------------------------------------------------- */
.archive .latest-posts-grid,
.blog .latest-posts-grid, 
.tax-category .latest-posts-grid,
.search .latest-posts-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 2.5em; 
    list-style: none; 
    padding: 0; 
    margin: 0 auto 3em auto;
    max-width: var(--content-width, 1200px); 
}

/* Styles for each article as a card in the grid */
.archive .latest-posts-grid > article,
.blog .latest-posts-grid > article,
.tax-category .latest-posts-grid > article,
.search .latest-posts-grid > article {
    margin-bottom: 0 !important; 
    padding-bottom: 0 !important; 
    /* border-bottom: none !important;  */
    /* Styles for the visual "card" */
    /* background-color: var(--site-color-background-light, #fff); */
    border: 1px solid var(--site-color-border-light, #eee);
    border-radius: var(--site-image-border-radius, 12px);
    padding: 1.5em; 
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    height: 100%; 
}

/* Hover effect on cards */
.archive .latest-posts-grid > article:hover,
.blog .latest-posts-grid > article:hover,
.tax-category .latest-posts-grid > article:hover,
.search .latest-posts-grid > article:hover {
    transform: translateY(-5px); 
    box-shadow: var(--shadow-md); 
}

.posts-navigation {
    grid-column: 1 / -1;
    margin-top: 3em;
}

/* Ensure archive/blog cards keep footer at bottom and add spacing under summary */
.archive .latest-posts-grid > article.post.has-post-thumbnail,
.blog .latest-posts-grid > article.post.has-post-thumbnail,
.tax-category .latest-posts-grid > article.post.has-post-thumbnail,
.search .latest-posts-grid > article.post.has-post-thumbnail {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

.archive .latest-posts-grid > article .entry-summary,
.blog .latest-posts-grid > article .entry-summary,
.tax-category .latest-posts-grid > article .entry-summary,
.search .latest-posts-grid > article .entry-summary {
    flex: 1 1 auto;
    margin-bottom: 1rem; /* space between summary and footer */
}

.archive .latest-posts-grid > article .entry-footer,
.blog .latest-posts-grid > article .entry-footer,
.tax-category .latest-posts-grid > article .entry-footer,
.search .latest-posts-grid > article .entry-footer {
    margin-top: auto;
}

.read-more.button {
    color: var(--accent-main);
    border: none;
    background: none;
    padding-left: 0;
    box-shadow: none;
}
.read-more.button:hover {
    color: var(--site-color-text);
}   

/* ---------------------------------------------------- */
/* Styles for the internal organization of each article (In the card) */
/* ---------------------------------------------------- */

body.blog article.post.has-post-thumbnail,
body.archive article.post.has-post-thumbnail,
body.archive article.post.has-post-thumbnail,
body.search article.post.has-post-thumbnail {
    display: block !important; 
    margin-bottom: 0 !important; 
    padding-bottom: 0 !important;
}

body.blog article.post.has-post-thumbnail .post-thumbnail,
body.archive article.post.has-post-thumbnail .post-thumbnail,
body.archive article.post.has-post-thumbnail .post-thumbnail,
body.search article.post.has-post-thumbnail .post-thumbnail {
    margin-top: 0em;
    margin-bottom: 0.8em; 
    height: 200px; 
    max-width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    border-radius: var(--site-image-border-radius, 12px);
}

/* body.blog article.post.has-post-thumbnail .post-thumbnail img,
body.archive article.post.has-post-thumbnail .post-thumbnail img,
body.archive article.post.has-post-thumbnail .post-thumbnail img,
body.search article.post.has-post-thumbnail .post-thumbnail img {
    display: block;
    width: 100%; 
    height: 100%;
    object-fit: cover; 
} */

body.blog article.post.has-post-thumbnail .entry-header,
body.archive article.post.has-post-thumbnail .entry-header,
body.archive article.post.has-post-thumbnail .entry-header,
body.search article.post.has-post-thumbnail .entry-header {
    margin-top: 0; 
    text-align: center;
    margin-bottom: 0.5em; 
}
body.blog article.post.has-post-thumbnail .entry-header .entry-title,
body.search article.post.has-post-thumbnail .entry-header .entry-title {
    font-size: 1.3em; 
    line-height: 1.3;
}


body.blog article.post.has-post-thumbnail .entry-content,
body.archive article.post.has-post-thumbnail .entry-content,
body.archive article.post.has-post-thumbnail .entry-content,
body.search article.post.has-post-thumbnail .entry-content {
    font-size: 0.95em; 
    margin-bottom: 1em; 
}
body.blog article.post.has-post-thumbnail .entry-content p:last-of-type,
body.search article.post.has-post-thumbnail .entry-content p:last-of-type {
    margin-bottom: 0; 
}


body.blog article.post.has-post-thumbnail .entry-footer,
body.archive article.post.has-post-thumbnail .entry-footer,
body.archive article.post.has-post-thumbnail .entry-footer,
body.search article.post.has-post-thumbnail .entry-footer {
    margin-top: auto; 
    padding-top: 0;
    border-top: 1px solid var(--site-color-border-light);
    font-size: 0.85em; 
    text-align: left !important; 
}
body.blog article.post.has-post-thumbnail .entry-meta,
body.archive article.post.has-post-thumbnail .entry-meta,
body.archive article.post.has-post-thumbnail .entry-meta,
body.search article.post.has-post-thumbnail .entry-meta {
    text-align: left !important; 
    margin-top: 0.5em; 
    font-size: 0.8em; 
}



/* ---------------------------------------------------- */
/* MEDIA QUERIES for the global article grid */
/* ---------------------------------------------------- */

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .archive .latest-posts-grid,
    .blog .latest-posts-grid,
    .tax-category .latest-posts-grid,
    .search .latest-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* @media screen and (max-width: 769px) {
    .archive .latest-posts-grid,
    .blog .latest-posts-grid,
    .tax-category .latest-posts-grid,
    .search .latest-posts-grid {
        grid-template-columns: repeat(1, 1fr);
    }
} */

/* ---------------------------------------------------- */
/* MEDIA QUERIES for individual cards on mobile */
/* ---------------------------------------------------- */

@media screen and (max-width: 768px) {
    .archive .latest-posts-grid,
    .blog .latest-posts-grid,
    .tax-category .latest-posts-grid,
    .search .latest-posts-grid {
        grid-template-columns: 1fr; 
        gap: 2em; 
    }

    body.blog article.post.has-post-thumbnail,
    body.archive article.post.has-post-thumbnail,
    body.archive article.post.has-post-thumbnail,
    body.search article.post.has-post-thumbnail {
        display: block !important; 
        grid-template-columns: unset !important;
        grid-template-areas: unset !important;
        gap: unset !important;
        
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        transform: none !important; 

        margin-bottom: 2.5em !important; /* Margin between articles in list mode */
        padding-bottom: 2.5em !important; /* Padding for the bottom border */
        border-bottom: 1px solid var(--site-color-border-light) !important; /* Border between articles in list mode */
    }

    
    body.blog article.post.has-post-thumbnail:last-child,
    body.archive article.post.has-post-thumbnail:last-child,
    body.archive article.post.has-post-thumbnail:last-child,
    body.search article.post.has-post-thumbnail:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }
    body.blog article.post.has-post-thumbnail .post-thumbnail,
    body.archive article.post.has-post-thumbnail .post-thumbnail,
    body.archive article.post.has-post-thumbnail .post-thumbnail,
    body.search article.post.has-post-thumbnail .post-thumbnail {
        margin-top: 0;
        margin-bottom: 1em;
        height: auto; 
        display: block;
        border-radius: 0; 
    }
    body.blog article.post.has-post-thumbnail .post-thumbnail img,
    body.archive article.post.has-post-thumbnail .post-thumbnail img,
    body.archive article.post.has-post-thumbnail .post-thumbnail img,
    body.search article.post.has-post-thumbnail .post-thumbnail img {
        max-height: none;
        object-fit: cover;
    }    
    body.blog article.post.has-post-thumbnail .entry-header,
    body.archive article.post.has-post-thumbnail .entry-header,
    body.archive article.post.has-post-thumbnail .entry-header,
    body.search article.post.has-post-thumbnail .entry-header {
        text-align: center; /* Keep left alignment as in the card if it's the blog homepage */
    }
    body.blog article.post.has-post-thumbnail .entry-footer,
    body.archive article.post.has-post-thumbnail .entry-footer,
    body.archive article.post.has-post-thumbnail .entry-footer,
    body.search article.post.has-post-thumbnail .entry-footer {
        text-align: left !important; /* Keep left alignment as in the card */
    }
    body.blog article.post.has-post-thumbnail .entry-meta,
    body.archive article.post.has-post-thumbnail .entry-meta,
    body.archive article.post.has-post-thumbnail .entry-meta,
    body.search article.post.has-post-thumbnail .entry-meta {
        text-align: left !important; /* Keep left alignment as in the card */
    }
}


/* Limiting the width and centering the featured image on single article pages (on large screens) */
@media screen and (min-width: 769px){
    /* Make featured image use the article width by default */
    body.single .post-thumbnail,
    body.archive .post-thumbnail {
        max-width: 100%;
        width: 100%;
    }

    /* Ensure the image fills its container and is not constrained by intrinsic dimensions */
    body.single .post-thumbnail img,
    body.archive .post-thumbnail img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Ensure text elements are block when not in grid (articles without image on large screens) */
    body.blog article.post:not(.has-post-thumbnail) .entry-header,
    body.archive article.post:not(.has-post-thumbnail) .entry-header,
    body.archive article.post:not(.has-post-thumbnail) .entry-header,
    body.search article.post:not(.has-post-thumbnail) .entry-header,
    body.blog article.post:not(.has-post-thumbnail) .entry-content,
    body.archive article.post:not(.has-post-thumbnail) .entry-content,
    body.archive article.post:not(.has-post-thumbnail) .entry-content,
    body.search article.post:not(.has-post-thumbnail) .entry-content,
    body.blog article.post:not(.has-post-thumbnail) .entry-footer,
    body.archive article.post:not(.has-post-thumbnail) .entry-footer,
    body.archive article.post:not(.has-post-thumbnail) .entry-footer,
    body.search article.post:not(.has-post-thumbnail) .entry-footer {
        display: block; 
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .article-navigation-footer,
    .post-navigation {
        flex-direction: column;
        align-items: stretch;
    }
    .post-navigation .nav-links {
        flex-direction: column;
        gap: 0; /* Delete the gap between .nav-previous/next */
    }
    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        text-align: center;
        margin-bottom: 10px;
    }
    .button-back-to-blog {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    body:not(.home):not(.front-page) .entry-header {
    text-align: center;
    }
}

/* Pagination for blog/archive pages */
.navigation.pagination {
    margin-top: 3em;
    margin-bottom: 3em;
    text-align: center; /* Center the pagination links */
}

.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Space between page numbers */
}

.navigation.pagination .page-numbers {
    display: inline-flex; /* Use inline-flex for centering content within each link */
    justify-content: center;
    align-items: center;
    min-width: 40px; /* Minimum width for each page number */
    height: 40px; /* Fixed height for each page number */
    padding: 0 10px;
    text-decoration: none;
    color: var(--site-color-text-dark-safe); /* Default link color */
    border: 1px solid var(--site-color-border-medium);
    border-radius: var(--site-image-border-radius, 12px);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-weight: bold;
}

.navigation.pagination .page-numbers:hover {
    background-color: rgba(var(--site-color-accent-primary-rgb), 0.1);
        color: var(--site-color-text-light-safe);
        border-color: var(--site-color-accent-primary);
}

.navigation.pagination .page-numbers.current {
    background-color: var(--site-color-accent-primary); 
        color: var(--site-color-text-light-safe); 
        border-color: var(--site-color-accent-primary);
    pointer-events: none; /* Disable click on current page */
}

.navigation.pagination .page-numbers.dots {
    border: none;
    background: none;
    pointer-events: none; /* Not clickable */
    font-weight: normal;
}

/* Specific styling for prev/next links if needed, they also have .page-numbers */
.navigation.pagination .prev,
.navigation.pagination .next {
    color: var(--site-color-text-light-safe);/* You can add specific styles here if they need to differ from other page numbers */
}


/* Link (button) styles */
.posts-navigation a {
    background-color: transparent; 
    color: var(--site-color-text-soft);
    margin-bottom: 0.2em;
    text-transform: uppercase;
    /* color: var(--site-color-text-dark-safe); */
    text-decoration: none;
    display: block;
    padding: 10px;
    border: 1px solid var(--site-color-accent-secondary);
    border-radius: var(--site-image-border-radius, 12px);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.posts-navigation a:hover {
    /* color: var(--site-color-accent-primary); */
    background-color: rgba(var(--site-color-accent-secondary-rgb), 0.2);
    /* border-color: var(--site-color-accent-secondary); */
    border: 1px solid var(--site-color-accent-secondary);
    border-radius: var(--site-image-border-radius, 12px);
}

/* If titles/subtitles are inside the links, the following styles will apply via inheritance or will be set on the <a> */
.posts-navigation .nav-subtitle {
    display: block;
    font-size: 0.85em;
    color: var(--site-color-text-soft);
    margin-bottom: 0.2em;
    text-transform: uppercase;
}
.posts-navigation .nav-title {

    font-weight: bold;
    color: var(--site-color-text-dark-safe);
}

/* Comments */
.comments-area {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--site-color-border-light);
}
.comment-list {
    list-style: none;
    padding: 0;
}
.comment-list .comment {
    margin-bottom: 2em;
    border-bottom: 1px dotted var(--site-color-border-medium);
}
.comment-list .children {
    list-style: none;
    padding-left: 2em;
}

/* Remove border from the last comment to avoid double lines or an extra line at the end */
.comment-list .comment:last-child {
    border-bottom: none;
}

/* Comment Author and Avatar */
.comment-author.vcard {
    display: flex; 
    align-items: center; 
    /* margin-bottom: -1em; */
}
.comment-author.vcard img { /* Avatar */
    border-radius: var(--site-image-border-radius, 12px);
    margin-right: 10px;
}

/* Align comment content and actions with the author's name */
.comment-body .comment-content,
.comment-body .comment-actions,
.comment-body .comment-meta > p.comment-awaiting-moderation { /* Also align moderation message */
    /* Calculate the offset: avatar width (56px) + avatar margin-right (10px) */
    margin-left: calc(56px + 10px);
}

.comment-content p {
    margin: 0 0 0.5em; /* Add bottom margin for spacing */
    line-height: 1.6; /* Improve readability */
}

/* Style for the date next to the author in comments */
.comment-metadata a { 
    font-size: 0.8em; 
    margin-left: 1em;
    color: var(--site-color-accent-secondary);
}

/* Styles for comment action links (Reply, Edit) */
.comment-actions {
    display: flex; 
    gap: 1em; 
    margin-bottom: 1.5em; 
    font-size: 0.9em; 
}

.comment-actions a {
    text-decoration: none;
    /* color: var(--site-color-text); */
    transition: color 0.3s ease;
}

.comment-actions a:hover {
    color: var(--site-color-text); /* Change color on hover */
}

.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 5px; /* Add space between checkbox and label */
}

.comment-form .comment-form-cookies-consent label {
    margin-bottom: 0;
}

/* Style for the "Contactez-moi" button on the 'Ma Présentation' page */
.contact-me-button-wrapper {
    text-align: center; /* Center the button */
    margin-top: 3em; /* Space above the button */
    margin-bottom: 2em; /* Space below the button */
}

/* Button visuals are centralized in `css/04-components.css` (base `.button` and `.wp-block-button__link`). */

/* Comment reply/link button visuals are centralized in `css/04-components.css` */

.entry-meta, .entry-meta a {
    /* margin-top: 1em; */
    margin-bottom: 1.5em;
    font-size: 0.9em;
    /* color: var(--site-color-accent-secondary); */
}

/* Article Footer (entry-footer) */
.entry-footer {
    margin-top: 1.5em;
    padding-top: 1em;
    /* border-top: 1px solid var(--site-color-border-light); */
    font-size: 0.9em;
    color: var(--site-color-text);
}
.entry-footer span {
    display: inline-block;
    margin-right: 1em;
    margin-bottom: 0.5em;
}

/* Style for the "Retour au Blog" button at the top of the article */
body.single .article-top-navigation .button-back-to-blog,
body.archive .article-top-navigation .button-back-to-blog {
    display: inline-block; /* Default button behavior */
    margin-top: 3.5em;
    margin-bottom: 1.5em; /* Space before the start of the article content */
}

/* Navigation under articles (single.php) */
.article-navigation-footer {
    margin-top: 2em;
    margin-bottom: 2em;
    padding-top: 1.5em;
    border-top: 1px solid var(--site-color-border-light);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.button-back-to-blog { /* This is an <a> tag styled as a button */
    background-color: transparent;
    color: var(--site-color-text);
    border: 1px solid var(--site-color-text);
    padding: 8px 15px;
    font-size: 0.9em;
}
.button-back-to-blog:hover {
    background-color: transparent;
    color: var(--accent-main, var(--accent-text));
    border-color: var(--accent-main, var(--accent-text));
}

/* Post Navigation (next/previous posts) */
/* This is used on single post pages to navigate to the next or previous post */
.post-navigation {     
    width: 100%;
}
.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}
.post-navigation .nav-links > div {
    flex: 1;
}
.post-navigation .nav-previous { text-align: left; }
.post-navigation .nav-next { text-align: right; }
.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.85em;
    /* color: var(--site-color-text-soft); */
    margin-bottom: 0.2em;
    text-transform: uppercase;
}
.post-navigation .nav-title {
    font-weight: bold;
    color: var(--site-color-text);
}
.post-navigation a {
    color: var(--site-color-text);
    text-decoration: none;
    display: block;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: var(--site-image-border-radius, 12px);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; /* Added transitions */
}
.post-navigation a:hover {
    color: var(--site-color-text);     
    background-color: rgba(var(--site-color-accent-secondary-rgb), 0.2);
    border-color: var(--site-color-accent-secondary);
    border-radius: var(--site-image-border-radius, 12px);
}

/* Centering for the Gutenberg Buttons block (the container for one or more buttons) */
.entry-content .wp-block-buttons {
    justify-content: center; /* Centers the individual buttons within the flex container */
    /* Gutenberg's default styles (is-layout-flex) already apply display: flex */
}

/* Spacing for Gutenberg Button blocks within post content */
.entry-content .wp-block-button {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    /* font-size: 0.9em; */
}

/* Remove default left padding for latest comments list (Gutenberg block) */
.wp-block-latest-comments {
    padding-inline-start: 0;
    margin-left: 0;
    list-style: none;
}

/* Remove padding and list-style for archives block */
.wp-block-archives-list,
.wp-block-archives {
    padding-inline-start: 0;
    margin-left: 0;
    list-style: none;
}


/* Link Preview Card / Embed Styles */
.sandco-link-preview {
    max-width: 100%;
    margin: 1rem 0;
    font-family: inherit;
    color: inherit;
}

.sandco-link-preview--card .sandco-link-preview__link {
    display: flex;
    gap: 0.75rem;
    align-items: center; /* keep card compact and vertically centered */
    text-decoration: none;
    background: var(--site-color-surface, #ffffff);
    border: 1px solid var(--site-color-border-light, #e6e6e6);
    border-radius: var(--site-image-border-radius, 12px);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sandco-link-preview--card .sandco-link-preview__link:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.sandco-link-preview__media {
    flex: 0 0 110px;
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    height: 110px;
    min-height: 110px;
    background: var(--site-color-neutral, #f7f7f7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sandco-link-preview__media img {
    width: 100%;
    height: 100%;
    max-width: 110px;
    max-height: 110px;
    object-fit: cover;
    display: block;
}

.sandco-link-preview__body {
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sandco-link-preview__title {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--site-color-text-dark-safe);
}
.sandco-link-preview__desc {
    margin: 0 0 0.5rem 0;
    color: var(--site-color-text-soft);
    font-size: 0.92rem;
}
.sandco-link-preview__host {
    margin-top: auto;
    font-size: 0.78rem;
    color: var(--site-color-text-soft);
}

.sandco-link-preview--fallback a {
    display: inline-block;
    padding: 0.5rem 0.25rem;
    color: var(--site-color-text-dark-safe);
    text-decoration: underline;
}

/* Embed responsive wrapper (e.g., heyzine) */
.sandco-preview-embed-wrap {
    position: relative;
    padding-top: 66.66%; /* slightly taller than 16:9 for better visibility */
    height: 0;
    overflow: hidden;
    border-radius: var(--site-image-border-radius, 12px);
    border: 1px solid var(--site-color-border-light, #e6e6e6);
    max-height: 700px;
    min-height: 320px; /* ensure reasonable visible height even in narrow containers */
}
.sandco-preview-embed-wrap iframe {
    min-height: 320px; /* defend against very small iframe renderings */
}
.sandco-preview-embed-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media screen and (max-width: 600px) {
    .sandco-link-preview--card .sandco-link-preview__link {
        flex-direction: column;
    }
    .sandco-link-preview__media {
        width: 100%;
        max-width: 100%;
        height: 180px;
        flex: none;
    }
    .sandco-link-preview__media img {
        max-width: 100%; 
        max-height: 100%;
    }
    .sandco-preview-embed-wrap {
        padding-top: 56.25%; /* use 16:9 on small screens */
    }
}

/* Fix featured image responsiveness on small screens */
@media screen and (max-width: 768px) {
    body.single .post-thumbnail,
    body.blog article.post .post-thumbnail,
    body.archive .post-thumbnail,
    body.search .post-thumbnail {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    body.single .post-thumbnail img,
    body.blog article.post .post-thumbnail img,
    body.archive .post-thumbnail img,
    body.search .post-thumbnail img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: cover;
        display: block;
    }
}

    

/* ---------- Carte de vente (composition Gutenberg) ---------- */
/* Ajoutez la classe 'carte-produit' au bloc Group / Columns de la composition. */
.carte-produit {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    border-radius: var(--site-image-border-radius, 12px);
}

.carte-produit .wp-block-columns.is-layout-flex {
    margin-bottom: 1rem;
    display: flex;
    /* gap: 1.5rem; */
    align-items: center;
    flex-wrap: wrap;
}

.carte-produit .wp-block-column:nth-child(1) {
    padding: 0;
}

.carte-produit .wp-block-column:nth-child(2) {
    /* box-sizing: border-box; */
    padding: 0;
    box-shadow: none;
}


/* .carte-produit .wp-block-heading {
    text-align: center;
    font-size: 1.6rem;
    margin: 0.5rem 0 1rem;
    color: var(--site-color-text, #222);
} */

.carte-produit .wp-block-image {
    margin-bottom: 0;
    /* width: 100%; */
    /* height: auto; */
    /* display: block; */
    /* border-radius: 8px; */
}

@media screen and (max-width: 768px) {
    /* Quand les colonnes s'empilent en mobile, ajouter de l'espace entre le titre (ou le gradient de la colonne externe) et l'image empilée */
    .carte-produit .wp-block-columns .wp-block-column .wp-block-image,
    .carte-produit .wp-block-image {
        margin-top: 1rem; /* ajuster si besoin */
    }

    /* Forcer les colonnes et la carte à 100% de largeur dans la zone de contenu en mobile */
    .carte-produit {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    .carte-produit .wp-block-columns.is-layout-flex {
        display: block; /* empilé */
    }

    .carte-produit .wp-block-column {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .carte-produit .wp-block-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Quand la colonne externe a un background (dégradé), ajouter un padding pour
       que le titre et le contenu ne soient pas collés au bord du dégradé en mobile */
    .carte-produit > .wp-block-column.has-background {
        padding: 1rem;
        box-sizing: border-box;
    }

    /* Espacement entre le titre / zone supérieure et les colonnes imbriquées empilées */
    .carte-produit .wp-block-columns.is-layout-flex {
        margin-top: 1rem;
    }
}

/* .carte-produit .wp-block-buttons .wp-block-button__link {
    background: linear-gradient(90deg, #9b51e0 0%, #efcc61 100%);
    color: #fff;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
} */

/* .carte-produit p {
    color: var(--site-color-text-muted, #444);
} */

/* Appliquer uniquement le radius et l'ombre à la colonne extérieure */
.carte-produit > .wp-block-column {
    border-radius: var(--site-image-border-radius, 12px);
    box-shadow: none;
    overflow: hidden; /* clip children to the radius */
    /* Ne pas écraser le background inline : laisser l'auteur du bloc gérer le fond */
}