.btn{
  position: relative;
  width: 100%;
  padding: 16px 26px;
  border-radius: 999px;

  font-family: "Inter";
  font-weight: 650;
  letter-spacing: 0.02em;

  cursor: pointer;
  border: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 52px;

  -webkit-tap-highlight-color: transparent;
  user-select: none;

  /* PERF: transitions strict minimum (transform/opacity only) */
  transition:
    transform .16s ease,
    opacity .16s ease;

  /* PERF: aide un peu la compositing (sans forcer trop) */
  will-change: transform;
}

/* halo fin + éclat “verre” */
.btn::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;

  /* PERF: un seul gradient */
  background: radial-gradient(
    700px 220px at 40% 15%,
    rgba(255,255,255,0.22),
    transparent 62%
  );
  transition: opacity .16s ease;
}

/* liseré premium */
.btn::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  border: 1px solid rgba(255,255,255,0.18);
  opacity: 0.9;
}

/* focus clavier */
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 16px 28px rgba(0,0,0,0.22),
    0 0 0 4px rgba(230,214,158,0.14);
}

/* press */
.btn:active{
  transform: translateY(1px) scale(0.992);
}

/* ============================================================
   PRIMARY — “or CTA” (assombri pour contraste texte blanc)
============================================================ */

.btn--primary{
  color: #ffffff;

  /* 🎯 Or plus profond → contraste ++ */
  background: linear-gradient(
    135deg,
    #9f7835 0%,
    #b8934e 48%,
    #a98744 100%
  );

  box-shadow:
    0 6px 16px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.18);
}

/* hover desktop */
@media (hover:hover){
  .btn--primary:hover{
    transform: translateY(-3px);
    opacity: 0.98;

    background: linear-gradient(
      135deg,
      #8e692b 0%,
      #a98744 100%
    );

    box-shadow:
      0 10px 22px rgba(0,0,0,0.26),
      inset 0 0 0 1px rgba(255,255,255,0.24);
  }

  .btn--primary:hover::before{
    opacity: 1;
  }
}

/* ============================================================
   OUTLINE
============================================================ */

.btn--outline{
  color: #fffdf8;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(0,0,0,0.18)
  );

  border: 1px solid rgba(230,214,158,0.24);

  box-shadow:
    0 10px 18px rgba(0,0,0,0.20);
}

@media (hover:hover){
  .btn--outline:hover{
    transform: translateY(-2px);
    border-color: rgba(230,214,158,0.40);
    opacity: 0.98;

    box-shadow:
      0 14px 26px rgba(0,0,0,0.24),
      0 0 0 5px rgba(230,214,158,0.08);
  }

  .btn--outline:hover::before{
    opacity: 0.75;
  }
}

/* ============================================================
   DESKTOP ENHANCEMENT (masque léger)
============================================================ */

@media (hover:hover) and (pointer:fine){
  .btn::after{
    border: none;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.28),
      rgba(255,255,255,0.08)
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    opacity: 0.9;
  }

  .btn::before{
    mix-blend-mode: normal;
  }
}

/* ============================================================
   MOBILE PERF CUT (Huawei-friendly)
============================================================ */

@media (hover:none) and (pointer:coarse){
  .btn{
    transition: none;
    will-change: auto;
  }

  .btn::before,
  .btn::after{
    display: none;
  }

  .btn:focus-visible{
    box-shadow: 0 0 0 3px rgba(230,214,158,0.14);
  }

  .btn--primary,
  .btn--outline{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  }
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce){
  .btn{
    transition: none;
  }
}

/* ============================================================
   DISABLED
============================================================ */

.btn[disabled]{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.btn[disabled]::before,
.btn[disabled]::after{
  opacity: 0.35;
}