/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  overflow-y: scroll;
  overflow-x: hidden;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
   /* Inspired by https://henry.codes/writing/pure-css-focal-points/ */

   html {
    scroll-behavior: smooth;
  }

   body {
    margin: 0;
/*    padding: 0 1.6em; */
    position: relative;
    font-family: 'Poly', serif;
    letter-spacing: -.045em;
   }

   h1, h2, .h1 {
    font-family: 'Lemondrop', serif;
    color: #62c0e8; 
    font-size: 1.25em;
    letter-spacing: .075em;
   }
    
  .h1.h2 {
      text-align: right;
      font-size: 4vw;
      padding: 0 2em;
  } 
  
  #home .slider {
    opacity:1;
  }

  .root #home .slider {
    opacity: 0;
  }
  
  .root #home.revealed .slider {
    opacity: 1;
  }

   small {
    font-size: .6em;
    letter-spacing: .015em;
  }

   span.dot {
    display: inline;
    padding: 0;
    font-family: Arial;
    opacity: 1;
    font-size: .75em;
}

   img:not([src]) {
    opacity: 0!important  ;
   }

   .preload {
    width: 1px; height: 1px;
    overflow: hidden;
   }

   .screen {
    position: relative;
    border: 0 solid #fcfcfc;
    /*
    height: calc(100dvh );
    */
    overflow: hidden;
    transition: .6s height ease-in-out;
   }
   #home {
/*        height: calc(100dvh );*/

   }

   p.credits {
    line-height: .6em;
   }

   #booking a {
