/* FRESHLY — Dark teal + cream + accents jaune. Boulangerie premium artisanale. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,400&family=Caveat:wght@500;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --f-teal: #2c4a4d;
    --f-teal-deep: #1f3537;
    --f-teal-soft: #3d5a5e;
    --f-cream: #f5ebda;
    --f-cream-soft: #faf2e2;
    --f-cream-deep: #ebd9c4;
    --f-yellow: #f0a430;
    --f-text: #2a1f15;
    --f-text-mute: #6a5b48;
    --f-line: rgba(255,255,255,.12);
    --f-font-display: 'Playfair Display', Georgia, serif;
    --f-font-script: 'Caveat', cursive;
    --f-font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--f-cream); color: var(--f-text); font-family: var(--f-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; }
ul { list-style: none; }

/* HEADER teal */
.f-header { background: var(--f-teal); padding: .85rem 2.5rem; }
.f-header__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1300px; margin: 0 auto; gap: 2rem; }
.f-logo { display: flex; align-items: center; gap: .5rem; font-family: var(--f-font-display); font-style: italic; font-size: 1.25rem; color: var(--f-cream); font-weight: 500; }
.f-logo__bullet { background: var(--f-yellow); width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.f-nav ul { display: flex; gap: 1.65rem; }
.f-nav a { font-size: .82rem; color: rgba(255,255,255,.75); font-weight: 500; }
.f-nav a:hover, .f-nav a.is-active { color: #fff; }

/* BUTTONS */
.f-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; border: 1.5px solid transparent; }
.f-btn--teal { background: var(--f-teal); color: #fff; }
.f-btn--teal:hover { background: var(--f-teal-deep); }
.f-btn--teal-pill { background: var(--f-teal-deep); color: #fff; }
.f-btn--teal-pill:hover { background: var(--f-yellow); color: var(--f-teal-deep); }
.f-btn--ghost { background: #fff; color: var(--f-teal); border-color: var(--f-cream-deep); }
.f-btn--ghost:hover { background: var(--f-cream); }

.f-section-title { font-family: var(--f-font-display); font-size: clamp(1.85rem, 3.5vw, 2.85rem); font-weight: 500; line-height: 1.15; color: var(--f-teal-deep); text-align: center; margin-bottom: 2rem; }

/* HERO split teal */
.f-hero { background: var(--f-teal); position: relative; padding: 3rem 2.5rem 5rem; }
.f-hero__inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.f-hero__dots { display: block; color: var(--f-yellow); font-size: 1rem; letter-spacing: .35em; margin-bottom: 1rem; }
.f-hero__title { font-family: var(--f-font-display); font-style: italic; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 500; line-height: 1.05; color: var(--f-cream); margin-bottom: 1.5rem; letter-spacing: -.01em; }
.f-hero__lead { color: rgba(245,235,218,.75); font-size: 1rem; line-height: 1.7; max-width: 460px; margin-bottom: 2rem; }
.f-hero__cta { display: flex; gap: .75rem; margin-bottom: 1.5rem; }
.f-hero__icons { display: flex; gap: 1rem; }
.f-hero__icons span { width: 36px; height: 36px; border-radius: 50%; background: var(--f-yellow); color: var(--f-teal-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.f-hero__photo { aspect-ratio: 4/5; max-width: 540px; margin-left: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.f-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.f-hero__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--f-teal-soft), var(--f-yellow)); }
.f-hero__bridge { position: absolute; left: 50%; bottom: -32px; transform: translateX(-50%); width: 64px; height: 64px; background: var(--f-cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.f-hero__bridge span { width: 24px; height: 24px; border-radius: 50%; background: var(--f-teal); }
@media (max-width: 800px) { .f-hero__inner { grid-template-columns: 1fr; } }

/* REPINOT — 3 rows alternées */
.f-repinot { background: var(--f-cream); padding: clamp(4rem, 6vw, 5rem) 2.5rem; }
.f-repinot__inner { max-width: 1100px; margin: 0 auto; }
.f-repinot__head { text-align: center; margin-bottom: 3.5rem; }
.f-repinot__row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem; }
.f-repinot__row.is-reverse { grid-template-columns: 1fr 1.1fr; direction: rtl; }
.f-repinot__row.is-reverse > * { direction: ltr; }
.f-repinot__text h3 { font-family: var(--f-font-display); font-size: 1.65rem; font-weight: 700; margin-bottom: 1rem; color: var(--f-text); }
.f-repinot__text p { color: var(--f-text-mute); line-height: 1.75; }
.f-repinot__photo { aspect-ratio: 5/4; border-radius: 16px; overflow: hidden; background: var(--f-cream-deep); }
.f-repinot__photo img { width: 100%; height: 100%; object-fit: cover; }
.f-repinot__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--f-cream-deep), var(--f-yellow)); }
@media (max-width: 800px) { .f-repinot__row, .f-repinot__row.is-reverse { grid-template-columns: 1fr; } }

/* SPOAVEL — Photo background + card overlay */
.f-spoavel { position: relative; padding: clamp(4rem, 6vw, 5rem) 2.5rem; overflow: hidden; min-height: 480px; }
.f-spoavel__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.f-spoavel__overlay { position: absolute; inset: 0; background: rgba(245,235,218,.85); z-index: 1; }
.f-spoavel__inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
.f-spoavel__title { font-family: var(--f-font-script); font-size: clamp(2.5rem, 5vw, 4rem); color: var(--f-cream); text-align: center; margin-bottom: 2.5rem; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.f-spoavel__row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.f-spoavel__card { background: rgba(245,235,218,.95); padding: 2rem; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.1); position: relative; }
.f-spoavel__quote { position: absolute; top: -.85rem; left: 1.5rem; font-family: var(--f-font-display); font-size: 5rem; line-height: 1; color: var(--f-yellow); }
.f-spoavel__card h3 { font-family: var(--f-font-display); font-size: 1.35rem; margin-bottom: .85rem; color: var(--f-teal-deep); }
.f-spoavel__card p { color: var(--f-text-mute); line-height: 1.7; margin-bottom: 1rem; }
.f-spoavel__card footer { font-style: italic; font-size: .85rem; color: var(--f-teal); }
.f-spoavel__photo { aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.f-spoavel__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .f-spoavel__row { grid-template-columns: 1fr; } }

/* FOOTER */
.f-footer { background: var(--f-teal-deep); color: rgba(255,255,255,.8); padding: 1rem; }
.f-footer__bottom { text-align: center; font-size: .85rem; }

.preview-banner { background: var(--f-yellow); color: var(--f-teal-deep); text-align: center; padding: .5rem; font-weight: 600; font-size: .82rem; }
[x-cloak] { display: none !important; }