/* =========================================================
   POLYMET — Editorial Design System
   ========================================================= */
:root{
  --bg:#04101f;            /* deep navy */
  --bg-2:#081a2e;
  --ink:#eaf4ff;
  --ink-2:#8fb3d6;
  --line:rgba(140,200,255,.14);
  --accent:#7ed1ff;        /* sky blue */
  --accent-2:#3d8bff;      /* electric blue */
  --accent-3:#0a3a6b;      /* deep blue */
  --serif:'Syne', 'Space Grotesk', system-ui, sans-serif;
  --sans:'Space Grotesk', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --maxw:1280px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#0b0b0d}

.container-x{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-0.02em}
.muted{color:var(--ink-2)}
.divider{height:1px;background:var(--line);width:100%}

/* ============ NAV — Glass / Glitch ============ */
.polymet-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(180deg, rgba(4,16,31,.35) 0%, rgba(4,16,31,.18) 100%);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 40px -20px rgba(0,0,0,.6);
}
.polymet-nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(126,209,255,.06), transparent);
  mix-blend-mode:overlay;
}
body{padding-top:92px}
.polymet-nav .row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:92px;gap:24px;position:relative;
}
.polymet-nav nav.left{justify-self:start}
.polymet-nav nav.right{justify-self:end}
.polymet-nav .brand{
  justify-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--serif);font-weight:700;letter-spacing:.32em;font-size:12px;
  color:#ffffff;text-shadow:0 0 18px rgba(126,209,255,.45);
}
.polymet-nav .brand img{
  height:54px;width:54px;border-radius:50%;object-fit:cover;
  padding:3px;background:linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 28px rgba(126,209,255,.55), inset 0 0 0 2px rgba(4,16,31,.9);
  transition:transform .4s ease, box-shadow .4s ease;
}
.polymet-nav .brand:hover img{transform:rotate(8deg) scale(1.05);box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 0 38px rgba(126,209,255,.8)}
.polymet-nav .brand span{display:flex;align-items:center;gap:4px;color:#fff}
.polymet-nav .brand sup{color:var(--accent)!important}
.polymet-nav nav{display:flex;gap:6px;align-items:center}
.polymet-nav a.link{
  padding:10px 16px;border-radius:999px;font-size:12px;color:rgba(255,255,255,.72);
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:color .25s, background .25s;
}
.polymet-nav a.link:hover{color:#fff;background:rgba(255,255,255,.08)}
.polymet-nav a.link.active{color:#fff;background:rgba(126,209,255,.14)}
.polymet-nav .cta{
  margin-left:10px;padding:11px 20px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04101f;font-weight:700;font-size:12px;
  display:inline-flex;align-items:center;gap:8px;letter-spacing:.12em;text-transform:uppercase;
  transition:transform .25s, box-shadow .25s;
  box-shadow:0 8px 24px -10px rgba(126,209,255,.6);
}
.polymet-nav .cta:hover{transform:translateY(-1px);box-shadow:0 14px 34px -8px var(--accent)}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:22px}
@media(max-width:860px){
  body{padding-top:72px}
  .polymet-nav .row{grid-template-columns:auto 1fr auto;height:72px}
  .polymet-nav .brand{justify-self:start;flex-direction:row;letter-spacing:.2em}
  .polymet-nav .brand img{height:42px;width:42px}
  .polymet-nav nav.left, .polymet-nav nav.right{display:none;position:absolute;top:72px;left:0;right:0;background:rgba(4,16,31,.92);backdrop-filter:blur(20px);flex-direction:column;padding:16px;border-bottom:1px solid var(--line);justify-self:stretch}
  .polymet-nav nav.left.open, .polymet-nav nav.right.open{display:flex}
  .nav-toggle{display:block;justify-self:end}
}

/* ============ HERO ============ */
.hero{
  position:relative;padding:140px 0 100px;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(4,16,31,.35) 0%, rgba(4,16,31,.75) 65%, var(--bg) 100%),
    url('hero-bg.png') center/cover no-repeat;
  background-attachment: scroll;
  min-height: 88vh;
}
@media(min-width:1100px){
  .hero{ background-attachment: fixed; }
}
@media(max-width:860px){
  .hero{ padding:90px 0 60px; min-height:70vh; background-position: 70% center; }
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 80% 15%, rgba(126,209,255,.30), transparent 70%),
    radial-gradient(700px 360px at 10% 90%, rgba(61,139,255,.25), transparent 70%);
  mix-blend-mode:screen;
}
.hero .meta-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:48px;gap:24px;flex-wrap:wrap;
}
.hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(64px, 13vw, 200px);
  line-height:.92;letter-spacing:-0.04em;margin:0;
}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero h1 .outline{
  -webkit-text-stroke:1.5px var(--ink);color:transparent;
}
.hero-bottom{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:64px;align-items:end;
}
.hero-bottom p{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:520px;margin:0}
.hero-bottom .cta-stack{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}
@media(max-width:860px){.hero-bottom{grid-template-columns:1fr}.hero-bottom .cta-stack{justify-content:flex-start}}

