/*
Theme Name: Premium Partner
Theme URI: https://www.ouest-france.fr
Description: Thème éditorial rapide pour les sites partenaires. Palette réglable depuis Apparence → Couleurs du thème, mode clair ou sombre au choix, six styles d'en-tête, cinq styles de grille et cinq gabarits de page d'accueil.
Version: 3.0
Author: Ghis
Author URI: https://www.ouest-france.fr
License: GNU General Public License v2 or later
Text Domain: premium-discover
*/

/* ═══════════════════════════════════════════════════════════
   PALETTE — Premium Partner
   Valeurs par défaut aux couleurs Ouest-France. Chaque partenaire
   les remplace depuis Apparence → Couleurs du thème ; le mode
   clair ou sombre se choisit dans Config Home.
   ═══════════════════════════════════════════════════════════ */
:root {
    /* ── Couleurs de marque (réglables en back-office) ── */
    --theme-primary:        #E2001A;   /* rouge Ouest-France */
    --theme-secondary:      #F4F4F5;   /* gris de fond       */
    --theme-text:           #222222;   /* anthracite         */
    --theme-background:     #FFFFFF;   /* fond principal     */
    --theme-background-alt: #F4F4F5;   /* encarts            */
    --theme-cta:            #E2001A;   /* boutons            */
    --theme-primary-rgb:    226, 0, 26;

    /* ── Couleurs techniques (dérivées, aucun réglage) ── */
    --theme-primary-ink: #C40016;
    --card-bg:      #ffffff;
    --border-color: #E3E3E5;
    --text-muted:   #6B6B6B;
    --on-primary:   #ffffff;
    --on-image:     #ffffff;
    --footer-bg:          var(--theme-text);
    --footer-text:        var(--theme-background);
    --footer-text-muted:  #A8A8AA;
    --footer-border:      #3D3D3F;

    /* ── Alias historiques : le CSS existant continue de fonctionner ── */
    --bg-color:           var(--theme-background);
    --text-color:         var(--theme-text);
    --primary-blue:       var(--theme-primary-ink);
    --premium-blue-hover: var(--theme-text);

    --max-width: 1180px;
    --article-width: 720px;
    --sidebar-width: 300px;
    --layout-gap: 40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-blue); }
img { max-width: 100%; height: auto; display: block; border-radius: 6px; }

/* Structure Layout */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.article-container { max-width: var(--article-width); margin: 0 auto; padding: 0 20px; }

/* Header & Bureau */
.site-header { background: var(--card-bg); border-bottom: 1px solid var(--border-color); padding: 15px 0; position: sticky; top: 0; z-index: 100; }
.header-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; position: relative; }

/* Toggle fixe à droite du header — hors du flux du menu */
/* Toggle Dark / Light — déplacé dans le footer */
.footer-theme-toggle {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}
.theme-toggle-footer,
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    transition: border-color 0.2s, color 0.2s;
    width: auto;
    min-width: auto;
    height: auto;
    position: static;
    transform: none;
}
.theme-toggle-footer:hover,
.theme-toggle:hover { border-color: var(--theme-primary); color: var(--primary-blue); }
.toggle-icon { font-size: 15px; }
.toggle-label { font-weight: 500; }
.logo a { font-size: 24px; font-weight: 800; color: var(--theme-text); letter-spacing: -0.5px; }
.logo span { color: var(--primary-blue); }

/* Menu Principal (Bureau) */
.main-nav { flex: 1; display: flex; justify-content: flex-end; }
.main-nav .menu-header { display: flex; list-style: none; gap: 10px; padding: 0; margin: 0; flex-wrap: nowrap; }
.main-nav .menu-header li a { font-size: 13.5px; font-weight: 600; color: var(--text-color); display: block; padding: 5px 0; white-space: nowrap; }
.main-nav .menu-header a:hover, .main-nav .menu-header .current-menu-item > a { color: var(--primary-blue); }

.burger-btn, .nav-overlay { display: none; }

/* Homepage Grid & Content blocks (Style 1) */
.hp-section-title { font-size: 22px; font-weight: 700; color: var(--theme-text); margin: 40px 0 20px; position: relative; padding-left: 15px; }
.hp-section-title::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: var(--theme-primary); border-radius: 2px; }

.top-tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 100%)); gap: 20px; margin-bottom: 30px; }
.post-card-mini { display: flex; gap: 15px; background: var(--card-bg); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); align-items: center; }
.post-card-mini img { width: 90px; height: 90px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.post-card-mini h3 { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--theme-text); }

.category-block { margin-bottom: 40px; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 100%)); gap: 20px; }

.post-card { display: flex; gap: 20px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; padding: 20px; }
.post-card-img { width: 160px; height: 120px; object-fit: cover; flex-shrink: 0; }
.post-card-content { display: flex; flex-direction: column; justify-content: center; }
.meta-cat { font-size: 12px; text-transform: uppercase; font-weight: 700; color: var(--primary-blue); margin-bottom: 5px; letter-spacing: 0.5px; }
.post-card h2 { font-size: 19px; font-weight: 700; color: var(--theme-text); line-height: 1.3; margin-bottom: 8px; }
.post-card p { font-size: 14px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Category view / SEO intro */
.archive-intro { background: var(--card-bg); border: 1px solid var(--border-color); padding: 25px; border-radius: 8px; margin: 30px 0; }
.archive-intro h1 { color: var(--theme-text); font-size: 28px; margin-bottom: 10px; }
.archive-intro p { color: var(--text-muted); font-size: 15px; }

/* Single Post Layout */
.post-header { margin: 40px 0 25px; }
.breadcrumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 15px; }
.breadcrumbs a { color: var(--text-muted); }
.single-title { font-size: 34px; font-weight: 800; color: var(--theme-text); line-height: 1.25; margin-bottom: 15px; }
.post-meta-author { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted); }
.post-meta-author strong { color: var(--theme-text); }

.post-thumb-wrap { margin-bottom: 30px; }
.post-thumb-wrap img { width: 100%; max-height: 450px; object-fit: cover; border-radius: 8px; }

/* Quick Summary Box / Sommaire */
.quick-summary { background: rgba(var(--theme-primary-rgb), 0.05); border-left: 4px solid var(--theme-primary); padding: 20px; border-radius: 0 8px 8px 0; margin-bottom: 35px; }
.quick-summary h4 { color: var(--theme-text); font-size: 18px; margin-bottom: 10px; }
.quick-summary ul { list-style-position: inside; color: var(--text-color); font-size: 15px; }
.quick-summary li { margin-bottom: 5px; }

/* Content Formatting */
.entry-content p { margin-bottom: 20px; font-size: 17px; color: var(--text-color); }
.entry-content h2 { color: var(--theme-text); font-size: 24px; margin: 35px 0 15px; font-weight: 700; }
.entry-content h3 { color: var(--theme-text); font-size: 20px; margin: 25px 0 12px; font-weight: 700; }

/* Footer */
.site-footer { background: var(--card-bg); border-top: 1px solid var(--border-color); padding: 30px 0; margin-top: 60px; text-align: center; font-size: 14px; color: var(--text-muted); }
.footer-links ul { display: flex; justify-content: center; list-style: none; gap: 15px; margin-top: 10px; padding: 0; }
.footer-links li a { font-size: 14px; color: var(--text-muted); }
.footer-links li a:hover { color: var(--primary-blue); }

/* ==========================================================================
   CSS DES GABARITS ANONYMISÉS (STYLE 2 & STYLE 3)
   ========================================================================== */

/* Structure Style 2 */
.s2-grid-wrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 40px; }
.s2-hero-main { position: relative; border-radius: 8px; overflow: hidden; height: 380px; }
.s2-hero-main img { width: 100%; height: 100%; object-fit: cover; }
.s2-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%); display: flex; align-items: flex-end; padding: 25px; }
.s2-hero-overlay h3 { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.3; }

.s2-hero-sidebar { display: flex; flex-direction: column; gap: 15px; }
.s2-hero-small-card a { display: flex; gap: 12px; background: var(--card-bg); padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; align-items: center; height: 115px; }
.s2-hero-small-card img { width: 85px; height: 85px; object-fit: cover; flex-shrink: 0; }
.s2-hero-small-card h4 { font-size: 14px; color: #fff; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.s2-style-impair { display: grid; grid-template-columns: 1.2fr 1fr; gap: 25px; background: var(--card-bg); border: 1px solid var(--border-color); padding: 20px; border-radius: 8px; }
.s2-impair-big img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 12px; }
.s2-impair-big h3 { font-size: 18px; color: var(--theme-text); margin-bottom: 8px; }
.s2-impair-big p { font-size: 14px; color: var(--text-muted); }
.s2-impair-list { display: flex; flex-direction: column; justify-content: center; gap: 15px; border-left: 1px solid var(--border-color); padding-left: 20px; }
.s2-impair-item h4 { font-size: 15px; color: var(--theme-text); font-weight: 500; }
.layout-premium-pair { background: rgba(var(--theme-primary-rgb), 0.02) !important; border-color: rgba(var(--theme-primary-rgb), 0.15) !important; }

