/* ============================================================
   LINOPS — Navy Glass Terminal
   Syne (display) + JetBrains Mono (code)
   Acid green #00ff88 · dark navy #060c1a
   ============================================================ */

:root {
  --bg:        #060c1a;
  --bg2:       #0a1228;
  --surface:   #0e1a30;
  --surface2:  #122038;
  --border:    rgba(255,255,255,.09);
  --border2:   rgba(255,255,255,.17);
  --green:     #00ff88;
  --green2:    #00cc6a;
  --green-glow: rgba(0,255,136,.2);
  --cyan:      #22d3ee;
  --cyan-glow: rgba(34,211,238,.15);
  --amber:     #fbbf24;
  --red-glitch: #ff003c;
  --blue-glitch: #00c8ff;
  --text:      #e2edf8;
  --text-dim:  #4a6080;
  --text-muted:#8aaac2;
  --display:   'Syne', sans-serif;
  --mono:      'JetBrains Mono', monospace;
  --r:         8px;
  --r-lg:      14px;
  --shadow:    0 16px 64px rgba(0,0,0,.65);
  --glow-g:    0 0 40px rgba(0,255,136,.18), 0 0 100px rgba(0,255,136,.07);
  --glow-c:    0 0 40px rgba(34,211,238,.15), 0 0 100px rgba(34,211,238,.05);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;max-width:100%;overflow-x:hidden}
body{
  background:
    radial-gradient(ellipse 70% 55% at -5% 15%,rgba(0,255,136,.07) 0%,transparent 55%),
    radial-gradient(ellipse 55% 70% at 108% 88%,rgba(34,211,238,.07) 0%,transparent 55%),
    radial-gradient(ellipse 45% 40% at 60% -5%,rgba(60,100,200,.06) 0%,transparent 50%),
    var(--bg);
  background-attachment:fixed,fixed,fixed,fixed;
  color:var(--text);font-family:var(--mono);line-height:1.6;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ── CRT scanlines (subtle) ───────────────────────────────── */
body::before{
  content:'';
  position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.025) 2px,rgba(0,0,0,.025) 4px);
  pointer-events:none;
  z-index:9998;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}

/* ── Utilities ─────────────────────────────────────────────── */
.container{max-width:1320px;margin:0 auto;padding:0 2rem}
section{padding:6rem 0}
.c-green{color:var(--green)}
.c-dim{color:var(--text-dim)}
.c-muted{color:var(--text-muted)}
.c-sep{color:var(--text-dim)}
.c-border{color:rgba(255,255,255,.25)}
.ps1{color:var(--green)}
.sep{color:var(--text-dim)}
.cursor-blink{animation:blink 1s step-end infinite;color:var(--green)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── Section headers ──────────────────────────────────────── */
.section-hd{margin-bottom:3rem}
.section-cmd{display:block;font-size:.72rem;color:var(--green);opacity:.8;margin-bottom:.7rem;letter-spacing:.02em}
.section-hd h2{font-family:var(--display);font-size:clamp(3.2rem,7vw,5.2rem);font-weight:800;letter-spacing:-.01em;line-height:1.1;color:var(--text);margin-top:.2rem}
.section-hd.centered{text-align:center}
.section-sub{color:var(--text-muted);margin-top:.6rem;font-size:.9rem}

/* ============================================================
   NAV — glass
   ============================================================ */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(6,12,26,.78);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:border-color .3s;
}
.nav-inner{
  max-width:1100px;margin:0 auto;
  padding:.7rem 1.5rem;
  display:flex;align-items:center;gap:1.5rem;
}
.nav-brand{display:flex;align-items:center;gap:.35rem;font-size:.82rem;flex-shrink:0}
.nav-session{
  background:var(--green);color:var(--bg);
  font-size:.62rem;font-weight:700;
  padding:.1rem .35rem;border-radius:4px;
}
.nav-host{color:var(--green);font-weight:500;transition:opacity .2s}
.nav-host:hover{opacity:.7}
.nav-sep{color:var(--text-dim)}
.nav-links{display:flex;align-items:center;gap:1.75rem;margin-left:auto}
.nav-links a{font-size:.8rem;color:var(--text-muted);transition:color .2s}
.nav-links a:hover{color:var(--green)}
.nav-cta{
  border:1px solid var(--border2);
  padding:.28rem .9rem;border-radius:var(--r);
  transition:border-color .2s,color .2s;
}
.nav-cta:hover{border-color:var(--green)!important;color:var(--green)!important}
.nav-right{display:flex;align-items:center;gap:1rem;flex-shrink:0}

