/* Web Harmonie Portail — Architecture Digitale Harmonisée v1.5.0 */

/* ==========================================================================
   TABLE OF CONTENTS
   01. Google Fonts Import
   02. Brand Font — Oxanium
   03. CSS Custom Properties (Design Tokens)
   04. CSS Reset & Base Styles
   05. Site Header
   06. Hero Section
   07. Section System
   08. Buttons
   09. Service Cards
   10. Article Cards & Blog Grid
   11. Page Banners
   12. Articles Page Hero
   13. Footer
   14. Pagination
   15. Quote
   16. Scroll Reveal Animations
   17. Hero Entrance Animations
   18. Contact Form
   19. Single Post Content
   20. Empty State
   21. Filter Buttons
   22. Responsive Breakpoints
   ========================================================================== */


/* ==========================================================================
   01. Google Fonts Import
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Oxanium:wght@200;300;400;500;600;700;800&display=swap');


/* ==========================================================================
   02. Brand Font — Oxanium (Google Fonts, chargé via wp_enqueue_style)
   ========================================================================== */

/* Oxanium — police minimaliste futuriste sobre
   Poids disponibles : 200 / 300 / 400 / 500 / 600 / 700 / 800
   Utilisée pour les titres, logo, et éléments de marque. */


/* ==========================================================================
   03. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Color Palette */
  --wh-dark:         #0C1118;
  --wh-dark-mid:     #131B27;
  --wh-dark-border:  rgba(255, 255, 255, 0.08);
  --wh-teal:         #C9A968;
  --wh-teal-light:   #E8CB7A;
  --wh-teal-glow:    rgba(201, 169, 104, 0.15);
  --wh-gold:         #C9A968;
  --wh-cream:        #F8F6F2;
  --wh-cream-mid:    #EEE9E0;
  --wh-white:        #FFFFFF;
  --wh-text:         #1A1816;
  --wh-text-muted:   #6E6A64;
  --wh-border:       #DDD8CE;

  /* Shape */
  --wh-radius:       0px;

  /* Transitions */
  --wh-transition:   0.22s ease;

  /* Typography */
  --font-brand:      'Oxanium', sans-serif;
  --font-heading:    'Montserrat', sans-serif;
  --font-body:       'Inter', sans-serif;
  --font-editorial:  'Cormorant Garamond', serif;

  /* Layout */
  --wh-header-height: 72px;
}


/* ==========================================================================
   04. CSS Reset & Base Styles
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  background-color: var(--wh-cream);
  color: var(--wh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* WordPress core overrides */
.wp-block-group {
  margin: 0;
}

.editor-styles-wrapper {
  background-color: var(--wh-cream);
}


/* ==========================================================================
   05. Site Header
   ========================================================================== */

.wh-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--wh-header-height);
  background-color: var(--wh-cream);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Contenu borné à 1200px centré (aligné sur .wh-container), à la manière du
     header du Laboratoire Conscientiel : le menu reste resserré au lieu de
     s'étaler jusqu'aux bords de l'écran sur les grands moniteurs. */
  padding: 0 max(2rem, calc((100% - 1200px) / 2));
  transition: box-shadow var(--wh-transition), border-bottom var(--wh-transition);
}

/* Scrolled state */
.wh-site-header--scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(201, 169, 104, 0.15);
}

/* La admin bar WP est aussi en position:fixed/top:0 mais avec un z-index plus
   élevé : sans ce décalage elle recouvre le haut du header fixed quand on est connecté. */
body.admin-bar .wh-site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .wh-site-header {
    top: 46px;
  }
}

/* Brand block */
.wh-brand-block {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  text-decoration: none;
}

.wh-brand-block img,
.wh-site-header .wh-logo img {
  height: 40px;
  width: auto;
  display: block;
}

.wh-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Site title in header */
.wh-site-header .wp-block-site-title,
.wh-site-header .wp-block-site-title a {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wh-text);
  text-decoration: none;
  line-height: 1;
}

/* Site tagline in header */
.wh-site-header .wp-block-site-tagline {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wh-text-muted);
  line-height: 1;
}

/* Navigation */
.wh-site-header .wh-nav,
.wh-site-header nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.wh-site-header .wh-nav a,
.wh-site-header nav a,
.wh-site-header .wp-block-navigation a {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wh-text);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  transition: color var(--wh-transition);
}

/* Underline animation */
.wh-site-header .wh-nav a::after,
.wh-site-header nav a::after,
.wh-site-header .wp-block-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--wh-teal);
  transition: width 0.28s ease;
}

.wh-site-header .wh-nav a:hover,
.wh-site-header nav a:hover,
.wh-site-header .wp-block-navigation a:hover {
  color: var(--wh-teal);
}

.wh-site-header .wh-nav a:hover::after,
.wh-site-header nav a:hover::after,
.wh-site-header .wp-block-navigation a:hover::after {
  width: 100%;
}

/* WordPress block navigation overrides */
.wh-site-header .wp-block-navigation__container {
  gap: 2rem;
  display: flex;
  align-items: center;
}

.wh-site-header .wp-block-navigation-item__content {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0;
}

/* Mobile menu toggle */
.wh-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
}

.wh-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--wh-text);
  transition: all 0.3s ease;
}


/* ==========================================================================
   06. Hero Section
   ========================================================================== */

.wh-hero {
  position: relative;
  overflow: hidden;
  background-color: #050810;
  /* Couche 1 : filtre sombre pour lisibilité
     Couche 2 : halo or signature marque
     Couche 3 : photo vagues dorées métalliques */
  background-image:
    linear-gradient(
      170deg,
      rgba(5, 8, 16, 0.88) 0%,
      rgba(5, 8, 16, 0.68) 30%,
      rgba(5, 8, 16, 0.72) 65%,
      rgba(5, 8, 16, 0.94) 100%
    ),
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(201, 169, 104, 0.14) 0%, transparent 65%),
    url('../img/hero-bg.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, cover;
  background-position: center center, center center, center center;
  margin-top: calc(-1 * var(--wh-header-height));
  padding: calc(9rem + var(--wh-header-height)) 1.5rem 8rem;
  text-align: center;
  color: var(--wh-cream);
}

/* Grain texture subtil */
.wh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Aurora or au-dessus */
.wh-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201, 169, 104, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 120%, rgba(201, 169, 104, 0.06) 0%, transparent 60%);
}

.wh-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

/* Hero logo */
.wh-hero__logo {
  margin-bottom: 2.5rem;
}

.wh-hero__logo img {
  max-height: 100px;
  width: auto;
  margin: 0 auto;
}

/* Hero eyebrow */
.wh-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: rgba(201, 169, 104, 0.9);
  margin-bottom: 1.5rem;
  display: block;
}

/* Hero title */
.wh-hero__title {
  font-family: var(--font-brand);
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 200;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1.0;
  margin-bottom: 1rem;
  transform: scaleY(0.65);
  transform-origin: center center;

  /* Or gradient text */
  background: linear-gradient(
    180deg,
    #FFF8DC 0%,
    #C9A968 40%,
    #E8CB7A 75%,
    #D4B06A 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Hero decorative rule (gold diamond divider) */
.wh-hero__rule,
.wh-page-banner__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem auto;
  max-width: 320px;
}

.wh-hero__rule .wh-rule-line,
.wh-page-banner__rule .wh-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--wh-gold), transparent);
  opacity: 0.6;
}

.wh-hero__rule .wh-rule-diamond,
.wh-page-banner__rule .wh-rule-diamond {
  color: var(--wh-gold);
  font-size: 0.625rem;
  opacity: 0.85;
  letter-spacing: 0;
  line-height: 1;
}

