/*
* Version JCL 24/02/2023
*/
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

@import url("https://fonts.googleapis.com/css2?family=Parisienne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sniglet&display=swap");
/**/
/**/
/*-------------liens génériques  ---------------------*/
a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: none;
}
/*-------------header   ---------------------*/
#header a {
  color: #004aaa;
  text-decoration: none;
}
#header a:hover {
  color: #fff;
  text-decoration: none;
}
/*-----------------  image de fond   ---------------------*/
#wrapper {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 1;
}

#wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-image: url("https://lastrepelerine.com/images/shopbg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #fff;
  opacity: 0.5; /* règle l’opacité de l’image uniquement */
  z-index: -1;
}

/*----------------------nouveau---------------------*/
.product-flags li.product-flag {
  font-size: 1rem;
  font-weight: 200 !important;
  color: #fff;
  text-transform: uppercase;

  background: #004aaa !important;
}
#products .products-section-title,
.featured-products .products-section-title,
.product-accessories .products-section-title {
  margin: 2.5rem 0;
  font-weight: 500;
  text-align: center;
  text-transform: none !important;
}
/*-------------header zone contactez & cart  ---------------------*/
#header {
  position: relative;
  background-color: #fff !important;
  color: #004aaa !important;
  padding-top: 2.5rem;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 11%);
}

/*-----------------btn-------------*/
.btn-primary,
.btn-primary:hover {
  color: #fff;
  background-color: #004aaa !important;
  border-color: transparent;
}
.tabs .nav-tabs .nav-link.active {
  color: #004aaa !important ;
}
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  border: 0;
  border-bottom: #004aaa 3px solid !important ;
}
.tabs .nav-tabs .nav-link.active {
  color: #004aaa !important;
}
/*------------------------prix et ttc sous produits---------------------------*/
.product-price {
  display: inline-block;
  max-width: 100%;
  color: #555 !important;
  font-size: 2em !important;
}
.product-prices .tax-shipping-delivery-label {
  display: none !important;
}
/*---------------image border --------*/
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover {
  border: #000 1x solid !important;
}
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover {
  border: #000 3px solid !important;
}
/*----------------- header ligne contactez & cart  ---------------------*/
#header .header-nav {
  /* max-height: 50px; */
  border-bottom: #004aaa 0px solid !important;
  /* background-color: #fff; */
}
#header .header-nav .cart-preview.active {
  background: #004aaa !important;
}
/*----------------- survol connexion  ---------------------*/
#header .header-nav .user-info a:hover {
  color: #fff !important;
}
/*----------------- header zone  menu  ---------------------*/
#header .header-top {
  background-color: #fff;
  border-bottom: #382818 1px solid;
}
/*----------------- header fond cart  ---------------------*/
#header .header-nav .blockcart {
  background: #fff;
  color: #004aaa !important;
}
#header .header-nav .cart-preview .shopping-cart {
  color: #333;
}
#header .header-nav .cart-preview.active {
  background: #004aaa;
}
/*----------------- supprimer barre de recherche  ---------------------*/
/* gestionnaire de module - barre de recherche - désactiver */
/**/
/**/
#search_widget {
  /* si non déssactivé*/
  overflow: hidden;
  width: 80%;
  max-width: 255px;
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
/*----------------- ligne de menu principal  ---------------------*/
#header .header-top a[data-depth="0"] {
  font-family: "Sniglet", system-ui !important;
  color: #004aaa !important;
  font-size: 1.4rem !important;
  text-transform: none !important;
  padding-left: 7px;
  padding-right: 7px;
  margin: 0;
  font-weight: 100 !important;
}
#header .header-top .menu {
  padding-left: 110px !important;
  text-align: right !important;
}
/*----------------- ligne de menu principal - couleur survol  ---------------------*/
#header .header-top a:hover[data-depth="0"] {
  font-family: "Sniglet", system-ui !important;
  color: #004aaa !important;
  font-size: 1.4rem !important;
  text-transform: none !important;
  padding-left: 3px;
  padding-right: 3px;
  margin: 0;
  font-weight: 100 !important;
}
/*----------------- premier sous menu  ---------------------*/
#header .header-top a[data-depth="1"] {
  font-family: "Sniglet", system-ui !important;
  color: #004aaa !important;
  font-size: 1.4rem !important;
  text-transform: none !important;
  padding-left: 3px;
  padding-right: 3px;
  margin: 0;
  font-weight: 100 !important;
}
/*----------------- premier sous menu - couleur survol  ---------------------*/
#header .header-top a:hover[data-depth="1"] {
  font-family: "Sniglet", system-ui !important;
  color: #004aaa !important;
  font-size: 1.4rem !important;
  text-transform: none !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
  margin: 0 !important;
  font-weight: 100 !important;
}
/*-----------------  sous menu déroulant  ---------------------*/
.top-menu .sub-menu {
  box-shadow: 2px 1px 11px 2px rgba(0, 0, 0, 0.51) !important;
  border: none !important;

  margin-left: 0.9375rem !important;
  width: inherit !important;
  min-width: inherit !important;
  z-index: 18 !important;
  position: absolute !important;
  box-shadow: 2px 1px 11px 2px rgba(100, 100, 100, 0.51) !important;
}
#header .menu,
#header .menu > ul > li {
  display: inline-block;
  position: relative;
}
/**/
/**/
.top-menu .sub-menu {
  display: block; /* assure que ce n'est pas en flex */
}

