/* ============================================================
   APC — Azur Promotion Construction
   Global Stylesheet (consolidated)
   Replaces: style.css + style-480/640/768/880/992/1224/1440/1600.css
   ============================================================ */

/* --- Custom Properties --- */
:root {
  --font-main: 'Open Sans', sans-serif;
  --color-text: #333;
  --color-text-dark: #111;
  --color-text-light: #666;
  --color-text-muted: #707070;
  --color-link: #0066FF;
  --color-bg: #fff;
  --color-border: #ccc;
  --color-border-light: #e5e5e5;
  --color-overlay: rgba(255,255,255,.92);
  --color-menu-bg: #fff;
  --color-btn-bg: rgba(0,0,0,.7);
  --color-btn-bg-hover: rgba(0,0,0,1);
  --shadow-panel: 0 0 10px 0 rgba(50,50,50,.75);
  --shadow-menu: inset -5px 0 10px 0 rgba(50,50,50,.25);
  --transition-speed: .5s;
  --transition: all var(--transition-speed) ease;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  font-family: var(--font-main);
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  height: 100%;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  text-align: justify;
  overflow: hidden;
  overflow-y: scroll;
  transition: var(--transition);
}

p { margin-top: 0; }
p:last-child { margin-bottom: 0; }

a { text-decoration: none; color: var(--color-link); }
a, a:active, a:focus, a:hover { outline: 0; }
a:hover { color: var(--color-text-dark); }
a.discover { text-transform: uppercase; font-size: .9em; font-weight: 700; }

