/* Shell public : navbar + main + footer */

.mp-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mp-shell__main {
  flex: 1;
  padding-top: var(--mp-header-h);
}

@media (min-width: 1024px) {
  .mp-shell__main { padding-top: var(--mp-header-h-md); }
}

/* === Navbar === */
.mp-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--mp-header-h);
  background: var(--mp-color-primary);
  color: var(--mp-color-text-inverse);
  z-index: var(--mp-z-header);
  box-shadow: var(--mp-shadow);
}

.mp-navbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-3);
}

.mp-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  color: var(--mp-color-text-inverse);
}
.mp-navbar__brand .mp-logo { font-size: 1.8rem; }

.mp-navbar__links {
  display: none;
  align-items: center;
  gap: var(--mp-space-5);
}

.mp-navbar__link {
  color: var(--mp-color-text-inverse);
  font-weight: var(--mp-fw-medium);
  font-size: var(--mp-fs-sm);
  transition: opacity var(--mp-anim);
}
.mp-navbar__link:hover { opacity: 0.75; color: var(--mp-color-text-inverse); }

.mp-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
}

.mp-navbar__icon-btn {
  position: relative;
  width: var(--mp-btn-h);
  height: var(--mp-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-color-text-inverse);
  border-radius: var(--mp-radius-pill);
  transition: background var(--mp-anim);
}
.mp-navbar__icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--mp-color-text-inverse); }

.mp-navbar__icon-btn svg { width: 24px; height: 24px; }

.mp-navbar__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-accent);
  color: var(--mp-color-text-inverse);
  font-size: 10px;
  font-weight: var(--mp-fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* L'attribut HTML [hidden] doit toujours masquer même si display:inline-flex
   est défini ci-dessus (sinon le badge "0" reste visible quand count == 0). */
.mp-navbar__badge[hidden] { display: none !important; }

.mp-navbar__menu-toggle {
  width: var(--mp-btn-h);
  height: var(--mp-btn-h);
  color: var(--mp-color-text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mp-radius-pill);
}

@media (min-width: 1024px) {
  .mp-navbar { height: var(--mp-header-h-md); }
  .mp-navbar__links { display: flex; }
  .mp-navbar__menu-toggle { display: none; }
}

/* === Mobile menu drawer === */
.mp-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--mp-z-drawer);
  background: var(--mp-color-overlay);
  display: none;
}
.mp-mobile-menu.is-open { display: block; }

.mp-mobile-menu__panel {
  position: absolute;
  top: 0; left: 0;
  height: 100vh;
  width: 85%;
  max-width: 320px;
  background: var(--mp-color-primary);
  color: var(--mp-color-text-inverse);
  padding: var(--mp-space-5);
  animation: mp-mobile-menu-in var(--mp-anim);
  overflow-y: auto;
}

@keyframes mp-mobile-menu-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.mp-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mp-space-6);
}
.mp-mobile-menu__close {
  color: var(--mp-color-text-inverse);
  width: var(--mp-btn-h);
  height: var(--mp-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mp-radius-pill);
}
.mp-mobile-menu__close:hover { background: rgba(255, 255, 255, 0.1); }

.mp-mobile-menu__list { display: flex; flex-direction: column; gap: var(--mp-space-1); }
.mp-mobile-menu__link {
  display: block;
  padding: var(--mp-space-3) var(--mp-space-2);
  color: var(--mp-color-text-inverse);
  border-radius: var(--mp-radius-btn);
  font-weight: var(--mp-fw-medium);
}
.mp-mobile-menu__link:hover { background: rgba(255, 255, 255, 0.08); color: var(--mp-color-text-inverse); }

.mp-mobile-menu__lang {
  margin-top: var(--mp-space-6);
  padding-top: var(--mp-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  gap: var(--mp-space-2);
}
.mp-mobile-menu__lang a {
  flex: 1;
  text-align: center;
  padding: var(--mp-space-2) var(--mp-space-3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--mp-radius-btn);
  color: var(--mp-color-text-inverse);
  font-size: var(--mp-fs-sm);
}
.mp-mobile-menu__lang a.is-active {
  background: var(--mp-color-accent);
  border-color: var(--mp-color-accent);
}

/* === Footer === */
.mp-footer {
  background: var(--mp-color-primary);
  color: var(--mp-color-text-inverse);
  padding: var(--mp-space-7) 0 var(--mp-space-5);
  margin-top: var(--mp-space-8);
  min-height: var(--mp-footer-min-h);
}

.mp-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mp-space-5);
}

@media (min-width: 640px) {
  .mp-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .mp-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.mp-footer__title {
  font-size: var(--mp-fs-sm);
  font-weight: var(--mp-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--mp-space-3);
}

.mp-footer__list { display: flex; flex-direction: column; gap: var(--mp-space-2); }
.mp-footer__link {
  color: var(--mp-color-text-inverse);
  opacity: 0.7;
  font-size: var(--mp-fs-sm);
}
.mp-footer__link:hover { opacity: 1; color: var(--mp-color-text-inverse); }

.mp-footer__bottom {
  margin-top: var(--mp-space-6);
  padding-top: var(--mp-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mp-space-3);
  font-size: var(--mp-fs-sm);
  opacity: 0.7;
}

.mp-lang-switcher {
  display: inline-flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px;
  border-radius: var(--mp-radius-pill);
}
.mp-lang-switcher a {
  padding: 4px 12px;
  color: var(--mp-color-text-inverse);
  font-size: var(--mp-fs-xs);
  font-weight: var(--mp-fw-semibold);
  border-radius: var(--mp-radius-pill);
  text-transform: uppercase;
}
.mp-lang-switcher a.is-active { background: var(--mp-color-accent); }
.mp-lang-switcher a:hover { color: var(--mp-color-text-inverse); }