/* Hero subtitle */
.wh-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(248, 246, 242, 0.85);
  max-width: 580px;
  margin: 0 auto 1.5rem;
  line-height: 1.65;
}

/* Hero sub-domains */
.wh-hero__sub-domains {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(200, 196, 190, 0.6);
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 169, 104, 0.15);
}

/* Hero CTA area */
.wh-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}


/* ==========================================================================
   07. Section System
   ========================================================================== */

.wh-section {
  padding: 7rem 1.5rem;
  background-color: var(--wh-cream);
}

.wh-section--dark {
  background-color: var(--wh-dark);
  color: var(--wh-cream);
}

.wh-section--mid {
  background-color: var(--wh-cream-mid);
}

.wh-section--dark-mid {
  background-color: var(--wh-dark-mid);
  color: var(--wh-cream);
}

.wh-section--compact {
  padding: 4rem 1.5rem;
}

.wh-section--flush {
  padding-top: 0;
}

/* Container */
.wh-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.wh-container--narrow {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}

.wh-container--wide {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* Section number badge */
.wh-section__number {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  color: var(--wh-teal);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* Section eyebrow */
.wh-section__eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--wh-teal);
  margin-bottom: 1rem;
  display: block;
}

/* Section title */
.wh-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--wh-text);
  margin-bottom: 1.5rem;
}

.wh-section--dark .wh-section__title,
.wh-section--dark-mid .wh-section__title {
  color: var(--wh-cream);
}

/* Section lead */
.wh-section__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: 0.01em;
  color: var(--wh-text-muted);
  margin-bottom: 1.75rem;
  max-width: 720px;
}

.wh-section--dark .wh-section__lead,
.wh-section--dark-mid .wh-section__lead {
  color: rgba(248, 246, 242, 0.8);
}

/* Section header alignment helpers */
.wh-section__header {
  margin-bottom: 3.5rem;
}

.wh-section__header--center {
  text-align: center;
}

.wh-section__header--center .wh-section__lead {
  margin-left: auto;
  margin-right: auto;
}

/* Decorative divider (gold diamond rule) */
.wh-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

.wh-divider--center {
  justify-content: center;
}

.wh-divider .wh-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--wh-gold), transparent);
  opacity: 0.5;
}

.wh-divider--center .wh-divider__line:first-child {
  background: linear-gradient(to right, transparent, var(--wh-gold));
}

.wh-divider--center .wh-divider__line:last-child {
  background: linear-gradient(to left, transparent, var(--wh-gold));
}

.wh-divider .wh-divider__diamond {
  color: var(--wh-gold);
  font-size: 0.625rem;
  opacity: 0.85;
  line-height: 1;
  flex-shrink: 0;
}

/* Two-col layout */
.wh-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.wh-two-col--reverse {
  direction: rtl;
}

.wh-two-col--reverse > * {
  direction: ltr;
}


/* ==========================================================================
   08. Buttons
   ========================================================================== */

.wh-btn {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.875rem 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  border-radius: var(--wh-radius);
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

/* Primary button */
.wh-btn--primary {
  background-color: var(--wh-gold);
  color: var(--wh-dark);
  border: 1px solid var(--wh-gold);
  font-weight: 600;
}

.wh-btn--primary:hover {
  background-color: #E8CB7A;
  border-color: #E8CB7A;
  color: var(--wh-dark);
  box-shadow: 0 4px 20px rgba(201, 169, 104, 0.35);
  transform: translateY(-1px);
}

.wh-btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Outline button */
.wh-btn--outline {
  background-color: transparent;
  color: var(--wh-teal);
  border: 1px solid var(--wh-teal);
}

.wh-btn--outline:hover {
  background-color: var(--wh-teal);
  color: var(--wh-white);
  box-shadow: 0 4px 20px rgba(201, 169, 104, 0.2);
  transform: translateY(-1px);
}

.wh-btn--outline:active {
  transform: translateY(0);
}

/* Ghost button (for dark backgrounds) */
.wh-btn--ghost {
  background-color: transparent;
  color: rgba(248, 246, 242, 0.9);
  border: 1px solid rgba(201, 169, 104, 0.4);
}

.wh-btn--ghost:hover {
  border-color: var(--wh-teal);
  color: var(--wh-teal);
  background-color: rgba(201, 169, 104, 0.06);
  transform: translateY(-1px);
}

.wh-btn--ghost:active {
  transform: translateY(0);
}

/* Gold button */
.wh-btn--gold {
  background-color: transparent;
  color: var(--wh-gold);
  border: 1px solid var(--wh-gold);
}

.wh-btn--gold:hover {
  background-color: var(--wh-gold);
  color: var(--wh-dark);
  transform: translateY(-1px);
}

/* Small button variant */
.wh-btn--sm {
  font-size: 0.6875rem;
  padding: 0.625rem 1.5rem;
  letter-spacing: 0.12em;
}

/* Large button variant */
.wh-btn--lg {
  font-size: 0.9375rem;
  padding: 1.125rem 3rem;
}


/* ==========================================================================
   09. Service Cards
   ========================================================================== */

.wh-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.wh-service-card {
  position: relative;
  background-color: var(--wh-cream);
  padding: 2.5rem 2rem;
  border: 1px solid var(--wh-border);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Left accent bar */
.wh-service-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background-color: var(--wh-teal);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.wh-service-card:hover::before {
  opacity: 1;
}

.wh-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Card number */
.wh-service-card__number {
  font-family: var(--font-brand);
  font-size: 3rem;
  font-weight: 400;
  color: var(--wh-teal);
  opacity: 0.18;
  margin-bottom: 1rem;
  line-height: 1;
  display: block;
  transition: opacity 0.25s ease;
}

.wh-service-card:hover .wh-service-card__number {
  opacity: 0.28;
}

/* Card title */
.wh-service-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wh-text);
  line-height: 1.2;
}

/* Card description */
.wh-service-card__desc {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--wh-text-muted);
  margin-top: 0.75rem;
}

/* Card icon area */
.wh-service-card__icon {
  margin-bottom: 1.25rem;
  color: var(--wh-teal);
}

/* Dark variant of service cards */
.wh-section--dark .wh-service-card,
.wh-section--dark-mid .wh-service-card {
  background-color: var(--wh-dark-mid);
  border-color: var(--wh-dark-border);
}

.wh-section--dark .wh-service-card__title,
.wh-section--dark-mid .wh-service-card__title {
  color: var(--wh-cream);
}

.wh-section--dark .wh-service-card:hover,
.wh-section--dark-mid .wh-service-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   10. Article Cards & Blog Grid
   ========================================================================== */

.wh-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.wh-article-card {
  border: 1px solid var(--wh-border);
  background-color: var(--wh-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.wh-article-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

/* Card image */
.wh-article-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  margin-bottom: 1.5rem;
  background-color: var(--wh-cream-mid);
}

.wh-article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.wh-article-card:hover .wh-article-card__img img {
  transform: scale(1.04);
}

/* Card meta */
.wh-article-card__meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--wh-text-muted);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wh-article-card__meta-sep {
  opacity: 0.4;
}

/* Card title */
.wh-article-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wh-text);
  margin-bottom: 0.75rem;
}

.wh-article-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--wh-transition);
}

.wh-article-card__title a:hover {
  color: var(--wh-teal);
}

/* Card excerpt */
.wh-article-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--wh-text-muted);
}

/* Read more link */
.wh-article-card__read {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wh-teal);
  text-decoration: none;
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: gap 0.2s ease, color var(--wh-transition);
}

