@charset "UTF-8";

/**
 * Design system variables
 */

/**
 * Hero Section
 */

.section_hero {
  background-color: #014F39;
}

.section_hero_content p {
  font-family: "Recia";
}

/* Scroll down indicator */

.scroll-down {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: white;
  transition: transform 0.3s ease;
}

.scroll-down:hover {
  transform: translateY(-2px);
}

.scroll-down__mouse {
  width: 22px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 12px;
  position: relative;
  display: flex;
  justify-content: center;
}

.scroll-down__wheel {
  width: 2px;
  height: 7px;
  background: currentColor;
  border-radius: 2px;
  position: absolute;
  top: 5px;
  animation: scroll-wheel 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.scroll-down__text {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: capitalize;
}

@keyframes scroll-wheel {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  60% {
    opacity: 0;
    transform: translateY(12px);
  }

  61% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Buttons
 */

.btn-list {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.btn-list::-webkit-scrollbar {
  display: none;
}

.btn-list .btn {
  white-space: nowrap;
  padding: 47px 20px;
  display: flex;
  justify-content: center;
  flex: auto;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .btn-list .btn {
    flex: 0 0 calc(33% - 0rem);
  }
}

@media (max-width: 480px) {
  .btn-list .btn {
    flex: 0 0 calc(60% - 0rem);
    padding: 2rem 1rem;
  }
}

@media (max-width: 1025px) {
  .btn-list {
    display: flex !important;
    gap: 0;
  }
}

.btn {
  font-family: "General Sans";
  display: inline-block;
  padding: 15px 20px;
  color: #000;
  border: 1px solid #000;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease, background-color 0.4s ease, border-color 0.4s ease, filter 0.3s ease;
  /* CTA variants */
}

@media (max-width: 1025px) {
  .btn {
    font-size: 14px;
  }
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #F5F0E4;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: -1;
}

.btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn.btn-white {
  color: white;
  border-color: white;
}

.btn.btn-white:hover {
  color: #014F39;
}

.btn.btn-primary {
  color: white;
  background-color: #014F39;
  border-color: #014F39;
}

.btn.btn-primary:hover {
  color: #014F39;
}

.btn.btn-secondary {
  color: #226d54;
  background-color: transparent;
  border-color: #226d54;
}

.btn.btn-secondary::before {
  background: #226d54;
}

.btn.btn-secondary:hover {
  color: white;
}

.btn.btn-tertiary {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
  will-change: backdrop-filter, transform;
  border-color: white;
}

.btn.btn-tertiary:hover {
  color: #014F39;
}

.social-icon-wipe {
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
}

.social-icon-wipe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #F5F0E4;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 0;
}

.social-icon-wipe:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.social-icon-wipe:hover {
  color: #014F39;
}

.social-icon-wipe svg {
  position: relative;
  z-index: 1;
}

/**
 * Galerie Slider Section
 */

.section_galerie .htr-slider-main {
  cursor: grab;
}

.section_galerie .htr-slider-main:active {
  cursor: grabbing;
}

.section_galerie .htr-slider-main.galerie-cursor-hide-native {
  cursor: none;
}

.section_galerie .htr-slider-main .swiper-wrapper {
  height: 100%;
}

.section_galerie .htr-slider-main .swiper-slide {
  height: auto;
}

.section_galerie .galerie-thumb-slide {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  overflow: hidden;
}

@media (max-width: 767px) {
  .has-mobile-dots {
    max-height: calc(100% - 36px);
  }
}

.galerie-nav-arrow {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #014F39;
  color: white;
  cursor: pointer;
  border: none;
  transition: opacity 0.3s ease;
}

.galerie-nav-arrow svg {
  width: 14px;
  height: 14px;
}

.galerie-nav-arrow.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

.galerie-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: backdrop-filter, transform;
  border: 1px solid white;
  color: white;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.galerie-cursor svg {
  width: 16px;
  height: 16px;
  display: none;
}

.galerie-cursor.is-visible {
  opacity: 1;
}

.galerie-cursor.is-left .galerie-cursor-arrow-left, .galerie-cursor.is-right .galerie-cursor-arrow-right {
  display: block;
}

.swiper.htr-slider-thumbs {
  margin-right: 0;
}

.swiper.htr-slider-thumbs.htr-slider-thumbs--underfull .swiper-wrapper {
  justify-content: flex-end;
}

/**
 * Composant réutilisable : grille galerie filtrable (rs_galerie_grid)
 */

.galerie-filters {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.galerie-filters::-webkit-scrollbar {
  display: none;
}

/**
 * Villas Section
 */

.villas-img-container {
  will-change: transform;
}

.villa-type-item {
  cursor: pointer;
}

.villa-type-item span {
  opacity: 0.2;
}

@media (max-width: 1023px) {
  .villa-type-item span {
    transition: opacity 0.5s ease;
  }
}

@media (hover: hover) and (pointer: fine) {
  .villa-type-item:hover span {
    opacity: 0.6;
  }
}

.villa-type-item.is-active span {
  opacity: 1;
}

.villa-img-slide,
.villa-img-slide-right {
  visibility: hidden;
  overflow: hidden;
}

.villa-img-slide img,
.villa-img-slide-right img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================================
   Formulaire réservation (section intro)
   ========================================= */

.reservation-form {
  position: relative;
}

.reservation-form .form-field {
  position: relative;
  border-bottom: 1px solid rgba(1, 79, 57, 0.25) !important;
  padding-top: 20px;
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.reservation-form .form-field label {
  position: absolute;
  top: 20px;
  left: 0;
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #014F39;
  transform-origin: left top;
  transition: transform 0.25s ease;
  pointer-events: none;
}

.reservation-form .form-field input,
.reservation-form .form-field select,
.reservation-form .form-field textarea {
  width: 100%;
  font-family: "General Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #014F39 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  padding: 0;
}

@media (max-width: 767px) {
  .reservation-form .form-field input,
  .reservation-form .form-field select,
  .reservation-form .form-field textarea {
    font-size: 16px;
  }
}

.reservation-form .form-field textarea {
  resize: none;
  display: block;
}

.reservation-form .form-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23014F39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 14px !important;
  padding-right: 24px !important;
}

.reservation-form .form-field input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23014F39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-size: 16px !important;
}

.reservation-form .form-field input[type=time]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23014F39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") !important;
  background-size: 16px !important;
}

.reservation-form .form-field input[type=date]:not(:focus):not(.has-value)::-webkit-datetime-edit,
.reservation-form .form-field input[type=time]:not(:focus):not(.has-value)::-webkit-datetime-edit {
  color: transparent;
}

.reservation-form .form-field select option {
  background-color: #F5F0E4;
  color: #014F39;
  padding: 10px 14px;
}

.reservation-form .form-field select option:hover,
.reservation-form .form-field select option:checked,
.reservation-form .form-field select option:focus {
  background-color: rgba(1, 79, 57, 0.12);
}

.reservation-form .form-field input:not([type=date]):not([type=time]):not(:-moz-placeholder) ~ label, .reservation-form .form-field textarea:not(:-moz-placeholder) ~ label {
  transform: translateY(-20px) scale(0.75);
}

.reservation-form .form-field input:focus ~ label,
.reservation-form .form-field input:not([type=date]):not([type=time]):not(:placeholder-shown) ~ label,
.reservation-form .form-field input.has-value ~ label,
.reservation-form .form-field textarea:focus ~ label,
.reservation-form .form-field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-20px) scale(0.75);
}

