/* ════════════════════════════════════════════════════════════
   BOUTON PREMIUM — base reutilisable pour tout le site
   Inclure :  <link rel="stylesheet" href=".../css/button.css">
   Usage   :  <a class="btn-cta" href="...">Book a Session</a>
              <a class="btn-cta" href="...">Book a Session
                <svg viewBox="0 0 24 24"><path d="..."/></svg>
              </a>
   ════════════════════════════════════════════════════════════ */
:root {
  --f-cinzel: 'Cinzel', serif;
  --gradient-red: linear-gradient(180deg, #b3122e 0%, #7d1226 100%);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  /* Fond en 2 couches : base sombre + couche claire qui se "remplit" au hover */
  background-color: #7d1226;
  background-image: linear-gradient(180deg, #d4163a 0%, #9a1530 100%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  color: var(--text);
  font-family: var(--f-cinzel);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(139, 0, 0, 0.35);
  transition: background-size 0.35s ease, box-shadow 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .8), transparent);
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background-size: 100% 100%;   /* la couche claire remplit le bouton */
  box-shadow: 0 6px 28px rgba(204, 34, 0, 0.45);
  transform: translateY(-1px);
}

.btn-cta:active { transform: translateY(0); }

.btn-cta svg { width: 16px; height: 16px; fill: #fff; }

@media (prefers-reduced-motion: reduce) {
  .btn-cta { transition: box-shadow 0.2s; }
  .btn-cta:hover,
  .btn-cta:focus-visible { transform: none; }
}