/* ==========================================================================
   ON WAY — Personnalisation du thème Extreme Style (ThemeBrook)
   Fichier : /themes/extremestyle/assets/css/custom.css
   --------------------------------------------------------------------------
   Ce fichier est prévu par le thème pour les retouches : il est chargé en
   dernier, après theme.css et après le module "colorchange".
   Les couleurs se règlent dans le bloc :root ci-dessous.
   ========================================================================== */

:root {
  --ow-orange: #EE3B0F;        /* orange du logo On Way */
  --ow-orange-dark: #C9300A;
  --ow-orange-soft: #FDEDE7;
  --ow-ink: #131313;           /* noir du thème */
  --ow-muted: #6E6A65;
  --ow-line: #E7E2DA;
  --ow-radius: 4px;            /* le thème est anguleux : on garde des angles nets */
}

/* --------------------------------------------------------------------------
   1. Couleur principale : bleu Extreme Style -> orange On Way
      (complète le module "colorchange" ; à régler aussi là-bas sur #EE3B0F)
   -------------------------------------------------------------------------- */
html body .btn-primary,
html body .btn.big,
html body .btn-primary:disabled,
html body .btn-primary.disabled,
html body .add-to-cart,
html body .pagination .current a,
html body .block-categories .block-title,
html body #left-column .block-title,
html body #left-column .title_block,
html body #left-column .h6,
html body .btn-to-top,
html body .cart-products-count,
html body .header-nav .cart-products-count {
  background-color: var(--ow-orange);
  border-color: var(--ow-orange);
  color: #fff;
}
html body .btn-toggle-mobile,
html body .btn-toggle-mobile:hover,
html body #header .mobile i.font-cart,
html body .cart-wishlist-checkout,
html body .search-bar__btn,
html body .btn-submit,
html body .modal-cancel.btn-secondary {
  background-color: var(--ow-orange);
  border-color: var(--ow-orange);
  color: #fff;
}
html body .nav-link.active,
html body em.font-play { color: var(--ow-orange); }
html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn.big:hover,
html body .add-to-cart:hover,
html body .btn-to-top:hover {
  background-color: var(--ow-orange-dark);
  border-color: var(--ow-orange-dark);
  color: #fff;
}
html body .price,
html body .product-price,
html body .current-price,
html body .current-price-value,
html body .product-miniature .price,
html body .breadcrumb li:last-child,
html body .breadcrumb li:last-child a,
html body .breadcrumb li:last-child span,
html body .testimonials-author,
html body .rte a,
html body .text-primary {
  color: var(--ow-orange) !important;
}
html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-link:hover,
html body .js-products-tabs .nav-link.active {
  border-color: var(--ow-orange);
  color: var(--ow-ink);
}
html body .nav.nav-tabs .nav-item .nav-link::after,
html body .nav.nav-tabs .nav-item .nav-link::before { background-color: var(--ow-orange); border-color: var(--ow-orange); }
html body .form-control:focus,
html body input:focus,
html body select:focus,
html body textarea:focus { border-color: var(--ow-orange); outline: 0; box-shadow: 0 0 0 2px rgba(238,59,15,.18); }
html body .custom-checkbox input[type="checkbox"]:checked + span { background-color: var(--ow-orange); border-color: var(--ow-orange); }
html body .custom-radio input[type="radio"]:checked + span { border-color: var(--ow-orange); box-shadow: inset 0 0 0 5px var(--ow-orange); }
html body a:hover,
html body a:focus { color: var(--ow-orange); }
::selection { background: var(--ow-orange); color: #fff; }

/* --------------------------------------------------------------------------
   2. En-tête : logo à la bonne taille + menu sur une seule ligne
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  body #header .header-top .inner-wrapper { flex-wrap: nowrap; }
  body #header #_desktop_logo {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  body #header #_desktop_logo img.logo {
    max-height: 68px;
    width: auto;
    height: auto;
    transition: max-height .2s ease;
  }
  body #header #_desktop_top_menu {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
  body #header #top-menu { flex-wrap: nowrap; justify-content: flex-end; }
  html body #header #top-menu > li > a {
    padding: 30px 13px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    position: relative;
  }
  html body #header #top-menu > li > a::after {
    content: "";
    position: absolute;
    left: 13px; right: 13px; bottom: 20px;
    height: 2px;
    background: var(--ow-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }
  html body #header #top-menu > li:hover > a::after { transform: scaleX(1); }
  /* "Bons plans" mis en avant */
  html body #header #top-menu > li > a[href*="bons-plans"] { color: var(--ow-orange); }
}
@media (min-width: 992px) and (max-width: 1199px) {
  html body #header #top-menu > li > a { padding-left: 9px; padding-right: 9px; font-size: 12px; }
  html body #header #top-menu > li > a::after { left: 9px; right: 9px; }
  body #header #_desktop_logo img.logo { max-height: 56px; }
}

/* Sous-menus : liseré orange */
body #header .top-menu .sub-menu { border-top: 3px solid var(--ow-orange); }
html body #header .top-menu .sub-menu a:hover { color: var(--ow-orange); }

/* Barre du haut (liste d'envies, panier, recherche, connexion) */
body #header .header-nav { font-size: 11px; letter-spacing: .06em; }

/* Logo mobile */
@media (max-width: 991px) {
  body #header #_mobile_logo img.logo { max-height: 46px; width: auto; }
}

/* --------------------------------------------------------------------------
   3. Accueil
   -------------------------------------------------------------------------- */

