/* ============================================================
   APC — Shared overrides for full-width pages
   Used by: le_groupe.html, nos_realisations.html
   Must override style-768.css through style-1600.css
   ============================================================ */

/* Scrollable body */
html.page-groupe,
html.page-groupe body,
html.page-realisations,
html.page-realisations body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
}

/* Logo: fixed, visible, correct size */
.page-groupe #logo,
.page-realisations #logo {
  position: fixed !important;
  z-index: 99 !important;
  top: 20px !important;
  left: 25px !important;
  width: 80px !important;
  height: 80px !important;
  opacity: 1 !important;
}

@media (min-width: 880px) {
  .page-groupe #logo,
  .page-realisations #logo {
    width: 110px !important;
    height: 110px !important;
    top: 25px !important;
    left: 30px !important;
  }
}

@media (min-width: 1224px) {
  .page-groupe #logo,
  .page-realisations #logo {
    width: 140px !important;
    height: 140px !important;
    top: 30px !important;
    left: 35px !important;
  }
}

@media (min-width: 1600px) {
  .page-groupe #logo,
  .page-realisations #logo {
    width: 160px !important;
    height: 160px !important;
    top: 35px !important;
    left: 40px !important;
  }
}

/* Hamburger button: fixed top-right, 3 horizontal bars */
@media (min-width: 768px) {
  .page-groupe .menubtn,
  .page-realisations .menubtn {
    position: fixed !important;
    top: 30px !important;
    right: 30px !important;
    left: auto !important;
    z-index: 100 !important;
    width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    border-left: 0 !important;
    background-color: rgba(0,0,0,.6) !important;
    text-align: center !important;
    line-height: 50px !important;
  }

  .page-groupe .menubtn:hover,
  .page-realisations .menubtn:hover {
    background-color: rgba(0,0,0,.9) !important;
  }

  .page-groupe .menubtn .mt,
  .page-realisations .menubtn .mt {
    display: none !important;
  }

  .page-groupe .menubtn .mn,
  .page-realisations .menubtn .mn {
    left: 13px !important;
    width: 25px !important;
    height: 2px !important;
    background-color: #fff !important;
  }

  .page-groupe .menubtn .mn1,
  .page-realisations .menubtn .mn1 {
    top: 17px !important;
    transform: none !important;
  }

  .page-groupe .menubtn .mn2,
  .page-realisations .menubtn .mn2 {
    top: 33px !important;
    transform: none !important;
  }

  .page-groupe .menubtn .mn3,
  .page-realisations .menubtn .mn3 {
    top: 25px !important;
    transform: none !important;
  }

  /* Open state: X shape */
  .page-groupe .menubtn.open,
  .page-realisations .menubtn.open {
    background-color: #000 !important;
    width: 50px !important;
  }

  .page-groupe .menubtn.open .mn1,
  .page-realisations .menubtn.open .mn1 {
    top: 25px !important;
    transform: rotate(45deg) !important;
  }

  .page-groupe .menubtn.open .mn2,
  .page-realisations .menubtn.open .mn2 {
    top: 25px !important;
    transform: rotate(-45deg) !important;
  }

  .page-groupe .menubtn.open .mn3,
  .page-realisations .menubtn.open .mn3 {
    left: 100% !important;
  }

  .page-groupe .menubtn.open .mt,
  .page-realisations .menubtn.open .mt {
    display: none !important;
  }

  /* Menu drawer: high z-index */
  .page-groupe .menubox,
  .page-realisations .menubox {
    z-index: 200 !important;
  }
}