/*
Theme Name:   Empowerum
Theme URI:    https://empowerum.ch
Description:  Ordre de l'Architecture Humaine — child theme for Blocksy
Author:       Empowerum
Template:     blocksy
Version:      2.0.0
Text Domain:  empowerum-child
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* Colors */
  --color-ivoire:    #F6F2EB;
  --color-sable:     #DCCEBF;
  --color-noir:      #0D0D0F;
  --color-graphite:  #3A3A3F;
  --color-sauge:     #8D9A8E;
  --color-oxblood:   #552028;

  /* Typography */
  --font-heading: 'Caudex', Georgia, serif;
  --font-body:    'Cormorant Garamond', 'Georgia', serif;

  /* Font sizes */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1.125rem;  /* 18px */
  --text-md:   1.25rem;   /* 20px */
  --text-lg:   1.5rem;    /* 24px */
  --text-xl:   2rem;      /* 32px */
  --text-2xl:  2.75rem;   /* 44px */
  --text-3xl:  3.75rem;   /* 60px */
  --text-4xl:  5rem;      /* 80px */

  /* Spacing (base-8 grid) */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  2.5rem;
  --space-6:  3rem;
  --space-7:  3.5rem;
  --space-8:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-24: 12rem;

  /* Layout */
  --max-content: 720px;
  --max-wide:    1100px;
  --max-full:    1440px;

  /* Transitions */
  --ease-sacred: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Gold — Manifeste accent */
  --color-or: #C4A05A;
}

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

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-ivoire);
  color: var(--color-noir);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.75;
  margin: 0;
  padding: 0;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--color-noir);
  margin-top: 0;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(1.85rem, 6vw, var(--text-3xl));
  letter-spacing: clamp(0.06em, 0.8vw, 0.12em);
}

h2 {
  font-size: clamp(1.45rem, 4vw, var(--text-2xl));
  letter-spacing: clamp(0.05em, 0.6vw, 0.10em);
}

h3 {
  font-size: clamp(1.2rem, 3vw, var(--text-xl));
  letter-spacing: clamp(0.04em, 0.5vw, 0.08em);
}

h4 {
  font-size: clamp(1.05rem, 2.2vw, var(--text-lg));
  letter-spacing: 0.06em;
}

h5, h6 {
  font-size: clamp(1rem, 1.8vw, var(--text-md));
  letter-spacing: 0.05em;
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-graphite);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

p.lead {
  font-size: var(--text-lg);
  font-weight: 300;
  font-style: italic;
  color: var(--color-noir);
  line-height: 1.6;
}

blockquote {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-left: 2px solid var(--color-oxblood);
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  color: var(--color-noir);
}

blockquote cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sauge);
  margin-top: var(--space-2);
}

a {
  color: var(--color-noir);
  text-decoration: none;
  transition: color 0.3s var(--ease-sacred), opacity 0.3s var(--ease-sacred);
}

a:hover {
  color: var(--color-oxblood);
}

strong, b {
  font-weight: 600;
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-sauge);
}

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

.container {
  width: 100%;
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container--wide {
  max-width: var(--max-wide);
}

.container--full {
  max-width: var(--max-full);
}

section {
  padding-top: clamp(3.5rem, 8vw, var(--space-16));
  padding-bottom: clamp(3.5rem, 8vw, var(--space-16));
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

.site-header,
#masthead,
.ct-header {
  background-color: var(--color-ivoire) !important;
  border-bottom: 1px solid var(--color-sable);
  padding: var(--space-4) 0;
}

/* Blocksy nav overrides */
.ct-header .ct-container {
  max-width: var(--max-wide);
}

/* Logo image sizing */
.custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
}
.custom-logo {
  height: 40px;
  width: auto;
  max-width: 200px;
  display: block;
  transition: opacity 0.3s var(--ease-sacred);
}
.custom-logo-link:hover .custom-logo {
  opacity: 0.75;
}

.site-title,
.ct-site-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-md) !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-noir) !important;
}

/* Navigation links */
.ct-menu > li > a,
.main-navigation a,
nav a {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-graphite) !important;
  padding: var(--space-1) var(--space-2) !important;
  transition: color 0.3s var(--ease-sacred) !important;
}

.ct-menu > li > a:hover,
.main-navigation a:hover,
nav a:hover,
.ct-menu > li.current-menu-item > a {
  color: var(--color-oxblood) !important;
}

/* Mobile menu */
.ct-toggle-dropdown-mobile,
.ct-header-toggle {
  color: var(--color-noir) !important;
}

/* ============================================================
   HERO / BANNER
   ============================================================ */

.wp-block-cover,
.hero-section {
  background-color: var(--color-noir) !important;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.wp-block-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='150' fill='none' stroke='%23F6F2EB' stroke-width='0.5' opacity='0.06'/%3E%3Ccircle cx='200' cy='200' r='100' fill='none' stroke='%23F6F2EB' stroke-width='0.5' opacity='0.04'/%3E%3Cpath d='M200 50 L350 300 L50 300 Z' fill='none' stroke='%23F6F2EB' stroke-width='0.5' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.wp-block-cover .wp-block-cover__inner-container,
.hero-section .hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-content);
  padding: var(--space-8) var(--space-4);
}

.hero-tagline {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-sauge);
  display: block;
  margin-bottom: var(--space-6);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, var(--text-4xl));
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ivoire);
  line-height: 1.1;
  margin-bottom: var(--space-6);
}

.hero-quote {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-sable);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

/* ============================================================
   BUTTONS / CTAs
   ============================================================ */

.wp-block-button__link,
.btn,
button[type="submit"],
input[type="submit"] {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  background-color: var(--color-oxblood) !important;
  color: var(--color-ivoire) !important;
  border: 1px solid var(--color-oxblood) !important;
  border-radius: 0 !important;
  padding: var(--space-2) var(--space-6) !important;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-sacred), color 0.3s var(--ease-sacred) !important;
  display: inline-block;
}

.wp-block-button__link:hover,
.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: transparent !important;
  color: var(--color-oxblood) !important;
}

/* Ghost button variant */
.wp-block-button.is-style-outline .wp-block-button__link,
.btn--ghost {
  background-color: transparent !important;
  color: var(--color-ivoire) !important;
  border: 1px solid var(--color-sable) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.btn--ghost:hover {
  background-color: var(--color-sable) !important;
  color: var(--color-noir) !important;
}

/* ============================================================
   DIVIDERS & ORNAMENTS
   ============================================================ */

.sacred-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-8) auto;
  max-width: 300px;
}

.sacred-divider::before,
.sacred-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-sable);
}

.sacred-divider .ornament {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--color-sauge);
  text-transform: uppercase;
}

hr.wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-sable);
  margin: var(--space-8) auto;
  max-width: 120px;
  opacity: 1;
}

/* ============================================================
   SECTIONS & BLOCKS
   ============================================================ */

/* Light section (default) */
.section--light {
  background-color: var(--color-ivoire);
}

/* Warm section */
.section--sable {
  background-color: var(--color-sable);
}

/* Dark section */
.section--dark {
  background-color: var(--color-noir);
  color: var(--color-ivoire);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-ivoire);
}

.section--dark p {
  color: var(--color-sable);
}

/* Section label (uppercase small caps above heading) */
.section-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-sauge);
  display: block;
  margin-bottom: var(--space-3);
}

/* Centered text section */
.text-center {
  text-align: center;
}

/* ============================================================
   CARDS (Programmes / Services)
   ============================================================ */

.programme-card {
  background-color: var(--color-ivoire);
  border: 1px solid var(--color-sable);
  padding: var(--space-8);
  transition: border-color 0.3s var(--ease-sacred), transform 0.3s var(--ease-sacred);
}

.programme-card:hover {
  border-color: var(--color-oxblood);
  transform: translateY(-2px);
}

.programme-card .card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}

.programme-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.programme-card p {
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ============================================================
   WOOCOMMERCE
   ============================================================ */

.woocommerce-page .woocommerce,
.woocommerce {
  font-family: var(--font-body);
}

/* Product titles */
.woocommerce .woocommerce-loop-product__title,
.woocommerce h1.product_title {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-noir) !important;
}

/* Price */
.woocommerce .price,
.woocommerce .amount {
  font-family: var(--font-body) !important;
  font-size: var(--text-md) !important;
  color: var(--color-graphite) !important;
}

.woocommerce ins .amount {
  color: var(--color-oxblood) !important;
}

/* Add to cart */
.woocommerce .button,
.woocommerce button.button {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  background-color: var(--color-oxblood) !important;
  color: var(--color-ivoire) !important;
  border-radius: 0 !important;
  border: 1px solid var(--color-oxblood) !important;
  padding: var(--space-2) var(--space-6) !important;
  transition: background-color 0.3s var(--ease-sacred), color 0.3s var(--ease-sacred) !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover {
  background-color: transparent !important;
  color: var(--color-oxblood) !important;
}

/* Product card border */
.woocommerce ul.products li.product {
  border: 1px solid transparent;
  transition: border-color 0.3s var(--ease-sacred);
  padding: var(--space-4) !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--color-sable);
}