.top-menu .sub-menu li {
  display: block;
  width: 100%;
}
/*----------------- slider texte  ---------------------*/
.text-uppercase {
  text-transform: none !important;
}
.carousel .carousel-item .caption {
  max-width: 850px !important;
  color: #fff !important;
}
/*----------------- slider cadrage  ---------------------*/
.carousel .caption {
  bottom: 30px;
  /* marge entre le bas du texte et le bord bas du slider */
  left: 80px;
  /* marge entre la gauche du texte et le bord gauche du slider */
  max-width: 850px !important;
  /* largeur max du texte - pour cadrage image */
}
/*----------------- slider bordure-ombre de la zone  ---------------------*/
.carousel {
  margin-top: 0.5em;
  margin-bottom: 0rem;
  padding-top: 0em;
  padding-bottom: 0;
  box-shadow: 1px 1px 3px #333;
}
/*----------------- slider titre  ---------------------*/
.carousel .caption .display-1 {
  color: #fff !important;
  font-family: "Parisienne", cursive !important;
  text-transform: none !important;
  font-size: 60px !important;
  font-weight: 200;
  /* placer ps_imageslider dans child_classic/modules*/
}
/*----------------- slider ligne H1  ---------------------*/
.carousel h1 {
  font-family: "Sniglet", system-ui !important;
  font-size: 2rem;
  text-transform: none !important;
  /* couleur gérée dans l'interface - on peut définir la couleur par défaut*/
  color: #fff !important;
}
/*----------------- slider ligne H2  ---------------------*/
.carousel h2 {
  font-family: "Sniglet", system-ui !important;
  text-transform: none !important;
  font-weight: 100 !important;

  /* couleur gérée dans l'interface - on peut définir la couleur par défaut*/
  color: #fff !important;
}
/*----------------- slider ligne H3  ---------------------*/
.carousel h3 {
  font-family: "Sniglet", system-ui !important;
  text-transform: none !important;
  font-weight: 100 !important;
  font-size: 36px !important;
  /* couleur gérée dans l'interface - on peut définir la couleur par défaut*/
  color: #fff !important;
}
/**/
/**/
/*----------------- zone de texte - custom text block  ---------------------*/
#custom-text {
  min-height: 200px;
  height: auto !important;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
  text-transform: none !important;
  background-color: #fff;
  /* couleur texte gérée dans l'interface */
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  border-color: #333;
  box-shadow: 1px 1px 3px #333;
}
/**/
/**/
/*-----------------  footer  ---------------------*/
@media (max-width: 767px) {
  .footer-container .links ul {
    margin-bottom: 0;
    border: none !important;
    background: none !important;
  }
}
@media (max-width: 767px) {
  .footer-container .links ul > li {
    border-bottom: 1px solid #fff;
  }
}
/*-----------------------------------------------------------------------*/

#footer {
  position: relative;
  background: #333;
  padding-top: 2.5rem;
  color: #fff;
}
#footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://lastrepelerine.com/images/phytotherapie.jpg") center/cover no-repeat;
  opacity: 0.35; /* opacité de l’image uniquement */
  z-index: 0;
}
#footer > * {
  position: relative; /* garde le contenu au-dessus de l’image */
  z-index: 1;
}