.wh-article-card__read:hover {
  gap: 0.625rem;
  color: #B8913A;
}

.wh-article-card__read::after {
  content: '→';
  font-size: 0.875rem;
  transition: transform 0.2s ease;
}

.wh-article-card__read:hover::after {
  transform: translateX(3px);
}

/* Category tag */
.wh-article-card__category {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wh-teal);
  border: 1px solid rgba(201, 169, 104, 0.35);
  padding: 0.2em 0.6em;
  display: inline-block;
  margin-bottom: 0.75rem;
}

/* Featured article card (large) */
.wh-article-card--featured {
  grid-column: span 2;
}

.wh-article-card--featured .wh-article-card__title {
  font-size: 1.625rem;
}


/* ==========================================================================
   11. Page Banners
   ========================================================================== */

.wh-page-banner {
  position: relative;
  background-color: var(--wh-dark);
  margin-top: calc(-1 * var(--wh-header-height));
  padding: calc(7rem + var(--wh-header-height)) 1.5rem 6rem;
  text-align: center;
  overflow: hidden;
  color: var(--wh-cream);
}

/* Page banner grain */
.wh-page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Page banner aurora */
.wh-page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 70% 40% at 50% -5%, rgba(201, 169, 104, 0.14) 0%, transparent 65%);
}

.wh-page-banner__inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
}

/* Banner eyebrow */
.wh-page-banner__eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(201, 169, 104, 0.9);
  margin-bottom: 1.25rem;
  display: block;
}

/* Banner title — identique au hero (même ecrasement, même espacement) */
.wh-page-banner__title,
.wh-page-banner h1,
.wp-block-query-title.wh-page-banner__title {
  font-family: var(--font-brand) !important;
  font-size: clamp(1.75rem, 4.2vw, 3.6rem) !important;
  font-weight: 200 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  line-height: 1.0 !important;
  margin-bottom: 1rem !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
  transform: scaleY(0.65) !important;
  transform-origin: center center !important;

  background: linear-gradient(
    180deg,
    #FFF8DC 0%,
    #C9A968 40%,
    #E8CB7A 75%,
    #D4B06A 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Banner subtitle */
.wh-page-banner__subtitle {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(248, 246, 242, 0.75);
  margin-top: 1.25rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}


/* ==========================================================================
   12. Articles Page Hero
   ========================================================================== */

.wh-articles-hero {
  position: relative;
  background-color: var(--wh-dark);
  margin-top: calc(-1 * var(--wh-header-height));
  padding: calc(7rem + var(--wh-header-height)) 1.5rem 6rem;
  text-align: center;
  overflow: hidden;
  color: var(--wh-cream);
}

.wh-articles-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

.wh-articles-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 70% 40% at 50% -5%, rgba(201, 169, 104, 0.14) 0%, transparent 65%);
}

.wh-articles-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
}

.wh-articles-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(201, 169, 104, 0.9);
  margin-bottom: 1.25rem;
  display: block;
}

.wh-articles-hero__title {
  font-family: var(--font-brand);
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 1.0;
  margin-bottom: 1rem;
  transform: scaleY(0.65);
  transform-origin: center center;

  background: linear-gradient(
    180deg,
    #FFF8DC 0%,
    #C9A968 40%,
    #E8CB7A 75%,
    #D4B06A 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.wh-articles-hero__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem auto;
  max-width: 280px;
}

.wh-articles-hero__rule .wh-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--wh-gold), transparent);
  opacity: 0.6;
}

.wh-articles-hero__rule .wh-rule-diamond {
  color: var(--wh-gold);
  font-size: 0.625rem;
  opacity: 0.85;
  line-height: 1;
}

.wh-articles-hero__subtitle {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 300;
  color: rgba(248, 246, 242, 0.75);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}


/* ==========================================================================
   13. Footer
   ========================================================================== */

.wh-site-footer {
  background-color: var(--wh-dark);
  color: rgba(248, 246, 242, 0.7);
  padding: 4rem 1.5rem;
  border-top: 1px solid rgba(201, 169, 104, 0.12);
}

.wh-site-footer .wh-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

/* Footer brand column */
.wh-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 0 0 auto;
  max-width: 280px;
}

.wh-footer-brand__logo {
  margin-bottom: 0.75rem;
}

.wh-footer-brand__logo img {
  height: 36px;
  width: auto;
  opacity: 0.9;
}

.wh-site-footer .wp-block-site-title,
.wh-site-footer .wp-block-site-title a {
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wh-cream);
  text-decoration: none;
  line-height: 1;
}

.wh-site-footer .wp-block-site-tagline {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--wh-teal);
  opacity: 0.9;
  margin-top: 0.25rem;
  text-transform: uppercase;
}

.wh-footer-brand__desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(248, 246, 242, 0.5);
  margin-top: 0.5rem;
}

/* Footer nav column */
.wh-footer-nav {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
}

.wh-footer-nav__group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wh-footer-nav__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(248, 246, 242, 0.4);
  margin-bottom: 0.25rem;
}

.wh-site-footer nav a,
.wh-site-footer .wh-footer-nav a,
.wh-site-footer .wp-block-navigation a {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(248, 246, 242, 0.6);
  text-decoration: none;
  transition: color var(--wh-transition);
  display: inline-block;
}

.wh-site-footer nav a:hover,
.wh-site-footer .wh-footer-nav a:hover,
.wh-site-footer .wp-block-navigation a:hover {
  color: var(--wh-teal);
}

/* Footer bottom bar */
.wh-footer-bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.wh-footer-bottom p,
.wh-footer-copyright {
  font-size: 0.75rem;
  color: rgba(248, 246, 242, 0.35);
  letter-spacing: 0.04em;
}

.wh-footer-credits {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.wh-footer-credits a {
  font-size: 0.75rem;
  color: rgba(248, 246, 242, 0.35);
  text-decoration: none;
  transition: color var(--wh-transition);
}

.wh-footer-credits a:hover {
  color: var(--wh-teal);
}


/* ==========================================================================
   14. Pagination
   ========================================================================== */

.wh-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 4rem;
  flex-wrap: wrap;
}

.wh-pagination a,
.wh-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--wh-border);
  color: var(--wh-text-muted);
  text-decoration: none;
  transition: all var(--wh-transition);
}

.wh-pagination a:hover {
  border-color: var(--wh-teal);
  color: var(--wh-teal);
  background-color: var(--wh-teal-glow);
}

/* Active / current page */
.wh-pagination .current,
.wh-pagination .wh-pagination__current {
  background-color: var(--wh-teal);
  border-color: var(--wh-teal);
  color: var(--wh-dark);
  font-weight: 600;
}

/* Prev / Next arrows */
.wh-pagination .prev,
.wh-pagination .next,
.wh-pagination__prev,
.wh-pagination__next {
  font-size: 0.75rem;
  padding: 0 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* WordPress core pagination */
.wp-block-query-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--wh-border);
  color: var(--wh-text-muted);
  text-decoration: none;
  transition: all var(--wh-transition);
}

.wp-block-query-pagination-numbers .page-numbers.current {
  background-color: var(--wh-teal);
  border-color: var(--wh-teal);
  color: var(--wh-dark);
  font-weight: 600;
}

.wp-block-query-pagination-numbers .page-numbers:hover:not(.current) {
  border-color: var(--wh-teal);
  color: var(--wh-teal);
}


/* ==========================================================================
   15. Quote
   ========================================================================== */