color: #212121;
   }

   .content { padding: 1.6em 3em  ; }

   #home .content {
    padding: 0;
   }
   .illustration {
    text-align: center; 
    padding: 1.5em;
    opacity: 0;
    transition: .6s opacity ease-in-out;
    transition-delay: .4  s;
   }
   .revealed .illustration {
    opacity: 1;
   }
   .illustration img {
    /* transform: scale(.75); */
    max-width: 80%;
} 
   #home button,
  #booking button {
    display: none!important;
  }
  
  #home .slider {
    pointer-events: none;
  }
  .lightboxOverlay {
    opacity: 1!important;
    background: #fcfcfc!important;
  }
  .lb-next, .lb-prev {
    display: none!important;    
  }

   .screen#booking {
   }
   
   .slide {
	   position: relative;
     /*
	   width: 100vw;
	   height: 100dvh;
     height: calc(100dvh);*/
     transition: .6s height ease-in-out;
   }
   .slide > img {
	   position: relative;
     width: 100%;
     /*
	   width: 100%;
	   height: 100%;*/
	   object-fit: cover;
	   aspect-ratio: auto;
	   object-position: var(--focus-x) var(--focus-y);
     opacity: .95;
     transition: opacity .6s ease-in-out;
	}

  .slide.crop img {
    width: 100%;
  }

  .border {
    position: absolute;
    inset: 1.5em;
    /* source | slice | width | outset | repeat */
    border-width: 1.2em;
    border-style: solid;    
    border-image: url("../img/border.svg?v=20260722c") 33.33% / 1.5em / 1em round;
    border-image: url("../img/border3.png?v=20260722c")  33.33% / 7vw / 1em round;

    pointer-events: none;
    z-index: 2;
  }
  
  .border2 {
    height: 1.6em;
/*    background: #fcfcfc; */
    position: fixed;
    z-index: 4;
    inset: 0;
    bottom: auto;
  }

  /*
  :target {
    scroll-margin-top: 1.6em;
  }
    */
    

  .border3 {
    height: 1.6em;
/*    background: #fcfcfc; */
    position: fixed;
    z-index: 4;
    inset: 0;
    top: auto;
  }

  .content {
/*    position: absolute;
    inset: 0;*/
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    /*  
    padding: 4em 0 8em 1em;
    */
      opacity: 0;
    transform: translateY(2em);
    transition: .6s opacity ease-in-out, .6s transform ease-in-out;
     /*
    text-shadow: 0px 0px 2px rgba(0, 0, 0, .1);*/
  }

  .content.right {
    text-align: right;
    padding-top: 0;
    padding-bottom: 0;
  }

  .content.right .text {
    padding-bottom: 0.3em;
  }

  .content.right.asterisk .text    {
    padding-top: .15em;
    margin-top: -1em;
  }

  .revealed .content {
    opacity: 1;
    transform: translateY(0);
  }

  #home .content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 30vw;
  }

  #home .content, #booking .content {
  }
  
  #home .content a, #booking .content a {
  }

  span.lb-number {
    display: none!important;
  }

  .slider {
    opacity: 0;
    transition: .3s opacity ease-in-out, .3s transform ease-in-out;
    padding: 0  ;
    position: relative;
  } 
  #home .slider {
    transition: 1s opacity ease-in-out, 1s transform ease-in-out  ;
  }
  .slider.mobile {
    display: block;
  }
  .slider.tablet {
    display: none;
  }
  .slider.tablet-h {
    display: none;
  }
  .slider.desktop {
    display: none;
  }

  .tablet-only { display: none; 
    font-size: 4.5vw;
    padding: 1.4em 3em 0 3em;
    letter-spacing: 0em;
}

  .revealed .slider {
    opacity: 1;
  }

  /* Until slick runs, a .slider is still a plain vertical stack of .slide
     divs, so a 4-slide section reserves 4x its final height and then snaps
     down the instant slick turns it into a carousel. Keep only the first
     slide in flow until then: the section holds its final height from the
     very first paint, with no collapse when the carousel is built. */
  .slider:not(.slick-initialized) .slide + .slide {
    display: none;
  }

  /* The slides are lazy-loaded, so the box they reserve is empty until the
     image arrives. A neutral plate makes that a photo waiting to appear
     rather than a hole punched in the page. */
  .slide {
    background-color: #f2f1ef;
  }

  #booking .slide {
    background-color: transparent;
  }

  .slick-slide {
    height: auto;
  }


  .slick-dots {
    bottom: 6em;
    z-index: 3;
  } 

  .slick-dots li,
  .slick-dots li button:before {
    width: 10px;
    height: 10px;
  }
  
  .slick-dots li button:before {
    transform: scale(2);
  }
  
  .slick-dots li {
    margin: 5px;
  }

  .slick-dots li button:before { color: white; }
  
  .slick-dots li.slick-active button:before { color: white; }

  .slick-prev, .slick-next {
    z-index: 2;
    width: 3rem;
    height: 3rem;
  }
  .slick-prev {
    left: 14vw;
  }
  .slick-next { 
    right: 12vw;
  }
  
  .slick-prev:before, .slick-next:before {
    content: '';
    background-image: url("../img/down2.svg?v=20260722c");
    background-size: contain;
    background-position: 50%;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    opacity: 1;
}
.slick-prev:before {
    transform: rotate(90deg);
  }
  .slick-next:before {
    transform: rotate(-90deg);
  }

  a {
    text-decoration: none;
    color: #ffe400;
  }

  hr {
    border-top: 2px solid #fcfcfc;
    margin-top: 10px;
    margin-bottom: 10px;
    transform: translateX(0);
    max-width: 5em;
  }

  u {
    text-decoration: none;
    border-bottom: 1px solid;
    padding-bottom: .6em;
    margin-bottom: .6em;
    display: inline-block;
  }

  .text {
    padding: 0.6em 0;
    font-size: 4vw;
    /*
    font-size: 5.5vw;
    */
    line-height: 1.2;
    box-sizing: border-box;
    width: 100%;
  }