/* Available badge */
.badge-available{
  display:flex;align-items:center;gap:.4rem;
  font-size:.67rem;color:var(--green);
  border:1px solid rgba(0,255,136,.25);
  background:rgba(0,255,136,.07);
  padding:.2rem .8rem;border-radius:100px;
  letter-spacing:.05em;
}
.badge-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,.6)}
  50%{box-shadow:0 0 0 5px rgba(0,255,136,0)}
}

/* Mission badge (amber) */
.badge-mission{
  display:flex;align-items:center;gap:.4rem;
  font-size:.67rem;color:var(--amber);
  border:1px solid rgba(251,191,36,.25);
  background:rgba(251,191,36,.07);
  padding:.2rem .8rem;border-radius:100px;
  letter-spacing:.05em;
}
.badge-dot-amber{
  width:6px;height:6px;border-radius:50%;background:var(--amber);
  animation:pulse-dot-amber 2s infinite;
}
@keyframes pulse-dot-amber{
  0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.6)}
  50%{box-shadow:0 0 0 5px rgba(251,191,36,0)}
}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:20px;height:2px;background:var(--text-muted);border-radius:1px;transition:transform .25s,opacity .25s}

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  overflow:hidden;contain:paint;padding:6rem 0 4rem;
}

/* Gradient color blobs over the terminal bg */
#hero::before{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 65% 55% at 0% 55%,rgba(0,255,136,.1) 0%,transparent 50%),
    radial-gradient(ellipse 50% 60% at 100% 10%,rgba(34,211,238,.08) 0%,transparent 50%);
  pointer-events:none;
}

/* Background scrolling terminal — right half only, hidden on left (hero text) */
#bg-terminal{
  position:absolute;
  top:0;bottom:0;
  left:48%;right:0;
  z-index:0;
  overflow:hidden;pointer-events:none;
  opacity:.55;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.6) 20%,rgba(0,0,0,.75) 60%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.7) 20%,rgba(0,0,0,.85) 55%);
  mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.6) 20%,rgba(0,0,0,.75) 60%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.7) 20%,rgba(0,0,0,.85) 55%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
#bg-scroll{
  height:100%;overflow-y:scroll;
  scrollbar-width:none;overscroll-behavior:contain;pointer-events:none;
}
#bg-scroll::-webkit-scrollbar{display:none}
#bg-terminal-inner{
  padding:1.5rem 2rem;font-size:.68rem;line-height:1.75;
}
.bg-line{white-space:pre;overflow:hidden;opacity:0;transition:opacity .4s}
.bg-line.show{opacity:1}
.bg-cmd{color:rgba(0,255,136,.42)}
.bg-out{color:rgba(192,204,224,.15)}
.bg-dim{color:rgba(60,78,104,.14)}
.bg-gap{height:.55rem}

/* Hero grid */
.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;align-items:center;width:100%;
}

/* Left */
.hero-brand{display:flex;flex-direction:column;align-items:flex-start}
.hero-eyebrow{font-size:.78rem;color:var(--text-dim);margin-bottom:1.1rem;display:flex;align-items:center;gap:.3rem}

/* ── CRT scramble effect ──────────────────────────────────── */
.hero-title{
  font-family:var(--display);
  font-size:clamp(4rem,9vw,8.5rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--green);
  position:relative;
  cursor:default;user-select:none;
  margin-bottom:.65rem;
  text-shadow:0 0 22px rgba(0,255,136,.5),0 0 70px rgba(0,255,136,.18);
  animation:crt-scramble 5.5s steps(1) infinite;
}