.reservation-form .form-field input[type=number]::-webkit-inner-spin-button,
.reservation-form .form-field input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.reservation-form .form-field input[type=number] {
  -moz-appearance: textfield;
}

.reservation-form .form-field input[type=date],
.reservation-form .form-field input[type=time] {
  -moz-appearance: auto;
       appearance: auto;
  -webkit-appearance: auto;
}

.reservation-form .form-ajax-message {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 12px;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 4px;
  background-color: #014F39;
  color: #F5F0E4;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reservation-form .form-ajax-message.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.reservation-form .custom-select {
  position: relative;
}

.reservation-form .custom-select .custom-select-native {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

.reservation-form .custom-select .custom-select-trigger {
  width: 100%;
  text-align: left;
  font-family: "General Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #014F39;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  padding-right: 24px;
  min-height: 1.2em;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23014F39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px;
}

.reservation-form .custom-select .custom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 8px;
  background-color: #F5F0E4;
  border: 1px solid rgba(1, 79, 57, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  list-style: none;
  margin-left: 0;
  max-height: 240px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.reservation-form .custom-select.open .custom-select-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.reservation-form .custom-select .custom-select-option {
  padding: 10px 14px;
  font-family: "General Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #014F39;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.reservation-form .custom-select .custom-select-option:hover, .reservation-form .custom-select .custom-select-option.is-selected {
  background-color: rgba(1, 79, 57, 0.12);
}

.reservation-form .custom-select.has-value label {
  transform: translateY(-20px) scale(0.75);
}

.reservation-form.reservation-form-cream .form-field {
  border-bottom-color: rgba(245, 240, 228, 0.6) !important;
}

.reservation-form.reservation-form-cream .form-field label {
  color: #F5F0E4;
}

.reservation-form.reservation-form-cream .form-field input,
.reservation-form.reservation-form-cream .form-field select,
.reservation-form.reservation-form-cream .form-field textarea {
  color: #F5F0E4 !important;
}

.reservation-form.reservation-form-cream .form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F0E4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

.reservation-form.reservation-form-cream .form-field select option {
  color: #014F39;
}

.reservation-form.reservation-form-cream .form-ajax-message {
  background-color: #F5F0E4;
  color: #014F39;
}

.reservation-form .form-field-checkbox {
  cursor: pointer;
  color: #014F39;
  font-size: 14px;
}

.reservation-form .form-field-checkbox input[type=checkbox] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid #014F39;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.reservation-form .form-field-checkbox input[type=checkbox]:checked {
  background-color: #014F39;
}

.reservation-form .form-field-checkbox input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #F5F0E4;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.reservation-form .form-field-checkbox input[type=checkbox]:focus-visible {
  outline: 2px solid #014F39;
  outline-offset: 2px;
}

/**
 * Témoignages Section
 */

.temoignage-card {
  border: 1px solid rgba(1, 79, 57, 0.3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.temoignage-card.is-revealed {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.temoignage-card:hover {
  transform: translateY(-4px);
  background-color: #014F39;
  border-color: #014F39;
  color: #F5F0E4;
  box-shadow: 0 12px 24px rgba(1, 79, 57, 0.12);
}

.temoignage-card:hover > img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.temoignage-card:hover .temoignage-divider {
  border-top-color: rgba(245, 240, 228, 0.3);
}

.temoignage-card:hover .temoignage-avatar {
  background-color: rgba(245, 240, 228, 0.3);
}

.temoignage-divider {
  border-top: 1px solid rgba(1, 79, 57, 0.3);
  transition: border-top-color 0.3s ease;
}

.temoignage-text {
  font-family: "Recia", serif;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  height: 3em;
}

@media (min-width: 1024px) {
  .temoignage-text {
    -webkit-line-clamp: 6;
    line-clamp: 6;
    height: 9em;
  }
}

.temoignage-text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  height: auto;
}

.temoignage-toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.temoignage-toggle:hover {
  opacity: 1;
}

.temoignage-avatar {
  background-color: rgba(1, 79, 57, 0.2);
  transition: background-color 0.3s ease;
}

.temoignage-swiper .swiper-wrapper {
  align-items: stretch;
}

.temoignage-swiper .swiper-slide {
  height: auto;
}

.temoignage-carousel-outer .swiper-pagination {
  position: static;
  margin-top: 40px;
}

.temoignage-carousel-outer .swiper-pagination-bullet {
  background-color: #014F39;
  opacity: 0.3;
}

.temoignage-carousel-outer .swiper-pagination-bullet-active {
  opacity: 1;
}

/**
 * Composant réutilisable : collage de 2 photos en cascade
 */

.superposed-photos {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  visibility: hidden;
}

.superposed-photos .superposed-photo-wrap {
  width: 60%;
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
}

.superposed-photos .superposed-photo-wrap:nth-of-type(1) {
  z-index: 1;
}

.superposed-photos .superposed-photo-wrap:nth-of-type(2) {
  margin-top: 12%;
  /* le décalage horizontal (-50%) est géré par GSAP (voir initSuperposedPhotosReveal),
     pour rester cohérent avec le reveal (xPercent) sans que l'un écrase l'autre */
}

/**
 * Composant réutilisable : carrousel de plats (rs_menu_carousel)
 */

.menu-carousel .menu-swiper {
  overflow: visible;
}

/**
 * Composant réutilisable : carte "catégorie" (rs_category)
 */

.category-list .category-list-icon {
  color: #014F39;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-list .category-list-icon .icon:before {
  font-size: 20px;
  line-height: 1;
}

.category-list .category-list-icon svg,
.category-list .category-list-icon .icon {
  transition: transform 0.3s ease;
}

.category-list .category-list-item:hover .category-list-icon svg,
.category-list .category-list-item:hover .category-list-icon .icon {
  transform: translateY(-2px);
}

.category-divider-line {
  transform: scaleY(0);
  transform-origin: 50% 0%;
  transition: transform 0.6s ease;
}

.category-divider-line.is-revealed {
  transform: scaleY(1);
}

/**
 * Composant réutilisable : comparatif à deux photos (rs_photo_compare)
 */

.photo-compare .photo-compare-item {
  background-color: #014F39;
}

@font-face {
  font-family: "icons";

  src: url("../fonts/icons/icons.eot?1791276181");

  src: url("../fonts/icons/icons.eot?1791276181#iefix") format("eot"), url("../fonts/icons/icons.woff2?1791276181") format("woff2"), url("../fonts/icons/icons.woff?1791276181") format("woff"), url("../fonts/icons/icons.ttf?1791276181") format("truetype"), url("../fonts/icons/icons.svg?1791276181#icons") format("svg");
}

.icon:before {
  font-family: "icons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
  text-decoration: none;
  text-transform: none;
}

.icon-babyfoot:before {
  content: "\e001";
}

.icon-bain-a-remous:before {
  content: "\e002";
}

.icon-basketball:before {
  content: "\e003";
}

.icon-bateau-a-voile:before {
  content: "\e004";
}

.icon-bateau:before {
  content: "\e005";
}

.icon-bouee:before {
  content: "\e006";
}

.icon-chiken:before {
  content: "\e007";
}

.icon-climatiseur:before {
  content: "\e008";
}

.icon-douche:before {
  content: "\e009";
}

.icon-facebook:before {
  content: "\e00a";
}

.icon-football:before {
  content: "\e00b";
}

.icon-grange:before {
  content: "\e00c";
}

.icon-groupe:before {
  content: "\e00d";
}

.icon-haltere:before {
  content: "\e00e";
}

.icon-handball:before {
  content: "\e00f";
}

.icon-hotte-de-cuisine:before {
  content: "\e010";
}

.icon-instagram:before {
  content: "\e011";
}

.icon-kayak:before {
  content: "\e012";
}

.icon-linkedin:before {
  content: "\e013";
}

.icon-lit:before {
  content: "\e014";
}

.icon-paddle:before {
  content: "\e015";
}

.icon-parking:before {
  content: "\e016";
}

.icon-petanque:before {
  content: "\e017";
}

.icon-piscine:before {
  content: "\e018";
}

.icon-plantation:before {
  content: "\e019";
}

.icon-plante:before {
  content: "\e01a";
}

.icon-poule:before {
  content: "\e01b";
}

.icon-price:before {
  content: "\e01c";
}

.icon-raquette-de-paddle-tennis:before {
  content: "\e01d";
}

.icon-raquette-de-tennis:before {
  content: "\e01e";
}

.icon-restaurant:before {
  content: "\e01f";
}

.icon-run:before {
  content: "\e020";
}

.icon-sea:before {
  content: "\e021";
}

.icon-sofa:before {
  content: "\e022";
}

.icon-spa:before {
  content: "\e023";
}

.icon-surface:before {
  content: "\e024";
}

.icon-tennis-de-table:before {
  content: "\e025";
}

.icon-terrasse:before {
  content: "\e026";
}

.icon-toboggan:before {
  content: "\e027";
}

.icon-tripadvisor:before {
  content: "\e028";
}

.icon-tyrolienne:before {
  content: "\e029";
}

.icon-voiture:before {
  content: "\e02a";
}

.icon-wifi:before {
  content: "\e02b";
}

.icon-youtube:before {
  content: "\e02c";
}

/**
 * Composant réutilisable : vidéo plein écran pilotée au scroll (rs_video)
 */

.scroll-video-outer {
  transform: scale(0.3333);
  transform-origin: top center;
  will-change: transform;
}

.youtube-video {
  overflow: hidden;
}

.youtube-video .youtube-video-poster {
  z-index: 1;
}

.youtube-video .youtube-video-target,
.youtube-video iframe {
  position: absolute;
  top: -25%;
  left: -17.5%;
  width: 135%;
  height: 135%;
  pointer-events: none;
  z-index: 2;
}

.scroll-video-mute-toggle {
  top: 16px;
  left: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: #014F39;
  color: white;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease;
}

@media (max-width: 767px) {
  .scroll-video-mute-toggle {
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
  }
}

.scroll-video-mute-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #F5F0E4;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: -1;
}

.scroll-video-mute-toggle:hover {
  color: #014F39;
}

.scroll-video-mute-toggle:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.scroll-video-mute-toggle svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .scroll-video-mute-toggle svg {
    width: 15px;
    height: 15px;
  }
}

