/*----- HTML Style -----*/
body { font-family: Verdana,sans-serif; font-size: 1.5rem; margin: 0; padding: 0; min-height: 100vh;
  background-color: gray;
  background-image: url("Images/Fond_Ecran.jpg");
  background-attachment: fixed;
}
a { color: turquoise; }
a:active { color: turquoise; }
a:visited { color: turquoise; }
a:hover { color: aquamarine; }
hr { margin-top: 50px; border: 2px solid #FFD200; }
h2 { color: #FFD200; }
h3 { color: #FFD200; padding-top: 15px; }
h4 { color: #FFD200; padding-top: 5px; }
em { color: lightskyblue; }
table, th, td { border: 1px solid white; border-collapse: collapse; padding: 8px; text-align: center; }
th { border: 1px solid darkblue; color: darkblue; background-color: white; }
p { text-align: justify; }

/*----- Banner -----*/
.banner {
  position: fixed; top: 0px; left: 0px; width: 100vw; height: 100px;
  display: flex; align-items: center; justify-content: center; z-index: 100;
  background-color: darkblue;
}
.banner_logo { position: absolute; top: 0px; left: 0px; height: 100px; background-color: black; }
.banner_logo img { width: 108px; height: 92px; border: solid 4px black; }
.banner_left { position: absolute; top: 26px; left: 116px; }
.banner_right { position: absolute; top: 26px; right: 0px; }
.banner_title {
  position: absolute; top: 50%; left: calc(50% + 58px); width: calc(100% - 116px); height: 80px; transform: translate(-50%, -32px);
  font-family: stencil, serif; color: #FFD200; font-size: 36px; font-weight: bolds; text-align: center;
}
.banner_nav { position: absolute; top: 80px; left: 116px; height: 20px; width: calc(100% - 116px); color: #FFD200; background-color: black; font-size: 10px!important; text-align: center; }
.banner_nav span { color: yellow; font-size: 14px; font-weight: bold; }
.banner_nav a { color: #FFD200; font-size: 14px; text-decoration: none; }
.banner_nav a:active { color: #FFD200; }
.banner_nav a:visited { color: #FFD200; }
.banner_nav a:hover { color: #FFFF20; }

/*----- Main -----*/
html { scroll-padding-top: 110px; overflow-x: hidden; }
.main {
  position: relative; width: 1280px; /* 200px menu + 1080px container */
  display: flex; margin: 0 auto; margin-top: 100px; /* passer sous la bannière */ z-index: 1;
}

/*----- Menu -----*/
.menu {
  position: fixed; top: 100px; left: 50%;
  transform: translateX(-640px); /* Centre "main" puis recule de 640px(main/2) */
  width: 200px; height: calc(100vh - 110px);
  display: flex;  flex-direction: column; justify-content: flex-start; z-index: 110; overflow-y: auto;
  padding: 5px; color: #FFD200; background-color: darkblue !important;
}
.menu span { display: block; font-size: 19px; padding-bottom: 10px; font-weight:bold; }
.n1 { display: block; font-size: 14px; padding-top: 5px; padding-left: 5px; font-weight:bold; }
.n2 { display: block; font-size:  11px; padding-left: 10px;}
.menu a { color: #FFD200; text-decoration: none; }
.menu a:active { color: #FFD200; }
.menu a:visited { color: #FFD200; }
.menu a:hover { color: #FFFF20; }

/*----- Container -----*/
.container { margin-left: 210px; width: 1080px; min-height: calc(100vh - 100px); padding: 5px 20px 5px 20px; color: white; background-color: darkblue; z-index: 120; }
.container .filler { height:calc(100vh - 150px) }
.main-container {
  position: relative; width: 1280px; max-width: 100vw; min-height: 100vh;
  display: flex; margin: 0 auto; margin-top: 100px;
  color: white; background-color: darkblue;
}
.main-content { margin: 0 100px 0 100px; width:1080px; }

/* Variation en fonction de la largeur du media */
@media (max-width: 1280px)
{
  .main { max-width: 100vw; }
  .menu { left: 0; transform: none; }
  .container { max-width: calc(100vw - 265px);  }
}
@media (max-width: 900px)
{
  .banner { height: 50px; }
  .banner_logo { height: 50px; }
  .banner_logo img { width: 50px; height: 42px; }
  .banner_left  { top: 11px; left: 50px; }
  .banner_right { top: 11px; }
  .banner_title { left: calc(50% + 25px); width: calc(100% - 50px); height: 50px; transform: translate(-50%,-12px); font-size: 20px; }
  .banner_nav { display: none; }
  .main { flex-direction: column; margin-top: 50px; width: 100vw; max-width: 100vw; }
  .menu { display: none; }
  .container { margin-left: 0; max-width: calc(100vw - 55px); }
  .container .filler { height:calc(100vh - 100px) }
  html { scroll-padding-top: 55px; }
}
@media (max-width: 650px)
{
  .banner_left  { display: none; }
  .banner_right { display: none; }
}

/*-----  Alignment ----- */
.fmp-justify { text-align: justify !important; }
.fmp-left { text-align: left !important; }
.fmp-right { text-align: right !important; }
.fmp-center { text-align: center !important; }
.fmp-top { vertical-align: top; }
.fmp-middle { vertical-align: middle; }
.fmp-bottom { vertical-align: bottom; }

/*-----  FMP Color ----- */
.fmp-terre { color: #8C8C6B; font-weight: bold; }
.fmp-mer   { color: #294AFF; font-weight: bold; }
.fmp-big { font-family: stencil, serif; color: #FFD200; font-size: 24px; font-weight: bolds; }

/*----- Thumbnails / Overlay ----- */
.gallery { display: flex; gap: 20px; padding: 20px; }
.thumbnail { height: 150px; object-fit: cover; cursor: pointer; transition: transform 0.2s; }
.thumbnail:hover { transform: scale(1.1); }
.overlay { position: fixed; top: 0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 1000; }
.fullscreen-img { max-width: 90vw; max-height: 90vh; box-shadow: 0 0 40px #000; border-radius: 10px; }
.close-btn { position: absolute; top: 30px; right: 50px; font-size: 40px; color: #fff; cursor: pointer; z-index: 1010; }
.nav-btn {
   position: absolute; top: 50%; padding: 0 15px; border-radius: 50%; z-index: 1010;
   font-size: 55px; color: #fff; cursor: pointer; user-select: none; transform: translateY(-50%);
   transition: background 0.2s;  background: rgba(0,0,0,0.2); }
.nav-btn:hover { background: rgba(0,0,0,0.5); }
.nav-left { left: 20px; }
.nav-right { right: 20px;}