.wh-quote,
blockquote.wh-quote {
  border-left: 3px solid var(--wh-teal);
  padding: 0.5rem 0 0.5rem 2rem;
  font-family: var(--font-editorial);
  font-size: 1.125rem;
  font-weight: 400;
  font-style: italic;
  color: var(--wh-text-muted);
  line-height: 1.7;
  margin: 2rem 0;
}

.wh-quote p {
  font-family: var(--font-editorial);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--wh-text-muted);
  margin: 0;
}

.wh-quote cite,
.wh-quote footer {
  display: block;
  font-size: 0.8125rem;
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wh-teal);
  margin-top: 0.75rem;
}

/* WordPress block quote integration */
.wp-block-quote {
  border-left: 3px solid var(--wh-teal);
  padding: 0.5rem 0 0.5rem 2rem;
  margin: 2rem 0;
}

.wp-block-quote p {
  font-family: var(--font-editorial);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--wh-text-muted);
  line-height: 1.7;
}

.wp-block-quote cite {
  font-size: 0.8125rem;
  font-style: normal;
  font-family: var(--font-body);
  color: var(--wh-teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ==========================================================================
   16. Scroll Reveal Animations
   ========================================================================== */

.wh-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s ease-out,
    transform 0.65s ease-out;
}

.wh-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cascade delays for service cards */
.wh-services-grid .wh-service-card.wh-reveal:nth-child(1) { transition-delay: 0s; }
.wh-services-grid .wh-service-card.wh-reveal:nth-child(2) { transition-delay: 0.1s; }
.wh-services-grid .wh-service-card.wh-reveal:nth-child(3) { transition-delay: 0.2s; }
.wh-services-grid .wh-service-card.wh-reveal:nth-child(4) { transition-delay: 0.3s; }
.wh-services-grid .wh-service-card.wh-reveal:nth-child(5) { transition-delay: 0.4s; }
.wh-services-grid .wh-service-card.wh-reveal:nth-child(6) { transition-delay: 0.5s; }

/* Cascade delays for article cards */
.wh-blog-grid .wh-article-card.wh-reveal:nth-child(1) { transition-delay: 0s; }
.wh-blog-grid .wh-article-card.wh-reveal:nth-child(2) { transition-delay: 0.1s; }
.wh-blog-grid .wh-article-card.wh-reveal:nth-child(3) { transition-delay: 0.2s; }
.wh-blog-grid .wh-article-card.wh-reveal:nth-child(4) { transition-delay: 0.3s; }
.wh-blog-grid .wh-article-card.wh-reveal:nth-child(5) { transition-delay: 0.4s; }
.wh-blog-grid .wh-article-card.wh-reveal:nth-child(6) { transition-delay: 0.5s; }

/* Horizontal reveal variant */
.wh-reveal--from-left {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity 0.65s ease-out,
    transform 0.65s ease-out;
}

.wh-reveal--from-right {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity 0.65s ease-out,
    transform 0.65s ease-out;
}

.wh-reveal--from-left.wh-reveal--visible,
.wh-reveal--from-right.wh-reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade only variant */
.wh-reveal--fade {
  opacity: 0;
  transform: none;
  transition: opacity 0.8s ease-out;
}

.wh-reveal--fade.wh-reveal--visible {
  opacity: 1;
  transform: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wh-reveal,
  .wh-reveal--from-left,
  .wh-reveal--from-right,
  .wh-reveal--fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   17. Hero Entrance Animations
   ========================================================================== */

@keyframes wh-hero-fade-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wh-hero-fade-in-scale {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes wh-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wh-hero-item {
  animation: wh-hero-fade-in 0.7s ease-out forwards;
  opacity: 0;
}

/* Staggered hero items */
.wh-hero-item:nth-child(1) { animation-delay: 0.1s; }
.wh-hero-item:nth-child(2) { animation-delay: 0.22s; }
.wh-hero-item:nth-child(3) { animation-delay: 0.34s; }
.wh-hero-item:nth-child(4) { animation-delay: 0.46s; }
.wh-hero-item:nth-child(5) { animation-delay: 0.58s; }
.wh-hero-item:nth-child(6) { animation-delay: 0.70s; }

/* Logo entrance */
.wh-hero__logo.wh-hero-item {
  animation-name: wh-hero-fade-in-scale;
  animation-duration: 0.85s;
  animation-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .wh-hero-item {
    animation: none;
    opacity: 1;
  }
}


/* ==========================================================================
   18. Contact Form
   ========================================================================== */

.wh-contact-form {
  max-width: 640px;
  margin: 0 auto;
}

.wh-contact-form .wh-form-group {
  margin-bottom: 1.5rem;
}

.wh-contact-form label,
.wh-form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wh-text-muted);
  margin-bottom: 0.5rem;
}

.wh-contact-form input[type="text"],
.wh-contact-form input[type="email"],
.wh-contact-form input[type="tel"],
.wh-contact-form input[type="url"],
.wh-contact-form textarea,
.wh-contact-form select,
.wh-form-input,
.wh-form-textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  padding: 0.875rem 1rem;
  border: 1px solid var(--wh-border);
  background-color: transparent;
  color: var(--wh-text);
  outline: none;
  border-radius: var(--wh-radius);
  transition: border-color var(--wh-transition), box-shadow var(--wh-transition);
  appearance: none;
  -webkit-appearance: none;
}

.wh-contact-form input:focus,
.wh-contact-form textarea:focus,
.wh-contact-form select:focus,
.wh-form-input:focus,
.wh-form-textarea:focus {
  border-color: var(--wh-teal);
  box-shadow: 0 0 0 3px rgba(201, 169, 104, 0.1);
}

.wh-contact-form textarea,
.wh-form-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.wh-contact-form input::placeholder,
.wh-contact-form textarea::placeholder {
  color: var(--wh-text-muted);
  opacity: 0.5;
}

/* Dark section form */
.wh-section--dark .wh-contact-form input,
.wh-section--dark .wh-contact-form textarea,
.wh-section--dark .wh-contact-form select {
  border-color: var(--wh-dark-border);
  color: var(--wh-cream);
  background-color: rgba(255, 255, 255, 0.04);
}

.wh-section--dark .wh-contact-form label {
  color: rgba(248, 246, 242, 0.6);
}

.wh-section--dark .wh-contact-form input:focus,
.wh-section--dark .wh-contact-form textarea:focus {
  border-color: var(--wh-teal);
  background-color: rgba(201, 169, 104, 0.04);
}

/* Form submit row */
.wh-form-submit {
  margin-top: 2rem;
}

/* Two-column form layout */
.wh-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Form success / error messages */
.wh-form-success {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--wh-teal);
  background-color: var(--wh-teal-glow);
  color: var(--wh-teal);
  font-size: 0.9375rem;
  font-weight: 500;
}

.wh-form-error {
  padding: 1rem 1.25rem;
  border-left: 3px solid #E05252;
  background-color: rgba(224, 82, 82, 0.08);
  color: #E05252;
  font-size: 0.9375rem;
}

/* Required indicator */
.wh-form-required {
  color: var(--wh-teal);
  margin-left: 0.2em;
}


/* ==========================================================================
   19. Single Post Content
   ========================================================================== */

.wh-single-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.wh-single-content h1 {
  font-family: var(--font-brand);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.15;
  color: var(--wh-dark);
  margin-bottom: 1.25rem;
}

.wh-single-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--wh-dark);
  margin-top: 3rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wh-single-content h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wh-text);
  margin-top: 2.25rem;
  margin-bottom: 0.875rem;
}

.wh-single-content h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wh-text);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.wh-single-content p {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.78;
  color: var(--wh-text);
  margin-bottom: 1.5rem;
}

