:root{
  --bg:#ffffff; --panel:#f6f8fa; --fg:#1a1f26; --muted:#5b6672;
  --accent:#14597a; --accent-soft:#e8f0f5; --border:#e4e8ee; --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:52rem; margin:0 auto; padding:2.5rem 1.4rem 4rem}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* En-tête */
header.hero{border-bottom:1px solid var(--border); padding-bottom:1.6rem; margin-bottom:2rem}
.hero h1{font-size:2.1rem; letter-spacing:-.02em; margin:0 0 .25rem}
.hero .tagline{font-size:1.12rem; color:var(--accent); font-weight:600; margin:.1rem 0 .9rem}
.hero .lede{color:var(--muted); font-size:1.02rem; margin:.2rem 0 1.1rem; max-width:42rem}
.contact{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-size:.94rem; color:var(--muted)}
.contact a{color:var(--fg)}
.nav{margin-top:1.2rem; display:flex; gap:.7rem; flex-wrap:wrap}

/* Boutons */
.btn{display:inline-block; padding:.55rem 1rem; border-radius:var(--radius); font-weight:600; font-size:.95rem; border:1px solid var(--accent)}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary:hover{background:#0f4763; text-decoration:none}
.btn.ghost{background:transparent; color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft); text-decoration:none}

/* Sections */
section{margin:2.4rem 0}
h2{font-size:1.35rem; letter-spacing:-.01em; margin:0 0 1rem; padding-bottom:.4rem; border-bottom:2px solid var(--accent-soft)}
h3{font-size:1.05rem; margin:0 0 .2rem}

/* Grille compétences */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1rem}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem}
.card h3{color:var(--accent); font-size:1rem; margin-bottom:.5rem}
.card ul{margin:0; padding-left:1.1rem}
.card li{margin:.2rem 0; font-size:.93rem}
.tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.2rem}
.tag{background:#fff; border:1px solid var(--border); border-radius:20px; padding:.12rem .6rem; font-size:.82rem; color:var(--muted)}

/* Langues */
.langues{display:flex; gap:1.6rem; flex-wrap:wrap; font-size:.98rem}
.langues b{color:var(--accent)}

/* Chiffres clés */
.chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1rem}
.chiffres div{background:var(--accent-soft); border-radius:var(--radius); padding:1rem 1.1rem}
.chiffres b{display:block; color:var(--accent); font-size:1.5rem; letter-spacing:-.02em; line-height:1.2}
.chiffres span{display:block; margin-top:.25rem; font-size:.9rem; color:var(--muted)}

/* Offres */
.card.offre{display:flex; flex-direction:column}
.offre .pour{margin:.1rem 0 .6rem; font-size:.9rem; color:var(--muted); font-style:italic}
.offre ul{flex:1}
.offre .prix{margin:.9rem 0 0; padding-top:.7rem; border-top:1px solid var(--border); font-size:.92rem; color:var(--fg)}
.offre .prix b{color:var(--accent); font-size:1.05rem}
.card .pour{margin:.6rem 0 0; font-size:.88rem; color:var(--muted); font-style:italic}

/* Parcours (timeline) */
.xp{border-left:2px solid var(--border); padding:0 0 .2rem 1.3rem; margin-left:.3rem}
.xp .item{position:relative; padding-bottom:1.8rem}
.xp .item::before{content:""; position:absolute; left:-1.72rem; top:.35rem; width:.7rem; height:.7rem; border-radius:50%; background:var(--accent); border:2px solid #fff}
.xp .role{font-size:1.08rem; font-weight:700; margin:0}
.xp .org{color:var(--accent); font-weight:600}
.xp .dates{color:var(--muted); font-size:.88rem; margin:.1rem 0 .5rem}
.xp .ctx{color:var(--fg); margin:.3rem 0}
.xp ul{margin:.4rem 0; padding-left:1.1rem}
.xp li{margin:.18rem 0; font-size:.94rem}
.xp .tech{color:var(--muted); font-size:.86rem; margin-top:.5rem; padding:.5rem .7rem; background:var(--panel); border-radius:8px}

footer{margin-top:3rem; border-top:1px solid var(--border); padding-top:1.2rem; color:var(--muted); font-size:.88rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem}

@media (max-width:560px){
  .wrap{padding:1.6rem 1.1rem 3rem}
  .hero h1{font-size:1.7rem}
}
@media print{
  .nav,.btn{display:none}
  body{font-size:12px}
  .card,.xp .tech{background:#fff}
}