/* Van Trotter — ajustements mobiles.
   Le menu plein écran (burger) remplace la barre de navigation sous 900px. */
.vt-burger{display:none}
@media (max-width:900px){
  nav[data-topnav]{display:none !important}
  .vt-burger{display:inline-flex}
  /* compacter l'en-tête pour que logo + FR/EN + Réserver + burger tiennent sur une ligne */
  a[href="index.html"] > img[src="assets/logo-white.svg"]{height:42px !important}
  div:has(> #navToggle){gap:10px !important}
  div:has(> #navToggle) > a[href="reservation.html"]{padding:10px 16px !important;font-size:14px !important}
}
@media (max-width:360px){
  /* très petits écrans : on sacrifie le sélecteur FR/EN pour garder l'en-tête sur une ligne */
  div:has(> #navToggle) > div[data-no-i18n]{display:none !important}
}

/* Films d'arrière-plan des heros : sur mobile YouTube ne démarre jamais tout
   seul (aucun paramètre n'y change rien), donc video-facade.js pose un bouton
   « Voir le film » — le geste du visiteur autorise la lecture, et le film part
   muet en boucle derrière le titre, comme sur ordinateur. */
.vt-hero-play{display:none}
@media (max-width:900px){
  .vt-hero-cta{position:static !important;padding:0 !important;margin-top:6px}
  .vt-hero-play{position:absolute;left:clamp(20px,5vw,32px);bottom:20px;z-index:3;display:inline-flex;align-items:center;gap:9px;padding:10px 18px 10px 15px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(22,33,31,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-family:'Jost',sans-serif;font-weight:500;font-size:14px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .vt-hero-play > span{display:block;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
}
/* le clavardage passe sous le menu plein écran (contextes d'empilement différents) */
body:has(.vt-burger-cb:checked) .vtcw-tip,
body:has(.vt-burger-cb:checked) .vtcw-launcher,
body:has(.vt-burger-cb:checked) .vtcw-panel{display:none !important}

/* Transition douce entre les pages (navigation même-origine).
   Amélioration progressive : les navigateurs sans View Transitions font une navigation normale. */
@view-transition { navigation: auto; }
/* Respecte la préférence de mouvement réduit. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* Sections « parallax » : sur iOS, background-attachment:fixed dimensionne l'image
   sur le viewport et la sur-agrandit — elle apparaît floue et méconnaissable.
   Sur mobile on repasse en défilement normal et on resserre la hauteur du bloc
   pour éviter la grande zone vide sous le texte. */
@media (max-width:900px){
  div[style*="background-attachment:fixed"]{background-attachment:scroll !important}
  #location{height:clamp(440px,58vh,560px) !important}
  /* le dégradé horizontal ne couvre pas le texte sur un écran étroit : voile plus uniforme */
  #location > div[style*="linear-gradient(90deg"]{background:linear-gradient(180deg,rgba(34,64,61,.55) 0%,rgba(34,64,61,.72) 100%) !important}
  /* Sur mobile le hero affiche la photo au lieu du film : le van dans les pins
     se retrouvait donc deux fois de suite, à deux sections d'intervalle.
     On montre ici une autre photo du même univers. Sur ordinateur le hero joue
     la vidéo, il n'y a pas de doublon — et ce cadrage-là résiste au parallax. */
  #location > div[style*="location-parallax-v3"]{background-image:url('/assets/location-couple.jpg') !important;background-position:center 30% !important}
}

/* Bouton de lecture des vidéos YouTube (voir video-facade.js).
   Sur ordinateur le film démarre seul : seule la vignette est visible le temps
   du chargement. Sur mobile la lecture automatique est refusée par YouTube,
   d'où le bouton — sans lui, le visiteur n'avait qu'un rectangle noir. */
.vt-video-play{display:none}
@media (max-width:900px){
  .vt-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:rgba(22,33,31,.28);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .vt-video-play > span{display:block;width:66px;height:66px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 6px 22px rgba(0,0,0,.28);position:relative}
  .vt-video-play > span::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #16211f}
}