/* LOCAL PREVIEW — a restrained, editorial glass treatment for Spainbike. */

/* Detail-page galleries: a compact editorial frame, with adjacent photos peeking in. */
html body #stageApp .stage-gallery-block .gallery-carousel{
  width:100%!important;
  margin:0 auto!important;
  overflow:visible!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body #stageApp .stage-gallery-block .gallery-main{
  position:relative!important;
  z-index:1!important;
  width:min(100%,700px)!important;
  min-width:0!important;
  margin-inline:auto!important;
  overflow:hidden!important;
  border-radius:24px!important;
  box-shadow:0 20px 55px rgba(0,0,0,.08)!important;
}
html body #stageApp .stage-gallery-block .gallery-side{
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  left:50%!important;
  width:min(100%,700px)!important;
  height:100%!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:#e9e9e4!important;
  box-shadow:0 16px 38px rgba(0,0,0,.06)!important;
}
html body #stageApp .stage-gallery-block .gallery-side-prev{
  transform:translateX(calc(-150% - 50px))!important;
}
html body #stageApp .stage-gallery-block .gallery-side-next{
  transform:translateX(calc(50% + 50px))!important;
}
html body #stageApp .stage-gallery-block .gallery-side img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
html body #stageApp .stage-gallery-block[data-gallery-fit="contain"] .gallery-side img{
  object-fit:contain!important;
}
html body #stageApp .stage-gallery-block .gallery-thumbs{display:none!important}
html body #stageApp .stage-gallery-block[data-gallery-ratio="responsive"] .gallery-main,
html body #stageApp .stage-gallery-block[data-gallery-ratio="16:9"] .gallery-main{
  aspect-ratio:3/2!important;
  max-height:none!important;
}
@media(max-width:1200px){
  html body #stageApp .stage-gallery-block .gallery-main,
  html body #stageApp .stage-gallery-block .gallery-side{
    width:min(calc(100% - 96px),700px)!important;
  }
}
@media(max-width:760px){
  html body #stageApp .stage-gallery-block .gallery-main,
  html body #stageApp .stage-gallery-block .gallery-side{
    width:calc(100% - 64px)!important;
    border-radius:18px!important;
  }
  html body #stageApp .stage-gallery-block[data-gallery-ratio="responsive"] .gallery-main,
  html body #stageApp .stage-gallery-block[data-gallery-ratio="16:9"] .gallery-main{
    aspect-ratio:4/3!important;
  }
  html body #stageApp .stage-gallery-block .gallery-side-prev{
    transform:translateX(calc(-150% - 14px))!important;
  }
  html body #stageApp .stage-gallery-block .gallery-side-next{
    transform:translateX(calc(50% + 14px))!important;
  }
}

/* Restore the original full-width navigation geometry and keep it steady on scroll. */
html body .site-header,
html body .site-header.is-scrolled{
  position:fixed!important;
  inset:-16px 0 auto 0!important;
  width:100%!important;
  max-width:none!important;
  height:calc(var(--header-h,72px) + 16px)!important;
  margin:0!important;
  padding:16px max(24px,calc((100vw - var(--content-max,1240px))/2)) 0!important;
  border:0!important;
  border-radius:0!important;
  background:rgba(247,247,244,.78)!important;
  background-color:rgba(247,247,244,.78)!important;
  background-image:none!important;
  box-shadow:none!important;
  transform:none!important;
  -webkit-backdrop-filter:blur(16px)!important;
  backdrop-filter:blur(16px)!important;
  transition:none!important;
  animation:none!important;
}

/* Join the desktop menu to the header with one uninterrupted surface. */
@media(min-width:761px){
  html body .nav-submenu{
    top:calc(var(--site-header-offset,var(--header-h)) - 1px)!important;
    background:#f7f7f4!important;
    border-top:0!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
}

/* A quiet translucent CTA over the photographs, with enough contrast for easy reading. */
html body #app .hero .button.light,
html body #stageApp .stage-hero .button.light,
html body #stageApp .stage-hero-v11 .button.light{
  color:#111!important;
  background:rgba(255,255,255,.78)!important;
  border:0!important;
  outline:0!important;
  box-shadow:0 6px 20px rgba(0,0,0,.11)!important;
  -webkit-backdrop-filter:blur(8px) saturate(125%)!important;
  backdrop-filter:blur(8px) saturate(125%)!important;
  transition:background-color .2s ease,box-shadow .2s ease!important;
}
html body #app .hero .button.light:hover,
html body #app .hero .button.light:focus-visible,
html body #stageApp .stage-hero .button.light:hover,
html body #stageApp .stage-hero .button.light:focus-visible,
html body #stageApp .stage-hero-v11 .button.light:hover,
html body #stageApp .stage-hero-v11 .button.light:focus-visible{
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 8px 23px rgba(0,0,0,.14)!important;
}
html body #app .hero .button.light:focus-visible,
html body #stageApp .stage-hero .button.light:focus-visible,
html body #stageApp .stage-hero-v11 .button.light:focus-visible{
  text-decoration:underline!important;
  text-underline-offset:4px!important;
}

/* Photo-gallery arrows echo the translucent stage hero action. */
html body .gallery-arrow{
  background:rgba(255,255,255,.78)!important;
  color:#111!important;
  border:0!important;
  outline:0!important;
  box-shadow:0 4px 16px rgba(0,0,0,.12)!important;
  -webkit-backdrop-filter:blur(8px) saturate(125%)!important;
  backdrop-filter:blur(8px) saturate(125%)!important;
  transition:background-color .2s ease,box-shadow .2s ease!important;
}
html body .gallery-arrow:hover,
html body .gallery-arrow:focus-visible{
  background:#fff!important;
  color:#111!important;
  box-shadow:0 6px 18px rgba(0,0,0,.16)!important;
}
html body .gallery-arrow:focus-visible{transform:translateY(-50%) scale(1.08)!important}

/* Card edges stay crisp; only the information surface gets a subtle glass tint. */
html body #app .stage-card,
html body #stageApp .stage-card,
html body #app .related-card,
html body #stageApp .related-card{
  background:rgba(250,249,246,.78)!important;
  border-color:rgba(17,17,17,.09)!important;
  box-shadow:0 8px 24px rgba(20,20,16,.055)!important;
}
html body #app .stage-card .stage-info,
html body #stageApp .stage-card .stage-info{
  position:relative!important;
  z-index:1!important;
  width:calc(100% - 24px)!important;
  margin:-16px auto 18px!important;
  background:rgba(250,249,246,.78)!important;
  border:0!important;
  border-radius:14px!important;
  box-shadow:0 7px 20px rgba(20,20,16,.065)!important;
  -webkit-backdrop-filter:blur(8px) saturate(112%)!important;
  backdrop-filter:blur(8px) saturate(112%)!important;
}
/* Destination-card arrows use the same translucent, borderless finish as galleries. */
html body #app .stage-card .circle-arrow,
html body #stageApp .stage-card .circle-arrow{
  border:0!important;
  outline:0!important;
  background:rgba(255,255,255,.78)!important;
  color:#111!important;
  box-shadow:0 4px 16px rgba(0,0,0,.12)!important;
  -webkit-backdrop-filter:blur(8px) saturate(125%)!important;
  backdrop-filter:blur(8px) saturate(125%)!important;
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease!important;
}
html body #app .stage-card:hover .circle-arrow,
html body #app .stage-card>a:focus-visible .circle-arrow,
html body #stageApp .stage-card:hover .circle-arrow,
html body #stageApp .stage-card>a:focus-visible .circle-arrow{
  border:0!important;
  background:rgba(255,255,255,.94)!important;
  color:#111!important;
  box-shadow:0 6px 18px rgba(0,0,0,.16)!important;
  transform:scale(1.04)!important;
}
/* Stage arrows start on the same line as their destination labels. */
@media(min-width:901px){
  html body #app #stages-regular .stage-info .circle-arrow{
    margin-top:10px!important;
  }
}
html body #app .related-card>div:last-child,
html body #stageApp .related-card>div:last-child{
  position:relative!important;
  z-index:1!important;
  width:calc(100% - 24px)!important;
  margin:-16px 12px 18px!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:14px!important;
  background:rgba(250,249,246,.78)!important;
  box-shadow:0 7px 20px rgba(20,20,16,.065),inset 0 1px 0 rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:blur(8px) saturate(112%)!important;
  backdrop-filter:blur(8px) saturate(112%)!important;
}
/* Keep destination descriptions a step below section subtitles, while readable. */
html body:has(#app) #app#app#app#app#app .stage-card .stage-info p,
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp .stage-card .stage-info p{
  font-size:16px!important;
  line-height:1.5!important;
}
@media(max-width:900px){
  html body:has(#app) #app#app#app#app#app .stage-card .stage-info p,
  html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp .stage-card .stage-info p{
    font-size:15px!important;
  }
}
html body #app .stage-card:hover,
html body #stageApp .stage-card:hover,
html body #app .related-card:hover,
html body #stageApp .related-card:hover{
  box-shadow:0 14px 32px rgba(20,20,16,.09)!important;
}

/* Experience captions share the destination-card text size and reading alignment. */
html body.experience-v141 #app>section#experience .experience-v141-benefits .feature,
html body.experience-v141 #app>section#experience .experience-v141-benefits .feature>div{
  text-align:left!important;
}
html body:has(#app) #app#app#app#app#app>section#experience .experience-v141-benefits .experience-journey .feature p{
  font-size:16px!important;
  line-height:1.5!important;
  text-align:left!important;
}
/* Match the space between number, title and copy across all three captions. */
html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature{
  gap:7px!important;
}
html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature>div{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:7px!important;
}
html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature h3,
html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature p{
  margin:0!important;
}
@media(max-width:900px){
  html body:has(#app) #app#app#app#app#app>section#experience .experience-v141-benefits .experience-journey .feature p{
    font-size:15px!important;
  }
}

/* Anchor the experience copy over its photo so the glass treatment is visible. */
html body.experience-v141 #app>section#experience .experience-banner{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:clamp(520px,42vw,600px)!important;
  overflow:hidden!important;
  border-radius:20px!important;
  background:#292821!important;
}
html body.experience-v141 #app>section#experience .experience-photo-frame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:0!important;
}
html body.experience-v141 #app>section#experience .experience-banner-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:50% 74%!important;
  transform:none!important;
}
html body.experience-v141 #app>section#experience .experience-v141-benefits{
  position:absolute!important;
  z-index:3!important;
  left:clamp(18px,3.2vw,46px)!important;
  right:clamp(18px,3.2vw,46px)!important;
  bottom:22px!important;
  width:auto!important;
  margin:0!important;
  border:0!important;
  border-radius:16px!important;
  background:rgba(250,249,246,.78)!important;
  box-shadow:0 10px 28px rgba(20,20,16,.12)!important;
  -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
  backdrop-filter:blur(16px) saturate(120%)!important;
}
@media(min-width:901px){
  html body.experience-v141 #app>section#experience .experience-v141-benefits{
    padding:19px 32px!important;
  }
}
@media(max-width:900px){
  html body.experience-v141 #app>section#experience .experience-banner{
    height:clamp(560px,90vw,680px)!important;
  }
  html body.experience-v141 #app>section#experience .experience-banner-image{
    object-position:50% 72%!important;
    transform:scale(1.15)!important;
    transform-origin:50% 50%!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits{
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    border-radius:14px!important;
    background:rgba(250,249,246,.78)!important;
    -webkit-backdrop-filter:blur(14px) saturate(116%)!important;
    backdrop-filter:blur(14px) saturate(116%)!important;
  }
}

/* Give the calendar's row number and arrow room inside the hover surface. */
html body #app>section#calendrier #calendarList .calendar-row{
  padding-inline:18px!important;
}
@media(max-width:760px){
  html body #app>section#calendrier #calendarList .calendar-row{
    padding-inline:10px!important;
  }
}

@media(max-width:760px){
  html body .site-header,
  html body .site-header.is-scrolled{
    height:calc(var(--header-h,64px) + 16px)!important;
    padding-inline:14px!important;
    border-radius:0!important;
    transform:none!important;
  }
}