/* Structure Style 3 */
.bento-wrapper { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: repeat(2, 180px); gap: 20px; }
.bento-card { position: relative; border-radius: 8px; overflow: hidden; }
.bento-card img { width: 100%; height: 100%; object-fit: cover; }
.bento-card-1 { grid-row: span 2; }
.bento-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 50%); display: flex; align-items: flex-end; padding: 15px; }
.bento-overlay h3 { color: #fff; font-size: 16px; font-weight: 600; }
.bento-card-1 .bento-overlay h3 { font-size: 22px; }

.s3-block-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.s3-main-post img { width: 100%; height: 220px; object-fit: cover; margin-bottom: 10px; }
.s3-main-post h3 { font-size: 18px; color: var(--theme-text); }
.s3-side-list { display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }
.s3-side-item { display: flex; gap: 15px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.s3-num { font-size: 20px; font-weight: 800; color: var(--primary-blue); font-family: monospace; }
.s3-side-item h4 { font-size: 15px; color: var(--theme-text); font-weight: 500; line-height: 1.4; }

/* ==========================================================================
   VERSION MOBILE ET SCRIPT-BURGER
   ========================================================================== */
@media (max-width: 768px) {
    .header-wrap { display: flex; justify-content: center; align-items: center; height: 45px; position: relative; }
    .logo { margin: 0 auto; z-index: 106; }
    
    .category-grid, .s2-grid-wrapper, .bento-wrapper, .s2-style-impair, .s3-block-layout { grid-template-columns: 100% !important; grid-template-rows: auto !important; }
    .post-card { flex-direction: column; gap: 15px; }
    .post-card-img { width: 100%; height: 180px; }
    
    .s2-hero-main, .s2-hero-small-card, .bento-card-1 { height: 220px !important; grid-row: auto !important; }
    .s2-impair-list { border-left: none; padding-left: 0; margin-top: 15px; }
    .s3-side-list { margin-top: 15px; gap: 15px; }

    /* Burger Button */
    .burger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 105;
    }
    .burger-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--text-color);
        border-radius: 2px;
        transition: transform 0.3s, opacity 0.3s;
    }

    .burger-btn.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); background-color: var(--theme-text); }
    .burger-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .burger-btn.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background-color: var(--theme-text); }

    /* Navigation latérale sliding */
    .main-nav {
        position: fixed;
        top: 0;
        left: -290px;
        width: 280px;
        height: 100vh;
        background: var(--card-bg);
        border-right: 1px solid var(--border-color);
        padding: 80px 25px 30px;
        transition: left 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        z-index: 101;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.6);
    }
    .main-nav.is-open { left: 0; }
    .main-nav .menu-header { flex-direction: column; gap: 10px; }
    .main-nav .menu-header a { font-size: 18px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: block; width: 100%; }

    .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 100; display: none; }
    .nav-overlay.is-open { display: block; }
}


/* ============================================================
   BIO AUTEUR
   ============================================================ */
.author-bio {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--theme-primary);
    border-radius: 0 8px 8px 0;
    padding: 20px;
    margin: 40px auto 10px;
    max-width: var(--article-width);
    box-sizing: border-box;
}
.author-avatar-link { flex-shrink: 0; }
.author-avatar-link img,
.author-bio .author-avatar {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
    border: 2px solid var(--border-color);
}
.author-bio-content { display: flex; flex-direction: column; gap: 5px; }
.author-bio-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-blue);
    text-decoration: none;
}
.author-bio-name:hover { color: var(--premium-blue-hover); }
.author-bio-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .author-bio { flex-direction: column; align-items: center; text-align: center; }

    /* Toggle mobile — positionné à droite, burger à gauche */
    .theme-toggle {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 14px;
    }
}


/* ============================================================
   ARTICLES RELATIFS — 4 colonnes côte à côte
   ============================================================ */
.related-wrapper {
    max-width: var(--article-width);
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.related-posts {
    margin: 40px 0;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.related-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--theme-text);
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 4px solid var(--theme-primary);
}

@media (max-width: 768px) {
    .related-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.related-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    color: inherit;
}
.related-card:hover {
    border-color: var(--theme-primary);
    transform: translateY(-3px);
    color: inherit;
}

.related-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--border-color);
}
.related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    transition: transform 0.3s ease;
}
.related-card:hover .related-img img { transform: scale(1.04); }
.related-img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.related-img-placeholder::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--border-color);
    opacity: 0.5;
}

.related-info {
    padding: 10px 12px 14px;
    text-align: center;
}
.related-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-card:hover .related-info h4 {
    color: var(--primary-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tags */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0; }
.tag-pill {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 4px 12px;
    transition: border-color 0.2s, color 0.2s;
}
.tag-pill:hover { border-color: var(--theme-primary); color: var(--primary-blue); }

/* Entry content compléments */
.entry-content ul, .entry-content ol { margin: 0 0 20px 25px; color: var(--text-color); }
.entry-content li { margin-bottom: 8px; }
.entry-content a { color: var(--primary-blue); text-decoration: underline; text-underline-offset: 3px; }
.entry-content blockquote {
    border-left: 4px solid var(--theme-primary);
    padding: 15px 20px;
    margin: 25px 0;
    background: rgba(var(--theme-primary-rgb), 0.05);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .related-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 480px) {
    .related-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .related-info h4 { font-size: 13px; }
}

/* ============================================================
   BLOC "À VOIR AUSSI" DANS LE CONTENU
   ============================================================ */
.inline-related {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--theme-primary);
    border-radius: 0 8px 8px 0;
    padding: 20px;
    margin: 30px 0;
    clear: both;
}

.inline-related-title {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--primary-blue);
    margin: 0 0 15px 0;
}

.inline-related-title span {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(var(--theme-primary-rgb), 0.1);
    border-radius: 4px;
}

.inline-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.inline-related-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}
.inline-related-card:hover { color: var(--primary-blue); }

.inline-related-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
}
.inline-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: transform 0.3s ease;
}
.inline-related-card:hover .inline-related-img img { transform: scale(1.04); }

.inline-related-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.inline-related-card:hover h4 { color: var(--primary-blue); }

@media (max-width: 768px) {
    .inline-related-grid { grid-template-columns: 1fr; gap: 12px; }
    .inline-related-card { flex-direction: row; align-items: center; }
    .inline-related-img { width: 80px; min-width: 80px; aspect-ratio: 1 / 1; }
}


/* ============================================================
   MASQUER L'ANCIEN BLOC "À VOIR AUSSI" DU PLUGIN TIERS
   À supprimer une fois le plugin désactivé
   ============================================================ */
.yarpp-related,
.yarpp-related-posts,
.related-posts-plugin,
[class*="yarpp"],
[class*="yet-another-related"],
[id*="yarpp"] {
    display: none !important;
}


/* ============================================================
   PAGE AUTEUR — author.php
   ============================================================ */

/* En-tête profil */
.author-page-header {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    margin: 30px 0 10px;
}

.author-page-avatar-wrap { flex-shrink: 0; }

.author-page-avatar,
.author-page-avatar-wrap img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 3px solid var(--theme-primary);
    display: block;
}

.author-page-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.author-page-name {
    font-size: 28px;
    font-weight: 800;
    color: var(--theme-text);
    line-height: 1.2;
    margin: 0;
}

.author-page-count {
    font-size: 13px;
    color: var(--primary-blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.author-page-bio {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 600px;
}

.author-page-website {
    font-size: 14px;
    color: var(--primary-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.author-page-website:hover { color: var(--premium-blue-hover); }

/* Date sur les cards auteur */
.author-card-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    display: block;
}

/* Pagination */
.author-pagination {
    margin: 40px 0;
    display: flex;
    justify-content: center;
}
.author-pagination .nav-links {
    display: flex;
    gap: 8px;
    align-items: center;
}
.author-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}
.author-pagination .page-numbers:hover,
.author-pagination .page-numbers.current {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--on-primary);
}
.author-pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .author-page-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .author-page-bio { max-width: 100%; }
    .author-page-name { font-size: 22px; }
}


/* ============================================================
   PAGE 404
   ============================================================ */
.error-404-wrap {
    max-width: 720px;
    margin: 60px auto;
    text-align: center;
    padding: 0 20px;
}

.error-404-code {
    font-size: 120px;
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1;
    opacity: 0.15;
    letter-spacing: -5px;
    margin-bottom: -20px;
}

.error-404-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--theme-text);
    margin-bottom: 15px;
}

.error-404-desc {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Barre de recherche 404 */
.error-404-search {
    margin-bottom: 40px;
}
.error-404-search form {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}
.error-search-input {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 16px;
    color: var(--text-color);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}
.error-search-input:focus { border-color: var(--theme-primary); }
.error-search-input::placeholder { color: var(--text-muted); }

.error-search-btn {
    background: var(--theme-primary);
    color: var(--on-primary);
    border: none;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.error-search-btn:hover { background: var(--premium-blue-hover); }

.error-404-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-text);
    margin-bottom: 20px;
    text-align: left;
    padding-left: 15px;
    border-left: 4px solid var(--theme-primary);
}

.error-404-home-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 24px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    transition: border-color 0.2s, color 0.2s;
}
.error-404-home-btn:hover {
    border-color: var(--theme-primary);
    color: var(--primary-blue);
}

@media (max-width: 768px) {
    .error-404-code  { font-size: 80px; }
    .error-404-title { font-size: 24px; }
    .error-404-search form { flex-direction: column; }
}


/* ============================================================
   BOUTON RETOUR EN HAUT
   ============================================================ */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: var(--theme-primary);
    color: var(--on-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
    z-index: 999;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover { background: var(--premium-blue-hover); }

@media (max-width: 768px) {
    .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
}


/* ============================================================
   BARRE DE PROGRESSION DE LECTURE
   ============================================================ */
.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--theme-primary);
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(var(--theme-primary-rgb), 0.6);
}


/* ============================================================
   IMAGE FALLBACK Open Graph
   ============================================================ */
.post-thumb-fallback {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--theme-background-alt) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}
.post-thumb-fallback span {
    font-size: 48px;
    opacity: 0.2;
}


/* ============================================================
   TEMPS DE LECTURE
   ============================================================ */
.reading-time {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 13px;
}
.meta-sep {
    color: var(--border-color);
    margin: 0 2px;
}


/* ============================================================
   SOMMAIRE AUTOMATIQUE (TOC)
   Flottant à droite sur desktop, dans le flux sur mobile
   ============================================================ */
