/* Polices Patina - auto-hébergées (Cormorant), sans appel externe */
@font-face {font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/CormorantGaramond-Regular.woff2') format('woff2');}
@font-face {font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/CormorantGaramond-Italic.woff2') format('woff2');}
@font-face {font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('/CormorantGaramond-LightItalic.woff2') format('woff2');}
@font-face {font-family:'Cormorant SC';font-style:normal;font-weight:300;font-display:swap;src:url('/CormorantSC-Light.woff2') format('woff2');}
@font-face {font-family:'Cormorant SC';font-style:normal;font-weight:400;font-display:swap;src:url('/CormorantSC-Regular.woff2') format('woff2');}
/* ============================================================
   PATINA · PRIVATE OFFICE - patina-group.ch
   Design system: design tokens → layout → components → utilities → responsive
   ============================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Color palette */
  --c-black:     #0B0A08;   /* PAT-CHARTE-01 black */
  --c-black-2:   #0B0A08;
  --c-black-3:   #0B0A08;
  --c-gold:      #C9A458;   /* PAT-CHARTE-01 gold_warm (champagne sur noir) */
  --c-gold-dk:   #9A7C3A;   /* PAT-CHARTE-01 gold_deep */
  --c-gold-lt:   #D4B987;   /* PAT-CHARTE-01 gold_pale */
  --c-ivory:     #F5EDD8;   /* PAT-CHARTE-01 ivory */
  --c-ivory-2:   #EDE5CC;
  --c-ghost:     #13110B;
  --c-gray:      #867D68;   /* min. 4,6:1 sur fond noir et ghost */
  --c-gray-md:   #8A8070;
  --c-gray-lt:   #B8B0A0;
  --c-text-body: #C8C0AC;

  /* Fluid type scale - clamp(min, preferred, max)
     Base: 18px mobile | Scale: 1.25 Major Third
     Optimised for legibility on all screen sizes (WCAG AA minimum 16px body) */
  --t-xs:   clamp(0.875rem, 0.82rem + 0.28vw,  1.00rem);  /* 14–16px  labels, captions */
  --t-sm:   clamp(1.00rem,  0.92rem + 0.40vw,  1.15rem);  /* 16–18px  body small       */
  --t-base: clamp(1.063rem, 0.97rem + 0.47vw,  1.35rem);  /* 17–22px  body             */
  --t-md:   clamp(1.188rem, 1.05rem + 0.70vw,  1.65rem);  /* 19–26px  body large       */
  --t-lg:   clamp(1.375rem, 1.15rem + 1.13vw,  2.10rem);  /* 22–34px  sub-headings     */
  --t-xl:   clamp(1.75rem,  1.30rem + 2.25vw,  3.25rem);  /* 28–52px  headings         */
  --t-2xl:  clamp(2.25rem,  1.60rem + 3.25vw,  5.00rem);  /* 36–80px  display          */
  --t-3xl:  clamp(3.00rem,  2.10rem + 4.50vw,  7.50rem);  /* 48–120px hero             */
  --t-hero: clamp(3.50rem,  2.60rem + 5.50vw,  9.00rem);  /* 56–144px hero title       */
  --t-label: clamp(0.875rem, 0.82rem + 0.28vw, 1.00rem);  /* 14–16px  labels           */

  /* Spacing scale - based on 8px grid */
  --sp-1:  0.5rem;    /* 8px  */
  --sp-2:  1rem;      /* 16px */
  --sp-3:  1.5rem;    /* 24px */
  --sp-4:  2rem;      /* 32px */
  --sp-5:  3rem;      /* 48px */
  --sp-6:  4rem;      /* 64px */
  --sp-7:  5rem;      /* 80px */
  --sp-8:  6.5rem;    /* 104px */
  --sp-9:  8rem;      /* 128px */
  --sp-10: 10rem;     /* 160px */
  --sp-11: 13rem;     /* 208px */

  /* Fluid section padding */
  --section-pad-v: clamp(5rem, 8vw, 11rem);
  --section-pad-h: clamp(1.5rem, 6vw, 6rem);

  /* Layout */
  --max-w:      1600px;
  --max-w-text: 780px;
  --nav-h:      72px;

  /* Motion */
  --ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap:   cubic-bezier(0.77, 0, 0.18, 1);
  --dur-fast:    0.25s;
  --dur-base:    0.55s;
  --dur-slow:    1.10s;
  --dur-xslow:   1.40s;

  /* Border */
  --border-ghost: 0.5px solid var(--c-ghost);
  --border-gold:  0.5px solid var(--c-gold-dk);
}

/* ── 2. RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-black);
  color-scheme: dark;
  overscroll-behavior: none;
  scrollbar-gutter: stable both-edges;
}

body {
  background: var(--c-black);
  color: var(--c-ivory);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (hover: none) {
  body { cursor: auto; }
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { background: none; border: none; font: inherit; cursor: inherit; }

/* ── 3. CURSOR - gold arrow ─────────────────────────────────── */
@media (hover: hover) {
  body { cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNIDQsNCBMIDQsMjIgTCA4LDE3IEwgMTIsMjYgTCAxNCwyNSBMIDEwLDE2IEwgMTYsMTYgWiIKICAgIGZpbGw9IiNDOUE0NTgiIHN0cm9rZT0iIzBCMEEwOCIgc3Ryb2tlLXdpZHRoPSIwLjgiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+') 4 4, auto; }
}
@media (hover: none) { body { cursor: auto; } }

/* ── 4. NOISE TEXTURE ───────────────────────────────────────── */
.noise {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── 5. LANGUAGE TOGGLE ─────────────────────────────────────── */
/* Visibilité par langue : on masque uniquement la langue inactive.
   L'élément affiché conserve son display naturel (bloc, inline, p, etc.),
   identique en FR et EN - plus aucun décalage à la bascule. */
.lang-fr [data-en] { display: none !important; }
.lang-en [data-fr] { display: none !important; }

/* ── 6. NAVIGATION ──────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--section-pad-h);
  background: rgba(11, 10, 8, 0);
  border-bottom: 0.5px solid rgba(201, 164, 88, 0);
  /* Force compositor layer on load to prevent flash when backdrop-filter is added on scroll (Safari) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: background-color, backdrop-filter;
  transition:
    background var(--dur-base) ease,
    backdrop-filter var(--dur-base) ease,
    -webkit-backdrop-filter var(--dur-base) ease,
    border-bottom-color var(--dur-base) ease,
    box-shadow var(--dur-base) ease;
  /* Slide in on load */
  animation: nav-in 0.8s var(--ease-luxury) 1.2s both;
}
@keyframes nav-in {
  from { opacity: 0; transform: translate3d(0, -12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.nav.scrolled {
  background: rgba(11, 10, 8, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(201, 164, 88, 0.22);
  box-shadow: 0 1px 0 rgba(201, 164, 88, 0.06), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Top gold rule */
.nav-top-rule {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: var(--c-gold);
  z-index: 801;
  transform-origin: left;
  animation: rule-in 1.8s var(--ease-snap) 0.2s both;
}
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.nav-logo svg {
  width: 28px;
  height: 46px;
  flex-shrink: 0;
}
.nav-wordmark {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.35rem, 1.65vw, 1.90rem);
  font-weight: 400;
  letter-spacing: 0.35em;
  color: var(--c-ivory);
  line-height: 1;
}

/* Desktop nav links */
.nav-cluster {
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 2.4vw, 2.75rem);
  list-style: none;
}
.nav-links a {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.15rem, 1.25vw, 1.45rem);
  letter-spacing: 0.20em;
  color: var(--c-gray-lt);
  transition: color var(--dur-fast) ease;
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 0.5px;
  background: var(--c-gold);
  opacity: 0.7;
  transform: translateX(-50%);
  transition: width 0.45s var(--ease-luxury);
}
.nav-links a:hover { color: var(--c-ivory); }
.nav-links a.is-active {
  color: var(--c-gold);
}
.nav-links a.is-active::after {
  width: 100%;
}
/* Right cluster */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.nav-right::before {
  content: "";
  display: block;
  width: 0.5px;
  height: 16px;
  background: var(--c-ghost);
  margin-right: clamp(1rem, 1.8vw, 2rem);
  opacity: 0.6;
}

/* Lang switcher */
.lang-sw {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.lang-btn {
  display: inline-block;   /* lien <a> rendu comme l'ancien bouton */
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.05rem, 1.1vw, 1.25rem);
  letter-spacing: 0.2em;
  color: var(--c-gray-lt);
  padding: 2px 0;
  position: relative;
  transition: color var(--dur-fast) ease;
}
.lang-btn::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 0.5px;
  background: var(--c-gold);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.lang-btn.is-active,
.lang-btn.is-active:hover,
.lang-btn.is-active:focus { color: var(--c-gold) !important; }
.lang-btn.is-active::after { transform: scaleX(1); }
.lang-btn:not(.is-active):hover { color: var(--c-ivory); }
.lang-sep { width: 0.5px; height: 10px; background: var(--c-ghost); }

/* Hamburger */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5.5px;
  padding: 4px;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 0.5px;
  background: var(--c-gold);
  transform-origin: center;
  transition: transform 0.35s var(--ease-snap), opacity 0.3s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── 7. MOBILE MENU ─────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--c-black);
  z-index: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.mobile-menu nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  list-style: none;
  position: static;
  height: auto;
  padding: 0;
  margin: 0;
  animation: none;
}
.mobile-menu nav a {
  display: block;
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  letter-spacing: 0.12em;
  color: var(--c-ivory-2);
  padding: 0.9rem 0;
  border-bottom: var(--border-ghost);
  width: clamp(220px, 60vw, 360px);
  text-align: center;
  transition: color var(--dur-fast) ease;
}
.mobile-menu nav ul li:first-child a { border-top: var(--border-ghost); }
.mobile-menu nav a:hover { color: var(--c-gold); }
.mobile-lang {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.mobile-lang .lang-btn { font-size: 1rem; letter-spacing: 0.3em; }
.mobile-tagline {
  font-style: italic;
  font-size: var(--t-label);
  color: var(--c-gray);
  letter-spacing: 0.05em;
}

/* ── 8. SCROLL REVEAL ───────────────────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-xslow) ease,
    transform var(--dur-xslow) var(--ease-luxury);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.10s; }
.reveal--delay-2 { transition-delay: 0.22s; }
.reveal--delay-3 { transition-delay: 0.36s; }
.reveal--delay-4 { transition-delay: 0.50s; }

/* Fallback: if IntersectionObserver doesn't fire (fast scroll, iOS Safari quirks),
   force reveal after 2s so contact links remain accessible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .hero-mono,
.hero-title,
.hero-sub,
.hero-metier,
.hero-scope,
.hero-rule {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── 9. HERO ────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--nav-h) var(--section-pad-h) 0;
  overflow: hidden;
  background: var(--c-black);
}
.hero-symbol {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.hero-bg-mono {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(25%);
  pointer-events: none;
  z-index: -1;
  line-height: 0;
}
.hero-bg-mono svg {
  width: min(72vw, 72vh);
  height: min(72vw, 72vh);
  opacity: 0.09;
}
@media (max-width: 768px) {
  .hero-bg-mono svg {
    width: 88vw;
    height: 88vw;
    opacity: 0.09;
  }
}
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-mono {
  width: clamp(52px, 6vw, 90px);
  height: auto;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  animation: fade-up 1.1s ease 0.5s both;
}
.hero-title {
  font-family: 'Cormorant SC', serif;
  font-size: var(--t-hero);
  font-weight: 300;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  color: var(--c-ivory);
  line-height: 1;
  margin-bottom: var(--sp-2);
  animation: fade-up 1.1s ease 0.75s both;
}
.hero-sub {
  font-family: 'Cormorant SC', serif;
  font-size: var(--t-sm);
  letter-spacing: 0.38em;
  padding-left: 0.38em;
  color: var(--c-gold-dk);
  margin-bottom: var(--sp-6);
  animation: fade-up 1.1s ease 0.95s both;
}
.hero-rule {
  width: 0.5px;
  height: clamp(50px, 6vw, 90px);
  background: linear-gradient(to bottom, var(--c-gold-dk), transparent);
  animation: fade-up 1.1s ease 1.15s both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 10. SECTION BASE ───────────────────────────────────────── */
.section {
  position: relative;
  scroll-margin-top: var(--nav-h);
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--c-black);
}
.section-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-pad-v) var(--section-pad-h);
}
.section--alt { background: var(--c-black-2); }
.section--border { border-top: none; position: relative; }
/* Seamless section separator */
.section + .section::before,
.section + footer::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.5px;
  background: var(--c-ghost);
  pointer-events: none;
}

