html,body{
  height:100%;
  padding:80px 0 0 0;
  margin:0}

  .page{position:relative;display:table;table-layout:fixed;width:100%;
  height:100%;
  line-height:normal;
  text-align:center;
  font-family:Open Sans, sans-serif;font-size:1.1em;color:#fff;
  background-color:#f0f0f0;
  background-size:cover;
  background-position:50% -25%;
  background-repeat:no-repeat;
  background-attachment:fixed}
  h1,h2,h3,h4,h5{line-height:1.3;font-weight:normal}
  .bg-position-top{background-position:50% 0}
  .bg-position-middle{background-position:50% 50%}
  .bg-position-bottom{background-position:50% 100%}
  .page:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;filter:alpha(opacity=40);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";opacity:0.4}
  img{max-width:100%;width:auto\9;height:auto}
  a,a:link{color:inherit;filter:alpha(opacity=85);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";opacity:0.85}
  a:hover,a:focus,a:active{filter:alpha(opacity=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
  .container{position:relative;display:table-cell;width:100%;vertical-align:middle;padding:1em 2em;z-index:1}.content{max-width:900px;margin:0 auto}
  .social-links:empty{outline:1px solid yellow}
  .social-links{padding:1em 0;vertical-align:middle}
  .social-links a{padding:0 0.3em;line-height:normal}
  .social-links img{background-color:#f0f0f0; padding: 8px 8px 12px 8px;}
  .social-links div{display:inline-block; margin-right: -20px;}
  .social-links div span{
    position: relative;
    top: -3px;
    left: -50%;
    transform: translateX(-50%);
    color: #964B00;
    font-weight:bold;
    }
  .hosting-info{position:absolute;display:block;bottom:0;left:0;right:0;padding:1em;font-size:0.8em}
  .hosting-info p{margin:0;padding:0;font-size:12px}
  .overlay-dark{background-color:#333}
  .overlay-dark:before{background-color:#333}
  .overlay-bright{background-color:white}
  .overlay-bright:before{background-color:white;filter:alpha(opacity=70);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";opacity:0.7}
  @media screen{.page[class]{background-image:url("../la_courcelle.jpg")}}
  body.debug:after{content:"default";position:fixed;left:0;bottom:0;background-color:white;color:black;padding:0.5em;font-size:10px;text-transform:uppercase}
  @media screen and (max-width: 640px){body.debug:after{content:"small"}
  h1{font-size:2em}
  .page{min-width:300px}
  .page .container{padding:3em}}
  @media screen and (min-width: 641px) and (max-width: 1199px),(min-height:500px) and (max-height: 1199px){body.debug:after{content:"medium"}}
  @media screen and (min-width: 1200px){body.debug:after{content:"large"}}
  .page .fallback-bg{display:none}
  .ie8 .page .fallback-bg{display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;max-width:inherit;z-index:0}
  .galerie img {width: 30%; margin: 1%; display: inline-block; border: 1px inset black; }
  
  .language-buttons {
            margin-bottom: 10px;
            text-align:center;
        }

  img { border-radius: 16px; }

  .language-buttons img {
            width: 24px;
            -webkit-filter: drop-shadow(5px 5px 5px #222);
            filter: drop-shadow(5px 5px 5px #222);
            margin: 0 0 8px 0;
        }

   .language-buttons a {
            display:inline-block;
            border:1px outside Black; 
            color:#8B5E3C;
            width: 60px;
            margin-right: 10px;
            padding: 6px;
            font-size: 10px;
            cursor: pointer;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            opacity: 75%;
            border-radius: 6px;
            text-decoration: none;
        }
   .language-buttons a.active {
            background-color: #B89B80; /* Vert pour indiquer la sélection */
            color: White;
            border-color: #B89B80;
            opacity: 80%;
        }

   .main { border: 1px outset black;
           text-align:left;
           color: Black;
           padding: 32px;
           margin: 100px auto 24px auto;
           border-radius: 8px;
           background-color: rgba(213, 195, 172, 0.75); /* Fond transparent */
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Optionnel, pour un léger effet d'ombre */ }

   h1 {    
           color: Black;
           margin: 16px auto;
           text-align:center;
           /* border: 1px outset black;
           border-radius: 8px;
           background-color: rgba(213, 195, 172, 0.60); /* Fond transparent */
          /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);*/ /* Optionnel, pour un léger effet d'ombre */ }

        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #8B5E3C;
            color: white;
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
       header .logo {
            display: flex;
            margin: 0 0 -90px 0;
            height: 120px;
        }
        header nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        header nav ul li {
            display: inline;
            margin-right: 20px;
        }
        header nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }
        header nav ul li a:hover {
            text-decoration: underline;
        }
        section {
            padding: 100px 20px;
            margin-top: 60px;
        } 
        
        .icon { margin: 0 8px 0 0; width: 24px; }

        footer {
            background-color: #8B5E3C;
            color: white;
            text-align: center;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 1rem;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }
        footer a {
            color: #F5ECE3;
            margin: 0 10px;
            text-decoration: none;
        }

       .video, 
       .map {
              width: 100%;
              height: auto;
              max-width: 800px;
              aspect-ratio: 16 / 9;
              margin: 8px auto; 
              border:2px outset black; 
              border-radius: 6px;
              box-shadow: 5px 5px 15px lightGrey;
              z-index:0;
              /* display:block; width:80%; height:360px;  */
              }

        #map {
            height: 100%; /* Hauteur de la carte */
            width: 100%; /* Largeur de la carte */
            z-index:0;
        }

/* Galerie */
        
.gallery {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


.thumbnails img {
  width: 100px;
  margin: 8px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

@media (min-width: 768px) {
  .thumbnails img {
    width: 160px;
  }
}

.thumbnails img:hover {
  transform: scale(1.1);
}



.lightbox {
  display: none;
  position: fixed;
  top: 10%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(213, 195, 172, 0.75);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.lightbox-content {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 800px;
  max-height: 100%;
}

.close {
  position: absolute;
  top: 180px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  right: 92%;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.caption {
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding: 10px 0;
  position: absolute;
  bottom: 15px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  left: 0;
}

#guestbook div.guestbook { color: #3C3853; border: 1px outset black; border-radius: 8px; background-color: #C9CBCA; padding: 6px; margin: 16px 0;}
#guestbook .date       { font-weight: bold; }
#guestbook .text       { font-style: italic; padding-left: 6px 12px; margin: 8px 0 8px 16px; font-family: 'Playwrite IT Trad', cursive; font-optical-sizing: auto; font-size: 1em; line-height: 1.6; }
#guestbook .sig        { font-style: italic; text-align:right;       margin-right: 16px;     font-family: 'Playwrite IT Trad', cursive; font-optical-sizing: auto; font-size: 1em; line-height: 1.6; }
#guestbook div.note    { text-align:center; }
#guestbook div.note img    { margin: auto; width: 50%;  border: 2px inset black; }

@media (max-width: 768px) {
  .main {
    padding: 16px;
    margin: -10px auto;
  }

  .container, 
  .content,
  .main,
  section { width: 100%; margin: 0 0 0 -10px; }

       header .logo {
            display: flex;
            margin: 0 auto -90px auto;
            width: 75%; height: 75%;
        }

  header nav ul li {
    display: block;
    margin: 3px;
  }

  .language-buttons a {
    width: auto;
    margin-top: 96px;
    margin-bottom: -96px;
  }

  .video,
  .map {
    width: 100%;
    height: auto;
  }

  footer {
    font-size: 0.8em;
  }
}