:root{
    --bg:#0a0c11;
    --bg-2:#0e1118;
    --surface:#12151d;
    --surface-2:#171b25;
    --line:rgba(201,169,106,.18);
    --line-strong:rgba(201,169,106,.4);
    --gold:#c9a96a;
    --gold-bright:#e7cd92;
    --gold-deep:#a9854a;
    --ink:#f3efe6;
    --muted:#9b958a;
    --muted-2:#6f6b63;
    --display:"Cormorant Garamond", Georgia, serif;
    --body:"Jost", system-ui, sans-serif;
    --gold-grad:linear-gradient(120deg,#b8924f 0%,#e7cd92 38%,#f5e6bd 52%,#cba968 70%,#a9854a 100%);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--body);
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* subtle grain + ambient glow */
  body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(1100px 700px at 78% -10%, rgba(201,169,106,.10), transparent 60%),
      radial-gradient(900px 600px at -10% 110%, rgba(201,169,106,.06), transparent 60%);
  }
  body::after{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .wrap{max-width:1200px;margin:0 auto;padding:0 28px;position:relative;z-index:2}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    backdrop-filter:blur(14px);
    background:linear-gradient(180deg, rgba(10,12,17,.86), rgba(10,12,17,.55));
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:78px}
  .brand{display:flex;align-items:center;gap:14px;cursor:pointer;text-decoration:none}
  .monogram{
    width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
    border:1px solid var(--line-strong);
    font-family:var(--display);font-weight:600;font-size:20px;
    color:var(--gold-bright);
    background:radial-gradient(circle at 50% 30%, rgba(201,169,106,.18), transparent 70%);
  }
  .wordmark{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:.06em;line-height:1;color:var(--ink)}
  .wordmark small{display:block;font-family:var(--body);font-size:9.5px;font-weight:400;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-top:4px}
  .menu{display:flex;align-items:center;gap:34px}
  .menu nav{display:flex;gap:30px}
  .navlink{
    background:none;border:none;cursor:pointer;color:var(--muted);
    font-family:var(--body);font-size:13px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
    padding:4px 0;position:relative;transition:color .35s;
  }
  .navlink::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--gold-grad);transition:width .4s ease}
  .navlink:hover,.navlink.active{color:var(--ink)}
  .navlink.active::after,.navlink:hover::after{width:100%}
  .hdr-tools{display:flex;align-items:center;gap:18px}
  .lang{display:flex;align-items:center;border:1px solid var(--line);border-radius:30px;overflow:hidden}
  .lang button{background:none;border:none;cursor:pointer;color:var(--muted);font-family:var(--body);font-size:11px;letter-spacing:.14em;padding:7px 12px;transition:.3s}
  .lang button.on{color:var(--bg);background:var(--gold-grad);font-weight:500}

  .btn{
    display:inline-flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;
    font-family:var(--body);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
    padding:14px 26px;border:none;transition:.4s;white-space:nowrap;
  }
  .btn-gold{background:var(--gold-grad);color:#1a140a;box-shadow:0 10px 30px -12px rgba(201,169,106,.6)}
  .btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(201,169,106,.85)}
  .btn-ghost{background:transparent;color:var(--gold-bright);border:1px solid var(--line-strong)}
  .btn-ghost:hover{border-color:var(--gold);background:rgba(201,169,106,.07)}

  .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
  .burger span{width:24px;height:1.5px;background:var(--gold-bright);transition:.3s}

  /* ---------- Pages ---------- */
  .page{display:none;animation:none}
  .page.active{display:block}
  section{padding:96px 0;position:relative}
  .eyebrow{font-size:11.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;display:flex;align-items:center;gap:14px}
  .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold-deep)}
  h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:.01em}
  h1{font-size:clamp(42px,6.4vw,82px);font-weight:500}
  h2{font-size:clamp(32px,4.4vw,54px);font-weight:500}
  h3{font-size:24px}
  .gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .lead{font-size:clamp(15px,1.4vw,18px);color:var(--muted);max-width:60ch;margin-top:24px}
  p{color:var(--muted)}

  /* hero */
  .hero{padding:120px 0 104px;min-height:88vh;display:flex;align-items:center}
  .hero-inner{max-width:880px}
  .hero h1{margin-top:8px}
  .hero .cta-row{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap}
  .deco-line{display:flex;align-items:center;gap:18px;margin-top:64px;color:var(--muted-2);font-size:11px;letter-spacing:.34em;text-transform:uppercase}
  .deco-line .bar{flex:1;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}
  .diamond{width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}

  /* service grid */
  .grid{display:grid;gap:24px}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .card{
    background:linear-gradient(180deg,var(--surface),var(--bg-2));
    border:1px solid var(--line);padding:34px 30px;position:relative;
    transition:.45s;cursor:default;overflow:hidden;
  }
  .card.clickable{cursor:pointer}
  .card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at 80% -20%,rgba(201,169,106,.12),transparent 70%);opacity:0;transition:.5s}
  .card:hover{transform:translateY(-6px);border-color:var(--line-strong)}
  .card:hover::before{opacity:1}
  .card .ico{font-family:var(--display);font-size:30px;color:var(--gold-bright);margin-bottom:20px;display:block}
  .card h3{margin-bottom:12px}
  .card p{font-size:14.5px}
  .card .more{margin-top:20px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:inline-flex;gap:8px;align-items:center}
  .card .more span{transition:.3s}
  .card.clickable:hover .more span{transform:translateX(5px)}

  /* pillars */
  .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .pillar{background:var(--bg);padding:38px 28px}
  .pillar .n{font-family:var(--display);font-size:30px;color:var(--gold);margin-bottom:14px}
  .pillar h3{font-size:19px;margin-bottom:8px}
  .pillar p{font-size:13.5px}

  /* split / feature list */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .feature-list{list-style:none;margin-top:28px}
  .feature-list li{padding:16px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:flex-start}
  .feature-list li .fi{color:var(--gold);font-family:var(--display);font-size:18px;line-height:1.4;flex-shrink:0}
  .feature-list li b{color:var(--ink);font-weight:500;font-size:15.5px;display:block;margin-bottom:2px}
  .feature-list li small{color:var(--muted);font-size:13.5px}

  /* process steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
  .step{position:relative;padding-top:26px;border-top:1px solid var(--line-strong)}
  .step .num{font-family:var(--display);font-size:14px;color:var(--gold);letter-spacing:.2em}
  .step h3{font-size:18px;margin:10px 0 8px}
  .step p{font-size:13.5px}

  /* note banner */
  .note{border:1px solid var(--line);border-left:2px solid var(--gold);background:var(--surface);padding:24px 28px;margin-top:46px;display:flex;gap:18px;align-items:flex-start}
  .note .nk{color:var(--gold-bright);font-family:var(--display);font-size:24px;line-height:1}
  .note p{font-size:14px;color:var(--muted)}
  .note b{color:var(--ink);font-weight:500}

  /* CTA band */
  .band{background:linear-gradient(120deg,var(--surface-2),var(--bg-2));border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;padding:84px 0}
  .band h2{margin-bottom:18px}
  .band .cta-row{justify-content:center;display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}

  /* about */
  .about-portrait{background:linear-gradient(160deg,var(--surface-2),var(--bg));border:1px solid var(--line);aspect-ratio:4/5;display:grid;place-items:center;position:relative;overflow:hidden}
  .about-portrait .mono-big{font-family:var(--display);font-size:120px;color:var(--gold);opacity:.22}
  .about-portrait .tag{position:absolute;bottom:24px;left:24px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

  /* contact */
  .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
  .field input,.field textarea,.field select{
    width:100%;background:var(--surface);border:1px solid var(--line);color:var(--ink);
    font-family:var(--body);font-size:15px;padding:14px 16px;transition:.3s;
  }
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);background:var(--bg-2)}
  .field textarea{min-height:140px;resize:vertical}
  .contact-info{border:1px solid var(--line);background:var(--surface);padding:36px 32px}
  .ci-item{padding:20px 0;border-bottom:1px solid var(--line)}
  .ci-item:last-child{border-bottom:none}
  .ci-item .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
  .ci-item .v{font-size:16px;color:var(--ink);font-weight:400}
  .form-ok{display:none;border:1px solid var(--line-strong);background:rgba(201,169,106,.07);padding:18px 22px;margin-bottom:20px;color:var(--gold-bright);font-size:14px}

  /* footer */
  footer{border-top:1px solid var(--line);padding:54px 0 40px;background:var(--bg-2);position:relative;z-index:2}
  .foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
  .foot-nav{display:flex;gap:26px;flex-wrap:wrap}
  .foot-nav a,.foot-nav button{background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--body);font-size:13px;letter-spacing:.06em;text-decoration:none;transition:.3s}
  .foot-nav a:hover,.foot-nav button:hover{color:var(--gold-bright)}
  .copy{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--muted-2);letter-spacing:.04em;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  /* reveal animation — masqué seulement si le JS est actif (.js sur <html>) ;
     sans JavaScript, le contenu reste pleinement visible. */
  .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}

  /* mobile menu */
  .mobile-menu{display:none;position:fixed;inset:0;z-index:60;background:rgba(8,10,14,.97);backdrop-filter:blur(8px);flex-direction:column;padding:30px 28px}
  .mobile-menu.open{display:flex}
  .mm-top{display:flex;justify-content:space-between;align-items:center}
  .mm-close{background:none;border:none;color:var(--gold-bright);font-size:30px;cursor:pointer;font-family:var(--display)}
  .mm-nav{display:flex;flex-direction:column;gap:6px;margin-top:50px}
  .mm-nav a,.mm-nav button{display:block;background:none;border:none;text-align:left;color:var(--ink);font-family:var(--display);font-size:32px;font-weight:500;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;cursor:pointer}

  @media(max-width:980px){
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .pillars{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:repeat(2,1fr)}
    .split{grid-template-columns:1fr;gap:40px}
    .contact-grid{grid-template-columns:1fr;gap:36px}
    .menu nav{display:none}
  }
  @media(max-width:680px){
    .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
    .pillars{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .hdr-tools .btn{display:none}
    .burger{display:flex}
    section{padding:68px 0}
    .hero{min-height:auto;padding:80px 0 70px}
  }

  /* honeypot anti-spam (champ invisible) */
  .hp{position:absolute!important;left:-9999px;top:-9999px;height:0;overflow:hidden}