/* ============================
   Fond général
   ============================ */
body {
  background: url("/img/bgsite.png") no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
  color: #000;
}

/* ============================
   HEADER clair
   ============================ */
#header {
  background-color: #f2f2f2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ============================
   SLIDER plein écran - CIBLAGE SPÉCIFIQUE
   ============================ */
/* CORRECTION du ratio Bootstrap qui crée l'espace vide */
#home-slider.ratio {
  height: 100vh !important;
  padding-bottom: 0 !important; /* Supprime le padding-bottom du ratio */
  aspect-ratio: unset !important; /* Désactive l'aspect-ratio */
}

/* Container Bootstrap carousel */
#home-slider .carousel {
  height: 100vh !important;
  width: 100% !important;
}

/* Carousel inner */
#home-slider .carousel-inner {
  height: 100vh !important;
  width: 100% !important;
}

/* Items du carousel (ce sont des <li> dans votre cas) */
#home-slider .carousel-item {
  height: 100vh !important;
  width: 100% !important;
}

/* Figure et contenu */
#home-slider .carousel-content {
  height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Images du slider */
#home-slider .carousel-item img {
  width: 100% !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Contrôles du carousel - CIBLAGE EXACT DE VOTRE HTML */
button.carousel-control-next[data-bs-target="#home-slider .carousel"],
button.carousel-control-prev[data-bs-target="#home-slider .carousel"] {
  width: 60px !important;
  height: 60px !important;
  opacity: 0.8 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px) !important;
}

/* Version encore plus spécifique avec le parent */
#home-slider button[type="button"].carousel-control-next,
#home-slider button[type="button"].carousel-control-prev {
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  min-width: 60px !important;
  flex: 0 0 60px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Hover effect */
#home-slider button[type="button"].carousel-control-next:hover,
#home-slider button[type="button"].carousel-control-prev:hover {
  background-color: rgba(0, 0, 0, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1 !important;
}

/* Icônes */
#home-slider button.carousel-control-next .carousel-control-next-icon,
#home-slider button.carousel-control-prev .carousel-control-prev-icon {
  width: 18px !important;
  height: 18px !important;
  background-size: 18px 18px !important;
}

/* Positionnement */
#home-slider button.carousel-control-prev {
  left: 20px !important;
}

#home-slider button.carousel-control-next {
  right: 20px !important;
}

/* Si Bootstrap résiste encore, version nuclear */
.carousel-control-next[aria-label="Suivant"],
.carousel-control-prev {
  width: 60px !important;
  height: 60px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 50% !important;
}

/* Indicateurs */
#home-slider .carousel-indicators {
  bottom: 20px !important;
}

/* Caption par-dessus */
#home-slider .carousel-caption {
  z-index: 2;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

/* Liens du carousel (pour maintenir la fonctionnalité) */
#home-slider .carousel-link {
  display: block;
  height: 100vh;
  width: 100%;
}

/* ============================
   Position des produits
   ============================ */
