/* Gustave Legal — design system (Atelier direction) */
:root {
  --bg: #ffffff;
  --bg-cool: #fafaf9;
  --bg-dark: #0a0a0a;
  --ink: #0a0a0a;
  --ink-soft: #404040;
  --muted: #737373;
  --muted-2: #a3a3a3;
  --line: #e7e5e4;
  --line-dark: rgba(255,255,255,0.12);
  --accent: #c47438;
  --accent-deep: #8e571e;
  --accent-soft: rgba(196,116,56,0.10);
  --display: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1360px;
  /* Champs de formulaire */
  --field: #f7f6f4;
  --field-hover: #f2f0ed;
  --field-line: #d6d3d1;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; position: relative; }
@media (max-width: 700px) { .wrap { padding: 0 20px; } }
.eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--accent); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ── Scroll rail ─────────────────────────────────────── */
.scroll-rail {
  position: fixed; left: 22px; top: 104px; bottom: 28px;
  width: 1px; pointer-events: none; z-index: 0;
}
.scroll-rail .track {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0, rgba(10,10,10,0.09) 12px, rgba(10,10,10,0.09) calc(100% - 12px), transparent 100%);
}
.scroll-rail .fill {
  position: absolute; inset: 0;
  clip-path: inset(0 0 calc((1 - var(--scroll-p, 0)) * 100%) 0);
  background: linear-gradient(to bottom, transparent 0, var(--accent) 12px, var(--accent) calc(100% - 12px), transparent 100%);
}
.scroll-rail .head {
  position: absolute; left: 50%; top: calc(var(--scroll-p, 0) * 100%);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(196,116,56,0.13);
}
@media (max-width: 1180px) { .scroll-rail { display: none; } }

/* ── Nav ─────────────────────────────────────────────── */
nav.top { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; padding: 0 18px; pointer-events: none; }
nav.top .bar {
  max-width: 1400px; margin: 0 auto; padding: 11px 14px 11px 22px;
  display: flex; align-items: center; gap: 18px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line); border-radius: 999px; pointer-events: auto;
}
nav.top.scrolled .bar { background: rgba(255,255,255,0.94); box-shadow: 0 4px 24px -8px rgba(0,0,0,0.09); }
nav.top .brand {
  font-family: var(--display); font-weight: 500; font-size: 19px;
  letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
nav.top .brand .dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
nav.top .brand img { height: 38px; width: auto; }
@media (max-width: 520px) { nav.top .brand img { height: 30px; } }
nav.top .links { display: flex; gap: 2px; margin-left: auto; }
nav.top .links a {
  padding: 8px 12px; border-radius: 999px; font-size: 13.5px; color: var(--ink-soft);
  transition: background .25s ease, color .25s ease; white-space: nowrap;
}
nav.top .links a:hover { background: rgba(0,0,0,0.04); color: var(--ink); }
nav.top .links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
nav.top .links a[aria-current="page"]::after {
  content: ""; display: block; width: 100%; height: 1px;
  background: var(--accent); margin-top: 2px;
}
nav.top .right { display: flex; align-items: center; gap: 8px; }
.lang {
  display: inline-flex; align-items: center; gap: 2px; font-size: 11px;
  letter-spacing: 0.1em; font-weight: 500; text-transform: uppercase;
}
.lang a, .lang span {
  padding: 5px 9px; border-radius: 999px; color: var(--muted);
}
.lang .on { background: var(--ink); color: #fff; }
.cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 17px; background: var(--ink); color: #fff; border-radius: 999px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background .25s ease, transform .2s var(--ease-out);
}
.cta:hover { background: var(--accent); transform: translateY(-1px); }
.cta .arr { transition: transform .3s var(--ease-out); }
.cta:hover .arr { transform: translateX(3px); }
/* Menu WordPress : wp_nav_menu enveloppe chaque entrée dans un <li>.
   Ces règles neutralisent la liste et laissent le <li> se comporter
   comme un simple conteneur de l'<a>. Sans effet sur un balisage
   composé d'<a> directs (site statique de référence). */
nav.top .links ul { display: flex; gap: 2px; align-items: center; list-style: none; margin: 0; padding: 0; }
nav.top .links li { list-style: none; margin: 0; padding: 0; display: flex; }
nav.top .links li::marker { content: none; }
/* Bloc, et non flex : un ::after en contexte flex deviendrait un élément
   flex de largeur nulle et le soulignement disparaîtrait. */
nav.top .links li > a { display: block; }
/* Élément courant : WordPress pose aria-current sur l'<a> et une classe sur le <li>. */
nav.top .links li.current-menu-item > a,
nav.top .links li.current_page_item > a,
nav.top .links li.current-menu-ancestor > a,
nav.top .links li.current-page-ancestor > a {
  color: var(--ink); font-weight: 500;
}
nav.top .links li.current-menu-item > a::after,
nav.top .links li.current_page_item > a::after,
nav.top .links li.current-menu-ancestor > a::after,
nav.top .links li.current-page-ancestor > a::after {
  content: ""; display: block; width: 100%; height: 1px;
  background: var(--accent); margin-top: 2px;
}
/* Un éventuel deuxième niveau n'est pas prévu par la maquette : on l'aplatit. */
nav.top .links li ul { display: none; }

@media (max-width: 1080px) {
  nav.top .links ul { flex-direction: column; width: 100%; }
  nav.top .links li { width: 100%; }
  nav.top .links li > a { width: 100%; }
}

.navtoggle {
  display: none; width: 38px; height: 38px; border: 1px solid var(--line);
  background: #fff; border-radius: 50%; align-items: center; justify-content: center;
}
.navtoggle span { display: block; width: 15px; height: 1px; background: var(--ink); position: relative; }
.navtoggle span::before, .navtoggle span::after {
  content: ""; position: absolute; left: 0; width: 15px; height: 1px; background: var(--ink);
}
.navtoggle span::before { top: -5px; } .navtoggle span::after { top: 5px; }
@media (max-width: 1080px) {
  nav.top .links {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    flex-direction: column; padding: 10px; gap: 2px;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.18);
  }
  nav.top .bar.open .links { display: flex; }
  nav.top .links a { padding: 11px 14px; border-radius: 12px; }
  .navtoggle { display: inline-flex; }
  nav.top .right { margin-left: auto; }
}

