/* ============================================================
   HARISTON — Feuille de style partagée
   Palette, typographie, motion : conformes au spec sheet DA.
   Correction contraste actée : --gold-dark #8F711F pour les
   textes < 18px en or/sauge sur fonds clairs.
   ============================================================ */

/* ---------- 1. Jetons de design ---------- */
:root {
  /* Palette marque */
  --green:      #142A21;  /* vert profond, fond marque */
  --green-2:    #1E3B2F;  /* variante (bandeau engagements) */
  --ink:        #10201A;  /* encre, footer, textes forts */
  --ivory:      #F5F0E6;  /* fond lecture */
  --ivory-2:    #FAF7F0;  /* variante ivoire */
  --gold:       #B8922A;  /* or bruni — accents, filets, fonds sombres */
  --gold-dark:  #8F711F;  /* or foncé AA — textes <18px sur fonds clairs */
  --sage:       #7A9B8A;  /* vert sauge — labels secondaires (fonds sombres) */
  --text-dark:  #2C4237;  /* texte courant sur clair */
  --text-light: #CBD6CB;  /* texte courant sur sombre */
  --cream:      #E9DFC8;  /* crème chaud */

  /* Filets */
  --line-gold:      rgba(184,146,42,.3);
  --line-gold-soft: rgba(184,146,42,.2);

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);

  /* Layout */
  --maxw: 1360px;
  --pad: 48px;
}

/* ---------- 2. Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--green);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }

::selection { background: var(--gold); color: var(--ivory); }

h1, h2, h3 { font-weight: 400; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Accessibilité : masquage visuel conservant la sémantique */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Skip-link */
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--gold);
  color: var(--green);
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: transform .3s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--green); }

/* ---------- 3. Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; }
.wrap--narrow { max-width: 1100px; }
.wrap--tight  { max-width: 820px; }

.pad { padding-left: var(--pad); padding-right: var(--pad); }

/* Filigrane H sur sections sombres */
.watermark {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  line-height: 1;
  color: rgba(245,240,230,.05);
  pointer-events: none;
  user-select: none;
}

/* Eyebrow : numéro romain + label + filet */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.eyebrow .num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
}
.eyebrow .label {
  font-size: 12px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--sage);
}
.eyebrow .rule {
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: .5;
}
/* Sur fonds clairs, label secondaire → or foncé AA */
.on-light .eyebrow .label { color: var(--gold-dark); }
.on-light .eyebrow .num   { color: var(--gold-dark); }

/* ---------- 4. Système de révélation (JS requis) ---------- */
/* Sans JS ou en reduced-motion, tout reste visible (voir bas). */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
html.js [data-reveal="line"] {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 1;
}
html.js [data-reveal="curtain"] {
  transform: none;
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s var(--ease);
}
html.js [data-reveal="none"] { transform: none; opacity: 1; }

/* Révélation : préfixée html.js pour ÉGALER/DÉPASSER la spécificité des
   règles de masquage (html.js [data-reveal] = 0-2-1). Sinon le masquage
   l'emporte et le contenu reste invisible malgré la classe .rv-in.
   html.js [data-reveal].rv-in = 0-3-1 > 0-2-1 (couvre aussi line & curtain). */
html.js [data-reveal].rv-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* Manifeste mot à mot */
html.js .mw {
  opacity: .1;
  filter: blur(2px);
  transition: opacity 1.1s var(--ease), filter 1.1s var(--ease);
}
html.js .rv-in .mw { opacity: 1; filter: blur(0); }

/* ---------- 5. Hovers / interactions ---------- */
.imgzoom { overflow: hidden; }
.imgzoom img { transition: transform 1.6s var(--ease); }
.imgzoom:hover img { transform: scale(1.05); }

.mfig .cap {
  transform: translateY(101%);
  transition: transform .7s var(--ease);
}
.mfig:hover .cap,
.mfig:focus-within .cap { transform: translateY(0); }

.lk { position: relative; }
.lk::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  height: 1px; width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.lk:hover::after,
.lk:focus-visible::after,
.lk[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.arrlink .arr {
  display: inline-block;
  transition: transform .5s var(--ease);
}
.arrlink:hover .arr,
.arrlink:focus-visible .arr { transform: translateX(8px); }

.goldfill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color .5s var(--ease);
}
.goldfill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .55s var(--ease);
  z-index: -1;
}
.goldfill:hover,
.goldfill:focus-visible { color: var(--green) !important; }
.goldfill:hover::before,
.goldfill:focus-visible::before { transform: scaleY(1); }

/* ---------- 6. Navigation ---------- */
#hnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 48px;
  color: var(--ivory);
  transition: background .6s var(--ease), padding .6s var(--ease), border-color .6s;
  border-bottom: 1px solid transparent;
}
#hnav.nav-scrolled {
  background: rgba(20,42,33,.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(184,146,42,.25);
}
#hnav a { white-space: nowrap; }

