/* Sidebar rétractable - Blog JLM / Dotclear 2.38 */

#sidebar.sidebar-collapsible {
  position: sticky;
  top: 1rem;
  z-index: 20;
  transition: width .18s ease;
}

#sidebar.sidebar-collapsible .sidebar-toggle {
  display: block;
  width: 100%;
  min-height: 2.6em;
  margin: 0 0 .75em 0;
  padding: .55em .7em;
  border: 1px solid #0b6f9f;
  border-radius: 4px;
  background: linear-gradient(#188BC0, #0384C0);
  color: #fff;
  font-family: "DejaVu Sans", "helvetica neue", helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

#sidebar.sidebar-collapsible .sidebar-toggle:hover,
#sidebar.sidebar-collapsible .sidebar-toggle:focus {
  background: linear-gradient(#DC5F59, #B33630);
  border-color: #9f2f2a;
  color: #fff;
  outline: none;
}

#sidebar.sidebar-collapsible .sidebar-toggle:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}

#sidebar.sidebar-collapsible .sidebar-panel {
  overflow: visible;
}

#sidebar.sidebar-collapsible.sidebar-is-collapsed {
  width: 54px;
}

#sidebar.sidebar-collapsible.sidebar-is-collapsed .sidebar-panel {
  display: none;
}

#sidebar.sidebar-collapsible.sidebar-is-collapsed .sidebar-toggle {
  min-height: 8rem;
  margin-bottom: 0;
  padding: .7em .35em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin-top:20px;
}

#sidebar.sidebar-collapsible.sidebar-is-expanded {
  width: 236px;
}

@media only screen and (min-width: 1061px) {
  body.sidebar-is-collapsed #content,
  body.sidebar-is-collapsed #content-focus {
    margin-right: 80px;
  }

  body.sidebar-is-expanded #content,
  body.sidebar-is-expanded #content-focus {
    margin-right: 260px;
  }
}

@media only screen and (max-width: 1060px) {
  #sidebar.sidebar-collapsible {
    position: static;
    top: auto;
    width: auto;
    float: none;
    clear: both;
    margin: 0 0 1rem 0;
  }

  #sidebar.sidebar-collapsible.sidebar-is-collapsed,
  #sidebar.sidebar-collapsible.sidebar-is-expanded {
    width: auto;
  }

  #sidebar.sidebar-collapsible.sidebar-is-collapsed .sidebar-toggle,
  #sidebar.sidebar-collapsible.sidebar-is-expanded .sidebar-toggle {
    min-height: 2.6em;
    margin-bottom: .75em;
    padding: .55em .7em;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }
}