/* ============================================================
   AgentVox : design system
   Charte : turquoise pierre precieuse (decision d'Onur, 30/07/2026)
   Turquoise principal #0E8C7F, clair #2FB6A4, profond #075E56
   Polices : Sora (titres) + Inter (texte), self-hostees
   Declinaison unique : ecrin (sombre). Choix d'Onur du 30/07/2026 :
   la pierre precieuse vit par le contraste, pas par l'aplat.
   Ne JAMAIS reprendre le bleu AIGEN #3159C9 ni l'or Extralys #D4AF37.
   ============================================================ */

/* ---------- Tokens : ECRIN (sombre, defaut) ---------- */
:root {
  --bg:#051614;
  --bg-2:#08201E;
  --surface:#0F2C29;
  --surface-2:#153833;
  --surface-3:#1B453F;
  --line:rgba(47,182,164,.14);
  --line-2:rgba(47,182,164,.30);
  --line-soft:rgba(255,255,255,.07);

  --fg:#EAF5F2;
  --fg-soft:#9FBDB7;
  --fg-dim:#6E8B86;

  --teal:#0E8C7F;
  --teal-bright:#2FB6A4;
  --teal-pale:#7FE3D2;
  --teal-deep:#075E56;
  --accent:var(--teal-bright);
  --accent-strong:var(--teal);
  --accent-bright:var(--teal-pale);
  --on-accent:#032420;

  --glow:rgba(47,182,164,.34);
  --grid-line:rgba(47,182,164,.055);
  /* Facette de pierre : le degrade traverse du clair au profond, jamais un aplat */
  --gem-grad:linear-gradient(112deg,#2FB6A4 0%,#7FE3D2 34%,#0E8C7F 62%,#075E56 100%);
  --btn-grad:linear-gradient(155deg,#3ECBB7 0%,#0E8C7F 62%,#0A756A 100%);

  --card-grad-a:rgba(127,227,210,.045);
  --card-grad-b:rgba(127,227,210,.012);
  --hero-bg:radial-gradient(720px 460px at 82% -6%,rgba(47,182,164,.20),transparent 66%),
            radial-gradient(780px 560px at 2% 10%,rgba(14,140,127,.13),transparent 62%),
            radial-gradient(940px 780px at 50% 114%,rgba(127,227,210,.08),transparent 70%);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 20px 50px -24px rgba(0,0,0,.8);
  --shadow-lg:0 2px 6px rgba(0,0,0,.55),0 40px 90px -32px rgba(0,0,0,.85);
  color-scheme:dark;
}

/* ---------- Tokens : structure (independants de la declinaison) ---------- */
:root {
  --r-sm:10px;--r:14px;--r-lg:20px;--r-xl:26px;--r-pill:999px;
  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--fg);
  line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;transition:background .5s ease,color .5s ease;
}
/* Grain tres fin : donne de la matiere a la pierre, n'affecte que le fond */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}
.bg-ambient{position:fixed;inset:0;z-index:-3;pointer-events:none;background:var(--hero-bg);opacity:.9;transition:opacity .5s}
.bg-grid{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:68px 68px;mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,#000 20%,transparent 78%)}
#fx-canvas{position:fixed;inset:0;z-index:-2;pointer-events:none;width:100%;height:100%}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip-link{position:fixed;top:-64px;left:16px;z-index:3000;background:var(--accent-strong);color:#fff;
  padding:11px 18px;border-radius:0 0 12px 12px;font-family:'Sora',sans-serif;font-weight:600;font-size:14px;
  box-shadow:var(--shadow-lg);transition:top .25s var(--ease)}
.skip-link:focus{top:0;outline:none}
.container{max-width:1240px;margin:0 auto;padding:0 32px}
.narrow{max-width:920px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{font-family:'Sora','Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.13;color:var(--fg)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:'';width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.eyebrow.center::before{display:none}
.grad{background:var(--gem-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--fg-soft);font-size:19px;line-height:1.65;max-width:62ch}
.lead strong{color:var(--fg);font-weight:600}
.muted{color:var(--fg-dim)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Inter',sans-serif;font-weight:600;
  font-size:15px;padding:15px 26px;border-radius:12px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s,border-color .3s,color .3s;will-change:transform}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--btn-grad);color:var(--on-accent);
  box-shadow:0 10px 30px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary:hover{box-shadow:0 18px 46px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.36);transform:translateY(-2px)}
