/* ==========================================================================
   1. VARIABLES & BASES
   ========================================================================== */
:root {
    --black: #0a0a0a;
    --white: #ffffff;
    --grey-blue: #1a252f;
    --gold: #c5a059;
    --transition-smooth: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--black);
    color: var(--white);
    line-height: 1.6;
}

h1, h2, h3, h4, .logo { font-family: 'Playfair Display', serif; }

/* ==========================================================================
   2. HEADER & NAVIGATION BURGER (FIXE ET NOIR)
   ========================================================================== */
header {
    position: fixed;
    width: 100%;
    height: 80px;
    background: rgba(10, 10, 10, 0.9); /* Noir élégant légèrement transparent */
    backdrop-filter: blur(5px); /* Flou artistique sur ce qui passe dessous */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    height: 100%;
}

.logo a {
    font-size: 1.6rem;
    letter-spacing: 5px;
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
}

/* Le bouton Burger - Positionné à droite */
.burger {
    width: 30px;
    height: 18px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3000; /* Doit être au-dessus de l'overlay */
}

.bar {
    width: 100%;
    height: 1px;
    background-color: var(--white);
    transition: var(--transition-smooth);
}

/* Animation Burger -> X */
.burger.open .bar:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.burger.open .bar:nth-child(2) { opacity: 0; }
.burger.open .bar:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Overlay Plein Écran (Apparition douce) */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.98);
    z-index: 2500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.nav-overlay.active {
    visibility: visible;
    opacity: 1;
}
/* --- CONTENU DE LA NAVIGATION --- */
.nav-links-full {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}

.nav-links-full li {
    margin: 25px 0; /* Espacement aéré */
}

.nav-links-full a {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 5px;
    transition: var(--transition-smooth);
    display: inline-block;
}

/* Le petit numéro doré */
.nav-links-full a span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: var(--gold);
    vertical-align: middle;
    margin-right: 25px;
    letter-spacing: 3px;
    font-weight: 300;
}

/* Effet au survol */
.nav-links-full a:hover {
    color: var(--gold);
    font-style: italic;
    transform: translateX(10px); /* Petit décalage vers la droite */
}
/* Style du logo dans le header */
.header-logo-img {
    height: 40px;      /* Hauteur fixe pour l'alignement */
    width: auto;       /* Garde les proportions */
    max-width: 120px;  /* Limite la largeur pour rester discret */
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Effet au survol */
.logo a:hover .header-logo-img {
    transform: scale(1.05);
}

/* Adaptation Mobile */
@media (max-width: 768px) {
    .header-logo-img {
        height: 32px;     /* Plus petit sur mobile */
        max-width: 80px;  /* Encore plus contenu sur petit écran */
    }
    .site-title {
        font-size: 0.9rem; /* Réduit un peu le texte si besoin */
    }
}
/* Pied de page du menu */
.nav-footer {
    position: absolute;
    bottom: 50px;
    text-align: center;
}

.nav-footer p {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.4);
}							
/* ==========================================================================
   3. HERO & SECTIONS ACCUEIL
   ========================================================================== */
.hero {
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 768px) { .hero { background-attachment: scroll; } }

.welcome {
    background-color: var(--grey-blue);
    padding: 100px 20px;
    text-align: center;
}

/* Grille interactive home */
.menu-grid { display: flex; flex-wrap: wrap; height: 70vh; gap: 1px; }

a.menu-item {
    flex: 1; min-width: 300px;
    position: relative; overflow: hidden;
    background-size: cover; background-position: center;
    text-decoration: none; color: white;
}

.menu-item:hover { flex: 1.5; }
.overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: 0.5s;
}
.menu-item:hover .overlay { background: rgba(0,0,0,0.7); }

