/* Le Bistrot des Quais : papier crème, vert sapin, rouge brique, serif de bistrot */
:root{--papier:#f5eee0;--encre:#1f2a25;--sapin:#24392f;--brique:#8f3420;--trait:#c9bda4;--focus:#8f3420;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--max:1120px}
body{background:var(--papier);color:var(--encre);font:17px/1.6 var(--serif)}
.eyebrow{font:600 13px/1.4 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--brique)}

.top{border-bottom:1px solid var(--trait)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-block:14px}
.marque{display:flex;flex-direction:column;text-decoration:none;min-height:44px;justify-content:center}
.marque-nom{font-size:26px;font-style:italic;line-height:1.1;color:var(--sapin)}
.marque-sous{font:500 12px/1.4 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#4a5750}
.nav ul{display:flex;flex-wrap:wrap;gap:0 22px;align-items:center}
.nav a{font:500 15px/1.2 Inter,system-ui,sans-serif;text-decoration:none;padding:0 2px}
.nav a:hover{text-decoration:underline;text-underline-offset:5px}
.nav .nav-cta{padding:0 18px;background:var(--brique);color:#fff;border-radius:2px}
.nav .nav-cta:hover{background:#6f2615;text-decoration:none}

.hero{padding-block:48px 64px}
.hero-in{display:grid;gap:36px;align-items:center}
.hero h1{font-size:clamp(36px,6vw,66px);line-height:1.04;font-weight:700;letter-spacing:-.01em;color:var(--sapin);margin-top:14px;max-width:14ch}
.accroche{font-size:clamp(22px,3vw,30px);font-style:italic;color:var(--brique);margin-top:14px}
.lede{max-width:46ch;margin-top:18px;font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{padding:0 24px;font:600 16px/1.2 Inter,system-ui,sans-serif;text-decoration:none;border-radius:2px;border:2px solid var(--sapin)}
.btn-plein{background:var(--sapin);color:#fff}
.btn-plein:hover{background:#12201a}
.btn-ligne{color:var(--sapin);background:transparent}
.btn-ligne:hover{background:var(--sapin);color:#fff}
.hero-photo{justify-self:center;width:min(100%,430px);border:2px solid var(--sapin);border-radius:215px 215px 4px 4px;padding:10px;background:var(--papier)}
.hero-photo img{width:100%;aspect-ratio:700/808;object-fit:cover;border-radius:205px 205px 0 0}

.reperes{display:grid;gap:0;margin-top:56px;border-top:2px solid var(--sapin)}
.reperes li{display:flex;flex-direction:column;gap:2px;padding:16px 0;border-bottom:1px solid var(--trait)}
.reperes strong{font-size:20px;color:var(--sapin)}
.reperes span{font:15px/1.5 Inter,system-ui,sans-serif;color:#46524b}
@media (min-width:760px){.reperes{grid-template-columns:repeat(3,1fr);gap:40px}.reperes li{border-bottom:0;padding-block:20px 0}}

.carte{background:#ece2cd;border-block:1px solid var(--trait);padding-block:64px}
.tete{text-align:center;margin-bottom:36px}
.tete h2{font-size:clamp(30px,4.4vw,46px);line-height:1.1;color:var(--sapin);margin-top:8px}
.carte-grille{display:grid;gap:32px}
.menu{background:var(--papier);border:1px solid var(--trait);outline:1px solid var(--trait);outline-offset:-9px;padding:32px 28px 28px}
.menu h3{font:700 14px/1.4 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--brique);margin:26px 0 10px}
.menu h3:first-child{margin-top:0}
.menu li{padding:8px 0}
.l{display:flex;align-items:baseline;gap:10px}
.nom{font-size:19px;font-weight:700}
.pt{flex:1;border-bottom:2px dotted #8a7f66;min-width:20px;transform:translateY(-4px)}
.prix{font-weight:700;color:var(--brique);white-space:nowrap}
.menu li p{font-size:15.5px;color:#46524b;margin-top:2px}
.mention{font:14px/1.5 Inter,system-ui,sans-serif;color:#46524b;margin-top:26px;padding-top:16px;border-top:1px solid var(--trait)}
.cote{display:grid;gap:20px;align-content:start}
.formule{background:var(--sapin);color:#f5eee0;padding:30px 28px;text-align:center}
.formule-t{font:600 13px/1.4 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f0c9a9}
.formule-p{font-size:28px;line-height:1.2;margin-top:10px}
.formule-p strong{font-size:44px;display:block;margin-top:4px}
.formule-n{font:15px/1.5 Inter,system-ui,sans-serif;margin-top:10px}
.cote img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 55%}

.infos{padding-block:56px}
.infos-in{display:grid;gap:36px}
.infos h2{font-size:30px;line-height:1.15;color:var(--sapin);margin-bottom:16px}
.horaires div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 20px;padding:12px 0;border-bottom:1px dotted #8a7f66}
.horaires dt{font-weight:700}
.horaires dd{margin:0}
.adr{font-size:22px;line-height:1.3;font-weight:700;margin-bottom:12px}
.adr span{font:500 15px/1.4 Inter,system-ui,sans-serif;color:#46524b}

.reserver{background:var(--brique);color:#fff;padding-block:56px}
.reserver-in{max-width:760px;text-align:center}
.reserver h2{font-size:clamp(30px,4.4vw,44px);line-height:1.1;margin-bottom:14px}
.reserver p{margin-bottom:22px}
.reserver .btn-plein{background:#fff;color:#6f2615;border-color:#fff}
.reserver .btn-plein:hover{background:#f5eee0}
.reserver :focus-visible{outline-color:#fff}

.foot{background:var(--sapin);color:#f5eee0;padding-block:32px}
.foot-in{display:grid;gap:8px}
.foot-nom{font-size:22px;font-style:italic}
.foot a{color:#f0c9a9;min-height:44px}

@media (min-width:860px){
.hero-in{grid-template-columns:1.15fr .85fr;gap:64px}
.carte-grille{grid-template-columns:1.5fr 1fr;gap:40px}
.infos-in{grid-template-columns:1.2fr 1fr;gap:72px}
}
@media (max-width:520px){
.top-in{justify-content:flex-start}
.nav ul{gap:0 14px}
.hero{padding-block:32px 48px}
.menu{padding:28px 20px 24px}
.nom{font-size:18px}
}