:root{
    --ink:#0A0A0A;
    --ink-2:#141414;
    --ink-3:#1d1d1d;
    --paper:#F5F5F5;
    --paper-2:#E8E8E3;
    --muted:#7a7a72;
    --muted-2:#9a9a90;
    --line:rgba(245,245,245,.10);
    --line-2:rgba(245,245,245,.18);
    --green:#00FF88;       /* phosphore */
    --green-ink:#00A852;   /* vert typographique sur clair */
    --green-dim:#0a3d23;
    --amber:#FFB454;       /* accent rare (warnings/sélection) */
    --red:#FF4A3D;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  html,body{background:var(--ink);color:var(--paper);font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{min-height:100vh;position:relative;overflow-x:hidden}
  ::selection{background:var(--green);color:var(--ink)}

  .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .mono-sm{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

  a{color:inherit;text-decoration:none}

  /* =========================================================
     CRT / SCANLINE BACKGROUND
     ========================================================= */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(0,255,136,.025) 0,
        rgba(0,255,136,.025) 1px,
        transparent 1px,
        transparent 3px);
    mix-blend-mode:screen;opacity:.6;
  }
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
  }
  .noise{
    position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation:noiseDrift 1.2s steps(2) infinite;
  }
  @keyframes noiseDrift{
    0%{transform:translate(0,0)}
    33%{transform:translate(-3px,2px)}
    66%{transform:translate(2px,-3px)}
    100%{transform:translate(0,0)}
  }

  /* Corner scanline guides */
  .corner{position:fixed;width:22px;height:22px;z-index:10;pointer-events:none;opacity:.45}
  .corner::before,.corner::after{content:"";position:absolute;background:var(--green)}
  .corner::before{width:100%;height:1px;top:0;left:0}
  .corner::after{width:1px;height:100%;top:0;left:0}
  .corner.tl{top:20px;left:20px}
  .corner.tr{top:20px;right:20px;transform:scaleX(-1)}
  .corner.bl{bottom:20px;left:20px;transform:scaleY(-1)}
  .corner.br{bottom:20px;right:20px;transform:scale(-1,-1)}

  /* =========================================================
     NAVBAR
     ========================================================= */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:20;
    display:flex;justify-content:space-between;align-items:center;
    padding:20px 40px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    background:linear-gradient(to bottom,rgba(10,10,10,.85),rgba(10,10,10,0));
    transition:background .3s, border-color .3s;
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    background:rgba(10,10,10,.9);
    border-bottom-color:var(--line);
  }
  .nav .brand{display:flex;align-items:center;gap:12px}
  .nav .brand .mark{width:32px;height:32px;border-radius:7px;overflow:hidden;flex-shrink:0}
  .nav .brand .mark svg{width:100%;height:100%;display:block}
  .nav .brand .bstack{display:flex;flex-direction:column;line-height:1;gap:2px}
  .nav .brand .b1{font-size:13px;font-weight:500;letter-spacing:-.02em}
  .nav .brand .b2{font-size:11px;font-weight:700;letter-spacing:-.01em;color:var(--green)}
  .nav .links{display:flex;align-items:center;gap:28px}
  .nav .links a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);transition:color .2s;position:relative;padding:4px 0}
  .nav .links a:hover{color:var(--paper)}
  .nav .links a::before{content:"[";opacity:0;transition:opacity .2s;margin-right:4px;color:var(--green)}
  .nav .links a::after{content:"]";opacity:0;transition:opacity .2s;margin-left:4px;color:var(--green)}
  .nav .links a:hover::before,.nav .links a:hover::after{opacity:1}
  .nav .cta{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    padding:9px 16px;border:1px solid var(--green);color:var(--green);
    transition:background .2s,color .2s;
    display:inline-flex;align-items:center;gap:8px;
  }
  .nav .cta:hover{background:var(--green);color:var(--ink)}
  .nav .cta .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s ease-in-out infinite}
  .nav .cta:hover .dot{background:var(--ink)}
  @keyframes pulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}

  /* =========================================================
     LAYOUT
     ========================================================= */
  .wrap{max-width:1280px;margin:0 auto;padding:0 40px;position:relative;z-index:3}

  section{position:relative;z-index:3}

  /* =========================================================
     HERO
     ========================================================= */
  .hero{
    min-height:100vh;min-height:100dvh;
    display:flex;align-items:center;
    padding:92px 0 40px;
    position:relative;
    overflow:hidden;
  }
  /* Hero grid bg */
  .hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:
      linear-gradient(to right, rgba(0,255,136,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0,255,136,.05) 1px, transparent 1px);
    background-size:80px 80px;
    mask-image:radial-gradient(ellipse at 30% 50%, #000 10%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse at 30% 50%, #000 10%, transparent 70%);
  }

  .hero .wrap{
    display:flex;flex-direction:column;gap:clamp(24px,4vh,48px);
  }
  .hero .left{max-width:1100px}
  .hero .left{position:relative;z-index:2}
  .hero .status{
    display:inline-flex;align-items:center;gap:10px;
    padding:6px 12px;border:1px solid var(--line-2);border-radius:20px;
    margin-bottom:28px;background:rgba(0,255,136,.04);
    animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) .1s both;
  }
  .hero .status .pulse{
    position:relative;width:8px;height:8px;border-radius:50%;background:var(--green);
    box-shadow:0 0 8px rgba(0,255,136,.8);
  }
  .hero .status .pulse::after{
    content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--green);
    animation:ring 1.8s ease-out infinite;
  }
  @keyframes ring{
    0%{transform:scale(.5);opacity:1}
    100%{transform:scale(1.8);opacity:0}
  }
  .hero .status .txt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}

  .hero h1{
    font-size:clamp(40px,6.2vw,84px);
    font-weight:500;letter-spacing:-.045em;line-height:.95;
    margin-bottom:clamp(18px,2.5vh,28px);
  }
  .hero h1 .line{display:block;overflow:hidden}
  .hero h1 .line > span{display:inline-block;animation:lineUp 1s cubic-bezier(.2,.8,.2,1) both}
  .hero h1 .line:nth-child(1) > span{animation-delay:.25s}
  .hero h1 .line:nth-child(2) > span{animation-delay:.4s}
  .hero h1 .line:nth-child(3) > span{animation-delay:.55s}
  @keyframes lineUp{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}
  .hero h1 .accent{
    color:var(--green);
    background:linear-gradient(90deg,var(--green) 0%,var(--green) 35%,#bfffd8 50%,var(--green) 65%,var(--green) 100%);
    background-size:200% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:lineUp 1s cubic-bezier(.2,.8,.2,1) .55s both, shimmer 5s ease-in-out 2s infinite;
    font-style:italic;font-weight:400;
  }
  @keyframes shimmer{0%,100%{background-position:100% 0}50%{background-position:-100% 0}}
  .hero h1 .cursor{
    display:inline-block;width:.5em;height:.92em;background:var(--green);
    vertical-align:-.1em;margin-left:8px;
    animation:caret 1.05s steps(1,end) infinite;
    box-shadow:0 0 12px rgba(0,255,136,.5);
  }
  @keyframes caret{50%{opacity:0}}

  .hero .sub{
    font-size:clamp(15px,1.4vw,18px);line-height:1.55;max-width:520px;
    color:#d4d4cf;font-weight:300;margin-bottom:clamp(20px,3vh,32px);
    animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) .9s both;
  }
  .hero .sub em{color:var(--green);font-style:normal;font-weight:500}
  .hero .sub code{font-family:'JetBrains Mono',monospace;font-size:.85em;color:var(--green);background:rgba(0,255,136,.06);padding:1px 6px;border:1px solid rgba(0,255,136,.2);border-radius:3px}

  .hero .cta-row{
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;
    animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) 1.1s both;
  }
  .btn-primary{
    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    padding:14px 22px;border:1px solid var(--green);background:var(--green);color:var(--ink);
    display:inline-flex;align-items:center;gap:12px;
    transition:all .25s;font-weight:500;
    position:relative;overflow:hidden;
  }
  .btn-primary::before{
    content:"";position:absolute;inset:0;background:var(--paper);
    transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .btn-primary > *{position:relative;z-index:1;transition:color .2s}
  .btn-primary:hover{border-color:var(--paper);color:var(--ink)}
  .btn-primary:hover::before{transform:translateY(0)}
  .btn-primary .arrow{font-size:14px;transition:transform .25s}
  .btn-primary:hover .arrow{transform:translateX(4px)}

  .btn-ghost{
    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted-2);display:inline-flex;align-items:center;gap:10px;
    transition:color .2s;padding:14px 0;
  }
  .btn-ghost:hover{color:var(--paper)}
  .btn-ghost .line-sm{width:24px;height:1px;background:currentColor;transition:width .25s}
  .btn-ghost:hover .line-sm{width:36px}

  .hero .meta-row{
    margin-top:clamp(24px,4vh,40px);display:flex;gap:40px;flex-wrap:wrap;
    padding-top:20px;border-top:1px solid var(--line);
    animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) 1.3s both;
  }
  .hero .meta-row .item{display:flex;flex-direction:column;gap:6px}
  .hero .meta-row .item .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .hero .meta-row .item .v{font-size:15px;letter-spacing:-.01em}
  .hero .meta-row .item .v .green{color:var(--green)}

  /* ===== Hero right : animated code + phone ===== */
  .hero-right{
    position:relative;z-index:2;
    display:flex;flex-direction:column;gap:20px;
    animation:fadeUp 1s cubic-bezier(.2,.7,.2,1) .6s both;
  }
  .hero-stack{
    position:relative;
    display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:stretch;
  }
  .hero-stack .term,.hero-stack .monitor{height:100%;display:flex;flex-direction:column}
  .hero-stack .term .term-body{flex:1}
  @media (max-width:900px){
    .hero-stack{grid-template-columns:1fr}
  }

  /* Terminal/code window */
  .term{
    background:#0d0d0d;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,136,.08), 0 0 40px -10px rgba(0,255,136,.15);
    position:relative;
  }
  .term::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(to bottom,rgba(0,255,136,.03) 0,rgba(0,255,136,.03) 1px,transparent 1px,transparent 4px);
  }
  .term-head{
    display:flex;align-items:center;gap:10px;padding:12px 14px;
    border-bottom:1px solid var(--line);background:#0a0a0a;
  }
  .term-head .dots{display:flex;gap:6px}
  .term-head .dots i{width:10px;height:10px;border-radius:50%;display:block}
  .term-head .dots i:nth-child(1){background:#ff5f56;opacity:.8}
  .term-head .dots i:nth-child(2){background:#ffbd2e;opacity:.8}
  .term-head .dots i:nth-child(3){background:#27c93f;opacity:.8}
  .term-head .path{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-left:8px}
  .term-head .path .green{color:var(--green)}
  .term-head .env{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px}
  .term-head .env::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s infinite}
  .term-body{
    padding:14px 16px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.6;
    color:#d4d4cf;min-height:240px;position:relative;
  }
  .term-body .row{display:flex;gap:16px;opacity:0;transform:translateY(4px);animation:codeLine .4s ease-out forwards}
  .term-body .ln{color:#444;user-select:none;width:18px;text-align:right;flex-shrink:0}
  .term-body .code{flex:1;white-space:pre;overflow:visible}
  @keyframes codeLine{to{opacity:1;transform:none}}
  .k-kw{color:#ff79c6}     /* keyword */
  .k-fn{color:#50fa7b}     /* function / component */
  .k-str{color:#f1fa8c}    /* string */
  .k-tag{color:#8be9fd}    /* jsx tag */
  .k-attr{color:#ffb86c}   /* attr */
  .k-num{color:#bd93f9}    /* number */
  .k-cmt{color:#6272a4;font-style:italic} /* comment */
  .k-var{color:#f8f8f2}
  .k-punct{color:#6272a4}
  .term-body .caret{
    display:inline-block;width:8px;height:14px;background:var(--green);
    vertical-align:-2px;margin-left:2px;animation:caret 1s steps(1,end) infinite;
    box-shadow:0 0 6px rgba(0,255,136,.6);
  }

  /* =========================================================
     MONITOR PANEL — replaces old phone mockup in hero
     looks like a live devtools / perf monitor
     ========================================================= */
  .monitor{
    position:relative;width:100%;margin-left:auto;
    background:#0d0d0d;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,136,.06), 0 0 50px -10px rgba(0,255,136,.12);
    display:flex;flex-direction:column;
  }
  .monitor::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:repeating-linear-gradient(to bottom,rgba(0,255,136,.025) 0,rgba(0,255,136,.025) 1px,transparent 1px,transparent 4px);
  }
  .mon-head{
    display:flex;align-items:center;gap:10px;padding:10px 14px;
    border-bottom:1px solid var(--line);background:#0a0a0a;position:relative;z-index:2;
  }
  .mon-head .tl{
    display:flex;align-items:center;gap:8px;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;
  }
  .mon-head .tl::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s infinite;
  }
  .mon-head .tl b{color:var(--paper);font-weight:500;letter-spacing:.06em}
  .mon-head .rt{
    margin-left:auto;display:flex;gap:14px;
    font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);
  }
  .mon-head .rt b{color:var(--green);font-weight:500}

  /* Big FPS readout */
  .mon-fps{
    padding:14px 16px 12px;position:relative;z-index:2;
    border-bottom:1px solid var(--line);
  }
  .mon-fps .row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
  .mon-fps .row .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
  .mon-fps .row .big{
    font-family:'JetBrains Mono',monospace;font-weight:500;font-size:44px;letter-spacing:-.02em;
    color:var(--green);line-height:1;
    text-shadow:0 0 16px rgba(0,255,136,.35);
  }
  .mon-fps .row .big .unit{font-size:14px;color:var(--muted-2);margin-left:4px;text-shadow:none}
  .mon-fps .row .delta{
    font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--green);
    background:rgba(0,255,136,.08);padding:3px 7px;border-radius:3px;
  }
  .mon-fps .spark{width:100%;height:40px;display:block}
  .mon-fps .spark .area{fill:url(#sparkGrad);opacity:.35}
  .mon-fps .spark .line{fill:none;stroke:var(--green);stroke-width:1.5}
  .mon-fps .spark .line{
    stroke-dasharray:600;stroke-dashoffset:600;
    animation:sparkDraw 3.5s cubic-bezier(.3,.7,.3,1) .8s forwards;
  }
  @keyframes sparkDraw{to{stroke-dashoffset:0}}
  .mon-fps .spark .pt{fill:var(--green);filter:drop-shadow(0 0 4px var(--green));opacity:0;animation:sparkPt .4s ease-out 4.2s forwards}
  @keyframes sparkPt{to{opacity:1}}

  /* Stat tiles row */
  .mon-stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    position:relative;z-index:2;
  }
  .mon-stats .tile{padding:12px 14px;background:#0d0d0d;display:flex;flex-direction:column;gap:4px}
  .mon-stats .tile .k{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
  .mon-stats .tile .v{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:500;color:var(--paper);letter-spacing:-.01em}
  .mon-stats .tile .v .g{color:var(--green);font-size:10px;margin-left:4px}
  .mon-stats .tile .bar{
    height:3px;background:rgba(255,255,255,.06);border-radius:2px;margin-top:2px;overflow:hidden;position:relative;
  }
  .mon-stats .tile .bar i{
    position:absolute;left:0;top:0;bottom:0;background:var(--green);border-radius:2px;
    width:0;animation:barFill 1.8s cubic-bezier(.3,.7,.3,1) 1.2s forwards;
  }
  .mon-stats .tile:nth-child(1) .bar i{--w:88%}
  .mon-stats .tile:nth-child(2) .bar i{--w:62%}
  .mon-stats .tile:nth-child(3) .bar i{--w:94%}
  @keyframes barFill{to{width:var(--w)}}

  /* Activity log */
  .mon-log{
    padding:12px 14px;position:relative;z-index:2;
    font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.6;
    display:flex;flex-direction:column;gap:4px;
    border-top:1px solid var(--line);
    min-height:100px;
  }
  .mon-log .line{display:flex;gap:10px;color:#a8a89e;opacity:0;transform:translateY(3px);animation:logIn .35s ease-out forwards}
  .mon-log .line .ts{color:var(--muted);flex-shrink:0}
  .mon-log .line .tag{color:var(--green);flex-shrink:0;font-weight:500}
  .mon-log .line.warn .tag{color:var(--amber)}
  .mon-log .line.info .tag{color:#8be9fd}
  @keyframes logIn{to{opacity:1;transform:none}}

  /* Bottom command row */
  .mon-foot{
    display:flex;align-items:center;gap:10px;padding:10px 14px;
    border-top:1px solid var(--line);background:#0a0a0a;position:relative;z-index:2;
    font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--paper);
  }
  .mon-foot .prompt{color:var(--green);font-weight:500}
  .mon-foot .cmd{color:var(--paper)}
  .mon-foot .cmd .arg{color:var(--amber)}
  .mon-foot .caret{
    display:inline-block;width:7px;height:13px;background:var(--green);vertical-align:-2px;margin-left:3px;
    animation:caret 1s steps(1,end) infinite;box-shadow:0 0 6px rgba(0,255,136,.5);
  }
  .mon-foot .meta{margin-left:auto;color:var(--muted);font-size:10px}

  @media (max-width:900px){
    .monitor{max-width:100%}
  }

  
  /* old phone/float-label rules removed */
  

  /* =========================================================
     MARQUEE (tech stack)
     ========================================================= */
  .marquee{
    padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    overflow:hidden;position:relative;background:rgba(0,0,0,.4);
  }
  .marquee::before,.marquee::after{
    content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
  }
  .marquee::before{left:0;background:linear-gradient(to right,var(--ink),transparent)}
  .marquee::after{right:0;background:linear-gradient(to left,var(--ink),transparent)}
  .marquee-track{
    display:flex;gap:48px;animation:scroll 35s linear infinite;white-space:nowrap;width:max-content;
  }
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .marquee-item{
    display:inline-flex;align-items:center;gap:12px;
    font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted-2);letter-spacing:.04em;
  }
  .marquee-item .sep{color:var(--green);opacity:.5}
  .marquee-item .val{color:var(--paper)}

  /* =========================================================
     SECTION HEADER SHARED
     ========================================================= */
  .sec-pad{padding:120px 0}
  .sec-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:64px;gap:32px;padding-bottom:20px;border-bottom:1px solid var(--line);
  }
  .sec-head .left-h{max-width:680px}
  .sec-head .label{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);
    margin-bottom:16px;display:flex;align-items:center;gap:10px;
  }
  .sec-head .label::before{content:"";width:24px;height:1px;background:var(--green)}
  .sec-head h2{
    font-size:clamp(34px,4.5vw,56px);font-weight:500;letter-spacing:-.035em;line-height:1.02;
  }
  .sec-head h2 em{font-style:italic;font-weight:400;color:var(--green)}
  .sec-head .num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.1em;white-space:nowrap}

  /* =========================================================
     SERVICES
     ========================================================= */
  .services{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
  .svc{
    grid-column:span 4;
    padding:32px;border:1px solid var(--line);background:#0d0d0d;
    position:relative;overflow:hidden;transition:border-color .3s, background .3s;
    min-height:340px;display:flex;flex-direction:column;
  }
  .svc::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--green),transparent);
    transform:translateX(-100%);transition:transform .6s;
  }
  .svc:hover{border-color:rgba(0,255,136,.3);background:#101010}
  .svc:hover::before{transform:translateX(100%)}
  .svc.wide{grid-column:span 8}
  .svc.full{grid-column:span 12}
  .svc.tall{min-height:400px}
  .svc .svc-num{
    font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.1em;
    margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;
  }
  .svc .svc-num .tag{
    font-size:10px;padding:3px 8px;border:1px solid var(--line-2);border-radius:10px;
    color:var(--green);
  }
  .svc h3{
    font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px;
  }
  .svc h3 em{font-style:italic;color:var(--green);font-weight:400}
  .svc p{font-size:14.5px;line-height:1.55;color:#c4c4bf;font-weight:300;max-width:440px}
  .svc .stack{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:6px}
  .svc .chip{
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;
    padding:4px 8px;border:1px solid var(--line-2);color:var(--muted-2);
  }
  .svc .chip.green{color:var(--green);border-color:rgba(0,255,136,.3)}

  /* Service illustrations */
  .svc .illus{margin-top:20px;position:relative}

  /* Illus : React Native */
  .illus-rn{
    height:140px;border:1px solid var(--line);background:#050505;
    display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  }
  .illus-rn .atom{
    width:100px;height:100px;position:relative;
  }
  .illus-rn .atom .core{
    position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;
    background:var(--green);transform:translate(-50%,-50%);
    box-shadow:0 0 10px var(--green);
  }
  .illus-rn .atom .orb{
    position:absolute;inset:0;border:1px solid var(--green);border-radius:50%;
    opacity:.6;
  }
  .illus-rn .atom .orb:nth-child(2){transform:rotateZ(60deg) scaleY(.4);animation:orb1 4s linear infinite}
  .illus-rn .atom .orb:nth-child(3){transform:rotateZ(-60deg) scaleY(.4);animation:orb2 4s linear infinite}
  .illus-rn .atom .orb:nth-child(4){transform:rotateZ(0deg) scaleY(.4);animation:orb3 4s linear infinite}
  @keyframes orb1{from{transform:rotateZ(60deg) scaleY(.4)}to{transform:rotateZ(420deg) scaleY(.4)}}
  @keyframes orb2{from{transform:rotateZ(-60deg) scaleY(.4)}to{transform:rotateZ(300deg) scaleY(.4)}}
  @keyframes orb3{from{transform:rotateZ(0deg) scaleY(.4)}to{transform:rotateZ(360deg) scaleY(.4)}}

  /* Illus : multi-platform */
  .illus-plat{
    height:140px;border:1px solid var(--line);background:#050505;
    display:flex;align-items:center;justify-content:center;gap:18px;position:relative;overflow:hidden;
  }
  .illus-plat .mini-phone{
    width:50px;height:90px;border-radius:8px;background:#0a0a0a;border:1px solid var(--line-2);
    padding:4px;display:flex;flex-direction:column;gap:3px;position:relative;
  }
  .illus-plat .mini-phone::before{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);width:14px;height:2px;border-radius:1px;background:#333}
  .illus-plat .mini-phone .bar{height:3px;background:rgba(255,255,255,.08);border-radius:1px;margin-top:8px}
  .illus-plat .mini-phone .bar:nth-child(2){width:80%}
  .illus-plat .mini-phone .bar:nth-child(3){width:60%}
  .illus-plat .mini-phone .dot{width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:auto;align-self:center;margin-bottom:4px;box-shadow:0 0 6px var(--green)}
  .illus-plat .arrow-row{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--green);font-family:'JetBrains Mono',monospace;font-size:10px}
  .illus-plat .arrow-row .spin{animation:spin 3s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Illus : MVP speed */
  .illus-mvp{
    height:140px;border:1px solid var(--line);background:#050505;
    padding:16px;position:relative;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;gap:8px;
  }
  .illus-mvp .bar-row{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2)}
  .illus-mvp .bar-row .name{width:52px;flex-shrink:0}
  .illus-mvp .bar-row .track{flex:1;height:4px;background:#141414;border-radius:2px;overflow:hidden;position:relative}
  .illus-mvp .bar-row .fill{height:100%;background:var(--green);box-shadow:0 0 6px var(--green);border-radius:2px;width:0;animation:fillIn 2s cubic-bezier(.3,.7,.3,1) forwards}
  .illus-mvp .bar-row:nth-child(1) .fill{animation-delay:.2s;--w:92%}
  .illus-mvp .bar-row:nth-child(2) .fill{animation-delay:.4s;--w:78%}
  .illus-mvp .bar-row:nth-child(3) .fill{animation-delay:.6s;--w:65%}
  .illus-mvp .bar-row:nth-child(4) .fill{animation-delay:.8s;--w:88%}
  @keyframes fillIn{to{width:var(--w)}}
  .illus-mvp .bar-row .pct{width:36px;color:var(--green);text-align:right}

  /* Illus : Animations */
  .illus-anim{
    height:140px;border:1px solid var(--line);background:#050505;
    position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .illus-anim .wave{
    display:flex;align-items:center;gap:3px;height:60px;
  }
  .illus-anim .wave span{
    display:block;width:4px;background:var(--green);border-radius:2px;
    animation:wave 1.4s ease-in-out infinite;
    box-shadow:0 0 6px rgba(0,255,136,.5);
  }
  .illus-anim .wave span:nth-child(1){height:20%;animation-delay:0s}
  .illus-anim .wave span:nth-child(2){height:40%;animation-delay:.1s}
  .illus-anim .wave span:nth-child(3){height:60%;animation-delay:.2s}
  .illus-anim .wave span:nth-child(4){height:80%;animation-delay:.3s}
  .illus-anim .wave span:nth-child(5){height:100%;animation-delay:.4s}
  .illus-anim .wave span:nth-child(6){height:80%;animation-delay:.5s}
  .illus-anim .wave span:nth-child(7){height:60%;animation-delay:.6s}
  .illus-anim .wave span:nth-child(8){height:40%;animation-delay:.7s}
  .illus-anim .wave span:nth-child(9){height:20%;animation-delay:.8s}
  .illus-anim .wave span:nth-child(10){height:35%;animation-delay:.9s}
  .illus-anim .wave span:nth-child(11){height:55%;animation-delay:1s}
  .illus-anim .wave span:nth-child(12){height:75%;animation-delay:1.1s}
  .illus-anim .wave span:nth-child(13){height:55%;animation-delay:1.2s}
  .illus-anim .wave span:nth-child(14){height:35%;animation-delay:1.3s}
  .illus-anim .wave span:nth-child(15){height:20%;animation-delay:1.4s}
  @keyframes wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

  /* Illus : Bordeaux map dots */
  .illus-map{
    height:140px;border:1px solid var(--line);background:#050505;
    padding:14px;position:relative;overflow:hidden;
  }
  .illus-map svg{width:100%;height:100%}

  /* =========================================================
     PROCESS
     ========================================================= */
  .process{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    position:relative;
  }
  .proc{
    padding:32px 24px 32px 0;position:relative;
    border-top:1px solid var(--line);
  }
  .proc::after{
    content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--green);
    transition:width .6s cubic-bezier(.2,.7,.2,1);
  }
  .proc.visible::after{width:100%}
  .proc .num{
    font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--green);
    letter-spacing:.14em;margin-bottom:18px;display:flex;align-items:center;gap:8px;
  }
  .proc .num::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
  .proc h4{font-size:22px;font-weight:500;letter-spacing:-.02em;margin-bottom:14px;line-height:1.15}
  .proc p{font-size:14px;line-height:1.55;color:#c4c4bf;font-weight:300;margin-bottom:16px}
  .proc .duration{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:auto}

  /* =========================================================
     PROJECTS
     ========================================================= */
  .projects{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
  .proj{
    grid-column:span 6;border:1px solid var(--line);background:#0d0d0d;
    overflow:hidden;display:flex;flex-direction:column;position:relative;
    transition:border-color .3s;
  }
  .proj.small{grid-column:span 4}
  .proj.small-2{grid-column:span 8}
  .proj:hover{border-color:rgba(0,255,136,.3)}
  .proj .canvas{
    aspect-ratio:16/10;position:relative;overflow:hidden;
    background:
      radial-gradient(circle at 30% 30%, rgba(0,255,136,.08), transparent 60%),
      linear-gradient(135deg, #0a0a0a 0%, #111 100%);
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--line);
  }
  .proj .canvas::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(to bottom,rgba(0,255,136,.03) 0,rgba(0,255,136,.03) 1px,transparent 1px,transparent 4px);
    opacity:.5;
  }
  .proj .tag-float{
    position:absolute;top:16px;left:16px;z-index:2;
    font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--green);
    letter-spacing:.1em;text-transform:uppercase;
    padding:5px 9px;background:rgba(0,0,0,.7);border:1px solid rgba(0,255,136,.3);
    display:flex;align-items:center;gap:6px;
  }
  .proj .tag-float::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green)}
  .proj .status-float{
    position:absolute;top:16px;right:16px;z-index:2;
    font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2);
    letter-spacing:.08em;text-transform:uppercase;
  }

  .proj .foot{
    padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;
  }
  .proj .foot .meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
  .proj .foot .client{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .proj .foot .year{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.08em}
  .proj .foot h4{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
  .proj .foot h4 em{color:var(--green);font-style:italic;font-weight:400}
  .proj .foot .desc{font-size:13.5px;line-height:1.55;color:#b0b0aa;font-weight:300;margin-top:4px}
  .proj .foot .tech{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
  .proj .foot .tech .t{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2);letter-spacing:.06em;padding:3px 7px;border:1px solid var(--line-2)}

  /* Lumi carousel */
  .lumi-shots{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
  .lumi-phone{
    width:210px;aspect-ratio:1206/2622;background:#050505;border:1px solid #2a2a2a;
    border-radius:38px;padding:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7), 0 0 40px -10px rgba(0,255,136,.12);
    position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .lumi-phone:nth-child(1){transform:translateY(20px) rotate(-3deg)}
  .lumi-phone:nth-child(2){transform:translateY(-10px) rotate(-1deg)}
  .lumi-phone:nth-child(3){transform:translateY(-10px) rotate(1deg)}
  .lumi-phone:nth-child(4){transform:translateY(20px) rotate(3deg)}
  .lumi-phone:hover{transform:translateY(-6px) rotate(0deg);z-index:3}
  .lumi-phone img{width:100%;height:100%;object-fit:cover;border-radius:32px;display:block}
  @media (max-width:900px){
    .lumi-phone{width:150px}
  }

  /* =========================================================
     DRESSEDUPS — variant fan, 3 phones, accent jaune acide
     ========================================================= */
  .du-canvas{
    background:
      radial-gradient(ellipse 60% 50% at 50% 100%, rgba(238,255,0,.10), transparent 65%),
      radial-gradient(ellipse 80% 70% at 50% 0%, rgba(0,0,0,.4), transparent 70%),
      linear-gradient(180deg,#0e0e0e 0%, #050505 100%) !important;
  }
  .du-canvas::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(238,255,0,.5) 0, transparent 1px),
      radial-gradient(circle at 80% 70%, rgba(238,255,0,.5) 0, transparent 1px),
      radial-gradient(circle at 50% 50%, rgba(238,255,0,.5) 0, transparent 1px);
    background-size:60px 60px,80px 80px,40px 40px;
  }
  .du-shots{
    display:flex;gap:20px;align-items:center;justify-content:center;position:relative;z-index:2;
    padding:20px 0;perspective:1400px;
  }
  .du-phone{
    width:240px;aspect-ratio:390/844;background:#050505;border:1px solid #2a2a2a;
    border-radius:42px;padding:6px;
    box-shadow:
      0 40px 80px -20px rgba(0,0,0,.8),
      0 0 60px -10px rgba(238,255,0,.18),
      inset 0 0 0 1px rgba(255,255,255,.04);
    position:relative;overflow:hidden;
    transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s cubic-bezier(.2,.7,.2,1);
  }
  .du-phone::after{
    content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
    width:90px;height:22px;background:#050505;border-radius:0 0 14px 14px;z-index:3;
  }
  .du-phone:nth-child(1){transform:translateY(30px) rotate(-6deg) scale(.94)}
  .du-phone:nth-child(2){transform:translateY(-6px) rotate(0deg) scale(1.04);z-index:2}
  .du-phone:nth-child(3){transform:translateY(30px) rotate(6deg) scale(.94)}
  .du-phone:hover{
    transform:translateY(-12px) rotate(0deg) scale(1.08);z-index:5;
    box-shadow:
      0 50px 100px -20px rgba(0,0,0,.9),
      0 0 80px -10px rgba(238,255,0,.35);
  }
  .du-phone img{width:100%;height:100%;object-fit:cover;border-radius:36px;display:block}

  /* Floating tag + status override pour accent jaune */
  .du-canvas .tag-float{background:rgba(0,0,0,.7) !important;border-color:rgba(238,255,0,.4) !important;color:#EEFF00 !important}
  .du-canvas .status-float{color:#EEFF00 !important}

  /* Yellow accent pill/tech chip overrides inside dressedups foot */
  .du-foot .meta .client{color:#EEFF00 !important}

  /* Floating stat bubbles — un peu de wow visuel */
  .du-bubbles{
    position:absolute;inset:0;pointer-events:none;z-index:1;
  }
  .du-bubble{
    position:absolute;display:flex;align-items:center;gap:8px;
    padding:8px 12px;background:rgba(0,0,0,.7);border:1px solid rgba(238,255,0,.25);
    border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;
    color:var(--paper);text-transform:uppercase;
    animation:duFloat 6s ease-in-out infinite;
  }
  .du-bubble .dot{width:6px;height:6px;border-radius:50%;background:#EEFF00;box-shadow:0 0 8px #EEFF00}
  .du-bubble.b1{top:10%;left:6%;animation-delay:0s}
  .du-bubble.b2{top:18%;right:8%;animation-delay:-2s}
  .du-bubble.b3{bottom:14%;left:10%;animation-delay:-4s}
  .du-bubble.b4{bottom:20%;right:6%;animation-delay:-3s}
  @keyframes duFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
  }

  @media (max-width:900px){
    .du-phone{width:150px}
    .du-phone:nth-child(1),.du-phone:nth-child(3){display:none}
    .du-bubble{display:none}
  }

  /* =========================================================
     SHOWCASE GÉNÉRIQUE — 4 phones, accent piloté par --accent
     (utilisé par Ash et Case 1888)
     ========================================================= */
  .shots-4{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
  .shot-phone{
    --glow:rgba(0,255,136,.12);
    width:186px;aspect-ratio:1206/2622;background:#050505;border:1px solid #2a2a2a;
    border-radius:36px;padding:6px;position:relative;overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.75), 0 0 44px -10px var(--glow);
    transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1);
  }
  .shot-phone:nth-child(1){transform:translateY(22px) rotate(-3deg)}
  .shot-phone:nth-child(2){transform:translateY(-10px) rotate(-1deg)}
  .shot-phone:nth-child(3){transform:translateY(-10px) rotate(1deg)}
  .shot-phone:nth-child(4){transform:translateY(22px) rotate(3deg)}
  .shot-phone:hover{transform:translateY(-8px) rotate(0deg) scale(1.03);z-index:3;box-shadow:0 46px 90px -20px rgba(0,0,0,.9), 0 0 70px -10px var(--glow)}
  /* background + typo discrète : si le screenshot n'est pas encore livré,
     l'emplacement reste un panneau sombre lisible plutôt qu'une image cassée */
  .shot-phone img{
    width:100%;height:100%;object-fit:cover;border-radius:30px;display:block;
    background:#0f0f12;color:var(--muted);
    font-family:'JetBrains Mono',monospace;font-size:9px;line-height:1.5;text-align:center;
  }

  /* Bubbles génériques (reprend le float de dressedups) */
  .bub-wrap{position:absolute;inset:0;pointer-events:none;z-index:1}
  .bub{
    position:absolute;display:flex;align-items:center;gap:8px;
    padding:8px 12px;background:rgba(0,0,0,.7);border:1px solid var(--accent-dim);
    border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;
    color:var(--paper);text-transform:uppercase;
    animation:duFloat 6s ease-in-out infinite;
  }
  .bub .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
  .bub.b1{top:7%;left:1%;animation-delay:0s}
  .bub.b2{top:14%;right:1%;animation-delay:-2s}
  .bub.b3{bottom:11%;left:1%;animation-delay:-4s}
  .bub.b4{bottom:18%;right:1%;animation-delay:-3s}

  /* --- Ash : indigo électrique --- */
  .ash-canvas{
    --accent:#9D91FF; --accent-dim:rgba(157,145,255,.25); --glow:rgba(107,92,255,.30);
    background:
      radial-gradient(ellipse 60% 50% at 50% 100%, rgba(77,60,255,.16), transparent 65%),
      radial-gradient(ellipse 80% 70% at 50% 0%, rgba(0,0,0,.45), transparent 70%),
      linear-gradient(180deg,#0d0d12 0%, #050505 100%) !important;
  }
  .ash-canvas .tag-float{background:rgba(0,0,0,.7) !important;border-color:rgba(157,145,255,.4) !important;color:#9D91FF !important}
  .ash-canvas .status-float{color:#9D91FF !important}
  .ash-foot .meta .client{color:#9D91FF !important}

  /* --- Case 1888 : or victorien --- */
  .c88-canvas{
    --accent:#C5A059; --accent-dim:rgba(197,160,89,.28); --glow:rgba(197,160,89,.26);
    background:
      radial-gradient(ellipse 60% 50% at 50% 100%, rgba(197,160,89,.14), transparent 65%),
      radial-gradient(ellipse 70% 60% at 50% 10%, rgba(139,0,0,.10), transparent 70%),
      linear-gradient(180deg,#121010 0%, #050404 100%) !important;
  }
  .c88-canvas .tag-float{background:rgba(0,0,0,.7) !important;border-color:rgba(197,160,89,.45) !important;color:#C5A059 !important}
  .c88-canvas .status-float{color:#C5A059 !important}

  /* la pastille du tag suit l'accent de la carte (elle était figée en vert) */
  .ash-canvas .tag-float::before,
  .c88-canvas .tag-float::before{background:var(--accent);box-shadow:0 0 5px var(--accent)}
  .du-canvas .tag-float::before{background:#EEFF00;box-shadow:0 0 5px #EEFF00}
  .c88-foot .meta .client{color:#C5A059 !important}

  @media (max-width:900px){
    .shots-4{gap:16px}
    .shot-phone{width:145px}
    .bub{display:none}
  }

  /* =========================================================
     FEATURED BIG BLOCK (manifesto)
     ========================================================= */
  .manifesto{
    border:1px solid var(--line);padding:72px 56px;background:
      radial-gradient(circle at 80% 20%, rgba(0,255,136,.06), transparent 60%),
      #0a0a0a;
    position:relative;overflow:hidden;margin-top:40px;
  }
  .manifesto::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(to bottom,rgba(0,255,136,.02) 0,rgba(0,255,136,.02) 1px,transparent 1px,transparent 4px);
  }
  .manifesto .mlabel{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);
    margin-bottom:32px;
  }
  .manifesto q{
    display:block;font-size:clamp(28px,3.4vw,44px);font-weight:300;letter-spacing:-.025em;line-height:1.2;
    max-width:900px;quotes:none;
    text-wrap:balance;
  }
  .manifesto q::before,.manifesto q::after{content:""}
  .manifesto q em{color:var(--green);font-style:italic;font-weight:400}
  .manifesto .sig{
    margin-top:40px;display:flex;justify-content:space-between;align-items:center;
    padding-top:24px;border-top:1px solid var(--line);
  }
  .manifesto .sig .by{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase}
  .manifesto .sig .by .green{color:var(--green)}

  /* =========================================================
     CONTACT
     ========================================================= */
  .contact-sec{padding:140px 0 120px;position:relative}
  .contact-sec .contact-wrap{
    display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start;
  }
  .contact-sec .label{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);
    margin-bottom:24px;display:flex;align-items:center;gap:10px;
  }
  .contact-sec .label::before{content:"";width:24px;height:1px;background:var(--green)}
  .contact-sec h2{
    font-size:clamp(40px,5vw,68px);font-weight:500;letter-spacing:-.035em;line-height:1;
    margin-bottom:32px;
  }
  .contact-sec h2 em{color:var(--green);font-style:italic;font-weight:400}
  .contact-sec .big-email{
    font-family:'JetBrains Mono',monospace;font-size:clamp(22px,2.8vw,32px);
    color:var(--paper);font-weight:500;letter-spacing:-.01em;
    display:inline-flex;align-items:baseline;gap:2px;margin-bottom:32px;
    position:relative;
  }
  .contact-sec .big-email .prompt{color:var(--green);margin-right:12px}
  .contact-sec .big-email a{
    background-image:linear-gradient(var(--green),var(--green));
    background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size .4s cubic-bezier(.2,.7,.2,1);padding:2px 0;
  }
  .contact-sec .big-email a:hover{background-size:100% 2px}
  .contact-sec .big-email a .at{color:var(--green)}
  .contact-sec .big-email::after{
    content:"";display:inline-block;width:.55em;height:1em;background:var(--green);
    margin-left:4px;animation:caret 1s steps(1,end) infinite;box-shadow:0 0 6px rgba(0,255,136,.5);vertical-align:-.05em;
  }
  .contact-sec .sub{font-size:16px;line-height:1.6;color:#c4c4bf;font-weight:300;max-width:480px}

  .contact-side{
    border:1px solid var(--line);background:#0a0a0a;padding:32px;
    display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden;
  }
  .contact-side::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(to bottom,rgba(0,255,136,.02) 0,rgba(0,255,136,.02) 1px,transparent 1px,transparent 4px);
  }
  .contact-side .csh{
    display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line);
  }
  .contact-side .csh .t{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--green);text-transform:uppercase}
  .contact-side .csh .st{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px}
  .contact-side .csh .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s infinite}
  .contact-side .item{display:flex;flex-direction:column;gap:6px}
  .contact-side .item .k{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
  .contact-side .item .v{font-size:15px;letter-spacing:-.005em;color:var(--paper)}
  .contact-side .item .v .green{color:var(--green)}

  /* =========================================================
     FOOTER
     ========================================================= */
  footer.site-foot{
    border-top:1px solid var(--line);padding:40px 0;position:relative;z-index:3;
  }
  footer.site-foot .wrap{
    display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  }
  footer.site-foot .col{display:flex;flex-direction:column;gap:6px}
  footer.site-foot .col.right{text-align:right}
  footer.site-foot .col.right .links{display:flex;gap:18px;justify-content:flex-end}
  footer.site-foot a{color:var(--muted-2);transition:color .2s}
  footer.site-foot a:hover{color:var(--green)}

  /* =========================================================
     REVEAL ON SCROLL
     ========================================================= */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.visible{opacity:1;transform:none}
  .reveal.d1{transition-delay:.1s}
  .reveal.d2{transition-delay:.2s}
  .reveal.d3{transition-delay:.3s}
  .reveal.d4{transition-delay:.4s}

  @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width:1024px){
    .hero .wrap{grid-template-columns:1fr;gap:56px}
    .hero-stack{grid-template-columns:1fr;gap:40px}
    .phone{transform:none;margin:0 auto}
    .services .svc, .services .svc.wide, .services .svc.full{grid-column:span 12}
    .proj, .proj.small, .proj.small-2{grid-column:span 12}
    .process{grid-template-columns:repeat(2,1fr)}
    .contact-sec .contact-wrap{grid-template-columns:1fr;gap:40px}
  }
  @media (max-width:640px){
    body{padding:0}
    .wrap{padding:0 20px}
    .nav{padding:16px 20px}
    .nav .links{display:none}
    .corner{display:none}
    .hero{padding:100px 0 60px}
    .sec-pad{padding:80px 0}
    .sec-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:40px}
    .process{grid-template-columns:1fr}
    .manifesto{padding:40px 24px}
  }

  /* =========================================================
     FAQ
     ========================================================= */
  .faq{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line);padding:0}
  .faq summary{
    list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:flex-start;gap:14px;
    font-size:16px;font-weight:400;letter-spacing:-.01em;line-height:1.35;color:var(--paper);
    transition:color .3s ease;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--green)}
  .faq summary::before{
    content:"+";font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1.35;
    color:var(--green);flex:0 0 auto;transition:transform .3s ease;
  }
  .faq details[open] summary::before{content:"−"}
  .faq details[open] summary{color:var(--green)}
  .faq .answer{padding:0 0 24px 28px;font-size:14px;line-height:1.65;color:#b0b0aa;font-weight:300}
  .faq .answer a{color:var(--green);border-bottom:1px solid rgba(0,255,136,.3)}
  @media (max-width:900px){
    .faq{grid-template-columns:1fr;gap:0}
    /* sur mobile le tag et le statut se chevauchaient en haut de carte : on les empile */
    .proj .tag-float{font-size:9px;padding:4px 7px;letter-spacing:.08em}
    .proj .status-float{top:auto;bottom:14px;right:14px;left:auto;font-size:9px}
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  }

/* =========================================================
   PAGES INTÉRIEURES — fil d'ariane, contenu éditorial, CTA
   ========================================================= */
.page-head{padding:150px 0 0}
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.crumb a,.crumb span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumb a:hover{color:var(--green)}
.crumb .sep{opacity:.4}
.crumb .here{color:var(--paper)}

.page-head h1{
  font-size:clamp(34px,5.2vw,62px);font-weight:500;letter-spacing:-.035em;line-height:1.04;
  max-width:16ch;
}
.page-head h1 em{color:var(--green);font-style:italic;font-weight:400}
.page-head .chapo{
  margin-top:24px;max-width:70ch;font-size:17px;line-height:1.6;color:#b8b8b2;font-weight:300;
}
.page-head .chapo strong{color:var(--paper);font-weight:400}

.prose{max-width:74ch}
.prose h2{
  font-size:clamp(24px,3vw,34px);font-weight:500;letter-spacing:-.025em;line-height:1.15;
  margin:64px 0 18px;
}
.prose h2:first-child{margin-top:0}
.prose h2 em{color:var(--green);font-style:italic;font-weight:400}
.prose h3{font-size:19px;font-weight:500;letter-spacing:-.01em;margin:36px 0 10px;color:var(--paper)}
.prose p{font-size:15px;line-height:1.72;color:#b0b0aa;font-weight:300;margin-bottom:16px}
.prose p strong{color:var(--paper);font-weight:400}
.prose a{color:var(--green);border-bottom:1px solid rgba(0,255,136,.3)}
.prose a:hover{border-bottom-color:var(--green)}
.prose ul{list-style:none;margin:0 0 20px;padding:0}
.prose ul li{
  position:relative;padding-left:22px;margin-bottom:11px;
  font-size:15px;line-height:1.65;color:#b0b0aa;font-weight:300;
}
.prose ul li::before{
  content:"—";position:absolute;left:0;top:0;color:var(--green);
  font-family:'JetBrains Mono',monospace;font-size:13px;
}
.prose ul li strong{color:var(--paper);font-weight:400}
.prose .note{
  border-left:2px solid var(--green);padding:14px 0 14px 20px;margin:28px 0;
  font-size:14.5px;line-height:1.65;color:#b8b8b2;background:rgba(0,255,136,.03);
}

/* Grille de cartes "chiffres / points clés" */
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:36px 0}
.keys .key{background:#0d0d0d;padding:26px 22px}
.keys .key .n{font-size:26px;font-weight:500;letter-spacing:-.03em;color:var(--green);display:block;margin-bottom:6px}
.keys .key .l{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.keys .key p{font-size:13px;line-height:1.55;color:#a0a09a;font-weight:300;margin:0}

/* Bandeau de liens vers les autres pages */
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.next a{
  border:1px solid var(--line);padding:24px 22px;background:#0d0d0d;
  display:flex;flex-direction:column;gap:8px;transition:border-color .3s ease,background .3s ease;
}
.next a:hover{border-color:var(--line-2);background:#111}
.next a .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.next a .t{font-size:16px;font-weight:500;letter-spacing:-.015em;color:var(--paper);line-height:1.25}
.next a .d{font-size:13px;line-height:1.55;color:var(--muted-2);font-weight:300}

/* Bandeau CTA de bas de page */
.cta-band{
  border:1px solid var(--line);background:
    radial-gradient(circle at 80% 20%, rgba(0,255,136,.07), transparent 60%), #0a0a0a;
  padding:52px 48px;margin-top:72px;display:flex;justify-content:space-between;
  align-items:center;gap:32px;flex-wrap:wrap;
}
.cta-band h2{font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.2;margin:0}
.cta-band h2 em{color:var(--green);font-style:italic;font-weight:400}
.cta-band p{font-size:14px;color:var(--muted-2);font-weight:300;margin:8px 0 0;max-width:52ch;line-height:1.6}

@media (max-width:900px){
  .page-head{padding:120px 0 0}
  .keys,.next{grid-template-columns:1fr}
  .cta-band{padding:36px 24px}
  .prose h2{margin-top:48px}
}

/* Titres de cartes projet devenus cliquables vers leur étude de cas */
.proj .foot h4 a{display:inline-block;transition:color .3s ease}
.proj .foot h4 a:hover{color:var(--green)}
.proj .foot h4 a:hover em{opacity:.75}

/* Plan de site dans le footer — évite les pages orphelines */
footer.site-foot .wrap{align-items:flex-start}
footer.site-foot .col.nav-col{gap:9px;align-items:flex-start}
footer.site-foot .col.nav-col .ttl{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px;
}
footer.site-foot .col.nav-col a{font-size:13px;font-weight:300;color:#a8a8a2}
footer.site-foot .col.right{margin-left:auto}
@media (max-width:900px){
  footer.site-foot .wrap{gap:32px}
  footer.site-foot .col.right{margin-left:0;text-align:left}
  footer.site-foot .col.right .links{justify-content:flex-start}
}