/* ============================================ LE BISTROT DES FRANGINS Trouville-sur-Mer ============================================ */ /* --- Fonts (loaded via Google Fonts in HTML ) --- */ /* --- Variables --- */ :root { --green: #1f351f; --burgundy: #89342d; --brown: #401b13; --gold: #d6bd95; --cream: #fff4e3; --dark: #1c1916; --white: #ffffff; --font-heading: 'Spectral', Georgia, 'Times New Roman', serif; --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif; } /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); color: var(--dark); background-color: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: color 0.3s ease, opacity 0.3s ease; } ul { list-style: none; } /* --- Typography Scale --- */ /* min: 1rem (16px) | body: 1.05-1.125rem | headings: clamp */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.15; } h1 { font-size: clamp(2.8rem, 5.5vw, 4.5rem); } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: clamp(1.5rem, 3vw, 2rem); } .italic { font-style: italic; } /* --- Container --- */ .container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; } .container--wide { max-width: 1300px; } /* --- Decorative separator --- */ .separator { display: block; width: 60px; height: 1px; background-color: var(--gold); margin: 2rem 0; } .separator--center { margin-left: auto; margin-right: auto; } /* ===================== GRAIN OVERLAY ===================== */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } /* ===================== HEADER / NAV ===================== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background-color 0.5s ease, box-shadow 0.5s ease, padding 0.5s ease; padding: 0.5rem 0; } .header--scrolled { background-color: rgba(28, 25, 22, 0.97); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); padding: 0; backdrop-filter: blur(10px); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2.5rem; max-width: 1400px; margin: 0 auto; } .nav__logo img { height: 80px; width: auto; filter: sepia(1) saturate(0.2) brightness(2); transition: filter 0.4s ease, height 0.4s ease; } .header--scrolled .nav__logo img { height: 55px; filter: sepia(1) saturate(0.2) brightness(2); } .nav__links { display: flex; align-items: center; gap: 2.25rem; } .nav__links a { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--white); letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s ease; position: relative; } .nav__links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background-color: var(--gold); transition: width 0.3s ease; } .nav__links a:hover::after { width: 100%; } .nav__links a:hover { color: var(--gold); } .nav__links .btn--reservation { border: 1px solid var(--gold); color: var(--gold); padding: 0.55rem 1.5rem; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.3s ease; } .nav__links .btn--reservation::after { display: none; } .nav__links .btn--reservation:hover { background-color: var(--gold); color: var(--dark); } /* Hamburger */ .nav__hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1001; padding: 4px; background: none; border: none; } .nav__hamburger span { width: 28px; height: 1.5px; background-color: var(--cream); transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: center; } .nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav__hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ===================== HERO ===================== */ .hero { position: relative; height: 100vh; min-height: 650px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(28, 25, 22, 0.45) 0%, rgba(28, 25, 22, 0.3) 40%, rgba(28, 25, 22, 0.5) 100% ); } .hero__content { position: relative; text-align: center; color: var(--white); padding: 2rem; max-width: 700px; } .hero__content h1 { color: var(--cream); margin-bottom: 1rem; font-weight: 300; letter-spacing: -0.01em; } .hero__content h1 .italic { color: var(--gold); font-weight: 400; } .hero__subtitle { font-family: var(--font-body); font-size: 1.1rem; font-weight: 300; color: rgba(255, 244, 227, 0.9); max-width: 520px; margin: 0 auto; line-height: 1.75; letter-spacing: 0.01em; text-align: justify; text-align-last: center; } .hero-intro .hero__subtitle { color: rgba(28, 25, 22, 0.65); text-align: center; } .hero__cta { display: flex; gap: 1.25rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; } /* Hero clean (no text overlay, maquette style) */ .hero--clean { height: 75vh; min-height: 500px; } .hero--clean .hero__bg::after { background: linear-gradient( to bottom, rgba(28, 25, 22, 0.35) 0%, rgba(28, 25, 22, 0.1) 40%, rgba(28, 25, 22, 0.25) 100% ); } /* Hero intro section (below hero, maquette style) */ .hero-intro { padding: 5rem 0; } .hero-intro__content { text-align: center; max-width: 700px; margin: 0 auto; } .hero-intro__content h1 { font-family: var(--font-heading); font-size: clamp(2.8rem, 5.5vw, 4.5rem); font-weight: 300; color: var(--dark); margin-bottom: 1rem; line-height: 1.15; } .hero-intro__content h1 .italic { color: var(--burgundy); font-weight: 400; } /* Hero sub-pages */ .hero--sub { height: 50vh; min-height: 380px; } .hero--sub .hero__content h1 { font-size: clamp(2.5rem, 5vw, 4rem); } /* ===================== BUTTONS ===================== */ .btn { display: inline-block; font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; padding: 0.85rem 2.25rem; border: 1px solid; cursor: pointer; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); letter-spacing: 0.1em; text-transform: uppercase; background: none; } .btn--outline-dark { color: var(--dark); border-color: var(--dark); } .btn--outline-dark:hover { background-color: var(--dark); color: var(--cream); } .btn--outline-burgundy { color: var(--burgundy); border-color: var(--burgundy); } .btn--outline-burgundy:hover { background-color: var(--burgundy); color: var(--cream); } .btn--filled-burgundy { color: var(--cream); background-color: var(--burgundy); border-color: var(--burgundy); } .btn--filled-burgundy:hover { background-color: var(--brown); border-color: var(--brown); } .btn--outline-gold { color: var(--gold); border-color: var(--gold); } .btn--outline-gold:hover { background-color: var(--gold); color: var(--dark); } .btn--outline-cream { color: var(--cream); border-color: rgba(255, 244, 227, 0.5); } .btn--outline-cream:hover { background-color: var(--cream); color: var(--dark); border-color: var(--cream); } /* ===================== SECTIONS ===================== */ .section { padding: 7rem 0; position: relative; } .section--cream { background-color: var(--cream); } .section--white { background-color: var(--white); } .section--green { background-color: var(--green); color: var(--cream); } .section--burgundy { background-color: var(--burgundy); color: var(--cream); } .section--brown { background-color: var(--brown); color: var(--cream); } .section--dark { background-color: var(--dark); color: var(--cream); } .section__eyebrow { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--burgundy); margin-bottom: 1rem; } .section--green .section__eyebrow, .section--burgundy .section__eyebrow, .section--brown .section__eyebrow, .section--dark .section__eyebrow { color: var(--gold); } .section__title { font-family: var(--font-heading); font-style: italic; font-weight: 400; margin-bottom: 1.5rem; letter-spacing: -0.01em; } .section--green .section__title, .section--burgundy .section__title, .section--brown .section__title, .section--dark .section__title { color: var(--cream); } .section__text { font-size: 1.05rem; line-height: 1.75; max-width: 560px; color: rgba(28, 25, 22, 0.75); text-align: justify; } .section--green .section__text, .section--burgundy .section__text, .section--brown .section__text, .section--dark .section__text { color: rgba(255, 244, 227, 0.75); } .section__text + .section__text { margin-top: 1.25rem; } /* ===================== CONCEPT (Home) ===================== */ .concept { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .concept__images { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .concept__images img { width: 100%; height: 280px; object-fit: cover; transition: transform 0.6s ease; } .concept__images img:hover { transform: scale(1.02); } /* ===================== MENU PREVIEW (Home) ===================== */ .menu-preview { text-align: center; } .menu-preview .section__title { color: var(--cream); } .menu-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: 3rem 0; } .menu-gallery img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.6s ease, filter 0.6s ease; filter: brightness(0.9); } .menu-gallery img:hover { transform: scale(1.03); filter: brightness(1); } /* ===================== INSTAGRAM ===================== */ .instagram { text-align: center; } .instagram__title { font-family: var(--font-heading); font-weight: 400; font-style: italic; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 2.5rem; letter-spacing: -0.01em; color: var(--green); } .instagram__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-width: 720px; margin: 0 auto 2.5rem; } .instagram__item { aspect-ratio: 1; background-color: #ddd3c3; overflow: hidden; position: relative; } .instagram__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); } .instagram__item:hover img { transform: scale(1.08); } /* Instagram embed container */ .instagram-embed { max-width: 900px; margin: 0 auto 2rem; min-height: 400px; } /* ===================== ABOUT: CONCEPT ===================== */ .about-concept { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .about-concept__image { width: 100%; height: 520px; object-fit: cover; } .section--green .section__eyebrow { font-family: var(--font-heading); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--gold); } /* ===================== ABOUT: HISTOIRE ===================== */ .about-histoire { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .team-member { background-color: #ddd3c3; aspect-ratio: 3/4; display: flex; align-items: flex-end; padding: 1.5rem; position: relative; overflow: hidden; } .team-member img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .team-member__name { position: relative; font-family: var(--font-heading); font-size: 1.1rem; color: var(--burgundy); font-style: italic; } .team-member:first-child { grid-row: 1; } .team-member:nth-child(2) { grid-column: 2; grid-row: 1 / 3; margin-top: 3rem; } .team-member:nth-child(3) { grid-row: 2; } /* ===================== CARTE: MENU ===================== */ .carte-intro { text-align: center; max-width: 680px; margin: 0 auto 4rem; } .carte-intro .section__eyebrow { font-family: var(--font-heading); font-style: italic; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--burgundy); margin-bottom: 0.75rem; } .carte-intro p { font-size: 1.05rem; line-height: 1.75; margin-top: 1rem; color: rgba(28, 25, 22, 0.6); text-align: justify; } .menu-section { margin-bottom: 4.5rem; } .menu-section__title { font-family: var(--font-heading); font-style: italic; font-size: clamp(2rem, 3vw, 2.5rem); color: var(--dark); margin-bottom: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gold); } .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 5rem; margin-top: 2rem; } .menu-item { padding-bottom: 1rem; border-bottom: 1px solid rgba(214, 189, 149, 0.25); } .menu-item__header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.35rem; } .menu-item__name { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--dark); } .menu-item__price { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--burgundy); white-space: nowrap; } .menu-item__desc { font-size: 1rem; color: rgba(28, 25, 22, 0.6); line-height: 1.65; text-align: justify; } /* Special items */ .menu-special { background-color: var(--gold); color: var(--brown); padding: 1.5rem 2rem; margin-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .menu-special__title { font-family: var(--font-heading); font-style: italic; font-size: 1.15rem; } .menu-special__desc { font-size: 1rem; opacity: 0.8; white-space: nowrap; } /* Maturations */ .maturations { background-color: var(--dark); color: var(--cream); padding: 3.5rem; margin: 2rem 0; position: relative; } .maturations::before { content: ''; position: absolute; top: 1.5rem; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; border: 1px solid rgba(214, 189, 149, 0.15); pointer-events: none; } .maturations__title { font-family: var(--font-heading); font-style: italic; font-size: 1.75rem; margin-bottom: 2rem; color: var(--gold); } .maturations__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 5rem; } .maturations__item { border-bottom: 1px solid rgba(214, 189, 149, 0.15); padding-bottom: 1rem; } .maturations__item-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .maturations__item-name { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; } .maturations__item-price { font-family: var(--font-heading); color: var(--gold); white-space: nowrap; font-size: 1.05rem; } .maturations__item-desc { font-size: 1rem; opacity: 0.4; margin-top: 0.3rem; } .maturations__accomp { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(214, 189, 149, 0.2); } .maturations__accomp h4 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--gold); margin-bottom: 1rem; font-style: italic; } .maturations__accomp ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .maturations__accomp li { font-size: 1rem; opacity: 0.7; } /* Menu sections on dark backgrounds (carte page) */ .carte-section { padding: 4rem 0; } .menu-section--dark .menu-section__title { color: var(--cream); border-bottom-color: rgba(214, 189, 149, 0.3); } .menu-section--dark .menu-item__name { color: var(--cream); } .menu-section--dark .menu-item__price { color: var(--gold); } .menu-section--dark .menu-item__desc { color: rgba(255, 244, 227, 0.6); } .menu-section--dark .menu-item { border-bottom-color: rgba(214, 189, 149, 0.15); } .menu-section--dark .menu-special { background-color: var(--gold); color: var(--brown); } /* Ardoise CTA */ .ardoise-cta { text-align: center; padding: 4rem 0; } .ardoise-cta__title { font-family: var(--font-heading); font-weight: 400; font-style: italic; font-size: 1.5rem; margin-bottom: 0.5rem; } .ardoise-cta__sub { font-size: 1.05rem; color: rgba(28, 25, 22, 0.5); margin-bottom: 2.5rem; letter-spacing: 0.02em; } /* ===================== NOS ADRESSES ===================== */ .adresses-intro { text-align: center; max-width: 600px; margin: 0 auto 2rem; } .adresses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; } .adresse-card { background-color: var(--white); padding: 2.5rem; position: relative; transition: transform 0.4s ease, box-shadow 0.4s ease; overflow: hidden; } .adresse-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background-color: var(--burgundy); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .adresse-card:hover::before { transform: scaleX(1); } .adresse-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(28, 25, 22, 0.1); } .adresse-card--active { border: 2px solid var(--burgundy); } .adresse-card--active::before { transform: scaleX(1); background-color: var(--gold); } .adresse-card__name { font-family: var(--font-heading); font-style: italic; font-size: 1.5rem; color: var(--dark); margin-bottom: 0.75rem; } .adresse-card__location { font-size: 0.875rem; color: rgba(28, 25, 22, 0.4); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.25rem; } .adresse-card__desc { font-size: 1rem; line-height: 1.75; color: rgba(28, 25, 22, 0.6); margin-bottom: 1.5rem; text-align: justify; } .adresse-card__address { font-size: 1rem; color: rgba(28, 25, 22, 0.6); line-height: 1.65; padding-top: 1rem; border-top: 1px solid rgba(214, 189, 149, 0.3); } .adresse-card__link { display: inline-block; margin-top: 1.25rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--burgundy); position: relative; } .adresse-card__link::after { content: ' \2192'; } .adresse-card__link:hover { color: var(--brown); } /* Adresse cards on dark backgrounds */ .section--dark .adresses-intro .section__text { color: rgba(255, 244, 227, 0.6); } .section--dark .adresse-card { background-color: rgba(255, 244, 227, 0.06); border: 1px solid rgba(214, 189, 149, 0.12); } .section--dark .adresse-card--active { border: 2px solid var(--gold); } .section--dark .adresse-card--active::before { background-color: var(--gold); } .section--dark .adresse-card__name { color: var(--cream); } .section--dark .adresse-card__location { color: var(--gold); } .section--dark .adresse-card__desc { color: rgba(255, 244, 227, 0.6); } .section--dark .adresse-card__address { color: rgba(255, 244, 227, 0.5); border-top-color: rgba(214, 189, 149, 0.15); } .section--dark .adresse-card__link { color: var(--gold); } .section--dark .adresse-card:hover { background-color: rgba(255, 244, 227, 0.1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } /* ===================== FOOTER ===================== */ .footer { background-color: var(--dark); color: var(--cream); padding: 3rem 0; position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: rgba(214, 189, 149, 0.15); } .footer__inner { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 2rem; } .footer__brand { display: flex; align-items: center; gap: 1.5rem; } .footer__logo img { height: 50px; width: auto; filter: sepia(1) saturate(0.2) brightness(2); } .footer__info p { font-size: 1rem; line-height: 1.75; opacity: 0.6; text-align: justify; } .footer__info p:first-child { font-family: var(--font-heading); font-size: 1.05rem; opacity: 1; font-style: italic; } .footer__nav { display: flex; flex-direction: column; gap: 0.5rem; } .footer__nav a { font-size: 1rem; opacity: 0.6; letter-spacing: 0.05em; transition: opacity 0.3s ease, color 0.3s ease; } .footer__nav a:hover { opacity: 1; color: var(--gold); } .footer__social { text-align: right; } .footer__social p { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; opacity: 0.8; } .footer__social-icons { display: flex; gap: 0.75rem; justify-content: flex-end; } .footer__social-icons a { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 244, 227, 0.3); opacity: 0.8; transition: opacity 0.3s ease, border-color 0.3s ease; } .footer__social-icons a:hover { opacity: 1; border-color: var(--gold); } .footer__social-icons svg { width: 18px; height: 18px; fill: var(--cream); } /* ===================== SCROLL TO TOP ===================== */ .scroll-top { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; border-radius: 50%; background-color: var(--burgundy); color: var(--cream); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; z-index: 998; } .scroll-top.visible { opacity: 1; visibility: visible; } .scroll-top:hover { background-color: var(--brown); transform: translateY(-2px); } .scroll-top svg { width: 18px; height: 18px; fill: var(--cream); } /* ===================== CONTACT PAGE ===================== */ .contact-reservation { text-align: center; } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; text-align: center; } .contact-block__title { font-family: var(--font-heading); font-style: italic; font-size: 1.5rem; color: var(--burgundy); margin-bottom: 1rem; } .contact-block__text { font-size: 1.05rem; line-height: 1.75; color: rgba(28, 25, 22, 0.65); } .contact-block__text a { color: var(--burgundy); border-bottom: 1px solid rgba(137, 52, 45, 0.3); transition: border-color 0.3s ease; } .contact-block__text a:hover { border-color: var(--burgundy); } .contact-block__link { display: inline-block; margin-top: 1rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--burgundy); } .contact-block__link::after { content: ' \2192'; } .contact-block__link:hover { color: var(--brown); } .contact-map-section { padding: 0; } .contact-map iframe { display: block; width: 100%; min-height: 400px; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } } /* ===================== ANIMATIONS ===================== */ .fade-in { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), transform 1s cubic-bezier(0.23, 1, 0.32, 1); } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Staggered children */ .fade-in-stagger > * { opacity: 0; transform: translateY(25px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); } .fade-in-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); } .fade-in-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); } .fade-in-stagger.visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); } /* ===================== MOBILE NAV OVERLAY ===================== */ .nav__overlay { display: none; position: fixed; inset: 0; background-color: var(--dark); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; } .nav__overlay.active { display: flex; } .nav__overlay a { font-family: var(--font-heading); font-size: 1.75rem; color: var(--cream); font-style: italic; transition: color 0.3s ease; } .nav__overlay a:hover { color: var(--gold); } /* ===================== RESPONSIVE ===================== */ @media (max-width: 900px) { .nav__links { display: none; } .nav__hamburger { display: flex; } .concept { grid-template-columns: 1fr; gap: 2.5rem; } .concept__images { order: -1; } .menu-gallery { grid-template-columns: repeat(2, 1fr); } .about-concept { grid-template-columns: 1fr; gap: 2.5rem; } .about-concept__image { height: 350px; } .about-histoire { grid-template-columns: 1fr; gap: 3rem; } .menu-grid { grid-template-columns: 1fr; } .maturations__grid { grid-template-columns: 1fr; } .maturations__accomp ul { grid-template-columns: 1fr; } .adresses-grid { grid-template-columns: 1fr; } .footer__inner { flex-direction: column; text-align: center; } .footer__brand { flex-direction: column; } .footer__social { text-align: center; } .footer__social-icons { justify-content: center; } .team-grid { max-width: 400px; margin: 0 auto; } .menu-special { flex-direction: column; text-align: center; gap: 0.5rem; } } @media (max-width: 600px) { .hero { min-height: 500px; } .section { padding: 5rem 0; } .instagram__grid { grid-template-columns: repeat(2, 1fr); } .maturations { padding: 2.5rem 1.5rem; } .maturations::before { top: 1rem; left: 1rem; right: 1rem; bottom: 1rem; } .concept__images { grid-template-columns: 1fr; } .concept__images img { height: 220px; } .menu-gallery { grid-template-columns: 1fr 1fr; } .menu-gallery img { height: 180px; } } /* ============================================ REDESIGN ADDITIONS — Maquette v3 ============================================ */ /* --- Nav dropdown --- */ .nav__has-dropdown { position: relative; } .nav__caret { font-size: 0.7em; margin-left: 0.15em; opacity: 0.7; } .nav__dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--cream); border: 1px solid var(--gold); padding: 0.6rem 0; min-width: 220px; list-style: none; opacity: 0; pointer-events: none; transition: all 0.25s ease; z-index: 1100; box-shadow: 0 12px 32px rgba(0,0,0,0.12); } .nav__has-dropdown:hover .nav__dropdown, .nav__has-dropdown:focus-within .nav__dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav__dropdown li { margin: 0; } .nav__dropdown a { display: block; padding: 0.55rem 1.25rem; color: var(--burgundy); font-size: 0.95rem; letter-spacing: 0.04em; white-space: nowrap; } .nav__dropdown a:hover { background: rgba(214,189,149,0.25); } /* --- Home: produits frais block --- */ .home-products { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .home-products__text .section__title { margin: 0.5rem 0 2rem; color: var(--burgundy); } .home-products__images { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .home-products__images img { width: 100%; height: 320px; object-fit: cover; } .home-products__images img:nth-child(2) { transform: translateY(2rem); } @media (max-width: 800px) { .home-products { grid-template-columns: 1fr; gap: 2.5rem; } .home-products__images img { height: 220px; } .home-products__images img:nth-child(2) { transform: none; } } /* --- Team grid stagger (about page) --- */ .team-grid--stagger { position: relative; } @media (min-width: 800px) { .team-grid--stagger { display: block; height: 360px; } .team-grid--stagger .team-member { position: absolute; width: 150px; height: 150px; } .team-grid--stagger .team-member:nth-child(1) { top: 0; left: 20%; } .team-grid--stagger .team-member:nth-child(2) { top: 90px; right: 0; } .team-grid--stagger .team-member:nth-child(3) { bottom: 0; left: 5%; } } /* --- Vins page --- */ .vins-intro { text-align: center; color: var(--cream); font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.8; max-width: 720px; margin: 0 auto 4rem; opacity: 0.85; } .vins-list { max-width: 760px; margin: 0 auto; } .vins-list__title { color: var(--gold); font-size: 2rem; font-weight: 400; margin: 2.5rem 0 1.25rem; border-bottom: 1px solid rgba(214,189,149,0.3); padding-bottom: 0.5rem; } .vins-list ul { list-style: none; padding: 0; margin: 0; } .vins-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 0.55rem 0; color: var(--cream); font-size: 0.98rem; border-bottom: 1px dashed rgba(214,189,149,0.18); } .vins-list li:last-child { border-bottom: none; } .vins-price { color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; } /* --- Adresses page --- */ .section--gold { background-color: var(--gold); color: var(--brown); } .adresses-intro-text { text-align: center; font-family: var(--font-heading); font-size: 1.1rem; line-height: 1.7; color: var(--burgundy); max-width: 720px; margin: 0 auto; } .adresses-paris { display: flex; flex-direction: column; gap: 4rem; } .adresse-paris { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .adresse-paris__image { background: rgba(255,255,255,0.55); border: 1px solid rgba(64,27,19,0.15); aspect-ratio: 4 / 3; width: 100%; } .adresse-paris__name { color: var(--burgundy); margin-bottom: 0.4rem; font-size: clamp(1.8rem, 3vw, 2.4rem); } .adresse-paris__addr { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brown); opacity: 0.7; margin-bottom: 1.25rem; } .adresse-paris__desc { color: var(--brown); line-height: 1.7; margin-bottom: 1.5rem; max-width: 38ch; } .adresse-paris__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; } @media (max-width: 800px) { .adresse-paris, .adresse-paris--right { grid-template-columns: 1fr; gap: 1.5rem; } .adresse-paris--right .adresse-paris__image { order: -1; } } /* --- Contact page split layout --- */ .contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 5rem; } .contact-split:last-child { margin-bottom: 0; } .contact-split__text .section__title { color: var(--burgundy); margin-bottom: 1.5rem; } .contact-split__lead { color: var(--brown); margin-bottom: 0.6rem; font-size: 1.05rem; } .contact-split__phone { color: var(--brown); margin-bottom: 1.25rem; font-size: 1.1rem; line-height: 1.5; } .contact-split__sub { color: var(--brown); opacity: 0.75; margin-bottom: 1.75rem; line-height: 1.6; } .contact-split__image img { width: 100%; height: 380px; object-fit: cover; } .contact-hours { list-style: none; padding: 0; margin: 1rem 0 1.5rem; } .contact-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed rgba(64,27,19,0.18); color: var(--brown); } .contact-hours li:last-child { border-bottom: none; } .contact-hours li span:first-child { font-weight: 700; } .contact-address { color: var(--brown); margin-top: 1rem; line-height: 1.6; } @media (max-width: 800px) { .contact-split, .contact-split--reverse { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; } .contact-split__image img { height: 260px; } } /* --- Hide dropdown on small screens (overlay handles it) --- */ @media (max-width: 900px) { .nav__dropdown { display: none; } }