:root{
  --bg:#ffffff;
  --bg-alt:#f6f8fb;
  --text:#0b0f19;
  --muted:#4a5568;
  --primary:#2f6feb;
  --primary-600:#255ad1;
  --accent:#22c55e;
  --border:#e5e7eb;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --radius:18px;
  --focus:0 0 0 3px rgba(47,111,235,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text); background:var(--bg);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
p{margin:.5rem 0 1rem}
h1,h2,h3{line-height:1.2; margin:0 0 .75rem}
h1.display{font-size:clamp(2rem,4vw,3rem); letter-spacing:-.02em}
.lead{font-size:1.125rem; color:var(--muted)}
.small{font-size:.875rem; color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Layout */
.container{width:min(1100px, 92%); margin-inline:auto}
.section-pad{padding:72px 0}
.section-alt{background:var(--bg-alt)}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:40px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.center{text-align:center}
.mt-lg{margin-top:2rem}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1rem; border-radius:12px; border:1px solid transparent; transition:.2s}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-outline{border-color:var(--border)}
.btn-outline:hover{border-color:var(--primary); color:var(--primary)}
.btn-ghost{background:transparent; border-color:transparent}
.btn-sm{padding:.55rem .8rem; border-radius:10px}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--card)}
.icon-btn:hover{box-shadow:var(--shadow)}
.icon-btn svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* Chips / Tags */
.tags{display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:.75rem 0; list-style:none}
.tags li{padding:.35rem .6rem; border-radius:999px; background:var(--bg-alt); font-size:.85rem}

/* Cards */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:transform .2s}
.card-body{padding:1.1rem 1.1rem 1.25rem}
.card-title{font-size:1.125rem; margin-bottom:.25rem}
.card-desc{color:var(--muted)}
.card:hover{transform:translateY(-2px)}

/* Form */
.form{display:grid; gap:1rem}
.grid-2 .field{display:flex; flex-direction:column}
.field span{font-weight:600; margin-bottom:.4rem}
input, select, textarea{
  width:100%; padding:.8rem .9rem; border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:var(--text); outline:none; transition:.2s;
}
input:focus, select:focus, textarea:focus{box-shadow:var(--focus); border-color:var(--primary)}
.form-foot{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.hp{display:none}

/* Thumb (images uniformisées) */
.thumb{position:relative; overflow:hidden; border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02))}
.thumb-16x9{aspect-ratio:16/9}
.thumb img{width:100%; height:100%; object-fit:cover; object-position:center}
.thumb-contain img{object-fit:contain; background:#fff; padding:12px}

/* Tech capsules */
.tech-caps{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.cap{padding:.5rem .7rem; border:1px solid var(--border); background:var(--card); border-radius:12px; font-size:.9rem}

/* About simple */
.about-simple{display:grid; gap:14px}
.about-strip{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
.about-pill{padding:.55rem .8rem; border-radius:999px; background:var(--bg-alt); border:1px solid var(--border)}
.about-link{padding:.55rem .8rem; border-radius:10px; border:1px solid var(--border)}
.about-link:hover{border-color:var(--primary); color:var(--primary)}

/* Focus ring for a11y */
a:focus-visible, button:focus-visible{outline:none; box-shadow:var(--focus)}