/* =============================================================================
   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;
    }
    /* Signature littéraire sous le logo : baseline « Un choix, une route » en
       Fraunces italique, encadrée de deux fleurons dorés. Réchauffe le masthead
       (les fleurons latéraux legacy avaient été retirés → ressenti « terne »). */
    header.header .brand-tagline {
        margin: 6px 0 0;
        text-align: center;
        font: italic 400 14px/1 'Fraunces', Georgia, serif;
        letter-spacing: .16em;
        color: #cdb79c;
    }
    header.header .brand-tagline:before,
    header.header .brand-tagline:after {
        content: '\2766';
        color: #c89b6a;
        font-style: normal;
        font-size: 12px;
        vertical-align: 1px;
        margin: 0 12px;
    }

    /* 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-top: 5px; 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;   /* panneau flottant ; le couloir de 6 px est ponté ci-dessous */
    }
    /* Pont invisible sur les 6 px entre l'ancre et le panneau. Sans lui, le survol
       CSS pur (le hover-intent JS de Superfish est parti avec jQuery) se perd dans ce
       couloir et le sous-menu se referme avant qu'on l'atteigne. Le pseudo est un
       descendant du <li> : le survoler maintient `li:hover` → le menu reste ouvert. */
    header.header .sf-menu li.menu-item-has-children > ul.sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -6px;
        height: 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 20px/1.65 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: 600 16px/1.3 'Comfortaa', sans-serif;
        letter-spacing: .13em;
        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 14px;
        font: 700 23px/1.3 'Comfortaa', sans-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;
    }
    /* Paysage téléphone / petite tablette (768-979) : 6 cartes seraient minuscules
       → 3 colonnes. (Le bug « vignettes ~34px » venait d'un width legacy, retiré
       dans responsive-improvements.css.) */
    @media (max-width: 979px) {
        body.home .posts-grid { grid-template-columns: repeat(3, 1fr); }
    }
    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: 700 14px/1.4 'Comfortaa', sans-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.
       ========================================================================= */
    /* Fil d'Ariane : un peu d'air au-dessus (ne plus le coller au header), et
       graphie plus douce/élégante — Comfortaa bas-de-casse, sans la rigidité
       des capitales interlettrées. */
    body.single .breadcrumb,
    body.archive .breadcrumb { margin: 16px 0 18px; }
    .breadcrumb_list {
        font: 500 14.5px/1.6 'Comfortaa', sans-serif;
        letter-spacing: .008em;
        text-transform: none;
    }
    .breadcrumb_item a { color: var(--hm-terracotta); }
    .breadcrumb_item a:hover { color: var(--hm-clay); text-decoration: underline; text-underline-offset: 3px; }
    .breadcrumb_item + .breadcrumb_item:before { color: #d3bfa4; margin: 0 11px; font-weight: 400; }
    /* Page courante en Fraunces italique : touche littéraire, en écho à la
       signature du masthead. Plus poétique que le Comfortaa gras. */
    .breadcrumb_item span[aria-current="page"] {
        font-family: var(--hm-serif);
        font-style: italic;
        font-weight: 500;
        font-size: 15px;
        color: #6b5d4a;
    }

    /* =========================================================================
       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; }
    /* Titre d'article : on TUE aussi le padding-top legacy de 78px (même vide
       immense que sur les pages catégorie, mais ici jamais neutralisé). */
    body.single .title-section { text-align: center; padding-top: 8px; margin: 0 0 26px; }
    body.single .title-header,
    body.single h1.title-header {
        font: 700 34px/1.2 'Comfortaa', sans-serif;
        color: var(--hm-ink);
        -webkit-hyphens: none; hyphens: none;
        padding: 0;
    }
    /* Fleurons (volutes legacy) CONSERVÉS sur le titre d'article : John les aime.
       MAIS à ≥1200px le legacy les positionne à left:0/right:0 du titre ; avec
       padding:0 elles mordaient le 1er/dernier mot. On restaure la place latérale
       (comme le legacy d'origine .title-header{padding:0 88px}) pour qu'elles
       flanquent le titre au lieu de le manger. */
    @media (min-width: 1200px) {
        body.single .title-header,
        body.single h1.title-header { padding: 0 84px; }
    }

    /* 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 15px/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: 'Comfortaa', sans-serif;
        font-weight: 600;
        font-size: 22px;
        line-height: 1.3;
        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: 'Comfortaa', sans-serif;
        font-weight: 600;
        font-size: 18px;
        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: 17px;
        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: 700 24px/1.3 'Comfortaa', sans-serif;
        color: var(--hm-ink);
    }
    .next-path_continue-title { font: 700 19px/1.4 'Comfortaa', sans-serif; color: var(--hm-ink); }
    .next-path_item-title { font: 700 15px/1.4 'Comfortaa', sans-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.
       ========================================================================= */
    /* Titre de section : on TUE le padding-top legacy de 78px (main-style.css)
       qui creusait un vide immense sous le fil d'Ariane (très visible aussi en
       paysage mobile, où il mangeait la moitié de l'écran). */
    body.archive .title-section,
    body.search .title-section { text-align: center; padding-top: 8px; margin-bottom: 16px; }
    body.archive .title-header,
    body.search .title-header {
        font: 700 30px/1.2 'Comfortaa', sans-serif;
        color: var(--hm-ink);
        text-transform: none;
        margin: 0;                 /* neutralise le margin-bottom legacy (45px) */
        -webkit-hyphens: none; hyphens: none;
    }
    /* Titre catégorie : le <small> legacy le forçait en ambre → unifié en encre
       (sobre, cohérent avec le titre /articles). */
    body.archive .title-header small { color: var(--hm-ink); font-size: inherit; font-weight: inherit; }
    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: 700 20px/1.34 'Comfortaa', sans-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; }
    /* Rythme vertical resserré entre les cartes (était ~60px : trop d'air entre
       le titre d'une carte et l'image de la suivante). */
    body.archive .post_wrapper,
    body.search .post_wrapper { margin-bottom: 24px; }
    body.archive .post_meta,
    body.search .post_meta { margin-bottom: 6px; }

    /* =========================================================================
       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: 17px;
        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: 700 13.5px/1.42 'Comfortaa', sans-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; }
            }
        }
    }
}