/*
 Theme Name:   CDT Theme
 Theme URI:    http://cdt.fr/cdt-theme
 Description:  CDT theme
 Author:       Up-to-web
 Author URI:   http://up-to-web.com
 Template:     custom-theme
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  cdt
*/

html{
    scroll-behavior: smooth;
    scroll-padding-top: 200px;
}

body{
    font-family: 'Arial' !important;
}
header{
    z-index: 100 !important;
}

.search-container{
    display: none !important;
}

h1 > .trustpilot-widget{
    margin-left: auto;
    align-items: center;
    display: flex;
}

#trustpilot-widget-trustbox-0-wrapper{
    z-index: 0 !important;
}

.trustpilot-container{
    display: flex;
}
.trustpilot-container > div{
    display: flex;
    flex: auto;
}

.woocommerce-checkout #payment{
    background-color: #e9e9e9 !important;
}
.woocommerce-checkout #payment ul li::marker{
    content: '';
}

.btn-add-cart{
    background-color: #da9f00 !important;
    color: #fff !important;
    border: none !important;
    padding: 2px 5px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    transition: all .3s ease-in-out !important;
    border-radius: 3px !important;
}
.btn-add-cart:hover{
    background-color: #000 !important;
    color: #fff !important;
}

.woocommerce-checkout #payment #place_order{
    background-color: #da9f00 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all .3s ease-in-out !important;
}
.woocommerce-checkout #payment #place_order:hover{
    background-color: #000 !important;
    color: #fff !important;
}

.woocommerce-privacy-policy-text a{
    text-decoration: underline !important;
    color: #da9f00 !important;
}

.highlight{
    font-size: 14px !important;
    font-style: italic;
    line-height: 20px;
    color: #333 !important;
}

