/* ============================================================ FaPo Resto — feuille de style unique, trois ambiances Thèmes pilotés par [data-theme] sur : bistrot (défaut) · terroir · epure ============================================================ */ /* ---------- Polices auto-hébergées ---------- */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/jost-v20-latin-300.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jost-v20-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jost-v20-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jost-v20-latin-600.woff2') format('woff2'); } /* ---------- Jetons par thème ---------- */ :root, html[data-theme='bistrot'] { --bg: #f6f1e6; --bg-alt: #eee4cf; --surface: #fffdf6; --ink: #2c241d; --muted: #6f6353; --accent: #7d1f2e; /* bordeaux */ --accent-ink: #fdf6ea; --second: #a8894e; /* laiton */ --line: #dccfb4; --shadow: 0 12px 30px rgba(60, 40, 20, .10); --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Jost', 'Segoe UI', sans-serif; --display-weight: 600; --display-case: none; --display-tracking: 0; --radius: 4px; } html[data-theme='terroir'] { --bg: #2a2017; --bg-alt: #231a12; --surface: #362a1d; --ink: #f2e7d2; --muted: #c2ae8d; --accent: #cd7433; /* cuivre / terracotta */ --accent-ink: #241708; --second: #94a061; /* olive */ --line: #4f3e2a; --shadow: 0 14px 34px rgba(0, 0, 0, .45); --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Jost', 'Segoe UI', sans-serif; --display-weight: 700; --display-case: none; --display-tracking: 0; --radius: 10px; } html[data-theme='epure'] { --bg: #fbfbf7; --bg-alt: #efefe8; --surface: #ffffff; --ink: #171716; --muted: #5d5d55; --accent: #1e4d38; /* vert profond */ --accent-ink: #f6faf7; --second: #9a9a8d; --line: #e1e1d7; --shadow: 0 10px 28px rgba(20, 20, 20, .07); --font-display: 'Jost', 'Segoe UI', sans-serif; --font-body: 'Jost', 'Segoe UI', sans-serif; --display-weight: 300; --display-case: uppercase; --display-tracking: .14em; --radius: 0; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; line-height: 1.65; transition: background-color .35s ease, color .35s ease; } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); letter-spacing: var(--display-tracking); line-height: 1.12; margin: 0 0 .5em; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); } h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); } p { margin: 0 0 1em; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } img { max-width: 100%; height: auto; } .wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; z-index: 100; } .skip-link:focus { left: .5rem; top: .5rem; } /* ---------- Éléments partagés ---------- */ .eyebrow { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--accent); margin-bottom: .9rem; } .section-sub { color: var(--muted); max-width: 42rem; } .section-head { margin-bottom: 2.5rem; } .section-head .section-sub { margin-inline: 0; } .btn { display: inline-block; font-family: var(--font-body); font-size: .92rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: .85rem 1.7rem; border: 1.5px solid var(--accent); border-radius: var(--radius); cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: transparent; color: var(--accent); } .btn-ghost { background: transparent; color: var(--accent); } .btn-ghost:hover { background: var(--accent); color: var(--accent-ink); } .btn-invert { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); } .btn-invert:hover { background: transparent; color: var(--accent-ink); } /* ---------- En-tête ---------- */ .site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; transition: background-color .35s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .8rem; flex-wrap: wrap; } .brand { text-decoration: none; color: var(--ink); line-height: 1.15; } .brand-mark { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; letter-spacing: .02em; } .brand-dot { color: var(--accent); } .brand-sub { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); } .site-nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .site-nav a { color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500; letter-spacing: .04em; } .site-nav a:hover { color: var(--accent); } .site-nav .nav-cta { border: 1.5px solid var(--accent); border-radius: var(--radius); color: var(--accent); padding: .45rem 1rem; text-transform: uppercase; font-size: .8rem; letter-spacing: .1em; } .site-nav .nav-cta:hover { background: var(--accent); color: var(--accent-ink); } /* ---------- Héro ---------- */ .hero { padding-block: clamp(4rem, 9vw, 7.5rem) 0; text-align: center; } .hero-inner { max-width: 52rem; } .hero-title { margin-bottom: 1.4rem; } .hero-names { display: block; font-size: clamp(4.2rem, 13vw, 8.5rem); line-height: .95; } .hero-dot { color: var(--accent); } .hero-expand { display: block; margin-top: 1rem; font-family: var(--font-display); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: .01em; font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: var(--muted); } .hero-expand em { font-style: inherit; color: var(--accent); } html[data-theme='epure'] .hero-expand { font-family: var(--font-body); font-style: normal; font-weight: 300; } .hero-lede { max-width: 38rem; margin: 0 auto 2rem; color: var(--muted); } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: clamp(3rem, 7vw, 5rem); } /* Frise en damier, clin d’œil au carrelage de bistrot */ .tiles { height: 22px; background: repeating-conic-gradient(var(--accent) 0% 25%, transparent 0% 50%) 0 0 / 22px 22px; opacity: .28; } html[data-theme='epure'] .tiles { background: linear-gradient(to right, var(--accent), var(--accent)); height: 2px; opacity: 1; width: min(220px, 40%); margin-inline: auto; } /* ---------- La carte ---------- */ .menu-card { padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--bg-alt); transition: background-color .35s ease; } .menu-card .section-head { text-align: center; } .menu-card .section-sub { margin-inline: auto; } .menu-columns { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.6rem, 4vw, 3.2rem); display: grid; gap: 2.4rem; } .menu-group-title { color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: 1.1rem; } .menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; } .menu-item { display: flex; align-items: baseline; gap: .6rem; } .menu-item-name { flex-shrink: 1; } .menu-leader { flex: 1; min-width: 2rem; border-bottom: 2px dotted var(--second); transform: translateY(-4px); } .menu-price { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent); white-space: nowrap; } html[data-theme='epure'] .menu-price { font-style: normal; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; } .menu-note { max-width: 44rem; margin: 2.2rem auto 0; text-align: center; color: var(--muted); font-size: .98rem; } /* ---------- Prestations ---------- */ .prestations { padding-block: clamp(3.5rem, 8vw, 6rem); } .prestations .section-head { text-align: center; } .cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 1.8rem 1.6rem 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; } .card p { color: var(--muted); flex: 1; } .card-link { font-weight: 600; font-size: .88rem; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; } .card-link::after { content: ' →'; } .card-link:hover { text-decoration: underline; } /* ---------- La maison ---------- */ .maison { padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--bg-alt); transition: background-color .35s ease; } .maison-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(260px, 380px) 1fr; align-items: center; } .maison-photo { margin: 0; } .photo-placeholder { aspect-ratio: 3 / 4; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, var(--surface) 60%, var(--bg-alt)); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; } .photo-monogram { font-family: var(--font-display); font-weight: 700; font-size: 3rem; color: var(--accent); } .photo-soon { font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); } .maison-photo figcaption { margin-top: .7rem; font-size: .88rem; color: var(--muted); text-align: center; } .maison-text .btn { margin-top: .6rem; } /* ---------- Bandeau d’appel ---------- */ .cta-band { background: var(--accent); color: var(--accent-ink); padding-block: clamp(3rem, 7vw, 5rem); text-align: center; transition: background-color .35s ease; } .cta-band h2 { color: inherit; } .cta-band p { opacity: .85; max-width: 36rem; margin-inline: auto; } /* ---------- Pied de page ---------- */ .site-footer { border-top: 1px solid var(--line); padding-block: 2.8rem 5.5rem; /* espace pour le sélecteur d’ambiance */ font-size: .95rem; } .footer-inner { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin-bottom: .4rem; } .footer-brand span { color: var(--accent); } .footer-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin-bottom: .5rem; } .footer-col p { margin-bottom: .45rem; color: var(--muted); } .footer-col a { color: var(--ink); } /* ---------- Sélecteur d’ambiance (bas gauche) ---------- */ .theme-picker { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; font-family: var(--font-body); } .theme-picker-toggle { display: flex; align-items: center; gap: .55rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1.1rem .55rem .6rem; font-size: .85rem; font-weight: 500; letter-spacing: .05em; cursor: pointer; box-shadow: var(--shadow); } .theme-picker-swatch { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--line); } .theme-picker-options[hidden] { display: none; } .theme-picker-options { position: absolute; bottom: calc(100% + .6rem); left: 0; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: .4rem; box-shadow: var(--shadow); min-width: 11rem; } .theme-picker-options button { display: flex; align-items: center; gap: .6rem; background: transparent; border: 0; border-radius: calc(var(--radius) + 3px); color: var(--ink); font-family: inherit; font-size: .9rem; padding: .55rem .7rem; cursor: pointer; text-align: left; } .theme-picker-options button:hover { background: var(--bg-alt); } .theme-picker-options button[aria-pressed='true'] { background: var(--bg-alt); font-weight: 600; } .dot { width: .95rem; height: .95rem; border-radius: 50%; flex-shrink: 0; } .dot-bistrot { background: #7d1f2e; box-shadow: inset 0 0 0 2px #f6f1e6; border: 1px solid #7d1f2e; } .dot-terroir { background: #cd7433; box-shadow: inset 0 0 0 2px #2a2017; border: 1px solid #cd7433; } .dot-epure { background: #1e4d38; box-shadow: inset 0 0 0 2px #fbfbf7; border: 1px solid #1e4d38; } /* ---------- Pages intérieures ---------- */ .page-head { padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); } .page-head h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); } /* ---------- Formulaire de devis ---------- */ .devis { padding-block: 0 clamp(3.5rem, 8vw, 6rem); } .devis-inner { max-width: 46rem; } .form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.5rem, 4vw, 2.5rem); } .form-grid { display: grid; gap: 0 1.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .field { display: flex; flex-direction: column; margin-bottom: 1.3rem; } .field-full { grid-column: 1 / -1; } .field label { font-size: .85rem; font-weight: 600; letter-spacing: .05em; margin-bottom: .35rem; } .req { color: var(--accent); } .opt { color: var(--muted); font-weight: 400; } .field input, .field select, .field textarea { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .85rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .field-err input, .field-err select, .field-err textarea { border-color: var(--accent); } .field-msg { margin-top: .35rem; font-size: .85rem; color: var(--accent); font-weight: 500; } .form-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: .4rem 0 0; } .form-hint { font-size: .82rem; color: var(--muted); max-width: 22rem; } /* Champ anti-robots : hors écran, jamais visible */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .notice { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 1.6rem 1.8rem; margin-bottom: 1.5rem; } .notice-ok h2 { margin-top: 0; } .notice-err p { margin: 0; font-weight: 500; } /* ---------- Mentions légales ---------- */ .legal { padding-block: 0 clamp(3.5rem, 8vw, 6rem); } .legal-inner { max-width: 44rem; } .legal h2 { font-size: 1.35rem; margin-top: 2rem; } .legal-note { color: var(--muted); font-size: .95rem; } /* ---------- Animations d’entrée ---------- */ @media (prefers-reduced-motion: no-preference) { .hero-inner > * { opacity: 0; transform: translateY(14px); animation: rise .7s ease forwards; } .hero-inner > :nth-child(2) { animation-delay: .12s; } .hero-inner > :nth-child(3) { animation-delay: .24s; } .hero-inner > :nth-child(4) { animation-delay: .36s; } @keyframes rise { to { opacity: 1; transform: none; } } } /* ---------- Écrans étroits ---------- */ @media (max-width: 720px) { .header-inner { justify-content: center; text-align: center; } .site-nav { justify-content: center; } .maison-inner { grid-template-columns: 1fr; } .maison-photo { max-width: 320px; margin-inline: auto; } .menu-item { flex-wrap: wrap; } .menu-leader { display: none; } .menu-item-name { flex-basis: 100%; } .menu-price::before { content: '— '; } .theme-picker-label { display: none; } .theme-picker-toggle { padding: .55rem .6rem; } }