/* viewmodele.css */

/* 1) Hero Card */
.card-title-hero {
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 2) Tableau caractéristiques épuré */
.table-bordered {
  border: none;
}
.table-bordered th,
.table-bordered td {
  border: none;
  padding: 0.75rem 1rem;
}
.table-bordered th {
  background: #f8f9fa;
  width: 35%;
}
.table-bordered tr + tr th,
.table-bordered tr + tr td {
  border-top: 1px solid #e9ecef;
}

/* 3) Slick carousel styling */
#carouselTrack .card {
  margin: 0 4px;
}
.slick-arrow {
  background: rgba(0,0,0,0.3) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
}
.slick-prev:before,
.slick-next:before {
  font-size: 20px !important;
  color: white !important;
}

/* 4) Pastilles arrondies */
.pastille {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.pastille.selected {
  background: #fff3cd;
  border-color: #ffc107;
}
.pastille:hover {
  background: #ffe8a1;
}

/* 5) Progress bar renforcée */
.progress {
  height: 12px !important;
  margin-bottom: 1.5rem;
}
.progress-bar {
  transition: width 0.4s ease;
}

/* 6) Cartes variantes hover effect */
.variant-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.variant-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* 7) Styles boutons personnalisés */
.btn-warning {
  background-color: #ffc107;
  border-color: #e0a800;
}
.btn-warning:hover {
  background-color: #e0a800;
  border-color: #c69500;
}
.btn-outline-warning {
  color: #856404;
  border-color: #ffc107;
}
.btn-outline-warning:hover {
  background-color: #fff3cd;
}

/* 8) Responsive adjustments */
@media (max-width: 576px) {
  #carouselTrack .card { width: 100px; }
}