/* ==========================================================
   WACS — CUSTOM.CSS
   PrestaShop 8.1.7 / thème enfant Classic

   CHARTE GRAPHIQUE
   Orange : #F7931D
   Noir   : #171717
   Blanc  : #FFFFFF
   ========================================================== */


/* ==========================================================
   1. VARIABLES
   ========================================================== */

:root {
    --ka-orange: #F7931D;
    --ka-orange-dark: #D97808;
    --ka-orange-light: #FFF3E5;

    --ka-black: #171717;
    --ka-text: #292929;
    --ka-grey: #707070;

    --ka-border: #E5E5E5;
    --ka-light: #F7F7F7;
    --ka-white: #FFFFFF;
}


/* ==========================================================
   2. BASE GÉNÉRALE
   ========================================================== */

html,
body,
main,
#wrapper,
#content-wrapper {
    background: var(--ka-white) !important;
    color: var(--ka-text) !important;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

section {
    background: transparent;
}

a,
a:visited {
    color: var(--ka-orange) !important;
    text-decoration: none;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

a:hover,
a:focus,
a:active {
    color: var(--ka-orange-dark) !important;
    text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--ka-text);
}

::selection {
    background: var(--ka-orange);
    color: #000000;
}


/* ==========================================================
   3. HEADER BLANC
   ========================================================== */

#header,
#header .header-nav,
#header .header-top {
    background: var(--ka-white) !important;
    color: var(--ka-text) !important;
}

#header {
    border-bottom: 2px solid var(--ka-orange) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

#header .header-nav {
    border-bottom: 1px solid var(--ka-border) !important;
}

#header a,
#header a:visited,
#header .material-icons,
#header .expand-more,
#header .user-info,
#header .language-selector,
#header .currency-selector {
    color: var(--ka-text) !important;
}

#header a:hover,
#header a:focus,
#header .material-icons:hover,
#header .expand-more:hover {
    color: var(--ka-orange) !important;
}


/* ==========================================================
   MENU PRINCIPAL UNIQUEMENT
   Orange + texte blanc
   Survol / actif : noir + texte blanc
   ========================================================== */

/* On cible uniquement le premier niveau grâce à #top-menu */

#header #top-menu > li > a {
    display: block !important;

    margin: 0 4px !important;
    padding: 12px 18px !important;

    background: #F7931D !important;
    color: #FFFFFF !important;

    border: none !important;
    border-radius: 0 !important;

    font-weight: 700 !important;
    line-height: 1.2 !important;

    transition:
        background-color .2s ease,
        color .2s ease;
}

#header #top-menu > li > a:visited {
    background: #F7931D !important;
    color: #FFFFFF !important;
}

/* Survol, clic et rubrique active */

#header #top-menu > li:hover > a,
#header #top-menu > li.current > a,
#header #top-menu > li.active > a,
#header #top-menu > li > a:hover,
#header #top-menu > li > a:focus,
#header #top-menu > li > a:active {
    background: #171717 !important;
    color: #FFFFFF !important;
}


/* ==========================================================
   MENU DÉROULANT UNIQUEMENT
   Fond blanc + texte noir
   Survol / actif : texte orange, sans rectangle
   ========================================================== */

#header #top-menu .sub-menu,
#header #top-menu .popover.sub-menu,
#header #top-menu .popover {
    background: #FFFFFF !important;

    border: 1px solid #E5E5E5 !important;
    border-top: 3px solid #F7931D !important;

    box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
}


/* Force tous les conteneurs internes en blanc */

#header #top-menu .sub-menu ul,
#header #top-menu .sub-menu li,
#header #top-menu .sub-menu .category-sub-menu,
#header #top-menu .sub-menu .popover-submenu {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    border: none !important;
    box-shadow: none !important;
}


/* Tous les liens du sous-menu */

#header #top-menu .sub-menu a,
#header #top-menu .sub-menu a:visited,
#header #top-menu .sub-menu a[data-depth="1"],
#header #top-menu .sub-menu a[data-depth="2"],
#header #top-menu .sub-menu a[data-depth="3"] {
    display: block !important;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    color: #171717 !important;

    border: none !important;
    border-radius: 0 !important;

    padding: 8px 10px !important;
    margin: 0 !important;

    font-weight: 400 !important;
    opacity: 1 !important;

    transition: color .2s ease !important;
}


/* Titres des colonnes : Maison, Accessoires mode, Loisirs... */

#header #top-menu .sub-menu .category-sub-menu > li > a,
#header #top-menu .sub-menu .popover-submenu > li > a,
#header #top-menu .sub-menu a[data-depth="1"] {
    background: #FFFFFF !important;
    color: #171717 !important;

    font-weight: 700 !important;
}


