/* ═══ Thèmes ═══════════════════════════════════════════════════════
   Toutes les couleurs passent par ces jetons : changer de thème ne
   touche qu'à ces trois blocs. Les *-rgb servent aux transparences.
   --glow règle l'intensité des halos néon (atténués en thème clair).
   ═══════════════════════════════════════════════════════════════════ */

/* Sombre : thème d'origine, valeurs inchangées */
:root[data-theme="dark"]{
  --bg:#05080A;
  --bg-2:#080D10;
  --surface:#0B1215;
  --surface-2:#0F171B;
  --line:#16242A;
  --line-soft:#101B1F;
  --text:#D3E0D9;
  --muted:#8A9C94;
  --muted-2:#6E847B;  /* éclairci pour atteindre 4.5:1 (était #5A6C65) */

  /* néon : accents seulement (jamais sur le corps de texte) */
  --term:#3BFF9E;    /* phosphor vert, accent principal */
  --cyan:#38E1D6;    /* réseaux */
  --s-off:#FF4D7D;   /* offensif */
  --s-def:#FFB347;   /* défensif / SIEM */
  --s-net:#38E1D6;   /* réseaux */
  --s-sys:#6C8CFF;   /* systèmes bas niveau */
  --s-gov:#B57BFF;   /* gouvernance */

  --on-accent:#04140C;
  --selection-text:#EAFFF4;
  --accent-rgb:59,255,158;
  --cyan-rgb:56,225,214;
  --sys-rgb:108,140,255;
  --bg-rgb:5,8,10;
  --surface-rgb:11,18,21;
  --grid-rgb:120,160,150;
  --tint-rgb:255,255,255;
  --shadow-rgb:0,0,0;
  --glow:1;
  color-scheme:dark;
}

/* Blue night : bleu nuit, accent clair de lune */
:root[data-theme="bluenight"]{
  --bg:#0D1526;
  --bg-2:#101A2E;
  --surface:#142038;
  --surface-2:#192842;
  --line:#253756;
  --line-soft:#1C2B47;
  --text:#E3EAF6;
  --muted:#A2B1CB;
  --muted-2:#8090AE;

  --term:#F4CF79;    /* or lunaire, accent principal */
  --cyan:#7CD4FF;
  --s-off:#FF8FAD;
  --s-def:#FFB877;
  --s-net:#7CD4FF;
  --s-sys:#9DB3FF;
  --s-gov:#CDAEFF;

  --on-accent:#1A1406;
  --selection-text:#FFF8E6;
  --accent-rgb:244,207,121;
  --cyan-rgb:124,212,255;
  --sys-rgb:157,179,255;
  --bg-rgb:13,21,38;
  --surface-rgb:20,32,56;
  --grid-rgb:150,175,220;
  --tint-rgb:255,255,255;
  --shadow-rgb:2,6,18;
  --glow:.75;
  color-scheme:dark;
}

/* Clair : thème par défaut (aussi sans JavaScript), accents assombris pour rester lisibles */
:root,
:root[data-theme="light"]{
  --bg:#F6F8F7;
  --bg-2:#EEF2F0;
  --surface:#FFFFFF;
  --surface-2:#F3F6F5;
  --line:#DCE4E0;
  --line-soft:#E7EDEA;
  --text:#14211B;
  --muted:#4B5B54;
  --muted-2:#63716B;

  --term:#08744C;
  --cyan:#0A6F80;
  --s-off:#C01F57;
  --s-def:#9A5600;
  --s-net:#0A6F80;
  --s-sys:#3550D0;
  --s-gov:#7638CC;

  --on-accent:#FFFFFF;
  --selection-text:#0B1F16;
  --accent-rgb:8,116,76;
  --cyan-rgb:10,111,128;
  --sys-rgb:53,80,208;
  --bg-rgb:246,248,247;
  --surface-rgb:255,255,255;
  --grid-rgb:20,33,27;
  --tint-rgb:20,33,27;
  --shadow-rgb:20,33,27;
  --glow:.3;
  color-scheme:light;
}

