/* =============================================================
   VARIABLES — basées sur thespruce.com CSS réel
   font-family-a = Libre Baskerville (serif, display + body)
   font-family-b = Lato (sans-serif, utilitaire, section titles)
   brand primary  = #00727a (teal)
   ============================================================= */

:root {
    --font-a: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --font-b: "Lato", Helvetica, Arial, sans-serif;

    --text:         #222222;
    --text-subtle:  rgba(0,0,0,.65);
    --text-light:   rgba(0,0,0,.45);
    --border:       rgba(0,0,0,.15);
    --bg:           #ffffff;
    --bg-alt:       #f5f3ee;
    --brand:        #00727a;
    --brand-hover:  #23afaf;
    --hero-bg:      #1a3030;

    /* top-of-page grid — valeurs exactes du site exemple */
    --top-col-side:   minmax(auto, 19.5rem);
    --top-col-center: 31.25rem;
    --top-gap:        3rem;

    --wrap:  1200px;
    --pad:   2rem;
}

/* =============================================================
   RESET & BASE
   ============================================================= */

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

html {
    font-size: 16px;
    font-family: var(--font-a);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: scroll;
}
body  { line-height: 1.65; }
a     { text-decoration: none; color: inherit; }
img   { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* =============================================================
   LAYOUT
   ============================================================= */

.nh-wrap {
    max-width: var(--wrap);
    width: calc(100% - var(--pad) * 2);
    margin: 0 auto;
}

#page    { display: flex; flex-direction: column; min-height: 100vh; }
#content { flex: 1; }

/* =============================================================
   HEADER
   ============================================================= */

.nh-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 900;
    transition: box-shadow .2s;
}
.nh-header.is-scrolled { box-shadow: 0 2px 10px rgba(0,0,0,.1); }

.nh-header-inner {
    display: flex;
    align-items: center;
    height: 56px;
    max-width: var(--wrap);
    width: calc(100% - var(--pad) * 2);
    margin: 0 auto;
    gap: 24px;
}

.nh-logo { flex-shrink: 0; }
.nh-logo a { display: flex; align-items: center; }
.nh-logo__text {
    font-family: var(--font-a);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
    line-height: 1;
}

.nh-nav { flex: 1; overflow: hidden; }

.nh-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    flex-wrap: nowrap;
    height: 56px;
    gap: 0;
}
.nh-nav-list > li { position: relative; height: 100%; display: flex; align-items: center; }
.nh-nav-list > li > a {
    font-family: var(--font-b);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    padding: 0 .9rem;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: border-color .15s, color .15s;
}
.nh-nav-list > li > a:hover,
.nh-nav-list > li.current-menu-item > a {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.nh-nav-list .sub-menu {
    position: absolute; top: 100%; left: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-top: 2px solid var(--brand);
    min-width: 200px;
    display: none;
    z-index: 200;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    list-style: none;
}
.nh-nav-list > li:hover .sub-menu { display: block; }
.nh-nav-list .sub-menu li a {
    display: block;
    padding: 10px 16px;
    font-family: var(--font-b);
    font-size: .8125rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}
.nh-nav-list .sub-menu li:last-child a { border-bottom: none; }
.nh-nav-list .sub-menu li a:hover { background: var(--bg-alt); color: var(--brand); }

.nh-header-actions { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }

.nh-search-toggle {
    display: flex; align-items: center;
    padding: 6px;
    color: var(--text);
    transition: color .15s;
}
.nh-search-toggle:hover { color: var(--brand); }

.nh-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px 0;
    flex-shrink: 0;
}
.nh-menu-toggle__bar { display: block; width: 20px; height: 2px; background: var(--text); }

/* Search bar */
.nh-search-bar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
}
.nh-search-bar form { display: flex; gap: 0; }
.nh-search-field {
    flex: 1; font-family: var(--font-a); font-size: .9375rem;
    padding: 8px 12px;
    border: 1px solid var(--border); border-right: none;
    outline: none; color: var(--text); background: var(--bg);
}
.nh-search-field:focus { border-color: var(--brand); }
.nh-search-submit {
    background: var(--brand); color: #fff;
    font-family: var(--font-b); font-weight: 700; font-size: .8125rem;
    text-transform: uppercase; letter-spacing: .05em;
    padding: 8px 18px;
    border: 1px solid var(--brand);
    transition: background .15s;
}
.nh-search-submit:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

