/*
Theme Name: ActualitesPro
Theme URI: https://actualitespro.com
Author: ActualitesPro Team
Author URI: https://actualitespro.com
Description: Thème WordPress moderne et performant spécialement conçu pour les sites d'actualités, blogs et magazines en ligne. Optimisé pour Google PageSpeed Insights et Core Web Vitals.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: actualitespro
Tags: news, blog, magazine, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, editor-style, featured-image-header, flexible-header, post-formats, responsive-design, theme-options, accessibility-ready

ActualitesPro WordPress Theme, Copyright (C) 2024 ActualitesPro Team
ActualitesPro is distributed under the terms of the GNU GPL

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ===================================
   CSS VARIABLES - ActualitesPro
   =================================== */
:root {
    /* Couleurs principales MENOW */
    --ap-primary: #16a085;
    --ap-secondary: #27ae60;
    
    /* Couleurs texte */
    --ap-text: #2c3e50;
    --ap-text-light: #5a6268; /* Contraste amélioré : 5.2:1 (WCAG AA+) - Meilleur pour Google PageSpeed */
    
    /* Couleurs fond */
    --ap-bg: #ffffff;
    --ap-bg-light: #f8f9fa;
    
    /* Bordures */
    --ap-border: #e0e0e0;
    
    /* Header & Footer MENOW */
    --ap-header-bg: #1a2d45;
    --ap-header-text: #ffffff; /* Couleur texte header - Personnalisable */
    --ap-footer-bg: #2c3e50; /* Bleu MENOW */
    --ap-footer-text: #ecf0f1; /* Couleur texte footer - Personnalisable */
    
    /* Widget Articles Récents - Couleurs personnalisables */
    --ap-widget-recent-primary: #16a085;
    --ap-widget-recent-secondary: #27ae60;
    --ap-widget-recent-bg: #ffffff;
    --ap-widget-recent-bg-hover: #f8f9fa;
    
    /* Widget Newsletter - Couleurs personnalisables */
    --ap-widget-newsletter-bg: #2c3e50;
    --ap-widget-newsletter-title: #27ae60;
    --ap-widget-newsletter-button-bg: #ffffff;
    --ap-widget-newsletter-button-text: #2c3e50;
    --ap-widget-newsletter-text: #ffffff;
    
    /* Espacements */
    --ap-spacing-xs: 4px;
    --ap-spacing-sm: 8px;
    --ap-spacing-md: 16px;
    --ap-spacing-lg: 24px;
    --ap-spacing-xl: 32px;
    --ap-spacing-xxl: 48px;
    
    /* Transitions */
    --ap-transition: 0.3s ease;
    
    /* Border radius */
    --ap-radius: 4px;
    --ap-radius-lg: 8px;
}

/* ===================================
   BASE STYLES
   =================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Lora, Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ap-text);
    background: var(--ap-bg);
    overflow-x: hidden;
}

/* ===================================
   ACCESSIBILITY
   =================================== */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    clip: auto !important;
    display: block;
    height: auto;
    left: 5px;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ===================================
   PRINT STYLES
   =================================== */
@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    .site-header,
    .site-footer,
    .site-sidebar,
    nav,
    .menu-toggle,
    .back-to-top {
        display: none !important;
    }
}

/**
 * ActualitesPro Main Styles
 * Optimized for Performance & Core Web Vitals
 *
 * @package ActualitesPro
 */

/* ===================================
   SITE CONTAINER
   =================================== */
:root {
    /* Responsive base */
    --ap-container-max: 1200px;
    /* Subtil: améliore l’UX sans changer la direction artistique */
    --ap-container-padding: clamp(16px, 2vw, 20px);
}

.site-container {
    max-width: var(--ap-container-max);
    margin: 0 auto;
    padding: 0 var(--ap-container-padding);
    width: 100%;
    box-sizing: border-box;
}

.header-container {
    width: 100%;
}

/* S'assurer que le body et #page ne débordent pas */
html {
    background: var(--ap-bg);
}

body {
    overflow-x: hidden;
    background: var(--ap-bg);
}

#page {
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===================================
   HEADER
   =================================== */
.site-header {
    background: var(--ap-header-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* White text on dark header - DESKTOP ONLY */
.site-header .site-title a,
.site-header .site-description,
.site-header .menu-toggle,
.site-header .menu-toggle-text,
.site-header .search-toggle {
    color: var(--ap-header-text) !important;
}

.site-header .menu-toggle-icon span {
    background: var(--ap-header-text) !important;
}

/* Desktop menu links - white on dark header */
@media (min-width: 768px) {
    .site-header .primary-menu a,
    .site-header .primary-menu .menu-link {
        color: var(--ap-header-text) !important;
    }
    
    .site-header .primary-menu a:hover,
    .site-header .primary-menu .current-menu-item a,
    .site-header .primary-menu .menu-link:hover,
    .site-header .primary-menu .current-menu-item .menu-link {
        color: var(--ap-primary) !important;
    }
    
    /* S'assurer que le menu desktop fonctionne correctement */
    .menu-toggle {
        display: none !important;
    }
    
    .menu-close {
        display: none !important;
    }
    
    .main-navigation {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 !important;
        order: unset !important;
    }
    
    .header-inner {
        flex-wrap: nowrap !important;
        padding: var(--ap-spacing-md) 0 !important;
    }
    
    /* Desktop - Forcer 3 colonnes pour blocks (layout 3x2) */
    .ap-blocks-section .ap-blocks-grid,
    .site-container .ap-blocks-section .ap-blocks-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(2, auto) !important; /* 2 LIGNES */
        display: grid !important;
    }
    
    /* Positionnement explicite desktop (3x2) */
    .ap-blocks-grid .ap-block-column:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    
    .ap-blocks-grid .ap-block-column:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    
    .ap-blocks-grid .ap-block-column:nth-child(3) {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }
    
    .ap-blocks-grid .ap-block-column:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    
    .ap-blocks-grid .ap-block-column:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    
    .ap-blocks-grid .ap-block-column:nth-child(6) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }
    
    /* Cacher les éléments mobile sur desktop */
    .menu-item-wrapper {
        display: block;
    }
    
    .submenu-toggle {
        display: none !important;
    }
    
    /* Restaurer le comportement desktop pour les liens */
    .primary-menu .menu-link {
        display: block;
        padding: 8px 0;
        color: var(--ap-text);
        font-weight: 500;
        text-decoration: none;
        transition: color var(--ap-transition);
        transform: none !important;
    }
    
    .primary-menu .menu-link:hover,
    .primary-menu .current-menu-item .menu-link {
        color: var(--ap-primary);
    }
    
    /* Restaurer la flèche desktop */
    .primary-menu .menu-item-has-children > .menu-item-wrapper > .menu-link::after {
        content: '▼';
        font-size: 10px;
        margin-left: 6px;
        transition: transform var(--ap-transition);
        display: inline;
    }
    
    .primary-menu .menu-item-has-children:hover > .menu-item-wrapper > .menu-link::after {
        transform: rotate(180deg);
    }
    
    /* S'assurer que les sous-menus desktop fonctionnent */
    .primary-menu .sub-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        min-width: 220px !important;
        background: var(--ap-header-bg) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        border-radius: 4px !important;
        padding: var(--ap-spacing-sm) 0 !important;
        margin: 0 !important;
        list-style: none !important;
        z-index: 1000 !important;
        border-left: none !important;
        padding-left: 0 !important;
        animation: none !important;
        max-height: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    .primary-menu li:hover > .sub-menu {
        display: block !important;
    }
    
    .primary-menu .sub-menu a {
        display: block !important;
        padding: var(--ap-spacing-sm) var(--ap-spacing-md) !important;
        color: var(--ap-header-text) !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        white-space: nowrap !important;
        transition: all var(--ap-transition) !important;
    }
    
    .primary-menu .sub-menu a:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--ap-primary) !important;
        padding-left: calc(var(--ap-spacing-md) + 8px) !important;
    }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ap-spacing-md) 0;
}

