/*==============================================================
#
# EcoClimPro V2
# Buttons CSS
# Version : 2.0
#
==============================================================*/


/*==============================================================
# Bouton de base
==============================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:var(--button-height);

    padding:var(--button-padding);

    border-radius:var(--radius-full);

    font-family:var(--font-primary);

    font-size:1rem;

    font-weight:var(--button-font-weight);

    line-height:1;

    cursor:pointer;

    white-space:nowrap;

    user-select:none;

    transition:all .30s ease;

    position:relative;

    overflow:hidden;

    border:2px solid transparent;

    text-decoration:none;

}


/*==============================================================
# Effet brillant
==============================================================*/

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.7s;

}

.btn:hover::before{

    left:140%;

}


/*==============================================================
# Bouton principal
==============================================================*/

.btn--primary{

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
    );

    color:#fff;

    box-shadow:0 12px 30px rgba(10,108,176,.25);

}

.btn--primary:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(10,108,176,.35);

}

.btn--primary:active{

    transform:translateY(0);

}


/*==============================================================
# Secondaire
==============================================================*/

.btn--secondary{

    background:linear-gradient(
        135deg,
        var(--color-secondary),
        var(--color-secondary-dark)
    );

    color:#fff;

    box-shadow:0 12px 30px rgba(40,167,69,.25);

}

.btn--secondary:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(40,167,69,.35);

}


/*==============================================================
# Contour
==============================================================*/

.btn--outline{

    background:#fff;

    border:2px solid var(--color-primary);

    color:var(--color-primary);

}

.btn--outline:hover{

    background:var(--color-primary);

    color:#fff;

}


/*==============================================================
# Blanc
==============================================================*/

.btn--white{

    background:#fff;

    color:var(--color-primary);

    box-shadow:var(--shadow-sm);

}

.btn--white:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}


/*==============================================================
# Ghost
==============================================================*/

.btn--ghost{

    background:transparent;

    border:2px solid rgba(255,255,255,.35);

    color:#fff;

}

.btn--ghost:hover{

    background:#fff;

    color:var(--color-primary);

}


/*==============================================================
# Sombre
==============================================================*/

.btn--dark{

    background:var(--color-gray-900);

    color:#fff;

}

.btn--dark:hover{

    background:var(--color-primary);

}


/*==============================================================
# Succès
==============================================================*/

.btn--success{

    background:var(--color-success);

    color:#fff;

}


/*==============================================================
# Danger
==============================================================*/

.btn--danger{

    background:var(--color-danger);

    color:#fff;

}


/*==============================================================
# Grandes tailles
==============================================================*/

.btn--lg{

    height:64px;

    padding:0 42px;

    font-size:1.08rem;

}


/*==============================================================
# Petite taille
==============================================================*/

.btn--sm{

    height:44px;

    padding:0 22px;

    font-size:.90rem;

}


/*==============================================================
# Largeur complète
==============================================================*/

.btn--block{

    display:flex;

    width:100%;

}


/*==============================================================
# Bouton navigation
==============================================================*/

.btn--nav{

    margin-left:25px;

}


/*==============================================================
# Icônes
==============================================================*/

.btn svg{

    width:18px;

    height:18px;

}


/*==============================================================
# Etat désactivé
==============================================================*/

.btn:disabled{

    opacity:.55;

    cursor:not-allowed;

    pointer-events:none;

}


/*==============================================================
# Focus accessibilité
==============================================================*/

.btn:focus-visible{

    outline:3px solid var(--color-secondary);

    outline-offset:4px;

}


/*==============================================================
# Groupe de boutons
==============================================================*/

.btn-group{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}


/*==============================================================
# Bouton flottant téléphone
==============================================================*/

.btn-phone{

    position:fixed;

    right:25px;

    bottom:25px;

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--color-secondary);

    color:#fff;

    box-shadow:0 20px 40px rgba(0,0,0,.25);

    z-index:999;

    animation:pulsePhone 2.8s infinite;

    transition:.3s;

}

.btn-phone:hover{

    transform:scale(1.08);

}


/*==============================================================
# Bouton retour haut
==============================================================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:110px;

    width:52px;

    height:52px;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow-md);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.back-to-top.is-visible{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    transform:translateY(-4px);

}


/*==============================================================
# Animation téléphone
==============================================================*/

@keyframes pulsePhone{

    0%{

        box-shadow:0 0 0 0 rgba(40,167,69,.45);

    }

    70%{

        box-shadow:0 0 0 18px rgba(40,167,69,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(40,167,69,0);

    }

}


/*==============================================================
# Responsive
==============================================================*/

@media(max-width:768px){

    .btn{

        width:100%;

    }

    .btn-group{

        flex-direction:column;

        align-items:stretch;

    }

    .btn--nav{

        margin-left:0;

    }

    .btn-phone{

        width:60px;

        height:60px;

        right:18px;

        bottom:18px;

    }

}