/* =============================================================
   TOP BLOCK — bloc haut homepage
   Grille exacte du site exemple :
   minmax(auto,19.5rem)  31.25rem  minmax(auto,19.5rem)
   gap: 3rem
   ============================================================= */

.nh-top-block {
    padding: 28px 0 36px;
    border-bottom: 1px solid var(--border);
}

.nh-top-inner {
    display: grid;
    grid-template-columns: var(--top-col-side) var(--top-col-center) var(--top-col-side);
    gap: 0 var(--top-gap);
    justify-content: center;
}

/* Colonnes gauche / droite — titres texte + date */
.nh-top-feed--left {
    border-right: 1px solid var(--border);
    padding-right: var(--top-gap);
}
.nh-top-feed--right {
    border-left: 1px solid var(--border);
    padding-left: var(--top-gap);
}

/* Item de flux (card text-only) */
.nh-feed-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-decoration: none;
    color: rgba(0,0,0,.95);
}
.nh-feed-item__inner {
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
}
.nh-feed-item:last-child .nh-feed-item__inner { border-bottom: none; }

.nh-feed-item__title {
    display: block;
    font-family: var(--font-a);
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 4px;
    transition: text-decoration-color .15s;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: .12em;
}
.nh-feed-item:hover .nh-feed-item__title {
    text-decoration-color: var(--brand-hover);
}

.nh-feed-item__date {
    display: block;
    font-family: var(--font-b);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--brand);
    line-height: .875rem;
}

/* Colonne centrale — article featured avec image */
.nh-top-center {}

.nh-featured-card {
    display: block;
    text-decoration: none;
    color: rgba(0,0,0,.95);
    transition: transform .25s ease;
}
.nh-featured-card:hover { transform: translateY(-2px); }

.nh-featured-card__media {
    overflow: hidden;
    width: 100%;
    margin-bottom: 1.5rem;
}
.nh-featured-card__img {
    width: 100%;
    height: auto;
    display: block;
}

.nh-featured-card__tag {
    display: block;
    font-family: var(--font-b);
    font-size: .75rem;
    font-weight: 700;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .375rem;
}

.nh-featured-card__title {
    display: block;
    font-family: var(--font-a);
    /* text-expressive-100: 1.8125rem small / 2.25rem large */
    font-size: 1.8125rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: .375rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: .25rem;
    transition: text-decoration-color .15s;
}
.nh-featured-card:hover .nh-featured-card__title {
    text-decoration-color: var(--brand-hover);
}

.nh-featured-card__byline {
    display: block;
    font-family: var(--font-b);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-subtle);
    line-height: 1.4;
}

/* =============================================================
   SECTION HEADERS — titre catégorie (Lato, UPPERCASE)
   ============================================================= */

.nh-cat-section {
    padding: 36px 0 32px;
    border-bottom: 1px solid var(--border);
}
.nh-cat-section:last-child { border-bottom: none; }

.nh-section-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    margin-bottom: 2rem;
}
.nh-section-link:hover .nh-section-title {
    text-decoration: underline;
    text-decoration-color: var(--brand-hover);
    text-decoration-thickness: 2px;
}
.nh-section-link:hover .nh-section-arrow { color: var(--brand-hover); }

/* Titre section : Lato, UPPERCASE, letter-spacing large */
.nh-section-title {
    font-family: var(--font-b);
    font-size: 1.5rem;         /* small = 1.5rem */
    font-weight: 400;
    letter-spacing: .4375rem;  /* valeur exacte CSS The Spruce */
    line-height: 2.625rem;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
}

.nh-section-arrow {
    font-size: 1.5rem;
    color: var(--brand);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transition: color .15s;
}

/* Grille 3 articles */
.nh-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;   /* space-24 */
    align-items: flex-start;
}

/* =============================================================
   IMAGE CARD  (.nh-card) — utilisée pour cat sections & archive
   ============================================================= */

.nh-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: rgba(0,0,0,.95);
    font-weight: 400;
    overflow: visible;
}
.nh-card:hover .nh-card__title {
    text-decoration-color: var(--brand-hover);
    text-decoration-skip-ink: none;
}

.nh-card__media {
    overflow: hidden;
    width: 100%;
    margin-bottom: 0;
}
.nh-card__img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity .2s;
}
.nh-card:hover .nh-card__img { opacity: .97; }