/* titre colones produits societe du footer */
.footer-container .h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff !important;
}
/*  titre colonne votre compte du footer */
#block_myaccount_infos .myaccount-title a {
  color: #fff !important;
}
/* texte colones produits societe et compte du footer */
.footer-container li a {
  color: #fff !important;
}
.footer-container li a:hover {
  color: #fff !important;
  font-weight: 600;
}
/*  titre colonne information du footer */
.block-contact .block-contact-title,
.linklist .blockcms-title a {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff !important;
}
/*  texte colonne information du footer */
.block-contact {
  color: #fff !important;
}
.block-contact a {
  color: #fff !important;
}
.block-contact a:hover {
  color: #000;
  font-size: 1.1em;
}
.block-social ul li {
  background-color: #004aaa !important;
}
/*-----------------  bloc newsletter  ---------------------*/
/* bloc désactivable par son module - préférer sendinblue ou mailchimp */
.block_newsletter form .row .col-xs-12:last-of-type p,
.block_newsletter form .row .col-xs-12:last-of-type .page-content.page-cms ul,
.page-content.page-cms .block_newsletter form .row .col-xs-12:last-of-type ul {
  font-size: 0.75rem;
  color: #f8b890;
}
.block_newsletter #block-newsletter-label {
  font-size: 1.3125rem;
  line-height: 1.75rem;
  color: #f8b890;
}
.block_newsletter {
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: 20px;
  padding-bottom: 20px;
  border-style: solid;
  border-color: #c88a1d;
  border-width: 2px;
}
/**/
/**/
/*----------------- bouton fiche produit et bouton formulaire newsletter  ---------------------*/
/*----------------- bouton fiche produit survol  */
.btn-primary {
  color: #fff !important;
  background-color: #382818;
  border-color: transparent;
}
.btn-primary:hover {
  color: #fff !important;
  background-color: #004aaa !important;
  border-color: transparent;
}
.btn-primary:focus {
  color: #fff !important;
  background-color: #004aaa !important;
  border-color: transparent;
  outline: none !important;
}
.btn-primary:active {
  color: #fff !important;
  background-color: #004aaa !important;
  border-color: transparent;
  outline: none !important;
}
input,
button,
select,
textarea {
  background-color: #fff;
}
input,
button,
select,
textarea a:active {
  background-color: #fff;
}
/*----------------- bouton désactivé survol  */
.btn.disabled:hover,
.btn:disabled:hover {
  cursor: not-allowed;
  opacity: 0.65;
  background-color: #999;
}
/*-----------------  Etiquette Nouveau sur produits  ---------------------*/
.product-flags li.product-flag {
  font-family: "Sniglet", system-ui !important;
  font-weight: 100;
  padding: 0.5rem 0.5rem;
  text-transform: none !important;
  color: #fff !important;
  margin-top: 3%;
  /* pour positionner en hauteur */
  margin-left: 3%;
  /* pour positionner en largeur */
  font-size: 1.2rem;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
}
/*-----------------  Titres Zones Home et Nom Produit  ---------------------*/
.h1,
.h2,
.h3,
.h4 {
  font-family: "Sniglet", system-ui !important;
  color: #004aaa !important;
  font-size: x-large;
}
/*-----------------  Fiche produit breadcrumb   ---------------------*/
#wrapper .breadcrumb li a {
  line-height: 25px;
  color: #004aaa !important;
}
#wrapper .breadcrumb li:last-child {
  color: #004aaa !important;
}
/*-----------------  Fiche produit Etiquette quantité  ---------------------*/
.product-actions .control-label {
  /* display: none; */
  font-weight: 600;
  font-size: 1em;
  color: #333;
}
/*-----------------  Fiche produit Etiquette Partager  ---------------------*/
.product-information {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #333;
}
/*-----------------  Fiche produit Prix  ---------------------*/
.product-price {
  color: #333;
  display: inline-block;
  font-size: 1.3rem;
}
/*-----------------  Fiche produit description  ---------------------*/
.tabs .nav-tabs .nav-link.active {
  color: #004aaa !important;
  /* pour désactiver le bloc détail du produit : mettre product.tpl danstemplate/catalog*/
}
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  border: none;
  border-bottom: 3px solid #333;
}
/*-----------------  Fiche produit image principale  ---------------------*/
.product-cover img {
  /* background: transparent; */
  background: #fff;
  box-shadow: 1px 1px 1px #aaa;
}
/*-----------------  Fiche produit survol image principale  ---------------------*/
.product-cover .layer {
  background: #3828184f;
}
/*-----------------  Fiche produit miniatures  ---------------------*/
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:link {
  border: #004aaa 3px solid;
}
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
  border: #004aaa 3px solid;
}
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:focus {
  border: #004aaa 3px solid;
}
.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:active {
  border: #004aaa 3px solid;
}
/*-----------------  Accueil produit miniatures  ---------------------*/
#products .thumbnail-container,
.featured-products .thumbnail-container,
.product-accessories .thumbnail-container,
.product-miniature .thumbnail-container {
  /* background: transparent; */
  background: #fff;
  box-shadow: 1px 1px 1px #aaa;
}
/*-----------------  Fiche produit caregorie  ---------------------*/
/*--------------- les blocs categorie */
.block-category {
  /* masquer le bloc superieur pour plus d'ergonomie */
  display: none;
}
/* liste à gauche du produit et survol */
.block-categories a {
  color: #004aaa !important;
}
.block-categories a:hover {
  color: #000;
}
#subcategories {
  /* masquer le bloc superieur pour plus d'ergonomie */
  display: none;
}
#subcategories .subcategory-heading {
  /* masquer le bloc superieur pour plus d'ergonomie */
  display: none;
}
#subcategories .subcategory-image {
  /* masquer le bloc superieur pour plus d'ergonomie */
  display: none;
}
/* liste au dessus du produit et survol */
#subcategories ul li .subcategory-name {
  text-transform: none !important;
  color: #004aaa !important;
  font-size: 1.2em;
  font-family: "Sniglet", system-ui !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