.scroll-video-mute-toggle .icon-unmuted {
  display: none;
}

.scroll-video-mute-toggle.is-unmuted .icon-muted {
  display: none;
}

.scroll-video-mute-toggle.is-unmuted .icon-unmuted {
  display: block;
}

.scroll-video-youtube-link {
  bottom: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #014F39;
  color: white;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.scroll-video-section:hover .scroll-video-youtube-link {
  opacity: 1;
}

@media (max-width: 767px) {
  .scroll-video-youtube-link {
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    opacity: 1;
  }
}

.scroll-video-youtube-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #F5F0E4;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: -1;
}

.scroll-video-youtube-link:hover {
  color: #014F39;
}

.scroll-video-youtube-link:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.scroll-video-youtube-link svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .scroll-video-youtube-link svg {
    width: 15px;
    height: 15px;
  }
}

/**
 * initColumnParallax (animations.js, technique reprise de
 * codrops/SmoothScrollAnimations) translate l'image de -var(--overflow) à
 * +var(--overflow) px au scroll : le scale ci-dessous donne la marge de
 * débordement nécessaire pour que ce mouvement ne laisse jamais voir de bord
 * vide de l'image.
 */

.scroll-parallax-img {
  --overflow: 50;
  transform: scale(1.2);
  transform-origin: center center !important;
  will-change: transform;
}

/**
 * Composant réutilisable : grille d'articles (rs_blog_grid) et son loader
 * de scroll infini.
 */

.blog-loader {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(1, 79, 57, 0.2);
  border-top-color: #014F39;
  border-radius: 50%;
  animation: blog-loader-spin 0.7s linear infinite;
}

.blog-loader.hidden {
  display: none;
}

@keyframes blog-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/**
 * Masque 3 barres (dégradé de vert, sans teinte claire) pour le reveal des
 * images — voir mediaRevealImage() dans animations.js. Inspiré de l'effet
 * "media-reveal" du rapport annuel upadi.ca (rapport2023-2024.upadi.ca),
 * adapté à notre palette.
 *
 * Les barres sont injectées en JS comme enfants temporaires du conteneur de
 * l'image (retirées du DOM une fois l'animation terminée) : ce conteneur
 * doit déjà être positionné (relative/absolute) pour qu'elles s'y calent
 * correctement — c'est déjà le cas de tous les conteneurs de reveal existants
 * (.reveal, .superposed-photo-wrap, .villa-img-slide, .swiper-slide, ...).
 */

.media-reveal-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.media-reveal-overlay div {
  position: absolute;
  inset: 0;
}

.media-reveal-overlay div:nth-child(1) {
  background-color: #438b6f;
}

.media-reveal-overlay div:nth-child(2) {
  background-color: #226d54;
}

.media-reveal-overlay div:nth-child(3) {
  background-color: #014F39;
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter, system-ui, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.\!container{
  width: 100% !important;
}

.container{
  width: 100%;
}

@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  }

  .container{
    max-width: 640px;
  }
}

@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }

  .container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  }

  .container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  }

  .container{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  }

  .container{
    max-width: 1536px;
  }
}

