/*
Theme Name: Storefront Child
Description: Theme enfant de Kay
Author: Kay
Author URI: https://localhost
Template: storefront
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Raleway:wght@300&display=swap');
@font-face {
    font-family: OptimusPrincepsSemiBold;
    src: url(font/OPTIMUSPRINCEPSSEMIBOLD.TTF);
}

a {
    color: #eaaf29;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
    outline: none;
}

#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body .woocommerce-info,
body .woocommerce-info::before,
body .woocommerce-info .button {
    background: #ebe2d7;
    color: #333;
}

body .woocommerce-info a {
    color: #333;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    background-color: #eaaf29;
    color: #fff;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    float: none;
}


/*.button,
button.alt,
input[type="button"].alt,
input[type="reset"].alt,
input[type="submit"].alt,
.button.alt,
.widget-area .widget a.button.alt {
    background: #abb6a4;
    color: white;
}*/

#primary-accueil {
    width: 100%;
}

.col-full {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

#primary {
    width: 70%;
    margin: 50px auto;
    float: none;
}


/*****************************
            GENERAL
*****************************/

#page #content {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.grid_4x2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.col-1-2 {
    grid-column: 1/3;
}

.col-3-3 {
    grid-column: 3/4;
}

.col-4-4 {
    grid-column: 4/5;
}

.row-1-2 {
    grid-row: 1/3;
}

.row-1-1 {
    grid-row: 1/2;
}

.row-2-2 {
    grid-row: 2/3;
}

img {
    border-radius: 0;
}


/*****************************
            HEADER
*****************************/

#masthead {
    margin-bottom: 0;
    position: fixed;
    width: 100vw;
    padding-top: 20px;
}

#masthead .col-full div {
    margin-bottom: 0;
}

.header-wrapper {
    width: 70%;
    margin: auto;
}

.primary-navigation {
    font-family: OptimusPrincepsSemiBold;
    font-size: 1.5em;
}

#masthead a {
    padding-top: 0;
    padding-bottom: 0;
}

.primary-navigation ul li a:hover {
    color: #eaaf29;
}


/*****************************
            FOOTER
*****************************/

footer .col-full {
    width: 70%;
    margin: auto;
}

.reseaux_sociaux {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.reseaux_sociaux p {
    font-size: 2em;
    color: #eaaf29;
    margin-right: 5%;
    margin-bottom: 0;
}

.secondary-navigation {
    border-top: solid 3px #fff;
    border-bottom: solid 3px #fff;
}

.secondary-navigation .menu,
.reseaux_sociaux {
    float: none;
    font-family: OptimusPrincepsSemiBold;
}

.secondary-navigation .menu a {
    text-decoration: none;
    font-size: 1.5em;
}

.secondary-navigation .menu li a:hover {
    color: #eaaf29;
}

#menu-footer_menu {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
}


/*****************************
            ACCUEIL
*****************************/

#content {
    margin-top: 133px;
}

#photo-accueil {
    width: 100%;
}

.titre,
.product_title,
#primary-accueil h1,
.related h2 {
    font-family: OptimusPrincepsSemiBold;
    font-variant: small-caps;
    color: #eaaf29;
}

.accueil-bloc-1>.wp-block-group__inner-container {
    display: flex;
}

.wp-block-group__inner-container .wp-block-image,
.wp-block-group__inner-container .wp-block-group {
    flex: 1 1;
}


/*****************************
        PAGE CLASSIQUE
*****************************/

#primary-accueil {
    float: none;
    margin: 50px auto;
    width: 70%;
}


/*****************************
        PAGE BOUTIQUE
*****************************/

#shop-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

#secondary {
    grid-column: 1/2;
    grid-row: 1/2;
    width: 100%;
}

#shop-main {
    grid-column: 2/5;
}

#shop-wrapper .columns-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#shop-wrapper .columns-3 li.product {
    width: 90%;
    margin-left: auto;
    margin-right: auto !important;
}

#shop-wrapper .columns-3 li.product:nth-child(3n+1) {
    grid-column: 1/2;
}

#shop-wrapper .columns-3 li.product:nth-child(3n+2) {
    grid-column: 2/3;
}