/* Scramble ~0.5s, puis 5s de calme — steps à ~55ms */
@keyframes crt-scramble{
  0%,9%,100%{transform:none;filter:none}
  1%{transform:translateX(-7px);           filter:brightness(1.55) saturate(1.3)}
  2%{transform:translateX(5px) skewX(-1.4deg); filter:brightness(1.2)}
  3%{transform:translateX(-9px);           filter:brightness(1.75) contrast(1.15)}
  4%{transform:translateX(4px) skewX(.9deg);  filter:brightness(.65) contrast(1.5)}
  5%{transform:translateX(-3px);           filter:brightness(1.4)}
  6%{transform:translateX(8px);            filter:brightness(1.65) saturate(.65)}
  7%{transform:translateX(-2px);           filter:brightness(.82)}
  8%{transform:translateX(5px);            filter:brightness(1.3)}
}

/* Red channel ghost */
.hero-title::before{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;
  color:rgba(255,25,55,.65);
  pointer-events:none;
  animation:crt-red 5.5s steps(1) infinite;
}
@keyframes crt-red{
  0%,9%,100%{clip-path:inset(0 0 100% 0)}
  1%{clip-path:inset(0%  0 75% 0);transform:translateX(9px)}
  2%{clip-path:inset(25% 0 50% 0);transform:translateX(-5px)}
  3%{clip-path:inset(50% 0 25% 0);transform:translateX(11px)}
  4%{clip-path:inset(75% 0 0%  0);transform:translateX(7px)}
  5%{clip-path:inset(5%  0 80% 0);transform:translateX(-7px)}
  6%{clip-path:inset(30% 0 45% 0);transform:translateX(10px)}
  7%{clip-path:inset(60% 0 15% 0);transform:translateX(8px)}
  8%{clip-path:inset(15% 0 65% 0);transform:translateX(-6px)}
}

/* Blue channel ghost — décalé de 60ms */
.hero-title::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;
  color:rgba(0,195,255,.55);
  pointer-events:none;
  animation:crt-blue 5.5s steps(1) infinite 0.06s;
}
@keyframes crt-blue{
  0%,9%,100%{clip-path:inset(0 0 100% 0)}
  1%{clip-path:inset(10% 0 60% 0);transform:translateX(-8px)}
  2%{clip-path:inset(35% 0 40% 0);transform:translateX(4px)}
  3%{clip-path:inset(60% 0 20% 0);transform:translateX(-10px)}
  4%{clip-path:inset(80% 0 0%  0);transform:translateX(-6px)}
  5%{clip-path:inset(0%  0 70% 0);transform:translateX(6px)}
  6%{clip-path:inset(25% 0 50% 0);transform:translateX(-9px)}
  7%{clip-path:inset(55% 0 20% 0);transform:translateX(-7px)}
  8%{clip-path:inset(20% 0 55% 0);transform:translateX(5px)}
}

.hero-rule{color:rgba(255,255,255,.2);font-size:.78rem;margin-bottom:.85rem;overflow:hidden;white-space:nowrap}
.hero-sub{
  font-size:.95rem;color:var(--text-muted);
  margin-bottom:.85rem;
  display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;
}
.hero-sub span:not(.sep){color:var(--text)}
.hero-desc{font-size:.88rem;color:var(--text-muted);line-height:1.85;margin-bottom:2rem}
.hero-desc strong{color:var(--text);font-weight:500}
.hero-cta{display:flex;gap:1rem;margin-bottom:1.75rem;flex-wrap:wrap}
.hero-meta{
  display:flex;align-items:center;gap:.75rem;
  font-size:.72rem;color:var(--text-dim);
  font-style:italic;
}

.hero-terminal-wrap{}

/* ============================================================
   TERMINAL WINDOW — GTK4 / Adwaita dark style
   ============================================================ */
.terminal-window{
  background:rgba(6,14,28,.95);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 24px 80px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.1),
    var(--glow-g);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