.btn-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 24px;border-radius:999px;font-weight:600;font-size:14px;
  transition:transform .25s, background .25s, color .25s;
}
.btn-primary-x{background:var(--accent);color:#0b0b0d}
.btn-primary-x:hover{transform:translateY(-2px);background:#bfe7ff}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.04);border-color:var(--ink-2)}
.btn-pill i{transition:transform .3s}
.btn-pill:hover i{transform:translate(3px,-3px)}

/* Floating accent blob */
.blob{
  position:absolute;border-radius:50%;filter:blur(120px);opacity:.35;pointer-events:none;z-index:0;
}
.blob.a{width:520px;height:520px;background:var(--accent-3);top:-200px;right:-100px}
.blob.b{width:380px;height:380px;background:var(--accent);bottom:-150px;left:10%;opacity:.18}
.hero > *{position:relative;z-index:1}

/* Marquee */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:24px 0;background:var(--bg);
}
.marquee-track{display:flex;gap:64px;white-space:nowrap;animation:scroll 40s linear infinite;font-family:var(--serif);font-size:48px;font-weight:300;letter-spacing:-.02em}
.marquee-track span{display:inline-flex;align-items:center;gap:64px;color:var(--ink-2)}
.marquee-track span em{font-style:italic;color:var(--accent)}
.marquee-track .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.section{padding:120px 0;position:relative}
.section-head{
  display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:end;margin-bottom:72px;
}
.section-head .label{display:flex;align-items:center;gap:12px}
.section-head .label::before{content:"";width:36px;height:1px;background:var(--accent)}
.section-head h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,6vw,80px);line-height:1;letter-spacing:-0.03em;margin:0;
}
.section-head h2 em{font-style:italic;color:var(--accent)}
@media(max-width:860px){.section-head{grid-template-columns:1fr;gap:20px}}

/* ============ SERVICES GRID ============ */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.svc{
  padding:48px 32px 56px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  position:relative;transition:background .35s;cursor:pointer;
  display:flex;flex-direction:column;gap:24px;min-height:340px;
}
.svc:nth-child(3n){border-right:0}
.svc:hover{background:linear-gradient(180deg, rgba(214,255,58,.06), transparent 70%)}
.svc .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink-2)}
.svc .ico{
  width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:24px;color:var(--accent);
  transition:transform .4s, background .4s, color .4s;
}
.svc:hover .ico{transform:rotate(-8deg) scale(1.05);background:var(--accent);color:#0b0b0d}
.svc h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-0.02em;margin:auto 0 0 0}
.svc p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}
.svc .arrow{position:absolute;top:32px;right:32px;color:var(--ink-2);transition:transform .3s, color .3s}
.svc:hover .arrow{transform:translate(4px,-4px);color:var(--accent)}
@media(max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}.svc:nth-child(3n){border-right:1px solid var(--line)}.svc:nth-child(2n){border-right:0}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr}.svc{border-right:0 !important}}

/* ============ PROCESS ============ */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:40px 28px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step .n{font-family:var(--serif);font-weight:300;font-size:88px;line-height:1;color:var(--accent);letter-spacing:-0.04em}
.step h4{font-family:var(--serif);font-weight:400;font-size:24px;margin:24px 0 12px;letter-spacing:-.01em}
.step p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55}
@media(max-width:860px){.process{grid-template-columns:1fr 1fr}.step:nth-child(2n){border-right:0}}
@media(max-width:520px){.process{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)}}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:56px 32px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .v{font-family:var(--serif);font-weight:300;font-size:88px;line-height:1;letter-spacing:-0.04em}
.stat .v em{font-style:italic;color:var(--accent)}
.stat .l{margin-top:12px;color:var(--ink-2);font-size:13px;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2n){border-right:0}}

/* ============ CTA BANNER ============ */
.cta-banner{
  margin:120px auto;max-width:var(--maxw);padding:80px 48px;border-radius:32px;
  background:linear-gradient(135deg,#181820 0%,#0b0b0d 60%);
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.cta-banner::before{
  content:"";position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-3),transparent 70%);
  top:-300px;right:-200px;opacity:.4;
}
.cta-banner h3{
  font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,72px);
  line-height:1;letter-spacing:-0.03em;margin:0 0 24px;position:relative;max-width:720px;
}
.cta-banner h3 em{font-style:italic;color:var(--accent)}
.cta-banner p{color:var(--ink-2);font-size:16px;max-width:520px;margin:0 0 32px;position:relative}
.cta-banner .actions{position:relative;display:flex;gap:14px;flex-wrap:wrap}