.toc-box {
    float: right;
    clear: right;
    width: 280px;
    margin: 0 0 25px 30px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px 20px;
    font-size: 13.5px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Liseré bleu en haut */
.toc-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--theme-primary);
    border-radius: 10px 10px 0 0;
}

.toc-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0 0 14px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.toc-item {
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.35;
}

/* Numéro H2 */
.toc-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-blue);
    background: rgba(var(--theme-primary-rgb), 0.12);
    border-radius: 3px;
    padding: 1px 6px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
    display: inline-block;
}

/* Flèche H3 */
.toc-sub {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
    padding-left: 2px;
}

/* H3 indentés */
.toc-level-3 { padding-left: 14px; }

.toc-item a {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s;
}
.toc-item a:hover { color: var(--primary-blue); }

/* Séparateur léger */
.toc-item + .toc-item {
    padding-top: 5px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* Séparateur léger entre items */
.toc-item + .toc-item {
    padding-top: 5px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── Mobile : dans le flux pleine largeur ── */
@media (max-width: 768px) {
    .toc-box {
        float: none;
        width: 100%;
        margin: 25px 0;
        box-shadow: none;
    }
}


/* ============================================================
   PARTAGE SOCIAL
   ============================================================ */
.share-box {
    margin: 35px 0;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.share-box-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}
.share-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    color: #fff;
}

.share-facebook  { background: #1877f2; color: #fff; }
.share-twitter   { background: #000;    color: #fff; }
.share-whatsapp  { background: #25d366; color: #fff; }
.share-copy      {
    background: var(--border-color);
    color: var(--text-color);
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.share-copy:hover { background: var(--theme-primary); color: var(--on-primary); }

@media (max-width: 480px) {
    .share-buttons { flex-direction: column; }
    .share-btn     { justify-content: center; }
}


/* ============================================================
   PAGE RECHERCHE
   ============================================================ */
.search-header {
    margin: 30px 0 35px;
}
.search-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--theme-text);
    margin-bottom: 8px;
}
.search-title span {
    color: var(--primary-blue);
}
.search-count {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.search-form-wrap {
    display: flex;
    gap: 10px;
    max-width: 600px;
}
.search-input {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 13px 18px;
    color: var(--text-color);
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
}
.search-input:focus { border-color: var(--theme-primary); }
.search-input::placeholder { color: var(--text-muted); }
.search-submit-btn {
    background: var(--theme-primary);
    color: var(--on-primary);
    border: none;
    border-radius: 6px;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.search-submit-btn:hover { background: var(--premium-blue-hover); }

.search-no-results { margin-top: 30px; }
.search-no-results-text {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.7;
    padding: 25px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.search-no-results-text strong { color: var(--theme-text); }

@media (max-width: 600px) {
    .search-form-wrap { flex-direction: column; }
}


/* ============================================================
   FAÇADE YOUTUBE — lazy load iframes
   ============================================================ */
.yt-facade {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
    width: 100%;
    margin: 20px 0;
}
.yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    transition: opacity 0.3s;
}
.yt-facade:hover img { opacity: 0.75; }
.yt-facade .yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: #ff0000;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    pointer-events: none;
}
.yt-facade:hover .yt-play-btn {
    background: #cc0000;
    transform: translate(-50%, -50%) scale(1.1);
}
.yt-facade .yt-play-btn svg {
    width: 24px;
    height: 24px;
    fill: #fff;
    margin-left: 4px;
}
.yt-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}


/* ============================================================
   TOGGLE DARK / LIGHT MODE
   ============================================================ */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: border-color 0.2s, background 0.2s;
    flex-shrink: 0;
    position: absolute;
    right: 0;
}
.theme-toggle:hover { border-color: var(--theme-primary); }

/* ═══════════════════════════════════════════════════════════
   MODE SOMBRE — posé par le thème, pas par le visiteur
   Le choix se fait dans Config Home. La classe est écrite côté
   serveur sur <body> : aucun script, aucun flash, aucune
   préférence stockée dans le navigateur.
   ═══════════════════════════════════════════════════════════ */
.theme-dark {
    --theme-primary:        #FF3B4E;
    --theme-secondary:      #26262A;
    --theme-text:           #F2F2F3;
    --theme-background:     #121214;
    --theme-background-alt: #1B1B1E;
    --theme-cta:            #E2001A;
    --theme-primary-rgb:    255, 59, 78;

    --theme-primary-ink: #FF7A87;
    --card-bg:      #1B1B1E;
    --border-color: #2E2E33;
    --text-muted:   #A0A0A6;
    --on-primary:   #FFFFFF;

    --footer-bg:          var(--theme-background-alt);
    --footer-text:        var(--theme-text);
    --footer-text-muted:  #A0A0A6;
    --footer-border:      #33333A;
}

/* Les aplats posés sur une photo gardent leur voile sombre :
   le texte qui s'y trouve est blanc dans les deux modes. */
.theme-dark .s4-hero-overlay,
.theme-dark .s4-trio-overlay,
.theme-dark .s2-hero-overlay,
.theme-dark .bento-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0) 100%);
}
/* Titre principal de la page d'accueil — présent pour Google et les lecteurs
   d'écran, discret pour ne pas concurrencer la une. */
.home-h1 { font-size: 22px; font-weight: 700; margin: 25px 0 5px; line-height: 1.3; }
.home-h1-tagline { display: block; font-size: 15px; font-weight: 400; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 768px) { .home-h1 { font-size: 19px; } .home-h1-tagline { font-size: 14px; } }

/* Libellé réservé aux lecteurs d'écran (classe standard WordPress) */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUTS "CARTE" DE LA HOME (float / center / accent)
   Grille de 6 articles : image, carte qui chevauche le bas de
   l'image, début du texte, date discrète. Pas de catégorie —
   elle est déjà le titre de la section.
   Les couleurs passent par les variables du thème pour suivre
   le mode sombre comme le mode clair.
   ═══════════════════════════════════════════════════════════ */
.s4-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 25px;
}

.s4-card { display: flex; flex-direction: column; }

.s4-card-img {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--border-color);
}
.s4-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.4s ease;
}
.s4-card:hover .s4-card-img img { transform: scale(1.04); }
.s4-card-img-placeholder { display: block; width: 100%; height: 100%; }

.s4-card-box {
    position: relative;
    z-index: 2;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 16px 18px 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.s4-card-box h2,
.s4-card-box h3 {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 8px;
}
.s4-card-box h2 a,
.s4-card-box h3 a { color: inherit; }
.s4-card:hover .s4-card-box h2 a,
.s4-card:hover .s4-card-box h3 a { color: var(--primary-blue); }
.s4-card-box p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.s4-card-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
}
.s4-card-date svg { flex-shrink: 0; opacity: 0.7; }

/* ── Variante 1 : carte décalée vers la droite ── */
.s4-cards--float .s4-card-box { margin: -52px 0 0 45px; }

/* ── Variante 2 : carte centrée, texte centré ── */
.s4-cards--center .s4-card-box {
    width: 88%;
    margin: -45px auto 0;
    text-align: center;
}
.s4-cards--center .s4-card-date { justify-content: center; }

/* ── Variante 3 : carte décalée à gauche, filet d'accent,
      date placée avant le titre ── */
.s4-cards--accent .s4-card-box {
    margin: -48px 45px 0 0;
    border-left: 3px solid var(--theme-primary);
}
.s4-cards--accent .s4-card-date { margin-bottom: 8px; }

@media (max-width: 1024px) {
    .s4-cards { grid-template-columns: repeat(2, 1fr); }
    .s4-cards--float .s4-card-box  { margin-left: 28px; }
    .s4-cards--accent .s4-card-box { margin-right: 28px; }
}

