/* ==========================================================================
   ZEID Assurance & Conseil — feuille de style unique
   Sommaire
   1. Polices            6. En-tête et menu      11. Simulateur 3e pilier
   2. Couleurs (tokens)  7. Accueil              12. Questions
   3. Base               8. Sections et titres   13. Contact et formulaires
   4. Tons de section    9. Expertises, méthode  14. Pied de page, WhatsApp
   5. Boutons           10. Fondateur, dates     15. Pages légales, 404, impression
   ========================================================================== */

/* 1. Polices auto-hébergées (licence SIL OFL, voir assets/fonts) ---------- */
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-display.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Polices de secours calibrées : le texte ne « saute » pas au chargement */
@font-face {
  font-family: "Jost secours";
  src: local("Arial");
  size-adjust: 94.98%;
  ascent-override: 112.66%;
  descent-override: 39.48%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bodoni secours";
  src: local("Times New Roman");
  size-adjust: 114.51%;
  ascent-override: 98.25%;
  descent-override: 34.93%;
  line-gap-override: 0%;
}

/* 2. Couleurs et mesures ------------------------------------------------- */
:root {
  --night: #0B1222;      /* bleu nuit de la marque */
  --night-2: #121C33;
  --deep: #070C17;
  --paper: #F2F4F7;      /* blanc froid, comme le lac au matin */
  --paper-2: #E7EBF1;
  --white: #FFFFFF;
  --ink: #0E1628;
  --ink-2: #44506A;
  --mist: #EDEBE4;
  --mist-2: #B3BBCB;
  --brass: #C4A265;      /* laiton de la marque */
  --brass-2: #D6BC8A;
  --brass-ink: #7A5A24;  /* laiton lisible sur fond clair */
  --rule: #D3DAE4;
  --rule-dark: rgba(237, 235, 228, .14);
  --danger-dark: #F2B8A8;
  --danger-light: #A3321B;

  --f-serif: "Bodoni Moda", "Bodoni secours", "Didot", "Bodoni 72", Georgia, serif;
  --f-sans: "Jost", "Jost secours", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --head-h: 76px;
  --r-sm: 4px;
  --r-md: 8px;
  --sec-y: clamp(72px, 9vw, 128px);
  color-scheme: light;
}

/* 3. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

h2 {
  font-family: var(--f-serif);
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -.01em;
  font-synthesis: none;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

:focus-visible { outline: 2px solid var(--focus, var(--brass)); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--brass); color: var(--night);
  padding: 12px 18px; border-radius: var(--r-sm);
  font-weight: 500; text-decoration: none;
}
.skip:focus { top: 12px; }

/* 4. Tons de section ----------------------------------------------------- */
.tone-dark {
  --bg: var(--night); --fg: var(--mist); --fg-2: var(--mist-2);
  --line: var(--rule-dark); --link: var(--brass-2); --accent: var(--brass);
  --surface: var(--night-2); --field: rgba(237, 235, 228, .05); --focus: var(--brass);
  --danger: var(--danger-dark);
  background: var(--bg); color: var(--fg); color-scheme: dark;
}
.tone-light {
  --bg: var(--paper); --fg: var(--ink); --fg-2: var(--ink-2);
  --line: var(--rule); --link: var(--brass-ink); --accent: var(--brass-ink);
  --surface: var(--white); --field: var(--white); --focus: var(--brass-ink);
  --danger: var(--danger-light);
  background: var(--bg); color: var(--fg);
}
.tone-light.alt { --bg: var(--paper-2); }
.tone-white {
  --bg: var(--white); --fg: var(--ink); --fg-2: var(--ink-2);
  --line: var(--rule); --link: var(--brass-ink); --accent: var(--brass-ink);
  --surface: var(--paper); --focus: var(--brass-ink);
  background: var(--bg); color: var(--fg);
}
.tone-dark.band { --bg: #0E172B; --surface: #16213A; }

/* 5. Boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: var(--f-sans); font-size: 17px; font-weight: 500; line-height: 1.25;
  letter-spacing: .01em; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-brass { background: var(--brass); color: var(--night); }
.btn-brass:hover { background: var(--brass-2); }
.btn-line { border-color: currentColor; color: var(--fg, var(--mist)); background: transparent; }
.btn-line:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.tone-light .btn-brass, .tone-white .btn-brass { background: var(--night); color: var(--mist); }
.tone-light .btn-brass:hover, .tone-white .btn-brass:hover { background: #1B2846; }
.btn[disabled] { opacity: .65; cursor: progress; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(32px, 4vw, 48px); }
.cta-note { color: var(--fg-2); font-size: 16px; }

/* 6. En-tête et menu ----------------------------------------------------- */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 60;
  color: var(--mist);
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .25s ease, box-shadow .25s ease, transform .35s ease;
}
.site-head.is-solid { background: var(--night); box-shadow: 0 1px 0 var(--rule-dark); }
.site-head.is-hidden { transform: translateY(-100%); }
.head-in { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); height: var(--head-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--mist); text-decoration: none; margin-right: auto; }
.brand-mark { height: 34px; width: auto; fill: var(--brass); flex: none; }
.brand-word { height: 15px; width: auto; fill: currentColor; }