/* ============================================================
   FORMS (WPForms)
   ============================================================ */

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form textarea,
.wpforms-form select {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--color-sable) !important;
  border-radius: 0 !important;
  padding: var(--space-2) 0 !important;
  color: var(--color-noir) !important;
  transition: border-color 0.3s var(--ease-sacred) !important;
  width: 100% !important;
}

.wpforms-form input:focus,
.wpforms-form textarea:focus {
  outline: none !important;
  border-bottom-color: var(--color-oxblood) !important;
}

.wpforms-form label {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-graphite) !important;
}

.wpforms-form .wpforms-submit {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  background-color: var(--color-oxblood) !important;
  color: var(--color-ivoire) !important;
  border: 1px solid var(--color-oxblood) !important;
  border-radius: 0 !important;
  padding: var(--space-2) var(--space-6) !important;
}

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

.site-footer,
#colophon,
.ct-footer {
  background-color: var(--color-noir) !important;
  color: var(--color-sable);
  padding: var(--space-12) 0 var(--space-6);
  border-top: 1px solid var(--color-graphite);
}

.site-footer a,
#colophon a,
.ct-footer a {
  color: var(--color-sable) !important;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.site-footer a:hover,
#colophon a:hover,
.ct-footer a:hover {
  color: var(--color-ivoire) !important;
}

.site-footer .footer-brand {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ivoire);
}

.site-footer .footer-tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-sauge);
}

.footer-bottom {
  border-top: 1px solid var(--color-graphite);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-graphite);
  text-align: center;
}

/* ============================================================
   SACRED GEOMETRY BACKGROUNDS (utility classes)
   ============================================================ */

.bg-vesica {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='80' cy='100' r='60' fill='none' stroke='%230D0D0F' stroke-width='0.5' opacity='0.05'/%3E%3Ccircle cx='120' cy='100' r='60' fill='none' stroke='%230D0D0F' stroke-width='0.5' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

.bg-triangle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M150 30 L270 250 L30 250 Z' fill='none' stroke='%230D0D0F' stroke-width='0.5' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  background-repeat: repeat;
}

.bg-circle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Ccircle cx='150' cy='150' r='120' fill='none' stroke='%230D0D0F' stroke-width='0.5' opacity='0.04'/%3E%3Ccircle cx='150' cy='150' r='80' fill='none' stroke='%230D0D0F' stroke-width='0.5' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  background-repeat: repeat;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.8s var(--ease-sacred) forwards;
}

.animate-in--delay-1 { animation-delay: 0.1s; }
.animate-in--delay-2 { animation-delay: 0.2s; }
.animate-in--delay-3 { animation-delay: 0.35s; }

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

@media (max-width: 768px) {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

  section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }
}

@media (max-width: 480px) {
  :root {
    --text-base: 1rem;
  }

  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* ============================================================
   BLOCKSY OVERRIDES — Cleanup
   ============================================================ */

/* Remove Blocksy accent colors */
:root {
  --theme-palette-color-1: var(--color-oxblood) !important;
  --theme-palette-color-2: var(--color-noir) !important;
  --theme-palette-color-3: var(--color-graphite) !important;
  --theme-palette-color-4: var(--color-sauge) !important;
  --theme-palette-color-5: var(--color-sable) !important;
  --theme-palette-color-6: var(--color-ivoire) !important;
}

/* Remove rounded corners everywhere */
.ct-card,
.ct-widget,
[class*="ct-"] {
  border-radius: 0 !important;
}

/* Remove box shadows */
.ct-card,
.ct-widget {
  box-shadow: none !important;
}

/* ============================================================
   HOMEPAGE — HERO
   ============================================================ */

.emp-hero {
  position: relative;
  min-height: 100vh;
  background-color: var(--color-noir);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Photo variant — gradient veil */
.emp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.emp-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: saturate(0.50) contrast(1.12) brightness(0.45);
}

.emp-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    175deg,
    rgba(13, 13, 15, 0.20) 0%,
    rgba(13, 13, 15, 0.55) 50%,
    rgba(13, 13, 15, 0.80) 100%
  );
  pointer-events: none;
}

.emp-hero--photo .emp-hero__inner,
.emp-hero--photo .emp-hero__geometry {
  z-index: 2;
}

.emp-hero__geometry {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.emp-hero__geometry svg {
  width: min(700px, 90vw);
  height: min(700px, 90vw);
}

.emp-hero__inner {
  position: relative;
  z-index: 1;
  padding: clamp(var(--space-5), 8vw, var(--space-8)) clamp(var(--space-3), 5vw, var(--space-4));
  max-width: 680px;
}

.emp-hero__label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: clamp(0.15em, 2vw, 0.40em);
  text-transform: uppercase;
  color: var(--color-sauge);
  display: block;
  margin-bottom: var(--space-4);
}

.emp-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 10vw, 5.5rem);
  letter-spacing: clamp(0.06em, 2vw, 0.22em);
  text-transform: uppercase;
  color: var(--color-ivoire);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.emp-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  letter-spacing: 0.25em;
  color: var(--color-sauge);
  margin-bottom: var(--space-4);
}

.emp-hero__divider {
  color: var(--color-oxblood);
  font-size: var(--text-xs);
  margin: var(--space-4) auto;
  opacity: 0.6;
}

.emp-hero__quote {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.5vw, var(--text-lg));
  font-style: italic;
  color: var(--color-sable);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

.emp-hero__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   BUTTONS — emp- namespace
   ============================================================ */

.emp-btn {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-2) var(--space-6);
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-sacred), color 0.3s var(--ease-sacred), border-color 0.3s var(--ease-sacred);
  border: 1px solid transparent;
}

.emp-btn--primary {
  background-color: var(--color-oxblood);
  color: var(--color-ivoire);
  border-color: var(--color-oxblood);
}

.emp-btn--primary:hover {
  background-color: transparent;
  color: var(--color-oxblood);
}

.emp-btn--ghost {
  background-color: transparent;
  color: var(--color-sable);
  border-color: rgba(220, 206, 191, 0.4);
}

.emp-btn--ghost:hover {
  border-color: var(--color-sable);
  color: var(--color-ivoire);
}

.emp-btn--outline {
  background-color: transparent;
  color: var(--color-noir);
  border-color: var(--color-noir);
}

.emp-btn--outline:hover {
  background-color: var(--color-noir);
  color: var(--color-ivoire);
}

.emp-btn--lg {
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-sm);
}

/* ============================================================
   LAYOUT UTILITIES — emp- namespace
   ============================================================ */

.emp-container {
  width: 100%;
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.emp-container--wide {
  max-width: var(--max-wide);
}

.emp-text-center {
  text-align: center;
}

.emp-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-sauge);
  display: block;
  margin-bottom: var(--space-3);
}

.emp-lead {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 3vw, var(--text-lg));
  font-style: italic;
  font-weight: 300;
  color: var(--color-graphite);
  line-height: 1.65;
}

.emp-section-header {
  text-align: center;
  margin-bottom: clamp(var(--space-6), 6vw, var(--space-12));
}

.emp-section-header h2 {
  font-size: clamp(1.45rem, 4vw, var(--text-2xl));
}

/* ============================================================
   PILLARS SECTION
   ============================================================ */

.emp-pillars {
  padding: clamp(3.5rem, 8vw, var(--space-16)) 0;
  background-color: var(--color-ivoire);
}

.emp-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.emp-pillar {
  padding: var(--space-8);
  border: 1px solid var(--color-sable);
  transition: border-color 0.3s var(--ease-sacred), transform 0.3s var(--ease-sacred);
}

.emp-pillar:hover {
  border-color: var(--color-graphite);
  transform: translateY(-2px);
}

.emp-pillar--accent {
  background-color: var(--color-noir);
  border-color: var(--color-noir);
  color: var(--color-ivoire);
}

.emp-pillar--accent h3,
.emp-pillar--accent p,
.emp-pillar--accent .emp-pillar__icon {
  color: var(--color-ivoire);
}

.emp-pillar--accent p {
  color: var(--color-sable);
}

.emp-pillar__icon {
  color: var(--color-sauge);
  margin-bottom: var(--space-4);
}

.emp-pillar__tag {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-sauge);
  display: block;
  margin-bottom: var(--space-2);
}

.emp-pillar h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  text-transform: none;
  letter-spacing: 0.04em;
}

.emp-pillar p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ============================================================
   PROTOCOLES — Three editorial columns, full-bleed photo top
   ============================================================ */

.emp-protocoles {
  background-color: var(--color-ivoire);
  border-top: 1px solid var(--color-sable);
  border-bottom: 1px solid var(--color-sable);
}

.emp-protocoles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--color-sable);
}

.emp-protocole-card {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-sable);
}

/* Photo — full-bleed, fixed 4:3 ratio, cinematic crop */
.emp-protocole-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.emp-protocole-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: contrast(1.05) brightness(0.96) saturate(0.80);
  transition: transform 0.7s var(--ease-sacred), filter 0.7s var(--ease-sacred);
}

