/* Concept : écran de terminal hacker, phosphore vert sur noir, pluie de code en fond. Le système démarre d'abord (GRUB, systemd, login), puis le CV s'affiche comme la sortie de commandes. Barre tmux en bas pour naviguer. */
:root{
  --bg:#010805;
  --term:rgba(2,14,8,.9);
  --line:#14522b;
  --fg:#c8f5d6;
  --dim:#62a67c;
  --green:#39ff7a;
  --cyan:#59e0e8;
  --amber:#ffc15a;
  --red:#ff6b6b;
  --glow:0 0 8px rgba(57,255,122,.45);
  --mono:"JetBrains Mono","Ubuntu Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --disp:"VT323","JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:14px;line-height:1.6;
  padding-inline:16px;padding-block:20px 70px;-webkit-text-size-adjust:100%;
}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.32;pointer-events:none}
#rain.off{display:none}
.win{
  position:relative;z-index:1;max-width:1000px;margin:0 auto;
  background:var(--term);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 0 0 1px rgba(57,255,122,.08),0 0 50px rgba(57,255,122,.12),inset 0 0 90px rgba(0,0,0,.55);
  overflow:clip;
}
.win::after{ /* scanlines + vignette */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35) 100%);
}
.body{padding:22px clamp(14px,3vw,30px) 28px;position:relative;z-index:2}
.g{color:var(--green);text-shadow:var(--glow)}
.c{color:var(--cyan)}
.a{color:var(--amber)}
.dim{color:var(--dim)}
.u{color:var(--green);font-weight:700;text-shadow:var(--glow)}
.p{color:var(--cyan);font-weight:700}
.ps1{white-space:pre-wrap}
.cmd.typing::after,.cursor{content:"";display:inline-block;width:.6em;height:1.1em;background:var(--green);box-shadow:var(--glow);vertical-align:text-bottom;margin-left:1px}
.cursor{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.line{min-width:0;overflow-wrap:anywhere}
.blk{margin-top:30px;scroll-margin-top:16px}
.out{margin-top:8px;min-width:0}
.out.in{animation:flick .35s ease-out}
@keyframes flick{0%{opacity:.25}30%{opacity:1}45%{opacity:.6}100%{opacity:1}}

/* en-tête */
.head{display:grid;gap:4px}
.name{
  font-family:var(--disp);font-weight:400;margin:0;line-height:.9;letter-spacing:.02em;
  font-size:clamp(54px,13vw,128px);color:var(--green);text-shadow:0 0 14px rgba(57,255,122,.55);
  position:relative;width:max-content;max-width:100%;overflow-wrap:anywhere;
}
.name::before,.name::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.name::before{color:var(--cyan);text-shadow:none;animation:glitchA 7s infinite steps(1)}
.name::after{color:var(--red);text-shadow:none;animation:glitchB 7s infinite steps(1)}
@keyframes glitchA{0%,93%,100%{opacity:0;transform:none}94%{opacity:.8;transform:translate(-3px,1px);clip-path:inset(10% 0 55% 0)}96%{opacity:.8;transform:translate(3px,-1px);clip-path:inset(60% 0 8% 0)}98%{opacity:0}}
@keyframes glitchB{0%,93%,100%{opacity:0;transform:none}95%{opacity:.8;transform:translate(3px,0);clip-path:inset(40% 0 30% 0)}97%{opacity:.8;transform:translate(-3px,1px);clip-path:inset(5% 0 70% 0)}98%{opacity:0}}
.role{font-size:clamp(13px,2.6vw,17px);color:var(--fg);letter-spacing:.04em;margin:6px 0 0}
.role b{color:var(--amber);font-weight:700}

/* listes clé/valeur */
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 16px;margin:0}
.kv dt{color:var(--amber);font-weight:700}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.swatch{display:flex;margin-top:12px}
.swatch i{width:26px;height:16px;display:block}

