/* ==========================================================================
   laurentgilly.net — thème « terminal »
   ========================================================================== */

:root{
  --bg:#0a0f16; --panel:#0d141f; --panel2:#101a28; --line:#1c2940; --line2:#233752;
  --txt:#d9e3ef; --dim:#8ba1b8; --faint:#5d7186;
  --green:#3ddc97; --cyan:#4fc3f7; --amber:#e8b45f;
  --mono:ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt); font-family:var(--mono); font-size:15px; line-height:1.65;
  background-image:radial-gradient(1100px 500px at 70% -10%, rgba(79,195,247,.07), transparent 60%),
                   radial-gradient(800px 400px at 0% 10%, rgba(61,220,151,.05), transparent 55%);
}
::selection{background:rgba(79,195,247,.28)}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px}
.wrap{max-width:960px; margin:0 auto; padding:0 22px}

.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--green); color:#06121f; padding:10px 16px; font-weight:700; border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---- barre de navigation ---- */
nav{
  position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:rgba(10,15,22,.82); border-bottom:1px solid var(--line);
}
.navin{display:flex; align-items:center; gap:20px; padding:13px 22px; max-width:960px; margin:0 auto; font-size:13px}
.navin .host{color:var(--green); white-space:nowrap}
.navin .hostend{color:var(--faint)}
.navlinks{display:flex; gap:16px; flex-wrap:wrap; margin-left:auto}
.navlinks a{color:var(--dim)}
.navlinks a:hover{color:var(--cyan); text-decoration:none}
.lang{display:flex; gap:6px; margin-left:8px}
.lang button{
  font-family:var(--mono); font-size:12px; background:transparent; border:1px solid var(--line2);
  color:var(--dim); padding:3px 9px; border-radius:5px; cursor:pointer;
}
.lang button.on{color:#06121f; background:var(--cyan); border-color:var(--cyan); font-weight:700}

/* ---- fenêtre terminal ---- */
header.wrap{padding:72px 22px 30px}
.term{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
}
.term-head{
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  background:var(--panel2); border-bottom:1px solid var(--line);
}
.dot{width:12px; height:12px; border-radius:50%}
.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}
.term-title{margin:0 auto; font-size:12px; color:var(--faint); transform:translateX(-24px)}
.term-body{padding:30px 30px 34px; overflow-x:auto}
.js .tline{opacity:0; animation:tin .5s ease forwards}
.tline:nth-child(1){animation-delay:.1s}
.tline:nth-child(2){animation-delay:.25s}
.tline:nth-child(3){animation-delay:.55s}
.tline:nth-child(4){animation-delay:.7s}
.tline:nth-child(5){animation-delay:1s}
.tline:nth-child(6){animation-delay:1.15s}
.tline:nth-child(7){animation-delay:1.35s}
@keyframes tin{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.prompt{color:var(--green)}
.prompt .path{color:var(--cyan)}
.cmd{color:var(--txt)}
h1{font-size:clamp(34px,6vw,54px); letter-spacing:-.02em; line-height:1.1; margin:10px 0 4px; font-weight:700}
h1 .accent{color:var(--cyan)}
.role{margin:2px 0 18px; color:var(--dim); font-size:15.5px}
.role b{color:var(--txt); font-weight:600}
.socials{display:flex; gap:14px; flex-wrap:wrap; margin:16px 0 22px; font-size:14px}
.socials a{color:var(--dim)}
.socials a:hover{color:var(--cyan)}
.status{display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--dim);
  border:1px solid var(--line2); border-radius:99px; padding:6px 14px; background:rgba(61,220,151,.05)}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(61,220,151,.5); animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.cursor{display:inline-block; width:9px; height:19px; background:var(--cyan); vertical-align:-3px; margin-left:6px; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- chiffres clés ---- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:26px 0 0}
.stat{border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:18px 20px}
.stat b{display:block; font-size:26px; color:var(--cyan); letter-spacing:-.02em}
.stat span{font-size:12.5px; color:var(--dim)}
.stat i{font-style:normal; display:block; margin-top:2px; font-size:11.5px; color:var(--faint)}

