@media (max-width: 900px) {
    :root {
    --header-h: 50px;
    --footer-h: 30px;
--sidebar-w: clamp(16rem, 82vw, 22rem);
--sidebar-r: clamp(16rem, 82vw, 22rem);
    --header-h: 30px;
    --footer-h: 50px;
    --sidebar-w: 17rem;
    --sidebar-r: 21rem;
} 
header,
footer{
height: auto;
}

.site-footer{
  
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:0.3rem;
  padding: 0.2rem;
  
}
.header-title,
.header-title h1{
  font-size: 1rem;
}
  /* grid unique : main prend tout */
.layout,
  .layout.has-right-aside {
    grid-template-columns: 1fr;
  }
 /* Si pas d’aside droit → cacher le bouton burger droit */
  .layout:not(.has-right-aside) .open-aside.right {
    display: none !important;
  }
    .main{
    padding:.8rem;
    padding-top:0;
 /*   height:calc(100vh - var(--header-h) - var(--footer-h));*/

}
  /* asides cachés par défaut */
  .sidebar {
 /* transform: translateX(-100%); /* caché hors écran */
    transition: transform .7s ease;
    position:absolute;
 /*       position: fixed; /* overlay par-dessus Main */
    top: var(--header-h);
    bottom: var(--footer-h);
    top:0;
    bottom: 0;
    z-index: 2500;
    width: var(--sidebar-w);   /* largeur réglable */
 /*   max-width: 90vw;           /* sécurité pour petits écrans */
 /*   min-width: 200px;  */        /* évite les bugs d’affichage */
    overflow-y: auto;

    background: #f4f4f4;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display:none;
  }
  .left-aside {
    left: 0;
   /* transform: translateX(-100%); /* caché hors écran */
  }
  .right-aside {
        width: var(--sidebar-r);
    right: 0;
   /* transform: translateX(100%); /* caché hors écran */
  }
  /* Quand ouvert */
  .sidebar.open,
 .left-aside.open,
.right-aside.open{
 /*   transform:translateX(0);*/

}
  /* burger buttons visibles */
  .open-aside {
    display: block;
   /* width:42px;
    height:42px;
    font-size:24px;*/
    
  }
/*
  .open-aside.left { left: 10px; }
  .open-aside.right { right: 10px; }


/*
.layout {
    position: static;
  }

  footer {
    position: static;
  }

  header {
    position: static;
  }
*/
.overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    z-index:2400;
}
}