/* On définit le style général du corps de la page */
/* CONFIGURATION GÉNÉRALE */
html { scroll-behavior: smooth; }
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Empêche le défilement horizontal sur tout le site */
}

/* On l'applique aussi au conteneur principal par sécurité */
.main-content {
    overflow-x: hidden;
    width: 100%;
}
body { 
    font-family: 'Georgia', serif; 
    margin: 0; 
    padding: 0; 
    color: #333; 
    background-color: #F5F5DC; 
    overflow-x: hidden; 
}

/* BARRE DE NAVIGATION ET EN-TÊTE FIXE */
.bloc-fixe-total { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 2000; 
    background: white; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
}
header { 
    background-color: #353C40; 
    padding: 20px 0; 
    text-align: center; 
    color: #FFFFFF; 
}
header h1 { 
    font-family: 'Playfair Display', serif; /* C'est le nom exact de la police Google */
    font-size: 3.5em; 
    font-weight: 700;
    font-style: italic; 
    margin: 0; 
    display: block;
	color: #FFFFFF; /* On s'assure qu'il reste blanc */
}
.sous-titre-header { 
    font-size: 1.2em; 
    color: #CCCCCC; 
    font-family: sans-serif; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    margin-top: 5px; 
    display: block; 
}
.zone-tel { 
    background-color: #F5F5DC; 
    padding: 8px 0; 
    text-align: center; 
}
.btn-tel { 
    display: inline-block; 
    background-color: #353C40; 
    color: white; 
    padding: 8px 20px; 
    text-decoration: none; 
    border-radius: 50px; 
    font-weight: bold; 
    font-family: sans-serif; 
}
nav { 
    background: #F5F5DC; 
    padding: 12px 0; 
    text-align: center; 
    border-top: 3px solid #000; 
    border-bottom: 3px solid #000; 
}
nav a { 
    margin: 0 10px; 
    text-decoration: none; 
    color: #000; 
    font-weight: bold; 
    font-family: sans-serif; 
    font-size: 0.85em; 
    text-transform: uppercase; 
}
.btn-contact-menu { 
    background-color: #d32f2f; 
    color: white !important; 
    padding: 5px 10px; 
    border-radius: 5px; 
}

/* ESPACEMENT POUR LE CONTENU (sous le menu fixe) */
.main-content { padding-top: 260px; } 

/* SECTIONS GÉNÉRALES */
section { 
    scroll-margin-top: 280px; 
    padding: 60px 20px; 
    max-width: 1400px; 
    margin: auto; 
}
.container { 
    background: white; 
    padding: 40px; 
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

/* DIAPORAMA PANORAMIQUE */
.slider-container { 
    width: 100%; 
    height: 550px; 
    position: relative; 
    overflow: hidden; 
    background-color: #333; 
}
.slide { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    animation: fonduEnchaine 25s infinite; 
    object-fit: cover; 
}
.slider-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    text-align: center;
    width: 80%;
    color: white;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}
.slider-text h2 { font-size: 3.5em; font-style: italic; margin-bottom: 10px; }
.slider-text p { font-size: 1.8em; margin: 0; }

@keyframes fonduEnchaine { 
    0% { opacity: 0; } 
    5% { opacity: 1; } 
    20% { opacity: 1; } 
    25% { opacity: 0; } 
    100% { opacity: 0; } 
}
.slide:nth-child(2) { animation-delay: 0s; }
.slide:nth-child(3) { animation-delay: 5s; }
.slide:nth-child(4) { animation-delay: 10s; }
.slide:nth-child(5) { animation-delay: 15s; }
.slide:nth-child(6) { animation-delay: 20s; }

/* ACCUEIL : ALIGNEMENT ET ANIMATION */
.layout-accueil { 
    display: flex; 
    align-items: stretch; 
    justify-content: center; 
    gap: 25px; 
    margin-bottom: 50px; 
}
.photo-cote { 
    width: 280px; 
    border: 6px solid white; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); 
    border-radius: 10px; 
    object-fit: cover; 
}
.container.cadre-histoire { 
    width: 950px; 
    border: 2px solid #000; 
    background-color: #fdfaff; 
    padding: 45px; 
}
.cadre-histoire h2 { 
    color: #4b0082; 
    text-align: center; 
    font-size: 2.5em; 
    margin-top: 0; 
    text-transform: uppercase;
}