.pointer-events-none{
  pointer-events: none;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.inset-0{
  inset: 0px;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.bottom-0{
  bottom: 0px;
}

.bottom-4{
  bottom: 1rem;
}

.left-0{
  left: 0px;
}

.left-1\/2{
  left: 50%;
}

.left-3{
  left: 0.75rem;
}

.left-4{
  left: 1rem;
}

.left-6{
  left: 1.5rem;
}

.right-0{
  right: 0px;
}

.right-4{
  right: 1rem;
}

.top-0{
  top: 0px;
}

.top-1\/2{
  top: 50%;
}

.top-3{
  top: 0.75rem;
}

.top-4{
  top: 1rem;
}

.top-6{
  top: 1.5rem;
}

.z-10{
  z-index: 10;
}

.z-50{
  z-index: 50;
}

.z-\[100\]{
  z-index: 100;
}

.z-\[2\]{
  z-index: 2;
}

.order-1{
  order: 1;
}

.order-2{
  order: 2;
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.col-span-3{
  grid-column: span 3 / span 3;
}

.col-span-4{
  grid-column: span 4 / span 4;
}

.col-span-7{
  grid-column: span 7 / span 7;
}

.col-start-2{
  grid-column-start: 2;
}

.col-start-4{
  grid-column-start: 4;
}

.col-start-6{
  grid-column-start: 6;
}

.col-start-9{
  grid-column-start: 9;
}

.m-0{
  margin: 0px;
}

.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.-mt-16{
  margin-top: -4rem;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-1\.5{
  margin-bottom: 0.375rem;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.ml-4{
  margin-left: 1rem;
}

.ml-auto{
  margin-left: auto;
}

.mt-10{
  margin-top: 2.5rem;
}

.mt-16{
  margin-top: 4rem;
}

.mt-20{
  margin-top: 5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-auto{
  margin-top: auto;
}

.block{
  display: block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.table{
  display: table;
}

.\!grid{
  display: grid !important;
}

.grid{
  display: grid;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.aspect-\[4\/3\]{
  aspect-ratio: 4/3;
}

.aspect-square{
  aspect-ratio: 1 / 1;
}

.aspect-video{
  aspect-ratio: 16 / 9;
}

.h-10{
  height: 2.5rem;
}

.h-2\/3{
  height: 66.666667%;
}

.h-4{
  height: 1rem;
}

.h-5{
  height: 1.25rem;
}

.h-8{
  height: 2rem;
}

.h-9{
  height: 2.25rem;
}

.h-\[100svh\]{
  height: 100svh;
}

.h-\[36px\]{
  height: 36px;
}

.h-\[60vw\]{
  height: 60vw;
}

.h-\[70vw\]{
  height: 70vw;
}

.h-auto{
  height: auto;
}

.h-full{
  height: 100%;
}

.h-px{
  height: 1px;
}

.h-screen{
  height: 100vh;
}

.max-h-\[360px\]{
  max-height: 360px;
}

.max-h-screen{
  max-height: 100vh;
}

.min-h-\[40vh\]{
  min-height: 40vh;
}

.min-h-\[60vw\]{
  min-height: 60vw;
}

.w-1\/2{
  width: 50%;
}

.w-10{
  width: 2.5rem;
}

.w-20{
  width: 5rem;
}

.w-3\/4{
  width: 75%;
}

.w-4{
  width: 1rem;
}

.w-40{
  width: 10rem;
}

.w-5{
  width: 1.25rem;
}

.w-6{
  width: 1.5rem;
}

.w-8{
  width: 2rem;
}

.w-9{
  width: 2.25rem;
}

.w-\[160px\]{
  width: 160px;
}

.w-auto{
  width: auto;
}

.w-full{
  width: 100%;
}

.w-px{
  width: 1px;
}

.max-w-2xl{
  max-width: 42rem;
}

.max-w-lg{
  max-width: 32rem;
}

.max-w-md{
  max-width: 28rem;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-xl{
  max-width: 36rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.grow{
  flex-grow: 1;
}

.-translate-y-1{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1{
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer{
  cursor: pointer;
}

.resize{
  resize: both;
}

.list-none{
  list-style-type: none;
}

.columns-2{
  -moz-columns: 2;
       columns: 2;
}

.break-inside-avoid{
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flex-col{
  flex-direction: column;
}

.flex-col-reverse{
  flex-direction: column-reverse;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-nowrap{
  flex-wrap: nowrap;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.items-stretch{
  align-items: stretch;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-16{
  gap: 4rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-8{
  gap: 2rem;
}

.gap-x-8{
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-y-2{
  row-gap: 0.5rem;
}

.gap-y-3{
  row-gap: 0.75rem;
}

.self-start{
  align-self: flex-start;
}

.self-center{
  align-self: center;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-x-auto{
  overflow-x: auto;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-full{
  border-radius: 9999px;
}

.border{
  border-width: 1px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-l{
  border-left-width: 1px;
}

.border-t{
  border-top-width: 1px;
}

.border-cream\/20{
  border-color: rgb(245 240 228 / 0.2);
}

.border-cream\/60{
  border-color: rgb(245 240 228 / 0.6);
}

.border-gray-400{
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-green{
  --tw-border-opacity: 1;
  border-color: rgb(1 79 57 / var(--tw-border-opacity, 1));
}

.border-green\/30{
  border-color: rgb(1 79 57 / 0.3);
}

.border-green\/40{
  border-color: rgb(1 79 57 / 0.4);
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/40{
  border-color: rgb(255 255 255 / 0.4);
}

.bg-black\/20{
  background-color: rgb(0 0 0 / 0.2);
}

.bg-cream{
  --tw-bg-opacity: 1;
  background-color: rgb(245 240 228 / var(--tw-bg-opacity, 1));
}

.bg-current{
  background-color: currentColor;
}

.bg-green{
  --tw-bg-opacity: 1;
  background-color: rgb(1 79 57 / var(--tw-bg-opacity, 1));
}

.bg-green\/30{
  background-color: rgb(1 79 57 / 0.3);
}

.bg-white\/80{
  background-color: rgb(255 255 255 / 0.8);
}

.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
}

.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-black\/30{
  --tw-gradient-from: rgb(0 0 0 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent{
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-black\/50{
  --tw-gradient-to: rgb(0 0 0 / 0.5) var(--tw-gradient-to-position);
}

.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.object-center{
  -o-object-position: center;
     object-position: center;
}

.p-0{
  padding: 0px;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-\[10px\]{
  padding: 10px;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[10px\]{
  padding-left: 10px;
  padding-right: 10px;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-\[3rem\]{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.pb-10{
  padding-bottom: 2.5rem;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-5{
  padding-bottom: 1.25rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pb-\[10px\]{
  padding-bottom: 10px;
}

.pb-\[3rem\]{
  padding-bottom: 3rem;
}

.pb-\[7rem\]{
  padding-bottom: 7rem;
}

.pl-5{
  padding-left: 1.25rem;
}

.pt-10{
  padding-top: 2.5rem;
}

.pt-14{
  padding-top: 3.5rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-5{
  padding-top: 1.25rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pt-8{
  padding-top: 2rem;
}

.pt-\[10px\]{
  padding-top: 10px;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-2xl{
  font-size: 1.5rem;
}

.text-5xl{
  font-size: 3rem;
}

.text-\[clamp\(40px\2c 6\.5vw\2c 128px\)\]{
  font-size: clamp(40px, 6.5vw, 128px);
}

.text-base{
  font-size: 1rem;
}

.text-lg{
  font-size: 1.125rem;
}

.text-sm{
  font-size: 0.875rem;
}

.text-xl{
  font-size: 1.25rem;
}

.text-xs{
  font-size: 0.75rem;
}

.font-bold{
  font-weight: 700;
}

.font-medium{
  font-weight: 500;
}

.font-semibold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.lowercase{
  text-transform: lowercase;
}

.capitalize{
  text-transform: capitalize;
}

.italic{
  font-style: italic;
}

.leading-none{
  line-height: 1;
}

.leading-relaxed{
  line-height: 1.625;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-widest{
  letter-spacing: 0.1em;
}

.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-cream{
  --tw-text-opacity: 1;
  color: rgb(245 240 228 / var(--tw-text-opacity, 1));
}

.text-cream\/60{
  color: rgb(245 240 228 / 0.6);
}

.text-cream\/80{
  color: rgb(245 240 228 / 0.8);
}

.text-green{
  --tw-text-opacity: 1;
  color: rgb(1 79 57 / var(--tw-text-opacity, 1));
}

.text-green\/50{
  color: rgb(1 79 57 / 0.5);
}

.text-green\/70{
  color: rgb(1 79 57 / 0.7);
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

.opacity-0{
  opacity: 0;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-70{
  opacity: 0.7;
}

.opacity-80{
  opacity: 0.8;
}

.outline{
  outline-style: solid;
}

.outline-green{
  outline-color: #014F39;
}

.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-filter{
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300{
  transition-duration: 300ms;
}

.\[-\:\\w\]{
  -: \w;
}

/* border-green a 60% d'opacite par defaut (au lieu de 100%) partout sur le site */

.border-green {
  --tw-border-opacity: 0.6;
}

/* Fallback pour "100svh" (hauteur de viewport "small") : unité non supportée
   avant Safari 15.4 (certains iPad concernés) - une propriété CSS invalide
   est alors ignorée EN ENTIER, sans repli automatique sur 100vh. On réécrit
   donc ici les classes Tailwind générées pour redéclarer height en 100vh
   AVANT 100svh dans la même règle : ignoré proprement si "svh" n'est pas
   supporté (garde 100vh), sinon écrasé par 100svh juste après.
   !important nécessaire pour les variantes "md:" : Tailwind regroupe toutes
   les classes responsives à la toute fin du CSS compilé (après ce bloc),
   donc sa propre règle .md\:h-\[100svh\] gagnerait sinon par ordre de
   source malgré cet override. */

.h-\[100svh\] {
  height: 100vh !important;
  height: 100svh !important;
}

.max-h-\[100svh\] {
  max-height: 100vh !important;
  max-height: 100svh !important;
}

@media (min-width: 768px) {
  .md\:h-\[100svh\] {
    height: 100vh !important;
    height: 100svh !important;
  }

  .md\:max-h-\[100svh\] {
    max-height: 100vh !important;
    max-height: 100svh !important;
  }
}

/* Lenis Smooth Scroll */

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

html.lenis, html.lenis body {
  height: auto;
}

/**
 * Scrollbar custom (rs_scroll, voir components/rs-scroll.js) : piste +
 * thumb, architecture reprise de FFScroll (thème fatfish). mix-blend-mode
 * sur le conteneur (pas juste le thumb) : la piste transparente + le thumb
 * blanc s'inversent tous les deux selon ce qu'il y a dessous, restant
 * visibles sur fond clair comme sombre sans logique JS pour basculer une
 * couleur.
 */

.scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  opacity: 0;
  z-index: 100;
  mix-blend-mode: exclusion;
  transition: opacity 0.4s ease-out;
}

.scrollbar--shown {
  opacity: 1;
}

.scrollbar__track {
  position: absolute;
  inset: 0;
  background-color: transparent;
  cursor: pointer;
}

.scrollbar__thumb {
  position: absolute;
  width: 100%;
  padding: 1px;
  background-clip: content-box;
  background-color: #fff;
  border-radius: 4px;
  cursor: grab;
  touch-action: none;
}

.scrollbar--is-dragging .scrollbar__thumb, .scrollbar__thumb:active {
  cursor: grabbing;
}

body.is-scrollbar-dragging {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Barba.js Page Transitions */

/* Plus de transform ici : les transitions Barba n'animent plus que l'opacité
   (voir barba.js), un décalage y sur ce container entrait en conflit avec un
   pin GSAP pinType:'transform' sur une section enfant (ex: .villas-section).
   Un transform statique laissé ici ne serait jamais remis à 0 par le JS. */

[data-barba=container] {
  opacity: 0;
  /* Commence invisible pour l'animation d'entrée */
}

/* Masque de transition (rideau) : voir #page-transition-mask dans header.php
   et leave()/enter() dans barba.js. Plein écran, à 3 couches (voir
   .media-reveal-overlay) : partent hors-écran en haut, glissent ensemble
   pour couvrir tout l'écran (leave), puis continuent de glisser vers le bas
   pour révéler la page suivante une fois prête (enter) — un seul mouvement
   continu haut→bas, pas un fondu. Opacity fixée à 1 une fois pour toutes
   par le JS ; seule la position (y) de chaque couche pilote la visibilité.
   Visible et NON transformé par défaut (donc couvrant tout l'écran, sans
   attendre le JS) : au tout premier chargement (atterrissage direct ou F5),
   c'est volontairement le tout premier élément peint, avant que
   initPageLoadCurtainReveal() (barba.js) ne le fasse glisser pour révéler
   la page. Pas de transform CSS ici pour autant (même hors-écran) : il
   serait lu par GSAP via getComputedStyle et mis en cache comme offset
   figé, sur lequel les "y" des transitions suivantes s'additionneraient au
   lieu de le remplacer (bug déjà rencontré avec yPercent sur ce même
   masque) — la position hors-écran de repos est donc toujours posée en JS.
   z-index en dur ici (pas seulement via la classe .media-reveal-overlay,
   z-index:1) : une règle par ID gagne toujours sur une règle par classe,
   quel que soit l'ordre de sortie du CSS compilé — garantit qu'il reste
   au-dessus du header (z-50) indépendamment de ça. */

#page-transition-mask {
  z-index: 100;
}

/* Effet "blur-up" pendant le chargement lazyload, sur fond vert */

img.lazyload,
img[data-src] {
  transition: filter 0.6s ease;
  filter: blur(6px);
  background-color: #014F39;
}

img.lazyload.lazyloaded,
img[data-src].lazyloaded {
  filter: blur(0);
  background-color: transparent;
}

img.lazyload.w-full.h-full,
img[data-src].w-full.h-full {
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  margin: -24px;
  transition: width 0.6s ease, height 0.6s ease, margin 0.6s ease;
}

img.lazyload.w-full.h-full.lazyloaded,
img[data-src].w-full.h-full.lazyloaded {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Fonts */

@font-face {
  font-family: "General Sans";

  src: url("../assets/fonts/General-sans/GeneralSans-Medium.woff2") format("woff2");

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Recia";

  src: url("../assets/fonts/Recia/Recia-Regular.woff2") format("woff2");

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Syne";

  src: url("../assets/fonts/Syne/Syne-Regular.woff2") format("woff2");

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Helvetica";

  src: url("../assets/fonts/Helvetica/HelveticaNeueLight.woff2") format("woff2");

  font-weight: 300;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Helvetica";

  src: url("../assets/fonts/Helvetica/HelveticaNeueMedium.woff2") format("woff2");

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Helvetica";

  src: url("../assets/fonts/Helvetica/HelveticaNeueBold.woff2") format("woff2");

  font-weight: 700;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Helvetica";

  src: url("../assets/fonts/Helvetica/HelveticaNeueHeavy.woff2") format("woff2");

  font-weight: 800;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Helvetica";

  src: url("../assets/fonts/Helvetica/HelveticaNeueBlack.woff2") format("woff2");

  font-weight: 900;

  font-style: normal;

  font-display: swap;
}

/* Reset et base */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: #000;
}

body {
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #014F39;
  background-color: #F5F0E4;
  overflow-x: hidden;
  letter-spacing: -0.019em;
}

/* Typographie */

h1, h2 {
  font-family: "General Sans", sans-serif;
  font-size: clamp(45px, 6.5vw, 128px);
  font-weight: 500;
  color: #014F39;
  letter-spacing: -0.04em;
  line-height: 0.9;
  transform: translateX(-3px) translateY(-0.1em);
}

h3 {
  font-family: "General Sans", sans-serif;
  font-size: clamp(20px, 4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  transform: translateX(-1px) translateY(-0.1em);
}

h4 {
  font-family: "General Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  transform: translateX(-1px) translateY(-0.1em);
}

h5, p {
  transform: translateX(-1px) translateY(-0.1em);
}

@media (max-width: 768px) {
  h3 {
    font-size: 18px;
  }

  h4, h6, p {
    font-size: 14px;
  }
}

/* Recia — descriptions */

.text-scrub,
.font-recia {
  font-family: "Recia", serif;
  font-weight: 400;
}

/* Logo SVG */

.custom-logo-link {
  display: block;
  width: 100%;
  /* Force le lien à prendre toute la largeur */
  position: relative;
}

.custom-logo-link img {
  width: 100%;
  /* Largeur initiale du logo - pleine largeur */
  height: auto;
  /* Hauteur automatique pour conserver le ratio */
  transition: none;
  display: block;
}

.header-logo-center {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 40px;
  width: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

@media (min-width: 768px) {
  .header-logo-center {
    height: 48px;
  }
}

.header-logo-center img {
  width: auto;
  height: 100%;
  display: block;
}

.header-logo-center-scrolled {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -o-object-fit: contain;
     object-fit: contain;
  transition: opacity 0.4s ease;
}

/* Header scroll effect */

#masthead {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: transparent;
  opacity: 0;
  transform: translateY(-40px);
}

#masthead .custom-logo-link {
  transition: none;
  display: block;
  width: 200px;
}

@media (max-width: 768px) {
  #masthead .custom-logo-link {
    width: 140px;
  }
}

#masthead .custom-logo-link img {
  filter: invert(0);
  transition: filter 0.3s ease, opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#masthead .header-logo-center img:not(.header-logo-center-scrolled) {
  filter: invert(0);
  transition: filter 0.3s ease;
}

#masthead.header-black .custom-logo-link img,
#masthead.header-black .header-logo-center img:not(.header-logo-center-scrolled) {
  filter: invert(1) !important;
}

#masthead.header-black #site-navigation a {
  color: #000;
}

#masthead.header-black #site-navigation a::after {
  background-color: #000;
}

#masthead.header-white .custom-logo-link img,
#masthead.header-white .header-logo-center img:not(.header-logo-center-scrolled) {
  filter: invert(0);
}

#masthead:not(.header-scrolled) .custom-logo-link img,
#masthead:not(.header-scrolled) .header-logo-center img:not(.header-logo-center-scrolled) {
  filter: invert(0) !important;
}

#masthead.header-scrolled .header-logo-center-scrolled {
  opacity: 1;
}

#masthead.header-away-from-hero .custom-logo-link img {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

#masthead.header-away-from-hero .header-logo-center {
  pointer-events: auto;
}

#masthead .header-container {
  height: auto;
}

#masthead .logo-container {
  position: relative;
  z-index: 1;
}

#masthead .logo-container h1 {
  margin: 0;
}

#masthead .menu-container {
  z-index: 2;
  height: -moz-fit-content;
  height: fit-content;
}

#masthead .lang-toggle {
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#masthead.header-scrolled .lang-toggle {
  color: #014F39;
}

#masthead #site-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#masthead #site-navigation .current-menu-item a::after, #masthead #site-navigation .current-menu-item a:not(:hover)::after,
#masthead #site-navigation .current_page_item a::after,
#masthead #site-navigation .current_page_item a:not(:hover)::after {
  transform: scaleX(1);
  transform-origin: left;
}

#masthead #site-navigation a {
  position: relative;
  display: inline-block;
  font-family: "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  overflow: hidden;
  transition: color 0.3s ease;
  padding-bottom: 0.2rem;
}

#masthead #site-navigation a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

#masthead #site-navigation a.text-black::after {
  background-color: #000;
}

#masthead #site-navigation a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

#masthead #site-navigation a:not(:hover)::after {
  transform: scaleX(0);
  transform-origin: right;
}

#masthead #site-navigation a.current-menu-item::after, #masthead #site-navigation a.current_page_item::after {
  transform: scaleX(1);
}

#masthead .mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 200;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  visibility: hidden;
}

@media (max-width: 768px) {
  #masthead .mobile-menu-overlay {
    grid-template-columns: 1fr;
  }
}

#masthead .mobile-menu-overlay.active {
  visibility: visible;
}

#masthead .mobile-menu-image {
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  #masthead .mobile-menu-image {
    display: none;
  }
}

#masthead .mobile-menu-image > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#masthead .mobile-menu-content {
  background-color: #014F39;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  padding: 4rem 5rem;
  position: relative;
}

@media (max-width: 768px) {
  #masthead .mobile-menu-content {
    padding: 4rem 2rem;
  }
}

#masthead .mobile-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

#masthead .mobile-menu-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  width: 200px;
  z-index: 2;
}

@media (max-width: 768px) {
  #masthead .mobile-menu-logo {
    width: 140px;
  }
}

#masthead .mobile-menu-logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: invert(0);
}

#masthead .mobile-menu-nav {
  width: 100%;
  display: flex;
}

#masthead .mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#masthead .mobile-menu-list li a {
  font-size: clamp(28px, 9vw, 50px);
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}

#masthead .mobile-menu-item {
  overflow: hidden;
}

#masthead .mobile-menu-link {
  opacity: 1;
  transition: opacity 0.3s ease;
}

#masthead .mobile-menu-link.hover-underline::after {
  bottom: 0px;
}

#masthead .mobile-menu-list:hover .mobile-menu-link {
  opacity: 0.4;
}

#masthead .mobile-menu-list .mobile-menu-link:hover {
  opacity: 1;
  color: #fff;
}

#masthead .mobile-menu-list.is-navigating .mobile-menu-link {
  opacity: 0.4;
}

