/* PRINCIPALE */
body, html {margin: 0; font-family: Arial, sans-serif; }
* { box-sizing: border-box; }
nav {margin-top: 10px; }
nav a {margin: 0 15px; text-decoration: none; color: white; font-weight: bold; }
.logo {position: absolute; left: 20px; top: 40px; transform: translateY(-50%); width: 170px; height: 150px; }
.btn-cta-header{display: inline-block; padding: 15px 35px; background-color: #C4C4C4; color: #3B3B3B; font-weight: bold; text-decoration: none;
    position: absolute; right: 20px; transform: translateY(50%) }

/* HEADER PRINCIPALE */
.header-home {background: url('./image/Salle.jpg') center/cover; position: relative; color: white; padding: 20px; text-align: center; height: 100vh;
    max-height: 650px; }
.header-home::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.25)); z-index: 1; }
.header-home-content {position: relative; z-index: 2; color: white; }
.center-content {display: flex; flex-direction: column; align-items: center; gap: 10px; color: white; }

/* HEADER MENU */
.header-menu {color: white; padding: 20px; text-align: center; background: #0f0f0f; }

/* HEADER CONTACT */
.header-contact {background: #2c3e50; color: white; padding: 40px; text-align: center; }

/* TITRE */
.section-header {text-align: center; margin-bottom: 60px; }
.section-subtitle {text-transform: uppercase; font-size: 0.9rem; letter-spacing: 3px; color: #c59d5f; margin-bottom: 10px; }
.section-header h1 {font-size: 2.8rem; font-weight: 600; }
.title-separator {width: 80px; height: 3px; background: #c59d5f; margin: 15px auto 50px auto; border-radius: 5px; }

/* PAGE PRINCIPALE */
.hero {height: 50vh; display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 20px; padding: 0 20px;
    position: relative; z-index: 2; }
.hero-title {font-size: 2.5rem; color: rgba(255, 255, 255, 0.9); opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
.hero-text {font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); max-width: 700px; opacity: 0; transform: translateY(20px);
    transition: opacity 1s ease 0.3s, transform 1s ease 0.3s; }

/* Bouton Réserver */
.btn-cta {display: inline-block; padding: 15px 35px; background-color: #e74c3c; color: white; font-weight: bold; text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; transform: translateY(20px); }
.btn-cta:hover {transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.3); }

/* Bouton accès menu page principale */
.btn-menu {margin: 0 15px; color: white; font-weight: bold; display: inline-block; padding: 15px 30px; background-color: #e74c3c; text-decoration: none;
    border-radius: 5px; transition: 0.3s; }
.btn-menu:hover {background-color: #c0392b; transform: scale(1.05); }

/* Section Gallery page principale */
.gallery {padding: 60px 20px; background: #f8f8f8; text-align: center; }
.gallery h2 {font-size: 32px; margin-bottom: 60px; }
.gallery h2::after {content: ""; display: block; width: 100px; height: 4px; margin: 15px auto 40px auto; background: #c59d5f; border-radius: 10px; }
.gallery-grid {column-count: 3; column-gap: 25px; max-width: 1200px; margin: auto; }
.gallery-card {break-inside: avoid; margin-bottom: 25px; text-align: left;}
.gallery-card h3 {margin-bottom: 10px; font-size: 18px; }
.gallery-card img {width: 100%; border-radius: 12px; display: block; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.gallery-card img:hover {transform: scale(1.03); box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.reveal {opacity: 0; transform: translateY(40px); transition: 0.8s ease; }
.reveal.active {opacity: 1; transform: translateY(0); }

/* Section Menu page principale */
.menu-home{background: url('./image/Repas-Menu2.jpg') center/cover; background-attachment: fixed; position: relative; padding: 20px; height: 70vh; display: flex;
    text-align: center; justify-content: center;  align-items: center; flex-direction: column; }
.menu-home::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: rgba(0, 0, 0, 0.1); z-index: 1; }
.menu-home-content {position: relative; z-index: 2; }

/* Section Event page principale */
.events-section {padding: 60px 20px; text-align: center; background: #f8f8f8; overflow-x: hidden; }
.events-section h2{font-size: 32px; margin-bottom: 50px; position: relative; }
.events-section h2::after {content: ""; display: block; width: 100px; height: 4px; margin: 15px auto 40px auto; background: #c59d5f; border-radius: 10px; }
.events-grid {display: flex; gap: 30px;flex-wrap: nowrap; transition: transform 0.5s ease; }
.events-wrapper {overflow-x: hidden; padding: 20px; }
.event-card {min-width: 300px; background: white; border-radius: 15px; flex: 0 0 300px; max-width: 100%; }
.event-card img {width: 100%; height: 200px; object-fit: cover; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.event-card h3{font-size: 1.2rem; margin: 15px; color: #0f0f0f; }
.event-card p {font-size: 0.95rem; margin: 0 15px 15px 15px; color: #555; }
.event-card span {display: block; margin: 0 15px 15px 15px; font-weight: bold; color: #c59d5f; }
.event-card:hover {transform: scale(1.03);  box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.slider-container {width: 100%; position: relative; max-width: 1100px; margin: auto; padding: 0 60px; }
.slider-btn {position: absolute; top: 50%; transform: translateY(-50%); background: #c59d5f; color: white; border: none; font-size: 20px; padding: 10px 15px;
    border-radius: 50%; cursor: pointer; }
.slider-btn.prev { left: 0; }
.slider-btn.next { right: 0; }

/* Fade-in au scroll */
.reveal {opacity: 0; transform: translateY(40px); transition: 0.8s ease; }
.reveal.active {opacity: 1; transform: translateY(0); }


/* MENU */
.menu-section {padding: 50px; text-align: center; }
.menu-section h2{color: #0f0f0f; }
.menu-section h2::after{content: ""; display: block; width: 100px; height: 4px; margin: 15px auto 30px auto; background: #c59d5f; border-radius: 10px; }
.separator{content: ""; display: block; width: 100%; height: 1px; margin: 30px auto 30px auto; background: #ADADAD; border-radius: 10px; }
#menu-menu {display: flex; justify-content: center; gap: 100px; flex-wrap: wrap; }
.menu-card h3{font-size: 22px; margin-bottom: 10px; }
.description {font-size: 14px; color: #777; margin-bottom: 20px; }
.price {font-size: 22px; font-weight: bold; color: #c59d5f; }
.menu-image img {width: 300px; height: 300px; object-fit: cover; border-radius: 10px; display: block; transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0; transform: scale(0.8) rotate(-3deg);  }
.menu-image.visible img {opacity: 1; transform: scale(1) rotate(0deg); }
.menu-image img:hover {transform: scale(1.03); box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.menu-image {display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; align-items: stretch; }
.btn-download {display: inline-block; background-color: #c59d5f; color: white; font-weight: 600; padding: 15px 30px; border-radius: 30px; text-decoration: none;
    font-size: 1.1rem; transition: transform 0.3s ease, box-shadow 0.3s ease; margin-top: 30px; }
.btn-download:hover {transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.menu-pdf-button {text-align: center; }


/* CONTACT */
.contact-section {padding: 50px; }
.contact-container {display: flex; gap: 50px; max-width: 1200px; margin: 50px auto; align-items: center; }
.contact-info {flex: 1; }
.contact-section form {margin-top: 20px; display: flex; flex-direction: column; gap: 15px; max-width: 400px; }
.contact-section input,
.contact-section textarea {padding: 10px; border-radius: 5px; border: 1px solid #ccc; }
.contact-section button {padding: 10px; background-color: #c0392b; color: white; border: none; border-radius: 5px; cursor: pointer; }
.map-container {flex: 1; }
.map-container iframe {width: 100%; height: 400px; border-radius: 15px; border: none; }
.toast {position: fixed; top: 20px; right: 20px; padding: 15px 25px; border-radius: 8px; color: white; font-weight: 500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); opacity: 0; transform: translateY(-20px); animation: slideIn 0.4s forwards, fadeOut 0.4s 3s forwards;
    z-index: 9999; }
.toast.success {
    background-color: #28a745;
}
.toast.error {
    background-color: #dc3545;
}
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}


/* Footer */
.footer {background: #0f0f0f; color: #fff; padding: 25px 40px; font-size: 14px; }
.footer::before {content: ""; display: block; width: 200px; height: 2px; margin: 0 auto 30px auto;
    background: linear-gradient(to right, transparent, #c59d5f, transparent );
}
.footer-main {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-item {display: flex; align-items: center; gap: 8px; color: #ccc; }
.footer-item i {color: #c59d5f; }
.footer-socials a {color: #ccc; margin-left: 15px; font-size: 18px; transition: 0.3s; }
.footer-socials a:hover {color: #c59d5f; transform: scale(1.2); }
.footer-bottom {margin-top: 20px; padding-top: 15px; border-top: 1px solid #222; display: flex; justify-content: space-between; flex-wrap: wrap; color: #888;
    font-size: 12px; }
.footer-bottom a {margin-left: 15px; color: #888; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }



/* Télephone*/
@media (max-width: 992px) {
    .gallery-grid {column-count: 2; }
}
@media (max-width: 600px) {
    .gallery-grid {column-count: 1; }

    .event-card {flex: 0 0 45%; min-width: 100px; }
    .events-wrapper {overflow: hidden; overflow-x: auto; display: flex; }
    .slider-btn {display: none; }
    
    .contact-container {flex-direction: column; }
    
    .logo {width: 90px; height: auto; top: 20px; left: -20px; right: 0px; bottom: 0px }
    .btn-cta-header {padding: 10px 10px; font-size: 0.9rem; top: -15px; right: 0px; }
    .center-content {width: 90%; }
    .center-content h1 {font-size: 1.2rem; }
    .hero-title {font-size: 1.2rem; }
}