/*
Theme Name:   KnackfulHome Child
Theme URI:    https://knackfulhome.com
Description:  Thème enfant minimaliste pour knackfulhome.com — basé sur Kadence
Author:       KnackfulHome
Author URI:   https://knackfulhome.com
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  knackfulhome-child
*/

/* =============================================================
   0. VARIABLES CSS
   ============================================================= */
:root {
    --color-bg:          #FAF7F2;
    --color-bg-white:    #FFFFFF;
    --color-accent:      #C9A96E;
    --color-accent-dark: #B8924F;
    --color-text:        #2C2C2C;
    --color-text-muted:  #8B7355;
    --color-separator:   #E8DDD0;

    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body:    'Lato', Helvetica, Arial, sans-serif;

    --max-content:  750px;
    --max-wide:     1200px;

    --spacing-xs:   0.5rem;
    --spacing-sm:   1rem;
    --spacing-md:   2rem;
    --spacing-lg:   3.5rem;
    --spacing-xl:   6rem;
}

/* =============================================================
   1. RESET & BASE
   ============================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================
   2. TYPOGRAPHIE
   ============================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.2rem; }

p {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: var(--color-accent-dark);
    opacity: 0.85;
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* =============================================================
   3. HEADER MINIMALISTE
   ============================================================= */

/* Fond blanc, centré */
.site-header,
#masthead,
.kadence-sticky-header,
header.site-header {
    background-color: var(--color-bg-white) !important;
    border-bottom: 1px solid var(--color-separator);
    padding: var(--spacing-md) 0;
}

/* Logo centré */
.site-branding,
.header-logo,
.kadence-logo-container,
.site-header .site-branding {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding-bottom: var(--spacing-sm);
}

/* Nom du site en Playfair si pas d'image logo */
.site-title,
.site-title a,
.header-site-title {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text) !important;
    text-decoration: none;
}

.site-title a:hover {
    color: var(--color-accent) !important;
    opacity: 1;
}

.site-description,
.header-site-description {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

/* Navigation centrée sous le logo */
.main-navigation,
#site-navigation,
nav.header-navigation,
.primary-menu-container {
    text-align: center;
    width: 100%;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-separator);
    margin-top: var(--spacing-sm);
}

.main-navigation ul,
.primary-menu,
nav ul.menu {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
}

.main-navigation ul li,
.primary-menu li,
nav ul.menu li {
    position: relative;
}

.main-navigation ul li a,
.primary-menu li a,
nav ul.menu li a {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text) !important;
    text-decoration: none;
    padding: 0.5rem 1.4rem;
    display: block;
    transition: color 0.2s ease;
}

.main-navigation ul li a:hover,
.primary-menu li a:hover,
.main-navigation ul li.current-menu-item > a {
    color: var(--color-accent) !important;
}

/* Supprimer les sous-menus Kadence par défaut visuels */
.main-navigation ul ul {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-separator);
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    min-width: 180px;
}

/* =============================================================
   4. HERO SECTION (Homepage)
   ============================================================= */
.hero-section,
.knackful-hero {
    background-color: var(--color-bg-white);
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    border-bottom: 1px solid var(--color-separator);
}

.hero-section .hero-label,
.hero-eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
    display: block;
}

.hero-section h1,
.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 400;
    font-style: italic;
    color: var(--color-text);
    max-width: 700px;
    margin: 0 auto var(--spacing-md);
    line-height: 1.2;
}

.hero-section p,
.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-muted);
    max-width: 500px;
    margin: 0 auto var(--spacing-lg);
    line-height: 1.7;
}

/* Séparateur décoratif */
.hero-divider,
.hero-section::after {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    background-color: var(--color-accent);
    margin: var(--spacing-md) auto 0;
}

/* =============================================================
   5. GRILLE D'ARTICLES (3 colonnes, Homepage)
   ============================================================= */
.blog-posts-grid,
.posts-container,
.content-area .post-loop,
.site-main > .posts-container {
    max-width: var(--max-wide);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* Grille 3 colonnes */
.posts-grid,
.blog-grid,
ul.post-grid,
.entry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg) var(--spacing-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 900px) {
    .posts-grid,
    .blog-grid,
    ul.post-grid,
    .entry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .posts-grid,
    .blog-grid,
    ul.post-grid,
    .entry-grid {
        grid-template-columns: 1fr;
    }
}

/* Carte article */
.post-card,
.entry-card,
article.type-post {
    background-color: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
}