.nh-card__body {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.nh-card__tag {
    display: block;
    font-family: var(--font-b);
    font-size: .75rem;
    font-weight: 700;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .375rem;
    text-decoration: none;
}

.nh-card__title {
    display: block;
    font-family: var(--font-a);
    font-size: 1.4375rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: .5rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
    transition: text-decoration-color .15s;
}

/* byline — text-utility-200/300 : Lato 1rem weight 400 */
.nh-card__byline {
    display: block;
    font-family: var(--font-b);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-subtle);
    line-height: 1.4;
}

/* =============================================================
   ARCHIVE HERO — pages catégorie
   Structure The Spruce réelle (d'après CSS source) :
   - Bannière pleine largeur, hauteur fixe + border teal en bas
   - Bloc titre/desc blanc avec margin-top négatif → glisse sur le bas de l'image
   - Titre centré
   ============================================================= */

.nh-archive-hero {
    overflow: visible;
}

/* Bannière pleine largeur, hauteur fixe, bordure teal en bas */
.nh-archive-hero__banner {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    height: 12.75rem;   /* mobile */
    overflow: hidden;
    background: #b0dddd;   /* fond teal clair si pas d'image */
    border-bottom: .375rem solid #b0dddd;
}
.nh-archive-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bloc titre/desc : fond blanc, margin négatif → overlap sur l'image */
.nh-archive-hero__content {
    position: relative;
    z-index: 1;
    background: var(--bg);
    margin-top: -5rem;
    padding: 2rem 2rem 1.5rem;
    max-width: 48.75rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.nh-archive-hero__title {
    font-family: var(--font-a);
    font-size: 2rem;    /* font-size-32 */
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: .625rem;
    letter-spacing: .01875rem;
}

.nh-archive-hero__desc {
    font-family: var(--font-b);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-subtle);
    line-height: 1.65;
}

/* =============================================================
   SPOTLIGHT — page catégorie
   Structure The Spruce (CSS exact) :
   grid: repeat(2,auto)/repeat(3,1fr) — col-gap: 1.875rem, row-gap: 1.375rem
   Ordinal 1  : grid-column:1/-1  display:grid  grid:auto/1.21fr 1fr  (image gauche, titre droite)
   Ordinals 2-4 : display:block vertical  padding-bottom:66.67%  font-size:1.5rem
   ============================================================= */

.nh-spotlight-section {
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.nh-spotlight {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.875rem;
    row-gap: 1.375rem;
    padding: 1.75rem 0;
}

/* ---------- Cards ordinals 2-4 : verticales (base) ---------- */
.nh-spotlight-card {
    display: block;
    text-decoration: none;
    color: rgba(0,0,0,.95);
}

/* ---------- Card featured (ordinal 1) : pleine largeur, image gauche ---------- */
/* Doit venir APRÈS .nh-spotlight-card pour écraser display:block */
.nh-spotlight-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.21fr 1fr;
    column-gap: 1.875rem;
    text-decoration: none;
    color: rgba(0,0,0,.95);
}

.nh-spotlight-card--featured .nh-spotlight-card__media {
    position: relative;
    padding-bottom: 65%;
    height: 0;
    overflow: hidden;
}
.nh-spotlight-card--featured .nh-spotlight-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .2s;
}
.nh-spotlight-card--featured:hover .nh-spotlight-card__img { opacity: .93; }

.nh-spotlight-card--featured .nh-spotlight-card__body {
    display: flex;
    flex-direction: column;
    padding-top: 3.4375rem;
    padding-right: 3rem;
}
.nh-spotlight-card--featured .nh-spotlight-card__title {
    font-size: 2.75rem;
    line-height: 1.2;
}

.nh-spotlight-card__media {
    position: relative;
    width: 100%;
    padding-bottom: 66.6667%;
    height: 0;
    overflow: hidden;
    margin-bottom: .5625rem;
}
.nh-spotlight-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .2s;
}
.nh-spotlight-card:hover .nh-spotlight-card__img { opacity: .93; }

.nh-spotlight-card__body { }

.nh-spotlight-card__tag {
    display: block;
    font-family: var(--font-b);
    font-size: .75rem;
    font-weight: 700;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .375rem;
}

.nh-spotlight-card__title {
    display: block;
    font-family: var(--font-a);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: .375rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: text-decoration-color .15s;
}
.nh-spotlight-card:hover .nh-spotlight-card__title {
    text-decoration-color: var(--brand-hover);
}

