a:focus, button:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.product-name {
  text-transform: capitalize!important;
}

.titre-produit {
  text-transform: capitalize!important;
}

.page-heading {
  text-transform: capitalize!important;
}

.category-tree {
  text-transform: capitalize!important;
}

.dropdown-item {
  text-transform: capitalize!important;
}

/* Mobile : Inverser l’ordre entre .first-prices et .second-prices */
  .product-price-and-shipping {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .product-price-and-shipping .second-prices {
    order: 1 !important;
    width: 100%;
  }

  .product-price-and-shipping .first-prices {
    order: 2 !important;
    width: 100%;
  }

  .product-price-and-shipping .third-prices {
    order: 3 !important;
    width: 100%;
  }

  .second-block {
  text-align: center;
}

.product-price-and-shipping {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px;
}

/* Ordre forcé */
.product-price-and-shipping .regular-price {
  order: 1;
}

.product-price-and-shipping .price.product-price {
  order: 2;
}

.product-price-and-shipping .sld-product-price {
  order: 3;
}



.bouton-devis-bandeau-footer-bungalow:hover {
  background-color: #f27c00!important;
  color: #fff!important;
}

.user-info, .account-link {
  font-size: 11px!important;
}
.price-ecotax {
  display: none!important;
}

.product-availability,
.product-unavailable
 {
    text-transform: capitalize;
}


.full-link-to-product {
position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  text-decoration: none;
 }

#search_filters .facet .facet-label a {
  white-space: wrap!important;
}


.magasin-accueil {
  width: 100%!important;
  margin-bottom: 15px;
}

.hidden-if-no-url {
  display: none!important;
}

.lien-categorie-client-en-compte {
  color: #fff!important;
}

.lien-categorie-client-en-compte:hover {
  background-color: #6b010a!important;
}

.tva_2 {
  display: none!important;
}

/*** MODIFICATION DU PANIER ***/ 

.zoomWrapper {
  width: 100% !important;
  height: 472px!important;
  max-width: 472px; /* Ajustez en fonction de la taille de votre image principale */
  max-height: 472px;
  overflow: hidden;
  position: relative; /* Important pour maintenir la mise en page */
}

.product-left-content {
  position: sticky!important;
  top: 20%!important;
}

.js-main-zoom {
  width: 472px!important;
  height: 472px!important;
}

.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8!important;
}

.mfp-img {
  max-width: 75%!important;
}

@media (max-width: 768px) {
  .mfp-img {
    max-width: 100%!important;
  }
}

.mfp-figure::after {
  background-color: transparent!important;
}


.modal-header {
  background-color: #D4EDDA!important;
}

.modal-title {
  color: #000!important;
  margin-bottom: 0px!important;
}

.modal-header .close {

top: 10px!important;

}

.divide-right {
  display: flex;
  align-items: center;
}



.cart-products-count {
  font-size: 13px!important;
}

.img-thumbnail {
  border: none!important;
  width: 300px!important;
}

.bouton-modal-panier-retour-achat {
  background-color: #fff;
  border: 1px solid #000;
}

.cart-buttons {
  justify-content: center!important;

}

@media (max-width: 768px) {
  .cart-buttons {
    flex-direction: column; /* Place les éléments l'un en dessous de l'autre */
    gap: 1rem !important; /* Ajuste l'espace entre les éléments pour les petits écrans */
  }

  .liens-rapides-clients {
      display: none;
  }

  .zoomWrapper {
    width: 100% !important;
    height: 360px!important;
    max-width: 572px; /* Ajustez en fonction de la taille de votre image principale */
    max-height: 572px;
    overflow: hidden;
    position: relative; /* Important pour maintenir la mise en page */
  }
  
  .js-main-zoom {
    width: 275px!important;
    height: 275px!important;
  }

  .brand-logo {
    max-width: 60px;
  }

  .comparateur-de-produits {
    display: none!important;
  }
}



/* AJOUT NOUVEAU HEADER A METTRE */ 

#header {
  position: sticky!important;
  top: 0!important;
}


.fixed-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.fixed-offset {
  margin-top: 0px; /* Ajuste cette valeur à la hauteur totale du header */
}

.search-widget {
  width: 100%!important;
}