/* Logo */
.site-branding {
    flex-shrink: 0;
}

.custom-logo-link {
    display: block;
    line-height: 1;
}

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

.site-identity .site-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.site-identity .site-title a {
    color: var(--ap-text);
}

.site-description {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--ap-text-light);
}

/* Navigation */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

.primary-menu-container {
    display: flex;
}

.primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--ap-spacing-lg);
}

.primary-menu li {
    margin: 0;
}

.primary-menu a,
.primary-menu .menu-link {
    display: block;
    padding: 8px 0;
    color: var(--ap-text);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--ap-transition);
}

/* Couleurs de menu pilotées par Customizer */
.primary-menu a:hover,
.primary-menu .menu-link:hover {
    color: var(--ap-menu-hover, var(--ap-primary));
}

.primary-menu a:visited,
.primary-menu .menu-link:visited,
.primary-menu .current-menu-item a,
.primary-menu .current-menu-item .menu-link {
    color: var(--ap-menu-active, var(--ap-primary));
}

/* ===================================
   SOUS-MENUS DROPDOWN (DESKTOP)
   =================================== */

/* Container pour sous-menu */
.primary-menu li {
    position: relative;
}

/* Sous-menu caché par défaut */
.primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--ap-header-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: var(--ap-spacing-sm) 0;
    margin: 0;
    list-style: none;
    z-index: 1000;
}

/* Afficher le sous-menu au survol */
.primary-menu li:hover > .sub-menu {
    display: block;
}

/* Desktop - Le wrapper ne doit pas bloquer le hover */
@media (min-width: 768px) {
    .primary-menu li:hover > .sub-menu {
        display: block;
    }
}

/* Liens dans sous-menu */
.primary-menu .sub-menu a {
    display: block;
    padding: var(--ap-spacing-sm) var(--ap-spacing-md);
    color: var(--ap-header-text);
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    transition: all var(--ap-transition);
}

.primary-menu .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--ap-menu-hover, var(--ap-primary));
    padding-left: calc(var(--ap-spacing-md) + 8px);
}

/* Item actif dans sous-menu */
.primary-menu .sub-menu .current-menu-item a {
    background: rgba(255, 255, 255, 0.1);
    color: var(--ap-primary);
}

/* Flèche indicatrice pour items avec sous-menu */
.primary-menu .menu-item-has-children > a::after {
    content: '▼';
    font-size: 10px;
    margin-left: 6px;
    transition: transform var(--ap-transition);
}

.primary-menu .menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Sous-sous-menus (niveau 3) */
.primary-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 2px;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.menu-toggle-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-toggle-icon span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ap-text);
    transition: transform var(--ap-transition);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: var(--ap-spacing-sm);
}

.search-toggle {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--ap-text);
    transition: color var(--ap-transition);
}

.search-toggle:hover {
    color: var(--ap-primary);
}

/* Header Search */
.header-search {
    display: none;
    padding: var(--ap-spacing-lg) 0;
    background: var(--ap-bg-light);
}

.header-search.active {
    display: block;
}

/* ===================================
   HERO SECTION
   =================================== */
.ap-hero {
    padding: var(--ap-spacing-xl) 0;
    background: var(--ap-bg);
}

.ap-hero-grid {
    display: grid;
    gap: var(--ap-spacing-md);
}

/* Layout avec 3 images : 1 grande + 2 petites empilées */
.ap-hero-3 .ap-hero-grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.ap-hero-3 .ap-hero-main {
    grid-column: 1;
    grid-row: 1 / 3;
}

.ap-hero-3 .ap-hero-small:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.ap-hero-3 .ap-hero-small:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

/* Layout avec 4 images : 2 grandes côte à côte + 2 petites dessous */
.ap-hero-4 .ap-hero-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
}

.ap-hero-4 .ap-hero-main:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.ap-hero-4 .ap-hero-main:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.ap-hero-4 .ap-hero-small:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.ap-hero-4 .ap-hero-small:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}

/* Hero Cards */
.ap-hero-card {
    position: relative;
    border-radius: var(--ap-radius);
    overflow: hidden;
    background: var(--ap-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform var(--ap-transition), box-shadow var(--ap-transition);
}

.ap-hero-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.ap-hero-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ap-hero-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f0f0f0;
}

.ap-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-hero-overlay {
    position: absolute;
    top: var(--ap-spacing-sm);
    left: var(--ap-spacing-sm);
    z-index: 2;
}

.ap-hero-categories {
    position: absolute;
    top: var(--ap-spacing-sm);
    left: var(--ap-spacing-sm);
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ap-category-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--ap-primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--ap-radius-sm);
    position: absolute;
    top: var(--ap-spacing-sm);
    left: var(--ap-spacing-sm);
    z-index: 3;
}

.ap-hero-categories .ap-category-badge {
    position: relative;
    top: auto;
    left: auto;
}

/* Desktop - Badge plus visible */
@media (min-width: 768px) {
    .ap-category-badge {
        font-size: 13px;
        padding: 5px 14px;
    }
}

/* Mobile - Badge plus petit */
@media (max-width: 767px) {
    .ap-category-badge {
        font-size: 11px;
        padding: 3px 10px;
        top: 6px;
        left: 6px;
    }
}

.ap-hero-content {
    padding: var(--ap-spacing-md);
}

.ap-hero-main .ap-hero-content {
    padding: var(--ap-spacing-lg);
}

.ap-hero-title {
    margin: 0 0 var(--ap-spacing-sm);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.ap-hero-main .ap-hero-title {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
}

.ap-hero-excerpt {
    margin: var(--ap-spacing-sm) 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ap-text-light);
}

.ap-hero-meta {
    font-size: 14px;
    color: var(--ap-text-light);
}

/* ===================================
   FEATURED LIST - À LA UNE
   =================================== */
.ap-featured-list {
    padding: var(--ap-spacing-xl) 0;
    background: var(--ap-bg-light);
}

.ap-section-title {
    margin: 0 0 var(--ap-spacing-xl);
    padding-bottom: var(--ap-spacing-sm);
    border-bottom: 3px solid var(--ap-primary);
    font-size: clamp(24px, 4vw, 32px);
}

/* Layout 2 colonnes : contenu + sidebar */
.ap-featured-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--ap-spacing-xl);
}

.ap-featured-main {
    min-width: 0; /* Évite le débordement */
}

.ap-featured-sidebar {
    position: static;
    align-self: start;
}

.ap-featured-category-block {
    margin-bottom: var(--ap-spacing-xl);
}

.ap-featured-category-block:last-child {
    margin-bottom: 0;
}

.ap-featured-category-title {
    margin: 0 0 var(--ap-spacing-lg);
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
}

.ap-featured-category-title a {
    color: var(--ap-text);
    text-decoration: none;
    transition: color var(--ap-transition);
}

.ap-featured-category-title a:hover {
    color: var(--ap-primary);
}

.ap-featured-articles {
    display: flex;
    flex-direction: column;
    gap: var(--ap-spacing-lg);
}

.ap-featured-item {
    background: var(--ap-bg);
    border-radius: var(--ap-radius);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--ap-transition), transform var(--ap-transition);
}

.ap-featured-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateX(4px);
}

.ap-featured-link {
    display: flex;
    gap: var(--ap-spacing-md);
    padding: var(--ap-spacing-md);
    color: inherit;
    text-decoration: none;
    align-items: center;
}

.ap-featured-image {
    position: relative !important;
    flex-shrink: 0;
    width: 150px;
    height: 100px;
    overflow: hidden;
    border-radius: var(--ap-radius);
    background: #f0f0f0;
}

.ap-featured-number {
    position: absolute !important;
    top: var(--ap-spacing-sm) !important;
    left: var(--ap-spacing-sm) !important;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ap-primary);
    color: white;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Desktop - Numéro plus grand */
