/* ========================================================= LA CIGALE — Feuille de style principale ========================================================= */ :root { --green-dark: #12261F; --green: #1F4A3C; --green-light: #2E6350; --gold: #C9A063; --gold-light: #E1C48C; --cream: #F7F2E7; --cream-dark: #EFE7D6; --white: #FFFFFF; --ink: #22261F; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Cormorant Garamond', Georgia, serif; --font-label: 'Jost', 'Segoe UI', sans-serif; --container: 1180px; --radius: 2px; --shadow-soft: 0 20px 50px -20px rgba(18, 38, 31, 0.35); --transition: 0.45s cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 19px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--green-dark); margin: 0 0 .5em; line-height: 1.15; } p { margin: 0 0 1em; } button { font-family: inherit; cursor: pointer; } .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; } section { position: relative; } /* ---------- Utility ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-label); letter-spacing: .28em; text-transform: uppercase; font-size: .78rem; color: var(--gold); margin-bottom: 18px; } .eyebrow::before, .eyebrow::after { content: ""; width: 30px; height: 1px; background: var(--gold); } .eyebrow.left::after { display:none; } .eyebrow.left::before { display:inline-block; } .section-head { text-align: center; max-width: 680px; margin: 0 auto 56px; } .section-head h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); } .section-head p { font-size: 1.2rem; color: #4b5148; } .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; padding: 16px 34px; border: 1px solid var(--gold); border-radius: var(--radius); transition: var(--transition); background: transparent; color: var(--green-dark); } .btn-gold { background: var(--gold); color: var(--green-dark); border-color: var(--gold); } .btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); } .btn-outline { color: var(--cream); border-color: rgba(247,242,231,.6); } .btn-outline:hover { background: rgba(247,242,231,.12); border-color: var(--cream); transform: translateY(-2px); } .btn-outline-dark { color: var(--green-dark); border-color: var(--green-dark); } .btn-outline-dark:hover { background: var(--green-dark); color: var(--cream); } .divider-cigale { display:flex; align-items:center; justify-content:center; gap:16px; margin: 28px 0; } .divider-cigale::before, .divider-cigale::after { content:""; height:1px; width: 60px; background: linear-gradient(90deg, transparent, var(--gold)); } .divider-cigale::after { background: linear-gradient(90deg, var(--gold), transparent); } .divider-cigale img { width: 34px; opacity: .85; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ---------- Header / Nav ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 22px 0; transition: var(--transition); background: linear-gradient(to bottom, rgba(18,38,31,.55), transparent); } .site-header.scrolled { background: rgba(247,242,231,.96); box-shadow: 0 6px 24px rgba(18,38,31,.08); padding: 12px 0; backdrop-filter: blur(6px); } .header-inner { display:flex; align-items:center; justify-content:space-between; gap: 24px; } .brand { display:flex; align-items:center; gap:12px; } .brand img { height: 44px; width:auto; transition: var(--transition); } .site-header.scrolled .brand img { height: 38px; filter:none; } .site-header:not(.scrolled) .brand img { filter: brightness(0) invert(1); } .nav-links { display:flex; align-items:center; gap: 34px; font-family: var(--font-label); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; } .nav-links a { position:relative; padding: 4px 0; color: var(--cream); transition: color .3s; } .site-header.scrolled .nav-links a { color: var(--green-dark); } .nav-links a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background: var(--gold); transition: width .35s; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a:hover { color: var(--gold); } .nav-cta { display:flex; align-items:center; gap: 18px; } .nav-cta .btn { padding: 12px 24px; } .site-header:not(.scrolled) .nav-cta .btn-outline-dark { color: var(--cream); border-color: var(--cream); } .site-header:not(.scrolled) .nav-cta .btn-outline-dark:hover { background: var(--cream); color: var(--green-dark); } .nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; padding: 6px; } .nav-toggle span { width: 26px; height: 2px; background: var(--cream); transition: var(--transition); } .site-header.scrolled .nav-toggle span { background: var(--green-dark); } @media (max-width: 960px) { .nav-toggle { display:flex; } .nav-links { position: fixed; inset: 0 0 0 auto; width: min(340px, 82vw); height: 100vh; background: var(--green-dark); flex-direction: column; justify-content:center; align-items:flex-start; padding: 40px; gap: 26px; transform: translateX(100%); transition: transform .5s cubic-bezier(.22,.61,.36,1); } .nav-links.open { transform: translateX(0); } .nav-links a { color: var(--cream); font-size: 1rem; } .nav-cta { display:none; } } /* ---------- Hero ---------- */ .hero { min-height: 100vh; display:flex; align-items:center; justify-content:center; text-align:center; position: relative; overflow:hidden; background: linear-gradient(180deg, rgba(15,32,26,.55), rgba(15,32,26,.78)), url('../images/interieur/bar-art-nouveau.jpg') center/cover no-repeat; } .hero-inner { position:relative; z-index:2; color: var(--cream); padding: 0 24px; max-width: 820px; } .hero .brand-mark { width: 220px; margin: 0 auto 28px; filter: brightness(0) invert(1); opacity:.95; } .hero h1 { color: var(--cream); font-size: clamp(2.6rem, 6vw, 4.6rem); } .hero .tagline { font-family: var(--font-label); letter-spacing:.3em; text-transform:uppercase; font-size:.85rem; color: var(--gold-light); margin-bottom: 22px; } .hero p.lead { font-size: 1.35rem; color: rgba(247,242,231,.88); max-width: 620px; margin: 0 auto 34px; } .hero-actions { display:flex; gap: 18px; justify-content:center; flex-wrap:wrap; } .hero-scroll { position:absolute; bottom: 34px; left:50%; transform:translateX(-50%); z-index:2; color: var(--cream); opacity:.8; font-family: var(--font-label); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px; } .hero-scroll .line { width:1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: scrollLine 2.2s infinite; } @keyframes scrollLine { 0%{ transform: scaleY(0); transform-origin: top;} 50%{ transform: scaleY(1); transform-origin: top;} 51%{ transform-origin: bottom;} 100%{ transform: scaleY(0); transform-origin: bottom;} } .page-hero { min-height: 56vh; display:flex; align-items:center; justify-content:center; text-align:center; position: relative; margin-top: 0; background: linear-gradient(180deg, rgba(15,32,26,.6), rgba(15,32,26,.75)); background-blend-mode: multiply; background-size: cover; background-position: center; color: var(--cream); padding: 160px 24px 90px; } .page-hero .eyebrow { color: var(--gold-light); } .page-hero .eyebrow::before, .page-hero .eyebrow::after { background: var(--gold-light); } .page-hero h1 { color: var(--cream); font-size: clamp(2.4rem, 5vw, 3.6rem); } .page-hero p { color: rgba(247,242,231,.85); font-size: 1.2rem; max-width: 560px; margin: 0 auto; } /* ---------- Intro / Welcome ---------- */ .intro { padding: 130px 0 100px; } .intro-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center; } .intro-media { position:relative; } .intro-media img { border-radius: var(--radius); box-shadow: var(--shadow-soft); } .intro-media .frame { position:absolute; inset: 20px -20px -20px 20px; border: 1px solid var(--gold); z-index:-1; } .intro-text .eyebrow { justify-content:flex-start; } .intro-text .eyebrow::after { display:none; } .intro-text h2 { font-size: clamp(2rem, 3vw, 2.7rem); } .intro-text p { color: #4b5148; font-size: 1.15rem; } .signature { font-family: var(--font-display); font-style: italic; color: var(--green); font-size: 1.4rem; margin-top: 18px; } @media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; gap: 40px; } .intro-media { order: 2; } } /* ---------- Section shells ---------- */ .section-cream { background: var(--cream); padding: 110px 0; } .section-dark { background: var(--green-dark); color: var(--cream); padding: 110px 0; } .section-dark h2, .section-dark h3 { color: var(--cream); } .section-dark .section-head p { color: rgba(247,242,231,.75); } .section-alt { background: var(--cream-dark); padding: 110px 0; } /* ---------- Menu teaser / cards with 3D tilt ---------- */ .dish-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } .dish-grid.compact { grid-template-columns: repeat(3, 1fr); } .dish-card { perspective: 1000px; } .dish-card-inner { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px -18px rgba(18,38,31,.25); transform-style: preserve-3d; transition: transform .12s ease-out, box-shadow .35s ease; will-change: transform; } .dish-card:hover .dish-card-inner { box-shadow: 0 30px 60px -20px rgba(18,38,31,.4); } .dish-media { height: 260px; overflow:hidden; position:relative; transform: translateZ(40px); } .dish-media img { width:100%; height:100%; object-fit:cover; transition: transform .6s ease; } .dish-card:hover .dish-media img { transform: scale(1.08); } .dish-media::after { content:""; position:absolute; inset:0; box-shadow: inset 0 -60px 40px -30px rgba(0,0,0,.35); } .dish-tag { position:absolute; top:14px; left:14px; background: var(--gold); color: var(--green-dark); font-family: var(--font-label); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding: 6px 12px; border-radius: 20px; transform: translateZ(60px); z-index:2; } .dish-body { padding: 26px 26px 30px; transform: translateZ(20px); } .dish-body .row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom: 8px; } .dish-body h3 { font-size: 1.35rem; margin:0; } .dish-price { font-family: var(--font-label); color: var(--gold); font-weight:600; white-space:nowrap; } .dish-body p { color:#5a5f52; font-size: 1.02rem; margin:0; } @media (max-width: 960px) { .dish-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px) { .dish-grid { grid-template-columns: 1fr; } } /* ---------- Menu page: category tabs ---------- */ .menu-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap: 10px; margin-bottom: 60px; } .menu-tab { font-family: var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; padding: 12px 24px; border:1px solid var(--green); border-radius: 30px; color: var(--green); background:transparent; transition: var(--transition); } .menu-tab.active, .menu-tab:hover { background: var(--green); color: var(--cream); } .menu-category { display:none; } .menu-category.active { display:block; animation: fadeIn .5s ease; } @keyframes fadeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} } .menu-note { text-align:center; max-width: 640px; margin: 60px auto 0; color:#5a5f52; font-style: italic; } /* ---------- Timeline (Histoire) ---------- */ .timeline { position:relative; max-width: 880px; margin: 0 auto; padding-left: 40px; } .timeline::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background: linear-gradient(var(--gold), var(--green-light)); } .timeline-item { position:relative; padding-bottom: 64px; } .timeline-item:last-child { padding-bottom:0; } .timeline-item::before { content:""; position:absolute; left:-40px; top:4px; width:13px; height:13px; border-radius:50%; background: var(--gold); box-shadow: 0 0 0 5px var(--cream); } .timeline-item .year { font-family: var(--font-label); letter-spacing:.16em; text-transform:uppercase; color: var(--gold); font-size:.82rem; margin-bottom:6px; display:block; } .timeline-item h3 { font-size: 1.5rem; margin-bottom:10px; } .timeline-item p { color:#4b5148; font-size:1.1rem; } .section-dark .timeline::before { background: linear-gradient(var(--gold), rgba(247,242,231,.3)); } .section-dark .timeline-item::before { box-shadow: 0 0 0 5px var(--green-dark); } .section-dark .timeline-item p { color: rgba(247,242,231,.78); } /* ---------- Gallery ---------- */ .gallery-grid { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 16px; } .gallery-grid img { width:100%; height:100%; object-fit:cover; border-radius: var(--radius); transition: transform .6s ease, filter .6s ease; filter: saturate(.92); } .gallery-grid a { overflow:hidden; border-radius: var(--radius); display:block; box-shadow: var(--shadow-soft); } .gallery-grid a:hover img { transform: scale(1.08); filter: saturate(1.05); } .gallery-grid .span-2 { grid-column: span 2; } .gallery-grid .span-2-row { grid-row: span 2; } @media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 160px; } } /* ---------- Events ---------- */ .event-list { display:flex; flex-direction:column; gap: 26px; } .event-card { display:grid; grid-template-columns: 220px 1fr auto; gap: 30px; align-items:center; background: var(--white); border-radius: var(--radius); padding: 24px; box-shadow: 0 14px 34px -18px rgba(18,38,31,.2); transition: var(--transition); } .event-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px rgba(18,38,31,.3); } .event-media { position:relative; height: 150px; border-radius: var(--radius); overflow:hidden; } .event-media img { width:100%; height:100%; object-fit:cover; } .event-date { position:absolute; top:10px; left:10px; background: var(--green-dark); color:var(--cream); font-family: var(--font-label); text-align:center; padding: 8px 12px; line-height:1.1; border-radius: 2px; } .event-date .d { font-size:1.3rem; font-weight:600; display:block; } .event-date .m { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-light); } .event-info h3 { font-size:1.5rem; margin-bottom:8px; } .event-info p { color:#5a5f52; margin-bottom: 10px; } .event-meta { display:flex; gap:18px; flex-wrap:wrap; font-family: var(--font-label); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--green); } .event-cta { justify-self:end; } @media (max-width: 760px) { .event-card { grid-template-columns: 1fr; } .event-cta { justify-self:start; } } /* ---------- Testimonials / Press ---------- */ .press-strip { display:flex; justify-content:center; gap:60px; flex-wrap:wrap; opacity:.85; font-family: var(--font-label); letter-spacing:.12em; text-transform:uppercase; font-size:.85rem; } .quote-block { max-width: 780px; margin: 0 auto; text-align:center; } .quote-block p { font-family: var(--font-display); font-style: italic; font-size: 1.7rem; color: var(--cream); line-height:1.5; } .quote-block cite { display:block; margin-top: 20px; font-family: var(--font-label); font-style:normal; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color: var(--gold-light); } /* ---------- CTA banner ---------- */ .cta-banner { padding: 90px 0; text-align:center; background: linear-gradient(180deg, rgba(18,38,31,.82), rgba(18,38,31,.9)), url('../images/interieur/grande-salle.jpg') center/cover fixed; color: var(--cream); } .cta-banner h2 { color: var(--cream); } .cta-banner p { color: rgba(247,242,231,.8); max-width: 560px; margin: 0 auto 30px; font-size:1.2rem; } /* ---------- Reservation form ---------- */ .reservation-wrap { display:grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items:flex-start; } .reservation-info { background: var(--green-dark); color: var(--cream); padding: 46px 40px; border-radius: var(--radius); } .reservation-info h3 { color: var(--cream); } .info-row { display:flex; gap:16px; margin-bottom: 26px; align-items:flex-start; } .info-row .ic { width: 22px; margin-top:4px; color: var(--gold); flex-shrink:0; } .info-row h4 { font-family: var(--font-label); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; color: var(--gold-light); margin: 0 0 4px; } .info-row p { margin:0; color: rgba(247,242,231,.85); } .map-embed { border-radius: var(--radius); overflow:hidden; margin-top: 26px; filter: grayscale(.3) sepia(.15); } .map-embed iframe { width:100%; height: 220px; border:0; display:block; } .res-form { background: var(--white); padding: 46px 42px; border-radius: var(--radius); box-shadow: var(--shadow-soft); } .form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { display:flex; flex-direction:column; gap: 8px; margin-bottom: 20px; } .form-group.full { grid-column: 1 / -1; } .form-group label { font-family: var(--font-label); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color: var(--green); } .form-group input, .form-group select, .form-group textarea { font-family: var(--font-body); font-size: 1.05rem; padding: 13px 16px; border: 1px solid #d8d0bd; border-radius: var(--radius); background: var(--cream); color: var(--ink); transition: border-color .3s, box-shadow .3s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,160,99,.18); } .form-group textarea { resize: vertical; min-height: 100px; } .form-note { font-size: .92rem; color: #6a6f61; margin-top: -6px; margin-bottom: 20px; } .form-submit { width:100%; justify-content:center; padding: 17px; font-size:.85rem; } .form-status { margin-top: 16px; font-family: var(--font-label); font-size:.85rem; display:none; padding: 12px 16px; border-radius: var(--radius); } .form-status.show { display:block; } .form-status.success { background: #e3f0e6; color: #235c2e; } .form-status.error { background: #f5e2e0; color: #8a2f27; } @media (max-width: 900px) { .reservation-wrap { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } } /* ---------- Contact details grid ---------- */ .contact-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; text-align:center; margin-bottom: 90px; } .contact-card { padding: 40px 26px; border: 1px solid var(--cream-dark); border-radius: var(--radius); background: var(--white); } .contact-card .ic { width:34px; margin: 0 auto 18px; color: var(--gold); } .contact-card h3 { font-size:1.3rem; } .contact-card p { color:#5a5f52; margin:0; } @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .site-footer { background: var(--green-dark); color: rgba(247,242,231,.8); padding: 80px 0 30px; } .footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 50px; margin-bottom: 60px; } .footer-brand img { height: 46px; filter: brightness(0) invert(1); margin-bottom: 18px; } .footer-brand p { color: rgba(247,242,231,.65); font-size:1.02rem; max-width: 320px; } .footer-col h4 { font-family: var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color: var(--gold-light); margin-bottom: 20px; } .footer-col ul li { margin-bottom: 12px; } .footer-col a { color: rgba(247,242,231,.75); transition: color .3s; font-size:1.02rem; } .footer-col a:hover { color: var(--gold); } .footer-social { display:flex; gap: 14px; margin-top: 20px; } .footer-social a { width: 38px; height:38px; border:1px solid rgba(247,242,231,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: var(--transition); } .footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--green-dark); } .footer-bottom { border-top: 1px solid rgba(247,242,231,.15); padding-top: 26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.85rem; color: rgba(247,242,231,.55); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- Back to top ---------- */ .to-top { position:fixed; bottom: 30px; right: 30px; width:46px; height:46px; border-radius:50%; background: var(--green-dark); color: var(--cream); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: var(--transition); z-index: 900; border: none; } .to-top.show { opacity: 1; pointer-events:auto; } .to-top:hover { background: var(--gold); color: var(--green-dark); transform: translateY(-4px); } /* ---------- Responsive base ---------- */ @media (max-width: 620px) { body { font-size: 17px; } .intro, .section-cream, .section-dark, .section-alt { padding: 80px 0; } .container { padding: 0 20px; } } .cigale-page-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; border-bottom: 2px solid var(--gold); padding-bottom: 15px; } .cigale-page-tabs button { background: transparent; border: none; font-family: var(--font-label); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-dark); cursor: pointer; padding: 8px 16px; position: relative; } .cigale-page-tabs button.active { color: var(--gold); font-weight: 600; } .cigale-page-tabs button.active::after { content: ''; position: absolute; bottom: -17px; left: 0; right: 0; height: 2px; background: var(--gold); } .cigale-page { display: none; } .cigale-page.active { display: block; } /* ========================================================= LA CIGALE — Script principal ========================================================= */ document.addEventListener('DOMContentLoaded', () => { /* ---- Header : fond au scroll ---- */ const header = document.querySelector('.site-header'); const onScroll = () => { if (window.scrollY > 60) header.classList.add('scrolled'); else header.classList.remove('scrolled'); const toTop = document.querySelector('.to-top'); if (toTop) toTop.classList.toggle('show', window.scrollY > 700); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); /* ---- Menu mobile ---- */ const navToggle = document.querySelector('.nav-toggle'); const navLinks = document.querySelector('.nav-links'); if (navToggle && navLinks) { navToggle.addEventListener('click', () => { navLinks.classList.toggle('open'); }); navLinks.querySelectorAll('a').forEach(a => a.addEventListener('click', () => navLinks.classList.remove('open')) ); } /* ---- Lien de nav actif selon la page ---- */ const current = window.location.pathname.split('/').pop() || 'index.html'; document.querySelectorAll('.nav-links a[href]').forEach(a => { if (a.getAttribute('href') === current) a.classList.add('active'); }); /* ---- Retour en haut ---- */ const toTop = document.querySelector('.to-top'); if (toTop) { toTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' })); } /* ---- Révélation au scroll ---- */ const revealEls = document.querySelectorAll('.reveal'); if ('IntersectionObserver' in window && revealEls.length) { const io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('in-view'); io.unobserve(entry.target); } }); }, { threshold: 0.15 }); revealEls.forEach(el => io.observe(el)); } else { revealEls.forEach(el => el.classList.add('in-view')); } /* ---- Effet "3D" tilt sur les cartes plats ---- */ const tiltCards = document.querySelectorAll('.dish-card'); const isTouch = window.matchMedia('(hover: none)').matches; if (!isTouch) { tiltCards.forEach(card => { const inner = card.querySelector('.dish-card-inner'); const strength = 12; card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width - 0.5; const y = (e.clientY - rect.top) / rect.height - 0.5; inner.style.transform = `rotateY(${x * strength}deg) rotateX(${-y * strength}deg) scale3d(1.02,1.02,1.02)`; }); card.addEventListener('mouseleave', () => { inner.style.transform = 'rotateY(0deg) rotateX(0deg) scale3d(1,1,1)'; }); }); } /* ---- Onglets de la carte (menu.html) ---- */ const tabs = document.querySelectorAll('.menu-tab'); const categories = document.querySelectorAll('.menu-category'); if (tabs.length) { tabs.forEach(tab => { tab.addEventListener('click', () => { tabs.forEach(t => t.classList.remove('active')); categories.forEach(c => c.classList.remove('active')); tab.classList.add('active'); document.getElementById(tab.dataset.target).classList.add('active'); }); }); } /* ---- Formulaire de réservation ---- */ const form = document.querySelector('.res-form'); if (form) { form.addEventListener('submit', async (e) => { e.preventDefault(); const status = form.querySelector('.form-status'); const submitBtn = form.querySelector('.form-submit'); const originalLabel = submitBtn.innerHTML; submitBtn.disabled = true; submitBtn.innerHTML = 'Envoi en cours…'; const showStatus = (type, message) => { status.textContent = message; status.className = `form-status show ${type}`; }; const action = form.getAttribute('action') || ''; const placeholder = action.includes('VOTRE_ID_FORMSPREE'); if (placeholder) { // Aucun service d'envoi n'est encore branché : on informe clairement plutôt que de simuler un succès trompeur. showStatus('error', "La demande n'a pas pu être envoyée : le formulaire n'est pas encore connecté à un service d'email (voir instructions dans contact.html). Merci de nous appeler directement en attendant."); submitBtn.disabled = false; submitBtn.innerHTML = originalLabel; return; } try { const res = await fetch(action, { method: 'POST', body: new FormData(form), headers: { Accept: 'application/json' } }); if (res.ok) { showStatus('success', 'Merci ! Votre demande de réservation a bien été envoyée. Notre équipe vous confirmera votre table sous 24h.'); form.reset(); } else { showStatus('error', "Une erreur est survenue lors de l'envoi. N'hésitez pas à nous appeler directement pour réserver."); } } catch (err) { showStatus('error', "Impossible d'envoyer la demande pour le moment. Merci de nous contacter par téléphone."); } finally { submitBtn.disabled = false; submitBtn.innerHTML = originalLabel; } }); } }); document.querySelectorAll('.cigale-tab-btn').forEach(btn => { btn.addEventListener('click', function() { const page = this.getAttribute('data-page'); document.querySelectorAll('.cigale-tab-btn').forEach(b => b.classList.remove('active')); document.querySelectorAll('.cigale-page').forEach(p => p.classList.remove('active')); this.classList.add('active'); document.getElementById('page-' + page).classList.add('active'); window.scrollTo(0, 0); }); });