html, body {
  height: auto;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}


body {
	color: white;
	text-align: center;
	/*width: 800px;*/
	margin: 0 auto;
    font-size: 1em;
    background-image: url(../img/rak-surface-sand-60-x-60cm-main-1_2.jpg);

  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
body {
  padding-top: 80px; /* adjust to nav height */
}
body.landing {
  padding-top: 0px; /* adjust to nav height */
}
#body_breton, #body_aubemurray, #body_refuse {
    background-color: var(--brand);
    background-image: none;
}
.banner {
    /*padding: 15px 0;*/
    margin-bottom: 42px;
    border-bottom: 7px solid #e67100;
    height: 185px;
    text-align: left;
}
.banner_refuser {
    background: #7c97ae url(../img/header_refuser.jpg) no-repeat center bottom;
}
.banner_aubemurray {
    background: url(../img/header_aubemurray.jpg) no-repeat center bottom;
    height:185px;
}
@media (max-width: 1400px) {
    .banner_aubemurray {
        background-position: left;
    }
}

.banner-breton {
    /*padding: 15px 0;*/
    margin-bottom: 42px;
    border-bottom: 7px solid #e67100;
    background: #1F1F21 url(../img/header-breton.webp) no-repeat center bottom;
    height: 185px;
}
a:link, a:visited {
	color: #fff;
	text-decoration: underline;
}
a:hover, a:active {
	color: #fff;
	text-decoration: none;
}
.pochette {
    /*margin-top: 34px;*/

    
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
}
.pochette_refuse {
    background-color: #536879;
}
.pochette a {
    padding-right: 5px;
}
.pochette span {
    /* padding-left: 273px; */
    display: block;
    /* height: 46px; */
    /* margin-top: -57px; */
    font-size: 1.5em;
    color: #96b7d2;
    /* font-weight: bold; */
    /* text-transform: lowercase; */
    /* font-style: italic; */
}
.pochette img {
    width: 30%;
    max-width: 100%;
    height: auto;
}

h1{
    text-transform: uppercase;
    margin: revert;
}






/* When images would get too small */
@media (max-width: 700px) {
    .pochette img {
        /*width: 100%;*/
        display: block;
        margin: 10px auto;
    }
    .pochette {
        padding: 0px;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
  #awp-wrapper {
    display: flex;
    flex-direction: column;
  }

  .awp-player-thumb-wrapper {
    float: none !important;
    width: 100%;
    display: none;
  }

  .awp-player-holder {
    width: 100%;
  }
}







.info_wrapper {
    max-width: 960px;
    margin: 0 auto;
    border-top: 2px solid #e67100;
    margin-top: 60px;
}
#equipe {
	/* width: 890px;*/
    margin: 0 auto;
    text-align: left;
    padding: 40px;
    min-width: 320px;
    max-width: 960px;
}
#equipe p, #equipe h2 {
	padding: 10px 0;
}
#equipe ul {
  box-sizing: border-box; /* Crucial: Padding/borders inside width */
  width: 100%;           /* Fills available space, respecting padding */
  margin: 0;             /* Removes default browser margins */
  padding: 0 20px;       /* Adds inner padding if needed */
}
.equipe_photo {
	border: 1px solid white;
	float: left;
    margin-right: 45px;
}
.copyright, .copyright a {
	font-size: 10px;
    color: #bbb;
}
.copyright {
    padding: 20px;
	clear:both;
}

#awp-wrapper {
    position: inherit !important;
}
.awp-info {
    left: 75px !important;
    text-align: left !important;
}
.awp-playlist-item {
    padding: 5px 0;
}





/*nav*/
/* Top bar */
/* RESET safety (important) */

/* Top bar */
.banner_navigation {
  position: fixed;   /* stronger than sticky */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;

  background: var(--brand);
  
    padding: 15px 20px; /* add horizontal padding */
  overflow: visible;  /* important */
}
.logo {
    height: 50px;
}

/* Hamburger */
.hamburger {
    width: 30px;
    cursor: pointer;
    
      z-index: 10001; /* above menu */
  position: relative;
}

.hamburger span {
    display: block;
    height: 3px;
    background: white;
    margin: 6px 0;

  transition: all 0.3s ease;
}

/* ACTIVE STATE */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}






/* Prevent scroll when menu is open */
body.menu-open {
    overflow: hidden;
}

/* Fullscreen menu */
.fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  background: var(--brand);
  z-index: 999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.4s ease;
}
/* Active state */
.fullscreen-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Container aligned top-right */
.menu-content {
  position: absolute;
  top: 100px; /* space below navbar */
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

  gap: 40px;
  width: 100%;
  max-width: 1200px;
}

.menu-content img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* Optional: remove link spacing issues */
.menu-content a {
    display: block;
    text-align:right;
}

/* Hamburger stays above menu */
.banner_navigation img {
    filter: brightness(0) invert(1);
}




#body_breton .awp-playlist-thumb, #body_aubemurray .awp-playlist-thumb {
    display:none;
}
#body_refuse .awp-playlist-thumb {
    margin-right: 16px;
}



.pochette a img, .fullscreen-menu a img {
  transition: filter 0.3s ease;
}

.pochette a:hover img, .fullscreen-menu a:hover img  {
  filter: brightness(110%);
}





#login-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 10000;

  /* BLUR EFFECT */
  background: rgba(0, 0, 0, 0.3); /* slight tint */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.login-box {
  background: var(--brand);
  padding: 30px;
  text-align: center;
}

.login-box input {
  padding: 10px;
  margin: 10px 0;
  width: 200px;
}

.login-box button {
  padding: 10px 20px;
  cursor: pointer;
}

#error-msg {
  color: red;
}