.brand { display: flex; align-items: center; gap: 14px; }
.brand .mono {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 26px;
  border: 1px solid var(--gold);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--gold);
}
.brand .name {
  font-weight: 400;
  letter-spacing: .42em;
  font-size: 14px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.btn-espace {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 11px 22px;
  letter-spacing: .22em;
  font-size: 11.5px;
}
.btn-espace .mono {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  line-height: 1;
}

.burger {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid rgba(184,146,42,.6);
  cursor: pointer;
  padding: 0;
}
.burger .bars { display: flex; flex-direction: column; gap: 6px; }
.burger .bars span { width: 18px; height: 1px; background: var(--ivory); }

/* ---------- 7. Menu mobile plein écran ---------- */
#mmenu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--green);
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity .6s var(--ease), visibility 0s .6s;
}
#mmenu.open {
  visibility: visible;
  opacity: 1;
  transition: opacity .6s var(--ease);
}
#mmenu .mm-watermark {
  right: -12vw; bottom: -14vh;
  font-size: 60vh;
}
.mm-close {
  position: absolute;
  top: 26px; right: 24px;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid rgba(184,146,42,.6);
  color: var(--ivory);
  font-size: 18px;
  cursor: pointer;
}
#mmenu nav {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}
#mmenu .ml {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
#mmenu.open .ml { opacity: 1; transform: none; }
#mmenu .ml:nth-child(1) { transition-delay: .08s; }
#mmenu .ml:nth-child(2) { transition-delay: .16s; }
#mmenu .ml:nth-child(3) { transition-delay: .24s; }
#mmenu .ml:nth-child(4) { transition-delay: .32s; }
#mmenu .ml:nth-child(5) { transition-delay: .40s; }
#mmenu .ml:nth-child(6) { transition-delay: .48s; }
#mmenu .ml.btn-espace {
  margin-top: 18px;
  align-self: flex-start;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: var(--gold);
  text-transform: uppercase;
  padding: 14px 26px;
}
#mmenu .ml.btn-espace .mono {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
}

/* ---------- 8. Boutons génériques ---------- */
.btn-outline {
  display: inline-block;
  border: 1px solid var(--gold);
  color: var(--ivory);
  padding: 20px 48px;
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
}

/* ============================================================
   9. ACCUEIL
   ============================================================ */
/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 20s cubic-bezier(.25,.6,.35,1) alternate infinite;
}
.hero__scrim-1 {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20,42,33,.62) 0%, rgba(20,42,33,.38) 38%,
    rgba(20,42,33,.75) 72%, rgba(16,32,26,.95) 100%);
}
.hero__scrim-2 {
  position: absolute; inset: 0;
  background: linear-gradient(75deg, rgba(20,42,33,.55) 0%, transparent 55%);
}
.hero .watermark { right: -4vw; top: 8vh; font-size: 56vh; }
.hero__inner {
  position: relative;
  padding: 140px 48px 11vh;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}
.hero__eyebrow {
  margin: 0 0 26px;
  font-size: 12.5px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold);
  animation: fadeSoft 1.4s .3s var(--ease) both;
}
.hero h1 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  /* max abaissé 124→116 + max-width levé : chacune des 3 lignes du hero
     tient sur UNE ligne dès 1280px (sinon « entre » se retrouve orphelin). */
  font-size: clamp(42px, 7.4vw, 116px);
  line-height: 1.04;
  letter-spacing: -.01em;
  max-width: none;
}
.hero h1 .row { display: block; overflow: hidden; }
.hero h1 .row > span { display: block; }
html.js .hero h1 .row > span { animation: lineUp 1s var(--ease) both; }
.hero h1 .row:nth-child(1) > span { animation-delay: .25s; }
.hero h1 .row:nth-child(2) > span { animation-delay: .42s; }
.hero h1 .row:nth-child(3) > span { animation-delay: .59s; }
.hero h1 .italic { font-style: italic; color: var(--cream); }
.hero__cta {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 52px;
  animation: fadeSoft 1.4s 1.1s both;
}
.hero__cta .dash { width: 64px; height: 1px; background: var(--gold); }
.hero__cta a {
  font-size: 12.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ivory);
}
.hero__cta .arr { color: var(--gold); }
.hero__scroll {
  position: absolute;
  bottom: 0; left: 50%;
  width: 1px; height: 72px;
  background: rgba(245,240,230,.5);
  animation: scrollPulse 2.6s cubic-bezier(.45,0,.35,1) infinite;
}

