@import url("../../classic/assets/css/theme.css");

/* ======================================
   01) VARIABLES
====================================== */
:root {
  --black: #000;
  --white: #fff;
  --yellow: #fff000;
  --gray-050: #fcfcfc;
}

/* ======================================
   02) BASE / TYPO / LIENS
====================================== */
.page-content.page-cms ul,
p {
  color: var(--black);
}

.h1,
.h2,
.h3,
.h4,
body,
p,
#products,
#products .page-not-found h4, .title_blog, .title_blog a, a.ybc_title_block, .ybc-navigation-blog-content .title_blog, .ybc-navigation-blog-content .title_blog a, 
#left-column .title_blog, #left_column .title_blog, #right-column .title_blog, #right_column .title_blog, .blog_description, .ybc_indexing_box_title {
  color: var(--black);
}
.page_home .title_blog, .page_home_gallery .title_blog {
  font-size: 1.8em;
}
a.ybc_title_block  {
    color: var(--white);
    background: var(--black);
    padding: 5%;
}
a.ybc_title_block:hover {
    color: var(--yellow);
}
a.read_more  {
    background: var(--yellow);
    color: var(--black);
    text-align: center;
    font-style: normal;
    padding: 4%;
    font-weight: bold;
    text-transform: uppercase;
}
a.read_more:hover {
    color: var(--white);
    background: var(--black);
}
a.view_all_link {
    background: var(--black);
    font-weight: bold;
}
a.view_all_link:hover {
    background: var(--yellow);
    color: var(--black) !important;
    text-decoration: none;
    font-weight: bold;
}
.ybc-blog-wrapper-detail a:hover, .ybc-blog-like-span:hover, .ybc_button_backtolist:hover, .ybc-block-comment-report:hover {
  color: var(--black) !important;
  text-decoration: underline !important;
}

.h1,
h1 {
  font-size: 2.1rem;
}

.h2,
h2 {
  font-size: 1.8rem;
  color: var(--black);
  text-align: left;
}

.separator {
  border: 1px solid var(--black);
}

.brand-infos h3 {
  font-size: 0.8em;
}

a {
  color: var(--black);
}

a:hover {
  color: var(--black);
  text-decoration: underline;
}

/* Hover spécifique checkout */
body#checkout a:hover {
  color: var(--yellow);
}

.account-list a:hover,
.block_newsletter form button[type="submit"] .search:hover,
.footer-container li a:hover {
  color: var(--yellow);
}

/* ======================================
   03) LAYOUT GLOBAL
====================================== */
#wrapper {
  background: var(--yellow);
}

#content-wrapper {
  margin-bottom: 30px;
}

.page-header {
  margin-bottom: 30px;
}

/* ======================================
   04) HEADER (NAV + TOP)
====================================== */
#header .header-nav {
  max-height: 50px;
  background-color: var(--black);
  border-top: none;
  border-bottom: none;
}

#header .header-top {
  background-color: var(--yellow);
  color: var(--black);
}

#contact-link a,
#header {
  color: var(--white);
}

.top-menu a:not([data-depth="0"]),
#header a,
#header #_desktop_user_info a {
  color: var(--white);
}

#header a:hover,
#header .top-menu a[data-depth="0"]:hover {
  color: var(--yellow);
}

#header .header-top a[data-depth="0"] {
  background-color: var(--black);
  color: var(--white);
}

#header .header-nav .blockcart {
  background: var(--yellow);
  color: var(--black);
}

#header .header-nav .cart-preview .shopping-cart {
  color: var(--black);
}

#header .header-nav .cart-preview.active {
  background-color: var(--yellow);
}

#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active i,
#header .header-nav .cart-preview.active a:hover {
  color: var(--black);
}

/* ======================================
   05) NAVIGATION / MEGAMENU (ETS)
====================================== */
ul.mm_columns_ul.active {
  background-color: var(--black);
}

.ets_mm_megamenu .mm_columns_ul {
  border: none;
}