.medaillon-droite{
    display: flex;
    flex-direction: column;
    margin-left: auto;
    padding: 10px;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.medaillon-droite .mon-compte{
    display: flex;
    padding: 5px 10px;
    color: #fcda7a;
    background: #956d00;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    transition: all .3s ease-in-out;
    margin-bottom: auto;
}
.medaillon-droite .mon-compte:hover{
    background: #fcda7a;
    color: #956D00;
}

.medaillon-droite .nous-joindre, .medaillon-droite .notre-societe{
    display: flex;
    padding: 5px 10px;
    color: #ccc;
    background: #333;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    transition: all .3s ease-in-out;
}
.medaillon-droite .nous-joindre:hover, .medaillon-droite .notre-societe:hover{
    background: #ccc;
    color: #333;
}

.medaillon-droite .telephone{
    display: flex;
    padding: 5px 5px 5px 15px;
    color: #ccc;
    background: transparent;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    transition: all .3s ease-in-out;
    text-decoration: underline;
    text-decoration-color: #ccc;
    position: relative;
}
.medaillon-droite .telephone::before{
    font-family: 'dashicons';
    content: '\f525';
    color: #ccc;
    font-size: 12px;
    transform: rotate(90deg);
    position: absolute;
    left: 0;

}


/** perso mega-menu **/
nav{
    margin-left: auto !important;
}
nav .mega-menu {
    justify-content: space-around !important;
}
.mega-menu{
    justify-content: space-around !important;
}

.mega-menu > li > .sub-menu{
    align-items: flex-start !important;
    box-shadow: 0 0 5px #404040 !important;
    background-color: #FFF !important;
    justify-content: flex-end !important;
    min-height: 440px;
    height: 440px;
    padding: 0 !important;
    border: 10px solid  #ccc !important;
}
.mega-menu > li > .sub-menu > li {
    align-self: stretch;
    flex: 0 1 25% !important;
    padding:0 20px !important;
    position: static !important;
    margin-top: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.mega-menu > li > .sub-menu > li:first-child::before {
    
    position: absolute;
    left: 0;
    box-sizing: border-box;
    top: 0;
    display: flex;
    width: auto;
    height: 100%;
    box-shadow: 10px 0 15px -5px #999;
}
.mega-menu > li > .sub-menu > li:not(:last-child) {
    border-right: 1px solid #ccc;
}

/** image menu or **/
.mega-menu > li:first-child > .sub-menu > li:first-child:before{
    content: url('./images/fd-menu-or-big.v2.jpg');
}
/** image menu argent **/
.mega-menu > li:nth-child(2) > .sub-menu > li:first-child:before{
    content: url('./images/fd-menu-argent-big.v3.jpg');
}
/** image menu change **/
.mega-menu > li:nth-child(3) > .sub-menu > li:first-child:before{
    content: url('./images/fd-menu-change-big.jpg');
}

.mega-menu > li > .sub-menu > li > .sub-menu{
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 15px;
}
.mega-menu > li > .sub-menu > li > a{
    color: #c89a2b !important;
    padding: 0 !important;
    font-size: 16px !important;
    box-shadow: 0px 10px 13px -7px #ccc !important;
    margin-bottom: 20px !important;
}
.mega-menu > li > .sub-menu > li > a::after{
    display: none !important;
}
.mega-menu .icone-menu{
    margin-right: 0;
}
.mega-menu .item-title{
    color: #fff;
}
nav .mega-menu > li {
    min-width: 170px;
    padding-top: 12px;
    padding-bottom: 12px;
}
nav .mega-menu > li > a{
    padding: 0 !important;
    flex-direction: column;
    font-weight: 400;
    align-items: center;
}
nav .mega-menu > li > a > img{
    margin: 0 !important;
    height: 85px !important;
    width: auto !important;
}
nav .mega-menu > li > a::after, nav .mega-menu > li > a::before{
    display: none ;
}

nav .mega-menu > li > a > span{
    font-weight: 400;
    font-size: 16px;
    border-top: 1px solid #333;
    width: 100%;
    text-align: center;
}
nav .mega-menu > li > a > span::before{
    display: none;
}

nav .mega-menu > li > .sub-menu > li > .sub-menu > li > a{
    color: unset !important;
    color: #333 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    transition: all .3s ease-in-out !important;
    line-height: 16px !important;
}
nav .mega-menu > li > .sub-menu > li > .sub-menu > li > a:hover{
    color: #c89a2b !important;

}
nav .mega-menu > li > .sub-menu > li > .sub-menu > li > a::after,
nav .mega-menu > li > .sub-menu > li > .sub-menu > li > a::before{
    display: none !important;
}




/** FIN mega-menu **/

main{
    flex-direction: row !important;
    padding: 0 !important;
    position: relative;
    padding-top: 15px !important;
    /* gap: 15px; */
}


.infos-complementaires-voyage-devise{
    display: flex;
    flex-wrap: wrap;
}
.infos-complementaires-voyage-devise > ul{
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
    justify-content: flex-start;
    padding: 0 10px;
    gap: 10px;
    
    margin: 0;
}
.infos-complementaires-voyage-devise > ul > li{
    font-size: 12px;
    color: #333;
    font-weight: 400;
    
    padding-left: 5px;
}
.infos-complementaires-voyage-devise > ul > li::marker{
    content: url('icones/puce-liste.png');
    
}

.infos-complementaires-voyage-devise > ul > li > strong{
    font-size: 12px;
    color: #333;
    font-weight: 700;
}
.infos-complementaires-voyage-devise > ul > li > a{
    font-size: 12px;
    color: #333;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #333;
    transition: all .3s ease-in-out;
}
.infos-complementaires-voyage-devise > ul > li > a:hover{
    color: #da9f00;
    text-decoration-color: #da9f00;
}

.wp-block-column{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-content > h1{
    display: flex;
    border-bottom: 1px solid #956D00;
    color: #956D00;
    font-size: 28px;
    font-weight: 400;
    padding-bottom: 10px !important;
    margin-bottom: 0;
}

.main-content > h2, .wp-block-column > h2{
    /* display: flex; */
    border-bottom: 1px solid #666;
    color: #666;
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    padding: 15px 0 10px 0;
}

.main-content > h2 > strong{
    color: #666;
    font-size: 24px;
    font-weight: 600;
}

.main-content > h2 > a{
    text-decoration: underline;
    font-size: 24px;
    font-weight: 400;
    transition: all .3s ease-in-out;
    color: #333;
}
.main-content > h2 > a:hover{
    text-decoration: underline;
    text-decoration-color: #da9f00;
    color: #da9f00;
}
.main-content > h2 > a > strong{
    color: #666;
    font-size: 24px;
    font-weight: 400;
    transition: all .3s ease-in-out;

}
.main-content > h2 > a:hover > strong{
    color: #da9f00;
}

.main-content > ul > li > a > strong,
.main-content > p > a > strong{
    color: #333;
    font-size: 12px;
    transition: all .3s ease-in-out;
}
.main-content > ul > li > a:hover > strong,
.main-content > p > a:hover > strong{
    color: #da9f00;
}

.main-content > h3, .wp-block-column > h3{
    display: flex;
    
    color: #666;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    padding: 10px 0 10px 0;
    margin: 0;
}

.wp-block-column > h3 strong,
.main-content > h3 strong{
    display: flex;
    
    color: #666;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding: 10px 0 10px 0;
    margin: 0;
}

.main-content > h4, .wp-block-column > h4{
    display: flex;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

.main-content > p, .wp-block-column > p{
    /* display: flex; */
    color: #333;
    font-weight: 400;
    margin: 0;
    font-size: 12px;
}

.main-content > ul,
.wp-block-column > ul,
.main-content > ul > li > ul{
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 5px;
}
.main-content > ul > li,
.wp-block-column > ul > li,
.main-content > ul > li > ul > li    {
    /* display: flex; */
    font-size: 12px;
    font-weight: 400;
    color: #666;
    padding-left: 5px;
}
.main-content > ul > li::marker,
.wp-block-column > ul > li::marker,

.main-content > ul > li > ul > li::marker{
    content: url('icones/puce-liste.png');
}
.main-content > ul > li > a,
.main-content > p  a,
.wp-block-column > p a{
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-decoration: underline;
    transition: all .3s ease-in-out;
    display: inline-flex;
}
.main-content > ul > li > a:hover,
.main-content > p  a:hover,
.wp-block-column > p a:hover{
    color: #da9f00;
    text-decoration-color: #da9f00;
}

.main-content > ul > li > strong,
.main-content > p > strong,
.wp-block-column > p > strong{
    font-size: 12px;
    font-weight: 700;
    color: #333;
}

.main-content > ul > li > strong > a{
    font-size: 12px;
    font-weight: 700;
    color: #333;
    text-decoration: underline;
    transition: all .3s ease-in-out;
}
.main-content > ul > li > strong > a:hover{
    text-decoration-color: #da9f00;
    color: #da9f00;
}

.main-content em{
    font-size: 12px;
    font-weight: 400;
    color: #666;
    
}

.main-content blockquote{
    border-left: 5px solid #999;
    padding: 0 25px;
    text-align: justify;
    margin: 0;
}

.main-content blockquote a{
    font-size: 12px;
    color: #666;
    text-decoration: underline;
    transition: all .3s ease-in-out;
}
.main-content blockquote a:hover,
.main-content blockquote a:hover strong{
    color: #da9f00;
}

.main-content blockquote strong{
    font-size: 12px;
    color: #666;
    font-weight: 700;
    transition: all .3s ease-in-out;

}

.main-content blockquote h3{
    font-size: 18px;
    font-weight: 400;
    color: #666;
}

.main-content blockquote > p{
    font-size: 12px;
    line-height: 1.2em;
    color: #333;
    font-weight: 400;
    margin: 0;
}

.main-content blockquote > p > em{
    font-size: 12px;
    font-weight: 400;
    color: #666;
    line-height: 1.2em;
}

.main-content blockquote > p > a{
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-decoration: underline;
    transition: all .3s ease-in-out;
    display: inline-flex;
}
.main-content blockquote > p > a:hover{
    color: #da9f00;
    text-decoration-color: #da9f00;
}

.main-content blockquote > ul > li,
.main-content blockquote > ol > li{
    font-size: 12px;
    color: #666;
    font-weight: 400;
    padding-left: 5px;
}
.main-content blockquote > ul > li::marker{
    content: url('icones/puce-liste.png');
    display: inline-block;
    position: absolute;
    top: 3px;
    left: 0;
    
}

.main-content > .categorie-content{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-content > .categorie-content > h1{
    display: flex;
    border-bottom: 1px solid #956D00;
    color: #956D00;
    font-size: 28px;
    font-weight: 400;
    padding: 25px 0 10px 0;
    margin: 0;
}

.main-content > .categorie-content > p{
    /* display: flex; */
    font-size: 12px;
    color: #333;
    margin: 0;
}

.main-content > .categorie-content > p > a{
    display: inline-flex;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: #333;
}
.main-content > .categorie-content > p > a > strong{
    display: inline-flex;
    color: #78222a;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #78222a;
}

.main-content > .categorie-summary{
    display: flex;
    background: #f6f6f6;
    justify-content: space-between;
}

.main-content > .categorie-summary > .compte-produits{
    display: flex;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    padding: 5px;
}

.main-content > .categorie-summary > .filtre-produits{
    display: flex;
}
.main-content > .categorie-summary > .filtre-produits > span{
    font-size: 12px;
    color: #333;
    font-weight: 400;
    padding: 5px;
}
.main-content > .categorie-summary > .filtre-produits > select{
    font-size: 12px;
    color: #333;
    font-weight: 400;
    outline: none;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
}
.main-content > .categorie-summary > .affichage-produits{
    display: flex;
    gap: 5px;
}
.main-content > .categorie-summary > .affichage-produits > button{
    border: none !important;
    padding: 0;
    width: 20px;
    height: 20px;
    transition: all .3s ease-in-out;
    cursor: pointer;
}

.categorie-description-footer{
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: #333;
    font-size: 12px;
}
.categorie-description-footer > h2{
    display: flex;
    font-size: 24px;
    color: #666;
    font-weight: 400;
    border-bottom: 1px solid #666;
    margin: 0;
}
.categorie-description-footer > p{
    display: flex;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    margin: 0;
    box-sizing: border-box;
}
.logos_liste{
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 0;
    box-sizing: border-box;
    flex-wrap: wrap;
}
.logos_liste > img{
    height: 32px;
    width: auto;
}
.categorie-description-footer ul,
.categorie-description-footer li > ul{
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #666;
    font-weight: 400;
    margin: 0;
    
}
.categorie-description-footer li{
    display: block;
    line-height: 1.2em;
    font-size: 12px;
    color: #666;
    font-weight: 400;
    position: relative;
    padding-left: 15px;
    
}
.categorie-description-footer li::before{
    content: url('icones/puce-liste.png');
    display: inline-block;
    position: absolute;
    top: 3px;
    left: 0;
    
}

.categorie-description-footer li > ul > li{
    display: block;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
    color: #666;
    font-weight: 400;
    position: relative;
    padding-left: 15px;
    
}
.categorie-description-footer li > ul > li::before{
    content: url('icones/puce-liste.png');
    display: inline-block;
    position: absolute;
    top: 3px;
    left: 0;
}

.categorie-description-footer a{
    display: inline-flex;
    font-size: 12px;
    color: #666;
    text-decoration: underline;
    text-decoration-color: #666;
    margin: 0;
}

.description-or-bourse{
    border: 1px solid #78222a;
    padding: 10px;
    color: #333;
    font-weight: 400;
    font-size: 12px;
    display: block !important;
}
.description-or-bourse > a{
    color: #333;
    transition: all .3s ease-in-out;
}
.description-or-bourse > a:hover{
    color: #da9f00;
    text-decoration-color: #da9f00;
}
.description-or-bourse > a:last-child{
    text-decoration-color: #78222a;
}
.description-or-bourse > a:last-child > strong{
    color: #78222a;
    transition: all .3s ease-in-out;
    font-size: 12px;
}
.description-or-bourse > a:hover > strong{
    color: #da9f00;
    text-decoration-color: #da9f00;
}


.btn-grille{
    background-image: url('icones/ico-grille.png');
}
.btn-grille:hover{
    background-image: url('icones/ico-grille-on.png');
}
.btn-grille-on{
    background-image: url('icones/ico-grille-on.png');
}
.btn-liste{
    background-image: url('icones/ico-liste.png');
}
.btn-liste:hover{
    background-image: url('icones/ico-liste-on.png');
}
.btn-liste-on{
    background-image: url('icones/ico-liste-on.png');
}

.woocommerce-notices-wrapper{
    position: absolute;
}




.bandeau-gauche{
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 10px;
    gap: 25px;
    flex: 0 1 auto;
}

.main-content{
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    padding: 15px;
    gap: 15px;
    flex: 2;
}

.container-bandeau-droit{
 display: flex;
 flex: 0 1 275px;
 padding: 0 10px;
 position: relative;
 width: fit-content;
 box-sizing: border-box;
}



.bandeau-droit{
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    gap: 25px;
}





.bandeau-gauche .panier,.bandeau-gauche .graphique{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    position: relative;
}

.bandeau-gauche .panier a{
    border-bottom: 1px inset #ccc;
    padding: 5px 0;
    display: flex;
    align-items: center;
    transition: all .3s ease-in-out;
    gap: 5px;
    background-color: #eee;
}
.bandeau-gauche .panier a:hover{
    text-decoration: underline;
    text-decoration-color: #333;
}
.bandeau-gauche .panier a span{
    color: #333;
    font-size: 12px;
    display: flex;
}

.bandeau-gauche .panier a .bullet{
    position: absolute;
    display: flex;
    color: #fff;
    font-size: 9px;
    background-color: red;
    justify-content: center;
    align-items: center;
    width: 16px ;
    height: 16px ;
    border-radius: 8px;
    right: 5px;
    font-weight: 700;
}

.bandeau-gauche > div{
    display: flex;
    
}
.bandeau-gauche .partage-rs{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bandeau-gauche .partage-rs >div:first-child{
    display: flex;
    padding: 6px 11px;
    background: #666;
    color: #fff;
    border: 1px solid #ccc;
    font-weight: 700;
    font-size: 12px;
}
.bandeau-gauche .partage-rs .twitter,.bandeau-gauche .partage-rs .facebook{
    display: flex;
    gap: 5px;
}
.livraison-securisee{
    display: flex;
    box-sizing: border-box;
}
.livraison-securisee > img{
    width: 100%;
    height: auto;
}

.coordonnees-cdt{
    flex-direction: column;
    gap: 10px;
}

.coordonnees-cdt .coord-titre{
    background-color: #666;
    color: #fff;
    padding: 6px 11px;
    border: 1px solid #ccc;
    font-size: 12px;
    font-weight: 700;
}

.coordonnees-cdt p{
    font-size: 12px;
    margin: 0;
}

.coordonnees-cdt strong{
    color: #333;
    font-size: 12px;
}
.coordonnees-cdt a{
    color: #333;
    text-decoration: underline;
    font-size: 12px;
}
.coordonnees-cdt a:hover{
    color: #da9f00;
    text-decoration: none;
}



.bandeau-droit .nouvelles-dispo, .bandeau-droit .idees-cadeaux {
    /* display: flex; */
    border: 1px solid #ccc;
    width: fit-content;
}
.bandeau-droit .nouvelles-dispo a, .bandeau-droit .idees-cadeaux a{
    /* display: flex;
    flex: auto; */
}
.bandeau-droit .nouvelles-dispo img, .bandeau-droit .idees-cadeaux img{
    /* display: flex;
    flex: auto; */
}

.bandeau-droit .revue-presse{
    /* display: flex; */
    width: fit-content;
}
.bandeau-droit .revue-presse iframe{
    box-sizing: border-box;
}

header{
    background-color: #000 !important;
    border-bottom: 10px solid #e6c260 !important;
    height: 160px !important;
}


.custom-logo, .sticky-logo{
    height: 75% !important;
    width: auto !important;
    object-fit: scale-down;
} 

footer{
    background-color: #333 !important;
    padding: 0 !important;
}

.footer-haut{
    flex-direction: column !important;
    padding-top: 60px !important;
    background: url('images/fd-pied.png') no-repeat #fff !important;
    background-size: 100% 49px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.footer-haut img{
    margin-right: 0 !important;
    
}

.footer-haut > div{
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.footer-haut > div > div{
    flex: auto;
    display: flex;
    border-left: 1px solid #e8e8e8;
    justify-content: center;
    align-items: center;
}

.footer-haut > div > div:first-child{
    border-left: none;
}

.footer-haut p{
    color: #ccc;
    padding: 10px 5px;
    text-align: center;
    font-size: 13px;
    margin: 0;
}

.footer-bas{
    padding: 30px 0 !important;
    justify-content: center !important;
}

.liens-footer a{
    color: #999 !important;
    font-size: 13px !important;
}

.liens-footer a:not(:last-child)::after{
    content: '-' !important;
    right: -3px !important;
    color: #999 !important;
}


.link:hover{
    color: #fcda7a !important;
}

.link:hover::before{
    transform: scaleX(0) !important;
}


/**
Template archive metal cat
**/
.woocommerce-breadcrumb{
    position: absolute;
    margin: 0;
    top: 0;
    font-size: 12px;
    color: #666;
    padding-left: 20px;
    border-bottom: 1px #e5e5e5 solid;
    box-sizing: border-box;
}
.woocommerce-breadcrumb::before{
    content: url('./icones/ico-accueil.png');
    position: absolute;
    left: 0;
}
.woocommerce-breadcrumb > a{
    font-size: 12px;
    color: #666;
    transition: all .3s ease-in-out;
}
.woocommerce-breadcrumb > a:hover{
    color: #956D00;
}

.metal-products-list{
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}
.metal-product-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    flex: 0 0 calc(25% - 20px);
    padding: 20px;
    gap: 10px;
    border: 1px solid #ccc;
}
.metal-product-item > img{
    width: 130px;
    height: 130px;
    box-sizing: border-box;
    object-fit: contain;
}
.metal-product-item > h4{
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #956d00;
    width: 100%;
    align-items: center;
    padding: 0;
    margin: unset;
    height: 50px;
}
.metal-product-item > .prix-produit{
    display: flex;
    font-size: 12px;
    color: #333;
}
.metal-product-item > .prix-produit > strong{
    font-size: 12px;
    font-weight: 700;
    color: #333;
}
.metal-product-item > a{
    display: flex;
    align-self: center;
    padding: 3px 15px;
    background: #da9f00;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    transition: all .3s ease-in-out;
    font-size: 12px;
}
.metal-product-item > a:hover{
    background: #000;
}

/**
Templates woo-commerce
**/
.woocommerce, .single-product, .product{
    display: flex !important;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.product{
    gap: 15px;
    padding: 10px;
}
.woocommerce{
    padding: 15px 0;
}

.custom-product{
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    width: unset !important;
    gap: 15px;
    position: relative;
}
.custom-product > h1{
    border-bottom: 1px solid #956D00;
    color: #956D00;
    font-size: 28px;
    font-weight: 400;
    padding-bottom: 10px !important;
    margin-bottom: 0;
}




.related{
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
}
.related > h2{
    background-color: #666 !important;
    color: #fff;
    font-size: 12px;
    padding: 7px 30px 7px 20px;
    background: url('icones/ico-relation.png') no-repeat;
    background-position: 100%,50%;
    margin: 0 !important;
}

.related img{
    width: 75px !important;
    height: 75px !important;
    box-sizing: border-box;
    object-fit: contain;
}
.related ul{
    display: flex;
    padding: 0 !important;
    justify-content: space-between !important;
}
.related li {
    display: flex ;
    border: none !important;
    
    
}

.related a{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    text-decoration: none;
    transition: all .3s ease-in-out;
}
.related a:hover{
    text-decoration: underline !important;
    text-decoration-color: #000 !important;
}
.related a:last-child{
    margin-top: auto !important;
    display: flex;
    align-self: center;
    margin-bottom: 25px;
    box-sizing: border-box;
    background: #da9f00;
    text-decoration: none !important;
    color: #fff;
    padding: 3px 15px;
    border-radius: 3px;
    transition: all .3s ease-in-out;
    font-size: 12px;
}
.related a:last-child:hover{
    background: #000;
    color: #fff;
    text-decoration: none !important;
}
.related a h2{
    color: #956D00 !important;
    font-size: 12px !important;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 3px 5px;
    text-align: center;
    box-sizing: border-box;
    max-width: 60%;
}

.single-product-container-achats-ventes{
    display: flex;
    flex-direction: column;
    flex: auto;
    
}

.single-product-container-achats-ventes .boutons-achats-ventes{
    display: flex;
    flex: auto;
    justify-content: space-between;
    
}

.single-product-container-achats-ventes .boutons-achats-ventes > div{
    display: flex;
}
.single-product-container-achats-ventes .boutons-achats-ventes > div > button{
    display: block;
    height: 27px;
    width: 186px;
    border: none;
}

.btn-achats{
    background: url('./images/onglet-achete.png') no-repeat;
}
.btn-ventes{
    background: url('./images/onglet-vend.png') no-repeat;
}
.btn-alertes{
    background: url('./images/onglet-alerte.png') no-repeat;
}
.btn-achats-on{
    background: url('./images/onglet-achete-on.png') no-repeat;
}
.btn-ventes-on{
    background: url('./images/onglet-vend-on.png') no-repeat;
}
.btn-alertes-on{
    background: url('./images/onglet-alerte-on.png') no-repeat;
}

.panel-achats-ventes-alertes{
    display: flex;
    flex: auto;
    position: relative;
    flex-direction: column;
    box-sizing: border-box;
    
}

.panel-achats-ventes-alertes > div{
    box-sizing: border-box;
    border: 1px solid;
    position: relative;
    flex-direction: column;
    padding: 15px;
    gap: 15px;
    background: #f6f6f6;
}


.panel-achats-ventes-alertes > div > div > p{
    color: #333;
    font-size: 12px;
}


.panel-achats{
    border-color: #7baa20 !important;
    display: flex ;
    background: url('./images/fd-onglets-achete.png') repeat-x #f6f6f6 !important;
}


.operations-achats{
    display: flex;
    box-sizing: border-box;
    gap: 1px;
    background: #7baa20;
}
.operations-achats > div{
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
    box-sizing: border-box;
    background: #f6f6f6;
    gap: 15px;
}

.operations-achats h3{
    display: flex;
    /* flex: auto; */
    font-size: 18px;
    color: #7baa20;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding-top: 15px;
    font-weight: 400;
}

.operations-achats sup{
    color: #7baa20;
}

.detail-gre{
    display: flex;
    flex-direction: column;
    /* flex: auto; */
    justify-content: space-between;
    padding-right: 15px;
    box-sizing: border-box;
    gap: 5px;
}
.detail-gre > .detail-entete, .detail-bourse > .detail-entete{
    display: flex;
    flex: auto;
    flex-direction: row;
    justify-content: space-between;
}
.detail-gre > .detail-entete > .detail-quantite,
.detail-bourse > .detail-entete > .detail-quantite{
    display: flex;
    flex-direction: column;
    flex: auto;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    line-height: 1.3;
    border-bottom: 1px solid #ccc;
    justify-content: center;
    padding: 5px 0;
}
.detail-gre > .detail-entete > .detail-quantite > span,
.detail-bourse > .detail-entete > .detail-quantite > span{
    font-size: 10px;
    color: #333;
    font-weight: 400;
    
}
.detail-gre > .detail-entete > .detail-prix{

    display: flex;
    flex-direction: column;
    flex: auto;
    align-items: flex-end;
    justify-content: center;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    
    border-bottom: 1px solid #ccc;
}
.detail-gre > .detail-entete > .detail-prix > span{
    font-size: 10px;
    color: #333;
    font-weight: 400;
    font-style: italic;
}



.vente-gre > .detail-gre > .detail-entete > .detail-prix{
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 5px 0;
}

.non-boursable{
    display: flex;
    /* flex: auto; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    
}
.non-boursable > p{
    font-size: 12px;
    color: #333;
}

.detail-bourse{
    display: flex;
    /* flex: auto; */
    flex-direction: column;
    justify-content: space-between;
    padding-left: 15px;
    box-sizing: border-box;
    gap: 5px;
}
.detail-bourse > .detail-entete > .detail-prix{
    display: flex;
    flex: auto;
    align-items: flex-start;
    justify-content: flex-end;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
}
.detail-bourse > .detail-entete > .detail-frais{
    display: flex;
    flex: auto;
    align-items: flex-start;
    justify-content: center;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
}

.detail-bourse p{
    display: flex !important;
    position: relative !important;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    margin: 0;
}


.panel-ventes{
    border-color: #9d0d15 !important;
    display: none;
    background: url('./images/fd-onglets-vend.png') repeat-x #f6f6f6 !important;

}


.operations-ventes{
    display: flex;
    box-sizing: border-box;
    gap: 1px;
    background: #9d0d15;
}
.operations-ventes > div{
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
    box-sizing: border-box;
    background: #f6f6f6;
    gap: 15px;
}

.operations-ventes h3{
    display: flex;
    /* flex: auto; */
    font-size: 18px;
    color: #9d0d15;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding-top: 15px;
    font-weight: 400;
}

.operations-ventes sup{
    color: #9d0d15;
}



.panel-alertes{
    border-color: #956d00 !important;
    display: none;
    background: url('./images/fd-onglets-alerte.png') repeat-x #f6f6f6 !important;

}

.operations-description{
    padding-top: 15px;
    background: url('./images/fd-onglets-mentions.png') no-repeat 50% 0 #f6f6f6;
}

.puce-achats{
    color: #7baa20;
    font-size: 12px;
}
.puce-ventes{
    color: #9d0d15;
    font-size: 12px;
}
.puce-alertes{
    color: #956d00;
    font-size: 12px;
}



/**
Fiche produit metal
**/

.paragraphe-cours-prix{
    display: flex;
    font-size: 12px;
    color: #333;
    margin: 0;
}

.container-ancres-avis{
    display: flex;
    gap: 20px;
}
.container-ancres-avis a{
    position: relative;
    display: flex;
    color: #333;
    font-size: 12px;
    text-decoration: underline;
    text-decoration-color: #333;
    transition: all .3s ease-in-out;
    padding: 0;
}
.container-ancres-avis a:not(:last-child):after{
    content: ' - ';
    position: absolute;
    right: -12px;
    color: #333;
}
.container-ancres-avis a:hover:after{
    color: #333;
}

.container-ancres-avis a:hover{
    text-decoration-color: #956D00;
    color: #956D00;
}

.container-ancres-avis .trustpilot-widget{
    margin-left: auto;
}

.container-entete-produit{
    display: flex;
    gap: 15px;
    box-sizing: border-box;
    justify-content: space-between;
}

.single-product-container-image{
    position: relative;
    display: flex;
    justify-content: space-evenly;
    padding: 30px 15px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.image-principale{
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.image-principale img{
    max-width: 350px;
    max-height: 350px;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.non-contractuel{
    display: flex;
    position: absolute;
    bottom: 0;
    font-size: 10px;
    margin: 0;
    padding: 10px 0;
    color: #333;
}

.single-product-container-image-recto-verso{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 0 0 25%;
    box-sizing: border-box;
    
}


.image-recto, .image-verso{
    display: flex;
    box-sizing: border-box;
    max-width: 150px;
    max-height: 150px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}



.single-product-container-caracteristiques{
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    padding: 15px;
    gap: 2px;
}

.single-product-container-caracteristiques h3{
    display: flex;
    margin: 0;
    margin-bottom: 15px;
    font-size: 12px;
    color: #333;
    font-weight: 700;
}


.single-product-container-caracteristiques .caracteristique{
    display: flex;
    justify-content: space-between;
}
.single-product-container-caracteristiques h3:not(:first-child){
    margin-top: 15px;
    
}
.single-product-container-caracteristiques .caracteristique > span{
    font-size: 12px;
    color: #333;
}
.single-product-container-caracteristiques .caracteristique > strong{
    color: #333;
    font-weight: 700;
    font-size: 12px;
    margin-left: 20px;
    text-align: right;
}

.single-product-container-caracteristiques .sur-ordre{
    color: #7baa20;
    font-size: 12px;
    display: flex;
}
.single-product-container-caracteristiques .sur-ordre img{
    margin-right: 5px;
}
.single-product-container-caracteristiques .delai-expedition{
    color: #7baa20;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.single-product-container-caracteristiques .delai-expedition-indisponible{
    color: #a93b2f;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.single-product-container-caracteristiques .delai-expedition img,.single-product-container-caracteristiques .delai-expedition-indisponible img {
    margin-right: 5px;
}


.single-product-container-cours{
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    border: 1px solid #ccc;
    background: #ccc;
}

.single-product-container-cours .entete{
    display: flex;
    gap: 1px;
    justify-content: space-between;
}
.single-product-container-cours .entete > div{
    display: flex;
    flex-direction: column;
    flex: 0 1 33%;
    justify-content: center;
    align-items: center;
    background: #000;
    color: #ccc;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    box-sizing: border-box;
}
.single-product-container-cours .entete div:last-child{
    padding: 0;
}
.single-product-container-cours .entete > div > div{
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.single-product-container-cours .entete > div >div:last-child{
    border-top: 1px solid #ccc;
    font-weight: 400;
}

.single-product-container-cours .cours{
    display: flex;
    gap: 1px;
    justify-content: space-between;
}
.single-product-container-cours .cours > div{
    display: flex;
    flex-direction: column;
    flex: 0 1 33%;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #333;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    box-sizing: border-box;
}

.cours-cotation, .cours-paris-janvier{
    padding: 0 !important;
}
.cours-cotation > div, .cours-paris-janvier > div{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    padding: 5px 10px;
    box-sizing: border-box;
}
.cours-cotation .prix-dollars, .cours-paris-janvier .variation{
    border-top: 1px solid #ccc;
}

.cours-prime, .variation{
    display: flex;
    flex-direction: row !important;
    justify-content: center;
}
.cours-prime-plus, .variation-plus{
    
    background: #f7fff6 !important;
    color: #39aa31 !important;
}
.cours-prime-moins, .variation-moins{
    
    background: #fdf6f6 !important;
    color: #a93b2f !important;
}
.cours-paris{
    background: #fef2d1 !important;
    color: #956D00 !important;
    font-weight: 700 !important;
}

.detail-declinaisons-gre, .detail-declinaisons-bourse{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: auto;
    gap: 5px;
}

.detail-declinaisons-gre > .detail-row, .detail-declinaisons-bourse > .detail-row{
    display: flex;
    flex-direction: row;
    flex: auto;
    justify-content: space-between;
    color: #333;
    font-size: 12px;
    box-sizing: border-box;

}
.detail-declinaisons-bourse > .detail-row > div{
    display: flex;
    flex: 1 1 100%;
    box-sizing: border-box;

}

.detail-declinaisons-gre > .detail-row > .detail-prix{
    font-weight: 700;
}
.detail-declinaisons-gre > .detail-row > .detail-prix >  span{
    font-weight: 700;
    font-size: 12px;
    color: #333;
}
.detail-declinaisons-bourse > .detail-row > .detail-frais{
    font-weight: 700;
}


.detail-frais{
    justify-content: center;
}
.detail-prix{
    justify-content: flex-end;
}

.not-online{
    display: flex;
    box-sizing: border-box;
    justify-content: flex-end;
}
.not-online > div{
    display: flex;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    background: #666;
    padding: 3px 20px 3px 20px;
    font-weight: 700;
}

.erreur-qte{
    display: none;
    padding: 5px 10px;
    color: #661d1d;
    background: #ffeded;
    border: 1px solid #ff4949;
    font-size: 10px;
    border-radius: 3px;
}

.ajout-panier-succes{
    display: none;
    padding: 5px 10px;
    color: #085229;
    background: #e7faf0;
    border: 1px solid #13ce66;
    font-size: 10px;
    border-radius: 3px;
}

.detail-ordre, .recap-ordre {
    display: none;
    flex-direction: column;
    gap: 5px;
}
.detail-ordre label{
    font-size: 12px;
    color: #333;
    font-weight: 400;
    
}
.recap-ordre div, .detail-ordre div{
    display: flex;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    gap: 5px;
}
.recap-ordre div:last-child, .detail-ordre div:last-child{
    justify-content: flex-end;
}
#form_achat_gre, #form_achat_bourse, #form_vente_gre, #form_vente_bourse{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#form_achat_gre > .form-achat-entete, #form_achat_bourse > .form-achat-entete,
#form_vente_gre > .form-achat-entete, #form_vente_bourse > .form-achat-entete{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 25px 0 5px 0 !important;

}
#form_vente_gre > .form-achat-entete > div > span{
    font-size: 9px;
    font-style: italic;
    font-weight: 400;
    color: #333;
}
#form_achat_gre #nb_pieces_gre, #form_achat_bourse #nb_pieces_ordre, #form_achat_bourse #input_montant_limite{
    border: 1px solid #ccc !important;
    font-weight: 700 !important;
    width: 100px !important;
    padding: 3px 5px;
    font-size: 12px;
    border-radius: 3px;
    outline: none !important;
    color: #7baa20;
}
#form_vente_gre #nb_pieces_bourse, #form_vente_bourse #nb_pieces_vente_ordre{
    border: 1px solid #ccc !important;
    font-weight: 700 !important;
    width: 50px !important;
    padding: 3px 5px;
    font-size: 12px;
    border-radius: 3px;
    outline: none !important;
    color: #9d0d15;
}

#form_achat_gre > input[type="submit"], #form_achat_bourse input[type="submit"],#form_achat_bourse input[type="button"]{
    background: #7baa20;
    border: none !important;
    color: #fff;
    border-radius: 3px;
    padding: 3px 20px 3px 10px;
    align-self: flex-end;
    transition: all .3s ease-in-out;
}

#form_vente_gre > input[type="submit"], #form_vente_bourse > input[type="submit"]{
    background: #9d0d15;
    border: none !important;
    color: #fff;
    border-radius: 3px;
    padding: 3px 20px 3px 10px;
    align-self: flex-end;
    transition: all .3s ease-in-out;
}
#form_achat_gre > input[type="submit"]::after{
    content: "\f139";
    font-family: 'dashicons';
    color: #000;
    font-size: 12px;
    display: inline-block;
}
#form_achat_gre > input[type="submit"]:hover, #form_achat_bourse > input[type="submit"]:hover, #form_achat_bourse input[type="button"]:hover,
#form_vente_gre > input[type="submit"]:hover, #form_vente_bourse > input[type="submit"]:hover{
    background: #000;
}

.form-achat-row{
    display: flex;
    justify-content: space-between;
}
.total-achat-gre, .total-achat-bourse{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #7baa20;
    font-weight: 700;
}
#total_vente_bourse, #total_vente_ordre{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #9d0d15;
    font-weight: 700;
}

.montant-tmp{
    display: flex;
    font-size: 12px;
    font-weight: 700;
    color: #333;
} 
.total-vente-gre{
    display: flex;
    font-size: 12px;
    font-weight: 700;
    color: #9d0d15;
}


.custom-product > #description{
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    padding: 15px;
    gap: 15px;
}
.custom-product > #description > h2{
    display: flex;
    font-size: 24px;
    color: #666;
    font-weight: 400;
    margin: 0;
    border-bottom: 1px solid #666;
}
.custom-product > #description > h3{
    display: flex;
    color: #333;
    font-size: 12px;
    margin: 0;
}
.custom-product > #description > p{
    display: flex;
    font-size: 12px;
    color: #333;
    margin: 0;
}

