/* -------------
    SOMMAIRE
------------- */

/* @AUTHOR : Nicolas BOUDOT */

/*
    00 - GÉNÉRAL
    01 - BOUTONS
    02 - BOUTONS ICONS
	03 - BOUTONS SPÉCIFIQUES
            Navigation secondaire
            Retour en haut de page
    04 - LIENS
*/



/* -----------------
  00 - GÉNÉRAL
----------------- */

/*
  Infos :
    1. On utilise la classe .btn pour établier les règles de bases. On lui applique toutes les propriétés
    car cela peut aussi s'appliquer sur des éléments dont on a pas la main et ainsi surcharger les styles.
    Ce bouton sera celui de base et donc celui le plus répendu sur tout le site.
    2. .like_btn est utilisée sur un élement parent pour ciblée un <a> enfant.
    On utilise un préfixe like_ pour mieux identifier son utilité.
*/

/* Bouton de base */
/* WooCommerce */
.wc-block-components-button.components-button:not(.wc-block-components-drawer__close),
.woocommerce a.button.alt,
.woocommerce a.button,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt,
.woocommerce button.button,
/* Gravity Form */
.gform_button_select_files,
.gform_button,
.like_btn a,
.btn {
    cursor: pointer;
    display: inline-flex;
	justify-content: center;
	align-items: center;
    background-color: var(--color-primary);
    color: var(--white);
    border-radius: 200px;
    border: none;
    font-size: 1.4rem;
    font-weight: 700;
	text-align: left;
    text-decoration: none;
    text-transform: uppercase;
	padding: 15px 25px;
    transition: background-color .4s, color .4s, border-color .4s;

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

input[type="file"]::file-selector-button,
.gform_button_select_files {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-quaternary);
    color: var(--color-primary);
    border-radius: 200px;
    border: none;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    padding: 15px 25px;
    transition: background-color .4s, color .4s, border-color .4s;
}

    /* Hover */
    /* WooCommerce */
    .wc-block-components-button.components-button:not(.wc-block-components-drawer__close):hover,
    .woocommerce a.button.alt:hover,
    .woocommerce a.button:hover,
    .woocommerce button.button.alt.disabled:hover,
    .woocommerce button.button.alt:hover,
    .woocommerce button.button:hover,
    /* Gravity Form */
    .gform_button_select_files:hover,
    .gform_button:hover,
    .like_btn a:hover,
    .btn:hover {
        background-color: var(--color-secondary);
    }
    .gform_button_select_files:hover,
    input[type="file"]::file-selector-button:hover {
        color: var(--white);
    }

/* Bouton icon */
.btn-icon,
.like_btn-icon {
    position: relative;
    background-color: var(--color-primary);
    color: var(--white);
    font-family: var(--font-primary);
}

    /* Hover */
    .btn-icon:hover,
    .like_btn-icon:hover {
        background-color: var(--red-dark);
        color: var(--white);
    }

    /* Icon */
    .btn-icon::after,
    .like_btn-icon::after {
        content: "";
        position: absolute;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--red-dark);
        color: var(--white);
        font-family: 'icomoon';
        font-size: 2.5rem;
        font-weight: 400;
        text-align: center;
        height: 100%;
        aspect-ratio: 1/1;
        transition: background-color .4s;
    }

        /* Hover */
        .btn-icon:hover::after,
        .like_btn-icon:hover::after {
            background: var(--red);
        }

/* Bouton small */
.btn-small {
    font-size: 1.3rem;
    padding: 6px 24px;
}



/* ---------------
  01 - BOUTONS
--------------- */

/*
  Infos :
    Selon la méthodologie BEM, on vient compléter le style d'une classe avec un Modifier,
    on nomme donc nos classes .btn--secondary. Il n'y a pas de btn--primary car c'est le style par défaut.
*/

/* Bouton secondaire */
.wc-block-components-button.components-button:not(.wc-block-components-drawer__close, .outlined), /* Widget panier > Valider la commande */
.woocommerce a.button.alt, /* Valider la commande */
.woocommerce button.button.alt.disabled, /* Ajouter au panier */
.woocommerce button.button.alt, /* Ajouter au panier */
.btn--secondary,
.like-btn--secondary a {
    background-color: var(--white);
    color: var(--color-secondary);
}

    /* Hover */
    .wc-block-components-button.components-button:not(.wc-block-components-drawer__close, .outlined):hover, /* Widget panier > Valider la commande */
    .woocommerce a.button.alt:hover, /* Valider la commande */
    .woocommerce button.button.alt.disabled:hover, /* Ajouter au panier */
    .woocommerce button.button.alt:hover, /* Ajouter au panier */
    .btn--secondary:hover,
    .like-btn--secondary a:hover {
        background-color: var(--color-secondary);
        color: var(--white);
    }

