:root{
      --bg:#0a0b0d; --bg2:#0f1114; --surf:#141719; --surf2:#181c20;
      --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
      --wht:#f4f6f7; --mut:#9aa2ab; --mut2:#6f7780;
      --acc:#ff7a1a; --acc2:#ff9647; --accdk:#c95c07;
      --disp:'Space Grotesk',system-ui,sans-serif;
      --body:'IBM Plex Sans',system-ui,sans-serif;
      --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--wht);font-family:var(--body);
      -webkit-font-smoothing:antialiased;line-height:1.6}
    a{color:var(--acc);text-decoration:none} a:hover{color:var(--acc2)}
    /* entrance animations */
    .reveal{opacity:0;transform:translateY(24px);
      transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
    .reveal.in{opacity:1;transform:none}
    @keyframes nxpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.45}}
    .dot{animation:nxpulse 2.2s ease-in-out infinite}
    @property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
    .card,.sbox{transition:border-color .25s,transform .25s,box-shadow .3s}
    /* luminous rotating border on hover */
    .card::before,.sbox::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
      background:conic-gradient(from var(--ang,0deg),transparent 0 58%,var(--acc2) 72%,#fff 78%,var(--acc) 84%,transparent 92% 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;
      opacity:0;transition:opacity .3s;pointer-events:none;z-index:3}
    .card:hover::before,.sbox:hover::before{opacity:1;animation:nxspin 2.6s linear infinite}
    @keyframes nxspin{to{--ang:360deg}}
    @media (prefers-reduced-motion:reduce){.card:hover::before,.sbox:hover::before{animation:none}}
    @media (prefers-reduced-motion:reduce){
      .reveal{opacity:1;transform:none;transition:none}.dot{animation:none}}
    .wrap{max-width:1160px;margin:0 auto;padding:0 32px}
    h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.1;margin:0}
    .eyebrow{font-family:var(--disp);font-weight:600;letter-spacing:.18em;
      text-transform:uppercase;font-size:12px;color:var(--acc)}
    .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);
      font-weight:600;font-size:15px;padding:13px 22px;border-radius:8px;
      background:var(--acc);color:#0a0b0d;border:1px solid var(--acc);cursor:pointer;
      transition:.18s;white-space:nowrap}
    .btn:hover{background:var(--acc2);color:#0a0b0d}
    .btn.ghost{background:transparent;color:var(--wht);border-color:var(--line2)}
    .btn.ghost:hover{border-color:var(--acc);color:var(--acc)}
    .tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
      font-family:var(--disp);font-weight:500;color:var(--mut);
      border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--surf)}
    .dot{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}

    /* NAV */
    .nav{position:sticky;top:0;z-index:20;background:rgba(10,11,13,.82);
      backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
    .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:28px}
    .nav .menu{margin-left:8px}
    .logo{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
    .logo b{color:var(--acc)}
    .menu{display:flex;gap:30px;list-style:none;margin:0;padding:0;
      font-family:var(--disp);font-weight:500;font-size:15px}
    .menu a{color:var(--wht)} .menu a:hover{color:var(--acc)}

    /* HERO */
    .hero{position:relative;overflow:hidden;min-height:680px;display:flex;align-items:center;
      background:radial-gradient(900px 620px at 72% 42%,rgba(255,122,26,.10),transparent 62%),linear-gradient(180deg,#0b0c10,#090a0c)}
    .hero .globe{position:absolute;right:-70px;top:50%;transform:translateY(-50%);
      height:128%;width:auto;pointer-events:none;user-select:none}
    .hero .veil{position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,#090a0c 30%,rgba(9,10,12,.62) 52%,rgba(9,10,12,0) 74%)}
    .hero .wrap{position:relative;padding-top:120px;padding-bottom:120px}
    .hero .col{max-width:600px}
    .hero h1{font-size:60px;letter-spacing:-.025em;margin:22px 0 0}
    .hero h1 span{color:var(--acc)}
    .hero p.lead{font-size:18px;color:var(--mut);max-width:520px;margin:22px 0 0}
    .hero .cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
    .hero .stats{display:flex;gap:34px;margin-top:44px}
    .stat b{font-family:var(--disp);font-size:30px;color:var(--wht);display:block;line-height:1}
    .stat span{font-size:13px;color:var(--mut2)}
    .term{background:linear-gradient(180deg,var(--surf2),var(--surf));
      border:1px solid var(--line2);border-radius:14px;overflow:hidden;
      box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
    .term .bar{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.25)}
    .term .bar i{width:11px;height:11px;border-radius:50%;background:#2c3138;display:block}
    .term .bar i.o{background:var(--acc)}
    .term .bar span{margin-left:8px;font-family:var(--disp);font-size:12.5px;color:var(--mut2)}
    .term .body{padding:20px 20px 24px;font-family:'IBM Plex Sans';font-size:13.5px;line-height:1.9}
    .term .body .l{color:var(--mut)} .term .body .g{color:#39d98a} .term .body .a{color:var(--acc)}
    .term .body .c{color:var(--wht)}

    /* SECTION base */
    section{padding:84px 0;border-top:1px solid var(--line)}
    .head{max-width:620px}
    .head h2{font-size:38px;letter-spacing:-.02em;margin-top:14px}
    .head p{color:var(--mut);font-size:17px;margin-top:16px}

    /* SERVICES grid - hacker/tech */
    .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;counter-reset:card}
    .card{counter-increment:card;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;padding:26px;transition:.22s;
      background:
        repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
        linear-gradient(90deg,rgba(255,122,26,.85),rgba(255,122,26,0) 55%) top left/100% 2px no-repeat,
        radial-gradient(130% 120% at 0 0,rgba(255,122,26,.07),transparent 45%),
        linear-gradient(180deg,#13161b,#0b0d10)}
    .card::after{content:counter(card,decimal-leading-zero);position:absolute;top:20px;right:22px;
      font-family:var(--mono);font-size:13px;color:var(--mut2);letter-spacing:.05em}
    .card:hover{border-color:rgba(255,122,26,.85);transform:translateY(-6px);
      box-shadow:0 0 22px -4px rgba(255,122,26,.55),0 30px 60px -32px rgba(255,122,26,.6),inset 0 0 34px -20px rgba(255,122,26,.8)}
    .card .kick{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
      text-transform:uppercase;color:var(--acc);opacity:.9;display:flex;align-items:center;gap:6px;margin-bottom:16px}
    .card .kick::before{content:"//";opacity:.7}
    .card .ic{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;
      background:rgba(255,122,26,.12);border:1px solid rgba(255,122,26,.28);color:var(--acc)}
    .card h3{font-size:19px;margin-top:18px}
    .card p{color:var(--mut);font-size:14.5px;margin:10px 0 0}
    .card ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
    .card li{font-size:11.5px;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:4px 9px;
      font-family:var(--mono);background:rgba(0,0,0,.25)}
    .card li::before{content:"> ";color:var(--acc);opacity:.6}
    /* EXPERTISES (contenu SEO) */
    .exp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
    .exp{background:linear-gradient(180deg,#13161b,#0b0d10);border:1px solid var(--line);border-radius:12px;padding:22px;transition:.2s}
    .exp:hover{border-color:rgba(255,122,26,.5)}
    .exp h3{font-size:16px;display:flex;align-items:center;gap:8px}
    .exp h3::before{content:"//";color:var(--acc);font-family:var(--mono);font-size:12px;opacity:.8}
    .exp p{margin:10px 0 0;color:var(--mut);font-size:13.5px;line-height:1.6}
    .exp .tech{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
    .exp .tech span{font-family:var(--mono);font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:5px;padding:3px 8px;background:rgba(0,0,0,.25)}
    @media(max-width:900px){.exp-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:600px){.exp-grid{grid-template-columns:1fr}}
    /* blinking caret + terminal line (hero) */
    .cmdline{font-family:var(--mono);font-size:14px;color:var(--wht);margin-top:26px;
      display:flex;align-items:center;gap:9px;padding:12px 15px;border-radius:9px;
      background:rgba(0,0,0,.35);border:1px solid var(--line2);max-width:470px}
    .cmdline .pr{color:var(--acc)}
    .cmdline #nxType{color:var(--mut)}
    .caret{display:inline-block;width:9px;height:17px;background:var(--acc);
      margin-left:1px;animation:nxblink 1s steps(1) infinite;box-shadow:0 0 8px var(--acc);vertical-align:-3px}
    @keyframes nxblink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

    /* SPLIT (infogérance) */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
    .adv{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin-top:8px}
    .adv .it{display:flex;gap:12px;align-items:flex-start}
    .adv .it svg{flex:0 0 auto;margin-top:3px;color:var(--acc)}
    .adv .it b{font-family:var(--disp);font-weight:600;font-size:15px;display:block}
    .adv .it span{color:var(--mut);font-size:13.5px}
    .panel{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;padding:30px;
      background:
        repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 4px),
        linear-gradient(90deg,rgba(255,122,26,.85),rgba(255,122,26,0) 55%) top left/100% 2px no-repeat,
        linear-gradient(180deg,#13161b,#0b0d10)}
    .panel h3{font-size:22px} .panel .row{display:flex;justify-content:space-between;align-items:center;
      padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-family:var(--mono)}
    .panel .row:last-child{border-bottom:0} .panel .row span{color:var(--mut)}
    .panel .row b{font-family:var(--mono);color:#39d98a;font-weight:500;font-size:13px}
    .mkick{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
      color:var(--acc);opacity:.9;display:flex;align-items:center;gap:6px;margin-bottom:14px}
    .mkick::before{content:"//";opacity:.7}

    /* SECURITY band */
    .sec{background:
      radial-gradient(760px 380px at 15% 20%,rgba(255,122,26,.12),transparent 60%),var(--bg2)}
    .secgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px}
    .sbox{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;padding:22px;transition:.22s;
      background:
        repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
        linear-gradient(90deg,rgba(255,122,26,.85),rgba(255,122,26,0) 55%) top left/100% 2px no-repeat,
        linear-gradient(180deg,#13161b,#0b0d10)}
    .sbox:hover{border-color:rgba(255,122,26,.85);transform:translateY(-6px);
      box-shadow:0 0 22px -4px rgba(255,122,26,.55),0 26px 54px -32px rgba(255,122,26,.6),inset 0 0 34px -20px rgba(255,122,26,.8)}
    .sbox .ic{color:var(--acc);margin-bottom:14px}
    .sbox b{font-family:var(--disp);font-size:15.5px;display:block}
    .sbox p{color:var(--mut);font-size:13px;margin:8px 0 0}

    /* TEAM */
    .team{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
    .vals{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
    .chip{font-family:var(--disp);font-size:13px;color:var(--wht);background:var(--surf);
      border:1px solid var(--line2);border-radius:999px;padding:8px 15px}
    .loc{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:14px;margin-top:24px}

    /* CONTACT */
    .contact{border:1px solid var(--line2);border-radius:20px;padding:52px;text-align:center;
      position:relative;overflow:hidden;
      background:
        repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 4px),
        linear-gradient(90deg,rgba(255,122,26,.85),rgba(255,122,26,0) 45%) top left/100% 2px no-repeat,
        radial-gradient(700px 340px at 50% 0,rgba(255,122,26,.12),transparent 60%),
        linear-gradient(180deg,#14171c,#0b0d10)}
    .contact h2{font-size:40px;letter-spacing:-.02em}
    .contact p{color:var(--mut);font-size:17px;margin:16px auto 0;max-width:520px}
    .contact .cta{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
    .cinfo{display:flex;gap:38px;justify-content:center;margin-top:36px;flex-wrap:wrap;color:var(--mut);font-size:13.5px;font-family:var(--mono)}
    .cinfo b{color:var(--wht);font-family:var(--mono);font-weight:600}

    /* FOOTER */
    footer{border-top:1px solid var(--line);padding:52px 0 40px;background:var(--bg2)}
    .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
    .fgrid h4{font-family:var(--disp);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);margin:0 0 16px}
    .fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
    .fgrid a{color:var(--mut);font-size:14.5px} .fgrid a:hover{color:var(--acc)}
    .fbot{display:flex;justify-content:space-between;align-items:center;margin-top:40px;
      padding-top:24px;border-top:1px solid var(--line);color:var(--mut2);font-size:13px;flex-wrap:wrap;gap:12px}
  
/* icônes du menu (Twenty Seventeen) : les redimensionner */
.nav .menu a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav .menu svg,.nav .menu .icon{width:13px;height:13px;fill:currentColor;flex:0 0 auto}
.nav .menu .dropdown-toggle{background:none;border:0;color:inherit;padding:0 2px;margin:0;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1}
.nav .menu .dropdown-toggle svg{width:13px;height:13px}
/* items de 1er niveau sur toute la hauteur de la barre (pas de trou avant le sous-menu) */
.nav .menu{align-self:stretch;align-items:stretch}
.nav .menu>li{display:flex;align-items:center;height:100%}
/* menus déroulants WordPress (sous-menus) */
.nav .menu li{position:relative}
.nav .menu .sub-menu{position:absolute;top:100%;left:0;min-width:230px;list-style:none;margin:0;padding:10px 0;
  background:#0f1114;border:1px solid var(--line2);border-radius:0 0 10px 10px;display:none;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);z-index:40}
.nav .menu>li:hover>.sub-menu,.nav .menu>li:focus-within>.sub-menu{display:block}
.nav .menu .sub-menu li a{display:block;padding:9px 16px;font-size:14px;white-space:nowrap;color:var(--wht)}
.nav .menu .sub-menu li a:hover{color:var(--acc);background:rgba(255,122,26,.08)}
.admin-bar .nav{top:32px}
@media screen and (max-width:782px){.admin-bar .nav{top:46px}}
/* lien "En savoir plus" des cartes */
.card .cardlink{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--acc)}
.card:hover .cardlink{color:var(--acc2)}
/* liens internes dans listes / tags */
.card li a,.exp .tech span a,.tag a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,122,26,.45)}
.card li a:hover,.exp .tech span a:hover,.tag a:hover{color:var(--acc);border-bottom-color:var(--acc)}