/* ── Page header ─────────────────────────────────────── */
.phead { padding: 150px 0 60px; position: relative; }
.crumbs {
  font-size: 12px; letter-spacing: 0.06em; color: var(--muted);
  margin-bottom: 28px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--muted-2); }
.crumbs [aria-current] { color: var(--ink); }
.phead h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(40px, 5.6vw, 78px); line-height: 1.0;
  letter-spacing: -0.028em; margin: 18px 0 0; max-width: 20ch;
}
.phead h1 em { font-style: italic; color: var(--accent); }
.phead .lead {
  font-size: clamp(18px, 2vw, 23px); line-height: 1.5; color: var(--ink-soft);
  margin: 28px 0 0; max-width: 60ch;
}

/* ── Hero (home) ─────────────────────────────────────── */
.hero { padding: 148px 0 90px; position: relative; }
.hero .grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; }
.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(48px, 6.6vw, 108px); line-height: 0.95;
  letter-spacing: -0.03em; margin: 26px 0 30px;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lead { font-size: 19px; line-height: 1.62; color: var(--ink-soft); max-width: 54ch; margin: 0 0 40px; }
.hero .actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.hero .figure { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--bg-cool); }
.hero .figure img { width: 100%; height: 100%; object-fit: cover; }
.hero .figure .tag {
  position: absolute; left: 20px; bottom: 18px; color: #fff; z-index: 2;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
}
.hero .figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 45%);
}
@media (max-width: 940px) {
  .hero { padding: 128px 0 64px; }
  .hero .grid { grid-template-columns: 1fr; gap: 44px; }
}
.ghost { font-size: 14px; color: var(--ink-soft); position: relative; padding: 8px 0; }
.ghost::after {
  content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 1px;
  background: currentColor; transform-origin: right; transition: transform .4s var(--ease-out);
}
.ghost:hover { color: var(--accent); }
.ghost:hover::after { transform: scaleX(0); transform-origin: left; }

/* ── Path cards (home aiguillage) ────────────────────── */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.path {
  background: #fff; padding: 52px 44px 44px; position: relative;
  display: flex; flex-direction: column; min-height: 340px;
  transition: background .5s var(--ease);
}
.path:hover { background: var(--bg-cool); }
.path .over {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--accent); margin-bottom: 22px;
}
.path h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04; letter-spacing: -0.022em; margin: 0 0 16px;
}
.path p { font-size: 16px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 30px; flex: 1; max-width: 46ch; }
.path .go { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; }
.path .go .arr {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: background .3s var(--ease), border-color .3s, color .3s, transform .4s var(--ease-out);
}
.path:hover .go .arr { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(4px); }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } .path { padding: 38px 26px; min-height: 0; } }