/*
  .text span { 
    opacity: .6;
    display: block;
    padding-left: .6em;
   }
    */
  
   .text span.star {
    opacity: 1;
    display: inline-block;
    padding-left: 0;
    position: absolute;
    transform: translateX(-.5em);
  }

  .star-container {
    transform: translateX(.5em);
  }
  
  .text span.spacer {
    display: inline-block;
    /* border-bottom: 4px solid #212121; */
width: 1.2em;
    margin: .25em;
        height: 4px;
    vertical-align: middle;
    background: #212121;
    border-radius: 2px;
  }
  
  .text span.legal {
    opacity: 1;
    padding-left: 0;
    font-size: 1em;
  }

  .text small{
    /*
    font-size: .55em;
    line-height: 1;
    display: block;
    margin-top: .4em;
    max-width: 80%;
    letter-spacing: .06em;*/
  }
  
   .subtext {
    font-size: .6em;
    width: calc(40% - 2.6em);
    padding-right: calc(60% - 2.6em);
    position: absolute;
    bottom: 3em;
    line-height: 1;
   }

  .logo {
      transform: translateX(-8px) scale(0.6);
    opacity: 0;
    margin-top: 4em;
    transition: 2s transform ease-out, .6s opacity ease-out;
    transition-delay: 2s;
    perspective: 1000px; 
    cursor: pointer;
    pointer-events: none;
  }
  .logo .logo-hide {
    transition: .6s opacity ease-out;
  }
  .hide-logo .logo .logo-hide {
    opacity: 0;
  }
  .text p img {
    height: 1.6em;
    vertical-align: middle;
    transform: translateY(-2px);
  }
  .logo img {
    transform-style: preserve-3d;
  }
  .logo img,
  .logo img.logo-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  .logo img.logo-back {
  transform: rotateY(540deg);
  }

  .domcontentloaded .logo {
    transform: scale(1);
    opacity: 1;
  }

  .domcontentloaded .logo img {
    transition: .6s transform ease-in-out;
  }

 /* .domcontentloaded .logo:hover img,*/
  .domcontentloaded .logo.flip img
   {

    transform: rotateY(540deg);
  }
  /*.domcontentloaded .logo:hover img.logo-back,*/
  .domcontentloaded .logo.flip img.logo-back {
    transform: rotateY(0);
  }

  .bands {
    width: 3em;
    height: 3em;
    background-image: url("../img/bands.svg?v=20260722c");
    background-size: cover;
    
    background-repeat: no-repeat;
    position: fixed;
    top: .6em;
    left: 0;
    z-index: 6;
    transition: 1s transform ease-out;
    transform: translateX(-5em);
    font-size: 4.5vw;
  }

  .domcontentloaded .bands {
    transform: translateX(0);
  }

  .bands a {
    width: 3em;
    height: 3em;
    display: block;
  }

  .up, .down {
    width: 2.2em;
    height: 2.2em;
    background-image: url("../img/down2.svg?v=20260722c");
    position: absolute;
    bottom: 2em;
    margin: auto; 
    left: 0;
    right: 0; 
    background-repeat: no-repeat;  
    z-index: 3;
    animation-timing-function: ease-in;
    animation-timing-function: ease-out;
  }


  .up {
    animation: pulseup 3s infinite;
  }
  .down {
    animation: pulse 3s infinite;
  }

  @keyframes pulse {
    0%{
      transform: scale(0.8);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  @keyframes pulseup {
    0%{
      transform: rotate(180deg) scale(0.8);
    }
    50% {
      transform: rotate(180deg) scale(1.1);
    }
    100% {
      transform: rotate(180deg) scale(0.8);
    }
  }

  a.social-link {
    margin: .4em 0;
    display: inline-block;
  }

  a.social-link:hover {
    filter : brightness(1.1)
  }

  a.social-link img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .up {
    transform: rotate(180deg);
    bottom: auto;
    top: 3.2em;
  }

  .content {
     /*pointer-events: none; */
  }

  .contact {
      font-size: .6em;
      font-family: 'Futura';
      line-height: 1em;
  }
  
  .slider {
    padding: 0 2.8em;
  }
  #home .slider   {
    padding: 0;
  }
  /*
  #home .text {
      transform: translateY(-.6em);
  }
  #creative .text {
    margin: 28dvh 0;
  }
  
  #swimming .text {
    margin: 8.5dvh 0;
  }

  
  #rooms .text {
    margin: 27dvh 0;
  }

  #sauna .text {
    margin: 41dvh 0;
  }

  #transport .text {
    margin: 8dvh 0;
  }

  #restauration .text {
    margin: 40dvh 0;
  } */



  #booking a:hover {
    text-decoration: underline;
  }

  #booking .text {
    }

  #booking hr {
    margin-top: .75em;
    margin-bottom: .75em;
    transform: translateX(0em);
    max-width: 6.15em;
  }


  .text span.legal {
    font-size: .44em;
  }
  .text span.plus {
    display: inline-block;
    opacity: 1;
    padding-left: 0;
    transform: scale(1.3);
    margin-left: .1em;
    font-family: arial;
    font-weight: bolder;
  }
  
  .social {
    position: absolute;
    transform: translate(-6.6em, 2.85em);
    color: #e5007d;
  }
    .lines {
    position: absolute;
    width: 4em;
    pointer-events: none;
    height: 4em;
    border: 0;
    border-left: 2px solid #e5007d;
    border-top: 2px solid #e5007d;
    transform: translate(2.12em, -4.2em);
  }

  .nav, .logo {
    font-size: 1.2vw;
    width: 46em;  
    height: 50em;
  }

  .nav div, .logo ul {
    transform: scale(0.87 );
  }

  .nav {
    position: fixed;
    z-index: 5;
    color: #9d9d9c;
    transform: translate(0,0);
    transition: 1s transform ease-out;
    top: -0.6em;
    left: -0.6em;
    margin-left:-2vw; 
  }

  .nav > div:first-child {
    
    background: url(../img/navy.svg?v=20260722c);
    background-size: 110% 110%;
    background-position: 50%;
    background-repeat: no-repeat;
  }

  .nav a {
    display: block;
    text-align: center;
    letter-spacing: .06em;
  }

  .nav a:hover,
  .nav > div ul li a:hover,
  .nav > div ul li.active a {
    color: #ecc7c9;
  }

  .nav div > a {
    color: #e85a24;
  }

  .nav.offcanvas {
    transform: rotate3d(3, 1, 1, -55deg) translate(-100%, -100%);
  }


  .nav a.home { color: #9d9d9c;}

  .nav > div {
    font-family: 'Lemondrop'  ;
    padding: 4.4em 2em 4.4em 2em;
    line-height: 1.2;
    font-size: 2.4em;
    z-index: 2;
    position: relative;
    min-height: 13em;
    min-width: 18em;
    box-sizing: border-box;
  }

  .nav >  .langs { z-index: 1;   transition: 1s transform ease-out, 1s margin ease-out ; 
        background: url(../img/team.barcelona-back.svg?v=20260722c);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 110% 110%;
 margin-top: -8.5em;
 margin-left: 3em;
 text-align: left;
  }
  .nav.offcanvas >  .langs {   margin-top: -12em; }
  .nav > .langs a:hover {
    color: #ffe400;
  }
  html[lang="en"] #lang-en,
  html[lang="es"] #lang-es,
  html[lang="fr"] #lang-fr,
  html[lang="nl"] #lang-nl,
  html[lang="de"] #lang-de,
  html[lang="it"] #lang-it,
  html[lang="jp"] #lang-jp {
    color: #ffe400;
  }
  .nav > .langs {

  }
  .flip .langs  { opacity: 1; pointer-events: auto; transform: rotateY(0);}

    .langs ul {
    font-family: 'Lemondrop';
    padding: 2em 2em 2.4em 3.75em;
    line-height: 1.6;
    text-align: left;
    font-size: .95em;
  }

  .nav > div:not(.langs) ul {
    padding-left: 0;
    margin: 6px 0;
  }
  
  .nav > div ul li,
  .langs ul li {
    list-style-type: none;
  }
  
  .nav > div ul li .bullet,
  .langs ul li .bullet {
    background-image: url(../img/down.svg?v=20260722c);
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: 50%;
    transform: rotate(-90deg);
    transition: .3s all ease-out;
  }
  
  .nav > div ul li a,
  .langs ul li a {
    color: #fcfcfc;
    display: block;
    text-align: center;
  }

  .nav > .langs ul li a {
    text-align: left;
    padding-left: 1%;
  }
  
  .langs {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: .3s all ease-out;
    letter-spacing: .1em;
  }

  .nav > div ul:hover li a span.bullet {
    transform: translateX(-.4em) rotate(-90deg);
  }

  .nav > div ul:hover li a:hover span.bullet {
    transform: translateX(0) rotate(-90deg);
  }

  #question {
      color: #ffe400;
  }

  .text span.sep {
    display: block;
    opacity: 0;
    max-height: 1px;
    padding-left: 0;
    margin: 0 .4em;
  }

  .slide {
    aspect-ratio: 380 / 870;
  }

  #concierge .slide,
  #booking .slide {
    aspect-ratio: 380 / 380;
  }
  #concierge , #booking {
    
    display: flex;
    flex-direction: column-reverse;
  }

  .return { display: block; }
