/* Variables */
:root {
    /* Couleurs principales */
    --color-primary: #004246;
    --color-primary-light: #00666C;
    --color-secondary: #abcdcf;
    
    /* Couleurs d'état */
    --color-success: #7dde9b;
    --color-success-dark: #335c40;
    --color-warning: #ffcb29;
    --color-warning-dark: #745a06;
    --color-danger: #c30000;
    --color-danger-light: #c300003b;
    --color-danger-dark: #6b0000;
    
    /* Espacements */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    
    /* Bordures */
    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
}

/* Layout général */
.top-section{
    width: 100%;
    display: flex;
}
.pageDetail__container{
    color: var(--color-primary);
    padding-inline: var(--spacing-sm);
    padding-block: var(--spacing-sm);
 }
 .pageDetail__description{
     padding-inline: var(--spacing-sm);
    > p:nth-child(n+5):nth-child(-n+10){
        font-weight: 300;
        }
 }
 .miniatures_container{
    width: 100%;
    display: flex;
    justify-content: center;
 }
 .title{
     color: var(--color-primary-light);
     font-size: 2rem;
 }
 .stock{
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     &.success p{
        margin: 0;
        font-weight: bold;
        border-radius: var(--border-radius-sm);
        padding: var(--spacing-xs) var(--spacing-md);
        background-color: var(--color-success);
        color: var(--color-success-dark);
        }
    &.limit p {
       margin: 0;
       font-weight: bold;
       border-radius: var(--border-radius-sm);
       padding: var(--spacing-xs) var(--spacing-md);
       background-color: var(--color-warning);
       color: var(--color-warning-dark);
    }
&.sold-out p{
   margin: 0;
   font-weight: bold;
   border-radius: var(--border-radius-sm);
   padding: var(--spacing-xs) var(--spacing-md);
   background-color: var(--color-danger-light);
   color: var(--color-danger-dark);
        }
    &.coming-soon{
        flex-direction: column;
        align-items: flex-start;
     p{
        &:nth-child(1){
            margin: 0;
            font-weight: bold;
            border-radius: var(--border-radius-sm);
            padding: var(--spacing-xs) var(--spacing-md);
            background-color: var(--color-danger-light);
            color: var(--color-danger-dark);
        }
        &:nth-child(2){
            margin: 0;
            font-weight: bold;
            border-radius: var(--border-radius-sm);
            padding: var(--spacing-xs) var(--spacing-md);
            background-color: var(--color-success);
            color: var(--color-success-dark);
        }
        }
    }
     }

 .btn-container{
     display: flex;
     justify-content: center;
     padding-block: var(--spacing-sm);
     &.cart_add a{
        display: flex;
        justify-content: center;
        font-weight: bold;
        border-radius: var(--border-radius-md);
        border:1px solid var(--color-success-dark);
        padding: var(--spacing-sm); 
        background-color: initial;
        color: var(--color-success-dark);
        transition: 0.4s ease-in-out;
        gap: var(--spacing-xs);
        cursor : pointer;
        svg path{
            transition: fill 0.4s ease-in-out;
            fill: var(--color-success-dark);
        }
        &:hover{
           color: white;
           text-shadow: 1px 1px 1px var(--color-success-dark);
           background-color: var(--color-success);
           border: 1px solid var(--color-success);
           transition: 0.4s ease-in-out;
           box-shadow: 1px 1px 2px var(--color-success-dark);
        svg {
            filter: drop-shadow(1px 1px 1px var(--color-success-dark));
        path{ 
             fill: white;
        }
        }
    }
     }
     &.limit a, &.sold-out a, &.idMust a{
       display: flex;
            justify-content: center;
            font-weight: bold;
            border-radius: var(--border-radius-md);
            border:1px solid var(--color-primary);
            padding: var(--spacing-sm) var(--spacing-md); 
            background-color: initial;
            color: var(--color-primary);
            transition: 0.4s ease-in-out;
            gap: var(--spacing-xs);
            &:hover{
               color: white;
               background-color: var(--color-primary);
               transition: 0.4s ease-in-out;
            }
            svg path{
                &:hover{
                 fill: white;
                 transition: 0.4s ease-in-out;
                }
            }
     }
 }
