/* =============================================================================
   HOME — refonte UX mobile « Sanctuaire éditorial »
   Chargée EN DERNIER (après main-style.css) → priorité naturelle, sans !important.
   Scopée body.home + ≤767px : zéro impact desktop, zéro impact autres pages.
   Direction : élever l'âme contemplative du site (ambre, lenteur, recueillement)
   avec une typographie éditoriale (Fraunces serif) et un rythme généreux.
   ============================================================================= */

:root {
    --hm-paper:      #faf6f0;   /* sable clair, fond respirant */
    --hm-card:       #fffdfa;   /* carte, presque blanc chaud */
    --hm-ink:        #2b2823;   /* encre profonde, lisible */
    --hm-ink-soft:   #5c5247;   /* texte secondaire */
    --hm-muted:      #9a8c7c;   /* méta, discret */
    --hm-terracotta: #d06e0a;   /* accent signature du site */
    --hm-clay:       #a8551e;   /* accent profond */
    --hm-line:       #ece3d8;   /* filets, séparateurs */
    --hm-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
}

/* CTA « tous les articles » : masquée par défaut (desktop affiche déjà tout),
   révélée sur mobile où l'on ne montre que le 1er lot d'articles. */
.home-allposts { display: none; }

/* =============================================================================
   CORRECTIFS SURVOL DES CARTES HOME (toutes largeurs — desktop ET mobile)
   1. Une carte = un <a> englobant. Le `a:hover{text-decoration:underline}` du
      thème soulignait TOUT au survol (titre + chapô + minutes). On neutralise :
      seul le titre change de couleur (ambre), le reste ne bouge pas.
   2. Vignettes de grille : un overlay `a::before` orange semi-transparent
      (zoom-icon hérité du thème) apparaissait au survol = « bande orange au
      milieu ». Supprimé.
   ============================================================================= */
body.home .home-featured,
body.home .home-featured:hover,
body.home .home-featured:focus,
body.home .home-featured *,
body.home .posts-grid .span2 a,
body.home .posts-grid .span2 a:hover,
body.home .posts-grid .span2 a:focus,
body.home .posts-grid h5 a { text-decoration: none !important; }

