/**
 * 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 */
body {
    overflow-x: hidden;
}

#page {
    width: 100%;
    overflow-x: hidden;
}

/* ===================================
   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: #ffffff !important;
}

.site-header .menu-toggle-icon span {
    background: #ffffff !important;
}

/* Desktop menu links - white on dark header */
@media (min-width: 768px) {
    .site-header .primary-menu a,
    .site-header .primary-menu .menu-link {
        color: #ffffff !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: #ffffff !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);
}

.primary-menu a:hover,
.primary-menu .current-menu-item a,
.primary-menu .menu-link:hover,
.primary-menu .current-menu-item .menu-link {
    color: 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: #ffffff;
    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-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-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;
}

/* 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);
}

.single-post-area {
    padding-top: calc(var(--ap-spacing-xl) * 0.55);
}

.site-main {
    /* Évite le cumul d’espacements (content-area gère déjà l’air sous le header) */
    padding-top: 0;
}

/* 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: calc(var(--ap-spacing-xxl) * 0.55);
    }
    
    .site-main {
        padding-top: 0;
    }
}

/* ===================================
   SINGLE POST
   =================================== */
.single-article {
    max-width: 800px;
    margin: 0 auto;
}

.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 */
.entry-share {
    margin-top: var(--ap-spacing-xl);
    padding: var(--ap-spacing-lg);
    background: var(--ap-bg-light);
    border-radius: var(--ap-radius);
}

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

.share-buttons {
    display: flex;
    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 */
.author-box {
    display: flex;
    gap: var(--ap-spacing-lg);
    margin-top: var(--ap-spacing-xxl);
    padding: var(--ap-spacing-lg);
    background: var(--ap-bg-light);
    border-radius: var(--ap-radius);
}

.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);
}

/* 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);
}

/* ===================================
   FOOTER
   =================================== */
.site-footer {
    background: var(--ap-footer-bg);
    color: var(--ap-footer-text);
}

/* ===================================
   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) */
.ap-featured-layout,
.ap-featured-sidebar,
.content-wrapper,
.widget-area,
.entry-content,
.site-container,
.ap-featured-main {
    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 {
        display: block !important;
        float: none !important;
        clear: both !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 {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    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;
}

.search-submit:hover {
    background: var(--ap-secondary);
}

/* ===================================
   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: calc(var(--ap-spacing-lg) * 0.55) !important;
    }
    
    .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-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-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;
    }
}