/* Bouton tertiaire */
.btn--tertiary,
.like-btn--tertiary a {
    background-color: var(--color-quaternary);
    color: var(--color-primary);
}

    /* Hover */
    .btn--tertiary:hover,
    .like-btn--tertiary a:hover{
        background-color: var(--color-secondary);
        color: var(--white);
    }



/* ---------------------------------
  02 - BOUTONS ICONS
--------------------------------- */

/* Exemple :

    // Bouton Icon - Plus
    .btn-icon--plus::after {
        content: "\e92c";
    }

    // Bouton Icon - Caddie
    .btn-icon--cart::after {
        content: "\e90b";
    }
*/



/* -----------------------------
    03 - BOUTONS SPÉCIFIQUES
----------------------------- */

/*
  Infos :
    On stylise ici les boutons unique
*/

/* Bouton burger */
.btn-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: auto;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
}
@media (min-width: 768px) {
    .btn-burger {
        width: 50px;
        height: 50px;
    }
}

    @media (min-width: 768px) {
        .btn-mobile {
            display: none;
        }
    }

/* Général */
.btn-burger span::before,
.btn-burger span::after,
.btn-burger span {
    display: block;
    background-color: var(--color-primary);
    height: 2px;
    width: 13px;
    margin: 0 auto;
    border-radius: 10px;
}
@media (min-width: 768px) {
    .btn-burger span::before,
    .btn-burger span::after,
    .btn-burger span {
        width: 20px;
    }
}

/* Barre du milieu */
.btn-burger span {
    position: relative;
    display: block;
    transition: background-color .4s;
}

    /* Active */
    .btn-burger.active span {
        background-color: transparent;
    }

    /* 1ère et 3ème barre */
    .btn-burger span::after,
    .btn-burger span::before {
        content: "";
        position: absolute;
        transition: transform .4s;
    }

        /* 1ère barre */
        .btn-burger span::before {
            bottom: calc(100% + 3px);
        }
        @media (min-width: 768px) {
            .btn-burger span::before {
                bottom: calc(100% + 5px);
            }
        }

            /* Active */
            .btn-burger.active span::before {
                transform: translateY(calc(100% + 3px)) rotate(45deg);
            }
            @media (min-width: 768px) {
                .btn-burger.active span::before {
                    transform: translateY(calc(100% + 5px)) rotate(45deg);
                }
            }

        /* 3ème barre */
        .btn-burger span::after {
            top: calc(100% + 3px);
        }
        @media (min-width: 768px) {
            .btn-burger span::after {
                top: calc(100% + 5px);
            }
        }

            /* Active */
            .btn-burger.active span::after {
                transform: translateY(calc(-100% - 3px)) rotate(-45deg);
            }
            @media (min-width: 768px) {
                .btn-burger.active span::after {
                    transform: translateY(calc(-100% - 5px)) rotate(-45deg);
                }
            }



/* Bouton Lien */
.btn-link {
    position: relative;
    color: var(--color-primary);
    font-weight: 800;
    text-decoration: none;
    transition: color .2s;
    display: flex;
    align-items: center;
}

    .btn-link::before {
        content: "\e90d";
        font-family: icomoon;
        margin-right: 4px;
    }

    /* Hover */
    .btn-link:hover {
        color: var(--color-secondary);
    }


/* Retour en haut de page */
.btn-scroll-top {
    position: fixed;
    right: 78px;
    bottom: 42px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    border: 2px solid var(--white);
    border-radius: 50%;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    padding: 15px;
    transform: rotate(-90deg);
    z-index: 10;
    background-color: var(--color-tertiary);
    transition: background-color .3s,
            opacity .2s, visibility .2s;
    opacity: 0;
    visibility: hidden;
}
.btn-scroll-top.show {
    opacity: 1;
    visibility: visible;
}

    @media (max-width: 991px) {
        .btn-scroll-top {
            right: 20px;
            bottom: 70px;
        }
    }

    /* Before */
    .btn-scroll-top::before {
        content: "\e90d";
        font-family: 'icomoon';
        font-size: 2.5rem;
        transition: color .4s, transform .4s;
    }

    /* Hover */
    .btn-scroll-top:hover::before {
        content: "\e90d";
        color: var(--white);
        transform: translateX(6px);
    }



/* -----------------------------
    04 - LIENS
----------------------------- */

/* Exemple :

    // Lien sur fond sombre
    .link-white {
        color: var(--white);
    }

    // Lien à la couleur différente du <a> par défaut
    .link-secondary {
        color: var(--color-secondary);
    }
*/

a[href^="mailto:"] {
    text-transform: initial;
}