/* BAKERY — Warm cream + brown caramel, hero collage */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --b-cream: #f5ead8;
    --b-cream-soft: #faf2e2;
    --b-cream-deep: #ebd9c4;
    --b-brown: #5a3a20;
    --b-brown-deep: #3a2818;
    --b-brown-caramel: #a06840;
    --b-brown-caramel-dark: #7d4c2a;
    --b-text-mute: #7a6650;
    --b-line: #d8c4a0;
    --b-font-display: 'Playfair Display', Georgia, serif;
    --b-font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--b-cream); color: var(--b-brown-deep); font-family: var(--b-font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .25s; }
button { background: 0; border: 0; cursor: pointer; font: inherit; color: inherit; }

.b-topbar { background: var(--b-cream-deep); padding: .5rem 2.5rem; font-size: .78rem; color: var(--b-text-mute); }
.b-topbar__inner { display: flex; justify-content: space-between; max-width: 1300px; margin: 0 auto; }
.b-topbar__socials span { display: inline-block; margin-left: .5rem; }

.b-header { background: var(--b-cream); padding: 1rem 2.5rem; }
.b-header__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1300px; margin: 0 auto; gap: 2rem; }
.b-logo { display: flex; align-items: center; gap: .5rem; }
.b-logo__crest { font-size: 1.25rem; color: var(--b-brown-caramel); }
.b-logo__name { font-family: var(--b-font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: .15em; color: var(--b-brown-deep); }
.b-nav ul { display: flex; gap: 2rem; list-style: none; }
.b-nav a { font-size: .85rem; color: var(--b-brown-deep); font-weight: 500; }
.b-nav a:hover, .b-nav a.is-active { color: var(--b-brown-caramel); border-bottom: 1px solid var(--b-brown-caramel); padding-bottom: 2px; }

.b-btn { display: inline-flex; align-items: center; padding: .85rem 1.85rem; border-radius: 999px; font-size: .82rem; font-weight: 600; transition: all .25s; cursor: pointer; }
.b-btn--brown { background: var(--b-brown-caramel); color: #fff; }
.b-btn--brown:hover { background: var(--b-brown-caramel-dark); transform: translateY(-2px); }
.b-btn--sm { padding: .65rem 1.4rem; font-size: .75rem; }

.b-section-title { font-family: var(--b-font-display); font-size: clamp(1.85rem, 3.5vw, 2.75rem); font-weight: 700; line-height: 1.15; color: var(--b-brown-deep); text-align: center; margin-bottom: 1rem; }
.b-section-title--italic { font-style: italic; text-align: left; }

/* HERO collage */
.b-hero { background: var(--b-cream); padding: 2rem 2.5rem 4rem; }
.b-hero__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 90px; gap: .75rem; position: relative; }
.b-hero__photo { overflow: hidden; border-radius: 14px; background: var(--b-cream-deep); }
.b-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.b-hero__photo--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.b-hero__photo--2 { grid-column: 3 / 5; grid-row: 1 / 2; }
.b-hero__photo--3 { grid-column: 5 / 7; grid-row: 1 / 4; }
.b-hero__photo--4 { grid-column: 1 / 2; grid-row: 3 / 5; }
.b-hero__photo--5 { grid-column: 5 / 7; grid-row: 4 / 5; }
.b-hero__photo--6 { grid-column: 1 / 3; grid-row: 5 / 6; }
.b-hero__card {
    grid-column: 2 / 6; grid-row: 2 / 5;
    background: rgba(245, 234, 216, .92);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 2.5rem;
    text-align: center;
    align-self: center;
    box-shadow: 0 20px 60px rgba(58,40,24,.12);
}
.b-hero__eyebrow { display: inline-block; font-size: .78rem; color: var(--b-text-mute); margin-bottom: 1rem; letter-spacing: .15em; text-transform: uppercase; }
.b-hero__title { font-family: var(--b-font-display); font-size: clamp(1.75rem, 3.5vw, 2.85rem); font-weight: 700; line-height: 1.1; margin-bottom: 1rem; }
.b-hero__lead { color: var(--b-text-mute); font-size: .95rem; margin-bottom: 1.5rem; max-width: 420px; margin-inline: auto; }
@media (max-width: 800px) { .b-hero__inner { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; } .b-hero__photo--1, .b-hero__photo--2, .b-hero__photo--3, .b-hero__photo--4, .b-hero__photo--5, .b-hero__photo--6 { grid-column: auto; grid-row: auto; } .b-hero__card { grid-column: span 2; grid-row: auto; padding: 1.5rem; } }

/* WHY US — 3 cards rondes */
.b-whyus { background: var(--b-cream); padding: clamp(3rem, 5vw, 4rem) 2.5rem; }
.b-whyus__inner { max-width: 1100px; margin: 0 auto; }
.b-whyus__head { text-align: center; margin-bottom: 3rem; }
.b-whyus__lead { color: var(--b-text-mute); max-width: 580px; margin: 0 auto; }
.b-whyus__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.b-whyus__card { background: var(--b-cream-soft); padding: 1.85rem 1.5rem; border-radius: 18px; text-align: center; transition: transform .3s; }
.b-whyus__card:hover { transform: translateY(-4px); }
.b-whyus__photo { width: 140px; height: 140px; margin: 0 auto 1.25rem; border-radius: 50%; overflow: hidden; background: var(--b-cream-deep); }
.b-whyus__photo img { width: 100%; height: 100%; object-fit: cover; }
.b-whyus__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-cream-deep) 0%, var(--b-brown-caramel) 100%); }
.b-whyus__card h3 { font-family: var(--b-font-display); font-size: 1.35rem; font-weight: 700; margin-bottom: .65rem; color: var(--b-brown); }
.b-whyus__card p { color: var(--b-text-mute); font-size: .88rem; margin-bottom: 1.25rem; min-height: 3rem; }
@media (max-width: 800px) { .b-whyus__grid { grid-template-columns: 1fr; } }

