/* Base de style : fiche Refero « sweetgreen » (toile crème, grand titre de peu d'épaisseur à interligne très serré, grande photo
   plein cadre avec panneau de texte crème en bas à gauche, boutons en pilule, photos aux coins arrondis sans cadre, bandes de
   couleur pleine largeur qui alternent, un seul accent d'action). Le vert et le citron vert sont remplacés par le rouge de
   l'auvent du restaurant ; polices et sections recomposées pour La table du marché chez Fred. */
@font-face{font-family:"Familjen Grotesk";src:url(fonts/familjen.woff2?v=1) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree.woff2?v=1) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-italic.woff2?v=1) format("woff2");font-weight:300 400;font-style:italic;font-display:swap}
:root{
  --creme:#e9dcc1;--sable:#dcc9a6;--rouge:#a3251d;--rouge2:#7e1a14;--encre:#1f1410;--sec:#5b4a3d;--blanc:#fffaf0;
  --titre:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;--corps:Figtree,system-ui,sans-serif;--serif:Fraunces,Georgia,serif;--r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--corps);font-size:17px;font-weight:400;line-height:1.6;padding-bottom:64px}
img{display:block;max-width:100%;height:auto}a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.large{width:min(100% - 40px,1200px);margin-inline:auto}
.annonce{background:var(--rouge2);color:#f1e5cd;text-align:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px}
.site-header{position:sticky;top:0;z-index:30;background:var(--creme);border-bottom:1px solid rgba(31,20,16,.14)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;width:min(100% - 40px,1200px);margin-inline:auto}
.marque{font-family:var(--titre);font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1;text-decoration:none;color:var(--rouge);padding:8px 0;text-align:center;margin-right:auto}
.marque small{display:block;font-family:var(--corps);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sec);margin-top:5px}
.nav{display:none;gap:24px;flex:1;align-items:center}
.nav-d{justify-content:flex-end}
.nav a:not(.pilule){font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:16px 0;border-bottom:2px solid transparent}
.nav a:not(.pilule):hover,.nav a.on{border-bottom-color:var(--rouge)}
.pilule{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:9999px;font-family:var(--corps);font-size:16px;font-weight:700;letter-spacing:.015em;text-decoration:none;border:2px solid transparent;transition:background .3s,color .3s}
.pilule-rouge{background:var(--rouge);color:#f1e5cd;border-color:var(--rouge)}.pilule-rouge:hover{background:var(--rouge2);border-color:var(--rouge2)}
.pilule-contour{border-color:var(--rouge);color:var(--rouge);background:transparent;min-height:44px;padding:0 20px}.pilule-contour:hover{background:var(--rouge);color:#f1e5cd}
.pilule-creme{background:var(--creme);color:var(--rouge2);border-color:var(--creme)}.pilule-creme:hover{background:transparent;color:var(--creme)}
.appel{min-height:44px;padding:0 18px;font-size:15px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:0}
.actions-centre{justify-content:center}
.lien{font-weight:700;text-decoration:none;color:var(--encre);padding:14px 0 6px;border-bottom:2px solid var(--rouge);display:inline-block}
.lien-rouge{color:var(--rouge);display:inline-block;margin-top:24px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.eyebrow-rouge{color:var(--rouge)}
h1,h2{font-family:var(--titre);font-weight:400;margin:0;letter-spacing:-.035em;line-height:.9}
h1{font-size:clamp(44px,10.4vw,84px)}
h2{font-size:clamp(38px,7vw,70px);margin-bottom:28px}
/* Héros plein cadre + panneau crème */
.hero{position:relative;min-height:calc(100svh - 106px);min-height:calc(100vh - 106px);display:flex;align-items:flex-end;background:#3a2a22;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;animation:lent 32s ease-in-out infinite alternate}
@keyframes lent{from{transform:scale(1)}to{transform:scale(1.05)}}
.hero-panneau{position:relative;z-index:2;margin:0 16px 20px;padding:28px 24px 30px;background:rgba(233,220,193,.96);border-radius:var(--r);max-width:560px}
.hero-panneau .eyebrow{color:var(--rouge)}
.hero-sous{font-size:17px;margin:18px 0 24px;color:var(--sec);max-width:30em}
/* À table */
.carte{padding:96px 0 72px}
.carte-grille{display:grid;gap:44px}
.signatures{list-style:none;margin:0;padding:0}
.signatures li{padding:18px 0;border-top:1px solid rgba(31,20,16,.25);display:flex;flex-direction:column}
.signatures li:last-child{border-bottom:1px solid rgba(31,20,16,.25)}
.signatures span{font-family:var(--titre);font-size:clamp(30px,5vw,50px);letter-spacing:-.03em;line-height:1}
.signatures em{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--rouge);margin-top:6px}
.cartes-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.cartes-photos figure{margin:0}
.cartes-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r)}
.cartes-photos figcaption{padding:10px 2px 0;font-size:14.5px;line-height:1.35;color:var(--sec)}
.cartes-photos figcaption b{display:block;color:var(--encre);font-size:16.5px}
.pastilles{list-style:none;margin:44px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pastilles li{border:2px solid var(--rouge);color:var(--rouge);border-radius:9999px;padding:6px 18px;font-weight:700;font-size:15px}
.note{font-size:14.5px;color:var(--sec);margin:30px 0 0;max-width:46em}
/* Prix */
.band{padding:88px 0}
.band-sable{background:var(--sable)}
.trois{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0;border-top:1px solid rgba(31,20,16,.3)}
.trois li{display:flex;flex-direction:column;padding:22px 0;border-bottom:1px solid rgba(31,20,16,.3)}
.trois b{font-family:var(--titre);font-weight:400;font-size:clamp(38px,6vw,64px);letter-spacing:-.035em;line-height:1;color:var(--rouge)}
.trois span{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sec);margin-top:8px}
/* Lieu */
.lieu{padding:96px 0}
.lieu-in{width:min(100% - 40px,1200px);margin-inline:auto;display:grid;gap:44px;align-items:center}
.lieu-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lieu-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r)}
.lieu-photos .p2{margin-top:36px}
.lieu-texte p{margin:0 0 16px;color:var(--sec);font-size:18px}
.liste{list-style:none;margin:24px 0 0;padding:0}
.liste li{padding:13px 0;border-top:1px solid rgba(31,20,16,.25);font-size:16px}
.liste li:last-child{border-bottom:1px solid rgba(31,20,16,.25)}
/* Avis */
.avis{padding:24px 0 96px}
.avis-grille{display:grid;gap:0;margin-top:20px;border-top:1px solid rgba(31,20,16,.25)}
.avis blockquote{margin:0;padding:28px 0;border-bottom:1px solid rgba(31,20,16,.25)}
.avis blockquote p{font-family:var(--titre);font-size:clamp(25px,3vw,32px);letter-spacing:-.02em;line-height:1.1;margin:0 0 12px}
.avis footer{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sec)}
/* Réservation */
.band-rouge{background:var(--rouge);color:#f1e5cd;text-align:center}
.resa-in{width:min(100% - 40px,780px);margin-inline:auto}
.resa-in h2{color:#f1e5cd;font-size:clamp(40px,8vw,84px);margin-bottom:12px}
.resa-in p{margin:0 0 26px;font-size:19px}
/* Infos */
.infos{background:var(--sable);padding:96px 0}
.infos-in{width:min(100% - 40px,1200px);margin-inline:auto;display:grid;gap:72px}
.infos h2{font-size:clamp(34px,5.6vw,60px)}
.horaires{width:100%;max-width:520px;border-collapse:collapse}
.horaires th,.horaires td{text-align:left;padding:14px 0;border-bottom:1px solid rgba(31,20,16,.25);font-weight:400}
.horaires th{font-weight:700;width:30%}
.horaires tr.today{background:rgba(163,37,29,.12)}
.horaires tr.today th::after{content:" · aujourd'hui";font-weight:400;color:var(--rouge)}
address{font-style:normal;margin:0 0 22px;font-size:19px;line-height:1.7}
.venir-photo{margin:0 0 24px}
.venir-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.pied{background:var(--encre);color:#d8c9b6;text-align:center;padding:52px 20px 44px;font-size:14px}
.pied-marque{font-family:var(--titre);font-size:clamp(40px,8vw,72px);letter-spacing:-.03em;color:var(--creme);margin:0 0 10px}
.pied p{margin:0 0 10px}.pied a{color:#f1e5cd;display:inline-block;padding:13px 0}
.petit{font-size:12.5px;max-width:60em;margin-inline:auto!important}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:center;min-height:58px;background:var(--rouge);color:#f1e5cd;font-weight:700;font-size:16px;text-decoration:none}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-img{animation:none}.reveal{opacity:1;transform:none;transition:none}.pilule{transition:none}}
@media (min-width:900px){
  body{padding-bottom:0}.callbar{display:none}.nav{display:flex}.appel{display:none}
  .marque{margin-right:0}
  .bar{justify-content:center}
  .hero-panneau{margin:0 0 44px max(20px,calc((100vw - 1200px)/2));padding:36px 40px 40px}
  .carte-grille{grid-template-columns:1.2fr 1fr;gap:80px;align-items:start}
  .trois{grid-template-columns:repeat(3,1fr);border-top:0;gap:36px}
  .trois li{border-top:1px solid rgba(31,20,16,.3);border-bottom:0}
  .lieu-in{grid-template-columns:1.05fr 1fr;gap:88px}
  .avis-grille{grid-template-columns:repeat(3,1fr);border-top:0;gap:36px}
  .avis blockquote{border-top:1px solid rgba(31,20,16,.25);border-bottom:0}
  .infos-in{grid-template-columns:1fr 1fr;gap:110px}
}