@media (max-width: 768px) {
    .s4-cards { grid-template-columns: 1fr; gap: 30px; }
    .s4-cards--float .s4-card-box  { margin: -45px 0 0 22px; }
    .s4-cards--accent .s4-card-box { margin: -45px 22px 0 0; }
    .s4-cards--center .s4-card-box { width: 92%; }
    .s4-card-box h2,
    .s4-card-box h3 { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   EN-TÊTE — briques communes aux 3 styles
   ═══════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

.header-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.header-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.header-search-btn:hover { background: rgba(127, 127, 127, 0.14); color: var(--primary-blue); }

.header-search { border-top: 1px solid var(--border-color); padding: 14px 0; background: var(--card-bg); }

.header-search-form { position: relative; display: flex; align-items: center; }
.header-search-icon { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; }
.header-search-form input[type="search"] {
    width: 100%;
    padding: 9px 14px 9px 34px;
    font-size: 13.5px;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    outline: none;
}
.header-search-form input[type="search"]:focus { border-color: var(--theme-primary); }
.header-search-form input[type="search"]::placeholder { color: var(--text-muted); }

/* ── Sous-catégories : volet déroulant sur desktop ── */
.main-nav .menu-header li { position: relative; }
.main-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 120;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.main-nav .sub-menu li a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0;
    background: none;
}
.main-nav .sub-menu li a:hover { background: rgba(127, 127, 127, 0.12); color: var(--primary-blue); }

/* Chevron sur les entrées qui ont des sous-catégories */
.main-nav .menu-header > .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   STYLE 1 — MINIMALISTE : pastille au survol et sur l'actif
   ═══════════════════════════════════════════════════════════ */
.site-header--minimal .main-nav { flex: 1; justify-content: flex-end; margin-right: 6px; }
.site-header--minimal .main-nav .menu-header { gap: 4px; }
.site-header--minimal .main-nav .menu-header > li > a {
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.18s ease, color 0.18s ease;
}
.site-header--minimal .main-nav .menu-header > li > a:hover {
    background: rgba(127, 127, 127, 0.14);
    color: var(--text-color);
}
.site-header--minimal .main-nav .menu-header > .current-menu-item > a,
.site-header--minimal .main-nav .menu-header > .current-menu-ancestor > a,
.site-header--minimal .main-nav .menu-header > .current-menu-parent > a {
    background: rgba(127, 127, 127, 0.2);
    color: var(--text-color);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   STYLE 2 — BARRE DE CATÉGORIES : logo + recherche, menu dessous
   ═══════════════════════════════════════════════════════════ */
.site-header--bar { padding-bottom: 0; }
.site-header--bar .header-tools { flex: 1; justify-content: flex-end; }
.site-header--bar .header-search-form { max-width: 260px; }

.header-catbar { border-top: 1px solid var(--border-color); margin-top: 15px; }
.header-catbar .main-nav { justify-content: flex-start; }
.header-catbar .menu-header { gap: 0; flex-wrap: wrap; }
.header-catbar .menu-header > li > a {
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.header-catbar .menu-header > li > a:hover { border-bottom-color: var(--border-color); }
.header-catbar .menu-header > .current-menu-item > a,
.header-catbar .menu-header > .current-menu-ancestor > a,
.header-catbar .menu-header > .current-menu-parent > a {
    font-weight: 800;
    color: var(--text-color);
    border-bottom-color: var(--theme-primary);
}
.header-catbar .sub-menu { top: calc(100% - 3px); }

/* ═══════════════════════════════════════════════════════════
   STYLE 3 — COMPACT : menu serré, loupe et boutons Google
   ═══════════════════════════════════════════════════════════ */
.site-header--compact .main-nav { flex: 1; justify-content: flex-start; margin-left: 28px; }
.site-header--compact .main-nav .menu-header { gap: 18px; }
.site-header--compact .main-nav .menu-header > li > a { font-weight: 500; }
.site-header--compact .main-nav .menu-header > .current-menu-item > a,
.site-header--compact .main-nav .menu-header > .current-menu-ancestor > a,
.site-header--compact .main-nav .menu-header > .current-menu-parent > a {
    color: var(--primary-blue);
    font-weight: 700;
}
.site-header--compact .header-search-btn {
    background: rgba(127, 127, 127, 0.14);
    border-radius: 8px;
}

/* Liseré bleu dégradé sous l'en-tête compact */
.site-header--compact { position: sticky; }
.site-header--compact::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
}

/* ── Les deux boutons Google ── */
.header-google { display: flex; align-items: center; gap: 8px; }
.g-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: box-shadow 0.18s ease, background 0.18s ease;
}
.g-btn .g-logo { flex-shrink: 0; background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; }
.g-btn--filled { background: #1a73e8; color: #fff; }
.g-btn--filled:hover { background: #1765cc; color: #fff; box-shadow: 0 1px 6px rgba(26, 115, 232, 0.5); }
.g-btn--outline { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.g-btn--outline:hover { background: #f7f8f8; color: #3c4043; box-shadow: 0 1px 4px rgba(60, 64, 67, 0.3); }

/* ═══════════════════════════════════════════════════════════
   EN-TÊTE — mobile
   Le panneau latéral existant reste la base : les sous-catégories
   y sont simplement dépliées et indentées, pas de volet flottant.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .site-header--compact .header-google .g-btn span { display: none; }
    .site-header--compact .header-google .g-btn { padding: 8px 10px; }
}

@media (max-width: 768px) {
    .site-header--minimal .main-nav,
    .site-header--compact .main-nav { margin: 0; }

    .header-tools { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 106; }
    .site-header--bar .header-tools { position: static; transform: none; }

    /* Sous-catégories : à plat dans le panneau, décalées vers la droite */
    .main-nav .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0 0 0 16px;
        margin: 0 0 6px;
        border-left: 2px solid var(--border-color);
    }
    .main-nav .sub-menu li a { padding: 10px 0; font-size: 15px; }
    .main-nav .menu-header > .menu-item-has-children > a::after { display: none; }

    /* Les styles desktop ne doivent pas déborder dans le panneau */
    .site-header--minimal .main-nav .menu-header > li > a { padding: 12px 0; border-radius: 0; background: none; }
    .header-catbar { border-top: none; margin-top: 0; }
    .header-catbar .menu-header > li > a { padding: 12px 0; border-bottom: 1px solid rgba(127,127,127,0.12); }

    /* Recherche de la barre de catégories : sous le logo, pleine largeur */
    .site-header--bar .header-search-form { max-width: none; margin-top: 12px; }

    .header-google { gap: 6px; }
}

@media (max-width: 480px) {
    .site-header--compact .header-google .g-btn--outline { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   MISE EN PAGE DES ARTICLES — pleine largeur ou colonne latérale
   Contenu 720 px (longueur de ligne confortable), colonne 300 px
   (format standard des encarts), gouttière 40 px. Total 1060 px,
   soit la largeur du conteneur du site moins ses marges.
   ═══════════════════════════════════════════════════════════ */
.article-layout--right,
.article-layout--left {
    display: grid;
    gap: var(--layout-gap);
    align-items: start;
    max-width: calc(var(--article-width) + var(--sidebar-width) + var(--layout-gap));
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: content-box;
}
.article-layout--right { grid-template-columns: minmax(0, 1fr) var(--sidebar-width); }
.article-layout--left  { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }

/* L'article reste avant la colonne dans le code : l'ordre visuel
   est inversé en CSS, la lecture au clavier garde le bon sens. */
.article-layout--left > .article-container { grid-column: 2; grid-row: 1; }
.article-layout--left > .site-sidebar      { grid-column: 1; grid-row: 1; }

/* La colonne gère la largeur : l'article ne se re-centre plus */
.article-layout--right > .article-container,
.article-layout--left  > .article-container {
    max-width: none;
    margin: 0;
    padding: 0;
}
.article-layout--right .related-wrapper,
.article-layout--left  .related-wrapper { max-width: none; padding: 0; }
.article-layout--right .author-bio,
.article-layout--left  .author-bio { max-width: none; }

/* ── La colonne latérale ── */
.site-sidebar { min-width: 0; }
.sidebar-inner {
    position: sticky;
    top: 85px; /* hauteur de l'en-tête collant + respiration */
}
.sidebar-widget {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 22px;
}
.sidebar-widget:last-child { margin-bottom: 0; }
.sidebar-widget-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar-widget a { color: inherit; }
.sidebar-widget a:hover { color: var(--primary-blue); }

/* Liste d'articles de la colonne (affichage par défaut) */
.sidebar-post-list li { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); }
.sidebar-post-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.sidebar-post-list a { display: flex; gap: 12px; align-items: flex-start; }
.sidebar-post-thumb { flex-shrink: 0; width: 62px; height: 62px; border-radius: 6px; overflow: hidden; }
.sidebar-post-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.sidebar-post-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sidebar-post-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }

/* ── Sous 1024 px : la colonne repasse sous l'article ── */
@media (max-width: 1024px) {
    .article-layout--right,
    .article-layout--left {
        display: block;
        max-width: var(--article-width);
    }
    .article-layout--right > .article-container,
    .article-layout--left  > .article-container { max-width: none; }

    .site-sidebar { margin-top: 45px; }
    .sidebar-inner { position: static; }
    .sidebar-widget { max-width: var(--article-width); margin-left: auto; margin-right: auto; }
}

/* ═══════════════════════════════════════════════════════════
   RYTHME ÉDITORIAL — Déco21
   Les cartes d'articles restent blanches et aérées. Seuls les
   encarts de lecture prennent l'écru, et l'anthracite tient le
   pied de page : ~70 % clair, ~20 % anthracite, ~10 % taupe.
   ═══════════════════════════════════════════════════════════ */

/* ── Encarts éditoriaux : écru plutôt que blanc ── */
.toc-box,
.quick-summary,
.share-box,
.inline-related,
.archive-intro,
.author-bio,
.search-header,
.error-404-wrap {
    background: var(--theme-background-alt);
}

/* ── Pied de page en anthracite : le contrepoint sombre du logo ── */
.site-footer {
    background: var(--footer-bg);
    border-top: none;
    color: var(--footer-text-muted);
}
.site-footer a,
.footer-links li a { color: var(--footer-text-muted); }
.site-footer a:hover,
.footer-links li a:hover { color: var(--footer-text); }
.theme-toggle-footer {
    border-color: var(--footer-border);
    color: var(--footer-text-muted);
}
.theme-toggle-footer:hover {
    border-color: var(--theme-primary);
    color: var(--footer-text);
}

/* ── Boutons et CTA : aplat taupe, texte anthracite, survol anthracite ── */
.error-404-home-btn,
.search-submit-btn,
.error-search-btn,
.back-to-top {
    background: var(--theme-cta);
    color: var(--on-primary);
    border-color: var(--theme-cta);
}
.error-404-home-btn:hover,
.search-submit-btn:hover,
.error-search-btn:hover,
.back-to-top:hover {
    background: var(--theme-text);
    color: var(--theme-background);
    border-color: var(--theme-text);
}

/* ── Étiquettes et catégories : filet taupe sur fond écru ── */
.tag-pill {
    background: var(--theme-background-alt);
    border-color: var(--border-color);
    color: var(--theme-primary-ink);
}
.tag-pill:hover {
    background: var(--theme-secondary);
    border-color: var(--theme-primary);
    color: var(--theme-text);
}

/* ── Le libellé de rubrique : petites capitales taupe, pas de pastille ── */
.meta-cat { color: var(--theme-primary-ink); }

/* ── Le liseré de l'en-tête compact suit la couleur de marque ── */
.site-header--compact::after {
    background: linear-gradient(90deg, transparent, var(--theme-primary), transparent);
}

/* ── Pagination : l'état courant en aplat taupe ── */
.author-pagination .page-numbers { border-color: var(--border-color); }

/* ═══════════════════════════════════════════════════════════
   LOGO DU SITE
   Hauteur bornée : une image trop haute ferait grandir l'en-tête
   collant et décalerait tout le reste de la page.
   ═══════════════════════════════════════════════════════════ */
.logo img,
.logo .custom-logo {
    display: block;
    max-height: 44px;
    width: auto;
    border-radius: 0;
}
.logo .custom-logo-link { display: inline-block; line-height: 0; }

/* ── Logo centré, au-dessus du menu ── */
.site-header--logo-centered .header-wrap {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 14px;
}
.site-header--logo-centered .logo {
    flex: 0 0 100%;
    text-align: center;
}
.site-header--logo-centered .logo .custom-logo-link,
.site-header--logo-centered .logo img { margin: 0 auto; }

.site-header--logo-centered .main-nav {
    flex: 1 1 auto;
    justify-content: center;
    margin: 0;
}
.site-header--logo-centered .header-tools { flex: 0 0 auto; }

/* La barre de catégories a déjà son menu sur une seconde ligne :
   centré, le logo occupe simplement toute la première. */
.site-header--bar.site-header--logo-centered .header-wrap { justify-content: center; }
.site-header--bar.site-header--logo-centered .header-tools { flex: 0 0 auto; }

@media (max-width: 768px) {
    /* Sur mobile le logo est déjà centré entre le burger et les outils :
       les deux positions se rejoignent, rien à distinguer. */
    .site-header--logo-centered .header-wrap { row-gap: 0; }
    .site-header--logo-centered .logo { flex: 0 1 auto; }
    .logo img, .logo .custom-logo { max-height: 34px; }
}

/* ═══════════════════════════════════════════════════════════
   STYLE 4 — HOMEPAGE MAGAZINE PREMIUM
   ═══════════════════════════════════════════════════════════ */
   ============================================================ */

/* ── HERO ── */
.s4-hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 4px;
    border-radius: 10px;
    overflow: hidden;
    height: 420px;
    margin-bottom: 50px;
}

.s4-hero-main,
.s4-hero-small {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    min-height: 100%;
}

.s4-hero-main img,
.s4-hero-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    transition: transform 0.4s ease;
    position: absolute;
    inset: 0;
}
.s4-hero-main:hover img,
.s4-hero-small:hover img { transform: scale(1.04); }

.s4-hero-stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
}

