body {
     font-family: 'Inter', sans-serif;
 }

 /* Petite animation douce pour le logo */
 @keyframes bounce-slow {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 .animate-bounce-slow {
     animation: bounce-slow 4s ease-in-out infinite;
 }

 /* Styles pour les cartes en verre - Adapté pour Vitalis Restaurant */
 .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
 }

 .container .glass {
     position: relative;
     width: 180px;
     height: 200px;
     background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(251, 146, 60, 0.1), rgba(255, 255, 255, 0.1));
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 25px 25px rgba(0, 0, 0, 0.15);
     display: flex;
     justify-content: center;
     align-items: center;
     transition: 0.5s;
     border-radius: 15px;
     margin: 0 -45px;
     backdrop-filter: blur(15px);
     transform: rotate(calc(var(--r) * 1deg));
     cursor: pointer;
 }

 .container:hover .glass {
     transform: rotate(0deg);
     margin: 0 10px;
     box-shadow: 0 35px 35px rgba(0, 0, 0, 0.2);
 }

 .container .glass::before {
     content: attr(data-text);
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 40px;
     background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(251, 146, 60, 0.3));
     display: flex;
     justify-content: center;
     align-items: center;
     color: #262525;
     font-weight: 600;
     font-size: 12px;
     border-radius: 0 0 15px 15px;
     backdrop-filter: blur(10px);
 }

 .container .glass:hover::before {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(251, 146, 60, 0.5));
 }

 .container .glass svg {
     font-size: 2.5em;
     fill: none;
     stroke: #16a34a;
     stroke-width: 2;
     transition: 0.3s;
     filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.3));
 }

 .container .glass:hover svg {
     stroke: #16a34a;
     transform: scale(1.1);
     filter: drop-shadow(0 0 15px rgba(34, 197, 94, 0.5));
 }

 /* Animation d'entrée pour les cartes */
 .container .glass:nth-child(1) {
     animation: slideInLeft 0.8s ease-out;
 }

 .container .glass:nth-child(2) {
     animation: slideInUp 0.8s ease-out 0.2s both;
 }

 .container .glass:nth-child(3) {
     animation: slideInDown 0.8s ease-out 0.4s both;
 }

 .container .glass:nth-child(4) {
     animation: slideInRight 0.8s ease-out 0.6s both;
 }

 @keyframes slideInLeft {
     from {
         transform: translateX(-100px) rotate(calc(var(--r) * 1deg));
         opacity: 0;
     }

     to {
         transform: translateX(0) rotate(calc(var(--r) * 1deg));
         opacity: 1;
     }
 }

 @keyframes slideInUp {
     from {
         transform: translateY(100px) rotate(calc(var(--r) * 1deg));
         opacity: 0;
     }

     to {
         transform: translateY(0) rotate(calc(var(--r) * 1deg));
         opacity: 1;
     }
 }

 @keyframes slideInDown {
     from {
         transform: translateY(-100px) rotate(calc(var(--r) * 1deg));
         opacity: 0;
     }

     to {
         transform: translateY(0) rotate(calc(var(--r) * 1deg));
         opacity: 1;
     }
 }

 @keyframes slideInRight {
     from {
         transform: translateX(100px) rotate(calc(var(--r) * 1deg));
         opacity: 0;
     }

     to {
         transform: translateX(0) rotate(calc(var(--r) * 1deg));
         opacity: 1;
     }
 }

 /* Responsive */
 @media (max-width: 768px) {
     .container .glass {
         width: 140px;
         height: 160px;
         margin: 0 -30px;
     }

     .container .glass svg {
         font-size: 2em;
     }

     .container .glass::before {
         font-size: 12px;
         height: 35px;
     }
 }

.filter-item {
        transition: all 0.3s ease-in-out;
        opacity: 1;
        transform: scale(1);
    }
    .filter-item.hidden {
        display: none;
    }