/* Styles personnalisés pour le plein écran et l'esthétique */
        
        /* Section Carrousel Plein Écran */
        .hero-carousel {
            height: 100vh; /* Hauteur de la fenêtre du navigateur */
            position: relative;
        }

        .carousel-item {
            height: 100vh;
            min-height: 300px;
            background: no-repeat center center scroll;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        /* Overlay pour améliorer la lisibilité du texte */
        .carousel-item::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*background: rgba(0, 0, 0, 0.4); /* Voile noir semi-transparent */
        }

        /* Positionnement du texte du carrousel */
        .carousel-caption {
            z-index: 10;
            bottom: 50%;
            transform: translateY(50%);
            color: #fff;
        }

        .carousel-caption h5 {
            font-size: 3.5rem; /* Grande taille pour le titre */
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .carousel-caption p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
        }

        /* Navigation Barrée */
        .navbar {
            transition: background-color 0.3s ease;
        }

        /* Effet de défilement (Scrollspy/sticky header) */
        .sticky-nav {
            /*background: linear-gradient(#8fb2be, #7a9aa4);*/
            background-color: rgba(33, 37, 41, 0.95) !important; /* Couleur sombre semi-transparente pour le défilement */
        }
        
        /* ------------------------------------------- */
        /* Personnalisation du bouton Toggle Mobile (SANS BORDURE) */
        /* ------------------------------------------- */
        .navbar-toggler {
            /* On retire toutes les bordures par défaut et personnalisées */
            border: none; 
            padding: 0.5rem 0.75rem; 
            background-color: transparent;
            /* Garde les coins arrondis et la couleur d'icône */
            border-radius: 0.5rem; 
            color: #fff; 
            transition: background-color 0.3s ease;
        }

        .navbar-toggler:hover {
            /* Léger survol sans changer la couleur de bordure */
            background-color: rgba(255, 255, 255, 0.1); 
        }
        
        /* Remplacer l'icône hamburger Bootstrap standard par Font Awesome */
        .navbar-toggler-icon {
            display: none; /* Cache l'icône par défaut */
        }

        .navbar-toggler i {
            font-size: 1.25rem; /* Taille de l'icône Font Awesome */
        }


        /* Plats à Découvrir - Style des cartes */
        .dish-card { margin: 10px}
        .dish-card {
            transition: transform 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .dish-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }
        .dish-card .card-body { display: none; }

        /* ------------------------------------------- */
        /* Section Parallax Plage (NOUVEAU) */
        /* ------------------------------------------- */
        .parallax-plage {
            /* Placeholder d'image de plage */
            background-image: url('https://placehold.co/1920x600/ADD8E6/000000?text=Plage+Privée+Parallaxe');
            min-height: 500px; /* Assure une hauteur suffisante pour l'effet */
            background-attachment: fixed; /* L'effet Parallax */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative; /* Pour positionner l'overlay */
        }

        /* Overlay pour rendre le texte lisible sur l'image */
        .parallax-plage::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45); /* Voile sombre semi-transparent */
            z-index: 1;
        }

        /* Positionner le contenu (texte) au-dessus de l'overlay */
        .parallax-plage .container {
            position: relative;
            z-index: 2;
        }



        /* Responsive adjustments */
        @media (max-width: 768px) {
            .carousel-caption h5 {
                font-size: 2rem;
            }
            .carousel-caption p {
                font-size: 1rem;
            }
            .hero-carousel {
                height: 100vh; 
            }
            .carousel-item {
                height: 100vh; 
            }
            .parallax-plage {
                background-attachment: scroll;
            }

        }