/*
 * Button
 *   <a class="btn">Entrer</a>                       (implicit default)
 *   <a class="btn btn-outline btn-sm">Catalogue</a>
 *   <button class="btn" aria-busy="true" disabled>Envoi…</button>
 *
 *   variants  : btn-default · btn-secondary · btn-outline · btn-ghost · btn-link · btn-accent
 *   sizes     : btn-sm (36px) · base (44px) · btn-lg (52px) · btn-icon (square)
 *   modifiers : btn-block · btn-static (no scale on click)
 *   states    : :hover · :focus-visible · :active · :disabled / aria-disabled · aria-busy
 *   context   : .on-dark on a dark container (3D gallery, overlays, lightbox)
 *   group     : .btn-row, buttons side by side that wrap when space runs out
 *
 * Class order does not matter: variants and sizes only set --btn-* variables.
 * To fit a button to a context (dark background…), override those variables
 * rather than the properties.
 */

.btn {
  /* Taille (base) */
  --btn-h:  2.75rem;
  --btn-px: var(--space-6);
  --btn-fs: var(--text-xs);
  /* Couleurs (default) */
  --btn-bg:           var(--color-primary-dark);
  --btn-fg:           var(--color-on-primary);
  --btn-border:       transparent;
  --btn-bg-hover:     var(--color-primary);
  --btn-fg-hover:     var(--btn-fg);
  --btn-border-hover: var(--btn-border);
  /* Liseré clair en haut : relief « bois poli » des CTA pleins */
  --btn-shadow:       inset 0 1px 0 rgba(255, 255, 255, 0.08);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: var(--space-2) var(--btn-px);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-lg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-family: var(--font-sans);
  font-size: var(--btn-fs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    text-decoration-color var(--transition-fast),
    transform var(--transition-fast);
}
.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--btn-border-hover);
}
.btn:active:not(.btn-link, .btn-static, :disabled, [aria-disabled="true"]) { transform: scale(0.96); }
.btn:focus-visible {
  outline: var(--focus-ring);
  outline-color: var(--btn-ring, var(--color-primary-dark));   /* --btn-ring : posé par un contexte sombre */
  outline-offset: var(--focus-offset);
}

.btn svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }

/* ── États ── */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Chargement : reste lisible (pas d'opacité réduite), le spinner porte l'état */
.btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.btn[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Tailles & modifiers ── */
.btn-sm { --btn-h: 2.25rem; --btn-px: var(--space-4); }
.btn-lg { --btn-h: 3.25rem; --btn-px: var(--space-8); --btn-fs: var(--text-sm); }
.btn-icon {
  --btn-fs: var(--text-base);
  flex-shrink: 0;         /* toujours carré, même dans une barre flex serrée */
  width: var(--btn-h);
  padding: 0;
  letter-spacing: 0;      /* un glyphe seul (✕ ▶ ←) : l'interlettrage le décentre */
}
.btn-block { width: 100%; }

/* Zone de clic ≥ 44px pour les boutons plus petits que le visuel */
.btn-sm::after,
.btn-link::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}
.btn-link::after { inset: -14px -4px; }

/* ── Group ── */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ── Variantes ── */
.btn-default { /* valeurs de .btn */ }

.btn-secondary {
  --btn-bg:       var(--color-surface-container);
  --btn-fg:       var(--color-primary-dark);
  --btn-bg-hover: var(--color-surface-container-high);
  --btn-shadow:   none;
}

/* Ghost border (design.md) : outline à 20 %, jamais opaque */
.btn-outline {
  --btn-bg:           transparent;
  --btn-fg:           var(--color-on-surface);
  --btn-border:       rgba(var(--color-primary-dark-rgb), 0.2);
  --btn-bg-hover:     var(--color-surface-container);
  --btn-border-hover: rgba(var(--color-primary-dark-rgb), 0.35);
  --btn-shadow:       none;
}

.btn-ghost {
  --btn-bg:       transparent;
  --btn-fg:       var(--color-on-surface-variant);
  --btn-bg-hover: var(--color-surface-container);
  --btn-fg-hover: var(--color-primary-dark);
  --btn-shadow:   none;
}

.btn-link {
  --btn-bg:       transparent;
  --btn-bg-hover: transparent;
  --btn-fg:       var(--color-accent-text);
  --btn-fg-hover: var(--color-accent-text-hover);
  --btn-shadow:   none;
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--color-accent-text-rgb), 0.35);
}
.btn-link:hover { text-decoration-color: currentColor; }

.btn-accent {
  --btn-bg:       var(--color-accent);
  --btn-fg:       var(--color-primary-dark);
  --btn-bg-hover: color-mix(in srgb, var(--color-accent) 82%, var(--color-accent-text));
  --btn-shadow:   inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ── Contexte sombre ──
 * <div class="on-dark"> … <button class="btn btn-outline">
 * Mêmes variantes, recolorées pour un fond noir ou une photo.
 */
.on-dark { --btn-ring: rgba(255, 255, 255, 0.8); }
.on-dark .btn-default {
  --btn-bg:       var(--color-surface);
  --btn-fg:       var(--color-on-surface);
  --btn-bg-hover: var(--color-white);
}
.on-dark .btn-secondary {
  --btn-bg:       rgba(255, 255, 255, 0.12);
  --btn-fg:       rgba(255, 255, 255, 0.85);
  --btn-bg-hover: rgba(255, 255, 255, 0.22);
  --btn-fg-hover: var(--color-white);
}
.on-dark .btn-outline {
  --btn-fg:           rgba(255, 255, 255, 0.75);
  --btn-fg-hover:     var(--color-white);
  --btn-border:       rgba(255, 255, 255, 0.2);
  --btn-border-hover: rgba(255, 255, 255, 0.35);
  --btn-bg-hover:     rgba(255, 255, 255, 0.08);
}
.on-dark .btn-ghost {
  --btn-fg:       rgba(255, 255, 255, 0.65);
  --btn-fg-hover: var(--color-white);
  --btn-bg-hover: rgba(255, 255, 255, 0.08);
}
.on-dark .btn-link {
  --btn-fg:       var(--color-gold-pale);
  --btn-fg-hover: var(--color-white);
  text-decoration-color: rgba(var(--color-gold-pale-rgb), 0.4);
}