/* ===============================================
   RESTAURANT LA BAIE D'HALONG - STYLES CSS
   Fichier CSS principal pour le site web
   =============================================== */

/* ========== 1. RESET CSS ========== */
/* Remet à zéro les marges et paddings par défaut des navigateurs */
* {
    margin: 0;                    /* Supprime les marges par défaut */
    padding: 0;                   /* Supprime les paddings par défaut */
    box-sizing: border-box;       /* Inclut les bordures dans la taille des éléments */
}

/* Configuration de base du body */
body {
    font-family: 'Noto Sans', sans-serif;  /* Police vietnamienne/asiatique moderne */
    line-height: 1.6;                      /* Hauteur de ligne pour une meilleure lisibilité */
    color: #333;                           /* Couleur de texte principale (gris foncé) */
}

/* ========== 2. NAVIGATION BAR ========== */

/* Container principal de la navbar - Position fixe en haut */
.navbar {
    background: rgba(139, 0, 0, 0.95);          /* Rouge foncé chinois avec transparence */
    backdrop-filter: blur(10px);                /* Effet de flou d'arrière-plan moderne */
    position: fixed;                            /* Reste collée en haut lors du scroll */
    top: 20px;                                  /* 20px d'espace depuis le haut de la page */
    width: calc(100% - 80px);                   /* Largeur = 100% - 80px (40px de chaque côté) */
    margin: 0 40px;                             /* Marges de 40px à gauche et droite */
    z-index: 1000;                              /* S'affiche au-dessus des autres éléments */
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);    /* Ombre portée légèrement renforcée */
    border-radius: 10px;                        /* Coins arrondis */
    border: 1px solid rgba(255, 215, 0, 0.2);   /* Bordure or subtile */
    overflow: visible;                          /* Permet au menu mobile de dépasser */
    transition: all 0.3s ease;                 /* Animation fluide pour tous les changements */
}

/* Container interne qui centre le contenu de la navbar */
.nav-container {
    max-width: 1200px;                         /* Largeur maximum du contenu */
    margin: auto;                              /* Centre horizontalement */
    display: flex;                             /* Utilise flexbox pour l'alignement */
    justify-content: space-between;            /* Logo à gauche, menu à droite */
    align-items: center;                       /* Centre verticalement */
    padding: 0 20px;                          /* Espacement interne de 20px */
}

/* Style du logo */
.logo {
    text-decoration: none;                     /* Supprime le soulignement du lien */
    display: flex;                             /* Flexbox pour centrer l'image */
    align-items: center;                       /* Centre verticalement */
    padding: 0;                          /* Espacement vertical */
    transition: all 0.3s ease;               /* Animation fluide au survol */
}

.logo img {
    height: 70px;                             /* Hauteur du logo agrandie */
    width: 180px;                             /* Largeur élargie */
    max-width: 300px;                         /* Largeur maximum encore plus grande */
    object-fit: contain;                      /* Garde les proportions */
}

/* Effet au survol du logo */
.logo:hover {
    transform: scale(1.05);                    /* Agrandit légèrement (5%) */
}

.logo:hover img {
    opacity: 0.9;                             /* Légère transparence de l'image */
}

/* Liste du menu de navigation */
.nav-menu {
    display: flex;                            /* Affiche les éléments en ligne */
    list-style: none;                         /* Supprime les puces de liste */
    gap: 0;                                   /* Pas d'espace entre les éléments */
    margin: 0;                                /* Supprime les marges */
    padding: 0;                               /* Supprime les paddings */
}

/* Style des liens du menu */
.nav-menu a {
    color: white;                                           /* Couleur de texte blanche */
    text-decoration: none;                                  /* Supprime le soulignement */
    padding: 12px 20px;                                     /* Espacement interne cliquable */
    display: block;                                         /* Affichage en bloc pour le padding */
    font-weight: 500;                                       /* Épaisseur de police moyenne */
    font-size: 0.75rem;                                     /* Taille de police légèrement agrandie */
    text-transform: uppercase;                              /* Transforme en majuscules */
    letter-spacing: 1px;                                    /* Espacement entre les lettres plus prononcé */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Animation personnalisée */
    border: 2px solid #ffd700;                              /* Bordure or chinois - prospérité */
    border-radius: 25px;                                    /* Coins très arrondis */
    margin: 5px;                                            /* Espacement entre les boutons */
    background: transparent;                                /* Fond transparent par défaut */
    position: relative;                                     /* Position relative pour l'effet ::before */
    overflow: hidden;                                       /* Cache l'effet de remplissage */
}

/* Effet de remplissage - Couche invisible qui se déplace au survol */
.nav-menu a::before {
    content: '';                                           /* Contenu vide (requis) */
    position: absolute;                                    /* Position absolue dans le lien */
    top: 0;                                               /* Collé en haut */
    left: -100%;                                          /* Caché à gauche au début */
    width: 100%;                                          /* Largeur complète */
    height: 100%;                                         /* Hauteur complète */
    background: #ffd700;                                  /* Couleur de fond or chinois */
    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Animation de glissement */
    z-index: -1;                                          /* Derrière le texte */
}

/* Au survol, l'effet de remplissage glisse vers la droite */
.nav-menu a:hover::before {
    left: 0;                                              /* Se positionne à sa place */
}

/* Autres effets au survol des liens */
.nav-menu a:hover {
    color: white;                                         /* Garde la couleur blanche */
    transform: translateY(-3px) scale(1.05);              /* Monte et grandit légèrement */
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);       /* Ombre or chinois */
}

/* ========== 3. SECTION HERO (ACCUEIL) ========== */

/* Container externe qui fournit le fond rouge chinois derrière la navbar */
.hero-start {
    background-color: #c52b2b;                            /* Fond rouge chinois vif - bonheur */
    width: 100%;                                          /* Largeur complète */
    position: relative;                                   /* Position relative */
    top: 0;                                              /* Collé en haut */
    padding-top: 80px;                                   /* Espace pour la navbar fixe */
}



/* Section hero principale avec image de fond */
.hero {
    height: 80vh;                                        /* 80% de la hauteur de l'écran */
    background-color: #c52b2b;                           /* Couleur de fond rouge chinois (fallback) */
    background-image: linear-gradient(                    /* Dégradé sombre par-dessus l'image */
        rgba(0,0,0,0.4),                                 /* Noir semi-transparent en haut */
        rgba(0,0,0,0.6)                                  /* Noir plus opaque en bas */
    ), url('https://images.unsplash.com/photo-1528127269322-539801943592?q=80&w=1200'); /* Image de fond */
    background-position: center;                          /* Centre l'image */
    background-size: cover;                              /* Couvre toute la zone */
    display: flex;                                       /* Utilise flexbox */
    align-items: center;                                 /* Centre verticalement */
    justify-content: center;                             /* Centre horizontalement */
    text-align: center;                                  /* Centre le texte */
    color: white;                                        /* Couleur de texte blanche */
    margin-top: 0;                                       /* Pas de marge en haut */
    margin-bottom: -80px;                               /* Marge négative réduite pour éviter les chevauchements */
    border-radius: 50px;                                 /* Coins arrondis */
    position: relative;                                  /* Position relative */
    z-index: 2;                                          /* Au-dessus de la section cards */
    margin-left: 20px;                                   /* Marge gauche pour alignement */
    margin-right: 20px;                                  /* Marge droite pour alignement */
}