/* ---- sections ---- */
section{padding:58px 0 6px}
h2{font-size:21px; font-weight:700; margin-bottom:26px; letter-spacing:-.01em}
h2 .hash{color:var(--faint); margin-right:10px}
h2 .dollar{color:var(--green); margin-right:10px}
.prose{font-family:var(--sans); font-size:16.5px; line-height:1.8; color:#c3d1e0; max-width:720px}
.prose p+p{margin-top:14px}
.prose.intro{margin-bottom:18px}
.comment{
  margin:26px 0 0; padding:18px 22px; border-left:3px solid var(--green); background:rgba(61,220,151,.05);
  border-radius:0 10px 10px 0; color:#9fd8bd; font-size:14.5px; font-style:italic;
}

/* ---- à-propos : texte + photo ---- */
.about-grid{display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:start}
.shot{border:1px solid var(--line); background:var(--panel); border-radius:10px; overflow:hidden}
.shot-head{font-size:12px; color:var(--dim); background:var(--panel2); border-bottom:1px solid var(--line); padding:8px 12px}
.shot img{width:100%; height:auto; display:block}
.shot figcaption{font-size:12px; color:var(--faint); padding:10px 12px; font-style:italic}

/* ---- puces techno ---- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip{font-size:11.5px; color:var(--dim); border:1px solid var(--line2); background:var(--panel2); border-radius:6px; padding:3px 9px}

/* ---- stack ---- */
.stackgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px}
.stackcell{border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:16px 18px}
.stackcell h3{font-size:13px; color:var(--green); margin-bottom:10px; font-weight:600}
.stackcell h3::before{content:'drwxr-xr-x  '; color:var(--faint); font-weight:400}

/* ---- icônes (Phosphor) ---- */
.icon{width:1em; height:1em; fill:currentColor; vertical-align:-.12em}
.socials .icon{width:14px; height:14px; vertical-align:-2px}
.btn .icon{width:15px; height:15px; vertical-align:-2.5px; margin-right:4px}

/* ---- musique / freelance ---- */
.music{border:1px solid var(--line); background:linear-gradient(120deg, rgba(79,195,247,.06), rgba(61,220,151,.05)); border-radius:10px; padding:22px 26px; max-width:720px}
.music .notes{display:flex; gap:16px; color:var(--cyan); margin-bottom:12px}
.music .notes .icon{width:24px; height:24px}
.music p{font-family:var(--sans); color:#c3d1e0; font-size:15px}
.music a{display:inline-block; margin-top:12px; font-size:13.5px}
.files{display:flex; flex-direction:column}
.file{
  display:flex; gap:16px; align-items:baseline; padding:12px 6px; border-bottom:1px dashed var(--line);
  font-size:14px; flex-wrap:wrap;
}
.file:hover{background:rgba(79,195,247,.04)}
.file .arrow{color:var(--faint)}
.file .desc{color:var(--dim); font-family:var(--sans); font-size:13.5px}

/* ---- contact ---- */
.contactcard{
  border:1px solid var(--line2); background:var(--panel); border-radius:12px; padding:38px 30px;
  text-align:center; margin-top:10px;
}
.contactcard p{color:var(--dim); font-family:var(--sans); max-width:520px; margin:0 auto 22px}
.btn{
  display:inline-block; font-family:var(--mono); font-weight:700; font-size:15px;
  background:var(--green); color:#06121f; padding:13px 26px; border-radius:8px;
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 30px -10px rgba(61,220,151,.5)}
.btn.ghost{background:transparent; color:var(--cyan); border:1px solid var(--line2); font-weight:400; margin-left:10px}
.btn.ghost:hover{border-color:var(--cyan); box-shadow:none}

footer{padding:46px 0 40px; text-align:center; color:var(--faint); font-size:12.5px}
footer .exit{color:var(--green)}

/* ---- apparition au défilement ---- */
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}

/* ---- responsive ---- */
@media (max-width:820px){
  .about-grid{grid-template-columns:1fr}
  .shot{max-width:420px; margin:0 auto}
}
@media (max-width:700px){
  .stats{grid-template-columns:1fr}
  header.wrap{padding-top:44px}
  .term-body{padding:22px 18px 26px}
  .navlinks{display:none}
  .btn.ghost{margin-left:0; margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .js .tline,.js .reveal{opacity:1; transform:none}
}