#subcategories ul li .subcategory-name:hover {
  color: #333;
}
/*---------------------------------------------------------------eof*/
.btn {
  border: 2px solid #004aaa;
}
/*------------------------------frais transport---------------------*/
.block-contact,
.footer-container li a {
  font-size: 1rem !important;
  color: #fff !important;
}

#wrapper .breadcrumb li a,
#block_myaccount_infos,
.block-contact .block-contact-title,
.block-contact .navbar-toggler .material-icons,
.linklist .blockcms-title a {
  color: #fff !important;
}
#header .logo {
  max-width: 600px !important ;
  height: auto;
}
#header .header-nav #_desktop_contact_link {
  display: inline-block;
  color: #004aaa !important;
}
/*--------------------------------------------prd-----------*/
.page-content.page-cms ul,
p {
  font-size: 0.9rem !important;
  font-weight: 400;
  color: #333 !important;
  line-height: 1.2rem !important;
}
/*---------------------------slider carousel---*/
@media (max-width: 991px) {
  .carousel {
    left: 50%;
    width: 100vw;
    height: 200px !important;
    padding-bottom: 0.5rem;
    margin-left: -50vw;
    background-color: #f6f6f6;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .carousel .carousel-inner {
    height: 100% !important;
  }
}
/*----------------------------------------------------*/
@media screen and (max-width: 991px) {
  .carousel {
    height: 250px !important; /* hauteur totale du slider */
    overflow: hidden !important;
    position: relative !important;
  }

  .carousel .carousel-item {
    height: 100% !important;
    position: relative !important;
  }

  .carousel .carousel-item img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-height: 100% !important; /* remplit la hauteur */
    width: auto !important;
    min-width: 100% !important; /* couvre le conteneur, rogne les côtés */
    object-fit: cover !important;
    object-position: center !important;
  }

  .carousel .carousel-item .caption {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    text-align: center !important;
    z-index: 2 !important;
  }

  .carousel .carousel-item .caption h1 {
    font-size: 30px !important;
    font-weight: bold;
    color: #ffffff !important;
  }

  .carousel .carousel-item .caption h2 {
    font-size: 24px !important;
    font-weight: 600;
    color: #ffffff !important;
  }

  .carousel .carousel-item .caption h3 {
    font-size: 16px !important;
    font-weight: normal;
    color: #ffffff !important;
  }

  .carousel .carousel-item .caption p {
    font-size: 14px !important;
    color: #ffffff !important;
    line-height: 1.4;
  }
}
/*-----------logo----------------------------*/
@media (max-width: 767px) {
  #header .top-logo {
    display: flex;
    align-items: center;
    justify-content: center; /* centre le logo */
    min-height: 50px;
    position: relative;
    z-index: 2; /* au-dessus d’éventuels overlays */
  }

  /* forcer l’affichage du logo */
  #header .top-logo .logo,
  #header .top-logo .logo img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* dimension raisonnable sur mobile */
  #header .top-logo .logo img {
    max-height: 40px !important; /* ajuste 36–48px si besoin */
    height: auto !important;
    width: auto !important;
  }
}
@media (max-width: 767px) {
  #_mobile_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    background: url("/img/logomob.png") no-repeat center center;
    background-size: contain; /* ajuste selon ton image : contain ou cover */
  }
}
@media (max-width: 767px) {
  .footer-container .links ul > li {
    border-bottom: 0px solid #f00;
  }
}