/*
Theme Name: Slateways Type B
Theme URI: https://slateways.fr
Author: Slateways
Author URI: https://slateways.fr
Description: Theme blog Type B. Le chrome (header/footer/logo/boutons) est delegue au styles.css du front (classes .main-header/.main-footer partagees) pour un rendu pixel-identique ; le theme ne style que le specifique blog (barre categories, hero, listing, article, sidebar, pagination) en consommant les tokens du front avec fallbacks.
Version: 1.4.1
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: slateways-typeb
*/

/* ============================================================================
   SOMMAIRE
   1. Base & layout     2. Barre categories     3. Hero blog + breadcrumb
   4. Listing articles  5. Article (single)     6. Pagination
   7. Utilities         8. Responsive (mobile-first ; 768px ; 1024px)
   Chrome (header/footer/logo/btn) = styles.css du front. Ici : specifique blog.
   Convention : tokens du front en var(--x, fallback). Mobile-first.
   ============================================================================ */

/* ============================================================================
   1. BASE & LAYOUT
   ============================================================================ */
body {
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--dark-color, #E8E8EA);
    background: var(--light-color, #0E0E12);
    line-height: 1.6;
    margin: 0;
}
.container {
    width: 100%;
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 0 1.25rem;
    box-sizing: border-box;
}
.section { padding: 2.5rem 0; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    color: var(--dark-color, #E8E8EA);
    line-height: 1.25;
}
a {
    color: var(--primary-color, #FF5C3A);
    text-decoration: none;
    transition: color var(--transition-fast, .2s ease);
}
a:hover { color: var(--primary-hover, #FF7E60); }
img { max-width: 100%; height: auto; }

/* ============================================================================
   2. BARRE CATEGORIES (specifique blog ; absente du front)
   ============================================================================ */
.blog-categories {
    background: var(--surface, #16161C);
    border-bottom: 1px solid var(--gray-200, #26262E);
}
.category-pills {
    display: flex;
    gap: .6rem;
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: .85rem 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }
.category-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .95rem;
    border-radius: 99px;
    font-size: .85rem;
    font-weight: 600;
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    color: var(--gray-800, #D8D8DC);
    background: var(--gray-100, #1E1E26);
    border: 1px solid var(--gray-200, #26262E);
    white-space: nowrap;
    transition: all var(--transition-fast, .2s ease);
}
.category-pill:hover {
    color: var(--primary-color, #FF5C3A);
    border-color: var(--primary-color, #FF5C3A);
}
.category-pill.active {
    color: var(--on-primary, #0E0E12);
    background: var(--primary-color, #FF5C3A);
    border-color: var(--primary-color, #FF5C3A);
}
@media (min-width: 768px) {
    .category-pills { padding: 1rem 1.5rem; flex-wrap: wrap; justify-content: center; }
}

/* ============================================================================
   3. HERO BLOG + BREADCRUMB
   ============================================================================ */
.guide-hero {
    background: linear-gradient(160deg, var(--surface, #16161C), var(--light-color, #0E0E12));
    color: var(--white, #F5F5F7);
    padding: 2.75rem 0;
}
.guide-hero .container { width: 100%; }
.guide-hero h1 { color: var(--white, #F5F5F7); font-size: 1.9rem; margin: .4rem 0 0; }
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    font-size: .82rem; color: rgba(255, 255, 255, .8); margin-bottom: .4rem;
}
.breadcrumb a { color: rgba(255, 255, 255, .9); }
.breadcrumb a:hover { color: var(--white, #F5F5F7); text-decoration: underline; }
.breadcrumb-sep { opacity: .6; }
.guide-hero-meta {
    display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .9rem;
    font-size: .88rem; color: rgba(255, 255, 255, .9);
}
.guide-hero-meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* ============================================================================
   4. LISTING ARTICLES (cards)
   ============================================================================ */
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.guide-card {
    display: flex; flex-direction: column;
    background: var(--surface, #16161C);
    border: 1px solid var(--gray-200, #26262E);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.04));
    transition: transform var(--transition-fast, .2s ease), box-shadow var(--transition-fast, .2s ease);
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 10px 30px rgba(0,71,110,.08)); }
.guide-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.guide-card-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.guide-card-difficulty {
    display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--primary-color, #FF5C3A); background: var(--gray-100, #1E1E26);
    padding: .25rem .6rem; border-radius: 99px;
}
.guide-card-title { font-family: var(--font-heading, 'Space Grotesk', sans-serif); font-size: 1.15rem; margin: 0; line-height: 1.3; }
.guide-card-title a { color: var(--dark-color, #E8E8EA); }
.guide-card-title a:hover { color: var(--primary-color, #FF5C3A); }
.guide-card-desc { color: var(--gray-600, #9A9AA2); font-size: .92rem; margin: 0; flex: 1; }
.guide-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .4rem; padding-top: .8rem; border-top: 1px solid var(--gray-100, #1E1E26);
}
.guide-card-time { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--gray-600, #9A9AA2); }
.card-read-more { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .88rem; color: var(--primary-color, #FF5C3A); }
.card-read-more:hover { gap: .5rem; }

/* ============================================================================
   5. ARTICLE (single) : layout + corps + sidebar
   ============================================================================ */
.guide-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.25rem; }
.guide-content { min-width: 0; font-size: 1rem; color: var(--dark-light, #C7C7CB); line-height: 1.75; }
.guide-content > *:first-child { margin-top: 0; }
.guide-content h2 { font-family: var(--font-heading, 'Space Grotesk', sans-serif); font-size: 1.6rem; margin: 2rem 0 .8rem; color: var(--dark-color, #E8E8EA); }
.guide-content h3 { font-family: var(--font-heading, 'Space Grotesk', sans-serif); font-size: 1.3rem; margin: 1.6rem 0 .6rem; color: var(--dark-color, #E8E8EA); }
.guide-content h4 { font-size: 1.08rem; font-weight: 700; margin: 1.3rem 0 .5rem; color: var(--dark-color, #E8E8EA); }
.guide-content p { margin: 0 0 1.1rem; }
.guide-content a { color: var(--primary-color, #FF5C3A); text-decoration: underline; text-underline-offset: 2px; }
.guide-content a:hover { color: var(--primary-hover, #FF7E60); }
.guide-content ul, .guide-content ol { margin: 0 0 1.2rem 1.4rem; padding-left: .4rem; }
.guide-content li { margin-bottom: .45rem; }
.guide-content strong { color: var(--dark-color, #E8E8EA); }
.guide-content blockquote {
    margin: 1.5rem 0; padding: .9rem 1.3rem;
    border-left: 4px solid var(--primary-color, #FF5C3A);
    background: var(--gray-100, #1E1E26); border-radius: var(--radius-sm, 6px);
    color: var(--gray-600, #9A9AA2); font-style: italic;
}
.guide-content blockquote p:last-child { margin-bottom: 0; }
.guide-content img { border-radius: var(--radius-md, 12px); margin: 1.5rem 0; }
.guide-content figure { margin: 1.5rem 0; }
.guide-content figure img { margin: 0; }
.guide-content figcaption { font-size: .82rem; color: var(--gray-600, #9A9AA2); text-align: center; margin-top: .5rem; }
.guide-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .92rem; border: 1px solid var(--gray-200, #26262E); }
.guide-content th, .guide-content td { padding: .65rem .9rem; border: 1px solid var(--gray-200, #26262E); text-align: left; vertical-align: top; }
.guide-content th { background: var(--gray-100, #1E1E26); color: var(--dark-color, #E8E8EA); font-weight: 700; font-family: var(--font-heading, 'Space Grotesk', sans-serif); }
.guide-content tbody tr:nth-child(even) td { background: var(--light-color, #0E0E12); }
.guide-content code { background: var(--gray-100, #1E1E26); padding: .12rem .4rem; border-radius: var(--radius-sm, 6px); font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--primary-hover, #FF7E60); }
.guide-content pre { background: var(--light-color, #0E0E12); color: var(--white, #F5F5F7); padding: 1.1rem 1.2rem; border-radius: var(--radius-md, 12px); overflow: auto; margin: 1.5rem 0; }
.guide-content pre code { background: none; color: inherit; padding: 0; }
.guide-content hr { border: 0; border-top: 1px solid var(--gray-200, #26262E); margin: 2rem 0; }
.guide-sidebar { min-width: 0; }
.guide-sidebar-card { background: var(--surface, #16161C); border: 1px solid var(--gray-200, #26262E); border-radius: var(--radius-md, 12px); padding: 1.3rem; box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.04)); }
.guide-sidebar-card h4 { font-family: var(--font-heading, 'Space Grotesk', sans-serif); font-size: 1.05rem; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--gray-200, #26262E); }
.sidebar-list { display: flex; flex-direction: column; gap: .2rem; }
.sidebar-list a { display: flex; align-items: flex-start; gap: .5rem; padding: .55rem 0; font-size: .9rem; color: var(--dark-light, #C7C7CB); border-bottom: 1px solid var(--gray-100, #1E1E26); line-height: 1.4; }
.sidebar-list a:last-child { border-bottom: none; }
.sidebar-list a:hover { color: var(--primary-color, #FF5C3A); }
.sidebar-list a [data-lucide] { flex-shrink: 0; margin-top: 2px; color: var(--primary-color, #FF5C3A); }

/* --- Image vedette (featured image, sous le hero) --- */
.featured-image-wrap { max-width: var(--max-width, 1200px); margin: 0 auto; padding: 1.5rem 1.25rem 0; }
.featured-image-wrap img, .featured-image {
    width: 100%; height: 250px; object-fit: cover;
    border-radius: var(--radius-md, 12px); display: block;
}
@media (min-width: 1024px) { .featured-image-wrap img, .featured-image { height: 400px; } }

/* --- Embeds responsives (YouTube/oEmbed dans le corps d'article) --- */
.guide-content .wp-block-embed { margin: 1.5rem 0; }
.guide-content iframe {
    width: 100%; aspect-ratio: 16 / 9; height: auto;
    border: 0; border-radius: var(--radius-md, 12px); display: block;
}
.guide-content .wp-block-embed iframe { margin: 0; }

/* ============================================================================
   6. PAGINATION (the_posts_pagination)
   ============================================================================ */
.navigation.pagination { padding: 1.5rem 0 .5rem; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.navigation.pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 .6rem;
    border: 1px solid var(--gray-200, #26262E); border-radius: var(--radius-sm, 6px);
    color: var(--dark-color, #E8E8EA); font-weight: 600; background: var(--surface, #16161C);
}
.navigation.pagination .page-numbers:hover { border-color: var(--primary-color, #FF5C3A); color: var(--primary-color, #FF5C3A); }
.navigation.pagination .page-numbers.current { background: var(--primary-color, #FF5C3A); border-color: var(--primary-color, #FF5C3A); color: var(--on-primary, #0E0E12); }

/* ============================================================================
   7. UTILITIES
   ============================================================================ */
.reveal-on-scroll { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal-on-scroll.revealed { opacity: 1; transform: none; }

/* ============================================================================
   8. RESPONSIVE (mobile-first ; tablette 768px ; desktop 1024px)
   ============================================================================ */
@media (min-width: 768px) {
    .container { padding: 0 1.5rem; }
    .section { padding: 3rem 0; }
    .guide-hero { padding: 3.25rem 0; }
    .guide-hero h1 { font-size: 2.3rem; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cards-grid { grid-template-columns: repeat(3, 1fr); }
    .guide-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 2.75rem; padding: 3rem 1.5rem; }
    .guide-sidebar-card { position: sticky; top: 88px; }
    .guide-hero h1 { font-size: 2.5rem; }
}