/* DAVINSEN · feuille de style principale */
/* Base */
html,body{margin:0; padding:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: sticky header with scroll-aware nav; editorial single column, wide panels alternate paper / deep teal; method steps get a sticky tracker. */
:root{
  --bg:#F7F5F0; --surface:#FFFFFF; --sunk:#EFEBE3;
  --ink:#15213A; --muted:#5A6276; --line:#DEDACF;
  --deep:#14223F; --deep-2:#1B2C4F; --on-deep:#F2EEE4; --on-deep-muted:#A8B1C4;
  --accent:#D8C8A8; --accent-text:#7A6A52; --accent-soft:#F1EADC;
  --gold:#C39A4C; --gold-text:#9A7427;
  --p1:#F4EEE3; --p2:#E7DCC6;
  --good:#2E7650; --warn:#A25A16;
  --f-display:"Cormorant Garamond", Garamond, Georgia, serif;
  --f-mark:"Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --f-body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --maxw:1160px; --r:10px;
  --shadow:0 1px 2px rgba(19,38,43,.06), 0 12px 32px -12px rgba(19,38,43,.18);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0B1426; --surface:#111D35; --sunk:#0E182D;
  --ink:#EEE9DD; --muted:#9CA5B8; --line:#24314D;
  --deep:#15244A; --deep-2:#1C2E58; --on-deep:#F2EEE4; --on-deep-muted:#A8B1C4;
  --accent:#D8C8A8; --accent-text:#CDBD9E; --accent-soft:#1F2638;
  --gold:#D2AC62; --gold-text:#D8B46C;
  --p1:#16223D; --p2:#1E2D4E;
  --good:#63B98A; --warn:#E0A067;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0B1426; --surface:#111D35; --sunk:#0E182D;
  --ink:#EEE9DD; --muted:#9CA5B8; --line:#24314D;
  --deep:#15244A; --deep-2:#1C2E58; --on-deep:#F2EEE4; --on-deep-muted:#A8B1C4;
  --accent:#D8C8A8; --accent-text:#CDBD9E; --accent-soft:#1F2638;
  --gold:#D2AC62; --gold-text:#D8B46C;
  --p1:#16223D; --p2:#1E2D4E;
  --good:#63B98A; --warn:#E0A067;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-text); outline-offset:3px; border-radius:0}
h1,h2,h3{font-family:var(--f-display); font-weight:700; line-height:1.1; text-wrap:balance; margin:0; letter-spacing:-.005em}
p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font-family:var(--f-body); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text)}
.lead{font-size:clamp(17px,1.4vw,19px); color:var(--muted); max-width:62ch}
section{scroll-margin-top:74px}

