/* 3. BASE --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.smooth-native { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f); font-size: 17px; line-height: 1.6; background: var(--creme); color: var(--n800); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
body.lock { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--lk); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--fg); text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--act); outline-offset: 3px; border-radius: 2px; }
[tabindex="-1"]:focus { outline: none; }
.s-vert :focus-visible, .s-pin :focus-visible, .s-brand :focus-visible { outline-color: var(--ocre-l); }
.quote-form :focus-visible { outline-color: var(--action); }
::selection { background: var(--orange); color: #fff; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--pin); color: #fff; padding: 10px 16px; border-radius: var(--r-s); transition: top var(--t1); }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.sec { padding-block: var(--sec); position: relative; }
.sec-sm { padding-block: clamp(48px, 7vw, 96px); position: relative; }

/* 4. TYPOGRAPHIE ------------------------------------------------------- */
.eb { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tx2); display: inline-flex; align-items: center; gap: 12px; }
.eb::before { content: ""; width: 24px; height: 4px; background: var(--mk); flex: none; }
.eb.nomk::before { display: none; }
.d1 { font-size: clamp(46px, 8.4vw, 136px); line-height: .94; letter-spacing: -.045em; font-weight: 300; }
.d2 { font-size: clamp(36px, 5.4vw, 80px); line-height: 1; letter-spacing: -.035em; font-weight: 300; }
.h2 { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.05; letter-spacing: -.025em; font-weight: 300; }
.h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.015em; font-weight: 300; }
.h4 { font-size: 19px; line-height: 1.3; font-weight: 750; letter-spacing: -.005em; }
.d1 b, .d2 b, .h2 b, .h3 b { font-weight: 800; color: var(--kw); letter-spacing: -.04em; }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--tx); max-width: 56ch; }
.small { font-size: 14px; color: var(--tx2); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.kw { color: var(--kw); font-weight: 800; }
.hl { background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 94%, transparent 94%); padding: 0 .06em; }
.lk { color: var(--lk); font-weight: 700; text-decoration: underline; }

/* 5. LE PAS ------------------------------------------------------------- */
/* tracé : palier bas, double courbe, palier haut — rendu en SVG par Pas() */
.pas { overflow: visible; pointer-events: none; }
.pas path.st { fill: none; stroke: var(--mk); stroke-linecap: butt; }
.pas path.hz { fill: none; stroke: var(--tx2); stroke-width: 1; opacity: .7; }
.js .pas.draw path.st { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset var(--t4) var(--ease); }
.pas.draw.is-in path.st, .is-in .pas.draw path.st { stroke-dashoffset: 0; }
.marker { display: block; width: var(--m); height: 4px; background: var(--mk); }