/* Améliorations responsive pour le frontoffice */

/* Amélioration générale pour les petits écrans */
@media (max-width: 767px) {
    /* Container et layout */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Grille d'articles sur la page d'accueil */
    .posts-grid .span2 {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* Articles dans les listes */
    .post_wrapper {
        margin-bottom: 30px;
    }

    .featured-thumbnail img {
        max-width: 100%;
        height: auto;
    }

    /* Vidéos responsives */
    .video-wrap iframe,
    .video-wrap video {
        max-width: 100%;
        height: auto;
        min-height: 200px;
    }

    /* Articles liés */
    .related-posts_list li {
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* Sidebar */
    #sidebar {
        margin-top: 30px;
    }

    /* Pagination */
    .pagination ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination li {
        margin: 2px;
    }

    /* Titres */
    h1.title-header,
    .title-header {
        font-size: 1.5rem;
        padding: 0 10px !important;
    }

    /* Supprimer les images décoratives qui chevauchent les titres sur mobile */
    .title-header:before, .title-header:after,
    .related-posts_h:before, .related-posts_h:after,
    .widget-title:before, .widget-title:after {
        display: none !important;
    }

    .post-title {
        font-size: 1.3rem;
    }

    /* Meta informations */
    .post_meta {
        font-size: 0.9rem;
    }

    .meta_group {
        margin-bottom: 10px;
    }

    /* Images dans les articles */
    .post_content img {
        max-width: 100%;
        height: auto;
    }

    /* Articles liés */
    .related-posts .featured-thumbnail {
        margin-bottom: 10px !important;
    }

    .related-posts_list li {
        width: 100% !important;
        margin-bottom: 30px !important;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }

    .related-posts_list li:last-child {
        margin-bottom: 0 !important;
        border-bottom: none;
        padding-bottom: 0;
    }

    .related-posts_item {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    /* Formulaire de commentaires */
    .comment-form textarea,
    .comment-form input[type="text"],
    .comment-form input[type="email"] {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 979px) {
    /* La largeur des cartes « derniers articles » est gérée par la CSS grid
       (home-desktop : grid-template-columns). NE PAS remettre de
       `.posts-grid .span2 { width }` ici : ce width legacy (33.333%) écrasait
       chaque carte à ~34px de large en paysage (le `!important` battait le
       `width:auto` du grid). Bug « images larges de quelques pixels ». */

    /* Articles liés */
    .related-posts_list li {
        width: 50% !important;
    }
}

/* Améliorations pour les très petits écrans */
@media (max-width: 480px) {
    /* Titres encore plus petits */
    h1.title-header,
    .title-header {
        font-size: 1.3rem;
    }

    .post-title {
        font-size: 1.2rem;
    }

    /* Espacement réduit */
    .post_wrapper {
        margin-bottom: 20px;
    }

    /* Pagination compacte */
    .pagination li {
        font-size: 0.9rem;
        padding: 5px 8px;
    }
}

/* Amélioration des vidéos embarquées (responsive) */
.video-wrap {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-wrap iframe,
.video-wrap object,
.video-wrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Amélioration des tableaux dans les articles */
@media (max-width: 767px) {
    .post_content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Amélioration des images dans les articles */
.post_content img {
    max-width: 100%;
    height: auto;
}

/* Amélioration des listes */
@media (max-width: 767px) {
    .post_content ul,
    .post_content ol {
        padding-left: 20px;
    }
}
/* Items écrits <li><p>…</p></li> (artefact d'éditeur) : le <p> héritait du
   margin-bottom du corps d'article, ce qui créait un saut de ligne parasite
   entre chaque puce. On neutralise la marge des paragraphes en liste. */
body.single .post_content li > p,
body.single .post_content li p { margin: 0; }

/* Amélioration de la sidebar sur mobile */
@media (max-width: 767px) {
    #sidebar .widget {
        margin-bottom: 30px;
    }
}

/* =========================================================================
   Correctifs UI mobile (juin 2026)
   ========================================================================= */

/* ===== Pagination « douce » — refonte 2026-06 ============================
   L'ancien style legacy (main-style.css) affichait des carrés noirs à angles
   vifs (background:#272727 ; border-radius:0 !important), bold, peu élégants.
   On reprend la main avec un sélecteur doublé (.pagination.pagination__posts)
   à spécificité supérieure pour passer devant ses !important, à toutes les
   largeurs : pastilles rondes, ton sable/terracotta, page active pleine. */
.pagination.pagination__posts {
    margin: 40px 0 6px;
    text-align: center;
}
.pagination.pagination__posts ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pagination.pagination__posts ul li {
    display: inline-flex;
    margin: 0;
    line-height: 1;
}
.pagination.pagination__posts ul li a,
.pagination.pagination__posts ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px !important;
    margin: 0 !important;
    border: 1px solid #ecdcc8 !important;
    border-radius: 999px !important;
    background: #fffaf3;
    color: #9a6b43;
    font: 500 14px/1 Comfortaa, sans-serif;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
/* Numéros = cercle parfait (pas de padding latéral). */
.pagination.pagination__posts ul li a.inactive,
.pagination.pagination__posts ul li.active span {
    padding: 0 !important;
}
/* Survol : remplissage sable doux, léger soulèvement. */
.pagination.pagination__posts ul li a:hover,
.pagination.pagination__posts ul li a:focus {
    background: #f6e7d4 !important;
    border-color: #e3cdb0 !important;
    color: #a25f30;
    box-shadow: 0 8px 18px -12px rgba(120, 80, 40, .65);
    transform: translateY(-1px);
}
/* Page courante : pastille terracotta pleine, douce. */
.pagination.pagination__posts ul li.active span {
    background: #b0784a !important;
    border-color: #b0784a !important;
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(160, 100, 50, .75);
}
/* « première / précédent / suivant / dernière » : plus discrètes. */
.pagination.pagination__posts ul li.first a,
.pagination.pagination__posts ul li.last a,
.pagination.pagination__posts ul li.prev a,
.pagination.pagination__posts ul li.next a {
    color: #b89a7e;
    font-weight: 500;
}
.pagination.pagination__posts ul li.first a:hover,
.pagination.pagination__posts ul li.last a:hover,
.pagination.pagination__posts ul li.prev a:hover,
.pagination.pagination__posts ul li.next a:hover {
    color: #a25f30;
}

/* Retirer les fleurons décoratifs autour des titres d'articles en vue mobile
   (mêmes symboles que .title-header, déjà masqués plus haut). */
@media (max-width: 767px) {
    .post-title:before,
    .post-title:after {
        display: none !important;
    }

    /* La marge basse réservait la place du fleuron : on la réduit. */
    .post-title {
        margin-bottom: 20px;
    }

    /* Moteur de recherche : aérer le bouton collé au champ de saisie. */
    .search-form_is {
        margin-top: 10px;
    }

    /* Pagination : pastilles un peu plus compactes sur mobile, toujours rondes
       (flex-wrap gère le retour à la ligne proprement, centré). */
    .pagination.pagination__posts { margin-top: 30px; }
    .pagination.pagination__posts ul { gap: 6px; }
    .pagination.pagination__posts ul li a,
    .pagination.pagination__posts ul li span {
        min-width: 36px;
        height: 36px;
        padding: 0 13px !important;
        font-size: 13px !important;
    }
    .pagination.pagination__posts ul li a.inactive,
    .pagination.pagination__posts ul li.active span { padding: 0 !important; }
}


/* ===== L1 — Odeur de l'information : chapô + temps de lecture ===== */
/* Chapô (extrait) sur la liste d'articles */
.post_content .excerpt {
    color: #5f5f5f;
    font: 400 15px/1.65 'Open Sans', sans-serif;
    margin: 0 0 14px;
}
/* Temps de lecture sous le titre d'article (et sur les cartes de tag) */
.article-reading-time {
    margin: 4px 0 18px;
    font: 600 13px/1.2 Comfortaa, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    color: inherit;
    opacity: .8;
}
.article-reading-time i { margin-right: 6px; }
.post_content > .article-reading-time { text-align: left; margin: 0 0 12px; }

/* Temps de lecture dans la barre de méta */
.post_meta .post_reading_time {
    display: inline-block;
    margin-right: 14px;
    color: #8a7a68;
}
.post_meta .post_reading_time i { margin-right: 4px; }

/* Méta des cartes d'accueil (catégorie · temps de lecture) */
.posts-grid .post-card_meta {
    margin: 4px 0 0;
    font: 600 11px/1.3 Comfortaa, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.posts-grid .post-card_cat { color: #b0784a; text-decoration: none; }
.posts-grid .post-card_cat:hover { color: #d06e0a; }
.posts-grid .post-card_time { color: #b8a48f; font-weight: 400; }

/* ===== L3a — Citation contemplative sur l'accueil ===== */
.home-citation {
    margin: 6px 0 34px;
    padding: 38px 0 34px;
    background: linear-gradient(180deg, #fcf7f0 0%, #faf3ea 100%);
    border-top: 1px solid #f0e4d4;
    border-bottom: 1px solid #f0e4d4;
}
.home-citation_bq {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
    border: 0;
    background: none;
    text-align: center;
}
.home-citation_bq p {
    margin: 0;
    color: #5a4a38;
    font: italic 400 22px/1.7 Comfortaa, Georgia, serif;
}
.home-citation_bq em { font-style: italic; }
.home-citation_author {
    display: block;
    margin-top: 16px;
    color: #b0784a;
    font: 600 13px/1 Comfortaa, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.home-citation_author:before { content: '— '; }
@media (max-width: 600px) {
    .home-citation { padding: 26px 0 24px; margin-bottom: 24px; }
    .home-citation_bq p { font-size: 18px; line-height: 1.6; }
}

/* ===== L2 — Fil d'Ariane visible ===== */
.breadcrumb {
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border: 0;
}
.breadcrumb_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font: 500 14px/1.65 Comfortaa, sans-serif;
    text-transform: none;
    letter-spacing: .008em;
}
.breadcrumb_item { display: inline-flex; align-items: center; }
.breadcrumb_item + .breadcrumb_item:before {
    content: '›';
    margin: 0 11px;
    color: #d3bfa4;
    font-weight: 400;
}
.breadcrumb_item a { color: #b0784a; text-decoration: none; transition: color .2s ease; }
.breadcrumb_item a:hover { color: #d06e0a; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb_item span[aria-current="page"] {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    color: #6b5d4a;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .breadcrumb_list { font-size: 12.5px; }
    .breadcrumb_item span[aria-current="page"] { max-width: 48vw; }
}

/* ===== L4 — « Sur le même chemin » : carrefour de fin d'article ===== */
.next-path {
    margin: 46px 0 10px;
    padding-top: 30px;
    border-top: 1px solid #ededed;
}
.next-path_title {
    font: 700 22px/1.3 Comfortaa, sans-serif;
    color: #b0784a;
    margin: 0 0 22px;
}
/* Prompt fort : continuer la lecture (Fogg) */
.next-path_continue {
    display: block;
    margin: 0 0 28px;
    padding: 18px 22px;
    background: linear-gradient(120deg, #fbf2e8 0%, #f7ead9 100%);
    border: 1px solid #f0e3d3;
    border-left: 4px solid #d06e0a;
    border-radius: 10px;
    text-decoration: none;
    transition: box-shadow .25s ease, transform .15s ease;
}
.next-path_continue:hover { box-shadow: 0 8px 24px rgba(80,55,30,.10); transform: translateY(-1px); }
.next-path_continue-label {
    display: block;
    font: 600 11px/1 Comfortaa, sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #b0784a;
    margin-bottom: 7px;
}
.next-path_continue-title {
    display: block;
    font: 600 18px/1.4 Comfortaa, sans-serif;
    color: #3a3a3a;
}
.next-path_continue:hover .next-path_continue-title { color: #d06e0a; }

/* Grille des 3 articles liés (vignette + catégorie + titre + chapô) */
.next-path_grid {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.next-path_item a { display: block; text-decoration: none; color: #3a3a3a; }
.next-path_thumb {
    margin: 0 0 11px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(60,40,20,.10);
}
.next-path_thumb img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.next-path_item a:hover .next-path_thumb img { transform: scale(1.06); }
.next-path_item-cat {
    display: block;
    font: 600 10.5px/1 Comfortaa, sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #b0784a;
    margin-bottom: 5px;
}
.next-path_item-title {
    display: block;
    font: 600 14.5px/1.4 Comfortaa, sans-serif;
    margin-bottom: 6px;
}
.next-path_item a:hover .next-path_item-title { color: #d06e0a; }
.next-path_item-excerpt {
    display: block;
    font: 400 13px/1.55 'Open Sans', sans-serif;
    color: #7a7a7a;
}

/* Lien d'évasion vers toute la catégorie */
.next-path_all {
    display: inline-block;
    font: 600 13px/1 Comfortaa, sans-serif;
    color: #d06e0a;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.next-path_all:hover { color: #b85e08; }

@media (max-width: 767px) {
    .next-path_grid { grid-template-columns: 1fr; gap: 18px; }
    .next-path_thumb img { height: 180px; }
    .next-path_continue-title { font-size: 16px; }
}

/* ===== L6 — Home hiérarchisée : à la une + rail thèmes ===== */
/* Article à la une : point focal large */
.home-featured {
    display: flex;
    gap: 28px;
    align-items: stretch;
    margin: 0 0 38px;
    text-decoration: none;
    color: #3a3a3a;
}
.home-featured_img {
    flex: 0 0 46%;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(60,40,20,.12);
}
.home-featured_img img {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.home-featured:hover .home-featured_img img { transform: scale(1.04); }
.home-featured_body { flex: 1 1 auto; align-self: center; }
.home-featured_cat {
    display: inline-block;
    font: 600 12px/1 Comfortaa, sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #b0784a;
    margin-bottom: 12px;
}
.home-featured_title {
    font: 700 28px/1.3 Comfortaa, sans-serif;
    color: #333;
    margin: 0 0 14px;
}
.home-featured:hover .home-featured_title { color: #d06e0a; }
.home-featured_excerpt {
    font: 400 16px/1.65 'Open Sans', sans-serif;
    color: #6a6a6a;
    margin: 0 0 14px;
}
.home-featured_time {
    font: 600 12px/1 Comfortaa, sans-serif;
    color: #b8a48f;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Rail « Explorer par thème » : chips */
.home-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}
.home-themes_item { margin: 0; }
.home-themes_item a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #faf3ec;
    border: 1px solid #f0e3d6;
    color: #6a5340;
    font: 600 13px/1 Comfortaa, sans-serif;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.home-themes_item a:hover {
    background: #d06e0a;
    border-color: #d06e0a;
    color: #fff;
    transform: translateY(-1px);
}
.home-themes_count {
    font-size: 11px;
    color: #b8a48f;
    font-weight: 700;
}
.home-themes_item a:hover .home-themes_count { color: #ffe7cc; }

@media (max-width: 767px) {
    .home-featured { flex-direction: column; gap: 16px; }
    .home-featured_img { flex-basis: auto; }
    .home-featured_img img { min-height: 0; height: 210px; }
    .home-featured_title { font-size: 22px; }
    .home-featured_excerpt { font-size: 15px; }
}

/* ===== L5b — Barre de progression de lecture ===== */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9998;
    background: transparent;
    pointer-events: none;
}
.reading-progress_bar {
    display: block;
    height: 100%;
    width: 0;
    background: #d06e0a;
    transition: width .08s linear;
}

/* ===== L5b — Sommaire ancré ===== */
/* Bugfix : le sommaire a l'attribut [hidden] par défaut et n'est révélé par le JS
   qu'au-delà de 2 h2. Une règle display le rendait visible → boîte « Sommaire » vide
   sur les articles sans sous-titres. On force le respect de [hidden]. */
.article-toc[hidden] { display: none !important; }
.article-toc {
    margin: 0 0 28px;
    padding: 18px 22px;
    background: #fcf7f0;
    border: 1px solid #f0e4d4;
    border-left: 4px solid #d06e0a;
    border-radius: 10px;
}
.article-toc_title {
    margin: 0 0 10px;
    font: 700 12px/1 Comfortaa, sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #b0784a;
}
.article-toc_list {
    margin: 0;
    padding-left: 20px;
}
.article-toc_list li { margin: 0 0 6px; }
.article-toc_list a {
    color: #5a5145;
    text-decoration: none;
    font: 400 14.5px/1.5 'Open Sans', sans-serif;
    transition: color .18s ease;
}
.article-toc_list a:hover { color: #d06e0a; }

/* Décalage d'ancrage pour ne pas masquer le titre sous le menu collant */
.post__holder .post_content h2.has-anchor { scroll-margin-top: 90px; }

/* ===== L3b — Citation contemplative en fin d'article ===== */
.next-path_citation {
    margin: 8px 0 28px;
    padding: 22px 26px;
    border: 0;
    border-left: 3px solid #d8a26a;
    background: #fcf7f0;
    border-radius: 0 10px 10px 0;
}
.next-path_citation p {
    margin: 0;
    font: italic 400 17px/1.7 Comfortaa, Georgia, serif;
    color: #5a4a38;
}
.next-path_citation cite {
    display: block;
    margin-top: 10px;
    font: 600 12px/1 Comfortaa, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #b0784a;
}
.next-path_citation cite:before { content: '— '; }

/* ===== L7 — Navigation au pouce : barre basse fixe + panneaux ===== */
.mobile-bottombar { display: none; }

@media (max-width: 767px) {
    .mobile-bottombar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid #ece1d3;
        box-shadow: 0 -4px 18px rgba(60,40,20,.08);
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .mobile-bottombar_btn {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        background: none;
        border: 0;
        padding: 4px 0;
        color: #8a7a68;
        font: 600 10px/1 Comfortaa, sans-serif;
        text-decoration: none;
        cursor: pointer;
    }
    .mobile-bottombar_btn i { font-size: 17px; line-height: 1; }
    .mobile-bottombar_btn.is-active,
    .mobile-bottombar_btn[aria-expanded="true"] { color: #d06e0a; }

    /* Laisser respirer le bas de page derrière la barre */
    body { padding-bottom: 60px; }

    /* Boutons flottants existants : remonter au-dessus de la barre */
    .reading-mode-toggle { bottom: 74px !important; }
    .cat-index_top { bottom: 76px !important; }
}

/* Panneaux coulissants (recherche / thèmes) */
.mobile-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9991;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -10px 40px rgba(60,40,20,.22);
    padding: 8px 18px calc(80px + env(safe-area-inset-bottom, 0px));
    max-height: 72vh;
    overflow: auto;
    transform: translateY(100%);
    transition: transform .28s ease;
}
.mobile-panel.is-open { transform: translateY(0); }
.mobile-panel_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2px 14px;
    position: sticky;
    top: 0;
    background: #fff;
}
.mobile-panel_title {
    font: 700 13px/1 Comfortaa, sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #b0784a;
}
.mobile-panel_close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f3e6d6;
    color: #8a6a48;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.mobile-panel_search { display: flex; gap: 8px; }
.mobile-panel_search input {
    flex: 1 1 auto;
    height: 46px;
    box-sizing: border-box;
    padding: 0 16px;
    border: 1px solid #e7dccd;
    border-radius: 999px;
    background: #fdfaf6;
    font: 400 15px/1 'Open Sans', sans-serif;
    color: #4a4a4a;
}
.mobile-panel_search input:focus { outline: none; border-color: #d8a26a; background: #fff; }
.mobile-panel_search button {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #d06e0a;
    color: #fff;
    font: 600 13px/1 Comfortaa, sans-serif;
    cursor: pointer;
}
.mobile-panel_cats { list-style: none; margin: 0; padding: 4px 0; }
.mobile-panel_cats li { margin: 0; }
.mobile-panel_cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 6px;
    border-bottom: 1px solid #f5f1ec;
    color: #4a4a4a;
    text-decoration: none;
    font: 400 15.5px/1.3 'Open Sans', sans-serif;
}
.mobile-panel_cats a span {
    font: 700 12px/1 Comfortaa, sans-serif;
    color: #b8a48f;
}
.mobile-panel_cats a:active { color: #d06e0a; }

/* =========================================================================
   UX MOBILE — polish homepage (audit Playwright 390px, chantier « zéro jQuery »)
   Anti-overflow, rythme vertical homogène, respiration des cartes,
   compactage des blocs secondaires. Tout est scopé ≤767px : 0 impact desktop.
   ========================================================================= */
@media (max-width: 767px) {

    /* 1. Overflow horizontal fantôme : le header legacy (ul.sf-menu desktop
       masqué mais en DOM) pousse scrollWidth à ~672px > 390. body était déjà
       clippé, mais <html> restait scrollable → bande de fond au rubber-band
       latéral. On verrouille les deux. */
    html, body { max-width: 100%; overflow-x: hidden; }

    /* 1bis. Fond papier sur TOUTES les pages mobile. main-style.css fixe
       body{background:#d06e0a} (orange legacy) ; en desktop il est masqué par
       body.single/body.home, mais en mobile seul body.home l'écrasait → l'orange
       transparaissait au-dessus du masthead et sous le contenu sur article,
       catégorie, citation, page… = les « barres orange » haut/bas. On rétablit
       le sable clair partout. !important car cette feuille est chargée AVANT
       main-style.css (specificité body = body → l'ordre source donnerait l'orange). */
    body { background: var(--hm-paper, #faf6f0) !important; }

    /* 2. Rythme vertical homogène entre les sections empilées de l'accueil.
       Avant : citation 24 · à la une 38 · « Derniers articles » 55 → saccadé. */
    .home-citation { margin-bottom: 30px; }
    .home-featured { margin-bottom: 30px; }
    .home-themes   { margin-bottom: 34px; justify-content: center; }
    /* !important : main-style.css est chargé après cette feuille et fixe
       .title-box{margin-bottom:55px} à specificité égale (gagne par ordre source). */
    .title-box     { margin-bottom: 26px !important; }   /* « Derniers articles » 55 → 26 */

    /* 3. Respiration des cartes « Derniers articles » (full-width, 1 colonne)
       et décollement du titre par rapport à l'image. */
    .posts-grid .span2 { margin-bottom: 30px; }
    .posts-grid .post-card_h,
    .posts-grid h5 { margin-top: 12px; }

    /* 4. Chips « Explorer par thème » : cible tactile ~44px (Apple HIG). */
    .home-themes_item a { padding: 11px 16px; }

    /* 5. Blocs secondaires « Sites intéressants » / « Sources » : faible valeur
       sur mobile, on les compacte pour alléger le bas de page (titres plus
       sobres, listes resserrées, intro discrète). */
    .home-extra { margin-top: 6px; }
    .home-extra .title-box { margin-bottom: 14px; }
    .home-extra .title-box_primary { font-size: 21px; }
    .home-extra p { font-size: 14px; line-height: 1.55; color: #7a6f63; }
    .home-extra .list ul li { margin-bottom: 7px; line-height: 1.4; }
}

/* =========================================================================
   NAVIGATION DESKTOP SANS jQUERY (Phase B) — remplace superfish.
   Desktop uniquement (≥980px ; sur mobile .nav_wrapper est replié, bottombar L7).
   !important : main-style.css (chargé après) fixe .sf-menu li:hover ul{z-index:-1}.

   NB tmStickUp (header collant) : NON remplacé en CSS. position:sticky ne tient pas
   ici (le nav est imbriqué dans un header court → il colle dans son parent, pas sur
   toute la page ; tmStickUp utilisait position:fixed via JS). Le header défile donc
   normalement — comportement standard, acceptable pour un site de lecture.
   ========================================================================= */
@media (min-width: 980px) {
    /* Menu déroulant en CSS pur (remplace superfish JS) : technique superfish
       d'origine — sous-menus en position absolue hors-écran, ramenés au survol.
       Le sous-menu était caché (display:none hérité) et seul le JS l'affichait. */
    .header .sf-menu li ul {
        display: block !important;
        position: absolute;
        top: -999em;
        left: 0;
        z-index: 999;
    }
    .header .sf-menu li:hover > ul,
    .header .sf-menu li.sfHover > ul {
        top: 100% !important;
        z-index: 999 !important;
    }
    /* 3e niveau éventuel : caché sauf survol direct du parent. */
    .header .sf-menu li li ul { top: -999em; left: 100%; }
    .header .sf-menu li li:hover > ul { top: 0 !important; }
}

/* =========================================================================
   Recherche — overlay « ouverture par le haut » (loupe), façon jpsymfony-sf.
   UN seul panneau #top-search (fixe, slide-from-top) déclenché par .search-anchor
   (loupe du menu desktop + bouton « Rechercher » de la bottombar mobile) et fermé
   par .search-anchor-close / Échap / clic extérieur (assets/js/top-search.js).
   Réutilise l'infra Typesense : data-controller="search-autocomplete", form GET
   → route `search` (sans JS), autocomplete /api/search/suggest, fallback FULLTEXT.
   Thème SOMBRE : le panneau recouvre le masthead #272727 (noir). Un bandeau blanc
   jurait → on reste sur du sombre + filet orange, comme le haut du site.
   ========================================================================= */
#top-search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9995;
    background: #272727;
    border-bottom: 2px solid #d06e0a;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
    padding: 18px 0 22px;
    transform: translateY(-100%);
    transition: transform .28s ease;
}
#top-search.is-open { transform: translateY(0); }
.top-search_inner {
    position: relative; /* ancre le dropdown .ac-results (position:absolute) */
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px;
}
.top-search_form {
    display: flex;
    align-items: center;
    gap: 10px;
}
.top-search_input {
    flex: 1 1 auto;
    box-sizing: border-box;
    height: 52px;
    padding: 0 20px;
    border: 1px solid #4a443d;
    border-radius: 999px;
    background: #33302d;
    font: 400 16px/1 'Open Sans', sans-serif;
    color: #f1ece6;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.top-search_input::placeholder { color: #a89e92; }
.top-search_input:focus {
    outline: none;
    border-color: #d8a26a;
    background: #3b3733;
    box-shadow: 0 0 0 3px rgba(208, 110, 10, .25);
}
.top-search_submit {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: #d06e0a;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.top-search_submit:hover { background: #e07a14; }
.top-search_close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #3a3a3a;
    color: #e8e2da;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}
.top-search_close:hover,
.top-search_close:focus { background: #d06e0a; color: #fff; text-decoration: none; }

/* Dropdown autocomplete dans l'overlay : sombre (override des styles .ac-* clairs
   inline dans base.html.twig — gagné par specificité #id + classe). */
#top-search .ac-results {
    margin-top: 10px;
    background: #2e2b29;
    border-color: #403b35;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .5);
}
#top-search .ac-item { color: #e8e2da; border-bottom-color: #3a352f; }
#top-search .ac-item.is-active,
#top-search .ac-item:hover { background: #3a352f; }
#top-search .ac-title { color: #f3efe9; }
#top-search .ac-cat { color: #e0954a; }

/* Loupe dans le menu desktop : alignée sur le texte (Accueil/Citations/Articles).
   Le centrage est porté par l'ancre elle-même, pas par la baseline de l'icône. */
#topnav .menu-search {
    display: flex;
    align-items: center;
}
#topnav .menu-search > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 18px;
    padding: 0;
}
#topnav .menu-search .icon-search {
    display: block;
    font-size: 15px;
    line-height: 1;
}

@media (max-width: 767px) {
    #sidebar .widget_search { display: none; }
    #top-search { padding: 14px 0 16px; }
    .top-search_inner { padding: 0 14px; }
    .top-search_input { height: 48px; }
    .top-search_submit { width: 48px; height: 48px; }
    .top-search_close { width: 40px; height: 40px; }
}

/* Mobile : une image alignée (alignleft/alignright, avec ou sans légende) ne flotte plus,
   elle passe pleine largeur avec le texte en dessous (sinon colonne de 3 lettres à côté).
   !important : la largeur 274px est inline et ce fichier est chargé avant main-style.css. */
@media (max-width: 767px) {
    .post_content .alignleft,
    .post_content .alignright,
    .post_content .aligncenter,
    .post_content .wp-caption,
    .post_content img.alignleft,
    .post_content img.alignright {
        float: none !important;
        display: block;
        clear: both;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto 16px !important;
    }
    .post_content .wp-caption img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }
    .post_content .wp-caption .wp-caption-text {
        max-width: 100%;
        text-align: center;
    }
}