/* ── GTK4 headerbar ─────────────────────────────────────────── */
.terminal-bar{
  background:linear-gradient(to bottom,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%),#162038;
  padding:.4rem 1rem;
  min-height:44px;
  display:flex;align-items:center;gap:.6rem;
  border-bottom:1px solid rgba(0,0,0,.35);
  position:relative;
}
/* Left: small app-icon badge */
.term-icon{
  font-family:var(--mono);font-size:.58rem;font-weight:700;
  color:var(--green);background:rgba(0,255,136,.14);
  padding:.12rem .32rem;border-radius:4px;flex-shrink:0;
  border:1px solid rgba(0,255,136,.2);
}
/* Title centered — GTK4 style */
.terminal-title{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:.72rem;font-weight:600;
  color:rgba(255,255,255,.6);
  letter-spacing:.01em;pointer-events:none;white-space:nowrap;
}
/* GTK4 circular window controls — right side */
.term-controls{
  margin-left:auto;
  display:flex;gap:.35rem;align-items:center;
}
.term-controls span{
  width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.58rem;line-height:1;
  color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.06);
  cursor:default;user-select:none;
  transition:background .15s,color .15s,border-color .15s;
}
.term-controls span:hover{
  background:rgba(255,255,255,.16);
  color:rgba(255,255,255,.85);
  border-color:rgba(255,255,255,.12);
}
/* Close button (×) — rouge Adwaita au hover */
.term-controls span:last-child:hover{
  background:rgba(192,28,40,.8);
  color:#fff;
  border-color:rgba(192,28,40,.4);
}
.terminal-body{padding:1.25rem 1.4rem;font-size:.83rem;line-height:1.9}
.term-line{display:flex;align-items:baseline;gap:.3rem}
.typed{color:var(--cyan)}
.term-output{padding-left:.7rem;margin:.12rem 0 .6rem}
.t-dim{color:var(--text-dim)}
.t-name{
  color:var(--green);
  font-family:var(--display);font-size:1.55rem;font-weight:700;
  letter-spacing:.01em;line-height:1.15;
}
.t-ok{color:var(--green)}
.t-amber{color:var(--amber)}
.term-cta-row{display:flex;gap:.75rem;margin-top:1.2rem;flex-wrap:wrap}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary{
  display:inline-flex;align-items:center;gap:.45rem;
  background:linear-gradient(135deg,var(--green) 0%,var(--green2) 100%);
  color:#050a12;
  font-family:var(--mono);font-size:.8rem;font-weight:700;
  padding:.55rem 1.3rem;border-radius:var(--r);
  border:none;cursor:pointer;
  transition:opacity .2s,transform .15s,box-shadow .2s;
  letter-spacing:.01em;
  box-shadow:0 4px 24px rgba(0,255,136,.25);
}
.btn-primary:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 8px 36px rgba(0,255,136,.38)}
.btn-full{width:100%;justify-content:center}
.btn-ghost{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:.8rem;
  color:var(--text-muted);
  border:1px solid var(--border2);
  padding:.55rem 1.3rem;border-radius:var(--r);
  transition:border-color .2s,color .2s,background .2s;
}
.btn-ghost:hover{border-color:rgba(0,255,136,.4);color:var(--green);background:rgba(0,255,136,.05)}

/* Scroll hint */
.scroll-hint{
  position:absolute;bottom:2rem;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:var(--text-dim);font-size:.62rem;
  animation:fadeup 2s 3.5s both;
}
.scroll-line{
  width:1px;height:26px;
  background:linear-gradient(to bottom,var(--text-dim),transparent);
  animation:spulse 1.5s ease-in-out infinite;
}
@keyframes spulse{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.25)}}
@keyframes fadeup{
  from{opacity:0;transform:translateX(-50%) translateY(8px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* ============================================================
   SERVICES
   ============================================================ */
#services{
  background:rgba(255,255,255,.018);
  position:relative;
}
/* Subtle gradient blob */
#services::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 85% 40%,rgba(34,211,238,.04) 0%,transparent 60%);
  pointer-events:none;
}
#services .container{position:relative;z-index:1}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

/* Cards */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:2rem 1.75rem 1.75rem;
  transition:border-color .3s,transform .2s,box-shadow .3s,background .3s;
}
.card::before{
  content:'['attr(data-num)']';
  position:absolute;top:-.6rem;left:1.2rem;
  background:var(--surface);padding:0 .45rem;
  font-size:.7rem;color:var(--green);letter-spacing:.04em;
}
.card:hover{
  border-color:rgba(0,255,136,.25);
  transform:translateY(-4px);
  box-shadow:var(--glow-g);
  background:var(--surface2);
}
.card-featured{
  border-color:rgba(34,211,238,.2);
  box-shadow:var(--glow-c);
  background:rgba(34,211,238,.025);
}
.card-featured::before{color:var(--cyan)}
.card-featured:hover{border-color:rgba(34,211,238,.4)}

