/* responsive.css
   Fichier ajouté à la racine : règles responsive spécifiques à la page produit (fiche-produit.php)
   Commentaires en français et breakpoints courants.
*/

/* Règles de base applicables à la page produit */
.single-product, .product {
  box-sizing: border-box;
}

/* Assurer le clearing des floats internes */
.single-product::after, .product::after {
  content: "";
  display: table;
  clear: both;
}

/* Galerie produits : image principale et vignettes */
.product-gallery-simple .main-image {
  width: 100%;
  max-width: 550px; /* limite large sur desktop */
  height: auto;
  overflow: hidden;
}
.product-gallery-simple .main-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.product-gallery-simple .product-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.product-gallery-simple .product-thumbs img.thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}
.product-gallery-simple .product-thumbs img.thumb.active {
  border-color: #f80502;
}

/* Panel meta (caractéristiques courtes) et colonne description : mise en page côte-à-côte sur desktop */
.panel.panel-default.product-meta {
  box-sizing: border-box;
}

/* BREAKPOINTS
   - desktop large : >= 1200px
   - desktop / laptop : >= 992px
   - tablette : < 992px
   - mobile : < 576px
*/

/* Desktop / large : maintenir deux colonnes si possible */
@media (min-width: 992px) {
  .panel.panel-default.product-meta {
    width: 40% !important;
    float: left !important;
    margin-right: 2% !important;
  }
  .col_three_fifth.product-desc {
    width: 58% !important;
    float: right !important;
  }
}

/* Tablette : empiler légèrement, garder une mise en page lisible */
@media (max-width: 991.98px) and (min-width: 576px) {
  .panel.panel-default.product-meta,
  .col_three_fifth.product-desc {
    float: none !important;
    width: 100% !important;
    margin: 0 0 15px 0 !important;
  }
  .product-gallery-simple .main-image {
    max-width: 450px;
    margin: 0 auto;
  }
  .product-gallery-simple .product-thumbs img.thumb {
    width: 70px;
    height: 70px;
  }
}

/* Mobile : colonne unique, images adaptatives, vignettes en ligne qui scrollent */
@media (max-width: 575.98px) {
  /* Empiler tout */
  .panel.panel-default.product-meta,
  .col_three_fifth.product-desc,
  .col_two_fifth.nobottommargin,
  .product-image,
  .product-gallery-simple {
    float: none !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  /* Image principale : responsive et hauteur limitée pour garder ratio */
  .product-gallery-simple .main-image {
    max-width: 100% !important;
    height: auto !important;
  }
  .product-gallery-simple .main-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 500px; /* évite images trop grandes sur mobiles */
  }

  /* Vignettes : barre horizontale scrollable */
  .product-gallery-simple .product-thumbs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .product-gallery-simple .product-thumbs img.thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    margin-right: 8px;
  }

  /* Buttons / icons spacing */
  .product-desc .product-price,
  .product-desc .quantity {
    margin-bottom: 12px;
  }

  /* Tableau caractéristiques : rendre lisible sur mobile */
  .container-fullwidth table.table {
    font-size: 14px;
    word-break: break-word;
  }
  .container-fullwidth table.table td {
    padding: 8px;
  }
}

/* Ajustements divers : iframe et vidéos */
.product iframe, .product embed, .product object {
  max-width: 100%;
  height: auto;
}

/* Clear floats après la zone produit pour éviter collisions avec sections suivantes */
.container-fullwidth:after {
  content: "";
  display: table;
  clear: both;
}

/* Alignement du tableau */
.table {
	width: 56% !important;
	max-width: 100%;
	margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
	box-shadow: black 1px 1px 5px;
	
}
/* Alignement image produit */
.product-gallery-simple .main-image, .product-gallery-simple .main-image img {
	width: 74% !important;
	height: auto !important;
	margin-left: 0px !important;
}
.product-gallery-simple .product-thumbs img.thumb {
	margin: 0px !important;
}

/* Style pour afficher 'Nous consulter' à la place de 'Prix non disponible' */
.nous-consulter{
  font-weight:700;
  color:#FF5500;
  text-transform:uppercase;
}