.nh-spotlight-card__byline {
    display: block;
    font-family: var(--font-b);
    font-size: .875rem;
    font-weight: 400;
    color: var(--text-subtle);
}

/* =============================================================
   ARCHIVE GRID — grille paginée
   ============================================================= */

.nh-archive-main { padding: 28px 0 56px; }

.nh-archive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.875rem;
    align-items: flex-start;
}

/* Nos autres catégories — bloc en bas de page catégorie */
.nh-cat-nav {
    padding: 1.75rem 0 1.25rem;
    border-top: 1px solid var(--border);
    margin-top: 1.5rem;
}
.nh-cat-nav__title {
    font-family: var(--font-b);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-subtle);
    text-align: center;
    margin-bottom: .875rem;
}
.nh-cat-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}
.nh-cat-cta {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-b);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3125rem .75rem;
    text-decoration: none;
    transition: background .15s;
}
.nh-cat-cta:hover { background: var(--brand-hover); color: #fff; }

/* Texte de bas de page catégorie */
.nh-archive-footer {
    padding: 1.75rem 0 2rem;
    border-top: 1px solid var(--border);
    margin-top: 1rem;
}
.nh-archive-footer__text {
    font-family: var(--font-a);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-subtle);
    max-width: 780px;
}
.nh-archive-footer__text p { margin-bottom: 1rem; }
.nh-archive-footer__text p:last-child { margin-bottom: 0; }

/* =============================================================
   PAGINATION
   ============================================================= */

.nh-pagination-wrap {
    display: flex;
    justify-content: center;
    padding: 32px 0 0;
}
.nh-pagination-wrap .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px;
    font-family: var(--font-b); font-size: .875rem; font-weight: 700;
    color: var(--text); border: 1px solid var(--border);
    padding: 0 6px; margin: 0 2px;
    transition: border-color .15s, color .15s, background .15s;
}
.nh-pagination-wrap .page-numbers.current {
    background: var(--brand); color: #fff; border-color: var(--brand);
}
.nh-pagination-wrap .page-numbers:hover:not(.current) {
    border-color: var(--brand); color: var(--brand);
}
.nh-pagination-wrap .page-numbers.dots { border: none; }

/* =============================================================
   TOP STORIES — bandeau sous le menu
   ============================================================= */

/* Top Stories — bandeau inline identique au site cible :
   label gras teal + titres texte + bullets teal entre articles */
.nh-top-stories {
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: var(--header-sticky-h, 56px);
    z-index: 800;
}
.nh-top-stories__list {
    display: flex;
    align-items: center;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .5rem var(--pad);
    flex-wrap: nowrap;
}
.nh-top-stories__list::-webkit-scrollbar { display: none; }

/* Label "Top Stories" — texte gras teal, inline */
.nh-top-stories__preheading {
    flex-shrink: 0;
    font-family: var(--font-b);
    font-size: .875rem;
    font-weight: 700;
    color: var(--brand);
    margin-right: .75rem;
    white-space: nowrap;
}
/* Items articles */
.nh-top-stories__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
/* Bullet teal entre articles — pas avant le 1er */
.nh-top-stories__item + .nh-top-stories__item::before {
    content: '•';
    color: var(--brand);
    padding: 0 .625rem;
    font-size: .5rem;
    line-height: 1;
}
.nh-top-stories__link {
    display: block;
    font-family: var(--font-b);
    font-size: .875rem;
    font-weight: 400;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    transition: color .15s;
}
.nh-top-stories__link:hover { color: var(--brand); }
.nh-top-stories--shadow { box-shadow: 0 2px 6px rgba(0,0,0,.1); }

/* =============================================================
   SINGLE ARTICLE
   ============================================================= */

.nh-single { padding-bottom: 60px; }
.nh-single__wrap { max-width: 780px; }

/* Mode Aside : largeur pleine, grille content + aside */
.nh-single__wrap--aside { max-width: var(--wrap); }

.nh-single-body {
    display: grid;
    gap: 3rem;
    align-items: start;
}
.nh-single-body--right { grid-template-columns: 1fr 280px; }
.nh-single-body--left  { grid-template-columns: 280px 1fr; }