/* ── Sections ────────────────────────────────────────── */
.sec { padding: 96px 0; position: relative; }
.sec.tight { padding: 64px 0; }
.sec.cool { background: var(--bg-cool); }
.sec.dark { background: var(--bg-dark); color: #fff; }
.sec.dark h2, .sec.dark h3 { color: #fff; }
.sec.dark p { color: var(--muted-2); }
.sechead { display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: end; margin-bottom: 56px; }
.sechead h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02; letter-spacing: -0.025em; margin: 0; max-width: 24ch;
}
.sechead h2 em { font-style: italic; color: var(--accent); }
@media (max-width: 900px) { .sec { padding: 68px 0; } .sechead { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; } }

/* ── Prose (service / article body) ──────────────────── */
.layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 72px; align-items: start; }
@media (max-width: 1040px) { .layout { grid-template-columns: 1fr; gap: 40px; } }
.aside { position: sticky; top: 108px; }
.aside .t {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin-bottom: 14px;
}
.aside nav { display: flex; flex-direction: column; gap: 1px; }
.aside nav a {
  font-size: 14px; color: var(--ink-soft); padding: 8px 0 8px 14px;
  border-left: 1px solid var(--line); transition: border-color .25s, color .25s, padding-left .25s;
}
.aside nav a:hover, .aside nav a.on { border-color: var(--accent); color: var(--ink); padding-left: 18px; }
@media (max-width: 1040px) { .aside { display: none; } }

.prose { max-width: 74ch; }
.prose h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1.12; letter-spacing: -0.02em; margin: 56px 0 16px; scroll-margin-top: 110px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 17px; font-weight: 600; margin: 30px 0 8px; letter-spacing: -0.005em; }
.prose p { margin: 0 0 18px; color: var(--ink-soft); }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 600; }
.prose a:not(.cta) { color: var(--accent-deep); border-bottom: 1px solid rgba(196,116,56,0.35); }
.prose a:not(.cta):hover { border-color: var(--accent); }
.prose ul { margin: 0 0 20px; padding-left: 20px; color: var(--ink-soft); }
.prose ul li { margin-bottom: 8px; }

/* Quick answers (FAQ) */
.qa { margin: 46px 0 8px; border-top: 1px solid var(--line); }
.qa .qa-h {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  color: var(--accent); padding: 22px 0 6px;
}
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none; padding: 17px 40px 17px 0; position: relative;
  font-size: 16.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  margin-top: -5px;
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat center/11px 1px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center/1px 11px;
  transition: transform .3s var(--ease-out);
}
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--accent-deep); }
.qa .a { padding: 0 40px 20px 0; color: var(--ink-soft); }
.qa .a p { margin: 0; }

/* Sources */
.sources { margin-top: 48px; padding: 26px 28px; background: var(--bg-cool); border-left: 2px solid var(--accent); }
.sources .t {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--accent-deep); margin-bottom: 12px;
}
.sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sources a { font-size: 14.5px; color: var(--ink); border-bottom: 1px solid var(--line); }
.sources a:hover { border-color: var(--accent); color: var(--accent-deep); }
.sources a::after { content: " ↗"; color: var(--muted-2); font-size: 12px; }

/* Related / next links */
.related { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 30px; }
.related .t {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--muted); margin-bottom: 16px;
}
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.related li { background: #fff; }
.related li a {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 22px; font-size: 16px; transition: background .3s var(--ease), padding-left .3s var(--ease-out);
}
.related li a:hover { background: var(--bg-cool); padding-left: 28px; color: var(--accent-deep); }
.related li a .arr { color: var(--accent); }

/* ── Service index grid ──────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc {
  background: #fff; padding: 40px 36px 34px; display: flex; flex-direction: column;
  min-height: 260px; transition: background .5s var(--ease); position: relative;
}
.svc:hover { background: var(--bg-cool); }
.svc .n { font-family: var(--display); font-style: italic; font-size: 17px; color: var(--accent); margin-bottom: 22px; }
.svc h3 {
  font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 12px;
}
.svc p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px; flex: 1; }
.svc .go { font-size: 13px; font-weight: 500; color: var(--accent-deep); display: inline-flex; gap: 8px; align-items: center; }
.svc:hover .go .arr { transform: translateX(4px); }
.svc .go .arr { transition: transform .3s var(--ease-out); }
@media (max-width: 800px) { .svc-grid { grid-template-columns: 1fr; } .svc { padding: 30px 24px; min-height: 0; } }

/* ── Team ────────────────────────────────────────────── */
/* Une personne par ligne : portrait à gauche, texte à droite.
   Le portrait est borné en largeur pour laisser respirer la biographie. */
.people { display: grid; grid-template-columns: 1fr; gap: 64px; }
.person {
  display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 44px; align-items: start;
}
@media (max-width: 760px) {
  .people { gap: 48px; }
  .person { grid-template-columns: 1fr; gap: 24px; }
  .person .pic { max-width: 260px; }
}
.person .pic {
  aspect-ratio: 3/4; overflow: hidden; background: var(--ink); margin-bottom: 0; position: relative;
}
.person .pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.04); transition: filter .8s var(--ease-out), transform 6s ease-out; }
.person:hover .pic img { filter: grayscale(0%); transform: scale(1.03); }
.person h3 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: -0.02em; margin: 0 0 4px; }
.person .role { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 18px; }
.person p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; max-width: 62ch; }
.person .bio > :last-child { margin-bottom: 0; }