/* Sections génériques accueil */
.section { padding: 140px 48px 120px; position: relative; }
.section--light  { background: var(--ivory); color: var(--ink); }
.section--light2 { background: var(--ivory-2); color: var(--ink); }
.section--dark   { background: var(--green); color: var(--ivory); overflow: hidden; }

.lead {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.85;
  color: var(--text-dark);
  text-wrap: pretty;
}
.lead--light { color: var(--text-light); }

/* Esprit */
.split {
  display: grid;
  gap: clamp(40px, 6vw, 110px);
  margin-top: 70px;
  align-items: start;
}
.split--7-5 { grid-template-columns: 7fr 5fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }
.h2-read {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 3.6vw, 58px);
  line-height: 1.18;
  max-width: 22ch;
}
.h2-read em { color: var(--green-2); font-style: italic; }
.small-caps-gold {
  margin: 40px 0 0;
  font-size: 12px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-dark);   /* <18px sur clair → or foncé */
}
.fig-portrait {
  margin: 60px 0 0;
  aspect-ratio: 4/5;
  position: relative;
}
.fig-portrait img { width: 100%; height: 112%; object-fit: cover; display: block; }

/* Bandeau engagements */
.engagements {
  background: var(--green-2);
  color: var(--ivory);
  border-top: 1px solid rgba(184,146,42,.4);
  border-bottom: 1px solid rgba(184,146,42,.4);
  padding: 52px 48px;
}
.engagements .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}
.engagements .item { display: flex; align-items: baseline; gap: 16px; }
.engagements .item .dash {
  width: 28px; height: 1px;
  background: var(--gold);
  transform: translateY(-4px);
  flex-shrink: 0;
}
.engagements .item p {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  line-height: 1.4;
}

/* Fondateur */
.section--dark .watermark.wm-founder { left: -6vw; bottom: -10vh; font-size: 52vh; color: rgba(245,240,230,.04); }
.h2-brand {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.2vw, 68px);
  line-height: 1.15;
  max-width: 18ch;
}
.h2-brand em { color: var(--gold); font-style: italic; }
.fig-founder { margin: 0; aspect-ratio: 3/4; position: relative; }
/* Portrait officiel : étalonnage (fusion verte des bords, gradation chaude)
   cuit dans le fichier — aucun filtre CSS par-dessus. */
.fig-founder img {
  width: 100%; height: 110%;
  object-fit: cover; display: block;
}
.fig-founder figcaption {
  position: absolute; left: 0; bottom: 0;
  padding: 16px 20px;
  background: linear-gradient(0deg, rgba(16,32,26,.8), transparent);
  width: 100%;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cream);
}
.signature { display: flex; align-items: center; gap: 22px; margin-top: 44px; }
.signature .dash { width: 56px; height: 1px; background: var(--gold); }
.signature .name {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-style: italic;
}
.signature .role {
  margin: 4px 0 0;
  font-size: 11.5px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--sage);
}

/* Métiers */
.metiers { display: flex; flex-direction: column; margin-top: 30px; }
.metier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 90px);
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid rgba(184,146,42,.28);
}
.metier--rev { direction: rtl; }
.metier--rev > * { direction: ltr; }
.metier figure { margin: 0; aspect-ratio: 16/11; position: relative; }
.metier figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.metier .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 20px;
  background: linear-gradient(0deg, rgba(16,32,26,.85), rgba(16,32,26,0));
  color: var(--cream);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.metier .num {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(44px, 4.5vw, 72px);
  line-height: 1;
  color: rgba(122,155,138,.55);
}
.metier h3 {
  margin: 18px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.15;
}
.metier p.desc {
  margin: 24px 0 0;
  font-weight: 300;
  font-size: 17.5px;
  line-height: 1.8;
  max-width: 46ch;
  color: var(--text-dark);
  text-wrap: pretty;
}
.consult {
  display: inline-block;
  margin-top: 30px;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--green-2);
}
.consult .arr { color: var(--gold-dark); }  /* flèche <18px sur clair → or foncé */

/* Nomade */
.nomade { background: var(--ivory); color: var(--ink); padding: 60px 0 0; position: relative; }
.nomade__inner { max-width: var(--maxw); margin: 0 auto; padding: 80px 48px 100px; position: relative; }
.nomade__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: end;
}
.h2-nomade {
  margin: 48px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5vw, 84px);
  line-height: 1.08;
}
.h2-nomade em { color: var(--green-2); font-style: italic; }
.nomade .lead { margin: 38px 0 0; max-width: 44ch; }
.fig-nomade {
  margin: 0 -48px -100px 0;
  aspect-ratio: 16/12;
  position: relative;
}
.fig-nomade img { width: 100%; height: 114%; object-fit: cover; display: block; }