.s4-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0) 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    gap: 8px;
}

.s4-overlay-small {
    padding: 15px;
    gap: 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
}

.s4-hero-cat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--on-primary);
    background: rgba(var(--theme-primary-rgb), 0.95);
    padding: 3px 8px;
    border-radius: 3px;
    align-self: flex-start;
}

.s4-hero-overlay h2 {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0;
}
.s4-hero-overlay h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

.s4-hero-date {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}


/* ── SECTION HEAD ── */
.s4-section {
    margin-bottom: 20px;
    padding: 40px 0 50px;
    position: relative;
}

/* Séparateur décoratif entre sections */
.s4-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--border-color) 15%,
        var(--theme-primary) 50%,
        var(--border-color) 85%,
        transparent 100%
    );
}

/* Supprimer le séparateur sur la dernière section */
.s4-section:last-of-type::after { display: none; }

.s4-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--border-color);
    position: relative;
}

/* Trait bleu sous le titre uniquement */
.s4-section-head::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--theme-primary);
    border-radius: 2px;
}

.s4-section-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--theme-text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.s4-slash {
    color: var(--primary-blue);
    font-weight: 900;
    font-size: 22px;
}

.s4-see-all {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.s4-see-all:hover { color: var(--primary-blue); }

.s4-seo-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: -10px 0 20px;
    max-width: 700px;
}


/* ── LAYOUT IMPAIR : 1 grand + liste ── */
.s4-layout-main {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 25px;
    align-items: start;
}

.s4-main-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-decoration: none;
    color: inherit;
}

.s4-main-img {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/10;
}
.s4-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.3s;
}
.s4-main-card:hover .s4-main-img img { transform: scale(1.03); }

.s4-main-content { display: flex; flex-direction: column; gap: 8px; }
.s4-main-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-text);
    line-height: 1.3;
    margin: 0;
}
.s4-main-content p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}
.s4-read-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-blue);
    margin-top: 5px;
}

.s4-side-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid var(--border-color);
    padding-left: 25px;
}

.s4-side-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}
.s4-side-card:last-child { border-bottom: none; }
.s4-side-card:hover h4 { color: var(--primary-blue); }

.s4-side-num {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary-blue);
    opacity: 0.25;
    font-family: monospace;
    min-width: 32px;
    flex-shrink: 0;
}

.s4-side-img {
    width: 75px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
}
.s4-side-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.s4-side-content { display: flex; flex-direction: column; gap: 4px; }
.s4-side-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text);
    line-height: 1.4;
    margin: 0;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s4-date {
    font-size: 11px;
    color: var(--text-muted);
}


/* ── LAYOUT PAIR : 3 cartes image overlay ── */
.s4-layout-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.s4-trio-card {
    display: block;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.s4-trio-img {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
}
.s4-trio-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    transition: transform 0.35s ease;
}
.s4-trio-card:hover .s4-trio-img img { transform: scale(1.06); }

.s4-trio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 15px;
    gap: 5px;
}
.s4-trio-overlay h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    margin: 0;
}
.s4-trio-overlay .s4-date { color: rgba(255,255,255,0.6); }


/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .s4-hero             { grid-template-columns: 1fr; height: auto; }
    .s4-hero-stack       { grid-template-rows: auto auto; }
    .s4-hero-main        { height: 260px; }
    .s4-hero-small       { height: 180px; }
    .s4-layout-main      { grid-template-columns: 1fr; }
    .s4-side-list        { border-left: none; padding-left: 0; border-top: 1px solid var(--border-color); padding-top: 10px; }
    .s4-layout-trio      { grid-template-columns: 1fr 1fr; }
    .s4-section-head     { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 480px) {
    .s4-layout-trio { grid-template-columns: 1fr; }
}



/* ═══════════════════════════════════════════════════════════
   CORRECTIFS D'EN-TÊTE
   Avec un logo texte, la largeur du mot protégeait la colonne de
   gauche. Une image en width:auto, elle, se laisse comprimer : un
   menu de huit rubriques suivi des boutons Google écrasait le logo
   jusqu'à zéro pixel. On fige donc la colonne du logo et on laisse
   le menu céder en premier.
   ═══════════════════════════════════════════════════════════ */
.logo { flex-shrink: 0; }
.logo img,
.logo .custom-logo { max-width: 210px; }

.main-nav { min-width: 0; }
.site-header--compact .main-nav .menu-header,
.site-header--minimal .main-nav .menu-header { flex-wrap: wrap; row-gap: 4px; }

/* Le menu peut alors se replier sur deux lignes sans pousser
   ni le logo ni les boutons hors de l'écran. */
.site-header--compact .header-wrap,
.site-header--minimal .header-wrap { flex-wrap: nowrap; }

@media (max-width: 1100px) {
    .site-header--compact .main-nav { margin-left: 16px; }
    .site-header--compact .main-nav .menu-header { gap: 12px; }
}

/* ── Le H1 de la home fait doublon avec le logo : on le garde pour
      Google et les lecteurs d'écran, on le sort du rendu visuel.
      Retirer cette règle pour le réafficher. ── */
.home-h1 {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════
   PIED DE PAGE À COLONNES
   Deux ou trois colonnes de widgets au-dessus de la barre légale.
   La première est plus large : elle porte l'identité du site et
   donne au bloc son point d'appui, plutôt que trois colonnes
   d'égale importance qui se regardent en chiens de faïence.
   ═══════════════════════════════════════════════════════════ */
.site-footer--widgets { padding-top: 55px; text-align: left; }

.footer-widgets {
    display: grid;
    gap: 45px;
    padding-bottom: 42px;
}
.footer-widgets--2 { grid-template-columns: 1.35fr 1fr; }
.footer-widgets--3 { grid-template-columns: 1.4fr 1fr 1fr; }

.footer-col { min-width: 0; }

/* ── Titres de colonne : petites capitales et filet court ── */
.footer-widget { margin-bottom: 32px; }
.footer-widget:last-child { margin-bottom: 0; }
.footer-widget-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--footer-text);
    margin-bottom: 18px;
    padding-bottom: 12px;
    position: relative;
}
.footer-widget-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 34px; height: 2px;
    background: var(--theme-primary);
}

/* ── Contenu des widgets ── */
.footer-widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widget li { margin-bottom: 11px; font-size: 14px; line-height: 1.5; }
.footer-widget li:last-child { margin-bottom: 0; }
.footer-widget p { font-size: 14px; line-height: 1.65; margin-bottom: 12px; }
.footer-widget a { color: var(--footer-text-muted); transition: color 0.18s ease, padding-left 0.18s ease; }
.footer-widget a:hover { color: var(--footer-text); }

/* Chevron discret au survol des listes de liens */
.footer-widget li > a { display: inline-block; position: relative; }
.footer-widget li > a::before {
    content: "›";
    position: absolute;
    left: -12px;
    opacity: 0;
    color: var(--theme-primary);
    transition: opacity 0.18s ease, left 0.18s ease;
}
.footer-widget li > a:hover::before { opacity: 1; left: -14px; }

/* ── Colonne d'identité, affichée tant qu'aucun widget n'est posé ── */
.footer-identity-name {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--footer-text);
    margin-bottom: 10px;
    line-height: 1.1;
}
.footer-identity-name span { color: var(--theme-primary); }
.footer-identity-desc {
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 42ch;
    margin: 0;
}

/* ── Barre légale, sous un filet de séparation ── */
.site-footer--widgets .footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding-top: 24px;
    border-top: 1px solid var(--footer-border);
}
.site-footer--widgets .footer-copy { margin: 0; font-size: 13px; }
.site-footer--widgets .footer-links ul { margin: 0; }
.site-footer--widgets .footer-theme-toggle { margin: 0; }