/* ── 11. PHILOSOPHY ─────────────────────────────────────────── */
.philosophy-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.phil-label {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(0.85rem, 1.0vw, 1.15rem);
  letter-spacing: 0.35em;
  color: var(--c-gold-dk);
  writing-mode: vertical-rl;
  rotate: 180deg;
}
.phil-quote {
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-2xl);
  line-height: 1.45;
  color: var(--c-ivory);
}
.phil-quote em { font-style: normal; color: var(--c-gold); }

/* ── 12. PILLARS / SERVICES ─────────────────────────────────── */
.pillars-header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
.pillars-eyebrow {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  letter-spacing: 0.4em;
  color: var(--c-gold-dk);
  margin-bottom: var(--sp-3);
  display: block;
}
.pillars-title {
  font-size: var(--t-2xl);
  font-weight: 300;
  color: var(--c-ivory);
  letter-spacing: 0.04em;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.pillar {
  padding: clamp(2rem, 4vw, 5rem) clamp(1.5rem, 3.5vw, 4rem);
  border-left: var(--border-ghost);
  position: relative;
  transition: background var(--dur-base) ease, border-color var(--dur-base) ease;
}
.pillar:last-child { border-right: var(--border-ghost); }
.pillar:hover {
  background: rgba(201, 164, 88, 0.025);
  border-color: var(--c-gold-dk);
}
.pillar-name {
  font-family: 'Cormorant SC', serif;
  font-size: var(--t-lg);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--c-ivory);
  display: block;
  padding-bottom: 0.3rem;
  border-bottom: var(--border-gold);
  margin-bottom: var(--sp-3);
  transition: color var(--dur-fast) ease;
}
.pillar:hover .pillar-name { color: var(--c-gold-lt); }
.pillar-desc {
  font-size: var(--t-base);
  font-style: italic;
  line-height: 2.0;
  color: var(--c-text-body);
}
.pillars-coda {
  margin-top: clamp(2rem, 4vw, 4rem);
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  color: var(--c-gray-md);
}
.pillar-fn {
  margin-top: var(--sp-2);
  font-family: 'Cormorant SC', serif;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  line-height: 1.65;
  color: var(--c-gray-md);
}
/* Animated bottom rule */
.pillar-rule {
  position: absolute;
  bottom: 0; left: clamp(1.5rem, 3.5vw, 4rem);
  width: 0; height: 0.5px;
  background: var(--c-gold);
  transition: width 0.55s var(--ease-snap);
}
.pillar:hover .pillar-rule {
  width: calc(100% - clamp(3rem, 7vw, 8rem));
}

