:root {
    --main_color: rgba(0,51,153,1);
    --main_color_50: rgba(0,51,153,0.5);
    --main_color_25: rgba(0,51,153,0.25);
    --main_color_10: rgba(0,51,153,0.1);
    
    
    --color_text: rgba(0,51,153,1);
    --color_text_2: rgba(0,51,153,1);
    --header_color_text: rgba(255,255,255,1);
    
    --background_color: rgba(248,248,255,1);
    --white: #ffffff;
    --logo: url(../img/gohy_white.png);
    --warpper-width: 1250px;
    --text-color:rgba(60,60,60,1);
    --font-family:'Lucida Sans', sans-serif;
}

@font-face {
	font-family: "Gohy";
	src: url('Gohy1.otf');
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
}
.color_red{
    color:red;
}
.color_green{
    color:#7cbb48;
}

* {
    margin:0;
    padding:0;	
}
body{
    background-color: var(--background_color);
    font-family: var(--font-family);
    position: relative;
    min-height:100vh; /* 1 */
    display:flex; /* 2 */
    flex-direction:column; /* 3 */
}

header{ /* CONTAINER PRINCIPAL */
    width: 100%;
    min-width: 200px;
    height: 60px;
    background: var(--main_color);
    position:fixed;
    z-index:10;
}

#header_wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    width: 100%;
    max-width: var(--warpper-width);
    /* min-width: 1200px; */
    margin: auto;
    padding: 0 30px 0 30px;
    box-sizing: border-box;
}

#header_logo{
    height: 30px;
    width: 100px;
    background-image: var(--logo);
    background-size: contain;
    background-repeat: no-repeat; 
    background-position: center center;
    margin-right:30px;
}

#header_logo a{
    display: inline-block;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#header_nav{ /* MENU DE NAVIGATION PRINCIPAL */
    height: 50px;
    margin-right: auto;
}

#header_nav ul{
    line-height: 50px;
    margin:0;
}

#header_nav ul li{
    display: inline-block;
    font-family: 'Lucida Sans', sans-serif;
    font-size: 13.5px;
    margin: 0 15px 0 0;
    
}

#header_nav ul li:last-child{
    margin: 0;
}

#header_nav ul li a{
    text-decoration: none;
    color: var(--header_color_text);
    display: inline-block;	
}

#header_nav ul li a:hover{
    opacity: 70%;
    /* color: var(--header_color_text); */
    /* color: rgba(255,255,255,1); */
}

#header_nav ul li a span{
    display: inline-block;
    height: 35px;
}

#header_search{
    flex: 1;
    padding:0 30px 0 30px;
    position: relative;
}

#header_search form {
    margin: 0 0 0px 0;
}

#header_search input[type="search"]{
    width: 80%;
    border-radius: 20px;
    border: none;
    line-height: 25px;
    padding-left: 10px;
    margin-right: 5px;
    outline: none;
    display: inline-block;
    margin: 0 ;
}

#header_search input[type="submit"]{
    background-image: url('../img/loupe.svg');
    background-size: 25px 50px;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    border: none;
    background-color: transparent;
    padding: 0;
    outline: none;
    vertical-align: middle;
    cursor: pointer;
}

#header_search input[type="submit"]:hover{
    background-position: 0 -25px;
}

#search_result{
    width: 300px;;
    height: 300px;
    max-height: 300px;
    border-radius: 15px;
    background: var(--white);
    z-index: 15;
    position: absolute;
    top:30px;
    border:2px solid var(--main_color);
    overflow: hidden;
}



#header_order_cart a{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-decoration: none;
    color: var(--header_color_text);
    height:50px;
    align-items: center;
    margin-right: 40px
}

#header_order_cart:hover, #header_order_cart a:hover{
    opacity: 70%;
}

#header_order_cart a{
    color: var(--header_color_text);
}
#header_order_cart .material-symbols-outlined{
    font-size:30px;
    margin-right: 10px;
}

#header_account{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-decoration: none;
    color: var(--header_color_text);
    height:50px;
    align-items: center;
}

#header_account .material-symbols-outlined{
    font-size:30px;
    margin-right: 10px;
}


#header_account a{
    text-decoration: none;
    color: var(--header_color_text);
}

#header_account a:hover{
    opacity: 70%;
}