@media (min-width: 768px) {
    .ap-featured-number {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}

.ap-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-featured-content {
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.ap-featured-title {
    margin: 0 0 var(--ap-spacing-xs);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ap-text);
}

.ap-featured-meta {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-sm);
    margin-bottom: var(--ap-spacing-sm);
    font-size: 13px;
    color: var(--ap-text-light);
}

.ap-featured-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ap-text-light);
}

/* Sidebar styling */
.ap-featured-sidebar .widget {
    margin-bottom: var(--ap-spacing-lg);
    padding: var(--ap-spacing-md);
    background: var(--ap-bg);
    border-radius: var(--ap-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.ap-featured-sidebar .widget:last-child {
    margin-bottom: 0;
}

.ap-featured-sidebar .widget-title {
    margin: 0 0 var(--ap-spacing-md);
    font-size: 18px;
    font-weight: 600;
    padding-bottom: var(--ap-spacing-xs);
    border-bottom: 2px solid var(--ap-primary);
}

.ap-ad-placeholder {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 2px dashed #ddd;
    border-radius: var(--ap-radius);
    text-align: center;
    color: var(--ap-text-light);
}

/* Responsive Tablette */
@media (max-width: 1024px) {
    .ap-featured-layout {
        grid-template-columns: 1fr 280px;
    }
    
    .ap-featured-number {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    
    .ap-featured-image {
        width: 120px;
        height: 80px;
    }
    
    .ap-featured-title {
        font-size: 16px;
    }
}

/* Mobile responsive */
@media (max-width: 767px) {
    .ap-featured-layout {
        grid-template-columns: 1fr;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ap-featured-sidebar {
        position: static;
        max-height: none;
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ap-featured-main {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ap-featured-link {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ap-featured-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        top: 8px !important;
        left: 8px !important;
    }
    
    .ap-featured-image {
        width: 100%;
        height: 200px;
    }
}

/* ===================================
   BLOCKS SECTION - LAYOUT 2x2 FORCÉ
   =================================== */
.ap-blocks-section {
    padding: var(--ap-spacing-xl) 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.ap-block-title {
    margin: 0 0 var(--ap-spacing-lg);
    padding-bottom: var(--ap-spacing-sm);
    border-bottom: 3px solid var(--ap-primary);
}

/* Règles de base pour tous les écrans (sans grid-template-rows forcé) */
.ap-blocks-section .ap-blocks-grid,
.site-container .ap-blocks-section .ap-blocks-grid,
.homepage-content .ap-blocks-section .ap-blocks-grid,
.content-area .ap-blocks-section .ap-blocks-grid {
    display: grid;
    gap: var(--ap-spacing-xl);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Forcer chaque colonne à prendre exactement 50% */
.ap-blocks-section .ap-block-column,
.site-container .ap-blocks-section .ap-block-column {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Grid 3x2 FORCÉ - DESKTOP UNIQUEMENT (6 catégories) */
@media (min-width: 768px) {
    .ap-blocks-section .ap-blocks-grid,
    .site-container .ap-blocks-section .ap-blocks-grid,
    .homepage-content .ap-blocks-section .ap-blocks-grid,
    .content-area .ap-blocks-section .ap-blocks-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 colonnes */
        grid-template-rows: repeat(2, auto) !important; /* 2 lignes */
        grid-auto-rows: auto !important;
    }
    
    /* Positionner explicitement les colonnes dans le grid 3x2 (6 catégories) - DESKTOP */
    .ap-blocks-grid .ap-block-column:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    
    .ap-blocks-grid .ap-block-column:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    
    .ap-blocks-grid .ap-block-column:nth-child(3) {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }
    
    .ap-blocks-grid .ap-block-column:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    
    .ap-blocks-grid .ap-block-column:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    
    .ap-blocks-grid .ap-block-column:nth-child(6) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }
}

.ap-block-cat-title {
    margin: 0 0 var(--ap-spacing-md);
    font-size: 20px;
    font-weight: 600;
}

.ap-block-cat-title a {
    color: var(--ap-text);
    text-decoration: none;
    transition: color var(--ap-transition);
}

.ap-block-cat-title a:hover {
    color: var(--ap-primary);
}

.ap-block-posts {
    display: flex;
    flex-direction: column;
    gap: var(--ap-spacing-md);
}

.ap-block-item {
    background: var(--ap-bg);
    border-radius: var(--ap-radius);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--ap-transition);
}

.ap-block-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ap-block-link {
    display: flex;
    gap: var(--ap-spacing-sm);
    color: inherit;
    text-decoration: none;
}

.ap-block-image {
    flex-shrink: 0;
    width: 100px;
    height: 100px; /* Hauteur fixe au lieu de aspect-ratio */
    overflow: hidden;
    background: #f0f0f0;
    border-radius: var(--ap-radius-sm);
}

.ap-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ap-block-content {
    flex: 1;
    padding: var(--ap-spacing-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ap-block-post-title {
    margin: 0 0 var(--ap-spacing-xs);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.ap-block-meta {
    font-size: 13px;
    color: var(--ap-text-light);
}

/* ===================================
   PROMO SECTION
   =================================== */
.ap-promo-section {
    padding: var(--ap-spacing-xl) 0;
    background: var(--ap-bg-light);
}

.ap-promo-section .ap-block-title {
    color: var(--ap-secondary);
    border-bottom-color: var(--ap-secondary);
}

/* Utilise les mêmes styles que ap-blocks-grid */

/* ===================================
   POSTS GRID
   =================================== */
/* ===================================
   PAGES ARCHIVES / CATÉGORIES
   =================================== */

.page-header {
    margin-bottom: var(--ap-spacing-xxl);
    padding: var(--ap-spacing-xl) var(--ap-spacing-lg);
    border-bottom: 2px solid var(--ap-border);
    background: linear-gradient(135deg, var(--ap-bg-light) 0%, var(--ap-bg) 100%);
    border-radius: 8px;
}

.page-title {
    margin: 0 0 var(--ap-spacing-md);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    color: var(--ap-text);
    line-height: 1.2;
}

.archive-description {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ap-text);
}

.archive-description p {
    margin: 0 0 var(--ap-spacing-sm);
}

.archive-description p:last-child {
    margin-bottom: 0;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--ap-spacing-lg);
}

.post-grid-card {
    background: var(--ap-bg);
    border-radius: var(--ap-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform var(--ap-transition), box-shadow var(--ap-transition);
}

.post-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.post-grid-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.post-grid-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f0f0f0;
}

.post-grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-grid-category {
    position: absolute;
    top: var(--ap-spacing-sm);
    left: var(--ap-spacing-sm);
    padding: 4px 12px;
    background: var(--ap-primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--ap-radius-sm);
}

.post-grid-content {
    padding: var(--ap-spacing-md);
}

.post-grid-title {
    margin: 0 0 var(--ap-spacing-sm);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.post-grid-meta {
    margin-bottom: var(--ap-spacing-sm);
    font-size: 14px;
    color: var(--ap-text-light);
}

.post-grid-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ap-text-light);
}

/* ===================================
   CONTENT AREA - Espacement après header
   =================================== */
.content-area {
    padding-top: calc(var(--ap-spacing-xl) * 0.55);
    min-width: 0; /* Évite débordement si Auto-Ads injecte dans #primary */
}

/* .single-post-area padding-top géré dans la section SINGLE POST - RESPONSIVE */

.site-main {
    /* Évite le cumul d’espacements (content-area gère déjà l’air sous le header) */
    padding-top: 0;
    min-width: 0; /* Grid/flex : contenu + annonces ne forcent pas la largeur */
}

/* Desktop - Plus d'espace (55% de la valeur) */
@media (min-width: 768px) {
    .content-area {
        padding-top: calc(var(--ap-spacing-xxl) * 0.55);
    }
    
    /* .single-post-area padding-top géré dans la section SINGLE POST - RESPONSIVE */
    
    .site-main {
        padding-top: 0;
    }
}

/* ===================================
   SINGLE POST
   =================================== */
/* Fond général autour de l'article (zone claire comme 2e capture) */
.single-post-area {
    background: var(--ap-bg-light);
    padding-bottom: var(--ap-spacing-xxl);
    /* padding-top géré par media queries dans la section SINGLE POST - RESPONSIVE */
}

/* Carte principale de l'article */
.single-article {
    max-width: 860px;
    margin: 0 auto var(--ap-spacing-xxl);
    padding: var(--ap-spacing-xl);
    background: #ffffff;
    border-radius: var(--ap-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Blocs sous l'article : partage, auteur, similaires, commentaires */
.single-post-area .entry-share,
.single-post-area .author-box,
.single-post-area .related-posts,
.single-post-area .comments-area {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--ap-spacing-xl);
    background: #ffffff;
    border-radius: var(--ap-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    padding: var(--ap-spacing-lg);
}

.entry-header {
    margin-bottom: var(--ap-spacing-lg);
}

.entry-categories {
    margin-bottom: var(--ap-spacing-sm);
    display: flex;
    gap: var(--ap-spacing-xs);
}

.category-badge {
    padding: 4px 12px;
    background: var(--ap-primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--ap-radius-sm);
    text-decoration: none;
}

.entry-title {
    margin: 0 0 var(--ap-spacing-md);
    font-size: clamp(28px, 5vw, 36px);
    line-height: 1.3;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-spacing-md);
    font-size: 14px;
    color: var(--ap-text); /* Meilleur contraste WCAG AA (12.63:1) */
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-xs);
    font-size: 14px; /* Force explicitement pour cohérence */
    line-height: 1.4;
}

.meta-author img {
    border-radius: 50%;
}

/* Fix: Taille uniforme pour author-name dans les meta */
.entry-meta .author-name {
    font-size: inherit; /* Hérite du 14px de .entry-meta */
    margin: 0;
    font-weight: 400; /* Poids normal comme les autres meta */
}

.entry-meta .author-name a {
    color: var(--ap-text);
    font-weight: 500;
    transition: color 0.2s ease;
}

.entry-meta .author-name a:hover {
    color: var(--ap-primary);
}

.entry-featured-image {
    margin-bottom: var(--ap-spacing-xl);
}

.entry-featured-image img {
    width: 100%;
    height: auto;
    border-radius: var(--ap-radius);
}

.image-caption {
    margin-top: var(--ap-spacing-sm);
    font-size: 14px;
    color: var(--ap-text-light);
    font-style: italic;
}

/* Entry Content - Google Discover optimized */
.entry-content {
    font-size: 18px;
    line-height: 1.7;
    color: var(--ap-text);
}

.entry-content,
.page-content {
    overflow-wrap: anywhere; /* URLs/strings longues */
    word-break: break-word;
}

.entry-content :where(img, video, iframe),
.page-content :where(img, video, iframe) {
    max-width: 100%;
    height: auto;
}

/* Tables responsives (source fréquente de scroll horizontal) */
.entry-content table,
.page-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

/* Code blocks */
.entry-content pre,
.page-content pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.entry-content code,
.page-content code {
    overflow-wrap: anywhere;
}

/* Embeds Gutenberg (YouTube, etc.) */
.entry-content .wp-block-embed__wrapper,
.page-content .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
}

.entry-content .wp-block-embed__wrapper iframe,
.page-content .wp-block-embed__wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.entry-content > * {
    margin-bottom: var(--ap-spacing-lg);
}

.entry-content p {
    margin-bottom: var(--ap-spacing-lg);
}

.entry-content h2 {
    margin-top: var(--ap-spacing-xxl);
    margin-bottom: var(--ap-spacing-md);
}

.entry-content h3 {
    margin-top: var(--ap-spacing-xl);
    margin-bottom: var(--ap-spacing-md);
}

.entry-content img {
    border-radius: var(--ap-radius);
}

.entry-content blockquote {
    margin: var(--ap-spacing-xl) 0;
    padding: var(--ap-spacing-md) var(--ap-spacing-lg);
    border-left: 4px solid var(--ap-primary);
    background: var(--ap-bg-light);
    font-size: 20px;
    line-height: 1.6;
    font-style: italic;
}

.entry-footer {
    margin-top: var(--ap-spacing-xl);
    padding-top: var(--ap-spacing-lg);
    border-top: 1px solid var(--ap-border);
}

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-spacing-xs);
    align-items: center;
}

.tags-label {
    font-weight: 600;
    margin-right: var(--ap-spacing-xs);
}

.tag-link {
    padding: 4px 12px;
    background: var(--ap-bg-light);
    color: var(--ap-text);
    font-size: 14px;
    border-radius: var(--ap-radius-sm);
    text-decoration: none;
    transition: background var(--ap-transition);
}

.tag-link:hover {
    background: var(--ap-primary);
    color: white;
}

/* Share Buttons (padding/background gérés par .single-post-area bloc commun) */
.entry-share {
    margin-top: var(--ap-spacing-xl);
}

.share-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--ap-spacing-sm);
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-spacing-sm);
}