#masthead .mobile-menu-list.is-navigating .mobile-menu-item.is-navigating-active .mobile-menu-link {
  opacity: 1;
  color: #fff;
}

#masthead .mobile-menu-list.is-navigating .mobile-menu-item.is-navigating-active .mobile-menu-link::after {
  animation: menu-loading-sweep 1.1s ease-in-out infinite;
}

#masthead .current-menu-item .mobile-menu-link::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

#masthead .mobile-menu-link-wrapper {
  overflow: hidden;
  display: inline-block;
}

footer {
  background-color: #014F39;
}

footer .logo-container a {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  line-height: 0.67;
  font-size: 8.4vw;
  transition: font-size 0.3s ease, padding 0.3s ease;
  text-align: left;
  white-space: nowrap;
  display: inline-block;
  letter-spacing: -1px;
}

@media (max-width: 768px) {
  footer .logo-container a {
    font-size: 19vw;
  }
}

.disabled-link {
  pointer-events: none;
  /* désactive le clic */
  cursor: default;
  /* curseur standard */
}

.disabled-link:hover {
  background-color: transparent;
  color: #fff;
}

a {
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Classes utilitaires */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-up {
  will-change: transform;
}

/* Text reveal animation with SplitText */

.lineParent,
.line-parent {
  overflow: hidden;
  padding: 0.15em 0;
  margin: -0.15em 0;
}

/* Hover underline effect - reusable class */

.hover-underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}