/* ============ FORM ============ */
.form-wrap{
  display:grid;grid-template-columns:1fr 1.4fr;gap:80px;
  padding:80px 0;border-top:1px solid var(--line);
}
@media(max-width:980px){.form-wrap{grid-template-columns:1fr;gap:48px}}
.form-wrap .info h3{font-family:var(--serif);font-weight:300;font-size:48px;line-height:1;letter-spacing:-.02em;margin:0 0 24px}
.form-wrap .info .item{padding:20px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center}
.form-wrap .info .item:last-child{border-bottom:1px solid var(--line)}
.form-wrap .info .item .k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-2)}
.form-wrap .info .item .v{font-family:var(--serif);font-size:20px}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);padding:14px 0;font-family:var(--sans);font-size:16px;outline:none;
  transition:border-color .25s;
}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{resize:vertical;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:620px){.form-row{grid-template-columns:1fr}}

.alert-ok,.alert-err{padding:16px 20px;border-radius:12px;margin-bottom:24px;font-size:14px}
.alert-ok{background:rgba(214,255,58,.12);border:1px solid rgba(214,255,58,.35);color:var(--accent)}
.alert-err{background:rgba(255,90,54,.12);border:1px solid rgba(255,90,54,.4);color:#ffb6a3}

/* ============ ABOUT ============ */
.about-hero{padding:120px 0 60px}
.about-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(56px,10vw,140px);line-height:.95;letter-spacing:-.04em;margin:0}
.about-hero h1 em{font-style:italic;color:var(--accent)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.value{padding:48px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.value:nth-child(3n){border-right:0}
.value .ico{font-size:28px;color:var(--accent);margin-bottom:24px}
.value h4{font-family:var(--serif);font-size:26px;font-weight:400;margin:0 0 12px;letter-spacing:-.01em}
.value p{color:var(--ink-2);margin:0;font-size:15px;line-height:1.55}
@media(max-width:860px){.values{grid-template-columns:1fr}.value{border-right:0}}

/* ============ FOOTER ============ */
footer{
  padding:80px 0 40px;border-top:1px solid var(--line);margin-top:80px;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:64px}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
.footer-grid h5{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:0 0 18px}
.footer-grid a{display:block;padding:6px 0;color:var(--ink);font-size:15px;transition:color .25s}
.footer-grid a:hover{color:var(--accent)}
.footer-brand{font-family:var(--serif);font-size:48px;font-weight:300;letter-spacing:-.02em;margin:0 0 16px}
.footer-brand em{font-style:italic;color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2);flex-wrap:wrap;gap:12px}

/* ============ REVEAL ANIM ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s, transform .8s}
.reveal.in{opacity:1;transform:none}

/* ============ JS-driven animations ============ */
.reveal, .reveal-up, .reveal-fade { opacity: 0; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal-up { transform: translateY(40px); }
.reveal    { transform: translateY(24px); }
.reveal-fade { transform: none; }
.reveal.in, .reveal-up.in, .reveal-fade.in { opacity: 1; transform: none; }

.split .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split .word > span { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.split.in .word > span { transform: translateY(0); }

/* Header scroll states */
.polymet-nav { transition: transform .4s ease, background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s; }
.polymet-nav.scrolled { background: rgba(11,11,13,.72); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.polymet-nav.hidden { transform: translateY(-110%); }

/* Curseur custom */
.pm-cursor, .pm-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; mix-blend-mode: difference; }
.pm-cursor { width: 8px; height: 8px; background: #fff; margin: -4px 0 0 -4px; }
.pm-cursor-ring { width: 38px; height: 38px; border: 1px solid #fff; margin: -19px 0 0 -19px; transition: width .25s, height .25s, margin .25s, background-color .25s; }
.pm-hover .pm-cursor-ring { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: rgba(214,255,58,.18); border-color: transparent; }
.pm-blob { position: fixed; top: 0; left: 0; width: 480px; height: 480px; margin: -240px 0 0 -240px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(214,255,58,.18), transparent 60%); filter: blur(40px); }
@media (pointer: coarse) { .pm-cursor, .pm-cursor-ring, .pm-blob { display: none; } }

/* Tilt / magnet doivent garder will-change */
.tilt, .magnet, .cta { transition: transform .25s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* Barre de progression */
.pm-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--accent, #7ed1ff); transform-origin: 0 50%; transform: scaleX(0); z-index: 9998; }

/* Marquee si pas déjà défini */
.marquee { will-change: transform; }