/* mobile-menu.css — overlay plein écran "dashboard"
   Remplace l'ancien drawer latéral. Voile sombre + blur sur tout l'écran,
   grille de modules centrée. Responsive : 3-4 cols desktop, 2 cols mobile,
   1 col en très petit écran.

   Palette : neutre/sobre. Pas de doré décoratif — réservé aux états
   d'accent rares (focus visible). Voir feedback_no_gold_decoration.md. */

/* ── Hamburger trigger (toujours visible) ─────────────────────── */
.mm-trigger {
  display: inline-flex;
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e8e3d7;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  font-family: inherit;
  padding: 0;
  line-height: 1;
}
.mm-trigger:hover,
.mm-trigger:active {
  background: rgba(0, 0, 0, 0.68);
  border-color: rgba(255, 255, 255, 0.30);
  transform: translateY(-1px);
}
.mm-trigger .mm-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.mm-trigger .mm-bars span {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  display: block;
}

/* Sur la page admin (header sticky 60px), on aligne verticalement le burger
   sur le header. Position fixed est conservée pour qu'il survive au scroll. */
body.admin-body .mm-trigger {
  top: 6px;
  right: 16px;
}

@media (max-width: 640px) {
  .mm-trigger {
    width: 42px;
    height: 42px;
    top: 14px;
    right: 16px;
  }
  .mm-trigger .mm-bars span { width: 16px; }
}

/* Cache le hamburger quand une modale/panneau prioritaire est ouvert */
body:has(.modal-overlay:not([hidden])) .mm-trigger,
body:has(.fb-overlay:not([hidden])) .mm-trigger,
body:has(#settings-panel.open) .mm-trigger,
body.tv-fullscreen .mm-trigger {
  display: none !important;
}

/* ── Lock du scroll body quand le menu est ouvert ─────────────── */
html.mm-locked,
html.mm-locked body { overflow: hidden; }

/* ── Overlay (voile + blur) ───────────────────────────────────── */
.mm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(8, 7, 5, 0.62);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  opacity: 0;
  transition: opacity 0.26s ease;
  align-items: stretch;
  justify-content: center;
  padding: 32px;
}
.mm-overlay.visible { display: flex; }
.mm-overlay.open    { opacity: 1; }

/* ── Panel central ────────────────────────────────────────────── */
.mm-panel {
  width: 100%;
  max-width: 1180px;
  max-height: calc(100vh - 64px);
  margin: auto;
  background: linear-gradient(180deg, #131210 0%, #0e0d0b 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e8e3d7;
  font-family: 'DM Sans', sans-serif;
  transform: scale(0.98) translateY(8px);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mm-overlay.open .mm-panel { transform: scale(1) translateY(0); }

/* ── Header ──────────────────────────────────────────────────── */
.mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mm-head-text { min-width: 0; }
.mm-greeting {
  font-family: 'Instrument Serif', serif;
  font-size: 1.7rem;
  line-height: 1.1;
  color: #e8e3d7;
}
.mm-sub {
  margin-top: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 0.74rem;
  color: #8a8578;
  letter-spacing: 0.02em;
}
.mm-close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #b9b3a4;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mm-close:hover {
  color: #e8e3d7;
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.04);
}

/* ── Body scrollable ─────────────────────────────────────────── */
.mm-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 28px 28px;
  -webkit-overflow-scrolling: touch;
}

.mm-loading {
  padding: 60px 0;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: #8a8578;
  letter-spacing: 0.05em;
}

/* ── Sections ────────────────────────────────────────────────── */
.mm-section { padding-top: 14px; }
.mm-section + .mm-section { padding-top: 26px; }

.mm-section-title {
  margin: 0 0 14px;
  font-family: 'DM Mono', monospace;
  font-size: 0.70rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8578;
  font-weight: 400;
}

/* ── Grille de modules ───────────────────────────────────────── */
.mm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 12px;
}

.mm-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 14px;
  background: #15140f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 128px;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  width: 100%;
}
.mm-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: #1a1813;
  transform: translateY(-1px);
}
.mm-card.current {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
}

.mm-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mm-card-icon {
  font-size: 1.1rem;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c4bfb1;
  flex-shrink: 0;
  opacity: 0.85;
}
.mm-card-label {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-size: 1.12rem;
  font-weight: 400;
  color: #e8e3d7;
  line-height: 1.15;
}
.mm-card-desc {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #a9a396;
  flex: 1;
}
.mm-card-signal {
  margin-top: 2px;
  font-family: 'DM Mono', monospace;
  font-size: 0.70rem;
  letter-spacing: 0.02em;
  color: #8a8578;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  min-height: 1.2em;
}

/* Cartes purement informatives (pas encore de page dédiée) : pas de
   hover translate ni de curseur pointer pour ne pas tromper. */
.mm-card.info-only { cursor: default; }
.mm-card.info-only:hover {
  background: #15140f;
  border-color: rgba(255, 255, 255, 0.06);
  transform: none;
}

/* ── Footer (profil + logout) ────────────────────────────────── */
.mm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 7, 5, 0.55);
}
.mm-foot-id { min-width: 0; }
.mm-foot-name {
  font-family: 'Instrument Serif', serif;
  font-size: 1.0rem;
  color: #e8e3d7;
  line-height: 1.1;
}
.mm-foot-mail {
  margin-top: 2px;
  font-family: 'DM Mono', monospace;
  font-size: 0.70rem;
  color: #8a8578;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-logout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #9a9590;
  font-family: 'DM Mono', monospace;
  font-size: 0.74rem;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mm-logout:hover {
  color: #e88080;
  border-color: rgba(232, 128, 128, 0.45);
  background: rgba(232, 128, 128, 0.05);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .mm-overlay { padding: 0; }
  .mm-panel {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .mm-head { padding: 18px 18px; }
  .mm-greeting { font-size: 1.5rem; }
  .mm-body  { padding: 14px 16px 24px; }
  .mm-foot  { padding: 12px 16px; }
  .mm-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mm-card  { min-height: 116px; padding: 14px 14px 12px; }
  .mm-card-label { font-size: 1.0rem; }
  .mm-card-desc  { font-size: 0.78rem; }
  .mm-foot-mail  { display: none; }
}
@media (max-width: 400px) {
  .mm-grid { grid-template-columns: 1fr; }
}

/* ── Header existant : caché par le menu ─────────────────────── */
/* Mêmes règles que l'ancien drawer : on cache tout ce qui a été migré
   pour garder les pages "propres" (le burger est l'unique point d'accès). */
body .tv-header .cockpit-btn,
body .tv-header .fb-trigger,
body .tv-header .clock-wrap,
body .tv-header .h-sep,
body .admin-header .admin-nav,
body .landing-logout { display: none !important; }

body .header { display: none !important; }
body .tv-header .header-right { gap: 0; }
body .tv-header { position: relative; padding-right: 64px; }
body .admin-header { padding-right: 80px; }