:root{
  --ink:#09090B;        /* texte principal */
  --ink-2:#18181B;      /* surfaces sombres */
  --ink-3:#3F3F46;      /* texte secondaire sombre */
  --grey:#52525B;       /* texte muté */
  --grey-2:#71717A;
  --line:#E4E4E7;       /* bordures */
  --bg:#FAFAFA;         /* fond */
  --card:#FFFFFF;       /* cartes */
  --blue:#2563EB;       /* accent / CTA */
  --blue-d:#1D4ED8;
  --blue-soft:#EFF4FF;  /* accent doux */
  --amber:#B45309;      /* note "à compléter" */
  --amber-soft:#FEF6E7;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* Lien d'évitement (accessibilité clavier) */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--blue);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;
}
.skip-link:focus{left:0}

/* ───────── Header ───────── */
header{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,#1c2333 0%,#0b0d14 55%,#09090B 100%);
  color:#fff;padding:60px 0 56px;
}
/* grille technique en fond */
header::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 100% at 30% 0%,#000 0%,transparent 75%);
          mask-image:radial-gradient(120% 100% at 30% 0%,#000 0%,transparent 75%);
}
header .wrap{position:relative;z-index:1}
.head-grid{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px}
.prompt{font-size:13px;color:#7DA2F0;letter-spacing:.3px;margin-bottom:14px}
.prompt .blink{display:inline-block;width:8px;height:15px;background:#2563EB;vertical-align:-2px;margin-left:3px;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}
h1{font-size:clamp(30px,5vw,42px);font-weight:600;letter-spacing:-.5px;line-height:1.08}
.role{font-size:16px;font-weight:500;margin-top:10px;color:#A9C0EE}
.role .sep{color:#3b4a66;margin:0 8px}
.pitch{color:#C7CCD6;font-size:15.5px;margin-top:18px;max-width:600px;line-height:1.65}
.badge{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  background:rgba(37,99,235,.14);border:1px solid rgba(125,162,240,.35);
  border-radius:999px;padding:6px 14px;font-size:13px;color:#CFDDF8;
}
.dot{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.contact{display:flex;flex-direction:column;gap:9px;font-size:13.5px;min-width:230px;font-style:normal}
.contact a,.contact span{display:inline-flex;align-items:center;gap:9px;color:#C7CCD6;text-decoration:none;transition:color .2s ease}
.contact a:hover{color:#fff}
.contact svg{width:16px;height:16px;flex:none;color:#7DA2F0}

/* ───────── Section title ───────── */
.sec{display:flex;align-items:center;gap:14px;margin:54px 0 22px}
.sec h2{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);font-weight:700}
.sec .num{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--grey-2)}
.sec .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* ───────── Case cards ───────── */
.case{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;margin-bottom:18px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.case:hover{border-color:#C7D6F5;box-shadow:0 8px 28px -12px rgba(37,99,235,.22);transform:translateY(-2px)}
.case-head{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px;
}
.case-head h3{font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.2px;line-height:1.25}
.case-head .meta{font-size:12.5px;color:var(--grey);text-align:right;line-height:1.5}
.case-head .meta b{color:var(--ink);font-weight:600}
.case-head .meta .yr{font-family:"JetBrains Mono",monospace;color:var(--blue);font-weight:500}
.block{margin-bottom:15px}
.block:last-of-type{margin-bottom:0}
.lbl{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.5px;
  color:var(--grey-2);font-weight:500;margin-bottom:5px;
}
.lbl::before{content:"// ";color:var(--blue)}
.block p{font-size:14.5px;color:var(--ink-3)}
.stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.tag{
  font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:500;
  background:var(--blue-soft);color:var(--blue-d);border:1px solid #DCE6FD;
  border-radius:7px;padding:4px 10px;
}
.result{
  margin-top:18px;background:var(--amber-soft);border:1px solid #F3E2BE;
  border-left:3px solid #E0A93C;border-radius:8px;padding:12px 15px;font-size:13.5px;
}
.result .lbl{color:#A36A12;margin-bottom:3px}
.result .lbl::before{content:"// ";color:#E0A93C}
.fill{color:#8A6210;font-style:italic}

/* ───────── Skills ───────── */
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.col{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.col:hover{border-color:#C7D6F5;box-shadow:0 6px 20px -12px rgba(37,99,235,.2)}
.col h3{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:13px;
}
.col h3 svg{width:17px;height:17px;color:var(--blue)}
.col ul{list-style:none}
.col li{font-size:13.5px;color:var(--ink-3);padding:3px 0 3px 16px;position:relative}
.col li::before{
  content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
  background:var(--blue);border-radius:1px;transform:rotate(45deg)
}

/* ───────── CTA ───────── */
.cta{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 160% at 100% 0%,#1c2333 0%,#0b0d14 60%);
  color:#fff;border-radius:18px;padding:34px 32px;margin:40px 0 18px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.cta::before{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(80% 120% at 100% 0%,#000,transparent 70%);
          mask-image:radial-gradient(80% 120% at 100% 0%,#000,transparent 70%);
}
.cta>div,.cta a{position:relative;z-index:1}
.cta h2{font-size:20px;font-weight:600;margin-bottom:6px;letter-spacing:-.2px;color:#fff;text-transform:none}
.cta p{color:#B9C0CE;font-size:14px;max-width:420px}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--blue);color:#fff;text-decoration:none;font-weight:600;
  padding:13px 22px;border-radius:10px;font-size:14.5px;white-space:nowrap;
  box-shadow:0 8px 24px -8px rgba(37,99,235,.6);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.btn:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(37,99,235,.7)}
.btn svg{width:17px;height:17px}

footer{
  text-align:center;color:var(--grey-2);font-size:12.5px;padding:22px 0 48px;
  font-family:"JetBrains Mono",monospace;
}

/* ───────── Reveal on scroll ───────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:640px){
  .head-grid{flex-direction:column;align-items:flex-start}
  .case-head .meta{text-align:left}
  .cta{padding:28px 24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .blink{display:none}
}
@media print{
  body{background:#fff;color:#000}
  header,.cta{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  header::before,.cta::before,.blink{display:none}
  .case,.col{box-shadow:none;break-inside:avoid}
  .case:hover,.col:hover{transform:none;box-shadow:none}
  .reveal{opacity:1;transform:none}
  .sec{margin:28px 0 14px}
}