.share-button {
    padding: 8px 16px;
    background: var(--ap-primary);
    color: white;
    border-radius: var(--ap-radius-sm);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background var(--ap-transition);
}

.share-button:hover {
    background: var(--ap-secondary);
    color: white;
}

/* Author Box (padding/background gérés par .single-post-area bloc commun) */
.author-box {
    display: flex;
    gap: var(--ap-spacing-lg);
    margin-top: var(--ap-spacing-xxl);
}

.author-avatar img {
    border-radius: 50%;
}

.author-info {
    flex: 1;
}

/* Author name uniquement dans la boîte d'auteur (bas d'article) */
.author-box .author-name {
    margin: 0 0 var(--ap-spacing-sm);
    font-size: 20px;
    font-weight: 600;
}

.author-bio {
    margin-bottom: var(--ap-spacing-md);
    line-height: 1.6;
}

.author-link {
    color: var(--ap-primary);
    font-weight: 600;
}

/* Related Posts */
.related-posts {
    margin-top: var(--ap-spacing-xxl);
}

.related-posts-title {
    margin: 0 0 var(--ap-spacing-lg);
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes pour layout 3x2 */
    grid-template-rows: repeat(2, auto); /* 2 lignes */
    gap: var(--ap-spacing-lg);
}

/* ===================================
   SINGLE POST - RESPONSIVE
   =================================== */

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    .single-post-area {
        padding-top: var(--ap-spacing-lg);
        padding-bottom: var(--ap-spacing-lg);
    }
    
    .single-article,
    .single-post-area .entry-share,
    .single-post-area .author-box,
    .single-post-area .related-posts,
    .single-post-area .comments-area {
        padding: var(--ap-spacing-md);
        margin-bottom: var(--ap-spacing-lg);
    }
    
    .author-box {
        flex-direction: column;
        gap: var(--ap-spacing-md);
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
        grid-template-rows: auto;
    }
    
    .share-buttons {
        gap: var(--ap-spacing-xs);
    }
    
    .share-button {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Tablette (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .single-post-area {
        padding-top: calc(var(--ap-spacing-xxl) * 0.55);
    }
    
    .single-article,
    .single-post-area .entry-share,
    .single-post-area .author-box,
    .single-post-area .related-posts,
    .single-post-area .comments-area {
        padding: var(--ap-spacing-lg);
    }
    
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
        grid-template-rows: auto;
    }
}

/* Desktop (min-width: 1024px) */
@media (min-width: 1024px) {
    .single-post-area {
        padding-top: calc(var(--ap-spacing-xxl) * 0.75);
    }
}

