/*
Theme Name: Kadence Child - TheMatcha
Theme URI: https://thematcha.fr
Description: Thème enfant de Kadence pour TheMatcha
Author: TheMatcha
Author URI: https://thematcha.fr
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* ==========================================================================
   VARIABLES CSS GLOBALES - THEMATCHA
   Palette unifiée pour tous les composants
   ========================================================================== */

:root {
    /* Couleurs principales - Vert Matcha */
    --matcha-50: #f0fdf4;
    --matcha-100: #dcfce7;
    --matcha-200: #bbf7d0;
    --matcha-300: #86efac;
    --matcha-400: #4ade80;
    --matcha-500: #22c55e;
    --matcha-600: #16a34a;
    --matcha-700: #15803d;
    --matcha-800: #166534;
    --matcha-900: #14532d;
    --bg-emerald: #14532d;

    /* Couleurs primaires du site */
    --primary: #5D8A4E;
    --primary-light: #7BA86B;
    --primary-dark: #4A6E3E;
    --primary-bg: #f0fdf4;

    /* Couleurs accent */
    --accent: #b8956a;
    --accent-light: #d4c4a8;
    --accent-bg: rgba(184, 149, 106, 0.08);

    /* Couleurs de texte - WCAG AA compliant (contrast >= 4.5:1) */
    --text-primary: #1a1a1a;      /* 16.1:1 sur blanc */
    --text-secondary: #4b5563;    /* 7.5:1 sur blanc */
    --text-muted: #6b7280;        /* 5.0:1 sur blanc - corrige de #9ca3af */
    --text-light: #525252;        /* 7.2:1 sur blanc - corrige de #6b7280 */

    /* Couleurs de fond */
    --bg-white: #ffffff;
    --bg-light: #fafafa;
    --bg-gray: #f3f4f6;

    /* Bordures */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-dark: #9ca3af;

    /* États */
    --success: #22c55e;
    --success-bg: #f0fdf4;
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --error: #ef4444;
    --error-bg: #fef2f2;
    --info: #3b82f6;
    --info-bg: #eff6ff;

    /* Typographie */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

    /* Espacements */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Rayons de bordure */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
}

/* ==========================================================================
   STYLES DE CONTENU (Articles)
   ========================================================================== */

/* Centrage du contenu des articles */
body.single-post .site-container,
/* Suppression du goulot d'étranglement du container */
.single-post .content-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* On ajuste la largeur du cadre blanc lui-même */
.single-post .content-wrap {
    max-width: 1400px; /* Largeur idéale pour la lecture */
    margin: 40px auto !important;
    display: block;
}

/* Override boxed style pour articles */
body.single-post.content-style-boxed .content-wrap {
    background: var(--bg-white);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* Narrow content - augmenter légèrement la largeur */
body.single-post.content-width-narrow .content-wrap {
    max-width: 1600px;
}

.entry-content,
.post-content {
    font-family: var(--font-sans);
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1rem;
}

/* Titres */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--text-primary);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.entry-content h1 { font-size: 2.25rem; }
.entry-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--matcha-200);
}
.entry-content h3 {
    font-size: 1.375rem;
    color: var(--primary-dark);
}
.entry-content h4 { font-size: 1.125rem; }

/* Paragraphes */
.entry-content p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

/* Liens */
.entry-content a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
.entry-content a:hover {
    color: var(--primary-dark);
}

/* Exceptions: liens avec fond colore ou classe text-white */
.entry-content a.cta-button,
.entry-content a.product-button,
.entry-content a.text-white,
.entry-content a[class*="bg-emerald"],
.entry-content a[class*="bg-green"],
.entry-content a[class*="bg-primary"],
.entry-content a[class*="bg-gray-800"],
.entry-content a[class*="bg-gray-900"] {
    color: #ffffff !important;
    text-decoration: none;
}
.entry-content a.cta-button:hover,
.entry-content a.product-button:hover,
.entry-content a.text-white:hover,
.entry-content a[class*="bg-emerald"]:hover,
.entry-content a[class*="bg-green"]:hover {
    color: #ffffff !important;
}

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

