:root {
   /* COLOR TOKEN */
   --color-background: #FBFBFB;
   --color-background-elevated: #EDEDED;
   --color-background-elevated-hover: #E4E4E4;
   --color-button-background-primary: #202020;
   --color-button-background-primary-hover: #545454;
   --color-button-text-primary: #FBFBFB;
   --color-button-background-secondary: #DEDEDE;
   --color-button-text-secondary: #202020;
   --color-divider: #DEDEDE;
   --color-text-primary: #202020;
   --color-text-secondary: #707070;
   --color-text-third: #BABABA;
   --color-focus: #202020;
   --color-primary: #202020;

   /* SPACE TOKEN */
   --space-none: 0;
   --space-xx-small: 2px;
   --space-x-small: 4px;
   --space-small: 8px;
   --space-regular: 16px;
   --space-medium: 24px;
   --space-large: 32px;
   --space-x-large: 48px;
   --space-xx-large: 64px;
   --space-xxx-large: 96px;
}

/* WINDOWS*/
html {
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}

*,:after,:before {
    -webkit-box-sizing:inherit;
    box-sizing:inherit
}

body {
   height: 100vh;
   margin: 0;
   padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
   font-family: UncutSans-Variable, sans-serif;
   font-feature-settings: 'dlig' on, 'salt' on, 'rvrn' on, 'ss01' on, 'ss02' on, 'ss03' on, 'ss06' on, 'ss07' on, 'ss08' on;
   font-size: 18px;
   font-weight: 400;
   line-height: 26px;
   color: var(--color-text-primary);
   background: var(--color-background);
}

/* COLOR */
.color-text-secondary {
   color: var(--color-text-secondary);
}

svg {
   fill: var(--color-text-primary);
}

/* TYPOGRAPHY */
@font-face {
   font-family: UncutSans-Variable;
   src: url(../assets/fonts/UncutSans-Variable.woff2) format("woff2");
   font-style: normal;
   font-feature-settings: 'dlig' on, 'salt' on, 'rvrn' on, 'ss01' on, 'ss02' on, 'ss03' on, 'ss06' on, 'ss07' on, 'ss08' on;
   font-display: fallback;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-family: UncutSans-Variable, sans-serif;
}

h1, .h1 { 
   margin: 0;
   font-size: 44px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

#page-categories-title {
   margin-bottom: var(--space-regular);
}

h2, .h2 {
   margin: 0;
   font-size: 36px;
   font-style: normal;
   font-weight: 400;
   line-height: 44px;
}

h3, .h3 {
   margin: var(--space-medium) 0 var(--space-regular) 0;
   font-size: 28px;
   font-style: normal;
   font-weight: 400;
   line-height: 120%;
}

h4, .h4 {
   font-size: 18px;
   font-weight: 500;
   margin: 0;
   margin-bottom: 0px;
   line-height: 26px;
   
}

p {
   line-height: 1.5;
   letter-spacing: 0px;
}

p strong, strong {
   font-family: UncutSans-Variable, sans-serif;
   font-weight: 600;
}

a {
   line-height: 1.4;
   letter-spacing: 0;
   text-decoration: underline;
   color: var(--color-text-primary);
}

a:hover {
   text-decoration: none;
}


/* BUTTON */
.btn {
   transition: all .1s ease-in-out;
   display: inline-block;
   vertical-align: middle;
   text-decoration: none;
   font-family: UncutSans-Variable, sans-serif;
   font-weight: 500;
   font-size: 18px;
   border-radius: 8px;
   padding: 12px 24px;
   border: none;
   cursor: pointer;
}

.btn-primary {
   background: var(--color-button-background-primary);
   color: var(--color-button-text-primary);
}

.btn-primary:hover {
   border-radius: 0px;
}

.btn-secondary {
   border: 2px solid;
   border-color: var(--color-text-primary);
   color: var(--color-text-primary);
}

/* VARIABLE LAYOUT */
.flex {
    display: flex;
    gap: var(--space-small);
    flex-direction: column;
}

.flex-width-1 {
    flex: 1;
}

