/* ============================================================
   website/_components.css — composants partagés des pages publiques
   Centralise la géométrie commune des boutons CTA (home, about, pricing,
   features, contact, expert-comptable). Les variants de couleur restent
   dans les CSS de page car ils utilisent des variables CSS scopées par
   page (--home-green, --about-green, etc.).
   ============================================================ */

/* CTA pill — partagé par toutes les pages publiques */
.home-btn,
.about-btn,
.pricing-btn,
.features-btn,
.contact-btn,
.ec-btn {
    padding: 16px 32px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    border-radius: 99px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.home-btn i,
.about-btn i,
.pricing-btn i,
.features-btn i,
.contact-btn i,
.ec-btn i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.home-btn:hover,
.about-btn:hover,
.pricing-btn:hover,
.features-btn:hover,
.contact-btn:hover,
.ec-btn:hover {
    transform: translateY(-1px);
}

.home-btn:hover i,
.about-btn:hover i,
.pricing-btn:hover i,
.features-btn:hover i,
.contact-btn:hover i,
.ec-btn:hover i {
    transform: translateX(2px);
}