/* Post Navigation */
.post-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--ap-spacing-lg);
    margin-top: var(--ap-spacing-xxl);
}

.post-navigation a {
    display: block;
    padding: var(--ap-spacing-lg);
    background: var(--ap-bg-light);
    border-radius: var(--ap-radius);
    text-decoration: none;
    color: var(--ap-text); /* Couleur de texte par défaut */
    transition: background var(--ap-transition), color var(--ap-transition);
}

.post-navigation a:hover {
    background: var(--ap-primary);
    color: white;
}

.nav-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: var(--ap-spacing-xs);
    text-transform: uppercase;
    color: inherit; /* Hériter de la couleur du parent */
}

.nav-title {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    color: inherit; /* Hériter de la couleur du parent */
}

/* ===================================
   SIDEBAR
   =================================== */
.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--ap-spacing-xl);
}

.no-sidebar .content-wrapper {
    grid-template-columns: 1fr;
}

.widget-area {
    position: sticky;
    top: var(--ap-spacing-xl);
    align-self: start;
}

.widget {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Sidebar fallback: éviter sticky quand la sidebar passe sous le contenu */
@media (max-width: 1023px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        gap: var(--ap-spacing-lg);
    }
    .widget-area {
        position: static;
        top: auto;
    }
}

.widget {
    margin-bottom: var(--ap-spacing-xl);
    padding: var(--ap-spacing-lg);
    background: var(--ap-bg-light);
    border-radius: var(--ap-radius);
}

.widget-title {
    margin: 0 0 var(--ap-spacing-md);
    padding-bottom: var(--ap-spacing-sm);
    border-bottom: 2px solid var(--ap-primary);
    font-size: 18px;
}

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

.widget li {
    padding: var(--ap-spacing-xs) 0;
    border-bottom: 1px solid var(--ap-border);
}

.widget li:last-child {
    border-bottom: none;
}

.widget a {
    color: var(--ap-text);
    text-decoration: none;
}

.widget a:hover {
    color: var(--ap-primary);
}

/* ===================================
   WIDGET ARTICLES RÉCENTS - DESIGN PERSONNALISÉ
   =================================== */
.widget_recent_entries {
    background: var(--ap-widget-recent-bg) !important;
    border-radius: var(--ap-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.widget_recent_entries .widget-title {
    color: var(--ap-widget-recent-primary) !important;
    border-bottom: 3px solid var(--ap-widget-recent-primary) !important;
    background: linear-gradient(135deg, var(--ap-widget-recent-primary) 0%, var(--ap-widget-recent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    padding-left: var(--ap-spacing-md);
    margin-left: calc(-1 * var(--ap-spacing-md));
}

.widget_recent_entries .widget-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ap-widget-recent-primary) 0%, var(--ap-widget-recent-secondary) 100%);
    border-radius: 2px 0 0 2px;
}

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

.widget_recent_entries li {
    padding: var(--ap-spacing-sm) var(--ap-spacing-md);
    border-bottom: 1px solid var(--ap-border);
    background: var(--ap-widget-recent-bg);
    transition: all var(--ap-transition);
    position: relative;
    padding-left: calc(var(--ap-spacing-md) + 8px);
}

.widget_recent_entries li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ap-widget-recent-primary);
    opacity: 0;
    transition: opacity var(--ap-transition);
}

.widget_recent_entries li:hover {
    background: var(--ap-widget-recent-bg-hover);
    transform: translateX(4px);
}

.widget_recent_entries li:hover::before {
    opacity: 1;
}

.widget_recent_entries li:last-child {
    border-bottom: none;
}

.widget_recent_entries a {
    color: var(--ap-text);
    text-decoration: none;
    display: block;
    position: relative;
    padding-right: var(--ap-spacing-lg);
    transition: color var(--ap-transition);
}

.widget_recent_entries a::after {
    content: '▸';
    position: absolute;
    right: 0;
    color: var(--ap-widget-recent-primary);
    font-size: 14px;
    transition: transform var(--ap-transition);
}

.widget_recent_entries a:hover {
    color: var(--ap-widget-recent-primary);
}

.widget_recent_entries a:hover::after {
    transform: translateX(4px);
}

.widget_recent_entries .post-date {
    display: block;
    font-size: 12px;
    color: var(--ap-text-light);
    margin-top: var(--ap-spacing-xs);
}

/* ===================================
   WIDGET NEWSLETTER
   =================================== */
