/**** BANDEAU DE NAVIGATION ****/
/* Sur ordinateur (plus de 1200 px, point de rupture tablette d'Elementor), le bandeau
   remplace le menu burger sous le logo. Il reprend le menu principal de chaque langue. */

.elementor-location-header .nav-bandeau {
  border-top: 1px solid var(--e-global-color-text);
}

/* Le choix de la langue reste en haut à droite. Dans l'éditeur Elementor, Polylang laisse
   l'élément « Langues » tel quel au lieu de le remplacer par les langues. */
.elementor-location-header .nav-bandeau .elementor-nav-menu > li.lang-item,
.elementor-location-header .nav-bandeau .elementor-nav-menu > li:has(> a[href="#pll_switcher"]) {
  display: none;
}

.elementor-location-header .nav-bandeau .elementor-nav-menu > li + li {
  border-left: 1px solid var(--e-global-color-text);
}

/* 1,5vw garde les libellés français et allemands (les plus longs) sur une ligne dès 1201 px. */
.elementor-location-header .nav-bandeau .elementor-nav-menu--main .elementor-item {
  height: 40px;
  padding: 0 0.4em;
  font-family: "NaNJaune-Midi", Sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.6rem);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Icône de lien externe, utile dans le menu burger seulement. */
.elementor-location-header .nav-bandeau .elementor-item i {
  display: none;
}

.elementor-location-header .nav-bandeau .elementor-item:hover,
.elementor-location-header .nav-bandeau .elementor-item:focus-visible,
.elementor-location-header .nav-bandeau .elementor-item.elementor-item-active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* Avec neuf rubriques, le menu burger (tablette et mobile) peut dépasser la hauteur de l'écran.
   Il défile sous l'en-tête, et ses rubriques se resserrent sur les écrans peu hauts. */
.elementor-location-header .menu-burger .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
  max-height: calc(100vh - 75px);
  max-height: calc(100dvh - 75px);
}