/* Titre principal du hero */

/* Logo du hero positionné en bas à gauche */
.hero-logo {
    position: absolute;                                 /* Position absolue pour placement libre */
    bottom: 30px;                                       /* 30px du bas */
    left: 30px;                                        /* 30px de la gauche */
    height: 200px;                                     /* Hauteur du logo */
    width: auto;                                       /* Largeur automatique */
    max-width: 250px;                                  /* Largeur maximum */
    object-fit: contain;                               /* Garde les proportions */
    z-index: 10;                                       /* Au-dessus de l'image de fond */
    opacity: 0.9;                                      /* Visible */
}
.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin-bottom: 2rem;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    color: white;
    position: relative;
}

.hero-content h1::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: white;
    border-radius: 2px;
}

/* Paragraphe du hero */
.hero-content p {
    font-size: 1.3rem;                                   /* Taille de police moyenne */
    margin-bottom: 2rem;                                 /* Espacement en bas */
    max-width: 800px;                                    /* Largeur maximum pour la lisibilité */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);          /* Ombre du texte */
}

/* ========== 4. SECTION CARDS ========== */

/* Section qui contient les cartes - Se superpose avec le hero */
.cards-section {
    background: #dc143c;                                 /* Fond rouge chinois */
    padding: 160px 20px 60px;                           /* Padding-top ajusté pour éviter la superposition */
    position: relative;                                  /* Position relative */
    z-index: 1;                                          /* Derrière le hero */
    border-radius: 0px 0px 50px 50px;                    /* Coins arrondis en bas */
}

/* Container des cartes avec animation au scroll */
.cards-container {
    max-width: 1000px;                                   /* Largeur maximum */
    margin: 0 auto;                                      /* Centre horizontalement */
    gap: 40px;                                          /* Espacement entre les cartes */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);           /* Ombre portée douce */
    border-radius: 50px;                                 /* Coins arrondis */
    background-color: #8b0000;                          /* Fond rouge foncé chinois */
    transform: translateY(50px);                         /* Décalé vers le bas au début */
    opacity: 0;                                         /* Invisible au début */
    transition: all 0.8s ease-out;                     /* Animation fluide */
    position: relative;                                  /* Position relative */
    overflow: hidden;                                   /* Cache les débordements */
}

/* État animé du container (ajouté par JavaScript) */
.cards-container.animate {
    opacity: 1;                                         /* Devient visible */
    transform: translateY(0) rotateX(0deg);             /* Revient à sa position normale */
}

/* Effet au survol du container */
.cards-container:hover {
    transform: translateY(-10px) scale(1.02);           /* Monte et grandit légèrement */
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);           /* Ombre plus prononcée */
}


/* ========== 5. CARTES INDIVIDUELLES ========== */

/* Style de base des cartes */
.card {
    text-align: center;                                 /* Texte centré */
    color: white;                                       /* Couleur de texte blanche */
    padding: 20px;                                      /* Espacement interne */
    opacity: 0;                                        /* Invisible au début */
    transform: translateY(30px);                       /* Décalé vers le bas */
    transition: all 0.6s ease-out;                    /* Animation fluide */
}

/* État animé des cartes (ajouté par JavaScript) */
.card.animate {
    opacity: 1;                                        /* Devient visible */
    transform: translateY(0) scale(1);                 /* Position et taille normales */
}

/* Effet au survol des cartes */
.card:hover {
    transform: translateY(-5px) scale(1.05);           /* Monte et grandit légèrement */
}

/* Titre des cartes */
.card h2 {
    font-family: 'Playfair Display', serif;           /* Police élégante pour les titres */
    font-size: 2.5rem;                                 /* Grande taille de police */
    margin-bottom: 1.5rem;                             /* Espacement en bas */
    font-weight: 600;                                  /* Texte semi-gras */
}

/* Paragraphe des cartes */
.card p {
    font-size: 1.1rem;                                 /* Taille de police légèrement agrandie */
    margin-bottom: 2rem;                               /* Espacement en bas */
    line-height: 1.6;                                  /* Hauteur de ligne pour la lisibilité */
    opacity: 0.9;                                      /* Légère transparence */
}

/* ========== 6. BOUTONS ========== */

/* Style des boutons des cartes */
.btn-card {
    background: #ffd700;                               /* Fond or chinois - richesse */
    color: #8b0000;                                    /* Couleur de texte rouge foncé */
    padding: 18px 40px;                               /* Espacement interne généreux */
    text-decoration: none;                            /* Supprime le soulignement */
    border-radius: 50px;                              /* Coins très arrondis */
    font-weight: 600;                                 /* Texte semi-gras */
    font-size: 1.1rem;                                /* Taille de police légèrement agrandie */
    transition: all 0.3s ease;                       /* Animation fluide */
    display: inline-block;                            /* Affichage en bloc inline */
}

/* Effet au survol des boutons */
.btn-card:hover {
    background: #ffed4a;                              /* Or plus clair au survol */
    transform: translateY(-3px);                      /* Monte légèrement */
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);          /* Ombre portée */
}

/* ========== 6. MENU HAMBURGER ========== */

/* Menu hamburger - masqué par défaut sur desktop */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: #ffd700;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* ========== 7. RESPONSIVE DESIGN ========== */

/* Tablettes (768px et moins) */
@media screen and (max-width: 768px) {
    /* Navigation mobile */
    .navbar {
        width: calc(100% - 40px);
        margin: 0 20px;
        overflow: visible;
    }
    
    .nav-container {
        padding: 15px;
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        overflow: visible;
    }
    
    /* Afficher le hamburger sur mobile */
    .hamburger {
        display: flex;
        position: relative;
        right: 0;
    }
    
    /* Menu mobile compact et centré */
    .nav-menu {
        position: absolute;
        top: -1000px;
        left: 50%;
        transform: translateX(-50%);
        width: 280px;
        background: rgba(139, 0, 0, 0.95);
        flex-direction: column;
        text-align: center;
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        transition: top 0.3s ease;
        padding: 15px;
        z-index: 999;
        list-style: none;
        backdrop-filter: blur(10px);
    }
    
    /* Menu mobile actif */
    .nav-menu.active {
        top: 100%;
    }
    
    .nav-menu li {
        margin: 5px 0;
    }
    
    .nav-menu a {
        font-size: 0.9rem;
        padding: 12px 20px;
        margin: 2px 0;
        display: block;
        border-radius: 20px;
        border: 1.5px solid #ffd700;
        transition: all 0.2s ease;
        font-weight: 500;
    }
    
    .nav-menu a:hover {
        background: #ffd700;
        color: #8b0000;
        transform: translateY(-1px);
    }
    
    .logo img {
        height: 55px;                                 /* Logo plus grand sur tablette */
        width: 140px;                                 /* Largeur élargie sur tablette */
        max-width: 220px;                             /* Largeur maximum agrandie */
    }
    
    /* Hero section mobile */
    .hero-start {
        padding-top: 90px;                            /* Réduit l'espace pour mobile */
    }
    
    .hero {
        height: 60vh;                                 /* Hauteur réduite */
        margin-left: 10px;                            /* Marges réduites */
        margin-right: 10px;
        margin-bottom: -40px;                         /* Superposition moins agressive */
    }
    
    .hero-content h1 {
        font-size: 2.5rem;                            /* Titre plus petit */
        margin-top: 1rem;                             /* Espace en haut pour éviter le chevauchement */
        margin-bottom: 1.5rem;                        /* Plus d'espace sous le titre */
    }
    
    .hero-content p {
        font-size: 1.1rem;                            /* Texte plus petit */
        max-width: 100%;                              /* Utilise toute la largeur */
    }
    
    /* Cards section mobile */
    .cards-section {
        padding: 80px 15px 40px;                     /* Padding réduit pour éviter chevauchement */
    }
    
    /* Logo hero sur tablette */
    .hero-logo {
        height: 80px;                                 /* Logo plus petit sur tablette */
        bottom: 20px;                                 /* Plus près du bord */
        left: 20px;                                   /* Plus près du bord */
        max-width: 180px;                             /* Largeur réduite */
    }
    
    .card h2 {
        font-size: 2rem;                              /* Titre plus petit */
    }
    
    .card p {
        font-size: 1rem;                              /* Texte plus petit */
    }
}