/*
  .incoming {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40vw;
    height: 40vw;
    max-height: 40dvh;
    inset: 0;
    top: 4em;
    bottom: auto;
    margin: auto;
  }

  .incoming img {
    position: absolute;
    width: 40vw;
    height: 40vw;
    max-height: 40dvh;
  }

  .incoming span {
    z-index: 2;
    width: 6em;
    font-family: 'Canbera';
    text-align: center;
    font-size: 5vw;
    line-height: 1em;
  }
*/
  .tarteaucitronCTAButton {
    margin: .6em;
  }
  #tarteaucitronRoot #tarteaucitronAlertBig {
    background: #ecc7c9!important;
  }
  #tarteaucitronAlertBig #tarteaucitronPersonalize2, .tarteaucitronCTAButton, #tarteaucitronRoot .tarteaucitronAllow {
    background: #ffe400!important;
  }
  #tarteaucitronRoot .tarteaucitronDeny {
    background: #e85a24!important;
  }
  div#tarteaucitronServices *,
  #tarteaucitron #tarteaucitronClosePanel {
    font-family: 'Futura'!important;
  }

  #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
    text-transform: lowercase;
    font-family: 'Futura';
  }

  #tarteaucitronAlertBig #tarteaucitronPersonalize2, .tarteaucitronCTAButton, #tarteaucitronRoot button#tarteaucitronCloseAlert {
    text-transform: lowercase;
    font-family: 'Futura';
  }

  /*
    div#home::before {
        content: '';
        display: block;
        z-index: 4;
        background: #cccccc;
        width: 50%;
        position: fixed;
        inset: 0;
    }
  */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 799px) {
  /* Style adjustments for viewports that meet the condition */
  
  body {
    /*
    padding: 0 2em;
    */
  }
  
   .content { padding: 1.6em; } 

  #home .content {
    justify-content: center;
    padding-top: 0;
    
  }

  .return { display: inline-block;}

  .nav, .logo { font-size: .87vw;
    width: 46em;  
    height: 50em;
  }
  h1, h2 {display: none;}
  .tablet-only { display: block; }
  .bands {
    font-size: 2.7vw;
  }

  /*
  .langs {
    font-size: 1.9vw;
  }
  */
  
  .content {padding: 0;}
  
  .slide {
    aspect-ratio: 715 / 880;
  }
  #concierge .slide {
    aspect-ratio: 715 / 631;
  }
  #booking .slide {
    aspect-ratio: 715 / 660;
  }
  #booking {
    
    display: flex;
    flex-direction: row;
    margin-bottom: -1.4em;
  }
  
  #booking .slick-slide img {
    width: 100%;
}


  
  #team, #booking { display : flex; }
  #team>*, #booking>* { flex : 1; }   
  #team >.illustration { max-width: 46%; padding-left: 1.5em; text-align: left;padding-top: 0; padding-left: 0; }
  #booking .slider {
    max-width: calc(65.4% - 4em);
  }
  #booking .slider + div.content {
      padding-left: 2%;
  }
  .slider { padding: 0;}

  .slick-prev:before, .slick-next:before {
    width: 3rem;
    height: 3rem;
  }
  .slick-prev {
    left: 4vw;
    left: calc(4vw - 1.6rem);
  }
  .slick-next {
    right: 2vw;
  }

  

  a.social-link img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .incoming span {
    font-size: 5vw;
  }

  .border {
    inset: 2em;
    border-image: url("../img/border.svg?v=20260722c") 33.33% / 1.5em / 1em round;
    border-image: url("../img/border3.png?v=20260722c")  33.33% / 6vw / 1em round;
  }

  p.two-columns {
    column-count: 2;
    column-gap: 2em;
  }
  

  .border2, .border3 {
    height: 2em;
  }

  .screen#home {