.emp-protocole-card:hover .emp-protocole-card__photo img {
  transform: scale(1.04);
  filter: contrast(1.08) brightness(0.90) saturate(0.70);
}

/* Text body */
.emp-protocole-card__body {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  border-top: 1px solid var(--color-sable);
}

/* Category label — oxblood, small caps */
.emp-protocole-card__category {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-oxblood);
}

/* Protocol title — underlined */
.emp-protocole-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 400;
  color: var(--color-noir);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  margin: 0;
}

/* Description */
.emp-protocole-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--color-graphite);
  line-height: 1.8;
  max-width: 260px;
  margin: 0 auto;
  flex: 1;
}

/* Outlined CTA button */
.emp-protocole-card__cta {
  display: inline-block;
  border: 1px solid var(--color-graphite);
  padding: 0.75rem var(--space-4);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-noir);
  text-decoration: none;
  margin-top: var(--space-4);
  transition: background-color 0.3s var(--ease-sacred),
              color 0.3s var(--ease-sacred),
              border-color 0.3s var(--ease-sacred);
}

.emp-protocole-card__cta:hover {
  background-color: var(--color-noir);
  color: var(--color-ivoire);
  border-color: var(--color-noir);
}

/* Responsive */
@media (max-width: 768px) {
  .emp-protocoles__grid {
    grid-template-columns: 1fr;
    border-left: none;
  }
  .emp-protocole-card {
    border-right: none;
    border-left: 1px solid var(--color-sable);
    border-bottom: 1px solid var(--color-sable);
  }
  .emp-protocole-card:first-child {
    border-top: 1px solid var(--color-sable);
  }
  .emp-protocole-card__photo {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */

.emp-about {
  padding: clamp(3.5rem, 8vw, var(--space-16)) 0;
  background-color: var(--color-ivoire);
}

.emp-about__inner {
  max-width: 640px;
}

.emp-about__inner h2 {
  margin-bottom: var(--space-4);
}

.emp-about__inner p {
  margin-bottom: var(--space-4);
}

.emp-about__inner .emp-btn {
  margin-top: var(--space-2);
}

/* ============================================================
   PROGRAMMES SECTION
   ============================================================ */

.emp-programmes {
  padding: clamp(3.5rem, 8vw, var(--space-16)) 0;
  background-color: var(--color-sable);
}

.emp-programmes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.emp-programme-card {
  background-color: var(--color-ivoire);
  padding: var(--space-6) var(--space-8);
  border: 1px solid transparent;
  transition: border-color 0.3s var(--ease-sacred);
}

.emp-programme-card:hover {
  border-color: var(--color-graphite);
}

.emp-programme-card--featured {
  background-color: var(--color-noir);
}

.emp-programme-card--featured h3,
.emp-programme-card--featured p {
  color: var(--color-ivoire);
}

.emp-programme-card--featured p {
  color: var(--color-sable);
}

.emp-programme-card--featured .emp-card-link {
  color: var(--color-sauge);
}

.emp-programme-card__tag {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-sauge);
  display: block;
  margin-bottom: var(--space-2);
}

.emp-programme-card__tag--featured {
  color: var(--color-oxblood);
}

.emp-programme-card h3 {
  font-size: var(--text-lg);
  text-transform: none;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.emp-programme-card p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.emp-card-link {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-graphite);
  text-decoration: none;
  transition: color 0.25s var(--ease-sacred);
}

.emp-card-link:hover {
  color: var(--color-oxblood);
}

/* ============================================================
   QUOTE SECTION
   ============================================================ */

.emp-quote {
  padding: clamp(3.5rem, 8vw, var(--space-16)) 0;
  background-color: var(--color-noir);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.emp-quote__geometry {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.emp-quote__inner {
  position: relative;
  z-index: 1;
}

.emp-quote__text {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, var(--text-2xl));
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ivoire);
  line-height: 1.3;
  margin-bottom: var(--space-3);
}

.emp-quote__author {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-sauge);
  letter-spacing: 0.15em;
}

/* ============================================================
   CTA SECTION
   ============================================================ */

.emp-cta {
  padding: clamp(3.5rem, 8vw, var(--space-16)) 0;
  background-color: var(--color-ivoire);
}

.emp-cta .emp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.emp-cta h2 {
  margin-bottom: var(--space-3);
  text-align: center;
}

.emp-cta .emp-lead {
  margin-bottom: var(--space-6);
  text-align: center;
  max-width: 520px;
}

/* ============================================================
   INNER PAGE TEMPLATES
   ============================================================ */

.emp-page {
  padding-top: 0;
}

.emp-page__header {
  background-color: var(--color-noir);
  padding: var(--space-16) 0 var(--space-12);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
}

.emp-page__header .emp-label {
  color: var(--color-sauge);
}

.emp-page__title {
  font-size: clamp(2rem, 5vw, var(--text-3xl));
  color: var(--color-ivoire);
  margin-bottom: 0;
}

.emp-page__divider {
  width: 40px;
  height: 1px;
  background-color: var(--color-oxblood);
  margin: var(--space-6) auto 0;
}

.emp-page__content {
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
}

.emp-page__content p,
.emp-page__content li {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-graphite);
}

.emp-page__content h2,
.emp-page__content h3 {
  margin-top: var(--space-8);
}

/* Photo-backed inner page header */
.emp-page__header--photo {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  justify-content: flex-end;
}

.emp-page__header-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.emp-page__header-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(0.50) contrast(1.12) brightness(0.42);
  display: block;
}

.emp-page__header--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    175deg,
    rgba(13, 13, 15, 0.15) 0%,
    rgba(13, 13, 15, 0.50) 45%,
    rgba(13, 13, 15, 0.78) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.emp-page__header--photo .emp-container {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-8);
}

/* ============================================================
   404 PAGE
   ============================================================ */

.emp-404 {
  padding: var(--space-24) var(--space-4);
}

.emp-404__geometry {
  margin-bottom: var(--space-6);
  opacity: 0.4;
}

.emp-404 h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.emp-404 .emp-lead {
  margin-bottom: var(--space-8);
}

/* ============================================================
   SECTION COLOUR VARIANTS
   ============================================================ */

.emp-section--sable { background-color: var(--color-sable); }
.emp-section--dark  { background-color: var(--color-noir); }

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

@media (max-width: 900px) {
  .emp-pillars__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .emp-programmes__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .emp-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .emp-hero__actions .emp-btn,
  .emp-btn--lg {
    width: 100%;
    text-align: center;
  }

  .emp-page__header {
    padding: var(--space-8) 0 var(--space-6);
  }
}

/* ============================================================
   FOOTER — branded
   ============================================================ */

.emp-footer {
  background-color: var(--color-noir);
  color: var(--color-sable);
  padding-top: var(--space-12);
}

.emp-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
  padding-bottom: var(--space-8);
}

.emp-footer__logo {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ivoire) !important;
  display: block;
  margin-bottom: var(--space-2);
}

.emp-footer__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-sauge);
  margin-bottom: var(--space-2);
}

.emp-footer__manifeste {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-graphite);
  margin-bottom: 0;
}

.emp-footer__nav {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.emp-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-end;
}

.emp-footer__menu li a {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-sable) !important;
  transition: color 0.3s var(--ease-sacred) !important;
}

.emp-footer__menu li a:hover {
  color: var(--color-ivoire) !important;
}

.emp-footer__bottom {
  border-top: 1px solid var(--color-graphite);
  padding: var(--space-3) 0;
}

.emp-footer__bottom .emp-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-graphite);
}

.emp-footer__bottom a {
  color: var(--color-graphite) !important;
}

.emp-footer__bottom a:hover {
  color: var(--color-sauge) !important;
}

.emp-footer__sep {
  color: var(--color-oxblood);
  opacity: 0.5;
}

/* ============================================================
   HEADER — transparent on homepage over dark hero
   ============================================================ */

.emp-is-front .ct-header,
.emp-is-front .site-header,
.emp-is-front #masthead {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.emp-is-front .site-title,
.emp-is-front .ct-site-title {
  color: var(--color-ivoire) !important;
}

/* Logo on dark front-page header: invert black→white, screen blend drops white bg */
.emp-is-front .custom-logo-link .custom-logo {
  filter: invert(1);
  mix-blend-mode: screen;
}

.emp-is-front .ct-menu > li > a,
.emp-is-front nav a {
  color: rgba(246, 242, 235, 0.75) !important;
}

.emp-is-front .ct-menu > li > a:hover,
.emp-is-front nav a:hover,
.emp-is-front .ct-menu > li.current-menu-item > a {
  color: var(--color-ivoire) !important;
}

.emp-is-front .ct-toggle-dropdown-mobile,
.emp-is-front .ct-header-toggle {
  color: var(--color-ivoire) !important;
}

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

@media (max-width: 768px) {
  .emp-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .emp-footer__nav {
    justify-content: flex-start;
  }

  .emp-footer__menu {
    align-items: flex-start;
  }

  .emp-footer__bottom .emp-container {
    flex-direction: column;
    gap: var(--space-1);
    text-align: center;
  }
}

