* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --primary-color: #1e40af;
     --secondary-color: #3b82f6;
     --accent-red: #ef4444;
     --success-color: #10b981;
     --warning-color: #f59e0b;
     --text-dark: #1f2937;
     --text-light: #6b7280;
     --bg-light: #f8fafc;
     --light-gray: #f8fafc;
     --white: #ffffff;
     --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     --gradient-hero: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #1e40af 100%);
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }



 /* Footer */
 .footer {
     background: #1f2937;
     color: white;
     padding: 4rem 2rem 2rem;
 }

 .footer-content {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
 }

 .footer-section h3 {
     margin-bottom: 1rem;
     color: white;
 }

 .footer-section p,
 .footer-section a {
     color: #9ca3af;
     text-decoration: none;
     line-height: 1.8;
 }

 .footer-section a:hover {
     color: white;
 }

 .social-links {
     display: flex;
     gap: 1rem;
     margin-top: 1rem;
 }

 .social-links a {
     width: 40px;
     height: 40px;
     background: #374151;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.3s ease;
 }

 .social-links a:hover {
     background: var(--primary-color);
 }

 .footer-bottom {
     border-top: 1px solid #374151;
     margin-top: 2rem;
     padding-top: 2rem;
     text-align: center;
     color: #9ca3af;
 }

 /* Bouton WhatsApp flottant */
 .whatsapp-float {
     position: fixed;
     bottom: 20px;
     right: 20px;
     background-color: #25d366;
     color: #fff;
     border-radius: 50%;
     text-align: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     text-decoration: none;
 }

 /* Animation pulse */
 .whatsapp-float::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 50%;
     background-color: #25d366;
     animation: pulse 2s infinite;
     z-index: -1;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.2);
         opacity: 0.5;
     }

     100% {
         transform: scale(1.4);
         opacity: 0;
     }
 }

 /* Effet hover - expansion */
 .whatsapp-float:hover {
     transform: scale(1.15);
     box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5);
     border-radius: 30px;
     width: 200px;
     justify-content: flex-start;
     padding-left: 15px;
 }

 /* Arrêter toutes les animations au hover */
 .whatsapp-float:hover::before {
     animation: none;
     opacity: 0;
 }

 .whatsapp-float:hover .whatsapp-badge {
     animation: none;
 }

 .whatsapp-float:hover .whatsapp-icon {
     margin-right: 10px;
 }

 .whatsapp-float:hover .whatsapp-text {
     opacity: 1;
     max-width: 150px;
     margin-left: 5px;
 }

 /* Effet click/active */
 .whatsapp-float:active {
     transform: scale(0.95);
 }

 .whatsapp-icon {
     width: 35px;
     height: 35px;
     transition: all 0.3s ease;
     flex-shrink: 0;
 }

 .whatsapp-text {
     opacity: 0;
     max-width: 0;
     overflow: hidden;
     white-space: nowrap;
     font-weight: 600;
     font-size: 14px;
     transition: all 0.3s ease;
     color: #fff;
 }

 /* Badge de notification (optionnel) */
 .whatsapp-badge {
     position: absolute;
     top: -5px;
     right: -5px;
     background-color: #ff4444;
     color: white;
     border-radius: 50%;
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     font-weight: bold;
     border: 2px solid white;
     animation: bounce 2s infinite;
 }

 @keyframes bounce {

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

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

 /* Tooltip bubble style chatbot */
 .whatsapp-tooltip {
     position: fixed;
     bottom: 90px;
     right: 20px;
     background-color: white;
     color: #333;
     padding: 15px 20px;
     border-radius: 15px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     max-width: 250px;
     opacity: 0;
     transform: translateY(10px);
     transition: all 0.3s ease;
     pointer-events: none;
     z-index: 999;
 }

 .whatsapp-tooltip::after {
     content: '';
     position: absolute;
     bottom: -8px;
     right: 25px;
     width: 0;
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-top: 8px solid white;
 }

 .whatsapp-tooltip.show {
     opacity: 1;
     transform: translateY(0);
 }

 .whatsapp-tooltip h4 {
     margin: 0 0 8px 0;
     font-size: 14px;
     font-weight: 600;
     color: #25d366;
 }

 .whatsapp-tooltip p {
     margin: 0;
     font-size: 13px;
     line-height: 1.4;
     color: #666;
 }

 /* Version mobile */
 @media (max-width: 768px) {
     .whatsapp-float {
         bottom: 15px;
         right: 15px;
         width: 55px;
         height: 55px;
     }

     .whatsapp-float:hover {
         width: 180px;
     }

     .whatsapp-tooltip {
         max-width: 200px;
         right: 15px;
         bottom: 80px;
     }
 }