/*
 Theme Name:   Blogus Child
 Theme URI:    https://exemple.com/
 Description:  Thème enfant de Blogus
 Author:       Florent Tassel
 Template:     blogus
 Version:      1.0.0
 Text Domain:  blogus-child
*/

.site-logo img {
    max-height: 60px;
    height: auto;
    width: auto;
}

@media (max-width: 600px) {
    .bs-default .navbar-wp {
        margin: 10px 0 20px 0;
    }
}
.bs-default .bs-header-main .inner {
    padding: 30px 0 0;
}
.mainfeatured.mb-4 {
    margin-bottom: 0 !important;
}

.bs-social li:nth-child(4) i {
    background: #14171a;
}

.footer-logo {
    display: flex;
    align-items: top;
    justify-content: flex-start;
}
.footer-logo .custom-logo {
    width: auto;
    max-height: 100%
}
.footer-logo .site-logo .navbar-brand {
    margin-right: 20px
}

@media (max-width: 600px) {
    .footer-logo .site-logo .navbar-brand {
        margin-right: 0;
    }
}

.footer {
    box-shadow: 0 -2px 6px rgba(0,0,0,0.05);
}

.bs-menu-full .navbar-nav,
.bs-blog-post,
.bs-widget,
.bs-breadcrumb-section .overlay,
.bs-card-box.page-entry-title,
.page .bs-card-box,
.bs-single-related,
.bs-info-author-block,
.bs-card-box.comments-area,
.missed .wd-back,
.bs-card-box img,
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre,
.navigation.pagination .nav-links .page-numbers.current, .navigation.pagination .nav-links a:hover, a.error-btn, .post-nav-links a,
.navigation.pagination .nav-links .page-numbers, .navigation.pagination .nav-links a, .post-nav-links a{
    border-radius: 6px !important;
}

.bs-blog-post.single .small p {
    margin-bottom: 10px !important;
}

.wp-block-kevinbatdorf-code-block-pro {
    margin-bottom: 20px;
}

blockquote {
    padding: 10px;
}

.bs-menu-full .navbar-nav li {
    transition: all 0.2s ease;
}
.bs-menu-full .navbar-nav li:hover {
    background: #001dc5;
}
.bs-menu-full .navbar-nav li:hover:first-child {
    border-radius: 6px 0 0 6px;
}
.bs-menu-full .navbar-nav li:hover:last-child {
    border-radius: 0 6px 6px 0;
}
@media (max-width: 600px) {
    .bs-menu-full .navbar-nav li:hover:first-child {
        border-radius: 6px 6px 0 0;
    }
    .bs-menu-full .navbar-nav li:hover:last-child {
        border-radius: 0 0 6px 6px;
    }
}
.bs-menu-full .navbar-nav .dropdown-menu li:first-child .dropdown-item {
    border-radius: 0 6px 0 0;
}
.bs-menu-full .navbar-nav .dropdown-menu li:last-child .dropdown-item {
    border-radius: 0 0 6px 6px;
}
@media (min-width: 992px) {
    .bs-default .navbar-collapse ul.dropdown-menu {
        background: none !important;
    }
}
@media (max-width: 991.98px) {
    .navbar-wp .navbar-nav>li>a.nav-link, .navbar-wp .dropdown-menu>li>a {
        padding: 13px;
        display: block;
        border-bottom: 1px solid rgba(225, 225, 225, .4);
    }

    #menu-menu-principal {
        margin-top: 20px
    }
}
@media (min-width: 991.99px) and (max-width: 1999px) {
    .site-branding-text .site-title {
        font-size: 40px;
    }
}

/* Text color */
body,
.bs-blog-post .small,
.bs-blog-meta,
.bs-blog-meta a,
.bs-sidebar .bs-widget ul li a {
    color: #464f5b;
}

/* Fields */
.wp-block-search__input, .search-field {
    border-radius: 8px 0 0 8px !important;
}
.wp-block-search__button, .search-submit {
    border-radius: 0 8px 8px 0 !important;
}

.comment-form textarea, .comment-form input {
    border-radius: 6px;
}

/* Blog post list */
.list-blog.bs-blog-post {
    align-items: flex-start;
}

.list-blog .bs-blog-thumb {
    background-size: cover !important;
    width: 200px;
    height: 200px;
    max-width: auto;
    min-width: auto;
    min-height: auto;
}
.bs-blog-post {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important;
}