h1 {
  text-align: left;
  line-height: normal;
  color: #000;
  font-weight: 300;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, p:first-child { margin-top: 0; }
h4 { margin-bottom: 0; color: var(--color-text-muted); }

hr { border: 0; height: 1px; background-color: var(--color-border); }
img { max-width: 100%; height: auto; }
span.desc { font-style: italic; font-weight: normal; float: right; }
.clr { height: 1px; clear: both; }

/* --- Forms --- */
input, select, textarea {
  margin: 0 3px 5px 0;
  resize: none;
  max-width: 100%;
  outline: 0;
  font-family: var(--font-main);
}

input, textarea {
  border: 1px solid var(--color-border);
  background: transparent;
  font-size: 9pt;
  color: var(--color-text);
  padding: 3px;
}

input:focus, textarea:focus {
  border-color: var(--color-text);
  color: #000;
}

input.button, label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

label { color: var(--color-text); display: block; }
label.desc { display: inline; }
label.hotel { display: block; float: left; width: 80px; }

input.button {
  border: none;
  background: #666;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  float: right;
}
input.button:hover { background: var(--color-text-dark); color: #fff; }
input.button:active { color: #FF0; }

.inpString, textarea { width: 550px; }
.inpShort { width: 100px; }
.inpErr { border: 1px solid red; }
.error { color: red; }
.securitycode { color: #0066CC; font-weight: bold; }

/* --- Logo --- 
   Monogramme doré seul (apc_logo_mono.png), fond transparent
   Même fichier mobile et desktop, seule la taille change
*/
#logo {
  position: absolute;
  top: 30px;
  left: 10px;
  height: 70px;
  width: 70px;
  display: block;
  background: url(../images/apc_logo.png) center / contain no-repeat;
  transition: var(--transition);
}
#logo.menuopen { top: 524px; }

/* --- Content Panel --- */
#container { transition: var(--transition); }

#content {
  position: relative;
  line-height: 1.5em;
  padding: 30px 20px;
}

#hidecon { display: none; transition: var(--transition); }

/* --- Hamburger Button --- */
.menubtn {
  position: absolute;
  top: 10px;
  right: 0;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  border: 0;
  padding: 0;
  font-size: inherit;
  background-color: var(--color-btn-bg);
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition);
}
.menubtn:focus { outline: none; }
.menubtn:hover { background-color: var(--color-btn-bg-hover); }

.menubtn .mt { display: none; }

.menubtn .mn {
  position: absolute;
  top: 25px;
  left: 13px;
  width: 25px;
  height: 2px;
  background-color: #ccc;
  transition: var(--transition);
}
.menubtn:hover .mn { background-color: #fff; }
.menubtn .mn1 { top: 17px; }
.menubtn .mn2 { top: 33px; }

.menubtn.open { background-color: #000; }
.menubtn.open .mn1 { top: 25px; transform: rotate(45deg); }
.menubtn.open .mn2 { top: 25px; transform: rotate(-45deg); }
.menubtn.open .mn3 { left: 100%; }

/* --- Menu Drawer --- */
.menubox {
  position: relative;
  margin-top: -514px;
  background-color: var(--color-menu-bg);
  box-shadow: inset 0 -5px 10px 0 rgba(50,50,50,.25);
  overflow: hidden;
  transition: var(--transition);
}
.menushow { margin-top: 0; }

.nav-menu {
  position: relative;
  margin-top: 30px;
  margin-bottom: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-menu li {
  display: block;
  position: relative;
  width: 100%;
}

.nav-menu li a {
  color: var(--color-text-light);
  display: block;
  font-weight: 300;
  line-height: 3em;
  letter-spacing: .1em;
  height: 3em;
  padding: 0 0 0 20px;
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  text-transform: uppercase;
  transition: color .3s ease, border-color .3s ease;
}
.nav-menu li:first-child a { border-top: 1px solid var(--color-border-light); }
.nav-menu li a:hover, .nav-menu li:hover > a {
  color: var(--color-text-dark);
  border-bottom-color: var(--color-text-dark);
}
.nav-menu .mActive { color: var(--color-text-dark); font-weight: 700; }

/* Submenu */
.nav-menu .has-submenu { position: relative; }
.nav-menu .submenu { display: none; margin: 0; padding: 0; list-style: none; }
.nav-menu .has-submenu.open .submenu { display: block; }
.nav-menu .submenu li a {
  padding-left: 40px;
  font-size: .85em;
  line-height: 2.5em;
  height: 2.5em;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid #f0f0f0;
}
.nav-menu .submenu li a:hover { color: var(--color-text-dark); border-bottom-color: var(--color-text-dark); }
.nav-menu .submenu .mActive { color: var(--color-text-dark); font-weight: 700; }

/* --- Social Media --- */
.socmed {
  position: relative;
  left: 5px;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.socmed li { display: block; float: left; margin: 2em 10px 2em 0; }
.socmed li a {
  display: block;
  width: 40px;
  height: 40px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
  opacity: .5;
  transition: opacity .3s ease;
}
.socmed li a:hover { opacity: 1; }
.linkedin { background-image: url(../images/ic-linkedin.png); }
.instagram { background-image: url(../images/ic-instagram.png); }

/* --- Background Image Slideshow --- */
.panes {
  position: relative;
  overflow: hidden;
  height: 70%;
  width: 100%;
  left: 0;
  top: 35px;
  z-index: 0;
  transition: var(--transition);
}

.panes div.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: block;
  background: center / contain no-repeat;
  opacity: 0;
  transition: opacity 1s ease;
}
.panes div.bgImage.active {
  opacity: 1;
}

/* --- Slide Shade Overlay --- */
#slideshd {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  transition: var(--transition);
}
#slideshd.menuopen { top: 514px; }
#slideshd::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100px;
  width: 100%;
  background: url(../images/shades.png) top left / contain no-repeat;
  transition: var(--transition);
}

/* --- Prev / Next Arrows --- */
a.backward, a.forward {
  position: absolute;
  top: 50%;
  margin-top: -141px;
  width: 19px;
  height: 19px;
  cursor: pointer;
  z-index: 2;
  background-color: transparent;
  overflow: hidden;
  transition: var(--transition);
}
a.backward { left: 20px; }
a.forward { right: 20px; }

a.backward::before, a.backward::after,
a.forward::before, a.forward::after {
  content: '';
  position: absolute;
  top: 13px;
  left: 5px;
  width: 10px;
  height: 2px;
  background-color: #fff;
  transition: var(--transition);
}
a.backward::before, a.forward::before { top: 5px; }
a.backward::before, a.forward::after { transform: rotate(120deg); }
a.backward::after, a.forward::before { transform: rotate(60deg); }

a.backward:hover::after, a.forward:hover::after { top: 12px; }
a.backward:hover::before, a.forward:hover::before { top: 6px; }
a.backward:hover::before, a.backward:hover::after { left: 4px; }
a.forward:hover::before, a.forward:hover::after { left: 6px; }
a.backward:hover::before, a.forward:hover::after { transform: rotate(135deg); }
a.backward:hover::after, a.forward:hover::before { transform: rotate(45deg); }

/* --- Slide Navigation Dots --- */
#slidenav {
  position: absolute;
  top: 50%;
  margin-top: -140px;
  left: 10%;
  width: 80%;
  height: 35px;
  text-align: center;
  overflow: hidden;
  transition: var(--transition);
}
#slidenav.gallery { height: 55px; margin-top: -60px; }

.slidetabs { display: inline-block; }

.slidetabs a {
  width: 10px;
  height: 10px;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  display: block;
  color: var(--color-text);
  line-height: 15px;
  text-align: center;
  border: 1px solid #fff;
  background: rgba(255,255,255,0);
  cursor: pointer;
  transition: background .3s ease;
}
.slidetabs a:last-child { margin-right: 0; }
.slidetabs a:hover { background: rgba(255,255,255,.5); }
.slidetabs a.current { background: #fff; color: var(--color-text-dark); }
.gallery .slidetabs a:nth-child(13) { margin-right: 0; }
.gallery .slidetabs a:nth-child(14) { clear: left; }

/* --- Background sizing helper --- */
#logo, #slideshd::after, a.backward, a.forward {
  background-size: contain;
}

/* --- Photo Gallery Grid --- */
.photoGallery {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}
.photoGallery li {
  float: left;
  width: 32%;
  margin: 0 2% 2% 0;
  line-height: 0;
  background: center / cover no-repeat;
  overflow: hidden;
}
.photoGallery li:nth-child(3n) { margin-right: 0; clear: right; }
.photoGallery li img { display: block; width: 100%; height: auto; }

/* --- Video Player (for project pages with MP4) --- */
.video-wrapper {
  position: relative;
  width: 100%;
  margin: 1em 0;
  line-height: 0;
}
.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}
.photoGallery li.video-thumb {
  position: relative;
  cursor: pointer;
}
.photoGallery li.video-thumb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 22px;
  border-color: transparent transparent transparent rgba(255,255,255,.85);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
  pointer-events: none;
}