.hover-underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.hover-underline:not(:hover)::after {
  transform: scaleX(0);
  transform-origin: right;
}

@keyframes menu-loading-sweep {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }

  50% {
    transform: scaleX(1);
    transform-origin: left;
  }

  50.01% {
    transform-origin: right;
  }

  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* Reveal image animation */

.reveal {
  visibility: hidden;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.reveal img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform-origin: left;
  display: block;
}

/* Reveal ligne/bordure horizontale (voir initLineReveal) : scaleX 0 → 1 au
   scroll, dessinée de gauche à droite. État caché posé ici en CSS (pas en JS)
   pour éviter un flash de la ligne à pleine largeur avant l'exécution du JS,
   comme .reveal ci-dessus. */

.line-reveal {
  transform: scaleX(0);
  transform-origin: left center;
}

/* .villas-img-container a besoin de rester absolute inset-0 (empilement des
   .villa-img-slide par-dessus) : sans ce override, position:relative/width:100%
   ci-dessus l'emportent sur les utilitaires Tailwind .absolute/.inset-0
   (même spécificité, .reveal après dans le CSS compilé) et le conteneur
   s'effondre à height:0 (ses enfants absolus ne comptent plus dans son flow). */

.villas-img-container.reveal {
  position: absolute;
  width: auto;
}