:root{
  --maxw:1160px;
  --nav-h:62px;
  --radius:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ═══ Polices auto-hébergées (SIL OFL 1.1, voir assets/fonts/OFL-*.txt) ═══
   Une police variable par famille, sous-ensemble latin (français compris).
   Aucune requête vers un service tiers. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/space-grotesk.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/jetbrains-mono.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  transition:background-color .35s,color .35s;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* fond : nappes de lumière + grille technique très discrète */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 480px at 82% -6%, rgba(var(--accent-rgb),.06), transparent 62%),
    radial-gradient(680px 520px at 6% 8%, rgba(var(--cyan-rgb),.05), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(var(--sys-rgb),.04), transparent 65%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(var(--grid-rgb),.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--grid-rgb),.03) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 25%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 25%,#000 0%,transparent 75%);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
@media(max-width:560px){.wrap{padding:0 18px}}

a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
.mono{font-family:'JetBrains Mono',monospace}
::selection{background:rgba(var(--accent-rgb),.28);color:var(--selection-text)}

/* accessibilité : focus clavier visible, lien d'évitement */
:focus-visible{outline:2px solid var(--term);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--term);color:var(--on-accent);
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;padding:10px 14px;border-radius:4px;transition:top .2s}
.skip:focus{top:12px}

/* ---------- eyebrow / prompt ---------- */
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;letter-spacing:.06em;
  color:var(--muted);display:flex;align-items:center;gap:10px;
}
.eyebrow .p{color:var(--term)}
.eyebrow .idx{color:var(--muted-2)}
.eyebrow .cmd{color:var(--text)}
.eyebrow .num{color:var(--muted-2);padding-right:10px;margin-right:2px;border-right:1px solid var(--line)}
.eyebrow-center{justify-content:center}

@keyframes blink{50%{opacity:0}}

/* ================= NAV ================= */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(var(--bg-rgb),.6);
  border-bottom:1px solid transparent;
  transition:border-color .4s,background .4s;
}
nav.scrolled{border-bottom-color:var(--line);background:rgba(var(--bg-rgb),.88)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--cyan),var(--term));box-shadow:0 0 10px rgba(var(--accent-rgb),calc(.6 * var(--glow)))}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:14px;letter-spacing:-.01em}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--term);box-shadow:0 0 10px rgba(var(--accent-rgb),calc(.8 * var(--glow)));flex:none}
.brand .path{color:var(--muted)}
.brand .path b{color:var(--text);font-weight:500}
.brand .dim{color:var(--muted-2)}
.brand .tilde{color:var(--term)}
.nav-links{display:flex;gap:24px}
.nav-links a{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);transition:color .25s;position:relative;padding:6px 0}
.nav-links a .h{color:var(--term)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--term);transition:width .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{font-family:'JetBrains Mono',monospace;font-size:13px;border:1px solid var(--line);padding:8px 15px;border-radius:4px;color:var(--text);transition:.25s;white-space:nowrap}
.nav-cta:hover{border-color:var(--term);color:var(--term);box-shadow:0 0 0 1px rgba(var(--accent-rgb),calc(.25 * var(--glow))),0 0 18px -6px rgba(var(--accent-rgb),calc(.6 * var(--glow)))}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:4px;width:40px;height:36px;color:var(--text);cursor:pointer;place-items:center}
.nav-toggle span{display:block;width:16px;height:1.5px;background:currentColor;position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;transition:transform .25s var(--ease)}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(5px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-5px) rotate(-45deg)}
@media(max-width:860px){
  .nav-toggle{display:grid}
  .nav-cta{display:none}
  .nav-links{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;padding:8px 18px 16px;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -20px rgba(var(--shadow-rgb),.8);
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s var(--ease),visibility .25s}
  .nav-open .nav-links{visibility:visible;opacity:1;transform:none}
  .nav-links a{padding:13px 4px;border-bottom:1px solid var(--line-soft);font-size:14px}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a::after{display:none}
  .nav-links a.active{color:var(--term)}
}

