/* ══════════════════════════════════════
   MACNOR — Système de boutons unifié
   Importé par toutes les pages du site
══════════════════════════════════════ */

/* ── Base commune ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font, 'Plus Jakarta Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s, transform .15s, box-shadow .18s;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .chevron { display: inline-flex; align-items: center; }
.btn .chevron svg { width: 15px; height: 15px; }

/* ── Tailles ── */
.btn--lg  { font-size: 15px; padding: 15px 32px; border-radius: 8px; }
.btn--sm  { font-size: 12px; font-weight: 600;  padding: 8px 16px;  border-radius: 5px; }
.btn--xs  { font-size: 11px; font-weight: 600;  padding: 6px 12px;  border-radius: 4px; }
.btn--block { width: 100%; }

/* ── 1. Principal bordeaux ── */
.btn--primary { background: #800020; color: #fff; border-color: #800020; }
.btn--primary:hover { background: #650018; border-color: #650018; box-shadow: 0 6px 20px rgba(128,0,32,0.28); }

/* ── 2. Outline bordeaux ── */
.btn--outline { background: transparent; color: #800020; border-color: #800020; }
.btn--outline:hover { background: #800020; color: #fff; box-shadow: 0 6px 20px rgba(128,0,32,0.20); }

/* ── 3. Sombre ── */
.btn--dark { background: #0f0f0f; color: #fff; border-color: #0f0f0f; }
.btn--dark:hover { background: #2a2a2a; border-color: #2a2a2a; box-shadow: 0 6px 20px rgba(0,0,0,0.20); }

/* ── 4. Secondaire outline neutre ── */
.btn--secondary { background: transparent; color: #0f0f0f; border-color: #e3ddd6; }
.btn--secondary:hover { background: #0f0f0f; color: #fff; border-color: #0f0f0f; }

/* ── 5. Ghost ── */
.btn--ghost { background: rgba(0,0,0,0.06); color: #0f0f0f; border-color: transparent; }
.btn--ghost:hover { background: rgba(0,0,0,0.12); }

/* ── 6. Blanc (sur fond sombre) ── */
.btn--white { background: #fff; color: #0f0f0f; border-color: #fff; }
.btn--white:hover { background: #f0f0f0; border-color: #f0f0f0; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

/* ── 7. Outline blanc (sur fond sombre) ── */
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn--outline-white:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* ── 8. Lien textuel ── */
.btn--link { background: transparent; color: #6b6b6b; border-color: transparent; padding-left: 0; padding-right: 0; font-weight: 500; }
.btn--link:hover { color: #0f0f0f; transform: none; text-decoration: underline; text-underline-offset: 3px; }
.btn--link--bordeaux { background: transparent; color: #800020; border-color: transparent; padding-left: 0; padding-right: 0; font-weight: 500; }
.btn--link--bordeaux:hover { color: #650018; transform: none; text-decoration: underline; text-underline-offset: 3px; }
.btn--link--light { color: rgba(255,255,255,0.7); }
.btn--link--light:hover { color: #fff; transform: none; }