.nav ul { display: flex; gap: 2px; list-style: none; }
.nav a {
  display: block; padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 16px; font-weight: 450; text-decoration: none; color: var(--mist);
}
.nav a:hover { background: rgba(237, 235, 228, .08); }
.nav a[aria-current="true"] { color: var(--brass-2); }

.head-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.head-tel svg { width: 20px; height: 20px; color: var(--brass); }
.head-tel:hover span { text-decoration: underline; }
.head-cta { min-height: 46px; padding: 10px 18px; font-size: 16px; }

.menu-btn {
  display: none; position: relative; width: 46px; height: 46px; flex: none;
  border: 1px solid var(--rule-dark); border-radius: var(--r-sm);
  background: transparent; color: var(--mist);
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  position: absolute; left: 50%; width: 20px; height: 1.5px; background: currentColor;
  transform: translateX(-50%); transition: transform .25s ease, opacity .2s ease;
}
.menu-btn span { top: 50%; margin-top: -.75px; }
.menu-btn span::before, .menu-btn span::after { content: ""; left: 0; transform: none; }
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--head-h) + env(safe-area-inset-top, 0px) + 16px) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--night); color: var(--mist);
  overflow-y: auto; overscroll-behavior: contain;
  animation: menu-in .25s ease both;
}
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.menu ul { list-style: none; }
.menu li a {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--rule-dark);
  font-family: var(--f-serif); font-size: clamp(30px, 8vw, 44px); line-height: 1.15; text-decoration: none;
}
.menu-foot { display: grid; gap: 12px; }
.menu-foot .btn { width: 100%; }
.menu-foot .btn-line { color: var(--mist); }
.menu-foot p { color: var(--mist-2); font-size: 16px; }
html.menu-open { overflow: hidden; }
html.menu-open .site-head { background: var(--night); }