.divider {
    width: 100%;
    max-width: calc(1240px - var(--space-large));
    height: 1px;
    margin: auto;
    background: var(--color-divider);
}


/* GENERIC */
main {
    padding-top: var(--space-large);
} 

.container {
   width: 100%;
   max-width: 1240px;
   margin: 0 auto;
   padding: var(--space-medium) var(--space-medium) var(--space-none) var(--space-medium);
}

.grid-3 {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-regular);
}

.grid-item li, .grid-cell-item li {
   break-inside: avoid;
   padding-bottom: var(--space-regular);
   width: 100%;
}

a.grid-item, a.grid-cell-item {
   display: flex;
   flex-direction: row;
   gap: var(--space-regular);
   height: 100%;
   padding: var(--space-regular);
   text-align: left;
   text-decoration: none;
   font-weight: 400;
   font-size: 18px;
   align-items: center;
   border: 1px solid var(--color-divider);
}

a.grid-item img {
   width: 24px;
   height: 24px;
}

a.grid-item div, a.grid-cell-item div {
   width: 100%;
}

.grid-item-label {
   display: block;
   width: 100%;
   line-height: 100%;
}

.grid-item-description {
   width: 100%;
   margin-top: var(--space-xx-small);
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
   font-size: 14px;
   font-weight: 400;
   color: var(--color-text-secondary);
}

a.grid-item svg {
   width: 24px;
   height: 24px;
}

.grid-cell-item svg {
   height: 100%
}

.cell {
   position: relative;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: normal;
   align-items: center;
   align-content: normal;
   gap: var(--space-regular);
   font-weight: 400;
   font-size: 18px;
   font-family: UncutSans-Variable, sans-serif;
   line-height: 1.4;
   letter-spacing: 0px; 
   text-decoration: none;
   text-rendering: optimizeLegibility;
   z-index: 10;
}

.cell-label {
   width: 100%;
}

.cell svg {
   min-width: 20px;
   min-height: 20px;
}

a.cell {
   padding-bottom: var(--space-small);
}

a.cell::before {
   content: '';
   width: calc(100% + 16px);
   height: 41px;
   position: absolute;
   top: -8px;
   left: -8px;
   border-radius: 8px;
   background: var(--color-background-elevated);
   display: none;
   z-index: -1;
}

a.cell:hover::before {
   display: block;
}

.tags {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-small);
}

.tag {
   padding: var(--space-xx-small) var(--space-small) var(--space-xx-small) var(--space-small);
   font-family: UncutSans-Variable, sans-serif;
   font-size: 14px;
   line-height: 18px;
   list-style: none;
   color: var(--color-primary);
   background-color: var(--color-background-elevated);
   border: 1px solid var(--color-divider);
   border-radius: 4px;
}

/* NAV */
header {
   display: none;
}

.nav {
   position: fixed;
   top: var(--space-regular); 
   left: var(--space-regular);
   z-index: 1000;
   width: calc(100% - 32px);
   height: auto;
   padding: var(--space-none);
   display: flex;
   flex-direction: column;
   gap: var(--space-small);
   color: var(--color-text-primary);
}

.nav-search-filters {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--space-small);
}

.nav-section {
   margin: 0;
}

.nav-section ul {
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: var(--space-regular);
   list-style: none;
}

#search-input {
   width: 100%;
   max-width: 380px;
   height: 45px;
   padding: var(--space-small) var(--space-small) var(--space-small) var(--space-x-large);
   font-family: UncutSans-Variable, sans-serif;
   font-size: 18px;
   font-weight: 400;
   line-height: 1.4;
   letter-spacing: 0px;
   color: var(--color-text-primary);
   background: rgba(251, 251, 251, 0.85);
   backdrop-filter: blur(10px) saturate(120%);
   -webkit-backdrop-filter: blur(10px) saturate(120%);
   box-shadow: 0 2px 2px rgba(0,0,0,0.15);
   border-radius: 100px;
   border: none;
   background-image: url('/assets/images/icon-search-dark.svg');
   background-repeat: no-repeat;
   background-size: 24px 24px;
   background-position: var(--space-regular) center;
}