.nh-single-aside {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.nh-single-aside::-webkit-scrollbar { width: 3px; }
.nh-single-aside::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* TOC — sommaire */
.nh-toc {
    background: var(--toc-bg, var(--bg-alt));
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    padding: 1.125rem 1.25rem;
}
.nh-toc--inline { margin-bottom: 1.75rem; }
.nh-toc__heading {
    display: block;
    font-family: var(--font-b);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: .75rem;
}
.nh-toc .nh-toc__list { list-style: none; padding: 0; margin: 0; }
.nh-toc__link {
    display: block;
    font-family: var(--font-b);
    font-size: .875rem;
    color: var(--text-subtle);
    text-decoration: none;
    padding: .25rem .5rem;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.nh-toc__link:hover {
    color: var(--brand);
    border-left-color: var(--brand);
}

/* TOC variante Ligne — bordure gauche seule, sans fond */
.nh-toc--ligne {
    background: transparent !important;
    border: none;
    border-left: 3px solid var(--brand);
    padding: .375rem 0 .375rem 1.25rem;
}
.nh-toc--ligne .nh-toc__heading { color: var(--brand); }
.nh-toc--ligne .nh-toc__link {
    border-left: none;
    padding-left: 0;
}
.nh-toc--ligne .nh-toc__link:hover { border-left-color: transparent; }

/* TOC variante Bandeau — en-tête coloré */
.nh-toc--bandeau {
    background: var(--toc-bg, var(--bg));
    border: 1px solid var(--border);
    border-left: none;
    padding: 0;
    overflow: hidden;
}
.nh-toc--bandeau .nh-toc__heading {
    background: var(--brand);
    color: #fff;
    display: block;
    padding: .625rem 1.25rem;
    margin-bottom: 0;
}
.nh-toc--bandeau .nh-toc__list { padding: .75rem 1.25rem; }

/* TOC — styles de liste */
.nh-toc--list-disc .nh-toc__list    { list-style: disc;        padding-left: 1.375rem; }
.nh-toc--list-decimal .nh-toc__list { list-style: decimal;     padding-left: 1.375rem; }
.nh-toc--list-roman .nh-toc__list   { list-style: upper-roman; padding-left: 1.375rem; }
/* Supprimer la bordure gauche des liens quand il y a une puce */
.nh-toc--list-disc .nh-toc__link,
.nh-toc--list-decimal .nh-toc__link,
.nh-toc--list-roman .nh-toc__link   { border-left: none; padding-left: 0; }

/* Ancres H2 — scroll-margin pour compenser les éléments sticky */
h2[id] { scroll-margin-top: var(--scroll-offset, 16px); }

/* Barre de progression de lecture */
#nh-progress-bar {
    position: fixed;
    top: var(--sticky-height, 0px);
    left: 0;
    width: 0%;
    height: var(--progress-bar-h, 3px);
    background: var(--brand);
    z-index: 1000;
    transition: width .1s linear;
    pointer-events: none;
}

/* "Poursuivez votre lecture" */
.nh-read-more {
    border-top: 1px solid var(--border);
    padding: 40px 0 60px;
    background: var(--bg);
}
.nh-read-more__title {
    font-family: var(--font-a);
    font-size: 1.625rem;
    font-weight: 400;
    color: var(--text);
    text-align: center;
    margin-bottom: 1.5rem;
}
.nh-read-more__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.875rem;
    align-items: start;
}

.nh-breadcrumb {
    font-family: var(--font-b); font-size: .8125rem; color: var(--text-subtle);
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    margin-top: 24px; margin-bottom: 14px;
}
.nh-breadcrumb a { color: var(--brand); }
.nh-breadcrumb a:hover { text-decoration: underline; }

.nh-single-tag {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-b);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3125rem .75rem;
    margin-bottom: .875rem;
    cursor: default;
    user-select: none;
}

/* Titre aside "Nos derniers articles" */
.nh-aside-label {
    font-family: var(--font-b);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: .875rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}

.nh-single-title {
    font-family: var(--font-a);
    font-size: 2.25rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: .875rem;
}

.nh-single-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-family: var(--font-b); font-size: .875rem; color: var(--text-subtle);
    padding-bottom: 1.25rem; margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.nh-single-meta__sep { color: var(--border); }

.nh-single-hero-img {
    width: 100%; height: auto; display: block; margin-bottom: 1.75rem;
}