/* ── 13. APPROACH ───────────────────────────────────────────── */
#approach .section-inner {
  padding-top: clamp(1.5rem, 2vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
}
.approach-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  max-width: var(--max-w);
}
.approach-title {
  font-size: var(--t-2xl);
  font-weight: 300;
  line-height: 1.22;
  color: var(--c-ivory);
  margin-bottom: var(--sp-3);
}
.approach-title em { font-style: italic; color: var(--c-gold); }
.approach-body {
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-text-body);
  margin-bottom: var(--sp-2);
  max-width: 64ch;
}
/* ── 14. CONTACT + FOOTER - exactly one viewport ───────────── */
#contact {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--section-pad-h) clamp(4rem, 8vw, 8rem);
}
#contact .section-inner {
  padding: 0;
  display: contents;
}
.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.contact-title {
  font-size: var(--t-2xl);
  font-weight: 300;
  font-style: italic;
  line-height: 1.28;
  color: var(--c-ivory);
}
.contact-sub {
  font-size: var(--t-base);
  font-weight: 400;
  color: var(--c-gray-lt);
  line-height: 1.55;
  max-width: 52ch;
}
.contact-signature {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(0.95rem, 1.05vw, 1.15rem);
  letter-spacing: 0.32em;
  color: var(--c-ivory);
  text-transform: uppercase;
  margin-top: calc(var(--sp-1) * -0.25);
  padding-top: var(--sp-2);
  position: relative;
}
.contact-signature::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.55;
  margin: 0 auto var(--sp-2);
}
.contact-links {
  width: 100%;
  max-width: 500px;
}
.contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.5rem 0;
  border-bottom: var(--border-ghost);
  transition: all var(--dur-fast) ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(201, 164, 88, 0.15);
  cursor: pointer;
}
.contact-link * {
  pointer-events: none;
}
.contact-link-static,
.contact-link-static * {
  pointer-events: auto;
}
.contact-link:first-child { border-top: var(--border-ghost); }
.contact-link-label {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.0rem, 1.1vw, 1.2rem);
  letter-spacing: 0.25em;
  color: var(--c-gray-md);
  flex-shrink: 0;
  transition: color var(--dur-fast) ease;
}
.contact-link-value {
  font-size: clamp(1.25rem, 1.6vw, 1.9rem);
  font-style: italic;
  color: var(--c-ivory);
  transition: color var(--dur-fast) ease;
}
.contact-link-arrow {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--c-gray);
  transition: color var(--dur-fast) ease, transform 0.4s var(--ease-luxury);
}
.contact-link:hover .contact-link-label { color: var(--c-gold-dk); }
.contact-link:hover .contact-link-value { color: var(--c-gold); }
.contact-link:hover .contact-link-arrow { color: var(--c-gold); transform: translateX(5px); }
.contact-link-static { cursor: default; }
.contact-link-static .contact-link-value { color: var(--c-gray); font-style: italic; }
.contact-link-place { justify-content: center; }

/* Two interlocutors side by side - subgrid keeps the gold rule (top)
   and the Tel/Email rows (bottom) aligned across columns whatever the name length */
.contact-people {
  display: grid;
  grid-template-columns: minmax(0, 380px);
  grid-template-rows: auto auto;
  justify-content: center;
  column-gap: clamp(2.5rem, 6vw, 5rem);
  width: 100%;
}
.contact-person {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: var(--sp-3);
}
.contact-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.contact-id .contact-signature {
  margin-top: 0;
  padding-top: 0;
}
.contact-person .contact-links { width: 100%; margin: 0 auto; align-self: start; }
.contact-role {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(0.78rem, 0.85vw, 0.92rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-top: var(--sp-1);
  margin-bottom: 0;
}
/* Ligne discrète sur les références, sous le lieu */
.contact-note {
  margin-top: var(--sp-3);
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-gray-md);
  max-width: 44ch;
}
/* Lien entre les trois univers, au-dessus de la coda */
.pillars-bridge {
  max-width: 62ch;
  margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
  text-align: center;
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--c-text-body);
}
@media (max-width: 768px) {
  .pillars-bridge { font-size: clamp(1.063rem, 4.2vw, 1.3rem); }
  .contact-note { font-size: clamp(1.0rem, 3.8vw, 1.125rem); }
}
.contact-hq {
  width: 100%;
  max-width: 500px;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
}
/* Fallback for browsers without subgrid: reserve a fixed identity height
   so both columns still align their Tel/Email rows */
@supports not (grid-template-rows: subgrid) {
  .contact-id { min-height: 5.2rem; justify-content: center; }
}

/* ── 15. FOOTER ─────────────────────────────────────────────── */
.footer { border-top: 0.5px solid rgba(201, 164, 88, 0.10); }
.footer-signature {
  padding: 0 var(--section-pad-h);
  text-align: center;
}
.footer-phrase {
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--c-gold-dk);
  display: block;
}
.footer-phrase-2 {
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--c-gray);
  display: block;
}
.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem var(--section-pad-h);
  border-top: var(--border-ghost);
}
.footer-entremise-row { text-align: center; margin: 1.5rem 0 1.9rem; }
.footer-entremise {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.0rem, 1.05vw, 1.125rem);
  letter-spacing: 0.05em;
  color: var(--c-gold-dk);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
.footer-entremise:hover,
.footer-entremise:focus-visible { color: var(--c-gold); }
.footer-copy,
.footer-url,
.footer-priv {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(0.875rem, 0.9vw, 1.0rem);
  letter-spacing: 0.2em;
  color: var(--c-gray);
}
.footer-url { color: var(--c-gray); font-style: italic; font-family: 'Cormorant Garamond', serif; }

/* ── 16. LEGAL (volet mentions légales) ──────────────────────────────────────── */

/* ── 17. RESPONSIVE ─────────────────────────────────────────── */
/* ── TABLET 769–1024px ─────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --section-pad-h: clamp(1.8rem, 4vw, 3.5rem);
  }
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
  .approach-grid { grid-template-columns: 1fr; }
  .nav-links { gap: 1.6rem; }
  .nav-links a { font-size: 1rem; } /* 16px on tablet */
}