.custom-product > #graphique{
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    padding: 15px;
    gap: 15px;
    box-sizing: border-box;
    width: 100%;
}

.custom-product > #graphique > h2{
    display: flex;
    font-size: 24px;
    color: #666;
    font-weight: 400;
    margin: 0;
    border-bottom: 1px solid #666;
}

/* .custom-product > #graphique > div{
    display: flex;
    width: 100%;
} */

/**
Archive
**/

.products{
    display: flex !important;
    justify-content: center !important;
    /* width: 100%; */
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 15px;
    
}
.products::before{
    content: none !important;
    display: none !important;
}

.products li{
    display: flex !important;
    flex-direction: column ;
    flex: 1 1 20% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #ccc;
    min-width: 220px;
    max-width: 250px;
}

.products li a{
    display: flex !important;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    gap: 10px;
}
.products li a:hover{
   text-decoration: underline !important;
    text-decoration-color: #956D00 !important;
}

.products li a h2{
    display: flex;
    text-align: center;
    color: #956D00;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 10% !important;
    font-size: 12px !important;
    font-weight: 700;
    width: 75%;
    height: 30px;
    justify-content: center;
    align-items: center;
}

.products li a:last-child{
    display: flex;
    align-self: center;
    background-color: #da9f00 !important;
    font-size: 12px !important;
    padding: 3px 15px !important;
    text-decoration: none !important;
    transition: all .3s ease-in-out;
    color: #fff !important;
    margin-bottom: 20px;
    margin-top: auto !important;
}
.products li a:last-child:hover{
    background-color: #000 !important;
    text-decoration: none !important;
    color: #fff !important;

}