.wh-single-content p:last-child {
  margin-bottom: 0;
}

.wh-single-content strong {
  font-weight: 600;
  color: var(--wh-text);
}

.wh-single-content em {
  font-style: italic;
}

.wh-single-content a {
  color: var(--wh-teal);
  text-decoration: underline;
  text-decoration-color: rgba(201, 169, 104, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--wh-transition);
}

.wh-single-content a:hover {
  text-decoration-color: var(--wh-teal);
}

.wh-single-content ul,
.wh-single-content ol {
  margin: 1.25rem 0 1.5rem 1.5rem;
  list-style: revert;
}

.wh-single-content li {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--wh-text);
  margin-bottom: 0.375rem;
}

.wh-single-content blockquote {
  border-left: 3px solid var(--wh-teal);
  padding: 0.5rem 0 0.5rem 2rem;
  margin: 2rem 0;
  font-family: var(--font-editorial);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--wh-text-muted);
  line-height: 1.7;
}

.wh-single-content blockquote p {
  font-family: var(--font-editorial);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--wh-text-muted);
  margin-bottom: 0;
}

.wh-single-content hr {
  border: none;
  border-top: 1px solid var(--wh-border);
  margin: 3rem 0;
}

.wh-single-content img {
  width: 100%;
  height: auto;
  margin: 2rem 0;
}

.wh-single-content figure {
  margin: 2rem 0;
}

.wh-single-content figcaption {
  font-size: 0.8125rem;
  color: var(--wh-text-muted);
  text-align: center;
  margin-top: 0.75rem;
  font-style: italic;
}

.wh-single-content code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875rem;
  background-color: var(--wh-cream-mid);
  padding: 0.15em 0.4em;
  border: 1px solid var(--wh-border);
  color: var(--wh-teal);
}

.wh-single-content pre {
  background-color: var(--wh-dark);
  color: var(--wh-cream);
  padding: 1.5rem;
  overflow-x: auto;
  margin: 2rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

.wh-single-content pre code {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
}

/* Single post meta */
.wh-single-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--wh-border);
}

.wh-single-meta__item {
  font-size: 0.8125rem;
  color: var(--wh-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wh-single-meta__category {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wh-teal);
}


/* ==========================================================================
   20. Empty State
   ========================================================================== */

.wh-articles-empty {
  text-align: center;
  padding: 6rem 1.5rem;
}

.wh-articles-empty__icon {
  font-size: 2rem;
  color: var(--wh-gold);
  opacity: 0.4;
  margin-bottom: 1.5rem;
  line-height: 1;
}

.wh-articles-empty__diamond {
  display: block;
  font-size: 1.5rem;
  color: var(--wh-gold);
  opacity: 0.35;
  margin: 0 auto 1.5rem;
}

.wh-articles-empty__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wh-text);
  margin-bottom: 0.875rem;
}

.wh-articles-empty__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--wh-text-muted);
  line-height: 1.65;
  max-width: 400px;
  margin: 0 auto 2rem;
}

/* Dark section empty state */
.wh-section--dark .wh-articles-empty__title {
  color: var(--wh-cream);
}


/* ==========================================================================
   21. Filter Buttons
   ========================================================================== */