.entry-content figure {
    margin: var(--spacing-xl) 0;
}
.entry-content figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-light);
    margin-top: var(--spacing-sm);
}

/* Sections */
.entry-content section {
    margin-bottom: var(--spacing-2xl);
}

/* Listes */
.entry-content ul,
.entry-content ol {
    margin: var(--spacing-md) 0 var(--spacing-lg) var(--spacing-lg);
    padding: 0;
}
.entry-content ul { list-style-type: disc; }
.entry-content ol { list-style-type: decimal; }
.entry-content li {
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}
.entry-content li::marker {
    color: var(--primary);
}

/* Citations */
.entry-content blockquote {
    background: var(--warning-bg);
    border-left: 4px solid var(--warning);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: normal;
}
.entry-content blockquote p {
    margin-bottom: 0;
    color: #92400e;
    font-size: 0.9375rem;
}

/* Encadrés - Seulement pour les articles (pas homepage/pages avec blocs)
   Exclure: blocs Kadence, sections HTML inline, hero, etc. */
.single-post .entry-content > div:not([class]),
.single-post .entry-content > div.wp-block-group:not(.alignfull):not(.alignwide) {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    box-shadow: var(--shadow-sm);
}
.single-post .entry-content > div:not([class]) > div {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

/* Tableaux */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
    font-size: 0.9375rem;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.entry-content thead {
    background: var(--text-primary);
    color: var(--bg-white);
}
.entry-content th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
}
.entry-content td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}
.entry-content tbody tr:hover {
    background: var(--bg-light);
}
.entry-content tbody tr:last-child td {
    border-bottom: none;
}