.card-ico{width:36px;height:36px;margin-bottom:1.25rem}
.card:not(.card-featured) .card-ico{color:var(--green)}
.card-featured .card-ico{color:var(--cyan)}
.card-ico svg{width:100%;height:100%}
.card h3{font-family:var(--display);font-size:1.1rem;font-weight:700;margin-bottom:.6rem;color:var(--text)}
.card p{font-size:.8rem;color:var(--text-muted);margin-bottom:1.2rem;line-height:1.8}
.card-list{display:flex;flex-direction:column;gap:.32rem}
.card-list li{font-size:.76rem;color:var(--text-muted);padding-left:1.1rem;position:relative}
.card-list li::before{content:'→';position:absolute;left:0;color:var(--green)}
.card-featured .card-list li::before{color:var(--cyan)}

/* ============================================================
   STACK
   ============================================================ */
#stack{background:var(--bg)}

.stack-block{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.75rem 2rem;
  display:flex;flex-direction:column;gap:.1rem;
}
.stack-prompt{font-size:.78rem;color:var(--text-dim);margin-bottom:.7rem}
.stack-sep{color:rgba(255,255,255,.1);font-size:.75rem;margin-bottom:.5rem;white-space:nowrap;overflow:hidden}
.env-row{display:flex;align-items:baseline;flex-wrap:wrap;font-size:.8rem;line-height:2.1}
.env-k{color:var(--cyan);flex-shrink:0}
.env-eq{color:var(--text-dim);flex-shrink:0;padding:0 .05rem}
.env-v{color:var(--text-muted)}

/* ============================================================
   ABOUT
   ============================================================ */
#about{background:rgba(255,255,255,.018)}

.about-grid{display:grid;grid-template-columns:auto 1fr;gap:4rem;align-items:start}

/* About text */
.about-text p{font-size:.86rem;color:var(--text-muted);margin-bottom:.9rem;line-height:1.85}
.about-text strong{color:var(--text);font-weight:500}
.about-values{display:flex;flex-direction:column;gap:.8rem;margin-top:1.5rem}
.aval{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:.9rem 1.1rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  transition:border-color .2s,background .2s;
}
.aval:hover{border-color:rgba(0,255,136,.25);background:var(--surface2)}
.aval-arr{color:var(--green);flex-shrink:0;margin-top:.08rem}
.aval strong{display:block;font-size:.84rem;color:var(--text);margin-bottom:.1rem}
.aval p{font-size:.77rem;color:var(--text-dim);margin:0}

/* ── Certification badges ─────────────────────────────────── */
.certif-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.certif-badge{
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:.22rem .7rem;border-radius:var(--r);
  border:1px solid currentColor;
}
.certif-green{color:var(--green);background:rgba(0,255,136,.1);border-color:rgba(0,255,136,.35)}
.certif-red{color:#ff6b6b;background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.35)}
.certif-dim{color:var(--text-muted);background:rgba(255,255,255,.05);border-color:var(--border)}

/* ============================================================
   SKILL VARIANTS — skv
   ============================================================ */
.skv-section{margin-top:4rem;padding-top:3.5rem;border-top:1px solid var(--border)}
.skv-section-hd{margin-bottom:2rem}
.skv-section-hd h3{
  font-family:var(--display);font-size:clamp(3rem,5.5vw,4.4rem);
  font-weight:700;letter-spacing:0em;color:var(--text);margin-top:.2rem;
}

/* ── htop panel (kept for potential reuse) ────────────────── */
.htop-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  font-size:.72rem;
  min-width:340px;overflow:hidden;
  box-shadow:var(--shadow);
}
.htop-titlebar{
  background:var(--green);color:var(--bg);
  padding:.3rem 1rem;
  font-weight:700;font-size:.68rem;letter-spacing:.05em;
}
.htop-skills{padding:.7rem 1rem .4rem;display:flex;flex-direction:column;gap:.5rem}
.hs{display:flex;align-items:center;gap:.6rem}
.hs-lbl{width:116px;font-size:.62rem;color:var(--text-muted);flex-shrink:0;letter-spacing:.02em}
.hs-bar{flex:1;height:7px;background:rgba(255,255,255,.06);border-radius:1px;overflow:hidden}
.hs-fill{height:100%;border-radius:1px;transition:width .6s ease}
.hs-g{background:var(--green)}
.hs-c{background:var(--cyan)}
.hs-a{background:var(--amber)}
.hs-lvl{width:44px;text-align:right;font-size:.6rem;color:var(--text-dim);flex-shrink:0}
.htop-divider{padding:0 1rem;color:rgba(255,255,255,.1);overflow:hidden;white-space:nowrap;margin:.2rem 0}
.htop-table{padding:.3rem 0}
.htop-th{
  display:grid;grid-template-columns:1fr 60px 50px 58px;gap:.25rem;
  padding:.25rem 1rem;
  background:var(--green);color:var(--bg);
  font-weight:700;font-size:.63rem;letter-spacing:.04em;
}
.htop-tr{
  display:grid;grid-template-columns:1fr 60px 50px 58px;gap:.25rem;
  padding:.22rem 1rem;color:var(--text-muted);
  transition:background .1s;font-size:.7rem;
}
.htop-tr:hover{background:rgba(255,255,255,.03)}
.htop-tr-active{background:rgba(0,255,136,.07);color:var(--text)}
.htop-footer{
  border-top:1px solid var(--border);
  padding:.3rem 1rem;
  font-size:.62rem;color:var(--text-dim);letter-spacing:.03em;
  background:rgba(0,0,0,.3);
}