/* Layout 5 : titres / liens */
.layout_layout5 .mm_columns_ul .h1,
.layout_layout5 .mm_columns_ul .h2,
.layout_layout5 .mm_columns_ul .h3,
.layout_layout5 .mm_columns_ul .h4 a:hover,
.layout_layout5 .mm_columns_ul .h5,
.layout_layout5 .mm_columns_ul .h6,
.layout_layout5 .mm_columns_ul .ets_mm_block > .h1 a,
.layout_layout5 .mm_columns_ul .ets_mm_block > .h2 a,
.layout_layout5 .mm_columns_ul .ets_mm_block > .h3 a,
.layout_layout5 .mm_columns_ul .ets_mm_block > .h4 a:hover,
.layout_layout5 .mm_columns_ul .ets_mm_block > .h5 a,
.layout_layout5 .mm_columns_ul .ets_mm_block > .h6 a,
#header .layout_layout5 .mm_columns_ul .ets_mm_block > .h1 a,
#header .layout_layout5 .mm_columns_ul .ets_mm_block > .h2 a,
#header .layout_layout5 .mm_columns_ul .ets_mm_block > .h3 a,
#header .layout_layout5 .mm_columns_ul .ets_mm_block > .h4 a,
#header .layout_layout5 .mm_columns_ul .ets_mm_block > .h5 a,
#header .layout_layout5 .mm_columns_ul .ets_mm_block > .h6 a {
  color: var(--white);
}

/* ======================================
   06) CAROUSEL / POPOVER
====================================== */
.carousel {
  background-color: var(--white);
}

.carousel .direction .carousel-control i {
  background: var(--black);
}

.carousel .carousel-item .caption {
  background: var(--white);
  padding: 2%;
  color: var(--black);
}

.carousel .carousel-item .caption .display-1 {
  font-size: 1.8rem;
  color: var(--black);
}

.carousel .carousel-item .caption .caption-description p {
  color: var(--black);
}

.popover {
  background-color: var(--black);
  color: var(--white);
}

/* ======================================
   07) BREADCRUMB / CATÉGORIES / SOUS-CATÉGORIES
====================================== */
#wrapper .breadcrumb {
  margin-bottom: 40px;
}

#wrapper .breadcrumb li::after,
#wrapper .breadcrumb li a {
  color: var(--black);
}

#wrapper .breadcrumb li:last-child {
  color: var(--white);
  background: var(--black);
  padding: 5px 0 5px 10px;
}

/* Sous-catégories */
a.subcategory-name {
  color: var(--white);
  background: var(--black);
  padding: 2%;
}

#subcategories ul li:hover .subcategory-image a {
  border: 5px solid var(--black);
}

#subcategories ul li .subcategory-name:hover {
  color: var(--yellow);
}

/* ======================================
   08) LISTING PRODUITS / CARTES PRODUITS
====================================== */
.block-categories .h6 {
  font-weight: 800;
}

.product-line-grid-body > .product-line-info > .label {
  color: var(--black);
}

.featured-products .products-section-title {
  font-weight: 900;
}

/* Boutons */
a.btn {
  background-image: linear-gradient(to right, var(--yellow) 50%, var(--black) 50%);
  background-size: 200% 100%;
  background-position: right;
  color: var(--white);
  transition: background-position 0.3s ease, color 0.3s ease;
  text-transform: none;
  text-decoration: none;
}

a.btn:hover {
  background-position: left;
  color: var(--black);
}

a.all-product-link.float-xs-left.float-md-right.h4 {
  background: var(--black);
  color: var(--white);
  padding: 1%;
}

.card-block.checkout .btn-primary:hover {
  width: 100%;
  white-space: normal;
  color: var(--white);
  background-position: left;
}

/* Flags / prix */
.product-flags li.product-flag,
.has-discount .discount {
  background: var(--black);
}

.product-flags li.product-flag.discount,
.btn-primary {
  background: var(--yellow);
  color: var(--black);
  font-size: 14px;
  font-weight: bold;
}

.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .btn-primary.dropdown-toggle {
  background: var(--black);
  border: 1px solid var(--yellow);
}

.btn-primary:hover {
  background: var(--black);
  color: var(--white);
}

.product-price {
  display: inline-block;
  max-width: 100%;
  color: var(--white);
  background-color: var(--black);
  padding: 5px;
}

.product-prices {
  margin-top: 0;
}

.product-prices div {
  margin-bottom: 0;
}

/* Cartes produit */
.product-miniature .product-description {
  text-align: center;
  padding: 0.25rem 0.25rem 3.7rem;
}

.product-miniature .product-title a {
  font-size: large;
  font-weight: bold;
}

.product-miniature .product-title a,
.block-categories a,
.facets-title,
#search_filters .facet .facet-title,
.cart-grid-body a.label:hover {
  color: var(--black);
}

.product-miniature .product-price-and-shipping,
.product-miniature .highlighted-informations .quick-view {
  color: var(--black);
}

.product-miniature .highlighted-informations .quick-view:hover {
  color: var(--yellow);
  text-shadow: var(--yellow) 1px 0 10px;
}

/* Pagination */
.pagination .current a {
  display: inline-block;
  color: var(--white);
  font-weight: bold;
  background: var(--yellow);
  padding: 5px;
}