/* ── MOBILE ≤768px ──────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-pad-h: 1.4rem;
    --section-pad-v: clamp(4.5rem, 12vw, 6.5rem);
    --nav-h: 62px;
  }

  /* Nav */
  .nav { padding: 0 1.4rem; height: 62px; }
  .nav-links { display: none; }
  .nav-right::before { display: none; }
  .nav-right .lang-sw { display: none; }
  .nav-burger { display: flex; }
  .nav-wordmark { font-size: 1.2rem; letter-spacing: 0.3em; }
  .nav-logo svg { width: 22px; height: 36px; }

  /* Hero - minimum 52px title on mobile */
  .hero-title {
    font-size: clamp(3.25rem, 14vw, 5.5rem);
    letter-spacing: 0.12em;
    padding-left: 0.12em;
  }
  .hero-sub {
    font-size: clamp(1.0rem, 3.8vw, 1.125rem);  /* min 16px */
    letter-spacing: 0.25em;
  }

  /* Philosophy */
  .philosophy-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .phil-label {
    writing-mode: horizontal-tb;
    rotate: none;
    font-size: clamp(1.0rem, 3.8vw, 1.125rem); /* min 16px */
    margin-bottom: var(--sp-1);
  }
  .phil-quote { font-size: clamp(1.75rem, 7.5vw, 2.75rem); line-height: 1.5; }

  /* Pillars */
  .pillars-eyebrow { font-size: clamp(1.0rem, 3.8vw, 1.125rem); }  /* min 16px */
  .pillars-title { font-size: clamp(2.0rem, 8.5vw, 3.25rem); }
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar { border-left: none; border-top: var(--border-ghost); padding: var(--sp-5) 0; }
  .pillar:last-child { border-right: none; border-bottom: var(--border-ghost); padding-bottom: var(--sp-6); }
  .pillar-name { font-size: clamp(1.375rem, 5.8vw, 1.875rem); }
  .pillar-desc { font-size: clamp(1.063rem, 4.2vw, 1.3rem); line-height: 1.85; }
  .pillar-rule { left: 0; }
  .pillar:hover .pillar-rule { width: 100%; }

  /* Approach */
  .approach-grid { grid-template-columns: 1fr; }
  .approach-title { font-size: clamp(1.875rem, 8vw, 2.875rem); line-height: 1.25; }
  .approach-body { font-size: clamp(1.063rem, 4.2vw, 1.3rem); line-height: 1.85; max-width: 100%; }

  /* Contact */
  .contact-title { font-size: clamp(2.125rem, 9vw, 3.5rem); }
  .contact-sub { font-size: clamp(1.063rem, 4.2vw, 1.3rem); max-width: 100%; }
  .contact-links { max-width: 100%; }
  .contact-link-label { font-size: clamp(1.0rem, 3.8vw, 1.125rem); } /* min 16px */
  .contact-link-value { font-size: clamp(1.063rem, 4.2vw, 1.3rem); }
  .contact-signature { font-size: clamp(0.875rem, 3.4vw, 1.0rem); letter-spacing: 0.26em; }
  .contact-people { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: clamp(2rem, 6vw, 3rem); }
  .contact-person { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; align-items: center; max-width: 100%; width: 100%; }
  .contact-role { font-size: 0.85rem; letter-spacing: 0.28em; }

  /* Footer */
  .footer-signature { padding: 0.6rem 1.4rem; }
  .footer-phrase { font-size: clamp(1.125rem, 4.8vw, 1.625rem); }
  .footer-phrase-2 { font-size: clamp(1.0rem, 3.8vw, 1.125rem); }
  .footer-meta { flex-direction: column; gap: var(--sp-1); text-align: center; padding: 0.4rem 1.4rem; }
  .footer-url { display: none; }
}

/* ── SMALL PHONES ≤390px ────────────────────────────── */
@media (max-width: 390px) {
  .hero-title { font-size: 3.0rem; letter-spacing: 0.08em; }
  .approach-title { font-size: 1.75rem; }
  .contact-title { font-size: 2.0rem; }
  .nav-burger span { width: 18px; }
  /* Ensure all text stays at or above 16px minimum */
  body { font-size: 1.063rem; }
  .pillar-desc, .approach-body, .contact-sub { font-size: 1.063rem; line-height: 1.85; }
}

/* ── iPAD / TABLET 768–1024px ────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  body { font-size: clamp(1.063rem, 1.6vw, 1.25rem); }

  .phil-quote { font-size: clamp(2.0rem, 4vw, 3.0rem); }

  .pillar-name { font-size: clamp(1.375rem, 2.5vw, 1.875rem); }
  .pillar-desc { font-size: clamp(1.063rem, 1.7vw, 1.25rem); line-height: 1.9; }

  .approach-title { font-size: clamp(2.0rem, 4vw, 3.0rem); }
  .approach-body { font-size: clamp(1.063rem, 1.7vw, 1.25rem); }

  .contact-title { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
  .contact-sub { font-size: clamp(1.063rem, 1.7vw, 1.25rem); }
  .contact-link-value { font-size: clamp(1.25rem, 2vw, 1.75rem); }
}

/* ── TOUCH TARGET MINIMUM SIZE (mobile & tablet) ──────── */
@media (max-width: 1024px) {
  /* All interactive elements min 44×44px per WCAG 2.5.5 */
  .nav-burger {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }
  .lang-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .contact-link {
    padding: 0.75rem 0;
    min-height: 52px;
  }
  .nav-links a {
    padding: 8px 4px;
  }
  .mobile-menu nav a {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── CLARIFICATION MÉTIER · lignes métier + scope (desktop + mobile) ── */
.hero-sub { margin-bottom: var(--sp-2); }

.hero-metier {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--c-ivory);
  text-align: center;
  margin-bottom: var(--sp-1);
  animation: fade-up 1.1s ease 1.05s both;
}
.hero-scope {
  font-family: 'Cormorant SC', serif;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  color: var(--c-gray-lt);
  text-align: center;
  margin-bottom: var(--sp-6);
  animation: fade-up 1.1s ease 1.15s both;
}

/* Les univers ne se coupent qu'après un point médian, en lignes équilibrées (jamais « Art » seul) */
.hero-scope { text-wrap: balance; }
@media (max-width: 768px) {
  .hero-metier { font-size: clamp(1.125rem, 4.6vw, 1.45rem); }
  .hero-scope { font-size: clamp(0.9rem, 3.4vw, 1.0rem); letter-spacing: 0.16em; }
}

/* ── A11Y : skip-link + focus visible ── */
#main { scroll-margin-top: var(--nav-h); }
.skip-link {
  position: fixed; left: 50%; top: 0;
  transform: translate(-50%, -130%);
  z-index: 2000;
  background: var(--c-gold); color: var(--c-black);
  font-family: 'Cormorant SC', serif;
  font-size: 0.95rem; letter-spacing: 0.12em;
  padding: 0.65rem 1.25rem; border-radius: 0 0 4px 4px;
  text-decoration: none;
  transition: transform var(--dur-fast) ease;
}
.skip-link:focus { transform: translate(-50%, 0); outline: none; }
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── L'ENTREMISE (intégrée depuis la page dédiée) ──────────── */
/* Vue dédiée : ouverte uniquement au clic sur « L'Entremise » */
@keyframes entremise-fade { from { opacity: 0; } to { opacity: 1; } }
/* Vue ouverte : la barre reste opaque, le texte ne défile plus sous les liens */
.entremise-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 0;
}
.entremise-bg svg { height: min(88vh, 860px); width: auto; opacity: 0.12; }
.entremise-bg svg path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}
.entremise-inner { position: relative; z-index: 1; max-width: 720px; }