.widget_newsletter {
    background: var(--ap-widget-newsletter-bg, #2c3e50) !important;
    border-radius: var(--ap-radius);
    padding: var(--ap-spacing-xl) !important;
    color: var(--ap-widget-newsletter-text, #ffffff);
}

.widget_newsletter .widget-title {
    color: var(--ap-widget-newsletter-title, #27ae60) !important;
    border-bottom: none !important;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: var(--ap-spacing-lg);
    padding-bottom: 0;
}

.widget_newsletter .newsletter-description {
    color: var(--ap-widget-newsletter-text, #ffffff);
    margin-bottom: var(--ap-spacing-md);
    font-size: 14px;
}

.widget_newsletter .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--ap-spacing-md);
}

.widget_newsletter .newsletter-field-wrapper {
    width: 100%;
}

.widget_newsletter .newsletter-email {
    width: 100%;
    padding: var(--ap-spacing-sm) var(--ap-spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--ap-radius);
    background: rgba(255, 255, 255, 0.1);
    color: var(--ap-widget-newsletter-text, #ffffff);
    font-size: 14px;
    transition: border-color var(--ap-transition), background var(--ap-transition);
}

.widget_newsletter .newsletter-email::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.widget_newsletter .newsletter-email:focus {
    outline: none;
    border-color: var(--ap-widget-newsletter-title, #27ae60);
    background: rgba(255, 255, 255, 0.15);
}

.widget_newsletter .newsletter-consent-wrapper {
    display: flex;
    align-items: flex-start;
}

.widget_newsletter .newsletter-consent-label {
    display: flex;
    align-items: flex-start;
    gap: var(--ap-spacing-xs);
    cursor: pointer;
    font-size: 13px;
    color: var(--ap-widget-newsletter-text, #ffffff);
    line-height: 1.5;
}

.widget_newsletter .newsletter-consent {
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.widget_newsletter .newsletter-consent-text {
    flex: 1;
}

.widget_newsletter .newsletter-message {
    padding: var(--ap-spacing-sm);
    border-radius: var(--ap-radius);
    font-size: 13px;
    text-align: center;
}

.widget_newsletter .newsletter-message.success {
    background: rgba(39, 174, 96, 0.2);
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.3);
}

.widget_newsletter .newsletter-message.error {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.widget_newsletter .newsletter-submit {
    width: 100%;
    padding: var(--ap-spacing-sm) var(--ap-spacing-md);
    background: var(--ap-widget-newsletter-button-bg, #ffffff);
    color: var(--ap-widget-newsletter-button-text, #2c3e50);
    border: none;
    border-radius: var(--ap-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--ap-transition), transform var(--ap-transition);
}

.widget_newsletter .newsletter-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.widget_newsletter .newsletter-submit:active {
    transform: translateY(0);
}

.widget_newsletter .newsletter-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===================================
   FOOTER
   =================================== */
.site-footer {
    background: var(--ap-footer-bg);
    color: var(--ap-footer-text);
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Sticky footer : garde le footer en bas de la fenêtre quand peu de contenu */
#page {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 100vh;
}

#content,
.site-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Remplir la hauteur pour éviter le scroll dans le vide (peu d’articles) */
#content > #primary,
#content > .content-area {
    flex: 1;
    min-height: 0;
}

body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}

html {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
}

/* S'assurer qu'il n'y a pas d'espace après #page */
#page::after {
    display: none !important;
    content: none !important;
}

body::after {
    display: none !important;
    content: none !important;
}

.site-footer::after {
    display: none !important;
    content: none !important;
}

/* ===================================
   ACCESSIBILITY - Focus visible global
   =================================== */
:where(a, button, input, textarea, select):focus-visible {
    outline: 2px solid var(--ap-primary);
    outline-offset: 2px;
}

/* ===================================
   PROTECTION LAYOUT AUTO-ADS (Conforme TOS AdSense)
   =================================== */
/* 
 * Protection défensive contre Google AdSense Auto-Ads
 * Conforme aux TOS AdSense : responsive autorisé, masquage interdit
 * 
 * Principe : Protéger les containers parents et forcer le responsive
 * des annonces sans modifier leur contenu ni les masquer.
 */

/* Protection des containers parents (overflow-x pour éviter scroll horizontal) */
#content,
.site-content,
#primary,
.content-area,
.homepage-content,
.site-main,
.ap-featured-list,
.ap-featured-layout,
.ap-featured-sidebar,
.content-wrapper,
.widget-area,
.entry-content,
.site-container,
.ap-featured-main,
.ap-blocks-section {
    overflow-x: hidden;
    position: relative;
}

/* Responsive des annonces Auto-Ads : autorisé par Google AdSense TOS */
.adsbygoogle,
ins.adsbygoogle,
[class*="adsbygoogle"] {
    display: block !important;
    max-width: 100% !important; /* Responsive : autorisé par Google */
    width: auto !important; /* S'adapte au container : autorisé */
    box-sizing: border-box !important; /* Standard CSS : autorisé */
    overflow: hidden !important; /* Protection débordement : autorisé */
    margin: var(--ap-spacing-lg) auto !important; /* Espacement : autorisé */
    text-align: center;
}

/* Protection spécifique sidebar : garantir respect de la largeur disponible */
.ap-featured-sidebar .adsbygoogle,
.widget-area .adsbygoogle,
.widget .adsbygoogle,
.ap-featured-sidebar ins.adsbygoogle,
.widget-area ins.adsbygoogle,
.widget ins.adsbygoogle {
    max-width: 100% !important; /* Responsive : autorisé */
    width: 100% !important; /* S'adapte au container : autorisé */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Protection tablette : 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .adsbygoogle,
    ins.adsbygoogle,
    [class*="adsbygoogle"] {
        max-width: 100% !important; /* Responsive tablette : autorisé */
        width: 100% !important; /* Pleine largeur tablette : autorisé */
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Protection sidebar tablette */
    .ap-featured-sidebar .adsbygoogle,
    .widget-area .adsbygoogle,
    .widget .adsbygoogle,
    .ap-featured-sidebar ins.adsbygoogle,
    .widget-area ins.adsbygoogle,
    .widget ins.adsbygoogle {
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        float: none !important;
    }
}

/* Protection mobile : responsive standard (recommandé par Google) */
@media (max-width: 767px) {
    .adsbygoogle,
    ins.adsbygoogle,
    [class*="adsbygoogle"] {
        max-width: 100% !important; /* Responsive mobile : autorisé */
        width: 100% !important; /* Pleine largeur mobile : autorisé */
        height: auto !important; /* Adaptation hauteur : autorisé */
        min-height: 100px; /* Évite collapse visuel */
    }
    
    /* Empêcher Auto-Ads de créer des colonnes fixes sur mobile */
    .site-container .adsbygoogle,
    .content-wrapper .adsbygoogle,
    .ap-featured-layout .adsbygoogle,
    #primary .adsbygoogle,
    .content-area .adsbygoogle,
    .site-main .adsbygoogle,
    .homepage-content .adsbygoogle {
        display: block !important;
        float: none !important;
        clear: both !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Protection contre les formats fixes qui cassent le layout */
.adsbygoogle[style*="width:300px"],
.adsbygoogle[style*="width: 300px"],
.adsbygoogle[style*="width:728px"],
.adsbygoogle[style*="width: 728px"],
ins.adsbygoogle[style*="width:300px"],
ins.adsbygoogle[style*="width: 300px"],
ins.adsbygoogle[style*="width:728px"],
ins.adsbygoogle[style*="width: 728px"] {
    max-width: 100% !important; /* Force responsive même si style inline */
    width: auto !important; /* Override style inline pour responsive */
}

/* Si Auto-Ads insère des wrappers, les protéger aussi */
div[class*="adsbygoogle"],
div[id*="adsbygoogle"] {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.footer-widgets {
    padding: var(--ap-spacing-xxl) 0;
}

.footer-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ap-spacing-xl);
}

.footer-widget-area .widget {
    background: transparent;
    padding: 0;
}

.footer-widget-area .widget-title {
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.footer-widget-area .widget a {
    color: var(--ap-footer-text);
}

.footer-widget-area .widget a:hover {
    color: white;
}

.footer-bottom {
    padding: var(--ap-spacing-lg) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-info {
    font-size: 14px;
}

.site-info a {
    color: var(--ap-footer-text);
}

.site-info a:hover {
    color: white;
}

.footer-navigation {
    font-size: 14px;
}

.footer-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--ap-spacing-lg);
}

.footer-menu a {
    color: var(--ap-footer-text);
}

.footer-menu a:hover {
    color: white;
}

/* ===================================
   BACK TO TOP BUTTON - Premium Design
   =================================== */

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--ap-primary) 0%, var(--ap-secondary) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8) translateY(20px);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(22, 160, 133, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.1);
}

/* État visible */
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

/* Hover effet */
.back-to-top:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 8px 30px rgba(22, 160, 133, 0.4),
                0 4px 12px rgba(0, 0, 0, 0.15);
}

.back-to-top:active {
    transform: scale(0.95) translateY(-2px);
}

/* Focus accessibility */
.back-to-top:focus {
    outline: 3px solid var(--ap-primary);
    outline-offset: 4px;
}

.back-to-top:focus:not(:focus-visible) {
    outline: none;
}

/* Animation de l'icône au hover */
.back-to-top:hover svg {
    animation: bounce-arrow 0.6s ease infinite;
}

@keyframes bounce-arrow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 480px) {
    .back-to-top {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: opacity 0.2s ease, visibility 0.2s ease;
        transform: none !important;
    }
    
    .back-to-top:hover svg {
        animation: none !important;
    }
}

/* Print - Hide button */
@media print {
    .back-to-top {
        display: none !important;
    }
}

/* ===================================
   PAGINATION
   =================================== */
.pagination {
    margin: var(--ap-spacing-xxl) 0;
}

.pagination .page-numbers {
    display: flex;
    justify-content: center;
    gap: var(--ap-spacing-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination .page-numbers li {
    margin: 0;
}

.pagination .page-numbers a,
.pagination .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--ap-spacing-sm);
    background: var(--ap-bg-light);
    color: var(--ap-text);
    text-decoration: none;
    border-radius: var(--ap-radius-sm);
    transition: background var(--ap-transition), color var(--ap-transition);
}

.pagination .page-numbers a:hover,
.pagination .page-numbers .current {
    background: var(--ap-primary);
    color: white;
}

/* ===================================
   BREADCRUMBS
   =================================== */
.breadcrumbs {
    margin-bottom: var(--ap-spacing-lg);
    font-size: 14px;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-spacing-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs li::after {
    content: '/';
    margin-left: var(--ap-spacing-xs);
    color: var(--ap-text-light);
}

.breadcrumbs li:last-child::after {
    display: none;
}

.breadcrumbs a {
    color: var(--ap-text-light);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--ap-primary);
}

/* ===================================
   COMMENTS
   =================================== */
.comments-area {
    margin-top: var(--ap-spacing-xxl);
}

.comments-title {
    margin-bottom: var(--ap-spacing-lg);
}

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

.comment-body {
    margin-bottom: var(--ap-spacing-xl);
    padding: var(--ap-spacing-lg);
    background: var(--ap-bg-light);
    border-radius: var(--ap-radius);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: var(--ap-spacing-sm);
    margin-bottom: var(--ap-spacing-sm);
}

.comment-author img {
    border-radius: 50%;
}

.comment-metadata {
    font-size: 14px;
    color: var(--ap-text-light);
    margin-bottom: var(--ap-spacing-sm);
}

.comment-content {
    line-height: 1.6;
}

.reply {
    margin-top: var(--ap-spacing-sm);
}

.comment-reply-link {
    font-size: 14px;
    color: var(--ap-primary);
    text-decoration: none;
}

.comment-form {
    margin-top: var(--ap-spacing-xl);
}

.comment-form-comment textarea {
    width: 100%;
}

/* ===================================
   SEARCH FORM
   =================================== */
.search-form-wrapper {
    position: relative;
    display: flex;
}

.search-field {
    flex: 1;
    padding-right: 48px;
}

.search-submit,
.search-form input[type="submit"] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    min-width: 7rem;
    width: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ap-primary);
    color: white;
    border: none;
    border-radius: 0 var(--ap-radius-sm) var(--ap-radius-sm) 0;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

/* Formulaire header : bouton icône seul, largeur fixe */
.search-form-wrapper .search-submit:has(svg) {
    width: 48px;
    min-width: 48px;
    padding-left: 0;
    padding-right: 0;
}

.search-submit:hover,
.search-form input[type="submit"]:hover {
    background: var(--ap-secondary);
}

/* Sidebar : bouton Rechercher sur une ligne, ne pas rétrécir */
.widget-area .search-form-wrapper,
#secondary .search-form-wrapper {
    display: flex;
    align-items: stretch;
}

