/*
Theme Name: Chauffage
Theme URI: https://chauffagiste-wallon.be/
Author: Votre Nom
Author URI: https://chauffagiste-wallon.be/
Description: Thème WordPress basé sur landingpage.html pour chauffagiste en Wallonie.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chauffage
Tags: tailwindcss, responsive, landing-page
*/

body {
    font-family: 'Inter', sans-serif;
}

/* Phone CTA component */
.btn-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.9rem 2.25rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: none;
    box-shadow: 0 18px 35px rgba(13, 148, 136, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-phone:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 22px 40px rgba(15, 118, 110, 0.45);
    background: linear-gradient(135deg, #14b8a6, #0d9488);
}

.btn-phone:focus-visible {
    outline: 3px solid #0ea5e9;
    outline-offset: 2px;
}

.btn-phone__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.btn-phone__text {
    line-height: 1.2;
}

.btn-phone--block {
    width: 100%;
}

@media (max-width: 640px) {
    .btn-phone {
        width: 100%;
        font-size: 0.95rem;
        padding: 0.85rem 1.75rem;
    }
}

/* Distinct CTA (non-phone) */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.25rem;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--tw-color-primary, #0f172a);
    border: 2px solid rgba(15, 23, 42, 0.15);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn-cta:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    transform: translateY(-2px);
}

@media (max-width: 640px) {
    .btn-cta {
        width: 100%;
    }
}


a.btn-phone {
    background: #0d9488;
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    color: white;
    font-weight: 600;
}

a.btn-phone.btn-phone--block {
    height: 52px;
}

a.btn-phone.mx-0 {
    margin-left: 0px;
    margin-right: 0px;
    height: 55px;
}

/* Urgency CTA (Red/Orange for emergency) */
.btn-urgence {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 12px 30px rgba(220, 38, 38, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-urgence:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 35px rgba(185, 28, 28, 0.45);
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.btn-urgence:focus-visible {
    outline: 3px solid #f87171;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .btn-urgence {
        width: 100%;
        font-size: 0.8rem;
        padding: 0.75rem 1.25rem;
    }
}

/* Devis CTA (Green for quotes) */
.btn-devis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(22, 163, 74, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-devis:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 35px rgba(21, 128, 61, 0.4);
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.btn-devis:focus-visible {
    outline: 3px solid #4ade80;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .btn-devis {
        width: 100%;
    }
}