/* Titres de sections : petit trait orange */
body .headline-section { position: relative; }
body #htmlbanners10 .headline-section::after,
body .testimonials-wrapper .headline-section::after,
body .manufacturers-home .headline-section::after,
body .promo-banner .headline-section::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  background: var(--ow-orange);
  margin: 18px auto 0;
}

/* Diaporama : sous-titre en orange */
body .headerslider .slide_title-one {
  color: var(--ow-orange);
  font-weight: 700;
  letter-spacing: .14em;
}

/* Icônes des blocs "Nos engagements" (htmlbanners10) en Material Icons */
body #htmlbanners10 .wrap-icon .material-icons {
  font-size: 56px;
  line-height: 1;
  color: #fff;
  width: 96px; height: 96px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s ease, color .2s ease;
}
body #htmlbanners10 .feature-item:hover .wrap-icon .material-icons { border-color: var(--ow-orange); color: var(--ow-orange); }

/* Onglets produits : libellés plus lisibles */
body .productstabs-section .nav-tabs .nav-link { font-weight: 600; }

/* Texte de présentation (module Texte personnalisé) */
body #custom-text {
  max-width: 920px;
  margin: 70px auto;
  padding: 0 20px;
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: #4a4a4a;
}
body #custom-text h1,
body #custom-text h2,
body #custom-text h3 {
  font-weight: 600;
  color: var(--ow-ink);
  margin-bottom: 24px;
}
body #custom-text strong { color: var(--ow-ink); }
body #custom-text video,
body #custom-text iframe {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 36px auto 0;
  background: #000;
}

/* Bannière publicitaire (module Bannière) : hauteur raisonnable */
body #content > .htmlcontent-three-section > a.banner,
body .htmlcontent-three-section a.banner {
  display: block;
  margin: 0 auto 60px;
  text-align: center;
  overflow: hidden;
}
body .htmlcontent-three-section a.banner img {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   4. Vignettes produits
   -------------------------------------------------------------------------- */
body .product-miniature .product-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html body .product-miniature .product-flags .product-flag.new { background: var(--ow-ink); color: #fff; }
html body .product-miniature .product-flags .product-flag.discount,
html body .product-miniature .product-flags .product-flag.on-sale,
html body .product-miniature .product-flags .product-flag.discount-percentage { background: var(--ow-orange); color: #fff; }
html body .product-miniature .highlighted-informations .add-cart,
html body .product-miniature .highlighted-informations a:hover { color: var(--ow-orange); }

/* --------------------------------------------------------------------------
   5. Fiche produit
   -------------------------------------------------------------------------- */
/* Descriptions collées depuis les sites des marques : on neutralise leurs styles */
body#product .product-description [style],
body#product #description [style],
body#product .product-description-short [style] {
  font-family: inherit !important;
  font-size: inherit !important;
  background-color: transparent !important;
  line-height: inherit !important;
}
html body#product .product-prices .current-price,
html body#product .product-prices .current-price-value { font-weight: 700; }

/* --------------------------------------------------------------------------
   6. Pied de page
   -------------------------------------------------------------------------- */
html body .footer-container a:hover { color: var(--ow-orange); }
body .footer-container .h3::after,
body .footer-container .block-contact-title::after {
  content: "";
  display: block;
  width: 32px; height: 2px;
  background: var(--ow-orange);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   7. Corrections après mise en ligne du contenu (v1.1)
   -------------------------------------------------------------------------- */

/* En-tête transparent : voile sombre pour que le menu reste lisible
   sur les photos claires, tout en haut de la page */
body #header.fixed-top {
  background: linear-gradient(to bottom, rgba(10,10,10,.72) 0%, rgba(10,10,10,.45) 70%, rgba(10,10,10,0) 100%);
}

/* Diaporama : le texte démarre sous l'en-tête (plus de chevauchement
   sur les écrans peu hauts) + voile sombre à gauche derrière le texte */
body .headerslider .headerslider-figure { position: relative; }
body .headerslider .headerslider-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,0) 72%);
}
body .headerslider .caption-description {
  z-index: 2;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  display: flex;
  align-items: center;
  padding-top: 150px;
  padding-bottom: 50px;
}
body .headerslider .caption-description > .container { margin-left: auto; margin-right: auto; }
@media (min-width: 768px)  { body .headerslider .caption-description > .container { width: 720px; } }
@media (min-width: 992px)  { body .headerslider .caption-description > .container { width: 960px; } }
@media (min-width: 1200px) { body .headerslider .caption-description > .container { width: 1140px; } }
@media (max-width: 991px)  { body .headerslider .caption-description { padding-top: 90px; padding-bottom: 40px; } }

/* Lien "Blog" masqué tant qu'aucun article n'est publié
   (supprimer ces 2 lignes pour le réafficher) */
body #top-menu > li:has(> a[href$="/blog"]),
body #top-menu > li:has(> a[href*="/blog?"]) { display: none; }

/* "Nos partenaires" : sous-titre de démo du thème masqué */
body #manufacturers-home .description-section { display: none; }

/* Texte de présentation : la vidéo est maintenant dans le bloc "On Way en vidéo" ;
   on neutralise aussi les styles collés depuis un autre site */
body #custom-text video { display: none; }
body #custom-text [style] {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  background-color: transparent !important;
}
body #custom-text p:empty { display: none; }

/* Bouton "S'abonner" de la newsletter en orange */
html body .block_newsletter .btn-submit,
html body .block_newsletter button[type="submit"] {
  background-color: var(--ow-orange) !important;
  border-color: var(--ow-orange) !important;
  color: #fff !important;
}
html body .block_newsletter .btn-submit:hover { background-color: var(--ow-orange-dark) !important; }