/* Le Fournil des Pentes : farine, kraft, brun de croûte, bleu de torchon, Archivo large */
:root{--farine:#f8f0de;--kraft:#e6cf9f;--croute:#5a2f14;--encre:#2d1c11;--bleu:#243b5a;--focus:#243b5a;--max:1140px;--large:Archivo,"Arial Black",Arial,sans-serif}
body{background:var(--farine);color:var(--encre);font:17px/1.6 Inter,system-ui,sans-serif}
h1,h2,h3{font-family:var(--large);font-stretch:118%;font-weight:800;line-height:1.05;letter-spacing:-.01em}
.eyebrow{font:700 13px/1.4 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--bleu)}

.top{background:var(--farine);border-bottom:6px double var(--bleu)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-block:12px}
.marque{font:800 22px/1.1 var(--large);font-stretch:118%;text-decoration:none;color:var(--croute);min-height:44px;display:flex;align-items:center}
.nav ul{display:flex;flex-wrap:wrap;gap:0 20px;align-items:center}
.nav a{font:600 15px/1.2 Inter,system-ui,sans-serif;text-decoration:none;padding:0 2px}
.nav a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.nav .nav-cta{background:var(--croute);color:#fff;padding:0 18px;border-radius:3px}
.nav .nav-cta:hover{background:var(--encre);text-decoration:none}

.hero{padding-top:64px}
.hero-in{display:grid;gap:36px;align-items:center;padding-bottom:72px}
.hero h1{font-size:clamp(34px,5.4vw,60px);margin-top:12px;color:var(--croute);max-width:14ch}
.accroche{font:700 clamp(20px,2.4vw,26px)/1.2 var(--large);font-stretch:100%;color:var(--bleu);margin-top:14px}
.lede{max-width:44ch;margin-top:16px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{padding:0 24px;font:700 16px/1.2 Inter,system-ui,sans-serif;text-decoration:none;border:2px solid var(--croute);border-radius:3px}
.btn-brun{background:var(--croute);color:#fff}
.btn-brun:hover{background:var(--encre);border-color:var(--encre)}
.btn-ligne{color:var(--croute)}
.btn-ligne:hover{background:var(--kraft)}
.hero-photos{position:relative;padding-bottom:70px}
.hero-photos figure{border:6px solid #fff;box-shadow:0 8px 20px rgba(45,28,17,.18);background:#fff}
.hero-photos img{width:100%;object-fit:cover}
.p1 img{aspect-ratio:1000/619}
.p2{position:absolute;right:0;bottom:0;width:42%}
.p2 img{aspect-ratio:640/700}
.bande{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 36px;padding:16px 20px;background:var(--bleu);color:#fff;font:600 15px/1.4 Inter,system-ui,sans-serif;text-align:center;letter-spacing:.02em}

.fournees{padding-block:72px 24px}
.fournees h2,.pains h2{font-size:clamp(28px,4vw,42px);color:var(--croute)}
.intro{font-size:15px;color:#4d3a2c;margin-top:8px}
.four{display:grid;gap:16px;margin-top:28px}
.four li{background:var(--kraft);border:2px dashed var(--croute);padding:22px 24px;border-radius:4px}
.heure{font:800 44px/1 var(--large);font-stretch:118%;color:var(--croute)}
.four h3{font-size:20px;margin:10px 0 6px;font-stretch:105%}
.four li p:last-child{font-size:16px}

.fournil{padding-block:56px 40px}
.fournil-in{display:grid;gap:24px}
.fournil h2{font-size:clamp(28px,4vw,42px);color:var(--croute)}
.gros{font:700 clamp(24px,3.4vw,38px)/1.2 var(--large);font-stretch:105%;color:var(--encre);max-width:22ch}
.faits{display:grid;gap:0;margin-top:32px;border-top:2px solid var(--croute)}
.faits li{display:flex;flex-direction:column;gap:2px;padding:16px 0;border-bottom:1px solid #b9a483}
.faits strong{font:800 18px/1.2 var(--large);font-stretch:105%;color:var(--croute)}
.faits span{font-size:16px;color:#4d3a2c}
@media (min-width:860px){.fournil-in{grid-template-columns:.7fr 1.3fr;gap:64px}.faits{grid-template-columns:repeat(3,1fr);gap:32px;border-top:0}.faits li{border-top:2px solid var(--croute);border-bottom:0;padding-top:16px}}

.pains{padding-block:48px 72px}
.etiquette{display:grid;gap:0 56px;margin-top:24px;background:#fff;border:2px solid var(--croute);padding:12px 28px;box-shadow:8px 8px 0 var(--kraft)}
.etiquette li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px dashed #a08a6c}
.nom{font-weight:700}
.nom small{display:block;font-weight:400;font-size:14.5px;color:#4d3a2c}
.prix{font:800 20px/1 var(--large);font-stretch:105%;color:var(--croute);white-space:nowrap}
.mention{font-size:14.5px;color:#4d3a2c;margin-top:20px}

.pratique{background:var(--kraft);padding-block:56px 64px;border-top:6px double var(--bleu)}
.pratique-in{display:grid;gap:40px}
.pratique h2{font-size:clamp(26px,3.4vw,36px);color:var(--croute);margin-bottom:16px}
.pratique h3{font-size:22px;color:var(--croute);margin:28px 0 8px}
.horaires div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 20px;padding:12px 0;border-bottom:1px dashed #6e5a3e}
.horaires dt{font-weight:700}
.horaires dd{margin:0}
.adr{font:700 20px/1.3 Inter,system-ui,sans-serif;margin-bottom:8px}
.adr span{font-weight:500;font-size:15px}
.commande{background:var(--croute);color:#fff;padding:32px 28px;align-self:start;border-radius:4px}
.commande h2{color:#fff}
.commande p{margin-bottom:20px}
.btn-creme{background:var(--farine);color:var(--croute);border-color:var(--farine)}
.btn-creme:hover{background:#fff}
.commande :focus-visible{outline-color:#fff}

.foot{background:var(--encre);color:#f8f0de;padding-block:28px}
.foot-in{display:grid;gap:6px}
.foot a{color:var(--kraft)}

@media (min-width:860px){
.hero-in{grid-template-columns:1fr 1fr;gap:64px}
.four{grid-template-columns:repeat(3,1fr);gap:24px}
.etiquette{grid-template-columns:1fr 1fr}
.pratique-in{grid-template-columns:1.1fr .9fr;gap:72px}
}
@media (max-width:520px){
.hero{padding-top:32px}
.p2{width:46%}
.etiquette{padding:6px 18px}
}