:root{
  --bg:#070b08; --panel:#0b1410; --ink:#d7ffe6; --dim:#5e8c72;
  --green:#33ff99; --amber:#ffc24b; --line:rgba(51,255,153,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'JetBrains Mono',monospace;background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.6;font-size:15px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 28px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.green{color:var(--green)}.amber{color:var(--amber)}.dim{color:var(--dim)}
/* scanlines + glow overlay */
.scan{position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.18) 3px,rgba(0,0,0,0) 4px);mix-blend-mode:multiply;opacity:.5}
.vign{position:fixed;inset:0;z-index:59;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(0,0,0,.55))}
.cur{display:inline-block;width:.62ch;height:1.05em;background:var(--green);vertical-align:-2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--green);z-index:99;box-shadow:0 0 10px var(--green)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px;background:rgba(7,11,8,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);font-size:13px}
.logo{font-weight:800;color:var(--green)}.logo::before{content:"~/ ";color:var(--dim)}
.navlinks{display:flex;gap:22px;color:var(--dim)}
.navlinks a::before{content:"./"}
.navlinks a:hover{color:var(--green)}

/* terminal window */
.term{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 0 60px rgba(51,255,153,.06);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(51,255,153,.04)}
.term-bar i{width:11px;height:11px;border-radius:50%;display:block}
.term-bar .r{background:#ff5f57}.term-bar .y{background:var(--amber)}.term-bar .g{background:var(--green)}
.term-bar span{margin-left:8px;color:var(--dim);font-size:12px}
.term-body{padding:26px 24px}
.prompt::before{content:"$ ";color:var(--green)}

/* hero */
.hero{min-height:100vh;display:flex;align-items:center;padding:90px 0 40px}
.hero .term{width:100%}
.boot{color:var(--dim);font-size:13px;min-height:1.6em}
.hero h1{font-size:clamp(40px,9vw,104px);font-weight:800;line-height:.95;letter-spacing:-2px;color:var(--ink);margin:14px 0}
.hero h1 .green{text-shadow:0 0 24px rgba(51,255,153,.5)}
.hero .tagline{color:var(--dim);max-width:600px;margin-top:10px}
.hero .tagline b{color:var(--ink);font-weight:500}
.hero .meta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border:1px solid var(--green);color:var(--green);border-radius:4px;font-weight:700;font-size:14px;transition:all .2s;background:none;font-family:'JetBrains Mono',monospace;cursor:pointer}
.btn:hover{background:var(--green);color:#06120b;box-shadow:0 0 22px rgba(51,255,153,.4)}
.btn.amber{border-color:var(--amber);color:var(--amber)}
.btn.amber:hover{background:var(--amber);color:#1a1200;box-shadow:0 0 22px rgba(255,194,75,.4)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;background:none;color:var(--dim);border-color:var(--line)}

.block{padding:90px 0}
.cmd{color:var(--dim);font-size:14px;margin-bottom:8px}
.cmd b{color:var(--ink);font-weight:400}
.h2{font-size:clamp(26px,4.5vw,46px);font-weight:800;letter-spacing:-1px;color:var(--green);margin-bottom:30px}
.h2::before{content:"# ";color:var(--dim)}

/* parcours */
.tl{border-left:2px solid var(--line);margin-left:6px}
.tl-i{position:relative;padding:0 0 34px 28px}
.tl-i::before{content:"▸";position:absolute;left:-10px;top:0;color:var(--green);background:var(--bg);font-size:13px}
.tl-i .yr{color:var(--amber);font-size:13px}
.tl-i h3{font-size:19px;margin:4px 0;color:var(--ink)}
.tl-i p{color:var(--dim);font-size:14px;max-width:600px}

/* skills */
.scols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.scol .lab{color:var(--amber);font-size:13px;margin-bottom:14px}
.scol .lab::before{content:"// "}
.sline{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15px}
.sline .v{color:var(--dim);font-size:12px;align-self:center}
.sline:hover{color:var(--green)}
.sline::before{content:"› ";color:var(--green)}

/* projects */
.proj{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.pcard:hover{transform:translateY(-6px);border-color:var(--green);box-shadow:0 18px 50px rgba(51,255,153,.12)}
.pcard .shot{height:190px;background-size:cover;background-position:left top;filter:grayscale(.3) contrast(1.05)}
.pcard .pb{padding:20px}
.pcard .k{color:var(--amber);font-size:12px}
.pcard h3{font-size:22px;margin:6px 0;color:var(--ink)}
.pcard p{color:var(--dim);font-size:13.5px}
.pcard .tags{margin-top:12px;display:flex;gap:7px;flex-wrap:wrap}
.pcard .tags span{font-size:11px;border:1px solid var(--line);border-radius:3px;padding:3px 8px;color:var(--dim)}
.full{grid-column:1/-1}

/* services */
.serv{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sv{border:1px solid var(--line);border-radius:6px;padding:24px;background:var(--panel)}
.sv .k{color:var(--green);font-size:12px}
.sv h3{font-size:18px;margin:8px 0 6px;color:var(--ink)}
.sv p{color:var(--dim);font-size:13.5px}

/* cta + contact form */
.cta{padding:110px 0;text-align:center}
.cta .term-body{padding:50px 30px}
.cta h2{font-size:clamp(28px,5.5vw,60px);color:var(--green);font-weight:800;letter-spacing:-1px}
.cta p{color:var(--dim);margin:14px 0 28px}
.cform{text-align:left;max-width:560px;margin:0 auto}
.frow{margin-bottom:18px}
.frow label{display:block;color:var(--green);font-size:13px;margin-bottom:7px}
.frow label::before{content:"$ "}
.frow input,.frow textarea{width:100%;background:#06100b;border:1px solid var(--line);border-radius:5px;color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:15px;padding:13px 15px;transition:border-color .2s,box-shadow .2s;resize:vertical}
.frow input::placeholder,.frow textarea::placeholder{color:#3f5f4d}
.frow input:focus,.frow textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(51,255,153,.12)}
.frow.err input,.frow.err textarea{border-color:#ff5f57;box-shadow:0 0 0 3px rgba(255,95,87,.12)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.cform-status{margin-top:18px;font-size:14px;min-height:1.2em}
.cform-status.ok{color:var(--green)}
.cform-status.ko{color:#ff5f57}
.cform-status:not(:empty)::before{content:"› "}
footer{border-top:1px solid var(--line);padding:24px 0;color:var(--dim);font-size:12px;text-align:center}

@media(max-width:780px){.navlinks{display:none}.scols,.proj,.serv{grid-template-columns:1fr}.block{padding:64px 0}
  .wrap{padding-left:34px;padding-right:34px}nav{padding:14px 34px}}
@media(max-width:520px){
  .wrap{padding-left:30px;padding-right:30px}nav{padding:13px 30px}
  .hero{min-height:auto;align-items:flex-start;padding-top:74px;padding-bottom:58px}
  .hero h1{font-size:46px}.h2{font-size:28px}
  .htrack{padding:0 30px}.htrack .pcard{flex:0 0 84vw}
  .hhint{left:30px}
  .cta .term-body{padding:40px 22px}
}

/* Compétences : section figée + stepper piloté au scroll */
.skills-outer{position:relative}
.skills-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:88px 0 48px}
/* grille Compétences interactive */
.link-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.cap-col{display:flex;flex-direction:column}
.cap{appearance:none;background:none;border:none;border-bottom:1px dashed var(--line);text-align:left;cursor:pointer;
  color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:clamp(17px,2.5vw,28px);font-weight:700;padding:16px 0;transition:color .25s,padding-left .25s,text-shadow .25s}
.cap::before{content:"› ";color:var(--green)}
.cap:hover,.cap.on{color:var(--green);padding-left:14px;text-shadow:0 0 16px rgba(51,255,153,.45)}
.tool-col{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;padding-top:6px}
.tool{font-family:'JetBrains Mono',monospace;font-size:14px;padding:10px 16px;border:1px solid var(--line);border-radius:4px;color:var(--dim);transition:all .3s}
.tool.lit{color:#06120b;background:var(--green);border-color:var(--green);box-shadow:0 0 22px rgba(51,255,153,.45);transform:translateY(-2px)}
.tool.muted{opacity:.22}
/* projets en scroll horizontal épinglé */
.hscroll-outer{position:relative}
.hsticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:56px}
.proj-head{flex:0 0 auto;width:100%;margin-bottom:26px}
.htrack{display:flex;gap:26px;padding:0 28px;will-change:transform}
.htrack .pcard{flex:0 0 min(540px,82vw);height:60vh;display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s}
.htrack .pcard:hover{transform:none;border-color:var(--green);box-shadow:0 18px 50px rgba(51,255,153,.14)}
.htrack .pcard .shot{height:54%}
.htrack .pcard .pb{flex:1}
.hhint{position:absolute;bottom:32px;left:28px;color:var(--dim);font-size:12px;letter-spacing:2px}
.sv{transition:transform .2s ease}
.htrack .pcard{will-change:transform}
@media(max-width:780px){.link-grid{grid-template-columns:1fr;gap:24px}}
/* compacter les Compétences figées sur petit écran (tout doit tenir à l'écran) */
@media(max-width:560px){
  .skills-sticky{padding:60px 0 16px}
  .skills-sticky .link-grid{gap:14px}
  .skills-sticky .cap{padding:11px 0;font-size:17px}
  .skills-sticky .tool{padding:8px 13px;font-size:13px}
  .skills-sticky .cmd{margin-bottom:4px}
  .skills-sticky .h2{margin-bottom:14px}
}

/* timeline cinématique — titres géants qui défilent, pilotés au scroll */
.cine-outer{position:relative}
.cine-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:78px 0 36px}
.cine-wrap{position:relative;width:100%;padding-left:30px}
/* barre verticale (timeline) avec 4 points, l'actif s'allume */
.cine-rail{position:absolute;left:2px;top:6px;bottom:6px;width:2px;background:var(--line);
  display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:6% 0}
.cine-fill{position:absolute;left:0;top:0;width:2px;height:0;background:var(--green);box-shadow:0 0 10px var(--green);transition:height .12s linear}
.cine-node{position:relative;z-index:1;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--line);transition:all .45s cubic-bezier(.2,.7,.2,1)}
.cine-node.on{background:var(--green);border-color:var(--green);box-shadow:0 0 14px var(--green);transform:scale(1.2)}
.cine-counter{font-size:14px;letter-spacing:2px;color:var(--amber);margin:6px 0 22px}
.cine-counter i{color:var(--dim);font-style:normal}
.cine-stage{position:relative;min-height:46vh}
.cine-slide{position:absolute;left:0;top:0;right:0;opacity:0;transform:translateY(42px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.cine-slide.active{opacity:1;transform:none}
.cine-kicker{color:var(--amber);font-size:14px;margin-bottom:16px}
.cine-slide h3{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:clamp(38px,8vw,108px);
  line-height:.95;letter-spacing:-2px;color:var(--green);text-shadow:0 0 30px rgba(51,255,153,.35)}
.cine-slide p{color:var(--dim);font-size:15px;max-width:560px;margin-top:26px}
@media(max-width:520px){.cine-slide h3{font-size:36px}.cine-stage{min-height:50vh}.cine-wrap{padding-left:24px}}

/* ===== pastilles du terminal hero : commandes interactives ===== */
.term-bar i[data-act]{cursor:pointer;transition:transform .15s;position:relative}
.term-bar i[data-act]:hover{transform:scale(1.2)}
.term-bar i[data-act]:active{transform:scale(.9)}
.term-bar i[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:20px;left:0;white-space:nowrap;
  background:#0e1c14;border:1px solid var(--line);color:var(--dim);font-size:10px;padding:3px 7px;border-radius:5px;z-index:6;pointer-events:none}
.termlog{margin-top:22px;border-top:1px dashed var(--line);padding-top:14px;font-size:13px;line-height:1.6;max-height:240px;overflow-y:auto}
.termlog:empty{display:none}
.termlog .line{white-space:pre-wrap;word-break:break-word}
.termlog .cmd::before{content:"$ ";color:var(--green)}
.termlog .out{color:var(--dim)}
.termlog .out.g{color:var(--green)}.termlog .out.a{color:var(--amber)}.termlog .out.r{color:#ff7a72}
.termlog::-webkit-scrollbar{width:8px}.termlog::-webkit-scrollbar-thumb{background:rgba(51,255,153,.2);border-radius:4px}
.term.shake{animation:termshake .4s}
@keyframes termshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
/* curseur sous les boutons (hero à gauche, contact centré) + sortie des commandes */
.curline{margin-top:10px}
.curline:empty{display:none}
.cterm-out{max-width:600px;margin:16px auto 0}
.cta .curline{text-align:center;margin-top:0}
.cterm-out .termlog{text-align:left;margin-top:16px}
.hint-dots{color:var(--amber);font-size:12.5px;opacity:.85;margin-bottom:18px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}