/* ---- sélecteur de thème ---- */
.theme-switch{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:99px;background:rgba(var(--surface-rgb),.7);flex:none}
.theme-switch button{width:30px;height:28px;display:grid;place-items:center;border:0;border-radius:99px;background:none;color:var(--muted);cursor:pointer;transition:color .2s,background .2s}
.theme-switch button:hover{color:var(--text)}
.theme-switch button[aria-checked="true"]{background:var(--term);color:var(--on-accent)}
.nav-end{display:flex;align-items:center;gap:12px}
.lang{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:6px 10px;transition:color .2s,border-color .2s}
.lang:hover{color:var(--term);border-color:var(--term)}
@media(max-width:860px){.theme-switch button{width:28px;height:26px}}
/* petits écrans : le logo se réduit au prénom pour laisser la place à la langue, au thème et au menu */
@media(max-width:480px){.brand .host{display:none}.nav-end{gap:8px}.nav-in{padding:0 14px}}

/* ================= HERO ================= */
header{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 56px) 0 70px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;width:100%}
.hero-tag{margin-bottom:22px;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.04em;
  color:var(--term);border:1px solid rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.06);padding:5px 11px;border-radius:99px;margin-bottom:26px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--term);box-shadow:0 0 0 0 rgba(var(--accent-rgb),calc(.6 * var(--glow)));animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),calc(.55 * var(--glow)))}70%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),calc(0 * var(--glow)))}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),calc(0 * var(--glow)))}}
.hero h1{font-size:clamp(2.8rem,6.6vw,4.9rem);font-weight:700;margin-bottom:16px;position:relative}
.hero h1 .l1{display:block;color:var(--text)}
.hero h1 .l2{display:block;color:var(--term);text-shadow:0 0 28px rgba(var(--accent-rgb),calc(.3 * var(--glow)))}
/* glitch discret sur le nom */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none;opacity:.75}
.glitch::before{color:var(--s-off);clip-path:inset(0 0 62% 0);animation:gl1 6s steps(2,end) infinite}
.glitch::after{color:var(--cyan);clip-path:inset(58% 0 0 0);animation:gl2 6.6s steps(2,end) infinite}
@keyframes gl1{0%,94%,100%{transform:translate(0);opacity:0}95%{transform:translate(-2px,-1px);opacity:.8}97%{transform:translate(2px,1px);opacity:.7}}
@keyframes gl2{0%,93%,100%{transform:translate(0);opacity:0}94%{transform:translate(2px,1px);opacity:.7}96%{transform:translate(-2px,-1px);opacity:.8}}
.hero .role{font-family:'JetBrains Mono',monospace;font-size:clamp(.84rem,1.5vw,.98rem);color:var(--muted);letter-spacing:.01em;margin-bottom:24px}
.hero .role b{color:var(--text);font-weight:500}
.hero .role .g{color:var(--term)}
.hero p.lede{color:var(--muted);font-size:1.08rem;max-width:46ch;margin-bottom:34px}
.hero p.lede b{color:var(--text);font-weight:500}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}
.btn{font-family:'JetBrains Mono',monospace;font-size:13.5px;padding:13px 21px;border-radius:5px;transition:.25s var(--ease);display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.btn svg{transition:transform .25s var(--ease)}
.btn-primary{background:var(--term);color:var(--on-accent);font-weight:700;box-shadow:0 0 0 1px rgba(var(--accent-rgb),calc(.3 * var(--glow)))}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(var(--accent-rgb),calc(.7 * var(--glow)))}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-ghost{border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--term);color:var(--term);background:rgba(var(--accent-rgb),.04)}

.hero-stats{display:flex;gap:36px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line-soft)}
.hero-stats .st .n{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:600;color:var(--text)}
.hero-stats .st .n span{color:var(--term)}
.hero-stats .st .k{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);margin-top:3px}