/* ============================================================
   PHOTOGRAPHY TREATMENT SYSTEM
   Two modes derived from the @empowerum_ch Instagram grid:

   DEFAULT — Cinematic warm (L'Ordre mode)
   For medieval/architectural/Geneva imagery. Slight desaturation
   + contrast lift. Preserves the amber leather, stone grey,
   golden-hour tones. Does NOT strip color.
   filter: contrast(1.08) brightness(0.95) saturate(0.82)

   B&W FORGE — .emp-photo--bw (La Forge mode)
   For training equipment, raw physical content, concrete.
   Full grayscale, high contrast. Reserved for performance imagery.
   filter: grayscale(100%) contrast(1.12) brightness(0.90)
   ============================================================ */

.emp-photo {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.08) brightness(0.95) saturate(0.82);
  transition: filter 0.8s var(--ease-sacred);
}

.emp-photo:hover {
  filter: contrast(1.04) brightness(0.98) saturate(0.90);
}

/* B&W forge variant — training / gym / raw performance */
.emp-photo--bw {
  filter: grayscale(100%) contrast(1.12) brightness(0.90) !important;
}

.emp-photo--bw:hover {
  filter: grayscale(100%) contrast(1.06) brightness(0.94) sepia(0.10) !important;
}

/* Container that handles overflow + hover on the wrapper */
.emp-photo-wrap {
  overflow: hidden;
  display: block;
  position: relative;
}

.emp-photo-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) brightness(0.95) saturate(0.82);
  transition: filter 0.8s var(--ease-sacred), transform 1.2s var(--ease-sacred);
}

.emp-photo-wrap:hover img {
  filter: contrast(1.04) brightness(0.98) saturate(0.90) sepia(0.04);
  transform: scale(1.02);
}

/* B&W forge wrapper variant */
.emp-photo-wrap--bw img {
  filter: grayscale(100%) contrast(1.12) brightness(0.90) !important;
}

.emp-photo-wrap--bw:hover img {
  filter: grayscale(100%) contrast(1.06) brightness(0.94) sepia(0.10) !important;
  transform: scale(1.02);
}

/* ============================================================
   ABOUT SECTION — Photo split variant
   ============================================================ */

.emp-about--with-photo {
  padding: 0;
}

.emp-about__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}

.emp-about__photo {
  overflow: hidden;
  position: relative;
}

.emp-about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(100%) contrast(1.12) brightness(0.90);
  transition: filter 0.9s var(--ease-sacred), transform 1.4s var(--ease-sacred);
}

.emp-about__split:hover .emp-about__photo img {
  filter: grayscale(100%) contrast(1.06) brightness(0.94) sepia(0.08);
  transform: scale(1.03);
}

.emp-about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-16) clamp(var(--space-6), 6vw, var(--space-12));
}

.emp-about__content .emp-about__inner {
  max-width: 480px;
}

@media (max-width: 900px) {
  .emp-about__split {
    grid-template-columns: 1fr;
  }

  .emp-about__photo {
    min-height: 480px;
  }

  .emp-about__content {
    padding: var(--space-12) var(--space-4);
  }

  .emp-about__content .emp-about__inner {
    max-width: none;
  }
}

/* ============================================================
   PHOTO GRID — 3-col, Instagram 4:5 ratio
   ============================================================ */

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

.emp-photo-grid__item {
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.emp-photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) brightness(0.95) saturate(0.82);
  transition: filter 0.6s var(--ease-sacred), transform 0.9s var(--ease-sacred);
  display: block;
}

.emp-photo-grid__item:hover img {
  filter: contrast(1.04) brightness(0.98) saturate(0.90) sepia(0.04);
  transform: scale(1.04);
}

/* B&W photo grid variant — for forge/training galleries */
.emp-photo-grid--bw .emp-photo-grid__item img {
  filter: grayscale(100%) contrast(1.12) brightness(0.90) !important;
}

.emp-photo-grid--bw .emp-photo-grid__item:hover img {
  filter: grayscale(100%) contrast(1.06) brightness(0.96) sepia(0.10) !important;
}

@media (max-width: 600px) {
  .emp-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */

[data-animate] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease-sacred), transform 0.75s var(--ease-sacred);
}

[data-animate][data-delay="1"] { transition-delay: 0.12s; }
[data-animate][data-delay="2"] { transition-delay: 0.24s; }
[data-animate][data-delay="3"] { transition-delay: 0.38s; }
[data-animate][data-delay="4"] { transition-delay: 0.52s; }

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   PULL QUOTE — magazine style, thin oxblood rules
   ============================================================ */

.emp-pullquote {
  text-align: center;
  max-width: 700px;
  margin: var(--space-12) auto;
  padding: var(--space-8) var(--space-6);
  position: relative;
}

.emp-pullquote::before,
.emp-pullquote::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background-color: var(--color-oxblood);
}

.emp-pullquote::before { top: 0; }
.emp-pullquote::after  { bottom: 0; }

.emp-pullquote__text {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3vw, var(--text-xl));
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-noir);
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

.emp-pullquote--light .emp-pullquote__text {
  color: var(--color-ivoire);
}

.emp-pullquote--light::before,
.emp-pullquote--light::after {
  background-color: rgba(85, 32, 40, 0.6);
}

.emp-pullquote__cite {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: normal;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-sauge);
}

/* ============================================================
   FINE FRAME UTILITY — hairline double border
   ============================================================ */

.emp-frame {
  position: relative;
}

.emp-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-sable);
  pointer-events: none;
  z-index: 1;
}

.emp-frame--inner::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 0.5px solid rgba(220, 206, 191, 0.35);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   WOOCOMMERCE — Photography treatment (cinematic warm)
   Products carry the Order aesthetic — warm, not desaturated.
   ============================================================ */

.woocommerce ul.products li.product .wp-post-image,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .flex-viewport img {
  filter: contrast(1.08) brightness(0.95) saturate(0.82) !important;
  transition: filter 0.6s var(--ease-sacred) !important;
}

.woocommerce ul.products li.product:hover .wp-post-image {
  filter: contrast(1.04) brightness(0.98) saturate(0.90) !important;
}

/* ============================================================
   HERO — Photo background variant
   Use .emp-hero--photo when a real photo backs the hero.
   The .emp-hero__bg wraps the <img>, the gradient overlay
   ensures text legibility without crushing the photography.
   ============================================================ */

.emp-hero--photo {
  position: relative;
}

.emp-hero--photo .emp-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.emp-hero--photo .emp-hero__bg img,
.emp-hero--photo .emp-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.65) contrast(1.10) brightness(0.52);
  display: block;
}

.emp-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 15, 0.35) 0%,
    rgba(13, 13, 15, 0.45) 40%,
    rgba(13, 13, 15, 0.75) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.emp-hero--photo .emp-hero__inner {
  z-index: 2;
}

/* ============================================================
   HERO — Video background variant
   Same as .emp-hero--photo but for <video autoplay muted loop>.
   Usage: add .emp-hero--photo, place <video> inside .emp-hero__bg
   ============================================================ */

.emp-hero__bg video {
  pointer-events: none;
}

/* ============================================================
   TESTIMONIAL COMPONENT
   Matches the @empowerum_ch Instagram quote card format:
   dark bg / italic Cormorant quote / thin rule / protocol label
   ============================================================ */

.emp-testimonials {
  background-color: var(--color-noir);
  padding: clamp(3.5rem, 8vw, var(--space-16)) 0;
}

.emp-testimonials .emp-section-header h2 {
  color: var(--color-ivoire);
}

.emp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background-color: rgba(58, 58, 63, 0.4);
  margin-top: var(--space-12);
}

.emp-testimonial {
  background-color: var(--color-noir);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  margin: 0;
}

.emp-testimonial__quote {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.2vw, var(--text-lg));
  font-style: italic;
  font-weight: 300;
  color: var(--color-ivoire);
  line-height: 1.6;
  border: none;
  border-left: none;
  padding: 0;
  margin: 0 auto var(--space-6);
  letter-spacing: 0.01em;
  max-width: 520px;
  position: relative;
}

.emp-testimonial__quote::before {
  content: '\201C';
  font-size: 2.5em;
  line-height: 0;
  vertical-align: -0.35em;
  color: var(--color-oxblood);
  opacity: 0.55;
  margin-right: 0.08em;
  font-style: normal;
}

.emp-testimonial__credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.emp-testimonial__rule {
  display: block;
  width: 36px;
  height: 1px;
  background-color: rgba(220, 206, 191, 0.3);
  margin: 0 auto var(--space-1);
}

.emp-testimonial__author {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-sable);
  letter-spacing: 0.08em;
}

.emp-testimonial__protocol {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-sauge);
}

/* Single featured testimonial — centered, wider */
.emp-testimonial--featured {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
}

.emp-testimonial--featured .emp-testimonial__quote {
  font-size: clamp(1.3rem, 3vw, var(--text-xl));
  max-width: none;
}

@media (max-width: 768px) {
  .emp-testimonial {
    padding: var(--space-8) var(--space-4);
  }
}

