:root{
  --menu-size: 44px;
  --menu-z: 10000;     /* au-dessus des éléments du player */
  --panel-z: 9999;
  --panel-width: min(85vw, 320px);
  --panel-bg: #014a4e;
}

/* Bouton hamburger (toujours visible, coin haut-gauche) */
.dmr-hamburger{
  position: fixed;
  top: 12px; left: 12px;
  width: var(--menu-size); height: var(--menu-size);
  z-index: var(--menu-z);
  display: grid; place-items: center;
  font-size: 26px; line-height: 1;
  background: rgba(0,0,0,.35);
  color: #63aeb5;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.dmr-hamburger:hover{ color:#fff; }

/* Panneau latéral */
.dmr-menu{
  position: fixed;
  inset: 0 auto 0 0;               /* côté gauche */
  width: var(--panel-width);
  max-width: 80%;
  height: 80%;
  transform: translateX(-100%);
  background: var(--panel-bg);
  z-index: var(--panel-z);
  padding: 60px 12px 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  overflow-y: auto;
  display: flex; flex-direction: column;
  transition: transform .2s ease;
}
.dmr-menu.is-open{ transform: translateX(0); }

.dmr-menu a{
  color:#63aeb5;
  text-decoration:none;
  padding:12px;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.dmr-menu a:hover{ background:#026066; }

/* Voile de fond (clic pour fermer) */
.dmr-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 9998;                  /* sous le panneau, au-dessus du reste */
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dmr-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* Bouton "fermer" dans le panneau */
.dmr-close{
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; border-radius: 8px;
  background: rgba(0,0,0,.2);
  color: #fff; font-size: 22px;
  cursor: pointer;
}
.dmr-close:hover{ background: rgba(0,0,0,.35); }

.dmr-menu{
  padding-top: 56px;
  padding-bottom: 56px;
  box-sizing: border-box;
}

:root{ --panel-width: 62vw; }   /* choisis: 320px, 55vw, etc. */
.dmr-menu{ width: var(--panel-width); max-width: none; }

/* Mobile portrait : menu plus étroit */
@media (max-width: 100px) and (orientation: portrait){
  .dmr-menu{
    width: 55vw !important;     /* ajuste ici: 50–70vw selon ton goût */
    max-width: none !important;  /* neutralise ton max-width:80% plus haut */
    box-sizing: border-box;
  }
}

/* Largeur du menu (globale) */
.dmr-menu { width: 260px !important; max-width: none !important; }

.dmr-close{ display:none !important; }

/* Donne au bouton hamburger la même “place” qu'une miniature */
.dmr-menu-icon{
  width:100px;            /* même largeur que .header-bottom img */
  height:64px;            /* ajuste si besoin pour matcher la hauteur visuelle */
  display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer; font-size:28px; line-height:1;
}