/* ══ Matéria Nova — Navigation mobile ══════════════════════════ */

/* Footer index.html — fixé en bas sur desktop uniquement */
@media (min-width: 768px) {
  .mn-index-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
}

/* ── Bouton hamburger (fixe, haut gauche) ──────────────────── */
.mn-mob-btn {
  display: none;
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.4rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.mn-mob-btn span {
  display: block;
  height: 1px;
  background: #c9a875;
  transition: width 0.35s cubic-bezier(0.25,1,0.5,1),
              transform 0.35s cubic-bezier(0.25,1,0.5,1),
              opacity 0.2s ease;
}
.mn-mob-btn span:nth-child(1) { width: 24px; }
.mn-mob-btn span:nth-child(2) { width: 16px; }

/* Transformation en croix à l'ouverture */
.mn-mob-btn.mn-active span:nth-child(1) {
  width: 22px;
  transform: rotate(45deg) translate(4.5px, 4.5px);
}
.mn-mob-btn.mn-active span:nth-child(2) {
  width: 22px;
  transform: rotate(-45deg);
}

/* ── Panneau plein écran ────────────────────────────────────── */
.mn-mob-panel {
  position: fixed;
  inset: 0;
  background: #1a2c4a;
  z-index: 500;
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 3.5rem 2.5rem 5rem;
  pointer-events: none;
  border-right: 1px solid rgba(201,168,117,0.08);
}
.mn-mob-panel.mn-open {
  transform: translateX(0);
  pointer-events: all;
}

/* ── Contenu du panneau ─────────────────────────────────────── */
.mn-mob-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.mn-mob-section-title {
  font-family: 'Noto Sans Display', sans-serif;
  font-weight: 100;
  font-size: 0.63rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c9a875;
  opacity: 0.8;
  margin-top: 2.2rem;
  margin-bottom: 0.35rem;
}

.mn-mob-link {
  display: block;
  font-family: 'Noto Sans Display', sans-serif;
  font-weight: 100;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.25s ease;
}
.mn-mob-link:active { color: #c9a875; }

.mn-mob-contact {
  display: inline-block;
  align-self: flex-start;
  margin-top: 3rem;
  font-family: 'Noto Sans Display', sans-serif;
  font-weight: 100;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c9a875;
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  border: 1px solid rgba(201,168,117,0.4);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.mn-mob-contact:active {
  border-color: rgba(201,168,117,0.8);
  background: rgba(201,168,117,0.06);
}

/* ══ Corrections layout mobile (≤ 767px) ═══════════════════════ */
@media (max-width: 767px) {

  /* Afficher le bouton hamburger */
  .mn-mob-btn { display: flex; }

  /* body : row → column pour empiler les blocs */
  body.flex {
    flex-direction: column !important;
  }

  /* ── Toutes pages avec sidebar : masquer (nav dans le hamburger) ── */
  .mn-sidebar { display: none !important; }

  /* ── index.html uniquement : sidebar visible comme header, liens nav cachés ── */
  .mn-home .mn-sidebar {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  .mn-home .mn-sidebar > div:first-child {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .mn-home .mn-sidebar .nav-links {
    display: none !important;
  }

  /* Main content : plus de marge sidebar, scroll libre */
  .mn-main {
    margin-left: 0 !important;
    padding: 1.5rem 1.5rem 4rem !important;
    min-height: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
  }

  /* ── index.html ── */

  /* Débloquer le scroll vertical (body porte overflow-hidden via Tailwind) */
  body.overflow-hidden {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Footer mobile : position statique dans le flux, après les sculptures */
  .mn-index-footer {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    margin-top: 3rem;
    background: #1a2c4a;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }

  /* Citation La Fondatrice : replacer dans le flux (position:absolute → relative) */
  .citation-block {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    max-width: 90% !important;
    margin: 0 auto 2.5rem !important;
    text-align: right;
  }

  /* Empiler les sculptures verticalement */
  .mn-sculptures-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2.5rem !important;
    padding: 0 1rem !important;
    margin-top: 1.5rem !important;
    max-width: 100% !important;
  }
  /* ── synergia.html / aurora.html ── */
  .page-content { padding: 5rem 1.5rem 5rem !important; }
  .nav-back { display: none !important; }

  /* ── perspectives.html ── */
  .nav-back-hero { display: none !important; }

  /* ── Tous types ── */
  /* Masquer le bouton "Nous écrire" fixe (présent dans le menu) */
  .mn-contact-btn { display: none !important; }
}