/* ============================================================
   MATERIAL TEXTURES
   Three genuine materials from the brand's arsenal, layered
   as near-invisible ambient backgrounds.

   ID 904 — parchment  → all ivoire/light zones
   ID 903 — chainmail  → all noir/dark zones
   ID 902 — stone wall → sable/warm zones
   ============================================================ */

/* ─── Shared pseudo-element base ─────────────────────────── */
.emp-pillars::before,
.emp-about::before,
.emp-cta::before,
.emp-testimonials::before,
.emp-quote::before,
.emp-footer::before,
.emp-programmes::before,
.emp-pillar--accent::before,
.emp-programme-card--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ─── Enable positioning on target sections ──────────────── */
.emp-pillars,
.emp-about,
.emp-cta,
.emp-testimonials,
.emp-footer,
.emp-programmes {
  position: relative;
}

.emp-pillar--accent,
.emp-programme-card--featured {
  position: relative;
  overflow: hidden;
}

/* ─── Lift all direct content above texture layer ────────── */
.emp-pillars > *,
.emp-about > *,
.emp-cta > *,
.emp-testimonials > *,
.emp-quote > *,
.emp-footer > *,
.emp-programmes > *,
.emp-pillar--accent > *,
.emp-programme-card--featured > * {
  position: relative;
  z-index: 1;
}

/* ─── SCEAU DE CIRE — Ivoire light zones ─────────────────── */
.emp-pillars::before,
.emp-about::before,
.emp-cta::before {
  background-image: url('https://empowerum.ch/wp-content/uploads/2026/05/Sceau-cire-fond-site-MODIF.jpg');
  background-size: cover;
  background-position: center 50%;
  opacity: 0.18;
}

/* ─── MAILLE-CUIR — Noir dark zones ──────────────────────── */
.emp-testimonials::before,
.emp-quote::before,
.emp-footer::before {
  background-image: url('https://empowerum.ch/wp-content/uploads/2026/05/MAILLE-CUIR-SITE.jpg');
  background-size: cover;
  background-position: center 60%;
  opacity: 0.12;
}

/* Maille-cuir on dark accent cards — zoomed crop */
.emp-pillar--accent::before,
.emp-programme-card--featured::before {
  background-image: url('https://empowerum.ch/wp-content/uploads/2026/05/MAILLE-CUIR-SITE.jpg');
  background-size: 180%;
  background-position: 50% 55%;
  opacity: 0.14;
}

/* ─── MOINE-ARCHE — Sable warm zone ──────────────────────── */
.emp-programmes::before {
  background-image: url('https://empowerum.ch/wp-content/uploads/2026/05/MOINE-ARCHE-FAUCIGNY.jpg');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.12;
}

/* ─── MANIFESTE — Matières sur fond noir ─────────────────── */

/* Shared pseudo-element base for manifeste sections */
.emp-manifeste__thesis::before,
.emp-manifeste__pillar::before,
.emp-manifeste__closing::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* STONE — Pierre macro : thèse d'ouverture + piliers structurels */
.emp-manifeste__thesis::before,
.emp-manifeste__pillar:not(.emp-manifeste__pillar--alt)::before {
  background-image: url('https://empowerum.ch/wp-content/uploads/2026/05/IMG_0836-scaled.jpg');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.05;
}

/* LEATHER / MAILLE — Pilier alternatif (Le Moine-Soldat) */
.emp-manifeste__pillar--alt::before {
  background-image: url('https://empowerum.ch/wp-content/uploads/2026/05/MAILLE-CUIR-SITE.jpg');
  background-size: cover;
  background-position: center 55%;
  opacity: 0.08;
}

/* SCEAU — Clôture & conclusion */
.emp-manifeste__closing::before {
  background-image: url('https://empowerum.ch/wp-content/uploads/2026/05/Sceau-cire-fond-site-MODIF.jpg');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.07;
}

/* ============================================================
   FORMULAIRES DE CONTACT & LEAD MAGNET
   ============================================================ */

.emp-contact-form {
  max-width: 680px;
  margin: var(--space-8) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.emp-guide-form {
  max-width: 520px;
}

.emp-contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.emp-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.emp-contact-form__field label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-graphite);
  font-family: var(--font-heading);
}

.emp-req {
  color: var(--color-oxblood);
}

.emp-contact-form__field input,
.emp-contact-form__field select,
.emp-contact-form__field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-sable);
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-noir);
  outline: none;
  transition: border-color 0.2s ease;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.emp-contact-form__field input:focus,
.emp-contact-form__field select:focus,
.emp-contact-form__field textarea:focus {
  border-bottom-color: var(--color-graphite);
}

.emp-contact-form__field input::placeholder,
.emp-contact-form__field textarea::placeholder {
  color: var(--color-sable);
  font-style: italic;
}

.emp-contact-form__field textarea {
  resize: vertical;
  min-height: 120px;
}

.emp-contact-form__field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233A3A3F' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: var(--space-6);
}

.emp-contact-form__error {
  color: var(--color-oxblood);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
}

.emp-form-success {
  max-width: 520px;
  margin: var(--space-8) auto;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-sable);
}

.emp-form-success .emp-lead {
  margin-bottom: var(--space-4);
}

/* Responsive */
@media (max-width: 600px) {
  .emp-contact-form__row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MEMBERSHIP — Dashboard, badges, offres, restriction
   ============================================================ */

/* --- emp-btn--sm variant ----------------------------------- */
.emp-btn--sm {
  padding: 0.38rem 0.9rem;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Dashboard container ---------------------------------- */
.emp-account {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
}

.emp-account__welcome {
  text-align: center;
  margin-bottom: var(--space-10);
}

.emp-account__name {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: var(--space-3) 0 var(--space-4);
}

/* --- Membership badge ------------------------------------- */
.emp-account__badge {
  display: inline-block;
  padding: 0.28rem 1rem;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  border: 1px solid currentColor;
}

.emp-account__badge--registre      { color: var(--color-sauge); }
.emp-account__badge--transmutation { color: var(--color-graphite); }
.emp-account__badge--epure         { color: var(--color-oxblood); }
.emp-account__badge--none          { color: var(--color-sable); }

/* --- Account nav links ------------------------------------ */
.emp-account__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-sable);
}

.emp-account__link {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-sable);
  text-decoration: none;
  color: var(--color-noir);
  transition: background 0.2s ease;
}

.emp-account__link:hover {
  background-color: rgba(220, 206, 191, 0.15);
}

.emp-account__link--cta {
  border: 1px solid var(--color-sable);
  margin-top: var(--space-4);
  padding: var(--space-5);
}

.emp-account__link--cta:hover {
  background-color: var(--color-noir);
  color: var(--color-ivoire);
  border-color: var(--color-noir);
}

.emp-account__link-icon {
  font-size: 1rem;
  color: var(--color-sauge);
  flex-shrink: 0;
  width: 1.4rem;
  text-align: center;
}

.emp-account__link-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.emp-account__link-label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}

.emp-account__link-desc {
  font-size: 0.82rem;
  color: var(--color-sauge);
}

.emp-account__logout {
  margin-top: var(--space-8);
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

.emp-account__logout a {
  color: var(--color-sauge);
  text-decoration: none;
}

.emp-account__logout a:hover {
  color: var(--color-graphite);
}

/* --- Restricted content notice ---------------------------- */
.emp-restricted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-sable);
  text-align: center;
  background-color: rgba(246, 242, 235, 0.5);
}

.emp-restricted__icon {
  font-size: 1.4rem;
  color: var(--color-sauge);
}

.emp-restricted__msg {
  margin: 0;
  font-style: italic;
  color: var(--color-graphite);
}

/* --- Espace Membre — offres grid -------------------------- */
.emp-offres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: var(--space-8) 0;
}

.emp-offre-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  border: 1px solid var(--color-sable);
  position: relative;
  background-color: var(--color-ivoire);
  transition: box-shadow 0.25s ease;
}

.emp-offre-card:hover {
  box-shadow: 0 4px 24px rgba(13, 13, 15, 0.08);
}

.emp-offre-card--featured {
  border-color: var(--color-graphite);
  background-color: var(--color-noir);
  color: var(--color-ivoire);
}

.emp-offre-card--active {
  border-color: var(--color-oxblood);
}

.emp-offre-card__badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-graphite);
  color: var(--color-ivoire);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  padding: 0.22rem 0.8rem;
  white-space: nowrap;
}

.emp-offre-card__badge--active {
  background-color: var(--color-oxblood);
}

.emp-offre-card__title {
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: var(--space-3) 0 0;
}

.emp-offre-card--featured .emp-offre-card__title {
  color: var(--color-ivoire);
}

.emp-offre-card__price {
  margin: 0;
  font-family: var(--font-heading);
}

.emp-offre-card__price span {
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.emp-offre-card--featured .emp-offre-card__price span {
  color: var(--color-ivoire);
}

.emp-offre-card__perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.emp-offre-card__perks li {
  font-size: 0.85rem;
  color: var(--color-graphite);
  padding-left: var(--space-4);
  position: relative;
}

.emp-offre-card__perks li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-sable);
}

.emp-offre-card--featured .emp-offre-card__perks li {
  color: rgba(246, 242, 235, 0.75);
}