@media screen and (max-height: 800px) {
  .elementor-location-header .menu-burger nav.elementor-nav-menu--dropdown a.elementor-item {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* Hauteur de l'en-tête fixe sur ordinateur (bordure 1 px, logo 50 px, bandeau 41 px, bordure 1 px). */
@media screen and (min-width: 1201px) {
  .elementor-location-header .header-row {
    height: 50px;
  }

  #primary-content {
    margin-top: 93px;
  }
}

/**** SLIDER DES PAGES D'UN DOCUMENT ****/

/* Le lien est hors du flux pour que la hauteur vienne du format seul. Sinon, une page plus
   haute (la couverture d'un catalogue) étire toutes les diapositives. */
.slider-pages .swiper-slide {
  aspect-ratio: var(--slider-pages-ratio, 3 / 2);
}

.slider-pages-link {
  position: absolute;
  inset: 0;
  cursor: zoom-in;
}

.slider-pages .slider-pages-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slider-pages .button-nav {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.slider-pages .button-nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.slider-pages .button-nav:focus-visible {
  outline: 2px solid var(--e-global-color-text);
}

/* Sous 992 px, les flèches passent sous le slider au lieu de disparaître. */
@media screen and (max-width: 991.98px) {
  .slider-pages {
    padding-bottom: 56px;
  }

  .slider-pages .button-nav {
    display: block;
    top: auto;
    bottom: 0;
    transform: none;
    width: 44px;
    height: 44px;
  }

  .slider-pages .button-prev {
    left: calc(50% - 54px);
  }

  .slider-pages .button-next {
    right: calc(50% - 54px);
  }
}

/**** HISTOIRE ****/

/* La double page tient dans la hauteur de l'écran. 250 px couvrent l'en-tête, le titre et les
   marges, 1.54 est le format des doubles pages et 93 px la place des deux flèches. */
.widget-histoire .slider-pages {
  max-width: min(1100px, calc((100vh - 250px) * 1.54 + 93px));
  margin: 0 auto;
}

/**** RÉSIDENCE ****/
/* Encart blanc et slider côte à côte, comme la section Restaurant de l'accueil. */

.widget-residence {
  display: flex;
  align-items: stretch;
}

.residence-box {
  display: flex;
  flex: 0 0 30%;
  flex-direction: column;
  padding: 2.5rem 2rem;
  background-color: #fff;
}

.residence-title {
  margin: 0 0 2rem;
  font-family: "NaNJaune-Midi", Sans-serif;
  font-size: 2.5rem;
  font-weight: normal;
  line-height: 1.2;
  text-transform: uppercase;
}

.residence-text {
  font-family: "SelfModern", Sans-serif;
  font-size: 1rem;
}

.residence-catalogues {
  margin-top: auto;
  padding-top: 1.5rem;
}

.residence-label {
  margin-bottom: 0.75rem;
}

.residence-years {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.residence-year.elementor-button {
  padding: 8px 14px;
  line-height: 1;
}

.residence-year.elementor-button[aria-pressed="true"] {
  color: #fff !important;
  background-color: var(--e-global-color-text) !important;
}

.residence-sliders {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding-left: 30px;
}

.residence-slider {
  width: 100%;
}

/* Comme sur la maquette, les flèches sortent du slider. La gauche se place entre l'encart et
   le slider, la droite dans la marge de la section. */
@media screen and (min-width: 1201px) {
  .residence-sliders {
    padding-left: 60px;
  }

  .widget-residence .slider-pages .swiper {
    width: 100%;
  }

  .widget-residence .slider-pages .button-prev {
    left: -55px;
  }

  .widget-residence .slider-pages .button-next {
    right: -55px;
  }
}

@media screen and (max-width: 1200px) {
  .widget-residence {
    flex-direction: column;
  }

  .residence-sliders {
    padding: 3rem 0 0;
  }
}

@media screen and (max-width: 767px) {
  .residence-box {
    padding: 2rem;
  }

  .residence-title {
    font-size: 1.6rem;
  }

  .residence-sliders {
    padding-top: 2rem;
  }
}

/**** TARIFS ****/
/* Reprend la grille fournie en JPG par le client, aux tailles de la maquette du site (texte
   à 1,2vw, titres à 1,6vw). Les sélecteurs à deux classes passent devant les styles de
   tableau de Hello Elementor (bordures, lignes zébrées, survol). */

.widget-tarifs {
  padding: clamp(1rem, 1.65vw, 2rem) clamp(1rem, 2.1vw, 2.6rem);
  border: 2px solid var(--e-global-color-text);
  background-color: #fff;
  color: var(--e-global-color-text);
}

/* Bootstrap place la légende sous le tableau et en gris. caption-side et la couleur de
   .tarifs-caption la remettent en haut, en noir. */
.widget-tarifs .tarifs-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  caption-side: top;
  font-size: clamp(0.875rem, 1.2vw, 1.3rem);
  line-height: 1.3;
}

.widget-tarifs .tarifs-caption {
  margin-bottom: 0.5em;
  padding: 0 0 0.1em;
  border-bottom: 2px solid;
  color: inherit;
  font-family: "NaNJaune-Midi", Sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

.widget-tarifs .tarifs-unite {
  margin-left: 0.5em;
  font-family: "SelfModern", Sans-serif;
  font-size: max(0.75rem, 0.45em);
  font-style: italic;
  font-weight: normal;
  font-variant: small-caps;
  text-transform: none;
}

.widget-tarifs .tarifs-table th,
.widget-tarifs .tarifs-table td {
  padding: 0.1em 0.75em 0.1em 0;
  border: 0;
  background: none;
  font-weight: normal;
  line-height: inherit;
  text-align: left;
  vertical-align: baseline;
}

.widget-tarifs .tarifs-table tbody + tbody {
  border: 0;
}

/* Un filet sous le nom de chaque catégorie et sous sa dernière ligne. */
.widget-tarifs .tarifs-table .tarifs-categorie,
.widget-tarifs .tarifs-table tr:last-child {
  border-bottom: 2px solid var(--e-global-color-text);
}

.widget-tarifs .tarifs-categorie th {
  padding-top: 0.6em;
  padding-bottom: 0.2em;
  font-family: "NaNJaune-Midi", Sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  vertical-align: middle;
}

.widget-tarifs tbody:first-of-type .tarifs-categorie th {
  padding-top: 0.2em;
}

/* Comme sur la grille, les prix se partagent un peu plus de la moitié de la largeur. Les
   colonnes s'élargissent sur les écrans étroits pour ne jamais couper un prix. */
.widget-tarifs .tarifs-categorie .tarifs-dates {
  width: calc(53% / var(--tarifs-periodes));
  font-family: "SelfModern", Sans-serif;
  font-size: max(0.75rem, 0.62em);
  font-style: italic;
  line-height: 1.25;
}

.widget-tarifs .tarifs-plage {
  display: block;
  white-space: nowrap;
}

.widget-tarifs .tarifs-categorie + tr > * {
  padding-top: 0.35em;
}

.widget-tarifs .tarifs-table tr:last-child > * {
  padding-bottom: 0.35em;
}

.widget-tarifs .tarifs-table th[scope="row"] {
  font-family: "SelfModern", Sans-serif;
}

.widget-tarifs .tarifs-table td {
  font-family: "NaNJaune-Midi", Sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

.widget-tarifs .tarifs-supplement {
  margin: 0.5em 0 0;
  font-family: "NaNJaune-Midi", Sans-serif;
  font-size: clamp(0.875rem, 1.2vw, 1.3rem);
}

.widget-tarifs .tarifs-supplement strong {
  font-weight: 500;
}

/* Sur mobile, chaque libellé passe au-dessus de ses prix pour garder toutes les périodes
   visibles sans défilement horizontal. Les prix et les dates prennent la taille qui tient
   dans leur colonne (un prix mesure 5,2 fois la taille du texte, une plage de dates 6,3). */
@media screen and (max-width: 767px) {
  .widget-tarifs {
    container-type: inline-size;
    padding: 1.25rem 0.75rem;
  }

  .widget-tarifs .tarifs-table,
  .widget-tarifs .tarifs-table tbody,
  .widget-tarifs .tarifs-caption {
    display: block;
  }

  .widget-tarifs .tarifs-table {
    font-size: min(0.875rem, 100cqw / var(--tarifs-periodes) / 5.9);
  }

  .widget-tarifs .tarifs-table tr {
    display: grid;
    grid-template-columns: repeat(var(--tarifs-periodes), minmax(0, 1fr));
    column-gap: 0.5em;
  }

  .widget-tarifs .tarifs-table th[scope="rowgroup"],
  .widget-tarifs .tarifs-table th[scope="row"] {
    grid-column: 1 / -1;
  }

  .widget-tarifs .tarifs-table th,
  .widget-tarifs .tarifs-table td {
    padding-right: 0;
  }

  .widget-tarifs .tarifs-table th[scope="row"] {
    padding-top: 0.5em;
    font-size: 1rem;
  }

  /* La marge du bas de la dernière ligne passe sous les prix, pas entre le libellé et ses prix. */
  .widget-tarifs .tarifs-table tr:last-child > th[scope="row"] {
    padding-bottom: 0;
  }

  .widget-tarifs .tarifs-categorie .tarifs-dates {
    width: auto;
    padding: 0.4em 0;
    font-size: min(0.75rem, 100cqw / var(--tarifs-periodes) / 6.9);
  }

  .widget-tarifs .tarifs-supplement {
    font-size: 0.875rem;
  }
}

/**** RADIO ****/
/* Lecteurs Spotify des playlists de l'hôtel, deux par ligne à partir de la tablette.
   352 px est la hauteur du lecteur proposé par Spotify, qui affiche alors la liste des titres. */

.widget-playlists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.widget-playlists .playlist {
  display: block;
  width: 100%;
  height: 352px;
  border: 0;
}

/* Une playlist seule prend toute la largeur. */
.widget-playlists .playlist:only-child {
  grid-column: 1 / -1;
}

@media screen and (max-width: 767px) {
  .widget-playlists {
    grid-template-columns: minmax(0, 1fr);
  }
}