/* ── Offices ─────────────────────────────────────────── */
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.office { background: #fff; padding: 38px 34px; }
.office .city { font-family: var(--display); font-size: 30px; letter-spacing: -0.02em; margin: 0 0 4px; }
.office .country { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 22px; }
.office .row { display: grid; grid-template-columns: 92px 1fr; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.office .row .k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.office .row .v { color: var(--ink-soft); }
.office .row .v a:hover { color: var(--accent-deep); }
@media (max-width: 760px) { .offices { grid-template-columns: 1fr; } }

/* ── Article list ────────────────────────────────────── */
.arts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.art { background: #fff; padding: 36px 34px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; transition: background .4s var(--ease); }
.art:hover { background: var(--bg-cool); }
.art h3 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 10px; }
.art p { font-size: 15px; color: var(--ink-soft); margin: 0; max-width: 68ch; }
.art .arr { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); transition: background .3s, border-color .3s, color .3s, transform .4s var(--ease-out); }
.art:hover .arr { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(4px); }
@media (max-width: 700px) { .art { grid-template-columns: 1fr; padding: 26px 22px; gap: 16px; } }
.brief {
  background: var(--bg-cool); border-left: 2px solid var(--accent);
  padding: 24px 28px; margin: 0 0 40px;
}
.brief .t { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--accent-deep); margin-bottom: 10px; }
.brief p { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.6; }