.btn{
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius-sm);
  margin: var(--spacing-sm);
}

 .reference{
     margin-top: var(--spacing-sm);
     font-size: 0.8rem;
     font-weight: bold;
 }
 
 .ligne-produit{
     width: 100%;
     background-color: var(--color-secondary);
     height: 0.05rem;
     margin-top : var(--spacing-sm);
     margin-bottom: var(--spacing-sm);
 }

 
 .marque{
     font-weight: 300;
     font-size: 1.1rem;
 }
 
 .block-prix{
   padding-block: var(--spacing-sm);
     }
     
     .prix{
         color: var(--color-primary-light);
         margin: 0;
            span{
               background-color: var(--color-primary-light);
               color: var(--color-warning);
               padding: var(--spacing-sm);
               border-radius: var(--border-radius-md);
               b{
                font-size: 1.5rem;
               }
            }
 }
.block-prix-quantite{
h5{
    color: var(--color-primary-light);
}
 }
.table {
    color: var(--color-primary);
    border-color: var(--color-secondary);
    border-spacing: 1px;
tbody tr td{
font-weight: 300;
}
th{
    border-top: 1px solid var(--color-secondary);
}
thead th{
    border-bottom: 1px solid var(--color-secondary);
} 
}
 .cercle {
     width: 3rem;
     height: 3rem;
     border-radius: 50%; 
     margin-bottom: var(--spacing-md);
     margin-left: var(--spacing-sm);
     transition: transform 0.2s ease-in-out;
     &:hover{
         transform: scale(1.1);
         border: rgba(105, 105, 105, 0.63) 2px solid;
     }
 }
 
 
 .couleurs{
     display: flex;
     flex-direction: row;
 }
 
 .carousel-inner{
     border:  1px solid var(--color-secondary);
     padding: var(--spacing-md);
     border-radius: var(--border-radius-md);
 }
 
 .main-carousel-image {
     width: 500px; 
     height: 500px; 
     object-fit: cover; 
 }
 
 
 .img-thumbnail {
     width: 100px; 
     height: 100px; 
     object-fit: cover;
     border-radius: var(--border-radius-sm);
     border: 1px solid var(--color-secondary); 
 }
 
 .ul {
     list-style: circle;
 }
 
 .custom-carousel .carousel-item {
     width: 100%;
     height: 500px; 
 }
 
 .custom-carousel-image {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
 }
 
 .custom-thumbnail {
     width: 100px; 
     cursor: pointer; 
     object-fit: contain; 
 }
 
 .cards-wrapper {
     display: flex;
     justify-content: center;
 }
 
 .card {
     margin: var(--spacing-sm); 
     border: none;
     border-radius: var(--border-radius-sm);
     width: 7rem; 
     height: 7rem; 
 }
 
 .card img {
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
 }
 
 
 .carousel-control-prev,
 .carousel-control-next {
     background-color: #e1e1e1; 
     border-radius: 50%;
     top: 50%;
     transform: translateY(-50%);
 }
 .pageDetail__form-select{
     background-color: #f4f7f7;
     width: 100%;
     height: calc(2.25rem + 2px);
     border-color: var(--color-secondary);
     color: var(--color-primary);
 }
 .description-container {
    background-color: #f4f7f7;
    margin: var(--spacing-md);
    border-radius: var(--border-radius-md);
    overflow-x: hidden;
    padding-inline: var(--spacing-sm);
    p{
        font-weight: 300;
     }
    h3{
        color: var(--color-primary-light);
    }
 }
 
 .description {
     font-size: calc(1.2rem); 
     padding: var(--spacing-md);
     padding-top: var(--spacing-sm);
     color: var(--color-primary);
     ul li {
        list-style: inside;
        font-weight: 300;
    }
     h2{
        color: var(--color-primary-light);
     }

 }
 

 
 h1 h2 h3 h4 h5 h6{
     padding: 0;
     margin: 0;
 }
 
 h3{
     font-size: 2rem;
     padding-bottom: var(--spacing-sm);
 }
 
 .titre-details{
     position: relative;
     left: var(--spacing-sm);
     top: var(--spacing-sm);
     padding-bottom: var(--spacing-md);
     margin: 0;
 }
 
 .ld{
    background-color: var(--color-secondary);
    padding: 0;
    margin-inline: var(--spacing-md);
    width: auto;
 }
 
 select#declinablesSelect {
     background-color: #fff;
     border: 1px solid var(--color-secondary);
 }
 
 select#declinablesSelect option {
     background-color: #fff;
 }
 
 .mb-3{
     display: flex;
     align-items: baseline;
     flex-direction: column;
 }
 
 .form-select {
     width: 100%; 
     border-color: var(--color-primary);
     color: var(--color-primary);
 }
 
 .form-label {
     margin-bottom: var(--spacing-sm); 
 }
 
 .img-thumbnail.selected {
     border: 2px solid var(--color-primary);
 }
 
 .miniatures-navigation {
     display: flex;
     align-items: center;
 }
 .miniatures-wrapper {
     overflow: hidden;
     flex-grow: 1;
     border-radius: var(--border-radius-sm);
     padding-block: var(--spacing-sm);
 }
 
 .carousel-item {
     transition: none !important;
 }
 
 
 /* pagedetail.css */
 
 .carousel-item img {
     width: 600px; /* Largeur fixe */
     height: 400px; /* Hauteur fixe */
     object-fit: contain; /* Couvrir l'espace disponible sans déformer l'image */
   }
   @media screen and (max-width: 700px) {
    .description-container{
       margin: var(--spacing-sm);
       margin-bottom: var(--spacing-md);
       padding-inline: var(--spacing-sm); 
    }
    .description{
        padding: var(--spacing-sm);
    }
    .titre-details{
        left: var(--spacing-sm);
    }
    .ld{
        margin-inline: var(--spacing-sm);
    }
   }

   .ancien-prix { 
    text-decoration: line-through; 
    color: var(--color-danger);
    font-size: 1.2rem; 
    margin-right: var(--spacing-sm); 
    text-align: center;
}