/* Manifeste */
.manifeste {
  background: var(--green);
  color: var(--ivory);
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 48px;
  position: relative;
  overflow: hidden;
}
.manifeste .watermark {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 90vh;
  color: rgba(245,240,230,.03);
}
.manifeste blockquote { margin: 0; max-width: 1080px; position: relative; }
.manifeste blockquote p {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4.4vw, 68px);
  line-height: 1.32;
}
.manifeste footer {
  margin-top: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.manifeste footer .dash { width: 44px; height: 1px; background: var(--gold); }
.manifeste footer .label {
  font-size: 11.5px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Contact */
.contact {
  background: var(--green);
  color: var(--ivory);
  border-top: 1px solid rgba(184,146,42,.25);
  padding: 160px 48px 140px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.contact__inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact .num {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
}
.contact h2 {
  margin: 34px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 1.05;
}
.contact h2 em { color: var(--gold); font-style: italic; }
.contact .lead { margin: 40px 0 0; max-width: 46ch; }
.contact .btn-outline { margin-top: 56px; }

/* ============================================================
   10. HONORAIRES
   ============================================================ */
.page-header {
  background: var(--green);
  color: var(--ivory);
  padding: 200px 48px 110px;
  position: relative;
  overflow: hidden;
}
.page-header .watermark { right: -6vw; top: -8vh; font-size: 60vh; color: rgba(245,240,230,.04); }
.page-header__eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold);
  animation: fadeSoft 1.2s .2s both;
}
.page-header h1 {
  margin: 30px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5.4vw, 88px);
  line-height: 1.1;
  max-width: 16ch;
}
.page-header h1 .row { display: block; overflow: hidden; }
.page-header h1 .row > span { display: block; }
html.js .page-header h1 .row > span { animation: lineUp 1s var(--ease) both; }
.page-header h1 .row:nth-child(1) > span { animation-delay: .25s; }
.page-header h1 .row:nth-child(2) > span { animation-delay: .42s; }
.page-header h1 .italic { font-style: italic; color: var(--gold); }
.page-header .lead {
  margin: 36px 0 0;
  max-width: 56ch;
  font-size: 17px;
  color: var(--text-light);
  animation: fadeSoft 1.2s .7s both;
}

.hono-section { padding: 120px 48px 90px; background: var(--ivory); color: var(--ink); }
.hono-section--alt { background: var(--ivory-2); padding: 100px 48px; }
.hono-section--last { padding: 100px 48px 120px; }

.hono-section h2 {
  margin: 46px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.2;
}
.hono-section h2 + .hono-note { margin-top: 20px; }
.hono-note {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  max-width: 62ch;
  color: var(--text-dark);
}
.hono-note em { font-style: italic; }

/* Tables honoraires */
.fee-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 48px;
  border-top: 1px solid var(--gold);
}
.fee-table--tight { margin-top: 40px; }
.fee-table td,
.fee-table th {
  padding: 26px 12px;
  border-bottom: 1px solid var(--line-gold);
  text-align: left;
  vertical-align: baseline;
}
.fee-table tbody tr { transition: background .5s var(--ease); }
.fee-table tbody tr:hover { background: rgba(184,146,42,.06); }
.fee-table .label {
  font-weight: 300;
  font-size: 16.5px;
  letter-spacing: .02em;
  color: var(--ink);
}
.fee-table .note {
  display: block;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--green-2);  /* sous-note <18px sur clair → vert foncé */
}
/* Sous-note d'un prix (ex. « 6,0 % HT ») : alignée sous le montant */
.fee-table .price .note { margin-top: 4px; letter-spacing: .04em; }
.fee-table .price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  line-height: 1;
  color: var(--green-2);
  text-align: right;
  white-space: nowrap;
}
.fee-table .price--sm { font-size: 30px; }
.fee-table .unit {
  font-size: 16px;
  color: var(--gold-dark);   /* unité <18px sur clair → or foncé */
  letter-spacing: .1em;
}
/* Table location 3 colonnes */
.fee-table--loc thead th {
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-dark);   /* en-tête <18px sur clair → or foncé */
  font-weight: 400;
  border-bottom: 1px solid rgba(184,146,42,.5);
  padding: 18px 12px;
}
.fee-table--loc th.num,
.fee-table--loc td.num { text-align: right; }
.fee-table--loc td.num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  line-height: 1;
  color: var(--green-2);
  white-space: nowrap;
}
.fee-caption {
  margin: 26px 0 0;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--green-2);   /* caption <18px sur clair → vert foncé */
}

/* Mentions honoraires (bloc sombre) */
.hono-mentions {
  background: var(--green);
  color: var(--text-light);
  padding: 90px 48px;
}
.hono-mentions .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
}
.hono-mentions .k {
  margin: 0;
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
}
.hono-mentions .v {
  margin: 16px 0 0;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
}