/* Page d'accueil : espace sous le slider */
.page-index .new-products,
.page-index .best-sellers-products,
.page-index .featured-products {
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

/* Pages catégories / produits : normal */
.page-category .products,
.page-product .products {
  margin-top: 0;
}

/* ============================
   PRODUITS
   ============================ */
.product-miniature__title {
  font-size: 16px;
  font-weight: 600;
  color: #256D85;
  text-align: center;
  margin-top: 10px;
}

.product-miniature__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.product-miniature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.badge {
  background-color: #B3E5F2;
  color: #256D85;
  border: none;
}

.badge.out_of_stock { 
  background-color: #256D85; 
  color: #fff; 
}

.badge.new { 
  display: none; 
}

/* ============================
   BOUTONS
   ============================ */
button.btn.btn-primary[data-button-action="add-to-cart"],
.ajax_add_to_cart_button,
.btn-add-to-cart {
  background-color: #3BAFDA;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

button.btn.btn-primary[data-button-action="add-to-cart"]:hover,
.ajax_add_to_cart_button:hover,
.btn-add-to-cart:hover {
  background-color: #256D85;
}

button.btn.btn-primary[data-button-action="add-to-cart"] .material-icons {
  color: #fff;
  margin-right: 6px;
}

/* ============================
   RESPONSIVE - Adaptations mobiles
   ============================ */
@media (max-width: 768px) {
  .carousel,
  .carousel-inner,
  .carousel-item,
  .carousel-item img {
    height: 50vh; /* Réduit la hauteur sur mobile */
    min-height: 300px; /* Hauteur minimum */
  }
  
  .carousel-caption {
    font-size: 14px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .carousel,
  .carousel-inner,
  .carousel-item,
  .carousel-item img {
    height: 40vh;
    min-height: 250px;
  }
}

.carousel-control-prev,
.carousel-control-next {
  background-color: #fff !important;  /* rond blanc */
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

/* forcer flèches en noir */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(0); /* garde les SVG noirs */
}

.carousel-control-prev,
.carousel-control-next {
  background-color: #fff !important; /* rond blanc */
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;       /* enlève le surplus */
  line-height: 40px !important; /* aligne bien le contenu */
  display: flex !important; 
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;   /* largeur fixe */
}

/* Harmoniser les fonds en gris clair */
ul.product__details li.detail,
ul.product__details li.detail > div,
#product-details-heading .accordion-button {
  background-color: #f2f2f2 !important;
  color: #000 !important; /* texte noir pour la lisibilité */
}

/* Remove the bottom border/line from product details list items */
ul.product__details li.detail {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.product__description {
  background-color: #f2f2f2 !important;
  padding: 20px; /* optionnel, pour aérer un peu le texte */
  border-radius: 6px; /* optionnel, pour un rendu plus doux */
}

.accordion-button {
  background-color: #f2f2f2 !important;
  color: #000 !important;          /* texte noir pour rester lisible */
  font-weight: 600;                /* optionnel : met le texte en semi-gras */
  box-shadow: none !important;     /* supprime l’effet ombré Bootstrap */
  border: none !important;         /* supprime la bordure par défaut */
}

/* Quand l'accordéon est ouvert (Bootstrap ajoute .not-collapsed) */
.accordion-button:not(.collapsed) {
  background-color: #f2f2f2 !important;
  color: #000 !important;
}

/* Supprimer padding inutile dans la description */
.product__description.accordion-body {
  padding-bottom: 0 !important;
}

/* Supprimer marges des paragraphes vides ou derniers éléments */
.product__description p:last-child,
.product__description table:empty {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Police par défaut (texte) */
body {
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 400;
  color: #000;
}

/* Titres, boutons, navigation */
h1, h2, h3, h4, h5, h6,
.product-miniature__title,
.accordion-button,
#header,
button,
.btn,
.navbar,
.page-title {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 600;
}

/* ================================
   TABLEAUX PRODUITS EASYCRYO
   ================================ */
.page-product .custom-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  text-align: left !important;
  margin-top: 15px !important;
  background-color: #f2f2f2 !important; /* fond gris clair */
}

.page-product .custom-table thead tr {
  background-color: #d9d9d9 !important; /* en-tête gris plus foncé */
}

.page-product .custom-table th,
.page-product .custom-table td {
  border: 1px solid #ccc !important;
  padding: 10px !important;
  color: #000 !important; /* texte noir lisible */
}

.page-product .custom-table th,
.page-product .custom-table td {
  border: 1px solid #ccc !important;
  padding: 10px !important;
  color: #000 !important;
  background-color: #f2f2f2 !important; /* corrige le fond des cellules */
}

/* Pour l'en-tête du tableau : un gris plus foncé */
.page-product .custom-table thead th {
  background-color: #d9d9d9 !important;
  font-weight: 600;
}

/* ============================
   Fonds par boutique
   ============================ */

/* Boutique SPORTIF */
body[data-domain="sportif.myeasycryo.com"] {
  background: url("/img/bg-sportif.png") no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
}

/* Boutique SENIOR */
body[data-domain="senior.myeasycryo.com"] {
  background: url("/img/bg-senior.png") no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
}

/* Hauteur du slider plus réduite */
#home-slider.ratio,
#home-slider .carousel,
#home-slider .carousel-inner,
#home-slider .carousel-item,
#home-slider .carousel-content,
#home-slider .carousel-item img {
  height: 89vh !important;   /* ou 500px si tu veux fixer une hauteur en pixels */
}

/* ============================ 
   AMÉLIORATIONS RESPONSIVE
============================ */

/* 1. SLIDER - Hauteurs adaptatives */
@media (max-width: 1024px) {
  /* Tablettes */
  #home-slider.ratio,
  #home-slider .carousel,
  #home-slider .carousel-inner,
  #home-slider .carousel-item,
  #home-slider .carousel-content,
  #home-slider .carousel-item img {
    height: 60vh !important;
    min-height: 400px !important;
  }
}

@media (max-width: 768px) {
  /* Smartphones en mode paysage / petites tablettes */
  #home-slider.ratio,
  #home-slider .carousel,
  #home-slider .carousel-inner,
  #home-slider .carousel-item,
  #home-slider .carousel-content,
  #home-slider .carousel-item img {
    height: 50vh !important;
    min-height: 300px !important;
  }
  
  /* Contrôles carousel plus petits sur mobile */
  #home-slider button[type="button"].carousel-control-next,
  #home-slider button[type="button"].carousel-control-prev {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
  }
  
  #home-slider button.carousel-control-prev {
    left: 10px !important;
  }
  
  #home-slider button.carousel-control-next {
    right: 10px !important;
  }
  
  /* Icônes plus petites */
  #home-slider button.carousel-control-next .carousel-control-next-icon,
  #home-slider button.carousel-control-prev .carousel-control-prev-icon {
    width: 14px !important;
    height: 14px !important;
    background-size: 14px 14px !important;
  }
}