#search-input::placeholder {
   color: var(--color-text-secondary);
} 

#search-input:focus {
   outline: 2px solid var(--color-text-primary);
}

.filter-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   gap: var(--space-small);
   overflow: hidden;
}

.tags-scroll {
   padding: var(--space-x-small) 0;
   display: flex;
   gap: var(--space-small);
   overflow-x: auto;
   scroll-behavior: smooth;
   scrollbar-width: none; /* Masque scrollbar Firefox */
}

.tags-scroll::-webkit-scrollbar {
   display: none; /* Masque scrollbar Chrome/Safari */
}

.filter-btn {
   flex: 0 0 auto;
   padding: var(--space-small) var(--space-regular) var(--space-small) var(--space-regular);
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
   font-family: UncutSans-Variable, sans-serif;
   font-size: 14px;
   color: var(--color-text-primary);
   background: rgba(251, 251, 251, 0.85);
   backdrop-filter: blur(10px) saturate(120%);
   -webkit-backdrop-filter: blur(10px) saturate(120%);
   box-shadow: 0 2px 2px rgba(0,0,0,0.15);
   border-radius: 100px;
   border: none;
}

.filter-btn.active {
   font-weight: 600;
   outline: 2px solid var(--color-text-primary);
}

.scroll-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: var(--color-background);
   border: none;
   font-size: 20px;
   color: var(--color-text-primary);
   cursor: pointer;
   padding: 6px 10px;
   border-radius: 50%;
   box-shadow: 0 2px 2px rgba(0,0,0,0.15);
   border: 1px solid rgba(0, 0, 0, 0.1);
   display: none;
   z-index: 2;
}

.scroll-btn.left {
   width: 39px;
   height: 39px;
   left: 0;
   padding: 4px 0 0 3px;
}
.scroll-btn.right {
   width: 39px;
   height: 39px;
   right: 0;
   padding: 4px 0 0 3px;
}

#nav-links {
   display: none;
}

#nav-links > li > .nav-item::before {
   display: none;
}

.nav-item {
   padding: var(--space-xx-small); 
   position: relative;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: normal;
   align-items: center;
   align-content: normal;
   gap: var(--space-small);
   font-weight: 500;
   font-size: 18px;
   font-family: UncutSans-Variable, sans-serif;
   line-height: 1.4;
   letter-spacing: 0px; 
   text-decoration: none;
   text-rendering: optimizeLegibility;
   z-index: 10;
}

.nav-item::before {
   content: '';
   width: calc(100% + 16px);
   height: 40px;
   position: absolute;
   top: -7px;
   left: -8px;
   border-radius: 8px;
   background: rgba(0, 0, 0, 0.06);
   /* display: none; */
   z-index: -1;
}

.nav-item:hover::before {
   background: rgba(0, 0, 0, 0.1);
}

.nav-item:hover {
   cursor: pointer;
}

.nav-item-icon-light-mode {
   display: inline;
}
.nav-item-icon-dark-mode{
   display: none;
}

.nav-item svg {
   min-width: 24px;
}

#clear-filters {
   position: absolute;
   top: 78px;
   width: 100%;
   height: 50px;
   z-index: 10;
   margin-top: var(--space-medium);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

.custom-svg-pin {
   background: none !important;
   border: none !important;
}

.leaflet-popup-content-wrapper {
   border-radius: 8px;
}