/* Phone layout: show the cyclists first, then one experience note at a time. */
.experience-mobile-controls,.itinerant-mobile-controls{display:none}
@media(max-width:760px){
  html body.experience-v141 #app>section#experience .experience-banner{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    overflow:hidden!important;
    background:#f7f7f4!important;
  }
  html body.experience-v141 #app>section#experience .experience-photo-frame{
    position:relative!important;
    inset:auto!important;
    flex:none!important;
    height:clamp(350px,100vw,460px)!important;
    overflow:hidden!important;
  }
  html body.experience-v141 #app>section#experience .experience-banner-image{
    object-position:50% 70%!important;
    transform:none!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    padding:18px 18px 14px!important;
    border:0!important;
    border-radius:0!important;
    background:#f7f7f4!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature{
    min-height:105px!important;
    border:0!important;
    padding:0!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits.has-mobile-carousel .experience-journey .feature:not(.is-active){
    display:none!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits.has-mobile-carousel .experience-journey .feature.is-active{
    display:grid!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature h3{
    font-size:16px!important;
  }
  .experience-mobile-controls,.itinerant-mobile-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    margin-top:12px;
  }
  .experience-mobile-controls button,.itinerant-mobile-controls button{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:0!important;
    border-radius:50%;
    background:#fff;
    color:#111;
    font:inherit;
    font-size:18px;
    box-shadow:0 2px 9px rgba(0,0,0,.06);
    cursor:pointer;
  }
  .experience-mobile-controls button:disabled,.itinerant-mobile-controls button:disabled{
    opacity:.35;
    cursor:default;
  }
  .experience-mobile-controls button:not(:disabled):hover,
  .itinerant-mobile-controls button:not(:disabled):hover{
    background:#111;
    color:#fff;
  }
  .experience-mobile-controls output,.itinerant-mobile-controls output{
    min-width:42px;
    text-align:center;
    color:#686868;
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
  }
  /* The original desktop grid stays intact; phones get a swipeable single card. */
  html body #app section#itinerants .stages-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:16px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  html body #app section#itinerants .stages-grid::-webkit-scrollbar{display:none}
  html body #app section#itinerants .stages-grid>.stage-card{
    flex:0 0 100%!important;
    width:100%!important;
    scroll-snap-align:center;
    transform:none!important;
  }
  html body #app section#itinerants .itinerant-mobile-carousel{position:relative}
  html body #app section#itinerants .itinerant-mobile-controls{
    position:absolute;
    z-index:3;
    top:var(--itinerant-arrow-top,100px);
    left:6px;
    right:6px;
    display:flex;
    justify-content:space-between;
    margin:0;
    transform:translateY(-50%);
    pointer-events:none;
  }
  html body #app section#itinerants .itinerant-mobile-controls button{
    width:42px;
    height:42px;
    pointer-events:auto;
    box-shadow:0 3px 12px rgba(0,0,0,.14);
  }
  html body #app section#itinerants .itinerant-mobile-controls button:disabled{opacity:.7}
  html body #app section#itinerants .itinerant-mobile-controls output{display:none}
  /* Calendar: destination first, centered; the date and starting price stay visible. */
  html body #app>section#calendrier #calendarList .calendar-row{
    grid-template-columns:22px minmax(0,1fr) 69px 16px!important;
    grid-template-rows:auto auto!important;
    column-gap:8px!important;
    row-gap:8px!important;
    min-height:102px!important;
    padding:14px 10px!important;
    align-items:center!important;
  }
  html body #app>section#calendrier #calendarList .calendar-row-index{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
  }
  html body #app>section#calendrier #calendarList .calendar-row-stage{
    grid-column:2!important;
    grid-row:1!important;
    align-items:center!important;
    text-align:center!important;
  }
  html body #app>section#calendrier #calendarList .calendar-row-stage strong{
    font-size:17px!important;
    line-height:1.15!important;
  }
  html body #app>section#calendrier #calendarList .calendar-row-date{
    grid-column:2!important;
    grid-row:2!important;
    align-items:center!important;
    text-align:center!important;
    gap:3px!important;
    font-size:11px!important;
  }
  html body #app>section#calendrier #calendarList .calendar-row-prefix{
    display:block!important;
    grid-column:3!important;
    grid-row:1!important;
    align-self:end!important;
    text-align:right!important;
    font-size:9px!important;
    white-space:normal!important;
  }
  html body #app>section#calendrier #calendarList .calendar-row-price{
    display:block!important;
    grid-column:3!important;
    grid-row:2!important;
    align-self:start!important;
    text-align:right!important;
    font-size:13px!important;
  }
  html body #app>section#calendrier #calendarList .calendar-row-arrow{
    grid-column:4!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    text-align:right!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body #app .hero .button.light,
  html body #stageApp .stage-hero .button.light,
  html body #stageApp .stage-hero-v11 .button.light{transition:none!important}
}

/* Keep editorial information grids consistent with the rounded cards and gallery frames. */
html body #stageApp .stage-organisation-v11 .stage-information-panel{
  border-radius:20px!important;
  overflow:hidden!important;
}
@media(min-width:901px){
  html body.experience-v141 #app>section#experience .experience-banner{
    width:min(100%,1040px)!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    margin-inline:auto!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .feature{
    padding-inline:clamp(16px,1.4vw,20px)!important;
  }
}
@media(max-width:760px){
  html body #stageApp .stage-organisation-v11 .stage-information-panel{
    border-radius:16px!important;
  }
}

/* Match the glass gallery-arrow treatment across cards and carousels. */
html body .stage-carousel-arrow,
html body .gallery-arrow,
html body .experience-gallery-arrow,
html body #app .stage-card .circle-arrow,
html body #stageApp .stage-card .circle-arrow,
html body .experience-mobile-controls button,
html body .itinerant-mobile-controls button{
  background:rgba(255,255,255,.78)!important;
  color:#111!important;
  border:0!important;
  outline:0!important;
  box-shadow:0 4px 16px rgba(0,0,0,.12)!important;
  -webkit-backdrop-filter:blur(8px) saturate(125%)!important;
  backdrop-filter:blur(8px) saturate(125%)!important;
  transition:background-color .2s ease,box-shadow .2s ease!important;
}
html body .gallery-arrow:hover,
html body .experience-gallery-arrow:hover,
html body .stage-carousel-arrow:hover:not(:disabled),
html body #app .stage-card .circle-arrow:hover,
html body #app .stage-card:hover .circle-arrow,
html body #app .stage-card>a:focus-visible .circle-arrow,
html body #stageApp .stage-card .circle-arrow:hover,
html body #stageApp .stage-card:hover .circle-arrow,
html body #stageApp .stage-card>a:focus-visible .circle-arrow,
html body .experience-mobile-controls button:not(:disabled):hover,
html body .itinerant-mobile-controls button:not(:disabled):hover{
  background:#fff!important;
  color:#111!important;
  box-shadow:0 6px 18px rgba(0,0,0,.16)!important;
  transform:none!important;
}

/* Keep stage and séjour cards on the same measured grid and card proportions. */
@media(min-width:861px){
  html body #app>section#itinerants .stages-grid{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:20px!important;
  }
  html body #app>section#itinerants .stages-grid>.stage-card{grid-column:span 2!important}
  html body #app>section#itinerants .stages-grid>.stage-card:first-child{grid-column:2/span 2!important}
  html body #app>section#itinerants .stages-grid>.stage-card:nth-child(2){grid-column:4/span 2!important}
  html body #app>section#itinerants .stages-grid>.stage-card:only-child{grid-column:3/span 2!important}
  html body #app>section#itinerants .stage-image{aspect-ratio:16/9!important}
  html body #app>section#itinerants .stage-info{
    min-height:164px!important;
    padding:20px!important;
    align-items:flex-start!important;
  }
  html body #app>section#itinerants .stage-info h3{
    min-height:2em!important;
    font-size:clamp(23px,2.15vw,30px)!important;
  }
  html body #app>section#itinerants .stage-info p{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    font-size:14px!important;
    line-height:1.4!important;
  }
  html body #app>section#itinerants .stage-carousel-track>.stage-card{
    flex-basis:calc((100% - 54px)/3.25)!important;
  }
}

/* Put gallery controls in the narrow seams between photos; never shift on hover/click. */
html body #stageApp .stage-gallery-block .gallery-main{overflow:visible!important}
html body #stageApp .stage-gallery-block .gallery-main img{border-radius:24px!important}
html body #stageApp .stage-gallery-block .gallery-main .gallery-arrow{
  transform:translateY(-50%)!important;
  transition:background-color .2s ease,box-shadow .2s ease!important;
}
html body #stageApp .stage-gallery-block .gallery-main .gallery-prev{left:-50px!important}
html body #stageApp .stage-gallery-block .gallery-main .gallery-next{right:-50px!important}
html body #stageApp .stage-gallery-block .gallery-main .gallery-arrow:hover,
html body #stageApp .stage-gallery-block .gallery-main .gallery-arrow:focus-visible{
  transform:translateY(-50%)!important;
}
@media(max-width:760px){
  html body #stageApp .stage-gallery-block .gallery-main img{border-radius:18px!important}
  html body #stageApp .stage-gallery-block .gallery-main .gallery-prev{left:-28px!important}
  html body #stageApp .stage-gallery-block .gallery-main .gallery-next{right:-28px!important}
}

/* L’expérience: a quiet editorial split, with the ride on the right and three
   evenly paced notes on the left. The phone carousel keeps its own layout. */
@media(min-width:1101px){
  html body.experience-v141 #app>section#experience .experience-banner{
    display:grid!important;
    grid-template-columns:minmax(0,.54fr) minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:20px!important;
    background:#f0efe9!important;
  }
  html body.experience-v141 #app>section#experience .experience-photo-frame{
    position:relative!important;
    inset:auto!important;
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-height:420px!important;
    overflow:hidden!important;
  }
  html body.experience-v141 #app>section#experience .experience-banner-image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:var(--experience-desktop-position,50% 73%)!important;
    transform:none!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits{
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:1!important;
    align-self:stretch!important;
    display:flex!important;
    width:100%!important;
    height:100%!important;
    min-height:420px!important;
    margin:0!important;
    padding:26px clamp(24px,2.6vw,38px)!important;
    border:0!important;
    border-radius:0!important;
    background:#f0efe9!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    width:100%!important;
    min-height:100%!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .feature{
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    align-items:center!important;
    gap:12px!important;
    min-width:0!important;
    padding:15px 0!important;
    border:0!important;
    border-bottom:1px solid rgba(17,17,17,.12)!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .feature:last-child{
    border-bottom:0!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .feature>span{
    align-self:start!important;
    padding-top:3px!important;
    font-size:10px!important;
    line-height:1.3!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .feature>div{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    min-width:0!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .feature h3{
    font-size:17px!important;
    line-height:1.22!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .feature p{
    font-size:14px!important;
    line-height:1.45!important;
  }
  html body.experience-v141 #app>section#experience .experience-gallery-controls{
    left:calc(35.08% + 14px)!important;
    right:14px!important;
  }
}

/* Slightly tighten the side-photo rhythm and keep the focal group optically centered. */
html body #stageApp .stage-gallery-block .gallery-side-prev{
  transform:translateX(calc(-150% - 22px))!important;
}
html body #stageApp .stage-gallery-block .gallery-side-next{
  transform:translateX(calc(50% + 22px))!important;
}
@media(max-width:760px){
  html body #stageApp .stage-gallery-block .gallery-side-prev{
    transform:translateX(calc(-150% - 12px))!important;
  }
  html body #stageApp .stage-gallery-block .gallery-side-next{
    transform:translateX(calc(50% + 12px))!important;
  }
}
@media(min-width:1101px){
  html body.experience-v141 #app>section#experience .experience-banner-image{
    transform:scale(1.10)!important;
    transform-origin:50% 50%!important;
  }
}
@media(max-width:1100px){
  html body.experience-v141 #app>section#experience .experience-banner-image{
    transform:scale(1.08)!important;
    transform-origin:50% 50%!important;
  }
}

/* Match itinerary cards exactly to the stage grid and its left alignment. */
@media(min-width:861px){
  html body #app>section#itinerants .stages-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:20px!important;
  }
  html body #app>section#itinerants .stages-grid>.stage-card,
  html body #app>section#itinerants .stages-grid>.stage-card:first-child,
  html body #app>section#itinerants .stages-grid>.stage-card:nth-child(2){
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
  }
}