.emp-offre-card--featured .emp-offre-card__perks li::before {
  color: var(--color-sauge);
}

.emp-offre-card__owned {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-sauge);
  font-family: var(--font-heading);
}

@media (max-width: 768px) {
  .emp-offres {
    grid-template-columns: 1fr;
  }
  .emp-account {
    padding: var(--space-8) var(--space-4);
  }
}

/* ============================================================
   TARIFS — Grille de prix publique
   ============================================================ */

.emp-tarifs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin: var(--space-8) 0 var(--space-4);
}

.emp-tarif-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-sable);
  background: var(--color-ivoire);
  transition: box-shadow 0.25s;
}

.emp-tarif-card:hover {
  box-shadow: 0 4px 20px rgba(13, 13, 15, 0.07);
}

.emp-tarif-card--featured {
  border-color: var(--color-graphite);
  background: var(--color-noir);
  color: var(--color-ivoire);
}

.emp-tarif-card--anchor {
  border-color: var(--color-oxblood);
}

.emp-tarif-card__tag {
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  color: var(--color-sauge);
}

.emp-tarif-card--anchor .emp-tarif-card__tag { color: var(--color-oxblood); }
.emp-tarif-card--featured .emp-tarif-card__tag { color: var(--color-sable); }

.emp-tarif-card__title {
  font-size: 0.95rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0;
}

.emp-tarif-card--featured .emp-tarif-card__title { color: var(--color-ivoire); }

.emp-tarif-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  border-top: 1px solid var(--color-sable);
  padding-top: var(--space-4);
}

.emp-tarif-card--featured .emp-tarif-card__price { border-color: rgba(246,242,235,0.2); }

.emp-tarif-card__amount {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  letter-spacing: -0.02em;
}

.emp-tarif-card__amount--devis {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.emp-tarif-card__sub {
  font-size: 0.75rem;
  color: var(--color-sauge);
}

.emp-tarif-card--featured .emp-tarif-card__amount { color: var(--color-ivoire); }
.emp-tarif-card--featured .emp-tarif-card__sub { color: rgba(246,242,235,0.55); }

.emp-tarif-card__perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.emp-tarif-card__perks li {
  font-size: 0.82rem;
  color: var(--color-graphite);
  padding-left: var(--space-4);
  position: relative;
}

.emp-tarif-card__perks li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-sable);
}

.emp-tarif-card--featured .emp-tarif-card__perks li { color: rgba(246,242,235,0.70); }
.emp-tarif-card--featured .emp-tarif-card__perks li::before { color: var(--color-sauge); }

.emp-tarifs__note {
  font-size: 0.72rem;
  color: var(--color-sauge);
  font-style: italic;
  text-align: center;
  margin: 0;
}

@media (max-width: 900px) {
  .emp-tarifs {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ============================================================
   QUIZ ROUTEUR
   ============================================================ */

.emp-quiz {
  max-width: 640px;
  margin: var(--space-8) auto;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-sable);
  background: var(--color-ivoire);
}

.emp-quiz__progress {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-7);
}

.emp-quiz__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-sable);
  transition: background 0.3s ease;
}

.emp-quiz__dot.is-active {
  background: var(--color-graphite);
}

.emp-quiz__question {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: var(--space-6);
  color: var(--color-noir);
}

.emp-quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.emp-quiz__opt {
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-sable);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-graphite);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.emp-quiz__opt:hover {
  border-color: var(--color-graphite);
  color: var(--color-noir);
}

.emp-quiz__opt.is-selected {
  border-color: var(--color-noir);
  background: var(--color-noir);
  color: var(--color-ivoire);
}

.emp-quiz__result {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.emp-quiz__result-label {
  font-size: 0.60rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  color: var(--color-oxblood);
  margin: 0;
}

.emp-quiz__result-title {
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.emp-quiz__result-desc {
  font-size: 0.9rem;
  color: var(--color-graphite);
  max-width: 420px;
  font-style: italic;
  margin: 0;
}

.emp-quiz__restart {
  background: none;
  border: none;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-sauge);
  cursor: pointer;
  font-family: var(--font-heading);
  padding: 0;
  margin-top: var(--space-2);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.emp-quiz__restart:hover { color: var(--color-graphite); }

/* ============================================================
   TÉMOIGNAGES — grille avec photo optionnelle
   ============================================================ */

.emp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.emp-testimonial {
  margin: 0;
  padding: var(--space-7) var(--space-6);
  border: 1px solid rgba(246, 242, 235, 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.emp-testimonial__photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.emp-testimonial__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.6) contrast(1.05);
}

.emp-testimonial__quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-ivoire);
  margin: 0;
  quotes: '\201C' '\201D';
}

.emp-testimonial__quote::before { content: open-quote; }
.emp-testimonial__quote::after  { content: close-quote; }

.emp-testimonial__credit {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: auto;
}

.emp-testimonial__rule {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-sauge);
  margin-bottom: var(--space-2);
}

.emp-testimonial__author {
  font-family: var(--font-heading);
  font-size: 0.70rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ivoire);
}

.emp-testimonial__protocol {
  font-size: 0.70rem;
  color: var(--color-sauge);
  letter-spacing: 0.10em;
}

/* ─── CTA section — double action ─────────────────────────────── */

.emp-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.emp-cta__sub {
  font-size: 0.82rem;
  color: var(--color-sauge);
  font-style: italic;
  margin-top: var(--space-2);
}

/* ─── Mobile — reduce opacity slightly on small screens ─────── */
@media (max-width: 768px) {
  .emp-pillars::before,
  .emp-about::before,
  .emp-cta::before { opacity: 0.12; }

  .emp-testimonials::before,
  .emp-quote::before,
  .emp-footer::before { opacity: 0.09; }

  .emp-programmes::before { opacity: 0.09; }
}

/* ─── Desktop — parallax sur zones claires ──────────────── */
@media (min-width: 769px) {
  .emp-pillars::before,
  .emp-about::before,
  .emp-cta::before {
    background-attachment: fixed;
  }
}

/* ============================================================
   NAV — BOUTON ACCÈS CLIENT
   ============================================================ */

.emp-nav__client-item {
  display: flex;
  align-items: center;
  margin-left: var(--space-4);
}

.emp-nav__client-btn {
  display: inline-block;
  padding: 0.42rem 1.1rem;
  border: 1px solid var(--color-graphite);
  font-size: 0.60rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  color: var(--color-graphite);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.emp-nav__client-btn:hover {
  background-color: var(--color-noir);
  color: var(--color-ivoire);
  border-color: var(--color-noir);
}

/* Sur la page d'accueil — header transparent sur fond sombre */
.emp-is-front .emp-nav__client-btn {
  border-color: rgba(246, 242, 235, 0.6);
  color: var(--color-ivoire);
}

.emp-is-front .emp-nav__client-btn:hover {
  background-color: var(--color-ivoire);
  color: var(--color-noir);
  border-color: var(--color-ivoire);
}

/* Mobile — masquer sur petit écran (nav burger) */
@media (max-width: 900px) {
  .emp-nav__client-item {
    margin-left: 0;
  }
  .emp-nav__client-btn {
    border: none;
    padding: 0.5rem 0;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--color-graphite);
  }
  .emp-is-front .emp-nav__client-btn {
    color: var(--color-graphite);
    border: none;
  }
}

/* ============================================================
   RESPONSIVE — Consolidation v1.9
   All device-specific corrections in one place.
   Breakpoints: 900px · 768px · 600px · 480px
   ============================================================ */

/* ─── 900px — Tablet landscape ─────────────────────────── */
@media (max-width: 900px) {
  /* About section: reduce stacked photo height */
  .emp-about__photo {
    min-height: 380px;
  }

  /* Programme grid: stack to 1 col */
  .emp-programmes__grid {
    grid-template-columns: 1fr;
  }
}