.widget-area .search-form .search-field,
#secondary .search-form .search-field {
    flex: 1;
    min-width: 0;
}

.widget-area .search-submit,
.widget-area .search-form input[type="submit"],
#secondary .search-submit,
#secondary .search-form input[type="submit"] {
    position: relative;
    flex-shrink: 0;
    min-width: 7rem;
    white-space: nowrap;
}

/* Si le widget n’a pas .search-form-wrapper (formulaire par défaut WP) */
.widget-area .search-form:not(:has(.search-form-wrapper)),
#secondary .search-form:not(:has(.search-form-wrapper)) {
    display: flex;
    flex-wrap: nowrap;
}

.widget-area .search-form:not(:has(.search-form-wrapper)) .search-field,
.widget-area .search-form:not(:has(.search-form-wrapper)) input[type="search"],
#secondary .search-form:not(:has(.search-form-wrapper)) .search-field,
#secondary .search-form:not(:has(.search-form-wrapper)) input[type="search"] {
    flex: 1;
    min-width: 0;
}

/* Bloc Recherche Gutenberg dans la sidebar */
.widget-area .wp-block-search__inside-wrapper,
#secondary .wp-block-search__inside-wrapper,
.widget-area .wp-block-search:not(:has(.wp-block-search__inside-wrapper)),
#secondary .wp-block-search:not(:has(.wp-block-search__inside-wrapper)) {
    display: flex;
    flex-wrap: nowrap;
}

.widget-area .wp-block-search__input,
#secondary .wp-block-search__input {
    flex: 1;
    min-width: 5rem;
}

.widget-area .wp-block-search__button,
#secondary .wp-block-search__button {
    flex-shrink: 0;
    min-width: 7rem;
    white-space: nowrap;
}

/* ===================================
   404 PAGE
   =================================== */
.error-404-content {
    text-align: center;
    padding: var(--ap-spacing-xxl) 0;
}

.error-404-title {
    font-size: clamp(60px, 15vw, 120px);
    margin: 0 0 var(--ap-spacing-md);
    color: var(--ap-primary);
}

.error-404-subtitle {
    margin: 0 0 var(--ap-spacing-md);
}

.error-404-text {
    margin-bottom: var(--ap-spacing-xl);
    font-size: 18px;
    color: var(--ap-text-light);
}

.error-404-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ap-spacing-lg);
}

.error-404-search {
    max-width: 400px;
    width: 100%;
}

.error-404-widgets {
    margin-top: var(--ap-spacing-xxl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ===================================
   RESPONSIVE - TABLET
   =================================== */
@media (max-width: 1023px) {
    :root {
        --ap-spacing-xl: 24px;
        --ap-spacing-xxl: 32px;
    }
    
    .content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .footer-widgets-grid {
        grid-template-columns: 1fr;
    }
    
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
        grid-template-rows: repeat(3, auto); /* 3 lignes pour 6 articles */
    }
    
    /* Blocks - 2 colonnes sur tablette (3 colonnes sur desktop) */
    .ap-blocks-section .ap-blocks-grid,
    .site-container .ap-blocks-section .ap-blocks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, auto) !important; /* 3 LIGNES pour 6 catégories */
        display: grid !important;
    }
}

/* ===================================
   RESPONSIVE - MOBILE
   =================================== */