.ancien-prix-qte{
    text-decoration: line-through; 
    color: var(--color-danger);
    font-size: 0.9rem; 
    margin-right: var(--spacing-sm); 
    text-align: center;
}

.block-prix .prix .ancien-prix {
    text-decoration: line-through;
    color: var(--color-danger);
    font-size: 0.9em;   /* Ajuste la taille au besoin */
    margin-left: var(--spacing-sm);  /* Espace supplémentaire entre les prix */
    background-color: transparent;
  }

  .page-articles__path{
    padding-inline: var(--spacing-md);
    display: flex;
    & li a{
    position: relative;
    color: var(--color-primary-light);
    padding: var(--spacing-xs) 0;
    &::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 5px;
        width: 0;
        height: 1px;
        background-color: #ffce4c;
        transition: width 500ms ease;   
    }
    &:hover{
        color:#ffce4c;
    } &:hover::after{
        width: 100%;
    } 
    } 
  }
  .container__page-articles{
      text-align: center;
      background-color: #ffffff;
        display: flex;
        flex-direction: column;
      justify-content: center;
      padding-block: var(--spacing-md);
      margin-bottom: var(--spacing-lg);
      & h3 {
        color: var(--color-primary-light);
        font-weight: bolder;
        padding-bottom: var(--spacing-md);
      }
    }
  .row__page-articles{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
      padding-bottom: var(--spacing-md);
    }
    .custom-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between; 
      color: #F5F5F5;
      width: min-content;
      height: 28rem;
      border-radius: 20px 20px 15px 15px;
      background-color: #ffffff;
  }
  .image-container {
    position: relative;
    border-radius: 15px 15px 0px 0px;
    background-color: #ffffff;
    height: 320px;
    width: 320px;
    padding: var(--spacing-sm);  
  }
  .card_container-description{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .card-body{
    display: flex;
    justify-content: center;
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-md);
    align-items: center;
    gap: var(--spacing-sm);
  }
  .card-img-top{
    border-radius: 15px 15px 0px 0px;
    object-fit:contain;
    width: 15rem;
    height: 15rem;
  }
  .card-price {
    color: #ffce4c;
    font-size: x-large;
    margin-bottom: 0;
     
  }
  .btn-details{
    display: flex;
    justify-content: center;
    color: #F5F5F5;
    background-color: var(--color-primary-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: 0.4s ease-in-out transform;
    &:hover{
      border: none;
      background-color: var(--color-primary);
      color: #ffffff;
      transform: scale(1.1);
   }
  }
  .card-title{
    height: 3.75rem;
    color: var(--color-primary-light);
    padding-top: var(--spacing-sm);
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    padding-inline: var(--spacing-xs);
  }
  @media screen and (max-width: 700px) {
    .page-articles__path{
      padding-inline: var(--spacing-sm); 
    }
    .container__page-articles{
      padding-block: var(--spacing-sm);
      margin-bottom: var(--spacing-md);
      & h3{
        font-size: x-large;
        font-weight:600;
      }
    }
  }
  
  .marque{
    color: var(--color-primary-light);
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 0.8rem;
    &:hover{
    color: var(--color-primary-light);
    text-decoration: underline;
    }
  }
  
  .marque-bg {
    position: absolute;  
    bottom: 10;           
    right: 0;            
  }
  
  
  .stock-and-price {
    display: flex;
    align-items: center; 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    width: 100%; 
  }
  
  .stock-info, .price-info {
    color: var(--color-primary-light);
    margin-left: auto; 
    padding: var(--spacing-sm) var(--spacing-md); 
    border-radius: var(--border-radius-sm); 
    margin-bottom: 0;
  }
  
  .price-bg {
    align-self: flex-end; 
    background-color: #FFCE4C;
    width: fit-content;
    padding: var(--spacing-xs);
    margin-top: 0px;
    margin-left: var(--spacing-sm);
    margin-right: 0px; 
    border-radius: 20px 0px 20px 0px;
  }
  
  .stock-info{
    font-size: 0.9rem;
  }

  .page-articles__path{
    padding-inline: var(--spacing-md);
    display: flex;
    & li a{
    position: relative;
    color: var(--color-primary-light);
    padding: var(--spacing-xs) 0;
    &::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 5px;
        width: 0;
        height: 1px;
        background-color: #ffce4c;
        transition: width 500ms ease;   
    }
    &:hover{
        color:#ffce4c;
    } &:hover::after{
        width: 100%;
    } 
    } 
  }
  .container__page-articles{
      text-align: center;
      background-color: #ffffff;
        display: flex;
        flex-direction: column;
      justify-content: center;
      padding-block: var(--spacing-md);
      margin-bottom: var(--spacing-lg);
      & h3 {
        color: var(--color-primary-light);
        font-weight: bolder;
        padding-bottom: var(--spacing-md);
      }
    }
  .row__page-articles{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
      padding-bottom: var(--spacing-md);
    }
    .custom-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between; 
      color: #F5F5F5;
      width: min-content;
      height: 28rem;
      border-radius: 20px 20px 15px 15px;
      background-color: #ffffff;
  }
  .image-container {
    position: relative;
    border-radius: 15px 15px 0px 0px;
    background-color: #ffffff;
    height: 320px;
    width: 320px;
    padding: var(--spacing-sm);  
  }
  .card_container-description{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .card-body{
    display: flex;
    justify-content: center;
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-md);
    align-items: center;
    gap: var(--spacing-sm);
  }
  .card-img-top{
    border-radius: 15px 15px 0px 0px;
    object-fit:contain;
    width: 15rem;
    height: 15rem;
  }
  .card-price {
    color: #ffce4c;
    font-size: x-large;
    margin-bottom: 0;
     
  }
  .btn-details{
    display: flex;
    justify-content: center;
    color: #F5F5F5;
    background-color: var(--color-primary-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: 0.4s ease-in-out transform;
    &:hover{
      border: none;
      background-color: var(--color-primary);
      color: #ffffff;
      transform: scale(1.1);
   }
  }
  .card-title{
    height: 3.75rem;
    color: var(--color-primary-light);
    padding-top: var(--spacing-sm);
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    padding-inline: var(--spacing-xs);
  }
  @media screen and (max-width: 700px) {
    .page-articles__path{
      padding-inline: var(--spacing-sm); 
    }
    .container__page-articles{
      padding-block: var(--spacing-sm);
      margin-bottom: var(--spacing-md);
      & h3{
        font-size: x-large;
        font-weight:600;
      }
    }
  }
  
  .marque{
    color: var(--color-primary-light);
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 0.8rem;
    &:hover{
    color: var(--color-primary-light);
    text-decoration: underline;
    }
  }
  
  .marque-bg {
    position: absolute;  
    bottom: 10;           
    right: 0;            
  }
  
  
  .stock-and-price {
    display: flex;
    align-items: center; 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    width: 100%; 
  }
  
  .stock-info, .price-info {
    color: var(--color-primary-light);
    margin-left: auto; 
    padding: var(--spacing-sm) var(--spacing-md); 
    border-radius: var(--border-radius-sm); 
    margin-bottom: 0;
  }
  
  .price-bg {
    align-self: flex-end; 
    background-color: #FFCE4C;
    width: fit-content;
    padding: var(--spacing-xs);
    margin-top: 0px;
    margin-left: var(--spacing-sm);
    margin-right: 0px; 
    border-radius: 20px 0px 20px 0px;
  }
  
  .stock-info{
    font-size: 0.9rem;
  }

  .row__similaires{
    display: flex;
    flex-wrap: wrap;
  }

  .pack-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.pack-separator {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-primary-light);
    margin: 0 var(--spacing-sm);
}

