.menu-poutine{
  --rouge:#b52222;
  --noir:#171717;
  --creme:#f7f3eb;
  --gris:#666;
  max-width:1200px;
  margin:auto;
  padding:30px 18px;
  background:var(--creme);
  color:var(--noir);
  font-family:Arial,sans-serif;
  line-height:1.5;
}
.menu-poutine *{box-sizing:border-box}
.menu-poutine h1,
.menu-poutine h2,
.menu-poutine h3,
.menu-poutine p{margin-top:0}
.menu-header{
  padding:45px 20px;
  margin-bottom:25px;
  background:var(--noir);
  color:#fff;
  text-align:center;
  border-radius:14px;
}
.menu-header h1{
  margin-bottom:10px;
  color:#fff;
  font-size:48px;
  text-transform:uppercase;
}
.menu-header h1 span{color:#e0443e}
.menu-header p{
  margin-bottom:0;
  color:#ddd !important;
}
.menu-nav{
  display:flex;
  gap:8px;
  margin-bottom:40px;
  overflow-x:auto;
}
.menu-nav a{
  flex:1 0 auto;
  padding:10px 14px;
  background:#fff;
  color:var(--noir);
  border:1px solid #ddd;
  border-radius:8px;
  text-align:center;
  text-decoration:none;
  font-size:13px;
  font-weight:bold;
}
.menu-section{
  margin-bottom:55px;
  scroll-margin-top:20px;
}
.menu-section>h2{
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:3px solid var(--rouge);
  font-size:34px;
  text-transform:uppercase;
}
.menu-note{
  margin-bottom:20px;
  padding:15px;
  background:#fff;
  border-left:4px solid var(--rouge);
}
.formule{
  display:grid;
  grid-template-columns:1fr 2fr;
  overflow:hidden;
  background:var(--noir);
  color:#fff;
  border-radius:12px;
}
.formule-prix{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:35px 20px;
  background:var(--rouge);
  text-align:center;
}
.formule-prix strong{
  font-size:72px;
  line-height:1;
}
.formule-detail{
  padding:30px;
}
.formule-detail h3{
  margin:20px 0 6px;
  color:#e5bd73;
  font-size:15px;
  text-transform:uppercase;
}
.formule-detail h3:first-child{margin-top:0}
.formule-detail p{margin-bottom:4px}
.table-scroll{
  overflow-x:auto;
  background:#fff;
  border-radius:10px;
}
.menu-table{
  width:100%;
  min-width:700px;
  border-collapse:collapse;
}
.menu-table th{
  padding:14px;
  background:var(--noir);
  color:#fff;
  text-align:center;
}
.menu-table th:first-child{text-align:left}
.menu-table td{
  padding:12px 14px;
  border-bottom:1px solid #eee;
}
.menu-table td:not(:first-child){
  text-align:center;
  white-space:nowrap;
  font-weight:bold;
}
.menu-table .categorie td{
  padding-top:20px;
  color:var(--rouge);
  font-size:20px;
  font-weight:bold;
  text-transform:uppercase;
}
.menu-table small{
  display:block;
  color:var(--gris);
  font-weight:normal;
}
.menu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.menu-card{
  overflow:hidden;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
}
.menu-card.large{grid-column:1/-1}
.menu-card h3{
  margin:0;
  padding:14px 18px;
  background:var(--noir);
  color:#fff;
  font-size:22px;
  text-transform:uppercase;
}
.menu-card h3 span{color:#e0443e}
.menu-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:15px;
  padding:14px 18px;
  border-bottom:1px solid #eee;
}
.menu-item:last-child{border-bottom:0}
.menu-item strong{display:block}
.menu-item p{
  margin:3px 0 0;
  color:var(--gris);
  font-size:13px;
}
.menu-price{
  color:var(--rouge);
  font-weight:bold;
  white-space:nowrap;
}
.boissons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.boisson-card{
  background:var(--noir);
  color:#fff;
  border-radius:10px;
  overflow:hidden;
}
.boisson-card h3{
  margin:0;
  padding:15px 18px;
  border-bottom:1px solid #444;
  color:#e0443e;
  text-transform:uppercase;
}
.boisson-card .menu-item{
  border-color:#333;
}
.boisson-card .menu-item p{color:#bbb}
.boisson-card .menu-price{color:#e5bd73}
.menu-footer{
  padding:25px;
  background:var(--noir);
  color:#fff;
  border-radius:10px;
  text-align:center;
}
.menu-footer p{
  margin:0;
  color:#ccc;
  font-size:13px;
}

@media(max-width:768px){
  .menu-poutine{padding:15px 10px}
  .menu-header{padding:35px 15px}
  .menu-header h1{font-size:36px}
  .menu-section>h2{font-size:28px}
  .formule,
  .menu-grid,
  .boissons{grid-template-columns:1fr}
  .menu-card.large{grid-column:auto}
  .formule-prix strong{font-size:60px}
  .menu-item{padding:13px 14px}
}

@media(max-width:480px){
  .menu-header h1{font-size:30px}
  .menu-nav a{font-size:11px}
  .menu-item{gap:8px}
  .menu-item strong{font-size:14px}
  .menu-item p{font-size:12px}
  .menu-price{font-size:14px}
}