/* Image carrée */
.post-card .post-thumbnail,
.post-card .entry-thumbnail,
article.type-post .post-thumbnail,
.post-thumbnail-wrapper {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    margin-bottom: var(--spacing-md);
}

.post-card .post-thumbnail img,
.post-card .entry-thumbnail img,
article.type-post .post-thumbnail img,
.post-thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.post-card:hover .post-thumbnail img,
article.type-post:hover .post-thumbnail img {
    transform: scale(1.03);
}

/* Méta — catégorie */
.post-card .post-category,
.post-card .entry-categories,
article.type-post .cat-links,
.entry-meta .cat-links {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: block;
    margin-bottom: 0.5rem;
}

/* Titre de la carte */
.post-card .entry-title,
.post-card h2,
article.type-post .entry-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.6rem;
    color: var(--color-text);
}

.post-card .entry-title a,
article.type-post .entry-title a {
    color: var(--color-text);
    text-decoration: none;
}

.post-card .entry-title a:hover,
article.type-post .entry-title a:hover {
    color: var(--color-accent);
}

/* Extrait */
.post-card .entry-summary,
.post-card .entry-content p,
article.type-post .entry-summary {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: var(--spacing-sm);
}

/* Date */
.post-card .entry-date,
.post-card time,
article.type-post .entry-date {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
}

/* =============================================================
   6. LAYOUT ARTICLE SINGLE
   ============================================================= */

/* Wrapper centré */
.single .content-area,
.single .site-main,
body.single-post .content-area {
    max-width: var(--max-wide);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

.single .entry-content,
body.single-post .entry-content,
article.post .entry-content {
    max-width: var(--max-content);
    margin-left: auto;
    margin-right: auto;
}

/* En-tête de l'article */
.single .entry-header,
.post-header {
    max-width: var(--max-content);
    margin: 0 auto var(--spacing-lg);
    text-align: center;
}

.single .entry-header .cat-links,
.single .entry-header .entry-categories {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: block;
    margin-bottom: var(--spacing-sm);
    text-decoration: none;
}

.single .entry-title,
body.single-post h1.entry-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.single .entry-meta,
.post-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

/* Image mise en avant full-width */
.single .post-thumbnail,
.single .featured-image,
body.single-post .post-thumbnail {
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--spacing-lg);
    display: block;
}

.single .post-thumbnail img,
body.single-post .post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* Contenu de l'article */
.entry-content p {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

/* H2 dans l'article — ligne dorée à gauche */
.entry-content h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-text);
    padding-left: 1.2rem;
    border-left: 3px solid var(--color-accent);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.entry-content h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-text);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

/* Liens dans l'article */
.entry-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: rgba(201, 169, 110, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}

.entry-content a:hover {
    text-decoration-color: var(--color-accent);
    color: var(--color-accent-dark);
}

/* Blockquote */
.entry-content blockquote {
    border-left: 3px solid var(--color-accent);
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-bg-white);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.entry-content blockquote p {
    margin-bottom: 0;
    font-size: inherit;
    color: inherit;
}

/* Images dans l'article */
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-lg) auto;
}

.entry-content figure {
    margin: var(--spacing-lg) 0;
}

.entry-content figcaption {
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.6rem;
    font-style: italic;
}

/* Séparateur */
.entry-content hr {
    border: none;
    border-top: 1px solid var(--color-separator);
    margin: var(--spacing-lg) 0;
}

/* Listes */
.entry-content ul,
.entry-content ol {
    padding-left: 1.8rem;
    margin-bottom: var(--spacing-md);
}

.entry-content ul li,
.entry-content ol li {
    margin-bottom: 0.4rem;
    line-height: 1.8;
}

.entry-content ul li::marker {
    color: var(--color-accent);
}

/* =============================================================
   7. BOUTONS
   ============================================================= */
.wp-block-button__link,
.button,
button,
input[type="submit"],
.btn,
a.btn,
.knackful-btn {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
    border: none;
    border-radius: 4px;
    padding: 0.9rem 2.2rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    text-decoration: none;
    display: inline-block;
}

.wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.btn:hover {
    background-color: var(--color-accent-dark) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

/* Bouton outline */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: var(--color-accent) !important;
    border: 1.5px solid var(--color-accent) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
}

/* =============================================================
   8. SIDEBAR
   ============================================================= */
.widget-area,
aside.widget-area,
#secondary {
    padding-left: var(--spacing-lg);
    border-left: 1px solid var(--color-separator);
}

