:root{
  --blue:#274DCD;
  --blue-bi:#4C7BE8;
  --navy:#293981;
  --ink:#111827;
  --body:#3F4653;
  --muted:#6B7280;
  --line:#E5E7EB;
  --bg:#FFFFFF;
  --bg-alt:#F7F8FA;
  --card:#FFFFFF;
  --radius:12px;
  --maxw:820px;
}

@media (prefers-color-scheme: dark){
  :root{
    --blue:#4C7BE8;
    --ink:#F3F4F6;
    --body:#B9BFC9;
    --muted:#8A919C;
    --line:#2A2E36;
    --bg:#14161A;
    --bg-alt:#191C21;
    --card:#1B1F25;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{color:var(--ink);line-height:1.25;margin:0}
h1{font-size:clamp(28px,5vw,38px);font-weight:680;letter-spacing:-.02em}
h2{font-size:19px;font-weight:650;letter-spacing:-.01em}
h3{font-size:15.5px;font-weight:640}
p{margin:0 0 16px}

/* ---------- en-tête ---------- */
header.site{
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;height:66px;
}
.brand img{display:block;height:30px;width:auto}
.brand img.dark{display:none}
@media (prefers-color-scheme: dark){
  .brand img.light{display:none}
  .brand img.dark{display:block}
}
nav a{
  color:var(--muted);font-size:14.5px;margin-left:22px;
}
nav a:hover{color:var(--ink);text-decoration:none}
@media (max-width:560px){ nav a{margin-left:14px;font-size:13.5px} }

/* ---------- sections ---------- */
section{padding:56px 0}
section + section{border-top:1px solid var(--line)}
.alt{background:var(--bg-alt)}

.hero{padding:72px 0 60px}
.hero .lead{font-size:18px;color:var(--body);margin:18px 0 0;max-width:60ch}
.eyebrow{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--blue);font-weight:650;margin:0 0 14px;
}
.status{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-size:14px;color:var(--muted);
}
.dot{width:8px;height:8px;border-radius:50%;background:#16A34A;flex:none}

.section-title{margin-bottom:26px}
.section-title p{color:var(--muted);font-size:14.5px;margin:6px 0 0}

.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){ .grid{grid-template-columns:1fr} }

.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px;
}
.card h3{margin-bottom:8px}
.card p{font-size:14.5px;margin:0;color:var(--body)}
.card .tag{
  display:inline-block;font-size:11px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue);margin-bottom:10px;
}

.highlight{
  border-left:3px solid var(--blue);
  padding:4px 0 4px 20px;margin:0;
}
.highlight p:last-child{margin-bottom:0}

ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{
  padding:12px 0;border-bottom:1px solid var(--line);
  font-size:15px;display:flex;gap:14px;align-items:baseline;
}
ul.plain li:last-child{border-bottom:0}
ul.plain b{color:var(--ink);font-weight:640;flex:none;min-width:180px}
@media (max-width:560px){
  ul.plain li{flex-direction:column;gap:2px}
  ul.plain b{min-width:0}
}

.btn{
  display:inline-block;background:var(--blue);color:#fff;
  padding:11px 20px;border-radius:8px;font-size:15px;font-weight:600;
}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{
  background:transparent;color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--line);
}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ---------- pied ---------- */
footer.site{
  border-top:1px solid var(--line);padding:30px 0 46px;
  font-size:13.5px;color:var(--muted);
}
footer.site .row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--ink)}

/* ---------- page CV ---------- */
.cv-placeholder{
  text-align:center;padding:80px 0;
}
.cv-placeholder .icon{width:64px;height:auto;margin:0 auto 22px;display:block;opacity:.85}