/*
================================================================================
  ◎ CHROMATIC DESIGN SYSTEM v1.0 — LIGHT CHÊNE EDITION
  Fichier : /opt/cortex/app/css/components/button.css
  Sémantique : Bouton d'action tactile résistant aux chevauchements et truncations
================================================================================
*/

.body-cta {
  background-color: var(--gold-prime);
  color: var(--bg-surface);
  border: 1px solid var(--border-hover);
  
  /* Dimensions fluides adaptables de 320px à 1440px */
  padding: clamp(0.75rem, 2vh, 1.15rem) clamp(1.25rem, 4vw, 2.5rem);
  
  border-radius: 12px;
  font-family: 'Wotfard', sans-serif;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  
  /* Rôle anti-truncation critique */
  width: auto;
  max-width: 100%;
  min-height: 3.2rem;
  text-align: center;
  white-space: nowrap;
  
  box-shadow: 4px 4px 0px oklch(0.60 0.15 80 / 0.15); /* Structure de plaque vissée */
  transform: translate(0px, 0px);
  transition: 
    transform var(--duration-z5) ease-out, 
    box-shadow var(--duration-z5) ease-out, 
    background-color var(--duration-z5) ease-out;
  cursor: pointer;
}

.body-cta svg {
  flex-shrink: 0; /* Empêche l'icône de s'écraser sur petit écran */
  overflow: visible; /* Évite absolument tout rognage de la flèche SVG */
}

.body-cta:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px oklch(0.60 0.15 80 / 0.30);
  background-color: var(--gold-bright);
}

.body-cta:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px transparent;
}

/* Variante Cuivre */
.body-cta-copper {
  background-color: var(--copper);
  border: 1px solid var(--border-accent);
  box-shadow: 4px 4px 0px oklch(0.55 0.18 50 / 0.15);
}

.body-cta-copper:hover {
  background-color: oklch(0.62 0.20 50);
  box-shadow: 1px 1px 0px oklch(0.55 0.18 50 / 0.30);
}

/* Variante Bouton Secondaire (Ghost) */
.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
  padding: clamp(0.75rem, 2vh, 1.15rem) clamp(1.25rem, 4vw, 2.5rem);
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  transition: background-color var(--duration-z5) ease, transform var(--duration-z5) ease;
}

.btn-secondary:hover {
  background-color: var(--gold-dim);
  transform: translateY(-1px);
}

/* Correction du chevauchement de la zone Hero CTAs */
.hero-ctas {
  display: flex;
  flex-wrap: wrap; /* Aligne verticalement sur mobile de manière fluide */
  gap: var(--space-z1);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

@media (max-width: 500px) {
  .hero-ctas {
    flex-direction: column;
    align-items: stretch; /* Les boutons prennent toute la largeur propre de l'écran mobile */
  }
  .body-cta, .btn-secondary {
    width: 100%;
    white-space: normal; /* Autorise le retour à la ligne sur mobile ultra-compact */
  }
}