/* ======================================
   09) FICHE PRODUIT (IMAGES / CTA / INFOS)
====================================== */
.product-information a,
.product-information a:hover {
  color: var(--black);
  text-decoration: underline;
  font-weight: bold;
}

.product-information .product-description ul li {
  color: var(--black);
}

.product-actions .control-label {
  font-weight: bold;
}

button.btn.btn-primary.add-to-cart {
  background: var(--black);
  color: var(--white);
}

.product-actions .add-to-cart .material-icons {
  color: var(--white);
}

.product-images > li.thumb-container .thumb.selected {
  border: 3px solid var(--black);
}

.product-images > li.thumb-container .thumb:hover {
  border: 5px solid var(--black);
}

.product-manufacturer a,
.product-manufacturer a:link,
.product-manufacturer a:hover {
  color: var(--black);
  text-decoration: underline;
  font-weight: bold;
}

.social-sharing {
  font-weight: bold;
}

/* Tabs */
.tabs .nav-tabs .nav-link.active {
  color: var(--black);
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  border: 0;
  border-bottom: 3px solid var(--black);
}

/* ======================================
   10) PANIER / CHECKOUT
====================================== */
#products .page-not-found {
  margin: 0;
  min-width: 100%;
}

.cart-grid-body .card-block h1 {
  font-weight: 800;
}

#blockcart-modal .cart-content .cart-content-btn .btn .btn-secondary {
  background: var(--yellow);
}

#blockcart-modal .product-name {
  color: var(--black);
}

#blockcart-modal .product-price {
  background: none;
}

#blockcart-modal .cart-content .cart-content-btn .btn-primary:hover {
  color: var(--white);
}

.cart-overview.js-cart .product-price {
  color: var(--black);
  background: none;
}

/* Indicators */
i.material-icons.add,
i.material-icons.remove,
.active_filters,
body#checkout section.checkout-step.-reachable.-current .step-number,
body#checkout #footer {
  background: var(--black);
  color: var(--white);
}

body#checkout section.checkout-step .step-title {
  border-bottom: 1px solid var(--black);
}

/* ======================================
   11) MODULES / COMPOSANTS TRANSVERSES
====================================== */
.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i,
.dropdown:hover .expand-more,
.page-my-account #content .links a:hover i,
.search-widget form button[type="submit"] .search:hover,
.top-menu .sub-menu a:hover {
  color: var(--yellow);
}

.form-control:focus {
  color: var(--black);
  background-color: var(--white);
  outline: 0.1875rem solid var(--yellow);
  border-color: var(--yellow);
}

.custom-radio input[type="radio"]:checked + span {
  background-color: var(--yellow);
}

#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 {
  color: var(--yellow);
}

#search_filters .ui-widget-header {
  background: var(--yellow);
}

.products-sort-order .select-list:hover {
  background: var(--yellow);
  color: var(--black);
}

/* Social */
.block-social ul li a {
  width: 2.45rem;
}

.block-social ul li,
.block-social ul li:hover {
  background-color: transparent;
}

input.btn.btn-primary:hover,
.block_newsletter input.btn.btn-primary:hover {
  border: 1px solid var(--yellow);
}

/* Contact */
.contact-rich,
.contact-form h3,
.contact-rich h4,
.contact-rich .block .data {
  color: var(--black);
}

.contact-rich a {
  color: var(--black);
  text-decoration: revert-layer;
}

/* Alerts */
.alert.alert-warning {
  display: none;
}

.alert-info {
  background-color: var(--gray-050);
  border-color: var(--gray-050);
  color: var(--black);
}

p.block-title {
  background-color: var(--white);
  padding: 2%;
}

/* Divers */
img.img.thumb-artist {
  width: 100px;
}

#manufacturer-short_description {
  margin-top: 40px;
}

.block_newsletter form input[type="email"]:focus {
  border: 3px solid var(--yellow);
}

/* ======================================
   12) FOOTER
====================================== */
#footer,
#blockEmailSubscription_displayFooterBefore {
  background: var(--black);
  color: var(--white);
}

#footer {
  color: var(--white) !important;
}

.footer-container .h3,
.footer-container .h4,
#block_myaccount_infos .myaccount-title a {
  color: var(--yellow);
}

.footer-container li a,
.block-contact {
  color: var(--white);
}

span.footer-email-link a {
  color: var(--yellow);
}

.block_newsletter form .row .col-xs-12:last-of-type p,
span.d-block.js-terms a {
  color: var(--white);
}

