/* ================================================
   Capsulorama - CSS minimaliste
   Seules les animations et positionnements spéciaux
   Les couleurs sont gérées par les classes Bootstrap
   ================================================ */

/* Layout - Flexbox pour footer sticky */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ================================================
   Animations et transitions
   ================================================ */

/* Logo zoom au hover - Agrandit légèrement le logo au survol pour un effet visuel attrayant */
.logo-img {
  transition: transform 0.2s ease;
}
.logo-img:hover {
  transform: scale(1.05);
}

/* Nav links - effet subtil - Déplace légèrement les liens de navigation vers le haut au survol */
.nav-link {
  transition: all 0.2s ease;
}
.nav-link:hover {
  transform: translateY(-1px);
}

/* Dropdown - slide au hover - Décale les éléments du menu déroulant vers la droite au survol */
.dropdown-item {
  transition: all 0.2s ease;
}
.dropdown-item:hover {
  transform: translateX(5px);
  background-color: rgba(220, 53, 69, 0.1) !important;
}

/* Bouton - lift au hover - Soulève le bouton et ajoute une ombre au survol pour un effet de profondeur */
.btn-hover-lift {
  transition: all 0.2s ease;
}
.btn-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ================================================
   Barre de recherche
   ================================================ */

/* Container flexible pour la barre de recherche avec largeur maximale */
.search-wrapper {
  flex: 1;
  max-width: 500px;
}

/* Conteneur relatif pour positionner l'icône de recherche en absolu à l'intérieur */
.search-form {
  position: relative;
}

/* Champ de recherche - Change le style au focus avec bordure rouge et ombre */
.search-input {
  transition: all 0.3s ease;
}

/* Placeholder teinté aux couleurs de la charte */
.search-input::placeholder {
  color: rgba(176, 42, 55, 0.45);
  font-style: italic;
  letter-spacing: 0.01em;
}

.search-input:focus {
  outline: none;
  background-color: white !important;
  border-color: rgb(176, 42.4, 55.2) !important; /* red-600 au focus */
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15) !important;
}

/* Icône de recherche positionnée à gauche du champ - Change de couleur au focus de l'input */
.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: color 0.3s ease;
}

.search-input:focus ~ .search-icon {
  color: rgb(176, 42.4, 55.2) !important; /* red-600 au focus */
}

.g-recaptcha {
    display: flex;
    justify-content: center;
}

/* ================================================
   Page Index - Capsules
   ================================================ */

/* Icône loupe zoom - effet au survol de l'image */
.zoom-icon-badge {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

div:hover > .zoom-icon-badge {
  transform: scale(1.15);
  background-color: rgba(220, 53, 69, 0.85) !important;
}



/* Pas de styles de boutons personnalisés - utiliser Bootstrap */

/* Styling pour les liens dans le contenu généré dynamiquement */
.prose-content a {
  color: black !important;
  text-decoration: underline;
}

/* Animation simple pour le panier */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) scale(1.1); }
  75% { transform: translateX(5px) scale(1.1); }
}