/* Share one translucent, borderless treatment across public-site buttons. */
html body:has(#app) #app button:not(.menu),
html body:has(#stageApp) #stageApp button:not(.menu),
html body:has(#app) #app a.button,
html body:has(#stageApp) #stageApp a.button,
html body .footer-newsletter-trigger,
html body .newsletter-dialog button{
  color:#111!important;
  background:rgba(255,255,255,.78)!important;
  border:0!important;
  outline:0!important;
  box-shadow:0 4px 16px rgba(0,0,0,.12)!important;
  -webkit-backdrop-filter:blur(8px) saturate(125%)!important;
  backdrop-filter:blur(8px) saturate(125%)!important;
  transition:background-color .2s ease,box-shadow .2s ease!important;
}
@media(hover:hover){
  html body:has(#app) #app button:not(.menu):hover:not(:disabled),
  html body:has(#stageApp) #stageApp button:not(.menu):hover:not(:disabled),
  html body:has(#app) #app a.button:hover,
  html body:has(#stageApp) #stageApp a.button:hover,
  html body .footer-newsletter-trigger:hover,
  html body .newsletter-dialog button:hover:not(:disabled){
    color:#111!important;
    background:#fff!important;
    box-shadow:0 6px 18px rgba(0,0,0,.16)!important;
  }
}
html body:has(#app) #app button:not(.menu):focus-visible,
html body:has(#stageApp) #stageApp button:not(.menu):focus-visible,
html body:has(#app) #app a.button:focus-visible,
html body:has(#stageApp) #stageApp a.button:focus-visible,
html body .footer-newsletter-trigger:focus-visible,
html body .newsletter-dialog button:focus-visible{
  outline:2px solid rgba(17,17,17,.72)!important;
  outline-offset:3px!important;
}

/* Put navigation in a small floating pill below the photo, not across it. */
html body #stageApp .stage-gallery-block .gallery-navigation{
  position:relative!important;
  z-index:4!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:0!important;
  width:224px!important;
  box-sizing:border-box!important;
  max-width:calc(100% - 24px)!important;
  margin:22px auto 0!important;
  padding:5px 8px!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.12)!important;
  -webkit-backdrop-filter:blur(12px) saturate(125%)!important;
  backdrop-filter:blur(12px) saturate(125%)!important;
}
html body #stageApp .stage-gallery-block .gallery-navigation .gallery-arrow{
  position:static!important;
  inset:auto!important;
  flex:0 0 32px!important;
  width:32px!important;
  height:32px!important;
  padding:0!important;
  transform:none!important;
  font-size:16px!important;
  box-shadow:none!important;
}
html body #stageApp .stage-gallery-block .gallery-dots{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  flex:0 0 132px!important;
  width:132px!important;
  max-width:132px!important;
  overflow:hidden!important;
}
html body #stageApp .stage-gallery-block .gallery-dot{
  display:block!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  flex:0 0 5px!important;
  width:5px!important;
  height:5px!important;
  border-radius:999px!important;
  background:rgba(17,17,17,.28)!important;
  transition:flex-basis .2s ease,background-color .2s ease!important;
}
html body #stageApp .stage-gallery-block .gallery-dot.is-active{
  flex-basis:15px!important;
  background:#111!important;
}
html body:has(#stageApp) #stageApp .stage-gallery-block button.gallery-dot{
  background:rgba(17,17,17,.28)!important;
}
html body:has(#stageApp) #stageApp .stage-gallery-block button.gallery-dot.is-active{
  background:#111!important;
}

/* Native horizontal scrolling carries trackpad momentum and settles on each photo. */
html body #stageApp .stage-gallery-block .gallery-carousel{
  overflow:visible!important;
}
@media(min-width:761px){
  html body #stageApp .stage-gallery-block,
  html body #stageApp .stage-gallery-block.hotel-gallery-block{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
  }
}
html body #stageApp .stage-gallery-block .gallery-track{
  --gallery-slide-width:min(650px,calc(100vw - 96px));
  display:flex!important;
  align-items:stretch!important;
  gap:18px!important;
  width:100vw!important;
  padding:0 max(0px,calc((100vw - var(--gallery-slide-width))/2))!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;
  scroll-padding-inline:max(0px,calc((100vw - var(--gallery-slide-width))/2))!important;
  scroll-behavior:auto!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html body #stageApp .stage-gallery-block .gallery-track::-webkit-scrollbar{display:none!important}
html body #stageApp .stage-gallery-block .gallery-slide{
  position:relative!important;
  flex:0 0 var(--gallery-slide-width)!important;
  min-width:0!important;
  overflow:hidden!important;
  aspect-ratio:3/2!important;
  scroll-snap-align:center!important;
  scroll-snap-stop:always!important;
  border-radius:24px!important;
  background:#e9e9e4!important;
  box-shadow:none!important;
}
html body #stageApp .stage-gallery-block .gallery-slide>img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
html body #stageApp .stage-gallery-block[data-gallery-fit="contain"] .gallery-slide>img{
  object-fit:contain!important;
}
html body #stageApp .stage-gallery-block[data-gallery-ratio="4:3"] .gallery-slide{aspect-ratio:4/3!important}
html body #stageApp .stage-gallery-block[data-gallery-ratio="1:1"] .gallery-slide{aspect-ratio:1/1!important}
html body #stageApp .stage-gallery-block[data-gallery-ratio="3:2"] .gallery-slide{aspect-ratio:3/2!important}
html body #stageApp .stage-gallery-block[data-gallery-ratio="16:9"] .gallery-slide{aspect-ratio:3/2!important}
@media(max-width:760px){
  html body #stageApp .stage-gallery-block .gallery-track{
    --gallery-slide-width:min(82vw,340px);
    gap:12px!important;
    padding-inline:calc((100vw - var(--gallery-slide-width))/2)!important;
    scroll-padding-inline:calc((100vw - var(--gallery-slide-width))/2)!important;
  }
  html body #stageApp .stage-gallery-block .gallery-navigation{
    margin-top:16px!important;
  }
  html body #stageApp .stage-gallery-block,
  html body #stageApp .stage-gallery-block.hotel-gallery-block{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
  }
  html body #stageApp .stage-gallery-block .gallery-slide{
    aspect-ratio:4/3!important;
    border-radius:18px!important;
  }
  html body #stageApp .stage-gallery-block[data-gallery-ratio="3:2"] .gallery-slide{aspect-ratio:3/2!important}
  html body #stageApp .stage-gallery-block[data-gallery-ratio="4:3"] .gallery-slide{aspect-ratio:4/3!important}
  html body #stageApp .stage-gallery-block[data-gallery-ratio="1:1"] .gallery-slide{aspect-ratio:1/1!important}
  html body #stageApp .stage-gallery-block[data-gallery-ratio="16:9"] .gallery-slide{aspect-ratio:4/3!important}
}

/* Align card arrows with the top of each destination title. */
html body #app #stages-regular .stage-info .circle-arrow,
html body #stageApp #stages-regular .stage-info .circle-arrow{
  margin-top:31px!important;
}
html body #app #itinerants .stage-info .circle-arrow,
html body #stageApp #itinerants .stage-info .circle-arrow{
  margin-top:8px!important;
}

/* Keep the mobile itinerary carousel's card shadow visible outside its scrollport. */
@media(max-width:760px){
  html body #app section#itinerants .itinerant-mobile-carousel{
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
  }
  html body #app section#itinerants .stages-grid{
    width:calc(100% + 32px)!important;
    margin:-52px -16px -72px!important;
    padding:52px 16px 72px!important;
    scroll-padding-inline:16px!important;
  }
}

@media(max-width:760px){
  html body:has(#app) #app>section#calendrier.dates-section .calendar-filter{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding-block:8px!important;
    line-height:1.2!important;
  }
}

/* Give experience photos the same mobile frame as the destination galleries. */
@media(max-width:760px){
  html body.experience-v141 #app>section#experience .experience-gallery-track{
    --experience-slide-width:min(82vw,340px);
    gap:12px!important;
  }
  html body.experience-v141 #app>section#experience .experience-gallery-slide{
    flex:0 0 var(--experience-slide-width)!important;
    aspect-ratio:4/3!important;
    border-radius:18px!important;
  }
  html body.experience-v141 #app>section#experience .experience-gallery-slide img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}

html body #app #calendrier #calendarList .destination-calendar-heading h3,
html body #app #calendrier #calendarList .destination-calendar-heading>p:not(.destination-calendar-region){
  text-align:center!important;
}

/* Stages and séjours share one exact card edge and shadow treatment. */
html body #app section#stages-regular .stage-card,
html body #app section#itinerants .stage-card{
  border-color:#dcdcd6!important;
  box-shadow:0 8px 24px rgba(20,20,16,.055)!important;
}

/* Pair the two consent choices at the same rhythm as the published form. */
@media(min-width:761px){
  html body #stageApp .booking-form-wide .booking-newsletter-consent{
    margin-top:-12px!important;
  }
}
html body #app section#stages-regular .stage-card .stage-info,
html body #app section#itinerants .stage-card .stage-info{
  box-shadow:0 7px 20px rgba(20,20,16,.065)!important;
}
html body #app section#stages-regular .stage-card:hover,
html body #app section#itinerants .stage-card:hover{
  box-shadow:0 14px 32px rgba(20,20,16,.09)!important;
}

/* Mobile experience: crop closer to the riders and present each note as a compact card. */
@media(max-width:760px){
  html body.experience-v141 #app>section#experience .experience-banner{
    gap:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  html body.experience-v141 #app>section#experience .experience-photo-frame{
    height:clamp(270px,78vw,320px)!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  html body.experience-v141 #app>section#experience .experience-banner-image{
    object-position:var(--experience-mobile-x,50%) var(--experience-mobile-y,50%)!important;
    transform:scale(var(--experience-mobile-zoom,1.75)) translateY(var(--experience-mobile-shift-y,-21.5%))!important;
    transform-origin:50% 50%!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits{
    z-index:3!important;
    width:calc(100% - 24px)!important;
    min-height:0!important;
    margin:-22px auto 0!important;
    padding:17px 18px 14px!important;
    border:1px solid rgba(17,17,17,.08)!important;
    border-radius:16px!important;
    background:rgba(250,249,246,.96)!important;
    box-shadow:0 10px 28px rgba(20,20,16,.10)!important;
    -webkit-backdrop-filter:blur(12px) saturate(116%)!important;
    backdrop-filter:blur(12px) saturate(116%)!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature,
  html body.experience-v141 #app>section#experience .experience-v141-benefits.has-mobile-carousel .experience-journey .feature.is-active{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:5px!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    text-align:left!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits.has-mobile-carousel .experience-journey .feature:not(.is-active){
    display:none!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature>span{
    align-self:flex-start!important;
    padding:0!important;
    color:#777!important;
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:.14em!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature>div{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:6px!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature h3{
    margin:0!important;
    font-size:17px!important;
    line-height:1.25!important;
    text-align:left!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature p{
    margin:0!important;
    font-size:14px!important;
    line-height:1.45!important;
    text-align:left!important;
  }
  html body.experience-v141 #app>section#experience .experience-mobile-controls{
    width:max-content!important;
    justify-content:center!important;
    gap:8px!important;
    margin:14px 0 0 auto!important;
    padding:3px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.72)!important;
  }
  html body.experience-v141 #app>section#experience .experience-mobile-controls button{
    width:32px!important;
    height:32px!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 2px 8px rgba(0,0,0,.08)!important;
  }
  html body.experience-v141 #app>section#experience .experience-mobile-controls output{
    min-width:48px!important;
    font-size:10px!important;
  }
}

/* Keep gallery labels on the same content axis as the stage copy, even when
   the image rail itself runs full bleed. */
html body #stageApp .stage-gallery-block>.section-kicker{
  width:min(calc(100% - 48px),var(--max,1240px))!important;
  max-width:var(--max,1240px)!important;
  margin-inline:auto!important;
  gap:12px!important;
}
html body #stageApp .stage-gallery-block>.section-kicker>span:first-child{
  min-width:0!important;
  flex:1 1 auto!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
html body #stageApp .stage-gallery-block>.section-kicker>.gallery-counter{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}

/* Mobile only: line up the card arrows with the destination title in both
   carousels, rather than letting each card type drift to a different height. */
@media(max-width:760px){
  html body #app #stages-regular .stage-info .circle-arrow{
    align-self:flex-start!important;
    margin-top:31px!important;
  }
  html body #app #itinerants .stage-info .circle-arrow{
    align-self:flex-start!important;
    margin-top:7px!important;
  }
  html body #stageApp .stage-gallery-block>.section-kicker{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-inline:auto!important;
    gap:10px!important;
    align-items:flex-start!important;
    font-size:9px!important;
    line-height:1.35!important;
    letter-spacing:.13em!important;
  }
}