/*   height: calc(100dvh - 4em); */
    /* padding-top: 2em; */
   }
   .screen:not(#home) {
     padding: 3em 3.3em; 
   }  
   

   .slick-dots {
    bottom: 6.6em;
   }
   
   .nav {
    top: 0;
    left: 0;
    }
  
.illustration img { max-width: 100%;
    height: auto;}
  .text {
    font-size: 3.2vw;
  }
  .subtext {
    font-size: 1em;
  }
  #creative .text {
    margin: 28dvh 0;
  }
  

  /*
  #rooms .text {
    margin: 30dvh 0;
  }

  #sauna .text {
    margin: 44dvh 0;
  }

  #transport .text {
    margin: 5dvh 0;
  }

  #restauration .text {
    margin: 40dvh 0;
  }

  #swimming .text {
    margin: 12.5dvh 0;ss
  }
  #rooms .text {
    margin: 8dvh 0;
  }
  #transport .text {
    margin: 50dvh 0;
  }
    */  
  .social {
    display: none;
  }

  
  .slider.mobile {
    display: none;
  }
  .slider.tablet {
    display: block;
  }
  .slider.tablet-h {
    display: none;
  }
  .slider.desktop {
    display: none;
  }
  
  .up {
    transform: rotate(180deg);
    bottom: auto;
    top: 4.2em;
  }

  .bands {
    width: 5em;
    height: 5em;
    left: 0;
    font-size: 1.6vw;
  }
  .screen {
    
  }
  
  
  .bands a {
    width: 5em;
    height: 5em;
  }

  .text span.sep {
    display: inline-block;
    opacity: 1;
    max-height: 87em;
  }


  
}