/* ─── 768px — Tablet portrait ──────────────────────────── */
@media (max-width: 768px) {
  /* Touch targets: quiz options */
  .emp-quiz__opt {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Reduce quiz padding */
  .emp-quiz {
    padding: var(--space-6) var(--space-4);
    margin: var(--space-6) auto;
  }

  /* Account dashboard */
  .emp-account {
    padding: var(--space-8) var(--space-3);
  }
}

/* ─── 600px — Mobile landscape / large phone ───────────── */
@media (max-width: 600px) {
  /* emp-container: tighter gutters */
  .emp-container,
  .emp-container--wide {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  /* About: compact photo on small screens */
  .emp-about__photo {
    min-height: 260px;
  }

  /* About content: less top/bottom padding when stacked */
  .emp-about__content {
    padding: var(--space-8) var(--space-3);
  }

  /* Protocole cards: tighter body padding */
  .emp-protocole-card__body {
    padding: var(--space-5) var(--space-4);
  }

  /* CTA actions: stack full-width */
  .emp-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .emp-cta__actions .emp-btn {
    width: 100%;
    text-align: center;
  }

  /* Testimonials: single column */
  .emp-testimonials-grid {
    grid-template-columns: 1fr;
  }
  .emp-testimonial {
    padding: var(--space-6) var(--space-4);
  }

  /* Page header: compact on small screens */
  .emp-page__header--photo {
    min-height: 280px;
  }

  /* Section header: tighter */
  .emp-section-header {
    padding: 0 var(--space-3);
  }
}

/* ─── 480px — Small phone (SE, fold, etc.) ─────────────── */
@media (max-width: 480px) {
  /* Base font slightly smaller */
  :root {
    --text-base: 1rem;
  }

  /* Hero: reduce geometry SVG on tiny screens */
  .emp-hero__geometry svg {
    width: 90vw;
    height: 90vw;
  }

  /* Programmes cards: reduce padding */
  .emp-programme-card {
    padding: var(--space-5) var(--space-4);
  }

  /* Tarifs: always single column */
  .emp-tarifs {
    grid-template-columns: 1fr;
  }

  /* Form row: always single column */
  .emp-contact-form__row {
    grid-template-columns: 1fr;
  }

  /* Footer inner: reduce gap */
  .emp-footer__inner {
    gap: var(--space-5);
  }
}

/* ============================================================
   MANIFESTE PAGE — Doctrine templière, narration immersive
   Utilisé exclusivement par page-manifeste.php
   Version: 2.0.0
   ============================================================ */

/* Wrapper — fond noir total pour l'immersion */
.emp-manifeste {
  background-color: var(--color-noir);
}

/* ─── Thesis d'ouverture ────────────────────────────────── */
.emp-manifeste__thesis {
  position: relative;
  padding: clamp(var(--space-12), 10vw, var(--space-24)) 0;
  border-bottom: 1px solid rgba(30, 28, 26, 0.9);
  text-align: center;
}

/* Lift inner content above texture ::before layers */
.emp-manifeste__thesis > .emp-container,
.emp-manifeste__pillar > .emp-container,
.emp-manifeste__closing > .emp-container {
  position: relative;
  z-index: 1;
}

.emp-manifeste__thesis p {
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(240, 235, 224, 0.82);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto;
}

/* ─── Séparateur ornemental ─────────────────────────────── */
.emp-manifeste__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  background-color: var(--color-noir);
}

.emp-manifeste__ornament::before,
.emp-manifeste__ornament::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: rgba(30, 28, 26, 0.9);
}

.emp-manifeste__ornament span {
  margin: 0 var(--space-6);
  color: rgba(196, 160, 90, 0.50);
  font-size: 1.1rem;
  line-height: 1;
}

/* ─── Pilier — section narrative ───────────────────────── */
.emp-manifeste__pillar {
  position: relative;
  padding: clamp(4rem, 9vw, 9rem) 0;
  border-top: 1px solid rgba(30, 28, 26, 0.9);
  overflow: hidden;
  background-color: var(--color-noir);
}

.emp-manifeste__pillar--alt {
  background-color: #0D0D0F;
}

/* Grand chiffre en filigrane */
.emp-manifeste__pillar-num {
  position: absolute;
  top: var(--space-6);
  right: -0.5rem;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 16rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.018);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  display: none;
}

@media (min-width: 1100px) {
  .emp-manifeste__pillar-num { display: block; }
}

/* Ligne de section : 01 ——— Label */
.emp-manifeste__pillar-marker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: clamp(var(--space-10), 8vw, var(--space-16));
}

.emp-manifeste__pillar-marker .num {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-or);
  flex-shrink: 0;
}

.emp-manifeste__pillar-marker .line {
  flex: 1;
  height: 1px;
  background: rgba(30, 28, 26, 0.9);
}

.emp-manifeste__pillar-marker .label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--color-sauge);
  flex-shrink: 0;
}

/* Titre du pilier */
.emp-manifeste__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ivoire);
  line-height: 1.08;
  margin-bottom: var(--space-3);
}

/* Sous-titre italique */
.emp-manifeste__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 300;
  color: var(--color-sauge);
  margin-bottom: clamp(var(--space-8), 6vw, var(--space-12));
}

/* Texte de corps */
.emp-manifeste__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: clamp(var(--space-10), 7vw, var(--space-16));
}

.emp-manifeste__body p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  font-weight: 300;
  line-height: 1.95;
  color: rgba(240, 235, 224, 0.60);
  letter-spacing: 0.015em;
  margin: 0;
}

.emp-manifeste__body em {
  font-style: normal;
  color: rgba(240, 235, 224, 0.88);
}

.emp-manifeste__body .emp-or {
  color: var(--color-or);
  font-style: normal;
}

/* Pull quote — bord gauche doré */
.emp-manifeste__pullquote {
  border-left: 2px solid rgba(196, 160, 90, 0.35);
  padding: var(--space-2) 0 var(--space-2) var(--space-8);
  margin-bottom: clamp(var(--space-10), 7vw, var(--space-16));
}

.emp-manifeste__pullquote p {
  font-family: var(--font-body);
  font-size: clamp(1.55rem, 3.8vw, 2.6rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(240, 235, 224, 0.90);
  line-height: 1.35;
  margin: 0;
}

.emp-manifeste__pullquote .emp-or {
  color: var(--color-or);
}

/* Pont vers la méthode */
.emp-manifeste__method {
  border-top: 1px solid rgba(30, 28, 26, 0.9);
  padding-top: var(--space-10);
}

.emp-manifeste__method-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-or);
  display: block;
  margin-bottom: var(--space-6);
}

.emp-manifeste__method p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  font-weight: 300;
  line-height: 1.95;
  color: rgba(240, 235, 224, 0.60);
  letter-spacing: 0.015em;
  margin: 0;
}

.emp-manifeste__method em {
  font-style: normal;
  color: rgba(240, 235, 224, 0.88);
}

/* ─── Section de clôture ────────────────────────────────── */
.emp-manifeste__closing {
  position: relative;
  padding: clamp(5rem, 12vw, 12rem) 0;
  border-top: 1px solid rgba(30, 28, 26, 0.9);
  background-color: #0D0D0F;
  text-align: center;
  overflow: hidden;
}

/* Stage : zone qui contient la géométrie + la citation superposée */
.emp-manifeste__closing-stage {
  position: relative;
  isolation: isolate;           /* Stacking context propre, sans interférence */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(320px, 55vw, 560px);
  margin: clamp(var(--space-6), 4vw, var(--space-10)) auto;
}

/* Géométrie sacrée — fond absolu, z-index 0 */
.emp-manifeste__closing-geo {
  position: absolute;
  inset: 0;
  z-index: 0;                   /* Fond */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.12;
}

.emp-manifeste__closing-geo svg {
  width: 100%;
  height: 100%;
  max-width: 560px;
  max-height: 560px;
}

.emp-manifeste__closing-conclusion {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: var(--color-sauge);
  display: block;
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
}

/* Citation — z-index 1 : au-dessus de la géométrie */
.emp-manifeste__closing-quote {
  position: relative;
  z-index: 1;                   /* Texte en avant-plan */
  font-family: var(--font-body);
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(240, 235, 224, 0.90);
  line-height: 1.25;
  max-width: 680px;
  margin: 0;
  padding: 0 var(--space-4);
  text-align: center;
}

.emp-manifeste__closing-rule {
  width: 3.5rem;
  height: 1px;
  background-color: rgba(196, 160, 90, 0.40);
  margin: clamp(var(--space-8), 5vw, var(--space-12)) auto;
}

.emp-manifeste__closing-lead {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(240, 235, 224, 0.48);
  max-width: 480px;
  margin: 0 auto clamp(var(--space-8), 6vw, var(--space-12));
}

/* Bouton CTA — bordure dorée */
.emp-manifeste__cta-btn {
  display: inline-block;
  border: 1px solid rgba(196, 160, 90, 0.42);
  color: var(--color-ivoire);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) clamp(var(--space-6), 6vw, var(--space-10));
  transition: background-color 0.45s var(--ease-sacred),
              border-color 0.45s var(--ease-sacred),
              color 0.45s var(--ease-sacred);
}

.emp-manifeste__cta-btn:hover {
  background-color: rgba(196, 160, 90, 0.10);
  border-color: rgba(196, 160, 90, 0.75);
  color: var(--color-ivoire);
}

.emp-manifeste__closing-sub {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-sauge);
}

/* ─── Responsive manifeste ──────────────────────────────── */
@media (max-width: 600px) {
  .emp-manifeste__pullquote {
    padding-left: var(--space-5);
  }

  .emp-manifeste__pillar-marker .label {
    display: none;
  }
}

/* ============================================================
   SCEAU DE CIRE — Signature souveraine de clôture
   Présent sur toutes les pages, juste avant le footer.
   Ce n'est pas un footer. C'est le colophon du Grimoire.
   ============================================================ */

.emp-sceau {
  position: relative;
  background-color: var(--color-noir);
  padding: clamp(5rem, 12vw, 10rem) var(--space-4) clamp(4rem, 9vw, 9rem);
  text-align: center;
  overflow: hidden;
}