/* Post images */
.bs-blog-thumb {
    padding: 0 20px;
}
.bs-blog-thumb img {
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.wp-block-image img {
    border-radius: 8px;
    border: 1px solid #eee;
}
.bs-article-gallery-space {
    margin: 0 0 1em;
}

/* Block gallery */
.wp-block-gallery { gap: 20px; }

@media (max-width: 768px) {
    .wp-block-gallery {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--wp--style--gallery-gap, 16px) !important;
    }
    .wp-block-gallery .wp-block-image {
        max-width: 100% !important;
    }
    .wp-block-gallery.has-nested-images figure.wp-block-image,
    .wp-block-gallery figure.wp-block-image {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Widget posts */
.bs-blog-thumb.back-img, .bs-blog-post.back-img {
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.bs-blog-post:hover .bs-blog-thumb.back-img, .bs-blog-post.back-img {
    box-shadow: 0 12px 28px rgba(0,0,0,.12) !important;
}
.bs-blog-category a {
    border-radius: 20px;
}
.more-link {
    border-radius: 6px;
}

/* Blog article item in list */
.bs-blog-category {
    margin-bottom: 5px
}
.bs-blog-post .title {
    margin-bottom: 0
}
.bs-blog-post .bs-blog-meta {
    margin-bottom: 10px;
}

.bs-widget-title .title {
    text-transform: none;
}

/* Blog article */
.bs-blog-post a,
.page-class .bs-card-box a {
    text-decoration: none;
}
.bs-blog-post .small.single a, .bs-blog-post p a {
    text-decoration: none;
}

.tldr-container .wp-block-group__inner-container {
    display: grid;
    gap: 20px;
    margin: 20px 0;
}
@media (min-width: 900px){
    .tldr-container .wp-block-group__inner-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tldr-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.tldr-card-short {
    background-color: #fcfcfc;
    margin-bottom: 1rem;
    padding: 15px;
}
.tldr-card-short p {
    margin-bottom: 0;
}
.tldr-card h3 {
    margin-top: 0;
    font-size: 1.2em;
    color: #444;
}
.tldr-card ul {
    margin: 0;
    padding-left: 20px;
}

.post-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
}
.post-table table th {
    background-color: #f0f0f0;
    text-align: left;
    padding: 10px;
}
.post-table table td {
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
}
.post-table table tr:nth-child(odd) {
    background-color: #fff;
}
.post-table table tr:nth-child(even) {
    background-color: #fafafa;
}

.wp-block-table.post-table th {
    border: 1px solid #999;
}


.stats-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}
.stats-card .post-table,
.stats-card .post-table table {
    margin: 0;

}
.stats-card .post-table table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}
.stats-card .post-table table thead tr:first-child th:first-child {
    border-top-left-radius: 8px;
}
.stats-card .post-table table thead tr:first-child th:last-child {
    border-top-right-radius: 8px;
}
.stats-card .post-table table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}
.stats-card .post-table table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.wp-block-columns-nospace {
    margin-bottom: 0px !important;
}

/* Page content justify */
.page.type-page p,
.long-article .bs-blog-post.single p {
    text-align: justify;
    hyphens: auto;
}
@media (max-width: 600px) {
    .page.type-page p,
    .long-article .bs-blog-post.single p {
        hyphens: none;
        text-align: left;
    }
}

/* Cloud tags */
.widget_tag_cloud .tagcloud a,
.wp-block-tag-cloud a {
    display:inline-block;
    background:#f2f2f2;
    color:#333;
    padding:4px 8px;
    margin:6px 8px 0 0;
    border-radius:9999px;
    text-decoration:none;
    font-weight:500;
    line-height:1.2;
}
.widget_tag_cloud .tagcloud a:hover,
.wp-block-tag-cloud a:hover {
    background:#e9e9e9;
    color:#111;
}

/* WIDGETS */

/* About me */
.wdv-container .about-description {
    text-align: center;
}
.wdv-header a .about-link,
.wdv-container .about-description {
    margin-top: 0;
}
.wdv-header a {
    font-size: 12px;
    text-decoration: none !important;
}

@media (min-width: 769px) {
    .mobile-sticky-placeholder {
        display: none !important;
    }
}

