/* === Mobile Menu & Theme Harmonization (opaque backgrounds) === */
:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --stroke:#e5e7eb;
  --card:#0b0b0b;
  --card-text:#ffffff;
  --brand:#dc2626;
  --brand-2:#b91c1c;
  --accent:#ffffff;
}
html[data-theme="dark"]{
  --bg:#0b0b0b;
  --text:#f5f5f5;
  --muted:#9ca3af;
  --stroke:#262626;
  --card:#111111;
  --card-text:#ffffff;
}

/* Forcer un fond opaque partout */
html, body{ background:var(--bg); color:var(--text) }
nav.container{ background:var(--bg); border-bottom:1px solid var(--stroke) }

/* Panneau du menu mobile (opaque) */
.menu{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--stroke);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Sous-menu boutons (si utilisé) */
.btn-menu{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--stroke);
  border-radius:12px;
}

/* Liens / boutons dans le menu */
.menu a, .menu button{
  color:var(--text);
  border-color:var(--stroke);
}

/* Overlay neutre (léger assombrissement pour la lisibilité) */
.backdrop{ background: rgba(0,0,0,.4); }
html[data-theme="dark"] .backdrop{ background: rgba(0,0,0,.6); }

/* Header compact en mobile */
@media (max-width:900px){
  nav.container{ gap:.5rem }
  .nav-spacer{ display:none }
  .btn{ padding:.6rem .9rem }
}

/* Boutons du menu en pills (opaques) */
.menu [data-as="button"], .menu .btn, .menu a.btn{
  display:block;
  margin:.35rem 0;
  padding:.8rem 1rem;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:var(--bg);
  color:var(--text);
}

/* Bouton accentué */
.menu a.btn.secondary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
html[data-theme="dark"] .menu a.btn.secondary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}