/* =============================================================================
   DESKTOP — port du « Sanctuaire éditorial » sur ≥768px
   Chargée EN DERNIER (après home-mobile.css) → priorité naturelle de cascade :
   gagne sur responsive-improvements.css (chargée tôt) et sur main-style.css
   (legacy CherryFramework) à spécificité égale, SANS empiler de !important
   (sauf là où le legacy pose lui-même un !important / une spécificité supérieure).
   Réutilise les tokens --hm-* déclarés (globalement) en tête de home-mobile.css.

   SYSTÈME TYPOGRAPHIQUE COHÉRENT (l'« ensemble ») — la même triade que le mobile :
     • Fraunces serif  → LA VOIX : citations, titres de cartes/articles, H1/H2/H3 du corps.
     • Comfortaa caps  → LA STRUCTURE : labels, fil d'Ariane, méta, eyebrows, cites auteur
                          (toujours uppercase + letter-spacing + ambre/taupe).
     • Open Sans       → LA LECTURE : chapôs, descriptions, paragraphes, listes.
   Tout libellé de navigation/repère (dont le breadcrumb) suit « structure » pour rimer
   visuellement avec les eyebrows de section.
   ============================================================================= */

@media (min-width: 768px) {

    /* =========================================================================
       0. FOND GÉNÉRAL — sable contemplatif (cohérent avec le mobile)
       ========================================================================= */
    body.home,
    body.archive,
    body.search,
    body.page-template-default,
    body.single { background: var(--hm-paper); }

    /* Le contenu garde sa largeur Bootstrap mais on respire un peu plus large
       sur grand écran (les span fixes des pages à 2 colonnes sont réécrits en
       flex plus bas, donc élargir le container ne casse rien). */
    @media (min-width: 980px) {
        body.home .container,
        body.archive .container,
        body.search .container,
        body.single .container { width: 1080px; }
    }

    /* Normalisation grille Bootstrap-2 sur l'accueil : les .row imbriqués portent
       des marges négatives et les .span12 des largeurs fixes → le contenu débordait
       le container (featured à 1170 au lieu de 1080) et désalignait les sections.
       On remet tout à plat dans le flux du container. */
    body.home .content-holder .container .row,
    body.home .content-holder .container .row-fluid {
        margin-left: 0;
        margin-right: 0;
        width: auto;
    }
    body.home .content-holder .container .span12 {
        width: auto;
        margin-left: 0;
        float: none;
        min-height: 0;
    }

    /* Citation : section pleine largeur → on contraint la carte à la colonne de
       contenu (alignée avec le featured et la grille). */
    body.home .home-citation { max-width: 1080px; margin-left: auto; margin-right: auto; }
    body.home .home-citation > .container { width: auto; max-width: 100%; padding: 0; }

    /* =========================================================================
       1. MASTHEAD + NAVIGATION — collant, charcoal, cohérent avec le mobile.
       Avant : barre blanche flottante CherryFramework (volutes PNG 2012).
       Après : bandeau charcoal collant (position: sticky), liseré ambre, logo
       posé, nav en petites capitales claires, sous-menu en panneau crème.
       ========================================================================= */
    header.motopress-wrapper.header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #251f1b;                       /* même charcoal que le masthead mobile */
        border-bottom: 3px solid var(--hm-terracotta);
        box-shadow: 0 6px 24px -16px rgba(0, 0, 0, .65);
        transition: box-shadow .3s ease;
    }
    header.header .container { width: auto; max-width: 1180px; }

    /* logo-wrap : on coupe les volutes latérales legacy + le fond cramé */
    header.header .logo-wrap {
        background: none;
        padding: 14px 0 10px;
        text-align: center;
        margin: 0;
        border: 0;
    }
    header.header .logo-wrap:before,
    header.header .logo-wrap:after { display: none; }
    header.header .logo {
        float: none;
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    header.header .logo:before,
    header.header .logo:after { display: none; }   /* ornements collés au logo */
    header.header .logo_h__img img {
        max-height: 40px;
        width: auto;
        display: block;
    }

    /* Navigation principale : libellés en capitales claires, hover ambre.
       On tue le PNG legacy .nav_wrapper:before (barre blanche arrondie + swoosh ambre). */
    header.header .nav_wrapper { padding-bottom: 6px; }
    header.header .nav_wrapper:before,
    header.header .nav_wrapper:after { display: none; content: none; background: none; }
    header.header .nav__primary { text-align: center; float: none; }
    header.header .sf-menu {
        display: inline-flex;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
        float: none;
        background: none;
    }
    header.header .sf-menu > li {
        float: none;
        margin: 0;
        background: none;
        list-style: none;
    }
    header.header .sf-menu > li > a {
        display: block;
        padding: 10px 18px;
        border-radius: 999px;
        font: 700 12.5px/1 'Comfortaa', sans-serif;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #d9cdbf;
        background: none;
        transition: color .2s ease, background .2s ease;
    }
    header.header .sf-menu > li > a:hover,
    header.header .sf-menu > li.current-menu-item > a,
    header.header .sf-menu > li.current-menu-ancestor > a {
        color: #fff;
        background: rgba(208, 110, 10, .22);
    }
    /* Le losange/flèche legacy éventuel du parent à sous-menu */
    header.header .sf-menu > li > a:after { display: none; }

    /* Sous-menu (Articles → catégories) : panneau crème posé, lisible. */
    header.header .sf-menu li ul {
        min-width: 240px;
        padding: 8px;
        background: var(--hm-card);
        border: 1px solid var(--hm-line);
        border-radius: 12px;
        box-shadow: 0 18px 44px -20px rgba(60, 40, 20, .55);
        margin-top: 6px;
    }
    header.header .sf-menu li ul li { float: none; }
    header.header .sf-menu li ul li a {
        display: block;
        padding: 9px 14px;
        border-radius: 8px;
        font: 600 13px/1.3 'Comfortaa', sans-serif;
        letter-spacing: .01em;
        text-transform: none;
        color: var(--hm-ink-soft);
        background: none;
        transition: background .18s ease, color .18s ease;
    }
    header.header .sf-menu li ul li a:hover {
        background: #fbf2e8;
        color: var(--hm-terracotta);
    }
    header.header .sf-menu li ul li a .badge-count { color: var(--hm-muted); font-weight: 700; }
    header.header .sf-menu li ul li a:hover .badge-count { color: var(--hm-clay); }

    /* =========================================================================
       2. SLIDER (hero) — immersif : coins arrondis, ombre douce, plus d'air.
       ========================================================================= */
    body.home .vslider { margin: 30px 0 10px; }
    body.home .vslider__viewport {
        border-radius: 22px;
        box-shadow: 0 26px 60px -34px rgba(60, 40, 20, .6);
        aspect-ratio: 16 / 7;                      /* cinématique sur grand écran */
    }
    body.home .vslider__dot.is-active { background: var(--hm-terracotta); }

    /* =========================================================================
       3. CITATION D'ACCUEIL — LE moment. Fraunces italique, guillemet filigrane,
       filet ambre sous l'auteur. (Remplace le Comfortaa de responsive-improvements.)
       ========================================================================= */
    body.home .home-citation {
        position: relative;
        margin: 30px auto 56px;
        padding: 56px 24px 48px;
        background:
            radial-gradient(120% 80% at 50% 0%, rgba(208, 110, 10, .07), transparent 62%),
            var(--hm-card);
        border: 1px solid var(--hm-line);
        border-radius: 26px;
        text-align: center;
        overflow: hidden;
    }
    body.home .home-citation:before {
        content: '\201C';
        position: absolute;
        top: -26px; left: 50%;
        transform: translateX(-50%);
        font: 400 180px/1 var(--hm-serif);
        color: rgba(208, 110, 10, .12);
        pointer-events: none;
    }
    body.home .home-citation_bq {
        max-width: 760px;
        margin: 0 auto;
        padding: 0;
        border: 0;
        background: none;
    }
    body.home .home-citation_bq p {
        position: relative;
        margin: 0 auto 22px;
        max-width: 24em;
        font: italic 400 27px/1.6 var(--hm-serif);
        letter-spacing: .1px;
        color: var(--hm-ink);
    }
    body.home .home-citation_author {
        display: inline-block;
        margin: 0;
        font: 600 12px/1 'Comfortaa', sans-serif;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--hm-clay);
    }
    body.home .home-citation_author:before {
        content: '';
        display: block;
        width: 34px; height: 1px;
        margin: 0 auto 16px;
        background: var(--hm-terracotta);
    }

    /* =========================================================================
       4. TITRES DE SECTION — eyebrow sobre + losange ambre (comme le mobile).
       On supprime les volutes PNG 2012 et le Comfortaa 35px legacy.
       ========================================================================= */
    body.home .title-box,
    body.archive .title-box { margin: 0 0 30px; text-align: center; }
    body.home .title-box:after,
    body.home .title-box:before { display: none; }
    body.home .title-box_primary {
        position: relative;
        display: inline-block;
        margin: 0;
        padding-bottom: 16px;
        font: 700 16px/1.3 'Comfortaa', sans-serif;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--hm-ink);
        background: none;
    }
    body.home .title-box_primary:before { display: none; }
    body.home .title-box_primary:after {
        content: '\25C6';
        display: block;
        position: absolute;
        left: 50%; bottom: 0;
        transform: translateX(-50%);
        width: auto; height: auto;
        background: none;
        font-size: 9px;
        line-height: 1;
        color: var(--hm-terracotta);
    }

    /* =========================================================================
       5. À LA UNE — carte focale premium (image + corps Fraunces).
       ========================================================================= */
    body.home .home-featured {
        display: flex;
        gap: 0;
        align-items: stretch;
        margin: 0 0 52px;
        background: var(--hm-card);
        border: 1px solid var(--hm-line);
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 22px 50px -34px rgba(60, 40, 20, .55);
        text-decoration: none;
        color: var(--hm-ink);
        transition: transform .3s ease, box-shadow .3s ease;
    }
    body.home .home-featured:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 64px -34px rgba(60, 40, 20, .6);
    }
    body.home .home-featured_img {
        flex: 0 0 50%;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
        box-shadow: none;
    }
    body.home .home-featured_img img {
        width: 100%;
        height: 100%;
        min-height: 320px;
        object-fit: cover;
        display: block;
        transition: transform .6s ease;
    }
    body.home .home-featured:hover .home-featured_img img { transform: scale(1.04); }
    body.home .home-featured_body {
        flex: 1 1 auto;
        align-self: center;
        padding: 40px 44px;
    }
    body.home .home-featured_cat {
        display: inline-block;
        margin-bottom: 16px;
        font: 700 11px/1 'Comfortaa', sans-serif;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--hm-terracotta);
    }
    body.home .home-featured_title {
        margin: 0 0 16px;
        font: 600 33px/1.22 var(--hm-serif);
        color: var(--hm-ink);
    }
    body.home .home-featured:hover .home-featured_title { color: var(--hm-clay); }
    body.home .home-featured_excerpt {
        margin: 0 0 20px;
        font: 400 16.5px/1.66 'Open Sans', sans-serif;
        color: var(--hm-ink-soft);
    }
    body.home .home-featured_time {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font: 600 11.5px/1 'Comfortaa', sans-serif;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--hm-muted);
    }
    body.home .home-featured_time:before {
        content: '';
        width: 16px; height: 1px;
        background: var(--hm-muted);
    }

    /* =========================================================================
       6. DERNIERS ARTICLES — grille de cartes éditoriales (6 par rangée).
       On convertit le float Bootstrap (.row-fluid .span2) en CSS grid.
       ========================================================================= */
    body.home .posts-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 30px 24px;
        margin: 0 0 36px;
        padding: 0;
        list-style: none;
    }
    body.home .posts-grid:before,
    body.home .posts-grid:after { content: none; display: none; }   /* clearfix legacy */
    body.home .posts-grid .span2 {
        width: auto;
        margin: 0;
        padding: 0;
        float: none;
        border: 0;
        min-height: 0;
    }
    body.home .posts-grid .featured-thumbnail {
        margin: 0 0 12px;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 8px 22px -12px rgba(60, 40, 20, .35);
    }
    body.home .posts-grid .featured-thumbnail img {
        display: block;
        width: 100%;
        height: 124px;
        object-fit: cover;
        transition: transform .5s ease;
    }
    body.home .posts-grid .span2:hover .featured-thumbnail img { transform: scale(1.06); }
    body.home .posts-grid h5 {
        margin: 0 0 8px;
        font: 600 15px/1.34 var(--hm-serif);
    }
    body.home .posts-grid h5 a { color: var(--hm-ink); }
    body.home .posts-grid h5 a:hover { color: var(--hm-terracotta); }
    body.home .posts-grid .post-card_meta {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
        font: 600 10px/1.3 'Comfortaa', sans-serif;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    body.home .posts-grid .post-card_cat { color: var(--hm-terracotta); text-decoration: none; }
    body.home .posts-grid .post-card_cat:hover { color: var(--hm-clay); }
    body.home .posts-grid .post-card_time { color: var(--hm-muted); font-weight: 400; }

    /* La CTA « tous les articles » reste masquée sur desktop (tout est déjà affiché). */
    body.home .home-allposts { display: none; }

    /* =========================================================================
       7. EXPLORER PAR THÈME — nuage de pastilles centré.
       ========================================================================= */
    body.home .home-themes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin: 4px 0 56px;
        padding: 0;
        list-style: none;
    }
    body.home .home-themes_item { margin: 0; }
    body.home .home-themes_item a {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 11px 20px;
        border-radius: 999px;
        background: var(--hm-card);
        border: 1px solid var(--hm-line);
        color: var(--hm-ink-soft);
        font: 600 13.5px/1 'Comfortaa', sans-serif;
        text-decoration: none;
        transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
    }
    body.home .home-themes_item a:hover {
        background: var(--hm-terracotta);
        border-color: var(--hm-terracotta);
        color: #fff;
        transform: translateY(-2px);
    }
    body.home .home-themes_count { font-size: 11.5px; font-weight: 700; color: var(--hm-muted); }
    body.home .home-themes_item a:hover .home-themes_count { color: #ffe7cc; }

    /* =========================================================================
       8. SITES INTÉRESSANTS / SOURCES — 2 colonnes équilibrées (override spans).
       ========================================================================= */
    body.home .home-extra {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 56px;
        margin: 8px 0 0;
        padding-top: 40px;
        border-top: 1px solid var(--hm-line);
    }
    body.home .home-extra .span6,
    body.home .home-extra .span4 {
        width: auto;
        margin: 0;
        float: none;
        min-height: 0;
    }
    /* Épingler l'ordre (sinon la grille hérite d'un placement legacy inversé). */
    body.home .home-extra .span6 { grid-column: 1; }
    body.home .home-extra .span4 { grid-column: 2; }
    body.home .home-extra .title-box { text-align: left; margin-bottom: 18px; }
    body.home .home-extra .title-box_primary { font-size: 13px; letter-spacing: .2em; padding-bottom: 0; }
    body.home .home-extra .title-box_primary:after { display: none; }   /* losange inutile sur eyebrow aligné-gauche */
    body.home .home-extra p {
        font: 400 14.5px/1.65 'Open Sans', sans-serif;
        color: var(--hm-muted);
        margin-bottom: 16px;
    }
    body.home .home-extra .list ul { margin: 0; padding: 0; list-style: none; }
    body.home .home-extra .list ul li { margin: 0; border-bottom: 1px solid var(--hm-line); }
    body.home .home-extra .list ul li a {
        display: block;
        padding: 12px 2px;
        font: 400 15px/1.4 'Open Sans', sans-serif;
        color: var(--hm-clay);
        text-decoration: none;
        transition: color .18s ease, padding .18s ease;
    }
    body.home .home-extra .list ul li a:hover { color: var(--hm-terracotta); padding-left: 8px; }

    /* =========================================================================
       8b. PIED DE PAGE — band charcoal cohérent avec le masthead (toutes pages).
       ========================================================================= */
    .footer {
        background: #251f1b;
        border-top: 3px solid var(--hm-terracotta);
        padding: 44px 0 40px;
        text-align: center;
        margin-top: 60px;
    }
    .footer .footer-logo-wrap { margin: 0 0 22px; }
    .footer .logo { float: none; display: inline-block; margin: 0; }
    .footer .logo:before, .footer .logo:after { display: none; }
    .footer .logo_h__img img { max-height: 34px; width: auto; }
    .footer .copyright { display: none; }
    .footer .footer-nav .menu {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 30px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .footer .footer-nav .menu li { margin: 0; float: none; }
    .footer .footer-nav a {
        color: #c9bdb0;
        font: 600 12px/1 'Comfortaa', sans-serif;
        letter-spacing: .12em;
        text-transform: uppercase;
        text-decoration: none;
        transition: color .2s ease;
    }
    .footer .footer-nav a:hover { color: var(--hm-terracotta); }

    /* =========================================================================
       9. FIL D'ARIANE — STRUCTURE : aligné exactement sur les eyebrows de section
       (Comfortaa caps, même graisse, même interlettrage, même ambre). Harmonie.
       ========================================================================= */
    body.single .breadcrumb,
    body.archive .breadcrumb { margin: 0 0 18px; }
    .breadcrumb_list {
        font: 600 11.5px/1.5 'Comfortaa', sans-serif;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    .breadcrumb_item a { color: var(--hm-terracotta); }
    .breadcrumb_item a:hover { color: var(--hm-clay); }
    .breadcrumb_item + .breadcrumb_item:before { color: var(--hm-line); margin: 0 9px; }
    .breadcrumb_item span[aria-current="page"] { color: var(--hm-muted); }

    /* =========================================================================
       10. PAGE ARTICLE — colonne de lecture confortable + sidebar collante.
       On réécrit la grille Bootstrap fixe (.span8/.span4) en flex.
       ========================================================================= */
    body.single .content-holder > .container > .row > .span12,
    body.search .content-holder > .container > .row > .span12,
    body.archive .content-holder > .container > .row > .span12 { width: auto; margin: 0; float: none; }
    body.single .title-section { text-align: center; margin: 0 0 26px; }
    body.single .title-header,
    body.single h1.title-header {
        font: 600 40px/1.16 var(--hm-serif);
        color: var(--hm-ink);
        -webkit-hyphens: none; hyphens: none;
        padding: 0;
    }
    body.single .title-header:before,
    body.single .title-header:after { display: none; }      /* volutes legacy */

    /* Ligne contenu + sidebar en flex (override .row > .span8/.span4 fixes) —
       partagée par article / recherche / catégorie. */
    body.single #content.span8,
    body.single .span8.right,
    body.search #content.span8,
    body.search .span8.right,
    body.archive #content.span8,
    body.archive .span8.right {
        width: auto;
        float: none;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }
    body.single #content.span8,
    body.single .span8.right { max-width: 740px; }   /* largeur de lecture confortable (article seul) */
    body.single .span4.sidebar,
    body.search .span4.sidebar,
    body.archive .span4.sidebar {
        width: 300px;
        float: none;
        margin: 0;
        flex: 0 0 300px;
    }
    body.single .content-holder .container > .row > .span12 > .row:last-child,
    body.search .content-holder .container > .row > .span12 > .row:last-child,
    body.archive .content-holder .container > .row > .span12 > .row:last-child {
        display: flex;
        gap: 48px;
        align-items: flex-start;
    }
    /* Carte de lecture : le contenu sur fond blanc posé sur le sable. */
    body.single #content.span8 .post__holder {
        background: var(--hm-card);
        border: 1px solid var(--hm-line);
        border-radius: 20px;
        padding: 32px 40px 28px;
        box-shadow: 0 18px 44px -34px rgba(60, 40, 20, .4);
    }
    body.single .featured-thumbnail.large {
        margin: 0 0 26px;
        border-radius: 14px;
        overflow: hidden;
    }
    body.single .featured-thumbnail.large img { display: block; width: 100%; height: auto; }

    /* Typographie de lecture : Fraunces pour les sous-titres, Open Sans pour le corps. */
    body.single .post_content,
    body.single .post_content p,
    body.single .post_content li { -webkit-hyphens: none; hyphens: none; }
    body.single .post_content p {
        font: 400 17px/1.78 'Open Sans', sans-serif;
        color: #2f2b25;
        margin-bottom: 1.25em;
    }
    body.single .post__holder .post_content h2,
    body.single .post_content h2 {
        font-family: var(--hm-serif);
        font-weight: 600;
        font-size: 28px;
        line-height: 1.26;
        color: var(--hm-ink);
        margin: 1.9em 0 .6em;
        -webkit-hyphens: none; hyphens: none;
    }
    body.single .post__holder .post_content h3,
    body.single .post_content h3 {
        font-family: var(--hm-serif);
        font-weight: 600;
        font-size: 21px;
        line-height: 1.3;
        color: var(--hm-ink);
        margin: 1.6em 0 .5em;
    }
    /* Citations <blockquote> (RAG/WhatsApp/emails) : moment éditorial Fraunces. */
    body.single .post__holder .post_content blockquote {
        margin: 30px 0;
        padding: 6px 0 6px 26px;
        border-left: 3px solid var(--hm-terracotta);
        background: none;
    }
    body.single .post__holder .post_content blockquote p {
        font-family: var(--hm-serif);
        font-style: italic;
        font-size: 19px;
        line-height: 1.62;
        color: var(--hm-ink);
    }
    /* Méta de bas d'article : discrète, ambre. */
    body.single .post_meta { color: var(--hm-muted); }
    body.single .post_meta a { color: var(--hm-terracotta); text-decoration: none; }
    body.single .post_meta a:hover { color: var(--hm-clay); }

    /* Sommaire ancré : sobre, dans le ton. (déjà stylé tôt — on aligne le titre en label.) */
    body.single .article-toc_title { color: var(--hm-clay); }

    /* =========================================================================
       11. NEXT-PATH (« Sur le même chemin ») — titres en Fraunces (cohérence).
       (Remplace le Comfortaa de responsive-improvements pour les « moments ».)
       ========================================================================= */
    .next-path_title {
        font: 600 26px/1.25 var(--hm-serif);
        color: var(--hm-ink);
    }
    .next-path_continue-title { font: 600 20px/1.36 var(--hm-serif); color: var(--hm-ink); }
    .next-path_item-title { font: 600 16px/1.36 var(--hm-serif); }
    .next-path_item-cat,
    .next-path_continue-label {
        font-family: 'Comfortaa', sans-serif;
        letter-spacing: .08em;
        color: var(--hm-terracotta);
    }
    .next-path_citation p { font: italic 400 18px/1.66 var(--hm-serif); color: var(--hm-ink); }
    .next-path_citation cite { color: var(--hm-clay); }
    .next-path_all { color: var(--hm-terracotta); }
    .next-path_all:hover { color: var(--hm-clay); }

    /* =========================================================================
       12. PAGE CATÉGORIE / LISTE (body.archive) — cartes éditoriales + titres Fraunces.
       ========================================================================= */
    body.archive .title-section,
    body.search .title-section { text-align: center; margin-bottom: 10px; }
    body.archive .title-header,
    body.search .title-header {
        font: 700 30px/1.2 'Comfortaa', sans-serif;
        color: var(--hm-ink);
        text-transform: none;
        -webkit-hyphens: none; hyphens: none;
    }
    body.archive .title-header:before,
    body.archive .title-header:after,
    body.search .title-header:before,
    body.search .title-header:after { display: none; }
    /* Le titre recherche est enveloppé d'un <small> coloré en ambre par le legacy. */
    body.search .title-header small { color: var(--hm-ink); font-size: inherit; font-weight: inherit; }
    body.archive .category-description {
        text-align: center;
        font: 400 15.5px/1.65 'Open Sans', sans-serif;
        color: var(--hm-muted);
        margin: 0 auto 6px;
        max-width: 640px;
    }
    body.archive .post-title,
    body.search .post-title {
        font: 600 22px/1.3 var(--hm-serif);
        margin: 0 0 8px;
        -webkit-hyphens: none; hyphens: none;
    }
    body.archive .post-title:before,
    body.archive .post-title:after,
    body.search .post-title:before,
    body.search .post-title:after { display: none; }
    body.archive .post-title a,
    body.search .post-title a { color: var(--hm-ink); text-decoration: none; }
    body.archive .post-title a:hover,
    body.search .post-title a:hover { color: var(--hm-terracotta); }
    body.archive .featured-thumbnail,
    body.search .featured-thumbnail { border-radius: 14px; overflow: hidden; }
    body.archive .post_meta a { color: var(--hm-terracotta); text-decoration: none; }

    /* =========================================================================
       13. PAGE CITATIONS (.testimonial) — moments Fraunces (cohérence home).
       ========================================================================= */
    .testimonial {
        background: var(--hm-card);
        border: 1px solid var(--hm-line);
        border-left: 3px solid var(--hm-terracotta);
        border-radius: 16px;
        padding: 28px 30px 24px;
        margin: 0 0 22px;
    }
    .testimonial_bq { margin: 0; border: 0; padding: 0; background: none; }
    .testimonial_content p,
    .testimonial_bq > p {
        font-family: var(--hm-serif);
        font-style: italic;
        font-size: 19px;
        line-height: 1.62;
        color: var(--hm-ink);
        -webkit-hyphens: none; hyphens: none;
        margin: 0 0 12px;
    }
    .testimonial small,
    .testimonial .name-testi,
    .testimonial .user {
        font: 600 12px/1.4 'Comfortaa', sans-serif;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--hm-clay);
        font-style: normal;
    }

    /* =========================================================================
       14. PAGE RECHERCHE (body.search) — extrait lisible + surlignage ambre.
       ========================================================================= */
    body.search .search-snippet {
        font: 400 15.5px/1.65 'Open Sans', sans-serif;
        color: var(--hm-ink-soft);
        -webkit-hyphens: none; hyphens: none;
    }
    body.search .search-snippet mark,
    body.search mark { background: #ffe6b8; color: inherit; padding: 0 .15em; border-radius: 2px; }
    body.search .search-count,
    body.archive .category-count {
        font: 600 12.5px/1 'Comfortaa', sans-serif;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--hm-clay);
    }

    /* =========================================================================
       15. SIDEBAR — widgets dans le ton. On enlève le fond gris + le PNG courbe
       legacy CherryFramework, on pose des cartes crème sobres.
       ========================================================================= */
    #sidebar .widget {
        background: var(--hm-card);
        border: 1px solid var(--hm-line);
        border-radius: 16px;
        padding: 22px 22px 20px;
        margin: 0 0 26px;
        box-shadow: 0 10px 28px -22px rgba(60, 40, 20, .4);
    }
    #sidebar .widget:after,
    #sidebar .widget:before { display: none; content: none; background: none; }
    #sidebar .widget-title-wrap { margin: 0 0 14px; }
    #sidebar .widget-title {
        font: 700 12.5px/1.3 'Comfortaa', sans-serif;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--hm-ink);
        margin: 0;
    }
    #sidebar .widget-title:before,
    #sidebar .widget-title:after { display: none; }

    /* Liste de catégories : liens ambre, puces discrètes. */
    #sidebar .widget_categories ul { margin: 0; padding: 0; list-style: none; }
    #sidebar .widget_categories li { margin: 0; border-bottom: 1px solid var(--hm-line); }
    #sidebar .widget_categories li:last-child { border-bottom: 0; }
    #sidebar .widget_categories a {
        display: block;
        padding: 9px 2px;
        font: 400 14.5px/1.4 'Open Sans', sans-serif;
        color: var(--hm-ink-soft);
        text-decoration: none;
        transition: color .18s ease, padding .18s ease;
    }
    #sidebar .widget_categories a:hover { color: var(--hm-terracotta); padding-left: 6px; }
    #sidebar .cat-count-side { color: var(--hm-muted); }

    /* Moteur de recherche : champ pilule + bouton ambre plein, posés. */
    #sidebar .search-form { display: block; }
    #sidebar .search-form_it {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 46px;
        margin: 0 0 10px;
        padding: 0 18px;
        border: 1px solid var(--hm-line);
        border-radius: 999px;
        background: #fdfaf6;
        font: 400 14.5px/1 'Open Sans', sans-serif;
        color: var(--hm-ink);
        box-shadow: none;
    }
    #sidebar .search-form_it:focus {
        outline: none;
        border-color: #d8a26a;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(208, 110, 10, .12);
    }
    #sidebar .search-form_is {
        display: inline-block;
        width: auto;
        height: 42px;
        margin: 0;
        padding: 0 22px;
        border: 0;
        border-radius: 999px;
        background: var(--hm-terracotta);
        color: #fff;
        font: 700 11.5px/1 'Comfortaa', sans-serif;
        letter-spacing: .1em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: none;
        transition: background .2s ease;
    }
    #sidebar .search-form_is:hover { background: var(--hm-clay); }

    /* Articles les plus lus : vignette + titre. */
    #sidebar .post-list li { margin: 0 0 14px; }
    #sidebar .post-list .featured-thumbnail { border-radius: 10px; overflow: hidden; }
    #sidebar .post-list_h a {
        color: var(--hm-ink);
        font: 600 13.5px/1.4 var(--hm-serif);
        text-decoration: none;
    }
    #sidebar .post-list_h a:hover { color: var(--hm-terracotta); }

    /* =========================================================================
       16. OVERFLOW HORIZONTAL DESKTOP — le pseudo-fleuron legacy
       (.logo-wrap:after{right:-99%}) est déjà neutralisé §1 (display:none), donc
       plus de débordement. On garde un garde-fou en `clip` (et NON `hidden` :
       `overflow:hidden` ferait calculer overflow-y:auto → html/body deviendraient
       conteneurs de défilement et casseraient le `position: sticky` du header.
       `clip` clippe sans créer de conteneur de défilement → sticky préservé). */
    html, body { overflow-x: clip; }

    /* =========================================================================
       17. APPARITIONS DOUCES À L'ARRIVÉE — contemplatif, reduced-motion respecté.
       ========================================================================= */
    @media (prefers-reduced-motion: no-preference) {
        body.home .home-citation,
        body.home .home-featured,
        body.home .posts-grid,
        body.home .home-themes {
            animation: hmRiseD .8s cubic-bezier(.22, .61, .36, 1) both;
        }
        body.home .home-featured { animation-delay: .05s; }
        body.home .posts-grid    { animation-delay: .1s; }
        body.home .home-themes   { animation-delay: .15s; }
        @keyframes hmRiseD {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: none; }
        }
    }

    /* =========================================================================
       18. RÉVÉLATIONS AU SCROLL — animations pilotées par le défilement (CSS pur).
       @supports : seuls les navigateurs gérant les scroll-driven animations
       (Chrome/Edge 115+) l'appliquent ; ailleurs le contenu reste simplement
       visible (dégradation propre, zéro JS). reduced-motion respecté.
       Apparition douce, jamais agressive — dans l'esprit contemplatif.
       ========================================================================= */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            body.single .post_content > h2,
            body.single .next-path_item,
            body.archive .post_wrapper,
            body.search .post_wrapper {
                animation: hmReveal linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 32%;
            }
            @keyframes hmReveal {
                from { opacity: 0; transform: translateY(20px); }
                to   { opacity: 1; transform: none; }
            }
        }
    }
}