/* MDB Bootstrap Custom Styles - Joseph Parfumerie - Animations avancées */

/* Variables de couleurs */
:root {
    /* Couleur primaire - ton doré */
    --mdb-primary: #FF9000;
    --mdb-primary-rgb: 255, 144, 0;
    --mdb-primary-dark: #E67E00;
    --mdb-primary-light: #FFAD4D;
    
    /* Secondaire - bleu profond pour contraste et sophistication */
    --mdb-secondary: #1D3557;
    --mdb-secondary-rgb: 29, 53, 87;
    --mdb-secondary-dark: #162A45;
    --mdb-secondary-light: #457B9D;
    
    /* Teintes neutres riches */
    --mdb-neutral-dark: #2A2A2A;
    --mdb-neutral: #4A4A4A;
    --mdb-neutral-light: #F5F3EF;
    
    /* Accents */
    --mdb-accent1: #6D597A; /* Violet-pourpre pour évoquer les parfums floraux */
    --mdb-accent1-rgb: 109, 89, 122;
    --mdb-accent2: #8A5A44; /* Brun ambré pour les notes boisées */
    --mdb-accent2-rgb: 138, 90, 68;
    
    /* États fonctionnels */
    --mdb-success: #3E8B74;
    --mdb-success-rgb: 62, 139, 116;
    --mdb-danger: #C75146;
    --mdb-danger-rgb: 199, 81, 70;
    --mdb-warning: #D5A021;
    --mdb-warning-rgb: 213, 160, 33;
    --mdb-info: #3A6B99;
    --mdb-info-rgb: 58, 107, 153;
    
    /* Couleurs de texte */
    --mdb-text-dark: #2A2A2A;
    --mdb-text-muted: #6c757d;
    
    /* Variables pour les transitions */
    --mdb-transition-smooth: 0.4s cubic-bezier(0.45, 0, 0.25, 1);
    --mdb-transition-bounce: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.4);
  }
  
  /* Appliquer les couleurs personnalisées aux classes MDB */
  .text-primary { 
    color: var(--mdb-primary) !important; 
  }
  
  .bg-primary { 
    background-color: var(--mdb-primary) !important; 
  }
  
  .border-primary { 
    border-color: var(--mdb-primary) !important; 
  }
  
  .btn-primary {
    background-color: var(--mdb-primary) !important;
    color: white !important;
    transition: all 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
  }
  
  .btn-primary:hover, 
  .btn-primary:focus, 
  .btn-primary:active {
    background-color: var(--mdb-primary-dark) !important;
    box-shadow: 0 4px 15px rgba(var(--mdb-primary-rgb), 0.5) !important;
    transform: translateY(-3px);
  }
  
  /* Effet de vague sur les boutons */
  .btn-primary::after,
  .btn-outline-primary::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
  }
  
  .btn-primary:active::after,
  .btn-outline-primary:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
  }
  
  .btn-outline-primary {
    color: var(--mdb-primary) !important;
    border-color: var(--mdb-primary) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .btn-outline-primary:hover,
  .btn-outline-primary:focus,
  .btn-outline-primary:active {
    background-color: var(--mdb-primary) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(var(--mdb-primary-rgb), 0.5) !important;
    transform: translateY(-3px);
  }
  
  /* Typographie */
  body {
    font-family: 'Poppins', 'Roboto', sans-serif;
    color: var(--mdb-text-dark);
    background-color: var(--mdb-neutral-light);
  }
  
  h1, h2, h3, h4, h5, h6, .playfair {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    letter-spacing: 0.025em;
    margin-bottom: 1rem;
    color: var(--mdb-neutral-dark);
  }
  
  /* Animation pour les titres */
  .hero-title {
    position: relative;
    display: inline-block;
  }
  
  .hero-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--mdb-primary);
    transition: width 0.8s ease;
  }
  
  .hero-title.animate::after {
    width: 100%;
  }
  
  /* Animation de fondu pour les sections */
  .fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Cartes produits avec effets avancés */
  .card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  
  .card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Effet de bordure brillante */
  .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
      var(--mdb-primary) 0%, 
      var(--mdb-secondary) 50%, 
      var(--mdb-primary) 100%);
    z-index: 2;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
  }
  
  .card:hover::before {
    transform: translateY(0);
  }
  
  /* Effet d'ombre interne */
  .card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(circle at center, 
      rgba(var(--mdb-primary-rgb), 0.1) 0%, 
      rgba(0, 0, 0, 0) 70%);
    transition: opacity 0.5s ease;
  }
  
  .card:hover::after {
    opacity: 1;
  }
  
  /* Animation pour les images de produit */
  .card .card-img-top,
  .product-image img {
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  
  /* Effet de flou sur l'image au survol pour les détails */
  .product-card .mask {
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.5s ease, opacity 0.5s ease;
  }

  /* Animation pour les boutons d'action */
  .action-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.5rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
  }
  
  .product-card:hover .action-button {
    opacity: 1;
    transform: translateY(0);
  }
  
  .product-card:hover .action-button:nth-child(1) {
    transition-delay: 0.1s;
  }
  
  .product-card:hover .action-button:nth-child(2) {
    transition-delay: 0.2s;
  }
  
  .product-card:hover .action-button:nth-child(3) {
    transition-delay: 0.3s;
  }
  
  .action-button:hover {
    background-color: var(--mdb-primary);
    color: white;
    box-shadow: 0 5px 15px rgba(var(--mdb-primary-rgb), 0.5);
    transform: translateY(-5px) scale(1.1);
  }
  
  /* Animation des badges */
  .badge {
    transition: all 0.3s ease;
  }
  
  .badge.bg-primary {
    background-color: var(--mdb-primary) !important;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(var(--mdb-primary-rgb), 0.7);
    }
    70% {
      box-shadow: 0 0 0 6px rgba(var(--mdb-primary-rgb), 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(var(--mdb-primary-rgb), 0);
    }
  }
  
  /* Animation pour le prix */
  .price {
    position: relative;
    display: inline-block;
    color: var(--mdb-primary);
    font-size: 1.875rem;
    font-weight: 700;
  }
  
  .price::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent transparent rgba(var(--mdb-primary-rgb), 0.2);
    transform: translateY(-50%);
    transition: border-width 0.3s ease;
  }
  
  .price:hover::before {
    border-width: 8px 0 8px 8px;
  }
  
  /* Footer avec animation */
  footer {
    background-color: var(--mdb-secondary);
    color: white;
    position: relative;
    overflow: hidden;
  }
  
  footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
      var(--mdb-primary) 0%, 
      var(--mdb-accent1) 50%, 
      var(--mdb-primary) 100%);
    background-size: 200% 100%;
    animation: gradientMove 5s ease infinite;
  }
  
  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  footer .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  footer h5.text-primary {
    color: var(--mdb-primary-light) !important;
    position: relative;
    display: inline-block;
  }
  
  footer h5.text-primary::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--mdb-primary-light);
    transition: width 0.3s ease;
  }
  
  footer h5.text-primary:hover::after {
    width: 100%;
  }
  
  footer a.text-muted {
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    padding-left: 0;
  }
  
  footer a.text-muted:hover {
    color: var(--mdb-primary-light) !important;
    padding-left: 5px;
  }
  
  /* Animation pour les liens du footer */
  footer a.text-muted::before {
    content: '›';
    position: absolute;
    left: -15px;
    opacity: 0;
    transition: all 0.3s ease;
  }
  
  footer a.text-muted:hover::before {
    opacity: 1;
    left: -10px;
  }
  
  footer .border-secondary {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  footer .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
    transition: all 0.3s ease;
  }
  
  footer .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--mdb-primary);
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(var(--mdb-primary-rgb), 0.25);
    transform: translateY(-2px);
  }
  
  footer .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
  
  /* Effet flottant pour les icônes de médias sociaux */
  footer .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    margin-right: 10px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  footer .social-link:hover {
    background-color: var(--mdb-primary);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(var(--mdb-primary-rgb), 0.5);
  }
  
  /* Bouton d'abonnement newsletter animé */
  footer .btn-subscribe {
    position: relative;
    overflow: hidden;
  }
  
  footer .btn-subscribe::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 255, 255, 0.2), 
      transparent);
    transition: left 0.7s ease;
  }
  
  footer .btn-subscribe:hover::before {
    left: 100%;
  }
  
  /* Navigation et onglets */
  .nav-link {
    color: var(--mdb-neutral);
    transition: all 0.3s ease;
    position: relative;
  }
  
  .nav-link:hover {
    color: var(--mdb-primary);
  }
  
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--mdb-primary);
    transform: translateX(-50%);
    transition: width 0.3s ease;
  }
  
  .nav-link:hover::after {
    width: 100%;
  }
  
  .nav-link.active {
    color: var(--mdb-primary) !important;
  }
  
  .nav-link.active::after {
    width: 100%;
  }
  
  .nav-tabs .nav-link.active {
    border-color: var(--mdb-primary) !important;
  }
  
  /* Animation pour les onglets */
  .tab-pane {
    animation: fadeInUp 0.5s ease forwards;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Formulaires avec animations */
  .form-control, .form-select {
    transition: all 0.3s ease;
    border-radius: 0.5rem;
  }
  
  .form-control:focus, .form-select:focus {
    border-color: var(--mdb-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--mdb-primary-rgb), 0.25);
    transform: translateY(-2px);
  }
  
  /* Animation des placeholders */
  .form-control::placeholder {
    transition: opacity 0.3s ease;
  }
  
  .form-control:focus::placeholder {
    opacity: 0.5;
  }
  
  /* Sélecteur de quantité */
  .quantity-control {
    display: flex;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    width: 120px;
    transition: all 0.3s ease;
  }
  
  .quantity-control:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }
  
  .quantity-btn {
    width: 36px;
    background-color: #f8f9fa;
    border: none;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .quantity-btn:hover {
    background-color: #e9ecef;
    transform: scale(1.1);
  }
  
  .quantity-input {
    flex: 1;
    text-align: center;
    border: none;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    font-size: 1rem;
    transition: all 0.3s ease;
  }
  
  .quantity-input:focus {
    outline: none;
    background-color: rgba(var(--mdb-primary-rgb), 0.05);
  }
  
  /* Animation pour les étoiles d'avis */
  .rating-stars {
    color: #FFC107;
  }
  
  .star-rating label {
    cursor: pointer;
    transition: all 0.3s ease;
    transform-origin: center;
  }
  
  .star-rating label:hover {
    color: #FFC107;
    transform: scale(1.2) rotate(5deg);
  }
  
  .star-rating label.active {
    color: #FFC107;
    animation: starPulse 1s ease;
  }
  
  @keyframes starPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
  }
  
  /* Animation pour les notifications toast */
  .toast {
    animation: slideInRight 0.4s ease;
  }
  
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Animation pour les produits similaires */
  .similar-products .product-card {
    opacity: 0;
    transform: translateY(30px);
  }
  
  .similar-products.animate .product-card {
    animation: staggerFadeIn 0.5s ease forwards;
  }
  
  .similar-products.animate .product-card:nth-child(1) { animation-delay: 0.1s; }
  .similar-products.animate .product-card:nth-child(2) { animation-delay: 0.2s; }
  .similar-products.animate .product-card:nth-child(3) { animation-delay: 0.3s; }
  .similar-products.animate .product-card:nth-child(4) { animation-delay: 0.4s; }
  
  @keyframes staggerFadeIn {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Animation des boutons "Ajouter au panier" */
  .add-to-cart-btn, .btn-primary.add-to-cart {
    position: relative;
    overflow: hidden;
  }
  
  .add-to-cart-btn::before,
  .btn-primary.add-to-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
    transition: clip-path 0.4s ease;
  }
  
  .add-to-cart-btn:hover::before,
  .btn-primary.add-to-cart:hover::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  
  /* Animation pour le bouton retour en haut */
  .back-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--mdb-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(var(--mdb-primary-rgb), 0.5);
    z-index: 999;
  }
  
  .back-to-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .back-to-top-btn:hover {
    background-color: var(--mdb-primary-dark);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(var(--mdb-primary-rgb), 0.7);
  }
  
  .back-to-top-btn i {
    transition: transform 0.3s ease;
  }
  
  .back-to-top-btn:hover i {
    transform: translateY(-3px);
  }
  
  /* Animation subtile pour l'en-tête au défilement */
  .sticky-header {
    transition: all 0.3s ease;
  }
  
  .sticky-header.scrolled {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    animation: slideDown 0.5s forwards;
  }
  
  @keyframes slideDown {
    to {
      transform: translateY(0);
    }
  }
  
  /* Effet de flacon de parfum qui se remplit */
  .perfume-bottle {
    position: relative;
    width: 100px;
    height: 150px;
    background-color: rgba(var(--mdb-primary-rgb), 0.1);
    border-radius: 10px 10px 50% 50%;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .perfume-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--mdb-primary);
    transition: height 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .perfume-bottle:hover .perfume-liquid {
    height: 75%;
  }
  
  .perfume-cap {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 20px;
    background-color: var(--mdb-neutral-dark);
    border-radius: 5px 5px 0 0;
  }
  
  /* Animation pour les noms de parfum */
  .perfume-name {
    display: inline-block;
    position: relative;
  }
  
  .perfume-name::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--mdb-primary), transparent);
    transition: width 0.4s ease;
  }
  
  .perfume-name:hover::after {
    width: 100%;
  }
  
  /* Effet d'apparition pour les images dans la galerie */
  .product-gallery img {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
  }
  
  /* Effet particulier pour les notes olfactives */
  .note-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 0.5s ease;
  }
  
  .note-card:hover {
    transform: rotateY(10deg);
  }
  
  .note-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%, 
      rgba(var(--mdb-primary-rgb), 0.1) 0%, 
      transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }
  
  .note-card:hover::before {
    opacity: 1;
  }
  
  /* Animation pour le breadcrumb */
  .breadcrumb-item {
    position: relative;
    opacity: 0;
    animation: fadeInStagger 0.5s ease forwards;
  }
  
  .breadcrumb-item:nth-child(1) { animation-delay: 0.1s; }
  .breadcrumb-item:nth-child(2) { animation-delay: 0.2s; }
  .breadcrumb-item:nth-child(3) { animation-delay: 0.3s; }
  
  @keyframes fadeInStagger {
    from {
      opacity: 0;
      transform: translateX(-10px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Personnalisation du curseur sur les zones interactives */
  .interactive-element {
    cursor: none;
    position: relative;
  }
  
  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: var(--mdb-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, opacity 0.3s;
  }
  
  .cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border: 2px solid var(--mdb-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, opacity 0.3s, transform 0.1s;
  }
  
  .interactive-element:hover ~ .cursor-dot {
    width: 0;
    height: 0;
    opacity: 0;
  }
  
  .interactive-element:hover ~ .cursor-outline {
    width: 50px;
    height: 50px;
    border-width: 1px;
    opacity: 0.5;
  }
  
  /* Animations des gouttelettes pour l'ambiance parfum */
  .fragrance-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
  }
  
  .bubble {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(var(--mdb-primary-rgb), 0.1);
    animation: float linear infinite;
  }
  
  .bubble:nth-child(1) {
    width: 30px;
    height: 30px;
    left: 10%;
    animation-duration: 20s;
  }
  
  .bubble:nth-child(2) {
    width: 40px;
    height: 40px;
    left: 30%;
    animation-duration: 24s;
    animation-delay: 2s;
  }
  
  .bubble:nth-child(3) {
    width: 25px;
    height: 25px;
    left: 50%;
    animation-duration: 18s;
    animation-delay: 5s;
  }
  
  .bubble:nth-child(4) {
    width: 35px;
    height: 35px;
    left: 70%;
    animation-duration: 22s;
    animation-delay: 8s;
  }
  
  .bubble:nth-child(5) {
    width: 20px;
    height: 20px;
    left: 90%;
    animation-duration: 16s;
    animation-delay: 12s;
  }
  
  @keyframes float {
    0% {
      transform: translateY(-100%) rotate(0deg);
      opacity: 0;
    }
    10% {
      opacity: 0.5;
    }
    100% {
      transform: translateY(1000%) rotate(360deg);
      opacity: 0;
    }
  }
  
  /* Effet de brume pour l'ambiance parfum */
  .fragrance-mist {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
      ellipse at bottom,
      rgba(var(--mdb-primary-rgb), 0.05) 0%,
      rgba(var(--mdb-primary-rgb), 0) 70%
    );
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    z-index: -1;
  }
  
  section:hover .fragrance-mist {
    opacity: 1;
  }
  
  /* Animation d'apparition des caractéristiques du parfum */
  .feature-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease;
  }
  
  .feature-item.is-visible {
    opacity: 1;
    transform: translateX(0);
  }
  
  .feature-item:nth-child(1) { transition-delay: 0.1s; }
  .feature-item:nth-child(2) { transition-delay: 0.2s; }
  .feature-item:nth-child(3) { transition-delay: 0.3s; }
  .feature-item:nth-child(4) { transition-delay: 0.4s; }
  
  /* Animation pour le texte de description */
  .description-text {
    position: relative;
    overflow: hidden;
  }
  
  .description-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mdb-neutral-light);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    z-index: 1;
  }
  
  .description-text.is-visible::before {
    transform: translateX(100%);
  }
  
  .description-text span {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: 0.5s;
  }
  
  .description-text.is-visible span {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Effet de dévoilement pour les prix */
  .price-reveal {
    position: relative;
    overflow: hidden;
  }
  
  .price-reveal::before, .price-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: var(--mdb-primary);
    transition: transform 0.5s ease;
    z-index: 1;
  }
  
  .price-reveal::before {
    left: 0;
    transform: translateX(-100%);
  }
  
  .price-reveal::after {
    right: 0;
    transform: translateX(100%);
  }
  
  .price-reveal.is-visible::before {
    transform: translateX(0);
  }
  
  .price-reveal.is-visible::after {
    transform: translateX(0);
  }
  
  .price-reveal .price-content {
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-delay: 0.5s;
  }
  
  .price-reveal.is-visible .price-content {
    opacity: 1;
  }
  
  /* Animation du loader */
  .loader {
    display: flex;
    justify-content: center;
    margin: 2rem auto;
  }
  
  .loader-dot {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: var(--mdb-primary);
    animation: loaderPulse 1.5s ease-in-out infinite;
  }
  
  .loader-dot:nth-child(1) { animation-delay: 0s; }
  .loader-dot:nth-child(2) { animation-delay: 0.2s; }
  .loader-dot:nth-child(3) { animation-delay: 0.4s; }
  
  @keyframes loaderPulse {
    0%, 100% {
      transform: scale(0.5);
      opacity: 0.5;
    }
    50% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* Animation pour les cartes de notes olfactives */
  .note-card {
    position: relative;
    overflow: hidden;
  }
  
  .note-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle at center,
      rgba(var(--mdb-primary-rgb), 0.1) 0%,
      rgba(var(--mdb-primary-rgb), 0) 70%
    );
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  
  .note-card:hover::after {
    opacity: 1;
    transform: scale(1);
  }
  
  .note-title {
    position: relative;
    display: inline-block;
  }
  
  .note-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--mdb-primary);
    transition: width 0.3s ease;
  }
  
  .note-card:hover .note-title::after {
    width: 100%;
  }
  
  /* Animation du panier lors de l'ajout */
  .cart-icon {
    position: relative;
  }
  
  .cart-icon.cart-added {
    animation: cartBounce 0.5s ease;
  }
  
  @keyframes cartBounce {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }
  
  /* Effet de vague pour les boutons */
  .btn-wave {
    position: relative;
    overflow: hidden;
  }
  
  .btn-wave::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
  }
  
  .btn-wave:focus:not(:active)::after {
    animation: ripple 1s ease-out;
  }
  
  @keyframes ripple {
    0% {
      transform: scale(0, 0) translate(-50%, -50%);
      opacity: 0.5;
    }
    100% {
      transform: scale(20, 20) translate(-50%, -50%);
      opacity: 0;
    }
  }
  
  /* Animation de hover pour les cartes d'avis */
  .review-card {
    transition: all 0.3s ease;
  }
  
  .review-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  .review-card::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 60px;
    font-family: 'Playfair Display', serif;
    color: rgba(var(--mdb-primary-rgb), 0.1);
    z-index: 0;
    line-height: 1;
  }
  
  /* Animation pour le formulaire d'avis */
  .review-form-container {
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease;
  }
  
  .review-form-container.show {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* Animation pour les options de taille */
  .size-option {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .size-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mdb-primary);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: -1;
  }
  
  .size-option:hover::before {
    transform: translateY(0);
  }
  
  .size-option:hover {
    color: white;
  }
  
  /* Animation pour le breadcrumb */
  .breadcrumb {
    position: relative;
    overflow: hidden;
  }
  
  .breadcrumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      rgba(var(--mdb-primary-rgb), 0.1) 0%, 
      rgba(var(--mdb-primary-rgb), 0) 50%,
      rgba(var(--mdb-primary-rgb), 0.1) 100%
    );
    background-size: 200% 100%;
    animation: breadcrumbGlow 5s linear infinite;
  }
  
  @keyframes breadcrumbGlow {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
  }
  
  /* Animations et effet pour les messages de notification */
  .toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    animation: toastInOut 3s ease forwards;
  }
  
  @keyframes toastInOut {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    10% {
      transform: translateX(0);
      opacity: 1;
    }
    90% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  
  /* Animation pour l'état du logo lors du défilement */
  .brand-logo {
    transition: transform 0.3s ease;
  }
  
  header.scrolled .brand-logo {
    transform: scale(0.9);
  }
  
  /* Bouton back-to-top avec animation */
  .btn-back-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--mdb-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(var(--mdb-primary-rgb), 0.5);
  }
  
  .btn-back-top.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .btn-back-top:hover {
    background-color: var(--mdb-primary-dark);
    transform: translateY(-5px);
  }
  
  .btn-back-top i {
    transition: transform 0.3s ease;
  }
  
  .btn-back-top:hover i {
    transform: translateY(-3px);
  }
  
  /* Animation pour les prix barrés en promotion */
  .old-price {
    position: relative;
    display: inline-block;
    color: var(--mdb-text-muted);
    margin-right: 0.5rem;
  }
  
  .old-price::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--mdb-danger);
    animation: strikethrough 0.5s ease forwards;
  }
  
  @keyframes strikethrough {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
  
  /* Animation pour le badge de promotion */
  .promo-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--mdb-danger);
    color: white;
    padding: 0.5rem;
    transform-origin: top right;
    animation: promoBadgePulse 2s infinite;
  }
  
  @keyframes promoBadgePulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }
  
  /* Animation pour les miniatures de la galerie de produit */
  .product-thumbnail {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  
  .product-thumbnail:hover {
    transform: translateY(-5px);
  }
  
  .product-thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--mdb-primary-rgb), 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .product-thumbnail:hover::after {
    opacity: 1;
  }
  
  .product-thumbnail.active {
    border-color: var(--mdb-primary);
    transform: translateY(-5px);
  }
  
  .product-thumbnail.active::after {
    opacity: 0;
  }
  
  /* Animation spécifique au survol des liens du footer */
  footer .link-hover-effect {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
  }
  
  footer .link-hover-effect::before {
    content: '›';
    position: absolute;
    left: -15px;
    opacity: 0;
    transition: all 0.3s ease;
  }
  
  footer .link-hover-effect:hover {
    padding-left: 15px;
    color: var(--mdb-primary-light);
  }
  
  footer .link-hover-effect:hover::before {
    opacity: 1;
    left: 0;
  }
  
  /* Animation de timeline pour processus d'achat */
  .checkout-timeline {
    position: relative;
    padding-left: 30px;
  }
  
  .checkout-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    width: 2px;
    height: 100%;
    background-color: var(--mdb-primary);
  }
  
  .timeline-item {
    position: relative;
    padding-bottom: 30px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }
  
  .timeline-item.active {
    opacity: 1;
  }
  
  .timeline-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -30px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--mdb-primary);
    background-color: white;
    transition: all 0.3s ease;
  }
  
  .timeline-item.active::before {
    background-color: var(--mdb-primary);
    box-shadow: 0 0 0 4px rgba(var(--mdb-primary-rgb), 0.3);
  }
  
  /* Animation pour l'affichage parallaxe des images de fond */
  .parallax-bg {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-position 0.3s ease;
  }
  
  /* Animations pour illustrer l'intensité du parfum */
  .intensity-meter {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .intensity-fill {
    height: 100%;
    background: linear-gradient(to right, var(--mdb-primary-light), var(--mdb-primary), var(--mdb-primary-dark));
    width: 0;
    transition: width 1s ease;
  }
  
  .intensity-meter.active .intensity-fill {
    animation: fillIntensity 1s ease forwards;
  }
  
  @keyframes fillIntensity {
    0% { width: 0; }
    100% { width: var(--fill-percentage); }
  }
  
  /* Animation pour les statistiques ou nombres importants */
  .counter-value {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
  }
  
  .counter-value.visible {
    animation: countUp 2s ease forwards;
  }
  
  @keyframes countUp {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Animation du texte de marque pour la page d'accueil */
  .brand-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  
  .brand-text span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
  }
  
  .brand-text.animate span {
    animation: revealText 0.8s ease forwards;
  }
  
  @keyframes revealText {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .brand-text.animate span:nth-child(1) { animation-delay: 0.1s; }
  .brand-text.animate span:nth-child(2) { animation-delay: 0.2s; }
  .brand-text.animate span:nth-child(3) { animation-delay: 0.3s; }
  .brand-text.animate span:nth-child(4) { animation-delay: 0.4s; }
  .brand-text.animate span:nth-child(5) { animation-delay: 0.5s; }
  
  /* Animation pour le conteneur de quantité */
  .quantity-container {
    position: relative;
    overflow: hidden;
  }
  
  .quantity-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
      rgba(var(--mdb-primary-rgb), 0) 0%, 
      rgba(var(--mdb-primary-rgb), 0.1) 50%, 
      rgba(var(--mdb-primary-rgb), 0) 100%
    );
    transform: translateX(-100%);
    transition: transform 0.5s ease;
  }
  
  .quantity-container:hover::before {
    transform: translateX(100%);
  }
  
  /* Media Queries */
  @media (max-width: 768px) {
    .container {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    
    h1 {
      font-size: 2rem;
    }
    
    h2 {
      font-size: 1.75rem;
    }
    
    .note-card {
      margin-bottom: 1rem;
    }
  }
  
  /* Animation pour les entrées dans la timeline */
  @keyframes timelineItem {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .timeline-item {
    animation: timelineItem 0.5s ease forwards;
  }
  
  .timeline-item:nth-child(1) { animation-delay: 0.1s; }
  .timeline-item:nth-child(2) { animation-delay: 0.2s; }
  .timeline-item:nth-child(3) { animation-delay: 0.3s; }
  .timeline-item:nth-child(4) { animation-delay: 0.4s; }