.content-hover {
    opacity: 0; transform: translateY(20px);
    transition: 0.5s; text-align: center;
}
.menu-item:hover .content-hover { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   4. PAGES CARTE / MENUS / BOISSONS
   ========================================================================== */
.page-header {
    height: 50vh; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

.carousel-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; animation: transition-images 15s infinite;
}
.slide-1 { animation-delay: 0s; }
.slide-2 { animation-delay: 5s; }
.slide-3 { animation-delay: 10s; }

@keyframes transition-images {
    0% { opacity: 0; transform: scale(1); }
    10% { opacity: 1; }
    33% { opacity: 1; }
    43% { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; }
}

.carte-page-bg {
    background: radial-gradient(circle at center, #1a252f 0%, #0a0a0a 100%);
    padding: 80px 0;
}

.carte-container {
    max-width: 900px; margin: 0 auto; padding: 40px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.item-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.item-name { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: white; }
.item-dots { flex-grow: 1; border-bottom: 1px dotted rgba(255,255,255,0.2); }
.item-price { color: var(--gold); }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .menu-grid { height: auto; display: block; }
    .menu-item { height: 300px; }
    .content-hover { opacity: 1; transform: none; }
    .nav-links-full a { font-size: 2rem; }
}
/* ==========================================================================
   5. FOOTER
   ========================================================================== */
footer {
    background: #050505;
    padding: 80px 20px 40px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    gap: 40px;
    text-align: center;
    margin-bottom: 60px;
}

.footer-section h4 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: var(--gold);
    margin-bottom: 25px;
}

.footer-section p {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
}

.footer-bottom a {
    color: inherit;
    text-decoration: none;
    transition: 0.3s;
}

.footer-bottom a:hover {
    color: var(--gold);
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
        gap: 50px;
    }
}
/* ==========================================================================
   CORRECTION RESPONSIVE MENU-GRID
   ========================================================================== */
@media (max-width: 768px) {
    /* On force la grille à s'empiler verticalement */
    .menu-grid {
        display: flex;
        flex-direction: column; 
        height: auto; /* On libère la hauteur fixe de 70vh */
        gap: 0; /* On colle les blocs pour un look plus compact */
    }

    a.menu-item {
        width: 100%;
        height: 350px; /* On donne une hauteur fixe à chaque bloc sur mobile */
        flex: none; /* On désactive le flex: 1 qui faisait la division par colonnes */
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* On force l'affichage des infos car le "hover" n'existe pas vraiment sur mobile */
    .overlay {
        background: rgba(0, 0, 0, 0.6) !important;
    }

    .content-hover {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        margin-top: 15px;
    }

    .overlay h3 {
        transform: none !important;
        font-size: 1.5rem;
    }
    
    /* On désactive l'effet d'élargissement au survol qui casse le layout sur mobile */
    .menu-item:hover {
        flex: none;
    }
}
/* Page Philosophie */
.container-small { max-width: 700px; margin: 0 auto; padding: 100px 20px; text-align: center; }

.lead-text {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 40px;
}

.story-text {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    line-height: 2;
    text-align: justify;
}

.social-discovery p { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 3px; color: var(--gold); }
.social-links a { color: white; text-decoration: none; font-size: 1.2rem; transition: 0.3s; }
.social-links a:hover { color: var(--gold); }
.social-links .dot { display: inline-block; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; margin: 0 15px; vertical-align: middle; }

/* Liens de partage footer */
.share-links a {
    display: inline-block;
    width: 35px; height: 35px;
    border: 1px solid rgba(255,255,255,0.2);
    line-height: 33px;
    margin: 0 5px;
    font-size: 0.8rem;
    color: white;
    text-decoration: none;
    transition: 0.3s;
}
.share-links a:hover { border-color: var(--gold); color: var(--gold); }
																							
/* On passe à 4 colonnes dans le footer */
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Changé de 3 à 4 */
    gap: 30px;
    text-align: center;
    margin-bottom: 60px;
}

/* Style des liens de partage */
.share-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.share-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(197, 160, 89, 0.3); /* Bordure or translucide */
    border-radius: 50%;
    color: var(--white);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1px;
    transition: all 0.4s ease;
}