/* Smartphones (480px et moins) */
@media screen and (max-width: 480px) {
    /* Navigation très petite */
    .navbar {
        width: calc(100% - 20px);
        margin: 0 10px;
        top: 10px;
    }
    
    .nav-container {
        padding: 10px;
    }
    
    .nav-menu {
        position: absolute;
        top: -1000px;
        left: 50%;
        transform: translateX(-50%);
        width: 250px;
        background: rgba(139, 0, 0, 0.95);
        flex-direction: column;
        text-align: center;
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        transition: top 0.3s ease;
        padding: 12px;
        z-index: 999;
        list-style: none;
        backdrop-filter: blur(10px);
    }
    
    .nav-menu.active {
        top: 100%;
    }
    
    .nav-menu li {
        margin: 4px 0;
    }
    
    .nav-menu a {
        font-size: 0.85rem;
        padding: 10px 16px;
        margin: 1px 0;
        display: block;
        border-radius: 18px;
        border: 1.5px solid #ffd700;
        transition: all 0.2s ease;
        font-weight: 500;
    }
    
    .nav-menu a:hover {
        background: #ffd700;
        color: #8b0000;
        transform: translateY(-1px);
    }
    
    .logo img {
        height: 45px;                                 /* Logo plus visible sur mobile */
        width: 100px;                                 /* Largeur élargie sur mobile */
        max-width: 180px;                             /* Largeur maximum agrandie */
    }
    
    /* Hero très compact */
    .hero-start {
        padding-top: 70px;                            /* Encore moins d'espace sur très petits écrans */
    }
    
    .hero {
        height: 50vh;                                 /* Hauteur très réduite */
        margin-left: 5px;                             /* Marges minimales */
        margin-right: 5px;
        border-radius: 25px;                          /* Coins moins arrondis */
    }
    
    .hero-content h1 {
        font-size: 2rem;                              /* Titre compact */
        margin-top: 1rem;                             /* Espace en haut pour éviter le chevauchement */
        margin-bottom: 1.2rem;                        /* Plus d'espace sous le titre */
    }
    
    .hero-content p {
        font-size: 1rem;                              /* Texte compact */
        margin-bottom: 1rem;                          /* Moins d'espace */
    }
    
    /* Cards très compactes */
    .cards-section {
        padding: 80px 10px 30px;                     /* Padding réduit pour éviter chevauchement */
    }
    
    /* Logo hero sur mobile */
    .hero-logo {
        height: 60px;                                 /* Logo très compact sur mobile */
        bottom: 15px;                                 /* Très près du bord */
        left: 15px;                                   /* Très près du bord */
        max-width: 140px;                             /* Largeur très réduite */
    }
    
    .cards-container {
        border-radius: 25px;                          /* Coins moins arrondis */
    }
    
    .card {
        padding: 15px;                                /* Padding réduit */
    }
    
    .card h2 {
        font-size: 1.8rem;                            /* Titre compact */
        margin-bottom: 1rem;                          /* Moins d'espace */
    }
    
    .card p {
        font-size: 0.95rem;                           /* Texte compact */
        margin-bottom: 1.5rem;                        /* Moins d'espace */
    }
    
    .btn-card {
        padding: 15px 30px;                           /* Bouton plus petit */
        font-size: 1rem;                              /* Police plus petite */
    }
}


/* Styles généraux pour les sections */
.section {
    padding: 80px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: #8b0000;
    position: relative;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.section h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #dc143c, #ffd700, #dc143c);
    border-radius: 2px;
}

/* Section Présentation */
.presentation {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
    position: relative;
    overflow: hidden;
}

.presentation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 15% 50%, rgba(220, 20, 60, 0.03) 0%, transparent 60%),
        radial-gradient(circle at 85% 30%, rgba(255, 215, 0, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.presentation .container {
    position: relative;
    z-index: 2;
}

.presentation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Animation du texte - vient de la gauche */
.presentation-text {
    opacity: 0;                                        /* Invisible au début */
    transform: translateX(-100px);                     /* Décalé vers la gauche */
    transition: all 0.8s ease-out;                    /* Animation fluide */
}

.presentation-text.animate {
    opacity: 1;                                        /* Devient visible */
    transform: translateX(0);                          /* Revient à sa position normale */
}

.presentation-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #666;
}

/* Animation de l'image - vient de la droite */
.presentation-image {
    opacity: 0;                                        /* Invisible au début */
    transform: translateX(100px);                      /* Décalé vers la droite */
    transition: all 0.8s ease-out 0.2s;              /* Animation fluide avec délai */
}

.presentation-image.animate {
    opacity: 1;                                        /* Devient visible */
    transform: translateX(0);                          /* Revient à sa position normale */
}

.presentation-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Section Restaurant */
.restaurant-section {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.restaurant-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
    pointer-events: none;
}

.restaurant-section .container {
    position: relative;
    z-index: 2;
}

.restaurant-section h2 {
    color: #ffd700;
    font-family: 'Playfair Display', serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 1rem;
}

.restaurant-section p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 3rem;
}

/* Galerie restaurant - Approche Flexbox simple */
.restaurant-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    justify-content: center;
}

.gallery-item {
    flex: 1 1 300px;
    min-width: 280px;
    max-width: 400px;
    height: 250px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: all 0.4s ease;
}

.gallery-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(255, 215, 0, 0.4);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    padding: 30px 20px 20px;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #ffd700;
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.gallery-overlay p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.4;
}

/* Responsive pour la galerie restaurant */
@media (max-width: 768px) {
    .restaurant-gallery {
        gap: 15px;
        padding: 0 15px;
    }
    
    .gallery-item {
        flex: 1 1 250px;
        min-width: 250px;
        height: 220px;
    }
    
    .gallery-overlay {
        padding: 20px 15px 15px;
    }
    
    .gallery-overlay h3 {
        font-size: 1.2rem;
    }
    
    .gallery-overlay p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .restaurant-gallery {
        gap: 10px;
        padding: 0 10px;
    }
    
    .gallery-item {
        flex: 1 1 100%;
        min-width: 200px;
        height: 200px;
    }
    
    .gallery-overlay {
        padding: 15px 12px 12px;
    }
    
    .gallery-overlay h3 {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }
    
    .gallery-overlay p {
        font-size: 0.8rem;
    }
}