.widget {
    margin-bottom: var(--spacing-lg);
}

.widget-title,
.widget .widget-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-separator);
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-separator);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.widget ul li a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.widget ul li a:hover {
    color: var(--color-accent);
}

/* =============================================================
   9. PAGINATION
   ============================================================= */
.pagination,
.posts-pagination,
nav.navigation.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: var(--spacing-lg) 0;
}

.page-numbers {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-separator);
    text-decoration: none;
    transition: all 0.2s;
}

.page-numbers:hover,
.page-numbers.current {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #FFFFFF;
}

/* =============================================================
   10. FOOTER MINIMALISTE
   ============================================================= */
.site-footer,
footer.site-footer,
#colophon {
    background-color: var(--color-bg) !important;
    border-top: 1px solid var(--color-separator);
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
}

.footer-widgets,
.footer-widget-area {
    max-width: var(--max-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    text-align: left;
}

@media (max-width: 700px) {
    .footer-widgets,
    .footer-widget-area {
        grid-template-columns: 1fr;
    }
}

.footer-widget .widget-title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.footer-widget ul li a {
    color: var(--color-text-muted);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color 0.2s;
}

.footer-widget ul li a:hover {
    color: var(--color-accent);
}

/* Barre de copyright */
.site-info,
.footer-bottom,
.copyright-bar {
    max-width: var(--max-wide);
    margin: 0 auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-separator);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.site-info a,
.footer-bottom a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.site-info a:hover,
.footer-bottom a:hover {
    color: var(--color-accent);
}

/* =============================================================
   11. FORMULAIRES
   ============================================================= */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-separator);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    width: 100%;
    transition: border-color 0.2s;
    outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: var(--color-accent);
}

/* Newsletter widget */
.widget_mc4wp_form_widget input[type="email"],
.newsletter-form input[type="email"] {
    border-radius: 4px 0 0 4px;
    border-right: none;
}

/* =============================================================
   12. KADENCE OVERRIDES SPÉCIFIQUES
   ============================================================= */

/* Reset couleurs Kadence vers notre palette */
.kadence-blocks-form-field input,
.kadence-blocks-form-field textarea {
    border-color: var(--color-separator) !important;
}

.kt-btn-wrap a,
.kt-button {
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
}

/* Kadence header builder — forcer fond blanc */
.wp-block-kadence-header,
.kadence-header,
.kadence-header-row {
    background-color: var(--color-bg-white) !important;
}

/* Kadence inner container */
.kb-section-dir-horizontal > .kt-layout-inner-wrap,
.kt-inside-inner-col,
.kb-row-layout-wrap {
    max-width: var(--max-wide) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
}

/* Kadence tabs */
.kt-tabs-wrap .kt-tab-title.k-tab-active {
    border-bottom-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
}

/* Kadence accordion */
.kt-accordion-panel-inner {
    background-color: var(--color-bg-white) !important;
}

/* =============================================================
   13. BLOCS GUTENBERG OVERRIDES
   ============================================================= */

/* Pull quote */
.wp-block-pullquote {
    border-top: 3px solid var(--color-accent);
    border-bottom: 3px solid var(--color-accent);
    padding: var(--spacing-md) 0;
    margin: var(--spacing-lg) 0;
}

.wp-block-pullquote blockquote p {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--color-text);
    line-height: 1.4;
}

/* Séparateur */
.wp-block-separator {
    border-color: var(--color-separator) !important;
    border-width: 1px !important;
}

.wp-block-separator.is-style-wide {
    max-width: 100%;
}

/* Colonnes */
.wp-block-columns {
    gap: var(--spacing-md);
}

/* Cover */
.wp-block-cover {
    min-height: 400px;
}

/* =============================================================
   14. CATÉGORIE / ARCHIVE PAGE
   ============================================================= */
.archive .page-header,
.category .page-header {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-bg-white);
    border-bottom: 1px solid var(--color-separator);
    margin-bottom: var(--spacing-xl);
}

.archive .page-title,
.category .page-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-text);
}

.archive .page-description,
.taxonomy-description {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    max-width: 500px;
    margin: 0.5rem auto 0;
}

/* =============================================================
   15. NAVIGATION ARTICLES (prev/next)
   ============================================================= */
.post-navigation,
.nav-links {
    max-width: var(--max-content);
    margin: var(--spacing-xl) auto 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-separator);
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.nav-previous,
.nav-next {
    flex: 1;
    max-width: 48%;
}