/* --- Loader --- */
.loader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #FFF url(../images/loading.gif) no-repeat center center;
  display: block;
}
.hideloader { display: none; }

/* --- Visibility Helpers --- */
.hidebox {
  opacity: 0;
  transition: opacity 1s ease;
}
a.backward:hover, a.forward:hover,
.socmed li a:hover,
.showbox {
  opacity: 1;
}

/* --- Shadow utility --- */
.shadow {
  box-shadow: var(--shadow-panel);
}


/* ============================================================
   RESPONSIVE — Mobile-first, consolidated breakpoints
   ============================================================ */

/* --- 480px+ --- */
@media (min-width: 480px) {
  #logo { top: 10px; left: 50px; width: 80px; height: 80px; }
  #logo.menuopen { top: 534px; }
  #content { padding: 40px 25px; }

  .menubtn { top: 20px; width: 70px; height: 70px; }
  .menubtn .mn { top: 35px; left: 17px; width: 35px; }
  .menubtn .mn1 { top: 25px; }
  .menubtn .mn2 { top: 45px; }
  .menubtn.open .mn1, .menubtn.open .mn2 { top: 35px; }
  .nav-menu li a { padding: 0 0 0 25px; }
  .socmed { left: 10px; }

  .panes { height: 100%; top: 50px; }
  #slideshd::after { height: 150px; }

  a.backward { top: 70%; left: 25%; margin-top: -53px; width: 29px; height: 29px; }
  a.forward { top: 70%; left: 75%; margin-top: -53px; width: 29px; height: 29px; }
  a.backward::before, a.backward::after,
  a.forward::before, a.forward::after { top: 19px; left: 7px; width: 15px; height: 3px; }
  a.backward::before, a.forward::before { top: 8px; }
  a.backward:hover::after, a.forward:hover::after { top: 17px; }
  a.backward:hover::before, a.forward:hover::before { top: 9px; }
  a.backward:hover::before, a.backward:hover::after { left: 6px; }
  a.forward:hover::before, a.forward:hover::after { left: 8px; }

  #slidenav { top: 70%; margin-top: -45px; }
  #slidenav.gallery { height: 55px; }
  .slidetabs a { width: 15px; height: 15px; }
}

/* --- 640px+ --- */
@media (min-width: 640px) {
  #logo { height: 100px; width: 100px; }
  #content { padding: 50px 30px; }
  .nav-menu li a { padding: 0 0 0 30px; }
  .socmed { left: 15px; }
}