/* Section avis */
.avis-section {
    background: #f8f9fa;
    padding: 80px 0;
    position: relative;
}

.avis-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(220, 20, 60, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.avis-section .container {
    position: relative;
    z-index: 2;
}

.avis-section h2 {
    color: #8b0000;
    font-family: 'Playfair Display', serif;
    position: relative;
}

.avis-section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #dc143c, #ffd700);
    border-radius: 2px;
}

.avis-content {
    max-width: 1000px;
    margin: 0 auto;
}

/* En-tête avec note globale */
.avis-header-global {
    text-align: center;
    margin-bottom: 3rem;
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.global-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rating-number {
    font-size: 3rem;
    font-weight: bold;
    color: #dc143c;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.stars-large {
    font-size: 1.5rem;
    margin: 5px 0;
}

.global-rating p {
    color: #666;
    margin: 0;
}

/* Grille des avis */
.avis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 25px;
    margin-bottom: 3rem;
}

/* Avis individuels */
.avis-item {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avis-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Meta informations de l'avis */
.avis-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.avis-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Avatar avec initiales */
.author-avatar {
    width: 45px;
    height: 45px;
    background: linear-gradient(45deg, #dc143c, #8b0000);
    color: #ffd700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 3px 10px rgba(220, 20, 60, 0.3);
}

.avis-author span {
    font-weight: 600;
    color: #333;
}

.avis-rating {
    font-size: 1.1rem;
}

.avis-date {
    color: #999;
    font-size: 0.9rem;
}

.avis-text {
    color: #555;
    line-height: 1.7;
    font-style: italic;
    margin: 0;
}

/* Bouton Google */
.avis-footer {
    text-align: center;
}

.btn-google-avis {
    background: #4285f4;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-google-avis:before {
    content: "🔍";
}

.btn-google-avis:hover {
    background: #3367d6;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(66, 133, 244, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .avis-grid {
        grid-template-columns: 1fr;
    }
    
    .avis-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Widget Google Maps */
.google-reviews-widget {
    margin-top: 4rem;
    text-align: center;
}

.google-reviews-widget h3 {
    color: #8b0000;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 2rem;
    position: relative;
}

.google-reviews-widget h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ffd700, #dc143c);
    border-radius: 2px;
}

.google-reviews-widget iframe {
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.google-reviews-widget iframe:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(220, 20, 60, 0.2);
}

/* Animations d'apparition */
.section.animate {
    opacity: 1;
    transform: translateY(0);
}

.section {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

/* Animation des cartes d'avis */
.avis-item {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s ease-out;
}

.avis-item.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.avis-item:nth-child(1) { transition-delay: 0.1s; }
.avis-item:nth-child(2) { transition-delay: 0.2s; }
.avis-item:nth-child(3) { transition-delay: 0.3s; }
.avis-item:nth-child(4) { transition-delay: 0.4s; }

/* Footer */
.footer {
    background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #1a1a1a 100%);
    color: white;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

/* Effet décoratif d'arrière-plan */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(220, 20, 60, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Contenu principal du footer */
.footer .footer-container:first-child {
    padding: 60px 20px 40px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Logo et marque */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.footer-logo-img {
    width: 120px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 5px 20px rgba(220, 20, 60, 0.3));
    transition: transform 0.3s ease;
}

.footer-logo-img:hover {
    transform: scale(1.1) rotate(2deg);
}

.footer-logo h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0;
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.footer-description {
    color: #ccc;
    font-size: 0.9rem;
    font-style: italic;
    margin: 0;
    line-height: 1.4;
}


/* Colonnes du footer */
.footer-column h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffd700;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #dc143c, #ffd700);
    border-radius: 1px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 12px;
}

.footer-column a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    line-height: 1.5;
    position: relative;
    padding-left: 0;
}

.footer-column a::before {
    content: '▶';
    position: absolute;
    left: -15px;
    color: #dc143c;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.footer-column a:hover {
    color: #ffd700;
    padding-left: 20px;
}

.footer-column a:hover::before {
    opacity: 1;
}

/* Informations de contact */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-item .icon {
    font-size: 1.2rem;
    min-width: 25px;
    color: #ffd700;
}

.contact-item div,
.contact-item p {
    margin: 0;
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Horaires */
.hours-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hours-day {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding: 8px 0;
    border-bottom: 1px solid #333;
}

.hours-day span:first-child {
    font-weight: 600;
    color: #ffd700;
    min-width: 80px;
}

.hours-day span:last-child {
    text-align: right;
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.3;
}

.hours-day.closed {
    opacity: 0.6;
}

.hours-day.closed span:last-child {
    color: #999;
    font-style: italic;
}

.hours-note {
    margin-top: 10px;
    padding: 10px 15px;
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.1), rgba(255, 215, 0, 0.05));
    border-radius: 8px;
    border-left: 3px solid #ffd700;
}

.hours-note p {
    margin: 0;
    font-size: 0.85rem;
    color: #ffd700;
    font-weight: 500;
}

/* Bas du footer */
.footer-bottom {
    border-top: 1px solid #444;
    padding: 25px 0;
    background: rgba(0,0,0,0.2);
}

.footer-bottom .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom p {
    margin: 0;
    color: #aaa;
    font-size: 0.9rem;
}

.footer-legal {
    display: flex;
    gap: 30px;
}

.footer-legal a {
    color: #aaa;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    position: relative;
}

.footer-legal a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #ffd700;
    transition: width 0.3s ease;
}

.footer-legal a:hover {
    color: #ffd700;
}

.footer-legal a:hover::after {
    width: 100%;
}

/* Responsive */
@media (max-width: 1024px) {
    .footer .footer-container:first-child {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .footer .footer-container:first-child {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: left;
    }
    
    .footer-brand {
        text-align: center;
        grid-column: auto;
    }
    
    .footer-logo {
        align-items: center;
    }
    
    .footer-bottom .footer-container {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-legal {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .hours-day {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    
    .hours-day span:first-child,
    .hours-day span:last-child {
        text-align: center;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .footer {
        margin-top: 60px;
    }
    
    .footer .footer-container:first-child {
        padding: 40px 20px 30px;
        gap: 30px;
    }
    
    .footer-logo-img {
        width: 100px;
        height: 60px;
    }
    
    .footer-logo h3 {
        font-size: 1.5rem;
    }
    
    
    .contact-item {
        gap: 8px;
    }
    
    .hours-note {
        padding: 8px 12px;
    }
}

/* Animations supplémentaires */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 30px rgba(220, 20, 60, 0.3); }
}

/* Animation au survol pour les éléments interactifs */
.btn-card:hover {
    animation: pulse 0.6s ease-in-out;
}

.author-avatar:hover {
    animation: glow 1s ease-in-out infinite;
}

/* Animation de fondu pour les titres */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section h2.animate {
    animation: fadeInUp 0.8s ease-out;
}

/* Animation de rotation subtile pour les éléments décoratifs */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========== STYLES POUR LA PAGE LÉGALE ========== */

/* Page légale principale */
.legal-page {
    padding-top: 120px;
    min-height: 100vh;
    background: #f8f9fa;
}

/* Hero section simple pour la page légale */
.legal-hero {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: white;
    padding: 80px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
    pointer-events: none;
}

.legal-hero .container {
    position: relative;
    z-index: 2;
}

.legal-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.legal-hero p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
}

/* Navigation par onglets */
.legal-nav {
    background: white;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 110px;
    z-index: 100;
}

.legal-tabs {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
}

.legal-tab {
    flex: 1;
    padding: 20px 30px;
    text-decoration: none;
    color: #666;
    font-weight: 500;
    text-align: center;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 200px;
}

.legal-tab:hover {
    color: #dc143c;
    background: rgba(220, 20, 60, 0.05);
}

.legal-tab.active {
    color: #dc143c;
    border-bottom-color: #ffd700;
    background: rgba(220, 20, 60, 0.05);
}

/* Contenu des sections légales */
.legal-content {
    padding: 60px 0;
}

.legal-section {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-bottom: 40px;
    display: none;
}

.legal-section:first-child {
    display: block;
}

.legal-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #8b0000;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
}

.legal-section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #dc143c, #ffd700);
    border-radius: 2px;
}