.entremise-eyebrow {
  display: block; text-align: center;
  font-family: 'Cormorant SC', serif;
  font-size: var(--t-xs); letter-spacing: 0.34em; padding-left: 0.34em;
  color: var(--c-gold-dk); margin-bottom: var(--sp-4);
}
.entremise-title {
  text-align: center; font-style: normal;
  font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.04;
  color: var(--c-ivory); margin-bottom: var(--sp-3);
}
.entremise-title em { font-style: italic; }
.entremise-gloss {
  text-align: center; font-style: italic;
  font-size: var(--t-base); line-height: 1.7; color: var(--c-gray-lt);
  max-width: 44ch; margin: 0 auto var(--sp-7);
}
.entremise-lead {
  text-align: center; font-style: italic;
  font-size: var(--t-md); line-height: 1.7; color: var(--c-text-body);
  max-width: 50ch; margin: 0 auto var(--sp-8);
}
.entremise-steps { display: flex; flex-direction: column; gap: var(--sp-7); }
.entremise-step { position: relative; padding-left: var(--sp-5); }
.entremise-step::before {
  content: ""; position: absolute; left: 0; top: 0.55rem;
  width: 0.5px; height: calc(100% - 0.9rem); background: var(--c-gold-dk); opacity: 0.5;
}
.entremise-step__label {
  display: block; font-family: 'Cormorant SC', serif;
  font-size: var(--t-xs); letter-spacing: 0.22em; color: var(--c-gold-dk);
  margin-bottom: var(--sp-2);
}
.entremise-step__body {
  font-size: var(--t-base); line-height: 1.95; color: var(--c-text-body);
}
.entremise-coda {
  margin: var(--sp-8) auto 0; max-width: 50ch;
  padding-top: var(--sp-5); border-top: var(--border-ghost);
  text-align: center; font-style: italic;
  font-size: var(--t-md); line-height: 1.7; color: var(--c-ivory);
}
@media (max-width: 768px) {
  .entremise-step { padding-left: var(--sp-4); }
}

/* ── L'ENTREMISE · VERSION IVOIRE ──────────────────────────────
   Palette des teasers (PAT-CHARTE-01, palette documents) :
   ivoire #F4F0E6 · encre #1F1A14 · or profond #876730 (titres,
   libellés) · or moyen #A89060 (filets uniquement).
   L'encre adoucie #5A5044 (6,9:1) sert aux textes secondaires ;
   l'or moyen, trop pâle pour du texte à l'écran (2,7:1), reste
   réservé aux filets.                                         */
:root {
  --iv-paper:    #F4F0E6;
  --iv-ink:      #1F1A14;
  --iv-ink-soft: #5A5044;
  --iv-gold:     #876730;
  --iv-rule:     #A89060;
}
/* Marges réservées à la barre de défilement (Windows) : ivoire aussi */

/* Barre de navigation sur l'ivoire (sauf menu mobile ouvert, qui reste noir) */

/* ── Piliers : photographie (octobre 2026) ───────────────── */
.pillar-media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
  overflow: hidden;
  background: var(--c-black);
}
.pillar-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) brightness(0.95) contrast(1.05);
  transition: filter var(--dur-slow) ease, transform 1.4s var(--ease-luxury);
}
.pillar:hover .pillar-media img { filter: saturate(0.92) brightness(1.02) contrast(1.05); transform: scale(1.025); }
.pillar-ref { margin-top: 1.75rem; padding-top: 1.1rem; border-top: var(--border-gold); }
.pillar-ref-k { display: block; font-family: 'Cormorant SC', serif; font-size: var(--t-label); letter-spacing: 0.3em; color: var(--c-gold-dk); }
.pillar-ref-n { display: block; margin: 0.35rem 0 0.2rem; font-style: italic; font-size: var(--t-md); line-height: 1.3; color: var(--c-ivory); }
.pillar-ref-d { display: block; font-family: 'Cormorant SC', serif; font-size: var(--t-xs); letter-spacing: 0.14em; color: var(--c-gray-md); }
@media (prefers-reduced-motion: reduce) {
  .pillar-media img { transition: none; }
  .pillar:hover .pillar-media img { transform: none; }
}

/* ── VOLETS DES PILIERS (papier ivoire, même grammaire que L'Entremise) ── */
.volet {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--sp-8));
  padding-bottom: var(--sp-9);
  min-height: 100svh;
  display: none;
}
.volet .entremise-step__label { letter-spacing: 0.22em; }
.volet-ref { margin-top: var(--sp-7); text-align: center; }
.volet-ref .entremise-step__label { margin-bottom: var(--sp-1); }
.volet-ref-n { display: block; font-style: italic; font-size: var(--t-md); line-height: 1.4; color: var(--iv-ink); }
.volet-ref-d { display: block; font-family: 'Cormorant SC', serif; font-size: var(--t-xs); letter-spacing: 0.14em; color: var(--iv-ink-soft); }
.volet-contact { margin-top: var(--sp-5); text-align: center; }
.volet-mail {
  display: inline-block;
  font-family: 'Cormorant SC', serif;
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
  color: var(--iv-gold);
  padding-bottom: 0.2rem;
  border-bottom: 0.5px solid var(--iv-rule);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.volet-mail:hover, .volet-mail:focus-visible { color: var(--iv-ink); border-color: var(--iv-ink); }
.entremise-title:focus:not(:focus-visible) { outline: none; }
@media (max-width: 768px) {
  .volet { padding-top: calc(var(--nav-h) + var(--sp-6)); }
}
/* Piliers cliquables */
.pillar-link { position: absolute; inset: 0; z-index: 2; }
.pillar-link:focus-visible { outline: 1px solid var(--c-gold); outline-offset: -1px; }
.pillar { display: flex; flex-direction: column; }
.pillar-more {
  display: inline-flex; align-items: center; gap: 0.5rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--sp-4);
  font-family: 'Cormorant SC', serif;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  color: var(--c-gold-dk);
  transition: color var(--dur-fast) ease, gap var(--dur-base) var(--ease-luxury);
}
.pillar-more svg { width: 14px; height: 14px; }
.pillar:hover .pillar-more { color: var(--c-gold); gap: 0.85rem; }
.volet .entremise-bg svg { opacity: 0.18; }
.volet .entremise-bg svg path { stroke: var(--iv-rule); }
.volet .entremise-eyebrow,
.volet .entremise-step__label { color: var(--iv-gold); }
.volet .entremise-title { color: var(--iv-gold); }
.volet .entremise-gloss { color: var(--iv-ink-soft); }
.volet .entremise-lead,
.volet .entremise-step__body { color: var(--iv-ink); }
.volet .entremise-step::before { background: var(--iv-rule); opacity: 0.8; }
.volet .entremise-coda {
  color: var(--iv-gold);
  border-top: 0.5px solid var(--iv-rule);
}
.volet ::selection { background: rgba(135, 103, 48, 0.18); color: var(--iv-ink); }