p.text-sm-center a,
#contact-infos a,
.block_newsletter #block-newsletter-label {
  color: var(--yellow);
}

a#cta-terms-and-conditions-footer-0:hover {
  color: var(--yellow) !important;
}

/* ======================================
   13) ASSETS / ICONES
====================================== */
.tiktok {
  background-image: url(/themes/classic/assets/css/tiktok.svg);
}

/* ======================================
   90) RESPONSIVE
====================================== */

/* ---------- Mobile : 0 → 580px ---------- */
@media screen and (max-width: 580px) {
  ul.mm_menus_ul.clicktext_show_submenu.active {
    background-color: var(--yellow);
  }

  .transition_floating .close_menu *,
  .transition_full .close_menu *,
  .ybc-menu-vertical-button .icon-bar {
    color: var(--white) !important;
  }

  #wrapper .breadcrumb li:last-child {
    padding: 1px 0 1px 5px;
    line-height: 30px;
  }

  /* ===== Header (mobile topbar) ===== */
  .mobile-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0;
  }

  .mobile-topbar__phone {
    flex: 0 1 48%;
    min-width: 0;
    padding-left: 10px;
    padding-bottom: 15px;
  }

  .mobile-topbar__phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-topbar__phone-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
  }

  .mobile-topbar__logo {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

  .mobile-topbar__logo img {
    max-height: 70px;
    width: auto;
  }

  .mobile-topbar__actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
  }

  #header {
    color: var(--white);
  }

  #header .header-nav .user-info {
    margin-top: 0;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 15px;
    padding-left: 0;
  }

  #header .top-logo img {
    max-height: 3.5rem;
  }

  #header .header-nav .blockcart {
    height: 70px;
  }

  .material-icons {
    font-size: 30px;
  }

  /* ===== MegaMenu / mobile menu ===== */
  .ets_mm_megamenu.hook-default {
    background-color: var(--black);
    margin-top: 0;
    padding: 0;
  }

  .ets_mm_megamenu_content_content {
    background: var(--black);
    color: var(--white);
  }

  .ybc-menu-toggle.ybc-menu-btn.closed {
    background: var(--black);
    color: var(--white);
  }

  .ybc-menu-toggle .icon-bar {
    background-color: var(--white);
  }

  #mobile_top_menu_wrapper {
    background-color: transparent;
  }

  #mobile_top_menu_wrapper .js-top-menu-bottom a {
    color: var(--black);
    font-size: 16px;
    font-weight: 800;
  }

  li.mm_menus_li.mm_sub_align_full.mm_has_sub.hover,
  li.mm_menus_li.mm_sub_align_full {
    background: var(--yellow);
    color: var(--black);
    border: none;
  }

  span.mm_menu_content_title {
    color: var(--black);
    font-size: 20px;
    font-weight: 700;
  }

  /* ===== Carousel ===== */
  .carousel {
    background-color: var(--white);
  }

  .carousel .carousel-item .caption {
    max-width: 80%;
  }

  .carousel .carousel-item .caption .display-1 {
    font-size: 1.4rem;
  }

  /* ===== Catégories / sous-catégories ===== */
  #subcategories .subcategory-heading {
    margin-bottom: 20px;
    padding-top: 20px;
    font-weight: 700;
    text-align: center;
  }

  body#category #subcategories ul.subcategories-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body#category #subcategories ul.subcategories-list > li {
    margin: 0;
    overflow: hidden;
  }

  body#category #subcategories .subcategory-image {
    width: 55%;
    aspect-ratio: 141 / 180;
    overflow: hidden;
  }

  body#category #subcategories .subcategory-image a,
  body#category #subcategories .subcategory-image picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  body#category #subcategories .subcategory-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  body#category #subcategories h5 {
    margin: 6px 0 0;
    text-align: center;
  }

  body#category #subcategories a.subcategory-name {
    display: -webkit-box;
    max-width: 53%;
    overflow: hidden;
    word-break: break-word;
    font-size: 11px;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body#category #subcategories .cat_desc {
    display: none;
  }

  #manufacturer #main ul .brand-img {
    position: relative;
    width: 145px;
    margin: auto;
  }

  #manufacturer #main ul .brand {
    display: grid;
    min-width: 160px;
  }

  .brand-infos h3 {
    font-size: 1.2em;
  }

  .category-description img,
  .cms-page-content img,
  #content-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .category-description iframe,
  .cms-page-content iframe,
  #content-wrapper iframe {
    width: 100%;
    max-width: 100%;
    border: 0;
  }

  /* ===== Footer (mobile) ===== */
  .block-contact .navbar-toggler .material-icons {
    color: var(--white);
  }

  .hidden-md-up.block-contact-mobile .content {
    padding: 3% 0 0 3%;
    font-size: 1.4em;
  }

  .block-contact-mobile .content a {
    color: var(--yellow);
  }

  .blockreassurance {
    border: 1px solid var(--yellow);
  }

  .blockreassurance .block-title {
    color: var(--yellow) !important;
    font-size: 20px;
    font-weight: 500;
  }

  .thumbnail-container {
    min-width: 100% !important;
  }

  .block-social ul {
    margin-top: 10px;
    margin-bottom: 0;
  }

  .block-contact #contact-infos {
    padding-top: 10px;
  }

  .footer-container .links ul {
    margin: 0;
    padding: 0;
    background-color: transparent;
  }

  .footer-container li {
    margin-bottom: 0;
  }

  .footer-container .links ul > li {
    background-color: var(--yellow);
    color: var(--black);
    border: none;
  }

  .footer-container .links ul > li a {
    color: var(--black);
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    padding: 0;
  }

  .footer-container .links .h3 {
    font-size: 1.3rem;
    line-height: 1.5;
  }

  .footer-container:last-child p {
    margin-top: 10px;
    text-align: center;
  }

  #products .up .btn-secondary,
  #products .up .btn-tertiary {
    color: var(--white);
  }
}