.share-links a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
    transform: translateY(-3px); /* Petit saut au survol */
}

/* Ajustement Mobile */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr; /* Tout s'empile sur une seule colonne */
        gap: 40px;
    }
}																							
/* S'assurer que le footer bottom sort de la grille et s'étale sur 100% */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px 20px;
    text-align: center;
    width: 100%; /* Oblige le centrage sur toute la largeur */
    margin-top: 40px;
}

/* Centrer les liens de partage proprement */
.share-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}
/* --- PAGE PHILOSOPHIE --- */
.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0px 10px;
}

.quote-box {
    text-align: center;
    margin-bottom: 60px;
}

.lead-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-style: italic;
    color: var(--gold);
    line-height: 1.4;
}

/* On force le texte en sombre car on est dans le bloc blanc */
.philo-story {
    font-family: 'Montserrat', sans-serif;
    line-height: 2;
    font-size: 1.1rem;
    color: #2c3e50; /* Un gris très sombre, presque noir */
    text-align: center;
    margin-bottom: 60px;
}

/* Sécurité supplémentaire pour les paragraphes */
.philo-story p {
    color: #2c3e50 !important; 
    margin-bottom: 1.5rem;
}

/* On ajuste aussi la signature qui risquait d'être blanche */
.philo-team-label {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #1a1a1a !important; /* Noir profond */
    margin-bottom: 30px;
}

.signature {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0px;
}

.signature p {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.social-discovery a {
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    transition: 0.3s;
}

.social-discovery a:hover { color: var(--gold); }

.social-discovery .dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    margin: 0 20px;
    vertical-align: middle;
}
	/* --- PAGE RESERVATION --- */
.reservation-page {
    min-height: 100vh;
    padding-top: 120px; /* Espace pour le header fixe */
    background: var(--black);
    display: flex;
    align-items: center;
}

.res-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    padding: 40px 20px;
}

.res-info h1 {
    font-size: 3.5rem;
    margin: 20px 0;
}

.res-image {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    margin-top: 40px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Style du formulaire */
.res-form-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.input-group {
    margin-bottom: 25px;
}

.input-group label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 10px;
}

.input-group input, 
.input-group select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

.input-group input:focus {
    border-color: var(--gold);
}

.btn-res {
    width: 100%;
    background: var(--gold);
    color: var(--black);
    border: none;
    padding: 18px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    transition: 0.3s;
}

.btn-res:hover {
    background: white;
}

.form-note {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    text-align: center;
    margin-top: 20px;
}

/* Responsive */
@media (max-width: 900px) {
    .res-container { grid-template-columns: 1fr; gap: 40px; }
    .res-info { text-align: center; }
    .res-form-box { padding: 30px 20px; }
}
/* --- PAGE CARTE --- */
.page-header {
    height: 40vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--white);
}