.wh-articles-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.wh-articles-filter__btn {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--wh-border);
  color: var(--wh-text-muted);
  background-color: transparent;
  cursor: pointer;
  border-radius: var(--wh-radius);
  transition: all var(--wh-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.wh-articles-filter__btn:hover {
  border-color: var(--wh-teal);
  color: var(--wh-teal);
  background-color: var(--wh-teal-glow);
}

.wh-articles-filter__btn--active,
.wh-articles-filter__btn.active {
  background-color: var(--wh-teal);
  border-color: var(--wh-teal);
  color: var(--wh-dark);
  font-weight: 600;
}

.wh-articles-filter__btn--active:hover,
.wh-articles-filter__btn.active:hover {
  background-color: #E8CB7A;
  border-color: #E8CB7A;
  color: var(--wh-dark);
}

/* Dark section filter */
.wh-section--dark .wh-articles-filter__btn {
  border-color: var(--wh-dark-border);
  color: rgba(248, 246, 242, 0.5);
}

.wh-section--dark .wh-articles-filter__btn:hover {
  border-color: var(--wh-teal);
  color: var(--wh-teal);
  background-color: rgba(201, 169, 104, 0.08);
}


/* ==========================================================================
   22. Responsive Breakpoints
   ========================================================================== */

/* ---- Tablet: max-width 1024px ---- */
@media (max-width: 1024px) {

  /* Services grid: 2 cols */
  .wh-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Blog grid: 2 cols */
  .wh-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Featured article full width */
  .wh-article-card--featured {
    grid-column: span 2;
  }

  /* Two-col layout stacks */
  .wh-two-col {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .wh-two-col--reverse {
    direction: ltr;
  }

  /* Footer layout */
  .wh-site-footer .wh-container {
    flex-direction: column;
    gap: 2.5rem;
  }

  .wh-footer-brand {
    max-width: 100%;
  }

  /* Hero */
  .wh-hero {
    padding: calc(7rem + var(--wh-header-height)) 1.5rem 6rem;
  }

  /* Section padding */
  .wh-section {
    padding: 5rem 1.5rem;
  }

  /* Form row: single col on tablet */
  .wh-form-row {
    grid-template-columns: 1fr;
  }

  /* Origine 2 col → gap réduit */
  .wh-origin-grid {
    gap: 3rem;
  }

  /* Recherche 3 col → 1 col */
  .wh-research-grid {
    grid-template-columns: 1fr;
  }

  /* Écosystème 3 col → 1 col */
  .wh-ecosystem-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Mobile: max-width 720px ---- */
@media (max-width: 720px) {

  /* Header */
  :root {
    --wh-header-height: 60px;
  }

  .wh-site-header {
    padding: 0 1.25rem;
  }

  /* Mobile nav toggle */
  .wh-nav-toggle {
    display: flex;
  }

  /* (28/09/2026) Le menu n'est plus masque ici : il se replie en « trois
     lignes » via le bloc MENU REPLIE en fin de fichier. L'ancien bouton
     .wh-nav-toggle n'a jamais existe dans le header. */

  /* Mobile nav open state */
  .wh-site-header.wh-nav-open .wh-nav,
  .wh-site-header.wh-nav-open nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--wh-cream);
    padding: 1.5rem;
    gap: 1.25rem;
    border-top: 1px solid var(--wh-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    z-index: 99;
  }

  /* Hero */
  .wh-hero {
    padding: calc(5rem + var(--wh-header-height)) 1.25rem 4rem;
  }

  .wh-hero__title {
    letter-spacing: 0.14em;
    transform: scaleY(0.70);
  }

  /* Bandeaux pages — même réduction que le hero sur mobile */
  .wh-page-banner__title,
  .wh-page-banner h1,
  .wp-block-query-title.wh-page-banner__title,
  .wh-articles-hero__title {
    letter-spacing: 0.07em !important;
    transform: scaleY(0.70) !important;
  }

  .wh-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .wh-hero__cta .wh-btn {
    text-align: center;
    justify-content: center;
  }

  /* Page banners */
  .wh-page-banner,
  .wh-articles-hero {
    padding: calc(5rem + var(--wh-header-height)) 1.25rem 4rem;
  }

  .wh-page-banner__subtitle,
  .wh-articles-hero__subtitle {
    font-size: 1rem;
  }

  /* Sections */
  .wh-section {
    padding: 4rem 1.25rem;
  }

  .wh-section--compact {
    padding: 2.5rem 1.25rem;
  }

  /* Grids: 1 col */
  .wh-services-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .wh-blog-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .wh-article-card--featured {
    grid-column: span 1;
  }

  /* Footer */
  .wh-footer-nav {
    gap: 2rem;
  }

  .wh-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  /* Single content */
  .wh-single-content {
    padding: 2.5rem 1.25rem;
  }

  /* Contact form row: 1 col */
  .wh-form-row {
    grid-template-columns: 1fr;
  }

  /* Origine 2 col → 1 col */
  .wh-origin-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Recherche → 1 col */
  .wh-research-grid {
    grid-template-columns: 1fr;
  }

  /* Écosystème → 1 col */
  .wh-ecosystem-grid {
    grid-template-columns: 1fr;
  }

  /* Footer bottom → colonne */
  .wh-footer__bottom nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Pagination */
  .wh-pagination {
    gap: 0.375rem;
  }

  /* Reduce button padding */
  .wh-btn {
    padding: 0.75rem 2rem;
  }

  .wh-btn--lg {
    padding: 1rem 2.25rem;
  }

  /* Section header bottom spacing */
  .wh-section__header {
    margin-bottom: 2.5rem;
  }

  /* Filter buttons */
  .wh-articles-filter {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 2rem;
  }

  .wh-articles-filter__btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ---- Small mobile: max-width 480px ---- */
@media (max-width: 480px) {

  .wh-site-header .wp-block-site-tagline {
    display: none;
  }

  .wh-hero__logo img {
    max-height: 72px;
  }

  .wh-service-card {
    padding: 2rem 1.5rem;
  }

  .wh-single-content h1 {
    letter-spacing: 0.06em;
  }

  .wh-pagination a,
  .wh-pagination span {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }
}


/* ==========================================================================
   ADDITIONAL UTILITY CLASSES
   ========================================================================== */

/* Text utilities */
.wh-text-teal    { color: var(--wh-teal); }
.wh-text-gold    { color: var(--wh-gold); }
.wh-text-muted   { color: var(--wh-text-muted); }
.wh-text-cream   { color: var(--wh-cream); }
.wh-text-center  { text-align: center; }
.wh-text-left    { text-align: left; }
.wh-text-right   { text-align: right; }

/* Spacing utilities */
.wh-mt-0  { margin-top: 0 !important; }
.wh-mb-0  { margin-bottom: 0 !important; }
.wh-mt-1  { margin-top: 1rem; }
.wh-mb-1  { margin-bottom: 1rem; }
.wh-mt-2  { margin-top: 2rem; }
.wh-mb-2  { margin-bottom: 2rem; }
.wh-mt-3  { margin-top: 3rem; }
.wh-mb-3  { margin-bottom: 3rem; }
.wh-mt-4  { margin-top: 4rem; }
.wh-mb-4  { margin-bottom: 4rem; }

/* Display utilities */
.wh-flex        { display: flex; }
.wh-flex-center { display: flex; align-items: center; justify-content: center; }
.wh-flex-between { display: flex; align-items: center; justify-content: space-between; }
.wh-flex-col    { display: flex; flex-direction: column; }
.wh-gap-1       { gap: 1rem; }
.wh-gap-2       { gap: 2rem; }

/* Visibility */
.wh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Teal glow background utility */
.wh-bg-teal-glow {
  background-color: var(--wh-teal-glow);
}

/* Full-bleed separator line */
.wh-separator {
  width: 100%;
  height: 1px;
  background-color: var(--wh-border);
  margin: 2rem 0;
}

.wh-separator--teal {
  background-color: rgba(201, 169, 104, 0.2);
}

.wh-separator--dark {
  background-color: var(--wh-dark-border);
}

/* Teal accent tag/badge */
.wh-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.3em 0.75em;
  border: 1px solid rgba(201, 169, 104, 0.35);
  color: var(--wh-teal);
  background-color: var(--wh-teal-glow);
}


/* ==========================================================================
   ALIASES & MISSING UTILITIES
   (compatibilité templates PHP + HTML)
   ========================================================================== */

/* Articles grid — alias wh-blog-grid */
.wh-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1024px) {
  .wh-articles-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .wh-articles-grid { grid-template-columns: 1fr; }
}

/* Article card — cat/read aliases */
.wh-article-card__cat,
.wh-article-card__category {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--wh-teal);
  margin-bottom: 0.75rem;
}

.wh-article-card__cat a,
.wh-article-card__category a {
  color: inherit;
  text-decoration: none;
}

.wh-article-card__read-more,
.wh-article-card__read {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wh-teal);
  text-decoration: none;
  transition: letter-spacing 0.2s ease;
}

.wh-article-card__read-more:hover,
.wh-article-card__read:hover {
  letter-spacing: 0.18em;
}

.wh-article-card__date {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--wh-text-muted);
  letter-spacing: 0.04em;
}

/* Form field — alias wh-form-group */
.wh-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.wh-form-field label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wh-text-muted);
}

.wh-form-field input,
.wh-form-field textarea,
.wh-form-field select {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  background-color: var(--wh-white);
  border: 1px solid var(--wh-border);
  color: var(--wh-text);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.2s ease;
  border-radius: 0;
  outline: none;
}

.wh-form-field input:focus,
.wh-form-field textarea:focus {
  border-color: var(--wh-teal);
  box-shadow: 0 0 0 3px rgba(201, 169, 104, 0.08);
}

.wh-form-field textarea {
  resize: vertical;
  min-height: 140px;
}

/* Honeypot field */
.wh-form-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* Service card text — alias wh-service-card__desc */
.wh-service-card__text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--wh-text-muted);
  margin-top: 0.75rem;
}

/* Service card dark variant */
.wh-service-card--dark {
  background-color: var(--wh-dark-mid);
  border-color: rgba(255, 255, 255, 0.06);
}

.wh-service-card--dark .wh-service-card__title {
  color: var(--wh-cream);
}

.wh-service-card--dark .wh-service-card__text {
  color: rgba(248, 246, 242, 0.6);
}

/* Service card accent (CTA card) */
.wh-service-card--accent {
  background-color: rgba(201, 169, 104, 0.04);
  border-color: rgba(201, 169, 104, 0.25);
}

.wh-service-card--accent .wh-service-card__number {
  color: var(--wh-teal);
  opacity: 0.5;
  font-family: var(--font-body);
  font-size: 2rem;
}

.wh-service-card--accent:hover {
  border-color: rgba(201, 169, 104, 0.5);
}

/* Empty state */
.wh-empty-state {
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--wh-text-muted);
  padding: 4rem 2rem;
  grid-column: 1 / -1;
}

/* Article body container */
.wh-article-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wh-article-card__body .wh-article-card__meta {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--wh-border);
}

/* Image thumbnail — sizing handled by wh-article-card__img (aspect-ratio 16/9) */
.wh-article-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nav link (between posts) */
.wp-block-post-navigation-link { flex: 1; min-width: 0; align-self: flex-start; }
.wp-block-post-navigation-link a {
    display: flex; flex-direction: column;
    text-decoration: none; transition: opacity var(--wh-transition);
}
.wp-block-post-navigation-link a:hover { opacity: 0.75; }
.wp-block-post-navigation-link:last-child a { text-align: right; }
.post-navigation-link__label {
    display: block; font-family: var(--font-brand);
    font-size: 0.5625rem; font-weight: 400; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--wh-gold); margin-bottom: 0.5rem;
}
.post-navigation-link__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-family: var(--font-editorial); font-style: italic;
    font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--wh-text-muted);
    letter-spacing: 0; text-transform: none;
}
.wp-block-post-navigation-link a:hover .post-navigation-link__title {
    color: var(--wh-text);
}