/* 7. Accueil ------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 900px);
  display: flex; align-items: center;
  padding: calc(var(--head-h) + clamp(40px, 7vh, 88px)) 0 clamp(56px, 8vh, 96px);
  background: #14275A;
}
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg { z-index: -2; }
.hero-bg img { object-fit: cover; object-position: 62% 100%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 18, 34, .72) 0%, rgba(11, 18, 34, .42) 42%, rgba(11, 18, 34, 0) 72%),
    linear-gradient(180deg, rgba(11, 18, 34, .45) 0%, rgba(11, 18, 34, 0) 26%, rgba(11, 18, 34, 0) 74%, rgba(11, 18, 34, .55) 100%);
}
.hero-in { display: grid; justify-items: start; gap: 22px; }
.hero h1 { display: grid; gap: 18px; }
.hero-who {
  max-width: 62ch;
  font-family: var(--f-sans); font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: .01em;
  color: var(--brass-2);
}
.hero-q {
  font-family: var(--f-serif); font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.015em;
  color: #F7F5F0; font-synthesis: none; max-width: 11.5em;
}
.nowrap { white-space: nowrap; }
.hero-lead { max-width: 46ch; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--mist); }

.inline-form { display: flex; width: min(100%, 520px); }
.inline-form input {
  flex: 1; min-width: 0; height: 56px; padding: 0 18px;
  border: 1px solid rgba(237, 235, 228, .55); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: rgba(7, 12, 23, .5); color: var(--mist); font-size: 17px;
}
.inline-form input::placeholder { color: #A9B1C2; opacity: 1; }
.inline-form input:focus { outline: none; border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.inline-form .btn { min-height: 56px; border-radius: 0 var(--r-sm) var(--r-sm) 0; flex: none; }
.hero .inline-form { margin-top: 6px; }

.form-note { font-size: 15.5px; color: var(--fg-2, var(--mist-2)); }
.form-note a { color: var(--link); }
.form-note.is-error { color: var(--danger); }
.form-done {
  display: grid; gap: 4px; width: min(100%, 520px);
  padding: 16px 20px; border-left: 3px solid var(--brass); background: rgba(7, 12, 23, .55);
}
.form-done strong { font-family: var(--f-serif); font-size: 26px; font-weight: 400; line-height: 1.2; }
.form-done .cta-row { margin-top: 10px; }

.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 8px; font-size: 16px; color: var(--mist); }
.hero-trust li { display: inline-flex; align-items: center; gap: 10px; }
.hero-trust li::before {
  content: ""; width: 11px; height: 6px; margin-top: -3px; flex: none;
  border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(-45deg);
}
.hero-trust li.is-flag::before { display: none; }
.hero-trust svg { width: 18px; height: 18px; border-radius: 3px; }
.hero-trust a { color: var(--brass-2); }

.season {
  width: min(100%, 640px); margin-top: 8px; padding: 16px 20px;
  border: 1px solid rgba(196, 162, 101, .45); border-left-width: 3px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(7, 12, 23, .55); font-size: 16.5px; line-height: 1.55;
}
.season strong { font-weight: 500; color: #F7F5F0; }
.season-days { color: var(--brass-2); font-weight: 500; }

/* 8. Sections et titres -------------------------------------------------- */
.sec { padding-block: var(--sec-y); }
.sec-head {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px clamp(32px, 6vw, 88px);
  align-items: end; margin-bottom: clamp(40px, 5vw, 64px);
}
.sec-head h2 { max-width: 17ch; }
.sec-head p { max-width: 54ch; color: var(--fg-2); }
.lead { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.55; color: var(--fg); }
.footnote { margin-top: 20px; font-size: 15px; color: var(--fg-2); }

/* Conviction */
.conviction { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(40px, 7vw, 104px); align-items: start; }
.conviction h2 { font-size: clamp(34px, 4.4vw, 56px); max-width: 16ch; }
.conviction-body { display: grid; gap: 24px; padding-top: 10px; color: var(--fg-2); }
.conviction-body .lead { color: var(--fg); }
.quote { padding-left: 22px; border-left: 2px solid var(--brass); }
.quote blockquote p { font-family: var(--f-serif); font-size: clamp(24px, 2.3vw, 30px); line-height: 1.3; color: var(--fg); }
.quote figcaption { margin-top: 10px; font-size: 15.5px; color: var(--fg-2); }

/* 9. Expertises ---------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc {
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.svc.wide { grid-column: span 2; }
.svc-kind { font-size: 15.5px; font-weight: 500; color: var(--accent); margin-bottom: 6px; }
.svc h3 { font-family: var(--f-serif); font-size: clamp(28px, 2.6vw, 34px); line-height: 1.1; font-synthesis: none; }
.svc-fig { margin-top: 10px; font-size: 16px; color: var(--fg-2); }
.svc-fig strong { font-weight: 500; color: var(--fg); }
.svc > p { color: var(--fg-2); max-width: 52ch; }

.ticks { list-style: none; display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16.5px; }
.ticks li { display: flex; gap: 12px; }
.ticks li::before {
  content: ""; flex: none; width: 10px; height: 5px; margin-top: .55em;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}

.svc-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 56px); }
.svc-more article { padding-top: 20px; border-top: 2px solid var(--fg); }
.svc-more h3 { font-size: 21px; font-weight: 500; line-height: 1.3; margin-bottom: 8px; }
.svc-more p { color: var(--fg-2); font-size: 17px; }

.svc-follow {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(32px, 6vw, 88px); align-items: start;
  margin-top: clamp(40px, 5vw, 56px); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-md);
}
.svc-follow h3 { font-family: var(--f-serif); font-size: clamp(28px, 3vw, 38px); line-height: 1.12; font-synthesis: none; }
.svc-follow > div { display: grid; gap: 18px; }
.svc-follow p { color: var(--fg-2); }
.svc-follow .ticks { margin-top: 0; }

/* Méthode : un vrai parcours en cinq étapes, d'où la numérotation */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 1px; background: var(--line); }
.step { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px;
  border: 1px solid var(--accent); border-radius: 50%; background: var(--bg);
  font-family: var(--f-serif); font-size: 22px; color: var(--accent); position: relative;
}
.step h3 { font-size: 21px; font-weight: 500; line-height: 1.25; }
.step p { color: var(--fg-2); font-size: 17px; }
.step .step-meta { margin-top: auto; padding-top: 6px; font-size: 15.5px; font-weight: 500; color: var(--accent); }