/* ── Contact form ────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }
form.book .field { border-bottom: 1px solid var(--line); padding: 16px 0 12px; transition: border-color .3s ease; }
form.book .field:focus-within { border-color: var(--accent); }
form.book .row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 600px) { form.book .row { grid-template-columns: 1fr; } }
form.book label { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
form.book input, form.book select, form.book textarea {
  width: 100%; background: transparent; border: 0; color: var(--ink);
  font-family: var(--sans); font-size: 16px; padding: 4px 0; outline: none;
}
form.book textarea { min-height: 96px; resize: vertical; }
form.book select { appearance: none; cursor: pointer; }
form.book .consent {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 26px;
  font-size: 14px; color: var(--ink-soft); line-height: 1.55;
}
form.book .consent input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; accent-color: var(--accent); }
form.book .consent a { color: var(--accent-deep); border-bottom: 1px solid rgba(196,116,56,0.35); }
form.book .submit-row { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
form.book .submit {
  display: inline-flex; align-items: center; gap: 13px; background: var(--ink); color: #fff;
  border: 0; padding: 16px 24px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  transition: background .25s ease, padding .3s var(--ease-out);
}
form.book .submit:hover { background: var(--accent); padding-right: 34px; }
form.book .hint { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.formmsg { padding: 54px 24px; text-align: center; border: 1px solid var(--line); }
.formmsg .ck {
  width: 54px; height: 54px; margin: 0 auto 20px; border-radius: 50%; border: 1px solid var(--accent);
  display: grid; place-items: center; color: var(--accent); font-size: 21px;
}
.formmsg h3 { font-family: var(--display); font-style: italic; font-size: 29px; margin: 0 0 8px; letter-spacing: -0.015em; }
.formmsg p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ── Footer ──────────────────────────────────────────── */
footer.site { background: var(--bg-dark); color: var(--muted-2); padding: 76px 0 32px; }
footer.site .sig {
  font-family: var(--display); font-weight: 400; font-size: clamp(34px, 5.4vw, 76px);
  line-height: 0.98; letter-spacing: -0.035em; color: #fff; margin: 0 0 56px; max-width: 22ch;
}
footer.site .sig em { font-style: italic; color: var(--accent); }
footer.site .cols {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
  padding-top: 36px; border-top: 1px solid var(--line-dark); margin-bottom: 40px;
}
@media (max-width: 860px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
footer.site h5 { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--accent); margin: 0 0 14px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site ul li { padding: 4px 0; font-size: 13.5px; }
footer.site ul li a:hover { color: var(--accent); }
footer.site .addr { font-size: 13.5px; line-height: 1.7; }
footer.site .addr strong { color: #fff; font-weight: 500; display: block; }
footer.site .legal {
  border-top: 1px solid var(--line-dark); padding-top: 22px; display: flex;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

/* ── Reveal (progressive enhancement: visible by default) ── */
.rv { opacity: 1; transform: none; }
html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* ── Blocs WordPress dans le corps de texte ──────────────
   La zone .prose est bornée à 74ch pour la lisibilité. Les blocs
   « large » et « pleine largeur » s'en échappent volontairement. */
.prose > * { max-width: 100%; }
.prose .alignwide {
  width: min(1100px, calc(100vw - 80px));
  margin-left: calc(50% - min(550px, calc(50vw - 40px)));
  max-width: none;
}
.prose .alignfull {
  width: 100vw; max-width: none;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
@media (max-width: 700px) {
  .prose .alignwide, .prose .alignfull {
    width: 100%; margin-left: 0; margin-right: 0;
  }
}

/* Images & figures */
.prose figure { margin: 36px 0; }
.prose figure img { width: 100%; height: auto; }
.prose figcaption,
.prose .wp-element-caption {
  font-size: 12.5px; letter-spacing: 0.02em; color: var(--muted);
  margin-top: 10px; text-align: left;
}
.prose .alignleft {
  float: left; margin: 6px 32px 24px 0; max-width: 44%;
}
.prose .alignright {
  float: right; margin: 6px 0 24px 32px; max-width: 44%;
}
.prose .aligncenter { margin-left: auto; margin-right: auto; }
@media (max-width: 600px) {
  .prose .alignleft, .prose .alignright { float: none; margin: 28px 0; max-width: 100%; }
}

/* Citations */
.prose blockquote {
  margin: 36px 0; padding: 4px 0 4px 26px;
  border-left: 2px solid var(--accent);
  font-family: var(--display); font-style: italic;
  font-size: 21px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink);
}
.prose blockquote p { color: inherit; font-size: inherit; margin: 0 0 10px; }
.prose blockquote cite,
.prose blockquote .wp-block-quote__citation {
  display: block; font-family: var(--sans); font-style: normal;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-top: 12px;
}
.prose .wp-block-pullquote {
  border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 34px 0; margin: 44px 0; text-align: left;
}
.prose .wp-block-pullquote blockquote { border: 0; padding: 0; }
.prose .wp-block-pullquote p { font-size: clamp(24px, 3vw, 34px); }

/* Listes */
.prose ol { margin: 0 0 20px; padding-left: 22px; color: var(--ink-soft); }
.prose ol li { margin-bottom: 8px; }
.prose ul li::marker { color: var(--accent); }
.prose ol li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }

/* Tableaux */
.prose table, .prose .wp-block-table table {
  width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 15px;
}
.prose th {
  text-align: left; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; color: var(--muted); padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--ink);
}
.prose td {
  padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line);
  color: var(--ink-soft); vertical-align: top;
}
.prose .wp-block-table.is-style-stripes td { border-bottom: 0; }
.prose .wp-block-table.is-style-stripes tr:nth-child(odd) { background: var(--bg-cool); }
.prose .wp-block-table figcaption { margin-top: 12px; }

/* Boutons */
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0; }
.prose .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; border: 0; border-radius: 999px;
  padding: 14px 24px; font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
  transition: background .25s ease, transform .2s var(--ease-out);
}
.prose .wp-block-button__link:hover { background: var(--accent); transform: translateY(-1px); color: #fff; }
.prose .is-style-outline .wp-block-button__link {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
}
.prose .is-style-outline .wp-block-button__link:hover {
  border-color: var(--accent); color: var(--accent-deep); background: transparent; transform: none;
}

/* Séparateur */
.prose hr, .prose .wp-block-separator {
  border: 0; height: 1px; background: var(--line); margin: 44px 0;
}
.prose .wp-block-separator.is-style-dots { background: none; text-align: center; }
.prose .wp-block-separator.is-style-dots::before {
  content: "···"; color: var(--accent); letter-spacing: 1em; font-size: 18px;
}

/* Colonnes */
.prose .wp-block-columns { display: flex; gap: 44px; margin: 36px 0; }
.prose .wp-block-column { flex: 1; min-width: 0; }
.prose .wp-block-column > :first-child { margin-top: 0; }
.prose .wp-block-column > :last-child { margin-bottom: 0; }
@media (max-width: 780px) {
  .prose .wp-block-columns { flex-direction: column; gap: 28px; }
}

/* Groupe / encadré */
.prose .wp-block-group.has-background {
  padding: 28px 32px; border-radius: 2px;
}
.prose .wp-block-group.has-background > :first-child { margin-top: 0; }
.prose .wp-block-group.has-background > :last-child { margin-bottom: 0; }

/* Détails (accordéon natif) — même allure que « Réponses rapides » */
.prose details {
  border-bottom: 1px solid var(--line); margin: 0;
}
.prose details summary {
  cursor: pointer; list-style: none; padding: 17px 40px 17px 0; position: relative;
  font-size: 16.5px; font-weight: 500; color: var(--ink);
}
.prose details summary::-webkit-details-marker { display: none; }
.prose details summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  margin-top: -5px;
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat center/11px 1px,
    linear-gradient(var(--accent), var(--accent)) no-repeat center/1px 11px;
  transition: transform .3s var(--ease-out);
}
.prose details[open] summary::after { transform: rotate(45deg); }