.btn-ghost{background:var(--card-grad-a);border-color:var(--line-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{padding:17px 30px;font-size:16px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .45s var(--ease)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:34px;height:82px;
  transition:all .45s var(--ease);border-bottom:1px solid transparent}
.site-header.scrolled{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:color-mix(in srgb,var(--bg) 78%,transparent)}
.site-header.scrolled .bar{height:66px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{flex:none}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm .name{font-family:'Sora',sans-serif;font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--fg);white-space:nowrap}
.brand .wm .tag{font-family:'Inter',sans-serif;font-weight:600;font-size:7.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.nav{display:flex;align-items:center;gap:30px}
.nav a.lnk{font-size:15px;color:var(--fg-soft);font-weight:500;position:relative;transition:color .25s}
.nav a.lnk::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--accent);transition:width .3s var(--ease)}
.nav a.lnk:hover,.nav a.lnk.active{color:var(--fg)}
.nav a.lnk:hover::after,.nav a.lnk.active::after{width:100%}
.nav-tools{display:flex;align-items:center;gap:12px}
.theme-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);
  background:var(--card-grad-a);color:var(--fg-soft);cursor:pointer;transition:.3s}
.theme-btn:hover{color:var(--accent);border-color:var(--accent)}
.theme-btn svg{width:17px;height:17px}

/* ---------- Sections ---------- */
.section{padding:118px 0;position:relative}
.section.tight{padding:82px 0}
.section-head{max-width:820px;margin-bottom:62px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(31px,4.1vw,50px);letter-spacing:-.022em;line-height:1.1;margin:18px 0 20px}
.section-head.center .lead{margin:0 auto}

/* ---------- Hero des pages internes ---------- */
.page-hero{padding:168px 0 62px;position:relative}
.page-hero h1{font-size:clamp(36px,5vw,60px);letter-spacing:-.024em;line-height:1.06;margin:20px 0 22px}
.page-hero .lead{font-size:20px}
.breadcrumb{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--fg-dim);margin-bottom:8px}
.breadcrumb a:hover{color:var(--accent)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:70px 0 36px;margin-top:40px;background:var(--bg-2)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:50px}
.footer-brand p{color:var(--fg-soft);font-size:15px;margin:18px 0 22px;max-width:36ch}
.footer-brand .footer-slogan{font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:16px 0 0;max-width:none}
.footer-col h4{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:18px;font-weight:600}
.footer-col a{display:block;color:var(--fg-soft);font-size:15px;margin-bottom:11px;transition:color .25s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--line);
  color:var(--fg-dim);font-size:13.5px;flex-wrap:wrap;gap:14px}
.footer-bottom a:hover{color:var(--accent)}

/* ---------- Apparitions ----------
   Le masquage n'est applique QUE si le JavaScript a pris la main (classe
   .js posee par site.js). Sans ce filet, un script bloque ou en echec
   laisserait des pans entiers du site invisibles alors qu'ils sont bien
   dans la page. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none;transition:none}*{animation-duration:.001ms!important}}

/* ---------- Pastilles ---------- */
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:11px;background:var(--card-grad-a);
  border:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--fg-soft);transition:.3s}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
.chip svg{width:16px;height:16px;color:var(--accent)}

/* ---------- Responsive ---------- */
@media(max-width:1040px){
  .site-header .bar{flex-wrap:wrap;height:auto;min-height:58px;padding:9px 0;row-gap:4px}
  .site-header.scrolled .bar{height:auto}
  .brand{order:1}
  .nav-tools{order:2}
  .nav{order:3;width:100%;flex-direction:row;align-items:center;gap:8px;margin:0;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0}
  .nav::-webkit-scrollbar{display:none}
  .nav a.lnk{flex:none;white-space:nowrap;font-size:13.5px;padding:7px 14px;border-radius:999px;
    background:var(--card-grad-a);border:1px solid var(--line);color:var(--fg-soft)}
  .nav a.lnk::after{display:none}
  .nav a.lnk:hover,.nav a.lnk.active{color:var(--accent);border-color:var(--accent)}
  .nav .nav-cta{display:none}
}
@media(max-width:980px){ .footer-top{grid-template-columns:1fr 1fr;gap:36px} }
@media(max-width:680px){
  body{font-size:16px}
  .container{padding:0 22px}
  .section{padding:78px 0}
  .page-hero{padding:126px 0 46px}
  .footer-top{grid-template-columns:1fr;gap:32px}
}