/* Agent ou courtier */
.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.compare table { width: 100%; min-width: 640px; border-collapse: collapse; }
.compare th, .compare td { padding: 18px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 17px; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-family: var(--f-serif); font-size: 24px; font-weight: 400; padding-block: 22px; }
.compare tbody th { width: 22%; font-weight: 500; color: var(--fg-2); font-size: 16px; }
.compare td { color: var(--fg-2); }
.compare .is-us { background: #F6F2EA; color: var(--fg); }
.compare thead .is-us { box-shadow: inset 0 3px 0 var(--brass); }
.compare tbody .is-us { font-weight: 500; }

/* 10. Fondateur ---------------------------------------------------------- */
.founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 7vw, 104px); align-items: start; }
.founder-photo { max-width: 420px; width: 100%; justify-self: center; position: sticky; top: calc(var(--head-h) + 24px); }
.founder-photo picture { aspect-ratio: 620 / 731; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--surface); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.founder-photo figcaption { display: grid; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--fg-2); }
.founder-photo figcaption strong { font-family: var(--f-serif); font-size: 24px; font-weight: 400; color: var(--fg); }
.founder-text { display: grid; gap: 24px; }
.founder-text > p.lead { color: var(--fg); }
.founder-quote { padding-left: 22px; border-left: 2px solid var(--brass); }
.founder-quote p { font-family: var(--f-serif); font-size: clamp(23px, 2.2vw, 28px); line-height: 1.35; color: #F7F5F0; }

.story summary {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  min-height: 48px; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-weight: 500;
}
.story summary::-webkit-details-marker { display: none; }
.story summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--accent); }
.story[open] summary::after { content: "−"; }
.story summary:hover { border-color: var(--fg-2); }
.story-body { display: grid; gap: 16px; margin-top: 20px; color: var(--fg-2); max-width: 62ch; }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts div { padding: 18px 16px 0 0; }
.facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.facts dt { font-family: var(--f-serif); font-size: 30px; line-height: 1.1; color: #F7F5F0; }
.facts dd { font-size: 15.5px; color: var(--fg-2); }
.founder .cta-row { margin-top: 0; }

/* Dates clés */
.dates { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.dates li { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 2px solid var(--line); }
.dates li.is-key { border-top-color: var(--brass); }
.date-when { font-family: var(--f-serif); font-size: clamp(28px, 2.6vw, 34px); line-height: 1.1; }
.dates h3 { font-size: 18px; font-weight: 500; color: var(--accent); }
.dates li > p:last-child { color: var(--fg-2); font-size: 17px; }

/* 11. Simulateur 3e pilier ----------------------------------------------- */
.sim { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; }
.panel { padding: clamp(24px, 3vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.sim-inputs { display: grid; gap: 26px; align-content: start; }
.field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--fg-2); font-size: 16.5px; }
.field output { color: var(--fg); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px;
  margin: 2px 0 0; background: transparent; cursor: pointer; touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: rgba(237, 235, 228, .2); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(237, 235, 228, .2); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--brass); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%;
  background: var(--brass); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--brass);
}
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brass); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--brass); }
input[type="range"]:focus-visible { outline-offset: 0; }