/* The mobile experience note floats inside the lower edge of the photo. */
@media(max-width:760px){
  html body.experience-v141 #app>section#experience .experience-banner{
    position:relative!important;
    display:block!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits{
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    width:auto!important;
    margin:0!important;
    padding:14px 16px 12px!important;
    background:rgba(250,249,246,.93)!important;
  }
  html body.experience-v141 #app>section#experience .experience-mobile-controls{
    margin-top:10px!important;
  }
}

/* Restore the quiet calendar disclosure row and black form submit buttons on
   every viewport. */
html body:has(#app) #app>section#calendrier.dates-section #calendarList .calendar-more-toggle{
  background:transparent!important;
  color:#222!important;
  border:0!important;
  border-top:1px solid #d8d8d1!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body:has(#app) #app>section#calendrier.dates-section #calendarList .calendar-more-toggle:hover,
html body:has(#app) #app>section#calendrier.dates-section #calendarList .calendar-more-toggle:focus-visible{
  background:transparent!important;
  color:#111!important;
  box-shadow:none!important;
}
html body:has(#app) #app>section#contact #contactForm>.button,
html body:has(#stageApp) #stageApp>.booking-v11 #bookForm>.booking-submit>.button,
html body:has(#stageApp) #stageApp .waitlist-form>.button,
html body .newsletter-dialog .newsletter-dialog__form>.newsletter-dialog__submit{
  color:#fff!important;
  background:#111!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body:has(#app) #app>section#contact #contactForm>.button:hover:not(:disabled),
html body:has(#stageApp) #stageApp>.booking-v11 #bookForm>.booking-submit>.button:hover:not(:disabled),
html body:has(#stageApp) #stageApp .waitlist-form>.button:hover:not(:disabled),
html body .newsletter-dialog .newsletter-dialog__form>.newsletter-dialog__submit:hover:not(:disabled){
  color:#fff!important;
  background:#111!important;
}

/* The footer newsletter action behaves like its neighboring text links. */
html body .footer-main .footer-newsletter-trigger{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:block!important;
  width:auto!important;
  height:18px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#c5c5c5!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  font:inherit!important;
  font-size:13px!important;
  line-height:18px!important;
  text-align:left!important;
  transform:none!important;
  transition:color .15s ease!important;
}
html body .footer-main .footer-newsletter-trigger:hover,
html body .footer-main .footer-newsletter-trigger:focus-visible{
  color:#fff!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}

/* Mobile calendar: give each departure a clear date, destination and price hierarchy. */
@media(max-width:760px){
  html body #app>section#calendrier.dates-section .calendar-controls{
    column-gap:10px!important;
    row-gap:10px!important;
    margin:20px 0 22px!important;
  }
  html body #app>section#calendrier.dates-section .calendar-availability-key{
    column-gap:14px!important;
    row-gap:10px!important;
    margin-bottom:22px!important;
  }
  html body #app>section#calendrier.dates-section #calendarList .calendar-row{
    grid-template-columns:24px minmax(0,1fr) 66px 18px!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:9px!important;
    min-height:116px!important;
    padding:16px 0!important;
    align-items:center!important;
  }
  html body #app>section#calendrier.dates-section #calendarList .calendar-row-index{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:start!important;
    margin-top:2px!important;
  }
  html body #app>section#calendrier.dates-section #calendarList .calendar-row-date{
    grid-column:2!important;
    grid-row:1!important;
    align-items:flex-start!important;
    text-align:left!important;
    gap:5px!important;
    font-size:12px!important;
    line-height:1.3!important;
  }
  html body #app>section#calendrier.dates-section #calendarList .calendar-row-stage{
    grid-column:2!important;
    grid-row:2!important;
    align-items:flex-start!important;
    text-align:left!important;
    gap:4px!important;
  }
  html body #app>section#calendrier.dates-section #calendarList .calendar-row-stage strong{
    font-size:17px!important;
    line-height:1.12!important;
  }
  html body #app>section#calendrier.dates-section #calendarList .calendar-row-stage small{
    font-size:11px!important;
    line-height:1.35!important;
  }
  html body #app>section#calendrier.dates-section #calendarList .calendar-row-prefix{
    display:block!important;
    grid-column:3!important;
    grid-row:1!important;
    align-self:end!important;
    text-align:right!important;
    font-size:9px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
  }
  html body #app>section#calendrier.dates-section #calendarList .calendar-row-price{
    display:block!important;
    grid-column:3!important;
    grid-row:2!important;
    align-self:start!important;
    text-align:right!important;
    font-size:14px!important;
    line-height:1.2!important;
  }
  html body #app>section#calendrier.dates-section #calendarList .calendar-row-arrow{
    grid-column:4!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
    text-align:right!important;
  }
}

/* Calendar filters keep the quiet section color; the selected view stays black. */
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter{
  background:transparent!important;
  color:#555!important;
  border:1px solid #c9c9c2!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease!important;
}
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter:hover:not(.is-active){
  background:transparent!important;
  color:#111!important;
  border-color:#111!important;
  box-shadow:none!important;
  transform:none!important;
}
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active:hover{
  background:#111!important;
  color:#fff!important;
  border-color:#111!important;
  box-shadow:none!important;
  transform:none!important;
}

/* Interactive calendar and newsletter surfaces keep the same pointer over
   their text, padding and nested elements. */
html body #app #calendrier button:not(:disabled),
html body #app #calendrier button:not(:disabled) *,
html body #app #calendrier #calendarList a,
html body #app #calendrier #calendarList a *,
html body #app #calendrier #calendarList summary,
html body #app #calendrier #calendarList summary *,
html body .footer-main .footer-newsletter-trigger,
html body .footer-main .footer-newsletter-trigger *{
  cursor:pointer!important;
}

/* The navigation controls stay at the middle of the photo on both card types. */
@media(max-width:760px){
  html body #app #stages-regular .stage-carousel-arrow{
    top:var(--stage-arrow-top,100px)!important;
    transform:translateY(-50%)!important;
  }
  html body #app #stages-regular .stage-carousel-arrow:hover,
  html body #app #stages-regular .stage-carousel-arrow:focus-visible,
  html body #app #stages-regular .stage-carousel-arrow:active{
    transform:translateY(-50%)!important;
  }
  html body #app #itinerants .itinerant-mobile-controls,
  html body #app #itinerants .itinerant-mobile-controls:hover{
    transform:translateY(-50%)!important;
  }
}

/* Keep the phone crop and put all three editorial notes below the image. */
@media(max-width:760px){
  html body.experience-v141 #app>section#experience .experience-banner{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    overflow:visible!important;
  }
  html body.experience-v141 #app>section#experience .experience-photo-frame{
    border-radius:16px 16px 0 0!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:4px 18px!important;
    border:1px solid rgba(17,17,17,.08)!important;
    border-top:0!important;
    border-radius:0 0 16px 16px!important;
    background:#f0efe9!important;
    box-shadow:0 8px 24px rgba(20,20,16,.055)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature{
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
    min-height:0!important;
    padding:14px 0!important;
    border:0!important;
    border-bottom:1px solid rgba(17,17,17,.12)!important;
  }
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature:last-child{
    border-bottom:0!important;
  }
  html body.experience-v141 #app>section#experience .experience-mobile-controls{
    display:none!important;
  }
}

/* Keep these controls above adjacent layers so the pointer covers their full hit area. */
html body #app #calendrier .calendar-controls .calendar-filter,
html body .footer-main .footer-identity .footer-newsletter-trigger{
  position:relative!important;
  z-index:2!important;
  cursor:pointer!important;
}
html body #app #calendrier .calendar-controls .calendar-filter:is(:hover,:focus-visible,:active),
html body .footer-main .footer-identity .footer-newsletter-trigger:is(:hover,:focus-visible,:active){
  cursor:pointer!important;
}
html body #app #calendrier .calendar-controls .calendar-filter::before,
html body #app #calendrier .calendar-controls .calendar-filter::after,
html body .footer-main .footer-identity .footer-newsletter-trigger::before,
html body .footer-main .footer-identity .footer-newsletter-trigger::after{
  pointer-events:none!important;
}

/* A quieter gallery control: one light surface, simple arrows and clear markers. */
html body #stageApp .stage-gallery-block .gallery-navigation{
  background:rgba(247,247,244,.78)!important;
  border:1px solid rgba(17,17,17,.06)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.035)!important;
}
html body:has(#stageApp) #stageApp .stage-gallery-block .gallery-navigation button.gallery-arrow,
html body:has(#stageApp) #stageApp .stage-gallery-block .gallery-navigation button.gallery-arrow:hover{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  color:#686864!important;
  transform:none!important;
}
html body:has(#stageApp) #stageApp .stage-gallery-block .gallery-navigation button.gallery-arrow:hover{
  color:#111!important;
}

/* Related destinations use the same card frame and shadow as the home page. */
html body #stageApp .related-section .related-grid>.stage-card{
  grid-column:auto!important;
  border-color:#dcdcd6!important;
  box-shadow:0 8px 24px rgba(20,20,16,.055)!important;
}
html body #stageApp .related-section .related-grid>.stage-card:hover{
  box-shadow:0 14px 32px rgba(20,20,16,.09)!important;
}