/* FAQ + Famille hover - green wipe haut→bas / sortie bas */

.faq-item,
.famille-item {
  position: relative;
  overflow: hidden;
}

.faq-item::before,
.famille-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #014F39;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 0;
}

@media (hover: hover) and (pointer: fine) {
  .faq-item:hover::before,
  .famille-item:hover::before {
    transform: scaleY(1);
    transform-origin: top;
  }

  .faq-item:hover .faq-question span, .faq-item:hover .faq-answer p, .faq-item:hover .famille-question span, .faq-item:hover .famille-answer p,
  .famille-item:hover .faq-question span,
  .famille-item:hover .faq-answer p,
  .famille-item:hover .famille-question span,
  .famille-item:hover .famille-answer p {
    color: white;
  }

  .faq-item:hover .faq-icon span,
  .famille-item:hover .faq-icon span {
    background-color: white;
  }
}

.faq-item > *,
.famille-item > * {
  position: relative;
  z-index: 1;
}

.faq-item .faq-question span,
.faq-item .faq-answer p,
.faq-item .famille-question span,
.faq-item .famille-answer p,
.famille-item .faq-question span,
.famille-item .faq-answer p,
.famille-item .famille-question span,
.famille-item .famille-answer p {
  transition: all 0.3s ease;
}

.faq-item .faq-icon span:not(.faq-icon-v),
.famille-item .faq-icon span:not(.faq-icon-v) {
  transition: background-color 0.3s ease;
}