.nh-single-content {
    font-family: var(--font-a);
    font-size: 1.0625rem; line-height: 1.75; color: var(--text);
}
.nh-single-content h2 { font-size: 1.625rem; font-weight: 700; margin: 2rem 0 .75rem; }
.nh-single-content h3 { font-size: 1.4375rem; font-weight: 700; margin: 1.75rem 0 .625rem; }
.nh-single-content p  { margin-bottom: 1.25rem; }
.nh-single-content a  { color: var(--brand); text-decoration: underline; text-decoration-color: var(--brand-hover); }
.nh-single-content ul, .nh-single-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; list-style: initial; }
.nh-single-content li { margin-bottom: .5rem; line-height: 1.65; }
.nh-single-content img { width: 100%; margin: 1.5rem 0; }
.nh-single-content blockquote {
    border-left: 3px solid var(--brand);
    padding: .625rem 1.125rem; margin: 1.5rem 0;
    font-style: italic; color: var(--text-subtle); background: var(--bg-alt);
}

/* =============================================================
   FOOTER
   ============================================================= */

.nh-footer {
    background: var(--bg);
    border-top: 3px solid var(--brand);
    padding: 2.5rem 0 0;
    margin-top: auto;
}
.nh-footer-inner {
    display: grid;
    grid-template-columns: 260px 1fr auto;
    gap: 3rem;
    align-items: start;
    padding-bottom: 2.5rem;
}

/* Colonne gauche — logo + description + social */
.nh-footer-brand { display: flex; flex-direction: column; gap: 0; }
.nh-footer-logo { margin-bottom: .875rem; }
.nh-footer-logo a { text-decoration: none; }
.nh-footer-logo__text {
    font-family: var(--font-a);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
}
.nh-footer-logo img { max-height: 60px; width: auto; }
.nh-footer-desc {
    font-family: var(--font-a);
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--text-subtle);
    margin-bottom: 1.125rem;
}
.nh-footer-social {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .25rem;
}
.nh-footer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    text-decoration: none;
    transition: color .15s;
    line-height: 1;
}
.nh-footer-social__link:hover { color: var(--brand); }
.nh-footer-social__link .dashicons {
    font-size: 1.375rem;
    width: 1.375rem;
    height: 1.375rem;
    line-height: 1;
}

/* Colonne catégories — teal, uppercase, bold */
.nh-footer-cats { padding-left: 3rem; }
.nh-footer-cats__list { list-style: none; }
.nh-footer-cats__list li { margin-bottom: .625rem; }
.nh-footer-cats__list a {
    font-family: var(--font-b);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .15s;
}
.nh-footer-cats__list a:hover { color: var(--brand-hover); }

/* Colonnes droite — 2 menus side by side */
.nh-footer-menus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.nh-footer-menu__list { list-style: none; }
.nh-footer-menu__list li { margin-bottom: .5rem; }
.nh-footer-menu__list a {
    font-family: var(--font-b);
    font-size: .875rem;
    color: var(--text-subtle);
    text-decoration: none;
    transition: color .15s;
}
.nh-footer-menu__list a:hover { color: var(--text); }