/* ---- fenêtre terminal (signature) ---- */
.term{position:relative;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--surface),var(--bg-2));
  box-shadow:0 40px 90px -45px rgba(var(--shadow-rgb),.95),0 0 0 1px rgba(var(--accent-rgb),calc(.05 * var(--glow))),0 0 60px -30px rgba(var(--accent-rgb),calc(.35 * var(--glow)));overflow:hidden;max-width:530px;margin-left:auto;width:100%}
.term::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 40%,rgba(var(--accent-rgb),.05) 50%,transparent 60%)}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line-soft);background:rgba(var(--tint-rgb),.015)}
.term-bar .tl{display:flex;gap:7px}
.term-bar .tl i{width:11px;height:11px;border-radius:50%;display:block}
.term-bar .tl i:nth-child(1){background:#FF5F57}
.term-bar .tl i:nth-child(2){background:#FEBC2E}
.term-bar .tl i:nth-child(3){background:#28C840}
.term-bar .tt{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted-2);margin-left:6px}
.term-body{padding:18px 18px 20px;font-family:'JetBrains Mono',monospace;font-size:12.8px;line-height:1.85;min-height:300px}
.term-body .ln{display:block;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.term-body .pr{color:var(--term)}
.term-body .u{color:var(--cyan)}
.term-body .c{color:var(--text)}
.term-body .o{color:var(--muted)}
.term-body .ok{color:var(--term)}
.term-body .k{color:var(--s-def)}
.term-body .tc{display:inline-block;width:8px;height:1.02em;background:var(--term);vertical-align:-2px;box-shadow:0 0 8px rgba(var(--accent-rgb),calc(.7 * var(--glow)));animation:blink 1.05s steps(1) infinite}

@media(max-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:38px}
  .term{max-width:100%;margin:0}
  .hero-stats{gap:24px;flex-wrap:wrap}
}
@media(max-width:560px){.hero-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:16px}}

/* ================= SECTION base ================= */
section.block{padding:100px 0;position:relative}
section.block + section.block::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(var(--maxw),calc(100% - 56px));height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.sec-head{margin-bottom:52px;max-width:680px}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:16px}
.sec-head p{color:var(--muted);margin-top:14px;font-size:1.04rem}

/* ---- effet "spotlight" qui suit le pointeur (cartes) ---- */
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c,var(--term)) 11%,transparent),transparent 60%)}
.spot:hover::after{opacity:1}

/* ================= ABOUT ================= */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}
.about-body p{color:var(--muted);margin-bottom:18px;font-size:1.06rem}
.about-body p strong{color:var(--text);font-weight:600}
.about-card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface),var(--bg-2));padding:8px 22px 18px;position:relative;overflow:hidden}
.about-card::before{content:"// system.info";position:absolute;top:0;left:0;right:0;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:var(--muted-2);padding:13px 0 0 22px}
.about-card .row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.about-card .row:first-of-type{margin-top:28px}
.about-card .row:last-child{border-bottom:0}
.about-card .row .k{font-family:'JetBrains Mono',monospace;color:var(--muted-2);font-size:11.5px;letter-spacing:.04em;white-space:nowrap}
.about-card .row .v{color:var(--text);text-align:right;font-size:13.5px}
.about-card .row .v .dot{color:var(--term)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:32px}}