/* ANIMATION DE GLISSEMENT (REVEAL) */
.reveal { 
    opacity: 0; 
    transition: all 0.4s ease-out; 
}
.reveal-left { transform: translateX(-120px); }
.reveal-right { transform: translateX(120px); }
.reveal.active { 
    opacity: 1; 
    transform: translateX(0); 
}
/* Animation de fondu pur plus lente (3 secondes) */
.reveal-fade { 
    transform: none !important; 
    opacity: 0;
    transition: opacity 3.0s ease-in-out !important; /* On force une durée plus longue ici */
}

.reveal-fade.active { 
    opacity: 1; 
}

.reveal-fade.active { 
    opacity: 1; 
}

/* GALERIE PHOTOS */
.galerie-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 50px; 
}
.photo-galerie { 
    width: 100%; 
    max-width: 700px; 
    height: 450px; 
    border: 6px solid white; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
    object-fit: cover; 
    border-radius: 5px;
}
.align-right { align-self: flex-end; }
.align-left { align-self: flex-start; }

/* HORAIRES ET TABLEAUX */
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 25px; 
    font-size: 1.2em;
}
th, td { 
    padding: 18px; 
    border-bottom: 1px solid #ddd; 
    text-align: left; 
}
th { background-color: #f8f4ff; color: #4b0082; }

/* FOOTER */
footer { 
    text-align: center; 
    padding: 40px; 
    background: #353C40; 
    color: white; 
    margin-top: 50px;
}
/* --- STYLE DE LA SECTION MENUS ET PLATS --- */

.titre-principal-menu {
    text-align: center; 
    color: #000; 
    text-transform: uppercase;
    font-size: 2.5em;
    margin-bottom: 40px;
}

/* Les Formules (Cadres) */
.zone-formules {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.formule-cadre {
    border: 2px solid #000;
    background-color: #f8f4ff;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    width: 280px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.formule-cadre h3 {
    margin-top: 0;
    color: #4b0082;
    text-transform: uppercase;
    font-size: 1.4em;
}

.formule-prix {
    font-size: 1.8em;
    font-weight: bold;
    margin: 10px 0;
    color: #333;
	white-space: nowrap; /* Force le prix et le € à rester sur la même ligne */
}

/* La Carte (Entrées/Plats) */
.titre-categorie {
    border-bottom: 2px solid #000;
    color: #000;
    padding-bottom: 5px;
    margin-top: 40px;
    margin-bottom: 25px;
    font-family: 'Georgia', serif;
    text-transform: uppercase;
    font-size: 1.6em;
}

.plat-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    position: relative;
    overflow: hidden;
}

/* Les pointillés entre nom et prix */
.plat-ligne::after {
    content: " ...................................................................................................................................................................";
    position: absolute;
    left: 0;
    bottom: 4px;
    z-index: 1;
    color: #ccc;
}

.plat-nom {
    font-size: 1.2em;
    font-weight: bold;
    background-color: #fff; /* Cache les pointillés derrière le texte */
    padding-right: 10px;
    position: relative;
    z-index: 2;
}

.plat-prix {
    font-weight: bold;
    color: #000;
    background-color: #fff; /* Cache les pointillés derrière le prix */
    padding-left: 10px;
    position: relative;
    z-index: 2;
}

.plat-desc {
    margin: 5px 0 20px 0;
    font-style: italic;
    color: #777;
    font-size: 0.95em;
}
/* --- SECTION EMPORTÉ VERSION LARGE --- */

.layout-emporte {
    display: flex;
    align-items: stretch; /* Les deux colonnes auront la même hauteur */
    justify-content: space-between;
    gap: 50px;
    overflow: hidden; 
}

.emporte-texte {
    flex: 1; /* Prend 50% ou plus de la place */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre le texte verticalement par rapport à la photo */
}

/* On ajoute de l'espace entre chaque plat pour allonger le cadre */
.emporte-texte .menu-item {
    margin-bottom: 30px; 
}

.emporte-image {
    flex: 1; /* La photo prend maintenant autant de place que le texte (50/50) */
    display: flex;
    align-items: center;
    justify-content: center;
}

.emporte-image .photo-cote {
    width: 100%; /* La photo occupe toute la largeur de sa colonne */
    max-width: 600px; /* Mais on lui met une limite pour ne pas qu'elle soit géante */
    height: 500px; /* On impose une belle hauteur */
    object-fit: cover;
}

@media (max-width: 1024px) {
    .layout-emporte {
        flex-direction: column;
        text-align: center;
    }
    .emporte-image .photo-cote {
        height: 350px;
    }
}
/* Style pour le rappel de commande en bas du cadre emporté */
.txt-commande {
    margin-top: 30px;
    font-weight: bold;
    color: #000;
    line-height: 1.6;
}

.num-tel-emporte {
    display: inline-block;
    color: #000 !important; /* Texte noir */
    padding: 5px 0;
    text-decoration: underline; /* Souligné pour montrer que c'est cliquable */
    margin-top: 5px;
    font-size: 1.4em; /* Plus grand pour que ce soit facile à toucher du doigt */
    font-weight: bold;
}

/* Sur mobile, on s'assure que tout est bien centré */
@media (max-width: 768px) {
    .txt-commande {
        text-align: center;
        white-space: normal; /* Autorise le retour à la ligne sur mobile */
    }
}
/* On cible le container UNIQUEMENT dans la section emporte */
#emporte .container {
    background-image: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url('images/fond-emporte.jpg');
    background-size: cover;
    background-position: top; /* Affiche la partie haute de l'image */
    border: 2px solid #000;
}