/* ---------- Header ---------- */
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--deep) 95%, transparent); color:var(--on-deep); backdrop-filter:saturate(1.3) blur(12px); -webkit-backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid rgba(216,200,168,0); transition:border-color .3s, box-shadow .3s}
.site-head.scrolled{border-bottom-color:rgba(216,200,168,.25); box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.head-row{display:flex; align-items:center; gap:clamp(12px,2vw,32px); height:80px; padding-inline:clamp(16px,1.6vw,24px); transition:height .35s cubic-bezier(.2,.7,.2,1)}
.site-head.scrolled .head-row{height:62px}
.brand{flex:none; display:flex; align-items:center; gap:12px; text-decoration:none; line-height:1; color:var(--on-deep)}
.brand svg{flex:none; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.brand:hover svg{transform:rotate(45deg)}
.brand-txt{display:flex; flex-direction:column}
.brand b{font-family:var(--f-mark); font-weight:500; font-size:25px; letter-spacing:.09em}
.brand small{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-top:4px}
.nav{flex:1; min-width:0; display:flex; justify-content:flex-start; align-self:stretch; overflow-x:auto; overflow-y:hidden; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative; flex:none; display:flex; align-items:center; text-decoration:none; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--on-deep-muted); padding:0 clamp(6px,.65vw,10px); transition:color .2s}
.nav a:hover{color:var(--on-deep)}
.nav a::after{content:""; position:absolute; left:clamp(6px,.65vw,10px); right:clamp(6px,.65vw,10px); bottom:14px; height:1.5px; background:var(--accent); transform:scaleX(0); transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav a.active{color:var(--on-deep); font-weight:700}
.nav a.active::after{transform:scaleX(1)}
.btn{display:inline-flex; align-items:center; gap:8px; font:600 15px/1 var(--f-body); text-decoration:none; padding:13px 20px; border-radius:0; border:1px solid transparent; cursor:pointer; transition:transform .2s, background .2s, border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--deep); color:var(--on-deep)}
.btn-primary:hover{background:var(--deep-2)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--surface)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-accent{background:var(--accent); color:#14223F}
.btn-accent:hover{background:#E6DAC4}
.btn-gold{background:linear-gradient(180deg,#E2C27E 0%,#C9A054 100%); color:#14223F; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -8px rgba(195,154,76,.6)}
.btn-gold:hover{background:linear-gradient(180deg,#EACB8A 0%,#D1A85C 100%)}
.btn-outline{border-color:rgba(242,238,228,.35); color:var(--on-deep)}
.btn-outline:hover{border-color:var(--accent); color:var(--accent)}
.head-cta{flex:none; padding:8px 13px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase}
.progress{position:absolute; left:0; bottom:-1px; height:2px; background:var(--accent); width:0; transition:width .1s linear}

.nav a:first-child{margin-left:auto}
.nav a:last-child{margin-right:auto}
.nav.overflow{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent)}
.nav.overflow a:first-child{padding-left:14px}
.nav.overflow a:last-child{padding-right:24px}
@media (max-width: 1440px){ .head-row .brand small{display:none} }
@media (max-width: 640px){
  .head-row{height:64px; gap:8px}
  .site-head.scrolled .head-row{height:56px}
  .nav a::after{bottom:12px}
  .head-row .brand-txt{display:none}
  .head-cta{padding:7px 10px; font-size:10px; letter-spacing:.06em}
  .head-cta .long{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:radial-gradient(900px 500px at 78% 30%, var(--deep-2), transparent 70%), var(--deep); color:var(--on-deep); padding-block:clamp(56px,8vw,112px) clamp(64px,8vw,104px)}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.6}
.hero-emblem{position:absolute; right:-120px; top:-80px; width:520px; height:520px; opacity:.06; pointer-events:none}
.hero-grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero .eyebrow{color:var(--accent)}
.hero h1{font-size:clamp(40px,5.6vw,68px); font-weight:500; margin-top:18px}
.hero h1 em{font-style:italic; font-weight:500; color:var(--gold)}
.hero .lead{margin-top:22px; color:var(--on-deep-muted)}
.hero .lead strong{color:var(--on-deep); font-weight:600}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-note{margin-top:18px; font-size:14px; color:var(--on-deep-muted)}
.hero-note strong{color:var(--on-deep)}
.hero .dossier{color:var(--ink)}
.hero .dossier::before{background:rgba(242,238,228,.06); border-color:rgba(216,200,168,.3)}
.hero > .wrap > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(10px)} to{transform:none}}

.dossier{background:var(--surface); border:1px solid var(--line); border-radius:0; box-shadow:var(--shadow); padding:26px; position:relative; min-width:0}
.dossier::before{content:""; position:absolute; inset:10px -10px -10px 10px; border:1px solid var(--line); border-radius:0; z-index:-1; background:var(--sunk)}
.dossier-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.dossier-head b{font-family:var(--f-display); font-weight:500; font-size:18px}
.tag{font:500 11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:3px 8px; border-radius:0; white-space:nowrap}
.mini-rows{display:grid; gap:10px; margin-top:16px}
.mini-row{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; font-size:14px}
.mini-row .who{font-weight:600; width:24px; height:24px; display:grid; place-items:center; border-radius:0; background:var(--sunk); font-size:13px}
.mini-row .who.best{background:var(--deep); color:var(--on-deep)}
.mini-row .from{font-family:var(--f-mono); color:var(--muted); text-decoration:line-through; text-decoration-color:var(--muted); font-size:13px}
.mini-row .to{font-family:var(--f-mono); font-weight:500; font-variant-numeric:tabular-nums}
.bar{height:6px; border-radius:0; background:var(--sunk); position:relative; overflow:hidden}
.bar i{position:absolute; left:0; top:0; bottom:0; border-radius:0; background:var(--muted); opacity:.45}
.bar i.best{background:var(--gold); opacity:1}
.dossier-foot{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.kpi b{display:block; font-family:var(--f-display); font-size:24px; font-weight:500; font-variant-numeric:tabular-nums}
.kpi span{font-size:12px; color:var(--muted); line-height:1.35; display:block}
.dossier-caption{font-size:12px; color:var(--muted); margin-top:14px}

/* ---------- Trust strip ---------- */
.trust{border-block:1px solid var(--line); background:var(--surface)}
.trust-grid{display:grid; grid-template-columns:repeat(3,1fr)}
.trust-item{display:flex; gap:14px; align-items:flex-start; padding:24px clamp(8px,2vw,24px)}
.trust-item + .trust-item{border-left:1px solid var(--line)}
.trust-item svg{flex:none; margin-top:2px; color:var(--accent)}
.trust-item b{display:block; font-size:15.5px}
.trust-item span{font-size:14px; color:var(--muted)}

/* ---------- Sections ---------- */
.block{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid; gap:16px; max-width:760px; margin-bottom:clamp(36px,5vw,56px)}
.sec-head h2{font-size:clamp(34px,4vw,50px); color:var(--ink)}
.sec-head h2::after{content:""; display:block; width:56px; height:3px; margin-top:18px; border-radius:0; background:linear-gradient(90deg,#E2C27E,#C9A054)}
.sec-head .eyebrow{color:var(--gold-text)}
.deep .sec-head h2{color:var(--on-deep)}
.deep .sec-head .eyebrow{color:var(--gold)}
.rule{display:flex; align-items:center; gap:12px; color:var(--accent)}
.rule::before,.rule::after{content:""; height:1px; width:40px; background:currentColor; opacity:.6}

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); counter-reset:p}
.pillar{position:relative; overflow:hidden; isolation:isolate; border-radius:0; padding:clamp(26px,3vw,36px); display:grid; gap:14px; align-content:start; border:1px solid color-mix(in srgb, var(--gold) 22%, transparent); transition:transform .3s ease, box-shadow .3s ease}
.pillar:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.pillar::before{content:""; position:absolute; z-index:-1; width:150px; height:150px; right:-20px; top:-20px; border-radius:50%; border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); box-shadow:0 0 0 26px color-mix(in srgb, var(--gold) 7%, transparent), 0 0 0 27px color-mix(in srgb, var(--gold) 25%, transparent)}
.pillar::after{content:""; position:absolute; z-index:-1; width:90px; height:90px; left:-30px; bottom:-30px; transform:rotate(45deg); border:1px solid color-mix(in srgb, var(--gold) 25%, transparent)}
.p1{background:var(--p1)}
.p2{background:var(--p2)}
.p3{background:var(--deep); color:var(--on-deep)}
.p-top{height:64px}
.p-icon{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--deep); color:#E2C27E; box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent), 0 0 0 6px color-mix(in srgb, var(--gold) 12%, transparent)}
.p3 .p-icon{background:linear-gradient(180deg,#E2C27E,#C9A054); color:#14223F}
.p-num{position:absolute; top:55px; right:55px; transform:translate(50%,-50%); font-family:var(--f-display); font-style:italic; font-weight:600; font-size:46px; line-height:1; color:var(--gold-text)}
.p3 .p-num{color:var(--gold)}
.pillar h3{font-size:clamp(28px,2.6vw,34px); margin-top:6px}
.p3 h3{color:#E2C27E}
.pillar p{color:var(--muted)}
.p3 p{color:var(--on-deep-muted)}
.p-tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:4px 0 0; padding:0}
.p-tags li{font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:0; background:color-mix(in srgb, var(--surface) 70%, transparent); color:var(--ink)}
.p3 .p-tags li{background:rgba(242,238,228,.1); color:var(--on-deep)}
.position{margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start}
.position blockquote{margin:0; font-family:var(--f-display); font-size:clamp(22px,2.3vw,28px); line-height:1.35; font-weight:400}
.position blockquote strong{font-weight:600}
.position p{color:var(--muted)}
.position p + p{margin-top:14px}

/* ---------- Method (deep panel) ---------- */
.deep{background:var(--deep); color:var(--on-deep)}
.deep .eyebrow{color:var(--accent)}
.deep .lead{color:var(--on-deep-muted)}
.method{display:grid; grid-template-columns:260px 1fr; gap:clamp(32px,5vw,80px); align-items:start}
.tracker{position:sticky; top:114px; display:grid; gap:2px; list-style:none; margin:0; padding:0; counter-reset:t}
.tracker a{display:flex; align-items:center; gap:14px; text-decoration:none; padding:10px 0; color:var(--on-deep-muted); font-size:15px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; transition:color .25s}
.tracker a:hover{color:var(--on-deep)}
.tracker a .n{font-family:var(--f-mono); font-size:12px; width:30px; height:30px; border-radius:50%; border:1px solid rgba(242,238,228,.25); display:grid; place-items:center; transition:all .25s; letter-spacing:0}
.tracker a.active{font-weight:700; color:#E2C27E}
.tracker a.active .n{background:linear-gradient(180deg,#E2C27E,#C9A054); border-color:#C9A054; color:#14223F}
.tracker-line{margin:14px 0 0 15px; font-size:13px; color:var(--on-deep-muted); letter-spacing:0; text-transform:none}
.steps{display:grid; gap:18px}
.step{background:var(--deep-2); border:1px solid rgba(237,243,241,.08); border-radius:0; padding:clamp(22px,3vw,34px); display:grid; gap:14px; scroll-margin-top:104px; transition:border-color .3s}
.step.active{border-color:color-mix(in srgb, var(--accent) 60%, transparent)}
.step-top{display:flex; align-items:baseline; gap:16px}
.step-top .num{font-family:var(--f-display); font-weight:700; font-size:clamp(24px,2.4vw,30px); line-height:1.1; color:var(--accent)}
.step h3{font-size:clamp(24px,2.4vw,30px)}
.step p{color:var(--on-deep-muted); max-width:62ch}
.step p strong{color:var(--on-deep); font-weight:600}
.get{display:flex; gap:12px; align-items:baseline; padding-top:14px; border-top:1px dashed rgba(237,243,241,.18)}
.get small{flex:none; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.get span{color:var(--on-deep); font-size:16px}

/* ---------- Network ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px)}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:0; padding:clamp(24px,3.5vw,40px); display:grid; gap:16px; align-content:start}
.panel h3{font-size:clamp(24px,2.4vw,30px)}
.panel p{color:var(--muted)}
.panel .fine{font-size:14px; padding:12px 14px; background:var(--sunk); border-radius:0; color:var(--ink)}
.criteria{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.criteria li{font-size:13.5px; padding:6px 12px; border-radius:0; border:1px solid var(--line); background:var(--bg)}

/* ---------- Journey ---------- */
.journey{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative}
.journey::before{content:""; position:absolute; top:19px; left:10%; right:10%; height:1px; background:var(--line)}
.journey li{position:relative; padding:0 clamp(8px,1.2vw,18px); display:grid; gap:10px; align-content:start; text-align:left}
.journey .dot{width:40px; height:40px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; font:500 13px var(--f-mono); position:relative; z-index:1}
.journey li.free .dot{background:linear-gradient(180deg,#E2C27E,#C9A054); border-color:#C9A054; color:#14223F; box-shadow:0 0 0 5px color-mix(in srgb, var(--gold) 18%, transparent)}
.journey li.free h3{color:var(--gold-text)}
.journey li.free .aim{border-left-color:var(--gold)}
.journey li.free .badge{background:linear-gradient(180deg,#E2C27E,#C9A054); color:#14223F}
.journey h3{font-size:23px; margin-top:6px; color:var(--ink)}
.journey p{font-size:14.5px; color:var(--muted)}
.journey .aim{font-size:13px; color:var(--ink); border-left:2px solid var(--accent-text); padding-left:10px}
.badge{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:0; background:var(--accent-soft); color:var(--accent-text); justify-self:start}

/* ---------- Case study ---------- */
.case{background:var(--surface); border:1px solid var(--line); border-radius:0; overflow:hidden; box-shadow:var(--shadow)}
.case-head{background:var(--deep); color:var(--on-deep); padding:clamp(22px,3vw,36px); display:grid; gap:20px}
.case-head .top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:baseline}
.case-head h3{font-size:clamp(24px,2.6vw,32px)}
.case-head .tag{color:var(--on-deep-muted); border-color:rgba(237,243,241,.25)}
.meta{display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:clamp(16px,4vw,48px)}
.meta dt{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-deep-muted)}
.meta dd{margin:2px 0 0; font-weight:600}
.case-body{padding:clamp(22px,3vw,40px); display:grid; gap:clamp(36px,4vw,52px)}
.case-body > *, .essentiel > *, .hero-grid > *, .split > *, .commit > *, .contact-grid > *, .method > *{min-width:0}
.case-sub{display:flex; gap:12px; align-items:baseline; margin-bottom:16px}
.case-sub .n{font-family:var(--f-mono); color:var(--accent-text); font-size:13px}
.case-sub h4{margin:0; font-family:var(--f-display); font-weight:500; font-size:22px}
.essentiel{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(20px,3vw,40px); align-items:center}
.essentiel p{color:var(--muted)}
.essentiel p strong{color:var(--ink)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpis div{background:var(--sunk); border-radius:0; padding:16px}
.kpis b{display:block; font-family:var(--f-display); font-weight:500; font-size:clamp(24px,2.4vw,30px); font-variant-numeric:tabular-nums; line-height:1.1}
.kpis div.hl b{color:var(--gold-text)}
.kpis span{font-size:12.5px; color:var(--muted); line-height:1.35; display:block; margin-top:6px}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:520px}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
thead th{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
tbody th{font-weight:500; color:var(--muted)}
td.num{font-family:var(--f-mono)}
.col-best{background:color-mix(in srgb, var(--accent) 22%, transparent)}
.pill{display:inline-block; font-size:12.5px; padding:2px 9px; border-radius:0; background:var(--sunk)}
.pill.ok{color:var(--good); background:color-mix(in srgb, var(--good) 12%, transparent)}
.pill.warn{color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, transparent)}
.check{color:var(--good); font-weight:700}
.note{margin-top:14px; font-size:14.5px; padding:14px 16px; border-radius:0; background:var(--sunk)}
.note b{color:var(--accent-text)}
.clar{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; list-style:none; margin:0; padding:0}
.clar li{border:1px solid var(--line); border-radius:0; padding:14px 16px; font-size:14.5px; color:var(--muted)}
.clar li b{display:block; color:var(--ink); font-size:15px; margin-bottom:2px}
.legend{display:flex; flex-wrap:wrap; gap:18px; font-size:13px; color:var(--muted); margin-bottom:8px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px}
.chart{min-width:560px}
.chart text{font-family:var(--f-body)}
.results{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
.results div{font-size:14px; color:var(--muted); padding:14px 16px; border-radius:0; border:1px solid var(--line)}
.results div b{color:var(--ink); display:block; margin-bottom:4px}
.results div.best{border-color:var(--accent-text)}
.verdict{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:clamp(20px,3vw,32px); border-radius:0; background:var(--accent-soft)}
.verdict .seal{width:56px; height:56px; border-radius:50%; border:1.5px solid var(--gold-text); display:grid; place-items:center; font:600 13px var(--f-display); letter-spacing:.1em; color:var(--gold-text)}
.verdict h4{margin:0 0 8px; font-family:var(--f-display); font-weight:500; font-size:22px}
.verdict p{font-size:15.5px}
.verdict p + p{margin-top:8px; color:var(--muted)}
.gains{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 28px; list-style:none; margin:0; padding:0}
.gains li{display:flex; gap:10px; font-size:15px}
.gains li::before{content:"✓"; color:var(--good); font-weight:700}
.case-disclaimer{font-size:13px; color:var(--muted); margin-top:16px}

/* ---------- Commitments ---------- */
.commit{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px)}
.pledge{display:flex; align-items:center; gap:18px; margin-bottom:clamp(20px,3vw,32px); padding:clamp(18px,2.5vw,26px) clamp(20px,3vw,32px); border-radius:0; background:var(--deep); color:var(--on-deep); border:1px solid color-mix(in srgb, var(--gold) 45%, transparent)}
.pledge svg{flex:none}
.pledge p{font-family:var(--f-display); font-size:clamp(20px,2.2vw,26px); line-height:1.3}
.pledge strong{font-weight:700}
.gold{color:#E2C27E}
.gold-b{color:var(--gold-text); font-weight:700}
.c-head{display:flex; align-items:center; gap:14px}
.c-badge{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center}
.c-do{background:var(--p1); border-color:color-mix(in srgb, var(--gold) 30%, transparent)}
.c-do .c-badge{background:linear-gradient(180deg,#E2C27E,#C9A054); color:#14223F}
.c-do h3{color:var(--ink)}
.c-not{background:var(--p2); border-color:transparent}
.c-not .c-badge{background:var(--deep); color:var(--on-deep)}
.list{list-style:none; margin:0; padding:0; display:grid; gap:0}
.list li{display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start; padding:14px 0; border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent); font-size:15.5px; color:var(--muted)}
.list li:last-child{border-bottom:0}
.list li strong{color:var(--ink); font-weight:700}
.list .y, .list .x{width:22px; height:22px; margin-top:1px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700}
.list .y{background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--gold-text)}
.list .x{background:color-mix(in srgb, var(--ink) 10%, transparent); color:var(--ink)}
.fees{margin-top:clamp(20px,3vw,32px); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:clamp(22px,3vw,34px); border-radius:0; border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); background:var(--surface)}
.fees .eyebrow{color:var(--gold-text); margin-bottom:6px}
.fees h3{font-size:clamp(26px,2.6vw,32px); margin-bottom:8px}
.fees p{color:var(--muted); max-width:70ch}
.fees p strong{color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:0; border-top:1px solid var(--line); max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:20px 0; font-family:var(--f-display); font-size:clamp(18px,1.8vw,21px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-body); color:var(--accent-text); font-size:24px; line-height:1; transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px; color:var(--muted); max-width:66ch}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:start}
.contact-grid h2{font-size:clamp(34px,4vw,50px); margin-top:14px}
.contact-grid h2::after{content:""; display:block; width:56px; height:3px; margin-top:18px; border-radius:0; background:linear-gradient(90deg,#E2C27E,#C9A054)}
.deep .eyebrow{color:var(--gold)}
.contact-points{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px}
.contact-points li{display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start; color:var(--on-deep-muted); font-size:15.5px}
.contact-points li b{color:var(--on-deep); display:block}
.contact-points .ic{width:36px; height:36px; border-radius:50%; background:linear-gradient(180deg,#E2C27E,#C9A054); display:grid; place-items:center; color:#14223F; font:600 12px var(--f-mono); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent)}
form{background:var(--surface); color:var(--ink); border-radius:0; padding:clamp(22px,3vw,36px); display:grid; gap:16px; box-shadow:var(--shadow)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label{display:grid; gap:6px; font-size:14px; font-weight:600}
input,select,textarea{font:400 16px var(--f-body); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:0; padding:12px 14px; width:100%; transition:border-color .2s, box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent-text); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent)}
textarea{min-height:110px; resize:vertical}
fieldset{border:0; padding:0; margin:0; display:grid; gap:8px}
legend{font-size:14px; font-weight:600; padding:0; margin-bottom:6px}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg label{font-weight:500; display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:9px 14px; border-radius:0; cursor:pointer; background:var(--bg)}
.seg input{width:auto; accent-color:var(--deep)}
.seg label:has(input:checked){border-color:var(--ink); font-weight:600}
.form-foot{font-size:13px; color:var(--muted)}
.form-ok{padding:14px 16px; border-radius:0; background:var(--accent-soft); font-size:14.5px}
.form-ok b{display:block}

/* ---------- Footer ---------- */
.site-foot{position:relative; background:#0F1A33; color:var(--on-deep-muted); font-size:14.5px}
.site-foot::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.7}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:clamp(28px,4vw,56px); padding-block:clamp(48px,6vw,72px)}
.foot-grid > *{min-width:0}
.foot-brand{display:grid; gap:14px; align-content:start}
.foot-brand .brand b{font-size:24px}
.foot-brand p{max-width:40ch; line-height:1.6}
.foot-motto{font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.foot-col{display:grid; gap:10px; align-content:start}
.foot-col h3{font-family:var(--f-body); font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--on-deep); margin-bottom:6px}
.foot-col a{color:var(--on-deep-muted); text-decoration:none; justify-self:start; transition:color .2s}
.foot-col a:hover{color:var(--on-deep)}
.foot-name{font-family:var(--f-display); font-size:22px; font-weight:600; color:var(--on-deep)}
.foot-col a.foot-mail{color:#E2C27E}
.foot-col a.foot-mail:hover{text-decoration:underline}
.foot-col a.foot-cta{margin-top:8px; padding:10px 14px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#14223F}
.foot-bottom{border-top:1px solid rgba(242,238,228,.1)}
.foot-bottom-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 24px; padding-block:18px; font-size:12.5px; color:rgba(168,177,196,.8)}
.foot-legal{display:flex; flex-wrap:wrap; gap:6px 20px}
.foot-legal a{color:inherit; text-decoration:none; transition:color .2s}
.foot-legal a:hover{color:var(--on-deep)}
.foot-legal .to-top{color:var(--gold)}
.form-foot a{color:var(--accent-text)}
@media (max-width: 980px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1 / -1} }
@media (max-width: 560px){ .foot-grid{grid-template-columns:1fr} .foot-bottom-row{flex-direction:column; align-items:flex-start} }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid,.position,.split,.commit,.contact-grid,.essentiel{grid-template-columns:1fr}
  .method{grid-template-columns:1fr}
  .tracker{position:static; display:flex; flex-wrap:wrap; gap:6px 18px}
  .tracker-line{display:none}
  .journey{grid-template-columns:1fr; gap:22px}
  .journey::before{top:20px; bottom:20px; left:19px; right:auto; width:1px; height:auto}
  .journey li{grid-template-columns:40px 1fr; column-gap:16px; padding:0}
  .journey li > :not(.dot){grid-column:2}
  .journey .dot{grid-row:1 / span 4}
  .journey h3{margin-top:8px}
  .clar,.results{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  body{font-size:16px}
  .trust-grid,.pillars,.clar,.results,.gains,.row2{grid-template-columns:1fr}
  .trust-item + .trust-item{border-left:0; border-top:1px solid var(--line)}
  .meta{grid-template-columns:1fr 1fr}
  .fees{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .kpis div.hl{grid-column:1 / -1}
  .dossier::before{display:none}
  .verdict{grid-template-columns:1fr}
}

/* ---------- Scroll reveal ---------- */
.js .reveal{opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0ms); will-change:opacity, transform}
.js .reveal.from-left{transform:translateX(-40px)}
.js .reveal.from-right{transform:translateX(40px)}
.js .reveal.zoom{transform:scale(.96) translateY(20px)}
.js .reveal.visible{opacity:1; transform:none}
.js .sec-head.reveal h2::after, .js .contact-grid .reveal h2::after{width:0; transition:width .9s cubic-bezier(.2,.7,.2,1) .35s}
.js .sec-head.reveal.visible h2::after, .js .contact-grid .reveal.visible h2::after{width:56px}
.js .journey li.reveal .dot{transform:scale(.4); transition:transform .6s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0ms) + .2s)}
.js .journey li.reveal.visible .dot{transform:none}
.hero-emblem{transition:transform .1s linear}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1!important; transform:none!important}
  .js .sec-head.reveal h2::after{width:56px}
}.js .pillar.reveal.visible:hover{transform:translateY(-4px); transition:transform .3s ease}

/* ---------- Contact person & form states ---------- */
.contact-card{margin-top:32px; padding:20px 22px; border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); display:grid; gap:4px; max-width:360px}
.cc-label{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.cc-name{font-family:var(--f-display); font-size:26px; font-weight:600; color:var(--on-deep)}
.cc-mail{color:#E2C27E; text-decoration:none; font-size:15.5px; justify-self:start; border-bottom:1px solid transparent; transition:border-color .2s}
.cc-mail:hover{border-bottom-color:#E2C27E}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
form{position:relative}
.form-ok.error{background:color-mix(in srgb, var(--warn) 14%, var(--surface)); color:var(--ink)}
.form-ok b{margin-bottom:2px}
button[disabled]{opacity:.7; cursor:progress}
.foot-contact{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline}
.foot-contact span{color:var(--ink); font-weight:600}
.foot-contact a{color:var(--gold-text); text-decoration:none}
.foot-contact a:hover{text-decoration:underline}
/* ---------- Legal pages ---------- */
.legal{padding-block:clamp(48px,7vw,96px)}
.legal-wrap{max-width:760px}
.legal h1{font-size:clamp(38px,5vw,56px); margin:12px 0 24px}
.legal h1::after{content:""; display:block; width:56px; height:3px; margin-top:18px; background:linear-gradient(90deg,#E2C27E,#C9A054)}
.legal h2{font-size:26px; margin:40px 0 12px; color:var(--ink)}
.legal p{color:var(--muted); max-width:66ch}
.legal p + p{margin-top:12px}
.legal p strong{color:var(--ink)}
.legal a{color:var(--gold-text)}
.legal-list{display:grid; grid-template-columns:minmax(160px,auto) 1fr; gap:10px 24px; margin:0}
.legal-list dt{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-top:2px}
.legal-list dd{margin:0; color:var(--ink)}
.todo{background:var(--accent-soft); color:var(--accent-text); padding:1px 8px; font-size:.9em; font-weight:600}
@media (max-width: 560px){ .legal-list{grid-template-columns:1fr; gap:2px} .legal-list dd{margin-bottom:12px} }
/* ---------- Story ---------- */
.story{background:var(--p1); border-block:1px solid color-mix(in srgb, var(--gold) 20%, transparent)}
.story-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,96px); align-items:center}
.story-grid > *{min-width:0}
.story-text{display:grid; gap:16px; max-width:60ch}
.story-text h2{font-size:clamp(34px,4vw,50px); color:var(--ink)}
.story-text h2::after{content:""; display:block; width:56px; height:3px; margin-top:18px; background:linear-gradient(90deg,#E2C27E,#C9A054)}
.story-text .eyebrow{color:var(--gold-text)}
.story-text p{color:var(--muted); font-size:17px}
.story-text p strong{color:var(--ink)}
.story-text blockquote{margin:8px 0 0; padding-left:20px; border-left:2px solid var(--gold); font-family:var(--f-display); font-size:clamp(21px,2.1vw,25px); line-height:1.35; color:var(--ink)}
.gold-i{color:var(--gold-text); font-style:italic}
.signature{display:flex; flex-direction:column; gap:2px; margin-top:6px}
.sig-name{font-family:var(--f-display); font-style:italic; font-size:26px; font-weight:600; color:var(--ink)}
.sig-role{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

.quotes{position:relative; height:clamp(300px,32vw,380px); display:grid; place-items:center}
.sheet{position:absolute; width:clamp(170px,17vw,210px); aspect-ratio:3/4; max-width:100%; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); padding:22px 20px; display:flex; flex-direction:column; gap:11px; transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.sheet-tag{font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.sheet i{display:block; height:6px; background:var(--sunk)}
.sheet i.short{width:60%}
.sheet b{display:block; height:10px; margin-top:auto; background:var(--deep)}
.s1{transform:translateX(-38%) rotate(-9deg)}
.s1 b{width:55%}
.s2{transform:translateY(-4%); z-index:2}
.s2 b{width:85%; background:linear-gradient(90deg,#E2C27E,#C9A054)}
.s3{transform:translateX(38%) rotate(8deg)}
.s3 b{width:40%}
.neq{position:absolute; z-index:3; left:50%; bottom:6%; transform:translateX(-50%); width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--deep); color:#E2C27E; font:600 30px/1 var(--f-display); box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 20%, transparent); transition:transform .6s cubic-bezier(.3,1.5,.5,1) .9s}
/* stacked before it scrolls into view, fans out when revealed */
.js .quotes.reveal:not(.visible) .sheet{transform:none}
.js .quotes.reveal:not(.visible) .neq{transform:translateX(-50%) scale(0)}
@media (max-width: 980px){ .story-grid{grid-template-columns:1fr} .quotes{height:300px} }
/* ---------- Phone menu (3 bars) ---------- */
.burger{display:none; flex:none; margin-left:auto; width:44px; height:44px; padding:0; background:none; border:0; position:relative; cursor:pointer; color:var(--on-deep)}
.burger span{position:absolute; left:10px; right:10px; height:1.5px; background:currentColor; transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s, top .35s cubic-bezier(.2,.7,.2,1)}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"]{color:#E2C27E}
.burger[aria-expanded="true"] span:nth-child(1){top:21.5px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:21.5px; transform:rotate(-45deg)}
@media (max-width: 900px){
  .burger{display:block}
  .head-row .head-cta{display:none}
  .head-row #nav{position:absolute; top:100%; left:0; right:0; flex:none; flex-direction:column; align-self:auto; overflow:hidden; max-height:0; background:var(--deep); padding:0 clamp(16px,4vw,32px); border-bottom:1px solid transparent; -webkit-mask-image:none; mask-image:none; transition:max-height .45s cubic-bezier(.2,.7,.2,1), padding .45s, border-color .3s}
  .head-row #nav.open{max-height:80vh; overflow-y:auto; padding-block:8px 20px; border-bottom-color:rgba(216,200,168,.25); box-shadow:0 24px 40px -24px rgba(0,0,0,.6)}
  .head-row #nav a{margin:0; padding:15px 0 15px 0; font-size:13px; letter-spacing:.14em; border-bottom:1px solid rgba(242,238,228,.08); opacity:0; transform:translateY(-6px); transition:opacity .3s, transform .3s, color .2s}
  .head-row #nav a:last-child{border-bottom:0}
  .head-row #nav.open a{opacity:1; transform:none}
  .head-row #nav.open a:nth-child(2){transition-delay:.03s} .head-row #nav.open a:nth-child(3){transition-delay:.06s}
  .head-row #nav.open a:nth-child(4){transition-delay:.09s} .head-row #nav.open a:nth-child(5){transition-delay:.12s}
  .head-row #nav.open a:nth-child(6){transition-delay:.15s} .head-row #nav.open a:nth-child(7){transition-delay:.18s}
  .head-row #nav.open a:nth-child(8){transition-delay:.21s}
  .head-row #nav a::after{left:0; right:auto; width:28px; bottom:9px}
  .head-row #nav.overflow a:first-child, .head-row #nav.overflow a:last-child{padding-left:0; padding-right:0}
  .head-row .brand-txt{display:flex}
  .head-row .brand small{display:none}
}