/* Barre de navigation sur l'ivoire (sauf menu mobile ouvert, qui reste noir) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Mentions légales en volet ivoire ───────────────────────── */
.footer-sep { margin: 0 0.9rem; color: var(--c-gray); }
.pillars-title { text-wrap: balance; }

/* ── Téléphone : sections à hauteur de contenu ──────────────── */
@media (max-width: 768px) {
  .section:not(#hero):not(#contact) { min-height: 0; }
}

/* ── Signature géographique du hero : « Arc lémanique » ──
   Chaque partie reste insécable ; sur mobile, les deux parties
   passent sur deux lignes et le point médian disparaît.       */
.hero-sub .hs-part { white-space: nowrap; }
@media (max-width: 768px) {
  .hero-sub .hs-sep { display: none; }
  .hero-sub .hs-part { display: block; }
  .hero-sub .hs-part + .hs-sep + .hs-part { margin-top: 0.35em; }
}

/* ── Ligne de positionnement du hero ── */
.hero-scope { margin-bottom: var(--sp-4); }
.hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: var(--t-base);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--c-ivory);
  opacity: 0.88;
  text-align: center;
  max-width: 34em;
  margin: 0 auto var(--sp-6);
  animation: fade-up 1.1s ease 1.25s both;
}
.hero-tagline em { font-style: italic; color: var(--c-gold); white-space: nowrap; }
@media (max-width: 768px) {
  .hero-scope { margin-bottom: var(--sp-3); }
  .hero-tagline { font-size: clamp(1.0rem, 4.1vw, 1.15rem); padding: 0 var(--sp-2); }
  .hero-tagline .ht-list, .hero-tagline em { display: block; }
  .hero-tagline em { margin-top: 0.15em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tagline { animation: none !important; opacity: 0.88 !important; transform: none !important; }
}

/* ── « Un seul interlocuteur » → contact, sans effet visible au repos ── */
.hero-tagline a.ht-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--c-gold), var(--c-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 0.5px;
  padding-bottom: 2px;
  transition: background-size 0.6s ease;
}
.hero-tagline a.ht-link:hover,
.hero-tagline a.ht-link:focus-visible { background-size: 100% 0.5px; outline: none; }
@media (max-width: 768px) { .hero-tagline a.ht-link { display: inline-block; } }

/* ── Piliers : survol affirmé (octobre 2026)
   L'univers survolé s'éclaire, les deux autres s'effacent.
   Uniquement sur appareils à souris : rien ne change au toucher. ── */
@media (hover: hover) and (min-width: 769px) {
  .pillar { transition: background var(--dur-base) ease, border-color var(--dur-base) ease, opacity 0.6s ease; }
  .pillar .pillar-media img { transition: filter 0.7s ease, transform 1.4s var(--ease-luxury); }
  .pillars-grid:hover .pillar:not(:hover) { opacity: 0.42; }
  .pillars-grid:hover .pillar:not(:hover) .pillar-media img { filter: grayscale(0.85) brightness(0.7) contrast(1.05); }
  .pillar:hover { background: rgba(201, 164, 88, 0.05); }
  .pillar:hover .pillar-media img { filter: saturate(1) brightness(1.06) contrast(1.05); transform: scale(1.045); }
  .pillar:hover .pillar-name { color: var(--c-gold); }
  .pillar:hover .pillar-desc { color: var(--c-ivory); }
}
@media (prefers-reduced-motion: reduce) {
  .pillars-grid:hover .pillar:not(:hover) { opacity: 0.6; }
  .pillar:hover .pillar-media img { transform: none; }
}

/* ── Philosophie : citation centrée, véritable temps de pause ── */
@media (min-width: 769px) {
  #philosophy .philosophy-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--sp-5);
  }
  #philosophy .phil-label { writing-mode: horizontal-tb; rotate: 0deg; padding-left: 0.35em; }
  #philosophy .phil-quote { margin: 0 auto; }
}

/* ── Tablette (769–1100 px) : menu burger, comme sur mobile ──
   Les cinq liens + FR/EN ne tiennent pas sur une ligne à ces largeurs. */
@media (min-width: 769px) and (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-right::before { display: none; }
  .nav-right .lang-sw { display: none; }
  .nav-burger { display: flex; }
}

/* ── Contact : filet entre l'invitation et le nom, avec de l'air ── */
#contact .contact-signature { margin-top: clamp(1.75rem, 3vw, 2.75rem); padding-top: 0; }
#contact .contact-signature::before {
  width: 40px; height: 0.5px; opacity: 0.9;
  margin: 0 auto clamp(1.5rem, 2.4vw, 2.25rem);
}

/* ── Piliers : lisibilité (octobre 2026) ──
   Interligne des phrases resserré ; services et « Découvrir » éclaircis. */