/* Taille et couleur des liens du menu gauche */
.liens-menu-gauche {
  font-size: 14px; /* Taille du texte */
  color: #1c1c1c; /* Couleur du texte */
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

.liens-menu-gauche:hover {
  color: #f27c00; /* Couleur lors du survol */
}

/* Ajoute une marge entre les éléments du menu */
.navbar-nav .nav-item {
  margin-right: 20px;
}

/* Retire la marge pour le dernier élément */
.navbar-nav .nav-item:last-child {
  margin-right: 0;
}

.bouton-promo {
  background-color: #91000B;
  color: #fff;
  padding: 9px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.bouton-promo:hover {
  color: #FFF;
  background-color: #690109;
}

.bouton-droite {
  background-color: #000000;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.bouton-droite:hover {
  color: #f27c00;
}

.liens-de-droite-menu-pc {
  color: #fff;
}

.liens-de-droite-menu-pc:hover {
  color: #f27c00;
}

.megamenu-li {
position: static;
}

.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
  min-width: 1450px!important;
  overflow-y: auto;  /* Activer le défilement vertical */
}

.titre-mega-menu {
  font-weight: 600;
  font-size: 12px;
  margin-top: 15px;
  background-color:#ececec;
  padding-top:2px;
  padding-bottom:2px;
  text-align: center;
}

.dropdown-item {
  padding-top: 1px!important;
  padding-bottom: 1px!important;
}

.sous-menu-simple {
  min-width: 300px;
  padding: 15px;
  position: absolute;
  margin-top: 0px;
}

.sous-menu-simple-atelier {
  min-width: 300px;
  padding: 15px;
  position: absolute;
  margin-top: 8px;
}


/* S'assure que les dropdowns parents sont positionnés correctement */
.navbar-nav .test {
  position: relative;
}

.search-widget form [type="submit"] {
  background-color: transparent!important;
  color: #000!important;
}

.search-widget form [type="submit"]:hover {
  background-color: transparent!important;
  color: #91000b;
}


.header-deux-ordi {
  background: linear-gradient(146deg, rgba(255, 255, 255, 1) 62%, rgba(0, 0, 0, 1) 54%); 
  border-top: 1px solid #c7c7c7;
  box-shadow: 0px 11px 15px -5px rgba(0,0,0,0.33);
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Pour les écrans entre 900px et 1200px */
@media (min-width: 900px) and (max-width: 1408px) {
  .header-deux-ordi {
      background: linear-gradient(146deg, rgba(255, 255, 255, 1) 61%, rgba(0, 0, 0, 1) 54%);
  }

  .liens-menu-gauche,
  .bouton-promo,
  .bouton-droite {
      font-size: 12px;
  }

  .navbar-nav .nav-item {
      margin-right: 6px;
  }
}

/* Pour les écrans entre 1200px et 1300px */
@media (min-width: 100px) and (max-width: 1219px) {
.header-un-ordi {
  display: none;
}

.breadcrumb-wrapper {
display: none!important;
}

.header-deux-ordi {
  display: none;
}

body {
  margin-top: 0!important;
}
}

/* Pour les écrans 1400px et plus */
@media (min-width: 1400px) {
  .header-deux-ordi {
      background: linear-gradient(146deg, rgba(255, 255, 255, 1) 60%, rgba(0, 0, 0, 1) 54%);
  }
}


/*** CSS HEADER VERSION MOBILE 2024/2025 */ 

@media (min-width: 1219px) {

  .header-globale-mobile {
      display: none;
  }
}

.header-globale-mobile {
  background-color: #fff;
  box-shadow: 0px 11px 15px -5px rgba(0,0,0,0.33);
}

/* Définir une hauteur maximale et activer le défilement */
.offcanvas-menu {
  max-height: 100vh; /* Hauteur maximale pour l'écran */
  overflow-y: auto;  /* Activer le défilement vertical */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  color: #fff;
  padding-top: 20px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 2500000;
}

    .offcanvas-menu.show {
      transform: translateX(0);
    }

    .offcanvas-menu a {
      color: #fff;
      font-size: 13px;
      padding: 5px 20px;
      display: block;
    }

    .offcanvas-menu a:hover {
      background-color: #495057;
      text-decoration: none;
    }

    /* Styles pour la croix de fermeture en haut à droite */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.offcanvas-menu a:hover {
  background-color: #fff;
  color: #f27c00!important;
}

    /* Style pour le bouton sandwich */
    .btn-sandwich {
      font-size: 33px;
      cursor: pointer;
      color: #343a40;
    }



.grand-titre-menu-mobile {
  background-color: #fff!important;
  border: none!important;
  box-shadow: none!important;
  margin-bottom: 10px!important;

}

.text-dark {
  color: #1c1c1c!important;

  font-size: 13px!important;

}

.sous-titre-menu-mobile {
  color: #1c1c1c;
  font-size: 12px;
  position: relative;
  padding-right: 20px;
}

.sous-titre-menu-mobile::after {
  content: "\25BC";
  position: absolute;
  right: 0px;
  font-size: 12px; /* ajustez la taille de la flèche si nécessaire */
}

.titre-principal-mobile-menu {
  background: transparent;
  border: none;
  text-transform: uppercase;
  font-size: 12px;
  color: #1c1c1c;
  text-align: left;
  cursor: pointer;
  position: relative;
  font-weight: 600!important;
  padding-right: 20px; /* espace pour la flèche */
}

.titre-principal-mobile-menu::after {
  content: "\25BC"; /* flèche vers le bas en Unicode */
  position: absolute;
  right: 0px;
  font-size: 12px; /* ajustez la taille de la flèche si nécessaire */
}

.titre-principal-mobile-menu-promo {
  background-color: #b3001a;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 13px;
  width: fit-content;
  margin-left: 8%;
}

.remove-card-effet {
  background-color: #fff!important;
  border-bottom: none!important;
}

.titre-principal-mobile-menu-pages {
  background-color: transparent;
  color: #1c1c1c;
  border: none;
  cursor: pointer;
  font-size: 13px;
  width: fit-content;
}


.card-header {
  padding: 0.35rem 1.25rem!important;
}

.padding-marion {
  padding: 0!important;
}

.breadcrumb-wrapper {
  background-color: transparent!important;
}



.bandeau-gris-reassurance {
  background-color: #fafafc;
  padding-top: 40px;
  padding-bottom: 40px;
}

.icone-reassurance-pc {
  max-width: 100px;
}

.titre-reassurance-footer-pc {
  color: #f27c00;
  font-weight: 600;
}

.colonne-reassurance-footer-pc {
  margin: auto;
  text-align: center;
}

.paragraphe-reassurance-footer-pc {
  text-align: center;
  font-size: 13px;
}

.bandeau-footer-noir-pc {
  background-color:  #000;
  padding-top: 40px;
  padding-bottom: 40px;
}

.logo-footer-blanc-pc {
  max-width: 150px;
  margin-bottom: 20px;
}

.info-footer-blanc-pc {
  color: #fff;
}

.info-footer-blanc-pc a {
  color: #fff;
}

.info-footer-blanc-pc a:hover {
  color: #f27c00;
}

.info-droits-footer-blanc-pc {
  text-align: center;
  color: #fff;
}

.trait-footer-pc {
  border: none; /* Retire le style par défaut */
  height: 1px; /* Définit l'épaisseur du trait */
  background-color: #afafaf4f; /* Change la couleur */
  margin: 20px 0; /* Optionnel : ajuste l'espacement autour du trait */
}

.trait-titre-footer-pc {
  width: 15%;
  height: 3px;
  background-color: #fff;
  margin-left: inherit;
  margin-right: inherit;
  margin-bottom: 15px!important;
  margin-top: 0!important;
}

.fa-facebook-f, .fa-youtube, .fa-linkedin-in {
  color: #1c1c1c;
  padding-left: 8px;
  padding-right: 8px;
}

.fond-couleur-icone-reseaux {
  background-color: #fff;
  max-width: fit-content;
  border-radius: 4px;
  margin-right: 15px; /* Espace entre les icônes */
}

.fond-couleur-icone-reseaux:last-child {
  margin-right: 0;
}

.fa-facebook-f:hover {
  color: #3b5998;
}

.fa-linkedin-in:hover {
  color: #0e76a8;
}

.fa-youtube:hover {
  color: #b2071d;
}

@media (max-width: 768px) {
  .pied-de-page-pc {
      display: none;
  }
}


/*** version mobile **/

.bandeau-footer-noir-mobile {
  background-color: #1c1c1c;
  padding-bottom: 15px;
}



.footer-general-mobile {
  background-color: #1c1c1c;
  padding-top: 25px;
  padding-bottom: 25px;
}

.bouton-collapse-footer-mobile {
  background-color: #1c1c1c;
  color: #fff;
  font-weight: 600;
  border: none!important;
  position: relative;
}

.bouton-collapse-footer-mobile::after {
  content: "";
  position: absolute;
  left: 18%;
  bottom: 0;
  width: 20%; /* Largeur du soulignement */
  height: 2px; /* Épaisseur du soulignement */
  background-color: white; /* Couleur du soulignement */
}

.icone-mobile-float-right {
  float: right; /* Ce style reste si utilisé ailleurs */
  margin-left: auto; /* Important pour flex */
  display: flex; /* Ajuste l'alignement dans flex */


}

.liste-footer-mobile {
  background-color: #1c1c1c!important;
  color: #fff;
  font-size: 14px;
  border: none!important;
  box-shadow: none!important;
  padding-left: 10px;
}

.li-footer-mobile {
  margin-bottom: 15px;
}

#footer {
  color: #fff!important;
}


@media (min-width: 768px) {
  .pied-de-page-mobile {
      display: none;
  }
}


/*** FICHES PRODUITS 2024 ***/



.main-product-details {
padding-left: 0!important;
padding-right: 0!important;
}

.bouton-fiche-produit {
background-color: #fff;
color: #000;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
border-bottom: 2px solid #b3b3b3; /* Aucun soulignement par défaut */
}

.bouton-fiche-produit:hover {
color: #f27c00;
border-bottom: 4px solid #f27c00; /* Trait souligné orange quand le collapse est ouvert */

}

.bouton-fiche-produit[aria-expanded="true"] {
border-bottom: 4px solid #f27c00; /* Trait souligné orange quand le collapse est ouvert */
}


@media (max-width: 768px) {
/* Gestion des collapses dans le contenu produit */
.onglets-produit {
    display: block !important; /* Les collapses produits restent ouverts */
    height: auto !important;
    opacity: 1 !important;
}

/* Gestion des collapses dans le footer */
.footer-collapse {
    display: none !important; /* Les collapses du footer sont fermés par défaut */
    height: 0 !important;
    opacity: 0 !important;
}

.footer-collapse.show {
    display: block !important; /* Afficher les collapses du footer lorsqu'ils sont activés */
    height: auto !important;
    opacity: 1 !important;
}

/* Autres styles pour l'affichage mobile */
.d-inline-flex {
    flex-direction: column; /* Affiche les boutons en colonne */
    align-items: flex-start; /* Aligne les boutons à gauche */
}

.ligne-bouton-fiche-produit {
    display: none !important; /* Masque les textes des boutons sur mobile */
}

.bouton-fiche-produit::after {
    content: attr(aria-controls); /* Ajoute une info visuelle */
    font-size: 16px;
    color: #000;
}
}


/*** btn quantité **/ 

/* Conteneur principal */
.bootstrap-touchspin {
display: flex;
align-items: center;
width: fit-content;
border: 2px solid #ddd;
border-radius: 5px;
overflow: hidden;
background-color: #f4f4f4;
}

/* Boutons "-" et "+" */
.bootstrap-touchspin .btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: #d6d6d6;
border: none;
font-size: 1.2rem;
cursor: pointer;
}