/* ================= EXPERTISE / modules ================= */
.spectrum{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.dom{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:22px 18px 20px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.dom::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c);box-shadow:0 0 12px -1px var(--c)}
.dom:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 60%,var(--line));box-shadow:0 18px 40px -26px var(--c)}
.dom .di{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-2);letter-spacing:.08em}
.dom .di b{color:var(--c)}
.dom h3{font-size:1.04rem;margin:11px 0 14px;color:var(--text)}
.dom ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.dom li{font-size:12.2px;color:var(--muted);font-family:'JetBrains Mono',monospace;padding-left:15px;position:relative}
.dom li::before{content:"›";position:absolute;left:0;color:var(--c)}
@media(max-width:1000px){.spectrum{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.spectrum{grid-template-columns:1fr}}

/* ================= PARCOURS / log ================= */
.timeline{position:relative}
.xp{display:grid;grid-template-columns:190px 1fr;gap:34px;position:relative}
.xp .when{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted-2);padding-top:2px}
.xp .when .ts{color:var(--muted)}
.xp .when .now{display:inline-block;margin-top:9px;padding:3px 9px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:10px;letter-spacing:.08em}
.xp:first-child .when .now{border-color:var(--term);color:var(--term);box-shadow:0 0 14px -6px rgba(var(--accent-rgb),calc(.8 * var(--glow)))}
.xp .body{position:relative;padding:0 0 46px 30px;border-left:1px solid var(--line)}
.xp:last-child .body{padding-bottom:4px;border-left-color:transparent}
.xp:last-child .body::after{content:"";position:absolute;left:-1px;top:0;height:28px;border-left:1px solid var(--line)}
.xp .body::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--muted-2)}
.xp:first-child .body::before{border-color:var(--term);box-shadow:0 0 0 4px rgba(var(--accent-rgb),calc(.1 * var(--glow))),0 0 12px rgba(var(--accent-rgb),calc(.6 * var(--glow)))}
.xp .body h3{font-size:1.22rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.xp .body h3 .co{color:var(--term);font-weight:500;font-size:.95rem;font-family:'JetBrains Mono',monospace}
.xp .body .meta{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted-2);margin:5px 0 14px;letter-spacing:.03em}
.xp .body ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.xp .body li{color:var(--muted);font-size:14.8px;padding-left:20px;position:relative}
.xp .body li::before{content:"›";position:absolute;left:2px;color:var(--term);opacity:.7}
@media(max-width:700px){
  .xp{grid-template-columns:1fr;gap:10px}
  .xp .when{padding-left:30px}
  .xp .body{padding-bottom:38px}
  .xp:last-child .body::after{display:none}
}

/* ================= PROJECTS ================= */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.proj{--c:var(--accent,var(--term));border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--surface),var(--bg-2));transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;overflow:hidden;display:flex;flex-direction:column}
.proj:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 22px 46px -30px var(--c)}
.proj .pbar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line-soft);font-family:'JetBrains Mono',monospace;background:rgba(var(--tint-rgb),.015)}
.proj .pbar .fn{font-size:11.5px;color:var(--muted)}
.proj .pbar .fn b{color:var(--c);font-weight:500}
.proj .pbar .num{font-size:11px;color:var(--muted-2)}
.proj .pin{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.proj .kind{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--c);display:inline-block;margin-bottom:12px}
.proj h3{font-size:1.26rem;margin-bottom:10px}
.proj p{color:var(--muted);font-size:14.3px;margin-bottom:18px;flex:1}
.proj .stack{display:flex;flex-wrap:wrap;gap:7px}
.proj .stack span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line-soft);padding:4px 9px;border-radius:4px}
@media(max-width:720px){.proj-grid{grid-template-columns:1fr}}

/* ================= EDU / CERTS ================= */
.edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.edu h3.subh{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:22px;font-weight:400}
.edu h3.subh::before{content:"$ ";color:var(--term)}
.edu-item{padding:18px 0;border-top:1px solid var(--line-soft)}
.edu-item:first-of-type{border-top:0;padding-top:0}
.edu-item .t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.06rem}
.edu-item .s{color:var(--muted);font-size:13.5px;margin-top:3px}
.edu-item .y{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--term);margin-top:6px;opacity:.85}
.cert-list{display:flex;flex-direction:column;gap:11px}
.cert{display:flex;gap:14px;align-items:flex-start;padding:15px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);transition:border-color .25s,transform .25s var(--ease)}
.cert:hover{border-color:color-mix(in srgb,var(--term) 55%,var(--line));transform:translateX(3px)}
.cert .c-ic{color:var(--term);flex:none;margin-top:2px}
.cert .c-t{font-size:14.5px;font-weight:500}
.cert .c-s{font-size:12.5px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.langs{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap}
.langs .lg{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted)}
.langs .lg b{color:var(--text)}
@media(max-width:820px){.edu-grid{grid-template-columns:1fr;gap:40px}}