@media (max-width: 767px) {
    :root {
        --ap-spacing-lg: 16px;
        --ap-spacing-xl: 20px;
        --ap-spacing-xxl: 24px;
    }
    
    /* Site Container - Augmenter padding gauche pour éviter chevauchement avec scrollbar mobile */
    .site-container {
        padding-left: 16px !important; /* Espace suffisant pour la scrollbar mobile */
        padding-right: 16px !important; /* Aligné avec padding-left */
        padding-top: 0;
        padding-bottom: 0;
    }
    
    /* S'assurer que les sections ont aussi un padding suffisant */
    .ap-blocks-section {
        padding-left: 0 !important; /* Pas de double padding, déjà géré par site-container */
        padding-right: 0 !important;
    }
    
    /* Content Area - Espacement mobile (55% de la valeur) */
    .content-area {
        padding-top: calc(var(--ap-spacing-lg) * 0.55) !important;
    }
    
    /* .single-post-area padding-top géré dans la section SINGLE POST - RESPONSIVE (mobile) */
    
    .site-main {
        /* Évite le cumul (content-area gère déjà l’espace) */
        padding-top: 0 !important;
    }
    
    /* Header */
    .header-inner {
        flex-wrap: nowrap;
        align-items: center;
        padding: 10px 0;
    }
    
    .site-branding {
        order: 1;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    
    .custom-logo {
        max-height: 36px !important;
        height: auto;
        width: auto;
        display: block;
    }
    
    .custom-logo-link {
        display: flex;
        align-items: center;
        line-height: 1;
    }
    
    /* Menu Toggle Button */
    .menu-toggle {
        display: flex;
        order: 2;
        margin-left: auto;
        position: relative;
        z-index: 1001;
        align-items: center;
        height: 44px;
        min-height: 44px;
    }
    
    .header-actions {
        order: 3;
        display: flex;
        align-items: center;
        height: 44px;
        min-height: 44px;
    }
    
    .search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        min-height: 44px;
        padding: 8px;
    }
    
    /* Navigation full screen overlay */
    .main-navigation {
        order: 4;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh; /* Support pour les navigateurs modernes (iOS Safari) */
        background: var(--ap-bg);
        z-index: 1000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling iOS */
        padding-top: 60px;
        
        /* Hidden by default */
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        will-change: transform, opacity; /* Optimisation performance */
    }
    
    .main-navigation.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
    
    /* Menu Close Button - Visible sur mobile uniquement */
    .menu-close {
        display: flex !important;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1001;
        background: rgba(0, 0, 0, 0.1);
        border: none;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        transition: background 0.3s ease;
        -webkit-tap-highlight-color: transparent; /* Supprime le highlight sur tap iOS/Android */
        padding: 0 !important;
        margin: 0;
    }
    
    .menu-close:hover,
    .menu-close:active {
        background: rgba(0, 0, 0, 0.2);
    }
    
    .menu-close-icon {
        font-size: 24px;
        line-height: 1;
        color: var(--ap-text);
        font-weight: 300;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* Prevent body scroll when menu open - Amélioré pour iOS */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    /* Fix pour iOS Safari - Empêcher le scroll du body */
    @supports (-webkit-touch-callout: none) {
        body.menu-open {
            position: fixed;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    }
    
    /* ===================================
       MOBILE MENU - VERSION AMÉLIORÉE
       =================================== */
    
    /* Container - Force alignement gauche */
    .main-navigation .primary-menu-container {
        margin: 0 !important;
        padding: var(--ap-spacing-md) var(--ap-spacing-lg) !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Liste principale - Alignement strict gauche */
    .main-navigation .primary-menu {
        flex-direction: column !important;
        gap: 0 !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        display: flex !important;
    }
    
    /* Items de menu - Pleine largeur, alignement gauche */
    .main-navigation .primary-menu > li {
        border-bottom: 1px solid var(--ap-border);
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .main-navigation .primary-menu > li:last-child {
        border-bottom: none;
    }
    
    /* Wrapper pour lien + bouton */
    .main-navigation .menu-item-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Lien principal - Alignement gauche strict */
    .main-navigation .primary-menu .menu-link {
        display: block !important;
        flex: 1 1 auto !important;
        padding: var(--ap-spacing-md) 0 !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        color: var(--ap-text) !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        -webkit-tap-highlight-color: transparent;
        text-align: left !important;
        margin: 0 !important;
        min-width: 0;
    }
    
    .main-navigation .primary-menu .menu-link:hover,
    .main-navigation .primary-menu .menu-link:active,
    .main-navigation .primary-menu .menu-link:focus {
        color: var(--ap-menu-hover, var(--ap-primary)) !important;
        transform: none !important; /* Pas de translation pour faciliter le tap */
    }
    
    /* Force dark text on mobile menu overlay */
    .main-navigation.active .primary-menu .menu-link {
        color: var(--ap-text) !important;
    }
    
    .main-navigation.active .primary-menu .menu-link:hover,
    .main-navigation.active .primary-menu .menu-link:active {
        color: var(--ap-primary) !important;
    }
    
    /* Bouton toggle - Zone tactile optimisée */
    .main-navigation .submenu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 0 var(--ap-spacing-sm) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        flex-shrink: 0 !important;
        position: relative;
        z-index: 2;
    }
    
    .main-navigation .submenu-toggle:focus {
        outline: 2px solid var(--ap-primary) !important;
        outline-offset: 2px !important;
    }
    
    .main-navigation .submenu-toggle-icon {
        font-size: 20px !important;
        line-height: 1 !important;
        color: var(--ap-text) !important;
        transition: transform 0.2s ease !important;
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Rotation du chevron quand ouvert */
    .main-navigation .submenu-toggle[aria-expanded="true"] .submenu-toggle-icon {
        transform: rotate(90deg) !important;
    }
    
    /* Sous-menu - Accordéon amélioré */
    .main-navigation .primary-menu .sub-menu {
        display: none !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-left: var(--ap-spacing-lg) !important;
        background: var(--ap-bg-light) !important;
        border-left: 3px solid var(--ap-primary) !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Animation d'ouverture */
    .main-navigation .primary-menu .sub-menu.submenu-open {
        display: block !important;
        animation: slideDownMobile 0.2s ease-out !important;
    }
    
    @keyframes slideDownMobile {
        from {
            opacity: 0;
            max-height: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            max-height: 500px;
            transform: translateY(0);
        }
    }
    
    /* Animation de fermeture */
    .main-navigation .primary-menu .sub-menu.submenu-closing {
        animation: slideUpMobile 0.2s ease-out !important;
    }
    
    @keyframes slideUpMobile {
        from {
            opacity: 1;
            max-height: 500px;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            max-height: 0;
            transform: translateY(-8px);
        }
    }
    
    /* Liens dans sous-menu */
    .main-navigation .primary-menu .sub-menu a {
        display: block !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        padding: var(--ap-spacing-sm) var(--ap-spacing-md) !important;
        color: var(--ap-text) !important;
        text-decoration: none !important;
        transition: background 0.2s ease, color 0.2s ease !important;
        -webkit-tap-highlight-color: transparent;
        text-align: left !important;
        width: 100% !important;
    }
    
    .main-navigation .primary-menu .sub-menu a:hover,
    .main-navigation .primary-menu .sub-menu a:active {
        background: rgba(22, 160, 133, 0.1) !important;
        color: var(--ap-menu-hover, var(--ap-primary)) !important;
    }
    
    .main-navigation .primary-menu .sub-menu a:visited {
        color: var(--ap-menu-active, var(--ap-primary)) !important;
    }
    
    /* Supprimer l'ancien style de flèche sur mobile */
    .main-navigation .primary-menu .menu-item-has-children > a::after,
    .main-navigation .primary-menu .menu-item-has-children > .menu-item-wrapper > .menu-link::after {
        display: none !important;
    }
    
    /* Adaptation pour très petits écrans */
    @media (max-width: 360px) {
        .main-navigation .primary-menu .menu-link {
            font-size: 16px !important;
            padding: var(--ap-spacing-sm) 0 !important;
        }
        
        .main-navigation .submenu-toggle {
            width: 44px !important;
            min-width: 44px !important;
            height: 44px !important;
            min-height: 44px !important;
        }
    }
    
    /* Adaptation pour iOS - Amélioration tactile */
    @supports (-webkit-touch-callout: none) {
        .main-navigation .primary-menu .menu-link {
            -webkit-tap-highlight-color: rgba(22, 160, 133, 0.1);
        }
        
        .main-navigation .submenu-toggle {
            -webkit-tap-highlight-color: rgba(22, 160, 133, 0.1);
        }
    }
    
    /* Close button overlay */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh; /* Support iOS Safari */
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation; /* Améliore la réactivité tactile */
    }
    
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Hero */
    .ap-hero-3 .ap-hero-grid,
    .ap-hero-4 .ap-hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    
    .ap-hero-3 .ap-hero-main,
    .ap-hero-3 .ap-hero-small,
    .ap-hero-4 .ap-hero-main,
    .ap-hero-4 .ap-hero-small {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    
    /* Blocks - Mobile : Réinitialisation complète */
    .ap-blocks-section .ap-blocks-grid,
    .site-container .ap-blocks-section .ap-blocks-grid,
    .homepage-content .ap-blocks-section .ap-blocks-grid,
    .content-area .ap-blocks-section .ap-blocks-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        gap: 12px !important; /* Valeur fixe pour éviter les variables */
    }
    
    /* Réinitialiser complètement les positions grid sur mobile */
    .ap-blocks-grid .ap-block-column {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    
    /* Réduire l'espacement entre les items dans chaque colonne */
    .ap-block-posts {
        gap: var(--ap-spacing-xs) !important; /* Réduire l'espacement entre articles */
    }
    
    /* Réduire la marge du titre de catégorie sur mobile uniquement */
    .ap-block-column .ap-block-cat-title {
        margin: 0 0 var(--ap-spacing-xs) !important; /* Réduire de md à xs */
        font-size: 18px !important; /* Légèrement plus petit */
    }
    
    /* Posts Grid */
    .posts-grid {
        grid-template-columns: 1fr;
    }
    
    /* Single Post */
    .entry-content {
        font-size: 16px;
    }
    
    .author-box {
        flex-direction: column;
        text-align: center;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .post-navigation {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-bottom-inner {
        flex-direction: column;
        gap: var(--ap-spacing-md);
        text-align: center;
    }
    
    .footer-menu {
        flex-direction: column;
        gap: var(--ap-spacing-xs);
    }
    
    /* Share Buttons */
    .share-buttons {
        flex-direction: column;
    }
    
    /* Correction alignement "À la une" et sidebar sur mobile */
    .ap-section-title {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .ap-featured-list .site-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .widget-area {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .widget {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ap-featured-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ap-featured-sidebar .widget {
        width: 100% !important;
        max-width: 100% !important;
    }
}