/* Footer extras */
.wh-site-footer {
  padding: 5rem 1.5rem 3rem;
}

.wh-footer__inner {
  gap: 3rem;
  padding-bottom: 3rem;
  /* trait retiré : le séparateur unique du bas de footer est porté par .wh-footer__bottom
     (border-top inline dans parts/footer.html) — évite le doublon de deux traits parallèles. */
}

.wh-footer__brand {
  flex: 1;
  min-width: 240px;
}

.wh-footer__nav,
.wh-footer__contact {
  min-width: 160px;
}

.wh-footer__bottom {
  margin-top: 2rem;
}

/* Banner eyebrow/meta inside page-banner */
.wh-page-banner__meta-date {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(248, 246, 242, 0.5);
  letter-spacing: 0.04em;
}

/* Single article featured image */
.wh-single__featured {
  width: 100%;
  border-radius: 0;
  margin-bottom: 3rem;
}

.wh-single__featured img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* Highlight span — teal underline decoration */
.wh-highlight {
  position: relative;
  display: inline;
}

.wh-highlight::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--wh-teal);
  opacity: 0.5;
}

/* Skeleton loading state */
.wh-skeleton {
  background: linear-gradient(
    90deg,
    var(--wh-cream-mid) 25%,
    var(--wh-border) 50%,
    var(--wh-cream-mid) 75%
  );
  background-size: 200% 100%;
  animation: wh-skeleton-shimmer 1.5s infinite;
}

@keyframes wh-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Gold gradient text utility */
.wh-text-gold-gradient {
  background: linear-gradient(135deg, var(--wh-gold) 0%, #E8CB88 50%, var(--wh-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   23. Page DApp & Monnaie de Transition
   ========================================================================== */

/* Banner spécifique DApp */
.wh-page-banner--dapp {
  padding-bottom: 5rem;
}

.wh-dapp-title {
  display: block !important;
  visibility: visible !important;
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: 'Oxanium', sans-serif !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  font-weight: 200 !important;
  line-height: 1.0 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  transform: scaleY(0.65) !important;
  transform-origin: center center !important;
  color: transparent !important;
  background: linear-gradient(180deg, #FFF8DC 0%, #C9A968 40%, #E8CB7A 75%, #D4B06A 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.wh-dapp-collab {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(248, 246, 242, 0.4);
  letter-spacing: 0.04em;
  margin: 1.5rem 0 0;
}

.wh-dapp-collab__link {
  color: rgba(201, 169, 104, 0.75);
  text-decoration: none;
  transition: color var(--wh-transition);
}

.wh-dapp-collab__link:hover {
  color: var(--wh-gold);
}

/* ─── 2 colonnes intro ─── */
.wh-dapp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.wh-dapp-col {}

.wh-dapp-col__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: #F8F6F2;
  letter-spacing: 0.02em;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(201, 169, 104, 0.2);
}

.wh-dapp-col__text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  color: rgba(248, 246, 242, 0.6);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.wh-dapp-col__text:last-child {
  margin-bottom: 0;
}

/* ─── Liste principes ─── */
.wh-dapp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wh-dapp-list__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(248, 246, 242, 0.6);
  line-height: 1.65;
}

.wh-dapp-list__item strong {
  color: rgba(248, 246, 242, 0.85);
  font-weight: 500;
}

.wh-dapp-list__icon {
  color: rgba(201, 169, 104, 0.6);
  flex-shrink: 0;
  margin-top: 0.15em;
  font-size: 0.875rem;
}

/* ─── Grille architecture (3x2) ─── */
.wh-dapp-arch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
}

.wh-dapp-arch-card {
  background: #F8F6F2;
  border: 1px solid #DDD8CE;
  padding: 2.25rem 2rem;
  transition: border-color var(--wh-transition), box-shadow var(--wh-transition);
}

.wh-dapp-arch-card:hover {
  border-color: rgba(201, 169, 104, 0.5);
  box-shadow: 0 4px 24px rgba(201, 169, 104, 0.08);
}

.wh-dapp-arch-card__num {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(201, 169, 104, 0.7);
  margin-bottom: 1rem;
  display: block;
}

.wh-dapp-arch-card__title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wh-text);
  margin: 0 0 0.875rem;
  line-height: 1.3;
}

.wh-dapp-arch-card__text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--wh-text-muted);
  line-height: 1.75;
  margin: 0;
}

/* ─── Grille usages (2x3) ─── */
.wh-dapp-uses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 4rem;
}

.wh-dapp-use-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.wh-dapp-use-item__icon {
  font-size: 1.25rem;
  color: rgba(201, 169, 104, 0.6);
  flex-shrink: 0;
  margin-top: 0.1em;
  line-height: 1;
}

.wh-dapp-use-item__title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #F8F6F2;
  margin: 0 0 0.5rem;
}

.wh-dapp-use-item__text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(248, 246, 242, 0.55);
  line-height: 1.7;
  margin: 0;
}

/* ─── Roadmap ─── */
.wh-dapp-roadmap {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
}

.wh-dapp-phase {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  padding-bottom: 3rem;
}

.wh-dapp-phase--last {
  padding-bottom: 0;
}

.wh-dapp-phase__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wh-dapp-phase__num {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(201, 169, 104, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(201, 169, 104, 0.8);
  flex-shrink: 0;
}

.wh-dapp-phase__line {
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, rgba(201, 169, 104, 0.3), transparent);
  margin-top: 0.75rem;
}

.wh-dapp-phase__content {
  padding-top: 0.5rem;
}

.wh-dapp-phase__status {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 169, 104, 0.6);
  border: 1px solid rgba(201, 169, 104, 0.25);
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.875rem;
}

.wh-dapp-phase__status--active {
  color: #C9A968;
  border-color: rgba(201, 169, 104, 0.5);
  background-color: rgba(201, 169, 104, 0.07);
}

.wh-dapp-phase__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--wh-text);
  margin: 0 0 0.875rem;
}

.wh-dapp-phase__text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--wh-text-muted);
  line-height: 1.75;
  margin: 0 0 1.25rem;
}

.wh-dapp-phase__deliverables {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.wh-dapp-phase__deliverables li {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--wh-text-muted);
  padding-left: 1rem;
  position: relative;
}

.wh-dapp-phase__deliverables li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: rgba(201, 169, 104, 0.5);
  font-size: 0.75rem;
}

/* ─── Cartes partenaires ─── */
.wh-dapp-partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
}

.wh-dapp-partner-card {
  background: #F8F6F2;
  border: 1px solid #DDD8CE;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  transition: border-color var(--wh-transition);
}

.wh-dapp-partner-card:hover {
  border-color: rgba(201, 169, 104, 0.4);
}

.wh-dapp-partner-card__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(201, 169, 104, 0.75);
  display: block;
  margin-bottom: 0.75rem;
}

.wh-dapp-partner-card__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--wh-text);
  margin: 0 0 1rem;
}

.wh-dapp-partner-card__text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--wh-text-muted);
  line-height: 1.75;
  margin: 0;
  flex: 1;
}

.wh-dapp-partner-card__link {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B8913A;
  text-decoration: none;
  display: block;
  margin-top: 1.75rem;
  transition: color var(--wh-transition);
}

.wh-dapp-partner-card__link:hover {
  color: var(--wh-gold);
}