@media (max-width: 900px) {
    .footer-widgets--3 { grid-template-columns: 1fr 1fr; }
    .footer-widgets--3 .footer-col--identity { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .site-footer--widgets { padding-top: 40px; }
    .footer-widgets--2,
    .footer-widgets--3 { grid-template-columns: 1fr; gap: 34px; }
    .footer-widgets--3 .footer-col--identity { grid-column: auto; }
    .site-footer--widgets .footer-bar { justify-content: center; text-align: center; }
    .footer-identity-name { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════
   « À VOIR AUSSI » — format compact : vignette à gauche
   Une seule suggestion, sur une ligne. Assez discret pour être
   répété deux ou trois fois dans un article sans l'alourdir.
   ═══════════════════════════════════════════════════════════ */
.inline-related--single { padding-bottom: 18px; }

.inline-single {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}
.inline-single-img {
    flex-shrink: 0;
    width: 104px;
    height: 74px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--border-color);
}
.inline-single-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.35s ease;
}
.inline-single:hover .inline-single-img img { transform: scale(1.05); }

.inline-single-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--theme-text);
    transition: color 0.18s ease;
}
.inline-single:hover .inline-single-text { color: var(--theme-primary-ink); }

/* Deux blocs qui se suivraient de trop près respirent quand même */
.inline-related + .inline-related { margin-top: 30px; }

@media (max-width: 600px) {
    .inline-single { gap: 13px; }
    .inline-single-img { width: 84px; height: 62px; }
    .inline-single-text { font-size: 14.5px; }
}

/* ═══════════════════════════════════════════════════════════
   ENCART NEWSLETTER — [pd_newsletter]
   Trois habillages qui reprennent l'arche du logo : trait fin,
   contraste anthracite / taupe, beaucoup de blanc autour.
   Dimensionnés pour les 300 px de la colonne latérale.
   ═══════════════════════════════════════════════════════════ */
.pd-news {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    padding: 26px 22px;
}
.pd-news > * { position: relative; z-index: 1; }

/* L'arche du logo, en décor de fond */
.pd-news::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.pd-news-icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 40px;
    height: 46px;
    margin-bottom: 14px;
    padding-bottom: 9px;
    border: 1px solid var(--theme-primary);
    border-radius: 20px 20px 3px 3px;   /* une arche, comme le 21 du logo */
    color: var(--theme-primary);
}
.pd-news-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.2px;
    color: var(--theme-text);
    margin: 0 0 9px;
}
.pd-news-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--theme-text);
    opacity: 0.78;
    margin: 0 0 18px;
}
.pd-news-note {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--theme-text);
    opacity: 0.6;
    margin: 14px 0 0;
}
.pd-news-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0;
}

/* ── Champs : on habille ce que sort le plugin de formulaire ── */
.pd-news-form p { margin: 0 0 10px; }
.pd-news-form p:last-child { margin-bottom: 0; }
.pd-news-form .wpcf7-spinner { display: none; }

.pd-news-form input[type="email"],
.pd-news-form input[type="text"] {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--theme-text);
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.18s ease;
}
.pd-news-form input[type="email"]:focus,
.pd-news-form input[type="text"]:focus { border-color: var(--theme-primary); }
.pd-news-form input::placeholder { color: var(--text-muted); }

.pd-news-form input[type="submit"],
.pd-news-form button[type="submit"] {
    width: 100%;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--theme-background);
    background: var(--theme-text);
    border: 1px solid var(--theme-text);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.pd-news-form input[type="submit"]:hover,
.pd-news-form button[type="submit"]:hover {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--on-primary);
}

/* ── 1. ÉDITORIAL — beige sable, grande arche en trait ──
   L'écru était trop proche du fond de page : le beige donne
   à l'encart la présence qui lui manquait. ── */
.pd-news--editorial {
    background: var(--theme-secondary);
    border-left: 4px solid var(--theme-text);
    border-radius: 0 10px 10px 0;
}
.pd-news--editorial::before {
    top: -34px;
    right: -26px;
    width: 132px;
    height: 168px;
    border: 1px solid var(--theme-text);
    border-bottom: none;
    border-radius: 66px 66px 0 0;
    opacity: 0.22;
}
.pd-news--editorial .pd-news-icon { border-color: var(--theme-text); color: var(--theme-text); }
.pd-news--editorial .pd-news-form input[type="email"],
.pd-news--editorial .pd-news-form input[type="text"] { border-color: rgba(41, 41, 40, 0.18); }

/* ── 2. ANTHRACITE — arche taupe en aplat ──
   Le contrepoint sombre du logo. L'arche, cette fois pleine,
   monte derrière le texte comme sur la vignette de la marque. ── */
.pd-news--dark {
    background: var(--theme-text);
    color: var(--theme-background);
}
.pd-news--dark::before {
    bottom: -50px;
    left: -34px;
    width: 168px;
    height: 200px;
    background: var(--theme-primary);
    border-radius: 84px 84px 6px 6px;
    opacity: 0.16;
}
.pd-news--dark .pd-news-title { color: var(--theme-background); }
.pd-news--dark .pd-news-text,
.pd-news--dark .pd-news-note  { color: var(--theme-background); opacity: 0.72; }
.pd-news--dark .pd-news-form input[type="email"],
.pd-news--dark .pd-news-form input[type="text"] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--theme-background);
}
.pd-news--dark .pd-news-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.pd-news--dark .pd-news-form input[type="submit"],
.pd-news--dark .pd-news-form button[type="submit"] {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--on-primary);
}
.pd-news--dark .pd-news-form input[type="submit"]:hover,
.pd-news--dark .pd-news-form button[type="submit"]:hover {
    background: var(--theme-background);
    border-color: var(--theme-background);
    color: var(--theme-text);
}

/* ── 3. ARCHE — le bloc épouse la forme du logo ──
   Le sommet est une arche pleine en anthracite, le corps reste
   clair : c'est la vignette de la marque, agrandie. ── */
.pd-news--framed {
    background: #fff;
    border: 1px solid var(--theme-primary);
    border-radius: 150px 150px 10px 10px;
    text-align: center;
    padding: 34px 24px 26px;
}
.pd-news--framed::before {
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 128px;
    background: var(--theme-secondary);
    border-radius: 150px 150px 40% 40%;
    opacity: 0.55;
}
.pd-news--framed .pd-news-icon {
    margin: 0 auto 12px;
    background: #fff;
}
.pd-news--framed .pd-news-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 10px;
}
.pd-news--framed .pd-news-text { margin-bottom: 20px; }
.pd-news--framed .pd-news-form input[type="email"],
.pd-news--framed .pd-news-form input[type="text"] {
    text-align: center;
    border-radius: 30px;
}
.pd-news--framed .pd-news-form input[type="submit"],
.pd-news--framed .pd-news-form button[type="submit"] { border-radius: 30px; }

/* En pleine largeur d'article, l'encart ne s'étire pas indéfiniment */
.entry-content .pd-news { max-width: 460px; margin: 35px auto; }

/* ═══════════════════════════════════════════════════════════
   ENCARTS PHOTO — l'image d'ambiance comme décor
   Les aplats manquaient de matière : une photo d'intérieur apporte
   la texture et la lumière qu'aucune couleur plate ne donne.
   L'image passe par --pd-news-image, posée par le shortcode.
   ═══════════════════════════════════════════════════════════ */

/* ── 4. PHOTO PLEIN CADRE ──
   Photo sous un voile anthracite qui s'épaissit vers le bas :
   le texte reste lisible sans écraser l'image. ── */
.pd-news--photo {
    padding: 30px 24px 26px;
    color: var(--theme-background);
    background: var(--theme-text);
}
.pd-news--photo .pd-news-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--pd-news-image, none);
    background-size: cover;
    background-position: center;
}
/* Le voile, puis l'arche en trait clair par-dessus la photo */
.pd-news--photo .pd-news-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(41, 41, 40, 0.30) 0%,
        rgba(41, 41, 40, 0.72) 45%,
        rgba(41, 41, 40, 0.92) 100%);
}
.pd-news--photo:not(.has-image) .pd-news-media {
    background-image: linear-gradient(150deg, var(--theme-primary) 0%, var(--theme-text) 75%);
}
.pd-news--photo::before {
    top: 18px; right: -30px;
    width: 116px; height: 150px;
    border: 1px solid rgba(250, 248, 244, 0.5);
    border-bottom: none;
    border-radius: 58px 58px 0 0;
}
.pd-news--photo .pd-news-icon {
    border-color: rgba(250, 248, 244, 0.55);
    color: var(--theme-background);
}
.pd-news--photo .pd-news-title { color: var(--theme-background); }
.pd-news--photo .pd-news-text,
.pd-news--photo .pd-news-note  { color: var(--theme-background); opacity: 0.8; }
.pd-news--photo .pd-news-form input[type="email"],
.pd-news--photo .pd-news-form input[type="text"] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--theme-background);
    backdrop-filter: blur(3px);
}
.pd-news--photo .pd-news-form input::placeholder { color: rgba(255, 255, 255, 0.62); }
.pd-news--photo .pd-news-form input[type="submit"],
.pd-news--photo .pd-news-form button[type="submit"] {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--on-primary);
}
.pd-news--photo .pd-news-form input[type="submit"]:hover,
.pd-news--photo .pd-news-form button[type="submit"]:hover {
    background: var(--theme-background);
    border-color: var(--theme-background);
    color: var(--theme-text);
}

/* ── 5. PHOTO SOUS ARCHE ──
   La composition de la charte : l'image dans la voûte, la typo
   posée en dessous sur fond clair. ── */