.overlay-dark {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carte-container {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
}

.carte-section {
    margin-bottom: 80px;
    text-align: center;
}

.carte-section h3 {
    font-size: 2.2rem;
    font-style: italic;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.separator-small {
    width: 40px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 40px;
}

.carte-item {
    margin-bottom: 40px;
    transition: transform 0.3s ease;
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.item-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.item-price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
}

.item-desc {
    font-style: italic;
    font-weight: 300;
    color: rgba(255,255,255,0.7);
    text-align: left;
    font-size: 0.95rem;
}
/* --- PAGE MENUS --- */
.menu-experience {
    margin-bottom: 100px;
    text-align: center;
}

.menu-price {
    font-family: 'Montserrat', sans-serif;
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

.menu-steps {
    max-width: 600px;
    margin: 0 auto;
}

.step-item {
    margin-bottom: 35px;
}

.step-item h4 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
}

.step-item p {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--white);
}

.menu-footer .separator-small {
    margin: 60px auto;
    opacity: 0.3;
}
/* --- PAGE BOISSONS --- */
.vin-details {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.vin-region {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold);
    margin-top: 5px;
}

.vin-item {
    margin-bottom: 50px;
}

/* On s'assure que sur mobile les détails du vin restent lisibles */
@media (max-width: 768px) {
    .vin-details .item-name {
        white-space: normal;
        font-size: 1.1rem;
    }
}	/* Le conteneur principal du header */
.nav-container {
    display: flex;
    justify-content: space-between; /* Espace entre logo / social / burger */
    align-items: center;           /* CENTRE TOUT VERTICALEMENT */
    height: 80px;                  /* Ajuste selon la hauteur de ton header */
    padding: 0 20px;
}

/* Le bloc social */
.social-discovery {
    display: flex;
    align-items: center;           /* Aligne le texte, les liens et le point sur la même ligne */
    gap: 15px;                     /* Espace entre chaque élément */
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Le petit point séparateur */
.dot {
    width: 4px;
    height: 4px;
    background-color: var(--accent); /* Ta couleur dorée/marron */
    border-radius: 50%;
    display: inline-block;
}

.social-discovery a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

.social-discovery a:hover {
    opacity: 0.6;
}																																														
/* --- Styles globaux du header (pour tous les écrans) --- */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Ou la largeur de ton choix */
    margin: 0 auto;
    padding: 10px 20px;
    box-sizing: border-box; /* Important pour que le padding ne fasse pas déborder */
}

.logo a {
    font-size: 1.2rem; /* Taille par défaut */
    white-space: nowrap; /* Empêche le logo de revenir à la ligne */
}

/* --- ADAPTATION MOBILE (Écrans inférieurs à 768px) --- */
@media (max-width: 768px) {
    
    .logo a {
        font-size: 0.8rem; /* On réduit le logo sur mobile */
    }

    /* Option A : On cache les réseaux sociaux sur mobile pour gagner de la place */
    .social-discovery {
        display: none; 
    }
    
    /* Si tu veux quand même les garder, utilise l'Option B à la place : */
    /* .social-discovery span, .social-discovery .dot { display: none; } 
    .social-discovery { font-size: 0.7rem; gap: 8px; } 
    */

    .nav-container {
        height: 60px; /* On réduit un peu la hauteur du header */
        padding: 0 15px;
    }
																																				  
}	/* --- GESTION BUREAU --- */
.desktop-only {
    display: flex; /* Visible par défaut sur PC */
}

.mobile-socials {
    display: none; /* Caché par défaut sur PC */
}

/* --- GESTION MOBILE (Responsive) --- */
@media (max-width: 768px) {
    
    /* On cache les réseaux du header pour libérer de la place */
    .desktop-only {
        display: none !important;
    }

    /* On réduit la taille du texte du logo pour éviter qu'il pousse le burger */
    .logo a {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    /* Style pour les réseaux dans le menu ouvert */
    .mobile-socials {
        display: block;
        margin-top: 40px;
        text-align: center;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 20px;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 10px;
    }

    .social-icons a {
        font-size: 0.8rem;
        text-transform: uppercase;
        color: var(--accent);
    }
}
/* --- STRUCTURE DU MENU PLEIN ÉCRAN --- */
.full-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95); /* Fond sombre élégant */
    z-index: 1000;
    
    /* Centrage du contenu */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* État masqué par défaut */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    transform: translateY(-20px); /* Léger décalage vers le haut */
}

/* --- ÉTAT OUVERT --- */
.full-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- LIENS DU MENU --- */
.menu-links {
    list-style: none;
    padding: 0;
    text-align: center;
}

.menu-links li {
    margin: 25px 0;
}

.menu-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: color 0.3s;
}

.menu-links a:hover {
    color: var(--accent); /* Ta couleur dorée */
}
/* Animation des barres du burger */
.burger {
    cursor: pointer;
    z-index: 1100; /* Toujours au-dessus du menu */
}