/* Survol, focus, clic et catégorie active */

#header #top-menu .sub-menu a:hover,
#header #top-menu .sub-menu a:focus,
#header #top-menu .sub-menu a:active,
#header #top-menu .sub-menu li:hover > a,
#header #top-menu .sub-menu li.current > a,
#header #top-menu .sub-menu li.active > a {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    color: #F7931D !important;

    border: none !important;
    box-shadow: none !important;
}
/* ==========================================================
   6. SÉLECTEURS LANGUE ET DEVISE
   ========================================================== */

#header .language-selector-wrapper,
#header .currency-selector,
#header .dropdown,
#header .dropdown .expand-more {
    background: transparent !important;
    color: var(--ka-text) !important;
}

#header .dropdown-menu {
    background: var(--ka-white) !important;
}

#header .dropdown-menu a {
    color: var(--ka-text) !important;
}

#header .dropdown-menu a:hover {
    background: var(--ka-orange-light) !important;
    color: var(--ka-orange) !important;
}


/* ==========================================================
   7. RECHERCHE
   ========================================================== */

.search-widget form input[type="text"],
.search-widget form input[type="search"] {
    background: #F5F5F5 !important;
    color: var(--ka-text) !important;

    border: 1px solid var(--ka-border) !important;
    border-radius: 4px !important;
}

.search-widget form button[type="submit"],
.search-widget form button[type="submit"] i,
.search-widget form button[type="submit"] .search {
    color: var(--ka-orange) !important;
}

.search-widget form button[type="submit"]:hover,
.search-widget form button[type="submit"]:hover i {
    color: var(--ka-orange-dark) !important;
}


/* ==========================================================
   8. PANIER DANS LE HEADER
   ========================================================== */

#header .header-nav .cart-preview.active {
    background: var(--ka-orange) !important;
}

#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active i {
    color: #000000 !important;
}


/* ==========================================================
   9. FIL D’ARIANE
   Aucun fond noir ni coins arrondis
   ========================================================== */

#wrapper .breadcrumb {
    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid var(--ka-border) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    padding: 12px 0 !important;
    margin-bottom: 24px;
}

#wrapper .breadcrumb li,
#wrapper .breadcrumb li a,
#wrapper .breadcrumb li a:visited {
    color: var(--ka-grey) !important;
}

#wrapper .breadcrumb li a:hover,
#wrapper .breadcrumb li:last-child {
    color: var(--ka-orange) !important;
}


/* ==========================================================
   10. BOUTONS
   ========================================================== */