.pd-news--arch {
    padding: 0 0 24px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-align: center;
}
.pd-news--arch .pd-news-media {
    display: block;
    height: 168px;
    margin: 14px 14px 0;
    border-radius: 90px 90px 8px 8px;   /* l'arche */
    background-image: var(--pd-news-image, none);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}
.pd-news--arch:not(.has-image) .pd-news-media {
    background-image: linear-gradient(160deg, var(--theme-secondary) 0%, var(--theme-primary) 100%);
}
/* Le picto chevauche le bas de l'arche, comme un sceau */
.pd-news--arch .pd-news-icon {
    margin: -22px auto 12px;
    background: var(--card-bg);
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 5px var(--card-bg);
}
.pd-news--arch .pd-news-title,
.pd-news--arch .pd-news-text,
.pd-news--arch .pd-news-form,
.pd-news--arch .pd-news-note { padding-left: 22px; padding-right: 22px; }
.pd-news--arch .pd-news-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 10px;
}
.pd-news--arch .pd-news-text { margin-bottom: 18px; }
.pd-news--arch .pd-news-form input[type="email"],
.pd-news--arch .pd-news-form input[type="text"] { text-align: center; border-radius: 30px; }
.pd-news--arch .pd-news-form input[type="submit"],
.pd-news--arch .pd-news-form button[type="submit"] { border-radius: 30px; }

/* ── Contact Form 7 dans l'encart : cases à cocher et messages ── */
.pd-news-form .wpcf7-list-item { margin: 0; display: block; }
.pd-news-form .wpcf7-list-item-label {
    font-size: 12.5px;
    line-height: 1.45;
    vertical-align: middle;
}
.pd-news-form input[type="checkbox"] {
    width: auto;
    margin-right: 7px;
    vertical-align: middle;
    accent-color: var(--theme-primary);
}
.pd-news-form .wpcf7-response-output {
    margin: 12px 0 0 !important;
    padding: 9px 12px !important;
    font-size: 12.5px;
    line-height: 1.45;
    border-width: 1px !important;
    border-radius: 6px;
}
.pd-news-form .wpcf7-not-valid-tip { font-size: 12px; margin-top: 5px; }

/* Sur les fonds sombres, le texte des cases et des messages doit suivre */
.pd-news--dark .pd-news-form,
.pd-news--photo .pd-news-form { color: var(--theme-background); }
.pd-news--dark .pd-news-form .wpcf7-response-output,
.pd-news--photo .pd-news-form .wpcf7-response-output { border-color: rgba(255, 255, 255, 0.35) !important; }

/* ── Formulaire compact : intitulé à gauche, champ à droite ──
   Contact Form 7 enveloppe chaque champ dans son label. On met ce
   label en ligne, sauf celui de la case à cocher, qui n'a pas de
   wrap en enfant direct et garde donc sa disposition. ── */
.pd-news-form label:has(> .wpcf7-form-control-wrap) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    line-height: 1.25;
}
.pd-news-form label:has(> .wpcf7-form-control-wrap) > .wpcf7-form-control-wrap {
    flex: 1;
    min-width: 0;
}
.pd-news-form label:has(> .wpcf7-form-control-wrap) input { width: 100%; }

/* Les champs en ligne restent alignés à gauche même dans les
   habillages centrés */
.pd-news--arch .pd-news-form label:has(> .wpcf7-form-control-wrap) input,
.pd-news--framed .pd-news-form label:has(> .wpcf7-form-control-wrap) input {
    text-align: left;
    padding-left: 14px;
    padding-right: 14px;
}

/* La case à cocher : case à gauche, libellé serré à côté */
.pd-news-form .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    text-align: left;
    font-weight: 400;
    margin: 4px 0 12px;
}
.pd-news-form .wpcf7-list-item input[type="checkbox"] { margin: 2px 0 0; flex-shrink: 0; }

/* Un message reste possible, mais bref */
.pd-news-form textarea {
    width: 100%;
    min-height: 74px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--theme-text);
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    outline: none;
    resize: vertical;
}

/* ── Mention de consentement : plus discrète que les intitulés,
      et son lien doit rester identifiable comme un lien ── */
.pd-news-form .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 11.5px;
    line-height: 1.45;
    opacity: 0.85;
}
.pd-news-form a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.pd-news-form a:hover { text-decoration-color: var(--theme-primary); }
.pd-news--editorial .pd-news-form a:hover,
.pd-news--framed .pd-news-form a:hover,
.pd-news--arch .pd-news-form a:hover { color: var(--theme-primary-ink); }

/* Un champ obligatoire non coché : CF7 signale, l'encart reste lisible */
.pd-news-form .wpcf7-not-valid-tip { font-size: 11.5px; }

/* ── « Lire l'article » : un lien, pas un bouton ──
   Il avait été rangé par erreur avec les CTA à fond plein, ce qui en
   faisait un bandeau pleine largeur sous le texte. ── */
.s4-read-more {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    color: var(--theme-primary-ink);
    transition: color 0.18s ease, gap 0.18s ease;
}
.s4-main-card:hover .s4-read-more { color: var(--theme-text); }

/* ═══════════════════════════════════════════════════════════
   CATÉGORIE — LISTE ÉDITORIALE
   Le premier article prend toute la largeur, les suivants
   s'alignent image à gauche. Chapô, signature et durée de
   lecture : le format qui informe le plus par article.
   ═══════════════════════════════════════════════════════════ */
.pd-list { margin-top: 8px; }

.pd-list-item {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 26px;
    align-items: start;
    padding: 26px 0;
    border-bottom: 1px solid var(--border-color);
    color: inherit;
}
.pd-list-item:last-child { border-bottom: none; }
.pd-list-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}
.pd-list-noimg {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background: var(--theme-background-alt);
}

/* Le premier article passe en pleine largeur */
.pd-list-lead {
    grid-template-columns: 1fr;
    padding-top: 0;
    gap: 20px;
}
.pd-list-lead img { aspect-ratio: 21 / 9; }
.pd-list-lead h2 { font-size: 29px; letter-spacing: -0.6px; }
.pd-list-lead .pd-list-excerpt { font-size: 16px; }

.pd-list-kicker {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--theme-primary-ink);
    margin-bottom: 8px;
}
.pd-list-item h2 {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: var(--theme-text);
    margin-bottom: 9px;
    transition: color 0.18s ease;
}
.pd-list-item:hover h2 { color: var(--theme-primary-ink); }
.pd-list-excerpt {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 11px;
}
.pd-list-sign {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: var(--text-muted);
}
.pd-list-sign b { color: var(--theme-text); font-weight: 700; }
.pd-list-sign i { width: 3px; height: 3px; border-radius: 50%; background: var(--border-color); display: block; }

@media (max-width: 700px) {
    .pd-list-item { grid-template-columns: 1fr; gap: 14px; }
    .pd-list-item img, .pd-list-noimg { aspect-ratio: 16 / 9; }
    .pd-list-lead h2 { font-size: 23px; }
    .pd-list-item h2 { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   CATÉGORIE — MOSAÏQUE À HAUTEURS LIBRES
   Les cartes gardent le format d'origine de leur image : rien
   n'est recadré. Les colonnes CSS s'en chargent, sans le
   JavaScript qu'exigent les grilles maçonnées.
   ═══════════════════════════════════════════════════════════ */
.pd-mosaic-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 24px;
}
.pd-mosaic-filters span,
.pd-mosaic-filters a {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    transition: border-color 0.18s ease, color 0.18s ease;
}
.pd-mosaic-filters a:hover { border-color: var(--theme-primary); color: var(--theme-text); }
.pd-mosaic-filters .on {
    background: var(--theme-text);
    border-color: var(--theme-text);
    color: var(--theme-background);
}

.pd-mosaic { columns: 3; column-gap: 18px; }

.pd-mosaic-card {
    display: block;
    break-inside: avoid;
    margin-bottom: 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pd-mosaic-card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}
/* Aucune contrainte de ratio : c'est tout l'intérêt du format */
.pd-mosaic-card img { width: 100%; height: auto; border-radius: 0; }

.pd-mosaic-body { display: block; padding: 16px 17px 18px; }
.pd-mosaic-kicker {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--theme-primary-ink);
}
.pd-mosaic-card h2 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.32;
    color: var(--theme-text);
    margin: 7px 0 8px;
    transition: color 0.18s ease;
}
.pd-mosaic-card:hover h2 { color: var(--theme-primary-ink); }
.pd-mosaic-excerpt {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-muted);
}
.pd-mosaic-card em {
    display: block;
    font-size: 11.5px;
    font-style: normal;
    color: var(--text-muted);
    margin-top: 10px;
}

@media (max-width: 980px) { .pd-mosaic { columns: 2; } }
@media (max-width: 620px) { .pd-mosaic { columns: 1; } }

/* ═══════════════════════════════════════════════════════════
   ACCUEIL — MOSAÏQUE BENTO
   Grille volontairement irrégulière. Les tuiles de texte, sans
   image, cassent le mur de photos et laissent respirer la page.
   ═══════════════════════════════════════════════════════════ */
.pd-bento-wrap { padding-top: 22px; }

.pd-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 184px;
    gap: 14px;
    margin-bottom: 20px;
}

.pd-bento-tile {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: var(--theme-text);
    color: var(--on-image);
}
.pd-bento-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.5s ease;
}
.pd-bento-tile:hover img { transform: scale(1.04); }

.pd-bento-tile .ov {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 100%);
}
.pd-bento-tile .cat {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
    background: var(--theme-primary);
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 9px;
}
.pd-bento-tile h2 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--on-image);
}

.pd-bento-lg { grid-column: span 2; grid-row: span 2; }
.pd-bento-lg h2 { font-size: 27px; letter-spacing: -0.5px; line-height: 1.15; }
.pd-bento-md { grid-column: span 2; }
.pd-bento-md h2 { font-size: 18px; }