/* Embeds */
.prose .wp-block-embed { margin: 36px 0; }
.prose .wp-block-embed figcaption { margin-top: 12px; }

/* Code / préformaté */
.prose code, .prose kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; background: var(--bg-cool); padding: 2px 6px; border-radius: 3px;
}
.prose pre {
  background: var(--bg-cool); padding: 20px 22px; overflow-x: auto;
  font-size: 13.5px; line-height: 1.6; margin: 28px 0;
}
.prose pre code { background: none; padding: 0; }

/* Couleurs de la palette du thème */
.prose .has-ink-color { color: var(--ink); }
.prose .has-accent-color { color: var(--accent-deep); }
.prose .has-soft-color { color: var(--ink-soft); }
.prose .has-ink-background-color { background-color: var(--ink); }
.prose .has-accent-background-color { background-color: var(--accent); }
.prose .has-cool-background-color { background-color: var(--bg-cool); }
.prose .has-white-background-color { background-color: #fff; }
.prose .has-ink-background-color,
.prose .has-accent-background-color { color: #fff; }
.prose .has-ink-background-color p,
.prose .has-accent-background-color p { color: inherit; }

/* Tailles de police du thème */
.prose .has-small-font-size { font-size: 14px; }
.prose .has-normal-font-size { font-size: 16.5px; }
.prose .has-large-font-size { font-size: 20px; line-height: 1.55; }

/* ============================================================
   Gustave Legal — habillage Contact Form 7
   ============================================================
   À coller dans :  Apparence › Personnaliser › CSS additionnel
   (ou dans assets/site.css du thème, à la fin du fichier)

   Reprend la maquette : champs soulignés d'un seul trait, libellés
   en petites capitales espacées, bouton pilule encre → cuivre.

   Le balisage attendu est décrit en bas de ce fichier.
   ============================================================ */

/* ---- Conteneur ------------------------------------------- */

.wpcf7 {
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  color: var(--ink, #0a0a0a);
}
.wpcf7 form.wpcf7-form { margin: 0; }

/* CF7 enveloppe chaque champ dans <span class="wpcf7-form-control-wrap">.
   On le neutralise pour que le champ occupe toute la largeur. */
.wpcf7 .wpcf7-form-control-wrap { display: block; width: 100%; }

/* ---- Rangée à deux colonnes ------------------------------ */
/* Utiliser <div class="gl-row"> … </div> dans le formulaire CF7 */

.wpcf7 .gl-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 600px) {
  .wpcf7 .gl-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---- Champ : libellé + trait ----------------------------- */
/* Chaque champ est enveloppé dans <p class="gl-field"> (ou <div>) */

.wpcf7 .gl-field {
  border-bottom: 1px solid var(--line, #e7e5e4);
  padding: 16px 0 12px;
  margin: 0;
  transition: border-color .3s ease;
}
.wpcf7 .gl-field:focus-within { border-color: var(--accent, #c47438); }
/* Ces variantes ne portent pas de trait : il vient du parent. */
.wpcf7 .gl-field.gl-consent,
.wpcf7 .gl-field.gl-submit { border-bottom: 0; }

/* ---- Contrôles ------------------------------------------- */

/* CF7 enveloppe par défaut chaque ligne dans un <p>. On s'en sert
   comme espacement vertical, sans exiger de balisage supplémentaire. */
.wpcf7 form.wpcf7-form > p { margin: 0 0 26px; }
.wpcf7 form.wpcf7-form > p:last-of-type { margin-bottom: 0; }

/* ---- Libellés ------------------------------------------------------
   CF7 admet deux constructions :
     (a) <label>Nom<br />[text]</label>  → le libellé enveloppe le champ
     (b) <label>Nom</label>[text]        → le libellé précède le champ
   Dans le cas (a) on ne peut pas mettre le bloc entier en capitales,
   sinon la saisie le serait aussi. On met donc en forme le <label>
   lui-même, et on rétablit le champ à l'intérieur. */

.wpcf7 label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted, #737373);
  margin-bottom: 6px;
  line-height: 1.6;
}
/* Le champ imbriqué reprend la typographie de saisie. */
.wpcf7 label input,
.wpcf7 label select,
.wpcf7 label textarea,
.wpcf7 label .wpcf7-form-control-wrap {
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  color: var(--ink, #0a0a0a);
  margin-top: 6px;
}
/* Le <br /> que CF7 insère entre libellé et champ. */
.wpcf7 label br { display: none; }

/* Les libellés de cases à cocher restent en texte courant. */
.wpcf7 .wpcf7-list-item label,
.wpcf7 .gl-consent label {
  font-size: 14.5px; letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--ink-soft, #404040); margin-bottom: 0;
  line-height: 1.55;
}

/* ---- Champs : trait porté par le champ (aucun balisage requis) ---- */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  /* Fond très légèrement teinté : le champ se lit sans devenir une boîte. */
  background: var(--field, #f7f6f4);
  border: 0;
  border-bottom: 1px solid var(--field-line, #d6d3d1);
  border-radius: 3px 3px 0 0;
  box-shadow: none;
  color: var(--ink, #0a0a0a);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 14px;
  outline: none;
  transition: background .25s ease, border-color .25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 input[type="tel"]:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover { background: var(--field-hover, #f2f0ed); }
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  box-shadow: none;
  background: #fff;
  border-bottom-color: var(--accent, #c47438);
  border-bottom-width: 2px;
  padding-bottom: 11px;
}

/* ---- Variante avec wrapper .gl-field ------------------------------
   Le trait remonte sur le wrapper pour englober le libellé.
   Utile mais facultatif : sans wrapper, le rendu ci-dessus s'applique. */

.wpcf7 .gl-field input[type="text"],
.wpcf7 .gl-field input[type="email"],
.wpcf7 .gl-field input[type="tel"],
.wpcf7 .gl-field input[type="url"],
.wpcf7 .gl-field input[type="number"],
.wpcf7 .gl-field input[type="date"],
.wpcf7 .gl-field select,
.wpcf7 .gl-field textarea {
  background: var(--field, #f7f6f4);
  border-bottom: 1px solid var(--field-line, #d6d3d1);
  border-radius: 3px 3px 0 0;
  padding: 12px 14px;
}
/* Avec wrapper, le trait du wrapper ferait doublon. */
.wpcf7 .gl-field { border-bottom: 0; padding: 0 0 22px; }
.wpcf7 .gl-field.gl-consent { padding-top: 4px; }

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--muted-2, #a3a3a3); }

.wpcf7 textarea { min-height: 96px; resize: vertical; }
.wpcf7 .gl-field textarea { min-height: 88px; }

/* Liste déroulante : chevron discret, pas de flèche système */
.wpcf7 select {
  cursor: pointer;
  padding-right: 22px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted, #737373) 50%),
    linear-gradient(135deg, var(--muted, #737373) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Accessibilité clavier : le trait du champ suffit comme repère,
   mais on garde un contour visible sur les contrôles non textuels. */
.wpcf7 input[type="checkbox"]:focus-visible,
.wpcf7 input[type="radio"]:focus-visible,
.wpcf7 .wpcf7-submit:focus-visible {
  outline: 2px solid var(--accent, #c47438);
  outline-offset: 3px;
}

/* ---- Cases à cocher / boutons radio ---------------------- */

.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft, #404040);
  cursor: pointer;
}
.wpcf7 .wpcf7-list-item input[type="checkbox"],
.wpcf7 .wpcf7-list-item input[type="radio"] {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--accent, #c47438);
}
.wpcf7 .wpcf7-list-item-label { display: block; }

/* Consentement RGPD : une seule case, texte long */
.wpcf7 .gl-consent {
  border-bottom: 0;
  padding: 26px 0 0;
}
.wpcf7 .gl-consent .wpcf7-list-item label { font-size: 14px; }
.wpcf7 .gl-consent a {
  color: var(--accent-deep, #8e571e);
  border-bottom: 1px solid rgba(196,116,56,0.35);
  text-decoration: none;
}
.wpcf7 .gl-consent a:hover { border-color: var(--accent, #c47438); }

/* ---- Bouton d'envoi -------------------------------------- */

.wpcf7 .gl-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
  border-bottom: 0;
  padding: 0;
}
.wpcf7 .gl-hint {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #737373);
  font-weight: 500;
}

.wpcf7 input.wpcf7-submit {
  width: auto;
  display: inline-flex;
  align-items: center;
  background: var(--ink, #0a0a0a);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 16px 26px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .25s ease, padding .3s cubic-bezier(0.22,1,0.36,1);
}
.wpcf7 input.wpcf7-submit:hover {
  background: var(--accent, #c47438);
  padding-right: 36px;
}
.wpcf7 input.wpcf7-submit:disabled { opacity: .55; cursor: not-allowed; }

/* Indicateur d'envoi de CF7 */
.wpcf7 .wpcf7-spinner {
  margin: 0 0 0 14px;
  background-color: var(--accent, #c47438);
}

/* ---- Messages de validation ------------------------------ */

.wpcf7 form .wpcf7-response-output {
  margin: 26px 0 0;
  padding: 18px 22px;
  border: 0;
  border-left: 2px solid var(--accent, #c47438);
  background: var(--bg-cool, #fafaf9);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink, #0a0a0a);
  border-radius: 0;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-left-color: #15803d;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-left-color: #b91c1c;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-left-color: #b91c1c;
}

/* Erreur sous un champ */
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: #b91c1c;
}
.wpcf7 .gl-field:has(.wpcf7-not-valid) { border-color: #b91c1c; }
/* Repli pour les navigateurs sans :has() */
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid { border-bottom: 1px solid #b91c1c; }

/* ---- Anti-spam Turnstile / reCAPTCHA --------------------- */

.wpcf7 .cf-turnstile,
.wpcf7 .g-recaptcha { margin: 22px 0 0; }

/* ---- Impression ------------------------------------------ */

@media print {
  .wpcf7 { display: none; }
}

/* ── Hero : traversée en profondeur ──────────────────────
   Actif seulement si deux images sont renseignées ; sinon le
   cadre reste une image fixe et rien de tout ceci ne s'applique. */
.hero-track{position:relative;min-height:150vh}
.hero-sticky{position:sticky;top:96px}
.figure--cross{position:relative;height:min(72vh,780px);overflow:hidden;
  background:var(--bg-dark);perspective:1200px}
.figure--cross img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-layer{position:absolute;inset:0;will-change:transform,opacity,filter;
  transform-origin:50% 50%;backface-visibility:hidden}
.hero-layer-a{z-index:2}
.hero-layer-b{z-index:1}

/* Grain : unifie deux photographies de provenances différentes. */
.hero-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.18;
  mix-blend-mode:overlay;background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-scrim{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 48%)}

.hero-meta{position:absolute;left:20px;right:20px;bottom:18px;z-index:7;color:#fff;
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
.hero-city{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  display:inline-grid}
.hero-city span{grid-area:1/1;display:flex;align-items:center;gap:9px;
  transition:opacity .6s ease,transform .6s var(--ease-out)}
.hero-city .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.hero-city .a{opacity:var(--lbl-a,1);transform:translateY(calc((1 - var(--lbl-a,1)) * -6px))}
.hero-city .b{opacity:var(--lbl-b,0);transform:translateY(calc((1 - var(--lbl-b,0)) * 6px))}
.hero-readout{text-align:right;font-variant-numeric:tabular-nums}
.hero-readout b{display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(17px,1.5vw,22px);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.hero-prog{position:absolute;left:0;right:0;top:0;height:2px;z-index:7;
  background:rgba(255,255,255,.16)}
.hero-prog i{display:block;height:100%;background:var(--accent);
  transform-origin:left;transform:scaleX(var(--p,0))}

/* Image fixe : le grain et le voile s'appliquent aussi. */
.hero .figure{position:relative}

@media(max-width:940px){
  .hero-track{min-height:120vh}
  .hero-sticky{top:88px}
}
@media(prefers-reduced-motion:reduce){
  .hero-layer{transition:none}
}

/* ── Print ───────────────────────────────────────────── */
@media print {
  nav.top, .scroll-rail, footer.site .sig { display: none !important; }
  body { font-size: 11pt; }
  .phead { padding: 0 0 18pt; }
  .sec { padding: 18pt 0; }
  .aside { display: none; }
  .layout { grid-template-columns: 1fr; }
  .qa details { open: true; }
  a { color: inherit !important; }
}