/* VISIT — Split text + grid 2x2 */
.b-visit { background: var(--b-cream-soft); padding: clamp(3rem, 5vw, 4rem) 2.5rem; }
.b-visit__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; }
.b-visit__text p { color: var(--b-text-mute); margin: 1.25rem 0 1.85rem; line-height: 1.85; }
.b-visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.b-visit__grid figure { aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; background: var(--b-cream-deep); }
.b-visit__grid figure img { width: 100%; height: 100%; object-fit: cover; }
.b-visit__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-cream-deep), var(--b-brown-caramel)); }
@media (max-width: 800px) { .b-visit__inner { grid-template-columns: 1fr; } }

/* COFFEE BAKING — Photo grid */
.b-coffee { background: var(--b-cream); padding: clamp(3rem, 5vw, 4rem) 2.5rem; }
.b-coffee__inner { max-width: 1300px; margin: 0 auto; }
.b-coffee__head { text-align: center; margin-bottom: 2.5rem; }
.b-coffee__head p { color: var(--b-text-mute); }
.b-coffee__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; gap: .75rem; }
.b-coffee__item { overflow: hidden; border-radius: 12px; background: var(--b-cream-deep); }
.b-coffee__item img { width: 100%; height: 100%; object-fit: cover; }
.b-coffee__item--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.b-coffee__item--2 { grid-column: 3 / 5; }
.b-coffee__item--3 { grid-column: 5 / 7; grid-row: 1 / 3; }
.b-coffee__item--4 { grid-column: 3 / 4; }
.b-coffee__item--5 { grid-column: 4 / 5; }
.b-coffee__item--6 { grid-column: 1 / 3; }
.b-coffee__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-cream-deep), var(--b-brown-caramel)); }
@media (max-width: 800px) { .b-coffee__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; } .b-coffee__item { grid-column: auto !important; grid-row: auto !important; } }

/* FOOTER */
.b-footer { background: var(--b-brown-deep); color: rgba(255,255,255,.7); padding: 3rem 2.5rem 1.5rem; }
.b-footer__inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.b-footer__brand { font-family: var(--b-font-display); font-size: 1.35rem; color: #fff; margin-bottom: .75rem; letter-spacing: .15em; }
.b-footer h5 { color: #fff; font-size: .82rem; margin-bottom: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.b-footer p { font-size: .9rem; line-height: 1.7; }
.b-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; text-align: center; font-size: .82rem; color: rgba(255,255,255,.45); }
@media (max-width: 700px) { .b-footer__inner { grid-template-columns: 1fr; } }

.preview-banner { background: var(--b-brown-caramel); color: #fff; text-align: center; padding: .5rem; font-weight: 600; font-size: .82rem; }
[x-cloak] { display: none !important; }