/* Le Petit Comptoir : crème, noir, bleu cobalt, jaune, Archivo condensé en capitales */
:root{--creme:#f2ebdd;--noir:#101010;--bleu:#1d3fbf;--jaune:#f2c230;--craie:#f4f1ea;--ardoise:#1b2420;--focus:#1d3fbf;--max:1180px;--cond:Archivo,"Arial Narrow",Arial,sans-serif}
body{background:var(--creme);color:var(--noir);font:17px/1.55 Inter,system-ui,sans-serif}
h1,h2,h3{font-family:var(--cond);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:.005em}
.eyebrow{font:600 13px/1.4 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--bleu)}

.top{border-bottom:3px solid var(--noir)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding-block:12px}
.marque{font:800 24px/.95 var(--cond);font-stretch:62%;text-transform:uppercase;text-decoration:none;border:3px solid var(--noir);padding:6px 10px;min-height:44px}
.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-decoration-thickness:2px;text-underline-offset:5px}
.nav .nav-cta{background:var(--bleu);color:#fff;padding:0 16px}
.nav .nav-cta:hover{background:var(--noir);text-decoration:none}

.hero{padding-block:36px 0}
.hero h1{font-size:clamp(44px,9.4vw,136px);margin-top:12px;max-width:13ch;overflow-wrap:normal}
.hero-bas{display:grid;gap:28px;margin-top:32px}
.accroche{font:800 clamp(26px,3.4vw,38px)/1 var(--cond);font-stretch:70%;text-transform:uppercase;color:var(--bleu)}
.lede{max-width:40ch;margin-top:14px;font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{padding:0 24px;font:700 16px/1.2 Inter,system-ui,sans-serif;text-decoration:none;border:3px solid var(--noir)}
.btn-bleu{background:var(--bleu);color:#fff}
.btn-bleu:hover{background:var(--noir)}
.btn-noir{background:transparent;color:var(--noir)}
.btn-noir:hover{background:var(--noir);color:var(--creme)}
.hero-photo{position:relative;border:3px solid var(--noir);background:var(--noir)}
.hero-photo img{width:100%;aspect-ratio:1200/697;object-fit:cover}
.ticket{position:absolute;left:-3px;bottom:-26px;background:var(--jaune);color:var(--noir);border:3px solid var(--noir);padding:10px 16px;font:600 15px/1.3 Inter,system-ui,sans-serif;box-shadow:6px 6px 0 var(--noir)}
.ticket strong{display:block;font:800 30px/1 var(--cond);font-stretch:70%;text-transform:uppercase}

.ardoise{background:var(--ardoise);color:var(--craie);margin-top:72px;padding-block:64px;border-block:3px solid var(--noir)}
.tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;margin-bottom:36px}
.ardoise h2{font-size:clamp(48px,8vw,96px);color:var(--craie)}
.tete p{font-size:15px;color:#d8d4c8}
.colonnes{display:grid;gap:36px}
.colonnes h3{font-size:30px;color:var(--jaune);padding-bottom:8px;border-bottom:2px solid var(--craie);margin-bottom:6px}
.colonnes li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px dashed #6b756e}
.nom{font-weight:600}
.nom small{display:block;font-weight:400;font-size:14px;color:#d8d4c8}
.prix{font:800 22px/1 var(--cond);font-stretch:75%;color:var(--craie);white-space:nowrap}
.brunch{background:var(--bleu);padding:24px;align-self:start;border:3px solid var(--craie)}
.brunch h3{color:var(--jaune);border-bottom-color:var(--jaune)}
.gros{font:800 84px/1 var(--cond);font-stretch:62%;color:var(--craie);margin:10px 0 6px}
.brunch p:last-child{font-size:16px}

.horaires{padding-block:64px 24px}
.horaires h2{font-size:clamp(44px,7vw,84px);margin-bottom:28px}
.jours{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:3px solid var(--noir)}
.jours li{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-right:3px solid var(--noir);border-bottom:3px solid var(--noir);margin:0 0 -3px 0}
.jours li:nth-child(2n){border-right:0}
.j{font:700 14px/1.2 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.h{font:800 28px/1.05 var(--cond);font-stretch:75%;text-transform:uppercase}
.jours .ferme{background:var(--noir);color:var(--creme)}

.venir{padding-block:56px 72px}
.venir-in{display:grid;gap:40px}
.venir h2{font-size:clamp(36px,5vw,56px);margin-bottom:14px}
.adr{font:800 26px/1.1 var(--cond);font-stretch:75%;text-transform:uppercase;margin-bottom:12px}
.adr span{font:500 15px/1.4 Inter,system-ui,sans-serif;text-transform:none;color:#3b3b3b}
.contact{background:var(--noir);color:var(--creme);padding:28px;align-self:start}
.contact h2{color:var(--jaune)}
.contact p{margin-bottom:18px}
.btn-jaune{background:var(--jaune);color:var(--noir);border-color:var(--jaune)}
.btn-jaune:hover{background:var(--creme);border-color:var(--creme)}
.contact :focus-visible{outline-color:var(--jaune)}

.foot{background:var(--noir);color:var(--craie);padding-block:28px;border-top:1px solid #444}
.foot-in{display:grid;gap:6px}
.foot a{color:var(--jaune)}

@media (min-width:640px){.jours{grid-template-columns:repeat(4,1fr)}.jours li{border-right:3px solid var(--noir)}.jours li:nth-child(2n){border-right:3px solid var(--noir)}.jours li:nth-child(4n),.jours li:last-child{border-right:0}}
@media (min-width:900px){
.hero-bas{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.colonnes{grid-template-columns:1fr 1fr 1fr;gap:48px}
.venir-in{grid-template-columns:1fr 1fr;gap:72px}
.jours{grid-template-columns:repeat(7,1fr)}
.jours li{border-right:3px solid var(--noir)!important}
.jours li:last-child{border-right:0!important}
.h{font-size:22px}
}
@media (max-width:420px){.hero-photo .ticket{position:static;box-shadow:none;border-width:3px 0 0;display:block}.hero-photo{border-bottom:3px solid var(--noir)}.ardoise{margin-top:48px}}