.nav-previous .nav-subtitle,
.nav-next .nav-subtitle {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 0.4rem;
}

.nav-previous .nav-title,
.nav-next .nav-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-text);
    transition: color 0.2s;
}

.post-navigation a:hover .nav-title {
    color: var(--color-accent);
}

/* =============================================================
   16. COMMENTAIRES
   ============================================================= */
.comments-area {
    max-width: var(--max-content);
    margin: var(--spacing-xl) auto 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-separator);
}

.comments-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin-bottom: var(--spacing-lg);
}

.comment-author .fn {
    font-weight: 700;
    color: var(--color-text);
}

.comment-metadata a {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.comment-content p {
    font-size: 0.95rem;
}

.comment-reply-link {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* =============================================================
   17. RESPONSIVE MOBILE — OVERRIDES COMPLETS
   ============================================================= */

/* --- GLOBAL ANTI-OVERFLOW --- */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}

* {
    max-width: 100vw;
}

img,
video,
iframe,
embed,
object {
    max-width: 100% !important;
    height: auto;
}

/* Images Kadence */
img.kb-img,
.kb-img img,
.kb-gallery-image-contain img,
.kb-is-ratio-image img,
.wp-block-kadence-image img {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
}

/* =============================================================
   BREAKPOINT TABLETTE  max-width: 1024px
   ============================================================= */
@media (max-width: 1024px) {

    /* Kadence columns -> 2 col max */
    .kt-has-3-columns > .kt-row-column-wrap,
    .kt-has-4-columns > .kt-row-column-wrap,
    .kt-has-5-columns > .kt-row-column-wrap,
    .kt-has-6-columns > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Font sizes heading tablette */
    h1 { font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.4rem, 2.8vw, 2rem) !important; }

    /* Hero */
    .hero-section h1,
    .hero-title {
        font-size: clamp(2rem, 4.5vw, 3rem) !important;
    }

    /* Kadence advanced headings tablette */
    .wp-block-kadence-advancedheading {
        font-size: clamp(1.2rem, 3vw, 2.5rem) !important;
    }

    /* Blocs Kadence padding réduit */
    .kt-row-column-wrap {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* =============================================================
   BREAKPOINT MOBILE  max-width: 768px
   ============================================================= */
@media (max-width: 768px) {

    /* --- Variables spacing réduites --- */
    :root {
        --spacing-xl:  2.5rem;
        --spacing-lg:  1.8rem;
        --spacing-md:  1.2rem;
        --spacing-sm:  0.8rem;
    }

    /* --- TYPOGRAPHY MOBILE --- */
    body {
        font-size: 15px !important;
    }

    h1 { font-size: 1.7rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.4rem !important; line-height: 1.25 !important; }
    h3 { font-size: 1.2rem !important; }
    h4 { font-size: 1.05rem !important; }

    p { font-size: 1rem !important; line-height: 1.75 !important; }

    /* Kadence advanced headings — override inline styles */
    .wp-block-kadence-advancedheading[style*="font-size"],
    [class*="kt-adv-heading"] {
        font-size: clamp(1rem, 4.5vw, 1.8rem) !important;
        line-height: 1.3 !important;
    }

    /* Titres très grands (50px, 70px, 75px du template) */
    .wp-block-kadence-advancedheading {
        font-size: clamp(1.2rem, 5vw, 2rem) !important;
        line-height: 1.3 !important;
    }

    /* --- HEADER MOBILE --- */
    .site-header,
    #masthead,
    header.site-header,
    .wp-block-kadence-header,
    .kadence-header,
    .kadence-header-row,
    .header-row-wrap {
        padding: 0.8rem 1rem !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Logo centré sur mobile */
    .site-branding,
    .header-logo,
    .kadence-logo-container,
    .site-header .site-branding,
    .wp-block-site-logo,
    .kb-header-logo {
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .site-title,
    .site-title a,
    .header-site-title {
        font-size: 1.3rem !important;
    }

    /* Navigation mobile — wrap forcé */
    .main-navigation,
    #site-navigation,
    nav.header-navigation,
    .primary-menu-container,
    .kadence-navigation,
    .menu-container {
        width: 100% !important;
        overflow: hidden !important;
    }

    .main-navigation ul,
    .primary-menu,
    nav ul.menu {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .main-navigation ul li a,
    .primary-menu li a,
    nav ul.menu li a {
        font-size: 0.65rem !important;
        padding: 0.4rem 0.6rem !important;
        letter-spacing: 0.12em !important;
    }

    /* Menu hamburger Kadence */
    .kadence-menu-toggle-inner,
    button.menu-toggle {
        display: flex !important;
    }

    /* Kadence header builder rows */
    .kb-header-row,
    .kadence-header-row-wrap,
    .header-main-layout-inner {
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 1rem !important;
    }

    /* Kadence header sections */
    .kb-header-section,
    .kadence-header-section {
        width: 100% !important;
        justify-content: center !important;
    }

    /* --- KADENCE ROW LAYOUTS MOBILE --- */

    /* Toutes les grilles Kadence -> colonne unique */
    .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
        padding-top: var(--spacing-lg) !important;
        padding-bottom: var(--spacing-lg) !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        row-gap: 1.5rem !important;
    }

    .kt-has-2-columns > .kt-row-column-wrap,
    .kt-has-3-columns > .kt-row-column-wrap,
    .kt-has-4-columns > .kt-row-column-wrap,
    .kt-has-5-columns > .kt-row-column-wrap,
    .kt-has-6-columns > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Kadence row layout — supprimer padding latéral excessif */
    .kb-row-layout-wrap {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Kadence column inner */
    .kt-inside-inner-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Kadence column padding override */
    [class*="kadence-column"] > .kt-inside-inner-col {
        padding: 0.5rem 0 !important;
    }

    /* --- GRILLE D'ARTICLES MOBILE --- */

    /* Blog archive Kadence posts */
    .kb-posts .kt-post-grid {
        grid-template-columns: 1fr !important;
    }

    .kb-posts.kb-posts-is-carousel {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Loop entries */
    .content-wrap.grid-cols {
        grid-template-columns: 1fr !important;
    }

    .entry.loop-entry {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Grille custom */
    .posts-grid,
    .blog-grid,
    ul.post-grid,
    .entry-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
    }

    /* Article card images */
    .entry-image img,
    .loop-entry .entry-image img,
    .post-card .post-thumbnail img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Article card titles */
    .loop-entry .entry-title,
    .entry.loop-entry h2,
    .kb-post-list-item .entry-title {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }

    /* --- ARTICLE SINGLE MOBILE --- */

    .single .content-area,
    .single .site-main,
    body.single-post .content-area {
        padding: var(--spacing-lg) 1rem !important;
        max-width: 100% !important;
    }

    .single .entry-content,
    body.single-post .entry-content,
    article.post .entry-content {
        max-width: 100% !important;
        padding: 0 !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .single .entry-header,
    .post-header {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .single .entry-title,
    body.single-post h1.entry-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    /* Featured image */
    .single .post-thumbnail img,
    body.single-post .post-thumbnail img {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
    }

    /* Article content typography */
    .entry-content p {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }

    .entry-content h2 {
        font-size: 1.25rem !important;
        padding-left: 0.8rem !important;
    }

    .entry-content h3 {
        font-size: 1.1rem !important;
    }

    /* Images dans le contenu */
    .entry-content img,
    .entry-content figure img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        margin: var(--spacing-md) auto !important;
    }

    .entry-content figure {
        margin: var(--spacing-md) 0 !important;
    }

    /* Blockquote */
    .entry-content blockquote {
        padding: 1rem 1.2rem !important;
        margin: var(--spacing-md) 0 !important;
        font-size: 1rem !important;
    }

    /* --- KADENCE BLOCKS IMAGES MOBILE --- */

    .wp-block-kadence-image,
    .kb-image-wrap {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .wp-block-kadence-image img,
    .kb-image-wrap img,
    img.kb-img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Gallery carousel Kadence */
    .kb-gallery-wrap,
    .wp-block-kadence-advancedgallery {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .kb-blocks-gallery-item img,
    .kadence-blocks-gallery-item img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Carousel Kadence */
    .kt-blocks-carousel,
    .splide__track,
    .splide__list {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* --- KADENCE HERO / COVER MOBILE --- */

    .wp-block-cover,
    .kt-row-has-bg {
        min-height: 250px !important;
        padding: 2rem 1rem !important;
    }

    .wp-block-cover__inner-container {
        padding: 0 !important;
    }

    /* Background image sections */
    .kb-row-layout-wrap[style*="background-image"] {
        min-height: auto !important;
        background-attachment: scroll !important;
    }

    /* --- GOOGLE MAPS MOBILE --- */

    .kb-google-maps-container,
    [class*="kb-google-maps-container"] {
        height: 250px !important;
    }

    iframe[src*="google.com/maps"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* --- GUTENBERG BLOCKS MOBILE --- */

    /* Colonnes Gutenberg */
    .wp-block-columns {
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        min-width: 100% !important;
    }

    /* Tables */
    .wp-block-table {
        overflow-x: auto !important;
        display: block !important;
    }

    /* Pull quote */
    .wp-block-pullquote blockquote p {
        font-size: 1.1rem !important;
    }

    /* --- SIDEBAR MOBILE --- */

    .widget-area,
    aside.widget-area,
    #secondary {
        padding-left: 0 !important;
        border-left: none !important;
        border-top: 1px solid var(--color-separator);
        padding-top: var(--spacing-lg) !important;
        margin-top: var(--spacing-lg) !important;
        width: 100% !important;
    }

    /* --- FOOTER MOBILE --- */

    .site-footer,
    footer.site-footer,
    #colophon {
        padding: var(--spacing-lg) 1rem !important;
    }

    .footer-widgets,
    .footer-widget-area {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
        margin-bottom: var(--spacing-lg) !important;
    }

    .site-info,
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }

    /* Kadence footer rows */
    .site-footer .kb-row-layout-wrap .kt-row-column-wrap,
    #colophon .kt-row-column-wrap {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: var(--spacing-md) !important;
    }

    /* --- NAVIGATION PREV/NEXT MOBILE --- */

    .post-navigation,
    .nav-links {
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
    }

    .nav-previous,
    .nav-next {
        max-width: 100% !important;
    }

    /* --- BOUTONS MOBILE --- */

    .wp-block-button__link,
    .button,
    .kt-button,
    .btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }

    .wp-block-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* --- HERO SECTION MOBILE --- */

    .hero-section,
    .knackful-hero {
        padding: 2rem 1rem !important;
    }

    .hero-section h1,
    .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    .hero-section p,
    .hero-subtitle {
        font-size: 0.95rem !important;
    }

    /* --- KADENCE POPUP / OVERLAY MOBILE --- */

    .kadence-popup-modal,
    .kt-blocks-offcanvas {
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* --- MISC KADENCE FIXES --- */

    /* Supprimer les max-width inline de Kadence sur mobile */
    .kb-theme-content-width {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Kadence row overlay */
    .kt-row-layout-overlay {
        width: 100% !important;
    }

    /* Kadence bottom separator svg */
    .kt-row-layout-bottom-sep svg {
        width: 100% !important;
    }

    /* Icon list Kadence */
    .kt-svg-icon-list {
        padding-left: 0 !important;
    }

    /* Info box Kadence */
    .kt-blocks-info-box-link-wrap {
        max-width: 100% !important;
    }
}

/* =============================================================
   BREAKPOINT SMALL MOBILE  max-width: 480px
   ============================================================= */
@media (max-width: 480px) {

    body { font-size: 14px !important; }

    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }

    .wp-block-kadence-advancedheading {
        font-size: clamp(1rem, 6vw, 1.6rem) !important;
        line-height: 1.25 !important;
    }

    .single .entry-title,
    body.single-post h1.entry-title {
        font-size: 1.5rem !important;
    }

    .hero-section h1,
    .hero-title {
        font-size: 1.5rem !important;
    }

    .entry-content h2 {
        font-size: 1.15rem !important;
    }

    /* Nav ultra-compacte */
    .main-navigation ul li a,
    .primary-menu li a {
        font-size: 0.6rem !important;
        padding: 0.35rem 0.5rem !important;
        letter-spacing: 0.08em !important;
    }

    /* Padding global minimal */
    .kt-row-column-wrap {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Cards posts */
    .loop-entry .entry-title,
    .entry.loop-entry h2 {
        font-size: 1.1rem !important;
    }

    /* Boutons full width sur très petit écran */
    .wp-block-button__link,
    .kt-button {
        width: 100% !important;
        text-align: center !important;
    }

    /* Footer */
    .site-footer,
    footer.site-footer {
        padding: 1.5rem 0.75rem !important;
    }
}

/* =============================================================
   18. UTILITAIRES
   ============================================================= */
.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-text-muted); }
.text-center { text-align: center; }
.font-heading { font-family: var(--font-heading); }

.divider-line {
    display: block;
    width: 50px;
    height: 2px;
    background-color: var(--color-accent);
    margin: 0 auto;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: block;
}

.fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Cache le titre du site dans le header */
.site-title,
.site-title a,
.header-site-branding .site-title {
    display: none !important;
}