.products .image-metal{
    width: 150px !important;
    height: 150px !important;
    object-fit: contain;
}
.image-metal-mini{
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
}

.products .image-currencies{
    width: 42px !important;
    height: auto !important;
    box-shadow: 0 0 5px 4px #e9e9e9 !important;
}
.image-currencies-mini{
    width: 48px !important;
    height: auto !important;
    box-shadow: 0 0 5px 4px #dfdfdf !important;
}

.product-currencies > a{
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

.metal-price{
    font-size: 12px !important;
    color: #333 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}
.metal-price > b{
    
    color: #333 !important;
}

.currencies-price{
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding-top: 15px;
    margin-bottom: 0 !important;
}
.cdt-vend{
    display: flex;
    justify-content: center;
    color: #7baa20;
    font-size: 12px;
    font-weight: 400;
}
.conversion-price{
    display: flex;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #333;
}


/**
* Liste produits cours
**/
.liste-produits-cours, .liste-produits-hors-cours, .liste-produits-autres{
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    box-sizing: border-box;
    
}

.main-content > form{
    display: flex;
    flex-direction: column;
    /* flex: auto; */
    gap: 5px;
    box-sizing: border-box;
}

.div-btn-vente{
    display: flex;
    justify-content: flex-end;
    
}

.div-btn-vente > input{
    padding: 10px;
    border-radius: 3px;
    background: #da9f00;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    border: none;
    outline: none;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.div-btn-vente > input:hover{
    background: #000;
}
.liste-produits-cours > .entete, .liste-produits-hors-cours > .entete, .liste-produits-autres > .entete{
    display: flex;
    background: #ccc;
    gap: 1px;
    flex: auto;
    box-sizing: border-box;

}
.liste-produits-cours > .entete > div, .liste-produits-hors-cours > .entete > div, .liste-produits-autres > .entete > div{
    display: flex;
    flex: auto;
    flex-basis: 14%;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #000;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    padding: 5px;
    box-sizing: border-box;
}
.liste-produits-cours > .entete > div:first-child, .liste-produits-hors-cours > .entete > div:first-child{
    flex-basis: 30% !important;
}
.liste-produits-cours > .product-row{
    display: flex;
    background: #ccc;
    gap: 1px;
    flex: auto;
    box-sizing: border-box;
    transition: all .3s ease-in-out;
    position: relative;
}
.liste-produits-hors-cours > .product-row, .liste-produits-autres > .product-row{
    display: flex;
    background: #ccc;
    gap: 1px;
    flex: auto;
    box-sizing: border-box;
    transition: all .3s ease-in-out;
    position: relative;
    border-bottom: 1px solid #ccc;
}


.liste-produits-cours > .product-row[title]:hover::after{
    content: attr(title);
    position: absolute;
    background: #956D00;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%);
    padding: 5px;
    z-index: 2;
}
.liste-produits-cours > .product-row:hover > div{
    background: #000 !important;
    color: #fff !important;
}
.liste-produits-cours > .product-row:nth-child(odd) > div, 
.liste-produits-hors-cours > .product-row:nth-child(odd) > div{
    background: #f7f7f7;
}
.liste-produits-cours > .product-row > div,
.liste-produits-hors-cours > .product-row > div,
.liste-produits-autres > .product-row > div{
    display: flex;
    flex: auto;
    flex-basis: 14%;
    justify-content: center;
    align-items: center;
    color: #333;
    background: #FFF;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    padding: 5px;
    box-sizing: border-box; 
    transition: all .3s ease-in-out;
}
.liste-produits-cours > .product-row > .first-col,

.liste-produits-cours > .product-row > .first-col-argent-demonetise{
    justify-content: flex-start;
    flex-basis: 30% !important;
    gap: 5px;
    color: #956D00;
    justify-content: space-between;
    font-weight: 700 ;
}

.liste-produits-hors-cours > .product-row > .first-col{
    justify-content: flex-start;
    flex-basis: 30% !important;
    gap: 5px;
    color: #956D00;
    justify-content: flex-start;
    font-weight: 700 ;
}
.liste-produits-hors-cours > .product-row > .first-col  .devise-country{
    font-size: 12px;
    color: #333;
    font-weight: 700;
    text-align: left;
}
.liste-produits-hors-cours > .product-row > .first-col .p-title{
    display: flex;
    flex-direction: column;
}
.liste-produits-hors-cours > .product-row > .first-col .devise-devise{
    color: #333;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}
.liste-produits-hors-cours .contacter{
    display: flex;
    justify-content: center;
}
.liste-produits-hors-cours .contacter a{
    color: #956D00;
    font-size: 12px;
    font-weight: 700;
}

.liste-produits-cours > .product-row > .first-col-argent-demonetise > div {
    display: flex;
    gap: 5px;
}
.liste-produits-cours > .product-row > div > div > img,
.liste-produits-cours > .product-row > .first-col-argent-demonetise > div > div > img{
    display: flex;
    height: 40px;
    width: auto;
    box-sizing: border-box;
}
.liste-produits-cours > .product-row > div > input, .liste-produits-autres > .product-row > div > input{
    display: flex;
    box-sizing: border-box;
    outline: none;
    width: 50px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: auto;
}

.transaction-argent-demonetise > div:not(:first-child){
    justify-content: center;
}
.transaction-argent-demonetise > div:last-child > input{
    margin: 0;
}

.transaction-gre-a-gre > div:not(:first-child),
.transaction-ordre-bourse > div:not(:first-child){
    justify-content: flex-end ;
}
.transaction-gre-a-gre > .cdt-achete,
.transaction-ordre-bourse > .cdt-achete,
.transaction-argent-demonetise > .cdt-achete,
.liste-produits-autres .cdt-achete{
    background: #fef2d1 !important;
    color: #956D00 !important;
    font-weight: 700 !important;
}

.qte-vente-insuffisante, .nan-message{
    display: none;
    color:red;
    font-size:10px;
}


.contenu{
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    gap: 15px;
}
.contenu > h2{
    color: #666;
    border-bottom: 1px solid #666;
    font-size: 24px;
    padding: 25px 0 10px 0;
    margin: 0;
    font-weight: 400;
}
.contenu h3 a{
    color: #666;
    font-size: 18px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    transition: all .3s ease-in-out;
}
.contenu h3 a:hover{
    color: #da9f00;
}
.contenu > p{
    color: #333;
    font-size: 12px;
    font-weight: 400;
    margin: 0;
}
.contenu > p > a{
    color: #da9f00;
    font-size: 12px;
    font-weight: 400;
    margin: 0;
    transition: all .3s ease-in-out;
}
.contenu > p > a:hover{
    text-decoration: underline;
    text-decoration-color: #da9f00;
    text-underline-offset: 2px;
}
.contenu strong{
    color: #333;
    font-size: 12px;
    font-weight: 700;
}
.contenu strong a{
    color: #333;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    transition: all .3s ease-in-out;
    text-underline-offset: 3px;
}
.contenu strong a:hover{
    color: #da9f00;

}
.contenu ul{
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
    padding-left: 10px;
}
.contenu li{
    font-size: 12px;
    font-weight: 400;
    color: #333;
    padding-left: 5px;
}
.contenu li::marker{
    content: url('icones/puce-liste.png');
}
.contenu li a{
    font-size: 12px;
    font-weight: 400;
    color: #333;
    padding-left: 5px;
    transition: all .3s ease-in-out;
    text-underline-offset: 3px;
    text-decoration: underline;
}
.contenu li a:hover{
    color: #da9f00;
}

.contenu figure table{
    font-size: 12px;
}
.contenu figure table td{
    border: 1px solid #ccc;
}
.contenu figure a{
    font-size: 12px;
    color: #956d00;
    font-weight: 700;
    transition: all .3s ease-in-out;
}
.contenu figure a:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contenu td{
    font-size: 12px;
}

#calculateur-taxe{
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: none;
}
#calculateur-taxe > .container-choix,
#calculateur-taxe > .container-options
{
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid #ccc;
    padding: 15px;
}
#calculateur-taxe > .container-choix > div{
    display: flex;
    flex-direction: row;
    /* justify-content: space-around; */
    gap: 25px;
    align-items: flex-end;
    flex-wrap: wrap;
}
#calculateur-taxe > .container-options > div{
    display: flex;
    flex-direction: row;
   justify-content: space-between;
   gap: 25px;
}
#calculateur-taxe .type-vente,
#calculateur-taxe .origine-justifiable{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#calculateur-taxe label{
    font-size: 12px;
    font-weight: 400;
    color: #333;
}

