/* Polices auto-hebergees : TeX Gyre Pagella (serif) + Heros (sans). */
/* woff2 sous-ensembles produits par tools/build_fonts.sh, servis depuis /fonts/. */
@font-face{font-family:'TeX Gyre Pagella';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/texgyrepagella-regular.woff2") format("woff2")}
@font-face{font-family:'TeX Gyre Pagella';font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/texgyrepagella-italic.woff2") format("woff2")}
@font-face{font-family:'TeX Gyre Pagella';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/texgyrepagella-bold.woff2") format("woff2")}
@font-face{font-family:'TeX Gyre Heros';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/texgyreheros-regular.woff2") format("woff2")}
@font-face{font-family:'TeX Gyre Heros';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/texgyreheros-bold.woff2") format("woff2")}

:root{
  --paper:#F4F0E6;
  --paper-soft:#FAF7F0;
  --ink:#23211C;
  --ink-soft:#57544C;
  --ink-mute:#8C887C;
  --accent:#B5710F;
  --accent-deep:#7C4E0A;
  --line:rgba(35,33,28,0.14);
  --line-soft:rgba(35,33,28,0.08);
  --serif:'TeX Gyre Pagella',Palatino,'Palatino Linotype',Georgia,serif;
  --sans:'TeX Gyre Heros','Helvetica Neue',Arial,sans-serif;
  --wrap:1080px;
  --measure:62ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);
  font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.15;margin:0}
p{margin:0 0 1.1em}
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.measure{max-width:var(--measure)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:20}
.skip-link:focus{left:12px;top:12px}

.site-head{padding:34px 0}
.site-head .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--ink);letter-spacing:.01em;display:inline-flex;align-items:flex-start;gap:6px}
.brand:hover{text-decoration:none}
.brand .sun{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;margin-top:3px}
.nav{display:flex;align-items:baseline;gap:26px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nav a{color:var(--ink-soft)}
.nav a:hover{color:var(--accent-deep);text-decoration:none}
.nav a.current{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.nav .lang{color:var(--ink-mute)}

.hero{padding:56px 0 40px}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 22px}
.hero h1{font-size:clamp(40px,6vw,68px);letter-spacing:-.005em}
.hero .lead{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,26px);color:var(--ink-soft);margin:22px 0 0;max-width:52ch;line-height:1.4}
.rule{height:2px;background:var(--accent);width:120px;margin:38px 0 0;border:0}

.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn{font-size:15px;letter-spacing:.01em;padding:13px 22px;border-radius:2px;border:1px solid var(--ink);color:var(--ink)}
.btn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}

.section{padding:64px 0}
.section h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:8px}
.section-intro{color:var(--ink-soft)}

.axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:44px}
.axis .marker{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-bottom:16px}
.axis h3{font-size:21px;margin-bottom:10px}
.axis p{color:var(--ink-soft);font-size:16px;margin-bottom:14px}
.axis a{font-size:14px;letter-spacing:.02em}

.offer{margin-top:8px}
.offer-item{padding:40px 0;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.offer-item .kicker{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);padding-top:6px}
.offer-item h3{font-size:24px;margin-bottom:10px}
.offer-item p{color:var(--ink-soft);max-width:56ch;margin:0}
@media(min-width:760px){.offer-item{grid-template-columns:210px 1fr;gap:40px}}

.milestones{margin-top:40px;border-top:1px solid var(--line-soft)}
.milestone{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:22px 0;border-bottom:1px solid var(--line-soft)}
.milestone .yr{font-size:14px;letter-spacing:.04em;color:var(--ink-mute);padding-top:5px}
.milestone .what{font-family:var(--serif);font-size:20px;color:var(--ink)}
.milestone .what span{display:block;font-family:var(--sans);font-size:15px;color:var(--ink-soft);margin-top:5px;line-height:1.5}
@media(min-width:640px){.milestone{grid-template-columns:130px 1fr;gap:28px}}

.contact-lines{margin-top:36px}
.contact-lines .row{padding:16px 0;border-top:1px solid var(--line-soft);display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.contact-lines .row .lbl{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);min-width:110px}

.site-foot{padding:52px 0;margin-top:32px;border-top:1px solid var(--line)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--ink-mute)}
.site-foot a{color:var(--ink-soft)}

:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
@media(max-width:560px){.wrap{padding:0 22px}.site-head{padding:24px 0}.nav{gap:18px;font-size:12px}}