@media (min-width: 769px) {
  .pillar-desc { line-height: 1.6; }
}
.pillar-fn { color: #A39A88; }
.pillar-more { color: #B4944F; }
.pillar:hover .pillar-more { color: var(--c-gold-lt); }

/* ── Bas de page : patina-group.ch exactement au centre ── */
@media (min-width: 769px) {
  .footer-meta {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: var(--sp-4);
  }
  .footer-meta .footer-copy { justify-self: start; }
  .footer-meta .footer-url { justify-self: center; }
  .footer-meta .footer-priv { justify-self: end; }
}

@media (max-width: 768px) {
  .footer-copy .fc-sep { display: none; }
  .footer-copy .fc-part { display: block; }
}

/* ── Approche : engagements (option B) ── */
.approach-commit { list-style: none; margin: var(--sp-3) 0 0; padding: 0; max-width: 64ch; }
.approach-commit li {
  display: grid; grid-template-columns: minmax(11rem, 14rem) 1fr; column-gap: var(--sp-4);
  align-items: baseline;
  padding: 1.05rem 0; border-bottom: var(--border-ghost);
}
.approach-commit li:first-child { border-top: var(--border-ghost); }
.approach-commit .ac-k {
  font-family: 'Cormorant SC', serif; font-size: clamp(1.0rem, 1.05vw, 1.15rem);
  letter-spacing: 0.18em; color: var(--c-gold);
}
.approach-commit .ac-v { font-size: var(--t-base); line-height: 1.6; color: var(--c-text-body); }
@media (max-width: 768px) {
  .approach-commit li { grid-template-columns: 1fr; row-gap: 0.35rem; }
}

/* ── Approche : engagements en pile (titre au-dessus du texte) ── */
.approach-commit li { grid-template-columns: 1fr; row-gap: 0.3rem; padding: 1.15rem 0; }
.approach-commit .ac-k { letter-spacing: 0.22em; }
.approach-commit .ac-v { max-width: 58ch; }

/* ── Approche : engagements en cascade (octobre 2026) ── */
.js .approach-commit.reveal { opacity: 1; transform: none; }
.js .approach-commit li { opacity: 0; transform: translateY(14px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.1,1); }
.js .approach-commit.is-visible li { opacity: 1; transform: none; }
.js .approach-commit li:nth-child(2) { transition-delay: 0.22s; }
.js .approach-commit li:nth-child(3) { transition-delay: 0.44s; }
.js .approach-commit li:nth-child(4) { transition-delay: 0.66s; }
.js .approach-commit li:nth-child(5) { transition-delay: 0.88s; }
@media (prefers-reduced-motion: reduce) {
  .js .approach-commit li { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ── Approche : bandeau photo plein écran, titre par-dessus (octobre 2026) ── */
#approach { flex-direction: column; align-items: stretch; }
#approach .approach-grid { grid-template-columns: 1fr !important; max-width: 46rem; margin: 0 auto; }
#approach .section-inner { padding-top: clamp(3rem, 6vw, 5.5rem); }
.approach-band {
  position: relative; height: 100svh; min-height: 34rem; overflow: hidden;
  display: flex; align-items: flex-end;
}
.approach-band__media { position: absolute; inset: 0; }
.approach-band__media img {
  position: absolute; left: 0; width: 100%; height: 116%; top: -8%;
  object-fit: cover; object-position: 50% 72%;
  filter: saturate(0.85) brightness(0.92);
  will-change: transform; transform: translate3d(0,0,0) scale(1.06);
  transition: transform 2.4s cubic-bezier(.2,.7,.1,1);
}
.approach-band.is-in .approach-band__media img { transform: translate3d(0,var(--py,0px),0) scale(1); }
.approach-band__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(11,10,8,.50) 0%, rgba(11,10,8,0) 22%, rgba(11,10,8,0) 58%, rgba(11,10,8,.35) 80%, rgba(11,10,8,.75) 94%, var(--c-black) 100%);
}
.approach-band__inner {
  position: relative; width: 100%; max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--section-pad-h) clamp(3rem, 8vh, 6rem);
}
.approach-band__title {
  margin: 0; color: var(--c-ivory);
  text-shadow: 0 1px 24px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.4s ease .25s, transform 1.4s cubic-bezier(.2,.7,.1,1) .25s;
}
.approach-band.is-in .approach-band__title { opacity: 1; transform: none; }
@media (max-width: 768px) {
  .approach-band { height: 78svh; min-height: 28rem; }
  .approach-band__media img { object-position: 50% 88%; }
}
@media (prefers-reduced-motion: reduce) {
  .approach-band__media img { transform: none !important; transition: none; }
  .approach-band__title { opacity: 1; transform: none; transition: none; }
}

/* ── Accueil : ouverture animée (octobre 2026) ──
   Les deux ∞ se dessinent, PATINA apparaît lettre par lettre pendant le tracé ; un reflet doré traverse le nom une fois.
   Nom complet à 2,7 s, message lisible vers 3,3 s. */
.js .hero-mono { animation: none; opacity: 1; }
.hero-title { position: relative; font-kerning: none; }
.hero-title .pl { display: inline-block; }
.js .hero-title { animation: none; opacity: 1; }
.js .hero-title .pl {
  animation: patina-letter 0.9s cubic-bezier(.2,.7,.1,1) both;
  animation-delay: calc(1.2s + var(--i) * 0.12s);
}
@keyframes patina-letter {
  from { opacity: 0; transform: translateY(0.16em); filter: blur(7px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.js .hero-title::after {
  content: attr(data-sheen);
  content: attr(data-sheen) / "";
  position: absolute; inset: 0;
  padding-left: inherit; text-align: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, transparent 40%, var(--c-gold-lt) 50%, transparent 60%, transparent 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: patina-sheen 1.6s ease-in-out 2.7s both;   /* la bande dorée passe sur le nom au moment où le reste se pose : pas de temps mort */
}
@keyframes patina-sheen {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
/* Le texte prolonge la vague des lettres : même courbe, même montée douce,
   et il démarre pendant que le A se pose (aucun temps mort entre le nom et la suite). Le reflet vient en dernier, une fois tout immobile. */
@keyframes hero-settle {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.js .hero-sub, .js .hero-metier, .js .hero-scope, .js .hero-tagline, .js .hero-rule {
  animation-name: hero-settle;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.2,.7,.1,1);
}
.js .hero-sub { animation-delay: 2.0s; }
.js .hero-metier { animation-delay: 2.15s; }
.js .hero-scope { animation-delay: 2.3s; }
.js .hero-tagline { animation-delay: 2.45s; }
.js .hero-rule { animation-delay: 2.6s; }

/* Retour dans la même session (ex. depuis les mentions légales) :
   pas de séquence, l'accueil apparaît en un seul fondu court. */
html.intro-short .hero-content { animation: fade-up 0.7s ease both; }
html.intro-short .hero-mono,
html.intro-short .hero-title,
html.intro-short .hero-title .pl,
html.intro-short .hero-sub,
html.intro-short .hero-metier,
html.intro-short .hero-scope,
html.intro-short .hero-tagline,
html.intro-short .hero-rule,
html.intro-short .nav,
html.intro-short .nav-top-rule { animation: none !important; }
html.intro-short .hero-title::after { content: none; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-title .pl { animation: none; opacity: 1; transform: none; filter: none; }
  .js .hero-title::after { content: none; animation: none; }
}

/* ── Philosophie : respiration plus courte sur grand écran ── */
@media (min-width: 769px) { #philosophy { min-height: 66svh; } }

/* ── Contact : « Ajouter à mes contacts » (fiche vCard) ── */
.contact-vcard {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: var(--sp-3) auto 0;
  font-family: 'Cormorant SC', serif; font-size: var(--t-xs); letter-spacing: 0.22em;
  color: #B4944F; text-decoration: none;
  transition: color var(--dur-fast) ease;
}
.contact-vcard svg { width: 13px; height: 13px; }
.contact-vcard:hover, .contact-vcard:focus-visible { color: var(--c-gold-lt); }

/* ── Contact : portrait du fondateur (octobre 2026) ──
   Ordre : invitation, filet doré, portrait, nom. Sans cadre, comme les photos des univers.
   Le symbole ∞ est retiré de cette section pour laisser la place au portrait. */
#contact .contact-signature { margin-top: 0; }
#contact .contact-signature::before { display: none; }
#contact .contact-id::before {
  content: ""; display: block; width: 40px; height: 0.5px;
  background: var(--c-gold); opacity: 0.9;
  margin: clamp(1.5rem, 2.2vw, 2.25rem) auto clamp(1.1rem, 1.6vw, 1.5rem);
}
.contact-portrait {
  width: clamp(120px, 9.5vw, 140px); aspect-ratio: 1 / 1;
  margin: 0 auto clamp(0.9rem, 1.2vw, 1.2rem);
  overflow: hidden; background: var(--c-black);
}
.contact-portrait img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  filter: brightness(0.9) contrast(1.04);
}
@media (min-width: 769px) {
  .contact-hq { margin-top: clamp(1.25rem, 2.6vw, 2rem); }
}
/* La place de la barre de navigation est déjà réservée par scroll-margin-top : pas besoin de la doubler en haut du contact */
@media (min-width: 769px) {
  #contact { padding-top: clamp(1.25rem, 3vh, 2.5rem); }
  #contact .contact-signature { white-space: nowrap; }   /* le nom reste sur une ligne, même sur grand écran */
}
@media (min-width: 769px) and (max-height: 820px) {
  .contact-portrait { width: 116px; }
  .contact-hq { margin-top: 1rem; }
  #contact .contact-id::before { margin: 1.1rem auto 0.9rem; }
  .contact-vcard { margin-top: var(--sp-2); }
}

/* ── Approche : introduction au même interligne que les engagements ──
   Même police, taille plus grande ; l'interligne commun lie les deux blocs. */
.approach-body { line-height: 1.6; }
@media (max-width: 768px) { .approach-body { line-height: 1.7; } }

/* ══════════════════════════════════════════════════════════════
   PAGES DE SERVICE (papier ivoire, même grammaire que les volets)
   ══════════════════════════════════════════════════════════════ */
html:has(> body.page-ivoire) { background: var(--iv-paper); }
body.page-ivoire { background: var(--iv-paper); }
body.page-ivoire:not(.menu-open) .nav,
body.page-ivoire:not(.menu-open) .nav.scrolled {
  background: rgba(244, 240, 230, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(168, 144, 96, 0.35);
  box-shadow: none;
}
body.page-ivoire:not(.menu-open) .nav-top-rule { background: var(--iv-gold); }
body.page-ivoire:not(.menu-open) .nav-logo svg path { stroke: var(--iv-gold); }
body.page-ivoire:not(.menu-open) .nav-wordmark { color: var(--iv-gold); }
body.page-ivoire:not(.menu-open) .nav-links a,
body.page-ivoire:not(.menu-open) .lang-btn { color: var(--iv-ink-soft); }
body.page-ivoire:not(.menu-open) .nav-links a:hover,
body.page-ivoire:not(.menu-open) .lang-btn:not(.is-active):hover { color: var(--iv-ink); }
body.page-ivoire:not(.menu-open) .nav-links a.is-active { color: var(--iv-gold); }
body.page-ivoire:not(.menu-open) .lang-btn.is-active,
body.page-ivoire:not(.menu-open) .lang-btn.is-active:hover,
body.page-ivoire:not(.menu-open) .lang-btn.is-active:focus { color: var(--iv-gold) !important; }
body.page-ivoire:not(.menu-open) .nav-links a::after,
body.page-ivoire:not(.menu-open) .lang-btn::after,
body.page-ivoire:not(.menu-open) .nav-burger span { background: var(--iv-gold); }
body.page-ivoire:not(.menu-open) .lang-sep { background: var(--iv-rule); }
body.page-ivoire:not(.menu-open) .nav-right::before { background: transparent; }
body.page-ivoire:not(.menu-open) :focus-visible { outline-color: var(--iv-gold); }
.volet.volet--page {
  display: block;
  position: relative;
  min-height: 0;
  padding-top: calc(var(--nav-h) + var(--sp-8));
  padding-bottom: var(--sp-8);
  background: var(--iv-paper);
}
@media (max-width: 768px) { .volet.volet--page { padding-top: calc(var(--nav-h) + var(--sp-6)); } }
.volet--page .entremise-title { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.1; }
.volet--page .entremise-title em { font-style: italic; }
/* L'Entremise : le titre garde la taille de l'ancien volet */
.volet--entremise .entremise-title { font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.04; }
.page-figure {
  margin: 0 auto var(--sp-7);
  max-width: 640px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--iv-paper);
}
.page-figure img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
  transform: scale(1.22);   /* retire le vignettage sombre des bords, prévu pour le fond noir */
}
.volet--page .page-h2 {
  display: block;
  font-family: 'Cormorant SC', serif;
  font-weight: 400;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  color: var(--iv-gold);
  margin: 0 0 var(--sp-2);
}
.volet--page .page-part { margin-top: var(--sp-8); }
.volet--page .page-part > .page-h2 { text-align: center; margin-bottom: var(--sp-5); padding-left: 0.22em; }
.page-faq { display: flex; flex-direction: column; gap: var(--sp-5); }
.page-faq h3 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 400;
  font-size: var(--t-md); line-height: 1.35;
  color: var(--iv-ink);
  margin: 0 0 var(--sp-1);
}
.page-faq p { font-size: var(--t-base); line-height: 1.8; color: var(--iv-ink); }
.page-faq > div { padding-bottom: var(--sp-4); border-bottom: 0.5px solid var(--iv-rule); }
.page-faq > div:last-child { border-bottom: none; padding-bottom: 0; }
a.page-back {
  display: table;
  margin: var(--sp-7) auto 0;
  font-family: 'Cormorant SC', serif;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  color: var(--iv-ink-soft);
  transition: color var(--dur-fast) ease;
}
a.page-back:hover, a.page-back:focus-visible { color: var(--iv-gold); }
/* Pages intérieures : la barre est là d'emblée (l'entrée retardée accompagne la séquence d'accueil) */
.page-ivoire .nav { animation: none; }
/* Pied de page (noir) sous une page ivoire */
.page-ivoire .footer { background: var(--c-black); padding-top: var(--sp-6); }

/* ══════════════════════════════════════════════════════════════
   PAGE MENTIONS LÉGALES (papier ivoire, une langue par page)
   ══════════════════════════════════════════════════════════════ */
.volet--legal-page .entremise-inner { max-width: 760px; }
.legal-updated {
  text-align: center; font-style: italic;
  font-size: var(--t-sm); color: var(--iv-ink-soft);
  margin: 0 auto var(--sp-6);
}
.legal-content { text-align: left; }
.legal-content .section-label {
  display: block;
  font-family: 'Cormorant SC', serif; font-size: var(--t-xs);
  letter-spacing: 0.3em; color: var(--iv-gold);
  margin: var(--sp-7) 0 var(--sp-4); padding-top: var(--sp-5);
  border-top: 0.5px solid var(--iv-rule);
}
.legal-content .section-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-content h2 {
  font-family: 'Cormorant SC', serif; font-weight: 400;
  font-size: var(--t-md); letter-spacing: 0.06em; line-height: 1.3;
  color: var(--iv-ink); margin: var(--sp-5) 0 var(--sp-2);
}
.legal-content p, .legal-content li { font-size: var(--t-base); line-height: 1.75; color: var(--iv-ink); }
.legal-content p { margin-bottom: var(--sp-2); }
.legal-content strong { font-weight: 600; color: var(--iv-ink); }
.legal-content .legal-meta { font-style: italic; color: var(--iv-ink-soft); margin-bottom: var(--sp-4); }
.legal-content .entity-block { border-left: 0.5px solid var(--iv-rule); padding-left: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.legal-content .entity-block p { margin-bottom: 0.2rem; color: var(--iv-ink-soft); }
.legal-content .rights-list { list-style: none; padding: 0; margin: var(--sp-1) 0 var(--sp-3); }
.legal-content .rights-list li { position: relative; padding: 0.3rem 0 0.3rem 1.4rem; }
.legal-content .rights-list li::before { content: '·'; position: absolute; left: 0.35rem; color: var(--iv-gold); }
.legal-content a { color: var(--iv-gold); border-bottom: 0.5px solid var(--iv-rule); transition: color var(--dur-fast) ease; }
.legal-content a:hover, .legal-content a:focus-visible { color: var(--iv-ink); }
.legal-content .cookie-notice-box { border: 0.5px solid var(--iv-rule); padding: var(--sp-3); margin: var(--sp-3) 0; }
.legal-content .cookie-notice-box p { margin: 0; font-style: italic; color: var(--iv-ink-soft); }