.radio-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}
.radio-content input[type="radio"]{
    margin: 0;
}
#calculateur-taxe h2{
    display: flex;
    font-size: 24px;
    color: #666;
    border-bottom: 1px solid #666;
    margin: 0;
    padding: 10px 0 10px 0;
    font-weight: 400;
}
#calculateur-taxe p{
    font-size: 12px;
    color: #333;
    font-weight: 400;
    margin: 0;
}

#calculateur-taxe > .form-submit{
    display: flex;
    justify-content: flex-end;
}

#calculateur-taxe select{
    outline: none;
    border: 1px solid #ccc;
    color: #333;
    font-size: 12px;
    border-radius: 3px;
    background: #fff;
    padding: 5px;
}
#calculateur-taxe optgroup{
    font-size: 12px;
    font-weight: 700;
    color: #333;
}
#calculateur-taxe option{
    font-size: 12px;
    font-weight: 400;
    color: #333;
    padding: 5px;
    white-space: normal;
}

#calculateur-taxe input[type="submit"]{
    padding: 5px 10px;
    border: none;
    margin: none;
    background: #da9f00;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    transition: all .3s ease-in-out;
    outline: none;
    border-radius: 3px;
}
#calculateur-taxe input[type="submit"]:hover{
    background: #000;
}

#calculateur-taxe input[type="number"], #calculateur-taxe input[type="date"],
#calculateur-taxe input[type="text"]{
    outline: none;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
}
#calculateur-taxe input[type="number"]{
    width: 50px;
}

.resultat-calculateur-taxe{
    display: none;
    flex-direction: column;
    gap: 15px;
}


.resultat-calculateur-taxe h2{
    display: inline;
    font-size: 24px;
    color: #666;
    border-bottom: 1px solid #666;
    font-weight: 400;
    padding: 10px 0;
    margin: 0;
}

.resultat-calculateur-taxe h2 > span{
    display: inline-flex;
    color: #666 !important;
    font-size: 24px !important;
    font-weight: 700;
}


.resultat-calculateur-taxe h3{
    display: flex;
    font-size: 18px;
    color: #666;
    
    font-weight: 400;
    padding: 10px 0;
    margin: 0;
}

.resultat-calculateur-taxe p{
    display: block;
    font-size: 12px;
    color: #333;
    margin: 0;
}


.total_estimation{
    font-size: 24px;
    font-weight: 700;
    color: #666 !important;
    padding: 0;
    margin: 0;
    display: inline-flex;
}

.ordre-interdit, .qte-insuffisante{
    display: none;
    padding: 20px;
    background: #fcc;
    color: #9d0d15;
    border: 3px dotted #9d0d15;
    font-size: 12px;
    font-weight: 700;
}
.qte-insuffisante > span{
    color: #9d0d15;
    font-size: 12px;
    font-weight: 700;
}

.cotation-paris{
    display: none;
}

.frais-calculateur,.cotationparismontant,.cotationparismontanttotal,.montantttcfinal, .meilleure-offre,.montantttctpv, .montanttpv, .qte_prod, .nom_prod, .puht, .prixlotht, .montanttmp, .montantttc, .resultat-calculateur-taxe p >.total_estimation{
    font-size: 12px !important;
    color: #333 !important;
    font-weight: 600;
    margin: 0;
    padding: 0;
    display: inline-flex;
}
.montanttmp, .montantttc{
    font-weight: 700;
}

.resultat-calculateur-taxe ul{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}
.resultat-calculateur-taxe li {
    display: flex;
    font-size: 12px;
    color: #333;
}

.resultat-calculateur-taxe strong{
    color: #333;
    font-weight: 700;
    font-size: 12px;
    margin: 0;
}

.resultat-calculateur-taxe label{
    font-size: 12px;
    color: #333;
    font-weight: 400;
}

.resultat-calculateur-taxe input{
    outline: none;
    font-size: 12px;
    color: #333;
    font-weight: 400;
}


.section-tpv{
    display: none;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    border: 1px solid #ccc;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform .3s ease-in-out;
    box-sizing: border-box;
}

.section-tpv > div{
    display: flex;
    box-sizing: border-box;
}
.section-tpv div > div{
    display: flex;
    gap: 15px;
    align-items: center;
    flex: auto;
    box-sizing: border-box;
}


.origine-non{
    display: none;
    flex-direction: column;
    gap: 15px;
}
.origine-oui{
    display: none;
    flex-direction: column;
    gap: 15px;
}

.show-origine{
    display: flex !important;
}


/**
Devises tableau cours
**/
#cours-devise{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
.devise-entete, .devise-vers-euros, .euros-vers-devise{
    display: flex;
    gap: 1px;
    background-color: #ccc;
    box-sizing: border-box;
}
.devise-entete > div{
    display: inline-flex;
    background-color: #000;
    color: #ccc;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    flex: auto;
    padding: 10px 0;
    box-sizing: border-box;
    text-align: center;
    width: 33%;
}

.devise-vers-euros > div, .euros-vers-devise > div{
    display: flex;
    background-color: #FFF;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    justify-content: center;
    align-items: center;
    flex: auto;
    padding: 10px 0;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}
.devise-vers-euros > div{
    /* font-weight: 700 !important; */
    font-size: 14px !important;
}

.infos-complementaires-devises{
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
}
.infos-complementaires-devises .liste-images {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid #ccc;
    padding: 15px;

}
.infos-complementaires-devises .liste-images > img{
    width: 100%;
    height: auto;
}
.infos-complementaires-data{
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid #ccc;
    padding: 15px;
    width: 25%;
}
.infos-complementaires-data h3{
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: #333;
    font-weight: 700;
    margin: 0;
}
.infos-complementaires-data p{
    margin: 0;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    display: flex;
    align-items: center;
}
.infos-complementaires-data img{
    width: 16px;
    height: auto;
}