/* ---------- Très grands mobiles : 577 → 767px ---------- */
@media (min-width: 577px) and (max-width: 767.98px) {
  .ybc-menu-toggle {
    color: var(--white);
  }

  .ybc-menu-toggle .icon-bar {
    background-color: var(--white);
  }
}

/* ---------- Desktop+ : ≥ 768px ---------- */
@media (min-width: 768px) {
  /* Carousel */
  .carousel .carousel-item .caption {
    max-width: 50%;
  }

  .carousel-control {
    left: -1px;
  }

  .carousel-control .icon-next {
    margin-right: -12px;
  }

  /* Cartes produits */
  .product-miniature,
  .product-miniature .product {
    background: var(--white);
    margin-bottom: 40px;
    min-height: 473px;
  }

  .product-miniature .thumbnail-container:hover .highlighted-informations {
    top: calc(100% - 4rem);
  }

  .products-selection .sort-by {
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    text-align: right;
    word-break: break-word;
    white-space: normal;
  }

  /* Sous-catégories */
  #subcategories .subcategory-heading {
    margin-bottom: 20px;
    background: var(--yellow);
    padding: 5px;
    font-weight: bold;
  }

  #subcategories ul li {
    margin: 5px;
    text-align: center;
    min-width: 32%;
  }

  #subcategories ul li .subcategory-name {
    text-transform: uppercase;
    line-height: 25px;
    padding: 3px;
  }

  #subcategories ul li .subcategory-image a {
    display: block;
    padding: 9px;
    border: 1px solid var(--black);
  }

  /* MegaMenu layout 3 */
  .layout_layout3 .ets_mm_block_content li > a::before {
    content: none;
  }

  .mm_blocks_li {
    float: left;
    width: 100%;
    padding: 0 5px;
    margin-bottom: 0;
  }

  #header .layout_layout3:not(.changestatus) .mm_columns_ul * {
    color: var(--white);
  }

  .layout_layout3 .ets_mm_block_content li:not(.item_has_img) {
    border-bottom: none;
  }

  .layout_layout3 .ets_mm_block_content a {
    line-height: 20px;
    text-align: center;
  }

  /* CTA listing */
  #js-product-list .btn-primary {
    width: 100%;
    background: var(--black);
    color: var(--white);
  }

  /* Pagination */
  .pagination > div:first-child {
    font-weight: bold;
  }

  /* Page not found / divers */
  .block-category h1 {
    margin-bottom: 1rem;
    font-size: 2rem;
    border-bottom: 1px solid var(--black);
  }

  li.cart-item a.label {
    background: transparent;
    color: var(--black);
    text-decoration: none;
  }

  a.label,
  .cart-grid-body a.label:hover {
    font-size: 0.875rem;
    background: var(--black);
    color: var(--white);
    padding: 1%;
    text-align: right;
    font-weight: bold;
    text-decoration: none;
  }

  #content.page-content.page-not-found {
    width: 100%;
    margin-top: 5%;
    padding: 1%;
    border: 2px solid var(--black);
    background-color: var(--white);
  }
}
/* ---------- Tablettes : 768 → 991px ---------- */
@media (min-width: 830px) and (max-width: 1024px) {
  #subcategories ul li {
    min-width: 31%;
  }
}