/* ============================================================
   planche technique — dossier d'ingénieur
   noir + accent. pas de glow, pas de radius, que des hairlines.
   accents: violet/rose (aq0) — surchargés cyan/or (sacha)
   ============================================================ */
:root{
  --bg:#060608; --panel:#0c0b10;
  --ink:#e9e7e2; --muted:#8a8595; --dim:#5b5766;
  --acc:#a78bfa; --acc2:#f0abfc; --cyan:#67e8f9;
  --line:rgba(233,231,226,.14); --line-soft:rgba(233,231,226,.07);
  --disp:'Chakra Petch',sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--mono); font-size:15px; line-height:1.7;
  overflow-x:hidden; font-feature-settings:"zero";
}
::selection{background:var(--acc);color:#08060d}
::-webkit-scrollbar{width:10px;background:var(--bg)}
::-webkit-scrollbar-thumb{background:#26232e;border:2px solid var(--bg)}
:focus-visible{outline:1px solid var(--acc);outline-offset:3px}

/* grain — remplace les glows */
body::before{
  content:""; position:fixed; inset:-50%; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05; animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,3%)}
}
@media (prefers-reduced-motion:reduce){ body::before{animation:none} }

/* grille de plan, très discrète */
.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(#000 60%, transparent 96%);
}
.glow{display:none}