.bootstrap-touchspin .btn:active {
background-color: #bbb;
}

/* Bouton "-" */
.bootstrap-touchspin .input-group-prepend .btn {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

/* Bouton "+" */
.bootstrap-touchspin .input-group-append .btn {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

/* Champ de quantité */
.bootstrap-touchspin .form-control {
text-align: center;
font-size: 1rem;
border: none;
outline: none;
height: 40px;
box-shadow: none;
-webkit-appearance: none; /* Supprime les flèches par défaut */
}

/* Suppression des flèches du champ de type "number" */
.bootstrap-touchspin .form-control::-webkit-inner-spin-button,
.bootstrap-touchspin .form-control::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}


@media (max-width: 768px) {
.ajout-panier-mobile {
  display: flex!important;
  justify-content: center!important;
  flex-direction: column!important;
}

#blockcart-modal .modal-dialog {
  width: 96%!important;
  -webkit-box-shadow: 2px 1px 17px 15px rgba(0,0,0,0.66); 
  box-shadow: 2px 1px 17px 15px rgba(0,0,0,0.66);
}

.product-add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-quantite {
  text-align: center!important;
}

.product-quantity {
  margin-top: 10px!important;
}
}




@media (max-width: 768px) {
.prix-sur-mobile-avec-remise {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px; /* Espacement réduit pour mobile */
    white-space: nowrap; /* Empêche le retour à la ligne */
  }
  

  
  .prix-sur-mobile-avec-remise .discount-amount,
  .prix-sur-mobile-avec-remise .discount-percentage {
    font-size: 14px!important; /* Taille réduite pour prendre moins de place */
  }

  
}