/* FAQ / Accordéon */
.entry-content details {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}
.entry-content summary {
    cursor: pointer;
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--transition-fast);
}
.entry-content summary:hover {
    background: var(--border-light);
}
.entry-content summary::after {
    content: '\25BC';
    font-size: 0.75rem;
    color: var(--primary);
    transition: transform var(--transition-fast);
}
.entry-content details[open] summary::after {
    transform: rotate(180deg);
}
.entry-content details > div,
.entry-content details > p {
    padding: 0 var(--spacing-lg) var(--spacing-md);
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Code */
.entry-content code {
    background: var(--bg-gray);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875em;
}
.entry-content pre {
    background: var(--text-primary);
    color: #f3f4f6;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
}
.entry-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* Texte en gras et italique */
.entry-content strong,
.entry-content b { font-weight: 700; }
.entry-content em,
.entry-content i { font-style: italic; }

/* Responsive */
@media (max-width: 768px) {
    .entry-content h1 { font-size: 1.75rem; }
    .entry-content h2 { font-size: 1.5rem; }
    .entry-content h3 { font-size: 1.25rem; }
    .entry-content > div { padding: var(--spacing-md); }
    .entry-content table { font-size: 0.875rem; }
    .entry-content th,
    .entry-content td { padding: var(--spacing-md) var(--spacing-sm); }
}


/* ==========================================================================
   OPTIMISATION MOBILE 
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Force le container principal à prendre toute la largeur */
    body.single-post .site-container,
    body.single-post #primary,
    body.single-post .content-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. Simplifie le wrap de l'article */
    body.single-post .content-wrap, .entry-content-wrap, .single-content{
        padding-left: 8px !important; /* Espace minimal de sécurité sur les bords */
        padding-right: 8px !important;
        margin-top: var(--spacing-md) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. Suppression du style "Boxed" sur mobile pour gagner de la place */
    body.single-post.content-style-boxed .content-wrap {
        padding: 8px !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important; /* On laisse le fond du body pour plus de légèreté */
    }

    /* 4. Correction du centrage du contenu interne */
    .single-post .entry-content > *:not(.alignfull):not(.alignwide) {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* Impression */
@media print {
    .entry-content a {
        color: var(--text-primary);
        text-decoration: none;
    }
    .entry-content a::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: var(--text-light);
    }
}

/* ==========================================================================
   BLOCS WORDPRESS / GUTENBERG
   ========================================================================== */

.wp-block-heading {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.wp-block-list {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-lg);
}

.wp-block-kadence-column,
.kt-inside-inner-col {
    width: 100%;
}

/* ==========================================================================
   HOMEPAGE / PAGES - Layout full-width
   ========================================================================== */

/* Override du style "boxed" de Kadence pour les pages */
body.page.content-style-boxed .content-wrap,
body.home.content-style-boxed .content-wrap {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
}

body.page.content-style-boxed .entry-content-wrap,
body.home.content-style-boxed .entry-content-wrap {
    padding: 0;
}

/* Reset boxed style pour pages avec blocs */
.page .entry-content,
.home .entry-content {
    max-width: none;
    padding: 0;
}

/* Container principal - largeur max */
body.page .site-container,
body.home .site-container {
    max-width: 100%;
    padding: 0;
}

/* Content area centré avec max-width pour lisibilité */
body.page #primary,
body.home #primary {
    max-width: 100%;
}

/* Override content-width-normal pour pages full-width */
body.page.content-width-normal .content-container,
body.home.content-width-normal .content-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Centrer les sections de contenu texte */
body.page .entry-content > *:not(.alignfull):not(.alignwide):not(.wp-block-html):not(.hero-inline),
body.home .entry-content > *:not(.alignfull):not(.alignwide):not(.wp-block-html):not(.hero-inline) {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

/* HTML blocks (sections homepage) - full width */
body.page .entry-content > .wp-block-html,
body.home .entry-content > .wp-block-html {
    max-width: 100%;
}

/* Sections homepage - meilleur contraste */
.about-inline {
    background: var(--bg-white) !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
}

.faq-inline {
    background: var(--bg-light) !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

/* Sections avec fond coloré - contraste */
.page .entry-content section[style*="background"],
.home .entry-content section[style*="background"] {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin: var(--spacing-2xl) auto;
    max-width: 1200px;
}

/* Alterner les fonds pour créer du rythme visuel */
.page .entry-content > .wp-block-html:nth-child(4n+2),
.page .entry-content > .wp-block-html:nth-child(4n+4) {
    background: var(--bg-light);
    padding: var(--spacing-2xl) 0;
    margin: 0 calc(-50vw + 50%);
    width: 100vw;
}

/* Kadence Row Layout - centrage */
.wp-block-kadence-rowlayout {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-kadence-rowlayout > .kt-row-layout-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

/* Full width sections */
.wp-block-kadence-rowlayout.alignfull > .kt-row-layout-inner {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Wide sections */
.wp-block-kadence-rowlayout.alignwide > .kt-row-layout-inner {
    max-width: 1400px;
}

.is-resized img {
    max-width: 100%;
    height: auto;
}

.size-large {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   COMPOSANTS CUSTOM - ARTICLES
   Note: La plupart des composants sont maintenant dans components.css
   Ce fichier ne garde que les éléments spécifiques non consolidés
   ========================================================================== */

/* CTA Button */
.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--bg-white);
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 12px rgba(93, 138, 78, 0.3);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(93, 138, 78, 0.4);
    color: var(--bg-white);
}

/* Emojis */
.emoji {
    font-style: normal;
    font-size: 1.1em;
    vertical-align: middle;
}

/* Etats vides */
.empty {
    color: var(--text-muted);
    font-style: italic;
}

/* ==========================================================================
   COULEURS CUSTOM MATCHA
   ========================================================================== */

.text-matcha-dark { color: #3A4A3B; }
.bg-matcha-dark { background-color: #3A4A3B; }
.border-matcha-dark { border-color: #3A4A3B; }

/* ==========================================================================
   SECTIONS & LAYOUT
   ========================================================================== */

.section {
    margin: var(--spacing-2xl) 0;
}

.inner-column-1 {
    padding: var(--spacing-md);
}

/* ==========================================================================
   PRIX
   ========================================================================== */

.price-highlight {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.5rem;
}

/* ==========================================================================
   RATINGS
   ========================================================================== */

.rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.excellent {
    color: #166534;
    font-weight: 600;
}

/* ==========================================================================
   LABEL / VALUE PAIRS (génériques)
   ========================================================================== */

.label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.value {
    font-weight: 500;
    color: var(--text-primary);
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
}

.comparison-table th,
.comparison-table td {
    padding: var(--spacing-md);
    border: 1px solid var(--border-light);
    text-align: left;
}

.comparison-table thead {
    background: var(--matcha-900);
}

.comparison-table tbody tr:hover {
    background: var(--bg-light);
}

/* ==========================================================================
   ICONS & CHEVRONS
   ========================================================================== */

.chevron {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.chevron.open,
.chevron.expanded {
    transform: rotate(180deg);
}

/* Font Awesome fallback */
.fas {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
}

/* ==========================================================================
   KADENCE ACCORDION
   ========================================================================== */

.wp-block-kadence-pane,
.kt-accordion-pane {
    margin-bottom: var(--spacing-sm);
}

.kt-accordion-header-wrap,
.kt-blocks-accordion-header {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.kt-blocks-accordion-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.kt-blocks-accordion-title-wrap:hover {
    background: var(--border-light);
}

.kt-blocks-accordion-title {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.kt-blocks-accordion-icon-trigger {
    color: var(--primary);
    transition: transform var(--transition-fast);
}

.kt-accordion-panel {
    border: 1px solid var(--border-light);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.kt-accordion-panel-inner {
    padding: var(--spacing-md) var(--spacing-lg);
}

.kt-acccordion-button-label-show {
    display: none;
}

/* ==========================================================================
   ACCESSIBILITE - Focus States (WCAG 2.1)
   ========================================================================== */

/* Focus visible pour tous les elements interactifs */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.cta-button:focus-visible,
.accordion__header:focus-visible,
.kt-blocks-accordion-title-wrap:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Focus pour les liens dans le contenu */
.entry-content a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    background: var(--matcha-50);
}

/* Skip link pour navigation clavier */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 1rem 2rem;
    z-index: 9999;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    top: 10px;
}

/* ==========================================================================
   ACCESSIBILITE - Contraste ameliore
   ========================================================================== */

/* Blockquote avec meilleur contraste */
.entry-content blockquote p {
    color: #78350f;  /* Plus fonce que #92400e pour meilleur contraste */
}

/* Labels avec contraste ameliore */
.label {
    color: var(--text-light);  /* Utilise la nouvelle valeur corrigee */
}

/* ==========================================================================
   MOBILE - Responsive Design
   ========================================================================== */

/* Variables mobile */
@media (max-width: 768px) {
    :root {
        --spacing-md: 0.875rem;
        --spacing-lg: 1.25rem;
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
    }

    /* Articles mobile - full width */
    body.single-post .content-wrap {
        max-width: 100%;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        border-radius: 0;
    }

    body.single-post.content-style-boxed .content-wrap {
        padding: var(--spacing-md);
        box-shadow: none;
    }
}



@media (min-width: 1025px) {
    /* 1. On s'assure que le conteneur principal est centré sur l'écran */
    .single-post .site-container {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: var(--global-content-width) !important; /* Utilise tes 1525px */
    }

    /* 2. On force la zone de contenu (primary) à ne pas avoir d'offset ou de float */
    .single-post #primary {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
    }

    /* 3. On centre le cadre blanc (le wrap) et on fixe SA largeur réelle */
    .single-post .content-wrap {
        max-width: 1600px !important; /* C'est ICI que tu règles la largeur de ta boîte blanche */
        margin: 50px auto !important; /* Marges haut/bas et AUTO pour centrer horizontalement */
        display: block !important;
        float: none !important;
    }

    /* 4. On fait sauter le verrou des 800px du CSS critique pour que le texte occupe tout le cadre */
    .single-post .entry-content {
        max-width: 100% !important; 
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* On ajuste le padding interne pour que le texte ne colle pas aux bords du cadre blanc */
    .single-post .entry-content-wrap {
        padding: 40px 60px !important;
    }
}


/* Base mobile - Touch targets minimum 44x44px */
@media (max-width: 768px) {
    /* Typography mobile */
    body {
        font-size: 16px;  /* Minimum pour eviter zoom iOS */
        -webkit-text-size-adjust: 100%;
    }

    .entry-content,
    .post-content {
        font-size: 1rem;
        line-height: 1.8;
    }

    /* Headings mobile */
    .entry-content h1,
    .wp-block-heading.has-large-font-size {
        font-size: 1.625rem;
        line-height: 1.25;
    }

    .entry-content h2 {
        font-size: 1.375rem;
        line-height: 1.3;
    }

    .entry-content h3 {
        font-size: 1.125rem;
    }

    .entry-content h4 {
        font-size: 1rem;
    }

    /* Paragraphes - espacement tactile */
    .entry-content p {
        margin-bottom: 1.5rem;
    }

    /* Liens - zone tactile elargie */
    .entry-content a {
        padding: 0.25rem 0;
        display: inline;
    }

    /* Boutons CTA - zone tactile 44px minimum */
    .cta-button {
        display: block;
        width: 100%;
        padding: 1rem 1.5rem;
        min-height: 48px;
        font-size: 1rem;
        text-align: center;
    }

    /* Accordions - zones tactiles */
    .kt-blocks-accordion-title-wrap {
        padding: 1rem;
        min-height: 48px;
    }

    .entry-content summary {
        padding: 1rem;
        min-height: 48px;
    }

    /* Cards mobile - voir components.css pour .card */

    /* Callouts mobile - voir components.css pour .callout */

    /* Tables responsive */
    .entry-content table,
    .comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.875rem;
    }

    .entry-content th,
    .entry-content td,
    .comparison-table th,
    .comparison-table td {
        padding: 0.75rem 0.5rem;
        min-width: 100px;
    }

    /* Listes mobile */
    .entry-content ul,
    .entry-content ol,
    .checklist {
        padding-left: 1.25rem;
    }

    .entry-content li,
    .checklist li {
        margin-bottom: 0.75rem;
        padding-left: 0.5rem;
    }

    /* Callout variants mobile - voir components.css */

    /* Images mobile */
    .entry-content img {
        margin: 1rem auto;
        border-radius: var(--radius-md);
    }

    .entry-content figure {
        margin: 1rem -0.5rem;
    }

    .entry-content figcaption {
        padding: 0 0.5rem;
        font-size: 0.8125rem;
    }

    /* Data items et badges mobile - voir components.css */

    /* Code blocks mobile */
    .entry-content pre {
        padding: 1rem;
        font-size: 0.8125rem;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: var(--radius-md);
    }

    /* Inner columns */
    .inner-column-1 {
        padding: 0.75rem;
    }

    /* Section spacing */
    .section {
        margin: 1.5rem 0;
    }
}

/* Pour uniformiser le look des callouts sur Lubii */
.callout {
    border: none !important; /* Bordure fine tout autour */
    margin:0;
    padding:0;
}


/* Petit mobile (< 480px) */
@media (max-width: 480px) {
    .entry-content h1 {
        font-size: 1.5rem;
    }

    .entry-content h2 {
        font-size: 1.25rem;
    }

    .entry-content h3 {
        font-size: 1.0625rem;
    }

    /* Boutons full width */
    .cta-button {
        padding: 1.125rem 1rem;
    }

    /* Tables scroll indicator */
    .entry-content table::before {
        content: 'Faites défiler →';
        display: block;
        text-align: right;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
    }
}

/* ==========================================================================
   MOBILE - Touch optimizations
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Desactiver les effets hover sur tactile */
    .card--hover:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }

    .cta-button:hover {
        transform: none;
    }

    /* Active states pour feedback tactile */
    .cta-button:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .accordion__header:active,
    .kt-blocks-accordion-title-wrap:active,
    .entry-content summary:active {
        background: var(--border-light);
    }

    /* Augmenter les zones tactiles */
    .link {
        padding: 0.25rem 0.125rem;
    }
}

/* ==========================================================================
   ACCESSIBILITE - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .cta-button:hover,
    .card--hover:hover {
        transform: none;
    }

    .chevron.open,
    .chevron.expanded,
    .accordion__icon {
        transition: none;
    }
}

/* ==========================================================================
   ACCESSIBILITE - High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --border-light: #000000;
        --border-medium: #000000;
    }

    .entry-content a {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }

    .cta-button {
        border: 2px solid #000000;
    }

    /* Callouts et cards - voir components.css pour styles haute contraste */
}

/* ==========================================================================
   PUBLICATIONS SIMILAIRES (Related Posts)
   ========================================================================== */

.single-post .entry-related {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-light);
}

.single-post .entry-related-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

/* Grille des posts similaires */
.single-post .entry-related .loop-entry {
    margin-bottom: var(--spacing-lg);
}

/* Carousel des posts similaires */
.single-post .entry-related .splide__slide {
    padding: 0 var(--spacing-sm);
}

/* Titre de la section */
.single-post .entry-related .related-title {
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
    color: var(--text-primary);
}

/* ==========================================================================
   PRINT - Styles d'impression
   ========================================================================== */

@media print {
    .cta-button {
        background: none !important;
        color: #000000 !important;
        border: 2px solid #000000;
        box-shadow: none;
    }

    .callout {
        background: #f5f5f5 !important;
        border-color: #000000 !important;
    }

    .accordion__body {
        display: block !important;
    }

    .entry-content img {
        max-width: 100%;
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   RETROCOMPATIBILITE - Alias pour anciennes classes
   Ces classes reprennent les styles des nouveaux composants
   Permet de garder la compatibilité avec du contenu non migré
   ========================================================================== */

/* Highlight → Style inline compact */
.highlight,
.highlight-primary {
    display: inline;
    border-left: none;
    background: var(--matcha-100);
    color: var(--text-primary);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.highlight-technique {
    background: #e0f2fe;
    color: #0c4a6e;
}

.seo-highlight {
    display: inline;
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    background: var(--matcha-100);
    border: none;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Highlight block (si besoin de pleine largeur) */
.highlight--block,
.highlight-block {
    display: block;
    margin: var(--spacing-sm) 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Cards */
.benefit-card,
.product-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    transition: all var(--transition-normal);
}

.benefit-card:hover,
.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.content-section {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.test-section {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

/* FAQ → Accordion */
.faq-item {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-light);
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    transition: background var(--transition-fast);
    min-height: 48px;
}

.faq-question:hover {
    background: var(--border-light);
}

.faq-answer {
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Taste → Data */
.taste-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}

.taste-item:last-child {
    border-bottom: none;
}

.taste-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.taste-value {
    font-weight: 600;
    color: var(--text-primary);
}

.taste-circle,
.rating-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-light);
    border: 2px solid var(--border-medium);
}

.taste-circle.active,
.rating-dot.active,
.rating-dot.filled {
    background: var(--primary);
    border-color: var(--primary);
}

.taste-circles {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

/* Badges */
.criteria-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius-full);
    background: var(--bg-gray);
    color: var(--text-light);
}

.label-bio {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    background: var(--success-bg);
    color: #166534;
    border: 1px solid var(--success);
}

/* Lists */
.checklist {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0;
}

.checklist li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.5rem;
}

.checklist li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: bold;
}

/* Links */
.internal-link,
.link-green {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.internal-link:hover,
.link-green:hover {
    color: var(--primary-dark);
}

/* Content */
.text-content {
    line-height: 1.7;
    color: var(--text-primary);
}

/* Pros/Cons → Callout variants */
.pros {
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: 4px solid var(--success);
    background: var(--success-bg);
    color: #14532d;
}

.cons {
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: 4px solid var(--error);
    background: var(--error-bg);
    color: #7f1d1d;
}