/* ---------- header ---------- */
header{
  display:flex; align-items:center; gap:28px;
  padding:16px clamp(20px,5vw,72px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
  background:rgba(6,6,8,.88); backdrop-filter:blur(8px);
}
.logo{
  font-family:var(--disp); font-weight:700; letter-spacing:.14em;
  color:var(--ink); text-decoration:none; font-size:14px;
}
.logo b{color:var(--acc); font-weight:700}
nav{display:flex; gap:22px; margin-left:auto}
nav a{
  color:var(--muted); text-decoration:none; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase;
  background:linear-gradient(var(--acc),var(--acc)) no-repeat 0 100%/0 1px;
  transition:background-size .25s, color .2s; padding-bottom:2px;
}
nav a:hover{color:var(--ink); background-size:100% 1px}
.lang{display:flex; gap:0; margin-left:10px; border:1px solid var(--line)}
.lang button{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  background:none; border:0; color:var(--muted);
  padding:5px 12px; cursor:pointer; transition:.2s;
}
.lang button.on{color:#08060d; background:var(--acc)}
.lang button:not(.on):hover{color:var(--ink)}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero>*, .case, .sk, .timeline li, .cartouche{
    opacity:0; transform:translateY(10px);
    animation:rise .55s cubic-bezier(.22,.61,.2,1) forwards;
  }
  .hero>:nth-child(1){animation-delay:.04s}.hero>:nth-child(2){animation-delay:.12s}
  .hero>:nth-child(3){animation-delay:.2s}.hero>:nth-child(4){animation-delay:.28s}
  .hero>:nth-child(5){animation-delay:.36s}.hero>:nth-child(6){animation-delay:.44s}
  .hero>:nth-child(7){animation-delay:.52s}
  .case:nth-of-type(1){animation-delay:.18s}.case:nth-of-type(2){animation-delay:.26s}
  .case:nth-of-type(3){animation-delay:.34s}.case:nth-of-type(4){animation-delay:.42s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---------- hero ---------- */
.hero{
  position:relative; z-index:1;
  padding:clamp(64px,11vh,116px) clamp(20px,5vw,72px) 56px;
  max-width:1200px;
}
.kicker{
  color:var(--muted); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; display:flex; align-items:center; gap:14px;
}
.kicker::after{content:""; flex:0 0 64px; height:1px; background:var(--acc)}
.hero h1{
  font-family:var(--disp); font-weight:700; color:var(--ink);
  font-size:clamp(44px,9vw,108px); letter-spacing:-.01em; line-height:.98;
  margin:20px 0 8px; text-transform:uppercase;
}
.hero h1 em{
  font-style:normal; color:transparent;
  -webkit-text-stroke:1.5px var(--acc);
}
.tagline{max-width:620px; color:var(--muted); font-size:15px; margin-top:14px}
.tagline b{color:var(--ink); font-weight:500}
.statusline{
  display:flex; flex-wrap:wrap; gap:8px 0; margin:26px 0 0;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.st{display:inline-flex; align-items:center; gap:8px; color:var(--muted)}
.st:not(:last-child)::after{content:"/"; color:var(--dim); margin:0 14px}
.st i{width:6px; height:6px; background:var(--acc); display:inline-block}
i.ok{background:var(--acc)}
.stage-badge{
  display:inline-block; margin:22px 0 0; padding:8px 14px;
  border:1px dashed var(--acc2); color:var(--acc2);
  font-size:13px; letter-spacing:.04em; background:none;
}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  border:1px solid var(--line); padding:13px 24px; border-radius:0;
  transition:border-color .2s, color .2s, background .2s;
  position:relative;
}
.btn:hover{border-color:var(--acc); color:var(--acc)}
.btn.primary{background:var(--acc); border-color:var(--acc); color:#08060d}
.btn.primary:hover{background:var(--ink); border-color:var(--ink); color:#08060d}

/* cartouche — bloc de titre de plan technique */
.cartouche{
  margin-top:44px; border:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5,1fr);
  max-width:760px;
}
.cartouche>div{
  padding:10px 14px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px;
}
.cartouche>div:last-child{border-right:0}
.cartouche span{font-size:9px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase}
.cartouche b{font-family:var(--disp); font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--ink)}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line); overflow:hidden; position:relative; z-index:1}
.tk{display:flex; gap:0; width:max-content; padding:9px 0; animation:tick 30s linear infinite}
.tk span{color:var(--dim); font-size:11px; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; padding:0 22px; border-right:1px solid var(--line-soft)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{
  position:relative; z-index:1;
  padding:clamp(56px,10vh,100px) clamp(20px,5vw,72px);
  max-width:1200px;
}
h2{
  font-family:var(--disp); font-weight:700; font-size:clamp(22px,3.4vw,34px);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  display:flex; align-items:baseline; gap:18px; margin-bottom:8px;
}
h2::before{content:""; width:0; height:0} /* neutralisé */
h2 .idx{
  font-family:var(--mono); font-size:11px; color:var(--acc);
  letter-spacing:.2em; border:1px solid var(--line); padding:2px 8px; align-self:center;
}
.sec-sub{color:var(--muted); margin-bottom:44px; max-width:600px; font-size:14px}

/* ---------- études de cas ---------- */
.case{
  border:1px solid var(--line); border-radius:0;
  background:none; position:relative;
  padding:clamp(24px,4vw,40px); margin-bottom:24px;
  transition:border-color .25s;
}
.case::before,.case::after{
  font-family:var(--mono); color:var(--dim); font-size:13px;
  position:absolute; line-height:1; transition:color .25s;
}
.case::before{content:"+"; top:8px; left:10px}
.case::after{content:"+"; bottom:8px; right:10px}
.case:hover{border-color:var(--acc)}
.case:hover::before,.case:hover::after{color:var(--acc)}
.case-hd{display:flex; align-items:flex-start; gap:20px; margin-bottom:18px}
.num{
  font-family:var(--disp); font-weight:700; font-size:clamp(34px,4.6vw,52px);
  color:transparent; -webkit-text-stroke:1px var(--acc); line-height:1;
  transition:color .3s; letter-spacing:0;
}
.case:hover .num{color:var(--acc)}
.case-hd h3{font-family:var(--disp); font-weight:600; font-size:clamp(17px,2.4vw,23px); letter-spacing:.08em; text-transform:uppercase}
.role{color:var(--dim); font-size:12px; letter-spacing:.1em; margin-top:6px; text-transform:uppercase}
.live{margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; border:1px solid var(--line); padding:4px 10px}
.live i{width:6px; height:6px; border-radius:0}
.live .ok{background:var(--acc)}
.live .wait{background:var(--acc2)}
.case-desc{color:var(--muted); max-width:700px; margin-bottom:26px; font-size:14.5px}
.case-desc b{color:var(--ink)}

/* metrics — tableau de datasheet, plus de boîtes */
.metrics{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
  margin-bottom:24px;
}
.m{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:14px 16px 12px; background:none;
}
.m b{
  display:block; font-family:var(--disp); font-weight:700;
  font-size:clamp(19px,2.6vw,27px); color:var(--ink); line-height:1.15;
}
.case:hover .m b{color:var(--acc)}
.m span{font-size:10px; color:var(--dim); letter-spacing:.16em; text-transform:uppercase}

.tags{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); width:fit-content; max-width:100%}
.tags span{
  font-size:10.5px; letter-spacing:.14em; color:var(--muted);
  padding:4px 12px; border-right:1px solid var(--line); text-transform:uppercase;
}
.tags span:last-child{border-right:0}
.tags span:first-letter{color:var(--acc)}

.case-links{display:flex; flex-direction:column; gap:6px; margin-top:22px; width:fit-content}
.case-links a{
  color:var(--ink); text-decoration:none; font-size:13px; letter-spacing:.04em;
  background:linear-gradient(var(--acc),var(--acc)) no-repeat 0 100%/0 1px;
  transition:background-size .25s, color .2s; padding-bottom:2px; width:fit-content;
}
.case-links a:hover{color:var(--acc); background-size:100% 1px}
.case-links .dim{color:var(--dim); font-size:11.5px}

/* ---------- skills ---------- */
.skill-grid{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.sk{
  padding:22px 26px 22px 0; border-bottom:1px solid var(--line); background:none;
  transition:padding-left .25s, border-color .25s; border-left:0; border-radius:0;
}
.sk:nth-child(odd){border-right:1px solid var(--line); padding-right:34px}
.sk:nth-child(even){padding-left:34px}
.sk:hover{padding-left:calc(34px + 6px)}
.sk:nth-child(odd):hover{padding-right:28px}
.sk h4{font-family:var(--mono); font-size:12px; color:var(--acc); letter-spacing:.2em; margin-bottom:10px; text-transform:uppercase; font-weight:500}
.sk p{color:var(--muted); font-size:13.5px}
.sk p b{color:var(--ink); font-weight:500; letter-spacing:.02em}

/* ---------- timeline ---------- */
.timeline{list-style:none; border-left:1px solid var(--line); margin-left:4px}
.timeline li{display:flex; gap:26px; padding:0 0 30px 26px; position:relative}
.timeline li::before{
  content:""; position:absolute; left:-4px; top:8px; width:7px; height:7px;
  background:var(--bg); border:1px solid var(--acc); transform:rotate(45deg);
}
.timeline li:hover::before{background:var(--acc)}
.timeline li:last-child{padding-bottom:0}
.timeline .when{
  font-family:var(--disp); font-weight:600; color:var(--acc);
  min-width:76px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding-top:2px;
}
.timeline b{color:var(--ink); letter-spacing:.04em; font-weight:500}
.timeline p{color:var(--muted); font-size:13.5px; max-width:560px; margin-top:4px}

/* ---------- contact ---------- */
.contact-row{display:flex; flex-wrap:wrap; gap:12px}
.cv-row{margin-top:12px}

/* slots à remplir */
.todo{outline:1px dashed var(--acc2); outline-offset:3px}

/* ---------- footer ---------- */
footer{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  padding:24px clamp(20px,5vw,72px); border-top:1px solid var(--line);
  color:var(--dim); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--acc)}
.cred{margin-left:auto}

/* ---------- responsive ---------- */
@media (max-width:760px){
  nav{display:none}
  .live{display:none}
  .case-hd{flex-wrap:wrap; gap:12px}
  .metrics{grid-template-columns:1fr 1fr}
  .skill-grid{grid-template-columns:1fr}
  .sk:nth-child(odd){border-right:0; padding-right:0}
  .sk:nth-child(even){padding-left:0}
  .cartouche{grid-template-columns:1fr 1fr; max-width:none}
  .cartouche>div{border-bottom:1px solid var(--line)}
  .timeline .when{min-width:64px}
}