/* ==========================================================================
   layout.css — Conteneurs, en-tête, navigation, pied de page, grilles.
   Mobile-first ; le menu se déploie à partir de 768px.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ------------------------------- Header --------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 60px;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1.15rem; color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand__badge {
  background: var(--primary); color: var(--primary-contrast);
  padding: .15rem .5rem; border-radius: var(--radius-sm); font-size: .8rem;
}
.brand__logo {
  display: block; width: 40px; height: 40px; border-radius: 9px;
  object-fit: contain; flex: 0 0 auto;
}
@media (max-width: 520px) {
  .brand { font-size: 1rem; gap: .4rem; }
  .brand__logo { width: 34px; height: 34px; }
}

.nav-toggle {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: .5rem .7rem;
  font-size: 1.1rem; cursor: pointer;
}
.main-nav {
  display: none; width: 100%; flex-direction: column; gap: .25rem;
  padding-bottom: .75rem;
}
.main-nav.open { display: flex; }
.main-nav a {
  color: var(--text); padding: .6rem .5rem; border-radius: var(--radius-sm);
}
.main-nav a:hover { background: var(--bg-subtle); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .main-nav {
    display: flex; flex-direction: row; align-items: center; width: auto;
    margin-left: auto; padding-bottom: 0; gap: .25rem;
  }
  .header-actions { margin-left: .5rem; }
}

/* ------------------------------- Footer --------------------------------- */
.site-footer {
  margin-top: 3rem; background: var(--bg-elevated);
  border-top: 1px solid var(--border); padding: 2rem 0;
  color: var(--text-muted);
}
.site-footer a { color: var(--link); }
.footer-grid {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------- Sections ------------------------------- */
main { min-height: 60vh; }
.section { padding-block: 2rem; }
.page-head { padding-block: 1.5rem; }

/* Grilles utilitaires */
.grid { display: grid; gap: 1rem; }
.grid-cards { grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }

/* Layout back-office : barre latérale + contenu */
.admin-shell { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.admin-sidebar {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; height: max-content;
}
.admin-sidebar a {
  display: block; color: var(--text); padding: .55rem .7rem;
  border-radius: var(--radius-sm);
}
.admin-sidebar a:hover, .admin-sidebar a.active {
  background: var(--bg-subtle); text-decoration: none;
}
.admin-content { min-width: 0; }
@media (min-width: 900px) {
  .admin-shell { grid-template-columns: 240px 1fr; }
}

/* Fiche restaurant : contenu principal (large) + colonne réservation */
.resto-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.resto-main { min-width: 0; display: grid; gap: 1.5rem; }
.resto-aside {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; height: max-content;
}
@media (min-width: 900px) {
  .resto-layout { grid-template-columns: 2fr 1fr; }
}