.btn {
    border-radius: 4px;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.btn-primary,
.add-to-cart,
input[type="submit"].btn-primary {
    background: var(--ka-orange) !important;
    border-color: var(--ka-orange) !important;
    color: #000000 !important;

    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.add-to-cart:hover,
.add-to-cart:focus {
    background: var(--ka-orange-dark) !important;
    border-color: var(--ka-orange-dark) !important;
    color: var(--ka-white) !important;
}

.btn-secondary {
    background: var(--ka-black) !important;
    border-color: var(--ka-black) !important;
    color: var(--ka-white) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--ka-orange) !important;
    border-color: var(--ka-orange) !important;
    color: #000000 !important;
}


/* ==========================================================
   11. FORMULAIRES
   Plus aucun contour bleu
   ========================================================== */

.form-control,
input,
textarea,
select,
.custom-select {
    background: var(--ka-white) !important;
    color: var(--ka-text) !important;

    border: 1px solid #C9C9C9 !important;
    border-radius: 4px !important;

    box-shadow: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.form-control:hover,
input:hover,
textarea:hover,
select:hover,
.custom-select:hover {
    border-color: #999999 !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus,
.custom-select:focus,
.form-control:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.custom-select:focus-visible,
button:focus-visible {
    border-color: var(--ka-orange) !important;
    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(247, 147, 29, .25) !important;
}

::placeholder {
    color: #999999;
    opacity: 1;
}

.custom-checkbox input[type="checkbox"]:checked + span {
    background: var(--ka-orange) !important;
    border-color: var(--ka-orange) !important;
}

.custom-checkbox input[type="checkbox"]:focus + span {
    box-shadow:
        0 0 0 3px rgba(247, 147, 29, .25) !important;
}

input[type="radio"] {
    accent-color: var(--ka-orange) !important;
}

.input-group .input-group-btn > .btn[data-action="show-password"] {
    background: var(--ka-orange) !important;
    border-color: var(--ka-orange) !important;
    color: #000000 !important;
}


/* ==========================================================
   12. NEWSLETTER
   Fond gris clair, texte noir, bouton orange
   ========================================================== */

.block_newsletter,
.footer-container .block_newsletter {
    background: #F4F4F4 !important;
    color: var(--ka-text) !important;

    border: 1px solid var(--ka-border) !important;
    border-bottom: 3px solid var(--ka-orange) !important;

    padding: 28px !important;
}

.block_newsletter h1,
.block_newsletter h2,
.block_newsletter h3,
.block_newsletter h4,
.block_newsletter p,
.block_newsletter label,
.block_newsletter span {
    color: var(--ka-text) !important;
}

.block_newsletter input[type="email"],
.block_newsletter .form-control {
    background: var(--ka-white) !important;
    color: var(--ka-text) !important;

    border: 1px solid #BFBFBF !important;
    border-radius: 4px 0 0 4px !important;
}

.block_newsletter input[type="email"]:focus,
.block_newsletter .form-control:focus {
    border-color: var(--ka-orange) !important;

    box-shadow:
        0 0 0 3px rgba(247, 147, 29, .22) !important;
}

.block_newsletter .btn-primary,
.block_newsletter input[type="submit"] {
    background: var(--ka-orange) !important;
    border-color: var(--ka-orange) !important;
    color: #000000 !important;
}

.block_newsletter .btn-primary:hover,
.block_newsletter input[type="submit"]:hover {
    background: var(--ka-orange-dark) !important;
    border-color: var(--ka-orange-dark) !important;
    color: var(--ka-white) !important;
}


/* ==========================================================
   13. FOOTER
   ========================================================== */

.footer-container {
    background: var(--ka-black) !important;
    border-top: 2px solid var(--ka-orange) !important;
    color: var(--ka-white) !important;
}

.footer-container h1,
.footer-container h2,
.footer-container h3,
.footer-container h4,
.footer-container h5,
.footer-container h6,
.footer-container .h1,
.footer-container .h2,
.footer-container .h3,
.footer-container .h4,
.footer-container .h5,
.footer-container .h6,
.footer-container .title,
.footer-container .block-title,
.footer-container .myaccount-title,
.footer-container .blockcms-title,
.footer-container .blockcms-title a,
.footer-container .block-contact-title {
    color: var(--ka-white) !important;
}

.footer-container p,
.footer-container span,
.footer-container li,
.footer-container .block-contact {
    color: #D0D0D0 !important;
}

.footer-container a,
.footer-container a:visited,
#block_myaccount_infos .account-list a,
#block_myaccount_infos .myaccount-title a {
    color: #D0D0D0 !important;
}

.footer-container a:hover,
.footer-container a:focus,
#block_myaccount_infos .account-list a:hover,
#block_myaccount_infos .myaccount-title a:hover {
    color: var(--ka-orange) !important;
}

.footer-container .material-icons {
    color: var(--ka-orange) !important;
}


/* ==========================================================
   14. LISTINGS PRODUITS
   Aucune bordure autour des cartes
   ========================================================== */

.products,
.products.row,
.product-list {
    row-gap: 28px;
}

.product-miniature {
    background: var(--ka-white) !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    overflow: visible;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.product-miniature:hover {
    border: none !important;
    box-shadow: none !important;
    transform: translateY(-2px);
}

.product-miniature .thumbnail-container,
.product-miniature .product-description,
.product-miniature .highlighted-informations {
    background: var(--ka-white) !important;

    border: none !important;
    box-shadow: none !important;
}

.product-miniature .thumbnail-container {
    margin-bottom: 0 !important;
}

.product-miniature .product-description {
    padding: 10px 10px 15px !important;
}

.product-miniature img,
.product-miniature .product-thumbnail img {
    background: var(--ka-white) !important;

    border: none !important;
    box-shadow: none !important;
}

.product-miniature .product-title {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.product-miniature .product-title a,
.product-miniature .product-title a:visited {
    color: var(--ka-text) !important;
}

.product-miniature .product-title a:hover {
    color: var(--ka-orange) !important;
}

.product-miniature .price,
.product-miniature .product-price {
    color: var(--ka-text) !important;
    font-weight: 700;
}

.product-miniature .highlighted-informations {
    border-top: 0 !important;
}


/* ==========================================================
   15. BOUTON FAVORIS
   ========================================================== */

.wishlist-button-add,
.wishlist-button-product {
    background: rgba(255, 255, 255, .95) !important;

    border: 1px solid var(--ka-border) !important;
    box-shadow: none !important;
}

.wishlist-button-add:hover,
.wishlist-button-product:hover {
    background: var(--ka-orange) !important;
    border-color: var(--ka-orange) !important;
}

.wishlist-button-add:hover i,
.wishlist-button-product:hover i {
    color: #000000 !important;
}


/* ==========================================================
   16. SOUS-CATÉGORIES
   Moins d’espace, aucune grosse bordure
   ========================================================== */

#subcategories {
    background: var(--ka-white) !important;
    padding-top: 10px;
}

#subcategories ul {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 24px !important;

    margin: 0 !important;
    padding: 0 !important;
}

#subcategories ul li {
    margin: 0 0 20px !important;
    padding: 0 !important;
}