.nav-mobile {
   width: 100%;
   position: fixed;
   left: 0;
   bottom: 0;
   z-index: 9999;
   background: rgba(251, 251, 251, 0.85);
   backdrop-filter: blur(10px) saturate(120%);
   -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.nav-mobile > ul {
   width: 100%;
   margin: 0;
   padding: var(--space-none) var(--space-small) var(--space-none) var(--space-small);
   display: flex;
   gap: var(--space-small);
}

.nav-mobile > ul > li {
   margin: var(--space-none);
   padding: var(--space-none);
   display: flex;
   gap: 0;
   align-items: center;
   flex: 1;
   list-style: none;
}

.nav-mobile-item {
   width: 100%;
   padding: var(--space-small) var(--space-xx-small) var(--space-small) var(--space-xx-small); 
   position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
   align-content: normal;
   gap: 0;
   font-weight: 500;
   font-size: 12px;
   font-family: UncutSans-Variable, sans-serif;
   line-height: 1.4;
   letter-spacing: 0px; 
   text-decoration: none;
}

.nav-mobile-item svg {
   min-width: 24px;
}

.nav-mobile-item-icon {
   width: 24px;
   min-width: 24px;
   height: 24px;
   background-position: center;
   background-repeat: no-repeat;
}

.nav-item-label {
   width: 100%;
}

.nav-mobile-item-value {
   padding: var(--space-x-small)  var(--space-small) var(--space-x-small)  var(--space-small);
   font-size: 14px;
   color: var(--color-text-secondary);
   border: 1px solid var(--color-divider);
   border-radius: 100px;
}

/* HOME*/
#map {
   height: 100vh;
   width: 100%;
}

.leaflet-bar {
   display: none;
}

/* POPUPS */
.leaflet-popup-content-wrapper {
   margin: 0 !important;
   padding: var(--space-xx-small) !important;
   color: var(--color-text-primary);
   background: rgba(251, 251, 251, 0.85) !important;
   backdrop-filter: blur(10px) saturate(120%) !important;
   -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

.leaflet-popup-content {
   width: 240px !important;
   color: var(--color-text-secondary);
   font-family: UncutSans-Variable;
}

.leaflet-popup-tip {
   background: rgba(251, 251, 251, 0.85) !important;
   -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
   box-shadow: none !important;
}

.leaflet-container a.leaflet-popup-close-button {
   color: var(--color-text-primary) !important;
}

.popup-content {
   max-width: 260px;
}

.popup-content h4, .leaflet-popup-content a {
   margin-bottom: var(--space-regular) !important;
   font-size: 24px !important;
   font-weight: 400 !important;
   color: var(--color-text-primary) !important;
}

.popup-content h4 a, .leaflet-popup-content a {
   color: var(--color-text-primary) !important;
}

.popup-content h4 a:hover, .leaflet-popup-content a:hover {
   text-decoration: none !important;
}

.popup-content img {
   width: 100% !important;
   height: auto;
}

.popup-content p {
   margin-bottom: var(--space-regular);
   -webkit-line-clamp: 4 !important;
   font-family: UncutSans-Variable, sans-serif;
   font-size: 14px;
   color: var(--color-text-secondary);
}

.popup-content .tags {
   color: var(--color-primary) !important;
}

/* TRAVEL PAGE */
.travel-card {
   display: flex;
   flex-direction: column;
   gap: var(--space-regular);
   position: relative;
   text-decoration: none;
}

.travel-card-img {
   width: 100%;
   height: 130px;
   background-size: cover;
   background-position: center;
   position: relative;
}

.travel-card-icon {
   width: 32px;
   height: 32px;
   padding: var(--space-x-small) var(--space-x-small);
   position: absolute;
   left: var(--space-x-small);
   bottom: var(--space-x-small);
   background: rgba(251, 251, 251, 0.85);
   backdrop-filter: blur(10px) saturate(120%);
   -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* PLACE PAGE */
a.back-link {
   margin-bottom: var(--space-large);
   display: block;
   text-decoration: none;
}

a.back-link:hover {
   text-decoration: underline;
}

.post-header {
   width: 100%;
}

.post-header-content {
   width: 100%;;
}

.post-review-comment {
   max-width: 750px;
   margin: var(--space-medium) var(--space-none) var(--space-none) var(--space-none);
   font-size: 20px;
}

.post-map-container {
   border: 1px solid var(--color-divider);
}

ul.post-list-meta {
   width: 100%;
   margin: var(--space-none) var(--space-none) var(--space-none) var(--space-none);
   padding: var(--space-regular);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--space-large);
   list-style: none;
} 

ul.post-list-meta li {
   display: flex;
   gap: var(--space-small);
   color: var(--color-text-primary);
}

ul.post-list-meta li svg {
   min-width: 28px;
}

.related-travels {
   width: auto;
   height: 100%;
   padding: var(--space-medium);
   border: 1px solid var(--color-divider);
}

.related-travels ul {
   margin: var(--space-regular) var(--space-none) var(--space-none) var(--space-none);
   padding: var(--space-none);
   display: flex;
   flex-direction: column;
   gap: var(--space-regular);
}

.related-travels ul li {
   padding: var(--space-none) var(--space-xx-small) var(--space-small) var(--space-xx-small);
   list-style: none;
   border-bottom: 1px solid var(--color-divider);
}

.related-travels ul li:last-child {
   padding: var(--space-none) var(--space-xx-small) var(--space-none) var(--space-xx-small); 
   border-bottom: none;
}

.post-content p {
   max-width: 700px;
   margin-top: var(--space-medium);
}

.place-image {
   width: 100%;
   height: auto;
   object-fit: cover;
   margin: var(--space-medium) var(--space-none) var(--space-medium) var(--space-none);
}

.place-tags {
   margin: 20px 0;
   text-align: center;
}

#voyage-map {
   border: 1px solid var(--color-divider);
}