@media only screen and (min-width: 1100px) {
  /* Style adjustments for viewports that meet the condition */

  
  .nav {
    top: 0.8em;
    left: 0.7em;
   }

  .nav, .logo { font-size: .44vw; }
   
  .slide {
    aspect-ratio: 100 / 56;
  }
  #concierge {
    display: flex;
    flex-direction: row;
  }

  /*
  .langs {
    font-size: .95vw;
  }
  */
  
   .tablet-only { display: none; }

   h1, h2 {
    display: block;
   }

   .illustration img { width: 80%;
    height: auto;}
   
   
  .logo {
  }

  .bands {
    font-size: 2.7vw;
  }

  .langs {
    font-size: 1em;
  }

  .content {padding: 0;}

  p.two-columns {
    column-count: 1;
  }

  
  #booking .slide {
    aspect-ratio: 715 / 715;
  }
  
  #team, #concierge, #booking { display : flex; }
  #team>*, #concierge>*, #booking>* { flex : 1; }   
  #team >.illustration { max-width: 42%; padding-left: 1.5em; text-align: left;padding-top: 0; }
  #concierge .slider, #booking .slider {
    max-width: calc(65.4% - 4em);
  }
  #concierge .slider + div.content,
  #booking .slider + div.content {
      padding-left: 4em;
  }

  v
  #concierge { display : flex; }
  #concierge>* { flex : 1; }

  .slick-prev:before, .slick-next:before {
    width: 3rem;
    height: 3rem;
  }
  .slick-prev {
    left: 4vw;
    left: calc(4vw - 1.6rem);
  }
  .slick-next {
    right: 2.4vw;
  }
  

  a.social-link img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .incoming span {
    font-size: 5vw;
  }

  .border {
    inset: 4em;
    border-image: url("../img/border.svg?v=20260722c") 33.33% / 1.5em / 1em round;
    border-image: url("../img/border3.png?v=20260722c")  33.33% / 4vw / 1em round;
  }
  
  .screen:not(#home) {
     padding: 4em 9em; 
   }  
   

    
  .slider.desktop {
    display: none;
  }
  .slider.tablet-h {
    display: block;
  }
  .slider.mobile {
    display: none;
  }
  .slider.tablet {
    display: none;
  }

  .incoming span {
    font-size: 4dvh;
  }

  .text {
    font-size: 1.8vw;
  }
  .bands {
    width: 4em;
    height: 4em;
    left: 0;
    font-size: 1.2vw  ;
  }
  .bands a {
    width: 4em;
    height: 4em;
  }

  
  .border {
    inset: 2em;
  }
  
  .border { 
    inset: 4em;
    border-image: url("../img/border3.png?v=20260722c")  33.33% / 1.5em / 1em round;
    border-image: url("../img/border3.png?v=20260722c")  33.33% / 3vw / 3em round;
  }
  .logo {
    transform: translateY(-3em);
    margin-top: 2em;
  }
  .incoming {
    transform: translateY(-2em);
    width: 20vw;
    height: 20vw;
    max-height: 30dvh;
    
  }
  
  .incoming img {
    width: 20vw;
    height: 20vw;
    max-height: 30dvh;
  }

  /*
  .content {
    padding: 2em 0 6em 1em;
  }*/
  .border {
    z-index: 3;
  }
  .mobile-break { display: none;}
  .subtext {
    font-size: .8em;
  }
  /*
  #creative .text {
    margin: 68.5dvh 0 0;
  }
  #swimming .text {
    margin: 39dvh 0;
  }
  #rooms .text {
    margin: 35.5dvh 0;
  }
  #sauna .text {
    margin: 50dvh 0;
  }
  #restauration .text {
    margin: 45dvh 0;
  }
  #booking .text {
    margin: 24dvh 0;
    padding-left: 70%;
  }
  */
  .slide.crop img {
    width: 66%;
  }
  .background {
      background: #94bdb8;
      position: absolute;
      z-index: -1;
      inset: 0;
      left: 66%;
      background-size: cover;
      /* border-left: 1px solid #666; */
      transform: translateX(0%);
      transition: .6s transform ease-out;
  }

  .revealed .background {
    transform: translateX(0);
  }

  #booking hr {
    margin-top: .75em;
    margin-bottom: .75em;
    max-width: 6.3em;
  }

  a.social-link img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .text span.legal {
    opacity: .6;
  }
  
  .slick-dots li {
    margin: 0 6px;
  }
  
}