/*****************************************************************************************************************/
.ui-autocomplete{
    
    background: var(--white) !important;
    border:2px solid var(--main_color) !important;
    max-height: 600px;
    width: 400px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

/* .ui-autocomplete-list {
    
} */

.ui-autocomplete-loading {
    background: white url("../img/ui-anim_basic.gif") right center no-repeat;
    background-size: 40px;;
}

div.autocomplete_search_article_wrapper {
    display:flex;
    padding:10px;
    font-family: var(--font-family) !important;
    color:var(--text-color);
    font-size: 12px;
    
}
div.autocomplete_search_article_img {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
div.autocomplete_search_article_img img{
    max-width: 60px;
    max-height: 60px;
}
div.autocomplete_search_article_details{
    margin-left: 10px
}
span.autocomplete_search_article_ref{
    color: var(--color_text_2);
    font-weight: bold;
}

li.ui-menu-item{
    border: none !important;
    margin:0 !important;
    max-width: 500px;
    background: var(--white) !important;
    border-bottom: 1px solid #cccccc !important;
}

li.ui-state-focus{
    background: var(--white) !important;
    border: none !important;
    border-bottom: 1px solid #cccccc !important;
    margin:0 !important;
}

/*****************************************************************************************************************/

footer{
    width: 100%;
    min-width: 200px;
    height: 40px;
    background: var(--main_color);
    z-index:10;
}
/*****************************************************************************************************************/
#container {
    flex-grow:1;
}

main {
    display: flex;
    flex-grow:1;
    margin: auto;
    width: 100%;
    max-width: var(--warpper-width);
    /* min-width: 1200px; */
    padding: 60px 30px 0px 30px;;
    box-sizing: border-box;
}
/*****************************************************************************************************************/
aside.left_nav{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    width:250px;
}

aside.left_nav div.left_nav_item{
    background: var(--white);
    margin-bottom: 8px;
    width: 250px;
    box-sizing: border-box;
    height:40px;
    box-shadow: 0px 1px 1px 1px rgba(50, 50, 50, 0.2);;
    border-radius: 2px;
}

aside.left_nav div.left_nav_item_active{
    border: 2px solid var(--main_color);
}

aside.left_nav div.left_nav_item a{
    padding:0px 10px;
    color:var(--text-color);
    display: flex;
    height: 100%;
    text-decoration: none;
    align-items: center;
}

aside.left_nav div.left_nav_item a div.left_nav_img_warpper{
    width:30px;
    height: 30px;
    margin-right:10px;
    text-align: center;
}


aside.left_nav div.left_nav_item a div.left_nav_img_warpper img{
    height:100%;
    max-height:30px;
    max-width:30px;
}
/*****************************************************************************************************************/
.h_nav{
    margin-top:20px;
    display: flex;
    flex-direction: row;
    width:100%;
    flex-wrap: wrap;
}

.h_nav div.left_nav_item{
    background: var(--white);
    margin: 0 10px 10px 0;
    width: auto;
    box-sizing: border-box;
    height:40px;
    box-shadow: 0px 1px 1px 1px rgba(50, 50, 50, 0.2);;
    border-radius: 2px;
}

.h_nav div.left_nav_item a{
    padding:0px 10px;
    color:var(--text-color);
    display: flex;
    width: 100%; 
    height: 100%;
    text-decoration: none;
    align-items: center;
    white-space:nowrap; 
    cursor: pointer;
}

.h_nav div.left_nav_item a div.left_nav_img_warpper{
    width:30px;
    height: 30px;
    margin-right:10px;
    text-align: center;
}


.h_nav div.left_nav_item a div.left_nav_img_warpper img{
    height:100%;
    max-height:30px;
    max-width:30px;
}
/******************************************************************************************************************/

section.product_section div.product_section_warpper{
    position: relative;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 20px 0 20px 20px;
}

.product_section {
    width: 100%;
}

.product_item{
    width: 200px;
    height: 200px;
    background: var(--white);
    box-sizing: border-box;
    box-shadow: 0px 1px 1px 1px rgba(50, 50, 50, 0.2);;
    border-radius: 2px;
    margin:15px;
    overflow: hidden;
}
.product_item a{
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.product_item a div.picto_price{
    position:absolute;
    right:2px;
    top:2px;
}

.product_item_img_warpper{
    height:90px;
    width:160px;
    text-align: center;
    margin: 5px auto 0px;
    line-height: 90px;
}

.product_item_img_warpper img{
    max-height:90px;
    max-width:160px
}
.product_item h4{
    
    padding:3px 10px;
    font-size:14px;;
    overflow: hidden;
    margin-top:10px;
    color:var(--text-color);
    font-weight: normal;
    text-align: center;
}
.product_article_code{
    text-align: center;
    padding: 5px 0px;
    font-size: 10px;
    height:20px;
}

.product_sub_category_title {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 50px;
}

/* .product_sub_category_title > h5{
    
} */

.product_sub_category_title > .brand {
    height: 40px;
    padding: 3px 5px;
    background-color: #ffffff;
    border: 1px solid #302f2f33;
    border-radius: 2px;
}

.product_sub_category_title > .brand > img {
    height: 100%;
}

.product_sub_category_separator {
    width: 100%;
}

.product_breadcrumb{
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.product_breadcrumb a {
    line-height: 20px;
}

.logo-only-brand {
    /* height: 60px; */
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 15px;
    padding: 5px 10px;
    background-color: #ffffff;
    border: 1px solid #c6c6c6;
    box-shadow: 1px 1px 3px 0 rgba(50, 50, 50, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.logo-only-brand p {
    margin: 0;
}

.logo-only-brand .logo {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.logo-only-brand .logo img {
    width: 150px;
}

.logo-only-brand .name {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.logo-only-brand .name p {
    font-size: 35px;
    font-weight: 600;
}

.logo-only-brand .description {
    flex: 5;
}

.logo-only-brand .leaveOnlyBrand {
    font-size: 15px;
    color: #ff0000;
    cursor: pointer;
}

.logo-only-brand .leaveOnlyBrand span {
    font-size: 15px;
}
/*****************************************************************************************************************/

.article_section{
    flex:1;

}

.article_section_warpper{
    background: var(--white);
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    padding:20px;
    
}

.article_details{
    flex:1;
    margin-right:20px;
}
.article_short_description{
    margin:30px 0 30px 0;
    width: 100%
}
.article_short_description h5{
    color:var(--color_text_2);
    font-size:22px;
    margin: 10px 0 7px 0;
    line-height: normal;
}
.article_short_description span{
    font-size:17px;
}

.article_info {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    line-height: 24px;
}

.article_info span {
    color: var(--main_color);
}

.article_info p {
    margin: 0;
}

.article_replace {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    line-height: 24px;
    color: #ff5151;
}

.article_replace p {
    margin: 0;
}

.article_picto_primary{
    margin-bottom:20px;
    height:40px;
}

.article_picto{
    font-family: "Gohy";
}
.article_picto_large{
    font-size:60px;
    line-height: 35px;
}
.article_picto_small{
    font-size:30px
}
.picto_color_new{
    color:#ecd600;
}
.picto_color_budget{
    color:#e34859;
}
.picto_color_best_deal{
    color:#0059a6;
}
.picto_color_eco{
    color:#7cbb48; 
}
.picto_color_poids_max{
    color : rgba(0, 0, 0, 0.7);
}

.article_gallery_warpper{
    width:500px;
    background: var(--white);
    display: flex;
    flex-direction: column;
}

.article_gallery_warpper_mini{
    width: 500px;
    display: flex;
}
.article_gallery_warpper_mini div.gallery_miniature{
    width: 85px;
    height: 85px;
    border: 1px solid #ccc;
    text-align: center;
    margin-bottom:4px;
    line-height: 85px;
    vertical-align: middle;
    margin-right: 10px;
    
}
.article_gallery_warpper_mini img{
    max-width: 78px;
    max-height: 78px;
    vertical-align: middle;
}
.article_gallery_warpper_gallery_large{
    width: 400px;
    margin-bottom: 10px;
}

.article_gallery_warpper_gallery_large div.gallery_image{
    width:  498px;
    height: 448px;
    text-align: center;
    border: 1px solid #ccc;
    line-height: 448px;
}
.article_gallery_warpper_gallery_large img{
    max-width: 470px;
    max-height: 430px;
    vertical-align: middle;
}

.article_shopping_details{
    width: 100%;
    margin-top:30px;
}

.article_price_table{
    width: 100%;
    border-radius: 20px;
    /* border: 1px solid #ccc; */
    border-collapse: collapse;
    box-sizing:content-box;
    overflow: hidden;
}

.article_price_table th, .article_price_table td{
    border: 2px solid var(--white);
    padding:10px 20px;;
    background: var(--background_color);
}

.article_price_table td div.price{
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.article_price_table td span.tvac{
    font-size:11px;
}

.article_price_table td span.tva{
    font-size:10px;
}

.product_section_warpper.document .article_price_table > tbody > tr > th{
    width: 35%;
}

.product_section_warpper.document .article_price_table > tbody > tr > td:last-of-type{
    width: 8%;
    padding: 8px 3px;
    text-align: center;
}

.article_header{
    width:100%;
    display:flex;
    justify-content: space-between;
}

/* .article_code{
    
} */

.article_logo_supplier a{
    display: block;
}

.article_logo_supplier img{
    height:40px;
}

.article_extra{
    width: 100%;
}

/**************************************************************************************************/

aside.right_nav {
    margin-top:20px;
    display: flex;
    flex-direction: column;
    width:250px;
}

a.classic_button, input.classic_button {
    background: var(--main_color);
    color: var(--header_color_text);
    border:none;
    padding:6px 10px;
    border-radius: 5px;
    box-sizing: border-box;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

a.button_small, input.classic_button{
    padding:3px 5px;
    font-size: 12px;
}

input.classic_button {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    font-size: 14px;
    padding:6px 10px;
}

.list_product_item {
    display: flex;
    flex-wrap: wrap;
}

section.product_section .group_btn_toggle {
    display: flex;
    align-items: center;
    gap: 3px;
}

section.product_section .group_filter {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: var(--main_color_10);
    border: 1px solid var(--main_color_25);
    border-radius: 15px;
    padding: 15px;
}

section.product_section .group_toggle_sort {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

section.product_section .group_toggle_sort #sort_article {
    width: 100px;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid var(--main_color);
    border-radius: 15px;
    color: var(--main_color);
}

section.product_section .group_toggle_sort #sort_article:focus {
    outline: none;
}

section.product_section .group_btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

section.product_section .group_btn > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 3px;
}

section.product_section .btn {
    color: var(--main_color);
    background-color: var(--header_color_text);
    background-image: none;
    border: 1px solid var(--main_color);
    border-radius: 15px;
    box-shadow: none;
    text-shadow: none;
}

section.product_section .btn.active {
    color: var(--header_color_text);
    background-color: var(--main_color);
}

section.product_section .btn:focus {
    outline: none;
}

section.product_section .btn:hover {
    background-position: 0;
}

section.product_section div.product_section_warpper.search {
    display: flex;
    flex-direction: column;
}

section.product_section .group_filter span {
    color: var(--text-color);
}

section.product_section .group_filter .group_btn_reset {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

section.product_section .group_filter .group_btn_toggle_filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

section.product_section .group_filter .group_btn_toggle_filter .btn:hover {
    color: var(--header_color_text);
    background-color: var(--main_color);
}

section.product_section .search_result .group_btn_show_more {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

section.product_section .search_result .group_btn_show_more .btn:hover {
    color: var(--header_color_text);
    background-color: var(--main_color);
}

.home .home_menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.home .home_menu .bloc_home {
    margin: 0;
}

#header_menu {
    display: none;
    margin-right: 15px;
}

.nav-toggle {
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 9px 10px;
    /* position: absolute; */
    cursor: pointer;
    left: 0;
    top: 5px;
}

.nav-toggle .icon-bar {
    border-radius: 1.5px;
    display: block;
    height: 3px;
    width: 22px;
    background-color: rgba(255,255,255,0.7);
    margin: 3px 0;
}

.toggle-menu-header {
    position: absolute;
    top: 60px;
    left: -144px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 35px 30px;
    background-color: var(--main_color);
}

.toggle-menu-header > a {
    color: var(--header_color_text);
}

.no-articles {
    width: 90%;
    margin: 100px auto 0;
}

@media (max-width: 1020px) {
    #header_wrapper {
        padding: 0 15px 0;
    }

    #header_wrapper #header_nav {
        display: none;
    }

    #header_wrapper #header_logo {
        margin-right: 0;
    }

    #header_wrapper #header_search {
        padding: 0 15px 0;
    }

    #header_wrapper #header_search form {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 5px;
    }

    #header_wrapper #header_order_cart a {
        margin-right: 20px;
    }

    #header_wrapper #header_menu {
        display: block;
    }
}

@media (max-width: 705px) {
    main .home {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    main .home .home_promo {
        width: 100% !important;
        margin: 0 0 15px 0 !important;
    }

    #header_wrapper #header_order_cart a {
        margin-right: 0;
    }

    #header_wrapper #header_order_cart > a > div:last-of-type {
        display: none;
    }

    #header_wrapper #header_search {
        padding: 0 10px 0 15px;
    }
}

@media (max-width: 570px) {
    header {
        position: static;
        min-width: 570px;
    }

    main {
        min-width: auto;
        padding-top: 0;
    }
}