.burger.active .bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.burger.active .bar:nth-child(2) {
    opacity: 0; /* On cache la barre du milieu */
}

.burger.active .bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

.bar {
    transition: all 0.3s ease;
}
@media (max-width: 768px) {
    /* On réduit l'espace entre les liens de navigation */
    .menu-links li {
        margin: 15px 0; /* Au lieu de 25px */
    }

    .menu-links a {
        font-size: 1.4rem; /* Un peu plus petit pour gagner de la place */
    }

    /* On force les réseaux sociaux à rester visibles */
    .mobile-socials {
        margin-top: 20px; /* Espace raisonnable */
        padding-bottom: 20px;
        width: 100%;
    }

    /* Si l'écran est vraiment petit (ex: iPhone SE), on permet le scroll dans le menu */
    .full-menu {
        justify-content: flex-start; /* Aligne en haut au lieu de centrer */
        padding-top: 80px; /* Pour ne pas être sous le logo */
        overflow-y: auto; /* Permet de défiler SI le contenu dépasse */
    }
}
/* Le conteneur global du menu */
.nav-overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pousse le contenu vers le haut et le bas */
    padding: 20px 10px 10px 10px; /* Padding généreux en bas */
    box-sizing: border-box;
}

/* Le bloc qui contient horaires + réseaux */
.nav-bottom-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Crée un espace fixe entre les horaires et les réseaux */
    margin-top: 40px;
    align-items: center;
    text-align: center;
}