/* Booking choices follow the approved lighter card and quantity-control design. */
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .booking-choice,
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .rental-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 112px!important;
  grid-template-rows:auto auto!important;
  gap:12px 10px!important;
  height:auto!important;
  min-height:0!important;
  padding:15px!important;
  border:1px solid rgba(30,30,25,.07)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:0 5px 18px rgba(30,30,25,.035)!important;
}
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .booking-choice-copy,
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .rental-row-copy{
  grid-column:1/-1!important;
  grid-row:1!important;
  align-self:start!important;
  gap:5px!important;
}
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .booking-choice-title,
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .rental-row .rental-name{
  font-size:14px!important;
  line-height:1.3!important;
  font-weight:600!important;
}
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .booking-choice-price,
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .rental-row>strong{
  grid-column:1!important;
  grid-row:2!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  justify-self:start!important;
  align-self:center!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  text-align:left!important;
  font-size:14px!important;
}
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .booking-choice .qty-stepper,
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .rental-row .qty-stepper{
  display:grid!important;
  grid-template-columns:36px 34px 36px!important;
  grid-column:2!important;
  grid-row:2!important;
  justify-self:end!important;
  align-self:center!important;
  width:108px!important;
  height:38px!important;
  overflow:hidden!important;
  border:1px solid #deded8!important;
  border-radius:999px!important;
  background:#f8f8f6!important;
}
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .qty-stepper .qty-step-button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:36px!important;
  height:36px!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  color:#202020!important;
  font-size:17px!important;
  cursor:pointer!important;
}
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .qty-stepper .qty-step-button:disabled{color:#aaa!important}
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .qty-stepper input[type=number]{
  grid-column:auto!important;
  grid-row:auto!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:36px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#111!important;
  font-size:16px!important;
  text-align:center!important;
  -webkit-appearance:textfield!important;
  appearance:textfield!important;
}
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .qty-stepper input[type=number]::-webkit-inner-spin-button,
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .qty-stepper input[type=number]::-webkit-outer-spin-button{
  margin:0!important;
  -webkit-appearance:none!important;
}

/* Align room and bicycle cards when the booking options appear side by side. */
@media(min-width:1181px){
  html body:has(#stageApp) #stageApp#stageApp .booking-form-wide.has-rental .booking-form-grid .booking-choice,
  html body:has(#stageApp) #stageApp#stageApp .booking-form-wide.has-rental .booking-form-grid .rental-row{
    min-height:122px!important;
    grid-template-rows:1fr auto!important;
  }
}

/* Subtle depth for message fields and booking quantity controls. */
html body #app form textarea,
html body #stageApp form textarea,
html body .newsletter-dialog form textarea,
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .booking-choice .qty-stepper,
html body:has(#stageApp) #stageApp#stageApp .booking-form-grid .rental-row .qty-stepper{
  box-shadow:0 3px 10px rgba(20,20,16,.07)!important;
}

/* Match the site's other primary actions in the upcoming-editions section. */
html body:has(#stageApp) #stageApp>.destination-updates .button{
  transition:background-color .2s ease,box-shadow .25s ease,transform .25s ease!important;
}
@media(hover:hover){
  html body:has(#stageApp) #stageApp>.destination-updates .button:hover:not(:disabled){
    box-shadow:0 18px 48px rgba(16,16,16,.05)!important;
    transform:translateY(-2px)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html body:has(#stageApp) #stageApp>.destination-updates .button{
    transition:none!important;
  }
  html body:has(#stageApp) #stageApp>.destination-updates .button:hover{
    transform:none!important;
  }
}

/* Calendar filters share the soft shadow of the booking controls. */
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter:hover,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active:hover{
  box-shadow:0 3px 10px rgba(20,20,16,.07)!important;
}

/* Warm dark surfaces for the footer and existing dark actions. */
html body footer.footer{
  background:rgba(41,38,32,.90)!important;
  -webkit-backdrop-filter:blur(14px) saturate(125%)!important;
  backdrop-filter:blur(14px) saturate(125%)!important;
}
html body:has(#app) #app>section#contact #contactForm>.button,
html body:has(#app) #app>section#contact #contactForm>.button:hover:not(:disabled),
html body:has(#stageApp) #stageApp>.booking-v11 #bookForm>.booking-submit>.button,
html body:has(#stageApp) #stageApp>.booking-v11 #bookForm>.booking-submit>.button:hover:not(:disabled),
html body:has(#stageApp) #stageApp .waitlist-form>.button,
html body:has(#stageApp) #stageApp .waitlist-form>.button:hover:not(:disabled),
html body .newsletter-dialog .newsletter-dialog__form>.newsletter-dialog__submit,
html body .newsletter-dialog .newsletter-dialog__form>.newsletter-dialog__submit:hover:not(:disabled),
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active:hover{
  background:rgba(41,38,32,.90)!important;
  color:#fff!important;
}
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active:hover{
  border-color:rgba(41,38,32,.90)!important;
}

/* Keep the legal links visually separate through spacing alone. */
html body footer.footer .footer-bottom{border-top:0!important}

/* Slightly deeper warm footer tone. */
html body footer.footer{
  background:#dbdbd5!important;
  color:#555550!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body footer.footer .footer-logo{filter:brightness(0)!important}
html body footer.footer .footer-main a:not(.footer-brand),
html body footer.footer .footer-main .footer-newsletter-trigger,
html body footer.footer .footer-main .footer-social-label,
html body footer.footer .footer-main .footer-social-icon,
html body footer.footer .footer-bottom,
html body footer.footer .footer-bottom a{color:#555550!important}
html body footer.footer .footer-main a:not(.footer-brand):hover,
html body footer.footer .footer-main a:not(.footer-brand):focus-visible,
html body footer.footer .footer-main .footer-newsletter-trigger:hover,
html body footer.footer .footer-main .footer-newsletter-trigger:focus-visible,
html body footer.footer .footer-bottom a:hover,
html body footer.footer .footer-bottom a:focus-visible{color:#111!important}

/* Match form actions to the light séjour action and its gentle shadow. */
html body:has(#app) #app>section#contact #contactForm>.button,
html body:has(#stageApp) #stageApp>.booking-v11 #bookForm>.booking-submit>.button,
html body:has(#stageApp) #stageApp .waitlist-form>.button,
html body .newsletter-dialog .newsletter-dialog__form>.newsletter-dialog__submit{
  background:rgba(255,255,255,.78)!important;
  color:#111!important;
  box-shadow:0 4px 16px rgba(0,0,0,.12)!important;
  -webkit-backdrop-filter:blur(8px) saturate(125%)!important;
  backdrop-filter:blur(8px) saturate(125%)!important;
}
@media(hover:hover){
  html body:has(#app) #app>section#contact #contactForm>.button:hover:not(:disabled),
  html body:has(#stageApp) #stageApp>.booking-v11 #bookForm>.booking-submit>.button:hover:not(:disabled),
  html body:has(#stageApp) #stageApp .waitlist-form>.button:hover:not(:disabled),
  html body .newsletter-dialog .newsletter-dialog__form>.newsletter-dialog__submit:hover:not(:disabled){
    background:#fff!important;
    color:#111!important;
    box-shadow:0 6px 18px rgba(0,0,0,.16)!important;
  }
}
html body:has(#app) #app>section#contact #contactForm textarea{
  box-shadow:0 3px 10px rgba(20,20,16,.07)!important;
}

/* Calendar filters use the same light surface, with a clear selected state. */
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter:hover:not(.is-active),
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active:hover{
  background:rgba(255,255,255,.78)!important;
  color:#111!important;
  border:1px solid transparent!important;
  box-shadow:0 4px 16px rgba(0,0,0,.12)!important;
  -webkit-backdrop-filter:blur(8px) saturate(125%)!important;
  backdrop-filter:blur(8px) saturate(125%)!important;
}
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active:hover{
  border-color:rgba(17,17,17,.60)!important;
  font-weight:700!important;
}

/* Former dark actions share the booking quantity control's neutral surface. */
html body:has(#app) #app>section#contact #contactForm>.button,
html body:has(#stageApp) #stageApp>.booking-v11 #bookForm>.booking-submit>.button,
html body:has(#stageApp) #stageApp .waitlist-form>.button,
html body .newsletter-dialog .newsletter-dialog__form>.newsletter-dialog__submit,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active{
  background:#f8f8f6!important;
  color:#111!important;
}

/* Match former dark actions to the quantity selector's outline. */
html body:has(#app) #app>section#contact #contactForm>.button,
html body:has(#app) #app>section#contact #contactForm>.button:hover:not(:disabled),
html body:has(#stageApp) #stageApp>.booking-v11 #bookForm>.booking-submit>.button,
html body:has(#stageApp) #stageApp>.booking-v11 #bookForm>.booking-submit>.button:hover:not(:disabled),
html body:has(#stageApp) #stageApp .waitlist-form>.button,
html body:has(#stageApp) #stageApp .waitlist-form>.button:hover:not(:disabled),
html body .newsletter-dialog .newsletter-dialog__form>.newsletter-dialog__submit,
html body .newsletter-dialog .newsletter-dialog__form>.newsletter-dialog__submit:hover:not(:disabled),
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter:hover:not(.is-active),
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active,
html body:has(#app) #app>section#calendrier.dates-section .calendar-filter.is-active:hover{
  border:1px solid #deded8!important;
}

/* Delineate the start of the footer like the other page sections. */
html body footer.footer{border-top:1px solid #dcdcd6!important}

/* Upcoming-edition actions match the other light outlined buttons. */
html body:has(#stageApp) #stageApp>.destination-updates .button,
html body:has(#stageApp) #stageApp>.destination-updates .button:hover:not(:disabled){
  background:#f8f8f6!important;
  color:#111!important;
  border:1px solid #deded8!important;
  box-shadow:0 4px 16px rgba(0,0,0,.12)!important;
}

/* A discreet link from the experience section to the available stays. */
html body #app>section#experience .experience-discover-link{
  display:table;
  margin:22px auto 0;
  color:#111;
  font-size:14px;
  font-weight:650;
  text-decoration:none;
  border-bottom:1px solid #999991;
  padding-bottom:4px;
  transition:border-color .2s ease;
}
html body #app>section#experience .experience-discover-link:hover{border-color:#111}

/* Editorial experience: a full-width photo followed by three reading columns. */
html body.experience-v141 #app>section#experience .experience-banner{
  display:flex!important;flex-direction:column!important;gap:22px!important;
  width:100%!important;height:auto!important;aspect-ratio:auto!important;
  overflow:visible!important;margin:0!important;border:0!important;
  border-radius:0!important;background:transparent!important;
}
html body.experience-v141 #app>section#experience .experience-photo-frame{
  position:relative!important;inset:auto!important;width:100%!important;
  height:auto!important;min-height:0!important;aspect-ratio:2.2/1!important;
  overflow:hidden!important;border-radius:16px!important;
}
html body.experience-v141 #app>section#experience .experience-banner-image{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center 87%!important;transform:none!important;
}
html body.experience-v141 #app>section#experience .experience-banner-image[data-experience-photo-index]:not([data-experience-photo-index="0"]){object-position:center center!important}
html body.experience-v141 #app>section#experience .experience-v141-benefits{
  position:relative!important;inset:auto!important;display:block!important;
  width:100%!important;height:auto!important;min-height:0!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:auto!important;gap:22px!important;width:100%!important;min-height:0!important;
}
html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature,
html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature:last-child{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  gap:8px!important;min-height:0!important;padding:14px 0 0!important;
  border:0!important;border-top:1px solid #d4d4cd!important;text-align:left!important;
}
html body.experience-v141 #app>section#experience .experience-v141-benefits .feature>div{
  display:flex!important;flex-direction:column!important;gap:6px!important;text-align:left!important;
}
html body.experience-v141 #app>section#experience .experience-v141-benefits .feature h3,
html body.experience-v141 #app>section#experience .experience-v141-benefits .feature p{text-align:left!important}
html body.experience-v141 #app>section#experience .experience-gallery-controls{left:18px!important;right:18px!important}
@media(max-width:760px){
  html body.experience-v141 #app>section#experience .experience-photo-frame{aspect-ratio:4/3!important}
  html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-grid{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  html body.experience-v141 #app>section#experience .experience-gallery-controls{left:10px!important;right:10px!important}
}

/* L’expérience uses the same centered, continuous gallery as the stages. */
html body.experience-v141 #app>section#experience .experience-photo-frame{
  width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;
  height:auto!important;aspect-ratio:auto!important;overflow:visible!important;border-radius:0!important;
}
html body.experience-v141 #app>section#experience .experience-gallery-track{
  --experience-slide-width:min(650px,calc(100vw - 96px));display:flex;gap:18px;
  width:100%;box-sizing:border-box;padding:0 calc((100vw - var(--experience-slide-width))/2);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
html body.experience-v141 #app>section#experience .experience-gallery-track::-webkit-scrollbar{display:none}
html body.experience-v141 #app>section#experience .experience-gallery-slide{
  position:relative;flex:0 0 var(--experience-slide-width);min-width:0;aspect-ratio:3/2;
  overflow:hidden;border-radius:24px;scroll-snap-align:center;scroll-snap-stop:always;background:#e9e9e4;
}
html body.experience-v141 #app>section#experience .experience-gallery-slide img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none;
}
html body.experience-v141 #app>section#experience .experience-gallery-slide img.experience-gallery-mallorca{object-position:center 100%}
html body.experience-v141 #app>section#experience .experience-gallery-nav{
  display:flex;align-items:center;justify-content:space-between;gap:0;width:224px;max-width:calc(100% - 24px);
  box-sizing:border-box;margin:0 auto;padding:5px 8px;border:0;border-radius:999px;
  background:rgba(255,255,255,.82);box-shadow:0 5px 18px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(12px) saturate(125%);backdrop-filter:blur(12px) saturate(125%);
}
html body.experience-v141 #app>section#experience .experience-gallery-nav-arrow{
  display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:0;
  border-radius:50%;background:transparent;font-size:16px;cursor:pointer;box-shadow:none;
}
html body.experience-v141 #app>section#experience .experience-gallery-dots{display:flex;align-items:center;justify-content:center;gap:5px;flex:0 0 132px;width:132px;overflow:hidden}
html body.experience-v141 #app>section#experience .experience-gallery-dot{
  display:block;flex:0 0 5px;width:5px;height:5px;padding:0;border:0;border-radius:999px;
  background:rgba(17,17,17,.28);box-shadow:none;cursor:pointer;
}
html body.experience-v141 #app>section#experience .experience-gallery-dot.is-active{flex-basis:15px;background:#111}
@media(max-width:760px){
 html body.experience-v141 #app>section#experience .experience-gallery-track{--experience-slide-width:min(82vw,340px);gap:12px}
 html body.experience-v141 #app>section#experience .experience-gallery-slide{aspect-ratio:4/3;border-radius:18px}
}
html body.experience-v141 #app>section#experience button.experience-gallery-dot{background:rgba(17,17,17,.28)!important;border:0!important;box-shadow:none!important}
html body.experience-v141 #app>section#experience button.experience-gallery-dot.is-active{background:#111!important}
html body.experience-v141 #app>section#experience .experience-photo-frame>.experience-banner-image[hidden]{display:none!important}

/* Keep the sunset riders centered in their landscape crop. */
html body.experience-v141 #app>section#experience .experience-gallery-slide img[src*="experience-cyclists-sunset-clean-v141"]{object-position:center 74%}

/* Quiet, centered photo indicators for L’expérience. */
html body.experience-v141 #app>section#experience .experience-gallery-nav{
  width:auto!important;max-width:100%!important;justify-content:center!important;
  padding:0!important;background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html body.experience-v141 #app>section#experience .experience-gallery-nav-arrow{display:none!important}
html body.experience-v141 #app>section#experience .experience-gallery-dots{width:auto!important;flex:0 0 auto!important;gap:10px!important;overflow:visible!important}
html body.experience-v141 #app>section#experience button.experience-gallery-dot{position:relative!important;flex:0 0 6px!important;width:6px!important;height:6px!important;border-radius:50%!important}
html body.experience-v141 #app>section#experience button.experience-gallery-dot::before{content:"";position:absolute;inset:-7px}
html body.experience-v141 #app>section#experience button.experience-gallery-dot.is-active{flex-basis:6px!important}
html body.experience-v141 #app>section#experience button.experience-gallery-dot:hover{background:rgba(17,17,17,.55)!important;box-shadow:none!important;transform:none!important}
html body.experience-v141 #app>section#experience button.experience-gallery-dot.is-active:hover{background:#111!important}

/* Match the discreet photo indicators used in L’expérience. */
html body #stageApp .stage-gallery-block .gallery-navigation{
  width:auto!important;max-width:100%!important;justify-content:center!important;
  padding:0!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html body #stageApp .stage-gallery-block .gallery-navigation .gallery-arrow{display:none!important}
html body #stageApp .stage-gallery-block .gallery-dots{
  width:auto!important;max-width:100%!important;flex:0 0 auto!important;gap:10px!important;overflow:visible!important;
}
html body #stageApp .stage-gallery-block button.gallery-dot{
  position:relative!important;flex:0 0 6px!important;width:6px!important;height:6px!important;
  padding:0!important;border:0!important;border-radius:50%!important;
  background:rgba(17,17,17,.28)!important;box-shadow:none!important;
}
html body #stageApp .stage-gallery-block button.gallery-dot::before{content:"";position:absolute;inset:-7px}
html body #stageApp .stage-gallery-block button.gallery-dot.is-active{flex-basis:6px!important;background:#111!important}
html body #stageApp .stage-gallery-block button.gallery-dot:hover{background:rgba(17,17,17,.55)!important;box-shadow:none!important;transform:none!important}
html body #stageApp .stage-gallery-block button.gallery-dot.is-active:hover{background:#111!important}

/* Clean text columns below L’expérience gallery. */
html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey,
html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature,
html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature:last-child{border:0!important}

/* Mobile destination-card indicators. */
html body #app .card-carousel-dots{display:none}
@media(max-width:760px){
 html body #app #itinerants .itinerant-mobile-controls{display:none!important}
 html body #app #itinerants .itinerant-mobile-carousel .card-carousel-dots{display:flex!important}
 html body #app .card-carousel-dots{align-items:center;justify-content:center;gap:10px;margin:18px auto 0;padding:0}
 html body #app .card-carousel-dots button{position:relative!important;display:block!important;flex:0 0 6px!important;width:6px!important;height:6px!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:rgba(17,17,17,.28)!important;box-shadow:none!important;cursor:pointer}
 html body #app .card-carousel-dots button::before{content:"";position:absolute;inset:-7px}
 html body #app .card-carousel-dots button.is-active{background:#111!important}
 html body #app .card-carousel-dots button:hover{transform:none!important;box-shadow:none!important}
}
@media(max-width:600px){
 html body #app .stage-carousel .stage-carousel-arrow{display:none!important}
 html body #app .stage-carousel .card-carousel-dots{display:flex!important}
}
@media(max-width:760px){
 html body:has(#app) #app .card-carousel-dots button:not(.menu){background:rgba(17,17,17,.28)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html body:has(#app) #app .card-carousel-dots button:not(.menu).is-active{background:#111!important}
 html body:has(#app) #app .card-carousel-dots button:not(.menu):hover:not(:disabled){background:rgba(17,17,17,.55)!important;box-shadow:none!important}
 html body:has(#app) #app .card-carousel-dots button:not(.menu).is-active:hover:not(:disabled){background:#111!important}
}
/* Reveal the next destination on small screens. */
@media(max-width:600px){
 html body #app #stages-regular .stage-carousel-track>.stage-card{flex:0 0 88%!important}
 html body #app #itinerants .itinerant-mobile-carousel .stages-grid>.stage-card{flex:0 0 88%!important;width:88%!important;scroll-snap-align:start!important}
 html body #app #itinerants .stage-carousel-track>.stage-card{flex:0 0 88%!important}
}

/* Soft depth around the experience photos, with room inside the scrollport. */
html body.experience-v141 #app>section#experience .experience-gallery-track{
  padding-block:8px 18px!important;margin-block:-8px -18px!important;
}
html body.experience-v141 #app>section#experience .experience-gallery-slide{
  box-shadow:0 5px 14px rgba(17,17,17,.10)!important;
}

/* Match the destination-card shadow on every photo carousel. */
html body.experience-v141 #app>section#experience .experience-gallery-track,
html body #stageApp .stage-gallery-block .gallery-track{
  padding-block:18px 34px!important;margin-block:-18px -34px!important;
}
html body.experience-v141 #app>section#experience .experience-gallery-slide,
html body #stageApp .stage-gallery-block .gallery-slide{
  box-shadow:0 8px 24px rgba(20,20,16,.12)!important;
}

/* Clear, restrained feedback on footer text links. */
html body footer.footer a:not(.footer-brand):not(.footer-social-icon):hover,
html body footer.footer a:not(.footer-brand):not(.footer-social-icon):focus-visible,
html body footer.footer .footer-newsletter-trigger:hover,
html body footer.footer .footer-newsletter-trigger:focus-visible{
  color:#111!important;text-decoration:none!important;
}

/* Match the calendar surface at full opacity; keep footer content legible. */
html body footer.footer{background:#e0e0da!important;color:#333!important}
html body footer.footer .footer-logo{filter:brightness(0)!important}
html body footer.footer .footer-main a:not(.footer-brand),
html body footer.footer .footer-main .footer-newsletter-trigger,
html body footer.footer .footer-main .footer-social-label,
html body footer.footer .footer-main .footer-social-icon,
html body footer.footer .footer-bottom,
html body footer.footer .footer-bottom a{color:#333!important}
html body footer.footer .footer-main a:not(.footer-brand):hover,
html body footer.footer .footer-main a:not(.footer-brand):focus-visible,
html body footer.footer .footer-main .footer-newsletter-trigger:hover,
html body footer.footer .footer-main .footer-newsletter-trigger:focus-visible,
html body footer.footer .footer-bottom a:hover,
html body footer.footer .footer-bottom a:focus-visible{color:#111!important}

/* Calendar grouped by stage destination. */
html body #app #calendrier #calendarList .destination-calendar-list{display:grid;gap:16px}
html body #app #calendrier #calendarList .destination-calendar-card{
 display:grid;grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr);gap:clamp(22px,4vw,60px);
 align-items:start;padding:clamp(22px,2.6vw,34px);border:1px solid rgba(30,30,25,.07);
 border-radius:14px;background:rgba(255,255,255,.78);box-shadow:0 5px 18px rgba(30,30,25,.035);
}
html body #app #calendrier #calendarList .destination-calendar-heading{text-align:left}
html body #app #calendrier #calendarList .destination-calendar-region{
 margin:0 0 8px;color:#777770;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
html body #app #calendrier #calendarList .destination-calendar-heading h3{
 margin:0;color:#111;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.035em;line-height:1.15;
}
html body #app #calendrier #calendarList .destination-calendar-heading>p:not(.destination-calendar-region){margin:7px 0 0;color:#696969;font-size:14px}
html body #app #calendrier #calendarList .destination-calendar-link{display:inline-block;margin-top:20px;color:#30302d;font-size:13px;font-weight:650;text-decoration:none}
html body #app #calendrier #calendarList .destination-calendar-link:hover{text-decoration:none}
html body #app #calendrier #calendarList .destination-calendar-dates{display:grid;min-width:0}
html body #app #calendrier #calendarList .destination-calendar-date{
 display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:45px;padding:10px 0;
 border-bottom:1px solid #deded8;color:#202020;font-size:14px;text-decoration:none;
}
html body #app #calendrier #calendarList .destination-calendar-date:first-child{padding-top:0}
html body #app #calendrier #calendarList .destination-calendar-date:last-child{border-bottom:0;padding-bottom:0}
html body #app #calendrier #calendarList .destination-calendar-date:hover{color:#000}
html body #app #calendrier #calendarList .destination-calendar-status{white-space:nowrap;color:#5e5e57;font-size:12px}
html body #app #calendrier #calendarList .destination-calendar-status[data-state="limited"]{color:#816343}
html body #app #calendrier #calendarList .destination-calendar-status span{display:inline-block;margin-left:6px;color:#111}
html body #app #calendrier #calendarList .destination-calendar-empty{margin:0;color:#696969;font-size:14px}
@media(max-width:760px){
 html body #app #calendrier #calendarList .destination-calendar-card{grid-template-columns:minmax(0,1fr);gap:20px;padding:20px}
 html body #app #calendrier #calendarList .destination-calendar-link{margin-top:12px}
 html body #app #calendrier #calendarList .destination-calendar-date{font-size:13px;gap:8px}
 html body #app #calendrier #calendarList .destination-calendar-status{font-size:11px}
}

/* Compact calendar cards with accessible date disclosures. */
html body #app #calendrier #calendarList .destination-calendar-card{align-items:center}
html body #app #calendrier #calendarList .destination-calendar-disclosure{min-width:0;color:#202020}
html body #app #calendrier #calendarList .destination-calendar-disclosure summary{
 display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;
 list-style:none;font-size:14px;font-weight:650;color:#242421;border-bottom:1px solid #deded8;
}
html body #app #calendrier #calendarList .destination-calendar-disclosure summary::-webkit-details-marker{display:none}
html body #app #calendrier #calendarList .destination-calendar-disclosure summary span{font-size:20px;line-height:1;transition:transform .2s ease}
html body #app #calendrier #calendarList .destination-calendar-disclosure[open] summary span{transform:rotate(180deg)}
html body #app #calendrier #calendarList .destination-calendar-disclosure .destination-calendar-dates{padding-top:14px}
@media(max-width:760px){html body #app #calendrier #calendarList .destination-calendar-card{gap:12px}}

/* Keep closed destination cards uniform; opened cards can grow for their dates. */
html body #app #calendrier #calendarList .destination-calendar-card{min-height:194px}
@media(max-width:760px){html body #app #calendrier #calendarList .destination-calendar-card{min-height:220px}}

/* Three upcoming dates stay visible while destination cards remain aligned. */
html body #app #calendrier #calendarList .destination-calendar-card{align-items:start;min-height:250px}
html body #app #calendrier #calendarList .destination-calendar-schedule{min-width:0;min-height:180px}
html body #app #calendrier #calendarList .destination-calendar-preview{min-height:90px;align-content:start}
html body #app #calendrier #calendarList .destination-calendar-preview .destination-calendar-date{min-height:45px}
html body #app #calendrier #calendarList .destination-calendar-disclosure summary{min-height:40px;font-size:12px}
@media(max-width:760px){html body #app #calendrier #calendarList .destination-calendar-card{min-height:365px}}

/* Three destination columns on desktop; stack them on smaller screens. */
@media(min-width:901px){
 html body #app #calendrier #calendarList .destination-calendar-list{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
 html body #app #calendrier #calendarList .destination-calendar-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:20px;min-height:365px}
}

/* Match date highlighting to the navigation menu. */
html body #app #calendrier #calendarList{border-top:0!important}
html body #app #calendrier #calendarList .destination-calendar-date{transition:background-color .16s ease!important}
@media(hover:hover){html body #app #calendrier #calendarList .destination-calendar-date:hover{background-color:#efefec!important}}
html body #app #calendrier #calendarList .destination-calendar-date:focus-visible{background-color:#efefec!important;outline:2px solid #816343;outline-offset:2px}
/* The destination link lifts gently like the other site buttons. */
html body #app #calendrier #calendarList .destination-calendar-link{transition:transform .2s ease,color .2s ease}
@media(hover:hover){html body #app #calendrier #calendarList .destination-calendar-link:hover{transform:translateY(-2px)}}
html body #app #calendrier #calendarList .destination-calendar-link:focus-visible{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){html body #app #calendrier #calendarList .destination-calendar-link{transition:none!important;transform:none!important}}

/* Extend the date highlight to the inside edges of each card. */
html body #app #calendrier #calendarList .destination-calendar-card{--date-highlight-inset:clamp(22px,2.6vw,34px)}
html body #app #calendrier #calendarList .destination-calendar-date{position:relative;isolation:isolate}
html body #app #calendrier #calendarList .destination-calendar-date::before{
 content:"";position:absolute;z-index:-1;top:0;bottom:0;
 left:calc(1px - var(--date-highlight-inset));right:calc(1px - var(--date-highlight-inset));
 background:transparent;transition:background-color .16s ease;pointer-events:none;
}
@media(hover:hover){
 html body #app #calendrier #calendarList .destination-calendar-date:hover{background-color:transparent!important}
 html body #app #calendrier #calendarList .destination-calendar-date:hover::before{background:#efefec}
}
html body #app #calendrier #calendarList .destination-calendar-date:focus-visible{background-color:transparent!important}
html body #app #calendrier #calendarList .destination-calendar-date:focus-visible::before{background:#efefec}
@media(max-width:760px){html body #app #calendrier #calendarList .destination-calendar-card{--date-highlight-inset:20px}}
@media(prefers-reduced-motion:reduce){html body #app #calendrier #calendarList .destination-calendar-date::before{transition:none}}

/* Calendar: clean date rows and right-aligned destination link. */
html body #app #calendrier #calendarList .destination-calendar-date{border-bottom:0}
html body #app #calendrier #calendarList .destination-calendar-link{display:table;margin-left:auto}

/* Align the destination link with the destination name. */
html body #app #calendrier #calendarList .destination-calendar-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline}
html body #app #calendrier #calendarList .destination-calendar-heading h3{grid-column:1;grid-row:1}
html body #app #calendrier #calendarList .destination-calendar-heading>p:not(.destination-calendar-region){grid-column:1 / -1;grid-row:2}
html body #app #calendrier #calendarList .destination-calendar-link{grid-column:2;grid-row:1;margin:0;white-space:nowrap}

/* Compact cards while retaining room for two dates and the disclosure. */
html body #app #calendrier #calendarList .destination-calendar-schedule{min-height:130px}
@media(min-width:901px){html body #app #calendrier #calendarList .destination-calendar-card{min-height:280px}}
@media(max-width:760px){html body #app #calendrier #calendarList .destination-calendar-card{min-height:280px}}

/* Keep the date highlight balanced around the text without changing the click area. */
html body #app #calendrier #calendarList .destination-calendar-date::before{top:5px;bottom:5px}
html body #app #calendrier #calendarList .destination-calendar-date:first-child:not(:last-child)::before{top:0;bottom:10px}
html body #app #calendrier #calendarList .destination-calendar-date:last-child:not(:first-child)::before{top:10px;bottom:0}

/* Calendar cards have a clean borderless surface. */
html body #app #calendrier #calendarList .destination-calendar-card{border:0}

/* Bring date rows closer while preserving the balanced highlight. */
html body #app #calendrier #calendarList .destination-calendar-preview{min-height:70px}
html body #app #calendrier #calendarList .destination-calendar-date,
html body #app #calendrier #calendarList .destination-calendar-preview .destination-calendar-date,
html body #app #calendrier #calendarList .destination-calendar-date:first-child,
html body #app #calendrier #calendarList .destination-calendar-date:last-child{min-height:35px;padding:0}
html body #app #calendrier #calendarList .destination-calendar-date::before,
html body #app #calendrier #calendarList .destination-calendar-date:first-child:not(:last-child)::before,
html body #app #calendrier #calendarList .destination-calendar-date:last-child:not(:first-child)::before{top:0;bottom:0}


/* Match the subtle lift of the other editorial links. */
html body #stageApp>.stage-hero-v11 .stage-hero-actions>.hero-text-link{transition:transform .2s ease,color .2s ease}
@media(hover:hover){html body #stageApp>.stage-hero-v11 .stage-hero-actions>.hero-text-link:hover{transform:translateY(-2px)}}
html body #stageApp>.stage-hero-v11 .stage-hero-actions>.hero-text-link:focus-visible{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){html body #stageApp>.stage-hero-v11 .stage-hero-actions>.hero-text-link{transition:none!important;transform:none!important}}

/* Center the destination link at the foot of every calendar card. */
html body #app #calendrier #calendarList .destination-calendar-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:14px}
html body #app #calendrier #calendarList .destination-calendar-heading{display:block}
html body #app #calendrier #calendarList .destination-calendar-schedule{min-height:110px}
html body #app #calendrier #calendarList .destination-calendar-card>.destination-calendar-link{grid-column:auto;grid-row:auto;justify-self:center;margin:0;text-align:center}

/* A little less space below the experience gallery indicators. */
@media(min-width:761px){html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature,html body.experience-v141 #app>section#experience .experience-v141-benefits .experience-journey .feature:last-child{padding-top:10px!important}}

/* Match the shared outline and the contact message field’s soft shadow. */
html body #app #calendrier #calendarList .destination-calendar-card{border:1px solid #dcdcd6;box-shadow:0 3px 10px rgba(20,20,16,.07)}

/* Match the information panels to the L’expérience captions. */
html body #stageApp .stage-organisation-v11 .stage-information-panel .info-card h3{font-size:18px!important;line-height:1.2!important}
html body #stageApp .stage-organisation-v11 .stage-information-panel .info-card p{font-size:16px!important;line-height:1.5!important}
@media(max-width:900px){html body #stageApp .stage-organisation-v11 .stage-information-panel .info-card h3,html body #stageApp .stage-organisation-v11 .stage-information-panel .info-card p{font-size:15px!important}}

/* Slightly reduce the vertical space inside calendar cards. */
html body #app #calendrier #calendarList .destination-calendar-card{padding-block:calc(clamp(22px,2.6vw,34px) - 6px)}
@media(min-width:901px){html body #app #calendrier #calendarList .destination-calendar-card{min-height:268px}}
@media(max-width:760px){html body #app #calendrier #calendarList .destination-calendar-card{padding-block:14px;min-height:268px}}

/* Slightly narrower centered editorial information tables. */
@media(min-width:901px){html body #stageApp .stage-organisation-v11 .stage-information-panel{width:94%;margin-left:auto;margin-right:auto}}

/* Airy cards for stage organisation and itinerary spirit. */
html body #stageApp .stage-organisation-v11 .stage-information-panel{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important}
html body #stageApp .stage-organisation-v11 .stage-information-panel .info-card{min-height:0!important;padding:20px 22px!important;background:rgba(255,255,255,.78)!important;border:1px solid #dcdcd6!important;border-radius:12px!important;box-shadow:0 3px 10px rgba(20,20,16,.07)!important}
html body #stageApp .stage-organisation-v11 .stage-information-panel .info-card>span{display:none!important}
html body #stageApp .stage-organisation-v11 .stage-information-panel .info-card h3{margin:0 0 9px!important}
@media(max-width:760px){html body #stageApp .stage-organisation-v11 .stage-information-panel{grid-template-columns:minmax(0,1fr)!important}}

/* Keep all information cards the same size within each section. */
html body #stageApp .stage-organisation-v11 .stage-information-panel{grid-auto-rows:1fr!important;align-items:stretch!important}

/* Bring the first Torrevieja hotel label a little closer to its introduction. */
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp>section.hotel-choice-intro:has(+ .hotel-torrevieja-gallery){padding-bottom:16px!important}
/* Align the assistance note with the organisation cards. */
@media(min-width:901px){html body #stageApp .stage-organisation-v11 .stage-support-note{width:94%;margin-left:auto!important;margin-right:auto!important}}

/* Four stage cards or three itinerary cards across on desktop. */
@media(min-width:901px){html body #stageApp .stage-organisation-v11 .stage-information-panel.stage-program-panel{grid-template-columns:repeat(4,minmax(0,1fr))!important}html body #stageApp .stage-organisation-v11 .stage-information-panel:not(.stage-program-panel){grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:601px) and (max-width:900px){html body #stageApp .stage-organisation-v11 .stage-information-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){html body #stageApp .stage-organisation-v11 .stage-information-panel{grid-template-columns:minmax(0,1fr)!important}}


/* Remove the underline from the stage and itinerary hero link. */
html body:has(#stageApp) #stageApp#stageApp#stageApp .stage-hero-actions>.hero-text-link{text-decoration:none!important;border-bottom:0!important}

/* Contact: copy on the left, a narrower form on the right, aligned at the top. */
@media(min-width:901px){
 html body:has(#app) #app#app#app#app#app>section#contact .contact-grid{
   grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;
   align-items:start!important;gap:clamp(32px,4vw,64px)!important;
 }
 html body:has(#app) #app#app#app#app#app>section#contact .contact-intro{
   grid-column:1!important;grid-row:1!important;align-self:start!important;
   width:auto!important;max-width:620px!important;
 }
 html body:has(#app) #app#app#app#app#app>section#contact .contact-intro-copy{
   max-width:390px!important;margin-left:0!important;text-align:left!important;
 }
 html body:has(#app) #app#app#app#app#app>section#contact #contactForm#contactForm{
   grid-column:2!important;grid-row:1!important;align-self:start!important;
   width:100%!important;max-width:740px!important;justify-self:end!important;
   grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px!important;
 }
 html body:has(#app) #app#app#app#app#app>section#contact #contactForm#contactForm>.contact-email,
 html body:has(#app) #app#app#app#app#app>section#contact #contactForm#contactForm>.contact-subject{grid-column:1/-1!important}
}

/* Compact the mobile calendar cards around their content. */
@media(max-width:760px){
 html body #app #calendrier #calendarList .destination-calendar-list{grid-auto-rows:1fr}
 html body #app #calendrier #calendarList .destination-calendar-list:has(details[open]){grid-auto-rows:auto}
 html body #app #calendrier #calendarList .destination-calendar-card{min-height:0;grid-template-rows:auto 1fr auto;row-gap:10px}
 html body #app #calendrier #calendarList .destination-calendar-schedule,
 html body #app #calendrier #calendarList .destination-calendar-preview{min-height:0}
}
/* Keep the destination link close to the other-dates control. */
html body #app #calendrier #calendarList .destination-calendar-card:has(.destination-calendar-disclosure)>.destination-calendar-link{margin-top:-6px}

/* Mobile calendar: swipe between destinations and keep the action balanced. */
html body #app #calendrier #calendarList .calendar-carousel-dots{display:none}
@media(max-width:760px){
 html body #app #calendrier #calendarList .destination-calendar-list{display:flex!important;gap:12px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:6px 6px 10px;align-items:stretch}
 html body #app #calendrier #calendarList .destination-calendar-list::-webkit-scrollbar{display:none}
 html body #app #calendrier #calendarList .destination-calendar-card{flex:0 0 100%;min-width:0;box-sizing:border-box;scroll-snap-align:center;scroll-snap-stop:always;padding-block:10px;row-gap:10px}
 html body #app #calendrier #calendarList .destination-calendar-card:has(.destination-calendar-disclosure)>.destination-calendar-link{margin-top:0}
 html body #app #calendrier #calendarList .calendar-carousel-dots{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto 0}
 html body #app #calendrier #calendarList .calendar-carousel-dot{position:relative;display:block;width:6px;height:6px;min-width:0;min-height:0;padding:0;border:0;border-radius:50%;background:rgba(17,17,17,.28);box-shadow:none;cursor:pointer}
 html body #app #calendrier #calendarList .calendar-carousel-dot::before{content:"";position:absolute;inset:-7px}
 html body #app #calendrier #calendarList .calendar-carousel-dot.is-active{background:#111}
}

/* Match calendar indicators and destination-card shadows. */
html body #app #calendrier #calendarList .destination-calendar-card{box-shadow:0 8px 24px rgba(20,20,16,.055)!important}
@media(max-width:760px){
 html body #app #calendrier #calendarList .destination-calendar-list{padding:12px 12px 24px!important}
 html body:has(#app) #app #calendrier #calendarList button.calendar-carousel-dot{position:relative!important;display:block!important;flex:0 0 6px!important;width:6px!important;height:6px!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:rgba(17,17,17,.28)!important;box-shadow:none!important;transform:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html body:has(#app) #app #calendrier #calendarList button.calendar-carousel-dot.is-active{background:#111!important}
 html body:has(#app) #app #calendrier #calendarList button.calendar-carousel-dot:hover:not(:disabled){background:rgba(17,17,17,.55)!important}
 html body:has(#app) #app #calendrier #calendarList button.calendar-carousel-dot.is-active:hover:not(:disabled){background:#111!important}
}

/* Match the photo indicator spacing and prevent hard shadow edges on mobile. */
@media(max-width:760px){
 html body #app #calendrier #calendarList .destination-calendar-list{padding-bottom:18px!important}
 html body #app #calendrier #calendarList .calendar-carousel-dots{margin-top:4px}
 html body #app #calendrier #calendarList .destination-calendar-card{box-shadow:0 4px 12px -3px rgba(20,20,16,.045)!important}
}

/* Show a glimpse of neighboring calendar cards on mobile. */
@media(max-width:760px){
 html body #app #calendrier #calendarList .destination-calendar-list{--calendar-card-width:min(80vw,340px);padding-inline:max(12px,calc((100% - var(--calendar-card-width))/2))!important;scroll-padding-inline:max(12px,calc((100% - var(--calendar-card-width))/2))}
 html body #app #calendrier #calendarList .destination-calendar-card{flex-basis:var(--calendar-card-width)!important}
}

/* Center the active stage or stay card on phones while showing its neighbors. */
@media(max-width:600px){
 html body #app #stages-regular .stage-carousel-viewport,
 html body #app #itinerants .stage-carousel-viewport{
  scroll-snap-type:x mandatory!important;
  scroll-padding-inline:9vw!important;
 }
 html body #app #stages-regular .stage-carousel-track,
 html body #app #itinerants .stage-carousel-track{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  padding-inline:9vw!important;
 }
 html body #app #stages-regular .stage-carousel-track>.stage-card,
 html body #app #itinerants .stage-carousel-track>.stage-card{
  flex:0 0 82vw!important;
  scroll-snap-align:center!important;
  scroll-snap-stop:always!important;
 }
 html body #app #itinerants .itinerant-mobile-carousel .stages-grid{
  scroll-snap-type:x mandatory!important;
  scroll-padding-inline:9vw!important;
  padding-inline:9vw!important;
 }
 html body #app #itinerants .itinerant-mobile-carousel .stages-grid>.stage-card{
  flex:0 0 82vw!important;
  width:82vw!important;
  scroll-snap-align:center!important;
  scroll-snap-stop:always!important;
 }
}

/* Related stages and stays: copy left, cards right, aligned at their top edge. */
@media (min-width: 901px){
  html body:has(#stageApp) #stageApp > section.related-section > .container{
    display:grid!important;
    grid-template-columns:minmax(280px,1fr) minmax(0,2fr)!important;
    align-items:start!important;
    gap:clamp(28px,4vw,72px)!important;
  }
  html body:has(#stageApp) #stageApp > section.related-section .section-head{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    align-self:start!important;
    text-align:left!important;
  }
  html body:has(#stageApp) #stageApp > section.related-section .section-head>div{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    text-align:left!important;
  }
  html body:has(#stageApp) #stageApp > section.related-section .section-head .eyebrow,
  html body:has(#stageApp) #stageApp > section.related-section .section-head h2{
    text-align:left!important;
  }
  html body:has(#stageApp) #stageApp > section.related-section .related-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    align-self:start!important;
  }
}

@media (min-width: 901px){
  html body:has(#stageApp) #stageApp > section.related-section.category-itinerants .section-head h2{
    font-size:clamp(34px,3.2vw,48px)!important;
    line-height:var(--editorial-display-line-height,1.08)!important;
    letter-spacing:-.04em!important;
  }
}

/* Keep related-section headings on the same editorial rhythm as the rest of the page. */
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp .related-section .section-head .eyebrow{
  margin:0 0 var(--editorial-kicker-title-gap,10px)!important;
}
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp .related-section .section-head h2{
  margin:0!important;
  line-height:var(--editorial-display-line-height,1.08)!important;
}

/* Same title scale and right-align the single itinerary card. */

@media (min-width: 901px){
  html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.related-section .section-head h2{
    font-size:clamp(34px,3.2vw,48px)!important;
    line-height:var(--editorial-display-line-height,1.08)!important;
    letter-spacing:-.04em!important;
  }
  html body:has(#stageApp) #stageApp > section.related-section.category-itinerants .related-grid > .stage-card:only-child{
    grid-column:2!important;
  }
}

/* Underline footer text links only while hovered or keyboard-focused. */
html body footer.footer .footer-main a:not(.footer-brand):not(.footer-social-icon):is(:hover,:focus-visible),
html body footer.footer .footer-bottom a:is(:hover,:focus-visible),
html body footer.footer .footer-newsletter-trigger:is(:hover,:focus-visible){
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px!important;
}

@media (min-width: 901px){
  /* Match the published contact card width. */
  html body:has(#app) #app#app#app#app#app>section#contact #contactForm#contactForm{
    max-width:580px!important;
  }
}

/* Mobile: align the calendar filters to the active card and let stage/stay
   descriptions use the full width beneath their headings. */
@media(max-width:760px){
  html body:has(#app) #app#app#app#app#app > section#itinerants .section-head > p,
  html body:has(#app) #app#app#app#app#app > div#stages > section#stages-regular .section-head > p{
    width:min(82vw,100%)!important;
    max-width:min(82vw,100%)!important;
    margin-inline:auto!important;
  }
  html body #app>section#calendrier.dates-section .calendar-controls{
    --calendar-card-width:min(80vw,340px);
    width:var(--calendar-card-width)!important;
    margin-left:max(12px,calc((100% - var(--calendar-card-width))/2))!important;
    margin-right:0!important;
    margin-bottom:10px!important;
    justify-content:center!important;
  }
  html body #app #stages-regular .stage-info,
  html body #app #itinerants .stage-info{
    position:relative!important;
    display:block!important;
    min-width:0!important;
    padding:18px!important;
  }
  html body #app #stages-regular .stage-info>div,
  html body #app #itinerants .stage-info>div{
    width:100%!important;
    min-width:0!important;
  }
  html body #app #stages-regular .stage-info h3,
  html body #app #itinerants .stage-info h3{padding-right:48px!important}
  html body #app #stages-regular .stage-info p,
  html body #app #itinerants .stage-info p{
    width:100%!important;
    max-width:none!important;
    overflow-wrap:anywhere!important;
  }
  html body #app #stages-regular .stage-info .circle-arrow,
  html body #app #itinerants .stage-info .circle-arrow{
    position:absolute!important;
    top:16px!important;
    right:16px!important;
  }
}

/* Align each contact checkbox with the first line of its label. */
html body #app>section#calendrier.dates-section .calendar-controls{
  justify-content:center!important;
}

/* Balance the hero copy within the visible photograph below the header. */
html body:has(#app) #app>section.hero .hero-content{
  transform:translateY(14px)!important;
}
@media(max-width:760px){
  html body:has(#app) #app>section.hero .hero-content{transform:translateY(12px)!important}
}
html body #app>section#contact .contact-form>.check{
  align-items:flex-start!important;
}
html body #app>section#contact .contact-form>.check input[type="checkbox"]{
  margin:1px 0 0!important;
}

/* Consistent space before section labels throughout the site. */
html body:has(#app) #app#app#app#app#app > section.intro,
html body:has(#app) #app#app#app#app#app > section#experience,
html body:has(#app) #app#app#app#app#app > section#calendrier,
html body:has(#app) #app#app#app#app#app > section#contact,
html body:has(#app) #app#app#app#app#app > section.category-itinerants,
html body:has(#app) #app#app#app#app#app > div#stages > section.category-section,
html body:has(#app) #app#app#app#app#app > div#stages > section#stages-regular.category-section:first-child,
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.stage-hero-v11 + section.stage-overview-v11,
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.stage-gallery-block,
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.hotel-choice-intro,
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.stage-organisation-v11,
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.booking-v11,
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.related-section,
html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.contact-mini{
  padding-top:50px!important;
}
@media(max-width:760px){
  html body:has(#app) #app#app#app#app#app > section.intro,
  html body:has(#app) #app#app#app#app#app > section#experience,
  html body:has(#app) #app#app#app#app#app > section#calendrier,
  html body:has(#app) #app#app#app#app#app > section#contact,
  html body:has(#app) #app#app#app#app#app > section.category-itinerants,
  html body:has(#app) #app#app#app#app#app > div#stages > section.category-section,
  html body:has(#app) #app#app#app#app#app > div#stages > section#stages-regular.category-section:first-child,
  html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.stage-hero-v11 + section.stage-overview-v11,
  html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.stage-gallery-block,
  html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.hotel-choice-intro,
  html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.stage-organisation-v11,
  html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.booking-v11,
  html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.related-section,
  html body:has(#stageApp) #stageApp#stageApp#stageApp#stageApp#stageApp > section.contact-mini{
    padding-top:42px!important;
  }
}
/* Finite destination galleries aligned with their section labels. */
html body #stageApp .stage-gallery-block .gallery-track{
  --gallery-label-inset:max(24px,calc((100vw - var(--max,1240px))/2));
  padding-left:var(--gallery-label-inset)!important;
  padding-right:max(var(--gallery-label-inset),calc(100vw - var(--gallery-label-inset) - var(--gallery-slide-width)))!important;
  scroll-padding-left:var(--gallery-label-inset)!important;
  scroll-padding-right:0!important;
}
html body #stageApp .stage-gallery-block .gallery-slide{scroll-snap-align:start!important}
@media(max-width:760px){
  html body #stageApp .stage-gallery-block .gallery-track{
    --gallery-label-inset:calc((100vw - var(--gallery-slide-width))/2);
  }
  html body #stageApp .stage-gallery-block>.section-kicker,
  html body #stageApp .stage-gallery-block>.section-kicker>span:first-child{
    text-align:center!important;
    justify-content:center!important;
  }
}

/* Center the home hero in the visible photo below the fixed navigation. */
html body:has(#app) #app>section.hero .hero-content{
  transform:translateY(var(--header-h,72px))!important;
}

/* Keep the destination arrows in one fixed position in every card. */
html body #app .stage-card .stage-info,
html body #stageApp .related-section .stage-card .stage-info{position:relative!important}
html body #app .stage-card .stage-info .circle-arrow,
html body #stageApp .related-section .stage-card .stage-info .circle-arrow{
  position:absolute!important;top:16px!important;right:16px!important;
  margin:0!important;transform:none!important;
}
html body #app .stage-card .stage-info h3,
html body #stageApp .related-section .stage-card .stage-info h3{padding-right:55px!important}
html body #app .stage-card:hover .stage-info .circle-arrow,
html body #app .stage-card>a:focus-visible .stage-info .circle-arrow,
html body #stageApp .related-section .stage-card:hover .stage-info .circle-arrow,
html body #stageApp .related-section .stage-card>a:focus-visible .stage-info .circle-arrow{transform:none!important}

.related-carousel-dots{display:none}
@media(max-width:760px){
  html body.experience-v141 #app>section#experience .section-head>p{
    width:min(82vw,340px)!important;max-width:min(82vw,340px)!important;margin-inline:auto!important;
  }
  html body:has(#stageApp) #stageApp .related-section .related-grid{
    display:flex!important;gap:12px!important;width:100vw!important;max-width:none!important;
    margin-inline:calc(50% - 50vw)!important;padding:18px calc((100vw - min(82vw,340px))/2) 28px!important;
    overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  }
  html body:has(#stageApp) #stageApp .related-section .related-grid::-webkit-scrollbar{display:none}
  html body:has(#stageApp) #stageApp .related-section .related-grid>.stage-card{
    flex:0 0 min(82vw,340px)!important;width:min(82vw,340px)!important;min-width:0!important;scroll-snap-align:center;
  }
  html body:has(#stageApp) #stageApp .related-section .related-carousel-dots{
    display:flex!important;justify-content:center;align-items:center;gap:10px;margin:0 auto;padding:0;
  }
  html body:has(#stageApp) #stageApp .related-section .related-carousel-dot{
    display:block;width:6px;height:6px;min-width:6px;padding:0;border:0;border-radius:50%;background:rgba(17,17,17,.28);box-shadow:none;
  }
  html body:has(#stageApp) #stageApp .related-section .related-carousel-dot.is-active{background:#111}
}

/* Override the older category-specific mobile offsets. */
html body #app #stages-regular .stage-info .circle-arrow,
html body #app #itinerants .stage-info .circle-arrow{
  top:16px!important;right:16px!important;margin:0!important;transform:none!important;
}