.legal-section h3 {
    font-size: 1.3rem;
    color: #dc143c;
    margin: 2rem 0 1rem 0;
    font-weight: 600;
}

.legal-section p {
    line-height: 1.7;
    margin-bottom: 1rem;
    color: #555;
}

.legal-section ul {
    margin: 1rem 0 1rem 2rem;
    color: #555;
}

.legal-section li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.legal-section strong {
    color: #8b0000;
}

/* Responsive pour la page légale */
@media (max-width: 768px) {
    .legal-page {
        padding-top: 140px;
    }
    
    .legal-hero {
        padding: 60px 0 40px;
    }
    
    .legal-hero h1 {
        font-size: 2.2rem;
    }
    
    .legal-hero p {
        font-size: 1.1rem;
    }
    
    .legal-nav {
        top: 130px;
    }
    
    .legal-tabs {
        flex-direction: column;
    }
    
    .legal-tab {
        border-bottom: 1px solid #eee;
        border-right: none;
        min-width: auto;
    }
    
    .legal-tab.active {
        border-bottom-color: #ffd700;
        border-left: 3px solid #ffd700;
    }
    
    .legal-section {
        padding: 30px 20px;
        margin-bottom: 30px;
    }
    
    .legal-section h2 {
        font-size: 2rem;
    }
    
    .legal-section h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .legal-page {
        padding-top: 120px;
    }
    
    .legal-hero h1 {
        font-size: 1.8rem;
    }
    
    .legal-hero p {
        font-size: 1rem;
    }
    
    .legal-nav {
        top: 110px;
    }
    
    .legal-tab {
        padding: 15px 20px;
        font-size: 0.9rem;
    }
    
    .legal-section {
        padding: 25px 15px;
    }
    
    .legal-section h2 {
        font-size: 1.8rem;
    }
}

/* ========== STYLES POUR LA PAGE CARTE ========== */

/* Page carte principale */
.carte-page {
    padding-top: 120px;
    min-height: 100vh;
    background: #f8f9fa;
}

/* Hero section de la carte */
.carte-hero {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: white;
    padding: 80px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.carte-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
    pointer-events: none;
}

.carte-hero .container {
    position: relative;
    z-index: 2;
}

.carte-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.carte-hero p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 800px;
    margin: 0 auto;
}

/* Navigation par sections de la carte */
.carte-nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: sticky;
    top: 110px;
    z-index: 100;
    border-radius: 0 0 15px 15px;
}

.carte-tabs {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 5px;
    padding: 0 10px;
}

.carte-tabs::-webkit-scrollbar {
    display: none;
}

.carte-tab {
    padding: 8px 12px;
    text-decoration: none;
    color: #666;
    font-weight: 500;
    text-align: center;
    border-radius: 20px;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: auto;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #eee;
}

.carte-tab:hover {
    color: #dc143c;
    background: rgba(220, 20, 60, 0.1);
    border-color: #dc143c;
    transform: translateY(-1px);
}

.carte-tab.active {
    color: white;
    background: #dc143c;
    border-color: #dc143c;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3);
}

/* Contenu principal de la carte */
.carte-content {
    padding: 60px 0;
}

/* Sections de la carte */
.carte-section {
    background: white;
    margin-bottom: 60px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

.carte-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: white;
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    margin: 0;
    padding: 40px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    position: relative;
}

.carte-section h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
    pointer-events: none;
}

.section-subtitle {
    text-align: center;
    color: #666;
    font-style: italic;
    margin: -20px 40px 40px;
    padding: 15px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    font-size: 1.1rem;
}

/* Styles pour les formules */
.formules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    padding: 40px;
}

.formule-card {
    background: #f8f9fa;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.formule-card:hover {
    transform: translateY(-5px);
    border-color: #ffd700;
    box-shadow: 0 10px 25px rgba(220, 20, 60, 0.2);
}

.formule-header {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: white;
    padding: 25px;
    text-align: center;
    position: relative;
}

.formule-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin: 0 0 10px 0;
    color: #ffd700;
}

.formule-header .price {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.formule-content {
    padding: 30px;
}

.course {
    margin-bottom: 25px;
}

.course:last-child {
    margin-bottom: 0;
}

.course h4 {
    color: #dc143c;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.course p {
    color: #555;
    margin: 5px 0;
    line-height: 1.6;
}

.course ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.course li {
    color: #555;
    margin: 5px 0;
    position: relative;
    padding-left: 15px;
}

.course li::before {
    content: '•';
    color: #ffd700;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.course em {
    color: #999;
    font-style: italic;
}

/* Styles pour les menus groupes */
.menus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    padding: 40px;
}

.menu-card {
    background: #f8f9fa;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.menu-card.large {
    grid-column: 1 / -1;
    max-width: 800px;
    margin: 0 auto;
}

.menu-card:hover {
    transform: translateY(-5px);
    border-color: #ffd700;
    box-shadow: 0 10px 25px rgba(220, 20, 60, 0.2);
}

.menu-header {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: white;
    padding: 25px;
    text-align: center;
    position: relative;
}

.menu-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin: 0 0 10px 0;
    color: #ffd700;
}

.menu-header .price {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    display: block;
    margin-bottom: 5px;
}

.menu-header .people {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

.menu-content {
    padding: 30px;
}

/* Desserts pour menus */
.desserts-menu {
    margin: 40px;
    padding: 30px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 15px;
    border: 2px dashed #ffd700;
}

.desserts-menu h4 {
    color: #8b0000;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.2rem;
}

.desserts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.desserts-list span {
    background: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #666;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Catégories de plats */
.dishes-category {
    padding: 0 40px 40px;
}

.dishes-category h3 {
    color: #8b0000;
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

.dishes-category h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #dc143c, #ffd700);
    border-radius: 2px;
}

/* Grille des plats */
.dishes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 15px;
}

.dish-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #dc143c;
    transition: all 0.3s ease;
    gap: 20px;
}

.dish-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(220, 20, 60, 0.2);
    background: white;
}

