/* 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.3.8 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, 'Source Serif 4', sans-serif); color: var(--dark-color, #1A1A1A); background: var(--light-color, #E8E2D6); 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, 'Archivo', sans-serif); color: var(--dark-color, #1A1A1A); line-height: 1.25; } a { color: var(--primary-color, #C8531E); text-decoration: none; transition: color var(--transition-fast, .2s ease); } a:hover { color: var(--primary-hover, #A84316); } img { max-width: 100%; height: auto; } /* ============================================================================ 2. BARRE CATEGORIES (specifique blog ; absente du front) ============================================================================ */ .blog-categories { background: var(--white, #FFFFFF); border-bottom: 1px solid var(--gray-200, #CFC7B5); } .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, 'Archivo', sans-serif); color: var(--gray-800, #0F0F0F); background: var(--gray-100, #DDD6C7); border: 1px solid var(--gray-200, #CFC7B5); white-space: nowrap; transition: all var(--transition-fast, .2s ease); } .category-pill:hover { color: var(--primary-color, #C8531E); border-color: var(--primary-color, #C8531E); } .category-pill.active { color: var(--white, #FFFFFF); background: var(--primary-color, #C8531E); border-color: var(--primary-color, #C8531E); } @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(135deg, var(--primary-hover, #A84316), var(--primary-color, #C8531E)); color: var(--white, #FFFFFF); padding: 2.75rem 0; } .guide-hero .container { width: 100%; } .guide-hero h1 { color: var(--white, #FFFFFF); 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, #FFFFFF); 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(--white, #FFFFFF); border: 1px solid var(--gray-200, #CFC7B5); 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, #C8531E); background: var(--gray-100, #DDD6C7); padding: .25rem .6rem; border-radius: 99px; } .guide-card-title { font-family: var(--font-heading, 'Archivo', sans-serif); font-size: 1.15rem; margin: 0; line-height: 1.3; } .guide-card-title a { color: var(--dark-color, #1A1A1A); } .guide-card-title a:hover { color: var(--primary-color, #C8531E); } .guide-card-desc { color: var(--gray-600, #6C6760); 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, #DDD6C7); } .guide-card-time { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--gray-600, #6C6760); } .card-read-more { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .88rem; color: var(--primary-color, #C8531E); } .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, #4A453E); line-height: 1.75; } .guide-content > *:first-child { margin-top: 0; } .guide-content h2 { font-family: var(--font-heading, 'Archivo', sans-serif); font-size: 1.6rem; margin: 2rem 0 .8rem; color: var(--dark-color, #1A1A1A); } .guide-content h3 { font-family: var(--font-heading, 'Archivo', sans-serif); font-size: 1.3rem; margin: 1.6rem 0 .6rem; color: var(--dark-color, #1A1A1A); } .guide-content h4 { font-size: 1.08rem; font-weight: 700; margin: 1.3rem 0 .5rem; color: var(--dark-color, #1A1A1A); } .guide-content p { margin: 0 0 1.1rem; } .guide-content a { color: var(--primary-color, #C8531E); text-decoration: underline; text-underline-offset: 2px; } .guide-content a:hover { color: var(--primary-hover, #A84316); } .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, #1A1A1A); } .guide-content blockquote { margin: 1.5rem 0; padding: .9rem 1.3rem; border-left: 4px solid var(--secondary-color, #1A1A1A); background: var(--gray-100, #DDD6C7); border-radius: var(--radius-sm, 6px); color: var(--gray-600, #6C6760); 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, #6C6760); 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, #CFC7B5); } .guide-content th, .guide-content td { padding: .65rem .9rem; border: 1px solid var(--gray-200, #CFC7B5); text-align: left; vertical-align: top; } .guide-content th { background: var(--gray-100, #DDD6C7); color: var(--dark-color, #1A1A1A); font-weight: 700; font-family: var(--font-heading, 'Archivo', sans-serif); } .guide-content tbody tr:nth-child(even) td { background: var(--light-color, #E8E2D6); } .guide-content code { background: var(--gray-100, #DDD6C7); 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, #A84316); } .guide-content pre { background: var(--dark-color, #1A1A1A); color: #fff; 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, #CFC7B5); margin: 2rem 0; } .guide-sidebar { min-width: 0; } .guide-sidebar-card { background: var(--white, #FFFFFF); border: 1px solid var(--gray-200, #CFC7B5); 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, 'Archivo', sans-serif); font-size: 1.05rem; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--gray-200, #CFC7B5); } .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, #4A453E); border-bottom: 1px solid var(--gray-100, #DDD6C7); line-height: 1.4; } .sidebar-list a:last-child { border-bottom: none; } .sidebar-list a:hover { color: var(--primary-color, #C8531E); } .sidebar-list a [data-lucide] { flex-shrink: 0; margin-top: 2px; color: var(--secondary-hover, #2A2A2A); } /* --- 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, #CFC7B5); border-radius: var(--radius-sm, 6px); color: var(--dark-color, #1A1A1A); font-weight: 600; background: var(--white, #FFFFFF); } .navigation.pagination .page-numbers:hover { border-color: var(--primary-color, #C8531E); color: var(--primary-color, #C8531E); } .navigation.pagination .page-numbers.current { background: var(--primary-color, #C8531E); border-color: var(--primary-color, #C8531E); color: var(--white, #FFFFFF); } /* ============================================================================ 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; } } /* ============================================================================ Easy Table of Contents — alignement DA Double Service (corrige le reset global du front *{margin:0;padding:0} + ul{list-style:none} qui cassait l'espacement du sommaire, et remplace le theme gris par defaut). ========================================================================== */ #ez-toc-container{ background: var(--surface, #FAF7F0) !important; border: 1px solid var(--gray-200, #CFC7B5) !important; border-radius: 14px !important; padding: 18px 22px !important; box-shadow: 0 6px 20px rgba(26,26,26,.05) !important; margin: 0 0 28px !important; /* FIX superposition : le plugin force display:table -> la liste deployee par le toggle JS deborde/chevauche le contenu en dessous. On repasse le CONTENEUR en bloc pleine largeur (il grandit alors avec son contenu et pousse le texte vers le bas). On NE touche PAS au display de la