.faq-item .faq-icon-v,
.famille-item .faq-icon-v {
  transform: translateX(-50%) rotate(0deg);
  transition: background-color 0.3s ease, transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.faq-item:has(.faq-question[aria-expanded=true]) .faq-icon-v, .faq-item:has(.famille-question[aria-expanded=true]) .faq-icon-v,
.famille-item:has(.faq-question[aria-expanded=true]) .faq-icon-v,
.famille-item:has(.famille-question[aria-expanded=true]) .faq-icon-v {
  transform: translateX(-50%) rotate(90deg);
}

.card {
  background: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.newsletter-input ~ .newsletter-label {
  color: #8E8E8E;
}

.newsletter-input:focus ~ .newsletter-label {
  transform: translateY(-1rem) scale(0.75);
  transform-origin: left top;
}

.footer-block > * {
  width: -moz-fit-content;
  width: fit-content;
}

.wp-text-block-container .content li {
  list-style: disc;
  list-style-position: outside;
  margin-left: 1.5em;
  padding-left: 0;
  color: #000;
  line-height: 1;
}

@media (max-width: 768px) {
  .wp-text-block-container .content li {
    font-size: 14px;
  }
}

.wp-text-block-container .content li::marker {
  font-size: 1.5em;
}

/* Curseur d'attente pendant le chargement de page */

body.page-loading,
body.page-loading * {
  cursor: wait !important;
}

/* Icônes de police (voir img/icon/*.svg + npm run icons) plus épaisses -
   les glyphes générés par gulp-iconfont rendent souvent plus fins que
   l'aperçu SVG d'origine. Sur .icon (toutes) plutôt que par glyphe : ne pas
   mettre dans _icons.scss, ce fichier est régénéré à chaque npm run icons. */

.icon:before {
  -webkit-text-stroke: 0.5px currentColor;
  display: inline-block;
}

/* Icônes de réseaux sociaux (footer.php) : déjà des formes pleines dans leur
   SVG d'origine, contrairement aux icônes à traits fins ci-dessus - le
   stroke de 0.5px les rendait trop grasses. On l'annule pour celles-ci. */

.icon-facebook:before,
.icon-linkedin:before,
.icon-youtube:before {
  -webkit-text-stroke: 0;
}

/* Instagram et TripAdvisor : leur glyphe est fait d'anneaux fins (contour de
   l'appareil photo / contour des "yeux"), qui se brouillent à la taille
   minuscule du footer (anti-aliasing de la police) sans un peu de stroke
   pour renforcer le trait - contrairement à facebook/linkedin/youtube
   ci-dessus qui sont des formes pleines et n'en ont pas besoin. */

.icon-instagram:before,
.icon-tripadvisor:before {
  -webkit-text-stroke: 0.3px currentColor;
}

/* Liste "Accès rapide" (page-accueil.php $default_access_items) : icônes
   agrandies à 25px, au-dessus des 20px par défaut de .category-list-icon
   (voir _category-list.scss - même spécificité (.category-list
   .category-list-icon .icon:before) nécessaire ici pour la remplacer). */

.category-list .category-list-icon .icon-restaurant:before,
.category-list .category-list-icon .icon-spa:before,
.category-list .category-list-icon .icon-plante:before,
.category-list .category-list-icon .icon-bateau-a-voile:before {
  font-size: 28px;
}

/* rs_highlights() : les icônes SVG de cette liste sont dimensionnées via les
   classes Tailwind w-10 h-10 sur l'élément lui-même, ce qui ne fonctionne pas
   pour une icône de police (le glyphe est rendu par ::before, seul font-size
   le dimensionne) - voir rs-highlights.php. */

.highlight-item-icon-font:before {
  font-size: 40px;
  line-height: 1;
}

.hover\:border-cream:hover{
  --tw-border-opacity: 1;
  border-color: rgb(245 240 228 / var(--tw-border-opacity, 1));
}

.hover\:border-green:hover{
  --tw-border-opacity: 1;
  border-color: rgb(1 79 57 / var(--tw-border-opacity, 1));
}

.hover\:bg-green\/10:hover{
  background-color: rgb(1 79 57 / 0.1);
}

.hover\:bg-white\/20:hover{
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:text-green:hover{
  --tw-text-opacity: 1;
  color: rgb(1 79 57 / var(--tw-text-opacity, 1));
}

.hover\:ring-2:hover{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:ring-cream:hover{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 240 228 / var(--tw-ring-opacity, 1));
}

.group:hover .group-hover\:-translate-y-0\.5{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:opacity-100{
  opacity: 1;
}

@media (min-width: 640px){
  .sm\:text-base{
    font-size: 1rem;
  }

  .sm\:text-lg{
    font-size: 1.125rem;
  }
}

@media (min-width: 768px){
  .md\:left-10{
    left: 2.5rem;
  }

  .md\:right-5{
    right: 1.25rem;
  }

  .md\:top-10{
    top: 2.5rem;
  }

  .md\:top-5{
    top: 1.25rem;
  }

  .md\:order-1{
    order: 1;
  }

  .md\:order-2{
    order: 2;
  }

  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .md\:col-start-1{
    grid-column-start: 1;
  }

  .md\:col-start-2{
    grid-column-start: 2;
  }

  .md\:col-start-4{
    grid-column-start: 4;
  }

  .md\:mx-6{
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .md\:mb-0{
    margin-bottom: 0px;
  }

  .md\:mb-10{
    margin-bottom: 2.5rem;
  }

  .md\:mb-14{
    margin-bottom: 3.5rem;
  }

  .md\:mb-16{
    margin-bottom: 4rem;
  }

  .md\:mb-5{
    margin-bottom: 1.25rem;
  }

  .md\:mb-6{
    margin-bottom: 1.5rem;
  }

  .md\:ml-auto{
    margin-left: auto;
  }

  .md\:mt-10{
    margin-top: 2.5rem;
  }

  .md\:mt-16{
    margin-top: 4rem;
  }

  .md\:mt-4{
    margin-top: 1rem;
  }

  .md\:mt-6{
    margin-top: 1.5rem;
  }

  .md\:mt-8{
    margin-top: 2rem;
  }

  .md\:mt-auto{
    margin-top: auto;
  }

  .md\:block{
    display: block;
  }

  .md\:inline-block{
    display: inline-block;
  }

  .md\:flex{
    display: flex;
  }

  .md\:grid{
    display: grid;
  }

  .md\:hidden{
    display: none;
  }

  .md\:aspect-auto{
    aspect-ratio: auto;
  }

  .md\:h-12{
    height: 3rem;
  }

  .md\:h-5{
    height: 1.25rem;
  }

  .md\:h-\[100svh\]{
    height: 100svh;
  }

  .md\:h-\[380px\]{
    height: 380px;
  }

  .md\:h-\[60vh\]{
    height: 60vh;
  }

  .md\:h-auto{
    height: auto;
  }

  .md\:h-full{
    height: 100%;
  }

  .md\:max-h-\[100svh\]{
    max-height: 100svh;
  }

  .md\:min-h-0{
    min-height: 0px;
  }

  .md\:min-h-\[480px\]{
    min-height: 480px;
  }

  .md\:w-1\/2{
    width: 50%;
  }

  .md\:w-full{
    width: 100%;
  }

  .md\:min-w-\[280px\]{
    min-width: 280px;
  }

  .md\:columns-3{
    -moz-columns: 3;
         columns: 3;
  }

  .md\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:flex-col{
    flex-direction: column;
  }

  .md\:flex-wrap{
    flex-wrap: wrap;
  }

  .md\:items-end{
    align-items: flex-end;
  }

  .md\:justify-center{
    justify-content: center;
  }

  .md\:justify-between{
    justify-content: space-between;
  }

  .md\:gap-10{
    gap: 2.5rem;
  }

  .md\:gap-20{
    gap: 5rem;
  }

  .md\:gap-6{
    gap: 1.5rem;
  }

  .md\:gap-8{
    gap: 2rem;
  }

  .md\:gap-x-8{
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .md\:self-end{
    align-self: flex-end;
  }

  .md\:overflow-visible{
    overflow: visible;
  }

  .md\:p-5{
    padding: 1.25rem;
  }

  .md\:p-6{
    padding: 1.5rem;
  }

  .md\:p-8{
    padding: 2rem;
  }

  .md\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .md\:px-20{
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .md\:px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .md\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md\:py-5{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .md\:py-\[7rem\]{
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .md\:pb-10{
    padding-bottom: 2.5rem;
  }

  .md\:pb-20{
    padding-bottom: 5rem;
  }

  .md\:pb-3{
    padding-bottom: 0.75rem;
  }

  .md\:pb-5{
    padding-bottom: 1.25rem;
  }

  .md\:pb-\[7rem\]{
    padding-bottom: 7rem;
  }

  .md\:pl-10{
    padding-left: 2.5rem;
  }

  .md\:pt-0{
    padding-top: 0px;
  }

  .md\:pt-10{
    padding-top: 2.5rem;
  }

  .md\:pt-16{
    padding-top: 4rem;
  }

  .md\:pt-20{
    padding-top: 5rem;
  }

  .md\:pt-3{
    padding-top: 0.75rem;
  }

  .md\:pt-5{
    padding-top: 1.25rem;
  }

  .md\:text-right{
    text-align: right;
  }

  .md\:text-2xl{
    font-size: 1.5rem;
  }

  .md\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-\[clamp\(20px\2c 4vw\2c 64px\)\]{
    font-size: clamp(20px, 4vw, 64px);
  }

  .md\:text-base{
    font-size: 1rem;
  }

  .md\:text-lg{
    font-size: 1.125rem;
  }

  .md\:text-sm{
    font-size: 0.875rem;
  }

  .md\:text-xl{
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px){
  .lg\:mb-8{
    margin-bottom: 2rem;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:aspect-auto{
    aspect-ratio: auto;
  }

  .lg\:aspect-square{
    aspect-ratio: 1 / 1;
  }

  .lg\:h-auto{
    height: auto;
  }

  .lg\:h-full{
    height: 100%;
  }

  .lg\:h-screen{
    height: 100vh;
  }

  .lg\:w-1\/3{
    width: 33.333333%;
  }

  .lg\:w-\[280px\]{
    width: 280px;
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:py-5{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .lg\:pb-8{
    padding-bottom: 2rem;
  }

  .lg\:text-2xl{
    font-size: 1.5rem;
  }

  .lg\:text-3xl{
    font-size: 1.875rem;
  }

  .lg\:text-4xl{
    font-size: 2.25rem;
  }

  .lg\:text-base{
    font-size: 1rem;
  }

  .lg\:text-lg{
    font-size: 1.125rem;
  }

  .lg\:text-xl{
    font-size: 1.25rem;
  }
}

@media (min-width: 1280px){
  .xl\:max-h-screen{
    max-height: 100vh;
  }
}