/* ============================================================
   NTECH — Design Kit (tokens + base + utilities)
   Source unique du système visuel du site ntech.agency
   ============================================================ */

/* Police de marque : General Sans (grotesque neutre, proxy libre le plus proche
   d'universalSans utilisée par x.ai). Auto-hébergée, fichier variable unique. */
@font-face{
  font-family:'General Sans';
  src:url('/fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Couleurs */
  --bg:#ffffff;
  --ink:#0a0a0a;          /* titres, blocs sombres (CTA) */
  --text:#3d3f43;         /* corps */
  --muted:#7d8187;        /* secondaire */
  --line:#e6e6e4;         /* filets */
  --line-soft:#eeeeec;
  --panel:#f7f7f6;        /* panneaux */
  --panel-dot:#d6d6d3;    /* points de la grille */
  --accent:#2454e6;       /* bleu Ntech */
  --accent-soft:#e6ecfd;

  /* Typographie */
  --font:'General Sans','Geist',system-ui,sans-serif;
  --fw-body:400;
  --fw-title:500;
  --ls-tight:-0.025em;
  --ls-tighter:-0.035em;

  /* Rayons */
  --r-card:14px;
  --r-panel:12px;
  --r-pill:9999px;
  --r-img:14px;

  /* Ombres */
  --shadow-card:0 1px 2px rgba(10,10,10,.06),0 8px 20px rgba(10,10,10,.07);
  --shadow-soft:0 1px 2px rgba(10,10,10,.06),0 6px 14px rgba(10,10,10,.05);

  /* Espacements de section */
  --sec-pad:clamp(64px,8.9cqw,128px);
}

/* Base typo */
body{font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6}
h1,h2,h3{font-family:var(--font);font-weight:var(--fw-title)!important;letter-spacing:var(--ls-tight)}

/* Liens */
.lnk{text-decoration:none}
.lnk:hover{text-decoration:underline}

/* Cartes */
.card-lift{transition:transform .15s ease, box-shadow .15s ease}
.card-lift:hover{transform:translateY(-2px)}

/* Pastilles / tags */
.tag{display:inline-block;font-size:13px;padding:5px 12px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--text);background:#fafafa;margin:0 6px 8px 0}

/* Boutons pill */
.pill-blue{background:var(--accent);color:#fff;border:0;border-radius:var(--r-pill);cursor:pointer;font:inherit;transition:background .15s}
.pill-blue:hover{background:#1d47c8}
.pill-dark{background:var(--ink);color:#fff;border:0;border-radius:var(--r-pill);cursor:pointer;font:inherit;transition:background .15s}
.pill-dark:hover{background:#22242a}
/* Pas d'anneau de focus gris par defaut ; anneau accessible au clavier seulement */
button{-webkit-tap-highlight-color:transparent}
.pill-blue:focus,.pill-dark:focus,.menu-btn:focus,.menu-circle:focus,[data-booking]:focus{outline:none}
.pill-blue:focus-visible,.pill-dark:focus-visible,.menu-btn:focus-visible,.menu-circle:focus-visible,[data-booking]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Panneau à grille pointillée (signature) */
.dot-panel{background-color:var(--panel);background-image:radial-gradient(var(--panel-dot) 1px,transparent 1px);background-size:14px 14px;background-position:7px 7px;border:1px solid var(--line-soft);border-radius:var(--r-panel)}

/* Bandeau logos clients */
.trustlogo{height:34px;width:auto;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.trustlogo:hover{filter:none;opacity:1}

/* Filtres réalisations */
.rfilter{font:inherit;font-size:13px;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer;transition:.15s}
.rfilter:hover{border-color:#b9bcc1}
.rfilter[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Hamburger mobile en rond (style x.ai) */
.menu-circle{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);padding:0;flex:none}

/* ---- Composants de page (pour intégrations futures) ---- */
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.section-t{border-top:1px solid var(--line);padding:var(--sec-pad) 24px}
.eyebrow{margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.sub{margin:0;font-size:19px;line-height:1.6;max-width:720px;color:var(--text)}
.list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--text);display:flex;gap:10px}
.dot{width:9px;height:9px;border-radius:2px;background:var(--accent);flex:none;margin-top:6px}
.note{background-color:var(--panel);background-image:radial-gradient(var(--panel-dot) 1px,transparent 1px);background-size:14px 14px;background-position:7px 7px;border:1px solid var(--line-soft);border-radius:var(--r-panel);padding:24px 26px}
.cta{position:relative;overflow:hidden;margin-top:64px;background:var(--ink);border-radius:var(--r-panel);padding:clamp(32px,5vw,56px) 28px;text-align:center;color:#fff}
.cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 110% at 50% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 110% at 50% 0%,#000 30%,transparent 75%);pointer-events:none}
.cta::after{content:"";position:absolute;left:0;top:28%;height:1px;width:180px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45) 60%,transparent);animation:beamX 9s linear 1s infinite;pointer-events:none}
.cta>*{position:relative}
.cta h2{color:#fff!important;font-weight:500;font-size:clamp(24px,3vw,32px);margin:0 0 12px;letter-spacing:-.01em}
.cta p{margin:0 0 24px;color:#cfd2d6;font-size:16px;max-width:560px;margin-left:auto;margin-right:auto}
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 24px;border-radius:var(--r-pill);background:var(--accent);color:#fff;font-size:15px;border:0;cursor:pointer;font:inherit;text-decoration:none}
.h1{margin:0 0 16px;font-weight:500;font-size:clamp(30px,4.6vw,50px);line-height:1.08;letter-spacing:var(--ls-tight)}
.h2{margin:0 0 12px;font-weight:500;font-size:26px;letter-spacing:var(--ls-tight)}

/* ---- Header animé (grille + faisceaux) pour pages internes ---- */
@keyframes beamX{0%{transform:translateX(-240px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(1220px);opacity:0}}
@keyframes beamY{0%{transform:translateY(-170px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(520px);opacity:0}}
.gridwrap{position:relative;overflow:hidden}
.gridwrap::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 90% 120% at 25% -10%,#000 25%,transparent 70%);mask-image:radial-gradient(ellipse 90% 120% at 25% -10%,#000 25%,transparent 70%);opacity:.6;pointer-events:none}
.beam-x{position:absolute;left:0;top:40%;height:1px;width:200px;background:linear-gradient(90deg,transparent,var(--accent) 60%,transparent);animation:beamX 8s linear infinite;pointer-events:none}
.beam-y{position:absolute;top:0;left:20%;width:1px;height:130px;background:linear-gradient(180deg,transparent,var(--accent) 60%,transparent);animation:beamY 9s linear 2.5s infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.beam-x,.beam-y{animation:none;opacity:0}}