.nav-footer p {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

.social-label {
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.social-icons {
    display: flex;
    gap: 20px;
}

.social-icons a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
}
.map-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.75rem; /* Plus petit que le reste */
    color: var(--accent); /* Ta couleur dorée */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.map-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.icon-map {
    font-size: 0.9rem;
    margin-right: 4px;
}
/* ==========================================================================
   PATCH FLUIDITÉ & TRANSITIONS (À AJOUTER À LA FIN)
   ========================================================================== */

/* 1. Définition de la transition maître si elle manque */
:root {
    --transition-smooth: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. Fluidité de la Grille Home (Élargissement) */
.menu-item {
    transition: var(--transition-smooth) !important;
}

.overlay, .content-hover {
    transition: var(--transition-smooth) !important;
}

/* 3. Fluidité des Menus et Cartes (Glissement au survol) */
.carte-item, .vin-item, .menu-experience {
    transition: var(--transition-smooth);
}

.carte-item:hover, .vin-item:hover {
    transform: translateX(15px); /* Effet de décalage fluide */
}

/* 4. Fluidité de la Navigation Overlay */
.nav-overlay {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-links-full a {
    transition: var(--transition-smooth);
}

.nav-links-full a:hover {
    transform: translateX(10px) skewX(-5deg); /* Effet luxe italien */
    color: var(--gold);
}

/* 5. Fluidité des boutons et icônes sociales */
.btn-res, .share-links a, .social-discovery a {
    transition: var(--transition-smooth);
}

.share-links a:hover {
    transform: translateY(-5px);
    background-color: var(--gold);
    color: var(--black) !important;
}

/* 6. Fluidité des champs de formulaire */
.input-group input, .input-group select {
    transition: border-color 0.4s ease, padding 0.4s ease;
}

.input-group input:focus {
    padding-left: 10px;
}
/* ==========================================================================
   PAGE MENTIONS LÉGALES
   ========================================================================== */

/* --- Géométrie (Structure) --- */


.legal-section {
    margin-bottom: 50px;
    padding-bottom: 30px;
}

.legal-section h1 { 
    font-size: clamp(2rem, 5vw, 3.5rem); 
    margin-bottom: 20px; 
}

.legal-section h2 { 
    font-size: 1.4rem; 
    margin-top: 40px; 
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.legal-section p {
    margin-bottom: 20px;
}

/* --- Esthétique (Styles & Effets) --- */
.legal-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-section h1, 
.legal-section h2 {
    font-family: 'Playfair Display', serif;
    color: var(--gold);
    text-transform: uppercase;
}

.legal-section p, 
.legal-section li {
    font-family: 'Montserrat', sans-serif;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.9;
    font-weight: 300;
}

.legal-section strong {
    color: var(--white);
    font-weight: 500;
}

.legal-section a {
    color: var(--gold);
    text-decoration: none;
    transition: var(--transition-smooth);
    border-bottom: 1px solid transparent;
}

.legal-section a:hover {
    color: var(--white);
    border-bottom: 1px solid var(--gold);
}

.update-date {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.4;
}

/* --- Responsive Géométrie --- */
@media (max-width: 768px) {
    .legal-main {
        margin-top: 100px;
        text-align: left;
    }
    .legal-section h1 { font-size: 2.2rem; }
}	
.menu-short-desc {
        font-family: 'Playfair Display', serif;
        font-style: italic;
        color: #8c7851; /* Un doré vieilli discret */
        font-size: 1.1rem;
        margin: -10px auto 30px;
        max-width: 80%;
        line-height: 1.5;
        text-align: center;
        position: relative;
    }
    
    .menu-short-desc::after {
        content: "";
        display: block;
        width: 40px;
        height: 1px;
        background: #e0c38c;
        margin: 15px auto 0;
    }

    .menu-experience {
        margin-bottom: 80px;
        page-break-inside: avoid;
    }
/* Style des liens dans le footer */
footer .footer-section p a {
    color: #e0c38c; /* Ton doré/gold pour rester chic */
    text-decoration: none; /* On enlève le soulignement moche */
    transition: all 0.3s ease; /* Transition douce pour le survol */
    font-weight: 400;
}

/* Effet au survol (Hover) */
footer .footer-section p a:hover {
    color: #ffffff; /* Le lien devient blanc au survol */
    text-decoration: underline; /* Apparaît seulement au survol pour l'ergonomie */
    opacity: 0.8;
}

/* Cas particulier : les liens de téléphone et mail */
footer .footer-section a[href^="tel:"], 
footer .footer-section a[href^="mailto:"] {
    display: inline-block;
    margin-top: 5px;
}
/* Isolation de la page Philosophie */
/* --- STRUCTURE DE LA PAGE --- */
.philo-site-wrapper {
    padding-top: 80px; /* Aligné sur la hauteur de ton header fixe */
    background-color: var(--black); /* Le fond du site reste noir derrière */
    min-height: 100vh;
}

.philo-white-block {
    background-color: #ffffff; /* Ton bloc blanc */
    color: #333333; /* Texte foncé pour lisibilité sur blanc */
    padding: 20px 40px;
    margin: 0 auto;
    width: 100%;
}

/* --- TYPOGRAPHIE INTERNE --- */
.philo-intro { text-align: center; margin-bottom: 50px; }

.philo-category { 
    display: block;
    color: var(--gold); 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    font-size: 0.8rem; 
    margin-bottom: 10px;
}

.philo-title { 
    font-family: 'Playfair Display', serif; 
    font-size: clamp(2rem, 5vw, 3rem); 
    margin: 0;
    color: #1a1a1a;
}

.philo-sep-gold { 
    width: 50px; 
    height: 2px; 
    background: var(--gold); 
    margin: 20px auto; 
}

/* --- CITATION ET TEXTE --- */
.philo-white-block .quote-box { text-align: center; margin-bottom: 40px; }
.philo-white-block .quote-icon { font-size: 3rem; color: #eee; margin-bottom: -15px; }
.philo-white-block .lead-text { 
    font-family: 'Playfair Display', serif;
    font-style: italic; 
    font-size: 1.3rem; 
    line-height: 1.5; 
    color: #444;
}

.philo-white-block .story-content { 
    line-height: 1.8; 
    font-size: 1.1rem; 
    text-align: justify; 
    margin-bottom: 60px; 
}

/* --- IMAGE ET SIGNATURE --- */
.philo-sep-line { width: 100%; height: 1px; background: #eee; margin-bottom: 30px; }
.team-label { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: bold; margin-bottom: 20px; }

.philo-img-fluid { 
    width: 100%; 
    max-width: 700px; 
    height: auto; 
    border-radius: 4px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* --- BOX SOCIALE (BAS DE PAGE BLANCHE) --- */

.philo-page-wrapper .social-discovery-box {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eee; /* Une ligne légère pour séparer de l'image */
    text-align: center;
}

/* Le texte "Suivez notre aventure" */
.philo-page-wrapper .follow-text {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999 !important; /* Gris moyen pour ne pas jurer avec le reste */
    margin-bottom: 15px;
}

/* --- BOX SOCIALE (PAGE PHILOSOPHIE) --- */

.philo-social-box {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #f0f0f0; /* Ligne très fine et claire */
    text-align: center;
}

/* On force le texte "Suivez notre aventure" en sombre */
.philo-social-box .philo-follow-txt {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #a1a1a1 !important; /* Gris élégant */
    margin-bottom: 20px;
}

/* Conteneur des liens */
.social-links2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0; /* On gère l'espace via les marges du point */
}

/* Les liens eux-mêmes */
.social-links2 a {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold) !important; 
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.social-links2 a:hover {
    color: #1a1a1a !important;
    border-bottom: 1px solid var(--gold); /* Soulignement fin au survol */
}

/* Le point séparateur (Correction du sélecteur) */
.social-links2 .dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: var(--gold) !important; /* On le met en or aussi pour plus de chic */
    border-radius: 50%;
    margin: 0 20px;
    opacity: 0.5;
}

/* Correction pour mobile */
@media (max-width: 768px) {
    .social-links2 {
        flex-direction: row; /* On garde sur une ligne */
        flex-wrap: wrap;
    }
}
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.98);
    z-index: 2500;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* MODIFICATIONS CRUCIALES */
    justify-content: flex-start !important; /* On part du haut */
    overflow-y: auto !important;           /* On active le scroll vertical */
    padding: 60px 20px 40px 20px;          /* Padding pour ne pas coller aux bords */
    
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* On réduit la taille des liens car 6 liens + span + footer = trop haut */
.nav-links-full {
    list-style: none;
    padding: 0;
    margin: 40px 0; /* Espace entre le haut et le début des liens */
    flex-shrink: 0; /* Empêche les liens de s'écraser */
}

.nav-links-full li {
    margin: 15px 0 !important; /* On réduit l'espacement entre chaque lien */
}

.nav-links-full a {
    /* Utilisation de clamp pour que ça s'adapte à la hauteur d'écran */
    font-size: clamp(1.4rem, 4vh, 2.5rem) !important; 
    letter-spacing: 3px !important;
}

/* Le wrapper du bas (Horaires + Sociaux) */
.nav-bottom-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto; /* Pousse vers le bas s'il y a de la place */
    padding-top: 30px;
    padding-bottom: 20px;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0; /* Garde sa taille réelle */
}
.item-name {
    max-width: 70%;
    line-height: 1.4;
}
.carte-item {
    text-align: left;
}
.item-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.item-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
}
.item-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: var(--gold);
    white-space: nowrap;
}
/* Ciblage ultra-précis selon ta structure */
html body main section.reservation-page div.res-container div.res-form-box form#res-form div.input-group select {
    background-color: #333; /* Ou la couleur de ton formulaire */
    color: white;
}