body.home .home-featured:hover .home-featured_title,
body.home .posts-grid h5 a:hover { color: #d06e0a; }

/* l'overlay zoom-icon orange sur les vignettes (la « bande » au survol) */
body.home .featured-thumbnail a::before,
body.home .featured-thumbnail a::after,
body.home .featured-thumbnail a:hover::before,
body.home .featured-thumbnail .zoom-icon {
    display: none !important;
    content: none !important;
    background: none !important;
}

@media (max-width: 767px) {

    /* ----- Fond général + réglages de base ----- */
    body.home { background: var(--hm-paper); }
    body.home .container { padding-left: 20px; padding-right: 20px; }

    /* =========================================================================
       1. EN-TÊTE (MASTHEAD) — aéré, centré, lisible
       Avant : bande charcoal 75px cramée, logo blanc 22px noyé sous deux volutes
       PNG. Après : masthead sobre, logo agrandi et centré avec de l'air autour,
       volutes latérales + ornements collés au logo supprimés, fin liseré ambre
       de transition vers la page crème. Appliqué à toutes les pages (header global).
       ========================================================================= */
    .logo-wrap {
        background: #251f1b;                 /* charcoal chaud, cohérent avec l'encre */
        padding: 24px 0 26px;                /* respiration haut/bas */
        text-align: center;
        border-bottom: 3px solid var(--hm-terracotta);
        margin-bottom: 0;
    }
    .logo-wrap:before, .logo-wrap:after { display: none; }   /* volutes latérales cramées */
    .logo {
        float: none !important;
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    .logo:before, .logo:after { display: none; }             /* ornements collés au logo */
    .logo_h, .logo_h__img { float: none; }
    .logo_h__img img {
        max-height: 34px;
        width: auto;
    }

    /* =========================================================================
       2. SLIDER (hero) — plus immersif : coins arrondis, ombre douce.
       Slider vanilla .vslider (Phase C, remplace l'ancien plugin camera). Les
       contrôles (flèches + pastilles) sont posés SUR l'image, dans le viewport.
       ========================================================================= */
    body.home .vslider {
        margin: 24px 0 8px;                  /* de l'air entre le masthead et le slider */
    }
    body.home .vslider__viewport {
        border-radius: 18px;
        box-shadow: 0 18px 40px -22px rgba(60, 40, 20, .55);
        aspect-ratio: 16 / 10;               /* un peu plus haut sur mobile, plus présent */
    }
    body.home .vslider__nav {
        width: 36px;
        height: 36px;
        font-size: 22px;
        background: rgba(43, 40, 35, .5);
        backdrop-filter: blur(3px);
    }
    body.home .vslider__dot { width: 8px; height: 8px; }
    body.home .vslider__dot.is-active { background: var(--hm-terracotta); }

    /* =========================================================================
       3. CITATION D'ACCUEIL — la respiration, pièce maîtresse
       Grande italique Fraunces, guillemet ouvrant surdimensionné en filigrane,
       filet central fin. Un temps d'arrêt, pas une boîte.
       ========================================================================= */
    body.home .home-citation {
        position: relative;
        margin: 14px 0 40px;
        padding: 40px 18px 36px;
        background:
            radial-gradient(120% 80% at 50% 0%, rgba(208,110,10,.06), transparent 60%),
            var(--hm-card);
        border: 1px solid var(--hm-line);
        border-radius: 20px;
        text-align: center;
        overflow: hidden;
    }
    body.home .home-citation:before {
        content: '\201C';                       /* guillemet ouvrant filigrane */
        position: absolute;
        top: -18px; left: 50%;
        transform: translateX(-50%);
        font: 400 130px/1 var(--hm-serif);
        color: rgba(208, 110, 10, .12);
        pointer-events: none;
    }
    body.home .home-citation_bq { margin: 0; border: 0; padding: 0; }
    body.home .home-citation_bq p {
        position: relative;
        margin: 0 auto 18px;
        max-width: 19em;
        font: italic 400 20px/1.62 var(--hm-serif);
        letter-spacing: .1px;
        color: var(--hm-ink);
    }
    body.home .home-citation_author {
        display: inline-block;
        font: 600 11.5px/1 'Comfortaa', sans-serif;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--hm-clay);
    }
    body.home .home-citation_author:before {
        content: '';
        display: block;
        width: 32px; height: 1px;
        margin: 0 auto 14px;
        background: var(--hm-terracotta);
    }

    /* =========================================================================
       4. TITRES DE SECTION — sobres et élégants
       On retire les volutes PNG datées ; on pose un libellé Comfortaa en
       petites capitales espacées + un petit losange ambre centré.
       ========================================================================= */
    body.home .title-box { margin: 0 0 24px; text-align: center; }
    body.home .title-box:after { display: none; }     /* coupe l'ornement legacy */
    body.home .title-box_primary {
        position: relative;
        display: inline-block;
        margin: 0;
        padding-bottom: 14px;
        font: 700 14px/1.3 'Comfortaa', sans-serif;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--hm-ink);
        background: none;
    }
    body.home .title-box_primary:before,
    body.home .title-box_primary:after { display: none; }
    body.home .title-box_primary::after {
        content: '\25C6';                       /* petit losange ◆ */
        display: block !important;
        position: absolute;
        left: 50%; bottom: 0;
        transform: translateX(-50%);
        width: auto; height: auto;              /* annule la boîte 69×27 du flourish legacy */
        background: none;                       /* annule le PNG volute legacy */
        font-size: 8px;
        line-height: 1;
        color: var(--hm-terracotta);
    }

    /* =========================================================================
       5. À LA UNE — carte focale premium (image pleine largeur + corps)
       ========================================================================= */
    body.home .home-featured {
        display: block;
        margin: 0 0 44px;
        background: var(--hm-card);
        border: 1px solid var(--hm-line);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 16px 38px -26px rgba(60, 40, 20, .5);
        transition: transform .25s ease, box-shadow .25s ease;
    }
    body.home .home-featured:active { transform: scale(.99); }
    body.home .home-featured_img { margin: 0; }
    body.home .home-featured_img img {
        display: block;
        width: 100%;
        height: 230px;
        object-fit: cover;
    }
    body.home .home-featured_body { padding: 22px 22px 26px; }
    body.home .home-featured_cat {
        display: inline-block;
        margin-bottom: 12px;
        font: 700 10.5px/1 'Comfortaa', sans-serif;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--hm-terracotta);
    }
    body.home .home-featured_title {
        margin: 0 0 12px;
        font: 600 25px/1.22 var(--hm-serif);
        color: var(--hm-ink);
    }
    body.home .home-featured_excerpt {
        margin: 0 0 18px;
        font: 400 15.5px/1.62 'Open Sans', sans-serif;
        color: var(--hm-ink-soft);
    }
    body.home .home-featured_time {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font: 600 11.5px/1 'Comfortaa', sans-serif;
        letter-spacing: .04em;
        color: var(--hm-muted);
    }
    body.home .home-featured_time:before {
        content: '';
        width: 14px; height: 1px;
        background: var(--hm-muted);
    }

    /* =========================================================================
       6. DERNIERS ARTICLES — cartes éditoriales en colonne unique
       ========================================================================= */
    body.home .posts-grid { margin: 0 0 8px; }
    body.home .posts-grid .span2 {
        width: 100%;
        margin: 0 0 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--hm-line);
    }
    body.home .posts-grid .span2:last-child { border-bottom: 0; }
    body.home .posts-grid .featured-thumbnail {
        margin: 0 0 16px;
        border-radius: 16px;
        overflow: hidden;
    }
    body.home .posts-grid .featured-thumbnail img {
        display: block;
        width: 100%;
        height: 196px;
        object-fit: cover;
        transition: transform .4s ease;
    }
    body.home .posts-grid .span2:active .featured-thumbnail img { transform: scale(1.03); }
    body.home .posts-grid h5 {
        margin: 0 0 10px;
        font: 600 19.5px/1.3 var(--hm-serif);
    }
    body.home .posts-grid h5 a { color: var(--hm-ink); }
    body.home .posts-grid .post-card_meta {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 7px;
        font: 600 11px/1 'Comfortaa', sans-serif;
        letter-spacing: .04em;
    }
    body.home .posts-grid .post-card_cat {
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--hm-terracotta);
    }
    body.home .posts-grid .post-card_time { color: var(--hm-muted); }

    /* Page trop longue sur mobile (24 cartes ~11000px → ~5000px) : on ne garde que
       le 1er lot de « Derniers articles » (6) ; le reste est révélé via la CTA → /articles.
       NB : ceci est un cap VISUEL (ergonomie/longueur). Les miniatures des lots cachés
       se pré-chargent quand même (Chrome fetch les images display:none en loading=lazy) ;
       un vrai gain réseau imposerait un cap server-side (qui réduirait aussi le desktop). */
    body.home .posts-grid ~ .posts-grid { display: none; }

    /* CTA « Découvrir tous les articles » — bouton éditorial centré. */
    body.home .home-allposts {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 6px 0 44px;
        padding: 17px 24px;
        background: var(--hm-ink);
        border-radius: 14px;
        color: #fff;
        font: 600 13px/1 'Comfortaa', sans-serif;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-decoration: none;
        box-shadow: 0 14px 30px -18px rgba(43, 40, 35, .75);
    }
    body.home .home-allposts:active { background: var(--hm-clay); }
    body.home .home-allposts_arrow {
        font-size: 17px;
        transition: transform .2s ease;
    }
    body.home .home-allposts:active .home-allposts_arrow { transform: translateX(3px); }

    /* =========================================================================
       7. EXPLORER PAR THÈME — nuage de pastilles, centré, tactile
       ========================================================================= */
    body.home .home-themes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 4px 0 42px;
        padding: 0;
        list-style: none;
    }
    body.home .home-themes_item a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 18px;
        border-radius: 999px;
        background: var(--hm-card);
        border: 1px solid var(--hm-line);
        color: var(--hm-ink-soft);
        font: 600 13px/1 'Comfortaa', sans-serif;
        text-decoration: none;
    }
    body.home .home-themes_item a:active {
        background: var(--hm-terracotta);
        border-color: var(--hm-terracotta);
        color: #fff;
    }
    body.home .home-themes_count {
        font-size: 11px;
        font-weight: 700;
        color: var(--hm-muted);
    }
    body.home .home-themes_item a:active .home-themes_count { color: #ffe7cc; }

    /* =========================================================================
       8. SITES INTÉRESSANTS / SOURCES — bas de page sobre
       ========================================================================= */
    body.home .home-extra {
        margin-top: 6px;
        padding-top: 30px;
        border-top: 1px solid var(--hm-line);
    }
    body.home .home-extra .span6,
    body.home .home-extra .span4 { margin-bottom: 26px; }
    body.home .home-extra .title-box_primary { font-size: 12.5px; letter-spacing: .2em; }
    body.home .home-extra p {
        font: 400 14px/1.6 'Open Sans', sans-serif;
        color: var(--hm-muted);
        margin-bottom: 14px;
    }
    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;
    }

    /* =========================================================================
       8b. PIED DE PAGE (global mobile) — était réduit au logo « Buddhism » nu.
       Footer éditorial : band charcoal cohérent avec le masthead, logo centré,
       nav en ligne, liseré ambre en tête, padding bas pour dégager la bottombar.
       ========================================================================= */
    .footer {
        background: #251f1b;
        border-top: 3px solid var(--hm-terracotta);
        padding: 34px 20px 88px;             /* 88px bas : ne pas passer sous la bottombar */
        text-align: center;
        margin-top: 10px;
    }
    .footer .footer-logo-wrap { margin: 0 0 18px; }
    .footer .logo { float: none !important; display: inline-block; margin: 0; }
    .footer .logo:before, .footer .logo:after { display: none; }
    .footer .logo_h__img img { max-height: 30px; width: auto; }
    .footer .copyright { display: none; }    /* #footer-text est vide */
    .footer .footer-nav .menu {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 24px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .footer .footer-nav .menu li { margin: 0; }
    .footer .footer-nav a {
        color: #c9bdb0;
        font: 600 12px/1 'Comfortaa', sans-serif;
        letter-spacing: .1em;
        text-transform: uppercase;
        text-decoration: none;
    }
    .footer .footer-nav a:active { color: var(--hm-terracotta); }

    /* =========================================================================
       9. PAGE ARTICLE (body.single) — lecture éditoriale, dans l'esprit de la home.
       ========================================================================= */
    /* Titre d'article : serif éditoriale, jamais de césure (réglait « ap-porte »). */
    body.single .title-section h1,
    body.single h1.post-title,
    body.single .title-section .post-title {
        font-family: var(--hm-serif);
        font-weight: 600;
        line-height: 1.18;
        color: var(--hm-ink);
        -webkit-hyphens: none;
        hyphens: none;
        word-break: normal;
        overflow-wrap: break-word;
    }
    /* Sous-titres de section : pas de césure, taille maîtrisée, serif. */
    body.single .post_content h2 {
        font-family: var(--hm-serif);
        font-weight: 600;
        font-size: 23px;
        line-height: 1.26;
        margin: 34px 0 14px;
        -webkit-hyphens: none;
        hyphens: none;
    }
    body.single .post_content h3 {
        -webkit-hyphens: none;
        hyphens: none;
    }
    /* Corps : confort de lecture (interligne aéré) + AUCUNE césure (le user n'aime
       pas les coupures « reve-nir » sur colonne étroite ; on coupe aux espaces). */
    body.single .post_content,
    body.single .post_content p,
    body.single .post_content li,
    body.single .post_content blockquote p {
        -webkit-hyphens: none;
        hyphens: none;
    }
    body.single .post_content p {
        font-size: 16.5px;
        line-height: 1.74;
    }
    /* Citations <blockquote> (RAG/WhatsApp/emails) : moment éditorial comme la home. */
    body.single .post_content blockquote {
        margin: 26px 0;
        padding: 4px 0 4px 20px;
        border-left: 3px solid var(--hm-terracotta);
        background: none;
    }
    body.single .post_content blockquote p {
        font-family: var(--hm-serif);
        font-style: italic;
        font-size: 18px;
        line-height: 1.6;
        color: var(--hm-ink);
    }

    /* =========================================================================
       10. PAGE CATÉGORIE / LISTE (body.archive) — cartes éditoriales cohérentes
       avec la grille de la home.
       ========================================================================= */
    /* Titre de la catégorie : sobre, centré, avec petit losange ambre. */
    body.archive .title-section { text-align: center; margin-bottom: 6px; }
    body.archive .title-header {
        font: 700 22px/1.2 'Comfortaa', sans-serif;
        color: var(--hm-ink);
        -webkit-hyphens: none; hyphens: none;
    }
    body.archive .title-header:before,
    body.archive .title-header:after { display: none; }   /* volutes legacy */
    body.archive .category-description {
        text-align: center;
        font: 400 14.5px/1.6 'Open Sans', sans-serif;
        color: var(--hm-muted);
        margin: 0 auto 4px;
    }

    /* Ordre uniforme image → titre → méta : le markup met le titre avant l'image ;
       la liste catégorie le réordonne (view-grid), pas la liste tag → on force
       partout via flex pour une présentation cohérente. */
    body.archive .post__holder { display: flex; flex-direction: column; }
    body.archive .post__holder .featured-thumbnail { order: -1; }

    /* Carte article : image arrondie + titre Fraunces aligné à gauche + filet. */
    body.archive .post_wrapper {
        margin: 0 0 28px;
        padding-bottom: 28px;
        border-bottom: 1px solid var(--hm-line);
    }
    body.archive .posts > .post_wrapper:last-child { border-bottom: 0; }
    body.archive .featured-thumbnail.large,
    body.archive .featured-thumbnail {
        margin: 0 0 14px;
        border-radius: 16px;
        overflow: hidden;
    }
    body.archive .featured-thumbnail img {
        display: block;
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    /* overlay zoom-icon orange au survol (la « bande ») → supprimé comme sur la home */
    body.archive .featured-thumbnail a::before,
    body.archive .featured-thumbnail a::after,
    body.archive .featured-thumbnail .zoom-icon {
        display: none !important; content: none !important; background: none !important;
    }
    body.archive .post-title {
        font: 600 20px/1.3 var(--hm-serif);
        text-align: left;
        margin: 0 0 8px;
        -webkit-hyphens: none; hyphens: none;
    }
    body.archive .post-title:before,
    body.archive .post-title:after { display: none; }      /* volutes sur le titre */
    body.archive .post-title a { color: var(--hm-ink); text-decoration: none !important; }
    body.archive .post-title a:hover { color: var(--hm-terracotta); }

    /* Méta (date) : discrète, ambre, caps. */
    body.archive .post_meta {
        text-align: left;
        font: 600 11px/1 'Comfortaa', sans-serif;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--hm-muted);
    }
    body.archive .post_meta a { color: var(--hm-terracotta); text-decoration: none; }

    /* =========================================================================
       11. PAGE CITATIONS — chaque citation = un moment éditorial (comme la home).
       Cible .testimonial (unique à cette page). La vignette auteur est .hidden-phone.
       ========================================================================= */
    .testimonial {
        background: var(--hm-card);
        border: 1px solid var(--hm-line);
        border-left: 3px solid var(--hm-terracotta);
        border-radius: 14px;
        padding: 24px 22px 20px;
        margin: 0 0 20px;
    }
    .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: 17.5px;
        line-height: 1.62;
        color: var(--hm-ink);
        -webkit-hyphens: none; hyphens: none;
        margin: 0 0 12px;
    }
    .testimonial_content p:last-child,
    .testimonial_bq > p:last-child { margin-bottom: 0; }
    .testimonial small,
    .testimonial .name-testi,
    .testimonial .user {
        font: 600 11.5px/1.4 'Comfortaa', sans-serif !important;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--hm-clay) !important;
        font-style: normal !important;
    }

    /* =========================================================================
       12. MODE « LECTURE SEREINE » sur mobile — correctif.
       Bug : la colonne `.span8.right` (flottée, grille Bootstrap) se retrouvait
       écrasée à ~140px en mode lecture → texte justifié = rivières de blanc.
       On force la pleine largeur + alignement à gauche.
       ========================================================================= */
    /* Toute la chaîne Bootstrap (container/row/row-fluid/span*) a des largeurs px
       fixes en cascade sur mobile → on les neutralise. `html body.reading-mode`
       pour passer devant `.row-fluid [class*="span"]` (specificité égale sinon). */
    html body.reading-mode .motopress-wrapper.content-holder,
    html body.reading-mode .container,
    html body.reading-mode .row,
    html body.reading-mode .row-fluid,
    html body.reading-mode [class*="span"],
    html body.reading-mode .post__holder,
    html body.reading-mode .post_content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;     /* le padding cumulé (border-box) écrasait la largeur */
        padding-right: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    /* une seule gouttière, sur le conteneur le plus interne */
    html body.reading-mode .post_content { padding-left: 22px !important; padding-right: 22px !important; }
    html body.reading-mode .post_content p { text-align: left; }

    /* =========================================================================
       13. PAGE RECHERCHE (body.search) — mêmes cartes éditoriales que catégorie,
       + extrait lisible et surlignage ambre. (Markup identique à la liste.)
       ========================================================================= */
    body.search .post__holder { display: flex; flex-direction: column; }
    body.search .post__holder .featured-thumbnail { order: -1; }
    body.search .post_wrapper {
        margin: 0 0 28px;
        padding-bottom: 28px;
        border-bottom: 1px solid var(--hm-line);
    }
    body.search .featured-thumbnail {
        margin: 0 0 14px;
        border-radius: 16px;
        overflow: hidden;
    }
    body.search .featured-thumbnail img {
        display: block; width: 100%; height: 200px; object-fit: cover;
    }
    body.search .featured-thumbnail a::before,
    body.search .featured-thumbnail a::after,
    body.search .featured-thumbnail .zoom-icon {
        display: none !important; content: none !important; background: none !important;
    }
    body.search .post-title {
        font: 600 20px/1.3 var(--hm-serif);
        text-align: left;
        margin: 0 0 10px;
        -webkit-hyphens: none; hyphens: none;
    }
    body.search .post-title:before,
    body.search .post-title:after { display: none; }
    body.search .post-title a { color: var(--hm-ink); text-decoration: none !important; }
    body.search .post-title a:hover { color: var(--hm-terracotta); }
    body.search .search-snippet {
        font: 400 15px/1.6 'Open Sans', sans-serif;
        color: var(--hm-ink-soft);
        -webkit-hyphens: none; hyphens: none;
        margin: 0 0 14px;
    }
    body.search .search-snippet mark,
    body.search mark {
        background: #ffe6b8;
        color: inherit;
        padding: 0 .15em;
        border-radius: 2px;
    }
    /* « lire la suite » : lien ambre discret (pas un gros bouton). */
    body.search .btn-primary {
        display: inline-block !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        color: var(--hm-terracotta) !important;
        font: 600 12px/1 'Comfortaa', sans-serif !important;
        letter-spacing: .06em;
        text-transform: uppercase;
        box-shadow: none !important;
    }

    /* =========================================================================
       9. APPARITION EN FONDU À L'ARRIVÉE (douce, contemplative)
       Respecte prefers-reduced-motion.
       ========================================================================= */
    @media (prefers-reduced-motion: no-preference) {
        body.home .home-citation,
        body.home .home-featured,
        body.home .posts-grid,
        body.home .home-themes {
            animation: hmRise .7s 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 hmRise {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
}