/* Tuile de texte : fond plat, pas d'image, pas de voile */
.pd-bento-txt {
    background: var(--theme-background-alt);
    color: var(--theme-text);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pd-bento-txt .cat {
    align-self: flex-start;
    background: none;
    padding: 0;
    color: var(--theme-primary-ink);
    margin-bottom: 0;
}
.pd-bento-txt h2 {
    font-size: 16px;
    color: var(--theme-text);
    line-height: 1.32;
    margin: 8px 0;
}
.pd-bento-txt em {
    font-size: 11.5px;
    font-style: normal;
    color: var(--text-muted);
}
.pd-bento-txt:hover h2 { color: var(--theme-primary-ink); }

@media (max-width: 900px) {
    .pd-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 168px; }
    .pd-bento-lg, .pd-bento-md { grid-column: span 2; }
    .pd-bento-lg { grid-row: span 2; }
}
@media (max-width: 560px) {
    .pd-bento { grid-template-columns: 1fr; }
    .pd-bento-lg, .pd-bento-md { grid-column: span 1; }
    .pd-bento-lg { grid-row: span 2; }
    .pd-bento-lg h2 { font-size: 21px; }
}

/* ═══════════════════════════════════════════════════════════
   ACCUEIL — COUVERTURE IMMERSIVE ET RANGÉES DÉFILABLES
   Une image plein cadre en ouverture, puis des rangées qui
   défilent horizontalement : beaucoup d'articles parcourus
   sans jamais descendre longtemps.
   ═══════════════════════════════════════════════════════════ */
.pd-cover {
    position: relative;
    height: min(62vh, 520px);
    overflow: hidden;
    background: var(--theme-text);
}
.pd-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.pd-cover-veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.15) 100%);
}
.pd-cover-in { padding-bottom: 46px; color: var(--on-image); max-width: 760px; }
.pd-cover-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    background: var(--theme-primary);
    color: #fff;
    padding: 5px 11px;
    border-radius: 3px;
    margin-bottom: 16px;
}
.pd-cover h1 {
    font-size: clamp(26px, 4.4vw, 44px);
    font-weight: 900;
    letter-spacing: -1.1px;
    line-height: 1.06;
    margin-bottom: 14px;
}
.pd-cover h1 a { color: var(--on-image); }
.pd-cover p {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.85;
    max-width: 580px;
    margin-bottom: 12px;
}
.pd-cover-sign { font-size: 12.5px; opacity: 0.75; }
.pd-cover-sign b { font-weight: 700; }

/* ── Rangées ── */
.pd-rows-wrap { padding-top: 8px; }
.pd-row { padding: 34px 0 6px; }
.pd-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.pd-row-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.pd-row-slash { color: var(--theme-primary); }
.pd-row-head a { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pd-row-head a:hover { color: var(--theme-primary-ink); }

/* Défilement horizontal, avec accroche sur chaque carte */
.pd-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 252px;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 12px;
    scrollbar-width: thin;
}
.pd-scroll-card { scroll-snap-align: start; color: inherit; }
.pd-scroll-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 9px;
    margin-bottom: 10px;
}
.pd-scroll-noimg {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 9px;
    background: var(--theme-background-alt);
    margin-bottom: 10px;
}
.pd-scroll-cat {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--theme-primary-ink);
}
.pd-scroll-card h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.32;
    margin-top: 5px;
    transition: color 0.18s ease;
}
.pd-scroll-card:hover h3 { color: var(--theme-primary-ink); }
.pd-scroll-card em {
    display: block;
    font-size: 11.5px;
    font-style: normal;
    color: var(--text-muted);
    margin-top: 6px;
}

@media (max-width: 600px) {
    .pd-cover { height: min(56vh, 400px); }
    .pd-cover-in { padding-bottom: 30px; }
    .pd-scroller { grid-auto-columns: 208px; }
}

/* ═══════════════════════════════════════════════════════════
   EN-TÊTE — MÉGA-MENU
   Le survol d'une rubrique déploie un panneau pleine largeur :
   sous-rubriques à gauche, trois derniers articles à droite.
   ═══════════════════════════════════════════════════════════ */
.site-header--mega { position: relative; }
.site-header--mega .main-nav { flex: 1; justify-content: flex-start; margin-left: 30px; }
.site-header--mega .main-nav .menu-header { gap: 26px; }
.site-header--mega .main-nav .menu-header > li > a {
    padding: 22px 0;
    font-size: 14.5px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}
.site-header--mega .main-nav .menu-header > .current-menu-item > a,
.site-header--mega .main-nav .menu-header > .current-menu-ancestor > a {
    color: var(--theme-primary-ink);
    border-bottom-color: var(--theme-primary);
}
.site-header--mega .menu-header > .menu-item-has-children > a::after { display: none; }

/* Le panneau sort du <li> mais s'étend sur toute la largeur de l'écran */
.pd-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.13);
    padding: 26px 0 30px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 130;
}
.site-header--mega .menu-item-has-children:hover > .pd-mega,
.site-header--mega .menu-item-has-children:focus-within > .pd-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.pd-mega-in { display: grid; grid-template-columns: 220px 1fr; gap: 38px; }

.pd-mega-subs { list-style: none; margin: 0; padding: 0; }
.pd-mega-subs li { border-bottom: 1px solid var(--border-color); }
.pd-mega-subs li a {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    white-space: normal;
}
.pd-mega-subs li a:hover { color: var(--theme-primary-ink); }

.pd-mega-arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pd-mega-art img,
.pd-mega-noimg {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 9px;
    background: var(--theme-background-alt);
}
.pd-mega-art b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.pd-mega-art em { font-size: 11.5px; font-style: normal; color: var(--text-muted); }
.pd-mega-art:hover b { color: var(--theme-primary-ink); }

@media (max-width: 900px) {
    /* Dans le panneau mobile, le méga-menu redevient une liste simple */
    .pd-mega {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0 0 0 16px;
        border-left: 2px solid var(--border-color);
        margin-bottom: 8px;
    }
    .pd-mega-in { display: block; }
    .pd-mega-arts { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   EN-TÊTE — PANNEAU PLEIN ÉCRAN
   Une barre réduite au logo et à un bouton. Le panneau occupe
   l'écran : rubriques en très grand, sélection d'articles à côté.
   ═══════════════════════════════════════════════════════════ */
.site-header--drawer .header-wrap { justify-content: space-between; }
.site-header--drawer .header-tools { margin-left: auto; }

.pd-drawer-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.pd-drawer-btn i {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    position: relative;
    transition: background 0.2s ease;
}
.pd-drawer-btn i::before,
.pd-drawer-btn i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 0.25s ease, top 0.25s ease;
}
.pd-drawer-btn i::before { top: -6px; }
.pd-drawer-btn i::after  { top: 6px; }
/* Ouvert, les trois traits deviennent une croix */
.pd-drawer-btn.is-open i { background: transparent; }
.pd-drawer-btn.is-open i::before { top: 0; transform: rotate(45deg); }
.pd-drawer-btn.is-open i::after  { top: 0; transform: rotate(-45deg); }

.pd-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--theme-text);
    color: var(--theme-background);
    overflow-y: auto;
    padding: 92px 0 60px;
    animation: pd-drawer-in 0.22s ease both;
}
@keyframes pd-drawer-in { from { opacity: 0; transform: translateY(-8px); } }

.pd-drawer-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; }

/* Les rubriques, en très grand */
.pd-drawer .main-nav { display: block; }
.pd-drawer .menu-header { display: block; }
.pd-drawer .menu-header > li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); position: relative; }
.pd-drawer .menu-header > li > a {
    display: block;
    padding: 15px 0;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    letter-spacing: -0.7px;
    color: var(--theme-background);
    white-space: normal;
    transition: color 0.18s ease;
}
.pd-drawer .menu-header > li > a:hover { color: var(--theme-primary); }
.pd-drawer .menu-header > .menu-item-has-children > a::after { display: none; }

/* Les sous-rubriques restent dépliées, en petit, sous leur parent */
.pd-drawer .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 14px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    min-width: 0;
}
.pd-drawer .sub-menu li a {
    padding: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    background: none;
}
.pd-drawer .sub-menu li a:hover { color: var(--theme-background); }

.pd-drawer-side h2 {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--theme-primary);
    margin-bottom: 16px;
}
.pd-drawer-pick {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--theme-background);
}
.pd-drawer-pick img {
    width: 82px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}
.pd-drawer-pick b { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.pd-drawer-pick:hover b { color: var(--theme-primary); }

@media (max-width: 820px) {
    .pd-drawer-in { grid-template-columns: 1fr; gap: 34px; }
    .pd-drawer { padding-top: 84px; }
}

/* ═══════════════════════════════════════════════════════════
   BOUTONS GOOGLE EN FIN D'ARTICLE
   Même geste que le partage : on propose de suivre le site à
   quelqu'un qui vient de lire. L'encart reprend le fond des
   blocs éditoriaux plutôt que de se poser en bandeau publicitaire.
   ═══════════════════════════════════════════════════════════ */
.pd-gcta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 26px;
    flex-wrap: wrap;
    background: var(--theme-background-alt);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 22px;
    margin: 30px 0;
}
.pd-gcta-text { min-width: 0; }
.pd-gcta-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--theme-text);
    margin: 0 0 3px;
}
.pd-gcta-sub {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}
/* Les boutons gardent leur habillage Google, seul l'espacement change */
.pd-gcta .header-google { flex-shrink: 0; flex-wrap: wrap; }
.pd-gcta .g-btn { padding: 9px 18px; font-size: 13.5px; }
.pd-gcta .g-btn span { display: inline; }

@media (max-width: 600px) {
    .pd-gcta { padding: 18px; }
    .pd-gcta .header-google { width: 100%; }
    .pd-gcta .g-btn { flex: 1; justify-content: center; }
}