/* Barre copyright en bas */
.nh-footer-bottom {
    border-top: 1px solid var(--border);
    padding: .875rem 0;
}
.nh-footer-bottom__inner { display: flex; justify-content: center; }
.nh-footer-copy {
    font-family: var(--font-b);
    font-size: .8125rem;
    color: var(--text-subtle);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* Tablette — top block : hero au-dessus, feeds côte à côte */
@media (max-width: 1000px) {
    .nh-top-inner {
        grid-template-columns: var(--top-col-side) var(--top-col-side);
        grid-template-areas:
            "hero  hero"
            "left  right";
    }
    .nh-top-center     { grid-area: hero; padding-bottom: 1.5rem; }
    .nh-top-feed--left { grid-area: left; border-right: 1px solid var(--border); padding-right: 1.5rem; }
    .nh-top-feed--right{ grid-area: right; border-left: 1px solid var(--border); padding-left: 1.5rem; }

    .nh-cat-grid     { gap: 1rem; }
    .nh-archive-grid { grid-template-columns: repeat(3, 1fr); }
    .nh-section-title { font-size: 1.25rem; letter-spacing: .3rem; }
    .nh-archive-hero__banner { height: 15.625rem; }
    .nh-archive-hero__content { margin-top: -2.1875rem; padding: 1.75rem 2.5rem 1.5rem; }
    /* Spotlight : featured devient vertical sur tablette */
    .nh-spotlight { grid-template-columns: repeat(2, 1fr); }
    .nh-spotlight-card--featured { grid-template-columns: 1fr; grid-column: auto; }
    .nh-spotlight-card--featured .nh-spotlight-card__body { padding-top: .75rem; padding-right: 0; }
    .nh-spotlight-card--featured .nh-spotlight-card__title { font-size: 1.5rem; }
    /* Aside : repasse en colonne unique */
    .nh-single-body--right,
    .nh-single-body--left { grid-template-columns: 1fr; }
    .nh-single-aside { position: static; max-height: none; }
    /* Read more : 3 colonnes sur tablette */
    .nh-read-more__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    :root { --pad: 1rem; --top-gap: 1.5rem; }

    .nh-menu-toggle  { display: flex; }
    .nh-search-toggle { display: none; }

    .nh-nav {
        display: none;
        position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
        background: var(--bg);
        z-index: 850;
        overflow-y: auto;
        border-top: 1px solid var(--border);
    }
    .nh-nav.is-open { display: block; }
    .nh-nav-list    { flex-direction: column; height: auto; padding: 8px 0; }
    .nh-nav-list > li { height: auto; width: 100%; border-bottom: 1px solid var(--border); }
    .nh-nav-list > li > a {
        height: auto; padding: 12px 1rem; width: 100%;
        border-bottom: none; font-size: .9375rem;
    }
    .nh-nav-list .sub-menu { position: static; border: none; box-shadow: none; display: none; background: var(--bg-alt); }
    .nh-nav-list > li:hover .sub-menu { display: none; }

    .nh-top-inner {
        grid-template-columns: 1fr;
        grid-template-areas: "hero" "left" "right";
    }
    .nh-top-feed--left  { border-right: none; padding-right: 0; border-top: 1px solid var(--border); padding-top: 1.25rem; }
    .nh-top-feed--right { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1.25rem; }

    .nh-cat-grid     { grid-template-columns: repeat(2, 1fr); }
    .nh-archive-grid { grid-template-columns: repeat(2, 1fr); }

    .nh-spotlight { grid-template-columns: 1fr; row-gap: 1.25rem; }
    .nh-spotlight-card--featured { grid-template-columns: 1fr; grid-column: auto; }
    .nh-spotlight-card--featured .nh-spotlight-card__body { padding-top: .75rem; padding-right: 0; }
    .nh-spotlight-card--featured .nh-spotlight-card__title { font-size: 1.5rem; }

    .nh-archive-hero__title { font-size: 1.625rem; }
    .nh-section-title { font-size: 1.125rem; letter-spacing: .25rem; line-height: 2rem; }
    .nh-single-title  { font-size: 1.75rem; }

    /* Read more : 2 colonnes sur mobile */
    .nh-read-more__grid { grid-template-columns: repeat(2, 1fr); }
    /* Footer : empile les colonnes */
    .nh-footer-inner { grid-template-columns: 1fr; gap: 2rem; }
    .nh-footer-menus { grid-template-columns: 1fr 1fr; }

    /* Sommaire aside — repositionné entre l'image et le contenu */
    .nh-single-body { display: flex; flex-direction: column; }
    .nh-single-aside--toc {
        order: -1;
        margin-top: .5rem;
        margin-bottom: .625rem;
    }
    /* Feed articles aside — toujours après le contenu */
    .nh-single-aside--feed {
        order: 2;
        border-top: 1px solid var(--border);
        padding-top: 1.5rem;
        margin-top: .5rem;
    }
}

@media (max-width: 480px) {
    .nh-cat-grid     { grid-template-columns: 1fr; }
    .nh-archive-grid { grid-template-columns: 1fr; }
    .nh-spotlight-card__title { font-size: 1.25rem; }
    .nh-card__title  { font-size: 1.25rem; }
    .nh-read-more__grid { grid-template-columns: 1fr; }
    .nh-footer-menus { grid-template-columns: 1fr; }
}

/* Grande largeur — font-size-36 pour section title */
@media (min-width: 1100px) {
    .nh-section-title {
        font-size: 2.25rem;
        letter-spacing: .75rem;
        line-height: 2.75rem;
    }
    .nh-archive-hero__banner { height: 22.5rem; }
    .nh-archive-hero__content {
        margin-top: -4.25rem;
        font-size: 2.25rem;  /* font-size-36 */
    }
    .nh-archive-hero__title { font-size: 2.25rem; }
}