/* FOOTER */
#footer .divider {
    margin-bottom: var(--space-x-large);
}

#footer-btn {
    margin-top: var(--space-x-large);
}

.footer-about {
    margin-top: var(--space-xxx-large);
    padding: var(--space-medium) var(--space-medium) var(--space-regular) var(--space-medium);
    border: 1px solid var(--color-divider);
}

ul.footer-nav {
    padding: var(--space-none) var(--space-none) var(--space-regular) var(--space-none);
    list-style: none;
}

ul.footer-nav li {
    margin-bottom: var(--space-small);
}

.footer-legals {
    padding-top: var(--space-regular);
    border-top: 1px solid var(--color-divider);
}

/* RESPONSIVE */
@media screen and (min-width:768px) {
   /* TYPOGRAPHY */
   h1, .h1 { 
      font-size: 100px;
      font-style: normal;
      font-weight: 400;
      line-height: 120px;
   }
   
   h2, .h2 {
      font-size: 48px;
      font-style: normal;
      font-weight: 400;
      line-height: 54px;
   }

   h3, .h3 {
      font-size: 36px;
      font-style: normal;
      font-weight: 400;
   }

   /* VARIABLE LAYOUT */
   .flex {
      display: flex;
      gap: var(--space-x-large);
      flex-direction: row;
   }

   /* LAYOUT */
   main {
      padding-top: calc(var(--space-medium) + var(--space-xxx-large));
   }
   .container {
      padding: var(--space-x-large);
   }

   .grid-3 {
      grid-template-columns: repeat(3, 1fr);
      row-gap: var(--space-large);
      column-gap: var(--space-large);
   }

   a.grid-item {
      flex-direction: column;
      padding: var(--space-medium);
      font-size: 18px;
      text-align: center;
   }

   a.grid-item img, a.grid-cell-item img {
      width: 48px;
      height: 48px;
      margin: auto;
   }

   a.grid-item:hover, a.grid-cell-item:hover {
      background: var(--color-background-elevated);
   }

   a.grid-item svg {
      display: none;
   }

   /* NAV */
   header {
      display: block;
      padding: var(--space-none);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      background: rgba(251, 251, 251, 0.85);
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
   }

   header > .container {
      padding: var(--space-medium) var(--space-x-large) var(--space-medium) var(--space-x-large);
   }

   nav ul {
      margin: 0;
      padding: 0;
      display: flex;
      gap: var(--space-large);
   }

   nav ul li {
      list-style: none;
   }

   .nav-desktop-item {
      position: relative;
      flex: auto;
      font-weight: 500;
      font-size: 18px;
      font-family: UncutSans-Variable, sans-serif;
      line-height: 5;
      letter-spacing: 0px; 
      text-decoration: none;
   }

   .nav-desktop-item:hover {
      text-decoration: none;
   }

   .nav-desktop-item:hover::after {
      content:'';
      width: 100%;
      height: 2px;
      position: absolute;
      left: 0;
      bottom: -5px;
      background: var(--color-text-primary);
   }

   .nav-search-filters {
      flex-direction: row;
      gap: var(--space-medium);
   }

   .nav-mobile {
      display: none;
   }

   #nav-links {
      display: block;
      width: 100%;
      max-width: 380px;
      height: auto;
      padding: var(--space-small) var(--space-regular) var(--space-small) var(--space-regular);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: 0px;
      color: var(--color-text-primary);
      background: rgba(251, 251, 251, 0.85);
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
      box-shadow: 0 2px 2px rgba(0,0,0,0.15);
      border-radius: 8px;
      border: none;
   }

   #search-input {
      min-width: 380px;
   }

   #clear-filters {
      top: 29px;
      right: 0;
      max-width: 250px;
      height: 41px;
      padding: var(--space-none);
   }

   /* TRAVELS */
   .travel-card:hover .grid-item-label {
      text-decoration: underline;
   }
   /* PLACE */
   .related-travels {
      margin-top: var(--space-medium);
   }  

   /* FOOTER */
   #footer {
      padding-bottom: var(--space-x-large);
   }

   #footer .divider {
      margin-bottom: var(--space-xxx-large);
   }

   .footer-about {
      padding: var(--space-x-large) var(--space-x-large) var(--space-medium) var(--space-x-large);
      border: 1px solid var(--color-divider);
      gap: var(--space-xxx-large);
   }

   ul.footer-nav {
      padding: var(--space-none) var(--space-none) var(--space-regular) var(--space-none);
      list-style: none;
   }
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
   :root {
      /* COLOR TOKEN */
      --color-background: #202020;
      --color-background-elevated: #343434;
      --color-background-elevated-hover: #3D3D3D;
      --color-button-background-primary: #FBFBFB;
      --color-button-background-primary-hover: #DEDEDE;
      --color-button-text-primary: #343434;
      --color-button-background-secondary: #DEDEDE;
      --color-button-text-secondary: #202020;
      --color-divider: #414141;
      --color-text-primary: #FBFBFB;
      --color-text-secondary: #BABABA;
      --color-text-third: #DEDEDE;
      --color-focus: #FBFBFB;
      --color-primary: #FBFBFB;
      --color-brand: #FFBF00;
   }

   .leaflet-popup-content-wrapper {
      background: rgba(32, 32, 32, 0.85) !important;
      backdrop-filter: blur(10px) saturate(120%) !important;
      -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
   }

   .leaflet-popup-tip {
      background: rgba(32, 32, 32, 0.85) !important;
      -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
      box-shadow: none !important;
   }

   .nav-mobile {
      background: rgba(32, 32, 32, 0.85);
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
   }

   #search-input {
      background: rgba(32, 32, 32, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background-image: url('/assets/images/icon-search-light.svg');
      background-repeat: no-repeat;
      background-size: 24px 24px;
      background-position: var(--space-regular) center;
   }

   .nav-item::before {
      background: rgba(255, 255, 255, 0.1);
   }

   .nav-item-icon-light-mode {
      display: none;
   }
   .nav-item-icon-dark-mode {
      display: inline;
   }

   .filter-btn {
      background: rgba(32, 32, 32, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.1);
   }

   .scroll-btn {
      border: 1px solid rgba(255, 255, 255, 0.1);
   }

   #nav-links {
      background: rgba(32, 32, 32, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.1);
   }

   header {
      background: rgba(32, 32, 32, 0.85);
   }

   .travel-card-icon {
      background: rgba(32, 32, 32, 0.85);
   }
}

/* LAZY LOADING STYLES */
.lazy-load {
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
}

.lazy-load.loaded {
   opacity: 1;
}

.lazy-bg {
   background-color: var(--color-background-elevated);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   transition: opacity 0.3s ease-in-out;
}

.lazy-bg.loaded {
   opacity: 1;
}

.lazy-bg:not(.loaded) {
   opacity: 0.3;
}

/* Placeholder pour les images en cours de chargement */
.lazy-load:not(.loaded) {
   background-color: var(--color-background-elevated);
   background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
   0% {
      background-position: -200% 0;
   }
   100% {
      background-position: 200% 0;
   }
}