body {
  font-family: 'Segoe UI', sans-serif;
  background: #f8f9fa;
  margin: 0;
}

.container {
  max-width: 1140px;
  margin: auto;
  padding: 2rem;
}

h1, h2, h3 {
  color: #004080;
}

.navbar {
  background-color: #004080;
  padding: 1rem;
}
.navbar a {
  color: white;
  margin-right: 1rem;
  text-decoration: none;
}

.card {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: white;
  padding: 1rem;
}
.card-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: #004080;
  color: white;
  border-radius: 4px;
  text-decoration: none;
}
.btn-outline-primary {
  border: 1px solid #004080;
  color: #004080;
  background: transparent;
}
.btn-outline-primary:hover {
  background: #004080;
  color: white;
}

/* ---- Landing ---- */
.hero-landing{
  position:relative; min-height:56vh; display:flex; align-items:center; justify-content:center;
  background-image:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.45)), url('https://images.unsplash.com/photo-1526318472351-c75fcf070305?q=80&w=1600&auto=format&fit=crop');
  background-size:cover; background-position:center; color:#fff;
}
.hero-overlay{width:100%;}
.hero-content{padding:4rem 2rem; text-align:center;}
.hero-content h1{font-size: clamp(2rem, 2.8vw + 1rem, 3.2rem); margin:0 0 .6rem;}
.hero-content p{opacity:.95; margin:0 0 1.25rem; font-size:1.05rem}
.hero-actions{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}
.searchbar{margin-top:1.25rem; display:flex; gap:.5rem; justify-content:center}
.searchbar input{min-width:min(520px, 90vw); padding:.85rem 1rem; border:1px solid #dcdcdc; border-radius:.75rem}
.searchbar button{padding:.85rem 1.1rem}

/* ---- Layout helpers ---- */
.container{max-width:1140px; margin:0 auto; padding:2rem 1rem}
.section{padding:2.5rem 0}
.section-title{margin:0 0 1rem; color:#0b3a74; letter-spacing:.2px}
.section-header{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1rem}
.link{color:#0b3a74; text-decoration:none}
.link:hover{text-decoration:underline}

/* ---- Grid & cards ---- */
.grid-3{
  display:grid; gap:1rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width:640px){ .grid-3{ grid-template-columns: repeat(2, 1fr);} }
@media (min-width:992px){ .grid-3{ grid-template-columns: repeat(3, 1fr);} }

.card{background:#fff; border:1px solid #e9eef5; border-radius:14px; display:flex; flex-direction:column; overflow:hidden}
.card-body{padding:1.1rem 1.1rem .5rem}
.card-title{margin:.2rem 0 .35rem; font-weight:700; color:#0b3a74}
.text-muted{color:#6c7a89}
.small{font-size:.875rem}
.card-footer{padding: .85rem 1.1rem; display:flex; justify-content:flex-end; background:#fafcfe; border-top:1px solid #e9eef5}

/* ---- Feature cards ---- */
.feature-card{background:#fff; border:1px solid #e9eef5; border-radius:14px; padding:1.25rem; text-align:center}
.feature-emoji{font-size:1.8rem; margin-bottom:.35rem}

/* ---- Steps strip ---- */
.strip{background:linear-gradient(180deg, #f6f9ff, #eef4ff); border-top:1px solid #e5ecfb; border-bottom:1px solid #e5ecfb; padding:2.8rem 0}
.steps{display:grid; gap:1rem; grid-template-columns: repeat(1, 1fr)}
@media (min-width:768px){ .steps{grid-template-columns: repeat(3, 1fr)} }
.step{background:#fff; border:1px solid #e9eef5; border-radius:14px; padding:1.25rem; text-align:center}
.step-number{width:40px; height:40px; margin:0 auto .5rem; border-radius:999px; background:#0b3a74; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700}

/* ---- Buttons ---- */
.btn{display:inline-block; border-radius:.8rem; padding:.75rem 1rem; text-decoration:none; font-weight:600}
.btn-primary{background:#0b3a74; color:#fff; border:1px solid #0b3a74}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:#ffffff; color:#0b3a74; border:1px solid #cfd9ee}
.btn-ghost:hover{background:#f6f9ff}
.btn-outline{background:#fff; border:1px solid #cfd9ee; color:#0b3a74}
.btn-outline:hover{background:#f6f9ff}

/* ---- Alerts ---- */
.alert{padding:1rem; border-radius:.75rem; background:#fff6ea; border:1px solid #ffd9a8; color:#9a6400}
.text-center{text-align:center}


/* ---- Footer ---- */
.site-footer {
  background: #0b3a74;
  color: #fff;
  padding: 3rem 1rem 1.5rem;
  margin-top: 3rem;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
.footer-brand {
  font-size: 1.4rem;
  margin-bottom: .5rem;
}
.footer-text {
  font-size: .9rem;
  opacity: .85;
}
.footer-title {
  font-size: 1.1rem;
  margin-bottom: .6rem;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: .4rem;
}
.footer-links a {
  color: #fff;
  opacity: .85;
  text-decoration: none;
}
.footer-links a:hover {
  opacity: 1;
  text-decoration: underline;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.25);
  margin-top: 2rem;
  padding-top: 1rem;
  text-align: center;
  font-size: .85rem;
  opacity: .85;
}


/* Page header */
.page-title{ margin:0; color:#0b3a74; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem) }
.page-subtitle{ margin-top:.25rem; color:#6c7a89; font-size:.95rem }
.list-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem }

/* Search toolbar */
.toolbar{ display:flex; gap:.6rem; align-items:center; margin:1rem 0 1.25rem }
.input{
  flex:1 1 420px; min-width:220px;
  padding:.8rem 1rem; border:1px solid #d9dfec; border-radius:.8rem;
  background:#fff; outline:none;
}
.input:focus{ border-color:#0b3a74; box-shadow:0 0 0 3px rgba(11,58,116,.08) }

/* Cards restaurants */
.card-restaurant .card-title{ margin:.1rem 0 .35rem; font-weight:700; color:#0b3a74 }
.btn-wide{ width:100%; text-align:center }



/* Header fiche resto */
.resto-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.page-title{ margin:0; color:#0b3a74; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem) }
.page-subtitle{ margin-top:.25rem; color:#6c7a89; font-size:.95rem }

/* Menus: head & badges */
.menu-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem }
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; font-size:.8rem; border-radius:999px; border:1px solid;
}
.badge-success{ color:#0f6a2f; background:#ecf9f1; border-color:#bde7cc }
.badge-warning{ color:#7a4a00; background:#fff6ea; border-color:#ffd9a8 }

/* Prix */
.price-row{ display:flex; gap:1rem; margin:.6rem 0 0.2rem }
.price-block{ background:#f7faff; border:1px solid #e6eefc; border-radius:.6rem; padding:.6rem .8rem; min-width:120px }
.price-label{ font-size:.8rem; color:#6c7a89; margin-bottom:.15rem }
.price-val{ font-weight:800 }
.price-val.muted{ color:#6c7a89 }
.price-val.highlight{ color:#0b3a74 }

/* Meta & alert */
.meta > div{ margin-top:.25rem }
.alert-compact{ padding:.6rem .8rem; border-radius:.6rem; background:#fff6ea; border:1px solid #ffd9a8; color:#9a6400 }

/* Ligne d'achat */
.buyline{ display:flex; gap:.6rem; width:100%; align-items:center }
.buyline .qty{ max-width:90px }
.card-menu.card-unavailable{ opacity:.7 }


/* ---- Header/Navbar amélioré ---- */
.site-header {
  background: #0b3a74;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
}

.nav-logo .logo-img {
  height: 90px;
  width: auto;
}

.nav-menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: opacity .2s;
}

.nav-menu a:hover {
  opacity: 0.85;
}

/* Responsive : menu en colonne sur petit écran */
@media (max-width: 640px) {
  .nav-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-menu {
    flex-direction: column;
    gap: .75rem;
    margin-top: 1rem;
  }
}


/* --- Compact navbar --- */
.navbar { padding: .4rem 0; }                  /* au lieu de 1rem */
.nav-inner { align-items: center; gap: 1.25rem; }

/* liens plus "plats" (moins de hauteur) */
.nav-menu a { padding: .25rem 0; line-height: 1; }

/* logo grand mais raisonnable pour ne pas gonfler la barre */
.nav-logo .logo-img { height: 70px; width: auto; }  /* 70px ≈ bon compromis */

/* mobile : encore un peu plus compact */
@media (max-width: 640px) {
  .nav-logo .logo-img { height: 60px; }
  .nav-inner { gap: .6rem; }
}