/* Parchment atmosphere — Sceau-cire background as tactile paper layer */
.emp-sceau::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('https://empowerum.ch/wp-content/uploads/2026/05/Sceau-cire-fond-site-MODIF.jpg');
  background-size: 220%;
  background-position: 50% 85%;
  opacity: 0.15;
}

/* Radial vignette — draws the eye to the centre, concentrates gravity on the seal */
.emp-sceau::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 80% at 50% 55%,
    transparent 20%,
    rgba(13, 13, 15, 0.88) 100%
  );
}

/* All inner content above texture + vignette layers */
.emp-sceau__inner {
  position: relative;
  z-index: 1;
}

/* Ritual label — small, spaced, muted */
.emp-sceau__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.50em;
  text-transform: uppercase;
  color: var(--color-sauge);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  text-indent: 0.50em;
}

/* Thin gold rule — breath before the seal */
.emp-sceau__rule--top {
  width: 2.5rem;
  height: 1px;
  background: rgba(196, 160, 90, 0.28);
  margin: 0 auto clamp(3.5rem, 8vw, 7rem);
}

/* The Wax Seal — slow, heavy, permanent (transparent PNG, portrait 1080×1350) */
.emp-sceau__img {
  display: block;
  width: clamp(200px, 30vw, 360px);
  height: auto;
  margin: 0 auto;
  filter:
    drop-shadow(0 28px 64px rgba(0, 0, 0, 0.96))
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.80))
    drop-shadow(0 0 90px rgba(196, 160, 90, 0.07));
  transition: opacity 1.8s var(--ease-sacred), transform 1.8s var(--ease-sacred);
}

/* Override standard data-animate speed — the seal must feel heavy */
[data-animate].emp-sceau__img {
  transform: translateY(30px) scale(0.96);
}

[data-animate].emp-sceau__img.is-visible {
  transform: translateY(0) scale(1);
}

/* Brand name — whispered beneath the seal */
.emp-sceau__brand {
  display: block;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--font-heading);
  font-size: 0.52rem;
  letter-spacing: 0.58em;
  text-transform: uppercase;
  color: rgba(196, 160, 90, 0.38);
  text-indent: 0.58em;
}

/* Faint closing rule */
.emp-sceau__rule--bottom {
  width: 1.5rem;
  height: 1px;
  background: rgba(196, 160, 90, 0.16);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .emp-sceau__img {
    width: min(240px, 70vw);
  }
}

/* ============================================================
   EMPOWERUM QUOTE — Bloc citation ornemental (Gutenberg / shortcode)
   ============================================================ */

.empowerum-quote {
  position: relative;
  margin: 56px auto;
  padding: 0 24px;
  max-width: 680px;
  text-align: center;
  background: none;
  border: none;
}

.empowerum-quote::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, #C4973B 20%, #C4973B 80%, transparent 100%);
  margin-bottom: 32px;
}

.empowerum-quote::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, #C4973B 20%, #C4973B 80%, transparent 100%);
  margin-top: 32px;
}

.empowerum-quote .diamond-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  margin-top: -42px;
}

.empowerum-quote .diamond-rule::before,
.empowerum-quote .diamond-rule::after {
  content: '';
  display: block;
  height: 1px;
  width: 72px;
  background: #C4973B;
}

.empowerum-quote .diamond-rule span {
  display: block;
  width: 8px;
  height: 8px;
  background: #C4973B;
  transform: rotate(45deg);
}

.empowerum-quote p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(18px, 2.2vw, 28px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(240, 235, 224, 0.88);
  margin: 0;
  letter-spacing: 0.01em;
}

/* ============================================================
   HEADER GRIMOIRE — Navigation souveraine centrée
   Architecture : [aile-gauche] | [marque-centrale] | [aile-droite]
   ============================================================ */

/* Skip link — accessibilité */
.emp-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--color-noir);
  color: var(--color-ivoire);
  font-size: var(--text-sm);
}
.emp-skip-link:focus {
  left: var(--space-4);
}

/* Header bar */
.emp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  transition:
    background-color 0.55s var(--ease-sacred),
    border-color     0.55s var(--ease-sacred),
    backdrop-filter  0.55s var(--ease-sacred);
}

/* Transparent by default — overlaps hero on front page */
.emp-header {
  background-color: transparent;
  border-bottom: 1px solid transparent;
}

/* Solid once scrolled past 40px, or on any inner page */
.emp-header--scrolled,
body:not(.emp-is-front) .emp-header {
  background-color: rgba(13, 13, 15, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(196, 160, 90, 0.12);
}

/* Three-column grid layout */
.emp-nav--grimoire {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
  padding: 0 clamp(var(--space-4), 5vw, var(--space-10));
  max-width: var(--max-full);
  margin: 0 auto;
  position: relative;
}

/* Wing containers */
.emp-nav__wing {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-5), 4vw, var(--space-8));
}

.emp-nav__wing--left {
  justify-content: flex-end;
  padding-right: clamp(var(--space-5), 4vw, var(--space-8));
}

.emp-nav__wing--right {
  justify-content: flex-start;
  padding-left: clamp(var(--space-5), 4vw, var(--space-8));
}

/* Hairline separator between wings and brand */
.emp-nav__wing--left {
  border-right: 1px solid rgba(196, 160, 90, 0.15);
}

.emp-nav__wing--right {
  border-left: 1px solid rgba(196, 160, 90, 0.15);
}

/* Nav links */
.emp-nav__link {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(246, 242, 235, 0.58);
  transition: color 0.30s var(--ease-sacred);
  text-indent: 0.34em;
  white-space: nowrap;
  line-height: 1;
}

.emp-nav__link:hover {
  color: rgba(246, 242, 235, 0.95);
}

.emp-nav__link--active,
.emp-nav__link[aria-current="page"] {
  color: var(--color-or);
}

/* Central brand mark */
.emp-nav__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  padding: 0 clamp(var(--space-4), 4vw, var(--space-8));
  transition: opacity 0.30s var(--ease-sacred);
}

.emp-nav__brand:hover {
  opacity: 0.80;
}

/* SVG Sword icon */
.emp-nav__icon {
  display: block;
  width: 22px;
  height: auto;
  flex-shrink: 0;
}

/* Wordmark — E & M in gold, rest ghosted */
.emp-nav__wordmark {
  font-family: var(--font-heading);
  font-size: 0.40rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: rgba(246, 242, 235, 0.18);
  text-indent: 0.55em;
  line-height: 1;
  display: block;
}

.emp-nav__initial {
  color: rgba(196, 160, 90, 0.72);
}

/* Hamburger button — hidden on desktop */
.emp-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: absolute;
  right: var(--space-4);
}

.emp-nav__burger span {
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(246, 242, 235, 0.70);
  transition:
    transform 0.38s var(--ease-sacred),
    opacity   0.25s var(--ease-sacred),
    width     0.25s var(--ease-sacred);
  transform-origin: left center;
}

.emp-nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(1px, -1px);
  width: 24px;
}

.emp-nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.emp-nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(1px, 1px);
  width: 24px;
}

/* ─── Full-screen mobile menu ───────────────────────────── */
.emp-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 890;
  background-color: rgba(10, 10, 12, 0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-sacred);
}

.emp-mobile-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://empowerum.ch/wp-content/uploads/2026/05/MAILLE-CUIR-SITE.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
}

.emp-mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
}

.emp-mobile-menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  position: relative;
  z-index: 1;
}

.emp-mobile-menu__link {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(246, 242, 235, 0.75);
  text-indent: 0.22em;
  transition: color 0.22s ease;
  line-height: 1;
}

.emp-mobile-menu__link:hover {
  color: var(--color-or);
}

.emp-mobile-menu__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(246, 242, 235, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.22s ease;
  z-index: 1;
}

.emp-mobile-menu__close svg {
  width: 20px;
  height: 20px;
}

.emp-mobile-menu__close:hover {
  color: var(--color-ivoire);
}

/* ─── Page content offset for fixed header ──────────────── */
/* Inner pages: push content below header */
body:not(.emp-is-front) .emp-page__header {
  padding-top: calc(72px + clamp(3rem, 8vw, 6rem));
}

/* Hero on front page: inherits fixed header transparently */
.emp-is-front .emp-hero {
  min-height: 100dvh;
}

/* ─── Header responsive ─────────────────────────────────── */
@media (max-width: 860px) {
  .emp-nav__wing {
    display: none;
  }

  .emp-nav__burger {
    display: flex;
  }

  .emp-nav--grimoire {
    grid-template-columns: 1fr;
    justify-items: center;
    height: 60px;
    padding: 0 var(--space-4);
  }

  .emp-nav__brand {
    padding: 0;
  }
}

@media (max-width: 480px) {
  .emp-nav__wordmark {
    display: none;
  }
}

/* ============================================================
   SCEAU — Signature mise à jour (avec .emp-sceau__signature)
   ============================================================ */

.emp-sceau__signature {
  font-family: var(--font-heading);
  font-size: clamp(0.50rem, 1.2vw, 0.65rem);
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: rgba(196, 160, 90, 0.55);
  text-indent: 0.62em;
  margin: 0 0 clamp(2rem, 5vw, 4rem);
  font-weight: 400;
}