#subcategories .subcategory-image,
#subcategories .subcategory-image a,
#subcategories ul li .subcategory-image a {
    background: var(--ka-white) !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

#subcategories .subcategory-image img {
    border: none !important;
    box-shadow: none !important;
}

#subcategories .subcategory-name,
#subcategories .subcategory-name:visited {
    color: var(--ka-orange) !important;
    font-weight: 700 !important;
}

#subcategories .subcategory-name:hover {
    color: var(--ka-orange-dark) !important;
}


/* ==========================================================
   17. FICHE PRODUIT
   ========================================================== */

#product #wrapper,
#product main,
#product .product-container,
#product .product-information,
#product .product-description {
    background: var(--ka-white) !important;
    color: var(--ka-text) !important;
}

#product h1,
#product h1.h1,
#product .product-title,
#product .product-detail-name,
#product .product-information h1,
#product .product-information .h1 {
    color: var(--ka-orange) !important;

    font-weight: 700;
    line-height: 1.2;
}

#product .current-price,
#product .product-price,
.current-price {
    color: var(--ka-text) !important;
    font-weight: 700;
}

.product-cover {
    background: var(--ka-white) !important;

    border: 1px solid var(--ka-border) !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* ==========================================================
   18. VIGNETTES FICHE PRODUIT
   Bordure noire, orange sélectionnée
   ========================================================== */

.product-images > li,
.product-images li {
    border: none !important;
}

.product-images img,
.product-images .thumb,
.js-qv-product-images img,
.product-cover-thumbnails img {
    background: var(--ka-white) !important;

    border: 2px solid #000000 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transition: border-color .2s ease;
}

.product-images img:hover,
.product-images .thumb:hover,
.product-images .thumb.selected,
.product-images img.selected,
.product-cover-thumbnails .js-thumb.selected {
    border-color: var(--ka-orange) !important;
}

.scroll-box-arrows i {
    color: var(--ka-orange) !important;
}


/* ==========================================================
   19. ONGLETS FICHE PRODUIT
   Aucun bleu
   ========================================================== */

.nav-tabs,
.product-tabs .nav-tabs,
.tabs .nav-tabs {
    border-bottom: 1px solid var(--ka-border) !important;
}

.nav-tabs .nav-link,
.product-tabs .nav-tabs .nav-link,
.tabs .nav-tabs .nav-link {
    background: transparent !important;
    color: var(--ka-grey) !important;

    border: none !important;
    border-bottom: 3px solid transparent !important;

    font-weight: 600;
}

.nav-tabs .nav-link:hover,
.product-tabs .nav-tabs .nav-link:hover,
.tabs .nav-tabs .nav-link:hover {
    color: var(--ka-orange) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.product-tabs .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-item.show .nav-link,
.tabs .nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--ka-orange) !important;

    border-bottom-color: var(--ka-orange) !important;
}


/* ==========================================================
   20. CARACTÉRISTIQUES PRODUIT
   ========================================================== */

.product-features {
    background: var(--ka-light) !important;
    border: 1px solid var(--ka-border) !important;
}

.product-features td,
.product-features th {
    border-color: var(--ka-border) !important;
}


/* ==========================================================
   21. QUANTITÉ
   ========================================================== */

.bootstrap-touchspin {
    border: 1px solid #CFCFCF !important;
    border-radius: 4px;
}

.bootstrap-touchspin input {
    border: none !important;
}

.bootstrap-touchspin .btn,
.bootstrap-touchspin .btn-touchspin {
    background: var(--ka-orange) !important;
    border: none !important;
    color: #000000 !important;
}

.bootstrap-touchspin .btn:hover,
.bootstrap-touchspin .btn-touchspin:hover {
    background: var(--ka-orange-dark) !important;
    color: var(--ka-white) !important;
}


/* ==========================================================
   22. PANIER
   ========================================================== */

.cart-grid {
    background: transparent !important;
}

.cart-item {
    border-bottom: 1px solid var(--ka-border) !important;
}

.cart-item .product-price,
.cart-summary-products .product-price {
    color: var(--ka-text) !important;
}


