/* Les Volets Bleus : lent et doux, la fenêtre en arc qui s'ouvre. */
:root{--ease:cubic-bezier(.25,.6,.3,1);--rv-d:1s}
html,body{overflow-x:clip}

/* Forme finale des arcs (fait partie du design, reste en mouvement réduit) */
.lu-arc{clip-path:inset(0 round 999px 999px 12px 12px);overflow:clip}
.lu-arc img{display:block;width:100%;height:100%;object-fit:cover}

/* Bouton pilule : se remplit de terre-foncé de gauche à droite au survol */
.lu-btn{position:relative;isolation:isolate;overflow:clip}
.lu-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#7E3220;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.lu-btn:hover::before,.lu-btn:focus-visible::before{transform:scaleX(1)}

@media (prefers-reduced-motion:no-preference){
  /* L'arc s'ouvre : une fenêtre étroite qui s'élargit et monte jusqu'à l'arc complet (1,2 s, une fois) */
  .ex-anim .lu-arc[data-rv]{opacity:1;clip-path:inset(38% 34% 0 34% round 999px 999px 12px 12px);transition:clip-path 1.2s var(--ease) calc(var(--i,0) * 160ms)}
  .ex-anim .lu-arc[data-rv].is-in{clip-path:inset(0 round 999px 999px 12px 12px)}
  .ex-anim .lu-arc[data-rv] img{transform:scale(1.08);transition:transform 1.6s var(--ease) calc(var(--i,0) * 160ms)}
  .ex-anim .lu-arc[data-rv].is-in img{transform:none}
  /* Le héros s'ouvre au chargement, sans attendre le défilement. Pas d'opacité : il reste l'image LCP */
  .ex-anim .lu-hero-arc{animation:luOuvre 1.2s var(--ease) .1s both}
  .ex-anim .lu-hero-arc img{animation:luZoom 1.6s var(--ease) .1s both}
  @keyframes luOuvre{from{clip-path:inset(38% 34% 0 34% round 999px 999px 12px 12px)}to{clip-path:inset(0 round 999px 999px 12px 12px)}}
  @keyframes luZoom{from{transform:scale(1.08)}}

  /* Tirages photo : rotation de 4° à 1,5° et fondu, ordinateur seulement */
  .ex-anim [data-rv="tirage"]{transform:translateY(16px)}
  @media (min-width:1024px) and (hover:hover){
    .lu-tirage{transform:rotate(var(--r,1.5deg))}
    .ex-anim .lu-tirage[data-rv]{transform:translateY(24px) rotate(calc(var(--r,1.5deg) * 2.6))}
    .ex-anim .lu-tirage[data-rv].is-in{transform:rotate(var(--r,1.5deg))}
  }
  /* La lettre : les lignes apparaissent l'une après l'autre, fondu seul, 120 ms */
  .ex-anim .lu-lettre .ex-w{opacity:0;transition:opacity 1.1s var(--ease);transition-delay:calc(var(--l,0) * 120ms)}
  .ex-anim .lu-lettre.is-in .ex-w{opacity:1}
  .ex-anim [data-rv="doux"]{transform:translateY(20px)}

  /* Jardin : l'encart remonte de 30 px pendant que la photo glisse un peu (douce, ordinateur) */
  @media (min-width:1024px){@supports (animation-timeline:view()){
    .ex-anim .lu-jardin img{animation:luGlisse linear both;animation-timeline:view();animation-range:cover}
    @keyframes luGlisse{from{transform:scale(1.08) translateY(-3%)}to{transform:scale(1.08) translateY(3%)}}
    .ex-anim .lu-jardin-encart{animation:luEncart linear both;animation-timeline:view();animation-range:entry 20% cover 50%}
    @keyframes luEncart{from{transform:translateY(30px)}}
  }}
  /* Plan « Venir » : la route monte vers le village au fil du défilement */
  @supports (animation-timeline:view()){
    .ex-anim .lu-route{stroke-dasharray:1;animation:luRoute linear both;animation-timeline:view();animation-range:entry 30% cover 60%}
    @keyframes luRoute{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  }
  /* Menu mobile qui glisse depuis le bas */
  .lu-menu{transition:transform .6s var(--ease)}
}
/* Survol des chambres : zoom de 3 % dans l'arc, le prix glisse de 4 px */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .lu-chambre .lu-arc img{transition:transform .9s var(--ease)}
  .lu-chambre:hover .lu-arc img{transform:scale(1.03)}
  .lu-prix{display:inline-block;transition:transform .6s var(--ease)}
  .lu-chambre:hover .lu-prix{transform:translateX(4px)}
}
/* Chambres (ordinateur) : texte collant à droite, sans pin JS */
@media (min-width:1024px){.lu-chambre-texte{position:sticky;top:96px;align-self:start}}