/* --- Générale (Adapté de votre CSS) --- */
        html { scroll-behavior: smooth; }
        [id] { scroll-margin-top: 100px; }
        body { 
            margin: 0; padding: 0; background: #fff; color: #33334b; 
            font-family: 'Montserrat', sans-serif; letter-spacing: 1px; line-height: 1.6; overflow-x: hidden; 
        }

        /* --- Menu & Header --- */
        header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: all 0.4s ease; }
        header.scrolled { background-color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        
        .menu { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; transition: background-color 0.4s ease; }
        .logo-nav { height: 60px; width: auto; margin: 10px; }
        
        .menu ul { list-style: none; display: flex; margin: 0; padding: 0; }
        .menu ul li a { color: #33334b; font-weight: 500; padding: 10px 15px; text-decoration: none; font-size: 13px; text-transform: uppercase; }
        
        /* Effet de survol souligné de votre CSS */
        .menu ul li a span { position: relative; padding-bottom: 7px; }
        .menu ul li a span:after { 
            content: ''; position: absolute; left: 0; bottom: 0; 
            transform: translateX(0) scaleX(0); width: 100%; height: 2px; 
            background-color: #33334b; transition: transform 250ms; 
        }
        .menu ul li a:hover span:after { transform: translateX(0) scaleX(1); }

        /* --- Hero Section --- */
        .accueil_premiere { 
            text-align: center; background-color: #fff;
            padding: 140px 20px 60px; display: flex; flex-direction: column; align-items: center;
        }
        h1 { font-size: clamp(28px, 5vw, 48px); font-weight: normal; margin-bottom: 20px; text-transform: uppercase; }
        h3 { color: #33334b; font-size: 14px; font-weight: normal; max-width: 800px; margin-bottom: 20px; }
        #separate { width: 183.05px; border: none; border-top: 1px double #33334b; margin: 20px auto; height: 5px; }

        /* --- Section Réservation --- */
        .booking-section { 
            background-color: #f9f9f9; padding: 80px 20px;
            display: flex; flex-direction: column; align-items: center;
        }
        .section-title { font-size: 22px; font-weight: 400; margin-bottom: 50px; letter-spacing: 2px; text-transform: uppercase; }

        .services-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; max-width: 1200px; width: 100%; }
        
        /* Style des cartes adapté de votre CSS */
        .service-card { 
            background: white; width: 320px; border-radius: 10px; overflow: hidden; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; 
            display: flex; flex-direction: column; 
        }
        .service-card:hover { transform: translateY(-10px); }
        .service-image { height: 319px; background-size: cover; background-position: center; }
        
        .service-content { padding: 30px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; align-items: center; }
        .service-content p { font-size: 14px; line-height: 1.8; color: #666; margin-bottom: 25px; flex-grow: 1; font-weight: 500; }
        
        .btn-booking { 
            font-size: 12px; letter-spacing: 2px; color: #33334b; text-decoration: none; 
            border-bottom: 1px solid #c8917a; padding-bottom: 5px; transition: color 0.3s ease; 
            font-weight: 600; text-transform: uppercase;
        }
        .btn-booking:hover { color: #c8917a; }

        /* --- Animations Reveal --- */
        .reveal { opacity: 0; transform: translateY(50px); transition: all 1s ease-out; }
        .reveal.show { opacity: 1; transform: translateY(0); }

        /* --- Footer --- */
        .footer1 { background-color: #c8917a; color: white; text-align: center; padding: 60px 20px; }
        .footer1 img { margin-bottom: 20px; }
        .social-icons { margin: 20px 0; }
        .social-icons img { margin: 0 10px; transition: 0.3s; width: 35px; }
        .social-icons img:hover { transform: scale(1.1); }

        /* --- Responsive Mobile --- */
        @media (max-width: 768px) {
            h1 { font-size: 28px; }
            .accueil_premiere { padding-top: 100px; }
            
            /* Burger menu logic */
            .menu-burger { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; cursor: pointer; position: absolute; right: 20px; z-index: 1001; }
            .menu-burger span { display: block; width: 100%; height: 3px; background-color: #33334b; border-radius: 3px; transition: 0.3s; }
            
            .menu ul { 
                position: fixed; right: -100%; top: 0; height: 100vh; width: 250px; 
                background-color: white; flex-direction: column; padding-top: 100px; 
                transition: 0.4s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 1000; 
            }
            .menu ul.active { right: 0; }
            .menu ul li { width: 100%; text-align: center; padding: 15px 0; }
            
            .menu-burger.toggle span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
            .menu-burger.toggle span:nth-child(2) { opacity: 0; }
            .menu-burger.toggle span:nth-child(3) { transform: rotate(45deg) translate(-5px, -7px); }
        }

        @media (min-width: 769px) {
            .menu-burger { display: none; }
        }