.pack-price-container {
    background-color: #f8f9fa;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-left: var(--spacing-sm);
    border: 1px solid var(--color-secondary);
}

.pack-price {
    text-align: center;
}

.pack-price-label {
    display: block;
    font-weight: bold;
    margin-bottom: var(--spacing-xs);
    color: var(--color-primary);
}

.pack-price-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary-light);
    background-color: var(--color-success);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

.pack-original-price {
    display: block;
    text-decoration: line-through;
    color: var(--color-danger);
    font-size: 0.9rem;
    margin-top: var(--spacing-xs);
}

/* Responsive */
@media (max-width: 768px) {
    .pack-container {
        justify-content: center;
    }
    
    .pack-separator {
        margin: var(--spacing-sm) 0;
    }
    
    .pack-price-container {
        width: 100%;
        margin: var(--spacing-sm) 0;
    }
}

/* Pack Articles Styling */
.pack-articles {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
}

.pack-articles h6 {
    color: #335c40;
    margin-bottom: 1rem;
    font-weight: 600;
}

.pack-articles ul {
    margin: 0;
    padding: 0;
}

.pack-articles li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.pack-articles li:last-child {
    border-bottom: none;
}

.pack-article-name {
    color: #495057;
    font-size: 0.9rem;
}

.pack-article-price {
    color: #6c757d;
    font-size: 0.85rem;
}