html {
  font-size: 16px;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth!important;
}

header img.etoiles {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20px;
}

body {
  margin: 24px;
}

h1 {
  font-family: "Parisienne", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 100px;
  text-align: center;
}

h1 a { text-decoration: none; color: #222;}

p, th, td, input, select, textarea, button, h2, h3, h4, h5, h6, figcaption, li, dt, dd, blockquote {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-size: 18px;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

h2, h3, h4, h5, h6 {
  font-weight: 400;
  font-style: normal;
}

h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }

blockquote {
  border: 1px solid #ccc;
  border-radius: 9px;
  padding: 10px;
  font-style: italic;
  font-size: 16px;
}

#highlights {    
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
  gap: 0;
  border: 2px solid #222;
  border-radius: 9px;
  padding: 16px;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}

#highlights.showall {
  flex-wrap: wrap;
  gap: 0;
}

dl {text-align: center; width: 88px; min-width: 88px; margin:8px}
dl.dummy {margin: 0 8px;}
dd { margin: 0 }
dt {font-size: 12px; font-weight: 100;}

nav {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-content: space-around;
      align-items: center;
      margin: 24px 0;
  }

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  padding: 0;
  margin: 0 40px;
  display: inline;
  white-space: nowrap;
}

nav a {
  display: inline-block; 
  color: #000;
  font-weight: 700;
  text-decoration: none;
}

nav a:hover {text-decoration: underline;}

.gallery {
  position: relative;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  /* grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;  */
  gap: 4px 4px; 
  grid-template-areas: 
    "full1 full1 half1 half2"
    "full1 full1 half3 half4"
    "half5 half6 full2 full2"
    "half7 half8 full2 full2"
    "full3 full3 half9 half10"
    "full3 full3 half11 half12"
    "half13 half14 full4 full4"
    "half15 half16 full4 full4"; 
}

.gallery a {display: none} 
.gallery a:has(img) { display: block;
}
.gallery a:nth-child(1) { grid-area: full1; }
.gallery a:nth-child(2) { grid-area: half1; }
.gallery a:nth-child(3){ grid-area: half2; }
.gallery a:nth-child(4) { grid-area: half3; }
.gallery a:nth-child(5) { grid-area: half4; }
.gallery a:nth-child(6) { grid-area: half5; }
.gallery a:nth-child(7){ grid-area: half6; }
.gallery a:nth-child(8) { grid-area: half7; }
.gallery a:nth-child(9) { grid-area: half8; }
.gallery a:nth-child(10) { grid-area: full2; }
.gallery a:nth-child(11) { grid-area: full3; }
.gallery a:nth-child(12) { grid-area: half9; }
.gallery a:nth-child(13){ grid-area: half10; }
.gallery a:nth-child(14) { grid-area: half11; }
.gallery a:nth-child(15) { grid-area: half12; }
.gallery a:nth-child(16) { grid-area: half13; }
.gallery a:nth-child(17){ grid-area: half14; }
.gallery a:nth-child(18) { grid-area: half15; }
.gallery a:nth-child(19) { grid-area: half16; }
.gallery a:nth-child(20) { grid-area: full4; }

.gallery img {
  border-radius: 5px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

main {
  display: grid; 
  grid-template-columns: auto 300px; 
  gap: 4px 24px; 
}

main.full-width {
  display: block;
}

#calendar {
  margin-top: 24px;
  max-width: 300px;
    padding: 12px;
    border: 2px solid black;
    border-radius: 5px;
    box-shadow: 5px 6px 15px 0px rgba(0,0,0,0.3)
}

#booking .fc .fc-daygrid-day-top {
  font-size:12px;
}


#booking .fc-theme-standard td, .fc-theme-standard th {
  font-size: 14px;
}


#booking .fc .fc-button { font-family: "Archivo", sans-serif; font-size: 12px; }
#booking .fc .fc-toolbar-title {font-size: 16px; margin-right:16px;}


.sl-counter { font-family: "Archivo", sans-serif; font-size: 12px; }


.m nav, .l nav, .t nav { justify-content: flex-start;}
.m nav li, .l nav li, .t nav li { 
  margin: 12px 0;
  display: block;
}

    .m h1 {    font-size: 58px;
}

.m h2 { font-size: 20px;}
.m main, .l main, .t main { display: block;}

.m dl {width: 75px; min-width: 75px; }
.m dl img { width:24px; height: 24px;}

.sl-caption {
  font-family: "Archivo", sans-serif;
  background-color: rgba(0,0,0,0.6)!important;
}

.see-all {
  position:absolute;
  bottom: 42px;
  right: 20px;
  background-color: rgba(255,255,255,0.8);
  height: 32px!important;
  width: 32px!important;
  pointer-events: none;
}

#highlights .see-all {
  background-color: #fff;
  margin-bottom: -16px;
  bottom: 50%;
  pointer-events: all;
  cursor: pointer;
  box-shadow: 47px 3px 20px 100px #fff;
  display:block;
}

#highlights.showall .see-all {
  display: none;
}

#highlights .see-some {
  display: none;
  position:absolute;
  bottom: 42px;
  right: 20px;
  background-color: #fff;
  height: 32px!important;
  width: 32px!important;
  cursor:pointer;
}

#highlights.showall .see-some {
  display: block;
}

a.backtotop {
  text-decoration: none;
  color: #000;
}

a.backtotop img {
  display: inline-block;
  vertical-align: middle;
}

footer {
  margin-bottom: 3em;
}

footer p {
  font-size: 12px;
  margin-top: 3em;
}

h2.red { color: #fc0000}