.main-product-details .product-prices .regular-price {
text-align: left;
}

@media (min-width: 768px) {
.banniere-mobile-place-slider {
    display: none;
}
}
@media (max-width: 768px) {
  .comments-note {
      display: none;
  }
  }


.titre-produit {
position: relative;
margin-bottom: 30px; /* Ajoute une marge sous le titre */
display: flex;
align-items: center;
}

.titre-produit::after {
content: ""; /* Ajoute un pseudo-élément pour le soulignement */
position: absolute;
bottom: -0.5rem; /* Place le trait légèrement en dessous du titre */
left: 0; /* Aligne le trait à gauche */
width: 20%; /* Définit la largeur du soulignement */
height: 5px; /* Épaisseur du soulignement */
background-color: #f27c00; /* Couleur du soulignement */
}

.product-quantity {
margin-top: 20px;
}

h1 {
font-family: Oswald!important;
font-weight: 400!important;
text-transform: none!important;
}

.brand-logo {
position: relative!important;
z-index: 10!important;
}



.category-tree {
  font-size: 11px!important;
}

.product-list .grid .product-miniature .second-block .second-block-wrapper .buttons-sections {
  margin-left: 23%!important;
}

@media (min-width: 0px) and (max-width: 768px) {
  .product-list .grid .product-miniature .second-block .second-block-wrapper .buttons-sections {
    margin-left: -16px!important;
  }

  #js-product-list {
    margin-left: 8px;
  }
  }

  


  .details-link {
    border: 1px solid #000!important;
    color: #000!important;
  }
  
  .details-link:hover {
    color: #fff!important;
    background-color: #000!important;
    border: none!important;
  }

  .formulaire-devis-bungalow {
    max-width: 567px;
  }


  .titres-block-accueil {
    position: relative;
    justify-content: center!important;
    font-family: Oswald!important;
    margin-bottom: 40px!important;
  }

  .titres-block-accueil::after {

    content: ''; /* Pseudo-élément pour la ligne de soulignement */
    position: absolute;
    bottom: 0; /* Placer la ligne juste en dessous du texte */
    left: 50%; /* Partir du centre du texte */
    transform: translateX(-50%); /* Centrer la ligne */
    width: 100px; /* Largeur de la ligne par rapport au texte */
    height: 3px; /* Épaisseur de la ligne */
    background-color: #f27c00; /* Couleur de la ligne */
  }
  

  .title-categories-vues-accueil {
    position: relative;
    justify-content: center!important;
    font-family: Oswald;
  }

  .title-categories-vues-accueil::after {
    content: ''; /* Pseudo-élément pour la ligne de soulignement */
    position: absolute;
    bottom: -6px; /* Placer la ligne juste en dessous du texte */
    left: 50%; /* Partir du centre du texte */
    transform: translateX(-50%); /* Centrer la ligne */
    width: 100px; /* Largeur de la ligne par rapport au texte */
    height: 3px; /* Épaisseur de la ligne */
    background-color: #f27c00; /* Couleur de la ligne */
  }


#products {
  width: 98%!important;
}


.fa-share-alt::before, .fa-share-nodes::before {
  padding: 5px!important;
}

@media (max-width: 768px) {
  .product-left-content {
    position: static!important;
  }
  }

.product-additional-info {
  display: flex;
  justify-content: space-between;
}

.bouton-loa-2025:hover {
  background-color: #595959!important;
}

.demande_devis_bungalow:hover {
  background: #ce6b01!important;
}

.bouton-loa-2025 {
  margin-left: 15px;
}


@media (max-width: 768px) {
  .product-additional-info {
    display: block;
  }

  .bouton-loa-2025 {
    margin-left: 0px;
    margin-top: 20px;
  }
}