/* ── Variant B: tree ──────────────────────────────────────── */
.tree-panel{
  background:rgba(6,14,28,.92);
  border-radius:14px;overflow:hidden;
  box-shadow:0 16px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.09);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.tree-prompt{
  padding:.38rem 1.1rem;font-size:.7rem;color:var(--text-muted);
  border-bottom:1px solid rgba(0,0,0,.3);
  background:rgba(0,0,0,.18);
}
.tree-body{padding:.9rem 1.4rem 1.1rem;font-family:var(--mono);font-size:.75rem}
.tree-root{color:var(--text);margin-bottom:.15rem}
.tree-line{
  display:flex;align-items:baseline;gap:0;
  line-height:2.1;white-space:nowrap;
}
.tree-branch{color:rgba(255,255,255,.2);flex-shrink:0}
.tree-cat{font-weight:700;letter-spacing:.04em;margin-left:.4em}
.tree-expert{color:var(--green)}
.tree-avanc{color:var(--cyan)}
.tree-solide{color:var(--amber)}
.tree-skill{color:var(--text);margin-left:.4em}
.tree-cert{color:var(--green);font-size:.78em}
.tree-dots{color:rgba(255,255,255,.2)}
.tree-years{color:var(--text-dim)}
.tree-summary{
  margin-top:.9rem;font-size:.65rem;color:var(--text-dim);
  border-top:1px solid var(--border);padding-top:.65rem;
}

/* ── Variant C: unicode blocks ───────────────────────────── */
.blocks-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);padding:1rem 1.2rem;
  font-family:var(--mono);font-size:.72rem;
}
.bp-comment{color:var(--text-dim)}
.bp-sep{margin-bottom:.75rem}
.bp-tools{margin-top:.75rem}
.bp-row{display:flex;align-items:center;line-height:2.1;white-space:nowrap}
.bp-lbl{color:var(--text-muted);min-width:15ch;flex-shrink:0}
.bp-bar-g{color:var(--green)}
.bp-bar-c{color:var(--cyan)}
.bp-bar-a{color:var(--amber)}
.bp-empty{color:rgba(255,255,255,.1)}
.bp-pct{color:var(--text);font-weight:700;min-width:4ch;text-align:right;margin:0 .5rem;flex-shrink:0}
.bp-note{color:var(--text-dim);font-size:.65rem}