/* ============================================================
   11. ESPACE CLIENT
   ============================================================ */
.espace {
  color: var(--ivory);
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 180px 48px 120px;
  overflow: hidden;
}
.espace .watermark {
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  font-size: 110vh;
  color: rgba(245,240,230,.035);
}
.espace__inner { max-width: var(--maxw); margin: 0 auto; width: 100%; position: relative; }
.espace__eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  animation: fadeSoft 1.2s .2s both;
}
.espace h1 {
  margin: 28px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 5.4vw, 88px);
  line-height: 1.1;
  text-align: center;
}
.espace h1 .row { display: block; overflow: hidden; }
.espace h1 .row > span { display: block; }
html.js .espace h1 .row > span { animation: lineUp 1s var(--ease) both; }
.espace h1 .row:nth-child(1) > span { animation-delay: .25s; }
.espace h1 .row:nth-child(2) > span { animation-delay: .42s; }
.espace h1 .italic { font-style: italic; color: var(--gold); }
.espace__lead {
  margin: 34px auto 0;
  max-width: 52ch;
  text-align: center;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-light);
  animation: fadeSoft 1.2s .7s both;
  text-wrap: pretty;
}
.espace__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  margin-top: 80px;
}
.espace__grid--single {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.ccard {
  border: 1px solid rgba(184,146,42,.35);
  background: rgba(30,59,47,.45);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s;
}
.ccard:hover {
  transform: translateY(-8px);
  border-color: rgba(184,146,42,.8);
  box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(184,146,42,.25), 0 0 42px rgba(184,146,42,.12);
}
.ccard .num {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 44px;
  line-height: 1;
  color: rgba(122,155,138,.85);
}
.ccard h2 {
  margin: 22px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 29px;
  line-height: 1.2;
}
.ccard .metier {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--sage);
}
.ccard p.txt {
  margin: 24px 0 0;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-light);
  flex: 1;
  text-wrap: pretty;
}
.ccard .goldfill {
  margin-top: 32px;
  align-self: flex-start;
  border: 1px solid var(--gold);
  color: var(--ivory);
  padding: 14px 28px;
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.espace__help {
  margin: 64px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--sage);
}
.espace__help a { color: var(--cream); }

/* ============================================================
   12. PAGES INTÉRIEURES / LÉGALES
   ============================================================ */
.legal { background: var(--ivory); color: var(--ink); }
.legal__body { padding: 90px 48px 120px; }
.legal__inner { max-width: 820px; margin: 0 auto; }
.legal h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  margin: 64px 0 0;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 40px 0 0;
}
.legal p, .legal li {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-dark);
  max-width: 68ch;
}
.legal p { margin: 16px 0 0; }
.legal ul { margin: 16px 0 0; padding-left: 20px; }
.legal li { margin: 8px 0 0; }
.legal a.inline { color: var(--green-2); }
.legal .todo {
  color: var(--gold-dark);
  font-style: italic;
}

/* ============================================================
   13. 404
   ============================================================ */
.err {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 160px 48px 120px;
  position: relative;
  overflow: hidden;
  background: var(--green);
  color: var(--ivory);
}
.err .watermark {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 90vh;
  color: rgba(245,240,230,.04);
}
.err__inner { position: relative; max-width: 640px; }
.err .code {
  margin: 0;
  font-size: 12px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold);
}
.err h1 {
  margin: 28px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 1.08;
}
.err h1 em { font-style: italic; color: var(--gold); }
.err p {
  margin: 32px 0 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-light);
  text-wrap: pretty;
}
.err .btn-outline { margin-top: 48px; }

/* ============================================================
   14. FOOTER (complet, 4 colonnes) — commun à toutes les pages
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--sage);
  padding: 90px 48px 48px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-gold-soft);
}
.site-footer .brand { color: var(--ivory); }
.site-footer .brand .mono {
  font-size: 22px;
  width: 34px; height: 34px;
  border-color: rgba(184,146,42,.5);
}
.site-footer .brand .name { font-size: 12.5px; letter-spacing: .4em; }
.site-footer__blurb {
  margin: 22px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  max-width: 32ch;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 12.5px;
  letter-spacing: .12em;
}
.footer-col .head {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-col a { align-self: flex-start; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 34px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.site-footer__bottom p { margin: 0; }
.site-footer__motto {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: none;
  color: var(--gold);
}

/* ============================================================
   14b. Téléphone (nav / menu mobile / footer)
   ============================================================ */
.tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--ivory);
  white-space: nowrap;
}
.tel .tel__ico {
  width: 15px; height: 15px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--gold);
}
.tel:hover { color: var(--gold); }
.tel:hover .tel__ico { color: var(--gold); }
.tel[aria-disabled="true"] { cursor: default; }
/* Bande de bureau étroite (1181–1300px) : le numéro complet céderait la
   place ; on le remplace par une pastille circulaire contour or (icône
   seule), dans l'esprit du bouton Espace client. Le lien tel: reste actif ;
   aria-label et title portent le numéro (posés par main.js).
   ≥1300px : numéro complet. ≤1180px : menu mobile + footer (nav-links masquée). */
@media (min-width: 1181px) and (max-width: 1300px) {
  #hnav .tel {
    gap: 0;
    width: 40px; height: 40px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    justify-content: center;
  }
  #hnav .tel .tel__num { display: none; }
  #hnav .tel .tel__ico { width: 16px; height: 16px; color: var(--gold); }
  #hnav .tel:hover { background: var(--gold); }
  #hnav .tel:hover .tel__ico { color: var(--green); }
}

#mmenu .ml.mm-tel {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--cream);
  margin-top: 8px;
}
#mmenu .ml.mm-tel:nth-child(7) { transition-delay: .56s; }

.site-footer__bottom a[data-phone] { color: var(--sage); }
.site-footer__bottom a[data-phone]:hover { color: var(--gold); }

/* ============================================================
   14c. Formulaire de contact
   ============================================================ */
.cform { width: 100%; text-align: left; }
.cform__field { margin-top: 26px; }
.cform__field:first-child { margin-top: 0; }

.cform legend,
.cform .lbl {
  display: block;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.cform fieldset { border: 0; margin: 0; padding: 0; }

/* Profils — boutons radio en pastilles */
.cform__profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cform__profiles label {
  position: relative;
  cursor: pointer;
}
.cform__profiles input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.cform__profiles .pill {
  display: inline-block;
  border: 1px solid rgba(184,146,42,.45);
  color: var(--text-light);
  padding: 12px 22px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.cform__profiles label:hover .pill { border-color: var(--gold); color: var(--ivory); }
.cform__profiles input:checked + .pill {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green);
}
.cform__profiles input:focus-visible + .pill {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.cform input[type="text"],
.cform input[type="email"],
.cform input[type="tel"],
.cform textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(184,146,42,.4);
  color: var(--ivory);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 16px;
  padding: 12px 2px;
  transition: border-color .4s var(--ease);
}
.cform textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.cform input::placeholder,
.cform textarea::placeholder { color: rgba(203,214,203,.5); }
.cform input:focus,
.cform textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.cform input:focus-visible,
.cform textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--gold);
  box-shadow: 0 1px 0 0 var(--gold);
}
/* État d'erreur */
.cform .cform__field.is-error input,
.cform .cform__field.is-error textarea { border-bottom-color: #D98A6A; }
.cform .err-msg {
  display: none;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #E0A488;
  letter-spacing: .02em;
}
.cform .cform__field.is-error .err-msg { display: block; }

.cform__actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.cform button[type="submit"] {
  display: inline-block;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--ivory);
  padding: 18px 44px;
  font-family: 'Jost', sans-serif;
  font-size: 12.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  cursor: pointer;
}
.cform__note {
  margin: 0;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--sage);
}
.cform__note a { color: var(--cream); }
.cform .lbl .opt { text-transform: none; letter-spacing: 0; color: var(--sage); }
.on-cream .cform .lbl .opt { color: var(--gold-dark); }

/* Zone de statut (aria-live) */
.cform__status {
  margin: 28px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  padding: 18px 22px;
  border: 1px solid transparent;
  display: none;
}
.cform__status.is-visible { display: block; }
.cform__status.is-success {
  border-color: rgba(184,146,42,.5);
  background: rgba(184,146,42,.08);
  color: var(--cream);
}
.cform__status.is-error {
  border-color: rgba(217,138,106,.5);
  background: rgba(217,138,106,.08);
  color: #E9C4B4;
}
.cform[hidden] { display: none; }

/* Formulaire sur fond clair (page /contact/) */
.on-cream .cform .cform__profiles .pill { color: var(--text-dark); border-color: rgba(143,113,31,.5); }
.on-cream .cform .cform__profiles label:hover .pill { border-color: var(--gold-dark); color: var(--ink); }
.on-cream .cform .cform__profiles input:checked + .pill { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--ivory); }
.on-cream .cform legend,
.on-cream .cform .lbl { color: var(--gold-dark); }
.on-cream .cform input,
.on-cream .cform textarea { color: var(--ink); border-bottom-color: rgba(143,113,31,.45); }
.on-cream .cform input::placeholder,
.on-cream .cform textarea::placeholder { color: rgba(44,66,55,.5); }
.on-cream .cform input:focus,
.on-cream .cform textarea:focus { border-bottom-color: var(--gold-dark); }
.on-cream .cform button[type="submit"] { color: var(--ink); border-color: var(--gold-dark); }
.on-cream .cform button[type="submit"].goldfill:hover,
.on-cream .cform button[type="submit"].goldfill:focus-visible { color: var(--ivory) !important; }
.on-cream .cform__note { color: var(--gold-dark); }
.on-cream .cform__note a { color: var(--green-2); }