.dish-item.special {
    border-left-color: #ffd700;
    background: rgba(255, 215, 0, 0.05);
}

.dish-item.premium {
    border-left-color: #8b0000;
    background: rgba(139, 0, 0, 0.05);
}

.dish-name {
    font-weight: 500;
    color: #333;
    flex: 1;
    line-height: 1.4;
}

.dish-description {
    display: block;
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    margin-top: 5px;
}

.dish-price {
    font-weight: bold;
    color: #dc143c;
    font-size: 1.1rem;
    min-width: 70px;
    text-align: right;
}

/* Section réservation */
.carte-reservation {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: white;
    padding: 60px 0;
    margin-top: 40px;
}

.reservation-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.reservation-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #ffd700;
    margin-bottom: 15px;
}

.reservation-card p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

.reservation-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
}

.info-item .icon {
    font-size: 1.5rem;
    color: #ffd700;
    min-width: 30px;
}

.info-item strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #ffd700;
}

.info-item p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive pour la page carte */
@media (max-width: 1024px) {
    .formules-grid {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    
    .menus-grid {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    
    .dishes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .carte-page {
        padding-top: 140px;
    }
    
    .carte-hero {
        padding: 60px 0 40px;
    }
    
    .carte-hero h1 {
        font-size: 2.2rem;
    }
    
    .carte-hero p {
        font-size: 1.1rem;
    }
    
    /* Masquer la navigation sticky sur tablette */
    .carte-nav,
    .sushis-nav {
        display: none;
    }
    
    .carte-section h2 {
        font-size: 2.2rem;
        padding: 30px 20px;
    }
    
    .section-subtitle {
        margin: -15px 20px 30px;
        padding: 12px;
    }
    
    .formules-grid,
    .menus-grid {
        padding: 20px;
        gap: 20px;
    }
    
    .formule-card,
    .menu-card {
        min-width: auto;
    }
    
    .dishes-category {
        padding: 0 20px 30px;
    }
    
    .dishes-category h3 {
        font-size: 1.5rem;
    }
    
    .dish-item {
        padding: 12px 15px;
        gap: 15px;
    }
    
    .dish-name {
        font-size: 0.95rem;
    }
    
    .dish-price {
        font-size: 1rem;
        min-width: 60px;
    }
    
    .reservation-info {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
    
    .info-item {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .carte-page {
        padding-top: 120px;
    }
    
    .carte-hero h1 {
        font-size: 1.8rem;
    }
    
    .carte-hero p {
        font-size: 1rem;
    }
    
    /* Navigation sticky déjà masquée plus haut */
    
    .carte-section h2 {
        font-size: 1.8rem;
        padding: 25px 15px;
    }
    
    .formules-grid,
    .menus-grid {
        padding: 15px;
    }
    
    .formule-content,
    .menu-content {
        padding: 20px;
    }
    
    .formule-header,
    .menu-header {
        padding: 20px;
    }
    
    .formule-header h3,
    .menu-header h3 {
        font-size: 1.5rem;
    }
    
    .formule-header .price,
    .menu-header .price {
        font-size: 1.6rem;
    }
    
    .dishes-category {
        padding: 0 15px 25px;
    }
    
    .dish-item {
        padding: 10px 12px;
        gap: 12px;
    }
    
    .dish-name {
        font-size: 0.9rem;
    }
    
    .dish-description {
        font-size: 0.8rem;
    }
    
    .dish-price {
        font-size: 0.95rem;
        min-width: 55px;
    }
    
    .reservation-card {
        padding: 30px 20px;
    }
    
    .reservation-card h3 {
        font-size: 1.6rem;
    }
    
    .desserts-list {
        gap: 10px;
    }
    
    .desserts-list span {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

/* ========== STYLES POUR LA PAGE SUSHIS ========== */

/* Page sushis principale */
.sushis-page {
    padding-top: 120px;
    min-height: 100vh;
    background: #f8f9fa;
}

/* Hero section de la page sushis */
.sushis-hero {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: white;
    padding: 80px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sushis-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
    pointer-events: none;
}

.sushis-hero .container {
    position: relative;
    z-index: 2;
}

.sushis-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.sushis-hero p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 900px;
    margin: 0 auto;
}

/* Navigation par sections de la page sushis */
.sushis-nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: sticky;
    top: 110px;
    z-index: 100;
    border-radius: 0 0 15px 15px;
}

.sushis-tabs {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 5px;
    padding: 0 10px;
}

.sushis-tabs::-webkit-scrollbar {
    display: none;
}

.sushis-tab {
    padding: 8px 12px;
    text-decoration: none;
    color: #666;
    font-weight: 500;
    text-align: center;
    border-radius: 20px;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: auto;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #eee;
}

.sushis-tab:hover {
    color: #dc143c;
    background: rgba(220, 20, 60, 0.1);
    border-color: #dc143c;
    transform: translateY(-1px);
}

.sushis-tab.active {
    color: white;
    background: #dc143c;
    border-color: #dc143c;
    box-shadow: 0 2px 8px rgba(220, 20, 60, 0.3);
}

/* Contenu principal des sushis */
.sushis-content {
    padding: 60px 0;
}

/* Sections de la page sushis */
.sushis-section {
    background: white;
    margin-bottom: 60px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

.sushis-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: white;
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    margin: 0;
    padding: 40px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    position: relative;
}

.sushis-section h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
    pointer-events: none;
}

/* Catégories de menus */
.menu-category {
    padding: 40px;
    border-bottom: 1px solid #eee;
}

.menu-category:last-child {
    border-bottom: none;
}

.menu-category h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #8b0000;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

.menu-category h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #dc143c, #ffd700);
    border-radius: 2px;
}

.category-subtitle {
    text-align: center;
    color: #666;
    font-style: italic;
    margin-bottom: 30px;
    font-size: 1rem;
}

.category-note {
    text-align: center;
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 20px;
    font-style: italic;
}

/* Grille des menus */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
}

.menu-item {
    background: #f8f9fa;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.menu-item:hover {
    transform: translateY(-5px);
    border-color: #ffd700;
    box-shadow: 0 10px 25px rgba(220, 20, 60, 0.15);
}

.menu-item.bento {
    border-left: 4px solid #dc143c;
}

.menu-item.midi {
    border-left: 4px solid #ffd700;
}

.menu-item.chirashi {
    border-left: 4px solid #8b0000;
}

.menu-item.mixte {
    border-left: 4px solid #ff6b6b;
}

.menu-item.bateau {
    border-left: 4px solid #4ecdc4;
}

.menu-item.enfant {
    border-left: 4px solid #45b7d1;
}

.menu-item.premium {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(220, 20, 60, 0.05));
    border: 2px solid #ffd700;
}

.menu-header {
    padding: 20px;
    background: white;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.menu-header h4 {
    font-weight: 600;
    color: #333;
    margin: 0;
    font-size: 1.1rem;
}

.menu-header .price {
    font-weight: bold;
    color: #dc143c;
    font-size: 1.3rem;
}

.menu-header .people {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    width: 100%;
    text-align: right;
}

.menu-content {
    padding: 20px;
}

.menu-content p {
    color: #555;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.menu-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-content li {
    color: #555;
    margin: 8px 0;
    position: relative;
    padding-left: 15px;
    line-height: 1.4;
}

.menu-content li::before {
    content: '•';
    color: #dc143c;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.menu-includes {
    display: block;
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

/* Double catégorie (sushis/sashimis, etc.) */
.double-category {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 40px;
}

.category-half h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: #8b0000;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

.category-half h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #dc143c, #ffd700);
    border-radius: 1px;
}

/* Grille des items */
.items-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #dc143c;
    transition: all 0.3s ease;
    gap: 15px;
}