/* ── Variant D: yaml ─────────────────────────────────────── */
.yaml-panel{
  background:rgba(6,14,28,.92);
  border-radius:14px;overflow:hidden;
  box-shadow:0 16px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.09);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.yaml-prompt{
  padding:.38rem 1.1rem;font-size:.7rem;color:var(--text-muted);
  border-bottom:1px solid rgba(0,0,0,.3);
  background:rgba(0,0,0,.18);
}
.yaml-body{
  padding:.9rem 1.1rem;font-family:var(--mono);font-size:.72rem;
  overflow-x:auto;
}
.y-line{line-height:1.95;white-space:pre}
.y-comment{color:var(--text-dim)}
.y-key{color:var(--green);font-weight:700}
.y-key2{color:var(--cyan)}
.y-prop{color:var(--text-muted)}
.y-colon{color:var(--text-dim)}
.y-val-g{color:var(--green)}
.y-val-c{color:var(--cyan)}
.y-str{color:var(--amber)}
.y-arr{color:var(--text)}

/* ── Variant E: modern cards ─────────────────────────────── */
.mod-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1rem;
}
.mc{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.mc:hover{transform:translateY(-4px)}
.mc-g:hover{border-color:rgba(0,255,136,.3);box-shadow:var(--glow-g)}
.mc-c:hover{border-color:rgba(34,211,238,.3);box-shadow:var(--glow-c)}
.mc-a:hover{border-color:rgba(251,191,36,.3)}
.mc-accent{height:3px}
.mc-g .mc-accent{background:linear-gradient(90deg,var(--green),var(--green2))}
.mc-c .mc-accent{background:var(--cyan)}
.mc-a .mc-accent{background:var(--amber)}
.mc-body{padding:1rem}
.mc-name{font-family:var(--mono);font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:.5rem;letter-spacing:-.01em}
.mc-badge{
  display:inline-block;font-size:.58rem;font-family:var(--mono);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.15rem .5rem;border-radius:4px;margin-bottom:.55rem;
}
.mc-badge-g{background:rgba(0,255,136,.12);color:var(--green);border:1px solid rgba(0,255,136,.25)}
.mc-badge-c{background:rgba(34,211,238,.1);color:var(--cyan);border:1px solid rgba(34,211,238,.22)}
.mc-badge-a{background:rgba(251,191,36,.1);color:var(--amber);border:1px solid rgba(251,191,36,.22)}
.mc-meta{display:flex;align-items:center;margin-bottom:.55rem;font-size:.68rem;font-family:var(--mono)}
.mc-years{color:var(--text-muted)}
.mc-dot{color:rgba(255,255,255,.2)}
.mc-status{color:var(--green)}
.mc-status-a{color:var(--amber)}
.mc-tools{font-size:.62rem;color:var(--text-dim);line-height:1.7;font-family:var(--mono)}

/* ============================================================
   CONTACT
   ============================================================ */
#contact{background:var(--bg)}

.contact-grid{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:start}
.contact-form-wrap{flex:1}
.contact-form{display:flex;flex-direction:column;gap:.9rem}

.fg{display:flex;flex-direction:column;gap:.3rem}
.fg label{font-size:.72rem;color:var(--text-muted)}

.iw{
  display:flex;align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.iw:focus-within{border-color:rgba(0,255,136,.45);box-shadow:0 0 0 3px rgba(0,255,136,.09)}
.iprompt{
  padding:.6rem .7rem;color:var(--green);font-size:.8rem;
  flex-shrink:0;border-right:1px solid var(--border);user-select:none;
}
.iw input,.iw textarea{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:var(--mono);font-size:.8rem;
  padding:.6rem .85rem;resize:none;
}
.iw input::placeholder,.iw textarea::placeholder{color:var(--text-dim)}
.iw-ta{align-items:flex-start}
.iw-ta .iprompt{padding-top:.65rem}

/* Honeypot */
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;overflow:hidden;pointer-events:none}

/* Success */
.form-success{
  padding:2.5rem 2rem;
  background:var(--surface);
  border:1px solid rgba(0,255,136,.18);
  border-radius:var(--r-lg);text-align:center;
}
.fs-inner{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.fs-icon{
  width:52px;height:52px;border-radius:50%;
  border:2px solid rgba(0,255,136,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:var(--green);
}
.form-success p{color:var(--text-muted);font-size:.86rem}
.fs-sub{font-size:.68rem;color:var(--text-dim)}

/* Sidebar */
.contact-side{min-width:210px;display:flex;flex-direction:column;gap:.9rem}
.cs-title{font-size:.72rem;color:var(--green);opacity:.7;margin-bottom:.1rem}

.clink{
  display:flex;align-items:center;gap:.8rem;
  padding:.9rem 1rem;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);
  transition:border-color .2s,transform .15s,background .2s;cursor:pointer;
}
.clink:hover{border-color:rgba(0,255,136,.3);background:var(--surface2);transform:translateX(4px)}
.clink-ico{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,255,136,.09);color:var(--green);
  font-size:.74rem;font-weight:700;border-radius:var(--r);flex-shrink:0;
}
.clink div{flex:1}
.clink strong{display:block;font-size:.82rem;color:var(--text);margin-bottom:.1rem}
.clink span{font-size:.7rem;color:var(--text-dim)}
.clink-arr{color:rgba(255,255,255,.2);font-size:.8rem;transition:color .2s;flex-shrink:0}
.clink:hover .clink-arr{color:var(--green)}

.cs-note{
  padding:.9rem 1rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  font-size:.72rem;color:var(--text-dim);line-height:1.7;
}
.cs-note-out{color:var(--text-muted);display:block;padding-left:.4rem;margin-top:.25rem}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  border-top:1px solid var(--border);
  padding:1.4rem 0;
  background:rgba(0,0,0,.35);
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.72rem;
}
.footer-logo{font-weight:700;color:var(--green);font-size:.88rem}
.footer-copy{color:var(--text-dim)}
.footer-up{color:var(--text-dim)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:2.5rem}
  .hero-brand{align-items:center;text-align:center}
  .hero-rule{display:none}
  .hero-sub,.hero-cta,.hero-meta{justify-content:center}
  .hero-desc{text-align:center}
  .hero-meta{flex-wrap:wrap}
  .htop-panel{min-width:unset;width:100%}
  /* Terminal bg: restore full width on single-column layout */
  #bg-terminal{left:0;opacity:.35;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 30%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 30%)}
}
@media(max-width:900px){
  .services-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-side{flex-direction:row;flex-wrap:wrap}
  .clink{flex:1}
}
@media(max-width:768px){
  body{background-attachment:scroll}
}
@media(max-width:640px){
  /* Réduction du padding global : +32px de contenu utile */
  .container{padding:0 1rem}
  section{padding:4rem 0}

  /* Nav : plus compact, badge mission caché */
  .nav-inner{padding:.6rem 1rem;gap:.75rem}
  .badge-available{display:none}
  .badge-mission{display:none}
  .nav-links{
    display:none;flex-direction:column;
    position:fixed;inset:54px 0 0;
    background:rgba(6,12,26,.96);
    backdrop-filter:blur(20px);
    padding:2rem 1.5rem;gap:1.5rem;z-index:999;
  }
  .nav-links.open{display:flex}
  .hamburger{display:flex}

  /* Hero */
  #hero{padding:5rem 0 3rem}
  .hero-title{font-size:clamp(2rem,13vw,5rem)}

  /* Terminal : padding réduit + nom plus petit + boutons centrés */
  .terminal-body{padding:.85rem .9rem;font-size:.78rem}
  .t-name{font-size:1.15rem}
  .term-cta-row{justify-content:center}
  .hero-desc br{display:none}

  /* Titres de sections */
  .section-hd h2{font-size:clamp(1.7rem,8vw,2.8rem)}
  .skv-section-hd h3{font-size:clamp(1.5rem,8vw,2.6rem)}

  /* Stack */
  .stack-sep{display:none}
  .stack-block{overflow-x:auto}
  .env-v{word-break:break-word;min-width:0}

  /* Tree : scrollable horizontalement si trop étroit */
  .tree-body{overflow-x:auto}

  /* Contact */
  .contact-side{flex-direction:column}

  /* Footer */
  .footer-inner{flex-direction:column;align-items:flex-start}
  .footer-copy{word-break:break-word}

  /* Éléments htop (inutilisés mais présents en CSS) */
  #bg-terminal-inner{font-size:.6rem}
  .htop-th,.htop-tr{grid-template-columns:1fr 56px 44px}
  .htop-th span:last-child,.htop-tr span:last-child{display:none}
  .hs-lbl{width:88px;font-size:.6rem}
}