/* Correction du blanc sur blanc des options */
html body main section.reservation-page div.res-container div.res-form-box form#res-form div.input-group select option {
    background-color: #222; /* Couleur de fond des options */
    color: white;           /* Couleur du texte */
}
/* Style de l'invitation Cave */
.cave-invitation {
    transition: var(--transition-smooth);
}

.cave-invitation:hover {
    background: rgba(197, 160, 89, 0.05) !important;
    border-color: var(--gold) !important;
}

.btn-cave {
    display: inline-block;
    text-decoration: none;
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.9rem;
    position: relative;
    padding: 10px 0;
    transition: var(--transition-smooth);
}

.btn-text {
    display: block;
    margin-bottom: 8px;
}

.btn-line {
    display: block;
    width: 40px; /* Ligne courte au départ */
    height: 1px;
    background-color: var(--gold);
    margin: 0 auto;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Animation au survol du bloc entier ou du bouton */
.cave-invitation:hover .btn-line {
    width: 100%; /* La ligne s'étire sur toute la largeur du texte */
}

.btn-cave:hover {
    color: var(--white);
}
/* Style de l'invitation Cave */
.cave-invitation {
    transition: var(--transition-smooth);
}

.cave-invitation:hover {
    background: rgba(197, 160, 89, 0.05) !important;
    border-color: var(--gold) !important;
}

.btn-cave {
    display: inline-block;
    text-decoration: none;
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.9rem;
    position: relative;
    padding: 10px 0;
    transition: var(--transition-smooth);
}

.btn-text {
    display: block;
    margin-bottom: 8px;
}

.btn-line {
    display: block;
    width: 40px; /* Ligne courte au départ */
    height: 1px;
    background-color: var(--gold);
    margin: 0 auto;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Animation au survol du bloc entier ou du bouton */
.cave-invitation:hover .btn-line {
    width: 100%; /* La ligne s'étire sur toute la largeur du texte */
}

.btn-cave:hover {
    color: var(--white);
}
/* On cible le conteneur du titre et du prix */
.carte-item .item-header {
    display: flex;
    justify-content: space-between; /* Pousse le titre à gauche et le prix à droite */
    align-items: baseline;          /* Aligne le bas du texte pour un rendu propre */
    width: 100%;
}

/* Optionnel : on s'assure que le prix ne se colle pas au titre */
.item-price {
    margin-left: 15px;
    white-space: nowrap; /* Empêche le prix de passer à la ligne */
    font-weight: bold;
}
/* --- SECTION DELIVERY GASTRO --- */
.delivery-section {
    padding: 80px 0;
     background-color: var(--grey-blue);  
    text-align: center;
}

.delivery-section h2 {
    font-family: 'Playfair Display', serif; /* Ou ta police de titre gastro */
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-transform: uppercase;
    position: relative;
}

/* Petit liseré élégant sous le titre */
.delivery-section h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    background: #c5a059;  /*Ton rappel de couleur Or/Bronze */
    margin: 15px auto 0;
}

.delivery-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Commande directe / Click & Collect */
.delivery-item.direct a {
    display: inline-block;
    padding: 30px 50px;
    border: 1px solid #eee;
    text-decoration: none;
    color: #333;
    transition: all 0.4s ease;
    background: #fcfcfc;
}

.delivery-item.direct a:hover {
    border-color: #c5a059;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transform: translateY(-3px);
}

.delivery-item .tag {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #c5a059;
    margin-bottom: 10px;
}

.delivery-item .phone {
    display: block;
    font-size: 1.8rem;
    font-weight: 300;
    margin-bottom: 5px;
}

.delivery-item small {
    color: #888;
    font-style: italic;
}

/* Logos des plateformes */
.platforms {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.platforms a {
    display: block;
    filter: grayscale(100%); /* On rend les logos noir et blanc pour le chic */
    opacity: 0.6;
    transition: all 0.3s ease;
}

.platforms a:hover {
    filter: grayscale(0%); /* Ils reprennent leurs couleurs au survol */
    opacity: 1;
    transform: scale(1.1);
}

.delivery-logo {
    height: 35px; /* Taille modérée pour ne pas casser le design */
    width: auto;
    object-fit: contain;
}

/* Responsive */
@media (max-width: 768px) {
    .delivery-item.direct a {
        padding: 20px 30px;
    }
    .delivery-item .phone {
        font-size: 1.4rem;
    }
}