/* On s'assure que le fond des noms et prix est transparent pour voir la photo */
#emporte .plat-nom, #emporte .plat-prix {
    background-color: transparent !important;
}
/* On cible le container UNIQUEMENT dans la section menus-plats */
#menus-plats .container {
    background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url('images/fond-menu.jpg');
    background-size: cover;
    background-position: center; /* Ici le centre est souvent mieux car la section est longue */
    border: 2px solid #000;
}

/* On rend transparent le fond des noms et prix pour toute la carte */
#menus-plats .plat-nom, #menus-plats .plat-prix {
    background-color: transparent !important;
}

/* On rend aussi transparent le fond des catégories (entrées, plats...) */
#menus-plats .titre-categorie {
    background-color: transparent !important;
}
/* Style pour l'image de fond de la région */
.parallax-region {
    background-image: url('images/region-alpilles.jpg'); /* Ton image ici */
    height: 400px;
    background-attachment: fixed; /* C'est ça qui crée l'effet de glissement */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

.parallax-text p {
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 3em;
    font-style: italic;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
}

/* On désactive l'effet fixe sur mobile car les téléphones ont du mal avec ça */
@media (max-width: 768px) {
    .parallax-region {
        background-attachment: scroll;
        height: 250px;
    }
}
/* --- SECTION PARALLAX VILLAGE (ENTRE DIAPO ET ACCUEIL) --- */

/* ============================================================
   SECTION PARALLAX VILLAGE (ENTRE ACCUEIL ET MENUS)
   ============================================================ */

.parallax-village {
    /* 1. L'image de fond */
    background-image: url('images/village.jpg');
    
    /* 2. Dimensions du bloc */
    height: 500px;
    width: 100%;
    
    /* 3. L'effet Parallax (Non simplifié) */
    background-attachment: fixed !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* 4. Mise en page du texte au centre */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 5. Bordures graphiques (Style Les Lavandes) */
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    
    /* 6. Espaces vides (Marges) pour aérer les cadres */
    margin-top: 80px;    /* Espace avec le cadre du haut */
    margin-bottom: 80px; /* Espace avec le cadre du bas */
    
    /* 7. Visibilité */
    opacity: 1;
    position: relative;
    z-index: 1;
}

/* Style du texte à l'intérieur du Parallax */
.parallax-village .parallax-text p {
    color: #FFFFFF;
    font-family: 'Playfair Display', serif;
    font-size: 3.2em;
    font-style: italic;
    text-align: center;
    padding: 0 10% ;
    text-shadow: 2px 4px 15px rgba(0,0,0,0.8); /* Pour que le blanc ressorte sur la photo */
    margin: 0;
}

/* --- ADAPTATION POUR MOBILE ET TABLETTE --- */
@media (max-width: 1024px) {
    .parallax-village {
        /* Sur mobile, le parallax 'fixed' est souvent bloqué par les navigateurs */
        background-attachment: scroll !important;
        height: 350px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    .parallax-village .parallax-text p {
        font-size: 2em;
    }
}
/* ============================================================
   SECTION PARALLAX BAUX (ENTRE MENUS ET EMPORTÉ)
   ============================================================ */

.parallax-baux {
    /* 1. L'image des Baux de nuit */
    background-image: url('images/baux-nuit.jpg');
    
    /* 2. Dimensions et Effet */
    height: 500px;
    width: 100%;
    background-attachment: fixed !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* 3. Mise en page */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    
    /* 4. Espaces (Identiques au premier bloc pour l'harmonie) */
    margin-top: 80px;
    margin-bottom: 80px;
    
    position: relative;
    z-index: 1;
}

/* On utilise le même style de texte que le premier bloc */
.parallax-baux .parallax-text p {
    color: #FFFFFF;
    font-family: 'Playfair Display', serif;
    font-size: 3.2em;
    font-style: italic;
    text-align: center;
    padding: 0 10%;
    text-shadow: 2px 4px 15px rgba(0,0,0,0.9);
    margin: 0;
}

/* Adaptation Mobile */
@media (max-width: 1024px) {
    .parallax-baux {
        background-attachment: scroll !important;
        height: 350px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .parallax-baux .parallax-text p {
        font-size: 2em;
    }
}
/* ============================================================
   SECTION PARALLAX FONTVIEILLE (ENTRE ÉVÉNEMENTS ET GALERIE)
   ============================================================ */

.parallax-fontvieille {
    /* 1. L'image de Fontvieille (ex: le Moulin ou une ruelle) */
    background-image: url('images/fontvieille.jpg');
    
    /* 2. Dimensions et Effet Parallax */
    height: 500px;
    width: 100%;
    background-attachment: fixed !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* 3. Mise en page du texte */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    
    /* 4. Espaces vides (80px pour l'harmonie) */
    margin-top: 80px;
    margin-bottom: 80px;
    
    position: relative;
    z-index: 1;
}

/* On utilise le même style de texte pour la cohérence */
.parallax-fontvieille .parallax-text p {
    color: #FFFFFF;
    font-family: 'Playfair Display', serif;
    font-size: 3.2em;
    font-style: italic;
    text-align: center;
    padding: 0 10%;
    text-shadow: 2px 4px 15px rgba(0,0,0,0.9);
    margin: 0;
}

/* Adaptation Mobile */
@media (max-width: 1024px) {
    .parallax-fontvieille {
        background-attachment: scroll !important;
        height: 350px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .parallax-fontvieille .parallax-text p {
        font-size: 2em;
    }
}
/* ============================================================
   SECTION PARALLAX SAINT-RÉMY (ENTRE GALERIE ET HORAIRES)
   ============================================================ */

.parallax-stremy {
    /* 1. L'image des monuments romains (Les Antiques) */
    background-image: url('images/st-remy.jpg');
    
    /* 2. Dimensions et Effet Parallax */
    height: 500px;
    width: 100%;
    background-attachment: fixed !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* 3. Mise en page du texte */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    
    /* 4. Espaces vides (80px pour la cohérence) */
    margin-top: 80px;
    margin-bottom: 80px;
    
    position: relative;
    z-index: 1;
}

/* Style du texte identique aux autres blocs */
.parallax-stremy .parallax-text p {
    color: #FFFFFF;
    font-family: 'Playfair Display', serif;
    font-size: 3.2em;
    font-style: italic;
    text-align: center;
    padding: 0 10%;
    text-shadow: 2px 4px 15px rgba(0,0,0,0.9);
    margin: 0;
}

/* Adaptation Mobile */
@media (max-width: 1024px) {
    .parallax-stremy {
        background-attachment: scroll !important;
        height: 350px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .parallax-stremy .parallax-text p {
        font-size: 2em;
    }
}