.item-row:hover {
    background: white;
    transform: translateX(3px);
    box-shadow: 0 3px 10px rgba(220, 20, 60, 0.1);
}

.item-row.premium {
    border-left-color: #ffd700;
    background: rgba(255, 215, 0, 0.05);
}

.item-name {
    font-weight: 500;
    color: #333;
    flex: 1;
    line-height: 1.3;
}

.item-price {
    font-weight: bold;
    color: #dc143c;
    min-width: 60px;
    text-align: right;
}

.item-description {
    display: block;
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
    margin-top: 3px;
}

/* Catégories de rolls */
.rolls-category {
    padding: 0 40px 30px;
}

.rolls-category h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #8b0000;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    padding-bottom: 8px;
}

.rolls-category h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #dc143c, #ffd700);
    border-radius: 1px;
}

.rolls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 0 40px 40px;
}

/* Grille spéciale pour yakitori */
.yakitori-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    padding: 40px;
}

/* Grille des desserts */
.desserts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    padding: 40px;
}

.dessert-item {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.dessert-item:hover {
    background: white;
    border-color: #ffd700;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.2);
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 15px;
}

.dessert-item .item-description {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.dessert-item .item-description p {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

/* Section réservation sushis */
.sushis-reservation {
    background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
    color: white;
    padding: 60px 0;
    margin-top: 40px;
}

.sushis-reservation .reservation-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sushis-reservation .reservation-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #ffd700;
    margin-bottom: 15px;
}

.sushis-reservation .reservation-card p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

.sushis-reservation .reservation-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.sushis-reservation .info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
}

.sushis-reservation .info-item .icon {
    font-size: 1.5rem;
    color: #ffd700;
    min-width: 30px;
}

.sushis-reservation .info-item strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #ffd700;
}

