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

/* ─── ARTICLE GRID (archive / search — 3-col) ─── */
/* Grid lives on wp-block-post-template, not on the query wrapper */
.nh-art-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nh-art-grid .wp-block-post-template > li {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.nh-art-grid .wp-block-post-template > li > .wp-block-template-part {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ─── ARTICLE GRID 3-COL (category sections on homepage) ─── */
.nh-art-grid-3 .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nh-art-grid-3 .wp-block-post-template > li {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.nh-art-grid-3 .wp-block-post-template > li > .wp-block-template-part {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ─── ARTICLE CARD ─── */
.nh-art-card {
  background: var(--nh-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--nh-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  text-decoration: none;
}
.nh-art-card.is-layout-flow > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.nh-art-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: var(--nh-line-strong);
}

.nh-art-card-img {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  /* padding-top trick : 9/16 = 56.25% — plus fiable qu'aspect-ratio en contexte flex */
  height: 0 !important;
  padding-top: 56.25% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.nh-art-card-img a {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
}
.nh-art-card-img img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.nh-art-card-img-ph {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  flex-shrink: 0;
}

.nh-art-card-body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.nh-art-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: nowrap;
}
/* Pilules colorées par catégorie dans les cartes */
.nh-art-card-meta .nh-pill {
  border: none;
  font-size: 11px;
  height: 24px;
  padding: 0 10px;
  letter-spacing: 0.03em;
}
.nh-art-card-meta .nh-pill a { color: inherit; text-decoration: none; }
.nh-pill[data-cat]::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  flex-shrink: 0;
  opacity: .8;
}
/* WCAG AA: cat colors darkened for ≥4.5:1 contrast on cat-soft background (small 11px text) */
.nh-pill[data-cat="science"]      { background: var(--nh-science-soft);      color: #4f43c7; }
.nh-pill[data-cat="alimentation"] { background: var(--nh-alimentation-soft); color: #2f6a4d; }
.nh-pill[data-cat="recettes"]     { background: var(--nh-recettes-soft);     color: #b85a25; }
.nh-pill[data-cat="life-style"]   { background: var(--nh-lifestyle-soft);    color: #076578; }
.nh-pill[data-cat="sante"]        { background: var(--nh-sante-soft);        color: #a8344a; }
.nh-pill[data-cat="nahibu"]       { background: var(--nh-nahibu-soft);       color: #1a2a55; }

.nh-art-card-title {
  font: 400 20px/1.25 var(--nh-serif);
  color: var(--nh-navy-900);
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nh-art-card-excerpt {
  font: 400 14px/1.55 var(--nh-sans);
  color: var(--nh-ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nh-art-card-excerpt .wp-block-post-excerpt__excerpt { margin: 0; }

.nh-art-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--nh-line);
  font: 500 11px/1 var(--nh-mono);
  letter-spacing: 0.06em;
  color: var(--nh-ink-4);
  flex-wrap: nowrap;
}

/* Lire l'article */
.nh-read-more,
.wp-block-read-more.nh-read-more {
  font: 500 11px/1 var(--nh-mono);
  letter-spacing: 0.06em;
  color: var(--nh-ink-4);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-base) var(--ease-out);
}
.nh-read-more::after,
.wp-block-read-more.nh-read-more::after {
  content: ' →';
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}
.nh-art-card:hover .nh-read-more,
.nh-art-card:hover .wp-block-read-more.nh-read-more {
  color: var(--nh-cyan-600);
}
.nh-art-card:hover .nh-read-more::after,
.nh-art-card:hover .wp-block-read-more.nh-read-more::after {
  transform: translateX(4px);
}


/* ─── CATEGORY CARDS ─── */
.nh-cat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.nh-cat-card {
  border-radius: var(--r-xl);
  padding: var(--s-8) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 200px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.nh-cat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.nh-cat-card[data-cat="science"]:hover      { box-shadow: 0 20px 40px -12px rgba(107, 92, 217, .22); }
.nh-cat-card[data-cat="alimentation"]:hover { box-shadow: 0 20px 40px -12px rgba(74, 138, 107, .22); }
.nh-cat-card[data-cat="recettes"]:hover     { box-shadow: 0 20px 40px -12px rgba(217, 119, 66, .22); }
.nh-cat-card[data-cat="life-style"]:hover   { box-shadow: 0 20px 40px -12px rgba(11, 174, 212, .22); }
.nh-cat-card[data-cat="sante"]:hover        { box-shadow: 0 20px 40px -12px rgba(196, 84, 106, .22); }
.nh-cat-card[data-cat="nahibu"]:hover       { box-shadow: 0 20px 40px -12px rgba(35, 54, 107, .22); }

.nh-cat-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.55);
  flex-shrink: 0;
  margin-bottom: var(--s-4);
}
.nh-cat-card-icon svg { display: block; }
.nh-cat-card-title {
  font: 400 22px/1.25 var(--nh-serif);
  letter-spacing: -0.01em;
}
.nh-cat-card-count {
  font: 500 12px/1 var(--nh-mono);
  letter-spacing: 0.06em;
  /* WCAG AA: was opacity:.6 (desaturated to 1.7-2.4:1), now solid ink-3 (5.7:1) */
  color: var(--nh-ink-3);
  margin-top: auto;
}
.nh-cat-card[data-cat="science"]      { background: var(--nh-science-soft);      color: var(--nh-science-ink); }
.nh-cat-card[data-cat="recettes"]     { background: var(--nh-recettes-soft);     color: var(--nh-recettes-ink); }
.nh-cat-card[data-cat="alimentation"] { background: var(--nh-alimentation-soft); color: var(--nh-alimentation-ink); }
.nh-cat-card[data-cat="life-style"]   { background: var(--nh-lifestyle-soft);    color: var(--nh-lifestyle-ink); }
.nh-cat-card[data-cat="sante"]        { background: var(--nh-sante-soft);        color: var(--nh-sante-ink); }
.nh-cat-card[data-cat="nahibu"]       { background: var(--nh-nahibu-soft);       color: var(--nh-nahibu-ink); }

/* ─── FEATURED ARTICLE ("À LA UNE") ─── */
.nh-featured .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nh-featured .wp-block-post-template > li { display: block; }

.nh-featured-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  background: var(--nh-white);
  border: 1px solid var(--nh-line);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.nh-featured-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: var(--nh-line-strong);
}
.nh-featured-card:hover .nh-read-more { color: var(--nh-cyan-600); }
.nh-featured-card:hover .nh-read-more::after { transform: translateX(4px); }
.nh-featured-card.is-layout-flow > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.nh-featured-card .wp-block-post-featured-image {
  margin: 0;
  align-self: stretch;
}
.nh-featured-card .wp-block-post-featured-image a,
.nh-featured-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nh-featured-card-body {
  padding: var(--s-9) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  justify-content: center;
}
.nh-featured-card-body.is-layout-flex { gap: var(--s-4); }
.nh-featured-card-title {
  font: 400 clamp(22px, 2.2vw, 36px)/1.2 var(--nh-serif);
  color: var(--nh-navy-900);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nh-featured-card-title a { color: inherit; text-decoration: none; }
.nh-featured-card-excerpt {
  font: 400 16px/1.6 var(--nh-sans);
  color: var(--nh-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nh-featured-card .wp-block-post-date {
  font: 500 11px/1 var(--nh-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nh-ink-4);
}

/* ─── CATEGORY SECTIONS (homepage) ─── */
.nh-cat-section {
  padding: var(--s-11) 0;
  border-top: 1px solid var(--nh-line);
}
.nh-cat-section-head {
  display: block;
  margin-bottom: var(--s-9);
}
.nh-cat-section-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-5);
}
.nh-cat-section-eyebrow {
  font: 500 14px/1 var(--nh-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.nh-cat-section-title {
  font: 400 clamp(32px, 3.6vw, 54px)/1.08 var(--nh-serif);
  color: var(--nh-navy-900);
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-5);
}
.nh-cat-section-desc {
  font: 400 16px/1.6 var(--nh-sans);
  color: var(--nh-ink-2);
  max-width: 560px;
  margin: 0 0 var(--s-7);
}
.nh-cat-section-rule {
  border: none;
  border-top: 1px solid var(--nh-line);
  margin: 0;
}
.nh-cat-section-link {
  font: 500 13px/1 var(--nh-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nh-ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-base) var(--ease-out);
}
.nh-cat-section-link:hover { color: var(--nh-cyan-600); }

/* "À LA UNE" section header */
.nh-featured-section {
  padding: var(--s-11) 0 var(--s-9);
}

/* ─── SECTION WRAPPER ─── */
.nh-section { padding: var(--s-11) 0; }
.nh-section + .nh-section { padding-top: 0; }
.nh-section-head { margin-bottom: var(--s-7); max-width: 720px; }
.nh-section-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  margin: var(--s-2) 0 0;
}

/* ─── READING PROGRESS ─── */
.nh-progress-wrap {
  display: contents; /* landmark <aside> a11y-only, no layout impact */
}
.nh-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--nh-cyan-600);
  width: 0%;
  z-index: 200;
  transition: width 100ms linear;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
}

/* ─── NEWSLETTER CTA DARK ─── */
.nh-soft-cta {
  margin-top: var(--s-11);
  padding: var(--s-11) 0;
  background:
    radial-gradient(circle at 80% 50%, rgba(11,174,212,.12), transparent 60%),
    #14224a;
  color: #fff;
}
[data-theme="dark"] .nh-soft-cta {
  background:
    radial-gradient(circle at 80% 50%, rgba(11,174,212,.15), transparent 60%),
    #0a1228;
}
.nh-soft-cta-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-10);
  align-items: center;
}
.nh-eyebrow-light { color: rgba(255,255,255,.6); }
.nh-soft-cta-title {
  color: #fff;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  margin: var(--s-4) 0 var(--s-5);
}
.nh-soft-cta-title em { font-style: italic; color: var(--nh-cyan-500); }
.nh-soft-cta-sub {
  font: 400 17px/1.55 var(--nh-sans);
  color: rgba(255,255,255,.7);
  max-width: 520px;
  margin: 0 0 var(--s-7);
}

/* Tube visual */
.nh-soft-cta-visual { display: grid; place-items: center; }
.nh-soft-tube { position: relative; width: 90px; height: 240px; }
.nh-tube-body {
  position: absolute; inset: 30px 0 0 0;
  background: linear-gradient(180deg, rgba(11,174,212,.6), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 0 0 24px 24px;
}
.nh-tube-cap {
  position: absolute; left: 0; right: 0; top: 0;
  height: 36px;
  background: var(--nh-cyan-600);
  border-radius: 4px;
}

/* ─── HERO SECTION ─── */
.nh-hero { padding-top: var(--s-11); padding-bottom: var(--s-7); }

.nh-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--s-10);
  align-items: center;
  padding-top: var(--s-9);
  padding-bottom: var(--s-10);
}

.nh-hero-text { max-width: 580px; min-width: 0; overflow: hidden; }

.nh-hero-title {
  font: 400 clamp(40px, 5.5vw, 76px)/1.04 var(--nh-serif);
  letter-spacing: -0.025em;
  color: var(--nh-navy-900);
  margin: var(--s-5) 0 var(--s-6);
  text-wrap: balance;
}

.nh-hero-sub {
  font: 400 19px/1.5 var(--nh-sans);
  color: var(--nh-ink-2);
  max-width: 520px;
  margin: 0 0 var(--s-7);
  text-wrap: pretty;
}

.nh-hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.nh-hero-stats {
  display: flex; align-items: center; gap: var(--s-6);
  margin-top: var(--s-11);
  padding-top: var(--s-7);
  border-top: 1px solid var(--nh-line);
}
.nh-hero-stats > div { display: flex; flex-direction: column; gap: 4px; }
.nh-stat-num {
  font: 500 22px/1 var(--nh-serif);
  color: var(--nh-navy-900);
  letter-spacing: -0.01em;
}
.nh-stat-lbl {
  font: 500 11px/1 var(--nh-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nh-ink-3);
}
.nh-stat-sep { width: 1px; height: 28px; background: var(--nh-line); }

/* ─── HERO ORB ─── */
.nh-hero-visual { display: grid; place-items: center; }
.nh-hero-orb {
  position: relative;
  width: 100%; max-width: 460px;
  aspect-ratio: 1;
}

.nh-orb-core {
  position: absolute; inset: 28%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(circle at 70% 70%, var(--nh-cyan-600), var(--nh-navy-700) 60%);
  box-shadow:
    0 30px 80px -20px rgba(20,34,74,.4),
    inset -20px -30px 60px rgba(20,34,74,.4);
  animation: orb-pulse 6s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

.nh-orb-ring {
  position: absolute; inset: 0;
  border: 1px dashed rgba(35,54,107,.18);
  border-radius: 50%;
}
.nh-orb-ring-1 { inset: 12%; }
.nh-orb-ring-2 { inset: 4%; border-color: rgba(11,174,212,.18); }
.nh-orb-ring-3 { inset: -6%; border-style: solid; border-color: rgba(35,54,107,.06); }

.nh-orb-dot {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--nh-cyan-600);
  box-shadow: 0 0 0 6px rgba(11,174,212,.18);
  animation: dot-float 5s ease-in-out infinite;
}
.nh-orb-dot.small {
  width: 8px; height: 8px;
  background: var(--nh-science);
  box-shadow: 0 0 0 4px rgba(107,92,217,.18);
}
.nh-orb-dot:nth-of-type(2n) {
  animation-delay: -1.5s;
  background: var(--nh-alimentation);
  box-shadow: 0 0 0 5px rgba(74,138,107,.18);
}
.nh-orb-dot:nth-of-type(3n) {
  animation-delay: -3s;
  background: var(--nh-recettes);
  box-shadow: 0 0 0 5px rgba(217,119,66,.18);
}
@keyframes dot-float {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(6px, -8px); }
}

/* ===================================================================
   MOBILE LAUNCH — vertical density (≤880px). Desktop unchanged.
   Tightens section/hero/CTA spacing so mobile feels less airy.
   =================================================================== */
@media (max-width: 880px) {
  /* Sections: 80px → 48px top/bottom */
  .nh-section { padding: var(--s-9) 0; }
  .nh-section-head { margin-bottom: var(--s-6); }
  .nh-featured-section { padding: var(--s-9) 0 var(--s-7); }

  /* Hero outer: 80/32 → 24/24 (mobile-grid already adds its own padding) */
  .nh-hero { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .nh-hero-title { margin: var(--s-4) 0 var(--s-5); }
  .nh-hero-sub { margin: 0 0 var(--s-6); }
  .nh-hero-ctas { gap: var(--s-3); }
  .nh-hero-stats {
    margin-top: var(--s-7);   /* 80 → 32 */
    padding-top: var(--s-5);  /* 32 → 20 */
    gap: var(--s-5);
  }
  .nh-stat-num { font-size: 20px; }

  /* Soft CTA dark band: 80 + 80 = 160 → 48 + 48 */
  .nh-soft-cta { margin-top: var(--s-9); padding: var(--s-9) 0; }
  .nh-soft-cta-title { font-size: clamp(28px, 7vw, 36px); margin: var(--s-3) 0 var(--s-4); }
  .nh-soft-cta-sub { margin: 0 0 var(--s-6); }
}

/* Tighter phone-only (≤560px) */
@media (max-width: 560px) {
  .nh-section { padding: var(--s-8) 0; }
  .nh-section-head { margin-bottom: var(--s-5); }
  .nh-section-title { font-size: clamp(24px, 6.5vw, 28px); }
  .nh-soft-cta { padding: var(--s-8) 0; margin-top: var(--s-8); }

  /* Category cards: 40/32 → 24/20, taller min-height removed */
  .nh-cat-card {
    padding: var(--s-6) var(--s-5);
    min-height: 0;
    gap: var(--s-2);
  }
  .nh-cat-card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--s-3);
  }
  .nh-cat-card-title { font-size: 19px; line-height: 1.2; }

  /* Featured card body: 32/24 → 24/20 */
  .nh-featured-card-body { padding: var(--s-6) var(--s-5); }
}