/* ============================================================
   14d. Offres CTA des métiers (accueil)
   ============================================================ */
.metier__offer {
  margin: 26px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.4;
  color: var(--green-2);
}
.metier__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.btn-sm {
  display: inline-block;
  border: 1px solid var(--gold-dark);
  color: var(--ink);
  padding: 13px 26px;
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.metier h3 a { transition: color .4s var(--ease); }
.metier h3 a:hover { color: var(--gold-dark); }

/* Ligne « Nos honoraires sont publics » */
.hono-public {
  margin: 56px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid rgba(184,146,42,.28);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 300;
  color: var(--text-dark);
}
.hono-public a {
  font-size: 12.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--green-2);
}
.hono-public a .arr { color: var(--gold-dark); }

/* Ligne de positionnement (sous les engagements) */
.positioning {
  background: var(--green-2);
  color: var(--cream);
  border-bottom: 1px solid rgba(184,146,42,.4);
  padding: 30px 48px;
  text-align: center;
}
.positioning p {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.4;
  letter-spacing: .01em;
}

/* ============================================================
   14e. Témoignages « Ils nous ont confié »
   ============================================================ */
.temoins {
  background: var(--ivory-2);
  color: var(--ink);
  padding: 130px 48px;
}
.temoins[hidden] { display: none; }
.temoins__head { text-align: center; }
.temoins .rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 0;
  border: 1px solid rgba(143,113,31,.4);
  padding: 10px 20px;
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--text-dark);
}
.temoins .rating[hidden] { display: none; }
.temoins .rating .stars { color: var(--gold-dark); letter-spacing: .1em; }
.temoins__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-top: 70px;
}
.temoin {
  border-top: 1px solid var(--gold);
  padding-top: 34px;
}
.temoin blockquote {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--green-2);
}
.temoin figcaption {
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* ============================================================
   14f. Pages intérieures éditoriales (métiers, carnet) — prose
   ============================================================ */
.prose { background: var(--ivory); color: var(--ink); }
.prose__body { padding: 100px 48px 120px; }
.prose__inner { max-width: 780px; margin: 0 auto; }
.prose__lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.45;
  color: var(--green-2);
  margin: 0 0 10px;
}
.prose h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.2;
  margin: 72px 0 0;
}
.prose h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 44px 0 0;
}
.prose p, .prose li {
  font-weight: 300;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-dark);
  text-wrap: pretty;
}
.prose p { margin: 20px 0 0; }
.prose ul { margin: 20px 0 0; padding-left: 22px; }
.prose li { margin: 10px 0 0; }
.prose li::marker { color: var(--gold-dark); }
.prose a.inline { color: var(--green-2); }
.prose strong { font-weight: 500; color: var(--ink); }

/* FAQ <details> */
.faq { margin-top: 30px; border-top: 1px solid var(--gold); }
.faq details {
  border-bottom: 1px solid var(--line-gold);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 40px 26px 2px;
  position: relative;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
  transition: color .4s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 6px; top: 34px;
  width: 13px; height: 13px;
  background: var(--gold-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--gold-dark); }
.faq details > *:not(summary) { margin-bottom: 4px; }
.faq details p {
  margin: 0 40px 26px 2px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-dark);
  font-weight: 300;
}

/* Encadré récap honoraires dans une page métier */
.recap {
  margin: 48px 0 0;
  border: 1px solid rgba(184,146,42,.4);
  background: var(--ivory-2);
  padding: 34px 36px;
}
.recap .k {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.recap p { margin: 6px 0 0; }
.recap .recap__link {
  display: inline-block;
  margin-top: 18px;
  font-size: 12.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--green-2);
}
.recap .recap__link .arr { color: var(--gold-dark); }

/* Bandeau CTA en pied de page métier */
.metier-cta {
  background: var(--green);
  color: var(--ivory);
  border-top: 1px solid rgba(184,146,42,.25);
  padding: 120px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.metier-cta .watermark { left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 80vh; color: rgba(245,240,230,.035); }
.metier-cta__inner { position: relative; max-width: 720px; margin: 0 auto; }
.metier-cta h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.12;
  margin: 0;
}
.metier-cta h2 em { color: var(--gold); font-style: italic; }
.metier-cta p { margin: 28px 0 0; font-weight: 300; font-size: 18px; line-height: 1.8; color: var(--text-light); }
.metier-cta .btn-outline { margin-top: 44px; }