/* --- 768px+ (desktop layout) --- */
@media (min-width: 768px) {
  body { overflow-y: hidden; }
  .menuopen { left: 300px; }

  #logo { top: 30px; left: 30px; width: 140px; height: 140px; }
  #logo.menuopen { top: 30px; }

  #container {
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
    height: 100%;
    background: var(--color-overlay);
    overflow: hidden;
  }
  #container.conhid { right: -410px; }

  #content {
    position: relative;
    overflow: hidden;
    line-height: 1.5em;
    height: 100%;
    padding: 50px 20px 50px 40px;
  }
  #textcon, #headcon {
    position: relative;
    padding-right: 20px;
    outline: 0;
    overflow: auto;
  }
  #textcon.noscroll { margin-right: 0; }

  #hidecon {
    display: block;
    position: absolute;
    right: -15px;
    top: -15px;
    width: 70px;
    height: 70px;
    cursor: pointer;
    border: 0;
    background-color: transparent;
  }
  #hidecon:focus { outline: none; }
  #hidecon::after, #hidecon::before {
    content: '';
    position: absolute;
    top: 35px;
    right: 20px;
    width: 30px;
    height: 2px;
    background-color: #666;
    transition: var(--transition);
  }
  #hidecon:hover::after, #hidecon:hover::before { background-color: var(--color-text-dark); }
  #hidecon::before { transform: rotate(225deg); }
  #hidecon::after { transform: rotate(135deg); }
  #hidecon.hide::before { transform: rotate(90deg); }
  #hidecon.hide::after { transform: rotate(0deg); }

  .menubtn {
    top: 185px;
    left: 0;
    right: auto;
    width: 100px;
    height: 50px;
    border-left: 3px solid #fff;
    background-color: rgba(0,0,0,.4);
  }
  .menubtn:hover { background-color: rgba(0,0,0,.8); }
  .menubtn:hover .mn { background-color: #000; }
  .menubtn .mt { display: block; }
  .menubtn .mn { position: absolute; left: -40px; width: 35px; height: 2px; background-color: #666; }
  .menubtn .mn1 { transform: rotate(225deg); }
  .menubtn .mn2 { transform: rotate(135deg); }
  .menubtn.open { width: 50px; background-color: #fff; border-left: 0; }
  .menubtn.open .mn { left: 7px; top: 25px; }
  .menubtn.open .mt, .menubtn .mn3 { display: none; }

  .menubox {
    position: fixed;
    width: 300px;
    height: 100%;
    top: 0;
    left: -300px;
    margin-top: 0;
    background-color: var(--color-menu-bg);
    box-shadow: var(--shadow-menu);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .menushow { left: 0; }

  .nav-menu { margin-top: 30px; }
  .nav-menu li a { padding: 0 0 0 50px; }
  .nav-menu .submenu li a { padding-left: 70px; }
  .socmed { position: relative; left: 40px; bottom: auto; margin-top: 40px; }

  .panes { position: absolute; height: 100%; }
  #slideshd::after { height: 200px; }
  #slideshd.menuopen { top: 0; }
  #slideshd.sldhid::after { opacity: 0; }

  a.backward, a.forward {
    position: absolute;
    top: 100%;
    margin-top: -90px;
    width: 0;
    height: 49px;
    cursor: pointer;
    z-index: 2;
    background-color: transparent;
    overflow: hidden;
  }
  a.backward { left: 0; }
  a.forward { right: 0; }
  a.backward.show { left: 50px; }
  a.forward.show { right: 50px; }
  a.backward.show, a.forward.show { width: 49px; }
  a.backward::before, a.backward::after,
  a.forward::before, a.forward::after { top: 30px; left: 14px; width: 20px; height: 4px; }
  a.backward::before, a.forward::before { top: 14px; }
  a.backward:hover::after, a.forward:hover::after { top: 28px; }
  a.backward:hover::before, a.forward:hover::before { top: 16px; }
  a.backward:hover::before, a.backward:hover::after { left: 11px; }
  a.forward:hover::before, a.forward:hover::after { left: 17px; }

  #slidenav { top: 100%; margin-top: 0; }
  #slidenav.show { height: 35px; margin-top: -80px; }
  #slidenav.gallery { margin-top: 0; }
  #slidenav.gallery.show { height: 75px; margin-top: -100px; }
  .slidetabs a { width: 30px; height: 30px; }
  .gallery .slidetabs a:nth-child(13) { margin-right: 0; }
  .gallery .slidetabs a:nth-child(14) { clear: left; }
}

/* Menu positioning within 768-879px range */
@media (min-width: 768px) and (max-width: 879px) and (min-height: 520px) {
  .nav-menu { margin-top: 100px; }
}
@media (min-width: 768px) and (max-width: 879px) and (min-height: 615px) {
  .nav-menu { margin-top: 125px; }
}

/* --- 880px+ --- */
@media (min-width: 880px) {
  body { font-size: 14px; }
  #logo { top: 40px; left: 40px; height: 160px; width: 160px; }
  #logo.menuopen { top: 40px; }

  #container { width: 500px; }
  #container.conhid { right: -450px; }
  #content { padding: 60px 30px 60px 50px; }
  #hidecon { right: -10px; top: -10px; }

  .menubtn { top: 215px; }
  #slideshd::after { height: 250px; }
  a.backward.show { left: 60px; }
  a.forward.show { right: 60px; }
}

@media (min-width: 880px) and (max-width: 991px) and (min-height: 550px) {
  .nav-menu { margin-top: 120px; }
}
@media (min-width: 880px) and (max-width: 991px) and (min-height: 665px) {
  .nav-menu { margin-top: 145px; }
}

/* --- 992px+ --- */
@media (min-width: 992px) {
  #logo { top: 40px; left: 40px; height: 180px; width: 180px; }

  #container { width: 550px; }
  #container.conhid { right: -490px; }
  #content { padding: 80px 40px 80px 60px; }
  #hidecon { right: -5px; top: -5px; }

  .menubtn { top: 235px; }
  #slideshd::after { height: 300px; }
  a.backward.show { left: 70px; }
  a.forward.show { right: 70px; }
}

@media (min-width: 992px) and (max-width: 1223px) and (min-height: 550px) {
  .nav-menu { margin-top: 140px; }
}
@media (min-width: 992px) and (max-width: 1223px) and (min-height: 685px) {
  .nav-menu { margin-top: 165px; }
}

/* --- 1224px+ --- */
@media (min-width: 1224px) {
  body { font-size: 15px; }
  #logo { top: 40px; left: 40px; height: 200px; width: 200px; }

  #container { width: 600px; }
  #container.conhid { right: -530px; }
  #content { padding: 100px 50px 100px 70px; }
  #hidecon { right: 0; top: 0; }

  .menubtn { top: 255px; }
  #slideshd::after { height: 470px; }
  a.backward.show { left: 80px; }
  a.forward.show { right: 80px; }
}

@media (min-width: 1224px) and (max-width: 1599px) and (min-height: 582px) {
  .nav-menu { margin-top: 160px; }
}
@media (min-width: 1224px) and (max-width: 1599px) and (min-height: 735px) {
  .nav-menu { margin-top: 185px; }
}

/* --- 1440px+ --- */
@media (min-width: 1440px) {
  #slidenav.gallery.show { height: 35px; margin-top: -80px; }
  .gallery .slidetabs a:nth-child(13) { margin-right: 15px; }
  .gallery .slidetabs a:nth-child(14) { clear: none; }
}

/* --- 1600px+ --- */
@media (min-width: 1600px) {
  body { font-size: 16px; }
  .menuopen { left: 330px; }

  #logo { top: 50px; left: 50px; height: 220px; width: 220px; }
  #logo.menuopen { top: 50px; }

  .menubtn { top: 285px; }

  #container { width: 700px; }
  #container.conhid { right: -630px; }

  .menubox { width: 330px; left: -330px; }
  .menushow { left: 0; }

  #slideshd::after { height: 520px; }
  a.backward.show { left: 80px; }
  a.forward.show { right: 80px; }
}

@media (min-width: 1600px) and (min-height: 615px) {
  .nav-menu { margin-top: 160px; }
}
@media (min-width: 1600px) and (min-height: 761px) {
  .nav-menu { margin-top: 182px; }
}

/* --- Force social icons visibility (overrides all breakpoints) --- */
@media (min-width: 768px) {
  .menubox.menushow {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .menubox .socmed {
    position: relative !important;
    display: block !important;
    left: 40px !important;
    bottom: auto !important;
    margin-top: 30px;
    clear: both;
  }
  .menubox .socmed li {
    display: block;
    float: left;
  }
  .menubox .socmed li a {
    display: block;
    width: 40px;
    height: 40px;
    opacity: .5;
  }
}