/* ══════════════════════════════════════════════════════
   ElanjiMON — correctif mobile (sidebar en drawer)
   À charger APRÈS la feuille principale.
   ══════════════════════════════════════════════════════ */

/* bouton + backdrop (créés par mobile-fix.js) */
.em-burger{
  display:none;position:fixed;top:10px;left:10px;z-index:80;
  width:42px;height:42px;border-radius:10px;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  background:hsl(222 47% 9% / .92);border:1px solid hsl(222 30% 22%);
  backdrop-filter:blur(10px);cursor:pointer;
}
.em-burger span{display:block;width:18px;height:2px;border-radius:2px;background:hsl(210 40% 92%)}
.em-backdrop{
  position:fixed;inset:0;z-index:55;background:rgba(3,7,14,.62);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
body.em-nav-open .em-backdrop{opacity:1;pointer-events:auto}

@media (max-width: 767px){
  html,body{overflow-x:hidden}

  /* la sidebar devient un drawer */
  div.min-h-screen.flex > aside{
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    width:270px;max-width:84vw;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.22,1,.36,1);
    box-shadow:0 0 60px rgba(0,0,0,.75);
    will-change:transform;
  }
  body.em-nav-open div.min-h-screen.flex > aside{transform:translateX(0)}

  /* le contenu prend toute la largeur */
  div.min-h-screen.flex > main{
    width:100%;min-width:0;flex:1 1 100%;
    padding-top:56px;
  }
  div.min-h-screen.flex > main > div{
    padding:16px 14px 28px !important;
    max-width:100% !important;
    margin:0 !important;
  }

  /* titres de page trop grands */
  div.min-h-screen.flex > main h1{font-size:26px !important;line-height:1.15 !important}
  div.min-h-screen.flex > main h2{font-size:20px !important}

  /* tableaux : scroll horizontal au lieu de casser la page */
  div.min-h-screen.flex > main table{display:block;overflow-x:auto;white-space:nowrap}
  div.min-h-screen.flex > main pre{overflow-x:auto;max-width:100%}

  /* grilles : 2 colonnes adaptatives au lieu de 4 figées */
  div.min-h-screen.flex > main .grid{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  }

  .em-burger{display:flex}
}
@media (min-width: 768px){
  .em-burger,.em-backdrop{display:none !important}
}