.lbh,.lbp{
  --lb-espace:clamp(2.5rem,6vh,5rem);
  --papier:#FAF9F6;
}

.lbh{
  display:block;
  line-height:0;
  background:var(--papier,#FAF9F6);
}
.lbh picture{display:block}
.lbh img{
  width:100%;
  height:auto;
  display:block;
}

.lbh--final{padding-top:var(--lb-espace)}

.lbv-scene{
  --n:4;
  --ratio:720/931;
  --encre:#1A1A1A;
  --gris:#8C8C8C;
  --papier:#FAF9F6;

  --marge-g:clamp(1rem,2.2vw,2.25rem);
  --marge-h:clamp(1.25rem,4vw,4rem);
  --marge-v:clamp(.75rem,2vh,1.5rem);
  --gap:clamp(10px,1.6vh,20px);
  --gouttiere:clamp(1.5rem,4vw,4rem);
  --cale-texte:0px;
  --haut-entete:0px;

  position:relative;
  background:var(--papier);
}
.lbv-scene *,.lbv-scene *::before,.lbv-scene *::after{box-sizing:border-box}
.lbv-scene p,.lbv-scene h2,.lbv-scene figure{margin:5px}
.lbv-scene a{color:inherit;text-decoration:underline}

.lbv{
  height:calc(100dvh - var(--haut-entete));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  column-gap:var(--gouttiere);
  align-items:stretch;
  padding:var(--marge-v) var(--marge-h) var(--marge-v) var(--marge-g);
  background:var(--papier);
  color:var(--encre);
  font-family:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.lbv__entete,
.lbv__puces{display:none}

.lbv__propos{
  grid-column:1;
  align-self:center;
  translate:0 var(--cale-texte);
  justify-self:start;
  max-width:42ch;
  text-align:left;
}

.lbv-scene .lbv__mentions{
  margin:0 0 clamp(.75rem,2vh,1.25rem);
  font-size:12px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gris);
}

.lbv-scene .lbv__titre{
  margin:0 0 clamp(1.5rem,4vh,2.5rem);
  font-size:clamp(15px,1.35vw,20px);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.2;
  white-space:nowrap;
}

.lbv__textes{
  display:grid;
  width:100%;
}
.lbv-scene .lbv__texte{
  margin:0;
  grid-area:1/1;
  color:#000;
  font-size:14px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.01em;
  text-wrap:pretty;
}

.lbv__texte:not(:first-child){opacity:0}

.lbv__textes[data-sync] .lbv__texte{opacity:0;transition:opacity .3s ease}
.lbv__textes[data-sync] .lbv__texte.is-active{opacity:1}

.lbv-scene .lbv__note{
  margin:clamp(1.5rem,4vh,2.5rem) 0 0;
  font-size:12px;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.4;
  color:var(--gris);
}

.lbv-scene .lbv__cta{
  margin:.375rem 0 0;
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.2;
}

.lbv__cta a{display:inline-block}
.lbv__cta a:focus-visible{outline:1px solid var(--encre);outline-offset:4px}

.lbv__galerie{
  grid-column:2;
  height:100%;
  aspect-ratio:var(--ratio);
  max-width:min(100%,56vw);

  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  scroll-snap-type:y proximity;
  scroll-behavior:smooth;
  touch-action:pan-y;
  scrollbar-width:none;
}
.lbv__galerie::-webkit-scrollbar{display:none}
.lbv__galerie:focus-visible{outline:1px solid var(--encre);outline-offset:2px}

.lbv__piste{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  will-change:transform;
}
.lbv__vue{
  flex:0 0 100%;
  scroll-snap-align:start;
  overflow:hidden;
}
.lbv__vue img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.lbv__logo{
  grid-column:3;
  align-self:center;
  justify-self:center;
}

.lbv__logo--img{display:block;width:clamp(120px,14vw,220px);height:auto}

@supports (animation-timeline:view()){
  .lbv-scene{
    height:calc(var(--n) * (100dvh - var(--haut-entete)));
    view-timeline:--lbv block;
  }
  .lbv{position:sticky;top:var(--haut-entete)}

  .lbv__galerie{
    overflow:hidden;
    scroll-snap-type:none;
  }

  .lbv__piste,
  .lbv__texte{
    animation:linear both;
    animation-timeline:--lbv;
    animation-range:contain 0% contain 100%;
  }

  .lbv__piste{animation-name:lbv-defiler}
  @keyframes lbv-defiler{
    from{transform:translateY(0)}

    to{transform:translateY(calc(-1 * (var(--n) - 1) * (100% + var(--gap))))}
  }

  .lbv__texte:nth-child(1){animation-name:lbv-look1}
  .lbv__texte:nth-child(2){animation-name:lbv-look2}
  .lbv__texte:nth-child(3){animation-name:lbv-look3}
  .lbv__texte:nth-child(4){animation-name:lbv-look4}
  @keyframes lbv-look1{0%,17%{opacity:1}26%,100%{opacity:0}}
  @keyframes lbv-look2{0%,17%{opacity:0}26%,42%{opacity:1}50%,100%{opacity:0}}
  @keyframes lbv-look3{0%,50%{opacity:0}58%,75%{opacity:1}83%,100%{opacity:0}}
  @keyframes lbv-look4{0%,83%{opacity:0}92%,100%{opacity:1}}
}

@media (max-width:767px){
  .lbv-scene,.lbp{--marge-mob:clamp(1.25rem,5vw,1.75rem)}

  .lbv-scene{
    height:auto;
    --haut-entete:0px;

    --marge-g:var(--marge-mob);
    --marge-h:var(--marge-mob);

    --air-s:.5rem;
    --air-m:1rem;
    --air-l:clamp(1.5rem,6vw,2.25rem);

    --apercu:10%;
    --filet:10px;
  }
  .lbv{
    position:static;
    height:auto;
    grid-template-columns:1fr;
    grid-template-rows:repeat(8,auto);
    row-gap:0;
    padding:0 var(--marge-h) var(--air-l) var(--marge-g);
  }
  .lbv__propos{
    display:contents;
    translate:none;
  }

  .lbv__entete{
    display:block;
    grid-row:1;grid-column:1;
    align-self:start;
    justify-self:center;
    width:calc(100% + var(--marge-g) + var(--marge-h));
    margin-inline:calc(-1 * var(--marge-g)) calc(-1 * var(--marge-h));
    height:auto;
    max-height:none;
    object-fit:contain;
  }

  .lbv-scene .lbv__mentions{
    grid-row:2;grid-column:1;
    margin:var(--air-l) 0 0;
  }

  .lbv-scene .lbv__titre{
    grid-row:3;grid-column:1;
    margin:var(--air-s) 0 0;
    white-space:normal;
  }
  .lbv__textes{
    grid-row:4;grid-column:1;
    max-width:none;
    margin-top:var(--air-m);
    animation:none;
  }
  .lbv-scene .lbv__texte{
    margin:0;
    animation:none;
  }
  .lbv-scene .lbv__note{grid-row:5;grid-column:1;margin:var(--air-l) 0 0}
  .lbv-scene .lbv__cta{grid-row:6;grid-column:1;margin:.375rem 0 0}

  .lbv__logo{display:none}

  .lbv__galerie{
    grid-row:7;grid-column:1;
    width:calc(100% + var(--marge-g) + var(--marge-h));
    margin-inline:calc(-1 * var(--marge-g)) calc(-1 * var(--marge-h));
    margin-top:var(--air-l);
    height:auto;
    max-width:none;
    aspect-ratio:auto;

    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    touch-action:auto;
  }
  .lbv__piste{
    flex-direction:row;
    height:auto;
    gap:var(--filet);
    padding-inline:var(--apercu);
    animation:none;
    transform:none;
    will-change:auto;
  }

  .lbv__vue{
    flex:0 0 100%;
    margin:0;
    aspect-ratio:var(--ratio);
    scroll-snap-align:center;
    scroll-snap-stop:always;
    opacity:.45;
    transition:opacity .3s ease;
  }
  .lbv__vue.is-active{opacity:1}

  .lbv__puces{
    display:flex;
    grid-row:8;grid-column:1;
    justify-content:center;
    gap:8px;
    margin:var(--air-m) 0 0;
    padding:0;
  }
  .lbv__puce{
    width:6px;height:6px;
    padding:0;border:0;border-radius:50%;
    background:#D8D4CC;
    transition:background .25s ease;
    cursor:pointer;
  }
  .lbv__puce.is-active{background:var(--encre)}
  .lbv__puce:focus-visible{outline:1px solid var(--encre);outline-offset:3px}
}

@media (prefers-reduced-motion:reduce){
  .lbv__galerie{scroll-behavior:auto}
  .lbv__vue{transition:none}
  .lbv__textes[data-sync] .lbv__texte{transition:none}
}

.lbp{
  --par-vue:5;
  --encre:#1A1A1A;
  --gris:#6E6E6E;
  --gap:6px;
  --marge:0px;
  --ratio:2/3;

  padding:var(--lb-espace) 0 clamp(2rem,5vh,3.5rem);
  background:var(--papier);
  color:var(--encre);
  font-family:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.lbp *,.lbp *::before,.lbp *::after{box-sizing:border-box}
.lbp p{margin:0}
.lbp a{color:inherit;text-decoration:none;display:block}
.lbp a:hover{text-decoration:none}

.lbp__piste{
  display:flex;
  gap:var(--gap);
  padding-inline:var(--marge);

  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  touch-action:pan-x;
  scrollbar-width:none;
}
.lbp__piste::-webkit-scrollbar{display:none}
.lbp__piste:focus-visible{outline:1px solid var(--encre);outline-offset:4px}

.lbp__article{
  flex:0 0 calc((100% - (var(--par-vue) - 1) * var(--gap)) / var(--par-vue));
  scroll-snap-align:start;
}
.lbp__visuel{
  width:100%;
  aspect-ratio:var(--ratio);
  overflow:hidden;
  background:#F1EFEA;
}
.lbp__visuel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lbp__nom,
.lbp__prix{
  font-family:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.4;
}

.lbp__legende{padding-top:15px}
.lbp p.lbp__nom{font-weight:500}
.lbp p.lbp__prix{
  font-weight:400;
  color:var(--gris);
}

.lbp--encadre{
  --par-vue:4;
  --marge:clamp(1.25rem,7vw,5.5rem);
}
.lbp__intro{
  padding-inline:var(--marge);
  margin-bottom:clamp(1.5rem,4vh,2.75rem);
}
.lbp__intro p{
  max-width:52ch;
  font-size:14px;
  font-weight:300;
  line-height:1.6;
  letter-spacing:.01em;
  text-wrap:pretty;
}

@media (max-width:1024px){
  .lbp,
  .lbp--encadre{--par-vue:3}
}

@media (max-width:767px){
  .lbp{
    --ratio-grand:3/4;
    --large-grand:74%;
    --gap-ligne:clamp(1rem,5vw,1.5rem);
  }

  .lbh,.lbp{--lb-espace:clamp(2rem,7vw,3rem)}

  .lbp,
  .lbp--encadre{--marge:calc(var(--marge-mob) * .5)}

  .lbp__intro{padding-inline:var(--marge-mob)}

  .lbp__piste{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--gap);
    row-gap:var(--gap-ligne);

    overflow:visible;
    scroll-snap-type:none;
    touch-action:auto;
  }

  .lbp__article:last-child:nth-child(odd){
    grid-column:1/-1;
    width:var(--large-grand);
    justify-self:center;
  }
  .lbp__article:last-child:nth-child(odd) .lbp__visuel{
    aspect-ratio:var(--ratio-grand);
  }
}

@media (prefers-reduced-motion:reduce){
  .lbp__piste{scroll-behavior:auto}
}