/* =========================================================
   PROD.ALEX — CV interactif
   Direction artistique : outil de bidouilleur, écran dot-matrix,
   orange ambre sur noir, CRT discret.
   ========================================================= */

:root{
  --acc:        #ff8200;
  --acc-soft:   #ffa23d;
  --acc-deep:   #c05e00;
  --acc-glow:   255 130 0;

  --bg:         #080808;
  --bg-2:       #0d0d0e;
  --panel:      #121213;
  --panel-2:    #17171a;
  --line:       #252528;
  --line-2:     #35353a;

  --ink:        #eceae6;
  --ink-2:      #a8a49d;
  --ink-3:      #6d6a65;

  --ok:         #4ade80;
  --screen-bg:  #ff8200;
  --screen-ink: #0b0b0b;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --px:   "Press Start 2P", var(--mono);

  --r: 4px;
  --maxw: 1180px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* alternate palettes (commande `theme` du terminal) */
body[data-theme="green"]{ --acc:#39ff6a; --acc-soft:#86ffa6; --acc-deep:#1f9e40; --acc-glow:57 255 106; --screen-bg:#39ff6a; }
body[data-theme="cyan"] { --acc:#27e0ff; --acc-soft:#8af0ff; --acc-deep:#0d8aa5; --acc-glow:39 224 255; --screen-bg:#27e0ff; }
body[data-theme="red"]  { --acc:#ff3b3b; --acc-soft:#ff8585; --acc-deep:#a81d1d; --acc-glow:255 59 59;  --screen-bg:#ff3b3b; }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:86px; }

body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgb(var(--acc-glow) / .10), transparent 62%),
    radial-gradient(800px 500px at 0% 100%, rgb(var(--acc-glow) / .05), transparent 60%),
    var(--bg);
  color:var(--ink);
  font:400 15px/1.65 var(--mono);
  -webkit-font-smoothing:antialiased;
  /* `clip` plutôt que `hidden` : `hidden` laisse la page scrollable à l'horizontale
     dès qu'un élément déborde (cf. la barre « Beau gosse »). */
  overflow-x:hidden;
  overflow-x:clip;
}

img,canvas{ max-width:100%; display:block; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; }
b,strong{ color:var(--ink); font-weight:700; }
kbd{
  font:600 12px var(--mono); background:var(--panel-2); color:var(--acc);
  border:1px solid var(--line-2); border-bottom-width:2px; border-radius:3px; padding:1px 6px;
}
.muted{ color:var(--ink-2); }
.sep{ color:var(--ink-3); }

::selection{ background:var(--acc); color:#000; }

:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--acc); color:#000; padding:10px 16px; font-weight:700;
}
.skip:focus{ left:8px; top:8px; }

/* ───── scrollbar ───── */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#0b0b0b; }
::-webkit-scrollbar-thumb{ background:#2a2a2d; border:2px solid #0b0b0b; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--acc-deep); }

/* =========================================================
   BOOT
   ========================================================= */
.boot{
  position:fixed; inset:0; z-index:300;
  background:#050505;
  display:grid; place-items:center;
  transition:opacity .45s var(--ease), visibility .45s;
}
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__inner{ width:min(660px, 90vw); }
.boot__logo{
  margin:0 0 20px; color:var(--acc); font:700 12px/1.45 var(--mono);
  text-shadow:0 0 14px rgb(var(--acc-glow) / .5);
  white-space:pre; overflow-x:auto;
}
.boot__log{
  margin:0 0 18px; min-height:190px; font:400 12.5px/1.75 var(--mono);
  color:var(--ink-2); white-space:pre-wrap;
}
.boot__log b{ color:var(--ok); font-weight:500; }
.boot__log i{ color:var(--acc); font-style:normal; }
.boot__bar{ height:3px; background:#1b1b1b; overflow:hidden; }
.boot__bar i{ display:block; height:100%; width:0; background:var(--acc); box-shadow:0 0 12px var(--acc); }
.boot__skip{
  margin-top:16px; background:none; border:0; color:var(--ink-3);
  font:400 11px var(--mono); cursor:pointer; letter-spacing:.08em;
}
.boot__skip:hover{ color:var(--acc); }

/* =========================================================
   FX overlays
   ========================================================= */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:90; }
.fx--scan{
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.65;
}
.fx--vig{ box-shadow:inset 0 0 220px 40px rgba(0,0,0,.85); }

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:18px;
  padding:12px clamp(14px, 4vw, 34px);
  background:rgba(8,8,8,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__logo{
  display:flex; align-items:center; gap:10px;
  font:700 15px var(--mono); color:var(--ink); letter-spacing:.05em; text-decoration:none;
}
.hdr__logo:hover{ text-decoration:none; }
.hdr__logo em{ color:var(--acc); font-style:normal; }
.hdr__chip{
  width:14px; height:14px; border:2px solid var(--acc); border-radius:2px;
  box-shadow:0 0 10px rgb(var(--acc-glow) / .55);
  animation:pulse 2.6s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.hdr__nav{ display:flex; gap:4px; margin-left:auto; }
.hdr__nav a{
  padding:7px 12px; color:var(--ink-2); font-size:13px; letter-spacing:.04em;
  border:1px solid transparent; border-radius:var(--r); text-decoration:none;
  transition:.18s var(--ease);
}
.hdr__nav a::before{ content:"/"; color:var(--ink-3); margin-right:3px; }
.hdr__nav a:hover,.hdr__nav a.is-on{
  color:var(--acc); border-color:var(--line-2); background:var(--panel);
  text-decoration:none;
}
.hdr__nav a.is-on::before{ color:var(--acc); }

.hdr__status{ display:flex; align-items:center; gap:12px; }
.hdr__clock{ font-size:12px; color:var(--ink-3); letter-spacing:.06em; }

.led{
  width:8px; height:8px; border-radius:50%; display:inline-block;
  background:var(--ok); box-shadow:0 0 8px var(--ok);
  animation:blink 2.2s infinite;
}
@keyframes blink{ 0%,92%{opacity:1} 96%{opacity:.2} 100%{opacity:1} }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--panel); color:var(--ink);
  font:500 13px var(--mono); letter-spacing:.04em; cursor:pointer;
  text-decoration:none; transition:.18s var(--ease);
}
.btn:hover{
  border-color:var(--acc); color:var(--acc); text-decoration:none;
  box-shadow:0 0 0 1px rgb(var(--acc-glow) / .25), 0 6px 22px -10px rgb(var(--acc-glow) / .8);
  transform:translateY(-1px);
}
.btn--solid{ background:var(--acc); border-color:var(--acc); color:#0a0a0a; font-weight:700; }
.btn--solid:hover{ background:var(--acc-soft); border-color:var(--acc-soft); color:#0a0a0a; }
.btn--ghost{ background:transparent; }
.btn--sm{ padding:7px 11px; font-size:12px; }
.btn--wide{ width:100%; justify-content:center; margin-top:14px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  max-width:var(--maxw); margin:0 auto;
  padding:140px clamp(14px,4vw,34px) 70px;
  display:grid; grid-template-columns:1.25fr .9fr; gap:52px; align-items:center;
}
.hero__grid{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(70% 70% at 50% 40%, #000 25%, transparent 100%);
}

.tag{
  margin:0 0 14px; color:var(--acc); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.hero__name{
  margin:0; font:800 clamp(38px, 7.2vw, 78px)/0.96 var(--mono);
  letter-spacing:-.03em; text-transform:uppercase;
}
.hero__name span{ display:block; }
.hero__last{ color:var(--acc); text-shadow:0 0 36px rgb(var(--acc-glow) / .35); }

.hero__role{
  margin:18px 0 0; font-size:16px; color:var(--ink);
  border-left:2px solid var(--acc); padding-left:12px;
}
.caret{
  display:inline-block; width:9px; height:1.05em; background:var(--acc);
  vertical-align:-2px; margin-left:4px; animation:cb 1s steps(1) infinite;
}
.caret--s{ width:8px; height:.95em; }
@keyframes cb{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.hero__pitch{ margin:20px 0 0; max-width:54ch; color:var(--ink-2); font-size:14.5px; }
.hero__pitch b{ color:var(--acc-soft); font-weight:500; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }

.hero__kpi{
  list-style:none; display:flex; flex-wrap:wrap; gap:34px;
  margin:38px 0 0; padding:20px 0 0; border-top:1px solid var(--line);
}
.hero__kpi b{ display:block; font:800 28px var(--mono); color:var(--acc); line-height:1; }
.hero__kpi span{ font-size:11px; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase; }

/* glitch */
.glitch{ position:relative; }
.glitch::before,.glitch::after{
  content:attr(data-txt); position:absolute; inset:0;
  clip-path:inset(0 0 0 0); opacity:0; pointer-events:none;
}
.glitch::before{ color:#00e5ff; }
.glitch::after{ color:#ff2d55; }
.glitch:hover::before{ animation:g1 .4s steps(2) 2; opacity:.85; }
.glitch:hover::after { animation:g2 .4s steps(2) 2; opacity:.85; }
@keyframes g1{ 0%{transform:translate(-3px,1px); clip-path:inset(10% 0 60% 0)} 100%{transform:translate(2px,-1px); clip-path:inset(55% 0 12% 0)} }
@keyframes g2{ 0%{transform:translate(3px,-1px); clip-path:inset(45% 0 25% 0)} 100%{transform:translate(-2px,1px); clip-path:inset(5% 0 70% 0)} }

/* =========================================================
   DEVICE
   ========================================================= */
.dev{
  background:linear-gradient(170deg, #1d1d20, #0e0e10 70%);
  border:1px solid var(--line-2); border-radius:14px;
  padding:16px; box-shadow:0 30px 70px -30px #000, inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
}
.dev::after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.dev__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dev__brand{ font:700 11px var(--mono); letter-spacing:.2em; color:var(--ink-2); }
.dev__brand em{ color:var(--acc); font-style:normal; }
.dev__ant{ display:flex; gap:3px; align-items:flex-end; }
.dev__ant i{ width:3px; background:var(--acc-deep); border-radius:1px; }
.dev__ant i:nth-child(1){ height:6px; animation:sig 1.4s infinite .0s; }
.dev__ant i:nth-child(2){ height:10px; animation:sig 1.4s infinite .2s; }
.dev__ant i:nth-child(3){ height:14px; animation:sig 1.4s infinite .4s; }
@keyframes sig{ 0%,100%{background:var(--acc-deep)} 50%{background:var(--acc); box-shadow:0 0 6px var(--acc)} }

/* screen */
.dev__screen{
  position:relative; border-radius:6px; overflow:hidden;
  border:3px solid #000; background:var(--screen-bg);
  box-shadow:0 0 34px rgb(var(--acc-glow) / .32), inset 0 0 20px rgba(0,0,0,.25);
  aspect-ratio:128/64;
  cursor:pointer;
}
.scr{
  position:absolute; inset:0; color:var(--screen-ink);
  font:600 clamp(9px,1.55vw,12px)/1.5 var(--mono);
  display:flex; flex-direction:column;
}
.scr__bar{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--screen-ink); color:var(--screen-bg);
  padding:3px 7px; font-size:.86em; letter-spacing:.1em;
}
.scr__list{ list-style:none; margin:0; padding:5px 6px; flex:1; overflow:hidden; }
.scr__list li{
  display:flex; align-items:center; gap:7px; padding:1px 4px; white-space:nowrap;
}
.scr__list li.is-sel{ background:var(--screen-ink); color:var(--screen-bg); }
.scr__list li .ic{ width:1.2em; text-align:center; }
.scr__foot{
  padding:2px 7px; font-size:.78em; border-top:1px dashed rgba(0,0,0,.35); opacity:.75;
}
.scr__px{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.11) 1px, transparent 1px);
  background-size:3px 3px;
}

/* d-pad */
.dev__pad{
  margin-top:16px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:7px; align-items:center; justify-items:center;
  max-width:260px; margin-inline:auto;
}
.pad{
  width:100%; padding:9px 0; background:#1a1a1d; color:var(--ink-2);
  border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px;
  font:600 12px var(--mono); cursor:pointer; transition:.12s var(--ease);
}
.pad:hover{ color:var(--acc); border-color:var(--acc-deep); }
.pad:active,.pad.is-hit{ transform:translateY(2px); border-bottom-width:1px; background:var(--acc); color:#000; }
.pad--up{    grid-column:2; grid-row:1; }
.pad--left{  grid-column:1; grid-row:2; }
.pad--ok{    grid-column:2; grid-row:2; background:var(--acc-deep); color:#000; font-weight:700; }
.pad--ok:hover{ background:var(--acc); color:#000; }
.pad--right{ grid-column:3; grid-row:2; }
.pad--down{  grid-column:2; grid-row:3; }
.pad--back{  grid-column:3; grid-row:1; }

.dev__bot{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.dev__gpio{
  flex:1; height:9px; border-radius:2px;
  background:repeating-linear-gradient(90deg, #2c2c30 0 4px, transparent 4px 9px);
}
.dev__lbl{ font-size:10px; color:var(--ink-3); letter-spacing:.1em; }

/* =========================================================
   SECTIONS
   ========================================================= */
.sec{
  max-width:var(--maxw); margin:0 auto;
  padding:72px clamp(14px,4vw,34px);
  border-top:1px solid var(--line);
}
.sec__h{
  display:flex; align-items:baseline; gap:12px;
  margin:0 0 6px; font:800 clamp(24px,3.6vw,38px) var(--mono);
  text-transform:uppercase; letter-spacing:-.02em;
}
.sec__n{
  font:400 11px var(--px); color:var(--acc); letter-spacing:0;
  border:1px solid var(--acc-deep); padding:6px 7px; border-radius:3px;
}
.sec__dot{ color:var(--acc); animation:cb 1.1s steps(1) infinite; }
.sec__sub{ margin:0 0 30px; color:var(--ink-3); font-size:12.5px; letter-spacing:.06em; }

.card{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r);
  padding:22px;
  position:relative;
}
.card::before{
  content:""; position:absolute; top:-1px; left:16px; width:34px; height:2px;
  background:var(--acc); opacity:.7;
}

.two{ display:grid; grid-template-columns:1.3fr 1fr; gap:22px; }
.two--contact{ grid-template-columns:1.15fr 1fr; }

.lead{ margin:0; font-size:15.5px; line-height:1.85; }
.card--quote{ padding:30px; }
.card--quote .lead::before{ content:"“"; color:var(--acc); font-size:34px; line-height:0; vertical-align:-6px; margin-right:4px; }
.sign{ margin:18px 0 0; color:var(--acc); font-size:13px; letter-spacing:.1em; }

.probe__h{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px dashed var(--line-2);
}
.probe{ margin:0; }
.probe > div{
  display:grid; grid-template-columns:86px 1fr; gap:10px; padding:7px 0;
  border-bottom:1px dotted #1e1e21; font-size:13px;
}
.probe > div:last-child{ border-bottom:0; }
.probe dt{ color:var(--ink-3); text-transform:uppercase; font-size:10.5px; letter-spacing:.1em; padding-top:3px; }
.probe dd{ margin:0; color:var(--ink); }

/* ───── timeline ───── */
.tl{ list-style:none; margin:0; padding:0 0 0 26px; position:relative; }
.tl::before{
  content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(var(--acc-deep), var(--line) 70%);
}
.tl__i{ position:relative; margin-bottom:22px; }
.tl__dot{
  position:absolute; left:-26px; top:26px; width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:2px solid var(--line-2);
}
.tl__i[data-live] .tl__dot{
  border-color:var(--acc); background:var(--acc); box-shadow:0 0 12px var(--acc);
}

.job__h{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.job__t{ margin:0; font-size:18px; letter-spacing:-.01em; }
.job__c{ margin:5px 0 0; font-size:13px; color:var(--acc); font-weight:700; letter-spacing:.04em; }
.job__c .muted{ font-weight:400; }

.chip{
  flex:none; font-size:11px; letter-spacing:.08em; padding:5px 10px;
  border:1px solid var(--line-2); border-radius:999px; color:var(--ink-2); white-space:nowrap;
}
.chip--live{ border-color:var(--acc-deep); color:var(--acc); }
.chip--live::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--acc); margin-right:6px; vertical-align:1px; animation:blink 1.8s infinite;
}

.job__l{ margin:16px 0 0; padding:0; list-style:none; }
.job__l li{ position:relative; padding-left:19px; margin-bottom:7px; color:var(--ink-2); font-size:14px; }
.job__l li::before{ content:"▸"; position:absolute; left:0; color:var(--acc-deep); }

.flag{
  margin-top:16px; padding:13px 15px; border-left:2px solid var(--acc);
  background:rgb(var(--acc-glow) / .055); border-radius:0 var(--r) var(--r) 0;
}
.flag__k{
  display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc); margin-bottom:5px;
}
.flag p{ margin:0; font-size:14px; color:var(--ink); }

.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0; padding:0; }
.tags li{
  font-size:11px; padding:4px 9px; border-radius:3px;
  background:#161618; border:1px solid var(--line-2); color:var(--ink-2);
  transition:.15s var(--ease);
}
.tags li:hover{ color:var(--acc); border-color:var(--acc-deep); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:6px; }
.split__h{
  margin:14px 0 0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc);
}
.split__h span{ margin-right:5px; }
.split__c .job__l{ margin-top:9px; }

/* ───── stack ───── */
.mods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; }

.mod__h{ margin:0 0 18px; font-size:14px; letter-spacing:.06em; display:flex; align-items:center; gap:10px; }
.mod__ic{
  display:grid; place-items:center; width:26px; height:26px; flex:none;
  border:1px solid var(--acc-deep); border-radius:3px; color:var(--acc); font-size:11px;
}

.bars{ display:grid; gap:13px; }

/* --track : longueur de l'échelle. Pleine largeur dans les cadres ;
   raccourcie sur la barre hors barème pour lui laisser la place de dépasser. */
.bar{ position:relative; --track:100%; }
.bar > span{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  width:var(--track); font-size:12.5px; color:var(--ink-2); margin-bottom:6px;
}
.bar > span b{ color:var(--ink-3); font-weight:500; font-size:11px; }
.bar i{
  display:block; width:var(--track); height:6px;
  background:#1b1b1e; border-radius:2px; overflow:hidden; position:relative;
}
.bar i::after{
  content:""; position:absolute; inset:0 100% 0 0; border-radius:2px;
  background:repeating-linear-gradient(90deg, var(--acc) 0 5px, rgba(0,0,0,.35) 5px 7px);
  box-shadow:0 0 10px rgb(var(--acc-glow) / .55);
  transition:right 1.1s var(--ease);
}
.bar.is-in i::after{ right:calc(100% - var(--w)); }

/* la barre qui sort de l'échelle — hors cadre, posée sur le fond de section */
.bonus{ margin-top:30px; padding-top:26px; border-top:1px dashed var(--line-2); }

/* conteneur pleine fenêtre : la barre peut filer jusqu'au bord de l'écran,
   et c'est LUI qui coupe — le document, lui, ne déborde pas. */
.bonus__bleed{
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  padding-bottom:24px; margin-bottom:-24px;   /* place pour l'étiquette 100% */
  overflow:hidden;
}
.bar--over{ --track:62%; }
.bar--over i{ overflow:visible; }

/* zone hors barème : au-delà du repère, jusqu'au bord de la page */
.bar--over::before{
  content:""; position:absolute; bottom:0; height:6px;
  left:var(--track); width:100vw;
  background:repeating-linear-gradient(135deg, rgb(var(--acc-glow) / .14) 0 3px, transparent 3px 7px);
}
/* repère de fin d'échelle, dessiné brisé : la barre l'a cassé en passant */
.bar--over i::before{
  content:""; position:absolute; right:-1px; top:-10px; bottom:-10px; width:2px;
  background:linear-gradient(var(--ink-2) 0 36%, transparent 36% 54%, var(--ink-2) 54% 100%);
  transform:skewX(-16deg);
  z-index:2;
}
.bar--over::after{
  content:"100%"; position:absolute; left:var(--track); top:calc(100% + 9px);
  transform:translateX(-50%);
  font-size:10px; letter-spacing:.1em; color:var(--ink-2);
}

/* la barre ne s'arrête plus : elle traverse la page et sort par la droite.
   body{overflow-x:clip} la coupe net au bord — d'où l'effet de cassure. */
.bar--over i::after{
  inset:0 auto 0 0; width:0; border-radius:2px 0 0 2px;
  background:repeating-linear-gradient(90deg, var(--acc-soft) 0 5px, rgba(0,0,0,.3) 5px 7px);
  box-shadow:0 0 22px var(--acc-soft);
  transition:width 1.6s var(--ease);
}
.bar--over.is-in i::after{ right:auto; width:300vw; }

/* petit soubresaut au moment où elle défonce le bord */
@keyframes snap{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-4px) }
  55%{ transform:translateX(3px) }
  80%{ transform:translateX(-2px) }
}
.bar--over.is-in{ animation:snap .4s 1.45s var(--ease); }

/* le « ∞ % » reste lisible au bord de la section, la barre file dessous */
.bar--over > span{ width:100%; }
.bar--over > span b{ color:var(--acc-soft); font-weight:700; font-size:13px; }
.bonus__cap{
  margin:30px 0 0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

/* ───── formation ───── */
.edu{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:18px; align-items:start; }
.ed h3{ margin:12px 0 4px; font-size:15.5px; line-height:1.4; }
.ed__s{ margin:0 0 8px; color:var(--acc); font-size:12px; letter-spacing:.08em; }
.ed p.muted{ margin:0; font-size:13px; }

.misc__h{ margin:0 0 14px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); }
.misc__l{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 34px; }
.misc__l li{ font-size:13.5px; color:var(--ink-2); position:relative; padding-left:18px; }
.misc__l li::before{ content:"▪"; position:absolute; left:0; color:var(--acc); }

/* ───── contact ───── */
.tty-static{ padding:0; overflow:hidden; }
.tty-static::before{ display:none; }
.tty-static__bar{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; background:var(--panel-2); border-bottom:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3); letter-spacing:.06em;
}
.dots{ display:flex; gap:5px; }
.dots i{ width:9px; height:9px; border-radius:50%; background:#2e2e32; }
.dots i:first-child{ background:var(--acc); }
.tty-static__b{
  margin:0; padding:20px; font:400 13.5px/2 var(--mono); color:var(--ink-2);
  white-space:pre-wrap; word-break:break-word;
}
.tty-static__b .p{ color:var(--acc); font-weight:700; }
.tty-static__b .k{ color:var(--ink-3); }

.sig canvas{ width:100%; height:auto; border:1px solid var(--line); border-radius:3px; background:#0a0a0b; }
.sig__t{ margin:14px 0 0; font-size:13px; }

/* ───── footer ───── */
.ftr{
  max-width:var(--maxw); margin:0 auto; padding:34px clamp(14px,4vw,34px) 90px;
  border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3);
}
.ftr p{ margin:0 0 7px; }

/* =========================================================
   TERMINAL
   ========================================================= */
.tty{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  height:min(56vh, 460px);
  display:flex; flex-direction:column;
  background:#070708;
  border-top:1px solid var(--acc-deep);
  transform:translateY(100%);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.tty.is-open{ box-shadow:0 -24px 60px -24px rgb(var(--acc-glow) / .35); }
.tty[hidden]{ display:flex; }            /* on anime plutôt que de masquer brutalement */
.tty.is-open{ transform:translateY(0); }
.tty__bar{
  display:flex; align-items:center; gap:12px;
  padding:9px 14px; background:var(--panel-2); border-bottom:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3);
}
.tty__title{ letter-spacing:.06em; }
.tty__x{
  margin-left:auto; background:none; border:0; color:var(--ink-3);
  font-size:15px; cursor:pointer; line-height:1; padding:2px 6px;
}
.tty__x:hover{ color:var(--acc); }
.tty__out{
  flex:1; overflow-y:auto; padding:16px 18px;
  font:400 13.5px/1.75 var(--mono); color:var(--ink-2); white-space:pre-wrap; word-break:break-word;
}
.tty__out .ok{ color:var(--ok); }
.tty__out .acc{ color:var(--acc); }
.tty__out .warn{ color:#ffd166; }
.tty__out .err{ color:#ff5d5d; }
.tty__out .dim{ color:var(--ink-3); }
.tty__out .ech{ color:var(--ink); }
.tty__out .ech b{ color:var(--acc); font-weight:700; }
.tty__out a{ text-decoration:underline; }
.tty__in{ display:flex; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid var(--line); }
.tty__p{ color:var(--acc); font-weight:700; font-size:13.5px; white-space:nowrap; }
.tty__in input{
  flex:1; background:none; border:0; outline:0;
  color:var(--ink); font:400 13.5px var(--mono); caret-color:var(--acc);
}

/* =========================================================
   MATRIX easter egg
   ========================================================= */
#matrix{ position:fixed; inset:0; z-index:140; background:#000; }

/* =========================================================
   REVEAL
   ========================================================= */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; padding-top:118px; gap:44px; }
  .hero__right{ max-width:380px; }
  .two, .two--contact, .split{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .hdr{ flex-wrap:wrap; gap:10px 14px; padding:10px 14px; }
  .hdr__nav{ order:3; width:100%; margin-left:0; overflow-x:auto; padding-bottom:2px; }
  .hdr__status{ margin-left:auto; }
  .hdr__clock{ display:none; }
  html{ scroll-padding-top:120px; }
  .hero{ padding-top:150px; }
  .hero__kpi{ gap:22px; }
  .hero__kpi b{ font-size:22px; }
  .sec{ padding:54px 14px; }
  .card{ padding:18px; }
  .job__h{ flex-direction:column; gap:10px; }
  .edu{ grid-template-columns:1fr; }
  .bar--over{ --track:58%; }
  .tty{ height:62vh; }
  .boot__log{ min-height:150px; font-size:11px; }
}

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

@media print{
  .hdr,.tty,.fx,.boot,.dev,.hero__cta,.hero__grid,.ftr .muted{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card{ border-color:#bbb; background:#fff; break-inside:avoid; }
  a{ color:#000; }
}