/* ==========================================================
   23. CHECKOUT
   ========================================================== */

body#checkout,
body#checkout #wrapper,
body#checkout main {
    background: var(--ka-white) !important;
    color: var(--ka-text) !important;
}

body#checkout section.checkout-step {
    background: var(--ka-white) !important;
    color: var(--ka-text) !important;

    border: 1px solid var(--ka-border) !important;
}

body#checkout section.checkout-step .step-title,
body#checkout section.checkout-step h1,
body#checkout section.checkout-step h2,
body#checkout section.checkout-step h3 {
    color: var(--ka-text) !important;
}

body#checkout a,
body#checkout a:visited {
    color: var(--ka-orange) !important;
}

body#checkout a:hover {
    color: var(--ka-orange-dark) !important;
}


/* ==========================================================
   24. MON COMPTE / CONNEXION
   ========================================================== */

.page-my-account,
.page-authentication,
.login-form {
    background: var(--ka-white) !important;
    color: var(--ka-text) !important;
}

.page-my-account h1,
.page-authentication h1,
.login-form h1 {
    color: var(--ka-text) !important;
}

.page-my-account .links a {
    background: var(--ka-white) !important;
    color: var(--ka-text) !important;

    border: 1px solid var(--ka-border) !important;
}

.page-my-account .links a:hover {
    border-color: var(--ka-orange) !important;
    color: var(--ka-orange) !important;
}

.page-my-account .links a i {
    color: var(--ka-orange) !important;
}


/* ==========================================================
   25. TABLEAUX
   ========================================================== */

.table {
    background: var(--ka-white) !important;
    color: var(--ka-text) !important;
}

.table thead {
    background: var(--ka-light) !important;
}

.table td,
.table th {
    border-color: var(--ka-border) !important;
}


/* ==========================================================
   26. ALERTES
   ========================================================== */

.alert-success {
    background: #F0FFF0 !important;
    border-color: #7DBA7D !important;
    color: #2D5A2D !important;
}

.alert-danger {
    background: #FFF1F1 !important;
    border-color: #D47474 !important;
    color: #7A2222 !important;
}

.alert-warning {
    background: var(--ka-orange-light) !important;
    border-color: var(--ka-orange) !important;
    color: #6A3C00 !important;
}


/* ==========================================================
   27. PATCH ANTI-BLEU PRESTASHOP CLASSIC
   ========================================================== */

.text-primary,
a.text-primary,
.text-info,
a.text-info,
.link-primary,
.page-link,
.nav-link:hover,
.nav-link:focus,
.dropdown:hover .expand-more,
.page-my-account #content .links a:hover i,
.search-widget form button[type="submit"] .search,
.search-widget form button[type="submit"] .search:hover,
.top-menu .sub-menu a:hover,
#subcategories ul li .subcategory-name:hover,
.block-categories .arrows .arrow-down:hover,
.block-categories .arrows .arrow-right:hover,
.block-categories .collapse-icons .add:hover,
.block-categories .collapse-icons .remove:hover,
.cart-grid-body a.label:hover,
body#checkout a:hover,
.wishlist-list-item:hover .wishlist-list-item-title {
    color: var(--ka-orange) !important;
}

.page-item.active .page-link {
    background-color: var(--ka-orange) !important;
    border-color: var(--ka-orange) !important;
    color: #000000 !important;
}

.progress-bar,
.custom-range::-webkit-slider-thumb,
.custom-range::-moz-range-thumb {
    background-color: var(--ka-orange) !important;
}


/* ==========================================================
   28. MENU MOBILE
   ========================================================== */

@media (max-width: 991px) {

    #mobile_top_menu_wrapper {
        background: var(--ka-white) !important;
    }

    #mobile_top_menu_wrapper a,
    #mobile_top_menu_wrapper a:visited {
        background: transparent !important;
        color: var(--ka-text) !important;
    }

    #mobile_top_menu_wrapper a:hover {
        background: var(--ka-orange-light) !important;
        color: var(--ka-orange) !important;
    }

    #header .top-menu > li > a,
    #header .top-menu a[data-depth="0"] {
        margin: 2px 0 !important;
    }

    .top-menu .sub-menu {
        border-top-width: 1px !important;
        box-shadow: none !important;
    }
}


/* ==========================================================
   29. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .block_newsletter,
    .footer-container .block_newsletter {
        padding: 20px !important;
    }

    #subcategories ul {
        gap: 16px !important;
    }

    #wrapper .breadcrumb {
        margin-bottom: 16px;
    }

    .product-miniature .product-description {
        padding: 8px 5px 12px !important;
    }
}