/* Menu sticky sur mobile */
@media (max-width: 768px){
    /* Header sticky */
    .bs-default{
        z-index: 1000;
        /* évite les sauts quand le style change */
        box-shadow: none;
        background: var(--wrap-color);
        transition: box-shadow .2s ease;
    }

    /* Ligne du haut (hamburger/logo/recherche) */
    .bs-default.is-sticky .m-header{
        display: grid;
        grid-template-columns: 40px 1fr 40px;
        align-items: center;
        gap: 8px;
        padding:0 12px;
    }

    /* Styles en état sticky */
    .bs-default.is-sticky {
        position: fixed;
        top: calc(var(--admin-offset, 0px) + env(safe-area-inset-top));
        left: 0; right: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }

    .bs-default.is-sticky .navbar-wp .navbar-brand {
        padding: 0;
    }


    /* Quand sticky : on masque le nom + sous-titre */
    .bs-default.is-sticky .site-branding-text {
        height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .bs-default.is-sticky .right-nav a {
        width: 30px;
        height: 30px;
    }

    .bs-default.is-sticky .navbar {
        margin: 0;
    }

    /* Optionnel : réduire un peu le logo en sticky */
    .bs-default .site-logo img{
        transition: transform .2s ease;
    }
    .bs-default.is-sticky .site-logo img{
        height: 50px;
        transform: scale(.92);
    }
}

@media (max-width: 600px){
    .bs-default.is-sticky {
        top: 0;
    }
}

/* ====== SECTION "À LA UNE" — style clair, comme la liste ====== */
.featured-posts {
    margin: 0 0 2rem;
}
.featured-posts > h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    color: #1e293b;
    font-weight: 600;
}
.featured-posts > h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: #1d4ed8;
    margin-top: 6px;
    border-radius: 2px;
}

/* Grille */
.featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .featured-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Carte */
.featured-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0/15%);
}
.featured-item:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
    border: none;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transform: translateY(-3px);
}

/* Lien global (image + titre) */
/* Le lien devient un conteneur positionné pour accueillir le h3 en overlay */
.featured-item > a {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden; /* masque le dégradé dans les coins arrondis */
    border-radius: 8px 8px 0 0;
}

/* Dégradé en bas de l'image (derrière le h3) */
.featured-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 1;
}

/* Image */
.featured-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    /* plus de bordure ici, l'image touche le blanc du bloc p */
    border-bottom: none;
}

/* Titre flottant sur l'image */
.featured-item h3 {
    position: absolute;
    left: 0;
    right: 1rem;
    bottom: 0.9rem;
    margin: 0;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.3rem);
    margin: 0.9rem 1rem 0.4rem;
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.3rem);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.featured-item a:hover h3 {
    color: #f6f6f6;
}

/* Survol : on éclaire un peu l'image */
.featured-item:hover img {
    filter: brightness(1.05);
}

/* Description : reste sur fond blanc sous l'image */
.featured-item p {
    margin: 0 1rem 1rem;
    padding-top: 0.75rem; /* petit souffle par rapport à l’image */
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.05rem);
    color: #374151;
    line-height: 1.55;
    opacity: 0.95;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 1rem 1rem;
    font-size: 0.97rem;
    color: #374151;
    line-height: 1.55;
    opacity: 0.95;
}

/* ===== Slider horizontal “peek” ===== */
/* Desktop ≥1025px : ta grille 2/3 colonnes reste inchangée */

/* Palier TABLETTE : 768–1024 px  → cartes ~66% (2/3 d'écran) */
@media (max-width: 1024px) and (min-width: 641px) {
    .featured-posts {
        position: relative;
    }

    .featured-grid {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        padding: 0;
        margin: 0; /* bord à bord */
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1rem;
        -webkit-overflow-scrolling: touch;
    }
    .featured-grid::-webkit-scrollbar {
        display: none;
    }

    .featured-item {
        flex: 0 0 45%;
        max-width: 66%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border-radius: 14px;
    }

    /* image un peu plus haute que mobile */
    .featured-item img {
        height: 220px;
    }

    /* texte sous l'image, plus concis */
    .featured-item::after {
        display: none;
    }
    .featured-item h3 {
        margin: 0.8rem 1rem 0.3rem;
    }
    .featured-item p {
        margin: 0 1rem 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 2 lignes sur tablette */
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Palier MOBILE : ≤640 px  → cartes ~84–86% */
@media (max-width: 640px) {
    .featured-posts {
        position: relative;
    }

    .featured-grid {
        display: flex;
        gap: 0.9rem;
        overflow-x: auto;
        padding: 0;
        margin: 0;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0.9rem;
        -webkit-overflow-scrolling: touch;
    }
    .featured-grid::-webkit-scrollbar {
        display: none;
    }

    .featured-item {
        flex: 0 0 86%;
        max-width: 86%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .featured-item img {
        height: 200px;
    }

    .featured-item::after {
        display: none;
    }
    .featured-item h3 {
        margin: 0.8rem 1rem 0.3rem;
    }
    .featured-item p {
        margin: 0 1rem 1rem;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}