.liste-caracteristiques{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.liste-caracteristiques .caracteristique{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.liste-caracteristiques span{
    display: block;
    font-size: 12px;
    color: #333;
    font-weight: 400;
}
.liste-caracteristiques strong{
    display: block;
    font-size: 12px;
    color: #333;
    font-weight: 700;
}
.liste-caracteristiques a{
    color: #333;
    text-decoration: underline;
    text-decoration-color: #333;
    font-size: 12px;
    font-weight: 700;
    transition: all .3s ease-in-out;
}
.liste-caracteristiques a:hover{
    text-decoration-color: #da9f00;
    color: #da9f00;
}



.single-product-container-achats-ventes-devises{
    display: flex;
    flex-direction: column;
    flex: auto;
}
.single-product-container-achats-ventes-devises .boutons-achats-ventes-devises{
    display: flex;
    flex: auto;
    justify-content: space-between;   
}
.single-product-container-achats-ventes-devises .boutons-achats-ventes-devises > div{
    display: flex;
}
.single-product-container-achats-ventes-devises .boutons-achats-ventes-devises > div > button{
    display: block;
    height: 27px;
    width: 186px;
    border: none;
}

.btn-achats-devises{
    background: url('./images/onglet-achete.png') no-repeat;
}
.btn-ventes-devises{
    background: url('./images/onglet-vend.png') no-repeat;
}
.btn-alertes-devises{
    background: url('./images/onglet-alerte.png') no-repeat;
}
.btn-achats-devises-on{
    background: url('./images/onglet-achete-on.png') no-repeat;
}
.btn-ventes-devises-on{
    background: url('./images/onglet-vend-on.png') no-repeat;
}
.btn-alertes-devises-on{
    background: url('./images/onglet-alerte-on.png') no-repeat;
}

.panel-achats-ventes-alertes-devises{
    display: flex;
    flex: auto;
    position: relative;
    flex-direction: column;
    box-sizing: border-box;
    
}

.panel-achats-ventes-alertes-devises > div{
    box-sizing: border-box;
    border: 1px solid;
    position: relative;
    flex-direction: column;
    padding: 15px;
    gap: 15px;
    background: #f6f6f6;
}


.panel-achats-ventes-alertes-devises > div > div > p{
    color: #333;
    font-size: 12px;
}


.panel-achats-devises{
    border-color: #7baa20 !important;
    display: flex ;
    background: url('./images/fd-onglets-achete.png') repeat-x #f6f6f6 !important;
}
.panel-achats-devises .volets{
    display: flex;
    gap: 1px;
    background: #7baa20;
}
.panel-ventes-devises .volets{
    display: flex;
    gap: 1px;
    background: #9d0d15;
}

.volet-gauche-achats, .volet-gauche-ventes{
    padding-right: 15px;
}
.volet-droit-achats, .volet-droit-ventes{
    padding-left: 15px;
}

.volets > div{
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
    background: #f6f6f6;
}
.panel-achats-devises h3{
    color: #7baa20;
    font-size: 18px;
    font-weight: 400;
}
.panel-ventes-devises h3{
    color: #9d0d15;
    font-size: 18px;
    font-weight: 400;
}
.volets .volet-entete, .volets .volet-row{
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
    align-items: center;
    justify-content: space-between;
}

.volets .volet-total{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.volet-total > *{
    padding: 5px 0;
}



.volets .volet-entete > div, .volets .volet-row > div{
    display: flex;
    font-size: 12px;
    color: #333;
    font-weight: 400;
}

.montant-devise{
    font-weight: 700 !important;
    color: #7baa20 !important;
}

.volet-total .ligne-total{
    display: flex;
    flex-direction: row;
    flex: auto;
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
    justify-content: space-between;
}
.volet-total .ligne-total > *{
    display: flex;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    justify-content: space-between;
    align-items: center;
}
.panel-achats-devises .volet-total input[type="text"]{
    display: flex;
    width: 100px;
    font-size: 12px;
    color: #7baa20;
    font-weight: 700;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
}
.panel-ventes-devises .volet-total input[type="text"]{
    display: flex;
    width: 100px;
    font-size: 12px;
    color: #9d0d15;
    font-weight: 700;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
}

.volets strong{
    font-size: 12px;
    color: #333;
    font-weight: 700;
}

.panel-achats-devises .volets .total-global{
    font-size: 12px;
    font-weight: 700;
    color: #7baa20;
    display: flex;
    justify-content: flex-end;
}
.panel-ventes-devises .volets .total-global{
    font-size: 12px;
    font-weight: 700;
    color: #9d0d15;
    display: flex;
    justify-content: flex-end;
}

.devises-euros-submit, .euros-devises-submit{
    display: flex;
    justify-content: flex-end;
}
.panel-achats-devises .devises-euros-submit input[type="submit"],.panel-achats-devises .euros-devises-submit input[type="submit"]{
    display: flex;
    
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    outline: none;
    border: 1px solid #7baa20;
    background-color: #7baa20;
    border-radius: 3px;
    padding: 5px 20px;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.panel-ventes-devises .devises-euros-submit input[type="submit"],.panel-ventes-devises .euros-devises-submit input[type="submit"]{
    display: flex;
    
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    outline: none;
    border: 1px solid #9d0d15;
    background-color: #9d0d15;
    border-radius: 3px;
    padding: 5px 20px;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.devises-euros-submit input[type="submit"]:hover, .euros-devises-submit input[type="submit"]:hover{
    background: #000;
    border-color: #000;

}



.panel-ventes-devises{
    border-color: #9d0d15 !important;
    display: none;
    background: url('./images/fd-onglets-vend.png') repeat-x #f6f6f6 !important;

}

.panel-alertes-devises{
    border-color: #956d00 !important;
    display: none;
    background: url('./images/fd-onglets-alerte.png') repeat-x #f6f6f6 !important;
}


.operations-description p{
    font-size: 12px;
    color: #333;
    font-weight: 400;
    margin: 0;
}
.operations-description a{
    font-size: 12px;
    color: #333;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #333;
    transition: all .3s ease-in-out;
}
.operations-description a:hover{
    text-decoration-color: #da9f00;
    color: #da9f00;
}

.conversion-panier{
    display: none;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
}
.conversion-panier a, .conversion-panier input[type="submit"]{
    display: flex;
    padding: 5px 10px;
    font-size: 12px;
    color: #fff;
    background: #7baa20;
    outline: none;
    border-radius: 3px;
    transition: .3s ease-in-out all;
    align-self: flex-end;
    font-weight: 700;
    border: 1px solid #7baa20;
    cursor: pointer;
}
.conversion-panier a:hover, .conversion-panier input[type="submit"]:hover{
    background-color: #000;
    border-color: #000;
}
.coupures{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.coupures span{
    font-size: 12px;
    color: #333;
    font-weight: 600;
}
.coupures > div{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.conversion-panier label{
    font-size: 12px;
    font-weight: 400;
    color: #333;
    display: flex;
    align-items: center;
}
.conversion-panier input[type="radio"]{
    margin: 0 5px;
}

.choix-montant{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.choix-montant .info{
    font-weight: 700;
    font-style: italic;
    margin-bottom: 10px;
    text-decoration: underline;
}
.choix-montant > div{
    display: flex;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    flex: auto;
    flex-wrap: nowrap;
}
.choix-montant > div >div{
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}
.choix-montant > div >div:last-child{
    margin-left: auto;
}
.choix-montant span{
    font-size: 12px;
    font-weight: 700;
    color: #333;
}
.button-row{
    display: flex;
    flex: auto;
    justify-content: space-evenly;
    flex-wrap: nowrap;
}

.nouveautes, .liste-articles{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #ccc;
    
}
.nouveautes > .bandeau, .liste-articles > .bandeau{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: #666;
    
}
.nouveautes > .bandeau > div, .liste-articles > .bandeau > div{
    display: flex;
    font-size: 12px;
    color: #fff;
    align-items: center;
    padding: 7px 12px;
}
.nouveautes > .bandeau > a, .liste-articles > .bandeau > a{
    display: flex;
    font-size: 11px;
    color: #ccc;
    background-color: #666;
    align-items: center;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: all .3s ease-in-out;
    padding: 7px 12px;

}
.nouveautes > .bandeau > a:hover, .liste-articles > .bandeau > a:hover{
    color: #fff;
    text-decoration-color: #fff;
}

.nouveautes-random{
    display: flex;
    box-sizing: border-box;
}

.nouveaute{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    gap: 5px;
    flex: 1 1 50%;
    padding: 10px;
}
.nouveautes-random > a:first-child{
    border-right: 1px solid #ccc;
}

.nouveaute .titre{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    padding: 10px 0;
    height: 100%;
}

.nouveaute .prix{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #956d00;
    margin-top: auto;
}

.nouveaute img{
    width: 75px;
    height: 75px;
    box-sizing: border-box;
    object-fit: contain;
}

.liste-articles > .articles{
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
}

.liste-articles > .articles > div:not(:last-child){
    display: flex;
    font-size: 12px;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
    justify-content: center;
    
}

.liste-articles > .articles .archive-cat-articles{
    display: flex;
    background: #da9f00;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s ease-in-out;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    flex: auto;
}
.liste-articles > .articles .archive-cat-articles:hover{
    background: #000;
}

.avis-clients{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.avis-clients h2{
    display: flex;
    font-size: 24px;
    color: #666;
    border-bottom: 1px solid #666;
    font-weight: 400;
    padding: 10px 0;
    margin: 0;
    margin-bottom: 15px;
}
.avis-clients h2 a{
    font-size: 24px;
    color: #666;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: all .3s ease-in-out;
}
.avis-clients h2 a:hover{
    color: #da9f00;
}
.avis-clients > a{
    display: flex;
    flex:auto;
    background: #333;
    padding: 5px;
    font-size: 12px;
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
    transition: all .3s ease-in-out;
}
.avis-clients > a:hover{
    text-decoration: none;
}


/** TEMPLATE ACCUEIL **/
.slider-accueil{
    display: flex;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    flex-direction: column;
    top: -15px;
    max-width: 600px;
}
.slides{
    display: flex;
    position: relative;
    height: 317px; /* hauteur image */
    max-height: 317px; /* hauteur image */
    box-sizing: border-box;
    flex: auto;
    
}
.slides > a{
    position: absolute;
    top: 0;
    left: 50%;
    box-sizing: border-box;
    transform: translateX(-50%);
}

.slides > a > img{
    width: auto;
    height: auto;
    
}
.slide-show{
    display: flex;
}
.slide-hide{
    display: none;
}

.slider-accueil .bullets{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
.slider-accueil .bullet{
    display: flex;
    border: 1px solid #ccc;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #ccc;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.slider-accueil .bullet:hover{
    background-color: #666;
    border-color: #666;
}
.active-bullet{
    background-color: #666 !important;
    border-color: #666 !important;
}



.accueil-ariane{
    display: flex;
    padding-bottom: 2px;
    align-items: flex-end;
    position: relative !important;
}
.accueil-presentation{
    display: flex;
    flex-direction: row;
    position: relative;
    box-sizing: border-box;
    gap: 15px;
}
.accueil-presentation .description-metaux{
    display: flex;
    flex-direction: column;
    flex: 0 1 50%;
    box-sizing: border-box;

}
.accueil-presentation .meilleures-ventes{
    display: flex;
    flex-direction: column;
    flex: 0 1 50%;
    box-sizing: border-box;
    gap: 10px;
}

.accueil-presentation h1{
    display: flex;
    border-bottom: 1px solid #956D00;
    color: #956D00;
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    height: 64px;
    padding-left: 80px;
}
.accueil-presentation h1 img{
    position: absolute;
    clip: rect(0, 80px, 64px, 0 );
    top: 1px;
    left: 0;
}
.accueil-presentation .meilleures-ventes h2{
    display: flex;
    justify-content: center;
    color: #956D00;
    font-size: 20px;
    font-weight: 400;
    border-bottom: 1px solid #956D00;
    margin: 0;
    align-items: center;
    height: 64px;
    background: linear-gradient(#fff 40%, #956D00);
}

.accueil-presentation .meilleures-ventes .article-vendu{
    display: flex;
    flex-direction: row;
    padding: 0 5px;
    gap: 10px;
}
.accueil-presentation .meilleures-ventes .article-vendu img{
    width: 50px;
    height: 50px;
}
.article-detail{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.article-nom{
    color: #956d00;
    font-size: 12px;
    font-weight: 700;
    transition: all .3s ease-in-out;
    text-decoration: none;
}
.article-nom:hover{
    text-decoration: underline;
}
.article-prix{
    color: #956D00;
    font-weight: 400;
    font-size: 12px;
}

.description-metaux .description-content{
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 15px;
}
.description-metaux .description-content p{
    display: block;
    
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #333;
}
.description-metaux .description-content p strong{
    font-weight: 700;
    font-size: 12px;
    color: #333;
}

.description-metaux .description-content a{
    font-size: 12px;
    font-weight: 400;
    color: #956D00;
    text-decoration: none;
    transition: all .3s ease-in-out;
}
.description-metaux .description-content a:hover{
    text-decoration: underline;
    text-decoration-color: #956D00;
}

.bienvenue{
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

.bienvenue .titre{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 15px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    background: #666;
    color: #fff;
}
.bienvenue p {
    display: block;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
}
.bienvenue p:last-child{
    padding-bottom: 15px;
}
.bienvenue p a{
    color: #333;
    font-weight: 400;
    text-decoration: underline;
    font-size: 12px;
    transition: all .3s ease-in-out;

}
.bienvenue p a:hover{
    color: #da9f00;
    text-decoration-color: #da9f00;
}
.livraison-securisee-accueil{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9f9f9;
}

.trustbox-accueil{
    display: flex;
}

.articles-categories-wrapper{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: auto 20px;
}

.articles-categorie{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 45%;
    gap: 15px;
    padding-bottom: 50px;
}

.articles-categorie h2{
    margin: 0;
    padding: 0;
    font-weight: 700;
    color: #333;
    font-size: 22px;
    text-transform: uppercase;
    box-sizing: border-box;
}
.articles-categorie p{
    font-size: 16px;
    line-height: 1.6em;
    color: #999;
    font-weight: 400;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
.articles-categorie p strong{
    font-weight: 700;
    color: #666;
}
.articles-categorie img{
    border: 1px solid #333;
    margin-top: auto;
    box-sizing: border-box;

}

.article-categorie-description-no-articles{
    text-align: center;
}

.article-categorie-description p,
.article-categorie-description-no-articles p{
    font-size: 16px;
    color: #999;
    line-height: 1.5em;
    margin: 0;
}
.article-categorie-description-no-articles p strong{
    font-weight: 700;
    color: #666;
}

.infos-summary{
    color: #333;
    text-decoration: underline;
    text-decoration-color: #333;
    font-size: 16px;
    transition: all .3s ease-in-out;
}
.infos-summary:hover{
    text-decoration-color: #956D00;
    color: #956d00;
}

.articles-container{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    box-sizing: border-box;
    background: #ecf0f5;
    padding: 30px;
}

.article-wrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 calc( 25% - 30px );
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    box-sizing: border-box;
    padding: 30px;
    background: #fff;
    min-width: 250px;
}
.article-wrapper h2{
    margin: 0;
    font-size: 16px;
}
.article-wrapper .date-article{
    font-size: 12px;
    color: #999;
    margin: 0;
    margin-top: auto;
}
.article-wrapper .excerpt-article{
    margin: 0;
    color: #999;
    font-size: 16px;
    
}

.article-content{
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
}

.article-content p, .article-content li, .article-content ul{
    font-size: 16px;
    line-height: 1.5em;
    color: #999;
    margin: 0;
    
}

.article-content ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.article-content h4{
    font-size: 18px;
    color: #333;
    font-weight: 700;
    margin: 0;
}

.author-date-article{
    font-size: 12px;
    color: #999;
    padding-bottom: 25px;
    text-align: right;
}
.author-date-article strong{
    font-size: 12px;
    color: #333;
    font-weight: 400;
}

.article-metal, .article-devise, .article-autre{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.last-news{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.last-news p{
    font-size: 12px;
    color: #333;
    font-weight: 400;
    margin: 0;
    text-decoration: none;
}
.last-news strong{
    font-weight: 700;
    color: #333;
    font-size: 12px;
}
.article-metal:hover p:first-child,
.article-devise:hover p:first-child,
.article-autre:hover p:first-child{
    text-decoration: underline;
    text-decoration-color: #333;
}

.inscription-newsletter{
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #EFF2F7;
    gap: 20px;
}

.inscription-newsletter .nl_registration_success{
    display: none;
    padding: 5px 10px;
    color: #085229;
    background: #e7faf0;
    border: 1px solid #13ce66;
    font-size: 14px;
    border-radius: 3px;
}
.inscription-newsletter .nl_registration_error{
    display: none;
    padding: 5px 10px;
    color: #661d1d;
    background: #ffeded;
    border: 1px solid #ff4949;
    font-size: 14px;
    border-radius: 3px;
}

.inscription-newsletter .newsletter{
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    padding: 10px 15px;
    gap: 10px;
    border-radius: 3px;
}

.inscription-newsletter a{
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
    color: #3E4857;
    text-decoration-color: #3E4857;
    transition: all .3s ease-in-out;
}
.inscription-newsletter a:hover{
    color: #da9f00;
    text-decoration-color: #da9f00;
}

.inscription-newsletter .title_label{
    padding: 5px 10px;
    color: #3c4858;
    font-size: 16px;
    font-weight: 700;
}

.inscription-newsletter input[type="submit"]{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3E4857;
    color: #FFF;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 700;
    outline: none;
    border: 1px solid #3E4857;
    transition: all .3s ease-in-out;
}
.inscription-newsletter input[type="submit"]:hover{
    border-color: #da9f00;
    background-color: #da9f00;
}

.inscription-newsletter input[type="email"]{
    border: 1px solid #c0ccda ;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    padding: 5px 10px;
    outline: none;
}

.inscription-newsletter .nl_info_email{
    padding: 5px 10px;
    color: #8390A4;
    font-size: 12px;
    font-weight: 400;
}

.inscription-newsletter .label_checkbox_consent{
    
    padding: 5px 10px;
    padding-left: 25px;
    color: #3E4857;
    font-size: 12px;
    font-weight: 400;
    position: relative;
}

.inscription-newsletter .label_checkbox_consent input[type="checkbox"]{
    position: absolute;
    left: 10px;
    top: 5px;
    margin: 0;
    cursor: pointer;
    
}

.nl_empty_email, .nl_empty_consent{
    display: none;
    background: rgb(255, 237, 237);
    color: rgb(102,29,29);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
}


/* Formulaires ACF */
.contact-formulaire .success{
    display: none;
    padding: 5px 20px;
    color: #085229;
    background: #e7faf0;
    border: 1px solid #13ce66;
    font-size: 14px;
    border-radius: 3px;
    position: relative;
}
.contact-formulaire .success:before{
    content: '\f12a';
    color: #085229;
    font-family: 'dashicons';
    position: absolute;
    left: 4px;
    top: 6px;

}
.contact-formulaire .error{
    display: none;
    padding: 5px 20px;
    color: #661d1d;
    background: #ffeded;
    border: 1px solid #ff4949;
    font-size: 14px;
    border-radius: 3px;
    position: relative;

}
.contact-formulaire .error:before{
    content: '\f153';
    color: #661d1d;
    font-family: 'dashicons';
    font-size: 14px;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 4px;
    top: 6px;

}
.contact-formulaire{
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 20px;
    gap: 20px;
    margin: 0;

}
.contact-formulaire h2{
    font-size: 24px;
    color: #666;
    font-weight: 400;
    border-bottom: 1px solid #666;
    box-sizing: border-box;
    margin: 0;
    display: block;
    position: relative;
}
.contact-formulaire h2 strong{
    font-size: 24px;
    color: #666;
    font-weight: 700;

}
.contact-formulaire h2 span{
    color: #333;
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    position: absolute;
    right: 5px;
    bottom: 5px;
}
.contact-formulaire form{
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
}

.contact-formulaire form > div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

.contact-formulaire .submit-form{
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: flex-end;
    box-sizing: border-box;
}

.contact-formulaire input[type="submit"]{
    padding: 5px 10px;
    color: #FFF;
    background: #da9f00;
    border-radius: 3px;
    font-size: 18px;
    transition: all .3s ease-in-out;
    outline: none;
    border: 1px solid #da9f00;
    cursor: pointer;
    font-weight: 700;
}
.contact-formulaire input[type="submit"]:hover{
    background: #000;
    border-color: #000;
}

.contact-formulaire p{
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #333;
}
.contact-formulaire p strong{
    font-size: 12px;
    color: #333;
    font-weight: 700;
}

.champs{
    flex-direction: row !important;
    flex: auto;
    justify-content: space-around;
 
}

.champs > div{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 1 50%;
    box-sizing: border-box;
}

.champs .form-group{
    display: flex;
    gap: 10px;
    justify-content: space-between;
    
    box-sizing: border-box;
}

.champs .form-group *{
    display: flex;
    outline: none;
    font-size: 12px;
    color: #333;
    padding: 10px 10px;
    flex-basis: 25%;
}

.champs .form-group :not(label){
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    flex-basis: 75%;
}

.form-left label::before{
    content: '*';
    font-size: 14px;
    color: #78222a;
}
.gp_commande label::before{
    content: '';
}



/* Woo-commerce login */
.woo-commerce-login-wrapper{
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.woo-commerce-h2{
    color: #666;
    padding: 25px 0 10px 0;
    font-size: 24px;
    font-weight: 400;
    border-bottom: 1px solid #666;
    padding: 0;
    margin: 0;
}

.woo-commerce-h3{
    color: #666;
    font-size: 18px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    margin-top: 25px;
}

.woo-commerce-login, .woo-commerce-sign-in{
    display: flex;
    flex-direction: column;
}

.woo-commerce-login label, .woo-commerce-sign-in label, .woo-commerce-sign-in p{
    color: #333;
    font-size: 12px;
    font-weight: 400;
}

.woo-commerce-sign-in p a{
    font-size: 12px;
    color: #333;
    font-weight: 700;
    transition: all .3s ease-in-out;
    text-decoration: underline;
    text-decoration-color: #333;
}
.woo-commerce-sign-in p a:hover{
    color: #da9f00;
    text-decoration: underline;
    text-decoration-color: #da9f00;
}

.woo-commerce-sign-in button, .woo-commerce-login button{
    background-color: #da9f00 !important;
    color: #FFF !important;
    transition: all .3s ease-in-out;
}
.woo-commerce-sign-in button:hover, .woo-commerce-login button:hover{
    background-color: #000 !important;
    color: #FFF !important;
}

.woo-commerce-login .lost_password a{
    color: #333 !important;
    text-decoration: underline !important;
    text-decoration-color: #333;
    transition: all .3s ease-in-out;
}
.woo-commerce-login .lost_password a:hover{
    color: #da9f00 !important;
    text-decoration-color: #da9f00 !important;
}

.woo-commerce-login input, .woo-commerce-sign-in input,
.woo-commerce-sign-in select{
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    color: #333;
}


.woocommerce-MyAccount-navigation{
    background-color: #000;
    margin: 0;
}

.woocommerce-MyAccount-navigation a{
    transition: all .3s ease-in-out;
}
.woocommerce-MyAccount-navigation a:hover{
    color: #da9f00;
}

.woocommerce-MyAccount-navigation li:not(:first-child){
    display: none;
}

.woocommerce-MyAccount-content p{
    color: #333;
    font-size: 12px;
}

.woocommerce-MyAccount-content p strong{
    color: #333;
    font-size: 12px;
}

.woocommerce-MyAccount-content p a{
    color: #333;
    text-decoration-color: #333;
    text-decoration: underline;
    transition: all .3s ease-in-out;
    font-size: 12px;
}
.woocommerce-MyAccount-content p a:hover{
    color: #da9f00;
    text-decoration-color: #da9f00;
}

.woocommerce-MyAccount-content form input{
    padding: 5px;
    border: 1px solid #ccc;
    color: #333;
}

.woocommerce-MyAccount-content p button{
    background-color: #da9f00 !important;
    color: #fff !important;
    transition: all .3s ease-in-out;
    
}

.woocommerce-MyAccount-content p button:hover{
    background-color: #000 !important;
}

.woocommerce-MyAccount-content form legend{
    color: #333;
}
.woocommerce-MyAccount-content form fieldset{
    border: 1px solid #ccc !important;
}

.woocommerce-Address header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background-color: transparent !important;
    height: unset !important;
    margin-bottom: 25px;
    color: #333;
    border-width: 2px !important;
}
.woocommerce-Address header a{
    color: #000;
    text-decoration-color: #000;
    text-decoration: underline;
    transition: all .3s ease-in-out;
}
.woocommerce-Address header a:hover{
    color: #da9f00;
    text-decoration-color: #da9f00;
}

.woocommerce-Address address{
    color: #333;
}

.intraday-or-argent{
    display: flex;
    gap: 5px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.intraday-or-argent img{
    width: auto;
    height: auto;
}

.intraday-or, .intraday-ag{
    display: flex;
    flex-direction: column;
    flex: auto;
    
}

.titre-or{
    font-size: 14px;
    color: #da9f00;
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
    padding: 2px;
    border-bottom: 1px solid #ccc;
}
.titre-ag{
    display: flex;
    font-size: 14px;
    color: #999;
    flex: auto;
    justify-content: center;
    align-items: center;
    padding: 2px;
    border-bottom: 1px solid #ccc;

}
.oz-or, .gr-or{
    display: flex;
    flex: auto;
    font-size: 12px;
    color: #da9f00;
    align-items: center;
    justify-content: flex-start;
    padding: 0 5px;

}
.oz-ag, .gr-ag{
    display: flex;
    flex: auto;
    font-size: 12px;
    color: #999;
    align-items: center;
    justify-content: flex-start;
    padding: 0 5px;
}

.convertisseur-devise-voyage{
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 10px;
}

.convertisseur-devise-voyage ul{
    display: flex;
    margin: 0;
    padding: 0 10px;
    gap: 10px;
    flex-wrap: wrap;
}

.convertisseur-devise-voyage ul li{
    
    flex: 0 1 50%;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    
    padding-left: 5px;
}
.convertisseur-devise-voyage ul li::marker{
    content: url('icones/puce-liste.png');

}

.convertisseur-devise-voyage form{
    display: flex;
    margin: 0;
    gap: 10px;
    flex-wrap: wrap;
}
.convertisseur-devise-voyage form input[type="text"]{
    flex: 0 1 50%;
    outline: none;
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    color: #333;
    font-weight: 700;
    text-align: right;
}
.convertisseur-devise-voyage form input[type="submit"]{
    background-color: #000;
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    transition: all .3s ease-in-out;
    border: 1px solid #000;
    border-radius: 3px;
    cursor: pointer;
}
.convertisseur-devise-voyage form input[type="submit"]:hover{
    background-color: #da9f00;
    border: 1px solid #da9f00;

}

.convertisseur-devise-voyage .euro-to-devise{
    font-weight: 700;
}

#prix-rachat-devise::after,
#total-euros-depuis-devise-conversion::after{
    content: ' EUR';

}


.container-alerte{
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 15px;
    gap: 15px;
}

.container-alerte > h2{
    display: flex;
    border-bottom: 1px solid #666;
    color: #666;
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    padding: 15px 0 10px 0;
}


.container-alerte form{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.container-alerte form > div{
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.container-alerte form > div > label{
    width: 100px;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    padding: 5px 10px;
}
.container-alerte form > div > input[type="text"],
.container-alerte form > div > input[type="email"],
.container-alerte form > div > select{
    display: flex;
    
    padding: 5px 10px;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
    font-size: 12px;
    font-weight: 400;
}
.container-alerte form > div > select{
    max-width: 300px;
}

.container-alerte > form > div:last-child{
    justify-content: flex-end;
}

.container-alerte form > div > input[type="submit"]{
    display: flex;
    padding: 5px 10px;
    color: #fff;
    background-color: #da9f00;
    border: 1px solid #da9f00;
    font-size: 14px;
    font-weight: 700;
    transition: all .3s ease-in-out;
    border-radius: 3px;
    cursor: pointer;
}
.container-alerte form > div > input[type="submit"]:hover{
    background-color: #000;
    border-color: #000;
}

.container-alerte .success{
    display: none;
    padding: 5px 20px;
    color: #085229;
    background: #e7faf0;
    border: 1px solid #13ce66;
    font-size: 14px;
    border-radius: 3px;
    position: relative;
}
.container-alerte .success:before{
    content: '\f12a';
    color: #085229;
    font-family: 'dashicons';
    position: absolute;
    left: 4px;
    top: 6px;

}
.container-alerte .error{
    display: none;
    padding: 5px 20px;
    color: #661d1d;
    background: #ffeded;
    border: 1px solid #ff4949;
    font-size: 14px;
    border-radius: 3px;
    position: relative;

}
.container-alerte .error:before{
    content: '\f153';
    color: #661d1d;
    font-family: 'dashicons';
    font-size: 14px;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 4px;
    top: 6px;

}

.container-alerte span{
    vertical-align: middle;
    color: #ff4949;
}

.container-alerte .alertes_liste{
    display: none;
    flex-direction: column;
}
.container-alerte .alertes_liste > div{
    display: flex;
    flex-direction: row;
    gap: 5px;
}
.container-alerte .alertes_liste > div > div{
    font-size: 12px;
    color: #666;
    display: flex;
    padding: 2px;
    flex: 0 0 15%;
}

.container-alerte .alertes_liste > div > div > button{
    display: flex;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 3px;
    color: #fff;
    border: 1px solid #da9f00;
    background-color: #da9f00;
    transition: all .3s ease-in-out;
    cursor: pointer;
}
.container-alerte .alertes_liste > div > div > button:hover{
    border-color: #000;
    background-color: #000;
}

.contenu-mon-compte{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 50px;
}

.contenu-mon-compte h2{
    display: flex;
    border-bottom: 1px solid #666;
    color: #666;
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    padding: 15px 0 10px 0;
}

.contenu-mon-compte ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contenu-mon-compte li{
    padding-left: 10px;
    
}
.contenu-mon-compte li::marker{
    content: url('icones/puce-liste.png');
}

.contenu-mon-compte a{
    color: #333;
    text-decoration: underline;
    text-decoration-color: #333;
    transition: all .3s ease-in-out;
    text-underline-offset: 3px;
    font-size: 12px;
}
.contenu-mon-compte a:hover{
    text-decoration-color: #da9f00;
    color: #da9f00;
}


.panier-achat-ordre .product-name a,
.panier-achat-metal .product-name a{
    color: #956D00;
    font-weight: 700;
    transition: all .3s ease-in-out;
    text-underline-offset: 3px;
    font-size: 12px;
}

.panier-achat-ordre .product-name a:hover,
.panier-achat-metal .product-name a:hover{

    text-decoration: underline;
}

.panier-achat-ordre .product-price span, .panier-achat-ordre .product-subtotal span,
.panier-achat-metal .product-price span, .panier-achat-metal .product-subtotal span,
.panier-achat-metal .product-price, .panier-achat-metal .product-subtotal,
.panier-achat-ordre .product-price, .panier-achat-ordre .product-subtotal{

    color: #333;
    font-weight: 700;
    font-size: 12px;
}

.panier-achat-ordre .product-quantity input[type="text"],
.panier-achat-metal .product-quantity input[type="text"]{

    font-size: 12px;
    color: #333;
    
    border: none;
}

.panier-achat-ordre .coupon,
.panier-achat-metal .coupon{

    display: none;
}

.panier-achat-ordre .actions .button,
.panier-achat-metal .actions .button{

    background-color: #da9f00;
    color: #FFF;
    transition: all .3s ease-in-out;
}
.panier-achat-ordre .actions .button:hover,
.panier-achat-metal .actions .button:hover{

    background-color: #000;
    color: #FFF;
}

.panier-achat-ordre td,
.panier-achat-metal td,
.panier-vente-metal td{
    color: #333;
    font-size: 12px;
    font-weight: 400;
}

.panier-achat-ordre th,
.panier-achat-metal th,
.panier-vente-metal th{
    color: #333;
    font-size: 12px;
    font-weight: 700;
}

.panier-achat-ordre .product-price span,
.panier-vente-metal .product-price span{
    color: #333;
    font-size: 12px;
}
.panier-achat-ordre .product-subtotal span,
.panier-vente-metal .product-subtotal span{
    color: #333;
    font-size: 12px;
}
.panier-achat-ordre .product-quantity input[type="text"],
.panier-vente-metal .product-quantity input[type="text"]{
    color: #333;
    font-size: 12px;
    border: none;
}

.panier-vente-metal .product-name a,
.panier-vente-metal td a{
    color: #da9f00;
    font-weight: 400;
    transition: all .3s ease-in-out;
    text-underline-offset: 3px;
    font-size: 12px;

}
.panier-vente-metal td a:hover,.panier-vente-metal .product-name a:hover{
    text-decoration: underline;
    text-decoration-color: #da9f00;
    
}

.fleche-fermeture-menu, .fleche-ouverture-menu{
    display: none;
}

#menu-menu-mobile > li:last-child, #menu-menu-mobile > li:nth-last-child(3){
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 20px;
}

.cart-subtotal{
    display: none !important;
}

.wc-proceed-to-checkout{
    text-align: end;
}
.checkout-button{
    background-color: #da9f00 !important;
    transition: all .3s ease-in-out;
    font-size: 12px !important;
}
.checkout-button:hover{
    background-color: #000 !important;
}

#form_bordereau{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-bordereau{
    display: flex;
    gap: 10px;
}
.form-bordereau label{
    width: 100px;
    font-size: 12px;
    color: #333;
    align-items: center;
    display: flex;
}
.form-bordereau-reglement, .form-borderau-justificatifs{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    color: #333;
    
}
.form-bordereau-reglement span, .form-bordereau-reglement label, .form-bordereau-message label,
.form-borderau-justificatifs p, .form-borderau-justificatifs li{
    font-size: 12px;
    color: #333;
}
#form_bordereau p{
    margin: 0;
}
#form_bordereau a, #form_retractation a, #form_contrat a{
    color: #333;
    font-weight: 700;
    transition: all .3s ease-in-out;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 12px;
    color: #333;
}
#form_bordereau a:hover, #form_retractation a:hover, #form_contrat a:hover{
    color: #da9f00;
    text-decoration-color: #da9f00;
}
#form_bordereau input{
    outline: none;
    font-size: 12px;
    color: #333;
    border: 1px solid #ccc;
}
#form_bordereau textarea{
    resize: none;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    color: #333;
}

#form_bordereau > a, #form_retractation > a, #form_contrat > a{
    align-self: flex-end;
}

.form-bordereau-message{
    display: flex;
    flex-direction: column;
}

#form_retractation, #form_contrat{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#form_retractation span, #form_retractation div, #form_retractation p, #form_contrat p, #form_contrat div{
    color: #333;
    font-size: 12px;
    margin: 0;
    
}

.retractation-entete{
    font-size: 12px;
    color: #333;
    gap: 10px;

}

.contrat-entete{
    font-size: 12px;
    color: #333;
    gap: 10px;
    display: flex;
    flex-direction: column;

}

.form-retractation, .form-contrat{
    display: flex;
    gap: 10px;
    align-items: center;
}
.form-contrat-signature{
    display: flex;
    flex-direction: column;
}
.retractation-entete a{
    font-size: 12px;
    color: #333;
    transition: all .3s ease-in-out;
}
.retractation-entete a:hover{
    color: #da9f00;
}
.form-retractation label, .form-contrat label{
    width: 100px;
    color: #333;
    font-size: 12px;
}
.form-retractation input, .form-contrat input{
    outline: none;
    color: #333;
    font-size: 12px;
    border: 1px solid #ccc;
    padding: 5px;
}

#form_retractation textarea, #form_contrat textarea{
    resize: none;
    display: flex;
    box-sizing: border-box;
    outline: none;
    width: 100%;
    border: 1px solid #ccc;
}

.acompte-a-verser{
    font-size: 1rem !important;
    color: #333;
    font-weight: 700 !important;
}

.savoir-plus {
    display: flex !important;
    width: fit-content !important;
    align-self: center !important;
    text-decoration: none !important;
    padding: 5px 10px !important;
    color: #FFF;
    background: #da9f00;
    border-radius: 3px;
    font-size: initial;
    transition: all .3s ease-in-out;
    outline: none;
    border: 1px solid #da9f00;
    cursor: pointer;
    margin: 5px;
    
    
}
.savoir-plus:hover{
    background: #000;
    border-color: #000;
    text-decoration: none !important;
    
}

@media screen and (max-width:1280px){

    .champs{
        flex-direction: column !important;
    }


}

@media screen and (max-width:1200px){

    .bandeau-gauche .partage-rs .twitter, .bandeau-gauche .partage-rs .facebook{
        flex-wrap: wrap;
    }

    /* .slider-accueil{
        display: none;
    } */

    .accueil-presentation{
        flex-direction: column;
    }

    .livraison-securisee-accueil img, .livraison-securisee a img{
        width: 100%;
    }

    .liste-produits-cours > .product-row > .first-col, .liste-produits-cours > .product-row > .first-col-argent-demonetise{
        flex-direction: column;
    }

    .slider-accueil{
        width: 100%;
    }

    .slides a{
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: unset;
    }

    .slides a img{
        width: 100%;
        height: auto;
    }

    .single-product-container-achats-ventes .boutons-achats-ventes > div > button,
    .single-product-container-achats-ventes-devises .boutons-achats-ventes-devises > div > button{
        width: 150px;
    }
    
}


@media screen and (max-width:1039px) {

    .bandeau-droit{
        transform-origin: right;
        transform: scaleX(0);
        transition: transform 0.3s ease;
        width: 295px;
    }
    .bandeau-droit-open{
        transform: scaleX(1);
    }
       
    .container-bandeau-droit{
        position: absolute;
        right: 1px;
        background-color: #fff;
        padding: 0;
        padding-left: 10px;
        width: 0;
        transition: all .3s ease-in-out;
    }
    .container-bandeau-droit-open{
        width: 295px;
    }

    .fleche-ouverture-menu,.fleche-fermeture-menu{
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 0;
        height: 50vh;
        width: 0;
        border-right: 15px solid #ccc;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
    
        z-index: 2;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        align-self: center;
        left: -5px;
    }
    
    
    .fleche-fermeture-menu .dashicons, .fleche-ouverture-menu .dashicons{
        color: #fff;
        left: -5px;
        position: absolute;
        box-sizing: border-box;
        display: flex;
    }
    
    
    .liens-footer a:not(:last-child)::after{
        display: none;
    }

    .related ul{
        justify-content: space-around !important;
    }
    
}

@media screen and (max-width:799px) {
       
    .bandeau-gauche{
        position: absolute;
        left: 0;
        z-index: 5;
        background-color: #fff;
        transform-origin: left;
        transform: scaleX(0);
        transition: transform 0.3s ease;
        
    }

    .bandeau-gauche-open{
        transform: scaleX(1);
    }
       
    .container-bandeau-gauche{
        position: absolute;
        left: 1px;
        background-color: #fff;
        padding: 0;
        padding-left: 10px;
        transition: all .3s ease-in-out;
        width: 0;
        
    }

    .container-bandeau-gauche-open{
        width: 232px;
    }

    .fleche-ouverture-menu-gauche,.fleche-fermeture-menu-gauche{
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 0;
        height: 50vh;
        width: 0;
        border-left: 15px solid #ccc;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
    
        z-index: 2;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        align-self: center;
        right: -5px;
    }
    
    
    .fleche-fermeture-menu-gauche .dashicons, .fleche-ouverture-menu-gauche .dashicons{
        color: #fff;
        right: -5px;
        position: absolute;
        box-sizing: border-box;
        display: flex;
    }
    

    .footer-haut > div{
        flex-direction: column;
    }
    
    .cart_item:nth-child(odd){
        background-color: #da9f0010;
    }
    .woocommerce a.remove{
        margin-left: auto;
    }
    
}

@media screen and (max-width:600px) {

    .main-wrapper{
        padding: 0 10px !important;
    }

    .container-entete-produit{
        flex-direction: column;
    }

    .slider-accueil{
        display: none;
    }

    .custom-logo-link{
        left: 45% !important;
    }

    .sticky-logo, .custom-logo{
        width: 75% !important;
        height: unset !important;
    }

    #calculateur-taxe > .container-options > div{
        flex-direction: column;
    }

    .container-alerte form > div{
        flex-direction: column;
    }

    .champs .form-group{
        flex-direction: column;
        gap: 0;
    }

    .operations-ventes, .operations-achats{
        flex-direction: column;
    }

    
    .container-ancres-avis{
        flex-wrap: wrap;
    }
    
    
}

@media screen and (max-width:500px) {

    .boutons-achats-ventes, .boutons-achats-ventes-devises{
        display: none !important;
    }

    .panel-achats, .panel-ventes, .panel-alertes, .panel-achats-devises, .panel-ventes-devises, .panel-alertes-devises{
        display: flex;
    }

    .panel-achats-ventes-alertes, .panel-achats-ventes-alertes-devises{
        gap: 15px;
    }
    
    .panel-achats-devises .volets, .panel-ventes-devises .volets{
        flex-direction: column;
    }

    .infos-complementaires-devises{
        flex-direction: column;
        gap: 15px;
    }
    .infos-complementaires-data{
        width: 100%;
        box-sizing: border-box;
    }

    .related .products{
        justify-content: center !important;
    }
}

@media screen and (max-width:400px) {

    .medaillon-droite{
        display: none;
    }

    
}