/* ============================================================
   CTA SYSTEM — Bouton de référence unifié pour tout le site
   Référence absolue : `.header-cta-button` ("Séance découverte")
   ============================================================

   Style PRIMARY (teal sur clair)   : tous les boutons d'action principaux
   Style ON-DARK (blanc sur sombre) : variantes pour fonds sombres
   Style SECONDARY (outline teal)   : variantes secondaires (RDV naturo)

   Sélecteurs `body .X` → spécificité 0,1,1 → surpasse les définitions des
   composants individuels sans recourir à !important.
   ============================================================ */

/* ============================================================
   PRIMARY CTA — fond teal, texte blanc (référence absolue)
   ============================================================ */

body .cta-btn,
body .header-cta-button,
body .hero-btn-primary,
body .a-propos-cta-button,
body .histoire-cta-button,
body .programmes-cta-button,
body .consultations-cta-button,
body .apercu-offre-cta-button,
body .naturo-btn-primary,
body .ressource-gratuite-cta-button,
body .valeurs-cta-button,
body .rbs-page .rbs-btn-primary,
body .lt-btn-primary {
    background: var(--color-primary, #00AAAA);
    background-color: var(--color-primary, #00AAAA);
    color: #FFFFFF;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-primary, system-ui, sans-serif);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Transition fluide sur toutes les propriétés (identique au header-cta-button de réf) */
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: normal;
}

body .cta-btn:hover,
body .header-cta-button:hover,
body .hero-btn-primary:hover,
body .a-propos-cta-button:hover,
body .histoire-cta-button:hover,
body .programmes-cta-button:hover,
body .consultations-cta-button:hover,
body .apercu-offre-cta-button:hover,
body .naturo-btn-primary:hover,
body .ressource-gratuite-cta-button:hover,
body .valeurs-cta-button:hover,
body .rbs-page .rbs-btn-primary:hover,
body .lt-btn-primary:hover {
    /* Teal légèrement assombri (équivalent à brightness 0.85 sans toucher au texte) */
    background: #009191;
    background-color: #009191;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    filter: none;
}

body .cta-btn:focus-visible,
body .header-cta-button:focus-visible,
body .hero-btn-primary:focus-visible,
body .a-propos-cta-button:focus-visible,
body .histoire-cta-button:focus-visible,
body .programmes-cta-button:focus-visible,
body .consultations-cta-button:focus-visible,
body .apercu-offre-cta-button:focus-visible,
body .naturo-btn-primary:focus-visible,
body .ressource-gratuite-cta-button:focus-visible,
body .valeurs-cta-button:focus-visible,
body .rbs-page .rbs-btn-primary:focus-visible,
body .lt-btn-primary:focus-visible {
    outline: 2px solid var(--color-primary, #00AAAA);
    outline-offset: 3px;
}

/* ============================================================
   ON-DARK CTA — fond blanc, texte teal (sur sections sombres)
   ============================================================ */

body .cta-btn--on-dark,
body .rbs-page .rbs-btn-on-dark,
body .rbs-page .rbs-tarif-price .rbs-btn,
body .lt-btn {
    background: #FFFFFF;
    background-color: #FFFFFF;
    color: var(--color-primary, #00AAAA);
    padding: 0.75rem 1.75rem;
    font-family: var(--font-primary, system-ui, sans-serif);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    transition:
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 200ms ease,
        color 200ms ease;
}

body .cta-btn--on-dark:hover,
body .rbs-page .rbs-btn-on-dark:hover,
body .rbs-page .rbs-tarif-price .rbs-btn:hover,
body .lt-btn:hover {
    background: var(--color-primary, #00AAAA);
    background-color: var(--color-primary, #00AAAA);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 170, 170, 0.4);
}

body .cta-btn--on-dark:focus-visible,
body .rbs-page .rbs-btn-on-dark:focus-visible,
body .lt-btn:focus-visible {
    outline: 2px solid var(--color-neutral, #FAC8B4);
    outline-offset: 3px;
}

/* ============================================================
   SECONDARY CTA — outline teal (peu utilisé, ex: naturo RDV)
   ============================================================ */

body .cta-btn--secondary,
body .naturo-btn-secondary,
body .valeurs-cta-button-secondary {
    background: transparent;
    color: var(--color-primary, #00AAAA);
    padding: calc(0.75rem - 2px) calc(1.75rem - 2px);
    font-family: var(--font-primary, system-ui, sans-serif);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    border: 2px solid var(--color-primary, #00AAAA);
    border-radius: 9999px;
    cursor: pointer;
    transition:
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 200ms ease,
        color 200ms ease;
}

body .cta-btn--secondary:hover,
body .naturo-btn-secondary:hover,
body .valeurs-cta-button-secondary:hover {
    background: var(--color-primary, #00AAAA);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 170, 170, 0.3);
}

body .cta-btn--secondary:focus-visible,
body .naturo-btn-secondary:focus-visible,
body .valeurs-cta-button-secondary:focus-visible {
    outline: 2px solid var(--color-primary, #00AAAA);
    outline-offset: 3px;
}

/* ============================================================
   FULL-WIDTH variant (header mobile + tarif price card)
   ============================================================ */

body .header-cta-button.mobile,
body .cta-btn--block {
    width: 100%;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    body .cta-btn,
    body .cta-btn--on-dark,
    body .cta-btn--secondary,
    body .header-cta-button,
    body .hero-btn-primary,
    body .a-propos-cta-button,
    body .histoire-cta-button,
    body .programmes-cta-button,
    body .consultations-cta-button,
    body .apercu-offre-cta-button,
    body .naturo-btn-primary,
    body .naturo-btn-secondary,
    body .ressource-gratuite-cta-button,
    body .valeurs-cta-button,
    body .valeurs-cta-button-secondary,
    body .rbs-page .rbs-btn,
    body .lt-btn,
    body .lt-btn-primary {
        transition: none;
    }
}