@media (max-width: 480px) {
  /* iPhone et petits smartphones */
  #home-slider.ratio,
  #home-slider .carousel,
  #home-slider .carousel-inner,
  #home-slider .carousel-item,
  #home-slider .carousel-content,
  #home-slider .carousel-item img {
    height: 40vh !important;
    min-height: 250px !important;
  }
  
  /* Carousel caption responsive */
  #home-slider .carousel-caption {
    font-size: 12px !important;
    padding: 5px 10px !important;
    bottom: 10px !important;
  }
  
  #home-slider .carousel-caption h1,
  #home-slider .carousel-caption h2 {
    font-size: 18px !important;
  }
}

/* 2. BACKGROUND - Désactiver l'attachment fixed sur mobile */
@media (max-width: 768px) {
  body {
    background-attachment: scroll !important; /* Meilleure performance mobile */
  }
}

/* 3. PRODUITS - Grille responsive */
@media (max-width: 992px) {
  .product-miniature__title {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .product-miniature__title {
    font-size: 13px;
    margin-top: 8px;
  }
  
  /* Espacement des sections produits */
  .page-index .new-products,
  .page-index .best-sellers-products,
  .page-index .featured-products {
    margin-top: 20px;
  }
}

/* 4. TABLEAUX - Responsive horizontal scroll */
@media (max-width: 768px) {
  .page-product .custom-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
  }
  
  .page-product .custom-table th,
  .page-product .custom-table td {
    padding: 8px !important;
    font-size: 14px;
    white-space: nowrap; /* Empêche le texte de se casser */
  }
}

@media (max-width: 480px) {
  .page-product .custom-table th,
  .page-product .custom-table td {
    padding: 6px !important;
    font-size: 12px;
  }
}

/* 5. BOUTONS - Touch-friendly sur mobile */
@media (max-width: 768px) {
  button.btn.btn-primary[data-button-action="add-to-cart"],
  .ajax_add_to_cart_button,
  .btn-add-to-cart {
    padding: 12px 16px; /* Zone de touch plus grande */
    font-size: 14px;
    min-height: 44px; /* Taille minimum recommandée Apple */
  }
}

/* 6. ACCORDÉON - Responsive */
@media (max-width: 768px) {
  .accordion-button {
    font-size: 14px;
    padding: 12px 15px;
  }
  
  .product__description {
    padding: 15px;
    font-size: 14px;
  }
}

/* 7. HEADER - Responsive */
@media (max-width: 768px) {
  #header {
    position: relative;
    z-index: 100;
  }
}

/* 8. TYPOGRAPHIE - Ajustements mobiles */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  h4 { font-size: 16px; }
}

@media (max-width: 480px) {
  h1 { font-size: 20px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
}

/* 9. FIX ORIENTATION - iPhone landscape */
@media (max-width: 896px) and (orientation: landscape) {
  #home-slider.ratio,
  #home-slider .carousel,
  #home-slider .carousel-inner,
  #home-slider .carousel-item,
  #home-slider .carousel-content,
  #home-slider .carousel-item img {
    height: 85vh !important;
  }
}

/* 10. PERFORMANCE - Désactiver les effets sur mobile */
@media (max-width: 768px) {
  * {
    -webkit-tap-highlight-color: transparent; /* Supprime le flash bleu iOS */
  }
  
  #home-slider button[type="button"].carousel-control-next,
  #home-slider button[type="button"].carousel-control-prev {
    backdrop-filter: none !important; /* Économise des ressources */
  }
}