/* ================= CONTACT ================= */
.contact{text-align:center;padding:116px 0 92px;position:relative}
.contact::before{content:"";position:absolute;left:50%;top:40%;width:min(720px,90vw);height:320px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.07),transparent)}
.contact h2{font-size:clamp(2.2rem,5.2vw,3.5rem);margin:18px 0 18px}
.contact h2 .grad{color:var(--term);text-shadow:0 0 26px rgba(var(--accent-rgb),calc(.35 * var(--glow)))}
.contact p{color:var(--muted);max-width:54ch;margin:0 auto 38px;font-size:1.06rem}
.contact-links{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.clink{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:13.5px;border:1px solid var(--line);padding:13px 20px;border-radius:6px;color:var(--muted);background:rgba(var(--surface-rgb),.6);transition:.25s;cursor:pointer}
.clink:hover{border-color:var(--term);color:var(--text);transform:translateY(-2px);box-shadow:0 0 22px -10px rgba(var(--accent-rgb),calc(.7 * var(--glow)))}
.clink svg{color:var(--term)}
button.clink{font:inherit;font-family:'JetBrains Mono',monospace;font-size:13.5px}
.clink.copied{border-color:var(--term);color:var(--term)}

footer{border-top:1px solid var(--line-soft);padding:30px 0;margin-top:16px;position:relative;z-index:1}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.foot-in .fl,.foot-in .fr{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted-2)}
.foot-in .owner{color:var(--muted)}
.foot-in .fr .dot{color:var(--term)}
.foot-in .top{color:var(--muted);transition:color .2s}
.foot-in .top:hover{color:var(--term)}

/* ---- tons par domaine (remplacent les attributs style inline, interdits par la CSP) ---- */
[data-tone="off"]{--c:var(--s-off);--accent:var(--s-off)}
[data-tone="def"]{--c:var(--s-def);--accent:var(--s-def)}
[data-tone="net"]{--c:var(--s-net);--accent:var(--s-net)}
[data-tone="sys"]{--c:var(--s-sys);--accent:var(--s-sys)}
[data-tone="gov"]{--c:var(--s-gov);--accent:var(--s-gov)}

/* ---- reveal (uniquement si le JS tourne : sans JS, tout reste visible) ---- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---- pages de texte (mentions légales) ---- */
.legal{padding:calc(var(--nav-h) + 64px) 0 80px;position:relative;z-index:1}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(2rem,4.5vw,2.8rem);margin:16px 0 8px}
.legal .legal-meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted-2);margin-bottom:40px}
.legal section{padding:26px 0;border-top:1px solid var(--line-soft)}
.legal h2{font-size:1.25rem;margin-bottom:12px}
.legal p,.legal li{color:var(--muted);font-size:1rem;margin-bottom:10px}
.legal strong{color:var(--text);font-weight:600}
.legal ul{padding-left:20px}
.legal a{color:var(--term);text-decoration:underline;text-underline-offset:3px}

/* ---- page 404 ---- */
.nf{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px;position:relative;z-index:1}
.nf .code{font-family:'Space Grotesk',sans-serif;font-size:clamp(5rem,18vw,9rem);font-weight:700;line-height:1;color:var(--term);text-shadow:0 0 40px rgba(var(--accent-rgb),calc(.35 * var(--glow)))}
.nf .term{margin:28px auto 30px;max-width:460px;text-align:left}
.nf .term-body{min-height:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .glitch::before,.glitch::after{display:none}
}