@media only screen and (min-width: 1300px) {
  
  .slider.desktop {
    display: block;
  }
  .slider.tablet-h {
    display: none;
  }
  .slider.mobile {
    display: none;
  }
  .slider.tablet {
    display: none;
  }
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}


/* ============================================================
   Accessibilité et navigation — ajouté le 01/09/2026
   ============================================================ */

/* Titres de section lus par les moteurs de recherche, les assistants IA
   et les lecteurs d'écran, sans impact visuel. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement : invisible jusqu'à ce qu'on l'atteigne au clavier. */
.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 10000;
  padding: 12px 20px;
  background: #ffffff;
  color: #111111;
  font-family: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid #111111;
  border-radius: 2px;
  transition: top .15s ease-in-out;
}
.skip-link:focus {
  top: 12px;
}

/* État de focus visible au clavier, sans affecter la souris. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.slick-arrow:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 3px;
}

/* Cibles tactiles sur mobile (WCAG 2.5.8).
   Ne concerne QUE les flèches des carrousels, qui sont réellement à
   l'écran. Le menu et le sélecteur de langue en sont volontairement
   exclus : sur mobile ils sont positionnés hors écran par le design et
   s'ouvrent par le retournement du logo. Les agrandir décalait la
   vignette des langues et la faisait dépasser sur le bord de l'écran. */
@media (max-width: 799px) {
  .slick-arrow {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Les photos portent désormais width/height, pour que le navigateur réserve
   la place avant le chargement (moins de sauts de mise en page). Le CSS
   d'origine leur donne width:100% sans hauteur et aspect-ratio:auto : sans
   ce height:auto, la valeur de l'attribut serait prise littéralement et
   toutes les sections s'allongeraient. Le sélecteur ne vise que les images
   auxquelles un attribut width a été ajouté — logo, plante et soleil n'en
   ont pas et gardent leur dimensionnement d'origine. */
.screen img[width] {
  height: auto;
}

/* Adresse dans la section réservation. <address> est en italique par
   défaut dans tous les navigateurs : on le remet dans le style du bloc. */
#booking address {
  font-style: normal;
  display: block;
  margin: 0 0 1em 0;
}
#booking address .district {
  opacity: .7;
}

/* ============================================================
   Adresse e-mail de la section Réservations
   ------------------------------------------------------------
   Le HTML l'entoure déjà d'un <u>, mais une règle générale
   text-decoration: none l'annulait : rien ne signalait donc
   qu'il s'agit d'un lien cliquable.
   ============================================================ */
#booking a[href^="mailto:"],
#booking a[href^="mailto:"] u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   Bandeau gris sous la photo d'accueil, en version mobile
   ------------------------------------------------------------
   La diapositive fait 859 px de haut, la photo 812 : les 47 px
   restants laissaient voir le fond #f2f1ef de la diapositive,
   d'où une bande grise entre la première et la deuxième section.
   La photo remplit désormais toute la hauteur ; object-fit:cover
   est déjà en place, le recadrage reste centré.
   Défaut présent sur le site d'origine, corrigé ici.
   ============================================================ */
@media (max-width: 799px) {
  #home .slider.mobile .slide > img {
    height: 100%;
    object-fit: cover;
  }
}