/* ─── Responsive DApp ─── */
@media (max-width: 1024px) {
  .wh-dapp-arch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wh-dapp-uses-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .wh-dapp-partners {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .wh-dapp-two-col {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .wh-dapp-arch-grid {
    grid-template-columns: 1fr;
  }
  .wh-dapp-roadmap {
    max-width: 100%;
  }
  .wh-dapp-phase {
    grid-template-columns: 56px 1fr;
    gap: 1.25rem;
  }
}


/* ==========================================================================
   24. Grille Origine — section 2 colonnes responsive
   ========================================================================== */

.wh-origin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.wh-origin-col {}

.wh-origin-text {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--wh-text);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.wh-origin-text:last-of-type {
  margin-bottom: 0;
}

.wh-origin-link {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B8913A;
  text-decoration: none;
  transition: color var(--wh-transition);
}

.wh-origin-link:hover {
  color: var(--wh-gold);
}


/* ==========================================================================
   24. Section Recherche expérimentale
   ========================================================================== */

.wh-section--research {
  background-color: #0A0F15;
  padding-top: 6rem;
  padding-bottom: 6rem;
  position: relative;
}

.wh-section--research::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,104,0.3), transparent);
}

.wh-section--research::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,104,0.3), transparent);
}

.wh-research-collab {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(248, 246, 242, 0.4);
  letter-spacing: 0.04em;
  margin: 0.5rem 0 1.5rem;
}

.wh-research-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
}

.wh-research-card {
  background-color: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(201, 169, 104, 0.12);
  padding: 2.5rem 2rem;
  transition: border-color var(--wh-transition), background-color var(--wh-transition);
}

.wh-research-card:hover {
  border-color: rgba(201, 169, 104, 0.3);
  background-color: rgba(201, 169, 104, 0.04);
}

.wh-research-card__icon {
  font-size: 1.75rem;
  color: rgba(201, 169, 104, 0.5);
  margin-bottom: 1.5rem;
  display: block;
  line-height: 1;
}

.wh-research-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: #F8F6F2;
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.wh-research-card__text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(248, 246, 242, 0.55);
  line-height: 1.75;
  margin: 0 0 1.5rem;
}

.wh-research-card__tag {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 169, 104, 0.5);
  display: block;
}


/* ==========================================================================
   25. Grille Écosystème Aubremont
   ========================================================================== */

.wh-ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
}

.wh-ecosystem-card {
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 2.5rem 2rem;
  text-decoration: none;
  transition: border-color var(--wh-transition), background-color var(--wh-transition);
}

.wh-ecosystem-card:hover {
  border-color: rgba(201, 169, 104, 0.25);
  background-color: rgba(201, 169, 104, 0.04);
}

.wh-ecosystem-card__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(201, 169, 104, 0.6);
  display: block;
  margin-bottom: 0.75rem;
}

.wh-ecosystem-card__title {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
  color: #F8F6F2;
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
}

.wh-ecosystem-card__text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(248, 246, 242, 0.5);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.wh-ecosystem-card__link {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(201, 169, 104, 0.6);
  display: block;
  margin-top: 1.75rem;
  transition: color var(--wh-transition);
}

.wh-ecosystem-card:hover .wh-ecosystem-card__link {
  color: var(--wh-gold);
}


/* ==========================================================================
   26. Citation hero
   ========================================================================== */

.wh-hero-quote {
  margin: 0;
  padding: 0;
  border: none;
}


/* Teal gradient text utility */
.wh-text-teal-gradient {
  background: linear-gradient(
    180deg,
    #FFF8DC 0%,
    #C9A968 40%,
    #E8CB7A 75%,
    #D4B06A 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   Titres de bandeau — ajustements typographiques par contexte
   ═══════════════════════════════════════════════════════════════ */

/* Articles (single) : taille réduite + letter-spacing resserré + interligne aéré */
body.single-post .wh-page-banner__title,
body.single-post .wh-page-banner h1,
body.single-post .wp-block-query-title.wh-page-banner__title {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem) !important;
  letter-spacing: 0.06em !important;
  line-height: 1.45 !important;
}

/* Pages intérieures (hors home) : taille conservée, letter-spacing resserré */
body.page:not(.home) .wh-page-banner__title,
body.page:not(.home) .wh-page-banner h1,
body.page:not(.home) .wp-block-query-title.wh-page-banner__title {
  letter-spacing: 0.10em !important;
}

/* ==========================================================================
   27. Articles CTA Final
   ========================================================================== */

.wh-articles-cta {
  background-color: var(--wh-dark);
  border-top: 1px solid rgba(201, 169, 104, 0.12);
  padding: 5rem 1.5rem 6rem;
  text-align: center;
}

.wh-articles-cta__inner {
  max-width: 680px;
  margin: 0 auto;
}

.wh-articles-cta__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(248, 246, 242, 0.85);
  line-height: 1.55;
  margin: 0 0 1.75rem;
  padding: 0;
  border: none;
  quotes: none;
}

.wh-articles-cta__quote::before,
.wh-articles-cta__quote::after { content: none; }

.wh-articles-cta__text {
  font-size: 0.9375rem;
  color: rgba(248, 246, 242, 0.55);
  line-height: 1.7;
  margin: 0 0 2.5rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.wh-articles-cta__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════
   MENU REPLIE (« trois lignes ») SOUS 1080px (28/09/2026)
   WordPress ne replie le menu que sous 600 px. Au-dessus, les liens ne
   tenaient plus sur une ligne : ils s'empilaient et le header fixe
   recouvrait le haut de la page.
   Web Harmonie : sous 720 px le theme masquait le menu pour un bouton
   .wh-nav-toggle qui n'a jamais existe dans le header : plus aucun menu.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1079.98px) {
	.wh-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.wh-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/* Menu ouvert : un flou ou une transformation sur le header fixe enferme
   le panneau plein ecran dans la hauteur du header. On les coupe tant
   que le menu est ouvert. */
html.has-modal-open .wp-site-blocks > header,
html.has-modal-open .wp-site-blocks > header * {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	filter: none !important;
	transform: none !important;
}

/* Panneau du menu ouvert : liens centres, lisibles au doigt. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center !important;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.6rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 0.95rem !important;
}

/* Sous-menus dans le panneau ouvert : a plat, centres, sans boite flottante. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	box-shadow: none !important;
	background: transparent !important;
	border: 0 !important;
	min-width: 0 !important;
	padding: 1rem 0 0 !important;
	gap: 1rem !important;
	align-items: center !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* (28/09/2026) Grilles Recherche et Ecosysteme : le passage a une colonne
   (bloc @media 1024px plus haut) etait ecrase par les regles de base
   ecrites APRES lui. Sur telephone la page mesurait 581 px et le
   navigateur la dezoomait. Meme regle, placee apres les regles de base. */
@media (max-width: 1024px) {
  .wh-origin-grid {
    gap: 3rem;
  }
  .wh-research-grid,
  .wh-ecosystem-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .wh-origin-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* (28/09/2026) Telephone : la grille de chiffres (colonnes en style en ligne)
   et le grand bouton « Demarrer la conversation » (sans retour a la ligne)
   depassaient de l'ecran. */
@media (max-width: 560px) {
  .wh-stats-grid { grid-template-columns: 1fr !important; }
  .wh-btn--lg { white-space: normal; padding-inline: 1.25rem; max-width: 100%; }
}

/* Icone du menu : trois barres (le dessin par defaut de WordPress n'en a que
   deux, moins reconnaissable). 28/09/2026. */
.wp-block-navigation__responsive-container-open svg { display: none !important; }
.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 22px;
	height: 16px;
	background:
		linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
		linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
		linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}