/* Base de style : fiche Refero « LUNCH » (grande photo sombre plein cadre avec le nom en immense lettrage, sections claires
   et sombres en alternance, angles droits, bandes de couleur unique, un seul accent). Le lilas est remplacé par un rose-terre
   cuite tiré des serviettes du restaurant. Le nom reprend le lettrage gothique de l'enseigne en bois (police Grenze Gotisch). */
@font-face{font-family:"Grenze Gotisch";src:url(fonts/grenze.woff2?v=1) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces.woff2?v=1) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-italic.woff2?v=1) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(fonts/albert.woff2?v=1) format("woff2");font-weight:300 700;font-display:swap}
:root{
  --nuit:#1b130d;--nuit2:#271b12;--parchemin:#f1ead9;--ivoire:#fbf6e8;--terre:#c98a6c;--terre-fonce:#8f4a2e;--bois:#f3e3c2;--encre:#1e1710;--sec:#5e5242;
  --gothique:"Grenze Gotisch",Georgia,serif;--serif:Fraunces,Georgia,serif;--sans:"Albert Sans","Helvetica Neue",Arial,sans-serif;--filet:rgba(251,246,232,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--parchemin);color:var(--encre);font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.75;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)}
.annonce{background:var(--terre);color:#1e1710;text-align:center;font-size:12px;letter-spacing:.1em;padding:7px 12px}
/* En-tête sur la photo */
.site-header{position:sticky;top:0;z-index:30;height:70px;background:transparent;color:var(--ivoire);transition:background .35s}
.site-header.scrolled{background:rgba(27,19,13,.96)}
.bar{height:100%;display:flex;align-items:center;justify-content:space-between;width:min(100% - 40px,1280px);margin-inline:auto}
.marque{font-family:var(--gothique);font-weight:700;font-size:30px;letter-spacing:.02em;text-decoration:none;padding:10px 0;color:var(--bois)}
.nav{display:none;gap:28px;margin-left:auto;margin-right:30px}
.nav a{text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:16px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{border-bottom-color:currentColor}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;background:var(--terre);color:#1e1710;border:1px solid var(--terre);font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s}
.bouton:hover{background:transparent;color:var(--terre)}
.bouton-petit{min-height:44px;padding:0 18px;font-size:12px}
.bouton-clair{background:transparent;color:var(--ivoire);border-color:rgba(251,246,232,.7)}
.bouton-clair:hover{background:var(--ivoire);color:var(--nuit);border-color:var(--ivoire)}
.bouton-sombre{background:var(--nuit);color:var(--ivoire);border-color:var(--nuit)}
.bouton-sombre:hover{background:transparent;color:var(--nuit)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.lien{display:inline-block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--terre-fonce);padding:14px 0 6px;border-bottom:1px solid currentColor;margin-top:24px}
.sur-titre{font-size:12.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px;color:var(--terre)}
.sur-titre.sombre{color:var(--terre-fonce)}
h1,h2{font-weight:700;margin:0}
h2{font-family:var(--serif);font-size:clamp(32px,5.4vw,56px);line-height:1.02;letter-spacing:-.01em;margin-bottom:22px}
/* Héros */
.hero{position:relative;margin-top:-70px;min-height:calc(100svh - 34px);min-height:calc(100vh - 34px);display:flex;align-items:flex-end;background:var(--nuit);overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;animation:lent 34s ease-in-out infinite alternate}
@keyframes lent{from{transform:scale(1)}to{transform:scale(1.05)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(27,19,13,.92) 0%,rgba(27,19,13,.62) 36%,rgba(27,19,13,.15) 64%,rgba(27,19,13,.4) 100%);pointer-events:none}
.hero-contenu{position:relative;z-index:2;width:min(100% - 40px,1280px);margin:0 auto;padding:0 0 92px;color:var(--ivoire)}
.hero .sur-titre{color:#f0d8c6;text-shadow:0 1px 12px rgba(0,0,0,.7)}
h1{font-family:var(--gothique);font-size:clamp(64px,19vw,210px);color:var(--bois);line-height:.9;letter-spacing:.01em;text-shadow:0 2px 28px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5)}
.hero-sous{font-family:var(--serif);font-size:clamp(19px,2.2vw,26px);max-width:28em;margin:20px 0 28px;line-height:1.35;text-shadow:0 1px 14px rgba(0,0,0,.7)}
/* Le restaurant */
.intro{padding:96px 0 72px;text-align:center}
.intro-in{width:min(100% - 40px,720px);margin-inline:auto}
.intro p:last-child{font-size:18.5px;color:var(--sec);margin:0}
/* La carte : photo + texte */
.carte{padding:24px 0 104px}
.carte-in{width:min(100% - 40px,1200px);margin-inline:auto;display:grid;gap:36px}
.carte-photo{margin:0;overflow:hidden}
.carte-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.carte-texte p{margin:0 0 16px}
.trois{list-style:none;margin:26px 0;padding:0;border-top:1px solid rgba(30,23,16,.3)}
.trois li{display:flex;flex-direction:column;padding:15px 0;border-bottom:1px solid rgba(30,23,16,.3)}
.trois b{font-family:var(--serif);font-size:21px;font-weight:600}
.trois span{font-size:15px;color:var(--sec)}
.note{font-size:14px;color:var(--sec)}
/* Le cadre (sombre) */
.cadre{background:var(--nuit);color:var(--ivoire);padding:96px 0}
.cadre-in{width:min(100% - 40px,1200px);margin-inline:auto;display:grid;gap:44px}
.cadre h2{color:#fff}
.cadre p{color:#e2d6bf}
.liste{list-style:none;margin:24px 0 0;padding:0}
.liste li{padding:13px 0;border-top:1px solid var(--filet);font-size:15.5px}
.liste li:last-child{border-bottom:1px solid var(--filet)}
.cadre-photos{display:grid;gap:12px}
.cadre-photos img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* Avis */
.avis{padding:104px 0 88px;text-align:center}
.avis-in{width:min(100% - 40px,1200px);margin-inline:auto}
.avis-grille{display:grid;gap:0;margin-top:32px;border-top:1px solid rgba(30,23,16,.3)}
.avis blockquote{margin:0;padding:30px 12px;border-bottom:1px solid rgba(30,23,16,.3)}
.avis blockquote p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.6vw,28px);line-height:1.3;margin:0 0 10px}
.avis footer{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sec)}
/* Réservation */
.reservation{background:var(--terre);color:#1e1710;text-align:center;padding:72px 20px}
.reservation h2{font-size:clamp(32px,5vw,52px);margin-bottom:10px}
.reservation p{margin:0 0 24px;font-size:17px}
.reservation .actions{justify-content:center}
/* Infos */
.infos{background:var(--nuit2);color:var(--ivoire);padding:96px 0}
.infos h2{color:#fff;font-size:clamp(30px,4.6vw,48px)}
.infos-in{width:min(100% - 40px,1200px);margin-inline:auto;display:grid;gap:72px}
.horaires{width:100%;max-width:480px;border-collapse:collapse}
.horaires th,.horaires td{text-align:left;padding:14px 0;border-bottom:1px solid var(--filet);font-weight:300}
.horaires th{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;width:38%}
.horaires tr.today{background:rgba(201,138,108,.22)}
.horaires tr.today th::after{content:" · aujourd'hui";font-weight:300;text-transform:none;letter-spacing:.02em;color:#f0d8c6}
.clair{color:#d3c6b2;font-size:14.5px;margin:18px 0 0;max-width:34em}
address{font-style:normal;margin:0 0 24px;font-size:19px;line-height:1.8}
.pied{background:var(--nuit);color:#cdbfa6;text-align:center;padding:52px 20px 44px;font-size:14px;border-top:1px solid var(--filet)}
.pied-marque{font-family:var(--gothique);font-weight:700;font-size:clamp(40px,7vw,68px);color:var(--bois);margin:0 0 12px}
.pied p{margin:0 0 10px}.pied a{color:#fff;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(--terre);color:#1e1710;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s 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}.bouton{transition:none}}
@media (min-width:900px){
  body{padding-bottom:0}.callbar{display:none}.nav{display:flex}
  .hero-contenu{padding-bottom:64px}
  .carte-in{grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
  .carte-photo img{aspect-ratio:4/5}
  .cadre-in{grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
  .cadre-photos{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .cadre-photos .p1{grid-column:1/3;aspect-ratio:16/9}
  .avis-grille{grid-template-columns:repeat(3,1fr)}
  .avis blockquote+blockquote{border-left:1px solid rgba(30,23,16,.3)}
  .infos-in{grid-template-columns:1fr 1fr;gap:110px}
}