/* Maillage inter-métiers */
.crosslinks {
  background: var(--ink);
  color: var(--sage);
  padding: 70px 48px;
  border-top: 1px solid var(--line-gold-soft);
}
.crosslinks__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
  align-items: baseline;
}
.crosslinks .head {
  margin: 0;
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
}
.crosslinks a {
  font-size: 13px;
  letter-spacing: .1em;
}

/* ============================================================
   14g. Carnet (index éditorial)
   ============================================================ */
.carnet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-top: 20px;
}
.carnet__empty {
  border: 1px dashed rgba(143,113,31,.4);
  padding: 48px 32px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--gold-dark);
}
.carnet__empty .tag {
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.carnet__empty .ph {
  margin: 14px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
  color: rgba(44,66,55,.5);
}
.carnet__soon {
  margin-top: 60px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-dark);
}

/* ============================================================
   15. Keyframes
   ============================================================ */
@keyframes kenburns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, 1%); }
}
@keyframes lineUp {
  0%   { transform: translateY(110%); }
  100% { transform: translateY(0); }
}
@keyframes fadeSoft {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   16. Responsive
   ============================================================ */
.burger { display: none; }
@media (max-width: 1180px) {
  [data-hide-mobile] { display: none !important; }
  .burger { display: grid; }
}
@media (max-width: 920px) {
  .split, .split--7-5, .split--5-7,
  .engagements .grid,
  .metier,
  .nomade__grid,
  .hono-mentions .grid,
  .espace__grid,
  .temoins__grid,
  .carnet__grid,
  .cform__row,
  .site-footer__grid { grid-template-columns: 1fr !important; }

  .metier--rev { direction: ltr; }

  .pad, .section, .hero__inner, .nomade__inner,
  .page-header, .hono-section, .hono-section--alt, .hono-section--last,
  .hono-mentions, .espace, .engagements, .positioning, .manifeste, .contact,
  .temoins, .prose__body, .metier-cta, .crosslinks,
  .legal__body, .err, .site-footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .fig-portrait { margin-top: 0; }
  .fig-nomade { margin: 0; }
}

/* ============================================================
   17. prefers-reduced-motion — fondus simples / rien
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal],
  html.js .mw,
  html.js .hero h1 .row > span,
  html.js .page-header h1 .row > span,
  html.js .espace h1 .row > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
  .hero__scroll { display: none; }
}

/* ============================================================
   18. Compaction des tableaux d'honoraires sur mobile
   (garantit l'absence de débordement horizontal < 560px)
   ============================================================ */
@media (max-width: 560px) {
  .fee-table { table-layout: fixed; }
  .fee-table td,
  .fee-table th {
    padding: 16px 6px;
    overflow-wrap: anywhere;
  }
  .fee-table .label { font-size: 14.5px; }
  .fee-table .note { font-size: 12px; }
  .fee-table .price { font-size: 24px; white-space: normal; }
  .fee-table .price--sm { font-size: 20px; white-space: normal; }
  .fee-table .unit { font-size: 11px; }
  .fee-table--loc thead th { font-size: 10px; letter-spacing: .14em; padding: 14px 6px; }
  .fee-table--loc td.num { font-size: 17px; white-space: normal; }
}

/* Les emplacements du carnet restent masqués tant qu'aucun billet n'est publié
   (le display:flex de .carnet__empty ne doit pas l'emporter sur [hidden]). */
.carnet__empty[hidden] { display: none !important; }

/* ============================================================
   19. Honoraires — listes « ce qui est compris » + note légale
   ============================================================ */
.hono-incl { margin-top: 40px; }
.hono-incl .k {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.hono-incl ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 48px;
}
.hono-incl li {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0 0 10px;
  padding-left: 20px;
  position: relative;
  break-inside: avoid;
}
.hono-incl li::before {
  content: '';
  position: absolute;
  left: 0; top: .68em;
  width: 10px; height: 1px;
  background: var(--gold-dark);
}
.hono-legal-note {
  margin: 44px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(184,146,42,.25);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-light);
}
@media (max-width: 620px) {
  .hono-incl ul { columns: 1; }
}

/* ============================================================
   20. Cibles tactiles ≥44px sur mobile
   (liens d'action autonomes, téléphone du menu, liens du footer)
   ============================================================ */
@media (max-width: 920px) {
  .hero__cta .arrlink,
  .arrlink.consult,
  .hono-public a.arrlink,
  .recap__link.arrlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  #mmenu .ml.mm-tel { padding: 11px 0; }
  /* Liens autonomes (listes du footer, maillage) → cible tactile 44px.
     Les liens en pleine phrase (.inline) restent inline : exception WCAG. */
  .footer-col a,
  .crosslinks a,
  .site-footer__bottom a,
  .espace__help a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}