.sim-lead { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.sim-lead h3 { font-family: var(--f-serif); font-size: 26px; line-height: 1.15; font-synthesis: none; }
.sim-lead > p { color: var(--fg-2); font-size: 16.5px; }
.sim-lead .inline-form { width: 100%; }
.sim-lead .form-done { width: 100%; }
.sim-alt { font-size: 16px; }
.sim-alt a { color: var(--link); }

.sim-label { color: var(--fg-2); font-size: 16.5px; }
.sim-big { font-family: var(--f-serif); font-size: clamp(48px, 5.6vw, 76px); line-height: 1; margin-top: 8px; font-variant-numeric: lining-nums tabular-nums; color: #F7F5F0; }
.sim-cur { font-family: var(--f-sans); font-size: 17px; font-weight: 500; color: var(--fg-2); vertical-align: .9em; }
.chart { width: 100%; height: auto; margin-top: 20px; overflow: visible; }
.chart .grid { stroke: rgba(237, 235, 228, .1); stroke-width: 1; }
.chart .area { fill: url(#fade); }
.chart .line { fill: none; stroke: var(--brass); stroke-width: 2.5; }
.chart .paid { fill: none; stroke: rgba(237, 235, 228, .55); stroke-width: 1.5; stroke-dasharray: 4 5; }
.chart .dot { fill: var(--brass); }
.chart text { font-family: var(--f-sans); font-size: 13px; fill: var(--fg-2); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; font-size: 15px; color: var(--fg-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; width: 20px; height: 0; border-top: 2.5px solid var(--brass); }
.legend i.l-paid { border-top: 1.5px dashed rgba(237, 235, 228, .6); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.kpis div { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
.kpis dt { font-size: 14.5px; color: var(--fg-2); line-height: 1.35; }
.kpis dd { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 4px; }
.fine { margin-top: 18px; font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }

/* 12. Questions ---------------------------------------------------------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(40px, 7vw, 104px); align-items: start; }
.faq-aside { display: grid; gap: 16px; position: sticky; top: calc(var(--head-h) + 24px); }
.faq-aside p { color: var(--fg-2); }
.faq-aside a { color: var(--link); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 500; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq summary:hover { color: var(--accent); }
.answer { display: grid; gap: 12px; padding: 0 40px 22px 0; color: var(--fg-2); max-width: 64ch; }
.answer a { color: var(--link); }

/* 13. Contact et formulaires --------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.coords { padding-block: 12px; }
.coord { padding: 16px 0; border-bottom: 1px solid var(--line); }
.coord:last-child { border-bottom: 0; }
.coord dt { font-size: 15px; color: var(--fg-2); margin-bottom: 2px; }
.coord dd { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 19px; color: var(--fg); overflow-wrap: anywhere; }
.coord dd > a { text-decoration: none; min-width: 0; }
.coord dd > a:hover { color: var(--brass-2); text-decoration: underline; }
.copy {
  min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; font-size: 15px; color: var(--fg);
}
.copy:hover { border-color: var(--fg-2); }

.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; }
.f { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.f.full { grid-column: 1 / -1; }
.f label, .f legend { font-size: 16px; color: var(--fg-2); padding: 0; }
.f .opt { color: var(--fg-2); opacity: .8; }
.f input, .f select, .f textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--field); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 17px;
  transition: border-color .2s ease;
}
.tone-dark .f input, .tone-dark .f select, .tone-dark .f textarea { border-color: rgba(237, 235, 228, .28); }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.f input::placeholder, .f textarea::placeholder { color: var(--fg-2); opacity: .75; }
.f select {
  -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.f select { font-size: 16px; text-overflow: ellipsis; }
.f select option { background: var(--night); color: var(--mist); }
.f textarea { min-height: 120px; resize: vertical; }
.f input[aria-invalid="true"] { border-color: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; display: inline-flex; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 8px 18px;
  border: 1px solid rgba(237, 235, 228, .28); border-radius: var(--r-sm);
  color: var(--fg); font-size: 16.5px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.chips input:checked + span { background: var(--mist); border-color: var(--mist); color: var(--night); }
.chips input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.consent { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--fg-2); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--brass); }
.consent a { color: var(--link); }
.form-error { grid-column: 1 / -1; color: var(--danger); font-size: 16px; }
.form-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.form-ok, .form-fallback { grid-column: 1 / -1; display: grid; gap: 14px; }
.form-ok h3, .form-fallback h3 { font-family: var(--f-serif); font-size: 32px; line-height: 1.15; font-synthesis: none; }
.form-ok p, .form-fallback p { color: var(--fg-2); }
.form-ok a { color: var(--link); }
.form-fallback pre {
  margin: 0; padding: 16px; max-height: 240px; overflow: auto; white-space: pre-wrap;
  font-family: var(--f-sans); font-size: 15px; line-height: 1.6; color: var(--fg);
  background: rgba(7, 12, 23, .5); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.form-fallback .cta-row { margin-top: 4px; }
.form-fallback .copy { justify-self: start; }

/* 14. Pied de page et WhatsApp ------------------------------------------- */
.site-foot { background: var(--deep); color: var(--mist-2); font-size: 16px; --line: var(--rule-dark); --focus: var(--brass); color-scheme: dark; }
.foot-grid { display: grid; grid-template-columns: 1.3fr .9fr .9fr 1.5fr; gap: 40px; padding-block: 72px 48px; }
.foot-brand { display: grid; gap: 18px; align-content: start; }
.foot-brand .brand { margin: 0; }
.foot-brand .brand-mark { height: 44px; }
.foot-brand .brand-word { height: 18px; }
.swiss { display: inline-flex; align-items: center; gap: 10px; color: var(--mist); }
.swiss svg { width: 18px; height: 18px; border-radius: 3px; }
.foot-h { font-family: var(--f-sans); font-size: 16px; font-weight: 500; color: var(--mist); margin-bottom: 14px; }
.site-foot ul { list-style: none; display: grid; gap: 10px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--mist); text-decoration: underline; }
.foot-legal dl { display: grid; gap: 4px; }
.foot-legal dt { font-size: 14.5px; color: #8E97AA; }
.foot-legal dd { margin-bottom: 8px; color: var(--mist); }
.foot-legal dd a { text-decoration: underline; }
.foot-legal p a { color: var(--brass-2); text-decoration: underline; }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  padding-block: 22px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule-dark); font-size: 15px;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.wa {
  position: fixed; z-index: 50;
  right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px;
  border: 1px solid rgba(196, 162, 101, .7); border-radius: 999px;
  background: var(--night); color: var(--mist); text-decoration: none; font-weight: 500;
  box-shadow: 0 14px 30px -14px rgba(4, 7, 14, .65);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.wa svg { width: 24px; height: 24px; color: var(--brass); }
.wa:hover { background: var(--night-2); }
.wa.is-away { opacity: 0; transform: translateY(12px); pointer-events: none; }
html.menu-open .wa { display: none; }

/* 15. Pages légales et 404 ----------------------------------------------- */
.page-head { padding: calc(var(--head-h) + clamp(48px, 7vw, 88px)) 0 clamp(36px, 5vw, 56px); }
.page-head h1 { font-family: var(--f-serif); font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -.01em; font-synthesis: none; }
.page-head p { margin-top: 16px; max-width: 60ch; color: var(--fg-2); }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; font-size: 15.5px; color: var(--fg-2); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumbs a { color: var(--fg-2); }
.doc { padding-bottom: var(--sec-y); }
.doc-body { max-width: 72ch; display: grid; gap: 16px; color: var(--fg-2); }
.doc-body h2 { font-size: clamp(26px, 2.6vw, 32px); color: var(--fg); margin-top: 28px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body strong { color: var(--fg); font-weight: 500; }
.doc-body a { color: var(--link); }
.doc-body ul { display: grid; gap: 8px; padding-left: 22px; }
.doc-body dl { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr; gap: 10px 24px; padding: 20px 0; border-block: 1px solid var(--line); }
.doc-body dt { color: var(--fg); font-weight: 500; }
.doc-body .updated { margin-top: 24px; font-size: 15.5px; }
.doc-body .todo-note { display: none; }

.notfound { min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--head-h) + 48px) 64px; }
.notfound-in { display: grid; gap: 20px; justify-items: start; max-width: 620px; }
.notfound h1 { font-family: var(--f-serif); font-size: clamp(40px, 6vw, 72px); line-height: 1.05; font-synthesis: none; }
.notfound p { color: var(--fg-2); }

/* Réponse au formulaire sans JavaScript (contact.php) */
.plain { min-height: 100svh; display: grid; place-items: center; padding: 48px var(--gutter); }
.plain-box { max-width: 560px; display: grid; gap: 18px; }
.plain-box h1 { font-family: var(--f-serif); font-size: clamp(34px, 5vw, 48px); line-height: 1.1; }
.plain-box p { color: var(--fg-2); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1280px) {
  .head-tel span { display: none; }
  .head-tel { justify-content: center; width: 46px; height: 46px; border: 1px solid var(--rule-dark); border-radius: var(--r-sm); }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-btn { display: inline-block; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps::before { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --head-h: 68px; }
  .sec-head, .conviction, .svc-follow, .founder, .faq-layout, .sim, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-head { align-items: start; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-more { grid-template-columns: minmax(0, 1fr); }
  .founder-photo { position: static; max-width: 380px; justify-self: start; }
  .faq-aside { position: static; }
  .dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; padding-bottom: 28px; }
  .step::before { grid-row: 1 / span 3; margin-bottom: 0; }
  .step::after { content: ""; position: absolute; left: 24px; top: 52px; bottom: 4px; width: 1px; background: var(--line); }
  .step:last-child::after { display: none; }
  .step .step-meta { margin-top: 0; padding-top: 0; }
  .brand-mark { height: 30px; }
  .brand-word { height: 13px; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .head-cta { display: none; }
  .head-in { gap: 10px; }
  .hero { align-items: flex-start; min-height: 0; padding-bottom: 56px; }
  .hero::after { background: linear-gradient(180deg, rgba(11, 18, 34, .55) 0%, rgba(11, 18, 34, .45) 55%, rgba(11, 18, 34, .7) 100%); }
  .hero-bg img { object-position: 64% 100%; }
  .hero h1 { gap: 14px; }
  .hero-who { font-size: 16px; }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc.wide { grid-column: auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .facts div:nth-child(3) { border-left: 0; padding-left: 0; }
  .dates { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .chart text { font-size: 22px; }
  .chart .line { stroke-width: 4; }
  .chart .paid { stroke-width: 2.5; }
  .lead-form { grid-template-columns: minmax(0, 1fr); }
  .answer { padding-right: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 56px; }
  .site-foot { padding-bottom: 72px; }
  .doc-body dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .doc-body dd { margin-bottom: 10px; }
  .wa span { display: none; }
  .wa { padding: 0; width: 56px; height: 56px; justify-content: center; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .wa svg { width: 26px; height: 26px; }

  /* Tableau agent / courtier en cartes */
  .compare { overflow: visible; border: 0; }
  .compare table { min-width: 0; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { margin-bottom: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
  .compare tbody th { width: auto; padding: 14px 16px 6px; border: 0; color: var(--fg); font-size: 17px; }
  .compare td { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 6px 16px; border: 0; font-size: 16.5px; }
  .compare td::before { content: attr(data-label); font-size: 14.5px; color: var(--fg-2); padding-top: 2px; }
  .compare td.is-us { background: transparent; padding-bottom: 14px; }
}
@media (max-width: 480px) {
  .inline-form { flex-direction: column; gap: 10px; }
  .inline-form input { flex: none; width: 100%; border-right: 1px solid rgba(237, 235, 228, .55); border-radius: var(--r-sm); }
  .inline-form .btn { border-radius: var(--r-sm); width: 100%; }
  .hero-trust { flex-direction: column; gap: 8px; }
  .cta-row .btn, .form-foot .btn { width: 100%; }
  .coord dd { font-size: 18px; }
}

/* Mouvement réduit ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Impression ------------------------------------------------------------- */
@media print {
  .site-head, .menu, .wa, .hero-bg, .inline-form, .sim-lead, .lead-form, .skip, .cta-row { display: none !important; }
  body, .tone-dark, .tone-light, .tone-white, .site-foot { background: #fff !important; color: #000 !important; }
  .hero { min-height: 0; padding: 24px 0; }
  .hero::after { display: none; }
  .hero-q, .hero-lead, .hero-trust, .season, .founder-quote p, .facts dt, .sim-big { color: #000 !important; }
  a { color: #000; }
}