.sushis-reservation .info-item p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive pour la page sushis */
@media (max-width: 1024px) {
    .menu-grid {
        grid-template-columns: 1fr;
    }
    
    .double-category {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px;
    }
    
    .rolls-grid {
        grid-template-columns: 1fr;
        padding: 0 30px 30px;
    }
    
    .yakitori-grid,
    .desserts-grid {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .sushis-page {
        padding-top: 140px;
    }
    
    .sushis-hero {
        padding: 60px 0 40px;
    }
    
    .sushis-hero h1 {
        font-size: 2.2rem;
    }
    
    .sushis-hero p {
        font-size: 1.1rem;
    }
    
    /* Navigation sticky déjà masquée plus haut */
    
    .sushis-section h2 {
        font-size: 2.2rem;
        padding: 30px 20px;
    }
    
    .menu-category {
        padding: 30px 20px;
    }
    
    .menu-category h3 {
        font-size: 1.6rem;
    }
    
    .menu-grid {
        gap: 20px;
    }
    
    .menu-item {
        min-width: auto;
    }
    
    .menu-header {
        padding: 15px;
    }
    
    .menu-content {
        padding: 15px;
    }
    
    .rolls-category {
        padding: 0 20px 25px;
    }
    
    .rolls-category h3 {
        font-size: 1.3rem;
    }
    
    .category-half h3 {
        font-size: 1.4rem;
    }
    
    .item-row {
        padding: 8px 12px;
        gap: 12px;
    }
    
    .item-name {
        font-size: 0.95rem;
    }
    
    .item-price {
        font-size: 1rem;
        min-width: 55px;
    }
    
    .desserts-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 20px;
    }
    
    .dessert-item {
        padding: 15px;
    }
    
    .sushis-reservation .reservation-info {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
    
    .sushis-reservation .info-item {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .sushis-page {
        padding-top: 120px;
    }
    
    .sushis-hero h1 {
        font-size: 1.8rem;
    }
    
    .sushis-hero p {
        font-size: 1rem;
    }
    
    /* Navigation sticky déjà masquée plus haut */
    
    .sushis-section h2 {
        font-size: 1.8rem;
        padding: 25px 15px;
    }
    
    .menu-category {
        padding: 25px 15px;
    }
    
    .menu-category h3 {
        font-size: 1.4rem;
    }
    
    .menu-header {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .menu-header .people {
        text-align: left;
        width: auto;
    }
    
    .menu-content {
        padding: 12px;
    }
    
    .double-category {
        padding: 20px 15px;
    }
    
    .rolls-category {
        padding: 0 15px 20px;
    }
    
    .yakitori-grid,
    .desserts-grid {
        padding: 20px 15px;
    }
    
    .item-row {
        padding: 6px 10px;
        gap: 10px;
    }
    
    .item-name {
        font-size: 0.9rem;
    }
    
    .item-price {
        font-size: 0.95rem;
        min-width: 50px;
    }
    
    .item-description {
        font-size: 0.75rem;
    }
    
    .dessert-item {
        padding: 12px;
    }
    
    .sushis-reservation .reservation-card {
        padding: 30px 20px;
    }
    
    .sushis-reservation .reservation-card h3 {
        font-size: 1.6rem;
    }
}

/* ========== SECTION LIVRAISON ========== */

/* Section principale de livraison */
.livraison-section {
    background: #c52b2b;
    color: white;
    padding: 60px 0;
}

/* Titre principal de la section */
.livraison-section h2 {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 40px;
    color: #ffd700;
}

/* Header avec les tarifs par zone */
.pricing-header {
    text-align: center;
    margin-bottom: 30px;
}

.zone-tarifs {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.zone-item {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid #ffd700;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
}

/* Grille des zones */
.zones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Cartes de zone */
.zone-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    transition: background 0.2s ease;
}

.zone-card:hover {
    background: rgba(255, 255, 255, 0.15);
}

.zone-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffd700;
    margin-bottom: 12px;
}

.zone-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

/* Section contact livraison */
.livraison-contact {
    text-align: center;
    margin-top: 25px;
}

.livraison-contact p {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffd700;
    text-transform: uppercase;
    padding: 12px 25px;
    border: 1px solid #ffd700;
    border-radius: 8px;
    display: inline-block;
    background: rgba(255, 215, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .livraison-section {
        padding: 50px 0;
    }
    
    .livraison-section h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .zone-tarifs {
        gap: 15px;
    }
    
    .zone-item {
        padding: 10px 20px;
        font-size: 1rem;
    }
    
    .zones-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .zone-card {
        padding: 25px;
    }
    
    .zone-card h3 {
        font-size: 1.1rem;
    }
    
    .livraison-contact p {
        font-size: 1rem;
        padding: 12px 25px;
    }
}

@media (max-width: 480px) {
    .zone-tarifs {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .zone-card {
        padding: 20px;
    }
    
    .zone-card h3 {
        font-size: 1rem;
        margin-bottom: 10px;
    }
}

/* ========== RESPONSIVE AMÉLIORATIONS ========== */

/* Mobile très petit (320px-480px) */
@media (max-width: 480px) {
    /* Navigation ultra-mobile */
    .navbar {
        width: calc(100% - 10px);
        margin: 0 5px;
        top: 5px;
    }
    
    .nav-container {
        padding: 8px;
        gap: 8px;
    }
    
    .logo img {
        height: 40px;
        max-width: 120px;
    }
    
    .nav-menu {
        gap: 3px;
    }
    
    .nav-menu a {
        font-size: 0.55rem;
        padding: 4px 8px;
        margin: 1px;
        border-radius: 12px;
    }
    
    /* Hero ultra-responsive */
    .hero {
        margin-top: 110px;
        height: 50vh;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .hero-content h1 {
        font-size: 1.8rem;
        line-height: 1.2;
        margin-top: 1rem;                             /* Espace en haut pour éviter le chevauchement */
        margin-bottom: 1rem;                          /* Espace sous le titre */
    }
    
    .hero-content p {
        font-size: 0.9rem;
    }
    
    .hero-logo {
        max-width: 120px;
    }
}

/* Conteneur général responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    /* Cards section mobile */
    .cards-container {
        padding: 0 10px;
    }
    
    .card {
        margin: 10px 0;
        padding: 25px 20px;
    }
    
    .card h2 {
        font-size: 1.5rem;
    }
    
    .card p {
        font-size: 0.95rem;
    }
    
    /* Présentation responsive */
    .presentation-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    /* Réorganiser l'ordre sur mobile : image puis texte */
    .presentation-image {
        order: 1;
        margin-bottom: 20px;
    }
    
    .presentation-text {
        order: 2;
    }
    
    .presentation h2 {
        font-size: 2rem;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .presentation-text p {
        font-size: 1rem;
        line-height: 1.7;
        text-align: justify;
        margin-bottom: 1.2rem;
    }
    
    /* Restaurant gallery responsive */
    .restaurant-gallery {
        gap: 15px;
    }
    
    .gallery-item {
        flex: 1 1 100%;
        min-width: 250px;
        height: 220px;
    }
    
    /* Avis section responsive */
    .avis-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .global-rating .rating-number {
        font-size: 3rem;
    }
}

/* Ultra-mobile pour avis et footer */
@media (max-width: 480px) {
    /* Avis ultra-mobile */
    .avis-section h2 {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    .avis-item {
        padding: 15px;
    }
    
    .avis-text {
        font-size: 0.9rem;
    }
    
    /* Footer ultra-responsive */
    .footer-container {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .footer-brand,
    .footer-navigation,
    .footer-contact,
    .footer-hours {
        flex: none;
        width: 100%;
    }
    
    .footer-brand h3 {
        font-size: 1.5rem;
    }
    
    .footer-column h4 {
        font-size: 1rem;
        margin-bottom: 15px;
    }
    
    .contact-info,
    .hours-info {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    
    .hours-day {
        flex-direction: column;
        gap: 5px;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-legal a {
        font-size: 0.85rem;
    }
}

/* Tablettes landscape */
@media (min-width: 481px) and (max-width: 1024px) {
    .nav-menu {
        gap: 8px;
    }
    
    .nav-menu a {
        font-size: 0.7rem;
        padding: 10px 16px;
    }
    
    .hero-content h1 {
        font-size: 2.8rem;
        margin-top: 1rem;                             /* Espace en haut pour éviter le chevauchement */
        margin-bottom: 1.5rem;                        /* Plus d'espace sous le titre */
    }
    
    .presentation-content {
        gap: 40px;
    }
    
    .restaurant-gallery {
        justify-content: space-around;
    }
    
    .gallery-item {
        flex: 1 1 320px;
        max-width: 350px;
    }
    
    .avis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== RESPONSIVE PAGES CARTE & SUSHIS ========== */

/* Pages carte et sushis - Mobile */
@media (max-width: 768px) {
    /* Navigation des cartes */
    .carte-tabs,
    .sushis-tabs {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    
    .carte-tab,
    .sushis-tab {
        font-size: 0.8rem;
        padding: 8px 12px;
        margin: 2px;
    }
    
    /* Hero des pages */
    .carte-hero h1,
    .sushis-hero h1 {
        font-size: 2rem;
    }
    
    /* Grilles de menus et formules */
    .formules-grid,
    .menus-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Cartes de formules */
    .formule-card,
    .menu-card {
        padding: 20px;
    }
    
    .formule-header h3,
    .menu-header h3 {
        font-size: 1.3rem;
    }
    
    .formule-header .price,
    .menu-header .price {
        font-size: 1.1rem;
    }
    
    /* Grilles de plats */
    .dishes-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .dish-item {
        padding: 12px;
    }
    
    .dish-name {
        font-size: 0.9rem;
        line-height: 1.3;
    }
    
    .dish-price {
        font-size: 0.95rem;
        min-width: 60px;
    }
    
    /* Sections des cartes */
    .carte-section,
    .sushis-section {
        padding: 30px 0;
    }
    
    .carte-section h2,
    .sushis-section h2 {
        font-size: 1.8rem;
    }
    
    .dishes-category h3 {
        font-size: 1.3rem;
    }
}

/* Pages carte et sushis - Ultra mobile */
@media (max-width: 480px) {
    /* Navigation ultra-mobile */
    .carte-nav,
    .sushis-nav {
        padding: 15px 0;
    }
    
    .carte-tabs,
    .sushis-tabs {
        gap: 5px;
    }
    
    .carte-tab,
    .sushis-tab {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
    
    /* Hero ultra-mobile */
    .carte-hero,
    .sushis-hero {
        padding: 40px 0 30px;
    }
    
    .carte-hero h1,
    .sushis-hero h1 {
        font-size: 1.6rem;
        line-height: 1.2;
    }
    
    /* Contenu ultra-mobile */
    .carte-content,
    .sushis-content {
        padding: 20px 0;
    }
    
    .formule-card,
    .menu-card {
        padding: 15px;
    }
    
    .formule-header h3,
    .menu-header h3 {
        font-size: 1.1rem;
    }
    
    .course h4 {
        font-size: 1rem;
    }
    
    .course ul li,
    .course p {
        font-size: 0.85rem;
    }
    
    /* Plats ultra-mobile */
    .dish-item {
        padding: 10px;
        flex-direction: column;
        text-align: left;
    }
    
    .dish-name {
        font-size: 0.85rem;
        margin-bottom: 5px;
    }
    
    .dish-description {
        font-size: 0.75rem;
        margin-bottom: 8px;
    }
    
    .dish-price {
        font-size: 0.9rem;
        align-self: flex-end;
        min-width: auto;
    }
    
    /* Réservation responsive */
    .carte-reservation,
    .sushis-reservation {
        padding: 30px 0;
    }
    
    .reservation-card {
        padding: 25px 15px;
    }
    
    .reservation-card h3 {
        font-size: 1.4rem;
    }
    
    .info-item {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

/* Tablettes - Pages spécifiques */
@media (min-width: 481px) and (max-width: 1024px) {
    .formules-grid,
    .menus-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dishes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .carte-tabs,
    .sushis-tabs {
        gap: 10px;
    }
    
    .carte-tab,
    .sushis-tab {
        font-size: 0.85rem;
    }
}