/* tree compétences */
.tr{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:4px 18px;padding:3px 0}
.tr .d{color:var(--cyan);font-weight:700;overflow-wrap:anywhere}
.tr .d::before{content:"├── ";color:var(--dim);font-weight:400}
.tr.last .d::before{content:"└── "}
.tags{display:flex;flex-wrap:wrap;gap:4px 6px;min-width:0}
.tags span{border:1px solid var(--line);border-radius:3px;padding:0 7px;background:rgba(57,255,122,.04);transition:color .15s,border-color .15s,box-shadow .15s}
.tags span:hover{color:var(--green);border-color:var(--green);box-shadow:var(--glow)}

/* timeline */
.job{margin:0 0 18px;min-width:0}
.job h3{margin:0;font-size:14px;font-weight:700}
.job h3::before{content:"● ";color:var(--green);text-shadow:var(--glow)}
.job .at{display:block;color:var(--dim);font-weight:400;padding-left:2ch}
.date{color:var(--amber);font-weight:400}
.job ul{list-style:none;margin:6px 0 0 .55ch;padding:2px 0 2px calc(2ch - .55ch);border-left:1px solid var(--line)}
.job li{padding-left:2ch;text-indent:-2ch}
.job li::before{content:"› ";color:var(--green)}

/* atouts */
.svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:2px 20px}
.svc div::before{content:"● ";color:var(--green);text-shadow:var(--glow);animation:pulse 2.4s ease-in-out infinite}
.svc div:nth-child(2n)::before{animation-delay:.6s}
.svc div:nth-child(3n)::before{animation-delay:1.2s}
@keyframes pulse{50%{opacity:.35}}

.btn{font:inherit;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:3px;padding:0 8px;cursor:pointer;margin-left:6px}
.btn:hover{border-color:var(--green);color:var(--green)}

/* shell */
#shellout .row{margin-top:8px;min-width:0}
#shellout .echo{overflow-wrap:anywhere}
.prompt{display:flex;align-items:baseline;margin-top:10px}
.prompt .ps1{flex:none}
#cmd{flex:1;min-width:0;background:transparent;border:0;color:var(--fg);font:inherit;caret-color:var(--green);padding:0}
#cmd:focus-visible{outline:none}
.prompt:focus-within{outline:1px dashed var(--line);outline-offset:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chip{font:inherit;font-size:12.5px;color:var(--dim);background:transparent;border:1px solid var(--line);border-radius:3px;padding:2px 9px;cursor:pointer}
.chip:hover{color:var(--green);border-color:var(--green)}
.hint{color:var(--dim);font-size:12.5px;margin-top:10px}
footer{margin-top:20px;color:var(--dim);font-size:12px}

/* barre tmux */
.tmux{
  position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:stretch;gap:0;
  background:var(--green);color:#02130a;font-size:12.5px;font-weight:700;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tmux .sess{padding:3px 10px;background:#02130a;color:var(--green);flex:none;border-right:1px solid var(--green)}
.tmux nav{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tmux nav::-webkit-scrollbar{display:none}
.tmux a{color:#02130a;text-decoration:none;padding:3px 9px;white-space:nowrap;flex:none}
.tmux a:hover{background:rgba(2,19,10,.18)}
.tmux a.cur{background:#02130a;color:var(--green)}
.tmux .clk{padding:3px 10px;flex:none;border-left:1px solid #02130a}

/* écran de démarrage */
.bootov{position:fixed;inset:0;z-index:100;background:#000;color:#d0d0d0;font-family:var(--mono);font-size:13px;line-height:1.45;overflow:hidden;padding:18px;transition:opacity .6s}
.bootov.out{opacity:0}
.bootov pre{margin:0;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.bootov .ok{color:#39ff7a}
.bootov .sel{background:#d0d0d0;color:#000}
.bootov .skip{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));font:inherit;font-size:12px;color:#8a8a8a;background:transparent;border:1px solid #444;padding:4px 10px;cursor:pointer;border-radius:3px}
.bootov .skip:hover{color:#fff;border-color:#888}
.bootov .box{border:1px solid #d0d0d0;padding:6px 10px;max-width:640px;margin:14px 0}

@media (max-width:640px){
  body{font-size:13px}
  .tr{grid-template-columns:minmax(0,1fr);gap:2px}
  .tr .tags{margin-bottom:8px}
  .tmux .clk{display:none}
  .bootov{font-size:11.5px;padding:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cursor,.svc div::before,.name::before,.name::after,.out.in{animation:none}
}