#shop-wrapper .columns-3 li.product:nth-child(3n+3) {
    grid-column: 3/4;
}

.Boutique-product .count {
    display: none;
}


/*****************************
        PAGE CATEGORIE
*****************************/

#secondary ul {
    list-style-type: square;
    line-height: 1.3rem;
}

#secondary ul li {
    margin-bottom: 1rem;
}

#secondary ul li a {
    font-family: "Source Sans Pro", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 100;
    font-size: 1.5rem;
    text-decoration: none;
}

#secondary .wc-block-product-categories-list-item-count {
    display: none;
}


/*****************************
        PAGE PRODUIT
*****************************/

#primary-product {
    float: none;
    margin: 50px auto;
    width: 70%;
}

#product-img-excerpt {
    overflow: hidden;
}

#product-img-excerpt figure img {
    margin-left: auto;
    margin-right: auto;
}


/*****************************
        PAGE COMPTE
*****************************/

#mon_compte .woocommerce-MyAccount-navigation {
    float: left;
    margin-right: 5.8823529412%;
}

#mon_compte .woocommerce-MyAccount-content {
    float: right;
    margin-right: 0;
}

#mon_compte .woocommerce-MyAccount-navigation-link a {
    color: #4261ab;
}

#mon_compte .woocommerce-MyAccount-content a {
    color: #eaaf29;
}


/*****************************
        VERSION MOBILE
*****************************/

@media(max-width:768px) {
    /*****************************
                HEADER
    *****************************/
    #masthead {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .header-wrapper {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        width: 90%;
    }
    #masthead .header-wrapper>.col-full {
        grid-column: 1/5;
        grid-row: 1/2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 5%;
    }
    #masthead .col-full .site-branding {
        width: 100%;
    }
    #masthead .col-full .site-search {
        width: 100%;
        display: block;
    }
    #masthead .storefront-primary-navigation {
        grid-column: 1/6;
        grid-row: 1/2;
    }
    #masthead .storefront-primary-navigation .main-navigation {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
    #masthead .storefront-primary-navigation .main-navigation .menu-toggle {
        grid-column: 5/6;
        grid-row: 1/2;
        margin-bottom: 30px;
        margin-left: 20px;
    }
    #masthead .storefront-primary-navigation .main-navigation .handheld-navigation {
        grid-column: 1/6;
        grid-row: 2/3;
        text-align: center;
    }
    /*****************************
                FOOTER
    *****************************/
    footer .col-full {
        width: 90%;
    }
    /*****************************
            PAGE ACUEIL
    *****************************/
    #content {
        margin-top: 94px;
    }
    #primary {
        width: 90%;
    }
    .accueil-bloc-1>.wp-block-group__inner-container {
        flex-direction: column;
    }
    /*****************************
            PAGE BOUTIQUE
    *****************************/
    #shop-wrapper {
        width: 90%;
    }
    /*****************************
            PAGE PRODUIT
    *****************************/
    #mon_compte {
        display: flex;
    }
    #mon_compte .woocommerce-MyAccount-navigation {
        flex: 1 1;
    }
    #mon_compte .woocommerce-MyAccount-content {
        flex: 3 1;
    }
    /*****************************
            PAGE COMPTE
    *****************************/
    #primary-product {
        width: 90%;
    }
    /*****************************
            PAGE CLASSIQUE
    *****************************/
    #primary-accueil {
        width: 90%;
    }
}

@media(max-width:576px) {
    /*****************************
                GENERAL
    *****************************/
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-noreviews,
    p.no-comments {
        display: flex;
        flex-direction: column;
    }
    /*****************************
                HEADER
    *****************************/
    .header-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
    #masthead .header-wrapper>.col-full {
        grid-column: 1/3;
        grid-template-columns: 1fr 4fr;
    }
    /*****************************
            PAGE BOUTIQUE
    *****************************/
    #shop-wrapper .columns-3 {
        display: flex;
        flex-direction: column;
    }
    /*****************************
            MON COMPTE
    *****************************/
    #mon_compte {
        flex-direction: column;
    }
}